@nextlyhq/plugin-form-builder 0.0.2-alpha.35 → 0.0.2-alpha.37

package/dist/admin/index.js

@@ -2,8 +2,9 @@ import {
   DEFAULT_FORM_SETTINGS,
   evaluateConditions,
   formatExportValue,
+  isKnownFormField,
   normalizeFormSettings
-} from "../chunk-I4VFGPNR.js";
+} from "../chunk-WVI7N3QO.js";
 
 // src/admin/index.ts
 import {
@@ -265,7 +266,8 @@ function SubmissionSheet({
               ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-6", children: [
-              submission.status === "spam" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive", children: [
+              submission.status === "spam" && // Full-strength destructive border so the spam banner boundary is perceivable over its tinted fill.
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border border-destructive bg-destructive/5 p-3 text-sm text-destructive", children: [
                 /* @__PURE__ */ jsx(TriangleAlert, { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
                 "Flagged as spam",
                 submission.spamReason ? ` (${submission.spamReason})` : "",
@@ -371,7 +373,7 @@ function SubmissionSheet({
                 /* @__PURE__ */ jsxs("p", { children: [
                   "IP: ",
                   submission.ipAddress || "\u2014",
-                  /* @__PURE__ */ jsx("span", { className: "mx-1.5 text-muted-foreground/40", children: "\xB7" }),
+                  /* @__PURE__ */ jsx("span", { className: "mx-1.5 text-muted-foreground", children: "\xB7" }),
                   "ID: ",
                   /* @__PURE__ */ jsx("span", { className: "font-mono", children: submission.id })
                 ] }),
@@ -444,7 +446,8 @@ function StatusBadge({ status }) {
     Badge2,
     {
       variant: "outline",
-      className: `rounded-none px-1.5 py-0 text-[10px] font-semibold uppercase tracking-wider ${status === "spam" ? "border-destructive/40 text-destructive" : status === "new" ? "border-primary/40 text-primary" : "border-border text-muted-foreground"}`,
+      className: `rounded-none px-1.5 py-0 text-[10px] font-semibold uppercase tracking-wider ${// Full-strength status borders (destructive/primary) so each badge boundary is perceivable; the default falls back to border-border, keeping the states distinct.
+      status === "spam" ? "border-destructive text-destructive" : status === "new" ? "border-primary text-primary" : "border-border text-muted-foreground"}`,
       children: label
     }
   );
@@ -908,6 +911,7 @@ import {
   verticalListSortingStrategy
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
+import { usePluginFieldTypeEntries } from "@nextlyhq/plugin-sdk/admin";
 import {
   Button as Button5,
   DropdownMenu as DropdownMenu2,
@@ -994,15 +998,18 @@ function createNotification() {
 }
 var FormBuilderContext = createContext(null);
 function generateFieldName(type, existingNames = []) {
+  const base = type.replace(/[^a-zA-Z0-9]+/g, "_").replace(/^_+/, "").replace(/^([0-9])/, "field_$1").replace(/_+$/, "") || "field";
   const taken = new Set(existingNames);
-  if (!taken.has(type)) return type;
+  if (!taken.has(base)) return base;
   let suffix = 2;
-  while (taken.has(`${type}_${suffix}`)) suffix += 1;
-  return `${type}_${suffix}`;
+  while (taken.has(`${base}_${suffix}`)) suffix += 1;
+  return `${base}_${suffix}`;
 }
 function generateFieldLabel(type) {
   const entry = FORM_FIELD_TYPE_CATALOG.find((row) => row.type === type);
-  return entry?.label ?? "New Field";
+  if (entry) return entry.label;
+  const titleCased = type.split(/[-_\s]+/).filter(Boolean).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+  return titleCased || "New Field";
 }
 function createFieldFromType(type, existingNames = []) {
   const name = generateFieldName(type, existingNames);
@@ -1054,7 +1061,7 @@ function createFieldFromType(type, existingNames = []) {
     case "hidden":
       return { ...baseField, type: "hidden" };
     default:
-      return { ...baseField, type: "text" };
+      return { ...baseField, type };
   }
 }
 function FormBuilderProvider({
@@ -1099,9 +1106,7 @@ function FormBuilderProvider({
   const updateField = useCallback2(
     (fieldName, updates) => {
       setFieldsState(
-        (prev) => prev.map(
-          (f) => f.name === fieldName ? { ...f, ...updates } : f
-        )
+        (prev) => prev.map((f) => f.name === fieldName ? { ...f, ...updates } : f)
       );
       if (updates.name && updates.name !== fieldName) {
         setSelectedFieldId(updates.name);
@@ -1341,7 +1346,8 @@ function AddFieldDialog({
 
 // src/admin/components/builder/FieldEditor.tsx
 import {
-  FieldOptionsEditor
+  FieldOptionsEditor,
+  withOptionIds
 } from "@nextlyhq/plugin-sdk/admin";
 import {
   FormLabelWithTooltip as FormLabelWithTooltip2,
@@ -1463,7 +1469,8 @@ function ConditionalLogicEditor({
         }
       )
     ] }) }),
-    logic.enabled && /* @__PURE__ */ jsxs4("div", { className: "space-y-4 pt-4 border-t border-primary/5", children: [
+    logic.enabled && // Semantic border token so this top divider is visible at the 3:1 UI minimum.
+    /* @__PURE__ */ jsxs4("div", { className: "space-y-4 pt-4 border-t border-border", children: [
       /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-2 text-sm text-muted-foreground", children: [
         /* @__PURE__ */ jsxs4(
           Select3,
@@ -1496,66 +1503,72 @@ function ConditionalLogicEditor({
         ),
         /* @__PURE__ */ jsx5("span", { children: "of the following conditions are met:" })
       ] }),
-      /* @__PURE__ */ jsx5("div", { className: "space-y-3 pt-4", children: logic.conditions.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "p-4 bg-muted rounded-none border border-dashed border-primary/5 text-center text-xs text-muted-foreground", children: "No conditions defined. Add a condition to get started." }) : logic.conditions.map((condition, index) => /* @__PURE__ */ jsxs4(
-        "div",
-        {
-          className: "flex flex-col gap-2 p-3 rounded-none bg-muted border border-primary/5 relative group",
-          children: [
-            /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-1 gap-2", children: [
-              /* @__PURE__ */ jsxs4(
-                Select3,
-                {
-                  value: condition.field,
-                  onValueChange: (value) => handleUpdateCondition(index, { field: value }),
-                  children: [
-                    /* @__PURE__ */ jsx5(SelectTrigger3, { className: "w-full bg-transparent border-input dark:bg-muted/50", children: /* @__PURE__ */ jsx5(SelectValue3, { placeholder: "Select field" }) }),
-                    /* @__PURE__ */ jsx5(SelectContent3, { children: availableFields.map((f) => /* @__PURE__ */ jsx5(SelectItem3, { value: f.name, children: f.label || f.name }, f.name)) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs4("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx5("div", { className: "space-y-3 pt-4", children: logic.conditions.length === 0 ? (
+        // Semantic border token so this empty-state boundary is visible at the 3:1 UI minimum.
+        /* @__PURE__ */ jsx5("div", { className: "p-4 bg-muted rounded-none border border-dashed border-border text-center text-xs text-muted-foreground", children: "No conditions defined. Add a condition to get started." })
+      ) : logic.conditions.map((condition, index) => (
+        // Semantic border token so this condition card boundary is visible at the 3:1 UI minimum.
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: "flex flex-col gap-2 p-3 rounded-none bg-muted border border-border relative group",
+            children: [
+              /* @__PURE__ */ jsxs4("div", { className: "grid grid-cols-1 gap-2", children: [
                 /* @__PURE__ */ jsxs4(
                   Select3,
                   {
-                    value: condition.comparison,
-                    onValueChange: (value) => handleUpdateCondition(index, {
-                      comparison: value
-                    }),
+                    value: condition.field,
+                    onValueChange: (value) => handleUpdateCondition(index, { field: value }),
                     children: [
-                      /* @__PURE__ */ jsx5(SelectTrigger3, { className: "flex-1 h-9 bg-transparent border-input dark:bg-muted/50", children: /* @__PURE__ */ jsx5(SelectValue3, { placeholder: "Compare operator" }) }),
-                      /* @__PURE__ */ jsx5(SelectContent3, { children: COMPARISON_OPERATORS.map((op) => /* @__PURE__ */ jsx5(SelectItem3, { value: op.value, children: op.label }, op.value)) })
+                      /* @__PURE__ */ jsx5(SelectTrigger3, { className: "w-full bg-transparent border-input dark:bg-muted/50", children: /* @__PURE__ */ jsx5(SelectValue3, { placeholder: "Select field" }) }),
+                      /* @__PURE__ */ jsx5(SelectContent3, { children: availableFields.map((f) => /* @__PURE__ */ jsx5(SelectItem3, { value: f.name, children: f.label || f.name }, f.name)) })
                     ]
                   }
                 ),
-                needsValue(condition.comparison) && /* @__PURE__ */ jsx5(
-                  Input2,
-                  {
-                    type: "text",
-                    value: conditionValueToString(condition.value),
-                    onChange: (e) => handleUpdateCondition(index, {
-                      value: e.target.value
-                    }),
-                    placeholder: "Value",
-                    className: "flex-1 h-9 bg-transparent"
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx5(
-              Button4,
-              {
-                type: "button",
-                variant: "ghost",
-                size: "icon-sm",
-                onClick: () => handleRemoveCondition(index),
-                className: "absolute -top-2 -right-2 h-6 w-6 rounded-full bg-background border border-primary/5 opacity-0 group-hover:opacity-100 transition-opacity",
-                title: "Remove condition",
-                children: /* @__PURE__ */ jsx5("span", { className: "text-xs", children: "\xD7" })
-              }
-            )
-          ]
-        },
-        index
+                /* @__PURE__ */ jsxs4("div", { className: "flex gap-2", children: [
+                  /* @__PURE__ */ jsxs4(
+                    Select3,
+                    {
+                      value: condition.comparison,
+                      onValueChange: (value) => handleUpdateCondition(index, {
+                        comparison: value
+                      }),
+                      children: [
+                        /* @__PURE__ */ jsx5(SelectTrigger3, { className: "flex-1 h-9 bg-transparent border-input dark:bg-muted/50", children: /* @__PURE__ */ jsx5(SelectValue3, { placeholder: "Compare operator" }) }),
+                        /* @__PURE__ */ jsx5(SelectContent3, { children: COMPARISON_OPERATORS.map((op) => /* @__PURE__ */ jsx5(SelectItem3, { value: op.value, children: op.label }, op.value)) })
+                      ]
+                    }
+                  ),
+                  needsValue(condition.comparison) && /* @__PURE__ */ jsx5(
+                    Input2,
+                    {
+                      type: "text",
+                      value: conditionValueToString(condition.value),
+                      onChange: (e) => handleUpdateCondition(index, {
+                        value: e.target.value
+                      }),
+                      placeholder: "Value",
+                      className: "flex-1 h-9 bg-transparent"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx5(
+                Button4,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => handleRemoveCondition(index),
+                  className: "absolute -top-2 -right-2 h-6 w-6 rounded-full bg-background border border-border opacity-0 group-hover:opacity-100 transition-opacity",
+                  title: "Remove condition",
+                  children: /* @__PURE__ */ jsx5("span", { className: "text-xs", children: "\xD7" })
+                }
+              )
+            ]
+          },
+          index
+        )
       )) }),
       availableFields.length > 0 ? /* @__PURE__ */ jsx5(
         Button4,
@@ -1567,7 +1580,10 @@ function ConditionalLogicEditor({
           className: "w-full mt-4 border-dashed",
           children: "+ Add Condition"
         }
-      ) : /* @__PURE__ */ jsx5("p", { className: "mt-4 text-center text-xs text-warning font-medium bg-warning/10 p-2 rounded-none border border-warning/20", children: "Add more fields to the form to create conditions." })
+      ) : (
+        // Full-strength warning border so this notice boundary is perceivable over its tinted fill.
+        /* @__PURE__ */ jsx5("p", { className: "mt-4 text-center text-xs text-warning font-medium bg-warning/10 p-2 rounded-none border border-warning", children: "Add more fields to the form to create conditions." })
+      )
     ] })
   ] });
 }
@@ -1719,7 +1735,7 @@ function GeneralTab({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx6(TypeSpecificOptions, { field, onUpdate })
+    isKnownFormField(field) && /* @__PURE__ */ jsx6(TypeSpecificOptions, { field, onUpdate })
   ] });
 }
 function TypeSpecificOptions({
@@ -1924,11 +1940,7 @@ function OptionsEditor({
 }) {
   const optionsField = field;
   const [kitOptions, setKitOptions] = useState5(
-    () => (optionsField.options || []).map((opt, index) => ({
-      id: `opt_initial_${index}`,
-      label: opt.label,
-      value: opt.value
-    }))
+    () => withOptionIds(optionsField.options || [])
   );
   const handleOptionsChange = useCallback4(
     (next) => {
@@ -1951,8 +1963,7 @@ function OptionsEditor({
       FieldOptionsEditor,
       {
         options: kitOptions,
-        onOptionsChange: handleOptionsChange,
-        fieldType: field.type === "radio" ? "radio" : "select"
+        onOptionsChange: handleOptionsChange
       }
     )
   ] });
@@ -2135,7 +2146,8 @@ function ValidationTab({
         }
       )
     ] }),
-    (field.type === "checkbox" || field.type === "hidden") && /* @__PURE__ */ jsx6("div", { className: "p-3 bg-muted rounded-none text-xs text-muted-foreground text-center border border-dashed border-primary/5", children: "No additional validation options for this field type." })
+    (field.type === "checkbox" || field.type === "hidden") && // Semantic border token so this info-box boundary is visible at the 3:1 UI minimum.
+    /* @__PURE__ */ jsx6("div", { className: "p-3 bg-muted rounded-none text-xs text-muted-foreground text-center border border-dashed border-border", children: "No additional validation options for this field type." })
   ] });
 }
 function FieldEditor({ field, allFields, onUpdate }) {
@@ -2147,7 +2159,7 @@ function FieldEditor({ field, allFields, onUpdate }) {
       onValueChange: setActiveTab,
       className: "flex-1 flex flex-col",
       children: [
-        /* @__PURE__ */ jsx6("div", { className: "border-b bg-muted border-primary/5", children: /* @__PURE__ */ jsxs5(TabsList2, { className: "w-full justify-start gap-0", children: [
+        /* @__PURE__ */ jsx6("div", { className: "border-b bg-muted border-border", children: /* @__PURE__ */ jsxs5(TabsList2, { className: "w-full justify-start gap-0", children: [
           /* @__PURE__ */ jsx6(
             TabsTrigger2,
             {
@@ -2182,7 +2194,7 @@ function FieldEditor({ field, allFields, onUpdate }) {
               onUpdate
             }
           ) }),
-          /* @__PURE__ */ jsx6(TabsContent, { value: "validation", className: "mt-0", children: /* @__PURE__ */ jsx6(ValidationTab, { field, onUpdate }) }),
+          /* @__PURE__ */ jsx6(TabsContent, { value: "validation", className: "mt-0", children: isKnownFormField(field) ? /* @__PURE__ */ jsx6(ValidationTab, { field, onUpdate }) : /* @__PURE__ */ jsx6("p", { className: "py-4 text-sm text-muted-foreground", children: "This field type manages its own validation." }) }),
           /* @__PURE__ */ jsx6(TabsContent, { value: "conditional", className: "mt-0", children: /* @__PURE__ */ jsx6(
             ConditionalLogicEditor,
             {
@@ -2239,7 +2251,10 @@ function FieldCard({
     {
       ref: setNodeRef,
       style: { transform: CSS.Transform.toString(transform), transition },
-      className: isDragging ? "border border-primary/40 bg-card opacity-80 relative z-10" : "border border-border bg-card",
+      className: (
+        // Dragging uses full-strength border-primary so the lifted card stands out; the resting state uses border-border, keeping the two distinct.
+        isDragging ? "border border-primary bg-card opacity-80 relative z-10" : "border border-border bg-card"
+      ),
       children: [
         /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 px-3 py-2.5", children: [
           /* @__PURE__ */ jsx7(
@@ -2249,7 +2264,7 @@ function FieldCard({
               ref: setActivatorNodeRef,
               ...attributes,
               ...listeners,
-              className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-none text-muted-foreground/60 hover:text-foreground hover:bg-primary/5 cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+              className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-none text-muted-foreground hover:text-foreground hover:bg-primary/5 cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
               "aria-label": `Reorder ${field.label || field.name}. Press Space to lift, arrow keys to move, Space to drop.`,
               children: /* @__PURE__ */ jsx7(Lucide.GripVertical, { className: "h-4 w-4", "aria-hidden": "true" })
             }
@@ -2262,14 +2277,14 @@ function FieldCard({
               "aria-expanded": expanded,
               "aria-controls": bodyId,
               id: headerId,
-              className: "flex min-w-0 flex-1 items-center gap-3 rounded-none py-1 text-left cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+              className: "flex min-w-0 flex-1 items-center gap-3 rounded-none py-1 text-left cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
               children: [
                 /* @__PURE__ */ jsx7("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center bg-primary/5 text-primary", children: /* @__PURE__ */ jsx7(CatalogIcon, { name: entry?.icon, className: "h-3.5 w-3.5" }) }),
                 /* @__PURE__ */ jsxs6("span", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsx7("span", { className: "block truncate text-sm font-medium text-foreground", children: field.label || field.name }),
                   /* @__PURE__ */ jsxs6("span", { className: "block truncate text-xs text-muted-foreground", children: [
                     entry?.label ?? field.type,
-                    /* @__PURE__ */ jsx7("span", { className: "mx-1.5 text-muted-foreground/40", children: "\xB7" }),
+                    /* @__PURE__ */ jsx7("span", { className: "mx-1.5 text-muted-foreground", children: "\xB7" }),
                     /* @__PURE__ */ jsx7("span", { className: "font-mono", children: field.name })
                   ] })
                 ] }),
@@ -2392,7 +2407,11 @@ function FieldCard({
     }
   );
 }
-function FieldCards({ enabledTypes, onAddField }) {
+function FieldCards({
+  enabledTypes,
+  disabledFieldTypes,
+  onAddField
+}) {
   const {
     fields,
     notifications,
@@ -2408,11 +2427,22 @@ function FieldCards({ enabledTypes, onAddField }) {
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
+  const pluginEntries = usePluginFieldTypeEntries("forms");
   const entries = useMemo5(() => {
     if (enabledTypes === null) return null;
     const allowed = new Set(enabledTypes);
-    return FORM_FIELD_TYPE_CATALOG2.filter((entry) => allowed.has(entry.type));
-  }, [enabledTypes]);
+    const builtinTypes = new Set(
+      FORM_FIELD_TYPE_CATALOG2.map((entry) => entry.type)
+    );
+    const builtins = FORM_FIELD_TYPE_CATALOG2.filter((entry) => allowed.has(entry.type));
+    return [
+      ...builtins,
+      // A plugin type a built-in shadows, or one the host disabled, is excluded.
+      ...pluginEntries.filter(
+        (entry) => !builtinTypes.has(entry.type) && !disabledFieldTypes?.has(entry.type)
+      )
+    ];
+  }, [enabledTypes, pluginEntries, disabledFieldTypes]);
   const referenceMap = useMemo5(
     () => buildFieldReferenceMap(fields, notifications),
     [fields, notifications]
@@ -2642,7 +2672,7 @@ function NotificationCard({
           {
             type: "button",
             onClick: onEdit,
-            className: "flex min-w-0 flex-1 items-center gap-3 rounded-none py-1 text-left cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+            className: "flex min-w-0 flex-1 items-center gap-3 rounded-none py-1 text-left cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
             "aria-label": `Edit notification ${notification.name}`,
             children: [
               /* @__PURE__ */ jsxs7("span", { className: "min-w-0 flex-1", children: [
@@ -2663,12 +2693,12 @@ function NotificationCard({
                 /* @__PURE__ */ jsxs7("span", { className: "block truncate text-xs text-muted-foreground", children: [
                   /* @__PURE__ */ jsx8("span", { className: recipient.missing ? "text-destructive" : "", children: recipient.text }),
                   ccCount > 0 && /* @__PURE__ */ jsxs7("span", { children: [
-                    /* @__PURE__ */ jsx8("span", { className: "mx-1.5 text-muted-foreground/40", children: "\xB7" }),
+                    /* @__PURE__ */ jsx8("span", { className: "mx-1.5 text-muted-foreground", children: "\xB7" }),
                     "+",
                     ccCount,
                     " cc/bcc"
                   ] }),
-                  /* @__PURE__ */ jsx8("span", { className: "mx-1.5 text-muted-foreground/40", children: "\xB7" }),
+                  /* @__PURE__ */ jsx8("span", { className: "mx-1.5 text-muted-foreground", children: "\xB7" }),
                   providerName
                 ] })
               ] }),
@@ -2780,7 +2810,7 @@ function AddressChipList({
             "button",
             {
               type: "button",
-              className: "text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/40",
+              className: "text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary",
               onClick: () => onChange(addresses.filter((_, i) => i !== index)),
               "aria-label": `Remove ${email}`,
               children: /* @__PURE__ */ jsx8(X, { className: "h-3 w-3", "aria-hidden": "true" })
@@ -3525,6 +3555,20 @@ function PreviewFieldInput({
       );
   }
 }
+function PluginFieldPreview({ field }) {
+  return /* @__PURE__ */ jsxs8("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs8(Label3, { htmlFor: `preview-${field.name}`, children: [
+      field.label || field.name,
+      field.required && /* @__PURE__ */ jsx9("span", { className: "ml-1 text-destructive", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 border border-dashed border-border bg-muted/40 px-3 py-2 text-sm text-muted-foreground", children: [
+      "Custom field (",
+      field.type,
+      ") \u2014 renders from its plugin component in the live form."
+    ] }),
+    field.helpText && /* @__PURE__ */ jsx9("p", { className: "text-xs text-muted-foreground", children: field.helpText })
+  ] });
+}
 function FormPreview({ fields, formData }) {
   const { settings } = useFormBuilder();
   const [values, setValues] = useState8({});
@@ -3558,6 +3602,7 @@ function FormPreview({ fields, formData }) {
     const missing = new Set(
       visibleFields.filter((field) => {
         if (!field.required || field.type === "file") return false;
+        if (!isKnownFormField(field)) return false;
         const value = values[field.name];
         return value === void 0 || value === "" || value === false;
       }).map((field) => field.name)
@@ -3614,38 +3659,40 @@ function FormPreview({ fields, formData }) {
             /* @__PURE__ */ jsx9(Button7, { type: "button", variant: "outline", onClick: reset, children: "Fill again" })
           ] }) : /* @__PURE__ */ jsxs8(Fragment3, { children: [
             visibleFields.length === 0 && /* @__PURE__ */ jsx9("p", { className: "text-sm text-muted-foreground", children: "No visible fields \u2014 add fields in the Builder tab." }),
-            visibleFields.map((field) => /* @__PURE__ */ jsxs8("div", { className: "space-y-1.5", children: [
-              field.type !== "checkbox" && /* @__PURE__ */ jsxs8(Label3, { htmlFor: `preview-${field.name}`, children: [
-                field.label || field.name,
-                field.required && /* @__PURE__ */ jsx9("span", { className: "ml-1 text-destructive", children: "*" })
-              ] }),
-              field.type === "checkbox" ? /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx9(
+            visibleFields.map(
+              (field) => !isKnownFormField(field) ? /* @__PURE__ */ jsx9(PluginFieldPreview, { field }, field.name) : /* @__PURE__ */ jsxs8("div", { className: "space-y-1.5", children: [
+                field.type !== "checkbox" && /* @__PURE__ */ jsxs8(Label3, { htmlFor: `preview-${field.name}`, children: [
+                  field.label || field.name,
+                  field.required && /* @__PURE__ */ jsx9("span", { className: "ml-1 text-destructive", children: "*" })
+                ] }),
+                field.type === "checkbox" ? /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx9(
+                    PreviewFieldInput,
+                    {
+                      field,
+                      value: values[field.name],
+                      onChange: (value) => setValues((prev) => ({
+                        ...prev,
+                        [field.name]: value
+                      }))
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs8(Label3, { htmlFor: `preview-${field.name}`, children: [
+                    field.label || field.name,
+                    field.required && /* @__PURE__ */ jsx9("span", { className: "ml-1 text-destructive", children: "*" })
+                  ] })
+                ] }) : /* @__PURE__ */ jsx9(
                   PreviewFieldInput,
                   {
                     field,
                     value: values[field.name],
-                    onChange: (value) => setValues((prev) => ({
-                      ...prev,
-                      [field.name]: value
-                    }))
+                    onChange: (value) => setValues((prev) => ({ ...prev, [field.name]: value }))
                   }
                 ),
-                /* @__PURE__ */ jsxs8(Label3, { htmlFor: `preview-${field.name}`, children: [
-                  field.label || field.name,
-                  field.required && /* @__PURE__ */ jsx9("span", { className: "ml-1 text-destructive", children: "*" })
-                ] })
-              ] }) : /* @__PURE__ */ jsx9(
-                PreviewFieldInput,
-                {
-                  field,
-                  value: values[field.name],
-                  onChange: (value) => setValues((prev) => ({ ...prev, [field.name]: value }))
-                }
-              ),
-              field.helpText && /* @__PURE__ */ jsx9("p", { className: "text-xs text-muted-foreground", children: field.helpText }),
-              missingRequired.has(field.name) && /* @__PURE__ */ jsx9("p", { className: "text-xs text-destructive", children: "This field is required." })
-            ] }, field.name)),
+                field.helpText && /* @__PURE__ */ jsx9("p", { className: "text-xs text-muted-foreground", children: field.helpText }),
+                missingRequired.has(field.name) && /* @__PURE__ */ jsx9("p", { className: "text-xs text-destructive", children: "This field is required." })
+              ] }, field.name)
+            ),
             /* @__PURE__ */ jsx9(
               Button7,
               {
@@ -3945,6 +3992,9 @@ function FormBuilderViewInner({
   const [isSaving, setIsSaving] = useState9(false);
   const [saveError, setSaveError] = useState9(null);
   const [enabledTypes, setEnabledTypes] = useState9(null);
+  const [disabledFieldTypes, setDisabledFieldTypes] = useState9(
+    () => /* @__PURE__ */ new Set()
+  );
   const [notificationDefaults, setNotificationDefaults] = useState9(null);
   const [spamDefaults, setSpamDefaults] = useState9(null);
   useEffect4(() => {
@@ -3959,6 +4009,11 @@ function FormBuilderViewInner({
         setEnabledTypes(
           config?.fields ? allTypes.filter((type) => config.fields?.[type] !== false) : allTypes
         );
+        setDisabledFieldTypes(
+          new Set(
+            Object.entries(config?.fields ?? {}).filter(([, enabled]) => enabled === false).map(([type]) => type)
+          )
+        );
         setNotificationDefaults(config?.notifications ?? {});
         setSpamDefaults(config?.spamProtection ?? {});
       }
@@ -4103,7 +4158,8 @@ function FormBuilderViewInner({
         /* @__PURE__ */ jsx11("p", { className: "text-sm text-muted-foreground mt-1", children: isCreating ? "Design a new form with drag-and-drop fields." : "Modify your form fields and settings." })
       ] }),
       /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 shrink-0", children: [
-        isDirty && /* @__PURE__ */ jsx11("span", { className: "text-xs font-medium text-warning bg-warning/10 border border-warning/20 px-2.5 py-1 rounded-none whitespace-nowrap", children: "Unsaved changes" }),
+        isDirty && // Full-strength warning border so the unsaved-changes badge boundary is perceivable over its tinted fill.
+        /* @__PURE__ */ jsx11("span", { className: "text-xs font-medium bg-warning-100 text-warning-700 dark:bg-warning-900 dark:text-warning-100 border border-warning px-2.5 py-1 rounded-none whitespace-nowrap", children: "Unsaved changes" }),
         /* @__PURE__ */ jsx11(
           Button8,
           {
@@ -4202,7 +4258,7 @@ function FormBuilderViewInner({
                 value: formData.slug || "",
                 onChange: (e) => updateFormData({ slug: e.target.value }),
                 placeholder: "e.g., contact-form",
-                className: "bg-transparent placeholder:text-muted-foreground/50"
+                className: "bg-transparent placeholder:text-muted-foreground"
               }
             )
           ] }),
@@ -4246,7 +4302,7 @@ function FormBuilderViewInner({
                 style: {
                   borderBottomColor: activeTab === tab.value ? "var(--nx-primary)" : "transparent"
                 },
-                className: "shrink-0 whitespace-nowrap border-b-2 relative -mb-0.5 data-[state=active]:text-primary data-[state=inactive]:text-muted-foreground hover:text-primary hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer",
+                className: "shrink-0 whitespace-nowrap border-b-2 relative -mb-0.5 data-[state=active]:text-primary data-[state=inactive]:text-muted-foreground hover:text-primary hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer",
                 children: [
                   tab.label,
                   tab.count !== null && /* @__PURE__ */ jsx11(
@@ -4267,13 +4323,15 @@ function FormBuilderViewInner({
         FieldCards,
         {
           enabledTypes,
+          disabledFieldTypes,
           onAddField: handleAddField
         }
       ),
       activeTab === "preview" && /* @__PURE__ */ jsx11(FormPreview, { fields, formData }),
       activeTab === "settings" && /* @__PURE__ */ jsx11("div", { className: "w-full", children: /* @__PURE__ */ jsx11(FormSettingsTab, { spamDefaults }) }),
       activeTab === "notifications" && /* @__PURE__ */ jsx11("div", { className: "w-full", children: /* @__PURE__ */ jsx11(FormNotificationsTab, { defaults: notificationDefaults }) }),
-      saveError && /* @__PURE__ */ jsx11("div", { className: "p-3 text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-none", children: saveError })
+      saveError && // Full-strength destructive border so the error box boundary is perceivable over its tinted fill.
+      /* @__PURE__ */ jsx11("div", { className: "p-3 text-sm text-destructive bg-destructive/10 border border-destructive rounded-none", children: saveError })
     ] }) }) })
   ] });
 }