@crewlethq/ui 0.37.1 → 0.38.0

package/dist/styles.css

@@ -702,7 +702,7 @@
 }
 
 
-/* AppShell-JBCZSSX3.css */
+/* AppShell-NDU4XMGF.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -886,7 +886,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
@@ -901,7 +903,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;
@@ -1132,13 +1134,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);
 }
@@ -1321,7 +1332,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);
   }
@@ -1367,10 +1383,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. */
@@ -3311,7 +3344,7 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
 .crewlet-kind--sheet { --crewlet-kind-hue: var(--color-artifact-kind-sheet); --crewlet-kind-fill: var(--color-artifact-kind-sheet-fill); --crewlet-kind-line: var(--color-artifact-kind-sheet-line); --crewlet-kind-ink: var(--color-artifact-kind-sheet-ink); }
 
 
-/* ArtifactMakeRow-W3RD5YWZ.css */
+/* ArtifactMakeRow-6UX2LTF7.css */
 /*
  * The "Start a new artifact" tray.
  *
@@ -3322,9 +3355,16 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
  *
  * 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 {
@@ -3342,7 +3382,7 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
 .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);
@@ -3423,9 +3463,40 @@ a.crewlet-kind-tile:hover .crewlet-kind-tile__frame,
   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 {
@@ -6195,7 +6266,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Card-QOVASQNU.css */
+/* Card-G2ZGT5Z6.css */
 /*
  * Card, THE surface. Everything on a screen is a card, a row inside one, or a
  * control.
@@ -6650,6 +6721,49 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   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);
@@ -12393,18 +12507,25 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* DescriptionList-IXMRCSMK.css */
+/* DescriptionList-DEZISDLQ.css */
 /*
  * Metadata pairs on one grid.
  *
  * 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);
@@ -12670,7 +12791,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Disclosure-VKBJJIZ7.css */
+/* Disclosure-P4FH3C35.css */
 /*
  * The disclosure anatomy, declared once for every expander in the package.
  *
@@ -12788,9 +12909,35 @@ svg.crewlet-datetime__chevron {
   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);
 }
@@ -25690,7 +25837,7 @@ svg.crewlet-select__chevron {
 .crewlet-statcard--info .crewlet-statcard__value { color: var(--color-feedback-info-ink); }
 
 
-/* StatGroup-PADTJCUQ.css */
+/* StatGroup-DOFHX5QJ.css */
 /*
  * A row of stat tiles.
  *
@@ -25698,11 +25845,29 @@ svg.crewlet-select__chevron {
  * tiles appeared and vanished moved every number on the page for a reason that
  * had nothing to do with the numbers, which is exactly what a reader watching
  * a live board is trying not to have happen.
+ *
+ * IT FOLDS BY ITS OWN WIDTH, never the window's. The row used to drop to two
+ * columns under a 1024px viewport, but a row's width is whatever its column
+ * leaves it: beside the rail and a settings column at exactly 1024 a
+ * four-column row was 489px wide, its tiles about 120px each, and its figures
+ * were cut ("Not s…", "1.6 …"), while on a phone a three-column row folded to
+ * two and left its third tile alone on a row of its own. So the row is a size
+ * container, and the tiles take their place from the row's own width.
+ *
+ * TWELVE TRACKS, AND EACH TILE SPANS ITS SHARE. A container query styles what
+ * is inside the container, never the container itself, so the row cannot
+ * change its own column count by its own width. Its tiles can change how many
+ * of its twelve tracks they span, which is the same layout: twelve divides by
+ * every count a row takes (one, two, three and four a row).
+ *
+ * The row's width comes from where it stands, as a block's does: inline-size
+ * containment means its contents never widen it.
  */
 
 .crewlet-stat-group {
+  container: crewlet-stat-group / inline-size;
   display: grid;
-  grid-template-columns: repeat(var(--crewlet-stat-group-cols, 4), minmax(0, 1fr));
+  grid-template-columns: repeat(12, minmax(0, 1fr));
   /* The flush-panel recipe: the card's surface, its hairline and its 12px
      corner, flat as every card is, and `overflow: hidden`, which is what lets
      the tiles inside sit against the corners without their own hairlines
@@ -25713,8 +25878,19 @@ svg.crewlet-select__chevron {
   overflow: hidden;
 }
 
-/* Inside another card: the card's surface and edge are the row's. */
-.crewlet-stat-group--flush {
+/*
+ * Inside another card: the card's surface and edge are the row's.
+ *
+ * A ROW STANDING IN A CARD IS FLUSH WHETHER OR NOT ITS CALLER SAID SO. Six
+ * settings pages wrapped a row in a card without `flush`, and each drew the
+ * row's own edge and 12px corner one pixel inside the card's: a box inside a
+ * box, and inside a padded body a third frame. A row that is a card's content,
+ * or its body's, is that card's row; `flush` is for a host that is not a
+ * Card (a widget's frame, a panel of an application's own).
+ */
+.crewlet-stat-group--flush,
+.crewlet-card > .crewlet-stat-group,
+.crewlet-card__body > .crewlet-stat-group {
   background: transparent;
   border: 0;
   border-radius: var(--radius-none);
@@ -25740,40 +25916,93 @@ svg.crewlet-select__chevron {
 }
 
 /*
- * A hairline between columns, drawn on the tile that follows one.
+ * Each tile spans its share of the twelve tracks: the row's `columns`, set on
+ * it as `--crewlet-stat-group-cols`, a row.
+ */
+.crewlet-stat-group > * {
+  grid-column: span calc(12 / var(--crewlet-stat-group-cols, 4));
+}
+
+/*
+ * The hairlines between tiles: one before every tile that does not start a
+ * row, and one above every tile that is not on the first.
  *
  * NAMED TWICE, ON PURPOSE. The rule above clears the tile's own border and
  * weighs two classes, so a one-class selector here loses to it and the row
  * of numbers runs together with nothing between the columns. The first
- * selector matches whatever a caller puts in the row; the second weighs the
- * same as the rule it has to beat, and sits after it.
+ * selector of each pair matches whatever a caller puts in the row; the second
+ * weighs at least as much as the rule it has to beat, and sits after it.
  */
 .crewlet-stat-group > * + *,
 .crewlet-stat-group > .crewlet-statcard + .crewlet-statcard {
   border-left: 1px solid var(--color-border-default);
 }
 
+.crewlet-stat-group[data-columns='2'] > :nth-child(2n + 1),
+.crewlet-stat-group[data-columns='2'] > .crewlet-statcard:nth-child(2n + 1),
+.crewlet-stat-group[data-columns='3'] > :nth-child(3n + 1),
+.crewlet-stat-group[data-columns='3'] > .crewlet-statcard:nth-child(3n + 1),
+.crewlet-stat-group[data-columns='4'] > :nth-child(4n + 1),
+.crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(4n + 1) {
+  border-left: 0;
+}
+
+.crewlet-stat-group[data-columns='2'] > :nth-child(n + 3),
+.crewlet-stat-group[data-columns='2'] > .crewlet-statcard:nth-child(n + 3),
+.crewlet-stat-group[data-columns='3'] > :nth-child(n + 4),
+.crewlet-stat-group[data-columns='3'] > .crewlet-statcard:nth-child(n + 4),
+.crewlet-stat-group[data-columns='4'] > :nth-child(n + 5),
+.crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(n + 5) {
+  border-top: 1px solid var(--color-border-default);
+}
+
 /*
- * Two columns under the shell breakpoint, which is where the engine drops its
- * own stat row, and strictly under it, as the shell switches. The step is
- * 1024px, a 236px rail, the 8px inset and a 780px floor for the sheet, and it
- * is the width at which the shell stops holding the page beside the rail. The
- * rules are written for the general case rather than per column count: the
- * first tile of each pair loses its left hairline, and everything on the
- * second row and below gains a top one.
+ * FOUR A ROW FOLD TO TWO under 640px of row (the phone breakpoint's number):
+ * four tiles of 160px is the narrowest at which a six-character figure and a
+ * two-word label still stand on one line each. Two by two keeps every row
+ * full.
  */
-@media (width < 1024px) {
-  .crewlet-stat-group {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+@container crewlet-stat-group (width < 640px) {
+  .crewlet-stat-group[data-columns='4'] > *,
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard {
+    grid-column: span 6;
   }
 
-  .crewlet-stat-group > *:nth-child(odd),
-  .crewlet-stat-group > .crewlet-statcard:nth-child(odd) {
+  .crewlet-stat-group[data-columns='4'] > :nth-child(odd),
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(odd) {
     border-left: 0;
   }
 
-  .crewlet-stat-group > *:nth-child(n + 3),
-  .crewlet-stat-group > .crewlet-statcard:nth-child(n + 3) {
+  .crewlet-stat-group[data-columns='4'] > :nth-child(even),
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(even) {
+    border-left: 1px solid var(--color-border-default);
+  }
+
+  .crewlet-stat-group[data-columns='4'] > :nth-child(n + 3),
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(n + 3) {
+    border-top: 1px solid var(--color-border-default);
+  }
+}
+
+/*
+ * THREE A ROW STACK under 480px of row (the small breakpoint's number), at the
+ * same 160px a tile. Folded to two, three tiles stood two and one, the last
+ * alone at double width and a different height, which read as a tile that had
+ * failed to load; one a row leaves no row short.
+ */
+@container crewlet-stat-group (width < 480px) {
+  .crewlet-stat-group[data-columns='3'] > *,
+  .crewlet-stat-group[data-columns='3'] > .crewlet-statcard {
+    grid-column: span 12;
+  }
+
+  .crewlet-stat-group[data-columns='3'] > *,
+  .crewlet-stat-group[data-columns='3'] > .crewlet-statcard + .crewlet-statcard {
+    border-left: 0;
+  }
+
+  .crewlet-stat-group[data-columns='3'] > :nth-child(n + 2),
+  .crewlet-stat-group[data-columns='3'] > .crewlet-statcard:nth-child(n + 2) {
     border-top: 1px solid var(--color-border-default);
   }
 }
@@ -27405,7 +27634,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* Tag-SRGTK5KI.css */
+/* Tag-2DQOVE6W.css */
 /*
  * The tag: a small pill naming a state, a category or a value.
  *
@@ -27685,12 +27914,22 @@ b.crewlet-switcher__match {
   --crewlet-tag-line: var(--color-border-strong-hover);
 }
 
-/* The neutral outline is the engine's `.badge.outline`: the hairline step as
-   the boundary, and the tertiary ink, which is a quieter register than the
-   tinted outlines keep. It is the appearance for a value that is not a state
-   at all, so it says less than its neighbours on purpose. */
+/*
+ * The neutral outline: the neutral pill's own boundary with no fill, and the
+ * tertiary ink, which is a quieter register than the tinted outlines keep. It
+ * is the appearance for a value that is not a state at all, so it says less
+ * than its neighbours on purpose, by its ink and its empty ground.
+ *
+ * NOT BY A FAINTER EDGE. It used to take the plain hairline, the line that
+ * finds a card, and on the card it so often stands on that line measured
+ * 1.07:1 in dark: Limits' "Off" beside a filled "Default", an audit row's
+ * machine and open, a tool's "builtin", all read as loose words rather than
+ * as pills. The strong step is the edge the neutral soft pill already draws
+ * (1.49:1 dark, 1.52:1 light on the card), so the two neutral pills differ by
+ * their fill alone and both read as pills.
+ */
 .crewlet-tag--neutral.crewlet-tag--outline {
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-strong);
   --crewlet-tag-ink: var(--color-text-tertiary);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.37.1",
+  "version": "0.38.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.37.1",
-    "@crewlethq/tokens": "0.37.1",
+    "@crewlethq/icons": "0.38.0",
+    "@crewlethq/tokens": "0.38.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/StatGroup-PADTJCUQ.css

@@ -1,86 +0,0 @@
-/*
- * A row of stat tiles.
- *
- * ITS COLUMN COUNT NEVER MOVES with its contents. A grid that reflowed as
- * tiles appeared and vanished moved every number on the page for a reason that
- * had nothing to do with the numbers, which is exactly what a reader watching
- * a live board is trying not to have happen.
- */
-
-.crewlet-stat-group {
-  display: grid;
-  grid-template-columns: repeat(var(--crewlet-stat-group-cols, 4), minmax(0, 1fr));
-  /* The flush-panel recipe: the card's surface, its hairline and its 12px
-     corner, flat as every card is, and `overflow: hidden`, which is what lets
-     the tiles inside sit against the corners without their own hairlines
-     escaping past them. */
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-}
-
-/* Inside another card: the card's surface and edge are the row's. */
-.crewlet-stat-group--flush {
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-none);
-}
-
-/*
- * A tile inside the row brings no surface of its own, whether or not its
- * caller remembered `flush`. The group draws one card and the hairlines
- * inside it, so a tile that kept its own border and radius is a card inside
- * a card: a box inside a box, which is what the reader sees.
- *
- * TWO CLASSES, NOT :where(). Written as `> :where(.crewlet-statcard)` this
- * weighed exactly what the tile's own `.crewlet-statcard` rule weighs, so
- * which one painted was settled by whichever stylesheet the bundler put
- * last. It put the tile's last, and every tile in every group drew its own
- * border, its own 12px corner and its own surface inside the group's.
- * Naming both classes settles it by weight, which no import order can undo.
- */
-.crewlet-stat-group > .crewlet-statcard {
-  background: transparent;
-  border: 0;
-  border-radius: var(--radius-none);
-}
-
-/*
- * A hairline between columns, drawn on the tile that follows one.
- *
- * NAMED TWICE, ON PURPOSE. The rule above clears the tile's own border and
- * weighs two classes, so a one-class selector here loses to it and the row
- * of numbers runs together with nothing between the columns. The first
- * selector matches whatever a caller puts in the row; the second weighs the
- * same as the rule it has to beat, and sits after it.
- */
-.crewlet-stat-group > * + *,
-.crewlet-stat-group > .crewlet-statcard + .crewlet-statcard {
-  border-left: 1px solid var(--color-border-default);
-}
-
-/*
- * Two columns under the shell breakpoint, which is where the engine drops its
- * own stat row, and strictly under it, as the shell switches. The step is
- * 1024px, a 236px rail, the 8px inset and a 780px floor for the sheet, and it
- * is the width at which the shell stops holding the page beside the rail. The
- * rules are written for the general case rather than per column count: the
- * first tile of each pair loses its left hairline, and everything on the
- * second row and below gains a top one.
- */
-@media (width < 1024px) {
-  .crewlet-stat-group {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .crewlet-stat-group > *:nth-child(odd),
-  .crewlet-stat-group > .crewlet-statcard:nth-child(odd) {
-    border-left: 0;
-  }
-
-  .crewlet-stat-group > *:nth-child(n + 3),
-  .crewlet-stat-group > .crewlet-statcard:nth-child(n + 3) {
-    border-top: 1px solid var(--color-border-default);
-  }
-}

package/dist/{chunk-DOLATMGF.js → chunk-3ZUINC7C.js}

@@ -1,5 +1,5 @@
-import { FormField, Textarea, Input } from './chunk-TYONQSOK.js';
 import { Kbd } from './chunk-SMBKXWML.js';
+import { FormField, Textarea, Input } from './chunk-TYONQSOK.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';

package/dist/{chunk-F3WZ5AKM.js → chunk-4L2BWSHR.js}

@@ -3,8 +3,8 @@ import { SHEET_LABELS, SHEET_COLUMN_TYPES, optionHue, retypeColumn } from './chu
 import { HueSwatch } from './chunk-F4LPQA4E.js';
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { Checkbox } from './chunk-AXS6MBNH.js';
-import { FormField, Input } from './chunk-TYONQSOK.js';
 import { Kbd } from './chunk-SMBKXWML.js';
+import { FormField, Input } from './chunk-TYONQSOK.js';
 import { Menu } from './chunk-D6FEHY5G.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';

package/dist/{chunk-ISA2O2BK.js → chunk-ETVEGR2Y.js}

@@ -1,5 +1,5 @@
-import { Textarea } from './chunk-TYONQSOK.js';
 import { Kbd } from './chunk-SMBKXWML.js';
+import { Textarea } from './chunk-TYONQSOK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Composer-TXULCPPV.css';
 import { forwardRef } from 'react';

package/dist/{chunk-A72JPXIV.js → chunk-PAQXOP2M.js}

@@ -1,7 +1,7 @@
 import { Modal } from './chunk-SVGARBDY.js';
 import { useListbox, useHighlightRest } from './chunk-7KHM2FZH.js';
-import { Input } from './chunk-TYONQSOK.js';
 import { Kbd } from './chunk-SMBKXWML.js';
+import { Input } from './chunk-TYONQSOK.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';

package/dist/{chunk-MG3HTY6F.js → chunk-YQG4PZGC.js}

@@ -5,8 +5,8 @@ import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
-import { Input } from './chunk-TYONQSOK.js';
 import { Kbd } from './chunk-SMBKXWML.js';
+import { Input } from './chunk-TYONQSOK.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { Menu } from './chunk-D6FEHY5G.js';
 import { Button } from './chunk-OG6CL3EB.js';