@officexapp/catalogs-cli 0.1.0 → 0.2.1

package/README.md

@@ -1,6 +1,6 @@
 # @officexapp/catalogs-cli
 
-CLI for Catalog Funnel — upload videos, push catalog schemas, manage assets.
+CLI for Catalog Kit — upload videos, push catalog schemas, manage assets.
 
 ## Setup
 
@@ -11,15 +11,19 @@ npm install -g @officexapp/catalogs-cli
 Configure authentication:
 
 ```bash
-export CATALOGS_API_URL="https://catalog-funnel-api-staging.cloud.zoomgtm.com"
-export CATALOGS_TOKEN="cfk_your_api_key_here"
+export CATALOG_KIT_TOKEN="cfk_your_api_key_here"
 ```
 
-Or create `~/.catalogs-cli/config.json`:
+The API URL defaults to `https://api.catalogkit.cc`. To override (e.g. for staging):
+
+```bash
+export CATALOG_KIT_API_URL="https://api-staging.catalogkit.cc"
+```
+
+Or create `~/.catalog-kit/config.json`:
 
 ```json
 {
-  "api_url": "https://catalog-funnel-api-staging.cloud.zoomgtm.com",
   "token": "cfk_your_api_key_here"
 }
 ```

package/dist/index.js

@@ -2,72 +2,35 @@
 
 // src/index.ts
 import { Command } from "commander";
-
-// src/commands/video-upload.ts
-import { readFileSync as readFileSync2, statSync } from "fs";
-import { basename } from "path";
-import ora from "ora";
+import { createRequire } from "module";
 
 // src/config.ts
-import { readFileSync, existsSync } from "fs";
-import { join } from "path";
-import { homedir } from "os";
-var CONFIG_DIR = join(homedir(), ".catalogs-cli");
-var CONFIG_FILE = join(CONFIG_DIR, "config.json");
+var DEFAULT_API_URL = "https://api.catalogkit.cc";
+var globalTokenOverride;
+function setGlobalToken(token) {
+  globalTokenOverride = token;
+}
 function getConfig() {
-  const envUrl = process.env.CATALOGS_API_URL;
-  const envToken = process.env.CATALOGS_TOKEN;
-  if (envUrl && envToken) {
-    return { api_url: envUrl, token: envToken };
-  }
-  if (existsSync(CONFIG_FILE)) {
-    try {
-      const raw = readFileSync(CONFIG_FILE, "utf-8");
-      const parsed = JSON.parse(raw);
-      return {
-        api_url: envUrl || parsed.api_url || "",
-        token: envToken || parsed.token || ""
-      };
-    } catch {
-    }
-  }
-  const dotenv = join(process.cwd(), ".env");
-  if (existsSync(dotenv)) {
-    const lines = readFileSync(dotenv, "utf-8").split("\n");
-    const env = {};
-    for (const line of lines) {
-      const match = line.match(/^([A-Z_]+)=["']?(.+?)["']?\s*$/);
-      if (match) env[match[1]] = match[2];
-    }
-    if (env.CATALOGS_API_URL || env.CATALOGS_TOKEN) {
-      return {
-        api_url: envUrl || env.CATALOGS_API_URL || "",
-        token: envToken || env.CATALOGS_TOKEN || ""
-      };
-    }
-  }
-  return {
-    api_url: envUrl || "",
-    token: envToken || ""
-  };
+  const envUrl = process.env.CATALOG_KIT_API_URL;
+  const token = globalTokenOverride || process.env.CATALOG_KIT_TOKEN || "";
+  return { api_url: envUrl || DEFAULT_API_URL, token };
 }
 function requireConfig() {
   const config = getConfig();
-  if (!config.api_url) {
-    console.error(
-      "Missing API URL. Set CATALOGS_API_URL env var or create ~/.catalogs-cli/config.json"
-    );
-    process.exit(1);
-  }
   if (!config.token) {
     console.error(
-      "Missing auth token. Set CATALOGS_TOKEN env var or create ~/.catalogs-cli/config.json"
+      '\nMissing auth token.\n\n  Set the CATALOG_KIT_TOKEN environment variable:\n    export CATALOG_KIT_TOKEN="cfk_..."\n\n  Or pass --token on the command line:\n    catalogs --token cfk_... catalog push schema.json\n'
     );
     process.exit(1);
   }
   return config;
 }
 
+// src/commands/video-upload.ts
+import { readFileSync, statSync } from "fs";
+import { basename } from "path";
+import ora from "ora";
+
 // src/api.ts
 var ApiClient = class {
   constructor(config) {
@@ -116,6 +79,26 @@ var ApiClient = class {
   }
 };
 
+// src/lib/identity.ts
+async function printIdentity(api) {
+  try {
+    const res = await api.get("/api/v1/me");
+    if (res.ok && res.data) {
+      const d = res.data;
+      const parts = [`Authenticated as ${d.subdomain || d.user_id}`];
+      if (d.email) parts.push(`(${d.email})`);
+      console.log(`
+  ${parts.join(" ")}`);
+      if (d.subdomain) {
+        console.log(`  Subdomain: ${d.subdomain}.catalogkit.cc`);
+      }
+      console.log();
+    }
+  } catch {
+    console.warn("\n  Warning: Could not verify identity (API unreachable)\n");
+  }
+}
+
 // src/commands/video-upload.ts
 var MIME_MAP = {
   ".mp4": "video/mp4",
@@ -140,6 +123,7 @@ function formatBytes(bytes) {
 async function videoUpload(file, opts) {
   const config = requireConfig();
   const api = new ApiClient(config);
+  await printIdentity(api);
   const skipTranscode = opts.transcode === false;
   let stat;
   try {
@@ -175,7 +159,7 @@ File: ${filename} (${formatBytes(sizeBytes)})`);
   }
   const uploadSpinner = ora("Uploading to S3...").start();
   try {
-    const fileBuffer = readFileSync2(file);
+    const fileBuffer = readFileSync(file);
     const res = await fetch(uploadUrl, {
       method: "PUT",
       headers: { "Content-Type": contentType },
@@ -247,7 +231,7 @@ Check status later: catalogs video status ${videoId}
 `);
 }
 function sleep(ms) {
-  return new Promise((resolve) => setTimeout(resolve, ms));
+  return new Promise((resolve4) => setTimeout(resolve4, ms));
 }
 
 // src/commands/video-status.ts
@@ -280,24 +264,353 @@ async function videoStatus(videoId) {
 
 // src/commands/catalog-push.ts
 import { readFileSync as readFileSync3 } from "fs";
+import { resolve as resolve2, extname as extname2, dirname } from "path";
+import { pathToFileURL } from "url";
 import ora3 from "ora";
+
+// src/lib/serialize.ts
+var MAX_CATALOG_SIZE_KB = 512;
+function serializeCatalog(obj) {
+  if (obj === null || obj === void 0) return obj;
+  if (typeof obj === "function") {
+    return obj.toString();
+  }
+  if (Array.isArray(obj)) {
+    return obj.map((item) => serializeCatalog(item));
+  }
+  if (typeof obj === "object") {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+      result[key] = serializeCatalog(value);
+    }
+    return result;
+  }
+  return obj;
+}
+function validateCatalog(schema) {
+  const errors = [];
+  if (!schema.slug) {
+    errors.push("Schema must have a 'slug' field");
+  }
+  if (!schema.schema_version) {
+    errors.push("Schema must have a 'schema_version' field");
+  }
+  if (!schema.settings?.theme) {
+    errors.push("Schema must have 'settings.theme'");
+  }
+  if (!schema.pages || Object.keys(schema.pages).length === 0) {
+    errors.push("Schema must have at least one page in 'pages'");
+  }
+  if (!schema.routing) {
+    errors.push("Schema must have a 'routing' object");
+  }
+  const json = JSON.stringify(schema);
+  const sizeKB = Math.round(json.length / 1024);
+  if (sizeKB > MAX_CATALOG_SIZE_KB) {
+    errors.push(
+      `Catalog too large (${sizeKB}KB). Max: ${MAX_CATALOG_SIZE_KB}KB. Move heavy assets to settings.scripts[] CDN imports.`
+    );
+  }
+  return errors;
+}
+
+// src/lib/resolve-assets.ts
+import { existsSync, readFileSync as readFileSync2, statSync as statSync2 } from "fs";
+import { resolve, join, extname, basename as basename2 } from "path";
+var FILE_PROPS = /* @__PURE__ */ new Set(["src", "poster", "hls_url", "href", "link"]);
+var IMAGE_EXTS = /* @__PURE__ */ new Set([".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".avif", ".ico"]);
+var VIDEO_EXTS = /* @__PURE__ */ new Set([".mp4", ".mov", ".webm", ".avi", ".mkv", ".m4v", ".wmv", ".flv"]);
+function isLocalRef(value) {
+  if (!value || typeof value !== "string") return false;
+  if (value.startsWith("http://") || value.startsWith("https://") || value.startsWith("//")) return false;
+  if (value.startsWith("data:")) return false;
+  if (value.startsWith("{{")) return false;
+  return value.startsWith("./") || value.startsWith("../") || !value.startsWith("/");
+}
+function rewriteHtmlLocalRefs(html, catalogDir, baseUrl) {
+  return html.replace(
+    /(\bsrc\s*=\s*)(["'])(\.\.?\/[^"']+)\2/gi,
+    (match, prefix, quote, path) => {
+      if (isLocalRef(path)) {
+        const fullPath = resolve(join(catalogDir, path));
+        if (existsSync(fullPath)) {
+          const relativePath = fullPath.slice(resolve(catalogDir).length + 1);
+          return `${prefix}${quote}${baseUrl}/${relativePath}${quote}`;
+        }
+      }
+      return match;
+    }
+  );
+}
+function resolveLocalAssets(schema, catalogDir, baseUrl) {
+  return walkAndRewrite(schema, catalogDir, (localPath) => {
+    const relativePath = localPath.slice(resolve(catalogDir).length + 1);
+    return `${baseUrl}/${relativePath}`;
+  }, baseUrl);
+}
+async function uploadLocalAssets(schema, catalogDir, api, onProgress) {
+  const localRefs = /* @__PURE__ */ new Map();
+  collectLocalRefs(schema, catalogDir, localRefs);
+  collectHtmlLocalRefs(schema, catalogDir, localRefs);
+  if (localRefs.size === 0) {
+    return { schema, uploaded: 0, errors: [] };
+  }
+  const uploadMap = /* @__PURE__ */ new Map();
+  const errors = [];
+  let uploaded = 0;
+  for (const localPath of localRefs.keys()) {
+    const ext = extname(localPath).toLowerCase();
+    const filename = basename2(localPath);
+    try {
+      if (IMAGE_EXTS.has(ext)) {
+        onProgress?.(`Uploading image: ${filename}`);
+        const url = await uploadImage(localPath, filename, api);
+        uploadMap.set(localPath, url);
+        uploaded++;
+      } else if (VIDEO_EXTS.has(ext)) {
+        onProgress?.(`Uploading video: ${filename}`);
+        const url = await uploadVideo(localPath, filename, api);
+        uploadMap.set(localPath, url);
+        uploaded++;
+      } else {
+        onProgress?.(`Uploading file: ${filename}`);
+        const url = await uploadFile(localPath, filename, api);
+        uploadMap.set(localPath, url);
+        uploaded++;
+      }
+    } catch (err) {
+      errors.push(`${filename}: ${err.message}`);
+    }
+  }
+  const resolved = walkAndRewrite(schema, catalogDir, (localPath) => {
+    return uploadMap.get(localPath) || localPath;
+  });
+  return { schema: resolved, uploaded, errors };
+}
+function walkAndRewrite(obj, catalogDir, resolver, htmlBaseUrl) {
+  if (obj === null || obj === void 0) return obj;
+  if (typeof obj === "string") return obj;
+  if (Array.isArray(obj)) {
+    return obj.map((item) => walkAndRewrite(item, catalogDir, resolver, htmlBaseUrl));
+  }
+  if (typeof obj === "object") {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+      if (typeof value === "string" && FILE_PROPS.has(key) && isLocalRef(value)) {
+        const localPath = resolve(join(catalogDir, value));
+        if (existsSync(localPath)) {
+          result[key] = resolver(localPath);
+        } else {
+          result[key] = value;
+        }
+      } else if (key === "content" && typeof value === "string" && value.includes("<")) {
+        if (htmlBaseUrl) {
+          result[key] = rewriteHtmlLocalRefs(value, catalogDir, htmlBaseUrl);
+        } else {
+          result[key] = rewriteHtmlForUpload(value, catalogDir, resolver);
+        }
+      } else {
+        result[key] = walkAndRewrite(value, catalogDir, resolver, htmlBaseUrl);
+      }
+    }
+    return result;
+  }
+  return obj;
+}
+function rewriteHtmlForUpload(html, catalogDir, resolver) {
+  return html.replace(
+    /(\bsrc\s*=\s*)(["'])(\.\.?\/[^"']+)\2/gi,
+    (match, prefix, quote, path) => {
+      if (isLocalRef(path)) {
+        const fullPath = resolve(join(catalogDir, path));
+        if (existsSync(fullPath)) {
+          const resolved = resolver(fullPath);
+          return `${prefix}${quote}${resolved}${quote}`;
+        }
+      }
+      return match;
+    }
+  );
+}
+function collectLocalRefs(obj, catalogDir, refs) {
+  if (obj === null || obj === void 0 || typeof obj !== "object") return;
+  if (Array.isArray(obj)) {
+    for (const item of obj) collectLocalRefs(item, catalogDir, refs);
+    return;
+  }
+  for (const [key, value] of Object.entries(obj)) {
+    if (typeof value === "string" && FILE_PROPS.has(key) && isLocalRef(value)) {
+      const localPath = resolve(join(catalogDir, value));
+      if (existsSync(localPath)) {
+        refs.set(localPath, "");
+      }
+    } else if (typeof value === "object") {
+      collectLocalRefs(value, catalogDir, refs);
+    }
+  }
+}
+function collectHtmlLocalRefs(obj, catalogDir, refs) {
+  if (obj === null || obj === void 0 || typeof obj !== "object") return;
+  if (Array.isArray(obj)) {
+    for (const item of obj) collectHtmlLocalRefs(item, catalogDir, refs);
+    return;
+  }
+  for (const [key, value] of Object.entries(obj)) {
+    if (key === "content" && typeof value === "string" && value.includes("<")) {
+      const matches = value.matchAll(/\bsrc\s*=\s*["'](\.\.?\/[^"']+)["']/gi);
+      for (const m of matches) {
+        const path = m[1];
+        if (isLocalRef(path)) {
+          const localPath = resolve(join(catalogDir, path));
+          if (existsSync(localPath)) {
+            refs.set(localPath, "");
+          }
+        }
+      }
+    } else if (typeof value === "object") {
+      collectHtmlLocalRefs(value, catalogDir, refs);
+    }
+  }
+}
+async function uploadImage(localPath, filename, api) {
+  const ext = extname(filename).toLowerCase();
+  const contentType = {
+    ".png": "image/png",
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".gif": "image/gif",
+    ".svg": "image/svg+xml",
+    ".webp": "image/webp",
+    ".avif": "image/avif",
+    ".ico": "image/x-icon"
+  }[ext] || "image/png";
+  const sizeBytes = statSync2(localPath).size;
+  const res = await api.post("/api/v1/images/upload", {
+    filename,
+    content_type: contentType,
+    size_bytes: sizeBytes
+  });
+  const uploadUrl = res.data.upload_url;
+  const compressedUrl = res.data.compressed_url;
+  const originalUrl = res.data.original_url;
+  const fileBuffer = readFileSync2(localPath);
+  const putRes = await fetch(uploadUrl, {
+    method: "PUT",
+    headers: { "Content-Type": contentType },
+    body: fileBuffer
+  });
+  if (!putRes.ok) throw new Error(`S3 upload failed: ${putRes.status}`);
+  return compressedUrl || originalUrl;
+}
+async function uploadVideo(localPath, filename, api) {
+  const ext = extname(filename).toLowerCase();
+  const contentType = {
+    ".mp4": "video/mp4",
+    ".mov": "video/quicktime",
+    ".webm": "video/webm",
+    ".avi": "video/x-msvideo",
+    ".mkv": "video/x-matroska",
+    ".m4v": "video/x-m4v",
+    ".wmv": "video/x-ms-wmv",
+    ".flv": "video/x-flv"
+  }[ext] || "video/mp4";
+  const sizeBytes = statSync2(localPath).size;
+  const res = await api.post("/api/v1/videos/upload", {
+    filename,
+    content_type: contentType,
+    size_bytes: sizeBytes
+  });
+  const uploadUrl = res.data.upload_url;
+  const videoId = res.data.video_id;
+  const fileBuffer = readFileSync2(localPath);
+  const putRes = await fetch(uploadUrl, {
+    method: "PUT",
+    headers: { "Content-Type": contentType },
+    body: fileBuffer
+  });
+  if (!putRes.ok) throw new Error(`S3 upload failed: ${putRes.status}`);
+  try {
+    const transcodeRes = await api.post(`/api/v1/videos/${videoId}/transcode`);
+    if (transcodeRes.data?.hls_url) {
+      return transcodeRes.data.hls_url;
+    }
+  } catch {
+  }
+  return res.data.video_url || res.data.original_url || `video:${videoId}`;
+}
+async function uploadFile(localPath, filename, api) {
+  const sizeBytes = statSync2(localPath).size;
+  const res = await api.post("/api/v1/files/upload", {
+    filename,
+    size_bytes: sizeBytes
+  });
+  const uploadUrl = res.data.upload_url;
+  const downloadUrl = res.data.download_url || res.data.url;
+  const fileBuffer = readFileSync2(localPath);
+  const putRes = await fetch(uploadUrl, {
+    method: "PUT",
+    body: fileBuffer
+  });
+  if (!putRes.ok) throw new Error(`S3 upload failed: ${putRes.status}`);
+  return downloadUrl;
+}
+
+// src/commands/catalog-push.ts
+async function loadTsFile(file) {
+  const abs = resolve2(file);
+  const { register } = await import("module");
+  register("tsx/esm", pathToFileURL("./"));
+  const mod = await import(pathToFileURL(abs).href);
+  return mod.default ?? mod;
+}
 async function catalogPush(file, opts) {
   const config = requireConfig();
   const api = new ApiClient(config);
+  await printIdentity(api);
+  const ext = extname2(file).toLowerCase();
+  const isTs = ext === ".ts" || ext === ".mts";
   let schema;
   try {
-    const raw = readFileSync3(file, "utf-8");
-    schema = JSON.parse(raw);
+    if (isTs) {
+      const rawCatalog = await loadTsFile(file);
+      schema = serializeCatalog(rawCatalog);
+    } else {
+      const raw = readFileSync3(file, "utf-8");
+      schema = JSON.parse(raw);
+    }
   } catch (err) {
     console.error(`Failed to read ${file}: ${err.message}`);
     process.exit(1);
   }
-  const slug = schema.slug;
-  const name = schema.catalog_id || schema.slug || file;
-  if (!slug) {
-    console.error("Schema must have a 'slug' field");
+  const errors = validateCatalog(schema);
+  if (errors.length > 0) {
+    for (const err of errors) {
+      console.error(`Error: ${err}`);
+    }
     process.exit(1);
   }
+  const catalogDir = dirname(resolve2(file));
+  const assetSpinner = ora3("Checking for local assets...").start();
+  try {
+    const result = await uploadLocalAssets(schema, catalogDir, api, (msg) => {
+      assetSpinner.text = msg;
+    });
+    schema = result.schema;
+    if (result.uploaded > 0) {
+      assetSpinner.succeed(`Uploaded ${result.uploaded} local asset(s) to CDN`);
+    } else {
+      assetSpinner.succeed("No local assets to upload");
+    }
+    if (result.errors.length > 0) {
+      for (const err of result.errors) {
+        console.error(`  Warning: ${err}`);
+      }
+    }
+  } catch (err) {
+    assetSpinner.warn(`Asset upload failed: ${err.message} (continuing with push)`);
+  }
+  const slug = schema.slug;
+  const name = schema.catalog_id || schema.slug || file;
   const status = opts.publish ? "published" : "draft";
   const spinner = ora3(`Pushing catalog "${slug}"...`).start();
   try {
@@ -364,16 +677,411 @@ async function catalogList() {
   }
 }
 
+// src/commands/catalog-dev.ts
+import { resolve as resolve3, dirname as dirname2, extname as extname3, join as join2 } from "path";
+import { existsSync as existsSync2, readFileSync as readFileSync4, statSync as statSync3, watch } from "fs";
+import { pathToFileURL as pathToFileURL2 } from "url";
+import { createServer } from "http";
+import ora5 from "ora";
+var DEFAULT_PORT = 3456;
+async function loadCatalogFile(file) {
+  const abs = resolve3(file);
+  const ext = extname3(file).toLowerCase();
+  const isTs = ext === ".ts" || ext === ".mts";
+  if (isTs) {
+    const { register } = await import("module");
+    register("tsx/esm", pathToFileURL2("./"));
+    const url = pathToFileURL2(abs).href + `?t=${Date.now()}`;
+    const mod = await import(url);
+    return serializeCatalog(mod.default ?? mod);
+  } else {
+    const raw = readFileSync4(abs, "utf-8");
+    return JSON.parse(raw);
+  }
+}
+var MIME_TYPES = {
+  ".html": "text/html",
+  ".js": "application/javascript",
+  ".css": "text/css",
+  ".json": "application/json",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+  ".webp": "image/webp",
+  ".avif": "image/avif",
+  ".ico": "image/x-icon",
+  ".mp4": "video/mp4",
+  ".webm": "video/webm",
+  ".mov": "video/quicktime",
+  ".mp3": "audio/mpeg",
+  ".wav": "audio/wav",
+  ".pdf": "application/pdf",
+  ".zip": "application/zip",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".ttf": "font/ttf",
+  ".otf": "font/otf"
+};
+function getMime(filepath) {
+  const ext = extname3(filepath).toLowerCase();
+  return MIME_TYPES[ext] || "application/octet-stream";
+}
+function buildPreviewHtml(schema, port) {
+  const schemaJson = JSON.stringify(schema);
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${schema.slug || "Catalog"} \u2014 Local Preview</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
+    .dev-banner {
+      position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
+      background: #1a1a2e; color: #e0e0ff; font-size: 12px;
+      padding: 4px 12px; display: flex; align-items: center; gap: 8px;
+      font-family: monospace; border-bottom: 2px solid #6c63ff;
+    }
+    .dev-banner .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; }
+    .dev-banner .label { opacity: 0.7; }
+    .dev-banner .slug { font-weight: bold; color: #a5b4fc; }
+    .dev-banner .stub-tags { margin-left: auto; display: flex; gap: 6px; }
+    .dev-banner .stub-tag {
+      background: rgba(255,255,255,0.1); border-radius: 3px;
+      padding: 1px 6px; font-size: 11px; color: #fbbf24;
+    }
+    #catalog-root { padding-top: 28px; }
+    .checkout-stub {
+      background: #fef3c7; border: 2px dashed #f59e0b; border-radius: 8px;
+      padding: 20px; text-align: center; margin: 16px;
+    }
+    .checkout-stub h3 { margin: 0 0 8px; color: #92400e; }
+    .checkout-stub p { margin: 0; color: #a16207; font-size: 14px; }
+  </style>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body>
+  <div class="dev-banner">
+    <span class="dot"></span>
+    <span class="label">LOCAL DEV</span>
+    <span class="slug">${schema.slug || "catalog"}</span>
+    <span class="stub-tags">
+      <span class="stub-tag">Checkout: stubbed</span>
+      <span class="stub-tag">Analytics: off</span>
+    </span>
+  </div>
+  <div id="catalog-root"></div>
+
+  <script type="module">
+    import React from 'https://esm.sh/react@18?bundle';
+    import ReactDOM from 'https://esm.sh/react-dom@18/client?bundle';
+
+    const schema = ${schemaJson};
+
+    // Render catalog schema as a formatted preview
+    function CatalogPreview({ catalog }) {
+      const pages = catalog.pages || {};
+      const pageKeys = Object.keys(pages);
+      const [currentPage, setCurrentPage] = React.useState(catalog.routing?.entry || pageKeys[0] || null);
+
+      const page = currentPage ? pages[currentPage] : null;
+
+      function renderComponent(comp, i) {
+        const props = comp.props || {};
+        const type = comp.type;
+
+        switch (type) {
+          case 'heading':
+            const Tag = props.level === 2 ? 'h2' : props.level === 3 ? 'h3' : 'h1';
+            return React.createElement(Tag, { key: i, className: 'text-2xl font-bold mb-4 px-4', dangerouslySetInnerHTML: { __html: props.text || '' } });
+
+          case 'paragraph':
+            return React.createElement('p', { key: i, className: 'text-gray-700 mb-4 px-4 leading-relaxed', dangerouslySetInnerHTML: { __html: props.text || '' } });
+
+          case 'image':
+            return React.createElement('div', { key: i, className: 'px-4 mb-4' },
+              React.createElement('img', {
+                src: props.src || '',
+                alt: props.alt || '',
+                className: 'max-w-full rounded-lg',
+                style: { maxHeight: '400px', objectFit: 'contain' }
+              })
+            );
+
+          case 'video':
+            const videoSrc = props.src || props.hls_url || '';
+            return React.createElement('div', { key: i, className: 'px-4 mb-4' },
+              React.createElement('video', {
+                src: videoSrc,
+                controls: true,
+                className: 'max-w-full rounded-lg',
+                poster: props.poster || undefined
+              })
+            );
+
+          case 'html':
+            return React.createElement('div', {
+              key: i,
+              className: 'px-4 mb-4',
+              dangerouslySetInnerHTML: { __html: props.content || '' }
+            });
+
+          case 'short_text':
+          case 'email':
+          case 'phone':
+          case 'url':
+            return React.createElement('div', { key: i, className: 'px-4 mb-4' },
+              props.label ? React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, props.label) : null,
+              React.createElement('input', {
+                type: type === 'email' ? 'email' : type === 'phone' ? 'tel' : type === 'url' ? 'url' : 'text',
+                placeholder: props.placeholder || '',
+                className: 'w-full border border-gray-300 rounded-lg px-3 py-2 text-sm'
+              })
+            );
+
+          case 'long_text':
+            return React.createElement('div', { key: i, className: 'px-4 mb-4' },
+              props.label ? React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, props.label) : null,
+              React.createElement('textarea', {
+                placeholder: props.placeholder || '',
+                className: 'w-full border border-gray-300 rounded-lg px-3 py-2 text-sm',
+                rows: 4
+              })
+            );
+
+          case 'multiple_choice':
+            return React.createElement('div', { key: i, className: 'px-4 mb-4' },
+              props.label ? React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-2' }, props.label) : null,
+              React.createElement('div', { className: 'space-y-2' },
+                ...(props.options || []).map((opt, j) =>
+                  React.createElement('button', {
+                    key: j,
+                    className: 'block w-full text-left border border-gray-300 rounded-lg px-4 py-3 text-sm hover:border-blue-500 hover:bg-blue-50 transition'
+                  }, typeof opt === 'string' ? opt : opt.label || opt.value || '')
+                )
+              )
+            );
+
+          case 'dropdown':
+            return React.createElement('div', { key: i, className: 'px-4 mb-4' },
+              props.label ? React.createElement('label', { className: 'block text-sm font-medium text-gray-700 mb-1' }, props.label) : null,
+              React.createElement('select', { className: 'w-full border border-gray-300 rounded-lg px-3 py-2 text-sm' },
+                React.createElement('option', { value: '' }, props.placeholder || 'Select...'),
+                ...(props.options || []).map((opt, j) =>
+                  React.createElement('option', { key: j, value: typeof opt === 'string' ? opt : opt.value },
+                    typeof opt === 'string' ? opt : opt.label || opt.value || ''
+                  )
+                )
+              )
+            );
+
+          case 'payment':
+            return React.createElement('div', { key: i, className: 'checkout-stub' },
+              React.createElement('h3', null, 'Stripe Checkout'),
+              React.createElement('p', null, 'Payment would trigger here in production.'),
+              props.amount ? React.createElement('p', { className: 'mt-2 font-bold' },
+                (props.currency || 'USD').toUpperCase() + ' ' + (props.amount / 100).toFixed(2)
+              ) : null
+            );
+
+          case 'banner':
+            const bannerColors = {
+              info: 'bg-blue-50 border-blue-200 text-blue-800',
+              success: 'bg-green-50 border-green-200 text-green-800',
+              warning: 'bg-yellow-50 border-yellow-200 text-yellow-800',
+              error: 'bg-red-50 border-red-200 text-red-800',
+            };
+            return React.createElement('div', {
+              key: i,
+              className: 'px-4 mb-4'
+            },
+              React.createElement('div', {
+                className: 'border rounded-lg px-4 py-3 text-sm ' + (bannerColors[props.style] || bannerColors.info),
+                dangerouslySetInnerHTML: { __html: props.text || '' }
+              })
+            );
+
+          case 'divider':
+            return React.createElement('hr', { key: i, className: 'my-6 mx-4 border-gray-200' });
+
+          case 'file_download':
+            return React.createElement('div', { key: i, className: 'px-4 mb-4' },
+              React.createElement('a', {
+                href: props.src || '#',
+                download: props.filename || 'file',
+                className: 'inline-flex items-center gap-2 border border-gray-300 rounded-lg px-4 py-2 text-sm hover:bg-gray-50'
+              }, '\u{1F4E5} ' + (props.filename || props.label || 'Download File'))
+            );
+
+          default:
+            return React.createElement('div', {
+              key: i,
+              className: 'px-4 mb-4 bg-gray-50 border border-dashed border-gray-300 rounded-lg p-3 text-xs text-gray-500'
+            }, '[' + type + '] ' + (props.label || props.text || comp.id || ''));
+        }
+      }
+
+      if (!page) {
+        return React.createElement('div', { className: 'p-8 text-center text-gray-500' }, 'No pages found in catalog.');
+      }
+
+      const components = page.components || [];
+      const pageTitle = page.title;
+
+      return React.createElement('div', { className: 'max-w-2xl mx-auto py-8' },
+        // Page navigation
+        React.createElement('div', { className: 'flex gap-1 px-4 mb-6 overflow-x-auto' },
+          ...pageKeys.map(key =>
+            React.createElement('button', {
+              key: key,
+              onClick: () => setCurrentPage(key),
+              className: 'px-3 py-1 text-xs rounded-full whitespace-nowrap ' +
+                (key === currentPage ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200')
+            }, pages[key].title || key)
+          )
+        ),
+        // Page title
+        pageTitle ? React.createElement('h1', { className: 'text-xl font-bold px-4 mb-4' }, pageTitle) : null,
+        // Components
+        ...components.map(renderComponent),
+        // Navigation buttons
+        React.createElement('div', { className: 'px-4 mt-6 flex gap-3' },
+          React.createElement('button', {
+            className: 'px-6 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700',
+            onClick: () => {
+              const idx = pageKeys.indexOf(currentPage);
+              if (idx < pageKeys.length - 1) setCurrentPage(pageKeys[idx + 1]);
+            }
+          }, page.cta_text || 'Continue'),
+        )
+      );
+    }
+
+    const root = ReactDOM.createRoot(document.getElementById('catalog-root'));
+    root.render(React.createElement(CatalogPreview, { catalog: schema }));
+  </script>
+</body>
+</html>`;
+}
+async function catalogDev(file, opts) {
+  const abs = resolve3(file);
+  const catalogDir = dirname2(abs);
+  const port = parseInt(opts.port || String(DEFAULT_PORT), 10);
+  if (!existsSync2(abs)) {
+    console.error(`File not found: ${file}`);
+    process.exit(1);
+  }
+  const spinner = ora5("Loading catalog schema...").start();
+  let schema;
+  try {
+    schema = await loadCatalogFile(abs);
+  } catch (err) {
+    spinner.fail(`Failed to load catalog: ${err.message}`);
+    process.exit(1);
+  }
+  const errors = validateCatalog(schema);
+  if (errors.length > 0) {
+    spinner.fail("Schema validation errors:");
+    for (const err of errors) {
+      console.error(`  - ${err}`);
+    }
+    process.exit(1);
+  }
+  const localBaseUrl = `http://localhost:${port}/assets`;
+  schema = resolveLocalAssets(schema, catalogDir, localBaseUrl);
+  spinner.succeed(`Loaded: ${schema.slug || file}`);
+  console.log(`  Pages: ${Object.keys(schema.pages || {}).length}`);
+  console.log(`  Entry: ${schema.routing?.entry || "first page"}`);
+  console.log();
+  const server = createServer(async (req, res) => {
+    const url = new URL(req.url || "/", `http://localhost:${port}`);
+    if (url.pathname.startsWith("/assets/")) {
+      const relativePath = decodeURIComponent(url.pathname.slice("/assets/".length));
+      const filePath = join2(catalogDir, relativePath);
+      const resolved = resolve3(filePath);
+      if (!resolved.startsWith(resolve3(catalogDir))) {
+        res.writeHead(403);
+        res.end("Forbidden");
+        return;
+      }
+      try {
+        if (!existsSync2(resolved) || !statSync3(resolved).isFile()) {
+          res.writeHead(404);
+          res.end("Not found");
+          return;
+        }
+        const content = readFileSync4(resolved);
+        res.writeHead(200, {
+          "Content-Type": getMime(resolved),
+          "Cache-Control": "no-cache",
+          "Access-Control-Allow-Origin": "*"
+        });
+        res.end(content);
+      } catch {
+        res.writeHead(500);
+        res.end("Internal error");
+      }
+      return;
+    }
+    res.writeHead(200, {
+      "Content-Type": "text/html; charset=utf-8",
+      "Cache-Control": "no-cache"
+    });
+    res.end(buildPreviewHtml(schema, port));
+  });
+  server.listen(port, () => {
+    console.log(`  Local preview: http://localhost:${port}`);
+    console.log(`  Assets served from: ${catalogDir}`);
+    console.log(`  Watching for changes...
+`);
+  });
+  let debounce = null;
+  watch(abs, () => {
+    if (debounce) clearTimeout(debounce);
+    debounce = setTimeout(async () => {
+      const reloadSpinner = ora5("Reloading catalog...").start();
+      try {
+        schema = await loadCatalogFile(abs);
+        const errs = validateCatalog(schema);
+        if (errs.length > 0) {
+          reloadSpinner.warn("Schema has validation errors:");
+          for (const e of errs) console.error(`  - ${e}`);
+          return;
+        }
+        schema = resolveLocalAssets(schema, catalogDir, localBaseUrl);
+        reloadSpinner.succeed(`Reloaded \u2014 refresh browser to see changes`);
+      } catch (err) {
+        reloadSpinner.warn(`Reload failed: ${err.message}`);
+      }
+    }, 300);
+  });
+  try {
+    watch(catalogDir, { recursive: true }, (event, filename) => {
+      if (!filename || filename.startsWith(".") || resolve3(join2(catalogDir, filename)) === abs) return;
+    });
+  } catch {
+  }
+  process.on("SIGINT", () => {
+    console.log("\nStopping dev server...");
+    server.close();
+    process.exit(0);
+  });
+}
+
 // src/commands/whoami.ts
 async function whoami() {
   const config = getConfig();
-  if (!config.api_url || !config.token) {
+  if (!config.token) {
     console.log("\nNot configured.\n");
-    console.log("Set these environment variables:");
-    console.log("  CATALOGS_API_URL  \u2014 API base URL (e.g. https://catalog-funnel-api-staging.cloud.zoomgtm.com)");
-    console.log("  CATALOGS_TOKEN    \u2014 API key (cfk_... or base64 legacy token)");
-    console.log("\nOr create ~/.catalogs-cli/config.json:");
-    console.log('  { "api_url": "...", "token": "..." }\n');
+    console.log("Set this environment variable:");
+    console.log("  CATALOG_KIT_TOKEN \u2014 API key (cfk_... or base64 legacy token)");
+    console.log("\nOptionally override the API URL (defaults to https://api.catalogkit.cc):");
+    console.log("  CATALOG_KIT_API_URL \u2014 API base URL");
+    console.log("\nOr create ~/.catalog-kit/config.json:");
+    console.log('  { "token": "cfk_..." }\n');
     return;
   }
   const tokenPreview = config.token.length > 12 ? config.token.slice(0, 8) + "..." + config.token.slice(-4) : "***";
@@ -381,28 +1089,60 @@ async function whoami() {
   api_url: ${config.api_url}`);
   console.log(`  token:   ${tokenPreview}`);
   try {
-    const res = await fetch(`${config.api_url}/health`);
-    if (res.ok) {
-      const data = await res.json();
-      console.log(`  stage:   ${data.stage || "unknown"}`);
-      console.log(`  status:  connected`);
-    } else {
-      console.log(`  status:  error (${res.status})`);
+    const api = new ApiClient(config);
+    const res = await api.get("/api/v1/me");
+    if (res.ok && res.data) {
+      const d = res.data;
+      console.log(`  status:  authenticated`);
+      console.log();
+      console.log(`  user_id:         ${d.user_id}`);
+      if (d.email) console.log(`  email:           ${d.email}`);
+      if (d.username) console.log(`  username:        ${d.username}`);
+      if (d.subdomain) console.log(`  subdomain:       ${d.subdomain}`);
+      if (d.custom_domain) console.log(`  custom_domain:   ${d.custom_domain}`);
+      if (d.catalog_url) console.log(`  catalog_url:     ${d.catalog_url}`);
+      console.log(`  credits:         ${d.credits}`);
+      console.log(`  auth_method:     ${d.auth_method}`);
+      if (d.api_key_id) console.log(`  api_key_id:      ${d.api_key_id}`);
+      console.log(`  is_superadmin:   ${d.is_superadmin}`);
+      console.log(`  stripe_key_set:  ${d.stripe_key_set}`);
+      if (d.stripe_key_last4) console.log(`  stripe_key_last4: ...${d.stripe_key_last4}`);
+      console.log(`  officex:         ${d.officex_connected ? "connected" : "not connected"}`);
+      console.log(`  created_at:      ${d.created_at}`);
     }
   } catch (err) {
-    console.log(`  status:  unreachable (${err.message})`);
+    try {
+      const res = await fetch(`${config.api_url}/health`);
+      if (res.ok) {
+        const data = await res.json();
+        console.log(`  stage:   ${data.stage || "unknown"}`);
+        console.log(`  status:  connected (could not fetch user: ${err.message})`);
+      } else {
+        console.log(`  status:  error (${res.status})`);
+      }
+    } catch (healthErr) {
+      console.log(`  status:  unreachable (${healthErr.message})`);
+    }
   }
   console.log();
 }
 
 // src/index.ts
+var require2 = createRequire(import.meta.url);
+var { version } = require2("../../package.json");
 var program = new Command();
-program.name("catalogs").description("CLI for Catalog Funnel \u2014 upload videos, push catalogs, manage assets").version("0.1.0");
+program.name("catalogs").description("CLI for Catalog Kit \u2014 upload videos, push catalogs, manage assets").version(version).option("--token <token>", "Auth token (overrides CATALOG_KIT_TOKEN env var)").hook("preAction", (thisCommand) => {
+  const opts = thisCommand.opts();
+  if (opts.token) {
+    setGlobalToken(opts.token);
+  }
+});
 var video = program.command("video").description("Video upload & transcoding");
 video.command("upload <file>").description("Upload a video file \u2192 transcode to HLS \u2192 return hls_url").option("--no-transcode", "Skip transcoding (upload only)").action(videoUpload);
 video.command("status <videoId>").description("Check transcode status for a video").action(videoStatus);
 var catalog = program.command("catalog").description("Catalog schema management");
-catalog.command("push <file>").description("Create or update a catalog from a JSON schema file").option("--publish", "Set status to published (default: draft)").action(catalogPush);
+catalog.command("push <file>").description("Create or update a catalog from a JSON or TypeScript schema file").option("--publish", "Set status to published (default: draft)").action(catalogPush);
 catalog.command("list").description("List all catalogs").action(catalogList);
+catalog.command("dev <file>").description("Preview a catalog locally with hot reload and local asset serving").option("--port <port>", "Port to serve on (default: 3456)").action(catalogDev);
 program.command("whoami").description("Show current authentication info").action(whoami);
 program.parse();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@officexapp/catalogs-cli",
-  "version": "0.1.0",
-  "description": "CLI for Catalog Funnel — upload videos, push catalogs, manage assets",
+  "version": "0.2.1",
+  "description": "CLI for Catalog Kit — upload videos, push catalogs, manage assets",
   "type": "module",
   "bin": {
     "catalogs": "./dist/index.js"
@@ -15,7 +15,7 @@
     "dist"
   ],
   "keywords": [
-    "catalog-funnel",
+    "catalog-kit",
     "officex",
     "cli",
     "video",
@@ -31,12 +31,12 @@
   },
   "dependencies": {
     "commander": "^12.1.0",
-    "ora": "^8.1.0"
+    "ora": "^8.1.0",
+    "tsx": "^4.19.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
     "tsup": "^8.3.0",
-    "tsx": "^4.19.0",
     "typescript": "^5.6.3"
   }
 }