@dani-builder/strapi-plugin-builder 0.16.0 → 1.0.0

package/dist/admin/index.mjs

@@ -0,0 +1,1006 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res, err) => function __init() {
+  if (err) throw err[0];
+  try {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  } catch (e) {
+    throw err = [e], e;
+  }
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// admin/src/form.ts
+function savePayload(form) {
+  return {
+    slug: form.slug,
+    name: form.name,
+    targetUid: form.targetUid,
+    fields: form.fields.map((field) => ({
+      ...field,
+      options: field.options?.map((option) => ({ ...option }))
+    })),
+    consent: { label: form.consent.label, version: form.consent.version }
+  };
+}
+function moveField(fields, index, direction) {
+  const next = [...fields];
+  const current = next[index];
+  const other = next[index + direction];
+  if (!current || !other) return fields;
+  next[index] = other;
+  next[index + direction] = current;
+  return next;
+}
+function setRequired(field, required, schema) {
+  return { ...field, required: schema.required || required };
+}
+function parseImport(source) {
+  let value;
+  try {
+    value = JSON.parse(source);
+  } catch {
+    throw new Error("Invalid JSON. Choose a form export JSON file.");
+  }
+  if (!value || typeof value !== "object" || Array.isArray(value))
+    throw new Error("Expected a form definition object.");
+  return value;
+}
+function errorMessage(error) {
+  if (error && typeof error === "object" && "response" in error) {
+    const response = error.response;
+    if (response?.data?.error?.message) return response.data.error.message;
+  }
+  return error instanceof Error ? error.message : "Unable to complete the request.";
+}
+var emptyForm;
+var init_form = __esm({
+  "admin/src/form.ts"() {
+    "use strict";
+    emptyForm = {
+      slug: "",
+      name: "",
+      targetUid: "",
+      fields: [],
+      consent: { label: "", version: "1" }
+    };
+  }
+});
+
+// admin/src/api.ts
+function formApi(client) {
+  return {
+    async list() {
+      return (await client.get(root)).data.data;
+    },
+    async get(id) {
+      return (await client.get(
+        `${root}/${encodeURIComponent(id)}`
+      )).data.data;
+    },
+    async targets() {
+      return (await client.get(`${root}/targets`)).data.data;
+    },
+    async fields(targetUid) {
+      return (await client.get(`${root}/fields`, {
+        params: { targetUid }
+      })).data.data;
+    },
+    async save(form, id) {
+      const body = { data: savePayload(form) };
+      return (id ? await client.put(
+        `${root}/${encodeURIComponent(id)}`,
+        body
+      ) : await client.post(root, body)).data.data;
+    },
+    async remove(id) {
+      await client.del(`${root}/${encodeURIComponent(id)}`);
+    },
+    async export(id) {
+      return (await client.get(
+        `${root}/${encodeURIComponent(id)}/export`
+      )).data.data;
+    },
+    async import(data, id) {
+      return (id ? await client.put(
+        `${root}/${encodeURIComponent(id)}/import`,
+        { data }
+      ) : await client.post(`${root}/import`, {
+        data
+      })).data.data;
+    }
+  };
+}
+function downloadForm(value, slug) {
+  const url = URL.createObjectURL(
+    new Blob([JSON.stringify(value, null, 2)], { type: "application/json" })
+  );
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = `${slug}.json`;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}
+var root;
+var init_api = __esm({
+  "admin/src/api.ts"() {
+    "use strict";
+    init_form();
+    root = "/plugins/builder/forms";
+  }
+});
+
+// admin/src/ui.tsx
+import { Box, Flex, Typography } from "@strapi/design-system";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function Section({
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsx2(Box, { background: "neutral0", padding: 6, hasRadius: true, shadow: "tableShadow", children: /* @__PURE__ */ jsxs2(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+    /* @__PURE__ */ jsx2(Typography, { tag: "h2", variant: "delta", children: title }),
+    children
+  ] }) });
+}
+function TextField({
+  label,
+  value,
+  onChange,
+  disabled,
+  required,
+  multiline
+}) {
+  const props = {
+    value,
+    disabled,
+    required,
+    onChange: (event) => onChange(event.target.value),
+    style: {
+      width: "100%",
+      padding: "10px",
+      border: "1px solid #8e8ea9",
+      borderRadius: 4,
+      font: "inherit",
+      color: "#32324d",
+      background: disabled ? "#f6f6f9" : "#fff"
+    }
+  };
+  return /* @__PURE__ */ jsxs2("label", { style: { display: "grid", gap: 6 }, children: [
+    /* @__PURE__ */ jsx2(Typography, { children: label }),
+    multiline ? /* @__PURE__ */ jsx2("textarea", { ...props, rows: 3 }) : /* @__PURE__ */ jsx2("input", { ...props })
+  ] });
+}
+function ErrorNotice({ message }) {
+  return message ? /* @__PURE__ */ jsx2(Box, { role: "alert", padding: 4, background: "danger100", children: /* @__PURE__ */ jsx2(Typography, { textColor: "danger700", children: message }) }) : null;
+}
+var init_ui = __esm({
+  "admin/src/ui.tsx"() {
+    "use strict";
+  }
+});
+
+// admin/src/import-form.tsx
+import { useRef, useState } from "react";
+import { Button, Flex as Flex2, Typography as Typography2 } from "@strapi/design-system";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ImportForm({
+  replace,
+  disabled,
+  onImport
+}) {
+  const [source, setSource] = useState("");
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+  const lock = useRef(false);
+  async function submit() {
+    if (lock.current) return;
+    lock.current = true;
+    setBusy(true);
+    setError("");
+    try {
+      await onImport(parseImport(source));
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      lock.current = false;
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs3(Flex2, { direction: "column", alignItems: "stretch", gap: 3, children: [
+    /* @__PURE__ */ jsxs3(Typography2, { children: [
+      replace ? "Replace this saved form with an exported definition. The slug must match. The server increments the form version." : "Import a form export. A new form starts at version 1.",
+      " ",
+      "Consent version is preserved. Existing slugs cannot be duplicated."
+    ] }),
+    /* @__PURE__ */ jsxs3("label", { children: [
+      "Choose JSON file",
+      " ",
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: "file",
+          accept: ".json,application/json",
+          disabled: busy || disabled,
+          onChange: (event) => {
+            const file = event.target.files?.[0];
+            if (file)
+              void file.text().then(setSource).catch((cause) => setError(errorMessage(cause)));
+            event.target.value = "";
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx3(
+      TextField,
+      {
+        label: "Form JSON",
+        value: source,
+        onChange: setSource,
+        multiline: true,
+        disabled: busy || disabled
+      }
+    ),
+    /* @__PURE__ */ jsx3(ErrorNotice, { message: error }),
+    /* @__PURE__ */ jsx3(
+      Button,
+      {
+        type: "button",
+        disabled: busy || disabled || !source.trim(),
+        onClick: () => void submit(),
+        children: busy ? "Importing\u2026" : replace ? "Replace saved form from JSON" : "Import new form"
+      }
+    )
+  ] });
+}
+var init_import_form = __esm({
+  "admin/src/import-form.tsx"() {
+    "use strict";
+    init_form();
+    init_ui();
+  }
+});
+
+// admin/src/form-list-page.tsx
+import { useCallback, useEffect, useRef as useRef2, useState as useState2 } from "react";
+import {
+  Button as Button2,
+  Flex as Flex3,
+  Table,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  Typography as Typography3
+} from "@strapi/design-system";
+import { Layouts, Page, useFetchClient } from "@strapi/strapi/admin";
+import { useNavigate } from "react-router-dom";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function FormListPage({ canUpdate }) {
+  const client = useFetchClient();
+  const { get } = client;
+  const navigate = useNavigate();
+  const [rows, setRows] = useState2([]);
+  const [loading, setLoading] = useState2(true);
+  const [error, setError] = useState2("");
+  const [busy, setBusy] = useState2(false);
+  const [removing, setRemoving] = useState2(null);
+  const lock = useRef2(false);
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError("");
+    try {
+      setRows(
+        (await get("/plugins/builder/forms")).data.data
+      );
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      setLoading(false);
+    }
+  }, [get]);
+  useEffect(() => {
+    void load();
+  }, [load]);
+  async function mutate(action) {
+    if (lock.current) return;
+    lock.current = true;
+    setBusy(true);
+    setError("");
+    try {
+      await action();
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      lock.current = false;
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx4(
+      Layouts.Header,
+      {
+        title: "Builder Forms",
+        subtitle: "Manage public form definitions and consent.",
+        primaryAction: canUpdate ? /* @__PURE__ */ jsx4(
+          Button2,
+          {
+            disabled: busy,
+            onClick: () => navigate("/plugins/builder/forms/new"),
+            children: "Create form"
+          }
+        ) : void 0
+      }
+    ),
+    /* @__PURE__ */ jsx4(Layouts.Content, { children: /* @__PURE__ */ jsxs4(Flex3, { direction: "column", alignItems: "stretch", gap: 6, children: [
+      /* @__PURE__ */ jsx4(ErrorNotice, { message: error }),
+      error && /* @__PURE__ */ jsx4(Button2, { onClick: () => void load(), disabled: busy || loading, children: "Retry list" }),
+      /* @__PURE__ */ jsx4(Section, { title: "Forms", children: loading ? /* @__PURE__ */ jsx4(Page.Loading, {}) : rows.length === 0 ? /* @__PURE__ */ jsx4(Typography3, { children: "No forms yet." }) : /* @__PURE__ */ jsxs4(Table, { colCount: 5, rowCount: rows.length, children: [
+        /* @__PURE__ */ jsx4(Thead, { children: /* @__PURE__ */ jsx4(Tr, { children: ["Name", "Slug", "Target", "Version", "Actions"].map(
+          (name) => /* @__PURE__ */ jsx4(Th, { children: /* @__PURE__ */ jsx4(Typography3, { variant: "sigma", children: name }) }, name)
+        ) }) }),
+        /* @__PURE__ */ jsx4(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxs4(Tr, { children: [
+          /* @__PURE__ */ jsx4(Td, { children: /* @__PURE__ */ jsx4(Typography3, { children: row.name }) }),
+          /* @__PURE__ */ jsx4(Td, { children: /* @__PURE__ */ jsx4(Typography3, { children: row.slug }) }),
+          /* @__PURE__ */ jsx4(Td, { children: /* @__PURE__ */ jsx4(Typography3, { children: row.targetUid }) }),
+          /* @__PURE__ */ jsx4(Td, { children: /* @__PURE__ */ jsx4(Typography3, { children: row.version }) }),
+          /* @__PURE__ */ jsx4(Td, { children: /* @__PURE__ */ jsxs4(Flex3, { gap: 2, children: [
+            /* @__PURE__ */ jsxs4(
+              Button2,
+              {
+                variant: "secondary",
+                disabled: busy,
+                onClick: () => navigate(
+                  `/plugins/builder/forms/${row.documentId}`
+                ),
+                children: [
+                  canUpdate ? "Edit" : "View",
+                  " ",
+                  row.name
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              Button2,
+              {
+                variant: "tertiary",
+                disabled: busy,
+                onClick: () => void mutate(
+                  async () => downloadForm(
+                    await formApi(client).export(row.documentId),
+                    row.slug
+                  )
+                ),
+                children: "Export"
+              }
+            ),
+            canUpdate && /* @__PURE__ */ jsx4(
+              Button2,
+              {
+                variant: "danger-light",
+                disabled: busy,
+                onClick: () => setRemoving(row),
+                children: "Delete"
+              }
+            )
+          ] }) })
+        ] }, row.documentId)) })
+      ] }) }),
+      removing && /* @__PURE__ */ jsxs4(Section, { title: `Delete ${removing.name}?`, children: [
+        /* @__PURE__ */ jsx4(Typography3, { children: "This permanently deletes the form definition. Forms with submissions cannot be deleted." }),
+        /* @__PURE__ */ jsxs4(Flex3, { gap: 3, children: [
+          /* @__PURE__ */ jsx4(
+            Button2,
+            {
+              variant: "danger",
+              disabled: busy,
+              onClick: () => void mutate(async () => {
+                await formApi(client).remove(removing.documentId);
+                setRemoving(null);
+                await load();
+              }),
+              children: "Confirm delete"
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            Button2,
+            {
+              variant: "secondary",
+              disabled: busy,
+              onClick: () => setRemoving(null),
+              children: "Cancel"
+            }
+          )
+        ] })
+      ] }),
+      canUpdate && /* @__PURE__ */ jsx4(Section, { title: "Import form", children: /* @__PURE__ */ jsx4(
+        ImportForm,
+        {
+          disabled: busy,
+          onImport: async (value) => {
+            if (lock.current) return;
+            lock.current = true;
+            setBusy(true);
+            try {
+              const saved = await formApi(client).import(value);
+              navigate(`/plugins/builder/forms/${saved.documentId}`);
+            } finally {
+              lock.current = false;
+              setBusy(false);
+            }
+          }
+        }
+      ) })
+    ] }) })
+  ] });
+}
+var init_form_list_page = __esm({
+  "admin/src/form-list-page.tsx"() {
+    "use strict";
+    init_api();
+    init_form();
+    init_ui();
+    init_import_form();
+  }
+});
+
+// admin/src/field-editor.tsx
+import { Button as Button3, Flex as Flex4, Typography as Typography4 } from "@strapi/design-system";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function FieldEditor({
+  fields,
+  schema,
+  disabled,
+  onChange
+}) {
+  function update(index, field) {
+    onChange(fields.map((item, at) => at === index ? field : item));
+  }
+  return /* @__PURE__ */ jsxs5(Section, { title: "Fields", children: [
+    /* @__PURE__ */ jsx5(Typography4, { children: "Select target fields, then adjust their order and presentation. Required target fields cannot be removed or made optional. Hidden fields remain part of submission validation." }),
+    /* @__PURE__ */ jsx5(Flex4, { wrap: "wrap", gap: 4, children: schema.map((item) => /* @__PURE__ */ jsxs5("label", { children: [
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          type: "checkbox",
+          checked: fields.some((field) => field.name === item.name),
+          disabled: disabled || item.required,
+          onChange: (event) => onChange(
+            event.target.checked ? [...fields, { ...item }] : fields.filter((field) => field.name !== item.name)
+          )
+        }
+      ),
+      " ",
+      item.name,
+      item.required ? " (schema required)" : ""
+    ] }, item.name)) }),
+    fields.map((field, index) => {
+      const attribute = schema.find((item) => item.name === field.name);
+      return /* @__PURE__ */ jsxs5(
+        Section,
+        {
+          title: `${index + 1}. ${field.name} (${field.type})`,
+          children: [
+            /* @__PURE__ */ jsxs5(Flex4, { gap: 3, children: [
+              /* @__PURE__ */ jsxs5(
+                Button3,
+                {
+                  type: "button",
+                  variant: "secondary",
+                  disabled: disabled || index === 0,
+                  onClick: () => onChange(moveField(fields, index, -1)),
+                  children: [
+                    "Move ",
+                    field.name,
+                    " up"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs5(
+                Button3,
+                {
+                  type: "button",
+                  variant: "secondary",
+                  disabled: disabled || index === fields.length - 1,
+                  onClick: () => onChange(moveField(fields, index, 1)),
+                  children: [
+                    "Move ",
+                    field.name,
+                    " down"
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx5(
+              TextField,
+              {
+                label: "Label",
+                required: true,
+                disabled,
+                value: field.label,
+                onChange: (label) => update(index, { ...field, label })
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              TextField,
+              {
+                label: "Placeholder",
+                disabled,
+                value: field.placeholder ?? "",
+                onChange: (placeholder) => update(index, { ...field, placeholder })
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              TextField,
+              {
+                label: "Help text",
+                disabled,
+                value: field.help ?? "",
+                onChange: (help) => update(index, { ...field, help })
+              }
+            ),
+            /* @__PURE__ */ jsxs5("label", { children: [
+              /* @__PURE__ */ jsx5(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: field.required,
+                  disabled: disabled || !attribute || attribute.required,
+                  onChange: (event) => {
+                    if (attribute)
+                      update(
+                        index,
+                        setRequired(field, event.target.checked, attribute)
+                      );
+                  }
+                }
+              ),
+              " ",
+              "Required",
+              attribute?.required ? " (required by target schema)" : ""
+            ] }),
+            /* @__PURE__ */ jsxs5("label", { children: [
+              /* @__PURE__ */ jsx5(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: field.visibility === "hidden",
+                  disabled,
+                  onChange: (event) => update(index, {
+                    ...field,
+                    visibility: event.target.checked ? "hidden" : "form"
+                  })
+                }
+              ),
+              " ",
+              "Hidden from form"
+            ] }),
+            (field.maxLength !== void 0 || field.min !== void 0 || field.max !== void 0) && /* @__PURE__ */ jsxs5(Typography4, { variant: "pi", children: [
+              "Constraints:",
+              " ",
+              JSON.stringify({
+                maxLength: field.maxLength,
+                min: field.min,
+                max: field.max
+              })
+            ] }),
+            field.options?.map((option, optionIndex) => /* @__PURE__ */ jsx5(
+              TextField,
+              {
+                label: `Option label: ${option.value}`,
+                required: true,
+                disabled,
+                value: option.label,
+                onChange: (label) => update(index, {
+                  ...field,
+                  options: field.options?.map(
+                    (item, at) => at === optionIndex ? { ...item, label } : item
+                  )
+                })
+              },
+              option.value
+            ))
+          ]
+        },
+        field.name
+      );
+    })
+  ] });
+}
+var init_field_editor = __esm({
+  "admin/src/field-editor.tsx"() {
+    "use strict";
+    init_form();
+    init_ui();
+  }
+});
+
+// admin/src/form-editor-page.tsx
+import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+import { Button as Button4, Flex as Flex5, Typography as Typography5 } from "@strapi/design-system";
+import { Layouts as Layouts2, Page as Page2, useFetchClient as useFetchClient2 } from "@strapi/strapi/admin";
+import { useNavigate as useNavigate2, useParams } from "react-router-dom";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function FormEditorPage({ canUpdate }) {
+  const { documentId } = useParams();
+  const client = useFetchClient2();
+  const { get } = client;
+  const navigate = useNavigate2();
+  const [draft, setDraft] = useState3(emptyForm);
+  const [version, setVersion] = useState3(null);
+  const [targets, setTargets] = useState3([]);
+  const [schema, setSchema] = useState3([]);
+  const [loading, setLoading] = useState3(true);
+  const [fieldsLoading, setFieldsLoading] = useState3(false);
+  const [error, setError] = useState3("");
+  const [loaded, setLoaded] = useState3(false);
+  const [busy, setBusy] = useState3(false);
+  const [retry, setRetry] = useState3(0);
+  const lock = useRef3(false);
+  const targetRequest = useRef3(0);
+  useEffect2(() => {
+    let active = true;
+    setLoading(true);
+    setLoaded(false);
+    setError("");
+    async function load() {
+      try {
+        const api = formApi(client);
+        const [available, saved] = await Promise.all([
+          api.targets(),
+          documentId ? api.get(documentId) : Promise.resolve(null)
+        ]);
+        const attrs = saved ? await api.fields(saved.targetUid) : [];
+        if (!active) return;
+        setTargets(available);
+        setDraft(
+          saved ?? {
+            ...emptyForm,
+            fields: [],
+            consent: { ...emptyForm.consent }
+          }
+        );
+        setVersion(saved?.version ?? null);
+        setSchema(attrs);
+        setLoaded(true);
+      } catch (cause) {
+        if (active) setError(errorMessage(cause));
+      } finally {
+        if (active) setLoading(false);
+      }
+    }
+    void load();
+    return () => {
+      active = false;
+      targetRequest.current += 1;
+    };
+  }, [documentId, get, retry]);
+  async function selectTarget(targetUid) {
+    const request = ++targetRequest.current;
+    setDraft((current) => ({ ...current, targetUid, fields: [] }));
+    setSchema([]);
+    setFieldsLoading(true);
+    setError("");
+    try {
+      const attrs = await formApi(client).fields(targetUid);
+      if (request !== targetRequest.current) return;
+      setSchema(attrs);
+      setDraft((current) => ({
+        ...current,
+        fields: attrs.filter((field) => field.required)
+      }));
+    } catch (cause) {
+      if (request === targetRequest.current) setError(errorMessage(cause));
+    } finally {
+      if (request === targetRequest.current) setFieldsLoading(false);
+    }
+  }
+  async function run(action) {
+    if (lock.current) return;
+    lock.current = true;
+    setBusy(true);
+    setError("");
+    try {
+      await action();
+    } catch (cause) {
+      setError(errorMessage(cause));
+    } finally {
+      lock.current = false;
+      setBusy(false);
+    }
+  }
+  if (loading) return /* @__PURE__ */ jsx6(Page2.Loading, {});
+  const disabled = !canUpdate || busy || fieldsLoading;
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    /* @__PURE__ */ jsx6(
+      Layouts2.Header,
+      {
+        title: documentId ? draft.name || "Form" : "Create form",
+        subtitle: version ? `Form version ${version} \xB7 assigned by server on every save` : "New forms start at version 1.",
+        navigationAction: /* @__PURE__ */ jsx6(
+          Button4,
+          {
+            variant: "tertiary",
+            onClick: () => navigate("/plugins/builder/forms"),
+            children: "Back to forms"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx6(Layouts2.Content, { children: /* @__PURE__ */ jsxs6(Flex5, { direction: "column", alignItems: "stretch", gap: 6, children: [
+      /* @__PURE__ */ jsx6(ErrorNotice, { message: error }),
+      !loaded ? /* @__PURE__ */ jsx6(Button4, { onClick: () => setRetry((value) => value + 1), children: "Retry loading form" }) : /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx6(
+          "form",
+          {
+            onSubmit: (event) => {
+              event.preventDefault();
+              if (disabled) return;
+              void run(async () => {
+                const saved = await formApi(client).save(draft, documentId);
+                setDraft(saved);
+                setVersion(saved.version);
+                if (!documentId)
+                  navigate(`/plugins/builder/forms/${saved.documentId}`, {
+                    replace: true
+                  });
+              });
+            },
+            children: /* @__PURE__ */ jsxs6(Flex5, { direction: "column", alignItems: "stretch", gap: 6, children: [
+              /* @__PURE__ */ jsxs6(Section, { title: "Definition", children: [
+                /* @__PURE__ */ jsx6(
+                  TextField,
+                  {
+                    label: "Name",
+                    required: true,
+                    disabled,
+                    value: draft.name,
+                    onChange: (name) => setDraft({ ...draft, name })
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  TextField,
+                  {
+                    label: "Slug",
+                    required: true,
+                    disabled: disabled || Boolean(documentId),
+                    value: draft.slug,
+                    onChange: (slug) => setDraft({ ...draft, slug })
+                  }
+                ),
+                /* @__PURE__ */ jsx6(Typography5, { variant: "pi", children: "Use lowercase letters, numbers and hyphens. The slug cannot change after creation." }),
+                /* @__PURE__ */ jsxs6("label", { children: [
+                  "Target content type",
+                  " ",
+                  /* @__PURE__ */ jsxs6(
+                    "select",
+                    {
+                      required: true,
+                      disabled,
+                      value: draft.targetUid,
+                      onChange: (event) => void selectTarget(event.target.value),
+                      style: { padding: 10, width: "100%" },
+                      children: [
+                        /* @__PURE__ */ jsx6("option", { value: "", children: "Select a target" }),
+                        targets.map((target) => /* @__PURE__ */ jsxs6("option", { value: target.uid, children: [
+                          target.name,
+                          " \u2014 ",
+                          target.uid
+                        ] }, target.uid))
+                      ]
+                    }
+                  )
+                ] }),
+                fieldsLoading && /* @__PURE__ */ jsx6(Typography5, { children: "Loading target fields\u2026" })
+              ] }),
+              /* @__PURE__ */ jsx6(
+                FieldEditor,
+                {
+                  fields: draft.fields,
+                  schema,
+                  disabled,
+                  onChange: (fields) => setDraft({ ...draft, fields })
+                }
+              ),
+              /* @__PURE__ */ jsxs6(Section, { title: "Consent", children: [
+                /* @__PURE__ */ jsx6(
+                  TextField,
+                  {
+                    label: "Consent label",
+                    required: true,
+                    multiline: true,
+                    disabled,
+                    value: draft.consent.label,
+                    onChange: (label) => setDraft({
+                      ...draft,
+                      consent: { ...draft.consent, label }
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  TextField,
+                  {
+                    label: "Consent version",
+                    required: true,
+                    disabled,
+                    value: draft.consent.version,
+                    onChange: (consentVersion) => setDraft({
+                      ...draft,
+                      consent: {
+                        ...draft.consent,
+                        version: consentVersion
+                      }
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsx6(Typography5, { variant: "pi", children: "Consent version identifies the terms accepted by the visitor and is separate from the server form version." })
+              ] }),
+              canUpdate && /* @__PURE__ */ jsx6(
+                Button4,
+                {
+                  type: "submit",
+                  disabled: disabled || !draft.targetUid || !draft.fields.length,
+                  children: busy ? "Saving\u2026" : "Save form"
+                }
+              )
+            ] })
+          }
+        ),
+        documentId && /* @__PURE__ */ jsxs6(Section, { title: "Portable definition", children: [
+          /* @__PURE__ */ jsx6(
+            Button4,
+            {
+              disabled: busy,
+              onClick: () => void run(
+                async () => downloadForm(
+                  await formApi(client).export(documentId),
+                  draft.slug
+                )
+              ),
+              children: "Export saved form JSON"
+            }
+          ),
+          /* @__PURE__ */ jsx6(Typography5, { variant: "pi", children: "Export uses the saved definition. Notification credentials are masked by the server." }),
+          canUpdate && /* @__PURE__ */ jsx6(
+            ImportForm,
+            {
+              replace: true,
+              disabled: busy || fieldsLoading,
+              onImport: async (value) => {
+                if (lock.current) return;
+                lock.current = true;
+                setBusy(true);
+                try {
+                  const saved = await formApi(client).import(
+                    value,
+                    documentId
+                  );
+                  setDraft(saved);
+                  setVersion(saved.version);
+                  setSchema(
+                    await formApi(client).fields(saved.targetUid)
+                  );
+                } finally {
+                  lock.current = false;
+                  setBusy(false);
+                }
+              }
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+var init_form_editor_page = __esm({
+  "admin/src/form-editor-page.tsx"() {
+    "use strict";
+    init_api();
+    init_form();
+    init_ui();
+    init_field_editor();
+    init_import_form();
+  }
+});
+
+// admin/src/app.tsx
+var app_exports = {};
+__export(app_exports, {
+  default: () => App
+});
+import { Navigate, Route, Routes } from "react-router-dom";
+import { Layouts as Layouts3, Page as Page3, useRBAC } from "@strapi/strapi/admin";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function App() {
+  const { allowedActions, isLoading } = useRBAC(
+    ["read", "update"].map((action) => ({
+      action: `plugin::builder.forms.${action}`,
+      subject: null
+    }))
+  );
+  if (isLoading) return /* @__PURE__ */ jsx7(Page3.Loading, {});
+  if (!allowedActions.canRead) return /* @__PURE__ */ jsx7(Page3.NoPermissions, {});
+  const canUpdate = allowedActions.canUpdate === true;
+  return /* @__PURE__ */ jsx7(Layouts3.Root, { children: /* @__PURE__ */ jsxs7(Routes, { children: [
+    /* @__PURE__ */ jsx7(Route, { index: true, element: /* @__PURE__ */ jsx7(Navigate, { to: "forms", replace: true }) }),
+    /* @__PURE__ */ jsx7(Route, { path: "forms", element: /* @__PURE__ */ jsx7(FormListPage, { canUpdate }) }),
+    /* @__PURE__ */ jsx7(
+      Route,
+      {
+        path: "forms/new",
+        element: canUpdate ? /* @__PURE__ */ jsx7(FormEditorPage, { canUpdate: true }) : /* @__PURE__ */ jsx7(Page3.NoPermissions, {})
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      Route,
+      {
+        path: "forms/:documentId",
+        element: /* @__PURE__ */ jsx7(FormEditorPage, { canUpdate })
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      Route,
+      {
+        path: "*",
+        element: /* @__PURE__ */ jsx7(Page3.Error, { content: "Form page not found." })
+      }
+    )
+  ] }) });
+}
+var init_app = __esm({
+  "admin/src/app.tsx"() {
+    "use strict";
+    init_form_list_page();
+    init_form_editor_page();
+  }
+});
+
+// admin/src/plugin-icon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function BuilderIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "5",
+            y: "3",
+            width: "14",
+            height: "18",
+            rx: "2",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { d: "M8 8h8M8 12h8M8 16h4", stroke: "currentColor", strokeWidth: "1.5" })
+      ]
+    }
+  );
+}
+
+// admin/src/index.ts
+var index_default = {
+  register(app) {
+    app.addMenuLink({
+      to: "plugins/builder",
+      icon: BuilderIcon,
+      intlLabel: { id: "builder.forms", defaultMessage: "Builder Forms" },
+      Component: () => Promise.resolve().then(() => (init_app(), app_exports)),
+      permissions: [{ action: "plugin::builder.forms.read", subject: null }]
+    });
+    app.registerPlugin({ id: "builder", name: "Builder" });
+  }
+};
+export {
+  index_default as default
+};