english-lang 0.2.3 → 0.2.5

package/dist/src/codegen/ReactNativeBackend.js

@@ -60,14 +60,24 @@ class ReactNativeBackend {
         if (rnImports.length) {
             this.line(`import { ${rnImports.join(', ')} } from 'react-native';`);
         }
+        if (this.hasSlider(screen.layout)) {
+            this.line(`import Slider from '@react-native-community/slider';`);
+        }
         this.line('');
         // Type interfaces (noun declarations)
         for (const type of types) {
             this.emitTypeDecl(type);
         }
         // Component function
-        this.line(`export function ${screen.name}({ navigation }: any) {`);
+        const hasRouteParams = screen.receives && screen.receives.length > 0;
+        const propsArg = hasRouteParams ? '{ navigation, route }' : '{ navigation }';
+        this.line(`export function ${screen.name}(${propsArg}: any) {`);
         this.depth++;
+        // Destructure navigation params
+        if (hasRouteParams) {
+            this.line(`const { ${screen.receives.join(', ')} } = (route.params ?? {}) as any;`);
+            this.line('');
+        }
         // useState hooks
         for (const field of screen.state) {
             const tsType = this.tsType(field, stateVarTypes);
@@ -80,10 +90,22 @@ class ReactNativeBackend {
         // useEffect for screen opens
         const screenOpensHandler = screen.events.find(e => e.trigger.kind === 'ScreenOpens');
         if (screenOpensHandler) {
+            const isAsync = this.bodyIsAsync(screenOpensHandler.body);
             this.line('useEffect(() => {');
             this.depth++;
-            for (const stmt of screenOpensHandler.body) {
-                this.emitStatement(stmt, stateVarTypes);
+            if (isAsync) {
+                this.line('(async () => {');
+                this.depth++;
+                for (const stmt of screenOpensHandler.body) {
+                    this.emitStatement(stmt, stateVarTypes);
+                }
+                this.depth--;
+                this.line('})();');
+            }
+            else {
+                for (const stmt of screenOpensHandler.body) {
+                    this.emitStatement(stmt, stateVarTypes);
+                }
             }
             this.depth--;
             this.line('}, []);');
@@ -94,7 +116,8 @@ class ReactNativeBackend {
             if (event.trigger.kind !== 'ButtonPressed')
                 continue;
             const fnName = buttonHandlers.get(event.trigger.label);
-            this.line(`const ${fnName} = () => {`);
+            const asyncKw = this.bodyIsAsync(event.body) ? 'async ' : '';
+            this.line(`const ${fnName} = ${asyncKw}() => {`);
             this.depth++;
             for (const stmt of event.body) {
                 this.emitStatement(stmt, stateVarTypes);
@@ -218,6 +241,10 @@ class ReactNativeBackend {
                     }
                     this.depth--;
                 }
+                else {
+                    this.line(`} catch (_e) {`);
+                    this.line(`  // network error — add "on failure: (err) ->" to handle it`);
+                }
                 this.line(`}`);
                 break;
             }
@@ -274,7 +301,7 @@ class ReactNativeBackend {
     emitLayoutNode(node, handlers, stateVars) {
         switch (node.kind) {
             case 'VerticalStack': {
-                const styleAttr = this.stackStyleAttr('column', node.spacing, node.padding);
+                const styleAttr = this.buildStackStyle('column', node);
                 this.line(`<View${styleAttr}>`);
                 this.depth++;
                 for (const child of node.children)
@@ -284,7 +311,7 @@ class ReactNativeBackend {
                 break;
             }
             case 'HorizontalStack': {
-                const styleAttr = this.stackStyleAttr('row', node.spacing, null);
+                const styleAttr = this.buildStackStyle('row', node);
                 this.line(`<View${styleAttr}>`);
                 this.depth++;
                 for (const child of node.children)
@@ -295,7 +322,8 @@ class ReactNativeBackend {
             }
             case 'ScrollView': {
                 const horizontal = node.direction === 'horizontal' ? ' horizontal' : '';
-                this.line(`<ScrollView${horizontal}>`);
+                const svColor = node.color ? ` style={{ backgroundColor: '${node.color}' }}` : '';
+                this.line(`<ScrollView${horizontal}${svColor}>`);
                 this.depth++;
                 for (const child of node.children)
                     this.emitLayoutNode(child, handlers, stateVars);
@@ -304,9 +332,12 @@ class ReactNativeBackend {
                 break;
             }
             case 'Grid': {
-                // Use FlatList with numColumns for grids
-                this.line(`{/* grid ${node.columns} columns */}`);
-                this.line(`<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: ${node.spacing ?? 0} }}>`);
+                const gridParts = [`flexDirection: 'row'`, 'flexWrap: \'wrap\''];
+                if (node.spacing)
+                    gridParts.push(`gap: ${node.spacing}`);
+                if (node.color)
+                    gridParts.push(`backgroundColor: '${node.color}'`);
+                this.line(`<View style={{ ${gridParts.join(', ')} }}>`);
                 this.depth++;
                 for (const child of node.children)
                     this.emitLayoutNode(child, handlers, stateVars);
@@ -315,8 +346,26 @@ class ReactNativeBackend {
                 break;
             }
             case 'Card': {
-                const radius = node.cornerRadius ?? 8;
-                this.line(`<View style={[styles.card, { borderRadius: ${radius} }]}>`);
+                const cardParts = [];
+                if (node.cornerRadius != null)
+                    cardParts.push(`borderRadius: ${node.cornerRadius}`);
+                if (node.color)
+                    cardParts.push(`backgroundColor: '${node.color}'`);
+                if (node.borderColor)
+                    cardParts.push(`borderColor: '${node.borderColor}', borderWidth: 1`);
+                const cardStyle = cardParts.length
+                    ? `[styles.card, { ${cardParts.join(', ')} }]`
+                    : 'styles.card';
+                this.line(`<View style={${cardStyle}}>`);
+                this.depth++;
+                for (const child of node.children)
+                    this.emitLayoutNode(child, handlers, stateVars);
+                this.depth--;
+                this.line(`</View>`);
+                break;
+            }
+            case 'Overlay': {
+                this.line(`<View style={{ position: 'relative' }}>`);
                 this.depth++;
                 for (const child of node.children)
                     this.emitLayoutNode(child, handlers, stateVars);
@@ -325,7 +374,7 @@ class ReactNativeBackend {
                 break;
             }
             case 'Text': {
-                const styleRef = this.textStyleRef(node.style, node.color);
+                const styleRef = this.textStyleRef(node);
                 const content = this.exprToJSX(node.expr, stateVars);
                 this.line(`<Text${styleRef}>${content}</Text>`);
                 break;
@@ -333,16 +382,25 @@ class ReactNativeBackend {
             case 'Button': {
                 const handler = handlers.get(node.label);
                 const onPress = handler ? ` onPress={${handler}}` : ' onPress={() => {}}';
-                this.line(`<TouchableOpacity style={styles.button}${onPress}>`);
+                const disabled = node.disabled ? ' disabled' : '';
+                const btnParts = [];
+                if (node.outline) {
+                    btnParts.push(`borderWidth: 1`, `borderColor: '${node.color ?? '#007AFF'}'`, `backgroundColor: 'transparent'`);
+                }
+                else if (node.color) {
+                    btnParts.push(`backgroundColor: '${node.color}'`);
+                }
+                const btnStyle = btnParts.length ? `[styles.button, { ${btnParts.join(', ')} }]` : 'styles.button';
+                const txtStyle = node.textColor ? `[styles.buttonText, { color: '${node.textColor}' }]` : 'styles.buttonText';
+                this.line(`<TouchableOpacity style={${btnStyle}}${onPress}${disabled}>`);
                 this.depth++;
-                this.line(`<Text style={styles.buttonText}>${node.label}</Text>`);
+                this.line(`<Text style={${txtStyle}}>${node.label}</Text>`);
                 this.depth--;
                 this.line(`</TouchableOpacity>`);
                 break;
             }
             case 'TextField': {
                 const setter = setterName(node.boundTo);
-                const placeholder = node.placeholder ? ` placeholder="${node.placeholder}"` : '';
                 this.line(`<TextInput`);
                 this.depth++;
                 this.line(`style={styles.input}`);
@@ -350,20 +408,38 @@ class ReactNativeBackend {
                 this.line(`onChangeText={${setter}}`);
                 if (node.placeholder)
                     this.line(`placeholder="${node.placeholder}"`);
+                if (node.multiline)
+                    this.line(`multiline`);
+                if (node.secure)
+                    this.line(`secureTextEntry`);
+                if (node.keyboard)
+                    this.line(`keyboardType="${node.keyboard}"`);
                 this.depth--;
                 this.line(`/>`);
                 break;
             }
             case 'Image': {
                 const src = this.emitExpr(node.source);
-                const w = node.width ? node.width : 'undefined';
-                const h = node.height ? node.height : 'undefined';
-                this.line(`<Image source={{ uri: ${src} }} style={{ width: ${w}, height: ${h} }} />`);
+                const imgParts = [];
+                if (node.width)
+                    imgParts.push(`width: ${node.width}`);
+                if (node.height)
+                    imgParts.push(`height: ${node.height}`);
+                if (node.rounded) {
+                    const r = Math.min(node.width ?? 50, node.height ?? 50) / 2;
+                    imgParts.push(`borderRadius: ${r}`);
+                }
+                const imgStyle = imgParts.length ? `{ ${imgParts.join(', ')} }` : '{}';
+                this.line(`<Image source={{ uri: ${src} }} style={${imgStyle}} />`);
                 break;
             }
-            case 'Icon':
-                this.line(`{/* Icon: ${node.name} */}`);
+            case 'Icon': {
+                const size = node.size ?? 24;
+                const color = node.color ? ` color="${node.color}"` : '';
+                this.line(`{/* Icon: ${node.name} — install react-native-vector-icons */}`);
+                this.line(`{/* <Icon name="${node.name}" size={${size}}${color} /> */}`);
                 break;
+            }
             case 'Spacer':
                 this.line(`<View style={{ flex: 1 }} />`);
                 break;
@@ -372,7 +448,30 @@ class ReactNativeBackend {
                 break;
             case 'LoadingSpinner': {
                 const centered = node.centered ? ` style={{ alignSelf: 'center' }}` : '';
-                this.line(`<ActivityIndicator${centered} />`);
+                const color = node.color ? ` color="${node.color}"` : '';
+                this.line(`<ActivityIndicator${centered}${color} />`);
+                break;
+            }
+            case 'Switch': {
+                const setter = setterName(node.boundTo);
+                const trackColor = node.color
+                    ? ` trackColor={{ false: '#767577', true: '${node.color}' }}`
+                    : '';
+                this.line(`<Switch value={${node.boundTo}} onValueChange={${setter}}${trackColor} />`);
+                break;
+            }
+            case 'Slider': {
+                const setter = setterName(node.boundTo);
+                this.line(`<Slider`);
+                this.depth++;
+                this.line(`minimumValue={${node.min}}`);
+                this.line(`maximumValue={${node.max}}`);
+                if (node.step != null)
+                    this.line(`step={${node.step}}`);
+                this.line(`value={${node.boundTo}}`);
+                this.line(`onValueChange={${setter}}`);
+                this.depth--;
+                this.line(`/>`);
                 break;
             }
             case 'ForEach': {
@@ -572,6 +671,36 @@ class ReactNativeBackend {
         };
         return map[name] ?? name;
     }
+    bodyIsAsync(stmts) {
+        return stmts.some(s => {
+            if (s.kind === 'FetchStatement')
+                return true;
+            if (s.kind === 'IfStatement') {
+                return this.bodyIsAsync(s.thenBody)
+                    || s.otherwiseIfBranches.some(b => this.bodyIsAsync(b.body))
+                    || (s.elseBody ? this.bodyIsAsync(s.elseBody) : false);
+            }
+            return false;
+        });
+    }
+    hasSlider(layout) {
+        const scan = (nodes) => {
+            for (const node of nodes) {
+                if (node.kind === 'Slider')
+                    return true;
+                if ('children' in node && scan(node.children))
+                    return true;
+                if ('thenBranch' in node) {
+                    if (scan(node.thenBranch))
+                        return true;
+                    if (node.elseBranch && scan(node.elseBranch))
+                        return true;
+                }
+            }
+            return false;
+        };
+        return scan(layout);
+    }
     buildButtonHandlerMap(events) {
         const map = new Map();
         for (const e of events) {
@@ -605,6 +734,10 @@ class ReactNativeBackend {
                     case 'ScrollView':
                         needed.add('ScrollView');
                         break;
+                    case 'Switch':
+                        needed.add('Switch');
+                        break;
+                    // Slider comes from @react-native-community/slider, imported separately
                 }
                 if ('children' in node)
                     scan(node.children);
@@ -620,18 +753,38 @@ class ReactNativeBackend {
         scan(layout);
         return Array.from(needed).sort();
     }
-    textStyleRef(style, color) {
-        const styleStr = `styles.${style}`;
-        if (!color)
-            return ` style={${styleStr}}`;
-        return ` style={[${styleStr}, { color: '${color}' }]}`;
+    textStyleRef(node) {
+        const inline = [];
+        if (node.color)
+            inline.push(`color: '${node.color}'`);
+        if (node.size)
+            inline.push(`fontSize: ${node.size}`);
+        if (node.bold)
+            inline.push(`fontWeight: 'bold' as const`);
+        if (node.italic)
+            inline.push(`fontStyle: 'italic' as const`);
+        if (inline.length === 0)
+            return ` style={styles.${node.style}}`;
+        return ` style={[styles.${node.style}, { ${inline.join(', ')} }]}`;
     }
-    stackStyleAttr(direction, spacing, padding) {
+    buildStackStyle(direction, node) {
         const parts = [`flexDirection: '${direction}'`];
-        if (spacing)
-            parts.push(`gap: ${spacing}`);
-        if (padding)
-            parts.push(`padding: ${padding}`);
+        if (node.spacing)
+            parts.push(`gap: ${node.spacing}`);
+        if (node.padding)
+            parts.push(`padding: ${node.padding}`);
+        if (node.color)
+            parts.push(`backgroundColor: '${node.color}'`);
+        if (node.borderColor)
+            parts.push(`borderColor: '${node.borderColor}', borderWidth: 1`);
+        if (node.borderRadius)
+            parts.push(`borderRadius: ${node.borderRadius}`);
+        if (node.opacity)
+            parts.push(`opacity: ${node.opacity}`);
+        if (node.align)
+            parts.push(`alignItems: '${node.align}'`);
+        if (node.justify)
+            parts.push(`justifyContent: '${node.justify}'`);
         return ` style={{ ${parts.join(', ')} }}`;
     }
     // ── Output helpers ────────────────────────────────────────

package/dist/src/parser/Parser.js

@@ -55,6 +55,7 @@ class Parser {
         this.expect('NEWLINE');
         this.expect('INDENT');
         let title = null;
+        const receives = [];
         const state = [];
         const events = [];
         const actions = [];
@@ -70,6 +71,21 @@ class Parser {
                 title = this.expect('STRING').value;
                 this.expectNewline();
             }
+            else if (word === 'receives') {
+                // receives: param1, param2 ...  (navigation route.params)
+                this.consumeWord();
+                this.expect('COLON');
+                this.expect('NEWLINE');
+                this.expect('INDENT');
+                while (!this.check('DEDENT') && !this.check('EOF')) {
+                    this.skipNewlines();
+                    if (this.check('DEDENT'))
+                        break;
+                    receives.push(this.expectWord());
+                    this.expectNewline();
+                }
+                this.expect('DEDENT');
+            }
             else if (word === 'state') {
                 this.consumeWord();
                 this.expect('COLON');
@@ -110,7 +126,7 @@ class Parser {
             }
         }
         this.expect('DEDENT');
-        return { kind: 'ScreenDecl', name, title, state, events, actions, layout, line };
+        return { kind: 'ScreenDecl', name, title, receives, state, events, actions, layout, line };
     }
     // ── State field ───────────────────────────────────────────
     //
@@ -663,6 +679,12 @@ class Parser {
         }
         if (word === 'loading')
             return this.parseLoadingSpinner();
+        if (word === 'switch')
+            return this.parseSwitch();
+        if (word === 'slider')
+            return this.parseSlider();
+        if (word === 'overlay')
+            return this.parseOverlay();
         if (word === 'if')
             return this.parseLayoutIf();
         if (word === 'for')
@@ -672,12 +694,18 @@ class Parser {
             return this.parseComponentCall();
         throw this.error(`Unknown layout element "${word}"`);
     }
-    // vertical stack [spacing N] [padding N]:
+    // vertical stack [spacing N] [padding N] [color X] [border color X] [rounded N] [opacity N] [align X] [justify X]:
     parseVerticalStack() {
         this.expectWord('vertical');
         this.expectWord('stack');
         let spacing = null;
         let padding = null;
+        let color = null;
+        let borderColor = null;
+        let borderRadius = null;
+        let opacity = null;
+        let align = null;
+        let justify = null;
         while (this.check('WORD')) {
             const kw = this.peekWord();
             if (kw === 'spacing') {
@@ -688,6 +716,36 @@ class Parser {
                 this.consumeWord();
                 padding = parseFloat(this.expect('NUMBER').value);
             }
+            else if (kw === 'color') {
+                this.consumeWord();
+                color = this.check('STRING') ? this.advance().value : this.expectWord();
+            }
+            else if (kw === 'border') {
+                this.consumeWord();
+                if (this.peekWord() === 'color') {
+                    this.consumeWord();
+                    borderColor = this.check('STRING') ? this.advance().value : this.expectWord();
+                }
+                else {
+                    borderRadius = parseFloat(this.expect('NUMBER').value);
+                }
+            }
+            else if (kw === 'rounded') {
+                this.consumeWord();
+                borderRadius = parseFloat(this.expect('NUMBER').value);
+            }
+            else if (kw === 'opacity') {
+                this.consumeWord();
+                opacity = parseFloat(this.expect('NUMBER').value);
+            }
+            else if (kw === 'align') {
+                this.consumeWord();
+                align = this.expectWord();
+            }
+            else if (kw === 'justify') {
+                this.consumeWord();
+                justify = this.expectWord();
+            }
             else
                 break;
         }
@@ -696,77 +754,150 @@ class Parser {
         this.expect('INDENT');
         const children = this.parseLayoutNodes();
         this.expect('DEDENT');
-        return { kind: 'VerticalStack', spacing, padding, children };
+        return { kind: 'VerticalStack', spacing, padding, color, borderColor, borderRadius, opacity, align, justify, children };
     }
-    // horizontal stack [spacing N]:
+    // horizontal stack [spacing N] [padding N] [color X] [border color X] [rounded N] [opacity N] [align X] [justify X]:
     parseHorizontalStack() {
         this.expectWord('horizontal');
         this.expectWord('stack');
         let spacing = null;
-        if (this.peekWord() === 'spacing') {
-            this.consumeWord();
-            spacing = parseFloat(this.expect('NUMBER').value);
+        let padding = null;
+        let color = null;
+        let borderColor = null;
+        let borderRadius = null;
+        let opacity = null;
+        let align = null;
+        let justify = null;
+        while (this.check('WORD')) {
+            const kw = this.peekWord();
+            if (kw === 'spacing') {
+                this.consumeWord();
+                spacing = parseFloat(this.expect('NUMBER').value);
+            }
+            else if (kw === 'padding') {
+                this.consumeWord();
+                padding = parseFloat(this.expect('NUMBER').value);
+            }
+            else if (kw === 'color') {
+                this.consumeWord();
+                color = this.check('STRING') ? this.advance().value : this.expectWord();
+            }
+            else if (kw === 'border') {
+                this.consumeWord();
+                if (this.peekWord() === 'color') {
+                    this.consumeWord();
+                    borderColor = this.check('STRING') ? this.advance().value : this.expectWord();
+                }
+                else {
+                    borderRadius = parseFloat(this.expect('NUMBER').value);
+                }
+            }
+            else if (kw === 'rounded') {
+                this.consumeWord();
+                borderRadius = parseFloat(this.expect('NUMBER').value);
+            }
+            else if (kw === 'opacity') {
+                this.consumeWord();
+                opacity = parseFloat(this.expect('NUMBER').value);
+            }
+            else if (kw === 'align') {
+                this.consumeWord();
+                align = this.expectWord();
+            }
+            else if (kw === 'justify') {
+                this.consumeWord();
+                justify = this.expectWord();
+            }
+            else
+                break;
         }
         this.expect('COLON');
         this.expect('NEWLINE');
         this.expect('INDENT');
         const children = this.parseLayoutNodes();
         this.expect('DEDENT');
-        return { kind: 'HorizontalStack', spacing, children };
+        return { kind: 'HorizontalStack', spacing, padding, color, borderColor, borderRadius, opacity, align, justify, children };
     }
-    // scroll view [vertical|horizontal]:
+    // scroll view [vertical|horizontal] [color X]:
     parseScrollView() {
         this.expectWord('scroll');
         this.expectWord('view');
         let direction = 'vertical';
+        let color = null;
         if (this.peekWord() === 'vertical' || this.peekWord() === 'horizontal') {
             direction = this.consumeWord();
         }
+        if (this.peekWord() === 'color') {
+            this.consumeWord();
+            color = this.check('STRING') ? this.advance().value : this.expectWord();
+        }
         this.expect('COLON');
         this.expect('NEWLINE');
         this.expect('INDENT');
         const children = this.parseLayoutNodes();
         this.expect('DEDENT');
-        return { kind: 'ScrollView', direction, children };
+        return { kind: 'ScrollView', direction, color, children };
     }
-    // grid with N columns [spacing N]:
+    // grid with N columns [spacing N] [color X]:
     parseGrid() {
         this.expectWord('grid');
         this.expectWord('with');
         const columns = parseFloat(this.expect('NUMBER').value);
         this.expectWord('columns');
         let spacing = null;
+        let color = null;
         if (this.peekWord() === 'spacing') {
             this.consumeWord();
             spacing = parseFloat(this.expect('NUMBER').value);
         }
+        if (this.peekWord() === 'color') {
+            this.consumeWord();
+            color = this.check('STRING') ? this.advance().value : this.expectWord();
+        }
         this.expect('COLON');
         this.expect('NEWLINE');
         this.expect('INDENT');
         const children = this.parseLayoutNodes();
         this.expect('DEDENT');
-        return { kind: 'Grid', columns, spacing, children };
+        return { kind: 'Grid', columns, spacing, color, children };
     }
-    // card [corner radius N]:
+    // card [corner radius N] [color X] [border color X]:
     parseCard() {
         this.expectWord('card');
         let cornerRadius = null;
-        if (this.peekWord() === 'corner') {
-            this.consumeWord();
-            this.expectWord('radius');
-            cornerRadius = parseFloat(this.expect('NUMBER').value);
+        let color = null;
+        let borderColor = null;
+        while (this.check('WORD')) {
+            const kw = this.peekWord();
+            if (kw === 'corner') {
+                this.consumeWord();
+                this.expectWord('radius');
+                cornerRadius = parseFloat(this.expect('NUMBER').value);
+            }
+            else if (kw === 'color') {
+                this.consumeWord();
+                color = this.check('STRING') ? this.advance().value : this.expectWord();
+            }
+            else if (kw === 'border') {
+                this.consumeWord();
+                if (this.peekWord() === 'color') {
+                    this.consumeWord();
+                    borderColor = this.check('STRING') ? this.advance().value : this.expectWord();
+                }
+            }
+            else {
+                break;
+            }
         }
         this.expect('COLON');
         this.expect('NEWLINE');
         this.expect('INDENT');
         const children = this.parseLayoutNodes();
         this.expect('DEDENT');
-        return { kind: 'Card', cornerRadius, children };
+        return { kind: 'Card', cornerRadius, color, borderColor, children };
     }
-    // show "text" [as style] [color X]
-    // show variable [as style] [color X]
-    // text "text" as style
-    // text variable as style
+    // show "text" [as style] [color X] [size N] [bold] [italic]
+    // show variable [as style] [color X] [size N] [bold] [italic]
     parseTextNode() {
         const kw = this.consumeWord(); // 'show' or 'text'
         if (kw !== 'show' && kw !== 'text')
@@ -787,26 +918,74 @@ class Parser {
             style = this.expectWord();
         }
         let color = null;
-        if (this.peekWord() === 'color') {
-            this.consumeWord();
-            color = this.check('STRING') ? this.advance().value : this.expectWord();
+        let size = null;
+        let bold = false;
+        let italic = false;
+        while (this.check('WORD')) {
+            const mod = this.peekWord();
+            if (mod === 'color') {
+                this.consumeWord();
+                color = this.check('STRING') ? this.advance().value : this.expectWord();
+            }
+            else if (mod === 'size') {
+                this.consumeWord();
+                size = parseFloat(this.expect('NUMBER').value);
+            }
+            else if (mod === 'bold') {
+                this.consumeWord();
+                bold = true;
+            }
+            else if (mod === 'italic') {
+                this.consumeWord();
+                italic = true;
+            }
+            else
+                break;
         }
         this.expectNewline();
-        return { kind: 'Text', expr, style, color };
+        return { kind: 'Text', expr, style, color, size, bold, italic };
     }
-    // button "Label" [style StyleName]
+    // button "Label" [style X] [color X] [text color X] [disabled] [outline]
     parseButton() {
         this.expectWord('button');
         const label = this.expect('STRING').value;
         let style = null;
-        if (this.peekWord() === 'style') {
-            this.consumeWord();
-            style = this.expectWord();
+        let color = null;
+        let textColor = null;
+        let disabled = false;
+        let outline = false;
+        while (this.check('WORD')) {
+            const kw = this.peekWord();
+            if (kw === 'style') {
+                this.consumeWord();
+                style = this.expectWord();
+            }
+            else if (kw === 'color') {
+                this.consumeWord();
+                color = this.check('STRING') ? this.advance().value : this.expectWord();
+            }
+            else if (kw === 'text') {
+                this.consumeWord();
+                if (this.peekWord() === 'color') {
+                    this.consumeWord();
+                    textColor = this.check('STRING') ? this.advance().value : this.expectWord();
+                }
+            }
+            else if (kw === 'disabled') {
+                this.consumeWord();
+                disabled = true;
+            }
+            else if (kw === 'outline') {
+                this.consumeWord();
+                outline = true;
+            }
+            else
+                break;
         }
         this.expectNewline();
-        return { kind: 'Button', label, style };
+        return { kind: 'Button', label, style, color, textColor, disabled, outline };
     }
-    // text field bound to varName [placeholder "..."]
+    // text field bound to varName [placeholder "..."] [multiline] [secure] [keyboard X]
     parseTextField() {
         this.expectWord('text');
         this.expectWord('field');
@@ -814,55 +993,148 @@ class Parser {
         this.expectWord('to');
         const boundTo = this.expectWord();
         let placeholder = null;
-        if (this.peekWord() === 'placeholder') {
-            this.consumeWord();
-            placeholder = this.expect('STRING').value;
+        let multiline = false;
+        let secure = false;
+        let keyboard = null;
+        while (this.check('WORD')) {
+            const kw = this.peekWord();
+            if (kw === 'placeholder') {
+                this.consumeWord();
+                placeholder = this.expect('STRING').value;
+            }
+            else if (kw === 'multiline') {
+                this.consumeWord();
+                multiline = true;
+            }
+            else if (kw === 'secure') {
+                this.consumeWord();
+                secure = true;
+            }
+            else if (kw === 'keyboard') {
+                this.consumeWord();
+                keyboard = this.expectWord();
+            }
+            else
+                break;
         }
         this.expectNewline();
-        return { kind: 'TextField', placeholder, boundTo };
+        return { kind: 'TextField', placeholder, boundTo, multiline, secure, keyboard };
     }
-    // image from expr [width N] [height N]
+    // image from expr [width N] [height N] [rounded]
     parseImage() {
         this.expectWord('image');
         this.expectWord('from');
         const source = this.parseExpr();
         let width = null;
         let height = null;
-        if (this.peekWord() === 'width') {
-            this.consumeWord();
-            width = parseFloat(this.expect('NUMBER').value);
-        }
-        if (this.peekWord() === 'height') {
-            this.consumeWord();
-            height = parseFloat(this.expect('NUMBER').value);
+        let rounded = false;
+        while (this.check('WORD')) {
+            const kw = this.peekWord();
+            if (kw === 'width') {
+                this.consumeWord();
+                width = parseFloat(this.expect('NUMBER').value);
+            }
+            else if (kw === 'height') {
+                this.consumeWord();
+                height = parseFloat(this.expect('NUMBER').value);
+            }
+            else if (kw === 'rounded') {
+                this.consumeWord();
+                rounded = true;
+            }
+            else
+                break;
         }
         this.expectNewline();
-        return { kind: 'Image', source, width, height };
+        return { kind: 'Image', source, width, height, rounded };
     }
-    // icon named "name" [size N]
+    // icon named "name" [size N] [color X]
     parseIcon() {
         this.expectWord('icon');
         this.expectWord('named');
         const name = this.expect('STRING').value;
         let size = null;
+        let color = null;
         if (this.peekWord() === 'size') {
             this.consumeWord();
             size = parseFloat(this.expect('NUMBER').value);
         }
+        if (this.peekWord() === 'color') {
+            this.consumeWord();
+            color = this.check('STRING') ? this.advance().value : this.expectWord();
+        }
         this.expectNewline();
-        return { kind: 'Icon', name, size };
+        return { kind: 'Icon', name, size, color };
     }
-    // loading spinner [centered]
+    // loading spinner [centered] [color X]
     parseLoadingSpinner() {
         this.expectWord('loading');
         this.expectWord('spinner');
         let centered = false;
+        let color = null;
         if (this.peekWord() === 'centered') {
             this.consumeWord();
             centered = true;
         }
+        if (this.peekWord() === 'color') {
+            this.consumeWord();
+            color = this.check('STRING') ? this.advance().value : this.expectWord();
+        }
         this.expectNewline();
-        return { kind: 'LoadingSpinner', centered };
+        return { kind: 'LoadingSpinner', centered, color };
+    }
+    // switch bound to varName [color X]
+    parseSwitch() {
+        this.expectWord('switch');
+        this.expectWord('bound');
+        this.expectWord('to');
+        const boundTo = this.expectWord();
+        let color = null;
+        if (this.peekWord() === 'color') {
+            this.consumeWord();
+            color = this.check('STRING') ? this.advance().value : this.expectWord();
+        }
+        this.expectNewline();
+        return { kind: 'Switch', boundTo, color };
+    }
+    // slider bound to varName [min N] [max N] [step N]
+    parseSlider() {
+        this.expectWord('slider');
+        this.expectWord('bound');
+        this.expectWord('to');
+        const boundTo = this.expectWord();
+        let min = 0;
+        let max = 100;
+        let step = null;
+        while (this.check('WORD')) {
+            const kw = this.peekWord();
+            if (kw === 'min') {
+                this.consumeWord();
+                min = parseFloat(this.expect('NUMBER').value);
+            }
+            else if (kw === 'max') {
+                this.consumeWord();
+                max = parseFloat(this.expect('NUMBER').value);
+            }
+            else if (kw === 'step') {
+                this.consumeWord();
+                step = parseFloat(this.expect('NUMBER').value);
+            }
+            else
+                break;
+        }
+        this.expectNewline();
+        return { kind: 'Slider', boundTo, min, max, step };
+    }
+    // overlay:
+    parseOverlay() {
+        this.expectWord('overlay');
+        this.expect('COLON');
+        this.expect('NEWLINE');
+        this.expect('INDENT');
+        const children = this.parseLayoutNodes();
+        this.expect('DEDENT');
+        return { kind: 'Overlay', children };
     }
     // if condition: ... [otherwise if condition: ...] [otherwise: ...]
     parseLayoutIf() {
@@ -1065,8 +1337,17 @@ class Parser {
             if (word === 'when') {
                 events.push(this.parseEventHandler());
             }
+            else if (word === 'layout') {
+                // Optional layout: section header (same as screens)
+                this.consumeWord();
+                this.expect('COLON');
+                this.expect('NEWLINE');
+                this.expect('INDENT');
+                layout = this.parseLayoutNodes();
+                this.expect('DEDENT');
+            }
             else {
-                // Everything else is layout
+                // Layout nodes written directly (without layout: header)
                 layout = this.parseLayoutNodes();
             }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "english-lang",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "The English (.eng) programming language compiler",
   "main": "./dist/index.js",
   "bin": {