Fixing multi argument Constructors. Adding a layout system! Flex and fixed within a column

src/compiler.ts

@@ -43,13 +43,28 @@ export function compile(ast: AST, ctx: CompileCtx = defaultCtx): string {
         }
 
         case 'apply':
-            // Constructor
-            if (ast.func.kind === 'constructor') {
-                const ctorName = ast.func.name;
-                const arg = compile(ast.args[0], ctx);
-                return `({ _tag: "${ctorName}", _0: ${arg} })`;
+            // Collect constructor args from nested applie
+            let node: AST = ast;
+            const ctorArgs: AST[] = [];
+            while (node.kind === 'apply' && node.func.kind !== 'constructor') {
+                // Check if inner func is a constructor chain
+                if (node.func.kind === 'apply') {
+                    ctorArgs.unshift(node.args[0]);
+                    node = node.func;
+                } else {
+                    break;
+                }
             }
 
+            // Constructor
+            if (node.kind === 'apply' && node.func.kind === 'constructor') {
+                ctorArgs.unshift(node.args[0]);
+                const ctorName = node.func.name;
+                const compiledArgs = ctorArgs.map((a, i) => `_${i}: ${compile(a, ctx)}`).join(', ');
+                return `({ _tag: "${ctorName}", ${compiledArgs} })`;
+            }
+
+            // Function application
             const args = ast.args.map(a => compile(a, ctx)).join(')(');
             return `${compile(ast.func, ctx)}(${args})`;