@squaredr/fieldcraft-pro 1.6.4 → 1.7.0

package/README.md

@@ -1,15 +1,15 @@
 # @squaredr/fieldcraft-pro
 
 [![npm version](https://img.shields.io/npm/v/@squaredr/fieldcraft-pro.svg)](https://www.npmjs.com/package/@squaredr/fieldcraft-pro)
-[![license](https://img.shields.io/badge/license-Commercial-blue.svg)](https://squaredr.tech/products/fieldcraft/admin-pro#pricing)
+[![license](https://img.shields.io/badge/license-Commercial-blue.svg)](https://fieldcraft.squaredr.tech/pro#pricing)
 
-Pro components for [FieldCraft](https://squaredr.tech/products/fieldcraft) — a schema-driven form engine for React. Build forms visually, view responses, and customize themes without writing code.
+Pro components for [FieldCraft](https://fieldcraft.squaredr.tech) — a schema-driven form engine for React. Build forms visually, view responses, and customize themes without writing code.
 
 ## What's Included
 
 | Component | Description |
 |-----------|-------------|
-| **FormBuilder** | Drag-and-drop visual form designer with 32 field types, undo/redo, import/export, and live preview |
+| **FormBuilder** | Drag-and-drop visual form designer with 44 field types, undo/redo, import/export, and live preview |
 | **ResponseViewer** | Read-only viewer for submitted form data with table and detail views, CSV/JSON export |
 | **ThemeEditor** | Visual theme editor for form styling with color pickers, typography controls, and live preview |
 
@@ -67,18 +67,18 @@ import { FormBuilder } from "@squaredr/fieldcraft-pro";
 />
 ```
 
-### Field Types (32)
+### Field Types (42)
 
 | Category | Fields |
 |----------|--------|
-| Text | Short Text, Long Text, Email, Phone, URL |
-| Numeric | Number, Slider, Rating, NPS, Opinion Scale |
-| Selection | Single Select, Multi Select, Dropdown, Yes/No, Ranking |
-| Date/Time | Date, Time |
-| Media | File Upload |
+| Text | Short Text, Long Text, Email, Phone, URL, Password |
+| Numeric | Number, Slider, Rating, NPS, Opinion Scale, Currency |
+| Selection | Single Select, Multi Select, Dropdown, Yes/No, Ranking, Checkbox Group |
+| Date/Time | Date, Time, Date Range, Date of Birth |
+| Media | File Upload, Signature, Image Capture |
 | Content | Welcome Screen, Thank You Screen, Rich Text, Image, Video, Divider, Spacer |
 | Structural | Section Header, Info Block, Page Break, Consent |
-| Advanced | Matrix, Calculated, Hidden |
+| Advanced | Matrix, Calculated, Hidden, Repeater, Address, Legal Name, Country Select |
 
 ### Extending with Custom Fields
 
@@ -125,8 +125,8 @@ Includes presets: Clean, Dark, Modern, High Contrast, Clinical, Playful.
 ## Requirements
 
 - React 18 or 19
-- `@squaredr/fieldcraft-core` >= 1.3.3
-- `@squaredr/fieldcraft-react` >= 1.2.8
+- `@squaredr/fieldcraft-core` >= 1.6.0
+- `@squaredr/fieldcraft-react` >= 1.6.0
 
 ## License
 
@@ -136,4 +136,4 @@ See [LICENSE.txt](./LICENSE.txt) for details.
 
 ---
 
-[Get a license](https://squaredr.tech/products/fieldcraft/admin-pro#pricing) | [Documentation](https://squaredr.tech/products/fieldcraft/docs/pro) | [GitHub](https://github.com/SquaredR98/fieldcraft-pro) | [Discord](https://discord.gg/squaredr)
+[Get a license](https://fieldcraft.squaredr.tech/pro#pricing) | [Documentation](https://fieldcraft.squaredr.tech/docs) | [GitHub](https://github.com/SquaredR98/fieldcraft-pro) | [Discord](https://discord.gg/squaredr)

package/dist/{chunk-VECQKSWS.mjs → chunk-4MMKB2EW.mjs}

@@ -2,37 +2,16 @@ import { createContext, useState, useEffect, useContext } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // ../license/dist/index.mjs
+var PRODUCT_IDS = {
+  FIELDCRAFT_PRO: 1
+};
 var LEGACY_TIER_MAP = {
   "01": "starter",
   "02": "pro",
   "03": "business",
   "04": "enterprise"
 };
-var TIER_MAP_NUMERIC = {
-  1: "starter",
-  2: "pro",
-  3: "business",
-  4: "enterprise"
-};
-var PRO_FEATURES = [
-  "SchemaEditor",
-  "ResponseViewer",
-  "ThemeEditor",
-  "FormBuilder",
-  "ApiManager",
-  "Analytics"
-];
-var ALL_FEATURES = [
-  ...PRO_FEATURES,
-  "Telehealth"
-];
-var TIER_FEATURES = {
-  starter: ["SchemaEditor", "ResponseViewer"],
-  pro: PRO_FEATURES,
-  business: ALL_FEATURES,
-  enterprise: ALL_FEATURES
-};
-var HMAC_SECRET = "e50a657813a5ab9563050728a605b9ab58b911d5c1a9f48c6825f379a533ccd7685d11d01937d9f135776a0db3efeefe29b3e5282b27ede8cee93758f94f2d75";
+var HMAC_SECRET = "15bb3af8d82d01de70ab556c5785fd92461e336b941ed65cf99834d5e99924e742db9a9197056b531bf0f429df621be17cb71d8ba5e892075e1b4283969657dc3bbf4d0287cf15804d5482510b8a405bb33a69249e8007a8a3c2af0d499423623dafecb719d985a4ad8e2edf8623936db90387ea3139f8d0eeb2556e408a0d6de69c034e33e1e6a0633af0eeeb63dd13f4711ba0a0aacc3af6b87bdace13a7886013d3a5410817966f0af7230f277b6207ad5de2916f6c0bfab5c2a18ccfe72d513bb726206d8929e8b01d91f6bf38572c0f238302c4fdf0263c7bd0c48cf0e1678f94de727b61388c672c11e82ecb96591d264731177d7588d92cdf70ea46a2";
 var B32_CHARS = "0123456789ABCDEFGHIJKLMNOPQRSTUV";
 function base32hexDecode(str) {
   const upper = str.toUpperCase();
@@ -66,14 +45,15 @@ function parseOpaqueKey(key) {
   if (!stripped.startsWith("FCPRO")) return null;
   const encoded = stripped.slice(5);
   const decoded = base32hexDecode(encoded);
-  if (!decoded || decoded.length < 17) return null;
-  const tier = decoded[0];
-  if (!(tier in TIER_MAP_NUMERIC)) return null;
-  const expiryTimestamp = decoded[1] << 24 | decoded[2] << 16 | decoded[3] << 8 | decoded[4];
-  const expiryUnsigned = expiryTimestamp >>> 0;
-  const nonce = decoded.slice(5, 9);
-  const signature = decoded.slice(9, 17);
-  return { format: "opaque", tier, expiryTimestamp: expiryUnsigned, nonce, signature };
+  if (!decoded || decoded.length < 25) return null;
+  const productId = decoded[0];
+  if (productId !== PRODUCT_IDS.FIELDCRAFT_PRO) return null;
+  const purchaseTimestamp = (decoded[1] << 24 | decoded[2] << 16 | decoded[3] << 8 | decoded[4]) >>> 0;
+  const expiryTimestamp = (decoded[5] << 24 | decoded[6] << 16 | decoded[7] << 8 | decoded[8]) >>> 0;
+  const emailHash = decoded.slice(9, 13);
+  const nonce = decoded.slice(13, 17);
+  const signature = decoded.slice(17, 25);
+  return { format: "opaque", productId, purchaseTimestamp, expiryTimestamp, emailHash, nonce, signature };
 }
 function parseKey(key) {
   if (!key || typeof key !== "string") return null;
@@ -119,54 +99,52 @@ function isExpiredOpaque(expiryTimestamp) {
   if (expiryTimestamp === 4294967295) return false;
   return Date.now() / 1e3 > expiryTimestamp;
 }
+function timingSafeEqual(a, b) {
+  if (a.length !== b.length) return false;
+  let result = 0;
+  for (let i = 0; i < a.length; i++) {
+    result |= a[i] ^ b[i];
+  }
+  return result === 0;
+}
 async function validateLicense(key) {
   if (!key || typeof key !== "string") {
-    return { status: "invalid", tier: null };
+    return { status: "invalid" };
   }
   const parsed = parseKey(key);
   if (!parsed) {
-    return { status: "invalid", tier: null };
+    return { status: "invalid" };
   }
   if (parsed.format === "opaque") {
-    const payload = new Uint8Array(9);
-    payload[0] = parsed.tier;
-    payload[1] = parsed.expiryTimestamp >>> 24 & 255;
-    payload[2] = parsed.expiryTimestamp >>> 16 & 255;
-    payload[3] = parsed.expiryTimestamp >>> 8 & 255;
-    payload[4] = parsed.expiryTimestamp & 255;
-    payload.set(parsed.nonce, 5);
+    const payload = new Uint8Array(17);
+    payload[0] = parsed.productId;
+    payload[1] = parsed.purchaseTimestamp >>> 24 & 255;
+    payload[2] = parsed.purchaseTimestamp >>> 16 & 255;
+    payload[3] = parsed.purchaseTimestamp >>> 8 & 255;
+    payload[4] = parsed.purchaseTimestamp & 255;
+    payload[5] = parsed.expiryTimestamp >>> 24 & 255;
+    payload[6] = parsed.expiryTimestamp >>> 16 & 255;
+    payload[7] = parsed.expiryTimestamp >>> 8 & 255;
+    payload[8] = parsed.expiryTimestamp & 255;
+    payload.set(parsed.emailHash, 9);
+    payload.set(parsed.nonce, 13);
     const expectedSig = await computeHmacOpaque(payload);
-    let match = true;
-    for (let i = 0; i < 8; i++) {
-      if (parsed.signature[i] !== expectedSig[i]) {
-        match = false;
-        break;
-      }
-    }
-    if (!match) {
-      return { status: "invalid", tier: null };
-    }
-    const tier2 = TIER_MAP_NUMERIC[parsed.tier];
-    if (!tier2) {
-      return { status: "invalid", tier: null };
+    if (!timingSafeEqual(parsed.signature, expectedSig)) {
+      return { status: "invalid" };
     }
     if (isExpiredOpaque(parsed.expiryTimestamp)) {
-      return { status: "expired", tier: tier2 };
+      return { status: "expired" };
     }
-    return { status: "valid", tier: tier2 };
+    return { status: "valid" };
   }
   const expectedHash = await computeHmacLegacy(parsed.tierHex, parsed.expiryHex);
   if (parsed.hash.toUpperCase() !== expectedHash) {
-    return { status: "invalid", tier: null };
+    return { status: "invalid" };
   }
-  const tier = LEGACY_TIER_MAP[parsed.tierHex];
   if (isExpiredLegacy(parsed.expiryHex)) {
-    return { status: "expired", tier };
+    return { status: "expired" };
   }
-  return { status: "valid", tier };
-}
-function tierHasFeature(tier, featureName) {
-  return TIER_FEATURES[tier]?.includes(featureName) ?? false;
+  return { status: "valid" };
 }
 var DEV_HOSTNAMES = /* @__PURE__ */ new Set([
   "localhost",
@@ -239,7 +217,7 @@ function isProductionEnvironment() {
   }
   return false;
 }
-var PING_URL = "https://squaredr.tech/api/license/ping";
+var PING_URL = typeof process !== "undefined" && process.env?.NEXT_PUBLIC_FCPRO_PING_URL || "https://fieldcraft.dev/api/license/ping";
 var CACHE_KEY = "fcpro_lp";
 var CACHE_TTL_MS = 24 * 60 * 60 * 1e3;
 function hashKey(key) {
@@ -267,10 +245,10 @@ function readCache(key) {
     return null;
   }
 }
-function writeCache(key, status, tier, reason = null) {
+function writeCache(key, status, reason = null) {
   if (typeof window === "undefined" || !window.localStorage) return;
   try {
-    const entry = { s: status, t: tier, r: reason, ts: Date.now() };
+    const entry = { s: status, r: reason, ts: Date.now() };
     localStorage.setItem(cacheId(key), JSON.stringify(entry));
   } catch {
   }
@@ -278,12 +256,12 @@ function writeCache(key, status, tier, reason = null) {
 function getCachedPingResult(key) {
   const cached = readCache(key);
   if (!cached) return null;
-  return { status: cached.s, tier: cached.t, reason: cached.r || void 0 };
+  return { status: cached.s, reason: cached.r || void 0 };
 }
 async function performPing(key) {
   const cached = readCache(key);
   if (cached) {
-    return { status: cached.s, tier: cached.t };
+    return { status: cached.s };
   }
   try {
     const controller = new AbortController();
@@ -297,29 +275,28 @@ async function performPing(key) {
     clearTimeout(timeout);
     if (!res.ok) return null;
     const data = await res.json();
-    const tier = data.tier || null;
     if (data.status === "active") {
-      writeCache(key, "valid", tier);
-      return { status: "valid", tier };
+      writeCache(key, "valid");
+      return { status: "valid" };
     }
     if (data.status === "revoked") {
-      writeCache(key, "revoked", null, data.reason);
-      return { status: "revoked", tier: null, reason: data.reason };
+      writeCache(key, "revoked", data.reason);
+      return { status: "revoked", reason: data.reason };
     }
     if (data.status === "expired") {
-      writeCache(key, "expired", tier);
-      return { status: "expired", tier };
+      writeCache(key, "expired");
+      return { status: "expired" };
     }
     if (data.status === "domain_mismatch") {
-      writeCache(key, "domain_mismatch", null, data.reason);
-      return { status: "domain_mismatch", tier: null, reason: data.reason };
+      writeCache(key, "domain_mismatch", data.reason);
+      return { status: "domain_mismatch", reason: data.reason };
     }
     return null;
   } catch {
     return null;
   }
 }
-var defaultContext = { status: "validating", tier: null };
+var defaultContext = { status: "validating" };
 var LicenseCtx = createContext(defaultContext);
 function FieldCraftProProvider({ licenseKey, children }) {
   const [license, setLicense] = useState(defaultContext);
@@ -333,7 +310,7 @@ function FieldCraftProProvider({ licenseKey, children }) {
       const cached = getCachedPingResult(licenseKey);
       if (cached) {
         if (cached.status === "revoked" || cached.status === "domain_mismatch") {
-          setLicense({ status: cached.status, tier: null });
+          setLicense({ status: cached.status });
         }
         return;
       }
@@ -341,7 +318,7 @@ function FieldCraftProProvider({ licenseKey, children }) {
         if (cancelled) return;
         if (!pingResult) return;
         if (pingResult.status === "revoked" || pingResult.status === "domain_mismatch") {
-          setLicense({ status: pingResult.status, tier: null });
+          setLicense({ status: pingResult.status });
         }
       });
     });
@@ -549,7 +526,7 @@ function UnlicensedOverlay({ featureName, reason, children }) {
 }
 function requireLicense(Component, featureName) {
   function LicenseGated(props) {
-    const { status, tier } = useLicense();
+    const { status } = useLicense();
     const isProduction = isProductionEnvironment();
     if (!isProduction) {
       return /* @__PURE__ */ jsx(Component, { ...props });
@@ -557,8 +534,7 @@ function requireLicense(Component, featureName) {
     if (status === "validating") {
       return null;
     }
-    const isLicensed = status === "valid" && tier != null && tierHasFeature(tier, featureName);
-    if (isLicensed) {
+    if (status === "valid") {
       return /* @__PURE__ */ jsx(Component, { ...props });
     }
     let reason = "A valid license is required for production use.";
@@ -570,8 +546,6 @@ function requireLicense(Component, featureName) {
       reason = "This license key has been revoked. Please contact support or purchase a new license.";
     } else if (status === "domain_mismatch") {
       reason = "This license key is registered to a different domain. Each key can only be used on one production domain. Please purchase a new license for this domain.";
-    } else if (!tier || !tierHasFeature(tier, featureName)) {
-      reason = "Your license does not include this feature. Please upgrade your plan.";
     }
     return /* @__PURE__ */ jsx(UnlicensedOverlay, { featureName, reason, children: /* @__PURE__ */ jsx(Component, { ...props }) });
   }

package/dist/{chunk-CFVT2R42.mjs → chunk-4TN6YJDF.mjs}

@@ -1,4 +1,4 @@
-import { requireLicense } from './chunk-VECQKSWS.mjs';
+import { requireLicense } from './chunk-4MMKB2EW.mjs';
 import { createContext, useMemo, useState, useRef, useEffect, useCallback, useContext } from 'react';
 import { FormEngineRenderer } from '@squaredr/fieldcraft-react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-5LKGCZAW.mjs → chunk-GZIV2XAD.mjs}

@@ -1,5 +1,5 @@
 import { cn } from './chunk-QQ4JZGTD.mjs';
-import { requireLicense } from './chunk-VECQKSWS.mjs';
+import { requireLicense } from './chunk-4MMKB2EW.mjs';
 import { useState, useEffect, useMemo } from 'react';
 import { Input, Button, Separator, Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@squaredr/fieldcraft-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-ANBMT5AW.mjs → chunk-J5V6OVZO.mjs}

@@ -1,12 +1,12 @@
 import { cn } from './chunk-QQ4JZGTD.mjs';
-import { requireLicense } from './chunk-VECQKSWS.mjs';
+import { requireLicense } from './chunk-4MMKB2EW.mjs';
 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, 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 { ChevronDown, Undo2, Redo2, PencilRuler, Eye, Code, GitBranch, LayoutTemplate, Upload, Download, Save, X, PanelLeft, PanelRight, Search, ChevronRight, Plus, Settings, FileText, Layers, ZoomOut, ZoomIn, Maximize, 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 { MarkerType, Handle, Position, getBezierPath, BaseEdge, EdgeLabelRenderer, useNodesState, useEdgesState, ReactFlowProvider, useReactFlow, ReactFlow, Background, MiniMap } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 
 var MAX_HISTORY = 50;
@@ -3425,7 +3425,7 @@ var defaultEdgeOptions = {
     height: 12
   }
 };
-function LogicFlowEditor({ schema, onChange, onClose }) {
+function LogicFlowEditor({ schema, onChange }) {
   const noSections = schema.sections.length === 0;
   const flowGraph = useMemo(() => buildReactFlowGraph(schema), [schema]);
   const [nodes, setNodes, onNodesChange] = useNodesState(flowGraph.nodes);
@@ -3517,33 +3517,89 @@ function LogicFlowEditor({ schema, onChange, onClose }) {
   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" : ""
-        ] })
-      ] }),
+  const totalFields = useMemo(
+    () => schema.sections.reduce((sum, s) => sum + s.questions.length, 0),
+    [schema]
+  );
+  const conditionalFields = useMemo(
+    () => schema.sections.reduce(
+      (sum, s) => sum + s.questions.filter((q) => !!q.showIf).length,
+      0
+    ),
+    [schema]
+  );
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(
+    LogicFlowInner,
+    {
+      noSections,
+      nodes,
+      edges,
+      onNodesChange,
+      onEdgesChange,
+      onNodeClick,
+      onConnect,
+      onEdgesDelete,
+      selectedFieldId,
+      selectedQuestion,
+      setSelectedFieldId,
+      handleConditionUpdate,
+      schema,
+      sectionIds,
+      showIfCount,
+      jumpCount,
+      totalFields,
+      conditionalFields
+    }
+  ) });
+}
+function LogicFlowInner({
+  noSections,
+  nodes,
+  edges,
+  onNodesChange,
+  onEdgesChange,
+  onNodeClick,
+  onConnect,
+  onEdgesDelete,
+  selectedFieldId,
+  selectedQuestion,
+  setSelectedFieldId,
+  handleConditionUpdate,
+  schema,
+  sectionIds,
+  showIfCount,
+  jumpCount,
+  totalFields,
+  conditionalFields
+}) {
+  const { zoomIn, zoomOut, fitView } = useReactFlow();
+  return /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col bg-background min-h-0", children: [
+    /* @__PURE__ */ jsxs("div", { className: "shrink-0 h-9 flex items-center justify-between px-4 border-b border-border bg-card/50", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        sectionIds.length,
+        " section",
+        sectionIds.length !== 1 ? "s" : "",
+        " \xB7 ",
+        totalFields,
+        " field",
+        totalFields !== 1 ? "s" : "",
+        conditionalFields > 0 && ` \xB7 ${conditionalFields} conditional`,
+        showIfCount > 0 && ` \xB7 ${showIfCount} rule${showIfCount !== 1 ? "s" : ""}`,
+        jumpCount > 0 && ` \xB7 ${jumpCount} jump${jumpCount !== 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 }) })
+        /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground mr-2 hidden md:inline", children: "Drag between nodes to create conditions \xB7 Select edges + Delete to remove" }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-xs", onClick: () => zoomOut(), title: "Zoom out", children: /* @__PURE__ */ jsx(ZoomOut, { size: 14, strokeWidth: 1.75 }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-xs", onClick: () => zoomIn(), title: "Zoom in", children: /* @__PURE__ */ jsx(ZoomIn, { size: 14, strokeWidth: 1.75 }) }),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-xs", onClick: () => fitView({ padding: 0.2 }), title: "Fit to view", children: /* @__PURE__ */ jsx(Maximize, { size: 14, 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(
+    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-3", children: [
+      /* @__PURE__ */ jsx(GitBranch, { size: 40, className: "mx-auto opacity-30" }),
+      /* @__PURE__ */ jsx("p", { className: "font-medium", children: "No logic to display" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs max-w-xs mx-auto", children: "Switch to Design mode and add sections with fields. Then come back here to visualize and edit branching logic." })
+    ] }) }) : /* @__PURE__ */ jsxs("div", { className: "flex-1 flex min-h-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxs(
         ReactFlow,
         {
           nodes,
@@ -3562,7 +3618,6 @@ function LogicFlowEditor({ schema, onChange, onClose }) {
           proOptions: { hideAttribution: true },
           children: [
             /* @__PURE__ */ jsx(Background, { gap: 20, size: 1 }),
-            /* @__PURE__ */ jsx(Controls, { showInteractive: false }),
             /* @__PURE__ */ jsx(
               MiniMap,
               {
@@ -3577,9 +3632,9 @@ function LogicFlowEditor({ schema, onChange, onClose }) {
           ]
         }
       ) }),
-      selectedFieldId && selectedQuestion && /* @__PURE__ */ jsxs("div", { className: "w-72 border-l border-border bg-card overflow-auto", children: [
+      selectedFieldId && selectedQuestion && /* @__PURE__ */ jsxs("div", { className: "w-72 shrink-0 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__ */ jsxs("div", { className: "min-w-0", 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 })
           ] }),
@@ -3590,7 +3645,7 @@ function LogicFlowEditor({ schema, onChange, onClose }) {
               size: "icon-xs",
               onClick: () => setSelectedFieldId(null),
               title: "Close panel",
-              children: /* @__PURE__ */ jsx(X, { size: 14, strokeWidth: 1.75 })
+              children: /* @__PURE__ */ jsx("span", { className: "text-xs", children: "\xD7" })
             }
           )
         ] }),
@@ -3604,7 +3659,7 @@ function LogicFlowEditor({ schema, onChange, onClose }) {
         ) })
       ] })
     ] }),
-    /* @__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: "shrink-0 px-4 py-1.5 border-t border-border bg-card/50 flex items-center gap-4 text-[11px] 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" })
@@ -3859,7 +3914,6 @@ function FormBuilderCore(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);
@@ -4016,6 +4070,11 @@ ${details}`);
         handleSave();
         return;
       }
+      if (mod && e.key === "l") {
+        e.preventDefault();
+        handleViewModeChange(viewMode === "logic" ? "design" : "logic");
+        return;
+      }
       if (isEditing) return;
       if (e.key === "Delete" || e.key === "Backspace") {
         const sel = builderState.selectedItem;
@@ -4046,7 +4105,7 @@ ${details}`);
         }
       }
     },
-    [builderState, handleSave]
+    [builderState, handleSave, handleViewModeChange, viewMode]
   );
   return /* @__PURE__ */ jsx(FormBuilderThemeProvider, { theme, children: /* @__PURE__ */ jsxs(
     DndContext,
@@ -4137,6 +4196,19 @@ ${details}`);
                           "JSON"
                         ]
                       }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        variant: viewMode === "logic" ? "secondary" : "ghost",
+                        size: "sm",
+                        onClick: () => handleViewModeChange("logic"),
+                        className: "gap-1.5 h-7 px-2.5 text-xs",
+                        children: [
+                          /* @__PURE__ */ jsx(GitBranch, { size: 13, strokeWidth: 1.75 }),
+                          "Logic"
+                        ]
+                      }
                     )
                   ] }),
                   toolbarExtra
@@ -4153,17 +4225,6 @@ ${details}`);
                       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,
@@ -4247,6 +4308,19 @@ ${details}`);
                             /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "JSON" })
                           ]
                         }
+                      ),
+                      /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          variant: viewMode === "logic" ? "secondary" : "ghost",
+                          size: "sm",
+                          onClick: () => handleViewModeChange("logic"),
+                          className: "gap-1 h-7 px-2 text-xs",
+                          children: [
+                            /* @__PURE__ */ jsx(GitBranch, { size: 12, strokeWidth: 1.75 }),
+                            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Logic" })
+                          ]
+                        }
                       )
                     ] }),
                     toolbarExtra,
@@ -4380,7 +4454,13 @@ ${details}`);
                   errors: jsonErrors,
                   onValidate: validateJson
                 }
-              ) : viewMode === "preview" ? /* @__PURE__ */ jsx(FormPreviewPanel, { schema: builderState.schema, preview }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              ) : viewMode === "preview" ? /* @__PURE__ */ jsx(FormPreviewPanel, { schema: builderState.schema, preview }) : viewMode === "logic" ? /* @__PURE__ */ jsx(
+                LogicFlowEditor,
+                {
+                  schema: builderState.schema,
+                  onChange: (updated) => builderState.resetSchema(updated)
+                }
+              ) : /* @__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 }) }),
@@ -4399,14 +4479,6 @@ ${details}`);
           }
         ),
         /* @__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,
           {