@crewlethq/ui 0.81.1 → 0.82.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`), `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,63 @@ 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.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

@@ -38,6 +38,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 +69,10 @@ 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.
  */
-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;

package/dist/AppShell/AppShell.d.ts

@@ -59,8 +59,10 @@
 import { type AriaAttributes, type HTMLAttributes, type MouseEventHandler, type ReactNode, type Ref } from 'react';
 import type { Tone } from '../utils/tone.js';
 import { type AppShellAsideShape, type AppShellPeekShape } from './regions.js';
+import { type AppShellRailShape } from './railShape.js';
 export { useAppShellAside, useAppShellPeek } from './regions.js';
 export type { AppShellAsideShape, AppShellPeekShape, AppShellRegionValue } from './regions.js';
+export type { AppShellRailShape } from './railShape.js';
 /** The aside's resting width, in px, where the host names none. */
 export declare const APP_SHELL_ASIDE_WIDTH = 420;
 /** How the reader resizes the aside while it is a column. */
@@ -75,7 +77,7 @@ export interface AppShellAsideResize {
     onChange: (width: number) => void;
     /** Where a gesture ends: the moment to keep the width. */
     onCommit?: ((width: number) => void) | undefined;
-    /** Names the grip: "Resize the assistant panel". */
+    /** Names the grip: "Resize the Ask Crewlet panel". */
     label: string;
 }
 /** What the shell tells the components inside it. */
@@ -91,6 +93,12 @@ interface AppShellContextValue {
     railId: string;
     toggleLabel: string;
     hasRail: boolean;
+    /**
+     * The shape the rail is drawn in NOW: `compact` only where the host asked
+     * for it and the layout is wide, `full` in the drawer and everywhere else,
+     * so an application picks `CompactNav` or `SidebarNav` from this alone.
+     */
+    rail: AppShellRailShape;
 }
 export type { AppShellContextValue };
 /**
@@ -124,8 +132,14 @@ export interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
      * Gives the screen the whole height left under the bar, as a flex column,
      * for a canvas or a split view that draws to the bottom of the window
      * instead of scrolling.
+     *
+     * `flush` is the same column EDGE TO EDGE: the content column gives up its
+     * pad, its measure and its gap, and the scroller reserves no gutter, for a
+     * screen that draws its own frame to the sheet's edges (a conversation with
+     * a list and a pane either side of it). The column is positioned, so a
+     * `LayerHost` the screen keeps inside it fills exactly the screen.
      */
-    fill?: boolean | undefined;
+    fill?: boolean | 'flush' | undefined;
     /**
      * Any value that changes when the reader goes somewhere. The drawer closes
      * when it does: a drawer left open over the screen you have just navigated
@@ -136,6 +150,31 @@ export interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
     toggleLabel?: string | undefined;
     /** The link that precedes everything, for a keyboard reader. */
     skipLabel?: string | undefined;
+    /**
+     * The rail's shape the reader chose: the full navigation, or the compact
+     * column of glyphs. A desktop choice: under the shell step the rail is a
+     * drawer drawn full whatever this says, and `useAppShell().rail` reports
+     * the shape actually drawn.
+     */
+    rail?: AppShellRailShape | undefined;
+    /**
+     * Called with the other shape when the reader presses the fold control.
+     * Given, the shell draws THE fold control (never in the drawer); keeping the
+     * choice, and binding a key to it, are the application's.
+     */
+    onRailChange?: ((next: AppShellRailShape) => void) | undefined;
+    /**
+     * The keys the application binds to the fold (`['Mod', '\\']`), drawn in
+     * the control's tooltip and set as its `aria-keyshortcuts`. The shell binds
+     * nothing: the same press may mean something else where the rail is a
+     * drawer, and only the application knows.
+     */
+    railFoldKeys?: readonly string[] | undefined;
+    /** The fold control's two names. Defaults to "Collapse the sidebar" and "Expand the sidebar". */
+    railFoldLabels?: {
+        collapse: string;
+        expand: string;
+    } | undefined;
     /**
      * A panel the frame keeps beside every screen: the assistant. Nothing (or
      * null) means no aside and no track. Normally a `SidePanel`, which leaves
@@ -181,7 +220,7 @@ export interface AppShellProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
     peekShape?: AppShellPeekShape | undefined;
     children?: ReactNode;
 }
-export declare function AppShell({ sidebar, topbar, banner, footer, mainId, mainRef, fill, navigationKey, toggleLabel, skipLabel, aside, asideWidth, asideReserve, asideLabel, asideShape, asideModal, onAsideClose, asideResize, peek, peekShape, className, style, children, ...rest }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ sidebar, topbar, banner, footer, mainId, mainRef, fill, navigationKey, toggleLabel, skipLabel, rail: railChoice, onRailChange, railFoldKeys, railFoldLabels, aside, asideWidth, asideReserve, asideLabel, asideShape, asideModal, onAsideClose, asideResize, peek, peekShape, className, style, children, ...rest }: AppShellProps): import("react").JSX.Element;
 export declare namespace AppShell {
     var Rail: typeof AppShellRail;
     var RailRow: import("react").ForwardRefExoticComponent<AppShellRailRowProps & import("react").RefAttributes<HTMLElement>>;
@@ -222,7 +261,17 @@ export interface AppShellRailProps {
     className?: string | undefined;
     children?: ReactNode;
 }
-/** The rail's three regions: a head, a scrolling middle, and a foot. */
+/**
+ * The rail's three regions: a head, a scrolling middle, and a foot.
+ *
+ * ONE RAIL IN BOTH SHAPES, its slots kept. Compact, the head holds the brand
+ * alone (the lockup shows its mark, over the column's centre, and keeps its
+ * name as the link's name and title); the field is not drawn, because a
+ * 76px column has no room for one and the application draws a Search tile
+ * among its `CompactNav` places instead; and the status stands at the top of
+ * the foot as its dot and count, since the head has no line left beside the
+ * mark. The middle and the foot are drawn as the application gives them.
+ */
 export declare function AppShellRail({ header, search, status, footer, className, children }: AppShellRailProps): import("react").JSX.Element;
 /**
  * A figure at the end of a row in the foot, and what it counts.

package/dist/AppShell/ResizeHandle.d.ts

@@ -50,7 +50,7 @@ export interface ResizeHandleProps {
     onValueCommit?: ((value: number) => void) | undefined;
     /** The resting size Enter and a double press return to. Without one neither does anything. */
     defaultValue?: number | undefined;
-    /** Names the separator: "Resize the assistant panel". */
+    /** Names the separator: "Resize the Ask Crewlet panel". */
     label: string;
     /**
      * Which edge of the sized panel the handle stands on. On the `left` edge

package/dist/AppShell/index.d.ts

@@ -9,4 +9,4 @@ export { useScreenBelow, useScreenWidth } from './screenWidth.js';
 export type { StoredWidth, StoredWidthOptions, WidthStorage } from './storedWidth.js';
 export { AccountRow } from './AccountRow.js';
 export type { AccountRowMenu, AccountRowProps } from './AccountRow.js';
-export type { ActionRailRowProps, ActionRailStatusProps, AppShellAsideResize, AppShellAsideShape, AppShellContextValue, AppShellPeekShape, AppShellProps, AppShellRailProps, AppShellRailRowProps, AppShellRailStatusProps, AppShellRegionValue, AppShellToggleProps, AppShellTopbarProps, RailRowCount, StaticRailRowProps, StaticRailStatusProps, } from './AppShell.js';
+export type { ActionRailRowProps, ActionRailStatusProps, AppShellAsideResize, AppShellAsideShape, AppShellContextValue, AppShellPeekShape, AppShellProps, AppShellRailShape, AppShellRailProps, AppShellRailRowProps, AppShellRailStatusProps, AppShellRegionValue, AppShellToggleProps, AppShellTopbarProps, RailRowCount, StaticRailRowProps, StaticRailStatusProps, } from './AppShell.js';

package/dist/AppShell/index.js

@@ -1,13 +1,16 @@
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-UY3FWQWG.js';
+export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-T4IEESXN.js';
 import '../chunk-RTPQDNW3.js';
-import '../chunk-OQG4P5KU.js';
+import '../chunk-ISQANI6Q.js';
+import '../chunk-3QQIGMY3.js';
+import '../chunk-YOJAGKTS.js';
 export { RESIZE_HANDLE_LARGE_STEP, RESIZE_HANDLE_STEP, ResizeHandle, clampSize, useAppShellAside, useAppShellPeek } from '../chunk-PIYJNCN7.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-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';