@teamblind-chorus/ui 1.0.1 → 1.2.0

package/dist/styles.css

@@ -222,6 +222,65 @@ textarea {
   opacity: 0;
 }
 
+/* ------------------------------------------------------------
+   ButtonGroup — Buttons composed as one block. The row carries the
+   family's 8px (`sys.layout.inline.md`) gap; an optional label stacks
+   above it. The docked form adds the footer-bar chrome (surface fill,
+   16px inset, upward `sys.elevation.sheet` shadow). See ButtonGroup.jsx
+   and schema/components/button/standard.md.
+   ------------------------------------------------------------ */
+.chorus-button-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.chorus-button-group__row {
+  display: flex;
+  gap: var(--sys-layout-inline-md);
+}
+
+/* Vertical inline group — full-width Buttons stacked (primary over
+   secondary). Same 8px gap, now on the block axis. */
+.chorus-button-group--vertical .chorus-button-group__row {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+/* Optional caption above the row — `sys.typo.body.md` (16px) in the muted
+   on-surface tone, centered, 16px (`sys.layout.stack.md`) above the row. An
+   inline <strong> reads as the emphasized value in the full-strength tone. */
+.chorus-button-group__label {
+  text-align: center;
+  margin-bottom: var(--sys-layout-stack-md);
+  color: var(--sys-color-onSurfaceVariant);
+  font-size: var(--sys-typo-body-md-size);
+  font-weight: var(--sys-typo-body-md-weight);
+  line-height: var(--sys-typo-body-md-line);
+  letter-spacing: var(--sys-typo-body-md-tracking);
+}
+
+.chorus-button-group__label strong {
+  color: var(--sys-color-onSurface);
+}
+
+/* Docked footer bar — full-bleed surface pinned to the bottom of the app.
+   No top stroke; the upward `sys.elevation.sheet` shadow (same one
+   BottomSheet / SideSheet cast) lifts it off the scrolling body so content
+   passing behind reads as a separate region. Renders in flow — PageShell
+   owns the pin, so the bar must NOT set position: sticky/fixed itself. */
+.chorus-button-group--docked {
+  background: var(--sys-color-surface);
+  padding: var(--sys-layout-container-md);
+  box-shadow: var(--sys-elevation-sheet);
+}
+
+/* In the docked bar the two Buttons split the row equally, so the consumer
+   drops in two `<Button size="large">` without wiring `fullWidth`. */
+.chorus-button-group--docked .chorus-button-group__row > * {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
 /* ============================================================
    FAB
 ============================================================ */
@@ -1057,6 +1116,8 @@ a.chorus-metadata__name:focus-visible {
    timestamp. Single text line — the row never wraps; identity links
    truncate before the timestamp gives way. */
 .chorus-metadata--compact .chorus-metadata__meta {
+  flex: 1 1 auto;
+  min-width: 0;
   flex-wrap: nowrap;
   white-space: nowrap;
 }
@@ -1074,6 +1135,9 @@ a.chorus-metadata__name:focus-visible {
 
 .chorus-metadata--compact .chorus-metadata__timestamp {
   flex: 0 0 auto;
+  /* No leading middot — pay the name↔time gap directly (matches the
+     Standard head's 8px primary-line gap). */
+  margin-inline-start: var(--sys-layout-inline-md);
 }
 
 /* ============================================================
@@ -1248,7 +1312,7 @@ a.chorus-metadata__name:focus-visible {
   gap: var(--sys-layout-inline-sm);
 }
 .chorus-feed__poll-glyph { color: var(--sys-color-brand); display: inline-flex; }
-.chorus-feed__poll-label { color: var(--sys-color-brand); font-weight: 700; }
+.chorus-feed__poll-label { color: var(--sys-color-brand); font-weight: var(--ref-fontWeight-bold); }
 
 /* Offer-evaluation tone — same chrome as the poll banner, but the
    leading glyph and label paint in `sys.color.success` (resolves to
@@ -1266,7 +1330,7 @@ a.chorus-metadata__name:focus-visible {
   background: var(--sys-color-outlineVariant);
 }
 .chorus-feed__poll-participants { color: var(--sys-color-onSurface); }
-.chorus-feed__poll-participants strong { font-weight: 700; }
+.chorus-feed__poll-participants strong { font-weight: var(--ref-fontWeight-bold); }
 
 .chorus-feed__citation {
   /* Citation is one bordered surface: the hero and the text column sit
@@ -1831,23 +1895,12 @@ a.chorus-metadata__name:focus-visible {
   color: currentColor;
 }
 
-.chorus-post-carousel__pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sys-layout-inline-sm);
-}
-
-.chorus-post-carousel__dot {
-  width: var(--ref-space-75);
-  height: var(--ref-space-75);
-  border-radius: var(--sys-radius-full);
-  background: var(--sys-color-outlineVariant);
-  display: block;
-}
-
-.chorus-post-carousel__dot--active {
-  background: var(--sys-color-onSurface);
+/* Pagination dots below the pager are the shared Pagination component
+   (.chorus-pagination) — no carousel-local dot rules. The component is
+   an intrinsic-width inline element, so the carousel (column flex,
+   align-items stretch) centers it itself. */
+.chorus-post-carousel > .chorus-pagination {
+  align-self: center;
 }
 
 /* ============================================================
@@ -2078,23 +2131,12 @@ a.chorus-metadata__name:focus-visible {
   justify-content: center;
 }
 
-.chorus-profile-carousel__pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sys-layout-inline-sm);
-}
-
-.chorus-profile-carousel__dot {
-  width: var(--ref-space-75);
-  height: var(--ref-space-75);
-  border-radius: var(--sys-radius-full);
-  background: var(--sys-color-outlineVariant);
-  display: block;
-}
-
-.chorus-profile-carousel__dot--active {
-  background: var(--sys-color-onSurface);
+/* Pagination dots below the pager are the shared Pagination component
+   (.chorus-pagination) — no carousel-local dot rules. The component is
+   an intrinsic-width inline element, so the carousel (column flex,
+   align-items stretch) centers it itself. */
+.chorus-profile-carousel > .chorus-pagination {
+  align-self: center;
 }
 
 /* ============================================================
@@ -2437,11 +2479,20 @@ a.chorus-metadata__name:focus-visible {
   pointer-events: none;
 }
 
-.chorus-list__row:hover {
+/* Nested-action scope — a trailing slot carrying an independent action
+   (a Follow / mute / favorite button, an overflow control) is marked
+   `data-nested-action` and already stops click/key propagation so it never
+   commits the row's primary action. The row's hover / press overlay is
+   suppressed while the pointer sits on that action so the large row does
+   NOT read as hovered / pressed at the same time the small control does —
+   the visual state boundary matches the event boundary. The decorative
+   nav chevron carries no `data-nested-action`, so hovering it still lights
+   the row (it IS the row's drill-in affordance). */
+.chorus-list__row:hover:not(:has([data-nested-action]:hover)) {
   background: color-mix(in srgb, var(--sys-color-onSurface) calc(var(--sys-state-hover) * 100%), transparent);
 }
 
-.chorus-list__row:active {
+.chorus-list__row:active:not(:has([data-nested-action]:active)) {
   background: color-mix(in srgb, var(--sys-color-onSurface) calc(var(--sys-state-pressed) * 100%), transparent);
 }
 
@@ -2564,6 +2615,31 @@ a.chorus-metadata__name:focus-visible {
   margin-left: var(--sys-layout-inline-md);
 }
 
+/* Embedded-Banner row — a Standard row whose text group stacks over a
+   Banner that spans the row's full content width. The row flips from a
+   single horizontal line to a vertical stack: the normal leading + label
+   + trailing line (`__row-main`) sits on top, the Banner `stack.xs` (8)
+   below it. The stack fills the row's content box so the Banner aligns to
+   the same 16px inline inset as the text group above it. The Banner owns
+   its own tinted fill / radius / padding; the slot only spaces it and
+   marks it a nested-action region (its controls never commit the row). */
+.chorus-list__stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sys-layout-stack-xs);
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.chorus-list__row-main {
+  display: flex;
+  align-items: center;
+}
+
+.chorus-list__banner {
+  display: block;
+}
+
 /* Entry variant — directory-entry row with selectable leading Thumbnail
    (32 / 40 / 48 / 56 via `data-size="small|medium|large|xlarge"`), an
    identity group (label + optional inline count Badge + optional stacked
@@ -3227,6 +3303,65 @@ a.chorus-metadata__name:focus-visible {
    rule already excludes `[data-divider="false"]`, so no extra CSS
    is needed to hide it here. */
 
+/* ============================================================
+   EmptyState — centered no-data composition. Painted inside the
+   surface that would otherwise hold the data: an optional monochrome
+   illustration, a required headline, optional body copy, and an
+   optional primary-Button CTA. Ships no surface fill of its own —
+   the host supplies the surface tier and the bounding box; EmptyState
+   only centers its column inside it. Inter-slot rhythm follows the
+   stack tokens (illustration→headline 12, headline→body 4, body→CTA
+   16). Distinct from Skeleton (an in-flight loading placeholder).
+============================================================ */
+.chorus-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+/* Optional illustration — a glyph / illustration sized to a 48-box
+   (larger than `sys.icon.lg`, realizing the 'icon.xl or larger' intent
+   since no `sys.icon.xl` rung exists), painted monochrome in
+   `onSurfaceVariant` via `currentColor` so it reads as quiet chrome,
+   not a brand moment. 12 below it to the headline. */
+.chorus-empty-state__illustration {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--empty-state-illustration-size);
+  height: var(--empty-state-illustration-size);
+  margin-bottom: var(--empty-state-illustration-gap);
+  color: var(--empty-state-illustration-color);
+}
+
+.chorus-empty-state__illustration img,
+.chorus-empty-state__illustration svg {
+  width: var(--empty-state-illustration-size);
+  height: var(--empty-state-illustration-size);
+  display: block;
+  color: currentColor;
+}
+
+/* Required headline — heading.sm in `onSurface`. Typography vars are
+   emitted inline by the React file (typoStyles). */
+.chorus-empty-state__headline {
+  margin: 0;
+  color: var(--empty-state-headline-color);
+}
+
+/* Optional body — body.sm in `onSurfaceVariant`, 4 below the headline. */
+.chorus-empty-state__body {
+  margin: 0;
+  margin-top: var(--empty-state-body-gap);
+  color: var(--empty-state-body-color);
+}
+
+/* Optional CTA — a default-size primary Button, 16 below the body. */
+.chorus-empty-state__action {
+  margin-top: var(--empty-state-action-gap);
+}
+
 /* ============================================================
    Banner — in-body explanation block (info / neutral)
 ============================================================ */
@@ -3241,6 +3376,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-banner--accent {
   background: var(--sys-color-primaryContainer);
   color: var(--sys-color-onPrimaryContainer);
+  --banner-outline-color: color-mix(in srgb, var(--sys-color-primary) 40%, transparent);
 }
 
 /* Destructive — error-tinted banner. Reach for it when the aside is a
@@ -3251,6 +3387,7 @@ a.chorus-metadata__name:focus-visible {
 .chorus-banner--destructive {
   background: var(--sys-color-errorContainer);
   color: var(--sys-color-onErrorContainer);
+  --banner-outline-color: color-mix(in srgb, var(--sys-color-error) 40%, transparent);
 }
 
 /* Default uses `sys.color.scrimSubtle` (~8% inverse-tone overlay —
@@ -3264,6 +3401,21 @@ a.chorus-metadata__name:focus-visible {
 .chorus-banner--default {
   background: var(--sys-color-scrimSubtle);
   color: var(--sys-color-onSurface);
+  --banner-outline-color: var(--sys-color-outlineVariant);
+}
+
+/* Optional outline — a hairline inset stroke toned to the appearance's
+   color family (each appearance block above sets
+   `--banner-outline-color`), kept deliberately faint so the edge reads
+   as a soft boundary of the same tint, not a frame: the subtle gray
+   hairline (`sys.color.outlineVariant`) on default's gray-tinted
+   scrim; `primary` / `error` at 40% over transparent (the Skeleton
+   fill recipe) on accent / destructive. Painted as an inset
+   box-shadow, never a `border`, so toggling it can't change the
+   banner's footprint — same idiom as Chip (see DESIGN.md → Border &
+   Stroke). */
+.chorus-banner--outlined {
+  box-shadow: inset 0 0 0 var(--sys-borderWidth-hairline) var(--banner-outline-color);
 }
 
 /* Leading icon slot — a 16 × 16 glyph (`sys.icon.md`) that paints in
@@ -3306,6 +3458,23 @@ a.chorus-metadata__name:focus-visible {
   gap: var(--sys-layout-stack-xs);
 }
 
+/* Optional heading line above the body — label.md (14 / Semibold) in
+   the container's foreground. Title↔body wants the tighter
+   `sys.layout.stack.2xs` (4) so the pair reads as one passage, while
+   the content column's gap stays `stack.xs` (8) for body↔action; the
+   negative margin nets the column gap down to 4 for this pair only. */
+.chorus-banner__title {
+  margin: 0;
+  font-size: var(--sys-typo-label-md-size);
+  line-height: var(--sys-typo-label-md-line);
+  font-weight: var(--sys-typo-label-md-weight);
+  color: inherit;
+}
+
+.chorus-banner__title + .chorus-banner__body {
+  margin-top: calc(var(--sys-layout-stack-2xs) - var(--sys-layout-stack-xs));
+}
+
 .chorus-banner__body {
   margin: 0;
   font-size: var(--sys-typo-body-sm-size);
@@ -3332,6 +3501,60 @@ a.chorus-metadata__name:focus-visible {
   color: var(--sys-color-primary);
 }
 
+/* neutral-body — keeps the `accent` fill but lays the Default
+   appearance's neutral foreground over it: title + body re-tone to
+   `onSurface` (quiet, high-legibility body copy) while the action
+   steps to `primary`, exactly as on `default`. The accent tint still
+   pulls the eye; the text just stops shouting in the primary family.
+   Only meaningful combined with `--accent` (default is already
+   `onSurface`; destructive must carry the warning tone through copy). */
+.chorus-banner--accent.chorus-banner--neutral-body {
+  color: var(--sys-color-onSurface);
+}
+
+.chorus-banner--accent.chorus-banner--neutral-body .chorus-banner__action {
+  color: var(--sys-color-primary);
+}
+
+/* Trailing icon slot — a 16 × 16 glyph (`sys.icon.md`) at the trailing
+   edge, vertically centered against the whole block (`align-self:
+   center` overrides the container's flex-start). Paints in the
+   banner's foreground (`currentColor`); typically a forward affordance
+   (e.g. ForwardCircleFillIcon) signaling the aside leads somewhere. */
+.chorus-banner__trailing-icon {
+  flex: 0 0 var(--sys-icon-md);
+  align-self: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: currentColor;
+}
+
+.chorus-banner__trailing-icon img,
+.chorus-banner__trailing-icon svg {
+  width: var(--sys-icon-md);
+  height: var(--sys-icon-md);
+  display: block;
+  color: currentColor;
+}
+
+/* Trailing action slot — hosts an inline Text Button (`<Button
+   variant="text">`) at the trailing edge, vertically centered against
+   the whole block (`align-self: center` overrides the container's
+   flex-start) and footprint-preserving (`flex: 0 0 auto`). The Button
+   owns its own size + appearance per the button/text spec; by default
+   pick the appearance whose color family matches the banner fill
+   (accent → accent, default → default, destructive → destructive
+   flavor) so the commit reads as part of the tinted block. Unlike the
+   trailing icon it is a real interactive control, so it is not
+   aria-hidden. The Text Button's optical-alignment margin lets its
+   visible label sit flush against the container's trailing padding. */
+.chorus-banner__trailing-action {
+  flex: 0 0 auto;
+  align-self: center;
+  display: inline-flex;
+}
+
 /* ============================================================
    Divider — section-break band between adjacent regions that
    don't share an enclosing container. Single full-bleed block
@@ -3715,14 +3938,21 @@ a.chorus-metadata__name:focus-visible {
 /* Hover / pressed re-tone the 1px stroke to `borderHover` (`outline`,
    or `error` on the error appearance). `:active` also lights the
    state-overlay `::before`. */
-.chorus-field:hover,
+/* The trailing clear button is an independent nested action (it wipes the
+   value, distinct from focusing / pressing the field) — marked
+   `data-nested-action`. While the pointer hovers / presses it, the field's
+   own hover stroke and pressed overlay are suppressed so the large field
+   does NOT read as pressed at the same time the small "×" does. The Select
+   chevron is NOT marked: it fires the same action as clicking the field
+   (open), so it correctly lights the field. */
 .chorus-field[data-force-state="hovered"],
 .chorus-field[data-force-state="pressed"],
-.chorus-field:not(.is-disabled):active {
+.chorus-field:hover:not(:has([data-nested-action]:hover)),
+.chorus-field:not(.is-disabled):active:not(:has([data-nested-action]:active)) {
   box-shadow: inset 0 0 0 var(--field-border-width) var(--field-border-hover);
 }
 
-.chorus-field:not(.is-disabled):active::before,
+.chorus-field:not(.is-disabled):active:not(:has([data-nested-action]:active))::before,
 .chorus-field[data-force-state="pressed"]::before {
   opacity: var(--field-overlay-pressed);
 }
@@ -5225,6 +5455,34 @@ a.chorus-metadata__name:focus-visible {
   transform: rotate(45deg);
 }
 
+/* ============================================================
+   Pagination — decorative dot-position indicator
+============================================================ */
+/* One 6px dot per page in an inline.sm row. An inline element —
+   inline-flex, intrinsic width (no stretch, no self-centering); the
+   host owns horizontal placement. Active dot paints `onSurface`, the
+   rest `outlineVariant`. Non-interactive (`aria-hidden` on the root) —
+   the host pager owns the active index and keyboard reach.
+   See schema/components/pagination/pagination.md. */
+
+.chorus-pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sys-layout-inline-sm);
+}
+
+.chorus-pagination__dot {
+  width: var(--ref-space-75);
+  height: var(--ref-space-75);
+  border-radius: var(--sys-radius-full);
+  background: var(--sys-color-outlineVariant);
+  display: block;
+}
+
+.chorus-pagination__dot--active {
+  background: var(--sys-color-onSurface);
+}
+
 /* ============================================================
    Progress — linear progress bar (determinate)
 ============================================================ */
@@ -5363,6 +5621,72 @@ a.chorus-metadata__name:focus-visible {
   }
 }
 
+/* ============================================================
+   Spinner — indeterminate rotating-arc loading indicator
+============================================================ */
+/* A rotating ring for short, progress-unknown waits (< ~1s) on a
+   neutral host surface. The arc paints `sys.color.primary` as the
+   foreground motion over a faint `sys.color.scrimSubtle` track ring
+   (inverse-tone ~8% tint) so the rotation reads on any surface tier.
+   The ring is drawn with a conic gradient masked to an annulus — no
+   `border:` (per the no-layout-strokes rule). Diameter rides the
+   icon.* ladder via the `--spinner-diameter` plumbing var (sys.icon.lg
+   medium / sys.icon.md small). Rotation modulates position, not
+   luminance, and is suppressed under `prefers-reduced-motion: reduce`,
+   leaving the full ring static as a quiet loading mark. */
+@keyframes chorus-spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+
+.chorus-spinner {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spinner-gap);
+}
+
+.chorus-spinner__arc {
+  display: block;
+  flex: none;
+  width: var(--spinner-diameter);
+  height: var(--spinner-diameter);
+  border-radius: var(--sys-radius-full);
+  /* Foreground arc sweeps from primary to transparent over the track. */
+  background:
+    conic-gradient(var(--sys-color-primary), color-mix(in srgb, var(--sys-color-primary) 0%, transparent) 75%, color-mix(in srgb, var(--sys-color-primary) 0%, transparent));
+  /* Annulus mask: punch out the centre so it reads as a ring, 2px thick.
+     The mask fill is alpha-only — the opaque keep-region of the mask is
+     not a design color, so it is not a token binding. */
+  /* chorus-token-exempt */
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
+  /* chorus-token-exempt */
+  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
+  animation: chorus-spinner-rotate 0.8s linear infinite;
+}
+
+/* Faint full track ring under the rotating arc, painted via box-shadow
+   inset so the bare ring stays visible on any surface tier. */
+.chorus-spinner__arc::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 2px var(--sys-color-scrimSubtle);
+}
+
+.chorus-spinner__arc {
+  position: relative;
+}
+
+.chorus-spinner__label {
+  color: var(--sys-color-onSurfaceVariant);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .chorus-spinner__arc {
+    animation: none;
+  }
+}
+
 /* ============================================================
    Switch — binary active/inactive pill with translating thumb
 ============================================================ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamblind-chorus/ui",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "description": "Chorus React components. Ships prebuilt ESM + CJS bundles (`dist/`) and a single `styles.css`; import `@teamblind-chorus/tokens/tokens.css` + `@teamblind-chorus/ui/styles.css` once at the app entry. The contract every component honors lives in schema/components/<family>/<sub>.spec.json; see schema/manifest.json for the inventory.",
   "license": "MIT",
   "author": "Teamblind, Inc.",
@@ -54,7 +54,6 @@
     "./agents/usage.json": "./agents/usage.json",
     "./agents/DESIGN.md": "./agents/DESIGN.md",
     "./agents/LOVABLE.md": "./agents/LOVABLE.md",
-    "./agents/reconstruct.md": "./agents/reconstruct.md",
     "./agents/images.md": "./agents/images.md",
     "./agents/patterns/": "./agents/patterns/",
     "./agents/components/": "./agents/components/",

package/agents/reconstruct.md

@@ -1,55 +0,0 @@
-# Chorus reconstruction prompt
-
-Paste the block below into a Chorus-aware agent (Lovable etc.) to rebuild ad-hoc,
-agent-invented UI as pure Chorus. Strongest with `LOVABLE.md` loaded as the system
-prompt — this block is a thin **driver**; the full rules live in `LOVABLE.md` and the
-guides it tells the agent to read, so the prompt stays short (lower token cost).
-
----
-
-```text
-Chorus reconstruction pass — rebuild every ad-hoc component as pure Chorus.
-
-GOAL: every hand-built component (raw div/button, Tailwind, shadcn, inline styles, hex)
-becomes pure Chorus. No mixed renders — a screen is 100% Chorus or not done. The old UI
-is the source of a migration to @teamblind-chorus/ui + @teamblind-chorus/tokens; don't preserve or
-"match" it — the old style is the bug.
-
-FIRST read node_modules/@teamblind-chorus/ui/agents/: catalog.md, manifest.json, compose.md,
-anti-patterns.md. The component name is not the contract — bindings are in
-components/<family>/<sub>.spec.json.
-
-DO, in order:
-1. INVENTORY every non-Chorus component in src/ (one line each: file → what it is).
-2. MAP each intent via catalog.md to a family + sub. If none fits, climb the ladder
-   (recompose slots → LEGO-combine → new primitive with every value a var(--sys-*)),
-   then flag a one-line "Chorus gap". Never fall back to raw HTML/Tailwind/shadcn.
-3. REBUILD with the real import from @teamblind-chorus/ui (icons from @teamblind-chorus/ui/icons),
-   honoring the spec; then delete the old component + its CSS.
-
-NON-NEGOTIABLE (else discard + regenerate):
-- Tokens only: no hex, no Tailwind colors, no off-scale px; card edge = inset shadow,
-  never border:.
-- Typography = className="sys-typo-<role>-<rung>" (NO `font: var(--sys-typo-*)` token).
-- Compound children: <Tabs> needs <Tab>; List/SuggestionList/AvatarRail take an items
-  array — never bare text.
-- One gutter at the shell; full-bleed children (Tabs/Feed/List/Carousel/bars) never
-  wrapped in a padded div. Floating action = <Button variant="fab">, not a pinned
-  standard button. Fixed bars via .page-shell (height:100dvh + <main> overflow-y:auto).
-
-VERIFY: eslint.config.js extends @teamblind-chorus/ui/eslint — fix every chorus/* error (never
-suppress); run the §E pre-flight checklist + rail self-diagnostic (anti-patterns.md).
-
-SCOPE (optional): "SCOPE: <area/route globs>" limits the pass to that boundary —
-inventory, rebuild, and lint only inside it; outside files are reported, never edited
-(boundary rules: agents/scoped-adoption.md).
-
-DELIVER: a before→after table (component → Chorus family/sub, or "gap") and screens with
-zero mixed renders. If scope is large, reconstruct the entry screen first, list the rest.
-```
-
----
-
-The ESLint preset (`@teamblind-chorus/ui/eslint`, wired in the VERIFY step) is the safety net:
-even if the model drops a rule mid-session, `chorus/*` errors fail the build and its own
-fix loop catches the drift.