@nivaro/react 0.3.33 → 0.3.35

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

@@ -1,63 +1,67 @@
-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 h, Fragment as fe } from "react/jsx-runtime";
+import { Copy as Q, History as me, Eye as be, Sigma as pe, ExternalLink as xe, UserRound as ye, UserRoundPen as he, UserRoundX as ge, Lock as ke, X as ne } from "lucide-react";
+import { useContext as we, createContext as ve, useState as C, useCallback as N, useRef as M, useEffect as B, useLayoutEffect as Ne } from "react";
+import { createPortal as Ce } from "react-dom";
+import { toast as v } from "sonner";
+import { htmlToText as Se } from "../../lib/sanitize-html.js";
+import { cn as re, formatRelative as Z } from "../../lib/utils.js";
+import { useOverflowTip as Ee } from "../TipLayer.js";
+import { clearPersonalDefault as Te, usePersonalDefaultCss as Ue, refusalText as ee } from "./PersonalDefaultControl.js";
+import { PERSONAL_DEFAULT_GHOST_BUTTON as Le } from "./PersonalDefaultPill.js";
+import { usePersonalDefaultsApi as Fe } from "./usePersonalDefaults.js";
+const Me = ve(null), Ve = () => we(Me), te = (n) => {
+  if (n == null || n === "") return "empty";
+  if (typeof n == "boolean") return n ? "Yes" : "No";
+  if (typeof n == "object")
     try {
-      const s = JSON.stringify(e);
-      return s.length > 80 ? `${s.slice(0, 80)}…` : s;
+      const l = JSON.stringify(n);
+      return l.length > 80 ? `${l.slice(0, 80)}…` : l;
     } catch {
-      return String(e);
+      return String(n);
     }
-  const n = String(e), t = /[<&]/.test(n) ? R(n).trim() : n;
-  return t.length > 80 ? `${t.slice(0, 80)}…` : t;
+  const t = String(n), o = /[<&]/.test(t) ? Se(t).trim() : t;
+  return o.length > 80 ? `${o.slice(0, 80)}…` : o;
 };
-function oe({
-  change: e,
-  onDismiss: n,
-  onTakeTheirs: t
+function Xe({
+  change: n,
+  onDismiss: t,
+  onTakeTheirs: o
 }) {
-  return e.conflict && t ? /* @__PURE__ */ x(
+  return n.conflict && o ? /* @__PURE__ */ h(
     "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__ */ h("span", { className: "min-w-0 flex-1", children: [
+          n.by ?? "Someone",
           " changed this to",
           " ",
-          /* @__PURE__ */ o("span", { className: "font-medium", children: j(e.theirs) }),
+          /* @__PURE__ */ s("span", { className: "font-medium", children: te(n.theirs) }),
           " while you were editing",
-          /* @__PURE__ */ x("span", { className: "text-amber-700/80 dark:text-amber-200/70", children: [
+          /* @__PURE__ */ h("span", { className: "text-amber-700/80 dark:text-amber-200/70", children: [
             " ",
             "· ",
-            T(e.at)
+            Z(n.at)
           ] })
         ] }),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ s(
           "button",
           {
             type: "button",
-            onClick: t,
+            onClick: o,
             "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",
-            onClick: n,
+            onClick: t,
             "data-remote-keep-mine": !0,
             className: "shrink-0 rounded px-1.5 py-0.5 text-[10.5px] font-medium text-amber-800 hover:bg-amber-100 dark:text-amber-200 dark:hover:bg-amber-500/20",
             children: "Keep mine"
@@ -65,300 +69,507 @@ function oe({
         )
       ]
     }
-  ) : /* @__PURE__ */ x(
+  ) : /* @__PURE__ */ h(
     "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__ */ h("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: te(n.was) }),
+          /* @__PURE__ */ h("span", { className: "text-sky-700/80 dark:text-sky-300/80", children: [
             " ",
             "· ",
-            e.by ?? "someone",
+            n.by ?? "someone",
             ", ",
-            T(e.at)
+            Z(n.at)
           ] })
         ] }),
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ s(
           "button",
           {
             type: "button",
-            onClick: n,
+            onClick: t,
             "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(ne, { className: "h-3 w-3" })
           }
         )
       ]
     }
   );
 }
-function ae({ reason: e, onHover: n }) {
-  return /* @__PURE__ */ o(
+function Ye({ reason: n, onHover: t }) {
+  return /* @__PURE__ */ s(
     "span",
     {
-      onPointerEnter: n,
+      onPointerEnter: t,
       className: "inline-flex cursor-help items-center gap-1 text-amber-500 dark:text-amber-400",
-      "data-tip": e,
+      "data-tip": n,
       "data-lock-reason": !0,
-      "aria-label": e,
+      "aria-label": n,
       role: "img",
-      children: /* @__PURE__ */ o(H, { className: "h-3 w-3" })
+      children: /* @__PURE__ */ s(ke, { className: "h-3 w-3" })
     }
   );
 }
-function W(e, n) {
-  if (!e || !(n != null && n.contains(e))) return null;
-  const t = e.closest(
+function Re(n, t) {
+  if (!n || !(t != null && t.contains(n))) return null;
+  const o = n.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 (o && t.contains(o) && !(o instanceof HTMLInputElement && o.type === "checkbox"))
+    return o.value;
+  const l = n.closest("td, th");
+  return l && t.contains(l) ? l.innerText.replace(/\s+/g, " ").trim() : null;
 }
-function se({
-  wrapperRef: e,
-  field: n,
-  value: t,
-  relations: s,
+function qe({
+  wrapperRef: n,
+  field: t,
+  value: o,
+  relations: l,
   collection: m,
-  itemId: c,
-  openRelated: l
+  itemId: x,
+  openRelated: w,
+  editable: R = !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));
-    },
-    [h]
-  ), N = g(
-    (a) => {
+  var J, z;
+  const [g, T] = C(null), r = Fe(), [k, S] = C(!1), [y, O] = C(null), [U, A] = C(null), [$, j] = C(!1), b = N((e, c) => T({ x: e, y: c }), []), [D, a] = C(null), f = M(null), L = M(null), i = N(() => {
+    T(null), a(null), S(!1), O(null), A(null), j(!1);
+    const e = f.current, c = L.current;
+    f.current = null, L.current = null, (e || c) && window.setTimeout(() => {
       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);
+      document.activeElement && document.activeElement !== document.body || (e != null && e.isConnected ? e.focus() : (u = c == null ? void 0 : c()) == null || u.focus());
+    }, 0);
+  }, []), p = g !== null, d = N(
+    (e) => {
+      if (p) {
+        i();
+        return;
+      }
+      const c = e.getBoundingClientRect();
+      _.current = null, f.current = e, a("menu"), b(c.left, c.bottom + 4);
+    },
+    [p, i, b]
+  ), E = N(() => {
+    r && (O(null), S("save"), r.describeSave(t.field).then(
+      (e) => O(e),
+      () => O([])
+    ));
+  }, [r, t.field]), P = N(() => {
+    r && (A(null), S("update"), r.describeUpdate(t.field).then(
+      (e) => A(e),
+      () => A({ value: "", context: [] })
+    ));
+  }, [r, t.field]), H = N(
+    (e, c, u = "make") => {
+      if (p && D === u) {
+        i();
+        return;
+      }
+      const F = e.getBoundingClientRect();
+      _.current = null, f.current = e, L.current = c ?? null, a(u), u === "update" ? P() : E(), b(F.right - ae, F.bottom + 4);
+    },
+    [p, D, i, b, E, P]
+  ), _ = M(null), oe = N(
+    (e) => {
+      var F;
+      const c = e.target;
+      (F = window.getSelection()) != null && F.toString() && c.closest("input, textarea, [contenteditable]") || (e.preventDefault(), _.current = c, a("menu"), b(e.clientX, e.clientY));
+    },
+    [b]
+  ), le = N(
+    (e) => {
+      var c;
+      if (e.key === "ContextMenu" || e.shiftKey && e.key === "F10") {
+        e.preventDefault();
+        const u = (c = n.current) == null ? void 0 : c.getBoundingClientRect();
+        _.current = document.activeElement, a("menu"), b(u ? u.left + 16 : 16, u ? u.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);
-    return u ? (u.click(), !0) : !1;
-  }, _ = [
+    [b, n]
+  ), I = l.find(
+    (e) => e.many_collection === m && e.many_field === t.field && e.one_collection
+  ), K = x && x !== "new", W = (e) => {
+    var u;
+    const c = (u = n.current) == null ? void 0 : u.querySelector(e);
+    return c ? (c.click(), !0) : !1;
+  }, V = !!(r != null && r.allowed(t.field)), X = V && R && !!(r != null && r.hasValue(t.field)), G = V ? (r == null ? void 0 : r.defaultFor(t.field)) ?? null : null, se = X && !G, ie = X && !!G && !(r != null && r.isDefault(t.field)), Y = [
     {
       key: "copy",
       label: "Copy value",
-      icon: /* @__PURE__ */ o(F, { className: "h-3.5 w-3.5" }),
+      icon: /* @__PURE__ */ s(Q, { 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));
-        if (!u) {
-          k.info("Nothing to copy");
+        const c = Re(_.current, n.current) ?? (o == null ? "" : typeof o == "object" ? JSON.stringify(o) : String(o));
+        if (!c) {
+          v.info("Nothing to copy");
           return;
         }
-        navigator.clipboard.writeText(u).then(
-          () => k.success("Value copied"),
-          () => k.error("Could not copy")
+        navigator.clipboard.writeText(c).then(
+          () => v.success("Value copied"),
+          () => v.error("Could not copy")
         );
       }
     },
     {
       key: "copy-key",
       label: "Copy field key",
-      icon: /* @__PURE__ */ o(F, { className: "h-3.5 w-3.5" }),
-      hint: n.field,
+      icon: /* @__PURE__ */ s(Q, { className: "h-3.5 w-3.5" }),
+      hint: t.field,
       run: () => {
-        navigator.clipboard.writeText(n.field).then(
-          () => k.success(`Copied “${n.field}”`),
-          () => k.error("Could not copy")
+        navigator.clipboard.writeText(t.field).then(
+          () => v.success(`Copied “${t.field}”`),
+          () => v.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(me, { className: "h-3.5 w-3.5" }),
+      disabled: !K,
       run: () => {
-        S("[data-field-history]") || k.info("No history for this field yet");
+        W("[data-field-history]") || v.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(be, { className: "h-3.5 w-3.5" }),
+      disabled: !K,
       run: () => {
-        S("[data-field-watch]") || k.info("Field watching is off — an admin can enable it in Settings → Content");
+        W("[data-field-watch]") || v.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(pe, { className: "h-3.5 w-3.5" }),
+      disabled: !K || !((J = n.current) != null && J.querySelector("[data-field-lineage]")),
       run: () => {
-        S("[data-field-lineage]");
+        W("[data-field-lineage]");
       }
     },
-    ...i && l ? [
+    ...I && w ? [
       {
         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 ${(z = I.one_collection) == null ? void 0 : z.replace(/_/g, " ")}`,
+        icon: /* @__PURE__ */ s(xe, { className: "h-3.5 w-3.5" }),
+        disabled: o == null || o === "",
+        run: () => {
+          const e = typeof o == "object" && o && "id" in o ? String(o.id) : String(o);
+          w(String(I.one_collection), e);
+        }
+      }
+    ] : [],
+    // Same states as the visible control: no default here → Save; a default holding another
+    // value → Update (that default, in place); the value IS the default → only Clear.
+    ...se ? [
+      {
+        key: "save-default",
+        label: "Save as my default",
+        icon: /* @__PURE__ */ s(ye, { className: "h-3.5 w-3.5" }),
+        stay: !0,
+        run: E
+      }
+    ] : [],
+    ...ie ? [
+      {
+        key: "update-default",
+        label: "Update my default",
+        icon: /* @__PURE__ */ s(he, { className: "h-3.5 w-3.5" }),
+        stay: !0,
+        run: P
+      }
+    ] : [],
+    ...G && r ? [
+      {
+        key: "clear-default",
+        label: "Clear my default",
+        icon: /* @__PURE__ */ s(ge, { className: "h-3.5 w-3.5" }),
+        // Runs at once (a menu pick is deliberate); the toast's Undo saves it back.
         run: () => {
-          const a = typeof t == "object" && t && "id" in t ? String(t.id) : String(t);
-          l(String(i.one_collection), a);
+          Te(r, t.field);
         }
       }
     ] : []
-  ];
-  return { onContextMenu: f, onKeyDown: N, menu: y ? /* @__PURE__ */ o(X, { at: y, items: _, onClose: b }) : null };
+  ], q = (e, c) => {
+    const u = e.value ? ` to ${e.value}` : "", F = e.context.length ? ` for ${e.context.join(" · ")}` : "";
+    return c ? `Updated your default${F}${u}` : `Update your default${F}${u}?`;
+  }, ce = k === "update" && r ? {
+    label: "Update my default",
+    action: "Update",
+    text: U ? q(U, !1) : "Update your default?",
+    ready: U !== null && !$,
+    saving: $,
+    onCancel: i,
+    onSave: () => {
+      j(!0), r.update(t.field).then(
+        () => {
+          v.success(U ? q(U, !0) : "Updated your default"), i();
+        },
+        (e) => {
+          v.error(ee(e, "Could not update your default")), i();
+        }
+      );
+    }
+  } : k && r ? {
+    label: "Save as my default",
+    action: "Save",
+    text: y != null && y.length ? `Save ${y.join(" · ")} as your ${y.length > 1 ? "defaults" : "default"}?` : "Save as your default?",
+    ready: y !== null && !$,
+    saving: $,
+    onCancel: i,
+    onSave: () => {
+      j(!0), r.save(t.field).then(
+        () => {
+          v.success(
+            y != null && y.length ? `Saved ${y.join(" · ")} as your default${y.length > 1 ? "s" : ""}` : "Your default was saved"
+          ), i();
+        },
+        (e) => {
+          v.error(ee(e, "Could not save your default")), i();
+        }
+      );
+    }
+  } : null, de = g ? /* @__PURE__ */ s(
+    Oe,
+    {
+      at: g,
+      items: Y,
+      onClose: i,
+      confirm: ce,
+      anchor: n.current
+    }
+  ) : null, ue = Y.some(
+    (e) => e.key === "save-default" || e.key === "update-default" || e.key === "clear-default"
+  );
+  return {
+    onContextMenu: oe,
+    onKeyDown: le,
+    menu: de,
+    openFrom: d,
+    isOpen: p,
+    hasFieldItems: ue,
+    confirmSaveFrom: H,
+    openedBy: D
+  };
 }
-function X({
-  at: e,
-  items: n,
-  onClose: t
+const ae = 240, $e = "[data-field-menu-trigger], [data-personal-default-make], [data-personal-default-update]";
+function Oe({
+  at: n,
+  items: t,
+  onClose: o,
+  confirm: l,
+  anchor: m
 }) {
-  const s = v(null), [m, c] = C(0), l = n.filter((r) => !r.disabled);
-  E(() => {
-    var N;
-    const r = (i) => {
-      var d;
-      (d = s.current) != null && d.contains(i.target) || t();
+  Ue();
+  const x = M(null), [w, R] = C(0), g = t.filter((a) => !a.disabled);
+  B(() => {
+    var L;
+    const a = (i) => {
+      var d, E;
+      const p = i.target;
+      (d = x.current) != null && d.contains(p) || (E = p == null ? void 0 : p.closest) != null && E.call(p, $e) && (m != null && m.contains(p)) || o();
     }, f = (i) => {
+      var p;
       if (i.key === "Escape")
-        i.preventDefault(), t();
-      else if (i.key === "ArrowDown")
-        i.preventDefault(), c((d) => (d + 1) % Math.max(1, l.length));
+        i.preventDefault(), o();
+      else if (l) {
+        if (i.key === "Tab") {
+          i.preventDefault();
+          const d = [r.current, T.current].filter(
+            (H) => !!H && !H.disabled
+          );
+          if (d.length === 0) return;
+          const E = d.indexOf(document.activeElement), P = i.shiftKey ? E - 1 : E + 1;
+          (p = d[(P % d.length + d.length) % d.length]) == null || p.focus();
+        }
+        return;
+      } else if (i.key === "ArrowDown")
+        i.preventDefault(), R((d) => (d + 1) % Math.max(1, g.length));
       else if (i.key === "ArrowUp")
-        i.preventDefault(), c((d) => (d - 1 + Math.max(1, l.length)) % Math.max(1, l.length));
+        i.preventDefault(), R((d) => (d - 1 + Math.max(1, g.length)) % Math.max(1, g.length));
       else if (i.key === "Enter" || i.key === " ") {
         i.preventDefault();
-        const d = l[m];
-        d && (d.run(), t());
+        const d = g[w];
+        d && (d.run(), d.stay || o());
       }
     };
-    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", a, !0), window.addEventListener("keydown", f, !0), (L = x.current) == null || L.focus(), () => {
+      window.removeEventListener("mousedown", a, !0), window.removeEventListener("keydown", f, !0);
+    };
+  }, [o, g, w, l, m]);
+  const T = M(null), r = M(null), k = !!l, S = !!(l != null && l.ready);
+  B(() => {
+    var a;
+    k && ((a = r.current) == null || a.focus());
+  }, [k]), B(() => {
+    var f;
+    if (!S) return;
+    const a = document.activeElement;
+    (a === r.current || a === x.current || a === document.body) && ((f = T.current) == null || f.focus());
+  }, [S]);
+  const y = Math.min(ae, window.innerWidth - 16), O = Ee(l == null ? void 0 : l.text), [U, A] = C(() => l ? 96 : t.length * 30 + 12);
+  Ne(() => {
+    var f;
+    const a = (f = x.current) == null ? void 0 : f.offsetHeight;
+    a && a !== U && A(a);
+  });
+  const $ = Math.max(8, Math.min(n.x, window.innerWidth - y - 8)), j = Math.max(8, Math.min(n.y, window.innerHeight - U - 8)), b = (m == null ? void 0 : m.closest('[role="dialog"]')) ?? document.body, D = b === document.body ? { position: "fixed", left: $, top: j } : (() => {
+    const a = b.getBoundingClientRect();
+    return {
+      position: "absolute",
+      left: $ - a.left + b.scrollLeft - b.clientLeft,
+      top: j - a.top + b.scrollTop - b.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 Ce(
+    /* @__PURE__ */ h(
       "div",
       {
-        ref: s,
-        role: "menu",
+        ref: x,
+        ...l ? { role: "dialog", "aria-modal": !1, "aria-label": l.label } : { 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: { ...D, width: y, maxWidth: "calc(100vw - 16px)", 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: [
+          l ? /* @__PURE__ */ h("div", { "data-personal-default-confirm": !0, className: "space-y-2 px-2 py-1.5", children: [
+            /* @__PURE__ */ s(
+              "p",
+              {
+                ref: O,
+                "aria-live": "polite",
+                className: "line-clamp-4 text-[12.5px] leading-snug text-slate-700 [overflow-wrap:anywhere] dark:text-slate-200",
+                children: l.text
+              }
+            ),
+            /* @__PURE__ */ h("div", { className: "flex justify-end gap-1.5", children: [
+              /* @__PURE__ */ h(
+                "button",
+                {
+                  ref: r,
+                  type: "button",
+                  onClick: l.onCancel,
+                  className: Le,
+                  children: [
+                    /* @__PURE__ */ s(ne, { 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: T,
+                  type: "button",
+                  disabled: !l.ready,
+                  onClick: l.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: l.saving ? "Saving…" : l.action
+                }
+              )
+            ] })
+          ] }) : null,
+          l ? null : t.map((a) => {
+            const f = g.indexOf(a), L = f === w && !a.disabled;
+            return /* @__PURE__ */ h(
+              "button",
+              {
+                type: "button",
+                role: "menuitem",
+                disabled: a.disabled,
+                onMouseEnter: () => f >= 0 && R(f),
+                onClick: () => {
+                  a.run(), a.stay || o();
+                },
+                className: re(
+                  "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",
+                  L && "bg-accent text-accent-foreground",
+                  a.disabled && "cursor-not-allowed opacity-40"
+                ),
+                children: [
+                  /* @__PURE__ */ s("span", { className: "shrink-0 text-slate-500", children: a.icon }),
+                  /* @__PURE__ */ s("span", { className: "min-w-0 flex-1 truncate", children: a.label }),
+                  a.hint && /* @__PURE__ */ s("span", { className: "max-w-[90px] truncate font-mono text-[10.5px] text-slate-400", children: a.hint })
+                ]
+              },
+              a.key
+            );
+          })
+        ]
       }
     ),
-    document.body
+    b
   );
 }
-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);
-  }, [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();
+function Je(n) {
+  const [t, o] = C(null), [l, m] = C(!1), x = M(!1), w = M(null);
+  B(() => {
+    const r = n.current;
+    if (!r) return;
+    const k = () => o(r.getAttribute("data-remote-editor"));
+    k();
+    const S = new MutationObserver(k);
+    return S.observe(r, { attributes: !0, attributeFilter: ["data-remote-editor"] }), () => S.disconnect();
+  }, [n]), B(() => {
+    t || (m(!1), x.current = !1);
+  }, [t]);
+  const R = N(
+    (r) => {
+      if (!t || x.current) return;
+      const k = r.target;
+      k.matches('input, textarea, select, [contenteditable="true"], [role="combobox"]') && (w.current = k, setTimeout(() => {
+        x.current || k.blur();
       }, 0), m(!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;
+    [t]
+  ), g = N(() => {
+    x.current = !0, m(!1);
+    const r = w.current;
+    w.current = null, r && setTimeout(() => r.focus(), 0);
+  }, []), T = N(() => {
+    m(!1), w.current = null;
   }, []);
-  return { editor: n, confirming: s, onFocusCapture: y, confirm: w, cancel: h };
+  return { editor: t, confirming: l, onFocusCapture: R, confirm: g, cancel: T };
 }
-function le({
-  editor: e,
-  confirming: n,
-  onConfirm: t,
-  onCancel: s
+function ze({
+  editor: n,
+  confirming: t,
+  onConfirm: o,
+  onCancel: l
 }) {
-  const m = e.split(/\s+/).map((c) => c[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
-  return /* @__PURE__ */ x(
+  const m = n.split(/\s+/).map((x) => x[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+  return /* @__PURE__ */ h(
     "div",
     {
       "data-presence-soft-lock": !0,
-      className: A(
+      className: re(
         "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"
+        t ? "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: m || "?" }),
+        /* @__PURE__ */ s("span", { className: "min-w-0 flex-1", children: t ? `${n} is typing here — edit anyway?` : `${n} is editing this field` }),
+        t && /* @__PURE__ */ h(fe, { children: [
+          /* @__PURE__ */ s(
             "button",
             {
               type: "button",
-              onClick: t,
+              onClick: o,
               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: l,
               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 +580,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,
+  Ye as LockReasonBadge,
+  ze as PresenceSoftLockStrip,
+  Xe as RemoteChangeGhost,
+  te as ghostText,
+  Ve as useFieldAffordances,
+  qe as useFieldContextMenu,
+  Je as usePresenceSoftLock
 };