@crewlethq/ui 0.81.2 → 0.83.0

package/README.md

@@ -42,18 +42,18 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | ---- | ---------- |
 | Actions | `Button` and `ButtonLink` (variants `primary`, `secondary`, `outline`, `ghost`, `accent`, `danger`; sizes `small`, `medium`, `large`; shapes `square`, `pill`), `IconButton`, `Menu`, `Link`, `Copyable`, `CopyButton`, `DownloadButton`, `Kbd` |
 | Content and text | `Text` (the eight registers and `inherit`), `Prose`, `Statement`, `Document`, `DocumentTitle` and `DocumentTitleField`, the Markdown grammar (`parseMarkdown`, `parseMarkdownSpans`, `markdownInline`, `safeHref` and the line readers, with no React in it), `Highlight`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime`, `Note`, `Divider` |
-| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `CheckboxGroup`, `ConfirmField`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `TimeRangePicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList`, `ChoiceList`, `ChoiceCards`, `Composer`, `MarkdownEditor`, `RichEditor` (with `preloadRichEditor`, and the round trip `roundTripMarkdown` and `canonicalMarkdown` from `@crewlethq/ui/RichEditorMarkdown`) |
+| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `CheckboxGroup`, `ConfirmField`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `TimeRangePicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList`, `ChoiceList`, `ChoiceCards`, `ChipField` (chosen items as chips inside the field), `PersonRow` (a person or an agent as one row of a list), `Composer`, `MarkdownEditor`, `RichEditor` (with `preloadRichEditor`, and the round trip `roundTripMarkdown` and `canonicalMarkdown` from `@crewlethq/ui/RichEditorMarkdown`) |
 | Data display | `DataGrid` (with `useDataGridDriving`, `useAnyDataGridDriving` and `countDataGridRows`), `DataTable`, `CopyableCell`, `Table`, the read-only table cells (`TableKeyCell`, `TableNumberCell`, `TableDateCell`, `TableEntityCell`, `TableStatusCell`, `TableTagsCell`, `TableTextCell`), `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `QrCode`, `ObjectHeader`, `FactLine`, `SetByLine`, `Skeleton`, `Eyebrow`, `StatGroup`, `PinTile`, `IconTile`, `SettingsTable` (with `SettingsTable.Row`), `CatalogTile` |
 | List screens | `DataView`, and its parts on their own: `DataViewToolbar`, `FilterAxisBar`, `FilterAxisChip`, `FilterPill`, plus the filter model (`filterDefsFromColumns`, `applyColumnFilters`, `filterPredicate`, `blankFilterValue`) |
 | Feedback and overlays | `Callout`, `ConflictNote`, `EditingStatus`, `Toaster`, `Modal` (with `variant="sheet"`), `ConfirmModal`, `CommandPalette`, `Tooltip`, `Popover`, `Announcer` |
 | Documents and review | `DiffView` and `DiffSummary` with the line diff they draw (`diffLines`, `diffStat`, `collapseDiff`, `firstChangedLines`, `splitLines`, `MAX_DIFF_LINES`, with no React in it), `DiffList`, `VersionCompare`, `CommentThread` |
-| Conversations and the assistant | `ChatThread` (with `ChatThreadHandle`), `MessageBubble`, `RunChip`, `StepList` and `StepStateMark`, `ProposalCard`, `ChangeList` (with `shortenUnchanged`), `StatusCard`, `ReceiptStrip`, `RefusalStrip`, `ResultTableCard`, `OpenInAppCard`, `BriefCard`, `EntityList`, `RecordChip` and `RecordChipList` (a record named in a sentence, opening a peek, and the Also read line), `RefusalCard`, `SuggestionRow` and `SuggestionList`, `SendButton` |
+| Conversations and the assistant | `ChatThread` (with `ChatThreadHandle`), `ChatMessage` and `ChatMessageFailure`, `MessageActions` (with `MessageAction`, `QuickReaction` and `ActionDivider`), `ReactionBar` and `AddReaction` (with `reactionWho`), `EmojiPicker` (with `EMOJI_GROUPS`, `emojiName` and `searchEmoji`), `ThreadSummary`, `ActivityLine`, `MentionChip`, `MessageBubble`, `RunChip`, `StepList` and `StepStateMark`, `ProposalCard`, `ChangeList` (with `shortenUnchanged`), `StatusCard`, `ReceiptStrip`, `RefusalStrip`, `ResultTableCard`, `OpenInAppCard`, `BriefCard` (with `points`, what was said, each citing its message), `EntityList`, `RecordChip` and `RecordChipList` (a record named in a sentence, opening a peek, and the Also read line), `RefusalCard`, `SuggestionRow` and `SuggestionList`, `SendButton`, a transcript's timeline (`ChatDay` with `ChatDayPill`, `ChatDivider`), `LinkCard` (a link unfurled under its message), `MentionMenu` (with `mentionQuery`), `ActionCard` and `ActionCardRow` |
 | Charts | `Legend`, `BarList`, `StackedBar`, `StackedColumns`, `ActivityStrip`, `TimeSeries`, `Sparkline`, the reading layer they share (`ChartTooltip`, `useChartHover`), and the ramp (`DATA_COLORS`, `DATA_COLOR_OTHER`, `dataColor`) |
-| Marks | `Count`, `StatusDot`, `Spinner`, `EmptyValue`, `VisuallyHidden` |
+| Marks | `Count` (with `tone="attention"`), `StatusDot`, `Spinner`, `EmptyValue`, `VisuallyHidden` |
 | Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useHighlightRest` and `HIGHLIGHT_REST_MS`, `useClipboard`, `useDownload`, `downloadText`, `downloadBlob`, `safeFilename`, `toCsv`, `elementToPng` and `ElementToPngError`, `useOutcome`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
 | Layout | `Container`, `Section`, `Card`, `TileGrid`, `ListDetail`, `AsideLayout`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
 | Arranging a page | `ArrangeBoard`, `ArrangeGrid`, `ArrangeFrame` (with `useGridResize`), `ArrangeGroup`, `ArrangeList`, and the reorder hooks under them (`useReorder`, `useReorderLists`, `moveKey`) |
-| Application shell | `AppShell` with `AppShell.Rail`, the `aside` track and the `peek` slot (`useAppShellAside`, `useAppShellPeek`), `AppShell.ResizeHandle` (also `ResizeHandle`) and `useStoredWidth`, `SidePanel` and `SidePanelFrame`, `PeekRail` and `PeekHost` (with `PeekNeighbours`, `usePeekNeighbours`, `usePeekStep`, `peekClickHandler`, `peekRowActivation`), `SectionFrame` (with `SectionFrame.Nav` and `SectionFrame.Body`), `LockedLabel`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem`, `DirectoryList`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen`, `useIdle`, `useMediaMatch` |
+| Application shell | `AppShell` with `AppShell.Rail`, the compact rail (`rail="compact"`, the one fold control from `onRailChange`, and `useAppShell().rail` to pick the shape) and `fill="flush"`, the `aside` track and the `peek` slot (`useAppShellAside`, `useAppShellPeek`), `AppShell.ResizeHandle` (also `ResizeHandle`) and `useStoredWidth`, `SidePanel` and `SidePanelFrame`, `PeekRail` and `PeekHost` (with `PeekNeighbours`, `usePeekNeighbours`, `usePeekStep`, `peekClickHandler`, `peekRowActivation`), `SectionFrame` (with `SectionFrame.Nav` and `SectionFrame.Body`), `DockColumn` and `usePresence`, `LockedLabel`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem` (with `dense` lists, `unread` and `muted` rows and `collapsible` groups), `CompactNav` with `CompactNavItem`, `CompactNavGroup` and `CompactNavSeparator` (the rail folded to its marks, fed from the same places), `DirectoryList`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen`, `useIdle`, `useMediaMatch` |
 | Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `ThemeGallery`, `ThemeSwatch`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences`, and the framework-free `applyTheme`, `applyPalette`, `applyDensity` with `THEME_PREFERENCES`, `DENSITY_PREFERENCES` and their guards |
 | Artifacts | `SandboxedFrame` (with `SandboxedFramePlaceholder` and `SandboxedFrameNotice`), `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard`, `ArtifactKindGlyph` and `ArtifactPreviewGlyph` (the preview a card draws with no cover, for a cover with nothing to draw), `ArtifactBar` and `ArtifactVersionChip` (an open artifact's one slim bar), `ArtifactPanel` and `ArtifactWorkspace` (the panels it opens beside or over the artifact), `CanvasBoard` (a design's artboards and notes on a `Canvas`, with the visibility budget `liveBoards`), `CanvasToolbar` (a canvas's tool palette, with `toolForKey`), `LayersList` (the list of a canvas's items beside it, marked by the canvas's selection), `CanvasSchematic` (a design's cover, drawn from its boards' frames), `AccessDeniedCard`, `ArtifactIcon` (with `artifactIconGlyph` and `ARTIFACT_ICON_WORDS`), the native gallery covers (`DocCover`, `SheetCover`, `DashboardCover`), `MergeConflicts`, the dashboard pieces (`WidgetFrame`, `DatasetSource` and `DatasetSourceList`), and `FrameProtocol` (the wire between a host page and an embedded artifact, with no React in it), `ArtifactNameCell` and `ArtifactAccessLabel` (with `ArtifactAccessGlyph`) for a list of artifacts |
 | Sheets | `SheetGrid`, the cells on their own (`CheckboxCell`, `TextCell`, `LongTextCell`, `NumberCell`, `SelectCell`, `MultiSelectCell`, `PersonCell`, `StatusCell`, `DateCell`, `UrlCell`, `RatingCell`, and `SheetCell` for any type), `ChangeMark`, and `SheetModel` (every rule a sheet is drawn from, with no React in it: values, parsing, the keyboard model, TSV, the pending edits of D23) |
@@ -205,6 +205,91 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.83.0
+
+### The application rail
+
+**The fold control is a plus and a minus in the rail's top left corner.** The chevron in the row under the rail's head is gone. In its place `AppShell` draws one control in the corner the head leaves empty, up and to the left of the brand's mark: a minus (`MinusGlyph`) while the rail is full, to make it smaller, and a plus (`PlusGlyph`) while it is compact, to open it. It is the same element in both shapes and never moves, so focus stays on it across a fold. It keeps its names ("Collapse the sidebar" and "Expand the sidebar", or `railFoldLabels`), `aria-controls`, `aria-keyshortcuts` and the keys in its tooltip, and now says `aria-expanded` (true while the rail is full). It stands at the target floor (`--size-target-min`, 24px) at every density, its ring is drawn inside its own box, and it is quiet until the rail is pointed at. Full, the search field keeps the nav's own columns, since nothing stands before it any more. Props are unchanged.
+
+**The rail eases between its two shapes.** Its width moves on the slow step with the emphasized curve, the motion a `DockColumn` opens by, and what it holds keeps the width of the shape drawn, so the moving edge clips the rail's words rather than squeezing or rewrapping them, and the column under the edge never drifts. Folding, the full rail's middle, foot and status stay drawn and inert while its words fade out (focus inside them goes to the rail's first live control: the fold control, or the brand's link in the head, which stays live; with neither, the folded rail's first control once it is drawn), then the compact column fades in once the rail has moved; unfolding, the full rail is drawn at once and fades in while the edge uncovers it. The brand's mark and the fold control do not move or fade. Both shapes are a `usePresence` each, so the rail waits on the motion actually running on it, as a `DockColumn` does. `useAppShell().rail` reports the shape drawn, so it stays `full` until a fold has moved; the root's `data-rail-motion` (`fold`, `folded`, `unfold`, and `reverse` for a fold pressed again mid way, type `AppShellRailMotion`) names the phase under way. The words leave by a transition of their opacity, so a reversal brings them back from wherever their fade had reached rather than blinking them out and in; `usePresence` reports such a return as `returning`. Under reduced motion, and wherever nothing moves, the new shape is drawn at once. A change that arrives with the window crossing into the wide layout is drawn at once too. The rail's grid track is now `auto` and the rail takes `--crewlet-app-shell-rail` as its own width, which is still the one variable a host sets for a narrower rail. An aside column capped by the page's floor (`asideReserve`) now takes what the grid leaves it beside the rail's LIVE width, so it widens and narrows with the rail frame by frame, where a cap computed from the rail's variable jumped at both ends of a fold (story: `AppShellAside` Cap Follows A Folding Rail). While the rail moves the shell holds what it measures (the screen's width that `useScreenWidth` and `useScreenBelow` read, the scroller's gutter, the aside's width) and takes each once when the rail comes to rest, so no screen re-renders on every frame of a fold or changes shape mid way; a container query on the content column still follows every frame.
+
+**In the compact rail the status has a row of its own under the brand's mark**, where the fold chevron stood, rather than at the top of the foot: the `AppShell.RailStatus` dot and count, centred, a small control step tall, before the places. It keeps its button, its name ("Engine serving, 2 alarms"), its popup attributes and its ref. A panel it opens now stands at the top of the rail, so open it below the status (`side="bottom"`) in both shapes. Full, it stays at the end of the head's line.
+
+**The compact account face is centred on the tiles' line.** It took the full row's badge column and the step after it, which stood the face 4px left of the column's centre in a box 8px wider than the face. It now sits in a box of its own size, centred under the tiles. Hand the face at the tiles' height in the compact rail (`Avatar size="sm"`, 26px); the full row keeps `size="md"`.
+
+**A place that waits on the reader takes the badge, whichever place it is.** `NavItem` and `CompactNavItem` draw a `badge` as the one filled accent pill, centred on the row's line and ending on the row's end inset, so a column of badges lines up down the rail; a `count` is the quiet figure. Nothing changed in how either is drawn: to show the reader's own work as the inbox is shown, pass `badge` rather than `count`. New stories: `AppShell` Fold Control In Both Shapes, `SidebarNav` Badges On The Rows About You, and `DockColumn` (Pinned Beside A Conversation, Unpinned, At The End).
+
+### Columns that ease open and shut
+
+**`usePresence` is new**: something kept drawn while it leaves. `usePresence(shown, ref, { transitions, animations, instant })` answers `present` (draw it), `leaving` (drawn only to finish leaving: make it `inert`) and `entering` (shown again, never on the first draw, while its motion runs: the window a stylesheet scopes an entrance to). It waits only for the surface's OWN motion (`MotionOwnership`), as it is actually running (`getAnimations()`), never for a duration written in code: the transitions on `ref`'s element itself (by property; any, if `transitions` is left out) and the keyframes it names in `animations`, wherever they run under it. A motion something else inside it runs (a meter filling, a badge arriving), a paused one and an endless one (a pulse) are never waited for, a motion replaced mid way is waited out in its turn, a reopen on the way out cancels the wait, and no wait outlasts the motion's own remaining time and a margin (the fast step), so a tab hidden mid motion still settles. Under `prefers-reduced-motion: reduce`, where nothing runs, where the Web Animations API is missing, and for a change the host marks `instant`, it goes straight through in the same commit, before any paint. `afterMotion(element, done, owned)` and `runningMotion(element, owned)` are the same wait for a host with its own state, `tokenMs(motion.duration.fast)` turns a motion token into milliseconds (Tooltip and CompactNav each kept a copy), `releaseFocus(container, target)` takes focus out of something about to turn inert (to the host's `target`, or off it). The reader's motion preference is now asked through one spelling of the query, **`REDUCED_MOTION_QUERY`**, with **`prefersReducedMotion(view)`** for a read outside render, both beside `useMediaMatch`; `ChatThread`, `Outline`, `useReorder` and `TreeCanvas` use them where each kept a copy of the string. The ui-tests helper `apps/ui-tests/src/motion.ts` (`driveMotion`, `settleMotion`, `preferReducedMotion`) starts and ends motion by hand in jsdom.
+
+**`DockColumn` is new**: a column a host docks beside its content and takes away again, such as a list of rooms pinned beside a conversation. It stands in the host's own `auto` grid track (or as a flex item that does not grow) and eases its width between none and its panel's (`width`, px or any length) on the slow step with the emphasized curve, so the content beside it resizes frame by frame rather than jumping. The panel keeps its own width and is held to the edge that faces the content, so it slides in from the outer edge, and on close it stays drawn and `inert` until the column has closed over it; opened again on the way out, it is live where it is. Closed from inside (an Unpin in its own head), focus goes to `focusOnClose`, the control that docks it again, and is never left in the panel. `side` (`start`, the default, or `end`) places it, `divider` (on by default) draws the hairline on the edge that faces the content, and `--crewlet-dock-column-ground` gives the panel a ground. It is a plain column, not a landmark: what it holds names itself. Under reduced motion it simply is or is not. Types: `DockColumnProps`, `DockColumnSide`.
+
+### React
+
+**The package asks for React 19** (`react` and `react-dom` `>=19`, was `>=18`). The components already used what React 19 brought, `inert` as a boolean prop and `ref` as a plain prop of a function component and of an element (`ArrangeFrame`, `Tooltip`, `ListInput`, and now `DockColumn`, the folding rail and `Popover`), and under React 18 neither fails loudly: `inert` is dropped with a warning, so a panel on its way out stays focusable, and a ref read from props is undefined, so a trigger's own ref is lost. Every Crewlet application is on React 19. A suite holds the peer range to the source.
+
+### Refs
+
+**A trigger keeps its own ref across re-renders.** `Tooltip` cloned its trigger with a new ref callback on every render, so React took the element away from the trigger's own ref and gave it back in each commit, and a layout effect earlier in the tree read null while the control stood in the document (a `DockColumn` handing focus to a tooltip-wrapped Pin control as it closed). `Tooltip`, `Popover`, `Menu`'s trigger props and `Modal`'s frame now join their refs with **`useComposedRef(...refs)`** (new, with **`composeRefs`** for code outside a component and **`attachRef`** for one ref), one callback for any number of refs that is the same callback while they are the same and releases each the way React would. `Popover` also keeps the ref its trigger carried, which it used to replace.
+
+## Changes in 0.82.0
+
+### A conversation's messages
+
+**The conversation parts.** A transcript of people and agents is now drawn from the kit, every size read from one scale (`ChatMessage/ChatScale.css`, the `--crewlet-chat-*` properties on `:root`: the words and meta steps, the row inset, the face column, the day's pill and pin, the toolbar, the transcript's ground and the mention wash), which each part imports, so a part imported alone still gets it. A surface that wants a denser or roomier transcript sets them once.
+
+- **`ChatMessage`**: a focusable article (out of the tab order, `data-message-id`) with the author's face in a gutter, the name at the medium weight, a label and the time on one head line, the words and a `footer` stack. A `continuation` draws no head and shows a face-wide time (`gutterTime`) in its gutter on hover. `highlight="mention"` is a light warning wash with a bar on the edge, kept under the pointer; `flash` is a wash of the accent that fades back to the row's own ground; `pending` is `sending` (faint words) or `failed`; `editing` puts the toolbar away; `active` holds the fill and the toolbar while one of its menus is open. The toolbar (`actions`) rests on the row's first line over the row above, and is drawn inside the row where the scroller's edge would cut it, measured when the pointer arrives or focus enters; `actionsPlacement="inside"` always draws it inside, for a row under a card's head. A tap on a touch screen shows it. ArrowUp and ArrowDown walk the rows of a log. A message the reader is taken to stops under the day's pinned pill (`scroll-margin-top`). `ChatMessageFailure` is the not-sent line with Retry and Discard.
+- **`MessageActions`** is a `Toolbar` drawn as a soft tray: the transcript's ground, the hairline, a small shadow, the large corner and 30px tools. `MessageAction` is one tool whose hint is its name and which can be a `Menu`'s own trigger; `QuickReaction` is an emoji that reacts; `ActionDivider` a hairline between groups.
+- **`ReactionBar`**: one toggle pill to an emoji, a soft fill with no edge at rest, the strong edge under the pointer, and the reader's own in the accent's soft fill and ring with a medium count. Its hint says who reacted with the reader first (`reactionWho`: "You, Product Manager and 1 other", or "You and 2 others" and "3 members" where no names are known). `disabledReason` holds the pills and adds the reason to their hint. `AddReaction` opens the picker from a pill that stays quiet in a row until the row is pointed at, and is always shown on a touch screen.
+- **A reader who cannot react is held everywhere a reaction starts.** `QuickReaction`, `MessageAction` and `AddReaction` take `disabledReason`, as `ReactionBar` does: the control is marked unavailable (`aria-disabled`), does nothing when pressed, and adds the reason to its hint.
+- **`EmojiPicker`**: a searchable grid in a popover. The field has focus on opening, Enter picks the first match, and the grid is one tab stop the arrows walk by its rows.
+- **`ThreadSummary`**: the repliers' faces, the count at the medium weight in the accent's ink, how many are new and when the last reply came; under the pointer View thread takes the time's place.
+- **`ActivityLine`**: who is typing, as a polite status, and the working agent as a `ThinkingIndicator` announcing its label once, in a line that keeps its height when empty.
+- **`MentionChip`**: a name in the words, in the info tone's light blue for others and the warning tone for the reader (`self`) and the whole room (`everyone`); a button with `onPress`, text without.
+
+**`ChatThread.reveal()` lands an item in the middle of the view**, with what came before and after it in sight, where it set the item's foot on the view's foot. It keeps the item's `scroll-margin-top` and `scroll-margin-bottom` clear, and places the item again in the view the Jump to latest row leaves once the move has brought that row in, so the row no longer covers the item's last lines. An item taller than the view still lands with its head at the top. **`jump={false}`** leaves the Jump to latest row out, for a log that offers its own way back, and **`ChatThreadHandle.scroller()`** hands a host the scrolling element.
+
+**`ThinkingIndicator` is never wider than its column.** In a column that sizes its items by their content (a message's footer) a long status made it as wide as its words, and a phone's transcript scrolled sideways; the status now truncates.
+
+### A conversation's timeline, previews and pickers
+
+**`ChatDay` is new**: a day of a conversation under its date. The day's rule is a hairline across the list where the day starts, in the flow; its pill (24px, the transcript's ground, a hairline ring and a small shadow, the secondary ink at the medium weight) sits on the rule and stays pinned a little under the top of the list while any of the day is in view, until the next day pushes it out. The pin is `--crewlet-chat-day-pin`, so a host with a bar floating over the list (an unread banner) moves the pills down past it. `pill` takes the host's own control, such as a Jump to menu whose trigger is the new `ChatDayPill` (a button with a chevron while it opens a menu), and `unread` draws the New line on the day's own rule. A day is a group named by its date.
+
+**`ChatDivider` is new**: the New line (`variant="unread"`), a hairline in the danger hue with its word at the end on the transcript's ground, which takes no height, so marking the reader's place moves no message; and a quiet labelled rule (`variant="date"`), as a thread pane sets its reply count. Both are separators named by their words, found again by `data-divider`.
+
+**`LinkCard` is new**: what a link points at, unfurled under its message with no box: a 3px bar in the status tone's line colour, the source app's mark and name, the title (the primary ink at the regular weight, two lines at most, the accent ink and an underline under the pointer), a line of details, and the status (a dot in the tone's full colour) and owner (a small face and the name) as words. The preview is one link named by its title and described by the rest. Only an address `safeHref` allows is followed; anything else draws the preview as words. `external` opens a new tab with no referrer or opener and says so; an in-app route opens in place. Tones are `neutral`, `info`, `success`, `warning` and `danger`.
+
+**`MentionMenu` is new**: the suggestions a composer opens on "@" or "#", a listbox the message box owns through `aria-activedescendant`, with the keyboard hints at its foot (hidden on a touch screen). Wire it to `useListbox` (`tabCommits: true`) and pass the hook's `listId`, `listRef`, `active` and `setActive`. `mentionQuery(text, caret)` finds the "@word" or "#word" at the caret, and opens nothing inside a word such as an address. Its rows are `PersonRow`s.
+
+**`PersonRow` is new**: a person or an agent as one row of a list, the same in a picker's suggestions, a member list and the composer's @ list: the face, the name and an Agent label, what they are doing now or their title, trailing words, and for a row that toggles (`mark="toggle"`, `selected`) a pressed state and a plus that turns into a check. It is a button by default and an option of a listbox with `as="option"` (`selected` is `aria-selected`, `highlighted` the arrows' row). `density="compact"` is one line.
+
+**`ChipField` is new**: the chosen items of a picker as chips inside the field, before a bare text box, for the people being added to a room and the address line of a new message (`variant="bare"`, with a `prefix` such as "To:"). Backspace in an empty box removes the last chip and says so, Enter with words typed is the host's first match (`onCommit`), focus stays in the box when a chip goes, and the host's own `onKeyDown` runs first, so the box can be a combobox over `useListbox`. It differs from `TagsInput`, a form value whose chips sit above its box.
+
+**`ActionCard` and `ActionCardRow` are new**: a first step offered as a picture, a 148 by 172 card on an artifact kind's colour ground (`tone`: purple, blue, amber, green, teal, magenta, rose) with its title at the top and a drawing at its foot, and a row of them that scrolls sideways and snaps on a narrow width. The hover is quiet: the ground deepens a step and a small shadow lifts the card. Each kind now publishes its Ground steps on `.crewlet-kind--<kind>` (`--crewlet-kind-ground`, `-ground-strong`, `-ground-end`, `-glow`), from the new `--color-artifact-kind-<kind>-ground` tokens.
+
+### Faces, hints, sheets and counts
+
+**Every face is one rounded square, a person's and an agent's alike.** A person was a circle and an agent a squircle, so a row of people and agents changed shape from face to face. `Avatar` now draws every face as a square whose corner is two ninths of its side, held between the xs and lg radius steps (8px on a 36px face; `AVATAR_CORNER_RATIO` is 2/9 and `AVATAR_CORNER_RANGE` is `{ min: 4, max: 12 }`, and `avatarCorner(px)` answers both). The kind is said by the face's contents: the initials in the mono face for an agent and the sans face for a person, a character, a picture. A face's outline is the hairline step (`--color-edge-hairline`), whatever it holds, where the neutral badge drew the strong hairline and a hue's plate its own line. The status badge is under a third of the face (0.3 of it, never under 10px) and hangs a twentieth of it past the corner, the size and place of a presence dot. In an `AvatarStack` the ground's ring is the only edge a face draws. `PresenceStack`, `ImageUpload` and `Skeleton`'s face take the same corner. Props are unchanged.
+
+**A `Tooltip` stays open for keyboard focus only, and a press closes it.** A mouse press focuses a button too, and so does a layer handing focus back as it closes, so a tip shown for a hover outlived the hover. Focus now holds the tip only when it is the focus `:focus-visible` matches (`isVisibleFocus`, exported beside `returnFocus`, which also refuses a focus handed back while the reader uses a pointer). A press closes the tip, and it opens again on the pointer's next arrival. A ref and any other attribute handed to a `Tooltip` are its trigger's: they are merged onto the child (handlers run after the child's own, `style` merged, descriptions joined), so a tooltip can stand where a `Popover` or a `Menu` expects its trigger. A suite that means keyboard focus focuses through `tabTo` in `apps/ui-tests/src/keyboard.ts`.
+
+**`Modal` takes `side="start"`** for a sheet pinned to the inline start, a navigation panel such as a list of rooms: it slides in from that edge with its edge and its shadow (`--shadow-sheet-start`, the sheet's own shadow mirrored) on its inline end. `side` is read on the sheet variant only. A modal's head and foot no longer shrink under a long body.
+
+**`Count` takes `tone="attention"`**: a count of what waits on the reader (a mention, a direct message, a new reply to them) as the accent pill at the badge's size (`--size-badge`, its figure at `--font-size-badge`), the same pill a navigation row's badge draws. A count is still never tinted by severity, and `quiet`, the default, is unchanged. The type is `CountTone`.
+
+**`Tag` takes `appearance="quiet"`**: a small filled label with no boundary, 16px tall in the label register, for a seat's kind beside its name ("Agent"). It takes no size step.
+
+**`SidePanel` takes `subtitle`**: what the panel is about, after the title on its baseline in the tertiary ink ("Thread" then the room it is in). It drops under the title when the two do not fit, and the head grows to hold it.
+
+**`Composer` takes `tools` and `toolbar`**: the tools at the footer's start (attach, emoji, a mention), before the actions at its end, and a formatting row along the box's top, inside its edge, above the words it acts on. Either one alone draws its part. **`appearance="chat"`** is a conversation's message box on the transcript's scale: the transcript's ground with the row wash and a small shadow inside the strong edge, the words at the chat step, a footer with no rule of its own, an open tool drawn pressed, and the formatting row quiet until the box is in use. The type is `ComposerAppearance`.
+
+**`BriefCard` takes `points`**: what was said, for a brief of a conversation (a room's catch up), a list under the needs named "What was said", each point a sentence and its citation, the host's own press that opens the message it came from (`source`, a `BriefCardAction`). At most five (`BRIEF_CARD_MAX_POINTS`), cut with a warning outside production as the needs are. The type is `BriefCardPoint`.
+
+**`ChatThread` takes `rest="end"`**: a transcript shorter than its view rests on its foot, against the composer under it, rather than under its top. `start` is the default. The type is `ChatThreadRest`.
+
+**`formatMarkdown` applies `strikethrough`, `quote` and `link`** (`MARKDOWN_TEXT_FORMATS`, type `MarkdownTextFormat`), for a composer's own formatting row. `MarkdownEditor`'s bar does not draw them. A strikethrough wraps in `~~`, a quote toggles `> ` on every line it touches and keeps their own markers, and a link makes the selection its label and selects the address to type over.
+
 ## Changes in 0.81.1
 
 **A `DataTable` strip spans the whole row.** On an expandable table the accessory strip under a row spanned one column fewer than the row, so it stopped before the last column, while the opened panel spanned all of it. Unseen while that column was a sliver of spacer, it broke the strip, and the rule under its row, off two thirds across a table sized to its content.

package/dist/Accordion/index.js

@@ -1,6 +1,6 @@
-export { Accordion, AccordionItem } from '../chunk-5NJMSYDZ.js';
-import '../chunk-IVTQWOXV.js';
-import '../chunk-MLDTLZAO.js';
+export { Accordion, AccordionItem } from '../chunk-XNC3M4IN.js';
+import '../chunk-ULYHDP7U.js';
+import '../chunk-D2GT3CR4.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ActionCard/ActionCard.d.ts

@@ -0,0 +1,49 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import type { ArtifactKind } from '../ArtifactKindGlyph/index.js';
+/**
+ * The colour ground a card is drawn on, named by its hue. Each is an artifact
+ * kind's measured colour (purple is design's, blue doc's, amber slides',
+ * green sheet's, teal dashboard's, magenta the brand kit's, rose HTML's), so
+ * every palette and both modes are already fitted for it.
+ */
+export type ActionCardTone = 'purple' | 'blue' | 'amber' | 'green' | 'teal' | 'magenta' | 'rose';
+/** Which kind's colours each tone reads. */
+export declare const ACTION_CARD_GROUND: Readonly<Record<ActionCardTone, ArtifactKind>>;
+export interface ActionCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'title' | 'onSelect'> {
+    /** What the card does, as its name: "Add people and agents". */
+    title: string;
+    tone: ActionCardTone;
+    /** The drawing at the card's foot. Decorative: the title says what it does. */
+    art: ReactNode;
+    /** Pressing the card. */
+    onSelect: () => void;
+}
+/**
+ * A first step offered as a picture: a tall card on one of the kit's colour
+ * grounds, its title at the top and a drawing at its foot. A new room opens
+ * with a row of these (add people, add a description, start from a
+ * template) until its first message.
+ *
+ * A QUIET HOVER. The ground deepens a step and a small shadow lifts the card
+ * off the page; nothing moves, so a row of cards holds still under a pointer
+ * passing over it.
+ *
+ * A BUTTON NAMED BY ITS TITLE. The drawing is hidden from assistive
+ * technology, so a reader hears "Add people and agents, button" and nothing
+ * about a picture.
+ */
+export declare function ActionCard({ title, tone, art, onSelect, onClick, className, type, ...rest }: ActionCardProps): import("react").JSX.Element;
+export interface ActionCardRowProps {
+    /** Names the row for a screen reader: "First steps for this room". */
+    label: string;
+    /** The cards, in the order they are offered. */
+    children: ReactNode;
+    className?: string | undefined;
+}
+/**
+ * Action cards side by side, in one row that scrolls sideways when it runs
+ * out of width: a phone shows two cards and part of the third (the part says
+ * there is more) rather than a tall stack, and each card snaps to the row's
+ * start.
+ */
+export declare function ActionCardRow({ label, children, className }: ActionCardRowProps): import("react").JSX.Element;

package/dist/ActionCard/index.d.ts

@@ -0,0 +1,4 @@
+import '../ArtifactKindIllustration/ArtifactKinds.css';
+import './ActionCard.css';
+export { ACTION_CARD_GROUND, ActionCard, ActionCardRow } from './ActionCard.js';
+export type { ActionCardProps, ActionCardRowProps, ActionCardTone } from './ActionCard.js';

package/dist/ActionCard/index.js

@@ -0,0 +1,2 @@
+export { ACTION_CARD_GROUND, ActionCard, ActionCardRow } from '../chunk-HTBTAIH6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ActionCard-47WSZ2O5.css

@@ -0,0 +1,110 @@
+/*
+ * ActionCard: a first step offered as a picture, on an artifact kind's
+ * colour ground. The ground is the kind's own Ground steps (ArtifactKinds.css)
+ * laid over the card rung, which the palette suite holds to 4.5:1 for the
+ * primary text in every palette and both modes, with the kind's glow behind
+ * the drawing.
+ */
+
+/*
+ * ONE ROW THAT SCROLLS SIDEWAYS when it runs out of width, so a phone shows
+ * two cards and part of the third (the part says there is more) instead of a
+ * tall stack. The block padding keeps the focus ring and the hover shadow
+ * inside the scroller's clip; the negative margin gives that space back to
+ * the layout. A host that runs the row to its container's edges sets the
+ * inline padding and `scroll-padding-inline` to its own inset.
+ */
+.crewlet-action-cards {
+  display: flex;
+  gap: var(--spacing-2);
+  overflow-x: auto;
+  margin-block: calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1);
+  padding-block: var(--spacing-1) var(--spacing-2);
+  scroll-snap-type: x mandatory;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+
+.crewlet-action-cards::-webkit-scrollbar {
+  display: none;
+}
+
+.crewlet-action-card {
+  --crewlet-action-card-ground: var(--crewlet-kind-ground);
+  position: relative;
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 148px;
+  height: 172px;
+  box-sizing: border-box;
+  overflow: hidden;
+  padding: var(--spacing-3) var(--spacing-3) 0;
+  /* The kind's hue itself is the edge: 3:1 or more on the sheet in every
+     palette and mode, where the kind's Line step measured 2.5:1. */
+  border: 1px solid var(--crewlet-kind-hue);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-surface-subtle);
+  background-image:
+    radial-gradient(110% 64% at 50% 100%, var(--crewlet-kind-glow) 0%, transparent 72%),
+    linear-gradient(180deg, var(--crewlet-action-card-ground) 0%, var(--crewlet-kind-ground-end) 100%);
+  color: var(--color-text-primary);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  scroll-snap-align: start;
+  transition: box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* A QUIET HOVER: the ground deepens a step and a small shadow lifts the
+   card off the page. Nothing moves. */
+.crewlet-action-card:hover {
+  --crewlet-action-card-ground: var(--crewlet-kind-ground-strong);
+  box-shadow: var(--shadow-sm);
+}
+
+/* The card draws its own edge, so the ring is drawn over it. */
+.crewlet-action-card:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The title at the medium weight, as every emphasis in a conversation is,
+   two lines at most at its width, balanced so neither line is one word. */
+.crewlet-action-card__title {
+  max-width: 14ch;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-snug);
+  text-wrap: balance;
+}
+
+/* The drawing stands on the card's foot, still. */
+.crewlet-action-card__art {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  height: 100px;
+  margin: 0 calc(var(--spacing-3) * -1);
+}
+
+.crewlet-action-card__art .crewlet-kind-illustration {
+  width: 112px;
+  max-height: 96px;
+  margin-bottom: calc(var(--spacing-2) * -1);
+  filter: drop-shadow(0 6px 12px var(--crewlet-kind-line));
+}
+
+/* FORCED COLORS drops the ground; the hue's border stays as the card's edge. */
+@media (forced-colors: active) {
+  .crewlet-action-card {
+    border-color: CanvasText;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-action-card {
+    transition: none;
+  }
+}

package/dist/ActivityLine/ActivityLine.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from 'react';
+export interface ActivityLineProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Who is typing, in words: "Product Manager is typing". Empty or left out, nothing is drawn for it. */
+    typing?: string | undefined;
+    /**
+     * The agent at work, in words, beside the Ask Crewlet mark under its
+     * shimmer: "Senior Backend Engineer is writing a reply · Reading the diff".
+     * It may change with every step.
+     */
+    working?: string | undefined;
+    /**
+     * What a screen reader is told once when the agent starts, which never
+     * changes with its steps: "Senior Backend Engineer is writing a reply".
+     * `working` by default.
+     */
+    workingLabel?: string | undefined;
+}
+/**
+ * Who is typing and which agent is working, in one quiet line under a
+ * composer. It keeps one line's height when it is empty, so the box above it
+ * never moves as people start and stop.
+ *
+ * TYPING is announced politely as it changes. WORKING is a
+ * `ThinkingIndicator`, which announces its label once and keeps its changing
+ * steps to the eye.
+ */
+export declare function ActivityLine({ typing, working, workingLabel, className, ...rest }: ActivityLineProps): import("react").JSX.Element;

package/dist/ActivityLine/index.d.ts

@@ -0,0 +1,4 @@
+import '../ChatMessage/ChatScale.css';
+import './ActivityLine.css';
+export { ActivityLine } from './ActivityLine.js';
+export type { ActivityLineProps } from './ActivityLine.js';

package/dist/ActivityLine/index.js

@@ -0,0 +1,4 @@
+export { ActivityLine } from '../chunk-C4256UXE.js';
+import '../chunk-ED4A6Q24.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ActivityLine-AMSERTOB.css

@@ -0,0 +1,74 @@
+/*
+ * Who is typing and which agent is working, under a composer, in the meta
+ * step and the tertiary ink.
+ */
+
+.crewlet-activity-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-4);
+  min-height: 20px;
+  min-width: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--crewlet-chat-meta);
+}
+
+/* No piece is wider than the line: a long working status truncates. */
+.crewlet-activity-line > * {
+  max-width: 100%;
+}
+
+/* The working line in the line's own step, over the indicator's. */
+.crewlet-activity-line .crewlet-activity-line__working {
+  font-size: var(--crewlet-chat-meta);
+}
+
+.crewlet-activity-line__typing {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-activity-line__dots {
+  display: inline-flex;
+  gap: 2px;
+}
+
+.crewlet-activity-line__dots > i {
+  width: 4px;
+  height: 4px;
+  border-radius: var(--radius-circle);
+  background: currentColor;
+  animation: crewlet-activity-line-typing calc(var(--motion-duration-slow) * 4) var(--motion-easing-in-out) infinite;
+}
+
+.crewlet-activity-line__dots > i:nth-child(2) {
+  animation-delay: var(--motion-duration-base);
+}
+
+.crewlet-activity-line__dots > i:nth-child(3) {
+  animation-delay: var(--motion-duration-slow);
+}
+
+@keyframes crewlet-activity-line-typing {
+  0%,
+  60%,
+  100% {
+    opacity: 0.3;
+    transform: none;
+  }
+
+  30% {
+    opacity: 1;
+    transform: translateY(-2px);
+  }
+}
+
+/* Under reduced motion the dots hold still at full strength: the words say
+   who is typing. */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-activity-line__dots > i {
+    animation: none;
+  }
+}

package/dist/AgentHandoffPanel/index.js

@@ -1,24 +1,24 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-57AKYFML.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-DD7RBNT4.js';
 import '../chunk-4MJN2KN6.js';
 import '../chunk-WFCWPXJN.js';
-import '../chunk-E35HYQMK.js';
-import '../chunk-222VILSP.js';
-import '../chunk-FFGEJUAP.js';
-import '../chunk-CLJGFOTV.js';
-import '../chunk-ANTAQAR4.js';
-import '../chunk-FB3TCNQP.js';
-import '../chunk-PGCLHYVP.js';
-import '../chunk-IVTQWOXV.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
+import '../chunk-EBVZHVPD.js';
+import '../chunk-LVJGN5II.js';
+import '../chunk-5ILRWUE7.js';
+import '../chunk-SKGOKLJD.js';
 import '../chunk-PIYJNCN7.js';
+import '../chunk-O7N6W52M.js';
+import '../chunk-PGCLHYVP.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-ULYHDP7U.js';
+import '../chunk-D2GT3CR4.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AppShell/AccountRow.d.ts

@@ -13,6 +13,9 @@ export interface AccountRowProps {
     /**
      * The reader's badge, drawn decorative: the name beside it says who it is.
      * In a rail's foot the row is sized for a medium one (`size="md"`, 32px).
+     * In the compact rail the face stands among the compact places' tiles and
+     * takes their height, a small one (`size="sm"`, 26px), centred in the
+     * column as each tile is.
      */
     avatar: ReactNode;
     /** Who the reader is. */
@@ -38,6 +41,14 @@ export interface AccountRowProps {
     linkSuffix?: string | undefined;
     /** Controls at the row's end: a theme toggle, the trigger of a preferences panel. */
     actions?: ReactNode;
+    /**
+     * The reader's face alone, for the compact rail's foot: the badge is the
+     * link (or the menu's button), the name and the detail are its accessible
+     * name and its tooltip, and `actions` are not drawn (the compact rail draws
+     * its places, Settings among them, as tiles above it). Defaults to the
+     * shape of the rail the row stands in.
+     */
+    compact?: boolean | undefined;
     className?: string | undefined;
 }
 /**
@@ -61,5 +72,12 @@ export interface AccountRowProps {
  * button, ending in the up-and-down chevron a menu's trigger draws, and the
  * account is one item of it. The menu says only what the row does not, in its
  * header (their access), above the actions.
+ *
+ * IN THE COMPACT RAIL THE ROW IS THE READER'S FACE (`compact`): the same link
+ * or menu button, holding the badge alone, named by the name and the detail
+ * as the full row is, and showing them in a tooltip, since a face says who
+ * it is only to somebody who already knows. The face is centred in the
+ * column on the line the tiles above it are centred on, and at their height
+ * when it is handed at the small step.
  */
-export declare function AccountRow({ avatar, name, detail, href, menu, current, title, linkSuffix, actions, className, }: AccountRowProps): import("react").JSX.Element;
+export declare function AccountRow({ avatar, name, detail, href, menu, current, title, linkSuffix, actions, compact: compactProp, className, }: AccountRowProps): import("react").JSX.Element;