strapi-plugin-hubspot 0.6.1 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Changelog
 
+## 0.8.0 — 2026-08-29
+
+### Improved (builder UX pass, from a live session)
+- **The whole step card now selects the step** — the click target was the tiny
+  "Step N" text, which read as "step titles can't be edited". Inner controls
+  stop propagation, so field selection and the action buttons are unaffected.
+- Field panel gains the imported-but-invisible settings: **icon**, **answer
+  memory (persist)** and **CSS classes**; the step and form panels gain **CSS
+  classes** too.
+- **Form-level `class`** now exists end to end: content-type attribute, save,
+  public API, legacy import (it used to be silently dropped on migration).
+- **Duplicate** action on the forms list — every locale of the draft is
+  copied under a fresh slug.
+- Leaving the editor with unsaved changes now warns before the tab closes.
+- Cosmetics: the actions column no longer shows a raw translation key, and the
+  structure column pluralizes properly.
+
+## 0.7.0 — 2026-08-29
+
+### Added
+- `hubspot.form-picker` custom field: a searchable select over the forms
+  built in the builder, storing the chosen form's **slug** as a plain string —
+  for host content that references a form (a hero block, a landing…).
+  Unpublished forms stay selectable but are flagged; a slug whose form was
+  deleted is kept and flagged instead of silently dropped; a fetch failure
+  degrades to free text. Fed by `GET /hubspot/forms-options`, open to any
+  authenticated admin (the builder itself stays RBAC-gated).
+
+### Fixed
+- Removed an accidental self-dependency (`strapi-plugin-hubspot` listed in its
+  own `dependencies`) introduced by a stray `npm install`.
+
 ## 0.6.1 — 2026-08-28
 
 ### Fixed

package/dist/_chunks/{Forms-B2y_0-x4.mjs → Forms-77Mornxt.mjs}

@@ -1,12 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useParams, useSearchParams, Link, useNavigate, Routes, Route } from "react-router-dom";
 import * as React from "react";
-import { u as useIntl, o as objectLabel } from "./objectLabels-C9ocOgVY.mjs";
+import { u as useIntl } from "./index-CEh8vkxY.mjs";
 import { Typography, Flex, Box, SingleSelect, SingleSelectOption, TextInput, IconButton, Button, Field, Checkbox, Divider, Combobox, ComboboxOption, Loader, Badge, Textarea, Table, Thead, Tr, Th, Tbody, Td } from "@strapi/design-system";
-import { Trash, Plus, ArrowClockwise, ArrowLeft, ArrowUp, ArrowDown } from "@strapi/icons";
+import { Trash, Plus, ArrowClockwise, ArrowLeft, ArrowUp, ArrowDown, Duplicate } from "@strapi/icons";
 import { useFetchClient } from "@strapi/strapi/admin";
-import { g as getTranslation, P as PLUGIN_ID } from "./index-foVSGFWb.mjs";
-import { u as useHubspotSchema } from "./useHubspotSchema-Du3rLY_O.mjs";
+import { g as getTranslation, P as PLUGIN_ID } from "./index-LrCSAHoH.mjs";
+import { o as objectLabel } from "./objectLabels-yNrnTOBo.mjs";
+import { u as useHubspotSchema } from "./useHubspotSchema-DccG2KbZ.mjs";
 const OPERATORS = ["eq", "neq", "contains", "empty", "notEmpty", "gt", "lt"];
 const NEEDS_VALUE = /* @__PURE__ */ new Set(["eq", "neq", "contains", "gt", "lt"]);
 const ConditionEditor = ({ condition, candidates, onChange }) => {
@@ -223,6 +224,43 @@ const FieldPanel = ({ field, candidates, problem, onChange }) => {
         children: t("panel.required", "Required")
       }
     ),
+    /* @__PURE__ */ jsxs(Flex, { gap: 4, children: [
+      /* @__PURE__ */ jsx(Box, { flex: "1", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: t("panel.icon", "Icon") }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            value: field.icon ?? "",
+            placeholder: "i-lucide-building-2",
+            onChange: (e) => onChange({ icon: e.target.value })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Box, { flex: "1", children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+        /* @__PURE__ */ jsx(Field.Label, { children: t("panel.persist", "Answer memory") }),
+        /* @__PURE__ */ jsxs(
+          SingleSelect,
+          {
+            value: field.persist ?? "session",
+            onChange: (v) => onChange({ persist: v }),
+            children: [
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "session", children: t("panel.persist-session", "This visit only") }),
+              /* @__PURE__ */ jsx(SingleSelectOption, { value: "days30", children: t("panel.persist-days30", "30 days (non-identifying fields only)") })
+            ]
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Field.Root, { children: [
+      /* @__PURE__ */ jsx(Field.Label, { children: t("panel.class", "CSS classes") }),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          value: field.class ?? "",
+          onChange: (e) => onChange({ class: e.target.value })
+        }
+      )
+    ] }),
     isChoice && /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
       /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("panel.options", "Choices") }),
       (field.options ?? []).map((option, index) => /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
@@ -369,6 +407,14 @@ const FormEditor = () => {
   const [feedback, setFeedback] = React.useState(null);
   const t = (id, defaultMessage, values) => formatMessage({ id: getTranslation(id), defaultMessage }, values);
   const query = locale ? `?locale=${locale}` : "";
+  React.useEffect(() => {
+    if (!dirty) return void 0;
+    const warn = (event) => {
+      event.preventDefault();
+    };
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, [dirty]);
   React.useEffect(() => {
     get("/i18n/locales").then(({ data }) => Array.isArray(data) && setLocales(data)).catch(() => setLocales([]));
   }, [get]);
@@ -461,6 +507,7 @@ const FormEditor = () => {
           nextLabel: entry.nextLabel,
           submitLabel: entry.submitLabel,
           successMessage: entry.successMessage,
+          class: entry.class,
           definition
         }
       );
@@ -566,6 +613,8 @@ const FormEditor = () => {
             hasRadius: true,
             shadow: "tableShadow",
             padding: 4,
+            onClick: () => setSelection({ kind: "step", stepId: step.id }),
+            style: { cursor: "pointer" },
             borderColor: selection.kind === "step" && selection.stepId === step.id ? "primary600" : void 0,
             borderStyle: selection.kind === "step" && selection.stepId === step.id ? "solid" : void 0,
             borderWidth: selection.kind === "step" && selection.stepId === step.id ? "1px" : void 0,
@@ -588,7 +637,7 @@ const FormEditor = () => {
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+                /* @__PURE__ */ jsxs(Flex, { gap: 1, onClick: (e) => e.stopPropagation(), children: [
                   /* @__PURE__ */ jsx(
                     IconButton,
                     {
@@ -630,7 +679,10 @@ const FormEditor = () => {
                       background: isSelected ? "primary100" : "neutral100",
                       hasRadius: true,
                       padding: 3,
-                      onClick: () => setSelection({ kind: "field", fieldId: field.id }),
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setSelection({ kind: "field", fieldId: field.id });
+                      },
                       style: { cursor: "pointer" },
                       children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
                         /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", wrap: "wrap", children: [
@@ -688,7 +740,8 @@ const FormEditor = () => {
                   {
                     variant: "tertiary",
                     startIcon: /* @__PURE__ */ jsx(Plus, {}),
-                    onClick: () => {
+                    onClick: (e) => {
+                      e.stopPropagation();
                       const field = newField(t("editor.new-field", "New field"));
                       patchStep(step.id, { fields: [...step.fields, field] });
                       setSelection({ kind: "field", fieldId: field.id });
@@ -745,6 +798,16 @@ const FormEditor = () => {
             }
           )
         ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("panel.class", "CSS classes") }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: selectedStep.class ?? "",
+              onChange: (e) => patchStep(selectedStep.id, { class: e.target.value })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(Typography, { variant: "sigma", textColor: "neutral600", children: t("editor.step-condition", "Show this step only when…") }),
         /* @__PURE__ */ jsx(
           ConditionEditor,
@@ -818,6 +881,16 @@ const FormEditor = () => {
             }
           )
         ] }),
+        /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: t("panel.class", "CSS classes") }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: entry.class ?? "",
+              onChange: (e) => patchEntry({ class: e.target.value })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: t(
           "editor.form-hint",
           "Select a step or a field to edit it. The public endpoint serves this form at /api/hubspot/forms/{slug}.",
@@ -877,6 +950,19 @@ const FormsList = () => {
       setBusy(false);
     }
   };
+  const duplicate = async (row) => {
+    setBusy(true);
+    setError(null);
+    try {
+      const { data } = await post(
+        `/${PLUGIN_ID}/builder/forms/${row.documentId}/duplicate`
+      );
+      navigate(data.documentId);
+    } catch {
+      setError(t("forms.duplicate-error", "Could not duplicate the form."));
+      setBusy(false);
+    }
+  };
   const remove = async (row) => {
     if (!window.confirm(t("forms.delete-confirm", 'Delete "{name}" and all its locales?', { name: row.name }))) {
       return;
@@ -948,7 +1034,7 @@ const FormsList = () => {
         /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-structure", "Structure") }) }),
         /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-status", "Status") }) }),
         /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-updated", "Updated") }) }),
-        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-actions", "") }) })
+        /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: t("forms.col-actions", "Actions") }) })
       ] }) }),
       /* @__PURE__ */ jsx(Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxs(
         Tr,
@@ -958,21 +1044,32 @@ const FormsList = () => {
           children: [
             /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { fontWeight: "semiBold", children: row.name }) }),
             /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: row.slug }) }),
-            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("forms.structure", "{steps} steps · {fields} fields", {
+            /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: t("forms.structure", "{steps, plural, one {# step} other {# steps}} · {fields, plural, one {# field} other {# fields}}", {
               steps: row.steps,
               fields: row.fields
             }) }) }),
             /* @__PURE__ */ jsx(Td, { children: row.published ? /* @__PURE__ */ jsx(Badge, { backgroundColor: "success100", textColor: "success700", children: t("forms.published", "Published") }) : /* @__PURE__ */ jsx(Badge, { backgroundColor: "secondary100", textColor: "secondary700", children: t("forms.draft", "Draft") }) }),
             /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: row.updatedAt ? new Date(row.updatedAt).toLocaleString() : "—" }) }),
-            /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                label: t("forms.delete", "Delete"),
-                onClick: () => remove(row),
-                disabled: busy,
-                children: /* @__PURE__ */ jsx(Trash, {})
-              }
-            ) })
+            /* @__PURE__ */ jsx(Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs(Flex, { gap: 1, children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  label: t("forms.duplicate", "Duplicate"),
+                  onClick: () => duplicate(row),
+                  disabled: busy,
+                  children: /* @__PURE__ */ jsx(Duplicate, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  label: t("forms.delete", "Delete"),
+                  onClick: () => remove(row),
+                  disabled: busy,
+                  children: /* @__PURE__ */ jsx(Trash, {})
+                }
+              )
+            ] }) })
           ]
         },
         row.documentId

package/dist/_chunks/{Forms-CaT0YEJo.js → Forms-B8kkPY0c.js}

@@ -3,12 +3,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const reactRouterDom = require("react-router-dom");
 const React = require("react");
-const objectLabels = require("./objectLabels-VTt_-qTZ.js");
+const index = require("./index-DkTxsEqL.js");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const admin = require("@strapi/strapi/admin");
-const index = require("./index-D_CPrIHe.js");
-const useHubspotSchema = require("./useHubspotSchema-B8SctALV.js");
+const index$1 = require("./index-P7p8ASb6.js");
+const objectLabels = require("./objectLabels-Dn-zriuZ.js");
+const useHubspotSchema = require("./useHubspotSchema-BottzdRR.js");
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -30,8 +31,8 @@ const React__namespace = /* @__PURE__ */ _interopNamespace(React);
 const OPERATORS = ["eq", "neq", "contains", "empty", "notEmpty", "gt", "lt"];
 const NEEDS_VALUE = /* @__PURE__ */ new Set(["eq", "neq", "contains", "gt", "lt"]);
 const ConditionEditor = ({ condition, candidates, onChange }) => {
-  const { formatMessage } = objectLabels.useIntl();
-  const t = (id, defaultMessage) => formatMessage({ id: index.getTranslation(id), defaultMessage });
+  const { formatMessage } = index.useIntl();
+  const t = (id, defaultMessage) => formatMessage({ id: index$1.getTranslation(id), defaultMessage });
   const opLabel = {
     eq: t("condition.op.eq", "is"),
     neq: t("condition.op.neq", "is not"),
@@ -146,10 +147,10 @@ function fieldsBefore(definition, beforeId) {
 }
 const slugifyName = (label) => label.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
 const FieldPanel = ({ field, candidates, problem, onChange }) => {
-  const intl = objectLabels.useIntl();
+  const intl = index.useIntl();
   const { formatMessage } = intl;
   const { schema, refresh, refreshing } = useHubspotSchema.useHubspotSchema();
-  const t = (id, defaultMessage, values) => formatMessage({ id: index.getTranslation(id), defaultMessage }, values);
+  const t = (id, defaultMessage, values) => formatMessage({ id: index$1.getTranslation(id), defaultMessage }, values);
   const object = field.hubspot?.object || "contact";
   const properties = (schema?.properties ?? []).filter((p) => p.object === object);
   const selected = properties.find((p) => p.name === field.hubspot?.property);
@@ -243,6 +244,43 @@ const FieldPanel = ({ field, candidates, problem, onChange }) => {
         children: t("panel.required", "Required")
       }
     ),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { flex: "1", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("panel.icon", "Icon") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TextInput,
+          {
+            value: field.icon ?? "",
+            placeholder: "i-lucide-building-2",
+            onChange: (e) => onChange({ icon: e.target.value })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { flex: "1", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("panel.persist", "Answer memory") }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          designSystem.SingleSelect,
+          {
+            value: field.persist ?? "session",
+            onChange: (v) => onChange({ persist: v }),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "session", children: t("panel.persist-session", "This visit only") }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "days30", children: t("panel.persist-days30", "30 days (non-identifying fields only)") })
+            ]
+          }
+        )
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("panel.class", "CSS classes") }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.TextInput,
+        {
+          value: field.class ?? "",
+          onChange: (e) => onChange({ class: e.target.value })
+        }
+      )
+    ] }),
     isChoice && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 2, children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: t("panel.options", "Choices") }),
       (field.options ?? []).map((option, index2) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
@@ -373,7 +411,7 @@ const newField = (label) => ({
 });
 const newStep = () => ({ id: makeId("stp"), title: "", fields: [] });
 const FormEditor = () => {
-  const { formatMessage } = objectLabels.useIntl();
+  const { formatMessage } = index.useIntl();
   const { get, post, put } = admin.useFetchClient();
   const { documentId } = reactRouterDom.useParams();
   const [searchParams, setSearchParams] = reactRouterDom.useSearchParams();
@@ -387,8 +425,16 @@ const FormEditor = () => {
   const [errors, setErrors] = React__namespace.useState([]);
   const [problems, setProblems] = React__namespace.useState([]);
   const [feedback, setFeedback] = React__namespace.useState(null);
-  const t = (id, defaultMessage, values) => formatMessage({ id: index.getTranslation(id), defaultMessage }, values);
+  const t = (id, defaultMessage, values) => formatMessage({ id: index$1.getTranslation(id), defaultMessage }, values);
   const query = locale ? `?locale=${locale}` : "";
+  React__namespace.useEffect(() => {
+    if (!dirty) return void 0;
+    const warn = (event) => {
+      event.preventDefault();
+    };
+    window.addEventListener("beforeunload", warn);
+    return () => window.removeEventListener("beforeunload", warn);
+  }, [dirty]);
   React__namespace.useEffect(() => {
     get("/i18n/locales").then(({ data }) => Array.isArray(data) && setLocales(data)).catch(() => setLocales([]));
   }, [get]);
@@ -399,7 +445,7 @@ const FormEditor = () => {
     setErrors([]);
     setProblems([]);
     get(
-      `/${index.PLUGIN_ID}/builder/forms/${documentId}${query}`
+      `/${index$1.PLUGIN_ID}/builder/forms/${documentId}${query}`
     ).then(({ data }) => {
       if (cancelled) return;
       setEntry(data.form);
@@ -409,7 +455,7 @@ const FormEditor = () => {
       if (cancelled || !locale) return;
       try {
         const { data } = await get(
-          `/${index.PLUGIN_ID}/builder/forms/${documentId}`
+          `/${index$1.PLUGIN_ID}/builder/forms/${documentId}`
         );
         if (cancelled) return;
         setEntry({ ...data.form, locale });
@@ -473,7 +519,7 @@ const FormEditor = () => {
     setErrors([]);
     try {
       const { data } = await put(
-        `/${index.PLUGIN_ID}/builder/forms/${documentId}${query}`,
+        `/${index$1.PLUGIN_ID}/builder/forms/${documentId}${query}`,
         {
           name: entry.name,
           title: entry.title,
@@ -481,6 +527,7 @@ const FormEditor = () => {
           nextLabel: entry.nextLabel,
           submitLabel: entry.submitLabel,
           successMessage: entry.successMessage,
+          class: entry.class,
           definition
         }
       );
@@ -506,7 +553,7 @@ const FormEditor = () => {
     setBusy(true);
     setFeedback(null);
     try {
-      await post(`/${index.PLUGIN_ID}/builder/forms/${documentId}/publish${query}`);
+      await post(`/${index$1.PLUGIN_ID}/builder/forms/${documentId}/publish${query}`);
       setPublished(true);
       setErrors([]);
       setProblems([]);
@@ -526,7 +573,7 @@ const FormEditor = () => {
   const unpublish = async () => {
     setBusy(true);
     try {
-      await post(`/${index.PLUGIN_ID}/builder/forms/${documentId}/unpublish${query}`);
+      await post(`/${index$1.PLUGIN_ID}/builder/forms/${documentId}/unpublish${query}`);
       setPublished(false);
       setFeedback({ tone: "success", text: t("editor.unpublished", "Form unpublished.") });
     } catch {
@@ -544,7 +591,7 @@ const FormEditor = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 6, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", paddingBottom: 4, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, alignItems: "center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: `/plugins/${index.PLUGIN_ID}`, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { label: t("editor.back", "Back to the list"), tag: "span", children: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowLeft, {}) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactRouterDom.Link, { to: `/plugins/${index$1.PLUGIN_ID}`, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { label: t("editor.back", "Back to the list"), tag: "span", children: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowLeft, {}) }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", tag: "h1", children: entry.name }),
@@ -586,6 +633,8 @@ const FormEditor = () => {
             hasRadius: true,
             shadow: "tableShadow",
             padding: 4,
+            onClick: () => setSelection({ kind: "step", stepId: step.id }),
+            style: { cursor: "pointer" },
             borderColor: selection.kind === "step" && selection.stepId === step.id ? "primary600" : void 0,
             borderStyle: selection.kind === "step" && selection.stepId === step.id ? "solid" : void 0,
             borderWidth: selection.kind === "step" && selection.stepId === step.id ? "1px" : void 0,
@@ -608,7 +657,7 @@ const FormEditor = () => {
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, onClick: (e) => e.stopPropagation(), children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     designSystem.IconButton,
                     {
@@ -650,7 +699,10 @@ const FormEditor = () => {
                       background: isSelected ? "primary100" : "neutral100",
                       hasRadius: true,
                       padding: 3,
-                      onClick: () => setSelection({ kind: "field", fieldId: field.id }),
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setSelection({ kind: "field", fieldId: field.id });
+                      },
                       style: { cursor: "pointer" },
                       children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
                         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", wrap: "wrap", children: [
@@ -708,7 +760,8 @@ const FormEditor = () => {
                   {
                     variant: "tertiary",
                     startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
-                    onClick: () => {
+                    onClick: (e) => {
+                      e.stopPropagation();
                       const field = newField(t("editor.new-field", "New field"));
                       patchStep(step.id, { fields: [...step.fields, field] });
                       setSelection({ kind: "field", fieldId: field.id });
@@ -765,6 +818,16 @@ const FormEditor = () => {
             }
           )
         ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("panel.class", "CSS classes") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.TextInput,
+            {
+              value: selectedStep.class ?? "",
+              onChange: (e) => patchStep(selectedStep.id, { class: e.target.value })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "neutral600", children: t("editor.step-condition", "Show this step only when…") }),
         /* @__PURE__ */ jsxRuntime.jsx(
           ConditionEditor,
@@ -838,6 +901,16 @@ const FormEditor = () => {
             }
           )
         ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: t("panel.class", "CSS classes") }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.TextInput,
+            {
+              value: entry.class ?? "",
+              onChange: (e) => patchEntry({ class: e.target.value })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: t(
           "editor.form-hint",
           "Select a step or a field to edit it. The public endpoint serves this form at /api/hubspot/forms/{slug}.",
@@ -848,7 +921,7 @@ const FormEditor = () => {
   ] });
 };
 const FormsList = () => {
-  const { formatMessage } = objectLabels.useIntl();
+  const { formatMessage } = index.useIntl();
   const { get, post, del } = admin.useFetchClient();
   const navigate = reactRouterDom.useNavigate();
   const [rows, setRows] = React__namespace.useState(null);
@@ -857,15 +930,15 @@ const FormsList = () => {
   const [error, setError] = React__namespace.useState(null);
   const [sources, setSources] = React__namespace.useState([]);
   const [sourceId, setSourceId] = React__namespace.useState("");
-  const t = (id, defaultMessage, values) => formatMessage({ id: index.getTranslation(id), defaultMessage }, values);
+  const t = (id, defaultMessage, values) => formatMessage({ id: index$1.getTranslation(id), defaultMessage }, values);
   const load = React__namespace.useCallback(async () => {
-    const { data } = await get(`/${index.PLUGIN_ID}/builder/forms`);
+    const { data } = await get(`/${index$1.PLUGIN_ID}/builder/forms`);
     setRows(data.forms);
   }, [get]);
   React__namespace.useEffect(() => {
     load().catch(() => setError(t("forms.load-error", "Could not load the forms.")));
     get(
-      `/${index.PLUGIN_ID}/builder/import/sources`
+      `/${index$1.PLUGIN_ID}/builder/import/sources`
     ).then(({ data }) => setSources(data.sources ?? [])).catch(() => setSources([]));
   }, [load]);
   const runImport = async () => {
@@ -873,7 +946,7 @@ const FormsList = () => {
     setBusy(true);
     setError(null);
     try {
-      const { data } = await post(`/${index.PLUGIN_ID}/builder/import`, {
+      const { data } = await post(`/${index$1.PLUGIN_ID}/builder/import`, {
         documentId: sourceId
       });
       navigate(data.documentId);
@@ -888,7 +961,7 @@ const FormsList = () => {
     setError(null);
     try {
       const { data } = await post(
-        `/${index.PLUGIN_ID}/builder/forms`,
+        `/${index$1.PLUGIN_ID}/builder/forms`,
         { name: name.trim() }
       );
       navigate(data.form.documentId);
@@ -897,13 +970,26 @@ const FormsList = () => {
       setBusy(false);
     }
   };
+  const duplicate = async (row) => {
+    setBusy(true);
+    setError(null);
+    try {
+      const { data } = await post(
+        `/${index$1.PLUGIN_ID}/builder/forms/${row.documentId}/duplicate`
+      );
+      navigate(data.documentId);
+    } catch {
+      setError(t("forms.duplicate-error", "Could not duplicate the form."));
+      setBusy(false);
+    }
+  };
   const remove = async (row) => {
     if (!window.confirm(t("forms.delete-confirm", 'Delete "{name}" and all its locales?', { name: row.name }))) {
       return;
     }
     setBusy(true);
     try {
-      await del(`/${index.PLUGIN_ID}/builder/forms/${row.documentId}`);
+      await del(`/${index$1.PLUGIN_ID}/builder/forms/${row.documentId}`);
       await load();
     } catch {
       setError(t("forms.delete-error", "Could not delete the form."));
@@ -968,7 +1054,7 @@ const FormsList = () => {
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: t("forms.col-structure", "Structure") }) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: t("forms.col-status", "Status") }) }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: t("forms.col-updated", "Updated") }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: t("forms.col-actions", "") }) })
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: t("forms.col-actions", "Actions") }) })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tbody, { children: rows.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(
         designSystem.Tr,
@@ -978,21 +1064,32 @@ const FormsList = () => {
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: row.name }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: row.slug }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: t("forms.structure", "{steps} steps · {fields} fields", {
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: t("forms.structure", "{steps, plural, one {# step} other {# steps}} · {fields, plural, one {# field} other {# fields}}", {
               steps: row.steps,
               fields: row.fields
             }) }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: row.published ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "success100", textColor: "success700", children: t("forms.published", "Published") }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { backgroundColor: "secondary100", textColor: "secondary700", children: t("forms.draft", "Draft") }) }),
             /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: row.updatedAt ? new Date(row.updatedAt).toLocaleString() : "—" }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.IconButton,
-              {
-                label: t("forms.delete", "Delete"),
-                onClick: () => remove(row),
-                disabled: busy,
-                children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
-              }
-            ) })
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.IconButton,
+                {
+                  label: t("forms.duplicate", "Duplicate"),
+                  onClick: () => duplicate(row),
+                  disabled: busy,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Duplicate, {})
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.IconButton,
+                {
+                  label: t("forms.delete", "Delete"),
+                  onClick: () => remove(row),
+                  disabled: busy,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
+                }
+              )
+            ] }) })
           ]
         },
         row.documentId