@nivaro/react 0.3.36 → 0.3.37

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

@@ -1,30 +1,32 @@
-import { useQuery as f } from "@tanstack/react-query";
-import { useMemo as s } from "react";
-import { useNivaroClient as c } from "../../../context.js";
-import { get as d } from "../../../lib/commands.js";
-import { mergeInherited as y, lintLayout as g, layoutHealth as p, EMPTY_LINT_CONTEXT as m } from "../../../lib/layout-lint.js";
-const _ = {
+import { useQuery as y, useQueryClient as g, useMutation as m } from "@tanstack/react-query";
+import { useMemo as p } from "react";
+import { useNivaroClient as i } from "../../../context.js";
+import { get as f, patch as h } from "../../../lib/commands.js";
+import { mergeInherited as k, lintLayout as q, layoutHealth as T, EMPTY_LINT_CONTEXT as x } from "../../../lib/layout-lint.js";
+const o = {
   context: (t) => ["layout-editor", "lint-context", t],
   health: (t) => ["layout-editor", "health", t],
-  coverage: (t) => ["layout-editor", "coverage", t]
+  coverage: (t) => ["layout-editor", "coverage", t],
+  style: ["layout-editor", "lint-style"]
 };
-function k(t) {
+function l(t) {
   if (!t || typeof t != "object") return null;
   const e = t.data;
   return e && typeof e == "object" ? e : t;
 }
-function h(t, e = !0) {
-  const n = c();
-  return f({
-    queryKey: _.context(t),
+function L(t, e = !0) {
+  const r = i();
+  return y({
+    queryKey: o.context(t),
     queryFn: async () => {
-      const r = k(
-        await n.request(d("/collection-layouts/lint-context", { collection: t }))
+      const n = l(
+        await r.request(f("/collection-layouts/lint-context", { collection: t }))
       );
       return {
-        fields: (r == null ? void 0 : r.fields) ?? [],
-        roles: (r == null ? void 0 : r.roles) ?? [],
-        requirements: (r == null ? void 0 : r.requirements) ?? []
+        fields: (n == null ? void 0 : n.fields) ?? [],
+        roles: (n == null ? void 0 : n.roles) ?? [],
+        requirements: (n == null ? void 0 : n.requirements) ?? [],
+        style: (n == null ? void 0 : n.style) ?? null
       };
     },
     enabled: e,
@@ -32,21 +34,56 @@ function h(t, e = !0) {
     retry: !1
   });
 }
-function C(t, e, n = null) {
-  const { data: r, isSuccess: i, isError: o } = h(t, !!e);
-  return s(() => {
+function Q(t, e, r = null) {
+  const { data: n, isSuccess: u, isError: s } = L(t, !!e);
+  return p(() => {
     if (!e) return { findings: [], health: null, ready: !1 };
-    const a = r ?? m, u = y(e, n), l = g(u, a);
-    return { findings: l, health: p(u, l), ready: i || o };
-  }, [e, n, r, i, o]);
+    const _ = n ?? x, a = k(e, r), c = q(a, _);
+    return { findings: c, health: T(a, c), ready: u || s };
+  }, [e, r, n, u, s]);
 }
-function E(t) {
+function C(t) {
   const e = t.target;
   return e.kind === "group" ? { kind: "group", key: e.key } : e.kind !== "field" ? null : e.group_key === "__header__" ? { kind: "header", field: e.field } : /^__.*__$/.test(e.field) ? { kind: "slot", field: e.field, group_key: e.group_key } : { kind: "field", field: e.field, group_key: e.group_key };
 }
+const d = {
+  off: [],
+  max_label_length: null,
+  jargon: [],
+  allow_words: []
+};
+function M(t = !0) {
+  const e = i();
+  return y({
+    queryKey: o.style,
+    queryFn: async () => ({
+      ...d,
+      ...l(
+        await e.request(f("/collection-layouts/lint-style"))
+      ) ?? {}
+    }),
+    enabled: t,
+    staleTime: 6e4,
+    retry: !1
+  });
+}
+function N() {
+  const t = i(), e = g();
+  return m({
+    mutationFn: async (r) => l(
+      await t.request(h("/collection-layouts/lint-style", r))
+    ) ?? d,
+    onSuccess: (r) => {
+      e.setQueryData(o.style, r), e.invalidateQueries({ queryKey: ["layout-editor", "lint-context"] }), e.invalidateQueries({ queryKey: ["layout-editor", "health"] });
+    }
+  });
+}
 export {
-  E as findingDesignTarget,
-  _ as lintKeys,
-  C as useLayoutLint,
-  h as useLintContext
+  d as EMPTY_LINT_STYLE,
+  C as findingDesignTarget,
+  o as lintKeys,
+  Q as useLayoutLint,
+  L as useLintContext,
+  M as useLintStyle,
+  N as useSaveLintStyle
 };

package/dist/shared/components/layout-editor/nav/NavTools.js

@@ -1,12 +1,13 @@
 import { jsxs as a, jsx as e, Fragment as p } from "react/jsx-runtime";
-import { Search as s, ListTree as i, ZoomOut as d, ChevronsUpDown as h, ChevronsDownUp as m, Keyboard as u } from "lucide-react";
+import { Search as s, ListTree as i, ZoomOut as m, ChevronsUpDown as d, ChevronsDownUp as h, Keyboard as u } from "lucide-react";
 import { Popover as l, PopoverContent as r } from "../../ui/popover.js";
 import { keyLabels as b } from "../shortcuts.js";
 import { ToolButton as n } from "../toolbar-kit.js";
 import { FindPanel as C } from "./FindPanel.js";
 import { ShortcutSheet as f } from "./ShortcutSheet.js";
+import { ZoomRow as g } from "./ZoomControls.js";
 const t = (o) => b(o).join("");
-function F({ find: o }) {
+function S({ find: o }) {
   return /* @__PURE__ */ a(l, { open: o.open, onOpenChange: o.onOpenChange, children: [
     /* @__PURE__ */ e(
       n,
@@ -33,7 +34,7 @@ function F({ find: o }) {
     )
   ] });
 }
-function N({ outline: o }) {
+function T({ outline: o }) {
   return o ? /* @__PURE__ */ e(
     n,
     {
@@ -47,13 +48,14 @@ function N({ outline: o }) {
     }
   ) : null;
 }
-function S({ view: o }) {
+function A({ view: o }) {
   return o ? /* @__PURE__ */ a(p, { children: [
+    o.zoom && /* @__PURE__ */ e(g, { zoom: o.zoom }),
     /* @__PURE__ */ e(
       n,
       {
         label: "Compact canvas",
-        icon: /* @__PURE__ */ e(d, { className: "h-4 w-4" }),
+        icon: /* @__PURE__ */ e(m, { className: "h-4 w-4" }),
         hint: "Smaller spacing and inputs, here only",
         checked: o.compact,
         onClick: () => o.onCompact(!o.compact),
@@ -64,7 +66,7 @@ function S({ view: o }) {
       n,
       {
         label: "Expand all",
-        icon: /* @__PURE__ */ e(h, { className: "h-4 w-4" }),
+        icon: /* @__PURE__ */ e(d, { className: "h-4 w-4" }),
         hint: "Every step and tab shown",
         onClick: o.onExpandAll,
         data: { "data-editor-expand-all": "" }
@@ -74,14 +76,14 @@ function S({ view: o }) {
       n,
       {
         label: "Collapse all",
-        icon: /* @__PURE__ */ e(m, { className: "h-4 w-4" }),
+        icon: /* @__PURE__ */ e(h, { className: "h-4 w-4" }),
         onClick: o.onCollapseAll,
         data: { "data-editor-collapse-all": "" }
       }
     )
   ] }) : null;
 }
-function T({ shortcuts: o }) {
+function P({ shortcuts: o }) {
   return /* @__PURE__ */ a(l, { open: o.open, onOpenChange: o.onOpenChange, children: [
     /* @__PURE__ */ e(
       n,
@@ -107,8 +109,8 @@ function T({ shortcuts: o }) {
   ] });
 }
 export {
-  F as FindTool,
-  N as OutlineTool,
-  T as ShortcutsTool,
-  S as ViewTools
+  S as FindTool,
+  T as OutlineTool,
+  P as ShortcutsTool,
+  A as ViewTools
 };

package/dist/shared/components/layout-editor/nav/ZoomControls.js

@@ -0,0 +1,145 @@
+import { jsxs as a, jsx as t, Fragment as h } from "react/jsx-runtime";
+import { Maximize2 as d, Minus as x, Plus as b } from "lucide-react";
+import { createPortal as f } from "react-dom";
+import { cn as v } from "../../../lib/utils.js";
+import { useBarMenu as g } from "../toolbar-kit.js";
+import { ZOOM_STEP as r, ZOOM_MAX as c, ZOOM_MIN as u } from "./view-prefs.js";
+const o = (e) => `${Math.round(e * 100)}%`, i = "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-slate-600 transition-colors hover:bg-muted hover:text-slate-900 disabled:pointer-events-none disabled:opacity-40 dark:text-muted-foreground dark:hover:text-foreground", s = "inline-flex h-6 shrink-0 items-center gap-1 rounded px-1.5 text-[12px] font-medium text-slate-700 transition-colors hover:bg-muted dark:text-foreground";
+function m({ zoom: e }) {
+  return /* @__PURE__ */ a(h, { children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Zoom out",
+        "data-tip": "Zoom out",
+        "data-zoom-out": "",
+        disabled: e.value <= u,
+        onClick: () => e.onChange(e.value - r * 2),
+        className: i,
+        children: /* @__PURE__ */ t(x, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Zoom in",
+        "data-tip": "Zoom in",
+        "data-zoom-in": "",
+        disabled: e.value >= c,
+        onClick: () => e.onChange(e.value + r * 2),
+        className: i,
+        children: /* @__PURE__ */ t(b, { className: "h-3.5 w-3.5" })
+      }
+    )
+  ] });
+}
+function M({ zoom: e }) {
+  const n = g(), l = /* @__PURE__ */ a(
+    "div",
+    {
+      "data-editor-zoom": "",
+      className: "flex shrink-0 flex-col gap-1.5 rounded-md px-2 py-1.5 text-[12.5px] text-slate-700 dark:text-foreground",
+      children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ t("span", { className: "font-medium text-slate-900 dark:text-foreground", children: "Zoom" }),
+          /* @__PURE__ */ t(
+            "span",
+            {
+              "data-zoom-value": "",
+              className: "tabular-nums text-[12px] text-slate-500 dark:text-muted-foreground",
+              children: o(e.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ t(m, { zoom: e }),
+          /* @__PURE__ */ t(
+            "input",
+            {
+              type: "range",
+              "aria-label": "Canvas zoom",
+              "aria-valuetext": o(e.value),
+              "data-zoom-slider": "",
+              min: u,
+              max: c,
+              step: r,
+              value: e.value,
+              onChange: (p) => e.onChange(Number(p.target.value)),
+              className: "h-1.5 min-w-0 flex-1 cursor-pointer accent-nvr-cyan"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              "data-zoom-fit": "",
+              "data-tip": "Fit the form’s width to the canvas",
+              onClick: e.onFit,
+              className: s,
+              children: [
+                /* @__PURE__ */ t(d, { className: "h-3 w-3" }),
+                "Fit to screen"
+              ]
+            }
+          ),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              "data-zoom-reset": "",
+              disabled: e.value === 1,
+              onClick: () => e.onChange(1),
+              className: v(s, "disabled:pointer-events-none disabled:opacity-40"),
+              children: "100%"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  return n ? !n.open || !n.list ? null : f(l, n.list) : l;
+}
+function F({ zoom: e }) {
+  return e.value === 1 ? null : /* @__PURE__ */ a(
+    "fieldset",
+    {
+      "data-zoom-chip": "",
+      "aria-label": "Canvas zoom",
+      className: "sticky bottom-3 z-30 -mt-10 mb-3 mr-3 flex h-7 min-w-0 items-center gap-0.5 self-end rounded-md border border-slate-200 bg-white px-1 shadow-sm dark:border-border dark:bg-card",
+      children: [
+        /* @__PURE__ */ t(m, { zoom: e }),
+        /* @__PURE__ */ t("span", { className: "min-w-[3ch] px-1 text-center text-[12px] tabular-nums text-slate-700 dark:text-foreground", children: o(e.value) }),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Fit to screen",
+            "data-tip": "Fit the form’s width to the canvas",
+            onClick: e.onFit,
+            className: i,
+            children: /* @__PURE__ */ t(d, { className: "h-3 w-3" })
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            "data-zoom-chip-reset": "",
+            "data-tip": "Back to 100%",
+            onClick: () => e.onChange(1),
+            className: s,
+            children: "100%"
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  F as ZoomChip,
+  M as ZoomRow
+};

package/dist/shared/components/layout-editor/nav/useEditorNav.js

@@ -1,89 +1,89 @@
-import { useState as l, useRef as h, useMemo as S, useCallback as y, useEffect as j } from "react";
-import { toast as z } from "sonner";
-import { targetKey as B } from "../design-context.js";
-import { isTyping as G } from "../is-typing.js";
-import { buildOutline as J } from "./tree.js";
-import { useViewPref as A } from "./view-prefs.js";
-function Q(a, s, f, d) {
+import { useState as a, useRef as C, useMemo as S, useCallback as y, useEffect as j } from "react";
+import { toast as B } from "sonner";
+import { targetKey as G } from "../design-context.js";
+import { isTyping as J } from "../is-typing.js";
+import { buildOutline as Q } from "./tree.js";
+import { useViewPref as A, useCanvasZoom as U } from "./view-prefs.js";
+function W(l, s, f, d) {
   let r = 0;
   const c = () => {
     const i = document.querySelector(
-      `[data-layout-editor] [data-editor-canvas] [data-design-target="${CSS.escape(a)}"]`
+      `[data-layout-editor] [data-editor-canvas] [data-design-target="${CSS.escape(l)}"]`
     );
     if (i) return f(i);
     r++, d(r), r < s && window.setTimeout(c, 120);
   };
   requestAnimationFrame(c);
 }
-function te({
-  bodyRef: a,
+function re({
+  bodyRef: l,
   bundle: s,
   parent: f,
   fields: d,
   onSelect: r,
   showHidden: c,
   setShowHidden: i,
-  canvasShown: C
+  canvasShown: h
 }) {
-  const [_, b] = l(null), [L, x] = l(null), [D, p] = l(!1), [H, M] = l(0), [P, k] = l(!1), [R, T] = A("outline"), [V, I] = A("compact"), m = h(0), K = h(c);
+  const [_, b] = a(null), [L, x] = a(null), [D, m] = a(!1), [H, M] = a(0), [P, k] = a(!1), [R, T] = A("outline"), [V, Z] = A("compact"), [z, I] = U(), p = C(0), K = C(c);
   K.current = c;
   const q = S(() => {
     const t = new Map(d.map((e) => [e.field, e.label ?? null]));
     return (e) => t.get(e);
   }, [d]), E = S(
-    () => s ? J(s, f, q) : [],
+    () => s ? Q(s, f, q) : [],
     [s, f, q]
-  ), w = y(
+  ), v = y(
     (t, e) => {
-      if (r(t, e), m.current += 1, x({ target: t, seq: m.current }), !C) return;
+      if (r(t, e), p.current += 1, x({ target: t, seq: p.current }), !h) return;
       const n = (t.kind === "field" || t.kind === "slot" && t.group_key !== null) && t.field !== "__subtitle__";
       let g = !1;
-      Q(
-        B(t),
+      W(
+        G(t),
         14,
         (o) => {
           var u;
           (u = o.scrollIntoView) == null || u.call(o, { block: "center" }), e != null && e.focus && o.focus({ preventScroll: !0 });
         },
         (o) => {
-          o === 4 && n && !K.current && !g && (g = !0, i(!0), z.info("Show hidden is on: what you picked is hidden on this form"));
+          o === 4 && n && !K.current && !g && (g = !0, i(!0), B.info("Show hidden is on: what you picked is hidden on this form"));
         }
       );
     },
-    [r, i, C]
-  ), v = h(!1), N = y((t) => {
-    v.current && (v.current = !1, t.preventDefault());
+    [r, i, h]
+  ), w = C(!1), N = y((t) => {
+    w.current && (w.current = !1, t.preventDefault());
   }, []), $ = y(
     (t) => {
-      t.node.target && (v.current = !0, p(!1), w(t.node.target, { focus: !0 }));
+      t.node.target && (w.current = !0, m(!1), v(t.node.target, { focus: !0 }));
     },
-    [w]
+    [v]
   ), F = y((t) => {
-    m.current += 1, b({ open: t, seq: m.current });
+    p.current += 1, b({ open: t, seq: p.current });
   }, []);
   return j(() => {
     const t = (e) => {
       var o, u;
       const n = e.target instanceof HTMLElement ? e.target : null;
-      if (!(!(!n || n === document.body || n === document.documentElement || (o = a.current) != null && o.contains(n) || (u = n.closest) != null && u.call(n, "[data-radix-popper-content-wrapper]")) || e.defaultPrevented)) {
+      if (!(!(!n || n === document.body || n === document.documentElement || (o = l.current) != null && o.contains(n) || (u = n.closest) != null && u.call(n, "[data-radix-popper-content-wrapper]")) || e.defaultPrevented)) {
         if ((e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === "f") {
-          e.preventDefault(), k(!1), p(!0), M((O) => O + 1);
+          e.preventDefault(), k(!1), m(!0), M((O) => O + 1);
           return;
         }
-        e.key === "?" && !e.metaKey && !e.ctrlKey && !e.altKey && !G(n) && (e.preventDefault(), p(!1), k((O) => !O));
+        e.key === "?" && !e.metaKey && !e.ctrlKey && !e.altKey && !J(n) && (e.preventDefault(), m(!1), k((O) => !O));
       }
     };
     return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
-  }, [a]), {
+  }, [l]), {
     nodes: E,
     fold: _,
     reveal: L,
-    selectAndReveal: w,
+    selectAndReveal: v,
     expandAll: () => F(!0),
     collapseAll: () => F(!1),
     find: {
       open: D,
-      onOpenChange: p,
+      onOpenChange: m,
       nodes: E,
       onPick: $,
       focusSeq: H,
@@ -93,9 +93,11 @@ function te({
     outlineOpen: R,
     setOutlineOpen: T,
     compact: V,
-    setCompact: I
+    setCompact: Z,
+    zoom: z,
+    setZoom: I
   };
 }
 export {
-  te as useEditorNav
+  re as useEditorNav
 };

package/dist/shared/components/layout-editor/nav/view-prefs.js

@@ -1,34 +1,119 @@
-import { useState as a, useCallback as l } from "react";
-const o = {
+import { useState as m, useCallback as S, useSyncExternalStore as y } from "react";
+const a = {
   compact: "nvr_layout_editor_compact",
   outline: "nvr_layout_editor_outline"
 };
-function i(t) {
+function M(t) {
   try {
-    return localStorage.getItem(o[t]) === "1";
+    return localStorage.getItem(a[t]) === "1";
   } catch {
     return !1;
   }
 }
-function u(t, e) {
+function h(t, e) {
   try {
-    e ? localStorage.setItem(o[t], "1") : localStorage.removeItem(o[t]);
+    e ? localStorage.setItem(a[t], "1") : localStorage.removeItem(a[t]);
   } catch {
   }
 }
-function f(t) {
-  const [e, c] = a(() => i(t)), n = l(
+function N(t) {
+  const [e, n] = m(() => M(t)), o = S(
     (r) => {
-      c(r), u(t, r);
+      n(r), h(t, r);
     },
     [t]
   );
-  return [e, n];
+  return [e, o];
+}
+const g = 0.8, u = "nvr_layout_editor_zoom", O = 0.3, w = 1.5, i = 0.05;
+function f(t) {
+  if (!Number.isFinite(t) || t <= 0) return 1;
+  const e = Math.round(t / i) * i;
+  return Math.round(Math.min(w, Math.max(O, e)) * 100) / 100;
+}
+function v() {
+  try {
+    const t = localStorage.getItem(u);
+    return t == null ? 1 : f(Number(t));
+  } catch {
+    return 1;
+  }
+}
+function E() {
+  const [t, e] = m(v), n = S((o) => {
+    const r = f(o);
+    e(r);
+    try {
+      r === 1 ? localStorage.removeItem(u) : localStorage.setItem(u, String(r));
+    } catch {
+    }
+  }, []);
+  return [t, n];
+}
+function b(t, e) {
+  return Math.round(t * (e ? g : 1) * 1e3) / 1e3;
+}
+function A(t, e, n) {
+  if (!e || e <= 0 || !t || t <= 0) return 1;
+  const o = n ? g : 1, r = Math.floor(t / e / o * 1e3 / (i * 1e3)) * i;
+  return f(Math.min(1, r));
+}
+const s = "nvr_layout_editor_pinned_settings", d = 60;
+let c = null;
+const l = /* @__PURE__ */ new Set();
+function _() {
+  if (c) return c;
+  let t = [];
+  try {
+    const e = localStorage.getItem(s), n = e ? JSON.parse(e) : [];
+    Array.isArray(n) && (t = [...new Set(n.filter((o) => typeof o == "string" && !!o))].slice(
+      0,
+      d
+    ));
+  } catch {
+    t = [];
+  }
+  return c = t, t;
+}
+function I(t) {
+  c = t.slice(0, d);
+  try {
+    c.length ? localStorage.setItem(s, JSON.stringify(c)) : localStorage.removeItem(s);
+  } catch {
+  }
+  for (const e of l) e();
+}
+function C(t) {
+  const e = _();
+  I(e.includes(t) ? e.filter((n) => n !== t) : [...e, t]);
+}
+function P(t) {
+  l.add(t);
+  const e = (n) => {
+    n.key === s && (c = null, t());
+  };
+  return window.addEventListener("storage", e), () => {
+    l.delete(t), window.removeEventListener("storage", e);
+  };
+}
+const Z = [];
+function x() {
+  return y(P, _, () => Z);
 }
-const m = 0.8;
 export {
-  m as COMPACT_ZOOM,
-  i as readViewPref,
-  f as useViewPref,
-  u as writeViewPref
+  g as COMPACT_ZOOM,
+  d as PINS_MAX,
+  w as ZOOM_MAX,
+  O as ZOOM_MIN,
+  i as ZOOM_STEP,
+  f as clampZoom,
+  b as effectiveZoom,
+  A as fitZoom,
+  M as readViewPref,
+  v as readZoom,
+  C as togglePinnedSetting,
+  E as useCanvasZoom,
+  x as usePinnedSettings,
+  N as useViewPref,
+  h as writeViewPref
 };