@gemboss/ui 0.35.7 → 0.39.0

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",

package/src/editor/tiles.tsx

@@ -0,0 +1,51 @@
+// CHOICE TILES (16/10/2026, Chris: the panel was missing pickers; research `_local/gemboss/research/pickers-2026-10-16/pickers.md`
+// §4 and pattern P9). A closed choice whose options are SHAPES (an image's ratio, a layout) drawn as picture tiles with their
+// name under them, as GemPages' layout selector and option illustrations do: the seller sees the shape before choosing it,
+// where a dropdown or a text box ("1-1, 4-3, 16-9") makes them read and imagine. The caller owns the value; one click writes.
+//
+//   · `.gemboss-ei-tiles[role=group]` › one `button.gemboss-ei-tile[aria-pressed]` per option › `.gemboss-ei-tile-pic`
+//     (`picture`, or a rectangle `shape` of w×h drawn to fit 26px) · `.gemboss-ei-tile-label`;
+//   · as many to a row as fit at 72px (4 in a 350px panel, 3 at a phone's 288px, 2 wide ones for a choice of two); a name
+//     wraps to two lines; under a finger every tile is at least 44px (min-height 56px always).
+// Its own part (`editor-tiles.css`): only a surface that draws tiles loads it.
+import "../editor-tiles.css";
+import type React from "react";
+
+export interface ChoiceTile {
+  value: string;
+  label: string;
+  /** A rectangle of these proportions, drawn to fit the tile's 26px picture box. */
+  shape?: { w: number; h: number };
+  /** Any other picture (an icon), when the choice is not a rectangle. */
+  picture?: React.ReactNode;
+}
+
+export interface ChoiceTilesProps {
+  /** The group's accessible name (the setting's label). */
+  label: string;
+  options: readonly ChoiceTile[];
+  /** The option that is on; null or a value no tile has: none is lit. */
+  value: string | null;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+const BOX = 26;
+const shapeStyle = ({ w, h }: { w: number; h: number }): React.CSSProperties =>
+  w >= h ? { width: BOX, height: Math.max(4, Math.round((BOX * h) / w)) } : { height: BOX, width: Math.max(4, Math.round((BOX * w) / h)) };
+
+export function ChoiceTiles({ label, options, value, onChange, disabled }: ChoiceTilesProps) {
+  return (
+    <div className="gemboss-ei-tiles" role="group" aria-label={label}>
+      {options.map((o) => (
+        <button key={o.value} type="button" className="gemboss-ei-tile" aria-pressed={o.value === value} disabled={disabled}
+          data-value={o.value} onClick={() => onChange(o.value)}>
+          <span className="gemboss-ei-tile-pic" aria-hidden>
+            {o.picture ?? (o.shape ? <span className="gemboss-ei-tile-shape" style={shapeStyle(o.shape)} /> : null)}
+          </span>
+          <span className="gemboss-ei-tile-label">{o.label}</span>
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/editor-repeater.css

@@ -0,0 +1 @@
+.gemboss-ei-rep>label{display:flex;align-items:center;gap:6px}.gemboss-ei-rep-count{min-width:18px;padding:0 6px;border-radius:9px;background:var(--gemboss-hover,#eceef2);color:var(--gemboss-text-muted,#686b71);font-size:11px;line-height:18px;font-weight:550;text-align:center}.gemboss-ei-rep-list{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.gemboss-ei-rep-item{border:1px solid var(--gemboss-divider,#e5e7ea);border-radius:8px;background:var(--gemboss-surface,#fff)}.gemboss-ei-rep-item.is-dragging{opacity:.4}.gemboss-ei-rep-item[data-drop=before]{box-shadow:0 -2px 0 var(--gemboss-primary,#1b1c1e)}.gemboss-ei-rep-item[data-drop=after]{box-shadow:0 2px 0 var(--gemboss-primary,#1b1c1e)}.gemboss-ei-rep-head{display:flex;align-items:center;gap:2px;padding:2px 4px 2px 2px}.gemboss-ei-rep-grip{flex:none;width:16px;color:var(--gemboss-text-muted,#686b71);font-size:11px;letter-spacing:-2px;line-height:1;text-align:center;cursor:grab;user-select:none}.gemboss-ei-rep-grip[draggable=false]{opacity:.3;cursor:default}.gemboss-ei-rep-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:28px;padding:0 6px;border:0;border-radius:6px;background:none;color:var(--gemboss-text,#1b1c1e);font:inherit;font-size:13px;text-align:left;cursor:pointer}.gemboss-ei-rep-toggle:before{content:"";flex:none;width:5px;height:5px;margin:0 2px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);opacity:.6;transition:transform .12s}.gemboss-ei-rep-toggle[aria-expanded=true]:before{transform:rotate(45deg)}.gemboss-ei-rep-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gemboss-ei-rep-acts{display:flex;gap:2px;flex:none}.gemboss-ei-rep-acts button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:none;color:var(--gemboss-text-muted,#686b71);font:inherit;font-size:13px;line-height:1;cursor:pointer}:is(.gemboss-ei-rep-acts button,.gemboss-ei-rep-add):hover:not(:disabled),.gemboss-ei-rep-toggle:hover{background:var(--gemboss-hover,#eceef2)}:is(.gemboss-ei-rep-acts button,.gemboss-ei-rep-toggle):focus-visible{outline:2px solid var(--gemboss-primary,#1b1c1e);outline-offset:-2px}.gemboss-ei-rep-acts button:disabled{opacity:.3;cursor:default}.gemboss-ei-rep-body{padding:8px 10px 10px;border-top:1px solid var(--gemboss-divider-soft,#edeff2)}.gemboss-ei-rep-add{width:100%;min-height:32px;padding:6px;border:1px dashed var(--gemboss-divider,#e5e7ea);border-radius:8px;background:none;color:inherit;font:inherit;font-size:13px;cursor:pointer}.gemboss-ei-rep-add:disabled{opacity:.4;cursor:default}.gemboss-ei-rep--touch .gemboss-ei-rep-acts button{width:44px;height:44px}.gemboss-ei-rep--touch :is(.gemboss-ei-rep-toggle,.gemboss-ei-rep-add){min-height:44px}@media (prefers-reduced-motion:reduce){.gemboss-ei-rep-toggle:before{transition:none}}

package/src/editor-tiles.css

@@ -0,0 +1 @@
+.gemboss-ei-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:6px}.gemboss-ei-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:56px;padding:6px 4px;border:1px solid var(--gemboss-divider,#e5e7ea);border-radius:8px;background:var(--gemboss-surface,#fff);color:var(--gemboss-text,#1b1c1e);font:inherit;font-size:12px;line-height:16px;cursor:pointer}.gemboss-ei-tile:hover:not(:disabled){background:var(--gemboss-hover,#eceef2)}.gemboss-ei-tile[aria-pressed=true]{border-color:var(--gemboss-primary,#1b1c1e);box-shadow:inset 0 0 0 1px var(--gemboss-primary,#1b1c1e);font-weight:550}.gemboss-ei-tile:focus-visible{outline:2px solid var(--gemboss-primary,#1b1c1e);outline-offset:1px}.gemboss-ei-tile:disabled{opacity:.4;cursor:default}.gemboss-ei-tile-pic{display:grid;place-items:center;width:26px;height:26px}.gemboss-ei-tile-shape{display:block;box-sizing:border-box;border:1.5px solid currentColor;border-radius:3px;opacity:.75}.gemboss-ei-tile-label{max-width:100%;overflow:hidden;text-align:center;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}