@nivaro/react 0.3.36 → 0.3.37

package/dist/shared/components/layout-editor/pin.js

@@ -1,25 +1,43 @@
-import { UNGROUPED_KEY as p } from "../../lib/layout-ops.js";
-import { asObject as u, withKey as s } from "./inspector/model.js";
-const f = "editor_pinned", i = (r, n) => r.groups.find((e) => e.key === n) ?? null;
-function t(r) {
-  return !!r && u(r.swap_config)[f] === !0;
+import { HEADER_GROUP_KEY as c, UNGROUPED_KEY as p } from "../../lib/layout-ops.js";
+import { asObject as i, withKey as l } from "./inspector/model.js";
+const u = "editor_pinned", o = (n, e) => n.groups.find((r) => r.key === e) ?? null;
+function f(n) {
+  return !!n && i(n.swap_config)[u] === !0;
 }
-function l(r, n) {
-  const e = s(u(r), f, n ? !0 : void 0);
-  return e ? JSON.stringify(e) : null;
+function g(n, e) {
+  const r = l(i(n), u, e ? !0 : void 0);
+  return r ? JSON.stringify(r) : null;
 }
-function o(r, n) {
-  if (!n || n === p) return !1;
-  const e = i(r, n);
-  return e ? t(e) ? !0 : !!e.parent_key && t(i(r, e.parent_key)) : !1;
+function s(n) {
+  return !!n && i(n.overrides)[u] === !0;
 }
-function a(r, n) {
-  return n.kind === "group" ? o(r, n.key) : n.kind === "field" || n.kind === "slot" ? o(r, n.group_key) : !1;
+function a(n, e) {
+  return l(i(n), u, e ? !0 : void 0);
+}
+function m(n) {
+  return s({ overrides: n.overrides }) ? { ...n, overrides: a(n.overrides, !1) } : n;
+}
+function k(n, e) {
+  if (e.kind === "group") return null;
+  const r = e.kind === "header" ? c : e.group_key;
+  return n.placements.find((t) => t.field === e.field && (t.group_key ?? null) === r) ?? null;
+}
+function d(n, e) {
+  if (!e || e === p) return !1;
+  const r = o(n, e);
+  return r ? f(r) ? !0 : !!r.parent_key && f(o(n, r.parent_key)) : !1;
+}
+function v(n, e) {
+  return e.kind === "group" ? d(n, e.key) : s(k(n, e)) ? !0 : e.kind === "field" || e.kind === "slot" ? d(n, e.group_key) : !1;
 }
 export {
-  f as PIN_KEY,
-  t as isPinned,
-  a as pinLocked,
-  o as pinnedZone,
-  l as withPin
+  u as PIN_KEY,
+  f as isPinned,
+  s as isPlacementPinned,
+  v as pinLocked,
+  d as pinnedZone,
+  k as placementOf,
+  m as unpinnedPatch,
+  g as withPin,
+  a as withPlacementPin
 };

package/dist/shared/components/layout-editor/place-clip.js

@@ -0,0 +1,257 @@
+var Y = Object.defineProperty;
+var B = (n, e, t) => e in n ? Y(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var P = (n, e, t) => B(n, typeof e != "symbol" ? e + "" : e, t);
+import { withGroupStructure as D } from "../../lib/form-structure.js";
+import { UNGROUPED_KEY as R, HEADER_GROUP_KEY as C, isCanvasSlot as v, applyLayoutOps as J, GROUP_PATCH_KEYS as M } from "../../lib/layout-ops.js";
+import { titleCase as m } from "../../lib/utils.js";
+import { fieldSpot as q, slotSpot as Q, newGroupKey as V } from "./add-target.js";
+import { normalizedBundle as T, inPageOrder as X, plural as z, zoneItems as Z } from "./field-zones.js";
+import { placementPatchOf as F } from "./inspector/model.js";
+import { withPin as x } from "./pin.js";
+import { slotName as K } from "./slot-names.js";
+import { refuse as w } from "./structure-ops.js";
+import { humanizeOpError as ee } from "./useLayoutDraft.js";
+const E = "nivaro-layout-clip", ge = "nvr:layout-editor:clip", te = (n) => [...n].sort((e, t) => e.sort - t.sort);
+function oe(n) {
+  const e = {};
+  for (const t of M)
+    t === "label" || t === "type" || t === "editor_note" || n[t] !== void 0 && (e[t] = n[t]);
+  return e.swap_config = D(x(n.swap_config, !1), { sticky: !1 }), e;
+}
+function U(n, e) {
+  return {
+    key: e.key,
+    label: e.label,
+    type: e.type,
+    settings: oe(e),
+    placements: Z(n, e.key).map((t) => ({
+      field: t.field,
+      from_group: e.key,
+      patch: F(t)
+    })),
+    children: te(n.groups.filter((t) => t.parent_key === e.key)).map((t) => U(n, t))
+  };
+}
+function _e(n, e, t) {
+  if (e.length === 0) return { ok: !1, reason: "Select a field or section to copy" };
+  const s = T(n), o = {
+    marker: E,
+    v: 1,
+    collection: t.collection,
+    layout_id: t.layoutId,
+    layout_name: t.layoutName
+  }, u = e.filter((r) => r.kind === "group");
+  if (u.length > 0) {
+    if (e.length > 1) return { ok: !1, reason: "Copy one section at a time" };
+    const r = u[0].key;
+    if (r === R) return { ok: !1, reason: "Ungrouped is not a section" };
+    const p = s.groups.find((i) => i.key === r);
+    return p ? {
+      ok: !0,
+      clip: {
+        ...o,
+        label: p.label || m(p.key),
+        kind: "group",
+        placements: [],
+        group: U(s, p)
+      }
+    } : { ok: !1, reason: "This comes from the parent form: override it here first" };
+  }
+  const l = [];
+  for (const r of e) {
+    if (r.kind === "group") continue;
+    const p = r.kind === "header" ? C : r.group_key, i = s.placements.find((d) => d.field === r.field && d.group_key === p);
+    i && !l.includes(i) && l.push(i);
+  }
+  if (l.length === 0)
+    return { ok: !1, reason: "This comes from the parent form: override it here first" };
+  const k = X(s, l), f = (r) => {
+    var p;
+    return r.startsWith("__") ? K(r) : ((p = t.fieldLabel) == null ? void 0 : p.call(t, r)) ?? m(r);
+  };
+  return {
+    ok: !0,
+    clip: {
+      ...o,
+      label: k.length === 1 ? f(k[0].field) : z(k.length, "field"),
+      kind: "fields",
+      placements: k.map((r) => ({
+        field: r.field,
+        from_group: r.group_key,
+        patch: F(r)
+      })),
+      group: null
+    }
+  };
+}
+const be = (n) => JSON.stringify(n);
+function we(n) {
+  if (!(n != null && n.includes(E))) return null;
+  try {
+    const e = JSON.parse(n);
+    return !e || e.marker !== E || e.v !== 1 || typeof e.collection != "string" || e.kind !== "fields" && e.kind !== "group" || !Array.isArray(e.placements) || e.kind === "group" && (!e.group || typeof e.group.key != "string") ? null : e;
+  } catch {
+    return null;
+  }
+}
+const G = (n, e) => e != null && !n.startsWith("__") && !e.has(n);
+class ne {
+  constructor(e, t) {
+    P(this, "ops", []);
+    P(this, "skipped", []);
+    P(this, "label", (e) => e.startsWith("__") ? K(e) : this.name(e));
+    this.w = e, this.name = t;
+  }
+  try(e, t) {
+    try {
+      return this.w = J(this.w, [e]), this.ops.push(e), !0;
+    } catch (s) {
+      return this.skipped.push(`${t}: ${ee(s.message)}`), !1;
+    }
+  }
+  zoneHas(e, t) {
+    return this.w.placements.some((s) => s.field === e && s.group_key === t);
+  }
+}
+function ie(n, e) {
+  if (e === null) return "Ungrouped";
+  if (e === C) return "the header strip";
+  const t = n.groups.find((s) => s.key === e);
+  return t ? t.label || m(t.key) : m(e);
+}
+function re(n, e, t) {
+  const s = (e == null ? void 0 : e.kind) === "group" ? e.key : e && e.kind !== "header" ? e.group_key : null, o = s ? n.groups.find((i) => i.key === s) : void 0, u = (o == null ? void 0 : o.type) === "container" ? o : o != null && o.parent_key ? n.groups.find((i) => i.key === o.parent_key) : null, l = n.groups.filter((i) => i.parent_key === null), k = l.length + n.placements.filter(v).length;
+  if (t === "tab" && u) {
+    const i = n.groups.filter((d) => d.parent_key === u.key);
+    return {
+      parent_key: u.key,
+      index: o && o.parent_key === u.key ? o.sort + 1 : i.length,
+      asSection: !1
+    };
+  }
+  let f = k;
+  const r = u ?? (o && o.parent_key === null ? o : null);
+  if (r) f = r.sort + 1;
+  else if (s === null && e && e.kind !== "group" && e.kind !== "header") {
+    const i = n.groups.find((d) => d.key === R);
+    i && (f = i.sort + 1);
+  }
+  const p = l.some((i) => i.type === "tab");
+  return { parent_key: null, index: f, asSection: t === "tab" && !p };
+}
+function $e(n, e, t) {
+  var N;
+  if (e.collection !== t.collection)
+    return w(
+      `That was copied from a ${m(e.collection)} form. Paste it into a form of the same collection.`
+    );
+  const s = T(n), o = new ne(s, t.fieldLabel ?? m), u = e.layout_id != null && Number(e.layout_id) === Number(s.layout.id), l = [];
+  if (e.kind === "group" && e.group) {
+    const a = re(s, t.selected, e.group.type);
+    let c = 0;
+    const $ = (h, H, L, j) => {
+      const b = V(o.w, h.key), I = j && a.asSection ? "section" : h.type, W = j && u ? `${h.label || m(h.key)} (copy)` : h.label;
+      if (!o.try(
+        {
+          op: "group_create",
+          key: b,
+          label: W,
+          group_type: I,
+          parent_key: H,
+          index: L,
+          patch: h.settings
+        },
+        h.label || m(h.key)
+      )) return b;
+      let A = 0;
+      for (const y of h.placements) {
+        if (G(y.field, t.knownFields)) {
+          l.push(o.label(y.field));
+          continue;
+        }
+        o.w.placements.some((S) => S.field === y.field && !v(S)) && c++, o.try(
+          { op: "place", field: y.field, group_key: b, index: A, patch: y.patch },
+          o.label(y.field)
+        ) && A++;
+      }
+      return h.children.forEach((y, S) => {
+        $(y, b, S, !1);
+      }), b;
+    }, O = $(e.group, a.parent_key, a.index, !0);
+    if (o.ops.length === 0)
+      return w(o.skipped[0] ?? `${e.label} cannot be pasted here`);
+    const g = [];
+    return !u && e.layout_name && g.push(`From ${e.layout_name}`), a.asSection && g.push("Pasted as a section: this form shows no tabs at the top"), c && g.push(
+      `${z(c, "field")} already on this form now ${c === 1 ? "shows" : "show"} in two places`
+    ), l.length && g.push(`Not in this collection, skipped: ${l.join(", ")}`), g.push(...o.skipped), {
+      ok: !0,
+      ops: o.ops,
+      label: `Paste ${e.label}`,
+      notes: g,
+      select: { kind: "group", key: O },
+      skipped: [...l, ...o.skipped]
+    };
+  }
+  const k = ((N = t.selected) == null ? void 0 : N.kind) === "header", f = q(s, t.selected, k ? "header" : "form");
+  let r = f.index, p = null;
+  const i = [];
+  for (const a of e.placements) {
+    const c = o.label(a.field);
+    if (G(a.field, t.knownFields)) {
+      l.push(c);
+      continue;
+    }
+    if (v({ field: a.field, group_key: null })) {
+      if (o.w.placements.some((O) => O.field === a.field)) {
+        i.push(c);
+        continue;
+      }
+      const $ = Q(o.w, t.selected);
+      o.try(
+        { op: "place", field: a.field, group_key: null, index: $.index, patch: a.patch },
+        c
+      ) && (p ?? (p = { kind: "slot", field: a.field, group_key: null }));
+      continue;
+    }
+    if (o.zoneHas(a.field, f.group_key)) {
+      i.push(c);
+      continue;
+    }
+    o.try(
+      { op: "place", field: a.field, group_key: f.group_key, index: r, patch: a.patch },
+      c
+    ) && (r++, p ?? (p = f.group_key === C ? { kind: "header", field: a.field } : {
+      kind: a.field.startsWith("__") ? "slot" : "field",
+      field: a.field,
+      group_key: f.group_key
+    }));
+  }
+  const d = ie(o.w, f.group_key);
+  if (o.ops.length === 0)
+    return l.length && !i.length && !o.skipped.length ? w(`This collection has no ${l.join(", ")}: nothing to paste`) : i.length && !l.length && !o.skipped.length ? w(
+      `${i.join(", ")} ${i.length === 1 ? "is" : "are"} already in ${d}. Select another section first.`
+    ) : w(
+      [
+        l.length ? `Not in this collection: ${l.join(", ")}` : "",
+        i.length ? `Already in ${d}: ${i.join(", ")}` : "",
+        ...o.skipped
+      ].filter(Boolean).join(". ")
+    );
+  const _ = [];
+  return !u && e.layout_name && _.push(`From ${e.layout_name}`), l.length && _.push(`Not in this collection, skipped: ${l.join(", ")}`), i.length && _.push(`Already in ${d}, skipped: ${i.join(", ")}`), _.push(...o.skipped), {
+    ok: !0,
+    ops: o.ops,
+    label: `Paste ${e.label}`,
+    notes: _,
+    select: p ?? void 0,
+    skipped: [...l, ...i, ...o.skipped]
+  };
+}
+export {
+  E as CLIP_MARKER,
+  ge as CLIP_STORAGE_KEY,
+  _e as makeClip,
+  we as parseClip,
+  $e as pastePlan,
+  be as serializeClip
+};

package/dist/shared/components/layout-editor/preview/PreviewModes.js

@@ -8,15 +8,16 @@ import { useRoleNames as X } from "../overview/overview-api.js";
 import { segOption as _, segTrack as q } from "../panel-style.js";
 import { useCollectionPipelines as z } from "./preview-api.js";
 import { drivingFields as B } from "./preview-model.js";
-const G = "mb-1 block text-[11.5px] font-semibold text-slate-600 dark:text-muted-foreground", p = "mt-1 text-[11.5px] leading-snug text-slate-500 dark:text-muted-foreground", H = "h-8 w-full rounded-md border border-slate-200 bg-white px-2.5 text-[12.5px] text-slate-800 outline-none placeholder:text-slate-400 focus:border-nvr-cyan dark:border-border dark:bg-background dark:text-foreground dark:placeholder:text-muted-foreground", L = "inline-flex h-6 items-center rounded-full border border-slate-200 px-2 text-[12px] text-slate-700 transition-colors hover:bg-muted dark:border-border dark:text-foreground", $ = [
+const G = "mb-1 block text-[11.5px] font-semibold text-slate-600 dark:text-muted-foreground", p = "mt-1 text-[11.5px] leading-snug text-slate-500 dark:text-muted-foreground", H = "h-8 w-full rounded-md border border-slate-200 bg-white px-2.5 text-[12.5px] text-slate-800 outline-none placeholder:text-slate-400 focus:border-nvr-cyan dark:border-border dark:bg-background dark:text-foreground dark:placeholder:text-muted-foreground", D = "inline-flex h-6 items-center rounded-full border border-slate-200 px-2 text-[12px] text-slate-700 transition-colors hover:bg-muted dark:border-border dark:text-foreground", L = [
   { value: "desktop", label: "Desktop", tip: "The full canvas width" },
   { value: "tablet", label: "Tablet", tip: "768 px wide" },
-  { value: "phone", label: "Phone", tip: "390 px wide" }
+  { value: "phone", label: "Phone", tip: "390 px wide" },
+  { value: "all", label: "All", tip: "Desktop, tablet and phone side by side" }
 ];
 function y(n, t) {
   var s;
-  const r = (s = n.find((d) => d.field === t)) == null ? void 0 : s.label;
-  return r != null && r.trim() ? r.trim() : V(t);
+  const a = (s = n.find((d) => d.field === t)) == null ? void 0 : s.label;
+  return a != null && a.trim() ? a.trim() : V(t);
 }
 function m({ title: n, children: t }) {
   return /* @__PURE__ */ o("div", { className: "mt-3 border-t border-slate-100 pt-3 dark:border-border", children: [
@@ -24,25 +25,25 @@ function m({ title: n, children: t }) {
     t
   ] });
 }
-function ae({
+function re({
   collection: n,
   value: t,
-  onChange: r,
+  onChange: a,
   layout: s,
   fields: d
 }) {
-  const { data: D = [] } = X(!0), {
+  const { data: $ = [] } = X(!0), {
     data: x = [],
     isLoading: P,
     isError: T,
     refetch: E
-  } = z(n, !0), h = M(() => s ? B(s) : [], [s]), [O, W] = I(""), [g, C] = I(""), i = h.find((e) => e.field === O) ?? h[0] ?? null, u = t.values ?? {}, k = (e, a) => r({ ...t, values: { ...u, [e]: a } }), F = (e) => {
-    const { [e]: a, ...b } = u;
-    r({ ...t, values: Object.keys(b).length > 0 ? b : null });
+  } = z(n, !0), h = M(() => s ? B(s) : [], [s]), [O, W] = I(""), [g, C] = I(""), i = h.find((e) => e.field === O) ?? h[0] ?? null, u = t.values ?? {}, k = (e, r) => a({ ...t, values: { ...u, [e]: r } }), F = (e) => {
+    const { [e]: r, ...b } = u;
+    a({ ...t, values: Object.keys(b).length > 0 ? b : null });
   }, w = x.flatMap(
-    (e) => e.states.map((a) => ({
-      value: `${e.id}::${a.id}`,
-      label: x.length > 1 ? `${e.name} · ${a.label}` : a.label
+    (e) => e.states.map((r) => ({
+      value: `${e.id}::${r.id}`,
+      label: x.length > 1 ? `${e.name} · ${r.label}` : r.label
     }))
   );
   return /* @__PURE__ */ o("div", { "data-preview-modes": "", children: [
@@ -51,13 +52,13 @@ function ae({
         N,
         {
           value: t.compareRoleId ?? "",
-          onChange: (e) => r({ ...t, compareRoleId: e || null }),
+          onChange: (e) => a({ ...t, compareRoleId: e || null }),
           ariaLabel: "Compare with role",
           disabled: !t.roleId,
           className: "h-8 text-[12.5px]",
           options: [
             { value: "", label: "No comparison" },
-            ...D.filter((e) => e.id !== t.roleId).map((e) => ({ value: e.id, label: e.name }))
+            ...$.filter((e) => e.id !== t.roleId).map((e) => ({ value: e.id, label: e.name }))
           ]
         }
       ),
@@ -69,9 +70,9 @@ function ae({
         {
           value: t.state ? `${t.state.pipelineId}::${t.state.id}` : "",
           onChange: (e) => {
-            if (!e) return r({ ...t, state: null });
-            const [a, b] = e.split("::"), c = x.find((v) => v.id === a), f = c == null ? void 0 : c.states.find((v) => v.id === b);
-            c && f && r({
+            if (!e) return a({ ...t, state: null });
+            const [r, b] = e.split("::"), c = x.find((v) => v.id === r), f = c == null ? void 0 : c.states.find((v) => v.id === b);
+            c && f && a({
               ...t,
               state: { pipelineId: c.id, id: f.id, key: f.key, label: f.label }
             });
@@ -107,7 +108,7 @@ function ae({
             "button",
             {
               type: "button",
-              className: L,
+              className: D,
               onClick: () => k(i.field, e),
               children: e
             },
@@ -117,7 +118,7 @@ function ae({
             "button",
             {
               type: "button",
-              className: L,
+              className: D,
               onClick: () => k(i.field, null),
               children: "Empty"
             }
@@ -153,7 +154,7 @@ function ae({
           }
         )
       ] }),
-      Object.keys(u).length > 0 && /* @__PURE__ */ l("ul", { className: "mt-2 flex flex-wrap gap-1", children: Object.entries(u).map(([e, a]) => /* @__PURE__ */ o(
+      Object.keys(u).length > 0 && /* @__PURE__ */ l("ul", { className: "mt-2 flex flex-wrap gap-1", children: Object.entries(u).map(([e, r]) => /* @__PURE__ */ o(
         "li",
         {
           className: "inline-flex max-w-full items-center gap-1 rounded-full bg-nvr-cyan/10 px-2 py-0.5 text-[12px] text-slate-800 dark:text-foreground",
@@ -161,7 +162,7 @@ function ae({
             /* @__PURE__ */ o("span", { className: "truncate", children: [
               y(d, e),
               " = ",
-              a == null || a === "" ? "empty" : String(a)
+              r == null || r === "" ? "empty" : String(r)
             ] }),
             /* @__PURE__ */ l(
               "button",
@@ -178,13 +179,13 @@ function ae({
         e
       )) })
     ] }) }),
-    /* @__PURE__ */ l(m, { title: "Device", children: /* @__PURE__ */ l("div", { className: q($.length), children: $.map((e) => /* @__PURE__ */ l(
+    /* @__PURE__ */ l(m, { title: "Device", children: /* @__PURE__ */ l("div", { className: q(L.length), children: L.map((e) => /* @__PURE__ */ l(
       "button",
       {
         type: "button",
         "aria-pressed": (t.device ?? "desktop") === e.value,
         "data-tip": e.tip,
-        onClick: () => r({ ...t, device: e.value }),
+        onClick: () => a({ ...t, device: e.value }),
         className: _((t.device ?? "desktop") === e.value),
         children: e.label
       },
@@ -199,7 +200,7 @@ function ae({
           role: "switch",
           "aria-checked": !!t.who,
           "aria-label": "Who sees each field",
-          onClick: () => r({ ...t, who: !t.who }),
+          onClick: () => a({ ...t, who: !t.who }),
           className: j(
             "relative h-4 w-7 shrink-0 rounded-full transition-colors",
             t.who ? "bg-nvr-cyan" : "bg-slate-300 dark:bg-border"
@@ -219,6 +220,6 @@ function ae({
   ] });
 }
 export {
-  ae as PreviewModes,
+  re as PreviewModes,
   y as fieldName
 };