@kernlang/react 3.1.6 → 3.1.8

package/dist/transpiler-nextjs.js

@@ -1,779 +1,8 @@
-import { stylesToTailwind, colorToTw, countTokens, serializeIR, escapeJsxText, escapeJsxAttr, escapeJsString, buildTailwindProfile, buildNextjsProfile, applyTailwindTokenRules, getProps, getStyles, buildDiagnostics, accountNode } from '@kernlang/core';
-import { planStructure } from './structure.js';
+import { accountNode, buildDiagnostics, countTokens, getProps, serializeIR } from '@kernlang/core';
 import { buildStructuredArtifacts } from './artifact-utils.js';
-function isExpr(v) { return typeof v === 'object' && v !== null && '__expr' in v; }
-// ── Unified import helpers (from Codex) ──────────────────────────────────
-function addDefaultImport(ctx, source, name) {
-    const spec = ctx.imports.get(source) || { namedImports: new Set(), typeOnlyImports: new Set() };
-    spec.defaultImport = name;
-    ctx.imports.set(source, spec);
-}
-function addNamedImport(ctx, source, name, typeOnly) {
-    const spec = ctx.imports.get(source) || { namedImports: new Set(), typeOnlyImports: new Set() };
-    if (typeOnly) {
-        spec.typeOnlyImports.add(name);
-    }
-    else {
-        spec.namedImports.add(name);
-    }
-    ctx.imports.set(source, spec);
-}
-function exprCode(value, fallback) {
-    if (typeof value === 'object' && value !== null && '__expr' in value) {
-        return value.code;
-    }
-    if (typeof value === 'string' && value.length > 0)
-        return value;
-    return fallback;
-}
-function emitImports(ctx) {
-    const lines = [];
-    for (const [source, spec] of [...ctx.imports.entries()].sort(([a], [b]) => a.localeCompare(b))) {
-        // Separate type-only imports from value imports
-        const typeImports = [...spec.typeOnlyImports].filter(n => !spec.namedImports.has(n));
-        const valueImports = [...spec.namedImports];
-        // Emit type-only import statement if there are type imports and no value imports sharing the source
-        if (typeImports.length > 0 && valueImports.length === 0 && !spec.defaultImport) {
-            lines.push(`import type { ${typeImports.sort().join(', ')} } from '${source}';`);
-        }
-        else {
-            // Emit value import (with default if present)
-            const clauses = [];
-            if (spec.defaultImport)
-                clauses.push(spec.defaultImport);
-            if (valueImports.length > 0)
-                clauses.push(`{ ${valueImports.sort().join(', ')} }`);
-            if (clauses.length > 0) {
-                lines.push(`import ${clauses.join(', ')} from '${source}';`);
-            }
-            // Emit separate type-only import if both type and value imports exist
-            if (typeImports.length > 0) {
-                lines.push(`import type { ${typeImports.sort().join(', ')} } from '${source}';`);
-            }
-        }
-    }
-    return lines;
-}
-function twClasses(node, ctx, extra = '') {
-    const rawStyles = getStyles(node);
-    // Expand semicolon-separated values that the parser merged into one entry
-    const styles = {};
-    for (const [k, v] of Object.entries(rawStyles)) {
-        if (v.includes(';')) {
-            const segs = v.split(';').map(s => s.trim()).filter(Boolean);
-            styles[k] = segs[0];
-            for (let i = 1; i < segs.length; i++) {
-                const ci = segs[i].indexOf(':');
-                if (ci > 0)
-                    styles[segs[i].slice(0, ci).trim()] = segs[i].slice(ci + 1).trim();
-            }
-        }
-        else {
-            styles[k] = v;
-        }
-    }
-    // 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;
-        // Vendor-prefixed properties, CSS custom properties, and complex values → inline style
-        if (k.startsWith('-') || 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);
-    const attrs = [];
-    if (classNameRef) {
-        // Detect if className is a JS expression (contains . or [) vs a plain CSS class string
-        const isExpr = /[.\[\](]/.test(classNameRef);
-        if (isExpr) {
-            if (parts.length > 0) {
-                attrs.push(` className={\`\${${classNameRef}} ${parts.join(' ')}\`}`);
-            }
-            else {
-                attrs.push(` className={${classNameRef}}`);
-            }
-        }
-        else {
-            // Plain CSS class name(s) — quote them
-            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]) => {
-            let jsKey;
-            if (k.startsWith('-')) {
-                // Vendor prefix: -webkit-background-clip → WebkitBackgroundClip
-                jsKey = k.slice(1).replace(/-([a-z])/g, (_, c) => c.toUpperCase())
-                    .replace(/^[a-z]/, c => c.toUpperCase());
-            }
-            else {
-                jsKey = k.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-            }
-            return `${jsKey}: '${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) {
-    const p = getProps(node);
-    ctx.sourceMap.push({ irLine: node.loc?.line || 0, irCol: node.loc?.col || 1, outLine: ctx.lines.length + 1, outCol: 1 });
-    switch (node.type) {
-        case 'page':
-        case 'screen':
-            renderPage(node, ctx, indent);
-            break;
-        case 'layout':
-            renderLayout(node, ctx, indent);
-            break;
-        case 'loading':
-            renderLoading(node, ctx, indent);
-            break;
-        case 'error':
-            renderError(node, ctx, indent);
-            break;
-        case 'metadata':
-            renderMetadata(node, ctx);
-            break;
-        case 'section':
-            renderSection(node, ctx, indent);
-            break;
-        case 'card':
-            renderCard(node, ctx, indent);
-            break;
-        case 'row':
-            ctx.lines.push(`${indent}<div${twClasses(node, ctx, 'flex')}>`);
-            renderChildren(node, ctx, indent);
-            ctx.lines.push(`${indent}</div>`);
-            break;
-        case 'col':
-            ctx.lines.push(`${indent}<div${twClasses(node, ctx, 'flex flex-col')}>`);
-            renderChildren(node, ctx, indent);
-            ctx.lines.push(`${indent}</div>`);
-            break;
-        case 'text':
-            renderText(node, ctx, indent);
-            break;
-        case 'divider':
-            ctx.lines.push(`${indent}<div${twClasses(node, ctx, 'h-px')} />`);
-            break;
-        case 'button':
-            renderButton(node, ctx, indent);
-            break;
-        case 'link':
-            renderLink(node, ctx, indent);
-            break;
-        case 'image':
-            renderImage(node, ctx, indent);
-            break;
-        case 'codeblock':
-            renderCodeBlock(node, ctx, indent);
-            break;
-        case 'input':
-        case 'textarea':
-            renderInput(node, ctx, indent);
-            break;
-        case 'slider':
-            renderSlider(node, ctx, indent);
-            break;
-        case 'toggle':
-            renderToggle(node, ctx, indent);
-            break;
-        case 'grid':
-            renderGrid(node, ctx, indent);
-            break;
-        case 'conditional':
-            renderConditional(node, ctx, indent);
-            break;
-        case 'component':
-            renderComponent(node, ctx, indent);
-            break;
-        case 'icon':
-            ctx.componentImports.add('Icon');
-            ctx.lines.push(`${indent}<Icon name="${p.name}" size="sm"${twClasses(node, ctx)} />`);
-            break;
-        case 'svg':
-            renderSvg(node, ctx, indent);
-            break;
-        case 'form':
-            ctx.lines.push(`${indent}<form${twClasses(node, ctx)}>`);
-            renderChildren(node, ctx, indent);
-            ctx.lines.push(`${indent}</form>`);
-            break;
-        case 'list':
-            ctx.lines.push(`${indent}<div${twClasses(node, ctx, 'space-y-2')}>`);
-            renderChildren(node, ctx, indent);
-            ctx.lines.push(`${indent}</div>`);
-            break;
-        case 'item':
-            ctx.lines.push(`${indent}<div${twClasses(node, ctx)}>`);
-            renderChildren(node, ctx, indent);
-            ctx.lines.push(`${indent}</div>`);
-            break;
-        case 'progress':
-            renderProgress(node, ctx, indent);
-            break;
-        case 'tabs':
-            ctx.lines.push(`${indent}<nav${twClasses(node, ctx, 'flex')}>`);
-            renderChildren(node, ctx, indent);
-            ctx.lines.push(`${indent}</nav>`);
-            break;
-        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;
-        case 'notFound':
-            renderNotFound(node, ctx, indent);
-            break;
-        case 'redirect':
-            renderRedirect(node, ctx, indent);
-            break;
-        case 'import':
-            renderImport(node, ctx);
-            break;
-        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)}>`);
-            renderChildren(node, ctx, indent);
-            ctx.lines.push(`${indent}</div>`);
-    }
-}
-function renderChildren(node, ctx, indent) {
-    if (node.children)
-        for (const child of node.children)
-            renderNode(child, ctx, indent + '  ');
-}
-function renderPage(node, ctx, indent) {
-    const p = getProps(node);
-    if (p.client === 'true' || p.client === true)
-        ctx.isClient = true;
-    if (p.async === 'true' || p.async === true)
-        ctx.isAsync = true;
-    ctx.lines.push(`${indent}<div${twClasses(node, ctx)}>`);
-    renderChildren(node, ctx, indent);
-    ctx.lines.push(`${indent}</div>`);
-}
-function renderLayout(node, ctx, indent) {
-    const p = getProps(node);
-    ctx.lines.push(`${indent}<html lang="${p.lang || 'en'}">`);
-    ctx.lines.push(`${indent}  <body${twClasses(node, ctx)}>`);
-    ctx.lines.push(`${indent}    {children}`);
-    renderChildren(node, ctx, indent + '  ');
-    ctx.lines.push(`${indent}  </body>`);
-    ctx.lines.push(`${indent}</html>`);
-}
-function renderLoading(node, ctx, indent) {
-    ctx.lines.push(`${indent}<div${twClasses(node, ctx, 'animate-pulse')}>`);
-    renderChildren(node, ctx, indent);
-    ctx.lines.push(`${indent}</div>`);
-}
-function renderError(node, ctx, indent) {
-    ctx.isClient = true;
-    ctx.lines.push(`${indent}<div${twClasses(node, ctx)}>`);
-    ctx.lines.push(`${indent}  <h2>Something went wrong!</h2>`);
-    ctx.lines.push(`${indent}  <button onClick={() => reset()}>Try again</button>`);
-    renderChildren(node, ctx, indent);
-    ctx.lines.push(`${indent}</div>`);
-}
-function renderMetadata(node, ctx) {
-    const p = getProps(node);
-    ctx.metadata = {};
-    if (p.title)
-        ctx.metadata.title = p.title;
-    if (p.description)
-        ctx.metadata.description = p.description;
-    if (p.keywords)
-        ctx.metadata.keywords = p.keywords;
-    if (p.ogImage)
-        ctx.metadata.ogImage = p.ogImage;
-}
-function renderSection(node, ctx, indent) {
-    const p = getProps(node);
-    const title = p.title || '';
-    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;
-    delete styles.border;
-    // Use a shallow-copied styles object to avoid mutating the live IR node
-    if (node.props) {
-        const origStyles = node.props.styles;
-        node.props.styles = styles;
-        const extra = border ? `border ${colorToTw('border', border, ctx.colors)}` : '';
-        ctx.lines.push(`${indent}<div${twClasses(node, ctx, extra)}>`);
-        renderChildren(node, ctx, indent);
-        ctx.lines.push(`${indent}</div>`);
-        node.props.styles = origStyles;
-    }
-    else {
-        const extra = border ? `border ${colorToTw('border', border, ctx.colors)}` : '';
-        ctx.lines.push(`${indent}<div${twClasses(node, ctx, extra)}>`);
-        renderChildren(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 rawValue = p.value;
-    const bind = p.bind;
-    const el = TEXT_TAG_MAP[p.tag] || 'span';
-    const tw = twClasses(node, ctx);
-    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 (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 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');
-    ctx.lines.push(`${indent}<Link href="${p.to || '/'}"${twClasses(node, ctx)}>`);
-    renderChildren(node, ctx, indent);
-    ctx.lines.push(`${indent}</Link>`);
-}
-function renderImage(node, ctx, indent) {
-    const p = getProps(node);
-    addDefaultImport(ctx, 'next/image', 'Image');
-    const tw = twClasses(node, ctx);
-    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);
-    const cols = parseInt(String(p.cols || 1), 10) || 1;
-    const gap = parseInt(String(p.gap || 16), 10) || 16;
-    ctx.lines.push(`${indent}<div className="grid grid-cols-1 md:grid-cols-${cols} gap-${Math.round(gap / 4)}">`);
-    renderChildren(node, ctx, indent);
-    ctx.lines.push(`${indent}</div>`);
-}
-const SVG_ICONS = {
-    home: '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>',
-    plus: '<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/>',
-    chart: '<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>',
-    search: '<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>',
-    settings: '<circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>',
-    heart: '<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>',
-    profile: '<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>',
-    check: '<polyline points="20 6 9 17 4 12"/>',
-    x: '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>',
-    arrow: '<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>',
-};
-/** Convert raw HTML-style SVG attributes to JSX-safe syntax. */
-function htmlAttrsToJsx(html) {
-    // Convert unquoted numeric attrs: width=52 → width={52}
-    // Convert unquoted string attrs: fill=#E63946 → fill="#E63946"
-    return html.replace(/(\w+)=([^\s"'{/>]+)/g, (_match, key, val) => {
-        if (/^[\d.]+$/.test(val))
-            return `${key}={${val}}`;
-        return `${key}="${val}"`;
-    });
-}
-function renderSvg(node, ctx, indent) {
-    const p = getProps(node);
-    const icon = p.icon;
-    const size = parseInt(String(p.size || 24), 10) || 24;
-    if (icon) {
-        const inner = SVG_ICONS[icon] || `<circle cx="12" cy="12" r="4"/>`;
-        ctx.lines.push(`${indent}<svg xmlns="http://www.w3.org/2000/svg" width={${size}} height={${size}} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round"${twClasses(node, ctx)}>${inner}</svg>`);
-    }
-    else {
-        // Custom SVG — only emit attributes the user explicitly set (no Feather defaults)
-        const viewBox = p.viewBox || '0 0 24 24';
-        const width = parseInt(String(p.width || size), 10) || size;
-        const height = parseInt(String(p.height || size), 10) || size;
-        const content = htmlAttrsToJsx(p.content || '');
-        const optAttrs = [];
-        if (p.fill)
-            optAttrs.push(`fill="${p.fill}"`);
-        if (p.stroke)
-            optAttrs.push(`stroke="${p.stroke}"`);
-        const extra = optAttrs.length ? ' ' + optAttrs.join(' ') : '';
-        ctx.lines.push(`${indent}<svg xmlns="http://www.w3.org/2000/svg" width={${width}} height={${height}} viewBox="${viewBox}"${extra}${twClasses(node, ctx)}>${content}</svg>`);
-    }
-}
-function renderConditional(node, ctx, indent) {
-    const cond = (getProps(node).if || 'true').replace(/&/g, ' && ').replace(/([a-zA-Z_]+)=([a-zA-Z_]+)/g, "$1 === '$2'");
-    ctx.lines.push(`${indent}{${cond} && (`);
-    ctx.lines.push(`${indent}  <>`);
-    renderChildren(node, ctx, indent + '  ');
-    ctx.lines.push(`${indent}  </>`);
-    ctx.lines.push(`${indent})}`);
-}
-function renderComponent(node, ctx, indent) {
-    const p = getProps(node);
-    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', 'name', 'styles', 'pseudoStyles', 'themeRefs'].includes(k))
-            continue;
-        if (k === 'bind') {
-            attrs.push(`value={${v}}`);
-            if (!hasOnChange)
-                attrs.push(`onChange={set${v.charAt(0).toUpperCase() + v.slice(1)}}`);
-        }
-        else if (k === 'onChange')
-            attrs.push(`onChange={${v}}`);
-        else if (k === 'props') {
-            for (const pn of v.split(','))
-                attrs.push(`${pn.trim()}={${pn.trim()}}`);
-        }
-        else if (k === 'disabled')
-            attrs.push(`disabled={${v.replace(/&/g, ' && ').replace(/([a-zA-Z_]+)=([a-zA-Z_]+)/g, "$1 === '$2'")}}`);
-        else if (k === 'default')
-            attrs.push(`defaultValue={${JSON.stringify(v)}}`);
-        else
-            attrs.push(`${k}={${JSON.stringify(v)}}`);
-    }
-    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);
-    const current = Number(p.current || 0), target = Number(p.target || 100);
-    const pct = Math.round((current / target) * 100);
-    ctx.lines.push(`${indent}<div className="mb-3">`);
-    ctx.lines.push(`${indent}  <div className="flex justify-between text-sm mb-1"><span>${escapeJsxText(String(p.label || ''))}</span><span>${current}/${target} ${escapeJsxText(String(p.unit || ''))}</span></div>`);
-    ctx.lines.push(`${indent}  <div className="h-2 bg-zinc-700 rounded-full overflow-hidden"><div className="h-full rounded-full bg-[${p.color || '#007AFF'}]" style={{ width: '${pct}%' }} /></div>`);
-    ctx.lines.push(`${indent}</div>`);
-}
-// ── Next.js 15 production pattern renderers ─────────────────────────────
-function renderGenerateMetadata(node, ctx) {
-    // Collect handler code from children
-    let handlerCode = '';
-    if (node.children) {
-        for (const child of node.children) {
-            const cp = getProps(child);
-            if (child.type === 'handler' && cp.code) {
-                handlerCode = cp.code;
-            }
-        }
-    }
-    // Also check inline code prop
-    const p = getProps(node);
-    if (p.code)
-        handlerCode = p.code;
-    ctx.generateMetadataInfo = { handlerCode };
-}
-function renderNotFound(node, ctx, _indent) {
-    addNamedImport(ctx, 'next/navigation', 'notFound');
-    const p = getProps(node);
-    const condition = p.if;
-    if (condition) {
-        ctx.bodyLines.push(`  if (${exprCode(condition, 'true')}) { notFound(); }`);
-    }
-    else {
-        ctx.bodyLines.push(`  notFound();`);
-    }
-}
-function renderRedirect(node, ctx, _indent) {
-    addNamedImport(ctx, 'next/navigation', 'redirect');
-    const p = getProps(node);
-    const to = p.to || '/';
-    ctx.bodyLines.push(`  redirect('${to}');`);
-}
-function renderImport(node, ctx) {
-    const p = getProps(node);
-    const name = p.name;
-    const from = p.from;
-    const isDefault = p.default === 'true' || p.default === true;
-    if (name && from) {
-        if (isDefault) {
-            addDefaultImport(ctx, from, name);
-        }
-        else {
-            // Support comma-separated named imports: name=Foo,Bar,Baz
-            const names = name.split(',').map(n => n.trim()).filter(Boolean);
-            for (const n of names) {
-                addNamedImport(ctx, from, n);
-            }
-        }
-    }
-}
-function renderFetchNode(node, ctx) {
-    const p = getProps(node);
-    const name = p.name || 'data';
-    const url = p.url || '/api/data';
-    const options = p.options;
-    ctx.fetchCalls.push({ name, url, options });
-}
+import { renderAndAssemble } from './nextjs-assembler.js';
+import { routeToPath } from './nextjs-style.js';
+import { planStructure } from './structure.js';
 // ── Main export ─────────────────────────────────────────────────────────
 export function transpileNextjs(root, config) {
     // Structured output path
@@ -783,212 +12,14 @@ export function transpileNextjs(root, config) {
             return _transpileNextjsStructured(root, config, plan);
         }
     }
-    // Flat output path (default — unchanged)
+    // Flat output path (default)
     return _transpileNextjsInner(root, config);
 }
+// ── Flat output ─────────────────────────────────────────────────────────
 function _transpileNextjsInner(root, config) {
-    const ctx = {
-        lines: [],
-        sourceMap: [],
-        imports: new Map(),
-        componentImports: new Set(),
-        isClient: false,
-        isAsync: false,
-        metadata: null,
-        generateMetadataInfo: null,
-        fetchCalls: [],
-        bodyLines: [],
-        stateDecls: [],
-        logicBlocks: [],
-        colors: config?.colors,
-        twProfile: config?.frameworkVersions ? buildTailwindProfile(config.frameworkVersions) : undefined,
-        njProfile: config?.frameworkVersions ? buildNextjsProfile(config.frameworkVersions) : undefined,
-    };
-    // Check root for client flag
     const rootProps = getProps(root);
-    if (rootProps.client === 'true' || rootProps.client === true)
-        ctx.isClient = true;
-    if (rootProps.async === 'true' || rootProps.async === true)
-        ctx.isAsync = true;
-    // renderNode already handles metadata nodes in the switch case
-    renderNode(root, ctx, '    ');
-    // 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';
-    const isError = root.type === 'error';
-    const code = [];
-    // 'use client' directive
-    if (ctx.isClient) {
-        code.push(`'use client';`);
-        code.push('');
-    }
-    // Metadata type import for generateMetadata
-    if (ctx.generateMetadataInfo && !ctx.isClient) {
-        addNamedImport(ctx, 'next', 'Metadata', true);
-    }
-    // Component imports → add to unified import map (skip if already imported explicitly)
-    const uiLib = config?.components?.uiLibrary ?? '@/components/ui';
-    const compRoot = config?.components?.componentRoot ?? '@/components';
-    if (ctx.componentImports.size > 0) {
-        // Collect names already imported via explicit import nodes
-        const alreadyImported = new Set();
-        for (const spec of ctx.imports.values()) {
-            if (spec.defaultImport)
-                alreadyImported.add(spec.defaultImport);
-            for (const n of spec.namedImports)
-                alreadyImported.add(n);
-        }
-        const uiImports = [...ctx.componentImports].filter(c => ['Icon', 'Button'].includes(c) && !alreadyImported.has(c));
-        const others = [...ctx.componentImports].filter(c => !['Icon', 'Button'].includes(c) && !alreadyImported.has(c));
-        for (const name of uiImports)
-            addNamedImport(ctx, uiLib, name);
-        for (const name of others)
-            addDefaultImport(ctx, `${compRoot}/${name}`, name);
-    }
-    // Static metadata needs Metadata type
-    if (ctx.metadata && !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] !== '')
-        code.push('');
-    // Metadata export — static metadata
-    // Note: In Next.js, metadata must be in a server component. If the page is client-side,
-    // emit it anyway (user may split into layout.tsx or remove client=true).
-    if (ctx.metadata) {
-        const useSatisfies = ctx.njProfile?.outputRules.metadataStyle === 'satisfies';
-        code.push(useSatisfies ? `export const metadata = {` : `export const metadata: Metadata = {`);
-        for (const [k, v] of Object.entries(ctx.metadata)) {
-            code.push(`  ${k}: '${escapeJsString(v)}',`);
-        }
-        code.push(useSatisfies ? `} satisfies Metadata;` : `};`);
-        code.push('');
-    }
-    // generateMetadata export (server components only)
-    if (ctx.generateMetadataInfo && !ctx.isClient) {
-        const usePromiseParams = !ctx.njProfile || ctx.njProfile.major >= 15;
-        const paramsType = usePromiseParams
-            ? '{ params }: { params: Promise<Record<string, string>> }'
-            : '{ params }: { params: Record<string, string> }';
-        code.push('');
-        code.push(`export async function generateMetadata(${paramsType}): Promise<Metadata> {`);
-        if (ctx.generateMetadataInfo.handlerCode) {
-            // Split handler code by newlines and emit each line as-is
-            const lines = ctx.generateMetadataInfo.handlerCode.split('\n').map(s => s.trim()).filter(Boolean);
-            for (const line of lines) {
-                code.push(`  ${line}`);
-            }
-        }
-        else {
-            if (usePromiseParams) {
-                code.push(`  const resolvedParams = await params;`);
-                code.push(`  return { title: resolvedParams.slug ?? '' };`);
-            }
-            else {
-                code.push(`  return { title: params.slug ?? '' };`);
-            }
-        }
-        code.push(`}`);
-        code.push('');
-    }
-    // Component
-    if (isLayout) {
-        code.push(`export default function ${name}({ children }: { children: React.ReactNode }) {`);
-    }
-    else if (isError) {
-        code.push(`export default function ${name}({ error, reset }: { error: Error; reset: () => void }) {`);
-    }
-    else if (ctx.isAsync) {
-        const usePromiseParams = !ctx.njProfile || ctx.njProfile.major >= 15;
-        if (usePromiseParams) {
-            code.push(`export default async function ${name}(props: { params: Promise<Record<string, string>> }) {`);
-            code.push(`  const params = await props.params;`);
-        }
-        else {
-            code.push(`export default async function ${name}({ params }: { params: Record<string, string> }) {`);
-        }
-    }
-    else {
-        code.push(`export default function ${name}() {`);
-    }
-    // Emit fetch calls (inside async function body, before return)
-    for (const fc of ctx.fetchCalls) {
-        if (fc.options) {
-            code.push(`  const ${fc.name} = await fetch('${fc.url}', ${fc.options}).then(r => r.json());`);
-        }
-        else {
-            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);
-    }
-    code.push('  return (');
-    code.push(...ctx.lines);
-    code.push('  );');
-    code.push('}');
-    const output = code.join('\n');
+    const { ctx, code: output } = renderAndAssemble(root, config, name, (stateName) => root.children?.find((c) => c.type === 'state' && c.props?.name === stateName));
     const irText = serializeIR(root);
     const irTokenCount = countTokens(irText);
     const tsTokenCount = countTokens(output);
@@ -996,7 +27,10 @@ function _transpileNextjsInner(root, config) {
     // Determine output filename convention (route-aware)
     const route = rootProps.route;
     const segment = rootProps.segment;
-    const routePrefix = route ? routeToPath(route, segment) : (segment ? routeToPath('', segment) : '');
+    const routePrefix = route ? routeToPath(route, segment) : segment ? routeToPath('', segment) : '';
+    const isLayout = root.type === 'layout';
+    const isLoading = root.type === 'loading';
+    const isError = root.type === 'error';
     const files = [];
     if (isLayout)
         files.push({ path: `${routePrefix}layout.tsx`, content: output });
@@ -1011,7 +45,7 @@ function _transpileNextjsInner(root, config) {
     const CONSUMED = new Set(['state', 'logic', 'on', 'theme', 'handler']);
     for (const child of root.children || []) {
         if (CONSUMED.has(child.type))
-            accountNode(accounted, child, 'consumed', child.type + ' pre-pass', true);
+            accountNode(accounted, child, 'consumed', `${child.type} pre-pass`, true);
     }
     return {
         code: output,
@@ -1025,200 +59,13 @@ function _transpileNextjsInner(root, config) {
 }
 // ── Structured output ────────────────────────────────────────────────────
 function _renderNextjsFile(file, config) {
-    const ctx = {
-        lines: [],
-        sourceMap: [],
-        imports: new Map(),
-        componentImports: new Set(),
-        isClient: false,
-        isAsync: false,
-        metadata: null,
-        generateMetadataInfo: null,
-        fetchCalls: [],
-        bodyLines: [],
-        stateDecls: [],
-        logicBlocks: [],
-        colors: config.colors,
-        twProfile: config.frameworkVersions ? buildTailwindProfile(config.frameworkVersions) : undefined,
-        njProfile: config.frameworkVersions ? buildNextjsProfile(config.frameworkVersions) : undefined,
-    };
     const rootNode = file.rootNode;
-    const rootProps = rootNode.props || {};
-    // Check client flag
-    if (rootProps.client === 'true' || rootProps.client === true)
-        ctx.isClient = true;
-    if (rootProps.async === 'true' || rootProps.async === true)
-        ctx.isAsync = true;
-    // renderNode already handles metadata nodes in the switch case
-    renderNode(rootNode, ctx, '    ');
-    const name = file.componentName || rootProps.name || 'Component';
-    const isLayout = rootNode.type === 'layout';
-    const isError = rootNode.type === 'error';
-    // 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';`);
-        code.push('');
-    }
-    const uiLib = config.components?.uiLibrary ?? '@/components/ui';
-    const compRoot = config.components?.componentRoot ?? '@/components';
-    if (ctx.componentImports.size > 0) {
-        const alreadyImported = new Set();
-        for (const spec of ctx.imports.values()) {
-            if (spec.defaultImport)
-                alreadyImported.add(spec.defaultImport);
-            for (const n of spec.namedImports)
-                alreadyImported.add(n);
-        }
-        const uiImports = [...ctx.componentImports].filter(c => ['Icon', 'Button'].includes(c) && !alreadyImported.has(c));
-        const others = [...ctx.componentImports].filter(c => !['Icon', 'Button'].includes(c) && !alreadyImported.has(c));
-        for (const name of uiImports)
-            addNamedImport(ctx, uiLib, name);
-        for (const name of others)
-            addDefaultImport(ctx, `${compRoot}/${name}`, name);
-    }
-    // Metadata type import for generateMetadata
-    if (ctx.generateMetadataInfo && !ctx.isClient) {
-        addNamedImport(ctx, 'next', 'Metadata', true);
-    }
-    if (ctx.metadata && !ctx.generateMetadataInfo) {
-        addNamedImport(ctx, 'next', 'Metadata', true);
-    }
-    // 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('');
-    // Metadata — emit even for client components (user may split into layout.tsx)
-    if (ctx.metadata) {
-        const useSatisfies = ctx.njProfile?.outputRules.metadataStyle === 'satisfies';
-        code.push(useSatisfies ? `export const metadata = {` : `export const metadata: Metadata = {`);
-        for (const [k, v] of Object.entries(ctx.metadata)) {
-            code.push(`  ${k}: '${escapeJsString(v)}',`);
-        }
-        code.push(useSatisfies ? `} satisfies Metadata;` : `};`);
-        code.push('');
-    }
-    // generateMetadata export (server components only)
-    if (ctx.generateMetadataInfo && !ctx.isClient) {
-        const usePromiseParams = !ctx.njProfile || ctx.njProfile.major >= 15;
-        const paramsType = usePromiseParams
-            ? '{ params }: { params: Promise<Record<string, string>> }'
-            : '{ params }: { params: Record<string, string> }';
-        code.push('');
-        code.push(`export async function generateMetadata(${paramsType}): Promise<Metadata> {`);
-        if (ctx.generateMetadataInfo.handlerCode) {
-            const lines = ctx.generateMetadataInfo.handlerCode.split('\n').map(s => s.trim()).filter(Boolean);
-            for (const line of lines) {
-                code.push(`  ${line}`);
-            }
-        }
-        else {
-            if (usePromiseParams) {
-                code.push(`  const resolvedParams = await params;`);
-                code.push(`  return { title: resolvedParams.slug ?? '' };`);
-            }
-            else {
-                code.push(`  return { title: params.slug ?? '' };`);
-            }
-        }
-        code.push(`}`);
-        code.push('');
-    }
-    if (isLayout) {
-        code.push(`export default function ${name}({ children }: { children: React.ReactNode }) {`);
-    }
-    else if (isError) {
-        code.push(`export default function ${name}({ error, reset }: { error: Error; reset: () => void }) {`);
-    }
-    else if (ctx.isAsync) {
-        const usePromiseParams = !ctx.njProfile || ctx.njProfile.major >= 15;
-        if (usePromiseParams) {
-            code.push(`export default async function ${name}(props: { params: Promise<Record<string, string>> }) {`);
-            code.push(`  const params = await props.params;`);
-        }
-        else {
-            code.push(`export default async function ${name}({ params }: { params: Record<string, string> }) {`);
-        }
-    }
-    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) {
-            code.push(`  const ${fc.name} = await fetch('${fc.url}', ${fc.options}).then(r => r.json());`);
-        }
-        else {
-            code.push(`  const ${fc.name} = await fetch('${fc.url}').then(r => r.json());`);
-        }
-    }
-    // Emit body lines (notFound, redirect calls)
-    for (const line of ctx.bodyLines) {
-        code.push(line);
-    }
-    code.push('  return (');
-    code.push(...ctx.lines);
-    code.push('  );');
-    code.push('}');
-    return code.join('\n');
+    const name = file.componentName || rootNode.props?.name || 'Component';
+    const { code } = renderAndAssemble(rootNode, config, name, (stateName) => {
+        const firstNode = file.nodes[0];
+        return firstNode?.children?.find((c) => c.type === 'state' && c.props?.name === stateName);
+    });
+    return code;
 }
 function _transpileNextjsStructured(root, config, plan) {
     const { entryCode, artifacts } = buildStructuredArtifacts(plan, (file, cfg) => _renderNextjsFile(file, cfg), root, config);
@@ -1228,8 +75,8 @@ function _transpileNextjsStructured(root, config, plan) {
     const tokenReduction = tsTokenCount > 0 ? Math.round((1 - irTokenCount / tsTokenCount) * 100) : 0;
     // Convert artifacts to NextFile[] for files property
     const files = artifacts
-        .filter(a => a.path.endsWith('.tsx'))
-        .map(a => ({ path: a.path, content: a.content }));
+        .filter((a) => a.path.endsWith('.tsx'))
+        .map((a) => ({ path: a.path, content: a.content }));
     return {
         code: entryCode,
         sourceMap: [],