@officexapp/catalogs-cli 0.4.7 → 0.4.9

package/dist/index.js

@@ -321,6 +321,27 @@ function deepValidateCatalog(schema) {
   const routing = schema.routing || {};
   const edges = routing.edges || [];
   const entry = routing.entry;
+  const RESERVED_PAGE_IDS = /* @__PURE__ */ new Set([
+    "checkout",
+    "__checkout",
+    "__global",
+    "submitted",
+    "__submitted"
+  ]);
+  for (const pageId of pageIds) {
+    if (RESERVED_PAGE_IDS.has(pageId)) {
+      errors.push(
+        `page "${pageId}" uses a reserved ID. CatalogKit reserves this name for its built-in ${pageId.replace(/^_+/, "")} system. Please rename it (e.g. "${pageId}-review", "order-${pageId}")`
+      );
+    }
+    if (pageId.startsWith("__")) {
+      if (!RESERVED_PAGE_IDS.has(pageId)) {
+        warnings.push(
+          `page "${pageId}" uses a double-underscore prefix which is reserved for internal CatalogKit components`
+        );
+      }
+    }
+  }
   const KNOWN_TYPES = /* @__PURE__ */ new Set([
     // Display / layout
     "heading",
@@ -805,13 +826,6 @@ import { resolve as resolve4, dirname as dirname2, extname as extname3, join as
 import { existsSync as existsSync2, readFileSync as readFileSync4, statSync as statSync3, watch } from "fs";
 import { createServer } from "http";
 import ora5 from "ora";
-
-// 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",
@@ -845,7 +859,22 @@ function getMime(filepath) {
 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();
+  const stripeEnabled = devConfig?.stripeEnabled ?? false;
+  let validationHtml = "";
+  if (validation && (validation.errors.length > 0 || validation.warnings.length > 0)) {
+    const items = [
+      ...validation.errors.map((e) => `<div style="color:#ef4444;margin:4px 0">&#10007; ${e}</div>`),
+      ...validation.warnings.map((w) => `<div style="color:#f59e0b;margin:4px 0">&#9888; ${w}</div>`)
+    ].join("");
+    validationHtml = `
+    <div id="__dev_validation" style="position:fixed;bottom:16px;left:16px;right:16px;z-index:9999;max-width:600px;margin:0 auto;background:#1e1b4b;color:#e0e7ff;border-radius:16px;padding:16px 20px;font-family:system-ui,sans-serif;font-size:13px;box-shadow:0 8px 32px rgba(0,0,0,0.3);max-height:40vh;overflow-y:auto">
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
+        <strong style="font-size:14px">Schema Validation</strong>
+        <button onclick="this.parentElement.parentElement.remove()" style="background:none;border:none;color:#818cf8;cursor:pointer;font-size:18px">&times;</button>
+      </div>
+      ${items}
+    </div>`;
+  }
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -855,2811 +884,129 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="/__renderer/index.css" />
   <script src="https://cdn.tailwindcss.com"></script>
-  <style>
-    /* \u2500\u2500 Production CSS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-    :root {
-      --font-display: 'Outfit', system-ui, sans-serif;
-      --font-body: 'DM Sans', system-ui, sans-serif;
-      --font-size-body: 1.125rem;
-      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
-      --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
-      --theme-color: ${themeColor};
-      --theme-color-ring: ${themeColor}26;
-    }
-    *, *::before, *::after { box-sizing: border-box; }
-    body {
-      margin: 0;
-      font-family: var(--font-body);
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      color: #1a1a2e;
+  <script type="importmap">
+  {
+    "imports": {
+      "react": "https://esm.sh/react@18.3.1",
+      "react-dom": "https://esm.sh/react-dom@18.3.1",
+      "react-dom/client": "https://esm.sh/react-dom@18.3.1/client",
+      "react/jsx-runtime": "https://esm.sh/react@18.3.1/jsx-runtime",
+      "hls.js": "https://esm.sh/hls.js@1.5.17"
     }
-    h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
-
-    /* Page transitions */
-    .page-enter-active { animation: pageReveal 0.35s var(--ease-out-expo) both; }
-    @keyframes pageReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
-    .page-enter-active > * { animation: staggerIn 0.3s var(--ease-out-expo) both; }
-    .page-enter-active > *:nth-child(1) { animation-delay: 0.02s; }
-    .page-enter-active > *:nth-child(2) { animation-delay: 0.05s; }
-    .page-enter-active > *:nth-child(3) { animation-delay: 0.08s; }
-    .page-enter-active > *:nth-child(4) { animation-delay: 0.11s; }
-    .page-enter-active > *:nth-child(5) { animation-delay: 0.14s; }
-    .page-enter-active > *:nth-child(6) { animation-delay: 0.17s; }
-    .page-enter-active > *:nth-child(7) { animation-delay: 0.2s; }
-    .page-enter-active > *:nth-child(8) { animation-delay: 0.23s; }
-    @keyframes staggerIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
-
-    /* Cover page */
-    .cf-cover-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.6) 100%); }
-    .cf-cover-content { animation: coverFloat 0.8s var(--ease-out-expo) both; }
-    @keyframes coverFloat { from { opacity: 0; transform: translateY(30px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
-
-    /* Top bar */
-    .cf-topbar { background: rgba(255,255,255,0.92); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); }
-
-    /* Card */
-    .cf-card { background: white; border-radius: 20px; box-shadow: 0 0 0 1px rgba(0,0,0,0.03), 0 2px 4px rgba(0,0,0,0.02), 0 12px 40px rgba(0,0,0,0.06); }
-
-    /* Inputs */
-    .cf-input {
-      font-family: var(--font-body); border-radius: 12px; border: 1.5px solid #e2e4e9;
-      background: #fafbfc; padding: 12px 16px; font-size: var(--font-size-body);
-      color: #1a1a2e; outline: none; transition: all 0.2s var(--ease-out-expo); width: 100%;
-    }
-    .cf-input::placeholder { color: #a0a3b1; }
-    .cf-input:hover { border-color: #c8cbd4; background: #fff; }
-    .cf-input:focus { background: #fff; border-color: var(--theme-color); box-shadow: 0 0 0 3px var(--theme-color-ring); }
-
-    /* Buttons */
-    .cf-btn-primary {
-      font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
-      border-radius: 14px; padding: 14px 28px; font-size: 16px; color: white; border: none;
-      cursor: pointer; transition: all 0.25s var(--ease-out-expo);
-      box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
-      position: relative; overflow: hidden;
-    }
-    .cf-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.1); }
-    .cf-btn-primary:active { transform: translateY(0) scale(0.98); }
-
-    /* Choice buttons */
-    .cf-choice {
-      border-radius: 14px; border: 1.5px solid #e2e4e9; background: #fafbfc;
-      transition: all 0.2s var(--ease-out-expo); cursor: pointer; width: 100%;
-      text-align: left; padding: 14px 18px; font-size: 1rem; color: #1a1a2e;
-      font-family: var(--font-body);
-    }
-    .cf-choice:hover { border-color: #c8cbd4; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
-    .cf-choice[data-selected="true"] { border-color: var(--theme-color); background: #fff; box-shadow: 0 0 0 3px var(--theme-color-ring), 0 2px 12px rgba(0,0,0,0.06); }
-
-    /* Banner glass */
-    .cf-banner-glass { background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18); }
-
-    /* Images */
-    .ck-img { width: 100%; height: auto; object-fit: cover; display: block; }
-
-    /* Text balance */
-    .cf-text-balance { text-wrap: balance; }
-
-    /* Progress bar */
-    .progress-bar-fill { transition: width 0.6s var(--ease-out-expo); }
-
-    /* Noise texture */
-    .cf-noise::before {
-      content: ''; position: absolute; inset: 0; opacity: 0.03; pointer-events: none;
-      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
-      background-size: 256px 256px;
-    }
-
+  }
+  </script>
+  <style>
     /* Dev banner */
-    .dev-banner {
-      position: fixed; top: 0; left: 0; right: 0; z-index: 99999;
-      background: #1a1a2e; color: #e0e0ff; font-size: 12px;
-      padding: 4px 12px; display: flex; align-items: center; gap: 8px;
-      font-family: monospace; border-bottom: 2px solid #6c63ff;
-      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; 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;
-      font-family: var(--font-display); overflow: hidden; cursor: grab;
-    }
-    .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); }
-    .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 {
-      background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.15);
-      border-radius: 14px; padding: 14px 20px; min-width: 140px; text-align: center;
-      cursor: pointer; transition: all 0.2s ease; position: relative;
-    }
-    .mindmap-node:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); transform: translateY(-2px); }
-    .mindmap-node.entry { border-color: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,0.15); }
-    .mindmap-node.current { border-color: var(--theme-color); box-shadow: 0 0 0 3px rgba(99,102,241,0.25); }
-    .mindmap-node .node-title { color: white; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
-    .mindmap-node .node-id { color: rgba(255,255,255,0.35); font-size: 10px; font-family: monospace; }
-    .mindmap-node .node-badge {
-      position: absolute; top: -8px; right: -8px; background: #4ade80; color: #0a2010;
-      font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 6px; text-transform: uppercase;
-    }
-    .mindmap-node .node-components { color: rgba(255,255,255,0.3); font-size: 10px; margin-top: 4px; }
-    .mindmap-edge-label {
-      position: absolute; background: rgba(251,191,36,0.15); color: #fbbf24;
-      font-size: 9px; padding: 1px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none;
-    }
-    .dev-banner .stub-tag.clickable { cursor: pointer; transition: all 0.15s ease; }
-    .dev-banner .stub-tag.clickable:hover { background: rgba(255,255,255,0.2); color: #a5b4fc; }
-
-    /* Element inspector (local dev) */
-    .inspector-highlight {
-      position: fixed; z-index: 99997; pointer-events: none; border: 2px solid #6366f1;
-      background: rgba(99,102,241,0.06); border-radius: 8px; transition: all 80ms ease-out;
-    }
-    .inspector-tooltip {
-      position: fixed; z-index: 99998; pointer-events: none; background: #1e1b4b;
-      color: #e0e7ff; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 11px;
-      padding: 6px 10px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
-      max-width: 360px;
-    }
-    .inspector-tooltip .ref { font-weight: 700; color: #a5b4fc; }
-    .inspector-tooltip .type { color: rgba(165,180,252,0.5); margin-left: 6px; }
-    .inspector-tooltip .hint { color: rgba(165,180,252,0.3); font-size: 9px; margin-top: 3px; }
-    .inspector-active-banner {
-      position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 99998;
-      background: rgba(99,102,241,0.92); color: white; font-size: 11px; font-weight: 600;
-      padding: 6px 14px; border-radius: 10px; font-family: system-ui; pointer-events: none;
-      box-shadow: 0 4px 16px rgba(0,0,0,0.3);
-    }
-
-    /* Checkout stub */
-    .checkout-stub {
-      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
-      border: 2px dashed #f59e0b; border-radius: 16px;
-      padding: 24px; text-align: center;
-    }
-    .checkout-stub h3 { margin: 0 0 8px; color: #92400e; font-family: var(--font-display); font-weight: 700; }
-    .checkout-stub p { margin: 0; color: #a16207; font-size: 14px; }
-
-    /* Pricing card */
-    .pricing-card {
-      border-radius: 20px; border: 1.5px solid #e2e4e9; background: white;
-      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 {
+    #__dev_banner {
+      position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
+      background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
+      color: #c7d2fe; font-family: system-ui, sans-serif;
+      font-size: 12px; padding: 6px 16px;
       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;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
     }
+    #__dev_banner a { color: #a5b4fc; text-decoration: none; }
+    #__dev_banner a:hover { text-decoration: underline; }
+    body { padding-top: 32px; }
   </style>
 </head>
 <body>
-  <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" 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>
+  <!-- Dev Banner -->
+  <div id="__dev_banner">
+    <span><strong style="color:#e0e7ff">${schema.slug || "catalog"}</strong> &mdash; local preview</span>
+    <span>
+      ${stripeEnabled ? '<span style="color:#4ade80">&#9679;</span> Stripe' : '<span style="color:#fbbf24">&#9675;</span> Stripe stubbed'}
+      &nbsp;&middot;&nbsp;
+      <a href="/__dev_events" target="_blank">Events</a>
     </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';
-    import ReactDOM from 'https://esm.sh/react-dom@18/client';
-
-    const h = React.createElement;
-    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
-        .replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>')
-        .replace(/\\*(.+?)\\*/g, '<em>$1</em>')
-        .replace(/~~(.+?)~~/g, '<del class="opacity-60">$1</del>')
-        .replace(/\\[([^\\]]+)\\]\\(([^)]+)\\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer" class="underline decoration-1 underline-offset-2 hover:opacity-80 transition-opacity">$1</a>');
-    }
-
-    function renderMarkdownish(text) {
-      const lines = text.split(/\\n/);
-      let html = '', inUl = false, inOl = false;
-      for (const line of lines) {
-        const trimmed = line.trim();
-        const bullet = trimmed.match(/^[-\u2022]\\s+(.*)/);
-        const ordered = trimmed.match(/^\\d+\\.\\s+(.*)/);
-        if (bullet) {
-          if (inOl) { html += '</ol>'; inOl = false; }
-          if (!inUl) { html += '<ul class="list-disc pl-5 my-3 space-y-1.5">'; inUl = true; }
-          html += '<li>' + inlineMarkdown(bullet[1]) + '</li>';
-        } else if (ordered) {
-          if (inUl) { html += '</ul>'; inUl = false; }
-          if (!inOl) { html += '<ol class="list-decimal pl-5 my-3 space-y-1.5">'; inOl = true; }
-          html += '<li>' + inlineMarkdown(ordered[1]) + '</li>';
-        } else {
-          if (inUl) { html += '</ul>'; inUl = false; }
-          if (inOl) { html += '</ol>'; inOl = false; }
-          if (trimmed === '') html += '<br/>';
-          else { if (html.length > 0 && !html.endsWith('>')) html += '<br/>'; html += inlineMarkdown(trimmed); }
-        }
-      }
-      if (inUl) html += '</ul>';
-      if (inOl) html += '</ol>';
-      return html;
-    }
-
-    function alignClass(align) {
-      if (align === 'center') return 'text-center';
-      if (align === 'right') return 'text-right';
-      return 'text-left';
-    }
-
-    // --- 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];
-      }
-      return resolved;
-    }
-
-    // --- Component Renderers ---
-    function RenderComponent({ comp, isCover, formState, onFieldChange, onSubmit, propOverrides }) {
-      const props = { ...(comp.props || {}), ...(propOverrides?.[comp.id] || {}) };
-      const type = comp.type;
-      const compClass = comp.className || '';
-      const compStyle = comp.style || {};
-
-      switch (type) {
-        case 'heading': {
-          const level = props.level ?? 1;
-          const tag = 'h' + Math.min(Math.max(level, 1), 6);
-          const sizes = {
-            1: 'text-4xl sm:text-5xl font-extrabold tracking-tight leading-[1.1]',
-            2: 'text-3xl sm:text-4xl font-bold tracking-tight leading-[1.15]',
-            3: 'text-2xl sm:text-3xl font-bold leading-tight',
-            4: 'text-xl sm:text-2xl font-semibold leading-snug',
-            5: 'text-lg sm:text-xl font-semibold',
-            6: 'text-base sm:text-lg font-medium',
-          };
-          return h('div', { className: alignClass(props.align) + ' space-y-3 ' + compClass, style: compStyle },
-            props.micro_heading ? h('p', { className: 'text-xs sm:text-sm font-medium uppercase tracking-widest ' + (isCover ? 'text-white/60' : 'text-gray-400') }, props.micro_heading) : null,
-            h(tag, {
-              className: (sizes[level] || sizes[1]) + ' ' + (isCover ? 'text-white drop-shadow-lg' : 'text-gray-900') + ' cf-text-balance',
-              style: level <= 2 ? { letterSpacing: '-0.025em' } : undefined,
-            }, props.text ?? props.content),
-            props.subtitle ? h('p', { className: 'text-base sm:text-lg font-normal leading-relaxed ' + (isCover ? 'text-white/75' : 'text-gray-500') }, props.subtitle) : null
-          );
-        }
-
-        case 'paragraph':
-          return h('div', {
-            className: alignClass(props.align) + ' ' + (isCover ? 'text-white/85' : 'text-gray-600') + ' text-lg leading-[1.7] [&_ul]:text-left [&_ol]:text-left ' + compClass,
-            style: compStyle,
-            dangerouslySetInnerHTML: { __html: renderMarkdownish(props.text ?? props.content ?? '') }
-          });
-
-        case 'image': {
-          const borderRadius = props.border_radius ?? 16;
-          const img = h('img', { src: props.src, alt: props.alt || '', className: 'ck-img', loading: 'lazy' });
-          return h('div', { className: 'w-full overflow-hidden ' + compClass, style: { borderRadius, ...compStyle } },
-            props.link ? h('a', { href: props.link, target: '_blank', rel: 'noopener noreferrer' }, img) : img
-          );
-        }
-
-        case 'video': {
-          const src = props.src || '';
-          const isYT = /(?:youtube\\.com|youtu\\.be)/.test(src);
-          const isVimeo = /vimeo\\.com/.test(src);
-          if (isYT) {
-            const match = src.match(/(?:youtube\\.com\\/(?:watch\\?v=|embed\\/)|youtu\\.be\\/)([a-zA-Z0-9_-]{11})/);
-            const embedUrl = match ? 'https://www.youtube.com/embed/' + match[1] : src;
-            return h('div', { className: 'relative w-full overflow-hidden rounded-2xl shadow-lg ' + compClass, style: { paddingTop: '56.25%', ...compStyle } },
-              h('iframe', { src: embedUrl, className: 'absolute inset-0 w-full h-full', allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture', allowFullScreen: true })
-            );
-          }
-          if (isVimeo) {
-            const match = src.match(/vimeo\\.com\\/(\\d+)/);
-            const embedUrl = match ? 'https://player.vimeo.com/video/' + match[1] : src;
-            return h('div', { className: 'relative w-full overflow-hidden rounded-2xl shadow-lg ' + compClass, style: { paddingTop: '56.25%', ...compStyle } },
-              h('iframe', { src: embedUrl, className: 'absolute inset-0 w-full h-full', allow: 'autoplay; fullscreen; picture-in-picture', allowFullScreen: true })
-            );
-          }
-          return h(VideoPlayer, { comp, isCover, compClass, compStyle });
-        }
-
-        case 'html':
-          return h(HtmlBlock, { content: props.content || '', className: compClass, style: compStyle, formState });
-
-        case 'banner': {
-          const variants = {
-            info: { bg: 'bg-blue-50', border: 'border-blue-100', text: 'text-blue-700', icon: '\\u2139\\uFE0F' },
-            warning: { bg: 'bg-amber-50', border: 'border-amber-100', text: 'text-amber-700', icon: '\\u26A0\\uFE0F' },
-            success: { bg: 'bg-emerald-50', border: 'border-emerald-100', text: 'text-emerald-700', icon: '\\u2705' },
-            error: { bg: 'bg-red-50', border: 'border-red-100', text: 'text-red-700', icon: '\\u274C' },
-          };
-          const v = variants[props.variant ?? props.style] || variants.info;
-          const bannerText = props.text ?? props.content ?? '';
-          if (isCover) {
-            return h('div', { className: 'cf-banner-glass rounded-2xl px-5 py-3.5 flex items-center justify-center gap-3 ' + compClass, style: compStyle },
-              h('span', { className: 'text-base flex-shrink-0' }, v.icon),
-              h('div', { className: 'text-sm leading-relaxed text-white/90 font-medium', dangerouslySetInnerHTML: { __html: renderMarkdownish(bannerText) } })
-            );
-          }
-          return h('div', { className: v.bg + ' ' + v.border + ' ' + v.text + ' border rounded-2xl px-5 py-4 flex items-start gap-3 ' + compClass, style: compStyle },
-            h('span', { className: 'text-lg flex-shrink-0 mt-0.5' }, v.icon),
-            h('div', { className: 'text-sm leading-relaxed', dangerouslySetInnerHTML: { __html: renderMarkdownish(bannerText) } })
-          );
-        }
-
-        case 'callout': {
-          const title = props.title || '';
-          const text = props.text || props.content || '';
-          return h('div', { className: 'rounded-2xl px-5 py-4 ' + compClass, style: { backgroundColor: (props.color || themeColor) + '0a', border: '1.5px solid ' + (props.color || themeColor) + '20', ...compStyle } },
-            title ? h('p', { className: 'font-semibold text-sm mb-1', style: { color: props.color || themeColor } }, title) : null,
-            h('div', { className: 'text-sm leading-relaxed text-gray-600', dangerouslySetInnerHTML: { __html: renderMarkdownish(text) } })
-          );
-        }
-
-        case 'divider':
-          return h('hr', { className: 'border-t border-gray-100 my-4 ' + compClass, style: compStyle });
-
-        case 'pricing_card': {
-          const features = props.features || [];
-          return h('div', { className: 'pricing-card ' + compClass, style: compStyle },
-            props.badge ? h('span', { className: 'inline-block text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full text-white mb-4', style: { backgroundColor: themeColor } }, props.badge) : null,
-            props.title ? h('h3', { className: 'text-2xl font-bold text-gray-900 mb-2', style: { fontFamily: 'var(--font-display)' } }, props.title) : null,
-            props.subtitle ? h('p', { className: 'text-gray-500 text-sm mb-6' }, props.subtitle) : null,
-            props.price != null ? h('div', { className: 'mb-6' },
-              props.original_price ? h('span', { className: 'text-lg text-gray-400 line-through mr-2' }, props.original_price) : null,
-              h('span', { className: 'text-4xl font-extrabold', style: { fontFamily: 'var(--font-display)', color: themeColor } }, typeof props.price === 'number' ? '$' + props.price : props.price),
-              props.period ? h('span', { className: 'text-gray-400 text-sm ml-1' }, '/' + props.period) : null
-            ) : null,
-            features.length > 0 ? h('ul', { className: 'text-left space-y-3 mb-6' },
-              ...features.map((f, i) => h('li', { key: i, className: 'flex items-start gap-2.5 text-sm text-gray-600' },
-                h('span', { className: 'flex-shrink-0 mt-0.5', style: { color: themeColor } }, '\\u2713'),
-                h('span', null, typeof f === 'string' ? f : f.text || f.label || '')
-              ))
-            ) : null,
-            props.cta_text ? h('button', { className: 'cf-btn-primary w-full text-white', style: { backgroundColor: themeColor } }, props.cta_text) : null,
-            props.reassurance ? h('p', { className: 'text-xs text-gray-400 mt-2' }, props.reassurance) : null
-          );
-        }
-
-        case 'testimonial':
-          return h('div', { className: 'cf-card p-6 ' + compClass, style: compStyle },
-            props.quote ? h('p', { className: 'text-gray-700 text-base leading-relaxed italic mb-4' }, '"' + props.quote + '"') : null,
-            h('div', { className: 'flex items-center gap-3' },
-              props.avatar ? h('img', { src: props.avatar, className: 'w-10 h-10 rounded-full object-cover' }) : null,
-              h('div', null,
-                props.name ? h('p', { className: 'font-semibold text-sm text-gray-900' }, props.name) : null,
-                props.title_text || props.role ? h('p', { className: 'text-xs text-gray-400' }, props.title_text || props.role) : null
-              )
-            )
-          );
-
-        case 'faq': {
-          const items = props.items || [];
-          return h('div', { className: 'space-y-3 ' + compClass, style: compStyle },
-            ...items.map((item, i) => h(FaqItem, { key: i, question: item.question || item.q, answer: item.answer || item.a, isCover }))
-          );
-        }
-
-        case 'timeline': {
-          const items = props.items || [];
-          return h('div', { className: 'relative pl-8 space-y-8 ' + compClass, style: compStyle },
-            h('div', { className: 'absolute left-3 top-2 bottom-2 w-0.5 bg-gray-200' }),
-            ...items.map((item, i) => h('div', { key: i, className: 'relative' },
-              h('div', { className: 'absolute -left-5 w-3 h-3 rounded-full border-2 border-white', style: { backgroundColor: themeColor, boxShadow: '0 0 0 3px ' + themeColor + '20' } }),
-              h('div', null,
-                item.title ? h('p', { className: 'font-semibold text-sm text-gray-900' }, item.title) : null,
-                item.description ? h('p', { className: 'text-sm text-gray-500 mt-1' }, item.description) : null
-              )
-            ))
-          );
-        }
-
-        case 'file_download':
-          return h('div', { className: compClass, style: compStyle },
-            h('a', { href: props.src || props.href || '#', download: props.filename || 'file', className: 'inline-flex items-center gap-3 border-1.5 border-gray-200 rounded-xl px-5 py-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-300 transition-all' },
-              h('svg', { className: 'w-5 h-5 text-gray-400', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
-                h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z' })
-              ),
-              props.filename || props.label || 'Download File'
-            )
-          );
-
-        case 'iframe':
-          return h('div', { className: 'w-full overflow-hidden rounded-2xl ' + compClass, style: { ...compStyle } },
-            h('iframe', { src: props.src || props.url, className: 'w-full border-0', style: { height: props.height || '400px' }, allow: props.allow || 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope', allowFullScreen: true })
-          );
-
-        // --- Input components ---
-        case 'short_text':
-        case 'email':
-        case 'phone':
-        case 'url':
-        case 'number':
-        case 'password':
-          return h(TextInput, { comp, type, formState, onFieldChange, isCover, compClass, compStyle, onSubmit });
-
-        case 'long_text':
-          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,
-            props.description ? h('p', { className: 'text-xs ' + (isCover ? 'text-white/70' : 'text-gray-500') }, props.description) : null,
-            h('textarea', {
-              className: 'cf-input min-h-[80px] resize-y',
-              placeholder: props.placeholder || '',
-              rows: props.rows || 4,
-              value: formState[comp.id] ?? '',
-              onChange: (e) => onFieldChange(comp.id, e.target.value),
-            })
-          );
-
-        case 'multiple_choice':
-          return h(MultipleChoiceInput, { comp, formState, onFieldChange, isCover, compClass, compStyle });
-
-        case 'checkboxes':
-          return h(CheckboxesInput, { comp, formState, onFieldChange, isCover, compClass, compStyle });
-
-        case 'dropdown':
-          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('select', {
-              className: 'cf-input',
-              value: formState[comp.id] ?? '',
-              onChange: (e) => onFieldChange(comp.id, e.target.value),
-            },
-              h('option', { value: '' }, props.placeholder || 'Select...'),
-              ...(props.options || []).map((opt, j) =>
-                h('option', { key: j, value: typeof opt === 'string' ? opt : opt.value },
-                  typeof opt === 'string' ? opt : opt.label || opt.value || ''
-                )
-              )
-            )
-          );
-
-        case 'slider':
-          return h(SliderInput, { comp, formState, onFieldChange, isCover, compClass, compStyle });
-
-        case 'star_rating':
-          return h(StarRatingInput, { comp, formState, onFieldChange, isCover, compClass, compStyle });
-
-        case 'switch':
-        case 'checkbox':
-          return h(SwitchInput, { comp, type, formState, onFieldChange, isCover, compClass, compStyle });
-
-        case 'payment':
-          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', {
-            className: 'border-2 border-dashed border-gray-300 rounded-xl p-4 text-center text-gray-400 text-sm ' + compClass,
-            style: compStyle,
-          }, type + (props.label ? ': ' + props.label : '') + ' (' + comp.id + ')');
-      }
-    }
-
-    // --- Sub-components ---
-
-    function FaqItem({ question, answer, isCover }) {
-      const [open, setOpen] = React.useState(false);
-      return h('div', { className: 'rounded-2xl border border-gray-200 overflow-hidden' },
-        h('button', {
-          className: 'w-full flex items-center justify-between px-5 py-4 text-left text-sm font-semibold ' + (isCover ? 'text-white' : 'text-gray-900'),
-          onClick: () => setOpen(!open),
-        },
-          h('span', null, question),
-          h('svg', { className: 'w-4 h-4 transition-transform ' + (open ? 'rotate-180' : ''), fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
-            h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M19 9l-7 7-7-7' })
-          )
-        ),
-        open ? h('div', { className: 'px-5 pb-4 text-sm text-gray-600 leading-relaxed', dangerouslySetInnerHTML: { __html: renderMarkdownish(answer || '') } }) : null
-      );
-    }
-
-    function TextInput({ comp, type, formState, onFieldChange, isCover, compClass, compStyle, onSubmit }) {
-      const props = comp.props || {};
-      const inputType = type === 'email' ? 'email' : type === 'phone' ? 'tel' : type === 'url' ? 'url' : type === 'number' ? 'number' : type === 'password' ? 'password' : 'text';
-      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,
-        (props.sublabel || props.subheading) ? h('p', { className: 'text-xs font-medium ' + (isCover ? 'text-white/60' : 'text-gray-400') }, props.sublabel || props.subheading) : null,
-        props.description ? h('p', { className: 'text-xs ' + (isCover ? 'text-white/70' : 'text-gray-500') }, props.description) : null,
-        h('input', {
-          type: inputType,
-          className: 'cf-input' + (isCover ? ' bg-white/10 text-white border-white/20 placeholder-white/40' : ''),
-          placeholder: props.placeholder || '',
-          value: formState[comp.id] ?? '',
-          onChange: (e) => onFieldChange(comp.id, e.target.value),
-          onKeyDown: (e) => { if (e.key === 'Enter' && onSubmit) { e.preventDefault(); onSubmit(); } },
-        })
-      );
-    }
 
-    function MultipleChoiceInput({ comp, formState, onFieldChange, isCover, compClass, compStyle }) {
-      const props = comp.props || {};
-      const selected = formState[comp.id] ?? 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,
-        props.description ? h('p', { className: 'text-xs ' + (isCover ? 'text-white/70' : 'text-gray-500') }, props.description) : null,
-        h('div', { className: 'space-y-2.5' },
-          ...(props.options || []).map((opt, j) => {
-            const value = typeof opt === 'string' ? opt : opt.value;
-            const label = typeof opt === 'string' ? opt : opt.label || opt.value || '';
-            const isSelected = selected === value;
-            return h('button', {
-              key: j,
-              className: 'cf-choice flex items-center gap-3',
-              'data-selected': isSelected ? 'true' : 'false',
-              style: isSelected ? { borderColor: themeColor, boxShadow: '0 0 0 3px ' + themeColor + '26' } : undefined,
-              onClick: () => onFieldChange(comp.id, value),
-            },
-              h('span', {
-                className: 'w-5 h-5 rounded-full border-2 flex items-center justify-center flex-shrink-0 transition-all',
-                style: isSelected ? { borderColor: themeColor, backgroundColor: themeColor } : { borderColor: '#d1d5db' },
-              }, isSelected ? h('span', { className: 'w-2 h-2 rounded-full bg-white' }) : null),
-              h('span', { className: 'text-sm font-medium ' + (isCover ? 'text-white' : 'text-gray-700') }, label)
-            );
-          })
-        )
-      );
-    }
-
-    function CheckboxesInput({ comp, formState, onFieldChange, isCover, compClass, compStyle }) {
-      const props = comp.props || {};
-      const selected = 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: 'space-y-2.5' },
-          ...(props.options || []).map((opt, j) => {
-            const value = typeof opt === 'string' ? opt : opt.value;
-            const label = typeof opt === 'string' ? opt : opt.label || opt.value || '';
-            const isChecked = Array.isArray(selected) && selected.includes(value);
-            return h('button', {
-              key: j,
-              className: 'cf-choice flex items-center gap-3',
-              'data-selected': isChecked ? 'true' : 'false',
-              style: isChecked ? { borderColor: themeColor, boxShadow: '0 0 0 3px ' + themeColor + '26' } : undefined,
-              onClick: () => {
-                const arr = Array.isArray(selected) ? [...selected] : [];
-                if (isChecked) onFieldChange(comp.id, arr.filter(v => v !== value));
-                else onFieldChange(comp.id, [...arr, value]);
-              },
-            },
-              h('span', {
-                className: 'w-5 h-5 rounded-md border-2 flex items-center justify-center flex-shrink-0 transition-all',
-                style: isChecked ? { borderColor: themeColor, backgroundColor: themeColor } : { borderColor: '#d1d5db' },
-              }, isChecked ? h('svg', { className: 'w-3 h-3 text-white', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 3 },
-                h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M5 13l4 4L19 7' })
-              ) : null),
-              h('span', { className: 'text-sm font-medium ' + (isCover ? 'text-white' : 'text-gray-700') }, label)
-            );
-          })
-        )
-      );
-    }
+  <!-- React mount point -->
+  <div id="root"></div>
 
-    function SliderInput({ comp, formState, onFieldChange, isCover, compClass, compStyle }) {
-      const props = comp.props || {};
-      const min = props.min ?? 0, max = props.max ?? 100, step = props.step ?? 1;
-      const value = formState[comp.id] ?? props.default_value ?? min;
-      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) : null,
-        h('div', { className: 'flex items-center gap-4' },
-          h('input', { type: 'range', min, max, step, value, className: 'flex-1', style: { accentColor: themeColor }, onChange: (e) => onFieldChange(comp.id, Number(e.target.value)) }),
-          h('span', { className: 'text-sm font-semibold min-w-[3ch] text-right', style: { color: themeColor } }, value)
-        )
-      );
-    }
-
-    function StarRatingInput({ comp, formState, onFieldChange, isCover, compClass, compStyle }) {
-      const props = comp.props || {};
-      const max = props.max ?? 5;
-      const value = formState[comp.id] ?? 0;
-      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) : null,
-        h('div', { className: 'flex gap-1' },
-          ...Array.from({ length: max }, (_, i) => h('button', {
-            key: i,
-            className: 'text-2xl transition-transform hover:scale-125',
-            onClick: () => onFieldChange(comp.id, i + 1),
-          }, i < value ? '\\u2605' : '\\u2606'))
-        )
-      );
-    }
-
-    function SwitchInput({ comp, type, formState, onFieldChange, isCover, compClass, compStyle }) {
-      const props = comp.props || {};
-      const checked = !!formState[comp.id];
-      return h('div', { className: 'flex items-center gap-3 ' + compClass, style: compStyle },
-        h('button', {
-          className: 'relative w-11 h-6 rounded-full transition-colors',
-          style: { backgroundColor: checked ? themeColor : '#d1d5db' },
-          onClick: () => onFieldChange(comp.id, !checked),
-        },
-          h('span', { className: 'absolute top-0.5 w-5 h-5 rounded-full bg-white shadow transition-transform', style: { left: checked ? '22px' : '2px' } })
-        ),
-        props.label ? h('span', { className: 'text-sm font-medium ' + (isCover ? 'text-white' : 'text-gray-700') }, props.label) : null,
-      );
-    }
+  ${validationHtml}
 
-    // --- 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
-      );
-    }
-
-    // --- HtmlBlock: renders HTML content and executes inline <script> tags ---
-    function HtmlBlock({ content, className, style, formState }) {
-      const ref = React.useRef(null);
-      const executedRef = React.useRef(new Set());
-      // Template interpolation: replace {{field_id}} with form state values
-      const interpolated = React.useMemo(() =>
-        (content || '').replace(/{{(w+)}}/g, (_, id) => formState?.[id] ?? ''),
-        [content, formState]
-      );
-      React.useEffect(() => {
-        const container = ref.current;
-        if (!container) return;
-        const scripts = container.querySelectorAll('script');
-        scripts.forEach((orig) => {
-          const key = orig.src || orig.textContent || '';
-          if (executedRef.current.has(key)) return;
-          executedRef.current.add(key);
-          if (orig.src) {
-            const s = document.createElement('script');
-            s.src = orig.src;
-            if (orig.type) s.type = orig.type;
-            s.async = true;
-            container.appendChild(s);
-          } else if (orig.textContent) {
-            try { new Function(orig.textContent)(); }
-            catch (e) { console.error('[CatalogKit:dev] Inline script error:', e); }
-          }
-        });
-      }, [interpolated]);
-      return h('div', { ref, className: 'prose prose-sm max-w-none ' + (className || ''), style, dangerouslySetInnerHTML: { __html: interpolated } });
-    }
-
-    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, onFieldAndNavigate, 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 dispatchAction = (act) => {
-        const cmd = act?.action || 'next';
-        if (cmd === 'next') { onNext(); return; }
-        if (cmd.startsWith('action:')) {
-          const actionId = cmd.slice(7);
-          const action = page.actions?.find(a => a.id === actionId);
-          if (action) onAction(action); else onNext();
-          return;
-        }
-        if (cmd.startsWith('field:')) {
-          const parts = cmd.slice(6).split(':');
-          if (parts.length >= 2) { onFieldAndNavigate(parts[0], parts.slice(1).join(':')); }
-          return;
-        }
-        onNext();
-      };
-      const primaryLabel = config.primary?.label
-        ? interpolate(config.primary.label)
-        : config.button_text || page.submit_label || 'Continue';
-      const secondaryAction = config.secondary;
-      const secondaryLabel = secondaryAction?.label ? interpolate(secondaryAction.label) : null;
-      return h('div', {
-        className: 'cf-sticky-bar' + (show ? '' : ' hidden'),
-        style: bgStyles[config.style || 'solid'] || bgStyles.solid,
+  <!-- Mount CatalogRenderer from renderer bundle -->
+  <script type="module">
+    import React from "react";
+    import { createRoot } from "react-dom/client";
+    import { CatalogRenderer } from "/__renderer/index.js";
+
+    const schema = ${schemaJson};
+    const port = ${port};
+
+    // --- Dev Services ---
+    const devTracker = {
+      track(payload) {
+        // Post to dev event endpoint
+        fetch("/__dev_event", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ type: payload.event_type, data: payload, ts: Date.now() }),
+        }).catch(() => {});
       },
-        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,
-            secondaryLabel
-              ? h('button', {
-                  className: 'text-sm font-medium hover:opacity-80 transition-opacity',
-                  style: { color: config.style === 'glass_dark' ? 'rgba(255,255,255,0.6)' : '#6b7280' },
-                  onClick: () => dispatchAction(secondaryAction),
-                }, secondaryLabel)
-              : 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: () => dispatchAction(config.primary),
-            }, primaryLabel)
-          )
-        )
-      );
-    }
-
-    // --- 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' },
+    const services = {
+      tracker: devTracker,
+      apiBaseUrl: "http://localhost:" + port,
+      onEvent(event) {
+        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 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 },
-          h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: cartIconPath })
-        ),
-        h('span', null, itemCount),
-        h('span', { className: 'text-sm opacity-80' }, itemCount === 1 ? 'item' : 'items')
-      );
-    }
-
-    function CartDrawer({ items, isOpen, onToggle, onRemove, onCheckout }) {
-      React.useEffect(() => {
-        if (!isOpen) return;
-        const handleKey = (e) => { if (e.key === 'Escape') onToggle(); };
-        window.addEventListener('keydown', handleKey);
-        return () => window.removeEventListener('keydown', handleKey);
-      }, [isOpen, onToggle]);
-
-      return h(React.Fragment, null,
-        // Backdrop
-        h('div', {
-          className: 'fixed inset-0 z-[95] bg-black/30 backdrop-blur-sm transition-opacity duration-300 ' + (isOpen ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'),
-          onClick: onToggle,
-        }),
-        // Drawer
-        h('div', {
-          className: 'fixed top-0 right-0 bottom-0 z-[96] w-full max-w-md bg-white shadow-2xl transition-transform duration-300 ease-out flex flex-col ' + (isOpen ? 'translate-x-0' : 'translate-x-full'),
-          style: { fontFamily: 'var(--font-display)' },
-        },
-          // Header
-          h('div', { className: 'flex items-center justify-between px-6 py-5 border-b border-gray-100' },
-            h('div', { className: 'flex items-center gap-3' },
-              h('div', { className: 'w-9 h-9 rounded-xl flex items-center justify-center', style: { backgroundColor: themeColor + '12' } },
-                h('svg', { className: 'w-5 h-5', style: { color: themeColor }, fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
-                  h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: cartIconPath })
-                )
-              ),
-              h('div', null,
-                h('h2', { className: 'text-lg font-bold text-gray-900' }, schema.settings?.cart?.title || 'Your Cart'),
-                h('p', { className: 'text-xs text-gray-400' }, items.length + ' ' + (items.length === 1 ? 'item' : 'items') + ' selected')
-              )
-            ),
-            h('button', { onClick: onToggle, className: 'w-9 h-9 flex items-center justify-center rounded-xl text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-all' },
-              h('svg', { className: 'w-5 h-5', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
-                h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6 18L18 6M6 6l12 12' })
-              )
-            )
-          ),
-          // Items
-          h('div', { className: 'flex-1 overflow-y-auto px-6 py-4' },
-            items.length === 0
-              ? h('div', { className: 'flex flex-col items-center justify-center h-full text-center py-16' },
-                  h('div', { className: 'w-16 h-16 rounded-2xl flex items-center justify-center mb-4', style: { backgroundColor: themeColor + '08' } },
-                    h('svg', { className: 'w-8 h-8 text-gray-300', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 1.5 },
-                      h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: cartIconPath })
-                    )
-                  ),
-                  h('p', { className: 'text-gray-400 text-sm font-medium' }, 'No offers accepted yet'),
-                  h('p', { className: 'text-gray-300 text-xs mt-1' }, 'Accept offers as you browse to add them here')
-                )
-              : h('div', { className: 'space-y-3' },
-                  ...items.map(item => h('div', { key: item.offer_id, className: 'group flex items-start gap-4 p-4 rounded-2xl border border-gray-100 bg-gray-50/50 hover:bg-white hover:border-gray-200 hover:shadow-sm transition-all duration-200' },
-                    item.image ? h('img', { src: item.image, alt: item.title, className: 'w-14 h-14 rounded-xl object-cover flex-shrink-0' }) : null,
-                    h('div', { className: 'flex-1 min-w-0' },
-                      h('h3', { className: 'text-sm font-semibold text-gray-900 truncate' }, item.title),
-                      item.price_display ? h('p', { className: 'text-sm font-bold mt-0.5', style: { color: themeColor } }, item.price_display) : null,
-                      item.price_subtext ? h('p', { className: 'text-xs text-gray-400 mt-0.5' }, item.price_subtext) : null
-                    ),
-                    h('button', { onClick: () => onRemove(item.offer_id), className: 'w-7 h-7 flex-shrink-0 flex items-center justify-center rounded-lg text-gray-300 hover:text-red-500 hover:bg-red-50 transition-all opacity-0 group-hover:opacity-100' },
-                      h('svg', { className: 'w-4 h-4', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
-                        h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0' })
-                      )
-                    )
-                  ))
-                )
-          ),
-          // Footer
-          items.length > 0 ? h('div', { className: 'border-t border-gray-100 px-6 py-5 space-y-4' },
-            h('div', { className: 'flex items-center justify-between' },
-              h('span', { className: 'text-sm font-medium text-gray-500' }, items.length + ' ' + (items.length === 1 ? 'offer' : 'offers') + ' selected'),
-              h('div', { className: 'flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold', style: { backgroundColor: themeColor + '10', color: themeColor } },
-                h('svg', { className: 'w-3.5 h-3.5', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
-                  h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z' })
-                ),
-                'Added to order'
-              )
-            ),
-            onCheckout ? h('button', {
-              className: 'cf-btn-primary w-full text-white flex items-center justify-center gap-2',
-              style: { backgroundColor: themeColor },
-              onClick: onCheckout,
-            },
-              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: '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' })
-              ),
-              schema.settings?.cart?.checkout_button_text || 'Proceed to Checkout'
-            ) : null
-          ) : null
-        )
-      );
-    }
-
-    function CartCheckoutButton({ items, themeColor }) {
-      const [loading, setLoading] = React.useState(false);
-      const [error, setError] = React.useState(null);
-
-      const handleCheckout = React.useCallback(async () => {
-        const state = window.__devDebugState;
-        devEvents.emit('cart_checkout_started', { items: items.map(i => ({ offer_id: i.offer_id, title: i.title })) });
-        setLoading(true);
-        setError(null);
-        try {
-          const res = await fetch('/__dev_checkout', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              line_items: items.map(item => ({
-                title: item.title,
-                amount_cents: item.amount_cents,
-                currency: item.currency || 'usd',
-                quantity: 1,
-                stripe_price_id: item.stripe_price_id,
-                payment_type: schema.settings?.checkout?.payment_type || 'one_time',
-              })),
-              form_state: state?.formState || {},
-              catalog_slug: schema.slug,
-            }),
-          });
-          const data = await res.json();
-          if (data.session_url) {
-            devEvents.emit('checkout_redirect', { session_id: data.session_id });
-            window.location.href = data.session_url;
-          } else if (data.error) {
-            setError(data.error);
-          }
-        } catch (err) {
-          setError(err.message || 'Checkout failed');
-        } finally {
-          setLoading(false);
-        }
-      }, [items]);
-
-      if (!devConfig.stripeEnabled) {
-        return h('div', { className: 'checkout-stub' },
-          h('h3', null, 'Checkout'),
-          h('p', null, 'Add STRIPE_SECRET_KEY to .env for real checkout.'),
-          h('details', { className: 'mt-2 text-left', style: { fontSize: '11px', color: '#92400e' } },
-            h('summary', { style: { cursor: 'pointer' } }, 'Cart payload'),
-            h('pre', { style: { whiteSpace: 'pre-wrap', marginTop: '4px' } },
-              JSON.stringify(items.map(i => ({ offer_id: i.offer_id, title: i.title, price: i.price_display })), null, 2)
-            )
-          )
-        );
-      }
-
-      return h('div', { className: 'space-y-2' },
-        h('button', {
-          className: 'cf-btn-primary w-full text-white',
-          style: { backgroundColor: themeColor, opacity: loading ? 0.7 : 1 },
-          onClick: handleCheckout,
-          disabled: loading,
-        }, loading ? 'Redirecting to Stripe...' : 'Proceed to Checkout'),
-        error ? h('p', { className: 'text-red-500 text-sm text-center' }, error) : null
-      );
-    }
-
-    // --- Main App ---
-    function CatalogPreview({ catalog: 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);
-      const globalsRef = React.useRef({});
-      const [compPropOverrides, setCompPropOverrides] = React.useState({});
-
-      // --- Cart logic ---
-      const addToCart = React.useCallback((pageId) => {
-        const pg = pages[pageId];
-        if (!pg?.offer) return;
-        const offer = pg.offer;
-        setCartItems(prev => {
-          if (prev.some(item => item.offer_id === offer.id)) return prev;
-          return [...prev, {
-            offer_id: offer.id,
-            page_id: pageId,
-            title: offer.title || pageId,
-            price_display: offer.price_display,
-            price_subtext: offer.price_subtext,
-            image: offer.image,
-            stripe_price_id: offer.stripe_price_id,
-            amount_cents: offer.amount_cents,
-            currency: offer.currency,
-            payment_type: offer.payment_type,
-            interval: offer.interval,
-          }];
-        });
-      }, [pages]);
-
-      const removeFromCart = React.useCallback((offerId) => {
-        setCartItems(prev => prev.filter(item => item.offer_id !== offerId));
-        // Clear accept_field so it doesn't re-add
-        for (const [pid, pg] of Object.entries(pages)) {
-          if (pg.offer?.id === offerId && pg.offer.accept_field) {
-            setFormState(prev => { const next = { ...prev }; delete next[pg.offer.accept_field]; return next; });
-          }
-        }
-      }, [pages]);
-
-      const toggleCart = React.useCallback(() => setCartOpen(prev => !prev), []);
-
-      // Detect offer acceptance from field changes
-      React.useEffect(() => {
-        for (const [pageId, pg] of Object.entries(pages)) {
-          const offer = pg.offer;
-          if (!offer?.accept_field) continue;
-          const fieldValue = formState[offer.accept_field];
-          const acceptValue = offer.accept_value || 'accept';
-          if (fieldValue === acceptValue) {
-            if (!cartItems.some(item => item.offer_id === offer.id)) addToCart(pageId);
-          } else {
-            if (cartItems.some(item => item.offer_id === offer.id) && fieldValue !== undefined) removeFromCart(offer.id);
-          }
-        }
-      }, [formState, pages, cartItems, addToCart, removeFromCart]);
-
-      // Expose navigation for mindmap + emit page_view + 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) => onFieldChangeRef.current?.(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],
-          getGlobal: (key) => globalsRef.current[key],
-          setGlobal: (key, value) => { globalsRef.current[key] = value; },
-          setComponentProp: (id, prop, value) => {
-            setCompPropOverrides(prev => ({ ...prev, [id]: { ...(prev[id] || {}), [prop]: value } }));
-          },
-          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, setGlobal: instance.setGlobal, getGlobal: instance.getGlobal, setComponentProp: instance.setComponentProp };
-        window.__catalogKitListeners = listeners;
-        return () => { delete window.CatalogKit; delete window.__catalogKitListeners; };
-      }, []);
-
-      const page = currentPageId ? pages[currentPageId] : null;
-      const isCover = page?.layout === 'cover';
-      const isLastPage = (() => {
-        if (!routing.edges) return true;
-        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 (unscoped + scoped)
-        const ckListeners = window.__catalogKitListeners || {};
-        const fcPayload = { fieldId: id, value, pageId: currentPageId };
-        const fcSet = ckListeners['fieldchange']; if (fcSet?.size) for (const cb of fcSet) { try { cb(fcPayload); } catch {} }
-        const scopedSet = ckListeners['fieldchange:' + id]; if (scopedSet?.size) for (const cb of scopedSet) { try { cb(fcPayload); } 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]);
-      const onFieldChangeRef = React.useRef(onFieldChange);
-      onFieldChangeRef.current = onFieldChange;
-
-      // --- 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(() => {
-        // Validate before advancing
-        if (!runValidation()) return;
-        // Check video watch requirements
-        const currentPage = pages[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;
-              }
-            }
-          }
-        }
-        // Check if page has an offer \u2014 treat "Next" as an accept action
-        if (currentPage?.offer) {
-          if (!currentPage.offer.accept_field) addToCart(currentPageId);
-        }
-        // Fire CatalogKit beforenext event (scoped: "beforenext" + "beforenext:<pageId>")
-        let prevented = false;
-        let nextPageOverride;
-        const beforeNextPayload = {
-          pageId: currentPageId,
-          preventDefault: () => { prevented = true; },
-          setNextPage: (id) => { nextPageOverride = id; },
-        };
-        const ckListeners = window.__catalogKitListeners || {};
-        for (const key of ['beforenext', 'beforenext:' + currentPageId]) {
-          const set = ckListeners[key]; if (!set?.size) continue;
-          for (const cb of set) { try { cb(beforeNextPayload); } catch (e) { console.error('[CatalogKit]', key, e); } }
-        }
-        if (prevented) return;
-        if (nextPageOverride !== undefined) { navigateTo(nextPageOverride); return; }
-        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) {
-          const prev = history[history.length - 1];
-          setHistory(h => h.slice(0, -1));
-          setCurrentPageId(prev);
-          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]);
-
-      // --- Field + Navigate (for sticky bar field: dispatch) ---
-      const handleFieldAndNavigate = React.useCallback((fieldId, value) => {
-        const newFormState = { ...formState, [fieldId]: value };
-        setFormState(newFormState);
-        const page = pages[currentPageId];
-        if (page) {
-          const errors = validatePage(page, newFormState, 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;
-          }
-        }
-        const nextPageId = getNextPage(routing, currentPageId, newFormState, devContext);
-        navigateTo(nextPageId);
-      }, [currentPageId, routing, formState, pages, navigateTo]);
-
-      // --- 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' },
-          h('p', { className: 'text-gray-500' }, 'No pages found in catalog.')
-        );
-      }
-
-      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;
-      });
-      // Find the last input component for Enter-to-submit
-      const inputTypes = ['short_text', 'long_text', 'email', 'phone', 'url', 'number', 'password', 'currency', 'date', 'datetime', 'time', 'address'];
-      const lastInputComp = [...components].reverse().find(c => inputTypes.includes(c.type));
-      const lastInputId = lastInputComp?.id;
-
-      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,
-        !cartSettings.hide_button ? h(CartButton, { itemCount: cartItems.length, onClick: toggleCart }) : null,
-        h(CartDrawer, { items: cartItems, isOpen: cartOpen, onToggle: toggleCart, onRemove: removeFromCart, onCheckout: catalog.settings?.checkout ? () => { setCartOpen(false); setShowCheckout(true); devEvents.emit('checkout_start', { item_count: cartItems.length }); } : undefined })
-      );
-
-      // Cover page layout
-      if (isCover) {
-        return h('div', { 'data-page-id': currentPageId },
-          cartUI,
-          h('div', {
-            className: 'cf-page cf-noise min-h-screen flex items-center justify-center relative overflow-hidden',
-            style: {
-              backgroundImage: bgImage ? 'url(' + bgImage + ')' : 'linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)',
-              backgroundSize: 'cover', backgroundPosition: 'center',
-            },
-          },
-            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) => {
-                  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);
-                  const submitHandler = comp.id === lastInputId ? handleNext : undefined;
-                  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, onSubmit: submitHandler, propOverrides: compPropOverrides }),
-                    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'))
-                    )
-              )
-            )
-          )
-        );
-      }
-
-      // Standard page layout
-      const topBar = catalog.settings?.top_bar;
-      const progressSteps = catalog.settings?.progress_steps;
-      const topBarEnabled = topBar?.enabled !== false && catalog.settings?.top_bar;
-
-      return h('div', { 'data-page-id': currentPageId },
-        cartUI,
-        h('div', {
-          className: 'cf-page min-h-screen',
-          style: { background: 'linear-gradient(180deg, #f8f9fc 0%, #f0f2f7 100%)' },
-        },
-          // Top bar
-          topBarEnabled ? h('div', { className: 'cf-topbar fixed top-[28px] left-0 right-0 z-50 border-b border-gray-200/60' },
-            // Announcement strip
-            topBar?.announcement && (topBar.announcement.text || topBar.announcement.html)
-              ? h('div', {
-                  className: 'cf-topbar-announcement text-center text-sm py-2 px-4 ' + (topBar.announcement.className || ''),
-                  style: {
-                    backgroundColor: topBar.announcement.bg_color || themeColor,
-                    color: topBar.announcement.text_color || '#ffffff',
-                    ...(topBar.announcement.style || {}),
-                  },
-                  ...(topBar.announcement.html ? { dangerouslySetInnerHTML: { __html: topBar.announcement.html } } : {}),
-                }, topBar.announcement.html ? undefined : topBar.announcement.text)
-              : null,
-            // Nav row
-            h('div', { className: 'relative flex items-center justify-center px-4 py-3 min-h-[48px]' },
-              history.length > 0 ? h('button', {
-                className: 'absolute left-3 top-1/2 -translate-y-1/2 w-9 h-9 flex items-center justify-center rounded-xl text-gray-400 hover:text-gray-700 hover:bg-gray-100/80 transition-all',
-                onClick: handleBack,
-              },
-                h('svg', { className: 'w-5 h-5', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
-                  h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M15.75 19.5L8.25 12l7.5-7.5' })
-                )
-              ) : null,
-              topBar?.custom_html
-                ? h('div', { dangerouslySetInnerHTML: { __html: topBar.custom_html } })
-                : h(React.Fragment, null,
-                    topBar?.title ? h('span', { className: 'text-sm text-gray-700 ' + (
-                      topBar.title_weight === 'light' ? 'font-light' :
-                      topBar.title_weight === 'normal' ? 'font-normal' :
-                      topBar.title_weight === 'semibold' ? 'font-semibold' :
-                      topBar.title_weight === 'bold' ? 'font-bold' :
-                      'font-medium'
-                    ) }, topBar.title) : null,
-                    progressSteps ? h(Stepper, { steps: progressSteps, currentPageId, themeColor }) : null,
-                  ),
-            )
-          ) : null,
-
-          // Page content
-          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) => {
-                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);
-                const submitHandler = comp.id === lastInputId ? handleNext : undefined;
-                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, onSubmit: submitHandler, propOverrides: compPropOverrides }),
-                  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, onFieldAndNavigate: handleFieldAndNavigate, onBack: handleBack,
-                historyLen: history.length,
-              })
-            : null
-        )
-      );
-    }
-
-    function Stepper({ steps, currentPageId, themeColor }) {
-      const currentStepIndex = steps.findIndex(s => s.pages && s.pages.includes(currentPageId));
-      return h('div', { className: 'flex items-center justify-center gap-0', style: { fontFamily: 'var(--font-display)' } },
-        ...steps.map((step, i) => h(React.Fragment, { key: step.id || i },
-          i > 0 ? h('div', { className: 'w-10 sm:w-16 h-0.5 rounded-full transition-all duration-500', style: { backgroundColor: i <= currentStepIndex ? themeColor : '#e8e9ee' } }) : null,
-          h('div', { className: 'flex items-center gap-1.5' },
-            h('div', { className: 'w-7 h-7 rounded-full flex items-center justify-center transition-all duration-300', style: {
-              backgroundColor: i <= currentStepIndex ? themeColor : '#f0f1f5',
-              boxShadow: i === currentStepIndex ? '0 0 0 4px ' + themeColor + '20' : 'none',
-            } },
-              i < currentStepIndex
-                ? h('svg', { className: 'w-3.5 h-3.5 text-white', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 3 },
-                    h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M5 13l4 4L19 7' }))
-                : i === currentStepIndex
-                  ? h('div', { className: 'w-2 h-2 rounded-full bg-white' })
-                  : h('div', { className: 'w-2 h-2 rounded-full bg-gray-300' })
-            ),
-            h('span', {
-              className: 'text-[11px] font-bold tracking-wider uppercase transition-colors duration-300 ' + (i <= currentStepIndex ? '' : 'text-gray-400'),
-              style: i <= currentStepIndex ? { color: themeColor } : undefined,
-            }, step.label)
-          )
-        ))
-      );
-    }
-
-    // --- Auto-reload via SSE ---
-    const evtSource = new EventSource('/__dev_sse');
-    evtSource.onmessage = (e) => {
-      if (e.data === 'connected') return; // ignore initial handshake
-      window.location.reload();
+      onPageChange(pageId) {
+        fetch("/__dev_event", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ type: "page_change", data: { page_id: pageId }, ts: Date.now() }),
+        }).catch(() => {});
+      },
     };
-    evtSource.onerror = () => {};
 
     // --- Mount ---
-    const root = ReactDOM.createRoot(document.getElementById('catalog-root'));
-    root.render(h(CatalogPreview, { catalog: schema }));
-
-    // --- Pages mindmap ---
-    (function initPagesMindmap() {
-      const btn = document.getElementById('pages-btn');
-      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'));
-      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 || {};
-        const routing = schema.routing || {};
-        const edges = routing.edges || [];
-        const entry = routing.entry || Object.keys(pages)[0];
-        const pageIds = Object.keys(pages);
-
-        // Build adjacency for layout (BFS layers)
-        const adj = {};
-        pageIds.forEach(id => { adj[id] = []; });
-        edges.forEach(e => { if (adj[e.from]) adj[e.from].push(e.to); });
-
-        // BFS to assign layers
-        const layers = {};
-        const visited = new Set();
-        const queue = [entry];
-        visited.add(entry);
-        layers[entry] = 0;
-        while (queue.length > 0) {
-          const id = queue.shift();
-          for (const next of (adj[id] || [])) {
-            if (!visited.has(next)) {
-              visited.add(next);
-              layers[next] = (layers[id] || 0) + 1;
-              queue.push(next);
-            }
-          }
-        }
-        // Assign orphans
-        pageIds.forEach(id => { if (layers[id] === undefined) layers[id] = 999; });
-
-        // Group by layer
-        const layerGroups = {};
-        pageIds.forEach(id => {
-          const l = layers[id];
-          if (!layerGroups[l]) layerGroups[l] = [];
-          layerGroups[l].push(id);
-        });
-        const sortedLayers = Object.keys(layerGroups).map(Number).sort((a, b) => a - b);
-
-        // Render nodes in rows
-        let html = '<div style="display:flex;flex-direction:column;align-items:center;gap:32px;">';
-        const nodePositions = {};
-        let rowIdx = 0;
-        for (const layer of sortedLayers) {
-          const ids = layerGroups[layer];
-          html += '<div style="display:flex;gap:20px;justify-content:center;flex-wrap:wrap;">';
-          ids.forEach(id => {
-            const page = pages[id];
-            const isEntry = id === entry;
-            const isCurrent = id === currentPageRef.id;
-            const compCount = (page.components || []).length;
-            const cls = 'mindmap-node' + (isEntry ? ' entry' : '') + (isCurrent ? ' current' : '');
-            html += '<div class="' + cls + '" data-node-id="' + id + '">';
-            if (isEntry) html += '<span class="node-badge">entry</span>';
-            html += '<div class="node-title">' + (page.title || id) + '</div>';
-            html += '<div class="node-id">' + id + '</div>';
-            html += '<div class="node-components">' + compCount + ' component' + (compCount !== 1 ? 's' : '') + '</div>';
-            html += '</div>';
-          });
-          html += '</div>';
-          rowIdx++;
-        }
-        html += '</div>';
-
-        container.innerHTML = html;
-
-        // Draw SVG edges after layout
-        requestAnimationFrame(() => {
-          const containerRect = container.getBoundingClientRect();
-          const nodeEls = container.querySelectorAll('[data-node-id]');
-          const nodeRects = {};
-          nodeEls.forEach(el => { nodeRects[el.dataset.nodeId] = el.getBoundingClientRect(); });
-
-          let svgContent = '';
-          edges.forEach(edge => {
-            const fromRect = nodeRects[edge.from];
-            const toRect = nodeRects[edge.to];
-            if (!fromRect || !toRect) return;
-            const x1 = fromRect.left + fromRect.width / 2 - containerRect.left;
-            const y1 = fromRect.top + fromRect.height - containerRect.top;
-            const x2 = toRect.left + toRect.width / 2 - containerRect.left;
-            const y2 = toRect.top - containerRect.top;
-            const midY = (y1 + y2) / 2;
-            const hasConditions = edge.conditions && edge.conditions.length > 0;
-            const color = hasConditions ? '#fbbf24' : 'rgba(255,255,255,0.25)';
-            svgContent += '<path d="M' + x1 + ',' + y1 + ' C' + x1 + ',' + midY + ' ' + x2 + ',' + midY + ' ' + x2 + ',' + y2 + '" fill="none" stroke="' + color + '" stroke-width="2" stroke-dasharray="' + (hasConditions ? '6,4' : 'none') + '"/>';
-            // Arrow
-            svgContent += '<polygon points="' + (x2-4) + ',' + (y2-6) + ' ' + x2 + ',' + y2 + ' ' + (x2+4) + ',' + (y2-6) + '" fill="' + color + '"/>';
-            // Condition label
-            if (hasConditions) {
-              const lx = (x1 + x2) / 2;
-              const ly = midY - 8;
-              const label = edge.conditions.map(c => c.field + ' ' + c.operator + ' ' + c.value).join(', ');
-              svgContent += '<text x="' + lx + '" y="' + ly + '" text-anchor="middle" fill="#fbbf24" font-size="9" font-family="monospace">' + label + '</text>';
-            }
-          });
-
-          const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-          svgEl.style.cssText = 'position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;';
-          svgEl.innerHTML = svgContent;
-          // Remove old svg
-          const oldSvg = container.querySelector('svg');
-          if (oldSvg) oldSvg.remove();
-          container.insertBefore(svgEl, container.firstChild);
-        });
-
-        // Click nodes to navigate (ignore if user just dragged)
-        container.querySelectorAll('[data-node-id]').forEach(el => {
-          el.addEventListener('click', (e) => {
-            if (hasDragged) return;
-            e.stopPropagation();
-            const id = el.dataset.nodeId;
-            window.__devNavigateTo && window.__devNavigateTo(id);
-            overlay.classList.remove('open');
-          });
-        });
-      }
-    })();
-
-    // --- Element Inspector (Shift+Alt) ---
-    (function initInspector() {
-      const highlight = document.getElementById('inspector-highlight');
-      const tooltip = document.getElementById('inspector-tooltip');
-      const banner = document.getElementById('inspector-banner');
-      let active = false;
-
-      document.addEventListener('keydown', (e) => {
-        if (e.shiftKey && e.altKey && !active) {
-          active = true;
-          banner.style.display = 'block';
-          document.body.style.cursor = 'crosshair';
-        }
-      });
-      document.addEventListener('keyup', (e) => {
-        if (!e.shiftKey || !e.altKey) {
-          active = false;
-          banner.style.display = 'none';
-          highlight.style.display = 'none';
-          tooltip.style.display = 'none';
-          document.body.style.cursor = '';
-        }
-      });
-      window.addEventListener('blur', () => {
-        active = false;
-        banner.style.display = 'none';
-        highlight.style.display = 'none';
-        tooltip.style.display = 'none';
-        document.body.style.cursor = '';
-      });
-
-      document.addEventListener('mousemove', (e) => {
-        if (!active) return;
-        let el = e.target;
-        // Walk up to find data-component-id
-        while (el && !el.dataset?.componentId) el = el.parentElement;
-        if (!el) {
-          highlight.style.display = 'none';
-          tooltip.style.display = 'none';
-          return;
-        }
-        const compId = el.dataset.componentId;
-        const compType = el.dataset.componentType || 'unknown';
-        let pageEl = el;
-        while (pageEl && !pageEl.dataset?.pageId) pageEl = pageEl.parentElement;
-        const pageId = pageEl?.dataset?.pageId || 'unknown';
-        const rect = el.getBoundingClientRect();
-        highlight.style.display = 'block';
-        highlight.style.top = (rect.top - 2) + 'px';
-        highlight.style.left = (rect.left - 2) + 'px';
-        highlight.style.width = (rect.width + 4) + 'px';
-        highlight.style.height = (rect.height + 4) + 'px';
-        const ref = pageId + '/' + compId;
-        tooltip.style.display = 'block';
-        tooltip.style.top = Math.max(8, rect.top - 44) + 'px';
-        tooltip.style.left = Math.max(8, Math.min(rect.left, window.innerWidth - 340)) + 'px';
-        tooltip.innerHTML = '<span class="ref">' + ref + '</span><span class="type">(' + compType + ')</span><div class="hint">click to copy</div>';
-        tooltip.dataset.ref = ref;
-        tooltip.dataset.compId = compId;
-        tooltip.dataset.compType = compType;
-        tooltip.dataset.pageId = pageId;
-      });
-
-      document.addEventListener('click', (e) => {
-        if (!active || tooltip.style.display === 'none') return;
-        e.stopPropagation();
-        e.preventDefault();
-        const data = {
-          ref: tooltip.dataset.ref,
-          page_id: tooltip.dataset.pageId,
-          component_id: tooltip.dataset.compId,
-          component_type: tooltip.dataset.compType,
-          schema_path: 'schema.pages.' + tooltip.dataset.pageId + '.components[id="' + tooltip.dataset.compId + '"]',
-          catalog_slug: schema.slug || '',
-        };
-        navigator.clipboard.writeText(JSON.stringify(data, null, 2)).then(() => {
-          tooltip.innerHTML = '<span style="color:#86efac;font-weight:700;">Copied!</span>';
-          setTimeout(() => { tooltip.style.display = 'none'; }, 1200);
-        });
-      }, 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 = '';
-      });
-    })();
+    const root = createRoot(document.getElementById("root"));
+    root.render(
+      React.createElement(CatalogRenderer, {
+        catalog: schema,
+        userId: "dev-user",
+        trackingEnabled: true,
+        services: services,
+      })
+    );
 
-    // --- 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;
+    // --- Auto-reload via SSE ---
+    const sse = new EventSource("/__dev_sse");
+    sse.onmessage = (e) => {
+      if (e.data === "reload") window.location.reload();
+    };
 
-      function toggle() {
-        isOpen = !isOpen;
-        panel.classList.toggle('open', isOpen);
-        if (isOpen) render();
+    // --- Checkout redirect override for local dev ---
+    ${stripeEnabled ? `
+    // Override checkout endpoint to use local dev server
+    const _origFetch = window.fetch;
+    window.fetch = function(url, opts) {
+      if (typeof url === "string" && url.includes("/checkout/session")) {
+        return _origFetch("/__dev_checkout", opts);
       }
-      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;
+      return _origFetch.apply(this, arguments);
+    };
+    ` : `
+    // Stub checkout \u2014 no Stripe key
+    const _origFetch = window.fetch;
+    window.fetch = function(url, opts) {
+      if (typeof url === "string" && url.includes("/checkout/session")) {
+        return Promise.resolve(new Response(JSON.stringify({
+          session_url: "javascript:alert('Stripe not configured. Add STRIPE_SECRET_KEY to .env')"
+        }), { status: 200, headers: { "Content-Type": "application/json" } }));
       }
-
-      window.addEventListener('devStateUpdate', () => { if (isOpen) render(); });
-    })();
+      return _origFetch.apply(this, arguments);
+    };
+    `}
   </script>
 </body>
 </html>`;
@@ -3869,6 +1216,30 @@ async function catalogDev(file, opts) {
       res.end();
       return;
     }
+    if (url.pathname.startsWith("/__renderer/")) {
+      const fileName = url.pathname.slice("/__renderer/".length);
+      const cliDistDir = dirname2(new URL(import.meta.url).pathname);
+      const candidates = [
+        join2(cliDistDir, "../../renderer/dist", fileName),
+        join2(cliDistDir, "../../../renderer/dist", fileName)
+      ];
+      for (const candidate of candidates) {
+        const resolved = resolve4(candidate);
+        if (existsSync2(resolved) && statSync3(resolved).isFile()) {
+          const content = readFileSync4(resolved);
+          res.writeHead(200, {
+            "Content-Type": getMime(resolved),
+            "Cache-Control": "no-cache",
+            "Access-Control-Allow-Origin": "*"
+          });
+          res.end(content);
+          return;
+        }
+      }
+      res.writeHead(404);
+      res.end("Renderer file not found: " + fileName);
+      return;
+    }
     if (url.pathname.startsWith("/assets/")) {
       const relativePath = decodeURIComponent(url.pathname.slice("/assets/".length));
       const filePath = join2(catalogDir, relativePath);