@squaredr/fieldcraft-pro 1.3.0 → 1.5.0

package/dist/index.js

@@ -8,6 +8,8 @@ var fieldcraftReact = require('@squaredr/fieldcraft-react');
 var fieldcraftCore = require('@squaredr/fieldcraft-core');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
+var react$1 = require('@xyflow/react');
+require('@xyflow/react/dist/style.css');
 
 // ../license/dist/index.mjs
 var LEGACY_TIER_MAP = {
@@ -555,19 +557,19 @@ function UnlicensedOverlay({ featureName, reason, children }) {
     )
   ] });
 }
-function requireLicense(Component2, featureName) {
+function requireLicense(Component3, featureName) {
   function LicenseGated(props) {
     const { status, tier } = useLicense();
     const isProduction = isProductionEnvironment();
     if (!isProduction) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...props });
+      return /* @__PURE__ */ jsxRuntime.jsx(Component3, { ...props });
     }
     if (status === "validating") {
       return null;
     }
     const isLicensed = status === "valid" && tier != null && tierHasFeature(tier, featureName);
     if (isLicensed) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...props });
+      return /* @__PURE__ */ jsxRuntime.jsx(Component3, { ...props });
     }
     let reason = "A valid license is required for production use.";
     if (status === "invalid") {
@@ -581,9 +583,9 @@ function requireLicense(Component2, featureName) {
     } else if (!tier || !tierHasFeature(tier, featureName)) {
       reason = "Your license does not include this feature. Please upgrade your plan.";
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(UnlicensedOverlay, { featureName, reason, children: /* @__PURE__ */ jsxRuntime.jsx(Component2, { ...props }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(UnlicensedOverlay, { featureName, reason, children: /* @__PURE__ */ jsxRuntime.jsx(Component3, { ...props }) });
   }
-  LicenseGated.displayName = `requireLicense(${Component2.displayName || Component2.name || "Component"})`;
+  LicenseGated.displayName = `requireLicense(${Component3.displayName || Component3.name || "Component"})`;
   return LicenseGated;
 }
 var MAX_HISTORY = 50;
@@ -1030,6 +1032,14 @@ var QUESTION_TYPE_INFO = {
     icon: "Phone",
     description: "US phone number input"
   },
+  phone_international: {
+    type: "phone_international",
+    label: "Intl Phone",
+    category: "text",
+    icon: "Globe2",
+    description: "Phone with country code",
+    defaultConfig: { type: "phone_international", defaultCountry: "US" }
+  },
   url: {
     type: "url",
     label: "URL",
@@ -1123,6 +1133,14 @@ var QUESTION_TYPE_INFO = {
     requiresOptions: true,
     defaultConfig: { type: "ranking", items: [] }
   },
+  country_select: {
+    type: "country_select",
+    label: "Country",
+    category: "selection",
+    icon: "Globe",
+    description: "Country dropdown with search",
+    defaultConfig: { type: "country_select" }
+  },
   // ── Date/Time ──
   date: {
     type: "date",
@@ -1149,7 +1167,97 @@ var QUESTION_TYPE_INFO = {
     description: "Upload files",
     defaultConfig: { type: "file_upload", maxFiles: 1, maxSizeMb: 10 }
   },
+  // ── Compound ──
+  legal_name: {
+    type: "legal_name",
+    label: "Legal Name",
+    category: "text",
+    icon: "UserCheck",
+    description: "First, middle, and last name",
+    defaultConfig: { type: "legal_name" }
+  },
+  address: {
+    type: "address",
+    label: "Address",
+    category: "text",
+    icon: "MapPin",
+    description: "Street, city, state, ZIP",
+    defaultConfig: { type: "address", includeCountry: false }
+  },
+  signature: {
+    type: "signature",
+    label: "Signature",
+    category: "media",
+    icon: "PenTool",
+    description: "Canvas signature pad",
+    defaultConfig: { type: "signature" }
+  },
+  image_capture: {
+    type: "image_capture",
+    label: "Camera",
+    category: "media",
+    icon: "Camera",
+    description: "Capture photo from camera",
+    defaultConfig: { type: "image_capture", allowGallery: true }
+  },
+  date_range: {
+    type: "date_range",
+    label: "Date Range",
+    category: "datetime",
+    icon: "CalendarRange",
+    description: "Start and end date picker",
+    defaultConfig: { type: "date_range" }
+  },
+  appointment: {
+    type: "appointment",
+    label: "Appointment",
+    category: "datetime",
+    icon: "CalendarCheck",
+    description: "Date & time slot booking",
+    defaultConfig: { type: "appointment", duration: 30 }
+  },
   // ── Advanced ──
+  repeater: {
+    type: "repeater",
+    label: "Repeater",
+    category: "advanced",
+    icon: "ListPlus",
+    description: "Repeatable group of fields",
+    defaultConfig: { type: "repeater", fields: [], minItems: 1, maxItems: 10 }
+  },
+  likert: {
+    type: "likert",
+    label: "Likert Scale",
+    category: "advanced",
+    icon: "AlignHorizontalSpaceAround",
+    description: "Agreement scale (e.g. Strongly Disagree to Strongly Agree)",
+    requiresOptions: true,
+    defaultConfig: {
+      type: "likert",
+      scale: [
+        { label: "Strongly Disagree", value: "1" },
+        { label: "Disagree", value: "2" },
+        { label: "Neutral", value: "3" },
+        { label: "Agree", value: "4" },
+        { label: "Strongly Agree", value: "5" }
+      ]
+    }
+  },
+  scoring: {
+    type: "scoring",
+    label: "Scoring",
+    category: "advanced",
+    icon: "Award",
+    description: "Scored question with point values per option",
+    requiresOptions: true,
+    defaultConfig: {
+      type: "scoring",
+      options: [
+        { label: "Option 1", value: "1", score: 1 },
+        { label: "Option 2", value: "2", score: 2 }
+      ]
+    }
+  },
   matrix: {
     type: "matrix",
     label: "Matrix",
@@ -1179,6 +1287,14 @@ var QUESTION_TYPE_INFO = {
     description: "Hidden value from URL or static",
     defaultConfig: { type: "hidden", source: "static" }
   },
+  payment: {
+    type: "payment",
+    label: "Payment",
+    category: "advanced",
+    icon: "CreditCard",
+    description: "Collect payment via Stripe",
+    defaultConfig: { type: "payment", provider: "stripe", publicKey: "", currency: "USD" }
+  },
   // ── Structural ──
   section_header: {
     type: "section_header",
@@ -1283,7 +1399,7 @@ var DEFAULT_PALETTE = [
   {
     category: "text",
     label: "Text Input",
-    types: ["short_text", "long_text", "email", "phone", "url"]
+    types: ["short_text", "long_text", "email", "phone", "phone_international", "url", "legal_name", "address"]
   },
   {
     category: "numeric",
@@ -1293,17 +1409,17 @@ var DEFAULT_PALETTE = [
   {
     category: "selection",
     label: "Selection",
-    types: ["single_select", "multi_select", "dropdown", "boolean", "ranking"]
+    types: ["single_select", "multi_select", "dropdown", "boolean", "ranking", "country_select"]
   },
   {
     category: "datetime",
     label: "Date & Time",
-    types: ["date", "time"]
+    types: ["date", "time", "date_range", "appointment"]
   },
   {
     category: "media",
     label: "Media",
-    types: ["file_upload"]
+    types: ["file_upload", "signature", "image_capture"]
   },
   {
     category: "content",
@@ -1318,7 +1434,7 @@ var DEFAULT_PALETTE = [
   {
     category: "advanced",
     label: "Advanced",
-    types: ["matrix", "calculated", "hidden"]
+    types: ["repeater", "likert", "scoring", "matrix", "calculated", "hidden", "payment"]
   }
 ];
 
@@ -2835,7 +2951,8 @@ function getFieldOptions(schema, excludeId) {
   return fields;
 }
 function ConditionEditor({ question, schema, onUpdate }) {
-  const showIf = question.showIf;
+  const rawShowIf = question.showIf;
+  const showIf = rawShowIf && rawShowIf.field && !rawShowIf.conditions ? { combine: "AND", conditions: [rawShowIf] } : rawShowIf;
   const fieldOptions = getFieldOptions(schema, question.id);
   const updateShowIf = (next) => {
     onUpdate({ showIf: next });
@@ -2957,6 +3074,24 @@ function ConditionEditor({ question, schema, onUpdate }) {
 }
 function FormSettingsPanel({ schema, onUpdate }) {
   const settings = schema.settings ?? {};
+  const hasConditions = schema.sections.some(
+    (s) => s.showIf || s.questions.some((q) => q.showIf)
+  );
+  const displayModeOptions = hasConditions ? [
+    { label: "Stepped", value: "stepped" },
+    { label: "Conversational", value: "conversational" }
+  ] : [
+    { label: "Stepped", value: "stepped" },
+    { label: "Classic", value: "classic" },
+    { label: "Conversational", value: "conversational" }
+  ];
+  const displayMode = settings.displayMode ?? "stepped";
+  const effectiveDisplayMode = hasConditions && displayMode === "classic" ? "stepped" : displayMode;
+  react.useEffect(() => {
+    if (effectiveDisplayMode !== displayMode) {
+      onUpdate({ ...schema, settings: { ...settings, displayMode: effectiveDisplayMode } });
+    }
+  }, [effectiveDisplayMode, displayMode]);
   const updateSettings = (updates) => {
     onUpdate({ ...schema, settings: { ...settings, ...updates } });
   };
@@ -2984,12 +3119,8 @@ function FormSettingsPanel({ schema, onUpdate }) {
         SettingsSelect,
         {
           label: "Mode",
-          value: settings.displayMode ?? "classic",
-          options: [
-            { label: "Classic", value: "classic" },
-            { label: "Stepped", value: "stepped" },
-            { label: "Conversational", value: "conversational" }
-          ],
+          value: effectiveDisplayMode,
+          options: displayModeOptions,
           onChange: (v) => updateSettings({ displayMode: v })
         }
       ),
@@ -3367,206 +3498,1147 @@ function FieldGroup({ label, children }) {
     children
   ] });
 }
-var ThemeCtx = react.createContext({});
-function useBuilderTheme() {
-  return react.useContext(ThemeCtx);
-}
-function themeToCssVars(theme) {
-  const vars = {};
-  if (theme.background) vars["--background"] = theme.background;
-  if (theme.foreground) vars["--foreground"] = theme.foreground;
-  if (theme.card) {
-    vars["--card"] = theme.card;
-    vars["--card-foreground"] = theme.foreground ?? "";
-    vars["--popover"] = theme.card;
-    vars["--popover-foreground"] = theme.foreground ?? "";
-  }
-  if (theme.primary) vars["--primary"] = theme.primary;
-  if (theme.primaryForeground) vars["--primary-foreground"] = theme.primaryForeground;
-  if (theme.secondary) vars["--secondary"] = theme.secondary;
-  if (theme.secondaryForeground) vars["--secondary-foreground"] = theme.secondaryForeground;
-  if (theme.muted) vars["--muted"] = theme.muted;
-  if (theme.mutedForeground) vars["--muted-foreground"] = theme.mutedForeground;
-  if (theme.accent) vars["--accent"] = theme.accent;
-  if (theme.accentForeground) vars["--accent-foreground"] = theme.accentForeground;
-  if (theme.destructive) vars["--destructive"] = theme.destructive;
-  if (theme.destructiveForeground) vars["--destructive-foreground"] = theme.destructiveForeground;
-  if (theme.border) vars["--border"] = theme.border;
-  if (theme.input) vars["--input"] = theme.input;
-  if (theme.ring) vars["--ring"] = theme.ring;
-  if (theme.radius) vars["--radius"] = theme.radius;
-  if (theme.surface) vars["--fcb-surface"] = theme.surface;
-  if (theme.surfaceHover) vars["--fcb-surface-hover"] = theme.surfaceHover;
-  if (theme.canvas) vars["--fcb-canvas"] = theme.canvas;
-  if (theme.panel) vars["--fcb-panel"] = theme.panel;
-  if (theme.borderStrong) vars["--fcb-border-strong"] = theme.borderStrong;
-  if (theme.textDim) vars["--fcb-text-dim"] = theme.textDim;
-  return vars;
-}
-function FormBuilderThemeProvider({ theme, children }) {
-  const resolved = theme ?? {};
-  const cssVars = react.useMemo(() => themeToCssVars(resolved), [resolved]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ThemeCtx.Provider, { value: resolved, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-fcb-root": "", style: cssVars, className: "w-full h-full", children }) });
-}
-var FormBuilderErrorBoundary = class extends react.Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
+var PreviewErrorBoundary = class extends react.Component {
+  state = { error: null };
   static getDerivedStateFromError(error) {
-    return { hasError: true, error };
+    return { error };
   }
   componentDidCatch(error, info) {
-    console.error("[FormBuilder] Render error:", error, info.componentStack);
+    console.error("[FormBuilder Preview]", error, info);
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.resetKey !== this.props.resetKey && this.state.error) {
+      this.setState({ error: null });
+    }
   }
   render() {
-    if (this.state.hasError) {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center h-full bg-background text-foreground p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-md text-center space-y-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold", children: "Something went wrong" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "The form builder encountered an unexpected error. Your schema data is preserved." }),
-        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-destructive bg-destructive/10 rounded-md p-3 text-left overflow-auto max-h-32", children: this.state.error?.message }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          fieldcraftReact.Button,
-          {
-            onClick: () => this.setState({ hasError: false, error: null }),
-            variant: "outline",
-            children: "Try Again"
-          }
-        )
-      ] }) });
+    if (this.state.error) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 text-destructive text-sm font-mono", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Render Error:" }),
+        " ",
+        this.state.error.message
+      ] });
     }
     return this.props.children;
   }
 };
-function FormBuilderCore(props) {
-  const { initialSchema = DEFAULT_SCHEMA, onChange, onSave, height = "100vh", theme, className, toolbarExtra, questionTypes, palette } = props;
-  const mergedQuestionTypes = questionTypes ? { ...QUESTION_TYPE_INFO, ...questionTypes } : QUESTION_TYPE_INFO;
-  const builderState = useBuilderState(initialSchema);
-  const dragDrop = useDragDrop(builderState);
-  const fileInputRef = react.useRef(null);
-  const [mobilePanel, setMobilePanel] = react.useState("none");
-  react.useEffect(() => {
-    if (builderState.selectedItem && window.innerWidth < 768) {
-      setMobilePanel("properties");
-    }
-  }, [builderState.selectedItem]);
-  react.useEffect(() => {
-    if (!dragDrop.activeDragItem && mobilePanel === "palette") {
-      setMobilePanel("none");
+function FormPreviewPanel({ schema, preview }) {
+  const hasSections = schema.sections && schema.sections.length > 0;
+  const hasFields = hasSections && schema.sections.some((s) => s.questions.length > 0);
+  if (!hasFields) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "No fields to preview" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: "Add fields in the Design view to see a live preview here." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-2xl mx-auto py-8 px-4", children: /* @__PURE__ */ jsxRuntime.jsx(PreviewErrorBoundary, { resetKey: schema.id + (schema.version ?? ""), children: /* @__PURE__ */ jsxRuntime.jsx(
+    fieldcraftReact.FormEngineRenderer,
+    {
+      schema,
+      theme: preview?.theme,
+      components: preview?.components,
+      onReady: preview?.onReady,
+      onFieldChange: preview?.onFieldChange,
+      onSubmit: preview?.onSubmit ?? (() => {
+      })
     }
-  }, [dragDrop.activeDragItem]);
+  ) }) }) });
+}
+
+// src/form-builder/utils/validation-markers.ts
+var MarkerSeverity = {
+  Error: 8};
+function errorsToMarkers(errors) {
+  return errors.map((error) => ({
+    severity: MarkerSeverity.Error,
+    message: error.message,
+    startLineNumber: error.line ?? 1,
+    startColumn: error.column ?? 1,
+    endLineNumber: error.endLine ?? error.line ?? 1,
+    endColumn: error.endColumn ?? error.column ?? 1,
+    source: "FieldCraft Schema Validator"
+  }));
+}
+var Editor = react.lazy(() => import('@monaco-editor/react').then((m) => ({ default: m.default })));
+function MonacoWrapper({ value, onChange, errors }) {
+  const editorRef = react.useRef(null);
+  const monacoRef = react.useRef(null);
+  const handleMount = (editor, monaco) => {
+    editorRef.current = editor;
+    monacoRef.current = monaco;
+  };
   react.useEffect(() => {
-    if (onChange && builderState.isDirty) {
-      onChange(builderState.schema);
-    }
-  }, [builderState.schema, builderState.isDirty, onChange]);
-  const handleSave = react.useCallback(() => {
-    if (onSave) {
-      onSave(builderState.schema);
-      builderState.markClean();
+    const editor = editorRef.current;
+    const monaco = monacoRef.current;
+    if (!editor || !monaco) return;
+    const model = editor.getModel();
+    if (!model) return;
+    const markers = errorsToMarkers(errors);
+    monaco.editor.setModelMarkers(model, "fieldcraft-schema", markers);
+  }, [errors]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Editor,
+    {
+      height: "100%",
+      language: "json",
+      theme: "vs-dark",
+      value,
+      onChange: (val) => onChange(val ?? ""),
+      onMount: handleMount,
+      options: {
+        minimap: { enabled: false },
+        fontSize: 13,
+        wordWrap: "on",
+        formatOnPaste: true,
+        automaticLayout: true,
+        tabSize: 2,
+        scrollBeyondLastLine: false,
+        padding: { top: 12 }
+      }
     }
-  }, [onSave, builderState]);
-  const handleExport = react.useCallback(() => {
-    const json = JSON.stringify(builderState.schema, null, 2);
-    const blob = new Blob([json], { type: "application/json" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `${builderState.schema.title?.replace(/\s+/g, "-").toLowerCase() || "form"}-schema.json`;
-    a.click();
-    URL.revokeObjectURL(url);
-  }, [builderState.schema]);
-  const handleImport = react.useCallback(() => {
-    fileInputRef.current?.click();
-  }, []);
-  const handleFileChange = react.useCallback(
-    (e) => {
-      const file = e.target.files?.[0];
-      if (!file) return;
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        try {
-          const parsed = JSON.parse(event.target?.result);
-          const validated = fieldcraftCore.validateSchema(parsed);
-          builderState.resetSchema(validated);
-        } catch (err) {
-          if (err instanceof fieldcraftCore.FormEngineSchemaError) {
-            const details = err.issues.slice(0, 3).map((i) => `\u2022 ${i.path.join(".")}: ${i.message}`).join("\n");
-            alert(`Invalid schema:
-${details}`);
-          } else if (err instanceof SyntaxError) {
-            alert("Failed to parse JSON file.");
-          } else {
-            alert("Invalid schema file.");
-          }
-        }
-      };
-      reader.readAsText(file);
-      e.target.value = "";
+  );
+}
+function JsonEditorPanel({ value, onChange, errors, onValidate }) {
+  const handleChange = react.useCallback(
+    (newValue) => {
+      onChange(newValue);
+      onValidate(newValue);
     },
-    [builderState]
+    [onChange, onValidate]
   );
-  const handleKeyDown = react.useCallback(
-    (e) => {
-      const mod = e.metaKey || e.ctrlKey;
-      const tag = e.target.tagName;
-      const isEditing = tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
-      if (mod && e.key === "z" && !e.shiftKey) {
-        e.preventDefault();
-        builderState.undo();
-        return;
-      }
-      if (mod && e.key === "z" && e.shiftKey) {
-        e.preventDefault();
-        builderState.redo();
-        return;
+  const handleFormat = react.useCallback(() => {
+    try {
+      const formatted = JSON.stringify(JSON.parse(value), null, 2);
+      onChange(formatted);
+    } catch {
+    }
+  }, [value, onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+    errors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 px-3 py-1.5 bg-destructive/10 border-b border-destructive/20 text-destructive text-xs font-mono overflow-x-auto", children: [
+      errors.slice(0, 3).map((e, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        e.line ? `Line ${e.line}: ` : "",
+        e.path ? `${e.path}: ` : "",
+        e.message
+      ] }, i)),
+      errors.length > 3 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-muted-foreground", children: [
+        "...and ",
+        errors.length - 3,
+        " more"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 flex items-center justify-between px-3 py-1.5 bg-card border-b border-border text-xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: errors.length === 0 ? "Valid schema" : `${errors.length} error${errors.length !== 1 ? "s" : ""}` }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleFormat,
+          className: "text-primary hover:underline",
+          children: "Format JSON"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      react.Suspense,
+      {
+        fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-sm text-muted-foreground", children: "Loading editor..." }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(MonacoWrapper, { value, onChange: handleChange, errors })
       }
-      if (mod && e.key === "s") {
-        e.preventDefault();
-        handleSave();
-        return;
+    ) })
+  ] });
+}
+
+// src/form-builder/utils/logic-graph.ts
+function extractFieldRefs(expr) {
+  const refs = [];
+  if (expr.field) {
+    refs.push({ field: expr.field, operator: expr.operator, value: expr.value });
+  }
+  if (expr.conditions) {
+    for (const child of expr.conditions) {
+      refs.push(...extractFieldRefs(child));
+    }
+  }
+  return refs;
+}
+function buildLogicGraph(schema) {
+  const nodes = [];
+  const edges = [];
+  const nodeIds = /* @__PURE__ */ new Set();
+  for (const section of schema.sections) {
+    nodes.push({
+      id: section.id,
+      label: section.title || "Untitled Section",
+      type: "section",
+      sectionId: section.id,
+      sectionTitle: section.title || "Untitled Section",
+      hasCondition: !!section.showIf
+    });
+    nodeIds.add(section.id);
+    if (section.showIf) {
+      const refs = extractFieldRefs(section.showIf);
+      for (const ref of refs) {
+        edges.push({ from: ref.field, to: section.id, edgeType: "showIf", operator: ref.operator, value: ref.value });
       }
-      if (isEditing) return;
-      if (e.key === "Delete" || e.key === "Backspace") {
-        const sel = builderState.selectedItem;
-        if (!sel) return;
-        e.preventDefault();
-        if (sel.type === "question") {
-          builderState.removeQuestion(sel.sectionId, sel.questionId);
-        } else if (sel.type === "section") {
-          builderState.removeSection(sel.sectionId);
+    }
+    if (section.onExit) {
+      for (const rule of section.onExit.rules) {
+        if (rule.jumpTo) {
+          edges.push({ from: section.id, to: rule.jumpTo, edgeType: "onExit", jumpTo: rule.jumpTo });
         }
-        return;
       }
-      if (e.key === "Escape") {
-        if (builderState.selectedItem) {
-          e.preventDefault();
-          builderState.clearSelection();
-        }
-        return;
+      if (section.onExit.default) {
+        edges.push({ from: section.id, to: section.onExit.default, edgeType: "onExit", jumpTo: section.onExit.default });
       }
-      if (mod && e.key === "d") {
-        const sel = builderState.selectedItem;
-        if (!sel) return;
-        e.preventDefault();
-        if (sel.type === "question") {
-          builderState.duplicateQuestion(sel.sectionId, sel.questionId);
-        } else if (sel.type === "section") {
-          builderState.duplicateSection(sel.sectionId);
+    }
+    for (const question of section.questions) {
+      nodes.push({
+        id: question.id,
+        label: question.label || question.id,
+        type: "field",
+        fieldType: question.type,
+        sectionId: section.id,
+        sectionTitle: section.title || "Untitled Section",
+        hasCondition: !!question.showIf
+      });
+      nodeIds.add(question.id);
+      if (question.showIf) {
+        const refs = extractFieldRefs(question.showIf);
+        for (const ref of refs) {
+          edges.push({ from: ref.field, to: question.id, edgeType: "showIf", operator: ref.operator, value: ref.value });
         }
       }
-    },
-    [builderState, handleSave]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(FormBuilderThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    core.DndContext,
-    {
-      sensors: dragDrop.sensors,
-      onDragStart: dragDrop.handleDragStart,
-      onDragEnd: dragDrop.handleDragEnd,
-      onDragCancel: dragDrop.handleDragCancel,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
+    }
+  }
+  const validEdges = edges.filter((e) => nodeIds.has(e.from) && nodeIds.has(e.to));
+  return { nodes, edges: validEdges };
+}
+var SECTION_COLORS = [
+  "#3b82f6",
+  // blue
+  "#8b5cf6",
+  // violet
+  "#06b6d4",
+  // cyan
+  "#f59e0b",
+  // amber
+  "#10b981",
+  // emerald
+  "#ef4444",
+  // red
+  "#ec4899",
+  // pink
+  "#6366f1"
+  // indigo
+];
+var FIELD_NODE_WIDTH = 220;
+var FIELD_NODE_HEIGHT = 52;
+var SECTION_HEADER_HEIGHT = 40;
+var SECTION_PADDING_X = 16;
+var SECTION_PADDING_TOP = 12;
+var SECTION_PADDING_BOTTOM = 16;
+var FIELD_GAP = 10;
+var SECTION_GAP = 80;
+function formatEdgeLabel(edge) {
+  if (edge.edgeType === "onExit") return "jump";
+  if (!edge.operator) return "";
+  const op = edge.operator;
+  const val = edge.value;
+  if (op === "exists") return "has value";
+  if (op === "notExists") return "is empty";
+  if (val === void 0 || val === null || val === "") return op;
+  const short = String(val).length > 12 ? String(val).slice(0, 12) + "\u2026" : String(val);
+  return `${op} ${short}`;
+}
+function buildReactFlowGraph(schema) {
+  const graph = buildLogicGraph(schema);
+  const nodes = [];
+  const edges = [];
+  let sectionX = 0;
+  let maxSectionHeight = 0;
+  for (const section of schema.sections) {
+    const fieldCount = section.questions.length;
+    const contentHeight = SECTION_HEADER_HEIGHT + SECTION_PADDING_TOP + fieldCount * FIELD_NODE_HEIGHT + Math.max(0, fieldCount - 1) * FIELD_GAP + SECTION_PADDING_BOTTOM;
+    if (contentHeight > maxSectionHeight) maxSectionHeight = contentHeight;
+  }
+  if (maxSectionHeight < SECTION_HEADER_HEIGHT + SECTION_PADDING_TOP + SECTION_PADDING_BOTTOM + FIELD_NODE_HEIGHT) {
+    maxSectionHeight = SECTION_HEADER_HEIGHT + SECTION_PADDING_TOP + SECTION_PADDING_BOTTOM + FIELD_NODE_HEIGHT;
+  }
+  const sectionWidth = FIELD_NODE_WIDTH + SECTION_PADDING_X * 2;
+  for (let sIdx = 0; sIdx < schema.sections.length; sIdx++) {
+    const section = schema.sections[sIdx];
+    const colorIndex = sIdx;
+    nodes.push({
+      id: section.id,
+      type: "sectionNode",
+      position: { x: sectionX, y: 0 },
+      data: {
+        label: section.title || "Untitled Section",
+        sectionId: section.id,
+        fieldCount: section.questions.length,
+        hasCondition: !!section.showIf,
+        hasExitLogic: !!section.onExit,
+        colorIndex
+      },
+      style: { width: sectionWidth, height: maxSectionHeight }
+    });
+    for (let fIdx = 0; fIdx < section.questions.length; fIdx++) {
+      const question = section.questions[fIdx];
+      const fieldY = SECTION_HEADER_HEIGHT + SECTION_PADDING_TOP + fIdx * (FIELD_NODE_HEIGHT + FIELD_GAP);
+      nodes.push({
+        id: question.id,
+        type: "fieldNode",
+        position: { x: SECTION_PADDING_X, y: fieldY },
+        parentId: section.id,
+        extent: "parent",
+        data: {
+          label: question.label || question.id,
+          fieldType: question.type,
+          sectionId: section.id,
+          hasCondition: !!question.showIf,
+          colorIndex
+        },
+        style: { width: FIELD_NODE_WIDTH }
+      });
+    }
+    if (sIdx < schema.sections.length - 1) {
+      const nextSection = schema.sections[sIdx + 1];
+      edges.push({
+        id: `pipeline-${section.id}-${nextSection.id}`,
+        source: section.id,
+        target: nextSection.id,
+        type: "pipelineEdge",
+        data: { edgeType: "pipeline" }
+      });
+    }
+    sectionX += sectionWidth + SECTION_GAP;
+  }
+  for (let i = 0; i < graph.edges.length; i++) {
+    const edge = graph.edges[i];
+    edges.push({
+      id: `e-${edge.from}-${edge.to}-${i}`,
+      source: edge.from,
+      target: edge.to,
+      type: "conditionEdge",
+      animated: edge.edgeType === "showIf",
+      style: edge.edgeType === "onExit" ? { strokeDasharray: "6 3", stroke: "#f59e0b" } : void 0,
+      label: formatEdgeLabel(edge),
+      data: {
+        edgeType: edge.edgeType,
+        operator: edge.operator,
+        value: edge.value,
+        sourceId: edge.from,
+        targetId: edge.to
+      }
+    });
+  }
+  return { nodes, edges };
+}
+function SectionNodeInner({ data }) {
+  const d = data;
+  const color = SECTION_COLORS[d.colorIndex % SECTION_COLORS.length];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fc-flow-section-group", style: { borderColor: color }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "target", position: react$1.Position.Left, className: "fc-flow-handle fc-flow-handle--section" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fc-flow-section-group__header", style: { background: color }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fc-flow-section-group__label", children: d.label.length > 30 ? d.label.slice(0, 30) + "\u2026" : d.label }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "fc-flow-section-group__meta", children: [
+        d.fieldCount,
+        " field",
+        d.fieldCount !== 1 ? "s" : "",
+        d.hasCondition && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fc-flow-section-group__badge", title: "Has showIf condition", children: "?" }),
+        d.hasExitLogic && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fc-flow-section-group__badge fc-flow-section-group__badge--jump", title: "Has onExit jump", children: "\u2934" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "source", position: react$1.Position.Right, className: "fc-flow-handle fc-flow-handle--section" })
+  ] });
+}
+var SectionNode = react.memo(SectionNodeInner);
+function FieldNodeInner({ data }) {
+  const d = data;
+  const color = SECTION_COLORS[d.colorIndex % SECTION_COLORS.length];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "fc-flow-field",
+      style: {
+        borderColor: d.hasCondition ? color : void 0,
+        borderWidth: d.hasCondition ? 2 : 1
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "target", position: react$1.Position.Left, className: "fc-flow-handle" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fc-flow-field__content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fc-flow-field__label", children: d.label.length > 26 ? d.label.slice(0, 26) + "\u2026" : d.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fc-flow-field__type", children: d.fieldType })
+        ] }),
+        d.hasCondition && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fc-flow-badge", style: { background: color }, title: "Has showIf condition", children: "?" }),
+        /* @__PURE__ */ jsxRuntime.jsx(react$1.Handle, { type: "source", position: react$1.Position.Right, className: "fc-flow-handle" })
+      ]
+    }
+  );
+}
+var FieldNode = react.memo(FieldNodeInner);
+var logicFlowNodeTypes = {
+  sectionNode: SectionNode,
+  fieldNode: FieldNode
+};
+function ConditionEdgeInner({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  label,
+  style,
+  data,
+  markerEnd
+}) {
+  const [edgePath, labelX, labelY] = react$1.getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  const isJump = data?.edgeType === "onExit";
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.BaseEdge,
+      {
+        id,
+        path: edgePath,
+        markerEnd,
+        style: {
+          stroke: isJump ? "#f59e0b" : "var(--primary, #3b82f6)",
+          strokeWidth: 1.5,
+          strokeOpacity: 0.7,
+          ...style
+        }
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx(react$1.EdgeLabelRenderer, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "fc-flow-edge-label",
+        style: {
+          transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+          background: isJump ? "#f59e0b" : "var(--primary, #3b82f6)"
+        },
+        children: label
+      }
+    ) })
+  ] });
+}
+var ConditionEdge = react.memo(ConditionEdgeInner);
+function PipelineEdgeInner({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd
+}) {
+  const [edgePath] = react$1.getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.BaseEdge,
+    {
+      id,
+      path: edgePath,
+      markerEnd,
+      style: {
+        stroke: "var(--muted-foreground, #71717a)",
+        strokeWidth: 2,
+        strokeOpacity: 0.4
+      }
+    }
+  );
+}
+var PipelineEdge = react.memo(PipelineEdgeInner);
+var logicFlowEdgeTypes = {
+  conditionEdge: ConditionEdge,
+  pipelineEdge: PipelineEdge
+};
+function findQuestion2(schema, fieldId) {
+  for (const section of schema.sections) {
+    for (const q of section.questions) {
+      if (q.id === fieldId) return q;
+    }
+  }
+  return void 0;
+}
+function updateQuestionInSchema(schema, fieldId, updates) {
+  return {
+    ...schema,
+    sections: schema.sections.map((section) => ({
+      ...section,
+      questions: section.questions.map(
+        (q) => q.id === fieldId ? { ...q, ...updates } : q
+      )
+    }))
+  };
+}
+function removeConditionForSource(showIf, sourceFieldId) {
+  if (!showIf) return void 0;
+  if (showIf.field === sourceFieldId) return void 0;
+  if (showIf.field && showIf.field !== sourceFieldId) return showIf;
+  if (showIf.conditions) {
+    const filtered = showIf.conditions.map((c) => removeConditionForSource(c, sourceFieldId)).filter((c) => c !== void 0);
+    if (filtered.length === 0) return void 0;
+    if (filtered.length === 1) return filtered[0];
+    return { ...showIf, conditions: filtered };
+  }
+  return showIf;
+}
+var defaultEdgeOptions = {
+  markerEnd: {
+    type: react$1.MarkerType.ArrowClosed,
+    width: 16,
+    height: 12
+  }
+};
+function LogicFlowEditor({ schema, onChange, onClose }) {
+  const noSections = schema.sections.length === 0;
+  const flowGraph = react.useMemo(() => buildReactFlowGraph(schema), [schema]);
+  const [nodes, setNodes, onNodesChange] = react$1.useNodesState(flowGraph.nodes);
+  const [edges, setEdges, onEdgesChange] = react$1.useEdgesState(flowGraph.edges);
+  const [selectedFieldId, setSelectedFieldId] = react.useState(null);
+  const selectedQuestion = selectedFieldId ? findQuestion2(schema, selectedFieldId) : void 0;
+  react.useEffect(() => {
+    setNodes(flowGraph.nodes);
+    setEdges(flowGraph.edges);
+  }, [flowGraph, setNodes, setEdges]);
+  const sectionIds = react.useMemo(() => {
+    const ids = [];
+    for (const section of schema.sections) {
+      ids.push(section.id);
+    }
+    return ids;
+  }, [schema]);
+  const onNodeClick = react.useCallback(
+    (_event, node) => {
+      if (node.type === "fieldNode") {
+        setSelectedFieldId(node.id);
+      }
+    },
+    []
+  );
+  const onConnect = react.useCallback(
+    (connection) => {
+      if (!connection.source || !connection.target) return;
+      const targetQuestion = findQuestion2(schema, connection.target);
+      if (!targetQuestion) return;
+      const newCondition = {
+        field: connection.source,
+        operator: "exists"
+      };
+      let updatedShowIf;
+      const existing = targetQuestion.showIf;
+      if (!existing) {
+        updatedShowIf = { combine: "AND", conditions: [newCondition] };
+      } else {
+        updatedShowIf = {
+          ...existing,
+          conditions: [...existing.conditions ?? [], newCondition]
+        };
+      }
+      const updatedSchema = updateQuestionInSchema(schema, connection.target, {
+        showIf: updatedShowIf
+      });
+      onChange(updatedSchema);
+      setSelectedFieldId(connection.target);
+    },
+    [schema, onChange]
+  );
+  const onEdgesDelete = react.useCallback(
+    (deletedEdges) => {
+      let updatedSchema = schema;
+      for (const edge of deletedEdges) {
+        const edgeData = edge.data;
+        if (!edgeData) continue;
+        const targetId = edge.target;
+        const sourceId = edge.source;
+        const edgeType = edgeData.edgeType;
+        if (edgeType === "showIf") {
+          const question = findQuestion2(updatedSchema, targetId);
+          if (!question) continue;
+          const updatedShowIf = removeConditionForSource(
+            question.showIf,
+            sourceId
+          );
+          updatedSchema = updateQuestionInSchema(updatedSchema, targetId, {
+            showIf: updatedShowIf
+          });
+        }
+      }
+      onChange(updatedSchema);
+    },
+    [schema, onChange]
+  );
+  const handleConditionUpdate = react.useCallback(
+    (updates) => {
+      if (!selectedFieldId) return;
+      const updatedSchema = updateQuestionInSchema(schema, selectedFieldId, updates);
+      onChange(updatedSchema);
+    },
+    [schema, selectedFieldId, onChange]
+  );
+  const showIfCount = flowGraph.edges.filter(
+    (e) => e.data?.edgeType === "showIf"
+  ).length;
+  const jumpCount = flowGraph.edges.filter(
+    (e) => e.data?.edgeType === "onExit"
+  ).length;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-background/95 backdrop-blur-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-12 shrink-0 flex items-center justify-between px-4 border-b border-border bg-card", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranch, { size: 16, className: "text-primary" }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold", children: "Logic Flow" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          showIfCount,
+          " condition",
+          showIfCount !== 1 ? "s" : "",
+          jumpCount > 0 && ` \xB7 ${jumpCount} jump${jumpCount !== 1 ? "s" : ""}`,
+          " \xB7 ",
+          sectionIds.length,
+          " section",
+          sectionIds.length !== 1 ? "s" : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground mr-2", children: "Drag between nodes to create conditions \xB7 Select edges and press Delete to remove" }),
+        /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "ghost", size: "icon-sm", onClick: onClose, title: "Close logic flow", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16, strokeWidth: 1.75 }) })
+      ] })
+    ] }),
+    noSections ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground text-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranch, { size: 32, className: "mx-auto opacity-40" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "No sections found" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs max-w-xs", children: "Add sections and fields to your form to see the logic flow pipeline." })
+    ] }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        react$1.ReactFlow,
+        {
+          nodes,
+          edges,
+          onNodesChange,
+          onEdgesChange,
+          onNodeClick,
+          onConnect,
+          onEdgesDelete,
+          nodeTypes: logicFlowNodeTypes,
+          edgeTypes: logicFlowEdgeTypes,
+          defaultEdgeOptions,
+          fitView: true,
+          fitViewOptions: { padding: 0.2 },
+          deleteKeyCode: ["Backspace", "Delete"],
+          proOptions: { hideAttribution: true },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(react$1.Background, { gap: 20, size: 1 }),
+            /* @__PURE__ */ jsxRuntime.jsx(react$1.Controls, { showInteractive: false }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react$1.MiniMap,
+              {
+                nodeColor: (node) => {
+                  const d = node.data;
+                  const idx = d.colorIndex ?? 0;
+                  return SECTION_COLORS[idx % SECTION_COLORS.length];
+                },
+                maskColor: "rgba(0, 0, 0, 0.3)"
+              }
+            )
+          ]
+        }
+      ) }),
+      selectedFieldId && selectedQuestion && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-72 border-l border-border bg-card overflow-auto", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-3 border-b border-border flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold truncate", children: selectedQuestion.label || selectedQuestion.id }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: selectedQuestion.type })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            fieldcraftReact.Button,
+            {
+              variant: "ghost",
+              size: "icon-xs",
+              onClick: () => setSelectedFieldId(null),
+              title: "Close panel",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14, strokeWidth: 1.75 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ConditionEditor,
+          {
+            question: selectedQuestion,
+            schema,
+            onUpdate: handleConditionUpdate
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 px-4 py-2 border-t border-border bg-card flex items-center gap-4 text-xs text-muted-foreground flex-wrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-0.5 rounded", style: { background: "var(--muted-foreground)", opacity: 0.4 } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "flow" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-0.5 bg-primary rounded" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "showIf" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-5 h-0.5 rounded", style: { background: "#f59e0b" } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "jump" })
+      ] }),
+      sectionIds.map((id, i) => {
+        const section = schema.sections.find((s) => s.id === id);
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-3 h-3 rounded-sm", style: { background: SECTION_COLORS[i % SECTION_COLORS.length] } }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: section?.title || id })
+        ] }, id);
+      })
+    ] })
+  ] });
+}
+function TemplateGallery({ templates, onSelect, onClose }) {
+  const [search, setSearch] = react.useState("");
+  const [activeCategory, setActiveCategory] = react.useState("all");
+  const [confirmTemplate, setConfirmTemplate] = react.useState(null);
+  const categories = react.useMemo(() => {
+    const cats = /* @__PURE__ */ new Set();
+    for (const t of templates) cats.add(t.meta.category);
+    return ["all", ...Array.from(cats)];
+  }, [templates]);
+  const filtered = react.useMemo(() => {
+    return templates.filter((t) => {
+      const matchesCategory = activeCategory === "all" || t.meta.category === activeCategory;
+      const matchesSearch = !search || t.meta.name.toLowerCase().includes(search.toLowerCase()) || t.meta.description.toLowerCase().includes(search.toLowerCase()) || t.meta.tags?.some((tag) => tag.toLowerCase().includes(search.toLowerCase()));
+      return matchesCategory && matchesSearch;
+    });
+  }, [templates, activeCategory, search]);
+  const handleConfirm = () => {
+    if (confirmTemplate) {
+      onSelect(confirmTemplate);
+      setConfirmTemplate(null);
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-3xl max-h-[85vh] mx-4 bg-card border border-border rounded-lg shadow-xl flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 flex items-center justify-between px-4 py-3 border-b border-border", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutTemplate, { size: 18, className: "text-primary", strokeWidth: 1.75 }),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm font-semibold", children: "Template Gallery" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          "(",
+          templates.length,
+          " templates)"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "ghost", size: "icon-sm", onClick: onClose, title: "Close", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16, strokeWidth: 1.75 }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 px-4 py-2 space-y-2 border-b border-border", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { size: 14, className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground", strokeWidth: 1.75 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "Search templates...",
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            className: "w-full pl-8 pr-3 py-1.5 text-sm bg-background border border-border rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1 overflow-x-auto pb-0.5", children: categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setActiveCategory(cat),
+          className: `shrink-0 px-2.5 py-1 rounded-md text-xs font-medium transition-colors ${activeCategory === cat ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:text-foreground"}`,
+          children: cat === "all" ? "All" : cat.charAt(0).toUpperCase() + cat.slice(1)
+        },
+        cat
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-4", children: filtered.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center h-40 text-muted-foreground text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No templates match your search." }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: filtered.map((template) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setConfirmTemplate(template),
+        className: "text-left p-3 rounded-lg border border-border bg-background hover:border-primary/50 hover:bg-primary/5 transition-colors group",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2 mb-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-medium text-foreground group-hover:text-primary transition-colors", children: template.meta.name }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 px-1.5 py-0.5 rounded text-[10px] font-medium bg-muted text-muted-foreground", children: template.meta.category })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-2 line-clamp-2", children: template.meta.description }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { size: 11, strokeWidth: 1.75 }),
+              template.meta.fieldCount,
+              " field",
+              template.meta.fieldCount !== 1 ? "s" : ""
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Layers, { size: 11, strokeWidth: 1.75 }),
+              template.meta.sectionCount,
+              " section",
+              template.meta.sectionCount !== 1 ? "s" : ""
+            ] })
+          ] })
+        ]
+      },
+      template.meta.id
+    )) }) }),
+    confirmTemplate && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 px-4 py-3 border-t border-border bg-muted/50 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "Use " }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: confirmTemplate.meta.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "? This will replace the current form." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "ghost", size: "sm", onClick: () => setConfirmTemplate(null), children: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { size: "sm", onClick: handleConfirm, children: "Use Template" })
+      ] })
+    ] })
+  ] }) });
+}
+function useDebouncedValidation(delayMs = 500) {
+  const [errors, setErrors] = react.useState([]);
+  const timerRef = react.useRef(null);
+  const validate = react.useCallback(
+    (text) => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+      timerRef.current = setTimeout(() => {
+        const result = [];
+        let parsed;
+        try {
+          parsed = JSON.parse(text);
+        } catch (err) {
+          if (err instanceof SyntaxError) {
+            const posMatch = err.message.match(/position\s+(\d+)/i);
+            let line = 1;
+            let column = 1;
+            if (posMatch) {
+              const pos = parseInt(posMatch[1], 10);
+              const upToPos = text.slice(0, pos);
+              line = (upToPos.match(/\n/g) || []).length + 1;
+              column = pos - upToPos.lastIndexOf("\n");
+            }
+            result.push({ message: err.message, line, column, endLine: line, endColumn: column + 1 });
+          } else {
+            result.push({ message: "Invalid JSON" });
+          }
+          setErrors(result);
+          return;
+        }
+        try {
+          fieldcraftCore.validateSchema(parsed);
+        } catch (err) {
+          if (err instanceof fieldcraftCore.FormEngineSchemaError) {
+            for (const issue of err.issues) {
+              result.push({
+                message: issue.message,
+                path: issue.path?.join(".")
+              });
+            }
+          } else if (err instanceof Error) {
+            result.push({ message: err.message });
+          }
+        }
+        setErrors(result);
+      }, delayMs);
+    },
+    [delayMs]
+  );
+  return { errors, validate };
+}
+var ThemeCtx = react.createContext({});
+function useBuilderTheme() {
+  return react.useContext(ThemeCtx);
+}
+function themeToCssVars(theme) {
+  const vars = {};
+  if (theme.background) vars["--background"] = theme.background;
+  if (theme.foreground) vars["--foreground"] = theme.foreground;
+  if (theme.card) {
+    vars["--card"] = theme.card;
+    vars["--card-foreground"] = theme.foreground ?? "";
+    vars["--popover"] = theme.card;
+    vars["--popover-foreground"] = theme.foreground ?? "";
+  }
+  if (theme.primary) vars["--primary"] = theme.primary;
+  if (theme.primaryForeground) vars["--primary-foreground"] = theme.primaryForeground;
+  if (theme.secondary) vars["--secondary"] = theme.secondary;
+  if (theme.secondaryForeground) vars["--secondary-foreground"] = theme.secondaryForeground;
+  if (theme.muted) vars["--muted"] = theme.muted;
+  if (theme.mutedForeground) vars["--muted-foreground"] = theme.mutedForeground;
+  if (theme.accent) vars["--accent"] = theme.accent;
+  if (theme.accentForeground) vars["--accent-foreground"] = theme.accentForeground;
+  if (theme.destructive) vars["--destructive"] = theme.destructive;
+  if (theme.destructiveForeground) vars["--destructive-foreground"] = theme.destructiveForeground;
+  if (theme.border) vars["--border"] = theme.border;
+  if (theme.input) vars["--input"] = theme.input;
+  if (theme.ring) vars["--ring"] = theme.ring;
+  if (theme.radius) vars["--radius"] = theme.radius;
+  if (theme.surface) vars["--fcb-surface"] = theme.surface;
+  if (theme.surfaceHover) vars["--fcb-surface-hover"] = theme.surfaceHover;
+  if (theme.canvas) vars["--fcb-canvas"] = theme.canvas;
+  if (theme.panel) vars["--fcb-panel"] = theme.panel;
+  if (theme.borderStrong) vars["--fcb-border-strong"] = theme.borderStrong;
+  if (theme.textDim) vars["--fcb-text-dim"] = theme.textDim;
+  return vars;
+}
+function FormBuilderThemeProvider({ theme, children }) {
+  const resolved = theme ?? {};
+  const cssVars = react.useMemo(() => themeToCssVars(resolved), [resolved]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeCtx.Provider, { value: resolved, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-fcb-root": "", style: cssVars, className: "w-full h-full", children }) });
+}
+var FormBuilderErrorBoundary = class extends react.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, info) {
+    console.error("[FormBuilder] Render error:", error, info.componentStack);
+  }
+  render() {
+    if (this.state.hasError) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center justify-center h-full bg-background text-foreground p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-md text-center space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold", children: "Something went wrong" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "The form builder encountered an unexpected error. Your schema data is preserved." }),
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "text-xs text-destructive bg-destructive/10 rounded-md p-3 text-left overflow-auto max-h-32", children: this.state.error?.message }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          fieldcraftReact.Button,
+          {
+            onClick: () => this.setState({ hasError: false, error: null }),
+            variant: "outline",
+            children: "Try Again"
+          }
+        )
+      ] }) });
+    }
+    return this.props.children;
+  }
+};
+function FormBuilderCore(props) {
+  const { initialSchema = DEFAULT_SCHEMA, onChange, onSave, height = "100vh", theme, className, toolbarExtra, questionTypes, palette, preview, templates, schemaUrl } = props;
+  const [viewMode, setViewMode] = react.useState("design");
+  const [jsonText, setJsonText] = react.useState("");
+  const [jsonSwitchError, setJsonSwitchError] = react.useState(null);
+  const [showLogicMap, setShowLogicMap] = react.useState(false);
+  const [showTemplateGallery, setShowTemplateGallery] = react.useState(false);
+  const [saveValidationErrors, setSaveValidationErrors] = react.useState(null);
+  const [schemaUrlLoading, setSchemaUrlLoading] = react.useState(!!schemaUrl);
+  const [schemaUrlError, setSchemaUrlError] = react.useState(null);
+  const { errors: jsonErrors, validate: validateJson } = useDebouncedValidation(400);
+  const mergedQuestionTypes = questionTypes ? { ...QUESTION_TYPE_INFO, ...questionTypes } : QUESTION_TYPE_INFO;
+  const builderState = useBuilderState(initialSchema);
+  const dragDrop = useDragDrop(builderState);
+  const fileInputRef = react.useRef(null);
+  const [mobilePanel, setMobilePanel] = react.useState("none");
+  react.useEffect(() => {
+    if (builderState.selectedItem && window.innerWidth < 768) {
+      setMobilePanel("properties");
+    }
+  }, [builderState.selectedItem]);
+  react.useEffect(() => {
+    if (!dragDrop.activeDragItem && mobilePanel === "palette") {
+      setMobilePanel("none");
+    }
+  }, [dragDrop.activeDragItem]);
+  react.useEffect(() => {
+    if (!schemaUrl) return;
+    let cancelled = false;
+    setSchemaUrlLoading(true);
+    setSchemaUrlError(null);
+    fetch(schemaUrl).then((res) => {
+      if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+      return res.json();
+    }).then((json) => {
+      if (cancelled) return;
+      try {
+        const validated = fieldcraftCore.validateSchema(json);
+        builderState.resetSchema(validated);
+      } catch (err) {
+        if (err instanceof fieldcraftCore.FormEngineSchemaError) {
+          setSchemaUrlError(`Invalid schema: ${err.issues[0]?.message ?? "validation failed"}`);
+        } else {
+          setSchemaUrlError(err.message);
+        }
+      }
+      setSchemaUrlLoading(false);
+    }).catch((err) => {
+      if (cancelled) return;
+      setSchemaUrlError(err.message ?? "Failed to fetch schema");
+      setSchemaUrlLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [schemaUrl]);
+  react.useEffect(() => {
+    if (onChange && builderState.isDirty) {
+      onChange(builderState.schema);
+    }
+  }, [builderState.schema, builderState.isDirty, onChange]);
+  const handleSave = react.useCallback(() => {
+    if (!onSave) return;
+    try {
+      fieldcraftCore.validateSchema(builderState.schema);
+      setSaveValidationErrors(null);
+      onSave(builderState.schema);
+      builderState.markClean();
+    } catch (err) {
+      if (err instanceof fieldcraftCore.FormEngineSchemaError) {
+        setSaveValidationErrors(err.issues.map((issue) => issue.message));
+      } else {
+        setSaveValidationErrors([err.message ?? "Unknown validation error"]);
+      }
+    }
+  }, [onSave, builderState]);
+  const handleExport = react.useCallback(() => {
+    const json = JSON.stringify(builderState.schema, null, 2);
+    const blob = new Blob([json], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${builderState.schema.title?.replace(/\s+/g, "-").toLowerCase() || "form"}-schema.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [builderState.schema]);
+  const handleImport = react.useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const handleFileChange = react.useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        try {
+          const parsed = JSON.parse(event.target?.result);
+          const validated = fieldcraftCore.validateSchema(parsed);
+          builderState.resetSchema(validated);
+        } catch (err) {
+          if (err instanceof fieldcraftCore.FormEngineSchemaError) {
+            const details = err.issues.slice(0, 3).map((i) => `\u2022 ${i.path.join(".")}: ${i.message}`).join("\n");
+            alert(`Invalid schema:
+${details}`);
+          } else if (err instanceof SyntaxError) {
+            alert("Failed to parse JSON file.");
+          } else {
+            alert("Invalid schema file.");
+          }
+        }
+      };
+      reader.readAsText(file);
+      e.target.value = "";
+    },
+    [builderState]
+  );
+  const handleViewModeChange = react.useCallback(
+    (newMode) => {
+      setJsonSwitchError(null);
+      if (viewMode === "json" && newMode !== "json") {
+        try {
+          const parsed = JSON.parse(jsonText);
+          const validated = fieldcraftCore.validateSchema(parsed);
+          builderState.resetSchema(validated);
+        } catch (err) {
+          if (err instanceof SyntaxError) {
+            setJsonSwitchError("Cannot switch: JSON has syntax errors");
+          } else if (err instanceof fieldcraftCore.FormEngineSchemaError) {
+            setJsonSwitchError(`Cannot switch: ${err.issues[0]?.message ?? "Invalid schema"}`);
+          } else {
+            setJsonSwitchError("Cannot switch: Invalid schema");
+          }
+          return;
+        }
+      }
+      if (newMode === "json") {
+        setJsonText(JSON.stringify(builderState.schema, null, 2));
+      }
+      setViewMode(newMode);
+    },
+    [viewMode, jsonText, builderState]
+  );
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      const mod = e.metaKey || e.ctrlKey;
+      const tag = e.target.tagName;
+      const isEditing = tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT";
+      if (mod && e.key === "z" && !e.shiftKey) {
+        e.preventDefault();
+        builderState.undo();
+        return;
+      }
+      if (mod && e.key === "z" && e.shiftKey) {
+        e.preventDefault();
+        builderState.redo();
+        return;
+      }
+      if (mod && e.key === "s") {
+        e.preventDefault();
+        handleSave();
+        return;
+      }
+      if (isEditing) return;
+      if (e.key === "Delete" || e.key === "Backspace") {
+        const sel = builderState.selectedItem;
+        if (!sel) return;
+        e.preventDefault();
+        if (sel.type === "question") {
+          builderState.removeQuestion(sel.sectionId, sel.questionId);
+        } else if (sel.type === "section") {
+          builderState.removeSection(sel.sectionId);
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        if (builderState.selectedItem) {
+          e.preventDefault();
+          builderState.clearSelection();
+        }
+        return;
+      }
+      if (mod && e.key === "d") {
+        const sel = builderState.selectedItem;
+        if (!sel) return;
+        e.preventDefault();
+        if (sel.type === "question") {
+          builderState.duplicateQuestion(sel.sectionId, sel.questionId);
+        } else if (sel.type === "section") {
+          builderState.duplicateSection(sel.sectionId);
+        }
+      }
+    },
+    [builderState, handleSave]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(FormBuilderThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    core.DndContext,
+    {
+      sensors: dragDrop.sensors,
+      onDragStart: dragDrop.handleDragStart,
+      onDragEnd: dragDrop.handleDragEnd,
+      onDragCancel: dragDrop.handleDragCancel,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn("flex flex-col bg-background text-foreground", className),
@@ -3607,8 +4679,74 @@ ${details}`);
                   /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Separator, { orientation: "vertical", className: "mx-2 h-5" }),
                   builderState.isDirty && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-primary", role: "status", children: "Unsaved changes" })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: toolbarExtra }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 bg-muted rounded-md p-0.5", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      fieldcraftReact.Button,
+                      {
+                        variant: viewMode === "design" ? "secondary" : "ghost",
+                        size: "sm",
+                        onClick: () => handleViewModeChange("design"),
+                        className: "gap-1.5 h-7 px-2.5 text-xs",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PencilRuler, { size: 13, strokeWidth: 1.75 }),
+                          "Design"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      fieldcraftReact.Button,
+                      {
+                        variant: viewMode === "preview" ? "secondary" : "ghost",
+                        size: "sm",
+                        onClick: () => handleViewModeChange("preview"),
+                        className: "gap-1.5 h-7 px-2.5 text-xs",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 13, strokeWidth: 1.75 }),
+                          "Preview"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      fieldcraftReact.Button,
+                      {
+                        variant: viewMode === "json" ? "secondary" : "ghost",
+                        size: "sm",
+                        onClick: () => handleViewModeChange("json"),
+                        className: "gap-1.5 h-7 px-2.5 text-xs",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { size: 13, strokeWidth: 1.75 }),
+                          "JSON"
+                        ]
+                      }
+                    )
+                  ] }),
+                  toolbarExtra
+                ] }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1.5", children: [
+                  templates && templates.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                    fieldcraftReact.Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      onClick: () => setShowTemplateGallery(true),
+                      title: "Browse templates",
+                      "aria-label": "Template gallery",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LayoutTemplate, { size: 15, strokeWidth: 1.75 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    fieldcraftReact.Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      onClick: () => setShowLogicMap(true),
+                      title: "View branching logic map",
+                      "aria-label": "Logic map",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranch, { size: 15, strokeWidth: 1.75 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Separator, { orientation: "vertical", className: "mx-1 h-5" }),
                   /* @__PURE__ */ jsxRuntime.jsx(
                     fieldcraftReact.Button,
                     {
@@ -3652,6 +4790,47 @@ ${details}`);
                     }
                   ) }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 bg-muted rounded-md p-0.5", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        fieldcraftReact.Button,
+                        {
+                          variant: viewMode === "design" ? "secondary" : "ghost",
+                          size: "sm",
+                          onClick: () => handleViewModeChange("design"),
+                          className: "gap-1 h-7 px-2 text-xs",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PencilRuler, { size: 12, strokeWidth: 1.75 }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Design" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        fieldcraftReact.Button,
+                        {
+                          variant: viewMode === "preview" ? "secondary" : "ghost",
+                          size: "sm",
+                          onClick: () => handleViewModeChange("preview"),
+                          className: "gap-1 h-7 px-2 text-xs",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 12, strokeWidth: 1.75 }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Preview" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        fieldcraftReact.Button,
+                        {
+                          variant: viewMode === "json" ? "secondary" : "ghost",
+                          size: "sm",
+                          onClick: () => handleViewModeChange("json"),
+                          className: "gap-1 h-7 px-2 text-xs",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { size: 12, strokeWidth: 1.75 }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "JSON" })
+                          ]
+                        }
+                      )
+                    ] }),
                     toolbarExtra,
                     /* @__PURE__ */ jsxRuntime.jsxs(fieldcraftReact.Button, { onClick: handleSave, size: "sm", className: "border-0 shadow-sm fcb-glow ml-1", "aria-label": "Save form", children: [
                       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { size: 14, strokeWidth: 2 }),
@@ -3740,7 +4919,50 @@ ${details}`);
                   "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex overflow-hidden relative", children: [
+              jsonSwitchError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 px-4 py-2 bg-destructive/10 border-b border-destructive/20 text-destructive text-xs flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: jsonSwitchError }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => setJsonSwitchError(null), className: "ml-2 hover:underline", children: "Dismiss" })
+              ] }),
+              saveValidationErrors && saveValidationErrors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 px-4 py-2 bg-destructive/10 border-b border-destructive/20 text-xs", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-destructive", children: [
+                    "Schema validation failed (",
+                    saveValidationErrors.length,
+                    " issue",
+                    saveValidationErrors.length !== 1 ? "s" : "",
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => setSaveValidationErrors(null), className: "text-destructive hover:underline", children: "Dismiss" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "list-disc pl-4 text-destructive/80 space-y-0.5", children: [
+                  saveValidationErrors.slice(0, 10).map((msg, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: msg }, i)),
+                  saveValidationErrors.length > 10 && /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                    "...and ",
+                    saveValidationErrors.length - 10,
+                    " more"
+                  ] })
+                ] })
+              ] }),
+              schemaUrlLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 px-4 py-2 border-b border-border bg-muted/50 text-xs text-muted-foreground flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block w-3 h-3 border-2 border-primary border-t-transparent rounded-full animate-spin" }),
+                "Loading schema from URL..."
+              ] }),
+              schemaUrlError && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 px-4 py-2 bg-destructive/10 border-b border-destructive/20 text-destructive text-xs flex items-center justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  "Failed to load schema: ",
+                  schemaUrlError
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => setSchemaUrlError(null), className: "ml-2 hover:underline", children: "Dismiss" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex overflow-hidden relative", children: viewMode === "json" ? /* @__PURE__ */ jsxRuntime.jsx(
+                JsonEditorPanel,
+                {
+                  value: jsonText,
+                  onChange: setJsonText,
+                  errors: jsonErrors,
+                  onValidate: validateJson
+                }
+              ) : viewMode === "preview" ? /* @__PURE__ */ jsxRuntime.jsx(FormPreviewPanel, { schema: builderState.schema, preview }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(QuestionPalette, { questionTypes: mergedQuestionTypes, palette }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(FormCanvas, { builderState }),
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(PropertiesPanel, { builderState }) }),
@@ -3754,11 +4976,27 @@ ${details}`);
                     "aria-hidden": "true"
                   }
                 )
-              ] })
+              ] }) })
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { dropAnimation: null, children: dragDrop.activeDragItem && /* @__PURE__ */ jsxRuntime.jsx(DragOverlayContent, { item: dragDrop.activeDragItem, schema: builderState.schema, questionTypes: mergedQuestionTypes }) })
+        /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { dropAnimation: null, children: dragDrop.activeDragItem && /* @__PURE__ */ jsxRuntime.jsx(DragOverlayContent, { item: dragDrop.activeDragItem, schema: builderState.schema, questionTypes: mergedQuestionTypes }) }),
+        showLogicMap && /* @__PURE__ */ jsxRuntime.jsx(
+          LogicFlowEditor,
+          {
+            schema: builderState.schema,
+            onChange: (updated) => builderState.resetSchema(updated),
+            onClose: () => setShowLogicMap(false)
+          }
+        ),
+        showTemplateGallery && templates && /* @__PURE__ */ jsxRuntime.jsx(
+          TemplateGallery,
+          {
+            templates,
+            onSelect: (template) => builderState.resetSchema(template.schema),
+            onClose: () => setShowTemplateGallery(false)
+          }
+        )
       ]
     }
   ) });
@@ -3790,99 +5028,343 @@ function DragOverlayContent({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: found.question.label })
     ] });
   }
-  if (item.type === "section") {
-    const section = schema.sections.find((s) => s.id === item.sectionId);
-    if (!section) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 rounded-md border border-primary bg-card text-foreground fcb-shadow-lg cursor-grabbing max-w-sm", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold", children: section.title }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground mt-0.5", children: [
-        section.questions.length,
-        " field",
-        section.questions.length !== 1 ? "s" : ""
+  if (item.type === "section") {
+    const section = schema.sections.find((s) => s.id === item.sectionId);
+    if (!section) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 rounded-md border border-primary bg-card text-foreground fcb-shadow-lg cursor-grabbing max-w-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold", children: section.title }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground mt-0.5", children: [
+        section.questions.length,
+        " field",
+        section.questions.length !== 1 ? "s" : ""
+      ] })
+    ] });
+  }
+  return null;
+}
+function FormBuilderInner(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(FormBuilderErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(FormBuilderCore, { ...props }) });
+}
+
+// src/form-builder/components/FormBuilderGated.tsx
+var FormBuilder = requireLicense(FormBuilderInner, "FormBuilder");
+
+// src/form-builder/theme/presets.ts
+var squaredrDarkPreset = {
+  background: "#0F1A1F",
+  foreground: "#E8EFF1",
+  card: "#16242A",
+  primary: "#63BDB4",
+  primaryForeground: "#0F1A1F",
+  secondary: "#182F31",
+  secondaryForeground: "#E8EFF1",
+  muted: "#182F31",
+  mutedForeground: "#8CA1A9",
+  accent: "#182F31",
+  accentForeground: "#E8EFF1",
+  destructive: "#E08072",
+  destructiveForeground: "#0F1A1F",
+  border: "#2A3B42",
+  input: "#2A3B42",
+  ring: "#63BDB4",
+  radius: "0px",
+  surface: "#16242A",
+  surfaceHover: "#182F31",
+  canvas: "#0F1A1F",
+  panel: "#16242A",
+  borderStrong: "#2F4F4C",
+  textDim: "#5E7680"
+};
+var cleanPreset = {
+  background: "#F4F7F8",
+  foreground: "#12222A",
+  card: "#FFFFFF",
+  primary: "#1F6B6E",
+  primaryForeground: "#FFFFFF",
+  secondary: "#EDF3F2",
+  secondaryForeground: "#12222A",
+  muted: "#EDF3F2",
+  mutedForeground: "#6A7B85",
+  accent: "#EDF3F2",
+  accentForeground: "#12222A",
+  destructive: "#B04A3C",
+  destructiveForeground: "#FFFFFF",
+  border: "#DCE4E8",
+  input: "#DCE4E8",
+  ring: "#1F6B6E",
+  radius: "0px",
+  surface: "#FAFCFC",
+  surfaceHover: "#EDF3F2",
+  canvas: "#F4F7F8",
+  panel: "#FFFFFF",
+  borderStrong: "#B9D1CF",
+  textDim: "#6A7B85"
+};
+function formatCurrency(amount, currency) {
+  if (amount == null) return "";
+  try {
+    return new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: currency ?? "USD"
+    }).format(amount);
+  } catch {
+    return `${currency ?? "USD"} ${amount.toFixed(2)}`;
+  }
+}
+function ProPaymentField(props) {
+  const { field, value, error, touched, disabled, readonly, onChange, onBlur, customProps } = props;
+  const config = field.config;
+  const current = value ?? { status: "pending" };
+  const provider = config?.provider ?? "stripe";
+  const publicKey = config?.publicKey;
+  const amount = customProps?.amount ?? config?.amount;
+  const currency = config?.currency ?? "USD";
+  const directSecret = customProps?.clientSecret;
+  const onCreateIntent = customProps?.onCreatePaymentIntent;
+  const onPaymentComplete = customProps?.onPaymentComplete;
+  const serverUrl = config?.serverUrl;
+  const [clientSecret, setClientSecret] = react.useState(directSecret);
+  const [intentLoading, setIntentLoading] = react.useState(false);
+  const [intentError, setIntentError] = react.useState(null);
+  const mode = directSecret ? "direct" : onCreateIntent ? "callback" : serverUrl ? "url" : "setup";
+  react.useEffect(() => {
+    if (directSecret) {
+      setClientSecret(directSecret);
+      return;
+    }
+    if (mode === "setup" || !amount || !publicKey) return;
+    if (clientSecret) return;
+    const fetchIntent = async () => {
+      setIntentLoading(true);
+      setIntentError(null);
+      try {
+        if (mode === "callback" && onCreateIntent) {
+          const result = await onCreateIntent({ amount, currency, provider, metadata: { fieldId: field.id } });
+          setClientSecret(result.clientSecret);
+        } else if (mode === "url" && serverUrl) {
+          const res = await fetch(serverUrl, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ amount, currency, provider, metadata: { fieldId: field.id } })
+          });
+          if (!res.ok) throw new Error(`Server error (${res.status})`);
+          const data = await res.json();
+          setClientSecret(data.clientSecret);
+        }
+      } catch (err) {
+        setIntentError(err instanceof Error ? err.message : "Failed to create payment intent");
+      } finally {
+        setIntentLoading(false);
+      }
+    };
+    fetchIntent();
+  }, [mode, amount, currency, provider, publicKey, directSecret, clientSecret, onCreateIntent, serverUrl, field.id]);
+  const handleSuccess = (chargeId) => {
+    const result = { status: "succeeded", chargeId };
+    onChange(result);
+    onPaymentComplete?.(result);
+    onBlur();
+  };
+  const handleError = (message) => {
+    const result = { status: "failed", error: message };
+    onChange(result);
+    onPaymentComplete?.(result);
+    onBlur();
+  };
+  if (!publicKey) {
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border-2 border-dashed border-input p-4 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      "Payment field \u2014 configure a ",
+      /* @__PURE__ */ jsxRuntime.jsx("code", { className: "bg-muted px-1 rounded text-xs", children: "publicKey" }),
+      " in the field properties panel."
+    ] }) }) });
+  }
+  if (provider !== "stripe") {
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border border-input bg-muted/50 p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+      'Provider "',
+      provider,
+      '" \u2014 coming soon.'
+    ] }) }) });
+  }
+  if (current.status === "succeeded") {
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-input p-4", children: [
+      amount != null && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mb-2", children: [
+        formatCurrency(amount, currency),
+        config?.description && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          " \u2014 ",
+          config.description
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm font-medium", style: { color: "var(--success, #22c55e)" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, width: 16, height: 16, children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "Payment successful",
+          current.chargeId ? ` (${current.chargeId})` : ""
+        ] })
+      ] })
+    ] }) });
+  }
+  if (current.status === "failed") {
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-destructive/50 p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-destructive font-medium", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, width: 16, height: 16, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "Payment failed",
+          current.error ? `: ${current.error}` : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "mt-2 text-xs text-primary hover:underline",
+          onClick: () => {
+            onChange({ status: "pending" });
+            setClientSecret(void 0);
+          },
+          children: "Retry"
+        }
+      )
+    ] }) });
+  }
+  if (intentLoading || mode !== "setup" && mode !== "direct" && !clientSecret) {
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-input p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Payment" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs bg-muted px-2 py-0.5 rounded", children: provider })
+      ] }),
+      amount != null && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: [
+        "Amount: ",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatCurrency(amount, currency) }),
+        config?.description && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          " \u2014 ",
+          config.description
+        ] })
+      ] }),
+      intentError ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: intentError }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "mt-2 text-xs text-primary hover:underline",
+            onClick: () => {
+              setIntentError(null);
+              setClientSecret(void 0);
+            },
+            children: "Retry"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "animate-spin size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Preparing payment..." })
+      ] })
+    ] }) });
+  }
+  if (!clientSecret) {
+    const waitingForAmount = config?.amountField && !amount;
+    return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-input p-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Payment" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs bg-muted px-2 py-0.5 rounded", children: provider })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: waitingForAmount ? "Select an option above to proceed with payment." : "Provide a clientSecret via customProps, an onCreatePaymentIntent callback, or a serverUrl." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.FieldWrapper, { field, error, touched, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-input p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Payment" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs bg-muted px-2 py-0.5 rounded", children: provider })
+    ] }),
+    amount != null && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground mb-3", children: [
+      "Amount: ",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatCurrency(amount, currency) }),
+      config?.description && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        " \u2014 ",
+        config.description
       ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      react.Suspense,
+      {
+        fallback: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground py-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "animate-spin size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" }) }),
+          "Loading payment form..."
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          PayKitCheckout,
+          {
+            publicKey,
+            clientSecret,
+            amount,
+            currency,
+            disabled: disabled || readonly,
+            onSuccess: handleSuccess,
+            onError: handleError
+          }
+        )
+      }
+    )
+  ] }) });
+}
+function PayKitCheckout({
+  publicKey,
+  clientSecret,
+  amount,
+  currency,
+  disabled,
+  onSuccess,
+  onError
+}) {
+  const [PayKit, setPayKit] = react.useState(null);
+  const [loadError, setLoadError] = react.useState(null);
+  react.useEffect(() => {
+    let cancelled = false;
+    Promise.all([
+      // @ts-expect-error — optional peer dep, resolved at runtime
+      import('@squaredr/paykit-react'),
+      // @ts-expect-error — optional peer dep, resolved at runtime
+      import('@squaredr/paykit-stripe/client')
+    ]).then(([paykit, stripe]) => {
+      if (cancelled) return;
+      setPayKit({
+        Provider: paykit.PayKitProvider,
+        Form: paykit.CheckoutForm,
+        adapter: new stripe.StripeClientAdapter(publicKey)
+      });
+    }).catch((err) => {
+      if (cancelled) return;
+      setLoadError(
+        `Failed to load payment SDK. Ensure @squaredr/paykit-react and @squaredr/paykit-stripe are installed. (${err.message})`
+      );
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [publicKey]);
+  if (loadError) {
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: loadError });
+  }
+  if (!PayKit) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground py-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "animate-spin size-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", strokeDasharray: "60", strokeDashoffset: "20" }) }),
+      "Loading Stripe..."
     ] });
   }
-  return null;
-}
-function FormBuilderInner(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(FormBuilderErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(FormBuilderCore, { ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(PayKit.Provider, { clientAdapter: PayKit.adapter, children: /* @__PURE__ */ jsxRuntime.jsx(
+    PayKit.Form,
+    {
+      clientSecret,
+      submitLabel: disabled ? "Payment disabled" : `Pay ${formatCurrency(amount, currency)}`,
+      onSuccess: (result) => onSuccess(result.chargeId),
+      onError: (err) => onError(err.message)
+    }
+  ) });
 }
-
-// src/form-builder/components/FormBuilderGated.tsx
-var FormBuilder = requireLicense(FormBuilderInner, "FormBuilder");
-
-// src/form-builder/theme/presets.ts
-var squaredrDarkPreset = {
-  background: "#0a0a0b",
-  // ink-950
-  foreground: "#e8e8ea",
-  // ink-100
-  card: "#111113",
-  // ink-900
-  primary: "oklch(0.82 0.14 210)",
-  // sr-accent-cyan
-  primaryForeground: "#0a0a0b",
-  // ink-950
-  secondary: "#17171a",
-  // ink-850
-  secondaryForeground: "#e8e8ea",
-  // ink-100
-  muted: "#111113",
-  // ink-900
-  mutedForeground: "#8a8a95",
-  // ink-400
-  accent: "#17171a",
-  // ink-850
-  accentForeground: "#e8e8ea",
-  // ink-100
-  destructive: "oklch(0.68 0.22 25)",
-  // sr-error
-  destructiveForeground: "#e8e8ea",
-  // ink-100
-  border: "#1c1c20",
-  // ink-800
-  input: "#1c1c20",
-  // ink-800
-  ring: "oklch(0.82 0.14 210)",
-  // sr-accent-cyan
-  radius: "6px",
-  surface: "#111113",
-  // ink-900
-  surfaceHover: "#17171a",
-  // ink-850
-  canvas: "#0a0a0b",
-  // ink-950
-  panel: "#111113",
-  // ink-900
-  borderStrong: "#26262c",
-  // ink-700
-  textDim: "#5a5a66"
-  // ink-500
-};
-var cleanPreset = {
-  background: "#ffffff",
-  foreground: "#111113",
-  card: "#f9fafb",
-  primary: "#0d9488",
-  primaryForeground: "#ffffff",
-  secondary: "#f3f4f6",
-  secondaryForeground: "#111113",
-  muted: "#f3f4f6",
-  mutedForeground: "#6b7280",
-  accent: "#f3f4f6",
-  accentForeground: "#111113",
-  destructive: "#ef4444",
-  destructiveForeground: "#ffffff",
-  border: "#e5e7eb",
-  input: "#e5e7eb",
-  ring: "#0d9488",
-  radius: "6px",
-  surface: "#f9fafb",
-  surfaceHover: "#f3f4f6",
-  canvas: "#ffffff",
-  panel: "#ffffff",
-  borderStrong: "#d1d5db",
-  textDim: "#9ca3af"
+var PRO_FIELD_OVERRIDES = {
+  payment: ProPaymentField
 };
 
 // src/response-viewer/clinical-display-data.ts
@@ -4021,10 +5503,30 @@ function getScoreSeverity(instrumentKey, score) {
   if (!thresholds) return void 0;
   return thresholds.find((t) => score >= t.min && score <= t.max);
 }
-function ResponseTable({ schema, responses, onRowClick }) {
+function ResponseTable({
+  schema,
+  responses,
+  onRowClick,
+  selectable,
+  selectedIds,
+  onToggleSelect,
+  onSelectAll
+}) {
   const questions = getAllQuestions(schema);
+  const allPageSelected = selectable && responses.length > 0 && responses.every(
+    (r) => r.sessionToken && selectedIds?.has(r.sessionToken)
+  );
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse text-[13px]", children: [
     /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "bg-muted", children: [
+      selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 w-8 border-b-2 border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: allPageSelected,
+          onChange: () => onSelectAll?.(),
+          className: "accent-primary"
+        }
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-3 py-2 text-left font-semibold text-foreground border-b-2 border-border whitespace-nowrap", children: "Submitted" }),
       questions.map((q) => /* @__PURE__ */ jsxRuntime.jsx(
         "th",
@@ -4043,6 +5545,19 @@ function ResponseTable({ schema, responses, onRowClick }) {
           onClick: () => onRowClick?.(response),
           className: onRowClick ? "cursor-pointer border-b border-border hover:bg-accent transition-colors" : "border-b border-border",
           children: [
+            selectable && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: !!(response.sessionToken && selectedIds?.has(response.sessionToken)),
+                onChange: (e) => {
+                  e.stopPropagation();
+                  if (response.sessionToken) onToggleSelect?.(response.sessionToken);
+                },
+                onClick: (e) => e.stopPropagation(),
+                className: "accent-primary"
+              }
+            ) }),
             /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-2 text-foreground max-w-50 overflow-hidden text-ellipsis whitespace-nowrap", children: new Date(response.submittedAt).toLocaleString() }),
             questions.map((q) => /* @__PURE__ */ jsxRuntime.jsx(
               "td",
@@ -4060,7 +5575,7 @@ function ResponseTable({ schema, responses, onRowClick }) {
       responses.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
         "td",
         {
-          colSpan: questions.length + 2,
+          colSpan: questions.length + 2 + (selectable ? 1 : 0),
           className: "px-3 py-8 text-center text-muted-foreground",
           children: "No responses yet"
         }
@@ -4148,15 +5663,37 @@ function formatCellValue(value, type) {
   if (typeof value === "object") return JSON.stringify(value);
   return String(value);
 }
-function ResponseCard({ response, fields, onClick }) {
+function ResponseCard({
+  response,
+  fields,
+  onClick,
+  selectable,
+  selected,
+  onToggleSelect
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       onClick,
-      className: onClick ? "border border-border rounded-lg p-4 bg-card cursor-pointer transition-shadow hover:shadow-md" : "border border-border rounded-lg p-4 bg-card",
+      className: (onClick ? "border border-border rounded-lg p-4 bg-card cursor-pointer transition-shadow hover:shadow-md" : "border border-border rounded-lg p-4 bg-card") + (selected ? " ring-2 ring-primary" : ""),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between mb-3 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(response.submittedAt).toLocaleString() }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            selectable && /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: !!selected,
+                onChange: (e) => {
+                  e.stopPropagation();
+                  onToggleSelect?.();
+                },
+                onClick: (e) => e.stopPropagation(),
+                className: "accent-primary"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: new Date(response.submittedAt).toLocaleString() })
+          ] }),
           response.completionTimeMs != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
             Math.round(response.completionTimeMs / 1e3),
             "s"
@@ -4247,18 +5784,19 @@ function formatCardValue(value, type) {
   if (typeof value === "object") return JSON.stringify(value);
   return String(value);
 }
-function ResponseDetail({ response, fields, onBack }) {
+function ResponseDetail({ response, fields, onBack, onDelete }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-5 pb-3 border-b border-border", children: [
       onBack && /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "outline", size: "sm", onClick: onBack, children: "Back" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-foreground", children: "Response Detail" }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground", children: [
           "Submitted ",
           new Date(response.submittedAt).toLocaleString(),
           response.completionTimeMs != null && ` \u2014 ${Math.round(response.completionTimeMs / 1e3)}s`
         ] })
-      ] })
+      ] }),
+      onDelete && /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "destructive", size: "sm", onClick: onDelete, children: "Delete" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: fields.map((field) => /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -4611,6 +6149,491 @@ function formatFallbackValue(value) {
   if (typeof value === "object") return JSON.stringify(value, null, 2);
   return String(value);
 }
+function TimelineView({ responses, questions, onSelect }) {
+  const grouped = react.useMemo(() => groupByDay(responses), [responses]);
+  if (responses.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center text-muted-foreground text-sm", children: "No responses to display." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 space-y-6", children: grouped.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-muted-foreground shrink-0", children: group.dateLabel }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground shrink-0", children: [
+        "(",
+        group.responses.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 ml-4 border-l-2 border-border/50 pl-4", children: group.responses.map((response, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      TimelineEntry,
+      {
+        response,
+        questions,
+        onView: () => onSelect(response)
+      },
+      response.sessionToken || idx
+    )) })
+  ] }, group.dateLabel)) });
+}
+function TimelineEntry({
+  response,
+  questions,
+  onView
+}) {
+  const time = new Date(response.submittedAt).toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+  const preview = [];
+  for (const q of questions) {
+    if (preview.length >= 3) break;
+    const val = response.values[q.id];
+    if (val != null && val !== "") {
+      preview.push({ questionId: q.id, label: q.label, type: q.type, value: val });
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-start gap-3 group", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -left-[21px] top-2.5 w-2 h-2 rounded-full bg-border group-hover:bg-primary transition-colors" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 rounded border border-border bg-card p-3 hover:border-primary/40 transition-colors", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground", children: time }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          response.totalScore != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            "Score: ",
+            response.totalScore
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "ghost", size: "sm", className: "h-6 text-xs", onClick: onView, children: "View" })
+        ] })
+      ] }),
+      preview.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-1", children: preview.map((field) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+          field.label,
+          ": "
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: formatPreviewValue(field.value, field.type) })
+      ] }, field.questionId)) })
+    ] })
+  ] });
+}
+function groupByDay(responses) {
+  const sorted = [...responses].sort(
+    (a, b) => new Date(b.submittedAt).getTime() - new Date(a.submittedAt).getTime()
+  );
+  const groups = /* @__PURE__ */ new Map();
+  for (const r of sorted) {
+    const date = new Date(r.submittedAt).toLocaleDateString(void 0, {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    });
+    const existing = groups.get(date);
+    if (existing) {
+      existing.push(r);
+    } else {
+      groups.set(date, [r]);
+    }
+  }
+  return Array.from(groups.entries()).map(([dateLabel, responses2]) => ({
+    dateLabel,
+    responses: responses2
+  }));
+}
+function formatPreviewValue(value, type) {
+  if (value == null) return "\u2014";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (Array.isArray(value)) return value.length > 0 ? value.slice(0, 2).join(", ") + (value.length > 2 ? "..." : "") : "\u2014";
+  if (typeof value === "object") {
+    if (type === "legal_name") {
+      const n = value;
+      return [n.first, n.last].filter(Boolean).join(" ") || "\u2014";
+    }
+    return "...";
+  }
+  const str = String(value);
+  return str.length > 40 ? str.slice(0, 40) + "..." : str;
+}
+
+// src/response-viewer/stats-utils.ts
+function computeStats(responses, schema) {
+  if (responses.length === 0) {
+    return {
+      totalCount: 0,
+      completionRate: 0,
+      avgCompletionTimeMs: null,
+      dateRange: null,
+      fieldSummaries: []
+    };
+  }
+  const questions = getStatsQuestions(schema);
+  const requiredIds = new Set(questions.filter((q) => q.required).map((q) => q.id));
+  let completedCount = 0;
+  for (const r of responses) {
+    let allFilled = true;
+    for (const id of requiredIds) {
+      if (r.values[id] == null || r.values[id] === "") {
+        allFilled = false;
+        break;
+      }
+    }
+    if (allFilled) completedCount++;
+  }
+  const completionRate = requiredIds.size > 0 ? completedCount / responses.length : 1;
+  const completionTimes = responses.map((r) => r.completionTimeMs).filter((t) => t != null && t > 0);
+  const avgCompletionTimeMs = completionTimes.length > 0 ? completionTimes.reduce((a, b) => a + b, 0) / completionTimes.length : null;
+  const timestamps = responses.map((r) => new Date(r.submittedAt).getTime());
+  const earliest = new Date(Math.min(...timestamps)).toISOString();
+  const latest = new Date(Math.max(...timestamps)).toISOString();
+  const fieldSummaries = questions.map((q) => computeFieldSummary(q, responses));
+  return {
+    totalCount: responses.length,
+    completionRate,
+    avgCompletionTimeMs,
+    dateRange: { earliest, latest },
+    fieldSummaries
+  };
+}
+function computeFieldSummary(question, responses) {
+  const values = responses.map((r) => r.values[question.id]).filter((v) => v != null && v !== "");
+  const filledCount = values.length;
+  const filledRate = responses.length > 0 ? filledCount / responses.length : 0;
+  const base = {
+    fieldId: question.id,
+    label: question.label,
+    type: question.type,
+    filledCount,
+    filledRate
+  };
+  if (isNumericType(question.type)) {
+    const nums = values.map((v) => typeof v === "number" ? v : Number(v)).filter((n) => !isNaN(n));
+    if (nums.length > 0) {
+      return {
+        ...base,
+        kind: "numeric",
+        mean: nums.reduce((a, b) => a + b, 0) / nums.length,
+        min: Math.min(...nums),
+        max: Math.max(...nums)
+      };
+    }
+    return { ...base, kind: "other" };
+  }
+  if (isCategoricalType(question.type)) {
+    const counts = /* @__PURE__ */ new Map();
+    for (const v of values) {
+      const key = String(v);
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    }
+    let mode = "";
+    let modeCount = 0;
+    for (const [key, count] of counts) {
+      if (count > modeCount) {
+        mode = key;
+        modeCount = count;
+      }
+    }
+    return {
+      ...base,
+      kind: "categorical",
+      mode,
+      modeCount,
+      uniqueCount: counts.size
+    };
+  }
+  return { ...base, kind: "other" };
+}
+function isNumericType(type) {
+  return [
+    "number",
+    "slider",
+    "rating",
+    "nps",
+    "opinion_scale",
+    "pain_scale"
+  ].includes(type);
+}
+function isCategoricalType(type) {
+  return [
+    "single_select",
+    "dropdown",
+    "country_select",
+    "boolean",
+    "consent",
+    "multi_select",
+    "checkbox_group"
+  ].includes(type);
+}
+function getStatsQuestions(schema) {
+  const questions = [];
+  for (const section of schema.sections) {
+    for (const q of section.questions) {
+      if (q.type === "info-block" || q.type === "section-header" || q.type === "page-break") {
+        continue;
+      }
+      questions.push(q);
+    }
+  }
+  return questions;
+}
+function StatsPanel({ schema, responses, onClose }) {
+  const stats = react.useMemo(() => computeStats(responses, schema), [responses, schema]);
+  if (stats.totalCount === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 text-sm text-muted-foreground", children: "No responses to compute statistics." });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border bg-muted/30", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-b border-border/50", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground", children: "Statistics" }),
+      /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "ghost", size: "sm", className: "h-6 text-xs", onClick: onClose, children: "Close" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Total Responses",
+            value: String(stats.totalCount)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Completion Rate",
+            value: `${Math.round(stats.completionRate * 100)}%`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Avg. Completion Time",
+            value: formatTime(stats.avgCompletionTimeMs)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Date Range",
+            value: formatDateRange(stats.dateRange)
+          }
+        )
+      ] }),
+      stats.fieldSummaries.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 grid grid-cols-2 sm:grid-cols-3 gap-2", children: stats.fieldSummaries.slice(0, 6).map((f) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "px-2.5 py-2 rounded border border-border bg-background text-xs",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground truncate mb-1", children: f.label }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-foreground font-medium", children: [
+                Math.round(f.filledRate * 100),
+                "% filled"
+              ] }),
+              f.kind === "numeric" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+                "avg ",
+                f.mean.toFixed(1),
+                " (",
+                f.min,
+                "\u2013",
+                f.max,
+                ")"
+              ] }),
+              f.kind === "categorical" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground truncate", children: [
+                "top: ",
+                f.mode,
+                " (",
+                f.modeCount,
+                ")"
+              ] })
+            ] })
+          ]
+        },
+        f.fieldId
+      )) })
+    ] })
+  ] });
+}
+function StatCard({ label, value }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 rounded border border-border bg-background", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] text-muted-foreground mb-0.5", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-foreground", children: value })
+  ] });
+}
+function formatTime(ms) {
+  if (ms == null) return "\u2014";
+  const seconds = Math.round(ms / 1e3);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}m ${remainingSeconds}s`;
+}
+function formatDateRange(range) {
+  if (!range) return "\u2014";
+  const fmt = (iso) => new Date(iso).toLocaleDateString();
+  return `${fmt(range.earliest)} \u2013 ${fmt(range.latest)}`;
+}
+
+// src/response-viewer/chart-utils.ts
+function computeFieldDistribution(responses, fieldId) {
+  const counts = /* @__PURE__ */ new Map();
+  let total = 0;
+  for (const r of responses) {
+    const raw = r.values[fieldId];
+    if (raw == null || raw === "") continue;
+    total++;
+    if (typeof raw === "boolean") {
+      const key = raw ? "Yes" : "No";
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    } else if (Array.isArray(raw)) {
+      for (const item of raw) {
+        const key = String(item);
+        counts.set(key, (counts.get(key) ?? 0) + 1);
+      }
+    } else {
+      const key = String(raw);
+      counts.set(key, (counts.get(key) ?? 0) + 1);
+    }
+  }
+  if (total === 0) return [];
+  const entries = [];
+  for (const [value, count] of counts) {
+    entries.push({
+      value,
+      count,
+      percentage: count / total * 100
+    });
+  }
+  entries.sort((a, b) => b.count - a.count);
+  return entries;
+}
+function getChartableFieldIds(schema) {
+  const chartable = [];
+  const chartTypes = /* @__PURE__ */ new Set([
+    "single_select",
+    "dropdown",
+    "country_select",
+    "boolean",
+    "consent",
+    "multi_select",
+    "checkbox_group",
+    "rating",
+    "nps",
+    "opinion_scale",
+    "pain_scale"
+  ]);
+  for (const section of schema.sections) {
+    for (const q of section.questions) {
+      if (chartTypes.has(q.type)) {
+        chartable.push({ id: q.id, label: q.label, type: q.type });
+      }
+    }
+  }
+  return chartable;
+}
+function ChartPanel({ schema, responses, onClose }) {
+  const chartableFields = react.useMemo(() => getChartableFieldIds(schema), [schema]);
+  const [selectedFieldId, setSelectedFieldId] = react.useState(chartableFields[0]?.id ?? "");
+  const distribution = react.useMemo(() => {
+    if (!selectedFieldId) return [];
+    return computeFieldDistribution(responses, selectedFieldId);
+  }, [responses, selectedFieldId]);
+  const selectedField = chartableFields.find((f) => f.id === selectedFieldId);
+  const maxCount = distribution.length > 0 ? Math.max(...distribution.map((d) => d.count)) : 1;
+  if (chartableFields.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-6 border-b border-border bg-muted/30 text-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No chartable fields found in this schema." }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-1", children: "Charts work with select, dropdown, boolean, rating, and similar field types." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border bg-muted/30", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-b border-border/50", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-foreground", children: "Field Distribution" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            value: selectedFieldId,
+            onChange: (e) => setSelectedFieldId(e.target.value),
+            className: "text-xs bg-background border border-border rounded px-2 py-1 text-foreground",
+            children: chartableFields.map((f) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: f.id, children: f.label }, f.id))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "ghost", size: "sm", className: "h-6 text-xs", onClick: onClose, children: "Close" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
+      distribution.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center py-4", children: "No data for this field." }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+        distribution.slice(0, 10).map((entry) => /* @__PURE__ */ jsxRuntime.jsx(BarRow, { entry, maxCount }, entry.value)),
+        distribution.length > 10 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground mt-2", children: [
+          "+",
+          distribution.length - 10,
+          " more values"
+        ] })
+      ] }),
+      selectedField && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-[11px] text-muted-foreground", children: [
+        responses.length,
+        " response",
+        responses.length !== 1 ? "s" : "",
+        " \xB7 ",
+        distribution.length,
+        " unique value",
+        distribution.length !== 1 ? "s" : ""
+      ] })
+    ] })
+  ] });
+}
+function BarRow({ entry, maxCount }) {
+  const widthPct = maxCount > 0 ? entry.count / maxCount * 100 : 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-24 shrink-0 text-xs text-foreground truncate", title: entry.value, children: entry.value }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-5 bg-background rounded overflow-hidden border border-border/50", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "h-full bg-primary/60 rounded transition-all",
+        style: { width: `${widthPct}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-16 shrink-0 text-xs text-muted-foreground text-right", children: [
+      entry.count,
+      " (",
+      Math.round(entry.percentage),
+      "%)"
+    ] })
+  ] });
+}
+function ConfirmDialog2({
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  onConfirm,
+  onCancel
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute inset-0 bg-black/50",
+        onClick: onCancel
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative bg-background border border-border rounded-lg shadow-lg p-6 max-w-sm w-full mx-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-foreground mb-2", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mb-4", children: message }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "outline", size: "sm", onClick: onCancel, children: cancelLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          fieldcraftReact.Button,
+          {
+            variant: variant === "destructive" ? "destructive" : "default",
+            size: "sm",
+            onClick: onConfirm,
+            children: confirmLabel
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
 
 // src/response-viewer/export-utils.ts
 function buildCsvContent(schema, responses, options = {}) {
@@ -4745,6 +6768,84 @@ function paginate(items, currentPage, pageSize) {
   };
 }
 
+// src/response-viewer/search-utils.ts
+function searchResponses(responses, query, schema) {
+  if (!query.trim()) return responses;
+  const lowerQuery = query.toLowerCase().trim();
+  const questions = getSearchableQuestions(schema);
+  return responses.filter((response) => {
+    if (new Date(response.submittedAt).toLocaleString().toLowerCase().includes(lowerQuery)) {
+      return true;
+    }
+    if (response.sessionToken?.toLowerCase().includes(lowerQuery)) {
+      return true;
+    }
+    for (const q of questions) {
+      const value = response.values[q.id];
+      if (value == null) continue;
+      const stringified = stringifyValue(value, q.type);
+      if (stringified.toLowerCase().includes(lowerQuery)) {
+        return true;
+      }
+    }
+    if (response.totalScore != null && String(response.totalScore).includes(lowerQuery)) {
+      return true;
+    }
+    return false;
+  });
+}
+function getSearchableQuestions(schema) {
+  const questions = [];
+  for (const section of schema.sections) {
+    for (const q of section.questions) {
+      if (q.type === "info-block" || q.type === "section-header" || q.type === "page-break") {
+        continue;
+      }
+      questions.push(q);
+    }
+  }
+  return questions;
+}
+function stringifyValue(value, type) {
+  if (value == null) return "";
+  switch (type) {
+    case "vitals_entry": {
+      if (typeof value !== "object" || value === null) break;
+      const v = value;
+      const parts = [];
+      if (v.systolicBp && v.diastolicBp) parts.push(`BP ${v.systolicBp}/${v.diastolicBp}`);
+      if (v.heartRate) parts.push(`HR ${v.heartRate}`);
+      if (v.temperature) parts.push(`${v.temperature}`);
+      if (v.oxygenSaturation) parts.push(`SpO2 ${v.oxygenSaturation}`);
+      return parts.join(" ");
+    }
+    case "medication_list":
+      if (Array.isArray(value)) {
+        return value.map((m) => [m.name, m.dosage, m.frequency].filter(Boolean).join(" ")).join(" ");
+      }
+      break;
+    case "allergy_list":
+      if (Array.isArray(value)) {
+        return value.map((a) => [a.allergen, a.severity].filter(Boolean).join(" ")).join(" ");
+      }
+      break;
+    case "legal_name": {
+      if (typeof value !== "object" || value === null) break;
+      const n = value;
+      return [n.first, n.middle, n.last].filter(Boolean).join(" ");
+    }
+    case "address": {
+      if (typeof value !== "object" || value === null) break;
+      const a = value;
+      return [a.street, a.city, a.state, a.zip].filter(Boolean).join(" ");
+    }
+  }
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (Array.isArray(value)) return value.map(String).join(" ");
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
 // src/response-viewer/filter-utils.ts
 function createEmptyFilterState() {
   return { filters: [], dateRange: {} };
@@ -4843,7 +6944,11 @@ function ResponseViewerInner({
   dateFormat,
   columnLabels,
   onExport,
-  pageSize = 25
+  pageSize = 25,
+  onDelete,
+  onBulkDelete,
+  onBulkExport,
+  selectable = false
 }) {
   const [viewMode, setViewMode] = react.useState("table");
   const [selectedResponse, setSelectedResponse] = react.useState(null);
@@ -4851,6 +6956,11 @@ function ResponseViewerInner({
   const [effectivePageSize, setEffectivePageSize] = react.useState(pageSize);
   const [filterState, setFilterState] = react.useState(createEmptyFilterState);
   const [showFilterPanel, setShowFilterPanel] = react.useState(false);
+  const [searchQuery, setSearchQuery] = react.useState("");
+  const [showStats, setShowStats] = react.useState(false);
+  const [showCharts, setShowCharts] = react.useState(false);
+  const [selectedIds, setSelectedIds] = react.useState(/* @__PURE__ */ new Set());
+  const [confirmDialog, setConfirmDialog] = react.useState(null);
   const [draftFieldId, setDraftFieldId] = react.useState("");
   const [draftOperator, setDraftOperator] = react.useState("contains");
   const [draftValue, setDraftValue] = react.useState("");
@@ -4861,9 +6971,18 @@ function ResponseViewerInner({
     setEffectivePageSize(pageSize);
     setCurrentPage(1);
   }, [pageSize]);
+  react.useEffect(() => {
+    setSelectedIds(/* @__PURE__ */ new Set());
+  }, [responses]);
+  const searchedResponses = react.useMemo(
+    () => searchResponses(responses, searchQuery, schema),
+    [responses, searchQuery, schema]
+  );
   const isFiltered = hasActiveFilters(filterState);
-  const filteredResponses = applyFilters(responses, filterState);
+  const filteredResponses = applyFilters(searchedResponses, filterState);
   const pag = paginate(filteredResponses, currentPage, effectivePageSize);
+  const questions = getAllQuestions2(schema);
+  const isSelectable = selectable && (!!onBulkDelete || !!onBulkExport);
   function handleSelect(response) {
     setSelectedResponse(response);
     onResponseSelect?.(response);
@@ -4910,7 +7029,59 @@ function ResponseViewerInner({
     setFilterState(createEmptyFilterState());
     setCurrentPage(1);
   }
-  const questions = getAllQuestions2(schema);
+  function handleToggleSelect(token) {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(token)) {
+        next.delete(token);
+      } else {
+        next.add(token);
+      }
+      return next;
+    });
+  }
+  function handleSelectAll() {
+    const currentTokens = pag.pageItems.map((r) => r.sessionToken).filter(Boolean);
+    const allSelected = currentTokens.every((t) => selectedIds.has(t));
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (allSelected) {
+        currentTokens.forEach((t) => next.delete(t));
+      } else {
+        currentTokens.forEach((t) => next.add(t));
+      }
+      return next;
+    });
+  }
+  function handleBulkDelete() {
+    if (!onBulkDelete || selectedIds.size === 0) return;
+    setConfirmDialog({
+      title: "Delete selected responses",
+      message: `Are you sure you want to delete ${selectedIds.size} response${selectedIds.size !== 1 ? "s" : ""}? This cannot be undone.`,
+      onConfirm: () => {
+        onBulkDelete(Array.from(selectedIds));
+        setSelectedIds(/* @__PURE__ */ new Set());
+        setConfirmDialog(null);
+      }
+    });
+  }
+  function handleBulkExport() {
+    if (!onBulkExport || selectedIds.size === 0) return;
+    const selected = responses.filter((r) => r.sessionToken && selectedIds.has(r.sessionToken));
+    onBulkExport(selected);
+  }
+  function handleDeleteSingle(token) {
+    if (!onDelete) return;
+    setConfirmDialog({
+      title: "Delete response",
+      message: "Are you sure you want to delete this response? This cannot be undone.",
+      onConfirm: () => {
+        onDelete(token);
+        setSelectedResponse(null);
+        setConfirmDialog(null);
+      }
+    });
+  }
   function getFields(response) {
     return questions.map((q) => ({
       questionId: q.id,
@@ -4921,6 +7092,19 @@ function ResponseViewerInner({
   }
   const heightValue = typeof height === "number" ? `${height}px` : height;
   const widthValue = typeof width === "number" ? `${width}px` : width;
+  const countText = (() => {
+    const hasSearch = searchQuery.trim().length > 0;
+    if (hasSearch && isFiltered) {
+      return `${filteredResponses.length} of ${responses.length} responses (searched + filtered)`;
+    }
+    if (hasSearch) {
+      return `${searchedResponses.length} result${searchedResponses.length !== 1 ? "s" : ""} for "${searchQuery}"`;
+    }
+    if (isFiltered) {
+      return `Showing ${filteredResponses.length} of ${responses.length} responses (filtered)`;
+    }
+    return `${responses.length} response${responses.length !== 1 ? "s" : ""}`;
+  })();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -4928,7 +7112,20 @@ function ResponseViewerInner({
       style: { height: heightValue, width: widthValue },
       children: [
         !selectedResponse && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 px-3 py-2 border-b border-border", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground mr-auto", children: isFiltered ? `Showing ${filteredResponses.length} of ${responses.length} responses (filtered)` : `${responses.length} response${responses.length !== 1 ? "s" : ""}` }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            fieldcraftReact.Input,
+            {
+              type: "text",
+              placeholder: "Search responses...",
+              className: "h-7 text-xs w-40",
+              value: searchQuery,
+              onChange: (e) => {
+                setSearchQuery(e.target.value);
+                setCurrentPage(1);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground mr-auto", children: countText }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               fieldcraftReact.Button,
@@ -4955,6 +7152,48 @@ function ResponseViewerInner({
                 onClick: () => setViewMode("card"),
                 children: "Cards"
               }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.Button,
+              {
+                variant: viewMode === "timeline" ? "secondary" : "ghost",
+                size: "sm",
+                className: cn(
+                  "h-7 text-xs",
+                  viewMode === "timeline" && "font-semibold border border-ring"
+                ),
+                onClick: () => setViewMode("timeline"),
+                children: "Timeline"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Separator, { orientation: "vertical", className: "h-5 hidden sm:block" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.Button,
+              {
+                variant: showStats ? "secondary" : "ghost",
+                size: "sm",
+                className: cn(
+                  "h-7 text-xs",
+                  showStats && "font-semibold border border-ring"
+                ),
+                onClick: () => setShowStats((v) => !v),
+                children: "Stats"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.Button,
+              {
+                variant: showCharts ? "secondary" : "ghost",
+                size: "sm",
+                className: cn(
+                  "h-7 text-xs",
+                  showCharts && "font-semibold border border-ring"
+                ),
+                onClick: () => setShowCharts((v) => !v),
+                children: "Charts"
+              }
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Separator, { orientation: "vertical", className: "h-5 hidden sm:block" }),
@@ -5020,6 +7259,26 @@ function ResponseViewerInner({
             )
           ] })
         ] }),
+        !selectedResponse && isSelectable && selectedIds.size > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-1.5 border-b border-border bg-accent/50", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-medium text-foreground", children: [
+            selectedIds.size,
+            " selected"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto flex items-center gap-1", children: [
+            onBulkExport && /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "outline", size: "sm", className: "h-6 text-xs", onClick: handleBulkExport, children: "Export Selected" }),
+            onBulkDelete && /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Button, { variant: "destructive", size: "sm", className: "h-6 text-xs", onClick: handleBulkDelete, children: "Delete Selected" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              fieldcraftReact.Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-6 text-xs",
+                onClick: () => setSelectedIds(/* @__PURE__ */ new Set()),
+                children: "Clear"
+              }
+            )
+          ] })
+        ] }),
         !selectedResponse && showFilterPanel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fc-rv-filter__panel px-3 py-2 border-b border-border bg-muted/50", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2 mb-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground w-16 shrink-0", children: "Date:" }),
@@ -5148,19 +7407,47 @@ function ResponseViewerInner({
             );
           })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 min-w-0 overflow-auto", selectedResponse && "p-4"), children: selectedResponse ? /* @__PURE__ */ jsxRuntime.jsx(
+        !selectedResponse && showStats && /* @__PURE__ */ jsxRuntime.jsx(
+          StatsPanel,
+          {
+            schema,
+            responses: filteredResponses,
+            onClose: () => setShowStats(false)
+          }
+        ),
+        !selectedResponse && showCharts && /* @__PURE__ */ jsxRuntime.jsx(
+          ChartPanel,
+          {
+            schema,
+            responses: filteredResponses,
+            onClose: () => setShowCharts(false)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex-1 min-w-0 overflow-auto", selectedResponse && "p-4"), children: selectedResponse ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
           ResponseDetail,
           {
             response: selectedResponse,
             fields: getFields(selectedResponse),
-            onBack: handleBack
+            onBack: handleBack,
+            onDelete: onDelete && selectedResponse.sessionToken ? () => handleDeleteSingle(selectedResponse.sessionToken) : void 0
+          }
+        ) }) : viewMode === "timeline" ? /* @__PURE__ */ jsxRuntime.jsx(
+          TimelineView,
+          {
+            responses: filteredResponses,
+            questions,
+            onSelect: handleSelect
           }
         ) : viewMode === "table" ? /* @__PURE__ */ jsxRuntime.jsx(
           ResponseTable,
           {
             schema,
             responses: pag.pageItems,
-            onRowClick: handleSelect
+            onRowClick: handleSelect,
+            selectable: isSelectable,
+            selectedIds,
+            onToggleSelect: handleToggleSelect,
+            onSelectAll: handleSelectAll
           }
         ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 p-3 grid-cols-[repeat(auto-fill,minmax(280px,1fr))]", children: [
           pag.pageItems.map((response, idx) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -5168,13 +7455,16 @@ function ResponseViewerInner({
             {
               response,
               fields: getFields(response),
-              onClick: () => handleSelect(response)
+              onClick: () => handleSelect(response),
+              selectable: isSelectable,
+              selected: !!(response.sessionToken && selectedIds.has(response.sessionToken)),
+              onToggleSelect: response.sessionToken ? () => handleToggleSelect(response.sessionToken) : void 0
             },
             response.sessionToken || idx
           )),
-          filteredResponses.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center text-muted-foreground", children: isFiltered ? "No matching responses" : "No responses yet" })
+          filteredResponses.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-8 text-center text-muted-foreground", children: isFiltered || searchQuery.trim() ? "No matching responses" : "No responses yet" })
         ] }) }),
-        !selectedResponse && pag.showPagination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fc-rv-pagination flex flex-wrap items-center gap-x-2 gap-y-1 px-3 py-2 border-t border-border", children: [
+        !selectedResponse && viewMode !== "timeline" && pag.showPagination && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fc-rv-pagination flex flex-wrap items-center gap-x-2 gap-y-1 px-3 py-2 border-t border-border", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fc-rv-pagination__info text-xs text-muted-foreground mr-auto", children: [
             "Showing ",
             pag.startItem,
@@ -5228,7 +7518,18 @@ function ResponseViewerInner({
               }
             )
           ] })
-        ] })
+        ] }),
+        confirmDialog && /* @__PURE__ */ jsxRuntime.jsx(
+          ConfirmDialog2,
+          {
+            title: confirmDialog.title,
+            message: confirmDialog.message,
+            confirmLabel: "Delete",
+            variant: "destructive",
+            onConfirm: confirmDialog.onConfirm,
+            onCancel: () => setConfirmDialog(null)
+          }
+        )
       ]
     }
   );
@@ -5301,7 +7602,537 @@ var PREVIEW_SCHEMA = {
   ],
   submitAction: { type: "adapter" }
 };
+
+// src/theme-editor/css-utils.ts
+var COLOR_MAP = {
+  primary: "--fc-primary",
+  primaryForeground: "--fc-primary-foreground",
+  secondary: "--fc-secondary",
+  secondaryForeground: "--fc-secondary-foreground",
+  error: "--fc-error",
+  errorForeground: "--fc-error-foreground",
+  warning: "--fc-warning",
+  success: "--fc-success",
+  surface: "--fc-surface",
+  background: "--fc-background",
+  text: "--fc-text",
+  textMuted: "--fc-text-muted",
+  textDisabled: "--fc-text-disabled",
+  border: "--fc-border",
+  borderFocus: "--fc-border-focus",
+  inputBackground: "--fc-input-background"
+};
+var TYPOGRAPHY_MAP = {
+  fontFamily: "--fc-font-family",
+  scale: "--fc-scale",
+  questionSize: "--fc-question-size",
+  labelSize: "--fc-label-size",
+  helpTextSize: "--fc-help-text-size",
+  bodySize: "--fc-body-size"
+};
+var SHAPE_MAP = {
+  radius: "--fc-radius",
+  inputRadius: "--fc-input-radius",
+  buttonRadius: "--fc-button-radius",
+  cardRadius: "--fc-card-radius"
+};
+var SPACING_MAP = {
+  base: "--fc-spacing-base",
+  sectionGap: "--fc-section-gap",
+  fieldGap: "--fc-field-gap",
+  inputPaddingX: "--fc-input-padding-x",
+  inputPaddingY: "--fc-input-padding-y"
+};
+var LAYOUT_MAP = {
+  maxWidth: "--fc-max-width",
+  alignment: "--fc-alignment",
+  progressPosition: "--fc-progress-position",
+  sectionLayout: "--fc-section-layout"
+};
+function themeToCss(theme) {
+  const lines = [];
+  function addSection2(obj, map, comment) {
+    if (!obj) return;
+    const entries = [];
+    for (const [key, cssVar] of Object.entries(map)) {
+      const val = obj[key];
+      if (val == null) continue;
+      if (typeof val === "number") {
+        entries.push(`  ${cssVar}: ${val}px;`);
+      } else {
+        entries.push(`  ${cssVar}: ${String(val)};`);
+      }
+    }
+    if (entries.length > 0) {
+      lines.push(`  /* ${comment} */`);
+      lines.push(...entries);
+      lines.push("");
+    }
+  }
+  lines.push(":root {");
+  addSection2(theme.colors, COLOR_MAP, "Colors");
+  addSection2(theme.typography, TYPOGRAPHY_MAP, "Typography");
+  addSection2(theme.shape, SHAPE_MAP, "Shape");
+  addSection2(theme.spacing, SPACING_MAP, "Spacing");
+  addSection2(theme.layout, LAYOUT_MAP, "Layout");
+  if (lines.length > 1 && lines[lines.length - 1] === "") {
+    lines.pop();
+  }
+  lines.push("}");
+  return lines.join("\n") + "\n";
+}
+var REVERSE_MAP = {};
+function buildReverseMap() {
+  if (Object.keys(REVERSE_MAP).length > 0) return;
+  const sections = [
+    ["colors", COLOR_MAP],
+    ["typography", TYPOGRAPHY_MAP],
+    ["shape", SHAPE_MAP],
+    ["spacing", SPACING_MAP],
+    ["layout", LAYOUT_MAP]
+  ];
+  for (const [sectionKey, map] of sections) {
+    for (const [propKey, cssVar] of Object.entries(map)) {
+      REVERSE_MAP[cssVar] = [sectionKey, propKey];
+    }
+  }
+}
+var NUMERIC_PROPS = /* @__PURE__ */ new Set([
+  "base",
+  "sectionGap",
+  "fieldGap",
+  "inputPaddingX",
+  "inputPaddingY"
+]);
+function cssToTheme(css) {
+  buildReverseMap();
+  const theme = {};
+  const varRegex = /(--fc-[\w-]+)\s*:\s*([^;]+);/g;
+  let match;
+  while ((match = varRegex.exec(css)) !== null) {
+    const cssVar = match[1];
+    let value = match[2].trim();
+    const mapping = REVERSE_MAP[cssVar];
+    if (!mapping) continue;
+    const [sectionKey, propKey] = mapping;
+    if (NUMERIC_PROPS.has(propKey)) {
+      const num = parseFloat(value);
+      if (!isNaN(num)) {
+        value = num;
+      }
+    }
+    if (!theme[sectionKey]) {
+      theme[sectionKey] = {};
+    }
+    theme[sectionKey][propKey] = value;
+  }
+  return theme;
+}
+function exportCssFile(theme, filename = "fieldcraft-theme.css") {
+  const css = themeToCss(theme);
+  const blob = new Blob([css], { type: "text/css" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+function importCssFile(baseTheme, onImport) {
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = ".css";
+  input.onchange = () => {
+    const file = input.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      const cssText = reader.result;
+      const partial = cssToTheme(cssText);
+      const merged = deepMerge(baseTheme, partial);
+      onImport(merged);
+    };
+    reader.readAsText(file);
+  };
+  input.click();
+}
+function deepMerge(base, partial) {
+  const result = { ...base };
+  for (const key of Object.keys(partial)) {
+    const partialSection = partial[key];
+    if (partialSection && typeof partialSection === "object") {
+      result[key] = {
+        ...base[key],
+        ...partialSection
+      };
+    }
+  }
+  return result;
+}
+
+// src/theme-editor/palette-generator.ts
+function generatePalette(baseHex) {
+  const [h, s, l] = hexToHsl(baseHex);
+  const secH = (h + 180) % 360;
+  const isLightBase = l > 50;
+  return {
+    // Primary
+    primary: hslToHex(h, s, clamp(l, 30, 60)),
+    primaryForeground: isLightBase ? "#ffffff" : "#ffffff",
+    // Secondary (complementary)
+    secondary: hslToHex(secH, Math.max(s - 15, 10), clamp(l, 35, 55)),
+    secondaryForeground: "#ffffff",
+    // Surfaces
+    surface: hslToHex(h, Math.max(s - 35, 3), 97),
+    background: "#F4F7F8",
+    inputBackground: hslToHex(h, Math.max(s - 40, 2), 99),
+    // Text
+    text: hslToHex(h, Math.max(s - 30, 5), 12),
+    textMuted: hslToHex(h, Math.max(s - 30, 5), 45),
+    textDisabled: hslToHex(h, Math.max(s - 35, 3), 65),
+    // Borders
+    border: hslToHex(h, Math.max(s - 30, 5), 85),
+    borderFocus: hslToHex(h, s, clamp(l, 35, 55)),
+    // Semantic — Drafting Teal palette
+    error: "#B04A3C",
+    errorForeground: "#FFFFFF",
+    warning: "#C98A2E",
+    success: "#2E7D5B"
+  };
+}
+function applyPaletteToTheme(theme, palette) {
+  return {
+    ...theme,
+    colors: {
+      ...theme.colors,
+      ...palette
+    }
+  };
+}
+function hexToHsl(hex) {
+  const rgb = hexToRgb(hex);
+  const r = rgb[0] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[2] / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) {
+    return [0, 0, Math.round(l * 100)];
+  }
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === r) {
+    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+  } else if (max === g) {
+    h = ((b - r) / d + 2) / 6;
+  } else {
+    h = ((r - g) / d + 4) / 6;
+  }
+  return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
+}
+function hslToHex(h, s, l) {
+  const sNorm = s / 100;
+  const lNorm = l / 100;
+  const c = (1 - Math.abs(2 * lNorm - 1)) * sNorm;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = lNorm - c / 2;
+  let r = 0, g = 0, b = 0;
+  if (h < 60) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h < 120) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h < 180) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h < 240) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h < 300) {
+    r = x;
+    g = 0;
+    b = c;
+  } else {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  return rgbToHex(
+    Math.round((r + m) * 255),
+    Math.round((g + m) * 255),
+    Math.round((b + m) * 255)
+  );
+}
+function hexToRgb(hex) {
+  const cleaned = hex.replace("#", "");
+  const full = cleaned.length === 3 ? cleaned[0] + cleaned[0] + cleaned[1] + cleaned[1] + cleaned[2] + cleaned[2] : cleaned;
+  return [
+    parseInt(full.substring(0, 2), 16),
+    parseInt(full.substring(2, 4), 16),
+    parseInt(full.substring(4, 6), 16)
+  ];
+}
+function rgbToHex(r, g, b) {
+  return "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("");
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+var SWATCH_KEYS = [
+  { key: "primary", label: "Primary" },
+  { key: "secondary", label: "Secondary" },
+  { key: "surface", label: "Surface" },
+  { key: "background", label: "Background" },
+  { key: "text", label: "Text" },
+  { key: "textMuted", label: "Muted" },
+  { key: "border", label: "Border" },
+  { key: "error", label: "Error" },
+  { key: "warning", label: "Warning" },
+  { key: "success", label: "Success" }
+];
+function PaletteGenerator({ theme, onApply, onClose }) {
+  const [baseColor, setBaseColor] = react.useState(theme.colors?.primary ?? "#3b82f6");
+  const palette = react.useMemo(() => generatePalette(baseColor), [baseColor]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-palette", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-palette__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fcte-palette__title", children: "Generate Palette" }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { className: "fcte-btn fcte-btn--secondary fcte-btn--sm", onClick: onClose, children: "Close" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-palette__body", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-palette__picker", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "fcte-palette__label", children: "Base Color" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-palette__input-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "color",
+              value: baseColor,
+              onChange: (e) => setBaseColor(e.target.value),
+              className: "fcte-field__swatch"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              value: baseColor,
+              onChange: (e) => setBaseColor(e.target.value),
+              className: "fcte-field__text",
+              spellCheck: false
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-palette__swatches", children: SWATCH_KEYS.map(({ key, label }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-palette__swatch", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "fcte-palette__swatch-color",
+            style: { backgroundColor: palette[key] }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-palette__swatch-label", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-palette__swatch-hex", children: palette[key] })
+      ] }, key)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "fcte-btn fcte-btn--primary",
+          onClick: () => onApply(applyPaletteToTheme(theme, palette)),
+          children: "Apply to Theme"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/theme-editor/presets.ts
+var draftingTealPreset = {
+  colors: {
+    primary: "#1F6B6E",
+    primaryForeground: "#FFFFFF",
+    secondary: "#B9D1CF",
+    secondaryForeground: "#12222A",
+    error: "#B04A3C",
+    errorForeground: "#FFFFFF",
+    warning: "#C98A2E",
+    success: "#2E7D5B",
+    surface: "#FFFFFF",
+    background: "#F4F7F8",
+    text: "#12222A",
+    textMuted: "#6A7B85",
+    textDisabled: "#B9D1CF",
+    border: "#DCE4E8",
+    borderFocus: "#1F6B6E",
+    inputBackground: "#FFFFFF"
+  },
+  typography: {
+    fontFamily: "'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif",
+    scale: "comfortable",
+    questionSize: "1.1875rem",
+    labelSize: "0.8125rem",
+    helpTextSize: "0.8125rem",
+    bodySize: "0.9375rem"
+  },
+  shape: {
+    radius: "none",
+    inputRadius: "0px",
+    buttonRadius: "0px",
+    cardRadius: "0px"
+  },
+  spacing: {
+    base: 16,
+    sectionGap: 32,
+    fieldGap: 24,
+    inputPaddingX: 12,
+    inputPaddingY: 10
+  },
+  layout: {
+    maxWidth: "640px",
+    alignment: "left",
+    progressPosition: "top",
+    sectionLayout: "flat"
+  }
+};
+var COMPARISON_PRESETS = {
+  "drafting-teal": { label: "Drafting Teal", theme: draftingTealPreset },
+  clean: { label: "Clean", theme: fieldcraftReact.cleanPreset },
+  dark: { label: "Dark", theme: fieldcraftReact.darkPreset },
+  modern: { label: "Modern", theme: fieldcraftReact.modernPreset },
+  "high-contrast": { label: "High Contrast", theme: fieldcraftReact.highContrastPreset },
+  clinical: { label: "Clinical", theme: fieldcraftReact.clinicalPreset },
+  playful: { label: "Playful", theme: fieldcraftReact.playfulPreset }
+};
+function ThemeComparison({ currentTheme, onClose }) {
+  const [compareKey, setCompareKey] = react.useState("clean");
+  const compareTheme = COMPARISON_PRESETS[compareKey]?.theme ?? fieldcraftReact.cleanPreset;
+  const diffs = getColorDiffs(currentTheme, compareTheme);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fcte-compare__title", children: "Theme Comparison" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__controls", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "fcte-compare__label", children: "Compare with:" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            value: compareKey,
+            onChange: (e) => setCompareKey(e.target.value),
+            className: "fcte-toolbar__preset",
+            children: Object.entries(COMPARISON_PRESETS).map(([key, { label }]) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: key, children: label }, key))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "fcte-btn fcte-btn--secondary fcte-btn--sm", onClick: onClose, children: "Close" })
+      ] })
+    ] }),
+    diffs.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__diffs", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "fcte-compare__diff-count", children: [
+        diffs.length,
+        " color",
+        diffs.length !== 1 ? "s" : "",
+        " differ"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__diff-list", children: [
+        diffs.slice(0, 8).map((d) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__diff-item", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fcte-compare__diff-label", children: d.key }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__diff-swatches", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "fcte-compare__diff-swatch",
+                style: { backgroundColor: d.current },
+                title: `Current: ${d.current}`
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "fcte-compare__diff-arrow", children: "\u2192" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "fcte-compare__diff-swatch",
+                style: { backgroundColor: d.compare },
+                title: `${COMPARISON_PRESETS[compareKey]?.label}: ${d.compare}`
+              }
+            )
+          ] })
+        ] }, d.key)),
+        diffs.length > 8 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "fcte-compare__diff-more", children: [
+          "+",
+          diffs.length - 8,
+          " more"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__panels", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__panel", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-compare__panel-label", children: "Current Theme" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-compare__panel-preview", children: /* @__PURE__ */ jsxRuntime.jsx(
+          fieldcraftReact.FormEngineRenderer,
+          {
+            schema: PREVIEW_SCHEMA,
+            theme: currentTheme,
+            onSubmit: () => {
+            }
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-compare__panel", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-compare__panel-label", children: COMPARISON_PRESETS[compareKey]?.label ?? "Preset" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-compare__panel-preview", children: /* @__PURE__ */ jsxRuntime.jsx(
+          fieldcraftReact.FormEngineRenderer,
+          {
+            schema: PREVIEW_SCHEMA,
+            theme: compareTheme,
+            onSubmit: () => {
+            }
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+function getColorDiffs(a, b) {
+  const diffs = [];
+  const aColors = a.colors ?? {};
+  const bColors = b.colors ?? {};
+  const allKeys = /* @__PURE__ */ new Set([...Object.keys(aColors), ...Object.keys(bColors)]);
+  for (const key of allKeys) {
+    const aVal = aColors[key] ?? "";
+    const bVal = bColors[key] ?? "";
+    if (aVal.toLowerCase() !== bVal.toLowerCase() && (aVal || bVal)) {
+      diffs.push({ key, current: aVal || "(unset)", compare: bVal || "(unset)" });
+    }
+  }
+  return diffs;
+}
+var ThemeCtx2 = react.createContext({});
+function themeToCssVars2(theme) {
+  const vars = {};
+  if (theme.background) vars["--fcte-bg"] = theme.background;
+  if (theme.surface) vars["--fcte-surface"] = theme.surface;
+  if (theme.surfaceHover) vars["--fcte-surface-hover"] = theme.surfaceHover;
+  if (theme.text) vars["--fcte-text"] = theme.text;
+  if (theme.textMuted) vars["--fcte-text-muted"] = theme.textMuted;
+  if (theme.textDim) vars["--fcte-text-dim"] = theme.textDim;
+  if (theme.border) vars["--fcte-border"] = theme.border;
+  if (theme.borderStrong) vars["--fcte-border-strong"] = theme.borderStrong;
+  if (theme.inputBackground) vars["--fcte-input-bg"] = theme.inputBackground;
+  if (theme.accent) vars["--fcte-accent"] = theme.accent;
+  if (theme.accentForeground) vars["--fcte-accent-text"] = theme.accentForeground;
+  return vars;
+}
+function ThemeEditorThemeProvider({ theme, children }) {
+  const resolved = theme ?? {};
+  const cssVars = react.useMemo(() => themeToCssVars2(resolved), [resolved]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeCtx2.Provider, { value: resolved, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-fcte-root": "", style: cssVars, className: "fcte-provider-root", children }) });
+}
 var PRESETS = {
+  "drafting-teal": draftingTealPreset,
   clean: fieldcraftReact.cleanPreset,
   dark: fieldcraftReact.darkPreset,
   modern: fieldcraftReact.modernPreset,
@@ -5431,15 +8262,18 @@ function ThemeEditorInner({
   initialTheme,
   onChange,
   onSave,
+  theme: chromeTheme,
   height,
   width,
   className,
   toolbarExtra,
   showPreview = true
 }) {
-  const [theme, setTheme] = react.useState(initialTheme ?? fieldcraftReact.cleanPreset);
+  const [theme, setTheme] = react.useState(initialTheme ?? draftingTealPreset);
   const [activeSection, setActiveSection] = react.useState("colors");
-  const [presetKey, setPresetKey] = react.useState("custom");
+  const [presetKey, setPresetKey] = react.useState(initialTheme ? "custom" : "drafting-teal");
+  const [showPalette, setShowPalette] = react.useState(false);
+  const [showComparison, setShowComparison] = react.useState(false);
   const themeRef = react.useRef(theme);
   themeRef.current = theme;
   react.useEffect(() => {
@@ -5507,12 +8341,22 @@ function ThemeEditorInner({
     };
     input.click();
   }, [onChange]);
+  const exportCss = react.useCallback(() => {
+    exportCssFile(theme);
+  }, [theme]);
+  const importCss = react.useCallback(() => {
+    importCssFile(theme, (merged) => {
+      setTheme(merged);
+      setPresetKey("custom");
+      onChange?.(merged);
+    });
+  }, [theme, onChange]);
   const currentSection = react.useMemo(
     () => SECTIONS.find((s) => s.id === activeSection),
     [activeSection]
   );
   const sectionValues = theme[currentSection.themeKey] ?? {};
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeEditorThemeProvider, { theme: chromeTheme, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: `fcte-root${className ? ` ${className}` : ""}`,
@@ -5539,22 +8383,65 @@ function ThemeEditorInner({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-toolbar__right", children: [
             toolbarExtra,
-            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: importJson, className: "fcte-btn fcte-btn--secondary", children: "Import" }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: exportJson, className: "fcte-btn fcte-btn--secondary", children: "Export" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: importJson, className: "fcte-btn fcte-btn--secondary", children: "Import JSON" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: exportJson, className: "fcte-btn fcte-btn--secondary", children: "Export JSON" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: importCss, className: "fcte-btn fcte-btn--secondary", children: "Import CSS" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: exportCss, className: "fcte-btn fcte-btn--secondary", children: "Export CSS" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => {
+                  setShowPalette((v) => !v);
+                  setShowComparison(false);
+                },
+                className: `fcte-btn ${showPalette ? "fcte-btn--primary" : "fcte-btn--secondary"}`,
+                children: "Palette"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => {
+                  setShowComparison((v) => !v);
+                  setShowPalette(false);
+                },
+                className: `fcte-btn ${showComparison ? "fcte-btn--primary" : "fcte-btn--secondary"}`,
+                children: "Compare"
+              }
+            ),
             onSave && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => onSave(theme), className: "fcte-btn fcte-btn--primary", children: "Save" })
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-body", children: [
+        showPalette && /* @__PURE__ */ jsxRuntime.jsx(
+          PaletteGenerator,
+          {
+            theme,
+            onApply: (newTheme) => {
+              setTheme(newTheme);
+              setPresetKey("custom");
+              onChange?.(newTheme);
+              setShowPalette(false);
+            },
+            onClose: () => setShowPalette(false)
+          }
+        ),
+        showComparison ? /* @__PURE__ */ jsxRuntime.jsx(
+          ThemeComparison,
+          {
+            currentTheme: theme,
+            onClose: () => setShowComparison(false)
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-body", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fcte-editor", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-tabs", children: SECTIONS.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-section-select", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "select",
               {
-                className: `fcte-tab${activeSection === s.id ? " fcte-tab--active" : ""}`,
-                onClick: () => setActiveSection(s.id),
-                children: s.label
-              },
-              s.id
-            )) }),
+                value: activeSection,
+                onChange: (e) => setActiveSection(e.target.value),
+                className: "fcte-field__select",
+                children: SECTIONS.map((s) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: s.id, children: s.label }, s.id))
+              }
+            ) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-fields", children: currentSection.fields.map((field) => {
               const val = sectionValues[field.key];
               if (field.kind === "color") {
@@ -5632,19 +8519,29 @@ function ThemeEditorInner({
               ] }, field.key);
             }) })
           ] }),
-          showPreview && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-preview", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-preview__inner", children: /* @__PURE__ */ jsxRuntime.jsx(
-            fieldcraftReact.FormEngineRenderer,
+          showPreview && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
             {
-              schema: PREVIEW_SCHEMA,
-              theme,
-              onSubmit: () => {
-              }
+              className: "fcte-preview",
+              style: {
+                background: theme.colors?.background || void 0,
+                color: theme.colors?.text || void 0
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fcte-preview__inner", children: /* @__PURE__ */ jsxRuntime.jsx(
+                fieldcraftReact.FormEngineRenderer,
+                {
+                  schema: PREVIEW_SCHEMA,
+                  theme,
+                  onSubmit: () => {
+                  }
+                }
+              ) })
             }
-          ) }) })
+          )
         ] })
       ]
     }
-  );
+  ) });
 }
 
 // src/theme-editor/ThemeEditor.tsx
@@ -5653,7 +8550,7 @@ var ThemeEditor = requireLicense(ThemeEditorInner, "ThemeEditor");
 // src/index.ts
 if (typeof globalThis !== "undefined" && typeof globalThis.process !== "undefined" && globalThis.process.env?.NODE_ENV !== "production") {
   const _fc_banner = `
-%c FieldCraft Pro %c v1.3.0 
+%c FieldCraft Pro %c v1.5.0 
 
 %cForm Builder \xB7 Response Viewer \xB7 Theme Editor
 
@@ -5677,6 +8574,8 @@ exports.FieldCraftProProvider = FieldCraftProProvider;
 exports.FormBuilder = FormBuilder;
 exports.FormBuilderThemeProvider = FormBuilderThemeProvider;
 exports.PREVIEW_SCHEMA = PREVIEW_SCHEMA;
+exports.PRO_FIELD_OVERRIDES = PRO_FIELD_OVERRIDES;
+exports.ProPaymentField = ProPaymentField;
 exports.QUESTION_TYPE_INFO = QUESTION_TYPE_INFO;
 exports.ResponseViewer = ResponseViewer;
 exports.ThemeEditor = ThemeEditor;