desen-cli 1.0.0-draft.5 → 1.0.0-draft.7

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
 
-> desen-cli@1.0.0-draft.5 build /Users/selmanay/Desktop/desen/packages/cli
+> desen-cli@1.0.0-draft.7 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>
@@ -248,8 +249,8 @@ program
                         "start": "next start"
                     },
                     dependencies: {
-                        "desen-core": "1.0.0-draft.5",
-                        "desen": "1.0.0-draft.5",
+                        "desen-core": "1.0.0-draft.7",
+                        "desen": "1.0.0-draft.7",
                         "next": "14.2.3",
                         "react": "18.3.1",
                         "react-dom": "18.3.1"
@@ -429,7 +430,7 @@ function buildCssFromNode(layout: any, style: any, opts?: { isText?: boolean; is
 
     if (layout) {
         css.display = 'flex';
-        css.flexDirection = layout.direction === 'row' ? 'row' : 'column';
+        css.flexDirection = (layout.direction === 'row' || layout.direction === 'horizontal') ? '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' };
@@ -532,11 +533,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,
+    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>,
+    Icon: (props: any) => <div style={{ ...buildCssFromNode(props.layout, props.style), display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
 };
 `.trim());
                 console.log(chalk_1.default.green(`✅ Done! Standalone App Scaffolded.`));
@@ -551,6 +559,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,13 +1,13 @@
 {
   "name": "desen-cli",
-  "version": "1.0.0-draft.5",
+  "version": "1.0.0-draft.7",
   "main": "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.5"
+    "desen-core": "1.0.0-draft.7"
   },
   "devDependencies": {
     "@types/cors": "^2.8.19",

package/src/index.ts

@@ -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>
@@ -274,8 +275,8 @@ program
                             "start": "next start"
                         },
                         dependencies: {
-                            "desen-core": "1.0.0-draft.5",
-                            "desen": "1.0.0-draft.5",
+                            "desen-core": "1.0.0-draft.7",
+                            "desen": "1.0.0-draft.7",
                             "next": "14.2.3",
                             "react": "18.3.1",
                             "react-dom": "18.3.1"
@@ -464,7 +465,7 @@ function buildCssFromNode(layout: any, style: any, opts?: { isText?: boolean; is
 
     if (layout) {
         css.display = 'flex';
-        css.flexDirection = layout.direction === 'row' ? 'row' : 'column';
+        css.flexDirection = (layout.direction === 'row' || layout.direction === 'horizontal') ? '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' };
@@ -567,11 +568,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,
+    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>,
+    Icon: (props: any) => <div style={{ ...buildCssFromNode(props.layout, props.style), display:'inline-flex', alignItems:'center', justifyContent:'center' }}>⚙️</div>,
 };
 `.trim());
 
@@ -589,6 +597,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);