@pulse-editor/cli 0.1.1-beta.9 → 0.1.2

package/dist/app.js

@@ -12,6 +12,8 @@ import Build from './components/commands/build.js';
 import Preview from './components/commands/preview.js';
 import Start from './components/commands/start.js';
 import Clean from './components/commands/clean.js';
+import Upgrade from './components/commands/upgrade.js';
+import Skill from './components/commands/skill.js';
 export default function App({ cli }) {
     const [command, setCommand] = useState(undefined);
     if (cli.flags.stage) {
@@ -24,5 +26,5 @@ export default function App({ cli }) {
         const cmd = cli.input[0] ?? 'help';
         setCommand(cmd);
     }, [cli.input]);
-    return (_jsxs(_Fragment, { children: [cli.flags.stage && (_jsx(Text, { color: 'yellow', children: "\u26A0\uFE0F You are in development mode." })), command === 'help' ? (_jsx(Help, { cli: cli })) : command === 'chat' ? (_jsx(Chat, { cli: cli })) : command === 'login' ? (_jsx(Login, { cli: cli })) : command === 'logout' ? (_jsx(Logout, { cli: cli })) : command === 'publish' ? (_jsx(Publish, { cli: cli })) : command === 'create' ? (_jsx(Create, { cli: cli })) : command === 'dev' ? (_jsx(Dev, { cli: cli })) : command === 'build' ? (_jsx(Build, { cli: cli })) : command === 'preview' ? (_jsx(Preview, { cli: cli })) : command === 'start' ? (_jsx(Start, { cli: cli })) : command === 'clean' ? (_jsx(Clean, { cli: cli })) : (command !== undefined && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: 'redBright', children: ["Invalid command: ", command] }), _jsxs(Text, { children: ["Run ", _jsx(Text, { color: 'blueBright', children: "pulse help" }), " to see the list of available commands."] })] })))] }));
+    return (_jsxs(_Fragment, { children: [cli.flags.stage && (_jsx(Text, { color: 'yellow', children: "\u26A0\uFE0F  You are in development mode." })), command === 'help' ? (_jsx(Help, { cli: cli })) : command === 'chat' ? (_jsx(Chat, { cli: cli })) : command === 'login' ? (_jsx(Login, { cli: cli })) : command === 'logout' ? (_jsx(Logout, { cli: cli })) : command === 'publish' ? (_jsx(Publish, { cli: cli })) : command === 'create' ? (_jsx(Create, { cli: cli })) : command === 'dev' ? (_jsx(Dev, { cli: cli })) : command === 'build' ? (_jsx(Build, { cli: cli })) : command === 'preview' ? (_jsx(Preview, { cli: cli })) : command === 'start' ? (_jsx(Start, { cli: cli })) : command === 'clean' ? (_jsx(Clean, { cli: cli })) : command === 'upgrade' ? (_jsx(Upgrade, { cli: cli })) : command === 'skill' ? (_jsx(Skill, { cli: cli })) : (command !== undefined && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: 'redBright', children: ["Invalid command: ", command] }), _jsxs(Text, { children: ["Run ", _jsx(Text, { color: 'blueBright', children: "pulse help" }), " to see the list of available commands."] })] })))] }));
 }

package/dist/components/commands/build.js

@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import { execa } from 'execa';
 import fs from 'fs';
 import { cleanDist } from '../../lib/execa-utils/clean.js';
+import { webpackCompile } from '../../lib/webpack/compile.js';
 export default function Build({ cli }) {
     useEffect(() => {
         async function buildProd() {
@@ -23,6 +24,19 @@ export default function Build({ cli }) {
                         });
                     }
                 }
+                // Create node_modules/.pulse/server directory
+                if (!fs.existsSync('node_modules/.pulse/server')) {
+                    if (process.platform === 'win32') {
+                        await execa('mkdir node_modules\\.pulse\\server', {
+                            shell: true,
+                        });
+                    }
+                    else {
+                        await execa('mkdir -p node_modules/.pulse/server', {
+                            shell: true,
+                        });
+                    }
+                }
                 if (process.platform === 'win32') {
                     await execa('xcopy /E /I node_modules\\@pulse-editor\\cli\\dist\\lib\\server node_modules\\.pulse\\server', {
                         shell: true,
@@ -35,40 +49,11 @@ export default function Build({ cli }) {
                 }
             }
             await cleanDist();
-            if (buildTarget === undefined) {
-                // Start building
-                await execa('npx webpack --mode production', {
-                    stdio: 'inherit',
-                    shell: true,
-                    env: {
-                        NODE_OPTIONS: '--import=tsx',
-                    },
-                });
-            }
-            else if (buildTarget === 'client') {
-                // Start building client only
-                await execa('npx webpack --mode production', {
-                    stdio: 'inherit',
-                    shell: true,
-                    env: {
-                        NODE_OPTIONS: '--import=tsx',
-                        BUILD_TARGET: 'client',
-                    },
-                });
-            }
-            else if (buildTarget === 'server') {
-                // Start building server only
-                await execa('npx webpack --mode production', {
-                    stdio: 'inherit',
-                    shell: true,
-                    env: {
-                        NODE_OPTIONS: '--import=tsx',
-                        BUILD_TARGET: 'server',
-                    },
-                });
+            try {
+                await webpackCompile('production', buildTarget);
             }
-            else {
-                console.error(`❌ Unknown build target: ${buildTarget}`);
+            catch (err) {
+                console.error('❌ Webpack build failed', err);
             }
         }
         buildProd();

package/dist/components/commands/create.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Box, Text, useApp } from 'ink';
 import Spinner from 'ink-spinner';
 import { $, execa } from 'execa';
@@ -10,9 +10,14 @@ import path from 'path';
 export default function Create({ cli }) {
     const [framework, setFramework] = useState(undefined);
     const [projectName, setProjectName] = useState(undefined);
+    const [displayName, setDisplayName] = useState(undefined);
     const [visibility, setVisibility] = useState(undefined);
+    const projectPath = useMemo(() => {
+        return cli.flags.path ?? projectName;
+    }, [projectName, cli]);
     const [isShowFrameworkSelect, setIsShowFrameworkSelect] = useState(true);
     const [isShowProjectNameInput, setIsShowProjectNameInput] = useState(false);
+    const [isShowDisplayNameInput, setIsShowDisplayNameInput] = useState(false);
     const [isShowVisibilitySelect, setIsShowVisibilitySelect] = useState(false);
     const [createMessage, setCreateMessage] = useState();
     const [errorMessage, setErrorMessage] = useState();
@@ -59,13 +64,26 @@ export default function Create({ cli }) {
         if (projectName) {
             // Check if the project already exists
             const projectPath = path.join(process.cwd(), projectName);
-            if (fs.existsSync(projectPath)) {
+            if (fs.existsSync(projectPath) &&
+                fs.lstatSync(projectPath).isDirectory() &&
+                fs.readdirSync(projectPath).length > 0) {
                 setErrorMessage(_jsx(Text, { color: "redBright", children: "\u274C A project with same name already exists in current path." }));
                 setTimeout(() => {
                     exit();
                 }, 0);
                 return;
             }
+            const displayName = cli.flags.displayName;
+            if (displayName) {
+                setDisplayName(displayName);
+            }
+            else {
+                setIsShowDisplayNameInput(true);
+            }
+        }
+    }, [projectName, cli]);
+    useEffect(() => {
+        if (displayName) {
             const visibility = cli.flags.visibility;
             if (visibility) {
                 setVisibility(visibility);
@@ -74,50 +92,55 @@ export default function Create({ cli }) {
                 setIsShowVisibilitySelect(true);
             }
         }
-    }, [projectName, cli]);
+    }, [displayName, cli]);
     useEffect(() => {
         if (visibility && projectName) {
             createFromTemplate(projectName, visibility);
         }
     }, [visibility, projectName]);
     async function createFromTemplate(name, visibility) {
+        if (!projectPath) {
+            setErrorMessage(_jsx(Text, { color: "redBright", children: "\u274C Project path is not defined." }));
+            return;
+        }
         if (framework === 'react') {
             // Clone the template repository
             setCreateMessage(_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Creating a new Pulse Editor app using React template..." })] }));
             try {
-                await $ `git clone --depth 1 https://github.com/ClayPulse/pulse-app-template.git ${name}`;
+                await $ `git clone --depth 1 https://github.com/ClayPulse/pulse-app-template.git ${projectPath}`;
             }
             catch (error) {
-                setCreateMessage(_jsx(Text, { color: "redBright", children: "\u274C Failed to clone the template. Please check your internet connection and try again." }));
+                setCreateMessage(_jsxs(Text, { color: "redBright", children: ["\u274C Failed to clone the template. ", error.message] }));
                 return;
             }
             // Modify the package.json file to update the name
             setCreateMessage(_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Initializing project..." })] }));
             /* Setup pulse.config.ts */
-            const pulseConfigPath = path.join(process.cwd(), name, 'pulse.config.ts');
+            const pulseConfigPath = path.join(process.cwd(), projectPath, 'pulse.config.ts');
             let pulseConfig = fs.readFileSync(pulseConfigPath, 'utf8');
             // Modify visibility by matching the block that starts with 'visibility:',
             // and replacing the entire line with the new visibility value.
             pulseConfig = pulseConfig.replace(/visibility:\s*['"`](public|unlisted|private)['"`],?/, `visibility: '${visibility}',`);
             fs.writeFileSync(pulseConfigPath, pulseConfig);
             /* Setup packages.json */
-            const packageJsonPath = path.join(process.cwd(), name, 'package.json');
+            const packageJsonPath = path.join(process.cwd(), projectPath, 'package.json');
             const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
             packageJson.name = name.replaceAll('-', '_');
+            packageJson.displayName = displayName;
             // Write the modified package.json back to the file
             fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
             // Remove the .git directory
-            const gitDirPath = path.join(process.cwd(), name, '.git');
+            const gitDirPath = path.join(process.cwd(), projectPath, '.git');
             if (fs.existsSync(gitDirPath)) {
                 fs.rmSync(gitDirPath, { recursive: true, force: true });
             }
             // Remove the .github directory
-            const githubDirPath = path.join(process.cwd(), name, '.github');
+            const githubDirPath = path.join(process.cwd(), projectPath, '.github');
             if (fs.existsSync(githubDirPath)) {
                 fs.rmSync(githubDirPath, { recursive: true, force: true });
             }
             // Remove LICENSE file
-            const licenseFilePath = path.join(process.cwd(), name, 'LICENSE');
+            const licenseFilePath = path.join(process.cwd(), projectPath, 'LICENSE');
             if (fs.existsSync(licenseFilePath)) {
                 fs.rmSync(licenseFilePath, { force: true });
             }
@@ -125,7 +148,7 @@ export default function Create({ cli }) {
             // Run `npm i`
             try {
                 await execa(`npm install`, {
-                    cwd: path.join(process.cwd(), name),
+                    cwd: path.join(process.cwd(), projectPath),
                     shell: true,
                 });
             }
@@ -136,7 +159,7 @@ export default function Create({ cli }) {
             setCreateMessage(_jsx(Text, { children: "\uD83D\uDE80 Pulse Editor React app project created successfully!" }));
         }
     }
-    return (_jsxs(_Fragment, { children: [isShowFrameworkSelect && (_jsx(FrameworkSelect, { cli: cli, frameworkItems: frameworkItems, framework: framework, setFramework: setFramework })), isShowProjectNameInput && (_jsx(ProjectNameInput, { projectName: projectName, setProjectName: setProjectName })), isShowVisibilitySelect && (_jsx(VisibilitySelect, { visibility: visibility, setVisibility: setVisibility })), visibility !== undefined && (_jsxs(_Fragment, { children: [framework === 'react' && _jsx(_Fragment, { children: createMessage }), framework !== 'react' && (_jsx(Text, { children: "\uD83D\uDEA7 Currently not available. We'd like to invite you to work on these frameworks if you are interested in! Check out our tutorial to integrate your favorite web framework with Pulse Editor using Module Federation." }))] })), _jsx(Text, { children: errorMessage })] }));
+    return (_jsxs(_Fragment, { children: [isShowFrameworkSelect && (_jsx(FrameworkSelect, { cli: cli, frameworkItems: frameworkItems, framework: framework, setFramework: setFramework })), isShowProjectNameInput && (_jsx(ProjectNameInput, { projectName: projectName, setProjectName: setProjectName })), isShowDisplayNameInput && (_jsx(DisplayNameInput, { projectName: projectName ?? '', displayName: displayName, setDisplayName: setDisplayName })), isShowVisibilitySelect && (_jsx(VisibilitySelect, { visibility: visibility, setVisibility: setVisibility })), visibility !== undefined && (_jsxs(_Fragment, { children: [framework === 'react' && _jsx(_Fragment, { children: createMessage }), framework !== 'react' && (_jsx(Text, { children: "\uD83D\uDEA7 Currently not available. We'd like to invite you to work on these frameworks if you are interested in! Check out our tutorial to integrate your favorite web framework with Pulse Editor using Module Federation." }))] })), _jsx(Text, { children: errorMessage })] }));
 }
 function FrameworkSelect({ cli, frameworkItems, framework, setFramework, }) {
     return (_jsx(_Fragment, { children: !cli.flags.framework && (_jsxs(_Fragment, { children: [_jsx(Text, { children: "\uD83D\uDEA9Create a new Pulse Editor app using your favorite web framework!" }), _jsx(SelectInput, { items: frameworkItems, onSelect: item => {
@@ -146,6 +169,9 @@ function FrameworkSelect({ cli, frameworkItems, framework, setFramework, }) {
 function ProjectNameInput({ projectName, setProjectName, }) {
     return (_jsx(_Fragment, { children: _jsxs(Box, { children: [_jsx(Text, { children: "Enter your project name: " }), _jsx(UncontrolledTextInput, { onSubmit: value => setTimeout(() => setProjectName(value), 0), focus: projectName === undefined })] }) }));
 }
+function DisplayNameInput({ projectName, displayName, setDisplayName, }) {
+    return (_jsx(_Fragment, { children: _jsxs(Box, { children: [_jsxs(Text, { children: ["Enter your project display name: (default: ", projectName, ")"] }), _jsx(UncontrolledTextInput, { onSubmit: value => setTimeout(() => setDisplayName(value.length > 0 ? value : projectName), 0), focus: displayName === undefined })] }) }));
+}
 function VisibilitySelect({ visibility, setVisibility, }) {
     return (_jsxs(_Fragment, { children: [_jsx(Text, { children: "Enter marketplace visibility for your project:" }), _jsx(SelectInput, { items: [
                     { label: 'Public', value: 'public' },

package/dist/components/commands/dev.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Text } from 'ink';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { execa } from 'execa';
 import fs from 'fs';
 import { getDepsBinPath } from '../../lib/execa-utils/deps.js';
 import { cleanDist } from '../../lib/execa-utils/clean.js';
+import { webpackCompile } from '../../lib/webpack/compile.js';
 export default function Dev({ cli }) {
     useEffect(() => {
         async function startDevServer() {
@@ -22,6 +22,19 @@ export default function Dev({ cli }) {
                     });
                 }
             }
+            // Create node_modules/.pulse/server directory
+            if (!fs.existsSync('node_modules/.pulse/server')) {
+                if (process.platform === 'win32') {
+                    await execa('mkdir node_modules\\.pulse\\server', {
+                        shell: true,
+                    });
+                }
+                else {
+                    await execa('mkdir -p node_modules/.pulse/server', {
+                        shell: true,
+                    });
+                }
+            }
             if (process.platform === 'win32') {
                 await execa('xcopy /E /I node_modules\\@pulse-editor\\cli\\dist\\lib\\server node_modules\\.pulse\\server', {
                     shell: true,
@@ -34,11 +47,13 @@ export default function Dev({ cli }) {
             }
             // Start dev server
             await cleanDist();
-            await execa(getDepsBinPath('concurrently'), [
-                '--prefix',
-                'none',
-                '"npx webpack --mode development --watch"',
-                '"tsx watch --clear-screen=false node_modules/@pulse-editor/cli/dist/lib/server/express.js"',
+            // Start webpack in dev watch mode and watch for changes
+            const compiler = await webpackCompile('development', undefined, true);
+            // Start server with tsx
+            await execa(getDepsBinPath('tsx'), [
+                'watch',
+                '--clear-screen=false',
+                'node_modules/@pulse-editor/cli/dist/lib/server/express.js',
             ], {
                 stdio: 'inherit',
                 shell: true,
@@ -47,8 +62,20 @@ export default function Dev({ cli }) {
                     NODE_ENV: 'development',
                 },
             });
+            // Handle process exit to close webpack compiler
+            process.on('SIGINT', () => {
+                if (compiler && typeof compiler.close === 'function') {
+                    compiler.close(() => {
+                        process.exit();
+                    });
+                }
+                else {
+                    process.exit();
+                }
+            });
         }
+        console.log('🚀 Starting development server...');
         startDevServer();
     }, []);
-    return (_jsx(_Fragment, { children: _jsx(Text, { children: "Starting dev server..." }) }));
+    return _jsx(_Fragment, {});
 }

package/dist/components/commands/login.d.ts

@@ -1,5 +1,5 @@
-import { Flags } from '../../lib/cli-flags.js';
-import { Result } from 'meow';
+import { Result } from "meow";
+import { Flags } from "../../lib/cli-flags.js";
 export default function Login({ cli }: {
     cli: Result<Flags>;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/commands/login.js

@@ -1,30 +1,58 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Box, Text, useApp } from 'ink';
-import SelectInput from 'ink-select-input';
-import TextInput from 'ink-text-input';
-import Spinner from 'ink-spinner';
-import os from 'os';
-import path from 'path';
-import { checkToken, getToken, isTokenInEnv, saveToken, } from '../../lib/token.js';
+import { exec } from "child_process";
+import http from "http";
+import { Box, Text, useApp, useInput } from "ink";
+import SelectInput from "ink-select-input";
+import Spinner from "ink-spinner";
+import TextInput from "ink-text-input";
+import os from "os";
+import path from "path";
+import { useEffect, useState } from "react";
+import { getBackendUrl } from "../../lib/backend-url.js";
+import { checkToken, getToken, isTokenInEnv, saveToken, } from "../../lib/token.js";
+function openBrowser(url) {
+    const platform = process.platform;
+    let cmd;
+    if (platform === "win32") {
+        cmd = `start "" "${url}"`;
+    }
+    else if (platform === "darwin") {
+        cmd = `open "${url}"`;
+    }
+    else {
+        cmd = `xdg-open "${url}"`;
+    }
+    exec(cmd);
+}
+// Render a terminal hyperlink using ANSI OSC 8 escape sequences
+function TerminalLink({ url, label }) {
+    const text = label ?? url;
+    // OSC 8 hyperlink: ESC]8;;URL BEL text ESC]8;; BEL
+    const hyperlink = `\u001B]8;;${url}\u0007${text}\u001B]8;;\u0007`;
+    return _jsx(Text, { children: hyperlink });
+}
 export default function Login({ cli }) {
     const [loginMethod, setLoginMethod] = useState(undefined);
     const [isShowLoginMethod, setIsShowLoginMethod] = useState(false);
     const [isMethodSelected, setIsMethodSelected] = useState(false);
     const [isCheckingAuth, setIsCheckingAuth] = useState(true);
     const [isAuthenticated, setIsAuthenticated] = useState(false);
-    const [token, setToken] = useState('');
+    const [token, setToken] = useState("");
     const [isTokenSaved, setIsTokenSaved] = useState(false);
-    const [tokenInput, setTokenInput] = useState('');
-    const [saveTokenInput, setSaveTokenInput] = useState('');
+    const [tokenInput, setTokenInput] = useState("");
+    const [saveTokenInput, setSaveTokenInput] = useState("");
+    // Browser flow state
+    const [flowState, setFlowState] = useState("idle");
+    const [authUrl, setAuthUrl] = useState("");
+    const [flowError, setFlowError] = useState("");
     const loginMethodItems = [
         {
-            label: 'Login using access token',
-            value: 'token',
+            label: "Login in browser",
+            value: "flow",
         },
         {
-            label: '(WIP) Login in browser',
-            value: 'flow',
+            label: "Login using access token",
+            value: "token",
         },
     ];
     const { exit } = useApp();
@@ -33,22 +61,22 @@ export default function Login({ cli }) {
         const savedToken = getToken(cli.flags.stage);
         setIsShowLoginMethod(!savedToken && !cli.flags.token && !cli.flags.flow);
         if (savedToken) {
-            setLoginMethod('token');
+            setLoginMethod("token");
             setToken(savedToken);
             return;
         }
         else if (cli.flags.token) {
-            setLoginMethod('token');
+            setLoginMethod("token");
         }
         else if (cli.flags.flow) {
-            setLoginMethod('flow');
+            setLoginMethod("flow");
         }
     }, [cli]);
     // Check token validity
     useEffect(() => {
         // Only check token validity when it is set
-        if (loginMethod === 'token' && token.length > 0) {
-            checkToken(token, cli.flags.stage).then(isValid => {
+        if (loginMethod === "token" && token.length > 0) {
+            checkToken(token, cli.flags.stage).then((isValid) => {
                 setIsAuthenticated(isValid);
                 setIsCheckingAuth(false);
             });
@@ -59,21 +87,77 @@ export default function Login({ cli }) {
             setIsMethodSelected(loginMethod !== undefined);
         }, 0);
     }, [loginMethod]);
-    return (_jsxs(_Fragment, { children: [isShowLoginMethod && (_jsxs(_Fragment, { children: [_jsx(Text, { children: "Login to the Pulse Editor Platform" }), _jsx(SelectInput, { items: loginMethodItems, onSelect: item => {
+    // Browser flow: start local server and open browser
+    useEffect(() => {
+        if (loginMethod !== "flow" || !isMethodSelected)
+            return;
+        const baseUrl = getBackendUrl(cli.flags.stage);
+        const server = http.createServer((req, res) => {
+            const reqUrl = new URL(req.url ?? "/", "http://localhost");
+            const receivedToken = reqUrl.searchParams.get("token");
+            if (receivedToken) {
+                res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+                res.end('<html><body style="font-family:sans-serif;text-align:center;padding:60px">' +
+                    "<h2>Login successful!</h2><p>You can close this tab and return to the terminal.</p>" +
+                    "</body></html>");
+                server.close();
+                saveToken(receivedToken, cli.flags.stage);
+                setToken(receivedToken);
+                setFlowState("success");
+                setTimeout(() => {
+                    exit();
+                }, 1500);
+            }
+            else {
+                res.writeHead(400, { "Content-Type": "text/plain" });
+                res.end("Missing token parameter.");
+            }
+        });
+        server.listen(0, "127.0.0.1", () => {
+            const port = server.address().port;
+            const callbackUrl = `http://127.0.0.1:${port}`;
+            const url = `${baseUrl}/api/auth/cli?redirect=${encodeURIComponent(callbackUrl)}`;
+            setAuthUrl(url);
+            setFlowState("idle");
+        });
+        server.on("error", () => {
+            setFlowError("Failed to start local server for authentication.");
+            setFlowState("error");
+        });
+        return () => {
+            server.close();
+        };
+    }, [loginMethod, isMethodSelected]);
+    // Handle Enter key to open browser (when in flow mode and idle)
+    useInput((_, key) => {
+        if (key.return &&
+            loginMethod === "flow" &&
+            flowState === "idle" &&
+            authUrl) {
+            setFlowState("opening");
+            openBrowser(authUrl);
+            setTimeout(() => {
+                setFlowState("waiting");
+            }, 500);
+        }
+    }, {
+        isActive: loginMethod === "flow" && flowState === "idle" && Boolean(authUrl),
+    });
+    return (_jsxs(_Fragment, { children: [isShowLoginMethod && (_jsxs(_Fragment, { children: [_jsx(Text, { children: "Login to the Pulse Editor Platform" }), _jsx(SelectInput, { items: loginMethodItems, onSelect: (item) => {
                             setLoginMethod(item.value);
                         }, isFocused: loginMethod === undefined }), _jsx(Text, { children: " " })] })), isMethodSelected &&
-                loginMethod === 'token' &&
-                (token.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: "Enter your Pulse Editor access token:" }), _jsx(TextInput, { mask: "*", value: tokenInput, onChange: setTokenInput, onSubmit: value => {
+                loginMethod === "token" &&
+                (token.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: "Enter your Pulse Editor access token:" }), _jsx(TextInput, { mask: "*", value: tokenInput, onChange: setTokenInput, onSubmit: (value) => {
                                 if (value.length === 0) {
                                     return;
                                 }
                                 setToken(value);
                             } })] })) : isCheckingAuth ? (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Checking authentication..." })] })) : isAuthenticated ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: "\u2705 You are signed in successfully." }), !isTokenInEnv(cli.flags.stage) &&
-                            getToken(cli.flags.stage) !== token && (_jsxs(_Fragment, { children: [_jsx(Text, { children: "\uD83D\uDFE2 It is recommended to save your access token as an environment variable PE_ACCESS_TOKEN." }), _jsxs(Box, { children: [_jsxs(Text, { children: ["\u26A0\uFE0F (NOT recommended) Or, do you want to save access token to user home directory? (y/n)", ' '] }), _jsx(TextInput, { value: saveTokenInput, onChange: setSaveTokenInput, onSubmit: value => {
+                            getToken(cli.flags.stage) !== token && (_jsxs(_Fragment, { children: [_jsx(Text, { children: "\uD83D\uDFE2 It is recommended to save your access token as an environment variable PE_ACCESS_TOKEN." }), _jsxs(Box, { children: [_jsxs(Text, { children: ["\u26A0\uFE0F (NOT recommended) Or, do you want to save access token to user home directory? (y/n)", " "] }), _jsx(TextInput, { value: saveTokenInput, onChange: setSaveTokenInput, onSubmit: (value) => {
                                                 if (value.length === 0) {
                                                     return;
                                                 }
-                                                if (value === 'y') {
+                                                if (value === "y") {
                                                     saveToken(token, cli.flags.stage);
                                                     setIsTokenSaved(true);
                                                     setTimeout(() => {
@@ -83,5 +167,5 @@ export default function Login({ cli }) {
                                                 else {
                                                     exit();
                                                 }
-                                            } })] })] })), isTokenSaved && (_jsxs(Text, { children: ["Token saved to ", path.join(os.homedir(), '.pulse-editor')] }))] })) : (_jsx(Text, { children: "Authentication error: please enter valid credentials." }))), isMethodSelected && loginMethod === 'flow' && (_jsxs(_Fragment, { children: [_jsx(Text, { children: "(WIP) Open the following URL in your browser:" }), _jsx(Text, { children: "https://pulse-editor.com/login" })] }))] }));
+                                            } })] })] })), isTokenSaved && (_jsxs(Text, { children: ["Token saved to ", path.join(os.homedir(), ".pulse-editor")] }))] })) : (_jsx(Text, { children: "Authentication error: please enter valid credentials." }))), isMethodSelected && loginMethod === "flow" && (_jsx(_Fragment, { children: flowState === "error" ? (_jsxs(Text, { color: "red", children: ["Error: ", flowError] })) : flowState === "success" ? (_jsx(Text, { children: "\u2705 Login successful! Saving credentials..." })) : flowState === "waiting" || flowState === "opening" ? (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Waiting for browser authentication..." })] }), _jsx(Text, { dimColor: true, children: "If the browser did not open, visit: " }), authUrl && _jsx(TerminalLink, { url: authUrl })] })) : authUrl ? (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Text, { children: ["Press ", _jsx(Text, { bold: true, children: "Enter" }), " to open your browser and login:"] }), _jsx(TerminalLink, { url: authUrl, label: "Open browser to login \u2192" })] })) : (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Preparing login..." })] })) }))] }));
 }

package/dist/components/commands/preview.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Text } from 'ink';
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { execa } from 'execa';
 import fs from 'fs';
 import { getDepsBinPath } from '../../lib/execa-utils/deps.js';
 import { cleanDist } from '../../lib/execa-utils/clean.js';
+import { webpackCompile } from '../../lib/webpack/compile.js';
 export default function Preview({ cli }) {
     useEffect(() => {
         async function startPreviewServer() {
@@ -22,9 +22,19 @@ export default function Preview({ cli }) {
                     });
                 }
             }
-            await execa('mkdir "node_modules/.pulse/server"', {
-                shell: true,
-            });
+            // Create node_modules/.pulse/server directory
+            if (!fs.existsSync('node_modules/.pulse/server')) {
+                if (process.platform === 'win32') {
+                    await execa('mkdir node_modules\\.pulse\\server', {
+                        shell: true,
+                    });
+                }
+                else {
+                    await execa('mkdir -p node_modules/.pulse/server', {
+                        shell: true,
+                    });
+                }
+            }
             if (process.platform === 'win32') {
                 await execa('xcopy /E /I node_modules\\@pulse-editor\\cli\\dist\\lib\\server node_modules\\.pulse\\server', {
                     shell: true,
@@ -37,11 +47,28 @@ export default function Preview({ cli }) {
             }
             // Start preview server
             await cleanDist();
-            await execa(getDepsBinPath('concurrently'), [
-                '--prefix',
-                'none',
-                '"npx webpack --mode development --watch"',
-                '"tsx watch --clear-screen=false node_modules/@pulse-editor/cli/dist/lib/server/express.js"',
+            // await execa(
+            // 	getDepsBinPath('concurrently'),
+            // 	[
+            // 		'--prefix',
+            // 		'none',
+            // 		'"npx webpack --mode development --watch"',
+            // 		'"tsx watch --clear-screen=false node_modules/@pulse-editor/cli/dist/lib/server/express.js"',
+            // 	],
+            // 	{
+            // 		stdio: 'inherit',
+            // 		shell: true,
+            // 		env: {
+            // 			NODE_OPTIONS: '--import=tsx',
+            // 			PREVIEW: 'true',
+            // 		},
+            // 	},
+            // );
+            const compiler = await webpackCompile('preview', undefined, true);
+            await execa(getDepsBinPath('tsx'), [
+                'watch',
+                '--clear-screen=false',
+                'node_modules/@pulse-editor/cli/dist/lib/server/express.js',
             ], {
                 stdio: 'inherit',
                 shell: true,
@@ -50,8 +77,20 @@ export default function Preview({ cli }) {
                     PREVIEW: 'true',
                 },
             });
+            // Handle process exit to close webpack compiler
+            process.on('SIGINT', () => {
+                if (compiler && typeof compiler.close === 'function') {
+                    compiler.close(() => {
+                        process.exit();
+                    });
+                }
+                else {
+                    process.exit();
+                }
+            });
         }
+        console.log('🚀 Starting preview server...');
         startPreviewServer();
     }, []);
-    return (_jsx(_Fragment, { children: _jsx(Text, { children: "Starting preview server..." }) }));
+    return _jsx(_Fragment, {});
 }