@officexapp/catalogs-cli 0.2.8 → 0.3.0

package/dist/index.js

@@ -4,7 +4,7 @@
 import { Command } from "commander";
 import { readFileSync as readFileSync5 } from "fs";
 import { fileURLToPath } from "url";
-import { dirname as dirname3, join as join3 } from "path";
+import { dirname as dirname3, join as join4 } from "path";
 
 // src/config.ts
 var DEFAULT_API_URL = "https://api.catalogkit.cc";
@@ -233,7 +233,7 @@ Check status later: catalogs video status ${videoId}
 `);
 }
 function sleep(ms) {
-  return new Promise((resolve4) => setTimeout(resolve4, ms));
+  return new Promise((resolve7) => setTimeout(resolve7, ms));
 }
 
 // src/commands/video-status.ts
@@ -265,9 +265,7 @@ 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 { resolve as resolve3, dirname } from "path";
 import ora3 from "ora";
 
 // src/lib/serialize.ts
@@ -315,6 +313,97 @@ function validateCatalog(schema) {
   }
   return errors;
 }
+function deepValidateCatalog(schema) {
+  const errors = [];
+  const warnings = [];
+  const pages = schema.pages || {};
+  const pageIds = new Set(Object.keys(pages));
+  const routing = schema.routing || {};
+  const edges = routing.edges || [];
+  const entry = routing.entry;
+  const KNOWN_TYPES = /* @__PURE__ */ new Set([
+    "heading",
+    "paragraph",
+    "image",
+    "video",
+    "html",
+    "banner",
+    "callout",
+    "divider",
+    "pricing_card",
+    "testimonial",
+    "faq",
+    "timeline",
+    "file_download",
+    "iframe",
+    "short_text",
+    "email",
+    "phone",
+    "url",
+    "number",
+    "password",
+    "long_text",
+    "multiple_choice",
+    "checkboxes",
+    "dropdown",
+    "slider",
+    "star_rating",
+    "switch",
+    "checkbox",
+    "payment"
+  ]);
+  if (entry && !pageIds.has(entry)) {
+    errors.push(`routing.entry "${entry}" does not exist in pages`);
+  }
+  for (const edge of edges) {
+    if (!pageIds.has(edge.from)) {
+      errors.push(`routing edge from "${edge.from}" references non-existent page`);
+    }
+    if (edge.to != null && !pageIds.has(edge.to)) {
+      errors.push(`routing edge to "${edge.to}" references non-existent page`);
+    }
+  }
+  for (const [pageId, page] of Object.entries(pages)) {
+    const components = page.components || [];
+    const compIds = /* @__PURE__ */ new Set();
+    for (const comp of components) {
+      if (comp.id && compIds.has(comp.id)) {
+        errors.push(`page "${pageId}": duplicate component ID "${comp.id}"`);
+      }
+      if (comp.id) compIds.add(comp.id);
+      if (comp.type && !KNOWN_TYPES.has(comp.type)) {
+        warnings.push(`page "${pageId}": unknown component type "${comp.type}"`);
+      }
+    }
+    if (page.offer?.accept_field) {
+      if (!compIds.has(page.offer.accept_field)) {
+        errors.push(
+          `page "${pageId}": offer.accept_field "${page.offer.accept_field}" does not match any component ID on this page`
+        );
+      }
+    }
+  }
+  if (entry && pageIds.has(entry)) {
+    const reachable = /* @__PURE__ */ new Set();
+    const queue = [entry];
+    reachable.add(entry);
+    while (queue.length > 0) {
+      const id = queue.shift();
+      for (const edge of edges) {
+        if (edge.from === id && !reachable.has(edge.to)) {
+          reachable.add(edge.to);
+          queue.push(edge.to);
+        }
+      }
+    }
+    for (const id of pageIds) {
+      if (!reachable.has(id)) {
+        warnings.push(`page "${id}" is unreachable from entry "${entry}"`);
+      }
+    }
+  }
+  return { errors, warnings };
+}
 
 // src/lib/resolve-assets.ts
 import { existsSync, readFileSync as readFileSync2, statSync as statSync2 } from "fs";
@@ -557,29 +646,33 @@ async function uploadFile(localPath, filename, api) {
   return downloadUrl;
 }
 
-// src/commands/catalog-push.ts
-async function loadTsFile(file) {
+// src/lib/load-file.ts
+import { resolve as resolve2, extname as extname2 } from "path";
+import { readFileSync as readFileSync3 } from "fs";
+async function loadCatalogFile(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;
+  const ext = extname2(file).toLowerCase();
+  const isTs = ext === ".ts" || ext === ".mts";
+  if (isTs) {
+    const { tsImport } = await import("tsx/esm/api");
+    const mod = await tsImport(abs, import.meta.url);
+    let raw = mod.default ?? mod;
+    if (raw.__esModule && raw.default) raw = raw.default;
+    return serializeCatalog(raw);
+  } else {
+    const raw = readFileSync3(abs, "utf-8");
+    return JSON.parse(raw);
+  }
 }
+
+// src/commands/catalog-push.ts
 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 {
-    if (isTs) {
-      const rawCatalog = await loadTsFile(file);
-      schema = serializeCatalog(rawCatalog);
-    } else {
-      const raw = readFileSync3(file, "utf-8");
-      schema = JSON.parse(raw);
-    }
+    schema = await loadCatalogFile(file);
   } catch (err) {
     console.error(`Failed to read ${file}: ${err.message}`);
     process.exit(1);
@@ -591,7 +684,7 @@ async function catalogPush(file, opts) {
     }
     process.exit(1);
   }
-  const catalogDir = dirname(resolve2(file));
+  const catalogDir = dirname(resolve3(file));
   const assetSpinner = ora3("Checking for local assets...").start();
   try {
     const result = await uploadLocalAssets(schema, catalogDir, api, (msg) => {
@@ -680,27 +773,11 @@ async function catalogList() {
 }
 
 // src/commands/catalog-dev.ts
-import { resolve as resolve3, dirname as dirname2, extname as extname3, join as join2 } from "path";
+import { resolve as resolve4, 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",
@@ -730,7 +807,7 @@ function getMime(filepath) {
   const ext = extname3(filepath).toLowerCase();
   return MIME_TYPES[ext] || "application/octet-stream";
 }
-function buildPreviewHtml(schema, port) {
+function buildPreviewHtml(schema, port, validation, devConfig) {
   const schemaJson = JSON.stringify(schema).replace(/<\/script/gi, "<\\/script");
   const themeColor = schema.settings?.theme?.primary_color || "#6366f1";
   return `<!DOCTYPE html>
@@ -927,6 +1004,55 @@ function buildPreviewHtml(schema, port) {
       padding: 32px; text-align: center;
       box-shadow: 0 2px 12px rgba(0,0,0,0.04);
     }
+
+    /* Validation banner */
+    .validation-banner {
+      position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999;
+      background: #7f1d1d; color: #fecaca; font-family: monospace; font-size: 12px;
+      padding: 10px 16px; max-height: 200px; overflow-y: auto;
+      border-top: 2px solid #ef4444;
+    }
+    .validation-banner .vb-header {
+      display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
+    }
+    .validation-banner .vb-header strong { color: #fca5a5; }
+    .validation-banner .vb-dismiss {
+      background: rgba(255,255,255,0.1); border: none; color: #fca5a5; border-radius: 4px;
+      padding: 2px 8px; cursor: pointer; font-size: 11px;
+    }
+    .validation-banner .vb-dismiss:hover { background: rgba(255,255,255,0.2); }
+    .validation-banner .vb-error { color: #fca5a5; }
+    .validation-banner .vb-warn { color: #fde68a; }
+
+    /* Debug panel */
+    .debug-panel {
+      position: fixed; bottom: 0; right: 0; z-index: 99998;
+      width: 380px; max-height: 60vh; background: #1e1b4b; color: #e0e7ff;
+      font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px;
+      border-top-left-radius: 12px; overflow: hidden;
+      box-shadow: -4px -4px 24px rgba(0,0,0,0.3); display: none;
+    }
+    .debug-panel.open { display: flex; flex-direction: column; }
+    .debug-panel .dp-header {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 8px 12px; background: #312e81; border-bottom: 1px solid #4338ca;
+      font-weight: 600; font-size: 12px;
+    }
+    .debug-panel .dp-close {
+      background: none; border: none; color: #a5b4fc; cursor: pointer; font-size: 14px;
+    }
+    .debug-panel .dp-body {
+      padding: 10px 12px; overflow-y: auto; flex: 1;
+    }
+    .debug-panel .dp-section { margin-bottom: 10px; }
+    .debug-panel .dp-label { color: #818cf8; font-weight: 600; font-size: 10px; text-transform: uppercase; margin-bottom: 4px; }
+    .debug-panel .dp-badge {
+      display: inline-block; background: #4338ca; color: #c7d2fe; padding: 1px 8px;
+      border-radius: 4px; font-size: 11px; font-weight: 600;
+    }
+    .debug-panel pre { margin: 0; white-space: pre-wrap; word-break: break-all; color: #c7d2fe; line-height: 1.5; }
+    .dev-banner .stub-tag.debug-btn { cursor: pointer; transition: all 0.15s ease; }
+    .dev-banner .stub-tag.debug-btn:hover { background: rgba(255,255,255,0.2); color: #a5b4fc; }
   </style>
 </head>
 <body>
@@ -935,9 +1061,10 @@ function buildPreviewHtml(schema, port) {
     <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 class="stub-tag" id="checkout-tag">${devConfig?.stripeEnabled ? "Checkout: live (test)" : "Checkout: stubbed"}</span>
+      <span class="stub-tag">Events: local</span>
       <span class="stub-tag clickable" id="pages-btn">Pages</span>
+      <span class="stub-tag debug-btn" id="debug-btn">Debug</span>
     </span>
   </div>
   <div class="pages-overlay" id="pages-overlay">
@@ -948,8 +1075,15 @@ function buildPreviewHtml(schema, port) {
   <div class="inspector-tooltip" id="inspector-tooltip" style="display:none"></div>
   <div class="inspector-active-banner" id="inspector-banner" style="display:none">Inspector active &mdash; hover elements, click to copy</div>
   <div id="catalog-root"></div>
+  <div class="debug-panel" id="debug-panel">
+    <div class="dp-header"><span>Debug Panel</span><button class="dp-close" id="debug-close">&times;</button></div>
+    <div class="dp-body" id="debug-body"></div>
+  </div>
+  <div class="validation-banner" id="validation-banner" style="display:none"></div>
 
   <script id="__catalog_data" type="application/json">${schemaJson}</script>
+  <script id="__validation_data" type="application/json">${JSON.stringify(validation || { errors: [], warnings: [] })}</script>
+  <script id="__dev_config" type="application/json">${JSON.stringify(devConfig || { stripeEnabled: false, port })}</script>
 
   <script type="module">
     import React from 'https://esm.sh/react@18';
@@ -959,6 +1093,61 @@ function buildPreviewHtml(schema, port) {
     const schema = JSON.parse(document.getElementById('__catalog_data').textContent);
     const themeColor = '${themeColor}';
 
+    // --- Visibility condition engine (ported from shared/engine/conditions.ts) ---
+    const devContext = (() => {
+      const params = {};
+      new URLSearchParams(window.location.search).forEach((v, k) => { params[k] = v; });
+      return { url_params: params, hints: {}, quiz_scores: null, video_state: null };
+    })();
+
+    function resolveConditionValue(rule, formState, ctx) {
+      const source = rule.source || 'field';
+      if (source === 'field') return rule.field != null ? formState[rule.field] : undefined;
+      if (source === 'url_param') return rule.param != null ? ctx.url_params[rule.param] : undefined;
+      if (source === 'hint') return rule.param != null ? ctx.hints[rule.param] : undefined;
+      if (source === 'score') return 0;
+      if (source === 'video') return undefined;
+      return undefined;
+    }
+
+    function applyConditionOperator(op, actual, expected) {
+      switch (op) {
+        case 'equals': return String(actual ?? '') === String(expected ?? '');
+        case 'not_equals': return String(actual ?? '') !== String(expected ?? '');
+        case 'contains':
+          if (typeof actual === 'string') return actual.includes(String(expected));
+          if (Array.isArray(actual)) return actual.includes(expected);
+          return false;
+        case 'not_contains':
+          if (typeof actual === 'string') return !actual.includes(String(expected));
+          if (Array.isArray(actual)) return !actual.includes(expected);
+          return true;
+        case 'greater_than': return Number(actual) > Number(expected);
+        case 'greater_than_or_equal': return Number(actual) >= Number(expected);
+        case 'less_than': return Number(actual) < Number(expected);
+        case 'less_than_or_equal': return Number(actual) <= Number(expected);
+        case 'is_empty': return actual == null || actual === '' || (Array.isArray(actual) && actual.length === 0);
+        case 'is_not_empty': return !(actual == null || actual === '' || (Array.isArray(actual) && actual.length === 0));
+        case 'matches_regex':
+          try { const p = String(expected); if (p.length > 200) return false; return new RegExp(p).test(String(actual ?? '')); } catch { return false; }
+        case 'in':
+          if (Array.isArray(expected)) return expected.includes(actual);
+          if (typeof expected === 'string') return expected.split(',').map(s => s.trim()).includes(String(actual));
+          return false;
+        default: return false;
+      }
+    }
+
+    function evaluateConditionGroup(group, formState, ctx) {
+      if (!group || !group.rules) return true;
+      const evaluate = (item) => {
+        if (item.match && item.rules) return evaluateConditionGroup(item, formState, ctx);
+        const actual = resolveConditionValue(item, formState, ctx);
+        return applyConditionOperator(item.operator, actual, item.value);
+      };
+      return group.match === 'all' ? group.rules.every(evaluate) : group.rules.some(evaluate);
+    }
+
     // --- Markdown-ish text rendering ---
     function inlineMarkdown(text) {
       return text
@@ -1260,13 +1449,7 @@ function buildPreviewHtml(schema, port) {
           return h(SwitchInput, { comp, type, formState, onFieldChange, isCover, compClass, compStyle });
 
         case 'payment':
-          return h('div', { className: 'checkout-stub ' + compClass, style: compStyle },
-            h('h3', null, 'Stripe Checkout (Dev Stub)'),
-            h('p', null, 'Payment processing is disabled in local dev mode.'),
-            props.amount ? h('p', { className: 'mt-2 font-bold text-lg' },
-              (props.currency || 'USD').toUpperCase() + ' ' + (props.amount / 100).toFixed(2)
-            ) : null
-          );
+          return h(PaymentComponent, { comp, formState, isCover, compClass, compStyle });
 
         default:
           return h('div', {
@@ -1427,6 +1610,267 @@ function buildPreviewHtml(schema, port) {
       );
     }
 
+    // --- Dev Config ---
+    const devConfig = JSON.parse(document.getElementById('__dev_config').textContent);
+
+    // --- Local Event Emitter ---
+    const devEvents = {
+      _sse: null,
+      init() {
+        this._sse = new EventSource('/__dev_events_stream');
+        this._sse.onerror = () => {};
+      },
+      emit(type, data) {
+        const event = { type, timestamp: new Date().toISOString(), data };
+        // Fire to local SSE listeners (agents can listen via /__dev_events_stream)
+        fetch('/__dev_event', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(event),
+        }).catch(() => {});
+        // Also dispatch as browser event for debug panel
+        window.dispatchEvent(new CustomEvent('devEvent', { detail: event }));
+      }
+    };
+    devEvents.init();
+
+    // --- Payment Component ---
+    function PaymentComponent({ comp, formState, isCover, compClass, compStyle }) {
+      const props = comp.props || {};
+      const [loading, setLoading] = React.useState(false);
+      const [error, setError] = React.useState(null);
+
+      const handleCheckout = React.useCallback(async () => {
+        devEvents.emit('checkout_started', { component_id: comp.id, amount: props.amount, currency: props.currency });
+        setLoading(true);
+        setError(null);
+        try {
+          const res = await fetch('/__dev_checkout', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              line_items: [{
+                title: props.title || comp.id,
+                amount_cents: props.amount,
+                currency: (props.currency || 'usd').toLowerCase(),
+                quantity: 1,
+                stripe_price_id: props.stripe_price_id,
+                payment_type: props.checkout_type === 'redirect' ? 'one_time' : (schema.settings?.checkout?.payment_type || 'one_time'),
+              }],
+              form_state: formState,
+              catalog_slug: schema.slug,
+            }),
+          });
+          const data = await res.json();
+          if (data.session_url) {
+            devEvents.emit('checkout_redirect', { session_id: data.session_id });
+            window.location.href = data.session_url;
+          } else if (data.error) {
+            setError(data.error);
+          }
+        } catch (err) {
+          setError(err.message || 'Checkout failed');
+        } finally {
+          setLoading(false);
+        }
+      }, [comp.id, props, formState]);
+
+      // No Stripe key \u2014 show informative stub
+      if (!devConfig.stripeEnabled) {
+        return h('div', { className: 'checkout-stub ' + compClass, style: compStyle },
+          h('h3', null, 'Stripe Checkout'),
+          h('p', null, 'Add STRIPE_SECRET_KEY to your .env to enable real checkout in dev.'),
+          props.amount ? h('p', { className: 'mt-2 font-bold text-lg' },
+            (props.currency || 'USD').toUpperCase() + ' ' + (props.amount / 100).toFixed(2)
+          ) : null,
+          h('details', { className: 'mt-3 text-left', style: { fontSize: '11px', color: '#92400e' } },
+            h('summary', { style: { cursor: 'pointer' } }, 'Checkout payload'),
+            h('pre', { style: { whiteSpace: 'pre-wrap', marginTop: '4px' } },
+              JSON.stringify({ amount: props.amount, currency: props.currency, stripe_price_id: props.stripe_price_id, payment_type: schema.settings?.checkout?.payment_type }, null, 2)
+            )
+          )
+        );
+      }
+
+      // Real Stripe checkout
+      return h('div', { className: compClass, style: compStyle },
+        h('button', {
+          className: 'cf-btn-primary w-full text-white',
+          style: { backgroundColor: themeColor, opacity: loading ? 0.7 : 1 },
+          onClick: handleCheckout,
+          disabled: loading,
+        },
+          loading ? 'Redirecting to Stripe...' : (props.button_text || (props.amount ? ((props.currency || 'USD').toUpperCase() + ' ' + (props.amount / 100).toFixed(2) + ' \u2014 Pay Now') : 'Checkout'))
+        ),
+        error ? h('p', { className: 'text-red-500 text-sm mt-2 text-center' }, error) : null
+      );
+    }
+
+    // --- Cart Components ---
+    const cartIconPath = 'M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z';
+
+    function CartButton({ itemCount, onClick }) {
+      if (itemCount === 0) return null;
+      return h('button', {
+        onClick,
+        className: 'fixed bottom-6 right-6 z-[90] flex items-center gap-2 rounded-full px-5 py-3.5 text-white font-semibold shadow-xl transition-all duration-300 hover:scale-105 hover:shadow-2xl active:scale-95',
+        style: { backgroundColor: themeColor, fontFamily: 'var(--font-display)' },
+      },
+        h('svg', { className: 'w-5 h-5', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
+          h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: cartIconPath })
+        ),
+        h('span', null, itemCount),
+        h('span', { className: 'text-sm opacity-80' }, itemCount === 1 ? 'item' : 'items')
+      );
+    }
+
+    function CartDrawer({ items, isOpen, onToggle, onRemove }) {
+      React.useEffect(() => {
+        if (!isOpen) return;
+        const handleKey = (e) => { if (e.key === 'Escape') onToggle(); };
+        window.addEventListener('keydown', handleKey);
+        return () => window.removeEventListener('keydown', handleKey);
+      }, [isOpen, onToggle]);
+
+      return h(React.Fragment, null,
+        // Backdrop
+        h('div', {
+          className: 'fixed inset-0 z-[95] bg-black/30 backdrop-blur-sm transition-opacity duration-300 ' + (isOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'),
+          onClick: onToggle,
+        }),
+        // Drawer
+        h('div', {
+          className: 'fixed top-0 right-0 bottom-0 z-[96] w-full max-w-md bg-white shadow-2xl transition-transform duration-300 ease-out flex flex-col ' + (isOpen ? 'translate-x-0' : 'translate-x-full'),
+          style: { fontFamily: 'var(--font-display)' },
+        },
+          // Header
+          h('div', { className: 'flex items-center justify-between px-6 py-5 border-b border-gray-100' },
+            h('div', { className: 'flex items-center gap-3' },
+              h('div', { className: 'w-9 h-9 rounded-xl flex items-center justify-center', style: { backgroundColor: themeColor + '12' } },
+                h('svg', { className: 'w-5 h-5', style: { color: themeColor }, fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
+                  h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: cartIconPath })
+                )
+              ),
+              h('div', null,
+                h('h2', { className: 'text-lg font-bold text-gray-900' }, 'Your Cart'),
+                h('p', { className: 'text-xs text-gray-400' }, items.length + ' ' + (items.length === 1 ? 'item' : 'items') + ' selected')
+              )
+            ),
+            h('button', { onClick: onToggle, className: 'w-9 h-9 flex items-center justify-center rounded-xl text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-all' },
+              h('svg', { className: 'w-5 h-5', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
+                h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6 18L18 6M6 6l12 12' })
+              )
+            )
+          ),
+          // Items
+          h('div', { className: 'flex-1 overflow-y-auto px-6 py-4' },
+            items.length === 0
+              ? h('div', { className: 'flex flex-col items-center justify-center h-full text-center py-16' },
+                  h('div', { className: 'w-16 h-16 rounded-2xl flex items-center justify-center mb-4', style: { backgroundColor: themeColor + '08' } },
+                    h('svg', { className: 'w-8 h-8 text-gray-300', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 1.5 },
+                      h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: cartIconPath })
+                    )
+                  ),
+                  h('p', { className: 'text-gray-400 text-sm font-medium' }, 'No offers accepted yet'),
+                  h('p', { className: 'text-gray-300 text-xs mt-1' }, 'Accept offers as you browse to add them here')
+                )
+              : h('div', { className: 'space-y-3' },
+                  ...items.map(item => h('div', { key: item.offer_id, className: 'group flex items-start gap-4 p-4 rounded-2xl border border-gray-100 bg-gray-50/50 hover:bg-white hover:border-gray-200 hover:shadow-sm transition-all duration-200' },
+                    item.image ? h('img', { src: item.image, alt: item.title, className: 'w-14 h-14 rounded-xl object-cover flex-shrink-0' }) : null,
+                    h('div', { className: 'flex-1 min-w-0' },
+                      h('h3', { className: 'text-sm font-semibold text-gray-900 truncate' }, item.title),
+                      item.price_display ? h('p', { className: 'text-sm font-bold mt-0.5', style: { color: themeColor } }, item.price_display) : null,
+                      item.price_subtext ? h('p', { className: 'text-xs text-gray-400 mt-0.5' }, item.price_subtext) : null
+                    ),
+                    h('button', { onClick: () => onRemove(item.offer_id), className: 'w-7 h-7 flex-shrink-0 flex items-center justify-center rounded-lg text-gray-300 hover:text-red-500 hover:bg-red-50 transition-all opacity-0 group-hover:opacity-100' },
+                      h('svg', { className: 'w-4 h-4', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
+                        h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0' })
+                      )
+                    )
+                  ))
+                )
+          ),
+          // Footer
+          items.length > 0 ? h('div', { className: 'border-t border-gray-100 px-6 py-5 space-y-4' },
+            h('div', { className: 'flex items-center justify-between' },
+              h('span', { className: 'text-sm font-medium text-gray-500' }, items.length + ' ' + (items.length === 1 ? 'offer' : 'offers') + ' selected'),
+              h('div', { className: 'flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold', style: { backgroundColor: themeColor + '10', color: themeColor } },
+                h('svg', { className: 'w-3.5 h-3.5', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
+                  h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z' })
+                ),
+                'Added to order'
+              )
+            ),
+            h(CartCheckoutButton, { items, themeColor })
+          ) : null
+        )
+      );
+    }
+
+    function CartCheckoutButton({ items, themeColor }) {
+      const [loading, setLoading] = React.useState(false);
+      const [error, setError] = React.useState(null);
+
+      const handleCheckout = React.useCallback(async () => {
+        const state = window.__devDebugState;
+        devEvents.emit('cart_checkout_started', { items: items.map(i => ({ offer_id: i.offer_id, title: i.title })) });
+        setLoading(true);
+        setError(null);
+        try {
+          const res = await fetch('/__dev_checkout', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              line_items: items.map(item => ({
+                title: item.title,
+                amount_cents: item.amount_cents,
+                currency: item.currency || 'usd',
+                quantity: 1,
+                stripe_price_id: item.stripe_price_id,
+                payment_type: schema.settings?.checkout?.payment_type || 'one_time',
+              })),
+              form_state: state?.formState || {},
+              catalog_slug: schema.slug,
+            }),
+          });
+          const data = await res.json();
+          if (data.session_url) {
+            devEvents.emit('checkout_redirect', { session_id: data.session_id });
+            window.location.href = data.session_url;
+          } else if (data.error) {
+            setError(data.error);
+          }
+        } catch (err) {
+          setError(err.message || 'Checkout failed');
+        } finally {
+          setLoading(false);
+        }
+      }, [items]);
+
+      if (!devConfig.stripeEnabled) {
+        return h('div', { className: 'checkout-stub' },
+          h('h3', null, 'Checkout'),
+          h('p', null, 'Add STRIPE_SECRET_KEY to .env for real checkout.'),
+          h('details', { className: 'mt-2 text-left', style: { fontSize: '11px', color: '#92400e' } },
+            h('summary', { style: { cursor: 'pointer' } }, 'Cart payload'),
+            h('pre', { style: { whiteSpace: 'pre-wrap', marginTop: '4px' } },
+              JSON.stringify(items.map(i => ({ offer_id: i.offer_id, title: i.title, price: i.price_display })), null, 2)
+            )
+          )
+        );
+      }
+
+      return h('div', { className: 'space-y-2' },
+        h('button', {
+          className: 'cf-btn-primary w-full text-white',
+          style: { backgroundColor: themeColor, opacity: loading ? 0.7 : 1 },
+          onClick: handleCheckout,
+          disabled: loading,
+        }, loading ? 'Redirecting to Stripe...' : 'Proceed to Checkout'),
+        error ? h('p', { className: 'text-red-500 text-sm text-center' }, error) : null
+      );
+    }
+
     // --- Main App ---
     function CatalogPreview({ catalog }) {
       const pages = catalog.pages || {};
@@ -1435,13 +1879,68 @@ function buildPreviewHtml(schema, port) {
       const [currentPageId, setCurrentPageId] = React.useState(routing.entry || pageKeys[0] || null);
       const [formState, setFormState] = React.useState({});
       const [history, setHistory] = React.useState([]);
+      const [cartItems, setCartItems] = React.useState([]);
+      const [cartOpen, setCartOpen] = React.useState(false);
+
+      // --- Cart logic ---
+      const addToCart = React.useCallback((pageId) => {
+        const pg = pages[pageId];
+        if (!pg?.offer) return;
+        const offer = pg.offer;
+        setCartItems(prev => {
+          if (prev.some(item => item.offer_id === offer.id)) return prev;
+          return [...prev, {
+            offer_id: offer.id,
+            page_id: pageId,
+            title: offer.title || pageId,
+            price_display: offer.price_display,
+            price_subtext: offer.price_subtext,
+            image: offer.image,
+          }];
+        });
+      }, [pages]);
+
+      const removeFromCart = React.useCallback((offerId) => {
+        setCartItems(prev => prev.filter(item => item.offer_id !== offerId));
+        // Clear accept_field so it doesn't re-add
+        for (const [pid, pg] of Object.entries(pages)) {
+          if (pg.offer?.id === offerId && pg.offer.accept_field) {
+            setFormState(prev => { const next = { ...prev }; delete next[pg.offer.accept_field]; return next; });
+          }
+        }
+      }, [pages]);
+
+      const toggleCart = React.useCallback(() => setCartOpen(prev => !prev), []);
 
-      // Expose navigation for mindmap
+      // Detect offer acceptance from field changes
+      React.useEffect(() => {
+        for (const [pageId, pg] of Object.entries(pages)) {
+          const offer = pg.offer;
+          if (!offer?.accept_field) continue;
+          const fieldValue = formState[offer.accept_field];
+          const acceptValue = offer.accept_value || 'accept';
+          if (fieldValue === acceptValue) {
+            if (!cartItems.some(item => item.offer_id === offer.id)) addToCart(pageId);
+          } else {
+            if (cartItems.some(item => item.offer_id === offer.id) && fieldValue !== undefined) removeFromCart(offer.id);
+          }
+        }
+      }, [formState, pages, cartItems, addToCart, removeFromCart]);
+
+      // Expose navigation for mindmap + emit page_view
       React.useEffect(() => {
         window.__devNavigateTo = (id) => { setCurrentPageId(id); setHistory([]); window.scrollTo({ top: 0, behavior: 'smooth' }); };
         window.__devSetCurrentPage && window.__devSetCurrentPage(currentPageId);
+        devEvents.emit('page_view', { page_id: currentPageId, catalog_slug: catalog.slug });
       }, [currentPageId]);
 
+      // Expose debug state
+      React.useEffect(() => {
+        const edges = (routing.edges || []).filter(e => e.from === currentPageId);
+        window.__devDebugState = { currentPageId, formState, cartItems, edges };
+        window.dispatchEvent(new CustomEvent('devStateUpdate'));
+      }, [currentPageId, formState, cartItems, routing]);
+
       const page = currentPageId ? pages[currentPageId] : null;
       const isCover = page?.layout === 'cover';
       const isLastPage = (() => {
@@ -1451,16 +1950,26 @@ function buildPreviewHtml(schema, port) {
 
       const onFieldChange = React.useCallback((id, value) => {
         setFormState(prev => ({ ...prev, [id]: value }));
-      }, []);
+        devEvents.emit('field_change', { field_id: id, value, page_id: currentPageId });
+      }, [currentPageId]);
 
       const handleNext = React.useCallback(() => {
+        // Check if page has an offer \u2014 treat "Next" as an accept action
+        const currentPage = pages[currentPageId];
+        if (currentPage?.offer) {
+          const acceptValue = currentPage.offer.accept_value || 'accept';
+          // If there's no accept_field, the CTA button itself is the accept trigger
+          if (!currentPage.offer.accept_field) {
+            addToCart(currentPageId);
+          }
+        }
         const nextId = getNextPageId(currentPageId, routing, formState);
         if (nextId && pages[nextId]) {
           setHistory(prev => [...prev, currentPageId]);
           setCurrentPageId(nextId);
           window.scrollTo({ top: 0, behavior: 'smooth' });
         }
-      }, [currentPageId, routing, formState, pages]);
+      }, [currentPageId, routing, formState, pages, addToCart]);
 
       const handleBack = React.useCallback(() => {
         if (history.length > 0) {
@@ -1477,12 +1986,23 @@ function buildPreviewHtml(schema, port) {
         );
       }
 
-      const components = (page.components || []).filter(c => !c.hidden && !c.props?.hidden);
+      const components = (page.components || []).filter(c => {
+        if (c.hidden || c.props?.hidden) return false;
+        if (c.visibility) return evaluateConditionGroup(c.visibility, formState, devContext);
+        return true;
+      });
       const bgImage = page.background_image || catalog.settings?.theme?.background_image;
 
+      // Cart UI (shared between cover and standard)
+      const cartUI = h(React.Fragment, null,
+        h(CartButton, { itemCount: cartItems.length, onClick: toggleCart }),
+        h(CartDrawer, { items: cartItems, isOpen: cartOpen, onToggle: toggleCart, onRemove: removeFromCart })
+      );
+
       // Cover page layout
       if (isCover) {
         return h('div', { 'data-page-id': currentPageId },
+          cartUI,
           h('div', {
             className: 'cf-page cf-noise min-h-screen flex items-center justify-center relative overflow-hidden',
             style: {
@@ -1516,6 +2036,7 @@ function buildPreviewHtml(schema, port) {
       const topBarEnabled = topBar?.enabled !== false && catalog.settings?.top_bar;
 
       return h('div', { 'data-page-id': currentPageId },
+        cartUI,
         h('div', {
           className: 'cf-page min-h-screen',
           style: { background: 'linear-gradient(180deg, #f8f9fc 0%, #f0f2f7 100%)' },
@@ -1819,18 +2340,108 @@ function buildPreviewHtml(schema, port) {
         });
       }, true);
     })();
+
+    // --- Validation banner ---
+    (function initValidationBanner() {
+      const banner = document.getElementById('validation-banner');
+      const validation = JSON.parse(document.getElementById('__validation_data').textContent);
+      const errors = validation.errors || [];
+      const warnings = validation.warnings || [];
+      if (errors.length === 0 && warnings.length === 0) return;
+      let html = '<div class="vb-header"><strong>' + errors.length + ' error(s), ' + warnings.length + ' warning(s)</strong><button class="vb-dismiss" id="vb-dismiss">Dismiss</button></div>';
+      for (const e of errors) html += '<div class="vb-error">ERROR: ' + e + '</div>';
+      for (const w of warnings) html += '<div class="vb-warn">WARN: ' + w + '</div>';
+      banner.innerHTML = html;
+      banner.style.display = 'block';
+      document.getElementById('vb-dismiss').addEventListener('click', () => { banner.style.display = 'none'; });
+    })();
+
+    // --- Debug panel ---
+    (function initDebugPanel() {
+      const panel = document.getElementById('debug-panel');
+      const body = document.getElementById('debug-body');
+      const btn = document.getElementById('debug-btn');
+      const closeBtn = document.getElementById('debug-close');
+      let isOpen = false;
+
+      function toggle() {
+        isOpen = !isOpen;
+        panel.classList.toggle('open', isOpen);
+        if (isOpen) render();
+      }
+      btn.addEventListener('click', toggle);
+      closeBtn.addEventListener('click', toggle);
+
+      document.addEventListener('keydown', (e) => {
+        if (e.ctrlKey && e.key === 'd') { e.preventDefault(); toggle(); }
+      });
+
+      const recentEvents = [];
+      window.addEventListener('devEvent', (e) => {
+        recentEvents.push(e.detail);
+        if (recentEvents.length > 20) recentEvents.shift();
+        if (isOpen) render();
+      });
+
+      function render() {
+        const state = window.__devDebugState;
+        if (!state) { body.innerHTML = '<p>Waiting for state...</p>'; return; }
+        let html = '<div class="dp-section"><div class="dp-label">Current Page</div><span class="dp-badge">' + (state.currentPageId || 'none') + '</span></div>';
+        html += '<div class="dp-section"><div class="dp-label">Form State</div><pre>' + JSON.stringify(state.formState || {}, null, 2) + '</pre></div>';
+        html += '<div class="dp-section"><div class="dp-label">Cart (' + (state.cartItems?.length || 0) + ')</div>';
+        if (state.cartItems && state.cartItems.length > 0) {
+          html += '<pre>' + JSON.stringify(state.cartItems.map(i => i.title || i.offer_id), null, 2) + '</pre>';
+        } else {
+          html += '<pre>empty</pre>';
+        }
+        html += '</div>';
+        html += '<div class="dp-section"><div class="dp-label">Edges from here</div>';
+        if (state.edges && state.edges.length > 0) {
+          html += '<pre>' + state.edges.map(e => e.from + ' \u2192 ' + e.to + (e.conditions?.length ? ' (conditional)' : '')).join('\\n') + '</pre>';
+        } else {
+          html += '<pre>none (terminal page)</pre>';
+        }
+        html += '</div>';
+        html += '<div class="dp-section"><div class="dp-label">Recent Events (' + recentEvents.length + ')</div>';
+        if (recentEvents.length > 0) {
+          html += '<pre>' + recentEvents.slice(-8).map(e => e.type + ' ' + JSON.stringify(e.data || {})).join('\\n') + '</pre>';
+        } else {
+          html += '<pre>none yet</pre>';
+        }
+        html += '</div>';
+        body.innerHTML = html;
+      }
+
+      window.addEventListener('devStateUpdate', () => { if (isOpen) render(); });
+    })();
   </script>
 </body>
 </html>`;
 }
 async function catalogDev(file, opts) {
-  const abs = resolve3(file);
+  const abs = resolve4(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);
   }
+  let stripeSecretKey = process.env.STRIPE_SECRET_KEY || "";
+  if (!stripeSecretKey) {
+    for (const envFile of [".env", ".env.local", ".env.development"]) {
+      const envPath = join2(catalogDir, envFile);
+      if (existsSync2(envPath)) {
+        const envContent = readFileSync4(envPath, "utf-8");
+        const match = envContent.match(/^STRIPE_SECRET_KEY\s*=\s*"?([^"\n]+)"?/m);
+        if (match) {
+          stripeSecretKey = match[1].trim();
+          break;
+        }
+      }
+    }
+  }
+  const stripeEnabled = stripeSecretKey.length > 0;
+  const devConfig = { stripeEnabled, port };
   const spinner = ora5("Loading catalog schema...").start();
   let schema;
   try {
@@ -1839,14 +2450,15 @@ async function catalogDev(file, opts) {
     spinner.fail(`Failed to load catalog: ${err.message}`);
     process.exit(1);
   }
-  const errors = validateCatalog(schema);
-  if (errors.length > 0) {
+  const basicErrors = validateCatalog(schema);
+  if (basicErrors.length > 0) {
     spinner.fail("Schema validation errors:");
-    for (const err of errors) {
+    for (const err of basicErrors) {
       console.error(`  - ${err}`);
     }
     process.exit(1);
   }
+  let validation = deepValidateCatalog(schema);
   const localBaseUrl = `http://localhost:${port}/assets`;
   schema = resolveLocalAssets(schema, catalogDir, localBaseUrl);
   spinner.succeed(`Loaded: ${schema.slug || file}`);
@@ -1854,6 +2466,8 @@ async function catalogDev(file, opts) {
   console.log(`  Entry: ${schema.routing?.entry || "first page"}`);
   console.log();
   const sseClients = /* @__PURE__ */ new Set();
+  const eventSseClients = /* @__PURE__ */ new Set();
+  const eventLog = [];
   function notifyReload() {
     sseClients.forEach((client) => {
       try {
@@ -1863,6 +2477,22 @@ async function catalogDev(file, opts) {
       }
     });
   }
+  function emitDevEvent(event) {
+    eventLog.push(event);
+    if (eventLog.length > 500) eventLog.shift();
+    const data = JSON.stringify(event);
+    const ts = (/* @__PURE__ */ new Date()).toISOString().slice(11, 23);
+    console.log(`  \x1B[36m[event]\x1B[0m ${ts} ${event.type} ${JSON.stringify(event.data || {})}`);
+    eventSseClients.forEach((client) => {
+      try {
+        client.write(`data: ${data}
+
+`);
+      } catch {
+        eventSseClients.delete(client);
+      }
+    });
+  }
   const server = createServer(async (req, res) => {
     const url = new URL(req.url || "/", `http://localhost:${port}`);
     if (url.pathname === "/__dev_sse") {
@@ -1877,11 +2507,127 @@ async function catalogDev(file, opts) {
       req.on("close", () => sseClients.delete(res));
       return;
     }
+    if (url.pathname === "/__dev_events_stream") {
+      res.writeHead(200, {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        "Connection": "keep-alive",
+        "Access-Control-Allow-Origin": "*"
+      });
+      res.write("data: connected\n\n");
+      eventSseClients.add(res);
+      req.on("close", () => eventSseClients.delete(res));
+      return;
+    }
+    if (url.pathname === "/__dev_events" && req.method === "GET") {
+      res.writeHead(200, { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" });
+      const limit = parseInt(url.searchParams.get("limit") || "50", 10);
+      res.end(JSON.stringify(eventLog.slice(-limit)));
+      return;
+    }
+    if (url.pathname === "/__dev_event" && req.method === "POST") {
+      let body = "";
+      req.on("data", (chunk) => {
+        body += chunk;
+      });
+      req.on("end", () => {
+        try {
+          const event = JSON.parse(body);
+          emitDevEvent(event);
+          res.writeHead(200, { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" });
+          res.end('{"ok":true}');
+        } catch {
+          res.writeHead(400);
+          res.end('{"error":"invalid json"}');
+        }
+      });
+      return;
+    }
+    if (url.pathname === "/__dev_checkout" && req.method === "POST") {
+      let body = "";
+      req.on("data", (chunk) => {
+        body += chunk;
+      });
+      req.on("end", async () => {
+        res.setHeader("Content-Type", "application/json");
+        res.setHeader("Access-Control-Allow-Origin", "*");
+        if (!stripeEnabled) {
+          res.writeHead(400);
+          res.end(JSON.stringify({ error: "No STRIPE_SECRET_KEY found. Add it to .env in your catalog directory." }));
+          return;
+        }
+        try {
+          const { line_items, form_state, catalog_slug } = JSON.parse(body);
+          const checkoutSettings = schema.settings?.checkout || {};
+          const params = new URLSearchParams();
+          params.set("mode", checkoutSettings.payment_type === "subscription" ? "subscription" : "payment");
+          params.set("success_url", `http://localhost:${port}/?checkout=success&session_id={CHECKOUT_SESSION_ID}`);
+          params.set("cancel_url", `http://localhost:${port}/?checkout=cancel`);
+          const emailField = checkoutSettings.prefill_fields?.customer_email;
+          if (emailField && form_state?.[emailField]) {
+            params.set("customer_email", form_state[emailField]);
+          }
+          const methods = checkoutSettings.payment_methods || ["card"];
+          methods.forEach((m, i) => params.set(`payment_method_types[${i}]`, m));
+          if (checkoutSettings.allow_discount_codes) {
+            params.set("allow_promotion_codes", "true");
+          }
+          line_items.forEach((item, i) => {
+            if (item.stripe_price_id) {
+              params.set(`line_items[${i}][price]`, item.stripe_price_id);
+              params.set(`line_items[${i}][quantity]`, String(item.quantity || 1));
+            } else if (item.amount_cents) {
+              params.set(`line_items[${i}][price_data][currency]`, item.currency || "usd");
+              params.set(`line_items[${i}][price_data][unit_amount]`, String(item.amount_cents));
+              params.set(`line_items[${i}][price_data][product_data][name]`, item.title || "Item");
+              if (checkoutSettings.payment_type === "subscription") {
+                params.set(`line_items[${i}][price_data][recurring][interval]`, "month");
+              }
+              params.set(`line_items[${i}][quantity]`, String(item.quantity || 1));
+            }
+          });
+          if (checkoutSettings.payment_type === "subscription" && checkoutSettings.free_trial?.enabled && checkoutSettings.free_trial.days) {
+            params.set("subscription_data[trial_period_days]", String(checkoutSettings.free_trial.days));
+          }
+          const stripeRes = await fetch("https://api.stripe.com/v1/checkout/sessions", {
+            method: "POST",
+            headers: {
+              "Authorization": `Basic ${Buffer.from(stripeSecretKey + ":").toString("base64")}`,
+              "Content-Type": "application/x-www-form-urlencoded"
+            },
+            body: params.toString()
+          });
+          const stripeData = await stripeRes.json();
+          if (!stripeRes.ok) {
+            emitDevEvent({ type: "checkout_error", timestamp: (/* @__PURE__ */ new Date()).toISOString(), data: { error: stripeData.error?.message || "Stripe error" } });
+            res.writeHead(stripeRes.status);
+            res.end(JSON.stringify({ error: stripeData.error?.message || "Stripe session creation failed" }));
+            return;
+          }
+          emitDevEvent({ type: "checkout_session_created", timestamp: (/* @__PURE__ */ new Date()).toISOString(), data: { session_id: stripeData.id, url: stripeData.url } });
+          res.writeHead(200);
+          res.end(JSON.stringify({ session_id: stripeData.id, session_url: stripeData.url }));
+        } catch (err) {
+          res.writeHead(500);
+          res.end(JSON.stringify({ error: err.message }));
+        }
+      });
+      return;
+    }
+    if (req.method === "OPTIONS") {
+      res.writeHead(204, {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
+        "Access-Control-Allow-Headers": "Content-Type"
+      });
+      res.end();
+      return;
+    }
     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))) {
+      const resolved = resolve4(filePath);
+      if (!resolved.startsWith(resolve4(catalogDir))) {
         res.writeHead(403);
         res.end("Forbidden");
         return;
@@ -1909,11 +2655,13 @@ async function catalogDev(file, opts) {
       "Content-Type": "text/html; charset=utf-8",
       "Cache-Control": "no-cache"
     });
-    res.end(buildPreviewHtml(schema, port));
+    res.end(buildPreviewHtml(schema, port, validation, devConfig));
   });
   server.listen(port, () => {
     console.log(`  Local preview: http://localhost:${port}`);
     console.log(`  Assets served from: ${catalogDir}`);
+    console.log(`  Checkout: ${stripeEnabled ? `\x1B[32menabled\x1B[0m (${stripeSecretKey.startsWith("sk_test_") ? "test mode" : "live mode"})` : "\x1B[33mstubbed\x1B[0m \u2014 add STRIPE_SECRET_KEY to .env"}`);
+    console.log(`  Events:   \x1B[32mlocal\x1B[0m \u2014 stream at http://localhost:${port}/__dev_events_stream`);
     console.log(`  Watching for changes...
 `);
   });
@@ -1930,6 +2678,7 @@ async function catalogDev(file, opts) {
           for (const e of errs) console.error(`  - ${e}`);
           return;
         }
+        validation = deepValidateCatalog(schema);
         schema = resolveLocalAssets(schema, catalogDir, localBaseUrl);
         reloadSpinner.succeed(`Reloaded \u2014 auto-refreshing browser`);
         notifyReload();
@@ -1940,7 +2689,7 @@ async function catalogDev(file, opts) {
   });
   try {
     watch(catalogDir, { recursive: true }, (event, filename) => {
-      if (!filename || filename.startsWith(".") || resolve3(join2(catalogDir, filename)) === abs) return;
+      if (!filename || filename.startsWith(".") || resolve4(join2(catalogDir, filename)) === abs) return;
     });
   } catch {
   }
@@ -1951,6 +2700,439 @@ async function catalogDev(file, opts) {
   });
 }
 
+// src/commands/catalog-validate.ts
+import { resolve as resolve5 } from "path";
+import { existsSync as existsSync3 } from "fs";
+import ora6 from "ora";
+async function catalogValidate(file) {
+  const abs = resolve5(file);
+  if (!existsSync3(abs)) {
+    console.error(`File not found: ${file}`);
+    process.exit(1);
+  }
+  const spinner = ora6("Loading catalog schema...").start();
+  let schema;
+  try {
+    schema = await loadCatalogFile(abs);
+  } catch (err) {
+    spinner.fail(`Failed to load catalog: ${err.message}`);
+    process.exit(1);
+  }
+  spinner.succeed(`Loaded: ${schema.slug || file}`);
+  const basicErrors = validateCatalog(schema);
+  const { errors: deepErrors, warnings } = deepValidateCatalog(schema);
+  const allErrors = [...basicErrors, ...deepErrors];
+  const pages = schema.pages || {};
+  const pageCount = Object.keys(pages).length;
+  const componentCount = Object.values(pages).reduce(
+    (sum, p) => sum + (p.components?.length || 0),
+    0
+  );
+  const edgeCount = schema.routing?.edges?.length || 0;
+  const offerCount = Object.values(pages).filter((p) => p.offer).length;
+  console.log();
+  console.log(`  Slug:       ${schema.slug || "(none)"}`);
+  console.log(`  Version:    ${schema.schema_version || "(none)"}`);
+  console.log(`  Pages:      ${pageCount}`);
+  console.log(`  Components: ${componentCount}`);
+  console.log(`  Edges:      ${edgeCount}`);
+  console.log(`  Offers:     ${offerCount}`);
+  console.log();
+  if (allErrors.length > 0) {
+    for (const err of allErrors) {
+      console.error(`  \x1B[31mERROR\x1B[0m  ${err}`);
+    }
+  }
+  if (warnings.length > 0) {
+    for (const warn of warnings) {
+      console.warn(`  \x1B[33mWARN\x1B[0m   ${warn}`);
+    }
+  }
+  if (allErrors.length === 0 && warnings.length === 0) {
+    console.log("  \x1B[32m\u2713 No issues found\x1B[0m");
+  } else {
+    console.log();
+    console.log(
+      `  ${allErrors.length} error(s), ${warnings.length} warning(s)`
+    );
+  }
+  process.exit(allErrors.length > 0 ? 1 : 0);
+}
+
+// src/commands/catalog-init.ts
+import { mkdirSync, writeFileSync, existsSync as existsSync4 } from "fs";
+import { join as join3 } from "path";
+import { createInterface } from "readline";
+function ask(rl, question) {
+  return new Promise((resolve7) => rl.question(question, resolve7));
+}
+var TEMPLATES = {
+  "quiz-funnel": {
+    description: "3-page quiz funnel: welcome cover, quiz question, result with offer",
+    content: (slug) => `import type { CatalogSchema } from "@shared/types";
+
+const catalog = {
+  schema_version: "1.0",
+  slug: "${slug}",
+  settings: {
+    theme: { primary_color: "#6366f1" },
+    progress_steps: [
+      { id: "quiz", label: "Quiz", pages: ["welcome", "question"] },
+      { id: "result", label: "Result", pages: ["result"] },
+    ],
+  },
+  routing: {
+    entry: "welcome",
+    edges: [
+      { from: "welcome", to: "question" },
+      { from: "question", to: "result" },
+    ],
+  },
+  pages: {
+    welcome: {
+      layout: "cover",
+      components: [
+        { id: "heading", type: "heading", props: { level: 1, text: "Find Your Perfect Plan", subtitle: "Answer a few quick questions to get a personalized recommendation." } },
+      ],
+    },
+    question: {
+      title: "About You",
+      components: [
+        { id: "role", type: "multiple_choice", props: { label: "What best describes you?", options: ["Solopreneur", "Agency", "E-commerce", "SaaS"], required: true } },
+      ],
+    },
+    result: {
+      title: "Your Result",
+      components: [
+        { id: "result_heading", type: "heading", props: { level: 2, text: "Here's our recommendation" } },
+        { id: "result_text", type: "paragraph", props: { text: "Based on your answers, we think this plan is perfect for you." } },
+      ],
+      offer: {
+        id: "main-offer",
+        title: "Starter Plan",
+        price_display: "$29/mo",
+      },
+    },
+  },
+} satisfies CatalogSchema;
+
+export default catalog;
+`
+  },
+  "lead-capture": {
+    description: "2-page lead capture: info form + thank you",
+    content: (slug) => `import type { CatalogSchema } from "@shared/types";
+
+const catalog = {
+  schema_version: "1.0",
+  slug: "${slug}",
+  settings: {
+    theme: { primary_color: "#10b981" },
+  },
+  routing: {
+    entry: "form",
+    edges: [
+      { from: "form", to: "thank_you" },
+    ],
+  },
+  pages: {
+    form: {
+      title: "Get Started",
+      components: [
+        { id: "heading", type: "heading", props: { level: 2, text: "Tell us about yourself" } },
+        { id: "name", type: "short_text", props: { label: "Full Name", placeholder: "Jane Doe", required: true } },
+        { id: "email", type: "email", props: { label: "Email", placeholder: "you@example.com", required: true } },
+        { id: "company", type: "short_text", props: { label: "Company", placeholder: "Acme Inc" } },
+      ],
+    },
+    thank_you: {
+      title: "Thank You!",
+      hide_navigation: true,
+      components: [
+        { id: "thanks", type: "heading", props: { level: 2, text: "Thanks! We'll be in touch soon." } },
+        { id: "note", type: "paragraph", props: { text: "Check your inbox for a confirmation email." } },
+      ],
+    },
+  },
+} satisfies CatalogSchema;
+
+export default catalog;
+`
+  },
+  "product-catalog": {
+    description: "2-page product showcase: pricing cards + checkout",
+    content: (slug) => `import type { CatalogSchema } from "@shared/types";
+
+const catalog = {
+  schema_version: "1.0",
+  slug: "${slug}",
+  settings: {
+    theme: { primary_color: "#f59e0b" },
+  },
+  routing: {
+    entry: "pricing",
+    edges: [
+      { from: "pricing", to: "checkout" },
+    ],
+  },
+  pages: {
+    pricing: {
+      title: "Choose a Plan",
+      components: [
+        { id: "heading", type: "heading", props: { level: 1, text: "Simple, transparent pricing" } },
+        { id: "starter", type: "pricing_card", props: { title: "Starter", price: "$19", period: "mo", features: ["5 projects", "Basic analytics", "Email support"], cta_text: "Get Started" } },
+        { id: "pro", type: "pricing_card", props: { title: "Pro", badge: "Popular", price: "$49", period: "mo", features: ["Unlimited projects", "Advanced analytics", "Priority support", "Custom domain"], cta_text: "Go Pro" } },
+      ],
+    },
+    checkout: {
+      title: "Complete Your Order",
+      components: [
+        { id: "checkout_pay", type: "payment", props: { amount: 4900, currency: "usd" } },
+      ],
+    },
+  },
+} satisfies CatalogSchema;
+
+export default catalog;
+`
+  },
+  blank: {
+    description: "Minimal 1-page skeleton",
+    content: (slug) => `import type { CatalogSchema } from "@shared/types";
+
+const catalog = {
+  schema_version: "1.0",
+  slug: "${slug}",
+  settings: {
+    theme: { primary_color: "#6366f1" },
+  },
+  routing: {
+    entry: "main",
+    edges: [],
+  },
+  pages: {
+    main: {
+      title: "Welcome",
+      components: [
+        { id: "heading", type: "heading", props: { level: 1, text: "Hello, World!" } },
+        { id: "text", type: "paragraph", props: { text: "Start building your catalog here." } },
+      ],
+    },
+  },
+} satisfies CatalogSchema;
+
+export default catalog;
+`
+  }
+};
+async function catalogInit() {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  try {
+    console.log("\n  Catalog Kit \u2014 New Catalog Scaffold\n");
+    const slug = (await ask(rl, "  Catalog slug (e.g. my-quiz): ")).trim();
+    if (!slug || !/^[a-z0-9][a-z0-9-]*$/.test(slug)) {
+      console.error("\n  Invalid slug. Use lowercase letters, numbers, and hyphens.");
+      process.exit(1);
+    }
+    if (existsSync4(slug)) {
+      console.error(`
+  Directory "${slug}" already exists.`);
+      process.exit(1);
+    }
+    console.log("\n  Templates:");
+    const templateKeys = Object.keys(TEMPLATES);
+    for (let i = 0; i < templateKeys.length; i++) {
+      const key = templateKeys[i];
+      console.log(`    ${i + 1}. ${key} \u2014 ${TEMPLATES[key].description}`);
+    }
+    const choice = (await ask(rl, `
+  Pick a template (1-${templateKeys.length}): `)).trim();
+    const idx = parseInt(choice, 10) - 1;
+    if (isNaN(idx) || idx < 0 || idx >= templateKeys.length) {
+      console.error("\n  Invalid choice.");
+      process.exit(1);
+    }
+    const templateKey = templateKeys[idx];
+    const template = TEMPLATES[templateKey];
+    mkdirSync(join3(slug, "images"), { recursive: true });
+    writeFileSync(join3(slug, `${slug}.ts`), template.content(slug));
+    writeFileSync(
+      join3(slug, ".env.example"),
+      `CATALOG_KIT_TOKEN=cfk_your_token_here
+`
+    );
+    console.log(`
+  \x1B[32m\u2713 Created ${slug}/\x1B[0m`);
+    console.log(`    ${slug}/${slug}.ts`);
+    console.log(`    ${slug}/images/`);
+    console.log(`    ${slug}/.env.example`);
+    console.log(`
+  Next steps:`);
+    console.log(`    cd ${slug}`);
+    console.log(`    catalogs catalog dev ${slug}.ts`);
+    console.log(`    catalogs catalog validate ${slug}.ts`);
+    console.log(`    catalogs catalog push ${slug}.ts --publish
+`);
+  } finally {
+    rl.close();
+  }
+}
+
+// src/commands/catalog-diff.ts
+import { resolve as resolve6 } from "path";
+import { existsSync as existsSync5 } from "fs";
+import ora7 from "ora";
+async function catalogDiff(file) {
+  const config = requireConfig();
+  const api = new ApiClient(config);
+  await printIdentity(api);
+  const abs = resolve6(file);
+  if (!existsSync5(abs)) {
+    console.error(`File not found: ${file}`);
+    process.exit(1);
+  }
+  const spinner = ora7("Loading local catalog...").start();
+  let local;
+  try {
+    local = await loadCatalogFile(abs);
+  } catch (err) {
+    spinner.fail(`Failed to load catalog: ${err.message}`);
+    process.exit(1);
+  }
+  spinner.succeed(`Local: ${local.slug || file}`);
+  const fetchSpinner = ora7("Fetching remote catalog...").start();
+  let remote = null;
+  try {
+    const listRes = await api.get("/api/v1/catalogs");
+    const catalogs = listRes.data || [];
+    const match = catalogs.find((c) => c.slug === local.slug);
+    if (match) {
+      remote = match.schema;
+    }
+  } catch (err) {
+    fetchSpinner.fail(`Failed to fetch remote: ${err.message}`);
+    process.exit(1);
+  }
+  if (!remote) {
+    fetchSpinner.info("This would be a new catalog (slug not found remotely).");
+    return;
+  }
+  fetchSpinner.succeed(`Remote: ${remote.slug || local.slug}`);
+  console.log();
+  const localPages = new Set(Object.keys(local.pages || {}));
+  const remotePages = new Set(Object.keys(remote.pages || {}));
+  const addedPages = [];
+  const removedPages = [];
+  const modifiedPages = [];
+  for (const id of localPages) {
+    if (!remotePages.has(id)) {
+      addedPages.push(id);
+    } else {
+      const localComps = (local.pages[id].components || []).map((c) => `${c.id}:${c.type}`).join(",");
+      const remoteComps = (remote.pages[id].components || []).map((c) => `${c.id}:${c.type}`).join(",");
+      if (localComps !== remoteComps) {
+        modifiedPages.push(id);
+      }
+    }
+  }
+  for (const id of remotePages) {
+    if (!localPages.has(id)) {
+      removedPages.push(id);
+    }
+  }
+  if (addedPages.length + removedPages.length + modifiedPages.length === 0) {
+    console.log("  Pages: no changes");
+  } else {
+    console.log("  Pages:");
+    for (const id of addedPages) {
+      console.log(`    \x1B[32m+ ${id}\x1B[0m`);
+    }
+    for (const id of removedPages) {
+      console.log(`    \x1B[31m- ${id}\x1B[0m`);
+    }
+    for (const id of modifiedPages) {
+      console.log(`    \x1B[33m~ ${id}\x1B[0m`);
+      const localCompIds = new Set((local.pages[id].components || []).map((c) => c.id));
+      const remoteCompIds = new Set((remote.pages[id].components || []).map((c) => c.id));
+      for (const cid of localCompIds) {
+        if (!remoteCompIds.has(cid)) console.log(`      \x1B[32m+ component: ${cid}\x1B[0m`);
+      }
+      for (const cid of remoteCompIds) {
+        if (!localCompIds.has(cid)) console.log(`      \x1B[31m- component: ${cid}\x1B[0m`);
+      }
+    }
+  }
+  const localEdges = (local.routing?.edges || []).map((e) => `${e.from}->${e.to}`);
+  const remoteEdges = (remote.routing?.edges || []).map((e) => `${e.from}->${e.to}`);
+  const localEdgeSet = new Set(localEdges);
+  const remoteEdgeSet = new Set(remoteEdges);
+  const addedEdges = localEdges.filter((e) => !remoteEdgeSet.has(e));
+  const removedEdges = remoteEdges.filter((e) => !localEdgeSet.has(e));
+  if (addedEdges.length + removedEdges.length === 0) {
+    console.log("  Edges: no changes");
+  } else {
+    console.log("  Edges:");
+    for (const e of addedEdges) console.log(`    \x1B[32m+ ${e}\x1B[0m`);
+    for (const e of removedEdges) console.log(`    \x1B[31m- ${e}\x1B[0m`);
+  }
+  const totalChanges = addedPages.length + removedPages.length + modifiedPages.length + addedEdges.length + removedEdges.length;
+  console.log();
+  console.log(
+    `  Summary: ${addedPages.length} page(s) added, ${removedPages.length} removed, ${modifiedPages.length} modified | ${addedEdges.length} edge(s) added, ${removedEdges.length} removed`
+  );
+  if (totalChanges === 0) {
+    console.log("  \x1B[32m\u2713 Local matches remote\x1B[0m");
+  }
+  console.log();
+}
+
+// src/commands/catalog-open.ts
+import { exec } from "child_process";
+import { platform } from "os";
+import ora8 from "ora";
+async function catalogOpen(slug) {
+  const config = requireConfig();
+  const api = new ApiClient(config);
+  await printIdentity(api);
+  const spinner = ora8(`Looking up catalog "${slug}"...`).start();
+  try {
+    const listRes = await api.get("/api/v1/catalogs");
+    const catalogs = listRes.data || [];
+    const catalog2 = catalogs.find((c) => c.slug === slug);
+    if (!catalog2) {
+      spinner.fail(`Catalog "${slug}" not found.`);
+      process.exit(1);
+    }
+    let url = catalog2.url;
+    if (!url) {
+      try {
+        const me = await api.get("/api/v1/me");
+        const subdomain = me.data?.subdomain || me.data?.app_slug;
+        if (subdomain) {
+          url = `https://${subdomain}.catalogkit.cc/${slug}`;
+        }
+      } catch {
+      }
+    }
+    if (!url) {
+      url = `https://catalogkit.cc/c/${catalog2.catalog_id}`;
+    }
+    spinner.succeed(`Opening: ${url}`);
+    const os = platform();
+    const cmd = os === "darwin" ? "open" : os === "win32" ? "start" : "xdg-open";
+    exec(`${cmd} "${url}"`, (err) => {
+      if (err) {
+        console.log(`
+  Could not open browser. Visit: ${url}
+`);
+      }
+    });
+  } catch (err) {
+    spinner.fail(`Failed: ${err.message}`);
+    process.exit(1);
+  }
+}
+
 // src/commands/whoami.ts
 async function whoami() {
   const config = getConfig();
@@ -2009,7 +3191,7 @@ 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 { version } = JSON.parse(readFileSync5(join4(__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(version).option("--token <token>", "Auth token (overrides CATALOG_KIT_TOKEN env var)").hook("preAction", (thisCommand) => {
   const opts = thisCommand.opts();
@@ -2024,5 +3206,9 @@ 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);
+catalog.command("validate <file>").description("Validate a catalog schema (no token required)").action(catalogValidate);
+catalog.command("init").description("Scaffold a new catalog from a template").action(catalogInit);
+catalog.command("diff <file>").description("Compare local catalog schema against remote").action(catalogDiff);
+catalog.command("open <slug>").description("Open a published catalog in the browser").action(catalogOpen);
 program.command("whoami").description("Show current authentication info").action(whoami);
 program.parse();