@crewlethq/ui 0.38.0 → 0.40.0

package/README.md

@@ -43,16 +43,16 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Actions | `Button` and `ButtonLink` (variants `primary`, `secondary`, `outline`, `ghost`, `accent`, `danger`; sizes `small`, `medium`, `large`; shapes `square`, `pill`), `IconButton`, `Menu`, `Link`, `Copyable`, `CopyButton`, `DownloadButton`, `Kbd` |
 | Content and text | `Text` (the eight registers and `inherit`), `Prose`, `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`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList`, `ChoiceList`, `Composer`, `MarkdownEditor`, `RichEditor` (with `preloadRichEditor`, and the round trip `roundTripMarkdown` and `canonicalMarkdown` from `@crewlethq/ui/RichEditorMarkdown`) |
-| Data display | `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` |
+| Data display | `DataTable`, `CopyableCell`, `Table`, the read-only table cells (`TableKeyCell`, `TableNumberCell`, `TableDateCell`, `TableEntityCell`, `TableStatusCell`, `TableTagsCell`, `TableTextCell`), `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `QrCode`, `ObjectHeader`, `FactLine`, `SetByLine`, `Skeleton`, `Eyebrow`, `StatGroup`, `PinTile`, `IconTile`, `SettingsTable` (with `SettingsTable.Row`), `CatalogTile` |
 | List screens | `DataView`, and its parts on their own: `DataViewToolbar`, `FilterAxisBar`, `FilterAxisChip`, plus the filter model (`filterDefsFromColumns`, `applyColumnFilters`, `filterPredicate`, `blankFilterValue`) |
 | Feedback and overlays | `Callout`, `ConflictNote`, `EditingStatus`, `Toaster`, `Modal` (with `variant="sheet"`), `ConfirmModal`, `CommandPalette`, `Tooltip`, `Popover`, `Announcer` |
 | Documents and review | `DiffView` and `DiffSummary` with the line diff they draw (`diffLines`, `diffStat`, `collapseDiff`, `firstChangedLines`, `splitLines`, `MAX_DIFF_LINES`, with no React in it), `DiffList`, `VersionCompare`, `CommentThread` |
 | Charts | `Legend`, `BarList`, `StackedBar`, `StackedColumns`, `ActivityStrip`, `TimeSeries`, `Sparkline`, the reading layer they share (`ChartTooltip`, `useChartHover`), and the ramp (`DATA_COLORS`, `DATA_COLOR_OTHER`, `dataColor`) |
 | Marks | `Count`, `StatusDot`, `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`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
+| Layout | `Container`, `Section`, `Card`, `TileGrid`, `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`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen`, `useIdle`, `useMediaMatch` |
+| Application shell | `AppShell` with `AppShell.Rail`, `SectionFrame` (with `SectionFrame.Nav` and `SectionFrame.Body`), `LockedLabel`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen`, `useIdle`, `useMediaMatch` |
 | Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `ThemeGallery`, `ThemeSwatch`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences`, and the framework-free `applyTheme`, `applyPalette`, `applyDensity` with `THEME_PREFERENCES`, `DENSITY_PREFERENCES` and their guards |
 | Artifacts | `SandboxedFrame` (with `SandboxedFramePlaceholder` and `SandboxedFrameNotice`), `LinkInterstitial` and `openExternal`, `VersionTimeline`, `ShareDialog` with the role ladder (`ARTIFACT_ROLES`, `SHAREABLE_ROLES`, `roleAtLeast`), `PrincipalPicker`, `Principal` and `PrincipalAvatar`, `ArtifactCard`, `ArtifactKindGlyph` and `ArtifactPreviewGlyph` (the preview a card draws with no cover, for a cover with nothing to draw), `ArtifactBar` and `ArtifactVersionChip` (an open artifact's one slim bar), `ArtifactPanel` and `ArtifactWorkspace` (the panels it opens beside or over the artifact), `CanvasBoard` (a design's artboards and notes on a `Canvas`, with the visibility budget `liveBoards`), `CanvasToolbar` (a canvas's tool palette, with `toolForKey`), `LayersList` (the list of a canvas's items beside it, marked by the canvas's selection), `CanvasSchematic` (a design's cover, drawn from its boards' frames), `AccessDeniedCard`, `ArtifactIcon` (with `artifactIconGlyph` and `ARTIFACT_ICON_WORDS`), the native gallery covers (`DocCover`, `SheetCover`, `DashboardCover`), `MergeConflicts`, the dashboard pieces (`WidgetFrame`, `DatasetSource` and `DatasetSourceList`), and `FrameProtocol` (the wire between a host page and an embedded artifact, with no React in it), `ArtifactNameCell` and `ArtifactAccessLabel` (with `ArtifactAccessGlyph`) for a list of artifacts |
 | Sheets | `SheetGrid`, the cells on their own (`CheckboxCell`, `TextCell`, `LongTextCell`, `NumberCell`, `SelectCell`, `MultiSelectCell`, `PersonCell`, `StatusCell`, `DateCell`, `UrlCell`, `RatingCell`, and `SheetCell` for any type), `ChangeMark`, and `SheetModel` (every rule a sheet is drawn from, with no React in it: values, parsing, the keyboard model, TSV, the pending edits of D23) |
@@ -204,6 +204,82 @@ 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.40.0
+
+The engine dashboard's own lists, page parts and navigation pieces, moved into the kit so every application draws them from one place.
+
+### Lists and pages
+
+**`DataGrid` draws a list as columns.** One track list on the grid, which every row adopts (`subgrid`), so a value always sits under the head that names it. The sort (`sort`, `onSortChange`, as `key` or `-key`) and the column set (`cols`, `onColsChange`, `key,key`, empty for the default set) are controlled, so an application keeps them wherever it keeps state (the engine keeps them in the address). A column gives way rather than starving its neighbours: `shrink` sizes it to its content up to a share of the grid, `floor` keeps the column that is the point of the list readable, and a grid that cannot fit drops columns by their `drop` rank rather than cutting them off, saying which in its foot ("Hidden to fit"). An `optional` column is off until the column set names it. A row links (`rowHref`, an overlay over the row, so a cell's own link or button still takes its own click) or activates (`onRowActivate`); `handleRef` steps and opens rows from an application's own keymap. Bands (`bands`) draw a grouped answer with each group's count, a sticky head sticks at `--crewlet-data-grid-sticky-top`, an empty grid draws `empty` as an `EmptyState`, and a grid inside a `Card` gives up its own edge. Below 640px each row is a labelled card, or one compact line with `phoneRows="compact"`. It is announced as a table, with `aria-sort` on its sortable column heads.
+
+**`ColumnChooser` and `ChooserList`** are the checklist a reader picks what a view shows with. `ColumnChooser` takes a grid's own columns (`columnChoicesOf`) and writes the column set in declaration order; `ChooserList` is the plain checklist under it, for any set of facts a view shows (a card's fields). Both are one group named by their heading.
+
+**`PropertyList` draws an object's facts in sections on one column**: every section's terms in one column (`--crewlet-description-list-term`, which `DescriptionList` reads too, so a page lines a list up with its key-value cards), the four kinds of absent value, a section with nothing filled in said once (`whenAllAbsent`), and one "set by" line under the last of the rows one change set (`setBy`, `change`). `headings` is `eyebrow` or `sentence`.
+
+**`Tabs` take `overflow="menu"`**: what does not fit folds into a More menu (`moreLabel`, `moreMenuLabel`) instead of being cut, a tab with work in flight carries a pulsing mark and says so (`live`), and `note` is a sentence after the tabs that steps aside before any tab folds. Folded tabs stay measured and the arrow keys skip them. Link tabs spread `foldProps` on their link.
+
+**`Histogram` draws where in a window things happened** (in `Charts`): one bar per bucket with its failed part inside the fill, a floor so a bucket with one event is still drawn, a date axis (`formatTick`) and the total said once (`summary`). With `onSelect` each bar is a button that narrows the window.
+
+**`PageNote` is a screen's one quiet sentence** under its title, at the reading measure, with no word alone on its last line and no margin of its own. **`RelatedRow` is the one related place a page points at**: a quiet linked card under the page's content, its glyph and words on the card heads' columns, the whole row the link, in a `nav` named "Related".
+
+**`NamedGlyph` draws a glyph from its name** (`@crewlethq/icons/glyphs/registry`, with `glyphFor`), for a place whose glyph is data, such as a list's empty state or a navigation entry.
+
+### Fixes
+
+**Every catalogue tile's name stands on one line across a row** (`CatalogTile`). A tile without a status tag centred its name against its mark, 13px under its tagged neighbours; the name now starts at the top of the head whatever the tag.
+
+### Navigation
+
+**`LockedLabel` draws a place the reader may not open**: its words with the key after them, the reason (`reason`, "Needs Admin access") as the pointer's title and read after the name, and nothing but the words where nothing is missing. A place is locked, never hidden. `mark={false}` keeps the reason and drops the key, for a place under a heading that already carries it.
+
+**`SidebarNav.Item` takes `locked`, `title` and `onPrefetch`.** `locked` draws the row's words as a `LockedLabel`, and the row stays a link. `title` is the row's hint. `onPrefetch` is called when the pointer reaches the row and when it takes focus, on the kit's anchor and on a router's (`renderLink` is handed `title`, `onPointerEnter` and `onFocus`), so an application needs no wrapper of its own to start fetching where a row leads.
+
+**A wholly locked group draws its key once** (`SidebarNav.Group` `locked`). The key and the reason go on the group's label, and its rows stay links in the quiet ink with no key each, still saying their own reason. A reader holding none of a column's access met a key on every row of it. A mixed group, and a run with no label to carry the key, keep it on each locked row.
+
+**`SectionFrame` draws a workspace's sections as a column beside the screen** (`SectionFrame.Nav`, `SectionFrame.Body`). The column sticks at the view's height while the section scrolls and keeps the wheel at its ends; with `folded` (the application's decision, from its own arithmetic of what a section beside the column needs) it becomes one row naming the section the reader is on ("Settings Section: People"), which unfolds the list, folds again on a pick, and opens on an arrival the caller asks it to (`openOnArrival`). The frame takes the content column's padding back and gives it to the body, which takes the phone's 16px under 640px.
+
+### Application shell
+
+**The rail has a field slot and a head that takes its width** (`AppShell.Rail`). `search` is drawn first in the rail's middle, on the nav's gutter with its glyph on the nav rows' glyph column; the head's first child takes the head's width, so a long name truncates. Both were an application's own wrapper and rule.
+
+**The scroller is a size container** (`.crewlet-app-shell__main`, `container-type: size`), so a box inside a screen can be as tall as the view it scrolls in (`100cqb`), as `SectionFrame`'s column is.
+
+**A fill screen keeps the reserved scrollbar gutter.** The top bar's end inset counts the gutter, so a fill screen that reserved none put the bar's controls a gutter further out than on its neighbour: with classic scrollbars they moved 11px between an org chart and its roster. An application that restated `scrollbar-gutter: auto` for a fill screen drops it.
+
+## Changes in 0.39.0
+
+These come from a production polish of the engine dashboard's Settings › Limits, Company › Integrations and Company › Policies, and the same patterns everywhere else it draws them.
+
+### New
+
+**`SettingsTable` draws a read-only table of settings** (with `SettingsTable.Row`). Each row is the setting's name with its key in the document it is written in under it (`settingKey`, in the monospace face, quiet), the value in force in tabular figures, and where the value comes from (`source`). A value that is the default says so as a quiet word; a row marked `changed` carries a mark before its source, the one row in a table a reader scanning it came to find. The tracks are fractions of the table's width (`--crewlet-settings-table-columns`), so a page that stacks a table per group in cards of one width puts every value and every source on one line down the page, which a term column sized to its own longest term never did. It is announced as a table with Setting, Value and Source column headers (drawn with `header`, renamed with `columns`) and each setting's name as its row's header. In a `Card` (with `padding="none"`) it gives up its own edge and corner, as `StatGroup` does; under 32rem of table the name takes the row's first line and the value and its source share the second.
+
+**`TileGrid` lays tiles out on a fixed track count that folds by its own width.** Two sections of tiles each on a track count of its own put their edges in different places, and an `auto-fill` grid left a hole at the end of a short section. `columns` is the count at full width: `3` (the default) folds straight to one under 40rem of grid, never to two, so a set of three or six never strands a tile; `4` folds to two under 56rem; every count is one track under 28rem. `as="ul"` makes the track the list.
+
+**`CatalogTile` is one entry in a catalogue**: the mark in a well of one size and ground for every tile, the name as a heading at the level its place gives it, a `status` only when the state carries meaning (On, Connected, Needs attention, Coming soon), one sentence, and a foot with a quiet `meta` fact and one `action`, drawn only when there is something to put in it. A tile in its resting state carries no pill, and its name stands centred beside its mark; `quiet` puts a tile that is available but not set up on the page's own ground rather than draining its mark, because a drained vendor mark (Datadog's white plate on grey) read as a placeholder image. The sentence reserves two lines in a row of tiles so their feet line up, and reserves nothing once the grid is one track.
+
+**`List` takes `variant="numbered-divided"`**: an `ol` whose numbers stand in a column of their own, in tabular figures, with a hairline between rows at a card's inset and the body's leading. For statements a reader cites by number, such as a company's standing policies, each of which may run to several lines and wraps under its own first word. The drawn number is the list's counter and is not read a second time.
+
+**`ListInput` takes `focusOnMount`**, as `TagsInput` does: the focus goes to the new-item box when the list mounts, once, so a form opened to change that one list (an "Edit policies" link) lands where the next item is written. It is taken during mount, so a dialog the list opens in keeps it rather than moving focus to its own first control.
+
+### Fixes
+
+**A card header's plain words are its title** (`Card.Header`). A header given a string or a number drew it as a bare text node at the regular weight with no heading element, beside cards whose `Card.Title` was a semibold heading: two title treatments on one page (Models, People, Nodes and a dozen more beside Limits and Sign-in policy), and the plain ones missing from the document outline. Plain words are now drawn as `Card.Title`. **A count of zero is not drawn**: the card's own empty state already says there is nothing, and "Models 0" said it twice.
+
+**A card head can stack its subtitle at every width** (`Card.Header` `subtitlePlacement="below"`), for a row of cards of different widths whose heads must stand at one height: by default a wide card keeps its subtitle beside the title while a narrow one stacks it, so one row drew heads of 48 and 68px. **A code block that is a card's content is that card's surface** (`CodeBlock`): placed straight in a `Card` with `padding="none"` it gives up its own edge, corner and ground, so there is no box inside a box; in a padded body it stays a well.
+
+**A dataset source can leave out its kind** (`DatasetSource` `kind` is optional): a list whose every entry reads from one place, grouped under list labels of its own, draws no kind tag on every row.
+
+**A catalogue tile's fact-only foot stands as tall as one with a button** (`CatalogTile`), so the rules of a row's feet sit on one line.
+
+**A dialog's title is its `h1`** (`Modal`). It was a paragraph while the body's headings started at level 2, so the outline a screen reader walks had no top; it keeps its register (the text face at the dialog's size), and still names the dialog.
+
+**An object header's eyebrow and fact labels keep the words as written** (`ObjectHeader`, `FactLine`). They were the uppercase, tracked-open micro-caps of a table's column head, so a unit's page read "UNIT" over its name and TYPE, LEAD and SEATS under it, like a form. They are sentence case at the caption step now, as `StatCard`'s label already is.
+
+**A row of stat tiles shares its lines** (`StatGroup`). Each tile in a row is a subgrid over the row's three lines (label, number, sub), so a label that wraps no longer pushes its own figure below the others; and a label stands on its number, one gap above it, where another label in the row takes two lines. **A stat tile's sub wraps** (`StatCard`), balanced, rather than ending in an ellipsis: its end is the half that says what the number means, and a grid of tiles gives every tile in a row one height anyway. These were the engine dashboard's own rules over the components; an application that restated them drops them.
+
+**The artifact bar takes the shell top bar's inset** (`ArtifactBar`): 20px, 16px under the shell's breakpoint, plus the scroller's gutter at its end, since it stands in that bar's place. At a 12px inset of its own a create page's controls ended past the content under them.
+
 ## Changes in 0.38.0
 
 ### Icons

package/dist/AgentHandoffPanel/index.js

@@ -1,11 +1,11 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-XBURIXHO.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-3TXY3PJZ.js';
 import '../chunk-AUQPBL4O.js';
 import '../chunk-3TFDQLW3.js';
 import '../chunk-OGXHZHRX.js';
-import '../chunk-ETVEGR2Y.js';
+import '../chunk-ISA2O2BK.js';
 import '../chunk-Y5BD4MTE.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-TYONQSOK.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/AppShell/AppShell.d.ts

@@ -108,8 +108,19 @@ export declare namespace AppShell {
     var AccountRow: typeof import("./AccountRow.js").AccountRow;
 }
 export interface AppShellRailProps {
-    /** The head of the rail, drawn at the top bar's own height. */
+    /**
+     * The head of the rail, drawn at the top bar's own height. Its first child
+     * takes the head's width, so a long name (a company's, in a lockup)
+     * truncates rather than wrapping.
+     */
     header?: ReactNode;
+    /**
+     * The rail's field, first in its scrolling middle: a `SearchTrigger` with
+     * `variant="rail"`. The slot stands it on the nav's own gutter with its
+     * glyph on the nav rows' glyph column, so the field needs no inset of its
+     * application's own.
+     */
+    search?: ReactNode;
     /**
      * The foot: what the engine is doing, the theme and density controls. An
      * `<AppShell.RailRow>` puts a line there on the rail's own insets, so its
@@ -120,7 +131,7 @@ export interface AppShellRailProps {
     children?: ReactNode;
 }
 /** The rail's three regions: a head, a scrolling middle, and a foot. */
-export declare function AppShellRail({ header, footer, className, children }: AppShellRailProps): import("react").JSX.Element;
+export declare function AppShellRail({ header, search, footer, className, children }: AppShellRailProps): import("react").JSX.Element;
 /**
  * A figure at the end of a row in the foot, and what it counts.
  *

package/dist/AppShell/index.js

@@ -1,4 +1,4 @@
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-DYB66CNM.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-KKNHMXTE.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-D6FEHY5G.js';
 import '../chunk-OMV5W53A.js';

package/dist/{AppShell-NDU4XMGF.css → AppShell-NPSWZ3XW.css}

@@ -130,6 +130,8 @@
 .crewlet-app-shell__rail-head {
   display: flex;
   align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
   flex: none;
   box-sizing: border-box;
   min-height: calc(var(--size-shell-inset) + var(--crewlet-app-shell-topbar));
@@ -143,6 +145,31 @@
   scrollbar-color: var(--color-scrollbar) transparent;
 }
 
+/*
+ * THE HEAD'S FIRST CHILD TAKES ITS WIDTH: a lockup alone on its line, whose
+ * name truncates at the rail's edge rather than wrapping or pushing the head
+ * wider. It was every application's own wrapper and rule.
+ */
+.crewlet-app-shell__rail-head > :first-child {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/*
+ * THE RAIL'S FIELD ON THE NAV'S COLUMNS. It stands on the nav's gutter, so
+ * its right edge is where every row's background ends; and its glyph stands
+ * on the nav's glyph column: a row's glyph is the gutter and the row's pad
+ * in, the field's is the gutter, its own 1px edge and its pad
+ * (`SearchTrigger`'s two steps and a half), so the inset at its start makes
+ * up the difference from those measures.
+ */
+.crewlet-app-shell__rail-search {
+  padding: 0 var(--size-nav-gutter) var(--spacing-3);
+  padding-inline-start: calc(
+    var(--size-nav-gutter) + var(--size-nav-row-pad) - (var(--spacing-2) + var(--spacing-1) / 2) - 1px
+  );
+}
+
 /* The same gutter the nav takes, so what the foot says lines up with the rows
    above it rather than sitting further out. */
 .crewlet-app-shell__rail-foot {
@@ -488,6 +515,15 @@
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-gutter: stable;
+  /*
+   * A SIZE CONTAINER, so a box inside the screen can be as tall as the view
+   * it scrolls in (`100cqb`): a column that sticks beside the screen
+   * (`SectionFrame`), a record bounded by the window. The scroller's size is
+   * the shell's, never its content's, so containing it costs nothing. A box
+   * inside an inline-size container (a card, a stat row) reaches past it to
+   * this one for the block axis.
+   */
+  container-type: size;
 }
 
 /* No focus rule of its own: `main` takes focus only from the skip link, and a
@@ -505,12 +541,17 @@
 }
 
 /* A screen that draws to the bottom of the window: the scroller stops
-   scrolling and the content column takes the height that is left. It
-   reserves no scrollbar gutter either, since nothing in it scrolls: the
-   reserved strip was a dead band down the screen's end edge. */
+   scrolling and the content column takes the height that is left.
+
+   IT KEEPS THE GUTTER RESERVED, like every other screen. The top bar's end
+   inset counts the scroller's gutter (`--crewlet-app-shell-gutter`, measured
+   by the shell), so a fill screen that reserved none put the bar's controls
+   one gutter further out than on the screen beside it: with classic
+   scrollbars, Add seat moved 11px between an org chart and its roster, two
+   tabs of one page. A strip at the end edge of a full-screen canvas is the
+   smaller cost than a bar that moves under the pointer. */
 .crewlet-app-shell--fill .crewlet-app-shell__main {
   overflow: hidden;
-  scrollbar-gutter: auto;
 }
 
 .crewlet-app-shell--fill .crewlet-app-shell__content {

package/dist/ArtifactBar/index.js

@@ -1,8 +1,9 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-S27UBCVX.js';
-import '../chunk-4ISUIS6F.js';
-import '../chunk-2QZ2VPHR.js';
-import '../chunk-7SDUKCNW.js';
-import '../chunk-RKKO7QHH.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-2VOHUGUA.js';
+import '../chunk-OOC7Q67K.js';
+import '../chunk-4OK4DX3V.js';
+import '../chunk-X4IXXLWM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-ILDNJHRU.js';
 import '../chunk-CE2THTQR.js';

package/dist/{ArtifactBar-FWPBBKQ5.css → ArtifactBar-6PGWGKN2.css}

@@ -29,7 +29,12 @@
      its place, and at a row's height of its own the line under it jumped by
      three pixels between the gallery and the artifact opened from it. */
   height: calc(var(--size-shell-topbar) - 1px);
-  padding: 0 var(--spacing-3);
+  /* THE SHELL TOP BAR'S INSET, the scroller's gutter at its end included: the
+     bar stands in that bar's place, and at a 12px inset of its own a create
+     page's controls ended 19px past the content under them, where every other
+     page's end over it. The same two steps as the top bar, 20px wide and 16px
+     under the shell's breakpoint (below). */
+  padding: 0 calc(var(--spacing-5) + var(--crewlet-app-shell-gutter, 0px)) 0 var(--spacing-5);
   min-width: 0;
 }
 
@@ -413,3 +418,10 @@
     transition: none;
   }
 }
+
+/* The shell's breakpoint, where its top bar and content take 16px. */
+@media (width < 1024px) {
+  .crewlet-artifact-bar__row {
+    padding: 0 calc(var(--spacing-4) + var(--crewlet-app-shell-gutter, 0px)) 0 var(--spacing-4);
+  }
+}

package/dist/ArtifactCard/index.js

@@ -1,10 +1,10 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-OTCXRJ7D.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-U2XAJONO.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-UBZDYOCA.js';
-import '../chunk-ZK3VYY7L.js';
+import '../chunk-INHXF2CL.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';

package/dist/AuthLayout/index.js

@@ -1,6 +1,6 @@
-export { AuthLayout } from '../chunk-BJI3RFXG.js';
+export { AuthLayout } from '../chunk-S4DREXGM.js';
 import '../chunk-7KBNFFM3.js';
-import '../chunk-ZK3VYY7L.js';
+import '../chunk-INHXF2CL.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/AvatarPicker/index.js

@@ -1,16 +1,20 @@
-export { AvatarPicker } from '../chunk-ECGGQX2H.js';
-import '../chunk-F4LPQA4E.js';
+export { AvatarPicker } from '../chunk-A44YHLCQ.js';
+import '../chunk-BA32AVKS.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-YEVG2X5R.js';
-import '../chunk-2QZ2VPHR.js';
-import '../chunk-7SDUKCNW.js';
-import '../chunk-RKKO7QHH.js';
+import '../chunk-SNQRGH4A.js';
+import '../chunk-4OK4DX3V.js';
+import '../chunk-X4IXXLWM.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-D6FEHY5G.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Card/Card.d.ts

@@ -105,10 +105,22 @@ export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
     divided?: boolean | undefined;
     /** A glyph before the title. Decoration: the title carries the meaning. */
     icon?: ReactNode;
-    /** How many of something the card is about. */
+    /**
+     * How many of something the card is about. A count of zero is not drawn:
+     * the card's own empty state says there is nothing, and a "0" badge beside
+     * the title said it a second time.
+     */
     count?: number | string | undefined;
     /** A second line under the title. It truncates; a title does not. */
     subtitle?: ReactNode;
+    /**
+     * Where the subtitle stands. `beside` (the default) keeps the head one line
+     * and moves the subtitle under the title only on a card narrower than
+     * 480px; `below` always puts it under the title, for a row of cards of
+     * different widths (a wide card beside a narrow one) whose heads must stand
+     * at one height.
+     */
+    subtitlePlacement?: 'beside' | 'below' | undefined;
     /** The card's own controls, at the end of the header row. */
     actions?: ReactNode;
 }
@@ -159,7 +171,7 @@ export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
     truncate?: boolean | undefined;
 }
 export declare const Card: (({ variant, padding, interactive, rail, selected, as, href, asChild, className, children, ...rest }: CardProps) => import("react").JSX.Element) & {
-    Header: ({ divided, icon, count, subtitle, actions, className, children, ...rest }: CardHeaderProps) => import("react").JSX.Element;
+    Header: ({ divided, icon, count, subtitle, subtitlePlacement, actions, className, children, ...rest }: CardHeaderProps) => import("react").JSX.Element;
     Body: ({ padding, className, children, ...rest }: CardSectionProps) => import("react").JSX.Element;
     Footer: ({ variant, padding, className, children, ...rest }: CardFooterProps) => import("react").JSX.Element;
     Title: ({ as, truncate, className, children, ...rest }: CardTitleProps) => import("react").JSX.Element;

package/dist/Card/index.js

@@ -1,4 +1,4 @@
-export { Card } from '../chunk-ZK3VYY7L.js';
+export { Card } from '../chunk-INHXF2CL.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/{Card-G2ZGT5Z6.css → Card-JR2UPQH7.css}

@@ -495,6 +495,26 @@
   }
 }
 
+/*
+ * STACKED, ASKED FOR: the subtitle under the title at every width, the shape
+ * the narrow step above draws, for a row of cards of different widths whose
+ * heads have to stand at one height rather than one inline and one stacked.
+ */
+.crewlet-card__header--stacked {
+  flex-wrap: wrap;
+  row-gap: var(--spacing-1);
+}
+
+.crewlet-card__header--stacked > .crewlet-card__header-main {
+  flex: 1 1 0;
+}
+
+.crewlet-card__header--stacked > .crewlet-card__subtitle {
+  order: 1;
+  flex: 1 1 100%;
+  white-space: normal;
+}
+
 .crewlet-card__description {
   margin: 0;
   font-size: var(--font-size-compact);

package/dist/CatalogTile/CatalogTile.d.ts

@@ -0,0 +1,47 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type HeadingLevel } from '../utils/headingLevel.js';
+export type CatalogTileElement = 'article' | 'li' | 'div';
+export interface CatalogTileProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** The element the tile is: an `li` in a `TileGrid as="ul"`. */
+    as?: CatalogTileElement | undefined;
+    /**
+     * What the entry is told apart by before its name is read: a `VendorMark`,
+     * a glyph. Drawn in the tile's mark well, at one size and on one ground for
+     * every tile, and hidden from assistive technology: the name is what is read.
+     */
+    mark: ReactNode;
+    /** The entry's name, as the tile's heading. */
+    title: ReactNode;
+    /** Overrides the level the name is rendered at. */
+    headingLevel?: HeadingLevel | undefined;
+    /**
+     * The entry's state, as a `Tag`, ONLY when the state is worth reading: On,
+     * Connected, Needs attention, Coming soon. An entry in its resting state
+     * (available, not set up) carries none, and its name stands centred beside
+     * its mark; a pill under every name is a column a reader learns to skip.
+     */
+    status?: ReactNode;
+    /** One sentence: what the entry is for, or what is owed when something is. */
+    description?: ReactNode;
+    /** A quiet fact at the foot (`2 agents · 14 deliveries`). */
+    meta?: ReactNode;
+    /** The tile's one control, at the foot's end. */
+    action?: ReactNode;
+    /**
+     * Available but not set up: the tile sits one rung lower, on the page's own
+     * ground, rather than on the card's. Its text and its mark keep their
+     * strength, because a tile not yet set up is the one a reader came to set up.
+     */
+    quiet?: boolean | undefined;
+}
+/**
+ * One entry in a catalogue: its mark, its name, its state when it has one, a
+ * sentence, and a foot with a quiet fact and one action.
+ *
+ * EVERY TILE IN A ROW IS ONE SHAPE. The sentence reserves two lines and takes
+ * what is left of the tile's height, so tiles stretched to one row height in a
+ * `TileGrid` keep their feet on one line; a tile with neither a fact nor an
+ * action draws no foot at all, since a rule with nothing under it reads as a
+ * missing control.
+ */
+export declare function CatalogTile({ as: Element, mark, title, headingLevel, status, description, meta, action, quiet, className, ...rest }: CatalogTileProps): import("react").JSX.Element;

package/dist/CatalogTile/index.d.ts

@@ -0,0 +1,3 @@
+import './CatalogTile.css';
+export { CatalogTile } from './CatalogTile.js';
+export type { CatalogTileElement, CatalogTileProps } from './CatalogTile.js';

package/dist/CatalogTile/index.js

@@ -0,0 +1,3 @@
+export { CatalogTile } from '../chunk-PCT47E7O.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/CatalogTile-XL4XLFUH.css

@@ -0,0 +1,135 @@
+/*
+ * CatalogTile: mark, name and state, one sentence, and a foot with a quiet
+ * fact and one action.
+ *
+ * ONE WELL FOR EVERY MARK. A vendor's mark is drawn in the vendor's colours,
+ * so the box it stands in is the one thing a catalogue can hold constant: the
+ * same size, the same raised ground and the same hairline for every tile,
+ * set up or not. A drained mark on a grey box read as a placeholder image
+ * (a white plate on grey is not a logo), so a tile not yet set up says so by
+ * its ground, never by its mark.
+ */
+
+.crewlet-catalog-tile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-4);
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  color: var(--color-text-primary);
+}
+
+.crewlet-catalog-tile--quiet {
+  background: var(--color-surface-background);
+}
+
+.crewlet-catalog-tile__head {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-catalog-tile__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-row-lg);
+  height: var(--size-row-lg);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border-default);
+  color: var(--color-text-primary);
+}
+
+/* The name, and under it the state when there is one. THE NAME STANDS ON ONE
+   LINE ACROSS A ROW whether or not a tile has a state: centred on the mark, a
+   name with a pill under it rose 13px above its stateless neighbour's, so the
+   names of one row stood at two heights. It starts one step below the mark's
+   top edge in every tile instead. */
+.crewlet-catalog-tile__title {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding-top: var(--spacing-1);
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-catalog-tile__name {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-catalog-tile__status {
+  display: inline-flex;
+}
+
+.crewlet-catalog-tile__description {
+  flex: 1;
+  margin: 0;
+  /* Two lines reserved, so a tile saying what it is for and one saying what
+     is owed keep their feet on one line in a row. */
+  min-height: calc(2em * var(--font-line-height-body));
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-body);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-catalog-tile__foot {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  /* A SMALL CONTROL'S HEIGHT OF CONTENT, under the rule and the padding: a
+     foot holding only a fact stands as tall as one holding a button, so the
+     rules of every foot in a row sit on one line. Measured on the content
+     box, since under border-box sizing the padding spent the floor and a
+     fact-only foot stood 8px shorter. */
+  box-sizing: content-box;
+  min-height: var(--size-control-sm);
+  padding-top: var(--spacing-3);
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-catalog-tile__meta {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-catalog-tile__action {
+  display: inline-flex;
+  flex: none;
+}
+
+/*
+ * ONE TILE A ROW RESERVES NOTHING. The two reserved lines exist to keep the
+ * feet of tiles side by side on one line; a grid folded to one track has no
+ * neighbours to line up with, and on a phone the reserve was a blank line in
+ * every short tile.
+ */
+@container crewlet-tile-grid (width < 40rem) {
+  .crewlet-tile-grid[data-columns='3'] .crewlet-catalog-tile__description {
+    min-height: 0;
+  }
+}
+
+@container crewlet-tile-grid (width < 28rem) {
+  .crewlet-tile-grid .crewlet-catalog-tile__description {
+    min-height: 0;
+  }
+}

package/dist/CharacterPicker/index.js

@@ -1,5 +1,5 @@
 import '../chunk-3L5NHASN.js';
-export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-YEVG2X5R.js';
-import '../chunk-RKKO7QHH.js';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-SNQRGH4A.js';
+import '../chunk-EGMQURBR.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';