@kernlang/react 2.0.0

package/dist/transpiler-nextjs.js

@@ -0,0 +1,748 @@
+import { stylesToTailwind, colorToTw, countTokens, serializeIR, camelKey, escapeJsxText, 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 getStyles(node) { return getProps(node).styles || {}; }
+// ── 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 = '') {
+    let tw = stylesToTailwind(getStyles(node), ctx.colors);
+    if (ctx.twProfile)
+        tw = applyTailwindTokenRules(tw, ctx.twProfile);
+    const parts = [tw, extra].filter(Boolean);
+    return parts.length > 0 ? ` className="${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 'input':
+            ctx.lines.push(`${indent}<input${twClasses(node, ctx)} />`);
+            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 '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 '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 '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 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>`);
+    renderChildren(node, ctx, indent);
+    ctx.lines.push(`${indent}</section>`);
+}
+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>`);
+    }
+}
+function renderText(node, ctx, indent) {
+    const p = getProps(node);
+    const value = 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 tw = twClasses(node, ctx);
+    if (bind)
+        ctx.lines.push(`${indent}<${el}${tw}>{${bind}}</${el}>`);
+    else if (value)
+        ctx.lines.push(`${indent}<${el}${tw}>${escapeJsxText(value)}</${el}>`);
+}
+function renderButton(node, ctx, indent) {
+    const p = getProps(node);
+    const text = p.text || '';
+    const to = p.to;
+    const onClick = p.onClick;
+    if (to) {
+        addDefaultImport(ctx, 'next/link', 'Link');
+        ctx.lines.push(`${indent}<Link href="/${to.toLowerCase()}"${twClasses(node, ctx)}>${escapeJsxText(text)}</Link>`);
+    }
+    else {
+        ctx.lines.push(`${indent}<button${twClasses(node, ctx)} onClick={${onClick || '() => {}'}}>${escapeJsxText(text)}</button>`);
+    }
+}
+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 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} />`);
+}
+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.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.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 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)}">`);
+    renderChildren(node, ctx, indent);
+    ctx.lines.push(`${indent}</div>`);
+}
+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;
+    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))
+            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)}}`);
+    }
+    ctx.lines.push(`${indent}<${ref}${attrs.length ? ' ' + attrs.join(' ') : ''} />`);
+}
+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 {
+            addNamedImport(ctx, from, name);
+        }
+    }
+}
+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 });
+}
+// ── Main export ─────────────────────────────────────────────────────────
+export function transpileNextjs(root, config) {
+    // Structured output path
+    if (config && config.structure !== 'flat') {
+        const plan = planStructure(root, config);
+        if (plan) {
+            return _transpileNextjsStructured(root, config, plan);
+        }
+    }
+    // Flat output path (default — unchanged)
+    return _transpileNextjsInner(root, config);
+}
+function _transpileNextjsInner(root, config) {
+    const ctx = {
+        lines: [],
+        sourceMap: [],
+        imports: new Map(),
+        componentImports: new Set(),
+        isClient: false,
+        isAsync: false,
+        metadata: null,
+        generateMetadataInfo: null,
+        fetchCalls: [],
+        bodyLines: [],
+        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;
+    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
+    const uiLib = config?.components?.uiLibrary ?? '@/components/ui';
+    const compRoot = config?.components?.componentRoot ?? '@/components';
+    if (ctx.componentImports.size > 0) {
+        const uiImports = [...ctx.componentImports].filter(c => ['Icon', 'Button'].includes(c));
+        const others = [...ctx.componentImports].filter(c => !['Icon', 'Button'].includes(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.isClient && !ctx.generateMetadataInfo) {
+        addNamedImport(ctx, 'next', 'Metadata', true);
+    }
+    // Emit all imports (unified, sorted)
+    code.push(...emitImports(ctx));
+    if (code.length > 0 && code[code.length - 1] !== '')
+        code.push('');
+    // Metadata export (server components only) -- static metadata
+    if (ctx.metadata && !ctx.isClient) {
+        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 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 irText = serializeIR(root);
+    const irTokenCount = countTokens(irText);
+    const tsTokenCount = countTokens(output);
+    const tokenReduction = tsTokenCount > 0 ? Math.round((1 - irTokenCount / tsTokenCount) * 100) : 0;
+    // Determine output filename convention
+    const files = [];
+    if (isLayout)
+        files.push({ path: 'layout.tsx', content: output });
+    else if (isLoading)
+        files.push({ path: 'loading.tsx', content: output });
+    else if (isError)
+        files.push({ path: 'error.tsx', content: output });
+    else
+        files.push({ path: 'page.tsx', content: output });
+    return {
+        code: output,
+        sourceMap: ctx.sourceMap,
+        irTokenCount,
+        tsTokenCount,
+        tokenReduction,
+        files,
+    };
+}
+// ── 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: [],
+        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';
+    // 'use client' only when the component actually has client-side interactivity
+    // (ctx.isClient is set during rendering by renderPage/renderError/client=true flag)
+    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 uiImports = [...ctx.componentImports].filter(c => ['Icon', 'Button'].includes(c));
+        const others = [...ctx.componentImports].filter(c => !['Icon', 'Button'].includes(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.isClient && !ctx.generateMetadataInfo) {
+        addNamedImport(ctx, 'next', 'Metadata', true);
+    }
+    // If there are fetch calls, mark page as async
+    if (ctx.fetchCalls.length > 0)
+        ctx.isAsync = true;
+    code.push(...emitImports(ctx));
+    if (code.length > 0 && code[code.length - 1] !== '')
+        code.push('');
+    // Metadata (server components only)
+    if (ctx.metadata && !ctx.isClient) {
+        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 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');
+}
+function _transpileNextjsStructured(root, config, plan) {
+    const { entryCode, artifacts } = buildStructuredArtifacts(plan, (file, cfg) => _renderNextjsFile(file, cfg), root, config);
+    const irText = serializeIR(root);
+    const irTokenCount = countTokens(irText);
+    const tsTokenCount = countTokens(entryCode);
+    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 }));
+    return {
+        code: entryCode,
+        sourceMap: [],
+        irTokenCount,
+        tsTokenCount,
+        tokenReduction,
+        files,
+        artifacts,
+    };
+}
+//# sourceMappingURL=transpiler-nextjs.js.map