@gemboss/ui 0.2.0 → 0.3.0

package/src/chat.css

@@ -0,0 +1,427 @@
+/*
+ * The chat BODY — what an answer looks like, wherever a GemBoss surface puts a chat (01/10/2026).
+ *
+ * Chris: every surface's AI assistant (gemcare, content-radar, partner-radar, GemCommunity) must be built from the
+ * GemBoss UI framework. Until today only the FRAME was shared (assistant.css: popup / bar / full screen; shell.css:
+ * the thread rail); the body lived in the admin's gemboss-shell.css and the exporter left it out on purpose, so every
+ * surface drew its own bubbles, markdown and composer. These are those rules, moved here VERBATIM (same selectors,
+ * same values, same order) — the admin @imports this file at the top of its shell, so it is still the one owner.
+ *
+ * What is here: the header (`.gemboss-ec-head/title/sub`), the message list (`.gemboss-ec-scroll`), messages and
+ * bubbles (`.gemboss-ec-msg.user|.assistant`, `.gemboss-ec-bubble`), the working indicator and the streaming cursor
+ * (`.gemboss-ec-pending*`, `.gemboss-ec-cursor`), markdown (`.gemboss-md-*`, `.gemboss-ec-md-link`), step narration
+ * (`.gemboss-narr*`), starters and option chips (`.gemboss-ec-starter(s)`, `.gemboss-ec-chip(s)`), and the composer
+ * (`.gemboss-ec-input` with its textarea and submit button).
+ * What is NOT: the panel's geometry (`.gemboss-ec` width, editor columns, tabs), attachments, CTA / action cards,
+ * the engine picker and work mode — those are still the admin's, and a surface brings its own. ONE exception, on
+ * purpose: the chat panel's touch / mouse TARGET blocks (`@media (pointer: coarse|fine)` below) name every control
+ * of the panel, the admin-only ones (tabs, upload, engine picker, work mode, attach, stop) included. They are one
+ * rule per pointer kind; split in two they wrote their declarations twice and the admin's shell budget had no room.
+ * Those selectors match nothing on a surface without those controls. (`.gemboss-ec-workmode`: the click-area
+ * `::before` is here, its label-sizing `::after` stays the admin's.)
+ *
+ * Markup: see the catalog's "Thân chat" section. Behaviour (streaming, stop, keyboard) belongs to the surface.
+ */
+
+.gemboss-ec-head { padding: 16px 16px; border-bottom: 1px solid var(--gemboss-divider); display: flex; flex-direction: column; gap: 2px; }
+.gemboss-ec-title { font-family: var(--gemboss-serif); font-size: 15px; font-weight: 600; }
+.gemboss-ec-sub { font-size: 12px; color: var(--gemboss-text-muted); }
+.gemboss-ec-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; scrollbar-gutter: stable; }
+/* Visible thin scrollbar on the chat message list — the default macOS overlay bar is
+   hidden until you actively scroll, so the list reads as "can't scroll" (esp. on the
+   dedicated Assistant page, a fixed-height chat where the page itself doesn't scroll).
+   A persistent thin bar makes the scroll affordance obvious; matches the composer input. */
+.gemboss-ec-scroll { scrollbar-width: thin; scrollbar-color: rgba(31,30,29,0.22) transparent; }
+.gemboss-ec-scroll::-webkit-scrollbar { width: 9px; }
+.gemboss-ec-scroll::-webkit-scrollbar-track { background: transparent; }
+.gemboss-ec-scroll::-webkit-scrollbar-thumb { background: rgba(31,30,29,0.2); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
+.gemboss-ec-msg { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
+.gemboss-ec-msg.user { align-items: flex-end; }
+.gemboss-ec-msg.assistant { align-items: flex-start; }
+.gemboss-ec-bubble {
+  /* Cap reading measure: a chat reply stays at a readable line length, not the bubble's full 90%. */
+  font-size: var(--gemboss-fs-body); line-height: 1.5; padding: 12px 12px; border-radius: 16px; max-width: min(90%, 68ch);
+  white-space: pre-wrap; word-break: break-word;
+}
+.gemboss-ec-msg.user .gemboss-ec-bubble { background: var(--gemboss-primary); color: #fff; border-bottom-right-radius: 4px; }
+.gemboss-ec-msg.assistant .gemboss-ec-bubble { background: var(--gemboss-surface); color: var(--gemboss-text); border: 1px solid var(--gemboss-divider); border-bottom-left-radius: 4px; }
+.gemboss-ec-input button[type="submit"] svg { width: 18px; height: 18px; fill: currentColor; }
+/* Live "working" heartbeat — the Claude-Code-style running asterisk shown before the first token.
+   Slim, muted, single line so the chat stays clean; the motion (pulsing ✳, crossfading verb, live
+   counter) is what makes the wait feel fast instead of frozen. */
+.gemboss-ec-pending { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: var(--gemboss-fs-caption); color: var(--gemboss-text-muted); }
+.gemboss-ec-pending-star { color: var(--gemboss-primary); font-size: 12px; line-height: 1; animation: gemboss-star-pulse 1.1s ease-in-out infinite; }
+.gemboss-ec-pending-verb { color: var(--gemboss-text); animation: gemboss-verb-in 0.4s ease-out; }
+.gemboss-ec-pending-meta { font-variant-numeric: tabular-nums; opacity: 0.7; font-size: var(--gemboss-fs-caption); }
+@keyframes gemboss-star-pulse { 0%,100% { transform: scale(0.85); opacity: 0.55; } 50% { transform: scale(1.15); opacity: 1; } }
+@keyframes gemboss-verb-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
+/* Typewriter cursor — a thin blinking bar trailing the answer while tokens stream in. */
+.gemboss-ec-cursor { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--gemboss-primary); border-radius: 2px; animation: gemboss-cursor-blink 1s steps(1) infinite; }
+@keyframes gemboss-cursor-blink { 0%,45% { opacity: 1; } 50%,95% { opacity: 0.15; } 100% { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .gemboss-ec-pending-star, .gemboss-ec-cursor { animation: none; }
+}
+/* Markdown link inside the answer bubble — a friendly inline link, never a raw path. */
+.gemboss-ec-md-link { color: var(--gemboss-primary-dark); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gemboss-primary) 35%, transparent); cursor: pointer; }
+.gemboss-ec-md-link:hover { border-bottom-color: var(--gemboss-primary); }
+/* Suggestion starters = compact wrapping CHIPS (pills), not stacked full-width boxes —
+   reads as a chat's quick-reply chips and stops one prompt eating a whole row. */
+.gemboss-ec-starters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
+.gemboss-ec-starter {
+  text-align: left; font-size: 13px; padding: 6px 12px; border-radius: var(--gemboss-radius-full); cursor: pointer;
+  background: var(--gemboss-surface); border: 1px solid var(--gemboss-divider); color: var(--gemboss-text);
+  white-space: nowrap; max-width: 100%;
+}
+.gemboss-ec-starter:hover { border-color: var(--gemboss-primary); background: rgba(86, 97, 245, 0.06); }
+/* (removed) dead legacy rail styles — `.icon-nav-assistant` + the hover-flyout submenu
+   (`.icon-nav-flyout*`). The current nav (IconNav.tsx) is a persistent 240px labeled
+   sidebar using `.gnav-*` classes with route-driven sub-nav; there is no 72px icon rail
+   and no hover flyout, so these selectors matched nothing. */
+
+/* Composer = ONE bordered rounded shell (ChatGPT/Claude-style): the textarea sits borderless
+   inside it and the attach (📎) + send (↑) buttons float within the same box — cleaner than the
+   old three-separate-boxes row. The shell is inset from the panel edges (margin) and lifts its
+   border to primary on focus-within, so the whole composer reads as one focused field. */
+/* TWO ROWS when there are chips (ChatComposer): the textarea on its own full-width row, the toolbar
+   under it. The toolbar is where chips of any length live, and when they shared a row with the text
+   box the send button was the thing that gave way — measured 22/09/2026 at 320px, it wrapped to a
+   THIRD line. With no chips at all, ONE row — see `:has` below.
+   8px inside, not 6: at 6 the text sat 13px from the border and the box read as cramped. What the
+   toolbar SAYS at each width is ChatComposer's job (data-density), measured rather than guessed. */
+.gemboss-ec-input {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
+  margin: 12px; padding: 8px;
+  border: 1px solid var(--gemboss-divider); border-radius: 16px;
+  background: var(--gemboss-surface);
+  transition: border-color var(--gemboss-transition-fast) ease, box-shadow var(--gemboss-transition-fast) ease;
+}
+.gemboss-ec-input:focus-within {
+  border-color: var(--gemboss-primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gemboss-primary) 12%, transparent);
+}
+.gemboss-ec-input textarea {
+  flex: 1 0 100%; min-width: 0; width: 100%; box-sizing: border-box; resize: none; border-radius: 0; background: transparent;
+  /* The CHIP's box model — a transparent 1px border and 8px of padding — so the first letter typed
+     lines up with the first letter of "Claude Code" below it. It was 6px with no border: the text
+     started 3px left of the chips, measured on every host at every width, and the box read as two
+     columns. (Box model rather than nine pixels of padding: nine is off the spacing scale the CI guard holds.) */
+  border: 1px solid transparent;
+  padding: 6px 8px; font-size: var(--gemboss-fs-body); font-family: inherit;
+  /* Starts at one line; GemChat's auto-grow JS expands it up to ~3 lines (max-height),
+     then scrolls inside (ChatGPT/Gemini-style). overflow-y is hidden until the JS flips
+     it to auto past the cap, so a 1–2 line message never shows a (rounding) scrollbar. */
+  min-height: 0; max-height: 84px; line-height: 1.5; overflow-y: hidden;
+  scrollbar-width: thin; scrollbar-color: rgba(31,30,29,0.22) transparent; /* thin, not the OS bar */
+}
+.gemboss-ec-input textarea::-webkit-scrollbar { width: 7px; }
+.gemboss-ec-input textarea::-webkit-scrollbar-track { background: transparent; }
+.gemboss-ec-input textarea::-webkit-scrollbar-thumb { background: rgba(31,30,29,0.2); border-radius: 4px; border: 2px solid transparent; background-clip: content-box; }
+.gemboss-ec-input textarea:focus { outline: none; }
+/* Send button — a filled primary circle floating at the shell's bottom-right. inline-flex centers
+   the ↑ SVG (the old rule had no flex-centering, so the icon sat high).
+
+   SCOPED TO THE SUBMIT BUTTON, and that word is load-bearing. This rule used to read
+   `.gemboss-ec-input button`, which reached EVERY button in the composer — including whatever a host
+   passes in through `composerLeading`, a slot that exists precisely so hosts can put their own
+   controls here. The 📎 attach button already had to fight it back with a class of its own (see the
+   comment above `.gemboss-ec-attach-btn`), which was the first sign that this selector owns more than
+   it should. The second was the engine picker: a Polaris Button, rendered into the slot, came out as a
+   34px black circle with its label ("Claude Code · Opus") clipped to three characters. Nothing was
+   wrong with the picker — this rule was painting it.
+
+   §9.3: one visual owner per component. The composer owns its own send button and nothing that is
+   handed to it. Guarded by composer-owns-only-its-own-buttons.test.ts.
+
+   44px, not 34: it is a CONTROL (§9.1, Apple HIG / WCAG 2.5.5 AAA). This branch had already raised
+   it — but on the OLD unscoped selector, the very rule main had just narrowed. The two changes were
+   fixing different faults in one declaration, so both are kept: main's scope, this branch's size. */
+.gemboss-ec-input button[type="submit"] {
+  flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; border: 0; cursor: pointer;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: var(--gemboss-primary); color: #fff; font-size: 16px; font-weight: 700;
+  transition: background var(--gemboss-transition-fast) ease, filter var(--gemboss-transition-fast) ease;
+}
+.gemboss-ec-input button[type="submit"]:hover:not(:disabled) { background: var(--gemboss-primary-dark); }
+.gemboss-ec-input button[type="submit"]:active:not(:disabled) { background: var(--gemboss-primary-dark); filter: brightness(0.94); }
+.gemboss-ec-input button[type="submit"]:focus-visible { outline: 2px solid var(--gemboss-primary); outline-offset: 2px; }
+/* Disabled (empty input): a clear neutral grey circle with a muted arrow — reads as
+   "inactive" rather than a washed-out faint-primary blob. */
+.gemboss-ec-input button[type="submit"]:disabled { background: var(--gemboss-divider); color: var(--gemboss-text-muted); opacity: 1; cursor: default; }
+/* ── Narration timeline ── */
+.gemboss-narr { list-style: none; margin: 0; padding: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
+.gemboss-narr-row { display: flex; align-items: center; gap: 8px; font-size: var(--gemboss-fs-caption); color: var(--gemboss-text-muted); }
+.gemboss-narr-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; flex: 0 0 auto; }
+.gemboss-narr-row.ok .gemboss-narr-dot { background: var(--gemboss-active-bg); color: var(--gemboss-active-fg); }
+.gemboss-narr-row.failed .gemboss-narr-dot { background: #fde8e6; color: var(--gemboss-danger); }
+.gemboss-narr-row.running .gemboss-narr-dot { background: transparent; }
+/* THE ENGINE'S MARK, in the dot's slot. No pill behind it: the ✓/✕ dots earn their background by
+   being a glyph in a circle, and a logo in a coloured circle reads as a badge the engine awarded
+   itself. It takes the ROW's colour, so a failed turn's mark goes red with everything else — a mark
+   that stayed brand-coloured over a failure would be the one cheerful thing on a broken row. */
+.gemboss-narr-dot-engine { background: transparent !important; color: inherit; }
+.gemboss-narr-row.ok .gemboss-narr-dot-engine { color: var(--gemboss-text); }
+.gemboss-narr-row.failed .gemboss-narr-dot-engine { color: var(--gemboss-danger); }
+.gemboss-narr-row.ok .gemboss-narr-text, .gemboss-narr-row.failed .gemboss-narr-text { color: var(--gemboss-text); }
+/* A message the seller typed INTO the running turn. It reads as THEIR line, not as a step the agent
+   took: full-strength text (the timeline is muted by default) against the page's own text colour, and
+   a `❯` prompt caret instead of a status dot. It must be legible at a glance while the agent is still
+   writing above it — a seller scanning a long timeline needs to find the moment they interrupted. */
+.gemboss-narr-row.steer .gemboss-narr-dot { background: transparent; color: var(--gemboss-text-muted); }
+/* `anywhere`, not `normal`: a seller correcting a turn pastes URLs and product handles, and one
+   unbroken 60-character token in a 320px chat column is a row that pushes the panel sideways. Measured
+   2026-09-23 — the default `overflow-wrap: normal` on this row does not break such a token. */
+.gemboss-narr-steer { color: var(--gemboss-text); font-weight: 500; overflow-wrap: anywhere; }
+.gemboss-narr-spin { width: 11px; height: 11px; border: 2px solid var(--gemboss-divider-soft); border-top-color: var(--gemboss-primary); border-radius: 50%; animation: gemboss-spin 0.7s linear infinite; }
+@keyframes gemboss-spin { to { transform: rotate(360deg); } }
+/* Live-reasoning ("thinking") row: muted + italic while streaming, collapsible once settled. */
+.gemboss-narr-row.thinking { align-items: flex-start; }
+.gemboss-narr-row.thinking .gemboss-narr-dot { color: var(--gemboss-text-muted); background: transparent; }
+.gemboss-narr-thinking-live { font-style: italic; color: var(--gemboss-text-muted); white-space: pre-wrap; opacity: 0.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+.gemboss-narr-thinking { font-size: var(--gemboss-fs-caption); }
+.gemboss-narr-thinking > summary { cursor: pointer; color: var(--gemboss-text-muted); list-style: none; user-select: none; }
+.gemboss-narr-thinking > summary::-webkit-details-marker { display: none; }
+.gemboss-narr-thinking > summary::before { content: "▸ "; }
+.gemboss-narr-thinking[open] > summary::before { content: "▾ "; }
+.gemboss-narr-thinking-body { margin-top: 6px; padding: 8px 8px; border-left: 2px solid var(--gemboss-divider-soft); color: var(--gemboss-text-muted); font-style: italic; white-space: pre-wrap; line-height: 1.5; }
+/* TOOL TRANSCRIPT rows — the Claude-Code shape: a monospace call line, its return value folded
+   behind a disclosure. Muted on purpose: the transcript is evidence you can audit, not the answer. */
+.gemboss-narr-row.trace code { font-family: var(--gemboss-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--gemboss-fs-caption); word-break: break-word; }
+.gemboss-narr-trace-call { color: var(--gemboss-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.gemboss-narr-trace { font-size: var(--gemboss-fs-caption); min-width: 0; }
+.gemboss-narr-trace > summary { cursor: pointer; color: var(--gemboss-text-muted); list-style: none; user-select: none;
+  /* A tool call with real arguments is long and the chat panel is narrow: a full payload wrapped to five
+     lines buries the rows around it. Clamp while closed; opening the row shows the call in full. */
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.gemboss-narr-trace[open] > summary { display: block; overflow: visible; }
+.gemboss-narr-trace > summary::-webkit-details-marker { display: none; }
+/* The fold is now the ONLY way to see a payload or a finished thought (both start closed), so its
+   summary is a target: ≥24px tall, the list-link tier of Gems/CLAUDE.md §9.1 (WCAG 2.5.8). Measured
+   21px before, 13/09. */
+.gemboss-narr-trace > summary, .gemboss-narr-thinking > summary { min-height: 24px; box-sizing: border-box; padding-block: 2px; }
+.gemboss-narr-trace > summary::before { content: "▸ "; }
+.gemboss-narr-trace[open] > summary::before { content: "▾ "; }
+.gemboss-narr-trace-body { margin-top: 6px; padding: 8px; border-left: 2px solid var(--gemboss-divider-soft); color: var(--gemboss-text-muted); white-space: pre-wrap; line-height: 1.5; overflow-x: auto; }
+@media (max-width: 640px) {
+  /* Composer auto-grows from one line (see GemChat) — no fixed floor needed here. */
+  .gemboss-ec-input textarea { min-height: 0; }
+  .gemboss-ec-scroll { padding: 12px; }
+}
+/* ── Chat option chips (persona/goal polling) ── */
+.gemboss-ec-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
+/* 44px because a chip is a CONTROL, not a link in a list — Apple HIG / WCAG 2.5.5 AAA, Gems CLAUDE.md
+   §9.1. Measured 2026-09-09 at 390px and 1366px: padding alone rendered these at 34px, ten short, and
+   they are the only way to answer a poll or resume an unfinished run on a phone. `min-height` rather
+   than `height` so a wrapped two-line label still grows instead of clipping. */
+.gemboss-ec-chip {
+  background: var(--gemboss-surface); border: 1px solid var(--gemboss-divider); border-radius: var(--gemboss-radius-full);
+  padding: 8px 16px; font-size: 13px; cursor: pointer; color: var(--gemboss-text);
+  min-height: 44px;
+}
+.gemboss-ec-chip:hover { border-color: var(--gemboss-primary); color: var(--gemboss-active-fg); }
+.gemboss-ec-chip:disabled { opacity: 0.5; cursor: default; }
+/* ════ Mouse targets — the same 44px, bought with an overlay instead of a bigger box ═══════
+   §9.1 asks 44px of a CONTROL, and it does not say "on touch only". The chat panel's controls are
+   28-37px under a mouse, which clears WCAG 2.5.8 AA (24px) and not 2.5.5 AAA (44px). The dense look
+   is deliberate and worth keeping, so the TARGET grows and the ink does not — the same trick the
+   editor topbar already uses on its device buttons.
+
+   WHICH ONES, AND WHY NOT THE REST. A target that reaches into a neighbour steals clicks meant for
+   it, which is worse than a small one. So this was decided by measuring the gap between every pair
+   of vertically adjacent controls at 390 / 768 / 1366 and asking whether BOTH could grow into it —
+   a control's own clearance is not enough, because its neighbour is growing too. Measured
+   2026-09-09, three pairs could not:
+
+     starter chips, row to row   gap 8px, both need 7  -> the ROW GAP goes to 16px below, which buys
+                                                          it without changing how the chips look
+     textarea / engine picker    gap 8px, needs 10     -> the textarea does not grow (see below)
+     textarea / send             gap 6px, needs 9      -> same
+
+   THE MESSAGE BOX IS EXCLUDED ON PURPOSE. It is a full-width field 37px tall: its AREA is already
+   enormous, the only dimension short of 44 is its height, and it is the one control here you reach
+   by clicking INTO text rather than at a point. Growing it also collides with both of its
+   neighbours. With it left alone, everything else fits: send needs 5 of the 6px above it, the
+   picker needs 8 of 8.
+
+   Height only. Horizontally these controls are already 34-196px wide, and an overlay that also grew
+   sideways would collide with the chip beside it, which is 8px away. */
+@media (pointer: fine) {
+  .gemboss-ec-starters { row-gap: 16px; }
+  .gemboss-ec-tab,
+  .gemboss-ec-starter,
+  .gemboss-ec-upload,
+  .gemboss-ec-enginepick button,
+  .gemboss-ec-workmode,
+  .gemboss-ec-input .gemboss-ec-attach-btn,
+  .gemboss-ec-stop,
+  /* Shares the toolbar row with Stop, which is already 44px tall — so a 44px overlay here grows into
+     a row that is that tall already, and reaches into nothing above or below it. */
+  .gemboss-ec-stop-send,
+  .gemboss-ec-input button[type="submit"] { position: relative; }
+  .gemboss-ec-tab::after,
+  .gemboss-ec-starter::after,
+  .gemboss-ec-upload::after,
+  .gemboss-ec-enginepick button::after,
+  /* `::before` on the work-mode wrapper: its `::after` is the invisible label that SIZES it, and a
+     second use of the same pseudo-element would silently replace that. */
+  .gemboss-ec-workmode::before,
+  .gemboss-ec-input .gemboss-ec-attach-btn::after,
+  .gemboss-ec-stop::after,
+  .gemboss-ec-stop-send::after,
+  .gemboss-ec-input button[type="submit"]::after {
+    content: "";
+    position: absolute;
+    left: 0; right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 44px;
+    /* No background at all: a pseudo-element is transparent already, and the `background` shorthand
+       is banned in this family because it resets `background-image` — the work-mode caret. My own
+       guard from #2158 caught this line, which is the guard doing exactly what it was written for. */
+    pointer-events: auto;
+    /* Above the panel chrome it overhangs — the chrome is not interactive, so a click landing on the
+       control the overlay belongs to is the point.
+       This does NOT rescue a control sitting flush against the top of `.gemboss-ec-scroll`: an
+       overflow container clips its absolutely-positioned descendants, and z-index cannot cross that.
+       Measured at 768px, where the first row of starter chips begins at the exact pixel the header
+       ends: their target is 37px until the list scrolls, and 44px after. A scroll position, not a
+       layout constant — the same chips measure 44px at 390, 1366 and 1920. Left alone rather than
+       bought with padding on the scroll area, which every seller would see all the time to fix a
+       target in one transient position. */
+    z-index: 1;
+  }
+}
+@media (pointer: coarse) {
+  .gemboss-ec-input button[type="submit"] { width: 44px; height: 44px; font-size: 17px; }
+  .gemboss-ec-starter, .gemboss-ec-opt { min-height: 44px; }
+  .gemboss-ec-input textarea { min-height: 44px; }
+}
+/* ── The answer bubble's markdown ────────────────────────────────────────────────────────────────
+ *
+ * The bubble understood bold, links and line breaks. The models writing into it do not restrict
+ * themselves to three things: a question about pages came back as a markdown TABLE and rendered as
+ * literal pipes down the page. These are the styles for what it actually writes. */
+
+.gemboss-md-p { margin: 0 0 8px; }
+.gemboss-md-p:last-child { margin-bottom: 0; }
+/* Demoted one level in the markup (h1 → h3) because the bubble sits under the page's own headings.
+ * The SIZE hierarchy is kept here, because that is what a reader uses to skim. */
+.gemboss-md-h { margin: 16px 0 6px; font-weight: 650; line-height: 1.3; }
+.gemboss-md-h:first-child { margin-top: 0; }
+/* RESTORED after #3370 deleted these three. MarkdownLite.tsx builds the class by interpolation —
+ * `gemboss-md-h gemboss-md-h${b.level}` — so the literal `gemboss-md-h1` exists in no source file
+ * and in no compiled chunk, and all three of that PR's detection passes read them as dead. The gate
+ * now carries the prefix rule that catches this shape. Do not "clean" these up. */
+.gemboss-md-h1 { font-size: 17px; }
+.gemboss-md-h2 { font-size: 15px; }
+.gemboss-md-h3 { font-size: var(--gemboss-fs-body); color: var(--gemboss-text-subdued, #616161); }
+.gemboss-md-list { margin: 0 0 8px; padding-left: 20px; }
+.gemboss-md-list li { margin: 2px 0; }
+.gemboss-md-quote {
+  margin: 0 0 8px;
+  padding: 2px 0 2px 12px;
+  border-left: 3px solid var(--gemboss-border, #e3e3e3);
+  color: var(--gemboss-text-subdued, #616161);
+}
+.gemboss-md-rule { margin: 12px 0; border: 0; border-top: 1px solid var(--gemboss-border, #e3e3e3); }
+/* Inline code: a chip, so an identifier stops reading as prose. */
+.gemboss-md-code {
+  padding: 1px 6px;
+  border-radius: 6px;
+  background: var(--gemboss-surface-subdued, #f1f1f1);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.9em;
+  word-break: break-word;
+}
+/* Tables scroll INSIDE their own box. The chat lives in a 380px sidebar in the theme editor, and a
+ * five-column table there would otherwise push the whole panel sideways — §9.1's rule that wide
+ * content scrolls in its own container, not the page. */
+.gemboss-md-tablewrap { margin: 0 0 12px; overflow-x: auto; }
+.gemboss-md-table { border-collapse: collapse; font-size: var(--gemboss-fs-caption); min-width: 100%; }
+.gemboss-md-table th,
+.gemboss-md-table td {
+  border: 1px solid var(--gemboss-border, #e3e3e3);
+  padding: 6px 8px;
+  text-align: left;
+  vertical-align: top;
+  white-space: nowrap;
+}
+.gemboss-md-table th { background: var(--gemboss-surface-subdued, #f7f7f7); font-weight: 600; }
+/* A picture in an answer (only from hosts markdown-blocks.ts trusts). Never wider than the bubble — the
+ * chat can sit in a 380px sidebar — and capped in height so five thumbnails read as a shortlist, not
+ * five screens. The link around it is the tap target: keyboard focus has to be visible on it. */
+.gemboss-md-imglink { display: inline-block; max-width: 100%; margin: 4px 0 8px; border-radius: 8px; line-height: 0; }
+.gemboss-md-imglink:focus-visible { outline: 2px solid var(--gemboss-focus, #005bd3); outline-offset: 2px; }
+.gemboss-md-img {
+  display: block;
+  max-width: 100%;
+  max-height: 320px;
+  height: auto;
+  border: 1px solid var(--gemboss-border, #e3e3e3);
+  border-radius: 8px;
+  background: var(--gemboss-surface-subdued, #f7f7f7);
+  object-fit: contain;
+}
+/* A code block, with the fold. A 200-line answer should not push everything after it off screen. */
+.gemboss-md-codeblock {
+  position: relative;
+  margin: 0 0 12px;
+  border: 1px solid var(--gemboss-border, #e3e3e3);
+  border-radius: 8px;
+  background: var(--gemboss-surface-subdued, #f7f7f7);
+  overflow: hidden;
+}
+.gemboss-md-codelang {
+  display: block;
+  padding: 4px 12px 0;
+  color: var(--gemboss-text-subdued, #8a8a8a);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+}
+.gemboss-md-codeblock pre { margin: 0; padding: 8px 12px; overflow-x: auto; }
+.gemboss-md-codeblock code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre;
+}
+.gemboss-md-codemore {
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  border: 0;
+  border-top: 1px solid var(--gemboss-border, #e3e3e3);
+  background: transparent;
+  color: var(--gemboss-text-subdued, #616161);
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+}
+.gemboss-md-codemore:hover { background: rgba(0, 0, 0, 0.03); }
+/* ── The payload, live, in the chat ──────────────────────────────────────────────────────────────
+   A trace row said `apply_section_edit(section_id:"hero")` — that something happened, and nothing about
+   what. This is what. Open by default: folding it would put the answer back behind a click. */
+.gemboss-narr-row.source { align-items: flex-start; }
+.gemboss-narr-source { min-width: 0; flex: 1; }
+.gemboss-narr-source-head { font-size: 11px; color: var(--gemboss-text-muted, #686b71); margin-bottom: 4px; }
+.gemboss-narr-source-head code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.gemboss-narr-source-code {
+  margin: 0; padding: 8px 12px; border-radius: 8px; max-height: 220px; overflow: auto;
+  background: var(--gemboss-primary-soft, #f2f3f5); border: 1px solid var(--gemboss-divider, #e5e7ea);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--gemboss-fs-micro); line-height: 17px;
+  white-space: pre; tab-size: 2;
+}
+/* Light-ground syntax colours for the payload rows (the code-highlight.ts `c-*` spans). Contrast checked
+   against #fff: every one clears 4.5:1. (The page editor's Code tab shared them until it was removed, #2651.) */
+.gemboss-narr-source-code .c-com { color: #6a7a86; font-style: italic; }
+.gemboss-narr-source-code .c-str { color: #9a3412; }
+.gemboss-narr-source-code .c-num { color: #1d6fa5; }
+.gemboss-narr-source-code .c-kw  { color: #7c3aed; font-weight: 600; }
+.gemboss-narr-source-code .c-key { color: #0b6b3a; }
+.gemboss-narr-source-code .c-tag { color: #b0197a; }
+.gemboss-narr-source-code .c-attr{ color: #7c3aed; }
+.gemboss-narr-source-code .c-pun { color: #6a6d73; }
+@media (max-width: 520px) {
+  .gemboss-narr-source-code { max-height: 160px; font-size: 11px; }
+}
+/* A checklist row's box IS its marker; the dot column stays for alignment and shows nothing. */
+.gemboss-narr-dot-quiet { visibility: hidden; }

package/src/gemboss-field.css

@@ -30,6 +30,10 @@
   border: 1px solid var(--p-color-input-border, var(--gemboss-field-line));
   border-radius: var(--p-border-radius-200, 8px);
 }
+/* WebKit draws `input[type=search]` as `-webkit-appearance: searchfield`: its own padding and rounding, so in Safari
+   (macOS and iOS, the platform the 16px rule exists for) a search box did not match the fields beside it. Same box for
+   every text type; the clear button stays. (GemFactory #98 review, 01/10/2026.) */
+input[type="search"]:is(.gemboss-field, .gemboss-field__bare) { -webkit-appearance: none; appearance: none; }
 .gemboss-field::placeholder { color: var(--p-color-text-secondary, var(--gemboss-field-placeholder)); }
 /* A NARROW field — the inspector's T/R/B/L boxes and its number spinners are 40-68px wide, and the
    shared 12px side padding left 38px of content box for a three-digit value (measured in Chromium:

package/src/icons.tsx

@@ -54,6 +54,7 @@ const P = {
   check: <path d="M4 10.5 8 14.5 16 5.5" />,
   plus: <path d="M10 4v12M4 10h12" />,
   close: <path d="M5 5l10 10M15 5 5 15" />,
+  more: <><circle cx="4.5" cy="10" r="1" /><circle cx="10" cy="10" r="1" /><circle cx="15.5" cy="10" r="1" /></>,
   utensils: <><path d="M6 3v5a2 2 0 0 0 4 0V3M8 3v14" /><path d="M15 3c-1.6 1.4-2.5 3.6-2.5 6.5H15V17" /></>,
   signOut: <path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8" />,
 } satisfies Record<string, React.ReactNode>;

package/src/index.ts

@@ -6,4 +6,5 @@ export { GemMark } from "./GemMark";
 export { AuthError, AuthField, AuthFoot, AuthForm, AuthHelp, AuthLayout, PasswordField, AuthSubmit } from "./auth";
 export { BrandLockup } from "./brand";
 export { AccountMenu, AccountMenuItem, initialsOf } from "./account";
+export { Menu, MenuItem, MenuSeparator } from "./menu";
 export { Icon, ICON_NAMES, type IconName } from "./icons";

package/src/kit-plain.css

@@ -0,0 +1,110 @@
+/* kit-plain.css — kit primitives that only the NON-React surfaces use (GemFactory, gemcare, gempress write the
+   markup by hand). They ship inside gemboss-ui.css (scripts/build-css.mjs `own`), but the admin does NOT import
+   this file: `ui.css` is loaded by the admin's root layout, so every rule there is paid on every admin screen,
+   and adding these to it pushed the admin shell 0.2 KB over its first-load budget (CI of #3591, 01/10/2026).
+   The admin has Polaris for menus, checkboxes and description lists. */
+
+/* ── Icon button · Menu · Key-value list ──────────────────────────────────────
+   Added 01/10/2026 for GemFactory's item dialog, which had seven actions in one header row; the
+   secondary five now sit behind one "⋯" button. Plain CSS, same contract as the tabs and tables in ui.css.
+
+   Icon button: `<button class="ui-btn ui-btn--icon" aria-label="…"><svg…></button>` — square, the
+   label is REQUIRED (there is no text for a screen reader to read otherwise).
+
+   Menu: a `<details>` so it opens with no script. `<details class="ui-menu ui-menu--end">
+   <summary class="ui-btn ui-btn--icon" aria-label="More actions">…</summary><div class="ui-menu__list">
+   <button class="ui-menu__item">Copy #12<span class="ui-menu__hint">for Claude Code</span></button>
+   <hr class="ui-menu__sep"><button class="ui-menu__item ui-menu__item--danger">Delete…</button></div>
+   </details>`. `--end` aligns the list to the right edge of its button. Closing on an outside click,
+   on an item, and on Escape is the page's job (a few lines; GemFactory's ui-kit.mjs has them).
+   Items are 44px under EVERY pointer, not only coarse: they touch each other (0px apart), and §9.1
+   only allows a gap under 8px between targets that are already 44px.
+
+   Key-value list: `<dl class="ui-kv"><dt>Owner</dt><dd>Lily</dd>…</dl>` — label column sized to
+   its longest label, value column takes the rest and wraps long keys and URLs. */
+.ui-btn--icon { flex: none; width: var(--ui-control-h); padding: 0; }
+.ui-btn--icon.ui-btn--sm { width: 28px; }
+.ui-btn--icon svg { width: 18px; height: 18px; }
+/* Menu: the SURFACE is the shell's `gemboss-popover-surface` and the rows are the account menu's row (shell.css
+   declares `.gemboss-account-menu-item, .ui-menu__item` together), so a kit menu and the account menu on one page
+   look the same and a fix to one reaches the other (§9.3). Markup: `<div class="ui-menu__list gemboss-popover-surface">`.
+   Here: only placement, the hint, the separator and the disabled state. */
+.ui-menu { position: relative; display: inline-block; }
+.ui-menu > summary { list-style: none; cursor: pointer; }
+.ui-menu > summary::-webkit-details-marker { display: none; }
+.ui-menu__list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; display: grid; min-width: 220px; padding: var(--ui-space-1); box-sizing: border-box; }
+.ui-menu--end .ui-menu__list { left: auto; right: 0; }
+.ui-menu__item { display: flex; align-items: center; gap: var(--ui-space-2); white-space: nowrap; border-radius: var(--ui-radius-sm); }
+.ui-menu__item:is([disabled], [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; pointer-events: none; }
+.ui-menu__hint { margin-left: auto; padding-left: var(--ui-space-4); color: var(--ui-text-muted); font-size: var(--ui-fs-caption); }
+.ui-menu__sep { height: 1px; margin: var(--ui-space-1) 0; border: 0; background: var(--ui-border); }
+/* Checkbox: the LABEL is the target; disabled turns both the label and the box to not-allowed. Focus ring in the
+   kit's own token (no --p-* here: this file is appended after the export's Polaris resolver runs). */
+.ui-check { display: inline-flex; align-items: center; gap: var(--ui-space-2); min-height: 44px; cursor: pointer; font-size: var(--ui-fs-body); color: var(--ui-text); }
+.ui-check > input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ui-accent); cursor: inherit; }
+.ui-check > input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
+.ui-check:has(> input:disabled) { opacity: .5; cursor: not-allowed; }
+.ui-label { display: block; margin: 0 0 var(--ui-space-1); font-size: var(--ui-fs-caption); font-weight: 600; color: var(--ui-text-muted); }
+.ui-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--ui-space-2) var(--ui-space-4); margin: 0; font-size: var(--ui-fs-body); }
+.ui-kv > dt { color: var(--ui-text-muted); }
+.ui-kv > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ui-text); }
+
+/* Under a thumb the icon-only button is 44 WIDE as well (the kit's coarse block already raises every .ui-btn to 44 tall). */
+@media (pointer: coarse) { .ui-btn--icon:not(.ui-btn--sm) { min-width: 44px; } }
+/* …and at phone WIDTH, as gemboss-field does: a desktop browser at 320px still reports pointer: fine. */
+@media (max-width: 47.9975em) { .ui-btn--icon:not(.ui-btn--sm) { min-width: 44px; min-height: 44px; } }
+
+/* ── Link · Media card (02/10/2026) ──────────────────────────────────────────
+   GemFactory, gemcare and gempress left text links in the browser's default blue-and-purple, and each drew its own
+   thumbnail card. The admin uses Polaris' Link and has no media card, so both live here, not in ui.css.
+
+   Link: `<a class="ui-link" href>` for a link inside text. Iris (--gemboss-accent-strong, 6.2:1 on white), underlined
+   so it is not told by colour alone (WCAG 1.4.1); visited looks the same (these are tools, not articles). Markdown or
+   other generated HTML you cannot add classes to: wrap it in `.ui-prose` and its bare `<a>` get the same look.
+
+   Media card: `<article class="ui-card ui-card--media"><a|button class="ui-card__media"><img alt=""></…>
+   <div class="ui-card__body">…</div><div class="ui-card__foot">…</div></article>`. The picture is 16:10 and
+   cropped to fill; the card has no padding of its own, the body and foot do. */
+.ui-link,
+.ui-prose a:not([class]) {
+  color: var(--gemboss-accent-strong, #3a44de);
+  text-decoration: underline;
+  text-decoration-thickness: from-font;
+  text-underline-offset: 2px;
+}
+.ui-link:visited,
+.ui-prose a:not([class]):visited { color: var(--gemboss-accent-strong, #3a44de); }
+.ui-link:hover,
+.ui-prose a:not([class]):hover { color: var(--gemboss-accent, #5661f5); text-decoration-thickness: 2px; }
+.ui-link:focus-visible,
+.ui-prose a:not([class]):focus-visible { outline: 2px solid var(--ui-focus, #005bd3); outline-offset: 2px; border-radius: 2px; }
+
+.ui-card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
+.ui-card__media {
+  display: block; width: 100%; aspect-ratio: 16 / 10; margin: 0; padding: 0; border: 0;
+  border-bottom: 1px solid var(--ui-border); background: var(--ui-surface-2); overflow: hidden; color: inherit;
+}
+.ui-card__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
+button.ui-card__media, a.ui-card__media { cursor: pointer; }
+.ui-card__media:focus-visible { outline: 2px solid var(--ui-focus, #005bd3); outline-offset: -2px; }
+/* justify-items: start: a tag or a button in the body keeps its own width instead of stretching across the card. */
+.ui-card__body { display: grid; justify-items: start; gap: var(--ui-space-2, 8px); padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px); min-width: 0; }
+.ui-card__foot {
+  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ui-space-2, 8px);
+  margin-top: auto; padding: 0 var(--ui-space-4, 16px) var(--ui-space-3, 12px);
+  color: var(--ui-text-muted); font-size: var(--ui-fs-caption, 13px);
+}
+
+/* Popup body and foot: `<div class="ui-modal__body">…</div><div class="ui-modal__foot"><button class="ui-btn">…</button></div>`.
+   The admin's Modal.tsx pads its own children, so ui.css never styled these; every non-React surface padded them by
+   hand (GemFactory: 16/20 and a hairline above the actions). kit-plain.js's openModal writes exactly this shape. */
+.ui-modal__body { padding: 16px 20px; }
+.ui-modal__foot {
+  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
+  padding: 12px 20px; border-top: 1px solid var(--ui-border);
+}
+/* A popup taller than the screen: the body scrolls, the head and foot stay, so the actions are always reachable
+   (320×568 with a long form put Huỷ/Xoá below the fold, unreachable under the locked page; review #3633). */
+.ui-overlay > .ui-modal { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }
+.ui-modal > .ui-modal__head, .ui-modal > .ui-modal__foot { flex: none; }
+.ui-modal > .ui-modal__body { flex: 1 1 auto; min-height: 0; overflow: auto; }