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

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.6 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.6",
+                        "desen": "1.0.0-draft.6",
                         "next": "14.2.3",
                         "react": "18.3.1",
                         "react-dom": "18.3.1"
@@ -551,6 +552,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.6",
   "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.6"
   },
   "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.6",
+                            "desen": "1.0.0-draft.6",
                             "next": "14.2.3",
                             "react": "18.3.1",
                             "react-dom": "18.3.1"
@@ -589,6 +590,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);