@fayz-ai/plugin-forms 0.1.1

package/dist/FormBuilder-KDANEL6Z.js

@@ -0,0 +1,613 @@
+import { FormRenderer } from './chunk-32I43T37.js';
+import React2, { useState, useEffect, useCallback } from 'react';
+import { useSensors, useSensor, PointerSensor, DndContext, pointerWithin, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
+import { arrayMove, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
+import { snapCenterToCursor } from '@dnd-kit/modifiers';
+import { Heading, Type, AlignLeft, FileEdit, CalendarDays, ChevronDown, CircleDot, Tags, CheckSquare, Image, GalleryHorizontalEnd, Receipt, ArrowLeft, Eye, Trash2, Plus, GripVertical, X } from 'lucide-react';
+import { toast, useSaveBar, Card, CardContent, Input, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Badge, Button, Sheet, SheetContent, SheetHeader, SheetTitle, SheetBody, SheetFooter } from '@fayz-ai/ui';
+import { useTranslation } from '@fayz-ai/core';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { CSS } from '@dnd-kit/utilities';
+import { createPortal } from 'react-dom';
+
+var DEFAULT_COL_SPAN = {
+  title: 12,
+  memo: 12,
+  richtext: 12,
+  gallery: 12,
+  budget: 12,
+  image: 6,
+  text: 6,
+  date: 4,
+  select: 6,
+  radio: 6,
+  tags: 8,
+  checkbox: 4
+};
+var FIELD_TYPES = [
+  { type: "title", icon: Heading },
+  { type: "text", icon: Type },
+  { type: "memo", icon: AlignLeft },
+  { type: "richtext", icon: FileEdit },
+  { type: "date", icon: CalendarDays },
+  { type: "select", icon: ChevronDown },
+  { type: "radio", icon: CircleDot },
+  { type: "tags", icon: Tags },
+  { type: "checkbox", icon: CheckSquare },
+  { type: "image", icon: Image },
+  { type: "gallery", icon: GalleryHorizontalEnd },
+  { type: "budget", icon: Receipt }
+];
+function DraggableFieldType({ item }) {
+  const t = useTranslation();
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: `palette-${item.type}`,
+    data: { source: "palette", fieldType: item.type }
+  });
+  const Icon = item.icon;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: setNodeRef,
+      ...listeners,
+      ...attributes,
+      className: `flex items-center gap-2 w-full px-3 py-2 rounded-lg border bg-card text-sm font-medium transition-all hover:shadow-sm hover:border-primary/30 cursor-grab active:cursor-grabbing ${isDragging ? "opacity-30" : ""}`,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: t(`customForms.fieldType.${item.type}`) })
+      ]
+    }
+  );
+}
+function FieldPalette() {
+  const t = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: "w-44 shrink-0 space-y-1.5", children: [
+    /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold uppercase tracking-wider text-muted-foreground px-1 mb-2", children: t("customForms.builder.fields") }),
+    FIELD_TYPES.map((item) => /* @__PURE__ */ jsx(DraggableFieldType, { item }, item.type))
+  ] });
+}
+function BuilderField({ field, onSelect, onRemove, isSelected }) {
+  const t = useTranslation();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: field.id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    gridColumn: `span ${field.colSpan}`,
+    opacity: isDragging ? 0.5 : 1
+  };
+  const fieldTypeDef = FIELD_TYPES.find((ft) => ft.type === field.type);
+  const Icon = fieldTypeDef?.icon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: `group relative flex items-start gap-2 rounded-lg border-2 bg-card p-3 transition-colors cursor-pointer ${isSelected ? "border-primary ring-1 ring-primary/20" : "border-border hover:border-primary/30"}`,
+      onClick: () => onSelect(field),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            ...attributes,
+            ...listeners,
+            className: "mt-0.5 cursor-grab active:cursor-grabbing text-muted-foreground/50 hover:text-muted-foreground",
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsx(GripVertical, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            Icon && /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: t(`customForms.fieldType.${field.type}`) })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium mt-0.5 truncate", children: field.label }),
+          field.required && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-destructive", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove(field.id);
+            },
+            className: "absolute top-1.5 right-1.5 p-1 rounded-md opacity-0 group-hover:opacity-100 hover:bg-destructive/10 transition-opacity",
+            children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3 text-destructive" })
+          }
+        )
+      ]
+    }
+  );
+}
+function DropPreview({ fieldType }) {
+  const t = useTranslation();
+  const def = FIELD_TYPES.find((ft) => ft.type === fieldType);
+  if (!def) return null;
+  const Icon = def.icon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex items-center gap-2 rounded-lg border-2 border-dashed border-primary/40 bg-primary/5 p-3",
+      style: { gridColumn: `span ${DEFAULT_COL_SPAN[fieldType] ?? 12}` },
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-primary/50" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-primary/50 font-medium", children: t(`customForms.fieldType.${fieldType}`) })
+      ]
+    }
+  );
+}
+function BuilderCanvas({
+  fields,
+  selectedFieldId,
+  onSelectField,
+  onRemoveField,
+  draggingFieldType
+}) {
+  const t = useTranslation();
+  const { setNodeRef, isOver } = useDroppable({ id: "builder-canvas" });
+  const sortedFields = [...fields].sort((a, b) => a.row - b.row || a.col - b.col);
+  const showPreview = isOver && draggingFieldType !== null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      className: `flex-1 min-h-[400px] rounded-xl border-2 border-dashed p-4 transition-colors ${isOver ? "border-primary/50 bg-primary/5" : "border-border bg-muted/20"}`,
+      style: {
+        backgroundImage: "repeating-linear-gradient(90deg, transparent, transparent calc(8.333% - 1px), hsl(var(--border) / 0.3) calc(8.333% - 1px), hsl(var(--border) / 0.3) 8.333%)",
+        backgroundSize: "100% 100%"
+      },
+      children: [
+        fields.length === 0 && !showPreview && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground text-sm", children: t("customForms.builder.emptyCanvas") }),
+        /* @__PURE__ */ jsx(SortableContext, { items: sortedFields.map((f) => f.id), strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "grid gap-3",
+            style: { gridTemplateColumns: "repeat(12, 1fr)" },
+            children: [
+              sortedFields.map((field) => /* @__PURE__ */ jsx(
+                BuilderField,
+                {
+                  field,
+                  isSelected: field.id === selectedFieldId,
+                  onSelect: onSelectField,
+                  onRemove: onRemoveField
+                },
+                field.id
+              )),
+              showPreview && /* @__PURE__ */ jsx(DropPreview, { fieldType: draggingFieldType })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+var SIZE_OPTIONS = [
+  { span: 3, label: "1/4" },
+  { span: 4, label: "1/3" },
+  { span: 6, label: "1/2" },
+  { span: 8, label: "2/3" },
+  { span: 9, label: "3/4" },
+  { span: 12, label: "Full" }
+];
+function FieldConfigDrawer({ field, onSave, onUpdate, onClose }) {
+  const t = useTranslation();
+  const [label, setLabel] = useState("");
+  const [placeholder, setPlaceholder] = useState("");
+  const [required, setRequired] = useState(false);
+  const [colSpan, setColSpan] = useState(12);
+  const [options, setOptions] = useState([]);
+  useEffect(() => {
+    if (!field) return;
+    setLabel(field.label);
+    setPlaceholder(field.placeholder ?? "");
+    setRequired(field.required ?? false);
+    setColSpan(field.colSpan);
+    setOptions(field.options ?? []);
+  }, [field?.id]);
+  if (!field) return null;
+  const hasOptions = ["select", "radio", "tags"].includes(field.type);
+  const fieldTypeDef = FIELD_TYPES.find((ft) => ft.type === field.type);
+  const Icon = fieldTypeDef?.icon;
+  const handleSave = () => {
+    onSave({
+      ...field,
+      label,
+      placeholder: placeholder || void 0,
+      required,
+      colSpan: Math.max(1, Math.min(12, colSpan)),
+      options: hasOptions ? options.filter((o) => o.label.trim()) : field.options
+    });
+  };
+  const addOption = () => {
+    setOptions([...options, { label: "", value: "" }]);
+  };
+  const updateOption = (index, newLabel) => {
+    const updated = [...options];
+    updated[index] = { label: newLabel, value: newLabel.toLowerCase().replace(/\s+/g, "_") };
+    setOptions(updated);
+  };
+  const removeOption = (index) => {
+    setOptions(options.filter((_, i) => i !== index));
+  };
+  return /* @__PURE__ */ jsx(Sheet, { open: !!field, onOpenChange: (open) => {
+    if (!open) onClose();
+  }, children: /* @__PURE__ */ jsxs(SheetContent, { className: "w-80 sm:w-96", overlay: "none", children: [
+    /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsxs(SheetTitle, { className: "flex items-center gap-2 text-sm", children: [
+      Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" }),
+      t(`customForms.fieldType.${field.type}`)
+    ] }) }),
+    /* @__PURE__ */ jsxs(SheetBody, { className: "space-y-4 py-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium", children: t("customForms.builder.fieldLabel") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: label,
+            onChange: (e) => setLabel(e.target.value),
+            className: "h-9 text-sm",
+            autoFocus: true
+          }
+        )
+      ] }),
+      !["title", "checkbox", "image", "gallery"].includes(field.type) && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium", children: t("customForms.builder.fieldPlaceholder") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: placeholder,
+            onChange: (e) => setPlaceholder(e.target.value),
+            className: "h-9 text-sm"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium", children: t("customForms.builder.colSpan") }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", children: SIZE_OPTIONS.map((opt) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              setColSpan(opt.span);
+              if (onUpdate && field) {
+                onUpdate({ ...field, colSpan: opt.span });
+              }
+            },
+            className: `group relative rounded-lg border-2 p-2 transition-all ${colSpan === opt.span ? "border-primary bg-primary/5" : "border-border hover:border-primary/30"}`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-px h-3 mb-1.5", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `rounded-sm ${colSpan === opt.span ? "bg-primary/60" : "bg-muted-foreground/30 group-hover:bg-primary/30"}`,
+                    style: { width: `${opt.span / 12 * 100}%` }
+                  }
+                ),
+                opt.span < 12 && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "rounded-sm bg-muted/60",
+                    style: { width: `${(12 - opt.span) / 12 * 100}%` }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium ${colSpan === opt.span ? "text-primary" : "text-muted-foreground"}`, children: opt.label })
+            ]
+          },
+          opt.span
+        )) })
+      ] }),
+      field.type !== "title" && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: required,
+            onChange: (e) => setRequired(e.target.checked),
+            className: "rounded border-input accent-primary"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-sm", children: t("customForms.builder.fieldRequired") })
+      ] }),
+      hasOptions && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium", children: t("customForms.builder.fieldOptions") }),
+        options.map((opt, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: opt.label,
+              onChange: (e) => updateOption(i, e.target.value),
+              placeholder: `Option ${i + 1}`,
+              className: "h-8 text-sm flex-1"
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { onClick: () => removeOption(i), className: "p-1 hover:bg-destructive/10 rounded", children: /* @__PURE__ */ jsx(Trash2, { className: "h-3.5 w-3.5 text-destructive" }) })
+        ] }, i)),
+        /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: addOption, className: "h-8 text-xs w-full", children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3 mr-1" }),
+          t("customForms.builder.addOption")
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(SheetFooter, { className: "pt-4 border-t", children: /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleSave, className: "w-full", children: "OK" }) })
+  ] }) });
+}
+var TEMPLATE_CATEGORIES = ["anamnesis", "evolution", "report", "contract", "general"];
+function FormBuilder({ templateId, store, provider, config, onBack }) {
+  const t = useTranslation();
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [category, setCategory] = useState("general");
+  const [fields, setFields] = useState([]);
+  const [selectedFieldId, setSelectedFieldId] = useState(null);
+  const [saving, setSaving] = useState(false);
+  const [showPreview, setShowPreview] = useState(false);
+  const [previewData, setPreviewData] = useState({});
+  const [draggingFieldType, setDraggingFieldType] = useState(null);
+  const [templateName, setTemplateName] = useState(null);
+  useEffect(() => {
+    if (!templateId) return;
+    let cancelled = false;
+    provider.getTemplateById(templateId).then((tpl) => {
+      if (cancelled || !tpl) return;
+      setName(tpl.name);
+      setTemplateName(tpl.name);
+      setDescription(tpl.description ?? "");
+      setCategory(tpl.category);
+      setFields(tpl.schema.fields);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [templateId, provider]);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } })
+  );
+  const handleDragStart = useCallback((event) => {
+    const data = event.active.data.current;
+    if (data?.source === "palette") {
+      setDraggingFieldType(data.fieldType);
+    }
+  }, []);
+  const handleDragEnd = useCallback((event) => {
+    setDraggingFieldType(null);
+    const { active, over } = event;
+    if (active.data.current?.source === "palette" && over) {
+      const fieldType = active.data.current.fieldType;
+      const typeDef = FIELD_TYPES.find((ft) => ft.type === fieldType);
+      if (!typeDef) return;
+      const newField = {
+        id: crypto.randomUUID(),
+        type: fieldType,
+        label: t(`customForms.fieldType.${fieldType}`),
+        col: 0,
+        row: fields.length,
+        colSpan: DEFAULT_COL_SPAN[fieldType] ?? 12
+      };
+      if (["select", "radio", "tags"].includes(fieldType)) {
+        newField.options = [
+          { label: "Option 1", value: "option_1" },
+          { label: "Option 2", value: "option_2" }
+        ];
+      }
+      setFields((prev) => [...prev, newField]);
+      return;
+    }
+    if (active.id !== over?.id && over) {
+      setFields((prev) => {
+        const oldIndex = prev.findIndex((f) => f.id === active.id);
+        const newIndex = prev.findIndex((f) => f.id === over.id);
+        if (oldIndex === -1 || newIndex === -1) return prev;
+        const reordered = arrayMove(prev, oldIndex, newIndex);
+        return reordered.map((f, i) => ({ ...f, row: i }));
+      });
+    }
+  }, [fields, t]);
+  const handleSelectField = useCallback((field) => {
+    setSelectedFieldId(field.id);
+  }, []);
+  const handleRemoveField = useCallback((fieldId) => {
+    setFields((prev) => prev.filter((f) => f.id !== fieldId).map((f, i) => ({ ...f, row: i })));
+    if (selectedFieldId === fieldId) setSelectedFieldId(null);
+  }, [selectedFieldId]);
+  const handleFieldUpdate = useCallback((updated) => {
+    setFields((prev) => prev.map((f) => f.id === updated.id ? updated : f));
+  }, []);
+  const handleFieldConfigSave = useCallback((updated) => {
+    handleFieldUpdate(updated);
+    setSelectedFieldId(null);
+  }, [handleFieldUpdate]);
+  const handleSave = useCallback(async () => {
+    if (!name.trim()) {
+      toast.error(t("common.formIncomplete"));
+      return;
+    }
+    setSaving(true);
+    try {
+      const schema = { fields, layout: { columns: 12 } };
+      if (templateId) {
+        await store.getState().updateTemplate(templateId, { name, description, category, schema });
+      } else {
+        await store.getState().createTemplate({ name, description, category, schema });
+      }
+      onBack();
+    } finally {
+      setSaving(false);
+    }
+  }, [templateId, name, description, category, fields, store, onBack]);
+  const currentFields = { name, description, category, fields };
+  const snapshot = React2.useRef(null);
+  const loaded = !templateId || templateName !== null;
+  useEffect(() => {
+    if (loaded && snapshot.current === null) snapshot.current = JSON.stringify(currentFields);
+  }, [loaded]);
+  const dirty = snapshot.current !== null && JSON.stringify(currentFields) !== snapshot.current;
+  useSaveBar({
+    dirty,
+    saving,
+    onSave: () => {
+      void handleSave();
+    },
+    onDiscard: () => onBack(),
+    saveLabel: t("customForms.builder.save")
+  });
+  const selectedField = selectedFieldId ? fields.find((f) => f.id === selectedFieldId) ?? null : null;
+  const isNew = !templateId;
+  const breadcrumbLabel = isNew ? t("customForms.newTemplate") : templateName ?? t("customForms.editTemplate");
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-sm", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: onBack,
+          className: "flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors",
+          children: [
+            /* @__PURE__ */ jsx(ArrowLeft, { className: "h-3.5 w-3.5" }),
+            t("customForms.templates")
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "/" }),
+      /* @__PURE__ */ jsx("span", { className: "font-medium", children: breadcrumbLabel })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "p-5 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium", children: [
+            t("customForms.templateName"),
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "text-destructive", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: name,
+              onChange: (e) => setName(e.target.value),
+              placeholder: t("customForms.templateName"),
+              className: "h-9 text-sm",
+              autoFocus: isNew
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: t("customForms.templateCategory") }),
+          /* @__PURE__ */ jsxs(Select, { value: category, onValueChange: (v) => setCategory(v), children: [
+            /* @__PURE__ */ jsx(SelectTrigger, { className: "h-9 text-sm", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+            /* @__PURE__ */ jsx(SelectContent, { children: TEMPLATE_CATEGORIES.map((cat) => /* @__PURE__ */ jsx(SelectItem, { value: cat, children: t(`customForms.category.${cat}`) }, cat)) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: t("customForms.templateDescription") }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: description,
+            onChange: (e) => setDescription(e.target.value),
+            placeholder: t("customForms.templateDescription"),
+            className: "h-9 text-sm"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: t("customForms.builder.fields") }),
+        /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-[10px]", children: t("customForms.builder.fieldCount", { count: String(fields.length) }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          size: "sm",
+          className: "h-9",
+          disabled: fields.length === 0,
+          onClick: () => {
+            setPreviewData({});
+            setShowPreview(true);
+          },
+          children: [
+            /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5 mr-1.5" }),
+            "Preview"
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs(DndContext, { sensors, collisionDetection: pointerWithin, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsx(FieldPalette, {}),
+        /* @__PURE__ */ jsx(
+          BuilderCanvas,
+          {
+            fields,
+            selectedFieldId,
+            onSelectField: handleSelectField,
+            onRemoveField: handleRemoveField,
+            draggingFieldType
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, modifiers: [snapCenterToCursor], children: draggingFieldType ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 px-3 py-2 rounded-lg border bg-card shadow-xl text-sm font-medium opacity-90 pointer-events-none", children: (() => {
+        const def = FIELD_TYPES.find((ft) => ft.type === draggingFieldType);
+        if (!def) return null;
+        const Icon = def.icon;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-primary" }),
+          t(`customForms.fieldType.${draggingFieldType}`)
+        ] });
+      })() }) : null })
+    ] }),
+    /* @__PURE__ */ jsx(
+      FieldConfigDrawer,
+      {
+        field: selectedField,
+        onSave: handleFieldConfigSave,
+        onUpdate: handleFieldUpdate,
+        onClose: () => setSelectedFieldId(null)
+      }
+    ),
+    showPreview && createPortal(
+      /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[100] flex items-start justify-center bg-black/60 overflow-y-auto py-10 px-4", onClick: () => setShowPreview(false), children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "relative w-full max-w-3xl bg-white rounded-modal shadow-lg",
+          style: { minHeight: "80vh" },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setShowPreview(false),
+                className: "absolute top-3 right-3 z-10 flex h-8 w-8 items-center justify-center rounded-full text-neutral-400 hover:bg-neutral-100 hover:text-neutral-700 transition-colors",
+                children: /* @__PURE__ */ jsx("span", { className: "text-lg", children: "\u2715" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "px-10 py-8 sm:px-14 sm:py-10 text-neutral-900", children: [
+              /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mb-1", children: name || t("customForms.newTemplate") }),
+              description && /* @__PURE__ */ jsx("p", { className: "text-sm text-neutral-500 mb-8", children: description }),
+              !description && /* @__PURE__ */ jsx("div", { className: "mb-8" }),
+              /* @__PURE__ */ jsx(
+                FormRenderer,
+                {
+                  schema: { fields, layout: { columns: 12 } },
+                  data: previewData,
+                  onChange: setPreviewData
+                }
+              )
+            ] })
+          ]
+        }
+      ) }),
+      document.body
+    )
+  ] });
+}
+
+export { FormBuilder };
+//# sourceMappingURL=FormBuilder-KDANEL6Z.js.map
+//# sourceMappingURL=FormBuilder-KDANEL6Z.js.map