@nivaro/react 0.3.36 → 0.3.37

package/dist/shared/components/layout-editor/usage/UsagePanel.js

@@ -1,76 +1,77 @@
-import { jsxs as s, jsx as t, Fragment as W } from "react/jsx-runtime";
-import { ChevronsDownUp as Y, Rows3 as z } from "lucide-react";
-import { useState as _, useMemo as u } from "react";
-import { UNGROUPED_KEY as B } from "../../../lib/layout-ops.js";
-import { titleCase as C } from "../../../lib/utils.js";
-import { Skeleton as $ } from "../../ui/skeleton.js";
-import { Toggle as H } from "../settings/controls.js";
-import { AbTestSection as J } from "./AbTestSection.js";
-import { suggestCollapse as Q, rateText as V } from "./suggest-collapse.js";
-import { suggestSections as X } from "./suggest-sections.js";
-import { useLayoutUsageToday as Z, useLayoutFriction as ee, useCoChanges as te, formatDuration as ae } from "./usage-api.js";
-const i = "px-3 pb-1.5 pt-4 text-[12px] font-semibold text-slate-700 dark:text-foreground", d = "px-3 text-[12px] leading-snug text-slate-500 dark:text-muted-foreground";
-function c({ label: n, value: m }) {
+import { jsxs as s, jsx as t, Fragment as T } from "react/jsx-runtime";
+import { ChevronsDownUp as J, Rows3 as Q } from "lucide-react";
+import { useState as j, useMemo as b } from "react";
+import { UNGROUPED_KEY as V } from "../../../lib/layout-ops.js";
+import { titleCase as M } from "../../../lib/utils.js";
+import { Skeleton as P } from "../../ui/skeleton.js";
+import { Toggle as R } from "../settings/controls.js";
+import { AbTestSection as X } from "./AbTestSection.js";
+import { useRefusalLens as Z, useSaveRefusals as ee, refusalTone as te, refusalPct as ae, refusalTip as se, REFUSAL_MIN_ATTEMPTS as le } from "./refusal-lens.js";
+import { suggestCollapse as re, rateText as ne } from "./suggest-collapse.js";
+import { suggestSections as oe } from "./suggest-sections.js";
+import { useLayoutUsageToday as de, useLayoutFriction as ie, useCoChanges as ce, formatDuration as me } from "./usage-api.js";
+const c = "px-3 pb-1.5 pt-4 text-[12px] font-semibold text-slate-700 dark:text-foreground", o = "px-3 text-[12px] leading-snug text-slate-500 dark:text-muted-foreground";
+function m({ label: r, value: p }) {
   return /* @__PURE__ */ s("div", { className: "flex flex-col gap-0.5 bg-white px-2.5 py-2 dark:bg-card", children: [
-    /* @__PURE__ */ t("span", { className: "text-[11px] text-slate-500 dark:text-muted-foreground", children: n }),
-    /* @__PURE__ */ t("span", { className: "text-[14px] font-semibold tabular-nums text-slate-900 dark:text-foreground", children: m })
+    /* @__PURE__ */ t("span", { className: "text-[11px] text-slate-500 dark:text-muted-foreground", children: r }),
+    /* @__PURE__ */ t("span", { className: "text-[14px] font-semibold tabular-nums text-slate-900 dark:text-foreground", children: p })
   ] });
 }
-function j({ children: n }) {
-  return /* @__PURE__ */ t("div", { className: "mx-3 grid grid-cols-3 gap-px overflow-hidden rounded-lg border border-slate-200 bg-slate-200 dark:border-border dark:bg-border", children: n });
+function U({ children: r }) {
+  return /* @__PURE__ */ t("div", { className: "mx-3 grid grid-cols-3 gap-px overflow-hidden rounded-lg border border-slate-200 bg-slate-200 dark:border-border dark:bg-border", children: r });
 }
-function ge({
-  bundle: n,
-  collection: m,
-  fields: b,
-  apply: N,
-  showFill: M,
-  onShowFill: U,
-  onOpenLayout: D
+function Le({
+  bundle: r,
+  collection: p,
+  fields: k,
+  apply: y,
+  showFill: D,
+  onShowFill: E,
+  onOpenLayout: F
 }) {
-  var S;
-  const v = Number(n.layout.id), { data: o, isLoading: P } = Z(v), { data: a, isLoading: p } = ee(v), { data: h, isLoading: T } = te(m), [k, R] = _(() => /* @__PURE__ */ new Set()), [E, F] = _(!1), y = u(() => {
-    const e = new Map(b.map((l) => [l.field, l.label || C(l.field)]));
-    return (l) => e.get(l) ?? C(l);
-  }, [b]), g = (e) => {
+  var C;
+  const h = Number(r.layout.id), { data: d, isLoading: O } = de(h), { data: a, isLoading: g } = ie(h), { data: u, isLoading: A } = ce(p), w = Z(h), { data: n, isLoading: q } = ee(h), [L, G] = j(() => /* @__PURE__ */ new Set()), [I, W] = j(!1), N = b(() => {
+    const e = new Map(k.map((l) => [l.field, l.label || M(l.field)]));
+    return (l) => e.get(l) ?? M(l);
+  }, [k]), x = (e) => {
     var l;
-    return e == null || e === B ? "Ungrouped" : ((l = n.groups.find((x) => x.key === e)) == null ? void 0 : l.label) ?? e;
-  }, O = (e) => e === "__form__" ? "Whole form" : e === "__general__" ? "General" : g(e), A = u(() => new Set(n.placements.map((e) => e.field)), [n.placements]), w = u(
-    () => X(n, (h == null ? void 0 : h.pairs) ?? []).filter((e) => !k.has(e.id)),
-    [n, h, k]
-  ), r = u(
-    () => Q(n, (a == null ? void 0 : a.sections) ?? []),
-    [n, a == null ? void 0 : a.sections]
-  ), f = (a == null ? void 0 : a.steps) ?? [], G = Math.max(1, ...f.map((e) => e.avg_ms)), L = ((a == null ? void 0 : a.changed_after_save.fields) ?? []).slice(0, 8), q = o && !o.ready || a && !a.ready;
+    return e == null || e === V ? "Ungrouped" : ((l = r.groups.find((f) => f.key === e)) == null ? void 0 : l.label) ?? e;
+  }, K = (e) => e === "__form__" ? "Whole form" : e === "__general__" ? "General" : x(e), S = b(() => new Set(r.placements.map((e) => e.field)), [r.placements]), _ = b(
+    () => oe(r, (u == null ? void 0 : u.pairs) ?? []).filter((e) => !L.has(e.id)),
+    [r, u, L]
+  ), i = b(
+    () => re(r, (a == null ? void 0 : a.sections) ?? []),
+    [r, a == null ? void 0 : a.sections]
+  ), v = (a == null ? void 0 : a.steps) ?? [], Y = Math.max(1, ...v.map((e) => e.avg_ms)), $ = ((a == null ? void 0 : a.changed_after_save.fields) ?? []).slice(0, 8), z = d && !d.ready || a && !a.ready;
   return /* @__PURE__ */ s("div", { "data-editor-usage": "", className: "flex flex-col pb-4", children: [
     /* @__PURE__ */ s("div", { className: "flex items-center justify-between gap-2 px-3 pt-3", children: [
       /* @__PURE__ */ t("span", { className: "text-[12.5px] text-slate-700 dark:text-foreground", children: "Show how full each field is" }),
-      /* @__PURE__ */ t(H, { label: "Show how full each field is", checked: M, onChange: U })
+      /* @__PURE__ */ t(R, { label: "Show how full each field is", checked: D, onChange: E })
     ] }),
-    /* @__PURE__ */ t("p", { className: `${d} pt-1`, children: "Each field on the form shows the share of records that have a value." }),
-    q && /* @__PURE__ */ t("p", { role: "note", className: `${d} pt-3`, children: "Usage is not being recorded on this instance yet (its database needs the latest update)." }),
-    /* @__PURE__ */ t("p", { className: i, children: "Today" }),
-    P ? /* @__PURE__ */ t($, { className: "mx-3 h-12 rounded-lg" }) : /* @__PURE__ */ s(j, { children: [
-      /* @__PURE__ */ t(c, { label: "Opens", value: ((o == null ? void 0 : o.opens) ?? 0).toLocaleString() }),
-      /* @__PURE__ */ t(c, { label: "People", value: ((o == null ? void 0 : o.people) ?? 0).toLocaleString() }),
-      /* @__PURE__ */ t(c, { label: "Records", value: ((o == null ? void 0 : o.records) ?? 0).toLocaleString() })
+    /* @__PURE__ */ t("p", { className: `${o} pt-1`, children: "Each field on the form shows the share of records that have a value." }),
+    z && /* @__PURE__ */ t("p", { role: "note", className: `${o} pt-3`, children: "Usage is not being recorded on this instance yet (its database needs the latest update)." }),
+    /* @__PURE__ */ t("p", { className: c, children: "Today" }),
+    O ? /* @__PURE__ */ t(P, { className: "mx-3 h-12 rounded-lg" }) : /* @__PURE__ */ s(U, { children: [
+      /* @__PURE__ */ t(m, { label: "Opens", value: ((d == null ? void 0 : d.opens) ?? 0).toLocaleString() }),
+      /* @__PURE__ */ t(m, { label: "People", value: ((d == null ? void 0 : d.people) ?? 0).toLocaleString() }),
+      /* @__PURE__ */ t(m, { label: "Records", value: ((d == null ? void 0 : d.records) ?? 0).toLocaleString() })
     ] }),
-    /* @__PURE__ */ s("p", { className: i, children: [
+    /* @__PURE__ */ s("p", { className: c, children: [
       "Last ",
       (a == null ? void 0 : a.days) ?? 30,
       " days"
     ] }),
-    p ? /* @__PURE__ */ t($, { className: "mx-3 h-12 rounded-lg" }) : /* @__PURE__ */ s(j, { children: [
-      /* @__PURE__ */ t(c, { label: "Opens", value: ((a == null ? void 0 : a.opens) ?? 0).toLocaleString() }),
-      /* @__PURE__ */ t(c, { label: "Saves", value: ((a == null ? void 0 : a.saves) ?? 0).toLocaleString() }),
-      /* @__PURE__ */ t(c, { label: "Left unfinished", value: ((a == null ? void 0 : a.abandons) ?? 0).toLocaleString() })
+    g ? /* @__PURE__ */ t(P, { className: "mx-3 h-12 rounded-lg" }) : /* @__PURE__ */ s(U, { children: [
+      /* @__PURE__ */ t(m, { label: "Opens", value: ((a == null ? void 0 : a.opens) ?? 0).toLocaleString() }),
+      /* @__PURE__ */ t(m, { label: "Saves", value: ((a == null ? void 0 : a.saves) ?? 0).toLocaleString() }),
+      /* @__PURE__ */ t(m, { label: "Left unfinished", value: ((a == null ? void 0 : a.abandons) ?? 0).toLocaleString() })
     ] }),
-    /* @__PURE__ */ t("p", { className: i, children: "Time per step" }),
-    f.length === 0 ? /* @__PURE__ */ t("p", { className: d, children: p ? "Loading…" : "No visits recorded yet." }) : /* @__PURE__ */ t("ul", { "data-usage-steps": "", className: "flex flex-col gap-2 px-3", children: f.map((e) => /* @__PURE__ */ s("li", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ t("p", { className: c, children: "Time per step" }),
+    v.length === 0 ? /* @__PURE__ */ t("p", { className: o, children: g ? "Loading…" : "No visits recorded yet." }) : /* @__PURE__ */ t("ul", { "data-usage-steps": "", className: "flex flex-col gap-2 px-3", children: v.map((e) => /* @__PURE__ */ s("li", { className: "flex flex-col gap-1", children: [
       /* @__PURE__ */ s("div", { className: "flex items-baseline justify-between gap-2 text-[12px]", children: [
-        /* @__PURE__ */ t("span", { className: "truncate text-slate-800 dark:text-foreground", children: O(e.key) }),
+        /* @__PURE__ */ t("span", { className: "truncate text-slate-800 dark:text-foreground", children: K(e.key) }),
         /* @__PURE__ */ s("span", { className: "shrink-0 tabular-nums text-slate-500 dark:text-muted-foreground", children: [
-          ae(e.avg_ms),
+          me(e.avg_ms),
           e.abandons > 0 && /* @__PURE__ */ s("span", { className: "text-amber-700 dark:text-amber-300", children: [
             " · ",
             e.abandons,
@@ -82,20 +83,20 @@ function ge({
         "div",
         {
           className: "h-full rounded-full bg-slate-400 dark:bg-slate-500",
-          style: { width: `${Math.max(2, Math.round(e.avg_ms / G * 100))}%` }
+          style: { width: `${Math.max(2, Math.round(e.avg_ms / Y * 100))}%` }
         }
       ) })
     ] }, e.key)) }),
-    /* @__PURE__ */ t("p", { className: i, children: "Changed soon after saving" }),
-    L.length === 0 ? /* @__PURE__ */ t("p", { className: d, children: p ? "Loading…" : "No field was changed within a day of a record being created." }) : /* @__PURE__ */ s(W, { children: [
-      /* @__PURE__ */ t("ul", { "data-usage-changed": "", className: "flex flex-col px-3", children: L.map((e) => /* @__PURE__ */ s(
+    /* @__PURE__ */ t("p", { className: c, children: "Changed soon after saving" }),
+    $.length === 0 ? /* @__PURE__ */ t("p", { className: o, children: g ? "Loading…" : "No field was changed within a day of a record being created." }) : /* @__PURE__ */ s(T, { children: [
+      /* @__PURE__ */ t("ul", { "data-usage-changed": "", className: "flex flex-col px-3", children: $.map((e) => /* @__PURE__ */ s(
         "li",
         {
           className: "flex items-baseline justify-between gap-2 border-b border-slate-100 py-1 text-[12px] last:border-0 dark:border-border",
           children: [
             /* @__PURE__ */ s("span", { className: "min-w-0 truncate text-slate-800 dark:text-foreground", children: [
-              y(e.field),
-              !A.has(e.field) && /* @__PURE__ */ s("span", { className: "text-slate-400 dark:text-muted-foreground", children: [
+              N(e.field),
+              !S.has(e.field) && /* @__PURE__ */ s("span", { className: "text-slate-400 dark:text-muted-foreground", children: [
                 " ",
                 "· not on this form"
               ] })
@@ -108,29 +109,76 @@ function ge({
         },
         e.field
       )) }),
-      /* @__PURE__ */ s("p", { className: `${d} pt-1`, children: [
+      /* @__PURE__ */ s("p", { className: `${o} pt-1`, children: [
         "Edits within 24 hours of a record being created, last 90 days",
         (a == null ? void 0 : a.changed_after_save.scope) === "collection" ? ", across every form of this collection." : ", on records opened with this form."
       ] })
     ] }),
-    /* @__PURE__ */ t("p", { className: i, children: "Rarely opened sections" }),
-    p ? /* @__PURE__ */ t("p", { className: d, children: "Loading…" }) : r.candidates.length === 0 || E ? /* @__PURE__ */ t("p", { className: d, children: (S = a == null ? void 0 : a.sections) != null && S.length ? "No suggestion. People open every section that starts open often enough." : "No section visits recorded yet." }) : /* @__PURE__ */ s(
+    /* @__PURE__ */ t("p", { className: c, children: "Where saves fail" }),
+    /* @__PURE__ */ s("div", { className: "flex items-center justify-between gap-2 px-3", children: [
+      /* @__PURE__ */ t("span", { className: "text-[12.5px] text-slate-700 dark:text-foreground", children: "Show where saves fail" }),
+      /* @__PURE__ */ t(R, { label: "Show where saves fail", checked: w.on, onChange: w.setOn })
+    ] }),
+    q ? /* @__PURE__ */ t("p", { className: `${o} pt-1`, children: "Loading…" }) : !n || n.fields.length === 0 ? /* @__PURE__ */ t("p", { className: `${o} pt-1`, children: n != null && n.attempts ? `No save was refused in the last ${n.days} days.` : "No saves recorded yet." }) : /* @__PURE__ */ s(T, { children: [
+      /* @__PURE__ */ t("ul", { "data-usage-refusals": "", className: "flex flex-col px-3 pt-1", children: n.fields.slice(0, 8).map((e) => {
+        const l = te(e.rate);
+        return /* @__PURE__ */ s(
+          "li",
+          {
+            "data-usage-refusal": e.field,
+            "data-tip": se(e, n.attempts, n.days),
+            className: "flex items-baseline justify-between gap-2 border-b border-slate-100 py-1 text-[12px] last:border-0 dark:border-border",
+            children: [
+              /* @__PURE__ */ s("span", { className: "min-w-0 truncate text-slate-800 dark:text-foreground", children: [
+                N(e.field),
+                !S.has(e.field) && /* @__PURE__ */ s("span", { className: "text-slate-400 dark:text-muted-foreground", children: [
+                  " ",
+                  "· not on this form"
+                ] })
+              ] }),
+              /* @__PURE__ */ s(
+                "span",
+                {
+                  className: l === "high" ? "shrink-0 tabular-nums text-red-700 dark:text-red-300" : l === "some" ? "shrink-0 tabular-nums text-amber-700 dark:text-amber-300" : "shrink-0 tabular-nums text-slate-500 dark:text-muted-foreground",
+                  children: [
+                    ae(e.rate),
+                    " of saves"
+                  ]
+                }
+              )
+            ]
+          },
+          e.field
+        );
+      }) }),
+      /* @__PURE__ */ s("p", { className: `${o} pt-1`, children: [
+        n.refused.toLocaleString(),
+        " of ",
+        n.attempts.toLocaleString(),
+        " saves were refused in the last ",
+        n.days,
+        " days — a required field left empty, or a value a rule turned down.",
+        n.attempts < le && " Too few saves yet to tint the form."
+      ] })
+    ] }),
+    /* @__PURE__ */ t("p", { className: c, children: "Rarely opened sections" }),
+    g ? /* @__PURE__ */ t("p", { className: o, children: "Loading…" }) : i.candidates.length === 0 || I ? /* @__PURE__ */ t("p", { className: o, children: (C = a == null ? void 0 : a.sections) != null && C.length ? "No suggestion. People open every section that starts open often enough." : "No section visits recorded yet." }) : /* @__PURE__ */ s(
       "div",
       {
         "data-usage-collapse": "",
         className: "mx-3 flex flex-col gap-2 rounded-lg border border-slate-200 bg-white p-2.5 dark:border-border dark:bg-card",
         children: [
           /* @__PURE__ */ s("p", { className: "m-0 text-[12px] leading-snug text-slate-700 dark:text-foreground", children: [
-            /* @__PURE__ */ t(Y, { className: "mr-1 inline h-3.5 w-3.5 align-[-2px] text-slate-400" }),
+            /* @__PURE__ */ t(J, { className: "mr-1 inline h-3.5 w-3.5 align-[-2px] text-slate-400" }),
             "People rarely open",
             " ",
-            r.candidates.length === 1 ? "this section" : "these sections",
+            i.candidates.length === 1 ? "this section" : "these sections",
             ". Starting",
             " ",
-            r.candidates.length === 1 ? "it" : "them",
+            i.candidates.length === 1 ? "it" : "them",
             " collapsed keeps the form shorter."
           ] }),
-          /* @__PURE__ */ t("ul", { className: "m-0 flex list-none flex-col p-0", children: r.candidates.map((e) => /* @__PURE__ */ s(
+          /* @__PURE__ */ t("ul", { className: "m-0 flex list-none flex-col p-0", children: i.candidates.map((e) => /* @__PURE__ */ s(
             "li",
             {
               "data-usage-collapse-section": e.key,
@@ -139,7 +187,7 @@ function ge({
                 /* @__PURE__ */ t("span", { className: "truncate text-slate-800 dark:text-foreground", children: e.label }),
                 /* @__PURE__ */ s("span", { className: "tabular-nums text-[11.5px] text-slate-500 dark:text-muted-foreground", children: [
                   "opened in ",
-                  V(e.rate),
+                  ne(e.rate),
                   " of ",
                   e.shown.toLocaleString(),
                   " visits"
@@ -153,18 +201,18 @@ function ge({
               "button",
               {
                 type: "button",
-                onClick: () => N(r.ops, {
-                  label: r.candidates.length === 1 ? `Collapse ${r.candidates[0].label}` : `Collapse ${r.candidates.length} rarely opened sections`
+                onClick: () => y(i.ops, {
+                  label: i.candidates.length === 1 ? `Collapse ${i.candidates[0].label}` : `Collapse ${i.candidates.length} rarely opened sections`
                 }),
                 className: "inline-flex h-7 items-center rounded-md bg-nvr-cyan px-2.5 text-[12px] font-medium text-white transition-opacity hover:opacity-90",
-                children: r.candidates.length === 1 ? "Start it collapsed" : `Start all ${r.candidates.length} collapsed`
+                children: i.candidates.length === 1 ? "Start it collapsed" : `Start all ${i.candidates.length} collapsed`
               }
             ),
             /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                onClick: () => F(!0),
+                onClick: () => W(!0),
                 className: "inline-flex h-7 items-center rounded-md px-2 text-[12px] text-slate-500 transition-colors hover:bg-muted hover:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground",
                 children: "Not now"
               }
@@ -173,15 +221,15 @@ function ge({
         ]
       }
     ),
-    /* @__PURE__ */ s("p", { className: `${d} pt-1`, children: [
+    /* @__PURE__ */ s("p", { className: `${o} pt-1`, children: [
       "A section counts as opened when someone expands it, clicks in it or types in it. Last",
       " ",
       (a == null ? void 0 : a.days) ?? 30,
       " days."
     ] }),
-    /* @__PURE__ */ t("p", { className: i, children: "Suggested sections" }),
-    T ? /* @__PURE__ */ t("p", { className: d, children: "Loading…" }) : w.length === 0 ? /* @__PURE__ */ t("p", { className: d, children: "No suggestions. Fields people change together already sit together on this form." }) : /* @__PURE__ */ t("ul", { "data-usage-suggestions": "", className: "flex flex-col gap-2 px-3", children: w.map((e) => {
-      const l = e.fields.map(y), x = l.length > 1 ? `${l.slice(0, -1).join(", ")} and ${l[l.length - 1]}` : l[0], I = [...new Set(Object.values(e.from).map(g))];
+    /* @__PURE__ */ t("p", { className: c, children: "Suggested sections" }),
+    A ? /* @__PURE__ */ t("p", { className: o, children: "Loading…" }) : _.length === 0 ? /* @__PURE__ */ t("p", { className: o, children: "No suggestions. Fields people change together already sit together on this form." }) : /* @__PURE__ */ t("ul", { "data-usage-suggestions": "", className: "flex flex-col gap-2 px-3", children: _.map((e) => {
+      const l = e.fields.map(N), f = l.length > 1 ? `${l.slice(0, -1).join(", ")} and ${l[l.length - 1]}` : l[0], B = [...new Set(Object.values(e.from).map(x))];
       return /* @__PURE__ */ s(
         "li",
         {
@@ -189,11 +237,11 @@ function ge({
           className: "flex flex-col gap-2 rounded-lg border border-slate-200 bg-white p-2.5 dark:border-border dark:bg-card",
           children: [
             /* @__PURE__ */ s("p", { className: "m-0 text-[12px] leading-snug text-slate-700 dark:text-foreground", children: [
-              /* @__PURE__ */ t(z, { className: "mr-1 inline h-3.5 w-3.5 align-[-2px] text-slate-400" }),
+              /* @__PURE__ */ t(Q, { className: "mr-1 inline h-3.5 w-3.5 align-[-2px] text-slate-400" }),
               "People usually change ",
-              /* @__PURE__ */ t("b", { className: "font-semibold", children: x }),
+              /* @__PURE__ */ t("b", { className: "font-semibold", children: f }),
               " together, but they sit in ",
-              I.join(" and "),
+              B.join(" and "),
               "."
             ] }),
             /* @__PURE__ */ s("div", { className: "flex items-center gap-1.5", children: [
@@ -201,11 +249,11 @@ function ge({
                 "button",
                 {
                   type: "button",
-                  onClick: () => N(e.ops, { label: `Move ${x} into ${g(e.target)}` }),
+                  onClick: () => y(e.ops, { label: `Move ${f} into ${x(e.target)}` }),
                   className: "inline-flex h-7 items-center rounded-md bg-nvr-cyan px-2.5 text-[12px] font-medium text-white transition-opacity hover:opacity-90",
                   children: [
                     "Move into ",
-                    g(e.target)
+                    x(e.target)
                   ]
                 }
               ),
@@ -213,7 +261,7 @@ function ge({
                 "button",
                 {
                   type: "button",
-                  onClick: () => R((K) => new Set(K).add(e.id)),
+                  onClick: () => G((H) => new Set(H).add(e.id)),
                   className: "inline-flex h-7 items-center rounded-md px-2 text-[12px] text-slate-500 transition-colors hover:bg-muted hover:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground",
                   children: "Not now"
                 }
@@ -224,9 +272,9 @@ function ge({
         e.id
       );
     }) }),
-    /* @__PURE__ */ t(J, { bundle: n, collection: m, onOpenLayout: D })
+    /* @__PURE__ */ t(X, { bundle: r, collection: p, onOpenLayout: F })
   ] });
 }
 export {
-  ge as UsagePanel
+  Le as UsagePanel
 };

package/dist/shared/components/layout-editor/usage/refusal-lens.js

@@ -0,0 +1,130 @@
+import { jsx as g, jsxs as k } from "react/jsx-runtime";
+import { useQuery as x } from "@tanstack/react-query";
+import { useMemo as f, useCallback as S, useSyncExternalStore as w } from "react";
+import { useNivaroClient as y } from "../../../context.js";
+import { get as R } from "../../../lib/commands.js";
+import { cn as T } from "../../../lib/utils.js";
+import { usageKeys as $ } from "./usage-api.js";
+function L(e, r = !0) {
+  const t = y();
+  return x({
+    queryKey: $.refusals(e ?? 0),
+    queryFn: () => t.request(R(`/layout-usage/${e}/refusals`)).then((n) => (n == null ? void 0 : n.data) ?? null),
+    enabled: r && e != null,
+    staleTime: 5 * 6e4,
+    retry: !1
+  });
+}
+const q = 0.05, E = 0.2, N = 5;
+function p(e) {
+  return e >= E ? "high" : e >= q ? "some" : "none";
+}
+function m(e) {
+  const r = e * 100;
+  return r > 0 && r < 1 ? "<1%" : `${Math.round(r)}%`;
+}
+function v(e, r, t) {
+  const n = [
+    e.required > 0 ? `${e.required} left empty while required` : null,
+    e.invalid > 0 ? `${e.invalid} broke another rule` : null
+  ].filter(Boolean);
+  return `Refused ${e.refusals.toLocaleString()} of ${r.toLocaleString()} saves in ${t} days: ${n.join(", ")}`;
+}
+const F = {
+  none: "",
+  some: "bg-amber-50/70 ring-1 ring-amber-300 dark:bg-amber-500/10 dark:ring-amber-500/40",
+  high: "bg-red-50/70 ring-1 ring-red-300 dark:bg-red-500/10 dark:ring-red-500/40"
+}, M = {
+  none: "bg-white text-slate-500 ring-slate-200 dark:bg-card dark:text-muted-foreground dark:ring-border",
+  some: "bg-amber-50 text-amber-800 ring-amber-200 dark:bg-amber-500/15 dark:text-amber-200 dark:ring-amber-500/30",
+  high: "bg-red-50 text-red-700 ring-red-200 dark:bg-red-500/15 dark:text-red-200 dark:ring-red-500/30"
+};
+function A({
+  f: e,
+  attempts: r,
+  days: t
+}) {
+  const n = p(e.rate);
+  return /* @__PURE__ */ k(
+    "span",
+    {
+      "data-design-refusal": m(e.rate),
+      "data-refusal-tone": n,
+      "data-tip": v(e, r, t),
+      className: T(
+        "pointer-events-auto inline-flex items-center rounded px-1 text-[10.5px] tabular-nums ring-1",
+        M[n]
+      ),
+      children: [
+        m(e.rate),
+        " refused",
+        /* @__PURE__ */ g("span", { className: "sr-only", children: " saves on this field" })
+      ]
+    }
+  );
+}
+function C(e, r) {
+  if (!e || e.attempts < N || r.kind !== "field" && r.kind !== "header") return null;
+  const t = e.fields.find((n) => n.field === r.field);
+  return !t || t.refusals === 0 ? null : {
+    className: F[p(t.rate)],
+    chip: /* @__PURE__ */ g(A, { f: t, attempts: e.attempts, days: e.days })
+  };
+}
+const b = "nvr:layout-editor:show-refusals", i = /* @__PURE__ */ new Set();
+let a = null;
+function I() {
+  if (a != null) return a;
+  try {
+    a = window.localStorage.getItem(b) === "1";
+  } catch {
+    a = !1;
+  }
+  return a;
+}
+function _(e) {
+  a = e;
+  try {
+    window.localStorage.setItem(b, e ? "1" : "0");
+  } catch {
+  }
+  for (const r of i) r();
+}
+function j() {
+  return [w(
+    (r) => (i.add(r), () => i.delete(r)),
+    I,
+    () => !1
+  ), _];
+}
+function G(e) {
+  const [r, t] = j(), { data: n = null } = L(e, r), o = f(
+    () => r && n ? (s) => C(n, s) : null,
+    [r, n]
+  ), u = f(() => /* @__PURE__ */ new WeakMap(), [o]), h = S(
+    (s) => {
+      if (!o) return s;
+      if (!s) return o;
+      const l = u.get(s);
+      if (l) return l;
+      const d = (c) => s(c) ?? o(c);
+      return u.set(s, d), d;
+    },
+    [o, u]
+  );
+  return { on: r, setOn: t, data: n, wrap: h };
+}
+export {
+  E as REFUSAL_HIGH,
+  q as REFUSAL_LOW,
+  N as REFUSAL_MIN_ATTEMPTS,
+  A as RefusalChip,
+  C as refusalOverlayFor,
+  m as refusalPct,
+  v as refusalTip,
+  p as refusalTone,
+  _ as setShowRefusals,
+  G as useRefusalLens,
+  L as useSaveRefusals,
+  j as useShowRefusals
+};

package/dist/shared/components/layout-editor/usage/usage-api.js

@@ -1,22 +1,23 @@
 import { useQuery as a } from "@tanstack/react-query";
-import { useState as d, useCallback as f, useMemo as y } from "react";
+import { useState as f, useCallback as d, useMemo as y } from "react";
 import { useNivaroClient as s } from "../../../context.js";
 import { get as u } from "../../../lib/commands.js";
-const i = {
+const l = {
   fill: (e) => ["layout-editor", "usage", "fill", e],
   today: (e) => ["layout-editor", "usage", "today", e],
   friction: (e) => ["layout-editor", "usage", "friction", e],
-  coChanges: (e) => ["layout-editor", "usage", "co-changes", e]
+  coChanges: (e) => ["layout-editor", "usage", "co-changes", e],
+  refusals: (e) => ["layout-editor", "usage", "refusals", e]
 };
 function $(e, n = !0) {
   const r = s();
   return a({
-    queryKey: i.fill(e),
+    queryKey: l.fill(e),
     queryFn: async () => {
       const t = await r.request(u(`/data-model/${encodeURIComponent(e)}/field-usage`)), o = t == null ? void 0 : t.data;
       return {
         total: Number((o == null ? void 0 : o.total) ?? 0),
-        pct: new Map(((o == null ? void 0 : o.fields) ?? []).map((l) => [l.field, Number(l.pct)]))
+        pct: new Map(((o == null ? void 0 : o.fields) ?? []).map((i) => [i.field, Number(i.pct)]))
       };
     },
     enabled: n && !!e,
@@ -30,7 +31,7 @@ function q(e, n) {
 function F(e, n = !0) {
   const r = s();
   return a({
-    queryKey: i.today(e ?? 0),
+    queryKey: l.today(e ?? 0),
     queryFn: () => r.request(u(`/layout-usage/${e}/today`)).then((t) => (t == null ? void 0 : t.data) ?? null),
     enabled: n && e != null,
     staleTime: 6e4,
@@ -48,7 +49,7 @@ function w(e) {
 function C(e, n = !0) {
   const r = s();
   return a({
-    queryKey: i.friction(e),
+    queryKey: l.friction(e),
     queryFn: () => r.request(u(`/layout-usage/${e}/friction`)).then((t) => (t == null ? void 0 : t.data) ?? null),
     enabled: n,
     staleTime: 5 * 6e4,
@@ -58,7 +59,7 @@ function C(e, n = !0) {
 function T(e, n = !0) {
   const r = s();
   return a({
-    queryKey: i.coChanges(e),
+    queryKey: l.coChanges(e),
     queryFn: () => r.request(
       u(`/layout-usage/co-changes/${encodeURIComponent(e)}`)
     ).then((t) => (t == null ? void 0 : t.data) ?? null),
@@ -76,13 +77,13 @@ function b(e) {
 }
 const c = "nvr:layout-editor:show-fill";
 function K() {
-  const [e, n] = d(() => {
+  const [e, n] = f(() => {
     try {
       return window.localStorage.getItem(c) === "1";
     } catch {
       return !1;
     }
-  }), r = f((t) => {
+  }), r = d((t) => {
     n(t);
     try {
       window.localStorage.setItem(c, t ? "1" : "0");
@@ -94,7 +95,7 @@ function K() {
 export {
   q as fillText,
   b as formatDuration,
-  i as usageKeys,
+  l as usageKeys,
   w as usageTodayText,
   T as useCoChanges,
   $ as useFieldFillRates,