@gemboss/ui 0.21.0 → 0.30.2

package/README.md

@@ -11,7 +11,10 @@ npm install @gemboss/ui
 ```
 
 ```tsx
-import "@gemboss/ui/gemboss-ui.css";
+// The core, once, in the root layout, FIRST and in this order (0.23.0; "Load only what you use" below):
+import "@gemboss/ui/core.css";
+import "@gemboss/ui/components.css";
+import "@gemboss/ui/shell.css";
 import { AppShell, RailItem, RailGroup, RailHeading, BrandLockup } from "@gemboss/ui";
 
 <AppShell
@@ -40,6 +43,91 @@ Surfaces with no React (gemcare, gempress) use the CSS alone and write the same
 `nav.icon-nav > .gnav-scroll > .gnav-group > a.gnav-item > span.gnav-ico + span.gnav-label`.
 `packages/ui/src/shell.tsx` is the reference.
 
+## Load only what you use: the core and the entries (0.23.0)
+
+Every surface used to load `gemboss-ui.css` whole and use 14–21% of it (measured 06/10/2026 on twelve surfaces). Since
+0.23.0 the CSS comes in parts (`packages/ui/scripts/parts.mjs` is the list): a CORE every surface loads once, and ENTRIES that
+come with the component that draws them. A React component imports its own entry (`auth.tsx` imports `auth.css`), so
+a Next or Vite surface downloads an entry only on the routes that render it, and a component it never imports takes
+its CSS out of the build with it (`sideEffects`). gzip of the minified file, as published:
+
+| Part | Import (Node / bundler) | File in the tarball | What | gzip | Who loads it |
+|---|---|---|---|---:|---|
+| core | `@gemboss/ui/core.css` | `parts/core.css` | the box-sizing reset + the tokens | 1.0 KB | every surface, first |
+| components | `@gemboss/ui/components.css` | `parts/components.css` | the kit (`ui.css`), the field look, the plain-HTML primitives (`kit-plain.css`: menu, chips, report pieces, popup body) | 8.2 KB | every surface, second |
+| shell | `@gemboss/ui/shell.css` | `parts/shell.css` | rail, topbar, main, mobile drawer, the thread rail, topbar slots, base text, page widths (`app-shell.css`) | 5.5 KB | every surface, third |
+| auth | `@gemboss/ui/auth.css` | `packages/ui/src/auth.css` | the sign-in screen (+ the grid backdrop, 0.30.0) | 2.8 KB | `AuthLayout` & co. import it |
+| assistant | `@gemboss/ui/assistant.css` | `packages/ui/src/assistant.css` | the dock and the launcher | 2.2 KB | `AssistantHost`, the launcher import it |
+| portal | `@gemboss/ui/portal.css` | `packages/ui/src/portal.css` | `TopbarNav`, `SearchDialog`, `Avatar`, `Leaderboard`, `Podium`, the `ThemeToggle` button | 2.1 KB | those components import it |
+| theme-dark | `@gemboss/ui/theme-dark.css` | `packages/ui/src/theme-dark.css` | the dark palette | 0.6 KB | `ThemeToggle` and `themeScript` (`theme-script.ts`, without portal.css) import it |
+| collections | `@gemboss/ui/collections.css` | `packages/ui/src/collections.css` | tables, lists, grids, boards | 4.6 KB | `IndexTable`, `ResourceList`, `Board`… import it |
+| editor | `@gemboss/ui/editor.css` | `packages/ui/src/editor.css` | the editors | 7.9 KB | the `@gemboss/ui/editor` components import it |
+| reactions | `@gemboss/ui/reactions.css` | `packages/ui/src/reactions.css` | the emoji reactions and their picker | 0.8 KB | `Reactions` / `ReactionPicker` import it |
+| assistant-engine | `@gemboss/ui/assistant-engine.css` | `packages/ui/src/assistant-engine.css` | the engine picker (chip + Engine/Setup/Status popup) and the bridge notice | 1.9 KB | `EnginePicker` / `EnginePanel` / `BridgeNotice` import it |
+| chat | `@gemboss/ui/chat.css` + `chat-composer.css` | `packages/ui/src/chat.css`, `packages/ui/src/chat-composer.css` | the chat body, the composer | 3.0 + 0.9 KB | the chat components (0.29.0); a page writing the markup links them |
+| assistant-chat | `@gemboss/ui/assistant-chat.css` | `packages/ui/src/assistant-chat.css` | the chat pieces the package draws (0.29.0): column, starters that wrap, meta, errors, notes, paperclip | 0.9 KB | `AssistantChat` and its pieces import it |
+| minichart | `@gemboss/ui/minichart.css` | `packages/ui/src/minichart.css` | `Sparkline`, `ShareBar` (0.30.0) | 0.5 KB | those components import it |
+| setup-guide | `@gemboss/ui/setup-guide.css` | `packages/ui/src/setup-guide.css` | `SetupGuide` (0.30.0) | 0.9 KB | `SetupGuide` imports it |
+| bundle | `@gemboss/ui/gemboss-ui.css` | `gemboss-ui.css` | core + components + shell + auth + assistant + chat + portal + theme-dark | 21.9 KB | compatibility only (see CHANGELOG 0.23.0) |
+
+The core alone is 14.7 KB against 21.7 for the bundle (each part opens with a short header naming the gemboss commit, kept through minify, so a surface serving the parts can still say which commit its CSS is); a list page adds collections (4.6), a sign-in page auth (2.6).
+
+**Next.js / Vite.** The core's three imports go at the top of the root layout, above any component import, in the
+order above. Entries need nothing: the components bring them. A page that writes chat markup itself imports
+`@gemboss/ui/chat.css`. Drop `gemboss-ui.css` IN THE SAME BUMP: kept beside the parts, the entries a component brings
+load a second time, after your own CSS, and a second copy of a rule you override wins again.
+
+```tsx
+// app/layout.tsx
+import "@gemboss/ui/core.css";
+import "@gemboss/ui/components.css";
+import "@gemboss/ui/shell.css";
+import "./globals.css";            // your own CSS after the core
+```
+
+Add `"@gemboss/ui"` to `experimental.optimizePackageImports` in `next.config` (the admin does, 0.23.0): a SERVER
+component that imports from the index otherwise collects the CSS of every module the index re-exports (the admin's
+`/login`, which imports `AuthHelp` in its server page, picked up portal.css and collections.css under webpack until it did).
+
+Which bundler drops what (measured 06/10/2026): Next 16 (Turbopack) leaves out the entry of a component a route does
+not render. content-radar on 0.23.0 with the core: `/v2` 38.5 → 32.3 KB gzip of CSS, `/login` 31.2 → 25.4 (auth.css
+only there, portal.css nowhere). esbuild keeps the CSS of every module the index reaches even when it drops their JS, so
+through `@gemboss/ui` it ships every entry the index re-exports; and esbuild with no CSS loader now stops at a
+component's `import "./x.css"`: give it `loader: { ".css": "empty" }` (you link the CSS yourself, as GemFactory's
+gbui.mjs and this package's tests do) or `"css"`.
+
+**Plain HTML** (a server that serves the files out of `node_modules`): link the core, then only the entries the page
+draws.
+
+```html
+<link rel="stylesheet" href="/ui/core.css">        <!-- require.resolve("@gemboss/ui/core.css") -->
+<link rel="stylesheet" href="/ui/components.css">  <!-- require.resolve("@gemboss/ui/components.css") -->
+<link rel="stylesheet" href="/ui/shell.css">       <!-- require.resolve("@gemboss/ui/shell.css") -->
+<link rel="stylesheet" href="/ui/auth.css">        <!-- the sign-in page only -->
+<link rel="stylesheet" href="/ui/collections.css"> <!-- list pages only -->
+```
+
+**Order.** The core loads FIRST, and its three parts in that order: the top lines of the root layout, or the first three
+`<link>`s. `shell.css` restyles the field look at phone width, and entries restyle the kit with BEM modifiers at the
+kit's own weight (`.ui-empty--no-match` after `.ui-empty`): both are written to follow what they modify, which keeps
+every rule at the weight your own CSS can override. After the core, the entries may land in any order:
+`packages/ui/scripts/cascade-check.mjs` loads the catalog with the entries (collections.css and editor.css included) after the core,
+in order and reversed, and holds every element's computed style to the bundle's at 1280 and 390 (`parts-cascade.test.ts`,
+CI; negative control: two entries that only agree by order). An entry loaded BEFORE the core is not supported: measured,
+`.ui-empty--no-match` loses its 32px padding to `.ui-empty`. Two kit-plain.css rules that overrode shell.css by coming
+after it (the menu row's flex, the thread rail's 44px buttons at phone width) moved to the end of app-shell.css, same
+weight, so they still follow it.
+
+**A new component** gets its own entry: a file in `src/`, listed in `ENTRIES` in `packages/ui/scripts/parts.mjs`, exported,
+imported by the component that draws it, with a ceiling in `weight-budget.json`. It never goes into the core or into
+`gemboss-ui.css`: `packages/ui/scripts/parts-gate.mjs` (CI) holds both frozen, fails on a stylesheet nobody classified, and on a
+component that draws an entry's class without importing it.
+
+**The admin** is unchanged: it has Polaris and its own order, so it imports the sources one by one
+(`gemboss-tokens.css`, `ui.css`, and `shell-source.css` from its `gemboss-shell.css`; `@gemboss/ui/shell.css` is the
+built part now). Its editor, assistant and sign-in modules already imported the same entry files the components now
+import, so nothing moves.
+
 ## Page width (0.8.1)
 
 Chris, 04/10/2026: the rail on the left, and on the right a content column with the same max width on every
@@ -111,6 +199,21 @@ then the mark, then the foot lines as the visible height shrinks, follows the OS
 tracks the on-screen keyboard. Re-theme it with tokens on `.gb-auth`, e.g. a light iris panel:
 `--gb-panel-bg`, `--gb-panel-ink`, `--gb-panel-muted`, `--gb-panel-eyebrow`, `--gb-panel-facet-o`.
 
+**The panel's ground: `backdrop` (0.30.0).** `"facet"` (default, unchanged): the mark's facet lines, oversized, at 5%, over
+iris washes on ink. `"grid"`: gemform's sign-in ground (Chris 08/10/2026: "cái background bên dưới logo cũng đẹp"), a 34px
+grid of iris hairlines at 10% that fades out from the panel's top-left corner, on an ink gradient. `"none"`: the ground
+alone. Re-tune the grid with `--gb-panel-grid-bg`, `--gb-panel-grid-line`, `--gb-panel-grid-size`, `--gb-panel-grid-fade`
+on `.gb-auth`. Like the panel itself it is drawn only at 900 wide AND 520 tall, and it is dark in both themes. A page
+that writes the markup puts `gb-auth-panel--grid` (or `--none`) beside `gb-auth-panel`. The grid brings its OWN ground
+(`--gb-panel-grid-bg`, an ink gradient), not `--gb-panel-bg`: a surface that re-themed the panel light (with dark
+`--gb-panel-ink`) sets `--gb-panel-grid-bg` too, or its words land dark on ink. The grid's rules live in auth.css
+(+0.2 KB gzip on the sign-in entry and the bundle): an entry of its own would need a second component to import it.
+
+```tsx
+<AuthLayout brand="gemform" tagline="GemBoss Ops · internal tool" backdrop="grid"
+            panel={{ eyebrow: "gemform · GemBoss Ops", heading: "Every Gem registration, in one place." }}>…</AuthLayout>
+```
+
 ## The assistant frame
 
 ```tsx
@@ -187,29 +290,225 @@ Its styles are the `gemboss-assistant-*` rules in `packages/ui/src/shell.css` (t
 @imports too), and they reach you through `gemboss-ui.css` together with `gemboss-field.css`. The admin passes a second tab ("Talk to a person", gemcare) through `secondTab` and its button
 through `fullActions`; a surface without those leaves them out.
 
-## The chat body
+## The engine picker (0.25.0): `EnginePicker`, `BridgeNotice`
 
-What an answer looks like, on any surface that puts a chat somewhere: `chat.css` (inside `gemboss-ui.css`;
-the admin `@import`s it, so it is the same file the admin's own chat is drawn with).
+Which engine answers the assistant, and the bridge on the user's machine, without spending the chat's space on it
+(Chris 07/10/2026: content-radar's assistant spent close to half its frame on an ENGINE / MODEL / EFFORT row, an
+"outdated bridge" block and the install command). The admin's shape: a chip in the composer row opens a popup.
+
+```tsx
+import { EnginePicker, BridgeNotice, useEnginePicker } from "@gemboss/ui/assistant"; // brings assistant-engine.css
+
+const picker = useEnginePicker();          // open + tab, shared with the notice
+<EnginePicker {...picker.props}
+  engines={[{ id: "claude", label: "Claude Code", note: "Your Claude subscription" }, { id: "server", label: "Server" }]}
+  engine={engine} onEngineChange={setEngine}
+  models={[{ id: "", label: "Default" }, { id: "opus", label: "Opus" }]} model={model} onModelChange={setModel}
+  efforts={[{ id: "", label: "Default" }, { id: "high", label: "High" }]} effort={effort} onEffortChange={setEffort}
+  bridge={{ state: "outdated", version: "8", latest: "10", autostart: true, detail: "Codex cannot see the radar tools." }}
+  setup={{ command: installCommand, pairingCode, note: "The panel reconnects in a few seconds." }}
+  statusActions={<button className="ui-btn" onClick={recheck}>Check again</button>} />
+
+// Only when a turn FAILED because of the bridge, one line in the stream:
+<BridgeNotice onOpenSetup={() => picker.openTab("setup")}>The bridge on your machine is not responding.</BridgeNotice>
+```
+
+- **Chip**: engine name, the model when it is not the default (`id: ""`), a dot for `bridge.state`: green `running`,
+  amber `outdated`, red `offline` / `unpaired`, hollow `checking`. Its accessible name says the state in words.
+- **Popup**: a non-modal dialog in the top layer (placed like the kit's menus, `placeFloating`), so the assistant's frame
+  cannot cut it. Tabs: Engine always; Setup when `setup` is given; Status when `bridge` is given. ←/→/Home/End move
+  between tabs; ↑/↓ move between engines (one Tab stop). Escape with focus in the panel, or a model / effort pick from
+  the buttons, closes it and gives focus back to the chip; an outside click closes. An engine pick and a pick from a
+  select (more than six models, or grouped ones) keep it open. Closing goes back to the Engine tab. 44px targets under a coarse pointer and at phone width.
+- **Not in the chat**: no standing warning, no command in the conversation. The amber dot on the chip and on the Setup
+  tab is the warning. `BridgeNotice` is for a turn that actually failed, once.
+- **For the admin (0.29.0)**: `EngineChoice.mark` ("claude", "codex") is shown on the chip in place of the name when the
+  composer is too narrow (`ChatComposer` density icon); `EngineChoice.models` on every engine + `onPick(engine, model)`
+  lists each engine with its own models at once, and one click picks both and closes (the admin's Polaris popup);
+  `problem` is a red line on the Engine tab ("Wait for the current answer to finish"); `disabled` disables the chip while
+  a switch is in flight.
+- The package knows no bridge: the surface polls its own, computes `outdated`, builds the command, and owns the
+  behaviour of every callback. `EnginePanel` is the same tabs without the chip (catalog, a settings page).
+
+Tests: `packages/ui/src/assistant/engine.test.tsx` (markup, styles, its own entry), `packages/ui/src/assistant/engine-browser.test.tsx`
+(Chromium: top layer through a clipping frame, keys, focus, copy, Open setup, 44px; with negative controls).
+
+**Escape (0.27.0).** An Escape that closes the panel is marked handled (`preventDefault`) also when focus is outside it
+(the composer): a surface whose own Escape hides the assistant and checks `defaultPrevented` leaves that key alone, and the
+next Escape is its own again. Before, the key went on unmarked and React re-renders between the picker's listener and the
+surface's, so each surface needed a window-capture marker to tell the two apart (gemlabs #922, gemfeedback #66). With
+0.27.0 the surface's `!e.defaultPrevented` is enough.
+
+### Plain HTML: `gembossUI.enginePicker()` (0.27.0)
+
+`engine-plain.js`, after `kit-plain.js`, for a page with no React (gemcare). The same markup and classes as the component
+(asserted: same class set for the same options), so `assistant-engine.css` draws it, and the same behaviour (top layer,
+tabs and keys, focus back to the chip, closing goes back to Engine, Copy, 44px under a coarse pointer, Escape marked):
+
+```html
+<link rel="stylesheet" href="/ui/assistant-engine.css">   <!-- require.resolve("@gemboss/ui/assistant-engine.css") -->
+<script src="/ui/kit-plain.js"></script><script src="/ui/engine-plain.js"></script>
+```
+
+```js
+const picker = gembossUI.enginePicker(document.querySelector(".gemboss-ec-toolbar-lead"), {
+  engines: [{ id: "server", label: "GemCare AI, paid" },
+            { id: "claude", label: "Claude Code", badge: "your plan", badgeTone: "success", note: "Your own subscription." }],
+  engine: "claude", onEngineChange: (id) => …,
+  models, model, onModelChange, efforts, effort, onEffortChange, effortDisabled, notes, modelControl,
+  bridge: { state: "outdated", version: "8", latest: "10", autostart: true, detail: "…" }, showBridgeDot: true,
+  setup: { command, pairingCode, steps, note }, statusActions: [checkAgainButton],
+  onOpenChange, onTabChange, locked, end, labels,
+});
+picker.update({ bridge: { state: "running" } });   // a poll: bridge / setup / labels merge one level; patched in place
+picker.openTab("setup"); picker.close(); picker.isOpen(); picker.destroy();
+log.append(gembossUI.bridgeNotice({ text: "The bridge on your machine is not responding.", onOpenSetup: () => picker.openTab("setup") }));
+```
+
+Strings are text; `steps`, `notes`, `detail`, `statusActions` and `modelControl` may also be a Node, an array of Nodes or a
+DocumentFragment: placed once and left where they are, so a field in them keeps focus, caret and events across redraws.
+A redraw PATCHES the panel in place (the same elements, only what changed, as React does): focus on a tab, an engine row
+or the model select stays, and a clamped panel keeps its scroll; behaviour is delegated from the panel (`data-*`).
+A pick from the engine list, the model or the effort updates the picker at once and calls back (no callback: that row is
+disabled, as in the component); `update()` is how the page says anything else changed. An Escape it does not own is left
+alone: an IME composition, or one in a modal opened from the panel; and focus entering such a modal closes the panel,
+which would otherwise sit above it in the top layer (the component does the same since 0.27.0). Tests:
+`packages/ui/src/engine-plain.test.ts` (Chromium: the component's class set on all three tabs, top layer through a
+clipping frame with its negative control, no popover API, keys, Escape, Copy, redraws that keep focus / scroll / a
+caller's field without a blur or change, merge rules, 44px).
+
+## The chat body (components since 0.29.0)
+
+Chris 08/10/2026: "đồng bộ hết giao diện của AI assistant… mọi service có panel này đồng bộ style + code dùng gemboss ui".
+Since 0.29.0 the package DRAWS the chat, not only its CSS: the surface hands in messages and actions and keeps its own
+streaming, bridge and sessions. Each piece is the better of the two surfaces that had it (inventory 08/10/2026,
+`Gems/_local/fleet/assistant-sync-2026-10/`):
+
+| Piece | Component | Taken from | Why that one |
+|---|---|---|---|
+| Composer | `ChatComposer` | admin (shape, density, one action slot) + partner-radar (a DIV, IME guard) | one bordered shell, send/stop the same 44px circle, grows to 84px, says less as it narrows (measured); a form broke the engine popup's own form; an IME's Enter must not send |
+| Markdown | `ChatMarkdown` | admin | tables, folded code, safe links, trusted pictures, no raw HTML; the radars fed an HTML string to `dangerouslySetInnerHTML` |
+| Steps | `ChatSteps` | admin, with partner-radar's words | rows print and stop (one heartbeat moves, not a spinner per row); a step says what it did in words + its target, a trace keeps the raw call folded |
+| Working | `ChatPending` | admin | ✳, a verb that changes, the seconds: the wait reads alive |
+| Starters | `ChatStarters` | partner-radar | they wrap (radius 12): a long question as a nowrap pill is cut in a 400px panel; a fill-in example |
+| Under an answer | `ChatMeta` | partner-radar | Copy · engine · seconds · cost |
+| Errors | `ChatError`, `BridgeNotice` | partner-radar | a fix the user can take (sentence, command, Copy, the original folded); a bridge failure is one line |
+| Engine | `EnginePicker` | partner-radar (Setup / Status tabs) + admin (mark, models per engine) | see "The engine picker" |
+| Frame, sessions | `AssistantHost`, `SessionRail` | (already the package's) | |
+
+```tsx
+import { AssistantChat, ChatAttach, EnginePicker, useChatTurns, useEnginePicker } from "@gemboss/ui/assistant"; // brings its CSS
+
+const turns = useChatTurns();                       // messages with ids; a turn is written BY ID
+const picker = useEnginePicker();
+async function send(text: string) {
+  turns.say(text);
+  const id = turns.start();
+  try {
+    for await (const ev of stream(text)) {
+      if (ev.type === "text") turns.write(id, ev.text);
+      if (ev.type === "tool") turns.step(id, { id: ev.id, label: TOOL_LABEL[ev.name], target: ev.target, state: ev.state });
+    }
+    turns.finish(id, { meta: ["Claude Code", "4.2s"] });
+  } catch (e) {
+    if (turns.fail(id, e).bridge) probeTheBridgeAgain();   // mark the bridge's own call with atBridge(e, status)
+  }
+}
+
+<AssistantHost title="Partner Assistant" …>
+  <AssistantWorkspaceLayout dock={presentation !== "full"}>
+    <AssistantChat messages={turns.messages} busy={busy} onSend={send} onStop={stop}
+      title="Partner Assistant"                       // shown at full screen only (the frame's header says it elsewhere)
+      intro={<p className="gemboss-md-p">Describe a meeting…</p>}
+      starters={[{ label: "Had dinner with Amit…", hint: "Example, click to fill in", fill: true }]}
+      moreStarters={SUGGESTIONS} moreStartersTitle="Or ask about partners in the radar:"
+      engine={<EnginePicker {...picker.props} … />} tools={<ChatAttach accept=".pdf,.docx" onFiles={upload} />}
+      onOpenSetup={() => picker.openTab("setup")} renderExtra={(m) => m.proposals?.map(…)} onNavigate={router.push} />
+  </AssistantWorkspaceLayout>
+</AssistantHost>
+```
+
+- **`messages`** (`ChatMessageData`): `role` user / assistant / note; `text` (markdown for an answer, `markdown: false` for
+  plain); `pending` (the heartbeat until text, then the cursor); `steps`; `error` + `fix: { text, command }`, or `bridge:
+  true` (one BridgeNotice line whose action calls `onOpenSetup`); `warn`; `stopped`; `meta` (after Copy); a note's `tone`
+  warn / down + `action` makes it a BridgeNotice ("This bridge is outdated · Open setup").
+- **Failed turns** (`bridgeTurnError`, used by `turns.fail`): only a failure AT the bridge is the bridge's: its call threw
+  (it is gone, the machine slept) or it answered 401 (this browser's pairing code is not its code). Its 400 / 503 and a
+  failure on the way to the server (a data token, an expired session) are the turn's. The surface marks the bridge's own
+  call (`throw atBridge(err, res.status)`); it never guesses from "this turn used the bridge" (content-radar #937).
+- **Failed turns, timeouts**: give the bridge's call its deadline with `AbortSignal.timeout(ms)` (a `TimeoutError`, the
+  bridge's); an `AbortController` you abort yourself throws an `AbortError`, which reads as the user's Stop.
+- **Following the end**: the log follows while the reader is at the end, and stops at their first move up (wheel, finger,
+  ArrowUp / PageUp / Home), not 24px later. A send, or another conversation shown, brings it back (`ChatThread pinKey`;
+  `AssistantChat` does both).
+- **Full screen**: `AssistantChat` measures how far the frame's floated buttons (`fullActions`, Back) reach into it and
+  gives its heading (or, without one, its log) that much room (`useFullChromeRoom`, for your own column); a `fullActions`
+  button with no icon keeps its words on a phone. Measured in the child because only the child knows where its column is
+  (at 1920 the 820px column does not reach the buttons at all).
+- **Loading**: the chat components import chat.css and chat-composer.css, which the old `gemboss-ui.css` bundle also
+  carries. A surface still linking the bundle gets them twice, the second copy after its own CSS: move to the parts
+  first (see "Load only what you use").
+- **Composer density**: `full` "Claude Code · Opus" → `compact` "Claude Code" → `icon` the engine's MARK (`EngineChoice.mark`)
+  → `tight`. An engine with no mark keeps its (cut) name.
+- **Markdown** (0.29.2): a bare `https://…` in the prose is a link (GitHub's reading: the sentence's trailing `. , : ; ! ?
+  _ ~ ' "` and an unpartnered `)` / `]` stay text; `<https://…>` too), through the same `linkTarget` as `[x](…)`, so only
+  http(s) with a host. It ends at a space, `*`, CJK text or full-width punctuation ("访问https://x.test。然后" links only
+  the URL), and one glued to a word (`foohttps://…`) is not a link. Inside `**bold**` a URL stays plain text. `####` to
+  `######` are headings at the lowest step (`h5.gemboss-md-h3`); a heading line with no words is dropped.
+- **Pictures on the page's own origin** (0.29.2): `imageHosts={[{ path: "/api/img/" }]}` (no `host`) draws
+  `![cover](/api/img/r2/a.png)` as written, a root-relative path checked after the browser's normalisation: `../`,
+  `%2e%2e`, `\` that leave `path`, an encoded `/` or `\`, a double encoding (`%25`), a `;` (`..;/`), `//host` and `/\host`
+  are refused (the alt stays as text). `path` must be a directory below the root (`/x/`, not `/` nor `/x`), or the entry
+  is ignored. No need to rewrite the answer into absolute URLs first.
+- **A form in the engine popup** (0.29.2): the send circle is `.gemboss-ec-toolbar > button[type=submit]`, the toolbar's
+  own child. Before, `.gemboss-ec-input button[type=submit]` also painted a submit button in the popup (it lives in the
+  leading slot in the DOM): a surface's Pair form can keep `type="submit"`.
+- A surface that needs its own arrangement uses the pieces directly (`ChatThread`, `ChatMessage`, `ChatBubble`,
+  `ChatMarkdown`, `ChatSteps`, `ChatPending`, `ChatStarters`, `ChatMeta`, `ChatError`, `ChatNote`, `ChatComposer`,
+  `ChatAttach`) inside `ChatLabelsProvider` for its words. Every word is in `CHAT_EN` (English chrome, Chris 03/10/2026).
+
+CSS: `chat.css` (the body; also inside `gemboss-ui.css`, and the admin `@import`s it), `chat-composer.css` (toolbar, density,
+Stop) and `assistant-chat.css` (0.29.0: the column, wrapping starters, the meta line, errors, notes, the paperclip, the
+room for full screen's buttons). The chat components import all three; a page that writes the markup itself links them.
 
 | Piece | Classes |
 |---|---|
-| Header | `.gemboss-ec-head` › `.gemboss-ec-title` + `.gemboss-ec-sub` |
-| Message list | `.gemboss-ec-scroll` (thin visible scrollbar) |
+| Column | `.gb-chat` › (`.gemboss-ec-head.gb-chat-head`) + `.gemboss-ec-scroll[role=log]` + `.gemboss-ec-input` |
 | Messages | `.gemboss-ec-msg.user` / `.gemboss-ec-msg.assistant` › `.gemboss-ec-bubble` |
 | Markdown inside a bubble | `.gemboss-md-p / -h -h1..3 / -list / -quote / -rule / -code / -codeblock / -table(wrap) / -img(link)`, links `.gemboss-ec-md-link` |
-| Steps the assistant took | `ul.gemboss-narr` › `li.gemboss-narr-row.ok|.running|.failed|.thinking|.trace|.steer` › `.gemboss-narr-dot` + `.gemboss-narr-text` (running: `.gemboss-narr-spin`) |
-| Working / streaming | `.gemboss-ec-pending` (`-star`, `-verb`, `-meta`), `.gemboss-ec-cursor` after the streamed text |
-| Suggestions, choices | `.gemboss-ec-starters` › `button.gemboss-ec-starter`; `.gemboss-ec-chips` › `button.gemboss-ec-chip` |
-| Composer | `form.gemboss-ec-input` › `textarea` + `div.gemboss-ec-toolbar` › `div.gemboss-ec-toolbar-lead` (chips; leave it EMPTY for none) + `button[type=submit]` (44px; disabled = grey). An empty lead puts the box and the button on ONE row. Stop while streaming: `button.gemboss-ec-stop` in place of submit |
-
-The toolbar row, the one-row layout, the engine picker's layout and Stop are in a second sheet,
-`chat-composer.css` (also inside `gemboss-ui.css`): the admin imports it from its chat components rather than its
-layout, so screens without a chat never load it. The catalog's "Thân chat" section is the markup to copy. NOT here, on purpose: the panel's own geometry
-(`.gemboss-ec` width; the editor columns are in `editor.css` since 0.9.0), attachments, action cards, the engine picker and work mode — those
-are still the admin's. The one exception is the chat panel's touch / mouse target blocks: one rule per pointer
-kind names every control of the panel, admin-only ones included (they match nothing elsewhere). The behaviour (streaming, Stop, Enter to send, IME, scroll-to-bottom) belongs to
-the surface.
+| Steps | `ul.gemboss-narr` › `li.gemboss-narr-row.ok|.running|.failed|.thinking|.trace|.steer` › `.gemboss-narr-dot` + `.gemboss-narr-text` (+ `.gb-chat-target`) |
+| Working / streaming | `.gemboss-ec-pending` (`-star`, `-verb`, `-meta`, `.gb-chat-sr`), `.gemboss-ec-cursor` after the streamed text |
+| Suggestions | `.gemboss-ec-starters` › `button.gemboss-ec-starter.gb-chat-starter` (› `.gb-chat-starter-hint`); a group title `.gb-chat-label` |
+| Under an answer, errors, notes | `.gb-chat-meta`; `.ui-notice.ui-notice--danger.gb-chat-error` › `.gb-chat-cmd` + `details.gb-chat-original`; `.gb-chat-note`; `.gb-engine-notice` |
+| Composer | `div.gemboss-ec-input[data-density]` › `textarea` + `div.gemboss-ec-toolbar` › `div.gemboss-ec-toolbar-lead` (chips) + `div.gemboss-ec-toolbar-tools` (`button.gemboss-ec-attach-btn`) + `button[type=submit]` (a DIRECT child: the send circle) or `button.gemboss-ec-stop` |
+
+Tests: `packages/ui/src/assistant/chat.test.tsx` (markup, parser, every class styled), `chat-browser.test.tsx` (Chromium:
+Enter / IME, Stop in send's place, growing box, density with the mark, following the end, the turn store by id, failed
+turns, full screen's buttons, 44px; each with its negative control).
+
+### Plain HTML: `gembossUI.chat` (0.29.0)
+
+`chat-plain.js`, after `kit-plain.js` (and `engine-plain.js` when the page has the picker), for a page with no React
+(gemcare's inbox and Reports assistants). The same markup as the components, element by element, and the same markdown
+(`chat-plain.test.ts` renders both from the same data and compares the trees). `render()` redraws from the data each
+time; a message whose look did not change keeps its element, and a changed one keeps the folds the reader opened and its
+heartbeat's clock:
+
+```html
+<link rel="stylesheet" href="/ui/chat.css"><link rel="stylesheet" href="/ui/chat-composer.css">
+<link rel="stylesheet" href="/ui/assistant-chat.css"><link rel="stylesheet" href="/ui/assistant-engine.css">
+<script src="/ui/kit-plain.js"></script><script src="/ui/engine-plain.js"></script><script src="/ui/chat-plain.js"></script>
+```
+
+```js
+const log = gembossUI.chat.thread(document.getElementById("ai-thread"));          // role=log, follows the end
+gembossUI.chat.render(log.el, messages, { intro, starters, onStarter, onOpenSetup: () => picker.openTab("setup"),
+  ownLink: (h) => /^(customer|conversation):\d+$/.test(h), renderLink: (href, label) => aiLinkButton(href, label) });
+const box = gembossUI.chat.composer(host, { placeholder: "Ask about this customer", maxLength: 1000, leading: pickerHost,
+  thread: log, onSend: (text) => ask(text), onStop: () => controller.abort() });   // thread: back to the end on a send
+box.setBusy(true); log.setBusy(true);
+const { error, bridge } = gembossUI.chat.turnError(err);                         // the same rule as bridgeTurnError
+```
 
 ## Editor CSS (0.9.x)
 
@@ -243,8 +542,9 @@ import "@gemboss/ui/editor.css";   // only on the screens that show an editor
 Not here, on purpose: the body modes that hide the admin's own topbar and rail while an editor is open
 (`gemboss-editor-fullscreen`, `-just-exited`, `-layer-open`) and admin-only extensions such as the product studio's
 resizer. The frame and its top bar are React components since 0.14.0 ("Editor frame" below), with their behaviour for
-plain HTML in `editor-plain.js`; the panel and its controls are components since 0.17.0 ("Settings panel" below, step 3); step 4 is `LayerList`,
-`EditorDrawer`. Step 5 moves GemFactory's Builder onto them.
+plain HTML in `editor-plain.js`; the panel and its controls are components since 0.17.0 ("Settings panel" below, step 3); the
+layers, the element outline and the drawer since 0.22.0 ("Layers and drawer" below, step 4). Step 5 moves GemFactory's
+Builder onto them.
 
 Changes since the verbatim move, in 0.10.1 (05/10/2026, step 1b, the only ones that change what the admin shows; CHANGELOG):
 
@@ -294,7 +594,7 @@ import { DeviceToggle, EditorBack, EditorChatToggle, EditorFrame, EditorPaneTabs
 | `EditorBack` | `.gemboss-editor-back` ← | A `<button type="button">`, or `as={Link}` / `as="a"` with `href`. Named "Back" for a screen reader (`label`). |
 | `EditorChatToggle` | `.gemboss-editor-chat-toggle` | Shows / hides the left column; filled while open, pressed when collapsed. |
 | `EditorSaveState` | `.gemboss-editor-savestate` (`.is-saving` with the spinner, `.is-saved`) | `idle` draws nothing, or `idleText` dimmed (the section editor's "Autosaves"). Texts and titles are props. |
-| `DeviceToggle`, `MonitorGlyph`, `PhoneGlyph` | `.gemboss-pv-devices` › `.gemboss-pv-device` | Desktop / tablet / mobile. Moved from the admin unchanged. |
+| `DeviceToggle`, `MonitorGlyph`, `TabletGlyph`, `PhoneGlyph` | `.gemboss-pv-devices` › `.gemboss-pv-device` | Desktop / tablet / mobile. Moved from the admin unchanged; `TabletGlyph` exported 0.26.0 (it was inline in the toggle). |
 
 One module per piece behind one entry, so a bundler gives each editor only what it draws (measured: one module for all
 of it cost the page and section editors about 1 KB of code they never ran). Not in `@gemboss/ui` itself: like
@@ -391,6 +691,51 @@ named (it bubbles):
 | Edges: Enter blurs; a box that loses focus sends all four | `.gemboss-ei-edgebox` | `gemboss:editor-edges` `{ t, r, b, l }` |
 | Image: commits on blur / Enter when changed; the thumbnail follows; a chip with `data-gb-image-clear` empties it | `.gemboss-ei-img` | `gemboss:editor-image` `{ value }` |
 
+## Layers and drawer (0.22.0): `LayerList`, `SortableLayerList`, `LayerTree`, `EditorDrawer`
+
+The page editor's Layers, Page settings and Edit content drawers and the element inspector's Elements outline, as
+components (`@gemboss/ui/editor`). The admin draws those four with them since 0.22.0, measured before and after on a
+production build: the same computed style and box, the markup differing only in `data-id` on each row, `type="button"`
+on the buttons the components draw, and `aria-current` on the selected layer (CHANGELOG has the numbers).
+
+```tsx
+import { EditorDrawer, LayerList, LayerTree, SortableLayerList } from "@gemboss/ui/editor";
+
+{layersOpen ? (
+  <EditorDrawer side="left" label="Page layers" title="Layers" onClose={() => setLayersOpen(false)}>
+    <SortableLayerList items={sections.map((s) => ({ id: s.id, title: s.type, subtitle: s.heading, hidden: s.hidden }))}
+      selectedId={picked} onSelect={(it) => setPicked(it.id)}
+      onMove={(it, to) => moveSection(it.id, to)} onToggleHidden={(it, hidden) => setHidden(it.id, hidden)}
+      actions={(it) => <button aria-label="Delete" onClick={() => remove(it.id)}>✕</button>} empty="No sections yet" />
+  </EditorDrawer>
+) : null}
+```
+
+| Component | Markup | Behaviour |
+|---|---|---|
+| `LayerList` | `.gemboss-layers-list` › `.gemboss-layer[data-id]` (`.is-sel`) › `button.gemboss-layer-main` (`.gemboss-layer-type` · `.gemboss-layer-head`) · `.gemboss-layer-acts` | A click selects (`onSelect`; the selected button says `aria-current`). Rows are 34px, 50px with a subtitle. `empty` shows in `.gemboss-picker-empty`. `onToggleHidden`: an eye first among the actions (named "Hide <name>", `aria-pressed` = hidden, the row faded). `depth` per item indents it (`indent` px per level, default 14). Stateless. |
+| `SortableLayerList` | the same, each row `draggable` with a `.gemboss-layer-grip` | `onMove(item, to)` (`to` = the index after the move): drag a row (faded while dragged, a 2px line where it lands), or Alt+↑ / Alt+↓ on its button (the focus stays on the moved row, also when `onMove` answers later). The drag is kept by id. Its own module (`"use client"`): a list that does not reorder does not carry it. |
+| `LayerTree` | `ul.gemboss-ei-tree[role=tree]` › `li.gemboss-ei-tnode[role=treeitem][data-id]` (`.on`, level / position / selection) › `button.gemboss-ei-tname` (+ `small`) · `.gemboss-ei-tacts` · `below` | A click on the name calls `onSelect`; toggling it off is the caller's. Actions show on hover, on the selected row and on focus. 27px rows, 14px per level. |
+| `EditorDrawer` | `.gemboss-picker-backdrop` + `aside.gemboss-settings` (`side="right"`, min(380px, 100%)) or `aside.gemboss-layers` (`side="left"`, 300px) › `before` · `.gemboss-picker-head` (title, ✕) · children · `.gemboss-settings-foot` (`footer`) | ✕ and the backdrop call `onClose`. Mounted while open. The body is the caller's: `.gemboss-settings-body` › `label.gemboss-settings-field` (`span`, control, `small`). |
+
+Drag to reorder is pointer only (HTML drag and drop does not start from touch); a list that must reorder on a phone
+keeps ↑ / ↓ buttons in its `actions`, as the admin's does. Kept as the admin had them: the drawer has no Escape and
+does not move the focus into itself or back; the admin's Layers do not drag and have no eye (they move with ↑ / ↓).
+
+### Plain HTML: `initEditorLayers()`
+
+The same markup (copy it from `catalog/editor.html`), then `gembossUI.initEditorLayers()` (`editor-layers-plain.js`, its own file:
+load it only where layers or drawers are, after `kit-plain.js`; the whole document, or `initEditorLayers(element)`). A drawer stays in the document while closed:
+`hidden` on the aside and on the backdrop before it, an `id` on the aside.
+
+| Wires | Markup | Event |
+|---|---|---|
+| Select a layer (`.is-sel`, `aria-current`) | `.gemboss-layer-main` | `gemboss:editor-layer` `{ id, index }` on the row |
+| Hide / show (`aria-pressed`, `.is-hidden`, the eye's slash) | `.gemboss-layer-eye` | `gemboss:editor-layer-hidden` `{ id, hidden }` |
+| Reorder: drag a row, or Alt+↑ / Alt+↓ on its button; the row moves in the document and keeps the focus | `.gemboss-layer[draggable=true]` | `gemboss:editor-layer-move` `{ id, from, to }` |
+| Select an outline node; a second click clears it | `.gemboss-ei-tree .gemboss-ei-tname` | `gemboss:editor-tree` `{ id }` (`null` when cleared) |
+| Open a drawer (closing any other open one) / close it (✕ in its head, `data-gb-drawer-close`, the backdrop) | `[data-gb-drawer="<aside id>"]` | `gemboss:editor-drawer` `{ id, open }` on the aside |
+
 ## Plain-HTML behaviour: `kit-plain.js` (0.3.0)
 
 Surfaces without React (GemFactory, gemcare, gempress, partner-radar) render the kit's markup on the server and need
@@ -864,6 +1209,28 @@ Every target is 44px (a control, CLAUDE.md §9.1); the pill you see is 26px, tra
 message with reactions does not grow by a full line. A plain-HTML surface writes the same classes (markup at the top of
 `reactions.css`, and the catalog's "Reactions" section).
 
+
+## Action card (0.28.0): an assistant proposes, a person applies
+
+Chris 08/10/2026: the Feedback Assistant lists likely duplicates and merges them, and carries out status, owner, label
+and date changes on request, "follow theo gemboss ui". GemFeedback built it first (`components/MergeCard.tsx`,
+`components/ActionCard.tsx` there); this is its look, moved here so every assistant in the fleet asks the same way.
+
+The contract every surface keeps: **the model never changes anything**. It proposes (a link it writes, a tool result);
+the card shows what would change item by item, what to know first, and how far it reaches; only the primary button
+applies; afterwards the outcome replaces the body, with Undo when the surface can put things back.
+
+| Piece | What it draws |
+| --- | --- |
+| `ActionCard` | `title`, `aside` (a link beside it), `loading` (spinner line), `warnings` (warning banner, "Before you apply"), `summary` + `actions` (the foot), `outcome` (`{tone: "success" \| "info", children, undo?: {onUndo, label, busy}}`, replaces body, warnings and actions), `error` |
+| `ActionCardSection` | a labelled list ("Keeping", "Merging into it"), or unlabelled |
+| `ActionCardItem` | `name` (+ `href`, drawn with `renderLink` for a router link: a list link, 24px), `control` (a checkbox before the name, in a 44px label on touch), `meta`, `excerpt` (3 lines), `footer` (a secondary action), `kept` (accent edge), `muted` |
+| `ActionChange` | "Idea → Planned"; "Already Planned" when equal; `problem` ("Merged into #7", "Changed since") instead |
+| `action-card.css` | its own entry, loaded by the component; a plain-HTML surface links `@gemboss/ui/action-card.css` and writes `ui-action-card`, `__head`, `__title`, `__aside`, `__section`, `__label`, `__list`, `__item` (`--kept`, `--muted`), `__name`, `__pick`, `__meta`, `__excerpt`, `__item-foot`, `__change`, `__same`, `__warn`, `__foot`, `__summary`, `__actions` |
+
+Presentational: no fetching and no state of its own. The surface loads the preview, owns the handlers, and decides
+what Undo puts back (GemFeedback: the merge record, or the values an action replaced, guarded by `if=` so Undo never
+overwrites a later edit). Catalog section "Thẻ hành động".
 ## Report pages (0.4.0)
 
 Plain CSS in `kit-plain.css` for a numbers page written by hand (first user: gemnews `/admin`, 03/10/2026; that page moved to GemCommunity the same day, so gemnews no longer takes the package). The
@@ -883,6 +1250,46 @@ surface computes every number and ratio; the kit only draws. Markup for each is
 - `ui-grid--2` / `--3`: card grid that drops to one column; `ui-section-head`: an `h2` + note between page head and
   card titles.
 
+## Mini charts (0.30.0): `Sparkline`, `ShareBar`
+
+Two charts small enough for a card or a table cell, each its own entry (`minichart.css`, imported by the component).
+Before this, six surfaces drew a sparkline by hand (admin intelligence, analytics and operator; talent-radar; search-radar;
+gemwatcher; gemform) with three different baselines.
+
+```tsx
+import { Sparkline, ShareBar } from "@gemboss/ui";
+<Sparkline points={[3, 5, null, 4, 8]} label="Registrations, last 5 days" />
+<ShareBar label="Status" parts={[{ label: "New", value: 25, tone: "info" }, { label: "Spam", value: 2, tone: "critical" }]} />
+```
+
+- `Sparkline`: oldest point first; `null` is a gap (the line breaks, a lone point is a dot); counts start at 0 unless
+  `min` / `max` fix the scale; `invert` for a rank. Muted line, the newest point one iris dot; `tone` `series` /
+  `success` / `critical`. With `label` it is an image with that name, without it decoration (`aria-hidden`).
+  `sparklinePaths(points, opts)` is the geometry alone, for a page that writes the SVG itself.
+- `ShareBar`: one 6px bar split by share; parts at 0 take no room; tones are the badge tones (`info`, `success`,
+  `warning`, `critical`, `neutral`) or `series-1..5` (the default, in order). The bar is one image whose name lists every
+  part, so a screen reader hears the numbers the colours stand for. Each segment grows by its SHARE (value / total), so
+  fractions fill the track. The share is an inline `flex-grow`: a plain-HTML page under a CSP that forbids inline style
+  (gemcare) sizes the segments from its own stylesheet or script.
+
+## Setup guide (0.30.0): `SetupGuide`
+
+The admin's "Set up your store" card (Shopify's Setup guide) as a component, its own entry (`setup-guide.css`): a title
+with the count, a bar, collapsed steps of which the first not done is open. Native `<details>`: the head folds the guide,
+the steps share one `name` so the browser keeps one open, and a page without React writing the same markup (catalog
+"Hướng dẫn thiết lập") behaves the same with no script. The row reveals; what changes something is a button in the
+step's `body`; a step with no body is a plain row (no toggle that opens nothing). The open step is decided ONCE, as in
+the admin: a state change while someone reads a step never shuts it. `state: "unknown"` (could not be read) is counted
+apart, never as progress. The bar is a `<progress>` (no inline style). `rememberKey` keeps a folded guide folded across
+visits (localStorage); `group` names the steps' `name` when two guides render in separate React roots. No steps: no guide.
+
+```tsx
+<SetupGuide title="Telegram alerts" steps={[
+  { id: "bot", title: "Connect a bot", state: bot ? "done" : "todo", body: <ConnectBot /> },
+  { id: "chat", title: "Choose where alerts go", state: chats.length ? "done" : "todo", body: <Chats /> },
+]} />
+```
+
 ## Collections (0.13.0): tables, lists, grids, boards
 
 Chris settled these on 05/10/2026 after an inventory of 136 hand-made collections on 11 surfaces (86 tables scrolling
@@ -1086,13 +1493,15 @@ something the base cannot express, add a token or a prop here, and every surface
 
 | Path | What |
 |---|---|
-| `gemboss-ui.css` | built at stage time and shipped minified (0.19.0): `apps/admin/scripts/export-ui-css.mjs` (tokens + kit + field + `packages/ui/src/shell.css`, with Polaris `--p-*` resolved to their fallbacks) + `packages/ui/src/app-shell.css` + `auth.css` + `assistant.css` + `kit-plain.css` + `chat.css` + `chat-composer.css` (`packages/ui/scripts/build-css.mjs`) |
-| `packages/ui/src/shell.css` | the SHARED SHELL (rail, topbar, main, mobile drawer, the assistant's thread rail, popover surface, account chip). The admin's `gemboss-shell.css` @imports it on line 2; the export refuses a shared-shell rule in the admin's sheet or an admin-only rule here (one owner). |
+| `parts/core.css`, `parts/components.css`, `parts/shell.css` | 0.23.0: the core, built by `packages/ui/scripts/build-css.mjs` from the same sections as `gemboss-ui.css` (see "Load only what you use"). |
+| `gemboss-ui.css` | built at stage time and shipped minified (0.19.0); since 0.23.0 the COMPATIBILITY BUNDLE, frozen: `apps/admin/scripts/export-ui-css.mjs` (tokens + kit + field + `packages/ui/src/shell.css`, with Polaris `--p-*` resolved to their fallbacks) + `packages/ui/src/app-shell.css` + `auth.css` + `assistant.css` + `kit-plain.css` + `chat.css` + `chat-composer.css` (`packages/ui/scripts/build-css.mjs`) |
+| `packages/ui/src/shell.css` | the SHARED SHELL (rail, topbar, main, mobile drawer, the assistant's thread rail, popover surface, account chip). Exported as `@gemboss/ui/shell-source.css` since 0.23.0 (`@gemboss/ui/shell.css` is the built part). The admin's `gemboss-shell.css` @imports it on line 2; the export refuses a shared-shell rule in the admin's sheet or an admin-only rule here (one owner). |
 | `packages/ui/src/kit-plain.css` | primitives for surfaces that render plain HTML, not React (0.2.1): menu, key/value list, icon button; 0.3.0 adds `ui-link` / `ui-prose`, the media card (`ui-card--media`, `__media`, `__body`, `__foot`) and the popup's `ui-modal__body` / `__foot`. Shipped inside `gemboss-ui.css`; the admin does not import it (its first-load CSS budget has ~0.1 KB headroom).; (0.4.0) report pages: delta, large KPI grid, bar list, column chart, legend, funnel, card grid, section head. |
 | `packages/ui/src/kit-plain.js` | 0.3.0: the behaviour those surfaces each wrote by hand: `gembossUI.openModal` (Escape, backdrop, Tab trap, stacking, ask-before-close, focus back), `toast` (text, error tone), `initMenus` (outside click, item, blur, Escape closes the menu before the popup); 0.5.0: `confirm`, `initShell`, `initPasswordFields` / `resetPasswordFields`. A classic script: inline it or `<script src>`; see "Plain-HTML behaviour" above. |
 | `packages/ui/src/collections.css` | 0.13.0: tables, lists, grids, boards and their states (see "Collections"). A separate entry, NOT inside `gemboss-ui.css`; the admin does not load it. |
-| `packages/ui/src/editor/` | 0.14.0, `@gemboss/ui/editor`: `EditorFrame`, `EditorPaneTabs`, `EditorTopbar`, `EditorBack`, `EditorChatToggle`, `EditorSaveState`, `DeviceToggle`. See "Editor frame". 0.17.0: `PanelTabs`, `PanelHeader`, `PanelAction`, `InspectorGroup`, `Field`, `Seg`, `ColorControl`, `RangeControl`, `EdgeBox`, `ImageControl`, `ChipButton`, `swatchState` (`./editor/swatch` too); 0.20.1 `cssUrl`. See "Settings panel". |
+| `packages/ui/src/editor/` | 0.14.0, `@gemboss/ui/editor`: `EditorFrame`, `EditorPaneTabs`, `EditorTopbar`, `EditorBack`, `EditorChatToggle`, `EditorSaveState`, `DeviceToggle`. See "Editor frame". 0.17.0: `PanelTabs`, `PanelHeader`, `PanelAction`, `InspectorGroup`, `Field`, `Seg`, `ColorControl`, `RangeControl`, `EdgeBox`, `ImageControl`, `ChipButton`, `swatchState` (`./editor/swatch` too); 0.20.1 `cssUrl`. See "Settings panel". 0.22.0: `LayerList`, `SortableLayerList`, `LayerTree`, `EditorDrawer`. See "Layers and drawer". |
 | `packages/ui/src/editor-plain.js` | 0.14.0: `gembossUI.initEditorFrame()`, the frame's behaviour for plain HTML; 0.17.0: `gembossUI.initEditorPanel()`, the settings panel's. Load after `kit-plain.js`. |
+| `packages/ui/src/editor-layers-plain.js` | 0.22.0: `gembossUI.initEditorLayers()`, the layers', the outline's and the drawers' behaviour for plain HTML. Load after `kit-plain.js`. |
 | `catalog/editor.html` | 0.14.0: the frame rendered from the components and running (`packages/ui/scripts/build-catalog-editor.mjs`), linked from `catalog/index.html`. |
 | `packages/ui/src/editor.css` | 0.9.0: the editors (frame, top bar, preview, Configure dock, inspector and controls, Layers, settings drawer, page picker, menus). A separate entry, NOT inside `gemboss-ui.css`; the admin imports it from the editor components, never from a layout. See "Editor CSS" above. |
 | `packages/ui/src/chat.css`, `chat-composer.css`, `assistant.css`, `auth.css`, `app-shell.css` | the chat body, the composer, the assistant frame, the sign-in screen, the topbar slots + base text + the page width tiers (`ui-page`, 0.8.1). All inside `gemboss-ui.css`; the admin @imports `chat.css` and `chat-composer.css` itself. |