@nivaro/react 0.3.41 → 0.3.42

package/dist/shared/components/integrations/console/SubmissionRow.js

@@ -1,22 +1,23 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { ChevronDown as x, Loader2 as h, RefreshCw as f } from "lucide-react";
-import { useState as k } from "react";
-import { formatRelative as _, cn as y, titleCase as N } from "../../../lib/utils.js";
-import { Button as g } from "../../ui/button.js";
-import { AttemptHistory as w } from "./drill/attempts.js";
-import { pretty as d, CodeBlock as o } from "./drill/json.js";
-import { StatusPill as v } from "./drill/status.js";
-function u(e, r) {
-  return `${N(e).replace(/s$/, "")} · ${r}`;
+import { ChevronDown as h, Loader2 as f, RefreshCw as k } from "lucide-react";
+import { useState as _ } from "react";
+import { formatRelative as y, cn as N, titleCase as w } from "../../../lib/utils.js";
+import { Button as v } from "../../ui/button.js";
+import { AttemptHistory as g } from "./drill/attempts.js";
+import { pretty as i, CodeBlock as s } from "./drill/json.js";
+import { StatusPill as L } from "./drill/status.js";
+import { ErrorExplanation as d } from "./ErrorExplanation.js";
+function C(e, n) {
+  return `${w(e).replace(/s$/, "")} · ${n}`;
 }
-function j({
+function q({
   sub: e,
-  onRetry: r,
-  retrying: n,
-  onShowPath: s,
-  initialOpen: i = !1
+  onRetry: n,
+  retrying: l,
+  onShowPath: o,
+  initialOpen: p = !1
 }) {
-  const [l, p] = k(i), m = d(e.payload), c = d(e.response);
+  const [r, m] = _(p), c = i(e.payload), x = i(e.response);
   return /* @__PURE__ */ a(
     "div",
     {
@@ -28,10 +29,10 @@ function j({
             "button",
             {
               type: "button",
-              onClick: () => p(!l),
+              onClick: () => m(!r),
               className: "flex min-w-0 flex-1 items-center gap-3 px-3 py-2 text-left",
               children: [
-                /* @__PURE__ */ t(v, { status: e.status }),
+                /* @__PURE__ */ t(L, { status: e.status }),
                 e.external_api_name && /* @__PURE__ */ t("span", { className: "shrink-0 text-[11.5px] font-semibold text-slate-700 dark:text-slate-200", children: e.external_api_name }),
                 /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate font-mono text-[11.5px] text-slate-500 dark:text-slate-400", children: e.endpoint_path ?? "—" }),
                 e.record_label && /* @__PURE__ */ t(
@@ -39,7 +40,7 @@ function j({
                   {
                     className: "shrink-0 rounded bg-slate-100 px-1.5 py-0.5 text-[10.5px] font-medium text-slate-600 dark:bg-muted dark:text-slate-300",
                     "data-tip": `${e.collection}/${e.item}`,
-                    children: u(e.collection, e.record_label)
+                    children: C(e.collection, e.record_label)
                   }
                 ),
                 e.external_ref && /* @__PURE__ */ t("span", { className: "shrink-0 rounded bg-slate-100 px-1.5 py-0.5 font-mono text-[10.5px] text-slate-600 dark:bg-muted dark:text-slate-300", children: e.external_ref }),
@@ -48,7 +49,7 @@ function j({
                   {
                     className: "shrink-0 text-[11px] text-slate-400",
                     title: new Date(e.updated_at).toLocaleString(),
-                    children: _(e.updated_at)
+                    children: y(e.updated_at)
                   }
                 ),
                 e.attempts > 1 && /* @__PURE__ */ a("span", { className: "shrink-0 text-[10.5px] text-slate-400", children: [
@@ -56,22 +57,22 @@ function j({
                   e.attempts
                 ] }),
                 /* @__PURE__ */ t(
-                  x,
+                  h,
                   {
-                    className: y(
+                    className: N(
                       "h-3.5 w-3.5 shrink-0 text-slate-400 transition-transform",
-                      l && "rotate-180"
+                      r && "rotate-180"
                     )
                   }
                 )
               ]
             }
           ),
-          s && /* @__PURE__ */ t(
+          o && /* @__PURE__ */ t(
             "button",
             {
               type: "button",
-              onClick: () => s(e.id),
+              onClick: () => o(e.id),
               className: "mr-2 shrink-0 rounded px-1.5 py-0.5 text-[11px] font-medium text-nvr-navy underline-offset-2 hover:underline dark:text-nvr-cyan",
               "data-submission-show-path": e.id,
               "data-tip": "Everything that led to this push and what came back",
@@ -79,7 +80,8 @@ function j({
             }
           )
         ] }),
-        l && /* @__PURE__ */ a("div", { className: "space-y-2 border-t border-slate-100 px-3 py-2.5 dark:border-border", children: [
+        !r && e.explanation && /* @__PURE__ */ t("div", { className: "-mt-1 px-3 pb-2", children: /* @__PURE__ */ t(d, { explanation: e.explanation, compact: !0 }) }),
+        r && /* @__PURE__ */ a("div", { className: "space-y-2 border-t border-slate-100 px-3 py-2.5 dark:border-border", children: [
           /* @__PURE__ */ a("div", { className: "grid grid-cols-2 gap-x-4 gap-y-1 text-[11.5px] text-slate-500 dark:text-slate-400", children: [
             /* @__PURE__ */ a("span", { children: [
               "Sent: ",
@@ -99,18 +101,18 @@ function j({
               e.external_api_name ?? (e.external_api != null ? `#${e.external_api}` : "—")
             ] })
           ] }),
-          e.last_error && /* @__PURE__ */ t("p", { className: "rounded bg-red-50 px-2 py-1.5 text-[11.5px] text-red-700 dark:bg-red-500/10 dark:text-red-400", children: e.last_error }),
+          e.last_error && /* @__PURE__ */ t(d, { explanation: e.explanation, raw: e.last_error }),
           /* @__PURE__ */ t(
-            o,
+            s,
             {
               label: e.attempts > 1 ? "Latest request" : "Request payload",
-              value: m
+              value: c
             }
           ),
-          /* @__PURE__ */ t(o, { label: e.attempts > 1 ? "Latest response" : "Response", value: c }),
-          e.attempts > 1 && /* @__PURE__ */ t(w, { submissionId: e.id }),
-          e.status === "failed" && /* @__PURE__ */ a(g, { size: "sm", variant: "outline", disabled: n, onClick: () => r(e.id), children: [
-            n ? /* @__PURE__ */ t(h, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ t(f, { className: "h-3 w-3" }),
+          /* @__PURE__ */ t(s, { label: e.attempts > 1 ? "Latest response" : "Response", value: x }),
+          e.attempts > 1 && /* @__PURE__ */ t(g, { submissionId: e.id }),
+          e.status === "failed" && /* @__PURE__ */ a(v, { size: "sm", variant: "outline", disabled: l, onClick: () => n(e.id), children: [
+            l ? /* @__PURE__ */ t(f, { className: "h-3 w-3 animate-spin" }) : /* @__PURE__ */ t(k, { className: "h-3 w-3" }),
             /* @__PURE__ */ t("span", { className: "ml-1.5", children: "Retry" })
           ] })
         ] })
@@ -119,6 +121,6 @@ function j({
   );
 }
 export {
-  v as StatusPill,
-  j as SubmissionRow
+  L as StatusPill,
+  q as SubmissionRow
 };

package/dist/shared/components/integrations/console/drill/SubmissionDrill.js

@@ -4,22 +4,23 @@ import { useMemo as W } from "react";
 import { useNavigation as L } from "../../../../context.js";
 import { cn as m, titleCase as A } from "../../../../lib/utils.js";
 import { useSubmissionDetail as F, useRetrySubmission as M } from "../api.js";
+import { ErrorExplanation as j } from "../ErrorExplanation.js";
 import { TONE_TEXT as d, TONE_SOFT as w, agoText as C, exactTime as y } from "../tone.js";
-import { AttemptHistory as j } from "./attempts.js";
-import { CodeBlock as q, pretty as S } from "./json.js";
-import { RequesterChip as T } from "./requester.js";
-import { StatusPill as B } from "./status.js";
-function z() {
+import { AttemptHistory as B } from "./attempts.js";
+import { CodeBlock as q, pretty as E } from "./json.js";
+import { RequesterChip as S } from "./requester.js";
+import { StatusPill as z } from "./status.js";
+function H() {
   const t = L();
   return (i) => i ? t.consoleUrl ? t.consoleUrl(i) : i : null;
 }
-function E(t, i) {
+function T(t, i) {
   /^https?:/.test(i) ? window.open(i, "_blank", "noopener") : t.navigate(i);
 }
-function x({ name: t, title: i, children: l }) {
+function h({ name: t, title: i, children: o }) {
   return /* @__PURE__ */ n("section", { "data-ic-drill-section": t, className: "min-w-0", children: [
     /* @__PURE__ */ e("h4", { className: "mb-1.5 text-[12px] font-semibold text-foreground", children: i }),
-    l
+    o
   ] });
 }
 function b({ label: t, children: i }) {
@@ -31,11 +32,11 @@ function b({ label: t, children: i }) {
 function N() {
   return /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "text-muted-foreground", children: "·" });
 }
-function H(t, i) {
-  var l, c, o, u;
-  return (l = t.user) != null && l.id || (c = i.user) != null && c.id ? ((o = t.user) == null ? void 0 : o.id) === ((u = i.user) == null ? void 0 : u.id) : t.kind === i.kind && t.label === i.label;
+function I(t, i) {
+  var o, c, l, u;
+  return (o = t.user) != null && o.id || (c = i.user) != null && c.id ? ((l = t.user) == null ? void 0 : l.id) === ((u = i.user) == null ? void 0 : u.id) : t.kind === i.kind && t.label === i.label;
 }
-const I = {
+const X = {
   transient: "Temporary failure",
   rate_limited: "Rate limited",
   auth: "Credentials refused",
@@ -51,7 +52,7 @@ const I = {
   skipped: "neutral",
   superseded: "neutral"
 };
-function X() {
+function G() {
   return /* @__PURE__ */ n("div", { className: "space-y-2.5", "aria-busy": !0, children: [
     [72, 96, 60, 84].map((t) => /* @__PURE__ */ e(
       "div",
@@ -64,11 +65,11 @@ function X() {
     /* @__PURE__ */ e("div", { className: "h-16 animate-pulse rounded-md bg-[hsl(var(--nvr-skeleton))]" })
   ] });
 }
-function ie({ id: t, onOpenRecord: i, onRetry: l, retryBusy: c }) {
-  var g, f, h;
-  const { data: o, isLoading: u, isError: v, error: r } = F(t), p = M();
-  if (u) return /* @__PURE__ */ e(X, {});
-  if (v || !o) {
+function oe({ id: t, onOpenRecord: i, onRetry: o, retryBusy: c }) {
+  var g, f, x;
+  const { data: l, isLoading: u, isError: v, error: r } = F(t), p = M();
+  if (u) return /* @__PURE__ */ e(G, {});
+  if (v || !l) {
     const s = ((g = r == null ? void 0 : r.response) == null ? void 0 : g.error) ?? (r instanceof Error ? r.message : null);
     return /* @__PURE__ */ n("p", { className: m("rounded-md px-3 py-2 text-[12px]", w.negative, d.negative), children: [
       "Couldn't load this push",
@@ -77,28 +78,28 @@ function ie({ id: t, onOpenRecord: i, onRetry: l, retryBusy: c }) {
     ] });
   }
   return /* @__PURE__ */ e(
-    G,
+    J,
     {
-      d: o,
+      d: l,
       onOpenRecord: i,
-      onRetry: l ?? (() => p.mutate(t)),
-      retryBusy: l ? !!c : p.isPending,
-      retryError: l ? null : p.isError ? ((h = (f = p.error) == null ? void 0 : f.response) == null ? void 0 : h.error) ?? "The retry failed" : null
+      onRetry: o ?? (() => p.mutate(t)),
+      retryBusy: o ? !!c : p.isPending,
+      retryError: o ? null : p.isError ? ((x = (f = p.error) == null ? void 0 : f.response) == null ? void 0 : x.error) ?? "The retry failed" : null
     }
   );
 }
-function G({
+function J({
   d: t,
   onOpenRecord: i,
-  onRetry: l,
+  onRetry: o,
   retryBusy: c,
-  retryError: o
+  retryError: l
 }) {
-  const u = L(), v = z(), r = t.submission, p = W(
+  const u = L(), v = H(), r = t.submission, p = W(
     () => new Map(t.attempt_requesters.map((a) => [a.attempt, a.requester])),
     [t.attempt_requesters]
-  ), g = A(r.collection).replace(/s$/, ""), f = v(t.trigger.link), h = t.partner.id != null ? v(`/external-apis/${t.partner.id}`) : null, s = t.obligation, k = t.attempt_requesters.filter(
-    (a) => a.attempt > 1 && a.requester.kind !== "unknown" && !H(a.requester, t.triggered_by)
+  ), g = A(r.collection).replace(/s$/, ""), f = v(t.trigger.link), x = t.partner.id != null ? v(`/external-apis/${t.partner.id}`) : null, s = t.obligation, k = t.attempt_requesters.filter(
+    (a) => a.attempt > 1 && a.requester.kind !== "unknown" && !I(a.requester, t.triggered_by)
   );
   return /* @__PURE__ */ n("div", { className: "space-y-4", "data-ic-drill": `submission:${r.id}`, children: [
     /* @__PURE__ */ n(
@@ -135,7 +136,7 @@ function G({
             r.record_label
           ] }),
           /* @__PURE__ */ e(N, {}),
-          /* @__PURE__ */ e(B, { status: r.status }),
+          /* @__PURE__ */ e(z, { status: r.status }),
           r.error_class && /* @__PURE__ */ e(
             "span",
             {
@@ -145,7 +146,7 @@ function G({
                 d.warning
               ),
               "data-tip": `Error class: ${r.error_class}`,
-              children: I[r.error_class] ?? r.error_class
+              children: X[r.error_class] ?? r.error_class
             }
           ),
           /* @__PURE__ */ e(N, {}),
@@ -169,8 +170,9 @@ function G({
         ]
       }
     ),
-    (r.last_error || (s == null ? void 0 : s.reason)) && /* @__PURE__ */ n(x, { name: "error", title: "What went wrong", children: [
-      r.last_error && /* @__PURE__ */ e(
+    (r.last_error || (s == null ? void 0 : s.reason)) && /* @__PURE__ */ n(h, { name: "error", title: "What went wrong", children: [
+      r.last_error && r.explanation && /* @__PURE__ */ e(j, { explanation: r.explanation, raw: r.last_error }),
+      r.last_error && !r.explanation && /* @__PURE__ */ e(
         "p",
         {
           className: m(
@@ -187,26 +189,26 @@ function G({
         s.reason
       ] })
     ] }),
-    /* @__PURE__ */ e(x, { name: "attempts", title: "Attempts", children: /* @__PURE__ */ e(j, { submissionId: r.id, requesters: p, title: null }) }),
+    /* @__PURE__ */ e(h, { name: "attempts", title: "Attempts", children: /* @__PURE__ */ e(B, { submissionId: r.id, requesters: p, title: null }) }),
     /* @__PURE__ */ e(
-      x,
+      h,
       {
         name: "bodies",
         title: r.attempts > 1 ? "Latest request and response" : "Request and response",
         children: /* @__PURE__ */ n("div", { className: "grid gap-3 lg:grid-cols-2", children: [
-          /* @__PURE__ */ e(q, { label: "Request", value: S(r.payload), fold: !0 }),
-          /* @__PURE__ */ e(q, { label: "Response", value: S(r.response), fold: !0 })
+          /* @__PURE__ */ e(q, { label: "Request", value: E(r.payload), fold: !0 }),
+          /* @__PURE__ */ e(q, { label: "Response", value: E(r.response), fold: !0 })
         ] })
       }
     ),
     /* @__PURE__ */ n("div", { className: "grid gap-4 xl:grid-cols-2", children: [
-      /* @__PURE__ */ e(x, { name: "why", title: "Why it was sent — and who", children: /* @__PURE__ */ n("dl", { className: "grid grid-cols-[max-content_minmax(0,1fr)] items-baseline gap-x-4 gap-y-1.5", children: [
-        /* @__PURE__ */ e(b, { label: "Triggered by", children: /* @__PURE__ */ e("span", { className: "inline-flex max-w-full", "data-ic-drill-triggered-by": !0, children: /* @__PURE__ */ e(T, { r: t.triggered_by }) }) }),
+      /* @__PURE__ */ e(h, { name: "why", title: "Why it was sent — and who", children: /* @__PURE__ */ n("dl", { className: "grid grid-cols-[max-content_minmax(0,1fr)] items-baseline gap-x-4 gap-y-1.5", children: [
+        /* @__PURE__ */ e(b, { label: "Triggered by", children: /* @__PURE__ */ e("span", { className: "inline-flex max-w-full", "data-ic-drill-triggered-by": !0, children: /* @__PURE__ */ e(S, { r: t.triggered_by }) }) }),
         /* @__PURE__ */ e(b, { label: "What sent it", children: f ? /* @__PURE__ */ n(
           "button",
           {
             type: "button",
-            onClick: () => E(u, f),
+            onClick: () => T(u, f),
             className: "inline-flex items-center gap-1 text-left font-medium underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             children: [
               t.trigger.label,
@@ -225,7 +227,7 @@ function G({
             "#",
             a.attempt
           ] }),
-          /* @__PURE__ */ e(T, { r: a.requester, size: "sm" })
+          /* @__PURE__ */ e(S, { r: a.requester, size: "sm" })
         ] }, a.attempt)) }) }),
         /* @__PURE__ */ e(b, { label: "Obligation", children: s ? /* @__PURE__ */ n("span", { className: "inline-flex flex-wrap items-center gap-x-1.5 gap-y-0.5", children: [
           /* @__PURE__ */ e("span", { className: "font-mono text-[11.5px]", children: s.kind }),
@@ -251,7 +253,7 @@ function G({
         ] }) : /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "None recorded for this push" }) }),
         t.partner.owner && /* @__PURE__ */ e(b, { label: "Partner owner", children: t.partner.owner.name })
       ] }) }),
-      /* @__PURE__ */ n(x, { name: "calls", title: "Call log", children: [
+      /* @__PURE__ */ n(h, { name: "calls", title: "Call log", children: [
         t.call_logs.length === 0 ? /* @__PURE__ */ e("p", { className: "text-[12px] text-muted-foreground", children: "No partner calls matched this push — the writer that sent it does not log its calls." }) : /* @__PURE__ */ e("ul", { className: "divide-y divide-border rounded-md border border-border", children: t.call_logs.map((a) => {
           const O = a.error != null || (a.status ?? 0) >= 400;
           return /* @__PURE__ */ n(
@@ -293,12 +295,12 @@ function G({
             a.id
           );
         }) }),
-        h && /* @__PURE__ */ n(
+        x && /* @__PURE__ */ n(
           "button",
           {
             type: "button",
             "data-ic-drill-call-logs": !0,
-            onClick: () => E(u, h),
+            onClick: () => T(u, x),
             className: "mt-1.5 inline-flex items-center gap-1 text-[12px] font-medium text-foreground underline decoration-border underline-offset-2 hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             children: [
               "Open in Call Logs",
@@ -320,7 +322,7 @@ function G({
               type: "button",
               "data-ic-drill-retry": !0,
               disabled: !t.retry.eligible || c,
-              onClick: l,
+              onClick: o,
               className: "inline-flex h-7 items-center gap-1.5 rounded-md border border-border bg-card px-2.5 text-[12px] font-medium text-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               children: [
                 c ? /* @__PURE__ */ e(U, { className: "h-3 w-3 animate-spin", "aria-hidden": !0 }) : /* @__PURE__ */ e($, { className: "h-3 w-3", "aria-hidden": !0 }),
@@ -339,13 +341,13 @@ function G({
           ),
           !t.retry.eligible && t.retry.reason && /* @__PURE__ */ e("span", { className: "text-[12px] text-muted-foreground", "data-ic-drill-retry-reason": !0, children: t.retry.reason }),
           t.retry.eligible && t.retry.warning && /* @__PURE__ */ e("span", { className: m("text-[12px]", d.warning), children: t.retry.warning }),
-          o && /* @__PURE__ */ e("span", { className: m("text-[12px]", d.negative), children: o })
+          l && /* @__PURE__ */ e("span", { className: m("text-[12px]", d.negative), children: l })
         ]
       }
     )
   ] });
 }
 export {
-  ie as SubmissionDrill,
-  H as sameRequester
+  oe as SubmissionDrill,
+  I as sameRequester
 };

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

@@ -0,0 +1,212 @@
+import { jsx as n, jsxs as s } from "react/jsx-runtime";
+import { useQuery as O, useQueryClient as j, useMutation as q } from "@tanstack/react-query";
+import { MessageSquare as D, Link2 as Q, RotateCcw as _, Check as E } from "lucide-react";
+import { useState as v, useMemo as y } from "react";
+import { toast as x } from "sonner";
+import { useNivaroClient as T } from "../../context.js";
+import { get as I, post as R } from "../../lib/commands.js";
+import { openFieldCommentCounts as A, fieldThread as B, fieldDeepLinkQuery as H } from "../../lib/field-comments.js";
+import { cn as L, formatRelative as U } from "../../lib/utils.js";
+import { AutolinkedText as W } from "../AutolinkedText.js";
+import { MentionTextarea as z } from "../panels/CommentPanel.js";
+import { Popover as G, PopoverTrigger as J, PopoverContent as V } from "../ui/popover.js";
+import { useFieldComments as X } from "./field-comments-context.js";
+const S = (t, o) => ["comments", t, o];
+function K(t, o, r) {
+  const a = T();
+  return O({
+    queryKey: S(t, o),
+    queryFn: () => a.request(I("/comments", { collection: t, item: o })).then((d) => d.data),
+    enabled: r
+  });
+}
+function he(t) {
+  const o = t.itemId == null ? "" : String(t.itemId), r = t.enabled && o !== "" && o !== "new", { data: a } = K(t.collection, o, r), [d, c] = v(null), l = y(() => A(a ?? []), [a]), { labelOf: i, jump: p, collection: u } = t;
+  return y(
+    () => r ? { collection: u, item: o, counts: l, openField: d, setOpenField: c, labelOf: i, jump: p } : null,
+    [r, u, o, l, d, i, p]
+  );
+}
+function Y(t) {
+  return t ? [t.first_name, t.last_name].filter(Boolean).join(" ") || t.email : "Someone";
+}
+function xe({ field: t, label: o }) {
+  const r = X();
+  return r ? /* @__PURE__ */ n(Z, { ctx: r, field: t, label: o }) : null;
+}
+function Z({
+  ctx: t,
+  field: o,
+  label: r
+}) {
+  const a = t.counts[o] ?? 0, d = t.openField === o;
+  return /* @__PURE__ */ s(G, { open: d, onOpenChange: (c) => t.setOpenField(c ? o : null), children: [
+    /* @__PURE__ */ n(J, { asChild: !0, children: /* @__PURE__ */ s(
+      "button",
+      {
+        type: "button",
+        "data-field-comment": o,
+        "data-field-comment-count": a || void 0,
+        "aria-label": a ? `${a} open ${a === 1 ? "comment" : "comments"} on ${r}` : `Comment on ${r}`,
+        "data-tip": a ? void 0 : `Comment on ${r}`,
+        className: L(
+          "inline-flex items-center gap-0.5 rounded px-0.5 py-0.5 text-[10px] font-semibold transition-[opacity,color]",
+          a || d ? "text-[#0e7490] opacity-100 dark:text-nvr-cyan" : "text-slate-400 opacity-0 hover:text-[#0e7490] focus-visible:opacity-100 group-hover/fieldrow:opacity-100 group-focus-within/fieldrow:opacity-100 dark:text-slate-400 dark:hover:text-nvr-cyan"
+        ),
+        children: [
+          /* @__PURE__ */ n(D, { "aria-hidden": !0, className: "h-3 w-3" }),
+          a > 0 && /* @__PURE__ */ n("span", { className: "tabular-nums", children: a })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ n(
+      V,
+      {
+        align: "start",
+        className: "w-[340px] p-0",
+        onInteractOutside: (c) => {
+          var i;
+          const l = c.target;
+          (i = l == null ? void 0 : l.closest) != null && i.call(l, "[data-mention-menu]") && c.preventDefault();
+        },
+        children: d && /* @__PURE__ */ n(ee, { ctx: t, field: o, label: r })
+      }
+    )
+  ] });
+}
+function ee({
+  ctx: t,
+  field: o,
+  label: r
+}) {
+  const a = T(), d = j(), { data: c, isLoading: l } = K(t.collection, t.item, !0), i = y(() => B(c ?? [], o), [c, o]), [p, u] = v(!1), [f, g] = v(""), b = () => d.invalidateQueries({ queryKey: S(t.collection, t.item) }), k = (e, m) => {
+    var $, F, P;
+    return ((F = ($ = e == null ? void 0 : e.response) == null ? void 0 : $.data) == null ? void 0 : F.error) ?? ((P = e == null ? void 0 : e.data) == null ? void 0 : P.error) ?? m;
+  }, h = q({
+    mutationFn: (e) => a.request(
+      R("/comments", {
+        collection: t.collection,
+        item: t.item,
+        text: e,
+        field: o,
+        field_label: r
+      })
+    ),
+    onSuccess: () => {
+      g(""), b();
+    },
+    onError: (e) => x.error(k(e, "Could not post the comment"))
+  }), w = q({
+    mutationFn: ({ id: e, resolved: m }) => a.request(R(`/comments/${e}/resolve`, { resolved: m })),
+    onSuccess: () => void b(),
+    onError: (e) => x.error(k(e, "Could not update the comment"))
+  }), C = () => {
+    const e = f.trim();
+    e && !h.isPending && h.mutate(e);
+  }, M = () => {
+    const e = new URL(window.location.href);
+    e.searchParams.delete("field");
+    const m = e.search ? "&" : "?";
+    navigator.clipboard.writeText(`${e.origin}${e.pathname}${e.search}${m}${H(o)}`).then(
+      () => x.success("Link to this field copied"),
+      () => x.error("Could not copy")
+    );
+  }, N = (e, m) => /* @__PURE__ */ s("li", { "data-field-comment-row": e.id, className: "px-3 py-2", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-baseline gap-1.5", children: [
+      /* @__PURE__ */ n("span", { className: "truncate text-[12px] font-medium text-slate-800 dark:text-foreground", children: Y(e.user) }),
+      /* @__PURE__ */ n("span", { className: "shrink-0 text-[11px] text-slate-400 dark:text-muted-foreground", children: U(e.created_at) }),
+      /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          disabled: w.isPending,
+          onClick: () => w.mutate({ id: e.id, resolved: !m }),
+          "data-field-comment-resolve": e.id,
+          className: "ml-auto inline-flex shrink-0 items-center gap-1 rounded px-1 py-px text-[11px] text-slate-500 transition-colors hover:bg-muted hover:text-slate-800 disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground",
+          children: [
+            m ? /* @__PURE__ */ n(_, { "aria-hidden": !0, className: "h-3 w-3" }) : /* @__PURE__ */ n(E, { "aria-hidden": !0, className: "h-3 w-3" }),
+            m ? "Reopen" : "Resolve"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n(
+      "p",
+      {
+        className: L(
+          "m-0 mt-0.5 whitespace-pre-wrap text-[12.5px] leading-snug [overflow-wrap:anywhere]",
+          m ? "text-slate-400 dark:text-muted-foreground" : "text-slate-600 dark:text-slate-300"
+        ),
+        children: /* @__PURE__ */ n(W, { text: e.text })
+      }
+    )
+  ] }, e.id);
+  return /* @__PURE__ */ s("div", { "data-field-comments": o, children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center gap-2 border-b border-slate-200 px-3 py-2 dark:border-border", children: [
+      /* @__PURE__ */ s("p", { className: "m-0 min-w-0 flex-1 truncate text-[12px] font-semibold text-slate-700 dark:text-foreground", children: [
+        "Comments on ",
+        r
+      ] }),
+      /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          onClick: M,
+          "aria-label": `Copy a link to ${r}`,
+          "data-tip": "Copy a link that opens the record on this field",
+          className: "rounded p-1 text-slate-400 transition-colors hover:bg-muted hover:text-slate-700 dark:hover:text-foreground",
+          children: /* @__PURE__ */ n(Q, { "aria-hidden": !0, className: "h-3.5 w-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ s("div", { className: "max-h-[260px] overflow-y-auto overscroll-contain", children: [
+      l ? /* @__PURE__ */ n("p", { className: "m-0 px-3 py-3 text-[12px] text-slate-400 dark:text-muted-foreground", children: "Loading…" }) : i.open.length === 0 && i.resolved.length === 0 ? /* @__PURE__ */ n("p", { className: "m-0 px-3 py-3 text-[12px] text-slate-500 dark:text-muted-foreground", children: "No comments on this field yet. They also show in the record’s Comments." }) : /* @__PURE__ */ s("ul", { className: "m-0 list-none divide-y divide-slate-100 p-0 dark:divide-border", children: [
+        i.open.map((e) => N(e, !1)),
+        p && i.resolved.map((e) => N(e, !0))
+      ] }),
+      i.resolved.length > 0 && /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          onClick: () => u((e) => !e),
+          "aria-expanded": p,
+          className: "block w-full px-3 py-1.5 text-left text-[11px] text-slate-500 transition-colors hover:bg-muted dark:text-muted-foreground",
+          children: p ? "Hide resolved" : `${i.resolved.length} resolved`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ s("div", { className: "space-y-1.5 border-t border-slate-200 p-2 dark:border-border", children: [
+      /* @__PURE__ */ n(
+        z,
+        {
+          value: f,
+          onChange: g,
+          rows: 2,
+          "aria-label": `Comment on ${r}`,
+          placeholder: "Write a comment… type @ to mention someone",
+          className: "min-h-[56px] text-[12.5px]",
+          onKeyDownCapture: (e) => {
+            e.key === "Enter" && (e.metaKey || e.ctrlKey) && (e.preventDefault(), C());
+          }
+        }
+      ),
+      /* @__PURE__ */ s("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ n("span", { className: "text-[11px] text-slate-400 dark:text-muted-foreground", children: "Only people who can open this record are notified." }),
+        /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            onClick: C,
+            disabled: !f.trim() || h.isPending,
+            className: "inline-flex h-7 shrink-0 items-center rounded-md bg-nvr-cyan px-2.5 text-[12px] font-medium text-white transition-colors hover:bg-nvr-cyan-dark disabled:opacity-50",
+            children: h.isPending ? "Posting…" : "Comment"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  xe as FieldCommentButton,
+  he as useFieldCommentsApi
+};