strapi-plugin-form-builder-cms 1.0.0-alpha.1

package/dist/admin/App-By2VKpyh.mjs

@@ -0,0 +1,1429 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useFetchClient, Page } from "@strapi/strapi/admin";
+import { useNavigate, useParams, Routes, Route } from "react-router-dom";
+import { useState, useEffect, useCallback } from "react";
+import { Box, Flex, Typography, Button, Table, Thead, Tr, Th, Tbody, Td, Badge, IconButton, Dialog, Field, Textarea, TextInput, SingleSelect, SingleSelectOption, Modal, Loader, Toggle } from "@strapi/design-system";
+import { Plus, Pencil, Eye, Duplicate, Trash, Drag, Check, ArrowLeft } from "@strapi/icons";
+import { P as PLUGIN_ID } from "./index-Cn0nOObD.mjs";
+import { v4 } from "uuid";
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, arrayMove, useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+const BASE = "/strapi-plugin-form-builder-cms";
+function useFormsApi() {
+  const { get, post, put, del } = useFetchClient();
+  return {
+    async getForms() {
+      const { data } = await get(`${BASE}/forms`);
+      return data;
+    },
+    async getForm(id) {
+      const { data } = await get(`${BASE}/forms/${id}`);
+      return data;
+    },
+    async createForm(body) {
+      const { data } = await post(`${BASE}/forms`, body);
+      return data;
+    },
+    async updateForm(id, body) {
+      const { data } = await put(`${BASE}/forms/${id}`, body);
+      return data;
+    },
+    async deleteForm(id) {
+      await del(`${BASE}/forms/${id}`);
+    },
+    async duplicateForm(id) {
+      const { data } = await post(`${BASE}/forms/${id}/duplicate`, {});
+      return data;
+    },
+    async getSubmissions(formId, query = {}) {
+      const params = new URLSearchParams(query).toString();
+      const { data } = await get(`${BASE}/submissions/${formId}${params ? `?${params}` : ""}`);
+      return data;
+    },
+    async getSubmission(id) {
+      const { data } = await get(`${BASE}/submissions/entry/${id}`);
+      return data;
+    },
+    async updateSubmissionStatus(id, status) {
+      const { data } = await put(`${BASE}/submissions/${id}/status`, { status });
+      return data;
+    },
+    async deleteSubmission(id) {
+      await del(`${BASE}/submissions/${id}`);
+    },
+    async getStats(formId) {
+      const { data } = await get(`${BASE}/submissions/${formId}/stats`);
+      return data;
+    }
+  };
+}
+function FormListPage() {
+  const navigate = useNavigate();
+  const api = useFormsApi();
+  const [forms, setForms] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [deleteTarget, setDeleteTarget] = useState(null);
+  const load = async () => {
+    setLoading(true);
+    try {
+      const data = await api.getForms();
+      setForms(Array.isArray(data) ? data : []);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    load();
+  }, []);
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    await api.deleteForm(deleteTarget);
+    setDeleteTarget(null);
+    load();
+  };
+  const handleDuplicate = async (id) => {
+    await api.duplicateForm(id);
+    load();
+  };
+  return /* @__PURE__ */ jsxs(Box, { padding: 8, children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 6, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "alpha", children: "Form Builder" }),
+      /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(Plus, {}), onClick: () => navigate(`/plugins/${PLUGIN_ID}/builder/new`), children: "Create form" })
+    ] }),
+    loading ? /* @__PURE__ */ jsx(Typography, { children: "Loading..." }) : forms.length === 0 ? /* @__PURE__ */ jsx(Box, { padding: 10, background: "neutral100", borderRadius: "4px", textAlign: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "beta", textColor: "neutral600", children: "No forms yet. Create your first one." }) }) : /* @__PURE__ */ jsxs(Table, { colCount: 5, rowCount: forms.length, children: [
+      /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Title" }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Slug" }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Status" }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Created" }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Actions" }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tbody, { children: forms.map((form) => /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: form.title }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: form.slug }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Badge, { active: !!form.publishedAt, children: form.publishedAt ? "Published" : "Draft" }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: new Date(form.createdAt).toLocaleDateString() }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              label: "Edit",
+              onClick: () => navigate(`/plugins/${PLUGIN_ID}/builder/${form.id}`),
+              children: /* @__PURE__ */ jsx(Pencil, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              label: "View submissions",
+              onClick: () => navigate(`/plugins/${PLUGIN_ID}/submissions/${form.id}`),
+              children: /* @__PURE__ */ jsx(Eye, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(IconButton, { label: "Duplicate", onClick: () => handleDuplicate(form.id), children: /* @__PURE__ */ jsx(Duplicate, {}) }),
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              label: "Delete",
+              onClick: () => setDeleteTarget(form.id),
+              children: /* @__PURE__ */ jsx(Trash, {})
+            }
+          )
+        ] }) })
+      ] }, form.id)) })
+    ] }),
+    deleteTarget && /* @__PURE__ */ jsx(Dialog.Root, { open: true, onOpenChange: () => setDeleteTarget(null), children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
+      /* @__PURE__ */ jsx(Dialog.Header, { children: "Confirm delete" }),
+      /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsx(Typography, { children: "Are you sure you want to delete this form?" }) }),
+      /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+        /* @__PURE__ */ jsx(Dialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", children: "Cancel" }) }),
+        /* @__PURE__ */ jsx(Dialog.Action, { children: /* @__PURE__ */ jsx(Button, { variant: "danger", onClick: handleDelete, children: "Delete" }) })
+      ] })
+    ] }) })
+  ] });
+}
+const PALETTE_ITEMS = [
+  // Basic
+  { type: "text", label: "Text", icon: "📝", group: "Basic" },
+  { type: "email", label: "Email", icon: "✉️", group: "Basic" },
+  { type: "number", label: "Number", icon: "#", group: "Basic" },
+  { type: "phone", label: "Phone", icon: "📱", group: "Basic" },
+  { type: "textarea", label: "Long text", icon: "📄", group: "Basic" },
+  { type: "password", label: "Password", icon: "🔒", group: "Basic" },
+  // Selection
+  { type: "select", label: "Select", icon: "▼", group: "Selection" },
+  { type: "radio", label: "Radio", icon: "◉", group: "Selection" },
+  { type: "checkbox", label: "Checkbox", icon: "☑", group: "Selection" },
+  { type: "checkbox-group", label: "Checkbox group", icon: "☑☑", group: "Selection" },
+  // Advanced
+  { type: "date", label: "Date", icon: "📅", group: "Advanced" },
+  { type: "time", label: "Time", icon: "🕐", group: "Advanced" },
+  { type: "url", label: "URL", icon: "🔗", group: "Advanced" },
+  { type: "hidden", label: "Hidden", icon: "👁", group: "Advanced" },
+  // Layout
+  { type: "heading", label: "Heading", icon: "H", group: "Layout" },
+  { type: "paragraph", label: "Paragraph", icon: "¶", group: "Layout" },
+  { type: "divider", label: "Divider", icon: "—", group: "Layout" }
+];
+const GROUPS = ["Basic", "Selection", "Advanced", "Layout"];
+function FieldPalette({ onAdd }) {
+  const [hovered, setHovered] = useState(null);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      padding: 4,
+      background: "neutral100",
+      style: { width: 200, minWidth: 200, overflowY: "auto", alignSelf: "stretch", borderRight: "1px solid var(--strapi-neutral-200)" },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", marginBottom: 3, children: "FIELDS" }),
+        GROUPS.map((group) => /* @__PURE__ */ jsxs(Box, { marginBottom: 4, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral500", marginBottom: 2, children: group }),
+          /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 1, alignItems: "stretch", children: PALETTE_ITEMS.filter((i) => i.group === group).map((item) => /* @__PURE__ */ jsx(
+            Box,
+            {
+              padding: 2,
+              background: hovered === item.type ? "primary100" : "neutral0",
+              hasRadius: true,
+              style: {
+                cursor: "pointer",
+                border: "1px solid var(--strapi-neutral-200)",
+                userSelect: "none"
+              },
+              onClick: () => onAdd(item.type),
+              onMouseEnter: () => setHovered(item.type),
+              onMouseLeave: () => setHovered(null),
+              children: /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+                /* @__PURE__ */ jsx("span", { style: { fontSize: 14 }, children: item.icon }),
+                /* @__PURE__ */ jsx(Typography, { variant: "pi", children: item.label })
+              ] })
+            },
+            item.type
+          )) })
+        ] }, group))
+      ]
+    }
+  );
+}
+function SortableFieldRow({
+  field,
+  selected,
+  onSelect,
+  onDelete
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: field.id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: setNodeRef,
+      padding: 3,
+      background: selected ? "primary100" : "neutral0",
+      marginBottom: 2,
+      onClick: onSelect,
+      hasRadius: true,
+      style: {
+        ...style,
+        border: `2px solid ${selected ? "var(--strapi-primary-600)" : "transparent"}`,
+        outline: selected ? "none" : "1px solid var(--strapi-neutral-200)",
+        outlineOffset: "-1px",
+        cursor: "pointer"
+      },
+      children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              ...attributes,
+              ...listeners,
+              style: { cursor: "grab", color: "var(--strapi-neutral-400)", padding: "0 4px" },
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx(Drag, {})
+            }
+          ),
+          /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "semiBold", children: field.label || "(no label)" }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral500", children: [
+              " ",
+              "— ",
+              field.type
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label: "Delete field",
+            onClick: (e) => {
+              e.stopPropagation();
+              onDelete();
+            },
+            variant: "ghost",
+            children: /* @__PURE__ */ jsx(Trash, {})
+          }
+        )
+      ] })
+    }
+  );
+}
+function DropZone({ fields, selectedId, onSelect, onDelete, onReorder }) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = fields.findIndex((f) => f.id === active.id);
+      const newIndex = fields.findIndex((f) => f.id === over.id);
+      onReorder(arrayMove(fields, oldIndex, newIndex));
+    }
+  };
+  if (fields.length === 0) {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        padding: 10,
+        background: "neutral100",
+        hasRadius: true,
+        style: { border: "2px dashed var(--strapi-neutral-300)", textAlign: "center", flex: 1 },
+        children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral500", children: "Click on a field in the left panel to add it to the form" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsx(SortableContext, { items: fields.map((f) => f.id), strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx(Box, { style: { flex: 1 }, children: fields.map((field) => /* @__PURE__ */ jsx(
+    SortableFieldRow,
+    {
+      field,
+      selected: selectedId === field.id,
+      onSelect: () => onSelect(field.id),
+      onDelete: () => onDelete(field.id)
+    },
+    field.id
+  )) }) }) });
+}
+function LabeledInput({
+  label,
+  value,
+  onChange,
+  placeholder,
+  size
+}) {
+  return /* @__PURE__ */ jsxs(Field.Root, { children: [
+    /* @__PURE__ */ jsx(Field.Label, { children: label }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder,
+        size
+      }
+    )
+  ] });
+}
+function FieldSettingsPanel({ field, onChange }) {
+  const update = (patch) => onChange({ ...field, ...patch });
+  const addOption = () => {
+    const options = [...field.options || [], { label: "", value: "" }];
+    update({ options });
+  };
+  const updateOption = (index, patch) => {
+    const options = (field.options || []).map(
+      (o, i) => i === index ? { ...o, ...patch } : o
+    );
+    update({ options });
+  };
+  const removeOption = (index) => {
+    update({ options: (field.options || []).filter((_, i) => i !== index) });
+  };
+  const addValidation = () => {
+    const usedTypes = field.validation.map((r) => r.type);
+    const defaultType = field.type === "number" ? usedTypes.includes("min") ? usedTypes.includes("max") ? "pattern" : "max" : "min" : field.type === "email" ? usedTypes.includes("email") ? "minLength" : "email" : field.type === "url" ? usedTypes.includes("url") ? "minLength" : "url" : usedTypes.includes("minLength") ? usedTypes.includes("maxLength") ? "pattern" : "maxLength" : "minLength";
+    update({ validation: [...field.validation, { type: defaultType }] });
+  };
+  const updateValidation = (index, patch) => {
+    const validation = field.validation.map(
+      (v, i) => i === index ? { ...v, ...patch } : v
+    );
+    update({ validation });
+  };
+  const removeValidation = (index) => {
+    update({ validation: field.validation.filter((_, i) => i !== index) });
+  };
+  const hasOptions = ["select", "radio", "checkbox-group"].includes(field.type);
+  const isDecorative = ["heading", "paragraph", "divider"].includes(field.type);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      padding: 4,
+      background: "neutral0",
+      style: { width: 280, minWidth: 280, overflowY: "auto", alignSelf: "stretch", borderLeft: "1px solid var(--strapi-neutral-200)" },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "beta", marginBottom: 4, children: "Field settings" }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, alignItems: "stretch", children: [
+          !isDecorative && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              LabeledInput,
+              {
+                label: "Label",
+                value: field.label,
+                onChange: (v) => update({ label: v })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              LabeledInput,
+              {
+                label: "Name (technical)",
+                value: field.name,
+                onChange: (v) => update({ name: v })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              LabeledInput,
+              {
+                label: "Placeholder",
+                value: field.placeholder || "",
+                onChange: (v) => update({ placeholder: v })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              LabeledInput,
+              {
+                label: "Help text",
+                value: field.helpText || "",
+                onChange: (v) => update({ helpText: v })
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "semiBold", marginBottom: 1, children: "Required" }),
+              /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: !field.required ? "default" : "secondary",
+                    size: "S",
+                    onClick: () => update({ required: false }),
+                    children: "No"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: field.required ? "default" : "secondary",
+                    size: "S",
+                    onClick: () => update({ required: true }),
+                    children: "Yes"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "semiBold", marginBottom: 1, children: "Width" }),
+              /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: field.width === "full" ? "default" : "secondary",
+                    size: "S",
+                    onClick: () => update({ width: "full" }),
+                    children: "Full"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: field.width === "half" ? "default" : "secondary",
+                    size: "S",
+                    onClick: () => update({ width: "half" }),
+                    children: "Half"
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          field.type === "heading" && /* @__PURE__ */ jsx(
+            LabeledInput,
+            {
+              label: "Heading text",
+              value: field.label,
+              onChange: (v) => update({ label: v })
+            }
+          ),
+          field.type === "paragraph" && /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: "Content" }),
+            /* @__PURE__ */ jsx(
+              Textarea,
+              {
+                value: field.label,
+                onChange: (e) => update({ label: e.target.value })
+              }
+            )
+          ] }),
+          hasOptions && /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 2, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "semiBold", children: "Options" }),
+              /* @__PURE__ */ jsx(Button, { size: "S", variant: "secondary", startIcon: /* @__PURE__ */ jsx(Plus, {}), onClick: addOption, children: "Add" })
+            ] }),
+            /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: (field.options || []).map((opt, i) => /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  "aria-label": "Label",
+                  placeholder: "Label",
+                  value: opt.label,
+                  onChange: (e) => updateOption(i, { label: e.target.value })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                TextInput,
+                {
+                  "aria-label": "Value",
+                  placeholder: "Value",
+                  value: opt.value,
+                  onChange: (e) => updateOption(i, { value: e.target.value })
+                }
+              ),
+              /* @__PURE__ */ jsx(IconButton, { label: "Delete", onClick: () => removeOption(i), variant: "ghost", children: /* @__PURE__ */ jsx(Trash, {}) })
+            ] }, i)) })
+          ] }),
+          !isDecorative && /* @__PURE__ */ jsxs(Box, { children: [
+            /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 2, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "semiBold", children: "Validations" }),
+              /* @__PURE__ */ jsx(Button, { size: "S", variant: "secondary", startIcon: /* @__PURE__ */ jsx(Plus, {}), onClick: addValidation, children: "Add" })
+            ] }),
+            /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, children: field.validation.map((rule, i) => {
+              const usedTypes = field.validation.filter((_, j) => j !== i).map((r) => r.type);
+              const isNumber = field.type === "number";
+              const isEmail = field.type === "email";
+              const isUrl = field.type === "url";
+              const available = [
+                !isNumber && { value: "minLength", label: "Min. length" },
+                !isNumber && { value: "maxLength", label: "Max. length" },
+                isNumber && { value: "min", label: "Min. value" },
+                isNumber && { value: "max", label: "Max. value" },
+                !isEmail && { value: "email", label: "Email" },
+                !isUrl && { value: "url", label: "URL" },
+                { value: "pattern", label: "Pattern (regex)" }
+              ].filter(
+                (opt) => !!opt && (opt.value === rule.type || !usedTypes.includes(opt.value))
+              );
+              return /* @__PURE__ */ jsxs(Box, { padding: 2, background: "neutral100", hasRadius: true, children: [
+                /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", marginBottom: 2, children: [
+                  /* @__PURE__ */ jsx(Field.Root, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(
+                    SingleSelect,
+                    {
+                      value: rule.type,
+                      onChange: (val) => updateValidation(i, { type: String(val), value: void 0, message: "" }),
+                      size: "S",
+                      children: available.map((opt) => /* @__PURE__ */ jsx(SingleSelectOption, { value: opt.value, children: opt.label }, opt.value))
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx(IconButton, { label: "Delete", onClick: () => removeValidation(i), variant: "ghost", children: /* @__PURE__ */ jsx(Trash, {}) })
+                ] }),
+                ["minLength", "maxLength", "min", "max", "pattern"].includes(rule.type) && /* @__PURE__ */ jsx(
+                  LabeledInput,
+                  {
+                    label: "Value",
+                    value: String(rule.value ?? ""),
+                    onChange: (v) => updateValidation(i, { value: v }),
+                    size: "S"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  LabeledInput,
+                  {
+                    label: "Error message",
+                    value: rule.message || "",
+                    onChange: (v) => updateValidation(i, { message: v }),
+                    placeholder: "Custom message (optional)",
+                    size: "S"
+                  }
+                )
+              ] }, i);
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            LabeledInput,
+            {
+              label: "CSS class",
+              value: field.cssClass || "",
+              onChange: (v) => update({ cssClass: v }),
+              placeholder: "my-custom-class"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const TOKEN = {
+  border: "1px solid #dcdce4",
+  radius: 4,
+  accent: "#4945ff",
+  text: "#32324d",
+  sub: "#666687",
+  danger: "#ee5e52",
+  bg: "#fff"
+};
+const inputBase = {
+  width: "100%",
+  height: 40,
+  padding: "0 12px",
+  border: TOKEN.border,
+  borderRadius: TOKEN.radius,
+  fontSize: 14,
+  color: TOKEN.text,
+  background: TOKEN.bg,
+  boxSizing: "border-box",
+  outline: "none",
+  fontFamily: "inherit"
+};
+const fieldWrap = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 4
+};
+const labelStyle = {
+  fontSize: 12,
+  fontWeight: 600,
+  color: TOKEN.text,
+  lineHeight: "16px"
+};
+const helpStyle = {
+  fontSize: 11,
+  color: TOKEN.sub,
+  margin: 0
+};
+function Label({ field }) {
+  return /* @__PURE__ */ jsxs("span", { style: labelStyle, children: [
+    field.label || /* @__PURE__ */ jsx("em", { style: { color: TOKEN.sub }, children: "No label" }),
+    field.required && /* @__PURE__ */ jsx("span", { style: { color: TOKEN.danger, marginLeft: 2 }, children: "*" })
+  ] });
+}
+function TextField({ field }) {
+  const typeMap = {
+    text: "text",
+    email: "email",
+    number: "number",
+    phone: "tel",
+    password: "password",
+    url: "url",
+    date: "date",
+    time: "time"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: fieldWrap, children: [
+    /* @__PURE__ */ jsx(Label, { field }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: typeMap[field.type] ?? "text",
+        placeholder: field.placeholder,
+        style: inputBase,
+        readOnly: true
+      }
+    ),
+    field.helpText && /* @__PURE__ */ jsx("p", { style: helpStyle, children: field.helpText })
+  ] });
+}
+function TextareaField({ field }) {
+  return /* @__PURE__ */ jsxs("div", { style: fieldWrap, children: [
+    /* @__PURE__ */ jsx(Label, { field }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        placeholder: field.placeholder,
+        style: { ...inputBase, height: 88, padding: "8px 12px", resize: "vertical" },
+        readOnly: true
+      }
+    ),
+    field.helpText && /* @__PURE__ */ jsx("p", { style: helpStyle, children: field.helpText })
+  ] });
+}
+function SelectField({ field }) {
+  const [val, setVal] = useState("");
+  return /* @__PURE__ */ jsxs("div", { style: fieldWrap, children: [
+    /* @__PURE__ */ jsx(Label, { field }),
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: val,
+          onChange: (e) => setVal(e.target.value),
+          style: {
+            ...inputBase,
+            appearance: "none",
+            paddingRight: 32,
+            cursor: "pointer"
+          },
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", children: field.placeholder || "Select an option…" }),
+            (field.options || []).map((o, i) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label || o.value }, i))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { style: {
+        position: "absolute",
+        right: 10,
+        top: "50%",
+        transform: "translateY(-50%)",
+        pointerEvents: "none",
+        color: TOKEN.sub,
+        fontSize: 10
+      }, children: "▼" })
+    ] }),
+    field.helpText && /* @__PURE__ */ jsx("p", { style: helpStyle, children: field.helpText })
+  ] });
+}
+function RadioField({ field }) {
+  const [val, setVal] = useState("");
+  const options = field.options || [];
+  return /* @__PURE__ */ jsxs("div", { style: fieldWrap, children: [
+    /* @__PURE__ */ jsx(Label, { field }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6, marginTop: 2 }, children: options.map((o, i) => {
+      const checked = val === o.value;
+      return /* @__PURE__ */ jsxs(
+        "label",
+        {
+          style: { display: "flex", alignItems: "center", gap: 10, cursor: "pointer", fontSize: 14, color: TOKEN.text, userSelect: "none" },
+          onClick: () => setVal(o.value),
+          children: [
+            /* @__PURE__ */ jsx("span", { style: {
+              width: 18,
+              height: 18,
+              borderRadius: "50%",
+              border: `2px solid ${checked ? TOKEN.accent : "#c0c0cf"}`,
+              background: TOKEN.bg,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              transition: "border-color .15s"
+            }, children: checked && /* @__PURE__ */ jsx("span", { style: {
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              background: TOKEN.accent
+            } }) }),
+            o.label || o.value
+          ]
+        },
+        i
+      );
+    }) }),
+    field.helpText && /* @__PURE__ */ jsx("p", { style: helpStyle, children: field.helpText })
+  ] });
+}
+function CheckboxField({ field }) {
+  const [checked, setChecked] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { style: fieldWrap, children: [
+    /* @__PURE__ */ jsxs(
+      "label",
+      {
+        style: { display: "flex", alignItems: "center", gap: 10, cursor: "pointer", fontSize: 14, color: TOKEN.text, userSelect: "none" },
+        onClick: () => setChecked((v) => !v),
+        children: [
+          /* @__PURE__ */ jsx("span", { style: {
+            width: 18,
+            height: 18,
+            borderRadius: 3,
+            border: `2px solid ${checked ? TOKEN.accent : "#c0c0cf"}`,
+            background: checked ? TOKEN.accent : TOKEN.bg,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            transition: "all .15s"
+          }, children: checked && /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: 11, lineHeight: 1, fontWeight: 700 }, children: "✓" }) }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            field.label,
+            field.required && /* @__PURE__ */ jsx("span", { style: { color: TOKEN.danger, marginLeft: 2 }, children: "*" })
+          ] })
+        ]
+      }
+    ),
+    field.helpText && /* @__PURE__ */ jsx("p", { style: { ...helpStyle, marginLeft: 28 }, children: field.helpText })
+  ] });
+}
+function CheckboxGroupField({ field }) {
+  const [vals, setVals] = useState(/* @__PURE__ */ new Set());
+  const options = field.options || [];
+  const toggle = (v) => setVals((prev) => {
+    const s = new Set(prev);
+    s.has(v) ? s.delete(v) : s.add(v);
+    return s;
+  });
+  return /* @__PURE__ */ jsxs("div", { style: fieldWrap, children: [
+    /* @__PURE__ */ jsx(Label, { field }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 6, marginTop: 2 }, children: options.map((o, i) => {
+      const checked = vals.has(o.value);
+      return /* @__PURE__ */ jsxs(
+        "label",
+        {
+          style: { display: "flex", alignItems: "center", gap: 10, cursor: "pointer", fontSize: 14, color: TOKEN.text, userSelect: "none" },
+          onClick: () => toggle(o.value),
+          children: [
+            /* @__PURE__ */ jsx("span", { style: {
+              width: 18,
+              height: 18,
+              borderRadius: 3,
+              border: `2px solid ${checked ? TOKEN.accent : "#c0c0cf"}`,
+              background: checked ? TOKEN.accent : TOKEN.bg,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              transition: "all .15s"
+            }, children: checked && /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: 11, lineHeight: 1, fontWeight: 700 }, children: "✓" }) }),
+            o.label || o.value
+          ]
+        },
+        i
+      );
+    }) }),
+    field.helpText && /* @__PURE__ */ jsx("p", { style: helpStyle, children: field.helpText })
+  ] });
+}
+function PreviewField({ field }) {
+  const half = field.width === "half";
+  const colSpan = half ? 1 : 2;
+  if (field.type === "hidden") return null;
+  if (field.type === "divider") {
+    return /* @__PURE__ */ jsx("div", { style: { gridColumn: "1 / -1" }, children: /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: TOKEN.border, margin: "4px 0" } }) });
+  }
+  if (field.type === "heading") {
+    return /* @__PURE__ */ jsx("div", { style: { gridColumn: "1 / -1" }, children: /* @__PURE__ */ jsx("p", { style: { fontSize: 18, fontWeight: 700, color: TOKEN.text, margin: 0 }, children: field.label || "Heading" }) });
+  }
+  if (field.type === "paragraph") {
+    return /* @__PURE__ */ jsx("div", { style: { gridColumn: "1 / -1" }, children: /* @__PURE__ */ jsx("p", { style: { fontSize: 14, color: TOKEN.sub, margin: 0, lineHeight: 1.6 }, children: field.label || "Paragraph text" }) });
+  }
+  let content;
+  switch (field.type) {
+    case "textarea":
+      content = /* @__PURE__ */ jsx(TextareaField, { field });
+      break;
+    case "select":
+      content = /* @__PURE__ */ jsx(SelectField, { field });
+      break;
+    case "radio":
+      content = /* @__PURE__ */ jsx(RadioField, { field });
+      break;
+    case "checkbox":
+      content = /* @__PURE__ */ jsx(CheckboxField, { field });
+      break;
+    case "checkbox-group":
+      content = /* @__PURE__ */ jsx(CheckboxGroupField, { field });
+      break;
+    default:
+      content = /* @__PURE__ */ jsx(TextField, { field });
+      break;
+  }
+  return /* @__PURE__ */ jsx("div", { style: { gridColumn: `span ${colSpan}` }, children: content });
+}
+function FormPreview({ title, fields, settings, open, onClose }) {
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(Modal.Root, { open, onOpenChange: (v) => !v && onClose(), children: /* @__PURE__ */ jsxs(Modal.Content, { style: { maxWidth: 760, width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsxs(Typography, { variant: "beta", children: [
+      "Preview — ",
+      title
+    ] }) }),
+    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(Box, { padding: 6, background: "neutral0", hasRadius: true, style: { border: TOKEN.border }, children: /* @__PURE__ */ jsxs("form", { onSubmit: (e) => e.preventDefault(), children: [
+      fields.length === 0 ? /* @__PURE__ */ jsx("p", { style: { textAlign: "center", color: TOKEN.sub, padding: "32px 0", margin: 0 }, children: "No fields added yet." }) : /* @__PURE__ */ jsx("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }, children: fields.map((field) => /* @__PURE__ */ jsx(PreviewField, { field }, field.id)) }),
+      fields.length > 0 && /* @__PURE__ */ jsx("div", { style: { marginTop: 24 }, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          style: {
+            background: TOKEN.accent,
+            color: "#fff",
+            border: "none",
+            borderRadius: TOKEN.radius,
+            padding: "10px 24px",
+            fontSize: 14,
+            fontWeight: 600,
+            cursor: "pointer",
+            fontFamily: "inherit"
+          },
+          children: settings.submitButtonText || "Submit"
+        }
+      ) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(Modal.Footer, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onClose, children: "Close" }) })
+  ] }) });
+}
+function EmbedModal({ formId, open, onClose }) {
+  const [copied, setCopied] = useState(false);
+  if (!open) return null;
+  const origin = window.location.origin;
+  const snippet = `<div id="sfb-form-${formId}"></div>
+<script
+  src="${origin}/api/strapi-plugin-form-builder-cms/embed.js"
+  data-form-id="${formId}"
+  async
+><\/script>`;
+  const copy = () => {
+    navigator.clipboard.writeText(snippet).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    });
+  };
+  return /* @__PURE__ */ jsx(Modal.Root, { open, onOpenChange: (v) => !v && onClose(), children: /* @__PURE__ */ jsxs(Modal.Content, { style: { maxWidth: 600, width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Typography, { variant: "beta", children: "Embed this form" }) }),
+    /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 3, children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Paste this snippet into your website where you want the form to appear." }),
+      /* @__PURE__ */ jsx(
+        "pre",
+        {
+          style: {
+            margin: 0,
+            background: "#1e1e2e",
+            borderRadius: 6,
+            padding: "16px 20px",
+            overflowX: "auto",
+            whiteSpace: "pre",
+            color: "#cdd6f4",
+            fontFamily: "'Fira Code', 'Cascadia Code', 'Consolas', monospace",
+            fontSize: 13,
+            lineHeight: 1.7,
+            cursor: "text",
+            userSelect: "all"
+          },
+          onClick: (e) => {
+            const sel = window.getSelection();
+            const range = document.createRange();
+            range.selectNodeContents(e.currentTarget);
+            sel?.removeAllRanges();
+            sel?.addRange(range);
+          },
+          children: snippet
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: onClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          startIcon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Duplicate, {}),
+          onClick: copy,
+          variant: copied ? "success" : "default",
+          children: copied ? "Copied!" : "Copy"
+        }
+      )
+    ] })
+  ] }) });
+}
+const DEFAULT_SETTINGS = {
+  submitButtonText: "Submit",
+  successMessage: "Form submitted successfully",
+  enableHoneypot: true,
+  enableRateLimit: true,
+  maxSubmissionsPerHour: 60,
+  notificationEmails: [],
+  redirectUrl: "",
+  customCss: "",
+  publicPage: false
+};
+function createField(type, order) {
+  return {
+    id: v4(),
+    type,
+    name: `field_${Date.now()}`,
+    label: type.charAt(0).toUpperCase() + type.slice(1),
+    placeholder: "",
+    helpText: "",
+    required: false,
+    order,
+    width: "full",
+    options: ["select", "radio", "checkbox-group"].includes(type) ? [{ label: "Option 1", value: "option_1" }] : void 0,
+    validation: []
+  };
+}
+function FormBuilderPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const api = useFormsApi();
+  const isNew = !id || id === "new";
+  const [loading, setLoading] = useState(!isNew);
+  const [saving, setSaving] = useState(false);
+  const [publishing, setPublishing] = useState(false);
+  const [title, setTitle] = useState("New form");
+  const [description, setDescription] = useState("");
+  const [fields, setFields] = useState([]);
+  const [settings, setSettings] = useState(DEFAULT_SETTINGS);
+  const [selectedFieldId, setSelectedFieldId] = useState(null);
+  const [showSettings, setShowSettings] = useState(false);
+  const [showPreview, setShowPreview] = useState(false);
+  const [showEmbed, setShowEmbed] = useState(false);
+  const [publishedAt, setPublishedAt] = useState(null);
+  const [slug, setSlug] = useState(null);
+  useEffect(() => {
+    if (!isNew && id) {
+      api.getForm(Number(id)).then((form) => {
+        setTitle(form.title);
+        setDescription(form.description || "");
+        setFields(form.fields || []);
+        setSettings({ ...DEFAULT_SETTINGS, ...form.settings || {} });
+        setPublishedAt(form.publishedAt ?? null);
+        setSlug(form.slug ?? null);
+        setLoading(false);
+      });
+    }
+  }, [id]);
+  const addField = useCallback((type) => {
+    const newField = createField(type, fields.length);
+    setFields((prev) => [...prev, newField]);
+    setSelectedFieldId(newField.id);
+  }, [fields.length]);
+  const updateField = useCallback((updated) => {
+    setFields((prev) => prev.map((f) => f.id === updated.id ? updated : f));
+  }, []);
+  const deleteField = useCallback((fieldId) => {
+    setFields((prev) => prev.filter((f) => f.id !== fieldId));
+    setSelectedFieldId((prev) => prev === fieldId ? null : prev);
+  }, []);
+  const reorderFields = useCallback((reordered) => {
+    setFields(reordered.map((f, i) => ({ ...f, order: i })));
+  }, []);
+  const saveDraft = async () => {
+    setSaving(true);
+    try {
+      const payload = { title, description, fields, settings, conditionalLogic: [], publishedAt: null };
+      if (isNew) {
+        const created = await api.createForm(payload);
+        setPublishedAt(null);
+        setSlug(created.slug ?? null);
+        navigate(`/plugins/${PLUGIN_ID}/builder/${created.id}`, { replace: true });
+      } else {
+        const updated = await api.updateForm(Number(id), payload);
+        setPublishedAt(updated.publishedAt ?? null);
+      }
+    } finally {
+      setSaving(false);
+    }
+  };
+  const publish = async () => {
+    setPublishing(true);
+    try {
+      const now = (/* @__PURE__ */ new Date()).toISOString();
+      const payload = { title, description, fields, settings, conditionalLogic: [], publishedAt: now };
+      if (isNew) {
+        const created = await api.createForm(payload);
+        setPublishedAt(created.publishedAt ?? now);
+        navigate(`/plugins/${PLUGIN_ID}/builder/${created.id}`, { replace: true });
+      } else {
+        const updated = await api.updateForm(Number(id), payload);
+        setPublishedAt(updated.publishedAt ?? now);
+      }
+    } finally {
+      setPublishing(false);
+    }
+  };
+  const selectedField = fields.find((f) => f.id === selectedFieldId) || null;
+  if (loading) {
+    return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 10, children: /* @__PURE__ */ jsx(Loader, { children: "Loading form..." }) });
+  }
+  return /* @__PURE__ */ jsxs(Box, { style: { display: "flex", flexDirection: "column", height: "100vh" }, children: [
+    /* @__PURE__ */ jsx(Box, { padding: 4, background: "neutral0", style: { borderBottom: "1px solid var(--strapi-neutral-200)" }, children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}),
+            onClick: () => navigate(`/plugins/${PLUGIN_ID}`),
+            children: "Back"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            "aria-label": "Form title",
+            value: title,
+            onChange: (e) => setTitle(e.target.value),
+            style: { minWidth: 300, fontWeight: "bold", fontSize: 18 }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "pi",
+            textColor: publishedAt ? "success600" : "warning600",
+            style: { fontWeight: 600 },
+            children: publishedAt ? "Published" : "Draft"
+          }
+        ),
+        !isNew && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            startIcon: /* @__PURE__ */ jsx(Duplicate, {}),
+            onClick: () => setShowEmbed(true),
+            children: "Embed"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            startIcon: /* @__PURE__ */ jsx(Eye, {}),
+            onClick: () => setShowPreview(true),
+            children: "Preview"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            onClick: () => setShowSettings((v) => !v),
+            children: showSettings ? "Hide settings" : "Settings"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            startIcon: /* @__PURE__ */ jsx(Pencil, {}),
+            onClick: saveDraft,
+            loading: saving,
+            children: "Save draft"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(Check, {}), onClick: publish, loading: publishing, children: "Publish" })
+      ] })
+    ] }) }),
+    showSettings && /* @__PURE__ */ jsx(Box, { padding: 4, background: "primary100", style: { borderBottom: "1px solid var(--strapi-primary-200)" }, children: /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "flex-start", style: { flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsxs(Field.Root, { style: { minWidth: 300 }, children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: "Description" }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: description,
+            onChange: (e) => setDescription(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: "Submit button" }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: settings.submitButtonText,
+            onChange: (e) => setSettings((s) => ({ ...s, submitButtonText: e.target.value }))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Field.Root, { style: { minWidth: 300 }, children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: "Success message" }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: settings.successMessage,
+            onChange: (e) => setSettings((s) => ({ ...s, successMessage: e.target.value }))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { gap: 4, alignItems: "center", children: [
+        /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx(
+            Toggle,
+            {
+              checked: settings.enableHoneypot,
+              onChange: () => setSettings((s) => ({ ...s, enableHoneypot: !s.enableHoneypot })),
+              onLabel: "Yes",
+              offLabel: "No"
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "Honeypot anti-spam" })
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx(
+            Toggle,
+            {
+              checked: settings.publicPage,
+              onChange: () => setSettings((s) => ({ ...s, publicPage: !s.publicPage })),
+              onLabel: "Yes",
+              offLabel: "No"
+            }
+          ),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", children: "Public page" })
+        ] })
+      ] })
+    ] }) }),
+    settings.publicPage && slug && /* @__PURE__ */ jsx(
+      Box,
+      {
+        paddingTop: 2,
+        paddingBottom: 2,
+        paddingLeft: 4,
+        paddingRight: 4,
+        background: "success100",
+        style: { borderBottom: "1px solid var(--strapi-success-200)", flexShrink: 0 },
+        children: /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "success700", fontWeight: "semiBold", children: "Public URL:" }),
+          /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "success600", style: { fontFamily: "monospace" }, children: [
+            window.location.origin,
+            "/api/strapi-plugin-form-builder-cms/page/",
+            slug
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "S",
+              onClick: () => window.open(`${window.location.origin}/api/strapi-plugin-form-builder-cms/page/${slug}`, "_blank"),
+              children: "Open"
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Flex, { style: { flex: 1, minHeight: 0 }, children: [
+      /* @__PURE__ */ jsx(FieldPalette, { onAdd: addField }),
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          padding: 4,
+          style: { flex: 1, overflowY: "auto", minWidth: 0, alignSelf: "stretch" },
+          children: fields.length === 0 ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              padding: 10,
+              background: "neutral100",
+              hasRadius: true,
+              style: { border: "2px dashed var(--strapi-neutral-300)", textAlign: "center" },
+              children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral500", children: "Click on a field in the left panel to add it to the form" })
+            }
+          ) : /* @__PURE__ */ jsx(
+            DropZone,
+            {
+              fields,
+              selectedId: selectedFieldId,
+              onSelect: setSelectedFieldId,
+              onDelete: deleteField,
+              onReorder: reorderFields
+            }
+          )
+        }
+      ),
+      selectedField && /* @__PURE__ */ jsx(
+        FieldSettingsPanel,
+        {
+          field: selectedField,
+          onChange: updateField
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      FormPreview,
+      {
+        title,
+        fields,
+        settings,
+        open: showPreview,
+        onClose: () => setShowPreview(false)
+      }
+    ),
+    !isNew && /* @__PURE__ */ jsx(
+      EmbedModal,
+      {
+        formId: id,
+        open: showEmbed,
+        onClose: () => setShowEmbed(false)
+      }
+    )
+  ] });
+}
+function SubmissionsPage() {
+  const { formId } = useParams();
+  const navigate = useNavigate();
+  const api = useFormsApi();
+  const [form, setForm] = useState(null);
+  const [submissions, setSubmissions] = useState([]);
+  const [stats, setStats] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [statusFilter, setStatusFilter] = useState("");
+  const [selected, setSelected] = useState(null);
+  const [deleteTarget, setDeleteTarget] = useState(null);
+  const load = async () => {
+    setLoading(true);
+    const [formData, subData, statsData] = await Promise.all([
+      api.getForm(Number(formId)),
+      api.getSubmissions(Number(formId), statusFilter ? { status: statusFilter } : {}),
+      api.getStats(Number(formId))
+    ]);
+    setForm(formData);
+    setSubmissions(subData?.results || subData || []);
+    setStats(statsData);
+    setLoading(false);
+  };
+  useEffect(() => {
+    load();
+  }, [formId, statusFilter]);
+  const dataFields = (form?.fields || []).filter(
+    (f) => !["heading", "paragraph", "divider"].includes(f.type)
+  );
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    await api.deleteSubmission(deleteTarget);
+    setDeleteTarget(null);
+    load();
+  };
+  const statusColor = {
+    new: "success",
+    read: "secondary",
+    archived: "neutral"
+  };
+  return /* @__PURE__ */ jsxs(Box, { padding: 8, children: [
+    /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 6, children: [
+      /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}),
+            onClick: () => navigate(`/plugins/${PLUGIN_ID}`),
+            children: "Back"
+          }
+        ),
+        /* @__PURE__ */ jsxs(Typography, { variant: "alpha", children: [
+          "Submissions — ",
+          form?.title || "..."
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Flex, { gap: 3, alignItems: "center", children: [
+        stats && /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+          /* @__PURE__ */ jsxs(Badge, { children: [
+            "Total: ",
+            stats.total
+          ] }),
+          /* @__PURE__ */ jsxs(Badge, { active: true, children: [
+            "New: ",
+            stats.byStatus?.new || 0
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          SingleSelect,
+          {
+            "aria-label": "Filter by status",
+            value: statusFilter,
+            onChange: (val) => setStatusFilter(String(val)),
+            placeholder: "All statuses",
+            size: "S",
+            children: [
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "", children: "All" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "new", children: "New" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "read", children: "Read" }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "archived", children: "Archived" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    loading ? /* @__PURE__ */ jsx(Typography, { children: "Loading..." }) : submissions.length === 0 ? /* @__PURE__ */ jsx(Box, { padding: 10, background: "neutral100", borderRadius: "4px", style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: "No submissions yet." }) }) : /* @__PURE__ */ jsxs(Table, { colCount: dataFields.length + 4, rowCount: submissions.length, children: [
+      /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "ID" }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Status" }) }),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Date" }) }),
+        dataFields.map((f) => /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: f.label }) }, f.id)),
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Actions" }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Tbody, { children: submissions.map((sub) => /* @__PURE__ */ jsxs(Tr, { children: [
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { children: sub.id }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Badge, { variant: statusColor[sub.status], children: sub.status }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: new Date(sub.createdAt).toLocaleString() }) }),
+        dataFields.map((f) => /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { style: { maxWidth: 150, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: String(sub.data?.[f.name] ?? "") }) }, f.id)),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+          /* @__PURE__ */ jsx(IconButton, { label: "View details", onClick: () => setSelected(sub), children: /* @__PURE__ */ jsx(Eye, {}) }),
+          /* @__PURE__ */ jsx(IconButton, { label: "Delete", onClick: () => setDeleteTarget(sub.id), children: /* @__PURE__ */ jsx(Trash, {}) })
+        ] }) })
+      ] }, sub.id)) })
+    ] }),
+    selected && /* @__PURE__ */ jsx(Dialog.Root, { open: true, onOpenChange: () => setSelected(null), children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
+      /* @__PURE__ */ jsxs(Dialog.Header, { children: [
+        "Submission #",
+        selected.id
+      ] }),
+      /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsxs("div", { style: { textAlign: "left" }, children: [
+        /* @__PURE__ */ jsxs("div", { style: {
+          display: "grid",
+          gridTemplateColumns: "80px 1fr",
+          rowGap: 10,
+          columnGap: 16,
+          background: "var(--strapi-neutral-100)",
+          borderRadius: 6,
+          padding: "12px 16px",
+          marginBottom: 16
+        }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "semiBold", textColor: "neutral500", children: "Status" }),
+          /* @__PURE__ */ jsx(Badge, { variant: statusColor[selected.status], children: selected.status.toUpperCase() }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "semiBold", textColor: "neutral500", children: "Date" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", children: new Date(selected.createdAt).toLocaleString() }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "semiBold", textColor: "neutral500", children: "IP" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "pi", children: selected.ipAddress || "—" })
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral400", style: { display: "block", marginBottom: 8 }, children: "SUBMITTED DATA" }),
+        /* @__PURE__ */ jsx("div", { style: {
+          border: "1px solid var(--strapi-neutral-200)",
+          borderRadius: 6,
+          overflow: "hidden"
+        }, children: dataFields.length === 0 ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral500", style: { padding: "12px 16px", display: "block" }, children: "No data fields." }) : dataFields.map((f, i) => {
+          const val = String(selected.data?.[f.name] ?? "");
+          return /* @__PURE__ */ jsxs("div", { style: {
+            display: "grid",
+            gridTemplateColumns: "140px 1fr",
+            columnGap: 16,
+            padding: "10px 16px",
+            background: i % 2 === 0 ? "#fff" : "var(--strapi-neutral-100)",
+            alignItems: "start"
+          }, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "semiBold", textColor: "neutral600", style: { whiteSpace: "nowrap" }, children: f.label }),
+            /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: val ? "neutral800" : "neutral400", children: val || "—" })
+          ] }, f.id);
+        }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+        /* @__PURE__ */ jsx(Dialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", children: "Close" }) }),
+        /* @__PURE__ */ jsx(Dialog.Action, { children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: async () => {
+              await api.updateSubmissionStatus(selected.id, "read");
+              setSelected(null);
+              load();
+            },
+            children: "Mark as read"
+          }
+        ) })
+      ] })
+    ] }) }),
+    deleteTarget && /* @__PURE__ */ jsx(Dialog.Root, { open: true, onOpenChange: () => setDeleteTarget(null), children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
+      /* @__PURE__ */ jsx(Dialog.Header, { children: "Confirm delete" }),
+      /* @__PURE__ */ jsx(Dialog.Body, { children: /* @__PURE__ */ jsx(Typography, { children: "Delete this submission?" }) }),
+      /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+        /* @__PURE__ */ jsx(Dialog.Cancel, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", children: "Cancel" }) }),
+        /* @__PURE__ */ jsx(Dialog.Action, { children: /* @__PURE__ */ jsx(Button, { variant: "danger", onClick: handleDelete, children: "Delete" }) })
+      ] })
+    ] }) })
+  ] });
+}
+const App = () => {
+  return /* @__PURE__ */ jsxs(Routes, { children: [
+    /* @__PURE__ */ jsx(Route, { index: true, element: /* @__PURE__ */ jsx(FormListPage, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "builder/new", element: /* @__PURE__ */ jsx(FormBuilderPage, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "builder/:id", element: /* @__PURE__ */ jsx(FormBuilderPage, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "submissions/:formId", element: /* @__PURE__ */ jsx(SubmissionsPage, {}) }),
+    /* @__PURE__ */ jsx(Route, { path: "*", element: /* @__PURE__ */ jsx(Page.Error, {}) })
+  ] });
+};
+export {
+  App
+};