@nivaro/react 0.3.36 → 0.3.37

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

@@ -1,41 +1,41 @@
-import { jsx as o, Fragment as S, jsxs as m } from "react/jsx-runtime";
-import { EyeOff as xe, Lock as ye, Pin as Ne, UserRound as _e } from "lucide-react";
-import { isValidElement as re, Fragment as De, cloneElement as we } from "react";
-import { cn as f, formatRelative as Ce } from "../../lib/utils.js";
-import { useLayoutDesign as oe, targetKey as $e, isSelectedIn as Te } from "./design-context.js";
-import { useDesignDndNode as Re, NO_DND as ze, useDesignDropBody as je } from "./dnd/node.js";
-import { ResizeHandle as Fe } from "./grid-guides.js";
-import { NoteMarker as Me } from "./NoteMarker.js";
-import { FillChip as Ae } 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 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 Ie = {
+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"
-}, Oe = "inline-block max-w-[260px] truncate rounded px-1 text-left text-[11px] ring-1", Ee = [
+}, 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 Ke({
+function Se({
   target: e,
   children: a,
   inline: i,
@@ -43,58 +43,60 @@ function Ke({
   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 = Re((n == null ? void 0 : n.dnd) ?? ze, e, { disabled: v, noDrop: le });
-  if (!n) return /* @__PURE__ */ o(S, { children: a });
-  const ce = $e(e), w = Te(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__ */ o(Me, { 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",
+    // #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"),
-    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,
+    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",
-    Ee,
+    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 && He[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 ? Ce(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,40 +104,41 @@ function Ke({
       ]
     }
   ) : null, h = [];
-  l && h.push({ rank: 0, text: Ge(l), node: /* @__PURE__ */ o(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__ */ o(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__ */ o("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(
-      Oe,
+    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",
-      Ie[t.tone]
-    ), ee = /* @__PURE__ */ m(S, { children: [
-      t.icon === "pin" && /* @__PURE__ */ o(Ne, { "aria-hidden": !0, className: "h-3 w-3" }),
-      t.icon === "person" && /* @__PURE__ */ o(_e, { "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: Be(t),
+      rank: We(t),
       text: t.text,
       node: t.onClick ? /* @__PURE__ */ o(
         "button",
@@ -145,8 +148,8 @@ function Ke({
           "data-design-pass": "",
           "data-tip": t.tip,
           onClick: t.onClick,
-          className: N,
-          children: ee
+          className: _,
+          children: te
         },
         `${u}:${t.text}`
       ) : /* @__PURE__ */ o(
@@ -154,44 +157,44 @@ function Ke({
         {
           "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: $ } = Pe(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__ */ o("span", { "data-design-badges": "", className: "pointer-events-none absolute -top-2 right-0 z-10", children: /* @__PURE__ */ o(ae, { diff: l }) }) : T.length > 0 ? /* @__PURE__ */ o(
+  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__ */ 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__ */ o(Ae, { 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__ */ o(De, { 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,
@@ -203,7 +206,7 @@ function Ke({
             ]
           }
         ),
-        k.map((t) => /* @__PURE__ */ o(
+        v.map((t) => /* @__PURE__ */ o(
           "span",
           {
             "data-design-peer": t.id,
@@ -212,20 +215,20 @@ function Ke({
               "pointer-events-auto inline-flex h-4 w-4 items-center justify-center rounded-full text-[9px] font-semibold ring-1",
               t.chip
             ),
-            children: We(t.name)
+            children: He(t.name)
           },
           t.id
         ))
       ]
     }
-  ) : null, O = L ? /* @__PURE__ */ o(
+  ) : 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__ */ o("span", { className: "sr-only", children: "unsaved change" })
     }
@@ -235,19 +238,30 @@ function Ke({
       "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__ */ o(Fe, { 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 we(
+    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,
@@ -258,7 +272,7 @@ function Ke({
       ] }) : t
     );
   }
-  return /* @__PURE__ */ m(i ? "span" : "div", { ...ne(c, j, F), children: [
+  return /* @__PURE__ */ g(i ? "span" : "div", { ...ae(c, j, F), children: [
     O,
     I,
     A,
@@ -268,17 +282,17 @@ function Ke({
     a
   ] });
 }
-function Se(e, a, i, r = {}) {
+function Be(e, a, i, r = {}) {
   if (!e || i == null || i === !1) return i;
-  const d = re(i) ? i.key ?? void 0 : void 0;
-  return /* @__PURE__ */ o(Ke, { target: a, ...r, children: i }, d);
+  const d = oe(i) ? i.key ?? void 0 : void 0;
+  return /* @__PURE__ */ o(Se, { target: a, ...r, children: i }, d);
 }
-function nt() {
-  const e = oe();
-  return (a, i, r) => Se(e, a, i, r);
+function rt() {
+  const e = ie();
+  return (a, i, r) => Be(e, a, i, r);
 }
-function at({ groupKey: e }) {
-  const { ref: a, slot: i, indicator: r } = je(e);
+function ot({ groupKey: e }) {
+  const { ref: a, slot: i, indicator: r } = Me(e);
   return /* @__PURE__ */ o(
     "span",
     {
@@ -288,11 +302,11 @@ function at({ groupKey: e }) {
       "data-design-drop-body": e,
       "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: i ? r ?? ie[i] : void 0
+      style: i ? r ?? de[i] : void 0
     }
   );
 }
-function rt() {
+function it() {
   return /* @__PURE__ */ o(
     "div",
     {
@@ -302,30 +316,30 @@ function rt() {
     }
   );
 }
-const Le = 2;
-function Be(e) {
+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 Pe(e, a = Le) {
+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 We(e) {
+function He(e) {
   return e.trim().split(/\s+/).filter(Boolean).slice(0, 2).map((i) => {
     var r;
     return ((r = i[0]) == null ? void 0 : r.toUpperCase()) ?? "";
   }).join("") || "?";
 }
-function Ge(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 He = {
+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"
@@ -343,9 +357,9 @@ const He = {
     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,
@@ -358,12 +372,12 @@ function ae({ diff: e }) {
   );
 }
 export {
-  at as DesignDropBody,
-  rt as DesignDropZone,
-  Ke as DesignNode,
-  Le as MAX_NODE_TAGS,
-  Se as designWrap,
-  Be as markRank,
-  Pe as rankChips,
-  nt 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
 };