@gemboss/ui 0.10.0 → 0.13.0

package/src/collections.tsx

@@ -0,0 +1,414 @@
+/**
+ * Collections (0.13.0): five of the six patterns Chris settled on 05/10/2026, as thin components over the classes of
+ * `@gemboss/ui/collections.css` (load it beside gemboss-ui.css). The sixth, `IndexTable`, keeps selection state and is
+ * in ./index-table (a client module). README "Collections" says which pattern to use when.
+ *
+ *   DataTable     compare values across items, column by column (reports, logs). Polaris DataTable.
+ *   ResourceList  read item by item: small media, a title, one or two lines, badges, one action. Polaris ResourceList.
+ *   CompactList   one line per item (a side rail, a popup, "needs attention"); `variant="activity"` is the timeline.
+ *   CardGrid      the picture is the content; auto-fill at 200 / 240 / 320, 16 apart. With MediaCard.
+ *   Board         items moving through fixed states; 12 cards a column, then "Show 24 more".
+ *   CollectionState / CollectionSkeleton   empty, no match, error, loading (in the shape of the pattern).
+ *
+ * A plain module: no hooks, no "use client", so a server component renders every one of these with any props (render
+ * functions included), and nothing the admin imports pulls it into its first load (the admin draws tables with
+ * Polaris; same reasoning as ./page). The markup is the same as the plain-HTML contract in the catalog, so a surface
+ * without React writes these classes by hand and gets the same thing.
+ */
+import React from "react";
+
+const cx = (...c: Array<string | false | null | undefined>) => c.filter(Boolean).join(" ");
+
+export type SortDirection = "ascending" | "descending";
+export type CollectionSort = { key: string; direction: SortDirection };
+
+/** A column of a DataTable or an IndexTable. Every field is plain data, so a server component can build it. */
+export type CollectionColumn = {
+  key: string;
+  header: React.ReactNode;
+  /** Right-aligned tabular figures, header included (`is-num`). */
+  numeric?: boolean;
+  /** Where clicking the header goes to sort by this column (the order lives in the URL). */
+  sortHref?: string;
+  /** Sortable through `onSort` (a client parent) instead of a link. */
+  sortable?: boolean;
+  /** IndexTable below 768: "hide" leaves the cell out of the folded row; default shows it on the second line. */
+  condensed?: "sub" | "hide";
+  /** IndexTable below 768: the words in front of the value on the folded line ("Score"). */
+  label?: string;
+  /** Cap the cell at this width with an ellipsis (the whole text belongs in the cell's `title`). */
+  truncate?: number | string;
+};
+
+export type CollectionRow = { id: string; cells: Record<string, React.ReactNode> };
+
+/** `aria-sort` for a column header: only on a sortable column; "none" when it is not the current sort. */
+export function ariaSort(col: CollectionColumn, sort?: CollectionSort | null): React.AriaAttributes["aria-sort"] {
+  if (!col.sortHref && !col.sortable) return undefined;
+  return sort && sort.key === col.key ? sort.direction : "none";
+}
+
+/** The header cell's contents: the label, as a link (`sortHref`) or a button (`onSort`) when the column sorts. */
+export function SortHeader({ col, sort, onSort }: { col: CollectionColumn; sort?: CollectionSort | null; onSort?: (key: string, direction: SortDirection) => void }) {
+  const next: SortDirection = sort && sort.key === col.key && sort.direction === "ascending" ? "descending" : "ascending";
+  if (col.sortHref) return <a className="ui-table__sort" href={col.sortHref}>{col.header}</a>;
+  if (col.sortable && onSort) return <button type="button" className="ui-table__sort" onClick={() => onSort(col.key, next)}>{col.header}</button>;
+  return <>{col.header}</>;
+}
+
+const truncStyle = (t: CollectionColumn["truncate"]): React.CSSProperties | undefined =>
+  t == null ? undefined : ({ ["--ui-trunc" as string]: typeof t === "number" ? `${t}px` : t } as React.CSSProperties);
+
+export function Truncate({ children, title, width }: { children: React.ReactNode; title?: string; width?: number | string }) {
+  return <span className="ui-trunc" title={title} style={truncStyle(width)}>{children}</span>;
+}
+
+// ── 1 · DataTable ──────────────────────────────────────────────────────────────────────────────────────────────────
+
+export type DataTableProps = {
+  columns: CollectionColumn[];
+  rows: CollectionRow[];
+  /** Names the table for a screen reader (a visually hidden caption). */
+  label: string;
+  sort?: CollectionSort | null;
+  onSort?: (key: string, direction: SortDirection) => void;
+  /** The first column stays put while the table scrolls sideways (what a data table does below 768). */
+  stickyFirstColumn?: boolean;
+  /** Rows 32 instead of 36: only for more than 20 rows. */
+  density?: "default" | "compact";
+  /** The first cell of every row is its header (`th scope="row"`). Default true: a data table's first column names the row. */
+  rowHeaders?: boolean;
+  totals?: Record<string, React.ReactNode>;
+  footer?: React.ReactNode;
+  /** loading → the skeleton in this table's shape; busy → the rows stay, dimmed; empty / no-match / error → `stateSlot`. */
+  state?: "ready" | "loading" | "busy" | "empty" | "no-match" | "error";
+  /** What to show for empty / no-match / error: a `CollectionState`. The header stays above it. */
+  stateSlot?: React.ReactNode;
+  className?: string;
+};
+
+export function DataTable({ columns, rows, label, sort, onSort, stickyFirstColumn, density = "default", rowHeaders = true, totals, footer, state = "ready", stateSlot, className }: DataTableProps) {
+  if (state === "loading") return <CollectionSkeleton pattern="table" columns={columns} label={label} />;
+  const showRows = state === "ready" || state === "busy";
+  return (
+    <div className={cx("ui-table-wrap", className)} aria-busy={state === "busy" ? true : undefined}>
+      <table className={cx("ui-table", stickyFirstColumn && "ui-table--sticky-first", density === "compact" && "ui-table--compact")}>
+        <caption className="ui-sr-only">{label}</caption>
+        <thead>
+          <tr>{columns.map((c) => <th key={c.key} scope="col" className={c.numeric ? "is-num" : undefined} aria-sort={ariaSort(c, sort)}><SortHeader col={c} sort={sort} onSort={onSort} /></th>)}</tr>
+        </thead>
+        {showRows ? (
+          <tbody>
+            {rows.map((r) => (
+              <tr key={r.id}>
+                {columns.map((c, i) => {
+                  const body = c.truncate != null ? <span className="ui-trunc" style={truncStyle(c.truncate)}>{r.cells[c.key]}</span> : r.cells[c.key];
+                  return i === 0 && rowHeaders
+                    ? <th key={c.key} scope="row" className={c.numeric ? "ui-table__rowhead is-num" : "ui-table__rowhead"}>{body}</th>
+                    : <td key={c.key} className={c.numeric ? "is-num" : undefined}>{body}</td>;
+                })}
+              </tr>
+            ))}
+          </tbody>
+        ) : null}
+        {totals && showRows ? (
+          <tfoot className="ui-table__totals"><tr>{columns.map((c) => <td key={c.key} className={c.numeric ? "is-num" : undefined}>{totals[c.key]}</td>)}</tr></tfoot>
+        ) : null}
+      </table>
+      {!showRows ? stateSlot : null}
+      {footer && showRows ? <div className="ui-table__footer">{footer}</div> : null}
+    </div>
+  );
+}
+
+// ── 3 · ResourceList / ResourceItem ────────────────────────────────────────────────────────────────────────────────
+
+export type ResourceItemProps = {
+  title: React.ReactNode;
+  /** The detail page. The WHOLE row then opens it; the title stays a real link. */
+  href?: string;
+  /** The link element: a Next `Link`, a router link. Default `<a>`. */
+  linkAs?: React.ElementType;
+  /** The full title, when it may be cut by the ellipsis. */
+  titleText?: string;
+  media?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  meta?: React.ReactNode;
+  /** At most three are shown; the rest become "+N". */
+  badges?: React.ReactNode[];
+  aside?: React.ReactNode;
+  /** One button and/or a ⋯ `Menu`. Never more than one visible button. */
+  actions?: React.ReactNode;
+  selected?: boolean;
+  id?: string;
+};
+
+export function ResourceItem({ title, href, linkAs: Link = "a", titleText, media, subtitle, meta, badges, aside, actions, selected, id }: ResourceItemProps) {
+  const shown = (badges || []).slice(0, 3), more = (badges || []).length - shown.length;
+  return (
+    <li className={cx("ui-list__item", selected && "is-selected")} id={id} aria-selected={selected ? true : undefined}>
+      {media ? <div className="ui-list__media">{media}</div> : null}
+      <div className="ui-list__body">
+        {href ? <Link className="ui-list__title" href={href} title={titleText}>{title}</Link> : <span className="ui-list__title" title={titleText}>{title}</span>}
+        {subtitle ? <p className="ui-list__sub">{subtitle}</p> : null}
+        {meta ? <p className="ui-list__meta">{meta}</p> : null}
+        {shown.length ? <div className="ui-list__badges">{shown.map((b, i) => <React.Fragment key={i}>{b}</React.Fragment>)}{more > 0 ? <span className="ui-badge">+{more}</span> : null}</div> : null}
+      </div>
+      {aside != null ? <div className="ui-list__aside">{aside}</div> : null}
+      {actions ? <div className="ui-list__actions">{actions}</div> : null}
+    </li>
+  );
+}
+
+export type ResourceListProps = {
+  label: string;
+  children?: React.ReactNode;
+  /** Inside a card that is already the frame: no border, no shadow. */
+  flush?: boolean;
+  state?: "ready" | "loading" | "busy" | "empty" | "no-match" | "error";
+  stateSlot?: React.ReactNode;
+  /** How many placeholder rows while loading (the number expected, at most 10). */
+  loadingRows?: number;
+  /** The media shape of the loading rows. */
+  loadingMedia?: "avatar" | "thumbnail" | "none";
+  className?: string;
+};
+
+export function ResourceList({ label, children, flush, state = "ready", stateSlot, loadingRows = 5, loadingMedia = "thumbnail", className }: ResourceListProps) {
+  if (state === "loading") return <CollectionSkeleton pattern="list" rows={loadingRows} media={loadingMedia} label={label} flush={flush} />;
+  if (state === "empty" || state === "no-match" || state === "error") {
+    return <div className={cx("ui-list", flush && "ui-list--flush", className)} role="region" aria-label={label}>{stateSlot}</div>;
+  }
+  return <ul className={cx("ui-list", flush && "ui-list--flush", className)} aria-label={label} aria-busy={state === "busy" ? true : undefined}>{children}</ul>;
+}
+
+// ── 4 · CompactList ────────────────────────────────────────────────────────────────────────────────────────────────
+
+export type CompactItem = {
+  id: string;
+  label: React.ReactNode;
+  href?: string;
+  onClick?: () => void;
+  icon?: React.ReactNode;
+  meta?: React.ReactNode;
+  current?: boolean;
+  /** activity: the line under the label, and the dot's tone. */
+  detail?: React.ReactNode;
+  time?: React.ReactNode;
+  dateTime?: string;
+  tone?: "success" | "warning" | "critical" | "info";
+};
+
+export function CompactList({ items, label, variant, linkAs: Link = "a", flush, className }: { items: CompactItem[]; label: string; variant?: "activity"; linkAs?: React.ElementType; flush?: boolean; className?: string }) {
+  const activity = variant === "activity";
+  return (
+    <ul className={cx("ui-list ui-list--compact", activity && "ui-list--activity", flush && "ui-list--flush", className)} aria-label={label}>
+      {items.map((it) => activity ? (
+        <li key={it.id} className="ui-list__item">
+          <span className={cx("ui-list__dot", it.tone && `ui-list__dot--${it.tone}`)} aria-hidden="true" />
+          <div>
+            {it.href ? <Link className="ui-list__label" href={it.href}>{it.label}</Link> : <span className="ui-list__label">{it.label}</span>}
+            {it.detail ? <span className="ui-list__detail">{it.detail}</span> : null}
+          </div>
+          {it.time ? <time className="ui-list__time" dateTime={it.dateTime}>{it.time}</time> : <span />}
+        </li>
+      ) : (
+        <li key={it.id} className="ui-list__item">
+          {React.createElement(it.href ? Link : it.onClick ? "button" : "div", {
+            className: cx("ui-list__row", it.current && "is-selected"),
+            ...(it.href ? { href: it.href, "aria-current": it.current ? "page" : undefined } : it.onClick ? { type: "button", onClick: it.onClick } : {}),
+          }, <>
+            {it.icon ? <span className="ui-list__icon" aria-hidden="true">{it.icon}</span> : null}
+            <span className="ui-list__label">{it.label}</span>
+            {it.meta != null ? <span className="ui-list__meta">{it.meta}</span> : null}
+          </>)}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// ── 5 · CardGrid / MediaCard ───────────────────────────────────────────────────────────────────────────────────────
+
+export type CardGridMin = 200 | 240 | 320;
+
+export function CardGrid({ min = 240, label, children, className }: { min?: CardGridMin; label?: string; children?: React.ReactNode; className?: string }) {
+  return <div className={cx("ui-cardgrid", className)} data-min={min === 240 ? undefined : min} role={label ? "list" : undefined} aria-label={label}>{children}</div>;
+}
+
+export type MediaCardProps = {
+  title: React.ReactNode;
+  href?: string;
+  linkAs?: React.ElementType;
+  /** The picture (an `<img alt="">`): the title names it. null on a board card without one. */
+  media?: React.ReactNode;
+  meta?: React.ReactNode;
+  badges?: React.ReactNode[];
+  /** The ⋯ menu, in the picture's corner. */
+  menu?: React.ReactNode;
+  foot?: React.ReactNode;
+  /** 16/10 by default; 4/3 for a theme or a page. */
+  ratio?: "16/10" | "4/3";
+  /** Inside CardGrid with a `label`, each card is a list item. */
+  listItem?: boolean;
+};
+
+export function MediaCard({ title, href, linkAs: Link = "a", media, meta, badges, menu, foot, ratio = "16/10", listItem }: MediaCardProps) {
+  return (
+    <article className="ui-card ui-card--media" data-ratio={ratio === "4/3" ? "4/3" : undefined} role={listItem ? "listitem" : undefined}>
+      {media == null ? null : href ? <Link className="ui-card__media" href={href} tabIndex={-1} aria-hidden="true">{media}</Link> : <div className="ui-card__media">{media}</div>}
+      {menu ? <div className="ui-card__menu">{menu}</div> : null}
+      <div className="ui-card__body">
+        {href ? <Link className="ui-card__link" href={href}>{title}</Link> : <span className="ui-card__link">{title}</span>}
+        {meta ? <span className="ui-card__meta">{meta}</span> : null}
+        {badges && badges.length ? <div className="ui-list__badges">{badges.slice(0, 3).map((b, i) => <React.Fragment key={i}>{b}</React.Fragment>)}</div> : null}
+      </div>
+      {foot ? <div className="ui-card__foot">{foot}</div> : null}
+    </article>
+  );
+}
+
+// ── 6 · Board ──────────────────────────────────────────────────────────────────────────────────────────────────────
+
+export type BoardColumn = {
+  id: string;
+  title: React.ReactNode;
+  tone?: "success" | "warning" | "critical" | "info";
+  /** The cards, already rendered (MediaCard, or a `ui-card ui-card--media` without a picture). */
+  cards: React.ReactNode[];
+  /** The total when the column holds more than it was given (a server that sent the first page). */
+  count?: number;
+  empty?: React.ReactNode;
+};
+
+/** 12 cards a column, then "Show 24 more" (nested `<details>`, no script): the GemFactory rule, now everyone's. */
+export function Board({ columns, label, pageSize = 12, step = 24, moreLabel = (n) => `Show ${n} more`, emptyLabel = "Nothing here", className }:
+  { columns: BoardColumn[]; label: string; pageSize?: number; step?: number; moreLabel?: (n: number) => React.ReactNode; emptyLabel?: React.ReactNode; className?: string }) {
+  const rest = (cards: React.ReactNode[], from: number): React.ReactNode => {
+    if (from >= cards.length) return null;
+    const n = Math.min(step, cards.length - from);
+    return (
+      <details className="ui-board__more">
+        <summary className="ui-btn ui-btn--sm">{moreLabel(n)}</summary>
+        <ol className="ui-board__list">{cards.slice(from, from + n).map((c, i) => <li key={from + i}>{c}</li>)}</ol>
+        {rest(cards, from + n)}
+      </details>
+    );
+  };
+  return (
+    <div className={cx("ui-board", className)} role="region" aria-label={label}>
+      {columns.map((col) => (
+        <section key={col.id} className="ui-board__col" aria-labelledby={`ui-board-${col.id}`}>
+          <header className="ui-board__head">
+            <span className={cx("ui-board__dot", col.tone && `ui-board__dot--${col.tone}`)} aria-hidden="true" />
+            <span className="ui-board__name" id={`ui-board-${col.id}`}>{col.title}</span>
+            <span className="ui-board__count">{col.count ?? col.cards.length}</span>
+          </header>
+          {col.cards.length ? (
+            <>
+              <ol className="ui-board__list">{col.cards.slice(0, pageSize).map((c, i) => <li key={i}>{c}</li>)}</ol>
+              {rest(col.cards, pageSize)}
+            </>
+          ) : <p className="ui-board__empty">{col.empty ?? emptyLabel}</p>}
+        </section>
+      ))}
+    </div>
+  );
+}
+
+// ── States ─────────────────────────────────────────────────────────────────────────────────────────────────────────
+
+export type CollectionStateProps = {
+  kind: "empty" | "no-match" | "error";
+  title: React.ReactNode;
+  body?: React.ReactNode;
+  /** empty: the ONE thing to do next (create, connect, run). no-match: "Clear filters". error: "Try again". */
+  action?: React.ReactNode;
+  /** error with data still on screen: when that data is from ("as of 14:05"). */
+  staleNote?: React.ReactNode;
+};
+
+/** Empty (nothing yet), no match (filters found nothing: the header and the filters stay), error (never an empty list). */
+export function CollectionState({ kind, title, body, action, staleNote }: CollectionStateProps) {
+  if (kind === "error") {
+    return (
+      <div className="ui-notice ui-notice--danger ui-coll-error" role="alert">
+        <div><b>{title}</b>{body ? <> {body}</> : null}{staleNote ? <span className="ui-muted"> {staleNote}</span> : null}</div>
+        {action}
+      </div>
+    );
+  }
+  return (
+    <div className={cx("ui-empty", kind === "no-match" && "ui-empty--no-match")}>
+      <p className="ui-empty__title">{title}</p>
+      {body ? <p className="ui-empty__body">{body}</p> : null}
+      {action}
+    </div>
+  );
+}
+
+export type SkeletonPattern = "table" | "index" | "list" | "compact" | "grid" | "board";
+
+/**
+ * A placeholder in the shape of the pattern: a table keeps its real header and gets 8px bars in the cells, a list a
+ * media box and two bars, a grid a picture and two bars. `rows` = the number of rows expected (at most 10). The bars'
+ * sheen stops under prefers-reduced-motion (ui.css). The whole block is one status for a screen reader.
+ */
+export function CollectionSkeleton({ pattern, rows = 5, columns = [], media = "thumbnail", label = "Loading", flush, loadingText = "Loading…", check, actions }:
+  { pattern: SkeletonPattern; rows?: number; columns?: CollectionColumn[]; media?: "avatar" | "thumbnail" | "none"; label?: string; flush?: boolean; loadingText?: string;
+    /** index: the checkbox and actions columns the real table will have, so no column moves when rows arrive. */ check?: boolean; actions?: boolean }) {
+  const n = Math.max(1, Math.min(10, rows));
+  const line = (w?: string) => <span className="ui-skeleton__line" style={w ? { width: w } : undefined} />;
+  const status = <span className="ui-sr-only" role="status">{loadingText}</span>;
+  if (pattern === "table" || pattern === "index") {
+    const cols = columns.length ? columns : [{ key: "a", header: "" }, { key: "b", header: "" }, { key: "c", header: "" }];
+    return (
+      <div className={cx("ui-table-wrap ui-skeleton--table", pattern === "index" && "ui-index")} aria-busy="true">
+        {status}
+        <table className={cx("ui-table", pattern === "index" && "ui-table--index")} aria-hidden="true">
+          <thead><tr>{check ? <th className="ui-table__check"><span className="ui-table__checkbox" /></th> : null}{cols.map((c) => <th key={c.key} className={c.numeric ? "is-num" : undefined}>{c.header}</th>)}{actions ? <th className="ui-table__actions" /> : null}</tr></thead>
+          <tbody>{Array.from({ length: n }, (_, i) => <tr key={i}>{check ? <td className="ui-table__check"><span className="ui-table__checkbox" /></td> : null}{cols.map((c) => <td key={c.key}>{line()}</td>)}{actions ? <td className="ui-table__actions">{line("40px")}</td> : null}</tr>)}</tbody>
+        </table>
+      </div>
+    );
+  }
+  if (pattern === "list" || pattern === "compact") {
+    return (
+      <div aria-busy="true">
+        {status}
+        <ul className={cx("ui-list", pattern === "list" ? "ui-skeleton--list" : "ui-list--compact ui-skeleton--compact", flush && "ui-list--flush")} aria-hidden="true">
+          {Array.from({ length: n }, (_, i) => pattern === "list" ? (
+            <li key={i} className="ui-list__item">
+              {media !== "none" ? <span className={cx("ui-skeleton__block", media === "avatar" && "ui-skeleton__block--round")} /> : null}
+              <span className="ui-list__body">{line()}{line()}</span>
+            </li>
+          ) : (
+            <li key={i} className="ui-list__item"><span className="ui-list__row"><span className="ui-skeleton__block" style={{ width: 16, height: 16 }} />{line()}</span></li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+  if (pattern === "grid") {
+    return (
+      <div aria-busy="true">
+        {status}
+        <div className="ui-cardgrid ui-skeleton--grid" aria-hidden="true">
+          {Array.from({ length: n }, (_, i) => (
+            <div key={i} className="ui-card ui-card--media"><span className="ui-card__media" /><span className="ui-card__body">{line()}{line()}</span></div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div aria-busy="true">
+      {status}
+      <div className="ui-board ui-skeleton--board" aria-hidden="true">
+        {Array.from({ length: Math.min(n, 6) }, (_, i) => (
+          <div key={i} className="ui-board__col"><span className="ui-board__head">{line("40%")}</span><ol className="ui-board__list"><li /><li /><li /></ol></div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/editor.css

@@ -28,6 +28,9 @@
 @keyframes gemboss-editor-enter { from { opacity: 0; } to { opacity: 1; } }
 @keyframes gemboss-editor-toast-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
 @keyframes gemboss-pagepicker-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
+/* The top bar's menus (⋯ More, Publish ▾). Named by `.gemboss-editor-menu` since before 0.9.0 but never defined, so they
+   opened with no motion while the page picker beside them slid in: the same entry as the picker's. */
+@keyframes gemboss-flyout-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
 @keyframes gemboss-statusbar-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
 
 /* Editor is position:fixed and self-contained, so main needs no height/padding —
@@ -206,8 +209,11 @@
   z-index: 500;                       /* above the editor (z-index 400) */
   min-width: 210px;
   padding: 6px;
-  animation: gemboss-flyout-in var(--gemboss-transition-fast) ease both;
+  /* No fill mode: once it has landed the menu holds no animated value (a `both` fill left an identity transform on it). */
+  animation: gemboss-flyout-in var(--gemboss-transition-fast) ease;
 }
+@media (prefers-reduced-motion: reduce) {
+ .gemboss-editor-menu { animation: none; } }
 .gemboss-editor-menu-item {
   display: flex;
   align-items: center;
@@ -244,9 +250,9 @@
    and frame tightly and the preview's top gap matches its gap to the chat sidebar. */
 .gemboss-editor-body { flex: 1; min-height: 0; display: flex; gap: 0; padding: var(--gemboss-editor-inset); box-sizing: border-box; }
 /* Both panels become rounded, bordered cards (design-system surface). The preview's direct
-   child is the .gemboss-editor-preview-pane wrapper (it positions the section-outline overlay),
+   child is the .gemboss-editor-preview-pane wrapper (it positions the overlays: Global styles, the score panel),
    so the card styling lives on the WRAPPER — `overflow: hidden` also clips the iframe + the
-   outline panel to the rounded corners. (Targeting .gemboss-pv here would miss: it's now a
+   overlays to the rounded corners. (Targeting .gemboss-pv here would miss: it's now a
    grandchild inside the wrapper.) */
 .gemboss-editor-body > .gemboss-ec,
 .gemboss-editor-body > .gemboss-editor-preview-pane {
@@ -260,19 +266,15 @@
    never reached the screen and the theme editor's copy of the row carried no class at all. The look below is that
    inline style, written as CSS with the same tokens: the same computed values, one owner.
    The LOOK hangs on the row (`.gemboss-ec-tabs > [role="tab"]`); `.gemboss-ec-tab` is what the pointer blocks size
-   (44px under touch here, the 44px overlay under a mouse in chat.css). The theme editor's tabs wear the look but not
-   `.gemboss-ec-tab` yet, so they stay 36px under touch: adding it is a visible change, left for its own decision. */
-/* OFF THE SPACE SCALE, KNOWINGLY: the row's 10px sides and the tab's 7px padding are the inline style's numbers, carried
-   unchanged so the admin does not move a pixel (the typography gate never read them while they were inline strings).
-   Snapping to the scale (12px, 8px) makes the row 4px wider inside and each tab 2px taller: a visible change, left to
-   its own decision. Named here so it is one edit, not a hunt. */
+   (44px under touch here, the 44px overlay under a mouse in chat.css). Every editor's tabs wear it: the theme editor's
+   did not until 05/10/2026 and stayed 36px under touch while the page and section editors' were 44.
+   Spacing is the scale (`--ui-space-*`, ui.css): the inline style's 10px row sides and 7px tab padding became 12 and 8
+   on 05/10/2026, so under a mouse each tab is 2px taller and the row 4px narrower inside. */
 .gemboss-ec-tabs {
-  --gemboss-ec-tabs-pad-x: 10px;
-  --gemboss-ec-tab-pad: 7px;
-  display: flex; gap: 4px; padding: 8px var(--gemboss-ec-tabs-pad-x); border-bottom: 1px solid var(--gemboss-divider); flex: none;
+  display: flex; gap: var(--ui-space-1); padding: var(--ui-space-2) var(--ui-space-3); border-bottom: 1px solid var(--gemboss-divider); flex: none;
 }
 .gemboss-ec-tabs > [role="tab"] {
-  flex: 1; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: var(--gemboss-ec-tab-pad); border-radius: 8px;
+  flex: 1; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: var(--ui-space-2); border-radius: 8px;
   display: flex; align-items: center; justify-content: center; gap: 6px;
   border: 1px solid transparent; background: transparent; color: var(--gemboss-text-muted); box-shadow: none;
 }
@@ -754,10 +756,11 @@ body.ui-resizing .gemboss-editor-body .gemboss-pv { will-change: flex-basis; }
 .gemboss-pageedit-scope{display:none}}
 .gemboss-pageedit-pv{flex:1;min-width:0;background:var(--gemboss-preview-canvas);display:flex;justify-content:center;overflow:auto;position:relative}
 .gemboss-pageedit-pv .gemboss-pv-frame iframe{width:100%;height:100%;border:0;background:#fff;display:block}
-.gemboss-pageedit-chip{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:6px 12px;border-radius:8px;background:rgba(86,97,245,.1);border:1px solid rgba(86,97,245,.3);font-size:12px;color:#3a44de}
+/* Neutral like every other selected thing in the admin (`--gemboss-active-*`), not iris: iris is for focus and links. */
+.gemboss-pageedit-chip{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:6px 12px;border-radius:8px;background:var(--gemboss-active-bg);border:1px solid var(--gemboss-divider);font-size:12px;color:var(--gemboss-active-fg)}
 .gemboss-pageedit-chip strong{text-transform:capitalize}
-.gemboss-pageedit-chip button{margin-left:auto;border:0;background:transparent;color:#3a44de;cursor:pointer;font-size:12px}
-/* Copy a winning test shipped onto this page. Amber, not the editor's indigo: this is not a mode the
+.gemboss-pageedit-chip button{margin-left:auto;border:0;background:transparent;color:var(--gemboss-active-fg);cursor:pointer;font-size:12px}
+/* Copy a winning test shipped onto this page. Amber, not the selection chip's neutral: this is not a mode the
    seller turned on, it is a difference between what they are reading and what shoppers are served. */
 .gemboss-pageedit-standing{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 16px;background:rgba(176,125,24,.09);border-bottom:1px solid rgba(176,125,24,.28);font-size:13px;line-height:1.5;color:#7a5710}
 .gemboss-pageedit-standing code{font-size:12px;background:rgba(176,125,24,.14);border-radius:4px;padding:2px 4px}
@@ -771,7 +774,7 @@ body.ui-resizing .gemboss-editor-body .gemboss-pv { will-change: flex-basis; }
 .gemboss-layers-list{flex:1;min-height:0;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px}
 .gemboss-layer{display:flex;align-items:center;gap:4px;border:1px solid transparent;border-radius:8px;padding:0 4px 0 6px}
 .gemboss-layer:hover{background:var(--gemboss-hover,rgba(0,0,0,.04))}
-.gemboss-layer.is-sel{border-color:var(--gemboss-primary, #1b1c1e);background:rgba(86,97,245,.06)}
+.gemboss-layer.is-sel{border-color:var(--gemboss-primary, #1b1c1e);background:var(--gemboss-active-bg)}
 .gemboss-layer-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:transparent;border:0;cursor:pointer;text-align:left;padding:8px 4px}
 .gemboss-layer-type{font-size:13px;font-weight:600;color:var(--gemboss-text,#1b1c1e);text-transform:capitalize}
 .gemboss-layer-head{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:195px}
@@ -1043,11 +1046,11 @@ select.gemboss-ei-inp{appearance:none;background-image:linear-gradient(45deg,tra
 .gemboss-guest-signin { font-size: var(--gemboss-fs-body); font-weight: 600; color: var(--gemboss-text-muted); text-decoration: none; }
 .gemboss-guest-signin:hover { color: var(--gemboss-text); }
 .gemboss-guest-keep {
-  border: 0; border-radius: 999px; background: #5661f5; color: #fff; cursor: pointer;
+  border: 0; border-radius: 999px; background: var(--gemboss-primary); color: var(--gemboss-on-primary); cursor: pointer;
   font: inherit; font-size: var(--gemboss-fs-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
   padding: 8px 20px; white-space: nowrap;
 }
-.gemboss-guest-keep:hover { background: #3a44de; }
+.gemboss-guest-keep:hover { background: var(--gemboss-primary-dark); }
 @media (max-width: 720px) {
   .gemboss-guest-note { display: none; }
 }

package/src/gemboss-tokens.css

@@ -79,7 +79,7 @@
      and reading as "the font keeps shrinking". New rule: pick a step here, never a
      raw px. Floor is 12px (--fs-caption); 11px (--fs-micro) is reserved for bold
      micro-badges/count-pills ONLY — nothing below that. Body default is 14px, one
-     step up from Polaris bodyMd (13px; bodySm is 12) which the app had been leaning on for prose. The kit (ui.css) reads --ui-fs-body, 13px, because it sits beside Polaris components. */
+     step up from Polaris bodyMd (13px; bodySm is 12) which the app had been leaning on for prose. The kit (ui.css, kit-plain.css) reads --ui-fs-body, 13px, because it sits beside Polaris components; since 0.12.0 it reads none of body/h1-h3 here (README "Admin density"). */
   --gemboss-fs-micro: 11px;   /* bold count-pills / status chips only */
   --gemboss-fs-caption: 12px; /* metadata, timestamps, secondary labels */
   --gemboss-fs-body: 14px;    /* default body / reading text */