@nivaro/react 0.3.36 → 0.3.37

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

@@ -1,15 +1,15 @@
-import { jsx as l, jsxs as o, Fragment as X } from "react/jsx-runtime";
-import { X as q } from "lucide-react";
-import { useMemo as b } from "react";
-import { cn as G } from "../../../lib/utils.js";
-import { Popover as Q, PopoverTrigger as Y, PopoverContent as Z } from "../../ui/popover.js";
-import { bundleToActiveLayout as ee } from "../bundle-to-active.js";
-import { useRoleNames as te } from "../overview/overview-api.js";
+import { jsx as l, jsxs as r, Fragment as P } from "react/jsx-runtime";
+import { X as Z } from "lucide-react";
+import { useMemo as x } from "react";
+import { cn as ee } from "../../../lib/utils.js";
+import { Popover as te, PopoverTrigger as le, PopoverContent as se } from "../../ui/popover.js";
+import { bundleToActiveLayout as ae } from "../bundle-to-active.js";
+import { useRoleNames as ne } from "../overview/overview-api.js";
 import { useRolePreview as H } from "../settings/settings-api.js";
 import { fieldName as K } from "./PreviewModes.js";
-import { useCollectionPipelines as se, useFieldAccess as le } from "./preview-api.js";
-import { visibilityChanges as ne, fieldAccessForRole as U, compareMarks as ae, fieldsLockedInState as re, leavingNeeds as oe, whoSeesFields as de, whoTint as ie, DEVICE_WIDTH as ce } from "./preview-model.js";
-const W = {
+import { useCollectionPipelines as re, useFieldAccess as oe } from "./preview-api.js";
+import { visibilityChanges as de, fieldAccessForRole as U, compareMarks as ie, fieldsLockedInState as ce, leavingNeeds as he, whoSeesFields as fe, whoTint as me, DEVICE_WIDTH as be, ALL_DEVICE_GAP as G, DEVICE_ORDER as ue, DEVICE_LABEL as J, ALL_DEVICE_WIDTH as X } from "./preview-model.js";
+const T = {
   all: {
     cls: "bg-emerald-50 dark:bg-emerald-500/10",
     swatch: "bg-emerald-200 dark:bg-emerald-500/40",
@@ -36,9 +36,9 @@ const W = {
     label: "No role"
   }
 };
-function F({ title: n, names: h }) {
-  return h.length === 0 ? null : /* @__PURE__ */ o("div", { className: "mt-2 first:mt-0", children: [
-    /* @__PURE__ */ o("p", { className: "text-[11.5px] font-semibold text-slate-600 dark:text-muted-foreground", children: [
+function W({ title: n, names: h }) {
+  return h.length === 0 ? null : /* @__PURE__ */ r("div", { className: "mt-2 first:mt-0", children: [
+    /* @__PURE__ */ r("p", { className: "text-[11.5px] font-semibold text-slate-600 dark:text-muted-foreground", children: [
       n,
       " (",
       h.length,
@@ -47,10 +47,10 @@ function F({ title: n, names: h }) {
     /* @__PURE__ */ l("p", { className: "mt-0.5 text-[12px] leading-snug text-slate-800 dark:text-foreground", children: h.join(", ") })
   ] });
 }
-function he({ who: n, label: h }) {
-  const k = n.edit.length + n.read.length, a = k + n.hidden.length;
-  return /* @__PURE__ */ o(Q, { children: [
-    /* @__PURE__ */ l(Y, { asChild: !0, children: /* @__PURE__ */ o(
+function ge({ who: n, label: h }) {
+  const N = n.edit.length + n.read.length, s = N + n.hidden.length;
+  return /* @__PURE__ */ r(te, { children: [
+    /* @__PURE__ */ l(le, { asChild: !0, children: /* @__PURE__ */ r(
       "button",
       {
         type: "button",
@@ -58,27 +58,27 @@ function he({ who: n, label: h }) {
         "aria-label": `Who sees ${h}`,
         className: "inline-flex items-center rounded bg-white px-1 text-[11px] font-medium text-slate-700 ring-1 ring-slate-300 hover:bg-slate-50 dark:bg-card dark:text-foreground dark:ring-border dark:hover:bg-muted",
         children: [
-          k,
+          N,
           "/",
-          a,
+          s,
           " roles"
         ]
       }
     ) }),
-    /* @__PURE__ */ o(Z, { align: "end", className: "w-[280px] p-3", "data-design-pass": "", children: [
-      /* @__PURE__ */ o("p", { className: "mb-2 text-[12.5px] font-semibold text-slate-900 dark:text-foreground", children: [
+    /* @__PURE__ */ r(se, { align: "end", className: "w-[280px] p-3", "data-design-pass": "", children: [
+      /* @__PURE__ */ r("p", { className: "mb-2 text-[12.5px] font-semibold text-slate-900 dark:text-foreground", children: [
         "Who sees ",
         h
       ] }),
-      /* @__PURE__ */ l(F, { title: "Can edit", names: n.edit }),
-      /* @__PURE__ */ l(F, { title: "Read only", names: n.read }),
-      /* @__PURE__ */ l(F, { title: "Never see it", names: n.hidden }),
+      /* @__PURE__ */ l(W, { title: "Can edit", names: n.edit }),
+      /* @__PURE__ */ l(W, { title: "Read only", names: n.read }),
+      /* @__PURE__ */ l(W, { title: "Never see it", names: n.hidden }),
       /* @__PURE__ */ l("p", { className: "mt-2 text-[11.5px] leading-snug text-slate-500 dark:text-muted-foreground", children: "From each role’s permissions and this form’s section and lock rules. Administrators see every field." })
     ] })
   ] });
 }
-function $({ children: n, onClear: h }) {
-  return /* @__PURE__ */ o("div", { className: "flex min-w-0 items-start gap-2", children: [
+function w({ children: n, onClear: h }) {
+  return /* @__PURE__ */ r("div", { className: "flex min-w-0 items-start gap-2", children: [
     /* @__PURE__ */ l("div", { className: "min-w-0 flex-1 text-[12.5px] leading-snug text-slate-700 dark:text-slate-200", children: n }),
     /* @__PURE__ */ l(
       "button",
@@ -88,175 +88,206 @@ function $({ children: n, onClear: h }) {
         "data-tip": "Turn off",
         onClick: h,
         className: "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-slate-500 hover:bg-muted hover:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground",
-        children: /* @__PURE__ */ l(q, { className: "h-3.5 w-3.5" })
+        children: /* @__PURE__ */ l(Z, { className: "h-3.5 w-3.5" })
       }
     )
   ] });
 }
-const S = (n) => n.join(", ");
-function ve({
+const I = (n) => n.join(", ");
+function Ie({
   collection: n,
   bundle: h,
-  parent: k,
-  preview: a,
-  onPreview: N,
-  record: w,
-  fields: I,
-  renderPane: _
+  parent: N,
+  preview: s,
+  onPreview: k,
+  record: v,
+  fields: j,
+  renderPane: q
 }) {
-  const f = b(() => ee(h, k).active, [h, k]), L = (e) => K(I, e), z = (e) => {
-    const t = f.groups.find((s) => s.key === e);
+  const f = x(() => ae(h, N).active, [h, N]), _ = (e) => K(j, e), F = (e) => {
+    const t = f.groups.find((a) => a.key === e);
     return (t == null ? void 0 : t.label) || e;
-  }, u = a.values && Object.keys(a.values).length > 0 ? a.values : null, R = b(
-    () => u ? { ...w ?? {}, ...u } : w,
-    [w, u]
-  ), i = b(
-    () => u ? ne(f, w ?? {}, R ?? {}) : null,
-    [u, f, w, R]
-  ), C = a.roleId, p = C ? a.compareRoleId ?? null : null, { data: y = null } = H(n, p ? C : null), { data: v = null } = H(n, p), r = b(() => {
-    if (!p || !y || !v) return null;
-    const e = U(y, f), t = U(v, f);
-    let s = 0;
-    for (const [c, g] of e) t.get(c) && t.get(c) !== g && s++;
-    return { marks: ae(f, y, v), differ: s, a: y, b: v };
-  }, [p, y, v, f]), d = a.state ?? null, { data: M = [] } = se(n, !!d), m = b(() => {
+  }, b = s.values && Object.keys(s.values).length > 0 ? s.values : null, D = x(
+    () => b ? { ...v ?? {}, ...b } : v,
+    [v, b]
+  ), i = x(
+    () => b ? de(f, v ?? {}, D ?? {}) : null,
+    [b, f, v, D]
+  ), y = s.roleId, u = y ? s.compareRoleId ?? null : null, { data: C = null } = H(n, u ? y : null), { data: $ = null } = H(n, u), o = x(() => {
+    if (!u || !C || !$) return null;
+    const e = U(C, f), t = U($, f);
+    let a = 0;
+    for (const [c, p] of e) t.get(c) && t.get(c) !== p && a++;
+    return { marks: ie(f, C, $), differ: a, a: C, b: $ };
+  }, [u, C, $, f]), d = s.state ?? null, { data: O = [] } = re(n, !!d), m = x(() => {
     if (!d) return null;
-    const e = re(f, d.key), t = M.find((g) => g.id === d.pipelineId), s = oe((t == null ? void 0 : t.transitions) ?? [], d.id), c = /* @__PURE__ */ new Map();
-    for (const g of s)
-      if (!g.collection || g.collection === n)
-        for (const E of g.fields) c.set(E, [...c.get(E) ?? [], g.label]);
-    return { locked: new Set(e), needs: s, needOwn: c };
-  }, [d, f, M, n]), { data: T = [] } = le(n, !!a.who), { data: O = [] } = te(!!a.who), j = b(() => {
-    if (!a.who || T.length === 0) return null;
-    const e = new Set(O.map((s) => s.id.toUpperCase())), t = T.filter(
-      (s) => !s.role.admin_access && (e.size === 0 || e.has(String(s.role.id).toUpperCase()))
+    const e = ce(f, d.key), t = O.find((p) => p.id === d.pipelineId), a = he((t == null ? void 0 : t.transitions) ?? [], d.id), c = /* @__PURE__ */ new Map();
+    for (const p of a)
+      if (!p.collection || p.collection === n)
+        for (const B of p.fields) c.set(B, [...c.get(B) ?? [], p.label]);
+    return { locked: new Set(e), needs: a, needOwn: c };
+  }, [d, f, O, n]), { data: L = [] } = oe(n, !!s.who), { data: z = [] } = ne(!!s.who), A = x(() => {
+    if (!s.who || L.length === 0) return null;
+    const e = new Set(z.map((a) => a.id.toUpperCase())), t = L.filter(
+      (a) => !a.role.admin_access && (e.size === 0 || e.has(String(a.role.id).toUpperCase()))
     );
-    return de(t, f);
-  }, [a.who, T, O, f]), J = b(() => {
+    return fe(t, f);
+  }, [s.who, L, z, f]), Q = x(() => {
     const e = [];
-    if (r && e.push(r.marks), m && d && e.push((t) => {
+    if (o && e.push(o.marks), m && d && e.push((t) => {
       if (t.kind !== "field" && t.kind !== "header") return [];
-      const s = [];
-      m.locked.has(t.field) && s.push({ text: `Locked in ${d.label}`, tone: "slate" });
+      const a = [];
+      m.locked.has(t.field) && a.push({ text: `Locked in ${d.label}`, tone: "slate" });
       const c = m.needOwn.get(t.field);
-      return c && s.push({ text: "Needed to move on", tone: "amber", tip: `${S(c)} needs it` }), s;
+      return c && a.push({ text: "Needed to move on", tone: "amber", tip: `${I(c)} needs it` }), a;
     }), i && (i.shown.length || i.hidden.length)) {
-      const t = new Set(i.shown), s = new Set(i.hidden);
+      const t = new Set(i.shown), a = new Set(i.hidden);
       e.push(
-        (c) => c.kind !== "group" ? [] : t.has(c.key) ? [{ text: "Appears", tone: "emerald", highlight: !0 }] : s.has(c.key) ? [{ text: "Hides", tone: "slate" }] : []
+        (c) => c.kind !== "group" ? [] : t.has(c.key) ? [{ text: "Appears", tone: "emerald", highlight: !0 }] : a.has(c.key) ? [{ text: "Hides", tone: "slate" }] : []
       );
     }
     if (e.length !== 0)
-      return (t) => e.flatMap((s) => s(t)).map((s) => ({ ...s, kind: s.kind ?? "preview" }));
-  }, [r, m, d, i]), V = b(() => {
-    if (j)
+      return (t) => e.flatMap((a) => a(t)).map((a) => ({ ...a, kind: a.kind ?? "preview" }));
+  }, [o, m, d, i]), Y = x(() => {
+    if (A)
       return (e) => {
         if (e.kind !== "field" && e.kind !== "header") return null;
-        const t = j.get(e.field);
+        const t = A.get(e.field);
         return t ? {
-          className: W[ie(t)].cls,
-          chip: /* @__PURE__ */ l(he, { who: t, label: K(I, e.field) })
+          className: T[me(t)].cls,
+          chip: /* @__PURE__ */ l(ge, { who: t, label: K(j, e.field) })
         } : null;
       };
-  }, [j, I]), A = ce[a.device ?? "desktop"], P = JSON.stringify(u ?? {}), B = (e) => A ? /* @__PURE__ */ l(
+  }, [A, j]), M = s.device === "all", E = s.device === "all" ? null : be[s.device ?? "desktop"], R = JSON.stringify(b ?? {}), V = (e) => E ? /* @__PURE__ */ l(
     "div",
     {
-      "data-preview-device": a.device,
+      "data-preview-device": s.device,
       className: "mx-auto flex min-h-0 w-full flex-1 flex-col border-x border-dashed border-slate-300 bg-white dark:border-slate-600 dark:bg-background",
-      style: { maxWidth: A },
+      style: { maxWidth: E },
       children: e
     }
-  ) : e, x = [];
-  p && x.push(
-    /* @__PURE__ */ o($, { onClear: () => N({ ...a, compareRoleId: null }), children: [
-      /* @__PURE__ */ l("b", { className: "font-semibold", children: (r == null ? void 0 : r.a.role.name) ?? "…" }),
+  ) : e, g = [];
+  u && g.push(
+    /* @__PURE__ */ r(w, { onClear: () => k({ ...s, compareRoleId: null }), children: [
+      /* @__PURE__ */ l("b", { className: "font-semibold", children: (o == null ? void 0 : o.a.role.name) ?? "…" }),
       " beside",
       " ",
-      /* @__PURE__ */ l("b", { className: "font-semibold", children: (r == null ? void 0 : r.b.role.name) ?? "…" }),
-      r && (r.differ === 0 ? " — every field is the same for both." : ` — ${r.differ} ${r.differ === 1 ? "field differs" : "fields differ"}, marked Differs.`)
+      /* @__PURE__ */ l("b", { className: "font-semibold", children: (o == null ? void 0 : o.b.role.name) ?? "…" }),
+      o && (o.differ === 0 ? " — every field is the same for both." : ` — ${o.differ} ${o.differ === 1 ? "field differs" : "fields differ"}, marked Differs.`)
     ] }, "compare")
-  ), d && m && x.push(
-    /* @__PURE__ */ o($, { onClear: () => N({ ...a, state: null }), children: [
+  ), d && m && g.push(
+    /* @__PURE__ */ r(w, { onClear: () => k({ ...s, state: null }), children: [
       "As if in ",
       /* @__PURE__ */ l("b", { className: "font-semibold", children: d.label }),
       ":",
       " ",
       m.locked.size === 0 ? "no field locks" : `${m.locked.size} ${m.locked.size === 1 ? "field locks" : "fields lock"}`,
-      m.needs.length > 0 && /* @__PURE__ */ o(X, { children: [
+      m.needs.length > 0 && /* @__PURE__ */ r(P, { children: [
         " · ",
         m.needs.map(
-          (e) => `${e.label} needs ${S(e.fields.map((t) => e.collection && e.collection !== n ? t : L(t)))}${e.collection && e.collection !== n ? ` on ${e.collection}` : ""}`
+          (e) => `${e.label} needs ${I(e.fields.map((t) => e.collection && e.collection !== n ? t : _(t)))}${e.collection && e.collection !== n ? ` on ${e.collection}` : ""}`
         ).join(" · ")
       ] }),
       "."
     ] }, "state")
-  ), u && i && x.push(
-    /* @__PURE__ */ o($, { onClear: () => N({ ...a, values: null }), children: [
+  ), b && i && g.push(
+    /* @__PURE__ */ r(w, { onClear: () => k({ ...s, values: null }), children: [
       "What if",
       " ",
-      /* @__PURE__ */ l("b", { className: "font-semibold", children: Object.entries(u).map(([e, t]) => `${L(e)} = ${t == null || t === "" ? "empty" : String(t)}`).join(", ") }),
+      /* @__PURE__ */ l("b", { className: "font-semibold", children: Object.entries(b).map(([e, t]) => `${_(e)} = ${t == null || t === "" ? "empty" : String(t)}`).join(", ") }),
       ":",
       " ",
       i.shown.length === 0 && i.hidden.length === 0 ? "nothing appears or disappears." : [
-        i.shown.length ? `shows ${S(i.shown.map(z))}` : "",
-        i.hidden.length ? `hides ${S(i.hidden.map(z))}` : ""
+        i.shown.length ? `shows ${I(i.shown.map(F))}` : "",
+        i.hidden.length ? `hides ${I(i.hidden.map(F))}` : ""
       ].filter(Boolean).join("; ") + "."
     ] }, "values")
-  ), a.who && x.push(
-    /* @__PURE__ */ o($, { onClear: () => N({ ...a, who: !1 }), children: [
+  ), s.who && g.push(
+    /* @__PURE__ */ r(w, { onClear: () => k({ ...s, who: !1 }), children: [
       /* @__PURE__ */ l("span", { className: "mr-2", children: "Who sees each field:" }),
-      /* @__PURE__ */ l("span", { className: "inline-flex flex-wrap items-center gap-x-3 gap-y-1 align-middle", children: ["all", "most", "some", "few", "none"].map((e) => /* @__PURE__ */ o("span", { className: "inline-flex items-center gap-1 text-[12px]", children: [
-        /* @__PURE__ */ l("span", { "aria-hidden": !0, className: G("h-2.5 w-2.5 rounded-sm", W[e].swatch) }),
-        W[e].label
+      /* @__PURE__ */ l("span", { className: "inline-flex flex-wrap items-center gap-x-3 gap-y-1 align-middle", children: ["all", "most", "some", "few", "none"].map((e) => /* @__PURE__ */ r("span", { className: "inline-flex items-center gap-1 text-[12px]", children: [
+        /* @__PURE__ */ l("span", { "aria-hidden": !0, className: ee("h-2.5 w-2.5 rounded-sm", T[e].swatch) }),
+        T[e].label
       ] }, e)) }),
-      !j && /* @__PURE__ */ l("span", { className: "ml-2 text-slate-500 dark:text-muted-foreground", children: "Loading…" })
+      !A && /* @__PURE__ */ l("span", { className: "ml-2 text-slate-500 dark:text-muted-foreground", children: "Loading…" })
     ] }, "who")
-  ), A && x.push(
-    /* @__PURE__ */ o($, { onClear: () => N({ ...a, device: "desktop" }), children: [
-      a.device === "phone" ? "Phone" : "Tablet",
+  ), E && g.push(
+    /* @__PURE__ */ r(w, { onClear: () => k({ ...s, device: "desktop" }), children: [
+      s.device === "phone" ? "Phone" : "Tablet",
       " width (",
-      A,
+      E,
       " px): columns wrap as they do on that screen."
     ] }, "device")
+  ), M && g.push(
+    /* @__PURE__ */ l(w, { onClear: () => k({ ...s, device: "desktop" }), children: u ? "Every device at once waits while two roles are side by side: each role shows at full width." : /* @__PURE__ */ l(P, { children: "Desktop, tablet and phone side by side. Drag fields on the desktop pane; the others follow. Tools → Fit to screen shows all three." }) }, "devices")
   );
-  const D = (e, t) => _({
+  const S = (e, t) => q({
     roleId: e,
-    record: R,
+    record: D,
     stateKey: (d == null ? void 0 : d.key) ?? null,
-    marks: J,
-    overlay: V,
+    marks: Q,
+    overlay: Y,
     noDnd: t
   });
-  return /* @__PURE__ */ o("div", { className: "flex min-h-0 flex-1 flex-col", children: [
-    x.length > 0 && /* @__PURE__ */ l(
+  return /* @__PURE__ */ r("div", { className: "flex min-h-0 flex-1 flex-col", children: [
+    g.length > 0 && /* @__PURE__ */ l(
       "div",
       {
         "data-preview-strip": "",
         className: "sticky top-0 z-20 flex shrink-0 flex-col gap-1 border-b border-slate-200 bg-white px-4 py-2 dark:border-border dark:bg-card",
-        children: x
+        children: g
       }
     ),
-    p ? /* @__PURE__ */ l("div", { className: "flex min-h-0 flex-1 gap-px bg-slate-200 dark:bg-border", children: [
-      { id: C, name: r == null ? void 0 : r.a.role.name },
-      { id: p, name: r == null ? void 0 : r.b.role.name }
-    ].map((e, t) => /* @__PURE__ */ o(
+    u ? /* @__PURE__ */ l("div", { className: "flex min-h-0 flex-1 gap-px bg-slate-200 dark:bg-border", children: [
+      { id: y, name: o == null ? void 0 : o.a.role.name },
+      { id: u, name: o == null ? void 0 : o.b.role.name }
+    ].map((e, t) => /* @__PURE__ */ r(
       "section",
       {
         "data-preview-pane": t === 0 ? "a" : "b",
         "aria-label": `As ${e.name ?? "role"}`,
         className: "flex min-w-0 flex-1 flex-col bg-slate-50 dark:bg-background",
         children: [
-          /* @__PURE__ */ o("p", { className: "shrink-0 border-b border-slate-200 bg-white px-4 py-1.5 text-[12px] font-semibold text-slate-700 dark:border-border dark:bg-card dark:text-foreground", children: [
+          /* @__PURE__ */ r("p", { className: "shrink-0 border-b border-slate-200 bg-white px-4 py-1.5 text-[12px] font-semibold text-slate-700 dark:border-border dark:bg-card dark:text-foreground", children: [
             "As ",
             e.name ?? "…"
           ] }),
-          B(D(e.id, !0))
+          V(S(e.id, !0))
         ]
       },
-      `${e.id}:${P}`
-    )) }) : /* @__PURE__ */ l("div", { className: "flex min-h-0 flex-1 flex-col", children: B(D(C, !1)) }, P)
+      `${e.id}:${R}`
+    )) }) : M ? /* @__PURE__ */ l(
+      "div",
+      {
+        "data-preview-devices": "",
+        className: "flex min-h-0 flex-1 overflow-x-auto bg-slate-100 dark:bg-background",
+        style: { gap: G, padding: G },
+        children: ue.map((e, t) => /* @__PURE__ */ r(
+          "section",
+          {
+            "data-preview-pane": e,
+            "data-preview-device": e,
+            "aria-label": `${J[e]} width`,
+            className: "flex min-h-0 shrink-0 flex-col overflow-hidden rounded-md border border-slate-200 bg-white dark:border-border dark:bg-card",
+            style: { width: X[e] + 2 },
+            children: [
+              /* @__PURE__ */ r("p", { className: "flex shrink-0 items-baseline justify-between gap-2 border-b border-slate-200 px-3 py-1.5 text-[12px] dark:border-border", children: [
+                /* @__PURE__ */ l("span", { className: "font-semibold text-slate-700 dark:text-foreground", children: J[e] }),
+                /* @__PURE__ */ r("span", { className: "tabular-nums text-slate-500 dark:text-muted-foreground", children: [
+                  X[e],
+                  " px"
+                ] })
+              ] }),
+              /* @__PURE__ */ l("div", { className: "flex min-h-0 flex-1 flex-col bg-white dark:bg-background", children: S(y, t > 0) })
+            ]
+          },
+          e
+        ))
+      },
+      R
+    ) : /* @__PURE__ */ l("div", { className: "flex min-h-0 flex-1 flex-col", children: V(S(y, !1)) }, R)
   ] });
 }
 export {
-  ve as PreviewPanes
+  Ie as PreviewPanes
 };

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

@@ -0,0 +1,113 @@
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import { Dices as p, X as x } from "lucide-react";
+import { useState as k } from "react";
+import { useNivaroClient as y } from "../../../context.js";
+import { get as b } from "../../../lib/commands.js";
+import { cn as g } from "../../../lib/utils.js";
+import { useCollectionMeta as N } from "../inspector/field-context.js";
+import { samplePickers as v, buildSampleRecord as w } from "./sample-record.js";
+const S = 8, C = () => Math.floor(Math.random() * 2 ** 31);
+function u(l) {
+  const t = y(), { data: e } = N(l), [o, a] = k(!1);
+  return { make: async () => {
+    if (!e) return null;
+    a(!0);
+    try {
+      const d = v(e.fields, e.relations).slice(0, S), i = {};
+      return await Promise.all(
+        d.map(async (m) => {
+          try {
+            const h = await t.request(
+              b(`/items/${encodeURIComponent(m.collection)}`, { fields: "id", limit: 5 })
+            );
+            i[m.field] = (h.data ?? []).map((r) => r == null ? void 0 : r.id).filter((r) => r != null && r !== "");
+          } catch {
+          }
+        })
+      ), w({
+        fields: e.fields,
+        relations: e.relations,
+        relatedIds: i,
+        seed: C()
+      });
+    } finally {
+      a(!1);
+    }
+  }, ready: !!e, busy: o };
+}
+const f = "inline-flex items-center gap-1.5 text-[12px] font-medium text-sky-700 hover:underline disabled:pointer-events-none disabled:opacity-50 dark:text-nvr-cyan";
+function E({
+  collection: l,
+  empty: t,
+  onSample: e
+}) {
+  const { make: o, ready: a, busy: n } = u(l), d = async () => {
+    const i = await o();
+    i && e(i);
+  };
+  return /* @__PURE__ */ c("div", { "data-sample-offer": t ? "empty" : "", className: g(t ? "mt-1 px-2" : "mt-1.5"), children: [
+    t && /* @__PURE__ */ s("p", { className: "pb-1 text-[12px] leading-snug text-slate-500 dark:text-muted-foreground", children: "No records yet. A sample fills the form with made-up values; nothing is saved." }),
+    /* @__PURE__ */ c(
+      "button",
+      {
+        type: "button",
+        "data-sample-record": "",
+        disabled: !a || n,
+        onClick: () => void d(),
+        className: f,
+        children: [
+          /* @__PURE__ */ s(p, { className: "h-3.5 w-3.5" }),
+          n ? "Making a sample…" : "Use a sample record"
+        ]
+      }
+    )
+  ] });
+}
+function U({
+  collection: l,
+  onSample: t,
+  onClear: e
+}) {
+  const { make: o, busy: a } = u(l);
+  return /* @__PURE__ */ c("span", { className: "inline-flex max-w-full flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ c(
+      "span",
+      {
+        "data-sample-chip": "",
+        className: "inline-flex max-w-full items-center gap-1.5 rounded-full bg-nvr-cyan/10 px-2.5 py-1 text-[12px] font-medium text-slate-800 dark:text-foreground",
+        children: [
+          /* @__PURE__ */ s(p, { className: "h-3.5 w-3.5 shrink-0 text-slate-500 dark:text-muted-foreground" }),
+          /* @__PURE__ */ s("span", { className: "truncate", children: "Sample record" }),
+          /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Stop using the sample record",
+              onClick: e,
+              className: "text-slate-500 hover:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground",
+              children: /* @__PURE__ */ s(x, { className: "h-3 w-3" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ s(
+      "button",
+      {
+        type: "button",
+        "data-sample-reroll": "",
+        disabled: a,
+        onClick: () => void o().then((n) => {
+          n && t(n);
+        }),
+        className: f,
+        children: a ? "Making…" : "New sample"
+      }
+    )
+  ] });
+}
+export {
+  U as SampleRecordChip,
+  E as SampleRecordOffer,
+  u as useMakeSample
+};