english-lang 0.2.2 → 0.2.4

package/dist/cli/engc.js

@@ -50,6 +50,32 @@ const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 const childProcess = __importStar(require("child_process"));
 const index_1 = require("../index");
+// ── Starter App.tsx ───────────────────────────────────────────
+const STARTER_APP_TSX = `\
+// App.tsx — wired up by engc init
+// All screens are generated from .eng source files in screens/
+
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+import { HomeScreen } from './src/HomeScreen';
+
+const Stack = createNativeStackNavigator();
+
+export default function App() {
+  return (
+    <SafeAreaProvider>
+      <NavigationContainer>
+        <Stack.Navigator initialRouteName="Home">
+          <Stack.Screen name="Home" component={HomeScreen} />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </SafeAreaProvider>
+  );
+}
+`;
 // ── Starter .eng file ─────────────────────────────────────────
 const STARTER_ENG = `\
 screen HomeScreen:
@@ -153,8 +179,15 @@ function initProject(name) {
         console.error('[engc] Failed to scaffold React Native app.');
         process.exit(1);
     }
+    // Install React Navigation
+    const rnDir = path.join(projectDir, 'rn');
+    console.log('\n[engc] Installing React Navigation ...');
+    childProcess.execSync('npm install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context', { cwd: rnDir, stdio: 'inherit' });
+    // Patch App.tsx to import the compiled HomeScreen
+    fs.writeFileSync(path.join(rnDir, 'App.tsx'), STARTER_APP_TSX, 'utf8');
+    console.log('[engc] Patched rn/App.tsx');
     // Pod install for iOS
-    const iosDir = path.join(projectDir, 'rn', 'ios');
+    const iosDir = path.join(rnDir, 'ios');
     if (fs.existsSync(iosDir)) {
         console.log('\n[engc] Installing iOS CocoaPods ...');
         try {

package/dist/src/codegen/ReactNativeBackend.js

@@ -60,6 +60,9 @@ 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) {
@@ -274,7 +277,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 +287,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 +298,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 +308,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 +322,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 +350,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 +358,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 +384,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 +424,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 +647,24 @@ class ReactNativeBackend {
         };
         return map[name] ?? name;
     }
+    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 +698,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 +717,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

@@ -663,6 +663,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 +678,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 +700,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 +738,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 +902,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 +977,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, 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: 'LoadingSpinner', centered };
+        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() {

package/package.json

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