@onexapis/cli 1.1.16 → 1.1.17

package/dist/cli.mjs

@@ -6,13 +6,13 @@ import path8 from 'path';
 import fs7 from 'fs/promises';
 import crypto from 'crypto';
 import { glob } from 'glob';
+import { createRequire } from 'module';
 import os from 'os';
 import dotenv from 'dotenv';
 import fs from 'fs-extra';
 import ejs from 'ejs';
 import { execSync, spawn } from 'child_process';
 import { Command } from 'commander';
-import { createRequire } from 'module';
 import fs2 from 'fs';
 import inquirer from 'inquirer';
 import archiver from 'archiver';
@@ -243,6 +243,12 @@ function createThemeDepsStubPlugin(themePath) {
             if (!result.errors.length) return result;
           } catch {
           }
+          try {
+            const req = createRequire(import.meta.url || __filename);
+            const resolved = req.resolve(args.path);
+            if (resolved) return { path: resolved, namespace: "file" };
+          } catch {
+          }
           return { path: args.path, namespace };
         });
       };
@@ -251,11 +257,19 @@ function createThemeDepsStubPlugin(themePath) {
         const stubs = {
           "next/image": `
 import React from 'react';
-const Image = (props) => {
-  const { src, alt, width, height, fill, priority, ...rest } = props;
+const Image = React.forwardRef((props, ref) => {
+  const { src, alt, width, height, fill, priority, sizes, quality, placeholder, blurDataURL, onLoad, onError, style, className, ...rest } = props;
   const imgSrc = typeof src === 'object' ? src.src : src;
-  return React.createElement('img', { src: imgSrc, alt, width: fill ? undefined : width, height: fill ? undefined : height, loading: priority ? 'eager' : 'lazy', ...rest });
-};
+  const fillStyle = fill ? { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: style?.objectFit || 'cover', display: 'block' } : {};
+  const mergedStyle = { ...fillStyle, ...style };
+  return React.createElement('img', {
+    ref, src: imgSrc, alt,
+    width: fill ? undefined : width, height: fill ? undefined : height,
+    loading: priority ? 'eager' : 'lazy',
+    style: Object.keys(mergedStyle).length > 0 ? mergedStyle : undefined,
+    className, onLoad, onError, ...rest,
+  });
+});
 export default Image;
           `,
           "next/link": `
@@ -289,7 +303,10 @@ export function headers() { return new Headers(); }
         if (!lucideThemeScanned) {
           lucideThemeScanned = true;
           try {
-            const scanned = await scanImportsFromPackage(themePath, "lucide-react");
+            const scanned = await scanImportsFromPackage(
+              themePath,
+              "lucide-react"
+            );
             for (const names of Object.values(scanned)) {
               for (const name of names) lucideImports.add(name);
             }
@@ -352,10 +369,13 @@ export function useFormContext() { return useForm(); }
         loader: "js"
       }));
       tryResolveOrStub(/^@hookform\/resolvers/, "hookform-resolvers-stub");
-      build2.onLoad({ filter: /.*/, namespace: "hookform-resolvers-stub" }, () => ({
-        contents: `export function zodResolver() { return () => ({ values: {}, errors: {} }); }`,
-        loader: "js"
-      }));
+      build2.onLoad(
+        { filter: /.*/, namespace: "hookform-resolvers-stub" },
+        () => ({
+          contents: `export function zodResolver() { return () => ({ values: {}, errors: {} }); }`,
+          loader: "js"
+        })
+      );
       tryResolveOrStub(/^next-intl$/, "next-intl-stub");
       build2.onLoad({ filter: /.*/, namespace: "next-intl-stub" }, () => ({
         contents: `
@@ -613,7 +633,11 @@ async function compileStandaloneTheme(themePath, themeName) {
     banner: {
       js: '"use client";'
     },
-    plugins: [reactGlobalPlugin, createCoreGlobalPlugin(themePath), createThemeDepsStubPlugin(themePath)],
+    plugins: [
+      reactGlobalPlugin,
+      createCoreGlobalPlugin(themePath),
+      createThemeDepsStubPlugin(themePath)
+    ],
     external: [],
     alias: {
       events: "events/",
@@ -695,7 +719,11 @@ async function compileStandaloneThemeDev(themePath, themeName) {
     banner: {
       js: '"use client";'
     },
-    plugins: [reactGlobalPlugin, createCoreGlobalPlugin(themePath), createThemeDepsStubPlugin(themePath)],
+    plugins: [
+      reactGlobalPlugin,
+      createCoreGlobalPlugin(themePath),
+      createThemeDepsStubPlugin(themePath)
+    ],
     external: [],
     alias: {
       events: "events/",
@@ -830,7 +858,16 @@ ${locations.join("\n")}`
             path8.join(themePath, "node_modules", "@onexapis", "core", "src"),
             path8.join(themePath, "..", "..", "packages", "core", "src"),
             // monorepo sibling
-            path8.join(__dirname, "..", "..", "..", "..", "packages", "core", "src")
+            path8.join(
+              __dirname,
+              "..",
+              "..",
+              "..",
+              "..",
+              "packages",
+              "core",
+              "src"
+            )
             // from CLI src
           ];
           let coreSourceDir = null;
@@ -844,7 +881,10 @@ ${locations.join("\n")}`
           }
           if (coreSourceDir) {
             try {
-              const scanned = await scanImportsFromPackage(coreSourceDir, "lucide-react");
+              const scanned = await scanImportsFromPackage(
+                coreSourceDir,
+                "lucide-react"
+              );
               for (const names of Object.values(scanned)) {
                 for (const name of names) lucideIconNames.add(name);
               }
@@ -865,7 +905,10 @@ ${locations.join("\n")}`
                 const mjsFiles = await glob("*.mjs", { cwd: candidate });
                 const importRegex = /import\s*\{([^}]+)\}\s*from\s*["']lucide-react["']/g;
                 for (const file of mjsFiles) {
-                  const content = await fs7.readFile(path8.join(candidate, file), "utf-8");
+                  const content = await fs7.readFile(
+                    path8.join(candidate, file),
+                    "utf-8"
+                  );
                   for (const match of content.matchAll(importRegex)) {
                     for (const name of match[1].split(",")) {
                       const original = name.trim().split(/\s+as\s+/)[0].trim();
@@ -881,7 +924,10 @@ ${locations.join("\n")}`
             }
           }
           try {
-            const scanned = await scanImportsFromPackage(themePath, "lucide-react");
+            const scanned = await scanImportsFromPackage(
+              themePath,
+              "lucide-react"
+            );
             for (const names of Object.values(scanned)) {
               for (const name of names) lucideIconNames.add(name);
             }
@@ -911,14 +957,39 @@ export default new Proxy({}, { get: (_, name) => name === '__esModule' ? true :
           if (!result.errors.length) return result;
         } catch {
         }
+        try {
+          const req = createRequire(import.meta.url || __filename);
+          const cjsPath = req.resolve("framer-motion");
+          const pkgDir = cjsPath.replace(/[/\\]dist[/\\].*$/, "");
+          const esmEntry = path8.join(pkgDir, "dist", "es", "index.mjs");
+          const { existsSync } = await import('fs');
+          if (existsSync(esmEntry)) {
+            return { path: esmEntry, namespace: "file" };
+          }
+          return { path: cjsPath, namespace: "file" };
+        } catch {
+        }
         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 };
+import React from 'react';
+const MotionComponent = React.forwardRef((props, ref) => {
+  const { initial, animate, exit, variants, transition, whileInView, whileHover, whileTap, viewport, onAnimationComplete, layout, layoutId, style, className, ...rest } = props;
+  return React.createElement(rest.as || 'div', { ref, style, className, ...rest }, rest.children);
+});
+const handler = { get: (_, name) => {
+  if (name === '__esModule') return true;
+  if (name === 'create') return () => new Proxy({}, handler);
+  return MotionComponent;
+}};
 export const motion = new Proxy({}, handler);
-export const AnimatePresence = stub;
+export const AnimatePresence = (props) => props.children || null;
+export const useInView = () => true;
+export const useAnimation = () => ({ start: () => {}, stop: () => {}, set: () => {} });
+export const useMotionValue = (v) => ({ get: () => v, set: () => {}, onChange: () => () => {} });
+export const useTransform = (v) => v;
+export const useScroll = () => ({ scrollY: { get: () => 0, onChange: () => () => {} }, scrollYProgress: { get: () => 0, onChange: () => () => {} } });
 export default { motion, AnimatePresence };
         `.trim(),
         loader: "jsx"
@@ -941,12 +1012,26 @@ export default { motion, AnimatePresence };
       build2.onLoad({ filter: /.*/, namespace: "next-stub" }, (args) => {
         const stubs = {
           "next/image": `
-const Image = (props) => {
-  const { src, alt, width, height, fill, priority, ...rest } = props;
-  const imgSrc = typeof src === 'object' ? src.src : src;
-  return React.createElement('img', { src: imgSrc, alt, width: fill ? undefined : width, height: fill ? undefined : height, loading: priority ? 'eager' : 'lazy', ...rest });
-};
 import React from 'react';
+const Image = React.forwardRef((props, ref) => {
+  const { src, alt, width, height, fill, priority, sizes, quality, placeholder, blurDataURL, onLoad, onError, style, className, ...rest } = props;
+  const imgSrc = typeof src === 'object' ? src.src : src;
+  const fillStyle = fill ? { position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: style?.objectFit || 'cover', display: 'block' } : {};
+  const mergedStyle = { ...fillStyle, ...style };
+  return React.createElement('img', {
+    ref,
+    src: imgSrc,
+    alt,
+    width: fill ? undefined : width,
+    height: fill ? undefined : height,
+    loading: priority ? 'eager' : 'lazy',
+    style: Object.keys(mergedStyle).length > 0 ? mergedStyle : undefined,
+    className,
+    onLoad,
+    onError,
+    ...rest,
+  });
+});
 export default Image;
           `,
           "next/link": `
@@ -1445,7 +1530,7 @@ Add your theme-specific blocks here.
       try {
         execSync("git init", { cwd: projectPath, stdio: "ignore" });
         execSync("git add .", { cwd: projectPath, stdio: "ignore" });
-        execSync('git commit -m "Initial commit from onex init"', {
+        execSync('git commit -m "Initial commit from onexthm init"', {
           cwd: projectPath,
           stdio: "ignore"
         });
@@ -2795,7 +2880,7 @@ async function buildCommand(options) {
   logger.stopSpinner(true, "Lint passed");
   const pkgJson = fs.readJsonSync(packageJsonPath);
   const buildScript = pkgJson.scripts?.build || "";
-  const isRecursive = buildScript.includes("onex build") || buildScript.includes("onex-cli build");
+  const isRecursive = buildScript.includes("onexthm build") || buildScript.includes("onex-cli build");
   logger.startSpinner(
     options.watch ? "Building (watch mode)..." : "Building..."
   );
@@ -2941,7 +3026,7 @@ async function packageCommand(options) {
     logger.newLine();
     logger.section("Next steps:");
     logger.log(
-      `  onex deploy --package ${path8.relative(process.cwd(), outputPath)}`
+      `  onexthm deploy --package ${path8.relative(process.cwd(), outputPath)}`
     );
   } catch (error) {
     logger.stopSpinner(false, "Failed to create package");
@@ -3003,7 +3088,7 @@ async function deployCommand(options) {
   } else if (options.theme) {
     const distDir = path8.join(process.cwd(), "dist");
     if (!fs.existsSync(distDir)) {
-      logger.error("No dist/ directory found. Run 'onex package' first.");
+      logger.error("No dist/ directory found. Run 'onexthm package' first.");
       process.exit(1);
     }
     const files = fs.readdirSync(distDir);
@@ -3012,7 +3097,7 @@ async function deployCommand(options) {
     );
     if (packageFiles.length === 0) {
       logger.error(`No package found for theme "${options.theme}".`);
-      logger.info("Run: onex package --theme " + options.theme);
+      logger.info("Run: onexthm package --theme " + options.theme);
       process.exit(1);
     }
     packageFiles.sort().reverse();
@@ -3020,8 +3105,8 @@ async function deployCommand(options) {
   } else {
     logger.error("Either --package or --theme must be specified.");
     logger.info("Examples:");
-    logger.log("  onex deploy --package dist/tinan-1.0.0.zip");
-    logger.log("  onex deploy --theme tinan");
+    logger.log("  onexthm deploy --package dist/tinan-1.0.0.zip");
+    logger.log("  onexthm deploy --theme tinan");
     process.exit(1);
   }
   if (!fs.existsSync(packagePath)) {
@@ -3037,7 +3122,7 @@ async function deployCommand(options) {
   logger.log(`Path: ${path8.relative(process.cwd(), packagePath)}`);
   logger.newLine();
   const apiUrl = options.apiUrl || process.env.ONEX_API_URL || "http://localhost:3001";
-  const uploadEndpoint = `${apiUrl}/api/themes/upload`;
+  const uploadEndpoint = `${apiUrl}/website-api/themes/upload`;
   logger.section("Uploading to API Server");
   logger.info(`Endpoint: ${uploadEndpoint}`);
   logger.newLine();
@@ -3242,7 +3327,7 @@ async function uploadCommand(options) {
     if (!compiledDir) {
       spinner.fail(
         chalk4.red(
-          `Compiled theme not found for ${themeId}@${version2}. Run 'onex build' first.`
+          `Compiled theme not found for ${themeId}@${version2}. Run 'onexthm build' first.`
         )
       );
       logger.info(chalk4.gray(`Expected location:
@@ -3474,7 +3559,7 @@ function showDownloadFailureHelp(themeId, bucket) {
   console.log(chalk4.white("1. Compile and upload the theme:"));
   console.log(chalk4.gray(`   cd themes/${themeId}`));
   console.log(chalk4.gray("   pnpm build"));
-  console.log(chalk4.gray("   onex upload"));
+  console.log(chalk4.gray("   onexthm upload"));
   console.log();
   console.log(chalk4.white("2. Verify AWS credentials are set:"));
   console.log(
@@ -3776,7 +3861,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: onexthm upload --theme ${themeName}`)
       );
       console.log();
       process.exit(1);
@@ -3845,7 +3930,7 @@ async function cloneCommand(themeName, options) {
     if (options.install === false) {
       console.log(chalk4.gray("   pnpm install"));
     }
-    console.log(chalk4.gray("   onex build"));
+    console.log(chalk4.gray("   onexthm build"));
     console.log();
   } catch (error) {
     spinner.fail(chalk4.red(`Clone failed: ${error.message}`));
@@ -3873,6 +3958,7 @@ var MIME_TYPES = {
 };
 function createDevServer(options) {
   const clients = /* @__PURE__ */ new Set();
+  const themeDataPath = path8.join(options.distDir, "theme-data.json");
   const server = http.createServer((req, res) => {
     res.setHeader("Access-Control-Allow-Origin", "*");
     res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS");
@@ -3886,7 +3972,9 @@ function createDevServer(options) {
     const pathname = url.pathname;
     if (pathname === "/" || pathname === "/index.html") {
       res.writeHead(200, { "Content-Type": "text/html" });
-      res.end(generatePreviewHTML(options.themeName));
+      res.end(
+        generatePreviewHTML(options.themeName, options.port, themeDataPath)
+      );
       return;
     }
     if (pathname === "/preview-runtime.js") {
@@ -3905,6 +3993,37 @@ function createDevServer(options) {
       serveFile(res, assetPath);
       return;
     }
+    if (pathname.startsWith("/themes/")) {
+      const match = pathname.match(/^\/themes\/[^/]+\/assets\/(.+)/);
+      if (match) {
+        const assetPath = path8.join(options.themePath, "assets", match[1]);
+        if (!assetPath.startsWith(path8.join(options.themePath, "assets"))) {
+          res.writeHead(403);
+          res.end("Forbidden");
+          return;
+        }
+        serveFile(res, assetPath);
+        return;
+      }
+    }
+    if (pathname.startsWith("/assets/")) {
+      const subpath = pathname.replace(/^\/assets\//, "");
+      const segments = subpath.split("/");
+      let assetPath;
+      if (segments[0] === options.themeName || segments[0] === options.themeName.replace(/^my-/, "")) {
+        assetPath = path8.join(
+          options.themePath,
+          "assets",
+          segments.slice(1).join("/")
+        );
+      } else {
+        assetPath = path8.join(options.themePath, "assets", subpath);
+      }
+      if (assetPath.startsWith(path8.join(options.themePath, "assets")) && fs2.existsSync(assetPath)) {
+        serveFile(res, assetPath);
+        return;
+      }
+    }
     const filePath = path8.join(options.distDir, pathname);
     if (!filePath.startsWith(options.distDir)) {
       res.writeHead(403);
@@ -3915,7 +4034,9 @@ function createDevServer(options) {
       serveFile(res, filePath);
     } else {
       res.writeHead(200, { "Content-Type": "text/html" });
-      res.end(generatePreviewHTML(options.themeName));
+      res.end(
+        generatePreviewHTML(options.themeName, options.port, themeDataPath)
+      );
     }
   });
   const wss = new WebSocketServer({ server });
@@ -3956,17 +4077,82 @@ function serveFile(res, filePath) {
     res.end("Internal Server Error");
   }
 }
-function generatePreviewHTML(themeName, port) {
+function generatePreviewHTML(themeName, port, themeDataPath) {
+  let fontLinks = "";
+  let fontVarsCSS = "";
+  if (themeDataPath) {
+    try {
+      const themeData = JSON.parse(fs2.readFileSync(themeDataPath, "utf-8"));
+      const typography = (themeData?.themeConfig || themeData?.theme?.config)?.typography?.fontFamily;
+      if (typography) {
+        const fontFamilies = /* @__PURE__ */ new Set();
+        for (const value of Object.values(typography)) {
+          const primary = value.split(",")[0].trim();
+          if (primary && ![
+            "serif",
+            "sans-serif",
+            "monospace",
+            "system-ui",
+            "Georgia",
+            "Inter",
+            "Consolas"
+          ].includes(primary)) {
+            fontFamilies.add(primary);
+          }
+        }
+        if (fontFamilies.size > 0) {
+          const families = Array.from(fontFamilies).map(
+            (f) => `family=${f.replace(/\s+/g, "+")}:wght@300;400;500;600;700;800;900`
+          ).join("&");
+          fontLinks = `<link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?${families}&display=swap" rel="stylesheet">`;
+        }
+        const heading = typography.heading || typography.body || "system-ui";
+        const body = typography.body || "system-ui";
+        fontVarsCSS = `
+    :root {
+      --font-heading: ${heading};
+      --font-body: ${body};
+    }
+    body { font-family: var(--font-body); }
+    h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }`;
+      }
+    } catch {
+    }
+  }
   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>
+  ${fontLinks}
   <!-- Tailwind CSS Play CDN \u2014 JIT compilation in browser for dev preview -->
   <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          aspectRatio: {
+            '2/1': '2 / 1',
+            '3/2': '3 / 2',
+            '4/3': '4 / 3',
+            '3/4': '3 / 4',
+            '5/4': '5 / 4',
+            '16/9': '16 / 9',
+            '21/9': '21 / 9',
+          },
+          fontFamily: {
+            playfair: ['Playfair Display', 'Georgia', 'serif'],
+            roboto: ['Roboto', 'system-ui', 'sans-serif'],
+          },
+        },
+      },
+    }
+  </script>
   <style>
-    #onex-preview-root { margin-top: 0; }
+    #onex-preview-root { margin-top: 0; }${fontVarsCSS}
   </style>
 </head>
 <body>
@@ -4085,7 +4271,7 @@ async function devCommand(options) {
 
 // src/commands/config.ts
 init_logger();
-var CONFIG_DIR = path8.join(os.homedir(), ".onex");
+var CONFIG_DIR = path8.join(os.homedir(), ".onexthm");
 var CONFIG_FILE = path8.join(CONFIG_DIR, ".env");
 var CONFIG_ENTRIES = [
   {
@@ -4139,7 +4325,7 @@ function parseEnvFile(content) {
 function serializeEnv(values) {
   const lines = [
     "# OneX CLI Configuration",
-    "# Generated by: onex config",
+    "# Generated by: onexthm config",
     ""
   ];
   lines.push("# AWS / S3 Configuration");
@@ -4237,13 +4423,13 @@ try {
 } catch {
 }
 dotenv.config({
-  path: path8.join(os.homedir(), ".onex", ".env"),
+  path: path8.join(os.homedir(), ".onexthm", ".env"),
   quiet: true
 });
 var require2 = createRequire(import.meta.url);
 var { version } = require2("../package.json");
 var program = new Command();
-program.name("onex").description("CLI tool for OneX theme development").version(version);
+program.name("onexthm").description("CLI tool for OneX theme development").version(version);
 program.command("init").description("Create a new OneX theme project").argument("[project-name]", "Name of the project").option(
   "-t, --template <template>",
   "Template to use (default, minimal)",