@officexapp/catalogs-cli 0.3.0 → 0.4.1

package/dist/index.js

@@ -777,6 +777,13 @@ 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",
@@ -810,6 +817,7 @@ 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();
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -922,28 +930,96 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
       background: #1a1a2e; color: #e0e0ff; font-size: 12px;
       padding: 4px 12px; display: flex; align-items: center; gap: 8px;
       font-family: monospace; border-bottom: 2px solid #6c63ff;
+      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
+    }
+    .dev-banner.minimized {
+      transform: translateY(-100%); opacity: 0; pointer-events: none;
+    }
+    .dev-banner .drag-handle {
+      cursor: grab; opacity: 0.4; font-size: 10px; user-select: none; letter-spacing: 1px;
+      padding: 0 2px; transition: opacity 0.15s;
     }
+    .dev-banner .drag-handle:hover { opacity: 0.8; }
+    .dev-banner .drag-handle:active { cursor: grabbing; }
     .dev-banner .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: pulse 2s ease-in-out infinite; }
     @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
     .dev-banner .label { opacity: 0.7; }
     .dev-banner .slug { font-weight: bold; color: #a5b4fc; }
-    .dev-banner .stub-tags { margin-left: auto; display: flex; gap: 6px; }
+    .dev-banner .stub-tags { margin-left: auto; display: flex; gap: 6px; align-items: center; }
     .dev-banner .stub-tag { background: rgba(255,255,255,0.1); border-radius: 3px; padding: 1px 6px; font-size: 11px; color: #fbbf24; }
+    .dev-banner .minimize-btn {
+      background: rgba(255,255,255,0.08); border: none; color: #a5b4fc; cursor: pointer;
+      font-size: 14px; width: 18px; height: 18px; border-radius: 4px;
+      display: flex; align-items: center; justify-content: center; padding: 0;
+      transition: background 0.15s;
+    }
+    .dev-banner .minimize-btn:hover { background: rgba(255,255,255,0.2); }
+    /* Minimized floating pill to restore banner */
+    .dev-banner-restore {
+      position: fixed; top: 8px; right: 8px; z-index: 99999;
+      background: #1a1a2e; color: #a5b4fc; border: 1px solid #6c63ff;
+      border-radius: 8px; padding: 4px 10px; font-size: 11px; font-family: monospace;
+      cursor: pointer; display: none; align-items: center; gap: 6px;
+      box-shadow: 0 2px 12px rgba(0,0,0,0.3); transition: all 0.15s ease;
+    }
+    .dev-banner-restore:hover { background: #2a2a4e; }
+    .dev-banner-restore .restore-dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; animation: pulse 2s ease-in-out infinite; }
+    .dev-banner-restore.visible { display: flex; }
+    /* Validation tag in topbar */
+    .dev-banner .validation-tag { position: relative; }
+    .dev-banner .validation-tag .vt-btn {
+      background: rgba(239,68,68,0.2); border: none; color: #fca5a5; border-radius: 3px;
+      padding: 1px 6px; font-size: 11px; cursor: pointer; font-family: monospace;
+      transition: background 0.15s;
+    }
+    .dev-banner .validation-tag .vt-btn:hover { background: rgba(239,68,68,0.35); }
+    .dev-banner .validation-tag .vt-btn.clean {
+      background: rgba(74,222,128,0.15); color: #86efac;
+    }
+    .dev-banner .validation-tag .vt-btn.clean:hover { background: rgba(74,222,128,0.25); }
+    .dev-banner .vt-dropdown {
+      position: absolute; top: calc(100% + 8px); right: 0; min-width: 400px;
+      background: #1e1b2e; border: 1px solid #3b3660; border-radius: 10px;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.4); display: none; overflow: hidden;
+      font-family: monospace; font-size: 12px;
+    }
+    .dev-banner .vt-dropdown.open { display: block; }
+    .dev-banner .vt-dropdown .vt-header {
+      padding: 8px 12px; background: #2a2550; border-bottom: 1px solid #3b3660;
+      font-weight: 600; color: #c4b5fd; display: flex; align-items: center; justify-content: space-between;
+    }
+    .dev-banner .vt-dropdown .vt-body { padding: 8px 12px; max-height: 240px; overflow-y: auto; }
+    .dev-banner .vt-dropdown .vt-error { color: #fca5a5; padding: 3px 0; }
+    .dev-banner .vt-dropdown .vt-warn { color: #fde68a; padding: 3px 0; }
 
     /* Pages mindmap overlay */
     .pages-overlay {
       position: fixed; inset: 0; z-index: 99990; background: rgba(10,10,20,0.92);
-      backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center;
-      font-family: var(--font-display);
+      backdrop-filter: blur(8px); display: none;
+      font-family: var(--font-display); overflow: hidden; cursor: grab;
     }
-    .pages-overlay.open { display: flex; }
+    .pages-overlay.open { display: block; }
+    .pages-overlay.grabbing { cursor: grabbing; }
     .pages-overlay .close-btn {
       position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.1);
       border: none; color: white; width: 32px; height: 32px; border-radius: 8px;
       cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center;
+      z-index: 10;
     }
     .pages-overlay .close-btn:hover { background: rgba(255,255,255,0.2); }
-    .mindmap-container { position: relative; padding: 40px; }
+    .pages-overlay .zoom-controls {
+      position: absolute; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 4px; z-index: 10;
+    }
+    .pages-overlay .zoom-btn {
+      width: 32px; height: 32px; border-radius: 8px; border: none;
+      background: rgba(255,255,255,0.1); color: white; font-size: 16px; cursor: pointer;
+      display: flex; align-items: center; justify-content: center; font-family: monospace;
+    }
+    .pages-overlay .zoom-btn:hover { background: rgba(255,255,255,0.2); }
+    .pages-overlay .zoom-level {
+      text-align: center; color: rgba(255,255,255,0.4); font-size: 10px; font-family: monospace;
+    }
+    .mindmap-container { position: absolute; top: 0; left: 0; transform-origin: 0 0; padding: 40px; }
     .mindmap-container svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
     .mindmap-nodes { position: relative; display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; align-items: flex-start; max-width: 900px; }
     .mindmap-node {
@@ -1005,24 +1081,7 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
       box-shadow: 0 2px 12px rgba(0,0,0,0.04);
     }
 
-    /* Validation banner */
-    .validation-banner {
-      position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999;
-      background: #7f1d1d; color: #fecaca; font-family: monospace; font-size: 12px;
-      padding: 10px 16px; max-height: 200px; overflow-y: auto;
-      border-top: 2px solid #ef4444;
-    }
-    .validation-banner .vb-header {
-      display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
-    }
-    .validation-banner .vb-header strong { color: #fca5a5; }
-    .validation-banner .vb-dismiss {
-      background: rgba(255,255,255,0.1); border: none; color: #fca5a5; border-radius: 4px;
-      padding: 2px 8px; cursor: pointer; font-size: 11px;
-    }
-    .validation-banner .vb-dismiss:hover { background: rgba(255,255,255,0.2); }
-    .validation-banner .vb-error { color: #fca5a5; }
-    .validation-banner .vb-warn { color: #fde68a; }
+    /* (validation banner moved into topbar dropdown) */
 
     /* Debug panel */
     .debug-panel {
@@ -1053,10 +1112,42 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
     .debug-panel pre { margin: 0; white-space: pre-wrap; word-break: break-all; color: #c7d2fe; line-height: 1.5; }
     .dev-banner .stub-tag.debug-btn { cursor: pointer; transition: all 0.15s ease; }
     .dev-banner .stub-tag.debug-btn:hover { background: rgba(255,255,255,0.2); color: #a5b4fc; }
+
+    /* Field validation error */
+    .cf-field-error .cf-input { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important; }
+    .cf-field-error .cf-choice[data-selected="false"] { border-color: #fca5a5 !important; }
+
+    /* Action button styles */
+    .cf-btn-secondary {
+      font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
+      border-radius: 14px; padding: 14px 28px; font-size: 16px; border: 2px solid;
+      cursor: pointer; transition: all 0.25s var(--ease-out-expo); background: transparent;
+    }
+    .cf-btn-secondary:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-1px); }
+    .cf-btn-ghost {
+      font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em;
+      border-radius: 14px; padding: 14px 28px; font-size: 16px; border: none;
+      cursor: pointer; transition: all 0.2s var(--ease-out-expo); background: transparent;
+    }
+    .cf-btn-ghost:hover { background: rgba(0,0,0,0.04); }
+
+    /* Sticky bottom bar */
+    .cf-sticky-bar {
+      position: fixed; bottom: 0; left: 0; right: 0; z-index: 80;
+      transition: transform 0.3s var(--ease-out-expo);
+    }
+    .cf-sticky-bar.hidden { transform: translateY(100%); }
+
+    /* Resume prompt */
+    .cf-resume-backdrop {
+      position: fixed; inset: 0; z-index: 99; background: rgba(0,0,0,0.2);
+      backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;
+    }
   </style>
 </head>
 <body>
-  <div class="dev-banner">
+  <div class="dev-banner" id="dev-banner">
+    <span class="drag-handle" id="banner-drag" title="Drag to reposition">\u283F</span>
     <span class="dot"></span>
     <span class="label">LOCAL DEV</span>
     <span class="slug">${schema.slug || "catalog"}</span>
@@ -1065,10 +1156,22 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
       <span class="stub-tag">Events: local</span>
       <span class="stub-tag clickable" id="pages-btn">Pages</span>
       <span class="stub-tag debug-btn" id="debug-btn">Debug</span>
+      <span class="validation-tag" id="validation-tag"></span>
+      <button class="minimize-btn" id="banner-minimize" title="Minimize toolbar">\u25B4</button>
     </span>
   </div>
+  <div class="dev-banner-restore" id="banner-restore">
+    <span class="restore-dot"></span>
+    <span>DEV</span>
+  </div>
   <div class="pages-overlay" id="pages-overlay">
     <button class="close-btn" id="pages-close">&times;</button>
+    <div class="zoom-controls">
+      <button class="zoom-btn" id="zoom-in">+</button>
+      <div class="zoom-level" id="zoom-level">100%</div>
+      <button class="zoom-btn" id="zoom-out">&minus;</button>
+      <button class="zoom-btn" id="zoom-fit" style="font-size:11px;margin-top:4px;">Fit</button>
+    </div>
     <div class="mindmap-container" id="mindmap-container"></div>
   </div>
   <div class="inspector-highlight" id="inspector-highlight" style="display:none"></div>
@@ -1079,7 +1182,6 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
     <div class="dp-header"><span>Debug Panel</span><button class="dp-close" id="debug-close">&times;</button></div>
     <div class="dp-body" id="debug-body"></div>
   </div>
-  <div class="validation-banner" id="validation-banner" style="display:none"></div>
 
   <script id="__catalog_data" type="application/json">${schemaJson}</script>
   <script id="__validation_data" type="application/json">${JSON.stringify(validation || { errors: [], warnings: [] })}</script>
@@ -1093,61 +1195,16 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
     const schema = JSON.parse(document.getElementById('__catalog_data').textContent);
     const themeColor = '${themeColor}';
 
-    // --- Visibility condition engine (ported from shared/engine/conditions.ts) ---
+    // --- 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 };
     })();
 
-    function resolveConditionValue(rule, formState, ctx) {
-      const source = rule.source || 'field';
-      if (source === 'field') return rule.field != null ? formState[rule.field] : undefined;
-      if (source === 'url_param') return rule.param != null ? ctx.url_params[rule.param] : undefined;
-      if (source === 'hint') return rule.param != null ? ctx.hints[rule.param] : undefined;
-      if (source === 'score') return 0;
-      if (source === 'video') return undefined;
-      return undefined;
-    }
-
-    function applyConditionOperator(op, actual, expected) {
-      switch (op) {
-        case 'equals': return String(actual ?? '') === String(expected ?? '');
-        case 'not_equals': return String(actual ?? '') !== String(expected ?? '');
-        case 'contains':
-          if (typeof actual === 'string') return actual.includes(String(expected));
-          if (Array.isArray(actual)) return actual.includes(expected);
-          return false;
-        case 'not_contains':
-          if (typeof actual === 'string') return !actual.includes(String(expected));
-          if (Array.isArray(actual)) return !actual.includes(expected);
-          return true;
-        case 'greater_than': return Number(actual) > Number(expected);
-        case 'greater_than_or_equal': return Number(actual) >= Number(expected);
-        case 'less_than': return Number(actual) < Number(expected);
-        case 'less_than_or_equal': return Number(actual) <= Number(expected);
-        case 'is_empty': return actual == null || actual === '' || (Array.isArray(actual) && actual.length === 0);
-        case 'is_not_empty': return !(actual == null || actual === '' || (Array.isArray(actual) && actual.length === 0));
-        case 'matches_regex':
-          try { const p = String(expected); if (p.length > 200) return false; return new RegExp(p).test(String(actual ?? '')); } catch { return false; }
-        case 'in':
-          if (Array.isArray(expected)) return expected.includes(actual);
-          if (typeof expected === 'string') return expected.split(',').map(s => s.trim()).includes(String(actual));
-          return false;
-        default: return false;
-      }
-    }
-
-    function evaluateConditionGroup(group, formState, ctx) {
-      if (!group || !group.rules) return true;
-      const evaluate = (item) => {
-        if (item.match && item.rules) return evaluateConditionGroup(item, formState, ctx);
-        const actual = resolveConditionValue(item, formState, ctx);
-        return applyConditionOperator(item.operator, actual, item.value);
-      };
-      return group.match === 'all' ? group.rules.every(evaluate) : group.rules.some(evaluate);
-    }
-
     // --- Markdown-ish text rendering ---
     function inlineMarkdown(text) {
       return text
@@ -1190,31 +1247,36 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
       return 'text-left';
     }
 
-    // --- Routing helpers ---
-    function getNextPageId(currentId, routing, formState) {
-      if (!routing || !routing.edges) return null;
-      const edges = routing.edges.filter(e => e.from === currentId);
-      // Sort by priority (lower = higher priority)
-      edges.sort((a, b) => (a.priority ?? 999) - (b.priority ?? 999));
-      for (const edge of edges) {
-        if (!edge.conditions || edge.conditions.length === 0) return edge.to;
-        const match = edge.conditions.every(cond => {
-          const val = formState[cond.field];
-          if (cond.operator === 'equals') return val === cond.value;
-          if (cond.operator === 'not_equals') return val !== cond.value;
-          if (cond.operator === 'contains') return typeof val === 'string' && val.includes(cond.value);
-          return true;
-        });
-        if (match) return edge.to;
+    // --- Variant resolution ---
+    function resolveComponentVariants(props, hints) {
+      const resolved = { ...props };
+      const variantKeys = Object.keys(props).filter(k => k.endsWith('__variants'));
+      for (const variantKey of variantKeys) {
+        const baseProp = variantKey.replace('__variants', '');
+        const variants = props[variantKey];
+        if (!variants || typeof variants !== 'object') continue;
+        let bestMatch = null;
+        for (const [conditionStr, value] of Object.entries(variants)) {
+          const conditions = conditionStr.split(',').map(c => c.trim());
+          let allMatch = true, score = 0;
+          for (const cond of conditions) {
+            const [hintKey, hintValue] = cond.split('=');
+            if (hints[hintKey] === hintValue) score++;
+            else { allMatch = false; break; }
+          }
+          if (allMatch && score > 0 && (!bestMatch || score > bestMatch.score)) {
+            bestMatch = { value, score };
+          }
+        }
+        if (bestMatch) resolved[baseProp] = bestMatch.value;
+        delete resolved[variantKey];
       }
-      // Fallback: default edge (no conditions)
-      const defaultEdge = edges.find(e => !e.conditions || e.conditions.length === 0);
-      return defaultEdge ? defaultEdge.to : null;
+      return resolved;
     }
 
     // --- Component Renderers ---
-    function RenderComponent({ comp, isCover, formState, onFieldChange }) {
-      const props = comp.props || {};
+    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 || {};
@@ -1274,11 +1336,7 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
               h('iframe', { src: embedUrl, className: 'absolute inset-0 w-full h-full', allow: 'autoplay; fullscreen; picture-in-picture', allowFullScreen: true })
             );
           }
-          return h('div', { className: 'w-full ' + compClass, style: compStyle },
-            h('div', { className: 'relative w-full overflow-hidden rounded-2xl shadow-lg' },
-              h('video', { src: props.hls_url || src, controls: true, playsInline: true, poster: props.poster, className: 'w-full' })
-            )
-          );
+          return h(VideoPlayer, { comp, isCover, compClass, compStyle });
         }
 
         case 'html':
@@ -1394,7 +1452,7 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
         case 'url':
         case 'number':
         case 'password':
-          return h(TextInput, { comp, type, formState, onFieldChange, isCover, compClass, compStyle });
+          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 },
@@ -1451,6 +1509,194 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
         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,
@@ -1477,7 +1723,7 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
       );
     }
 
-    function TextInput({ comp, type, formState, onFieldChange, isCover, compClass, compStyle }) {
+    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 },
@@ -1493,6 +1739,7 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
           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(); } },
         })
       );
     }
@@ -1610,6 +1857,226 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
       );
     }
 
+    // --- Additional input/display components ---
+    function AddressInput({ comp, formState, onFieldChange, isCover, compClass, compStyle }) {
+      const props = comp.props || {};
+      const addr = formState[comp.id] || {};
+      const up = (field, val) => onFieldChange(comp.id, { ...addr, [field]: val });
+      return h('div', { className: 'space-y-1.5 ' + compClass, style: compStyle },
+        props.label ? h('label', { className: 'block text-base font-medium ' + (isCover ? 'text-white' : 'text-gray-700') },
+          props.label, props.required ? h('span', { className: 'text-red-500 ml-1' }, '*') : null) : null,
+        h('div', { className: 'space-y-2' },
+          h('input', { type: 'text', className: 'cf-input', placeholder: 'Street address', value: addr.street || '', onChange: (e) => up('street', e.target.value) }),
+          h('div', { className: 'grid grid-cols-2 gap-2' },
+            h('input', { type: 'text', className: 'cf-input', placeholder: 'City', value: addr.city || '', onChange: (e) => up('city', e.target.value) }),
+            h('input', { type: 'text', className: 'cf-input', placeholder: 'State', value: addr.state || '', onChange: (e) => up('state', e.target.value) })
+          ),
+          h('div', { className: 'grid grid-cols-2 gap-2' },
+            h('input', { type: 'text', className: 'cf-input', placeholder: 'ZIP / Postal', value: addr.zip || '', onChange: (e) => up('zip', e.target.value) }),
+            h('input', { type: 'text', className: 'cf-input', placeholder: 'Country', value: addr.country || '', onChange: (e) => up('country', e.target.value) })
+          )
+        )
+      );
+    }
+
+    function FileUploadInput({ comp, formState, onFieldChange, isCover, compClass, compStyle }) {
+      const props = comp.props || {};
+      const fileName = formState[comp.id] || '';
+      const fileRef = React.useRef(null);
+      return h('div', { className: 'space-y-1.5 ' + compClass, style: compStyle },
+        props.label ? h('label', { className: 'block text-base font-medium ' + (isCover ? 'text-white' : 'text-gray-700') },
+          props.label, props.required ? h('span', { className: 'text-red-500 ml-1' }, '*') : null) : null,
+        h('div', { className: 'border-2 border-dashed border-gray-200 rounded-xl p-6 text-center' },
+          h('input', { type: 'file', ref: fileRef, className: 'hidden', accept: props.accept,
+            onChange: (e) => { const f = e.target.files?.[0]; if (f) onFieldChange(comp.id, f.name); } }),
+          fileName
+            ? h('div', { className: 'flex items-center justify-center gap-2' },
+                h('span', { className: 'text-sm text-gray-700' }, fileName),
+                h('button', { className: 'text-xs text-red-500 hover:text-red-700', onClick: () => onFieldChange(comp.id, '') }, 'Remove'))
+            : h('button', { className: 'text-sm font-medium', style: { color: themeColor }, onClick: () => fileRef.current?.click() }, props.button_text || 'Choose file'),
+          h('p', { className: 'text-xs text-gray-400 mt-2' }, 'Files are not uploaded in dev mode')
+        )
+      );
+    }
+
+    function SignatureInput({ comp, formState, onFieldChange, isCover, compClass, compStyle }) {
+      const props = comp.props || {};
+      const signed = !!formState[comp.id];
+      return h('div', { className: 'space-y-1.5 ' + compClass, style: compStyle },
+        props.label ? h('label', { className: 'block text-base font-medium ' + (isCover ? 'text-white' : 'text-gray-700') },
+          props.label, props.required ? h('span', { className: 'text-red-500 ml-1' }, '*') : null) : null,
+        h('div', { className: 'border rounded-xl p-4' },
+          signed
+            ? h('div', { className: 'flex items-center justify-between' },
+                h('span', { className: 'text-sm text-green-600 font-medium' }, '\\u2713 Signature captured'),
+                h('button', { className: 'text-xs text-gray-400 hover:text-gray-600', onClick: () => onFieldChange(comp.id, '') }, 'Clear'))
+            : h('button', {
+                className: 'w-full py-8 text-center text-sm text-gray-400 border-2 border-dashed rounded-lg hover:bg-gray-50',
+                onClick: () => onFieldChange(comp.id, 'signature_' + Date.now()),
+              }, 'Click to sign (canvas stubbed in dev)')
+        )
+      );
+    }
+
+    function TabsComponent({ comp, isCover, compClass, compStyle }) {
+      const props = comp.props || {};
+      const tabs = props.tabs || [];
+      const [activeTab, setActiveTab] = React.useState(0);
+      return h('div', { className: compClass, style: compStyle },
+        h('div', { className: 'flex border-b border-gray-200 mb-4' },
+          ...tabs.map((tab, i) => h('button', {
+            key: i, className: 'px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px',
+            style: i === activeTab ? { color: themeColor, borderColor: themeColor } : { color: '#9ca3af', borderColor: 'transparent' },
+            onClick: () => setActiveTab(i),
+          }, tab.label || tab.title || 'Tab ' + (i + 1)))
+        ),
+        tabs[activeTab] ? h('div', { className: 'text-sm text-gray-600', dangerouslySetInnerHTML: { __html: renderMarkdownish(tabs[activeTab].content || '') } }) : null
+      );
+    }
+
+    function CountdownComponent({ comp, compClass, compStyle }) {
+      const props = comp.props || {};
+      const [timeLeft, setTimeLeft] = React.useState({});
+      React.useEffect(() => {
+        const target = new Date(props.target_date).getTime();
+        const update = () => {
+          const diff = Math.max(0, target - Date.now());
+          setTimeLeft({ days: Math.floor(diff / 86400000), hours: Math.floor((diff % 86400000) / 3600000), minutes: Math.floor((diff % 3600000) / 60000), seconds: Math.floor((diff % 60000) / 1000) });
+        };
+        update();
+        const iv = setInterval(update, 1000);
+        return () => clearInterval(iv);
+      }, [props.target_date]);
+      return h('div', { className: 'flex items-center justify-center gap-4 ' + compClass, style: compStyle },
+        ...['days', 'hours', 'minutes', 'seconds'].map(unit =>
+          h('div', { key: unit, className: 'text-center' },
+            h('div', { className: 'text-3xl font-bold', style: { color: themeColor, fontFamily: 'var(--font-display)' } }, String(timeLeft[unit] ?? 0).padStart(2, '0')),
+            h('div', { className: 'text-xs text-gray-400 uppercase tracking-wider mt-1' }, unit)
+          )
+        )
+      );
+    }
+
+    function ModalComponent({ comp, isCover, compClass, compStyle }) {
+      const props = comp.props || {};
+      const [open, setOpen] = React.useState(false);
+      return h(React.Fragment, null,
+        h('button', { className: 'cf-btn-primary text-white', style: { backgroundColor: themeColor, ...compStyle }, onClick: () => setOpen(true) },
+          props.trigger_label || props.label || 'Open'),
+        open ? h('div', { className: 'fixed inset-0 z-[99] flex items-center justify-center' },
+          h('div', { className: 'absolute inset-0 bg-black/40 backdrop-blur-sm', onClick: () => setOpen(false) }),
+          h('div', { className: 'relative bg-white rounded-2xl max-w-lg w-full mx-4 p-6 shadow-2xl max-h-[80vh] overflow-y-auto' },
+            h('div', { className: 'flex justify-between items-center mb-4' },
+              props.title ? h('h3', { className: 'text-lg font-bold text-gray-900' }, props.title) : null,
+              h('button', { className: 'text-gray-400 hover:text-gray-600 text-xl', onClick: () => setOpen(false) }, '\\u2715')
+            ),
+            h('div', { className: 'text-sm text-gray-600', dangerouslySetInnerHTML: { __html: renderMarkdownish(props.content || props.body || '') } })
+          )
+        ) : null
+      );
+    }
+
+    function ActionButton({ action, themeColor, onAction }) {
+      const st = action.style || 'primary';
+      const hasSide = !!action.side_statement;
+      const btnProps = st === 'primary'
+        ? { className: 'cf-btn-primary text-white', style: { backgroundColor: themeColor } }
+        : st === 'secondary'
+          ? { className: 'cf-btn-secondary', style: { borderColor: themeColor, color: themeColor } }
+          : st === 'danger'
+            ? { className: 'cf-btn-primary text-white', style: { backgroundColor: '#ef4444' } }
+            : { className: 'cf-btn-ghost', style: { color: themeColor + 'cc' } };
+      const btn = h('button', {
+        ...btnProps,
+        className: btnProps.className + (hasSide ? ' flex-1' : ' w-full') + ' flex items-center justify-center',
+        onClick: () => onAction(action),
+      },
+        action.icon ? h('span', { className: 'mr-2' }, action.icon) : null,
+        action.label
+      );
+      return h('div', { className: 'w-full' },
+        hasSide ? h('div', { className: 'flex items-center gap-4' }, btn, h('span', { className: 'text-sm font-medium text-gray-600 shrink-0' }, action.side_statement)) : btn,
+        action.reassurance ? h('p', { className: 'text-xs text-gray-400 mt-1.5 text-center' }, action.reassurance) : null
+      );
+    }
+
+    function VideoPlayer({ comp, isCover, compClass, compStyle }) {
+      const props = comp.props || {};
+      const videoRef = React.useRef(null);
+      React.useEffect(() => {
+        const video = videoRef.current;
+        if (!video) return;
+        const handler = () => {
+          const pct = video.duration ? Math.round((video.currentTime / video.duration) * 100) : 0;
+          window.__videoWatchState = window.__videoWatchState || {};
+          window.__videoWatchState[comp.id] = { watch_percent: pct, playing: !video.paused, duration: video.duration };
+        };
+        video.addEventListener('timeupdate', handler);
+        return () => video.removeEventListener('timeupdate', handler);
+      }, []);
+      return h('div', { className: 'w-full ' + compClass, style: compStyle },
+        h('div', { className: 'relative w-full overflow-hidden rounded-2xl shadow-lg' },
+          h('video', { ref: videoRef, src: props.hls_url || props.src, controls: true, playsInline: true, poster: props.poster, className: 'w-full' })
+        )
+      );
+    }
+
+    function StickyBottomBar({ config, page, formState, cartItems, themeColor, onNext, onAction, onBack, historyLen }) {
+      const [visible, setVisible] = React.useState(!config.delay_ms);
+      const [scrollDir, setScrollDir] = React.useState('down');
+      React.useEffect(() => {
+        if (!config.delay_ms) return;
+        const timer = setTimeout(() => setVisible(true), config.delay_ms);
+        return () => clearTimeout(timer);
+      }, [config.delay_ms]);
+      React.useEffect(() => {
+        if (config.scroll_behavior !== 'show_on_up') return;
+        let lastY = window.scrollY;
+        const handler = () => { const dir = window.scrollY > lastY ? 'down' : 'up'; setScrollDir(dir); lastY = window.scrollY; };
+        window.addEventListener('scroll', handler, { passive: true });
+        return () => window.removeEventListener('scroll', handler);
+      }, []);
+      const show = visible && (config.scroll_behavior !== 'show_on_up' || scrollDir === 'up');
+      const interpolate = (text) => text ? text.replace(/\\{\\{(\\w+)\\}\\}/g, (_, id) => formState[id] ?? '') : text;
+      const bgStyles = {
+        solid: { backgroundColor: 'white', borderTop: '1px solid #e5e7eb' },
+        glass: { backgroundColor: 'rgba(255,255,255,0.85)', backdropFilter: 'blur(16px)', borderTop: '1px solid rgba(0,0,0,0.05)' },
+        glass_dark: { backgroundColor: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(16px)', color: 'white' },
+        gradient: { background: 'linear-gradient(135deg, ' + themeColor + ' 0%, ' + themeColor + 'dd 100%)', color: 'white' },
+      };
+      const handlePrimary = () => {
+        const dispatch = config.primary_action?.dispatch;
+        if (!dispatch || dispatch === 'next') { onNext(); return; }
+        if (dispatch.startsWith('action:')) {
+          const actionId = dispatch.slice(7);
+          const action = page.actions?.find(a => a.id === actionId);
+          if (action) onAction(action); else onNext();
+        } else { onNext(); }
+      };
+      return h('div', {
+        className: 'cf-sticky-bar' + (show ? '' : ' hidden'),
+        style: bgStyles[config.style || 'solid'] || bgStyles.solid,
+      },
+        h('div', { className: 'max-w-2xl mx-auto px-6 py-4 flex items-center justify-between gap-4' },
+          config.show_back && historyLen > 0
+            ? h('button', { className: 'text-sm text-gray-500 hover:text-gray-700', onClick: onBack }, '\\u2190 Back') : null,
+          h('div', { className: 'flex-1 text-center' },
+            config.subtitle ? h('p', { className: 'text-xs opacity-60 mb-0.5' }, interpolate(config.subtitle)) : null
+          ),
+          h('div', { className: 'flex items-center gap-3' },
+            config.cart_badge && cartItems.length > 0
+              ? h('span', { className: 'bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center' }, cartItems.length) : null,
+            h('button', {
+              className: 'cf-btn-primary text-white text-sm',
+              style: { backgroundColor: config.style === 'gradient' ? 'rgba(255,255,255,0.9)' : themeColor, color: config.style === 'gradient' ? themeColor : 'white' },
+              disabled: config.disabled,
+              onClick: handlePrimary,
+            }, interpolate(config.primary_action?.label || page.submit_label || 'Continue'))
+          )
+        )
+      );
+    }
+
     // --- Dev Config ---
     const devConfig = JSON.parse(document.getElementById('__dev_config').textContent);
 
@@ -1711,9 +2178,11 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
 
     function CartButton({ itemCount, onClick }) {
       if (itemCount === 0) return null;
+      const cartPos = (schema.settings?.cart?.position) || 'bottom-right';
+      const posClass = { 'bottom-right': 'bottom-6 right-6', 'bottom-left': 'bottom-6 left-6', 'top-right': 'top-20 right-6', 'top-left': 'top-20 left-6' }[cartPos] || 'bottom-6 right-6';
       return h('button', {
         onClick,
-        className: 'fixed bottom-6 right-6 z-[90] flex items-center gap-2 rounded-full px-5 py-3.5 text-white font-semibold shadow-xl transition-all duration-300 hover:scale-105 hover:shadow-2xl active:scale-95',
+        className: 'fixed z-[90] flex items-center gap-2 rounded-full px-5 py-3.5 text-white font-semibold shadow-xl transition-all duration-300 hover:scale-105 hover:shadow-2xl active:scale-95 ' + posClass,
         style: { backgroundColor: themeColor, fontFamily: 'var(--font-display)' },
       },
         h('svg', { className: 'w-5 h-5', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
@@ -1752,7 +2221,7 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
                 )
               ),
               h('div', null,
-                h('h2', { className: 'text-lg font-bold text-gray-900' }, 'Your Cart'),
+                h('h2', { className: 'text-lg font-bold text-gray-900' }, schema.settings?.cart?.title || 'Your Cart'),
                 h('p', { className: 'text-xs text-gray-400' }, items.length + ' ' + (items.length === 1 ? 'item' : 'items') + ' selected')
               )
             ),
@@ -1872,15 +2341,82 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
     }
 
     // --- Main App ---
-    function CatalogPreview({ catalog }) {
+    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 [currentPageId, setCurrentPageId] = React.useState(routing.entry || pageKeys[0] || null);
-      const [formState, setFormState] = React.useState({});
+      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) => {
@@ -1896,6 +2432,11 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
             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]);
@@ -1927,11 +2468,18 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
         }
       }, [formState, pages, cartItems, addToCart, removeFromCart]);
 
-      // Expose navigation for mindmap + emit page_view
+      // 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
@@ -1941,6 +2489,103 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
         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 = (() => {
@@ -1948,28 +2593,129 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
         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 });
-      }, [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(() => {
-        // Check if page has an offer \u2014 treat "Next" as an accept action
+        // Validate before advancing
+        if (!runValidation()) return;
+        // Check video watch requirements
         const currentPage = pages[currentPageId];
-        if (currentPage?.offer) {
-          const acceptValue = currentPage.offer.accept_value || 'accept';
-          // If there's no accept_field, the CTA button itself is the accept trigger
-          if (!currentPage.offer.accept_field) {
-            addToCart(currentPageId);
+        if (currentPage) {
+          for (const comp of currentPage.components || []) {
+            if (comp.type === 'video' && comp.props?.require_watch_percent) {
+              const vs = window.__videoWatchState?.[comp.id];
+              if (!vs || vs.watch_percent < comp.props.require_watch_percent) {
+                const el = document.querySelector('[data-component-id="' + comp.id + '"]');
+                if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                alert('Please watch at least ' + comp.props.require_watch_percent + '% of the video before continuing.');
+                return;
+              }
+            }
           }
         }
-        const nextId = getNextPageId(currentPageId, routing, formState);
-        if (nextId && pages[nextId]) {
-          setHistory(prev => [...prev, currentPageId]);
-          setCurrentPageId(nextId);
-          window.scrollTo({ top: 0, behavior: 'smooth' });
+        // Check if page has an offer \u2014 treat "Next" as an accept action
+        if (currentPage?.offer) {
+          if (!currentPage.offer.accept_field) addToCart(currentPageId);
+        }
+        // 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); } }
         }
-      }, [currentPageId, routing, formState, pages, addToCart]);
+        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) {
@@ -1979,6 +2725,174 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
           window.scrollTo({ top: 0, behavior: 'smooth' });
         }
       }, [history]);
+      const handleBackRef = React.useRef(handleBack);
+      handleBackRef.current = handleBack;
+
+      // --- Page Actions ---
+      const handleAction = React.useCallback((action) => {
+        devEvents.emit('action_click', { page_id: currentPageId, action_id: action.id });
+        if (action.redirect_url) { window.open(action.redirect_url, '_blank'); return; }
+        if (!runValidation()) return;
+        const currentPage = pages[currentPageId];
+        const currentOffer = currentPage?.offer;
+        if (currentOffer) {
+          const acceptValue = currentOffer.accept_value || 'accept';
+          if (action.id === acceptValue) addToCart(currentPageId);
+        }
+        const actionKey = '__action_' + currentPageId;
+        const newFormState = { ...formState, [actionKey]: action.id };
+        setFormState(newFormState);
+        const nextPageId = getNextPage(routing, currentPageId, newFormState, devContext);
+        navigateTo(nextPageId);
+      }, [currentPageId, routing, formState, pages, addToCart, navigateTo, runValidation]);
+
+      // --- Resume prompt ---
+      if (showResumeModal) {
+        return h('div', { className: 'cf-resume-backdrop' },
+          h('div', { className: 'bg-white rounded-2xl max-w-sm w-full mx-4 p-8 shadow-2xl text-center' },
+            h('h2', { className: 'text-xl font-bold text-gray-900 mb-2', style: { fontFamily: 'var(--font-display)' } }, 'Welcome back!'),
+            h('p', { className: 'text-gray-500 mb-6 text-sm' }, 'Pick up where you left off?'),
+            h('div', { className: 'space-y-3' },
+              h('button', {
+                className: 'cf-btn-primary w-full text-white', style: { backgroundColor: themeColor },
+                onClick: () => {
+                  if (savedSession) {
+                    setFormState(savedSession.formState || {});
+                    setCurrentPageId(savedSession.currentPageId);
+                    setHistory(savedSession.history || []);
+                    window.history.replaceState({ pageId: savedSession.currentPageId, history: savedSession.history || [] }, '');
+                  }
+                  setShowResumeModal(false);
+                },
+              }, 'Resume'),
+              h('button', {
+                className: 'w-full px-4 py-2 text-sm text-gray-500 hover:text-gray-700 transition-colors',
+                onClick: () => { setShowResumeModal(false); try { localStorage.removeItem(saveKey); } catch {} },
+              }, 'Start Over')
+            )
+          )
+        );
+      }
+
+      // --- Completion screen ---
+      if (submitted) {
+        const completionSettings = catalog.settings?.completion;
+        return h('div', { className: 'min-h-screen flex items-center justify-center', style: { background: 'linear-gradient(180deg, #f8f9fc 0%, #f0f2f7 100%)' } },
+          h('div', { className: 'max-w-lg mx-auto text-center px-6 py-20 page-enter-active' },
+            h('div', { className: 'w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center', style: { backgroundColor: themeColor + '15' } },
+              h('svg', { className: 'w-10 h-10', style: { color: themeColor }, fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
+                h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z' })
+              )
+            ),
+            h('h1', { className: 'text-3xl font-bold text-gray-900 mb-3', style: { fontFamily: 'var(--font-display)' } },
+              completionSettings?.title || 'Thank You!'
+            ),
+            h('p', { className: 'text-gray-500 text-lg mb-8' },
+              completionSettings?.message || 'Your submission has been received.'
+            ),
+            completionSettings?.redirect_url ? h('a', {
+              href: completionSettings.redirect_url,
+              className: 'inline-flex items-center gap-2 px-6 py-3 rounded-xl text-white font-semibold transition-all hover:scale-[1.02]',
+              style: { backgroundColor: themeColor },
+            }, completionSettings.redirect_label || 'Continue') : null,
+            h('div', { className: 'mt-6' },
+              h('button', {
+                className: 'text-sm text-gray-400 hover:text-gray-600 transition-colors',
+                onClick: () => { setSubmitted(false); setCurrentPageId(routing.entry || pageKeys[0]); setHistory([]); setFormState({}); setCartItems([]); try { localStorage.removeItem(saveKey); } catch {} },
+              }, 'Start Over')
+            )
+          )
+        );
+      }
+
+      // --- Checkout screen ---
+      if (showCheckout) {
+        const checkoutSettings = catalog.settings?.checkout || {};
+        const handleCheckoutBack = () => { setShowCheckout(false); };
+        const handleCheckoutContinue = () => {
+          setShowCheckout(false);
+          setSubmitted(true);
+          devEvents.emit('checkout_skip', { page_id: currentPageId });
+        };
+
+        return h('div', { className: 'min-h-screen', style: { background: 'linear-gradient(180deg, #f8f9fc 0%, #f0f2f7 100%)', fontFamily: 'var(--font-display)' } },
+          // Header
+          h('div', { className: 'fixed top-[28px] left-0 right-0 z-50 bg-white/80 backdrop-blur-xl border-b border-gray-200/60' },
+            h('div', { className: 'max-w-5xl mx-auto flex items-center justify-between px-6 py-3' },
+              h('button', { onClick: handleCheckoutBack, className: 'flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-800 transition-colors' },
+                h('svg', { className: 'w-4 h-4', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
+                  h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M15.75 19.5L8.25 12l7.5-7.5' })
+                ),
+                'Back'
+              ),
+              h('div', { className: 'flex items-center gap-2' },
+                h('svg', { className: 'w-4 h-4 text-green-500', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
+                  h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z' })
+                ),
+                h('span', { className: 'text-xs font-medium text-gray-400' }, 'Secure Checkout')
+              )
+            )
+          ),
+          h('div', { className: 'max-w-5xl mx-auto px-6 pt-24 pb-12' },
+            h('div', { className: 'text-center mb-10' },
+              h('h1', { className: 'text-3xl sm:text-4xl font-bold text-gray-900', style: { letterSpacing: '-0.025em' } },
+                checkoutSettings.title || 'Complete Your Order'
+              )
+            ),
+            h('div', { className: 'grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start' },
+              // Order summary
+              h('div', { className: 'lg:col-span-7' },
+                h('div', { className: 'bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden' },
+                  h('div', { className: 'px-6 py-4 border-b border-gray-50' },
+                    h('h2', { className: 'text-sm font-bold text-gray-900 uppercase tracking-wide' }, 'Order Summary')
+                  ),
+                  h('div', { className: 'divide-y divide-gray-50' },
+                    cartItems.length === 0
+                      ? h('div', { className: 'flex items-center gap-5 px-6 py-5' },
+                          h('div', { className: 'flex-1 min-w-0' },
+                            h('h3', { className: 'text-base font-semibold text-gray-900' }, 'Complete Registration'),
+                            h('p', { className: 'text-sm text-gray-400 mt-0.5' }, 'No offers selected \u2014 continue for free')
+                          ),
+                          h('p', { className: 'text-base font-bold', style: { color: themeColor } }, '$0')
+                        )
+                      : cartItems.map(item => h('div', { key: item.offer_id, className: 'flex items-center gap-5 px-6 py-5' },
+                          item.image ? h('img', { src: item.image, alt: item.title, className: 'w-16 h-16 rounded-xl object-cover flex-shrink-0 border border-gray-100' }) : null,
+                          h('div', { className: 'flex-1 min-w-0' },
+                            h('h3', { className: 'text-base font-semibold text-gray-900' }, item.title),
+                            item.price_subtext ? h('p', { className: 'text-sm text-gray-400 mt-0.5' }, item.price_subtext) : null
+                          ),
+                          item.price_display ? h('p', { className: 'text-base font-bold', style: { color: themeColor } }, item.price_display) : null,
+                          h('button', { onClick: () => removeFromCart(item.offer_id), className: 'w-8 h-8 flex-shrink-0 flex items-center justify-center rounded-lg text-gray-400 hover:text-red-500 hover:bg-red-50 transition-all' },
+                            h('svg', { className: 'w-4 h-4', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 },
+                              h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6 18L18 6M6 6l12 12' })
+                            )
+                          )
+                        ))
+                  )
+                )
+              ),
+              // Payment action
+              h('div', { className: 'lg:col-span-5' },
+                h('div', { className: 'lg:sticky lg:top-20 space-y-5' },
+                  h('div', { className: 'bg-white rounded-2xl border border-gray-100 shadow-sm p-7 space-y-6' },
+                    h('div', { className: 'text-sm text-gray-500' },
+                      cartItems.length + ' ' + (cartItems.length === 1 ? 'item' : 'items')
+                    ),
+                    h(CartCheckoutButton, { items: cartItems, themeColor }),
+                    h('button', {
+                      onClick: handleCheckoutContinue,
+                      className: 'w-full text-center text-sm text-gray-400 hover:text-gray-600 font-medium transition-colors py-1',
+                    }, 'Continue without paying'),
+                    h('div', { className: 'flex items-center justify-center gap-3 pt-1' },
+                      h('span', { className: 'text-[10px] text-gray-400 font-medium' }, 'Powered by Stripe')
+                    )
+                  )
+                )
+              )
+            )
+          )
+        );
+      }
 
       if (!page) {
         return h('div', { className: 'min-h-screen flex items-center justify-center bg-gray-50' },
@@ -1988,14 +2902,21 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
 
       const components = (page.components || []).filter(c => {
         if (c.hidden || c.props?.hidden) return false;
-        if (c.visibility) return evaluateConditionGroup(c.visibility, formState, devContext);
+        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,
-        h(CartButton, { itemCount: cartItems.length, onClick: toggleCart }),
+        !cartSettings.hide_button ? h(CartButton, { itemCount: cartItems.length, onClick: toggleCart }) : null,
         h(CartDrawer, { items: cartItems, isOpen: cartOpen, onToggle: toggleCart, onRemove: removeFromCart })
       );
 
@@ -2013,17 +2934,32 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
             h('div', { className: 'cf-cover-overlay absolute inset-0' }),
             h('div', { className: 'cf-cover-content relative max-w-2xl mx-auto px-6 py-20 text-center text-white' },
               h('div', { className: 'page-enter-active space-y-7 flex flex-col items-stretch text-center' },
-                ...components.map((comp, i) => h('div', { key: comp.id || i, 'data-component-id': comp.id, 'data-component-type': comp.type },
-                  h(RenderComponent, { comp, isCover: true, formState, onFieldChange })
-                )),
-                // CTA button
-                h('div', { className: 'mt-8' },
-                  h('button', {
-                    className: 'cf-btn-primary w-full py-4 text-lg',
-                    style: { backgroundColor: themeColor },
-                    onClick: handleNext,
-                  }, page.submit_label || (isLastPage ? 'Submit' : 'Get Started'))
-                )
+                ...components.map((comp, i) => {
+                  if (comp.prefill_mode === 'readonly' && formState[comp.id] != null && formState[comp.id] !== '') {
+                    return h('div', { key: comp.id || i, 'data-component-id': comp.id, 'data-component-type': comp.type, className: 'space-y-1' },
+                      comp.props?.label ? h('label', { className: 'block text-base font-medium text-white/80' }, comp.props.label) : null,
+                      h('div', { className: 'px-4 py-3 bg-white/10 rounded-xl text-white text-sm font-medium border border-white/20' }, String(formState[comp.id]))
+                    );
+                  }
+                  const fieldError = validationErrors.find(e => e.componentId === comp.id);
+                  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'))
+                    )
               )
             )
           )
@@ -2061,26 +2997,50 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
           h('div', { className: 'max-w-2xl mx-auto px-6 pb-8', style: { paddingTop: topBarEnabled ? '100px' : '60px' } },
             page.description ? h('p', { className: 'text-sm text-gray-400 mb-8 text-center font-medium tracking-wide', style: { fontFamily: 'var(--font-display)' } }, page.description) : null,
             h('div', { className: 'page-enter-active space-y-5' },
-              ...components.map((comp, i) => h('div', { key: comp.id || i, 'data-component-id': comp.id, 'data-component-type': comp.type },
-                h(RenderComponent, { comp, isCover: false, formState, onFieldChange })
-              )),
-              // Navigation button
-              !page.hide_navigation ? h('div', { className: 'mt-8' },
-                h('button', {
-                  className: 'cf-btn-primary inline-flex items-center gap-2 text-base',
-                  style: { backgroundColor: themeColor },
-                  onClick: handleNext,
-                },
-                  page.submit_label || (isLastPage ? 'Submit' : 'Continue'),
-                  !isLastPage ? h('svg', { className: 'w-4 h-4', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2.5 },
-                    h('path', { strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3' })
-                  ) : null
-                ),
-                page.submit_reassurance ? h('p', { className: 'text-xs text-gray-400 mt-1.5' }, page.submit_reassurance) : null,
-              ) : null,
+              ...components.map((comp, i) => {
+                if (comp.prefill_mode === 'readonly' && formState[comp.id] != null && formState[comp.id] !== '') {
+                  return h('div', { key: comp.id || i, 'data-component-id': comp.id, 'data-component-type': comp.type, className: 'space-y-1' },
+                    comp.props?.label ? h('label', { className: 'block text-base font-medium text-gray-700' }, comp.props.label) : null,
+                    h('div', { className: 'px-4 py-3 bg-gray-50 rounded-xl text-gray-600 text-sm font-medium border border-gray-100' }, String(formState[comp.id]))
+                  );
+                }
+                const fieldError = validationErrors.find(e => e.componentId === comp.id);
+                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, onBack: handleBack,
+                historyLen: history.length,
+              })
+            : null
         )
       );
     }
@@ -2129,17 +3089,113 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
       const overlay = document.getElementById('pages-overlay');
       const closeBtn = document.getElementById('pages-close');
       const container = document.getElementById('mindmap-container');
+      const zoomInBtn = document.getElementById('zoom-in');
+      const zoomOutBtn = document.getElementById('zoom-out');
+      const zoomFitBtn = document.getElementById('zoom-fit');
+      const zoomLevelEl = document.getElementById('zoom-level');
       let currentPageRef = { id: schema.routing?.entry || Object.keys(schema.pages || {})[0] };
 
+      // Pan & zoom state
+      let scale = 1, panX = 0, panY = 0;
+      let isDragging = false, dragStartX = 0, dragStartY = 0, dragStartPanX = 0, dragStartPanY = 0;
+      let hasDragged = false;
+      const MIN_SCALE = 0.15, MAX_SCALE = 3;
+
+      function applyTransform() {
+        container.style.transform = 'translate(' + panX + 'px, ' + panY + 'px) scale(' + scale + ')';
+        zoomLevelEl.textContent = Math.round(scale * 100) + '%';
+      }
+
+      function fitToView() {
+        const overlayRect = overlay.getBoundingClientRect();
+        // Temporarily reset transform to measure natural size
+        container.style.transform = 'none';
+        requestAnimationFrame(() => {
+          const contentRect = container.getBoundingClientRect();
+          const padW = 80, padH = 80;
+          const scaleX = (overlayRect.width - padW) / contentRect.width;
+          const scaleY = (overlayRect.height - padH) / contentRect.height;
+          scale = Math.min(scaleX, scaleY, 1.5);
+          scale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale));
+          panX = (overlayRect.width - contentRect.width * scale) / 2;
+          panY = (overlayRect.height - contentRect.height * scale) / 2;
+          applyTransform();
+        });
+      }
+
       // Expose setter for CatalogPreview to update current page
       window.__devSetCurrentPage = (id) => { currentPageRef.id = id; };
 
       btn.addEventListener('click', () => {
         overlay.classList.add('open');
         renderMindmap();
+        requestAnimationFrame(() => fitToView());
       });
       closeBtn.addEventListener('click', () => overlay.classList.remove('open'));
-      overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.classList.remove('open'); });
+      document.addEventListener('keydown', (e) => { if (e.key === 'Escape') overlay.classList.remove('open'); });
+
+      // Wheel zoom
+      overlay.addEventListener('wheel', (e) => {
+        e.preventDefault();
+        const rect = overlay.getBoundingClientRect();
+        const mouseX = e.clientX - rect.left;
+        const mouseY = e.clientY - rect.top;
+        const delta = e.deltaY > 0 ? 0.9 : 1.1;
+        const newScale = Math.max(MIN_SCALE, Math.min(MAX_SCALE, scale * delta));
+        // Zoom toward cursor
+        panX = mouseX - (mouseX - panX) * (newScale / scale);
+        panY = mouseY - (mouseY - panY) * (newScale / scale);
+        scale = newScale;
+        applyTransform();
+      }, { passive: false });
+
+      // Pan via drag
+      overlay.addEventListener('mousedown', (e) => {
+        if (e.target.closest('.close-btn, .zoom-controls')) return;
+        isDragging = true;
+        hasDragged = false;
+        dragStartX = e.clientX;
+        dragStartY = e.clientY;
+        dragStartPanX = panX;
+        dragStartPanY = panY;
+        overlay.classList.add('grabbing');
+      });
+      window.addEventListener('mousemove', (e) => {
+        if (!isDragging) return;
+        const dx = e.clientX - dragStartX;
+        const dy = e.clientY - dragStartY;
+        if (Math.abs(dx) > 3 || Math.abs(dy) > 3) hasDragged = true;
+        panX = dragStartPanX + dx;
+        panY = dragStartPanY + dy;
+        applyTransform();
+      });
+      window.addEventListener('mouseup', () => {
+        isDragging = false;
+        overlay.classList.remove('grabbing');
+      });
+
+      // Close only via close button (not background click \u2014 allows free panning)
+
+      // Zoom buttons
+      zoomInBtn.addEventListener('click', () => {
+        const rect = overlay.getBoundingClientRect();
+        const cx = rect.width / 2, cy = rect.height / 2;
+        const newScale = Math.min(MAX_SCALE, scale * 1.25);
+        panX = cx - (cx - panX) * (newScale / scale);
+        panY = cy - (cy - panY) * (newScale / scale);
+        scale = newScale;
+        applyTransform();
+      });
+      zoomOutBtn.addEventListener('click', () => {
+        const rect = overlay.getBoundingClientRect();
+        const cx = rect.width / 2, cy = rect.height / 2;
+        const newScale = Math.max(MIN_SCALE, scale * 0.8);
+        panX = cx - (cx - panX) * (newScale / scale);
+        panY = cy - (cy - panY) * (newScale / scale);
+        scale = newScale;
+        applyTransform();
+      });
+      zoomFitBtn.addEventListener('click', () => fitToView());
 
       function renderMindmap() {
         const pages = schema.pages || {};
@@ -2248,9 +3304,11 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
           container.insertBefore(svgEl, container.firstChild);
         });
 
-        // Click nodes to navigate
+        // Click nodes to navigate (ignore if user just dragged)
         container.querySelectorAll('[data-node-id]').forEach(el => {
-          el.addEventListener('click', () => {
+          el.addEventListener('click', (e) => {
+            if (hasDragged) return;
+            e.stopPropagation();
             const id = el.dataset.nodeId;
             window.__devNavigateTo && window.__devNavigateTo(id);
             overlay.classList.remove('open');
@@ -2341,19 +3399,78 @@ function buildPreviewHtml(schema, port, validation, devConfig) {
       }, true);
     })();
 
-    // --- Validation banner ---
-    (function initValidationBanner() {
-      const banner = document.getElementById('validation-banner');
+    // --- 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 || [];
-      if (errors.length === 0 && warnings.length === 0) return;
-      let html = '<div class="vb-header"><strong>' + errors.length + ' error(s), ' + warnings.length + ' warning(s)</strong><button class="vb-dismiss" id="vb-dismiss">Dismiss</button></div>';
-      for (const e of errors) html += '<div class="vb-error">ERROR: ' + e + '</div>';
-      for (const w of warnings) html += '<div class="vb-warn">WARN: ' + w + '</div>';
-      banner.innerHTML = html;
-      banner.style.display = 'block';
-      document.getElementById('vb-dismiss').addEventListener('click', () => { banner.style.display = 'none'; });
+      const total = errors.length + warnings.length;
+      const cleanClass = total === 0 ? ' clean' : '';
+      const label = total === 0 ? '\u2713 Valid' : errors.length + ' error' + (errors.length !== 1 ? 's' : '') + ', ' + warnings.length + ' warn';
+      let html = '<button class="vt-btn' + cleanClass + '" id="vt-toggle">' + label + '</button>';
+      if (total > 0) {
+        html += '<div class="vt-dropdown" id="vt-dropdown">';
+        html += '<div class="vt-header"><span>' + errors.length + ' error(s), ' + warnings.length + ' warning(s)</span></div>';
+        html += '<div class="vt-body">';
+        for (const e of errors) html += '<div class="vt-error">ERROR: ' + e + '</div>';
+        for (const w of warnings) html += '<div class="vt-warn">WARN: ' + w + '</div>';
+        html += '</div></div>';
+      }
+      tag.innerHTML = html;
+      if (total > 0) {
+        const toggleBtn = document.getElementById('vt-toggle');
+        const dropdown = document.getElementById('vt-dropdown');
+        toggleBtn.addEventListener('click', (e) => { e.stopPropagation(); dropdown.classList.toggle('open'); });
+        document.addEventListener('click', (e) => { if (!tag.contains(e.target)) dropdown.classList.remove('open'); });
+      }
+    })();
+
+    // --- Banner minimize / restore ---
+    (function initBannerMinimize() {
+      const banner = document.getElementById('dev-banner');
+      const minimizeBtn = document.getElementById('banner-minimize');
+      const restoreBtn = document.getElementById('banner-restore');
+      minimizeBtn.addEventListener('click', () => {
+        banner.classList.add('minimized');
+        restoreBtn.classList.add('visible');
+      });
+      restoreBtn.addEventListener('click', () => {
+        banner.classList.remove('minimized');
+        restoreBtn.classList.remove('visible');
+      });
+    })();
+
+    // --- Banner drag to reposition ---
+    (function initBannerDrag() {
+      const banner = document.getElementById('dev-banner');
+      const handle = document.getElementById('banner-drag');
+      let isDragging = false, startX = 0, startY = 0, origLeft = 0, origTop = 0;
+
+      handle.addEventListener('mousedown', (e) => {
+        e.preventDefault();
+        isDragging = true;
+        const rect = banner.getBoundingClientRect();
+        startX = e.clientX; startY = e.clientY;
+        origLeft = rect.left; origTop = rect.top;
+        // Switch to positioned mode
+        banner.style.left = rect.left + 'px';
+        banner.style.top = rect.top + 'px';
+        banner.style.right = 'auto';
+        banner.style.width = rect.width + 'px';
+        handle.style.cursor = 'grabbing';
+      });
+      window.addEventListener('mousemove', (e) => {
+        if (!isDragging) return;
+        const dx = e.clientX - startX, dy = e.clientY - startY;
+        banner.style.left = (origLeft + dx) + 'px';
+        banner.style.top = (origTop + dy) + 'px';
+      });
+      window.addEventListener('mouseup', () => {
+        if (!isDragging) return;
+        isDragging = false;
+        handle.style.cursor = '';
+      });
     })();
 
     // --- Debug panel ---