@gemboss/ui 0.21.0 → 0.25.0

package/src/dialog.tsx

@@ -9,12 +9,10 @@
  * sign-in and "Create a new post" open like this (Featurebase does both as popups: Chris 04/10/2026,
  * "signup login là bật ra popup đó nhanh và tiện hơn").
  *
- * `SearchDialog`: the Featurebase / admin command search. A topbar button (or ⌘K / Ctrl+K / "/")
- * opens it; what to show before typing comes from `initial`, results while typing from `search`
- * (debounced, the latest answer wins); ↑ ↓ move, Enter opens, Esc closes. Results are links, so a
- * page without JavaScript loses only the popup, never the search itself (`fallbackHref`).
+ * `SearchDialog` lives in search-dialog.tsx since 0.23.0: it brings portal.css (its own look), and a
+ * surface that only opens a Dialog should not download it.
  */
-import React, { useCallback, useEffect, useId, useRef, useState } from "react";
+import React, { useEffect, useId, useRef } from "react";
 import { Icon } from "./icons";
 
 const cx = (...p: Array<string | false | null | undefined>) => p.filter(Boolean).join(" ");
@@ -63,133 +61,3 @@ export function Dialog({ open, onClose, title, children, footer, wide = false, c
     </dialog>
   );
 }
-
-export type SearchItem = { href: string; title: string; meta?: React.ReactNode };
-export type SearchSection = { title: string; items: SearchItem[] };
-
-// One constant, not a default `= []`: a fresh array each render, read by an effect, re-ran it forever
-// ("Maximum update depth exceeded", review of 0.7.0 in Chromium).
-const NO_SECTIONS: SearchSection[] = [];
-
-export function SearchDialog({ search, initial = NO_SECTIONS, placeholder = "Search…", label = "Search", fallbackHref, shortcut = true, renderItem }: {
-  /** Results for a query. Called at most every 150 ms; an answer to an older query is dropped. */
-  search: (q: string) => Promise<SearchSection[]>;
-  /** What the popup shows before anything is typed (Featurebase: "Trending requests", "Latest updates"). */
-  initial?: SearchSection[];
-  placeholder?: string;
-  label?: string;
-  /** Where the topbar button goes without JavaScript (a search page), used as given. */
-  fallbackHref?: string;
-  /** ⌘K / Ctrl+K and "/" open it. */
-  shortcut?: boolean;
-  renderItem?: (item: SearchItem) => React.ReactNode;
-}) {
-  const [open, setOpen] = useState(false);
-  const [q, setQ] = useState("");
-  const [sections, setSections] = useState<SearchSection[]>(initial);
-  const [active, setActive] = useState(0);
-  const [busy, setBusy] = useState(false);
-  const ref = useRef<HTMLDialogElement>(null);
-  const input = useRef<HTMLInputElement>(null);
-  const seq = useRef(0);
-  const listId = useId();
-  const flat = sections.flatMap((s) => s.items);
-  // The latest `search` and `initial`, read when needed: a consumer's inline arrow or array (a new one
-  // each render) must not restart the debounce or the effect.
-  const searchRef = useRef(search);
-  const initialRef = useRef(initial);
-  searchRef.current = search;
-  initialRef.current = initial;
-
-  const show = useCallback(() => {
-    const d = ref.current;
-    if (d && !d.open) { d.showModal(); setOpen(true); requestAnimationFrame(() => input.current?.focus()); }
-  }, []);
-  useEffect(() => {
-    if (!shortcut) return undefined;
-    const onKey = (e: KeyboardEvent) => {
-      const t = e.target as HTMLElement | null;
-      const typing = !!t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName));
-      // A handler that already took the key (the admin's own ⌘K palette) keeps it.
-      if (e.defaultPrevented) return;
-      if ((e.key === "k" && (e.metaKey || e.ctrlKey)) || (e.key === "/" && !typing)) { e.preventDefault(); show(); }
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [shortcut, show]);
-  useEffect(() => {
-    if (!open) return undefined;
-    const query = q.trim();
-    // Every change takes a new number: an answer still on its way for an older query is dropped,
-    // including when the box was just cleared (it used to land under an empty box).
-    const mine = ++seq.current;
-    if (!query) { setSections(initialRef.current); setActive(0); setBusy(false); return undefined; }
-    setBusy(true);
-    const t = setTimeout(async () => {
-      try {
-        const res = await searchRef.current(query);
-        if (mine === seq.current) { setSections(res); setActive(0); }
-      } catch {
-        if (mine === seq.current) setSections(NO_SECTIONS);
-      } finally {
-        if (mine === seq.current) setBusy(false);
-      }
-    }, 150);
-    return () => { clearTimeout(t); if (mine === seq.current) setBusy(false); };
-  }, [q, open]);
-  // Before anything is typed, show the latest suggestions the page passed.
-  useEffect(() => { if (open && !q.trim()) setSections(initial); }, [initial, open, q]);
-  // The highlighted result stays in view as the arrows move it.
-  useEffect(() => {
-    if (!open) return;
-    document.getElementById(`${listId}-${active}`)?.scrollIntoView({ block: "nearest" });
-  }, [active, open, listId]);
-
-  const go = (item: SearchItem | undefined) => { if (item) window.location.assign(item.href); };
-  let n = -1;
-  return (
-    <>
-      <a className="gb-search-trigger" href={fallbackHref ?? "#"} aria-label={label} aria-haspopup="dialog"
-        onClick={(e) => { e.preventDefault(); show(); }}>
-        <Icon name="search" size={18} />
-      </a>
-      <dialog ref={ref} className="ui-modal gb-search" aria-label={label}
-        onClose={() => { setOpen(false); setQ(""); }}
-        onClick={(e) => { if (e.target === e.currentTarget) e.currentTarget.close(); }}>
-        <div className="gb-search-box">
-          <Icon name="search" size={18} className="gb-search-icon" />
-          <input ref={input} className="gb-search-input" type="search" placeholder={placeholder} aria-label={label}
-            value={q} onChange={(e) => setQ(e.target.value)} role="combobox" aria-expanded="true" aria-controls={listId}
-            aria-activedescendant={flat[active] ? `${listId}-${active}` : undefined} autoComplete="off"
-            onKeyDown={(e) => {
-              if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => Math.min(a + 1, flat.length - 1)); }
-              else if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => Math.max(a - 1, 0)); }
-              // Enter that confirms an IME composition (Vietnamese, Chinese) is not "open".
-              else if (e.key === "Enter" && !e.nativeEvent.isComposing && e.keyCode !== 229) { e.preventDefault(); go(flat[active]); }
-            }} />
-        </div>
-        <p className="gb-search-empty" aria-live="polite">
-          {sections.every((s) => !s.items.length) && q.trim() ? (busy ? "Searching…" : "Nothing matches.") : ""}
-        </p>
-        <div className="gb-search-results" id={listId} role="listbox" aria-busy={busy}>
-          {sections.filter((s) => s.items.length).map((s) => (
-            <div key={s.title} className="gb-search-section" role="group" aria-label={s.title}>
-              <div className="gb-search-section-title">{s.title}</div>
-              {s.items.map((it) => {
-                n += 1;
-                const i = n;
-                return (
-                  <a key={`${s.title}-${it.href}`} id={`${listId}-${i}`} href={it.href} role="option" aria-selected={i === active}
-                    className={cx("gb-search-item", i === active && "is-active")} onMouseMove={() => setActive(i)}>
-                    {renderItem ? renderItem(it) : (<><span className="gb-search-item-title">{it.title}</span>{it.meta ? <span className="gb-search-item-meta">{it.meta}</span> : null}</>)}
-                  </a>
-                );
-              })}
-            </div>
-          ))}
-        </div>
-        <div className="gb-search-foot" aria-hidden="true"><span>↵ open</span><span>↑↓ move</span><span>esc</span></div>
-      </dialog>
-    </>
-  );
-}

package/src/editor/controls.tsx

@@ -10,6 +10,7 @@
 //   · the slider commits on every change (its number);
 //   · 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 type React from "react";
 import { cssUrl } from "./css-url";

package/src/editor/frame.tsx

@@ -3,6 +3,7 @@
 // by the plugin editor and the studio canvas, so together they ride in the chunk the toggle already had in the admin.
 // Split into one module per piece, the admin build grew a lazy chunk to place them (its runtime +52 bytes, every
 // screen's first load +20 B brotli). Measured 06/10/2026.
+import "../editor.css"; // its own stylesheet travels with it (0.23.0): a surface that never renders it never loads it
 import type React from "react";
 
 /** Which half a phone shows (≤760px shows one at a time; wider shows both). Values are the CSS's `data-mobile-pane`. */

package/src/editor/index.ts

@@ -41,3 +41,12 @@ export {
 } from "./controls";
 export { swatchState, type SwatchState } from "./swatch";
 export { cssUrl } from "./css-url";
+// Step 4 (0.22.0): the page's layers and the drawer (`layers`, stateless; the page editor draws them), a list whose rows
+// reorder (`sortable`, "use client": a drag holds state; no admin screen uses it), and the element outline (`tree`, the
+// inspector's). Same rule: grouped by who draws what.
+export {
+  EditorDrawer, LayerList, layerName,
+  type EditorDrawerProps, type LayerItem, type LayerListProps,
+} from "./layers";
+export { SortableLayerList, type SortableLayerListProps } from "./sortable";
+export { LayerTree, type LayerTreeProps, type LayerTreeRow } from "./tree";

package/src/editor/layers.tsx

@@ -0,0 +1,136 @@
+// The editor's LAYERS and its DRAWER (step 4 of 5 of the editor kit): the page's sections as rows (LayerList) and the
+// panel that slides over the editor from a side (EditorDrawer). Moved from the admin's page editor (Layers, Page settings,
+// Edit content) with the markup and the classes they had, so those draw and behave exactly as before; the look is
+// editor.css (`.gemboss-layer*`, `.gemboss-settings*`, `.gemboss-picker-*`). Stateless, so no "use client".
+//
+// Reordering by drag and Alt+↑ / Alt+↓ is SortableLayerList (sortable.tsx, its own module): a list that does not reorder
+// (the admin's) does not carry that code. A section's elements as an indented outline (LayerTree) is tree.tsx.
+import "../editor.css"; // its own stylesheet travels with it (0.23.0): a surface that never renders it never loads it
+import type React from "react";
+
+// ── LayerList ───────────────────────────────────────────────────────────────────────────────────────────────────────
+
+export interface LayerItem {
+  id: string;
+  /** The row's first line (`.gemboss-layer-type`, 13px / 600, capitalised by CSS). */
+  title: React.ReactNode;
+  /** The second line, muted and cut with an ellipsis (`.gemboss-layer-head`). Drawn only when truthy. */
+  subtitle?: React.ReactNode;
+  /** The row's name for a screen reader where the title is not plain text ("Hide <name>", "Move <name>"). */
+  name?: string;
+  /** Nesting: each level indents the row by `indent` px. 0 / omitted draws no style. */
+  depth?: number;
+  /** Hidden on the page: the row is drawn faded (`.is-hidden`) and its eye button is pressed. */
+  hidden?: boolean;
+}
+
+export interface LayerListProps<T extends LayerItem = LayerItem> {
+  items: ReadonlyArray<T>;
+  /** The selected row (`.is-sel`, and its button says `aria-current`). */
+  selectedId?: string | null;
+  /** A click on a row's main button. */
+  onSelect?: (item: T, index: number) => void;
+  /** The row's own buttons, after the main one (`.gemboss-layer-acts`, 26px each). */
+  actions?: (item: T, index: number) => React.ReactNode;
+  /** Shown instead of the rows when there are none (`.gemboss-picker-empty`). */
+  empty?: React.ReactNode;
+  /** Hide / show, on when given: an eye button first among the row's actions (`aria-pressed` = hidden). */
+  onToggleHidden?: (item: T, hidden: boolean) => void;
+  /** Px per `depth` level. Default 14 (the element outline's step). */
+  indent?: number;
+  /** Extra props for a row's element and its main button, and what goes before the button: how SortableLayerList adds
+   *  dragging and keys without a second copy of the markup. */
+  rowProps?: (item: T, index: number) => React.HTMLAttributes<HTMLDivElement> & { "data-drop"?: string; className?: string };
+  mainProps?: (item: T, index: number) => React.ButtonHTMLAttributes<HTMLButtonElement>;
+  lead?: (item: T, index: number) => React.ReactNode;
+  /** The list element's ref. */
+  listRef?: React.Ref<HTMLDivElement>;
+}
+
+export const layerName = (it: LayerItem) => it.name ?? (typeof it.title === "string" ? it.title : it.id);
+const EYE = "M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z";
+
+/** `.gemboss-layers-list` › one `.gemboss-layer` per item: the main button (title · subtitle), then the actions. */
+export function LayerList<T extends LayerItem>({ items, selectedId, onSelect, actions, empty, onToggleHidden, indent = 14, rowProps, mainProps, lead, listRef }: LayerListProps<T>) {
+  return (
+    <div className="gemboss-layers-list" ref={listRef}>
+      {items.length === 0 ? (empty != null ? <div className="gemboss-picker-empty">{empty}</div> : null) : items.map((it, i) => {
+        const { className: extra, ...row } = rowProps?.(it, i) ?? {};
+        const cls = `gemboss-layer${selectedId === it.id ? " is-sel" : ""}${it.hidden ? " is-hidden" : ""}${extra ? ` ${extra}` : ""}`;
+        // The eye's name stays "Hide <name>" whichever way it is set: a toggle says its state with aria-pressed, and its
+        // tooltip says the same thing.
+        const eyeName = `Hide ${layerName(it)}`;
+        return (
+          <div key={it.id} className={cls} data-id={it.id} style={it.depth ? { paddingLeft: 6 + it.depth * indent } : undefined} {...row}>
+            {lead?.(it, i)}
+            <button type="button" className="gemboss-layer-main" aria-current={selectedId === it.id ? "true" : undefined}
+              onClick={onSelect ? () => onSelect(it, i) : undefined} {...mainProps?.(it, i)}>
+              <span className="gemboss-layer-type">{it.title}</span>
+              {it.subtitle ? <span className="gemboss-layer-head">{it.subtitle}</span> : null}
+            </button>
+            {actions || onToggleHidden ? (
+              <div className="gemboss-layer-acts">
+                {onToggleHidden ? (
+                  <button type="button" className="gemboss-layer-eye" aria-pressed={!!it.hidden} aria-label={eyeName}
+                    title={eyeName} onClick={() => onToggleHidden(it, !it.hidden)}>
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" aria-hidden>
+                      <path d={EYE} /><circle cx="8" cy="8" r="2" />{it.hidden ? <path d="M2.5 13.5 13.5 2.5" data-gb-slash="" /> : null}
+                    </svg>
+                  </button>
+                ) : null}
+                {actions?.(it, i)}
+              </div>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ── EditorDrawer ────────────────────────────────────────────────────────────────────────────────────────────────────
+
+export interface EditorDrawerProps {
+  /**
+   * `right` (default): `aside.gemboss-settings`, min(380px, 100%) wide (Page settings, Edit content). `left`:
+   * `aside.gemboss-layers`, 300px (Layers). Both full height, over a backdrop that closes them.
+   */
+  side?: "left" | "right";
+  /** The head's text (`.gemboss-picker-head`, 15px / 600) beside ✕. */
+  title: React.ReactNode;
+  onClose: () => void;
+  /** ✕'s accessible name. Default "Close". */
+  closeLabel?: string;
+  /** The drawer's accessible name. */
+  label?: string;
+  /** Added to the aside's class (the admin's `gemboss-page-section-content`). */
+  className?: string;
+  /** Above the head (the admin's "a newer revision exists" notice). */
+  before?: React.ReactNode;
+  /** The drawer's buttons, right-aligned at the bottom (`.gemboss-settings-foot`). */
+  footer?: React.ReactNode;
+  /** The body: a `.gemboss-settings-body` of `.gemboss-settings-field`s, a LayerList, … */
+  children?: React.ReactNode;
+}
+
+/**
+ * The panel that slides over the editor from a side, with a backdrop; ✕ and a click on the backdrop call `onClose`.
+ * Mount it while open (the caller holds whether it is): nothing is drawn while closed.
+ */
+export function EditorDrawer({ side = "right", title, onClose, closeLabel = "Close", label, className, before, footer, children }: EditorDrawerProps) {
+  const base = side === "left" ? "gemboss-layers" : "gemboss-settings";
+  return (
+    <>
+      <div className="gemboss-picker-backdrop" onClick={onClose} />
+      <aside className={className ? `${base} ${className}` : base} aria-label={label}>
+        {before}
+        <div className="gemboss-picker-head">
+          <span>{title}</span>
+          <button type="button" onClick={onClose} aria-label={closeLabel}>✕</button>
+        </div>
+        {children}
+        {footer ? <div className="gemboss-settings-foot">{footer}</div> : null}
+      </aside>
+    </>
+  );
+}

package/src/editor/panel.tsx

@@ -4,6 +4,7 @@
 // the look is editor.css (`.gemboss-ec-tabs`, `.gemboss-ei-*`), unchanged by the move. Stateless except
 // 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 type React from "react";
 

package/src/editor/panes.tsx

@@ -1,3 +1,4 @@
+import "../editor.css"; // its own stylesheet travels with it (0.23.0): a surface that never renders it never loads it
 import type { EditorPane } from "./frame";
 
 // The two pane controls only an editor with a collapsible left column and a phone pane switch draws (the admin's theme
@@ -5,14 +6,14 @@ import type { EditorPane } from "./frame";
 
 /** The panel icon that shows or hides the left column (EditorTopbar's `chatToggle`): the left third is filled while the
  *  column is open, hollow and pressed when it is collapsed. */
-export function EditorChatToggle({ collapsed, onToggle }: { collapsed?: boolean; onToggle: () => void }) {
+export function EditorChatToggle({ collapsed, onToggle, name = "chat panel" }: { collapsed?: boolean; onToggle: () => void; /** What the column is (0.24.0): "Hide <name>". */ name?: string }) {
   return (
     <button
       className={`gemboss-editor-chat-toggle${collapsed ? " collapsed" : ""}`}
       onClick={onToggle}
       aria-pressed={collapsed}
-      title={collapsed ? "Show chat panel" : "Hide chat — full-width preview"}
-      aria-label={collapsed ? "Show chat panel" : "Hide chat panel"}
+      title={collapsed ? `Show ${name}` : name === "chat panel" ? "Hide chat — full-width preview" : `Hide ${name}`}
+      aria-label={collapsed ? `Show ${name}` : `Hide ${name}`}
     >
       {/* A real SVG panel icon (geometrically centred): the ▭/◫ box glyphs' ink sits high in the em box. */}
       <svg viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" aria-hidden="true">

package/src/editor/sortable.tsx

@@ -0,0 +1,79 @@
+"use client";
+// SortableLayerList (step 4 of 5 of the editor kit): LayerList whose rows reorder. Its own module, so a list that does
+// not reorder (the admin's Layers, which move with ↑ / ↓ buttons) does not carry this code.
+//
+//   · drag a row: a grip before it, the dragged row faded (`.is-dragging`), a 2px line where it will land (`data-drop`);
+//   · Alt+↑ / Alt+↓ on a row's button move it one place, and the focus stays on it once the move has landed (also when
+//     `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`.
+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";
+
+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);
+  // 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.
+  const refocus = useRef<{ id: string; from: number } | null>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const want = refocus.current;
+    if (!want) return;
+    const at = items.findIndex((it) => it.id === want.id);
+    if (at === want.from) return; // not landed yet (onMove may answer later)
+    refocus.current = null;
+    if (at < 0) return;
+    const row = [...(listRef.current?.children ?? [])].find((r) => (r as HTMLElement).dataset.id === want.id);
+    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,
+        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),
+      })}
+      mainProps={(it, i) => ({
+        "aria-keyshortcuts": "Alt+ArrowUp Alt+ArrowDown",
+        onKeyDown: (e) => {
+          if (!e.altKey || (e.key !== "ArrowUp" && e.key !== "ArrowDown")) return;
+          const to = e.key === "ArrowUp" ? i - 1 : i + 1;
+          if (to < 0 || to >= items.length) return;
+          e.preventDefault();
+          refocus.current = { id: it.id, from: i };
+          onMove(it, to);
+        },
+      })} />
+  );
+}

package/src/editor/tree.tsx

@@ -0,0 +1,61 @@
+// LayerTree (step 4 of 5 of the editor kit): a section's elements as an indented outline, the element inspector's
+// Elements tab (moved from apps/admin ElementInspector.tsx with its markup and classes, `.gemboss-ei-tree` in
+// editor.css). Its own module: the inspector draws it, the page editor's Layers drawer (layers.tsx) does not. Stateless,
+// so no "use client".
+import "../editor.css"; // its own stylesheet travels with it (0.23.0): a surface that never renders it never loads it
+import type React from "react";
+
+// ── LayerTree ───────────────────────────────────────────────────────────────────────────────────────────────────────
+
+export interface LayerTreeRow {
+  id: string;
+  /** The row's name (13px / 600). */
+  label: React.ReactNode;
+  /** A muted aside after it, cut with an ellipsis (`small`: the element's id in the admin). */
+  detail?: React.ReactNode;
+  /** 0 for the root. Each level indents by `indent` px, after 6px. */
+  depth: number;
+  /** Its place among its siblings (0-based) and how many there are: `aria-posinset` / `aria-setsize`. */
+  index: number;
+  siblings: number;
+}
+
+export interface LayerTreeProps<T extends LayerTreeRow = LayerTreeRow> {
+  /** Flattened, in reading order. */
+  rows: ReadonlyArray<T>;
+  selectedId?: string | null;
+  /** A click on a row's name. Toggling (a second click clears the selection) is the caller's: the admin's does. */
+  onSelect?: (row: T) => void;
+  /** Icon buttons after the name (`.gemboss-ei-tacts`: shown on hover, on the selected row and on focus). */
+  actions?: (row: T) => React.ReactNode;
+  /** Under the row, full width (`flex-basis:100%`): the admin's "Add an element…" picker. */
+  below?: (row: T) => React.ReactNode;
+  /** The tree's accessible name. */
+  label?: string;
+  /** Px per level. Default 14. */
+  indent?: number;
+}
+
+/** `ul.gemboss-ei-tree[role=tree]` › `li.gemboss-ei-tnode[role=treeitem]` (level, position, selection said aloud). */
+export function LayerTree<T extends LayerTreeRow>({ rows, selectedId, onSelect, actions, below, label, indent = 14 }: LayerTreeProps<T>) {
+  return (
+    <ul className="gemboss-ei-tree" role="tree" aria-label={label}>
+      {rows.map((r) => {
+        const on = r.id === selectedId;
+        return (
+          // Flattened for layout (the indent is inline padding), so each row carries its own level and position or the
+          // outline announces as an empty tree.
+          <li key={r.id} role="treeitem" aria-level={r.depth + 1} aria-selected={on} aria-posinset={r.index + 1} aria-setsize={r.siblings}
+            className={`gemboss-ei-tnode${on ? " on" : ""}`} style={{ paddingLeft: 6 + r.depth * indent }} data-id={r.id}>
+            <button type="button" className="gemboss-ei-tname" aria-current={on ? "true" : undefined} onClick={onSelect ? () => onSelect(r) : undefined}>
+              {r.label}
+              {r.detail != null ? <small>{r.detail}</small> : null}
+            </button>
+            <span className="gemboss-ei-tacts">{actions?.(r)}</span>
+            {below?.(r)}
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/src/editor-layers-plain.js

@@ -0,0 +1 @@
+(function(v){"use strict";var m=v.gembossUI;if(!m){v.console&&v.console.error("@gemboss/ui editor-layers-plain.js: load kit-plain.js first (it defines gembossUI)");return}if(m.initEditorLayers)return;var d=function(r,s,t){r.dispatchEvent(new CustomEvent(s,{bubbles:!0,detail:t}))},u=function(r){return Array.prototype.filter.call(r.children,function(s){return s.classList.contains("gemboss-layer")})},f=function(r){return r.getAttribute("data-id")};function A(r){var s=r.parentNode;u(s).forEach(function(t){var o=t===r,e=t.querySelector(".gemboss-layer-main");t.classList.toggle("is-sel",o),e&&(o?e.setAttribute("aria-current","true"):e.removeAttribute("aria-current"))}),d(r,"gemboss:editor-layer",{id:f(r),index:u(s).indexOf(r)})}function L(r,s){var t=s.getAttribute("aria-pressed")!=="true";s.setAttribute("aria-pressed",String(t)),r.classList.toggle("is-hidden",t);var o=s.querySelector("svg"),e=o&&o.querySelector("[data-gb-slash]");o&&t&&!e&&(e=document.createElementNS("http://www.w3.org/2000/svg","path"),e.setAttribute("d","M2.5 13.5 13.5 2.5"),e.setAttribute("data-gb-slash",""),o.appendChild(e)),e&&!t&&e.parentNode.removeChild(e),d(r,"gemboss:editor-layer-hidden",{id:f(r),hidden:t})}function y(r,s,t){var o=r.parentNode,e=u(o),a=e.indexOf(r);if(!(s===a||s<0||s>=e.length)){var i=e.filter(function(l){return l!==r});if(o.insertBefore(r,i[s]||null),t){var n=r.querySelector(".gemboss-layer-main");n&&n.focus()}d(r,"gemboss:editor-layer-move",{id:f(r),from:a,to:s})}}function w(r){var s=r.closest(".gemboss-ei-tree"),t=r.getAttribute("aria-selected")==="true";Array.prototype.forEach.call(s.querySelectorAll(".gemboss-ei-tnode"),function(o){var e=o===r&&!t,a=o.querySelector(".gemboss-ei-tname");o.setAttribute("aria-selected",String(e)),o.classList.toggle("on",e),a&&(e?a.setAttribute("aria-current","true"):a.removeAttribute("aria-current"))}),d(r,"gemboss:editor-tree",{id:t?null:r.getAttribute("data-id")})}function h(r){var s=r.previousElementSibling;return{aside:r,backdrop:s&&s.classList.contains("gemboss-picker-backdrop")?s:null}}function g(r,s){var t=h(r);!r.hidden!==s&&(s&&Array.prototype.forEach.call(document.querySelectorAll(".gemboss-layers:not([hidden]), .gemboss-settings:not([hidden])"),function(o){o!==r&&h(o).backdrop&&g(o,!1)}),r.hidden=!s,t.backdrop&&(t.backdrop.hidden=!s),d(r,"gemboss:editor-drawer",{id:r.id||null,open:s}))}var b=typeof WeakSet=="function"?new WeakSet:null,p=function(r){return r.__gbList?!1:(r.__gbList=!0,!0)};function E(r){var s=r||document;if(b?b.has(s):s._gbList)return 0;b?b.add(s):s._gbList=!0;var t=null;s.addEventListener("click",function(e){var a=e.target,i;if(!(!a.closest||!p(e))){if(i=a.closest("[data-gb-drawer]")){var n=document.getElementById(i.getAttribute("data-gb-drawer"));n&&g(n,!0);return}if(i=a.closest(".gemboss-picker-head > button, [data-gb-drawer-close]")){var l=i.closest(".gemboss-layers, .gemboss-settings");l&&g(l,!1);return}if(i=a.closest(".gemboss-picker-backdrop")){var c=i.nextElementSibling;c&&c.matches(".gemboss-layers, .gemboss-settings")&&g(c,!1);return}if((i=a.closest(".gemboss-layer-eye"))&&!i.disabled)return L(i.closest(".gemboss-layer"),i);if(i=a.closest(".gemboss-layer-main"))return A(i.closest(".gemboss-layer"));if(i=a.closest(".gemboss-ei-tname"))return w(i.closest(".gemboss-ei-tnode"))}}),s.addEventListener("keydown",function(e){var a=e.target;if(!(!a.closest||!p(e))&&!(!e.altKey||e.key!=="ArrowUp"&&e.key!=="ArrowDown")){var i=a.classList&&a.classList.contains("gemboss-layer-main")&&a.closest('.gemboss-layer[draggable="true"]');i&&(e.preventDefault(),y(i,u(i.parentNode).indexOf(i)+(e.key==="ArrowUp"?-1:1),!0))}}),s.addEventListener("dragstart",function(e){var a=e.target.closest&&e.target.closest('.gemboss-layer[draggable="true"]');!a||!p(e)||(t={row:a,over:null,place:"before"},a.classList.add("is-dragging"),e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",f(a)||"")))}),s.addEventListener("dragover",function(e){if(t){var a=e.target.closest&&e.target.closest(".gemboss-layer");if(!a||a.parentNode!==t.row.parentNode){t.over&&(t.over.removeAttribute("data-drop"),t.over=null);return}e.preventDefault();var i=a.getBoundingClientRect(),n=e.clientY<i.top+i.height/2?"before":"after";t.over&&t.over!==a&&t.over.removeAttribute("data-drop"),t.over=a,t.place=n,a===t.row?a.removeAttribute("data-drop"):a.setAttribute("data-drop",n)}}),s.addEventListener("drop",function(e){if(t){var a=e.target.closest&&e.target.closest(".gemboss-layer");if(!t.over||!a||a.parentNode!==t.row.parentNode){o();return}e.preventDefault();var i=u(t.row.parentNode),n=i.indexOf(t.row),l=i.indexOf(t.over),c=t.place==="before"?l>n?l-1:l:l>=n?l:l+1,k=t.row;o(),y(k,c,!1)}});var o=function(){t&&(t.row.classList.remove("is-dragging"),t.over&&t.over.removeAttribute("data-drop"),t=null)};return s.addEventListener("dragend",o),1}m.initEditorLayers=E})(typeof globalThis<"u"?globalThis:this);