@nivaro/react 0.3.35 → 0.3.37

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

@@ -1,5 +1,5 @@
-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 { jsx as s, jsxs as h, Fragment as me } from "react/jsx-runtime";
+import { Copy as Q, History as fe, 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";
@@ -131,16 +131,16 @@ function qe({
   field: t,
   value: o,
   relations: l,
-  collection: m,
+  collection: f,
   itemId: x,
   openRelated: w,
   editable: R = !1
 }) {
   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(() => {
+  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), m = 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(() => {
+    const e = m.current, c = L.current;
+    m.current = null, L.current = null, (e || c) && window.setTimeout(() => {
       var u;
       document.activeElement && document.activeElement !== document.body || (e != null && e.isConnected ? e.focus() : (u = c == null ? void 0 : c()) == null || u.focus());
     }, 0);
@@ -151,7 +151,7 @@ function qe({
         return;
       }
       const c = e.getBoundingClientRect();
-      _.current = null, f.current = e, a("menu"), b(c.left, c.bottom + 4);
+      _.current = null, m.current = e, a("menu"), b(c.left, c.bottom + 4);
     },
     [p, i, b]
   ), E = N(() => {
@@ -171,7 +171,7 @@ function qe({
         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);
+      _.current = null, m.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(
@@ -192,12 +192,12 @@ function qe({
     },
     [b, n]
   ), I = l.find(
-    (e) => e.many_collection === m && e.many_field === t.field && e.one_collection
+    (e) => e.many_collection === f && 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 = [
+  }, V = !!(r != null && r.allowed(t.field)) && r.manageable(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",
@@ -229,7 +229,7 @@ function qe({
     {
       key: "history",
       label: "Value history",
-      icon: /* @__PURE__ */ s(me, { className: "h-3.5 w-3.5" }),
+      icon: /* @__PURE__ */ s(fe, { className: "h-3.5 w-3.5" }),
       disabled: !K,
       run: () => {
         W("[data-field-history]") || v.info("No history for this field yet");
@@ -364,7 +364,7 @@ function Oe({
   items: t,
   onClose: o,
   confirm: l,
-  anchor: m
+  anchor: f
 }) {
   Ue();
   const x = M(null), [w, R] = C(0), g = t.filter((a) => !a.disabled);
@@ -373,8 +373,8 @@ function Oe({
     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) => {
+      (d = x.current) != null && d.contains(p) || (E = p == null ? void 0 : p.closest) != null && E.call(p, $e) && (f != null && f.contains(p)) || o();
+    }, m = (i) => {
       var p;
       if (i.key === "Escape")
         i.preventDefault(), o();
@@ -399,27 +399,27 @@ function Oe({
         d && (d.run(), d.stay || o());
       }
     };
-    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);
+    return window.addEventListener("mousedown", a, !0), window.addEventListener("keydown", m, !0), (L = x.current) == null || L.focus(), () => {
+      window.removeEventListener("mousedown", a, !0), window.removeEventListener("keydown", m, !0);
     };
-  }, [o, g, w, l, m]);
+  }, [o, g, w, l, f]);
   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;
+    var m;
     if (!S) return;
     const a = document.activeElement;
-    (a === r.current || a === x.current || a === document.body) && ((f = T.current) == null || f.focus());
+    (a === r.current || a === x.current || a === document.body) && ((m = T.current) == null || m.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;
+    var m;
+    const a = (m = x.current) == null ? void 0 : m.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 $ = Math.max(8, Math.min(n.x, window.innerWidth - y - 8)), j = Math.max(8, Math.min(n.y, window.innerHeight - U - 8)), b = (f == null ? void 0 : f.closest('[role="dialog"]')) ?? document.body, D = b === document.body ? { position: "fixed", left: $, top: j } : (() => {
     const a = b.getBoundingClientRect();
     return {
       position: "absolute",
@@ -476,14 +476,14 @@ function Oe({
             ] })
           ] }) : null,
           l ? null : t.map((a) => {
-            const f = g.indexOf(a), L = f === w && !a.disabled;
+            const m = g.indexOf(a), L = m === w && !a.disabled;
             return /* @__PURE__ */ h(
               "button",
               {
                 type: "button",
                 role: "menuitem",
                 disabled: a.disabled,
-                onMouseEnter: () => f >= 0 && R(f),
+                onMouseEnter: () => m >= 0 && R(m),
                 onClick: () => {
                   a.run(), a.stay || o();
                 },
@@ -508,7 +508,7 @@ function Oe({
   );
 }
 function Je(n) {
-  const [t, o] = C(null), [l, m] = C(!1), x = M(!1), w = M(null);
+  const [t, o] = C(null), [l, f] = C(!1), x = M(!1), w = M(null);
   B(() => {
     const r = n.current;
     if (!r) return;
@@ -517,7 +517,7 @@ function Je(n) {
     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 || (f(!1), x.current = !1);
   }, [t]);
   const R = N(
     (r) => {
@@ -525,15 +525,15 @@ function Je(n) {
       const k = r.target;
       k.matches('input, textarea, select, [contenteditable="true"], [role="combobox"]') && (w.current = k, setTimeout(() => {
         x.current || k.blur();
-      }, 0), m(!0));
+      }, 0), f(!0));
     },
     [t]
   ), g = N(() => {
-    x.current = !0, m(!1);
+    x.current = !0, f(!1);
     const r = w.current;
     w.current = null, r && setTimeout(() => r.focus(), 0);
   }, []), T = N(() => {
-    m(!1), w.current = null;
+    f(!1), w.current = null;
   }, []);
   return { editor: t, confirming: l, onFocusCapture: R, confirm: g, cancel: T };
 }
@@ -543,7 +543,7 @@ function ze({
   onConfirm: o,
   onCancel: l
 }) {
-  const m = n.split(/\s+/).map((x) => x[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
+  const f = n.split(/\s+/).map((x) => x[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
   return /* @__PURE__ */ h(
     "div",
     {
@@ -553,9 +553,9 @@ function ze({
         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__ */ 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: "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: f || "?" }),
         /* @__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: [
+        t && /* @__PURE__ */ h(me, { children: [
           /* @__PURE__ */ s(
             "button",
             {

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

@@ -0,0 +1,279 @@
+import { jsxs as b, jsx as p, Fragment as B } from "react/jsx-runtime";
+import { useQueryClient as O, useQuery as T } from "@tanstack/react-query";
+import { Compass as W, X as D } from "lucide-react";
+import { useState as v, useEffect as k, useCallback as F, useId as j, useRef as z, useLayoutEffect as H, useMemo as R } from "react";
+import { createPortal as Q } from "react-dom";
+import { useNivaroClient as P } from "../../context.js";
+import { get as X, patch as G } from "../../lib/commands.js";
+import { cn as V } from "../../lib/utils.js";
+const I = 280, Y = 4;
+function J(e) {
+  return e.length <= 1 ? e[0] ?? "" : `${e.slice(0, -1).join(", ")} and ${e[e.length - 1]}`;
+}
+function ce(e, t) {
+  const i = /* @__PURE__ */ new Map();
+  for (const n of e) {
+    if (n.type !== "section" && n.type !== "tab" && n.type !== "metadata") continue;
+    const x = (t[n.key] ?? []).filter((r) => !r.hidden), c = x.map((r) => (r.label || r.field).trim()).filter(Boolean), u = x.filter((r) => r.required).length, g = n.content_tone === "divider" ? "" : (n.content ?? "").trim();
+    let f;
+    if (g) f = g.length > I ? `${g.slice(0, I - 1).trimEnd()}…` : g;
+    else if (n.type === "metadata") f = "Facts about the record itself: who made it and when.";
+    else if (c.length === 0) f = "Nothing to fill in here yet.";
+    else {
+      const r = c.slice(0, Y), w = c.length - r.length;
+      f = c.length === 1 ? `One field: ${r[0]}.` : `${c.length} fields: ${w > 0 ? `${r.join(", ")} and ${w} more` : J(r)}.`;
+    }
+    i.set(n.key, { key: n.key, title: n.label || "Section", body: f, required: u });
+  }
+  return i;
+}
+function U(e) {
+  if (!e) return [];
+  const t = [];
+  for (const i of e.querySelectorAll("[data-section-key], [data-read-section]")) {
+    if (i.hidden || i.closest("[hidden]") || i.classList.contains("hidden")) continue;
+    const n = i.getAttribute("data-section-key") ?? i.getAttribute("data-read-section");
+    n && !t.includes(n) && t.push(n);
+  }
+  return t;
+}
+function Z(e, t) {
+  if (!e) return null;
+  const i = typeof CSS < "u" && CSS.escape ? CSS.escape(t) : t.replace(/["\\]/g, "\\$&");
+  return e.querySelector(`[data-section-key="${i}"], [data-read-section="${i}"]`);
+}
+const K = (e, t) => `nvr:form-tour:${e}:${t}`;
+function _(e) {
+  try {
+    return localStorage.getItem(e) === "1";
+  } catch {
+    return !1;
+  }
+}
+const ee = () => {
+  try {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return !1;
+  }
+};
+function ue(e) {
+  const { layoutId: t, userId: i, enabled: n } = e, x = P(), c = O(), u = t != null ? K(i, t) : "", [g, f] = v(() => u ? _(u) : !1);
+  k(() => f(u ? _(u) : !1), [u]);
+  const { data: r, isSuccess: w } = T({
+    queryKey: ["form-tours-done", i],
+    queryFn: () => x.request(X("/auth/me")).then((l) => {
+      var y, m;
+      const N = (m = (y = l == null ? void 0 : l.data) == null ? void 0 : y.preferences) == null ? void 0 : m.form_tours_done;
+      return Array.isArray(N) ? N.filter((S) => Number.isInteger(S)) : [];
+    }),
+    enabled: n && t != null && !g,
+    staleTime: 5 * 6e4
+  }), a = g || t != null && !!(r != null && r.includes(t)), $ = F(() => {
+    if (t != null) {
+      f(!0);
+      try {
+        localStorage.setItem(K(i, t), "1");
+      } catch {
+      }
+      c.setQueryData(
+        ["form-tours-done", i],
+        (l) => l != null && l.includes(t) ? l : [...l ?? [], t]
+      ), x.request(G("/users/me/preferences", { form_tour_done: t })).catch(() => {
+      });
+    }
+  }, [x, c, t, i]);
+  return { seen: a, known: g || w, markSeen: $ };
+}
+function fe({ onClick: e }) {
+  return /* @__PURE__ */ b(
+    "button",
+    {
+      type: "button",
+      "data-form-tour-button": "",
+      "data-tip": "A short walk through this form",
+      onClick: e,
+      className: "inline-flex h-6 items-center gap-1 rounded px-2 text-[11.5px] font-medium text-slate-500 transition-colors hover:bg-muted hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-600 dark:text-muted-foreground dark:hover:text-foreground dark:focus-visible:ring-sky-300",
+      children: [
+        /* @__PURE__ */ p(W, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+        "Tour"
+      ]
+    }
+  );
+}
+const te = 320, M = 10;
+function me({
+  rootRef: e,
+  steps: t,
+  formName: i,
+  onClose: n
+}) {
+  const x = j(), c = z(null), [u, g] = v(null);
+  k(() => {
+    g(U(e.current).filter((o) => t.has(o)));
+  }, []);
+  const f = u ?? [], [r, w] = v(0), [a, $] = v(null), [l, N] = v(
+    () => typeof window < "u" && window.innerWidth < 640
+  ), y = f[r], m = y ? t.get(y) : void 0;
+  k(() => {
+    u && u.length === 0 && n(!1);
+  }, [u, n]), H(() => {
+    if (!y) return;
+    const o = Z(e.current, y);
+    if (!o) return;
+    const s = o.getBoundingClientRect().height > window.innerHeight * 0.6;
+    o.scrollIntoView({
+      block: s ? "start" : "center",
+      behavior: ee() ? "auto" : "smooth"
+    });
+    let d = 0;
+    const h = () => {
+      cancelAnimationFrame(d), d = requestAnimationFrame(() => {
+        const A = o.getBoundingClientRect();
+        $({ top: A.top, left: A.left, width: A.width, height: A.height }), N(window.innerWidth < 640);
+      });
+    };
+    return h(), window.addEventListener("scroll", h, !0), window.addEventListener("resize", h), () => {
+      cancelAnimationFrame(d), window.removeEventListener("scroll", h, !0), window.removeEventListener("resize", h);
+    };
+  }, [y, e]);
+  const S = !!m;
+  k(() => {
+    var s;
+    if (!S) return;
+    const o = document.activeElement;
+    return (s = c.current) == null || s.focus({ preventScroll: !0 }), () => {
+      var d;
+      return (d = o == null ? void 0 : o.focus) == null ? void 0 : d.call(o, { preventScroll: !0 });
+    };
+  }, [S]);
+  const q = r >= f.length - 1, E = F(() => {
+    q ? n(!0) : w((o) => o + 1);
+  }, [q, n]), L = F(() => w((o) => Math.max(0, o - 1)), []);
+  k(() => {
+    const o = (s) => {
+      var h;
+      const d = document.activeElement;
+      d && d !== document.body && !((h = c.current) != null && h.contains(d)) || (s.key === "Escape" ? (s.preventDefault(), n(!1)) : s.key === "ArrowRight" && !s.altKey && !s.metaKey && !s.ctrlKey ? E() : s.key === "ArrowLeft" && !s.altKey && !s.metaKey && !s.ctrlKey && L());
+    };
+    return window.addEventListener("keydown", o), () => window.removeEventListener("keydown", o);
+  }, [E, L, n]);
+  const C = R(() => {
+    if (!a || l || typeof window > "u") return null;
+    const o = window.innerWidth, s = window.innerHeight, d = Math.min(Math.max(12, a.left + 16), o - te - 12), h = a.top + Math.min(a.height, 52) + M;
+    return h + 200 < s ? { top: Math.max(12, h), left: d } : a.top - M - 200 > 0 ? { bottom: s - a.top + M, left: d } : { top: 12, left: d };
+  }, [a, l]);
+  return !m || typeof document > "u" ? null : Q(
+    /* @__PURE__ */ b(B, { children: [
+      a && /* @__PURE__ */ p(
+        "div",
+        {
+          "aria-hidden": "true",
+          "data-form-tour-ring": "",
+          className: "pointer-events-none fixed z-[70] rounded-xl ring-2 ring-nvr-cyan ring-offset-2 ring-offset-white transition-[top,left,width,height] duration-200 motion-reduce:transition-none dark:ring-offset-background",
+          style: {
+            top: a.top,
+            left: a.left,
+            width: a.width,
+            height: Math.min(a.height, window.innerHeight - Math.max(0, a.top) + 8)
+          }
+        }
+      ),
+      /* @__PURE__ */ b(
+        "div",
+        {
+          ref: c,
+          role: "dialog",
+          "aria-modal": "false",
+          "aria-labelledby": x,
+          tabIndex: -1,
+          "data-form-tour": "",
+          "data-form-tour-step": m.key,
+          className: V(
+            "fixed z-[71] rounded-xl border border-slate-200 bg-white p-4 shadow-lg outline-none dark:border-border dark:bg-card",
+            l ? "inset-x-3 bottom-3" : "w-[320px]"
+          ),
+          style: l || !C ? void 0 : C,
+          children: [
+            /* @__PURE__ */ b("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ b("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ b("p", { className: "text-[11px] font-medium text-slate-500 dark:text-muted-foreground", children: [
+                  r === 0 && i ? `${i} · ` : "",
+                  r + 1,
+                  " of ",
+                  f.length
+                ] }),
+                /* @__PURE__ */ p(
+                  "h2",
+                  {
+                    id: x,
+                    className: "mt-0.5 text-[14px] font-semibold text-slate-900 dark:text-foreground",
+                    children: m.title
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ p(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Close the tour",
+                  "data-form-tour-close": "",
+                  onClick: () => n(!1),
+                  className: "-mr-1 -mt-1 rounded p-1 text-slate-400 transition-colors hover:bg-muted hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-600 dark:hover:text-foreground dark:focus-visible:ring-sky-300",
+                  children: /* @__PURE__ */ p(D, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ p("p", { className: "mt-2 whitespace-pre-wrap text-[12.5px] leading-relaxed text-slate-600 dark:text-muted-foreground", children: m.body }),
+            m.required > 0 && /* @__PURE__ */ b("p", { className: "mt-1.5 text-[12px] text-slate-500 dark:text-muted-foreground", children: [
+              m.required === 1 ? "One field here is" : `${m.required} fields here are`,
+              " ",
+              "required ",
+              /* @__PURE__ */ p("span", { className: "text-destructive", children: "*" })
+            ] }),
+            /* @__PURE__ */ b("div", { className: "mt-3 flex items-center gap-2", children: [
+              r === 0 ? /* @__PURE__ */ p(
+                "button",
+                {
+                  type: "button",
+                  "data-form-tour-skip": "",
+                  onClick: () => n(!1),
+                  className: "h-8 rounded-md px-2.5 text-[12.5px] font-medium text-slate-500 transition-colors hover:bg-muted hover:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground",
+                  children: "Skip tour"
+                }
+              ) : /* @__PURE__ */ p(
+                "button",
+                {
+                  type: "button",
+                  "data-form-tour-back": "",
+                  onClick: L,
+                  className: "h-8 rounded-md px-2.5 text-[12.5px] font-medium text-slate-600 transition-colors hover:bg-muted hover:text-slate-900 dark:text-muted-foreground dark:hover:text-foreground",
+                  children: "Back"
+                }
+              ),
+              /* @__PURE__ */ p("span", { className: "flex-1" }),
+              /* @__PURE__ */ p(
+                "button",
+                {
+                  type: "button",
+                  "data-form-tour-next": "",
+                  onClick: E,
+                  className: "h-8 rounded-md bg-nvr-cyan px-3 text-[12.5px] font-medium text-white transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-600 focus-visible:ring-offset-2 dark:focus-visible:ring-sky-300 dark:focus-visible:ring-offset-card",
+                  children: q ? "Done" : "Next"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+export {
+  me as FormTour,
+  fe as FormTourButton,
+  ce as buildTourSteps,
+  U as sectionKeysOnScreen,
+  ue as useFormTourSeen
+};