@teamblind-chorus/ui 1.0.0 → 1.1.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);
 }
 
@@ -3241,6 +3292,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 +3303,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 +3317,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 +3374,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 +3417,28 @@ a.chorus-metadata__name:focus-visible {
   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;
+}
+
 /* ============================================================
    Divider — section-break band between adjacent regions that
    don't share an enclosing container. Single full-bleed block
@@ -3715,14 +3822,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 +5339,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)
 ============================================================ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamblind-chorus/ui",
-  "version": "1.0.0",
+  "version": "1.1.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/",
@@ -83,7 +82,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@teamblind-chorus/tokens": "^1.0.0"
+    "@teamblind-chorus/tokens": "^1.0.1"
   },
   "publishConfig": {
     "access": "public"

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.

package/agents/scoped-adoption.md

@@ -1,111 +0,0 @@
-# Scoped adoption — Chorus in a designated area of an existing app
-
-Protocol for the third first-turn branch in `LOVABLE.md`: the user wants Chorus in a
-**specific area** of an in-progress project — not a full migration (§D), not a blank
-scaffold (greenfield). Triggers: the first message names a target area / route /
-feature ("apply Chorus to the settings tab", "the community feed uses Chorus"), or
-says to initialize and **stand by** for an area they'll designate next.
-
-Everything in `LOVABLE.md` still applies *inside* the designated area. This file only
-defines what changes **at and outside the boundary**.
-
-## First-turn behaviour
-
-1. Run §A.0 end-to-end (install, stylesheets, placeholder, lint preset — scoped, see
-   below) and post the readiness line.
-2. Post a drift report **scoped to the designated area** (same shape as §D.1 — counts
-   + worst offenders — but only for files the area renders). If no area is named yet,
-   skip the report and say so in one line.
-3. **Stand by.** Do NOT reconstruct the entry screen, do NOT post an app-wide
-   migration plan, do NOT touch files outside the area. The §D "reconstruct the
-   representative screen immediately" step is **suspended** in this mode — the
-   reconstruction target is the designated area, on the user's brief.
-
-## The boundary — declare it, then respect it
-
-* **Declare the Chorus boundary at route / screen granularity** whenever possible.
-  State it explicitly in your first scoped reply: *"Chorus boundary: `/community/*`
-  (CommunityPage + children)."* Everything inside renders 100% Chorus; everything
-  outside stays untouched — visually and in code.
-* **The zero-mixed-render rule applies per screen *inside* the boundary.** A screen
-  inside the boundary is 100% Chorus or not done. Screens outside the boundary are
-  out of scope — their drift is *reported, never edited*.
-* **Sub-screen areas.** If the designated area is a region within a screen that also
-  has legacy UI (e.g. "only the comment section"), first propose widening the boundary
-  to the whole screen — that's the only way to honor zero-mixed-render literally. If
-  the user declines, the area's **container element is the declared boundary**: inside
-  it 100% Chorus, outside it untouched, and you state the exception in one line
-  ("mixed render sanctioned at `<CommentSection>` per scoped boundary"). Never
-  restyle legacy siblings "for consistency".
-* **§D.4 neighbor migration is capped at the boundary.** "Touched files AND immediate
-  visual neighbors" never drags in files outside the declared area. Out-of-boundary
-  drift goes on the next-PR shopping list (§D.5), nothing more.
-* **Widening is the user's call.** They can grow the boundary ("now also the profile
-  page") or switch to full §D at any time. You may *suggest* widening when the
-  boundary forces an awkward seam; you never widen unilaterally.
-
-## Embedded host shell — who pays the gutter
-
-The §A.4 PageShell contract assumes Chorus owns the viewport. In scoped adoption it
-usually doesn't:
-
-* **Area = whole route/screen** → use `<PageShell>` normally inside that route.
-* **Area = region embedded in a legacy frame** → do NOT install `<PageShell>` (a
-  100dvh flex column inside a host layout breaks the host's scroll). Instead, treat
-  the **legacy container as the shell**: it pays the horizontal gutter **once**, and
-  Chorus full-bleed children (`List`, `Feed`, `Carousel`, `Tabs`, …) are its direct
-  children with no extra `padding-inline` / `px-*` wrapper.
-  * If the legacy container already pays its own padding, that *is* the single
-    gutter — do not re-pay it on a Chorus wrapper.
-  * If it pays none, add it once at the area root:
-    `style={{ paddingInline: 'var(--sys-layout-page-md)' }}`.
-* The rail self-diagnostic (LOVABLE.md § rail) still applies *within the area*: every
-  full-bleed child's left edge must align to the area's single gutter.
-
-## ESLint preset — scope it to the area
-
-`export default [ ...chorus ]` repo-wide would flood an unmigrated codebase with
-`chorus/*` errors and push you toward either suppressing (forbidden) or migrating
-everything (scope violation). Scope the preset with flat-config `files`:
-
-```js
-// eslint.config.js
-import chorus from "@teamblind-chorus/ui/eslint";
-export default [
-  ...chorus.map((cfg) => ({
-    ...cfg,
-    files: ["src/pages/community/**", "src/components/community/**"], // = the declared boundary
-  })),
-];
-```
-
-* "Chorus lint green" (§E checklist) means green **within the scoped `files` globs**.
-* When the user widens the boundary, widen the globs in the same change — the lint
-  scope and the declared boundary must never disagree.
-* Never silence a `chorus/*` error inside the boundary; outside the boundary the
-  rules simply don't run.
-
-## CSS coexistence — safe by construction
-
-Importing `@teamblind-chorus/tokens/tokens.css` + `@teamblind-chorus/ui/styles.css` app-wide is
-safe for the untouched legacy area. The only global effects are:
-
-* a `button/input/select/textarea { font-family: inherit }` reset (form controls
-  inherit the body font — benign, usually invisible);
-* `:root` custom properties (`--sys-*`, `--ref-*`, `--chorus-placeholder-image`) —
-  inert until something consumes them;
-* `.chorus-*` / `.sys-typo-*` classes — inert on legacy markup.
-
-The Pretendard `<link>` loads a font; it restyles nothing until a rule asks for it.
-So: import the stylesheets once at app entry as §A.0 says — do NOT try to
-conditionally load CSS per route, and do not warn the user about "global conflicts".
-
-## Exit paths
-
-* **Widen** — user names more areas; repeat the boundary declaration, widen the lint
-  globs, migrate the new area.
-* **Graduate to §D** — user asks for the full conversion; run §D from step 1 with the
-  already-migrated areas as the reference target (skip §D.3's proactive
-  reconstruction — it exists).
-* **Escape hatch (§D.7)** still works as documented: "just add the feature" demotes
-  everything to a drift note; new code stays pure Chorus.