@crewlethq/ui 0.84.2 → 0.86.0

package/README.md

@@ -41,17 +41,17 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Area | Components |
 | ---- | ---------- |
 | 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`, `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` |
+| Content and text | `Text` (the eight registers and `inherit`; a line cut by `truncate` or `clamp` shows its whole words on hover), `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`, `MemberPicker` (groups granted whole, with members left out or chosen on their own, and `chosenMembers`), `KeyValueRows` (keys and their values as rows under one column head, with `keyValueRowsLabels`), `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`, `TableTwoLineCell`), `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` |
+| Feedback and overlays | `Callout`, `AttentionList` (what needs a person, as rows in one card), `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`), `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` (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` |
+| Layout | `Container`, `Section`, `Card`, `TileGrid`, `ListDetail`, `RailList` (a directory's groups as a rail beside its list, folding into a picker), `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 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 |
@@ -205,6 +205,54 @@ 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.86.0
+
+### Forms, tables and directories
+
+**`KeyValueRows` is new**: keys and their values edited as rows under one column head, for request headers, environment variables and any list of names and what each is set to. The key and value columns are named once (`keyLabel`, `valueLabel`), and each field is named on its own for a screen reader ("Header 2", "Value for Authorization"), so every row is the same row. Every row stands on its fields' top edge, so a refused key or value (`keyError`, `valueError`) is said under its own field, linked to it, and the controls beside it stay level. The remove button is a square the fields' height, and Add is a flush quiet action under the rows. Add puts the focus in the new row's key; Remove moves it to the row that took that row's place, else the one before, else Add, and says what went. Keys take the `reference` appearance and are never spell-checked; `secret` hides each value and marks it `new-password`, so no browser offers a saved password into it. `keyReadOnly` holds a row's key, and `valuePlaceholder` may differ per row. Controlled: every edit hands back a new list with each untouched row as it was. Rows may carry fields of their own (`KeyValueRows<T extends KeyValueRow>`), and then `createRow` makes a blank one, which the type requires. The group is a fieldset named by `label` (`hideLabel` keeps it for assistive technology only); `empty` is what an empty list says; `helper`, `error` and `disabled` are as on a field. Every word is the caller's (`labels`), with English defaults made from the column names by `keyValueRowsLabels(keyLabel, valueLabel)`. Types: `KeyValueRow`, `KeyValueRowsLabels`, `KeyValueRowsProps`. Stories: `KeyValueRows`.
+
+**`TableTwoLineCell` is new**: a value over a quieter line, each cut on one line, among the read-only table cells. The `value` is set in the cell's own register and the `detail` under it is a caption in the secondary ink, so a row of these is exactly two lines tall whatever they hold. `mono` (`TableTwoLineCellMono`: `value`, `detail` or `both`) sets a literal in the mono face. A mark stands centred against both lines, as a column's hidden `icon` or a row's read `mark`, and in a grid's stacked rows the lines give the row its baseline. A cut line shows its whole words on hover; `title` speaks for the whole cell instead, and `titleWhenCut={false}` leaves the words to a `Tooltip` around the cell. Types: `TableTwoLineCellProps`, `TableTwoLineCellMono`. Stories: `TableCells` Two Line Cells, and its right to left, stacked and both themes variants.
+
+**`RailList` is new**: a directory in a card, the groups its items are filed in as a rail beside the chosen group's list, so a long catalogue reads as a few short lists. The rail is a dense `SidebarNav`, each group (`RailListItem`) a row with its `count`, read as part of its name with `labels.counted` ("Chat, 6 apps"), the chosen one (`value`) raised and `aria-current`, with an optional quiet `note` under the rows. A group with an `href` is a link a reader can open in a new tab, and a plain click chooses it in place (`onChange`); without one it is a button. The chosen group's `description` stands over the list on a hairline, and a grid at the top of the list draws no second rule. Under 44rem of the card's own width the rail goes and a `Select` of the same groups, named by the same `label`, joins the bar across the top, so the same directory in a page and in a sheet needs nothing set. `toolbar` is the bar's content: given as a function, it is handed the picker to place among its own controls; given as content, the picker leads it. `renderLink` draws each row's link for a router. Every word is the caller's (`labels`, with `RAIL_LIST_LABELS` as the defaults). Types: `RailListItem`, `RailListLabels`, `RailListProps`. Stories: `RailList`.
+
+### Text
+
+**A `Text` cut by `truncate` or `clamp` shows its whole words on hover.** While the words are cut, the element's title carries them whole, read from the element as it is shown; while they fit, it carries none. The cut is measured when the pointer arrives, so the title never goes stale after a resize or a new value, and nothing is measured until then. A `title` the caller passes always wins, and `titleWhenCut={false}` leaves the title to whatever already shows the words, such as a `Tooltip`. Story: `Text` Whole Words When Cut.
+
+## Changes in 0.85.0
+
+### What needs a person, and who gets something
+
+**`AttentionList` is new**: what needs a person, as rows in one card like the page's others rather than a tinted banner each. A row is the tone's glyph in its feedback ink, the subject's picture (`media`, decorative), a one-line `title` over a quieter `meta` line, a Details control that opens `details` under the row, and the one fix (`action`) at the row's end in the page's own button. Problems come first, then warnings, then notes (`AttentionTone`: `danger`, `warning`, `info`), each in the order given. The card's header counts each tone with its glyph and says the counts in words to a screen reader; no strip, frame or ground takes the worst row's tone. Past `collapseAfter` rows (3) the rest fold behind "Show N more", and one row past the limit is shown rather than folded. Every row is a subgrid of the list's columns, so each Details and each fix stand in one column whatever their widths, and every title starts on one line whether or not its row has a picture; under the phone breakpoint the picture goes and Details and the fix take a line of their own. Each tone is said in words before its title. Every word is the caller's (`labels`, with `ATTENTION_LIST_LABELS` as the defaults), and so is the heading's level (`headingLevel`). Nothing is drawn when nothing needs attention. Types: `AttentionItem`, `AttentionListLabels`, `AttentionListProps`, `AttentionTone`. Stories: `AttentionList`.
+
+**`MemberPicker` is new**: who gets something, as one list of groups with a three-state box and a member count, each opening to its members (a face, a name and one quiet line), under a live count of everyone reached. A group's grant reaches whoever joins it later, so a group is chosen whole and its members are overrides: a member a chosen group reaches says so ("Through Product"), unticking it leaves it out of that grant (`except`), and a member of an unchosen group is chosen on its own (`members`). Choosing or unchoosing a group clears the overrides inside it. A group's box is ticked only when the group is chosen and reaches every member, and mixed when it is chosen with members left out or when its members are chosen on their own, so a box never says a newcomer is covered when they are not. A member listed under two groups is a row in each, and either row's box answers for the member. A member's name and line are its box's target, as a group's name is. Members in no group (`ungrouped`) follow the groups. The boxes are native checkboxes in the compact step, the open control is a small ghost `IconButton` with `aria-expanded`, and every word is the caller's (`labels`, with `MEMBER_PICKER_LABELS` speaking of agents by default). `chosenMembers(groups, ungrouped, value)` is the set a value reaches. Types: `MemberPickerGroup`, `MemberPickerLabels`, `MemberPickerMember`, `MemberPickerProps`, `MemberPickerValue`. Stories: `MemberPicker`.
+
+### Choices
+
+**A chosen `ChoiceCards` card opens its `detail` under its own row.** An option's `detail` (a narrower choice that belongs to it, such as which client a sign-in uses) is drawn while the card is chosen, as an item of the grid straight after its card and across every column; the grid packs densely, so the cards after it on that row fill the row back in and the rest follow the detail. It draws no frame of its own, since what it holds is usually a framed list, and it is a group named by its card, controlled by the card's radio. Stories: `ChoiceCards` Detail Under The Chosen Card, Detail Under Its Own Row.
+
+**A `ChoiceCards` tag can say a state.** `tagTone` (`ChoiceCardTagTone`: `success`, `warning`, `danger`, `info`) draws the tag in that tone's feedback ink and line, in the card's own pill; without it the pill stays neutral. Pass words as the `tag`, not a `Tag`, which drew a pill inside the pill. Story: `ChoiceCards` Tag Tones.
+
+**`ChoiceCards` takes `minCardWidth="xs"`** (8rem), for four short cards with a picture and one line across a form's column. Story: `ChoiceCards` Four Across.
+
+**`ChoiceList` sets its tag, radio and reason as a card does**, so a list nested in a chosen card's detail reads as part of it. Its `tag` is the pill a `ChoiceCards` card draws its tag in, in the secondary ink, with the strong edge on the chosen row (it was an 11px capital label). Its radio is the compact control step, 14px (was 13px), the compact `Checkbox`'s box, centred on the label's first line. A disabled choice's `disabledReason` takes a line of its own under its detail, where it ran on after the detail as the detail's next clause. Props are unchanged.
+
+### Tables, chips, values and steps
+
+**A stacked `DataGrid` row keeps its labels and its actions on the right lines.** In the card rows a grid stacks into, a value that led with a picture (a mark beside a name and its host) was labelled on its picture's line, the bottom of the mark, and the row's `action` cells stood alone on a line after every value. The words after a leading picture with no words of its own (an `svg`, an `img`, or a box holding nothing but one) now give the row its baseline, so the label stands on the name's line; a monogram avatar or an avatar stack, whose initials already gave it, keeps the words beside it centred on it. The actions stand on the row's first line at its end, and only that line gives up its width to them: every line after it spans the row. The compact phone row (`phoneRows="compact"`) is unchanged. Action cells carry `crewlet-data-grid__cell--action`. Story: `DataGrid` Stacked Rows Led By A Mark.
+
+**A `SegmentedControl` chip's count is a figure in the chip's own ink.** In the chips layout a count kept a tab's inset pill, so on the chosen chip its figure lay on the accent fill at 1.4:1. It now draws no pill and takes the chip's ink: on-accent on the chosen chip, secondary on the others. Story: `SegmentedControl` Chips With Counts.
+
+**A block `Copyable` shows its value whole**, wrapped at any character with every space kept, where it held the value to one line and scrolled it out of a narrow column behind an ellipsis. **An inline `Copyable` takes the size and ink of the row it stands in** (in the mono face, if asked), where it was a fixed 12px in the secondary ink. A caller that relied on the smaller inline value sets the size on the element around it. Stories: `Copyable` Inline In A Detail List, Block Long Address Narrow.
+
+**`Disclosure` takes `flush`**: its chevron and its panel start on the line its box starts on, for a section opened under a sentence (a request's arguments under the sentence that asks for it). Only the trigger's hover ground and focus ring reach into the gutter, as a flush `Button`'s do. Story: `Disclosure` Flush Under A Question.
+
+**`StepList` takes a `pending` state** for a step not yet started: the steps a check never reached, or the ones still to come. It draws a dashed circle (`CircleDashedGlyph`) in the tertiary ink, says "Not started" after the step's words (`labels.pending` changes it, to "Not reached" for example), and sets the step's words in the same quiet ink. `StepState` and `STEP_STATES` include it, so a `Record<StepState, ...>` of a caller's own needs a `pending` entry. Stories: `StepList` Not Reached, Under Way.
+
+### Icons
+
+**`@crewlethq/icons` adds the Cloudflare, Linear, PostgreSQL, Sentry and Stripe marks** to `VendorMark` (`cloudflare`, `linear`, `postgresql`, `sentry`, `stripe`), each Simple Icons' drawing from simple-icons 16.35.0 (CC0 1.0) in its brand's hex. Sentry's violet falls under 2:1 on the dark ground, so the dark themes draw it in the text colour, as Sentry publishes its glyph for a dark ground and as Mattermost's already is. The trademark notes name the new owners.
+
 ## Changes in 0.84.2
 
 **A directory's lines run to the hairline.** In a `ListDetail` the list pane kept its end inset (`--crewlet-list-detail-gutter`, 32px) before the hairline, and a `DirectoryList` inside it kept its own step and its scrollbar's gutter as well, so a line's state ("In use", "Connected") ended 60px before the line beside it. A list pane holding a `DirectoryList` now gives its end inset back: the lines end at the groups' own step before the scrollbar, as the rail's rows end at its edge. Every other list keeps the inset, and folded to one pane the list takes the screen's inset as before. Props are unchanged.

package/dist/Accordion/index.js

@@ -1,4 +1,4 @@
-export { Accordion, AccordionItem } from '../chunk-XNC3M4IN.js';
+export { Accordion, AccordionItem } from '../chunk-E2QPZGLG.js';
 import '../chunk-ULYHDP7U.js';
 import '../chunk-D2GT3CR4.js';
 import '../chunk-PQADV6P6.js';

package/dist/AgentHandoffPanel/index.js

@@ -1,8 +1,8 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-DD7RBNT4.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-XH55NRHO.js';
 import '../chunk-4MJN2KN6.js';
 import '../chunk-WFCWPXJN.js';
 import '../chunk-EBVZHVPD.js';
-import '../chunk-LVJGN5II.js';
+import '../chunk-NAHA62WD.js';
 import '../chunk-5ILRWUE7.js';
 import '../chunk-SKGOKLJD.js';
 import '../chunk-PIYJNCN7.js';

package/dist/ArtifactBar/index.js

@@ -1,5 +1,5 @@
 export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-HKUZ2GYX.js';
-import '../chunk-36WK24AI.js';
+import '../chunk-EVM6GYZ2.js';
 import '../chunk-AZYE7NR4.js';
 import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';

package/dist/AttentionList/AttentionList.d.ts

@@ -0,0 +1,82 @@
+import { type ReactNode } from 'react';
+import { type HeadingLevel } from '../utils/headingLevel.js';
+/** How much an item matters: something broken, something owed, or news. */
+export type AttentionTone = 'danger' | 'warning' | 'info';
+/** One thing that needs a person. */
+export interface AttentionItem {
+    key: string;
+    tone: AttentionTone;
+    /** What it is about, as a picture beside the title: a vendor's mark. Decorative. */
+    media?: ReactNode;
+    /** One line: what is wrong. */
+    title: ReactNode;
+    /** One quieter line: who it stops, since when. */
+    meta?: ReactNode;
+    /** Its one fix, at the row's end: a small secondary button or link. */
+    action?: ReactNode;
+    /** What else there is to read, behind Details: the recorded sentence, the remedy at length. */
+    details?: ReactNode;
+}
+export interface AttentionListLabels {
+    /** The panel's heading. */
+    title: string;
+    /** What each tone is called to a screen reader, before the title. */
+    tones: Record<AttentionTone, string>;
+    details: string;
+    /** The control that shows the rows past the first few: "Show 3 more". */
+    more: (hidden: number) => string;
+    less: string;
+    /** The heading's counts in words, for a screen reader: "1 problem, 2 warnings". */
+    summary: (counts: Record<AttentionTone, number>) => string;
+}
+export declare const ATTENTION_LIST_LABELS: AttentionListLabels;
+export interface AttentionListProps {
+    items: readonly AttentionItem[];
+    /** Rows shown before the rest fold behind "Show N more". */
+    collapseAfter?: number | undefined;
+    /** Any of the words, each tone's on its own: the rest keep their defaults. */
+    labels?: (Partial<Omit<AttentionListLabels, 'tones'>> & {
+        tones?: Partial<Record<AttentionTone, string>> | undefined;
+    }) | undefined;
+    /** The heading's level, where the surrounding outline does not decide it. */
+    headingLevel?: HeadingLevel | undefined;
+    className?: string | undefined;
+}
+/**
+ * What needs a person, as one quiet panel of rows instead of a banner each:
+ * the tone's glyph in its ink, the subject's mark, a one-line title over a
+ * quieter line, and the one fix at the row's end in the page's own button,
+ * so the colour of a warning never fights the colour of its action. What
+ * there is to read at length opens under the row, behind Details. Problems
+ * first, then warnings, then notes, each in the order given.
+ *
+ * THE PANEL IS A CARD LIKE ITS NEIGHBOURS: the page's own surface, hairline
+ * and corner, and a header in the card's own type with the counts at its end.
+ * No strip, border or ground takes the worst row's tone. A tinted frame made
+ * the panel the loudest thing on the page whatever it held, and said the
+ * same thing as the glyphs inside it a second time; severity is each row's
+ * glyph, and the header's counts are those glyphs again, small, in the
+ * tertiary type.
+ *
+ * MANY ROWS FOLD TO A SUMMARY: the header counts them by tone, the first few
+ * stay, and the rest open on request, so a bad day does not push the page's
+ * own content off the screen.
+ *
+ * ONE SET OF COLUMNS FOR EVERY ROW: glyph, mark, words, Details, the fix. The
+ * rows are subgrids of the list, so each Details and each fix stands in one
+ * column whatever the width of the button beside it, every title starts on
+ * one line whether or not its row has a mark, and what opens under a row
+ * starts on the title's own line. Were each row to size its own end slot,
+ * four fixes of four widths would put four Details at four places. Details
+ * and the fold are the kit's small ghost Button, the step of the fix beside
+ * them.
+ *
+ * The tone is said in words before each title ("Problem: ..."), for a reader
+ * who cannot tell the glyphs apart, and each Details names the body it opens
+ * by an id taken from the row's position, never its key, since a key may hold
+ * a space and an id reference list splits on whitespace.
+ *
+ * Nothing when there is nothing: a panel that says all is well is noise
+ * beside a page that shows it.
+ */
+export declare function AttentionList({ items, collapseAfter, labels: overrides, headingLevel, className }: AttentionListProps): import("react").JSX.Element | null;

package/dist/AttentionList/index.d.ts

@@ -0,0 +1,3 @@
+import './AttentionList.css';
+export { AttentionList, ATTENTION_LIST_LABELS } from './AttentionList.js';
+export type { AttentionItem, AttentionListLabels, AttentionListProps, AttentionTone } from './AttentionList.js';

package/dist/AttentionList/index.js

@@ -0,0 +1,9 @@
+export { ATTENTION_LIST_LABELS, AttentionList } from '../chunk-AELKT34H.js';
+import '../chunk-U2IQNDDR.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
+import '../chunk-D2GT3CR4.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/AttentionList-LVX7KRET.css

@@ -0,0 +1,212 @@
+/*
+ * What needs a person: a card like the page's other panels (Card supplies the
+ * surface, the hairline, the corner and the header), rows a line or two high,
+ * and the tone in each row's glyph alone. Nothing here tints the frame: the
+ * row's action is the page's own button, and the panel sits as calmly as the
+ * cards beside it.
+ */
+
+/* The header's counts: each tone's glyph in its ink beside a figure in the
+   header's quiet type, so the summary reads as the rows' glyphs, small. */
+.crewlet-attention-list__counts {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-3);
+}
+
+.crewlet-attention-list__count {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-attention-list__count.is-danger svg {
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-attention-list__count.is-warning svg {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-attention-list__count.is-info svg {
+  color: var(--color-feedback-info-ink);
+}
+
+/*
+ * ONE SET OF COLUMNS FOR EVERY ROW. The list holds the tracks and each row is
+ * a subgrid of them, so a Details and a fix stand in one column down the
+ * panel whatever the width of each fix, every title starts on one line
+ * whether or not its row has a mark, and the body that opens under a row
+ * starts on that line too. The mark's track is there only when a row has a
+ * mark (`--media`), since an empty track still takes a gap each side.
+ */
+.crewlet-attention-list__rows {
+  --crewlet-attention-list-line: calc(var(--font-size-sm) * var(--font-line-height-normal));
+
+  display: grid;
+  grid-template-columns: [glyph] auto [text] minmax(0, 1fr) [details] auto [action] auto [end];
+  column-gap: var(--spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-attention-list__rows--media {
+  grid-template-columns: [glyph] auto [media] auto [text] minmax(0, 1fr) [details] auto [action] auto [end];
+}
+
+.crewlet-attention-list__item {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+}
+
+.crewlet-attention-list__item + .crewlet-attention-list__item {
+  border-top: 1px solid var(--color-border-default);
+}
+
+/* A ghost Details takes no gutter back here: it stands in a column of its
+   own, and pulled out it would reach into the words before it. */
+.crewlet-attention-list__row {
+  --crewlet-btn-flush-outdent: 0px;
+
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  align-items: center;
+  min-height: var(--size-row-lg);
+  padding: var(--spacing-2) var(--spacing-4);
+}
+
+/* THE GLYPH STANDS ON THE TITLE'S LINE, as a Callout's does: a box one title
+   line tall at the row's top, the glyph centred in it. Centred on the row, it
+   would sit beside the second line of a title that wraps (a phone's width
+   wraps them). A row of one line is centred whole, since its line is the
+   row's middle. */
+.crewlet-attention-list__glyph {
+  display: inline-flex;
+  grid-column: glyph;
+  align-self: start;
+  align-items: center;
+  block-size: var(--crewlet-attention-list-line);
+}
+
+.crewlet-attention-list__row:not(:has(.crewlet-attention-list__meta)) .crewlet-attention-list__glyph {
+  align-self: center;
+}
+
+.crewlet-attention-list__glyph.is-danger {
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-attention-list__glyph.is-warning {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-attention-list__glyph.is-info {
+  color: var(--color-feedback-info-ink);
+}
+
+/* A MARK IS CENTRED ON THE TWO LINES, as a table row centres its mark: it is
+   the height of the pair, not of a title's line. */
+.crewlet-attention-list__media {
+  display: inline-flex;
+  grid-column: media;
+}
+
+.crewlet-attention-list__text {
+  display: flex;
+  grid-column: text;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-attention-list__line {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-normal);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-attention-list__meta {
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Details and the fix are each a column of their own (see the rows). */
+.crewlet-attention-list__end {
+  display: contents;
+}
+
+.crewlet-attention-list__details {
+  grid-column: details;
+}
+
+.crewlet-attention-list__action {
+  display: inline-flex;
+  grid-column: action;
+  justify-self: end;
+}
+
+.crewlet-attention-list__details[aria-expanded='true'] svg {
+  transform: rotate(180deg);
+}
+
+/* What opens under a row starts on its title's line and keeps the card's edge. */
+.crewlet-attention-list__body {
+  grid-column: text / end;
+  padding: 0 var(--spacing-4) var(--spacing-3) 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  overflow-wrap: anywhere;
+}
+
+/* The fold's control on a row of its own, its words on the card's text edge,
+   where every glyph stands. */
+.crewlet-attention-list__foot {
+  padding: var(--spacing-1) var(--spacing-4);
+  border-top: 1px solid var(--color-border-default);
+}
+
+@media (width < 640px) {
+  /* No mark, and Details and the fix wrap onto a line of their own under the
+     words, Details first on the title's line. */
+  .crewlet-attention-list__rows,
+  .crewlet-attention-list__rows--media {
+    grid-template-columns: [glyph] auto [text] minmax(0, 1fr) [end];
+  }
+
+  .crewlet-attention-list__row {
+    --crewlet-btn-flush-outdent: initial;
+  }
+
+  .crewlet-attention-list__media {
+    display: none;
+  }
+
+  .crewlet-attention-list__line,
+  .crewlet-attention-list__meta {
+    white-space: normal;
+  }
+
+  .crewlet-attention-list__row:not(:has(.crewlet-attention-list__meta)) .crewlet-attention-list__glyph {
+    align-self: start;
+  }
+
+  .crewlet-attention-list__end {
+    display: flex;
+    grid-column: text / end;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-2);
+  }
+}

package/dist/AvatarPicker/index.js

@@ -1,8 +1,8 @@
-export { AvatarPicker } from '../chunk-22CU7V4J.js';
+export { AvatarPicker } from '../chunk-K2HEYQJL.js';
 import '../chunk-SHH7UD5U.js';
 import '../chunk-EC6EUIAD.js';
-import '../chunk-AYKXMIOR.js';
 import '../chunk-LNQSNXGJ.js';
+import '../chunk-AYKXMIOR.js';
 import '../chunk-XZY6S3UC.js';
 import '../chunk-AZYE7NR4.js';
 import '../chunk-MVKUE4FI.js';

package/dist/ChangeList/index.js

@@ -1,8 +1,8 @@
-export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, ChangeListItems, shortenUnchanged } from '../chunk-AOJ6ZA77.js';
+export { CHANGE_LIST_COLLAPSE_OVER, CHANGE_LIST_LABELS, ChangeList, ChangeListItems, shortenUnchanged } from '../chunk-3MFRTZH6.js';
 import '../chunk-LR4IWUWQ.js';
 import '../chunk-LBGKLYBY.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-LVJGN5II.js';
+import '../chunk-NAHA62WD.js';
 import '../chunk-ULYHDP7U.js';
 import '../chunk-D2GT3CR4.js';
 import '../chunk-PQADV6P6.js';

package/dist/ChoiceCards/ChoiceCards.d.ts

@@ -17,8 +17,17 @@ export interface ChoiceCardOption {
     label: ReactNode;
     /** A picture of the choice before its name: a product's mark, a glyph. Decorative; the label names it. */
     media?: ReactNode;
-    /** A short word beside the choice's name, read as part of its name: "Company default". */
+    /**
+     * A short word beside the choice's name, read as part of its name: "Company
+     * default". Words, drawn in the card's own pill: a Tag handed in here was a
+     * pill inside a pill. Give it a tone with `tagTone`.
+     */
     tag?: ReactNode;
+    /**
+     * The tag's state, where it says one ("Not reviewed" in the warning ink and
+     * line); left out, the neutral pill.
+     */
+    tagTone?: ChoiceCardTagTone | undefined;
     /** One plain line saying what choosing it means. */
     description?: ReactNode;
     /** A few short facts, one to a line under the description, each its name and its value. */
@@ -37,9 +46,19 @@ export interface ChoiceCardOption {
      * the same lines as the cards beside it rather than growing one.
      */
     disabledReasonAt?: number | undefined;
+    /**
+     * What the choice opens once chosen, drawn on a line of its own straight
+     * under the chosen card's row: a second, narrower choice that belongs to
+     * this one (which OAuth client a sign-in uses). Shown only while the card is
+     * chosen, so the cards stay one shape and the detail is never a dead
+     * control.
+     */
+    detail?: ReactNode;
 }
-/** The narrowest a card stands: `sm` 15rem, `md` 20rem, `lg` 24rem. */
-export type ChoiceCardsMinWidth = 'sm' | 'md' | 'lg';
+/** The states a card's tag can say, each drawn in its feedback ink and line. */
+export type ChoiceCardTagTone = Extract<Tone, 'success' | 'warning' | 'danger' | 'info'>;
+/** The narrowest a card stands: `xs` 8rem, `sm` 15rem, `md` 20rem, `lg` 24rem. */
+export type ChoiceCardsMinWidth = 'xs' | 'sm' | 'md' | 'lg';
 /**
  * How much room a card's lines take: `comfortable`, the default, or
  * `compact`, tighter padding and gaps and a smaller picture, for a set of
@@ -54,9 +73,11 @@ export interface ChoiceCardsProps {
     value: string | null;
     onChange: (value: string) => void;
     /**
-     * The narrowest a card stands, which decides how many share a row: `sm`
-     * (15rem) for three compact cards across a form's wide column, `md` (20rem)
-     * for a short name and facts, `lg` (24rem) for choices with more to say. A
+     * The narrowest a card stands, which decides how many share a row: `xs`
+     * (8rem) for four short cards with a picture and one line, such as where a
+     * thing comes from, `sm` (15rem) for three compact cards across a form's
+     * wide column, `md` (20rem) for a short name and facts, `lg` (24rem) for
+     * choices with more to say. A
      * form's column holds one to a row; a wider surface two or three. Under any
      * of them a phone's width stacks the cards, one to a row.
      */
@@ -90,5 +111,13 @@ export interface ChoiceCardsProps {
  *
  * A FACT'S STATE IS NEVER ONLY A COLOUR: the dot sits beside words that say
  * it ("Docker 24.0.7 found", "E2B key not set").
+ *
+ * A CHOSEN CARD'S DETAIL OPENS UNDER ITS OWN ROW, not under the whole grid:
+ * it is an item of the grid, after its card, across every column, and the
+ * grid packs densely, so the cards after it on that row fill the row back in
+ * and the rest follow the detail. Under the grid, with a second row of cards
+ * between, the chosen card and its options read as two separate questions.
+ * It draws no frame of its own: what it holds is usually a framed list, and a
+ * frame round a frame is two boxes for one choice.
  */
 export declare function ChoiceCards({ label, options, value, onChange, minCardWidth, density, className, }: ChoiceCardsProps): import("react").JSX.Element;

package/dist/ChoiceCards/index.d.ts

@@ -1,3 +1,3 @@
 import './ChoiceCards.css';
 export { ChoiceCards } from './ChoiceCards.js';
-export type { ChoiceCardFact, ChoiceCardOption, ChoiceCardsDensity, ChoiceCardsMinWidth, ChoiceCardsProps } from './ChoiceCards.js';
+export type { ChoiceCardFact, ChoiceCardOption, ChoiceCardsDensity, ChoiceCardsMinWidth, ChoiceCardsProps, ChoiceCardTagTone, } from './ChoiceCards.js';

package/dist/ChoiceCards/index.js

@@ -1,3 +1,3 @@
-export { ChoiceCards } from '../chunk-B7NX425Z.js';
+export { ChoiceCards } from '../chunk-JDMJVVVQ.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ChoiceCards-TVMBO3HZ.css → ChoiceCards-KHJW2FKO.css}

@@ -28,10 +28,17 @@
     minmax(min(100%, var(--crewlet-choice-cards-min)), 1fr)
   );
   grid-auto-rows: auto;
+  /* DENSE, for a chosen card's detail: it spans every column after its card,
+     and the cards after it on that row pack back in before it (see below). */
+  grid-auto-flow: row dense;
   column-gap: var(--spacing-3);
   row-gap: 0;
 }
 
+.crewlet-choice-cards--xs {
+  --crewlet-choice-cards-min: 8rem;
+}
+
 .crewlet-choice-cards--sm {
   --crewlet-choice-cards-min: 15rem;
 }
@@ -194,6 +201,32 @@
   border-color: var(--color-border-strong);
 }
 
+/* A TAG THAT SAYS A STATE takes its feedback ink and line, in the card's own
+   pill: a kit Tag handed in drew a second pill inside this one. */
+.crewlet-choice-cards__tag.is-success,
+.crewlet-choice-cards__card.is-checked .crewlet-choice-cards__tag.is-success {
+  border-color: var(--color-feedback-success-line);
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-choice-cards__tag.is-warning,
+.crewlet-choice-cards__card.is-checked .crewlet-choice-cards__tag.is-warning {
+  border-color: var(--color-feedback-warning-line);
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-choice-cards__tag.is-danger,
+.crewlet-choice-cards__card.is-checked .crewlet-choice-cards__tag.is-danger {
+  border-color: var(--color-feedback-danger-line);
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-choice-cards__tag.is-info,
+.crewlet-choice-cards__card.is-checked .crewlet-choice-cards__tag.is-info {
+  border-color: var(--color-feedback-info-line);
+  color: var(--color-feedback-info-ink);
+}
+
 /*
  * THE NAME IS THE TITLE LINE'S STRUT: at least the title step tall, its words
  * centred in it. The title wraps (a tag that does not fit takes a line of its
@@ -371,3 +404,19 @@
     transition: none;
   }
 }
+
+/*
+ * A CHOSEN CARD'S DETAIL: the narrower choice it opens, on a line of its own
+ * straight under the chosen card's row (an item of the grid after its card,
+ * across every column, packed densely), so it reads as part of that choice and
+ * not as a second question. NO FRAME OF ITS OWN: what it holds is usually a
+ * framed list, and a tinted, bordered panel round it was a box in a box. It
+ * keeps the gap a row of cards keeps below it.
+ */
+.crewlet-choice-cards__detail {
+  display: grid;
+  grid-column: 1 / -1;
+  gap: var(--spacing-2);
+  min-width: 0;
+  margin-block-end: var(--spacing-3);
+}

package/dist/ChoiceList/ChoiceList.d.ts

@@ -53,8 +53,8 @@ export interface ChoiceListProps {
  * NATIVE RADIOS, so the arrow keys move the choice and Tab leaves the group as
  * the platform does, and every row is its radio's label, so the whole row
  * takes the pointer. A disabled choice is skipped by the arrows, keeps its
- * words at full contrast, and says why on its detail line. A choice's `panel` is drawn under it only while it is
- * selected, which is how a list ends in "Something else" with a field of its
+ * words at full contrast, and says why on a line of its own under its detail.
+ * A choice's `panel` is drawn under it only while it is selected, which is how a list ends in "Something else" with a field of its
  * own without a second control beside the list.
  */
 export declare function ChoiceList({ options, value, onChange, label, footer, disabled, className }: ChoiceListProps): import("react").JSX.Element;

package/dist/ChoiceList/index.js

@@ -1,3 +1,3 @@
-export { ChoiceList } from '../chunk-6RW2MUTY.js';
+export { ChoiceList } from '../chunk-XU7RQNT6.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-ODEQTPFM.js';