@kernlang/react 2.0.0 → 3.0.0

package/dist/transpiler-nextjs.js

@@ -1,7 +1,8 @@
-import { stylesToTailwind, colorToTw, countTokens, serializeIR, camelKey, escapeJsxText, escapeJsString, buildTailwindProfile, buildNextjsProfile, applyTailwindTokenRules } from '@kernlang/core';
+import { stylesToTailwind, colorToTw, countTokens, serializeIR, escapeJsxText, escapeJsxAttr, escapeJsString, buildTailwindProfile, buildNextjsProfile, applyTailwindTokenRules } from '@kernlang/core';
 import { planStructure } from './structure.js';
 import { buildStructuredArtifacts } from './artifact-utils.js';
 function getProps(node) { return node.props || {}; }
+function isExpr(v) { return typeof v === 'object' && v !== null && '__expr' in v; }
 function getStyles(node) { return getProps(node).styles || {}; }
 // ── Unified import helpers (from Codex) ──────────────────────────────────
 function addDefaultImport(ctx, source, name) {
@@ -56,11 +57,53 @@ function emitImports(ctx) {
     return lines;
 }
 function twClasses(node, ctx, extra = '') {
-    let tw = stylesToTailwind(getStyles(node), ctx.colors);
+    const styles = getStyles(node);
+    // Extract className pass-through (e.g. {className:doc.page} → className={doc.page})
+    const classNameRef = styles.className;
+    const inlineStyles = {};
+    const filteredStyles = {};
+    for (const [k, v] of Object.entries(styles)) {
+        if (k === 'className')
+            continue;
+        // CSS custom properties and complex values → inline style
+        if (v.includes('var(') || k === 'borderBottom' || k === 'background' || k === 'color' || k === 'fontFamily') {
+            inlineStyles[k] = v;
+        }
+        else {
+            filteredStyles[k] = v;
+        }
+    }
+    let tw = stylesToTailwind(filteredStyles, ctx.colors);
     if (ctx.twProfile)
         tw = applyTailwindTokenRules(tw, ctx.twProfile);
     const parts = [tw, extra].filter(Boolean);
-    return parts.length > 0 ? ` className="${parts.join(' ')}"` : '';
+    const attrs = [];
+    if (classNameRef) {
+        // className is a JS expression reference like doc.page
+        if (parts.length > 0) {
+            attrs.push(` className={\`\${${classNameRef}} ${parts.join(' ')}\`}`);
+        }
+        else {
+            attrs.push(` className={${classNameRef}}`);
+        }
+    }
+    else if (parts.length > 0) {
+        attrs.push(` className="${parts.join(' ')}"`);
+    }
+    if (Object.keys(inlineStyles).length > 0) {
+        const pairs = Object.entries(inlineStyles).map(([k, v]) => `${k}: '${v}'`);
+        attrs.push(` style={{ ${pairs.join(', ')} }}`);
+    }
+    return attrs.join('');
+}
+// ── Route path helper ────────────────────────────────────────────────────
+function routeToPath(route, segment) {
+    // Normalize: strip leading/trailing slashes
+    const normalized = route.replace(/^\/+|\/+$/g, '');
+    const parts = normalized ? normalized.split('/') : [];
+    if (segment)
+        parts.push(segment);
+    return parts.length > 0 ? parts.join('/') + '/' : '';
 }
 // ── Node renderers ──────────────────────────────────────────────────────
 function renderNode(node, ctx, indent) {
@@ -114,8 +157,12 @@ function renderNode(node, ctx, indent) {
         case 'image':
             renderImage(node, ctx, indent);
             break;
+        case 'codeblock':
+            renderCodeBlock(node, ctx, indent);
+            break;
         case 'input':
-            ctx.lines.push(`${indent}<input${twClasses(node, ctx)} />`);
+        case 'textarea':
+            renderInput(node, ctx, indent);
             break;
         case 'slider':
             renderSlider(node, ctx, indent);
@@ -157,6 +204,32 @@ function renderNode(node, ctx, indent) {
         case 'tab':
             ctx.lines.push(`${indent}<button${twClasses(node, ctx)}>${escapeJsxText(String(p.label || ''))}</button>`);
             break;
+        case 'table':
+            ctx.lines.push(`${indent}<table${twClasses(node, ctx)}>`);
+            renderChildren(node, ctx, indent);
+            ctx.lines.push(`${indent}</table>`);
+            break;
+        case 'thead':
+            ctx.lines.push(`${indent}<thead>`);
+            renderChildren(node, ctx, indent);
+            ctx.lines.push(`${indent}</thead>`);
+            break;
+        case 'tbody':
+            ctx.lines.push(`${indent}<tbody>`);
+            renderChildren(node, ctx, indent);
+            ctx.lines.push(`${indent}</tbody>`);
+            break;
+        case 'tr':
+            ctx.lines.push(`${indent}<tr${twClasses(node, ctx)}>`);
+            renderChildren(node, ctx, indent);
+            ctx.lines.push(`${indent}</tr>`);
+            break;
+        case 'th':
+            renderTableCell(node, ctx, indent, 'th');
+            break;
+        case 'td':
+            renderTableCell(node, ctx, indent, 'td');
+            break;
         case 'generateMetadata':
             renderGenerateMetadata(node, ctx);
             break;
@@ -172,6 +245,23 @@ function renderNode(node, ctx, indent) {
         case 'fetch':
             renderFetchNode(node, ctx);
             break;
+        case 'on':
+            renderOnHandler(node, ctx);
+            return;
+        case 'state':
+            ctx.stateDecls.push({ name: String(p.name || ''), initial: String(p.initial ?? '') });
+            ctx.isClient = true; // state requires 'use client'
+            return;
+        case 'logic':
+            if (p.code)
+                ctx.logicBlocks.push(String(p.code));
+            else if (node.children) {
+                const handlerChild = node.children.find(c => c.type === 'handler');
+                if (handlerChild?.props?.code)
+                    ctx.logicBlocks.push(String(handlerChild.props.code));
+            }
+            ctx.isClient = true;
+            return;
         case 'theme': break;
         default:
             ctx.lines.push(`${indent}<div${twClasses(node, ctx)}>`);
@@ -231,12 +321,51 @@ function renderMetadata(node, ctx) {
 function renderSection(node, ctx, indent) {
     const p = getProps(node);
     const title = p.title || '';
-    const key = p.key || camelKey(title);
-    ctx.lines.push(`${indent}<section>`);
-    ctx.lines.push(`${indent}  <h2 className="text-lg font-semibold mb-4">${escapeJsxText(title)}</h2>`);
+    const id = p.id;
+    const idAttr = id ? ` id="${id}"` : '';
+    const tw = twClasses(node, ctx);
+    ctx.lines.push(`${indent}<section${idAttr}${tw}>`);
+    if (title) {
+        ctx.lines.push(`${indent}  <h2 className="text-lg font-semibold mb-4">${escapeJsxText(title)}</h2>`);
+    }
     renderChildren(node, ctx, indent);
     ctx.lines.push(`${indent}</section>`);
 }
+function renderCodeBlock(node, ctx, indent) {
+    const p = getProps(node);
+    const lang = p.lang || '';
+    const langClass = lang ? ` language-${lang}` : '';
+    const hasCustomStyle = getStyles(node).className || getStyles(node).background;
+    const preAttrs = hasCustomStyle ? twClasses(node, ctx) : ` className="bg-zinc-900 rounded-lg p-4 overflow-x-auto"`;
+    const codeClass = hasCustomStyle
+        ? `className="${langClass.trim()}"` + (getStyles(node).fontFamily ? ` style={{ fontFamily: '${getStyles(node).fontFamily}' }}` : '')
+        : `className="text-sm font-mono text-zinc-100${langClass}"`;
+    // Content: inline value prop or body child node
+    const rawValue = p.value;
+    if (isExpr(rawValue)) {
+        ctx.lines.push(`${indent}<pre${preAttrs}>`);
+        ctx.lines.push(`${indent}  <code ${codeClass}>{${rawValue.code}}</code>`);
+        ctx.lines.push(`${indent}</pre>`);
+        return;
+    }
+    let content = rawValue || '';
+    if (!content && node.children) {
+        const bodyNode = node.children.find(c => c.type === 'body');
+        if (bodyNode) {
+            const bp = getProps(bodyNode);
+            // body value="..." OR body <<<...>>> (multiline block → code prop)
+            content = bp.code || bp.value || '';
+        }
+    }
+    // Escape for JSX template literal: backslashes, backticks, ${
+    const escaped = content
+        .replace(/\\/g, '\\\\')
+        .replace(/`/g, '\\`')
+        .replace(/\$\{/g, '\\${');
+    ctx.lines.push(`${indent}<pre${preAttrs}>`);
+    ctx.lines.push(`${indent}  <code ${codeClass}>{\`${escaped}\`}</code>`);
+    ctx.lines.push(`${indent}</pre>`);
+}
 function renderCard(node, ctx, indent) {
     const styles = { ...getStyles(node) };
     const border = styles.border;
@@ -258,30 +387,67 @@ function renderCard(node, ctx, indent) {
         ctx.lines.push(`${indent}</div>`);
     }
 }
+const TEXT_TAG_MAP = { p: 'p', h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6', label: 'label', span: 'span', pre: 'pre', code: 'code' };
 function renderText(node, ctx, indent) {
     const p = getProps(node);
-    const value = p.value;
+    const rawValue = p.value;
     const bind = p.bind;
-    const el = p.tag === 'p' ? 'p' : p.tag === 'h1' ? 'h1' : p.tag === 'h2' ? 'h2' : p.tag === 'label' ? 'label' : 'span';
+    const el = TEXT_TAG_MAP[p.tag] || 'span';
     const tw = twClasses(node, ctx);
-    if (bind)
+    if (isExpr(rawValue))
+        ctx.lines.push(`${indent}<${el}${tw}>{${rawValue.code}}</${el}>`);
+    else if (bind)
         ctx.lines.push(`${indent}<${el}${tw}>{${bind}}</${el}>`);
-    else if (value)
-        ctx.lines.push(`${indent}<${el}${tw}>${escapeJsxText(value)}</${el}>`);
+    else if (rawValue)
+        ctx.lines.push(`${indent}<${el}${tw}>${escapeJsxText(rawValue)}</${el}>`);
 }
 function renderButton(node, ctx, indent) {
     const p = getProps(node);
     const text = p.text || '';
     const to = p.to;
-    const onClick = p.onClick;
+    const rawOnClick = p.onClick;
+    const onClick = isExpr(rawOnClick) ? rawOnClick.code : rawOnClick;
     if (to) {
         addDefaultImport(ctx, 'next/link', 'Link');
         ctx.lines.push(`${indent}<Link href="/${to.toLowerCase()}"${twClasses(node, ctx)}>${escapeJsxText(text)}</Link>`);
     }
     else {
+        ctx.isClient = true; // onClick requires 'use client'
         ctx.lines.push(`${indent}<button${twClasses(node, ctx)} onClick={${onClick || '() => {}'}}>${escapeJsxText(text)}</button>`);
     }
 }
+function renderInput(node, ctx, indent) {
+    const p = getProps(node);
+    const isTextarea = node.type === 'textarea' || p.type === 'textarea' || p.multiline;
+    const tag = isTextarea ? 'textarea' : 'input';
+    const attrs = [];
+    const tw = twClasses(node, ctx);
+    if (p.bind) {
+        const bind = p.bind;
+        const setter = `set${bind.charAt(0).toUpperCase() + bind.slice(1)}`;
+        attrs.push(`value={${bind}}`);
+        ctx.isClient = true; // onChange requires 'use client'
+        if (isExpr(p.onChange))
+            attrs.push(`onChange={${p.onChange.code}}`);
+        else if (p.onChange)
+            attrs.push(`onChange={${p.onChange}}`);
+        else
+            attrs.push(`onChange={(e) => ${setter}(e.target.value)}`);
+    }
+    if (p.placeholder)
+        attrs.push(`placeholder="${p.placeholder}"`);
+    if (!isTextarea && p.type && p.type !== 'textarea')
+        attrs.push(`type="${p.type}"`);
+    if (p.spellcheck === 'false' || p.spellcheck === false)
+        attrs.push('spellCheck={false}');
+    const attrStr = attrs.length > 0 ? ' ' + attrs.join(' ') : '';
+    if (isTextarea) {
+        ctx.lines.push(`${indent}<${tag}${tw}${attrStr} rows={4} />`);
+    }
+    else {
+        ctx.lines.push(`${indent}<${tag}${tw}${attrStr} />`);
+    }
+}
 function renderLink(node, ctx, indent) {
     const p = getProps(node);
     addDefaultImport(ctx, 'next/link', 'Link');
@@ -293,25 +459,107 @@ function renderImage(node, ctx, indent) {
     const p = getProps(node);
     addDefaultImport(ctx, 'next/image', 'Image');
     const tw = twClasses(node, ctx);
-    const width = p.width || (getStyles(node).w) || '100';
-    const height = p.height || (getStyles(node).h) || '100';
-    ctx.lines.push(`${indent}<Image src="/${p.src}.png" alt="${p.alt || p.src}" width={${width}} height={${height}}${tw} />`);
+    const rawSrc = p.src || '';
+    const src = (rawSrc.startsWith('/') || rawSrc.includes('://') || rawSrc.includes('.')) ? rawSrc : `/${rawSrc}.png`;
+    const alt = escapeJsxAttr(String(p.alt || p.src || ''));
+    const fill = p.fill === 'true' || p.fill === true;
+    const priority = p.priority === 'true' || p.priority === true;
+    if (fill) {
+        ctx.lines.push(`${indent}<Image src="${src}" alt="${alt}"${priority ? ' priority' : ''} fill${tw} />`);
+    }
+    else {
+        const width = p.width || (getStyles(node).w) || '100';
+        const height = p.height || (getStyles(node).h) || '100';
+        ctx.lines.push(`${indent}<Image src="${src}" alt="${alt}" width={${width}} height={${height}}${priority ? ' priority' : ''}${tw} />`);
+    }
 }
 function renderSlider(node, ctx, indent) {
     const p = getProps(node);
     const bind = p.bind;
     const setter = bind ? `set${bind.charAt(0).toUpperCase() + bind.slice(1)}` : 'setValue';
+    ctx.isClient = true; // onChange requires 'use client'
     ctx.lines.push(`${indent}<input type="range" min={${p.min || 0}} max={${p.max || 100}} step={${p.step || 1}} value={${bind || 'value'}} onChange={(e) => ${setter}(parseFloat(e.target.value))} className="w-full h-2 bg-zinc-700 rounded-lg appearance-none cursor-pointer accent-orange-500" />`);
 }
 function renderToggle(node, ctx, indent) {
     const p = getProps(node);
     const bind = p.bind;
     const setter = bind ? `set${bind.charAt(0).toUpperCase() + bind.slice(1)}` : 'setValue';
+    ctx.isClient = true; // onChange requires 'use client'
     ctx.lines.push(`${indent}<label className="relative inline-flex items-center cursor-pointer">`);
     ctx.lines.push(`${indent}  <input type="checkbox" className="sr-only peer" checked={${bind || 'value'}} onChange={(e) => ${setter}(e.target.checked)} />`);
     ctx.lines.push(`${indent}  <div className="w-11 h-6 bg-zinc-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-orange-600" />`);
     ctx.lines.push(`${indent}</label>`);
 }
+function renderOnHandler(node, ctx) {
+    const p = getProps(node);
+    const event = (p.event || p.name);
+    const handlerRef = p.handler;
+    const key = p.key;
+    const isAsync = p.async === 'true' || p.async === true;
+    const handlerChild = (node.children || []).find(c => c.type === 'handler');
+    const code = handlerChild ? (getProps(handlerChild).code || '') : '';
+    if (handlerRef && !code)
+        return;
+    ctx.isClient = true; // event handlers require 'use client'
+    const fnName = handlerRef || `handle${event.charAt(0).toUpperCase() + event.slice(1)}`;
+    const asyncKw = isAsync ? 'async ' : '';
+    const paramType = event === 'submit' ? 'e: React.FormEvent'
+        : event === 'click' ? 'e: React.MouseEvent'
+            : event === 'change' ? 'e: React.ChangeEvent'
+                : event === 'key' || event === 'keydown' || event === 'keyup' ? 'e: React.KeyboardEvent'
+                    : event === 'focus' || event === 'blur' ? 'e: React.FocusEvent'
+                        : event === 'scroll' ? 'e: React.UIEvent'
+                            : `e: React.SyntheticEvent`;
+    const keyGuard = key ? `    if (e.key !== '${key}') return;\n` : '';
+    addNamedImport(ctx, 'react', 'useCallback');
+    let block = `  const ${fnName} = useCallback(${asyncKw}(${paramType}) => {\n`;
+    if (keyGuard)
+        block += keyGuard;
+    if (code) {
+        for (const line of code.split('\n')) {
+            block += `    ${line}\n`;
+        }
+    }
+    block += `  }, []);\n`;
+    ctx.bodyLines.push(block);
+    if (event === 'key' || event === 'keydown' || event === 'keyup') {
+        addNamedImport(ctx, 'react', 'useEffect');
+        const domEvent = event === 'key' ? 'keydown' : event;
+        let effect = `  useEffect(() => {\n`;
+        effect += `    const listener = (e: KeyboardEvent) => ${fnName}(e as unknown as React.KeyboardEvent);\n`;
+        effect += `    window.addEventListener('${domEvent}', listener);\n`;
+        effect += `    return () => window.removeEventListener('${domEvent}', listener);\n`;
+        effect += `  }, [${fnName}]);\n`;
+        ctx.bodyLines.push(effect);
+    }
+    if (event === 'resize') {
+        addNamedImport(ctx, 'react', 'useEffect');
+        let effect = `  useEffect(() => {\n`;
+        effect += `    window.addEventListener('resize', ${fnName});\n`;
+        effect += `    return () => window.removeEventListener('resize', ${fnName});\n`;
+        effect += `  }, [${fnName}]);\n`;
+        ctx.bodyLines.push(effect);
+    }
+}
+function renderTableCell(node, ctx, indent, tag) {
+    const p = getProps(node);
+    const tw = twClasses(node, ctx);
+    const rawValue = p.value;
+    if (isExpr(rawValue)) {
+        ctx.lines.push(`${indent}<${tag}${tw}>{${rawValue.code}}</${tag}>`);
+    }
+    else if (rawValue) {
+        ctx.lines.push(`${indent}<${tag}${tw}>${escapeJsxText(rawValue)}</${tag}>`);
+    }
+    else if (node.children && node.children.length > 0) {
+        ctx.lines.push(`${indent}<${tag}${tw}>`);
+        renderChildren(node, ctx, indent);
+        ctx.lines.push(`${indent}</${tag}>`);
+    }
+    else {
+        ctx.lines.push(`${indent}<${tag}${tw} />`);
+    }
+}
 function renderGrid(node, ctx, indent) {
     const p = getProps(node);
     ctx.lines.push(`${indent}<div className="grid grid-cols-1 md:grid-cols-${p.cols || 1} gap-${Math.round(Number(p.gap || 16) / 4)}">`);
@@ -328,14 +576,14 @@ function renderConditional(node, ctx, indent) {
 }
 function renderComponent(node, ctx, indent) {
     const p = getProps(node);
-    const ref = p.ref;
+    const ref = (p.ref || p.name);
     if (!ref)
         return;
     ctx.componentImports.add(ref);
     const hasOnChange = 'onChange' in p;
     const attrs = [];
     for (const [k, v] of Object.entries(p)) {
-        if (['ref', 'styles', 'pseudoStyles', 'themeRefs'].includes(k))
+        if (['ref', 'name', 'styles', 'pseudoStyles', 'themeRefs'].includes(k))
             continue;
         if (k === 'bind') {
             attrs.push(`value={${v}}`);
@@ -355,7 +603,15 @@ function renderComponent(node, ctx, indent) {
         else
             attrs.push(`${k}={${JSON.stringify(v)}}`);
     }
-    ctx.lines.push(`${indent}<${ref}${attrs.length ? ' ' + attrs.join(' ') : ''} />`);
+    const attrStr = attrs.length ? ' ' + attrs.join(' ') : '';
+    if (node.children && node.children.length > 0) {
+        ctx.lines.push(`${indent}<${ref}${attrStr}>`);
+        renderChildren(node, ctx, indent);
+        ctx.lines.push(`${indent}</${ref}>`);
+    }
+    else {
+        ctx.lines.push(`${indent}<${ref}${attrStr} />`);
+    }
 }
 function renderProgress(node, ctx, indent) {
     const p = getProps(node);
@@ -446,6 +702,8 @@ function _transpileNextjsInner(root, config) {
         generateMetadataInfo: null,
         fetchCalls: [],
         bodyLines: [],
+        stateDecls: [],
+        logicBlocks: [],
         colors: config?.colors,
         twProfile: config?.frameworkVersions ? buildTailwindProfile(config.frameworkVersions) : undefined,
         njProfile: config?.frameworkVersions ? buildNextjsProfile(config.frameworkVersions) : undefined,
@@ -461,6 +719,11 @@ function _transpileNextjsInner(root, config) {
     // If there are fetch calls, mark page as async
     if (ctx.fetchCalls.length > 0)
         ctx.isAsync = true;
+    // Client components cannot be async in Next.js — client wins, drop server-only patterns
+    if (ctx.isClient && ctx.isAsync) {
+        ctx.isAsync = false;
+        ctx.fetchCalls = [];
+    }
     const name = rootProps.name || 'Page';
     const isLayout = root.type === 'layout';
     const isLoading = root.type === 'loading';
@@ -490,6 +753,21 @@ function _transpileNextjsInner(root, config) {
     if (ctx.metadata && !ctx.isClient && !ctx.generateMetadataInfo) {
         addNamedImport(ctx, 'next', 'Metadata', true);
     }
+    // State requires useState import
+    if (ctx.stateDecls.length > 0) {
+        addNamedImport(ctx, 'react', 'useState');
+    }
+    // Detect hook imports from logic blocks before emitting imports
+    for (const block of ctx.logicBlocks) {
+        if (block.includes('useEffect'))
+            addNamedImport(ctx, 'react', 'useEffect');
+        if (block.includes('useCallback'))
+            addNamedImport(ctx, 'react', 'useCallback');
+        if (block.includes('useMemo'))
+            addNamedImport(ctx, 'react', 'useMemo');
+        if (block.includes('useRef'))
+            addNamedImport(ctx, 'react', 'useRef');
+    }
     // Emit all imports (unified, sorted)
     code.push(...emitImports(ctx));
     if (code.length > 0 && code[code.length - 1] !== '')
@@ -560,6 +838,42 @@ function _transpileNextjsInner(root, config) {
             code.push(`  const ${fc.name} = await fetch('${fc.url}').then(r => r.json());`);
         }
     }
+    // Emit useState declarations
+    for (const s of ctx.stateDecls) {
+        const setter = `set${s.name.charAt(0).toUpperCase() + s.name.slice(1)}`;
+        const stateNode = root.children?.find(c => c.type === 'state' && c.props?.name === s.name);
+        const initProp = stateNode?.props?.initial;
+        const isExprInit = typeof initProp === 'object' && initProp !== null && '__expr' in initProp;
+        let initVal;
+        if (isExprInit) {
+            initVal = initProp.code;
+        }
+        else if (s.initial === 'true' || s.initial === 'false') {
+            initVal = s.initial;
+        }
+        else if (s.initial === '' || s.initial === "''") {
+            initVal = "''";
+        }
+        else if (!isNaN(Number(s.initial)) && s.initial !== '') {
+            initVal = s.initial;
+        }
+        else {
+            initVal = `'${s.initial}'`;
+        }
+        code.push(`  const [${s.name}, ${setter}] = useState(${initVal});`);
+    }
+    // Emit logic blocks & detect hook imports
+    for (const block of ctx.logicBlocks) {
+        code.push(`  ${block}`);
+        if (block.includes('useEffect'))
+            addNamedImport(ctx, 'react', 'useEffect');
+        if (block.includes('useCallback'))
+            addNamedImport(ctx, 'react', 'useCallback');
+        if (block.includes('useMemo'))
+            addNamedImport(ctx, 'react', 'useMemo');
+        if (block.includes('useRef'))
+            addNamedImport(ctx, 'react', 'useRef');
+    }
     // Emit body lines (notFound, redirect calls)
     for (const line of ctx.bodyLines) {
         code.push(line);
@@ -573,16 +887,19 @@ function _transpileNextjsInner(root, config) {
     const irTokenCount = countTokens(irText);
     const tsTokenCount = countTokens(output);
     const tokenReduction = tsTokenCount > 0 ? Math.round((1 - irTokenCount / tsTokenCount) * 100) : 0;
-    // Determine output filename convention
+    // Determine output filename convention (route-aware)
+    const route = rootProps.route;
+    const segment = rootProps.segment;
+    const routePrefix = route ? routeToPath(route, segment) : (segment ? routeToPath('', segment) : '');
     const files = [];
     if (isLayout)
-        files.push({ path: 'layout.tsx', content: output });
+        files.push({ path: `${routePrefix}layout.tsx`, content: output });
     else if (isLoading)
-        files.push({ path: 'loading.tsx', content: output });
+        files.push({ path: `${routePrefix}loading.tsx`, content: output });
     else if (isError)
-        files.push({ path: 'error.tsx', content: output });
+        files.push({ path: `${routePrefix}error.tsx`, content: output });
     else
-        files.push({ path: 'page.tsx', content: output });
+        files.push({ path: `${routePrefix}page.tsx`, content: output });
     return {
         code: output,
         sourceMap: ctx.sourceMap,
@@ -605,6 +922,8 @@ function _renderNextjsFile(file, config) {
         generateMetadataInfo: null,
         fetchCalls: [],
         bodyLines: [],
+        stateDecls: [],
+        logicBlocks: [],
         colors: config.colors,
         twProfile: config.frameworkVersions ? buildTailwindProfile(config.frameworkVersions) : undefined,
         njProfile: config.frameworkVersions ? buildNextjsProfile(config.frameworkVersions) : undefined,
@@ -621,8 +940,11 @@ function _renderNextjsFile(file, config) {
     const name = file.componentName || rootProps.name || 'Component';
     const isLayout = rootNode.type === 'layout';
     const isError = rootNode.type === 'error';
-    // 'use client' only when the component actually has client-side interactivity
-    // (ctx.isClient is set during rendering by renderPage/renderError/client=true flag)
+    // Client components cannot be async in Next.js — client wins, drop server-only patterns
+    if (ctx.isClient && ctx.isAsync) {
+        ctx.isAsync = false;
+        ctx.fetchCalls = [];
+    }
     const code = [];
     if (ctx.isClient) {
         code.push(`'use client';`);
@@ -648,6 +970,21 @@ function _renderNextjsFile(file, config) {
     // If there are fetch calls, mark page as async
     if (ctx.fetchCalls.length > 0)
         ctx.isAsync = true;
+    // State requires useState import
+    if (ctx.stateDecls.length > 0) {
+        addNamedImport(ctx, 'react', 'useState');
+    }
+    // Detect hook imports from logic blocks before emitting imports
+    for (const block of ctx.logicBlocks) {
+        if (block.includes('useEffect'))
+            addNamedImport(ctx, 'react', 'useEffect');
+        if (block.includes('useCallback'))
+            addNamedImport(ctx, 'react', 'useCallback');
+        if (block.includes('useMemo'))
+            addNamedImport(ctx, 'react', 'useMemo');
+        if (block.includes('useRef'))
+            addNamedImport(ctx, 'react', 'useRef');
+    }
     code.push(...emitImports(ctx));
     if (code.length > 0 && code[code.length - 1] !== '')
         code.push('');
@@ -706,6 +1043,43 @@ function _renderNextjsFile(file, config) {
     else {
         code.push(`export default function ${name}() {`);
     }
+    // Emit useState declarations
+    for (const s of ctx.stateDecls) {
+        const setter = `set${s.name.charAt(0).toUpperCase() + s.name.slice(1)}`;
+        const rootNode = file.nodes[0];
+        const stateNode = rootNode?.children?.find((c) => c.type === 'state' && c.props?.name === s.name);
+        const initProp = stateNode?.props?.initial;
+        const isExpr = typeof initProp === 'object' && initProp !== null && '__expr' in initProp;
+        let initVal;
+        if (isExpr) {
+            initVal = initProp.code;
+        }
+        else if (s.initial === 'true' || s.initial === 'false') {
+            initVal = s.initial;
+        }
+        else if (s.initial === '' || s.initial === "''") {
+            initVal = "''";
+        }
+        else if (!isNaN(Number(s.initial)) && s.initial !== '') {
+            initVal = s.initial;
+        }
+        else {
+            initVal = `'${s.initial}'`;
+        }
+        code.push(`  const [${s.name}, ${setter}] = useState(${initVal});`);
+    }
+    // Emit logic blocks & detect hook imports
+    for (const block of ctx.logicBlocks) {
+        code.push(`  ${block}`);
+        if (block.includes('useEffect'))
+            addNamedImport(ctx, 'react', 'useEffect');
+        if (block.includes('useCallback'))
+            addNamedImport(ctx, 'react', 'useCallback');
+        if (block.includes('useMemo'))
+            addNamedImport(ctx, 'react', 'useMemo');
+        if (block.includes('useRef'))
+            addNamedImport(ctx, 'react', 'useRef');
+    }
     // Emit fetch calls (inside async function body, before return)
     for (const fc of ctx.fetchCalls) {
         if (fc.options) {