@fayz-ai/plugin-forms 0.8.0 → 0.9.0-next.0

package/dist/FormBuilder-4VKYVZAC.cjs

@@ -1,619 +0,0 @@
-'use strict';
-
-var chunkXLUULIVL_cjs = require('./chunk-XLUULIVL.cjs');
-var React2 = require('react');
-var core$1 = require('@dnd-kit/core');
-var sortable = require('@dnd-kit/sortable');
-var modifiers = require('@dnd-kit/modifiers');
-var lucideReact = require('lucide-react');
-var ui = require('@fayz-ai/ui');
-var core = require('@fayz-ai/core');
-var jsxRuntime = require('react/jsx-runtime');
-var utilities = require('@dnd-kit/utilities');
-var reactDom = require('react-dom');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React2__default = /*#__PURE__*/_interopDefault(React2);
-
-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: lucideReact.Heading },
-  { type: "text", icon: lucideReact.Type },
-  { type: "memo", icon: lucideReact.AlignLeft },
-  { type: "richtext", icon: lucideReact.FileEdit },
-  { type: "date", icon: lucideReact.CalendarDays },
-  { type: "select", icon: lucideReact.ChevronDown },
-  { type: "radio", icon: lucideReact.CircleDot },
-  { type: "tags", icon: lucideReact.Tags },
-  { type: "checkbox", icon: lucideReact.CheckSquare },
-  { type: "image", icon: lucideReact.Image },
-  { type: "gallery", icon: lucideReact.GalleryHorizontalEnd },
-  { type: "budget", icon: lucideReact.Receipt }
-];
-function DraggableFieldType({ item }) {
-  const t = core.useTranslation();
-  const { attributes, listeners, setNodeRef, isDragging } = core$1.useDraggable({
-    id: `palette-${item.type}`,
-    data: { source: "palette", fieldType: item.type }
-  });
-  const Icon = item.icon;
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 text-muted-foreground shrink-0" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: t(`customForms.fieldType.${item.type}`) })
-      ]
-    }
-  );
-}
-function FieldPalette() {
-  const t = core.useTranslation();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-44 shrink-0 space-y-1.5", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DraggableFieldType, { item }, item.type))
-  ] });
-}
-function BuilderField({ field, onSelect, onRemove, isSelected }) {
-  const t = core.useTranslation();
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging
-  } = sortable.useSortable({ id: field.id });
-  const style = {
-    transform: utilities.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.GripVertical, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-            Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: t(`customForms.fieldType.${field.type}`) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium mt-0.5 truncate", children: field.label }),
-          field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-destructive", children: "*" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3 text-destructive" })
-          }
-        )
-      ]
-    }
-  );
-}
-function DropPreview({ fieldType }) {
-  const t = core.useTranslation();
-  const def = FIELD_TYPES.find((ft) => ft.type === fieldType);
-  if (!def) return null;
-  const Icon = def.icon;
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 text-primary/50" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-primary/50 font-medium", children: t(`customForms.fieldType.${fieldType}`) })
-      ]
-    }
-  );
-}
-function BuilderCanvas({
-  fields,
-  selectedFieldId,
-  onSelectField,
-  onRemoveField,
-  draggingFieldType
-}) {
-  const t = core.useTranslation();
-  const { setNodeRef, isOver } = core$1.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground text-sm", children: t("customForms.builder.emptyCanvas") }),
-        /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: sortedFields.map((f) => f.id), strategy: sortable.verticalListSortingStrategy, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "grid gap-3",
-            style: { gridTemplateColumns: "repeat(12, 1fr)" },
-            children: [
-              sortedFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
-                BuilderField,
-                {
-                  field,
-                  isSelected: field.id === selectedFieldId,
-                  onSelect: onSelectField,
-                  onRemove: onRemoveField
-                },
-                field.id
-              )),
-              showPreview && /* @__PURE__ */ jsxRuntime.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 = core.useTranslation();
-  const [label, setLabel] = React2.useState("");
-  const [placeholder, setPlaceholder] = React2.useState("");
-  const [required, setRequired] = React2.useState(false);
-  const [colSpan, setColSpan] = React2.useState(12);
-  const [options, setOptions] = React2.useState([]);
-  React2.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__ */ jsxRuntime.jsx(ui.Sheet, { open: !!field, onOpenChange: (open) => {
-    if (!open) onClose();
-  }, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.SheetContent, { className: "w-80 sm:w-96", overlay: "none", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.SheetTitle, { className: "flex items-center gap-2 text-sm", children: [
-      Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 text-muted-foreground" }),
-      t(`customForms.fieldType.${field.type}`)
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.SheetBody, { className: "space-y-4 py-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium", children: t("customForms.builder.fieldLabel") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Input,
-          {
-            value: label,
-            onChange: (e) => setLabel(e.target.value),
-            className: "h-9 text-sm",
-            autoFocus: true
-          }
-        )
-      ] }),
-      !["title", "checkbox", "image", "gallery"].includes(field.type) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium", children: t("customForms.builder.fieldPlaceholder") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Input,
-          {
-            value: placeholder,
-            onChange: (e) => setPlaceholder(e.target.value),
-            className: "h-9 text-sm"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium", children: t("customForms.builder.colSpan") }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 gap-2", children: SIZE_OPTIONS.map((opt) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex gap-px h-3 mb-1.5", children: [
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: "rounded-sm bg-muted/60",
-                    style: { width: `${(12 - opt.span) / 12 * 100}%` }
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[10px] font-medium ${colSpan === opt.span ? "text-primary" : "text-muted-foreground"}`, children: opt.label })
-            ]
-          },
-          opt.span
-        )) })
-      ] }),
-      field.type !== "title" && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "checkbox",
-            checked: required,
-            onChange: (e) => setRequired(e.target.checked),
-            className: "rounded border-input accent-primary"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: t("customForms.builder.fieldRequired") })
-      ] }),
-      hasOptions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium", children: t("customForms.builder.fieldOptions") }),
-        options.map((opt, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Input,
-            {
-              value: opt.label,
-              onChange: (e) => updateOption(i, e.target.value),
-              placeholder: `Option ${i + 1}`,
-              className: "h-8 text-sm flex-1"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => removeOption(i), className: "p-1 hover:bg-destructive/10 rounded", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3.5 w-3.5 text-destructive" }) })
-        ] }, i)),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "outline", size: "sm", onClick: addOption, className: "h-8 text-xs w-full", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "h-3 w-3 mr-1" }),
-          t("customForms.builder.addOption")
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.SheetFooter, { className: "pt-4 border-t", children: /* @__PURE__ */ jsxRuntime.jsx(ui.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 = core.useTranslation();
-  const [name, setName] = React2.useState("");
-  const [description, setDescription] = React2.useState("");
-  const [category, setCategory] = React2.useState("general");
-  const [fields, setFields] = React2.useState([]);
-  const [selectedFieldId, setSelectedFieldId] = React2.useState(null);
-  const [saving, setSaving] = React2.useState(false);
-  const [showPreview, setShowPreview] = React2.useState(false);
-  const [previewData, setPreviewData] = React2.useState({});
-  const [draggingFieldType, setDraggingFieldType] = React2.useState(null);
-  const [templateName, setTemplateName] = React2.useState(null);
-  React2.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 = core$1.useSensors(
-    core$1.useSensor(core$1.PointerSensor, { activationConstraint: { distance: 5 } })
-  );
-  const handleDragStart = React2.useCallback((event) => {
-    const data = event.active.data.current;
-    if (data?.source === "palette") {
-      setDraggingFieldType(data.fieldType);
-    }
-  }, []);
-  const handleDragEnd = React2.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 = sortable.arrayMove(prev, oldIndex, newIndex);
-        return reordered.map((f, i) => ({ ...f, row: i }));
-      });
-    }
-  }, [fields, t]);
-  const handleSelectField = React2.useCallback((field) => {
-    setSelectedFieldId(field.id);
-  }, []);
-  const handleRemoveField = React2.useCallback((fieldId) => {
-    setFields((prev) => prev.filter((f) => f.id !== fieldId).map((f, i) => ({ ...f, row: i })));
-    if (selectedFieldId === fieldId) setSelectedFieldId(null);
-  }, [selectedFieldId]);
-  const handleFieldUpdate = React2.useCallback((updated) => {
-    setFields((prev) => prev.map((f) => f.id === updated.id ? updated : f));
-  }, []);
-  const handleFieldConfigSave = React2.useCallback((updated) => {
-    handleFieldUpdate(updated);
-    setSelectedFieldId(null);
-  }, [handleFieldUpdate]);
-  const handleSave = React2.useCallback(async () => {
-    if (!name.trim()) {
-      ui.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__default.default.useRef(null);
-  const loaded = !templateId || templateName !== null;
-  React2.useEffect(() => {
-    if (loaded && snapshot.current === null) snapshot.current = JSON.stringify(currentFields);
-  }, [loaded]);
-  const dirty = snapshot.current !== null && JSON.stringify(currentFields) !== snapshot.current;
-  ui.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__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-sm", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: onBack,
-          className: "flex items-center gap-1 text-muted-foreground hover:text-foreground transition-colors",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "h-3.5 w-3.5" }),
-            t("customForms.templates")
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "/" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: breadcrumbLabel })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(ui.CardContent, { className: "p-5 space-y-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium", children: [
-            t("customForms.templateName"),
-            " ",
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-destructive", children: "*" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Input,
-            {
-              value: name,
-              onChange: (e) => setName(e.target.value),
-              placeholder: t("customForms.templateName"),
-              className: "h-9 text-sm",
-              autoFocus: isNew
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: t("customForms.templateCategory") }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Select, { value: category, onValueChange: (v) => setCategory(v), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ui.SelectTrigger, { className: "h-9 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(ui.SelectValue, {}) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ui.SelectContent, { children: TEMPLATE_CATEGORIES.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(ui.SelectItem, { value: cat, children: t(`customForms.category.${cat}`) }, cat)) })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: t("customForms.templateDescription") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Input,
-          {
-            value: description,
-            onChange: (e) => setDescription(e.target.value),
-            placeholder: t("customForms.templateDescription"),
-            className: "h-9 text-sm"
-          }
-        )
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold", children: t("customForms.builder.fields") }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { variant: "secondary", className: "text-[10px]", children: t("customForms.builder.fieldCount", { count: String(fields.length) }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        ui.Button,
-        {
-          variant: "outline",
-          size: "sm",
-          className: "h-9",
-          disabled: fields.length === 0,
-          onClick: () => {
-            setPreviewData({});
-            setShowPreview(true);
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-3.5 w-3.5 mr-1.5" }),
-            "Preview"
-          ]
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(core$1.DndContext, { sensors, collisionDetection: core$1.pointerWithin, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(FieldPalette, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          BuilderCanvas,
-          {
-            fields,
-            selectedFieldId,
-            onSelectField: handleSelectField,
-            onRemoveField: handleRemoveField,
-            draggingFieldType
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(core$1.DragOverlay, { dropAnimation: null, modifiers: [modifiers.snapCenterToCursor], children: draggingFieldType ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 text-primary" }),
-          t(`customForms.fieldType.${draggingFieldType}`)
-        ] });
-      })() }) : null })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      FieldConfigDrawer,
-      {
-        field: selectedField,
-        onSave: handleFieldConfigSave,
-        onUpdate: handleFieldUpdate,
-        onClose: () => setSelectedFieldId(null)
-      }
-    ),
-    showPreview && reactDom.createPortal(
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "relative w-full max-w-3xl bg-white rounded-modal shadow-lg",
-          style: { minHeight: "80vh" },
-          onClick: (e) => e.stopPropagation(),
-          children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-lg", children: "\u2715" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-10 py-8 sm:px-14 sm:py-10 text-neutral-900", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold mb-1", children: name || t("customForms.newTemplate") }),
-              description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-500 mb-8", children: description }),
-              !description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-8" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                chunkXLUULIVL_cjs.FormRenderer,
-                {
-                  schema: { fields, layout: { columns: 12 } },
-                  data: previewData,
-                  onChange: setPreviewData
-                }
-              )
-            ] })
-          ]
-        }
-      ) }),
-      document.body
-    )
-  ] });
-}
-
-exports.FormBuilder = FormBuilder;
-//# sourceMappingURL=FormBuilder-4VKYVZAC.cjs.map
-//# sourceMappingURL=FormBuilder-4VKYVZAC.cjs.map