@crewlethq/ui 0.85.0 → 0.86.0

package/README.md

@@ -41,9 +41,9 @@ 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`, `MemberPicker` (groups granted whole, with members left out or chosen on their own, and `chosenMembers`), `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`, `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` |
@@ -51,7 +51,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | 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,20 @@ 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

package/dist/DataView/index.js

@@ -4,11 +4,11 @@ import '../chunk-K4LZXSKZ.js';
 import '../chunk-7K6LVM5I.js';
 import '../chunk-WANKINXG.js';
 import '../chunk-ZXXZESCD.js';
+import '../chunk-YGRTX67J.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-YGRTX67J.js';
-import '../chunk-EE3DJMSQ.js';
 import '../chunk-NXFTCPF6.js';
+import '../chunk-EE3DJMSQ.js';
 import '../chunk-EC6EUIAD.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';

package/dist/KeyValueRows/KeyValueRows.d.ts

@@ -0,0 +1,125 @@
+import { type ReactNode } from 'react';
+/** One key and its value: a header and what it carries, a variable and what it is set to. */
+export interface KeyValueRow {
+    /**
+     * Stable across edits, and unique in the list: the row's identity while its
+     * key is typed, emptied or repeated. Two rows may share a key; never an id.
+     */
+    id: string;
+    key: string;
+    value: string;
+}
+/** Every word the rows say, beyond the names of their two columns. */
+export interface KeyValueRowsLabels {
+    /** Names a row's key field: "Header 2". */
+    key: (position: number) => string;
+    /** Names a row's value field by its key: "Value for Authorization", or "Value for header 2" before one is typed. */
+    value: (key: string, position: number) => string;
+    /** Names a row's remove button: "Remove Authorization". */
+    remove: (key: string, position: number) => string;
+    /** The add action's words: "Add header". */
+    add: string;
+    /** Said once a row is removed, since the row's going is otherwise silent: "Removed Authorization". */
+    removed: (key: string, position: number) => string;
+}
+/**
+ * The rows' words in English, made from the two column names: `Header` and
+ * `Value` give "Header 2", "Value for Authorization", "Remove Authorization"
+ * and "Add header". A caller whose key column is an acronym (`URL`) or not in
+ * English passes its own `labels`.
+ */
+export declare function keyValueRowsLabels(keyLabel: string, valueLabel?: string): KeyValueRowsLabels;
+interface KeyValueRowsBaseProps<T extends KeyValueRow> {
+    /**
+     * What the list is: "Headers", "Environment variables". The group's legend,
+     * read on entering it.
+     */
+    label: string;
+    /**
+     * The legend is kept for assistive technology and drawn for nobody, where
+     * the column head or a heading right above already names the list.
+     */
+    hideLabel?: boolean | undefined;
+    /** The key column's head, and the name each key field is called by: "Header", "Variable". */
+    keyLabel: string;
+    /** The value column's head. "Value" by default. */
+    valueLabel?: string | undefined;
+    value: readonly T[];
+    onChange: (next: T[]) => void;
+    keyPlaceholder?: string | undefined;
+    /** The value field's placeholder, the same for every row or per row (a stored secret says so). */
+    valuePlaceholder?: string | ((row: T) => string | undefined) | undefined;
+    /**
+     * The values are secrets (a token, a password): each value field hides what
+     * is typed, and no browser offers a saved password for it.
+     */
+    secret?: boolean | undefined;
+    /**
+     * A row whose key may not change, such as one already saved: its key field
+     * is read only, and its value and its remove button still work.
+     */
+    keyReadOnly?: ((row: T) => boolean) | undefined;
+    /** Why a row's key was refused, said under that key and linked to it. */
+    keyError?: ((row: T, index: number) => ReactNode) | undefined;
+    /** Why a row's value was refused, said under that value and linked to it. */
+    valueError?: ((row: T, index: number) => ReactNode) | undefined;
+    /**
+     * What the list says while it holds no row, in place of the rows. Left out,
+     * an empty list is its legend and its add action.
+     */
+    empty?: ReactNode;
+    /** Where the keys come from, or what shape they take, under the add action. */
+    helper?: ReactNode;
+    /** Why the list as a whole was refused. */
+    error?: ReactNode;
+    disabled?: boolean | undefined;
+    /** Words in place of the ones `keyValueRowsLabels` makes from `keyLabel` and `valueLabel`. */
+    labels?: Partial<KeyValueRowsLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * A blank row for the add action. Optional while a row is nothing but its id,
+ * key and value, when the list makes `{ id, key: '', value: '' }` itself;
+ * required once the caller's rows carry a field of their own that a blank row
+ * must set.
+ *
+ * AN EMPTY LIST NAMES NO ROW TYPE. `value={[]}` infers `never`, which no row
+ * is assignable to, so a test of assignability alone asked an empty list for
+ * a `createRow` it has no use for. A list whose row type was never inferred
+ * makes its own blank rows too.
+ */
+type RowMaker<T extends KeyValueRow> = [T] extends [never] ? {
+    createRow?: (() => T) | undefined;
+} : KeyValueRow extends T ? {
+    createRow?: (() => T) | undefined;
+} : {
+    createRow: () => T;
+};
+export type KeyValueRowsProps<T extends KeyValueRow = KeyValueRow> = KeyValueRowsBaseProps<T> & RowMaker<T>;
+/**
+ * Keys and their values, edited as rows under one column head: request
+ * headers, environment variables, any list of names and what each is set to.
+ *
+ * ONE HEAD OVER THE COLUMNS, SO EVERY ROW IS THE SAME ROW. The key and value
+ * columns are named once, above the first row, and each field's own name is
+ * read rather than drawn ("Header 2", "Value for Authorization"). A label
+ * drawn on the first row only stood that row taller than the rest, and the
+ * value and the remove button beside it lost the line they shared.
+ *
+ * AN ERROR MOVES NOTHING BESIDE IT. Every row stands on its fields' top edge,
+ * so a refused key grows its own cell downward and the value and the remove
+ * button stay level with the key's field.
+ *
+ * THE REMOVE BUTTON IS THE FIELDS' HEIGHT, a square at the control step, so a
+ * row is one line of three controls. Add is a flush quiet action under the
+ * rows, its words on the fields' own edge.
+ *
+ * FOCUS NEVER FALLS TO THE PAGE. Add puts it 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.
+ *
+ * Controlled: the rows are the caller's, and every edit hands back a new
+ * list with each untouched row as it was.
+ */
+export declare function KeyValueRows<T extends KeyValueRow = KeyValueRow>(props: KeyValueRowsProps<T>): import("react").JSX.Element;
+export {};

package/dist/KeyValueRows/index.d.ts

@@ -0,0 +1,3 @@
+import './KeyValueRows.css';
+export { KeyValueRows, keyValueRowsLabels } from './KeyValueRows.js';
+export type { KeyValueRow, KeyValueRowsLabels, KeyValueRowsProps } from './KeyValueRows.js';

package/dist/KeyValueRows/index.js

@@ -0,0 +1,12 @@
+export { KeyValueRows, keyValueRowsLabels } from '../chunk-TRZS7DLB.js';
+import '../chunk-O7N6W52M.js';
+import '../chunk-PGCLHYVP.js';
+import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-UAUP6XGK.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/KeyValueRows-US5KW7JK.css

@@ -0,0 +1,44 @@
+/*
+ * KeyValueRows: keys and their values as rows under one column head
+ * (KeyValueRows.tsx).
+ */
+
+/* The rows, then Add under them, a row's gap apart. */
+.crewlet-key-value-rows__body,
+.crewlet-key-value-rows__table {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/*
+ * EVERY ROW STANDS ON ITS FIELDS' TOP EDGE, so a key's error grows its own
+ * cell downward and nothing beside it moves. The last track is the remove
+ * button's, a square the fields' height, and the head keeps it empty so the
+ * value's name stands over the value column.
+ */
+.crewlet-key-value-rows__head,
+.crewlet-key-value-rows__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--size-control-md);
+  align-items: start;
+  gap: var(--spacing-2);
+}
+
+/* The head stands over the first row at a field label's distance from its field. */
+.crewlet-key-value-rows__head {
+  margin-block-end: calc(var(--spacing-1) - var(--spacing-2));
+}
+
+.crewlet-key-value-rows__empty {
+  margin: 0;
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-secondary);
+}
+
+/* Add hugs its words, on the fields' start edge, rather than spanning the list. */
+.crewlet-key-value-rows__add {
+  display: flex;
+}

package/dist/PresenterView/index.js

@@ -1,6 +1,6 @@
-export { PresenterView, formatStopwatch } from '../chunk-LMEMH6DO.js';
-import '../chunk-5AJR6X75.js';
+export { PresenterView, formatStopwatch } from '../chunk-WCJTOKTY.js';
 import '../chunk-O6EV6GKI.js';
+import '../chunk-5AJR6X75.js';
 import '../chunk-RK4XPHVG.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';

package/dist/RailList/RailList.d.ts

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react';
+import { type NavItemProps } from '../SidebarNav/index.js';
+/** One of the groups a directory files its items in, and the rail's row for it. */
+export interface RailListItem {
+    /** Unique among the items, and what `value` names. An empty key is a fine "All". */
+    key: string;
+    label: string;
+    /** How many items the group holds: a quiet figure at the row's end, and after the label in the folded picker. */
+    count?: number | undefined;
+    /**
+     * The group's own address, where the chosen group is kept in the page's
+     * address: the row is then a link a reader can open in a new tab, and a
+     * plain click still chooses it in place.
+     */
+    href?: string | undefined;
+    /** One quiet line about the group, said over the list while it is chosen: what the group holds. */
+    description?: ReactNode;
+}
+/** Every word the rail and its picker say, beyond the items' own labels. */
+export interface RailListLabels {
+    /** What a count counts, read after the figure as part of the row's name: "apps" makes "Chat, 6 apps". */
+    counted: string;
+    /** A group as the folded picker names it: "Chat (6)". */
+    option: (label: string, count: number | undefined) => string;
+}
+export declare const RAIL_LIST_LABELS: RailListLabels;
+export interface RailListProps {
+    /** Names the rail's navigation and the picker it folds into: "Categories", "Template kinds". */
+    label: string;
+    /** The groups, in the order the rail lists them; an "All" group is one of them, usually the first. */
+    items: readonly RailListItem[];
+    /** The chosen group's key. */
+    value: string;
+    onChange: (key: string) => void;
+    /**
+     * The bar across the top of the card, over the rail and the list: a search
+     * and filter chips. Where the card is too narrow for the rail, the picker
+     * it folds into joins this bar. Given as a function, it is handed the
+     * picker to place among its own controls; given as content, the picker
+     * leads the bar. Left out, the bar is drawn only to hold the picker.
+     */
+    toolbar?: ReactNode | ((picker: ReactNode) => ReactNode);
+    /** One quiet fact about the whole directory, under the rail's rows: what every item in it has in common. */
+    note?: ReactNode;
+    /** The list the chosen group shows: a grid, a list of tiles. */
+    children: ReactNode;
+    /** Draws each rail row's link, for a router that owns navigation (`SidebarNav`'s `renderLink`). */
+    renderLink?: NavItemProps['renderLink'];
+    labels?: Partial<RailListLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * A directory in a card: a rail of the groups its items are filed in, beside
+ * the list of the chosen group, so a long catalogue reads as a few short
+ * lists: apps in what they are for, templates in their kinds, reports in
+ * the teams that read them.
+ *
+ * THE RAIL IS THE APPLICATION'S RAIL, DENSER (`SidebarNav` `dense`), each
+ * group a row with its count, the chosen one raised and `aria-current`, on a
+ * hairline of its own beside the list, with an optional quiet note under its
+ * rows. The chosen group's description, where it has one, stands over the
+ * list on a hairline, so a reader knows what the short list is.
+ *
+ * IT FOLDS BY ITS OWN WIDTH, NOT THE WINDOW'S. Under 44rem of the card's
+ * width the rail does not leave the list a readable column, so the rail goes
+ * and a `Select` of the same groups, named the same, joins the bar across the
+ * top. The same directory in a page and in a 560px sheet is one component
+ * with nothing to set: the sheet is simply narrow.
+ *
+ * Controlled: the chosen group is the caller's, often kept in the page's
+ * address (`href` on each group), so a group opened in a new tab and Back
+ * both keep it.
+ */
+export declare function RailList({ label, items, value, onChange, toolbar, note, children, renderLink, labels: overrides, className, }: RailListProps): import("react").JSX.Element;

package/dist/RailList/index.d.ts

@@ -0,0 +1,3 @@
+import './RailList.css';
+export { RAIL_LIST_LABELS, RailList } from './RailList.js';
+export type { RailListItem, RailListLabels, RailListProps } from './RailList.js';

package/dist/RailList/index.js

@@ -0,0 +1,17 @@
+export { RAIL_LIST_LABELS, RailList } from '../chunk-REWKR3S4.js';
+import '../chunk-BRK3HXGZ.js';
+import '../chunk-3IWZVEXA.js';
+import '../chunk-O5CEG7TQ.js';
+import '../chunk-YGRTX67J.js';
+import '../chunk-TEV5REGB.js';
+import '../chunk-HBDA76EZ.js';
+import '../chunk-U2IQNDDR.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-D2GT3CR4.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/RailList-N2ZBPRM2.css

@@ -0,0 +1,97 @@
+/*
+ * RailList: a directory in a card, a rail of groups beside the chosen
+ * group's list, folding into a picker where the card is narrow
+ * (RailList.tsx).
+ *
+ * SIZED BY ITS OWN WIDTH, NOT THE WINDOW'S, because the same directory stands
+ * in a page and in a sheet: the root is an inline-size container, and under
+ * the rail's room (44rem) the rail goes and the picker shows. Both are always
+ * rendered and the stylesheet decides, so the fold costs no measurement and
+ * never draws the wrong one first.
+ */
+.crewlet-rail-list {
+  container: crewlet-rail-list / inline-size;
+  min-width: 0;
+}
+
+/* The bar across the card's top: the caller's search and chips, and the folded picker. */
+.crewlet-rail-list__bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  border-block-end: 1px solid var(--color-border-default);
+}
+
+/* Wide, the rail is the choice: the picker and a bar that holds nothing else are not drawn. */
+.crewlet-rail-list__picker,
+.crewlet-rail-list__bar--picker-only {
+  display: none;
+}
+
+/* The rail at a fixed width (13rem by default), the list taking the rest. */
+.crewlet-rail-list__body {
+  display: grid;
+  grid-template-columns: var(--crewlet-rail-list-rail, 13rem) minmax(0, 1fr);
+  min-width: 0;
+}
+
+/* The rail on a hairline of its own, its note a step under its rows. */
+.crewlet-rail-list__rail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-2);
+  border-inline-end: 1px solid var(--color-border-default);
+}
+
+/* The note starts on the rows' words, inside the dense rail's own inset. */
+.crewlet-rail-list__note {
+  margin: 0;
+  padding-inline: var(--spacing-2);
+}
+
+.crewlet-rail-list__list {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* What the chosen group holds, over its list on a hairline, at the list's own inset. */
+.crewlet-rail-list__about {
+  margin: 0;
+  padding: var(--spacing-2) var(--spacing-4);
+  border-block-end: 1px solid var(--color-border-default);
+}
+
+/*
+ * A GRID AT THE LIST'S TOP TAKES NO RULE OF ITS OWN. A grid in a card draws
+ * one rule above its head to part it from the card's head (DataGrid.css);
+ * here the bar's hairline, the description's or the card's own edge is
+ * already that rule, and the grid's drew a second line under it.
+ */
+.crewlet-rail-list__list > .crewlet-data-grid:first-child,
+.crewlet-rail-list__about + .crewlet-data-grid {
+  border-top: 0;
+}
+
+/* Under the rail's room the list takes the card, and the picker takes the rail's place in the bar. */
+@container crewlet-rail-list (width < 44rem) {
+  .crewlet-rail-list__body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .crewlet-rail-list__rail {
+    display: none;
+  }
+
+  .crewlet-rail-list__picker {
+    display: inline-flex;
+  }
+
+  .crewlet-rail-list__bar--picker-only {
+    display: flex;
+  }
+}

package/dist/RelatedRow/index.js

@@ -1,5 +1,5 @@
-export { RelatedRow } from '../chunk-EAHEJNVJ.js';
-import '../chunk-QP2P6GDQ.js';
+export { RelatedRow } from '../chunk-CL3FWLDO.js';
+import '../chunk-O5CEG7TQ.js';
 import '../chunk-ZAC7SKUN.js';
 import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';

package/dist/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-AUSFKGKL.js';
+export { RichEditor, preloadRichEditor } from '../chunk-3AMWXJQX.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-2DMTW2Y3.js';
 import '../chunk-KOJPDCGQ.js';
 import '../chunk-KBZO4B33.js';

package/dist/SetupWizard/index.js

@@ -1,6 +1,6 @@
-export { SetupWizard } from '../chunk-3BVNNQZY.js';
-import '../chunk-FPDIHEM4.js';
+export { SetupWizard } from '../chunk-WRZPO4YL.js';
 import '../chunk-TMML7BHT.js';
+import '../chunk-FPDIHEM4.js';
 import '../chunk-YJQXESOJ.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-NAHA62WD.js';

package/dist/ShareDialog/index.js

@@ -1,10 +1,10 @@
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-Y7PPKQFQ.js';
 import '../chunk-3IWZVEXA.js';
 import '../chunk-ZXXZESCD.js';
+import '../chunk-YGRTX67J.js';
 import '../chunk-ETNQYT5O.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-YGRTX67J.js';
 import '../chunk-BPCY7ZID.js';
 import '../chunk-HF5L56YQ.js';
 import '../chunk-YTLWOHOY.js';

package/dist/TableCells/TableCells.d.ts

@@ -151,3 +151,63 @@ export type TableTextCellProps = {
  * would draw the column's answer over the row's.
  */
 export declare function TableTextCell({ children, icon, mark }: TableTextCellProps): import("react").JSX.Element;
+/** Which of a two-line cell's lines is a literal, set in the mono face. */
+export type TableTwoLineCellMono = 'value' | 'detail' | 'both';
+export type TableTwoLineCellProps = {
+    /** The value, in the cell's own register: a name, a key, a short state. */
+    value: ReactNode;
+    /**
+     * The quieter line under it, a caption in the secondary ink: where it runs,
+     * the id it resolves to, when it last answered. Left out, the cell is the
+     * value's one line, at the same place a row of two-line cells puts it.
+     */
+    detail?: ReactNode;
+    /**
+     * Which line is a literal (a command, an id, a key), set in the mono face:
+     * in the sans face `--` and `=` read as prose.
+     */
+    mono?: TableTwoLineCellMono | undefined;
+    /**
+     * The whole cell's hover text, where the two lines are not the whole story
+     * (a model's CLI, key and id in one line). Given, neither line adds its own.
+     */
+    title?: string | undefined;
+    /**
+     * Whether a cut line carries its whole words as its title (`Text`'s
+     * `titleWhenCut`). On by default. Off where something else already shows
+     * them, a `Tooltip` around the cell.
+     */
+    titleWhenCut?: boolean | undefined;
+} & ({
+    /**
+     * A mark every row of the column wears, centred against the two lines.
+     * The header carries the meaning, so it is drawn as decoration.
+     */
+    icon?: ReactNode;
+    mark?: never;
+} | {
+    icon?: never;
+    /**
+     * A mark that varies per row and states a fact of its own (a vendor, the
+     * CLI a model runs on), centred against the two lines. It brings its own
+     * accessible name and is read.
+     */
+    mark: ReactNode;
+});
+/**
+ * A value over a quieter line, each cut on one line: a name over where it
+ * runs, a key over the id it resolves to, a short state over when it began.
+ *
+ * TWO LINES IN TWO REGISTERS, ALWAYS THE SAME TWO, so every two-line cell in a
+ * table reads alike: the value in the cell's own register (it inherits the
+ * grid's size and ink), the line under it a caption in the secondary ink. A
+ * row of them is as tall as two lines whatever they hold, because each line
+ * is cut with an ellipsis rather than wrapped, and its whole words are on its
+ * title while it is cut (`Text`'s `truncate`).
+ *
+ * A MARK STANDS CENTRED AGAINST BOTH LINES, the way a vendor's mark stands
+ * beside a service's name and host. In a grid's stacked rows the lines, not
+ * the mark, give the row its baseline, so a column's label stands on the
+ * value's line (DataGrid.css).
+ */
+export declare function TableTwoLineCell({ value, detail, mono, title, titleWhenCut, icon, mark, }: TableTwoLineCellProps): import("react").JSX.Element;

package/dist/TableCells/index.d.ts

@@ -1,3 +1,3 @@
 import './TableCells.css';
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, } from './TableCells.js';
-export type { TableDateCellProps, TableEntityCellProps, TableKeyCellProps, TableNumberCellProps, TableStatusCellProps, TableTagsCellLabels, TableTagsCellProps, TableTextCellProps, } from './TableCells.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, TableTwoLineCell, } from './TableCells.js';
+export type { TableDateCellProps, TableEntityCellProps, TableKeyCellProps, TableNumberCellProps, TableStatusCellProps, TableTagsCellLabels, TableTagsCellProps, TableTextCellProps, TableTwoLineCellMono, TableTwoLineCellProps, } from './TableCells.js';

package/dist/TableCells/index.js

@@ -1,4 +1,5 @@
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-AFLS26AC.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, TableTwoLineCell } from '../chunk-3CALM534.js';
+import '../chunk-O5CEG7TQ.js';
 import '../chunk-QF5UNP4T.js';
 import '../chunk-LBGKLYBY.js';
 import '../chunk-EJNJMHQG.js';

package/dist/{TableCells-TKSNLRK3.css → TableCells-ZALZLLEF.css}

@@ -112,3 +112,31 @@
   font-size: var(--font-size-xs);
   font-variant-numeric: tabular-nums;
 }
+
+/*
+ * A VALUE OVER A QUIETER LINE (TableTwoLineCell), each line its own block cut
+ * on one line. A column of boxes rather than two runs of text, so neither
+ * line takes the line box of the words around it, and the cell is exactly
+ * the two lines tall. `min-width: 0` lets the column shrink inside a grid's
+ * cell, which is what cuts the lines rather than pushing the column wider.
+ */
+.crewlet-table-cell__lines {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* The mark is centred against both lines, as an entity's badge is against its name. */
+.crewlet-table-cell__two-line {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* The mark keeps its size: the lines give way to the column, never the mark. */
+.crewlet-table-cell__two-line > :first-child {
+  flex: none;
+}