@corbits/react-ui 0.1.0

package/dist/test/render-hook.d.ts

@@ -0,0 +1,14 @@
+export type RenderedHook<T> = {
+    readonly result: {
+        readonly current: T;
+    };
+    rerender(): void;
+    unmount(): void;
+};
+/**
+ * The smallest possible hook-testing harness: mount a component that calls
+ * `callback` and stashes its return value, re-render it on demand, and clean
+ * up. No `@testing-library` dependency — `act` plus `react-dom/client` cover
+ * everything a hook test in this package needs.
+ */
+export declare function renderHook<T>(callback: () => T): RenderedHook<T>;

package/dist/test/render-hook.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+/**
+ * The smallest possible hook-testing harness: mount a component that calls
+ * `callback` and stashes its return value, re-render it on demand, and clean
+ * up. No `@testing-library` dependency — `act` plus `react-dom/client` cover
+ * everything a hook test in this package needs.
+ */ export function renderHook(callback) {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    let root;
+    const resultBox = {
+        current: undefined
+    };
+    function Probe() {
+        resultBox.current = callback();
+        return null;
+    }
+    act(()=>{
+        root = createRoot(container);
+        root.render(/*#__PURE__*/ _jsx(Probe, {}));
+    });
+    return {
+        result: resultBox,
+        rerender () {
+            act(()=>{
+                root.render(/*#__PURE__*/ _jsx(Probe, {}));
+            });
+        },
+        unmount () {
+            act(()=>{
+                root.unmount();
+            });
+            container.remove();
+        }
+    };
+}

package/dist/theme.css

@@ -0,0 +1,628 @@
+/* The Corbits theme: design tokens, motion, and the base layer.
+   This is the one source for all of it — dist/styles.css is compiled from it,
+   and dist/theme.css is this file, so the two can never drift.
+
+   The @source below is why a Tailwind v4 consumer needs a single directive.
+   Tailwind resolves it relative to *this file*, so it means src/ when we build
+   the standalone stylesheet and dist/ when a consumer imports it out of
+   node_modules. Either way it points at the code that uses the classes. */
+@source "./";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Corbits brand tokens.
+
+   Backgrounds are White in light and pure Black in dark — never cream. Cream is
+   an *element* color: it carries text, borders and surfaces on dark grounds
+   only, and gray carries them on light grounds. The two element neutrals never
+   cross over — gray never sits on black, cream never sits on white.
+
+   Because the ground is correct, the orange needs no correction: brand dark
+   orange #bf6b20 measures 5.34:1 against black and is the dark --primary as
+   shipped by the brand. #d4791f is no longer a primary; it is the hover/pressed
+   step, darker than #e98428 in light (ink label 4.65:1) and brighter than
+   #bf6b20 in dark (black label 6.55:1), so one hex serves both modes.
+
+   --primary-emphasis is orange as *text or border* on the ground, where the
+   fill orange does not qualify (#e98428 on white is only 2.44:1).
+   --input is the control-boundary token and clears the 3:1 UI-component
+   threshold on both the page and the card; --border stays soft and decorative.
+
+   --primary-foreground is the ink label, not white. White on the primary
+   orange measures 2.69:1 — a hard AA failure — so please do not "correct" it
+   to white; the contrast gate will reject it anyway.
+
+   Every pair below is enforced by scripts/contrast-test.mjs, which runs as part
+   of `npm run build` against the published dist/styles.css. */
+:root {
+  --radius: 0.5rem;
+
+  /* One named icon-size scale, keyed to where a glyph sits rather than an
+     abstract xs/sm/md/lg — a call site names its context, not a pixel value,
+     so nothing hardcodes its own size or repeats a `size=` prop. Matches the
+     owner's mock CSS 1:1 (mock-spec.md §1): rail nav glyphs sit at 15px,
+     top-bar icon buttons at 16px inside a 32x32 hit target, inline button
+     glyphs (and dense list/menu-item icons — a row and a context-menu item
+     read at the same density) at 13px, and the row-selection checkbox tick
+     at 10px. Consume as `text-icon-nav` / `text-icon-topbar` /
+     `text-icon-button` / `text-icon-checkbox` (Tailwind font-size utilities,
+     re-exposed below) on the glyph's wrapping element, sized in `em` against
+     that font-size — this is also the fix for icons rendering unsized
+     (the browser's 300x150 replaced-element fallback) wherever no ancestor
+     rule or `size=` prop already constrained them. */
+  --icon-size-nav: 0.9375rem;
+  --icon-size-topbar: 1rem;
+  --icon-size-button: 0.8125rem;
+  --icon-size-checkbox: 0.625rem;
+
+  --background: #ffffff;
+  --foreground: #2b2627;
+  --card: #f2f4f5;
+  --card-foreground: #2b2627;
+  --popover: #ffffff;
+  --popover-foreground: #2b2627;
+  --primary: #e98428;
+  --primary-foreground: #2b2627;
+  --primary-active: #d4791f;
+  --primary-emphasis: #9a5416;
+  --secondary: #c5d2de;
+  --secondary-foreground: #2b2627;
+  --muted: #eceff1;
+  --muted-foreground: #5c5555;
+  --thinking-base: #77716a;
+  --accent: #c5d2de;
+  --accent-foreground: #2b2627;
+  --success: #c1d1be;
+  --success-foreground: #2b2627;
+  --destructive: #9e2b25;
+  --destructive-foreground: #ffffff;
+  --border: #dfe3e6;
+  --border-strong: #c3ccd2;
+  --input: #8a8080;
+  --ring: #9a5416;
+
+  /* Status text, not a fill/foreground pair — used where a step or delivery
+     state needs to read as "good"/"caution" beyond what --success/--destructive
+     already carry (those are fills). --warn also colours a medium/high
+     RiskBadge; low risk stays --muted-foreground so only the levels worth
+     flagging draw the eye. Matches Workbench's app.css exactly, so a block
+     lifted from a consumer app keeps its colours. */
+  --ok: #37904a;
+  --warn: #b7791f;
+
+  /* The chrome's elevation. The design is flat — floating chrome separates
+     itself with --border-strong, not depth — so the token ships as `none`
+     and exists as the single knob if elevation ever returns. */
+  --shadow: none;
+
+  /* Chart series, a fixed order rather than a pool — slot 1 is always the first
+     series in the data. See lib/chart-palette.ts for why these steps and this
+     ordering. The orange family is deliberately absent: orange is the reserved
+     action accent and never paints a passive data series. Green- and red-family
+     slots never neighbour each other — under deuteranopia adjacent green/red
+     collapse into one hue — and adjacent same-family steps differ by lightness,
+     a channel colour-vision deficiency preserves. Every step clears 3:1 against
+     the page and the card in both modes (re-checked by the contrast gate). */
+  --chart-1: #1f5fa8;
+  --chart-2: #37904a;
+  --chart-3: #1f6132;
+  --chart-4: #143e70;
+  --chart-5: #9e2b25;
+
+  /* Named durations for the three motion sizes the theme actually uses:
+     micro for a hover/pressed state or an icon swap, standard for a toast or
+     dropdown, large for a dialog, drawer or panel swap. Declared here, on
+     :root, so a consumer can also read `var(--duration-standard)` directly
+     in a hand-written transition — the @theme inline block below re-exposes
+     them under Tailwind's real `--transition-duration-*` namespace so
+     `duration-standard` etc. compile to a utility class too. The theme's
+     existing hand-tuned keyframes/transitions (220ms/280ms/160ms) predate
+     these and are left as they are; treat these three as the anchors for
+     new motion going forward, not a retrofit of what already shipped. */
+  --duration-micro: 150ms;
+  --duration-standard: 200ms;
+  --duration-large: 300ms;
+}
+
+.dark {
+  --background: #000000;
+  --foreground: #e4d5bc;
+  --card: #2b2627;
+  --card-foreground: #e4d5bc;
+  --popover: #332c2d;
+  --popover-foreground: #e4d5bc;
+  --primary: #bf6b20;
+  --primary-foreground: #000000;
+  --primary-active: #d4791f;
+  --primary-emphasis: #e98428;
+  --secondary: #2d455c;
+  --secondary-foreground: #e4d5bc;
+  --muted: #1a1718;
+  --muted-foreground: #a99c86;
+  --thinking-base: #aaa39a;
+  --accent: #2d455c;
+  --accent-foreground: #e4d5bc;
+  --success: #425a3d;
+  --success-foreground: #e4d5bc;
+  --destructive: #e6796f;
+  --destructive-foreground: #000000;
+  --border: #423a3b;
+  --border-strong: #5c5254;
+  --input: #8a8080;
+  --ring: #e98428;
+  --shadow: none;
+
+  --ok: #5cb573;
+  --warn: #d9a441;
+
+  --chart-1: #5a95d8;
+  --chart-2: #63a86a;
+  --chart-3: #9fd8a8;
+  --chart-4: #9db8e8;
+  --chart-5: #cc4f47;
+  color-scheme: dark;
+}
+
+/* Dark by default: a fresh install on a dark-OS host gets dark tokens with
+   zero JS and zero explicit `.dark` class. The `:not(.dark):not(.light)`
+   guard means ThemeProvider still wins in both directions once it mounts —
+   an explicit "dark" adds `.dark` (already true, no-op here) and an explicit
+   "light" adds `.light`, which this selector excludes.
+
+   Native CSS cannot attach one declaration list to both `.dark` (any OS) and
+   a media-qualified `:root` without `light-dark()` — and `light-dark()` would
+   break the contrast gate, which parses hex off `.dark {`. So the two blocks
+   stay token-identical on purpose; tests/theme.test.ts fails the build if
+   they drift. `color-scheme: dark` is part of that shared set so zero-JS
+   dark paints native controls dark too. */
+@media (prefers-color-scheme: dark) {
+  :root:not(.dark):not(.light) {
+    --background: #000000;
+    --foreground: #e4d5bc;
+    --card: #2b2627;
+    --card-foreground: #e4d5bc;
+    --popover: #332c2d;
+    --popover-foreground: #e4d5bc;
+    --primary: #bf6b20;
+    --primary-foreground: #000000;
+    --primary-active: #d4791f;
+    --primary-emphasis: #e98428;
+    --secondary: #2d455c;
+    --secondary-foreground: #e4d5bc;
+    --muted: #1a1718;
+    --muted-foreground: #a99c86;
+    --thinking-base: #aaa39a;
+    --accent: #2d455c;
+    --accent-foreground: #e4d5bc;
+    --success: #425a3d;
+    --success-foreground: #e4d5bc;
+    --destructive: #e6796f;
+    --destructive-foreground: #000000;
+    --border: #423a3b;
+    --border-strong: #5c5254;
+    --input: #8a8080;
+    --ring: #e98428;
+    --shadow: none;
+
+    --ok: #5cb573;
+    --warn: #d9a441;
+
+    --chart-1: #5a95d8;
+    --chart-2: #63a86a;
+    --chart-3: #9fd8a8;
+    --chart-4: #9db8e8;
+    --chart-5: #cc4f47;
+    color-scheme: dark;
+  }
+}
+
+/* Named preset overlays. Applied as data-theme on the same root that carries
+   `.dark` (see ThemeProvider). Only surface tints shift — foreground, primary,
+   and chart tokens stay on the base theme so the contrast gate and the brand
+   orange remain authoritative. */
+:root[data-theme="warm"] {
+  --card: #f3efe8;
+  --muted: #ebe6df;
+  --border: #e2d9ce;
+  --border-strong: #c9bcab;
+  --secondary: #d4cfc6;
+  --secondary-foreground: #2b2627;
+  --accent: #d4cfc6;
+  --accent-foreground: #2b2627;
+}
+
+.dark[data-theme="warm"] {
+  --card: #322a26;
+  --muted: #1c1614;
+  --border: #4a3f3a;
+  --border-strong: #665750;
+  --secondary: #3d342e;
+  --secondary-foreground: #e4d5bc;
+  --accent: #3d342e;
+  --accent-foreground: #e4d5bc;
+}
+
+:root[data-theme="cool"] {
+  --card: #eef2f6;
+  --muted: #e8edf2;
+  --border: #d5dde6;
+  --border-strong: #b6c3d0;
+  --secondary: #b8c9d9;
+  --secondary-foreground: #2b2627;
+  --accent: #b8c9d9;
+  --accent-foreground: #2b2627;
+}
+
+.dark[data-theme="cool"] {
+  --card: #1e242c;
+  --muted: #14181e;
+  --border: #3a424c;
+  --border-strong: #525c68;
+  --secondary: #2a3d52;
+  --secondary-foreground: #e4d5bc;
+  --accent: #2a3d52;
+  --accent-foreground: #e4d5bc;
+}
+
+/* SidebarItemRow's own restyle points, deliberately outside `@theme inline`:
+   a Tailwind `bg-primary/10`/`rounded-md` pair is undefeatable without a
+   specificity war, since the utility and its override compile to the same
+   specificity and whichever rule is later in the sheet wins. A CSS variable
+   read at render time has none of that — a consumer sets it once on their own
+   root/scope and the row already reads it, no `!important` and no rebuild.
+   `color-mix` re-derives from `--primary` so both modes stay correct without
+   a `.dark` override of their own. */
+:root {
+  --sidebar-row-radius: var(--radius);
+  --sidebar-row-selected-bg: color-mix(in srgb, var(--primary) 10%, transparent);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-active: var(--primary-active);
+  --color-primary-emphasis: var(--primary-emphasis);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-thinking-base: var(--thinking-base);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-ok: var(--ok);
+  --color-warn: var(--warn);
+  --shadow-surface: var(--shadow);
+
+  /* The brand faces are named directly and are not bundled — the package ships
+     no font files. A consumer that loads Red Hat Display / Space Mono gets the
+     brand type; one that does not falls through the stack. To point these at a
+     face loaded under a generated name, override --font-sans / --font-mono. */
+  --font-sans: "Red Hat Display", "Open Sans", Roboto, Arial, sans-serif;
+  --font-mono: "Space Mono", "Fira Code", Monaco, Consolas, monospace;
+
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 2px);
+
+  --text-icon-nav: var(--icon-size-nav);
+  --text-icon-topbar: var(--icon-size-topbar);
+  --text-icon-button: var(--icon-size-button);
+  --text-icon-checkbox: var(--icon-size-checkbox);
+
+  /* Overrides Tailwind's built-in ease-out with the brand's decelerate curve,
+     so every existing and new `ease-out` usage picks it up in one place. */
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+
+  /* Symmetric in-out curve for morphs — something growing/shrinking in place
+     rather than entering or exiting — paired with `--ease-out`'s decelerate
+     shape so the two read as one curve family. */
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  /* A springier decelerate for entrances that should feel like they land with
+     a touch of overshoot — a dock, a popover, a toast arriving — distinct
+     from `--ease-out`'s straight decelerate, which suits exits and resizes
+     that must never overshoot their target. */
+  --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.15);
+
+  /* Tailwind v4's real namespace for duration utilities is
+     `--transition-duration-*`, not `--duration-*` — an unreferenced name in
+     this inline block is dropped from the build entirely, so re-exporting
+     under the correct namespace is what actually emits `duration-micro`,
+     `duration-standard` and `duration-large` as utility classes. */
+  --transition-duration-micro: var(--duration-micro);
+  --transition-duration-standard: var(--duration-standard);
+  --transition-duration-large: var(--duration-large);
+}
+
+/* Dialog motion. Written as real keyframes rather than pulled in from an
+   animation plugin: one dependency fewer, and a consumer who inherits
+   dialog.tsx can read and edit the animation in the same repo as the markup.
+   Only `transform` is animated — Tailwind centers the dialog with the separate
+   `translate` property, so the two compose and the box never jumps. */
+@keyframes corbits-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes corbits-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes corbits-dialog-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes corbits-dialog-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}
+
+/* Drawer motion: the sheet slides from the edge it is anchored to. Only
+   `transform` moves, so the panel is composited and never reflows the page
+   under it. Used by the drawer variant of ui/dialog. */
+@keyframes corbits-drawer-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes corbits-drawer-out-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes corbits-drawer-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes corbits-drawer-out-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+/* The live-status ring. Scales and fades outward from the dot rather than
+   pulsing its opacity in place, so "still changing" reads at 8px where an
+   opacity blink does not. Used by ui/status-dot. */
+@keyframes corbits-status-pulse {
+  0% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(2.6);
+  }
+}
+
+/* The block card's header dot: a plain opacity blink, distinct from the
+   status dot's outward-scaling ring — this one sits inline in a dense header
+   row where a scaling ring would collide with the title text next to it.
+   Used by ui/block-card. */
+@keyframes corbits-block-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+
+/* The boot screen's progress sweep. An indeterminate bar rather than a spinner:
+   it says "still working" without implying a percentage nobody knows. Ships
+   by ui/boot-screen. */
+@keyframes corbits-boot-sweep {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(300%);
+  }
+}
+
+/* The block swap: a small slide-and-fade for whichever block just became
+   active, including the empty-state's own transition into the first block.
+   Keyed by block id so React remounts a fresh node per swap and this plays
+   every time. Used by ui/parts-renderer and ui/tool-block. */
+@keyframes corbits-rail-block-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* The typing indicator's three dots. Each dot offsets its own
+   animation-delay, so the bounce travels left to right. Used by
+   ui/typing-indicator. */
+@keyframes corbits-typing-bounce {
+  0%,
+  80%,
+  100% {
+    opacity: 0.35;
+    transform: translateY(0);
+  }
+  40% {
+    opacity: 1;
+    transform: translateY(-3px);
+  }
+}
+/* SelectionCheckbox's pop on select: a small overshoot so the check reads as
+   a deliberate snap rather than a plain fade. No `--spring-*` token exists
+   yet in this theme — the overshoot curve below is a literal cubic-bezier
+   rather than a token reference; re-point it at a shared spring token if one
+   lands. Used by ui/selection-checkbox. */
+@keyframes corbits-selection-pop {
+  0% {
+    transform: scale(0.6);
+  }
+  60% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* BulkActionBar's rise into view. Plays on an inner element, not the
+   outer fixed/centered one — the outer element's horizontal centering
+   transform is a plain, unconditional class rather than something this
+   keyframe has to restate, so a `prefers-reduced-motion` viewer (who never
+   runs this animation at all) still ends up centered. Used by
+   ui/bulk-action-bar. */
+@keyframes corbits-bulk-action-bar-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ShimmerText's sweep: a `background-clip: text` gradient sliding across
+   its own background-size, so the brighter band travels through the words.
+   Used by ui/shimmer-text (and, through it, ui/thinking-label). */
+@keyframes corbits-shimmer-sweep {
+  0% {
+    background-position: 150% 0;
+  }
+  100% {
+    background-position: -50% 0;
+  }
+}
+
+/* Toast motion: a pure 160ms fade, centered above the bottom edge — no
+   slide, no lift. Sonner enters and exits by transitioning translateY, so
+   the transform is pinned (!important, since sonner injects its stylesheet
+   at runtime after any linked sheet) and only opacity is left to move. The
+   durations stay normal-weight declarations so the reduced-motion override
+   below still collapses them. Ships by ui/toast. */
+[data-sonner-toaster] [data-sonner-toast].corbits-toast {
+  left: 50%;
+  transform: translateX(-50%) !important;
+  transition-property: opacity;
+  transition-duration: 160ms;
+  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+[data-sonner-toaster] [data-sonner-toast].corbits-toast[data-removed="true"] {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+
+/* Motion is opt-out at the foundation, not per component: anything animated
+   anywhere collapses to a single frame when the OS asks for reduced motion.
+   Component families added later inherit this for free. */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* The theme's base layer, so a consumer
+   gets the default border color, the ground, the type and — critically — one
+   focus ring for the whole app. Before this shipped, three primitives each
+   re-declared the same focus-visible outline by hand. Plain CSS rather than
+   @apply so a consumer reading the shipped CSS sees the same rules written here. */
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+}
+
+/* Ridge-study motion: keep geometry and timing in the original 100 x 70 space. */
+@keyframes corbits-thinking-sweep {
+  0% { transform: translateX(8px); opacity: 0; }
+  8%, 86% { opacity: 1; }
+  100% { transform: translateX(130px); opacity: 0; }
+}
+@keyframes corbits-thinking-rise {
+  0% { transform: translateY(88px); }
+  100% { transform: translateY(-30px); }
+}
+@keyframes corbits-thinking-wave {
+  0% { transform: scale(.03); opacity: 0; }
+  10% { opacity: 1; }
+  75% { opacity: .9; }
+  100% { transform: scale(1.35); opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  /* Static poses land the gradient mid-stroke. These offsets mirror the SVG
+     geometry in thinking-mark.tsx — change the rect/circle geometry there and
+     these poses have to be re-picked to match. */
+  .corbits-thinking-silk, .corbits-thinking-strata, .corbits-thinking-echo { animation: none; }
+  .corbits-thinking-silk { transform: translateX(44px); }
+  .corbits-thinking-strata { transform: translateY(30px); }
+  .corbits-thinking-echo { transform: scale(.6); }
+}

package/dist/ui/agent-turn.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import { type AgentIdentity, type ChatMessage } from "../lib/chat-message.js";
+export type AgentTurnProps = {
+    readonly message: ChatMessage;
+    readonly identity: AgentIdentity;
+    /** Rich body for the answer — a markdown renderer. */
+    readonly children?: ReactNode;
+    readonly now?: number;
+    /** e.g. "Thought for 4s". Shown on the reasoning block once it stops streaming. */
+    readonly reasoningDurationLabel?: string;
+    readonly className?: string;
+};
+/**
+ * One agent reply, in the order it happened: what it thought, what it did, what
+ * it said.
+ *
+ * Parts are rendered in the order the model produced them rather than grouped
+ * by kind — a turn that thinks, calls a tool, thinks again and then answers
+ * reads as a sequence, and sorting it into "all thinking / all tools / answer"
+ * describes a turn that never happened.
+ *
+ * The avatar is `aria-hidden` and the turn is a labelled region instead: a
+ * screen reader should hear "Ada said …" once, not two initials followed by the
+ * name.
+ */
+export declare function AgentTurn({ message, identity, children, now, reasoningDurationLabel, className, }: AgentTurnProps): import("react").JSX.Element;