0x-lang 0.1.0

package/dist/generators/vue.js

@@ -0,0 +1,660 @@
+// 0x → Vue 3 (Composition API) Code Generator
+import { SIZE_MAP, unquote, capitalize } from './shared.js';
+import { generateBackendCode } from './react.js';
+function newCtx() {
+    return { imports: new Set(), states: new Map(), styles: new Map() };
+}
+export function generateVue(ast) {
+    const parts = [];
+    for (const node of ast) {
+        if (node.type === 'Page' || node.type === 'Component' || node.type === 'App') {
+            parts.push(generateVueComponent(node));
+        }
+        else {
+            const backend = generateBackendCode(node);
+            if (backend)
+                parts.push(backend);
+        }
+    }
+    const code = parts.join('\n\n');
+    return {
+        code,
+        filename: 'Component.vue',
+        imports: [],
+        lineCount: code.split('\n').length,
+        tokenCount: code.split(/\s+/).length,
+    };
+}
+function generateVueComponent(node) {
+    const c = newCtx();
+    for (const child of node.body) {
+        if (child.type === 'StateDecl')
+            c.states.set(child.name, child);
+        if (child.type === 'StyleDecl')
+            c.styles.set(child.name, child);
+    }
+    // Generate script section
+    const scriptLines = [];
+    const templateParts = [];
+    for (const child of node.body) {
+        switch (child.type) {
+            case 'StateDecl':
+                scriptLines.push(genState(child, c));
+                break;
+            case 'DerivedDecl':
+                scriptLines.push(genDerived(child, c));
+                break;
+            case 'PropDecl':
+                scriptLines.push(genProp(child, c));
+                break;
+            case 'FnDecl':
+                scriptLines.push(genFunction(child, c));
+                break;
+            case 'OnMount':
+                scriptLines.push(genOnMount(child, c));
+                break;
+            case 'OnDestroy':
+                scriptLines.push(genOnDestroy(child, c));
+                break;
+            case 'WatchBlock':
+                scriptLines.push(genWatch(child, c));
+                break;
+            case 'CheckDecl':
+                scriptLines.push(genCheck(child, c));
+                break;
+            case 'ApiDecl':
+                scriptLines.push(genApi(child, c));
+                break;
+            case 'TypeDecl':
+            case 'StyleDecl':
+            case 'Comment':
+            case 'Model':
+            case 'DataDecl':
+            case 'FormDecl':
+            case 'AuthDecl':
+            case 'RealtimeDecl':
+            case 'RouteDecl': break;
+            default:
+                templateParts.push(genUINode(child, c));
+                break;
+        }
+    }
+    const importItems = Array.from(c.imports).sort();
+    const importLine = importItems.length > 0
+        ? `import { ${importItems.join(', ')} } from 'vue';`
+        : '';
+    return [
+        '// Generated by 0x',
+        '<script setup>',
+        importLine,
+        '',
+        ...scriptLines,
+        '</script>',
+        '',
+        '<template>',
+        ...templateParts.map(t => `  ${t}`),
+        '</template>',
+    ].filter(l => l !== undefined).join('\n');
+}
+// ── State ───────────────────────────────────────────
+function genState(node, c) {
+    c.imports.add('ref');
+    return `const ${node.name} = ref(${genExpr(node.initial, c)});`;
+}
+function genDerived(node, c) {
+    c.imports.add('computed');
+    return `const ${node.name} = computed(() => ${genExpr(node.expression, c, true)});`;
+}
+function genProp(node, c) {
+    const defaultStr = node.defaultValue ? `, default: ${genExpr(node.defaultValue, c)}` : '';
+    return `const props = defineProps({ ${node.name}: { type: ${mapType(node.valueType)}${defaultStr} } });`;
+}
+function genFunction(node, c) {
+    const params = node.params.map(p => p.name).join(', ');
+    const asyncKw = node.isAsync ? 'async ' : '';
+    const body = node.body.map(s => genStmt(s, c)).join('\n  ');
+    return `${asyncKw}function ${node.name}(${params}) {\n  ${body}\n}`;
+}
+function genOnMount(node, c) {
+    c.imports.add('onMounted');
+    const body = node.body.map(s => genStmt(s, c)).join('\n  ');
+    return `onMounted(() => {\n  ${body}\n});`;
+}
+function genOnDestroy(node, c) {
+    c.imports.add('onUnmounted');
+    const body = node.body.map(s => genStmt(s, c)).join('\n  ');
+    return `onUnmounted(() => {\n  ${body}\n});`;
+}
+function genWatch(node, c) {
+    c.imports.add('watch');
+    const body = node.body.map(s => genStmt(s, c)).join('\n  ');
+    return `watch(${node.variable}, () => {\n  ${body}\n});`;
+}
+function genCheck(node, c) {
+    return `if (!(${genExpr(node.condition, c, true)})) console.error('${node.message}');`;
+}
+function genApi(node, c) {
+    return `async function ${node.name}(params) {\n  const res = await fetch('${node.url}', { method: '${node.method}' });\n  return res.json();\n}`;
+}
+// ── UI Nodes ────────────────────────────────────────
+function genUINode(node, c) {
+    switch (node.type) {
+        case 'Layout': return genLayout(node, c);
+        case 'Text': return genText(node, c);
+        case 'Button': return genButton(node, c);
+        case 'Input': return genInput(node, c);
+        case 'Image': return genImage(node, c);
+        case 'Link': return genLink(node, c);
+        case 'Toggle': return genToggle(node, c);
+        case 'Select': return genSelect(node, c);
+        case 'IfBlock': return genIf(node, c);
+        case 'ForBlock': return genFor(node, c);
+        case 'ShowBlock': return genShow(node, c);
+        case 'HideBlock': return genHide(node, c);
+        case 'ComponentCall': return genComponentCall(node, c);
+        case 'Table': return genTableUI(node, c);
+        case 'Chart': return genChartUI(node, c);
+        case 'Stat': return genStatUI(node, c);
+        case 'Nav': return genNavUI(node, c);
+        case 'Upload': return genUploadUI(node, c);
+        case 'Modal': return genModalUI(node, c);
+        case 'Toast': return genToastUI(node, c);
+        case 'Hero': return genHeroUI(node, c);
+        case 'Crud': return genCrudUI(node, c);
+        case 'List': return genListUI(node, c);
+        case 'Drawer': return genDrawerUI(node, c);
+        case 'Command': return genCommandUI(node, c);
+        case 'Confirm': return genConfirmUI(node, c);
+        case 'Pay': return genPayUI(node, c);
+        case 'Cart': return genCartUI(node, c);
+        case 'Media': return genMediaUI(node, c);
+        case 'Notification': return genNotificationUI(node, c);
+        case 'Search': return genSearchUI(node, c);
+        case 'Filter': return genFilterUI(node, c);
+        case 'Social': return genSocialUI(node, c);
+        case 'Profile': return genProfileUI(node, c);
+        case 'Features': return genFeaturesUI(node, c);
+        case 'Pricing': return genPricingUI(node, c);
+        case 'Faq': return genFaqUI(node, c);
+        case 'Testimonial': return genTestimonialUI(node, c);
+        case 'Footer': return genFooterUI(node, c);
+        case 'Admin': return genAdminUI(node, c);
+        case 'Seo': return `<!-- SEO configured -->`;
+        case 'A11y': return `<!-- a11y configured -->`;
+        case 'Animate': return genAnimateUI(node, c);
+        case 'Gesture': return `<!-- gesture: ${node.gestureType} -->`;
+        case 'Ai': return genAiUI(node, c);
+        case 'Emit': return `<!-- emit: ${genExpr(node.channel, c)} -->`;
+        case 'Responsive': return genResponsiveUI(node, c);
+        case 'Breadcrumb': return genBreadcrumbUI(node, c);
+        case 'StatsGrid': return genStatsGridUI(node, c);
+        case 'LayoutShell': return `<div class="layout-shell">${node.body.map(ch => genUINode(ch, c)).join('\n')}</div>`;
+        case 'SlideOver': return genDrawerUI(node, c);
+        case 'Automation': return `<!-- automation configured -->`;
+        case 'Dev': return `<!-- dev tools configured -->`;
+        case 'Error': return genErrorUI(node, c);
+        case 'Loading': return genLoadingUI(node, c);
+        case 'Offline': return genOfflineUI(node, c);
+        case 'Retry': return `<!-- retry: max=${genExpr(node.maxRetries, c)} -->`;
+        case 'Log': return `<!-- log: ${genExpr(node.message, c)} -->`;
+        case 'Comment': return `<!-- ${node.text} -->`;
+        default: return `<!-- unsupported: ${node.type} -->`;
+    }
+}
+function genLayout(node, c) {
+    const style = [];
+    if (node.direction === 'grid') {
+        style.push('display: grid');
+        if (node.props['cols'])
+            style.push(`grid-template-columns: repeat(${genExpr(node.props['cols'], c)}, 1fr)`);
+    }
+    else if (node.direction === 'stack') {
+        style.push('position: relative');
+    }
+    else {
+        style.push('display: flex');
+        style.push(`flex-direction: ${node.direction === 'row' ? 'row' : 'column'}`);
+    }
+    for (const [key, val] of Object.entries(node.props)) {
+        const v = genExpr(val, c);
+        switch (key) {
+            case 'gap':
+                style.push(`gap: ${v}px`);
+                break;
+            case 'padding':
+                style.push(`padding: ${v}px`);
+                break;
+            case 'center':
+                style.push('align-items: center');
+                break;
+            case 'between':
+                style.push('justify-content: space-between');
+                break;
+            case 'bg':
+                style.push(`background-color: ${v}`);
+                break;
+        }
+    }
+    const styleStr = style.join('; ');
+    const children = node.children.map(ch => genUINode(ch, c)).join('\n  ');
+    return `<div style="${styleStr}">\n  ${children}\n</div>`;
+}
+function genText(node, c) {
+    const style = genTextStyle(node, c);
+    const styleAttr = style ? ` style="${style}"` : '';
+    const content = genTextContent(node.content, c);
+    return `<span${styleAttr}>${content}</span>`;
+}
+function genButton(node, c) {
+    const label = genTextContent(node.label, c);
+    const action = genActionExpr(node.action, c);
+    return `<button @click="${action}">${label}</button>`;
+}
+function genInput(node, c) {
+    const props = [`v-model="${node.binding}"`];
+    for (const [key, val] of Object.entries(node.props)) {
+        const v = genExpr(val, c);
+        if (key === 'placeholder')
+            props.push(`placeholder="${unquote(v)}"`);
+        if (key === 'type')
+            props.push(`type="${unquote(v)}"`);
+    }
+    return `<input ${props.join(' ')} />`;
+}
+function genImage(node, c) {
+    const src = genExpr(node.src, c);
+    return `<img :src="${src}" />`;
+}
+function genLink(node, c) {
+    const label = genTextContent(node.label, c);
+    const href = genExpr(node.href, c);
+    return `<a :href="${href}">${label}</a>`;
+}
+function genToggle(node, c) {
+    return `<input type="checkbox" v-model="${node.binding}" />`;
+}
+function genSelect(node, c) {
+    const options = genExpr(node.options, c);
+    return `<select v-model="${node.binding}">\n  <option v-for="opt in ${options}" :key="opt" :value="opt">{{ opt }}</option>\n</select>`;
+}
+function genComponentCall(node, c) {
+    const props = Object.entries(node.args)
+        .filter(([k]) => !k.startsWith('_arg'))
+        .map(([k, v]) => `:${k}="${genExpr(v, c)}"`);
+    return `<${node.name} ${props.join(' ')} />`;
+}
+function genIf(node, c) {
+    const cond = genExpr(node.condition, c);
+    const body = node.body.map(ch => genUINode(ch, c)).join('\n  ');
+    let result = `<div v-if="${cond}">\n  ${body}\n</div>`;
+    for (const elif of node.elifs) {
+        const ec = genExpr(elif.condition, c);
+        const eb = elif.body.map(ch => genUINode(ch, c)).join('\n  ');
+        result += `\n<div v-else-if="${ec}">\n  ${eb}\n</div>`;
+    }
+    if (node.elseBody) {
+        const eb = node.elseBody.map(ch => genUINode(ch, c)).join('\n  ');
+        result += `\n<div v-else>\n  ${eb}\n</div>`;
+    }
+    return result;
+}
+function genFor(node, c) {
+    const iter = genExpr(node.iterable, c);
+    const body = node.body.map(ch => genUINode(ch, c)).join('\n  ');
+    const binding = node.index ? `(${node.item}, ${node.index})` : node.item;
+    return `<div v-for="${binding} in ${iter}" :key="${node.item}">\n  ${body}\n</div>`;
+}
+function genShow(node, c) {
+    const cond = genExpr(node.condition, c);
+    const body = node.body.map(ch => genUINode(ch, c)).join('\n  ');
+    return `<div v-show="${cond}">\n  ${body}\n</div>`;
+}
+function genHide(node, c) {
+    const cond = genExpr(node.condition, c);
+    const body = node.body.map(ch => genUINode(ch, c)).join('\n  ');
+    return `<div v-show="!${cond}">\n  ${body}\n</div>`;
+}
+// ── Advanced UI Components ──────────────────────────
+function genTableUI(node, c) {
+    const data = node.dataSource;
+    const lines = [];
+    lines.push(`<table style="width: 100%; border-collapse: collapse">`);
+    lines.push(`<thead><tr>`);
+    for (const col of node.columns) {
+        if (col.kind === 'select') {
+            lines.push(`<th style="padding: 12px 8px; border-bottom: 2px solid #e2e8f0"><input type="checkbox" /></th>`);
+        }
+        else if (col.kind === 'field') {
+            lines.push(`<th style="padding: 12px 8px; border-bottom: 2px solid #e2e8f0; text-align: left; font-weight: 600">${col.label || col.field}</th>`);
+        }
+        else if (col.kind === 'actions') {
+            lines.push(`<th style="padding: 12px 8px; border-bottom: 2px solid #e2e8f0; text-align: right; font-weight: 600">Actions</th>`);
+        }
+    }
+    lines.push(`</tr></thead>`);
+    lines.push(`<tbody>`);
+    lines.push(`<tr v-for="(row, idx) in ${data}" :key="idx" style="border-bottom: 1px solid #e2e8f0">`);
+    for (const col of node.columns) {
+        if (col.kind === 'select') {
+            lines.push(`<td style="padding: 12px 8px"><input type="checkbox" /></td>`);
+        }
+        else if (col.kind === 'field') {
+            let content = `{{ row.${col.field} }}`;
+            if (col.format === 'date')
+                content = `{{ new Date(row.${col.field}).toLocaleDateString() }}`;
+            lines.push(`<td style="padding: 12px 8px">${content}</td>`);
+        }
+        else if (col.kind === 'actions') {
+            lines.push(`<td style="padding: 12px 8px; text-align: right">`);
+            for (const action of (col.actions || [])) {
+                if (action === 'edit')
+                    lines.push(`<button @click="onEdit(row)" style="margin-right: 4px; padding: 4px 8px; font-size: 13px; cursor: pointer">Edit</button>`);
+                if (action === 'delete')
+                    lines.push(`<button @click="onDelete(row)" style="padding: 4px 8px; font-size: 13px; cursor: pointer; color: #e53e3e">Delete</button>`);
+            }
+            lines.push(`</td>`);
+        }
+    }
+    lines.push(`</tr>`);
+    lines.push(`</tbody></table>`);
+    return lines.join('\n');
+}
+function genChartUI(node, c) {
+    return `<div style="padding: 24px; border: 1px solid #e2e8f0; border-radius: 8px"><!-- Chart: ${node.chartType} --><canvas ref="${node.name}Chart"></canvas></div>`;
+}
+function genStatUI(node, c) {
+    const value = genExpr(node.value, c);
+    return `<div style="padding: 20px; border-radius: 12px; background: #f7fafc; border: 1px solid #e2e8f0"><div style="font-size: 14px; color: #718096">${node.label}</div><div style="font-size: 32px; font-weight: bold; margin-top: 4px">{{ ${value} }}</div></div>`;
+}
+function genNavUI(node, c) {
+    const lines = [];
+    lines.push(`<nav style="display: flex; gap: 16px; padding: 12px 24px; background-color: #fff; border-bottom: 1px solid #e2e8f0; align-items: center">`);
+    for (const item of node.items) {
+        const iconPart = item.icon ? `<span style="margin-right: 6px">${item.icon}</span>` : '';
+        lines.push(`<a href="${item.href}" style="text-decoration: none; color: #4a5568; font-weight: 500; padding: 8px 12px; border-radius: 6px">${iconPart}${item.label}</a>`);
+    }
+    lines.push(`</nav>`);
+    return lines.join('\n');
+}
+function genUploadUI(node, c) {
+    c.imports.add('ref');
+    const name = node.name;
+    return `<div style="border: 2px dashed #cbd5e0; border-radius: 12px; padding: 24px; text-align: center; cursor: pointer" @click="$refs.${name}Input?.click()"><input ref="${name}Input" type="file"${node.accept ? ` accept="${node.accept}"` : ''} style="display: none" /><span style="color: #a0aec0">Click to select file</span></div>`;
+}
+function genModalUI(node, c) {
+    c.imports.add('ref');
+    const showVar = `show${capitalize(node.name)}`;
+    const body = node.body.map(ch => genUINode(ch, c)).join('\n    ');
+    const lines = [];
+    if (node.trigger) {
+        lines.push(`<button @click="${showVar} = true" style="padding: 8px 16px; border-radius: 6px; border: 1px solid #e2e8f0; cursor: pointer">${node.trigger}</button>`);
+    }
+    lines.push(`<Teleport to="body">`);
+    lines.push(`<div v-if="${showVar}" style="position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000" @click="${showVar} = false">`);
+    lines.push(`  <div style="background-color: #fff; border-radius: 12px; padding: 24px; min-width: 400px; max-width: 90vw; box-shadow: 0 20px 60px rgba(0,0,0,0.15)" @click.stop>`);
+    lines.push(`    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">`);
+    lines.push(`      <h2 style="margin: 0; font-size: 20px">${node.title}</h2>`);
+    lines.push(`      <button @click="${showVar} = false" style="border: none; background: none; font-size: 20px; cursor: pointer; padding: 4px">&times;</button>`);
+    lines.push(`    </div>`);
+    lines.push(`    ${body}`);
+    lines.push(`  </div>`);
+    lines.push(`</div>`);
+    lines.push(`</Teleport>`);
+    return lines.join('\n');
+}
+function genToastUI(node, c) {
+    return `<div v-if="toast.visible" style="position: fixed; top: 16px; right: 16px; padding: 12px 20px; border-radius: 8px; background-color: #333; color: #fff; z-index: 2000; box-shadow: 0 4px 12px rgba(0,0,0,0.15)">{{ toast.message }}</div>`;
+}
+function genHeroUI(node, c) {
+    const body = node.body.map(ch => genUINode(ch, c)).join('\n  ');
+    return `<section style="text-align: center; padding: 80px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff">\n  ${body}\n</section>`;
+}
+function genCrudUI(node, c) {
+    return `<div class="crud-${node.model.toLowerCase()}"><!-- CRUD: ${node.model} --><h2>${node.model} Management</h2></div>`;
+}
+function genListUI(node, c) {
+    const data = genExpr(node.dataSource, c);
+    const body = node.body.map(ch => genUINode(ch, c)).join('\n    ');
+    return `<div style="display: flex; flex-direction: column; gap: 8px"><div v-for="item in ${data}" :key="item.id" style="padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px">\n    ${body}\n  </div></div>`;
+}
+function genDrawerUI(node, c) {
+    c.imports.add('ref');
+    const showVar = `show${capitalize(node.name)}`;
+    const body = node.body.map(ch => genUINode(ch, c)).join('\n    ');
+    return `<Teleport to="body"><div v-if="${showVar}" style="position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); z-index: 1000" @click="${showVar} = false"><div style="position: fixed; top: 0; right: 0; bottom: 0; width: 320px; background-color: #fff; padding: 24px; box-shadow: -2px 0 8px rgba(0,0,0,0.1); overflow-y: auto" @click.stop>\n    ${body}\n  </div></div></Teleport>`;
+}
+function genCommandUI(node, c) {
+    return `<div style="position: fixed; top: 20%; left: 50%; transform: translateX(-50%); width: 500px; background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); z-index: 1000; padding: 8px"><input placeholder="Type a command..." style="width: 100%; padding: 12px 16px; border: none; font-size: 16px; outline: none" /></div>`;
+}
+function genConfirmUI(node, c) {
+    const desc = node.description ? `<p style="color: #718096; margin: 8px 0 0 0">${node.description}</p>` : '';
+    const dangerStyle = node.danger ? 'background-color: #e53e3e' : 'background-color: #3182ce';
+    return `<div style="position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000"><div style="background: #fff; border-radius: 12px; padding: 24px; max-width: 400px"><p style="font-weight: 600; margin: 0">${node.message}</p>${desc}<div style="display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px"><button @click="onCancel" style="padding: 8px 16px; border-radius: 6px; border: 1px solid #e2e8f0; cursor: pointer">${node.cancelLabel}</button><button @click="onConfirm" style="padding: 8px 16px; border-radius: 6px; ${dangerStyle}; color: #fff; border: none; cursor: pointer">${node.confirmLabel}</button></div></div></div>`;
+}
+function genPayUI(node, c) {
+    return `<div style="padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px"><!-- Payment: ${node.provider} --><button style="width: 100%; padding: 12px; background: #635bff; color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer">Pay Now</button></div>`;
+}
+function genCartUI(node, c) {
+    return `<div style="padding: 16px; border: 1px solid #e2e8f0; border-radius: 12px"><!-- Cart --><h3 style="margin: 0 0 12px 0">Shopping Cart</h3><div v-for="item in cartItems" :key="item.id" style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #f0f0f0"><span>{{ item.name }}</span><span>{{ item.price }}</span></div></div>`;
+}
+function genMediaUI(node, c) {
+    return `<div style="border-radius: 12px; overflow: hidden"><!-- Media: ${node.mediaType} --></div>`;
+}
+function genNotificationUI(node, c) {
+    return `<div style="position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px"><div v-for="n in notifications" :key="n.id" style="padding: 12px 20px; border-radius: 8px; background-color: #333; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.15)">{{ n.message }}</div></div>`;
+}
+function genSearchUI(node, c) {
+    c.imports.add('ref');
+    return `<div style="position: relative"><input v-model="searchQuery" placeholder="Search..." style="width: 100%; padding: 10px 16px; border-radius: 8px; border: 1px solid #e2e8f0; font-size: 14px" /></div>`;
+}
+function genFilterUI(node, c) {
+    return `<div style="display: flex; gap: 8px; flex-wrap: wrap"><!-- Filter: ${node.target} --></div>`;
+}
+function genSocialUI(node, c) {
+    return `<div style="display: flex; gap: 12px; align-items: center"><!-- Social: ${node.socialType} --><button style="padding: 8px 16px; border-radius: 20px; border: 1px solid #e2e8f0; cursor: pointer">Like</button></div>`;
+}
+function genProfileUI(node, c) {
+    return `<div style="display: flex; gap: 16px; align-items: center; padding: 20px"><!-- Profile --><div style="width: 64px; height: 64px; border-radius: 50%; background-color: #e2e8f0"></div><div><div style="font-weight: 600">User Profile</div></div></div>`;
+}
+function genFeaturesUI(node, c) {
+    const items = node.items.map(item => `<div style="padding: 24px; border-radius: 12px; border: 1px solid #e2e8f0"><div style="font-size: 24px; margin-bottom: 12px">${item.icon}</div><h3 style="margin: 0 0 8px 0">${item.title}</h3><p style="color: #718096; margin: 0">${item.description}</p></div>`).join('\n  ');
+    return `<section style="padding: 60px 20px"><h2 style="text-align: center; margin-bottom: 40px">Features</h2><div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px">\n  ${items}\n</div></section>`;
+}
+function genPricingUI(node, c) {
+    const plans = node.plans.map(plan => {
+        const features = plan.features.map(f => `<li style="padding: 4px 0">${f}</li>`).join('');
+        const hl = plan.highlighted ? 'border: 2px solid #3182ce; transform: scale(1.05)' : 'border: 1px solid #e2e8f0';
+        return `<div style="padding: 32px; border-radius: 12px; ${hl}"><h3 style="margin: 0">${plan.name}</h3><div style="font-size: 32px; font-weight: bold; margin: 16px 0">${genExpr(plan.price, c)}</div><ul style="list-style: none; padding: 0; margin: 16px 0">${features}</ul><button style="width: 100%; padding: 10px; border-radius: 6px; background-color: #3182ce; color: #fff; border: none; cursor: pointer">${plan.cta}</button></div>`;
+    }).join('\n  ');
+    return `<section style="padding: 60px 20px"><h2 style="text-align: center; margin-bottom: 40px">Pricing</h2><div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto">\n  ${plans}\n</div></section>`;
+}
+function genFaqUI(node, c) {
+    const items = node.items.map(item => `<details style="border-bottom: 1px solid #e2e8f0; padding: 16px 0"><summary style="cursor: pointer; font-weight: 600">${item.question}</summary><p style="color: #718096; margin: 8px 0 0 0">${item.answer}</p></details>`).join('\n  ');
+    return `<section style="padding: 60px 20px; max-width: 700px; margin: 0 auto"><h2 style="text-align: center; margin-bottom: 40px">FAQ</h2>\n  ${items}\n</section>`;
+}
+function genTestimonialUI(node, c) {
+    const items = node.items.map(item => `<div style="padding: 24px; border-radius: 12px; border: 1px solid #e2e8f0"><p style="margin: 0 0 16px 0; font-style: italic">"${item.text}"</p><div style="display: flex; align-items: center; gap: 12px"><div style="width: 40px; height: 40px; border-radius: 50%; background-color: #e2e8f0"></div><div><div style="font-weight: 600">${item.name}</div><div style="font-size: 14px; color: #718096">${item.role}</div></div></div></div>`).join('\n  ');
+    return `<section style="padding: 60px 20px"><h2 style="text-align: center; margin-bottom: 40px">Testimonials</h2><div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px">\n  ${items}\n</div></section>`;
+}
+function genFooterUI(node, c) {
+    const cols = node.columns.map(col => {
+        const links = col.links.map(l => `<a href="${l.href}" style="display: block; color: #a0aec0; text-decoration: none; padding: 4px 0">${l.label}</a>`).join('');
+        return `<div><h4 style="color: #fff; margin: 0 0 12px 0">${col.title}</h4>${links}</div>`;
+    }).join('\n  ');
+    return `<footer style="padding: 40px 20px; background-color: #1a202c; color: #a0aec0"><div style="display: grid; grid-template-columns: repeat(${node.columns.length}, 1fr); gap: 32px; max-width: 1000px; margin: 0 auto">\n  ${cols}\n</div></footer>`;
+}
+function genAdminUI(node, c) {
+    const body = node.body.map(ch => genUINode(ch, c)).join('\n    ');
+    return `<div style="display: grid; grid-template-columns: 240px 1fr; min-height: 100vh"><aside style="background-color: #1a202c; color: #fff; padding: 20px"><h3 style="margin: 0 0 20px 0">Admin</h3></aside><main style="padding: 24px">\n    ${body}\n  </main></div>`;
+}
+function genAnimateUI(node, c) {
+    const body = node.body.map(ch => genUINode(ch, c)).join('\n  ');
+    return `<Transition name="${node.animType}">\n  ${body}\n</Transition>`;
+}
+function genAiUI(node, c) {
+    return `<div style="display: flex; flex-direction: column; height: 100%"><!-- AI: ${node.aiType} --><div style="flex: 1; overflow-y: auto; padding: 16px"></div><div style="padding: 16px; border-top: 1px solid #e2e8f0"><input placeholder="Type a message..." style="width: 100%; padding: 10px 16px; border-radius: 8px; border: 1px solid #e2e8f0" /></div></div>`;
+}
+function genResponsiveUI(node, c) {
+    const body = node.body.map(ch => genUINode(ch, c)).join('\n  ');
+    return `<div class="responsive-container">\n  ${body}\n</div>`;
+}
+function genBreadcrumbUI(node, c) {
+    return `<nav style="display: flex; align-items: center; padding: 12px 0; font-size: 14px"><!-- Breadcrumb --></nav>`;
+}
+function genStatsGridUI(node, c) {
+    const stats = node.stats.map(s => genStatUI(s, c)).join('\n  ');
+    return `<div style="display: grid; grid-template-columns: repeat(${node.cols || 4}, 1fr); gap: 16px">\n  ${stats}\n</div>`;
+}
+function genErrorUI(node, c) {
+    const fallback = node.fallback.map(ch => genUINode(ch, c)).join('\n    ');
+    if (node.errorType === 'boundary') {
+        return `<div v-if="hasError" style="padding: 24px; text-align: center; color: #e53e3e">\n    ${fallback || '<p>An error occurred</p>'}\n  </div>`;
+    }
+    return `<!-- Error handler: ${node.errorType} -->`;
+}
+function genLoadingUI(node, c) {
+    const body = node.body.map(ch => genUINode(ch, c)).join('\n  ');
+    if (node.loadingType === 'skeleton') {
+        return `<div style="animation: pulse 1.5s infinite; background-color: #e2e8f0; border-radius: 8px">\n  ${body || '<div style="height: 20px; margin-bottom: 8px"></div><div style="height: 20px; width: 60%"></div>'}\n</div>`;
+    }
+    if (node.loadingType === 'spinner') {
+        return `<div style="display: flex; justify-content: center; align-items: center; padding: 40px"><div style="width: 32px; height: 32px; border: 3px solid #e2e8f0; border-top: 3px solid #3182ce; border-radius: 50%; animation: spin 0.8s linear infinite"></div></div>`;
+    }
+    if (node.loadingType === 'shimmer') {
+        return `<div style="background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; height: 100px"></div>`;
+    }
+    return `<div style="text-align: center; padding: 20px; color: #718096">Loading...</div>`;
+}
+function genOfflineUI(node, c) {
+    return `<div v-if="!navigator.onLine" style="padding: 24px; text-align: center; background-color: #fff3cd; border-radius: 8px"><p style="margin: 0; color: #856404">You are currently offline</p></div>`;
+}
+// ── Helpers ─────────────────────────────────────────
+function genExpr(expr, c, useValue = false) {
+    const suffix = useValue ? '.value' : '';
+    switch (expr.kind) {
+        case 'number': return String(expr.value);
+        case 'string': return `'${expr.value}'`;
+        case 'boolean': return String(expr.value);
+        case 'null': return 'null';
+        case 'identifier':
+            if (useValue && c.states.has(expr.name))
+                return `${expr.name}.value`;
+            return expr.name;
+        case 'member': return `${genExpr(expr.object, c, useValue)}.${expr.property}`;
+        case 'index': return `${genExpr(expr.object, c, useValue)}[${genExpr(expr.index, c, useValue)}]`;
+        case 'call': {
+            const callee = genExpr(expr.callee, c, useValue);
+            const args = expr.args.map(a => genExpr(a, c, useValue)).join(', ');
+            return `${callee}(${args})`;
+        }
+        case 'binary': return `${genExpr(expr.left, c, useValue)} ${expr.op} ${genExpr(expr.right, c, useValue)}`;
+        case 'unary': return `${expr.op}${genExpr(expr.operand, c, useValue)}`;
+        case 'ternary': return `${genExpr(expr.condition, c, useValue)} ? ${genExpr(expr.consequent, c, useValue)} : ${genExpr(expr.alternate, c, useValue)}`;
+        case 'arrow': {
+            const params = expr.params.join(', ');
+            if (!Array.isArray(expr.body))
+                return `${params} => ${genExpr(expr.body, c, useValue)}`;
+            return `(${params}) => { }`;
+        }
+        case 'array': return `[${expr.elements.map(e => genExpr(e, c, useValue)).join(', ')}]`;
+        case 'object_expr': {
+            const ps = expr.properties.map(p => `${p.key}: ${genExpr(p.value, c, useValue)}`).join(', ');
+            return `{ ${ps} }`;
+        }
+        case 'template': {
+            return expr.parts.map(p => typeof p === 'string' ? p : `\${${genExpr(p, c, useValue)}}`).join('');
+        }
+        case 'assignment': {
+            const target = genExpr(expr.target, c);
+            const value = genExpr(expr.value, c);
+            if (c.states.has(extractName(expr.target))) {
+                return `${extractName(expr.target)}.value ${expr.op} ${value}`;
+            }
+            return `${target} ${expr.op} ${value}`;
+        }
+        case 'await': return `await ${genExpr(expr.expression, c, useValue)}`;
+        case 'old': return genExpr(expr.expression, c, useValue);
+    }
+}
+function genStmt(stmt, c) {
+    switch (stmt.kind) {
+        case 'expr_stmt': return genExpr(stmt.expression, c, true) + ';';
+        case 'return': return stmt.value ? `return ${genExpr(stmt.value, c, true)};` : 'return;';
+        case 'assignment_stmt': {
+            const name = extractName(stmt.target);
+            if (c.states.has(name)) {
+                const value = genExpr(stmt.value, c, true);
+                return `${name}.value ${stmt.op} ${value};`;
+            }
+            return `${genExpr(stmt.target, c)} ${stmt.op} ${genExpr(stmt.value, c)};`;
+        }
+        case 'var_decl': return `const ${stmt.name} = ${genExpr(stmt.value, c)};`;
+        case 'if_stmt': {
+            const cond = genExpr(stmt.condition, c, true);
+            const body = stmt.body.map(s => genStmt(s, c)).join('\n  ');
+            return `if (${cond}) {\n  ${body}\n}`;
+        }
+        case 'for_stmt': {
+            const iter = genExpr(stmt.iterable, c, true);
+            const body = stmt.body.map(s => genStmt(s, c)).join('\n  ');
+            return `for (const ${stmt.item} of ${iter}) {\n  ${body}\n}`;
+        }
+    }
+}
+function genActionExpr(expr, c) {
+    if (Array.isArray(expr))
+        return '';
+    if (expr.kind === 'assignment') {
+        const name = extractName(expr.target);
+        if (c.states.has(name)) {
+            return `${name} ${expr.op} ${genExpr(expr.value, c)}`;
+        }
+    }
+    if (expr.kind === 'call')
+        return genExpr(expr, c);
+    return genExpr(expr, c);
+}
+function genTextContent(expr, c) {
+    if (expr.kind === 'string')
+        return expr.value;
+    if (expr.kind === 'template') {
+        return expr.parts.map(p => typeof p === 'string' ? p : `{{ ${genExpr(p, c)} }}`).join('');
+    }
+    return `{{ ${genExpr(expr, c)} }}`;
+}
+function genTextStyle(node, c) {
+    const parts = [];
+    for (const [key, val] of Object.entries(node.props)) {
+        const v = genExpr(val, c);
+        if (key === 'size') {
+            const uv = unquote(v);
+            parts.push(`font-size: ${SIZE_MAP[uv] || uv}`);
+        }
+        if (key === 'bold')
+            parts.push('font-weight: bold');
+        if (key === 'color')
+            parts.push(`color: ${unquote(v)}`);
+        if (key === 'center')
+            parts.push('text-align: center');
+    }
+    return parts.join('; ');
+}
+function mapType(t) {
+    if (t.kind === 'primitive') {
+        switch (t.name) {
+            case 'str': return 'String';
+            case 'int':
+            case 'float': return 'Number';
+            case 'bool': return 'Boolean';
+        }
+    }
+    return 'Object';
+}
+function extractName(expr) {
+    if (expr.kind === 'identifier')
+        return expr.name;
+    if (expr.kind === 'member')
+        return extractName(expr.object);
+    return '';
+}
+//# sourceMappingURL=vue.js.map