@officexapp/catalogs-cli 0.2.9 → 0.4.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,18 @@ 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);
-  }
+
+// src/lib/dev-engine.ts
+function buildEngineScript() {
+  return 'function resolveValue(rule, formState, context) {\n  const source = rule.source ?? "field";\n  switch (source) {\n    case "field":\n      return rule.field != null ? formState[rule.field] : void 0;\n    case "url_param":\n      return rule.param != null ? context.url_params[rule.param] : void 0;\n    case "hint":\n      return rule.param != null ? context.hints[rule.param] : void 0;\n    case "tracer_prop":\n      return rule.param != null ? context[rule.param] : void 0;\n    case "score": {\n      const scores = context.quiz_scores;\n      if (!scores) return 0;\n      const param = rule.param ?? rule.field ?? "total";\n      switch (param) {\n        case "total":\n          return scores.total;\n        case "max":\n          return scores.max;\n        case "percent":\n          return scores.percent;\n        case "correct_count":\n          return scores.correct_count;\n        case "question_count":\n          return scores.question_count;\n        default: {\n          const answer = scores.answers.find((a) => a.component_id === param);\n          return answer ? answer.points_earned : 0;\n        }\n      }\n    }\n    case "video": {\n      const videoState = context.video_state;\n      if (!videoState) return void 0;\n      const compId = rule.field;\n      if (!compId || !videoState[compId]) return void 0;\n      const metric = rule.param ?? "watch_percent";\n      return videoState[compId][metric];\n    }\n    default:\n      return void 0;\n  }\n}\nfunction applyOperator(operator, actual, expected) {\n  switch (operator) {\n    case "equals":\n      return String(actual ?? "") === String(expected ?? "");\n    case "not_equals":\n      return String(actual ?? "") !== String(expected ?? "");\n    case "contains":\n      if (typeof actual === "string") return actual.includes(String(expected));\n      if (Array.isArray(actual)) return actual.includes(expected);\n      return false;\n    case "not_contains":\n      if (typeof actual === "string") return !actual.includes(String(expected));\n      if (Array.isArray(actual)) return !actual.includes(expected);\n      return true;\n    case "greater_than":\n      return Number(actual) > Number(expected);\n    case "greater_than_or_equal":\n      return Number(actual) >= Number(expected);\n    case "less_than":\n      return Number(actual) < Number(expected);\n    case "less_than_or_equal":\n      return Number(actual) <= Number(expected);\n    case "is_empty":\n      return actual == null || actual === "" || Array.isArray(actual) && actual.length === 0;\n    case "is_not_empty":\n      return !(actual == null || actual === "" || Array.isArray(actual) && actual.length === 0);\n    case "matches_regex":\n      try {\n        const pattern = String(expected);\n        if (pattern.length > 200 || /(\\+\\+|\\*\\*|\\{\\d{3,}\\})/.test(pattern)) return false;\n        return new RegExp(pattern).test(String(actual ?? ""));\n      } catch {\n        return false;\n      }\n    case "in":\n      if (Array.isArray(expected)) return expected.includes(actual);\n      if (typeof expected === "string")\n        return expected.split(",").map((s) => s.trim()).includes(String(actual));\n      return false;\n    default:\n      return false;\n  }\n}\nfunction isConditionGroup(rule) {\n  return "match" in rule && "rules" in rule;\n}\nfunction evaluateCondition(rule, formState, context) {\n  const actual = resolveValue(rule, formState, context);\n  return applyOperator(rule.operator, actual, rule.value);\n}\nfunction evaluateConditionGroup(group, formState, context) {\n  const evaluator = (item) => {\n    if (isConditionGroup(item)) {\n      return evaluateConditionGroup(item, formState, context);\n    }\n    return evaluateCondition(item, formState, context);\n  };\n  if (group.match === "all") {\n    return group.rules.every(evaluator);\n  }\n  return group.rules.some(evaluator);\n}\nfunction getNextPage(routing, currentPageId, formState, context) {\n  const outgoing = routing.edges.filter((e) => e.from === currentPageId);\n  if (outgoing.length === 0) return null;\n  const sorted = [...outgoing].sort((a, b) => {\n    if (a.is_default && !b.is_default) return 1;\n    if (!a.is_default && b.is_default) return -1;\n    return (a.priority ?? Infinity) - (b.priority ?? Infinity);\n  });\n  for (const edge of sorted) {\n    if (!edge.conditions) {\n      return edge.to;\n    }\n    if (evaluateConditionGroup(edge.conditions, formState, context)) {\n      return edge.to;\n    }\n  }\n  const defaultEdge = sorted.find((e) => e.is_default);\n  return defaultEdge?.to ?? null;\n}\nfunction getProgress(routing, currentPageId, pages) {\n  const adjacency = /* @__PURE__ */ new Map();\n  for (const edge of routing.edges) {\n    if (!edge.to) continue;\n    if (!adjacency.has(edge.from)) adjacency.set(edge.from, /* @__PURE__ */ new Set());\n    adjacency.get(edge.from).add(edge.to);\n  }\n  const depthMap = /* @__PURE__ */ new Map();\n  const queue = [[routing.entry, 0]];\n  depthMap.set(routing.entry, 0);\n  while (queue.length > 0) {\n    const [node, depth] = queue.shift();\n    const neighbours = adjacency.get(node);\n    if (!neighbours) continue;\n    for (const next of neighbours) {\n      if (!depthMap.has(next)) {\n        depthMap.set(next, depth + 1);\n        queue.push([next, depth + 1]);\n      }\n    }\n  }\n  const currentDepth = depthMap.get(currentPageId) ?? 0;\n  const maxDepth = Math.max(...depthMap.values(), 0);\n  if (maxDepth === 0) return 0;\n  return Math.round(currentDepth / maxDepth * 100);\n}\nconst INPUT_TYPES = /* @__PURE__ */ new Set([\n  "short_text",\n  "long_text",\n  "rich_text",\n  "email",\n  "phone",\n  "url",\n  "address",\n  "number",\n  "currency",\n  "date",\n  "datetime",\n  "time",\n  "date_range",\n  "dropdown",\n  "multiselect",\n  "multiple_choice",\n  "checkboxes",\n  "picture_choice",\n  "switch",\n  "checkbox",\n  "choice_matrix",\n  "ranking",\n  "star_rating",\n  "slider",\n  "opinion_scale",\n  "file_upload",\n  "signature",\n  "password",\n  "location"\n]);\nconst BOOLEAN_TYPES = /* @__PURE__ */ new Set(["switch", "checkbox"]);\nfunction validatePage(page, formState, context, prefilledIds, overrides) {\n  const errors = [];\n  for (const comp of page.components) {\n    if (!INPUT_TYPES.has(comp.type)) continue;\n    const props = { ...comp.props, ...overrides?.[comp.id] };\n    if (comp.hidden || props.hidden) continue;\n    if (comp.visibility) {\n      if (!evaluateConditionGroup(comp.visibility, formState, context)) continue;\n    }\n    if (comp.prefill_mode === "hidden" && formState[comp.id] != null && formState[comp.id] !== "") continue;\n    const value = formState[comp.id];\n    if (props.readonly || comp.prefill_mode === "readonly" && value != null && value !== "") continue;\n    if (props.required) {\n      if (BOOLEAN_TYPES.has(comp.type)) {\n        if (!value) {\n          errors.push({ componentId: comp.id, message: "This field is required" });\n          continue;\n        }\n      } else {\n        const isEmpty = value == null || value === "" || Array.isArray(value) && value.length === 0;\n        if (isEmpty) {\n          errors.push({ componentId: comp.id, message: "This field is required" });\n          continue;\n        }\n      }\n    }\n    if (value != null && value !== "") {\n      if (comp.type === "email") {\n        if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(String(value))) {\n          errors.push({ componentId: comp.id, message: "Please enter a valid email address" });\n        }\n      } else if (comp.type === "url") {\n        try {\n          const urlStr = String(value);\n          new URL(urlStr.includes("://") ? urlStr : `https://${urlStr}`);\n        } catch {\n          errors.push({ componentId: comp.id, message: "Please enter a valid URL" });\n        }\n      } else if (comp.type === "number") {\n        const num = Number(value);\n        if (isNaN(num)) {\n          errors.push({ componentId: comp.id, message: "Please enter a valid number" });\n        } else {\n          if (props.min != null && num < props.min) {\n            errors.push({ componentId: comp.id, message: `Must be at least ${props.min}` });\n          }\n          if (props.max != null && num > props.max) {\n            errors.push({ componentId: comp.id, message: `Must be at most ${props.max}` });\n          }\n        }\n      } else if (comp.type === "short_text" || comp.type === "long_text") {\n        const str = String(value);\n        if (props.min_length && str.length < props.min_length) {\n          errors.push({ componentId: comp.id, message: `Must be at least ${props.min_length} characters` });\n        }\n      }\n    }\n    if ((comp.type === "checkboxes" || comp.type === "multiple_choice") && Array.isArray(value) && props.required) {\n      const options = props.options || [];\n      if (props.require_all) {\n        for (const opt of options) {\n          if (!value.includes(opt.value)) {\n            errors.push({ componentId: comp.id, message: "All options must be selected" });\n            break;\n          }\n        }\n      }\n      for (const opt of options) {\n        if (!opt.inputs || opt.inputs.length === 0) continue;\n        if (!props.require_all && !value.includes(opt.value)) continue;\n        for (const input of opt.inputs) {\n          const isRequired = input.required || input.props?.required;\n          if (!isRequired) continue;\n          const nestedId = `${comp.id}.${opt.value}.${input.id}`;\n          const nestedValue = formState[nestedId];\n          if (nestedValue == null || nestedValue === "" || Array.isArray(nestedValue) && nestedValue.length === 0) {\n            errors.push({ componentId: nestedId, message: "This field is required" });\n          }\n        }\n      }\n    }\n  }\n  return errors;\n}\nfunction getVisibleFields(page, formState, context) {\n  const fields = [];\n  for (const comp of page.components) {\n    if (!INPUT_TYPES.has(comp.type)) continue;\n    const props = comp.props || {};\n    if (comp.hidden || props.hidden) continue;\n    if (comp.visibility) {\n      if (!evaluateConditionGroup(comp.visibility, formState, context)) continue;\n    }\n    if (comp.prefill_mode === "hidden" && formState[comp.id] != null && formState[comp.id] !== "") continue;\n    const field = {\n      id: comp.id,\n      type: comp.type,\n      label: props.label,\n      required: !!props.required,\n      agent_hint: comp.agent_hint,\n      placeholder: props.placeholder,\n      default_value: props.default_value\n    };\n    if (props.options) {\n      field.options = props.options.map((opt) => ({\n        value: opt.value,\n        label: opt.label,\n        description: opt.description,\n        agent_hint: opt.agent_hint\n      }));\n    }\n    if (props.min != null) field.min = props.min;\n    if (props.max != null) field.max = props.max;\n    if (props.min_length != null) field.min_length = props.min_length;\n    if (props.max_length != null) field.max_length = props.max_length;\n    fields.push(field);\n  }\n  return fields;\n}\n'.replace(/<\/script/gi, "<\\/script");
 }
+
+// src/commands/catalog-dev.ts
+var DEFAULT_PORT = 3456;
 var MIME_TYPES = {
   ".html": "text/html",
   ".js": "application/javascript",
@@ -730,9 +814,10 @@ 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";
+  const engineScript = buildEngineScript();
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -845,28 +930,96 @@ function buildPreviewHtml(schema, port) {
       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;
+      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
+    }
+    .dev-banner.minimized {
+      transform: translateY(-100%); opacity: 0; pointer-events: none;
     }
+    .dev-banner .drag-handle {
+      cursor: grab; opacity: 0.4; font-size: 10px; user-select: none; letter-spacing: 1px;
+      padding: 0 2px; transition: opacity 0.15s;
+    }
+    .dev-banner .drag-handle:hover { opacity: 0.8; }
+    .dev-banner .drag-handle:active { cursor: grabbing; }
     .dev-banner .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: pulse 2s ease-in-out infinite; }
     @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
     .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-tags { margin-left: auto; display: flex; gap: 6px; align-items: center; }
     .dev-banner .stub-tag { background: rgba(255,255,255,0.1); border-radius: 3px; padding: 1px 6px; font-size: 11px; color: #fbbf24; }
+    .dev-banner .minimize-btn {
+      background: rgba(255,255,255,0.08); border: none; color: #a5b4fc; cursor: pointer;
+      font-size: 14px; width: 18px; height: 18px; border-radius: 4px;
+      display: flex; align-items: center; justify-content: center; padding: 0;
+      transition: background 0.15s;
+    }
+    .dev-banner .minimize-btn:hover { background: rgba(255,255,255,0.2); }
+    /* Minimized floating pill to restore banner */
+    .dev-banner-restore {
+      position: fixed; top: 8px; right: 8px; z-index: 99999;
+      background: #1a1a2e; color: #a5b4fc; border: 1px solid #6c63ff;
+      border-radius: 8px; padding: 4px 10px; font-size: 11px; font-family: monospace;
+      cursor: pointer; display: none; align-items: center; gap: 6px;
+      box-shadow: 0 2px 12px rgba(0,0,0,0.3); transition: all 0.15s ease;
+    }
+    .dev-banner-restore:hover { background: #2a2a4e; }
+    .dev-banner-restore .restore-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: pulse 2s ease-in-out infinite; }
+    .dev-banner-restore.visible { display: flex; }
+    /* Validation tag in topbar */
+    .dev-banner .validation-tag { position: relative; }
+    .dev-banner .validation-tag .vt-btn {
+      background: rgba(239,68,68,0.2); border: none; color: #fca5a5; border-radius: 3px;
+      padding: 1px 6px; font-size: 11px; cursor: pointer; font-family: monospace;
+      transition: background 0.15s;
+    }
+    .dev-banner .validation-tag .vt-btn:hover { background: rgba(239,68,68,0.35); }
+    .dev-banner .validation-tag .vt-btn.clean {
+      background: rgba(74,222,128,0.15); color: #86efac;
+    }
+    .dev-banner .validation-tag .vt-btn.clean:hover { background: rgba(74,222,128,0.25); }
+    .dev-banner .vt-dropdown {
+      position: absolute; top: calc(100% + 8px); right: 0; min-width: 400px;
+      background: #1e1b2e; border: 1px solid #3b3660; border-radius: 10px;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.4); display: none; overflow: hidden;
+      font-family: monospace; font-size: 12px;
+    }
+    .dev-banner .vt-dropdown.open { display: block; }
+    .dev-banner .vt-dropdown .vt-header {
+      padding: 8px 12px; background: #2a2550; border-bottom: 1px solid #3b3660;
+      font-weight: 600; color: #c4b5fd; display: flex; align-items: center; justify-content: space-between;
+    }
+    .dev-banner .vt-dropdown .vt-body { padding: 8px 12px; max-height: 240px; overflow-y: auto; }
+    .dev-banner .vt-dropdown .vt-error { color: #fca5a5; padding: 3px 0; }
+    .dev-banner .vt-dropdown .vt-warn { color: #fde68a; padding: 3px 0; }
 
     /* Pages mindmap overlay */
     .pages-overlay {
       position: fixed; inset: 0; z-index: 99990; background: rgba(10,10,20,0.92);
-      backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center;
-      font-family: var(--font-display);
+      backdrop-filter: blur(8px); display: none;
+      font-family: var(--font-display); overflow: hidden; cursor: grab;
     }
-    .pages-overlay.open { display: flex; }
+    .pages-overlay.open { display: block; }
+    .pages-overlay.grabbing { cursor: grabbing; }
     .pages-overlay .close-btn {
       position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.1);
       border: none; color: white; width: 32px; height: 32px; border-radius: 8px;
       cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center;
+      z-index: 10;
     }
     .pages-overlay .close-btn:hover { background: rgba(255,255,255,0.2); }
-    .mindmap-container { position: relative; padding: 40px; }
+    .pages-overlay .zoom-controls {
+      position: absolute; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 4px; z-index: 10;
+    }
+    .pages-overlay .zoom-btn {
+      width: 32px; height: 32px; border-radius: 8px; border: none;
+      background: rgba(255,255,255,0.1); color: white; font-size: 16px; cursor: pointer;
+      display: flex; align-items: center; justify-content: center; font-family: monospace;
+    }
+    .pages-overlay .zoom-btn:hover { background: rgba(255,255,255,0.2); }
+    .pages-overlay .zoom-level {
+      text-align: center; color: rgba(255,255,255,0.4); font-size: 10px; font-family: monospace;
+    }
+    .mindmap-container { position: absolute; top: 0; left: 0; transform-origin: 0 0; padding: 40px; }
     .mindmap-container svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
     .mindmap-nodes { position: relative; display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: flex-start; max-width: 900px; }
     .mindmap-node {
@@ -927,29 +1080,112 @@ function buildPreviewHtml(schema, port) {
       padding: 32px; text-align: center;
       box-shadow: 0 2px 12px rgba(0,0,0,0.04);
     }
+
+    /* (validation banner moved into topbar dropdown) */
+
+    /* 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; }
+
+    /* Field validation error */
+    .cf-field-error .cf-input { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important; }
+    .cf-field-error .cf-choice[data-selected="false"] { border-color: #fca5a5 !important; }
+
+    /* Action button styles */
+    .cf-btn-secondary {
+      font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
+      border-radius: 14px; padding: 14px 28px; font-size: 16px; border: 2px solid;
+      cursor: pointer; transition: all 0.25s var(--ease-out-expo); background: transparent;
+    }
+    .cf-btn-secondary:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
+    .cf-btn-ghost {
+      font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em;
+      border-radius: 14px; padding: 14px 28px; font-size: 16px; border: none;
+      cursor: pointer; transition: all 0.2s var(--ease-out-expo); background: transparent;
+    }
+    .cf-btn-ghost:hover { background: rgba(0,0,0,0.04); }
+
+    /* Sticky bottom bar */
+    .cf-sticky-bar {
+      position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
+      transition: transform 0.3s var(--ease-out-expo);
+    }
+    .cf-sticky-bar.hidden { transform: translateY(100%); }
+
+    /* Resume prompt */
+    .cf-resume-backdrop {
+      position: fixed; inset: 0; z-index: 99; background: rgba(0,0,0,0.2);
+      backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;
+    }
   </style>
 </head>
 <body>
-  <div class="dev-banner">
+  <div class="dev-banner" id="dev-banner">
+    <span class="drag-handle" id="banner-drag" title="Drag to reposition">\u283F</span>
     <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 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 class="validation-tag" id="validation-tag"></span>
+      <button class="minimize-btn" id="banner-minimize" title="Minimize toolbar">\u25B4</button>
     </span>
   </div>
+  <div class="dev-banner-restore" id="banner-restore">
+    <span class="restore-dot"></span>
+    <span>DEV</span>
+  </div>
   <div class="pages-overlay" id="pages-overlay">
     <button class="close-btn" id="pages-close">&times;</button>
+    <div class="zoom-controls">
+      <button class="zoom-btn" id="zoom-in">+</button>
+      <div class="zoom-level" id="zoom-level">100%</div>
+      <button class="zoom-btn" id="zoom-out">&minus;</button>
+      <button class="zoom-btn" id="zoom-fit" style="font-size:11px;margin-top:4px;">Fit</button>
+    </div>
     <div class="mindmap-container" id="mindmap-container"></div>
   </div>
   <div class="inspector-highlight" id="inspector-highlight" style="display:none"></div>
   <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>
 
   <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 +1195,16 @@ function buildPreviewHtml(schema, port) {
     const schema = JSON.parse(document.getElementById('__catalog_data').textContent);
     const themeColor = '${themeColor}';
 
+    // --- Shared Engine (auto-generated from shared/engine/{conditions,routing,validate}.ts) ---
+    ${engineScript}
+
+    // --- Dev context for condition/routing evaluation ---
+    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 };
+    })();
+
     // --- Markdown-ish text rendering ---
     function inlineMarkdown(text) {
       return text
@@ -1001,26 +1247,31 @@ function buildPreviewHtml(schema, port) {
       return 'text-left';
     }
 
-    // --- Routing helpers ---
-    function getNextPageId(currentId, routing, formState) {
-      if (!routing || !routing.edges) return null;
-      const edges = routing.edges.filter(e => e.from === currentId);
-      // Sort by priority (lower = higher priority)
-      edges.sort((a, b) => (a.priority ?? 999) - (b.priority ?? 999));
-      for (const edge of edges) {
-        if (!edge.conditions || edge.conditions.length === 0) return edge.to;
-        const match = edge.conditions.every(cond => {
-          const val = formState[cond.field];
-          if (cond.operator === 'equals') return val === cond.value;
-          if (cond.operator === 'not_equals') return val !== cond.value;
-          if (cond.operator === 'contains') return typeof val === 'string' && val.includes(cond.value);
-          return true;
-        });
-        if (match) return edge.to;
+    // --- Variant resolution ---
+    function resolveComponentVariants(props, hints) {
+      const resolved = { ...props };
+      const variantKeys = Object.keys(props).filter(k => k.endsWith('__variants'));
+      for (const variantKey of variantKeys) {
+        const baseProp = variantKey.replace('__variants', '');
+        const variants = props[variantKey];
+        if (!variants || typeof variants !== 'object') continue;
+        let bestMatch = null;
+        for (const [conditionStr, value] of Object.entries(variants)) {
+          const conditions = conditionStr.split(',').map(c => c.trim());
+          let allMatch = true, score = 0;
+          for (const cond of conditions) {
+            const [hintKey, hintValue] = cond.split('=');
+            if (hints[hintKey] === hintValue) score++;
+            else { allMatch = false; break; }
+          }
+          if (allMatch && score > 0 && (!bestMatch || score > bestMatch.score)) {
+            bestMatch = { value, score };
+          }
+        }
+        if (bestMatch) resolved[baseProp] = bestMatch.value;
+        delete resolved[variantKey];
       }
-      // Fallback: default edge (no conditions)
-      const defaultEdge = edges.find(e => !e.conditions || e.conditions.length === 0);
-      return defaultEdge ? defaultEdge.to : null;
+      return resolved;
     }
 
     // --- Component Renderers ---
@@ -1085,11 +1336,7 @@ function buildPreviewHtml(schema, port) {
               h('iframe', { src: embedUrl, className: 'absolute inset-0 w-full h-full', allow: 'autoplay; fullscreen; picture-in-picture', allowFullScreen: true })
             );
           }
-          return h('div', { className: 'w-full ' + compClass, style: compStyle },
-            h('div', { className: 'relative w-full overflow-hidden rounded-2xl shadow-lg' },
-              h('video', { src: props.hls_url || src, controls: true, playsInline: true, poster: props.poster, className: 'w-full' })
-            )
-          );
+          return h(VideoPlayer, { comp, isCover, compClass, compStyle });
         }
 
         case 'html':
@@ -1260,13 +1507,195 @@ 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 });
+
+        case 'date':
+        case 'datetime':
+        case 'time': {
+          const htmlType = type === 'datetime' ? 'datetime-local' : type;
+          return h('div', { className: 'space-y-1.5 ' + compClass, style: compStyle },
+            props.label ? h('label', { className: 'block text-base font-medium ' + (isCover ? 'text-white' : 'text-gray-700') },
+              props.label, props.required ? h('span', { className: 'text-red-500 ml-1' }, '*') : null
+            ) : null,
+            h('input', { type: htmlType, className: 'cf-input', value: formState[comp.id] ?? '', onChange: (e) => onFieldChange(comp.id, e.target.value) })
+          );
+        }
+
+        case 'date_range': {
+          const rangeVal = formState[comp.id] || {};
+          return h('div', { className: 'space-y-1.5 ' + compClass, style: compStyle },
+            props.label ? h('label', { className: 'block text-base font-medium ' + (isCover ? 'text-white' : 'text-gray-700') },
+              props.label, props.required ? h('span', { className: 'text-red-500 ml-1' }, '*') : null
+            ) : null,
+            h('div', { className: 'flex gap-3 items-center' },
+              h('input', { type: 'date', className: 'cf-input flex-1', value: rangeVal.start || '', onChange: (e) => onFieldChange(comp.id, { ...rangeVal, start: e.target.value }) }),
+              h('span', { className: 'text-gray-400 text-sm' }, 'to'),
+              h('input', { type: 'date', className: 'cf-input flex-1', value: rangeVal.end || '', onChange: (e) => onFieldChange(comp.id, { ...rangeVal, end: e.target.value }) })
+            )
+          );
+        }
+
+        case 'picture_choice': {
+          const pcOptions = props.options || [];
+          const pcMultiple = props.multiple;
+          const pcSelected = formState[comp.id];
+          const pcCols = props.columns || Math.min(pcOptions.length, 3);
+          return h('div', { className: 'space-y-1.5 ' + compClass, style: compStyle },
+            props.label ? h('label', { className: 'block text-base font-medium ' + (isCover ? 'text-white' : 'text-gray-700') },
+              props.label, props.required ? h('span', { className: 'text-red-500 ml-1' }, '*') : null
+            ) : null,
+            h('div', { className: 'grid gap-3', style: { gridTemplateColumns: 'repeat(' + pcCols + ', 1fr)' } },
+              ...(pcOptions).map((opt, j) => {
+                const val = typeof opt === 'string' ? opt : opt.value;
+                const lbl = typeof opt === 'string' ? opt : opt.label || opt.value;
+                const img = typeof opt === 'object' ? opt.image : null;
+                const isSel = pcMultiple ? Array.isArray(pcSelected) && pcSelected.includes(val) : pcSelected === val;
+                return h('button', {
+                  key: j, className: 'rounded-xl border-2 overflow-hidden transition-all text-center p-2',
+                  style: isSel ? { borderColor: themeColor, boxShadow: '0 0 0 3px ' + themeColor + '26' } : { borderColor: '#e2e4e9' },
+                  onClick: () => {
+                    if (pcMultiple) {
+                      const arr = Array.isArray(pcSelected) ? [...pcSelected] : [];
+                      onFieldChange(comp.id, isSel ? arr.filter(v => v !== val) : [...arr, val]);
+                    } else { onFieldChange(comp.id, val); }
+                  },
+                },
+                  img ? h('img', { src: img, alt: lbl, className: 'w-full h-24 object-cover rounded-lg mb-2' }) : null,
+                  h('span', { className: 'text-sm font-medium ' + (isCover ? 'text-white' : 'text-gray-700') }, lbl)
+                );
+              })
+            )
+          );
+        }
+
+        case 'opinion_scale': {
+          const osMin = props.min ?? 1, osMax = props.max ?? 10;
+          const osValue = formState[comp.id];
+          const osButtons = [];
+          for (let i = osMin; i <= osMax; i++) osButtons.push(i);
+          return h('div', { className: 'space-y-1.5 ' + compClass, style: compStyle },
+            props.label ? h('label', { className: 'block text-base font-medium ' + (isCover ? 'text-white' : 'text-gray-700') },
+              props.label, props.required ? h('span', { className: 'text-red-500 ml-1' }, '*') : null
+            ) : null,
+            h('div', { className: 'flex items-center gap-1' },
+              props.min_label ? h('span', { className: 'text-xs text-gray-400 mr-2 shrink-0' }, props.min_label) : null,
+              ...osButtons.map(n => h('button', {
+                key: n, className: 'flex-1 py-2.5 rounded-lg text-sm font-semibold transition-all border',
+                style: osValue === n ? { backgroundColor: themeColor, color: 'white', borderColor: themeColor } : { backgroundColor: 'transparent', color: isCover ? 'white' : '#374151', borderColor: '#e5e7eb' },
+                onClick: () => onFieldChange(comp.id, n),
+              }, String(n))),
+              props.max_label ? h('span', { className: 'text-xs text-gray-400 ml-2 shrink-0' }, props.max_label) : null
+            )
+          );
+        }
+
+        case 'address':
+          return h(AddressInput, { comp, formState, onFieldChange, isCover, compClass, compStyle });
+
+        case 'currency': {
+          const currSymbol = props.currency_symbol || props.prefix || '$';
+          return h('div', { className: 'space-y-1.5 ' + compClass, style: compStyle },
+            props.label ? h('label', { className: 'block text-base font-medium ' + (isCover ? 'text-white' : 'text-gray-700') },
+              props.label, props.required ? h('span', { className: 'text-red-500 ml-1' }, '*') : null
+            ) : null,
+            h('div', { className: 'relative' },
+              h('span', { className: 'absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 font-medium pointer-events-none' }, currSymbol),
+              h('input', { type: 'number', className: 'cf-input', style: { paddingLeft: '2.5rem' },
+                placeholder: props.placeholder || '0.00', step: props.step || '0.01',
+                value: formState[comp.id] ?? '', onChange: (e) => onFieldChange(comp.id, e.target.value) })
+            )
+          );
+        }
+
+        case 'file_upload':
+          return h(FileUploadInput, { comp, formState, onFieldChange, isCover, compClass, compStyle });
+
+        case 'signature':
+          return h(SignatureInput, { comp, formState, onFieldChange, isCover, compClass, compStyle });
+
+        case 'table': {
+          const tHeaders = props.headers || [];
+          const tRows = props.rows || [];
+          return h('div', { className: 'overflow-x-auto rounded-xl border border-gray-200 ' + compClass, style: compStyle },
+            h('table', { className: 'w-full text-sm' },
+              tHeaders.length > 0 ? h('thead', null,
+                h('tr', null, ...tHeaders.map((hdr, i) => h('th', { key: i, className: 'px-4 py-3 text-left font-semibold text-white', style: { backgroundColor: themeColor } }, hdr)))
+              ) : null,
+              h('tbody', null,
+                ...tRows.map((row, i) => h('tr', { key: i, className: i % 2 === 0 ? 'bg-white' : 'bg-gray-50' },
+                  ...(Array.isArray(row) ? row : Object.values(row)).map((cell, j) => h('td', { key: j, className: 'px-4 py-3 text-gray-700 border-t border-gray-100' }, String(cell ?? '')))
+                ))
+              )
+            )
+          );
+        }
+
+        case 'social_links': {
+          const socialLinks = props.links || [];
+          return h('div', { className: 'flex items-center gap-3 ' + compClass, style: compStyle },
+            ...socialLinks.map((link, i) => h('a', {
+              key: i, href: link.url, target: '_blank', rel: 'noopener noreferrer',
+              className: 'w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-bold transition-transform hover:scale-110',
+              style: { backgroundColor: themeColor }, title: link.platform,
+            }, (link.platform || '?')[0].toUpperCase()))
+          );
+        }
+
+        case 'accordion': {
+          const accItems = props.items || [];
+          return h('div', { className: 'space-y-3 ' + compClass, style: compStyle },
+            ...accItems.map((item, i) => h(FaqItem, { key: i, question: item.title || item.question, answer: item.content || item.answer, isCover }))
+          );
+        }
+
+        case 'tabs':
+          return h(TabsComponent, { comp, isCover, compClass, compStyle });
+
+        case 'countdown':
+          return h(CountdownComponent, { comp, compClass, compStyle });
+
+        case 'comparison_table': {
+          const ctPlans = props.plans || [];
+          const ctFeatures = props.features || [];
+          return h('div', { className: 'overflow-x-auto ' + compClass, style: compStyle },
+            h('table', { className: 'w-full text-sm' },
+              h('thead', null,
+                h('tr', null,
+                  h('th', { className: 'px-4 py-3 text-left text-gray-500 font-medium' }, 'Feature'),
+                  ...ctPlans.map((plan, i) => h('th', { key: i, className: 'px-4 py-3 text-center font-bold', style: plan.highlighted ? { color: themeColor } : undefined }, plan.name || plan.label))
+                )
+              ),
+              h('tbody', null,
+                ...ctFeatures.map((feat, i) => h('tr', { key: i, className: i % 2 === 0 ? 'bg-white' : 'bg-gray-50' },
+                  h('td', { className: 'px-4 py-3 text-gray-700 font-medium border-t border-gray-100' }, feat.name || feat.label),
+                  ...ctPlans.map((plan, j) => {
+                    const fVal = plan.features?.[feat.id || feat.name] ?? feat.values?.[j];
+                    const fDisplay = fVal === true ? '\\u2713' : fVal === false ? '\\u2014' : String(fVal ?? '\\u2014');
+                    return h('td', { key: j, className: 'px-4 py-3 text-center border-t border-gray-100', style: fVal === true ? { color: themeColor } : undefined }, fDisplay);
+                  })
+                ))
+              )
+            )
+          );
+        }
+
+        case 'progress_bar': {
+          const pbValue = props.value ?? 0;
+          const pbMax = props.max ?? 100;
+          const pbPct = Math.min(100, Math.max(0, (pbValue / pbMax) * 100));
+          return h('div', { className: 'space-y-1.5 ' + compClass, style: compStyle },
+            props.label ? h('div', { className: 'flex justify-between text-sm' },
+              h('span', { className: 'font-medium text-gray-700' }, props.label),
+              h('span', { className: 'text-gray-400' }, Math.round(pbPct) + '%')
+            ) : null,
+            h('div', { className: 'w-full h-3 bg-gray-100 rounded-full overflow-hidden' },
+              h('div', { className: 'h-full rounded-full progress-bar-fill', style: { width: pbPct + '%', backgroundColor: themeColor } })
+            )
           );
+        }
+
+        case 'modal':
+          return h(ModalComponent, { comp, isCover, compClass, compStyle });
 
         default:
           return h('div', {
@@ -1427,14 +1856,332 @@ function buildPreviewHtml(schema, port) {
       );
     }
 
+    // --- Additional input/display components ---
+    function AddressInput({ comp, formState, onFieldChange, isCover, compClass, compStyle }) {
+      const props = comp.props || {};
+      const addr = formState[comp.id] || {};
+      const up = (field, val) => onFieldChange(comp.id, { ...addr, [field]: val });
+      return h('div', { className: 'space-y-1.5 ' + compClass, style: compStyle },
+        props.label ? h('label', { className: 'block text-base font-medium ' + (isCover ? 'text-white' : 'text-gray-700') },
+          props.label, props.required ? h('span', { className: 'text-red-500 ml-1' }, '*') : null) : null,
+        h('div', { className: 'space-y-2' },
+          h('input', { type: 'text', className: 'cf-input', placeholder: 'Street address', value: addr.street || '', onChange: (e) => up('street', e.target.value) }),
+          h('div', { className: 'grid grid-cols-2 gap-2' },
+            h('input', { type: 'text', className: 'cf-input', placeholder: 'City', value: addr.city || '', onChange: (e) => up('city', e.target.value) }),
+            h('input', { type: 'text', className: 'cf-input', placeholder: 'State', value: addr.state || '', onChange: (e) => up('state', e.target.value) })
+          ),
+          h('div', { className: 'grid grid-cols-2 gap-2' },
+            h('input', { type: 'text', className: 'cf-input', placeholder: 'ZIP / Postal', value: addr.zip || '', onChange: (e) => up('zip', e.target.value) }),
+            h('input', { type: 'text', className: 'cf-input', placeholder: 'Country', value: addr.country || '', onChange: (e) => up('country', e.target.value) })
+          )
+        )
+      );
+    }
+
+    function FileUploadInput({ comp, formState, onFieldChange, isCover, compClass, compStyle }) {
+      const props = comp.props || {};
+      const fileName = formState[comp.id] || '';
+      const fileRef = React.useRef(null);
+      return h('div', { className: 'space-y-1.5 ' + compClass, style: compStyle },
+        props.label ? h('label', { className: 'block text-base font-medium ' + (isCover ? 'text-white' : 'text-gray-700') },
+          props.label, props.required ? h('span', { className: 'text-red-500 ml-1' }, '*') : null) : null,
+        h('div', { className: 'border-2 border-dashed border-gray-200 rounded-xl p-6 text-center' },
+          h('input', { type: 'file', ref: fileRef, className: 'hidden', accept: props.accept,
+            onChange: (e) => { const f = e.target.files?.[0]; if (f) onFieldChange(comp.id, f.name); } }),
+          fileName
+            ? h('div', { className: 'flex items-center justify-center gap-2' },
+                h('span', { className: 'text-sm text-gray-700' }, fileName),
+                h('button', { className: 'text-xs text-red-500 hover:text-red-700', onClick: () => onFieldChange(comp.id, '') }, 'Remove'))
+            : h('button', { className: 'text-sm font-medium', style: { color: themeColor }, onClick: () => fileRef.current?.click() }, props.button_text || 'Choose file'),
+          h('p', { className: 'text-xs text-gray-400 mt-2' }, 'Files are not uploaded in dev mode')
+        )
+      );
+    }
+
+    function SignatureInput({ comp, formState, onFieldChange, isCover, compClass, compStyle }) {
+      const props = comp.props || {};
+      const signed = !!formState[comp.id];
+      return h('div', { className: 'space-y-1.5 ' + compClass, style: compStyle },
+        props.label ? h('label', { className: 'block text-base font-medium ' + (isCover ? 'text-white' : 'text-gray-700') },
+          props.label, props.required ? h('span', { className: 'text-red-500 ml-1' }, '*') : null) : null,
+        h('div', { className: 'border rounded-xl p-4' },
+          signed
+            ? h('div', { className: 'flex items-center justify-between' },
+                h('span', { className: 'text-sm text-green-600 font-medium' }, '\\u2713 Signature captured'),
+                h('button', { className: 'text-xs text-gray-400 hover:text-gray-600', onClick: () => onFieldChange(comp.id, '') }, 'Clear'))
+            : h('button', {
+                className: 'w-full py-8 text-center text-sm text-gray-400 border-2 border-dashed rounded-lg hover:bg-gray-50',
+                onClick: () => onFieldChange(comp.id, 'signature_' + Date.now()),
+              }, 'Click to sign (canvas stubbed in dev)')
+        )
+      );
+    }
+
+    function TabsComponent({ comp, isCover, compClass, compStyle }) {
+      const props = comp.props || {};
+      const tabs = props.tabs || [];
+      const [activeTab, setActiveTab] = React.useState(0);
+      return h('div', { className: compClass, style: compStyle },
+        h('div', { className: 'flex border-b border-gray-200 mb-4' },
+          ...tabs.map((tab, i) => h('button', {
+            key: i, className: 'px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px',
+            style: i === activeTab ? { color: themeColor, borderColor: themeColor } : { color: '#9ca3af', borderColor: 'transparent' },
+            onClick: () => setActiveTab(i),
+          }, tab.label || tab.title || 'Tab ' + (i + 1)))
+        ),
+        tabs[activeTab] ? h('div', { className: 'text-sm text-gray-600', dangerouslySetInnerHTML: { __html: renderMarkdownish(tabs[activeTab].content || '') } }) : null
+      );
+    }
+
+    function CountdownComponent({ comp, compClass, compStyle }) {
+      const props = comp.props || {};
+      const [timeLeft, setTimeLeft] = React.useState({});
+      React.useEffect(() => {
+        const target = new Date(props.target_date).getTime();
+        const update = () => {
+          const diff = Math.max(0, target - Date.now());
+          setTimeLeft({ days: Math.floor(diff / 86400000), hours: Math.floor((diff % 86400000) / 3600000), minutes: Math.floor((diff % 3600000) / 60000), seconds: Math.floor((diff % 60000) / 1000) });
+        };
+        update();
+        const iv = setInterval(update, 1000);
+        return () => clearInterval(iv);
+      }, [props.target_date]);
+      return h('div', { className: 'flex items-center justify-center gap-4 ' + compClass, style: compStyle },
+        ...['days', 'hours', 'minutes', 'seconds'].map(unit =>
+          h('div', { key: unit, className: 'text-center' },
+            h('div', { className: 'text-3xl font-bold', style: { color: themeColor, fontFamily: 'var(--font-display)' } }, String(timeLeft[unit] ?? 0).padStart(2, '0')),
+            h('div', { className: 'text-xs text-gray-400 uppercase tracking-wider mt-1' }, unit)
+          )
+        )
+      );
+    }
+
+    function ModalComponent({ comp, isCover, compClass, compStyle }) {
+      const props = comp.props || {};
+      const [open, setOpen] = React.useState(false);
+      return h(React.Fragment, null,
+        h('button', { className: 'cf-btn-primary text-white', style: { backgroundColor: themeColor, ...compStyle }, onClick: () => setOpen(true) },
+          props.trigger_label || props.label || 'Open'),
+        open ? h('div', { className: 'fixed inset-0 z-[99] flex items-center justify-center' },
+          h('div', { className: 'absolute inset-0 bg-black/40 backdrop-blur-sm', onClick: () => setOpen(false) }),
+          h('div', { className: 'relative bg-white rounded-2xl max-w-lg w-full mx-4 p-6 shadow-2xl max-h-[80vh] overflow-y-auto' },
+            h('div', { className: 'flex justify-between items-center mb-4' },
+              props.title ? h('h3', { className: 'text-lg font-bold text-gray-900' }, props.title) : null,
+              h('button', { className: 'text-gray-400 hover:text-gray-600 text-xl', onClick: () => setOpen(false) }, '\\u2715')
+            ),
+            h('div', { className: 'text-sm text-gray-600', dangerouslySetInnerHTML: { __html: renderMarkdownish(props.content || props.body || '') } })
+          )
+        ) : null
+      );
+    }
+
+    function ActionButton({ action, themeColor, onAction }) {
+      const st = action.style || 'primary';
+      const hasSide = !!action.side_statement;
+      const btnProps = st === 'primary'
+        ? { className: 'cf-btn-primary text-white', style: { backgroundColor: themeColor } }
+        : st === 'secondary'
+          ? { className: 'cf-btn-secondary', style: { borderColor: themeColor, color: themeColor } }
+          : st === 'danger'
+            ? { className: 'cf-btn-primary text-white', style: { backgroundColor: '#ef4444' } }
+            : { className: 'cf-btn-ghost', style: { color: themeColor + 'cc' } };
+      const btn = h('button', {
+        ...btnProps,
+        className: btnProps.className + (hasSide ? ' flex-1' : ' w-full') + ' flex items-center justify-center',
+        onClick: () => onAction(action),
+      },
+        action.icon ? h('span', { className: 'mr-2' }, action.icon) : null,
+        action.label
+      );
+      return h('div', { className: 'w-full' },
+        hasSide ? h('div', { className: 'flex items-center gap-4' }, btn, h('span', { className: 'text-sm font-medium text-gray-600 shrink-0' }, action.side_statement)) : btn,
+        action.reassurance ? h('p', { className: 'text-xs text-gray-400 mt-1.5 text-center' }, action.reassurance) : null
+      );
+    }
+
+    function VideoPlayer({ comp, isCover, compClass, compStyle }) {
+      const props = comp.props || {};
+      const videoRef = React.useRef(null);
+      React.useEffect(() => {
+        const video = videoRef.current;
+        if (!video) return;
+        const handler = () => {
+          const pct = video.duration ? Math.round((video.currentTime / video.duration) * 100) : 0;
+          window.__videoWatchState = window.__videoWatchState || {};
+          window.__videoWatchState[comp.id] = { watch_percent: pct, playing: !video.paused, duration: video.duration };
+        };
+        video.addEventListener('timeupdate', handler);
+        return () => video.removeEventListener('timeupdate', handler);
+      }, []);
+      return h('div', { className: 'w-full ' + compClass, style: compStyle },
+        h('div', { className: 'relative w-full overflow-hidden rounded-2xl shadow-lg' },
+          h('video', { ref: videoRef, src: props.hls_url || props.src, controls: true, playsInline: true, poster: props.poster, className: 'w-full' })
+        )
+      );
+    }
+
+    function StickyBottomBar({ config, page, formState, cartItems, themeColor, onNext, onAction, onBack, historyLen }) {
+      const [visible, setVisible] = React.useState(!config.delay_ms);
+      const [scrollDir, setScrollDir] = React.useState('down');
+      React.useEffect(() => {
+        if (!config.delay_ms) return;
+        const timer = setTimeout(() => setVisible(true), config.delay_ms);
+        return () => clearTimeout(timer);
+      }, [config.delay_ms]);
+      React.useEffect(() => {
+        if (config.scroll_behavior !== 'show_on_up') return;
+        let lastY = window.scrollY;
+        const handler = () => { const dir = window.scrollY > lastY ? 'down' : 'up'; setScrollDir(dir); lastY = window.scrollY; };
+        window.addEventListener('scroll', handler, { passive: true });
+        return () => window.removeEventListener('scroll', handler);
+      }, []);
+      const show = visible && (config.scroll_behavior !== 'show_on_up' || scrollDir === 'up');
+      const interpolate = (text) => text ? text.replace(/\\{\\{(\\w+)\\}\\}/g, (_, id) => formState[id] ?? '') : text;
+      const bgStyles = {
+        solid: { backgroundColor: 'white', borderTop: '1px solid #e5e7eb' },
+        glass: { backgroundColor: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(16px)', borderTop: '1px solid rgba(0,0,0,0.05)' },
+        glass_dark: { backgroundColor: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(16px)', color: 'white' },
+        gradient: { background: 'linear-gradient(135deg, ' + themeColor + ' 0%, ' + themeColor + 'dd 100%)', color: 'white' },
+      };
+      const handlePrimary = () => {
+        const dispatch = config.primary_action?.dispatch;
+        if (!dispatch || dispatch === 'next') { onNext(); return; }
+        if (dispatch.startsWith('action:')) {
+          const actionId = dispatch.slice(7);
+          const action = page.actions?.find(a => a.id === actionId);
+          if (action) onAction(action); else onNext();
+        } else { onNext(); }
+      };
+      return h('div', {
+        className: 'cf-sticky-bar' + (show ? '' : ' hidden'),
+        style: bgStyles[config.style || 'solid'] || bgStyles.solid,
+      },
+        h('div', { className: 'max-w-2xl mx-auto px-6 py-4 flex items-center justify-between gap-4' },
+          config.show_back && historyLen > 0
+            ? h('button', { className: 'text-sm text-gray-500 hover:text-gray-700', onClick: onBack }, '\\u2190 Back') : null,
+          h('div', { className: 'flex-1 text-center' },
+            config.subtitle ? h('p', { className: 'text-xs opacity-60 mb-0.5' }, interpolate(config.subtitle)) : null
+          ),
+          h('div', { className: 'flex items-center gap-3' },
+            config.cart_badge && cartItems.length > 0
+              ? h('span', { className: 'bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center' }, cartItems.length) : null,
+            h('button', {
+              className: 'cf-btn-primary text-white text-sm',
+              style: { backgroundColor: config.style === 'gradient' ? 'rgba(255,255,255,0.9)' : themeColor, color: config.style === 'gradient' ? themeColor : 'white' },
+              disabled: config.disabled,
+              onClick: handlePrimary,
+            }, interpolate(config.primary_action?.label || page.submit_label || 'Continue'))
+          )
+        )
+      );
+    }
+
+    // --- 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;
+      const cartPos = (schema.settings?.cart?.position) || 'bottom-right';
+      const posClass = { 'bottom-right': 'bottom-6 right-6', 'bottom-left': 'bottom-6 left-6', 'top-right': 'top-20 right-6', 'top-left': 'top-20 left-6' }[cartPos] || 'bottom-6 right-6';
       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',
+        className: 'fixed 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 ' + posClass,
         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 },
@@ -1473,7 +2220,7 @@ function buildPreviewHtml(schema, port) {
                 )
               ),
               h('div', null,
-                h('h2', { className: 'text-lg font-bold text-gray-900' }, 'Your Cart'),
+                h('h2', { className: 'text-lg font-bold text-gray-900' }, schema.settings?.cart?.title || 'Your Cart'),
                 h('p', { className: 'text-xs text-gray-400' }, items.length + ' ' + (items.length === 1 ? 'item' : 'items') + ' selected')
               )
             ),
@@ -1522,31 +2269,157 @@ function buildPreviewHtml(schema, port) {
                 'Added to order'
               )
             ),
-            h('div', { className: 'checkout-stub' },
-              h('h3', null, 'Checkout (Dev Stub)'),
-              h('p', null, 'Payment processing is disabled in local dev mode.')
-            )
+            h(CartCheckoutButton, { items, themeColor })
           ) : null
         )
       );
     }
 
-    // --- Main App ---
-    function CatalogPreview({ catalog }) {
-      const pages = catalog.pages || {};
-      const pageKeys = Object.keys(pages);
-      const routing = catalog.routing || {};
-      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);
+    function CartCheckoutButton({ items, themeColor }) {
+      const [loading, setLoading] = React.useState(false);
+      const [error, setError] = React.useState(null);
 
-      // --- Cart logic ---
-      const addToCart = React.useCallback((pageId) => {
-        const pg = pages[pageId];
-        if (!pg?.offer) return;
-        const offer = pg.offer;
+      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: rawCatalog }) {
+      // --- Variant resolution ---
+      const catalog = React.useMemo(() => {
+        const urlParams = Object.fromEntries(new URLSearchParams(window.location.search));
+        const variantSlug = urlParams.variant;
+        const catalogHints = rawCatalog.hints || {};
+        let hints = { ...(catalogHints.defaults || {}) };
+        if (variantSlug && catalogHints.variants) {
+          const variant = catalogHints.variants.find(v => v.slug === variantSlug);
+          if (variant?.hints) hints = { ...hints, ...variant.hints };
+        }
+        devContext.hints = hints;
+        if (Object.keys(hints).length === 0) return rawCatalog;
+        const resolvedPages = JSON.parse(JSON.stringify(rawCatalog.pages || {}));
+        for (const page of Object.values(resolvedPages)) {
+          for (const comp of page.components || []) {
+            comp.props = resolveComponentVariants(comp.props || {}, hints);
+          }
+          if (page.actions) {
+            for (const action of page.actions) Object.assign(action, resolveComponentVariants(action, hints));
+          }
+        }
+        return { ...rawCatalog, pages: resolvedPages };
+      }, [rawCatalog]);
+
+      const pages = catalog.pages || {};
+      const pageKeys = Object.keys(pages);
+      const routing = catalog.routing || {};
+      const entryPageId = routing.entry || pageKeys[0] || null;
+      const saveKey = 'cf_resume_' + (catalog.slug || 'dev');
+
+      const [currentPageId, setCurrentPageId] = React.useState(entryPageId);
+      // --- Prefill / default values ---
+      const [formState, setFormState] = React.useState(() => {
+        const state = {};
+        for (const page of Object.values(pages)) {
+          for (const comp of page.components || []) {
+            if (comp.props?.default_value != null) state[comp.id] = comp.props.default_value;
+            if ((comp.type === 'checkboxes' || comp.type === 'multiple_choice') && Array.isArray(comp.props?.options)) {
+              for (const opt of comp.props.options) {
+                if (!opt.inputs) continue;
+                for (const input of opt.inputs) {
+                  const nd = input.props?.default_value ?? input.default_value;
+                  if (nd != null) state[comp.id + '.' + opt.value + '.' + input.id] = nd;
+                }
+              }
+            }
+          }
+        }
+        const mappings = catalog.settings?.url_params?.prefill_mappings;
+        if (mappings) {
+          const urlParams = Object.fromEntries(new URLSearchParams(window.location.search));
+          for (const [param, compId] of Object.entries(mappings)) {
+            if (urlParams[param]) state[compId] = urlParams[param];
+          }
+        }
+        return state;
+      });
+      const [history, setHistory] = React.useState([]);
+      const [cartItems, setCartItems] = React.useState([]);
+      const [cartOpen, setCartOpen] = React.useState(false);
+      const [showCheckout, setShowCheckout] = React.useState(false);
+      const [validationErrors, setValidationErrors] = React.useState([]);
+      const [savedSession, setSavedSession] = React.useState(null);
+      const [showResumeModal, setShowResumeModal] = React.useState(false);
+      const [submitted, setSubmitted] = React.useState(() => {
+        const params = new URLSearchParams(window.location.search);
+        return params.get('checkout') === 'success';
+      });
+      const formStateRef = React.useRef(formState);
+      formStateRef.current = formState;
+      const historyRef = React.useRef(history);
+      historyRef.current = history;
+      const autoAdvanceTimer = React.useRef(null);
+
+      // --- 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, {
@@ -1556,6 +2429,11 @@ function buildPreviewHtml(schema, port) {
             price_display: offer.price_display,
             price_subtext: offer.price_subtext,
             image: offer.image,
+            stripe_price_id: offer.stripe_price_id,
+            amount_cents: offer.amount_cents,
+            currency: offer.currency,
+            payment_type: offer.payment_type,
+            interval: offer.interval,
           }];
         });
       }, [pages]);
@@ -1587,12 +2465,119 @@ function buildPreviewHtml(schema, port) {
         }
       }, [formState, pages, cartItems, addToCart, removeFromCart]);
 
-      // Expose navigation for mindmap
+      // Expose navigation for mindmap + emit page_view + fire CatalogKit events
       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 });
+        setValidationErrors([]);
+        // CatalogKit pageenter event
+        const listeners = window.__catalogKitListeners || {};
+        for (const key of ['pageenter', 'pageenter:' + currentPageId]) {
+          const set = listeners[key]; if (!set?.size) continue;
+          for (const cb of set) { try { cb({ pageId: currentPageId }); } catch (e) { console.error('[CatalogKit]', key, e); } }
+        }
       }, [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]);
+
+      // --- Browser history (pushState / popstate) ---
+      React.useEffect(() => {
+        window.history.replaceState({ pageId: entryPageId, history: [] }, '');
+        const onPopState = (e) => {
+          const pageId = e.state?.pageId;
+          const prevHistory = e.state?.history || [];
+          if (pageId && pages[pageId]) {
+            setCurrentPageId(pageId);
+            setHistory(prevHistory);
+            setValidationErrors([]);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }
+        };
+        window.addEventListener('popstate', onPopState);
+        return () => window.removeEventListener('popstate', onPopState);
+      }, []);
+
+      // --- localStorage persistence ---
+      React.useEffect(() => {
+        if (!submitted) {
+          try { localStorage.setItem(saveKey, JSON.stringify({ formState, currentPageId, history })); } catch {}
+        }
+      }, [formState, currentPageId, history, submitted]);
+
+      // --- Check for saved session on mount ---
+      React.useEffect(() => {
+        try {
+          const raw = localStorage.getItem(saveKey);
+          if (raw) {
+            const data = JSON.parse(raw);
+            if (data.currentPageId && data.currentPageId !== entryPageId && pages[data.currentPageId]) {
+              setSavedSession(data);
+              setShowResumeModal(true);
+            }
+          }
+        } catch {}
+      }, []);
+
+      // --- Auto-skip pages ---
+      React.useEffect(() => {
+        const page = pages[currentPageId];
+        if (!page?.auto_skip) return;
+        const inputTypes = new Set(['short_text','long_text','rich_text','email','phone','url','address','number','currency','date','datetime','time','date_range','dropdown','multiselect','multiple_choice','checkboxes','picture_choice','switch','checkbox','choice_matrix','ranking','star_rating','slider','opinion_scale','file_upload','signature','password','location']);
+        const visibleInputs = (page.components || []).filter(c => {
+          if (!inputTypes.has(c.type)) return false;
+          if (c.hidden || c.props?.hidden) return false;
+          if (c.visibility && !evaluateConditionGroup(c.visibility, formState, devContext)) return false;
+          return true;
+        });
+        const allFilled = visibleInputs.every(c => {
+          if (!c.props?.required) return true;
+          const val = formState[c.id];
+          return val != null && val !== '' && !(Array.isArray(val) && val.length === 0);
+        });
+        if (allFilled && visibleInputs.length > 0) {
+          devEvents.emit('page_auto_skipped', { page_id: currentPageId });
+          const nextId = getNextPage(routing, currentPageId, formState, devContext);
+          if (nextId && pages[nextId]) {
+            setCurrentPageId(nextId);
+            window.history.replaceState({ pageId: nextId, history: historyRef.current }, '');
+          }
+        }
+      }, [currentPageId]);
+
+      // --- CatalogKit API (window.CatalogKit) ---
+      React.useEffect(() => {
+        const listeners = {};
+        const instance = {
+          getField: (id) => formStateRef.current[id],
+          getAllFields: () => ({ ...formStateRef.current }),
+          getPageId: () => currentPageId,
+          setField: (id, value) => setFormState(prev => ({ ...prev, [id]: value })),
+          goNext: () => handleNextRef.current?.(),
+          goBack: () => handleBackRef.current?.(),
+          on: (event, cb) => { if (!listeners[event]) listeners[event] = new Set(); listeners[event].add(cb); },
+          off: (event, cb) => { listeners[event]?.delete(cb); },
+          openCart: () => setCartOpen(true),
+          closeCart: () => setCartOpen(false),
+          getCartItems: () => [...cartItems],
+          setValidationError: (id, msg) => {
+            setValidationErrors(prev => {
+              const next = prev.filter(e => e.componentId !== id);
+              if (msg) next.push({ componentId: id, message: msg });
+              return next;
+            });
+          },
+        };
+        window.CatalogKit = { get: () => instance, getField: instance.getField, setField: instance.setField, getPageId: instance.getPageId, goNext: instance.goNext, goBack: instance.goBack, on: instance.on, off: instance.off };
+        window.__catalogKitListeners = listeners;
+        return () => { delete window.CatalogKit; delete window.__catalogKitListeners; };
+      }, []);
+
       const page = currentPageId ? pages[currentPageId] : null;
       const isCover = page?.layout === 'cover';
       const isLastPage = (() => {
@@ -1600,27 +2585,110 @@ function buildPreviewHtml(schema, port) {
         return !routing.edges.some(e => e.from === currentPageId);
       })();
 
+      const navigateTo = React.useCallback((nextId) => {
+        // Fire CatalogKit pageexit
+        const ckListeners = window.__catalogKitListeners || {};
+        for (const key of ['pageexit', 'pageexit:' + currentPageId]) {
+          const set = ckListeners[key]; if (!set?.size) continue;
+          for (const cb of set) { try { cb({ pageId: currentPageId }); } catch (e) { console.error('[CatalogKit]', key, e); } }
+        }
+        if (nextId && pages[nextId]) {
+          const newHistory = [...history, currentPageId];
+          setHistory(newHistory);
+          setCurrentPageId(nextId);
+          window.history.pushState({ pageId: nextId, history: newHistory }, '');
+          window.scrollTo({ top: 0, behavior: 'smooth' });
+        } else {
+          // End of funnel \u2014 show checkout or completion
+          if (catalog.settings?.checkout) {
+            setShowCheckout(true);
+            devEvents.emit('checkout_start', { item_count: cartItems.length });
+          } else {
+            setSubmitted(true);
+            try { localStorage.removeItem(saveKey); } catch {}
+            devEvents.emit('form_submit', { page_id: currentPageId, form_state: formState });
+          }
+          window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+      }, [currentPageId, pages, catalog, cartItems, formState, history]);
+
       const onFieldChange = React.useCallback((id, value) => {
         setFormState(prev => ({ ...prev, [id]: value }));
-      }, []);
+        devEvents.emit('field_change', { field_id: id, value, page_id: currentPageId });
+        // Fire CatalogKit fieldchange
+        const ckListeners = window.__catalogKitListeners || {};
+        const fcSet = ckListeners['fieldchange']; if (fcSet?.size) for (const cb of fcSet) { try { cb({ fieldId: id, value, pageId: currentPageId }); } catch {} }
+
+        // Auto-advance: if page has auto_advance and this is a selection-type input
+        const pg = pages[currentPageId];
+        if (pg?.auto_advance && value != null && value !== '') {
+          const selectionTypes = ['multiple_choice', 'picture_choice', 'dropdown', 'checkboxes', 'multiselect'];
+          const comp = (pg.components || []).find(c => c.id === id);
+          if (comp && selectionTypes.includes(comp.type)) {
+            const newFormState = { ...formState, [id]: value };
+            const inputTypes = [...selectionTypes, 'short_text', 'long_text', 'rich_text', 'email', 'phone', 'url',
+              'address', 'number', 'currency', 'date', 'datetime', 'time', 'date_range', 'switch', 'checkbox',
+              'choice_matrix', 'ranking', 'star_rating', 'slider', 'opinion_scale', 'file_upload', 'signature',
+              'password', 'location'];
+            const visibleInputs = (pg.components || []).filter(c => {
+              if (!inputTypes.includes(c.type)) return false;
+              if (c.hidden || c.props?.hidden) return false;
+              if (c.visibility && !evaluateConditionGroup(c.visibility, newFormState, devContext)) return false;
+              return true;
+            });
+            const lastInput = visibleInputs[visibleInputs.length - 1];
+            if (lastInput && lastInput.id === id) {
+              if (autoAdvanceTimer.current) clearTimeout(autoAdvanceTimer.current);
+              autoAdvanceTimer.current = setTimeout(() => {
+                const nextId = getNextPage(routing, currentPageId, newFormState, devContext);
+                navigateTo(nextId);
+              }, 400);
+            }
+          }
+        }
+      }, [currentPageId, pages, formState, routing, navigateTo]);
+
+      // --- Validation ---
+      const runValidation = React.useCallback(() => {
+        const page = pages[currentPageId];
+        if (!page) return true;
+        const errors = validatePage(page, formState, devContext);
+        setValidationErrors(errors);
+        if (errors.length > 0) {
+          const el = document.querySelector('[data-component-id="' + errors[0].componentId + '"]');
+          if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+          return false;
+        }
+        return true;
+      }, [currentPageId, pages, formState]);
 
       const handleNext = React.useCallback(() => {
-        // Check if page has an offer \u2014 treat "Next" as an accept action
+        // Validate before advancing
+        if (!runValidation()) return;
+        // Check video watch requirements
         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);
+        if (currentPage) {
+          for (const comp of currentPage.components || []) {
+            if (comp.type === 'video' && comp.props?.require_watch_percent) {
+              const vs = window.__videoWatchState?.[comp.id];
+              if (!vs || vs.watch_percent < comp.props.require_watch_percent) {
+                const el = document.querySelector('[data-component-id="' + comp.id + '"]');
+                if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                alert('Please watch at least ' + comp.props.require_watch_percent + '% of the video before continuing.');
+                return;
+              }
+            }
           }
         }
-        const nextId = getNextPageId(currentPageId, routing, formState);
-        if (nextId && pages[nextId]) {
-          setHistory(prev => [...prev, currentPageId]);
-          setCurrentPageId(nextId);
-          window.scrollTo({ top: 0, behavior: 'smooth' });
+        // Check if page has an offer \u2014 treat "Next" as an accept action
+        if (currentPage?.offer) {
+          if (!currentPage.offer.accept_field) addToCart(currentPageId);
         }
-      }, [currentPageId, routing, formState, pages, addToCart]);
+        const nextId = getNextPage(routing, currentPageId, formState, devContext);
+        navigateTo(nextId);
+      }, [currentPageId, routing, formState, pages, addToCart, navigateTo, runValidation]);
+      const handleNextRef = React.useRef(handleNext);
+      handleNextRef.current = handleNext;
 
       const handleBack = React.useCallback(() => {
         if (history.length > 0) {
@@ -1630,6 +2698,174 @@ function buildPreviewHtml(schema, port) {
           window.scrollTo({ top: 0, behavior: 'smooth' });
         }
       }, [history]);
+      const handleBackRef = React.useRef(handleBack);
+      handleBackRef.current = handleBack;
+
+      // --- Page Actions ---
+      const handleAction = React.useCallback((action) => {
+        devEvents.emit('action_click', { page_id: currentPageId, action_id: action.id });
+        if (action.redirect_url) { window.open(action.redirect_url, '_blank'); return; }
+        if (!runValidation()) return;
+        const currentPage = pages[currentPageId];
+        const currentOffer = currentPage?.offer;
+        if (currentOffer) {
+          const acceptValue = currentOffer.accept_value || 'accept';
+          if (action.id === acceptValue) addToCart(currentPageId);
+        }
+        const actionKey = '__action_' + currentPageId;
+        const newFormState = { ...formState, [actionKey]: action.id };
+        setFormState(newFormState);
+        const nextPageId = getNextPage(routing, currentPageId, newFormState, devContext);
+        navigateTo(nextPageId);
+      }, [currentPageId, routing, formState, pages, addToCart, navigateTo, runValidation]);
+
+      // --- Resume prompt ---
+      if (showResumeModal) {
+        return h('div', { className: 'cf-resume-backdrop' },
+          h('div', { className: 'bg-white rounded-2xl max-w-sm w-full mx-4 p-8 shadow-2xl text-center' },
+            h('h2', { className: 'text-xl font-bold text-gray-900 mb-2', style: { fontFamily: 'var(--font-display)' } }, 'Welcome back!'),
+            h('p', { className: 'text-gray-500 mb-6 text-sm' }, 'Pick up where you left off?'),
+            h('div', { className: 'space-y-3' },
+              h('button', {
+                className: 'cf-btn-primary w-full text-white', style: { backgroundColor: themeColor },
+                onClick: () => {
+                  if (savedSession) {
+                    setFormState(savedSession.formState || {});
+                    setCurrentPageId(savedSession.currentPageId);
+                    setHistory(savedSession.history || []);
+                    window.history.replaceState({ pageId: savedSession.currentPageId, history: savedSession.history || [] }, '');
+                  }
+                  setShowResumeModal(false);
+                },
+              }, 'Resume'),
+              h('button', {
+                className: 'w-full px-4 py-2 text-sm text-gray-500 hover:text-gray-700 transition-colors',
+                onClick: () => { setShowResumeModal(false); try { localStorage.removeItem(saveKey); } catch {} },
+              }, 'Start Over')
+            )
+          )
+        );
+      }
+
+      // --- Completion screen ---
+      if (submitted) {
+        const completionSettings = catalog.settings?.completion;
+        return h('div', { className: 'min-h-screen flex items-center justify-center', style: { background: 'linear-gradient(180deg, #f8f9fc 0%, #f0f2f7 100%)' } },
+          h('div', { className: 'max-w-lg mx-auto text-center px-6 py-20 page-enter-active' },
+            h('div', { className: 'w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center', style: { backgroundColor: themeColor + '15' } },
+              h('svg', { className: 'w-10 h-10', style: { color: themeColor }, 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' })
+              )
+            ),
+            h('h1', { className: 'text-3xl font-bold text-gray-900 mb-3', style: { fontFamily: 'var(--font-display)' } },
+              completionSettings?.title || 'Thank You!'
+            ),
+            h('p', { className: 'text-gray-500 text-lg mb-8' },
+              completionSettings?.message || 'Your submission has been received.'
+            ),
+            completionSettings?.redirect_url ? h('a', {
+              href: completionSettings.redirect_url,
+              className: 'inline-flex items-center gap-2 px-6 py-3 rounded-xl text-white font-semibold transition-all hover:scale-[1.02]',
+              style: { backgroundColor: themeColor },
+            }, completionSettings.redirect_label || 'Continue') : null,
+            h('div', { className: 'mt-6' },
+              h('button', {
+                className: 'text-sm text-gray-400 hover:text-gray-600 transition-colors',
+                onClick: () => { setSubmitted(false); setCurrentPageId(routing.entry || pageKeys[0]); setHistory([]); setFormState({}); setCartItems([]); try { localStorage.removeItem(saveKey); } catch {} },
+              }, 'Start Over')
+            )
+          )
+        );
+      }
+
+      // --- Checkout screen ---
+      if (showCheckout) {
+        const checkoutSettings = catalog.settings?.checkout || {};
+        const handleCheckoutBack = () => { setShowCheckout(false); };
+        const handleCheckoutContinue = () => {
+          setShowCheckout(false);
+          setSubmitted(true);
+          devEvents.emit('checkout_skip', { page_id: currentPageId });
+        };
+
+        return h('div', { className: 'min-h-screen', style: { background: 'linear-gradient(180deg, #f8f9fc 0%, #f0f2f7 100%)', fontFamily: 'var(--font-display)' } },
+          // Header
+          h('div', { className: 'fixed top-[28px] left-0 right-0 z-50 bg-white/80 backdrop-blur-xl border-b border-gray-200/60' },
+            h('div', { className: 'max-w-5xl mx-auto flex items-center justify-between px-6 py-3' },
+              h('button', { onClick: handleCheckoutBack, className: 'flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-800 transition-colors' },
+                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: 'M15.75 19.5L8.25 12l7.5-7.5' })
+                ),
+                'Back'
+              ),
+              h('div', { className: 'flex items-center gap-2' },
+                h('svg', { className: 'w-4 h-4 text-green-500', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
+                  h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z' })
+                ),
+                h('span', { className: 'text-xs font-medium text-gray-400' }, 'Secure Checkout')
+              )
+            )
+          ),
+          h('div', { className: 'max-w-5xl mx-auto px-6 pt-24 pb-12' },
+            h('div', { className: 'text-center mb-10' },
+              h('h1', { className: 'text-3xl sm:text-4xl font-bold text-gray-900', style: { letterSpacing: '-0.025em' } },
+                checkoutSettings.title || 'Complete Your Order'
+              )
+            ),
+            h('div', { className: 'grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start' },
+              // Order summary
+              h('div', { className: 'lg:col-span-7' },
+                h('div', { className: 'bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden' },
+                  h('div', { className: 'px-6 py-4 border-b border-gray-50' },
+                    h('h2', { className: 'text-sm font-bold text-gray-900 uppercase tracking-wide' }, 'Order Summary')
+                  ),
+                  h('div', { className: 'divide-y divide-gray-50' },
+                    cartItems.length === 0
+                      ? h('div', { className: 'flex items-center gap-5 px-6 py-5' },
+                          h('div', { className: 'flex-1 min-w-0' },
+                            h('h3', { className: 'text-base font-semibold text-gray-900' }, 'Complete Registration'),
+                            h('p', { className: 'text-sm text-gray-400 mt-0.5' }, 'No offers selected \u2014 continue for free')
+                          ),
+                          h('p', { className: 'text-base font-bold', style: { color: themeColor } }, '$0')
+                        )
+                      : cartItems.map(item => h('div', { key: item.offer_id, className: 'flex items-center gap-5 px-6 py-5' },
+                          item.image ? h('img', { src: item.image, alt: item.title, className: 'w-16 h-16 rounded-xl object-cover flex-shrink-0 border border-gray-100' }) : null,
+                          h('div', { className: 'flex-1 min-w-0' },
+                            h('h3', { className: 'text-base font-semibold text-gray-900' }, item.title),
+                            item.price_subtext ? h('p', { className: 'text-sm text-gray-400 mt-0.5' }, item.price_subtext) : null
+                          ),
+                          item.price_display ? h('p', { className: 'text-base font-bold', style: { color: themeColor } }, item.price_display) : null,
+                          h('button', { onClick: () => removeFromCart(item.offer_id), className: 'w-8 h-8 flex-shrink-0 flex items-center justify-center rounded-lg text-gray-400 hover:text-red-500 hover:bg-red-50 transition-all' },
+                            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: 'M6 18L18 6M6 6l12 12' })
+                            )
+                          )
+                        ))
+                  )
+                )
+              ),
+              // Payment action
+              h('div', { className: 'lg:col-span-5' },
+                h('div', { className: 'lg:sticky lg:top-20 space-y-5' },
+                  h('div', { className: 'bg-white rounded-2xl border border-gray-100 shadow-sm p-7 space-y-6' },
+                    h('div', { className: 'text-sm text-gray-500' },
+                      cartItems.length + ' ' + (cartItems.length === 1 ? 'item' : 'items')
+                    ),
+                    h(CartCheckoutButton, { items: cartItems, themeColor }),
+                    h('button', {
+                      onClick: handleCheckoutContinue,
+                      className: 'w-full text-center text-sm text-gray-400 hover:text-gray-600 font-medium transition-colors py-1',
+                    }, 'Continue without paying'),
+                    h('div', { className: 'flex items-center justify-center gap-3 pt-1' },
+                      h('span', { className: 'text-[10px] text-gray-400 font-medium' }, 'Powered by Stripe')
+                    )
+                  )
+                )
+              )
+            )
+          )
+        );
+      }
 
       if (!page) {
         return h('div', { className: 'min-h-screen flex items-center justify-center bg-gray-50' },
@@ -1637,12 +2873,18 @@ 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) { if (!evaluateConditionGroup(c.visibility, formState, devContext)) return false; }
+        if (c.prefill_mode === 'hidden' && formState[c.id] != null && formState[c.id] !== '') return false;
+        return true;
+      });
       const bgImage = page.background_image || catalog.settings?.theme?.background_image;
 
       // Cart UI (shared between cover and standard)
+      const cartSettings = catalog.settings?.cart || {};
       const cartUI = h(React.Fragment, null,
-        h(CartButton, { itemCount: cartItems.length, onClick: toggleCart }),
+        !cartSettings.hide_button ? h(CartButton, { itemCount: cartItems.length, onClick: toggleCart }) : null,
         h(CartDrawer, { items: cartItems, isOpen: cartOpen, onToggle: toggleCart, onRemove: removeFromCart })
       );
 
@@ -1660,17 +2902,31 @@ function buildPreviewHtml(schema, port) {
             h('div', { className: 'cf-cover-overlay absolute inset-0' }),
             h('div', { className: 'cf-cover-content relative max-w-2xl mx-auto px-6 py-20 text-center text-white' },
               h('div', { className: 'page-enter-active space-y-7 flex flex-col items-stretch text-center' },
-                ...components.map((comp, i) => h('div', { key: comp.id || i, 'data-component-id': comp.id, 'data-component-type': comp.type },
-                  h(RenderComponent, { comp, isCover: true, formState, onFieldChange })
-                )),
-                // CTA button
-                h('div', { className: 'mt-8' },
-                  h('button', {
-                    className: 'cf-btn-primary w-full py-4 text-lg',
-                    style: { backgroundColor: themeColor },
-                    onClick: handleNext,
-                  }, page.submit_label || (isLastPage ? 'Submit' : 'Get Started'))
-                )
+                ...components.map((comp, i) => {
+                  if (comp.prefill_mode === 'readonly' && formState[comp.id] != null && formState[comp.id] !== '') {
+                    return h('div', { key: comp.id || i, 'data-component-id': comp.id, 'data-component-type': comp.type, className: 'space-y-1' },
+                      comp.props?.label ? h('label', { className: 'block text-base font-medium text-white/80' }, comp.props.label) : null,
+                      h('div', { className: 'px-4 py-3 bg-white/10 rounded-xl text-white text-sm font-medium border border-white/20' }, String(formState[comp.id]))
+                    );
+                  }
+                  const fieldError = validationErrors.find(e => e.componentId === comp.id);
+                  return h('div', { key: comp.id || i, 'data-component-id': comp.id, 'data-component-type': comp.type, className: fieldError ? 'cf-field-error' : '' },
+                    h(RenderComponent, { comp, isCover: true, formState, onFieldChange }),
+                    fieldError ? h('p', { className: 'text-xs text-red-300 font-medium mt-1', role: 'alert' }, fieldError.message) : null
+                  );
+                }),
+                // Actions or CTA button
+                page.actions?.length > 0
+                  ? h('div', { className: 'mt-8 space-y-3' },
+                      ...page.actions.map(action => h(ActionButton, { key: action.id, action, themeColor, onAction: handleAction }))
+                    )
+                  : h('div', { className: 'mt-8' },
+                      h('button', {
+                        className: 'cf-btn-primary w-full py-4 text-lg',
+                        style: { backgroundColor: themeColor },
+                        onClick: handleNext,
+                      }, page.submit_label || (isLastPage ? 'Submit' : 'Get Started'))
+                    )
               )
             )
           )
@@ -1708,26 +2964,49 @@ function buildPreviewHtml(schema, port) {
           h('div', { className: 'max-w-2xl mx-auto px-6 pb-8', style: { paddingTop: topBarEnabled ? '100px' : '60px' } },
             page.description ? h('p', { className: 'text-sm text-gray-400 mb-8 text-center font-medium tracking-wide', style: { fontFamily: 'var(--font-display)' } }, page.description) : null,
             h('div', { className: 'page-enter-active space-y-5' },
-              ...components.map((comp, i) => h('div', { key: comp.id || i, 'data-component-id': comp.id, 'data-component-type': comp.type },
-                h(RenderComponent, { comp, isCover: false, formState, onFieldChange })
-              )),
-              // Navigation button
-              !page.hide_navigation ? h('div', { className: 'mt-8' },
-                h('button', {
-                  className: 'cf-btn-primary inline-flex items-center gap-2 text-base',
-                  style: { backgroundColor: themeColor },
-                  onClick: handleNext,
-                },
-                  page.submit_label || (isLastPage ? 'Submit' : 'Continue'),
-                  !isLastPage ? h('svg', { className: 'w-4 h-4', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2.5 },
-                    h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3' })
-                  ) : null
-                ),
-                page.submit_reassurance ? h('p', { className: 'text-xs text-gray-400 mt-1.5' }, page.submit_reassurance) : null,
-              ) : null,
+              ...components.map((comp, i) => {
+                if (comp.prefill_mode === 'readonly' && formState[comp.id] != null && formState[comp.id] !== '') {
+                  return h('div', { key: comp.id || i, 'data-component-id': comp.id, 'data-component-type': comp.type, className: 'space-y-1' },
+                    comp.props?.label ? h('label', { className: 'block text-base font-medium text-gray-700' }, comp.props.label) : null,
+                    h('div', { className: 'px-4 py-3 bg-gray-50 rounded-xl text-gray-600 text-sm font-medium border border-gray-100' }, String(formState[comp.id]))
+                  );
+                }
+                const fieldError = validationErrors.find(e => e.componentId === comp.id);
+                return h('div', { key: comp.id || i, 'data-component-id': comp.id, 'data-component-type': comp.type, className: fieldError ? 'cf-field-error' : '' },
+                  h(RenderComponent, { comp, isCover: false, formState, onFieldChange }),
+                  fieldError ? h('p', { className: 'text-xs text-red-500 font-medium mt-1', role: 'alert' }, fieldError.message) : null
+                );
+              }),
+              // Actions or navigation button
+              page.actions?.length > 0
+                ? h('div', { className: 'mt-8 space-y-3' },
+                    ...page.actions.map(action => h(ActionButton, { key: action.id, action, themeColor, onAction: handleAction }))
+                  )
+                : !page.hide_navigation ? h('div', { className: 'mt-8' },
+                    h('button', {
+                      className: 'cf-btn-primary inline-flex items-center gap-2 text-base',
+                      style: { backgroundColor: themeColor },
+                      onClick: handleNext,
+                    },
+                      page.submit_label || (isLastPage ? 'Submit' : 'Continue'),
+                      !isLastPage ? h('svg', { className: 'w-4 h-4', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2.5 },
+                        h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3' })
+                      ) : null
+                    ),
+                    page.submit_reassurance ? h('p', { className: 'text-xs text-gray-400 mt-1.5' }, page.submit_reassurance) : null,
+                  ) : null,
             ),
             h('div', { className: 'mt-10 text-center text-[11px] text-gray-300 font-medium tracking-wide', style: { fontFamily: 'var(--font-display)' } }, 'Powered by Catalog Kit'),
-          )
+          ),
+          // Sticky bottom bar
+          (catalog.settings?.sticky_bar?.enabled || page.sticky_bar?.enabled)
+            ? h(StickyBottomBar, {
+                config: { ...(catalog.settings?.sticky_bar || {}), ...(page.sticky_bar || {}) },
+                page, formState, cartItems, themeColor,
+                onNext: handleNext, onAction: handleAction, onBack: handleBack,
+                historyLen: history.length,
+              })
+            : null
         )
       );
     }
@@ -1776,17 +3055,113 @@ function buildPreviewHtml(schema, port) {
       const overlay = document.getElementById('pages-overlay');
       const closeBtn = document.getElementById('pages-close');
       const container = document.getElementById('mindmap-container');
+      const zoomInBtn = document.getElementById('zoom-in');
+      const zoomOutBtn = document.getElementById('zoom-out');
+      const zoomFitBtn = document.getElementById('zoom-fit');
+      const zoomLevelEl = document.getElementById('zoom-level');
       let currentPageRef = { id: schema.routing?.entry || Object.keys(schema.pages || {})[0] };
 
+      // Pan & zoom state
+      let scale = 1, panX = 0, panY = 0;
+      let isDragging = false, dragStartX = 0, dragStartY = 0, dragStartPanX = 0, dragStartPanY = 0;
+      let hasDragged = false;
+      const MIN_SCALE = 0.15, MAX_SCALE = 3;
+
+      function applyTransform() {
+        container.style.transform = 'translate(' + panX + 'px, ' + panY + 'px) scale(' + scale + ')';
+        zoomLevelEl.textContent = Math.round(scale * 100) + '%';
+      }
+
+      function fitToView() {
+        const overlayRect = overlay.getBoundingClientRect();
+        // Temporarily reset transform to measure natural size
+        container.style.transform = 'none';
+        requestAnimationFrame(() => {
+          const contentRect = container.getBoundingClientRect();
+          const padW = 80, padH = 80;
+          const scaleX = (overlayRect.width - padW) / contentRect.width;
+          const scaleY = (overlayRect.height - padH) / contentRect.height;
+          scale = Math.min(scaleX, scaleY, 1.5);
+          scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale));
+          panX = (overlayRect.width - contentRect.width * scale) / 2;
+          panY = (overlayRect.height - contentRect.height * scale) / 2;
+          applyTransform();
+        });
+      }
+
       // Expose setter for CatalogPreview to update current page
       window.__devSetCurrentPage = (id) => { currentPageRef.id = id; };
 
       btn.addEventListener('click', () => {
         overlay.classList.add('open');
         renderMindmap();
+        requestAnimationFrame(() => fitToView());
       });
       closeBtn.addEventListener('click', () => overlay.classList.remove('open'));
-      overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.remove('open'); });
+      document.addEventListener('keydown', (e) => { if (e.key === 'Escape') overlay.classList.remove('open'); });
+
+      // Wheel zoom
+      overlay.addEventListener('wheel', (e) => {
+        e.preventDefault();
+        const rect = overlay.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        const delta = e.deltaY > 0 ? 0.9 : 1.1;
+        const newScale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale * delta));
+        // Zoom toward cursor
+        panX = mouseX - (mouseX - panX) * (newScale / scale);
+        panY = mouseY - (mouseY - panY) * (newScale / scale);
+        scale = newScale;
+        applyTransform();
+      }, { passive: false });
+
+      // Pan via drag
+      overlay.addEventListener('mousedown', (e) => {
+        if (e.target.closest('.close-btn, .zoom-controls')) return;
+        isDragging = true;
+        hasDragged = false;
+        dragStartX = e.clientX;
+        dragStartY = e.clientY;
+        dragStartPanX = panX;
+        dragStartPanY = panY;
+        overlay.classList.add('grabbing');
+      });
+      window.addEventListener('mousemove', (e) => {
+        if (!isDragging) return;
+        const dx = e.clientX - dragStartX;
+        const dy = e.clientY - dragStartY;
+        if (Math.abs(dx) > 3 || Math.abs(dy) > 3) hasDragged = true;
+        panX = dragStartPanX + dx;
+        panY = dragStartPanY + dy;
+        applyTransform();
+      });
+      window.addEventListener('mouseup', () => {
+        isDragging = false;
+        overlay.classList.remove('grabbing');
+      });
+
+      // Close only via close button (not background click \u2014 allows free panning)
+
+      // Zoom buttons
+      zoomInBtn.addEventListener('click', () => {
+        const rect = overlay.getBoundingClientRect();
+        const cx = rect.width / 2, cy = rect.height / 2;
+        const newScale = Math.min(MAX_SCALE, scale * 1.25);
+        panX = cx - (cx - panX) * (newScale / scale);
+        panY = cy - (cy - panY) * (newScale / scale);
+        scale = newScale;
+        applyTransform();
+      });
+      zoomOutBtn.addEventListener('click', () => {
+        const rect = overlay.getBoundingClientRect();
+        const cx = rect.width / 2, cy = rect.height / 2;
+        const newScale = Math.max(MIN_SCALE, scale * 0.8);
+        panX = cx - (cx - panX) * (newScale / scale);
+        panY = cy - (cy - panY) * (newScale / scale);
+        scale = newScale;
+        applyTransform();
+      });
+      zoomFitBtn.addEventListener('click', () => fitToView());
 
       function renderMindmap() {
         const pages = schema.pages || {};
@@ -1895,9 +3270,11 @@ function buildPreviewHtml(schema, port) {
           container.insertBefore(svgEl, container.firstChild);
         });
 
-        // Click nodes to navigate
+        // Click nodes to navigate (ignore if user just dragged)
         container.querySelectorAll('[data-node-id]').forEach(el => {
-          el.addEventListener('click', () => {
+          el.addEventListener('click', (e) => {
+            if (hasDragged) return;
+            e.stopPropagation();
             const id = el.dataset.nodeId;
             window.__devNavigateTo && window.__devNavigateTo(id);
             overlay.classList.remove('open');
@@ -1987,18 +3364,167 @@ function buildPreviewHtml(schema, port) {
         });
       }, true);
     })();
+
+    // --- Validation in topbar ---
+    (function initValidationTag() {
+      const tag = document.getElementById('validation-tag');
+      const validation = JSON.parse(document.getElementById('__validation_data').textContent);
+      const errors = validation.errors || [];
+      const warnings = validation.warnings || [];
+      const total = errors.length + warnings.length;
+      const cleanClass = total === 0 ? ' clean' : '';
+      const label = total === 0 ? '\u2713 Valid' : errors.length + ' error' + (errors.length !== 1 ? 's' : '') + ', ' + warnings.length + ' warn';
+      let html = '<button class="vt-btn' + cleanClass + '" id="vt-toggle">' + label + '</button>';
+      if (total > 0) {
+        html += '<div class="vt-dropdown" id="vt-dropdown">';
+        html += '<div class="vt-header"><span>' + errors.length + ' error(s), ' + warnings.length + ' warning(s)</span></div>';
+        html += '<div class="vt-body">';
+        for (const e of errors) html += '<div class="vt-error">ERROR: ' + e + '</div>';
+        for (const w of warnings) html += '<div class="vt-warn">WARN: ' + w + '</div>';
+        html += '</div></div>';
+      }
+      tag.innerHTML = html;
+      if (total > 0) {
+        const toggleBtn = document.getElementById('vt-toggle');
+        const dropdown = document.getElementById('vt-dropdown');
+        toggleBtn.addEventListener('click', (e) => { e.stopPropagation(); dropdown.classList.toggle('open'); });
+        document.addEventListener('click', (e) => { if (!tag.contains(e.target)) dropdown.classList.remove('open'); });
+      }
+    })();
+
+    // --- Banner minimize / restore ---
+    (function initBannerMinimize() {
+      const banner = document.getElementById('dev-banner');
+      const minimizeBtn = document.getElementById('banner-minimize');
+      const restoreBtn = document.getElementById('banner-restore');
+      minimizeBtn.addEventListener('click', () => {
+        banner.classList.add('minimized');
+        restoreBtn.classList.add('visible');
+      });
+      restoreBtn.addEventListener('click', () => {
+        banner.classList.remove('minimized');
+        restoreBtn.classList.remove('visible');
+      });
+    })();
+
+    // --- Banner drag to reposition ---
+    (function initBannerDrag() {
+      const banner = document.getElementById('dev-banner');
+      const handle = document.getElementById('banner-drag');
+      let isDragging = false, startX = 0, startY = 0, origLeft = 0, origTop = 0;
+
+      handle.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        isDragging = true;
+        const rect = banner.getBoundingClientRect();
+        startX = e.clientX; startY = e.clientY;
+        origLeft = rect.left; origTop = rect.top;
+        // Switch to positioned mode
+        banner.style.left = rect.left + 'px';
+        banner.style.top = rect.top + 'px';
+        banner.style.right = 'auto';
+        banner.style.width = rect.width + 'px';
+        handle.style.cursor = 'grabbing';
+      });
+      window.addEventListener('mousemove', (e) => {
+        if (!isDragging) return;
+        const dx = e.clientX - startX, dy = e.clientY - startY;
+        banner.style.left = (origLeft + dx) + 'px';
+        banner.style.top = (origTop + dy) + 'px';
+      });
+      window.addEventListener('mouseup', () => {
+        if (!isDragging) return;
+        isDragging = false;
+        handle.style.cursor = '';
+      });
+    })();
+
+    // --- 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 {
@@ -2007,14 +3533,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}`);
@@ -2022,6 +3549,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 {
@@ -2031,6 +3560,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") {
@@ -2045,11 +3590,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;
@@ -2077,11 +3738,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...
 `);
   });
@@ -2098,6 +3761,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();
@@ -2108,7 +3772,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 {
   }
@@ -2119,6 +3783,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();
@@ -2177,7 +4274,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();
@@ -2192,5 +4289,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();