@nivaro/react 0.3.33 → 0.3.34

package/dist/shared/components/item-edit/FieldAffordances.js

@@ -1,59 +1,61 @@
-import { jsx as o, jsxs as x, Fragment as $ } from "react/jsx-runtime";
-import { Copy as F, History as O, Eye as K, Sigma as P, ExternalLink as B, Lock as H, X as I } from "lucide-react";
-import { useContext as U, createContext as q, useState as C, useCallback as g, useRef as v, useEffect as E } from "react";
-import { createPortal as J } from "react-dom";
-import { toast as k } from "sonner";
-import { htmlToText as R } from "../../lib/sanitize-html.js";
-import { cn as A, formatRelative as T } from "../../lib/utils.js";
-const V = q(null), re = () => U(V), j = (e) => {
-  if (e == null || e === "") return "empty";
-  if (typeof e == "boolean") return e ? "Yes" : "No";
-  if (typeof e == "object")
+import { jsx as s, jsxs as y, Fragment as z } from "react/jsx-runtime";
+import { Copy as Y, History as Q, Eye as Z, Sigma as ee, ExternalLink as te, UserRound as ne, UserRoundX as re, Lock as oe, X } from "lucide-react";
+import { useContext as ae, createContext as se, useState as M, useCallback as F, useRef as j, useEffect as _, useLayoutEffect as le } from "react";
+import { createPortal as ie } from "react-dom";
+import { toast as h } from "sonner";
+import { htmlToText as ce } from "../../lib/sanitize-html.js";
+import { cn as q, formatRelative as I } from "../../lib/utils.js";
+import { PERSONAL_DEFAULT_GHOST_BUTTON as de } from "./PersonalDefaultPill.js";
+import { usePersonalDefaultsApi as ue } from "./usePersonalDefaults.js";
+const me = se(null), Ce = () => ae(me), V = (t) => {
+  if (t == null || t === "") return "empty";
+  if (typeof t == "boolean") return t ? "Yes" : "No";
+  if (typeof t == "object")
     try {
-      const s = JSON.stringify(e);
-      return s.length > 80 ? `${s.slice(0, 80)}…` : s;
+      const a = JSON.stringify(t);
+      return a.length > 80 ? `${a.slice(0, 80)}…` : a;
     } catch {
-      return String(e);
+      return String(t);
     }
-  const n = String(e), t = /[<&]/.test(n) ? R(n).trim() : n;
-  return t.length > 80 ? `${t.slice(0, 80)}…` : t;
+  const n = String(t), e = /[<&]/.test(n) ? ce(n).trim() : n;
+  return e.length > 80 ? `${e.slice(0, 80)}…` : e;
 };
-function oe({
-  change: e,
+function Se({
+  change: t,
   onDismiss: n,
-  onTakeTheirs: t
+  onTakeTheirs: e
 }) {
-  return e.conflict && t ? /* @__PURE__ */ x(
+  return t.conflict && e ? /* @__PURE__ */ y(
     "div",
     {
       "data-remote-change-ghost": !0,
       "data-remote-conflict": !0,
       className: "nvr-expand-in flex flex-wrap items-center gap-1.5 rounded-md border border-amber-300 bg-amber-50 px-2 py-1 text-[11.5px] text-amber-900 dark:border-amber-500/40 dark:bg-amber-500/10 dark:text-amber-100",
       children: [
-        /* @__PURE__ */ o("span", { className: "h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-amber-500" }),
-        /* @__PURE__ */ x("span", { className: "min-w-0 flex-1", children: [
-          e.by ?? "Someone",
+        /* @__PURE__ */ s("span", { className: "h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-amber-500" }),
+        /* @__PURE__ */ y("span", { className: "min-w-0 flex-1", children: [
+          t.by ?? "Someone",
           " changed this to",
           " ",
-          /* @__PURE__ */ o("span", { className: "font-medium", children: j(e.theirs) }),
+          /* @__PURE__ */ s("span", { className: "font-medium", children: V(t.theirs) }),
           " while you were editing",
-          /* @__PURE__ */ x("span", { className: "text-amber-700/80 dark:text-amber-200/70", children: [
+          /* @__PURE__ */ y("span", { className: "text-amber-700/80 dark:text-amber-200/70", children: [
             " ",
             "· ",
-            T(e.at)
+            I(t.at)
           ] })
         ] }),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ s(
           "button",
           {
             type: "button",
-            onClick: t,
+            onClick: e,
             "data-remote-take-theirs": !0,
             className: "shrink-0 rounded border border-amber-400 bg-white px-1.5 py-0.5 text-[10.5px] font-medium text-amber-900 hover:bg-amber-100 dark:bg-transparent dark:text-amber-100 dark:hover:bg-amber-500/20",
             children: "Take theirs"
           }
         ),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ s(
           "button",
           {
             type: "button",
@@ -65,300 +67,465 @@ function oe({
         )
       ]
     }
-  ) : /* @__PURE__ */ x(
+  ) : /* @__PURE__ */ y(
     "div",
     {
       "data-remote-change-ghost": !0,
       className: "nvr-expand-in flex items-start gap-1.5 rounded-md border border-sky-200 bg-sky-50 px-2 py-1 text-[11.5px] text-sky-900 dark:border-sky-500/30 dark:bg-sky-500/10 dark:text-sky-200",
       children: [
-        /* @__PURE__ */ o("span", { className: "mt-0.5 h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-sky-500" }),
-        /* @__PURE__ */ x("span", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ s("span", { className: "mt-0.5 h-1.5 w-1.5 shrink-0 animate-pulse rounded-full bg-sky-500" }),
+        /* @__PURE__ */ y("span", { className: "min-w-0 flex-1", children: [
           "was",
           " ",
-          /* @__PURE__ */ o("span", { className: "font-medium line-through decoration-sky-400/70", children: j(e.was) }),
-          /* @__PURE__ */ x("span", { className: "text-sky-700/80 dark:text-sky-300/80", children: [
+          /* @__PURE__ */ s("span", { className: "font-medium line-through decoration-sky-400/70", children: V(t.was) }),
+          /* @__PURE__ */ y("span", { className: "text-sky-700/80 dark:text-sky-300/80", children: [
             " ",
             "· ",
-            e.by ?? "someone",
+            t.by ?? "someone",
             ", ",
-            T(e.at)
+            I(t.at)
           ] })
         ] }),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ s(
           "button",
           {
             type: "button",
             onClick: n,
             "aria-label": "Dismiss",
             className: "shrink-0 rounded p-0.5 text-sky-500 hover:bg-sky-100 hover:text-sky-800 dark:hover:bg-sky-500/20",
-            children: /* @__PURE__ */ o(I, { className: "h-3 w-3" })
+            children: /* @__PURE__ */ s(X, { className: "h-3 w-3" })
           }
         )
       ]
     }
   );
 }
-function ae({ reason: e, onHover: n }) {
-  return /* @__PURE__ */ o(
+function Ee({ reason: t, onHover: n }) {
+  return /* @__PURE__ */ s(
     "span",
     {
       onPointerEnter: n,
       className: "inline-flex cursor-help items-center gap-1 text-amber-500 dark:text-amber-400",
-      "data-tip": e,
+      "data-tip": t,
       "data-lock-reason": !0,
-      "aria-label": e,
+      "aria-label": t,
       role: "img",
-      children: /* @__PURE__ */ o(H, { className: "h-3 w-3" })
+      children: /* @__PURE__ */ s(oe, { className: "h-3 w-3" })
     }
   );
 }
-function W(e, n) {
-  if (!e || !(n != null && n.contains(e))) return null;
-  const t = e.closest(
+function P(t, n) {
+  var a, c, d;
+  const e = t;
+  return ((c = (a = e == null ? void 0 : e.response) == null ? void 0 : a.data) == null ? void 0 : c.error) ?? ((d = e == null ? void 0 : e.data) == null ? void 0 : d.error) ?? (e == null ? void 0 : e.error) ?? (e == null ? void 0 : e.message) ?? n;
+}
+function fe(t, n) {
+  if (!t || !(n != null && n.contains(t))) return null;
+  const e = t.closest(
     "input, textarea, select"
   );
-  if (t && n.contains(t) && !(t instanceof HTMLInputElement && t.type === "checkbox"))
-    return t.value;
-  const s = e.closest("td, th");
-  return s && n.contains(s) ? s.innerText.replace(/\s+/g, " ").trim() : null;
+  if (e && n.contains(e) && !(e instanceof HTMLInputElement && e.type === "checkbox"))
+    return e.value;
+  const a = t.closest("td, th");
+  return a && n.contains(a) ? a.innerText.replace(/\s+/g, " ").trim() : null;
 }
-function se({
-  wrapperRef: e,
+function Te({
+  wrapperRef: t,
   field: n,
-  value: t,
-  relations: s,
-  collection: m,
-  itemId: c,
-  openRelated: l
+  value: e,
+  relations: a,
+  collection: c,
+  itemId: d,
+  openRelated: g,
+  editable: D = !1
 }) {
-  var M, D;
-  const [y, w] = C(null), h = g((a, u) => w({ x: a, y: u }), []), b = g(() => w(null), []), r = v(null), f = g(
-    (a) => {
-      var L;
-      const u = a.target;
-      (L = window.getSelection()) != null && L.toString() && u.closest("input, textarea, [contenteditable]") || (a.preventDefault(), r.current = u, h(a.clientX, a.clientY));
+  var B, H;
+  const [p, S] = M(null), l = ue(), [k, E] = M(!1), [f, O] = M(null), [U, A] = M(!1), v = F((r, u) => S({ x: r, y: u }), []), w = j(null), T = F(() => {
+    S(null), E(!1), O(null), A(!1);
+    const r = w.current;
+    w.current = null, r && window.setTimeout(() => {
+      r.isConnected && (!document.activeElement || document.activeElement === document.body) && r.focus();
+    }, 0);
+  }, []), o = p !== null, b = F(
+    (r) => {
+      if (o) {
+        T();
+        return;
+      }
+      const u = r.getBoundingClientRect();
+      N.current = null, w.current = r, v(u.left, u.bottom + 4);
     },
-    [h]
-  ), N = g(
-    (a) => {
+    [o, T, v]
+  ), N = j(null), m = F(
+    (r) => {
+      var K;
+      const u = r.target;
+      (K = window.getSelection()) != null && K.toString() && u.closest("input, textarea, [contenteditable]") || (r.preventDefault(), N.current = u, v(r.clientX, r.clientY));
+    },
+    [v]
+  ), x = F(
+    (r) => {
       var u;
-      if (a.key === "ContextMenu" || a.shiftKey && a.key === "F10") {
-        a.preventDefault();
-        const p = (u = e.current) == null ? void 0 : u.getBoundingClientRect();
-        r.current = document.activeElement, h(p ? p.left + 16 : 16, p ? p.top + 28 : 16);
+      if (r.key === "ContextMenu" || r.shiftKey && r.key === "F10") {
+        r.preventDefault();
+        const L = (u = t.current) == null ? void 0 : u.getBoundingClientRect();
+        N.current = document.activeElement, v(L ? L.left + 16 : 16, L ? L.top + 28 : 16);
       }
     },
-    [h, e]
-  ), i = s.find(
-    (a) => a.many_collection === m && a.many_field === n.field && a.one_collection
-  ), d = c && c !== "new", S = (a) => {
-    var p;
-    const u = (p = e.current) == null ? void 0 : p.querySelector(a);
+    [v, t]
+  ), i = a.find(
+    (r) => r.many_collection === c && r.many_field === n.field && r.one_collection
+  ), C = d && d !== "new", R = (r) => {
+    var L;
+    const u = (L = t.current) == null ? void 0 : L.querySelector(r);
     return u ? (u.click(), !0) : !1;
-  }, _ = [
+  }, $ = [
     {
       key: "copy",
       label: "Copy value",
-      icon: /* @__PURE__ */ o(F, { className: "h-3.5 w-3.5" }),
+      icon: /* @__PURE__ */ s(Y, { className: "h-3.5 w-3.5" }),
       run: () => {
-        const u = W(r.current, e.current) ?? (t == null ? "" : typeof t == "object" ? JSON.stringify(t) : String(t));
+        const u = fe(N.current, t.current) ?? (e == null ? "" : typeof e == "object" ? JSON.stringify(e) : String(e));
         if (!u) {
-          k.info("Nothing to copy");
+          h.info("Nothing to copy");
           return;
         }
         navigator.clipboard.writeText(u).then(
-          () => k.success("Value copied"),
-          () => k.error("Could not copy")
+          () => h.success("Value copied"),
+          () => h.error("Could not copy")
         );
       }
     },
     {
       key: "copy-key",
       label: "Copy field key",
-      icon: /* @__PURE__ */ o(F, { className: "h-3.5 w-3.5" }),
+      icon: /* @__PURE__ */ s(Y, { className: "h-3.5 w-3.5" }),
       hint: n.field,
       run: () => {
         navigator.clipboard.writeText(n.field).then(
-          () => k.success(`Copied “${n.field}”`),
-          () => k.error("Could not copy")
+          () => h.success(`Copied “${n.field}”`),
+          () => h.error("Could not copy")
         );
       }
     },
     {
       key: "history",
       label: "Value history",
-      icon: /* @__PURE__ */ o(O, { className: "h-3.5 w-3.5" }),
-      disabled: !d,
+      icon: /* @__PURE__ */ s(Q, { className: "h-3.5 w-3.5" }),
+      disabled: !C,
       run: () => {
-        S("[data-field-history]") || k.info("No history for this field yet");
+        R("[data-field-history]") || h.info("No history for this field yet");
       }
     },
     {
       key: "watch",
       label: "Watch this field",
-      icon: /* @__PURE__ */ o(K, { className: "h-3.5 w-3.5" }),
-      disabled: !d,
+      icon: /* @__PURE__ */ s(Z, { className: "h-3.5 w-3.5" }),
+      disabled: !C,
       run: () => {
-        S("[data-field-watch]") || k.info("Field watching is off — an admin can enable it in Settings → Content");
+        R("[data-field-watch]") || h.info("Field watching is off — an admin can enable it in Settings → Content");
       }
     },
     {
       key: "explain",
       label: "Explain value",
-      icon: /* @__PURE__ */ o(P, { className: "h-3.5 w-3.5" }),
-      disabled: !d || !((M = e.current) != null && M.querySelector("[data-field-lineage]")),
+      icon: /* @__PURE__ */ s(ee, { className: "h-3.5 w-3.5" }),
+      disabled: !C || !((B = t.current) != null && B.querySelector("[data-field-lineage]")),
       run: () => {
-        S("[data-field-lineage]");
+        R("[data-field-lineage]");
       }
     },
-    ...i && l ? [
+    ...i && g ? [
       {
         key: "open",
-        label: `Open related ${(D = i.one_collection) == null ? void 0 : D.replace(/_/g, " ")}`,
-        icon: /* @__PURE__ */ o(B, { className: "h-3.5 w-3.5" }),
-        disabled: t == null || t === "",
+        label: `Open related ${(H = i.one_collection) == null ? void 0 : H.replace(/_/g, " ")}`,
+        icon: /* @__PURE__ */ s(te, { className: "h-3.5 w-3.5" }),
+        disabled: e == null || e === "",
+        run: () => {
+          const r = typeof e == "object" && e && "id" in e ? String(e.id) : String(e);
+          g(String(i.one_collection), r);
+        }
+      }
+    ] : [],
+    ...l != null && l.allowed(n.field) && D && l.hasValue(n.field) ? [
+      {
+        key: "save-default",
+        label: "Save as my default",
+        icon: /* @__PURE__ */ s(ne, { className: "h-3.5 w-3.5" }),
+        stay: !0,
         run: () => {
-          const a = typeof t == "object" && t && "id" in t ? String(t.id) : String(t);
-          l(String(i.one_collection), a);
+          O(null), E(!0), l.describeSave(n.field).then(
+            (r) => O(r),
+            () => O([])
+          );
+        }
+      }
+    ] : [],
+    ...l != null && l.allowed(n.field) && l.defaultFor(n.field) ? [
+      {
+        key: "clear-default",
+        label: "Clear my default",
+        icon: /* @__PURE__ */ s(re, { className: "h-3.5 w-3.5" }),
+        // Runs at once (a menu pick is deliberate); the toast's Undo saves it back.
+        run: () => {
+          l.clear(n.field).then(
+            (r) => h.success(
+              "Your default was cleared",
+              r ? {
+                action: {
+                  label: "Undo",
+                  onClick: () => {
+                    l.restore(r).then(
+                      () => h.success("Your default is back"),
+                      (u) => h.error(P(u, "Could not put your default back"))
+                    );
+                  }
+                }
+              } : void 0
+            ),
+            (r) => h.error(P(r, "Could not clear your default"))
+          );
         }
       }
     ] : []
-  ];
-  return { onContextMenu: f, onKeyDown: N, menu: y ? /* @__PURE__ */ o(X, { at: y, items: _, onClose: b }) : null };
+  ], G = k && l ? {
+    text: f != null && f.length ? `Save ${f.join(" · ")} as your ${f.length > 1 ? "defaults" : "default"}?` : "Save as your default?",
+    ready: f !== null && !U,
+    saving: U,
+    onCancel: T,
+    onSave: () => {
+      A(!0), l.save(n.field).then(
+        () => {
+          h.success(
+            f != null && f.length ? `Saved ${f.join(" · ")} as your default${f.length > 1 ? "s" : ""}` : "Your default was saved"
+          ), T();
+        },
+        (r) => {
+          h.error(P(r, "Could not save your default")), T();
+        }
+      );
+    }
+  } : null, J = p ? /* @__PURE__ */ s(
+    be,
+    {
+      at: p,
+      items: $,
+      onClose: T,
+      confirm: G,
+      anchor: t.current
+    }
+  ) : null, W = $.some((r) => r.key === "save-default" || r.key === "clear-default");
+  return { onContextMenu: m, onKeyDown: x, menu: J, openFrom: b, isOpen: o, hasFieldItems: W };
 }
-function X({
-  at: e,
+function be({
+  at: t,
   items: n,
-  onClose: t
+  onClose: e,
+  confirm: a,
+  anchor: c
 }) {
-  const s = v(null), [m, c] = C(0), l = n.filter((r) => !r.disabled);
-  E(() => {
+  const d = j(null), [g, D] = M(0), p = n.filter((o) => !o.disabled);
+  _(() => {
     var N;
-    const r = (i) => {
-      var d;
-      (d = s.current) != null && d.contains(i.target) || t();
-    }, f = (i) => {
-      if (i.key === "Escape")
-        i.preventDefault(), t();
-      else if (i.key === "ArrowDown")
-        i.preventDefault(), c((d) => (d + 1) % Math.max(1, l.length));
-      else if (i.key === "ArrowUp")
-        i.preventDefault(), c((d) => (d - 1 + Math.max(1, l.length)) % Math.max(1, l.length));
-      else if (i.key === "Enter" || i.key === " ") {
-        i.preventDefault();
-        const d = l[m];
-        d && (d.run(), t());
+    const o = (m) => {
+      var i, C;
+      const x = m.target;
+      (i = d.current) != null && i.contains(x) || (C = x == null ? void 0 : x.closest) != null && C.call(x, "[data-field-menu-trigger]") && (c != null && c.contains(x)) || e();
+    }, b = (m) => {
+      var x;
+      if (m.key === "Escape")
+        m.preventDefault(), e();
+      else if (a) {
+        if (m.key === "Tab") {
+          m.preventDefault();
+          const i = [l.current, S.current].filter(
+            ($) => !!$ && !$.disabled
+          );
+          if (i.length === 0) return;
+          const C = i.indexOf(document.activeElement), R = m.shiftKey ? C - 1 : C + 1;
+          (x = i[(R % i.length + i.length) % i.length]) == null || x.focus();
+        }
+        return;
+      } else if (m.key === "ArrowDown")
+        m.preventDefault(), D((i) => (i + 1) % Math.max(1, p.length));
+      else if (m.key === "ArrowUp")
+        m.preventDefault(), D((i) => (i - 1 + Math.max(1, p.length)) % Math.max(1, p.length));
+      else if (m.key === "Enter" || m.key === " ") {
+        m.preventDefault();
+        const i = p[g];
+        i && (i.run(), i.stay || e());
       }
     };
-    return window.addEventListener("mousedown", r, !0), window.addEventListener("keydown", f, !0), (N = s.current) == null || N.focus(), () => {
-      window.removeEventListener("mousedown", r, !0), window.removeEventListener("keydown", f, !0);
+    return window.addEventListener("mousedown", o, !0), window.addEventListener("keydown", b, !0), (N = d.current) == null || N.focus(), () => {
+      window.removeEventListener("mousedown", o, !0), window.removeEventListener("keydown", b, !0);
+    };
+  }, [e, p, g, a, c]);
+  const S = j(null), l = j(null), k = !!a, E = !!(a != null && a.ready);
+  _(() => {
+    var o;
+    k && ((o = l.current) == null || o.focus());
+  }, [k]), _(() => {
+    var b;
+    if (!E) return;
+    const o = document.activeElement;
+    (o === l.current || o === d.current || o === document.body) && ((b = S.current) == null || b.focus());
+  }, [E]);
+  const f = 240, [O, U] = M(() => a ? 96 : n.length * 30 + 12);
+  le(() => {
+    var b;
+    const o = (b = d.current) == null ? void 0 : b.offsetHeight;
+    o && o !== O && U(o);
+  });
+  const A = Math.max(8, Math.min(t.x, window.innerWidth - f - 8)), v = Math.max(8, Math.min(t.y, window.innerHeight - O - 8)), w = (c == null ? void 0 : c.closest('[role="dialog"]')) ?? document.body, T = w === document.body ? { position: "fixed", left: A, top: v } : (() => {
+    const o = w.getBoundingClientRect();
+    return {
+      position: "absolute",
+      left: A - o.left + w.scrollLeft - w.clientLeft,
+      top: v - o.top + w.scrollTop - w.clientTop
     };
-  }, [t, l, m]);
-  const y = 240, w = n.length * 30 + 12, h = Math.min(e.x, window.innerWidth - y - 8), b = Math.min(e.y, window.innerHeight - w - 8);
-  return J(
-    /* @__PURE__ */ o(
+  })();
+  return ie(
+    /* @__PURE__ */ y(
       "div",
       {
-        ref: s,
-        role: "menu",
+        ref: d,
+        ...a ? { role: "dialog", "aria-modal": !1, "aria-label": "Save as my default" } : { role: "menu", "aria-label": "Field options" },
         tabIndex: -1,
         "data-field-context-menu": !0,
-        style: { position: "fixed", left: h, top: b, width: y, zIndex: 110 },
+        style: { ...T, width: f, zIndex: 110 },
         className: "rounded-lg border border-slate-200 bg-white p-1 shadow-xl outline-none dark:border-border dark:bg-card",
-        children: n.map((r) => {
-          const f = l.indexOf(r), N = f === m && !r.disabled;
-          return /* @__PURE__ */ x(
-            "button",
-            {
-              type: "button",
-              role: "menuitem",
-              disabled: r.disabled,
-              onMouseEnter: () => f >= 0 && c(f),
-              onClick: () => {
-                r.run(), t();
-              },
-              className: A(
-                "flex h-[30px] w-full items-center gap-2 rounded-sm px-2 text-left text-[12.5px] font-medium text-slate-700 dark:text-slate-200",
-                N && "bg-accent text-accent-foreground",
-                r.disabled && "cursor-not-allowed opacity-40"
+        children: [
+          a ? /* @__PURE__ */ y("div", { "data-personal-default-confirm": !0, className: "space-y-2 px-2 py-1.5", children: [
+            /* @__PURE__ */ s(
+              "p",
+              {
+                "aria-live": "polite",
+                className: "text-[12.5px] leading-snug text-slate-700 dark:text-slate-200",
+                children: a.text
+              }
+            ),
+            /* @__PURE__ */ y("div", { className: "flex justify-end gap-1.5", children: [
+              /* @__PURE__ */ y(
+                "button",
+                {
+                  ref: l,
+                  type: "button",
+                  onClick: a.onCancel,
+                  className: de,
+                  children: [
+                    /* @__PURE__ */ s(X, { className: "h-3 w-3", "aria-hidden": !0 }),
+                    " Cancel"
+                  ]
+                }
               ),
-              children: [
-                /* @__PURE__ */ o("span", { className: "shrink-0 text-slate-500", children: r.icon }),
-                /* @__PURE__ */ o("span", { className: "min-w-0 flex-1 truncate", children: r.label }),
-                r.hint && /* @__PURE__ */ o("span", { className: "max-w-[90px] truncate font-mono text-[10.5px] text-slate-400", children: r.hint })
-              ]
-            },
-            r.key
-          );
-        })
+              /* @__PURE__ */ s(
+                "button",
+                {
+                  ref: S,
+                  type: "button",
+                  disabled: !a.ready,
+                  onClick: a.onSave,
+                  className: "h-7 rounded-md bg-nvr-cyan px-2.5 text-[11.5px] font-semibold text-white hover:bg-nvr-cyan/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-nvr-cyan/40 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50",
+                  children: a.saving ? "Saving…" : "Save"
+                }
+              )
+            ] })
+          ] }) : null,
+          a ? null : n.map((o) => {
+            const b = p.indexOf(o), N = b === g && !o.disabled;
+            return /* @__PURE__ */ y(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                disabled: o.disabled,
+                onMouseEnter: () => b >= 0 && D(b),
+                onClick: () => {
+                  o.run(), o.stay || e();
+                },
+                className: q(
+                  "flex h-[30px] w-full items-center gap-2 rounded-sm px-2 text-left text-[12.5px] font-medium text-slate-700 dark:text-slate-200",
+                  N && "bg-accent text-accent-foreground",
+                  o.disabled && "cursor-not-allowed opacity-40"
+                ),
+                children: [
+                  /* @__PURE__ */ s("span", { className: "shrink-0 text-slate-500", children: o.icon }),
+                  /* @__PURE__ */ s("span", { className: "min-w-0 flex-1 truncate", children: o.label }),
+                  o.hint && /* @__PURE__ */ s("span", { className: "max-w-[90px] truncate font-mono text-[10.5px] text-slate-400", children: o.hint })
+                ]
+              },
+              o.key
+            );
+          })
+        ]
       }
     ),
-    document.body
+    w
   );
 }
-function ie(e) {
-  const [n, t] = C(null), [s, m] = C(!1), c = v(!1), l = v(null);
-  E(() => {
-    const b = e.current;
-    if (!b) return;
-    const r = () => t(b.getAttribute("data-remote-editor"));
-    r();
-    const f = new MutationObserver(r);
-    return f.observe(b, { attributes: !0, attributeFilter: ["data-remote-editor"] }), () => f.disconnect();
-  }, [e]), E(() => {
-    n || (m(!1), c.current = !1);
+function Le(t) {
+  const [n, e] = M(null), [a, c] = M(!1), d = j(!1), g = j(null);
+  _(() => {
+    const l = t.current;
+    if (!l) return;
+    const k = () => e(l.getAttribute("data-remote-editor"));
+    k();
+    const E = new MutationObserver(k);
+    return E.observe(l, { attributes: !0, attributeFilter: ["data-remote-editor"] }), () => E.disconnect();
+  }, [t]), _(() => {
+    n || (c(!1), d.current = !1);
   }, [n]);
-  const y = g(
-    (b) => {
-      if (!n || c.current) return;
-      const r = b.target;
-      r.matches('input, textarea, select, [contenteditable="true"], [role="combobox"]') && (l.current = r, setTimeout(() => {
-        c.current || r.blur();
-      }, 0), m(!0));
+  const D = F(
+    (l) => {
+      if (!n || d.current) return;
+      const k = l.target;
+      k.matches('input, textarea, select, [contenteditable="true"], [role="combobox"]') && (g.current = k, setTimeout(() => {
+        d.current || k.blur();
+      }, 0), c(!0));
     },
     [n]
-  ), w = g(() => {
-    c.current = !0, m(!1);
-    const b = l.current;
-    l.current = null, b && setTimeout(() => b.focus(), 0);
-  }, []), h = g(() => {
-    m(!1), l.current = null;
+  ), p = F(() => {
+    d.current = !0, c(!1);
+    const l = g.current;
+    g.current = null, l && setTimeout(() => l.focus(), 0);
+  }, []), S = F(() => {
+    c(!1), g.current = null;
   }, []);
-  return { editor: n, confirming: s, onFocusCapture: y, confirm: w, cancel: h };
+  return { editor: n, confirming: a, onFocusCapture: D, confirm: p, cancel: S };
 }
-function le({
-  editor: e,
+function Fe({
+  editor: t,
   confirming: n,
-  onConfirm: t,
-  onCancel: s
+  onConfirm: e,
+  onCancel: a
 }) {
-  const m = e.split(/\s+/).map((c) => c[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
-  return /* @__PURE__ */ x(
+  const c = t.split(/\s+/).map((d) => d[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+  return /* @__PURE__ */ y(
     "div",
     {
       "data-presence-soft-lock": !0,
-      className: A(
+      className: q(
         "flex flex-wrap items-center gap-2 rounded-md px-2 py-1 text-[11.5px]",
         n ? "border border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-500/40 dark:bg-amber-500/10 dark:text-amber-100" : "text-amber-700 dark:text-amber-300"
       ),
       children: [
-        /* @__PURE__ */ o("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-amber-200 text-[9px] font-semibold text-amber-900 dark:bg-amber-500/40 dark:text-amber-50", children: m || "?" }),
-        /* @__PURE__ */ o("span", { className: "min-w-0 flex-1", children: n ? `${e} is typing here — edit anyway?` : `${e} is editing this field` }),
-        n && /* @__PURE__ */ x($, { children: [
-          /* @__PURE__ */ o(
+        /* @__PURE__ */ s("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-amber-200 text-[9px] font-semibold text-amber-900 dark:bg-amber-500/40 dark:text-amber-50", children: c || "?" }),
+        /* @__PURE__ */ s("span", { className: "min-w-0 flex-1", children: n ? `${t} is typing here — edit anyway?` : `${t} is editing this field` }),
+        n && /* @__PURE__ */ y(z, { children: [
+          /* @__PURE__ */ s(
             "button",
             {
               type: "button",
-              onClick: t,
+              onClick: e,
               className: "rounded-md bg-amber-600 px-2 py-0.5 text-[11px] font-semibold text-white hover:bg-amber-700",
               children: "Edit anyway"
             }
           ),
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ s(
             "button",
             {
               type: "button",
-              onClick: s,
+              onClick: a,
               className: "rounded-md border border-amber-300 px-2 py-0.5 text-[11px] font-medium hover:bg-amber-100 dark:border-amber-500/40 dark:hover:bg-amber-500/15",
               children: "Leave it"
             }
@@ -369,12 +536,12 @@ function le({
   );
 }
 export {
-  V as FieldAffordancesContext,
-  ae as LockReasonBadge,
-  le as PresenceSoftLockStrip,
-  oe as RemoteChangeGhost,
-  j as ghostText,
-  re as useFieldAffordances,
-  se as useFieldContextMenu,
-  ie as usePresenceSoftLock
+  me as FieldAffordancesContext,
+  Ee as LockReasonBadge,
+  Fe as PresenceSoftLockStrip,
+  Se as RemoteChangeGhost,
+  V as ghostText,
+  Ce as useFieldAffordances,
+  Te as useFieldContextMenu,
+  Le as usePresenceSoftLock
 };