@onexapis/cli 1.1.52 → 1.1.53

package/dist/cli.mjs

@@ -7,21 +7,21 @@ import fs8 from 'fs/promises';
 import crypto from 'crypto';
 import { glob } from 'glob';
 import { createRequire } from 'module';
+import http from 'http';
+import fs3 from 'fs';
+import { WebSocketServer, WebSocket } from 'ws';
 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 fs3 from 'fs';
 import inquirer from 'inquirer';
 import archiver from 'archiver';
 import FormData from 'form-data';
 import fetch2 from 'node-fetch';
 import AdmZip from 'adm-zip';
 import chokidar from 'chokidar';
-import http from 'http';
-import { WebSocketServer, WebSocket } from 'ws';
 import semver from 'semver';
 
 var __defProp = Object.defineProperty;
@@ -1337,6 +1337,240 @@ export const {
   }
 });
 
+// src/utils/dev-server.ts
+var dev_server_exports = {};
+__export(dev_server_exports, {
+  createDevServer: () => createDevServer
+});
+function createDevServer(options) {
+  const clients = /* @__PURE__ */ new Set();
+  const themeDataPath = path9.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");
+    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, options.port, themeDataPath)
+      );
+      return;
+    }
+    if (pathname === "/preview-runtime.js") {
+      serveFile(res, options.previewRuntimePath);
+      return;
+    }
+    if (pathname.startsWith("/_assets/")) {
+      const parts = pathname.replace(/^\/_assets\//, "").split("/");
+      const assetSubpath = parts.slice(1).join("/");
+      const assetPath = path9.join(options.themePath, "assets", assetSubpath);
+      if (!assetPath.startsWith(path9.join(options.themePath, "assets"))) {
+        res.writeHead(403);
+        res.end("Forbidden");
+        return;
+      }
+      serveFile(res, assetPath);
+      return;
+    }
+    if (pathname.startsWith("/themes/")) {
+      const match = pathname.match(/^\/themes\/[^/]+\/assets\/(.+)/);
+      if (match) {
+        const assetPath = path9.join(options.themePath, "assets", match[1]);
+        if (!assetPath.startsWith(path9.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("/");
+      const assetsBase = path9.join(options.themePath, "assets");
+      let assetPath;
+      if (segments[0] === options.themeName || segments[0] === options.themeName.replace(/^my-/, "")) {
+        assetPath = path9.join(assetsBase, segments.slice(1).join("/"));
+      } else {
+        assetPath = path9.join(assetsBase, subpath);
+      }
+      if (assetPath.startsWith(assetsBase) && fs3.existsSync(assetPath)) {
+        serveFile(res, assetPath);
+        return;
+      }
+      if (segments.length > 1) {
+        const fallbackPath = path9.join(assetsBase, segments.slice(1).join("/"));
+        if (fallbackPath.startsWith(assetsBase) && fs3.existsSync(fallbackPath)) {
+          serveFile(res, fallbackPath);
+          return;
+        }
+      }
+    }
+    const filePath = path9.join(options.distDir, pathname);
+    if (!filePath.startsWith(options.distDir)) {
+      res.writeHead(403);
+      res.end("Forbidden");
+      return;
+    }
+    if (fs3.existsSync(filePath) && fs3.statSync(filePath).isFile()) {
+      serveFile(res, filePath);
+    } else {
+      res.writeHead(200, { "Content-Type": "text/html" });
+      res.end(
+        generatePreviewHTML(options.themeName, options.port, themeDataPath)
+      );
+    }
+  });
+  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 (!fs3.existsSync(filePath)) {
+      res.writeHead(404);
+      res.end("Not Found");
+      return;
+    }
+    const ext = path9.extname(filePath);
+    const contentType = MIME_TYPES[ext] || "application/octet-stream";
+    const content = fs3.readFileSync(filePath);
+    res.writeHead(200, { "Content-Type": contentType });
+    res.end(content);
+  } catch {
+    res.writeHead(500);
+    res.end("Internal Server Error");
+  }
+}
+function generatePreviewHTML(themeName, port, themeDataPath) {
+  let fontLinks = "";
+  let fontVarsCSS = "";
+  if (themeDataPath) {
+    try {
+      const themeData = JSON.parse(fs3.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; }${fontVarsCSS}
+  </style>
+</head>
+<body>
+  <div id="onex-preview-root"></div>
+  <script type="module" src="/preview-runtime.js"></script>
+</body>
+</html>`;
+}
+var MIME_TYPES;
+var init_dev_server = __esm({
+  "src/utils/dev-server.ts"() {
+    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"
+    };
+  }
+});
+
 // src/utils/file-helpers.ts
 init_logger();
 async function renderTemplate(templatePath, data) {
@@ -4012,231 +4246,7 @@ 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 themeDataPath = path9.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");
-    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, options.port, themeDataPath)
-      );
-      return;
-    }
-    if (pathname === "/preview-runtime.js") {
-      serveFile(res, options.previewRuntimePath);
-      return;
-    }
-    if (pathname.startsWith("/_assets/")) {
-      const parts = pathname.replace(/^\/_assets\//, "").split("/");
-      const assetSubpath = parts.slice(1).join("/");
-      const assetPath = path9.join(options.themePath, "assets", assetSubpath);
-      if (!assetPath.startsWith(path9.join(options.themePath, "assets"))) {
-        res.writeHead(403);
-        res.end("Forbidden");
-        return;
-      }
-      serveFile(res, assetPath);
-      return;
-    }
-    if (pathname.startsWith("/themes/")) {
-      const match = pathname.match(/^\/themes\/[^/]+\/assets\/(.+)/);
-      if (match) {
-        const assetPath = path9.join(options.themePath, "assets", match[1]);
-        if (!assetPath.startsWith(path9.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("/");
-      const assetsBase = path9.join(options.themePath, "assets");
-      let assetPath;
-      if (segments[0] === options.themeName || segments[0] === options.themeName.replace(/^my-/, "")) {
-        assetPath = path9.join(assetsBase, segments.slice(1).join("/"));
-      } else {
-        assetPath = path9.join(assetsBase, subpath);
-      }
-      if (assetPath.startsWith(assetsBase) && fs3.existsSync(assetPath)) {
-        serveFile(res, assetPath);
-        return;
-      }
-      if (segments.length > 1) {
-        const fallbackPath = path9.join(assetsBase, segments.slice(1).join("/"));
-        if (fallbackPath.startsWith(assetsBase) && fs3.existsSync(fallbackPath)) {
-          serveFile(res, fallbackPath);
-          return;
-        }
-      }
-    }
-    const filePath = path9.join(options.distDir, pathname);
-    if (!filePath.startsWith(options.distDir)) {
-      res.writeHead(403);
-      res.end("Forbidden");
-      return;
-    }
-    if (fs3.existsSync(filePath) && fs3.statSync(filePath).isFile()) {
-      serveFile(res, filePath);
-    } else {
-      res.writeHead(200, { "Content-Type": "text/html" });
-      res.end(
-        generatePreviewHTML(options.themeName, options.port, themeDataPath)
-      );
-    }
-  });
-  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 (!fs3.existsSync(filePath)) {
-      res.writeHead(404);
-      res.end("Not Found");
-      return;
-    }
-    const ext = path9.extname(filePath);
-    const contentType = MIME_TYPES[ext] || "application/octet-stream";
-    const content = fs3.readFileSync(filePath);
-    res.writeHead(200, { "Content-Type": contentType });
-    res.end(content);
-  } catch {
-    res.writeHead(500);
-    res.end("Internal Server Error");
-  }
-}
-function generatePreviewHTML(themeName, port, themeDataPath) {
-  let fontLinks = "";
-  let fontVarsCSS = "";
-  if (themeDataPath) {
-    try {
-      const themeData = JSON.parse(fs3.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; }${fontVarsCSS}
-  </style>
-</head>
-<body>
-  <div id="onex-preview-root"></div>
-  <script type="module" src="/preview-runtime.js"></script>
-</body>
-</html>`;
-}
-
-// src/commands/dev.ts
+init_dev_server();
 async function devCommand(options) {
   logger.header("OneX Dev Server");
   let themePath;
@@ -5071,6 +5081,121 @@ Or use the --bump flag:
   }
   logger.newLine();
   logger.success(`\u2713 Theme "${themeId}" v${version2} published!`);
+  await uploadThumbnail(apiUrl, themeId, themePath, distDir);
+}
+async function uploadThumbnail(apiUrl, themeId, themePath, distDir) {
+  const THUMBNAIL_CANDIDATES = [
+    { file: "thumbnail.png", mime: "image/png" },
+    { file: "thumbnail.jpg", mime: "image/jpeg" },
+    { file: "thumbnail.jpeg", mime: "image/jpeg" },
+    { file: "thumbnail.webp", mime: "image/webp" }
+  ];
+  let imageBase64 = null;
+  let mimeType = "image/png";
+  for (const { file, mime } of THUMBNAIL_CANDIDATES) {
+    const candidate = path9.join(themePath, file);
+    if (fs.existsSync(candidate)) {
+      const buf = fs.readFileSync(candidate);
+      imageBase64 = `data:${mime};base64,${buf.toString("base64")}`;
+      mimeType = mime;
+      logger.info(`Using local thumbnail: ${file}`);
+      break;
+    }
+  }
+  if (!imageBase64) {
+    logger.startSpinner("Taking screenshot for thumbnail...");
+    try {
+      const buf = await screenshotHomePage(themePath, distDir);
+      imageBase64 = `data:image/png;base64,${buf.toString("base64")}`;
+      mimeType = "image/png";
+      logger.stopSpinner(true, "Screenshot captured");
+    } catch (err) {
+      logger.stopSpinner(false, "Screenshot failed \u2014 skipping thumbnail");
+      logger.info(
+        "Tip: add thumbnail.png to your theme root to set a custom thumbnail"
+      );
+      return;
+    }
+  }
+  logger.startSpinner("Uploading thumbnail...");
+  try {
+    const uploadRes = await authenticatedFetch(`${apiUrl}/media/images/upload`, {
+      method: "POST",
+      body: JSON.stringify({
+        prefix: `themes/${themeId}`,
+        image: imageBase64,
+        name: "thumbnail.png"
+      })
+    });
+    const uploadData = await uploadRes.json();
+    const uploadBody = uploadData.statusCode ? uploadData.body : uploadData;
+    if (!uploadRes.ok || !uploadBody.url) {
+      throw new Error(uploadBody.error || "Upload failed");
+    }
+    const patchRes = await authenticatedFetch(
+      `${apiUrl}/website-api/themes/${encodeURIComponent(themeId)}`,
+      {
+        method: "PATCH",
+        body: JSON.stringify({ thumbnail_url: uploadBody.url })
+      }
+    );
+    if (!patchRes.ok) {
+      const patchData = await patchRes.json();
+      const patchBody = patchData.statusCode ? patchData.body : patchData;
+      throw new Error(patchBody.error || "Failed to set thumbnail");
+    }
+    logger.stopSpinner(true, "Thumbnail set");
+  } catch (err) {
+    logger.stopSpinner(false, "Thumbnail upload skipped");
+    logger.info(
+      `Theme published successfully. Thumbnail can be updated later.`
+    );
+  }
+}
+async function screenshotHomePage(themePath, distDir) {
+  const { compilePreviewRuntime: compilePreviewRuntime2 } = await Promise.resolve().then(() => (init_compile_theme(), compile_theme_exports));
+  const { createDevServer: createDevServer2 } = await Promise.resolve().then(() => (init_dev_server(), dev_server_exports));
+  const previewRuntimePath = await compilePreviewRuntime2(themePath);
+  const themeName = path9.basename(themePath);
+  const port = await findFreePort(4500);
+  const server = createDevServer2({
+    port,
+    distDir,
+    previewRuntimePath,
+    themeName,
+    themePath
+  });
+  await new Promise((resolve) => setTimeout(resolve, 300));
+  const puppeteer = await import('puppeteer');
+  const browser = await puppeteer.default.launch({
+    headless: true,
+    args: ["--no-sandbox", "--disable-setuid-sandbox"]
+  });
+  try {
+    const page = await browser.newPage();
+    await page.setViewport({ width: 1440, height: 900 });
+    await page.goto(`http://localhost:${port}`, {
+      waitUntil: "networkidle0",
+      timeout: 3e4
+    });
+    await page.waitForSelector("#onex-preview-root > *", { timeout: 15e3 });
+    const screenshot = await page.screenshot({ fullPage: true, type: "png" });
+    return Buffer.from(screenshot);
+  } finally {
+    await browser.close();
+    server.close();
+  }
+}
+async function findFreePort(start) {
+  const net = await import('net');
+  return new Promise((resolve) => {
+    const srv = net.createServer();
+    srv.listen(start, () => {
+      const addr = srv.address();
+      srv.close(() => resolve(addr.port));
+    });
+    srv.on("error", () => resolve(findFreePort(start + 1)));
+  });
 }
 async function uploadVideoMultipart(apiUrl, themeId, video) {
   const fileName = path9.basename(video.originalPath);