@nivaro/react 0.3.35 → 0.3.37

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

@@ -1,29 +1,29 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { UserRoundPlus as D, UserRoundPen as S, UserRoundX as C, Check as U, UserRound as w, Undo2 as E } from "lucide-react";
-import { useState as Y, Fragment as F, useInsertionEffect as P } from "react";
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+import { UserRound as v, Undo2 as S, UserRoundPlus as C, UserRoundPen as U, UserRoundX as Y, Check as E } from "lucide-react";
+import { useState as F, Fragment as P, useInsertionEffect as I } from "react";
 import { toast as c } from "sonner";
-import { usePersonalDefaultsApi as I } from "./usePersonalDefaults.js";
+import { usePersonalDefaultsApi as D } from "./usePersonalDefaults.js";
 function T(e) {
   return e.applied && e.hasDefault ? "applied" : e.editable ? e.loaded ? e.failed && !e.hasDefault ? e.hasValue ? "offer" : null : e.hasDefault ? e.hasValue ? e.isDefault ? "saved" : "update" : "saved-empty" : e.hasValue ? "offer" : "reserve" : "reserve" : null;
 }
-function K(e, n, a) {
-  return e != null && e.allowed(n) ? T({
+function K(e, t, a) {
+  return e != null && e.allowed(t) ? e.manageable(t) ? T({
     editable: a,
     loaded: e.loaded,
-    hasValue: e.hasValue(n),
-    hasDefault: e.defaultFor(n) !== null,
-    isDefault: e.isDefault(n),
-    applied: e.applied(n),
+    hasValue: e.hasValue(t),
+    hasDefault: e.defaultFor(t) !== null,
+    isDefault: e.isDefault(t),
+    applied: e.applied(t),
     failed: e.failed
-  }) : null;
+  }) : e.applied(t) && e.defaultFor(t) !== null ? "applied" : null : null;
 }
-function g(e, n) {
-  var d, i, p;
+function g(e, t) {
+  var d, s, f;
   const a = e;
-  return ((i = (d = a == null ? void 0 : a.response) == null ? void 0 : d.data) == null ? void 0 : i.error) ?? ((p = a == null ? void 0 : a.data) == null ? void 0 : p.error) ?? (a == null ? void 0 : a.error) ?? (a == null ? void 0 : a.message) ?? n;
+  return ((s = (d = a == null ? void 0 : a.response) == null ? void 0 : d.data) == null ? void 0 : s.error) ?? ((f = a == null ? void 0 : a.data) == null ? void 0 : f.error) ?? (a == null ? void 0 : a.error) ?? (a == null ? void 0 : a.message) ?? t;
 }
-function R(e, n) {
-  return e.clear(n).then(
+function R(e, t) {
+  return e.clear(t).then(
     (a) => (c.success(
       "Your default was cleared",
       a ? {
@@ -65,7 +65,7 @@ button[data-field-menu-trigger]{opacity:1}
 }
 `, N = "nvr-personal-default-css";
 function L() {
-  P(() => {
+  I(() => {
     if (typeof document > "u" || document.getElementById(N)) return;
     const e = document.createElement("style");
     e.id = N, e.textContent = A, document.head.appendChild(e);
@@ -73,7 +73,7 @@ function L() {
 }
 const y = 'relative inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded px-1 text-[10.5px] font-medium text-slate-500 transition-colors duration-150 before:absolute before:inset-x-0 before:-inset-y-0.5 before:content-[""] hover:bg-muted hover:text-slate-800 active:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-600 disabled:cursor-not-allowed disabled:opacity-50 aria-expanded:bg-muted aria-expanded:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground dark:focus-visible:ring-sky-300 dark:aria-expanded:text-foreground', V = "inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap px-1 text-[10.5px] font-medium text-slate-500 dark:text-muted-foreground", $ = "inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded bg-sky-50 px-1.5 text-[10.5px] font-medium text-sky-800 dark:bg-sky-900/30 dark:text-sky-200";
 function j() {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ r(
     "span",
     {
       "aria-hidden": !0,
@@ -82,110 +82,110 @@ function j() {
     }
   );
 }
-function X({
+function W({
   field: e,
-  label: n,
+  label: t,
   state: a,
   confirmOpen: d,
-  onConfirm: i,
-  onUndo: p,
+  onConfirm: s,
+  onUndo: f,
   onCleared: h
 }) {
   L();
-  const l = I(), [v, b] = Y(!1), o = n || e, x = a !== "saved-empty", m = /* @__PURE__ */ s(
+  const l = D(), [x, b] = F(!1), u = t || e, k = a !== "saved-empty", m = /* @__PURE__ */ o(
     "button",
     {
       type: "button",
       "data-personal-default-clear": e,
-      "aria-label": x ? `Clear your saved default for ${o} (the field keeps its value)` : `Clear your saved default for ${o}`,
-      "data-tip": x ? "Forget your saved default — this field keeps its value" : "Forget your saved default",
+      "aria-label": k ? `Clear your saved default for ${u} (the field keeps its value)` : `Clear your saved default for ${u}`,
+      "data-tip": k ? "Forget your saved default — this field keeps its value" : "Forget your saved default",
       "data-pd-action": !0,
       tabIndex: -1,
-      disabled: v || !l,
-      "aria-busy": v || void 0,
+      disabled: x || !l,
+      "aria-busy": x || void 0,
       onClick: () => {
-        l && (b(!0), R(l, e).then((r) => {
-          b(!1), r && (h == null || h());
+        l && (b(!0), R(l, e).then((n) => {
+          b(!1), n && (h == null || h());
         }));
       },
       className: y,
       children: [
-        /* @__PURE__ */ t(C, { "data-pd-icon": !0, className: "h-3 w-3", "aria-hidden": !0 }),
-        /* @__PURE__ */ t("span", { "data-pd-label": !0, children: "Clear default" })
+        /* @__PURE__ */ r(Y, { "data-pd-icon": !0, className: "h-3 w-3", "aria-hidden": !0 }),
+        /* @__PURE__ */ r("span", { "data-pd-label": !0, children: "Clear default" })
       ]
     },
     "clear"
-  ), k = (r) => /* @__PURE__ */ s(
+  ), w = (n) => /* @__PURE__ */ o(
     "button",
     {
       type: "button",
-      ...r === "make" ? { "data-personal-default-make": e } : { "data-personal-default-update": e },
-      "aria-label": r === "make" ? `Make this your default for ${o}` : `Update your saved default for ${o} to this value`,
+      ...n === "make" ? { "data-personal-default-make": e } : { "data-personal-default-update": e },
+      "aria-label": n === "make" ? `Make this your default for ${u}` : `Update your saved default for ${u} to this value`,
       "aria-haspopup": "dialog",
-      "aria-expanded": d === r,
-      "data-tip": r === "make" ? "Start your new records with this value" : "Start your new records with this value instead",
+      "aria-expanded": d === n,
+      "data-tip": n === "make" ? "Start your new records with this value" : "Start your new records with this value instead",
       "data-pd-action": !0,
       tabIndex: -1,
-      onClick: (f) => i(f.currentTarget, r),
+      onClick: (p) => s(p.currentTarget, n),
       className: y,
       children: [
-        r === "make" ? /* @__PURE__ */ t(D, { className: "h-3 w-3", "aria-hidden": !0 }) : /* @__PURE__ */ t(S, { className: "h-3 w-3", "aria-hidden": !0 }),
-        /* @__PURE__ */ t("span", { "data-pd-primary": !0, children: r === "make" ? "Make default" : "Update default" })
+        n === "make" ? /* @__PURE__ */ r(C, { className: "h-3 w-3", "aria-hidden": !0 }) : /* @__PURE__ */ r(U, { className: "h-3 w-3", "aria-hidden": !0 }),
+        /* @__PURE__ */ r("span", { "data-pd-primary": !0, children: n === "make" ? "Make default" : "Update default" })
       ]
     },
-    r
+    n
   );
-  let u = [];
-  return a === "offer" ? u = [k("make")] : a === "update" ? u = [k("update"), m] : a === "saved" || a === "saved-empty" ? u = [
-    /* @__PURE__ */ s(
+  let i = [];
+  return a === "offer" ? i = [w("make")] : a === "update" ? i = [w("update"), m] : a === "saved" || a === "saved-empty" ? i = [
+    /* @__PURE__ */ o(
       "span",
       {
         "data-personal-default-saved": e,
         "data-tip": a === "saved" ? "Your new records start with this value" : "You have a saved default for this field — new records start with it",
         className: V,
         children: [
-          a === "saved" ? /* @__PURE__ */ t(U, { className: "h-3 w-3 text-sky-700 dark:text-sky-300", "aria-hidden": !0 }) : /* @__PURE__ */ t(w, { className: "h-3 w-3", "aria-hidden": !0 }),
-          /* @__PURE__ */ t("span", { className: "sr-only", children: "Your default" }),
-          /* @__PURE__ */ t("span", { "data-pd-label": !0, "aria-hidden": !0, children: "Your default" })
+          a === "saved" ? /* @__PURE__ */ r(E, { className: "h-3 w-3 text-sky-700 dark:text-sky-300", "aria-hidden": !0 }) : /* @__PURE__ */ r(v, { className: "h-3 w-3", "aria-hidden": !0 }),
+          /* @__PURE__ */ r("span", { className: "sr-only", children: "Your default" }),
+          /* @__PURE__ */ r("span", { "data-pd-label": !0, "aria-hidden": !0, children: "Your default" })
         ]
       },
       "status"
     ),
     m
-  ] : a === "applied" && (u = [
-    /* @__PURE__ */ s(
+  ] : a === "applied" && (i = [
+    /* @__PURE__ */ o(
       "span",
       {
         "data-personal-default": e,
         "data-tip": "Filled in from your saved default",
         className: $,
         children: [
-          /* @__PURE__ */ t(w, { className: "h-3 w-3", "aria-hidden": !0 }),
-          /* @__PURE__ */ t("span", { className: "sr-only", children: "Your default" }),
-          /* @__PURE__ */ t("span", { "data-pd-label": !0, "aria-hidden": !0, children: "Your default" })
+          /* @__PURE__ */ r(v, { className: "h-3 w-3", "aria-hidden": !0 }),
+          /* @__PURE__ */ r("span", { className: "sr-only", children: "Your default" }),
+          /* @__PURE__ */ r("span", { "data-pd-label": !0, "aria-hidden": !0, children: "Your default" })
         ]
       },
       "status"
     ),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ o(
       "button",
       {
         type: "button",
         "data-personal-default-undo": e,
-        "aria-label": `Undo: empty ${o} (your saved default stays)`,
+        "aria-label": `Undo: empty ${u} (your saved default stays)`,
         "data-tip": "Empty this field — your saved default stays",
         "data-pd-action": !0,
-        onClick: p,
+        onClick: f,
         className: y,
         children: [
-          /* @__PURE__ */ t(E, { className: "h-3 w-3", "aria-hidden": !0 }),
-          /* @__PURE__ */ t("span", { "data-pd-label": !0, children: "Undo" })
+          /* @__PURE__ */ r(S, { className: "h-3 w-3", "aria-hidden": !0 }),
+          /* @__PURE__ */ r("span", { "data-pd-label": !0, children: "Undo" })
         ]
       },
       "undo"
     ),
-    m
-  ]), /* @__PURE__ */ t(
+    ...(l == null ? void 0 : l.manageable(e)) === !1 ? [] : [m]
+  ]), /* @__PURE__ */ r(
     "span",
     {
       "data-personal-default-slot": e,
@@ -193,16 +193,33 @@ function X({
       "data-pd-new": l != null && l.isNew ? "" : void 0,
       "aria-hidden": a === "reserve" ? !0 : void 0,
       className: "inline-flex shrink-0 items-center justify-end",
-      children: u.map((r, f) => /* @__PURE__ */ s(F, { children: [
-        f > 0 && /* @__PURE__ */ t(j, {}),
-        r
-      ] }, String(r.key ?? f)))
+      children: i.map((n, p) => /* @__PURE__ */ o(P, { children: [
+        p > 0 && /* @__PURE__ */ r(j, {}),
+        n
+      ] }, String(n.key ?? p)))
+    }
+  );
+}
+function X({ field: e }) {
+  const t = D();
+  if (!(t != null && t.allowed(e))) return null;
+  const a = t.loaded && t.isDefault(e), d = t.loaded && t.defaultFor(e) !== null, s = a ? "Your default: new records you start get this value." : d ? "You have your own default for this field, different from this value." : "You can save your own default for this field (Edit mode).";
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      "data-personal-default-mark": a ? "mine" : d ? "saved" : "allowed",
+      "data-tip": s,
+      role: "img",
+      "aria-label": s,
+      className: a ? "ml-1.5 inline-flex align-middle text-cyan-700 dark:text-nvr-cyan" : "ml-1.5 inline-flex align-middle text-slate-500 dark:text-slate-400",
+      children: /* @__PURE__ */ r(v, { "aria-hidden": !0, className: "h-3 w-3", strokeWidth: 2.25 })
     }
   );
 }
 export {
   A as PERSONAL_DEFAULT_CSS,
-  X as PersonalDefaultSlot,
+  X as PersonalDefaultMark,
+  W as PersonalDefaultSlot,
   R as clearPersonalDefault,
   K as personalDefaultSlotFor,
   T as personalDefaultSlotState,

package/dist/shared/components/item-edit/entry/EntryStrip.js

@@ -1,54 +1,58 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import { badgeClasses as m } from "../../../lib/entry-badge-style.js";
+import { jsxs as a, jsx as n } from "react/jsx-runtime";
+import { badgeClasses as c } from "../../../lib/entry-badge-style.js";
 import { cn as o } from "../../../lib/utils.js";
-function u({
+function h({
   badge: t,
   mode: r,
-  auto: s,
-  onMode: d
+  auto: d,
+  onMode: l,
+  tour: s
 }) {
-  if (!t && !r) return null;
-  const n = (e, l, p) => /* @__PURE__ */ a(
+  if (!t && !r && !s) return null;
+  const i = (e, p, m) => /* @__PURE__ */ n(
     "button",
     {
       type: "button",
       "aria-pressed": r === e,
-      "data-tip": p,
+      "data-tip": m,
       "data-entry-mode": e,
-      onClick: () => d(e === s ? null : e),
+      onClick: () => l(e === d ? null : e),
       className: o(
         "h-6 rounded px-2 text-[11.5px] font-medium transition-colors",
         r === e ? "bg-white text-slate-900 shadow-sm dark:bg-card dark:text-foreground" : "text-slate-500 hover:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground"
       ),
-      children: l
+      children: p
     }
   );
-  return /* @__PURE__ */ i("div", { "data-entry-strip": "", className: "flex flex-wrap items-center justify-between gap-2", children: [
-    t ? /* @__PURE__ */ a(
+  return /* @__PURE__ */ a("div", { "data-entry-strip": "", className: "flex flex-wrap items-center justify-between gap-2", children: [
+    t ? /* @__PURE__ */ n(
       "span",
       {
         "data-form-badge": "",
         "data-tip": "The form this record is open in",
         className: o(
           "inline-flex h-5 items-center rounded-full px-2 text-[11px] font-medium",
-          m(t.color)
+          c(t.color)
         ),
         children: t.tag
       }
-    ) : /* @__PURE__ */ a("span", {}),
-    r && /* @__PURE__ */ i(
-      "fieldset",
-      {
-        "aria-label": "How to show this form",
-        className: "m-0 inline-flex min-w-0 items-center gap-0.5 rounded-md border-0 bg-slate-100 p-0.5 dark:bg-muted",
-        children: [
-          n("beginner", "Guided steps", "One step at a time, with Next and Back"),
-          n("expert", "Tabs", "Every tab open, in any order")
-        ]
-      }
-    )
+    ) : /* @__PURE__ */ n("span", {}),
+    /* @__PURE__ */ a("span", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+      s,
+      r && /* @__PURE__ */ a(
+        "fieldset",
+        {
+          "aria-label": "How to show this form",
+          className: "m-0 inline-flex min-w-0 items-center gap-0.5 rounded-md border-0 bg-slate-100 p-0.5 dark:bg-muted",
+          children: [
+            i("beginner", "Guided steps", "One step at a time, with Next and Back"),
+            i("expert", "Tabs", "Every tab open, in any order")
+          ]
+        }
+      )
+    ] })
   ] });
 }
 export {
-  u as EntryStrip
+  h as EntryStrip
 };

package/dist/shared/components/item-edit/form-density.js

@@ -0,0 +1,36 @@
+import { useInsertionEffect as n } from "react";
+function m(t) {
+  return (t == null ? void 0 : t.density) === "compact" ? "compact" : "comfortable";
+}
+const e = "[data-form-density=compact]", o = `
+${e} [data-form-body]{padding:1rem 1.25rem}
+${e} [data-form-body]>:not([hidden])~:not([hidden]),${e} [data-section-stack]>:not([hidden])~:not([hidden]){margin-top:.625rem}
+${e} [data-usage-header]{padding-top:.5rem;padding-bottom:.5rem}
+${e} [data-section-body]{padding:.625rem 1rem .75rem}
+${e} [data-section-grid]{row-gap:.625rem;column-gap:.875rem}
+${e} [data-summary-strip]{padding-top:.375rem;padding-bottom:.375rem}
+${e} [data-field]>:not([hidden])~:not([hidden]){margin-top:.25rem}
+${e} [data-read-head]{padding-top:.375rem;padding-bottom:.375rem}
+${e} [data-read-body]{padding:.75rem 1rem 1rem}
+${e} [data-read-dl]{row-gap:.75rem;column-gap:1rem}
+@media (hover: hover) and (pointer: fine){
+${e} [data-section-key] .h-9{height:2rem}
+${e} [data-section-key] .h-10{height:2.25rem}
+${e} [data-section-key] textarea{min-height:3.5rem}
+}
+@media (max-width: 639px){
+${e} [data-form-body]{padding:.75rem}
+}
+`, a = "nvr-form-density-css";
+function i(t) {
+  n(() => {
+    if (!t || typeof document > "u" || document.getElementById(a)) return;
+    const d = document.createElement("style");
+    d.id = a, d.textContent = o, document.head.appendChild(d);
+  }, [t]);
+}
+export {
+  o as FORM_DENSITY_CSS,
+  m as formDensityOf,
+  i as useFormDensityCss
+};

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

@@ -1,65 +1,78 @@
-import { useRef as u, useEffect as h, useCallback as L } from "react";
-import { useApiFetchConfig as F } from "../../context.js";
-import { StepClock as R, onSectionUse as U, SectionTally as B, sessionEvent as H, queueFormUsage as q } from "../../lib/form-usage-beacon.js";
-function V({
-  enabled: b,
-  layoutId: s,
+import { useRef as u, useEffect as D, useCallback as E, useMemo as B } from "react";
+import { useApiFetchConfig as H } from "../../context.js";
+import { StepClock as T, RefusalTally as q, onSectionUse as x, SectionTally as A, sessionEvent as P, queueFormUsage as V } from "../../lib/form-usage-beacon.js";
+function J({
+  enabled: M,
+  layoutId: r,
   collection: c,
-  itemId: d,
-  step: i
+  itemId: l,
+  step: a
 }) {
-  const l = F(), f = u(l);
-  f.current = l;
-  const v = u(i);
-  v.current = i;
-  const o = u(null), p = b && s != null && !!c;
-  return h(() => {
-    if (!p || s == null) return;
+  const d = H(), f = u(d);
+  f.current = d;
+  const p = u(a);
+  p.current = a;
+  const s = u(null), v = M && r != null && !!c;
+  D(() => {
+    if (!v || r == null) return;
     const n = () => typeof document > "u" || document.visibilityState !== "hidden", e = {
-      clock: new R(v.current, Date.now(), n()),
+      clock: new T(p.current, Date.now(), n()),
       openSent: !1,
       saved: !1,
       elapsed: 0,
-      saveMs: null
+      saveMs: null,
+      refusals: new q()
     };
-    o.current = e;
-    const r = new B(), D = U((t) => {
-      t.layoutId === s && t.collection === c && r.note(t.kind, t.key);
-    }), a = (t) => {
-      const { steps: E, total: S } = e.clock.take(Date.now());
-      e.elapsed += S;
-      const g = r.pending(), w = H({
-        layoutId: s,
+    s.current = e;
+    const t = new A(), R = x((o) => {
+      o.layoutId === r && o.collection === c && t.note(o.kind, o.key);
+    }), i = (o) => {
+      const { steps: C, total: g } = e.clock.take(Date.now());
+      e.elapsed += g;
+      const h = t.pending(), b = e.refusals.take(), y = P({
+        layoutId: r,
         collection: c,
-        item: d,
+        item: l,
         openSent: e.openSent,
         saved: e.saved,
         step: e.clock.currentStep,
-        steps: E,
-        total: S,
+        steps: C,
+        total: g,
         elapsed: e.elapsed,
-        final: t,
-        sections: g,
-        saveMs: e.saveMs
+        final: o,
+        sections: h,
+        saveMs: e.saveMs,
+        refused: b
       });
-      if (!w) return;
-      r.markSent(g), e.openSent = !0, e.saved = !1, e.saveMs = null;
-      const { apiBase: y, authHeaders: M, credentials: C } = f.current;
-      q(w, { apiBase: y, authHeaders: M, credentials: C });
-    }, m = () => {
-      document.visibilityState === "hidden" ? (a(!1), e.clock.pause(Date.now())) : e.clock.resume(Date.now());
-    }, k = () => a(!0);
-    return document.addEventListener("visibilitychange", m), window.addEventListener("pagehide", k), () => {
-      document.removeEventListener("visibilitychange", m), window.removeEventListener("pagehide", k), a(!0), D(), o.current === e && (o.current = null);
+      if (!y) {
+        e.refusals.restore(b);
+        return;
+      }
+      t.markSent(h), e.openSent = !0, e.saved = !1, e.saveMs = null;
+      const { apiBase: L, authHeaders: F, credentials: U } = f.current;
+      V(y, { apiBase: L, authHeaders: F, credentials: U });
+    }, w = () => {
+      document.visibilityState === "hidden" ? (i(!1), e.clock.pause(Date.now())) : e.clock.resume(Date.now());
+    }, S = () => i(!0);
+    return document.addEventListener("visibilitychange", w), window.addEventListener("pagehide", S), () => {
+      document.removeEventListener("visibilitychange", w), window.removeEventListener("pagehide", S), i(!0), R(), s.current === e && (s.current = null);
     };
-  }, [p, s, c, d]), h(() => {
+  }, [v, r, c, l]), D(() => {
     var n;
-    (n = o.current) == null || n.clock.step(i, Date.now());
-  }, [i]), { markSaved: L(() => {
-    const n = o.current;
+    (n = s.current) == null || n.clock.step(a, Date.now());
+  }, [a]);
+  const m = E(() => {
+    const n = s.current;
     n && (n.saved || (n.saveMs = n.elapsed + n.clock.peek(Date.now())), n.saved = !0);
-  }, []) };
+  }, []), k = E(
+    (n, e) => {
+      var t;
+      return (t = s.current) == null ? void 0 : t.refusals.note(n, e);
+    },
+    []
+  );
+  return B(() => ({ markSaved: m, markRefused: k }), [m, k]);
 }
 export {
-  V as useFormUsageBeacon
+  J as useFormUsageBeacon
 };