@crewlethq/ui 0.37.1 → 0.39.0

package/dist/SettingsTable-6DUFAFXG.css

@@ -0,0 +1,160 @@
+/*
+ * SettingsTable: a read-only table of settings, one row each, on one grid.
+ *
+ * THE TRACKS ARE FRACTIONS OF THE TABLE, so every table of one width shares
+ * them: a page that stacks a table per group puts each column on one line
+ * down the page with nothing to coordinate. `--crewlet-settings-table-columns`
+ * is inherited, so a page that wants other proportions sets it once.
+ *
+ * Each row is its own grid on those tracks rather than a subgrid of the
+ * table's, because the tracks are fractions: one row's long label can never
+ * move another row's value, which is what a content-sized track would do.
+ */
+
+.crewlet-settings-table {
+  container: crewlet-settings-table / inline-size;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  font-size: var(--font-size-compact);
+  /* The flush-panel recipe, standing on its own: the card's surface, its
+     hairline and its corner. Inside a card it gives them up (below). */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+/*
+ * A TABLE THAT IS A CARD'S CONTENT IS THAT CARD'S TABLE. It draws no edge or
+ * corner of its own inside one, so a card never holds a box inside a box; its
+ * rows' hairlines run to the card's edges under the card's own head rule.
+ */
+.crewlet-card > .crewlet-settings-table,
+.crewlet-card__body > .crewlet-settings-table {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-none);
+}
+
+.crewlet-settings-table__row {
+  display: grid;
+  grid-template-columns: var(
+    --crewlet-settings-table-columns,
+    minmax(0, 5fr) minmax(0, 3fr) minmax(0, 2fr)
+  );
+  column-gap: var(--spacing-6);
+  /* ONE BASELINE PER ROW: the name, the value and the source sit on the
+     first line's baseline, whatever the name's key adds under it. */
+  align-items: baseline;
+  min-height: var(--size-row-md);
+  padding: var(--spacing-3) var(--spacing-4);
+}
+
+.crewlet-settings-table__body > .crewlet-settings-table__row + .crewlet-settings-table__row {
+  border-top: 1px solid var(--color-border-default);
+}
+
+/*
+ * The column names, in the micro-label register a table's header takes
+ * across the system, on the panel's own ground. Hidden by default (see the
+ * component): still the table's column headers for assistive technology.
+ */
+.crewlet-settings-table__head .crewlet-settings-table__row {
+  min-height: 0;
+  padding-block: var(--spacing-2);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-settings-table__name {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+.crewlet-settings-table__head--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.crewlet-settings-table__setting {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-settings-table__label {
+  color: var(--color-text-primary);
+  line-height: var(--font-line-height-snug);
+}
+
+/*
+ * THE KEY IS FOR THE READER WHO WILL GO AND CHANGE IT, so it is there and
+ * quiet: the monospace face at the smallest step, in the tertiary ink, and
+ * free to break anywhere, since a dotted path is one word to a line breaker.
+ */
+.crewlet-settings-table__key {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-tertiary);
+  overflow-wrap: anywhere;
+}
+
+/* Tabular figures, so a column of numbers reads down its digits. */
+.crewlet-settings-table__value {
+  min-width: 0;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-settings-table__source {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--spacing-2);
+  min-width: 0;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* A value that differs from its default is the row a reader came to find. */
+.crewlet-settings-table__source--changed {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-settings-table__source--changed .crewlet-status-dot {
+  align-self: center;
+}
+
+/*
+ * NARROW: the name takes the row's first line, and the value and its source
+ * share the second. Three columns at this width leave a name column a word
+ * wide, which wraps every name into a stack of single words.
+ */
+@container crewlet-settings-table (width < 32rem) {
+  .crewlet-settings-table__row {
+    grid-template-columns: minmax(0, 1fr) auto;
+    row-gap: var(--spacing-1);
+  }
+
+  .crewlet-settings-table__setting {
+    grid-column: 1 / -1;
+  }
+
+  .crewlet-settings-table__source {
+    justify-self: end;
+  }
+}

package/dist/ShareDialog/index.js

@@ -1,9 +1,9 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-UWRBD2YO.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-KNHUBHFX.js';
 import '../chunk-XQZ6EWOE.js';
 import '../chunk-W46LPU4R.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-SVGARBDY.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-CI3VPIJN.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/StatCard/index.js

@@ -1,3 +1,3 @@
-export { StatCard } from '../chunk-XO7PUL4F.js';
+export { StatCard } from '../chunk-YPTTSJPM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{StatCard-4T7TMWMN.css → StatCard-HAA3F5GX.css}

@@ -186,6 +186,12 @@
  * tiles where only some carry one still stands at one height: its leading is
  * set here and the reserve is exactly one line of it, where a reserve in `em`
  * was a line shorter than the one a sub actually draws.
+ *
+ * IT WRAPS, balanced, rather than ending in an ellipsis. The line qualifies
+ * the number, so its end is the half that says what the number means, and
+ * `nowrap` cut it: "6 seats idle and waiting for ..." on a phone, a caption
+ * mid-clause at 1440. A grid of tiles (a StatGroup, or a caller's own) gives
+ * every tile in a row one height, so a second line costs no alignment.
  */
 .crewlet-statcard__sub {
   min-height: calc(1em * var(--font-line-height-body));
@@ -194,9 +200,8 @@
   /* The quiet step, with the label. The line qualifies the number rather than
      being a second one. */
   color: var(--color-text-tertiary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  text-wrap: balance;
 }
 
 /*

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-OUD75UB2.js';
 import '../chunk-ODEQTPFM.js';

package/dist/StatGroup-ZMW7VQWP.css

@@ -0,0 +1,195 @@
+/*
+ * 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.
+ *
+ * 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(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
+     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.
+ *
+ * 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);
+}
+
+/*
+ * 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 ROW OF TILES SHARES ITS LINES. A tile stacks its label, its number and its
+ * sub in a column of its own, so a label that wrapped pushed its own number
+ * down and no other: beside a node's peek at 1440, "Behind on config" broke
+ * over two lines and its figure sat 18px below the other three. Inside a row
+ * each tile is a SUBGRID over the row's lines, one per line the tile renders
+ * (StatCard always renders three, an absent sub included), so a line is as
+ * tall as the tallest of it across the row and every figure starts together.
+ *
+ * A LABEL SITS ON ITS NUMBER: where one label in the row takes two lines, the
+ * others end at the foot of the label row, one gap above their figure, rather
+ * than floating at its top a line away from what they name.
+ *
+ * These were the engine dashboard's own rules over this component, held there
+ * with a note that the kit should carry them; they are the kit's now, with the
+ * sub's wrap (see StatCard), which the engine applied to every tile.
+ */
+.crewlet-stat-group > .crewlet-statcard {
+  display: grid;
+  grid-template-rows: subgrid;
+  grid-row: span 3;
+}
+
+.crewlet-stat-group > .crewlet-statcard > .crewlet-statcard__label {
+  align-self: end;
+}
+
+/*
+ * 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 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);
+}
+
+/*
+ * 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.
+ */
+@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[data-columns='4'] > :nth-child(odd),
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(odd) {
+    border-left: 0;
+  }
+
+  .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);
+  }
+}

package/dist/Switcher/index.js

@@ -1,5 +1,5 @@
-export { Switcher } from '../chunk-6NNY5WBF.js';
-import '../chunk-SVGARBDY.js';
+export { Switcher } from '../chunk-JKAGN4V4.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-FYTIJM2T.js';

package/dist/TableCells/index.js

@@ -1,6 +1,6 @@
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-K4VP6ZKE.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-4BJK7FE5.js';
 import '../chunk-FBSEJO2C.js';
-import '../chunk-GFV4LJHH.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';

package/dist/Tag/index.js

@@ -1,3 +1,3 @@
-export { Tag } from '../chunk-GFV4LJHH.js';
+export { Tag } from '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Tag-SRGTK5KI.css → Tag-2DQOVE6W.css}

@@ -277,12 +277,22 @@
   --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/dist/TagsInput/index.js

@@ -1,5 +1,5 @@
-export { TagsInput } from '../chunk-3SBM4DGI.js';
-import '../chunk-GFV4LJHH.js';
+export { TagsInput } from '../chunk-BH52LIY6.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-RSAQOKH3.js';

package/dist/TileGrid/TileGrid.d.ts

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** The most tracks a grid draws; it folds to fewer by its own width. */
+export type TileGridColumns = 2 | 3 | 4;
+export interface TileGridProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * The tracks at full width. `3` (the default) folds straight to one, never
+     * to two, so a set of three or six tiles never leaves a lone tile on a row
+     * of its own; `4` folds to two and then one; `2` folds to one.
+     */
+    columns?: TileGridColumns | undefined;
+    /** The element the tiles stand in: a `ul` for tiles that are `li`s. */
+    as?: 'div' | 'ul' | 'ol' | undefined;
+    children?: ReactNode;
+}
+/**
+ * Tiles on a fixed number of tracks that folds by the grid's own width.
+ *
+ * GRIDS ON ONE PAGE LINE UP. Two sections of tiles (a catalogue's built-in
+ * services over its third-party apps) each laid out on a track count of its
+ * own put their tile edges in different places, and an `auto-fill` grid left
+ * a hole at the end of a short section. A tile grid's tracks are a count, the
+ * same in every grid given the same count and the same width, so every tile
+ * edge on the page lines up.
+ *
+ * IT FOLDS BY ITS OWN WIDTH, never the window's: a grid beside a rail and a
+ * settings column is as narrow as a phone's at a wide window. The outer
+ * element is the size container, and the track list inside it is the grid,
+ * because a container query styles what is inside the container and never
+ * the container itself. `className` goes on that outer box, where a page
+ * places the grid; every other attribute (an `id`, an `aria-label`) goes on
+ * the track, which is the list a `ul` grid is.
+ */
+export declare function TileGrid({ columns, as: Track, className, children, ...rest }: TileGridProps): import("react").JSX.Element;

package/dist/TileGrid/index.d.ts

@@ -0,0 +1,3 @@
+import './TileGrid.css';
+export { TileGrid } from './TileGrid.js';
+export type { TileGridColumns, TileGridProps } from './TileGrid.js';

package/dist/TileGrid/index.js

@@ -0,0 +1,2 @@
+export { TileGrid } from '../chunk-NNTO3TNC.js';
+import '../chunk-ODEQTPFM.js';

package/dist/TileGrid-I6LNYD2H.css

@@ -0,0 +1,52 @@
+/*
+ * TileGrid: tiles on a fixed track count that folds by the grid's own width.
+ *
+ * Equal tracks, so two grids of one count and one width put every tile edge
+ * on the same line; the tiles in a row stretch to the tallest of them. The
+ * folds are steps of the grid's own width (see the component): three tracks
+ * go straight to one, so a set of three never strands a tile.
+ */
+
+.crewlet-tile-grid {
+  container: crewlet-tile-grid / inline-size;
+  min-width: 0;
+}
+
+.crewlet-tile-grid__track {
+  --crewlet-tile-grid-tracks: 3;
+
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-tile-grid-tracks), minmax(0, 1fr));
+  gap: var(--spacing-3);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-tile-grid[data-columns='2'] > .crewlet-tile-grid__track {
+  --crewlet-tile-grid-tracks: 2;
+}
+
+.crewlet-tile-grid[data-columns='4'] > .crewlet-tile-grid__track {
+  --crewlet-tile-grid-tracks: 4;
+}
+
+/* Four tracks fold to two where a tile would be narrower than its content. */
+@container crewlet-tile-grid (width < 56rem) {
+  .crewlet-tile-grid[data-columns='4'] > .crewlet-tile-grid__track {
+    --crewlet-tile-grid-tracks: 2;
+  }
+}
+
+/* Three fold to one: two up would leave the third tile alone on a row. */
+@container crewlet-tile-grid (width < 40rem) {
+  .crewlet-tile-grid[data-columns='3'] > .crewlet-tile-grid__track {
+    --crewlet-tile-grid-tracks: 1;
+  }
+}
+
+@container crewlet-tile-grid (width < 28rem) {
+  .crewlet-tile-grid > .crewlet-tile-grid__track {
+    --crewlet-tile-grid-tracks: 1;
+  }
+}

package/dist/{chunk-YSG3DW7W.js → chunk-3TXY3PJZ.js}

@@ -1,6 +1,6 @@
 import { Timeline } from './chunk-AUQPBL4O.js';
 import { Section } from './chunk-3TFDQLW3.js';
-import { Disclosure } from './chunk-MICH6QSJ.js';
+import { Disclosure } from './chunk-OGXHZHRX.js';
 import { Composer } from './chunk-ISA2O2BK.js';
 import { ArtifactPanel } from './chunk-Y5BD4MTE.js';
 import { Button } from './chunk-OG6CL3EB.js';

package/dist/{chunk-K4VP6ZKE.js → chunk-4BJK7FE5.js}

@@ -1,5 +1,5 @@
 import { Link } from './chunk-FBSEJO2C.js';
-import { Tag } from './chunk-GFV4LJHH.js';
+import { Tag } from './chunk-KYIAFNU7.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { Avatar } from './chunk-PZKHBB7D.js';