@crewlethq/ui 0.37.0 → 0.38.0

package/README.md

@@ -204,6 +204,64 @@ 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.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
+
+**`SheetGrid`'s Add column fits the header's end.** Its track was the 24px pointer-target floor, narrower than the small icon button it holds (26px at the normal density, more at comfortable), so the square filled the track edge to edge and pushed it wider. The track is now the button's square plus a 4px inset on each side, at every density, and the plus is drawn at the button's own glyph size.
+
+**`SheetGrid` with Add column no longer scrolls sideways by a few pixels.** The grid was held to the scroller's width less an assumed width for the Add column control, so it overflowed by however much wider the control drew (2px at the default density), and the platform drew a horizontal scrollbar under a sheet with room to spare. The grid now grows into whatever room the control leaves.
+
+**`fit="content"` makes room for a horizontal scrollbar.** Sized exactly to its rows, a sheet wider than its box lost the scrollbar's height to it wherever the platform draws scrollbars in the layout, and scrolled down by that much as well. The grid measures the bar and adds its height, so a wide, short sheet scrolls sideways only.
+
+**A `LivePreview` still copy draws no scrollbar,** and nor does the live layer it is copied from. A copy of a box that scrolled (a sheet wider than its card) is a picture of its first view, and its scrollbar sat across the card as a stray band; with none in the live layer either, a sheet there leaves no room for one under its rows.
+
+### Focus
+
+**Focus handed back after a pointer press draws no ring.** A trigger focused again when its palette, menu, listbox or popover closes matched `:focus-visible`, because the field inside always did, so a palette opened with a click and closed with Escape left the sidebar's search box ringed. `returnFocus(el)` (exported with `FOCUS_RETURNED_ATTRIBUTE`) focuses the element and marks it until it blurs, and the base stylesheet in `@crewlethq/tokens` keeps the ring off a marked element while the modality is the pointer's. A key pressed afterwards brings it back. The modal stack, `Menu`, `Popover`, `Select`, `Switcher`, `Canvas`'s zoom field and `ArtifactBar`'s rename all hand focus back through it.
+
+**A shortcut outside a field is the keyboard** (`trackFocusModality`). Cmd+K or Ctrl+K opens the palette, so closing it with Escape rings whatever focus returns to. Inside a field a shortcut is still neither, since it is copy, paste or undo.
+
+**The palette's search field draws no ring under the pointer either.** Every field's pointer narrowing now matches the modality inside `:where()`, so it narrows a ring and never outranks a variant's own. Matched bare, it beat `Input`'s command variant and drew a square accent hairline round the palette's borderless field.
+
+### Hit areas
+
+**The rows of a list meet at their targets.** A list draws its rows a step apart, and the gap between two rows used to belong to no row: a pointer crossing a list slowly met the list itself there, so the hand turned into the arrow and the hover fill went out between every two rows and came back on the next, which reads as the cursor flickering. Measured on the sheet create page's "Start from" list, a slow pass down it switched the cursor 14 times and crossed six dead strips of 4px; it now switches twice, on entering and leaving. Each row reaches half the gap on each side with an empty `::after`, so the drawn spacing is unchanged and the targets meet in the middle of the gap. The reach is `HIT_AREA_CLASS` (`HitArea.css`), set on the row from the gap its list is laid out with as `--crewlet-hit-area-block` and `--crewlet-hit-area-inline`, measured from the row's padding edge. `ChoiceList` (with the answer after a dashed rule reaching up across it, and a row with its panel open reaching nothing downward), `SidebarNav`'s rows and nested rows, the rail foot's `AppShellRailRow` and `AccountRow`, `ArtifactMakeRow`'s tray, `Tabs` in every variant, `SegmentedControl`, `Select`'s and `Combobox`'s options, `DatasetSourceList`'s entries and the command palette's scopes take it. A list of an application's own takes it the same way (Foundations / Hit areas). No scroller grows: the reach stays inside each list's padding, and a scrolling row of tabs reaches nothing past its first and last tab.
+
 ## Changes in 0.37.0
 
 ### An artifact list with an identity

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,16 +1,16 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-EOQFPZEE.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-XBURIXHO.js';
 import '../chunk-AUQPBL4O.js';
 import '../chunk-3TFDQLW3.js';
-import '../chunk-MICH6QSJ.js';
-import '../chunk-RH2NCQBZ.js';
+import '../chunk-OGXHZHRX.js';
+import '../chunk-ETVEGR2Y.js';
 import '../chunk-Y5BD4MTE.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AppShell/index.d.ts

@@ -1,3 +1,4 @@
+import '../HitArea/HitArea.css';
 import './AppShell.css';
 export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './AppShell.js';
 export { AccountRow } from './AccountRow.js';

package/dist/AppShell/index.js

@@ -1,9 +1,11 @@
-export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-PGZ2R3ON.js';
+export { AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-DYB66CNM.js';
 import '../chunk-RTPQDNW3.js';
-import '../chunk-BUVCV3WI.js';
+import '../chunk-D6FEHY5G.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.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/{AppShell-JTSEOA57.css → AppShell-NDU4XMGF.css}

@@ -146,10 +146,11 @@
 /* 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 {
+  --crewlet-rail-foot-gap: var(--spacing-1);
   flex: none;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-1);
+  gap: var(--crewlet-rail-foot-gap);
   padding: var(--spacing-2) var(--size-nav-gutter);
   border-top: 1px solid var(--color-border-default);
 }
@@ -180,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
@@ -195,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;
@@ -209,6 +212,10 @@
 
 .crewlet-app-shell__rail-row--action,
 .crewlet-app-shell__rail-foot > .crewlet-btn {
+  /* Half the foot's gap to each neighbour, so the rows' targets meet
+     (HitArea.css), across the row's 1px border; the account row below
+     reaches back the same way. */
+  --crewlet-hit-area-block: calc(var(--crewlet-rail-foot-gap, 0px) / 2 + 1px);
   cursor: pointer;
   transition:
     background var(--motion-duration-fast) var(--motion-easing-default),
@@ -422,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);
 }
@@ -611,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);
   }
@@ -635,11 +656,12 @@
  * the controls off the rail.
  */
 .crewlet-account-row {
+  --crewlet-account-row-pad: var(--spacing-1);
   display: flex;
   align-items: center;
   gap: var(--spacing-1);
   min-width: 0;
-  padding: var(--spacing-1) 0;
+  padding: var(--crewlet-account-row-pad) 0;
 }
 
 .crewlet-account-row__who {
@@ -656,6 +678,29 @@
   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).
+ *
+ * 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. */
 button.crewlet-account-row__who {
   width: 100%;

package/dist/ArrangeList/index.js

@@ -1,11 +1,11 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-27GD7LVR.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-ZMWXE4GT.js';
 import '../chunk-A722MUNR.js';
 import '../chunk-XJ2QEBMM.js';
-import '../chunk-PJIPUEJ3.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
+import '../chunk-AXS6MBNH.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactBar/index.js

@@ -1,17 +1,19 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-APDKUGSH.js';
-import '../chunk-WKEPORNM.js';
-import '../chunk-6ZJ3N7QI.js';
-import '../chunk-CCAXYHQS.js';
-import '../chunk-VL6CUNSX.js';
+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';
+import '../chunk-I33UIUZD.js';
 import '../chunk-ILDNJHRU.js';
 import '../chunk-CE2THTQR.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-BUVCV3WI.js';
+import '../chunk-D6FEHY5G.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.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/ArtifactCard/index.js

@@ -1,10 +1,10 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-OHA6WSAG.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-OTCXRJ7D.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-ZK3VYY7L.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';

package/dist/ArtifactCover/index.js

@@ -1,5 +1,5 @@
-export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-JQLS3MZB.js';
-import '../chunk-P6WFZDKS.js';
+export { DashboardCover, DocCover, SHEET_COVER_COLUMNS, SHEET_COVER_ROWS, SheetCover } from '../chunk-FWBKMPNR.js';
+import '../chunk-PWG3VHRQ.js';
 import '../chunk-CE2THTQR.js';
-import '../chunk-YSGLEHND.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-ODEQTPFM.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.d.ts

@@ -1,3 +1,4 @@
+import '../HitArea/HitArea.css';
 import '../ArtifactKindIllustration/ArtifactKinds.css';
 import './ArtifactMakeRow.css';
 export { ArtifactMakeRow } from './ArtifactMakeRow.js';

package/dist/ArtifactMakeRow/index.js

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

package/dist/{ArtifactMakeRow-XBA2MPSY.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 {
@@ -26,9 +33,10 @@
 }
 
 .crewlet-make-row__list {
+  --crewlet-make-row-gap: var(--spacing-1);
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--spacing-1);
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: var(--crewlet-make-row-gap);
   margin: 0;
   padding: var(--spacing-1);
   list-style: none;
@@ -53,6 +61,10 @@
   color: var(--color-text-primary);
   text-decoration: none;
   outline: none;
+  /* Half the gap to each neighbour, so the targets meet (HitArea.css), and
+     the 1px border the reach is measured inside of. */
+  --crewlet-hit-area-block: calc(var(--crewlet-make-row-gap) / 2 + 1px);
+  --crewlet-hit-area-inline: calc(var(--crewlet-make-row-gap) / 2 + 1px);
   transition:
     background-color var(--motion-duration-fast) var(--motion-easing-out),
     border-color var(--motion-duration-fast) var(--motion-easing-out),
@@ -104,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-BJI3RFXG.js';
 import '../chunk-7KBNFFM3.js';
-import '../chunk-5QXRI35B.js';
+import '../chunk-ZK3VYY7L.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/AvatarPicker/index.js

@@ -1,14 +1,16 @@
-export { AvatarPicker } from '../chunk-GYBDPCRC.js';
-import '../chunk-SUXP4OBT.js';
-import '../chunk-K3IJQNB7.js';
+export { AvatarPicker } from '../chunk-ECGGQX2H.js';
+import '../chunk-F4LPQA4E.js';
+import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-YEVG2X5R.js';
-import '../chunk-CCAXYHQS.js';
-import '../chunk-VL6CUNSX.js';
+import '../chunk-2QZ2VPHR.js';
+import '../chunk-7SDUKCNW.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-2YTOOH3A.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Canvas/index.js

@@ -1,10 +1,11 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-4BYHAOHH.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-DAERKOOG.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-6ZJ3N7QI.js';
+import '../chunk-I33UIUZD.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CanvasBoard/index.js

@@ -1,14 +1,15 @@
-export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-FHHYXZSP.js';
+export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-C7OKDYBH.js';
 import '../chunk-5SZGKSGL.js';
-import '../chunk-7VAUGG6B.js';
-import '../chunk-PGRPNDWM.js';
-import '../chunk-4BYHAOHH.js';
+import '../chunk-B5UHX5UC.js';
+import '../chunk-NR4CPM4T.js';
+import '../chunk-DAERKOOG.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-6ZJ3N7QI.js';
+import '../chunk-I33UIUZD.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CanvasToolbar/index.js

@@ -1,12 +1,13 @@
-export { CanvasToolbar, toolForKey } from '../chunk-7VAUGG6B.js';
-import '../chunk-PGRPNDWM.js';
-import '../chunk-4BYHAOHH.js';
+export { CanvasToolbar, toolForKey } from '../chunk-B5UHX5UC.js';
+import '../chunk-NR4CPM4T.js';
+import '../chunk-DAERKOOG.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-6ZJ3N7QI.js';
+import '../chunk-I33UIUZD.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Card/index.js

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

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

@@ -452,6 +452,49 @@
   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;
+  }
+}
+
 .crewlet-card__description {
   margin: 0;
   font-size: var(--font-size-compact);

package/dist/ChangeMark/index.js

@@ -1,8 +1,9 @@
-export { ChangeMark } from '../chunk-47JQAGRV.js';
+export { ChangeMark } from '../chunk-66X5WDKE.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-6ZJ3N7QI.js';
+import '../chunk-I33UIUZD.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Checkbox/index.js

@@ -1,7 +1,7 @@
-export { Checkbox, CheckboxGroup } from '../chunk-PJIPUEJ3.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
+export { Checkbox, CheckboxGroup } from '../chunk-AXS6MBNH.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ChoiceList/index.d.ts

@@ -1,3 +1,4 @@
+import '../HitArea/HitArea.css';
 import './ChoiceList.css';
 export { ChoiceList } from './ChoiceList.js';
 export type { ChoiceListOption, ChoiceListProps } from './ChoiceList.js';

package/dist/ChoiceList/index.js

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