@gemboss/ui 0.36.1 → 0.39.0

package/src/editor/controls.tsx

@@ -11,7 +11,7 @@
 //   · the edge box hands each keystroke to the caller (`onChange(side, raw)`) and says when to commit (`onCommit`, on
 //     blur): the caller decides what an empty edge means, and the admin has three answers to that on purpose.
 import "../editor.css"; // its own stylesheet travels with it (0.23.0): a surface that never renders it never loads it
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type React from "react";
 import { cssUrl } from "./css-url";
 import { swatchState } from "./swatch";
@@ -27,6 +27,8 @@ export interface SegOption<T extends string = string> {
   value: T;
   /** Default: the value itself. */
   label?: React.ReactNode;
+  /** The button's own name, for a label that is a glyph (an arrow), said by a screen reader and shown on hover. */
+  name?: string;
 }
 
 export interface SegProps<T extends string = string> {
@@ -49,7 +51,69 @@ export interface SegProps<T extends string = string> {
 export function Seg<T extends string = string>({ options, value, onChange, disabled, label, style }: SegProps<T>) {
   return (
     <Segmented<T> fill className="gemboss-ei-seg" style={style} ariaLabel={label ?? ""} value={(value ?? "") as T | ""} onChange={onChange} disabled={disabled}
-      options={options.map((o) => ({ value: o.value, label: o.label ?? o.value }))} />
+      options={options.map((o) => ({ value: o.value, label: o.label ?? o.value, ...(o.name ? { ariaLabel: o.name, title: o.name } : {}) }))} />
+  );
+}
+
+// ── ValueControl ────────────────────────────────────────────────────────────────────────────────────────────────────
+
+export interface ValueControlProps {
+  /** The number box's id (the Field's `htmlFor`). */
+  id?: string;
+  /** The field's name: the chips are announced as "<label> presets". */
+  label: string;
+  /** The named values, smallest first, each `value` as the box would hold it ("" = none). Shown as "name · number". */
+  presets: ReadonlyArray<{ value: string; label: string; title?: string }>;
+  /** What the box holds now: the stored value or the text being typed. */
+  text: string;
+  /** What an empty box follows (another screen's value, the theme's), greyed. */
+  placeholder?: string;
+  /** The unit after the box ("px", "%", "ms"). */
+  suffix?: string;
+  /** A slider under the box, for a bounded range of ≤ ~100 stops. `value` is where its thumb sits. */
+  slider?: { min: number; max: number; step?: number; value: number };
+  /** A chip: the caller saves it at once. */
+  onPreset: (value: string) => void;
+  /** Each key typed. */
+  onText: (raw: string) => void;
+  /** The box let go (blur, Enter). */
+  onCommit: () => void;
+  /** Each move of the slider. */
+  onSlide?: (value: number) => void;
+  /** Keys in the box (↑ ↓ nudges are the caller's). */
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  /** A line under it (e.g. why a typed value was not kept as typed). */
+  note?: string;
+  /** The keyboard a phone shows: "decimal" (default) has no minus key on iOS, so a value that goes below 0 asks for "text". */
+  inputMode?: "decimal" | "text";
+  disabled?: boolean;
+}
+
+/**
+ * `.gemboss-ei-value` (0.38.0): a setting you can click, drag or type (Chris 15/10/2026: "vừa bấm được vừa nhập được, lười thì
+ * bấm"). The named values first, as the kit's segmented control (one lights when the box holds it; a value of its own lights
+ * none), then the number box with its unit and, for a bounded range, a slider. The caller owns the value: it turns chips, keys
+ * and moves into saves.
+ */
+export function ValueControl({ id, label, presets, text, placeholder, suffix, slider, onPreset, onText, onCommit, onSlide, onKeyDown, note, inputMode = "decimal", disabled }: ValueControlProps) {
+  const lit = presets.find((p) => p.value === text.trim())?.value;
+  return (
+    // A chip pressed right after typing keeps the box's focus: its blur would save what was typed, the save locks the field, and
+    // the chip's click landed on a disabled chip (the spacing box's own guard, review of slice 5). The chip is the choice.
+    <div className="gemboss-ei-value" onMouseDown={(e) => { if ((e.target as HTMLElement).closest('[role="group"] button')) e.preventDefault(); }}>
+      {presets.length ? <Seg label={`${label} presets`} value={lit} disabled={disabled} onChange={onPreset}
+        options={presets.map((p) => ({ value: p.value, label: p.label }))} /> : null}
+      <div className="gemboss-ei-value-row">
+        <span className="gemboss-ei-value-box">
+          <input id={id} className="gemboss-field gemboss-field--narrow gemboss-ei-inp" inputMode={inputMode} value={text} placeholder={placeholder}
+            disabled={disabled} aria-label={label} onChange={(e) => onText(e.target.value)} onBlur={onCommit}
+            onKeyDown={(e) => { onKeyDown?.(e); if (!e.defaultPrevented) blurOnEnter(e); }} />
+          {suffix ? <span className="gemboss-ei-suffix">{suffix}</span> : null}
+        </span>
+        {slider && onSlide ? <RangeControl min={slider.min} max={slider.max} step={slider.step} value={slider.value} disabled={disabled} onChange={onSlide} /> : null}
+      </div>
+      {note ? <p className="gemboss-ei-hint" role="status">{note}</p> : null}
+    </div>
   );
 }
 
@@ -132,11 +196,26 @@ export interface EdgeBoxProps {
   narrow?: boolean;
   /** Ids for the boxes, per side. */
   ids?: Partial<Record<EdgeSide, string>>;
+  /**
+   * A side's letter dragged sideways (Figma's and Webflow's scrub, 0.37.0): `dx`, the pixels moved since the press, and the keys
+   * held now, for the caller to turn into a value. A mouse or a pen only: a finger on the letter scrolls the panel as before, and
+   * the box takes the number (its 44px under a finger is the control there). Present, each letter is a 24px drag row.
+   */
+  onScrub?: (side: EdgeSide, dx: number, keys: { shiftKey: boolean; altKey: boolean }) => void;
+  /** The drag let go: `moved` when it changed anything (the caller saves once, one Undo step); not moved, it was a click. */
+  onScrubEnd?: (side: EdgeSide, moved: boolean) => void;
 }
 
 /** `.gemboss-ei-edgebox`: four px boxes, T · R · B · L, mono and centred. */
-export function EdgeBox({ label, values, placeholders, onChange, onCommit, disabled, narrow = true, ids }: EdgeBoxProps) {
+export function EdgeBox({ label, values, placeholders, onChange, onCommit, disabled, narrow = true, ids, onScrub, onScrubEnd }: EdgeBoxProps) {
   const cls = narrow ? "gemboss-field gemboss-field--narrow gemboss-ei-inp" : "gemboss-field gemboss-ei-inp";
+  const drag = useRef<{ side: EdgeSide; id: number; x: number; moved: boolean } | null>(null);
+  const end = (e: React.PointerEvent<HTMLSpanElement>) => {
+    const d = drag.current;
+    if (!d || d.id !== e.pointerId) return;
+    drag.current = null;
+    onScrubEnd?.(d.side, d.moved);
+  };
   return (
     <div className="gemboss-ei-edgebox">
       {SIDES.map((s) => (
@@ -144,7 +223,29 @@ export function EdgeBox({ label, values, placeholders, onChange, onCommit, disab
           <input className={cls} inputMode="numeric" placeholder={placeholders?.[s] ?? "0"}
             aria-label={`${label} ${SIDE_NAME[s]}`} id={ids?.[s]} value={values[s] ?? ""} disabled={disabled}
             onChange={(e) => onChange(s, e.target.value)} onBlur={onCommit} onKeyDown={blurOnEnter} />
-          <span>{s.toUpperCase()}</span>
+          {onScrub ? (
+            // Rendered while disabled too: a field that locks in the middle of a drag (another save landing) must not drop the
+            // drag's handlers, or it never ends and nothing is saved (review of 3a). A drag only refuses to START when disabled.
+            <span className="gemboss-ei-edge-scrub" title={`Drag to change ${SIDE_NAME[s]}`} aria-disabled={disabled || undefined}
+              onPointerDown={(e) => {
+                if (disabled || e.pointerType === "touch" || e.button !== 0) return;
+                e.preventDefault();
+                e.currentTarget.setPointerCapture(e.pointerId);
+                drag.current = { side: s, id: e.pointerId, x: e.clientX, moved: false };
+              }}
+              onPointerMove={(e) => {
+                const d = drag.current;
+                if (!d || d.id !== e.pointerId) return;
+                const dx = e.clientX - d.x;
+                // A press that wanders a pixel is still a click.
+                if (!d.moved && Math.abs(dx) < 2) return;
+                d.moved = true;
+                onScrub(s, dx, { shiftKey: e.shiftKey, altKey: e.altKey });
+              }}
+              onPointerUp={end} onPointerCancel={end}
+              // Its own capture only (the event bubbles from nothing here, but the check is the fleet's rule).
+              onLostPointerCapture={(e) => { if (e.target === e.currentTarget) end(e); }}>{s.toUpperCase()}</span>
+          ) : <span>{s.toUpperCase()}</span>}
         </div>
       ))}
     </div>

package/src/editor/frame.tsx

@@ -156,20 +156,24 @@ export function EditorBack({ as: Comp = "button", label = "Back", ...rest }:
 
 /**
  * The auto-save pill: "Saving…" with a spinner while an edit is in flight, "✓ Draft saved" once it lands.
- * `idle` draws nothing unless `idleText` says what autosave means here (the section editor's "Autosaves", dimmed).
+ * `idle` draws nothing unless `idleText` says what autosave means here (the section editor's "Autosaves", muted).
+ * `live` (default true): "Saving…" and "✓ Draft saved" are a polite live region. `live={false}` for a surface that speaks
+ * through a live region of its own, one that is in the page from its first render and says only what changed (the page
+ * editor's save pill): the pill is then words with a title, and nothing is announced twice.
  */
 export function EditorSaveState({
   state, savedText = "✓ Draft saved", savingText = "Saving…", savingTitle = "Saving draft…",
-  savedTitle = "Every change is saved to the draft automatically", idleText,
+  savedTitle = "Every change is saved to the draft automatically", idleText, live = true,
 }: {
   state: "idle" | "saving" | "saved";
   savedText?: React.ReactNode; savingText?: React.ReactNode; savingTitle?: string; savedTitle?: string; idleText?: React.ReactNode;
+  live?: boolean;
 }) {
   if (state === "idle") {
-    return idleText != null && idleText !== false ? <span className="gemboss-editor-savestate" title={savedTitle} style={{ opacity: 0.55 }}>{idleText}</span> : null;
+    return idleText != null && idleText !== false ? <span className="gemboss-editor-savestate is-idle" title={savedTitle}>{idleText}</span> : null;
   }
   return (
-    <span className={`gemboss-editor-savestate is-${state}`} role="status" aria-live="polite" title={state === "saving" ? savingTitle : savedTitle}>
+    <span className={`gemboss-editor-savestate is-${state}`} {...(live ? { role: "status", "aria-live": "polite" as const } : null)} title={state === "saving" ? savingTitle : savedTitle}>
       {state === "saving" ? <><span className="gemboss-narr-spin" aria-hidden />{savingText}</> : savedText}
     </span>
   );

package/src/editor/index.ts

@@ -36,8 +36,8 @@ export {
   type FieldProps, type InspectorGroupProps, type PanelHeaderProps, type PanelTab, type PanelTabsProps,
 } from "./panel";
 export {
-  ChipButton, ColorControl, EdgeBox, ImageControl, RangeControl, Seg,
-  type ColorControlProps, type EdgeBoxProps, type EdgeSide, type ImageControlProps, type RangeControlProps, type SegOption, type SegProps,
+  ChipButton, ColorControl, EdgeBox, ImageControl, RangeControl, Seg, ValueControl,
+  type ColorControlProps, type EdgeBoxProps, type EdgeSide, type ImageControlProps, type RangeControlProps, type SegOption, type SegProps, type ValueControlProps,
 } from "./controls";
 export { swatchState, type SwatchState } from "./swatch";
 export { cssUrl } from "./css-url";
@@ -48,5 +48,9 @@ export {
   EditorDrawer, LayerList, layerName,
   type EditorDrawerProps, type LayerItem, type LayerListProps,
 } from "./layers";
-export { SortableLayerList, type SortableLayerListProps } from "./sortable";
+export { SortableLayerList, type SortableLayerListProps, useRowDrag, dropIndex } from "./sortable";
+// 16/10/2026: a setting that is a list, as rows (drag, duplicate, fold); its own CSS part, editor-repeater.css.
+export { RepeaterList, useKeyedRows, type RepeaterListProps, type KeyedRows } from "./repeater";
+// 16/10/2026: a closed choice of shapes (an image's ratio, a layout) as picture tiles; its own CSS part, editor-tiles.css.
+export { ChoiceTiles, type ChoiceTile, type ChoiceTilesProps } from "./tiles";
 export { LayerTree, type LayerTreeProps, type LayerTreeRow } from "./tree";

package/src/editor/panel.tsx

@@ -5,7 +5,7 @@
 // InspectorGroup's own open/closed when the caller does not hold it. Controls (Seg, Color, Range, EdgeBox, Image) are
 // controls.tsx: their own module, because only a screen that edits values draws them.
 import "../editor.css"; // its own stylesheet travels with it (0.23.0): a surface that never renders it never loads it
-import { useState } from "react";
+import { useId, useState } from "react";
 import type React from "react";
 
 // ── PanelTabs ───────────────────────────────────────────────────────────────────────────────────────────────────────
@@ -161,29 +161,53 @@ export function InspectorGroup({ title, note, open, defaultOpen = true, onOpenCh
 // ── Field ───────────────────────────────────────────────────────────────────────────────────────────────────────────
 
 export interface FieldProps {
-  /** 13px / 500 above the control. `undefined` / `null` draws no label (a control named by its own aria-label). */
+  /** 13px above the control (beside it in a `row`). `undefined` / `null` draws no label (a control named by its own aria-label). */
   label?: React.ReactNode;
   /** The control's id, so a click on the label focuses it. */
   htmlFor?: string;
   /** A value shown at the label's right edge, bold and tabular (a range's current value: `.gemboss-ei-rangeval`). */
   labelValue?: React.ReactNode;
-  /** A muted line under the control (`p.gemboss-ei-hint`). Put it in `children` instead to place it elsewhere. */
+  /** The setting's help (`p.gemboss-ei-hint.gemboss-ei-help-text`). In a plugin's form a line under the control; inside an
+   *  inspector group (`InspectorGroup`) a ? beside the label opens and closes it (0.39.0). */
   hint?: React.ReactNode;
+  /** A one-value setting (a number, a select, a colour, chips): inside an inspector group the label goes LEFT and the control
+   *  right, one row (0.39.0). Outside a group nothing changes. */
+  row?: boolean;
   /** Added to `.gemboss-ei-fld` (the admin's `togrow`). */
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
 }
 
-/** One labelled row of a panel: `div.gemboss-ei-fld` › label · control · hint. 12px under each row but the last. */
-export function Field({ label, htmlFor, labelValue, hint, className, style, children }: FieldProps) {
+/**
+ * One labelled setting: `div.gemboss-ei-fld` › label · control · help. 12px under each but the last.
+ *
+ * INSIDE AN INSPECTOR GROUP (0.39.0, Chris 16/10/2026: the settings panel looked bigger than the kit and Polaris; research
+ * `_local/gemboss/research/inspector-density-2026-10-16.md`). The controls were Polaris-sized already (field 32, chips 28);
+ * the panel was long: a label line over every control (70px a setting) and help text under it, 22% of a countdown's panel.
+ * There a `row` is label left, control right (GemPages: 52px a setting), the label is quiet (bodyMd, secondary) and the help
+ * is behind a ? (GemPages, PageFly). Outside a group, a plugin's settings form, a help line under a wide field is the
+ * Polaris form and stays.
+ */
+export function Field({ label, htmlFor, labelValue, hint, row = false, className, style, children }: FieldProps) {
+  const helpId = useId();
+  const [helpOpen, setHelpOpen] = useState(false);
+  const cls = ["gemboss-ei-fld", row && label != null ? "gemboss-ei-fld--row" : "", className].filter(Boolean).join(" ");
+  const labelNode = label != null ? (
+    <label htmlFor={htmlFor}>{label}{labelValue != null ? <span className="gemboss-ei-rangeval">{labelValue}</span> : null}</label>
+  ) : null;
   return (
-    <div className={className ? `gemboss-ei-fld ${className}` : "gemboss-ei-fld"} style={style}>
-      {label != null ? (
-        <label htmlFor={htmlFor}>{label}{labelValue != null ? <span className="gemboss-ei-rangeval">{labelValue}</span> : null}</label>
-      ) : null}
+    <div className={cls} style={style}>
+      {/* A ? is a button, so it sits BESIDE the label, not in it (a label may hold no other labelable element). */}
+      {hint && labelNode ? (
+        <div className="gemboss-ei-lbl">
+          {labelNode}
+          <button type="button" className="gemboss-ei-help" aria-label={typeof label === "string" ? `About ${label}` : "About this setting"} aria-describedby={helpId} aria-expanded={helpOpen}
+            onClick={() => setHelpOpen((o) => !o)} onKeyDown={(e) => { if (e.key === "Escape") setHelpOpen(false); }}>?</button>
+        </div>
+      ) : labelNode}
       {children}
-      {hint ? <p className="gemboss-ei-hint">{hint}</p> : null}
+      {hint ? <p className="gemboss-ei-hint gemboss-ei-help-text" id={helpId}>{hint}</p> : null}
     </div>
   );
 }

package/src/editor/repeater.tsx

@@ -0,0 +1,244 @@
+"use client";
+// REPEATER LIST (Chris 16/10/2026: the panel was missing pickers; research
+// `_local/gemboss/research/pickers-2026-10-16/pickers.md` §9 and pattern P11). A setting that is a list (an accordion's items,
+// a pricing table's plans, choice cards) is the element's CONTENT, and the panel drew it as boxes always open, moved one place
+// at a time with ↑ ↓. PageFly and GemPages draw it as rows: a grip to drag, the row's name, duplicate, delete, folded until
+// opened. This is that, for every repeater the admin draws (the Canvas panel and the page editor), one look.
+//
+//   · the header is the row: a grip (drag it; HTML drag and drop does not start from a touch, so ↑ ↓ stay), the name (its
+//     first field, else "Item N") as the button that folds it, then ↑ ↓, duplicate and ✕;
+//   · with more than one row the list opens folded; a row that arrives later (added, duplicated) opens, it is the one
+//     being written;
+//   · Alt+↑ / Alt+↓ on a row's name move it, and the focus stays on it;
+//   · the count beside the list's name.
+// A row's body is drawn only while it is open: a folded row holds no controls (check:page-revision-touchable measures every
+// control the panel shows).
+//
+// Rows are kept by KEY (useKeyedRows), not by index: a row's open state and its controls' unsaved typing follow it when it
+// moves, and a field writes to its row by key. The drag is useRowDrag (sortable.tsx), the same rule as the Layers list.
+import "../editor.css"; // the field and the 44px rule under a finger (`.gemboss-ei-fld`)
+import "../editor-repeater.css"; // its own part (16/10/2026): a surface that never draws a list never loads it
+import { useEffect, useId, useRef, useState } from "react";
+import type React from "react";
+import { useRowDrag } from "./sortable";
+
+let lastKey = 0;
+const freshKey = () => `row-${++lastKey}`;
+
+export interface KeyedRows<T> {
+  /** The rows shown: the stored list, or the one just written while its save is on the way. */
+  rows: readonly T[];
+  /** One stable key per row, in the same order. */
+  keys: readonly string[];
+  move: (from: number, to: number) => void;
+  /** A copy right after it, with a key of its own. */
+  duplicate: (index: number) => void;
+  remove: (index: number) => void;
+  add: (row: T) => void;
+  /**
+   * Change the row with this KEY, from its latest version: `change` gets the row as it is now, not as it was when the field
+   * was drawn. A control that commits late (a colour or a slider holds its write 250 ms, and flushes it when it unmounts)
+   * keeps the key it was drawn with, so a move in between changes the right row, and a removed row is not brought back (no
+   * row with that key: nothing is written). Review of #4506: by index and whole row, that write doubled one row and lost another.
+   */
+  patch: (key: string, change: (row: T) => T) => void;
+}
+
+/**
+ * A stored list with a stable key per row. Each change writes the WHOLE list (`commit`) and shows it at once.
+ *
+ *   · `commit` may answer (a Promise): `false` or a rejection puts the stored list back, unless a later write is on its way
+ *     (its answer decides). Without an answer what was written stays shown until the stored list says otherwise.
+ *   · the stored list is read by CONTENT: a caller that hands a new array each render (`rows ?? []`) does not reset what is
+ *     shown (review of #4506: a row added to an unset list vanished).
+ *   · a stored list equal to one of our writes is that write coming back: what is shown (maybe newer) stays; any other is a
+ *     change from elsewhere (an undo, the chat) and replaces it, the keys kept by position.
+ */
+export function useKeyedRows<T>(value: readonly T[], commit: (next: T[]) => void | PromiseLike<unknown>): KeyedRows<T> {
+  const [state, setState] = useState(() => ({ rows: value.slice(), keys: value.map(() => freshKey()) }));
+  const latest = useRef(state);
+  latest.current = state;
+  const seen = JSON.stringify(value);
+  // The stored list, its text, and the keys it is shown with: what a refused write goes back to.
+  const stored = useRef<{ rows: readonly T[]; json: string; keys: string[] }>({ rows: value, json: seen, keys: state.keys });
+  // Our writes on their way, oldest first.
+  const pending = useRef<Array<{ n: number; json: string; keys: string[] }>>([]);
+  const writes = useRef(0);
+  useEffect(() => {
+    if (seen === stored.current.json) return;
+    const mine = pending.current.findIndex((p) => p.json === seen);
+    if (mine >= 0) {
+      stored.current = { rows: value, json: seen, keys: pending.current[mine]!.keys };
+      pending.current = pending.current.slice(mine + 1);
+      return;
+    }
+    pending.current = [];
+    const keys = value.map((_, i) => latest.current.keys[i] ?? freshKey());
+    stored.current = { rows: value, json: seen, keys };
+    latest.current = { rows: value.slice(), keys };
+    setState(latest.current);
+    // By content (`seen`): a new array with the same rows is not a change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [seen]);
+  const refused = (n: number) => {
+    pending.current = pending.current.filter((p) => p.n !== n);
+    if (n !== writes.current) return;
+    latest.current = { rows: stored.current.rows.slice(), keys: stored.current.keys.slice() };
+    setState(latest.current);
+  };
+  const write = (rows: T[], keys: string[]) => {
+    const n = ++writes.current;
+    pending.current.push({ n, json: JSON.stringify(rows), keys });
+    latest.current = { rows, keys };
+    setState(latest.current);
+    const answer = commit(rows);
+    if (answer && typeof (answer as PromiseLike<unknown>).then === "function") {
+      (answer as PromiseLike<unknown>).then((ok) => { if (ok === false) refused(n); }, () => refused(n));
+    }
+  };
+  const splice = <X,>(xs: readonly X[], at: number, remove: number, ...add: X[]) => { const next = xs.slice(); next.splice(at, remove, ...add); return next; };
+  return {
+    rows: state.rows,
+    keys: state.keys,
+    move: (from, to) => {
+      const { rows, keys } = latest.current;
+      if (from === to || to < 0 || to >= rows.length) return;
+      const r = splice(rows, from, 1), k = splice(keys, from, 1);
+      write(splice(r, to, 0, rows[from]!), splice(k, to, 0, keys[from]!));
+    },
+    duplicate: (index) => {
+      const { rows, keys } = latest.current;
+      if (index < 0 || index >= rows.length) return;
+      write(splice(rows, index + 1, 0, JSON.parse(JSON.stringify(rows[index])) as T), splice(keys, index + 1, 0, freshKey()));
+    },
+    remove: (index) => {
+      const { rows, keys } = latest.current;
+      if (index < 0 || index >= rows.length) return;
+      write(rows.filter((_, n) => n !== index), keys.filter((_, n) => n !== index));
+    },
+    add: (row) => { const { rows, keys } = latest.current; write([...rows, row], [...keys, freshKey()]); },
+    patch: (key, change) => {
+      const { rows, keys } = latest.current;
+      const at = keys.indexOf(key);
+      if (at < 0) return;
+      const next = change(rows[at]!);
+      if (JSON.stringify(next) === JSON.stringify(rows[at])) return;
+      write(rows.map((r, n) => (n === at ? next : r)), keys.slice());
+    },
+  };
+}
+
+export interface RepeaterListProps {
+  /** The list's name ("Cards"), and the noun of its buttons' names ("Move Cards item 2 up"). */
+  label: string;
+  /** Under the name: the setting's sentence. */
+  hint?: React.ReactNode;
+  /** One per row, stable across moves (useKeyedRows). */
+  keys: readonly string[];
+  /** A row's name in its header (its first field); empty says "Item N". */
+  title: (index: number) => string;
+  /** A row's controls, drawn while it is open. */
+  body: (index: number) => React.ReactNode;
+  /** `to` is the index after the move. */
+  onMove: (from: number, to: number) => void;
+  onRemove: (index: number) => void;
+  /** Absent: no duplicate button (a list whose rows must differ). */
+  onDuplicate?: (index: number) => void;
+  /** Absent: no add button. */
+  onAdd?: () => void;
+  /** Default "+ Add item". */
+  addLabel?: string;
+  /** False: the add and duplicate buttons are off (a list at its limit). */
+  canAdd?: boolean;
+  disabled?: boolean;
+  /** Instead of the rows when there are none. Default "No items yet." */
+  empty?: React.ReactNode;
+  /** Attributes on a row's element (a page editor's `data-page-repeater-row`). */
+  rowAttrs?: (index: number) => Record<string, string | number | undefined>;
+  /** 44px buttons with a mouse too (`.gemboss-ei-rep--touch`): a surface whose every control is 44px (the page editor's
+   *  content panel, check:page-revision-touchable). Under a finger they are 44px everywhere. */
+  touch?: boolean;
+}
+
+// A function, not an element built at import: a page that compiles JSX against a global React (the admin's gates) sets that
+// global after its imports run.
+const DuplicateIcon = () => <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5" /><path d="M10.5 3.5v-.5A1.5 1.5 0 0 0 9 1.5H4A1.5 1.5 0 0 0 2.5 3v5A1.5 1.5 0 0 0 4 9.5h.5" /></svg>;
+
+/** `.gemboss-ei-fld.gemboss-ei-rep` › label (+ count) › `.gemboss-ei-rep-list` › one `.gemboss-ei-rep-item` per row › add. */
+export function RepeaterList({ label, hint, keys, title, body, onMove, onRemove, onDuplicate, onAdd, addLabel = "+ Add item", canAdd = true, disabled, empty, rowAttrs, touch }: RepeaterListProps) {
+  const uid = useId();
+  const [open, setOpen] = useState<ReadonlySet<string>>(() => new Set(keys.length <= 1 ? keys : []));
+  // A row that arrives after the list was drawn opens. Compared by content: a caller may hand a new array each render.
+  const [seen, setSeen] = useState<readonly string[]>(keys);
+  if (seen.join("\n") !== keys.join("\n")) {
+    const fresh = keys.filter((k) => !seen.includes(k));
+    setSeen(keys);
+    if (fresh.length) setOpen((o) => new Set([...o, ...fresh]));
+  }
+  const toggle = (key: string) => setOpen((o) => { const next = new Set(o); if (!next.delete(key)) next.add(key); return next; });
+  const drag = useRowDrag(keys, onMove);
+  // A keyboard move keeps the focus on the moved row's name once it has landed (as SortableLayerList).
+  const refocus = useRef<{ key: string; from: number } | null>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const want = refocus.current;
+    if (!want) return;
+    const at = keys.indexOf(want.key);
+    if (at === want.from) return;
+    refocus.current = null;
+    if (at < 0) return;
+    const row = [...(listRef.current?.children ?? [])].find((r) => (r as HTMLElement).dataset.key === want.key);
+    row?.querySelector<HTMLButtonElement>(".gemboss-ei-rep-toggle")?.focus();
+  }, [keys]);
+
+  return (
+    <div className={touch ? "gemboss-ei-fld gemboss-ei-rep gemboss-ei-rep--touch" : "gemboss-ei-fld gemboss-ei-rep"}>
+      <label>{label}{keys.length ? <span className="gemboss-ei-rep-count">{keys.length}</span> : null}</label>
+      {hint}
+      {keys.length === 0 ? (empty ?? <p className="gemboss-ei-hint">No items yet.</p>) : (
+        <div className="gemboss-ei-rep-list" ref={listRef}>
+          {keys.map((key, i) => {
+            const isOpen = open.has(key);
+            const name = title(i) || `Item ${i + 1}`;
+            const bodyId = `${uid}-${key}`;
+            return (
+              <div key={key} data-key={key} className={drag.dragging === key ? "gemboss-ei-rep-item is-dragging" : "gemboss-ei-rep-item"}
+                data-drop={drag.dropAt(key)} {...rowAttrs?.(i)}
+                // A list that went off mid-drag (a save started) takes no drop: the move would race that save.
+                onDragOver={disabled ? undefined : drag.over(key)} onDrop={disabled ? drag.end : drag.drop}>
+                <div className="gemboss-ei-rep-head">
+                  {/* Kept while the list is off (a write in flight), inert: taking it away moved every row's name 16px on each save. */}
+                  <span className="gemboss-ei-rep-grip" aria-hidden draggable={!disabled} title={disabled ? undefined : "Drag to reorder"}
+                    onDragStart={disabled ? undefined : (e) => { const row = e.currentTarget.closest(".gemboss-ei-rep-item"); if (row) e.dataTransfer.setDragImage(row, 12, 12); drag.start(key)(e); }}
+                    onDragEnd={drag.end}>⋮⋮</span>
+                  <button type="button" className="gemboss-ei-rep-toggle" aria-expanded={isOpen} aria-controls={isOpen ? bodyId : undefined}
+                    aria-keyshortcuts={disabled ? undefined : "Alt+ArrowUp Alt+ArrowDown"} onClick={() => toggle(key)}
+                    onKeyDown={(e) => {
+                      if (disabled || !e.altKey || (e.key !== "ArrowUp" && e.key !== "ArrowDown")) return;
+                      const to = e.key === "ArrowUp" ? i - 1 : i + 1;
+                      if (to < 0 || to >= keys.length) return;
+                      e.preventDefault();
+                      refocus.current = { key, from: i };
+                      onMove(i, to);
+                    }}>
+                    <span className="gemboss-ei-rep-title">{name}</span>
+                  </button>
+                  <span className="gemboss-ei-rep-acts">
+                    <button type="button" title="Move up" aria-label={`Move ${label} item ${i + 1} up`} disabled={disabled || i === 0} onClick={() => onMove(i, i - 1)}>↑</button>
+                    <button type="button" title="Move down" aria-label={`Move ${label} item ${i + 1} down`} disabled={disabled || i === keys.length - 1} onClick={() => onMove(i, i + 1)}>↓</button>
+                    {onDuplicate ? (
+                      <button type="button" title="Duplicate" aria-label={`Duplicate ${label} item ${i + 1}`} disabled={disabled || !canAdd} onClick={() => onDuplicate(i)}><DuplicateIcon /></button>
+                    ) : null}
+                    <button type="button" title="Remove" aria-label={`Remove ${label} item ${i + 1}`} disabled={disabled} onClick={() => onRemove(i)}>✕</button>
+                  </span>
+                </div>
+                {isOpen ? <div id={bodyId} className="gemboss-ei-rep-body" role="group" aria-label={name}>{body(i)}</div> : null}
+              </div>
+            );
+          })}
+        </div>
+      )}
+      {onAdd ? <button type="button" className="gemboss-ei-rep-add" disabled={disabled || !canAdd} onClick={onAdd}>{addLabel}</button> : null}
+    </div>
+  );
+}

package/src/editor/sortable.tsx

@@ -7,18 +7,61 @@
 //     `onMove` answers later, after a server write: the focus waits for the row to reach its new place).
 // The drag is kept by the row's ID, so rows that change under it (a section added by the chat) do not move the wrong one.
 // HTML drag and drop does not start from a touch: a list that must reorder on a phone keeps ↑ / ↓ in its `actions`.
+//
+// The drag itself is `useRowDrag` (16/10/2026), shared with the settings panel's RepeaterList (repeater.tsx), so the two lists
+// reorder by one rule.
 import "../editor.css"; // its own stylesheet travels with it (0.23.0): a surface that never renders it never loads it
 import { useEffect, useRef, useState } from "react";
 import type React from "react";
 import { LayerList, type LayerItem, type LayerListProps } from "./layers";
 
+/** Where a dragged row lands: before or after row `over`, as the index it has once it has left its place. */
+export function dropIndex(from: number, over: number, place: "before" | "after"): number {
+  return place === "before" ? (over > from ? over - 1 : over) : (over >= from ? over : over + 1);
+}
+
+/**
+ * A drag over rows kept by ID. `start(id)` on what is dragged, `over(id)` and `drop` on each row, `end` when it ends;
+ * `dropAt(id)` says which edge of row `id` shows the landing line, `dragging` which row is in the air. `onMove(from, to)`
+ * with `to` the index after the move, only when it moves.
+ */
+export function useRowDrag(ids: readonly string[], onMove: (from: number, to: number) => void) {
+  const [drag, setDrag] = useState<{ id: string; over: string; place: "before" | "after" } | null>(null);
+  const drop = () => {
+    if (!drag) return;
+    const from = ids.indexOf(drag.id), over = ids.indexOf(drag.over);
+    setDrag(null);
+    if (from < 0 || over < 0) return;
+    const to = dropIndex(from, over, drag.place);
+    if (to !== from) onMove(from, to);
+  };
+  return {
+    dragging: drag?.id ?? null,
+    dropAt: (id: string): "before" | "after" | undefined => (drag && drag.over === id && drag.id !== id ? drag.place : undefined),
+    start: (id: string) => (e: React.DragEvent) => {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", id);
+      setDrag({ id, over: id, place: "before" });
+    },
+    over: (id: string) => (e: React.DragEvent<HTMLElement>) => {
+      if (!drag) return;
+      e.preventDefault();
+      const r = e.currentTarget.getBoundingClientRect();
+      const place = e.clientY < r.top + r.height / 2 ? "before" : "after";
+      if (drag.over !== id || drag.place !== place) setDrag({ ...drag, over: id, place });
+    },
+    drop: (e: React.DragEvent) => { e.preventDefault(); drop(); },
+    end: () => setDrag(null),
+  };
+}
+
 export interface SortableLayerListProps<T extends LayerItem = LayerItem> extends Omit<LayerListProps<T>, "rowProps" | "mainProps" | "lead" | "listRef"> {
   /** A row moved: `to` is its index AFTER the move. */
   onMove: (item: T, to: number) => void;
 }
 
 export function SortableLayerList<T extends LayerItem>({ onMove, items, ...rest }: SortableLayerListProps<T>) {
-  const [drag, setDrag] = useState<{ id: string; over: string; place: "before" | "after" } | null>(null);
+  const drag = useRowDrag(items.map((it) => it.id), (from, to) => onMove(items[from], to));
   // A keyboard move: the row and the index it left. The focus goes back to it once it is somewhere else. Chromium keeps the
   // focus on a node React moves (measured: the Alt+↑/↓ tests pass without this); a browser that runs the DOM's focus
   // fixup on the re-insert would drop it to <body>, so it is put back.
@@ -35,34 +78,17 @@ export function SortableLayerList<T extends LayerItem>({ onMove, items, ...rest
     row?.querySelector<HTMLButtonElement>(".gemboss-layer-main")?.focus();
   }, [items]);
 
-  const indexOf = (id: string) => items.findIndex((it) => it.id === id);
-  const drop = () => {
-    if (!drag) return;
-    const from = indexOf(drag.id), over = indexOf(drag.over);
-    setDrag(null);
-    if (from < 0 || over < 0) return;
-    // The final index: landing before / after row `over`, counted once the dragged row has left its place.
-    const to = drag.place === "before" ? (over > from ? over - 1 : over) : (over >= from ? over : over + 1);
-    if (to !== from) onMove(items[from], to);
-  };
-
   return (
     <LayerList {...rest} items={items} listRef={listRef}
       lead={() => <span className="gemboss-layer-grip" aria-hidden>⋮⋮</span>}
       rowProps={(it) => ({
-        className: drag?.id === it.id ? "is-dragging" : undefined,
-        "data-drop": drag && drag.over === it.id && drag.id !== it.id ? drag.place : undefined,
+        className: drag.dragging === it.id ? "is-dragging" : undefined,
+        "data-drop": drag.dropAt(it.id),
         draggable: true,
-        onDragStart: (e) => { e.dataTransfer.effectAllowed = "move"; e.dataTransfer.setData("text/plain", it.id); setDrag({ id: it.id, over: it.id, place: "before" }); },
-        onDragOver: (e) => {
-          if (!drag) return;
-          e.preventDefault();
-          const r = e.currentTarget.getBoundingClientRect();
-          const place = e.clientY < r.top + r.height / 2 ? "before" : "after";
-          if (drag.over !== it.id || drag.place !== place) setDrag({ ...drag, over: it.id, place });
-        },
-        onDrop: (e) => { e.preventDefault(); drop(); },
-        onDragEnd: () => setDrag(null),
+        onDragStart: drag.start(it.id),
+        onDragOver: drag.over(it.id),
+        onDrop: drag.drop,
+        onDragEnd: drag.end,
       })}
       mainProps={(it, i) => ({
         "aria-keyshortcuts": "Alt+ArrowUp Alt+ArrowDown",