@officexapp/catalogs-cli 0.2.0 → 0.2.2

package/dist/index.js

@@ -2,6 +2,9 @@
 
 // src/index.ts
 import { Command } from "commander";
+import { readFileSync as readFileSync5 } from "fs";
+import { fileURLToPath } from "url";
+import { dirname as dirname3, join as join3 } from "path";
 
 // src/config.ts
 var DEFAULT_API_URL = "https://api.catalogkit.cc";
@@ -230,7 +233,7 @@ Check status later: catalogs video status ${videoId}
 `);
 }
 function sleep(ms) {
-  return new Promise((resolve2) => setTimeout(resolve2, ms));
+  return new Promise((resolve4) => setTimeout(resolve4, ms));
 }
 
 // src/commands/video-status.ts
@@ -262,8 +265,8 @@ async function videoStatus(videoId) {
 }
 
 // src/commands/catalog-push.ts
-import { readFileSync as readFileSync2 } from "fs";
-import { resolve, extname } from "path";
+import { readFileSync as readFileSync3 } from "fs";
+import { resolve as resolve2, extname as extname2, dirname } from "path";
 import { pathToFileURL } from "url";
 import ora3 from "ora";
 
@@ -313,9 +316,250 @@ function validateCatalog(schema) {
   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 = resolve(file);
+  const abs = resolve2(file);
   const { register } = await import("module");
   register("tsx/esm", pathToFileURL("./"));
   const mod = await import(pathToFileURL(abs).href);
@@ -325,7 +569,7 @@ async function catalogPush(file, opts) {
   const config = requireConfig();
   const api = new ApiClient(config);
   await printIdentity(api);
-  const ext = extname(file).toLowerCase();
+  const ext = extname2(file).toLowerCase();
   const isTs = ext === ".ts" || ext === ".mts";
   let schema;
   try {
@@ -333,7 +577,7 @@ async function catalogPush(file, opts) {
       const rawCatalog = await loadTsFile(file);
       schema = serializeCatalog(rawCatalog);
     } else {
-      const raw = readFileSync2(file, "utf-8");
+      const raw = readFileSync3(file, "utf-8");
       schema = JSON.parse(raw);
     }
   } catch (err) {
@@ -347,6 +591,26 @@ async function catalogPush(file, opts) {
     }
     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";
@@ -415,6 +679,400 @@ 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();
@@ -472,8 +1130,10 @@ async function whoami() {
 }
 
 // src/index.ts
+var __dirname = dirname3(fileURLToPath(import.meta.url));
+var { version } = JSON.parse(readFileSync5(join3(__dirname, "../package.json"), "utf-8"));
 var program = new Command();
-program.name("catalogs").description("CLI for Catalog Kit \u2014 upload videos, push catalogs, manage assets").version("0.1.0").option("--token <token>", "Auth token (overrides CATALOG_KIT_TOKEN env var)").hook("preAction", (thisCommand) => {
+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);
@@ -485,5 +1145,6 @@ video.command("status <videoId>").description("Check transcode status for a vide
 var catalog = program.command("catalog").description("Catalog schema management");
 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,6 +1,6 @@
 {
   "name": "@officexapp/catalogs-cli",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "CLI for Catalog Kit — upload videos, push catalogs, manage assets",
   "type": "module",
   "bin": {