aimeat 1.16.2 → 1.18.0

package/dist/public/components/DataTable.js

@@ -0,0 +1,57 @@
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+
+/**
+ * @file DataTable.js
+ * @description Canonical generic table primitive — renders a plain
+ *   `<table class="data-table ${className}">` (optionally inside a `.scrollable`
+ *   wrapper) backed by the shared `.data-table` block in theme.css, so the table
+ *   look (header row, cell padding, borders, hover) is one tokenized source of
+ *   truth that flips correctly in dark mode. Unlike the admin `DataTable` (which
+ *   wraps this in an `.adm-card`), this component renders NO card/container — the
+ *   caller supplies its own wrapper (`.card`, `.adm-card`, etc.).
+ * @structure DataTable({ headers, rows, scroll, className })
+ *   - headers: array of column header cells (string or VNode)
+ *   - rows: array of rows; each row is an array of cells. A cell may be:
+ *       • a primitive/VNode → rendered as plain `<td>`
+ *       • `{ text, mono?, title?, _html? }` → `<td class="mono"? title=...>`;
+ *         when `_html: true`, `text` is rendered as raw HTML (see SECURITY).
+ *   - scroll: when truthy, wraps the table in `<div class="scrollable">`
+ *   - className: extra class(es) appended to `.data-table` (e.g. for column-width
+ *     or per-view tweaks)
+ * @usage
+ *   import { DataTable } from '/components/index.js';
+ *   html`<div class="card"><${DataTable} headers=${['Key','Value']} rows=${rows} /></div>`
+ *
+ * SECURITY: When a cell object has `_html: true`, `cell.text` is rendered as raw
+ * HTML via dangerouslySetInnerHTML. Callers MUST ensure `cell.text` is sanitized
+ * (use escHtml() for any user-generated content). Only use `_html` for trusted,
+ * server-generated markup like badges.
+ *
+ * @version-history
+ *   v1.0.0 — 2026-06-02 — Component unification (#13): created canonical generic
+ *     DataTable (same _html/mono cell protocol as admin's), backing the shared
+ *     .data-table CSS. The admin shared.js DataTable now wraps this in .adm-card.
+ */
+export function DataTable({ headers, rows, scroll, className }) {
+  const cls = `data-table${className ? ` ${className}` : ''}`;
+  const table = html`<table class=${cls}>
+    <thead><tr>${headers.map(hd => html`<th>${hd}</th>`)}</tr></thead>
+    <tbody>
+      ${rows.map(row => html`<tr>
+        ${row.map(cell => {
+          if (cell && typeof cell === 'object' && cell._html) {
+            return html`<td class=${cell.mono ? 'mono' : ''} title=${cell.title || ''}
+              dangerouslySetInnerHTML=${{ __html: cell.text }}></td>`;
+          }
+          if (cell && typeof cell === 'object' && cell.mono) {
+            return html`<td class="mono" title=${cell.title || ''}>${cell.text}</td>`;
+          }
+          return html`<td>${cell}</td>`;
+        })}
+      </tr>`)}
+    </tbody>
+  </table>`;
+  return scroll ? html`<div class="scrollable">${table}</div>` : table;
+}

package/dist/public/components/EmptyState.js

@@ -0,0 +1,28 @@
+/**
+ * @file EmptyState.js
+ * @description Canonical empty-state placeholder — a centered muted message with an
+ *   optional icon. Replaces the per-view clones (pf-empty / mk-empty / hb-empty /
+ *   agd-empty / pkg-empty …) and the bare `<div class="empty">` scattered across the
+ *   frontend. Renders the themed `.empty` class so it flips with dark/light mode.
+ * @structure EmptyState({ icon?, text, children? })
+ * @usage import { EmptyState } from '/components/EmptyState.js';
+ *   html`<${EmptyState} text=${t('x.empty')} />`
+ *   html`<${EmptyState} icon="🎯" text=${t('x.noMatches')} />`
+ * @version-history
+ *   v1.0.0 — 2026-06-02 — Component unification (#9): single empty-state primitive
+ *     (themed .empty + optional .empty-icon); admin Empty() delegates to it.
+ */
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+
+/**
+ * EmptyState — centered muted placeholder.
+ * @param {{ icon?: string, text?: any, children?: any }} props
+ */
+export function EmptyState({ icon, text, children }) {
+  return html`<div class="empty">
+    ${icon ? html`<span class="empty-icon">${icon}</span>` : ''}
+    ${text != null ? text : children}
+  </div>`;
+}

package/dist/public/components/KeyValueRow.js

@@ -0,0 +1,37 @@
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+
+/**
+ * @file KeyValueRow.js
+ * @description Canonical key/value detail row — a label/value pair laid out as
+ *   flex space-between with a muted label and an emphasized value, separated by
+ *   a subtle bottom border. Backed by `.kv-row` / `.kv-label` / `.kv-value` in
+ *   theme.css; all colors come from theme tokens so it flips correctly in dark
+ *   mode. Consolidates the common label+value-pair shape (the admin .adm-erow /
+ *   .adm-hrow and the profile .pf-agd-info-row families). The existing per-view
+ *   classes are intentionally left in place where their look differs (admin rows
+ *   are mono/bordered, the profile agent-detail rows are borderless) — use this
+ *   for NEW detail lists rather than reinventing the markup.
+ * @structure KeyValueRow({ label, value, badge?, mono? }) — renders
+ *   `<div class="kv-row"><span class="kv-label">${label}</span>
+ *    <span class="kv-value[ mono]">${value | badge}</span></div>`.
+ *   - `mono` — render the value in the monospace font (for ids, hashes, amounts).
+ *   - `badge` — a semantic badge tone (success|warn|danger|info); when set, the
+ *     value is wrapped in a `.badge badge-${badge}` chip instead of plain text.
+ * @usage
+ *   import { KeyValueRow } from '/components/index.js';
+ *   html`<${KeyValueRow} label=${t('field.id')} value=${id} mono />`
+ *   html`<${KeyValueRow} label=${t('field.status')} value=${status} badge="success" />`
+ * @version-history
+ *   v1.0.0 — 2026-06-02 — Component unification (#21): created canonical
+ *     key/value detail row backed by .kv-row in theme.css.
+ */
+export function KeyValueRow({ label, value, badge, mono }) {
+  return html`<div class="kv-row">
+    <span class="kv-label">${label}</span>
+    <span class="kv-value${mono ? ' mono' : ''}">${
+      badge ? html`<span class="badge badge-${badge}">${value}</span>` : value
+    }</span>
+  </div>`;
+}

package/dist/public/components/Modal.js

@@ -11,6 +11,13 @@
  *   v1.0.0 — 2026-03-10 — Initial Modal component
  *   v1.1.0 — 2026-03-14 — Add ConfirmDialog with danger variant
  *   v1.2.0 — 2026-03-16 — Add useConfirm hook for easy confirm() replacement
+ *   v1.3.0 — 2026-06-02 — Fix: memoise useConfirm's ConfirmUI (useCallback) so it
+ *     keeps a stable component identity. Previously it was redefined every render,
+ *     so any re-render of the host (e.g. the agents list polling) unmounted +
+ *     remounted the open dialog, causing it to strobe/flicker.
+ *   v1.4.0 — 2026-06-02 — Add optional `className` prop on Modal (applied to the
+ *     .modal box) so views can pass width modifiers (e.g. scope-modal,
+ *     ext-modal-narrow) when migrating their inline overlays to <Modal> (#2).
  */
 import { h } from 'preact';
 import { useState, useEffect, useCallback } from 'preact/hooks';
@@ -20,9 +27,10 @@ import { t } from '/js/i18n.js';
 
 /**
  * Modal — overlay dialog with close on Escape and backdrop click.
- * @param {{ open: boolean, onClose: () => void, title?: string, children: any }} props
+ * @param {{ open: boolean, onClose: () => void, title?: string, className?: string, children: any }} props
+ *   - className: optional extra class on the .modal box (e.g. a width modifier)
  */
-export function Modal({ open, onClose, title, children }) {
+export function Modal({ open, onClose, title, className = '', children }) {
   useEffect(() => {
     if (!open) return;
     const handler = (e) => { if (e.key === 'Escape') onClose(); };
@@ -37,7 +45,7 @@ export function Modal({ open, onClose, title, children }) {
   if (!open) return null;
   return html`
     <div class="modal-overlay" onClick=${onBackdrop}>
-      <div class="modal">
+      <div class="modal ${className}">
         <div class="modal-header">
           ${title && html`<h3>${title}</h3>`}
           <button class="modal-close" onClick=${onClose}>✕</button>
@@ -103,7 +111,16 @@ export function useConfirm() {
 
   const close = useCallback(() => setState(null), []);
 
-  function ConfirmUI() {
+  // ConfirmUI MUST keep a stable identity across unrelated re-renders of the
+  // host component (e.g. the agents list polls every ~5-10s and refreshes on
+  // SSE live-updates while a delete confirm is open). When ConfirmUI was a plain
+  // function redefined on every render, Preact saw a new component *type* each
+  // time and unmounted+remounted the whole dialog — re-initialising its
+  // backdrop-filter overlay and making it strobe (appear/disappear rapidly
+  // during a burst of re-renders). Memoising on [state, close] means the
+  // reference only changes when the dialog actually opens/closes, so polling no
+  // longer remounts it.
+  const ConfirmUI = useCallback(() => {
     if (!state) return null;
     return html`<${ConfirmDialog}
       open=${true}
@@ -115,7 +132,7 @@ export function useConfirm() {
       cancelLabel=${state.cancelLabel}
       danger=${state.danger}
     />`;
-  }
+  }, [state, close]);
 
   return { confirm, ConfirmUI };
 }

package/dist/public/components/Pagination.js

@@ -0,0 +1,70 @@
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+
+/**
+ * @file Pagination.js
+ * @description Canonical pagination primitives backed by `.pagination` /
+ *   `.load-more` in theme.css. Consolidates the near-identical per-view
+ *   prev/page/next clones (.adm-mem-pagination, and the prev/"Page X"/next
+ *   shape of .mk-pagination) and the "Load more" button pattern. All colors
+ *   come from theme tokens so both flip correctly in dark mode.
+ *
+ *   Two exports:
+ *   - `Pagination` — a prev / "Page X / Y" / next control (arrow buttons with a
+ *     disabled state at the ends). Matches the existing admin pagination shape.
+ *     Does NOT render numbered page buttons (the .hb-pagination numbered variant
+ *     is intentionally left in place — different UI).
+ *   - `LoadMore` — a centered "load more" button (themed `.load-more` wrapper +
+ *     canonical `.btn-outline`), with an optional loading state.
+ * @structure
+ *   Pagination({ page, totalPages, onPage, prevLabel?, nextLabel?, pageLabel? })
+ *     — `page` is 1-based; `onPage(n)` fires with the requested page. Buttons
+ *     auto-disable at the first/last page. `pageLabel` overrides the default
+ *     "{page} / {totalPages}" middle text (pass a string or node).
+ *   LoadMore({ onMore, loading?, label? })
+ *     — renders a centered `.btn-outline`; disabled + shows `label` unchanged
+ *     while `loading` is truthy (caller supplies any "loading…" text itself).
+ * @usage
+ *   import { Pagination, LoadMore } from '/components/index.js';
+ *   html`<${Pagination} page=${page} totalPages=${pages} onPage=${go}
+ *     prevLabel=${t('common.prev')} nextLabel=${t('common.next')} />`
+ *   html`<${LoadMore} onMore=${loadMore} loading=${loading}
+ *     label=${t('pkv.loadMore')} />`
+ * @version-history
+ *   v1.0.0 — 2026-06-02 — Component unification (#17): canonical Pagination +
+ *     LoadMore, backed by .pagination / .load-more in theme.css.
+ */
+
+/**
+ * Pagination — prev / "Page X / Y" / next control with arrow buttons.
+ * @param {{ page: number, totalPages: number, onPage: (n:number)=>void,
+ *   prevLabel?: string, nextLabel?: string, pageLabel?: any }} props
+ */
+export function Pagination({ page, totalPages, onPage, prevLabel, nextLabel, pageLabel }) {
+  return html`<div class="pagination">
+    <button
+      class="btn-outline btn-sm"
+      disabled=${page <= 1}
+      onClick=${() => onPage(page - 1)}
+    >← ${prevLabel ?? 'Prev'}</button>
+    <span class="pagination-info">${pageLabel ?? html`${page} / ${totalPages}`}</span>
+    <button
+      class="btn-outline btn-sm"
+      disabled=${page >= totalPages}
+      onClick=${() => onPage(page + 1)}
+    >${nextLabel ?? 'Next'} →</button>
+  </div>`;
+}
+
+/**
+ * LoadMore — centered "load more" button.
+ * @param {{ onMore: ()=>void, loading?: boolean, label?: any }} props
+ */
+export function LoadMore({ onMore, loading, label }) {
+  return html`<div class="load-more">
+    <button class="btn-outline" disabled=${!!loading} onClick=${onMore}>
+      ${label ?? 'Load more'}
+    </button>
+  </div>`;
+}

package/dist/public/components/SearchBar.js

@@ -0,0 +1,44 @@
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+
+/**
+ * @file SearchBar.js
+ * @description Canonical search-bar shell — a flex row wrapping a single
+ *   `type="search"` input that reuses the canonical `.input-field` (theme.css)
+ *   for its styling. Provides one place to define the search-toolbar layout so
+ *   per-view hand-rolled search inputs (.pkv-search, .cap-search-input,
+ *   .pf-agd-search-input, the profile .search-bar + .input-field combo) can
+ *   converge. The shell layout lives in `.search-bar` / `.search-bar-input`
+ *   (theme.css); all input visuals (border, focus ring, placeholder, dark-mode
+ *   flip) come from `.input-field`, so colors are fully token-driven.
+ * @structure SearchBar({ value, onInput, placeholder?, onSubmit?, ariaLabel? }) —
+ *   renders `<div class="search-bar"><input class="input-field search-bar-input"
+ *   type="search" .../></div>`. When `onSubmit` is supplied, pressing Enter calls
+ *   `onSubmit(currentValue)`.
+ * @usage
+ *   import { SearchBar } from '/components/index.js';
+ *   html`<${SearchBar} value=${q} onInput=${e => setQ(e.target.value)}
+ *        placeholder=${t('common.search')} />`
+ * @version-history
+ *   v1.0.0 — 2026-06-02 — Component unification (#24): created canonical
+ *     search-bar shell backed by .search-bar / .search-bar-input in theme.css.
+ */
+export function SearchBar({ value, onInput, placeholder, onSubmit, ariaLabel }) {
+  const onKeyDown = onSubmit
+    ? (e) => { if (e.key === 'Enter') onSubmit(e.target.value); }
+    : undefined;
+  return html`
+    <div class="search-bar">
+      <input
+        class="input-field search-bar-input"
+        type="search"
+        placeholder=${placeholder}
+        aria-label=${ariaLabel || placeholder}
+        value=${value}
+        onInput=${onInput}
+        onKeyDown=${onKeyDown}
+      />
+    </div>
+  `;
+}

package/dist/public/components/StatusDot.js

@@ -0,0 +1,29 @@
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+
+/**
+ * @file StatusDot.js
+ * @description Canonical status-indicator dot — a small colored circle whose
+ *   color is driven by a semantic status token (online/healthy → success,
+ *   syncing/pending → warn, error/offline → danger, idle/muted → text-muted).
+ *   Consolidates the per-view bespoke dots (.live-dot, .peer-dot, .pn-status-dot,
+ *   .ext-status-dot, .dv-dot) into one component backed by `.status-dot` in
+ *   theme.css. All colors come from theme tokens so the dot flips correctly in
+ *   dark mode.
+ * @structure StatusDot({ status, title? }) — renders
+ *   `<span class="status-dot status-dot--${status}" title=${title}></span>`.
+ *   Recognized statuses: online, active, healthy, live (→ success);
+ *   warn, syncing, pending (→ warn); error, offline, down (→ danger);
+ *   idle, muted (→ text-muted). `live` additionally pulses.
+ * @usage
+ *   import { StatusDot } from '/components/index.js';
+ *   html`<${StatusDot} status="online" title=${t('...')} />`
+ * @version-history
+ *   v1.0.0 — 2026-06-02 — Component unification (#11): created canonical
+ *     status-dot, replacing .live-dot / .peer-dot / .pn-status-dot /
+ *     .ext-status-dot / .dv-dot bespoke classes.
+ */
+export function StatusDot({ status, title }) {
+  return html`<span class="status-dot status-dot--${status}" title=${title}></span>`;
+}

package/dist/public/components/TagList.js

@@ -0,0 +1,53 @@
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+
+/**
+ * @file TagList.js
+ * @description Canonical tag/chip row — renders a flex row of tag chips using the
+ *   shared `.tag-cloud` + `.tag-pill` classes from css/components/tags.css, with an
+ *   optional `+N` overflow pill when the list exceeds `max`. Consolidates the many
+ *   per-view bespoke tag clones (mk-tag, hb-tag, pkv-tag, pkg-tag, kpkg-tag,
+ *   cap-tag, file-tag, etc.) into one component whose colors come entirely from
+ *   theme tokens, so chips flip correctly in dark mode.
+ * @structure TagList({ tags, max?, prefix?, onTag? }) — renders
+ *   `<div class="tag-cloud">` containing one `<span class="tag-pill">` per tag.
+ *   - `tags`  — array of strings (falsy/empty → renders nothing).
+ *   - `max`   — when set and `tags.length > max`, only the first `max` chips are
+ *               shown followed by a `+N` overflow pill.
+ *   - `prefix`— optional decorator wrapping each label (e.g. `'#'` → `#foo`).
+ *   - `onTag` — optional click handler `(tag) => void`; when provided chips get a
+ *               `tag-pill--clickable` flag and an onClick wiring.
+ * @usage
+ *   import { TagList } from '/components/index.js';
+ *   html`<${TagList} tags=${manifest.tags} max=${5} />`
+ *   html`<${TagList} tags=${interests} onTag=${name => goTo('search', { interest: name })} />`
+ * @version-history
+ *   v1.0.0 — 2026-06-02 — Component unification (#16): created canonical tag/chip
+ *     list backed by .tag-pill / .tag-cloud, replacing scattered bespoke tag CSS
+ *     clones and a +N overflow pattern.
+ */
+export function TagList({ tags, max, prefix = '', onTag }) {
+  const list = Array.isArray(tags) ? tags : [];
+  if (list.length === 0) return null;
+
+  const limited = typeof max === 'number' && list.length > max;
+  const shown = limited ? list.slice(0, max) : list;
+  const overflow = limited ? list.length - max : 0;
+  const clickable = typeof onTag === 'function';
+
+  const chipClass = clickable ? 'tag-pill tag-pill--clickable' : 'tag-pill';
+
+  return html`
+    <div class="tag-cloud">
+      ${shown.map((tag) => html`
+        <span
+          key=${tag}
+          class=${chipClass}
+          onClick=${clickable ? () => onTag(tag) : undefined}
+        >${prefix}${tag}</span>
+      `)}
+      ${overflow > 0 && html`<span class="tag-pill tag-pill--overflow">+${overflow}</span>`}
+    </div>
+  `;
+}

package/dist/public/components/ToggleSwitch.js

@@ -0,0 +1,28 @@
+/**
+ * @file ToggleSwitch.js
+ * @description Canonical on/off toggle switch (checkbox styled as a sliding pill).
+ *   Relocated from profile/shared.js (where it was a mis-placed generic primitive)
+ *   and de-`pf-`-prefixed. Renders the themed .toggle* classes so it flips with
+ *   dark/light mode. profile/shared.js re-exports it for back-compat.
+ * @structure ToggleSwitch({ checked, onChange, label? })
+ * @usage import { ToggleSwitch } from '/components/ToggleSwitch.js';
+ *   html`<${ToggleSwitch} checked=${on} onChange=${e => setOn(e.target.checked)} label=${t('x')} />`
+ * @version-history
+ *   v1.0.0 — 2026-06-02 — Component unification (#14): promote the toggle to /components,
+ *     tokenize the off-state track (#D1D5DB → var(--border)) for dark mode.
+ */
+import { h } from 'preact';
+import htm from 'htm';
+const html = htm.bind(h);
+
+/**
+ * ToggleSwitch — accessible checkbox rendered as a sliding pill.
+ * @param {{ checked: boolean, onChange: (e: Event) => void, label?: any }} props
+ */
+export function ToggleSwitch({ checked, onChange, label }) {
+  return html`<label class="toggle">
+    <input type="checkbox" checked=${checked} onChange=${onChange} class="toggle-input" />
+    <span class="toggle-slider"></span>
+    ${label && html`<span class="toggle-label">${label}</span>`}
+  </label>`;
+}

package/dist/public/components/index.js

@@ -1,8 +1,48 @@
+/**
+ * @file index.js
+ * @description Barrel re-export for the canonical design-system primitives in
+ *   /components. Prefer importing shared primitives from here (e.g.
+ *   `import { Modal, ConfirmDialog, Markdown } from '/components/index.js'`)
+ *   over deep-importing the individual component files.
+ * @version-history
+ *   v1.8.0 — 2026-06-02 — Component unification (#23): export Collapsible — the
+ *     canonical expand/collapse (chevron) section consolidating the per-view
+ *     .expand-btn + .pf-chevron / .scope-advanced-toggle / .pkv-entry-arrow toggles.
+ *   v1.7.0 — 2026-06-02 — Component unification (#13): export DataTable — the
+ *     canonical generic table primitive (plain `<table class="data-table">`,
+ *     same _html/mono cell protocol as admin's, no card wrapper) backing the
+ *     shared .data-table CSS. Admin's shared.js DataTable now wraps this.
+ *   v1.6.0 — 2026-06-02 — Component unification (#24): export SearchBar — the
+ *     canonical search-bar shell (`type="search"` input on `.input-field`),
+ *     consolidating the per-view hand-rolled search inputs.
+ *   v1.5.0 — 2026-06-02 — Component unification (#21): export KeyValueRow — the
+ *     canonical label/value detail row backed by .kv-row in theme.css.
+ *   v1.4.0 — 2026-06-02 — Component unification (#17): export Pagination + LoadMore
+ *     (canonical prev/page/next control and centered load-more button).
+ *   v1.3.0 — 2026-06-02 — Component unification (#16): export TagList — the
+ *     canonical tag/chip row (with `+N` overflow) consolidating the per-view
+ *     bespoke tag CSS clones.
+ *   v1.2.0 — 2026-06-02 — Component unification (#11): export StatusDot — the
+ *     canonical status-indicator dot consolidating the per-view bespoke dots.
+ *   v1.1.0 — 2026-06-02 — Component unification (#28): export ConfirmDialog
+ *     (from Modal.js) and Markdown + sanitizeHref (from Markdown.js), which
+ *     were previously reachable only via deep import.
+ */
 export { Alert } from './Alert.js';
 export { useToast } from './Toast.js';
 export { Spinner } from './Spinner.js';
-export { Modal, useConfirm } from './Modal.js';
+export { EmptyState } from './EmptyState.js';
+export { ToggleSwitch } from './ToggleSwitch.js';
+export { Modal, ConfirmDialog, useConfirm } from './Modal.js';
 export { CopyButton } from './CopyButton.js';
 export { FormField } from './FormField.js';
 export { Card } from './Card.js';
+export { StatusDot } from './StatusDot.js';
+export { TagList } from './TagList.js';
+export { Pagination, LoadMore } from './Pagination.js';
+export { KeyValueRow } from './KeyValueRow.js';
+export { SearchBar } from './SearchBar.js';
+export { DataTable } from './DataTable.js';
+export { Collapsible } from './Collapsible.js';
+export { Markdown, sanitizeHref } from './Markdown.js';
 export { useViewCSS } from './useViewCSS.js';

package/dist/public/css/components/tags.css

@@ -1,3 +1,18 @@
+/**
+ * @file tags.css
+ * @description Shared tag/chip styles — the canonical `.tag-pill` / `.tag-cloud` /
+ *   `.tag-editor` classes backing the TagList component (/components/TagList.js).
+ *   All colors come from theme tokens so chips flip correctly in dark mode.
+ * @structure .tag-cloud (flex row) · .tag-pill (chip, +active/clear/clickable/
+ *   overflow modifiers) · .tag-editor (+pills/input) — the editable variant.
+ * @usage Loaded via useViewCSS / view <link>; rendered by /components/TagList.js.
+ * @version-history
+ *   v1.1.0 — 2026-06-02 — Component unification (#16): add layout-only
+ *     .tag-pill--clickable / .tag-pill--overflow flags for TagList; add file
+ *     header. No color changes.
+ *   v1.0.0 — initial shared tag component styles.
+ */
+
 /* ── Shared Tag Components ── */
 
 .tag-cloud {
@@ -29,6 +44,15 @@
   border-color: var(--accent, #E8564A);
 }
 
+/* Layout-only modifiers — no color change vs. base .tag-pill. */
+.tag-pill--clickable {
+  cursor: pointer;
+}
+
+.tag-pill--overflow {
+  cursor: default;
+}
+
 .tag-clear {
   color: var(--text-dim, #6B7280);
   font-style: italic;

package/dist/public/css/style-testbed.css

@@ -0,0 +1,135 @@
+/*
+ * @file style-testbed.css
+ * @description Layout/chrome for the dev style-decision testbed
+ *   (style-testbed.html). All page chrome uses theme.css tokens so it flips
+ *   with the light/dark toggle. The .stb-* prefix avoids colliding with the
+ *   real component classes being showcased. Critically, .stb-specimens.pf /
+ *   .stb-specimens.adm RESET the profile/admin container layout (max-width,
+ *   margin, padding) so those wrappers act purely as selector scopes for the
+ *   clone overrides without imposing their page-container geometry.
+ * @version-history
+ *   v1.0.0 — 2026-06-02 — Initial testbed layout
+ */
+
+.stb {
+  margin: 0;
+  padding: 0 0 280px;          /* leave room for the sticky output bar */
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font, system-ui, sans-serif);
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
+/* ── Header ── */
+.stb-header {
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-card);
+}
+.stb-header-row {
+  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
+}
+.stb-title { font-size: 1.25rem; font-weight: 800; margin: 0; }
+.stb-controls { display: flex; align-items: center; gap: 0.5rem; }
+.stb-theme-label { color: var(--text-dim); font-size: 0.8rem; }
+.stb-theme-btn {
+  padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
+  background: var(--bg); color: var(--text); cursor: pointer; font-size: 0.82rem;
+}
+.stb-theme-btn.stb-active { border-color: var(--accent); color: var(--accent); font-weight: 600; }
+.stb-intro { max-width: 1100px; margin: 0.75rem 0 0; color: var(--text); }
+.stb-intro.stb-muted { color: var(--text-dim); font-size: 0.82rem; }
+.stb code { font-family: var(--font-mono, monospace); font-size: 0.85em; background: var(--bg-dim); padding: 1px 5px; border-radius: 4px; }
+
+/* ── Families ── */
+.stb-main { padding: 0 1.5rem; }
+.stb-family { padding: 1.5rem 0; border-bottom: 1px dashed var(--border); }
+.stb-fam-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.25rem; }
+.stb-fam-desc { color: var(--text-dim); margin: 0 0 1rem; max-width: 1100px; font-size: 0.84rem; }
+
+/* ── Variant cards (canonical + each clone) ── */
+.stb-variant-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
+.stb-variant {
+  flex: 1 1 280px; min-width: 260px; max-width: 360px;
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  background: var(--bg-card); padding: 12px; display: flex; flex-direction: column; gap: 8px;
+}
+.stb-variant-row-stats .stb-variant { max-width: 300px; }
+.stb-canonical { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
+.stb-dead { opacity: 0.92; border-style: dashed; }
+
+.stb-variant-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 22px; }
+.stb-vname { font-size: 0.78rem; font-weight: 600; }
+.stb-tag {
+  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
+  padding: 1px 6px; border-radius: 10px; background: var(--bg-dim); color: var(--text-dim);
+  border: 1px solid var(--border); white-space: nowrap;
+}
+.stb-ref { background: var(--accent-subtle, var(--bg-dim)); color: var(--accent); border-color: var(--accent); }
+.stb-warn { background: var(--warn-bg, var(--bg-dim)); color: var(--warn-fg, var(--text)); border-color: var(--warn-border, var(--border)); }
+.stb-dead-tag { background: var(--danger-bg, var(--bg-dim)); color: var(--danger-fg, var(--text)); border-color: var(--danger-border, var(--border)); }
+.stb-admin-tag { background: var(--bg-dim); color: var(--text-dim); }
+
+/* Specimen containers */
+.stb-specimens {
+  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
+  padding: 10px; border-radius: var(--radius-sm); background: var(--bg);
+  border: 1px dashed var(--border); min-height: 48px;
+}
+.stb-specimens-col { flex-direction: column; align-items: stretch; }
+.stb-specimens-relative { position: relative; }
+.stb-mini-note { font-size: 0.7rem; color: var(--text-dim); }
+
+/* SCOPE RESET — keep .pf/.adm as selector scopes, drop their page-container layout */
+.stb-specimens.pf,
+.stb-specimens.adm {
+  max-width: none !important;
+  margin: 0 !important;
+  padding: 10px !important;
+  position: static !important;
+  z-index: auto !important;
+}
+
+.stb-diff { font-size: 0.72rem; color: var(--text-dim); margin: 0; }
+.stb-map { font-size: 0.72rem; color: var(--text); margin: 0; opacity: 0.9; }
+.stb-map code { font-size: 0.92em; }
+.stb-map.stb-map-warn { color: var(--warn-fg, var(--accent)); }
+
+/* Decision select (injected by JS into .stb-decide-wrap) */
+.stb-decide-wrap { margin-top: auto; }
+.stb-decide {
+  width: 100%; padding: 6px 8px; font-size: 0.78rem;
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  background: var(--bg); color: var(--text); cursor: pointer;
+}
+.stb-decide.stb-chosen { border-color: var(--accent); font-weight: 600; }
+
+/* Family note */
+.stb-note-wrap { display: block; margin-top: 12px; font-size: 0.8rem; color: var(--text-dim); }
+.stb-note {
+  width: 100%; max-width: 700px; margin-top: 4px; padding: 7px 10px; font-size: 0.82rem;
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  background: var(--bg); color: var(--text); display: block;
+}
+
+/* ── Sticky output bar ── */
+.stb-output-bar {
+  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
+  background: var(--bg-card); border-top: 2px solid var(--accent);
+  padding: 10px 1.5rem 12px; box-shadow: 0 -6px 20px rgba(0,0,0,0.18);
+}
+.stb-output-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+.stb-output-title { font-size: 0.85rem; font-weight: 700; }
+.stb-output-count { color: var(--text-dim); font-weight: 500; font-size: 0.78rem; }
+.stb-copy-btn {
+  padding: 6px 14px; border: none; border-radius: var(--radius-sm);
+  background: var(--accent); color: var(--on-inverted, #fff); cursor: pointer; font-size: 0.8rem; font-weight: 600;
+}
+.stb-copy-btn.stb-copied { background: var(--success-fg, #16a34a); }
+.stb-output {
+  width: 100%; box-sizing: border-box; resize: vertical;
+  font-family: var(--font-mono, monospace); font-size: 0.78rem; line-height: 1.4;
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+  background: var(--bg); color: var(--text); padding: 8px 10px;
+}