@crewlethq/ui 0.37.1 → 0.38.0

package/README.md

@@ -204,6 +204,40 @@ 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

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,11 +1,11 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-YSG3DW7W.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-XBURIXHO.js';
 import '../chunk-AUQPBL4O.js';
 import '../chunk-3TFDQLW3.js';
-import '../chunk-MICH6QSJ.js';
-import '../chunk-ISA2O2BK.js';
+import '../chunk-OGXHZHRX.js';
+import '../chunk-ETVEGR2Y.js';
 import '../chunk-Y5BD4MTE.js';
-import '../chunk-TYONQSOK.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.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/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/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-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/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/CommandPalette/index.js

@@ -1,8 +1,8 @@
-export { CommandPalette } from '../chunk-A72JPXIV.js';
+export { CommandPalette } from '../chunk-PAQXOP2M.js';
 import '../chunk-SVGARBDY.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-TYONQSOK.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';

package/dist/CommentThread/index.js

@@ -1,13 +1,13 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-MMPKN7WV.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-PT6WKXKW.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-PWG3VHRQ.js';
-import '../chunk-ISA2O2BK.js';
-import '../chunk-TYONQSOK.js';
+import '../chunk-ETVEGR2Y.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';

package/dist/Composer/index.js

@@ -1,6 +1,6 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-ISA2O2BK.js';
-import '../chunk-TYONQSOK.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-ETVEGR2Y.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-NUZHC6MM.js';

package/dist/DataView/index.js

@@ -1,4 +1,4 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-MG3HTY6F.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-YQG4PZGC.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-A23KDROH.js';
 import '../chunk-UB6MLXUL.js';
@@ -13,8 +13,8 @@ import '../chunk-AXS6MBNH.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-TYONQSOK.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-D6FEHY5G.js';

package/dist/DatasetSource/index.js

@@ -1,5 +1,5 @@
-export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-HMLAWVG6.js';
-import '../chunk-GFV4LJHH.js';
+export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-IPWU6ERC.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';

package/dist/DescriptionList/DescriptionList.d.ts

@@ -12,6 +12,17 @@ export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
      * space after "Up" and stacks a list the panel had room to lay side by side.
      */
     fit?: boolean | undefined;
+    /**
+     * The term column's width, as a CSS track: `12rem`, or
+     * `minmax(120px, 14rem)`. For lists that have to line up with each other,
+     * stacked cards of settings on one page, where each list sizing the column
+     * to its own longest term starts its values somewhere else. The same track
+     * can be set once for a whole page as `--crewlet-description-list-term`,
+     * which every list under it inherits. Ignored with `fit`, whose column is
+     * its own longest term by definition, and under the narrow step, where a
+     * term stands over its detail.
+     */
+    termWidth?: string | undefined;
     /**
      * The pairs. Given as tuples so a caller can build them from a record
      * without inventing a key for each one; `DescriptionList.Item` children are
@@ -32,7 +43,7 @@ export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
  * Each pair is wrapped in a `div`, which HTML allows inside a `dl` and which
  * is what lets one pair be one grid row.
  */
-export declare function DescriptionList({ dense, fit, items, className, children, ...rest }: DescriptionListProps): import("react").JSX.Element;
+export declare function DescriptionList({ dense, fit, termWidth, items, className, style, children, ...rest }: DescriptionListProps): import("react").JSX.Element;
 export declare namespace DescriptionList {
     var Item: typeof DescriptionListItem;
 }

package/dist/DescriptionList/index.js

@@ -1,2 +1,2 @@
-export { DescriptionList, DescriptionListItem } from '../chunk-F2XSYBKH.js';
+export { DescriptionList, DescriptionListItem } from '../chunk-MFS6F2P7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{DescriptionList-IXMRCSMK.css → DescriptionList-DEZISDLQ.css}

@@ -4,11 +4,18 @@
  * The term track is `minmax(120px, max-content)`: wide enough that short terms
  * line up with each other, and free to grow for a long one rather than
  * wrapping it into two lines beside a one-word value.
+ *
+ * ONE LIST'S TRACK IS ITS OWN, which is wrong for a page of them. Four cards
+ * of limits stacked on one page each sized the column to their own longest
+ * term, so their values started at four different places and the cards did
+ * not read as one table. `--crewlet-description-list-term` names the track
+ * instead, and it is inherited: set once on the page (or passed to each list
+ * as `termWidth`), every list under it shares one column.
  */
 
 .crewlet-description-list {
   display: grid;
-  grid-template-columns: minmax(120px, max-content) 1fr;
+  grid-template-columns: var(--crewlet-description-list-term, minmax(120px, max-content)) 1fr;
   gap: var(--spacing-2) var(--spacing-4);
   margin: 0;
   font-size: var(--font-size-compact);

package/dist/Disclosure/index.js

@@ -1,4 +1,4 @@
-export { Disclosure } from '../chunk-MICH6QSJ.js';
+export { Disclosure } from '../chunk-OGXHZHRX.js';
 export { DisclosureAnatomy } from '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/{Disclosure-VKBJJIZ7.css → Disclosure-P4FH3C35.css}

@@ -115,9 +115,35 @@
   font-variant-ligatures: none;
 }
 
-/* A fact inside the button: quieter than the title it belongs to. */
+/*
+ * A fact inside the button: quieter than the title it belongs to, and the
+ * first thing to give up room when the row runs short.
+ *
+ * IT USED TO TAKE NONE. `flex: none` held a fact at its full width while the
+ * title, which may shrink, was the only thing that could, so a long fact (a
+ * log's replay mode, generation, range and size, beside a status badge in the
+ * actions) took the whole trigger: the title shrank to nothing, so a row no
+ * longer said which log it was, and the fact ran out of the button and under
+ * the badge beside it.
+ *
+ * A HUNDRED TO THE TITLE'S ONE, as a card's subtitle gives way to its title:
+ * two items that may shrink give up space in proportion to their widths, so
+ * at that ratio the fact absorbs effectively all of it, and ends in an
+ * ellipsis, before the title gives up a pixel. The fact is still the button's
+ * name in full; only its drawing is cut.
+ *
+ * NEVER TO NOTHING. The floor is one glyph wide, because a fact is often a
+ * mark (a failed call's glyph beside a tool's name), and a mark that shrank
+ * to nothing would say nothing at all. A long fact keeps an ellipsis there,
+ * which says a fact was cut. Once the fact is at its floor the title shrinks
+ * and ends in its own ellipsis.
+ */
 .crewlet-disclosure__meta {
-  flex: none;
+  flex: 0 100 auto;
+  min-width: 1.5em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   color: var(--color-text-tertiary);
   font-size: var(--font-size-xs);
 }

package/dist/ListInput/index.js

@@ -1,6 +1,6 @@
-export { ListInput } from '../chunk-DOLATMGF.js';
-import '../chunk-TYONQSOK.js';
+export { ListInput } from '../chunk-3ZUINC7C.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-OMV5W53A.js';

package/dist/PricingCard/index.js

@@ -1,4 +1,4 @@
-export { PricingCard } from '../chunk-DQSXWQMJ.js';
-import '../chunk-GFV4LJHH.js';
+export { PricingCard } from '../chunk-U3ILLCR2.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SheetColumnEditor/index.js

@@ -1,4 +1,4 @@
-export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-F3WZ5AKM.js';
+export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-4L2BWSHR.js';
 import '../chunk-XQZ6EWOE.js';
 import '../chunk-FFMCMSJB.js';
 import '../chunk-7KHM2FZH.js';
@@ -6,12 +6,12 @@ import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-F4LPQA4E.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-AXS6MBNH.js';
 import '../chunk-2QZ2VPHR.js';
 import '../chunk-7SDUKCNW.js';
 import '../chunk-RKKO7QHH.js';
-import '../chunk-TYONQSOK.js';
+import '../chunk-AXS6MBNH.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-D6FEHY5G.js';

package/dist/SheetGrid/index.js

@@ -1,9 +1,9 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-DZSBFITC.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-JZPK4IXR.js';
 import '../chunk-O2EGEONV.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-3BYIWOTV.js';
 import '../chunk-I6POAB4V.js';
-import '../chunk-GFV4LJHH.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-66X5WDKE.js';
 import '../chunk-LFSIKGRQ.js';

package/dist/StatGroup/StatGroup.d.ts

@@ -4,13 +4,17 @@ export interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {
      * How many tiles a row holds. FIXED, and that is the whole point: the board
      * this replaces reflowed from one column to three as tiles appeared and
      * vanished, which moved every number on the page for a reason that had
-     * nothing to do with the numbers.
+     * nothing to do with the numbers. What changes it is the row's own width:
+     * four fold to two under 640px of row, and three stack one a row under
+     * 480px, so no row is left with a lone tile.
      */
     columns?: 2 | 3 | 4;
     /**
-     * Inside another card: the row gives up its own surface, hairline and
-     * corner and keeps only the hairlines between its tiles, so a card holding
-     * it does not draw a box inside a box.
+     * The row gives up its own surface, hairline and corner and keeps only the
+     * hairlines between its tiles, so the host holding it does not draw a box
+     * inside a box. A row that is a `Card`'s content, or its body's, is flush
+     * without being told; this is for any other host (a widget's frame, a panel
+     * of an application's own).
      */
     flush?: boolean | undefined;
     children?: ReactNode;
@@ -19,8 +23,8 @@ export interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {
  * A row of stat tiles, as one card.
  *
  * The tiles inside it are `flush`, so the group draws the surface and the
- * hairlines between them rather than four separate cards with gaps. Under the
- * md breakpoint it drops to two columns, which is the last count at which a
- * six-character number still fits on one line of a phone.
+ * hairlines between them rather than four separate cards with gaps. It folds
+ * by its OWN width rather than the window's (see StatGroup.css), so a row in
+ * a narrow column beside a rail folds where a row across a page does not.
  */
 export declare function StatGroup({ columns, flush, className, children, ...rest }: StatGroupProps): import("react").JSX.Element;

package/dist/StatGroup/index.js

@@ -1,2 +1,2 @@
-export { StatGroup } from '../chunk-JXRI5YD2.js';
+export { StatGroup } from '../chunk-BT5H2THK.js';
 import '../chunk-ODEQTPFM.js';