@onexapis/cli 1.0.4 → 1.1.1

package/dist/cli.mjs

@@ -1,12 +1,16 @@
 #!/usr/bin/env node
+import chalk4 from 'chalk';
+import ora from 'ora';
+import * as esbuild from 'esbuild';
 import path from 'path';
+import fs7 from 'fs/promises';
+import crypto from 'crypto';
+import { glob } from 'glob';
 import os from 'os';
 import dotenv from 'dotenv';
 import fs from 'fs-extra';
 import ejs from 'ejs';
 import { execSync, spawn } from 'child_process';
-import chalk4 from 'chalk';
-import ora from 'ora';
 import { Command } from 'commander';
 import fs2 from 'fs';
 import inquirer from 'inquirer';
@@ -15,62 +19,710 @@ import FormData from 'form-data';
 import fetch from 'node-fetch';
 import { PutObjectCommand, GetObjectCommand, S3Client } from '@aws-sdk/client-s3';
 import AdmZip from 'adm-zip';
+import chokidar from 'chokidar';
+import http from 'http';
+import { WebSocketServer, WebSocket } from 'ws';
 
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
 var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __forAwait = (obj, it, method) => (it = obj[__knownSymbol("asyncIterator")]) ? it.call(obj) : (obj = obj[__knownSymbol("iterator")](), it = {}, method = (key, fn) => (fn = obj[key]) && (it[key] = (arg) => new Promise((yes, no, done) => (arg = fn.call(obj, arg), done = arg.done, Promise.resolve(arg.value).then((value) => yes({ value, done }), no)))), method("next"), method("return"), it);
-var Logger = class {
-  constructor() {
-    this.spinner = null;
-  }
-  success(message) {
-    console.log(chalk4.green("\u2713"), message);
-  }
-  error(message) {
-    console.log(chalk4.red("\u2717"), message);
+var Logger, logger;
+var init_logger = __esm({
+  "src/utils/logger.ts"() {
+    Logger = class {
+      constructor() {
+        this.spinner = null;
+      }
+      success(message) {
+        console.log(chalk4.green("\u2713"), message);
+      }
+      error(message) {
+        console.log(chalk4.red("\u2717"), message);
+      }
+      warning(message) {
+        console.log(chalk4.yellow("\u26A0"), message);
+      }
+      info(message) {
+        console.log(chalk4.blue("\u2139"), message);
+      }
+      log(message) {
+        console.log(message);
+      }
+      startSpinner(message) {
+        this.spinner = ora(message).start();
+      }
+      stopSpinner(success = true, message) {
+        if (!this.spinner) return;
+        if (success) {
+          this.spinner.succeed(message);
+        } else {
+          this.spinner.fail(message);
+        }
+        this.spinner = null;
+      }
+      updateSpinner(message) {
+        if (this.spinner) {
+          this.spinner.text = message;
+        }
+      }
+      newLine() {
+        console.log();
+      }
+      header(message) {
+        console.log();
+        console.log(chalk4.bold.cyan(message));
+        console.log(chalk4.cyan("=".repeat(message.length)));
+        console.log();
+      }
+      section(message) {
+        console.log();
+        console.log(chalk4.bold(message));
+      }
+    };
+    logger = new Logger();
   }
-  warning(message) {
-    console.log(chalk4.yellow("\u26A0"), message);
+});
+
+// src/utils/compile-theme.ts
+var compile_theme_exports = {};
+__export(compile_theme_exports, {
+  compilePreviewRuntime: () => compilePreviewRuntime,
+  compileStandaloneTheme: () => compileStandaloneTheme,
+  compileStandaloneThemeDev: () => compileStandaloneThemeDev,
+  generateManifest: () => generateManifest2
+});
+async function resolveNodeModulesFile(startDir, relativePath) {
+  let dir = startDir;
+  while (true) {
+    const candidate = path.join(dir, "node_modules", relativePath);
+    try {
+      await fs7.access(candidate);
+      return candidate;
+    } catch (e) {
+      const parent = path.dirname(dir);
+      if (parent === dir) break;
+      dir = parent;
+    }
   }
-  info(message) {
-    console.log(chalk4.blue("\u2139"), message);
+  return null;
+}
+function createCoreGlobalPlugin(themePath) {
+  const exportsBySubpath = {};
+  return {
+    name: "core-global",
+    setup(build2) {
+      build2.onResolve({ filter: /^@onexapis\/core(\/.*)?$/ }, (args) => ({
+        path: args.path,
+        namespace: "core-global"
+      }));
+      build2.onLoad({ filter: /.*/, namespace: "core-global" }, async (args) => {
+        const match = args.path.match(/^@onexapis\/core(\/(.+))?$/);
+        const subpath = (match == null ? void 0 : match[2]) || "";
+        const moduleAccess = subpath ? `['${subpath}']` : "";
+        let namedExports = [];
+        const cacheKey = subpath || "__root__";
+        if (exportsBySubpath[cacheKey]) {
+          namedExports = exportsBySubpath[cacheKey];
+        } else {
+          const distFileName = subpath ? `${subpath}.mjs` : "index.mjs";
+          const distPath = await resolveNodeModulesFile(
+            themePath,
+            path.join("@onexapis", "core", "dist", distFileName)
+          );
+          try {
+            if (!distPath) throw new Error("not found");
+            const distContent = await fs7.readFile(distPath, "utf-8");
+            const exportMatches = distContent.matchAll(/export\s*\{([^}]+)\}/g);
+            for (const m of exportMatches) {
+              const names = m[1].split(",").map((n) => {
+                const parts = n.trim().split(/\s+as\s+/);
+                return (parts[1] || parts[0]).trim();
+              }).filter((n) => n.length > 0);
+              namedExports.push(...names);
+            }
+            namedExports = [...new Set(namedExports)];
+          } catch (e) {
+          }
+          exportsBySubpath[cacheKey] = namedExports;
+        }
+        const namedExportLines = namedExports.length > 0 ? `
+export const {
+  ${namedExports.join(",\n  ")}
+} = _module;
+` : "";
+        return {
+          contents: `
+if (!globalThis.__ONEX_CORE__) {
+  throw new Error('[Theme Bundle] @onexapis/core not initialized. Ensure globalThis.__ONEX_CORE__ is set before loading theme.');
+}
+
+const _module = globalThis.__ONEX_CORE__${moduleAccess};
+if (!_module) {
+  const subpath = ${subpath ? `'${subpath}'` : "null"};
+  const modulePath = subpath ? '/' + subpath : '';
+  const moduleKey = subpath ? '["' + subpath + '"]' : '';
+  throw new Error('[Theme Bundle] @onexapis/core' + modulePath + ' not available in globalThis.__ONEX_CORE__' + moduleKey);
+}
+
+export default _module;
+${namedExportLines}
+            `.trim(),
+          loader: "js"
+        };
+      });
+    }
+  };
+}
+async function contentHashEntry(outputDir) {
+  const entryPath = path.join(outputDir, "bundle-entry.js");
+  const mapPath = path.join(outputDir, "bundle-entry.js.map");
+  const oldFiles = await glob("bundle-entry-*.js*", { cwd: outputDir });
+  for (const f of oldFiles) {
+    await fs7.unlink(path.join(outputDir, f));
   }
-  log(message) {
-    console.log(message);
+  let entryContent;
+  try {
+    entryContent = await fs7.readFile(entryPath, "utf-8");
+  } catch (e) {
+    const indexPath = path.join(outputDir, "index.js");
+    try {
+      entryContent = await fs7.readFile(indexPath, "utf-8");
+    } catch (e2) {
+      logger.warning("No entry file found in output, skipping content hash");
+      return;
+    }
+    const hash2 = crypto.createHash("sha256").update(entryContent).digest("hex").slice(0, 8);
+    const hashedName2 = `bundle-entry-${hash2}.js`;
+    const indexMapPath = path.join(outputDir, "index.js.map");
+    const hashedMapName2 = `bundle-entry-${hash2}.js.map`;
+    entryContent = entryContent.replace(
+      /\/\/# sourceMappingURL=index\.js\.map/,
+      `//# sourceMappingURL=${hashedMapName2}`
+    );
+    await fs7.writeFile(path.join(outputDir, hashedName2), entryContent);
+    await fs7.unlink(indexPath);
+    try {
+      await fs7.access(indexMapPath);
+      await fs7.rename(indexMapPath, path.join(outputDir, hashedMapName2));
+    } catch (e2) {
+    }
+    logger.info(`Entry hashed: ${hashedName2}`);
+    return;
   }
-  startSpinner(message) {
-    this.spinner = ora(message).start();
+  const hash = crypto.createHash("sha256").update(entryContent).digest("hex").slice(0, 8);
+  const hashedName = `bundle-entry-${hash}.js`;
+  const hashedMapName = `bundle-entry-${hash}.js.map`;
+  entryContent = entryContent.replace(
+    /\/\/# sourceMappingURL=bundle-entry\.js\.map/,
+    `//# sourceMappingURL=${hashedMapName}`
+  );
+  await fs7.writeFile(path.join(outputDir, hashedName), entryContent);
+  await fs7.unlink(entryPath);
+  try {
+    await fs7.access(mapPath);
+    await fs7.rename(mapPath, path.join(outputDir, hashedMapName));
+  } catch (e) {
   }
-  stopSpinner(success = true, message) {
-    if (!this.spinner) return;
-    if (success) {
-      this.spinner.succeed(message);
-    } else {
-      this.spinner.fail(message);
+  logger.info(`Entry hashed: ${hashedName}`);
+}
+async function generateManifest2(themeName, themePath, outputDir) {
+  let version = "1.0.0";
+  let themeId = themeName;
+  try {
+    const pkgContent = await fs7.readFile(
+      path.join(themePath, "package.json"),
+      "utf-8"
+    );
+    const pkg = JSON.parse(pkgContent);
+    version = pkg.version || version;
+    if (pkg.name) {
+      themeId = pkg.name.replace(/^@onex-themes\//, "");
     }
-    this.spinner = null;
+  } catch (e) {
   }
-  updateSpinner(message) {
-    if (this.spinner) {
-      this.spinner.text = message;
+  const [sectionFiles, blockFiles, schemaFiles] = await Promise.all([
+    glob("sections/**/index.ts", { cwd: themePath }),
+    glob("blocks/**/index.ts", { cwd: themePath }),
+    glob("**/*.schema.ts", { cwd: themePath })
+  ]);
+  let hasThemeConfig = false;
+  try {
+    await fs7.access(path.join(themePath, "theme.config.ts"));
+    hasThemeConfig = true;
+  } catch (e) {
+  }
+  const allFiles = await glob("**/*", { cwd: outputDir, nodir: true });
+  const jsFiles = allFiles.filter((f) => f.endsWith(".js"));
+  const cssFiles = allFiles.filter((f) => f.endsWith(".css"));
+  const entryFile = jsFiles.find((f) => f.includes("bundle-entry")) || "bundle-entry.js";
+  const manifest = {
+    themeId,
+    version,
+    name: themeId.charAt(0).toUpperCase() + themeId.slice(1),
+    compiledAt: (/* @__PURE__ */ new Date()).toISOString(),
+    format: "esm",
+    platform: "browser",
+    target: "es2020",
+    counts: {
+      sections: sectionFiles.length,
+      blocks: blockFiles.length,
+      schemas: schemaFiles.length
+    },
+    output: {
+      entry: entryFile,
+      chunks: jsFiles.filter((f) => f !== entryFile && !f.endsWith(".map")),
+      assets: allFiles.filter(
+        (f) => [".png", ".jpg", ".jpeg", ".svg", ".gif", ".webp"].some(
+          (ext) => f.endsWith(ext)
+        )
+      ),
+      stylesheets: cssFiles
+    },
+    external: ["react", "react-dom", "@onexapis/core"],
+    source: {
+      sections: sectionFiles,
+      blocks: blockFiles,
+      schemas: schemaFiles,
+      hasThemeConfig
     }
+  };
+  await fs7.writeFile(
+    path.join(outputDir, "manifest.json"),
+    JSON.stringify(manifest, null, 2)
+  );
+}
+async function compileStandaloneTheme(themePath, themeName) {
+  const outputDir = path.join(themePath, "dist");
+  const bundleEntry = path.join(themePath, "bundle-entry.ts");
+  const indexEntry = path.join(themePath, "index.ts");
+  let entryPoint = indexEntry;
+  try {
+    await fs7.access(bundleEntry);
+    entryPoint = bundleEntry;
+  } catch (e) {
+  }
+  const shimPath = path.join(outputDir, ".process-shim.js");
+  await fs7.mkdir(outputDir, { recursive: true });
+  await fs7.writeFile(shimPath, PROCESS_SHIM);
+  const buildOptions = {
+    entryPoints: [entryPoint],
+    bundle: true,
+    platform: "browser",
+    format: "esm",
+    outdir: outputDir,
+    splitting: false,
+    chunkNames: "[name]-[hash]",
+    banner: {
+      js: '"use client";'
+    },
+    plugins: [reactGlobalPlugin, createCoreGlobalPlugin(themePath)],
+    external: [],
+    alias: {
+      events: "events/",
+      buffer: "buffer/"
+    },
+    inject: [shimPath],
+    define: {
+      "process.env.NODE_ENV": JSON.stringify("production"),
+      global: "globalThis"
+    },
+    minify: true,
+    sourcemap: true,
+    logLevel: "warning",
+    target: "es2020",
+    jsx: "automatic",
+    jsxImportSource: "react",
+    loader: {
+      ".tsx": "tsx",
+      ".ts": "ts",
+      ".jpg": "file",
+      ".jpeg": "file",
+      ".png": "file",
+      ".gif": "file",
+      ".svg": "file",
+      ".webp": "file"
+    },
+    assetNames: "assets/[name]-[hash]",
+    publicPath: "./",
+    metafile: true
+  };
+  try {
+    const result = await esbuild.build(buildOptions);
+    try {
+      await fs7.unlink(shimPath);
+    } catch (e) {
+    }
+    await contentHashEntry(outputDir);
+    await generateManifest2(themeName, themePath, outputDir);
+    if (result.metafile) {
+      const outputs = result.metafile.outputs;
+      let totalSize = 0;
+      for (const output of Object.values(outputs)) {
+        totalSize += output.bytes;
+      }
+      const totalKB = (totalSize / 1024).toFixed(2);
+      logger.info(`Bundle size: ${totalKB} KB`);
+    }
+    return true;
+  } catch (error) {
+    try {
+      await fs7.unlink(shimPath);
+    } catch (e) {
+    }
+    logger.error(`esbuild compilation failed: ${error}`);
+    return false;
   }
-  newLine() {
-    console.log();
+}
+async function compileStandaloneThemeDev(themePath, themeName) {
+  const outputDir = path.join(themePath, "dist");
+  const bundleEntry = path.join(themePath, "bundle-entry.ts");
+  const indexEntry = path.join(themePath, "index.ts");
+  let entryPoint = indexEntry;
+  try {
+    await fs7.access(bundleEntry);
+    entryPoint = bundleEntry;
+  } catch (e) {
+  }
+  const shimPath = path.join(outputDir, ".process-shim.js");
+  await fs7.mkdir(outputDir, { recursive: true });
+  await fs7.writeFile(shimPath, PROCESS_SHIM);
+  const buildOptions = {
+    entryPoints: [entryPoint],
+    bundle: true,
+    platform: "browser",
+    format: "esm",
+    outdir: outputDir,
+    splitting: false,
+    banner: {
+      js: '"use client";'
+    },
+    plugins: [reactGlobalPlugin, createCoreGlobalPlugin(themePath)],
+    external: [],
+    alias: {
+      events: "events/",
+      buffer: "buffer/"
+    },
+    inject: [shimPath],
+    define: {
+      "process.env.NODE_ENV": JSON.stringify("development"),
+      global: "globalThis"
+    },
+    minify: false,
+    sourcemap: true,
+    logLevel: "warning",
+    target: "es2020",
+    jsx: "automatic",
+    jsxImportSource: "react",
+    loader: {
+      ".tsx": "tsx",
+      ".ts": "ts",
+      ".jpg": "file",
+      ".jpeg": "file",
+      ".png": "file",
+      ".gif": "file",
+      ".svg": "file",
+      ".webp": "file"
+    },
+    assetNames: "assets/[name]-[hash]",
+    publicPath: "./",
+    metafile: true
+  };
+  const context2 = await esbuild.context(buildOptions);
+  await context2.rebuild();
+  await generateManifest2(themeName, themePath, outputDir);
+  return { context: context2, outputDir };
+}
+async function compilePreviewRuntime(themePath) {
+  const outputDir = path.join(themePath, "dist");
+  await fs7.mkdir(outputDir, { recursive: true });
+  const outputPath = path.join(outputDir, "preview-runtime.js");
+  const locations = [
+    path.join(__dirname, "..", "preview", "preview-app.tsx"),
+    path.join(__dirname, "preview", "preview-app.tsx"),
+    path.join(__dirname, "..", "..", "src", "preview", "preview-app.tsx")
+  ];
+  let previewEntryPath = null;
+  for (const loc of locations) {
+    try {
+      await fs7.access(loc);
+      previewEntryPath = loc;
+      break;
+    } catch (e) {
+    }
   }
-  header(message) {
-    console.log();
-    console.log(chalk4.bold.cyan(message));
-    console.log(chalk4.cyan("=".repeat(message.length)));
-    console.log();
+  if (!previewEntryPath) {
+    throw new Error(
+      `Preview app source not found. Searched:
+${locations.join("\n")}`
+    );
   }
-  section(message) {
-    console.log();
-    console.log(chalk4.bold(message));
+  const serverStubPlugin = {
+    name: "server-stub",
+    setup(build2) {
+      build2.onResolve({ filter: /^server-only$/ }, () => ({
+        path: "server-only",
+        namespace: "server-stub"
+      }));
+      build2.onLoad({ filter: /.*/, namespace: "server-stub" }, () => ({
+        contents: "// server-only stub for browser",
+        loader: "js"
+      }));
+      const nodeBuiltins = [
+        "fs",
+        "fs/promises",
+        "path",
+        "os",
+        "crypto",
+        "stream",
+        "url",
+        "http",
+        "https",
+        "net",
+        "tls",
+        "child_process",
+        "util",
+        "events",
+        "buffer",
+        "querystring",
+        "zlib"
+      ];
+      for (const mod of nodeBuiltins) {
+        build2.onResolve({ filter: new RegExp(`^${mod.replace("/", "\\/")}$`) }, () => ({
+          path: mod,
+          namespace: "node-stub"
+        }));
+      }
+      build2.onLoad({ filter: /.*/, namespace: "node-stub" }, (args) => {
+        const stubs = {
+          events: "export class EventEmitter { on(){return this} off(){return this} emit(){return false} addListener(){return this} removeListener(){return this} } export default { EventEmitter };",
+          path: "export function join(){return ''} export function resolve(){return ''} export function dirname(){return ''} export function basename(){return ''} export function extname(){return ''} export default {};",
+          fs: "export const promises = {}; export function readFileSync(){return ''} export function existsSync(){return false} export default {};"
+        };
+        return {
+          contents: stubs[args.path] || "export default {};",
+          loader: "js"
+        };
+      });
+      build2.onResolve({ filter: /^lucide-react/ }, async (args) => {
+        var _a;
+        if ((_a = args.pluginData) == null ? void 0 : _a.skipStub) return void 0;
+        try {
+          const result = await build2.resolve(args.path, {
+            kind: args.kind,
+            resolveDir: args.resolveDir,
+            importer: args.importer,
+            namespace: "file",
+            pluginData: { skipStub: true }
+          });
+          if (!result.errors.length) return result;
+        } catch (e) {
+        }
+        return { path: args.path, namespace: "lucide-stub" };
+      });
+      build2.onLoad({ filter: /.*/, namespace: "lucide-stub" }, () => ({
+        // Provide all icon names used by @onexapis/core as no-op SVG stub components
+        contents: `
+const icon = (props) => null;
+export { icon as Check, icon as ChevronDown, icon as XCircle, icon as AlertTriangle };
+export { icon as CheckCircle, icon as Info, icon as X, icon as XIcon };
+export { icon as CircleIcon, icon as Star, icon as ShoppingCart };
+export { icon as ChevronRight, icon as ChevronLeft, icon as ChevronUp };
+export { icon as Search, icon as Menu, icon as Heart, icon as User };
+export { icon as Trash2, icon as Plus, icon as Minus, icon as Eye, icon as EyeOff };
+export { icon as ArrowRight, icon as ArrowLeft, icon as ExternalLink, icon as Mail };
+export { icon as Phone, icon as MapPin, icon as Calendar, icon as Clock };
+export { icon as Facebook, icon as Twitter, icon as Instagram, icon as Linkedin, icon as Github };
+export default new Proxy({}, { get: (_, name) => name === '__esModule' ? true : icon });
+        `.trim(),
+        loader: "jsx"
+      }));
+      build2.onResolve({ filter: /^framer-motion/ }, async (args) => {
+        var _a;
+        if ((_a = args.pluginData) == null ? void 0 : _a.skipStub) return void 0;
+        try {
+          const result = await build2.resolve(args.path, {
+            kind: args.kind,
+            resolveDir: args.resolveDir,
+            importer: args.importer,
+            namespace: "file",
+            pluginData: { skipStub: true }
+          });
+          if (!result.errors.length) return result;
+        } catch (e) {
+        }
+        return { path: args.path, namespace: "motion-stub" };
+      });
+      build2.onLoad({ filter: /.*/, namespace: "motion-stub" }, () => ({
+        contents: `
+const stub = (props) => props.children || null;
+const handler = { get: (_, name) => name === '__esModule' ? true : stub };
+export const motion = new Proxy({}, handler);
+export const AnimatePresence = stub;
+export default { motion, AnimatePresence };
+        `.trim(),
+        loader: "jsx"
+      }));
+    }
+  };
+  await esbuild.build({
+    entryPoints: [previewEntryPath],
+    bundle: true,
+    platform: "browser",
+    format: "esm",
+    outfile: outputPath,
+    // Bundle React + core INTO the output (NOT externalized)
+    external: [],
+    plugins: [serverStubPlugin],
+    minify: false,
+    sourcemap: true,
+    target: "es2020",
+    jsx: "automatic",
+    jsxImportSource: "react",
+    define: {
+      "process.env.NODE_ENV": JSON.stringify("development"),
+      global: "globalThis"
+    },
+    loader: { ".tsx": "tsx", ".ts": "ts" },
+    // Force CJS resolution to avoid sideEffects:false dropping ESM chunk imports
+    conditions: ["require", "default"],
+    mainFields: ["main"],
+    logOverride: {
+      "ignored-bare-import": "silent"
+    }
+  });
+  return outputPath;
+}
+var PROCESS_SHIM, reactGlobalPlugin;
+var init_compile_theme = __esm({
+  "src/utils/compile-theme.ts"() {
+    init_logger();
+    PROCESS_SHIM = `
+if (typeof process === "undefined") {
+  globalThis.process = {
+    env: {},
+    browser: true,
+  };
+}
+`;
+    reactGlobalPlugin = {
+      name: "react-global",
+      setup(build2) {
+        build2.onResolve({ filter: /^react$/ }, () => ({
+          path: "react-external",
+          namespace: "react-global"
+        }));
+        build2.onResolve({ filter: /^react-dom$/ }, () => ({
+          path: "react-dom-external",
+          namespace: "react-global"
+        }));
+        build2.onResolve({ filter: /^react\/jsx-runtime$/ }, () => ({
+          path: "react-jsx-runtime-external",
+          namespace: "react-global"
+        }));
+        build2.onLoad({ filter: /.*/, namespace: "react-global" }, (args) => {
+          if (args.path === "react-external") {
+            return {
+              contents: `
+if (!globalThis.__ONEX_REACT__) {
+  throw new Error('[Theme Bundle] React not initialized. Ensure globalThis.__ONEX_REACT__ is set before loading theme.');
+}
+
+const React = globalThis.__ONEX_REACT__;
+export default React;
+
+export const {
+  useState,
+  useEffect,
+  useContext,
+  useReducer,
+  useCallback,
+  useMemo,
+  useRef,
+  useImperativeHandle,
+  useLayoutEffect,
+  useDebugValue,
+  useDeferredValue,
+  useTransition,
+  useId,
+  useSyncExternalStore,
+  useInsertionEffect,
+  createContext,
+  forwardRef,
+  lazy,
+  memo,
+  startTransition,
+  createElement,
+  cloneElement,
+  isValidElement,
+  Children,
+  Fragment,
+  Profiler,
+  StrictMode,
+  Suspense,
+  Component,
+  PureComponent,
+  useActionState,
+  use,
+} = React;
+          `.trim(),
+              loader: "js"
+            };
+          }
+          if (args.path === "react-dom-external") {
+            return {
+              contents: `
+if (!globalThis.__ONEX_REACT_DOM__) {
+  throw new Error('[Theme Bundle] ReactDOM not initialized. Ensure globalThis.__ONEX_REACT_DOM__ is set before loading theme.');
+}
+
+const ReactDOM = globalThis.__ONEX_REACT_DOM__;
+export default ReactDOM;
+
+export const {
+  createRoot,
+  hydrateRoot,
+  flushSync,
+  createPortal,
+  findDOMNode,
+  render,
+  hydrate,
+  unmountComponentAtNode,
+} = ReactDOM;
+          `.trim(),
+              loader: "js"
+            };
+          }
+          if (args.path === "react-jsx-runtime-external") {
+            return {
+              contents: `
+if (!globalThis.__ONEX_JSX_RUNTIME__) {
+  throw new Error('[Theme Bundle] React JSX runtime not initialized. Ensure globalThis.__ONEX_JSX_RUNTIME__ is set before loading theme.');
+}
+const _jsxRuntime = globalThis.__ONEX_JSX_RUNTIME__;
+export const jsx = _jsxRuntime.jsx;
+export const jsxs = _jsxRuntime.jsxs;
+export const Fragment = _jsxRuntime.Fragment;
+          `.trim(),
+              loader: "js"
+            };
+          }
+          return null;
+        });
+      }
+    };
   }
-};
-var logger = new Logger();
+});
 
 // src/utils/file-helpers.ts
+init_logger();
 async function renderTemplate(templatePath, data) {
   const template = await fs.readFile(templatePath, "utf-8");
   return ejs.render(template, data);
@@ -156,8 +808,10 @@ function getProjectRoot() {
 }
 function getThemesDir() {
   const root = getProjectRoot();
-  if (fs.existsSync(path.join(root, "themes"))) return path.join(root, "themes");
-  if (fs.existsSync(path.join(root, "src/themes"))) return path.join(root, "src/themes");
+  if (fs.existsSync(path.join(root, "themes")))
+    return path.join(root, "themes");
+  if (fs.existsSync(path.join(root, "src/themes")))
+    return path.join(root, "src/themes");
   return path.dirname(root);
 }
 function getFeaturesDir() {
@@ -215,6 +869,9 @@ async function installDependencies(projectPath, packageManager = "npm") {
   });
 }
 
+// src/commands/init.ts
+init_logger();
+
 // src/utils/validators.ts
 function validateName(name) {
   return /^[a-z0-9]+(-[a-z0-9]+)*$/.test(name);
@@ -656,6 +1313,9 @@ export const homePageConfig: PageConfig = {
 };
 `;
 }
+
+// src/commands/create-section.ts
+init_logger();
 async function createSectionCommand(name, options) {
   logger.header("Create New Section");
   ensureOneXProject();
@@ -895,6 +1555,9 @@ export { ${data.sectionName}Schema } from "./${data.sectionName}.schema";
 ${hasTemplate ? `export { ${data.sectionNamePascal}Default } from "./${data.sectionName}-default";` : ""}
 `;
 }
+
+// src/commands/create-block.ts
+init_logger();
 async function createBlockCommand(name, options) {
   logger.header("Create New Block");
   ensureOneXProject();
@@ -1119,6 +1782,9 @@ export { ${data.blockName}Definition } from "./${data.blockName}.schema";
 export { ${data.blockNamePascal} } from "./${data.blockName}";
 `;
 }
+
+// src/commands/create-component.ts
+init_logger();
 async function createComponentCommand(name, options) {
   logger.header("Create New Component");
   ensureOneXProject();
@@ -1323,6 +1989,9 @@ export { ${data.componentName}Definition } from "./${data.componentName}.schema"
 export { ${data.componentNamePascal} } from "./${data.componentName}";
 `;
 }
+
+// src/commands/list.ts
+init_logger();
 async function listCommand(options) {
   logger.header("OneX Project Inventory");
   ensureOneXProject();
@@ -1454,6 +2123,9 @@ async function listThemesInfo() {
   }
   logger.newLine();
 }
+
+// src/commands/validate.ts
+init_logger();
 async function validateCommand(options) {
   logger.header("Validate Theme");
   ensureOneXProject();
@@ -1466,7 +2138,11 @@ async function validateCommand(options) {
     }
     themeToValidate = options.theme;
   } else {
-    const isThemeDir = ["theme.config.ts", "bundle-entry.ts", "manifest.ts"].some((f) => fs.existsSync(path.join(process.cwd(), f)));
+    const isThemeDir = [
+      "theme.config.ts",
+      "bundle-entry.ts",
+      "manifest.ts"
+    ].some((f) => fs.existsSync(path.join(process.cwd(), f)));
     if (isThemeDir) {
       themeToValidate = path.basename(process.cwd());
       logger.info(`Validating current theme: ${themeToValidate}`);
@@ -1479,15 +2155,21 @@ async function validateCommand(options) {
   }
   const themePath = path.join(getThemesDir(), themeToValidate);
   logger.startSpinner("Running validation checks...");
-  const manifestPath = path.join(themePath, "manifest.ts");
-  if (!fs.existsSync(manifestPath)) {
+  const entryFiles = ["manifest.ts", "theme.config.ts", "bundle-entry.ts"];
+  const foundEntry = entryFiles.find(
+    (f) => fs.existsSync(path.join(themePath, f))
+  );
+  if (!foundEntry) {
     issues.push({
       type: "error",
-      file: "manifest.ts",
-      message: "Manifest file not found"
+      file: "manifest.ts / theme.config.ts / bundle-entry.ts",
+      message: "No theme entry file found (need at least one of: manifest.ts, theme.config.ts, bundle-entry.ts)"
     });
-  } else {
-    const manifestContent = fs.readFileSync(manifestPath, "utf-8");
+  } else if (foundEntry === "manifest.ts") {
+    const manifestContent = fs.readFileSync(
+      path.join(themePath, foundEntry),
+      "utf-8"
+    );
     if (!manifestContent.includes("export const") && !manifestContent.includes("export default") && !manifestContent.includes("export interface")) {
       issues.push({
         type: "error",
@@ -1623,7 +2305,11 @@ async function validateCommand(options) {
     }
   }
 }
+
+// src/commands/build.ts
+init_logger();
 async function buildCommand(options) {
+  var _a;
   logger.header("Build Theme");
   let themePath;
   let themeName;
@@ -1644,7 +2330,11 @@ async function buildCommand(options) {
       process.exit(1);
     }
   } else {
-    const isThemeDir = ["theme.config.ts", "bundle-entry.ts", "manifest.ts"].some((f) => fs.existsSync(path.join(process.cwd(), f)));
+    const isThemeDir = [
+      "theme.config.ts",
+      "bundle-entry.ts",
+      "manifest.ts"
+    ].some((f) => fs.existsSync(path.join(process.cwd(), f)));
     if (isThemeDir) {
       themePath = process.cwd();
       themeName = path.basename(themePath);
@@ -1688,11 +2378,20 @@ async function buildCommand(options) {
     process.exit(1);
   }
   logger.stopSpinner(true, "Lint passed");
-  const buildArgs = options.watch ? ["build", "--watch"] : ["build"];
+  const pkgJson = fs.readJsonSync(packageJsonPath);
+  const buildScript = ((_a = pkgJson.scripts) == null ? void 0 : _a.build) || "";
+  const isRecursive = buildScript.includes("onex build") || buildScript.includes("onex-cli build");
   logger.startSpinner(
     options.watch ? "Building (watch mode)..." : "Building..."
   );
-  const buildSuccess = await runCommand("pnpm", buildArgs, themePath);
+  let buildSuccess;
+  if (isRecursive) {
+    const { compileStandaloneTheme: compileStandaloneTheme2 } = await Promise.resolve().then(() => (init_compile_theme(), compile_theme_exports));
+    buildSuccess = await compileStandaloneTheme2(themePath, themeName);
+  } else {
+    const buildArgs = options.watch ? ["build", "--watch"] : ["build"];
+    buildSuccess = await runCommand("pnpm", buildArgs, themePath);
+  }
   if (!buildSuccess && !options.watch) {
     logger.stopSpinner(false, "Build failed");
     process.exit(1);
@@ -1733,6 +2432,9 @@ function runCommand(command, args, cwd) {
     });
   });
 }
+
+// src/commands/package.ts
+init_logger();
 async function packageCommand(options) {
   logger.header("Package Theme");
   ensureOneXProject();
@@ -1746,7 +2448,11 @@ async function packageCommand(options) {
       process.exit(1);
     }
   } else {
-    const isThemeDir = ["theme.config.ts", "bundle-entry.ts", "manifest.ts"].some((f) => fs.existsSync(path.join(process.cwd(), f)));
+    const isThemeDir = [
+      "theme.config.ts",
+      "bundle-entry.ts",
+      "manifest.ts"
+    ].some((f) => fs.existsSync(path.join(process.cwd(), f)));
     if (isThemeDir) {
       themePath = process.cwd();
       themeName = path.basename(themePath);
@@ -1770,10 +2476,9 @@ async function packageCommand(options) {
   logger.newLine();
   const compiledThemePath = path.join(
     process.cwd(),
-    "apps",
-    "api-server",
-    "compiled-themes",
-    `${themeName}@${version}`
+    "themes",
+    themeName,
+    "dist"
   );
   if (!options.skipBuild) {
     logger.section("Step 1: Compile Theme");
@@ -1871,6 +2576,9 @@ async function createZipArchive(compiledThemePath, outputPath) {
     archive.finalize();
   });
 }
+
+// src/commands/deploy.ts
+init_logger();
 async function deployCommand(options) {
   logger.header("Deploy Theme");
   ensureOneXProject();
@@ -1973,6 +2681,9 @@ async function deployCommand(options) {
     process.exit(1);
   }
 }
+
+// src/commands/upload.ts
+init_logger();
 function getS3Client() {
   const adapterMode = (process.env.ADAPTER_MODE || "aws").trim().toLowerCase();
   if (adapterMode === "vps") {
@@ -2012,21 +2723,12 @@ function getBucketName(env) {
   return environment === "production" ? "onex-themes-prod" : "onex-themes-staging";
 }
 async function findCompiledThemeDir(themeId, version) {
-  const searchPaths = [
-    path.resolve(process.cwd(), "dist"),
-    path.resolve(
-      process.cwd(),
-      `../../apps/api-server/compiled-themes/${themeId}@${version}`
-    ),
-    path.resolve(
-      process.cwd(),
-      `../api-server/compiled-themes/${themeId}@${version}`
-    )
-  ];
+  const searchPaths = [path.resolve(process.cwd(), "dist")];
   for (const dir of searchPaths) {
     if (await fs.pathExists(dir)) {
-      const manifestPath = path.join(dir, "manifest.json");
-      if (await fs.pathExists(manifestPath)) {
+      const hasManifest = await fs.pathExists(path.join(dir, "manifest.json"));
+      const hasThemeEntry = await fs.pathExists(path.join(dir, "bundle-entry.js")) || await fs.pathExists(path.join(dir, "theme.config.js")) || await fs.pathExists(path.join(dir, "index.js"));
+      if (hasManifest || hasThemeEntry) {
         return dir;
       }
     }
@@ -2129,13 +2831,8 @@ async function uploadCommand(options) {
           `Compiled theme not found for ${themeId}@${version}. Run 'onex build' first.`
         )
       );
-      logger.info(
-        chalk4.gray(
-          `Expected locations:
-  - ./dist/
-  - ../../apps/api-server/compiled-themes/${themeId}@${version}/`
-        )
-      );
+      logger.info(chalk4.gray(`Expected location:
+  - ./dist/`));
       process.exit(1);
     }
     spinner.succeed(`Found compiled theme at: ${compiledDir}`);
@@ -2242,9 +2939,7 @@ async function uploadCommand(options) {
     );
     console.log(chalk4.cyan("   Bucket:  ") + chalk4.white(bucket));
     console.log(
-      chalk4.cyan("   Files:   ") + chalk4.white(
-        `bundle.zip${sourceUploaded ? " + source.zip" : ""}`
-      )
+      chalk4.cyan("   Files:   ") + chalk4.white(`bundle.zip${sourceUploaded ? " + source.zip" : ""}`)
     );
     console.log(
       chalk4.cyan("   Path:    ") + chalk4.gray(`s3://${bucket}/themes/${themeId}/${version}/`)
@@ -2256,6 +2951,9 @@ async function uploadCommand(options) {
     process.exit(1);
   }
 }
+
+// src/commands/download.ts
+init_logger();
 function getS3Client2() {
   const adapterMode = (process.env.ADAPTER_MODE || "aws").trim().toLowerCase();
   if (adapterMode === "vps") {
@@ -2403,11 +3101,7 @@ function showDownloadFailureHelp(themeId, bucket) {
   );
   console.log();
   console.log(chalk4.white("4. Verify theme exists in S3:"));
-  console.log(
-    chalk4.gray(
-      `   aws s3 ls s3://${bucket}/themes/${themeId}/`
-    )
-  );
+  console.log(chalk4.gray(`   aws s3 ls s3://${bucket}/themes/${themeId}/`));
   console.log();
 }
 async function downloadCommand(options) {
@@ -2483,6 +3177,9 @@ async function downloadCommand(options) {
     process.exit(1);
   }
 }
+
+// src/commands/clone.ts
+init_logger();
 function getS3Client3() {
   const adapterMode = (process.env.ADAPTER_MODE || "aws").trim().toLowerCase();
   if (adapterMode === "vps") {
@@ -2586,17 +3283,100 @@ function runInstall(cwd) {
     proc.on("error", () => resolve(false));
   });
 }
+async function promptThemeName(originalName) {
+  const { default: inquirer5 } = await import('inquirer');
+  const { themeName } = await inquirer5.prompt([
+    {
+      type: "input",
+      name: "themeName",
+      message: "New theme name (kebab-case):",
+      default: `my-${originalName}`,
+      validate: (input) => {
+        if (!/^[a-z][a-z0-9-]*$/.test(input)) {
+          return "Theme name must be kebab-case (lowercase letters, numbers, hyphens)";
+        }
+        if (input === originalName) {
+          return `Name must differ from the original theme "${originalName}"`;
+        }
+        return true;
+      }
+    }
+  ]);
+  return themeName;
+}
+async function renameTheme(themeDir, oldName, newName) {
+  const oldPrefix = `${oldName}-`;
+  const newPrefix = `${newName}-`;
+  const newDisplayName = newName.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+  const pkgPath = path.join(themeDir, "package.json");
+  if (await fs.pathExists(pkgPath)) {
+    const pkg = await fs.readJson(pkgPath);
+    pkg.name = `@onex-themes/${newName}`;
+    if (pkg.description) {
+      pkg.description = pkg.description.replace(
+        new RegExp(oldName, "gi"),
+        newDisplayName
+      );
+    }
+    pkg.version = "1.0.0";
+    await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+  }
+  const configPath = path.join(themeDir, "theme.config.ts");
+  if (await fs.pathExists(configPath)) {
+    let content = await fs.readFile(configPath, "utf-8");
+    content = content.replace(/id:\s*"[^"]*"/, `id: "${newName}"`);
+    content = content.replace(
+      /name:\s*"[^"]*Theme"/,
+      `name: "${newDisplayName} Theme"`
+    );
+    await fs.writeFile(configPath, content);
+  }
+  const layoutPath = path.join(themeDir, "theme.layout.ts");
+  if (await fs.pathExists(layoutPath)) {
+    let content = await fs.readFile(layoutPath, "utf-8");
+    content = content.replace(/id:\s*"[^"]*"/, `id: "${newName}"`);
+    content = content.replace(
+      /name:\s*"[^"]*Theme"/,
+      `name: "${newDisplayName} Theme"`
+    );
+    await fs.writeFile(layoutPath, content);
+  }
+  const oldDisplayName = oldName.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+  const tsFiles = await glob("**/*.ts", { cwd: themeDir, nodir: true });
+  for (const file of tsFiles) {
+    const filePath = path.join(themeDir, file);
+    let content = await fs.readFile(filePath, "utf-8");
+    const original = content;
+    content = content.replace(
+      new RegExp(`"${oldPrefix}`, "g"),
+      `"${newPrefix}`
+    );
+    content = content.replace(
+      new RegExp(`themeId:\\s*"${oldName}"`, "g"),
+      `themeId: "${newName}"`
+    );
+    content = content.replace(
+      new RegExp(`${oldDisplayName} Theme`, "g"),
+      `${newDisplayName} Theme`
+    );
+    if (content !== original) {
+      await fs.writeFile(filePath, content);
+    }
+  }
+}
 async function cloneCommand(themeName, options) {
   logger.header("Clone Theme Source");
+  let newName = options.name;
+  if (!newName) {
+    newName = await promptThemeName(themeName);
+  }
   const spinner = ora("Initializing clone...").start();
   try {
     const bucket = options.bucket || getBucketName3(options.environment);
-    const outputDir = options.output || path.resolve(process.cwd(), themeName);
+    const outputDir = options.output || path.resolve(process.cwd(), newName);
     const s3Client = getS3Client3();
     if (await fs.pathExists(outputDir)) {
-      spinner.fail(
-        chalk4.red(`Directory already exists: ${outputDir}`)
-      );
+      spinner.fail(chalk4.red(`Directory already exists: ${outputDir}`));
       logger.info(
         chalk4.gray(
           "Use -o to specify a different output directory, or remove the existing directory."
@@ -2610,9 +3390,7 @@ async function cloneCommand(themeName, options) {
       version = await resolveLatestVersion2(s3Client, bucket, themeName);
       spinner.succeed(`Resolved latest version: ${chalk4.cyan(version)}`);
     }
-    spinner.start(
-      `Downloading source.zip for ${themeName}@${version}...`
-    );
+    spinner.start(`Downloading source.zip for ${themeName}@${version}...`);
     const s3Key = `themes/${themeName}/${version}/source.zip`;
     let zipBuffer;
     try {
@@ -2630,9 +3408,7 @@ async function cloneCommand(themeName, options) {
         chalk4.yellow("The theme source may not have been uploaded yet.")
       );
       console.log(
-        chalk4.gray(
-          `Upload source with: onex upload --theme ${themeName}`
-        )
+        chalk4.gray(`Upload source with: onex upload --theme ${themeName}`)
       );
       console.log();
       process.exit(1);
@@ -2645,6 +3421,13 @@ async function cloneCommand(themeName, options) {
     zip.extractAllTo(outputDir, true);
     const entries = zip.getEntries().filter((e) => !e.isDirectory);
     spinner.succeed(`Extracted ${entries.length} files`);
+    spinner.start(
+      `Renaming theme: ${chalk4.gray(themeName)} \u2192 ${chalk4.cyan(newName)}...`
+    );
+    await renameTheme(outputDir, themeName, newName);
+    spinner.succeed(
+      `Renamed theme: ${chalk4.gray(themeName)} \u2192 ${chalk4.cyan(newName)}`
+    );
     if (options.install !== false) {
       const hasPkgJson = await fs.pathExists(
         path.join(outputDir, "package.json")
@@ -2667,15 +3450,14 @@ async function cloneCommand(themeName, options) {
     logger.success(chalk4.green.bold("Theme cloned successfully!"));
     console.log();
     console.log(
-      chalk4.cyan("   Theme:    ") + chalk4.white(`${themeName}@${version}`)
+      chalk4.cyan("   Source:   ") + chalk4.gray(`${themeName}@${version}`)
     );
+    console.log(chalk4.cyan("   Theme:    ") + chalk4.white(newName));
     console.log(chalk4.cyan("   Location: ") + chalk4.white(outputDir));
     console.log(chalk4.cyan("   Files:    ") + chalk4.white(entries.length));
     console.log();
     console.log(chalk4.cyan("Next steps:"));
-    console.log(
-      chalk4.gray(`   cd ${path.relative(process.cwd(), outputDir)}`)
-    );
+    console.log(chalk4.gray(`   cd ${path.relative(process.cwd(), outputDir)}`));
     if (options.install === false) {
       console.log(chalk4.gray("   pnpm install"));
     }
@@ -2688,14 +3470,253 @@ async function cloneCommand(themeName, options) {
   }
 }
 
+// src/commands/dev.ts
+init_logger();
+init_compile_theme();
+var MIME_TYPES = {
+  ".js": "application/javascript",
+  ".mjs": "application/javascript",
+  ".css": "text/css",
+  ".json": "application/json",
+  ".html": "text/html",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".webp": "image/webp",
+  ".gif": "image/gif",
+  ".map": "application/json"
+};
+function createDevServer(options) {
+  const clients = /* @__PURE__ */ new Set();
+  const server = http.createServer((req, res) => {
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS");
+    res.setHeader("Cache-Control", "no-store, no-cache, must-revalidate");
+    if (req.method === "OPTIONS") {
+      res.writeHead(200);
+      res.end();
+      return;
+    }
+    const url = new URL(req.url || "/", `http://localhost:${options.port}`);
+    const pathname = url.pathname;
+    if (pathname === "/" || pathname === "/index.html") {
+      res.writeHead(200, { "Content-Type": "text/html" });
+      res.end(generatePreviewHTML(options.themeName));
+      return;
+    }
+    if (pathname === "/preview-runtime.js") {
+      serveFile(res, options.previewRuntimePath);
+      return;
+    }
+    const filePath = path.join(options.distDir, pathname);
+    if (!filePath.startsWith(options.distDir)) {
+      res.writeHead(403);
+      res.end("Forbidden");
+      return;
+    }
+    serveFile(res, filePath);
+  });
+  const wss = new WebSocketServer({ server });
+  wss.on("connection", (ws) => {
+    clients.add(ws);
+    ws.on("close", () => clients.delete(ws));
+  });
+  server.listen(options.port);
+  return {
+    broadcast(message) {
+      const data = JSON.stringify(message);
+      for (const client of clients) {
+        if (client.readyState === WebSocket.OPEN) {
+          client.send(data);
+        }
+      }
+    },
+    close() {
+      wss.close();
+      server.close();
+    }
+  };
+}
+function serveFile(res, filePath) {
+  try {
+    if (!fs2.existsSync(filePath)) {
+      res.writeHead(404);
+      res.end("Not Found");
+      return;
+    }
+    const ext = path.extname(filePath);
+    const contentType = MIME_TYPES[ext] || "application/octet-stream";
+    const content = fs2.readFileSync(filePath);
+    res.writeHead(200, { "Content-Type": contentType });
+    res.end(content);
+  } catch (e) {
+    res.writeHead(500);
+    res.end("Internal Server Error");
+  }
+}
+function generatePreviewHTML(themeName, port) {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OneX Dev \u2014 ${themeName}</title>
+  <!-- Tailwind CSS Play CDN \u2014 JIT compilation in browser for dev preview -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    #onex-dev-toolbar {
+      position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
+      height: 40px; background: #1a1a2e; color: #e0e0e0;
+      display: flex; align-items: center; padding: 0 16px; gap: 16px;
+      font-family: system-ui; font-size: 13px;
+      border-bottom: 2px solid #16213e;
+    }
+    #onex-dev-toolbar .status { width: 8px; height: 8px; border-radius: 50%; }
+    #onex-dev-toolbar .status.connected { background: #00ff88; }
+    #onex-dev-toolbar .status.disconnected { background: #ff4444; }
+    #onex-dev-toolbar .status.rebuilding { background: #ffaa00; animation: pulse 0.5s infinite; }
+    @keyframes pulse { 50% { opacity: 0.5; } }
+    #onex-preview-root { margin-top: 40px; }
+  </style>
+</head>
+<body>
+  <div id="onex-dev-toolbar">
+    <span style="font-weight:600;">OneX Dev</span>
+    <span style="color:#888;">|</span>
+    <span>${themeName}</span>
+    <span style="color:#888;">|</span>
+    <span id="page-indicator">Home</span>
+    <span style="color:#888;">|</span>
+    <span class="status connected" id="ws-status"></span>
+    <span id="ws-label">Connected</span>
+  </div>
+  <div id="onex-preview-root"></div>
+  <script type="module" src="/preview-runtime.js"></script>
+</body>
+</html>`;
+}
+
+// src/commands/dev.ts
+async function devCommand(options) {
+  logger.header("OneX Dev Server");
+  let themePath;
+  let themeName;
+  if (options.theme) {
+    themeName = options.theme;
+    try {
+      const workspaceThemePath = path.join(getThemesDir(), themeName);
+      if (fs.existsSync(workspaceThemePath)) {
+        themePath = workspaceThemePath;
+      } else {
+        themePath = path.join(process.cwd(), themeName);
+      }
+    } catch (e) {
+      themePath = path.join(process.cwd(), themeName);
+    }
+    if (!fs.existsSync(themePath)) {
+      logger.error(`Theme "${themeName}" not found.`);
+      process.exit(1);
+    }
+  } else {
+    const isThemeDir = [
+      "theme.config.ts",
+      "bundle-entry.ts",
+      "manifest.ts"
+    ].some((f) => fs.existsSync(path.join(process.cwd(), f)));
+    if (isThemeDir) {
+      themePath = process.cwd();
+      themeName = path.basename(themePath);
+    } else {
+      logger.error(
+        "Not in a theme directory and no --theme specified. Run from theme root or use --theme flag."
+      );
+      process.exit(1);
+    }
+  }
+  logger.startSpinner("Compiling preview runtime...");
+  const previewRuntimePath = await compilePreviewRuntime(themePath);
+  logger.stopSpinner(true, "Preview runtime compiled");
+  logger.startSpinner("Compiling theme...");
+  const { context: context2, outputDir } = await compileStandaloneThemeDev(
+    themePath,
+    themeName
+  );
+  logger.stopSpinner(true, "Theme compiled");
+  const port = Number(options.port) || 3456;
+  const server = createDevServer({
+    port,
+    distDir: outputDir,
+    previewRuntimePath,
+    themeName
+  });
+  const watcher = chokidar.watch(
+    [
+      "sections",
+      "blocks",
+      "components",
+      "pages",
+      "theme.config.ts",
+      "theme.layout.ts",
+      "bundle-entry.ts",
+      "sections-registry.ts"
+    ],
+    { cwd: themePath, ignoreInitial: true }
+  );
+  let debounceTimer;
+  watcher.on("all", (_event, filePath) => {
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(async () => {
+      logger.info(`File changed: ${filePath}`);
+      try {
+        await context2.rebuild();
+        await generateManifest2(themeName, themePath, outputDir);
+        server.broadcast({ type: "reload", timestamp: Date.now() });
+        logger.success("Rebuilt successfully");
+      } catch (error) {
+        server.broadcast({ type: "error", message: String(error) });
+        logger.error(`Rebuild failed: ${error}`);
+      }
+    }, 150);
+  });
+  logger.newLine();
+  logger.success(`Theme compiled: ${themeName}`);
+  logger.info(`Preview: http://localhost:${port}`);
+  logger.info("Watching for changes...");
+  logger.newLine();
+  if (options.open !== false) {
+    const open = await import('open');
+    open.default(`http://localhost:${port}`);
+  }
+  process.on("SIGINT", async () => {
+    logger.newLine();
+    logger.info("Shutting down...");
+    watcher.close();
+    await context2.dispose();
+    server.close();
+    const shimPath = path.join(outputDir, ".process-shim.js");
+    try {
+      await fs7.unlink(shimPath);
+    } catch (e) {
+    }
+    process.exit(0);
+  });
+}
+
 // src/cli.ts
 try {
   const projectRoot = getProjectRoot();
-  dotenv.config({ path: path.join(projectRoot, ".env.local"), quiet: true });
+  dotenv.config({
+    path: path.join(projectRoot, ".env.local"),
+    quiet: true
+  });
   dotenv.config({ path: path.join(projectRoot, ".env"), quiet: true });
 } catch (e) {
 }
-dotenv.config({ path: path.join(os.homedir(), ".onex", ".env"), quiet: true });
+dotenv.config({
+  path: path.join(os.homedir(), ".onex", ".env"),
+  quiet: true
+});
 var program = new Command();
 program.name("onex").description("CLI tool for OneX theme development").version("0.1.0");
 program.command("init").description("Create a new OneX theme project").argument("[project-name]", "Name of the project").option(
@@ -2717,6 +3738,7 @@ program.command("create:block").alias("cb").description("Create a new block").ar
 program.command("create:component").alias("cc").description("Create a new component").argument("<name>", "Name of the component (e.g., button, badge)").option("-t, --type <type>", "Component type (ui, layout, form)").action(createComponentCommand);
 program.command("list").description("List available themes, sections, blocks, and components").option("-s, --sections", "List sections only").option("-b, --blocks", "List blocks only").option("-c, --components", "List components only").option("-t, --theme <theme>", "Filter by theme").action(listCommand);
 program.command("validate").description("Validate theme structure and files").option("-t, --theme <theme>", "Theme to validate").option("-f, --fix", "Auto-fix issues if possible (not implemented yet)").action(validateCommand);
+program.command("dev").description("Start dev server with live preview and hot reload").option("-t, --theme <theme>", "Theme to develop").option("-p, --port <port>", "Dev server port", "3456").option("--no-open", "Don't open browser automatically").action(devCommand);
 program.command("build").description("Build theme for production").option("-t, --theme <theme>", "Theme to build").option("-p, --production", "Production build with optimizations").option("-w, --watch", "Watch mode for development").action(buildCommand);
 program.command("package").description("Compile and package theme as distributable zip file").option("-t, --theme <theme>", "Theme to package").option("-o, --output <dir>", "Output directory for package").option("-n, --name <name>", "Custom package name").option("-m, --minify", "Minify compiled output").option("--skip-build", "Skip compilation step (use existing compiled theme)").action(packageCommand);
 program.command("deploy").description("Upload theme package to API server").option("-t, --theme <theme>", "Theme to deploy (finds latest package)").option("-p, --package <file>", "Specific package file to upload").option("--api-url <url>", "API server URL (default: http://localhost:3001)").option("-k, --api-key <key>", "API key for authentication").option(
@@ -2741,7 +3763,7 @@ program.command("clone").description("Clone theme source code from S3").argument
   "-v, --version <version>",
   "Theme version (default: latest)",
   "latest"
-).option("-o, --output <dir>", "Output directory").option("-b, --bucket <name>", "S3 bucket name").option(
+).option("-n, --name <name>", "New theme name (skips interactive prompt)").option("-o, --output <dir>", "Output directory").option("-b, --bucket <name>", "S3 bucket name").option(
   "-e, --environment <env>",
   "Environment (staging|production)",
   "staging"