@nivaro/react 0.3.25 → 0.3.26

package/dist/hooks/useSessionRecorder.js

@@ -9,7 +9,7 @@ import { noteReplayEvent as _e, createReplayCheckoutState as De } from "../share
 import { emitReplayTap as Te, setReplayRecorderMode as N, registerReplayCapture as qe, clipEndOffset as Le, withClipKind as Pe } from "../shared/lib/replay-capture.js";
 import { instrumentConsole as Ne, instrumentRequests as Fe, redactSecrets as Me } from "../shared/lib/replay-context.js";
 import { instrumentSocket as Oe } from "../shared/lib/replay-socket.js";
-const Ue = "nivaro-react@0.3.25", j = 1e4, We = 150, He = 3e3, Ke = 600, $e = (n) => `nvr_replay_resume${n ? `:${n}` : ""}`, G = () => typeof navigator > "u" || navigator.onLine !== !1;
+const Ue = "nivaro-react@0.3.26", j = 1e4, We = 150, He = 3e3, Ke = 600, $e = (n) => `nvr_replay_resume${n ? `:${n}` : ""}`, G = () => typeof navigator > "u" || navigator.onLine !== !1;
 function Be(n) {
   return typeof n.url != "string" || typeof fetch != "function" ? null : (f, a) => {
     const u = typeof n.getToken == "function" ? n.getToken() : void 0, d = { "Content-Type": "application/json" };

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

@@ -2,38 +2,39 @@ import { jsx as n, jsxs as c } from "react/jsx-runtime";
 import { useQuery as w } from "@tanstack/react-query";
 import { ChevronDown as te, Loader2 as ae, AlertTriangle as ce, X as oe, Check as de } from "lucide-react";
 import { useState as ne, useRef as me, useEffect as ue } from "react";
-import { useNivaroClient as fe, useItemEditAuth as pe, useDrilldown as $e } from "../../context.js";
-import { parseAllowedCollections as Ie } from "../../lib/allowed-collections.js";
-import { get as C } from "../../lib/commands.js";
-import { useRecordReader as Ae } from "../../lib/record-loader.js";
-import { useOnlineUsers as he } from "../../lib/use-online-users.js";
-import { cn as Q, userOptionFilter as be } from "../../lib/utils.js";
-import { UserAvatar as ye } from "../UserAvatar.js";
-import { Command as xe, CommandInput as ve, CommandList as ge, CommandEmpty as ke, CommandGroup as we, CommandItem as Ne } from "../ui/command.js";
-import { Popover as Se, PopoverTrigger as _e, PopoverContent as Ce } from "../ui/popover.js";
-import { applyDisplayTemplate as qe } from "./helpers.js";
-import { useM2MStaging as Le } from "./M2MStagingContext.js";
-import { useStaleTip as Ke, RelatedItemLabel as ie } from "./RelationCombobox.js";
-function je(s) {
-  return s.replace(/\(.*$/, "").trim().split(/\s+/).map((o) => o[0]).filter(Boolean).slice(0, 2).join("").toUpperCase() || "?";
-}
+import { useNivaroClient as fe, useItemEditAuth as pe, useDrilldown as Ie } from "../../context.js";
+import { parseAllowedCollections as Ae } from "../../lib/allowed-collections.js";
+import { get as q } from "../../lib/commands.js";
+import { compareByMatch as he } from "../../lib/picker-rank.js";
+import { useRecordReader as Ke } from "../../lib/record-loader.js";
+import { useOnlineUsers as be } from "../../lib/use-online-users.js";
+import { cn as Q, userOptionFilter as ye } from "../../lib/utils.js";
+import { UserAvatar as xe } from "../UserAvatar.js";
+import { Command as ve, CommandInput as ge, CommandList as ke, CommandEmpty as we, CommandGroup as Ne, CommandItem as Se } from "../ui/command.js";
+import { Popover as _e, PopoverTrigger as qe, PopoverContent as Ce } from "../ui/popover.js";
+import { applyDisplayTemplate as Le } from "./helpers.js";
+import { useM2MStaging as je } from "./M2MStagingContext.js";
+import { useStaleTip as Je, RelatedItemLabel as ie } from "./RelationCombobox.js";
 function Fe(s) {
-  return Ie(s == null ? void 0 : s.one_allowed_collections);
+  return s.replace(/\(.*$/, "").trim().split(/\s+/).map((o) => o[0]).filter(Boolean).slice(0, 2).join("").toUpperCase() || "?";
 }
 function Te(s) {
+  return Ae(s == null ? void 0 : s.one_allowed_collections);
+}
+function Oe(s) {
   if (!s) return null;
   if (s.one_collection) return s.one_collection;
-  const o = Fe(s);
+  const o = Te(s);
   return o.length === 0 ? null : o.some((N) => N === "directus_users" || N === "nivaro_users") ? "nivaro_users" : o[0];
 }
-function et(s) {
+function nt(s) {
   if (!s || s.one_collection) return null;
-  const o = Fe(s);
+  const o = Te(s);
   if (o.length === 0) return null;
   const N = o.includes("directus_users") ? "directus_users" : o.includes("nivaro_users") ? "nivaro_users" : o[0];
   return { field: s.one_collection_field ?? "collection", value: N };
 }
-function tt({
+function lt({
   relation: s,
   parentId: o,
   allRelations: N,
@@ -43,57 +44,57 @@ function tt({
   onCountChange: J,
   drilldown: D
 }) {
-  const y = fe(), W = $e(), t = Le(), [P, q] = ne(!1), [L, T] = ne(""), le = N.find(
+  const y = fe(), W = Ie(), t = je(), [P, C] = ne(!1), [x, T] = ne(""), le = N.find(
     (e) => e.many_collection === s.many_collection && e.many_field === s.junction_field && e.id !== s.id
-  ), r = Te(le), x = s.junction_field ?? "", R = s.many_field ?? "", d = s.one_field ?? `${s.many_collection}.${x}`, { data: a } = w({
+  ), r = Oe(le), v = s.junction_field ?? "", R = s.many_field ?? "", d = s.one_field ?? `${s.many_collection}.${v}`, { data: a } = w({
     queryKey: ["col-meta", r],
-    queryFn: () => y.request(C(`/collections/${r}`)).then((e) => e.data),
+    queryFn: () => y.request(q(`/collections/${r}`)).then((e) => e.data),
     enabled: !!r,
     staleTime: 3e5,
     retry: !1
   }), { data: X = [] } = w({
     queryKey: ["m2m-items", s.many_collection, R, o],
     queryFn: () => y.request(
-      C(`/items/${s.many_collection}`, {
+      q(`/items/${s.many_collection}`, {
         filter: JSON.stringify({ [R]: { _eq: o } }),
         limit: 200,
-        fields: `id,${x}`
+        fields: `id,${v}`
       })
     ).then((e) => e.data ?? []),
     staleTime: 3e4,
     enabled: !!o && o !== "new"
-  }), re = pe().isAdmin, z = r === "nivaro_users" ? be(re) : null, E = he(r === "nivaro_users"), H = h ? z ? { _and: [h, z] } : h : z, j = H ? JSON.stringify(H) : void 0, v = b && !/^-?label$/.test(b) ? b : void 0, S = (() => {
+  }), re = pe().isAdmin, z = r === "nivaro_users" ? ye(re) : null, E = be(r === "nivaro_users"), H = h ? z ? { _and: [h, z] } : h : z, L = H ? JSON.stringify(H) : void 0, g = b && !/^-?label$/.test(b) ? b : void 0, S = (() => {
     const e = a == null ? void 0 : a.display_template;
     if (!e || !e.includes(".")) return null;
     const i = [...e.matchAll(/\{\{([^}]+)\}\}/g)].map((u) => u[1].trim());
     return i.length === 0 ? null : ["id", ...i].join(",");
-  })(), { data: O = [], isFetching: V } = w({
+  })(), { data: O = [], isFetching: B } = w({
     queryKey: [
       "m2m-options",
       r,
+      x,
       L,
-      j,
-      v ?? "",
+      g ?? "",
       S ?? ""
     ],
     queryFn: () => y.request(
-      C(`/items/${r}`, {
+      q(`/items/${r}`, {
         limit: 200,
-        search: L || void 0,
-        filter: j,
+        search: x || void 0,
+        filter: L,
         picker: "1",
         // A dotted display template ({{core_category.name}}) needs the
         // nested expansion — a bare row only carries the FK id.
         ...S ? { fields: S } : {},
-        ...v ? { sort: v } : {}
+        ...g ? { sort: g } : {}
       })
     ).then((e) => e.data ?? []),
     enabled: P && !!r,
-    staleTime: j ? 0 : 3e4
-  }), B = (t == null ? void 0 : t.getStagedLinks(d)) ?? [], g = (t == null ? void 0 : t.getStagedUnlinks(d)) ?? /* @__PURE__ */ new Set(), U = X.filter((e) => !g.has(e.id)), p = new Set(U.map((e) => String(e[x]))), _ = [...p], Y = JSON.stringify(h ? { _and: [{ id: { _in: _ } }, h] } : { id: { _in: _ } }), { data: m } = w({
-    queryKey: ["m2m-avail", r, _.join(","), j],
+    staleTime: L ? 0 : 3e4
+  }), V = (t == null ? void 0 : t.getStagedLinks(d)) ?? [], k = (t == null ? void 0 : t.getStagedUnlinks(d)) ?? /* @__PURE__ */ new Set(), U = X.filter((e) => !k.has(e.id)), f = new Set(U.map((e) => String(e[v]))), _ = [...f], Y = JSON.stringify(h ? { _and: [{ id: { _in: _ } }, h] } : { id: { _in: _ } }), { data: m } = w({
+    queryKey: ["m2m-avail", r, _.join(","), L],
     queryFn: () => y.request(
-      C(`/items/${r}`, {
+      q(`/items/${r}`, {
         filter: Y,
         picker: "1",
         limit: 200,
@@ -102,10 +103,10 @@ function tt({
     ).then((e) => e.data ?? []),
     enabled: !!r && _.length > 0,
     staleTime: 3e4
-  }), Z = new Set((m ?? []).map((e) => String(e.id))), $ = m !== void 0 ? new Set(_.filter((e) => !Z.has(e))) : /* @__PURE__ */ new Set(), I = new Set(B.map(String)), A = /* @__PURE__ */ new Set([...p, ...I]), F = me(J);
-  F.current = J, ue(() => {
+  }), Z = new Set((m ?? []).map((e) => String(e.id))), $ = m !== void 0 ? new Set(_.filter((e) => !Z.has(e))) : /* @__PURE__ */ new Set(), I = new Set(V.map(String)), A = /* @__PURE__ */ new Set([...f, ...I]), j = me(J);
+  j.current = J, ue(() => {
     var e;
-    (e = F.current) == null || e.call(F, A.size);
+    (e = j.current) == null || e.call(j, A.size);
   }, [A.size]);
   function G(e) {
     const i = String(e);
@@ -113,16 +114,16 @@ function tt({
       t == null || t.unstageLink(d, e);
       return;
     }
-    const u = X.find((M) => String(M[x]) === i);
+    const u = X.find((M) => String(M[v]) === i);
     if (u) {
-      g.has(u.id) ? t == null || t.unstageUnlink(d, u.id) : t == null || t.stageUnlink(d, u.id);
+      k.has(u.id) ? t == null || t.unstageUnlink(d, u.id) : t == null || t.stageUnlink(d, u.id);
       return;
     }
     t == null || t.stageLink(d, e);
   }
-  function k(e) {
+  function F(e) {
     const i = (a == null ? void 0 : a.display_template) ?? null;
-    return i ? qe(i, e) : String(e._display ?? e.id ?? "");
+    return i ? Le(i, e) : String(e._display ?? e.id ?? "");
   }
   return K ? /* @__PURE__ */ c(
     "button",
@@ -140,20 +141,20 @@ function tt({
       ]
     }
   ) : /* @__PURE__ */ n("div", { children: /* @__PURE__ */ c(
-    Se,
+    _e,
     {
       open: P,
       onOpenChange: (e) => {
-        q(e), e || T("");
+        C(e), e || T("");
       },
       children: [
-        /* @__PURE__ */ n(_e, { asChild: !0, children: /* @__PURE__ */ c(
+        /* @__PURE__ */ n(qe, { asChild: !0, children: /* @__PURE__ */ c(
           "div",
           {
             role: "button",
             tabIndex: 0,
             onKeyDown: (e) => {
-              (e.key === "Enter" || e.key === " ") && (e.preventDefault(), q((i) => !i));
+              (e.key === "Enter" || e.key === " ") && (e.preventDefault(), C((i) => !i));
             },
             className: "flex min-h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-1 text-sm text-left font-normal hover:bg-muted",
             children: [
@@ -166,7 +167,7 @@ function tt({
                   },
                   children: [
                     U.map((e) => {
-                      const i = e[x], u = $.has(String(i));
+                      const i = e[v], u = $.has(String(i));
                       return /* @__PURE__ */ c(
                         "span",
                         {
@@ -221,7 +222,7 @@ function tt({
                         String(e.id)
                       );
                     }),
-                    B.map((e) => /* @__PURE__ */ c(
+                    V.map((e) => /* @__PURE__ */ c(
                       "span",
                       {
                         className: "inline-flex items-center gap-1 rounded-full border border-dashed border-nvr-cyan/50 bg-nvr-cyan/5 pl-2.5 pr-1.5 py-0.5 text-[12px] text-slate-600 dark:text-slate-300",
@@ -255,24 +256,24 @@ function tt({
             ]
           }
         ) }),
-        /* @__PURE__ */ n(Ce, { className: "w-[320px] p-0", align: "start", children: /* @__PURE__ */ c(xe, { shouldFilter: !1, children: [
+        /* @__PURE__ */ n(Ce, { className: "w-[320px] p-0", align: "start", children: /* @__PURE__ */ c(ve, { shouldFilter: !1, children: [
           /* @__PURE__ */ n(
-            ve,
+            ge,
             {
               placeholder: "Search…",
-              value: L,
+              value: x,
               onValueChange: T,
               className: "h-9 text-[13px]"
             }
           ),
-          /* @__PURE__ */ c(ge, { children: [
-            V ? /* @__PURE__ */ n("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ n(ae, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : /* @__PURE__ */ n(ke, { className: "py-3 text-left text-[12px] text-muted-foreground px-3", children: "No results" }),
-            /* @__PURE__ */ n(we, { children: !V && (v ? [...O] : [...O].sort(
-              (e, i) => b === "-label" ? k(i).localeCompare(k(e)) : k(e).localeCompare(k(i))
+          /* @__PURE__ */ c(ke, { children: [
+            B ? /* @__PURE__ */ n("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ n(ae, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : /* @__PURE__ */ n(we, { className: "py-3 text-left text-[12px] text-muted-foreground px-3", children: "No results" }),
+            /* @__PURE__ */ n(Ne, { children: !B && (g ? [...O] : [...O].sort(
+              (e, i) => he(F(e), F(i), x, b === "-label")
             )).map((e) => {
               const i = String(e.id), u = A.has(i);
               return /* @__PURE__ */ c(
-                Ne,
+                Se,
                 {
                   value: i,
                   onSelect: () => G(e.id),
@@ -289,11 +290,11 @@ function tt({
                       }
                     ),
                     r === "nivaro_users" && /* @__PURE__ */ n(
-                      ye,
+                      xe,
                       {
                         userId: i,
                         className: "h-4 w-4",
-                        fallback: /* @__PURE__ */ n("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-nvr-cyan/20 text-[8px] font-bold text-nvr-navy dark:text-nvr-cyan", children: je(k(e)) })
+                        fallback: /* @__PURE__ */ n("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-nvr-cyan/20 text-[8px] font-bold text-nvr-navy dark:text-nvr-cyan", children: Fe(F(e)) })
                       }
                     ),
                     r === "nivaro_users" && E.has(i.toUpperCase()) && /* @__PURE__ */ n(
@@ -303,7 +304,7 @@ function tt({
                         "data-tip": "Online now"
                       }
                     ),
-                    /* @__PURE__ */ n("span", { className: "truncate", children: k(e) })
+                    /* @__PURE__ */ n("span", { className: "truncate", children: F(e) })
                   ]
                 },
                 i
@@ -315,7 +316,7 @@ function tt({
     }
   ) });
 }
-function nt({
+function rt({
   relation: s,
   parentId: o,
   allRelations: N,
@@ -325,44 +326,44 @@ function nt({
   onCountChange: J,
   readOnly: D
 }) {
-  const y = fe(), W = Ae(), t = Le(), [P, q] = ne(!1), [L, T] = ne(""), le = N.find(
+  const y = fe(), W = Ke(), t = je(), [P, C] = ne(!1), [x, T] = ne(""), le = N.find(
     (l) => l.many_collection === s.many_collection && l.many_field === s.junction_field && l.id !== s.id
-  ), r = Te(le), x = s.junction_field ?? "", R = s.many_field ?? "", d = s.one_field ?? `${s.many_collection}.${x}`, { data: a } = w({
+  ), r = Oe(le), v = s.junction_field ?? "", R = s.many_field ?? "", d = s.one_field ?? `${s.many_collection}.${v}`, { data: a } = w({
     queryKey: ["col-meta", r],
-    queryFn: () => y.request(C(`/collections/${r}`)).then((l) => l.data),
+    queryFn: () => y.request(q(`/collections/${r}`)).then((l) => l.data),
     enabled: !!r,
     staleTime: 3e5,
     retry: !1
   }), { data: X = [], isFetching: re } = w({
     queryKey: ["m2m-items", s.many_collection, R, o],
     queryFn: () => y.request(
-      C(`/items/${s.many_collection}`, {
+      q(`/items/${s.many_collection}`, {
         filter: JSON.stringify({ [R]: { _eq: o } }),
         limit: 1,
-        fields: `id,${x}`
+        fields: `id,${v}`
       })
     ).then((l) => l.data ?? []),
     staleTime: 3e4,
     enabled: !!o && o !== "new"
-  }), z = pe().isAdmin, E = r === "nivaro_users" ? be(z) : null, H = he(r === "nivaro_users"), j = h ? E ? { _and: [h, E] } : h : E, v = j ? JSON.stringify(j) : void 0, S = b && !/^-?label$/.test(b) ? b : void 0, O = (() => {
+  }), z = pe().isAdmin, E = r === "nivaro_users" ? ye(z) : null, H = be(r === "nivaro_users"), L = h ? E ? { _and: [h, E] } : h : E, g = L ? JSON.stringify(L) : void 0, S = b && !/^-?label$/.test(b) ? b : void 0, O = (() => {
     const l = a == null ? void 0 : a.display_template;
     if (!l || !l.includes(".")) return null;
-    const f = [...l.matchAll(/\{\{([^}]+)\}\}/g)].map((ee) => ee[1].trim());
-    return f.length === 0 ? null : ["id", ...f].join(",");
-  })(), { data: V = [], isFetching: B } = w({
+    const p = [...l.matchAll(/\{\{([^}]+)\}\}/g)].map((ee) => ee[1].trim());
+    return p.length === 0 ? null : ["id", ...p].join(",");
+  })(), { data: B = [], isFetching: V } = w({
     queryKey: [
       "m2m-options",
       r,
-      L,
-      v,
+      x,
+      g,
       S ?? "",
       O ?? ""
     ],
     queryFn: () => y.request(
-      C(`/items/${r}`, {
+      q(`/items/${r}`, {
         limit: 200,
-        search: L || void 0,
-        filter: v,
+        search: x || void 0,
+        filter: g,
         picker: "1",
         // A dotted display template ({{core_category.name}}) needs the
         // nested expansion — a bare row only carries the FK id.
@@ -371,8 +372,8 @@ function nt({
       })
     ).then((l) => l.data ?? []),
     enabled: P && !!r,
-    staleTime: v ? 0 : 3e4
-  }), g = (t == null ? void 0 : t.getStagedLinks(d)) ?? [], U = (t == null ? void 0 : t.getStagedUnlinks(d)) ?? /* @__PURE__ */ new Set(), p = X.find((l) => !U.has(l.id)) ?? null, _ = p ? p[x] : null, Y = g.length > 0 ? g[g.length - 1] : null, m = Y ?? _, Z = g.length > 0 || U.size > 0, $ = me(J);
+    staleTime: g ? 0 : 3e4
+  }), k = (t == null ? void 0 : t.getStagedLinks(d)) ?? [], U = (t == null ? void 0 : t.getStagedUnlinks(d)) ?? /* @__PURE__ */ new Set(), f = X.find((l) => !U.has(l.id)) ?? null, _ = f ? f[v] : null, Y = k.length > 0 ? k[k.length - 1] : null, m = Y ?? _, Z = k.length > 0 || U.size > 0, $ = me(J);
   $.current = J, ue(() => {
     var l;
     (l = $.current) == null || l.call($, m != null ? 1 : 0);
@@ -382,10 +383,10 @@ function nt({
     queryFn: () => W(r, m),
     enabled: !!r && m != null,
     staleTime: 6e4
-  }), A = JSON.stringify(h ? { _and: [{ id: { _eq: m } }, h] } : { id: { _eq: m } }), { data: F } = w({
-    queryKey: ["relation-avail", r, String(m), v],
+  }), A = JSON.stringify(h ? { _and: [{ id: { _eq: m } }, h] } : { id: { _eq: m } }), { data: j } = w({
+    queryKey: ["relation-avail", r, String(m), g],
     queryFn: () => y.request(
-      C(`/items/${r}`, {
+      q(`/items/${r}`, {
         filter: A,
         picker: "1",
         limit: 1,
@@ -394,20 +395,20 @@ function nt({
     ).then((l) => l.data ?? []),
     enabled: !!r && m != null && !!I,
     staleTime: 3e4
-  }), G = F !== void 0 && F.length === 0, k = Ke(G), e = (a == null ? void 0 : a.display_template) ?? null;
+  }), G = j !== void 0 && j.length === 0, F = Je(G), e = (a == null ? void 0 : a.display_template) ?? null;
   function i(l) {
-    return e ? qe(e, l) : String(l.name ?? l.title ?? l.label ?? l.id ?? "");
+    return e ? Le(e, l) : String(l.name ?? l.title ?? l.label ?? l.id ?? "");
   }
-  const u = V.find((l) => String(l.id) === String(m)) ?? I, M = m != null && !I && !u, se = u ? i(u) : null;
+  const u = B.find((l) => String(l.id) === String(m)) ?? I, M = m != null && !I && !u, se = u ? i(u) : null;
   if (D)
     return /* @__PURE__ */ n("span", { className: "block truncate text-[12px] text-slate-700 dark:text-slate-200", children: M ? "…" : se ?? "—" });
-  function Oe(l) {
-    for (const f of g) t == null || t.unstageLink(d, f);
-    p && !U.has(p.id) && (t == null || t.stageUnlink(d, p.id)), String(l) === String(_) && p ? t == null || t.unstageUnlink(d, p.id) : String(l) !== String(m) && (t == null || t.stageLink(d, l)), q(!1), T("");
+  function Ue(l) {
+    for (const p of k) t == null || t.unstageLink(d, p);
+    f && !U.has(f.id) && (t == null || t.stageUnlink(d, f.id)), String(l) === String(_) && f ? t == null || t.unstageUnlink(d, f.id) : String(l) !== String(m) && (t == null || t.stageLink(d, l)), C(!1), T("");
   }
-  function Ue() {
-    for (const l of g) t == null || t.unstageLink(d, l);
-    p && (t == null || t.stageUnlink(d, p.id)), q(!1);
+  function $e() {
+    for (const l of k) t == null || t.unstageLink(d, l);
+    f && (t == null || t.stageUnlink(d, f.id)), C(!1);
   }
   return K ? /* @__PURE__ */ c(
     "button",
@@ -424,16 +425,16 @@ function nt({
         /* @__PURE__ */ n(te, { className: "h-4 w-4 shrink-0 opacity-50" })
       ]
     }
-  ) : /* @__PURE__ */ c("div", { ...k.bind, children: [
+  ) : /* @__PURE__ */ c("div", { ...F.bind, children: [
     /* @__PURE__ */ c(
-      Se,
+      _e,
       {
         open: P,
         onOpenChange: (l) => {
-          q(l), l || T("");
+          C(l), l || T("");
         },
         children: [
-          /* @__PURE__ */ n(_e, { asChild: !0, children: /* @__PURE__ */ c(
+          /* @__PURE__ */ n(qe, { asChild: !0, children: /* @__PURE__ */ c(
             "button",
             {
               type: "button",
@@ -459,12 +460,12 @@ function nt({
               ]
             }
           ) }),
-          /* @__PURE__ */ n(Ce, { className: "w-[320px] p-0", align: "start", children: /* @__PURE__ */ c(xe, { shouldFilter: !1, children: [
+          /* @__PURE__ */ n(Ce, { className: "w-[320px] p-0", align: "start", children: /* @__PURE__ */ c(ve, { shouldFilter: !1, children: [
             /* @__PURE__ */ n(
-              ve,
+              ge,
               {
                 placeholder: "Search…",
-                value: L,
+                value: x,
                 onValueChange: T,
                 className: "h-9 text-[12px]"
               }
@@ -474,7 +475,7 @@ function nt({
               {
                 type: "button",
                 onClick: () => {
-                  Ue(), q(!1);
+                  $e(), C(!1);
                 },
                 className: "flex w-full items-center gap-2 px-3 py-1.5 text-[13px] text-slate-500 hover:bg-muted border-b border-slate-100 dark:text-slate-400 dark:border-border",
                 children: [
@@ -483,17 +484,17 @@ function nt({
                 ]
               }
             ),
-            /* @__PURE__ */ c(ge, { children: [
-              B ? /* @__PURE__ */ n("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ n(ae, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : /* @__PURE__ */ n(ke, { className: "py-3 text-left text-[12px] text-muted-foreground px-3", children: "No results" }),
-              !B && /* @__PURE__ */ n(we, { children: [...V].sort(
-                (l, f) => S ? 0 : b === "-label" ? i(f).localeCompare(i(l)) : i(l).localeCompare(i(f))
+            /* @__PURE__ */ c(ke, { children: [
+              V ? /* @__PURE__ */ n("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ n(ae, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : /* @__PURE__ */ n(we, { className: "py-3 text-left text-[12px] text-muted-foreground px-3", children: "No results" }),
+              !V && /* @__PURE__ */ n(Ne, { children: [...B].sort(
+                (l, p) => S ? 0 : he(i(l), i(p), x, b === "-label")
               ).map((l) => {
-                const f = String(l.id), ee = String(m) === f;
+                const p = String(l.id), ee = String(m) === p;
                 return /* @__PURE__ */ c(
-                  Ne,
+                  Se,
                   {
-                    value: f,
-                    onSelect: () => Oe(l.id),
+                    value: p,
+                    onSelect: () => Ue(l.id),
                     className: "flex items-center gap-2 text-[12px]",
                     children: [
                       /* @__PURE__ */ n(
@@ -507,14 +508,14 @@ function nt({
                         }
                       ),
                       r === "nivaro_users" && /* @__PURE__ */ n(
-                        ye,
+                        xe,
                         {
-                          userId: f,
+                          userId: p,
                           className: "h-4 w-4",
-                          fallback: /* @__PURE__ */ n("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-nvr-cyan/20 text-[8px] font-bold text-nvr-navy dark:text-nvr-cyan", children: je(i(l)) })
+                          fallback: /* @__PURE__ */ n("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-nvr-cyan/20 text-[8px] font-bold text-nvr-navy dark:text-nvr-cyan", children: Fe(i(l)) })
                         }
                       ),
-                      r === "nivaro_users" && H.has(f.toUpperCase()) && /* @__PURE__ */ n(
+                      r === "nivaro_users" && H.has(p.toUpperCase()) && /* @__PURE__ */ n(
                         "span",
                         {
                           className: "h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500",
@@ -524,7 +525,7 @@ function nt({
                       /* @__PURE__ */ n("span", { className: "truncate", children: i(l) })
                     ]
                   },
-                  f
+                  p
                 );
               }) })
             ] })
@@ -532,12 +533,12 @@ function nt({
         ]
       }
     ),
-    k.tip
+    F.tip
   ] });
 }
 export {
-  tt as M2MCombobox,
-  nt as M2MSingleSelectCombobox,
-  et as m2aWriteMeta,
-  Te as resolveM2MRelatedCollection
+  lt as M2MCombobox,
+  rt as M2MSingleSelectCombobox,
+  nt as m2aWriteMeta,
+  Oe as resolveM2MRelatedCollection
 };

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

@@ -1,30 +1,31 @@
 import { jsxs as c, jsx as n } from "react/jsx-runtime";
-import { useQuery as k } from "@tanstack/react-query";
+import { useQuery as S } from "@tanstack/react-query";
 import { ChevronDown as Se, Loader2 as Q, AlertTriangle as Ue, Search as Ae, X as Me, Check as qe } from "lucide-react";
-import { useState as C, useRef as Z, useEffect as O, useLayoutEffect as De, useMemo as I } from "react";
+import { useState as $, useRef as Z, useEffect as O, useLayoutEffect as De, useMemo as I } from "react";
 import { createPortal as _e } from "react-dom";
 import { useNivaroClient as ie, useItemEditAuth as Je, useStaleFieldReporter as ze } from "../../context.js";
 import { get as j, post as He } from "../../lib/commands.js";
-import { useRecordReader as Ce } from "../../lib/record-loader.js";
-import { useOnlineUsers as Ye } from "../../lib/use-online-users.js";
-import { UserAvatar as We } from "../UserAvatar.js";
-import { userOptionFilter as Xe, cn as D } from "../../lib/utils.js";
-import { applyDisplayTemplate as v } from "./helpers.js";
-import { collidingIds as Ge, disambiguators as Ve } from "./option-disambiguate.js";
-import { usePickerMissReport as Ze } from "./picker-miss.js";
-import { useLatestSearch as Qe, narrowLocally as Be } from "./picker-search.js";
-function et(o) {
-  return o.replace(/\(.*$/, "").trim().split(/\s+/).map((r) => r[0]).filter(Boolean).slice(0, 2).join("").toUpperCase() || "?";
+import { compareByMatch as Ye } from "../../lib/picker-rank.js";
+import { useRecordReader as $e } from "../../lib/record-loader.js";
+import { useOnlineUsers as We } from "../../lib/use-online-users.js";
+import { UserAvatar as Xe } from "../UserAvatar.js";
+import { userOptionFilter as Ge, cn as D } from "../../lib/utils.js";
+import { applyDisplayTemplate as k } from "./helpers.js";
+import { collidingIds as Ve, disambiguators as Ze } from "./option-disambiguate.js";
+import { usePickerMissReport as Qe } from "./picker-miss.js";
+import { useLatestSearch as Be, narrowLocally as et } from "./picker-search.js";
+function tt(s) {
+  return s.replace(/\(.*$/, "").trim().split(/\s+/).map((r) => r[0]).filter(Boolean).slice(0, 2).join("").toUpperCase() || "?";
 }
-function tt(o) {
-  const [r, d] = C(null), y = {
-    onMouseEnter: (g) => {
-      if (!o) return;
-      const m = g.currentTarget.getBoundingClientRect(), u = window.innerHeight - m.bottom < 80;
+function rt(s) {
+  const [r, d] = $(null), x = {
+    onMouseEnter: (h) => {
+      if (!s) return;
+      const m = h.currentTarget.getBoundingClientRect(), u = window.innerHeight - m.bottom < 80;
       d({ x: m.left, y: u ? m.top - 58 : m.bottom + 4 });
     },
     onMouseLeave: () => d(null)
-  }, S = o && r ? _e(
+  }, q = s && r ? _e(
     /* @__PURE__ */ n(
       "div",
       {
@@ -35,49 +36,49 @@ function tt(o) {
     ),
     document.body
   ) : null;
-  return { bind: y, tip: S };
+  return { bind: x, tip: q };
 }
-function rt({
-  collection: o,
+function nt({
+  collection: s,
   value: r,
   onChange: d,
-  disabled: y,
-  placeholder: S,
-  extraFilter: g,
+  disabled: x,
+  placeholder: q,
+  extraFilter: h,
   autoSelectSingle: m,
   optionSort: u,
   requiredParent: R,
   facets: i,
-  fieldKey: $,
+  fieldKey: C,
   narrowedBy: l,
   pinned: p,
-  missPlacement: q
+  missPlacement: _
 }) {
-  const F = ie(), ae = Ce(), [w, K] = C(!1), [_, le] = C(""), [$e, Le] = C(!1), L = Qe(_, $e), de = Z(null), J = Z(null);
+  const F = ie(), ae = $e(), [y, K] = $(!1), [N, le] = $(""), [Ce, Le] = $(!1), L = Be(N, Ce), de = Z(null), J = Z(null);
   O(() => {
-    w ? setTimeout(() => {
+    y ? setTimeout(() => {
       var e;
       return (e = de.current) == null ? void 0 : e.focus();
     }, 30) : le("");
-  }, [w]), O(() => {
-    if (!w) return;
-    const e = (s) => {
+  }, [y]), O(() => {
+    if (!y) return;
+    const e = (o) => {
       var a;
-      const t = s.target;
-      (a = t == null ? void 0 : t.closest) != null && a.call(t, "[data-nvr-combobox-panel]") || J.current && !J.current.contains(s.target) && K(!1);
+      const t = o.target;
+      (a = t == null ? void 0 : t.closest) != null && a.call(t, "[data-nvr-combobox-panel]") || J.current && !J.current.contains(o.target) && K(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [w]);
-  const [ce, B] = C(null), [ue, je] = C(null);
+  }, [y]);
+  const [ce, B] = $(null), [ue, je] = $(null);
   De(() => {
-    if (!w) {
+    if (!y) {
       B(null);
       return;
     }
     const e = () => {
-      const s = J.current;
-      if (!s) return;
-      const t = s.getBoundingClientRect(), a = s.closest('[role="dialog"]') ?? document.body;
+      const o = J.current;
+      if (!o) return;
+      const t = o.getBoundingClientRect(), a = o.closest('[role="dialog"]') ?? document.body;
       je(a);
       const ye = window.innerHeight - t.bottom < 340 && t.top > window.innerHeight - t.bottom, we = t.left, ve = ye ? t.top - 4 : t.bottom + 4, Ne = {
         minWidth: t.width,
@@ -94,104 +95,104 @@ function rt({
     return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
       window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
     };
-  }, [w]);
-  const { data: ee, isPending: Re } = k({
-    queryKey: ["col-meta", o],
-    queryFn: () => F.request(j(`/collections/${o}`)).then((e) => e.data),
+  }, [y]);
+  const { data: ee, isPending: Re } = S({
+    queryKey: ["col-meta", s],
+    queryFn: () => F.request(j(`/collections/${s}`)).then((e) => e.data),
     staleTime: 3e5,
     retry: !1
-  }), [te, Fe] = C({}), { data: me = [] } = k({
-    queryKey: ["collection-meta", o],
+  }), [te, Fe] = $({}), { data: me = [] } = S({
+    queryKey: ["collection-meta", s],
     queryFn: () => F.request(
-      j(`/collections/${o}`)
+      j(`/collections/${s}`)
     ).then(
       (e) => {
-        var s;
-        return ((s = e.data) == null ? void 0 : s.relations) ?? [];
+        var o;
+        return ((o = e.data) == null ? void 0 : o.relations) ?? [];
       }
     ),
     enabled: !!(i != null && i.length),
     staleTime: 10 * 6e4
   }), Te = I(() => {
     const e = {};
-    for (const s of i ?? []) {
+    for (const o of i ?? []) {
       const t = me.find(
-        (a) => a.many_collection === o && a.many_field === s.field && !a.junction_field
+        (a) => a.many_collection === s && a.many_field === o.field && !a.junction_field
       );
-      t != null && t.one_collection && (e[s.field] = t.one_collection);
+      t != null && t.one_collection && (e[o.field] = t.one_collection);
     }
     return e;
-  }, [i, me, o]), T = o === "nivaro_users", Ee = Ye(T), pe = Je().isAdmin, re = I(() => {
+  }, [i, me, s]), T = s === "nivaro_users", Ee = We(T), pe = Je().isAdmin, re = I(() => {
     const e = [];
-    T && e.push(Xe(pe)), g && e.push(g);
-    for (const [s, t] of Object.entries(te))
-      t != null && t !== "" && e.push({ [s]: { _eq: t } });
+    T && e.push(Ge(pe)), h && e.push(h);
+    for (const [o, t] of Object.entries(te))
+      t != null && t !== "" && e.push({ [o]: { _eq: t } });
     if (e.length !== 0)
       return e.length === 1 ? e[0] : { _and: e };
-  }, [g, te, pe]), z = (ee == null ? void 0 : ee.display_template) ?? (T ? "{{first_name}} {{last_name}} ({{email}})" : null), b = I(() => {
+  }, [h, te, pe]), z = (ee == null ? void 0 : ee.display_template) ?? (T ? "{{first_name}} {{last_name}} ({{email}})" : null), g = I(() => {
     if (!z) return;
-    const e = [...z.matchAll(/\{\{([\w.]+)\}\}/g)].map((s) => s[1]);
+    const e = [...z.matchAll(/\{\{([\w.]+)\}\}/g)].map((o) => o[1]);
     if (e.length)
       return ["id", ...e].join(",");
-  }, [z]), N = re ? JSON.stringify(re) : void 0, P = u && !/^-?label$/.test(u) ? u : void 0, {
+  }, [z]), v = re ? JSON.stringify(re) : void 0, P = u && !/^-?label$/.test(u) ? u : void 0, {
     data: f,
     isFetching: E,
     isPlaceholderData: fe
-  } = k({
+  } = S({
     queryKey: [
       "relation-opts",
-      o,
+      s,
       L,
-      N,
-      b,
+      v,
+      g,
       P ?? ""
     ],
     queryFn: () => F.request(
-      j(`/items/${o}`, {
+      j(`/items/${s}`, {
         limit: 200,
         picker: "1",
         ...L ? { search: L } : {},
-        ...N ? { filter: N } : {},
-        ...b ? { fields: b } : {},
+        ...v ? { filter: v } : {},
+        ...g ? { fields: g } : {},
         ...P ? { sort: P } : {}
       })
     ).then((e) => e.data ?? []),
     // Wait for the display template: it decides `fields`, and starting before
     // it lands sent the whole first page twice.
-    enabled: w && !Re,
-    staleTime: N ? 0 : 3e4,
+    enabled: y && !Re,
+    staleTime: v ? 0 : 3e4,
     // A new SEARCH keeps the previous answer on screen (narrowed locally below)
     // instead of blanking the list behind a spinner. A changed filter, sort or
     // template never does — those rows may no longer be allowed.
-    placeholderData: (e, s) => {
-      const t = s == null ? void 0 : s.queryKey;
+    placeholderData: (e, o) => {
+      const t = o == null ? void 0 : o.queryKey;
       if (!(!e || !t))
-        return t[1] === o && t[3] === N && t[4] === b && t[5] === (P ?? "") ? e : void 0;
+        return t[1] === s && t[3] === v && t[4] === g && t[5] === (P ?? "") ? e : void 0;
     }
   });
-  O(() => Le(E), [E]), Ze({
-    placement: q,
-    open: w,
+  O(() => Le(E), [E]), Qe({
+    placement: _,
+    open: y,
     search: L,
     settled: !E && !fe && f !== void 0,
     count: (f == null ? void 0 : f.length) ?? 0
   });
-  const { data: H, isLoading: Oe } = k({
-    queryKey: ["relation-single", o, String(r), b],
-    queryFn: () => ae(o, r, b),
+  const { data: H, isLoading: Oe } = S({
+    queryKey: ["relation-single", s, String(r), g],
+    queryFn: () => ae(s, r, g),
     enabled: !!r,
     staleTime: 6e4
-  }), x = (p == null ? void 0 : p.id) != null && p.id !== "" ? String(p.id) : null, { data: U } = k({
-    queryKey: ["relation-single", o, x ?? "", b],
-    queryFn: () => ae(o, x, b).catch(
+  }), b = (p == null ? void 0 : p.id) != null && p.id !== "" ? String(p.id) : null, { data: U } = S({
+    queryKey: ["relation-single", s, b ?? "", g],
+    queryFn: () => ae(s, b, g).catch(
       () => null
     ),
-    enabled: !!x && w,
+    enabled: !!b && y,
     staleTime: 6e4
-  }), Ie = JSON.stringify(g ? { _and: [{ id: { _eq: r } }, g] } : { id: { _eq: r } }), { data: Y } = k({
-    queryKey: ["relation-avail", o, String(r), N],
+  }), Ie = JSON.stringify(h ? { _and: [{ id: { _eq: r } }, h] } : { id: { _eq: r } }), { data: Y } = S({
+    queryKey: ["relation-avail", s, String(r), v],
     queryFn: () => F.request(
-      j(`/items/${o}`, {
+      j(`/items/${s}`, {
         filter: Ie,
         picker: "1",
         limit: 1,
@@ -201,74 +202,74 @@ function rt({
     // The pinned option is offered OUTSIDE the option filter (a type's generic
     // item is excluded from the general list on purpose), so a value that IS
     // the pin is available by construction — never probe it, never flag it.
-    enabled: !!r && !!H && String(r) !== x,
+    enabled: !!r && !!H && String(r) !== b,
     staleTime: 3e4
-  }), A = !!r && String(r) !== x && Y !== void 0 && Y.length === 0, W = Z(null), ne = Z(!1), he = `${o}|${N ?? ""}`, Ke = () => {
+  }), A = !!r && String(r) !== b && Y !== void 0 && Y.length === 0, W = Z(null), ne = Z(!1), he = `${s}|${v ?? ""}`, Ke = () => {
     ne.current = !0, W.current = he, d(null);
   }, X = r == null || r === "";
   O(() => {
     X || (ne.current = !1);
   }, [X]), O(() => {
-    if (!m || y || !X || ne.current) return;
+    if (!m || x || !X || ne.current) return;
     const e = he;
     W.current !== e && (W.current = e, F.request(
-      j(`/items/${o}`, {
+      j(`/items/${s}`, {
         limit: 2,
         picker: "1",
         fields: "id",
-        ...N ? { filter: N } : {}
+        ...v ? { filter: v } : {}
       })
-    ).then((s) => {
+    ).then((o) => {
       var a;
-      const t = s.data ?? [];
+      const t = o.data ?? [];
       t.length === 1 && ((a = t[0]) == null ? void 0 : a.id) != null && d(t[0].id);
     }).catch(() => {
       W.current = null;
     }));
-  }, [m, y, X, o, N]);
-  const h = z, ge = r && H ? v(h, H) : null, se = !fe && _ === L, G = I(
-    () => Be(
+  }, [m, x, X, s, v]);
+  const w = z, ge = r && H ? k(w, H) : null, se = !fe && N === L, G = I(
+    () => et(
       f ?? [],
-      (e) => v(h, e) || `#${e.id}`,
-      _,
+      (e) => k(w, e) || `#${e.id}`,
+      N,
       se
     ),
-    [f, h, _, se]
+    [f, w, N, se]
   ), V = I(
-    () => Ge(f ?? [], (e) => v(h, e) || `#${e.id}`),
-    [f, h]
-  ), { data: M } = k({
-    queryKey: ["relation-opts-dups", o, V.join(",")],
+    () => Ve(f ?? [], (e) => k(w, e) || `#${e.id}`),
+    [f, w]
+  ), { data: M } = S({
+    queryKey: ["relation-opts-dups", s, V.join(",")],
     queryFn: () => F.request(
-      j(`/items/${o}`, {
+      j(`/items/${s}`, {
         limit: V.length,
         picker: "1",
         filter: JSON.stringify({ id: { _in: V } }),
         fields: "*"
       })
     ).then((e) => e.data ?? []),
-    enabled: w && V.length > 0 && !T,
+    enabled: y && V.length > 0 && !T,
     staleTime: 6e4
   }), be = I(() => {
     if (!(M != null && M.length)) return /* @__PURE__ */ new Map();
     const e = new Map(
       (f ?? []).map((t) => [
         String(t.id),
-        (v(h, t) || `#${t.id}`).trim().toLowerCase()
+        (k(w, t) || `#${t.id}`).trim().toLowerCase()
       ])
-    ), s = /* @__PURE__ */ new Map();
+    ), o = /* @__PURE__ */ new Map();
     for (const t of M) {
       const a = e.get(String(t.id));
-      a !== void 0 && s.set(a, [...s.get(a) ?? [], t]);
+      a !== void 0 && o.set(a, [...o.get(a) ?? [], t]);
     }
-    return Ve(
-      [...s.values()],
-      ((b == null ? void 0 : b.split(",")) ?? []).map((t) => t.split(".")[0])
+    return Ze(
+      [...o.values()],
+      ((g == null ? void 0 : g.split(",")) ?? []).map((t) => t.split(".")[0])
     );
-  }, [M, f, h, b]), Pe = !!r && Oe && !H, xe = tt(A), oe = ze();
+  }, [M, f, w, g]), Pe = !!r && Oe && !H, xe = rt(A), oe = ze();
   return O(() => {
-    !oe || !$ || Y === void 0 || oe($, A);
-  }, [oe, $, A, Y]), R ? /* @__PURE__ */ c(
+    !oe || !C || Y === void 0 || oe(C, A);
+  }, [oe, C, A, Y]), R ? /* @__PURE__ */ c(
     "button",
     {
       type: "button",
@@ -291,7 +292,7 @@ function rt({
         "button",
         {
           type: "button",
-          disabled: y,
+          disabled: x,
           onClick: () => K((e) => !e),
           className: D(
             "flex h-9 w-full items-center justify-between gap-2 rounded-md border bg-background px-3 text-sm text-left hover:bg-muted disabled:pointer-events-none disabled:opacity-50",
@@ -307,7 +308,7 @@ function rt({
                 ),
                 children: [
                   A && /* @__PURE__ */ n(Ue, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" }),
-                  /* @__PURE__ */ n("span", { className: "truncate", children: ge ?? S ?? "Select…" })
+                  /* @__PURE__ */ n("span", { className: "truncate", children: ge ?? q ?? "Select…" })
                 ]
               }
             ),
@@ -316,7 +317,7 @@ function rt({
         }
       ),
       xe.tip,
-      w && ce && ue && _e(
+      y && ce && ue && _e(
         /* @__PURE__ */ c(
           "div",
           {
@@ -328,13 +329,13 @@ function rt({
             ),
             children: [
               !!(i != null && i.length) && /* @__PURE__ */ n("div", { className: "grid grid-cols-2 gap-2 border-b border-border bg-slate-50/60 p-2 dark:bg-muted/40", children: i.map((e) => {
-                const s = Te[e.field];
-                return s ? /* @__PURE__ */ c("div", { children: [
+                const o = Te[e.field];
+                return o ? /* @__PURE__ */ c("div", { children: [
                   /* @__PURE__ */ n("p", { className: "mb-0.5 text-[10px] font-medium uppercase tracking-wide text-slate-400", children: e.label ?? e.field }),
                   /* @__PURE__ */ n(
-                    rt,
+                    nt,
                     {
-                      collection: s,
+                      collection: o,
                       value: te[e.field] ?? null,
                       onChange: (t) => Fe((a) => ({ ...a, [e.field]: t })),
                       placeholder: "Any",
@@ -350,7 +351,7 @@ function rt({
                   "input",
                   {
                     ref: de,
-                    value: _,
+                    value: N,
                     onChange: (e) => le(e.target.value),
                     placeholder: "Search…",
                     className: "flex h-9 w-full bg-transparent py-3 text-[13px] outline-none placeholder:text-muted-foreground"
@@ -365,7 +366,7 @@ function rt({
                 )
               ] }),
               /* @__PURE__ */ c("div", { className: "max-h-52 overflow-y-auto py-1", children: [
-                !!r && !y && /* @__PURE__ */ c(
+                !!r && !x && /* @__PURE__ */ c(
                   "button",
                   {
                     type: "button",
@@ -379,7 +380,7 @@ function rt({
                     ]
                   }
                 ),
-                x && /* @__PURE__ */ c(
+                b && /* @__PURE__ */ c(
                   "button",
                   {
                     type: "button",
@@ -394,24 +395,24 @@ function rt({
                         {
                           className: D(
                             "flex h-4 w-4 shrink-0 items-center justify-center rounded-full border transition-colors",
-                            String(r) === x ? "border-nvr-cyan bg-nvr-cyan" : "border-slate-300"
+                            String(r) === b ? "border-nvr-cyan bg-nvr-cyan" : "border-slate-300"
                           ),
-                          children: String(r) === x && /* @__PURE__ */ n(qe, { className: "h-2.5 w-2.5 text-white" })
+                          children: String(r) === b && /* @__PURE__ */ n(qe, { className: "h-2.5 w-2.5 text-white" })
                         }
                       ),
-                      /* @__PURE__ */ n("span", { className: "min-w-0 flex-1 truncate", children: U ? v(h, U) || `#${x}` : `#${x}` }),
+                      /* @__PURE__ */ n("span", { className: "min-w-0 flex-1 truncate", children: U ? k(w, U) || `#${b}` : `#${b}` }),
                       /* @__PURE__ */ n("span", { className: "shrink-0 rounded bg-nvr-cyan/15 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-slate-700 dark:text-foreground", children: (p == null ? void 0 : p.tag) ?? "Default" })
                     ]
                   }
                 ),
-                f === void 0 && E ? /* @__PURE__ */ n("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ n(Q, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : G.length === 0 && !se ? /* @__PURE__ */ n("p", { className: "px-3 py-2 text-[13px] text-muted-foreground", children: "Searching…" }) : G.length === 0 ? l && l.labels.length > 0 && !_.trim() ? /* @__PURE__ */ c("div", { className: "px-3 py-2 text-[12px] leading-5 text-muted-foreground", children: [
+                f === void 0 && E ? /* @__PURE__ */ n("div", { className: "flex items-center justify-center py-4", children: /* @__PURE__ */ n(Q, { className: "h-4 w-4 animate-spin text-muted-foreground" }) }) : G.length === 0 && !se ? /* @__PURE__ */ n("p", { className: "px-3 py-2 text-[13px] text-muted-foreground", children: "Searching…" }) : G.length === 0 ? l && l.labels.length > 0 && !N.trim() ? /* @__PURE__ */ c("div", { className: "px-3 py-2 text-[12px] leading-5 text-muted-foreground", children: [
                   /* @__PURE__ */ c("p", { children: [
                     "No options for",
                     " ",
                     /* @__PURE__ */ n("span", { className: "font-medium text-foreground", children: l.labels.join(" · ") }),
                     l.onClear ? " — clear one to widen the list:" : "."
                   ] }),
-                  l.onClear && /* @__PURE__ */ n("div", { className: "mt-1.5 flex flex-wrap gap-1.5", children: l.keys.map((e, s) => /* @__PURE__ */ c(
+                  l.onClear && /* @__PURE__ */ n("div", { className: "mt-1.5 flex flex-wrap gap-1.5", children: l.keys.map((e, o) => /* @__PURE__ */ c(
                     "button",
                     {
                       type: "button",
@@ -422,15 +423,20 @@ function rt({
                       className: "rounded-md border border-border bg-background px-2 py-0.5 text-[11.5px] font-medium text-foreground transition-colors duration-150 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-nvr-cyan",
                       children: [
                         "Clear ",
-                        l.labels[s] ?? e
+                        l.labels[o] ?? e
                       ]
                     },
                     e
                   )) })
-                ] }) : /* @__PURE__ */ n("p", { className: "px-3 py-2 text-[13px] text-muted-foreground", children: _.trim() ? `No results for “${_.trim()}”` : "No results" }) : (P ? [...G] : [...G].sort(
-                  (e, s) => u === "-label" ? v(h, s).localeCompare(v(h, e)) : v(h, e).localeCompare(v(h, s))
-                )).filter((e) => !x || String(e.id) !== x).map((e) => {
-                  const s = v(h, e) || `#${e.id}`, t = String(e.id) === String(r);
+                ] }) : /* @__PURE__ */ n("p", { className: "px-3 py-2 text-[13px] text-muted-foreground", children: N.trim() ? `No results for “${N.trim()}”` : "No results" }) : (P ? [...G] : [...G].sort(
+                  (e, o) => Ye(
+                    k(w, e),
+                    k(w, o),
+                    N,
+                    u === "-label"
+                  )
+                )).filter((e) => !b || String(e.id) !== b).map((e) => {
+                  const o = k(w, e) || `#${e.id}`, t = String(e.id) === String(r);
                   return /* @__PURE__ */ c(
                     "button",
                     {
@@ -451,11 +457,11 @@ function rt({
                           }
                         ),
                         T && /* @__PURE__ */ n(
-                          We,
+                          Xe,
                           {
                             userId: e.id,
                             className: "h-4 w-4",
-                            fallback: /* @__PURE__ */ n("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-nvr-cyan/20 text-[8px] font-bold text-nvr-navy dark:text-nvr-cyan", children: et(s) })
+                            fallback: /* @__PURE__ */ n("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-nvr-cyan/20 text-[8px] font-bold text-nvr-navy dark:text-nvr-cyan", children: tt(o) })
                           }
                         ),
                         T && Ee.has(String(e.id).toUpperCase()) && /* @__PURE__ */ n(
@@ -465,7 +471,7 @@ function rt({
                             "data-tip": "Online now"
                           }
                         ),
-                        s,
+                        o,
                         be.has(String(e.id)) && /* @__PURE__ */ n(
                           "span",
                           {
@@ -481,9 +487,9 @@ function rt({
                 })
               ] }),
               !E && /* @__PURE__ */ n(
-                nt,
+                st,
                 {
-                  collection: o,
+                  collection: s,
                   search: L,
                   filter: re,
                   narrowedLabels: (l == null ? void 0 : l.labels) ?? [],
@@ -498,41 +504,41 @@ function rt({
     ] })
   );
 }
-function nt({
-  collection: o,
+function st({
+  collection: s,
   search: r,
   filter: d,
-  narrowedLabels: y,
-  auto: S
+  narrowedLabels: x,
+  auto: q
 }) {
-  const g = ie(), [m, u] = C(!1), R = d ? JSON.stringify(d) : "", { data: i, isFetching: $ } = k({
-    queryKey: ["picker-narrowing", o, r, R],
-    queryFn: () => g.request(
-      He("/picker-narrowing", { collection: o, search: r, filter: d ?? null })
-    ).then((q) => q.data),
-    enabled: m || S,
+  const h = ie(), [m, u] = $(!1), R = d ? JSON.stringify(d) : "", { data: i, isFetching: C } = S({
+    queryKey: ["picker-narrowing", s, r, R],
+    queryFn: () => h.request(
+      He("/picker-narrowing", { collection: s, search: r, filter: d ?? null })
+    ).then((_) => _.data),
+    enabled: m || q,
     staleTime: 3e4,
     retry: !1
   });
-  if (!m && !S)
+  if (!m && !q)
     return /* @__PURE__ */ n(
       "button",
       {
         type: "button",
-        onClick: (q) => {
-          q.stopPropagation(), u(!0);
+        onClick: (_) => {
+          _.stopPropagation(), u(!0);
         },
         className: "w-full border-t border-border px-3 py-1.5 text-left text-[11px] text-muted-foreground hover:text-foreground",
         "data-picker-narrowing-ask": !0,
         children: "Missing something?"
       }
     );
-  if ($ && !i)
+  if (C && !i)
     return /* @__PURE__ */ n("p", { className: "border-t border-border px-3 py-1.5 text-[11px] text-muted-foreground", children: "Checking what narrows this list…" });
   if (!i) return null;
   const l = [], p = r ? `match “${r}”` : "exist";
   return i.by_field_filter > 0 && l.push(
-    `${i.by_field_filter.toLocaleString()} more ${p} but this field only offers ${y.length ? `records that fit ${y.join(" · ")}` : "records its filter allows"}.`
+    `${i.by_field_filter.toLocaleString()} more ${p} but this field only offers ${x.length ? `records that fit ${x.join(" · ")}` : "records its filter allows"}.`
   ), i.by_exclusions > 0 && l.push(
     `${i.by_exclusions.toLocaleString()} ${i.by_exclusions === 1 ? "is" : "are"} hidden from pickers by an admin.`
   ), i.scopes.length > 0 && l.push(`Your ${i.scopes.join(", ")} access narrows what you can pick here.`), i.row_filter && l.push("Your role only sees some of these records."), l.length === 0 && l.push(
@@ -544,42 +550,42 @@ function nt({
       "data-picker-narrowing": !0,
       "data-picker-narrowing-field": i.by_field_filter,
       "data-picker-narrowing-excluded": i.by_exclusions,
-      children: l.map((q) => /* @__PURE__ */ n("p", { children: q }, q))
+      children: l.map((_) => /* @__PURE__ */ n("p", { children: _ }, _))
     }
   );
 }
-function yt({
-  collection: o,
+function vt({
+  collection: s,
   id: r,
   displayTemplate: d
 }) {
-  const y = ie(), S = Ce(), g = o === "nivaro_files" || o === "directus_files", m = (() => {
+  const x = ie(), q = $e(), h = s === "nivaro_files" || s === "directus_files", m = (() => {
     if (!d || !d.includes(".")) return null;
-    const i = [...d.matchAll(/\{\{([^}]+)\}\}/g)].map(($) => $[1].trim());
+    const i = [...d.matchAll(/\{\{([^}]+)\}\}/g)].map((C) => C[1].trim());
     return i.length > 0 ? ["id", ...i].join(",") : null;
-  })(), { data: u, isLoading: R } = k({
-    queryKey: ["relation-single", o, String(r), m ?? ""],
-    queryFn: () => g ? (
+  })(), { data: u, isLoading: R } = S({
+    queryKey: ["relation-single", s, String(r), m ?? ""],
+    queryFn: () => h ? (
       // The file's row, not its bytes: GET /files/:id downloads the whole
       // file (twice with the retry, 404 when storage lost it) only to read
       // its name, and a missing object left the raw id as the label.
-      y.request(
+      x.request(
         j(`/files/${encodeURIComponent(String(r))}/meta`)
       ).then((i) => i.data)
-    ) : S(o, r, m),
-    enabled: !!r && !!o,
+    ) : q(s, r, m),
+    enabled: !!r && !!s,
     staleTime: 6e4
   });
   if (R) return /* @__PURE__ */ n(Q, { className: "h-3 w-3 animate-spin text-slate-400" });
   if (!u) return /* @__PURE__ */ n("span", { children: String(r ?? "") });
-  if (g) {
+  if (h) {
     const i = u.title || u.filename_download || u.filename_disk || String(r);
     return /* @__PURE__ */ n("span", { children: i });
   }
-  return /* @__PURE__ */ n("span", { children: v(d, u) });
+  return /* @__PURE__ */ n("span", { children: k(d, u) });
 }
 export {
-  yt as RelatedItemLabel,
-  rt as RelationCombobox,
-  tt as useStaleTip
+  vt as RelatedItemLabel,
+  nt as RelationCombobox,
+  rt as useStaleTip
 };

package/dist/shared/lib/picker-rank.js

@@ -0,0 +1,21 @@
+const i = (r) => r.toLocaleLowerCase().replace(/\s+/g, " ").trim();
+function s(r, o) {
+  const t = i(o);
+  if (!t) return 4;
+  const e = i(r);
+  if (e === t) return 0;
+  if (e.startsWith(t)) return 1;
+  const n = e.split(/[\s,.;:()/\-_@]+/).filter(Boolean);
+  return t.split(" ").every((c) => n.some((f) => f.startsWith(c))) ? 2 : e.includes(t) ? 3 : 4;
+}
+function l(r, o, t, e = !1) {
+  if (t.trim()) {
+    const n = s(r, t) - s(o, t);
+    if (n) return n;
+  }
+  return e ? o.localeCompare(r) : r.localeCompare(o);
+}
+export {
+  l as compareByMatch,
+  s as pickerMatchTier
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nivaro/react",
-  "version": "0.3.25",
+  "version": "0.3.26",
   "description": "React hooks and components for Nivaro CMS forms",
   "type": "module",
   "main": "./dist/index.js",