desen-cli 1.0.0-draft.1 → 1.0.0-draft.11

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
 
-> desen-cli@1.0.0-draft.1 build /Users/selmanay/Desktop/desen/packages/cli
+> desen-cli@1.0.0-draft.10 build /Users/selmanay/Desktop/desen/packages/cli
 > tsc
 

package/dist/index.js

@@ -172,8 +172,9 @@ program
                 <div class="card">
                     <h1>🚀 DESEN Daemon Active</h1>
                     <p>The Synchronization (Sync) server is waiting for incoming <strong>UI AST</strong> data from Figma. It can safely continue running in the background.</p>
-                    <p>To preview your design live as a standalone application using the <strong>desen</strong> render engine, open a new terminal in your project directory and run the following commands:</p>
-                    <div class="code">cd desen-workspace<br/>npm install<br/>npm run dev</div>
+                    <p>When you press <strong>Sync to Localhost</strong> in Figma, the daemon will <strong>automatically</strong>:</p>
+                    <div class="code">1. Validate &amp; save JSON files<br/>2. Install dependencies (if needed)<br/>3. Start dev server on port 3001<br/>4. Open your browser ✨</div>
+                    <p style="margin-top:16px;color:#888;">Zero-touch. Just press Sync and watch the magic.</p>
                 </div>
             </body>
             </html>
@@ -187,19 +188,43 @@ program
             if (!payloads || payloads.length === 0 || !payloads[0].path) {
                 return res.status(400).json({ error: "Missing payloads or path in request body" });
             }
-            // SECURITY BARRICADE: Validate strictly using @desen/core specs before disk IO
+            // ─────────────────────────────────────────────────────────
+            // VALIDATION (Warn-and-Proceed for Development)
+            // Daemon is a dev tool — strict fail-closed enforcement
+            // belongs in `desen validate` (CI/CD pipeline).
+            // Here we log warnings but NEVER block the sync.
+            // ─────────────────────────────────────────────────────────
+            let validationWarnings = 0;
             for (const item of payloads) {
                 if (!item.path || !item.ast)
                     continue;
-                const result = desen_core_1.surfaceSpec.safeParse(item.ast);
+                let result;
+                if (item.path.includes('surfaces/')) {
+                    result = desen_core_1.surfaceSpec.safeParse(item.ast);
+                }
+                else if (item.path.includes('elements/') || item.path.includes('compositions/')) {
+                    result = desen_core_1.nodeSpec.safeParse(item.ast);
+                }
+                else if (item.path.includes('themes/')) {
+                    result = { success: true };
+                }
+                else {
+                    result = desen_core_1.nodeSpec.safeParse(item.ast);
+                }
                 if (!result.success) {
-                    console.error(chalk_1.default.red(`❌ [Fail-Closed] Payload validation failed for ${item.path}`));
-                    return res.status(400).json({
-                        error: "Validation failed against desen-core schemas",
-                        path: item.path,
-                        issues: result.error.errors
-                    });
+                    validationWarnings++;
+                    console.warn(chalk_1.default.yellow(`⚠️  [Validation Warning] ${item.path}`));
+                    const formatted = result.error.format();
+                    // Log a concise summary instead of the full error tree
+                    const issues = result.error.errors.map((e) => `   → [${e.path.join('.')}] ${e.message}`).join('\n');
+                    console.warn(chalk_1.default.yellow(issues));
                 }
+                else {
+                    console.log(chalk_1.default.green(`  ✓ ${item.path}`));
+                }
+            }
+            if (validationWarnings > 0) {
+                console.warn(chalk_1.default.yellow(`\n⚠️  ${validationWarnings} file(s) have validation warnings. Run 'desen validate' for strict checks.`));
             }
             const projectRoot = process.cwd();
             const workspaceDir = path_1.default.join(projectRoot, "desen-workspace");
@@ -235,8 +260,8 @@ program
                         "start": "next start"
                     },
                     dependencies: {
-                        "desen-core": "1.0.0-draft.1",
-                        "desen": "1.0.0-draft.1",
+                        "desen-core": "1.0.0-draft.8",
+                        "desen": "1.0.0-draft.8",
                         "next": "14.2.3",
                         "react": "18.3.1",
                         "react-dom": "18.3.1"
@@ -274,7 +299,7 @@ program
                 const appDir = path_1.default.join(workspaceDir, "src", "app");
                 fs_1.default.mkdirSync(appDir, { recursive: true });
                 // Find first surface directly
-                const firstSurface = payloads.find((p) => p.path.startsWith('surface/'))?.path || 'surface/frame-1.desen.json';
+                const firstSurface = payloads.find((p) => p.path.includes('surfaces/'))?.path || 'desen/surfaces/frame-1.desen.json';
                 // API Route to load local .desen.json dynamically
                 const apiDir = path_1.default.join(appDir, "api", "surface", "route");
                 fs_1.default.mkdirSync(apiDir, { recursive: true });
@@ -312,13 +337,24 @@ async function resolveRefs(obj: any, baseDir: string): Promise<any> {
 export async function GET() {
     try {
         const baseDir = process.cwd();
+        
+        // Load surface
         const filePath = path.join(baseDir, '${firstSurface}');
         const content = await fs.readFile(filePath, 'utf-8');
-        let parsed = JSON.parse(content);
+        let parsedSurface = JSON.parse(content);
+        parsedSurface = await resolveRefs(parsedSurface, baseDir);
         
-        parsed = await resolveRefs(parsed, baseDir);
+        // Load tokens gracefully
+        let parsedTokens = {};
+        try {
+            const tokensPath = path.join(baseDir, 'desen/themes/tokens.desen.json');
+            const tokensContent = await fs.readFile(tokensPath, 'utf-8');
+            parsedTokens = await resolveRefs(JSON.parse(tokensContent), baseDir);
+        } catch (e) {
+            console.log("No custom tokens found, using defaults.");
+        }
         
-        return NextResponse.json(parsed);
+        return NextResponse.json({ surface: parsedSurface, tokens: parsedTokens });
     } catch (e) {
         return NextResponse.json({ error: 'System is waiting for your sync!' }, { status: 404 });
     }
@@ -363,13 +399,15 @@ import { DesenProvider, DesenRenderer } from "desen";
 import { registry } from "../lib/desenRegistry";
 
 export default function Page() {
-    const [data, setData] = useState<any>(null);
+    const [uiData, setUiData] = useState<any>(null);
 
     useEffect(() => {
         const fetchUI = () => {
             fetch("/api/surface/route")
                 .then(res => res.json())
-                .then(json => { if(!json.error) setData(json) })
+                .then(json => { 
+                    if(!json.error) setUiData(json);
+                })
                 .catch(e => console.error(e));
         };
         fetchUI();
@@ -377,18 +415,19 @@ export default function Page() {
         return () => clearInterval(intv);
     }, []);
 
-    if (!data) return <div style={{padding: 40, fontFamily: 'monospace'}}>Waiting for Figma Sync...</div>;
+    if (!uiData || !uiData.surface) return <div style={{padding: 40, fontFamily: 'monospace'}}>Waiting for Figma Sync...</div>;
 
     // SPEC.md: Surface = full page. Pass full surface object, not data.root.
     return (
         <DesenProvider
             registry={registry}
+            tokens={uiData.tokens?.tokens || uiData.tokens || {}}
             session_id="workspace_session"
             revision_id="rev_1"
             onTelemetry={e => console.log("[Telemetry]", e)}
             onAction={a => console.log("[Action]", a)}
         >
-            <DesenRenderer node={data} />
+            <DesenRenderer node={uiData.surface} />
         </DesenProvider>
     );
 }
@@ -399,67 +438,6 @@ export default function Page() {
                 fs_1.default.writeFileSync(path_1.default.join(libDir, "desenRegistry.tsx"), `
 import React from 'react';
 
-function resolveToken(tokenStr: string): string | undefined {
-    if (!tokenStr) return undefined;
-    const match = tokenStr.match(/t_([a-fA-F0-9]{3,8})/);
-    return match ? \`#\${match[1]}\` : undefined;
-}
-
-function resolveColor(tokenStr?: string, hexStr?: string): string | undefined {
-    if (tokenStr) return resolveToken(tokenStr);
-    if (hexStr) return hexStr;
-    return undefined;
-}
-
-function buildCssFromNode(layout: any, style: any, opts?: { isText?: boolean; isSurfaceRoot?: boolean }): React.CSSProperties {
-    const css: any = { boxSizing: 'border-box' };
-
-    if (layout) {
-        css.display = 'flex';
-        css.flexDirection = layout.direction === 'row' ? 'row' : 'column';
-        if (layout.gap !== undefined && layout.gap !== 0) css.gap = layout.gap;
-
-        const am: Record<string, string> = { start:'flex-start', end:'flex-end', center:'center', 'space-between':'space-between', 'space-around':'space-around', 'space-evenly':'space-evenly' };
-        css.alignItems = am[layout.align_items] || 'stretch';
-        css.justifyContent = am[layout.align_content] || 'flex-start';
-
-        if (layout.padding !== undefined) {
-            css.padding = Array.isArray(layout.padding) ? layout.padding.map((p:number)=>p+'px').join(' ') : layout.padding !== 0 ? layout.padding+'px' : undefined;
-        }
-
-        if (opts?.isSurfaceRoot) {
-            css.width = '100%'; css.minHeight = '100vh';
-        } else {
-            if (layout.sizing_h === 'FILL') css.width = '100%';
-            else if (layout.sizing_h === 'FIXED' && style?.width !== undefined) css.width = style.width;
-            if (layout.sizing_v === 'FILL') css.height = '100%';
-            else if (layout.sizing_v === 'FIXED' && style?.height !== undefined) css.height = style.height;
-        }
-    }
-
-    if (style) {
-        const bgColor = resolveColor(style.bg_color_token, style.bg_color);
-        if (bgColor) { if (opts?.isText) css.color = bgColor; else css.backgroundColor = bgColor; }
-        const bc = resolveColor(style.border_color_token, style.border_color);
-        if (bc) css.borderColor = bc;
-        if (style.border_width !== undefined) { css.borderWidth = style.border_width; css.borderStyle = 'solid'; }
-        if (style.border_radius !== undefined) {
-            css.borderRadius = Array.isArray(style.border_radius) ? style.border_radius.map((r:number)=>r+'px').join(' ') : style.border_radius;
-        }
-        if (!layout && !opts?.isText) { if (style.width !== undefined) css.width = style.width; if (style.height !== undefined) css.height = style.height; }
-        if (style.opacity !== undefined) css.opacity = style.opacity;
-        if (style.font_size) css.fontSize = style.font_size;
-        if (style.font_weight) css.fontWeight = style.font_weight;
-        if (style.font_family) css.fontFamily = style.font_family;
-        if (style.letter_spacing) css.letterSpacing = style.letter_spacing;
-        if (style.line_height) css.lineHeight = style.line_height + 'px';
-        if (style.text_align) css.textAlign = style.text_align;
-        if (style.text_decoration) css.textDecoration = style.text_decoration;
-        if (style.text_transform) css.textTransform = style.text_transform;
-    }
-    return css;
-}
-
 const DynamicFontLoader = ({ fonts }: { fonts?: string[] }) => {
     if (!fonts || fonts.length === 0) return null;
 
@@ -483,33 +461,44 @@ const DynamicFontLoader = ({ fonts }: { fonts?: string[] }) => {
 };
 
 const SurfaceComponent = (props: any) => (
-    <div style={{ width: '100%', minHeight: '100vh', boxSizing: 'border-box' }}>
+    <div style={props.parsedStyle}>
         <DynamicFontLoader fonts={props.metadata?.fonts} />
         {props.children}
     </div>
 );
 
 const GenericContainer = (props: any) => (
-    <div style={buildCssFromNode(props.layout, props.style, { isSurfaceRoot: props._isSurfaceRoot })}>{props.children}</div>
+    <div style={props.parsedStyle}>{props.children}</div>
 );
 
 const TextComponent = (props: any) => (
-    <span style={buildCssFromNode(props.layout, props.style, { isText: true })}>{props.content || props.text || props.name}</span>
+    <span style={props.parsedStyle}>{props.content || props.text || props.name}</span>
 );
 
 const ButtonComponent = (props: any) => {
-    const adjLayout = { ...props.layout };
-    if (adjLayout && !props.children && adjLayout.align_content === 'space-between') adjLayout.align_content = 'center';
-    const css: any = { ...buildCssFromNode(adjLayout, props.style), cursor: 'pointer', border: 'none' };
-    if (props.text_style) {
-        const tc = resolveColor(props.text_style.bg_color_token, props.text_style.bg_color);
-        if (tc) css.color = tc;
-        if (props.text_style.font_size) css.fontSize = props.text_style.font_size;
-        if (props.text_style.font_weight) css.fontWeight = props.text_style.font_weight;
-        if (props.text_style.font_family) css.fontFamily = props.text_style.font_family;
-        if (props.text_style.text_align) css.textAlign = props.text_style.text_align;
+    const css: any = { ...props.parsedStyle, cursor: 'pointer', border: 'none' };
+    
+    // If no layout, center text by default (most buttons center their text)
+    if (!props.layout) {
+        css.display = 'flex';
+        css.alignItems = 'center';
+        css.justifyContent = 'center';
     }
-    return <button style={css}>{props.children || props.content || props.text || props.name}</button>;
+
+    const textStyle = props.style?.text_style || {};
+    
+    return (
+        <button style={css}>
+            <span style={{ 
+                fontFamily: textStyle.font_family,
+                fontSize: textStyle.font_size,
+                fontWeight: textStyle.font_weight,
+                color: textStyle.text_color || textStyle.bg_color // Figma plugin often maps text fill to bg_color
+            }}>
+                {props.children || props.content || props.text || props.name}
+            </span>
+        </button>
+    );
 };
 
 export const registry: Record<string, React.FC<any>> = {
@@ -519,11 +508,18 @@ export const registry: Record<string, React.FC<any>> = {
     element: GenericContainer,
     group: GenericContainer,
     stack: GenericContainer,
+    Stack: GenericContainer,
+    Card: GenericContainer,
+    Grid: GenericContainer,
+    Header: GenericContainer,
+    Footer: GenericContainer,
     text: TextComponent,
     Text: TextComponent,
     button: ButtonComponent,
-    input: (props: any) => <input style={buildCssFromNode(props.layout, props.style)} placeholder={props.content || props.name} />,
-    icon: (props: any) => <div style={{ ...buildCssFromNode(props.layout, props.style), display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
+    Button: ButtonComponent,
+    input: (props: any) => <input style={props.parsedStyle} placeholder={props.content || props.name} />,
+    icon: (props: any) => <div style={{ ...props.parsedStyle, display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
+    Icon: (props: any) => <div style={{ ...props.parsedStyle, display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
 };
 `.trim());
                 console.log(chalk_1.default.green(`✅ Done! Standalone App Scaffolded.`));
@@ -538,6 +534,74 @@ export const registry: Record<string, React.FC<any>> = {
                     }
                 }
             } // End if(!package.json)
+            // ─────────────────────────────────────────────────────────
+            // AUTO-PILOT: npm install + npm run dev + browser open
+            // Zero-touch DX — developer never leaves Figma
+            // ─────────────────────────────────────────────────────────
+            const nodeModulesPath = path_1.default.join(workspaceDir, "node_modules");
+            const devServerPort = 3001;
+            const isPortInUse = (port) => {
+                return new Promise((resolve) => {
+                    const net = require("net");
+                    const tester = net.createServer()
+                        .once("error", (err) => {
+                        if (err.code === "EADDRINUSE")
+                            resolve(true);
+                        else
+                            resolve(false);
+                    })
+                        .once("listening", () => {
+                        tester.close(() => resolve(false));
+                    })
+                        .listen(port);
+                });
+            };
+            const runNpmInstallIfNeeded = async () => {
+                if (fs_1.default.existsSync(nodeModulesPath))
+                    return;
+                console.log(chalk_1.default.blue(`\n📦 Installing dependencies...`));
+                const { execSync } = require("child_process");
+                try {
+                    execSync("npm install", { cwd: workspaceDir, stdio: "inherit" });
+                    console.log(chalk_1.default.green(`✅ Dependencies installed.`));
+                }
+                catch (e) {
+                    console.error(chalk_1.default.red(`❌ npm install failed: ${e.message}`));
+                }
+            };
+            const startDevServerIfNeeded = async () => {
+                const portBusy = await isPortInUse(devServerPort);
+                if (portBusy) {
+                    console.log(chalk_1.default.gray(`   Dev server already running on port ${devServerPort}.`));
+                    return;
+                }
+                console.log(chalk_1.default.blue(`\n🚀 Starting dev server on port ${devServerPort}...`));
+                const { spawn } = require("child_process");
+                const child = spawn("npm", ["run", "dev"], {
+                    cwd: workspaceDir,
+                    detached: true,
+                    stdio: "ignore"
+                });
+                child.unref();
+                console.log(chalk_1.default.green(`✅ Dev server launched (PID: ${child.pid}).`));
+                // Wait a bit then open browser
+                setTimeout(() => {
+                    const openCmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+                    const { exec } = require("child_process");
+                    exec(`${openCmd} http://localhost:${devServerPort}`);
+                    console.log(chalk_1.default.cyan(`🌐 Browser opened: http://localhost:${devServerPort}`));
+                }, 3000);
+            };
+            // Fire and forget — don't block the HTTP response
+            (async () => {
+                try {
+                    await runNpmInstallIfNeeded();
+                    await startDevServerIfNeeded();
+                }
+                catch (e) {
+                    console.error(chalk_1.default.yellow(`⚠️  Auto-pilot warning: ${e.message}`));
+                }
+            })();
             res.status(200).json({ success: true, message: `Successfully saved ${savedCount} files.` });
         }
         catch (error) {

package/package.json

@@ -1,26 +1,26 @@
 {
-  "name": "desen-cli",
-  "version": "1.0.0-draft.1",
-  "main": "dist/index.js",
-  "bin": {
-    "desen": "./dist/index.js"
-  },
-  "dependencies": {
-    "chalk": "^5.6.2",
-    "commander": "^14.0.3",
-    "express": "^4.19.2",
-    "cors": "^2.8.5",
-    "desen-core": "1.0.0-draft.1"
-  },
-  "devDependencies": {
-    "@types/cors": "^2.8.19",
-    "@types/express": "^5.0.6",
-    "@types/node": "^20.19.33",
-    "typescript": "^5.0.0"
-  },
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc -w",
-    "clean": "rm -rf dist"
-  }
-}
+    "name": "desen-cli",
+    "version": "1.0.0-draft.11",
+    "main": "dist/index.js",
+    "bin": {
+        "desen": "dist/index.js"
+    },
+    "scripts": {
+        "build": "tsc",
+        "dev": "tsc -w",
+        "clean": "rm -rf dist"
+    },
+    "dependencies": {
+        "desen-core": "workspace:*",
+        "chalk": "^5.6.2",
+        "commander": "^14.0.3",
+        "express": "^4.19.2",
+        "cors": "^2.8.5"
+    },
+    "devDependencies": {
+        "@types/cors": "^2.8.19",
+        "@types/express": "^5.0.6",
+        "@types/node": "^20.19.33",
+        "typescript": "^5.0.0"
+    }
+}

package/src/index.ts

@@ -4,7 +4,7 @@ import { Command } from "commander";
 import chalk from "chalk";
 import fs from "fs";
 import path from "path";
-import { surfaceSpec } from "desen-core";
+import { surfaceSpec, nodeSpec } from "desen-core";
 import express from "express";
 import cors from "cors";
 
@@ -190,8 +190,9 @@ program
                 <div class="card">
                     <h1>🚀 DESEN Daemon Active</h1>
                     <p>The Synchronization (Sync) server is waiting for incoming <strong>UI AST</strong> data from Figma. It can safely continue running in the background.</p>
-                    <p>To preview your design live as a standalone application using the <strong>desen</strong> render engine, open a new terminal in your project directory and run the following commands:</p>
-                    <div class="code">cd desen-workspace<br/>npm install<br/>npm run dev</div>
+                    <p>When you press <strong>Sync to Localhost</strong> in Figma, the daemon will <strong>automatically</strong>:</p>
+                    <div class="code">1. Validate &amp; save JSON files<br/>2. Install dependencies (if needed)<br/>3. Start dev server on port 3001<br/>4. Open your browser ✨</div>
+                    <p style="margin-top:16px;color:#888;">Zero-touch. Just press Sync and watch the magic.</p>
                 </div>
             </body>
             </html>
@@ -208,20 +209,41 @@ program
                     return res.status(400).json({ error: "Missing payloads or path in request body" });
                 }
 
-                // SECURITY BARRICADE: Validate strictly using @desen/core specs before disk IO
+                // ─────────────────────────────────────────────────────────
+                // VALIDATION (Warn-and-Proceed for Development)
+                // Daemon is a dev tool — strict fail-closed enforcement
+                // belongs in `desen validate` (CI/CD pipeline).
+                // Here we log warnings but NEVER block the sync.
+                // ─────────────────────────────────────────────────────────
+                let validationWarnings = 0;
                 for (const item of payloads) {
                     if (!item.path || !item.ast) continue;
 
-                    const result = surfaceSpec.safeParse(item.ast);
+                    let result: any;
+                    if (item.path.includes('surfaces/')) {
+                        result = surfaceSpec.safeParse(item.ast);
+                    } else if (item.path.includes('elements/') || item.path.includes('compositions/')) {
+                        result = nodeSpec.safeParse(item.ast);
+                    } else if (item.path.includes('themes/')) {
+                        result = { success: true };
+                    } else {
+                        result = nodeSpec.safeParse(item.ast);
+                    }
+
                     if (!result.success) {
-                        console.error(chalk.red(`❌ [Fail-Closed] Payload validation failed for ${item.path}`));
-                        return res.status(400).json({
-                            error: "Validation failed against desen-core schemas",
-                            path: item.path,
-                            issues: result.error.errors
-                        });
+                        validationWarnings++;
+                        console.warn(chalk.yellow(`⚠️  [Validation Warning] ${item.path}`));
+                        const formatted = result.error.format();
+                        // Log a concise summary instead of the full error tree
+                        const issues = result.error.errors.map((e: any) => `   → [${e.path.join('.')}] ${e.message}`).join('\n');
+                        console.warn(chalk.yellow(issues));
+                    } else {
+                        console.log(chalk.green(`  ✓ ${item.path}`));
                     }
                 }
+                if (validationWarnings > 0) {
+                    console.warn(chalk.yellow(`\n⚠️  ${validationWarnings} file(s) have validation warnings. Run 'desen validate' for strict checks.`));
+                }
 
                 const projectRoot = process.cwd();
                 const workspaceDir = path.join(projectRoot, "desen-workspace");
@@ -263,8 +285,8 @@ program
                             "start": "next start"
                         },
                         dependencies: {
-                            "desen-core": "1.0.0-draft.1",
-                            "desen": "1.0.0-draft.1",
+                            "desen-core": "1.0.0-draft.8",
+                            "desen": "1.0.0-draft.8",
                             "next": "14.2.3",
                             "react": "18.3.1",
                             "react-dom": "18.3.1"
@@ -305,7 +327,7 @@ program
                     fs.mkdirSync(appDir, { recursive: true });
 
                     // Find first surface directly
-                    const firstSurface = payloads.find((p: any) => p.path.startsWith('surface/'))?.path || 'surface/frame-1.desen.json';
+                    const firstSurface = payloads.find((p: any) => p.path.includes('surfaces/'))?.path || 'desen/surfaces/frame-1.desen.json';
 
                     // API Route to load local .desen.json dynamically
                     const apiDir = path.join(appDir, "api", "surface", "route");
@@ -344,13 +366,24 @@ async function resolveRefs(obj: any, baseDir: string): Promise<any> {
 export async function GET() {
     try {
         const baseDir = process.cwd();
+        
+        // Load surface
         const filePath = path.join(baseDir, '${firstSurface}');
         const content = await fs.readFile(filePath, 'utf-8');
-        let parsed = JSON.parse(content);
+        let parsedSurface = JSON.parse(content);
+        parsedSurface = await resolveRefs(parsedSurface, baseDir);
         
-        parsed = await resolveRefs(parsed, baseDir);
+        // Load tokens gracefully
+        let parsedTokens = {};
+        try {
+            const tokensPath = path.join(baseDir, 'desen/themes/tokens.desen.json');
+            const tokensContent = await fs.readFile(tokensPath, 'utf-8');
+            parsedTokens = await resolveRefs(JSON.parse(tokensContent), baseDir);
+        } catch (e) {
+            console.log("No custom tokens found, using defaults.");
+        }
         
-        return NextResponse.json(parsed);
+        return NextResponse.json({ surface: parsedSurface, tokens: parsedTokens });
     } catch (e) {
         return NextResponse.json({ error: 'System is waiting for your sync!' }, { status: 404 });
     }
@@ -398,13 +431,15 @@ import { DesenProvider, DesenRenderer } from "desen";
 import { registry } from "../lib/desenRegistry";
 
 export default function Page() {
-    const [data, setData] = useState<any>(null);
+    const [uiData, setUiData] = useState<any>(null);
 
     useEffect(() => {
         const fetchUI = () => {
             fetch("/api/surface/route")
                 .then(res => res.json())
-                .then(json => { if(!json.error) setData(json) })
+                .then(json => { 
+                    if(!json.error) setUiData(json);
+                })
                 .catch(e => console.error(e));
         };
         fetchUI();
@@ -412,18 +447,19 @@ export default function Page() {
         return () => clearInterval(intv);
     }, []);
 
-    if (!data) return <div style={{padding: 40, fontFamily: 'monospace'}}>Waiting for Figma Sync...</div>;
+    if (!uiData || !uiData.surface) return <div style={{padding: 40, fontFamily: 'monospace'}}>Waiting for Figma Sync...</div>;
 
     // SPEC.md: Surface = full page. Pass full surface object, not data.root.
     return (
         <DesenProvider
             registry={registry}
+            tokens={uiData.tokens?.tokens || uiData.tokens || {}}
             session_id="workspace_session"
             revision_id="rev_1"
             onTelemetry={e => console.log("[Telemetry]", e)}
             onAction={a => console.log("[Action]", a)}
         >
-            <DesenRenderer node={data} />
+            <DesenRenderer node={uiData.surface} />
         </DesenProvider>
     );
 }
@@ -436,67 +472,6 @@ export default function Page() {
                     fs.writeFileSync(path.join(libDir, "desenRegistry.tsx"), `
 import React from 'react';
 
-function resolveToken(tokenStr: string): string | undefined {
-    if (!tokenStr) return undefined;
-    const match = tokenStr.match(/t_([a-fA-F0-9]{3,8})/);
-    return match ? \`#\${match[1]}\` : undefined;
-}
-
-function resolveColor(tokenStr?: string, hexStr?: string): string | undefined {
-    if (tokenStr) return resolveToken(tokenStr);
-    if (hexStr) return hexStr;
-    return undefined;
-}
-
-function buildCssFromNode(layout: any, style: any, opts?: { isText?: boolean; isSurfaceRoot?: boolean }): React.CSSProperties {
-    const css: any = { boxSizing: 'border-box' };
-
-    if (layout) {
-        css.display = 'flex';
-        css.flexDirection = layout.direction === 'row' ? 'row' : 'column';
-        if (layout.gap !== undefined && layout.gap !== 0) css.gap = layout.gap;
-
-        const am: Record<string, string> = { start:'flex-start', end:'flex-end', center:'center', 'space-between':'space-between', 'space-around':'space-around', 'space-evenly':'space-evenly' };
-        css.alignItems = am[layout.align_items] || 'stretch';
-        css.justifyContent = am[layout.align_content] || 'flex-start';
-
-        if (layout.padding !== undefined) {
-            css.padding = Array.isArray(layout.padding) ? layout.padding.map((p:number)=>p+'px').join(' ') : layout.padding !== 0 ? layout.padding+'px' : undefined;
-        }
-
-        if (opts?.isSurfaceRoot) {
-            css.width = '100%'; css.minHeight = '100vh';
-        } else {
-            if (layout.sizing_h === 'FILL') css.width = '100%';
-            else if (layout.sizing_h === 'FIXED' && style?.width !== undefined) css.width = style.width;
-            if (layout.sizing_v === 'FILL') css.height = '100%';
-            else if (layout.sizing_v === 'FIXED' && style?.height !== undefined) css.height = style.height;
-        }
-    }
-
-    if (style) {
-        const bgColor = resolveColor(style.bg_color_token, style.bg_color);
-        if (bgColor) { if (opts?.isText) css.color = bgColor; else css.backgroundColor = bgColor; }
-        const bc = resolveColor(style.border_color_token, style.border_color);
-        if (bc) css.borderColor = bc;
-        if (style.border_width !== undefined) { css.borderWidth = style.border_width; css.borderStyle = 'solid'; }
-        if (style.border_radius !== undefined) {
-            css.borderRadius = Array.isArray(style.border_radius) ? style.border_radius.map((r:number)=>r+'px').join(' ') : style.border_radius;
-        }
-        if (!layout && !opts?.isText) { if (style.width !== undefined) css.width = style.width; if (style.height !== undefined) css.height = style.height; }
-        if (style.opacity !== undefined) css.opacity = style.opacity;
-        if (style.font_size) css.fontSize = style.font_size;
-        if (style.font_weight) css.fontWeight = style.font_weight;
-        if (style.font_family) css.fontFamily = style.font_family;
-        if (style.letter_spacing) css.letterSpacing = style.letter_spacing;
-        if (style.line_height) css.lineHeight = style.line_height + 'px';
-        if (style.text_align) css.textAlign = style.text_align;
-        if (style.text_decoration) css.textDecoration = style.text_decoration;
-        if (style.text_transform) css.textTransform = style.text_transform;
-    }
-    return css;
-}
-
 const DynamicFontLoader = ({ fonts }: { fonts?: string[] }) => {
     if (!fonts || fonts.length === 0) return null;
 
@@ -520,33 +495,44 @@ const DynamicFontLoader = ({ fonts }: { fonts?: string[] }) => {
 };
 
 const SurfaceComponent = (props: any) => (
-    <div style={{ width: '100%', minHeight: '100vh', boxSizing: 'border-box' }}>
+    <div style={props.parsedStyle}>
         <DynamicFontLoader fonts={props.metadata?.fonts} />
         {props.children}
     </div>
 );
 
 const GenericContainer = (props: any) => (
-    <div style={buildCssFromNode(props.layout, props.style, { isSurfaceRoot: props._isSurfaceRoot })}>{props.children}</div>
+    <div style={props.parsedStyle}>{props.children}</div>
 );
 
 const TextComponent = (props: any) => (
-    <span style={buildCssFromNode(props.layout, props.style, { isText: true })}>{props.content || props.text || props.name}</span>
+    <span style={props.parsedStyle}>{props.content || props.text || props.name}</span>
 );
 
 const ButtonComponent = (props: any) => {
-    const adjLayout = { ...props.layout };
-    if (adjLayout && !props.children && adjLayout.align_content === 'space-between') adjLayout.align_content = 'center';
-    const css: any = { ...buildCssFromNode(adjLayout, props.style), cursor: 'pointer', border: 'none' };
-    if (props.text_style) {
-        const tc = resolveColor(props.text_style.bg_color_token, props.text_style.bg_color);
-        if (tc) css.color = tc;
-        if (props.text_style.font_size) css.fontSize = props.text_style.font_size;
-        if (props.text_style.font_weight) css.fontWeight = props.text_style.font_weight;
-        if (props.text_style.font_family) css.fontFamily = props.text_style.font_family;
-        if (props.text_style.text_align) css.textAlign = props.text_style.text_align;
+    const css: any = { ...props.parsedStyle, cursor: 'pointer', border: 'none' };
+    
+    // If no layout, center text by default (most buttons center their text)
+    if (!props.layout) {
+        css.display = 'flex';
+        css.alignItems = 'center';
+        css.justifyContent = 'center';
     }
-    return <button style={css}>{props.children || props.content || props.text || props.name}</button>;
+
+    const textStyle = props.style?.text_style || {};
+    
+    return (
+        <button style={css}>
+            <span style={{ 
+                fontFamily: textStyle.font_family,
+                fontSize: textStyle.font_size,
+                fontWeight: textStyle.font_weight,
+                color: textStyle.text_color || textStyle.bg_color // Figma plugin often maps text fill to bg_color
+            }}>
+                {props.children || props.content || props.text || props.name}
+            </span>
+        </button>
+    );
 };
 
 export const registry: Record<string, React.FC<any>> = {
@@ -556,11 +542,18 @@ export const registry: Record<string, React.FC<any>> = {
     element: GenericContainer,
     group: GenericContainer,
     stack: GenericContainer,
+    Stack: GenericContainer,
+    Card: GenericContainer,
+    Grid: GenericContainer,
+    Header: GenericContainer,
+    Footer: GenericContainer,
     text: TextComponent,
     Text: TextComponent,
     button: ButtonComponent,
-    input: (props: any) => <input style={buildCssFromNode(props.layout, props.style)} placeholder={props.content || props.name} />,
-    icon: (props: any) => <div style={{ ...buildCssFromNode(props.layout, props.style), display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
+    Button: ButtonComponent,
+    input: (props: any) => <input style={props.parsedStyle} placeholder={props.content || props.name} />,
+    icon: (props: any) => <div style={{ ...props.parsedStyle, display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
+    Icon: (props: any) => <div style={{ ...props.parsedStyle, display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
 };
 `.trim());
 
@@ -578,6 +571,77 @@ export const registry: Record<string, React.FC<any>> = {
                     }
                 } // End if(!package.json)
 
+                // ─────────────────────────────────────────────────────────
+                // AUTO-PILOT: npm install + npm run dev + browser open
+                // Zero-touch DX — developer never leaves Figma
+                // ─────────────────────────────────────────────────────────
+                const nodeModulesPath = path.join(workspaceDir, "node_modules");
+                const devServerPort = 3001;
+
+                const isPortInUse = (port: number): Promise<boolean> => {
+                    return new Promise((resolve) => {
+                        const net = require("net");
+                        const tester = net.createServer()
+                            .once("error", (err: any) => {
+                                if (err.code === "EADDRINUSE") resolve(true);
+                                else resolve(false);
+                            })
+                            .once("listening", () => {
+                                tester.close(() => resolve(false));
+                            })
+                            .listen(port);
+                    });
+                };
+
+                const runNpmInstallIfNeeded = async () => {
+                    if (fs.existsSync(nodeModulesPath)) return;
+
+                    console.log(chalk.blue(`\n📦 Installing dependencies...`));
+                    const { execSync } = require("child_process");
+                    try {
+                        execSync("npm install", { cwd: workspaceDir, stdio: "inherit" });
+                        console.log(chalk.green(`✅ Dependencies installed.`));
+                    } catch (e: any) {
+                        console.error(chalk.red(`❌ npm install failed: ${e.message}`));
+                    }
+                };
+
+                const startDevServerIfNeeded = async () => {
+                    const portBusy = await isPortInUse(devServerPort);
+                    if (portBusy) {
+                        console.log(chalk.gray(`   Dev server already running on port ${devServerPort}.`));
+                        return;
+                    }
+
+                    console.log(chalk.blue(`\n🚀 Starting dev server on port ${devServerPort}...`));
+                    const { spawn } = require("child_process");
+                    const child = spawn("npm", ["run", "dev"], {
+                        cwd: workspaceDir,
+                        detached: true,
+                        stdio: "ignore"
+                    });
+                    child.unref();
+                    console.log(chalk.green(`✅ Dev server launched (PID: ${child.pid}).`));
+
+                    // Wait a bit then open browser
+                    setTimeout(() => {
+                        const openCmd = process.platform === "darwin" ? "open" : process.platform === "win32" ? "start" : "xdg-open";
+                        const { exec } = require("child_process");
+                        exec(`${openCmd} http://localhost:${devServerPort}`);
+                        console.log(chalk.cyan(`🌐 Browser opened: http://localhost:${devServerPort}`));
+                    }, 3000);
+                };
+
+                // Fire and forget — don't block the HTTP response
+                (async () => {
+                    try {
+                        await runNpmInstallIfNeeded();
+                        await startDevServerIfNeeded();
+                    } catch (e: any) {
+                        console.error(chalk.yellow(`⚠️  Auto-pilot warning: ${e.message}`));
+                    }
+                })();
+
                 res.status(200).json({ success: true, message: `Successfully saved ${savedCount} files.` });
             } catch (error: any) {
                 console.error(chalk.red("❌ Sync Error:"), error);