@nivaro/react 0.3.35 → 0.3.37

package/dist/shared/components/layout-editor/settings/ResolveSettings.js

@@ -1,75 +1,75 @@
-import { jsx as t, jsxs as r } from "react/jsx-runtime";
-import { useQueryClient as W } from "@tanstack/react-query";
-import { Lock as O, Smartphone as P } from "lucide-react";
-import { useState as x, useEffect as A } from "react";
-import { toast as q } from "sonner";
-import { useItemEditAuth as D, useNivaroClient as M } from "../../../context.js";
-import { post as R, patch as T } from "../../../lib/commands.js";
-import { freezeOf as U, activeFreeze as _, localDay as S, dayWords as k, freezePatch as E, activeWindowOf as j, windowState as B, windowWords as Q, phoneOf as L, phoneOfPatch as V, activeWindowPatch as G, conditionsWithKey as H } from "../../../lib/layout-resolve.js";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { useQueryClient as D } from "@tanstack/react-query";
+import { Lock as P, Smartphone as M, Tablet as U } from "lucide-react";
+import { useState as x, useEffect as _ } from "react";
+import { toast as E } from "sonner";
+import { useItemEditAuth as j, useNivaroClient as B } from "../../../context.js";
+import { post as Q, patch as G } from "../../../lib/commands.js";
+import { freezeOf as H, activeFreeze as J, localDay as L, dayWords as k, freezePatch as I, activeWindowOf as X, windowState as Y, windowWords as Z, activeWindowPatch as ee, tabletOfPatch as te, tabletOf as ne, phoneOfPatch as oe, phoneOf as ae, screenVersionOf as ie, conditionsWithKey as le } from "../../../lib/layout-resolve.js";
 import { cn as g } from "../../../lib/utils.js";
-import { useLayoutEditorHost as J } from "../host.js";
-import { useInvalidateLayouts as X, apiFailure as Y } from "../overview/overview-api.js";
-import { amberStrip as Z } from "../panel-style.js";
-import { Setting as $, smallBtn as b, quietText as w, inputCls as I, PickList as ee } from "./controls.js";
-import { useCollectionLayoutList as te, settingsKeys as ne } from "./settings-api.js";
-import { layoutKindOf as ae } from "./settings-registry.js";
-const F = g(I, "h-8 w-[150px] font-mono dark:[color-scheme:dark]");
-function ge(m) {
-  const { layout: c } = m, e = j(c.conditions), [a, l] = x((e == null ? void 0 : e.from) ?? ""), [s, u] = x((e == null ? void 0 : e.until) ?? "");
-  A(() => {
-    l((e == null ? void 0 : e.from) ?? ""), u((e == null ? void 0 : e.until) ?? "");
+import { useLayoutEditorHost as re } from "../host.js";
+import { useInvalidateLayouts as se, apiFailure as ce } from "../overview/overview-api.js";
+import { amberStrip as de } from "../panel-style.js";
+import { Setting as C, smallBtn as y, quietText as N, inputCls as K, PickList as me } from "./controls.js";
+import { useCollectionLayoutList as ue, settingsKeys as fe } from "./settings-api.js";
+import { layoutKindOf as he } from "./settings-registry.js";
+const O = g(K, "h-8 w-[150px] font-mono dark:[color-scheme:dark]");
+function Fe(s) {
+  const { layout: c } = s, e = X(c.conditions), [o, n] = x((e == null ? void 0 : e.from) ?? ""), [r, h] = x((e == null ? void 0 : e.until) ?? "");
+  _(() => {
+    n((e == null ? void 0 : e.from) ?? ""), h((e == null ? void 0 : e.until) ?? "");
   }, [e == null ? void 0 : e.from, e == null ? void 0 : e.until]);
-  const p = !!a && !!s && a > s, f = (o, i) => {
-    o && i && o > i || (o || null) === ((e == null ? void 0 : e.from) ?? null) && (i || null) === ((e == null ? void 0 : e.until) ?? null) || m.set(
-      G(c.conditions, { from: o || null, until: i || null }),
-      o || i ? "Set active dates" : "Clear active dates"
+  const u = !!o && !!r && o > r, m = (i, d) => {
+    i && d && i > d || (i || null) === ((e == null ? void 0 : e.from) ?? null) && (d || null) === ((e == null ? void 0 : e.until) ?? null) || s.set(
+      ee(c.conditions, { from: i || null, until: d || null }),
+      i || d ? "Set active dates" : "Clear active dates"
     );
-  }, d = B(e, S());
+  }, f = Y(e, L());
   return /* @__PURE__ */ t(
-    $,
+    C,
     {
       k: "layout.conditions.active_window",
-      note: p ? /* @__PURE__ */ t("span", { className: "text-amber-700 dark:text-amber-300", children: "The end comes before the start." }) : e && d ? /* @__PURE__ */ t("span", { "data-active-window-state": d, children: d === "open" ? `In use now, ${Q(e)}.` : d === "before" ? `Not in use yet: starts ${k(e.from)}.` : `No longer in use: ended ${k(e.until)}.` }) : null,
-      children: /* @__PURE__ */ r("div", { className: "flex flex-wrap items-end gap-2", children: [
-        /* @__PURE__ */ r("label", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ t("span", { className: w, children: "From" }),
+      note: u ? /* @__PURE__ */ t("span", { className: "text-amber-700 dark:text-amber-300", children: "The end comes before the start." }) : e && f ? /* @__PURE__ */ t("span", { "data-active-window-state": f, children: f === "open" ? `In use now, ${Z(e)}.` : f === "before" ? `Not in use yet: starts ${k(e.from)}.` : `No longer in use: ended ${k(e.until)}.` }) : null,
+      children: /* @__PURE__ */ l("div", { className: "flex flex-wrap items-end gap-2", children: [
+        /* @__PURE__ */ l("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ t("span", { className: N, children: "From" }),
           /* @__PURE__ */ t(
             "input",
             {
               type: "date",
               "aria-label": "Active from",
-              value: a,
-              max: s || void 0,
-              onChange: (o) => {
-                l(o.target.value), f(o.target.value, s);
+              value: o,
+              max: r || void 0,
+              onChange: (i) => {
+                n(i.target.value), m(i.target.value, r);
               },
-              className: F
+              className: O
             }
           )
         ] }),
-        /* @__PURE__ */ r("label", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ t("span", { className: w, children: "Until" }),
+        /* @__PURE__ */ l("label", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ t("span", { className: N, children: "Until" }),
           /* @__PURE__ */ t(
             "input",
             {
               type: "date",
               "aria-label": "Active until",
-              value: s,
-              min: a || void 0,
-              onChange: (o) => {
-                u(o.target.value), f(a, o.target.value);
+              value: r,
+              min: o || void 0,
+              onChange: (i) => {
+                h(i.target.value), m(o, i.target.value);
               },
-              className: F
+              className: O
             }
           )
         ] }),
-        (a || s) && /* @__PURE__ */ t(
+        (o || r) && /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            className: g(b, "mb-0.5"),
+            className: g(y, "mb-0.5"),
             onClick: () => {
-              l(""), u(""), f("", "");
+              n(""), h(""), m("", "");
             },
             children: "Clear"
           }
@@ -78,170 +78,211 @@ function ge(m) {
     }
   );
 }
-function xe(m) {
-  const { layout: c, collection: e } = m, a = Number(c.id), l = J(), s = M(), u = W(), p = X(e), f = te(e), [d, o] = x(!1), i = f.filter((n) => ae(n) === "grouped"), h = L(c.conditions), N = i.find((n) => n.id !== a && L(n.conditions) === a) ?? null, v = h != null ? i.find((n) => n.id === h) ?? null : null, C = (n) => {
-    l.layoutLink && l.navigate(l.layoutLink(e, n));
-  }, K = async () => {
-    o(!0);
+const q = {
+  phone: {
+    key: "phone_of",
+    of: ae,
+    patch: oe,
+    word: "phone",
+    where: "small screens"
+  },
+  tablet: {
+    key: "tablet_of",
+    of: ne,
+    patch: te,
+    word: "tablet",
+    where: "tablet-width screens"
+  }
+};
+function Te(s) {
+  return /* @__PURE__ */ t(R, { ...s, screen: "phone" });
+}
+function Pe(s) {
+  return /* @__PURE__ */ t(R, { ...s, screen: "tablet" });
+}
+function R(s) {
+  const { layout: c, collection: e, screen: o } = s, n = q[o], r = q[o === "phone" ? "tablet" : "phone"], h = o === "phone" ? M : U, u = Number(c.id), m = re(), f = B(), i = D(), d = se(e), V = ue(e), [F, T] = x(!1), S = V.filter((a) => he(a) === "grouped"), p = n.of(c.conditions), W = r.of(c.conditions), w = S.find((a) => a.id !== u && n.of(a.conditions) === u) ?? null, b = p != null ? S.find((a) => a.id === p) ?? null : null, $ = (a) => {
+    m.layoutLink && m.navigate(m.layoutLink(e, a));
+  }, A = async () => {
+    T(!0);
     try {
-      const n = String(c.name || "Form"), z = await s.request(
-        R(`/collection-layouts/${a}/clone`, { name: `${n} (phone)`.slice(0, 255) })
-      ), y = z == null ? void 0 : z.data;
-      if (!(y != null && y.id)) throw new Error("No id came back");
-      await s.request(
-        T(`/collection-layouts/${y.id}`, {
-          conditions: H(y.conditions, "phone_of", a)
+      const a = String(c.name || "Form"), z = await f.request(
+        Q(`/collection-layouts/${u}/clone`, { name: `${a} (${n.word})`.slice(0, 255) })
+      ), v = z == null ? void 0 : z.data;
+      if (!(v != null && v.id)) throw new Error("No id came back");
+      await f.request(
+        G(`/collection-layouts/${v.id}`, {
+          conditions: le(v.conditions, n.key, u)
         })
-      ), u.invalidateQueries({ queryKey: ne.layouts(e) }), p(), q.success("Phone version made: remove what a phone does not need"), C(Number(y.id));
-    } catch (n) {
-      q.error(Y(n, "Could not make the phone version").message);
+      ), i.invalidateQueries({ queryKey: fe.layouts(e) }), d(), E.success(
+        o === "phone" ? "Phone version made: remove what a phone does not need" : "Tablet version made: arrange it for a tablet-width screen"
+      ), $(Number(v.id));
+    } catch (a) {
+      E.error(ce(a, `Could not make the ${n.word} version`).message);
     } finally {
-      o(!1);
+      T(!1);
     }
   };
-  return /* @__PURE__ */ t(
-    $,
+  return W != null ? /* @__PURE__ */ t(C, { k: `layout.conditions.${n.key}`, children: /* @__PURE__ */ l("p", { className: N, "data-screen-version-blocked": o, children: [
+    "This form is the ",
+    r.word,
+    " version of another form, so it cannot have a ",
+    n.word,
+    " ",
+    "version."
+  ] }) }) : /* @__PURE__ */ t(
+    C,
     {
-      k: "layout.conditions.phone_of",
-      note: h != null ? /* @__PURE__ */ r("span", { "data-phone-of": h, children: [
-        "This form opens instead of",
-        " ",
-        /* @__PURE__ */ t("strong", { className: "font-medium text-slate-700 dark:text-foreground", children: (v == null ? void 0 : v.name) ?? `form ${h}` }),
-        " ",
-        "on small screens, for the records and roles that form gets."
-      ] }) : null,
-      children: N ? /* @__PURE__ */ r(
+      k: `layout.conditions.${n.key}`,
+      note: p != null ? /* @__PURE__ */ l(
+        "span",
+        {
+          "data-phone-of": o === "phone" ? p : void 0,
+          "data-tablet-of": o === "tablet" ? p : void 0,
+          children: [
+            "This form opens instead of",
+            " ",
+            /* @__PURE__ */ t("strong", { className: "font-medium text-slate-700 dark:text-foreground", children: (b == null ? void 0 : b.name) ?? `form ${p}` }),
+            " ",
+            "on ",
+            n.where,
+            ", for the records and roles that form gets."
+          ]
+        }
+      ) : null,
+      children: w ? /* @__PURE__ */ l(
         "div",
         {
-          "data-phone-version": N.id,
+          "data-phone-version": o === "phone" ? w.id : void 0,
+          "data-tablet-version": o === "tablet" ? w.id : void 0,
           className: "flex flex-wrap items-center gap-2 text-[12.5px] text-slate-700 dark:text-foreground",
           children: [
-            /* @__PURE__ */ t(P, { className: "h-3.5 w-3.5 shrink-0 text-slate-500 dark:text-muted-foreground" }),
-            /* @__PURE__ */ t("span", { className: "min-w-0 truncate", children: N.name }),
-            l.layoutLink && /* @__PURE__ */ t("button", { type: "button", className: b, onClick: () => C(N.id), children: "Open" })
+            /* @__PURE__ */ t(h, { className: "h-3.5 w-3.5 shrink-0 text-slate-500 dark:text-muted-foreground" }),
+            /* @__PURE__ */ t("span", { className: "min-w-0 truncate", children: w.name }),
+            m.layoutLink && /* @__PURE__ */ t("button", { type: "button", className: y, onClick: () => $(w.id), children: "Open" })
           ]
         }
-      ) : /* @__PURE__ */ r("div", { className: "flex flex-wrap items-center gap-2", children: [
+      ) : /* @__PURE__ */ l("div", { className: "flex flex-wrap items-center gap-2", children: [
         /* @__PURE__ */ t(
-          ee,
+          me,
           {
-            ariaLabel: "Phone version of",
-            value: h != null ? String(h) : null,
-            placeholder: "Not a phone version",
-            clearLabel: "Not a phone version",
-            options: i.filter((n) => n.id !== a && L(n.conditions) == null).map((n) => ({ value: String(n.id), label: n.name })),
-            onChange: (n) => m.set(
-              V(c.conditions, n ? Number(n) : null),
-              n ? "Make this a phone version" : "Stop being a phone version"
+            ariaLabel: o === "phone" ? "Phone version of" : "Tablet version of",
+            value: p != null ? String(p) : null,
+            placeholder: `Not a ${n.word} version`,
+            clearLabel: `Not a ${n.word} version`,
+            options: S.filter((a) => a.id !== u && ie(a.conditions) == null).map((a) => ({ value: String(a.id), label: a.name })),
+            onChange: (a) => s.set(
+              n.patch(c.conditions, a ? Number(a) : null),
+              a ? `Make this a ${n.word} version` : `Stop being a ${n.word} version`
             ),
             className: "w-[220px]"
           }
         ),
-        h == null && /* @__PURE__ */ r(
+        p == null && /* @__PURE__ */ l(
           "button",
           {
             type: "button",
-            className: b,
-            disabled: d,
-            "data-action": "make-phone-version",
-            onClick: () => void K(),
+            className: y,
+            disabled: F,
+            "data-action": `make-${n.word}-version`,
+            onClick: () => void A(),
             children: [
-              /* @__PURE__ */ t(P, { className: "h-3.5 w-3.5" }),
-              d ? "Making…" : "Make a phone version"
+              /* @__PURE__ */ t(h, { className: "h-3.5 w-3.5" }),
+              F ? "Making…" : `Make a ${n.word} version`
             ]
           }
         ),
-        v && l.layoutLink && /* @__PURE__ */ r("button", { type: "button", className: b, onClick: () => C(v.id), children: [
+        b && m.layoutLink && /* @__PURE__ */ l("button", { type: "button", className: y, onClick: () => $(b.id), children: [
           "Open ",
-          v.name
+          b.name
         ] })
       ] })
     }
   );
 }
-function Ne(m) {
-  const { layout: c } = m, { userId: e } = D(), a = U(c.conditions), l = _(c.conditions), [s, u] = x(""), [p, f] = x(""), d = s > S() && p.trim().length >= 3, o = () => {
-    d && (m.set(
-      E(c.conditions, {
-        until: s,
-        reason: p.trim().slice(0, 300),
+function Ee(s) {
+  const { layout: c } = s, { userId: e } = j(), o = H(c.conditions), n = J(c.conditions), [r, h] = x(""), [u, m] = x(""), f = r > L() && u.trim().length >= 3, i = () => {
+    f && (s.set(
+      I(c.conditions, {
+        until: r,
+        reason: u.trim().slice(0, 300),
         by: e || null,
         at: (/* @__PURE__ */ new Date()).toISOString()
       }),
-      `Freeze edits until ${k(s)}`
-    ), u(""), f(""));
+      `Freeze edits until ${k(r)}`
+    ), h(""), m(""));
   };
-  return /* @__PURE__ */ t($, { k: "layout.conditions.freeze", children: a ? /* @__PURE__ */ r(
+  return /* @__PURE__ */ t(C, { k: "layout.conditions.freeze", children: o ? /* @__PURE__ */ l(
     "div",
     {
-      "data-layout-frozen": a.until,
+      "data-layout-frozen": o.until,
       className: g(
         "flex flex-wrap items-center gap-2 rounded-md border px-2.5 py-2 text-[12.5px]",
-        l ? Z : "border-slate-200 text-slate-600 dark:border-border dark:text-muted-foreground"
+        n ? de : "border-slate-200 text-slate-600 dark:border-border dark:text-muted-foreground"
       ),
       children: [
-        /* @__PURE__ */ t(O, { className: "h-3.5 w-3.5 shrink-0" }),
-        /* @__PURE__ */ r("span", { className: "min-w-0 flex-1", children: [
-          l ? "Frozen until " : "The freeze ended on ",
-          k(a.until),
-          a.reason ? `: ${a.reason}` : ""
+        /* @__PURE__ */ t(P, { className: "h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ l("span", { className: "min-w-0 flex-1", children: [
+          n ? "Frozen until " : "The freeze ended on ",
+          k(o.until),
+          o.reason ? `: ${o.reason}` : ""
         ] }),
         /* @__PURE__ */ t(
           "button",
           {
             type: "button",
-            className: b,
+            className: y,
             "data-action": "lift-freeze",
-            onClick: () => m.set(
-              E(c.conditions, null),
-              l ? "Lift the edit freeze" : "Remove the ended freeze"
+            onClick: () => s.set(
+              I(c.conditions, null),
+              n ? "Lift the edit freeze" : "Remove the ended freeze"
             ),
-            children: l ? "Lift" : "Remove"
+            children: n ? "Lift" : "Remove"
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ r("div", { className: "flex flex-wrap items-end gap-2", children: [
-    /* @__PURE__ */ r("label", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ t("span", { className: w, children: "Until" }),
+  ) : /* @__PURE__ */ l("div", { className: "flex flex-wrap items-end gap-2", children: [
+    /* @__PURE__ */ l("label", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ t("span", { className: N, children: "Until" }),
       /* @__PURE__ */ t(
         "input",
         {
           type: "date",
           "aria-label": "Frozen until",
-          value: s,
-          min: S(),
-          onChange: (i) => u(i.target.value),
-          className: F
+          value: r,
+          min: L(),
+          onChange: (d) => h(d.target.value),
+          className: O
         }
       )
     ] }),
-    /* @__PURE__ */ r("label", { className: "flex min-w-[180px] flex-1 flex-col gap-1", children: [
-      /* @__PURE__ */ t("span", { className: w, children: "Reason people see" }),
+    /* @__PURE__ */ l("label", { className: "flex min-w-[180px] flex-1 flex-col gap-1", children: [
+      /* @__PURE__ */ t("span", { className: N, children: "Reason people see" }),
       /* @__PURE__ */ t(
         "input",
         {
-          value: p,
+          value: u,
           maxLength: 300,
           placeholder: "e.g. Go-live on Monday",
-          onChange: (i) => f(i.target.value),
-          onKeyDown: (i) => {
-            i.key === "Enter" && o();
+          onChange: (d) => m(d.target.value),
+          onKeyDown: (d) => {
+            d.key === "Enter" && i();
           },
-          className: g(I, "h-8")
+          className: g(K, "h-8")
         }
       )
     ] }),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ l(
       "button",
       {
         type: "button",
-        className: g(b, "mb-0.5"),
-        disabled: !d,
+        className: g(y, "mb-0.5"),
+        disabled: !f,
         "data-action": "freeze",
-        onClick: o,
+        onClick: i,
         children: [
-          /* @__PURE__ */ t(O, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ t(P, { className: "h-3.5 w-3.5" }),
           "Freeze"
         ]
       }
@@ -249,7 +290,8 @@ function Ne(m) {
   ] }) });
 }
 export {
-  ge as ActiveDatesSetting,
-  Ne as FreezeSetting,
-  xe as PhoneVersionSetting
+  Fe as ActiveDatesSetting,
+  Ee as FreezeSetting,
+  Te as PhoneVersionSetting,
+  Pe as TabletVersionSetting
 };

package/dist/shared/components/layout-editor/settings/WhoSection.js

@@ -8,17 +8,17 @@ import { LAYOUT_TYPES as D } from "../overview/OverviewActions.js";
 import { useRoleNames as F } from "../overview/overview-api.js";
 import { roleIdsPatch as Y } from "../testing/testing-model.js";
 import { Setting as p, smallBtn as d, quietText as x, Segmented as j } from "./controls.js";
-import { ActiveDatesSetting as K, PhoneVersionSetting as M } from "./ResolveSettings.js";
+import { ActiveDatesSetting as K, PhoneVersionSetting as M, TabletVersionSetting as U } from "./ResolveSettings.js";
 import { changeLabel as _, flag as C } from "./section-props.js";
-import { useFieldSources as U, useCollectionLayoutList as $ } from "./settings-api.js";
-import { layoutKindOf as B } from "./settings-registry.js";
+import { useFieldSources as $, useCollectionLayoutList as B } from "./settings-api.js";
+import { layoutKindOf as E } from "./settings-registry.js";
 import { TextSetting as S } from "./TextSetting.js";
-import { ToggleSetting as E } from "./ToggleSetting.js";
+import { ToggleSetting as G } from "./ToggleSetting.js";
 const g = (t) => {
   var e;
   return ((e = D.find((o) => o.type === t)) == null ? void 0 : e.label) ?? t;
-}, G = (t) => t.toLowerCase().replace(/[^a-z0-9_]/g, "_"), v = (t) => t.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "");
-function J(t) {
+}, J = (t) => t.toLowerCase().replace(/[^a-z0-9_]/g, "_"), v = (t) => t.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_|_$/g, "");
+function V(t) {
   let e = t;
   if (typeof e == "string")
     try {
@@ -29,10 +29,10 @@ function J(t) {
   const o = e == null ? void 0 : e.role_ids;
   return Array.isArray(o) ? o.map(String) : [];
 }
-function me(t) {
-  const { layout: e, collection: o } = t, { fields: c, columns: l, relations: i } = U(o), { data: m = [] } = F(!0), f = J(e.conditions);
+function fe(t) {
+  const { layout: e, collection: o } = t, { fields: c, columns: l, relations: i } = $(o), { data: m = [] } = F(!0), f = V(e.conditions);
   return /* @__PURE__ */ a(u, { children: [
-    /* @__PURE__ */ n(V, { ...t }),
+    /* @__PURE__ */ n(W, { ...t }),
     /* @__PURE__ */ n(
       p,
       {
@@ -81,7 +81,7 @@ function me(t) {
         props: t,
         mono: !0,
         placeholder: "e.g. unit_order",
-        sanitize: G,
+        sanitize: J,
         blurOnly: !0,
         extra: !e.slug && typeof e.name == "string" && v(e.name) ? /* @__PURE__ */ n(
           "button",
@@ -110,9 +110,10 @@ function me(t) {
         placeholder: typeof e.name == "string" ? e.name : ""
       }
     ),
-    /* @__PURE__ */ n(E, { k: "layout.create_hidden", props: t }),
+    /* @__PURE__ */ n(G, { k: "layout.create_hidden", props: t }),
     /* @__PURE__ */ n(K, { ...t }),
-    /* @__PURE__ */ n(M, { ...t })
+    /* @__PURE__ */ n(M, { ...t }),
+    /* @__PURE__ */ n(U, { ...t })
   ] });
 }
 function q({ layoutId: t }) {
@@ -137,9 +138,9 @@ function q({ layoutId: t }) {
     o && /* @__PURE__ */ n(w, { layoutId: t, change: "slug", compact: !0, className: "mt-2" })
   ] }) : null;
 }
-function V(t) {
-  const { layout: e, kind: o, bundle: c } = t, [l, i] = y(null), { data: m } = L(Number(e.id)), f = ((m == null ? void 0 : m.nodes.length) ?? 0) > 0, s = c.placements.length + c.groups.length, h = (r) => t.set({ layout_type: r }, `Change kind to ${g(r)}`), T = C(e.is_active), [O, b] = y(!1), k = $(t.collection).find(
-    (r) => r.id !== Number(e.id) && B(r) === o && C(r.is_active)
+function W(t) {
+  const { layout: e, kind: o, bundle: c } = t, [l, i] = y(null), { data: m } = L(Number(e.id)), f = ((m == null ? void 0 : m.nodes.length) ?? 0) > 0, s = c.placements.length + c.groups.length, h = (r) => t.set({ layout_type: r }, `Change kind to ${g(r)}`), T = C(e.is_active), [O, b] = y(!1), k = B(t.collection).find(
+    (r) => r.id !== Number(e.id) && E(r) === o && C(r.is_active)
   ), N = o === "grouped" ? "form" : `${g(o).toLowerCase()} layout`, A = () => {
     t.set({ is_active: !0 }, "Make default", { undoable: !1 }), b(!1);
   }, R = o === "file" ? null : /* @__PURE__ */ n("div", { className: "flex flex-wrap items-center gap-2", children: T ? /* @__PURE__ */ a("span", { className: x, "data-default-layout": !0, children: [
@@ -247,6 +248,6 @@ function V(t) {
   ] });
 }
 export {
-  me as WhoSection,
-  G as sanitizeSlug
+  fe as WhoSection,
+  J as sanitizeSlug
 };

package/dist/shared/components/layout-editor/settings/settings-registry.js

@@ -70,6 +70,14 @@ const y = [
     types: ["grouped"],
     keywords: "mobile small screen variant device lighter"
   },
+  {
+    key: "layout.conditions.tablet_of",
+    section: "who",
+    label: "Tablet version",
+    effect: "A copy of a form arranged for tablet-width screens that opens instead of it there (and on a phone without a phone version); it never opens on its own.",
+    types: ["grouped"],
+    keywords: "ipad tablet medium screen variant device touch"
+  },
   // ── How it's laid out ─────────────────────────────────────────────────────
   {
     key: "layout.tab_mode",
@@ -92,6 +100,14 @@ const y = [
     effect: "Opening a section closes the others.",
     types: t
   },
+  {
+    key: "layout.density",
+    section: "layout",
+    label: "Density",
+    effect: "How tightly the form is spaced for the people filling it in: comfortable, or compact to fit more on the screen.",
+    types: ["grouped"],
+    keywords: "compact comfortable spacing tight dense padding row gap height"
+  },
   {
     key: "layout.row_order_field",
     section: "layout",
@@ -403,6 +419,14 @@ const y = [
     effect: "How many records of their own a person makes before the form switches to tabs.",
     types: s
   },
+  {
+    key: "layout.tour",
+    section: "entry",
+    label: "First-use tour",
+    effect: "The first time someone opens this form, a short tour walks them through its sections; a Tour button brings it back.",
+    types: s,
+    keywords: "onboarding guide walkthrough introduction help first time new people"
+  },
   {
     key: "layout.badge",
     section: "entry",

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

@@ -1,4 +1,4 @@
-const l = ["Editing", "Moving", "Finding", "Saving", "View"], r = [
+const r = ["Editing", "Moving", "Finding", "Saving", "View"], i = [
   { id: "undo", area: "Editing", keys: [["mod", "z"]], label: "Undo" },
   {
     id: "redo",
@@ -55,19 +55,23 @@ const l = ["Editing", "Moving", "Finding", "Saving", "View"], r = [
     label: "Close the editor (record page), or the open popover"
   }
 ];
-function d() {
-  return l.map((e) => ({
+function d(e) {
+  const t = i.findIndex((o) => o.id === e.id);
+  t >= 0 ? i[t] = e : i.push(e);
+}
+function c() {
+  return r.map((e) => ({
     area: e,
-    items: r.filter((a) => a.area === e)
+    items: i.filter((t) => t.area === e)
   })).filter((e) => e.items.length > 0);
 }
-function s() {
-  var a;
+function n() {
+  var t;
   if (typeof navigator > "u") return !0;
-  const e = ((a = navigator.userAgentData) == null ? void 0 : a.platform) ?? navigator.platform ?? navigator.userAgent;
+  const e = ((t = navigator.userAgentData) == null ? void 0 : t.platform) ?? navigator.platform ?? navigator.userAgent;
   return /mac|iphone|ipad|ipod/i.test(e ?? "");
 }
-const i = {
+const l = {
   mod: "⌘",
   shift: "⇧",
   alt: "⌥",
@@ -75,14 +79,15 @@ const i = {
   esc: "Esc",
   space: "Space",
   click: "click"
-}, n = { ...i, mod: "Ctrl", shift: "Shift", alt: "Alt" };
-function c(e, a = s()) {
-  const o = a ? i : n;
-  return e.map((t) => o[t] ?? (t.length === 1 ? t.toUpperCase() : t));
+}, s = { ...l, mod: "Ctrl", shift: "Shift", alt: "Alt" };
+function p(e, t = n()) {
+  const o = t ? l : s;
+  return e.map((a) => o[a] ?? (a.length === 1 ? a.toUpperCase() : a));
 }
 export {
-  l as SHORTCUT_AREAS,
-  s as isMacLike,
-  c as keyLabels,
-  d as shortcutGroups
+  r as SHORTCUT_AREAS,
+  n as isMacLike,
+  p as keyLabels,
+  d as registerShortcut,
+  c as shortcutGroups
 };