@nextlyhq/plugin-form-builder 0.0.2-alpha.60 → 0.0.2-alpha.62

package/dist/admin/index.js

@@ -1,10 +1,15 @@
 import {
   DEFAULT_FORM_SETTINGS,
+  buildFieldReferenceMap,
+  documentReachability,
+  enforcedValidationRules,
   evaluateConditions,
   formatExportValue,
   isKnownFormField,
-  normalizeFormSettings
-} from "../chunk-XCICDELK.js";
+  normalizeFormSettings,
+  parseFieldRef,
+  parseRedirectReference
+} from "../chunk-H5X3FKOZ.js";
 
 // src/admin/index.ts
 import {
@@ -872,23 +877,24 @@ function SubmissionsView({ collectionSlug }) {
 // src/admin/FormBuilderView.tsx
 import {
   Button as Button8,
+  Card as Card3,
   FieldShell as FieldShell2,
   FormActions,
-  FormLayout,
-  Input as Input6,
+  Input as Input7,
+  Textarea as Textarea4,
   toast,
   Tabs as Tabs4,
   TabsList as TabsList4,
   TabsTrigger as TabsTrigger4,
-  Select as Select8,
-  SelectTrigger as SelectTrigger8,
-  SelectValue as SelectValue8,
-  SelectContent as SelectContent8,
-  SelectItem as SelectItem8
+  Select as Select9,
+  SelectTrigger as SelectTrigger9,
+  SelectValue as SelectValue9,
+  SelectContent as SelectContent9,
+  SelectItem as SelectItem9
 } from "@nextlyhq/ui";
 import { useQueryClient } from "@tanstack/react-query";
 import { FORM_FIELD_TYPE_CATALOG as FORM_FIELD_TYPE_CATALOG3 } from "nextly/field-catalog";
-import { useCallback as useCallback7, useEffect as useEffect4, useRef as useRef2, useState as useState9 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect5, useRef as useRef2, useState as useState10 } from "react";
 
 // src/admin/components/builder/FieldCards.tsx
 import {
@@ -922,52 +928,6 @@ import * as Lucide from "lucide-react";
 import { FORM_FIELD_TYPE_CATALOG as FORM_FIELD_TYPE_CATALOG2 } from "nextly/field-catalog";
 import { useCallback as useCallback5, useMemo as useMemo5, useState as useState6 } from "react";
 
-// src/utils/field-references.ts
-function referencesInTemplate(template, fieldName) {
-  const pattern = new RegExp(
-    `\\{\\{\\s*${fieldName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}\\s*\\}\\}`
-  );
-  return pattern.test(template);
-}
-function findFieldReferences(fieldName, fields, notifications) {
-  const references = [];
-  for (const field of fields) {
-    if (field.name === fieldName) continue;
-    if (!field.conditionalLogic?.enabled) continue;
-    const conditions = field.conditionalLogic.conditions ?? [];
-    if (conditions.some((condition) => condition.field === fieldName)) {
-      references.push({ kind: "condition", label: field.label || field.name });
-    }
-  }
-  for (const notification of notifications) {
-    if (!notification.enabled) continue;
-    const templates = [
-      notification.to,
-      ...notification.cc ?? [],
-      ...notification.bcc ?? [],
-      notification.replyTo
-    ].filter((value) => typeof value === "string");
-    const referencedByTemplate = templates.some(
-      (template) => referencesInTemplate(template, fieldName)
-    );
-    const referencedByCondition = notification.condition?.field === fieldName;
-    if (referencedByTemplate || referencedByCondition) {
-      references.push({
-        kind: "notification",
-        label: notification.name || "Notification"
-      });
-    }
-  }
-  return references;
-}
-function buildFieldReferenceMap(fields, notifications) {
-  const map = /* @__PURE__ */ new Map();
-  for (const field of fields) {
-    map.set(field.name, findFieldReferences(field.name, fields, notifications));
-  }
-  return map;
-}
-
 // src/admin/context/FormBuilderContext.tsx
 import { FORM_FIELD_TYPE_CATALOG } from "nextly/field-catalog";
 import {
@@ -1074,7 +1034,8 @@ function FormBuilderProvider({
     name: initialData?.name || "",
     slug: initialData?.slug || "",
     description: initialData?.description,
-    status: initialData?.status || "draft"
+    status: initialData?.status || "draft",
+    closedMessage: initialData?.closedMessage
   });
   const [settings, setSettings] = useState3(
     () => normalizeFormSettings(initialData?.settings)
@@ -1341,8 +1302,9 @@ function AddFieldDialog({
 
 // src/admin/components/builder/FieldEditor.tsx
 import {
+  drawsAnyValidationRule,
   FieldOptionsEditor,
-  ValidationNumberField,
+  ValidationRulesEditor,
   withOptionIds
 } from "@nextlyhq/plugin-sdk/admin";
 import {
@@ -1359,6 +1321,7 @@ import {
   SelectTrigger as SelectTrigger4,
   SelectValue as SelectValue4
 } from "@nextlyhq/ui";
+import { validationRulesForFieldType } from "nextly/field-catalog";
 import { useState as useState5, useCallback as useCallback4, useMemo as useMemo4 } from "react";
 
 // src/admin/components/builder/ConditionalLogicEditor.tsx
@@ -1592,7 +1555,11 @@ function ConditionalLogicEditor({
         }
       ) : (
         // 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." })
+        // The 600 shade rather than the base token: the base measures 4.37:1
+        // once its own 10% fill composites over the page container, short of
+        // the 4.5:1 text needs. The 600 shade holds 5.13:1 at its worst
+        // surface in either mode.
+        /* @__PURE__ */ jsx5("p", { className: "mt-4 text-center text-xs text-warning-600 font-medium bg-warning/10 p-2 rounded-none border border-warning", children: "Add more fields to the form to create conditions." })
       )
     ] })
   ] });
@@ -1982,100 +1949,49 @@ function ValidationTab({
   field,
   onUpdate
 }) {
-  const validation = useMemo4(() => field.validation || {}, [field.validation]);
-  const updateValidation = useCallback4(
-    (key, value) => {
+  const validation = useMemo4(
+    () => field.validation ?? {},
+    [field.validation]
+  );
+  const allowed = useMemo4(() => {
+    const enforced = enforcedValidationRules(field.type);
+    return validationRulesForFieldType(field.type).filter(
+      (rule) => enforced.includes(rule)
+    );
+  }, [field.type]);
+  const applyRules = useCallback4(
+    (next) => {
+      const { message, ...rules } = next;
       onUpdate({
-        validation: { ...validation, [key]: value }
+        validation: {
+          ...validation,
+          ...rules,
+          // This surface's own key for the rule core calls `message`.
+          ...message === void 0 ? {} : { errorMessage: message }
+        }
       });
     },
     [validation, onUpdate]
   );
   return /* @__PURE__ */ jsxs5("div", { className: "space-y-6 pt-2", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx6(
-        FormLabelWithTooltip2,
-        {
-          label: "Custom Error Message",
-          htmlFor: "error-message",
-          description: "Override the default browser validation message."
-        }
-      ),
-      /* @__PURE__ */ jsx6(
-        Input2,
-        {
-          id: "error-message",
-          type: "text",
-          value: validation.errorMessage || "",
-          onChange: (e) => updateValidation("errorMessage", e.target.value),
-          placeholder: "This field is required",
-          className: "bg-transparent"
-        }
-      )
-    ] }),
-    (field.type === "text" || field.type === "textarea") && /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ jsx6(
-        ValidationNumberField,
-        {
-          label: "Min Length",
-          description: "Minimum characters required.",
-          counts: true,
-          value: field.validation?.minLength,
-          onChange: (n) => updateValidation("minLength", n)
-        }
-      ),
-      /* @__PURE__ */ jsx6(
-        ValidationNumberField,
-        {
-          label: "Max Length",
-          description: "Maximum characters allowed.",
-          counts: true,
-          value: field.validation?.maxLength,
-          onChange: (n) => updateValidation("maxLength", n)
-        }
-      )
-    ] }),
-    field.type === "number" && /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ jsx6(
-        ValidationNumberField,
-        {
-          label: "Min Value",
-          description: "Minimum numerical value.",
-          value: field.validation?.min,
-          onChange: (n) => updateValidation("min", n)
-        }
-      ),
-      /* @__PURE__ */ jsx6(
-        ValidationNumberField,
-        {
-          label: "Max Value",
-          description: "Maximum numerical value.",
-          value: field.validation?.max,
-          onChange: (n) => updateValidation("max", n)
-        }
-      )
-    ] }),
-    (field.type === "text" || field.type === "email" || field.type === "phone" || field.type === "url") && /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx6(
-        FormLabelWithTooltip2,
-        {
-          label: "Pattern (Regex)",
-          htmlFor: "val-pattern",
-          description: "Regular expression for advanced validation."
-        }
-      ),
-      /* @__PURE__ */ jsx6(
-        Input2,
-        {
-          id: "val-pattern",
-          type: "text",
-          value: field.validation?.pattern || "",
-          onChange: (e) => updateValidation("pattern", e.target.value),
-          placeholder: "^[A-Za-z]+$",
-          className: "bg-transparent"
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsx6(
+      ValidationRulesEditor,
+      {
+        allowed,
+        value: {
+          minLength: validation.minLength,
+          maxLength: validation.maxLength,
+          // No row bounds here: this surface neither stores nor enforces them,
+          // and `allowed` above never admits them, so passing them would be a
+          // value the editor could not draw and the runtime could not read.
+          min: validation.min,
+          max: validation.max,
+          pattern: validation.pattern,
+          message: validation.errorMessage
+        },
+        onChange: applyRules
+      }
+    ),
     field.type === "file" && /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx6(
         FormLabelWithTooltip2,
@@ -2100,7 +2016,7 @@ function ValidationTab({
         }
       )
     ] }),
-    (field.type === "checkbox" || field.type === "hidden") && // Semantic border token so this info-box boundary is visible at the 3:1 UI minimum.
+    !drawsAnyValidationRule(allowed) && field.type !== "file" && // 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." })
   ] });
 }
@@ -2485,6 +2401,7 @@ function FieldCards({
 // src/admin/components/builder/FormNotificationsTab.tsx
 import {
   Badge as Badge3,
+  Card,
   Button as Button6,
   DropdownMenu as DropdownMenu3,
   DropdownMenuContent as DropdownMenuContent3,
@@ -2500,11 +2417,6 @@ import {
   SelectItem as SelectItem5,
   SelectTrigger as SelectTrigger5,
   SelectValue as SelectValue5,
-  Sheet as Sheet2,
-  SheetContent as SheetContent2,
-  SheetDescription as SheetDescription2,
-  SheetHeader as SheetHeader2,
-  SheetTitle as SheetTitle2,
   Switch as Switch2
 } from "@nextlyhq/ui";
 import {
@@ -2519,7 +2431,51 @@ import {
   X
 } from "lucide-react";
 import { useCallback as useCallback6, useEffect as useEffect3, useMemo as useMemo6, useState as useState7 } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// src/admin/components/builder/notification-addresses.ts
+var EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function isValidEmail(value) {
+  return EMAIL_PATTERN.test(value.trim());
+}
+var MESSAGE = "Enter a valid email address.";
+function addressError(field, value) {
+  if (field === "replyTo" && parseFieldRef(value) !== null) return void 0;
+  if (!value?.trim()) return void 0;
+  return isValidEmail(value) ? void 0 : MESSAGE;
+}
+function addressErrorsIn(notification) {
+  const errors = {};
+  const sender = addressError("senderEmail", notification.senderEmail);
+  if (sender) errors.senderEmail = sender;
+  if (notification.recipientType === "static") {
+    const to = addressError("to", notification.to);
+    if (to) errors.to = to;
+  }
+  const replyTo = addressError("replyTo", notification.replyTo);
+  if (replyTo) errors.replyTo = replyTo;
+  return errors;
+}
+function notificationsWithBadAddresses(notifications) {
+  return notifications.filter((n) => Object.keys(addressErrorsIn(n)).length > 0).map((n) => n.name.trim() || "Untitled notification");
+}
+function badAddressMessage(notifications) {
+  const names = notificationsWithBadAddresses(notifications);
+  if (names.length === 0) return null;
+  return names.length === 1 ? `${names[0]} has an invalid email address` : `${names.length} notifications have invalid email addresses`;
+}
+function notificationsBlockingSave(notifications) {
+  const unnamed = unnamedNotificationCount(notifications);
+  if (unnamed > 0) {
+    return unnamed === 1 ? "A notification needs a name" : `${unnamed} notifications need a name`;
+  }
+  return badAddressMessage(notifications);
+}
+function unnamedNotificationCount(notifications) {
+  return notifications.filter((n) => !n.name.trim()).length;
+}
+
+// src/admin/components/builder/FormNotificationsTab.tsx
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 async function fetchProviders() {
   try {
     const res = await fetch("/admin/api/email-providers?pageSize=100&page=1", {
@@ -2544,15 +2500,9 @@ async function fetchTemplates() {
     return [];
   }
 }
-var FIELD_REF_PATTERN = /^\{\{(\w+)\}\}$/;
 function toFieldRef(fieldName) {
   return `{{${fieldName}}}`;
 }
-function parseFieldRef(value) {
-  if (!value) return null;
-  const match = value.match(FIELD_REF_PATTERN);
-  return match ? match[1] : null;
-}
 function buildEmailFieldOptions(fields, currentRef) {
   const emailFields = fields.filter((field) => field.type === "email");
   if (currentRef && !emailFields.some((field) => field.name === currentRef)) {
@@ -2561,10 +2511,6 @@ function buildEmailFieldOptions(fields, currentRef) {
   }
   return emailFields;
 }
-var EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-function isValidEmail(value) {
-  return EMAIL_PATTERN.test(value.trim());
-}
 var COMPARISON_LABELS = {
   equals: "Equals",
   notEquals: "Does not equal",
@@ -2600,10 +2546,13 @@ function NotificationCard({
   notification,
   providerName,
   fields,
-  onEdit,
+  expanded,
+  editorId,
+  onToggle,
   onDuplicate,
   onDelete,
-  onToggleEnabled
+  onToggleEnabled,
+  children
 }) {
   const recipient = describeRecipient(notification, fields);
   const ccCount = (notification.cc?.length ?? 0) + (notification.bcc?.length ?? 0);
@@ -2617,120 +2566,140 @@ function NotificationCard({
   if (hasStaleReference) {
     warnings.push("References a deleted field \u2014 edit to repair");
   }
-  return /* @__PURE__ */ jsx8(
-    "div",
-    {
-      className: `border border-border bg-background ${notification.enabled ? "" : "opacity-60"}`,
-      children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 px-3 py-2.5", children: [
-        /* @__PURE__ */ jsx8("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center bg-primary/5 text-primary", children: /* @__PURE__ */ jsx8(Mail, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
-        /* @__PURE__ */ jsxs7(
-          "button",
-          {
-            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",
-            "aria-label": `Edit notification ${notification.name}`,
-            children: [
-              /* @__PURE__ */ jsxs7("span", { className: "min-w-0 flex-1", children: [
-                /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx8("span", { className: "truncate text-sm font-medium text-foreground", children: notification.name }),
-                  notification.condition && /* @__PURE__ */ jsxs7(
-                    Badge3,
+  return (
+    // `Card` rather than its classes written out again: the primitive owns the
+    // surface colour, the radius, the foreground and the transition, and a
+    // second spelling of them drifts the moment the shared surface changes.
+    //
+    // `overflow-hidden` because an expanded editor paints a full-width tinted
+    // child; without clipping it squares off the corners the card just rounded.
+    /* @__PURE__ */ jsxs7(Card, { className: "overflow-hidden p-0", children: [
+      /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: `flex items-center gap-2 px-3 py-2.5 ${notification.enabled ? "" : "opacity-60"}`,
+          children: [
+            /* @__PURE__ */ jsx8("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center bg-primary/5 text-primary", children: /* @__PURE__ */ jsx8(Mail, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
+            /* @__PURE__ */ jsxs7(
+              "button",
+              {
+                type: "button",
+                onClick: onToggle,
+                "aria-expanded": expanded,
+                "aria-controls": editorId,
+                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: [
+                    /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx8("span", { className: "truncate text-sm font-medium text-foreground", children: notification.name }),
+                      notification.condition && /* @__PURE__ */ jsxs7(
+                        Badge3,
+                        {
+                          variant: "outline",
+                          className: "shrink-0 gap-1 rounded-none border-border px-1.5 py-0 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground",
+                          children: [
+                            /* @__PURE__ */ jsx8(Filter, { className: "h-2.5 w-2.5", "aria-hidden": "true" }),
+                            "Conditional"
+                          ]
+                        }
+                      )
+                    ] }),
+                    /* @__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", children: "\xB7" }),
+                        "+",
+                        ccCount,
+                        " cc/bcc"
+                      ] }),
+                      /* @__PURE__ */ jsx8("span", { className: "mx-1.5 text-muted-foreground", children: "\xB7" }),
+                      providerName
+                    ] })
+                  ] }),
+                  warnings.length > 0 && /* @__PURE__ */ jsx8("span", { className: "flex shrink-0 flex-col items-end gap-0.5", children: warnings.map((warning) => /* @__PURE__ */ jsxs7(
+                    "span",
                     {
-                      variant: "outline",
-                      className: "shrink-0 gap-1 rounded-none border-border px-1.5 py-0 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground",
+                      className: "flex items-center gap-1 text-xs font-medium text-destructive",
                       children: [
-                        /* @__PURE__ */ jsx8(Filter, { className: "h-2.5 w-2.5", "aria-hidden": "true" }),
-                        "Conditional"
+                        /* @__PURE__ */ jsx8(TriangleAlert2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+                        warning
                       ]
-                    }
-                  )
-                ] }),
-                /* @__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", children: "\xB7" }),
-                    "+",
-                    ccCount,
-                    " cc/bcc"
-                  ] }),
-                  /* @__PURE__ */ jsx8("span", { className: "mx-1.5 text-muted-foreground", children: "\xB7" }),
-                  providerName
-                ] })
-              ] }),
-              warnings.length > 0 && /* @__PURE__ */ jsx8("span", { className: "flex shrink-0 flex-col items-end gap-0.5", children: warnings.map((warning) => /* @__PURE__ */ jsxs7(
-                "span",
+                    },
+                    warning
+                  )) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx8(
+              Switch2,
+              {
+                checked: notification.enabled,
+                onCheckedChange: onToggleEnabled,
+                "aria-label": `${notification.enabled ? "Disable" : "Enable"} notification ${notification.name}`
+              }
+            ),
+            /* @__PURE__ */ jsxs7(DropdownMenu3, { children: [
+              /* @__PURE__ */ jsx8(DropdownMenuTrigger3, { asChild: true, children: /* @__PURE__ */ jsx8(
+                Button6,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-8 w-8 shrink-0 rounded-none text-muted-foreground hover:text-foreground",
+                  "aria-label": `Notification actions for ${notification.name}`,
+                  children: /* @__PURE__ */ jsx8(MoreHorizontal2, { className: "h-4 w-4", "aria-hidden": "true" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxs7(
+                DropdownMenuContent3,
                 {
-                  className: "flex items-center gap-1 text-xs font-medium text-destructive",
+                  align: "end",
+                  className: "w-56 shadow-none border-border",
                   children: [
-                    /* @__PURE__ */ jsx8(TriangleAlert2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
-                    warning
+                    /* @__PURE__ */ jsxs7(
+                      DropdownMenuItem3,
+                      {
+                        onClick: onToggle,
+                        className: "gap-2 cursor-pointer",
+                        children: [
+                          /* @__PURE__ */ jsx8(Pencil2, { className: "h-4 w-4 text-muted-foreground" }),
+                          expanded ? "Collapse" : "Edit"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs7(
+                      DropdownMenuItem3,
+                      {
+                        onClick: onDuplicate,
+                        className: "gap-2 cursor-pointer",
+                        children: [
+                          /* @__PURE__ */ jsx8(Copy2, { className: "h-4 w-4 text-muted-foreground" }),
+                          "Duplicate"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8(DropdownMenuSeparator2, {}),
+                    /* @__PURE__ */ jsxs7(
+                      DropdownMenuItem3,
+                      {
+                        onClick: onDelete,
+                        className: "gap-2 cursor-pointer text-destructive focus:text-destructive",
+                        children: [
+                          /* @__PURE__ */ jsx8(Trash22, { className: "h-4 w-4" }),
+                          "Delete"
+                        ]
+                      }
+                    )
                   ]
-                },
-                warning
-              )) })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx8(
-          Switch2,
-          {
-            checked: notification.enabled,
-            onCheckedChange: onToggleEnabled,
-            "aria-label": `${notification.enabled ? "Disable" : "Enable"} notification ${notification.name}`
-          }
-        ),
-        /* @__PURE__ */ jsxs7(DropdownMenu3, { children: [
-          /* @__PURE__ */ jsx8(DropdownMenuTrigger3, { asChild: true, children: /* @__PURE__ */ jsx8(
-            Button6,
-            {
-              type: "button",
-              variant: "ghost",
-              size: "icon",
-              className: "h-8 w-8 shrink-0 rounded-none text-muted-foreground hover:text-foreground",
-              "aria-label": `Notification actions for ${notification.name}`,
-              children: /* @__PURE__ */ jsx8(MoreHorizontal2, { className: "h-4 w-4", "aria-hidden": "true" })
-            }
-          ) }),
-          /* @__PURE__ */ jsxs7(
-            DropdownMenuContent3,
-            {
-              align: "end",
-              className: "w-56 shadow-none border-border",
-              children: [
-                /* @__PURE__ */ jsxs7(DropdownMenuItem3, { onClick: onEdit, className: "gap-2 cursor-pointer", children: [
-                  /* @__PURE__ */ jsx8(Pencil2, { className: "h-4 w-4 text-muted-foreground" }),
-                  "Edit"
-                ] }),
-                /* @__PURE__ */ jsxs7(
-                  DropdownMenuItem3,
-                  {
-                    onClick: onDuplicate,
-                    className: "gap-2 cursor-pointer",
-                    children: [
-                      /* @__PURE__ */ jsx8(Copy2, { className: "h-4 w-4 text-muted-foreground" }),
-                      "Duplicate"
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx8(DropdownMenuSeparator2, {}),
-                /* @__PURE__ */ jsxs7(
-                  DropdownMenuItem3,
-                  {
-                    onClick: onDelete,
-                    className: "gap-2 cursor-pointer text-destructive focus:text-destructive",
-                    children: [
-                      /* @__PURE__ */ jsx8(Trash22, { className: "h-4 w-4" }),
-                      "Delete"
-                    ]
-                  }
-                )
-              ]
-            }
-          )
-        ] })
-      ] })
-    }
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      expanded && children
+    ] })
   );
 }
 function AddressChipList({
@@ -2812,596 +2781,579 @@ function AddressChipList({
     error && /* @__PURE__ */ jsx8("p", { id: `${id}-error`, className: "text-xs text-destructive", children: error })
   ] });
 }
-function initialReplyToMode(replyTo) {
-  if (!replyTo) return "none";
-  return parseFieldRef(replyTo) ? "field" : "custom";
-}
-function NotificationSheet({
-  initial,
-  isEditing,
-  providers,
-  templates,
+function RecipientFields({
+  form,
   fields,
   defaults,
-  onSave,
-  onClose
+  update,
+  onRecipientTypeChange,
+  addressErrors,
+  validateAddress,
+  replyToMode,
+  setReplyToMode
 }) {
-  const [form, setForm] = useState7(initial);
-  const [replyToMode, setReplyToMode] = useState7(
-    initialReplyToMode(initial.replyTo)
-  );
-  const [addressErrors, setAddressErrors] = useState7({});
-  const update = useCallback6(
-    (key, value) => {
-      setForm((prev) => ({ ...prev, [key]: value }));
-      setAddressErrors(
-        (prev) => key in prev ? { ...prev, [key]: void 0 } : prev
-      );
-    },
-    []
-  );
-  const handleSave = useCallback6(() => {
-    const errors = {};
-    const invalid = (value) => Boolean(value?.trim()) && !isValidEmail(value);
-    if (invalid(form.senderEmail)) {
-      errors.senderEmail = "Enter a valid email address.";
-    }
-    if (form.recipientType === "static" && invalid(form.to)) {
-      errors.to = "Enter a valid email address.";
-    }
-    if (!parseFieldRef(form.replyTo) && invalid(form.replyTo)) {
-      errors.replyTo = "Enter a valid email address.";
-    }
-    if (Object.values(errors).some(Boolean)) {
-      setAddressErrors(errors);
-      return;
-    }
-    onSave(form);
-  }, [form, onSave]);
-  const defaultProvider = providers.find((p) => p.isDefault);
-  const defaultProviderLabel = defaultProvider ? `System default (${defaultProvider.name})` : "System default";
   const toRef = parseFieldRef(form.to);
-  const toFieldOptions = buildEmailFieldOptions(
-    fields,
-    form.recipientType === "field" ? toRef : null
-  );
+  const toFieldOptions = buildEmailFieldOptions(fields, toRef);
   const replyToRef = parseFieldRef(form.replyTo);
   const replyToFieldOptions = buildEmailFieldOptions(fields, replyToRef);
-  const senderPlaceholder = defaults?.defaultFrom || "Provider default";
-  const senderHelp = defaults?.defaultFrom ? `Leave blank to send from ${defaults.defaultFrom} (the configured default).` : "Leave blank to use the template or provider default address.";
-  const condition = form.condition;
-  return /* @__PURE__ */ jsx8(
-    Sheet2,
-    {
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) onClose();
-      },
-      children: /* @__PURE__ */ jsxs7(
-        SheetContent2,
+  return /* @__PURE__ */ jsx8(Fragment3, { children: /* @__PURE__ */ jsxs7("div", { className: "space-y-4 pt-4 border-t border-border", children: [
+    /* @__PURE__ */ jsxs7(Grid, { cols: 2, responsive: true, children: [
+      /* @__PURE__ */ jsx8(FieldShell, { label: "Send to", htmlFor: "notification-recipient-type", children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
+        Select5,
         {
-          side: "right",
-          className: "w-[560px] sm:max-w-[560px] p-0 flex flex-col",
+          value: form.recipientType,
+          onValueChange: (value) => {
+            onRecipientTypeChange(value);
+          },
           children: [
-            /* @__PURE__ */ jsxs7(SheetHeader2, { className: "p-4 border-b border-border", children: [
-              /* @__PURE__ */ jsx8(SheetTitle2, { children: isEditing ? "Edit notification" : "New notification" }),
-              /* @__PURE__ */ jsx8(SheetDescription2, { children: "Sent when someone submits this form." })
-            ] }),
-            /* @__PURE__ */ jsxs7("div", { className: "flex-1 overflow-y-auto p-4 space-y-6", children: [
-              /* @__PURE__ */ jsx8(FieldShell, { label: "Name", htmlFor: "notification-name", width: "half", children: /* @__PURE__ */ jsx8(
-                Input3,
-                {
-                  type: "text",
-                  value: form.name,
-                  onChange: (e) => update("name", e.target.value),
-                  placeholder: "e.g. Admin notification"
-                }
-              ) }),
-              /* @__PURE__ */ jsxs7(Grid, { cols: 2, responsive: true, children: [
-                /* @__PURE__ */ jsx8(FieldShell, { label: "Email provider", htmlFor: "notification-provider", children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
-                  Select5,
-                  {
-                    value: form.providerId ?? "__default",
-                    onValueChange: (value) => update(
-                      "providerId",
-                      value === "__default" ? void 0 : value
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx8(
-                        SelectTrigger5,
-                        {
-                          id,
-                          "aria-describedby": describedBy,
-                          "aria-invalid": invalid,
-                          className: "w-full bg-transparent border-input dark:bg-muted/50",
-                          children: /* @__PURE__ */ jsx8(SelectValue5, {})
-                        }
-                      ),
-                      /* @__PURE__ */ jsxs7(SelectContent5, { children: [
-                        /* @__PURE__ */ jsx8(SelectItem5, { value: "__default", children: defaultProviderLabel }),
-                        providers.map((p) => /* @__PURE__ */ jsxs7(SelectItem5, { value: p.id, children: [
-                          p.name,
-                          p.isDefault ? " (Default)" : ""
-                        ] }, p.id))
-                      ] })
-                    ]
-                  }
-                ) }),
-                /* @__PURE__ */ jsxs7("div", { className: "space-y-1.5", children: [
-                  /* @__PURE__ */ jsx8(
-                    FieldShell,
-                    {
-                      label: "Email template",
-                      htmlFor: "notification-template",
-                      children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
-                        Select5,
-                        {
-                          value: form.templateSlug ?? "__none",
-                          onValueChange: (value) => update(
-                            "templateSlug",
-                            value === "__none" ? void 0 : value
-                          ),
-                          children: [
-                            /* @__PURE__ */ jsx8(
-                              SelectTrigger5,
-                              {
-                                id,
-                                "aria-describedby": describedBy,
-                                "aria-invalid": invalid,
-                                className: "w-full bg-transparent border-input dark:bg-muted/50",
-                                children: /* @__PURE__ */ jsx8(SelectValue5, {})
-                              }
-                            ),
-                            /* @__PURE__ */ jsxs7(SelectContent5, { children: [
-                              /* @__PURE__ */ jsx8(SelectItem5, { value: "__none", children: "Select a template" }),
-                              templates.filter((t) => t.isActive && t.kind !== "layout").map((t) => /* @__PURE__ */ jsx8(SelectItem5, { value: t.slug, children: t.name }, t.id))
-                            ] })
-                          ]
-                        }
-                      )
-                    }
-                  ),
-                  !form.templateSlug && /* @__PURE__ */ jsxs7("p", { className: "flex items-center gap-1 text-xs text-destructive", children: [
-                    /* @__PURE__ */ jsx8(TriangleAlert2, { className: "h-3 w-3", "aria-hidden": "true" }),
-                    "Required \u2014 a notification without a template is never sent."
-                  ] })
-                ] })
-              ] }),
+            /* @__PURE__ */ jsx8(
+              SelectTrigger5,
+              {
+                id,
+                "aria-describedby": describedBy,
+                "aria-invalid": invalid,
+                className: "w-full bg-transparent border-input dark:bg-muted/50",
+                children: /* @__PURE__ */ jsx8(SelectValue5, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs7(SelectContent5, { children: [
+              /* @__PURE__ */ jsx8(SelectItem5, { value: "static", children: "A specific address" }),
+              /* @__PURE__ */ jsx8(SelectItem5, { value: "field", children: "The visitor (email field)" })
+            ] })
+          ]
+        }
+      ) }),
+      form.recipientType === "field" ? /* @__PURE__ */ jsxs7("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx8(FieldShell, { label: "Visitor email field", htmlFor: "notification-to", children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
+          Select5,
+          {
+            value: toRef ?? "__none",
+            onValueChange: (value) => update("to", value === "__none" ? "" : toFieldRef(value)),
+            children: [
               /* @__PURE__ */ jsx8(
-                FieldShell,
+                SelectTrigger5,
                 {
-                  label: "Sender email",
-                  htmlFor: "notification-sender",
-                  width: "half",
-                  description: addressErrors.senderEmail ? void 0 : senderHelp,
-                  error: addressErrors.senderEmail,
-                  children: /* @__PURE__ */ jsx8(
-                    Input3,
-                    {
-                      type: "email",
-                      value: form.senderEmail ?? "",
-                      onChange: (e) => update("senderEmail", e.target.value || void 0),
-                      placeholder: senderPlaceholder
-                    }
-                  )
+                  id,
+                  "aria-describedby": describedBy,
+                  "aria-invalid": invalid,
+                  className: "w-full bg-transparent border-input dark:bg-muted/50",
+                  children: /* @__PURE__ */ jsx8(SelectValue5, {})
                 }
               ),
-              /* @__PURE__ */ jsxs7("div", { className: "space-y-4 pt-4 border-t border-border", children: [
-                /* @__PURE__ */ jsxs7(Grid, { cols: 2, responsive: true, children: [
-                  /* @__PURE__ */ jsx8(FieldShell, { label: "Send to", htmlFor: "notification-recipient-type", children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
-                    Select5,
-                    {
-                      value: form.recipientType,
-                      onValueChange: (value) => {
-                        setForm((prev) => ({
-                          ...prev,
-                          recipientType: value,
-                          to: ""
-                        }));
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx8(
-                          SelectTrigger5,
-                          {
-                            id,
-                            "aria-describedby": describedBy,
-                            "aria-invalid": invalid,
-                            className: "w-full bg-transparent border-input dark:bg-muted/50",
-                            children: /* @__PURE__ */ jsx8(SelectValue5, {})
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs7(SelectContent5, { children: [
-                          /* @__PURE__ */ jsx8(SelectItem5, { value: "static", children: "A specific address" }),
-                          /* @__PURE__ */ jsx8(SelectItem5, { value: "field", children: "The visitor (email field)" })
-                        ] })
-                      ]
-                    }
-                  ) }),
-                  form.recipientType === "field" ? /* @__PURE__ */ jsxs7("div", { className: "space-y-1.5", children: [
-                    /* @__PURE__ */ jsx8(
-                      FieldShell,
-                      {
-                        label: "Visitor email field",
-                        htmlFor: "notification-to",
-                        children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
-                          Select5,
-                          {
-                            value: toRef ?? "__none",
-                            onValueChange: (value) => update(
-                              "to",
-                              value === "__none" ? "" : toFieldRef(value)
-                            ),
-                            children: [
-                              /* @__PURE__ */ jsx8(
-                                SelectTrigger5,
-                                {
-                                  id,
-                                  "aria-describedby": describedBy,
-                                  "aria-invalid": invalid,
-                                  className: "w-full bg-transparent border-input dark:bg-muted/50",
-                                  children: /* @__PURE__ */ jsx8(SelectValue5, {})
-                                }
-                              ),
-                              /* @__PURE__ */ jsxs7(SelectContent5, { children: [
-                                /* @__PURE__ */ jsx8(SelectItem5, { value: "__none", children: "Select a field" }),
-                                toFieldOptions.map((f) => /* @__PURE__ */ jsx8(SelectItem5, { value: f.name, children: f.label }, f.name))
-                              ] })
-                            ]
-                          }
-                        )
-                      }
-                    ),
-                    toFieldOptions.length === 0 && /* @__PURE__ */ jsx8("p", { className: "text-xs text-muted-foreground", children: "Add an email field to the form first." })
-                  ] }) : /* @__PURE__ */ jsx8(
-                    FieldShell,
-                    {
-                      label: "Recipient address",
-                      htmlFor: "notification-to",
-                      width: "half",
-                      error: addressErrors.to,
-                      children: /* @__PURE__ */ jsx8(
-                        Input3,
-                        {
-                          type: "email",
-                          value: form.to,
-                          onChange: (e) => update("to", e.target.value),
-                          placeholder: defaults?.defaultToEmail || "admin@example.com"
-                        }
-                      )
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs7(Grid, { cols: 2, responsive: true, children: [
-                  /* @__PURE__ */ jsx8(FieldShell, { label: "Reply-To", htmlFor: "notification-replyto-mode", children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
-                    Select5,
-                    {
-                      value: replyToMode,
-                      onValueChange: (value) => {
-                        const mode = value;
-                        setReplyToMode(mode);
-                        update("replyTo", void 0);
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx8(
-                          SelectTrigger5,
-                          {
-                            id,
-                            "aria-describedby": describedBy,
-                            "aria-invalid": invalid,
-                            className: "w-full bg-transparent border-input dark:bg-muted/50",
-                            children: /* @__PURE__ */ jsx8(SelectValue5, {})
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs7(SelectContent5, { children: [
-                          /* @__PURE__ */ jsx8(SelectItem5, { value: "none", children: "None" }),
-                          /* @__PURE__ */ jsx8(SelectItem5, { value: "field", children: "The visitor (email field)" }),
-                          /* @__PURE__ */ jsx8(SelectItem5, { value: "custom", children: "A custom address" })
-                        ] })
-                      ]
-                    }
-                  ) }),
-                  replyToMode === "field" && /* @__PURE__ */ jsx8(
-                    FieldShell,
-                    {
-                      label: "Visitor email field",
-                      htmlFor: "notification-replyto",
-                      children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
-                        Select5,
-                        {
-                          value: replyToRef ?? "__none",
-                          onValueChange: (value) => update(
-                            "replyTo",
-                            value === "__none" ? void 0 : toFieldRef(value)
-                          ),
-                          children: [
-                            /* @__PURE__ */ jsx8(
-                              SelectTrigger5,
-                              {
-                                id,
-                                "aria-describedby": describedBy,
-                                "aria-invalid": invalid,
-                                className: "w-full bg-transparent border-input dark:bg-muted/50",
-                                children: /* @__PURE__ */ jsx8(SelectValue5, {})
-                              }
-                            ),
-                            /* @__PURE__ */ jsxs7(SelectContent5, { children: [
-                              /* @__PURE__ */ jsx8(SelectItem5, { value: "__none", children: "Select a field" }),
-                              replyToFieldOptions.map((f) => /* @__PURE__ */ jsx8(SelectItem5, { value: f.name, children: f.label }, f.name))
-                            ] })
-                          ]
-                        }
-                      )
-                    }
-                  ),
-                  replyToMode === "custom" && /* @__PURE__ */ jsx8(
-                    FieldShell,
-                    {
-                      label: "Reply-To address",
-                      htmlFor: "notification-replyto",
-                      width: "half",
-                      error: addressErrors.replyTo,
-                      children: /* @__PURE__ */ jsx8(
-                        Input3,
-                        {
-                          type: "email",
-                          value: form.replyTo ?? "",
-                          onChange: (e) => update("replyTo", e.target.value || void 0),
-                          placeholder: "replies@example.com"
-                        }
-                      )
-                    }
-                  )
-                ] }),
-                replyToMode === "field" && /* @__PURE__ */ jsx8("p", { className: "text-xs text-muted-foreground -mt-2", children: "Replying to this email answers the person who submitted the form." }),
+              /* @__PURE__ */ jsxs7(SelectContent5, { children: [
+                /* @__PURE__ */ jsx8(SelectItem5, { value: "__none", children: "Select a field" }),
+                toFieldOptions.map((f) => /* @__PURE__ */ jsx8(SelectItem5, { value: f.name, children: f.label }, f.name))
+              ] })
+            ]
+          }
+        ) }),
+        toFieldOptions.length === 0 && /* @__PURE__ */ jsx8("p", { className: "text-xs text-muted-foreground", children: "Add an email field to the form first." })
+      ] }) : /* @__PURE__ */ jsx8(
+        FieldShell,
+        {
+          label: "Recipient address",
+          htmlFor: "notification-to",
+          width: "half",
+          error: addressErrors.to,
+          children: /* @__PURE__ */ jsx8(
+            Input3,
+            {
+              type: "email",
+              value: form.to,
+              onChange: (e) => update("to", e.target.value),
+              onBlur: (e) => validateAddress("to", e.target.value),
+              placeholder: defaults?.defaultToEmail || "admin@example.com"
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs7(Grid, { cols: 2, responsive: true, children: [
+      /* @__PURE__ */ jsx8(FieldShell, { label: "Reply-To", htmlFor: "notification-replyto-mode", children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
+        Select5,
+        {
+          value: replyToMode,
+          onValueChange: (value) => {
+            const mode = value;
+            setReplyToMode(mode);
+            update("replyTo", void 0);
+          },
+          children: [
+            /* @__PURE__ */ jsx8(
+              SelectTrigger5,
+              {
+                id,
+                "aria-describedby": describedBy,
+                "aria-invalid": invalid,
+                className: "w-full bg-transparent border-input dark:bg-muted/50",
+                children: /* @__PURE__ */ jsx8(SelectValue5, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs7(SelectContent5, { children: [
+              /* @__PURE__ */ jsx8(SelectItem5, { value: "none", children: "None" }),
+              /* @__PURE__ */ jsx8(SelectItem5, { value: "field", children: "The visitor (email field)" }),
+              /* @__PURE__ */ jsx8(SelectItem5, { value: "custom", children: "A custom address" })
+            ] })
+          ]
+        }
+      ) }),
+      replyToMode === "field" && /* @__PURE__ */ jsx8(
+        FieldShell,
+        {
+          label: "Visitor email field",
+          htmlFor: "notification-replyto",
+          children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
+            Select5,
+            {
+              value: replyToRef ?? "__none",
+              onValueChange: (value) => update(
+                "replyTo",
+                value === "__none" ? void 0 : toFieldRef(value)
+              ),
+              children: [
                 /* @__PURE__ */ jsx8(
-                  AddressChipList,
+                  SelectTrigger5,
                   {
-                    id: "notification-cc",
-                    label: "CC (optional)",
-                    addresses: form.cc,
-                    placeholder: "cc@example.com",
-                    onChange: (cc) => update("cc", cc)
+                    id,
+                    "aria-describedby": describedBy,
+                    "aria-invalid": invalid,
+                    className: "w-full bg-transparent border-input dark:bg-muted/50",
+                    children: /* @__PURE__ */ jsx8(SelectValue5, {})
                   }
                 ),
+                /* @__PURE__ */ jsxs7(SelectContent5, { children: [
+                  /* @__PURE__ */ jsx8(SelectItem5, { value: "__none", children: "Select a field" }),
+                  replyToFieldOptions.map((f) => /* @__PURE__ */ jsx8(SelectItem5, { value: f.name, children: f.label }, f.name))
+                ] })
+              ]
+            }
+          )
+        }
+      ),
+      replyToMode === "custom" && /* @__PURE__ */ jsx8(
+        FieldShell,
+        {
+          label: "Reply-To address",
+          htmlFor: "notification-replyto",
+          width: "half",
+          error: addressErrors.replyTo,
+          children: /* @__PURE__ */ jsx8(
+            Input3,
+            {
+              type: "email",
+              value: form.replyTo ?? "",
+              onBlur: (e) => validateAddress("replyTo", e.target.value),
+              onChange: (e) => update("replyTo", e.target.value || void 0),
+              placeholder: "replies@example.com"
+            }
+          )
+        }
+      )
+    ] }),
+    replyToMode === "field" && /* @__PURE__ */ jsx8("p", { className: "text-xs text-muted-foreground -mt-2", children: "Replying to this email answers the person who submitted the form." }),
+    /* @__PURE__ */ jsx8(
+      AddressChipList,
+      {
+        id: "notification-cc",
+        label: "CC (optional)",
+        addresses: form.cc,
+        placeholder: "cc@example.com",
+        onChange: (cc) => update("cc", cc)
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      AddressChipList,
+      {
+        id: "notification-bcc",
+        label: "BCC (optional)",
+        addresses: form.bcc,
+        placeholder: "bcc@example.com",
+        onChange: (bcc) => update("bcc", bcc)
+      }
+    )
+  ] }) });
+}
+function SendConditionField({
+  condition,
+  fields,
+  update
+}) {
+  return /* @__PURE__ */ jsx8(Fragment3, { children: /* @__PURE__ */ jsxs7("div", { className: "space-y-3 pt-4 border-t border-border", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium text-foreground", children: "Send condition" }),
+        /* @__PURE__ */ jsx8("p", { className: "text-xs text-muted-foreground", children: "Only send this notification when a submitted value matches." })
+      ] }),
+      !condition && /* @__PURE__ */ jsxs7(
+        Button6,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          onClick: () => update("condition", {
+            field: fields[0]?.name ?? "",
+            comparison: "equals",
+            value: ""
+          }),
+          disabled: fields.length === 0,
+          children: [
+            /* @__PURE__ */ jsx8(Plus2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+            "Add condition"
+          ]
+        }
+      )
+    ] }),
+    condition && /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-end gap-2 border border-border bg-muted/40 p-3", children: [
+      /* @__PURE__ */ jsx8(
+        FieldShell,
+        {
+          label: "Field",
+          htmlFor: "notification-condition-field",
+          className: "min-w-36 flex-1",
+          children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
+            Select5,
+            {
+              value: condition.field || "__none",
+              onValueChange: (value) => update("condition", {
+                ...condition,
+                field: value === "__none" ? "" : value
+              }),
+              children: [
                 /* @__PURE__ */ jsx8(
-                  AddressChipList,
+                  SelectTrigger5,
                   {
-                    id: "notification-bcc",
-                    label: "BCC (optional)",
-                    addresses: form.bcc,
-                    placeholder: "bcc@example.com",
-                    onChange: (bcc) => update("bcc", bcc)
+                    id,
+                    "aria-describedby": describedBy,
+                    "aria-invalid": invalid,
+                    className: "w-full bg-transparent border-input dark:bg-muted/50",
+                    children: /* @__PURE__ */ jsx8(SelectValue5, {})
                   }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs7("div", { className: "space-y-3 pt-4 border-t border-border", children: [
-                /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxs7("div", { children: [
-                    /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium text-foreground", children: "Send condition" }),
-                    /* @__PURE__ */ jsx8("p", { className: "text-xs text-muted-foreground", children: "Only send this notification when a submitted value matches." })
-                  ] }),
-                  !condition && /* @__PURE__ */ jsxs7(
-                    Button6,
-                    {
-                      type: "button",
-                      variant: "outline",
-                      size: "sm",
-                      onClick: () => update("condition", {
-                        field: fields[0]?.name ?? "",
-                        comparison: "equals",
-                        value: ""
-                      }),
-                      disabled: fields.length === 0,
-                      children: [
-                        /* @__PURE__ */ jsx8(Plus2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
-                        "Add condition"
-                      ]
-                    }
-                  )
-                ] }),
-                condition && /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-end gap-2 border border-border bg-muted/40 p-3", children: [
-                  /* @__PURE__ */ jsx8(
-                    FieldShell,
-                    {
-                      label: "Field",
-                      htmlFor: "notification-condition-field",
-                      className: "min-w-36 flex-1",
-                      children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
-                        Select5,
-                        {
-                          value: condition.field || "__none",
-                          onValueChange: (value) => update("condition", {
-                            ...condition,
-                            field: value === "__none" ? "" : value
-                          }),
-                          children: [
-                            /* @__PURE__ */ jsx8(
-                              SelectTrigger5,
-                              {
-                                id,
-                                "aria-describedby": describedBy,
-                                "aria-invalid": invalid,
-                                className: "w-full bg-transparent border-input dark:bg-muted/50",
-                                children: /* @__PURE__ */ jsx8(SelectValue5, {})
-                              }
-                            ),
-                            /* @__PURE__ */ jsxs7(SelectContent5, { children: [
-                              /* @__PURE__ */ jsx8(SelectItem5, { value: "__none", children: "Select a field" }),
-                              fields.map((f) => /* @__PURE__ */ jsx8(SelectItem5, { value: f.name, children: f.label }, f.name))
-                            ] })
-                          ]
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx8(
-                    FieldShell,
-                    {
-                      label: "Comparison",
-                      htmlFor: "notification-condition-comparison",
-                      className: "min-w-36 flex-1",
-                      children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
-                        Select5,
-                        {
-                          value: condition.comparison,
-                          onValueChange: (value) => update("condition", {
-                            ...condition,
-                            comparison: value
-                          }),
-                          children: [
-                            /* @__PURE__ */ jsx8(
-                              SelectTrigger5,
-                              {
-                                id,
-                                "aria-describedby": describedBy,
-                                "aria-invalid": invalid,
-                                className: "w-full bg-transparent border-input dark:bg-muted/50",
-                                children: /* @__PURE__ */ jsx8(SelectValue5, {})
-                              }
-                            ),
-                            /* @__PURE__ */ jsx8(SelectContent5, { children: Object.entries(COMPARISON_LABELS).map(
-                              ([value, label]) => /* @__PURE__ */ jsx8(SelectItem5, { value, children: label }, value)
-                            ) })
-                          ]
-                        }
-                      )
-                    }
-                  ),
-                  !VALUELESS_COMPARISONS.has(condition.comparison) && /* @__PURE__ */ jsx8(
-                    FieldShell,
-                    {
-                      label: "Value",
-                      htmlFor: "notification-condition-value",
-                      className: "min-w-36 flex-1",
-                      children: /* @__PURE__ */ jsx8(
-                        Input3,
-                        {
-                          type: "text",
-                          value: typeof condition.value === "string" || typeof condition.value === "number" ? String(condition.value) : "",
-                          onChange: (e) => update("condition", {
-                            ...condition,
-                            value: e.target.value
-                          })
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsx8(
-                    Button6,
-                    {
-                      type: "button",
-                      variant: "ghost",
-                      size: "icon",
-                      className: "h-9 w-9 rounded-none text-muted-foreground hover:text-destructive",
-                      onClick: () => update("condition", void 0),
-                      "aria-label": "Remove send condition",
-                      children: /* @__PURE__ */ jsx8(Trash22, { className: "h-4 w-4", "aria-hidden": "true" })
-                    }
-                  )
+                ),
+                /* @__PURE__ */ jsxs7(SelectContent5, { children: [
+                  /* @__PURE__ */ jsx8(SelectItem5, { value: "__none", children: "Select a field" }),
+                  fields.map((f) => /* @__PURE__ */ jsx8(SelectItem5, { value: f.name, children: f.label }, f.name))
                 ] })
-              ] }),
-              /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between pt-4 border-t border-border", children: [
-                /* @__PURE__ */ jsxs7("div", { children: [
-                  /* @__PURE__ */ jsx8(Label2, { htmlFor: "notification-enabled", children: "Enabled" }),
-                  /* @__PURE__ */ jsx8("p", { className: "text-xs text-muted-foreground", children: "Turn off to keep the rule without sending." })
-                ] }),
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        FieldShell,
+        {
+          label: "Comparison",
+          htmlFor: "notification-condition-comparison",
+          className: "min-w-36 flex-1",
+          children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
+            Select5,
+            {
+              value: condition.comparison,
+              onValueChange: (value) => update("condition", {
+                ...condition,
+                comparison: value
+              }),
+              children: [
                 /* @__PURE__ */ jsx8(
-                  Switch2,
+                  SelectTrigger5,
                   {
-                    id: "notification-enabled",
-                    checked: form.enabled,
-                    onCheckedChange: (checked) => update("enabled", checked)
+                    id,
+                    "aria-describedby": describedBy,
+                    "aria-invalid": invalid,
+                    className: "w-full bg-transparent border-input dark:bg-muted/50",
+                    children: /* @__PURE__ */ jsx8(SelectValue5, {})
                   }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-end gap-3 border-t border-border bg-muted p-4", children: [
-              /* @__PURE__ */ jsx8(Button6, { type: "button", variant: "outline", onClick: onClose, children: "Cancel" }),
-              /* @__PURE__ */ jsx8(
-                Button6,
-                {
-                  type: "button",
-                  onClick: handleSave,
-                  disabled: !form.name.trim(),
-                  children: isEditing ? "Save changes" : "Add notification"
-                }
-              )
-            ] })
-          ]
+                ),
+                /* @__PURE__ */ jsx8(SelectContent5, { children: Object.entries(COMPARISON_LABELS).map(([value, label]) => /* @__PURE__ */ jsx8(SelectItem5, { value, children: label }, value)) })
+              ]
+            }
+          )
+        }
+      ),
+      !VALUELESS_COMPARISONS.has(condition.comparison) && /* @__PURE__ */ jsx8(
+        FieldShell,
+        {
+          label: "Value",
+          htmlFor: "notification-condition-value",
+          className: "min-w-36 flex-1",
+          children: /* @__PURE__ */ jsx8(
+            Input3,
+            {
+              type: "text",
+              value: typeof condition.value === "string" || typeof condition.value === "number" ? String(condition.value) : "",
+              onChange: (e) => update("condition", {
+                ...condition,
+                value: e.target.value
+              })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        Button6,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: "h-9 w-9 rounded-none text-muted-foreground hover:text-destructive",
+          onClick: () => update("condition", void 0),
+          "aria-label": "Remove send condition",
+          children: /* @__PURE__ */ jsx8(Trash22, { className: "h-4 w-4", "aria-hidden": "true" })
         }
       )
-    }
-  );
+    ] })
+  ] }) });
 }
-function FormNotificationsTab({ defaults }) {
-  const {
-    notifications,
-    fields,
-    addNotification,
-    duplicateNotification,
-    updateNotification,
-    deleteNotification
-  } = useFormBuilder();
-  const [providers, setProviders] = useState7([]);
-  const [templates, setTemplates] = useState7([]);
-  const [sheetState, setSheetState] = useState7({ open: false, editing: null });
-  useEffect3(() => {
-    void fetchProviders().then(setProviders);
-    void fetchTemplates().then(setTemplates);
-  }, []);
-  const fieldList = useMemo6(
-    () => fields.map((f) => ({ name: f.name, label: f.label, type: f.type })),
-    [fields]
-  );
-  const openAddSheet = useCallback6(() => {
-    setSheetState({ open: true, editing: null });
-  }, []);
-  const openEditSheet = useCallback6((notification) => {
-    setSheetState({ open: true, editing: notification });
-  }, []);
-  const closeSheet = useCallback6(() => {
-    setSheetState({ open: false, editing: null });
-  }, []);
-  const handleSave = useCallback6(
-    (notification) => {
-      if (sheetState.editing) {
-        updateNotification(notification.id, notification);
-      } else {
-        addNotification(notification);
-      }
-      closeSheet();
-    },
-    [sheetState.editing, addNotification, updateNotification, closeSheet]
-  );
-  const getProviderName = useCallback6(
-    (providerId) => {
-      if (!providerId) {
-        const def = providers.find((p) => p.isDefault);
-        return def ? `${def.name} (default)` : "System default";
+function NotificationIdentityFields({
+  form,
+  providers,
+  defaults,
+  templates,
+  update,
+  addressErrors,
+  validateAddress
+}) {
+  const defaultProvider = providers.find((p) => p.isDefault);
+  const defaultProviderLabel = defaultProvider ? `System default (${defaultProvider.name})` : "System default";
+  const senderPlaceholder = defaults?.defaultFrom || "Provider default";
+  const senderHelp = defaults?.defaultFrom ? `Leave blank to send from ${defaults.defaultFrom} (the configured default).` : "Leave blank to use the template or provider default address.";
+  return /* @__PURE__ */ jsxs7(Fragment3, { children: [
+    /* @__PURE__ */ jsx8(FieldShell, { label: "Name", htmlFor: "notification-name", width: "half", children: /* @__PURE__ */ jsx8(
+      Input3,
+      {
+        type: "text",
+        value: form.name,
+        onChange: (e) => update("name", e.target.value),
+        placeholder: "e.g. Admin notification"
       }
-      return providers.find((p) => p.id === providerId)?.name ?? "Unknown";
-    },
-    [providers]
-  );
-  const initialNotification = sheetState.editing ?? createNotification();
-  return (
-    // The measure belongs to `FormLayout` now, not to this tab.
-    /* @__PURE__ */ jsxs7("div", { children: [
-      /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between mb-8 pb-4 border-b border-border", children: [
-        /* @__PURE__ */ jsxs7("div", { children: [
-          /* @__PURE__ */ jsx8("h3", { className: "text-xl font-semibold text-foreground", children: "Notifications" }),
-          /* @__PURE__ */ jsx8("p", { className: "text-sm text-muted-foreground mt-1", children: "Emails sent when someone submits this form." })
-        ] }),
-        /* @__PURE__ */ jsxs7(Button6, { type: "button", onClick: openAddSheet, children: [
-          /* @__PURE__ */ jsx8(Plus2, { className: "h-4 w-4", "aria-hidden": "true" }),
-          "Add notification"
-        ] })
-      ] }),
+    ) }),
+    /* @__PURE__ */ jsxs7(Grid, { cols: 2, responsive: true, children: [
+      /* @__PURE__ */ jsx8(FieldShell, { label: "Email provider", htmlFor: "notification-provider", children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
+        Select5,
+        {
+          value: form.providerId ?? "__default",
+          onValueChange: (value) => update("providerId", value === "__default" ? void 0 : value),
+          children: [
+            /* @__PURE__ */ jsx8(
+              SelectTrigger5,
+              {
+                id,
+                "aria-describedby": describedBy,
+                "aria-invalid": invalid,
+                className: "w-full bg-transparent border-input dark:bg-muted/50",
+                children: /* @__PURE__ */ jsx8(SelectValue5, {})
+              }
+            ),
+            /* @__PURE__ */ jsxs7(SelectContent5, { children: [
+              /* @__PURE__ */ jsx8(SelectItem5, { value: "__default", children: defaultProviderLabel }),
+              providers.map((p) => /* @__PURE__ */ jsxs7(SelectItem5, { value: p.id, children: [
+                p.name,
+                p.isDefault ? " (Default)" : ""
+              ] }, p.id))
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs7("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx8(FieldShell, { label: "Email template", htmlFor: "notification-template", children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs7(
+          Select5,
+          {
+            value: form.templateSlug ?? "__none",
+            onValueChange: (value) => update("templateSlug", value === "__none" ? void 0 : value),
+            children: [
+              /* @__PURE__ */ jsx8(
+                SelectTrigger5,
+                {
+                  id,
+                  "aria-describedby": describedBy,
+                  "aria-invalid": invalid,
+                  className: "w-full bg-transparent border-input dark:bg-muted/50",
+                  children: /* @__PURE__ */ jsx8(SelectValue5, {})
+                }
+              ),
+              /* @__PURE__ */ jsxs7(SelectContent5, { children: [
+                /* @__PURE__ */ jsx8(SelectItem5, { value: "__none", children: "Select a template" }),
+                templates.filter((t) => t.isActive && t.kind !== "layout").map((t) => /* @__PURE__ */ jsx8(SelectItem5, { value: t.slug, children: t.name }, t.id))
+              ] })
+            ]
+          }
+        ) }),
+        !form.templateSlug && /* @__PURE__ */ jsxs7("p", { className: "flex items-center gap-1 text-xs text-destructive", children: [
+          /* @__PURE__ */ jsx8(TriangleAlert2, { className: "h-3 w-3", "aria-hidden": "true" }),
+          "Required \u2014 a notification without a template is never sent."
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx8(
+      FieldShell,
+      {
+        label: "Sender email",
+        htmlFor: "notification-sender",
+        width: "half",
+        description: addressErrors.senderEmail ? void 0 : senderHelp,
+        error: addressErrors.senderEmail,
+        children: /* @__PURE__ */ jsx8(
+          Input3,
+          {
+            type: "email",
+            value: form.senderEmail ?? "",
+            onChange: (e) => update("senderEmail", e.target.value || void 0),
+            onBlur: (e) => validateAddress("senderEmail", e.target.value),
+            placeholder: senderPlaceholder
+          }
+        )
+      }
+    )
+  ] });
+}
+function initialReplyToMode(replyTo) {
+  if (!replyTo) return "none";
+  return parseFieldRef(replyTo) ? "field" : "custom";
+}
+function NotificationEditor({
+  notification,
+  editorId,
+  providers,
+  templates,
+  fields,
+  defaults,
+  onChange
+}) {
+  const form = notification;
+  const [replyToMode, setReplyToMode] = useState7(
+    initialReplyToMode(notification.replyTo)
+  );
+  const [addressErrors, setAddressErrors] = useState7(
+    () => addressErrorsIn(notification)
+  );
+  const update = useCallback6(
+    (key, value) => {
+      onChange({ ...notification, [key]: value });
+      setAddressErrors(
+        (prev) => key in prev ? { ...prev, [key]: void 0 } : prev
+      );
+    },
+    [notification, onChange]
+  );
+  const changeRecipientType = useCallback6(
+    (kind) => {
+      onChange({ ...notification, recipientType: kind, to: "" });
+    },
+    [notification, onChange]
+  );
+  const validateAddress = useCallback6(
+    (key, value) => {
+      setAddressErrors((prev) => ({ ...prev, [key]: addressError(key, value) }));
+    },
+    []
+  );
+  const condition = form.condition;
+  return /* @__PURE__ */ jsx8("div", { id: editorId, className: "border-t border-border bg-muted/20 px-4 py-5", children: /* @__PURE__ */ jsxs7("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx8(
+      NotificationIdentityFields,
+      {
+        form,
+        providers,
+        defaults,
+        templates,
+        update,
+        addressErrors,
+        validateAddress
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      RecipientFields,
+      {
+        form,
+        fields,
+        defaults,
+        update,
+        onRecipientTypeChange: changeRecipientType,
+        addressErrors,
+        validateAddress,
+        replyToMode,
+        setReplyToMode
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      SendConditionField,
+      {
+        condition,
+        fields,
+        update
+      }
+    ),
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between pt-4 border-t border-border", children: [
+      /* @__PURE__ */ jsxs7("div", { children: [
+        /* @__PURE__ */ jsx8(Label2, { htmlFor: "notification-enabled", children: "Enabled" }),
+        /* @__PURE__ */ jsx8("p", { className: "text-xs text-muted-foreground", children: "Turn off to keep the rule without sending." })
+      ] }),
+      /* @__PURE__ */ jsx8(
+        Switch2,
+        {
+          id: "notification-enabled",
+          checked: form.enabled,
+          onCheckedChange: (checked) => update("enabled", checked)
+        }
+      )
+    ] })
+  ] }) });
+}
+function FormNotificationsTab({ defaults }) {
+  const {
+    notifications,
+    fields,
+    addNotification,
+    duplicateNotification,
+    updateNotification,
+    deleteNotification
+  } = useFormBuilder();
+  const [providers, setProviders] = useState7([]);
+  const [templates, setTemplates] = useState7([]);
+  const [expandedId, setExpandedId] = useState7(null);
+  useEffect3(() => {
+    void fetchProviders().then(setProviders);
+    void fetchTemplates().then(setTemplates);
+  }, []);
+  const fieldList = useMemo6(
+    () => fields.map((f) => ({ name: f.name, label: f.label, type: f.type })),
+    [fields]
+  );
+  const addAndOpen = useCallback6(() => {
+    const created = createNotification();
+    addNotification(created);
+    setExpandedId(created.id);
+  }, [addNotification]);
+  const toggleExpanded = useCallback6((id) => {
+    setExpandedId((current) => current === id ? null : id);
+  }, []);
+  const getProviderName = useCallback6(
+    (providerId) => {
+      if (!providerId) {
+        const def = providers.find((p) => p.isDefault);
+        return def ? `${def.name} (default)` : "System default";
+      }
+      return providers.find((p) => p.id === providerId)?.name ?? "Unknown";
+    },
+    [providers]
+  );
+  return (
+    // The measure belongs to the page's shell, not to this tab.
+    /* @__PURE__ */ jsxs7("div", { children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between mb-8 pb-4 border-b border-border", children: [
+        /* @__PURE__ */ jsxs7("div", { children: [
+          /* @__PURE__ */ jsx8("h3", { className: "text-xl font-semibold text-foreground", children: "Notifications" }),
+          /* @__PURE__ */ jsx8("p", { className: "text-sm text-muted-foreground mt-1", children: "Emails sent when someone submits this form." })
+        ] }),
+        /* @__PURE__ */ jsxs7(Button6, { type: "button", onClick: addAndOpen, children: [
+          /* @__PURE__ */ jsx8(Plus2, { className: "h-4 w-4", "aria-hidden": "true" }),
+          "Add notification"
+        ] })
+      ] }),
       notifications.length === 0 ? /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center justify-center p-12 mt-6 border-2 border-dashed border-border rounded-none bg-muted", children: [
         /* @__PURE__ */ jsx8("div", { className: "flex items-center justify-center w-12 h-12 rounded-none border border-border bg-background mb-4 text-primary", children: /* @__PURE__ */ jsx8(Mail, { className: "h-6 w-6", "aria-hidden": "true" }) }),
         /* @__PURE__ */ jsx8("p", { className: "text-base font-medium text-foreground mb-1", children: "No notifications yet" }),
         /* @__PURE__ */ jsx8("p", { className: "text-sm text-muted-foreground mb-6 text-center max-w-sm", children: "Add a notification to email someone when this form is submitted." }),
-        /* @__PURE__ */ jsxs7(Button6, { type: "button", onClick: openAddSheet, children: [
+        /* @__PURE__ */ jsxs7(Button6, { type: "button", onClick: addAndOpen, children: [
           /* @__PURE__ */ jsx8(Plus2, { className: "h-4 w-4", "aria-hidden": "true" }),
           "Add notification"
         ] })
@@ -3411,52 +3363,771 @@ function FormNotificationsTab({ defaults }) {
           notification,
           providerName: getProviderName(notification.providerId),
           fields: fieldList,
-          onEdit: () => openEditSheet(notification),
+          expanded: expandedId === notification.id,
+          editorId: `notification-editor-${notification.id}`,
+          onToggle: () => toggleExpanded(notification.id),
           onDuplicate: () => duplicateNotification(notification.id),
           onDelete: () => deleteNotification(notification.id),
-          onToggleEnabled: (enabled) => updateNotification(notification.id, { enabled })
+          onToggleEnabled: (enabled) => updateNotification(notification.id, { enabled }),
+          children: /* @__PURE__ */ jsx8(
+            NotificationEditor,
+            {
+              notification,
+              editorId: `notification-editor-${notification.id}`,
+              providers,
+              templates,
+              fields: fieldList,
+              defaults,
+              onChange: (next) => updateNotification(notification.id, next)
+            }
+          )
         },
         notification.id
-      )) }),
-      sheetState.open && /* @__PURE__ */ jsx8(
-        NotificationSheet,
+      )) })
+    ] })
+  );
+}
+
+// src/admin/components/builder/FormPreview.tsx
+import {
+  Badge as Badge4,
+  Button as Button7,
+  Checkbox as Checkbox3,
+  Input as Input6,
+  Card as Card2,
+  Label as Label4,
+  RadioGroup as RadioGroup2,
+  RadioGroupItem as RadioGroupItem2,
+  Select as Select8,
+  SelectContent as SelectContent8,
+  SelectItem as SelectItem8,
+  SelectTrigger as SelectTrigger8,
+  SelectValue as SelectValue8,
+  Tabs as Tabs3,
+  TabsList as TabsList3,
+  TabsTrigger as TabsTrigger3,
+  Textarea as Textarea3
+} from "@nextlyhq/ui";
+import { Eye, Monitor, Paperclip, RotateCcw, Smartphone } from "lucide-react";
+import { useMemo as useMemo7, useState as useState9 } from "react";
+
+// src/admin/components/builder/FormSettingsTab.tsx
+import {
+  FormSection,
+  Input as Input5,
+  Label as Label3,
+  RadioGroup,
+  RadioGroupItem,
+  Select as Select7,
+  SelectContent as SelectContent7,
+  SelectItem as SelectItem7,
+  SelectTrigger as SelectTrigger7,
+  SelectValue as SelectValue7,
+  Switch as Switch3,
+  Textarea as Textarea2
+} from "@nextlyhq/ui";
+
+// src/admin/components/builder/RedirectPagePicker.tsx
+import {
+  Input as Input4,
+  Select as Select6,
+  SelectContent as SelectContent6,
+  SelectGroup,
+  SelectItem as SelectItem6,
+  SelectLabel,
+  SelectTrigger as SelectTrigger6,
+  SelectValue as SelectValue6
+} from "@nextlyhq/ui";
+import { encodeSelectParam } from "nextly/query";
+import { useEffect as useEffect4, useState as useState8 } from "react";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var PAGE_SIZE2 = 50;
+var FALLBACK_TITLE_FIELDS = ["title", "name", "label", "slug"];
+function labelFieldsFor(useAsTitle) {
+  const configured = useAsTitle?.trim();
+  if (!configured) return ["id", ...FALLBACK_TITLE_FIELDS];
+  return [
+    "id",
+    configured,
+    ...FALLBACK_TITLE_FIELDS.filter((field) => field !== configured)
+  ];
+}
+function selectFieldsFor(useAsTitle) {
+  return [...labelFieldsFor(useAsTitle), "status", "firstPublishedAt"];
+}
+function selectParam(fields) {
+  return encodeURIComponent(encodeSelectParam(fields));
+}
+function selectionKey(value, collections) {
+  const reference = parseRedirectReference(value, collections);
+  return reference ? `${reference.collection}:${reference.id}` : void 0;
+}
+function documentLabel(row, fields = labelFieldsFor()) {
+  for (const field of fields.filter((name) => name !== "id")) {
+    const candidate = row[field];
+    const text = typeof candidate === "string" ? candidate : typeof candidate === "number" && Number.isFinite(candidate) ? String(candidate) : typeof candidate === "boolean" ? String(candidate) : void 0;
+    if (text !== void 0 && text.trim()) return text;
+  }
+  return typeof row.id === "string" ? row.id : "Untitled";
+}
+async function fetchChoices(collection, query, page, meta) {
+  const search = query ? `&search=${encodeURIComponent(query)}` : "";
+  try {
+    const response = await fetch(
+      `/admin/api/collections/${collection}/entries?limit=${PAGE_SIZE2}&page=${page}&status=all&depth=0&select=${selectParam(selectFieldsFor(meta.titleField))}${search}`,
+      { credentials: "include" }
+    );
+    if (!response.ok) return null;
+    const body = await response.json();
+    return {
+      rows: (body.items ?? []).filter((row) => typeof row.id === "string").map((row) => ({
+        collection,
+        id: row.id,
+        label: documentLabel(row, labelFieldsFor(meta.titleField)),
+        reachability: documentReachability(
+          row,
+          meta.localized
+        )
+      })),
+      // Reported rather than assumed, so the control can offer the rest
+      // instead of truncating where the author cannot see it.
+      hasMore: page < (body.meta?.totalPages ?? 1)
+    };
+  } catch {
+    return null;
+  }
+}
+function mergeChoices(existing, incoming) {
+  const seen = new Set(existing.map((c) => `${c.collection}:${c.id}`));
+  const merged = [...existing];
+  for (const choice of incoming) {
+    const key = `${choice.collection}:${choice.id}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    merged.push(choice);
+  }
+  return merged;
+}
+function renderChoice(choice) {
+  return /* @__PURE__ */ jsx9(
+    SelectItem6,
+    {
+      value: `${choice.collection}:${choice.id}`,
+      children: /* @__PURE__ */ jsxs8("span", { className: "inline-flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx9("span", { children: choice.label }),
+        choice.reachability === "unreachable" && /* @__PURE__ */ jsx9("span", { className: "shrink-0 rounded-sm border px-1 py-px text-[10px] uppercase tracking-wide text-muted-foreground", children: "Draft" })
+      ] })
+    },
+    `${choice.collection}:${choice.id}`
+  );
+}
+function metadataCollections(collections, value) {
+  const stored = selectionKey(value, collections)?.split(":")[0];
+  const wanted = stored && !collections.includes(stored) ? [...collections, stored] : collections;
+  return wanted.join(",");
+}
+async function fetchCollectionMeta(collection) {
+  try {
+    const response = await fetch(`/admin/api/collections/${collection}`, {
+      credentials: "include"
+    });
+    if (!response.ok) return { titleField: void 0, localized: void 0 };
+    const body = await response.json();
+    const configured = body.admin?.useAsTitle;
+    return {
+      titleField: typeof configured === "string" && configured.trim() ? configured.trim() : void 0,
+      localized: typeof body.localized === "boolean" ? body.localized : void 0
+    };
+  } catch {
+    return { titleField: void 0, localized: void 0 };
+  }
+}
+function useTitleFields(key) {
+  const [fields, setFields] = useState8(
+    null
+  );
+  useEffect4(() => {
+    let cancelled = false;
+    const wanted = key ? key.split(",") : [];
+    setFields(null);
+    void Promise.all(
+      wanted.map(async (collection) => {
+        return [collection, await fetchCollectionMeta(collection)];
+      })
+    ).then((pairs) => {
+      if (!cancelled) setFields(Object.fromEntries(pairs));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [key]);
+  return fields;
+}
+function useChoices(key, applied, titleFields) {
+  const [choices, setChoices] = useState8(null);
+  const [failed, setFailed] = useState8([]);
+  const [hasMore, setHasMore] = useState8(false);
+  const [loading, setLoading] = useState8(false);
+  const [pages, setPages] = useState8({});
+  useEffect4(() => {
+    setPages((current) => Object.keys(current).length === 0 ? current : {});
+  }, [key, applied]);
+  useEffect4(() => {
+    if (titleFields === null) return;
+    let cancelled = false;
+    const wanted = key ? key.split(",") : [];
+    setLoading(true);
+    void Promise.all(
+      wanted.map(
+        (collection) => fetchChoices(
+          collection,
+          applied,
+          pages[collection] ?? 1,
+          titleFields[collection] ?? {
+            titleField: void 0,
+            localized: void 0
+          }
+        )
+      )
+    ).then((results) => {
+      if (cancelled) return;
+      setLoading(false);
+      setFailed(wanted.filter((_, index) => results[index] === null));
+      const loaded = results.filter(
+        (result) => result !== null
+      );
+      setHasMore(loaded.some((result) => result.hasMore));
+      const rows = loaded.flatMap((result) => result.rows);
+      const first = wanted.every((collection) => (pages[collection] ?? 1) === 1);
+      setChoices((current) => mergeChoices(first ? [] : current ?? [], rows));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [key, applied, pages, titleFields]);
+  return {
+    choices,
+    setChoices,
+    failed,
+    hasMore,
+    loading,
+    /**
+     * Advances only the collections that have more to give, and RETRIES the
+     * ones whose last page failed rather than stepping over it.
+     *
+     * Guarded on the in-flight flag: two clicks before the first resolves
+     * either batch into a double increment or cancel the pending effect, and a
+     * skipped page is then absent from a list that reports having loaded it.
+     */
+    loadMore: () => {
+      if (loading) return;
+      setPages((current) => {
+        const next = { ...current };
+        for (const collection of key ? key.split(",") : []) {
+          if (failed.includes(collection)) continue;
+          next[collection] = (current[collection] ?? 1) + 1;
+        }
+        return next;
+      });
+    },
+    /** Ask the failed collections again, without advancing anyone. */
+    retryFailed: () => {
+      if (!loading) setPages((current) => ({ ...current }));
+    }
+  };
+}
+function useSelectedChoice(selected, choices, setChoices, titleFields) {
+  const [unreadable, setUnreadable] = useState8(false);
+  useEffect4(() => {
+    if (!selected || choices === null) return;
+    const separator = selected.indexOf(":");
+    const collection = selected.slice(0, separator);
+    const id = selected.slice(separator + 1);
+    if (!id || choices.some(
+      (choice) => choice.id === id && choice.collection === collection
+    )) {
+      setUnreadable(false);
+      return;
+    }
+    let cancelled = false;
+    void (async () => {
+      try {
+        const response = await fetch(
+          `/admin/api/collections/${collection}/entries/${id}?depth=0&status=all`,
+          { credentials: "include" }
+        );
+        if (!response.ok) {
+          if (!cancelled) setUnreadable(true);
+          return;
+        }
+        const row = await response.json();
+        if (cancelled) return;
+        if (!row || typeof row.id !== "string") {
+          setUnreadable(true);
+          return;
+        }
+        setUnreadable(false);
+        setChoices((current) => [
+          {
+            collection,
+            id: row.id,
+            // The same fields the listing labels by. Labelling the recovered
+            // document differently would show one document under two names
+            // depending on whether the listing happened to reach it.
+            label: documentLabel(
+              row,
+              labelFieldsFor(titleFields?.[collection]?.titleField)
+            ),
+            reachability: documentReachability(
+              row,
+              titleFields?.[collection]?.localized
+            )
+          },
+          ...current ?? []
+        ]);
+      } catch {
+        if (!cancelled) setUnreadable(true);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [selected, choices, setChoices, titleFields]);
+  return unreadable;
+}
+function groupChoices(choices, collections) {
+  const present = [...new Set(choices.map((choice) => choice.collection))];
+  const order = [
+    ...collections.filter((name) => present.includes(name)),
+    ...present.filter((name) => !collections.includes(name))
+  ];
+  return order.map((collection) => {
+    const removed = !collections.includes(collection);
+    return {
+      collection,
+      // Named as unavailable rather than hidden: the value is still stored and
+      // the server refuses a save into a collection with no pattern, so an
+      // author needs to see what is set in order to change it.
+      label: removed ? `${collection} \u2014 no longer configured` : collection,
+      removed,
+      choices: choices.filter((choice) => choice.collection === collection)
+    };
+  });
+}
+function Options({
+  choices,
+  collections
+}) {
+  const groups = groupChoices(choices, collections);
+  if (groups.length <= 1 && !groups[0]?.removed) {
+    return /* @__PURE__ */ jsx9(Fragment4, { children: choices.map(renderChoice) });
+  }
+  return /* @__PURE__ */ jsx9(Fragment4, { children: groups.map((group) => /* @__PURE__ */ jsxs8(SelectGroup, { children: [
+    /* @__PURE__ */ jsx9(SelectLabel, { children: group.label }),
+    group.choices.map(renderChoice)
+  ] }, group.collection)) });
+}
+function Empty({
+  applied,
+  collections
+}) {
+  return /* @__PURE__ */ jsx9("p", { className: "text-[12px] text-muted-foreground", children: applied ? `No documents match \u201C${applied}\u201D.` : collections.length === 0 ? "No collection is configured as a redirect target." : `No documents to redirect to yet. Create one in ${collections.join(" or ")} first.` });
+}
+function PickerNotices({
+  failed,
+  loading,
+  onRetry,
+  unidentifiable,
+  unreadableSelection
+}) {
+  return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+    failed.length > 0 && /* @__PURE__ */ jsxs8("p", { className: "text-[12px] text-destructive", children: [
+      "Could not read ",
+      failed.join(" or "),
+      ". You may not have permission to list ",
+      failed.length > 1 ? "them" : "it",
+      ", or the request failed.",
+      " ",
+      /* @__PURE__ */ jsx9(
+        "button",
         {
-          initial: initialNotification,
-          isEditing: !!sheetState.editing,
-          providers,
-          templates,
-          fields: fieldList,
-          defaults,
-          onSave: handleSave,
-          onClose: closeSheet
+          type: "button",
+          onClick: onRetry,
+          disabled: loading,
+          className: "underline underline-offset-2 disabled:no-underline",
+          children: "Try again"
+        }
+      )
+    ] }),
+    unidentifiable && /* @__PURE__ */ jsx9("p", { className: "text-[12px] text-muted-foreground", children: "A page is saved on this form, but it cannot be identified without a configured redirect collection. Choosing a different confirmation replaces it." }),
+    unreadableSelection && /* @__PURE__ */ jsx9("p", { className: "text-[12px] text-destructive", children: "This form has a page selected that could not be read. Leave it as it is unless you mean to change it \u2014 saving a new choice replaces the stored one." })
+  ] });
+}
+function RedirectPagePicker({
+  collections,
+  value,
+  onChange
+}) {
+  const [query, setQuery] = useState8("");
+  const [applied, setApplied] = useState8("");
+  useEffect4(() => {
+    const timer = setTimeout(() => setApplied(query), 250);
+    return () => clearTimeout(timer);
+  }, [query]);
+  const titleFields = useTitleFields(metadataCollections(collections, value));
+  const {
+    choices,
+    setChoices,
+    failed,
+    hasMore,
+    loading,
+    loadMore,
+    retryFailed
+  } = useChoices(collections.join(","), applied, titleFields);
+  const selected = selectionKey(value, collections);
+  const unidentifiable = value != null && selected === void 0;
+  const selectionUnreadable = useSelectedChoice(
+    selected,
+    choices,
+    setChoices,
+    titleFields
+  );
+  if (choices === null) {
+    return /* @__PURE__ */ jsx9("p", { className: "text-[12px] text-muted-foreground", children: "Loading pages\u2026" });
+  }
+  return /* @__PURE__ */ jsxs8("div", { className: "space-y-2", children: [
+    collections.length > 0 && /* @__PURE__ */ jsx9(
+      Input4,
+      {
+        "aria-label": "Search pages",
+        value: query,
+        onChange: (event) => setQuery(event.target.value),
+        placeholder: "Search\u2026"
+      }
+    ),
+    /* @__PURE__ */ jsx9(
+      PickerNotices,
+      {
+        failed,
+        loading,
+        onRetry: retryFailed,
+        unidentifiable,
+        unreadableSelection: selectionUnreadable
+      }
+    ),
+    choices.length === 0 ? failed.length < collections.length && /* @__PURE__ */ jsx9(
+      Empty,
+      {
+        applied,
+        collections: collections.filter((name) => !failed.includes(name))
+      }
+    ) : /* @__PURE__ */ jsxs8(
+      Select6,
+      {
+        value: selected ?? "",
+        onValueChange: (next) => {
+          const separator = next.indexOf(":");
+          if (separator < 0) return onChange(void 0);
+          onChange({
+            relationTo: next.slice(0, separator),
+            value: next.slice(separator + 1)
+          });
+        },
+        children: [
+          /* @__PURE__ */ jsx9(SelectTrigger6, { "aria-label": "Redirect page", className: "w-full", children: /* @__PURE__ */ jsx9(SelectValue6, { placeholder: "Choose a page" }) }),
+          /* @__PURE__ */ jsx9(SelectContent6, { children: /* @__PURE__ */ jsx9(Options, { choices, collections }) })
+        ]
+      }
+    ),
+    hasMore && /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        onClick: loadMore,
+        disabled: loading,
+        className: "text-[12px] text-muted-foreground underline underline-offset-2 hover:text-foreground disabled:no-underline disabled:opacity-60",
+        children: loading ? "Loading\u2026" : "Load more"
+      }
+    )
+  ] });
+}
+
+// src/admin/components/builder/FormSettingsTab.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function SettingRow({
+  label,
+  description,
+  htmlFor,
+  children
+}) {
+  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-6", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx10(
+        Label3,
+        {
+          htmlFor,
+          className: "text-[13px] font-semibold text-foreground tracking-tight",
+          children: label
+        }
+      ),
+      description && /* @__PURE__ */ jsx10("p", { className: "text-[12px] text-muted-foreground leading-relaxed", children: description })
+    ] }),
+    /* @__PURE__ */ jsx10("div", { className: "shrink-0 flex items-center justify-end min-w-25", children })
+  ] });
+}
+function InheritToggle({
+  id,
+  value,
+  inherited,
+  onChange
+}) {
+  const inheritedLabel = inherited === void 0 ? "Inherit" : `Inherit (${inherited ? "on" : "off"})`;
+  return /* @__PURE__ */ jsxs9(
+    Select7,
+    {
+      value: value === void 0 ? "inherit" : value ? "on" : "off",
+      onValueChange: (selected) => onChange(selected === "inherit" ? void 0 : selected === "on"),
+      children: [
+        /* @__PURE__ */ jsx10(
+          SelectTrigger7,
+          {
+            id,
+            className: "w-40 bg-transparent border-input dark:bg-muted/50",
+            children: /* @__PURE__ */ jsx10(SelectValue7, {})
+          }
+        ),
+        /* @__PURE__ */ jsxs9(SelectContent7, { children: [
+          /* @__PURE__ */ jsx10(SelectItem7, { value: "inherit", children: inheritedLabel }),
+          /* @__PURE__ */ jsx10(SelectItem7, { value: "on", children: "On" }),
+          /* @__PURE__ */ jsx10(SelectItem7, { value: "off", children: "Off" })
+        ] })
+      ]
+    }
+  );
+}
+function hasStoredRedirectPage(settings) {
+  const value = settings.redirectPage;
+  if (typeof value === "string") return value.trim().length > 0;
+  return parseRedirectReference(value, []) !== null;
+}
+function redirectOptionState(input) {
+  const configured = input.collections !== null && input.collections.length > 0;
+  if (configured) return "ready";
+  if (input.hasStoredPage) return "stored-only";
+  return input.configFailed ? "unknown" : "hidden";
+}
+function PageRedirectOption({
+  redirectCollections,
+  configFailed,
+  settings,
+  updateSettings
+}) {
+  const state = redirectOptionState({
+    hasStoredPage: hasStoredRedirectPage(settings),
+    collections: redirectCollections,
+    configFailed
+  });
+  if (state === "hidden") return null;
+  return /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-3", children: [
+    /* @__PURE__ */ jsx10(
+      RadioGroupItem,
+      {
+        value: "relationship",
+        id: "settings-confirm-page",
+        className: "mt-0.5",
+        disabled: state !== "ready"
+      }
+    ),
+    /* @__PURE__ */ jsxs9("div", { className: "w-full space-y-2", children: [
+      /* @__PURE__ */ jsx10(Label3, { htmlFor: "settings-confirm-page", children: "Redirect to a page" }),
+      state !== "ready" && /* @__PURE__ */ jsx10("p", { className: "text-[12px] text-muted-foreground", children: configFailed ? "The redirect configuration could not be loaded, so the pages you can choose from are not listed. Reload to try again." : "No collection is configured as a redirect target right now. The page below is still saved, and stays until you choose a different confirmation." }),
+      state === "stored-only" || state === "ready" ? settings.confirmationType === "relationship" && /* @__PURE__ */ jsx10(
+        RedirectPagePicker,
+        {
+          collections: redirectCollections ?? [],
+          value: settings.redirectPage,
+          onChange: (next) => updateSettings({ redirectPage: next })
+        }
+      ) : null
+    ] })
+  ] });
+}
+function FormSettingsTab({
+  spamDefaults,
+  redirectCollections,
+  redirectConfigFailed
+}) {
+  const { settings, updateSettings } = useFormBuilder();
+  return (
+    // The measure belongs to the page's shell, not to this tab.
+    /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-10", children: [
+      /* @__PURE__ */ jsxs9(FormSection, { label: "Submission", children: [
+        /* @__PURE__ */ jsx10(
+          SettingRow,
+          {
+            label: "Submit button text",
+            description: "Label on the form's primary action button",
+            htmlFor: "settings-submit-text",
+            children: /* @__PURE__ */ jsx10(
+              Input5,
+              {
+                id: "settings-submit-text",
+                type: "text",
+                className: "w-56",
+                value: settings.submitButtonText ?? "",
+                onChange: (e) => updateSettings({ submitButtonText: e.target.value })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          SettingRow,
+          {
+            label: "Allow multiple submissions",
+            description: "When off, the same visitor (by IP) can submit this form only once. Best-effort: IP-based, so shared networks count as one visitor.",
+            htmlFor: "settings-multiple",
+            children: /* @__PURE__ */ jsx10(
+              Switch3,
+              {
+                id: "settings-multiple",
+                checked: settings.allowMultipleSubmissions ?? true,
+                onCheckedChange: (checked) => updateSettings({ allowMultipleSubmissions: checked })
+              }
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx10(FormSection, { label: "After submission", children: /* @__PURE__ */ jsxs9(
+        RadioGroup,
+        {
+          value: settings.confirmationType ?? "message",
+          onValueChange: (value) => updateSettings({
+            confirmationType: value
+          }),
+          className: "flex flex-col gap-3",
+          children: [
+            /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx10(
+                RadioGroupItem,
+                {
+                  value: "message",
+                  id: "settings-confirm-message",
+                  className: "mt-0.5"
+                }
+              ),
+              /* @__PURE__ */ jsxs9("div", { className: "w-full space-y-2", children: [
+                /* @__PURE__ */ jsx10(Label3, { htmlFor: "settings-confirm-message", children: "Show a message" }),
+                (settings.confirmationType ?? "message") === "message" && /* @__PURE__ */ jsx10(
+                  Textarea2,
+                  {
+                    "aria-label": "Success message",
+                    value: settings.successMessage ?? "",
+                    onChange: (e) => updateSettings({ successMessage: e.target.value }),
+                    rows: 3,
+                    placeholder: "Thank you for your submission!"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-3", children: [
+              /* @__PURE__ */ jsx10(
+                RadioGroupItem,
+                {
+                  value: "redirect",
+                  id: "settings-confirm-redirect",
+                  className: "mt-0.5"
+                }
+              ),
+              /* @__PURE__ */ jsxs9("div", { className: "w-full space-y-2", children: [
+                /* @__PURE__ */ jsx10(Label3, { htmlFor: "settings-confirm-redirect", children: "Redirect to a URL" }),
+                settings.confirmationType === "redirect" && /* @__PURE__ */ jsx10(
+                  Input5,
+                  {
+                    "aria-label": "Redirect URL",
+                    type: "url",
+                    value: settings.redirectUrl ?? "",
+                    onChange: (e) => updateSettings({
+                      redirectUrl: e.target.value || void 0
+                    }),
+                    placeholder: "https://example.com/thanks"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx10(
+              PageRedirectOption,
+              {
+                redirectCollections,
+                configFailed: redirectConfigFailed,
+                settings,
+                updateSettings
+              }
+            )
+          ]
         }
-      )
+      ) }),
+      /* @__PURE__ */ jsxs9(FormSection, { label: "Spam protection", children: [
+        /* @__PURE__ */ jsx10(
+          SettingRow,
+          {
+            label: "Honeypot",
+            description: "Invisible trap field for bots. Inherits the plugin default unless overridden here.",
+            htmlFor: "settings-honeypot",
+            children: /* @__PURE__ */ jsx10(
+              InheritToggle,
+              {
+                id: "settings-honeypot",
+                value: settings.honeypotEnabled,
+                inherited: spamDefaults?.honeypot,
+                onChange: (honeypotEnabled) => updateSettings({ honeypotEnabled })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx10(
+          SettingRow,
+          {
+            label: "reCAPTCHA",
+            description: "Challenge-based bot check. Inherits the plugin default unless overridden here.",
+            htmlFor: "settings-captcha",
+            children: /* @__PURE__ */ jsx10(
+              InheritToggle,
+              {
+                id: "settings-captcha",
+                value: settings.captchaEnabled,
+                inherited: spamDefaults?.recaptchaEnabled,
+                onChange: (captchaEnabled) => updateSettings({ captchaEnabled })
+              }
+            )
+          }
+        ),
+        settings.captchaEnabled === true && /* @__PURE__ */ jsx10(
+          SettingRow,
+          {
+            label: "reCAPTCHA site key",
+            description: "The client-facing site key for this form",
+            htmlFor: "settings-captcha-key",
+            children: /* @__PURE__ */ jsx10(
+              Input5,
+              {
+                id: "settings-captcha-key",
+                type: "text",
+                className: "w-full font-mono sm:w-72",
+                value: settings.captchaSiteKey ?? "",
+                onChange: (e) => updateSettings({
+                  captchaSiteKey: e.target.value || void 0
+                })
+              }
+            )
+          }
+        )
+      ] })
     ] })
   );
 }
 
 // src/admin/components/builder/FormPreview.tsx
-import {
-  Badge as Badge4,
-  Button as Button7,
-  Checkbox as Checkbox3,
-  Input as Input4,
-  Label as Label3,
-  RadioGroup,
-  RadioGroupItem,
-  Select as Select6,
-  SelectContent as SelectContent6,
-  SelectItem as SelectItem6,
-  SelectTrigger as SelectTrigger6,
-  SelectValue as SelectValue6,
-  Tabs as Tabs3,
-  TabsList as TabsList3,
-  TabsTrigger as TabsTrigger3,
-  Textarea as Textarea2
-} from "@nextlyhq/ui";
-import { Eye, Monitor, Paperclip, RotateCcw, Smartphone } from "lucide-react";
-import { useMemo as useMemo7, useState as useState8 } from "react";
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function PreviewFieldInput({
   field,
   value,
@@ -3465,8 +4136,8 @@ function PreviewFieldInput({
   const id = `preview-${field.name}`;
   switch (field.type) {
     case "textarea":
-      return /* @__PURE__ */ jsx9(
-        Textarea2,
+      return /* @__PURE__ */ jsx11(
+        Textarea3,
         {
           id,
           value: typeof value === "string" ? value : "",
@@ -3476,7 +4147,7 @@ function PreviewFieldInput({
         }
       );
     case "checkbox":
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx11(
         Checkbox3,
         {
           id,
@@ -3486,49 +4157,49 @@ function PreviewFieldInput({
       );
     case "select": {
       const options = "options" in field ? field.options ?? [] : [];
-      return /* @__PURE__ */ jsxs8(
-        Select6,
+      return /* @__PURE__ */ jsxs10(
+        Select8,
         {
           value: typeof value === "string" ? value : "",
           onValueChange: onChange,
           children: [
-            /* @__PURE__ */ jsx9(
-              SelectTrigger6,
+            /* @__PURE__ */ jsx11(
+              SelectTrigger8,
               {
                 id,
                 className: "w-full bg-transparent border-input dark:bg-muted/50",
-                children: /* @__PURE__ */ jsx9(SelectValue6, { placeholder: field.placeholder ?? "Select\u2026" })
+                children: /* @__PURE__ */ jsx11(SelectValue8, { placeholder: field.placeholder ?? "Select\u2026" })
               }
             ),
-            /* @__PURE__ */ jsx9(SelectContent6, { children: options.map((option) => /* @__PURE__ */ jsx9(SelectItem6, { value: option.value, children: option.label }, option.value)) })
+            /* @__PURE__ */ jsx11(SelectContent8, { children: options.map((option) => /* @__PURE__ */ jsx11(SelectItem8, { value: option.value, children: option.label }, option.value)) })
           ]
         }
       );
     }
     case "radio": {
       const options = "options" in field ? field.options ?? [] : [];
-      return /* @__PURE__ */ jsx9(
-        RadioGroup,
+      return /* @__PURE__ */ jsx11(
+        RadioGroup2,
         {
           value: typeof value === "string" ? value : "",
           onValueChange: onChange,
           className: "flex flex-col gap-2",
-          children: options.map((option) => /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx9(
-              RadioGroupItem,
+          children: options.map((option) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx11(
+              RadioGroupItem2,
               {
                 value: option.value,
                 id: `${id}-${option.value}`
               }
             ),
-            /* @__PURE__ */ jsx9(Label3, { htmlFor: `${id}-${option.value}`, className: "font-normal", children: option.label })
+            /* @__PURE__ */ jsx11(Label4, { htmlFor: `${id}-${option.value}`, className: "font-normal", children: option.label })
           ] }, option.value))
         }
       );
     }
     case "number":
-      return /* @__PURE__ */ jsx9(
-        Input4,
+      return /* @__PURE__ */ jsx11(
+        Input6,
         {
           id,
           type: "number",
@@ -3539,8 +4210,8 @@ function PreviewFieldInput({
       );
     case "date":
     case "time":
-      return /* @__PURE__ */ jsx9(
-        Input4,
+      return /* @__PURE__ */ jsx11(
+        Input6,
         {
           id,
           type: field.type,
@@ -3549,13 +4220,13 @@ function PreviewFieldInput({
         }
       );
     case "file":
-      return /* @__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: [
-        /* @__PURE__ */ jsx9(Paperclip, { className: "h-4 w-4", "aria-hidden": "true" }),
+      return /* @__PURE__ */ jsxs10("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: [
+        /* @__PURE__ */ jsx11(Paperclip, { className: "h-4 w-4", "aria-hidden": "true" }),
         "File upload (disabled in preview)"
       ] });
     default:
-      return /* @__PURE__ */ jsx9(
-        Input4,
+      return /* @__PURE__ */ jsx11(
+        Input6,
         {
           id,
           type: field.type === "email" ? "email" : field.type === "url" ? "url" : field.type === "phone" ? "tel" : "text",
@@ -3567,25 +4238,43 @@ function PreviewFieldInput({
   }
 }
 function PluginFieldPreview({ field }) {
-  return /* @__PURE__ */ jsxs8("div", { className: "space-y-1.5", children: [
-    /* @__PURE__ */ jsxs8(Label3, { htmlFor: `preview-${field.name}`, children: [
+  return /* @__PURE__ */ jsxs10("div", { className: "space-y-1.5", children: [
+    /* @__PURE__ */ jsxs10(Label4, { htmlFor: `preview-${field.name}`, children: [
       field.label || field.name,
-      field.required && /* @__PURE__ */ jsx9("span", { className: "ml-1 text-destructive", children: "*" })
+      field.required && /* @__PURE__ */ jsx11("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: [
+    /* @__PURE__ */ jsxs10("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 })
+    field.helpText && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground", children: field.helpText })
   ] });
 }
+function Confirmation({
+  settings
+}) {
+  const panel = "border border-border bg-muted/40 p-4 text-sm text-foreground";
+  if (settings.confirmationType === "redirect") {
+    return /* @__PURE__ */ jsxs10("p", { className: panel, children: [
+      "The visitor would now be redirected to",
+      " ",
+      /* @__PURE__ */ jsx11("span", { className: "font-mono", children: settings.redirectUrl || "(no redirect URL set)" }),
+      "."
+    ] });
+  }
+  if (settings.confirmationType === "relationship") {
+    const named = hasStoredRedirectPage(settings);
+    return /* @__PURE__ */ jsx11("p", { className: panel, children: named ? "The visitor would now be redirected to the linked page. Its URL is built when the form is submitted, from the pattern the site configured for that collection." : "No page is selected yet, so this form has no destination. Choose one under Settings, or pick a different confirmation." });
+  }
+  return /* @__PURE__ */ jsx11("p", { className: panel, children: settings.successMessage || "Thank you for your submission!" });
+}
 function FormPreview({ fields, formData }) {
   const { settings } = useFormBuilder();
-  const [values, setValues] = useState8({});
-  const [device, setDevice] = useState8("desktop");
-  const [confirmed, setConfirmed] = useState8(false);
-  const [missingRequired, setMissingRequired] = useState8(
+  const [values, setValues] = useState9({});
+  const [device, setDevice] = useState9("desktop");
+  const [confirmed, setConfirmed] = useState9(false);
+  const [missingRequired, setMissingRequired] = useState9(
     /* @__PURE__ */ new Set()
   );
   const visibleFields = useMemo7(() => {
@@ -3621,362 +4310,121 @@ function FormPreview({ fields, formData }) {
     setMissingRequired(missing);
     if (missing.size === 0) setConfirmed(true);
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
-      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-        /* @__PURE__ */ jsx9(Eye, { className: "h-4 w-4", "aria-hidden": "true" }),
-        "Preview \u2014 a simulation of this form. Nothing here submits anywhere."
-      ] }),
-      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx9(
-          Tabs3,
-          {
-            value: device,
-            onValueChange: (value) => setDevice(value),
-            children: /* @__PURE__ */ jsxs8(TabsList3, { children: [
-              /* @__PURE__ */ jsxs8(TabsTrigger3, { value: "desktop", className: "gap-1.5", children: [
-                /* @__PURE__ */ jsx9(Monitor, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
-                "Desktop"
-              ] }),
-              /* @__PURE__ */ jsxs8(TabsTrigger3, { value: "mobile", className: "gap-1.5", children: [
-                /* @__PURE__ */ jsx9(Smartphone, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
-                "Mobile"
-              ] })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsxs8(Button7, { type: "button", variant: "outline", size: "sm", onClick: reset, children: [
-          /* @__PURE__ */ jsx9(RotateCcw, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
-          "Reset"
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx9("div", { className: "flex justify-center border border-border bg-muted/30 p-6", children: /* @__PURE__ */ jsxs8(
-      "div",
-      {
-        className: `w-full space-y-5 border border-border bg-background p-6 ${device === "mobile" ? "max-w-95" : "max-w-2xl"}`,
-        children: [
-          /* @__PURE__ */ jsxs8("div", { children: [
-            /* @__PURE__ */ jsx9("h3", { className: "text-lg font-semibold text-foreground", children: formData?.name || "Untitled form" }),
-            formData?.description && /* @__PURE__ */ jsx9("p", { className: "mt-1 text-sm text-muted-foreground", children: formData.description })
-          ] }),
-          confirmed ? /* @__PURE__ */ jsxs8("div", { className: "space-y-4", children: [
-            settings.confirmationType === "redirect" ? /* @__PURE__ */ jsxs8("p", { className: "border border-border bg-muted/40 p-4 text-sm text-foreground", children: [
-              "The visitor would now be redirected to",
-              " ",
-              /* @__PURE__ */ jsx9("span", { className: "font-mono", children: settings.redirectUrl || "(no redirect URL set)" }),
-              "."
-            ] }) : /* @__PURE__ */ jsx9("p", { className: "border border-border bg-muted/40 p-4 text-sm text-foreground", children: settings.successMessage || "Thank you for your submission!" }),
-            /* @__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) => !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 }))
-                  }
-                ),
-                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,
-              {
-                type: "button",
-                onClick: simulateSubmit,
-                disabled: visibleFields.length === 0,
-                children: settings.submitButtonText || "Submit"
-              }
-            )
-          ] }),
-          hiddenCount > 0 && !confirmed && /* @__PURE__ */ jsxs8("p", { className: "text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsx9(
-              Badge4,
-              {
-                variant: "outline",
-                className: "mr-1.5 rounded-none border-border px-1 py-0 text-[10px]",
-                children: hiddenCount
-              }
-            ),
-            "hidden ",
-            hiddenCount === 1 ? "field" : "fields",
-            " will be submitted invisibly."
-          ] })
-        ]
-      }
-    ) })
-  ] });
-}
-
-// src/admin/components/builder/FormSettingsTab.tsx
-import {
-  Input as Input5,
-  Label as Label4,
-  RadioGroup as RadioGroup2,
-  RadioGroupItem as RadioGroupItem2,
-  Select as Select7,
-  SelectContent as SelectContent7,
-  SelectItem as SelectItem7,
-  SelectTrigger as SelectTrigger7,
-  SelectValue as SelectValue7,
-  Switch as Switch3,
-  Textarea as Textarea3
-} from "@nextlyhq/ui";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-function SettingRow({
-  label,
-  description,
-  htmlFor,
-  children
-}) {
-  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-6 py-2", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx10(
-        Label4,
-        {
-          htmlFor,
-          className: "text-[13px] font-semibold text-foreground tracking-tight",
-          children: label
-        }
-      ),
-      description && /* @__PURE__ */ jsx10("p", { className: "text-[12px] text-muted-foreground leading-relaxed", children: description })
-    ] }),
-    /* @__PURE__ */ jsx10("div", { className: "shrink-0 flex items-center justify-end min-w-25", children })
-  ] });
-}
-function SectionHeading({ children }) {
-  return /* @__PURE__ */ jsx10("div", { className: "border-b border-border pb-3", children: /* @__PURE__ */ jsx10("h3", { className: "text-[16px] font-bold text-foreground tracking-tight", children }) });
-}
-function InheritToggle({
-  id,
-  value,
-  inherited,
-  onChange
-}) {
-  const inheritedLabel = inherited === void 0 ? "Inherit" : `Inherit (${inherited ? "on" : "off"})`;
-  return /* @__PURE__ */ jsxs9(
-    Select7,
-    {
-      value: value === void 0 ? "inherit" : value ? "on" : "off",
-      onValueChange: (selected) => onChange(selected === "inherit" ? void 0 : selected === "on"),
-      children: [
-        /* @__PURE__ */ jsx10(
-          SelectTrigger7,
-          {
-            id,
-            className: "w-40 bg-transparent border-input dark:bg-muted/50",
-            children: /* @__PURE__ */ jsx10(SelectValue7, {})
-          }
-        ),
-        /* @__PURE__ */ jsxs9(SelectContent7, { children: [
-          /* @__PURE__ */ jsx10(SelectItem7, { value: "inherit", children: inheritedLabel }),
-          /* @__PURE__ */ jsx10(SelectItem7, { value: "on", children: "On" }),
-          /* @__PURE__ */ jsx10(SelectItem7, { value: "off", children: "Off" })
-        ] })
-      ]
-    }
-  );
-}
-function FormSettingsTab({ spamDefaults }) {
-  const { settings, updateSettings } = useFormBuilder();
   return (
-    // The measure belongs to `FormLayout` now, not to this tab.
-    /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-10", children: [
-      /* @__PURE__ */ jsxs9("section", { children: [
-        /* @__PURE__ */ jsx10(SectionHeading, { children: "Submission" }),
-        /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-1 pt-2", children: [
-          /* @__PURE__ */ jsx10(
-            SettingRow,
+    // One surface for the whole tab. The chrome and the stage are the same
+    // panel seen twice, and leaving the chrome unbacked put it on the page's
+    // grey while the stage below it had a frame — reading as a control strip
+    // that had lost its box.
+    /* @__PURE__ */ jsxs10(Card2, { className: "overflow-hidden p-0", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-3 border-b border-border px-6 py-4 sm:flex-row sm:items-center sm:justify-between", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx11(Eye, { className: "h-4 w-4", "aria-hidden": "true" }),
+          "Preview \u2014 a simulation of this form. Nothing here submits anywhere."
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [
+          /* @__PURE__ */ jsx11(
+            Tabs3,
             {
-              label: "Submit button text",
-              description: "Label on the form's primary action button",
-              htmlFor: "settings-submit-text",
-              children: /* @__PURE__ */ jsx10(
-                Input5,
-                {
-                  id: "settings-submit-text",
-                  type: "text",
-                  className: "w-56",
-                  value: settings.submitButtonText ?? "",
-                  onChange: (e) => updateSettings({ submitButtonText: e.target.value })
-                }
-              )
+              value: device,
+              onValueChange: (value) => setDevice(value),
+              children: /* @__PURE__ */ jsxs10(TabsList3, { children: [
+                /* @__PURE__ */ jsxs10(TabsTrigger3, { value: "desktop", className: "gap-1.5", children: [
+                  /* @__PURE__ */ jsx11(Monitor, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+                  "Desktop"
+                ] }),
+                /* @__PURE__ */ jsxs10(TabsTrigger3, { value: "mobile", className: "gap-1.5", children: [
+                  /* @__PURE__ */ jsx11(Smartphone, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+                  "Mobile"
+                ] })
+              ] })
             }
           ),
-          /* @__PURE__ */ jsx10(
-            SettingRow,
-            {
-              label: "Allow multiple submissions",
-              description: "When off, the same visitor (by IP) can submit this form only once. Best-effort: IP-based, so shared networks count as one visitor.",
-              htmlFor: "settings-multiple",
-              children: /* @__PURE__ */ jsx10(
-                Switch3,
-                {
-                  id: "settings-multiple",
-                  checked: settings.allowMultipleSubmissions ?? true,
-                  onCheckedChange: (checked) => updateSettings({ allowMultipleSubmissions: checked })
-                }
-              )
-            }
-          )
+          /* @__PURE__ */ jsxs10(Button7, { type: "button", variant: "outline", size: "sm", onClick: reset, children: [
+            /* @__PURE__ */ jsx11(RotateCcw, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+            "Reset"
+          ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs9("section", { children: [
-        /* @__PURE__ */ jsx10(SectionHeading, { children: "After submission" }),
-        /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-4 pt-4", children: [
-          settings.confirmationType === "relationship" && /* @__PURE__ */ jsx10("p", { className: "border border-border bg-muted/40 p-3 text-sm text-muted-foreground", children: "This form redirects to a linked page (configured via the API). Picking an option below replaces that behavior." }),
-          /* @__PURE__ */ jsxs9(
-            RadioGroup2,
-            {
-              value: settings.confirmationType ?? "message",
-              onValueChange: (value) => updateSettings({
-                confirmationType: value
-              }),
-              className: "flex flex-col gap-3",
-              children: [
-                /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-3", children: [
-                  /* @__PURE__ */ jsx10(
-                    RadioGroupItem2,
-                    {
-                      value: "message",
-                      id: "settings-confirm-message",
-                      className: "mt-0.5"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs9("div", { className: "w-full space-y-2", children: [
-                    /* @__PURE__ */ jsx10(Label4, { htmlFor: "settings-confirm-message", children: "Show a message" }),
-                    (settings.confirmationType ?? "message") === "message" && /* @__PURE__ */ jsx10(
-                      Textarea3,
+      /* @__PURE__ */ jsx11("div", { className: "flex justify-center bg-muted/30 p-6", children: /* @__PURE__ */ jsxs10(
+        "div",
+        {
+          className: `w-full space-y-5 border border-border bg-background p-6 ${device === "mobile" ? "max-w-95" : "max-w-2xl"}`,
+          children: [
+            /* @__PURE__ */ jsxs10("div", { children: [
+              /* @__PURE__ */ jsx11("h3", { className: "text-lg font-semibold text-foreground", children: formData?.name || "Untitled form" }),
+              formData?.description && /* @__PURE__ */ jsx11("p", { className: "mt-1 text-sm text-muted-foreground", children: formData.description })
+            ] }),
+            confirmed ? /* @__PURE__ */ jsxs10("div", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsx11(Confirmation, { settings }),
+              /* @__PURE__ */ jsx11(Button7, { type: "button", variant: "outline", onClick: reset, children: "Fill again" })
+            ] }) : /* @__PURE__ */ jsxs10(Fragment5, { children: [
+              visibleFields.length === 0 && /* @__PURE__ */ jsx11("p", { className: "text-sm text-muted-foreground", children: "No visible fields \u2014 add fields in the Builder tab." }),
+              visibleFields.map(
+                (field) => !isKnownFormField(field) ? /* @__PURE__ */ jsx11(PluginFieldPreview, { field }, field.name) : /* @__PURE__ */ jsxs10("div", { className: "space-y-1.5", children: [
+                  field.type !== "checkbox" && /* @__PURE__ */ jsxs10(Label4, { htmlFor: `preview-${field.name}`, children: [
+                    field.label || field.name,
+                    field.required && /* @__PURE__ */ jsx11("span", { className: "ml-1 text-destructive", children: "*" })
+                  ] }),
+                  field.type === "checkbox" ? /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx11(
+                      PreviewFieldInput,
                       {
-                        "aria-label": "Success message",
-                        value: settings.successMessage ?? "",
-                        onChange: (e) => updateSettings({ successMessage: e.target.value }),
-                        rows: 3,
-                        placeholder: "Thank you for your submission!"
+                        field,
+                        value: values[field.name],
+                        onChange: (value) => setValues((prev) => ({
+                          ...prev,
+                          [field.name]: value
+                        }))
                       }
-                    )
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-3", children: [
-                  /* @__PURE__ */ jsx10(
-                    RadioGroupItem2,
+                    ),
+                    /* @__PURE__ */ jsxs10(Label4, { htmlFor: `preview-${field.name}`, children: [
+                      field.label || field.name,
+                      field.required && /* @__PURE__ */ jsx11("span", { className: "ml-1 text-destructive", children: "*" })
+                    ] })
+                  ] }) : /* @__PURE__ */ jsx11(
+                    PreviewFieldInput,
                     {
-                      value: "redirect",
-                      id: "settings-confirm-redirect",
-                      className: "mt-0.5"
+                      field,
+                      value: values[field.name],
+                      onChange: (value) => setValues((prev) => ({ ...prev, [field.name]: value }))
                     }
                   ),
-                  /* @__PURE__ */ jsxs9("div", { className: "w-full space-y-2", children: [
-                    /* @__PURE__ */ jsx10(Label4, { htmlFor: "settings-confirm-redirect", children: "Redirect to a URL" }),
-                    settings.confirmationType === "redirect" && /* @__PURE__ */ jsx10(
-                      Input5,
-                      {
-                        "aria-label": "Redirect URL",
-                        type: "url",
-                        value: settings.redirectUrl ?? "",
-                        onChange: (e) => updateSettings({
-                          redirectUrl: e.target.value || void 0
-                        }),
-                        placeholder: "https://example.com/thanks"
-                      }
-                    )
-                  ] })
-                ] })
-              ]
-            }
-          )
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs9("section", { children: [
-        /* @__PURE__ */ jsx10(SectionHeading, { children: "Spam protection" }),
-        /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-1 pt-2", children: [
-          /* @__PURE__ */ jsx10(
-            SettingRow,
-            {
-              label: "Honeypot",
-              description: "Invisible trap field for bots. Inherits the plugin default unless overridden here.",
-              htmlFor: "settings-honeypot",
-              children: /* @__PURE__ */ jsx10(
-                InheritToggle,
-                {
-                  id: "settings-honeypot",
-                  value: settings.honeypotEnabled,
-                  inherited: spamDefaults?.honeypot,
-                  onChange: (honeypotEnabled) => updateSettings({ honeypotEnabled })
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx10(
-            SettingRow,
-            {
-              label: "reCAPTCHA",
-              description: "Challenge-based bot check. Inherits the plugin default unless overridden here.",
-              htmlFor: "settings-captcha",
-              children: /* @__PURE__ */ jsx10(
-                InheritToggle,
+                  field.helpText && /* @__PURE__ */ jsx11("p", { className: "text-xs text-muted-foreground", children: field.helpText }),
+                  missingRequired.has(field.name) && /* @__PURE__ */ jsx11("p", { className: "text-xs text-destructive", children: "This field is required." })
+                ] }, field.name)
+              ),
+              /* @__PURE__ */ jsx11(
+                Button7,
                 {
-                  id: "settings-captcha",
-                  value: settings.captchaEnabled,
-                  inherited: spamDefaults?.recaptchaEnabled,
-                  onChange: (captchaEnabled) => updateSettings({ captchaEnabled })
+                  type: "button",
+                  onClick: simulateSubmit,
+                  disabled: visibleFields.length === 0,
+                  children: settings.submitButtonText || "Submit"
                 }
               )
-            }
-          ),
-          settings.captchaEnabled === true && /* @__PURE__ */ jsx10(
-            SettingRow,
-            {
-              label: "reCAPTCHA site key",
-              description: "The client-facing site key for this form",
-              htmlFor: "settings-captcha-key",
-              children: /* @__PURE__ */ jsx10(
-                Input5,
+            ] }),
+            hiddenCount > 0 && !confirmed && /* @__PURE__ */ jsxs10("p", { className: "text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsx11(
+                Badge4,
                 {
-                  id: "settings-captcha-key",
-                  type: "text",
-                  className: "w-72 font-mono",
-                  value: settings.captchaSiteKey ?? "",
-                  onChange: (e) => updateSettings({
-                    captchaSiteKey: e.target.value || void 0
-                  })
+                  variant: "outline",
+                  className: "mr-1.5 rounded-none border-border px-1 py-0 text-[10px]",
+                  children: hiddenCount
                 }
-              )
-            }
-          )
-        ] })
-      ] })
+              ),
+              "hidden ",
+              hiddenCount === 1 ? "field" : "fields",
+              " will be submitted invisibly."
+            ] })
+          ]
+        }
+      ) })
     ] })
   );
 }
 
 // src/admin/FormBuilderView.tsx
-import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function slugify(text) {
   return text.toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "-").replace(/^-+|-+$/g, "");
 }
@@ -4003,15 +4451,17 @@ function FormBuilderViewInner({
     markAsSaved
   } = useFormBuilder();
   const queryClient = useQueryClient();
-  const [isSaving, setIsSaving] = useState9(false);
-  const [saveError, setSaveError] = useState9(null);
-  const [enabledTypes, setEnabledTypes] = useState9(null);
-  const [disabledFieldTypes, setDisabledFieldTypes] = useState9(
+  const [isSaving, setIsSaving] = useState10(false);
+  const [saveError, setSaveError] = useState10(null);
+  const [enabledTypes, setEnabledTypes] = useState10(null);
+  const [disabledFieldTypes, setDisabledFieldTypes] = useState10(
     () => /* @__PURE__ */ new Set()
   );
-  const [notificationDefaults, setNotificationDefaults] = useState9(null);
-  const [spamDefaults, setSpamDefaults] = useState9(null);
-  useEffect4(() => {
+  const [notificationDefaults, setNotificationDefaults] = useState10(null);
+  const [spamDefaults, setSpamDefaults] = useState10(null);
+  const [redirectCollections, setRedirectCollections] = useState10(null);
+  const [redirectConfigFailed, setRedirectConfigFailed] = useState10(false);
+  useEffect5(() => {
     let cancelled = false;
     const allTypes = FORM_FIELD_TYPE_CATALOG3.map((entry) => entry.type);
     void fetch(
@@ -4030,19 +4480,23 @@ function FormBuilderViewInner({
         );
         setNotificationDefaults(config?.notifications ?? {});
         setSpamDefaults(config?.spamProtection ?? {});
+        setRedirectConfigFailed(config === null);
+        setRedirectCollections(config?.redirectCollections ?? []);
       }
     ).catch(() => {
       if (cancelled) return;
       setEnabledTypes(allTypes);
       setNotificationDefaults({});
       setSpamDefaults({});
+      setRedirectConfigFailed(true);
+      setRedirectCollections([]);
     });
     return () => {
       cancelled = true;
     };
   }, []);
   const seededRef = useRef2(false);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!isCreating || notificationDefaults === null || seededRef.current) {
       return;
     }
@@ -4071,6 +4525,11 @@ function FormBuilderViewInner({
       toast.error("Please add at least one field to the form");
       return;
     }
+    const blocked = notificationsBlockingSave(notifications);
+    if (blocked) {
+      toast.error(blocked);
+      return;
+    }
     const { id: _id, ...formDataWithoutId } = formData;
     const saveData = {
       ...formDataWithoutId,
@@ -4093,9 +4552,11 @@ function FormBuilderViewInner({
         body: JSON.stringify(saveData)
       });
       if (!response.ok) {
-        const err = await response.json().catch(() => ({}));
         throw new Error(
-          err.error?.message ?? `Failed to save form: ${response.statusText}`
+          saveErrorMessage(
+            await response.json().catch(() => ({})),
+            response.statusText
+          )
         );
       }
       const result = await response.json();
@@ -4165,103 +4626,119 @@ function FormBuilderViewInner({
       count: notifications.length > 0 ? notifications.length : null
     }
   ];
-  return /* @__PURE__ */ jsxs10(FormLayout, { children: [
-    /* @__PURE__ */ jsxs10("div", { className: "mb-6", children: [
-      /* @__PURE__ */ jsx11("h1", { className: "text-2xl font-semibold text-foreground tracking-tight", children: isCreating ? "Create Form" : "Edit Form" }),
-      /* @__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." })
+  return /* @__PURE__ */ jsxs11(Fragment6, { children: [
+    /* @__PURE__ */ jsxs11("div", { className: "mb-6", children: [
+      /* @__PURE__ */ jsx12("h1", { className: "text-2xl font-semibold text-foreground tracking-tight", children: isCreating ? "Create Form" : "Edit Form" }),
+      /* @__PURE__ */ jsx12("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: "border-b border-border space-y-4 pb-4 mb-6", children: [
-      /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap gap-4", children: [
-        /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsxs11(Card3, { className: "mb-6 px-6 pt-5 pb-6", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap gap-4", children: [
+        /* @__PURE__ */ jsx12(
           FieldShell2,
           {
             label: "Form Name",
             htmlFor: "form-name",
             className: "flex-1 min-w-[200px]",
-            children: /* @__PURE__ */ jsx11(
-              Input6,
+            children: /* @__PURE__ */ jsx12(
+              Input7,
               {
                 type: "text",
                 value: formData.name || "",
                 onChange: (e) => handleNameChange(e.target.value),
-                placeholder: "e.g., Contact Form",
-                className: "bg-transparent"
+                placeholder: "e.g., Contact Form"
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           FieldShell2,
           {
             label: "Slug",
             htmlFor: "form-slug",
             className: "flex-1 min-w-[160px]",
-            children: /* @__PURE__ */ jsx11(
-              Input6,
+            children: /* @__PURE__ */ jsx12(
+              Input7,
               {
                 type: "text",
                 value: formData.slug || "",
                 onChange: (e) => updateFormData({ slug: e.target.value }),
                 placeholder: "e.g., contact-form",
-                className: "bg-transparent placeholder:text-muted-foreground"
+                className: "placeholder:text-muted-foreground"
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx11("div", { className: "w-36", children: /* @__PURE__ */ jsx11(FieldShell2, { label: "Status", htmlFor: "form-status", children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs10(
-          Select8,
+        /* @__PURE__ */ jsx12("div", { className: "w-36", children: /* @__PURE__ */ jsx12(FieldShell2, { label: "Status", htmlFor: "form-status", children: ({ id, describedBy, invalid }) => /* @__PURE__ */ jsxs11(
+          Select9,
           {
             value: formData.status || "draft",
             onValueChange: (value) => updateFormData({
               status: value
             }),
             children: [
-              /* @__PURE__ */ jsx11(
-                SelectTrigger8,
+              /* @__PURE__ */ jsx12(
+                SelectTrigger9,
                 {
                   id,
                   "aria-describedby": describedBy,
                   "aria-invalid": invalid,
-                  className: "bg-transparent",
-                  children: /* @__PURE__ */ jsx11(SelectValue8, { placeholder: "Status" })
+                  children: /* @__PURE__ */ jsx12(SelectValue9, { placeholder: "Status" })
                 }
               ),
-              /* @__PURE__ */ jsxs10(SelectContent8, { children: [
-                /* @__PURE__ */ jsx11(SelectItem8, { value: "draft", children: "Draft" }),
-                /* @__PURE__ */ jsx11(SelectItem8, { value: "published", children: "Published" }),
-                /* @__PURE__ */ jsx11(SelectItem8, { value: "closed", children: "Closed" })
+              /* @__PURE__ */ jsxs11(SelectContent9, { children: [
+                /* @__PURE__ */ jsx12(SelectItem9, { value: "draft", children: "Draft" }),
+                /* @__PURE__ */ jsx12(SelectItem9, { value: "published", children: "Published" }),
+                /* @__PURE__ */ jsx12(SelectItem9, { value: "closed", children: "Closed" })
               ] })
             ]
           }
         ) }) })
       ] }),
-      /* @__PURE__ */ jsx11(
-        Tabs4,
+      formData.status === "closed" && /* @__PURE__ */ jsx12("div", { className: "mt-4", children: /* @__PURE__ */ jsx12(
+        FieldShell2,
         {
-          value: activeTab,
-          onValueChange: (v) => setActiveTab(v),
-          children: /* @__PURE__ */ jsx11(TabsList4, { className: "bg-transparent justify-start gap-0 max-w-full overflow-x-auto", children: mainTabs.map((tab) => /* @__PURE__ */ jsxs10(
-            TabsTrigger4,
+          label: "Message for visitors",
+          htmlFor: "form-closed-message",
+          width: "full",
+          description: "Shown to anyone who reaches this form now that it is closed. Left empty, they are told only that it is not accepting submissions.",
+          children: /* @__PURE__ */ jsx12(
+            Textarea4,
             {
-              value: tab.value,
-              className: "shrink-0 whitespace-nowrap",
-              children: [
-                tab.label,
-                tab.count !== null && /* @__PURE__ */ jsx11(
-                  "span",
-                  {
-                    className: `inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-semibold rounded-sm ml-2 transition-colors ${activeTab === tab.value ? "bg-primary/5 text-primary" : "bg-primary/5 text-muted-foreground"}`,
-                    children: tab.count
-                  }
-                )
-              ]
-            },
-            tab.value
-          )) })
+              value: formData.closedMessage ?? "",
+              onChange: (e) => updateFormData({ closedMessage: e.target.value }),
+              placeholder: "e.g., Applications closed on 31 March. Thank you to everyone who applied.",
+              rows: 3
+            }
+          )
         }
-      )
+      ) })
     ] }),
-    activeTab === "builder" && /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12("div", { className: "border-b border-border mb-6", children: /* @__PURE__ */ jsx12(
+      Tabs4,
+      {
+        value: activeTab,
+        onValueChange: (v) => setActiveTab(v),
+        children: /* @__PURE__ */ jsx12(TabsList4, { scrollable: true, className: "bg-transparent justify-start gap-0", children: mainTabs.map((tab) => /* @__PURE__ */ jsxs11(
+          TabsTrigger4,
+          {
+            value: tab.value,
+            className: "shrink-0 whitespace-nowrap",
+            children: [
+              tab.label,
+              tab.count !== null && /* @__PURE__ */ jsx12(
+                "span",
+                {
+                  className: `inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-semibold rounded-sm ml-2 transition-colors ${activeTab === tab.value ? "bg-primary/5 text-primary" : "bg-primary/5 text-muted-foreground"}`,
+                  children: tab.count
+                }
+              )
+            ]
+          },
+          tab.value
+        )) })
+      }
+    ) }),
+    activeTab === "builder" && /* @__PURE__ */ jsx12(
       FieldCards,
       {
         enabledTypes,
@@ -4269,13 +4746,20 @@ function FormBuilderViewInner({
         onAddField: handleAddField
       }
     ),
-    activeTab === "preview" && /* @__PURE__ */ jsx11(FormPreview, { fields, formData }),
-    activeTab === "settings" && /* @__PURE__ */ jsx11(FormSettingsTab, { spamDefaults }),
-    activeTab === "notifications" && /* @__PURE__ */ jsx11(FormNotificationsTab, { defaults: notificationDefaults }),
+    activeTab === "preview" && /* @__PURE__ */ jsx12(FormPreview, { fields, formData }),
+    activeTab === "settings" && /* @__PURE__ */ jsx12(
+      FormSettingsTab,
+      {
+        spamDefaults,
+        redirectCollections,
+        redirectConfigFailed
+      }
+    ),
+    activeTab === "notifications" && /* @__PURE__ */ jsx12(FormNotificationsTab, { defaults: notificationDefaults }),
     saveError && // Full-strength destructive border so the error box boundary is perceivable over its tinted fill.
-    /* @__PURE__ */ jsx11("div", { className: "mt-6 p-3 text-sm text-destructive bg-destructive/10 border border-destructive rounded-none", children: saveError }),
-    /* @__PURE__ */ jsxs10(FormActions, { dirty: isDirty, children: [
-      /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12("div", { className: "mt-6 p-3 text-sm text-destructive bg-destructive/10 border border-destructive rounded-none", children: saveError }),
+    /* @__PURE__ */ jsxs11(FormActions, { dirty: isDirty, children: [
+      /* @__PURE__ */ jsx12(
         Button8,
         {
           type: "button",
@@ -4286,7 +4770,7 @@ function FormBuilderViewInner({
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(
         Button8,
         {
           type: "button",
@@ -4296,15 +4780,15 @@ function FormBuilderViewInner({
           },
           disabled: isSaving,
           className: "flex items-center gap-1.5",
-          children: isSaving ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
-            /* @__PURE__ */ jsxs10(
+          children: isSaving ? /* @__PURE__ */ jsxs11(Fragment6, { children: [
+            /* @__PURE__ */ jsxs11(
               "svg",
               {
                 className: "animate-spin h-3.5 w-3.5",
                 viewBox: "0 0 24 24",
                 fill: "none",
                 children: [
-                  /* @__PURE__ */ jsx11(
+                  /* @__PURE__ */ jsx12(
                     "circle",
                     {
                       className: "opacity-25",
@@ -4315,7 +4799,7 @@ function FormBuilderViewInner({
                       strokeWidth: "4"
                     }
                   ),
-                  /* @__PURE__ */ jsx11(
+                  /* @__PURE__ */ jsx12(
                     "path",
                     {
                       className: "opacity-75",
@@ -4333,6 +4817,11 @@ function FormBuilderViewInner({
     ] })
   ] });
 }
+function saveErrorMessage(body, statusText) {
+  const error = body?.error;
+  const fieldIssues = (error?.data?.errors ?? []).map((issue) => issue.message).filter((message) => Boolean(message));
+  return fieldIssues.join(" ") || error?.message || `Failed to save form: ${statusText}`;
+}
 function FormBuilderView({
   id,
   entryId,
@@ -4348,7 +4837,7 @@ function FormBuilderView({
   const resolvedCollectionSlug = collectionSlug || collection || "forms";
   const resolvedIsCreating = isCreating ?? !resolvedEntryId;
   const providerKey = resolvedEntryId || "new";
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     FormBuilderProvider,
     {
       initialData: {
@@ -4357,11 +4846,12 @@ function FormBuilderView({
         slug: initialData?.slug,
         description: initialData?.description,
         status: initialData?.status,
+        closedMessage: initialData?.closedMessage,
         fields: initialData?.fields,
         settings: initialData?.settings,
         notifications: initialData?.notifications
       },
-      children: /* @__PURE__ */ jsx11(
+      children: /* @__PURE__ */ jsx12(
         FormBuilderViewInner,
         {
           isCreating: resolvedIsCreating,