@nivaro/react 0.3.35 → 0.3.37

package/dist/shared/components/layout-editor/StructureMenu.js

@@ -1,41 +1,48 @@
-import { jsxs as p, jsx as t, Fragment as Y } from "react/jsx-runtime";
-import { CopyPlus as F, Group as X, SquareSplitVertical as z, Columns3 as Q, Merge as Z, Ungroup as ee, Shuffle as te, ClipboardCopy as ne, PinOff as re, Pin as oe, ArrowLeft as se } from "lucide-react";
-import { useState as O, useRef as ie, useCallback as ae, useEffect as R, useMemo as w } from "react";
-import { toast as A } from "sonner";
-import { stickyGroupKey as le } from "../../lib/form-structure.js";
-import { UNGROUPED_KEY as ce, isCanvasSlot as de } from "../../lib/layout-ops.js";
-import { cn as $, titleCase as ue } from "../../lib/utils.js";
-import { Checkbox as L } from "../ui/checkbox.js";
-import { Popover as pe, PopoverAnchor as me, PopoverContent as fe } from "../ui/popover.js";
-import { STRUCTURE_MENU_EVENT as j, duplicateKeys as he } from "./ArrangeButton.js";
-import { ArrangeButton as dt, openStructureMenu as ut } from "./ArrangeButton.js";
-import { readOverrides as ge } from "./inspector/model.js";
-import { isTyping as ke } from "./is-typing.js";
-import { splitPlan as xe, splitBlocked as ye, rowPlan as ve, rowBlocked as we, joinTarget as Ne, joinPlan as be, joinBlocked as Ce } from "./section-structure.js";
-import { tintCard as Pe, effectText as S } from "./panel-style.js";
-import { duplicatePlan as U, convertChoices as M, groupName as N, rulesOf as K, ruleSet as V, ruleTargets as Se, copyRulesPlan as Ee, RULE_LABELS as Ae, kindWord as T, wrapPlan as Oe, duplicateBlocked as $e, unwrapPlan as Te, unwrapBlocked as _e, pinPlan as De } from "./structure-ops.js";
-import { isPinned as P } from "./pin.js";
-function Re(e) {
+import { jsxs as f, jsx as t, Fragment as Z } from "react/jsx-runtime";
+import { CopyPlus as ee, Group as te, SquareSplitVertical as ne, Columns3 as re, AlignHorizontalSpaceAround as oe, Merge as ie, Ungroup as se, Shuffle as ae, ClipboardCopy as le, PinOff as U, Pin as j, ArrowLeft as ce } from "lucide-react";
+import { useState as R, useRef as de, useCallback as ue, useEffect as M, useMemo as P } from "react";
+import { toast as $ } from "sonner";
+import { stickyGroupKey as pe } from "../../lib/form-structure.js";
+import { UNGROUPED_KEY as he, isCanvasSlot as me } from "../../lib/layout-ops.js";
+import { cn as T, titleCase as fe } from "../../lib/utils.js";
+import { Checkbox as K } from "../ui/checkbox.js";
+import { Popover as ge, PopoverAnchor as ke, PopoverContent as xe } from "../ui/popover.js";
+import { STRUCTURE_MENU_EVENT as V, duplicateKeys as ye } from "./ArrangeButton.js";
+import { ArrangeButton as vt, openStructureMenu as wt } from "./ArrangeButton.js";
+import { evenRowPlan as ve, evenRowBlocked as we } from "./even-row.js";
+import { readOverrides as Ne } from "./inspector/model.js";
+import { isTyping as Pe } from "./is-typing.js";
+import { tintCard as be, effectText as O } from "./panel-style.js";
+import { isPinned as E, isPlacementPinned as N, placementOf as A } from "./pin.js";
+import { splitPlan as Ce, splitBlocked as Se, rowPlan as Ee, rowBlocked as Ae, joinTarget as Oe, joinPlan as _e, joinBlocked as $e } from "./section-structure.js";
+import { duplicatePlan as F, convertChoices as H, groupName as b, rulesOf as W, ruleSet as G, ruleTargets as Re, copyRulesPlan as Te, RULE_LABELS as De, kindWord as D, wrapPlan as Be, duplicateBlocked as Le, unwrapPlan as Ue, unwrapBlocked as je, pinPlan as Me, fieldPinPlan as Ke, fieldPinBlocked as Ve } from "./structure-ops.js";
+function qe(e) {
   if (!e) return null;
-  const s = e.indexOf(":"), o = e.slice(0, s), c = e.slice(s + 1);
-  if (o === "group") return { kind: "group", key: c };
-  if (o === "header") return { kind: "header", field: c };
+  const i = e.indexOf(":"), o = e.slice(0, i), l = e.slice(i + 1);
+  if (o === "group") return { kind: "group", key: l };
+  if (o === "header") return { kind: "header", field: l };
   if (o !== "field" && o !== "slot") return null;
-  const r = c.lastIndexOf(":"), n = c.slice(r + 1);
-  return { kind: o, field: c.slice(0, r), group_key: n === "" ? null : n };
+  const a = l.lastIndexOf(":"), r = l.slice(a + 1);
+  return { kind: o, field: l.slice(0, a), group_key: r === "" ? null : r };
 }
-const Le = (e, s) => ({
-  getBoundingClientRect: () => new DOMRect(e, s, 0, 0)
-});
-function it(e, s) {
-  return w(() => {
-    const o = new Set(e.groups.filter((r) => P(r)).map((r) => r.key)), c = le(
+const Fe = (e, i) => ({
+  getBoundingClientRect: () => new DOMRect(e, i, 0, 0)
+}), He = {
+  text: "Pinned",
+  tone: "slate",
+  icon: "pin",
+  tip: "Pinned in the editor: it keeps its spot (no dragging, no drops on it). The form people see is unchanged."
+};
+function gt(e, i) {
+  return P(() => {
+    const o = new Set(e.groups.filter((r) => E(r)).map((r) => r.key)), l = e.placements.some((r) => N(r)), a = pe(
       [...e.groups].filter((r) => r.parent_key === null).sort((r, n) => r.sort - n.sort)
     );
     return (r) => {
-      const n = (s == null ? void 0 : s(r)) ?? [];
-      if (r.kind !== "group") return n;
-      const i = r.key === c ? [
+      const n = (i == null ? void 0 : i(r)) ?? [];
+      if (r.kind !== "group")
+        return l && N(A(e, r)) ? [...n, He] : n;
+      const c = r.key === a ? [
         ...n,
         {
           text: "Sticks to the top",
@@ -44,421 +51,457 @@ function it(e, s) {
         }
       ] : n;
       return o.has(r.key) ? [
-        ...i,
+        ...c,
         {
           text: "Pinned",
           tone: "slate",
           icon: "pin",
           tip: "Pinned in the editor: it does not drag and takes no drops. The form people see is unchanged."
         }
-      ] : i;
+      ] : c;
     };
-  }, [e.groups, s]);
+  }, [e, i]);
 }
-function at({
+function kt({
   bundle: e,
-  selection: s,
+  selection: i,
   apply: o,
-  onSelection: c,
-  rootRef: r
+  onSelection: l,
+  rootRef: a,
+  extraItems: r
 }) {
-  var h, x;
-  const [n, i] = O(null), m = ie({ bundle: e, selection: s, apply: o, onSelection: c });
-  m.current = { bundle: e, selection: s, apply: o, onSelection: c };
-  const g = ae((d, u = {}) => d.ok ? (m.current.apply(d.ops, { label: d.label }), d.select && m.current.onSelection([d.select]), u.toastNotes && d.notes.length && A.success(d.label, { description: d.notes.join(". ") }), i(null), !0) : (A(d.reason), !1), []);
-  R(() => {
-    const d = (u) => {
-      if (!(u.metaKey || u.ctrlKey) || u.altKey || u.shiftKey || u.key.toLowerCase() !== "d") return;
-      const { bundle: a, selection: l } = m.current;
-      if (!(!a || l.length === 0 || ke(u.target) || u.defaultPrevented) && !document.querySelector('[data-radix-popper-content-wrapper], [role="menu"]')) {
-        if (u.preventDefault(), l.length > 1) {
-          A("Duplicate works on one section at a time");
+  var p, w;
+  const [n, c] = R(null), u = de({ bundle: e, selection: i, apply: o, onSelection: l });
+  u.current = { bundle: e, selection: i, apply: o, onSelection: l };
+  const g = ue((d, s = {}) => d.ok ? (u.current.apply(d.ops, { label: d.label }), d.select && u.current.onSelection([d.select]), s.toastNotes && d.notes.length && $.success(d.label, { description: d.notes.join(". ") }), c(null), !0) : ($(d.reason), !1), []);
+  M(() => {
+    const d = (s) => {
+      if (!(s.metaKey || s.ctrlKey) || s.altKey || s.shiftKey || s.key.toLowerCase() !== "d") return;
+      const { bundle: m, selection: h } = u.current;
+      if (!(!m || h.length === 0 || Pe(s.target) || s.defaultPrevented) && !document.querySelector('[data-radix-popper-content-wrapper], [role="menu"]')) {
+        if (s.preventDefault(), h.length > 1) {
+          $("Duplicate works on one section at a time");
           return;
         }
-        g(U(a, l[0]), { toastNotes: !0 });
+        g(F(m, h[0]), { toastNotes: !0 });
       }
     };
     return window.addEventListener("keydown", d), () => window.removeEventListener("keydown", d);
-  }, [g]), R(() => {
-    const d = (l) => {
-      var f;
-      return !!l && !!((f = r.current) != null && f.contains(l));
-    }, u = (l) => {
-      var C, D;
-      const f = ((D = (C = l.target) == null ? void 0 : C.closest) == null ? void 0 : D.call(C, "[data-design-target]")) ?? null;
-      if (!d(f) || !(f != null && f.closest("[data-design-canvas]")) || !m.current.bundle) return;
-      const v = Re(f.getAttribute("data-design-target"));
-      if (!v) return;
-      l.preventDefault();
-      const b = m.current.selection, G = f.getAttribute("data-design-target"), _ = b.some((J) => Be(J) === G), H = _ && b.length > 1 ? b : [v];
-      (!_ || b.length <= 1) && m.current.onSelection([v]);
-      const I = l.button !== 2 && l.clientX === 0 && l.clientY === 0;
-      i({
-        targets: H,
-        anchor: I ? f : Le(l.clientX, l.clientY),
+  }, [g]), M(() => {
+    const d = (h) => {
+      var k;
+      return !!h && !!((k = a.current) != null && k.contains(h));
+    }, s = (h) => {
+      var S, L;
+      const k = ((L = (S = h.target) == null ? void 0 : S.closest) == null ? void 0 : L.call(S, "[data-design-target]")) ?? null;
+      if (!d(k) || !(k != null && k.closest("[data-design-canvas]")) || !u.current.bundle) return;
+      const y = qe(k.getAttribute("data-design-target"));
+      if (!y) return;
+      h.preventDefault();
+      const C = u.current.selection, X = k.getAttribute("data-design-target"), B = C.some((Q) => Ge(Q) === X), z = B && C.length > 1 ? C : [y];
+      (!B || C.length <= 1) && u.current.onSelection([y]);
+      const I = h.button !== 2 && h.clientX === 0 && h.clientY === 0;
+      c({
+        targets: z,
+        origin: y,
+        anchor: I ? k : Fe(h.clientX, h.clientY),
         view: "menu"
       });
-    }, a = (l) => {
-      const f = l.target;
-      if (!d(f)) return;
-      const v = l.detail;
-      i({ targets: v.targets, anchor: f, view: v.view ?? "menu" });
+    }, m = (h) => {
+      const k = h.target;
+      if (!d(k)) return;
+      const y = h.detail;
+      c({
+        targets: y.targets,
+        origin: y.targets.length === 1 ? y.targets[0] : null,
+        anchor: k,
+        view: y.view ?? "menu"
+      });
     };
-    return document.addEventListener("contextmenu", u, !0), document.addEventListener(j, a), () => {
-      document.removeEventListener("contextmenu", u, !0), document.removeEventListener(j, a);
+    return document.addEventListener("contextmenu", s, !0), document.addEventListener(V, m), () => {
+      document.removeEventListener("contextmenu", s, !0), document.removeEventListener(V, m);
     };
-  }, [r]);
-  const k = w(() => ({ current: (n == null ? void 0 : n.anchor) ?? null }), [n]);
-  return !n || !e ? null : /* @__PURE__ */ p(pe, { open: !0, onOpenChange: (d) => !d && i(null), children: [
-    /* @__PURE__ */ t(me, { virtualRef: k }),
+  }, [a]);
+  const v = P(() => ({ current: (n == null ? void 0 : n.anchor) ?? null }), [n]);
+  return !n || !e ? null : /* @__PURE__ */ f(ge, { open: !0, onOpenChange: (d) => !d && c(null), children: [
+    /* @__PURE__ */ t(ke, { virtualRef: v }),
     /* @__PURE__ */ t(
-      fe,
+      xe,
       {
         align: "start",
         className: "w-[300px] p-1.5",
         "data-structure-menu": n.view,
         onOpenAutoFocus: (d) => {
-          var u, a;
-          d.preventDefault(), (a = (u = d.currentTarget) == null ? void 0 : u.querySelector(
+          var s, m;
+          d.preventDefault(), (m = (s = d.currentTarget) == null ? void 0 : s.querySelector(
             '[role="menuitem"]:not([aria-disabled="true"]), input, button'
-          )) == null || a.focus();
+          )) == null || m.focus();
         },
-        children: n.view === "convert" && ((h = n.targets[0]) == null ? void 0 : h.kind) === "group" ? /* @__PURE__ */ t(
-          Ve,
+        children: n.view === "convert" && ((p = n.targets[0]) == null ? void 0 : p.kind) === "group" ? /* @__PURE__ */ t(
+          ze,
           {
             bundle: e,
             groupKey: n.targets[0].key,
-            onBack: () => i({ ...n, view: "menu" }),
+            onBack: () => c({ ...n, view: "menu" }),
             run: g
           }
-        ) : n.view === "rules" && ((x = n.targets[0]) == null ? void 0 : x.kind) === "group" ? /* @__PURE__ */ t(
-          We,
+        ) : n.view === "rules" && ((w = n.targets[0]) == null ? void 0 : w.kind) === "group" ? /* @__PURE__ */ t(
+          Qe,
           {
             bundle: e,
             groupKey: n.targets[0].key,
-            onBack: () => i({ ...n, view: "menu" }),
+            onBack: () => c({ ...n, view: "menu" }),
             run: g
           }
         ) : /* @__PURE__ */ t(
-          Ke,
+          Xe,
           {
             bundle: e,
             targets: n.targets,
             run: g,
-            onView: (d) => i({ ...n, view: d })
+            onView: (d) => c({ ...n, view: d }),
+            extra: r == null ? void 0 : r({
+              targets: n.targets,
+              origin: n.origin,
+              run: g,
+              close: () => c(null)
+            })
           }
         )
       }
     )
   ] });
 }
-const je = (e) => (s) => {
-  const o = e.placements.find((r) => r.field === s), c = ge(o).label;
-  return typeof c == "string" && c || (o == null ? void 0 : o.label_override) || ue(s);
+const We = (e) => (i) => {
+  const o = e.placements.find((a) => a.field === i), l = Ne(o).label;
+  return typeof l == "string" && l || (o == null ? void 0 : o.label_override) || fe(i);
 };
-function Be(e) {
+function Ge(e) {
   return e.kind === "group" ? `group:${e.key}` : e.kind === "header" ? `header:${e.field}` : `${e.kind}:${e.field}:${e.group_key ?? ""}`;
 }
-const Ue = "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-[12.5px] text-slate-700 outline-none transition-colors hover:bg-muted focus-visible:bg-muted dark:text-foreground aria-disabled:cursor-not-allowed aria-disabled:opacity-45 aria-disabled:hover:bg-transparent";
-function y({
+const Je = "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-[12.5px] text-slate-700 outline-none transition-colors hover:bg-muted focus-visible:bg-muted dark:text-foreground aria-disabled:cursor-not-allowed aria-disabled:opacity-45 aria-disabled:hover:bg-transparent";
+function x({
   icon: e,
-  children: s,
+  children: i,
   hint: o,
-  blocked: c,
-  onPick: r,
-  ...n
+  blocked: l,
+  onPick: a,
+  ...r
 }) {
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ f(
     "button",
     {
       type: "button",
       role: "menuitem",
-      "aria-disabled": c ? !0 : void 0,
-      "data-tip": c ?? void 0,
+      "aria-disabled": l ? !0 : void 0,
+      "data-tip": l ?? void 0,
       onClick: () => {
-        c || r();
+        l || a();
       },
-      className: Ue,
-      ...n,
+      className: Je,
+      ...r,
       children: [
         /* @__PURE__ */ t("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center text-slate-500 dark:text-muted-foreground [&_svg]:h-3.5 [&_svg]:w-3.5", children: e }),
-        /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate", children: s }),
+        /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate", children: i }),
         o && /* @__PURE__ */ t("kbd", { className: "shrink-0 font-sans text-[11px] text-slate-400 dark:text-muted-foreground", children: o })
       ]
     }
   );
 }
-function Me(e) {
-  var n;
+function Ye(e) {
+  var r;
   if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key)) return;
   const o = Array.from(e.currentTarget.querySelectorAll('[role="menuitem"]'));
   if (o.length === 0) return;
   e.preventDefault();
-  const c = o.indexOf(document.activeElement), r = e.key === "Home" ? 0 : e.key === "End" ? o.length - 1 : (c + (e.key === "ArrowDown" ? 1 : -1) + o.length) % o.length;
-  (n = o[r]) == null || n.focus();
+  const l = o.indexOf(document.activeElement), a = e.key === "Home" ? 0 : e.key === "End" ? o.length - 1 : (l + (e.key === "ArrowDown" ? 1 : -1) + o.length) % o.length;
+  (r = o[a]) == null || r.focus();
 }
-function Ke({
+function Xe({
   bundle: e,
-  targets: s,
+  targets: i,
   run: o,
-  onView: c
+  onView: l,
+  extra: a
 }) {
-  const r = s.length === 1 ? s[0] : null, n = (r == null ? void 0 : r.kind) === "group" && r.key !== ce ? e.groups.find((h) => h.key === r.key) ?? null : null, i = s.filter(
-    (h) => (h.kind === "field" || h.kind === "slot") && !de(h)
-  ), m = i.length ? Oe(e, i) : null, g = r ? $e(e, r) : "Duplicate works on one section at a time", k = n ? `${N(n)} · ${T(e, n)}` : i.length > 1 ? `${i.length} selected` : null;
-  return /* @__PURE__ */ p("div", { role: "menu", "aria-label": "Arrange", onKeyDown: Me, className: "flex flex-col", children: [
-    k && /* @__PURE__ */ t("p", { className: $(S, "truncate px-2 pb-1 pt-0.5"), children: k }),
+  const r = i.length === 1 ? i[0] : null, n = (r == null ? void 0 : r.kind) === "group" && r.key !== he ? e.groups.find((p) => p.key === r.key) ?? null : null, c = i.filter(
+    (p) => (p.kind === "field" || p.kind === "slot") && !me(p)
+  ), u = c.length ? Be(e, c) : null, g = r ? Le(e, r) : "Duplicate works on one section at a time", v = n ? `${b(n)} · ${D(e, n)}` : c.length > 1 ? `${c.length} selected` : null;
+  return /* @__PURE__ */ f("div", { role: "menu", "aria-label": "Arrange", onKeyDown: Ye, className: "flex flex-col", children: [
+    v && /* @__PURE__ */ t("p", { className: T(O, "truncate px-2 pb-1 pt-0.5"), children: v }),
     /* @__PURE__ */ t(
-      y,
+      x,
       {
-        icon: /* @__PURE__ */ t(F, {}),
-        hint: he(),
+        icon: /* @__PURE__ */ t(ee, {}),
+        hint: ye(),
         blocked: g,
         "data-structure-action": "duplicate",
-        onPick: () => o(U(e, r), { toastNotes: !0 }),
+        onPick: () => o(F(e, r), { toastNotes: !0 }),
         children: "Duplicate"
       }
     ),
-    m && /* @__PURE__ */ t(
-      y,
+    u && /* @__PURE__ */ t(
+      x,
       {
-        icon: /* @__PURE__ */ t(X, {}),
-        blocked: m.ok ? null : m.reason,
+        icon: /* @__PURE__ */ t(te, {}),
+        blocked: u.ok ? null : u.reason,
         "data-structure-action": "wrap",
-        onPick: () => o(m),
-        children: m.ok ? m.label.replace(/^Wrap \d+ fields?/, "Wrap") : "Wrap in a new section"
+        onPick: () => o(u),
+        children: u.ok ? u.label.replace(/^Wrap \d+ fields?/, "Wrap") : "Wrap in a new section"
       }
     ),
     r && (r.kind === "field" || r.kind === "slot") && r.group_key !== null && /* @__PURE__ */ t(
-      y,
+      x,
       {
-        icon: /* @__PURE__ */ t(z, {}),
-        blocked: ye(e, r),
+        icon: /* @__PURE__ */ t(ne, {}),
+        blocked: Se(e, r),
         "data-structure-action": "split",
-        onPick: () => o(xe(e, r), { toastNotes: !0 }),
+        onPick: () => o(Ce(e, r), { toastNotes: !0 }),
         children: "Split the section here"
       }
     ),
-    i.length > 1 && /* @__PURE__ */ t(
-      y,
+    c.length > 1 && /* @__PURE__ */ t(
+      x,
       {
-        icon: /* @__PURE__ */ t(Q, {}),
-        blocked: we(e, i),
+        icon: /* @__PURE__ */ t(re, {}),
+        blocked: Ae(e, c),
         "data-structure-action": "row",
-        onPick: () => o(ve(e, i, je(e)), { toastNotes: !0 }),
+        onPick: () => o(Ee(e, c, We(e)), { toastNotes: !0 }),
         children: "Put side by side under one label"
       }
     ),
-    n && /* @__PURE__ */ p(Y, { children: [
+    c.length > 0 && /* @__PURE__ */ t(
+      x,
+      {
+        icon: /* @__PURE__ */ t(oe, {}),
+        blocked: we(e, c),
+        "data-structure-action": "even-row",
+        onPick: () => o(ve(e, c)),
+        children: c.length > 1 ? "Even out their rows" : "Even out this row"
+      }
+    ),
+    n && /* @__PURE__ */ f(Z, { children: [
       /* @__PURE__ */ t(
-        y,
+        x,
         {
-          icon: /* @__PURE__ */ t(Z, {}),
-          blocked: Ce(e, n.key),
+          icon: /* @__PURE__ */ t(ie, {}),
+          blocked: $e(e, n.key),
           "data-structure-action": "join",
-          onPick: () => o(be(e, n.key), { toastNotes: !0 }),
+          onPick: () => o(_e(e, n.key), { toastNotes: !0 }),
           children: (() => {
-            const h = Ne(e, n.key);
-            return h ? `Join with ${N(h)}` : "Join with the next section";
+            const p = Oe(e, n.key);
+            return p ? `Join with ${b(p)}` : "Join with the next section";
           })()
         }
       ),
-      /* @__PURE__ */ p(
-        y,
+      /* @__PURE__ */ f(
+        x,
         {
-          icon: /* @__PURE__ */ t(ee, {}),
-          blocked: _e(e, n.key),
+          icon: /* @__PURE__ */ t(se, {}),
+          blocked: je(e, n.key),
           "data-structure-action": "unwrap",
-          onPick: () => o(Te(e, n.key), { toastNotes: !0 }),
+          onPick: () => o(Ue(e, n.key), { toastNotes: !0 }),
           children: [
             "Unwrap: keep its fields, drop the ",
-            T(e, n)
+            D(e, n)
           ]
         }
       ),
       /* @__PURE__ */ t(
-        y,
+        x,
         {
-          icon: /* @__PURE__ */ t(te, {}),
-          blocked: M(e, n.key).length ? null : "Only sections, tabs, steps and their holders convert",
+          icon: /* @__PURE__ */ t(ae, {}),
+          blocked: H(e, n.key).length ? null : "Only sections, tabs, steps and their holders convert",
           "data-structure-action": "convert",
-          onPick: () => c("convert"),
+          onPick: () => l("convert"),
           children: "Convert to…"
         }
       ),
       /* @__PURE__ */ t(
-        y,
+        x,
         {
-          icon: /* @__PURE__ */ t(ne, {}),
-          blocked: K(n).length ? null : "Only sections, tabs and steps have these rules",
+          icon: /* @__PURE__ */ t(le, {}),
+          blocked: W(n).length ? null : "Only sections, tabs and steps have these rules",
           "data-structure-action": "rules",
-          onPick: () => c("rules"),
+          onPick: () => l("rules"),
           children: "Copy rules to other sections…"
         }
       ),
       /* @__PURE__ */ t(
-        y,
+        x,
         {
-          icon: P(n) ? /* @__PURE__ */ t(re, {}) : /* @__PURE__ */ t(oe, {}),
+          icon: E(n) ? /* @__PURE__ */ t(U, {}) : /* @__PURE__ */ t(j, {}),
           "data-structure-action": "pin",
-          onPick: () => o(De(e, n.key, !P(n))),
-          children: P(n) ? "Unpin" : "Pin in the editor (no dragging)"
+          onPick: () => o(Me(e, n.key, !E(n))),
+          children: E(n) ? "Unpin" : "Pin in the editor (no dragging)"
         }
       )
     ] }),
-    !n && i.length === 0 && /* @__PURE__ */ t("p", { className: $(S, "px-2 py-1"), children: "Select a section or fields to duplicate, wrap or convert." })
+    r && r.kind !== "group" && /* @__PURE__ */ t(
+      x,
+      {
+        icon: N(A(e, r)) ? /* @__PURE__ */ t(U, {}) : /* @__PURE__ */ t(j, {}),
+        blocked: Ve(e, r),
+        "data-structure-action": "pin-field",
+        onPick: () => o(Ke(e, r, !N(A(e, r)))),
+        children: N(A(e, r)) ? "Unpin" : "Pin in the editor (no dragging)"
+      }
+    ),
+    !n && c.length === 0 && !a && (!r || r.kind === "group") && /* @__PURE__ */ t("p", { className: T(O, "px-2 py-1"), children: "Select a section or fields to duplicate, wrap or convert." }),
+    a
   ] });
 }
-function E({ title: e, onBack: s }) {
-  return /* @__PURE__ */ p("div", { className: "flex items-center gap-1.5 px-1 pb-1.5", children: [
+function _({ title: e, onBack: i }) {
+  return /* @__PURE__ */ f("div", { className: "flex items-center gap-1.5 px-1 pb-1.5", children: [
     /* @__PURE__ */ t(
       "button",
       {
         type: "button",
         "aria-label": "Back",
-        onClick: s,
+        onClick: i,
         className: "inline-flex h-6 w-6 items-center justify-center rounded text-slate-500 hover:bg-muted hover:text-slate-900 dark:text-muted-foreground dark:hover:text-foreground",
-        children: /* @__PURE__ */ t(se, { className: "h-3.5 w-3.5" })
+        children: /* @__PURE__ */ t(ce, { className: "h-3.5 w-3.5" })
       }
     ),
     /* @__PURE__ */ t("p", { className: "min-w-0 flex-1 truncate text-[13px] font-semibold text-slate-900 dark:text-foreground", children: e })
   ] });
 }
-const q = "inline-flex h-7 shrink-0 items-center rounded-md bg-nvr-cyan px-3 text-[12px] font-medium text-white transition-opacity hover:opacity-90 disabled:pointer-events-none disabled:opacity-40";
-function W({ notes: e }) {
-  return e.length === 0 ? null : /* @__PURE__ */ t("ul", { className: "mt-1 list-disc space-y-0.5 pl-4 text-[12px] leading-snug text-slate-600 dark:text-muted-foreground", children: e.map((s) => /* @__PURE__ */ t("li", { children: s }, s)) });
+const J = "inline-flex h-7 shrink-0 items-center rounded-md bg-nvr-cyan px-3 text-[12px] font-medium text-white transition-opacity hover:opacity-90 disabled:pointer-events-none disabled:opacity-40";
+function Y({ notes: e }) {
+  return e.length === 0 ? null : /* @__PURE__ */ t("ul", { className: "mt-1 list-disc space-y-0.5 pl-4 text-[12px] leading-snug text-slate-600 dark:text-muted-foreground", children: e.map((i) => /* @__PURE__ */ t("li", { children: i }, i)) });
 }
-function Ve({
+function ze({
   bundle: e,
-  groupKey: s,
+  groupKey: i,
   onBack: o,
-  run: c
+  run: l
 }) {
-  const r = e.groups.find((i) => i.key === s), n = w(() => M(e, s), [e, s]);
-  return r ? /* @__PURE__ */ p("div", { "data-structure-convert": "", className: "flex flex-col", children: [
-    /* @__PURE__ */ t(E, { title: `Convert ${N(r)}`, onBack: o }),
-    /* @__PURE__ */ t("div", { className: "space-y-1.5", children: n.map((i) => /* @__PURE__ */ p("div", { "data-convert-choice": i.to, className: $(Pe, "p-2.5"), children: [
-      /* @__PURE__ */ p("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ t("p", { className: "min-w-0 flex-1 text-[12.5px] font-medium text-slate-900 dark:text-foreground", children: i.title }),
+  const a = e.groups.find((n) => n.key === i), r = P(() => H(e, i), [e, i]);
+  return a ? /* @__PURE__ */ f("div", { "data-structure-convert": "", className: "flex flex-col", children: [
+    /* @__PURE__ */ t(_, { title: `Convert ${b(a)}`, onBack: o }),
+    /* @__PURE__ */ t("div", { className: "space-y-1.5", children: r.map((n) => /* @__PURE__ */ f("div", { "data-convert-choice": n.to, className: T(be, "p-2.5"), children: [
+      /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ t("p", { className: "min-w-0 flex-1 text-[12.5px] font-medium text-slate-900 dark:text-foreground", children: n.title }),
         /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            disabled: !i.plan.ok,
-            onClick: () => c(i.plan),
-            className: q,
+            disabled: !n.plan.ok,
+            onClick: () => l(n.plan),
+            className: J,
             children: "Convert"
           }
         )
       ] }),
-      i.plan.ok ? /* @__PURE__ */ t(W, { notes: i.plan.notes }) : /* @__PURE__ */ t("p", { className: "mt-1 text-[12px] leading-snug text-amber-700 dark:text-amber-300", children: i.plan.reason })
-    ] }, i.to)) })
-  ] }) : /* @__PURE__ */ t(E, { title: "That section is no longer here", onBack: o });
+      n.plan.ok ? /* @__PURE__ */ t(Y, { notes: n.plan.notes }) : /* @__PURE__ */ t("p", { className: "mt-1 text-[12px] leading-snug text-amber-700 dark:text-amber-300", children: n.plan.reason })
+    ] }, n.to)) })
+  ] }) : /* @__PURE__ */ t(_, { title: "That section is no longer here", onBack: o });
 }
-const qe = (e, s) => {
-  if (!V(e, s)) return "none: clears it";
+const Ie = (e, i) => {
+  if (!G(e, i)) return "none: clears it";
   try {
-    const o = JSON.parse(String(e[s])).length;
-    return s === "visible_when" ? `${o} condition${o === 1 ? "" : "s"}` : `${o} role${o === 1 ? "" : "s"}`;
+    const o = JSON.parse(String(e[i])).length;
+    return i === "visible_when" ? `${o} condition${o === 1 ? "" : "s"}` : `${o} role${o === 1 ? "" : "s"}`;
   } catch {
     return "set";
   }
-}, B = "h-4 w-4 rounded border-slate-300 data-[state=checked]:border-nvr-cyan data-[state=checked]:bg-nvr-cyan data-[state=checked]:text-white dark:border-slate-600 [&_svg]:h-3 [&_svg]:w-3";
-function We({
+}, q = "h-4 w-4 rounded border-slate-300 data-[state=checked]:border-nvr-cyan data-[state=checked]:bg-nvr-cyan data-[state=checked]:text-white dark:border-slate-600 [&_svg]:h-3 [&_svg]:w-3";
+function Qe({
   bundle: e,
-  groupKey: s,
+  groupKey: i,
   onBack: o,
-  run: c
+  run: l
 }) {
-  const r = e.groups.find((a) => a.key === s), n = r ? K(r) : [], [i, m] = O(() => {
-    const a = r ? n.filter((l) => V(r, l)) : [];
-    return a.length ? a : n;
-  }), g = w(() => Se(e, s), [e, s]), [k, h] = O([]), x = w(
-    () => Ee(e, s, k, i),
-    [e, s, k, i]
+  const a = e.groups.find((s) => s.key === i), r = a ? W(a) : [], [n, c] = R(() => {
+    const s = a ? r.filter((m) => G(a, m)) : [];
+    return s.length ? s : r;
+  }), u = P(() => Re(e, i), [e, i]), [g, v] = R([]), p = P(
+    () => Te(e, i, g, n),
+    [e, i, g, n]
   );
-  if (!r) return /* @__PURE__ */ t(E, { title: "That section is no longer here", onBack: o });
-  const d = (a, l) => a.includes(l) ? a.filter((f) => f !== l) : [...a, l], u = k.length === g.length && g.length > 0;
-  return /* @__PURE__ */ p("div", { "data-structure-rules": "", className: "flex flex-col", children: [
-    /* @__PURE__ */ t(E, { title: `Copy the rules of ${N(r)}`, onBack: o }),
-    /* @__PURE__ */ p("fieldset", { className: "m-0 min-w-0 border-0 p-0 px-1", children: [
+  if (!a) return /* @__PURE__ */ t(_, { title: "That section is no longer here", onBack: o });
+  const w = (s, m) => s.includes(m) ? s.filter((h) => h !== m) : [...s, m], d = g.length === u.length && u.length > 0;
+  return /* @__PURE__ */ f("div", { "data-structure-rules": "", className: "flex flex-col", children: [
+    /* @__PURE__ */ t(_, { title: `Copy the rules of ${b(a)}`, onBack: o }),
+    /* @__PURE__ */ f("fieldset", { className: "m-0 min-w-0 border-0 p-0 px-1", children: [
       /* @__PURE__ */ t("legend", { className: "pb-1 text-[12px] font-medium text-slate-700 dark:text-foreground", children: "Rules" }),
-      n.map((a) => (
+      r.map((s) => (
         // biome-ignore lint/a11y/noLabelWithoutControl: the Radix checkbox is the control
-        /* @__PURE__ */ p("label", { className: "flex items-center gap-2 py-0.5 text-[12.5px]", children: [
+        /* @__PURE__ */ f("label", { className: "flex items-center gap-2 py-0.5 text-[12.5px]", children: [
           /* @__PURE__ */ t(
-            L,
+            K,
             {
-              checked: i.includes(a),
-              onCheckedChange: () => m((l) => d(l, a)),
-              className: B
+              checked: n.includes(s),
+              onCheckedChange: () => c((m) => w(m, s)),
+              className: q
             }
           ),
-          /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-slate-800 dark:text-foreground", children: Ae[a] }),
-          /* @__PURE__ */ t("span", { className: "shrink-0 text-[11.5px] text-slate-500 dark:text-muted-foreground", children: qe(r, a) })
-        ] }, a)
+          /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-slate-800 dark:text-foreground", children: De[s] }),
+          /* @__PURE__ */ t("span", { className: "shrink-0 text-[11.5px] text-slate-500 dark:text-muted-foreground", children: Ie(a, s) })
+        ] }, s)
       ))
     ] }),
-    /* @__PURE__ */ p("fieldset", { className: "m-0 mt-2 min-w-0 border-0 p-0 px-1", children: [
-      /* @__PURE__ */ p("div", { className: "flex items-center pb-1", children: [
+    /* @__PURE__ */ f("fieldset", { className: "m-0 mt-2 min-w-0 border-0 p-0 px-1", children: [
+      /* @__PURE__ */ f("div", { className: "flex items-center pb-1", children: [
         /* @__PURE__ */ t("legend", { className: "flex-1 text-[12px] font-medium text-slate-700 dark:text-foreground", children: "Onto" }),
         /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            onClick: () => h(u ? [] : g.map((a) => a.key)),
+            onClick: () => v(d ? [] : u.map((s) => s.key)),
             className: "text-[12px] font-medium text-sky-700 hover:underline dark:text-nvr-cyan",
-            children: u ? "None" : "All"
+            children: d ? "None" : "All"
           }
         )
       ] }),
-      /* @__PURE__ */ p("div", { className: "max-h-[200px] overflow-y-auto", children: [
-        g.length === 0 && /* @__PURE__ */ t("p", { className: S, children: "No other sections on this form." }),
-        g.map((a) => (
+      /* @__PURE__ */ f("div", { className: "max-h-[200px] overflow-y-auto", children: [
+        u.length === 0 && /* @__PURE__ */ t("p", { className: O, children: "No other sections on this form." }),
+        u.map((s) => (
           // biome-ignore lint/a11y/noLabelWithoutControl: the Radix checkbox is the control
-          /* @__PURE__ */ p(
+          /* @__PURE__ */ f(
             "label",
             {
-              "data-rules-target": a.key,
+              "data-rules-target": s.key,
               className: "flex items-center gap-2 py-0.5 text-[12.5px]",
               children: [
                 /* @__PURE__ */ t(
-                  L,
+                  K,
                   {
-                    checked: k.includes(a.key),
-                    onCheckedChange: () => h((l) => d(l, a.key)),
-                    className: B
+                    checked: g.includes(s.key),
+                    onCheckedChange: () => v((m) => w(m, s.key)),
+                    className: q
                   }
                 ),
-                /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-slate-800 dark:text-foreground", children: N(a) }),
-                /* @__PURE__ */ t("span", { className: "shrink-0 text-[11.5px] text-slate-500 dark:text-muted-foreground", children: T(e, a) })
+                /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-slate-800 dark:text-foreground", children: b(s) }),
+                /* @__PURE__ */ t("span", { className: "shrink-0 text-[11.5px] text-slate-500 dark:text-muted-foreground", children: D(e, s) })
               ]
             },
-            a.key
+            s.key
           )
         ))
       ] })
     ] }),
-    /* @__PURE__ */ p("div", { className: "mt-2 border-t border-slate-100 px-1 pt-2 dark:border-border", children: [
-      x.ok ? /* @__PURE__ */ t(W, { notes: x.notes }) : k.length > 0 && /* @__PURE__ */ t("p", { className: S, children: x.reason }),
+    /* @__PURE__ */ f("div", { className: "mt-2 border-t border-slate-100 px-1 pt-2 dark:border-border", children: [
+      p.ok ? /* @__PURE__ */ t(Y, { notes: p.notes }) : g.length > 0 && /* @__PURE__ */ t("p", { className: O, children: p.reason }),
       /* @__PURE__ */ t("div", { className: "mt-2 flex justify-end", children: /* @__PURE__ */ t(
         "button",
         {
           type: "button",
-          disabled: !x.ok,
+          disabled: !p.ok,
           "data-rules-apply": "",
-          onClick: () => c(x),
-          className: q,
-          children: x.ok ? `Copy to ${x.ops.length}` : "Copy"
+          onClick: () => l(p),
+          className: J,
+          children: p.ok ? `Copy to ${p.ops.length}` : "Copy"
         }
       ) })
     ] })
   ] });
 }
 export {
-  dt as ArrangeButton,
-  at as StructureActions,
-  ut as openStructureMenu,
-  Re as parseTargetKey,
-  it as usePinMarks
+  vt as ArrangeButton,
+  x as MenuItem,
+  kt as StructureActions,
+  wt as openStructureMenu,
+  qe as parseTargetKey,
+  gt as usePinMarks
 };