@nivaro/react 0.3.35 → 0.3.37

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

@@ -1,100 +1,102 @@
-import { jsx as i, Fragment as S, jsxs as m } from "react/jsx-runtime";
-import { EyeOff as xe, Lock as ye, Pin as Ne } from "lucide-react";
-import { isValidElement as re, Fragment as _e, cloneElement as De } from "react";
-import { cn as f, formatRelative as we } from "../../lib/utils.js";
-import { useLayoutDesign as oe, targetKey as Ce, isSelectedIn as $e } from "./design-context.js";
-import { useDesignDndNode as Te, NO_DND as Re, useDesignDropBody as ze } from "./dnd/node.js";
-import { ResizeHandle as je } from "./grid-guides.js";
-import { NoteMarker as Fe } from "./NoteMarker.js";
-import { FillChip as Me } from "./usage/FillChip.js";
-const te = (e, a) => {
+import { jsx as o, Fragment as L, jsxs as g } from "react/jsx-runtime";
+import { EyeOff as ye, Lock as Ne, Pin as _e, UserRound as we, Link2 as De } from "lucide-react";
+import { isValidElement as oe, Fragment as Ce, cloneElement as $e } from "react";
+import { cn as f, formatRelative as Te } from "../../lib/utils.js";
+import { useLayoutDesign as ie, targetKey as Re, isSelectedIn as ze } from "./design-context.js";
+import { useDesignDndNode as je, NO_DND as Fe, useDesignDropBody as Me } from "./dnd/node.js";
+import { ResizeHandle as Ae } from "./grid-guides.js";
+import { NoteMarker as Ie } from "./NoteMarker.js";
+import { FillChip as Oe } from "./usage/FillChip.js";
+const ne = (e, a) => {
   typeof e == "function" ? e(a) : e && typeof e == "object" && (e.current = a);
 };
-function ne(...e) {
+function ae(...e) {
   const a = {};
-  for (const o of e)
-    for (const [r, d] of Object.entries(o)) {
+  for (const i of e)
+    for (const [r, d] of Object.entries(i)) {
       const c = a[r];
       d !== void 0 && (c === void 0 ? a[r] = d : r === "className" ? a[r] = `${c} ${d}` : r === "style" ? a[r] = { ...c, ...d } : r === "ref" ? a[r] = (n) => {
-        te(c, n), te(d, n);
+        ne(c, n), ne(d, n);
       } : /^on[A-Z]/.test(r) && typeof c == "function" && typeof d == "function" ? a[r] = (...n) => {
         c(...n), d(...n);
       } : a[r] = d);
     }
   return a;
 }
-const Ae = {
+const Ee = {
   violet: "bg-violet-50 text-violet-800 ring-violet-200 dark:bg-violet-500/15 dark:text-violet-200 dark:ring-violet-500/30",
   emerald: "bg-emerald-50 text-emerald-800 ring-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-200 dark:ring-emerald-500/30",
   amber: "bg-amber-50 text-amber-800 ring-amber-200 dark:bg-amber-500/15 dark:text-amber-200 dark:ring-amber-500/30",
   slate: "bg-slate-100 text-slate-700 ring-slate-200 dark:bg-slate-800 dark:text-slate-200 dark:ring-slate-700"
-}, Ie = "inline-block max-w-[260px] truncate rounded px-1 text-left text-[11px] ring-1", Oe = [
+}, Ke = "inline-block max-w-[260px] truncate rounded px-1 text-left text-[11px] ring-1", Le = [
   "data-[rule-dependent]:outline-dashed data-[rule-dependent]:outline-2 data-[rule-dependent]:outline-amber-400 dark:data-[rule-dependent]:outline-amber-400/80",
   "data-[rule-drives]:after:pointer-events-none data-[rule-drives]:after:absolute data-[rule-drives]:after:-bottom-2 data-[rule-drives]:after:right-1 data-[rule-drives]:after:z-10 data-[rule-drives]:after:rounded data-[rule-drives]:after:bg-amber-50 data-[rule-drives]:after:px-1 data-[rule-drives]:after:text-[11px] data-[rule-drives]:after:text-amber-800 data-[rule-drives]:after:ring-1 data-[rule-drives]:after:ring-amber-200 data-[rule-drives]:after:content-[attr(data-rule-drives)] dark:data-[rule-drives]:after:bg-[#413727] dark:data-[rule-drives]:after:text-amber-200 dark:data-[rule-drives]:after:ring-amber-500/30"
-].join(" "), ie = {
+].join(" "), de = {
   before: { top: -5, left: 0, right: 0, height: 3 },
   after: { bottom: -5, left: 0, right: 0, height: 3 }
 };
-function Ee({
+function Se({
   target: e,
   children: a,
-  inline: o,
+  inline: i,
   asChild: r,
   pass: d,
   ...c
 }) {
-  var G, H, U, V, Z, X, q, J, Q, Y;
-  const n = oe(), g = (n == null ? void 0 : n.inheritedFrom(e)) ?? null, se = c["data-design-copy"] !== void 0, le = c["data-header-folded"] !== void 0, l = ((G = n == null ? void 0 : n.diffMark) == null ? void 0 : G.call(n, e)) ?? null, _ = (l == null ? void 0 : l.kind) === "removed", v = !n || !!g || se || _, D = Te((n == null ? void 0 : n.dnd) ?? Re, e, { disabled: v, noDrop: le });
-  if (!n) return /* @__PURE__ */ i(S, { children: a });
-  const ce = Ce(e), w = $e(n, e), s = ((H = n.roleMark) == null ? void 0 : H.call(n, e)) ?? null, R = ((U = n.marks) == null ? void 0 : U.call(n, e)) ?? [], b = ((V = n.overlay) == null ? void 0 : V.call(n, e)) ?? null, L = ((Z = n.unsaved) == null ? void 0 : Z.call(n, e)) ?? !1, k = ((X = n.peers) == null ? void 0 : X.call(n, e)) ?? [], ue = R.some((t) => t.highlight), B = ((q = n.note) == null ? void 0 : q.call(n, e)) ?? null, z = B ? /* @__PURE__ */ i(Fe, { note: B }) : null, j = v ? {} : D.props, pe = D.dragging, C = v ? null : D.slot, p = r && re(a) ? a : null, ge = (p == null ? void 0 : p.props.className) ?? "", me = /(^|\s)(absolute|fixed|sticky|relative)(\s|$)/.test(ge), he = f(
-    !me && "relative",
+  var G, H, U, V, Z, J, X, q, Q, Y, ee;
+  const n = ie(), m = (n == null ? void 0 : n.inheritedFrom(e)) ?? null, le = c["data-design-copy"] !== void 0, ce = c["data-header-folded"] !== void 0, l = ((G = n == null ? void 0 : n.diffMark) == null ? void 0 : G.call(n, e)) ?? null, w = (l == null ? void 0 : l.kind) === "removed", x = !n || !!m || le || w || !!((H = n.locked) != null && H.call(n, e)), b = je((n == null ? void 0 : n.dnd) ?? Fe, e, { disabled: x, noDrop: ce });
+  if (!n) return /* @__PURE__ */ o(L, { children: a });
+  const ue = Re(e), D = ze(n, e), s = ((U = n.roleMark) == null ? void 0 : U.call(n, e)) ?? null, R = ((V = n.marks) == null ? void 0 : V.call(n, e)) ?? [], k = ((Z = n.overlay) == null ? void 0 : Z.call(n, e)) ?? null, S = ((J = n.unsaved) == null ? void 0 : J.call(n, e)) ?? !1, v = ((X = n.peers) == null ? void 0 : X.call(n, e)) ?? [], pe = R.some((t) => t.highlight), B = ((q = n.note) == null ? void 0 : q.call(n, e)) ?? null, z = B ? /* @__PURE__ */ o(Ie, { note: B }) : null, j = x ? {} : b.props, ge = b.dragging, C = x ? null : b.slot, p = r && oe(a) ? a : null, me = (p == null ? void 0 : p.props.className) ?? "", he = /(^|\s)(absolute|fixed|sticky|relative)(\s|$)/.test(me), fe = f(
+    !he && "relative",
     "cursor-pointer rounded-md outline-offset-2",
-    !p && (o ? "inline-block" : "block"),
-    w ? "outline outline-2 outline-nvr-cyan" : k.length > 0 ? `outline outline-2 ${k[0].outline}` : ue ? "outline-dashed outline-2 outline-violet-400 dark:outline-violet-400/70" : "hover:outline hover:outline-1 hover:outline-slate-300 dark:hover:outline-slate-600",
-    b == null ? void 0 : b.className,
+    // #3193: on touch a press-and-hold picks the node up — no callout, no text selection.
+    "touch-manipulation [-webkit-touch-callout:none] [@media(pointer:coarse)]:select-none",
+    !p && (i ? "inline-block" : "block"),
+    D ? "outline outline-2 outline-nvr-cyan" : v.length > 0 ? `outline outline-2 ${v[0].outline}` : pe ? "outline-dashed outline-2 outline-violet-400 dark:outline-violet-400/70" : "hover:outline hover:outline-1 hover:outline-slate-300 dark:hover:outline-slate-600",
+    k == null ? void 0 : k.className,
     "focus-visible:outline focus-visible:outline-2 focus-visible:outline-nvr-cyan",
-    Oe,
+    Le,
     // The section's "Changed by" shows while the pointer is over it.
     "[&:hover>[data-design-last-change]]:visible",
-    pe && "opacity-40",
+    ge && "opacity-40",
     // Hidden for the previewed role: faint, its tags not.
     (s == null ? void 0 : s.kind) === "hidden" && "[&>:not([data-design-badges])]:opacity-40",
-    l && Ge[l.kind],
-    _ && "cursor-default [&>:not([data-design-badges])]:opacity-40"
-  ), fe = (t) => {
+    l && Ve[l.kind],
+    w && "cursor-default [&>:not([data-design-badges])]:opacity-40"
+  ), be = (t) => {
     const u = t.target;
     if (u.closest("[data-design-target]") !== t.currentTarget) return;
-    if (_) {
+    if (w) {
       t.preventDefault(), t.stopPropagation();
       return;
     }
     t.shiftKey || t.metaKey || t.ctrlKey ? n.onSelect(e, { additive: !0 }) : n.onSelect(e);
-    const N = u.closest("[data-design-pass]");
-    N && t.currentTarget.contains(N) || (t.preventDefault(), t.stopPropagation());
-  }, be = (t) => {
-    t.key !== "Enter" || t.target !== t.currentTarget || _ || t.currentTarget.tagName !== "BUTTON" && (t.preventDefault(), t.shiftKey ? n.onSelect(e, { additive: !0 }) : n.onSelect(e));
-  }, x = c["data-design-tab"] !== void 0 || ((J = p == null ? void 0 : p.props) == null ? void 0 : J["data-design-tab"]) !== void 0, F = {
-    "data-design-target": ce,
-    "data-selected": w ? "true" : void 0,
+    const _ = u.closest("[data-design-pass]");
+    _ && t.currentTarget.contains(_) || (t.preventDefault(), t.stopPropagation());
+  }, ke = (t) => {
+    t.key !== "Enter" || t.target !== t.currentTarget || w || t.currentTarget.tagName !== "BUTTON" && (t.preventDefault(), t.shiftKey ? n.onSelect(e, { additive: !0 }) : n.onSelect(e));
+  }, y = c["data-design-tab"] !== void 0 || ((Q = p == null ? void 0 : p.props) == null ? void 0 : Q["data-design-tab"]) !== void 0, F = {
+    "data-design-target": ue,
+    "data-selected": D ? "true" : void 0,
     "data-design-pass": d ? "" : void 0,
     "data-drop-slot": C ?? void 0,
     "data-role-mark": s == null ? void 0 : s.kind,
-    "data-unsaved": L ? "" : void 0,
+    "data-unsaved": S ? "" : void 0,
     "data-diff": l == null ? void 0 : l.kind,
     // Locked nodes get no dnd attributes; they still take focus to be selected.
     // So do nodes drag and drop leaves out (a pinned section, #2628).
-    ...v || !("tabIndex" in j) ? { role: "button", tabIndex: 0 } : {},
-    ...x && g ? { "data-tip": `From ${g}` } : {},
-    className: he,
-    onClickCapture: fe,
-    onKeyDown: be
-  }, ke = (s == null ? void 0 : s.kind) === "hidden" ? xe : ye, M = e.kind === "field" || e.kind === "header" ? ((Q = n.fillRate) == null ? void 0 : Q.call(n, e.field)) ?? null : null, y = e.kind === "group" && !x ? ((Y = n.lastChange) == null ? void 0 : Y.call(n, e)) ?? null : null, P = y && [y.by ? `by ${y.by}` : null, y.at ? we(y.at) : null].filter(Boolean).join(" · ") || null, A = P && !l ? /* @__PURE__ */ m(
+    ...x || !("tabIndex" in j) ? { role: "button", tabIndex: 0 } : {},
+    ...y && m ? { "data-tip": `From ${m}` } : {},
+    className: fe,
+    onClickCapture: be,
+    onKeyDown: ke
+  }, ve = (s == null ? void 0 : s.kind) === "hidden" ? ye : Ne, M = e.kind === "field" || e.kind === "header" ? ((Y = n.fillRate) == null ? void 0 : Y.call(n, e.field)) ?? null : null, N = e.kind === "group" && !y ? ((ee = n.lastChange) == null ? void 0 : ee.call(n, e)) ?? null : null, P = N && [N.by ? `by ${N.by}` : null, N.at ? Te(N.at) : null].filter(Boolean).join(" · ") || null, A = P && !l ? /* @__PURE__ */ g(
     "span",
     {
       "data-design-last-change": "",
       className: f(
         "pointer-events-none absolute -bottom-2 right-1 z-10 rounded bg-white px-1 text-[10.5px] text-slate-500 dark:bg-card dark:text-muted-foreground",
-        !w && "invisible"
+        !D && "invisible"
       ),
       children: [
         "Changed ",
@@ -102,41 +104,43 @@ function Ee({
       ]
     }
   ) : null, h = [];
-  l && h.push({ rank: 0, text: We(l), node: /* @__PURE__ */ i(ae, { diff: l }) }), s && h.push({
+  l && h.push({ rank: 0, text: Ue(l), node: /* @__PURE__ */ o(re, { diff: l }) }), s && h.push({
     rank: 1,
     text: `${s.kind === "hidden" ? "Hidden" : "Read-only"} for ${s.role}`,
-    node: /* @__PURE__ */ m(
+    node: /* @__PURE__ */ g(
       "span",
       {
         "data-design-role-tag": s.kind,
         className: "inline-flex items-center gap-0.5 rounded bg-amber-50 px-1 text-[11px] text-amber-800 ring-1 ring-amber-200 dark:bg-amber-500/15 dark:text-amber-200 dark:ring-amber-500/30",
         children: [
-          /* @__PURE__ */ i(ke, { "aria-hidden": !0, className: "h-3 w-3" }),
+          /* @__PURE__ */ o(ve, { "aria-hidden": !0, className: "h-3 w-3" }),
           s.kind === "hidden" ? "Hidden" : "Read-only",
           " for ",
           s.role
         ]
       }
     )
-  }), b && h.push({
+  }), k && h.push({
     rank: 1,
     text: "Who sees it",
-    node: /* @__PURE__ */ i("span", { "data-design-pass": "", className: "pointer-events-auto", children: b.chip })
+    node: /* @__PURE__ */ o("span", { "data-design-pass": "", className: "pointer-events-auto", children: k.chip })
   }), R.forEach((t, u) => {
-    const N = f(
-      Ie,
+    const _ = f(
+      Ke,
       t.icon && "inline-flex items-center gap-0.5",
       t.onClick || t.tip ? "pointer-events-auto" : null,
       t.onClick && "hover:brightness-95",
-      Ae[t.tone]
-    ), ee = /* @__PURE__ */ m(S, { children: [
-      t.icon === "pin" && /* @__PURE__ */ i(Ne, { "aria-hidden": !0, className: "h-3 w-3" }),
+      Ee[t.tone]
+    ), te = /* @__PURE__ */ g(L, { children: [
+      t.icon === "pin" && /* @__PURE__ */ o(_e, { "aria-hidden": !0, className: "h-3 w-3" }),
+      t.icon === "person" && /* @__PURE__ */ o(we, { "aria-hidden": !0, className: "h-3 w-3" }),
+      t.icon === "link" && /* @__PURE__ */ o(De, { "aria-hidden": !0, className: "h-3 w-3" }),
       t.text
     ] });
     h.push({
-      rank: Le(t),
+      rank: We(t),
       text: t.text,
-      node: t.onClick ? /* @__PURE__ */ i(
+      node: t.onClick ? /* @__PURE__ */ o(
         "button",
         {
           type: "button",
@@ -144,53 +148,53 @@ function Ee({
           "data-design-pass": "",
           "data-tip": t.tip,
           onClick: t.onClick,
-          className: N,
-          children: ee
+          className: _,
+          children: te
         },
         `${u}:${t.text}`
-      ) : /* @__PURE__ */ i(
+      ) : /* @__PURE__ */ o(
         "span",
         {
           "data-design-mark": "",
           "data-tip": t.tip,
-          className: N,
-          children: ee
+          className: _,
+          children: te
         },
         `${u}:${t.text}`
       )
     });
-  }), g && h.push({
+  }), m && h.push({
     rank: 5,
-    text: `from ${g}`,
-    node: /* @__PURE__ */ m("span", { className: "rounded bg-slate-100 px-1 text-[11px] text-slate-600 dark:bg-slate-800 dark:text-slate-300", children: [
+    text: `from ${m}`,
+    node: /* @__PURE__ */ g("span", { className: "rounded bg-slate-100 px-1 text-[11px] text-slate-600 dark:bg-slate-800 dark:text-slate-300", children: [
       "from ",
-      g
+      m
     ] })
   });
-  const { shown: ve, rest: $ } = Be(h), W = R.length > 0 || b != null || k.length > 0, T = x && !l ? [...h.map((t) => t.text), ...k.map((t) => t.name)] : [];
-  T.length > 0 && (F["data-tip"] = g && !s && !W ? `From ${g}` : T.join(" · "));
-  const I = x && l ? /* @__PURE__ */ i("span", { "data-design-badges": "", className: "pointer-events-none absolute -top-2 right-0 z-10", children: /* @__PURE__ */ i(ae, { diff: l }) }) : T.length > 0 ? /* @__PURE__ */ i(
+  const { shown: xe, rest: $ } = Ge(h), W = R.length > 0 || k != null || v.length > 0, T = y && !l ? [...h.map((t) => t.text), ...v.map((t) => t.name)] : [];
+  T.length > 0 && (F["data-tip"] = m && !s && !W ? `From ${m}` : T.join(" · "));
+  const I = y && l ? /* @__PURE__ */ o("span", { "data-design-badges": "", className: "pointer-events-none absolute -top-2 right-0 z-10", children: /* @__PURE__ */ o(re, { diff: l }) }) : T.length > 0 ? /* @__PURE__ */ o(
     "span",
     {
       "data-design-badges": "",
       className: f(
         "pointer-events-none absolute left-1/2 top-1 z-10 h-1.5 w-1.5 -translate-x-1/2 rounded-full",
-        g && !s && !W ? "bg-slate-500 dark:bg-slate-400" : "bg-violet-500 dark:bg-violet-400"
+        m && !s && !W ? "bg-slate-500 dark:bg-slate-400" : "bg-violet-500 dark:bg-violet-400"
       ),
-      children: /* @__PURE__ */ i("span", { className: "sr-only", children: T.join(" · ") })
+      children: /* @__PURE__ */ o("span", { className: "sr-only", children: T.join(" · ") })
     }
-  ) : h.length > 0 || k.length > 0 || M != null ? /* @__PURE__ */ m(
+  ) : h.length > 0 || v.length > 0 || M != null ? /* @__PURE__ */ g(
     "span",
     {
       "data-design-badges": "",
       className: "pointer-events-none absolute -top-2 right-1 z-10 flex items-center gap-1",
       children: [
-        M != null && /* @__PURE__ */ i(Me, { pct: M }),
-        ve.map((t, u) => (
+        M != null && /* @__PURE__ */ o(Oe, { pct: M }),
+        xe.map((t, u) => (
           // biome-ignore lint/suspicious/noArrayIndexKey: ranked tags of one node, rebuilt each render
-          /* @__PURE__ */ i(_e, { children: t.node }, u)
+          /* @__PURE__ */ o(Ce, { children: t.node }, u)
         )),
-        $.length > 0 && /* @__PURE__ */ m(
+        $.length > 0 && /* @__PURE__ */ g(
           "span",
           {
             "data-design-more-tags": $.length,
@@ -202,7 +206,7 @@ function Ee({
             ]
           }
         ),
-        k.map((t) => /* @__PURE__ */ i(
+        v.map((t) => /* @__PURE__ */ o(
           "span",
           {
             "data-design-peer": t.id,
@@ -211,42 +215,53 @@ function Ee({
               "pointer-events-auto inline-flex h-4 w-4 items-center justify-center rounded-full text-[9px] font-semibold ring-1",
               t.chip
             ),
-            children: Pe(t.name)
+            children: He(t.name)
           },
           t.id
         ))
       ]
     }
-  ) : null, O = L ? /* @__PURE__ */ i(
+  ) : null, O = S ? /* @__PURE__ */ o(
     "span",
     {
       "data-unsaved-dot": "",
       className: f(
         "pointer-events-none absolute z-10 h-2 w-2 rounded-full bg-nvr-cyan ring-2 ring-white dark:ring-slate-900",
         // A step clips its corners away: the dot sits inside, before the arrow.
-        x ? "right-4 top-1" : "-left-1 -top-1"
+        y ? "right-4 top-1" : "-left-1 -top-1"
       ),
-      children: /* @__PURE__ */ i("span", { className: "sr-only", children: "unsaved change" })
+      children: /* @__PURE__ */ o("span", { className: "sr-only", children: "unsaved change" })
     }
-  ) : null, E = C ? /* @__PURE__ */ i(
+  ) : null, E = C ? /* @__PURE__ */ o(
     "span",
     {
       "aria-hidden": !0,
       "data-design-drop-indicator": C,
       className: "pointer-events-none absolute z-30 rounded-full bg-nvr-cyan shadow-[0_0_0_2px_#fff] dark:shadow-[0_0_0_2px_#0f172a]",
-      style: D.indicator ?? ie[C]
+      style: b.indicator ?? de[C],
+      children: b.merge && /* @__PURE__ */ g(
+        "span",
+        {
+          "data-design-merge-label": "",
+          className: "absolute right-2 top-1/2 -translate-y-1/2 whitespace-nowrap rounded bg-nvr-cyan px-1.5 text-[11px] font-medium leading-5 text-white",
+          children: [
+            "Join into ",
+            b.merge
+          ]
+        }
+      )
     }
-  ) : null, K = w && !v && n.resizeWidth && (e.kind === "field" || e.kind === "slot") && e.group_key !== null ? /* @__PURE__ */ i(je, { onCommit: (t) => {
+  ) : null, K = D && !x && n.resizeWidth && (e.kind === "field" || e.kind === "slot") && e.group_key !== null ? /* @__PURE__ */ o(Ae, { onCommit: (t) => {
     var u;
     return (u = n.resizeWidth) == null ? void 0 : u.call(n, e, t);
   } }) : null;
   if (p) {
     const { children: t, ...u } = p.props;
-    return De(
+    return $e(
       p,
       // The child's own classes, style, ref and handlers are kept and merged.
-      ne(u, c, j, F),
-      I || A || E || O || z || K ? /* @__PURE__ */ m(S, { children: [
+      ae(u, c, j, F),
+      I || A || E || O || z || K ? /* @__PURE__ */ g(L, { children: [
         O,
         I,
         A,
@@ -257,7 +272,7 @@ function Ee({
       ] }) : t
     );
   }
-  return /* @__PURE__ */ m(o ? "span" : "div", { ...ne(c, j, F), children: [
+  return /* @__PURE__ */ g(i ? "span" : "div", { ...ae(c, j, F), children: [
     O,
     I,
     A,
@@ -267,32 +282,32 @@ function Ee({
     a
   ] });
 }
-function Ke(e, a, o, r = {}) {
-  if (!e || o == null || o === !1) return o;
-  const d = re(o) ? o.key ?? void 0 : void 0;
-  return /* @__PURE__ */ i(Ee, { target: a, ...r, children: o }, d);
+function Be(e, a, i, r = {}) {
+  if (!e || i == null || i === !1) return i;
+  const d = oe(i) ? i.key ?? void 0 : void 0;
+  return /* @__PURE__ */ o(Se, { target: a, ...r, children: i }, d);
 }
-function tt() {
-  const e = oe();
-  return (a, o, r) => Ke(e, a, o, r);
+function rt() {
+  const e = ie();
+  return (a, i, r) => Be(e, a, i, r);
 }
-function nt({ groupKey: e }) {
-  const { ref: a, slot: o, indicator: r } = ze(e);
-  return /* @__PURE__ */ i(
+function ot({ groupKey: e }) {
+  const { ref: a, slot: i, indicator: r } = Me(e);
+  return /* @__PURE__ */ o(
     "span",
     {
       ref: a,
       "aria-hidden": !0,
-      hidden: !o,
+      hidden: !i,
       "data-design-drop-body": e,
-      "data-design-drop-indicator": o ?? void 0,
+      "data-design-drop-indicator": i ?? void 0,
       className: "pointer-events-none absolute z-30 rounded-full bg-nvr-cyan shadow-[0_0_0_2px_#fff] dark:shadow-[0_0_0_2px_#0f172a]",
-      style: o ? r ?? ie[o] : void 0
+      style: i ? r ?? de[i] : void 0
     }
   );
 }
-function at() {
-  return /* @__PURE__ */ i(
+function it() {
+  return /* @__PURE__ */ o(
     "div",
     {
       "data-design-drop-zone": "",
@@ -301,30 +316,30 @@ function at() {
     }
   );
 }
-const Se = 2;
-function Le(e) {
-  return e.kind === "preview" ? 1 : e.kind === "ai" ? 4 : e.kind === "loop" || e.highlight ? 2 : 3;
+const Pe = 2;
+function We(e) {
+  return e.kind === "preview" ? 1 : e.kind === "ai" ? 4 : e.kind === "loop" || e.kind === "personal" || e.highlight ? 2 : 3;
 }
-function Be(e, a = Se) {
-  const o = e.map((r, d) => ({ c: r, i: d })).sort((r, d) => r.c.rank - d.c.rank || r.i - d.i).map((r) => r.c);
-  return { shown: o.slice(0, a), rest: o.slice(a) };
+function Ge(e, a = Pe) {
+  const i = e.map((r, d) => ({ c: r, i: d })).sort((r, d) => r.c.rank - d.c.rank || r.i - d.i).map((r) => r.c);
+  return { shown: i.slice(0, a), rest: i.slice(a) };
 }
-function Pe(e) {
-  return e.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((o) => {
+function He(e) {
+  return e.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((i) => {
     var r;
-    return ((r = o[0]) == null ? void 0 : r.toUpperCase()) ?? "";
+    return ((r = i[0]) == null ? void 0 : r.toUpperCase()) ?? "";
   }).join("") || "?";
 }
-function We(e) {
-  const a = de[e.kind].text;
+function Ue(e) {
+  const a = se[e.kind].text;
   return e.kind === "moved" && e.detail ? `Moved ${e.detail}` : e.kind === "changed" && e.detail ? `${a}: ${e.detail}` : a;
 }
-const Ge = {
+const Ve = {
   added: "ring-2 ring-emerald-500/70 dark:ring-emerald-400/60",
   moved: "ring-2 ring-amber-500/70 dark:ring-amber-400/60",
   changed: "ring-1 ring-violet-500/60 dark:ring-violet-400/50",
   removed: "ring-1 ring-rose-400/70 dark:ring-rose-400/50"
-}, de = {
+}, se = {
   added: {
     text: "Added",
     cls: "bg-emerald-50 text-emerald-800 ring-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-200 dark:ring-emerald-500/30"
@@ -342,27 +357,27 @@ const Ge = {
     cls: "bg-rose-50 text-rose-800 ring-rose-200 line-through dark:bg-rose-500/15 dark:text-rose-200 dark:ring-rose-500/30"
   }
 };
-function ae({ diff: e }) {
-  const a = de[e.kind];
-  return /* @__PURE__ */ m(
+function re({ diff: e }) {
+  const a = se[e.kind];
+  return /* @__PURE__ */ g(
     "span",
     {
       "data-design-diff-tag": e.kind,
       className: f("inline-flex items-center rounded px-1 text-[11px] ring-1", a.cls),
       children: [
         e.kind === "moved" && e.detail ? `Moved ${e.detail}` : a.text,
-        e.kind === "changed" && e.detail && /* @__PURE__ */ i("span", { className: "ml-1 max-w-[160px] truncate opacity-80", children: e.detail })
+        e.kind === "changed" && e.detail && /* @__PURE__ */ o("span", { className: "ml-1 max-w-[160px] truncate opacity-80", children: e.detail })
       ]
     }
   );
 }
 export {
-  nt as DesignDropBody,
-  at as DesignDropZone,
-  Ee as DesignNode,
-  Se as MAX_NODE_TAGS,
-  Ke as designWrap,
-  Le as markRank,
-  Be as rankChips,
-  tt as useDesignWrap
+  ot as DesignDropBody,
+  it as DesignDropZone,
+  Se as DesignNode,
+  Pe as MAX_NODE_TAGS,
+  Be as designWrap,
+  We as markRank,
+  Ge as rankChips,
+  rt as useDesignWrap
 };

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

@@ -1,6 +1,6 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useMemo as p } from "react";
-import { ItemEditForm as x } from "../ItemEditForm.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useMemo as x } from "react";
+import { ItemEditForm as p } from "../ItemEditForm.js";
 import { PlacementTextContext as h } from "../item-edit/placement-behaviour.js";
 import { RecordReadView as C } from "../RecordReadView.js";
 import { PdfCanvas as P } from "./canvases/PdfCanvas.js";
@@ -21,34 +21,42 @@ function T(e) {
   }
 }
 function F(e) {
-  const { data: t = [] } = s(e.collection);
-  return /* @__PURE__ */ r(w, { ...e, fields: t });
+  const { data: r = [] } = s(e.collection);
+  return /* @__PURE__ */ t(w, { ...e, fields: r });
 }
 function b(e) {
-  const { data: t = [] } = s(e.collection);
-  return /* @__PURE__ */ r(P, { ...e, fields: t });
+  const { data: r = [] } = s(e.collection);
+  return /* @__PURE__ */ t(P, { ...e, fields: r });
 }
 function N({
   collection: e,
-  bundle: t,
+  bundle: r,
   layout: l,
-  record: d,
+  record: m,
   stateKey: n = null,
-  roleId: m = null,
-  design: o,
+  roleId: d = null,
+  design: a,
   apply: c,
   whenIdle: u
 }) {
-  const a = T(String(t.layout.layout_type ?? "grouped")), v = p(() => ({ stateKey: n, roleId: m }), [n, m]);
-  let i;
-  return a === "item-edit-form" ? i = /* @__PURE__ */ r(
-    x,
+  const i = T(String(r.layout.layout_type ?? "grouped")), v = x(() => ({ stateKey: n, roleId: d }), [n, d]);
+  let o;
+  return i === "item-edit-form" ? o = /* @__PURE__ */ t(
+    p,
     {
       collection: e,
       documentTitle: !1,
-      design: { layout: l, record: d, context: o, stateKey: n }
+      design: { layout: l, record: m, context: a, stateKey: n }
     }
-  ) : a === "read-view" ? i = /* @__PURE__ */ r(C, { collection: e, design: { layout: l, record: d, context: o } }) : a === "pdf" ? i = /* @__PURE__ */ r(f.Provider, { value: o, children: /* @__PURE__ */ r(b, { bundle: t, collection: e, whenIdle: u }) }) : i = /* @__PURE__ */ r(f.Provider, { value: o, children: /* @__PURE__ */ r(F, { bundle: t, apply: c, collection: e }) }), /* @__PURE__ */ r("div", { "data-editor-canvas": "", "data-renderer": a, className: "flex min-h-full flex-col", children: /* @__PURE__ */ r(h.Provider, { value: v, children: i }) });
+  ) : i === "read-view" ? o = /* @__PURE__ */ t(C, { collection: e, design: { layout: l, record: m, context: a } }) : i === "pdf" ? o = /* @__PURE__ */ t(f.Provider, { value: a, children: /* @__PURE__ */ t(b, { bundle: r, collection: e, whenIdle: u }) }) : o = /* @__PURE__ */ t(f.Provider, { value: a, children: /* @__PURE__ */ t(F, { bundle: r, apply: c, collection: e }) }), /* @__PURE__ */ t(
+    "div",
+    {
+      "data-editor-canvas": "",
+      "data-renderer": i,
+      className: i === "item-edit-form" ? "flex min-h-0 flex-1 flex-col" : "flex flex-1 flex-col",
+      children: /* @__PURE__ */ t(h.Provider, { value: v, children: o })
+    }
+  );
 }
 export {
   N as EditorCanvas,