@crewlethq/ui 0.85.0 → 0.86.1

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/InboxList/InboxList.d.ts

@@ -73,13 +73,23 @@ export type InboxRowTone = 'default' | 'danger';
 export interface InboxRowProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'onClick' | 'title'> {
     /** Who the row is from: a seat's or a person's name. */
     title: ReactNode;
-    /** A word after the name where the row is not a plain question or update: "coding run", "stopped". */
+    /**
+     * After the name, in the quiet ink: a word where the row is not a plain
+     * question or update ("coding run", "stopped"), or what the person did
+     * ("replied to a thread in Design"). The name and the qualifier read as one
+     * run of words that wraps to a second line before it stops, so a long
+     * qualifier never hides the name.
+     */
     qualifier?: ReactNode;
     /** `danger` sets the qualifier in the danger ink, for a seat that has stopped. */
     qualifierTone?: InboxRowTone | undefined;
     /** At the end of the first line: when it arrived. */
     meta?: ReactNode;
-    /** Before the words: an avatar, drawn at the target size. */
+    /**
+     * Before the words: an avatar or a mark, at the target size. Its slot is at
+     * least a target square and grows to fit a larger mark, such as a 32px face,
+     * with the name's line beside its top.
+     */
     leading?: ReactNode;
     /** What the row says, in up to three lines. */
     children?: ReactNode;
@@ -159,7 +169,8 @@ export interface InboxRowProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'on
  * caller names in the head (`status`): every word stays legible, and the
  * state is never carried by a decoration alone.
  *
- * NOTHING IS CUT AT THE EDGE. The name ellipsizes, the time never wraps, and
+ * NOTHING IS CUT AT THE EDGE. The name and its qualifier wrap to two lines
+ * before they stop, the time keeps a column of its own and never wraps, and
  * the words take up to three lines before they stop, so a row says what it is
  * rather than its first few words.
  */

package/dist/InboxList/index.js

@@ -1,4 +1,4 @@
-export { INBOX_ROW_LEAVE, InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from '../chunk-F6ZUM66S.js';
+export { INBOX_ROW_LEAVE, InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from '../chunk-VKNZQB2G.js';
 import '../chunk-RK4XPHVG.js';
 import '../chunk-6C7GQOBV.js';
 import '../chunk-PCAT2EFB.js';

package/dist/{InboxList-X5Q5WWAI.css → InboxList-NVPIL3WU.css}

@@ -223,19 +223,36 @@
 }
 
 /*
- * The avatar is centred on the head's line, the name it belongs to: its box
- * is one line tall and the avatar, a target taller than the line, overflows
- * it evenly into the control's top pad. Hung from the line's top by a pixel
- * it stood 3.6px under the name's middle, its top a step further from the
- * row's edge than its side.
+ * THE LEADING SLOT FITS WHAT IT HOLDS. It is at least a target square (and at
+ * least a line tall), with its mark centred in it, and it grows to a larger
+ * mark, such as a 32px face, rather than letting it spill: a fixed one-line
+ * box let a 32px face overflow it by 8px, up and to the left, until it all but
+ * touched the row's edge.
+ *
+ * THE NAME'S LINE IS CENTRED ON A TARGET-SIZED MARK by moving the words down
+ * rather than the mark up: the words start half the difference between the
+ * target and a line lower, and the control's top pad is that much shorter, so
+ * a row with a target-sized avatar keeps its height and its name where they
+ * were, with the avatar inside the control instead of over its pad. A larger
+ * mark hangs from the same top, beside the name's line and the one under it.
  */
+.crewlet-inbox-row__control--leading {
+  --crewlet-inbox-row-lift: max(0px, (var(--size-target-min) - 1lh) / 2);
+
+  padding-top: calc(var(--spacing-2) + var(--spacing-1) / 2 - var(--crewlet-inbox-row-lift));
+}
+
+.crewlet-inbox-row__control--leading > .crewlet-inbox-row__main {
+  padding-top: var(--crewlet-inbox-row-lift);
+}
+
 .crewlet-inbox-row__leading {
   display: inline-flex;
   flex: none;
   align-items: center;
   justify-content: center;
-  width: var(--size-target-min);
-  height: 1lh;
+  min-width: var(--size-target-min);
+  min-height: max(var(--size-target-min), 1lh);
 }
 
 .crewlet-inbox-row__main {
@@ -245,24 +262,49 @@
   min-width: 0;
 }
 
+/*
+ * THE HEAD IS ONE RUN OF WORDS: who, then what they did, wrapping as words do
+ * and stopping at two lines with an ellipsis. The name comes first, so it is
+ * the last thing a long qualifier can push out of sight. As one line of boxes
+ * the name was the only one allowed to shrink, so a qualifier longer than a
+ * word ("replied to a thread in Product Manager") squeezed the name to
+ * nothing and pushed the time past the row's edge.
+ *
+ * THE TIME FLOATS AT THE END OF THE FIRST LINE, so only that line gives up
+ * room to it and the second runs the row's full width: "replied to a thread
+ * in #engineering" keeps the room's name, the part of the line most worth
+ * reading, where a column of its own took the time's width from both lines.
+ * The float sits in a block of its own inside the clamp, which is where every
+ * engine lays a float out and still counts the clamped lines.
+ */
 .crewlet-inbox-row__head {
-  display: flex;
-  align-items: baseline;
-  gap: var(--spacing-1);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
   min-width: 0;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  color: var(--color-text-tertiary);
 }
 
-.crewlet-inbox-row__title {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.crewlet-inbox-row__head-text {
+  display: block;
+}
+
+/* The time (and any status), in the head's own line box, so the time sits on the name's baseline. */
+.crewlet-inbox-row__head-end {
+  float: inline-end;
+  margin-inline-start: var(--spacing-2);
   white-space: nowrap;
+}
+
+.crewlet-inbox-row__title {
   font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
 }
 
 .crewlet-inbox-row__qualifier {
-  flex: none;
   font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
 }
@@ -272,8 +314,6 @@
 }
 
 .crewlet-inbox-row__meta {
-  flex: none;
-  margin-inline-start: auto;
   font-size: var(--font-size-xs);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
@@ -321,21 +361,12 @@
   color: var(--color-text-secondary);
 }
 
+/* At the end of the first line, before the time when the row has both. */
 .crewlet-inbox-row__status {
   display: inline-flex;
-  flex: none;
   align-items: center;
 }
 
-/* With a status, the time stays at the end and the status sits beside it. */
-.crewlet-inbox-row__status + .crewlet-inbox-row__meta {
-  margin-inline-start: 0;
-}
-
-.crewlet-inbox-row__head > .crewlet-inbox-row__status {
-  margin-inline-start: auto;
-}
-
 /*
  * What came of the row: a glyph in the tone's ink, then words in the
  * secondary ink, on one line that wraps rather than cuts.
@@ -391,7 +422,9 @@
 
 /*
  * The task, under the words and lined up with them: the control's start pad,
- * the leading slot and the gap after it.
+ * a target-sized leading slot and the gap after it. The task sits outside the
+ * control, so it lines up with the words for a mark of the target size, the
+ * size `leading` asks for.
  */
 .crewlet-inbox-row__aside {
   min-width: 0;

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/ListDetail/index.js

@@ -1,2 +1,2 @@
-export { ListDetail } from '../chunk-SNJM5KPV.js';
+export { ListDetail } from '../chunk-P33VNG7Q.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ListDetail-Q7SFVKSO.css → ListDetail-WXBCLONL.css}

@@ -65,6 +65,12 @@
   min-height: 0;
 }
 
+/* A LIST THAT GROWS SCROLLS IN ITS OWN COLUMN, whatever it holds. The pane
+   left the scrolling to its content, which a DirectoryList does for its
+   groups and an InboxList does not: an activity list taller than the screen
+   ran past the pane's end, where the screen clipped its later rows and its
+   "older" link, with nothing to scroll them into view. A list that scrolls
+   itself fills the pane and never makes it overflow. */
 .crewlet-list-detail__list {
   display: flex;
   flex-direction: column;
@@ -72,6 +78,7 @@
   min-height: 0;
   padding-right: var(--crewlet-list-detail-gutter);
   border-right: 1px solid var(--color-border-default);
+  overflow-y: auto;
 }
 
 /* A DIRECTORY RUNS TO THE HAIRLINE. A DirectoryList is navigation: its lines
@@ -106,7 +113,6 @@
   .crewlet-list-detail__list {
     padding-right: 0;
     border-right: 0;
-    overflow-y: auto;
   }
 
   /* The list is the pane that scrolls now, and takes the detail's end where

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';