@nivaro/react 0.3.35 → 0.3.37

package/dist/shared/components/layout-editor/outputs/layout-file-plan.js

@@ -0,0 +1,176 @@
+import { applyLayoutOps as M, LAYOUT_PATCH_KEYS as P, UNGROUPED_KEY as $, isCanvasSlot as d, newGroup as Y, newPlacement as K, GROUP_PATCH_KEYS as G, PLACEMENT_PATCH_KEYS as N } from "../../../lib/layout-ops.js";
+import { sameValue as m } from "../canvas-diff.js";
+const O = G, E = N, w = (r, t) => `${r}\0${t ?? ""}`, j = (r, t) => r.sort - t.sort;
+function h(r, t, n, l = []) {
+  const u = {};
+  for (const f of n)
+    l.includes(f) || !(f in r) || r[f] === void 0 || m(r[f], t[f]) || (u[f] = r[f]);
+  return u;
+}
+function b(r, t) {
+  const n = r.groups.filter((l) => l.parent_key === t).map((l) => ({ key: l.key, sort: l.sort }));
+  if (t === null)
+    for (const l of r.placements) d(l) && n.push({ key: l.field, sort: l.sort });
+  return n.sort(j).map((l) => l.key);
+}
+function v(r, t) {
+  return r.placements.filter((n) => n.group_key === t && !d(n)).sort(j).map((n) => n.field);
+}
+function H(r, t) {
+  let n = M(r, []);
+  const l = [], u = [], f = (e, s) => {
+    try {
+      n = M(n, [e]), l.push(e);
+    } catch (p) {
+      u.push(`${s}: ${p.message}`);
+    }
+  }, k = {};
+  for (const e of P)
+    e in t.layout && !m(n.layout[e], t.layout[e]) && (k[e] = t.layout[e]);
+  Object.keys(k).length && f({ op: "layout_update", patch: k }, "Form settings");
+  const o = new Map(
+    t.groups.filter((e) => e.key !== $).map((e) => [e.key, e])
+  ), i = new Map(t.placements.map((e) => [w(e.field, e.group_key), e])), a = (e) => {
+    const s = /* @__PURE__ */ new Map();
+    for (const p of e) s.set(p.field, (s.get(p.field) ?? 0) + 1);
+    return s;
+  }, g = a(n.placements), C = a(t.placements), S = new Set(
+    n.placements.filter(
+      (e) => g.get(e.field) === 1 && C.get(e.field) === 1 && !i.has(w(e.field, e.group_key)) && !d(e) && !t.placements.some((s) => s.field === e.field && d(s))
+    ).map((e) => e.field)
+  );
+  for (const e of [...n.placements]) {
+    if (i.has(w(e.field, e.group_key))) continue;
+    const s = { field: e.field, group_key: e.group_key };
+    S.has(e.field) ? e.group_key !== null && f({ op: "move", from: s, to_group_key: null, index: 9999 }, `Move ${e.field}`) : f({ op: "remove", at: s }, `Remove ${e.field}`);
+  }
+  for (const e of [...n.groups])
+    e.key !== $ && !o.has(e.key) && n.groups.some((s) => s.key === e.key) && f({ op: "group_remove", key: e.key, placements: "ungroup" }, `Remove ${e.label}`);
+  for (const e of n.groups) {
+    const s = o.get(e.key);
+    s && e.parent_key !== null && e.parent_key !== s.parent_key && f({ op: "group_move", key: e.key, parent_key: null, index: 9999 }, `Move ${e.label}`);
+  }
+  for (const e of [...n.groups]) {
+    const s = o.get(e.key);
+    if (!s) continue;
+    const p = h(s, e, O);
+    Object.keys(p).length && f({ op: "group_update", key: e.key, patch: p }, `Change ${s.label}`);
+  }
+  const x = () => new Set(n.groups.map((e) => e.key)), T = t.groups.filter((e) => e.key !== $ && !x().has(e.key));
+  for (const e of [...T].sort(
+    (s, p) => +(s.parent_key != null) - +(p.parent_key != null)
+  )) {
+    const s = Y(e.key, e.label, e.type, e.parent_key), p = h(e, s, O, ["label", "type"]);
+    f(
+      {
+        op: "group_create",
+        key: e.key,
+        label: e.label,
+        group_type: e.type,
+        parent_key: e.parent_key,
+        index: 9999,
+        ...Object.keys(p).length ? { patch: p } : {}
+      },
+      `Add ${e.label}`
+    );
+  }
+  for (const e of t.placements) {
+    if (!n.placements.find((c) => c.field === e.field && c.group_key === e.group_key) && S.has(e.field)) {
+      const c = n.placements.find((_) => _.field === e.field);
+      c && f(
+        {
+          op: "move",
+          from: { field: c.field, group_key: c.group_key },
+          to_group_key: e.group_key,
+          index: 9999
+        },
+        `Move ${e.field}`
+      );
+    }
+    const p = n.placements.find((c) => c.field === e.field && c.group_key === e.group_key);
+    if (!p) {
+      const c = K(e.field, e.group_key), _ = h(e, c, E);
+      f(
+        {
+          op: "place",
+          field: e.field,
+          group_key: e.group_key,
+          index: 9999,
+          ...Object.keys(_).length ? { patch: _ } : {}
+        },
+        `Add ${e.field}`
+      );
+      continue;
+    }
+    const y = h(e, p, E);
+    Object.keys(y).length && f(
+      {
+        op: "update_placement",
+        at: { field: e.field, group_key: e.group_key },
+        patch: y
+      },
+      `Change ${e.field}`
+    );
+  }
+  const A = new Set(t.placements.filter((e) => !d(e)).map((e) => e.group_key));
+  for (const e of A)
+    v(t, e).forEach((p, y) => {
+      v(n, e)[y] !== p && f(
+        { op: "move", from: { field: p, group_key: e }, to_group_key: e, index: y },
+        `Order ${p}`
+      );
+    });
+  const U = [
+    null,
+    ...t.groups.filter((e) => e.type === "container").map((e) => e.key)
+  ];
+  for (const e of U)
+    b(t, e).forEach((p, y) => {
+      b(n, e)[y] !== p && f({ op: "group_move", key: p, parent_key: e, index: y }, `Order ${p}`);
+    });
+  return { ops: l, remaining: [...u, ...R(n, t)], after: n };
+}
+function R(r, t) {
+  const n = [];
+  for (const [o, i] of Object.entries(t.layout))
+    P.includes(o) && !m(r.layout[o], i) && n.push(`The form setting ${o} differs`);
+  const l = new Map(r.groups.map((o) => [o.key, o]));
+  for (const o of t.groups) {
+    const i = l.get(o.key);
+    if (!i) {
+      n.push(`${o.label} is missing`);
+      continue;
+    }
+    if (o.key !== $) {
+      i.parent_key !== o.parent_key && n.push(`${o.label} sits somewhere else`);
+      for (const a of O) {
+        const g = o[a];
+        g !== void 0 && (m(i[a], g) || n.push(`${o.label}: ${a} differs`));
+      }
+    }
+  }
+  for (const o of r.groups)
+    t.groups.some((i) => i.key === o.key) || n.push(`${o.label} is still there`);
+  const u = (o) => w(o.field, o.group_key), f = new Map(r.placements.map((o) => [u(o), o]));
+  for (const o of t.placements) {
+    const i = f.get(u(o));
+    if (!i) {
+      n.push(`${o.field} is missing from ${o.group_key ?? "Ungrouped"}`);
+      continue;
+    }
+    for (const a of E)
+      m(i[a], o[a]) || n.push(`${o.field}: ${a} differs`);
+  }
+  const k = new Set(t.placements.map(u));
+  for (const o of r.placements)
+    k.has(u(o)) || n.push(`${o.field} is still in ${o.group_key ?? "Ungrouped"}`);
+  for (const o of new Set(t.placements.map((i) => i.group_key)))
+    v(r, o).join("\0") !== v(t, o).join("\0") && n.push(`The order in ${o ?? "Ungrouped"} differs`);
+  for (const o of [null, ...t.groups.filter((i) => i.type === "container").map((i) => i.key)])
+    b(r, o).join("\0") !== b(t, o).join("\0") && n.push(`The order of ${o ?? "the form"} differs`);
+  return [...new Set(n)];
+}
+export {
+  R as differences,
+  H as planFileOps
+};

package/dist/shared/components/layout-editor/outputs/output-api.js

@@ -1,61 +1,95 @@
+var d = Object.defineProperty;
+var p = (e, t, a) => t in e ? d(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a;
+var l = (e, t, a) => p(e, typeof t != "symbol" ? t + "" : t, a);
 async function r(e) {
-  let a = `Something went wrong (${e.status})`;
+  let t = `Something went wrong (${e.status})`;
   try {
-    const t = await e.json();
-    t.error && (a = t.error);
+    const a = await e.json();
+    a.error && (t = a.error);
   } catch {
   }
-  return new Error(a);
+  return new Error(t);
 }
-function s(e, a) {
-  const t = /filename="([^"]+)"/.exec(e.headers.get("Content-Disposition") ?? "");
-  return (t == null ? void 0 : t[1]) ?? a;
+function i(e, t) {
+  const a = /filename="([^"]+)"/.exec(e.headers.get("Content-Disposition") ?? "");
+  return (a == null ? void 0 : a[1]) ?? t;
 }
-async function i(e, a, t) {
-  const o = await fetch(`${e.apiBase}${a}`, {
+async function s(e, t, a) {
+  const o = await fetch(`${e.apiBase}${t}`, {
     headers: e.authHeaders,
     credentials: e.credentials
   });
   if (!o.ok) throw await r(o);
-  return { blob: await o.blob(), filename: s(o, t) };
+  return { blob: await o.blob(), filename: i(o, a) };
 }
-async function l(e, a, t, o) {
-  const n = await fetch(`${e.apiBase}${a}`, {
+async function c(e, t, a, o) {
+  const n = await fetch(`${e.apiBase}${t}`, {
     method: "POST",
     headers: { ...e.authHeaders, "Content-Type": "application/json" },
     credentials: e.credentials,
-    body: JSON.stringify(t)
+    body: JSON.stringify(a)
   });
   if (!n.ok) throw await r(n);
-  return { blob: await n.blob(), filename: s(n, o) };
-}
-const d = (e, a) => i(e, `/collection-layouts/${a}/spreadsheet-template`, "template.xlsx"), h = (e, a, t = 5e3) => l(e, `/collection-layouts/${a}/spreadsheet-export`, { limit: t }, "records.xlsx"), p = (e, a) => i(e, `/collection-layouts/${a}/blank-form`, "blank-form.pdf"), u = (e, a, t) => l(e, "/collection-layouts/help-sheet/xlsx", { rows: a, name: t }, "help-text.xlsx");
-async function c(e) {
-  const a = new Uint8Array(await e.arrayBuffer());
-  let t = "";
-  for (let o = 0; o < a.length; o += 32768)
-    t += String.fromCharCode(...a.subarray(o, o + 32768));
-  return btoa(t);
-}
-async function f(e, a) {
-  const t = await fetch(`${e.apiBase}/collection-layouts/help-sheet/parse`, {
+  return { blob: await n.blob(), filename: i(n, o) };
+}
+const w = (e, t) => s(e, `/collection-layouts/${t}/spreadsheet-template`, "template.xlsx"), f = (e, t, a = 5e3) => c(e, `/collection-layouts/${t}/spreadsheet-export`, { limit: a }, "records.xlsx"), b = (e, t) => s(e, `/collection-layouts/${t}/blank-form`, "blank-form.pdf"), m = (e, t, a) => c(e, "/collection-layouts/help-sheet/xlsx", { rows: t, name: a }, "help-text.xlsx");
+async function u(e) {
+  const t = new Uint8Array(await e.arrayBuffer());
+  let a = "";
+  for (let o = 0; o < t.length; o += 32768)
+    a += String.fromCharCode(...t.subarray(o, o + 32768));
+  return btoa(a);
+}
+async function x(e, t) {
+  const a = await fetch(`${e.apiBase}/collection-layouts/help-sheet/parse`, {
+    method: "POST",
+    headers: { ...e.authHeaders, "Content-Type": "application/json" },
+    credentials: e.credentials,
+    body: JSON.stringify({ file: await u(t) })
+  });
+  if (!a.ok) throw await r(a);
+  return (await a.json()).data.rows;
+}
+const $ = (e, t) => s(e, `/collection-layouts/${t}/file?download=1`, "layout.layout.yaml");
+class y extends Error {
+  constructor(a, o) {
+    super(a);
+    l(this, "problems");
+    this.problems = o;
+  }
+}
+async function S(e, t, a) {
+  const o = await fetch(`${e.apiBase}/collection-layouts/${t}/file/parse`, {
     method: "POST",
     headers: { ...e.authHeaders, "Content-Type": "application/json" },
     credentials: e.credentials,
-    body: JSON.stringify({ file: await c(a) })
+    body: JSON.stringify({ text: a })
   });
-  if (!t.ok) throw await r(t);
-  return (await t.json()).data.rows;
+  if (!o.ok) {
+    let n = {};
+    try {
+      n = await o.json();
+    } catch {
+    }
+    throw new y(
+      n.error ?? `Something went wrong (${o.status})`,
+      Array.isArray(n.problems) ? n.problems : []
+    );
+  }
+  return (await o.json()).data;
 }
-function w({ blob: e, filename: a }) {
-  const t = URL.createObjectURL(e), o = document.createElement("a");
-  o.href = t, o.download = a, document.body.appendChild(o), o.click(), o.remove(), setTimeout(() => URL.revokeObjectURL(t), 1e3);
+function j({ blob: e, filename: t }) {
+  const a = URL.createObjectURL(e), o = document.createElement("a");
+  o.href = a, o.download = t, document.body.appendChild(o), o.click(), o.remove(), setTimeout(() => URL.revokeObjectURL(a), 1e3);
 }
 export {
-  p as downloadBlankForm,
-  u as downloadHelpSheet,
-  h as downloadRecords,
-  d as downloadTemplate,
-  f as parseHelpSheetFile,
-  w as saveFile
+  y as LayoutFileProblems,
+  b as downloadBlankForm,
+  m as downloadHelpSheet,
+  $ as downloadLayoutFile,
+  f as downloadRecords,
+  w as downloadTemplate,
+  x as parseHelpSheetFile,
+  S as parseLayoutFile,
+  j as saveFile
 };

package/dist/shared/components/layout-editor/overview/describe-conditions.js

@@ -1,5 +1,5 @@
-import { choiceLabel as d, titleCase as b } from "../../../lib/utils.js";
-const $ = /^\{\{\s*([A-Za-z_][A-Za-z0-9_]*)\s*\}\}(?:\s*([*+])\s*(-?\d+(?:\.\d+)?))?$/, _ = {
+import { choiceLabel as d, titleCase as y } from "../../../lib/utils.js";
+const _ = /^\{\{\s*([A-Za-z_][A-Za-z0-9_]*)\s*\}\}(?:\s*([*+])\s*(-?\d+(?:\.\d+)?))?$/, $ = {
   gt: "is over",
   gte: "is at least",
   lt: "is under",
@@ -39,7 +39,7 @@ function v(t) {
 function x(t, e) {
   var n;
   const o = (n = e.get(t)) == null ? void 0 : n.label;
-  return o != null && o.trim() ? o.trim() : b(t);
+  return o != null && o.trim() ? o.trim() : y(t);
 }
 function A(t) {
   return typeof t == "boolean" ? t : t === "true" ? !0 : t === "false" ? !1 : null;
@@ -52,7 +52,7 @@ function j(t, e, o, n) {
   var r;
   if (e == null || e === "") return "empty";
   if (typeof e == "string") {
-    const i = $.exec(e.trim());
+    const i = _.exec(e.trim());
     if (i) {
       const c = x(i[1], o);
       return i[2] ? `${c} ${i[2] === "*" ? "×" : "+"} ${i[3]}` : c;
@@ -70,17 +70,17 @@ function E(t, e, o) {
   if (r && t.op === "neq") return [s, { text: " is set" }];
   const i = t.op === "neq" ? [{ text: " (or empty)" }] : [], u = ((l = e.get(t.field)) == null ? void 0 : l.type) === "boolean" || typeof t.value == "boolean" ? A(t.value) : null;
   if (u !== null && (t.op === "eq" || t.op === "neq")) {
-    const h = t.op === "eq" ? u : !u, { verb: p, name: a } = S(n), y = p === "has" ? `no ${a}` : `not ${a}`;
-    return [{ text: `${p} ` }, { text: h ? a : y, strong: !0 }, ...i];
+    const h = t.op === "eq" ? u : !u, { verb: p, name: a } = S(n), b = p === "has" ? `no ${a}` : `not ${a}`;
+    return [{ text: `${p} ` }, { text: h ? a : b, strong: !0 }, ...i];
   }
   const f = j(t.field, t.value, e, o);
   if (t.op === "eq") return [{ text: `${n} is ` }, { text: f, strong: !0 }];
   if (t.op === "neq")
     return [{ text: `${n} is not ` }, { text: f, strong: !0 }, ...i];
-  const m = _[t.op] ?? t.op;
-  return [{ text: `${n} ${m} ` }, { text: f, strong: !0 }];
+  const g = $[t.op] ?? t.op;
+  return [{ text: `${n} ${g} ` }, { text: f, strong: !0 }];
 }
-function g(t) {
+function m(t) {
   const e = [];
   return t.forEach((o, n) => {
     n > 0 && e.push({ text: " and " }), e.push(...o);
@@ -89,12 +89,12 @@ function g(t) {
 function L(t, e, o) {
   if (!(t != null && t.length)) return [];
   const n = new Map(e.map((s) => [s.field, s]));
-  return g(t.map((s) => E(s, n, o)));
+  return m(t.map((s) => E(s, n, o)));
 }
 function O(t) {
   return t.length ? [
     { text: "for " },
-    ...g(t.map((e) => [{ text: e, strong: !0 }])),
+    ...m(t.map((e) => [{ text: e, strong: !0 }])),
     { text: " only" }
   ] : [];
 }
@@ -118,6 +118,11 @@ function z(t, e, o) {
         { text: "on small screens, instead of " },
         { text: t.phone_of_name ?? "its form", strong: !0 }
       ];
+    case "tablet":
+      return [
+        { text: "on tablet-width screens, instead of " },
+        { text: t.tablet_of_name ?? "its form", strong: !0 }
+      ];
     default:
       return [];
   }

package/dist/shared/components/layout-editor/overview/purpose.js

@@ -1,7 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
 import "lucide-react";
-import { Fragment as l } from "react";
-import { cn as i } from "../../../lib/utils.js";
+import { Fragment as i } from "react";
+import { cn as l } from "../../../lib/utils.js";
 import { describeReason as d } from "./describe-conditions.js";
 const o = {
   summary: "Read mode",
@@ -17,7 +17,7 @@ function c({ segs: e, muted: n }) {
       /* @__PURE__ */ a("b", { className: "font-semibold text-slate-900 dark:text-foreground", children: r.text }, t)
     ) : (
       // biome-ignore lint/suspicious/noArrayIndexKey: segments are positional
-      /* @__PURE__ */ a(l, { children: r.text }, t)
+      /* @__PURE__ */ a(i, { children: r.text }, t)
     )
   ) }) : /* @__PURE__ */ a("span", { className: "text-slate-400 dark:text-muted-foreground", children: "—" });
 }
@@ -25,7 +25,7 @@ function b({ tone: e, children: n }) {
   return /* @__PURE__ */ a(
     "span",
     {
-      className: i(
+      className: l(
         "inline-flex items-center whitespace-nowrap rounded-full px-2 py-px text-[11px] font-semibold",
         e === "default" && "bg-nvr-cyan/15 text-[#0089ad] dark:text-nvr-cyan",
         e === "rule" && "bg-indigo-50 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300",
@@ -38,7 +38,7 @@ function b({ tone: e, children: n }) {
   );
 }
 function k(e) {
-  return e.section === "forms" ? e.is_default ? { tone: "default", text: "default" } : e.reason.kind === "record_rule" ? { tone: "rule", text: "rule" } : e.reason.kind === "role" ? { tone: "role", text: "role" } : e.reason.kind === "ab" ? { tone: "role", text: "A/B" } : e.reason.kind === "phone" ? { tone: "view", text: "phone" } : null : e.section === "link_only" ? { tone: "link", text: "link only" } : e.section === "other_views" && e.is_default ? { tone: "default", text: "default" } : null;
+  return e.section === "forms" ? e.is_default ? { tone: "default", text: "default" } : e.reason.kind === "record_rule" ? { tone: "rule", text: "rule" } : e.reason.kind === "role" ? { tone: "role", text: "role" } : e.reason.kind === "ab" ? { tone: "role", text: "A/B" } : e.reason.kind === "phone" ? { tone: "view", text: "phone" } : e.reason.kind === "tablet" ? { tone: "view", text: "tablet" } : null : e.section === "link_only" ? { tone: "link", text: "link only" } : e.section === "other_views" && e.is_default ? { tone: "default", text: "default" } : null;
 }
 function p(e, n, r) {
   switch (e.section) {

package/dist/shared/components/layout-editor/panel-frame.js

@@ -42,7 +42,7 @@ function T({
     {
       "data-panel-body": "",
       ...n ? { role: "tabpanel", id: n.id, "aria-labelledby": n.labelledBy } : {},
-      className: d("min-h-0 flex-1 space-y-5 overflow-y-auto px-4 pb-8 pt-4", r),
+      className: d("relative min-h-0 flex-1 space-y-5 overflow-y-auto px-4 pb-8 pt-4", r),
       children: e
     }
   );