@nivaro/react 0.3.28 → 0.3.30

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

@@ -1,67 +1,68 @@
-import { jsx as c, jsxs as d } from "react/jsx-runtime";
-import { useQuery as m } from "@tanstack/react-query";
-import { useNivaroClient as u } from "../../context.js";
-import { get as f } from "../../lib/commands.js";
-import { useAfterIdle as h } from "../../lib/defer.js";
-import { formatRelative as l, formatDateTime as s } from "../../lib/utils.js";
-import { InboundRequestPopover as p } from "../integrations/InboundRequest.js";
-function x(r, t, n) {
-  const i = u(), a = [...n].sort().join(","), e = h(1500);
-  return m({
-    queryKey: ["field-touch", r, t, a],
-    queryFn: () => i.request(
-      f("/revisions/field-touch", { collection: r, item: t, fields: a })
-    ).then((o) => o.data ?? {}),
-    enabled: e && !!t && t !== "new" && n.length > 0,
+import { jsx as o } from "react/jsx-runtime";
+import { useQuery as b } from "@tanstack/react-query";
+import { Info as f } from "lucide-react";
+import { useNivaroClient as v } from "../../context.js";
+import { get as x } from "../../lib/commands.js";
+import { useAfterIdle as $ } from "../../lib/defer.js";
+import { cn as p, formatDateTime as d, formatRelative as h } from "../../lib/utils.js";
+import { InboundRequestPopover as g } from "../integrations/InboundRequest.js";
+function k(a, t, i) {
+  const s = v(), n = [...i].sort().join(","), r = $(1500);
+  return b({
+    queryKey: ["field-touch", a, t, n],
+    queryFn: () => s.request(
+      x("/revisions/field-touch", { collection: a, item: t, fields: n })
+    ).then((e) => e.data ?? {}),
+    enabled: r && !!t && t !== "new" && i.length > 0,
     staleTime: 6e4
   });
 }
-function $({
-  collection: r,
+function _({
+  collection: a,
   itemId: t,
-  field: n,
-  fields: i
+  field: i,
+  fields: s,
+  className: n
 }) {
-  const { data: a } = x(r, t, i), e = a == null ? void 0 : a[n];
+  const { data: r } = k(a, t, s), e = r == null ? void 0 : r[i];
   if (!e) return null;
-  const o = e.via !== "user";
-  return e.caller && e.activity_id ? /* @__PURE__ */ c(
-    p,
-    {
-      activityId: e.activity_id,
-      callerName: e.caller.name,
-      collection: r,
-      itemId: t,
-      children: /* @__PURE__ */ d(
-        "button",
-        {
-          type: "button",
-          "data-copy-skip": !0,
-          "data-field-touch-caller": e.caller.key,
-          className: "mt-0.5 block max-w-full truncate text-left text-[10px] leading-none text-amber-700/80 underline decoration-dotted underline-offset-2 hover:text-amber-800 dark:text-amber-300/80 dark:hover:text-amber-200 [[data-header-dense]_&]:hidden",
-          "data-tip": `${e.caller.name} · ${s(e.at)} — click for the request`,
-          children: [
-            e.caller.name,
-            " · ",
-            l(e.at)
-          ]
-        }
-      )
-    }
-  ) : /* @__PURE__ */ d(
-    "span",
-    {
-      "data-copy-skip": !0,
-      className: o ? "mt-0.5 block truncate text-[10px] leading-none text-amber-700/80 dark:text-amber-300/80 [[data-header-dense]_&]:hidden" : "mt-0.5 block truncate text-[10px] leading-none text-slate-400 dark:text-slate-500 [[data-header-dense]_&]:hidden",
-      "data-tip": `${e.who} · ${s(e.at)}`,
-      children: [
-        l(e.at),
-        o ? ` · ${e.via === "import" ? e.who : e.via}` : ""
-      ]
-    }
+  const c = e.via !== "user", l = p(
+    "h-3 w-3",
+    c ? "text-amber-600/80 dark:text-amber-300/80" : "text-slate-400 dark:text-slate-500"
+  ), u = p(
+    "flex h-3 w-3 items-center justify-center rounded-sm opacity-70 hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-nvr-cyan",
+    n
+  );
+  if (e.caller && e.activity_id)
+    return /* @__PURE__ */ o(
+      g,
+      {
+        activityId: e.activity_id,
+        callerName: e.caller.name,
+        collection: a,
+        itemId: t,
+        children: /* @__PURE__ */ o(
+          "button",
+          {
+            type: "button",
+            "data-copy-skip": !0,
+            "data-field-touch-caller": e.caller.key,
+            "aria-label": `Changed by ${e.caller.name} ${h(e.at)} — open the request`,
+            className: u,
+            "data-tip": `${e.caller.name} · ${d(e.at)} — click for the request`,
+            onClick: (y) => y.stopPropagation(),
+            children: /* @__PURE__ */ o(f, { className: l })
+          }
+        )
+      }
+    );
+  const m = `Changed by ${c && e.via !== "import" ? `${e.who} (${e.via})` : e.who} · ${d(e.at)} (${h(e.at)})`;
+  return (
+    // biome-ignore lint/a11y/noNoninteractiveTabindex: focusable so keyboard users get the tip
+    /* @__PURE__ */ o("span", { "data-copy-skip": !0, tabIndex: 0, role: "img", "aria-label": m, "data-tip": m, className: u, children: /* @__PURE__ */ o(f, { className: l }) })
   );
 }
 export {
-  $ as HeaderFreshness,
-  x as useFieldTouches
+  _ as HeaderFreshness,
+  k as useFieldTouches
 };

package/dist/shared/components/layout-editor/inspector/HeaderItemInspector.js

@@ -1,11 +1,11 @@
 import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { X as O } from "lucide-react";
-import { useState as x, useEffect as w } from "react";
+import { X as x } from "lucide-react";
+import { useState as O, useEffect as w } from "react";
 import { cn as v } from "../../../lib/utils.js";
-import { effectText as f, inputBase as L, tintCard as T } from "../panel-style.js";
-import { useInspectorEnv as A, Setting as c, TextInput as N, Choice as _, Segmented as k, AddButton as E, Section as J, JsonInput as R } from "./kit.js";
-import { bindingValue as h, withStaticBinding as H } from "./model.js";
-const P = [
+import { effectText as _, inputBase as L, tintCard as T } from "../panel-style.js";
+import { useInspectorEnv as A, Setting as c, TextInput as N, Choice as b, Segmented as k, AddButton as R, Section as E, JsonInput as J } from "./kit.js";
+import { bindingValue as h, withStaticBinding as $ } from "./model.js";
+const H = [
   { value: "text", label: "Text" },
   { value: "currency", label: "Currency ($)" },
   { value: "integer", label: "Whole number" },
@@ -21,7 +21,7 @@ const P = [
   { value: "amber", label: "Amber" },
   { value: "red", label: "Red" },
   { value: "purple", label: "Purple" }
-], $ = [
+], P = [
   { value: "", label: "Normal" },
   { value: "medium", label: "Medium" },
   { value: "semibold", label: "Semibold" },
@@ -34,8 +34,8 @@ const P = [
 function I(t) {
   if (!Array.isArray(t)) return 'Needs a list like [{ "op": "gt", "value": 0, "color": "red" }]';
   for (const l of t) {
-    const o = l;
-    if (!o || !S.has(o.op ?? "") || o.value == null || !o.color)
+    const r = l;
+    if (!r || !S.has(r.op ?? "") || r.value == null || !r.color)
       return "Each needs op (lt, lte, gt, gte, eq), value and color";
   }
   return null;
@@ -47,11 +47,11 @@ const d = (t) => typeof t == "string" ? t : "", B = [
   { value: "gte", label: "is at least" },
   { value: "eq", label: "equals" }
 ], g = (t) => Array.isArray(t) ? t.map((l) => {
-  const o = l ?? {};
+  const r = l ?? {};
   return {
-    op: o.op ?? "gt",
-    value: o.value == null ? "" : String(o.value),
-    color: o.color ?? ""
+    op: r.op ?? "gt",
+    value: r.value == null ? "" : String(r.value),
+    color: r.color ?? ""
   };
 }) : [], y = (t) => t.filter((l) => S.has(l.op) && l.value.trim() !== "" && l.color).map((l) => ({
   op: l.op,
@@ -62,28 +62,28 @@ function q({
   value: t,
   onChange: l
 }) {
-  const o = JSON.stringify(y(g(t))), [u, s] = x(() => g(t));
+  const r = JSON.stringify(y(g(t))), [u, s] = O(() => g(t));
   w(() => {
     s(
-      (r) => JSON.stringify(y(r)) === o ? r : g(JSON.parse(o))
+      (o) => JSON.stringify(y(o)) === r ? o : g(JSON.parse(r))
     );
-  }, [o]);
-  const m = (r) => {
-    s(r);
-    const n = y(r);
-    JSON.stringify(n) !== o && l(n.length ? n : null);
-  }, a = (r, n) => m(u.map((i, b) => b === r ? { ...i, ...n } : i));
+  }, [r]);
+  const m = (o) => {
+    s(o);
+    const n = y(o);
+    JSON.stringify(n) !== r && l(n.length ? n : null);
+  }, a = (o, n) => m(u.map((i, f) => f === o ? { ...i, ...n } : i));
   return /* @__PURE__ */ p("div", { className: "space-y-2", children: [
-    u.length === 0 ? /* @__PURE__ */ e("p", { className: f, children: "No rules: the value keeps the colour above." }) : /* @__PURE__ */ e("ul", { className: "space-y-2", children: u.map((r, n) => (
+    u.length === 0 ? /* @__PURE__ */ e("p", { className: _, children: "No rules: the value keeps the colour above." }) : /* @__PURE__ */ e("ul", { className: "space-y-2", children: u.map((o, n) => (
       // biome-ignore lint/suspicious/noArrayIndexKey: rules are positional
       /* @__PURE__ */ p("li", { className: v(T, "space-y-1.5 p-2.5"), "data-threshold-row": "", children: [
         /* @__PURE__ */ p("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ e("span", { className: v(f, "shrink-0"), children: "When it" }),
+          /* @__PURE__ */ e("span", { className: v(_, "shrink-0"), children: "When it" }),
           /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e(
-            _,
+            b,
             {
               ariaLabel: "Comparison",
-              value: r.op,
+              value: o.op,
               options: B,
               onChange: (i) => a(n, { op: i })
             }
@@ -94,9 +94,9 @@ function q({
               type: "button",
               "aria-label": "Remove rule",
               "data-tip": "Remove rule",
-              onClick: () => m(u.filter((i, b) => b !== n)),
+              onClick: () => m(u.filter((i, f) => f !== n)),
               className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded text-slate-500 transition-colors hover:bg-slate-100 hover:text-red-600 dark:hover:bg-muted dark:hover:text-red-400",
-              children: /* @__PURE__ */ e(O, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ e(x, { className: "h-3.5 w-3.5" })
             }
           )
         ] }),
@@ -105,18 +105,18 @@ function q({
             "input",
             {
               "aria-label": "Value",
-              value: r.value,
+              value: o.value,
               placeholder: "0",
               onChange: (i) => a(n, { value: i.target.value }),
               className: v(L, "w-24 shrink-0")
             }
           ),
-          /* @__PURE__ */ e("span", { className: v(f, "shrink-0"), children: "show it" }),
+          /* @__PURE__ */ e("span", { className: v(_, "shrink-0"), children: "show it" }),
           /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ e(
-            _,
+            b,
             {
               ariaLabel: "Colour",
-              value: r.color,
+              value: o.color,
               options: [{ value: "", label: "Pick a colour…" }, ...C.slice(1)],
               onChange: (i) => a(n, { color: i })
             }
@@ -124,27 +124,27 @@ function q({
         ] })
       ] }, n)
     )) }),
-    /* @__PURE__ */ e(E, { onClick: () => s([...u, { op: "gt", value: "", color: "" }]), children: "+ Add a colour rule" }),
-    /* @__PURE__ */ e(J, { title: "Edit as JSON", collapsible: !0, className: "border-t-0 pt-1", children: /* @__PURE__ */ e(
-      R,
+    /* @__PURE__ */ e(R, { onClick: () => s([...u, { op: "gt", value: "", color: "" }]), children: "+ Add a colour rule" }),
+    /* @__PURE__ */ e(E, { title: "Edit as JSON", collapsible: !0, className: "border-t-0 pt-1", children: /* @__PURE__ */ e(
+      J,
       {
         ariaLabel: "Colour by value as JSON",
         rows: 3,
-        value: o === "[]" ? null : JSON.parse(o),
+        value: r === "[]" ? null : JSON.parse(r),
         placeholder: '[{ "op": "gt", "value": 0, "color": "red" }]',
         validate: I,
-        onCommit: (r) => l(Array.isArray(r) && r.length ? r : null)
+        onCommit: (o) => l(Array.isArray(o) && o.length ? o : null)
       }
     ) })
   ] });
 }
 function Y({ row: t, label: l }) {
-  const o = A(), u = { field: t.field, group_key: t.group_key }, s = (a, r, n, i) => o.apply(
+  const r = A(), u = { field: t.field, group_key: t.group_key }, s = (a, o, n, i) => r.apply(
     [
       {
         op: "update_placement",
         at: u,
-        patch: { input_bindings: H(t, a, r) }
+        patch: { input_bindings: $(t, a, o) }
       }
     ],
     { label: n, text: i }
@@ -164,7 +164,7 @@ function Y({ row: t, label: l }) {
         ariaLabel: "Label",
         value: t.label_override ?? "",
         placeholder: l,
-        onChange: (a) => o.apply([{ op: "update_placement", at: u, patch: { label_override: a || null } }], {
+        onChange: (a) => r.apply([{ op: "update_placement", at: u, patch: { label_override: a || null } }], {
           label: `Rename ${l} in the header`,
           text: !0
         })
@@ -177,18 +177,18 @@ function Y({ row: t, label: l }) {
         label: "Format",
         effect: "How the value is written in the header.",
         children: /* @__PURE__ */ e(
-          _,
+          b,
           {
             ariaLabel: "Format",
             value: d(h(t, "__display_format__")) || "text",
-            options: P,
+            options: H,
             onChange: (a) => s("__display_format__", a === "text" ? null : a, `Change the format of ${l}`)
           }
         )
       }
     ),
     /* @__PURE__ */ e(c, { k: "header.color", label: "Colour", effect: "The colour of the value in the header.", children: /* @__PURE__ */ e(
-      _,
+      b,
       {
         ariaLabel: "Colour",
         value: d(h(t, "__color__")),
@@ -200,7 +200,7 @@ function Y({ row: t, label: l }) {
       k,
       {
         value: d(h(t, "__weight__")),
-        options: $,
+        options: P,
         onChange: (a) => s("__weight__", a || null, `Change the weight of ${l}`)
       }
     ) }),
@@ -256,13 +256,23 @@ function Y({ row: t, label: l }) {
           }
         )
       }
-    )
+    ),
+    /* @__PURE__ */ e("div", { className: "border-t border-slate-200 pt-3 dark:border-border", children: /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        "data-header-remove": !0,
+        onClick: () => r.apply([{ op: "remove", at: u }], { label: `Remove ${l} from the header` }),
+        className: "text-[12px] text-red-600 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-nvr-cyan dark:text-red-400",
+        children: "Remove from header"
+      }
+    ) })
   ] });
 }
 export {
   C as COLORS,
   D as DISPLAY_AS,
-  P as HEADER_FORMATS,
+  H as HEADER_FORMATS,
   Y as HeaderItemInspector,
-  $ as WEIGHTS
+  P as WEIGHTS
 };