@squaredr/fieldcraft-pro 1.2.0 → 1.4.0

package/dist/{chunk-GNBXIG63.mjs → chunk-BYT2P3I6.mjs}

@@ -1,11 +1,13 @@
 import { cn } from './chunk-QQ4JZGTD.mjs';
 import { requireLicense } from './chunk-VECQKSWS.mjs';
-import { forwardRef, createContext, Component, useRef, useState, useEffect, useCallback, useMemo, useContext } from 'react';
+import { forwardRef, lazy, memo, createContext, Component, useState, useRef, useEffect, useCallback, useMemo, Suspense, useContext } from 'react';
 import { DndContext, DragOverlay, useSensors, useSensor, MouseSensor, TouchSensor, useDraggable, useDroppable } from '@dnd-kit/core';
-import { ChevronDown, Undo2, Redo2, Upload, Download, Save, X, PanelLeft, PanelRight, Search, ChevronRight, Plus, Settings, Copy, Trash2, HelpCircle, MoveVertical, Minus, Video, Image, FileText, PartyPopper, Hand, ShieldCheck, SeparatorHorizontal, Info, Heading, Trophy, EyeOff, Calculator, CreditCard, MapPin, Repeat, Grid3X3, Camera, PenTool, Paperclip, CalendarCheck, CalendarRange, Clock, Calendar, ArrowUpDown, Globe, ToggleLeft, CheckSquare, CircleDot, ListOrdered, TrendingUp, BarChart3, Star, SlidersHorizontal, Hash, UserCheck, Link, PhoneCall, Phone, Mail, AlignLeft, Type, GripVertical } from 'lucide-react';
-import { Button, Separator, Input, Badge, Textarea, Label, Switch } from '@squaredr/fieldcraft-react';
+import { ChevronDown, Undo2, Redo2, PencilRuler, Eye, Code, LayoutTemplate, GitBranch, Upload, Download, Save, X, PanelLeft, PanelRight, Search, ChevronRight, Plus, Settings, FileText, Layers, Copy, Trash2, HelpCircle, MoveVertical, Minus, Video, Image, PartyPopper, Hand, ShieldCheck, SeparatorHorizontal, Info, Heading, Trophy, EyeOff, Calculator, CreditCard, MapPin, Repeat, Grid3X3, Camera, PenTool, Paperclip, CalendarCheck, CalendarRange, Clock, Calendar, ArrowUpDown, Globe, ToggleLeft, CheckSquare, CircleDot, ListOrdered, TrendingUp, BarChart3, Star, SlidersHorizontal, Hash, UserCheck, Link, PhoneCall, Phone, Mail, AlignLeft, Type, GripVertical } from 'lucide-react';
+import { Button, Separator, FormEngineRenderer, Input, Badge, Textarea, Label, Switch } from '@squaredr/fieldcraft-react';
 import { validateSchema, FormEngineSchemaError } from '@squaredr/fieldcraft-core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { MarkerType, Handle, Position, getBezierPath, BaseEdge, EdgeLabelRenderer, useNodesState, useEdgesState, ReactFlow, Background, Controls, MiniMap } from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
 
 var MAX_HISTORY = 50;
 function useUndoRedo(currentSchema, setSchema) {
@@ -570,7 +572,81 @@ 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" }
+  },
+  date_range: {
+    type: "date_range",
+    label: "Date Range",
+    category: "datetime",
+    icon: "CalendarRange",
+    description: "Start and end date picker",
+    defaultConfig: { type: "date_range" }
+  },
   // ── 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",
@@ -704,7 +780,7 @@ var DEFAULT_PALETTE = [
   {
     category: "text",
     label: "Text Input",
-    types: ["short_text", "long_text", "email", "phone", "url"]
+    types: ["short_text", "long_text", "email", "phone", "url", "legal_name", "address"]
   },
   {
     category: "numeric",
@@ -719,12 +795,12 @@ var DEFAULT_PALETTE = [
   {
     category: "datetime",
     label: "Date & Time",
-    types: ["date", "time"]
+    types: ["date", "time", "date_range"]
   },
   {
     category: "media",
     label: "Media",
-    types: ["file_upload"]
+    types: ["file_upload", "signature"]
   },
   {
     category: "content",
@@ -739,7 +815,7 @@ var DEFAULT_PALETTE = [
   {
     category: "advanced",
     label: "Advanced",
-    types: ["matrix", "calculated", "hidden"]
+    types: ["repeater", "likert", "scoring", "matrix", "calculated", "hidden"]
   }
 ];
 
@@ -2253,7 +2329,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 });
@@ -2375,6 +2452,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;
+  useEffect(() => {
+    if (effectiveDisplayMode !== displayMode) {
+      onUpdate({ ...schema, settings: { ...settings, displayMode: effectiveDisplayMode } });
+    }
+  }, [effectiveDisplayMode, displayMode]);
   const updateSettings = (updates) => {
     onUpdate({ ...schema, settings: { ...settings, ...updates } });
   };
@@ -2402,12 +2497,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 })
         }
       ),
@@ -2785,6 +2876,873 @@ function FieldGroup({ label, children }) {
     children
   ] });
 }
+var PreviewErrorBoundary = class extends Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    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.error) {
+      return /* @__PURE__ */ jsxs("div", { className: "p-4 text-destructive text-sm font-mono", children: [
+        /* @__PURE__ */ jsx("strong", { children: "Render Error:" }),
+        " ",
+        this.state.error.message
+      ] });
+    }
+    return this.props.children;
+  }
+};
+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__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground text-sm", children: /* @__PURE__ */ jsxs("div", { className: "text-center space-y-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: "No fields to preview" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs", children: "Add fields in the Design view to see a live preview here." })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "max-w-2xl mx-auto py-8 px-4", children: /* @__PURE__ */ jsx(PreviewErrorBoundary, { resetKey: schema.id + (schema.version ?? ""), children: /* @__PURE__ */ jsx(
+    FormEngineRenderer,
+    {
+      schema,
+      theme: preview?.theme,
+      components: preview?.components,
+      onReady: preview?.onReady,
+      onFieldChange: preview?.onFieldChange,
+      onSubmit: preview?.onSubmit ?? (() => {
+      })
+    }
+  ) }) }) });
+}
+
+// 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 = lazy(() => import('@monaco-editor/react').then((m) => ({ default: m.default })));
+function MonacoWrapper({ value, onChange, errors }) {
+  const editorRef = useRef(null);
+  const monacoRef = useRef(null);
+  const handleMount = (editor, monaco) => {
+    editorRef.current = editor;
+    monacoRef.current = monaco;
+  };
+  useEffect(() => {
+    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__ */ 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 }
+      }
+    }
+  );
+}
+function JsonEditorPanel({ value, onChange, errors, onValidate }) {
+  const handleChange = useCallback(
+    (newValue) => {
+      onChange(newValue);
+      onValidate(newValue);
+    },
+    [onChange, onValidate]
+  );
+  const handleFormat = useCallback(() => {
+    try {
+      const formatted = JSON.stringify(JSON.parse(value), null, 2);
+      onChange(formatted);
+    } catch {
+    }
+  }, [value, onChange]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col overflow-hidden", children: [
+    errors.length > 0 && /* @__PURE__ */ 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__ */ jsxs("div", { children: [
+        e.line ? `Line ${e.line}: ` : "",
+        e.path ? `${e.path}: ` : "",
+        e.message
+      ] }, i)),
+      errors.length > 3 && /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground", children: [
+        "...and ",
+        errors.length - 3,
+        " more"
+      ] })
+    ] }),
+    /* @__PURE__ */ 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__ */ jsx("span", { className: "text-muted-foreground", children: errors.length === 0 ? "Valid schema" : `${errors.length} error${errors.length !== 1 ? "s" : ""}` }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleFormat,
+          className: "text-primary hover:underline",
+          children: "Format JSON"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ jsx(
+      Suspense,
+      {
+        fallback: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-sm text-muted-foreground", children: "Loading editor..." }),
+        children: /* @__PURE__ */ jsx(MonacoWrapper, { value, onChange: handleChange, errors })
+      }
+    ) })
+  ] });
+}
+
+// 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 (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 });
+        }
+      }
+      if (section.onExit.default) {
+        edges.push({ from: section.id, to: section.onExit.default, edgeType: "onExit", jumpTo: section.onExit.default });
+      }
+    }
+    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 });
+        }
+      }
+    }
+  }
+  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__ */ jsxs("div", { className: "fc-flow-section-group", style: { borderColor: color }, children: [
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, className: "fc-flow-handle fc-flow-handle--section" }),
+    /* @__PURE__ */ jsxs("div", { className: "fc-flow-section-group__header", style: { background: color }, children: [
+      /* @__PURE__ */ jsx("span", { className: "fc-flow-section-group__label", children: d.label.length > 30 ? d.label.slice(0, 30) + "\u2026" : d.label }),
+      /* @__PURE__ */ jsxs("span", { className: "fc-flow-section-group__meta", children: [
+        d.fieldCount,
+        " field",
+        d.fieldCount !== 1 ? "s" : "",
+        d.hasCondition && /* @__PURE__ */ jsx("span", { className: "fc-flow-section-group__badge", title: "Has showIf condition", children: "?" }),
+        d.hasExitLogic && /* @__PURE__ */ jsx("span", { className: "fc-flow-section-group__badge fc-flow-section-group__badge--jump", title: "Has onExit jump", children: "\u2934" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, className: "fc-flow-handle fc-flow-handle--section" })
+  ] });
+}
+var SectionNode = memo(SectionNodeInner);
+function FieldNodeInner({ data }) {
+  const d = data;
+  const color = SECTION_COLORS[d.colorIndex % SECTION_COLORS.length];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "fc-flow-field",
+      style: {
+        borderColor: d.hasCondition ? color : void 0,
+        borderWidth: d.hasCondition ? 2 : 1
+      },
+      children: [
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left, className: "fc-flow-handle" }),
+        /* @__PURE__ */ jsxs("div", { className: "fc-flow-field__content", children: [
+          /* @__PURE__ */ jsx("span", { className: "fc-flow-field__label", children: d.label.length > 26 ? d.label.slice(0, 26) + "\u2026" : d.label }),
+          /* @__PURE__ */ jsx("span", { className: "fc-flow-field__type", children: d.fieldType })
+        ] }),
+        d.hasCondition && /* @__PURE__ */ jsx("div", { className: "fc-flow-badge", style: { background: color }, title: "Has showIf condition", children: "?" }),
+        /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right, className: "fc-flow-handle" })
+      ]
+    }
+  );
+}
+var FieldNode = 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] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  const isJump = data?.edgeType === "onExit";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      BaseEdge,
+      {
+        id,
+        path: edgePath,
+        markerEnd,
+        style: {
+          stroke: isJump ? "#f59e0b" : "var(--primary, #3b82f6)",
+          strokeWidth: 1.5,
+          strokeOpacity: 0.7,
+          ...style
+        }
+      }
+    ),
+    label && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ 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 = memo(ConditionEdgeInner);
+function PipelineEdgeInner({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd
+}) {
+  const [edgePath] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      id,
+      path: edgePath,
+      markerEnd,
+      style: {
+        stroke: "var(--muted-foreground, #71717a)",
+        strokeWidth: 2,
+        strokeOpacity: 0.4
+      }
+    }
+  );
+}
+var PipelineEdge = 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: MarkerType.ArrowClosed,
+    width: 16,
+    height: 12
+  }
+};
+function LogicFlowEditor({ schema, onChange, onClose }) {
+  const noSections = schema.sections.length === 0;
+  const flowGraph = useMemo(() => buildReactFlowGraph(schema), [schema]);
+  const [nodes, setNodes, onNodesChange] = useNodesState(flowGraph.nodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(flowGraph.edges);
+  const [selectedFieldId, setSelectedFieldId] = useState(null);
+  const selectedQuestion = selectedFieldId ? findQuestion2(schema, selectedFieldId) : void 0;
+  useEffect(() => {
+    setNodes(flowGraph.nodes);
+    setEdges(flowGraph.edges);
+  }, [flowGraph, setNodes, setEdges]);
+  const sectionIds = useMemo(() => {
+    const ids = [];
+    for (const section of schema.sections) {
+      ids.push(section.id);
+    }
+    return ids;
+  }, [schema]);
+  const onNodeClick = useCallback(
+    (_event, node) => {
+      if (node.type === "fieldNode") {
+        setSelectedFieldId(node.id);
+      }
+    },
+    []
+  );
+  const onConnect = 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 = 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 = 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__ */ jsxs("div", { className: "fixed inset-0 z-50 flex flex-col bg-background/95 backdrop-blur-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "h-12 shrink-0 flex items-center justify-between px-4 border-b border-border bg-card", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(GitBranch, { size: 16, className: "text-primary" }),
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: "Logic Flow" }),
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ 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__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onClose, title: "Close logic flow", children: /* @__PURE__ */ jsx(X, { size: 16, strokeWidth: 1.75 }) })
+      ] })
+    ] }),
+    noSections ? /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground text-sm", children: /* @__PURE__ */ jsxs("div", { className: "text-center space-y-2", children: [
+      /* @__PURE__ */ jsx(GitBranch, { size: 32, className: "mx-auto opacity-40" }),
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: "No sections found" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs max-w-xs", children: "Add sections and fields to your form to see the logic flow pipeline." })
+    ] }) }) : /* @__PURE__ */ jsxs("div", { className: "flex-1 flex", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxs(
+        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__ */ jsx(Background, { gap: 20, size: 1 }),
+            /* @__PURE__ */ jsx(Controls, { showInteractive: false }),
+            /* @__PURE__ */ jsx(
+              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__ */ jsxs("div", { className: "w-72 border-l border-border bg-card overflow-auto", children: [
+        /* @__PURE__ */ jsxs("div", { className: "px-3 py-3 border-b border-border flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold truncate", children: selectedQuestion.label || selectedQuestion.id }),
+            /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground", children: selectedQuestion.type })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon-xs",
+              onClick: () => setSelectedFieldId(null),
+              title: "Close panel",
+              children: /* @__PURE__ */ jsx(X, { size: 14, strokeWidth: 1.75 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-3", children: /* @__PURE__ */ jsx(
+          ConditionEditor,
+          {
+            question: selectedQuestion,
+            schema,
+            onUpdate: handleConditionUpdate
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-5 h-0.5 rounded", style: { background: "var(--muted-foreground)", opacity: 0.4 } }),
+        /* @__PURE__ */ jsx("span", { children: "flow" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-5 h-0.5 bg-primary rounded" }),
+        /* @__PURE__ */ jsx("span", { children: "showIf" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-5 h-0.5 rounded", style: { background: "#f59e0b" } }),
+        /* @__PURE__ */ jsx("span", { children: "jump" })
+      ] }),
+      sectionIds.map((id, i) => {
+        const section = schema.sections.find((s) => s.id === id);
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-3 h-3 rounded-sm", style: { background: SECTION_COLORS[i % SECTION_COLORS.length] } }),
+          /* @__PURE__ */ jsx("span", { children: section?.title || id })
+        ] }, id);
+      })
+    ] })
+  ] });
+}
+function TemplateGallery({ templates, onSelect, onClose }) {
+  const [search, setSearch] = useState("");
+  const [activeCategory, setActiveCategory] = useState("all");
+  const [confirmTemplate, setConfirmTemplate] = useState(null);
+  const categories = useMemo(() => {
+    const cats = /* @__PURE__ */ new Set();
+    for (const t of templates) cats.add(t.meta.category);
+    return ["all", ...Array.from(cats)];
+  }, [templates]);
+  const filtered = 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__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "shrink-0 flex items-center justify-between px-4 py-3 border-b border-border", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(LayoutTemplate, { size: 18, className: "text-primary", strokeWidth: 1.75 }),
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold", children: "Template Gallery" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          "(",
+          templates.length,
+          " templates)"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onClose, title: "Close", children: /* @__PURE__ */ jsx(X, { size: 16, strokeWidth: 1.75 }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "shrink-0 px-4 py-2 space-y-2 border-b border-border", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(Search, { size: 14, className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground", strokeWidth: 1.75 }),
+        /* @__PURE__ */ 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__ */ jsx("div", { className: "flex items-center gap-1 overflow-x-auto pb-0.5", children: categories.map((cat) => /* @__PURE__ */ 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__ */ jsx("div", { className: "flex-1 overflow-y-auto p-4", children: filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center h-40 text-muted-foreground text-sm", children: /* @__PURE__ */ jsx("p", { children: "No templates match your search." }) }) : /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: filtered.map((template) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-start justify-between gap-2 mb-1.5", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-foreground group-hover:text-primary transition-colors", children: template.meta.name }),
+            /* @__PURE__ */ 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__ */ jsx("p", { className: "text-xs text-muted-foreground mb-2 line-clamp-2", children: template.meta.description }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(FileText, { size: 11, strokeWidth: 1.75 }),
+              template.meta.fieldCount,
+              " field",
+              template.meta.fieldCount !== 1 ? "s" : ""
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx(Layers, { size: 11, strokeWidth: 1.75 }),
+              template.meta.sectionCount,
+              " section",
+              template.meta.sectionCount !== 1 ? "s" : ""
+            ] })
+          ] })
+        ]
+      },
+      template.meta.id
+    )) }) }),
+    confirmTemplate && /* @__PURE__ */ 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__ */ jsxs("div", { className: "text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Use " }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: confirmTemplate.meta.name }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "? This will replace the current form." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmTemplate(null), children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleConfirm, children: "Use Template" })
+      ] })
+    ] })
+  ] }) });
+}
+function useDebouncedValidation(delayMs = 500) {
+  const [errors, setErrors] = useState([]);
+  const timerRef = useRef(null);
+  const validate = 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 {
+          validateSchema(parsed);
+        } catch (err) {
+          if (err instanceof 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 = createContext({});
 function useBuilderTheme() {
   return useContext(ThemeCtx);
@@ -2857,7 +3815,16 @@ var FormBuilderErrorBoundary = class extends Component {
   }
 };
 function FormBuilderCore(props) {
-  const { initialSchema = DEFAULT_SCHEMA, onChange, onSave, height = "100vh", theme, className, toolbarExtra, questionTypes, palette } = props;
+  const { initialSchema = DEFAULT_SCHEMA, onChange, onSave, height = "100vh", theme, className, toolbarExtra, questionTypes, palette, preview, templates, schemaUrl } = props;
+  const [viewMode, setViewMode] = useState("design");
+  const [jsonText, setJsonText] = useState("");
+  const [jsonSwitchError, setJsonSwitchError] = useState(null);
+  const [showLogicMap, setShowLogicMap] = useState(false);
+  const [showTemplateGallery, setShowTemplateGallery] = useState(false);
+  const [saveValidationErrors, setSaveValidationErrors] = useState(null);
+  const [schemaUrlLoading, setSchemaUrlLoading] = useState(!!schemaUrl);
+  const [schemaUrlError, setSchemaUrlError] = 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);
@@ -2873,15 +3840,54 @@ function FormBuilderCore(props) {
       setMobilePanel("none");
     }
   }, [dragDrop.activeDragItem]);
+  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 = validateSchema(json);
+        builderState.resetSchema(validated);
+      } catch (err) {
+        if (err instanceof 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]);
   useEffect(() => {
     if (onChange && builderState.isDirty) {
       onChange(builderState.schema);
     }
   }, [builderState.schema, builderState.isDirty, onChange]);
   const handleSave = useCallback(() => {
-    if (onSave) {
+    if (!onSave) return;
+    try {
+      validateSchema(builderState.schema);
+      setSaveValidationErrors(null);
       onSave(builderState.schema);
       builderState.markClean();
+    } catch (err) {
+      if (err instanceof FormEngineSchemaError) {
+        setSaveValidationErrors(err.issues.map((issue) => issue.message));
+      } else {
+        setSaveValidationErrors([err.message ?? "Unknown validation error"]);
+      }
     }
   }, [onSave, builderState]);
   const handleExport = useCallback(() => {
@@ -2924,6 +3930,32 @@ ${details}`);
     },
     [builderState]
   );
+  const handleViewModeChange = useCallback(
+    (newMode) => {
+      setJsonSwitchError(null);
+      if (viewMode === "json" && newMode !== "json") {
+        try {
+          const parsed = JSON.parse(jsonText);
+          const validated = validateSchema(parsed);
+          builderState.resetSchema(validated);
+        } catch (err) {
+          if (err instanceof SyntaxError) {
+            setJsonSwitchError("Cannot switch: JSON has syntax errors");
+          } else if (err instanceof 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 = useCallback(
     (e) => {
       const mod = e.metaKey || e.ctrlKey;
@@ -3025,8 +4057,74 @@ ${details}`);
                   /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-2 h-5" }),
                   builderState.isDirty && /* @__PURE__ */ jsx("span", { className: "text-xs text-primary", role: "status", children: "Unsaved changes" })
                 ] }),
-                /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: toolbarExtra }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 bg-muted rounded-md p-0.5", children: [
+                    /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        variant: viewMode === "design" ? "secondary" : "ghost",
+                        size: "sm",
+                        onClick: () => handleViewModeChange("design"),
+                        className: "gap-1.5 h-7 px-2.5 text-xs",
+                        children: [
+                          /* @__PURE__ */ jsx(PencilRuler, { size: 13, strokeWidth: 1.75 }),
+                          "Design"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        variant: viewMode === "preview" ? "secondary" : "ghost",
+                        size: "sm",
+                        onClick: () => handleViewModeChange("preview"),
+                        className: "gap-1.5 h-7 px-2.5 text-xs",
+                        children: [
+                          /* @__PURE__ */ jsx(Eye, { size: 13, strokeWidth: 1.75 }),
+                          "Preview"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        variant: viewMode === "json" ? "secondary" : "ghost",
+                        size: "sm",
+                        onClick: () => handleViewModeChange("json"),
+                        className: "gap-1.5 h-7 px-2.5 text-xs",
+                        children: [
+                          /* @__PURE__ */ jsx(Code, { size: 13, strokeWidth: 1.75 }),
+                          "JSON"
+                        ]
+                      }
+                    )
+                  ] }),
+                  toolbarExtra
+                ] }),
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1.5", children: [
+                  templates && templates.length > 0 && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      onClick: () => setShowTemplateGallery(true),
+                      title: "Browse templates",
+                      "aria-label": "Template gallery",
+                      children: /* @__PURE__ */ jsx(LayoutTemplate, { size: 15, strokeWidth: 1.75 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      onClick: () => setShowLogicMap(true),
+                      title: "View branching logic map",
+                      "aria-label": "Logic map",
+                      children: /* @__PURE__ */ jsx(GitBranch, { size: 15, strokeWidth: 1.75 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-1 h-5" }),
                   /* @__PURE__ */ jsx(
                     Button,
                     {
@@ -3070,6 +4168,47 @@ ${details}`);
                     }
                   ) }),
                   /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 bg-muted rounded-md p-0.5", children: [
+                      /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          variant: viewMode === "design" ? "secondary" : "ghost",
+                          size: "sm",
+                          onClick: () => handleViewModeChange("design"),
+                          className: "gap-1 h-7 px-2 text-xs",
+                          children: [
+                            /* @__PURE__ */ jsx(PencilRuler, { size: 12, strokeWidth: 1.75 }),
+                            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Design" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          variant: viewMode === "preview" ? "secondary" : "ghost",
+                          size: "sm",
+                          onClick: () => handleViewModeChange("preview"),
+                          className: "gap-1 h-7 px-2 text-xs",
+                          children: [
+                            /* @__PURE__ */ jsx(Eye, { size: 12, strokeWidth: 1.75 }),
+                            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Preview" })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          variant: viewMode === "json" ? "secondary" : "ghost",
+                          size: "sm",
+                          onClick: () => handleViewModeChange("json"),
+                          className: "gap-1 h-7 px-2 text-xs",
+                          children: [
+                            /* @__PURE__ */ jsx(Code, { size: 12, strokeWidth: 1.75 }),
+                            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "JSON" })
+                          ]
+                        }
+                      )
+                    ] }),
                     toolbarExtra,
                     /* @__PURE__ */ jsxs(Button, { onClick: handleSave, size: "sm", className: "border-0 shadow-sm fcb-glow ml-1", "aria-label": "Save form", children: [
                       /* @__PURE__ */ jsx(Save, { size: 14, strokeWidth: 2 }),
@@ -3158,7 +4297,50 @@ ${details}`);
                   "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 flex overflow-hidden relative", children: [
+              jsonSwitchError && /* @__PURE__ */ 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__ */ jsx("span", { children: jsonSwitchError }),
+                /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setJsonSwitchError(null), className: "ml-2 hover:underline", children: "Dismiss" })
+              ] }),
+              saveValidationErrors && saveValidationErrors.length > 0 && /* @__PURE__ */ jsxs("div", { className: "shrink-0 px-4 py-2 bg-destructive/10 border-b border-destructive/20 text-xs", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "font-semibold text-destructive", children: [
+                    "Schema validation failed (",
+                    saveValidationErrors.length,
+                    " issue",
+                    saveValidationErrors.length !== 1 ? "s" : "",
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setSaveValidationErrors(null), className: "text-destructive hover:underline", children: "Dismiss" })
+                ] }),
+                /* @__PURE__ */ jsxs("ul", { className: "list-disc pl-4 text-destructive/80 space-y-0.5", children: [
+                  saveValidationErrors.slice(0, 10).map((msg, i) => /* @__PURE__ */ jsx("li", { children: msg }, i)),
+                  saveValidationErrors.length > 10 && /* @__PURE__ */ jsxs("li", { children: [
+                    "...and ",
+                    saveValidationErrors.length - 10,
+                    " more"
+                  ] })
+                ] })
+              ] }),
+              schemaUrlLoading && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("span", { children: [
+                  "Failed to load schema: ",
+                  schemaUrlError
+                ] }),
+                /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setSchemaUrlError(null), className: "ml-2 hover:underline", children: "Dismiss" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex-1 flex overflow-hidden relative", children: viewMode === "json" ? /* @__PURE__ */ jsx(
+                JsonEditorPanel,
+                {
+                  value: jsonText,
+                  onChange: setJsonText,
+                  errors: jsonErrors,
+                  onValidate: validateJson
+                }
+              ) : viewMode === "preview" ? /* @__PURE__ */ jsx(FormPreviewPanel, { schema: builderState.schema, preview }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx(QuestionPalette, { questionTypes: mergedQuestionTypes, palette }) }),
                 /* @__PURE__ */ jsx(FormCanvas, { builderState }),
                 /* @__PURE__ */ jsx("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsx(PropertiesPanel, { builderState }) }),
@@ -3172,11 +4354,27 @@ ${details}`);
                     "aria-hidden": "true"
                   }
                 )
-              ] })
+              ] }) })
             ]
           }
         ),
-        /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: dragDrop.activeDragItem && /* @__PURE__ */ jsx(DragOverlayContent, { item: dragDrop.activeDragItem, schema: builderState.schema, questionTypes: mergedQuestionTypes }) })
+        /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: dragDrop.activeDragItem && /* @__PURE__ */ jsx(DragOverlayContent, { item: dragDrop.activeDragItem, schema: builderState.schema, questionTypes: mergedQuestionTypes }) }),
+        showLogicMap && /* @__PURE__ */ jsx(
+          LogicFlowEditor,
+          {
+            schema: builderState.schema,
+            onChange: (updated) => builderState.resetSchema(updated),
+            onClose: () => setShowLogicMap(false)
+          }
+        ),
+        showTemplateGallery && templates && /* @__PURE__ */ jsx(
+          TemplateGallery,
+          {
+            templates,
+            onSelect: (template) => builderState.resetSchema(template.schema),
+            onClose: () => setShowTemplateGallery(false)
+          }
+        )
       ]
     }
   ) });
@@ -3231,76 +4429,54 @@ 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
+  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: "#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"
+  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"
 };
 
 export { DEFAULT_PALETTE, DEFAULT_SCHEMA, FormBuilder, FormBuilderThemeProvider, QUESTION_TYPE_INFO, addOption, addQuestion, addSection, cleanPreset, duplicateQuestion, duplicateSection, findQuestion, findSection, generateId, generateOptionId, generateQuestionId, generateSectionId, moveOption, moveQuestion, moveSection, removeOption, removeQuestion, removeSection, squaredrDarkPreset, updateOption, updateQuestion, updateSection, useBuilderState, useBuilderTheme, useDragDrop, useUndoRedo };