@kernlang/terminal 3.1.9 → 3.2.3

package/dist/transpiler-ink.js

@@ -117,23 +117,26 @@ function keyToCheck(key) {
 class ImportTracker {
     reactImports = new Set();
     inkImports = new Set();
-    inkSpinner = false;
-    inkTextInput = false;
-    inkSelectInput = false;
+    inkUIImports = new Set();
     addReact(name) {
         this.reactImports.add(name);
     }
     addInk(name) {
         this.inkImports.add(name);
     }
+    /** Add an @inkjs/ui component import. */
+    addInkUI(name) {
+        this.inkUIImports.add(name);
+    }
+    // Legacy convenience methods — now route to @inkjs/ui
     needSpinner() {
-        this.inkSpinner = true;
+        this.inkUIImports.add('Spinner');
     }
     needTextInput() {
-        this.inkTextInput = true;
+        this.inkUIImports.add('TextInput');
     }
     needSelectInput() {
-        this.inkSelectInput = true;
+        this.inkUIImports.add('Select');
     }
     emit() {
         const lines = [];
@@ -146,47 +149,136 @@ class ImportTracker {
         if (this.inkImports.size > 0) {
             lines.push(`import { ${[...this.inkImports].sort().join(', ')} } from 'ink';`);
         }
-        if (this.inkSpinner) {
-            lines.push(`import Spinner from 'ink-spinner';`);
-        }
-        if (this.inkTextInput) {
-            lines.push(`import TextInput from 'ink-text-input';`);
-        }
-        if (this.inkSelectInput) {
-            lines.push(`import SelectInput from 'ink-select-input';`);
+        if (this.inkUIImports.size > 0) {
+            lines.push(`import { ${[...this.inkUIImports].sort().join(', ')} } from '@inkjs/ui';`);
         }
         return lines;
     }
 }
-// ── State block → useState ──────────────────────────────────────────────
-function generateStateHook(stateNode, imports) {
+// ── Ink-safe setter utility ─────────────────────────────────────────────
+/** Emit the __inkSafe helper once per component — bridges microtask→macrotask for Ink repaints. */
+function emitInkSafePreamble() {
+    return [
+        '  // Ink-safe setter: bridges microtask → macrotask for reliable repaints',
+        '  function __inkSafe<T>(setter: React.Dispatch<React.SetStateAction<T>>): React.Dispatch<React.SetStateAction<T>> {',
+        '    return (value) => setTimeout(() => setter(value), 0);',
+        '  }',
+        '',
+    ];
+}
+/** Detect whether a useState initial value needs lazy initialization (prevents re-eval per render). */
+function needsLazyInit(initial, type) {
+    const trimmed = initial.trim();
+    // IIFE: ((...) => ...)() or (function() { ... })()
+    if (/^\(.*\)\s*\(/.test(trimmed))
+        return true;
+    // function expression: function( — executes when called
+    if (trimmed.startsWith('function(') || trimmed.startsWith('function ('))
+        return true;
+    // new constructor: new Map(), new Set(), etc.
+    if (trimmed.startsWith('new '))
+        return true;
+    // Arrow functions: only wrap if state TYPE is a function (state holds a function value)
+    if (/^\(?[^)]*\)?\s*=>/.test(trimmed) && type && /=>/.test(type))
+        return true;
+    return false;
+}
+function generateStateHook(stateNode, imports, ctx) {
     const lines = [];
     const props = getProps(stateNode);
     const name = props.name;
     const initialProp = props.initial;
+    const safe = props.safe !== 'false' && props.safe !== false; // default true
     if (name && initialProp !== undefined) {
         imports.addReact('useState');
         const initial = isExpr(initialProp) ? initialProp.code : String(initialProp);
         const initVal = isExpr(initialProp)
             ? initial
-            : initial === 'null'
-                ? 'null'
-                : initial === 'true'
-                    ? 'true'
-                    : initial === 'false'
-                        ? 'false'
-                        : initial.startsWith('[') || initial.startsWith('{')
-                            ? initial
-                            : initial.startsWith("'") || initial.startsWith('"')
+            : initial === ''
+                ? "''"
+                : initial === 'null'
+                    ? 'null'
+                    : initial === 'true'
+                        ? 'true'
+                        : initial === 'false'
+                            ? 'false'
+                            : initial.startsWith('[') || initial.startsWith('{')
                                 ? initial
-                                : initial.includes('(') || initial.includes('.')
+                                : initial.startsWith("'") || initial.startsWith('"')
                                     ? initial
-                                    : Number.isNaN(Number(initial))
-                                        ? `'${initial}'`
-                                        : String(initial);
+                                    : initial.includes('(') || initial.includes('.')
+                                        ? initial
+                                        : Number.isNaN(Number(initial))
+                                            ? `'${initial}'`
+                                            : String(initial);
         const setter = `set${capitalize(name)}`;
         const typeAnnotation = props.type ? `<${props.type}>` : '';
-        lines.push(`  const [${name}, ${setter}] = useState${typeAnnotation}(${initVal});`);
+        // Lazy initialization for IIFEs and constructors (prevents re-eval per render)
+        const lazyInitVal = needsLazyInit(initVal, props.type) ? `() => ${initVal}` : initVal;
+        const throttle = props.throttle;
+        const debounce = props.debounce;
+        if (throttle) {
+            // Throttled setter — leading+trailing by default (lodash-style).
+            // trailing=false reverts to leading-only (drops intermediate + final values in window).
+            const trailing = props.trailing !== 'false' && props.trailing !== false;
+            imports.addReact('useMemo');
+            const valType = typeAnnotation ? props.type : 'any';
+            lines.push(`  const [${name}, _${setter}Raw] = useState${typeAnnotation}(${lazyInitVal});`);
+            lines.push(`  const ${setter} = useMemo(() => {`);
+            lines.push(`    let _lastCall = 0;`);
+            if (trailing) {
+                lines.push(`    let _pendingValue: React.SetStateAction<${valType}>;`);
+                lines.push(`    let _pendingTimer: ReturnType<typeof setTimeout> | null = null;`);
+            }
+            lines.push(`    return (value: React.SetStateAction<${valType}>) => {`);
+            lines.push(`      const now = Date.now();`);
+            if (trailing) {
+                lines.push(`      const elapsed = now - _lastCall;`);
+                lines.push(`      if (elapsed >= ${throttle}) {`);
+                lines.push(`        _lastCall = now;`);
+                lines.push(`        if (_pendingTimer) { clearTimeout(_pendingTimer); _pendingTimer = null; }`);
+                lines.push(`        setTimeout(() => _${setter}Raw(value), 0);`);
+                lines.push(`      } else {`);
+                lines.push(`        _pendingValue = value;`);
+                lines.push(`        if (!_pendingTimer) {`);
+                lines.push(`          _pendingTimer = setTimeout(() => {`);
+                lines.push(`            _lastCall = Date.now();`);
+                lines.push(`            _pendingTimer = null;`);
+                lines.push(`            _${setter}Raw(_pendingValue);`);
+                lines.push(`          }, ${throttle} - elapsed);`);
+                lines.push(`        }`);
+                lines.push(`      }`);
+            }
+            else {
+                lines.push(`      if (now - _lastCall >= ${throttle}) {`);
+                lines.push(`        _lastCall = now;`);
+                lines.push(`        setTimeout(() => _${setter}Raw(value), 0);`);
+                lines.push(`      }`);
+            }
+            lines.push(`    };`);
+            lines.push(`  }, []);`);
+        }
+        else if (debounce) {
+            // Debounced setter — delays updates, uses setTimeout for Ink safety
+            imports.addReact('useMemo');
+            lines.push(`  const [${name}, _${setter}Raw] = useState${typeAnnotation}(${lazyInitVal});`);
+            lines.push(`  const ${setter} = useMemo(() => {`);
+            lines.push(`    let _timer: ReturnType<typeof setTimeout> | null = null;`);
+            lines.push(`    return (value: React.SetStateAction<${typeAnnotation ? props.type : 'any'}>) => {`);
+            lines.push(`      if (_timer) clearTimeout(_timer);`);
+            lines.push(`      _timer = setTimeout(() => _${setter}Raw(value), ${debounce});`);
+            lines.push(`    };`);
+            lines.push(`  }, []);`);
+        }
+        else if (safe) {
+            ctx.needsInkSafe = true;
+            imports.addReact('useMemo');
+            lines.push(`  const [${name}, _${setter}Raw] = useState${typeAnnotation}(${lazyInitVal});`);
+            lines.push(`  const ${setter} = useMemo(() => __inkSafe(_${setter}Raw), [_${setter}Raw]);`);
+        }
+        else {
+            lines.push(`  const [${name}, ${setter}] = useState${typeAnnotation}(${lazyInitVal});`);
+        }
     }
     return lines;
 }
@@ -212,24 +304,70 @@ function generateStreamEffect(streamNode, imports) {
     const name = props.name;
     const source = props.source;
     const append = props.append !== 'false'; // default true
+    const mode = props.mode;
+    const dispatch = props.dispatch;
     if (name && source) {
         imports.addReact('useEffect');
         const setter = `set${capitalize(name)}`;
-        lines.push(`  useEffect(() => {`);
-        lines.push(`    let cancelled = false;`);
-        lines.push(`    (async () => {`);
-        lines.push(`      for await (const chunk of ${source}()) {`);
-        lines.push(`        if (cancelled) break;`);
-        if (append) {
-            lines.push(`        ${setter}(prev => [...prev, chunk]);`);
+        if (mode === 'channel' && dispatch) {
+            // Channel mode: AsyncGenerator → dispatch function with cleanup
+            // Pattern: session.send() → drain chunks → dispatch(chunk)
+            lines.push(`  useEffect(() => {`);
+            lines.push(`    let cancelled = false;`);
+            lines.push(`    const abortController = new AbortController();`);
+            lines.push(`    (async () => {`);
+            lines.push(`      try {`);
+            lines.push(`        for await (const chunk of ${source}) {`);
+            lines.push(`          if (cancelled) break;`);
+            lines.push(`          ${dispatch}(chunk);`);
+            lines.push(`        }`);
+            lines.push(`      } catch (err) {`);
+            lines.push(`        if (!cancelled) console.error('Stream error:', err);`);
+            lines.push(`      }`);
+            lines.push(`    })();`);
+            lines.push(`    return () => { cancelled = true; abortController.abort(); };`);
+            lines.push(`  }, [${source}]);`);
+        }
+        else if (mode === 'channel') {
+            // Channel mode without dispatch: iterate source directly into state
+            lines.push(`  useEffect(() => {`);
+            lines.push(`    let cancelled = false;`);
+            lines.push(`    (async () => {`);
+            lines.push(`      try {`);
+            lines.push(`        for await (const chunk of ${source}) {`);
+            lines.push(`          if (cancelled) break;`);
+            if (append) {
+                lines.push(`          ${setter}(prev => [...prev, chunk]);`);
+            }
+            else {
+                lines.push(`          ${setter}(chunk);`);
+            }
+            lines.push(`        }`);
+            lines.push(`      } catch (err) {`);
+            lines.push(`        if (!cancelled) console.error('Stream error:', err);`);
+            lines.push(`      }`);
+            lines.push(`    })();`);
+            lines.push(`    return () => { cancelled = true; };`);
+            lines.push(`  }, [${source}]);`);
         }
         else {
-            lines.push(`        ${setter}(chunk);`);
+            // Default mode: source is a function that returns an AsyncGenerator
+            lines.push(`  useEffect(() => {`);
+            lines.push(`    let cancelled = false;`);
+            lines.push(`    (async () => {`);
+            lines.push(`      for await (const chunk of ${source}()) {`);
+            lines.push(`        if (cancelled) break;`);
+            if (append) {
+                lines.push(`        ${setter}(prev => [...prev, chunk]);`);
+            }
+            else {
+                lines.push(`        ${setter}(chunk);`);
+            }
+            lines.push(`      }`);
+            lines.push(`    })();`);
+            lines.push(`    return () => { cancelled = true; };`);
+            lines.push(`  }, []);`);
         }
-        lines.push(`      }`);
-        lines.push(`    })();`);
-        lines.push(`    return () => { cancelled = true; };`);
-        lines.push(`  }, []);`);
     }
     return lines;
 }
@@ -245,14 +383,91 @@ function generateLogicEffect(logicNode, imports) {
         imports.addReact('useEffect');
         const dedented = dedent(code);
         const depsStr = deps ? `[${deps}]` : '[]';
+        // Auto-cleanup: detect setInterval/setTimeout at top-level scope (not inside nested functions)
+        const hasCleanup = /return\s*\(\s*\)\s*=>/.test(dedented) || /return\s*\(\)\s*\{/.test(dedented);
+        // Only match if declaration appears before any function/arrow — i.e., at the effect's top level
+        const hasNestedFn = /(?:function\s|=>)/.test(dedented.split(/set(?:Interval|Timeout)\s*\(/)[0] || '');
+        const intervalMatch = hasNestedFn ? null : dedented.match(/(?:const|let|var)\s+(\w+)\s*=\s*setInterval\s*\(/);
+        const timeoutMatch = hasNestedFn ? null : dedented.match(/(?:const|let|var)\s+(\w+)\s*=\s*setTimeout\s*\(/);
         lines.push(`  useEffect(() => {`);
         for (const line of dedented.split('\n')) {
             lines.push(`    ${line}`);
         }
+        if (!hasCleanup && intervalMatch) {
+            lines.push(`    return () => { clearInterval(${intervalMatch[1]}); };`);
+        }
+        else if (!hasCleanup && timeoutMatch) {
+            lines.push(`    return () => { clearTimeout(${timeoutMatch[1]}); };`);
+        }
         lines.push(`  }, ${depsStr});`);
     }
     return lines;
 }
+// ── Focus hook → useFocus (Phase 3) ────────────────────────────────
+function generateFocusHook(focusNode, imports) {
+    const lines = [];
+    const props = getProps(focusNode);
+    const name = props.name;
+    const autoFocus = props.autoFocus === 'true' || props.autoFocus === true;
+    const id = props.id;
+    if (name) {
+        imports.addInk('useFocus');
+        const opts = [];
+        if (autoFocus)
+            opts.push('autoFocus: true');
+        if (id)
+            opts.push(`id: '${id}'`);
+        const optsStr = opts.length > 0 ? `{ ${opts.join(', ')} }` : '';
+        lines.push(`  const { isFocused: ${name} } = useFocus(${optsStr});`);
+    }
+    return lines;
+}
+// ── App exit hook → useApp (Phase 3) ───────────────────────────────
+function generateAppExitHook(exitNode, imports) {
+    const lines = [];
+    const props = getProps(exitNode);
+    const on = props.on;
+    if (on) {
+        imports.addInk('useApp');
+        imports.addReact('useEffect');
+        const condition = isExpr(on) ? on.code : String(on);
+        lines.push(`  const { exit } = useApp();`);
+        lines.push(`  useEffect(() => { if (${condition}) exit(); }, [${condition}]);`);
+    }
+    return lines;
+}
+// ── Animation block → useEffect with setInterval ────────────────────
+function generateAnimation(animNode, imports) {
+    const lines = [];
+    const props = getProps(animNode);
+    const name = props.name;
+    const interval = props.interval;
+    const update = isExpr(props.update) ? props.update.code : String(props.update || '');
+    const active = props.active;
+    if (name && interval && update) {
+        imports.addReact('useEffect');
+        const setter = `set${capitalize(name)}`;
+        if (active) {
+            const activeExpr = isExpr(active) ? active.code : String(active);
+            lines.push(`  useEffect(() => {`);
+            lines.push(`    if (!(${activeExpr})) return;`);
+            lines.push(`    const _animId = setInterval(() => {`);
+            lines.push(`      ${setter}(${update});`);
+            lines.push(`    }, ${interval});`);
+            lines.push(`    return () => clearInterval(_animId);`);
+            lines.push(`  }, [${activeExpr}]);`);
+        }
+        else {
+            lines.push(`  useEffect(() => {`);
+            lines.push(`    const _animId = setInterval(() => {`);
+            lines.push(`      ${setter}(${update});`);
+            lines.push(`    }, ${interval});`);
+            lines.push(`    return () => clearInterval(_animId);`);
+            lines.push(`  }, []);`);
+        }
+    }
+    return lines;
+}
 // ── Callback block → useCallback (Feature #11) ─────────────────────────
 function generateCallbackHook(callbackNode, imports) {
     const lines = [];
@@ -295,6 +510,7 @@ function collectNestedOnNodes(node) {
     return found;
 }
 // ── Generate useInput from an on-node ───────────────────────────────────
+let _onHookCounter = 0;
 function generateOnHook(onNode, imports) {
     const lines = [];
     const onProps = getProps(onNode);
@@ -305,9 +521,12 @@ function generateOnHook(onNode, imports) {
         const key = onProps.key;
         const handlerChild = (onNode.children || []).find((c) => c.type === 'handler');
         const code = handlerChild ? getProps(handlerChild).code || '' : '';
-        // Use ref pattern for fresh closures — handler always sees current state
-        lines.push(`  const _inputHandlerRef = useRef<(input: string, key: any) => void>(() => {});`);
-        lines.push(`  _inputHandlerRef.current = (input: string, key: any) => {`);
+        // Use ref pattern with unique suffix for fresh closures — supports multiple on-nodes
+        const suffix = _onHookCounter === 0 ? '' : `_${_onHookCounter}`;
+        _onHookCounter++;
+        const refName = `_inputHandlerRef${suffix}`;
+        lines.push(`  const ${refName} = useRef<(input: string, key: any) => void>(() => {});`);
+        lines.push(`  ${refName}.current = (input: string, key: any) => {`);
         if (key) {
             lines.push(`    if (!(${keyToCheck(key)})) return;`);
         }
@@ -318,7 +537,7 @@ function generateOnHook(onNode, imports) {
             }
         }
         lines.push(`  };`);
-        lines.push(`  useInput((input: string, key: any) => _inputHandlerRef.current(input, key));`);
+        lines.push(`  useInput((input: string, key: any) => ${refName}.current(input, key));`);
         lines.push('');
     }
     return lines;
@@ -549,11 +768,15 @@ function renderInkSelectInput(p, indent, imports) {
     const rawItems = p.items;
     const items = isExpr(rawItems) ? rawItems.code : rawItems || '[]';
     const onSelect = p.onSelect;
-    const selectProps = [`items={${items}}`];
+    const onChange = p.onChange;
+    const selectProps = [`options={${items}}`];
     if (onSelect) {
-        selectProps.push(`onSelect={${onSelect}}`);
+        selectProps.push(`onChange={${onSelect}}`);
+    }
+    else if (onChange) {
+        selectProps.push(`onChange={${onChange}}`);
     }
-    return [`${indent}<SelectInput ${selectProps.join(' ')} />`];
+    return [`${indent}<Select ${selectProps.join(' ')} />`];
 }
 function renderInkHandler(p, indent) {
     const code = p.code || '';
@@ -602,6 +825,215 @@ function renderInkConditional(node, p, indent, imports) {
     lines.push(`${indent})}`);
     return lines;
 }
+// ── @inkjs/ui Component Renderers (Phase 3) ─────────────────────────────
+function renderInkMultiSelect(p, indent, imports) {
+    imports.addInkUI('MultiSelect');
+    const rawOptions = p.options;
+    const options = isExpr(rawOptions) ? rawOptions.code : rawOptions || '[]';
+    const onChange = p.onChange;
+    const msProps = [`options={${options}}`];
+    if (onChange)
+        msProps.push(`onChange={${onChange}}`);
+    return [`${indent}<MultiSelect ${msProps.join(' ')} />`];
+}
+function renderInkConfirmInput(p, indent, imports) {
+    imports.addInkUI('ConfirmInput');
+    const ciProps = [];
+    if (p.onConfirm)
+        ciProps.push(`onConfirm={${p.onConfirm}}`);
+    if (p.onCancel)
+        ciProps.push(`onCancel={${p.onCancel}}`);
+    if (p.defaultChoice)
+        ciProps.push(`defaultChoice="${p.defaultChoice}"`);
+    if (p.submitOnEnter === 'false' || p.submitOnEnter === false)
+        ciProps.push('submitOnEnter={false}');
+    return [`${indent}<ConfirmInput ${ciProps.join(' ')} />`];
+}
+function renderInkPasswordInput(p, indent, imports) {
+    imports.addInkUI('PasswordInput');
+    const piProps = [];
+    const bind = p.bind;
+    if (p.placeholder)
+        piProps.push(`placeholder=${JSON.stringify(p.placeholder)}`);
+    if (bind) {
+        piProps.push(`onChange={set${capitalize(bind)}}`);
+    }
+    if (p.onChange)
+        piProps.push(`onChange={${p.onChange}}`);
+    return [`${indent}<PasswordInput ${piProps.join(' ')} />`];
+}
+function renderInkStatusMessage(node, p, indent, imports) {
+    imports.addInkUI('StatusMessage');
+    const variant = p.variant || 'info';
+    const lines = [];
+    lines.push(`${indent}<StatusMessage variant="${variant}">`);
+    for (const child of node.children || []) {
+        lines.push(...renderInkNode(child, `${indent}  `, imports));
+    }
+    lines.push(`${indent}</StatusMessage>`);
+    return lines;
+}
+function renderInkAlert(node, p, indent, imports) {
+    imports.addInkUI('Alert');
+    const variant = p.variant || 'info';
+    const title = p.title;
+    const alertProps = [`variant="${variant}"`];
+    if (title)
+        alertProps.push(`title=${JSON.stringify(title)}`);
+    const lines = [];
+    lines.push(`${indent}<Alert ${alertProps.join(' ')}>`);
+    for (const child of node.children || []) {
+        lines.push(...renderInkNode(child, `${indent}  `, imports));
+    }
+    lines.push(`${indent}</Alert>`);
+    return lines;
+}
+function renderInkOrderedList(node, indent, imports) {
+    imports.addInkUI('OrderedList');
+    const lines = [];
+    lines.push(`${indent}<OrderedList>`);
+    for (const child of node.children || []) {
+        lines.push(`${indent}  <OrderedList.Item>`);
+        lines.push(...renderInkNode(child, `${indent}    `, imports));
+        lines.push(`${indent}  </OrderedList.Item>`);
+    }
+    lines.push(`${indent}</OrderedList>`);
+    return lines;
+}
+function renderInkUnorderedList(node, indent, imports) {
+    imports.addInkUI('UnorderedList');
+    const lines = [];
+    lines.push(`${indent}<UnorderedList>`);
+    for (const child of node.children || []) {
+        lines.push(`${indent}  <UnorderedList.Item>`);
+        lines.push(...renderInkNode(child, `${indent}    `, imports));
+        lines.push(`${indent}  </UnorderedList.Item>`);
+    }
+    lines.push(`${indent}</UnorderedList>`);
+    return lines;
+}
+function renderInkStaticLog(node, p, indent, imports) {
+    imports.addInk('Static');
+    imports.addInk('Text');
+    const rawItems = p.items;
+    const items = isExpr(rawItems) ? rawItems.code : rawItems || '[]';
+    const lines = [];
+    lines.push(`${indent}<Static items={${items}}>`);
+    lines.push(`${indent}  {(item: any) => (`);
+    if (node.children && node.children.length > 1) {
+        // Multiple children need a fragment wrapper
+        lines.push(`${indent}    <>`);
+        for (const child of node.children) {
+            lines.push(...renderInkNode(child, `${indent}      `, imports));
+        }
+        lines.push(`${indent}    </>`);
+    }
+    else if (node.children && node.children.length === 1) {
+        lines.push(...renderInkNode(node.children[0], `${indent}    `, imports));
+    }
+    else {
+        lines.push(`${indent}    <Text>{String(item)}</Text>`);
+    }
+    lines.push(`${indent}  )}`);
+    lines.push(`${indent}</Static>`);
+    return lines;
+}
+function renderInkNewline(p, indent, imports) {
+    imports.addInk('Newline');
+    const count = p.count;
+    if (count && Number(count) > 1) {
+        return [`${indent}<Newline count={${count}} />`];
+    }
+    return [`${indent}<Newline />`];
+}
+// ── Layout Primitives (Phase 4) ──────────────────────────────────────────
+function renderLayoutRow(node, p, indent, imports) {
+    imports.addInk('Box');
+    const gap = p.gap;
+    const padding = p.padding;
+    const boxProps = ['flexDirection="row"'];
+    if (gap)
+        boxProps.push(`gap={${gap}}`);
+    if (padding)
+        boxProps.push(`padding={${padding}}`);
+    const lines = [];
+    lines.push(`${indent}<Box ${boxProps.join(' ')}>`);
+    for (const child of node.children || []) {
+        lines.push(...renderInkNode(child, `${indent}  `, imports));
+    }
+    lines.push(`${indent}</Box>`);
+    return lines;
+}
+function renderLayoutCol(node, p, indent, imports) {
+    imports.addInk('Box');
+    const flex = p.flex;
+    const width = p.width;
+    const boxProps = ['flexDirection="column"'];
+    if (flex)
+        boxProps.push(`flexGrow={${flex}}`);
+    if (width)
+        boxProps.push(`width={${width}}`);
+    const lines = [];
+    lines.push(`${indent}<Box ${boxProps.join(' ')}>`);
+    for (const child of node.children || []) {
+        lines.push(...renderInkNode(child, `${indent}  `, imports));
+    }
+    lines.push(`${indent}</Box>`);
+    return lines;
+}
+function renderLayoutStack(node, p, indent, imports) {
+    imports.addInk('Box');
+    const padding = p.padding;
+    const gap = p.gap;
+    const boxProps = ['flexDirection="column"'];
+    if (padding)
+        boxProps.push(`padding={${padding}}`);
+    if (gap)
+        boxProps.push(`gap={${gap}}`);
+    const lines = [];
+    lines.push(`${indent}<Box ${boxProps.join(' ')}>`);
+    for (const child of node.children || []) {
+        lines.push(...renderInkNode(child, `${indent}  `, imports));
+    }
+    lines.push(`${indent}</Box>`);
+    return lines;
+}
+function renderSpacer(indent, imports) {
+    imports.addInk('Box');
+    return [`${indent}<Box flexGrow={1} />`];
+}
+/** Cross-file import collector — populated by screen-embed with from= */
+const _crossFileImports = new Map();
+function renderScreenEmbed(p, indent) {
+    const screen = p.screen;
+    if (!screen)
+        return [];
+    const from = p.from;
+    // Track cross-file import if from= is specified
+    if (from) {
+        // Normalize: strip .kern extension, add .js for ESM
+        const importPath = from.replace(/\.kern$/, '.js');
+        if (!_crossFileImports.has(importPath))
+            _crossFileImports.set(importPath, new Set());
+        _crossFileImports.get(importPath).add(screen);
+    }
+    // Collect all non-meta props as component props
+    const propEntries = Object.entries(p).filter(([k]) => k !== 'screen' && k !== 'from' && k !== 'styles' && k !== 'themeRefs');
+    const propsStr = propEntries
+        .map(([k, v]) => {
+        if (isExpr(v))
+            return `${k}={${v.code}}`;
+        const s = String(v);
+        // Preserve non-string literals as JSX expressions
+        if (s === 'true' || s === 'false')
+            return `${k}={${s}}`;
+        if (!Number.isNaN(Number(s)) && s !== '')
+            return `${k}={${s}}`;
+        return `${k}=${JSON.stringify(s)}`;
+    })
+        .join(' ');
+    return [`${indent}<${screen}${propsStr ? ` ${propsStr}` : ''} />`];
+}
 // ── Node renderer → JSX (dispatcher) ─────────────────────────────────────
 function renderInkNode(node, indent, imports) {
     const p = getProps(node);
@@ -630,6 +1062,34 @@ function renderInkNode(node, indent, imports) {
             return renderInkTextInput(p, indent, imports);
         case 'select-input':
             return renderInkSelectInput(p, indent, imports);
+        case 'multi-select':
+            return renderInkMultiSelect(p, indent, imports);
+        case 'confirm-input':
+            return renderInkConfirmInput(p, indent, imports);
+        case 'password-input':
+            return renderInkPasswordInput(p, indent, imports);
+        case 'status-message':
+            return renderInkStatusMessage(node, p, indent, imports);
+        case 'alert':
+            return renderInkAlert(node, p, indent, imports);
+        case 'ordered-list':
+            return renderInkOrderedList(node, indent, imports);
+        case 'unordered-list':
+            return renderInkUnorderedList(node, indent, imports);
+        case 'static-log':
+            return renderInkStaticLog(node, p, indent, imports);
+        case 'newline':
+            return renderInkNewline(p, indent, imports);
+        case 'layout-row':
+            return renderLayoutRow(node, p, indent, imports);
+        case 'layout-col':
+            return renderLayoutCol(node, p, indent, imports);
+        case 'layout-stack':
+            return renderLayoutStack(node, p, indent, imports);
+        case 'spacer':
+            return renderSpacer(indent, imports);
+        case 'screen-embed':
+            return renderScreenEmbed(p, indent);
         case 'handler':
             return renderInkHandler(p, indent);
         case 'each':
@@ -640,14 +1100,22 @@ function renderInkNode(node, indent, imports) {
         case 'ref':
         case 'stream':
         case 'logic':
+        case 'effect':
         case 'callback':
+        case 'memo':
+        case 'render':
+        case 'prop':
         case 'on':
+        case 'animation':
+        case 'derive':
+        case 'focus':
+        case 'app-exit':
             return [];
         default: {
             const lines = [];
             if (isCoreNode(node.type)) {
                 if (node.type === 'machine') {
-                    lines.push(...generateMachineReducer(node).map((l) => l));
+                    lines.push(...generateMachineReducer(node, { safeDispatch: true, emitImport: false }).map((l) => l));
                 }
                 else {
                     lines.push(...generateCoreNode(node));
@@ -663,14 +1131,225 @@ function renderInkNode(node, indent, imports) {
         }
     }
 }
+// ── Reusable screen body compiler ────────────────────────────────────────
+const NON_UI_TYPES = new Set([
+    'state',
+    'ref',
+    'on',
+    'stream',
+    'logic',
+    'effect',
+    'callback',
+    'memo',
+    'render',
+    'prop',
+    'animation',
+    'derive',
+    'focus',
+    'app-exit',
+]);
+function isInkUiNode(type) {
+    return (type === 'each' ||
+        type === 'conditional' ||
+        type === 'select' ||
+        type === 'model' ||
+        type === 'repository' ||
+        type === 'dependency' ||
+        type === 'cache');
+}
+/**
+ * Compile a screen node's full body: all hooks, effects, and JSX return.
+ * Used for both primary and secondary screens to ensure feature parity.
+ */
+function compileScreenBody(screenNode, imports) {
+    const bodyLines = [];
+    const stateCtx = { needsInkSafe: false };
+    // Collect all node categories from this screen
+    const stateNodes = getChildren(screenNode, 'state');
+    const refNodes = getChildren(screenNode, 'ref');
+    const onNodes = getChildren(screenNode, 'on');
+    const streamNodes = getChildren(screenNode, 'stream');
+    const logicNodes = [...getChildren(screenNode, 'logic'), ...getChildren(screenNode, 'effect')];
+    const callbackNodes = getChildren(screenNode, 'callback');
+    const animationNodes = getChildren(screenNode, 'animation');
+    const deriveNodes = getChildren(screenNode, 'derive');
+    const focusNodes = getChildren(screenNode, 'focus');
+    const appExitNodes = getChildren(screenNode, 'app-exit');
+    const memoNodes = getChildren(screenNode, 'memo');
+    const renderNode = getChildren(screenNode, 'render')[0];
+    const uiChildren = (screenNode.children || []).filter((c) => !NON_UI_TYPES.has(c.type) && (!isCoreNode(c.type) || isInkUiNode(c.type)));
+    // Hoist nested on-nodes from UI tree
+    const nestedOnNodes = collectNestedOnNodes(screenNode);
+    const allOnNodes = [...onNodes];
+    for (const nested of nestedOnNodes) {
+        if (!onNodes.includes(nested))
+            allOnNodes.push(nested);
+    }
+    // State hooks
+    for (const stateNode of stateNodes) {
+        bodyLines.push(...generateStateHook(stateNode, imports, stateCtx));
+    }
+    if (stateNodes.length > 0)
+        bodyLines.push('');
+    // Ref hooks
+    for (const refNode of refNodes) {
+        bodyLines.push(...generateRefHook(refNode, imports));
+    }
+    if (refNodes.length > 0)
+        bodyLines.push('');
+    // Focus hooks
+    for (const focusNode of focusNodes) {
+        bodyLines.push(...generateFocusHook(focusNode, imports));
+    }
+    if (focusNodes.length > 0)
+        bodyLines.push('');
+    // App exit hooks
+    for (const exitNode of appExitNodes) {
+        bodyLines.push(...generateAppExitHook(exitNode, imports));
+    }
+    if (appExitNodes.length > 0)
+        bodyLines.push('');
+    // Memo hooks
+    for (const memoNode of memoNodes) {
+        const mp = getProps(memoNode);
+        const mName = mp.name;
+        const mDeps = mp.deps || '';
+        const mDepsArr = mDeps ? `[${mDeps}]` : '[]';
+        const handlerChild = (memoNode.children || []).find((c) => c.type === 'handler');
+        const code = handlerChild ? getProps(handlerChild).code || '' : '';
+        if (mName && code) {
+            imports.addReact('useMemo');
+            const dedented = dedent(code);
+            bodyLines.push(`  const ${mName} = useMemo(() => {`);
+            for (const line of dedented.split('\n')) {
+                bodyLines.push(`          ${line}`);
+            }
+            bodyLines.push(`  }, ${mDepsArr});`);
+            bodyLines.push('');
+        }
+    }
+    // Callback hooks
+    for (const callbackNode of callbackNodes) {
+        bodyLines.push(...generateCallbackHook(callbackNode, imports));
+        bodyLines.push('');
+    }
+    // on event=key → useInput() hooks
+    for (const onNode of allOnNodes) {
+        bodyLines.push(...generateOnHook(onNode, imports));
+    }
+    // Stream effects
+    for (const streamNode of streamNodes) {
+        bodyLines.push(...generateStreamEffect(streamNode, imports));
+        bodyLines.push('');
+    }
+    // Logic effects
+    for (const logicNode of logicNodes) {
+        bodyLines.push(...generateLogicEffect(logicNode, imports));
+        bodyLines.push('');
+    }
+    // Animation effects
+    for (const animNode of animationNodes) {
+        bodyLines.push(...generateAnimation(animNode, imports));
+        bodyLines.push('');
+    }
+    // Derive nodes → useMemo with auto-dep tracking
+    for (const deriveNode of deriveNodes) {
+        const dp = getProps(deriveNode);
+        const dName = dp.name;
+        const dExpr = isExpr(dp.expr) ? dp.expr.code : dp.expr || '';
+        const dDeps = dp.deps;
+        const dType = dp.type;
+        if (dName && dExpr) {
+            imports.addReact('useMemo');
+            const typeAnnotation = dType ? `<${dType}>` : '';
+            let depsStr;
+            if (dDeps) {
+                depsStr = `[${dDeps}]`;
+            }
+            else {
+                const sNames = stateNodes.map((s) => getProps(s).name).filter(Boolean);
+                const rNames = refNodes
+                    .map((r) => {
+                    const rn = getProps(r).name;
+                    return rn ? (rn.endsWith('Ref') ? rn : `${rn}Ref`) : '';
+                })
+                    .filter(Boolean);
+                const allNames = [...sNames, ...rNames];
+                const autoDeps = allNames.filter((n) => new RegExp(`\\b${n}\\b`).test(dExpr));
+                depsStr = `[${autoDeps.join(', ')}]`;
+            }
+            bodyLines.push(`  const ${dName} = useMemo${typeAnnotation}(() => ${dExpr}, ${depsStr});`);
+            bodyLines.push('');
+        }
+    }
+    // JSX return — auto-insert return when handler body is a bare JSX expression
+    if (renderNode) {
+        const handlerChild = (renderNode.children || []).find((c) => c.type === 'handler');
+        const code = handlerChild ? getProps(handlerChild).code || '' : '';
+        if (code.trim()) {
+            const dedented = dedent(code);
+            const trimmed = dedented.trim();
+            if (trimmed.includes('return ') || trimmed.includes('return(')) {
+                // User wrote explicit return — emit as-is
+                for (const line of dedented.split('\n')) {
+                    bodyLines.push(`  ${line}`);
+                }
+            }
+            else {
+                // Bare expression (likely JSX) — wrap in return()
+                bodyLines.push('  return (');
+                for (const line of dedented.split('\n')) {
+                    bodyLines.push(`    ${line}`);
+                }
+                bodyLines.push('  );');
+            }
+        }
+        else {
+            bodyLines.push('  return null;');
+        }
+    }
+    else {
+        imports.addInk('Box');
+        bodyLines.push('  return (');
+        bodyLines.push('    <Box flexDirection="column">');
+        for (const child of uiChildren) {
+            bodyLines.push(...renderInkNode(child, '      ', imports));
+        }
+        bodyLines.push('    </Box>');
+        bodyLines.push('  );');
+    }
+    // Auto-detect React hooks referenced in handler bodies but not yet in the import tracker.
+    // Covers cases where user code calls hooks inline (e.g. useEffect in a render handler)
+    // rather than via dedicated KERN nodes.
+    const bodyText = bodyLines.join('\n');
+    for (const hook of [
+        'useEffect',
+        'useState',
+        'useMemo',
+        'useCallback',
+        'useRef',
+        'useReducer',
+        'useContext',
+        'useLayoutEffect',
+    ]) {
+        if (bodyText.includes(hook))
+            imports.addReact(hook);
+    }
+    return { bodyLines, stateCtx };
+}
 // ── Main export ──────────────────────────────────────────────────────────
 export function transpileInk(root, _config) {
+    _onHookCounter = 0; // Reset per-component counter
+    _crossFileImports.clear(); // Reset cross-file imports
     const sourceMap = [];
     const imports = new ImportTracker();
     const lines = [];
-    // Handle file-level AST: find the screen node, keep siblings as file-level nodes
-    const screenNode = root.type === 'screen' ? root : (root.children || []).find((c) => c.type === 'screen') || root;
-    const fileLevelNodes = root.type === 'screen' ? [] : (root.children || []).filter((c) => c !== screenNode);
+    // Handle file-level AST: find screen node(s), keep siblings as file-level nodes
+    const allScreenNodes = root.type === 'screen' ? [root] : (root.children || []).filter((c) => c.type === 'screen');
+    const screenNode = allScreenNodes.length > 0 ? allScreenNodes[allScreenNodes.length - 1] : root;
+    const fileLevelNodes = root.type === 'screen' ? [] : (root.children || []).filter((c) => c.type !== 'screen');
+    // Secondary screens (all except the last/default one)
+    const secondaryScreens = allScreenNodes.slice(0, -1);
     const screenProps = getProps(screenNode);
     const screenName = screenProps.name || 'App';
     // Component props from screen attributes OR prop child nodes
@@ -695,48 +1374,15 @@ export function transpileInk(root, _config) {
         })
             .join('; ')} }`
         : '';
-    // Separate node categories — search inside the screen node
-    const stateNodes = getChildren(screenNode, 'state');
-    const refNodes = getChildren(screenNode, 'ref');
-    const onNodes = getChildren(screenNode, 'on');
-    const streamNodes = getChildren(screenNode, 'stream');
-    const logicNodes = [...getChildren(screenNode, 'logic'), ...getChildren(screenNode, 'effect')];
-    const callbackNodes = getChildren(screenNode, 'callback');
-    const isInkUiNode = (type) => type === 'each' ||
-        type === 'conditional' ||
-        type === 'select' ||
-        type === 'model' ||
-        type === 'repository' ||
-        type === 'dependency' ||
-        type === 'cache';
     // File-level imports go before component; file-level fn/const go after
+    // Collect import nodes from ALL screens (not just primary) so user imports aren't dropped
+    const secondaryImports = secondaryScreens.flatMap((s) => (s.children || []).filter((c) => c.type === 'import'));
     const coreChildren = [
         ...fileLevelNodes.filter((c) => isCoreNode(c.type) && c.type !== 'screen' && c.type !== 'fn' && c.type !== 'const'),
         ...(screenNode.children || []).filter((c) => isCoreNode(c.type) && c.type !== 'on' && !isInkUiNode(c.type)),
+        ...secondaryImports,
     ];
-    const memoNodes = getChildren(screenNode, 'memo');
-    const renderNode = getChildren(screenNode, 'render')[0];
-    const uiChildren = (screenNode.children || []).filter((c) => c.type !== 'state' &&
-        c.type !== 'ref' &&
-        c.type !== 'on' &&
-        c.type !== 'stream' &&
-        c.type !== 'logic' &&
-        c.type !== 'effect' &&
-        c.type !== 'callback' &&
-        c.type !== 'memo' &&
-        c.type !== 'render' &&
-        c.type !== 'prop' &&
-        (!isCoreNode(c.type) || isInkUiNode(c.type)));
     const fileLevelFns = fileLevelNodes.filter((c) => c.type === 'fn' || c.type === 'const');
-    // Bug #1: Collect nested on-nodes from UI tree and hoist to component level
-    const nestedOnNodes = collectNestedOnNodes(screenNode);
-    // Deduplicate — top-level on-nodes are already in onNodes
-    const allOnNodes = [...onNodes];
-    for (const nested of nestedOnNodes) {
-        if (!onNodes.includes(nested)) {
-            allOnNodes.push(nested);
-        }
-    }
     // ── Core nodes emitted above component (types, interfaces, machines, events) ──
     const coreLines = [];
     if (coreChildren.length > 0) {
@@ -744,7 +1390,7 @@ export function transpileInk(root, _config) {
         for (const child of coreChildren) {
             if (child.type === 'machine') {
                 imports.addReact('useReducer');
-                coreLines.push(...generateMachineReducer(child));
+                coreLines.push(...generateMachineReducer(child, { safeDispatch: true, emitImport: false }));
             }
             else if (child.type === 'import') {
                 // Merge react/ink imports into tracker to avoid duplicates
@@ -776,102 +1422,114 @@ export function transpileInk(root, _config) {
             coreLines.push('');
         }
     }
-    // ── Component body ──
-    const bodyLines = [];
-    // State hooks
-    for (const stateNode of stateNodes) {
-        bodyLines.push(...generateStateHook(stateNode, imports));
-    }
-    if (stateNodes.length > 0)
-        bodyLines.push('');
-    // Ref hooks (Feature #10)
-    for (const refNode of refNodes) {
-        bodyLines.push(...generateRefHook(refNode, imports));
+    // ── Component body (via shared compileScreenBody) ──
+    const { bodyLines, stateCtx } = compileScreenBody(screenNode, imports);
+    // ── Assemble ──
+    // Note: imports.emit() is deferred to AFTER secondary screens + default component
+    // so all required imports are tracked before emission.
+    const componentLines = [];
+    // Core nodes
+    if (coreLines.length > 0) {
+        componentLines.push(...coreLines);
     }
-    if (refNodes.length > 0)
-        bodyLines.push('');
-    // Memo hooks
-    for (const memoNode of memoNodes) {
-        const mp = getProps(memoNode);
-        const mName = mp.name;
-        const mDeps = mp.deps || '';
-        const mDepsArr = mDeps ? `[${mDeps}]` : '[]';
-        const handlerChild = (memoNode.children || []).find((c) => c.type === 'handler');
-        const code = handlerChild ? getProps(handlerChild).code || '' : '';
-        if (mName && code) {
-            imports.addReact('useMemo');
-            const dedented = dedent(code);
-            bodyLines.push(`  const ${mName} = useMemo(() => {`);
-            for (const line of dedented.split('\n')) {
-                bodyLines.push(`          ${line}`);
-            }
-            bodyLines.push(`  }, ${mDepsArr});`);
-            bodyLines.push('');
+    // Secondary screen components — full compilation via shared compileScreenBody
+    for (const secScreen of secondaryScreens) {
+        const secProps = getProps(secScreen);
+        const secName = secProps.name || 'Component';
+        const secPropsAttr = secProps.props;
+        const secPropChildren = getChildren(secScreen, 'prop');
+        const secPropParts = secPropsAttr ? splitPropsRespectingDepth(secPropsAttr) : [];
+        for (const pc of secPropChildren) {
+            const pp = getProps(pc);
+            const pn = pp.name;
+            const pt = pp.type || 'any';
+            const opt = pp.optional === 'true' || pp.optional === true;
+            if (pn)
+                secPropParts.push(`${pn}${opt ? '?' : ''}:${pt}`);
         }
+        const secParam = secPropParts.length > 0
+            ? `{ ${secPropParts.map((p) => p.trim().split(':')[0].replace('?', '').trim()).join(', ')} }: { ${secPropParts
+                .map((p) => {
+                const t = p.trim();
+                return t.includes(':') ? t : `${t}: any`;
+            })
+                .join('; ')} }`
+            : '';
+        // Full body compilation — same pipeline as primary screen
+        const { bodyLines: secBodyLines, stateCtx: secCtx } = compileScreenBody(secScreen, imports);
+        const secExportAttr = secProps.export;
+        const secExportKw = secExportAttr === 'default' ? 'export default' : 'export';
+        const secMemoAttr = secProps.memo;
+        const secUseMemo = secMemoAttr === 'true' || secMemoAttr === true || (typeof secMemoAttr === 'string' && secMemoAttr !== 'false');
+        const secMemoComp = secUseMemo && typeof secMemoAttr === 'string' && secMemoAttr !== 'true' ? secMemoAttr : null;
+        const secMemoExpr = secMemoComp && isExpr(secProps.memo) ? secProps.memo.code : secMemoComp;
+        if (secUseMemo) {
+            componentLines.push(`const ${secName} = React.memo(function ${secName}(${secParam}) {`);
+            if (secCtx.needsInkSafe)
+                componentLines.push(...emitInkSafePreamble());
+            componentLines.push(...secBodyLines);
+            componentLines.push(secMemoExpr ? `}, ${secMemoExpr});` : '});');
+            componentLines.push(`${secExportKw} { ${secName} };`);
+        }
+        else {
+            componentLines.push(`${secExportKw} function ${secName}(${secParam}) {`);
+            if (secCtx.needsInkSafe)
+                componentLines.push(...emitInkSafePreamble());
+            componentLines.push(...secBodyLines);
+            componentLines.push('}');
+        }
+        componentLines.push('');
     }
-    // Callback hooks (Feature #11)
-    for (const callbackNode of callbackNodes) {
-        bodyLines.push(...generateCallbackHook(callbackNode, imports));
-        bodyLines.push('');
-    }
-    // on event=key → useInput() hooks (Bug #1: now includes hoisted nested on-nodes)
-    for (const onNode of allOnNodes) {
-        bodyLines.push(...generateOnHook(onNode, imports));
-    }
-    // Stream effects → useEffect with async generator iteration
-    for (const streamNode of streamNodes) {
-        bodyLines.push(...generateStreamEffect(streamNode, imports));
-        bodyLines.push('');
-    }
-    // Logic effects → useEffect (Feature #8)
-    for (const logicNode of logicNodes) {
-        bodyLines.push(...generateLogicEffect(logicNode, imports));
-        bodyLines.push('');
-    }
-    // JSX return — use explicit render handler if present, otherwise auto-generate
-    if (renderNode) {
-        const handlerChild = (renderNode.children || []).find((c) => c.type === 'handler');
-        const code = handlerChild ? getProps(handlerChild).code || '' : '';
-        if (code.trim()) {
-            const dedented = dedent(code);
-            for (const line of dedented.split('\n')) {
-                bodyLines.push(`  ${line}`);
-            }
+    // Component (Feature #9: with props) — respect export= and memo= attributes
+    const screenExportAttr = screenProps.export;
+    const screenMemoAttr = screenProps.memo;
+    const useMemo = screenMemoAttr === 'true' ||
+        screenMemoAttr === true ||
+        (typeof screenMemoAttr === 'string' && screenMemoAttr !== 'false');
+    const memoComparator = useMemo && typeof screenMemoAttr === 'string' && screenMemoAttr !== 'true' ? screenMemoAttr : null;
+    const memoComparatorExpr = memoComparator && isExpr(screenProps.memo) ? screenProps.memo.code : memoComparator;
+    if (useMemo) {
+        // React.memo wrapper: const Name = React.memo(function Name(props) { ... }, comparator?);
+        const exportKw = screenExportAttr === 'default' ? 'export default' : 'export';
+        componentLines.push(`const ${screenName} = React.memo(function ${screenName}(${propsParam}) {`);
+        if (stateCtx.needsInkSafe) {
+            componentLines.push(...emitInkSafePreamble());
+        }
+        componentLines.push(...bodyLines);
+        if (memoComparatorExpr) {
+            componentLines.push(`}, ${memoComparatorExpr});`);
         }
         else {
-            bodyLines.push('  return null;');
+            componentLines.push('});');
         }
+        componentLines.push(`${exportKw} { ${screenName} };`);
     }
     else {
-        imports.addInk('Box');
-        bodyLines.push('  return (');
-        bodyLines.push('    <Box flexDirection="column">');
-        for (const child of uiChildren) {
-            bodyLines.push(...renderInkNode(child, '      ', imports));
+        const exportKw = screenExportAttr === 'default' ? 'export default' : 'export';
+        componentLines.push(`${exportKw} function ${screenName}(${propsParam}) {`);
+        if (stateCtx.needsInkSafe) {
+            componentLines.push(...emitInkSafePreamble());
         }
-        bodyLines.push('    </Box>');
-        bodyLines.push('  );');
-    }
-    // ── Assemble ──
-    // Imports (computed last since renderInkNode populates the tracker)
-    lines.push(...imports.emit());
-    lines.push('');
-    // Core nodes
-    if (coreLines.length > 0) {
-        lines.push(...coreLines);
+        componentLines.push(...bodyLines);
+        componentLines.push('}');
     }
-    // Component (Feature #9: with props)
-    lines.push(`export default function ${screenName}(${propsParam}) {`);
-    lines.push(...bodyLines);
-    lines.push('}');
     // File-level functions/constants emitted after the screen component
     if (fileLevelFns.length > 0) {
-        lines.push('');
+        componentLines.push('');
         for (const fn of fileLevelFns) {
-            lines.push(...generateCoreNode(fn));
-            lines.push('');
+            componentLines.push(...generateCoreNode(fn));
+            componentLines.push('');
         }
     }
+    // NOW emit imports — after all components have populated the tracker
+    lines.push(...imports.emit());
+    // Cross-file screen imports (screen-embed with from=)
+    for (const [path, names] of _crossFileImports) {
+        lines.push(`import { ${[...names].sort().join(', ')} } from '${path}';`);
+    }
+    _crossFileImports.clear();
+    lines.push('');
+    lines.push(...componentLines);
     // Source map
     sourceMap.push({
         irLine: root.loc?.line || 0,
@@ -884,12 +1542,37 @@ export function transpileInk(root, _config) {
     const irTokenCount = countTokens(irText);
     const tsTokenCount = countTokens(code);
     const tokenReduction = Math.round((1 - irTokenCount / tsTokenCount) * 100);
+    // Generate artifacts: entry point + per-screen component files for multi-screen
+    const artifacts = [];
+    // Entry-point artifact: render(<App />) + waitUntilExit()
+    const entryLines = [];
+    entryLines.push(`#!/usr/bin/env node`);
+    entryLines.push(`import React from 'react';`);
+    entryLines.push(`import { render } from 'ink';`);
+    if (screenExportAttr === 'named') {
+        entryLines.push(`import { ${screenName} } from './${screenName}.js';`);
+    }
+    else {
+        entryLines.push(`import ${screenName} from './${screenName}.js';`);
+    }
+    entryLines.push('');
+    entryLines.push(`const app = render(<${screenName} />);`);
+    entryLines.push(`await app.waitUntilExit();`);
+    artifacts.push({ path: 'index.tsx', content: entryLines.join('\n'), type: 'entry' });
+    // Main component artifact (always emitted so entry-point import resolves)
+    artifacts.push({ path: `${screenName}.tsx`, content: code, type: 'component' });
+    // Per-screen component artifacts for secondary screens
+    for (const secScreen of secondaryScreens) {
+        const secName = getProps(secScreen).name || 'Component';
+        artifacts.push({ path: `${secName}.tsx`, content: '', type: 'component' });
+    }
     return {
         code,
         sourceMap,
         irTokenCount,
         tsTokenCount,
         tokenReduction,
+        artifacts,
         diagnostics: (() => {
             const accounted = new Map();
             accountNode(accounted, root, 'expressed', undefined, true);