@nivaro/react 0.3.36 → 0.3.37

package/dist/shared/components/layout-editor/dnd/trash-drop.js

@@ -1,52 +1,58 @@
-import { UNGROUPED_KEY as p, HEADER_GROUP_KEY as d } from "../../../lib/layout-ops.js";
-import { nodeData as f, TABLE_FORM_ZONES as k } from "./collision.js";
-const g = "layout-trash";
-function y(o) {
-  const e = o;
+import { UNGROUPED_KEY as f, HEADER_GROUP_KEY as d } from "../../../lib/layout-ops.js";
+import { nodeData as h, TABLE_FORM_ZONES as k } from "./collision.js";
+const D = "layout-trash";
+function y(n) {
+  const e = n;
   return (e == null ? void 0 : e.layoutTrash) === !0 ? e : null;
 }
-function D(o, e) {
-  if (!o || !e || e.add) return null;
+function s(n, e) {
+  if (!n || !e || e.add) return null;
   const t = e.target;
   if (t.kind === "group") {
-    if (t.key === p || k.includes(t.key) || !o.groups.some((r) => r.key === t.key)) return null;
-    const n = [], l = (r) => {
-      for (const a of o.groups) a.parent_key === r && l(a.key);
-      n.push(r);
+    if (t.key === f || k.includes(t.key) || !n.groups.some((l) => l.key === t.key)) return null;
+    const r = [], u = (l) => {
+      for (const a of n.groups) a.parent_key === l && u(a.key);
+      r.push(l);
     };
-    l(t.key);
-    const u = new Set(n), c = o.placements.filter((r) => r.group_key && u.has(r.group_key)).length;
+    u(t.key);
+    const p = new Set(r), c = n.placements.filter((l) => l.group_key && p.has(l.group_key)).length;
     return {
-      ops: n.map((r) => ({ op: "group_remove", key: r, placements: "delete" })),
+      ops: r.map((l) => ({ op: "group_remove", key: l, placements: "delete" })),
       kind: "section",
       holds: c
     };
   }
-  const s = t.kind === "header" ? d : t.group_key ?? null;
-  return o.placements.some(
-    (n) => n.field === t.field && (n.group_key ?? null) === s
+  const o = t.kind === "header" ? d : t.group_key ?? null;
+  return n.placements.some(
+    (r) => r.field === t.field && (r.group_key ?? null) === o
   ) ? {
-    ops: [{ op: "remove", at: { field: t.field, group_key: s } }],
+    ops: [{ op: "remove", at: { field: t.field, group_key: o } }],
     kind: "field",
     holds: 0
   } : null;
 }
-const _ = (o, e) => e.x >= o.left && e.x <= o.right && e.y >= o.top && e.y <= o.bottom;
-function E(o, e) {
+function E(n, e) {
+  if (e.length <= 1) return s(n, e[0] ?? null);
+  const t = e.map((o) => s(n, o)).filter((o) => o != null);
+  return t.length === 0 ? null : t.length === 1 ? t[0] : { ops: t.flatMap((o) => o.ops), kind: "field", holds: 0, count: t.length };
+}
+const g = (n, e) => e.x >= n.left && e.x <= n.right && e.y >= n.top && e.y <= n.bottom;
+function R(n, e) {
   return (t) => {
-    const s = t.pointerCoordinates;
-    if (s && e(f(t.active.data.current)))
+    const o = t.pointerCoordinates;
+    if (o && e(h(t.active.data.current)))
       for (const i of t.droppableContainers) {
         if (i.disabled || !y(i.data.current)) continue;
-        const n = t.droppableRects.get(i.id);
-        if (n && _(n, s)) return [{ id: i.id, data: { droppableContainer: i } }];
+        const r = t.droppableRects.get(i.id);
+        if (r && g(r, o)) return [{ id: i.id, data: { droppableContainer: i } }];
       }
-    return o(t);
+    return n(t);
   };
 }
 export {
-  g as TRASH_DROP_ID,
-  E as trashAwareCollision,
+  D as TRASH_DROP_ID,
+  R as trashAwareCollision,
   y as trashDropData,
-  D as trashPlan
+  s as trashPlan,
+  E as trashPlanMany
 };

package/dist/shared/components/layout-editor/dnd/trash-links.js

@@ -0,0 +1,97 @@
+import { useMemo as y, useCallback as _ } from "react";
+import { applyLayoutOps as w } from "../../../lib/layout-ops.js";
+import { useCollectionBody as v } from "../collection-meta.js";
+function h(e) {
+  if (typeof e != "string" || !e) return [];
+  const s = /* @__PURE__ */ new Set();
+  for (const r of e.matchAll(/\bitem\.([A-Za-z_][A-Za-z0-9_]*)/g)) s.add(r[1]);
+  for (const r of e.matchAll(/\{\{\s*([A-Za-z_][A-Za-z0-9_]*)\s*\}\}/g)) s.add(r[1]);
+  return [...s];
+}
+function A(e) {
+  const s = [];
+  for (const r of e)
+    if (r != null && r.field) {
+      if (r.computed_type !== "rollup")
+        for (const n of h(r.computed_formula))
+          n !== r.field && s.push({ driver: n, kind: "formula", target: { kind: "field", field: r.field } });
+      for (const n of h(r.default_formula))
+        n !== r.field && s.push({ driver: n, kind: "default", target: { kind: "field", field: r.field } });
+    }
+  return s;
+}
+const p = [
+  "visibility",
+  "skip",
+  "field_rule",
+  "formula",
+  "cascade",
+  "default",
+  "parent_cascade",
+  "row_rule"
+], S = (e) => !!e && !e.startsWith("__") && !e.startsWith("$"), m = (e) => new Set(e.placements.map((s) => s.field).filter(S)), O = (e, s) => `${e} ${s}${e === 1 ? "" : "s"}`;
+function b(e, s, r) {
+  const n = e.target.kind === "group" ? r(e.target.key) : s(e.target.field);
+  switch (e.kind) {
+    case "visibility":
+      return `shows or hides ${n}`;
+    case "skip":
+      return `skips ${n}`;
+    case "field_rule":
+      return `fills ${n}`;
+    case "formula":
+      return `calculates ${n}`;
+    case "default":
+      return `sets the starting value of ${n}`;
+    case "cascade":
+      return e.filterOnly ? `narrows the choices of ${n}` : `filters and clears ${n}`;
+    case "parent_cascade":
+      return `filters the rows of ${n}`;
+    case "row_rule":
+      return `drives row rules in ${n}`;
+  }
+}
+function z(e) {
+  let s;
+  try {
+    s = w(e.bundle, e.ops);
+  } catch {
+    return null;
+  }
+  const r = m(s), n = [...m(e.bundle)].filter((t) => !r.has(t));
+  if (n.length === 0) return null;
+  const l = new Set(n), f = new Set(s.groups.map((t) => t.key)), o = new Set(
+    e.bundle.groups.map((t) => t.key).filter((t) => !f.has(t))
+  ), c = /* @__PURE__ */ new Set(), i = [];
+  for (const t of e.links) {
+    if (!l.has(t.driver) || t.target.kind === "group" && o.has(t.target.key) || t.target.kind === "field" && (l.has(t.target.field) || t.target.field === t.driver))
+      continue;
+    const a = `${t.kind}|${t.target.kind}:${t.target.kind === "group" ? t.target.key : t.target.field}`;
+    c.has(a) || (c.add(a), i.push(t));
+  }
+  if (i.length === 0) return null;
+  i.sort((t, a) => p.indexOf(t.kind) - p.indexOf(a.kind));
+  const d = [...new Set(i.map((t) => t.driver))], u = O(i.length, "rule"), k = d.length === 1 ? `${e.label(d[0])} drives ${u}` : `${d.length} of these fields drive ${u}`, $ = i.map((t) => {
+    const a = b(t, e.label, e.groupLabel), g = d.length === 1 ? a : `${e.label(t.driver)} ${a}`;
+    return g.charAt(0).toUpperCase() + g.slice(1);
+  });
+  return { headline: k, effects: $, count: i.length };
+}
+function C(e, s, r, n) {
+  const { data: l = [] } = v(e, {
+    select: (o) => Array.isArray(o == null ? void 0 : o.fields) ? o.fields : []
+  }), f = y(
+    () => [...s.map((o) => ({ ...o })), ...A(l)],
+    [s, l]
+  );
+  return _(
+    (o, c) => z({ bundle: o, ops: c, links: f, label: r, groupLabel: n }),
+    [f, r, n]
+  );
+}
+export {
+  A as formulaLinks,
+  h as formulaRefs,
+  z as trashWarning,
+  C as useTrashWarning
+};

package/dist/shared/components/layout-editor/even-row.js

@@ -0,0 +1,86 @@
+import { readGroupStructure as _, isFolded as v } from "../../lib/form-structure.js";
+import { HEADER_GROUP_KEY as b } from "../../lib/layout-ops.js";
+import { gridRows as S } from "./auto-arrange.js";
+import { selectedPlacements as g, widthOf as y, storedWidth as E, keyOf as R, WIDTH_LABELS as T, plural as O, normalizedBundle as $, zoneItems as D, GRID_WIDTHS as G, flagOn as H } from "./field-zones.js";
+import { refuse as m, checked as I } from "./structure-ops.js";
+const p = 12, w = (e) => !H(e, "hidden") && e.is_visible !== !1 && !v(e.overrides);
+function P(e, t) {
+  if (t.group_key === b || !w(t)) return null;
+  const s = $(e), o = D(s, t.group_key), r = t.group_key ? s.groups.find((n) => n.key === t.group_key) : null, i = _(r == null ? void 0 : r.swap_config).rows, f = new Set(o.filter(w).map((n) => n.field)), a = i.filter((n) => n.fields.filter((c) => f.has(c)).length >= 2), l = a.find((n) => n.fields.includes(t.field));
+  if (l) return o.filter((n) => w(n) && l.fields.includes(n.field));
+  const d = [], h = /* @__PURE__ */ new Set();
+  for (const n of o) {
+    if (!w(n)) continue;
+    const c = a.find((u) => u.fields.includes(n.field));
+    if (c) {
+      if (h.has(c.key)) continue;
+      h.add(c.key), d.push({ width: p, members: [] });
+      continue;
+    }
+    d.push({ width: y(n), members: [n] });
+  }
+  const k = S(d.map((n) => n.width));
+  for (const n of k) {
+    const c = n.flatMap((u) => d[u].members);
+    if (c.some((u) => u.field === t.field && u.group_key === t.group_key))
+      return n.some((u) => d[u].members.length === 0) ? [t] : c;
+  }
+  return null;
+}
+function W(e) {
+  if (e < 1 || p % e !== 0) return null;
+  const t = p / e;
+  return G.includes(t) ? t : null;
+}
+const z = (e) => e.map((t) => `${t.group_key ?? ""}:${t.field}`).join("|");
+function B(e, t) {
+  if (e.layout.layout_type === "table") return [];
+  const s = [], o = /* @__PURE__ */ new Set();
+  for (const r of g(e, t)) {
+    const i = P(e, r);
+    if (!i) continue;
+    const f = z(i);
+    if (o.has(f)) continue;
+    o.add(f);
+    const a = W(i.length) ?? 4;
+    s.push({ zone: r.group_key, members: i, width: a });
+  }
+  return s;
+}
+function F(e, t) {
+  const s = L(e, t);
+  return s.ok ? null : s.reason;
+}
+function L(e, t) {
+  if (e.layout.layout_type === "table") return m("Table columns have no rows");
+  if (g(e, t).length === 0)
+    return m("Select a field in the row first");
+  const s = B(e, t), o = s.filter((l) => l.members.length > 1);
+  if (o.length === 0)
+    return m(
+      s.length ? "The field is alone in its row" : "Hidden and folded fields take no row"
+    );
+  const r = [];
+  let i = 0;
+  for (const l of o) {
+    const d = r.length;
+    for (const h of l.members)
+      (y(h) !== l.width || l.width === p && h.col_span != null) && r.push({
+        op: "update_placement",
+        at: R(h),
+        patch: { col_span: E(l.width) }
+      });
+    r.length > d && i++;
+  }
+  if (r.length === 0)
+    return m(o.length === 1 ? "This row is already even" : "These rows are already even");
+  const f = o.length === 1 ? o[0] : null, a = f ? `Even out a row: ${f.members.length} fields at ${T[f.width]}` : `Even out ${O(i, "row")}`;
+  return I(e, { ok: !0, ops: r, label: a, notes: [] });
+}
+export {
+  F as evenRowBlocked,
+  L as evenRowPlan,
+  W as evenWidth,
+  P as rowOfPlacement,
+  B as rowsToEven
+};

package/dist/shared/components/layout-editor/field-list.js

@@ -0,0 +1,99 @@
+import { applyLayoutOps as N, HEADER_GROUP_KEY as j } from "../../lib/layout-ops.js";
+import { titleCase as S } from "../../lib/utils.js";
+import { fieldSpot as A } from "./add-target.js";
+import { sectionLabel as M } from "./canvas-diff.js";
+import { normalizedBundle as P, plural as q } from "./field-zones.js";
+import { refuse as $ } from "./structure-ops.js";
+import { humanizeOpError as z } from "./useLayoutDraft.js";
+const F = 200;
+function E(r) {
+  const o = [], n = /* @__PURE__ */ new Set();
+  for (const f of r.split(/[\n\r,;\t]+/)) {
+    const i = f.trim().replace(/^(?:[-*•·]|\d+[.)])\s+/, "").replace(/^["'`“‘]+|["'`”’]+$/g, "").trim();
+    if (!i) continue;
+    const p = i.toLowerCase();
+    if (!n.has(p) && (n.add(p), o.push(i), o.length >= F))
+      break;
+  }
+  return o;
+}
+function H(r) {
+  const o = r.trim();
+  if (!o || o.length > 2e4 || o.startsWith("{") || o.startsWith("[")) return !1;
+  const n = E(o);
+  return n.length === 0 ? !1 : n.every((f) => f.length <= 80 && f.split(/\s+/).length <= 8);
+}
+const C = (r) => r.toLowerCase().replace(/[^a-z0-9]+/g, "");
+function K(r, o) {
+  const n = o.filter((e) => e.field && !e.field.startsWith("__")), f = new Map(n.map((e) => [e.field, e.field])), i = (e) => {
+    const l = /* @__PURE__ */ new Map();
+    for (const s of n) {
+      const t = e(s);
+      t && l.set(t, l.has(t) && l.get(t) !== s.field ? null : s.field);
+    }
+    return l;
+  }, p = i((e) => e.field.toLowerCase()), k = i((e) => (e.label || S(e.field)).toLowerCase()), a = i((e) => C(e.field)), b = i((e) => C(e.label || S(e.field))), m = [], u = [], c = /* @__PURE__ */ new Set();
+  for (const e of r) {
+    const l = e.toLowerCase(), s = C(e), t = f.get(e) ?? p.get(l) ?? k.get(l) ?? (s ? a.get(s) ?? b.get(s) : void 0) ?? null;
+    t ? c.has(t) || (c.add(t), m.push({ name: e, field: t })) : u.push(e);
+  }
+  return { matched: m, unmatched: u };
+}
+function U(r, o, n, f, i = "form") {
+  const p = E(o), { matched: k, unmatched: a } = K(p, n), b = (d) => {
+    var y;
+    return ((y = n.find((h) => h.field === d)) == null ? void 0 : y.label) || S(d);
+  }, m = { unmatched: a, already: [], placed: [] };
+  if (p.length === 0) return { ...$("Paste or type field names first"), ...m };
+  if (k.length === 0)
+    return {
+      ...$(
+        `No field matches ${a.slice(0, 3).join(", ")}${a.length > 3 ? "…" : ""}`
+      ),
+      ...m
+    };
+  const u = P(r), c = A(u, f, i);
+  let e = u, l = c.index;
+  const s = [], t = [], g = [], L = [];
+  for (const d of k) {
+    if (e.placements.some((h) => h.field === d.field && h.group_key === c.group_key)) {
+      t.push(b(d.field));
+      continue;
+    }
+    const y = { op: "place", field: d.field, group_key: c.group_key, index: l };
+    try {
+      e = N(e, [y]), s.push(y), g.push(d.field), l++;
+    } catch (h) {
+      L.push(`${b(d.field)}: ${z(h.message)}`);
+    }
+  }
+  const _ = M(u.groups, c.group_key);
+  if (s.length === 0)
+    return {
+      ...$(
+        t.length ? `${t.join(", ")} ${t.length === 1 ? "is" : "are"} already in ${_}` : L[0] ?? "Nothing to place"
+      ),
+      unmatched: a,
+      already: t,
+      placed: g
+    };
+  const w = [];
+  t.length && w.push(`Already in ${_}: ${t.join(", ")}`), a.length && w.push(`No field matches: ${a.join(", ")}`), w.push(...L);
+  const x = g[0];
+  return {
+    ok: !0,
+    ops: s,
+    label: `Place ${q(g.length, "field")} in ${_}`,
+    notes: w,
+    select: c.group_key === j ? { kind: "header", field: x } : { kind: "field", field: x, group_key: c.group_key },
+    unmatched: a,
+    already: t,
+    placed: g
+  };
+}
+export {
+  H as looksLikeFieldList,
+  K as matchFieldNames,
+  E as parseFieldList,
+  U as placeListPlan
+};

package/dist/shared/components/layout-editor/format-painter.js

@@ -0,0 +1,102 @@
+import { HEADER_GROUP_KEY as O } from "../../lib/layout-ops.js";
+import { titleCase as N } from "../../lib/utils.js";
+import { sameValue as P } from "./canvas-diff.js";
+import { plural as a } from "./field-zones.js";
+import { asObject as $ } from "./inspector/model.js";
+import { refuse as g, checked as T } from "./structure-ops.js";
+const w = [
+  "label",
+  "note",
+  "placeholder",
+  "i18n",
+  "display_formula",
+  "editor_note",
+  "help_video"
+], y = ["interface", "options"], R = [
+  "is_visible",
+  "default_expanded",
+  "col_span",
+  "show_row_revisions",
+  "allow_revision_restore",
+  "lock_conditions",
+  "show_approval_chain"
+];
+function x(o) {
+  const e = {}, r = o;
+  for (const l of R) e[l] = r[l] ?? null;
+  const i = { ...$(o.overrides) };
+  for (const l of w) delete i[l];
+  return { field: o.field, group_key: o.group_key, columns: e, overrides: i };
+}
+const D = (o) => !o.startsWith("__");
+function A(o) {
+  return !o || o.kind === "group" ? "Select a field first" : D(o.field) ? null : "Panels, widgets and formulas keep their own look";
+}
+const S = (o, e) => {
+  if (e.kind === "group") return null;
+  const r = e.kind === "header" ? O : e.group_key;
+  return o.placements.find((i) => i.field === e.field && i.group_key === r) ?? null;
+};
+function B(o, e) {
+  if (A(e)) return null;
+  const r = S(o, e);
+  return r ? x(r) : null;
+}
+function F(o, e, r, i = {}) {
+  var b;
+  const l = i.fieldLabel ?? N, u = [], s = [];
+  let c = 0, f = 0, p = 0;
+  const j = e.group_key === O;
+  let k = 0;
+  for (const v of r) {
+    if (v.kind === "group") continue;
+    if (!D(v.field)) {
+      c++;
+      continue;
+    }
+    const t = S(o, v);
+    if (!t || t.field === e.field && t.group_key === e.group_key) continue;
+    if (t.group_key === O !== j) {
+      k++;
+      continue;
+    }
+    const E = t.field === e.field || (((b = i.sameKind) == null ? void 0 : b.call(i, e.field, t.field)) ?? !1), h = $(t.overrides), d = {};
+    for (const n of w) h[n] !== void 0 && (d[n] = h[n]);
+    for (const n of y) {
+      const _ = E ? e.overrides[n] : h[n];
+      _ !== void 0 && (d[n] = _);
+    }
+    !E && y.some((n) => e.overrides[n] !== void 0) && p++;
+    for (const [n, _] of Object.entries(e.overrides))
+      !w.includes(n) && !y.includes(n) && (d[n] = _);
+    const m = {}, K = t;
+    for (const n of R)
+      P(K[n] ?? null, e.columns[n] ?? null) || (m[n] = e.columns[n] ?? null);
+    const I = Object.keys(d).length ? d : null;
+    if (P(h, I ?? {}) || (m.overrides = I), Object.keys(m).length === 0) {
+      f++;
+      continue;
+    }
+    u.push({
+      op: "update_placement",
+      at: { field: t.field, group_key: t.group_key },
+      patch: m
+    });
+  }
+  return u.length === 0 ? f ? g(f === 1 ? "It already looks the same" : "They already look the same") : k ? g("Header tiles and form fields have different settings") : c ? g("Panels, widgets and formulas keep their own look") : g("Select the fields to paint onto") : (f && s.push(`${a(f, "field")} already looked the same`), c && s.push(`${a(c, "panel")} skipped: panels keep their own look`), k && s.push(`${a(k, "field")} skipped: header tiles and form fields differ`), p && s.push(
+    `${a(p, "field")} of another kind kept ${p === 1 ? "its" : "their"} own input and options`
+  ), T(o, {
+    ok: !0,
+    ops: u,
+    label: `Paint the look of ${l(e.field)} onto ${a(u.length, "field")}`,
+    notes: s
+  }));
+}
+export {
+  w as IDENTITY_OVERRIDES,
+  y as KIND_OVERRIDES,
+  B as lookFrom,
+  x as lookOf,
+  A as paintBlocked,
+  F as paintPlan
+};

package/dist/shared/components/layout-editor/grid-guides.js

@@ -40,22 +40,22 @@ function W(t, r, i) {
   for (const o of R) Math.abs(o - l) < Math.abs(c - l) && (c = o);
   return c;
 }
-const h = [...R].sort((t, r) => t - r), P = (t) => {
+const v = [...R].sort((t, r) => t - r), P = (t) => {
   const r = /span\s+(\d+)/.exec(t.style.gridColumn);
   return r ? Number(r[1]) : 12;
 }, _ = (t) => !!t && getComputedStyle(t).display === "grid" && getComputedStyle(t).gridTemplateColumns.trim().split(/\s+/).length === 12;
 function Q({ onCommit: t }) {
-  const r = E(N), i = C(null), a = C(null), [l, c] = S(!1), [o, g] = S(null), p = () => {
+  const r = E(N), i = C(null), a = C(null), [l, c] = S(!1), [o, p] = S(null), g = () => {
     var e;
     return ((e = i.current) == null ? void 0 : e.closest("[data-design-target]")) ?? null;
   };
   T(() => {
     var e;
-    c(_(((e = p()) == null ? void 0 : e.parentElement) ?? null));
+    c(_(((e = g()) == null ? void 0 : e.parentElement) ?? null));
   }, []);
   const u = (e) => {
     const n = a.current;
-    n && (a.current = null, n.cell.style.gridColumn = n.original, r == null || r.setResizing(!1), g(null), e && n.span !== n.start && t(n.span));
+    n && (a.current = null, n.cell.style.gridColumn = n.original, r == null || r.setResizing(!1), p(null), e && n.span !== n.start && t(n.span));
   };
   k(() => {
     if (o === null) return;
@@ -64,30 +64,30 @@ function Q({ onCommit: t }) {
     };
     return window.addEventListener("keydown", e, !0), () => window.removeEventListener("keydown", e, !0);
   }), k(() => () => u(!1), []);
-  const y = p(), f = y ? P(y) : 12, z = (e) => {
+  const y = g(), f = y ? P(y) : 12, z = (e) => {
     var b, w;
-    const n = p(), s = n == null ? void 0 : n.parentElement;
+    const n = g(), s = n == null ? void 0 : n.parentElement;
     if (!n || !s || e.button !== 0) return;
     e.preventDefault(), e.stopPropagation(), (w = (b = e.currentTarget).setPointerCapture) == null || w.call(b, e.pointerId);
-    const I = getComputedStyle(s), v = P(n);
+    const I = getComputedStyle(s), h = P(n);
     a.current = {
       cell: n,
       left: n.getBoundingClientRect().left,
       width: s.getBoundingClientRect().width,
       gap: Number.parseFloat(I.columnGap) || 0,
-      start: v,
-      span: v,
+      start: h,
+      span: h,
       original: n.style.gridColumn
-    }, r == null || r.setResizing(!0), g(v);
+    }, r == null || r.setResizing(!0), p(h);
   }, A = (e) => {
     const n = a.current;
     if (!n) return;
     const s = W(e.clientX - n.left, n.width, n.gap);
-    s !== n.span && (n.span = s, n.cell.style.gridColumn = `span ${s}`, g(s));
+    s !== n.span && (n.span = s, n.cell.style.gridColumn = `span ${s}`, p(s));
   }, G = (e) => {
     if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
     e.preventDefault(), e.stopPropagation();
-    const n = h.indexOf(f), s = h[Math.max(0, Math.min(h.length - 1, n + (e.key === "ArrowRight" ? 1 : -1)))];
+    const n = v.indexOf(f), s = v[Math.max(0, Math.min(v.length - 1, n + (e.key === "ArrowRight" ? 1 : -1)))];
     s !== void 0 && s !== f && t(s);
   }, m = o ?? f;
   return /* @__PURE__ */ x(M, { children: [
@@ -113,7 +113,9 @@ function Q({ onCommit: t }) {
         onKeyDown: G,
         onClick: (e) => e.stopPropagation(),
         className: L(
-          "absolute -right-[7px] top-1/2 z-20 flex h-7 w-3 -translate-y-1/2 cursor-col-resize items-center justify-center gap-[2px] rounded-sm bg-white ring-1 ring-nvr-cyan transition-colors hover:bg-nvr-cyan/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-nvr-cyan dark:bg-card motion-reduce:transition-none",
+          "absolute -right-[7px] top-1/2 z-20 flex h-7 w-3 -translate-y-1/2 cursor-col-resize touch-none items-center justify-center gap-[2px] rounded-sm bg-white ring-1 ring-nvr-cyan transition-colors hover:bg-nvr-cyan/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-nvr-cyan dark:bg-card motion-reduce:transition-none",
+          // #3193: a finger-sized handle on touch screens (the page does not scroll from it).
+          "[@media(pointer:coarse)]:-right-3 [@media(pointer:coarse)]:h-11 [@media(pointer:coarse)]:w-6",
           o !== null && "bg-nvr-cyan/10",
           !l && "hidden"
         ),