@squaredr/fieldcraft-pro 1.1.1 → 1.3.0

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

@@ -1,8 +1,8 @@
 import { cn } from './chunk-QQ4JZGTD.mjs';
 import { requireLicense } from './chunk-VECQKSWS.mjs';
-import { forwardRef, createContext, Component, useRef, useEffect, useCallback, useState, useMemo, useContext } from 'react';
+import { forwardRef, createContext, Component, useRef, useState, useEffect, useCallback, useMemo, useContext } from 'react';
 import { DndContext, DragOverlay, useSensors, useSensor, MouseSensor, TouchSensor, useDraggable, useDroppable } from '@dnd-kit/core';
-import { ChevronDown, Undo2, Redo2, Upload, Download, Save, Search, ChevronRight, Plus, Settings, Copy, Trash2, X, 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 { 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 { validateSchema, FormEngineSchemaError } from '@squaredr/fieldcraft-core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -2862,6 +2862,17 @@ function FormBuilderCore(props) {
   const builderState = useBuilderState(initialSchema);
   const dragDrop = useDragDrop(builderState);
   const fileInputRef = useRef(null);
+  const [mobilePanel, setMobilePanel] = useState("none");
+  useEffect(() => {
+    if (builderState.selectedItem && window.innerWidth < 768) {
+      setMobilePanel("properties");
+    }
+  }, [builderState.selectedItem]);
+  useEffect(() => {
+    if (!dragDrop.activeDragItem && mobilePanel === "palette") {
+      setMobilePanel("none");
+    }
+  }, [dragDrop.activeDragItem]);
   useEffect(() => {
     if (onChange && builderState.isDirty) {
       onChange(builderState.schema);
@@ -2983,7 +2994,7 @@ ${details}`);
             role: "application",
             "aria-label": "Form Builder",
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "h-12 shrink-0 grid px-4 bg-card border-b border-border", style: { gridTemplateColumns: "1fr auto 1fr" }, role: "toolbar", "aria-label": "Builder toolbar", children: [
+              /* @__PURE__ */ jsxs("div", { className: "h-12 shrink-0 hidden md:grid px-4 bg-card border-b border-border", style: { gridTemplateColumns: "1fr auto 1fr" }, role: "toolbar", "aria-label": "Builder toolbar", children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
                   /* @__PURE__ */ jsx(
                     Button,
@@ -3043,23 +3054,124 @@ ${details}`);
                     /* @__PURE__ */ jsx(Save, { size: 14, strokeWidth: 2 }),
                     "Save"
                   ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "shrink-0 md:hidden bg-card border-b border-border", role: "toolbar", "aria-label": "Builder toolbar", children: [
+                /* @__PURE__ */ jsxs("div", { className: "h-10 grid px-2", style: { gridTemplateColumns: "auto 1fr auto" }, children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: mobilePanel === "palette" ? "secondary" : "ghost",
+                      size: "icon-sm",
+                      onClick: () => setMobilePanel((p) => p === "palette" ? "none" : "palette"),
+                      title: "Toggle field palette",
+                      "aria-label": "Toggle field palette",
+                      children: mobilePanel === "palette" ? /* @__PURE__ */ jsx(X, { size: 16, strokeWidth: 1.75 }) : /* @__PURE__ */ jsx(PanelLeft, { size: 16, strokeWidth: 1.75 })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+                    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 }),
+                      /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Save" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: mobilePanel === "properties" ? "secondary" : "ghost",
+                      size: "icon-sm",
+                      onClick: () => setMobilePanel((p) => p === "properties" ? "none" : "properties"),
+                      title: "Toggle properties panel",
+                      "aria-label": "Toggle properties panel",
+                      children: mobilePanel === "properties" ? /* @__PURE__ */ jsx(X, { size: 16, strokeWidth: 1.75 }) : /* @__PURE__ */ jsx(PanelRight, { size: 16, strokeWidth: 1.75 })
+                    }
+                  ) })
                 ] }),
-                /* @__PURE__ */ jsx(
-                  "input",
+                /* @__PURE__ */ jsxs("div", { className: "h-9 flex items-center justify-between px-2 border-t border-border/50", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon-sm",
+                        onClick: builderState.undo,
+                        disabled: !builderState.canUndo,
+                        className: "disabled:opacity-30",
+                        title: "Undo (Ctrl+Z)",
+                        "aria-label": "Undo",
+                        children: /* @__PURE__ */ jsx(Undo2, { size: 15, strokeWidth: 1.75 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon-sm",
+                        onClick: builderState.redo,
+                        disabled: !builderState.canRedo,
+                        className: "disabled:opacity-30",
+                        title: "Redo (Ctrl+Shift+Z)",
+                        "aria-label": "Redo",
+                        children: /* @__PURE__ */ jsx(Redo2, { size: 15, strokeWidth: 1.75 })
+                      }
+                    ),
+                    builderState.isDirty && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "mx-1 h-4" }),
+                      /* @__PURE__ */ jsx("span", { className: "text-xs text-primary", role: "status", children: "Unsaved" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon-sm",
+                        onClick: handleImport,
+                        title: "Import schema JSON",
+                        "aria-label": "Import schema",
+                        children: /* @__PURE__ */ jsx(Upload, { size: 14, strokeWidth: 1.75 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon-sm",
+                        onClick: handleExport,
+                        title: "Export schema JSON",
+                        "aria-label": "Export schema",
+                        children: /* @__PURE__ */ jsx(Download, { size: 14, strokeWidth: 1.75 })
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  accept: ".json,application/json",
+                  onChange: handleFileChange,
+                  className: "hidden",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 flex overflow-hidden relative", 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 }) }),
+                mobilePanel === "palette" && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 z-20 md:hidden shadow-lg", children: /* @__PURE__ */ jsx(QuestionPalette, { questionTypes: mergedQuestionTypes, palette }) }),
+                mobilePanel === "properties" && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 z-20 md:hidden shadow-lg", children: /* @__PURE__ */ jsx(PropertiesPanel, { builderState }) }),
+                mobilePanel !== "none" && /* @__PURE__ */ jsx(
+                  "div",
                   {
-                    ref: fileInputRef,
-                    type: "file",
-                    accept: ".json,application/json",
-                    onChange: handleFileChange,
-                    className: "hidden",
+                    className: "absolute inset-0 z-10 bg-black/20 md:hidden",
+                    onClick: () => setMobilePanel("none"),
                     "aria-hidden": "true"
                   }
                 )
-              ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
-                /* @__PURE__ */ jsx(QuestionPalette, { questionTypes: mergedQuestionTypes, palette }),
-                /* @__PURE__ */ jsx(FormCanvas, { builderState }),
-                /* @__PURE__ */ jsx(PropertiesPanel, { builderState })
               ] })
             ]
           }

package/dist/form-builder/index.js

@@ -3189,6 +3189,17 @@ function FormBuilderCore(props) {
   const builderState = useBuilderState(initialSchema);
   const dragDrop = useDragDrop(builderState);
   const fileInputRef = react.useRef(null);
+  const [mobilePanel, setMobilePanel] = react.useState("none");
+  react.useEffect(() => {
+    if (builderState.selectedItem && window.innerWidth < 768) {
+      setMobilePanel("properties");
+    }
+  }, [builderState.selectedItem]);
+  react.useEffect(() => {
+    if (!dragDrop.activeDragItem && mobilePanel === "palette") {
+      setMobilePanel("none");
+    }
+  }, [dragDrop.activeDragItem]);
   react.useEffect(() => {
     if (onChange && builderState.isDirty) {
       onChange(builderState.schema);
@@ -3310,7 +3321,7 @@ ${details}`);
             role: "application",
             "aria-label": "Form Builder",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-12 shrink-0 grid px-4 bg-card border-b border-border", style: { gridTemplateColumns: "1fr auto 1fr" }, role: "toolbar", "aria-label": "Builder toolbar", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-12 shrink-0 hidden md:grid px-4 bg-card border-b border-border", style: { gridTemplateColumns: "1fr auto 1fr" }, role: "toolbar", "aria-label": "Builder toolbar", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     fieldcraftReact.Button,
@@ -3370,23 +3381,124 @@ ${details}`);
                     /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { size: 14, strokeWidth: 2 }),
                     "Save"
                   ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "shrink-0 md:hidden bg-card border-b border-border", role: "toolbar", "aria-label": "Builder toolbar", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-10 grid px-2", style: { gridTemplateColumns: "auto 1fr auto" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    fieldcraftReact.Button,
+                    {
+                      variant: mobilePanel === "palette" ? "secondary" : "ghost",
+                      size: "icon-sm",
+                      onClick: () => setMobilePanel((p) => p === "palette" ? "none" : "palette"),
+                      title: "Toggle field palette",
+                      "aria-label": "Toggle field palette",
+                      children: mobilePanel === "palette" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16, strokeWidth: 1.75 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelLeft, { size: 16, strokeWidth: 1.75 })
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-1", children: [
+                    toolbarExtra,
+                    /* @__PURE__ */ jsxRuntime.jsxs(fieldcraftReact.Button, { onClick: handleSave, size: "sm", className: "border-0 shadow-sm fcb-glow ml-1", "aria-label": "Save form", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { size: 14, strokeWidth: 2 }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Save" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    fieldcraftReact.Button,
+                    {
+                      variant: mobilePanel === "properties" ? "secondary" : "ghost",
+                      size: "icon-sm",
+                      onClick: () => setMobilePanel((p) => p === "properties" ? "none" : "properties"),
+                      title: "Toggle properties panel",
+                      "aria-label": "Toggle properties panel",
+                      children: mobilePanel === "properties" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 16, strokeWidth: 1.75 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PanelRight, { size: 16, strokeWidth: 1.75 })
+                    }
+                  ) })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-9 flex items-center justify-between px-2 border-t border-border/50", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      fieldcraftReact.Button,
+                      {
+                        variant: "ghost",
+                        size: "icon-sm",
+                        onClick: builderState.undo,
+                        disabled: !builderState.canUndo,
+                        className: "disabled:opacity-30",
+                        title: "Undo (Ctrl+Z)",
+                        "aria-label": "Undo",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Undo2, { size: 15, strokeWidth: 1.75 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      fieldcraftReact.Button,
+                      {
+                        variant: "ghost",
+                        size: "icon-sm",
+                        onClick: builderState.redo,
+                        disabled: !builderState.canRedo,
+                        className: "disabled:opacity-30",
+                        title: "Redo (Ctrl+Shift+Z)",
+                        "aria-label": "Redo",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Redo2, { size: 15, strokeWidth: 1.75 })
+                      }
+                    ),
+                    builderState.isDirty && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(fieldcraftReact.Separator, { orientation: "vertical", className: "mx-1 h-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-primary", role: "status", children: "Unsaved" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      fieldcraftReact.Button,
+                      {
+                        variant: "ghost",
+                        size: "icon-sm",
+                        onClick: handleImport,
+                        title: "Import schema JSON",
+                        "aria-label": "Import schema",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { size: 14, strokeWidth: 1.75 })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      fieldcraftReact.Button,
+                      {
+                        variant: "ghost",
+                        size: "icon-sm",
+                        onClick: handleExport,
+                        title: "Export schema JSON",
+                        "aria-label": "Export schema",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { size: 14, strokeWidth: 1.75 })
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  accept: ".json,application/json",
+                  onChange: handleFileChange,
+                  className: "hidden",
+                  "aria-hidden": "true"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex overflow-hidden relative", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(QuestionPalette, { questionTypes: mergedQuestionTypes, palette }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(FormCanvas, { builderState }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex", children: /* @__PURE__ */ jsxRuntime.jsx(PropertiesPanel, { builderState }) }),
+                mobilePanel === "palette" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 z-20 md:hidden shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(QuestionPalette, { questionTypes: mergedQuestionTypes, palette }) }),
+                mobilePanel === "properties" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 z-20 md:hidden shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(PropertiesPanel, { builderState }) }),
+                mobilePanel !== "none" && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
                   {
-                    ref: fileInputRef,
-                    type: "file",
-                    accept: ".json,application/json",
-                    onChange: handleFileChange,
-                    className: "hidden",
+                    className: "absolute inset-0 z-10 bg-black/20 md:hidden",
+                    onClick: () => setMobilePanel("none"),
                     "aria-hidden": "true"
                   }
                 )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex overflow-hidden", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(QuestionPalette, { questionTypes: mergedQuestionTypes, palette }),
-                /* @__PURE__ */ jsxRuntime.jsx(FormCanvas, { builderState }),
-                /* @__PURE__ */ jsxRuntime.jsx(PropertiesPanel, { builderState })
               ] })
             ]
           }

package/dist/form-builder/index.mjs

@@ -1,3 +1,3 @@
-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 } from '../chunk-CJBC3KWB.mjs';
+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 } from '../chunk-GNBXIG63.mjs';
 export { cn } from '../chunk-QQ4JZGTD.mjs';
 import '../chunk-VECQKSWS.mjs';