@crewlethq/ui 0.37.1 → 0.39.0

package/README.md

@@ -43,14 +43,14 @@ 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` |
 | 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 |
@@ -204,6 +204,74 @@ 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.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
+
+**`VendorMark` draws Crewlet's own mark** (`vendor="crewlet"`), for the services built into Crewlet (its tracker, its knowledge base) where a catalogue of integrations lists them beside the third-party apps they stand in for. It is drawn from the brand mark `@crewlethq/icons` already carries (`CrewletIcon`), not a second copy, and takes the same `size` and `muted` as every other vendor. `VENDORS` lists it, so the VendorMark story shows it with the others.
+
+**Every vendor mark draws at one weight in its square.** GitLab's press-kit drawing framed its logo in twice its own width, so at 20px it drew 10px beside marks of 20; it is cropped to its logo. Crewlet's mark is framed in the square its own extent fits rather than in the wide brand file's artwork margins, so at 20px it draws 20 by 10 where it drew 17 by 9. The VendorMark story's One weight draws every mark at 20px in a 48px box.
+
+### Layout
+
+These come from a layout audit of the engine dashboard at 1440, 1024 and 390 in both themes; each names what was measured.
+
+**A stat row folds by its own width** (`StatGroup`). It dropped to two columns under a 1024px window, but a row is as wide as its column leaves it: beside the rail and a settings column at 1024 a four-column row was 489px and cut its figures ("Not s…"), and on a phone three tiles stood two and a lone third at double width. The row is a size container on twelve tracks: four a row fold to two under 640px of row, three stack one a row under 480px, and the hairlines follow. The row carries `data-columns` beside `--crewlet-stat-group-cols`. An application that restated the old `width < 1024px` step for a stat row drops it.
+
+**A stat row in a card is flush without being told.** A `StatGroup` that is a `Card`'s content, or a `Card.Body`'s, gives up its own surface, edge and corner, so a card no longer draws a box inside a box (or a third frame inside a padded body). `flush` stays for any other host.
+
+**A disclosure's fact gives way before its title** (`Disclosure`, `Accordion`). The fact (`meta`) held its full width and the title shrank to nothing beside a long one: a log row stopped saying which log it was, and its fact ran under the status badge beside it. The fact now shrinks first, at a hundred to the title's one, ends in an ellipsis, and keeps a floor of one glyph. It is still the toggle's name in full.
+
+**A narrow card's subtitle takes a line of its own** (`Card.Header`). Under 480px of card the head wraps: the title and the card's controls keep the first line, and the subtitle takes the whole of the next and wraps there rather than ending ("Resets today at midnight, the week…"). Only a card whose head has a subtitle becomes a size container. An application that wrapped a subtitle under the title for itself at narrow widths can drop that rule.
+
+**Description lists on one page share a term column** (`DescriptionList`). The term track is `--crewlet-description-list-term`, inherited, so a page sets it once and every list under it starts its values on one line; `termWidth` sets it on one list. The default track, `fit` and the narrow step are unchanged.
+
+**The make row lays out the kinds it is given** (`ArtifactMakeRow`). Five kinds stood in six fixed columns with an empty sixth at the end of the line, and three across on a phone left a hole after the fifth. The line takes a column per kind (`--crewlet-make-row-count`, with `data-count`, both set from `items`), and on a narrow tray a short last row is centred and two or four kinds stand two a row.
+
+**The rail foot stands on the nav's columns** (`AppShell`). A foot row's transparent boundary spends a pixel of its row pad, as it spent one of its block inset, so its mark and words start where the nav's do rather than a pixel right. In the foot, `AccountRow` takes the nav row's pad and glyph-to-word gap and centres its badge over a glyph's width, so the avatar is centred on the glyph column and the name starts on the word line.
+
+**The top bar lines up with the content** (`AppShell`). It stood 16px from each edge over content inset 20px, and the scroller's reserved gutter moved the content's end in further, so with classic scrollbars every page's actions ended 15px past the cards under them. The bar now takes the content's inset on both sides and, at its end, the scroller's gutter, which the shell measures and sets as `--crewlet-app-shell-gutter` on its root (0 with overlay scrollbars).
+
+### Colour
+
+**The neutral outline tag is drawn in the neutral pill's edge** (`Tag`). It took the plain hairline, which on a dark card measured 1.07:1, so "Off" beside a filled "Default" read as a loose word. It takes the strong step the neutral soft pill draws (1.49:1 dark, 1.52:1 light on the card) and keeps its tertiary ink and empty ground, so the two neutral pills differ by their fill alone.
+
+**Every hairline inside a card is easier to see.** `@crewlethq/tokens` holds the plain hairline to dE 5 on the card and the sheet (it held dE 3), and the default dark hairline moves from 1.07:1 to 1.13:1 on the card. A stat row's dividers, a card head's rule, a tile's footer rule and a code block's edge all draw it. See the tokens README.
+
 ## Changes in 0.37.1
 
 ### Sheets

package/dist/Accordion/index.js

@@ -1,4 +1,4 @@
-export { Accordion, AccordionItem } from '../chunk-RIAZM6L3.js';
+export { Accordion, AccordionItem } from '../chunk-ZNOXQACX.js';
 import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/AgentHandoffPanel/index.js

@@ -1,7 +1,7 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-YSG3DW7W.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-3TXY3PJZ.js';
 import '../chunk-AUQPBL4O.js';
 import '../chunk-3TFDQLW3.js';
-import '../chunk-MICH6QSJ.js';
+import '../chunk-OGXHZHRX.js';
 import '../chunk-ISA2O2BK.js';
 import '../chunk-Y5BD4MTE.js';
 import '../chunk-TYONQSOK.js';

package/dist/AppShell/index.js

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

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

@@ -181,7 +181,9 @@
  * compact density cannot take the target under it.
  *
  * And the boundary is TRANSPARENT rather than absent, spending one pixel of
- * that step rather than adding one on top of it. A button carries one at every
+ * that step rather than adding one on top of it. It spends a pixel of the row
+ * pad too: added to it, the boundary stood the row's mark and words a pixel
+ * right of every nav glyph and word above them. A button carries one at every
  * variant so that a bordered variant and a borderless one stand the same
  * height, and the row this package draws carries the same one for the same
  * reason: without it the two rows in one foot are 34px and 36px, and the
@@ -196,7 +198,7 @@
   width: 100%;
   min-width: 0;
   min-height: var(--size-row-sm);
-  padding: calc(var(--spacing-2) - 1px) var(--size-nav-row-pad);
+  padding: calc(var(--spacing-2) - 1px) calc(var(--size-nav-row-pad) - 1px);
   border: 1px solid transparent;
   border-radius: var(--radius-md);
   background: transparent;
@@ -427,13 +429,22 @@
   overflow: hidden;
 }
 
+/*
+ * THE BAR'S INSET IS THE CONTENT'S, so a page's first line starts under the
+ * bar's title and its cards end under the bar's last control. It stood 16px
+ * from each edge over a content column inset 20px, and at its end the
+ * content also gives up the scroller's gutter, which the bar, not scrolling,
+ * did not: with scrollbars drawn in the layout every page's actions ended
+ * 15px past the cards under them. The gutter is measured by the shell
+ * (`--crewlet-app-shell-gutter`, 0 where scrollbars overlay the content).
+ */
 .crewlet-app-shell__topbar {
   display: flex;
   align-items: center;
   gap: var(--spacing-3);
   flex: none;
   height: var(--crewlet-app-shell-topbar);
-  padding: 0 var(--spacing-4);
+  padding: 0 calc(var(--spacing-5) + var(--crewlet-app-shell-gutter, 0px)) 0 var(--spacing-5);
   border-bottom: 1px solid var(--color-border-default);
   background: var(--color-surface-background);
 }
@@ -616,7 +627,12 @@
   }
 
   /* THE TOP BAR'S GUTTER, 16px: the content's 12px stood every page's first
-     line 4px left of the title and the controls over it. */
+     line 4px left of the title and the controls over it. The bar and the
+     content take it together. */
+  .crewlet-app-shell__topbar {
+    padding: 0 calc(var(--spacing-4) + var(--crewlet-app-shell-gutter, 0px)) 0 var(--spacing-4);
+  }
+
   .crewlet-app-shell__content {
     padding: var(--spacing-4) var(--spacing-4) var(--spacing-9);
   }
@@ -662,10 +678,27 @@
   transition: background var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-/* In the rail's foot, the account row reaches up across its own padding to
-   half the foot's gap, to meet the row above (HitArea.css). */
+/*
+ * In the rail's foot, the account row reaches up across its own padding to
+ * half the foot's gap, to meet the row above (HitArea.css).
+ *
+ * AND IT STANDS ON THE NAV'S COLUMNS: the avatar centred on the column every
+ * nav glyph is centred on, and the name starting on the line every nav word
+ * starts on. On a 4px inset with an 8px gap a 26px avatar stood 2px left of
+ * the glyphs above it and the name 2px right of their words. The avatar's box
+ * takes a nav glyph's width (`sm`, 14px) and the badge is centred over it, so
+ * whatever size of badge a caller hands the row, it is centred where a glyph
+ * is, and the row takes the nav row's pad and its glyph-to-word gap.
+ */
 .crewlet-app-shell__rail-foot .crewlet-account-row__who {
   --crewlet-hit-area-block-start: calc(var(--crewlet-rail-foot-gap) / 2 + var(--crewlet-account-row-pad));
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  padding-inline-start: var(--size-nav-row-pad);
+}
+
+.crewlet-app-shell__rail-foot .crewlet-account-row__avatar {
+  justify-content: center;
+  width: 14px;
 }
 
 /* The row as the reader's menu button: a button drawn as the link is. */

package/dist/ArtifactBar/index.js

@@ -1,4 +1,4 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-S27UBCVX.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-TZYFTC4M.js';
 import '../chunk-4ISUIS6F.js';
 import '../chunk-2QZ2VPHR.js';
 import '../chunk-7SDUKCNW.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-OHA6WSAG.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-5QXRI35B.js';
+import '../chunk-INHXF2CL.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';

package/dist/ArtifactMakeRow/ArtifactMakeRow.d.ts

@@ -25,7 +25,9 @@ export interface ArtifactMakeRowProps {
  * kind's glyph on its own tint, its name and what it is for, the whole item
  * one link. A toolbar for making things rather than a hero: one line high on
  * a wide page, the details dropped before a name is cut, and three across on
- * a phone.
+ * a phone. However many kinds a reader is offered, the tray holds no empty
+ * cell: the line has a column per kind, and on a phone a short last row is
+ * centred, or four kinds stand two by two.
  *
  * THE TRAY IS A WORKBENCH, Crewlet's dotted field under the kinds the way the
  * org chart's canvas sits under its seats, and an item lifts off it as a card

package/dist/ArtifactMakeRow/index.js

@@ -1,4 +1,4 @@
-export { ArtifactMakeRow } from '../chunk-NS4NSHVX.js';
+export { ArtifactMakeRow } from '../chunk-R2IBCEU6.js';
 import '../chunk-CE2THTQR.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-BZFWDIV6.js';

package/dist/{ArtifactMakeRow-W3RD5YWZ.css → ArtifactMakeRow-6UX2LTF7.css}

@@ -8,9 +8,16 @@
  *
  * THE TRAY SIZES ITSELF BY ITS OWN WIDTH, never the window's: it sits in a
  * page column a sidebar narrows, so three steps are container queries on the
- * tray. Under 560px three across in two lines; from 560px the six in one
- * line, each its mark over its name, so a long name is never cut; from 920px
- * the mark beside the name and what the kind is for under it.
+ * tray. Under 560px three across, each its mark over its name; from 560px
+ * every kind in one line, still mark over name, so a long name is never cut;
+ * from 920px the mark beside the name and what the kind is for under it.
+ *
+ * AND BY ITS OWN COUNT. A reader is offered the kinds their company runs, so
+ * a tray holds five as often as six, and a grid fixed at six columns left an
+ * empty sixth of dotted field at the end of the line, and three across left a
+ * hole after the fifth. The line takes one column per kind
+ * (`--crewlet-make-row-count`, set from the items), and the narrow tray fills
+ * its rows by the count (`data-count`): see the narrow step below.
  */
 
 .crewlet-make-row {
@@ -28,7 +35,7 @@
 .crewlet-make-row__list {
   --crewlet-make-row-gap: var(--spacing-1);
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: var(--crewlet-make-row-gap);
   margin: 0;
   padding: var(--spacing-1);
@@ -109,9 +116,40 @@
   line-height: 1.35;
 }
 
+/*
+ * THE NARROW TRAY, on six tracks, each kind two of them: three a row. A last
+ * row that is short is centred under the full one rather than left with a
+ * hole after it, so five kinds stand three and two, the two in the middle.
+ * Two and four kinds stand two a row, which fills every row, and one kind
+ * takes the tray.
+ */
+@container (width < 560px) {
+  .crewlet-make-row__cell {
+    grid-column: span 2;
+  }
+
+  /* One kind short of a full last row: the first of the two moves in a track. */
+  .crewlet-make-row__cell:nth-child(3n + 1):nth-last-child(2) {
+    grid-column: 2 / span 2;
+  }
+
+  /* A last row of one stands in the middle. */
+  .crewlet-make-row__cell:nth-child(3n + 1):last-child {
+    grid-column: 3 / span 2;
+  }
+
+  .crewlet-make-row__list:is([data-count='2'], [data-count='4']) > .crewlet-make-row__cell {
+    grid-column: span 3;
+  }
+
+  .crewlet-make-row__list[data-count='1'] > .crewlet-make-row__cell {
+    grid-column: span 6;
+  }
+}
+
 @container (width >= 560px) {
   .crewlet-make-row__list {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
+    grid-template-columns: repeat(var(--crewlet-make-row-count, 6), minmax(0, 1fr));
   }
 
   .crewlet-make-row__item {

package/dist/AuthLayout/index.js

@@ -1,6 +1,6 @@
-export { AuthLayout } from '../chunk-WX2NIG4G.js';
+export { AuthLayout } from '../chunk-S4DREXGM.js';
 import '../chunk-7KBNFFM3.js';
-import '../chunk-5QXRI35B.js';
+import '../chunk-INHXF2CL.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.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-5QXRI35B.js';
+export { Card } from '../chunk-INHXF2CL.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

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

@@ -452,6 +452,69 @@
   min-width: 0;
 }
 
+/*
+ * ON A NARROW CARD THE SUBTITLE TAKES A LINE OF ITS OWN, under the title and
+ * the card's controls, and wraps there rather than ending.
+ *
+ * One line is right while the subtitle has room to say something beside the
+ * title. In a card under 480px wide it had none: on a phone an Agent seats
+ * card drew "Resets today at midnight, the week…" in 202px of a 361px
+ * sentence, and the half it cut was the half that said when. On its own line
+ * the subtitle has the head's whole width, and the title and the controls
+ * keep the first.
+ *
+ * THE CARD IS THE CONTAINER, and only a card whose head has a subtitle, since
+ * that is the one card this changes. Inline-size containment takes a card's
+ * width from where it stands, never from its contents, which is how a panel
+ * is laid out anyway; a card that sized itself to its contents (a tile in a
+ * row that does not stretch it) and carried no subtitle is untouched.
+ *
+ * THE NAME BLOCK TAKES THE FIRST LINE'S ROOM rather than its own width. With
+ * the row free to wrap, a title wider than what the controls leave would
+ * otherwise push the controls onto a second line; from a zero basis it grows
+ * into the room they leave and clips there, exactly as the one-line head does.
+ */
+.crewlet-card:has(> .crewlet-card__header > .crewlet-card__subtitle) {
+  container: crewlet-card / inline-size;
+}
+
+@container crewlet-card (width < 480px) {
+  .crewlet-card__header:has(> .crewlet-card__subtitle) {
+    flex-wrap: wrap;
+    row-gap: var(--spacing-1);
+  }
+
+  .crewlet-card__header:has(> .crewlet-card__subtitle) > .crewlet-card__header-main {
+    flex: 1 1 0;
+  }
+
+  .crewlet-card__header > .crewlet-card__subtitle {
+    order: 1;
+    flex: 1 1 100%;
+    white-space: normal;
+  }
+}
+
+/*
+ * 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-XNXK5MA4.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-ODEQTPFM.js';