@crewlethq/ui 0.38.0 → 0.39.0

package/README.md

@@ -43,14 +43,14 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Actions | `Button` and `ButtonLink` (variants `primary`, `secondary`, `outline`, `ghost`, `accent`, `danger`; sizes `small`, `medium`, `large`; shapes `square`, `pill`), `IconButton`, `Menu`, `Link`, `Copyable`, `CopyButton`, `DownloadButton`, `Kbd` |
 | Content and text | `Text` (the eight registers and `inherit`), `Prose`, `Document`, `DocumentTitle` and `DocumentTitleField`, the Markdown grammar (`parseMarkdown`, `parseMarkdownSpans`, `markdownInline`, `safeHref` and the line readers, with no React in it), `Highlight`, `InlineCode`, `List` and `ListItem`, `DescriptionList`, `Timeline`, `RelativeTime`, `Note`, `Divider` |
 | Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `CheckboxGroup`, `ConfirmField`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList`, `ChoiceList`, `Composer`, `MarkdownEditor`, `RichEditor` (with `preloadRichEditor`, and the round trip `roundTripMarkdown` and `canonicalMarkdown` from `@crewlethq/ui/RichEditorMarkdown`) |
-| Data display | `DataTable`, `CopyableCell`, `Table`, the read-only table cells (`TableKeyCell`, `TableNumberCell`, `TableDateCell`, `TableEntityCell`, `TableStatusCell`, `TableTagsCell`, `TableTextCell`), `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `QrCode`, `ObjectHeader`, `FactLine`, `SetByLine`, `Skeleton`, `Eyebrow`, `StatGroup`, `PinTile`, `IconTile` |
+| Data display | `DataTable`, `CopyableCell`, `Table`, the read-only table cells (`TableKeyCell`, `TableNumberCell`, `TableDateCell`, `TableEntityCell`, `TableStatusCell`, `TableTagsCell`, `TableTextCell`), `StatCard`, `Meter`, `SegmentedMeter`, `Stepper`, `PricingCard`, `Avatar`, `AvatarStack`, `EntityChip`, `CodeBlock`, `QrCode`, `ObjectHeader`, `FactLine`, `SetByLine`, `Skeleton`, `Eyebrow`, `StatGroup`, `PinTile`, `IconTile`, `SettingsTable` (with `SettingsTable.Row`), `CatalogTile` |
 | List screens | `DataView`, and its parts on their own: `DataViewToolbar`, `FilterAxisBar`, `FilterAxisChip`, plus the filter model (`filterDefsFromColumns`, `applyColumnFilters`, `filterPredicate`, `blankFilterValue`) |
 | Feedback and overlays | `Callout`, `ConflictNote`, `EditingStatus`, `Toaster`, `Modal` (with `variant="sheet"`), `ConfirmModal`, `CommandPalette`, `Tooltip`, `Popover`, `Announcer` |
 | Documents and review | `DiffView` and `DiffSummary` with the line diff they draw (`diffLines`, `diffStat`, `collapseDiff`, `firstChangedLines`, `splitLines`, `MAX_DIFF_LINES`, with no React in it), `DiffList`, `VersionCompare`, `CommentThread` |
 | Charts | `Legend`, `BarList`, `StackedBar`, `StackedColumns`, `ActivityStrip`, `TimeSeries`, `Sparkline`, the reading layer they share (`ChartTooltip`, `useChartHover`), and the ramp (`DATA_COLORS`, `DATA_COLOR_OTHER`, `dataColor`) |
 | Marks | `Count`, `StatusDot`, `EmptyValue`, `VisuallyHidden` |
 | Hooks and seams | `useModalLayer`, `usePopupLayer`, `LayerHost`, `useListbox`, `useOptionKeys`, `useHighlightRest` and `HIGHLIGHT_REST_MS`, `useClipboard`, `useDownload`, `downloadText`, `downloadBlob`, `safeFilename`, `toCsv`, `elementToPng` and `ElementToPngError`, `useOutcome`, `useAnnouncer`, `useNow`, `formatRelative`, `HeadingLevelProvider`, `cx`, the node hues (`NODE_HUES`, `NODE_HUE_NAMES`, `isNodeHue`) |
-| Layout | `Container`, `Section`, `Card`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
+| Layout | `Container`, `Section`, `Card`, `TileGrid`, `Tabs`, `Accordion`, `Disclosure`, `Outline` (with `useActiveHeading` and `scrollToHeading`), `TreeGrid` |
 | Arranging a page | `ArrangeBoard`, `ArrangeGrid`, `ArrangeFrame` (with `useGridResize`), `ArrangeGroup`, `ArrangeList`, and the reorder hooks under them (`useReorder`, `useReorderLists`, `moveKey`) |
 | Application shell | `AppShell` with `AppShell.Rail`, `AppShell.Topbar`, `AppShell.AccountRow` and `useAppShell`, `AuthLayout`, `SidebarNav` and `NavItem`, `BrandLockup`, `SearchTrigger`, `PageHeader`, `Toolbar`, `Stack`, `Inline`, `Spacer`, `AutoGrid`, `ErrorBoundary`, `useShortcut`, `useFullscreen`, `useIdle`, `useMediaMatch` |
 | Preferences | `ThemeToggle`, `ThemeSwitcher`, `DensitySwitcher`, `ThemeGallery`, `ThemeSwatch`, `useThemePreference`, `useDensityPreference`, `useSystemTheme`, `resolveTheme`, `applyStoredPreferences`, and the framework-free `applyTheme`, `applyPalette`, `applyDensity` with `THEME_PREFERENCES`, `DENSITY_PREFERENCES` and their guards |
@@ -204,6 +204,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.39.0
+
+These come from a production polish of the engine dashboard's Settings › Limits, Company › Integrations and Company › Policies, and the same patterns everywhere else it draws them.
+
+### New
+
+**`SettingsTable` draws a read-only table of settings** (with `SettingsTable.Row`). Each row is the setting's name with its key in the document it is written in under it (`settingKey`, in the monospace face, quiet), the value in force in tabular figures, and where the value comes from (`source`). A value that is the default says so as a quiet word; a row marked `changed` carries a mark before its source, the one row in a table a reader scanning it came to find. The tracks are fractions of the table's width (`--crewlet-settings-table-columns`), so a page that stacks a table per group in cards of one width puts every value and every source on one line down the page, which a term column sized to its own longest term never did. It is announced as a table with Setting, Value and Source column headers (drawn with `header`, renamed with `columns`) and each setting's name as its row's header. In a `Card` (with `padding="none"`) it gives up its own edge and corner, as `StatGroup` does; under 32rem of table the name takes the row's first line and the value and its source share the second.
+
+**`TileGrid` lays tiles out on a fixed track count that folds by its own width.** Two sections of tiles each on a track count of its own put their edges in different places, and an `auto-fill` grid left a hole at the end of a short section. `columns` is the count at full width: `3` (the default) folds straight to one under 40rem of grid, never to two, so a set of three or six never strands a tile; `4` folds to two under 56rem; every count is one track under 28rem. `as="ul"` makes the track the list.
+
+**`CatalogTile` is one entry in a catalogue**: the mark in a well of one size and ground for every tile, the name as a heading at the level its place gives it, a `status` only when the state carries meaning (On, Connected, Needs attention, Coming soon), one sentence, and a foot with a quiet `meta` fact and one `action`, drawn only when there is something to put in it. A tile in its resting state carries no pill, and its name stands centred beside its mark; `quiet` puts a tile that is available but not set up on the page's own ground rather than draining its mark, because a drained vendor mark (Datadog's white plate on grey) read as a placeholder image. The sentence reserves two lines in a row of tiles so their feet line up, and reserves nothing once the grid is one track.
+
+**`List` takes `variant="numbered-divided"`**: an `ol` whose numbers stand in a column of their own, in tabular figures, with a hairline between rows at a card's inset and the body's leading. For statements a reader cites by number, such as a company's standing policies, each of which may run to several lines and wraps under its own first word. The drawn number is the list's counter and is not read a second time.
+
+**`ListInput` takes `focusOnMount`**, as `TagsInput` does: the focus goes to the new-item box when the list mounts, once, so a form opened to change that one list (an "Edit policies" link) lands where the next item is written. It is taken during mount, so a dialog the list opens in keeps it rather than moving focus to its own first control.
+
+### Fixes
+
+**A card header's plain words are its title** (`Card.Header`). A header given a string or a number drew it as a bare text node at the regular weight with no heading element, beside cards whose `Card.Title` was a semibold heading: two title treatments on one page (Models, People, Nodes and a dozen more beside Limits and Sign-in policy), and the plain ones missing from the document outline. Plain words are now drawn as `Card.Title`. **A count of zero is not drawn**: the card's own empty state already says there is nothing, and "Models 0" said it twice.
+
+**A card head can stack its subtitle at every width** (`Card.Header` `subtitlePlacement="below"`), for a row of cards of different widths whose heads must stand at one height: by default a wide card keeps its subtitle beside the title while a narrow one stacks it, so one row drew heads of 48 and 68px. **A code block that is a card's content is that card's surface** (`CodeBlock`): placed straight in a `Card` with `padding="none"` it gives up its own edge, corner and ground, so there is no box inside a box; in a padded body it stays a well.
+
+**A dataset source can leave out its kind** (`DatasetSource` `kind` is optional): a list whose every entry reads from one place, grouped under list labels of its own, draws no kind tag on every row.
+
+**A catalogue tile's fact-only foot stands as tall as one with a button** (`CatalogTile`), so the rules of a row's feet sit on one line.
+
+**A dialog's title is its `h1`** (`Modal`). It was a paragraph while the body's headings started at level 2, so the outline a screen reader walks had no top; it keeps its register (the text face at the dialog's size), and still names the dialog.
+
+**An object header's eyebrow and fact labels keep the words as written** (`ObjectHeader`, `FactLine`). They were the uppercase, tracked-open micro-caps of a table's column head, so a unit's page read "UNIT" over its name and TYPE, LEAD and SEATS under it, like a form. They are sentence case at the caption step now, as `StatCard`'s label already is.
+
+**A row of stat tiles shares its lines** (`StatGroup`). Each tile in a row is a subgrid over the row's three lines (label, number, sub), so a label that wraps no longer pushes its own figure below the others; and a label stands on its number, one gap above it, where another label in the row takes two lines. **A stat tile's sub wraps** (`StatCard`), balanced, rather than ending in an ellipsis: its end is the half that says what the number means, and a grid of tiles gives every tile in a row one height anyway. These were the engine dashboard's own rules over the components; an application that restated them drops them.
+
+**The artifact bar takes the shell top bar's inset** (`ArtifactBar`): 20px, 16px under the shell's breakpoint, plus the scroller's gutter at its end, since it stands in that bar's place. At a 12px inset of its own a create page's controls ended past the content under them.
+
 ## Changes in 0.38.0
 
 ### Icons

package/dist/AgentHandoffPanel/index.js

@@ -1,11 +1,11 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-XBURIXHO.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-3TXY3PJZ.js';
 import '../chunk-AUQPBL4O.js';
 import '../chunk-3TFDQLW3.js';
 import '../chunk-OGXHZHRX.js';
-import '../chunk-ETVEGR2Y.js';
+import '../chunk-ISA2O2BK.js';
 import '../chunk-Y5BD4MTE.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-TYONQSOK.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/ArtifactBar/index.js

@@ -1,4 +1,4 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-S27UBCVX.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-TZYFTC4M.js';
 import '../chunk-4ISUIS6F.js';
 import '../chunk-2QZ2VPHR.js';
 import '../chunk-7SDUKCNW.js';

package/dist/{ArtifactBar-FWPBBKQ5.css → ArtifactBar-6PGWGKN2.css}

@@ -29,7 +29,12 @@
      its place, and at a row's height of its own the line under it jumped by
      three pixels between the gallery and the artifact opened from it. */
   height: calc(var(--size-shell-topbar) - 1px);
-  padding: 0 var(--spacing-3);
+  /* THE SHELL TOP BAR'S INSET, the scroller's gutter at its end included: the
+     bar stands in that bar's place, and at a 12px inset of its own a create
+     page's controls ended 19px past the content under them, where every other
+     page's end over it. The same two steps as the top bar, 20px wide and 16px
+     under the shell's breakpoint (below). */
+  padding: 0 calc(var(--spacing-5) + var(--crewlet-app-shell-gutter, 0px)) 0 var(--spacing-5);
   min-width: 0;
 }
 
@@ -413,3 +418,10 @@
     transition: none;
   }
 }
+
+/* The shell's breakpoint, where its top bar and content take 16px. */
+@media (width < 1024px) {
+  .crewlet-artifact-bar__row {
+    padding: 0 calc(var(--spacing-4) + var(--crewlet-app-shell-gutter, 0px)) 0 var(--spacing-4);
+  }
+}

package/dist/ArtifactCard/index.js

@@ -1,10 +1,10 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-OTCXRJ7D.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-U2XAJONO.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-UBZDYOCA.js';
-import '../chunk-ZK3VYY7L.js';
+import '../chunk-INHXF2CL.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';

package/dist/AuthLayout/index.js

@@ -1,6 +1,6 @@
-export { AuthLayout } from '../chunk-BJI3RFXG.js';
+export { AuthLayout } from '../chunk-S4DREXGM.js';
 import '../chunk-7KBNFFM3.js';
-import '../chunk-ZK3VYY7L.js';
+import '../chunk-INHXF2CL.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/Card/Card.d.ts

@@ -105,10 +105,22 @@ export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
     divided?: boolean | undefined;
     /** A glyph before the title. Decoration: the title carries the meaning. */
     icon?: ReactNode;
-    /** How many of something the card is about. */
+    /**
+     * How many of something the card is about. A count of zero is not drawn:
+     * the card's own empty state says there is nothing, and a "0" badge beside
+     * the title said it a second time.
+     */
     count?: number | string | undefined;
     /** A second line under the title. It truncates; a title does not. */
     subtitle?: ReactNode;
+    /**
+     * Where the subtitle stands. `beside` (the default) keeps the head one line
+     * and moves the subtitle under the title only on a card narrower than
+     * 480px; `below` always puts it under the title, for a row of cards of
+     * different widths (a wide card beside a narrow one) whose heads must stand
+     * at one height.
+     */
+    subtitlePlacement?: 'beside' | 'below' | undefined;
     /** The card's own controls, at the end of the header row. */
     actions?: ReactNode;
 }
@@ -159,7 +171,7 @@ export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
     truncate?: boolean | undefined;
 }
 export declare const Card: (({ variant, padding, interactive, rail, selected, as, href, asChild, className, children, ...rest }: CardProps) => import("react").JSX.Element) & {
-    Header: ({ divided, icon, count, subtitle, actions, className, children, ...rest }: CardHeaderProps) => import("react").JSX.Element;
+    Header: ({ divided, icon, count, subtitle, subtitlePlacement, actions, className, children, ...rest }: CardHeaderProps) => import("react").JSX.Element;
     Body: ({ padding, className, children, ...rest }: CardSectionProps) => import("react").JSX.Element;
     Footer: ({ variant, padding, className, children, ...rest }: CardFooterProps) => import("react").JSX.Element;
     Title: ({ as, truncate, className, children, ...rest }: CardTitleProps) => import("react").JSX.Element;

package/dist/Card/index.js

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

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

@@ -495,6 +495,26 @@
   }
 }
 
+/*
+ * STACKED, ASKED FOR: the subtitle under the title at every width, the shape
+ * the narrow step above draws, for a row of cards of different widths whose
+ * heads have to stand at one height rather than one inline and one stacked.
+ */
+.crewlet-card__header--stacked {
+  flex-wrap: wrap;
+  row-gap: var(--spacing-1);
+}
+
+.crewlet-card__header--stacked > .crewlet-card__header-main {
+  flex: 1 1 0;
+}
+
+.crewlet-card__header--stacked > .crewlet-card__subtitle {
+  order: 1;
+  flex: 1 1 100%;
+  white-space: normal;
+}
+
 .crewlet-card__description {
   margin: 0;
   font-size: var(--font-size-compact);

package/dist/CatalogTile/CatalogTile.d.ts

@@ -0,0 +1,47 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type HeadingLevel } from '../utils/headingLevel.js';
+export type CatalogTileElement = 'article' | 'li' | 'div';
+export interface CatalogTileProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** The element the tile is: an `li` in a `TileGrid as="ul"`. */
+    as?: CatalogTileElement | undefined;
+    /**
+     * What the entry is told apart by before its name is read: a `VendorMark`,
+     * a glyph. Drawn in the tile's mark well, at one size and on one ground for
+     * every tile, and hidden from assistive technology: the name is what is read.
+     */
+    mark: ReactNode;
+    /** The entry's name, as the tile's heading. */
+    title: ReactNode;
+    /** Overrides the level the name is rendered at. */
+    headingLevel?: HeadingLevel | undefined;
+    /**
+     * The entry's state, as a `Tag`, ONLY when the state is worth reading: On,
+     * Connected, Needs attention, Coming soon. An entry in its resting state
+     * (available, not set up) carries none, and its name stands centred beside
+     * its mark; a pill under every name is a column a reader learns to skip.
+     */
+    status?: ReactNode;
+    /** One sentence: what the entry is for, or what is owed when something is. */
+    description?: ReactNode;
+    /** A quiet fact at the foot (`2 agents · 14 deliveries`). */
+    meta?: ReactNode;
+    /** The tile's one control, at the foot's end. */
+    action?: ReactNode;
+    /**
+     * Available but not set up: the tile sits one rung lower, on the page's own
+     * ground, rather than on the card's. Its text and its mark keep their
+     * strength, because a tile not yet set up is the one a reader came to set up.
+     */
+    quiet?: boolean | undefined;
+}
+/**
+ * One entry in a catalogue: its mark, its name, its state when it has one, a
+ * sentence, and a foot with a quiet fact and one action.
+ *
+ * EVERY TILE IN A ROW IS ONE SHAPE. The sentence reserves two lines and takes
+ * what is left of the tile's height, so tiles stretched to one row height in a
+ * `TileGrid` keep their feet on one line; a tile with neither a fact nor an
+ * action draws no foot at all, since a rule with nothing under it reads as a
+ * missing control.
+ */
+export declare function CatalogTile({ as: Element, mark, title, headingLevel, status, description, meta, action, quiet, className, ...rest }: CatalogTileProps): import("react").JSX.Element;

package/dist/CatalogTile/index.d.ts

@@ -0,0 +1,3 @@
+import './CatalogTile.css';
+export { CatalogTile } from './CatalogTile.js';
+export type { CatalogTileElement, CatalogTileProps } from './CatalogTile.js';

package/dist/CatalogTile/index.js

@@ -0,0 +1,3 @@
+export { CatalogTile } from '../chunk-XNXK5MA4.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/CatalogTile-TGR2ZZVQ.css

@@ -0,0 +1,131 @@
+/*
+ * CatalogTile: mark, name and state, one sentence, and a foot with a quiet
+ * fact and one action.
+ *
+ * ONE WELL FOR EVERY MARK. A vendor's mark is drawn in the vendor's colours,
+ * so the box it stands in is the one thing a catalogue can hold constant: the
+ * same size, the same raised ground and the same hairline for every tile,
+ * set up or not. A drained mark on a grey box read as a placeholder image
+ * (a white plate on grey is not a logo), so a tile not yet set up says so by
+ * its ground, never by its mark.
+ */
+
+.crewlet-catalog-tile {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-4);
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  color: var(--color-text-primary);
+}
+
+.crewlet-catalog-tile--quiet {
+  background: var(--color-surface-background);
+}
+
+.crewlet-catalog-tile__head {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-catalog-tile__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-row-lg);
+  height: var(--size-row-lg);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border-default);
+  color: var(--color-text-primary);
+}
+
+/* The name, and under it the state when there is one; centred on the mark
+   either way, so a tile with no state is not a tile with a hole in it. */
+.crewlet-catalog-tile__title {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-catalog-tile__name {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-catalog-tile__status {
+  display: inline-flex;
+}
+
+.crewlet-catalog-tile__description {
+  flex: 1;
+  margin: 0;
+  /* Two lines reserved, so a tile saying what it is for and one saying what
+     is owed keep their feet on one line in a row. */
+  min-height: calc(2em * var(--font-line-height-body));
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-body);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-catalog-tile__foot {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  /* A SMALL CONTROL'S HEIGHT OF CONTENT, under the rule and the padding: a
+     foot holding only a fact stands as tall as one holding a button, so the
+     rules of every foot in a row sit on one line. Measured on the content
+     box, since under border-box sizing the padding spent the floor and a
+     fact-only foot stood 8px shorter. */
+  box-sizing: content-box;
+  min-height: var(--size-control-sm);
+  padding-top: var(--spacing-3);
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-catalog-tile__meta {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-catalog-tile__action {
+  display: inline-flex;
+  flex: none;
+}
+
+/*
+ * ONE TILE A ROW RESERVES NOTHING. The two reserved lines exist to keep the
+ * feet of tiles side by side on one line; a grid folded to one track has no
+ * neighbours to line up with, and on a phone the reserve was a blank line in
+ * every short tile.
+ */
+@container crewlet-tile-grid (width < 40rem) {
+  .crewlet-tile-grid[data-columns='3'] .crewlet-catalog-tile__description {
+    min-height: 0;
+  }
+}
+
+@container crewlet-tile-grid (width < 28rem) {
+  .crewlet-tile-grid .crewlet-catalog-tile__description {
+    min-height: 0;
+  }
+}

package/dist/CodeBlock/index.js

@@ -1,4 +1,4 @@
-export { CodeBlock } from '../chunk-GDDE4UM7.js';
+export { CodeBlock } from '../chunk-SEC2GR2V.js';
 import '../chunk-W46LPU4R.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';

package/dist/{CodeBlock-GYNJ2HI6.css → CodeBlock-N5ETJF24.css}

@@ -16,6 +16,19 @@
   min-width: 0;
 }
 
+/*
+ * A BLOCK THAT IS A CARD'S CONTENT IS THAT CARD'S SURFACE. Placed straight in
+ * a card (with `padding="none"`), it gives up its own edge, corner and ground,
+ * so the card's head rule is the only line over the code and there is no box
+ * inside a box. In a padded body it stays a well, which is what tells code
+ * from the prose beside it.
+ */
+.crewlet-card > .crewlet-codeblock {
+  border: 0;
+  border-radius: var(--radius-none);
+  background: transparent;
+}
+
 .crewlet-codeblock__header {
   display: flex;
   align-items: center;

package/dist/CommandPalette/index.js

@@ -1,8 +1,8 @@
-export { CommandPalette } from '../chunk-PAQXOP2M.js';
-import '../chunk-SVGARBDY.js';
+export { CommandPalette } from '../chunk-XGBUUQDU.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-7KHM2FZH.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-TYONQSOK.js';
+import '../chunk-SMBKXWML.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-PT6WKXKW.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-MMPKN7WV.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-ETVEGR2Y.js';
-import '../chunk-SMBKXWML.js';
+import '../chunk-ISA2O2BK.js';
 import '../chunk-TYONQSOK.js';
+import '../chunk-SMBKXWML.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-ETVEGR2Y.js';
-import '../chunk-SMBKXWML.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-ISA2O2BK.js';
 import '../chunk-TYONQSOK.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-NUZHC6MM.js';

package/dist/DataTable/index.js

@@ -1,7 +1,7 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-A23KDROH.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-FXBGEANQ.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-SVGARBDY.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-AXS6MBNH.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';

package/dist/DataView/index.js

@@ -1,10 +1,10 @@
-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';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-QRKT4XTT.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-A23KDROH.js';
 import '../chunk-UB6MLXUL.js';
+import '../chunk-FXBGEANQ.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-SVGARBDY.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-GXQ3B46I.js';
@@ -13,8 +13,8 @@ import '../chunk-AXS6MBNH.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-TYONQSOK.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-D6FEHY5G.js';

package/dist/DatasetSource/DatasetSource.d.ts

@@ -26,7 +26,13 @@ export interface DatasetSourceLabels {
 export interface DatasetSourceProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'onSelect'> {
     /** The dataset's title, which every figure drawn from it cites. */
     title: string;
-    kind: DatasetSourceKind;
+    /**
+     * Where the dataset reads from, drawn as a tag beside the title. Left out
+     * where every entry of a list reads from one place (a picker of the
+     * engine's own sources, grouped under headings of their own), since the
+     * same tag on every row is a column a reader learns to skip.
+     */
+    kind?: DatasetSourceKind | undefined;
     /** What the dataset reads, in the author's terms: "tracker.items, scope mine". */
     definition: ReactNode;
     /** How it is kept current, in words: "Live", "Every 2 min", "On change". */

package/dist/DatasetSource/index.js

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

package/dist/LinkInterstitial/index.js

@@ -1,5 +1,5 @@
-export { LinkInterstitial, openExternal } from '../chunk-NRBAXRWE.js';
-import '../chunk-SVGARBDY.js';
+export { LinkInterstitial, openExternal } from '../chunk-N3TFYBN3.js';
+import '../chunk-IAGYPTEJ.js';
 import '../chunk-5CLW2CXT.js';
 import '../chunk-SZZRIHGT.js';
 import '../chunk-PQADV6P6.js';

package/dist/List/List.d.ts

@@ -9,6 +9,14 @@ export type ListVariant =
  | 'bulleted'
 /** A number per row: an order somebody follows. */
  | 'numbered'
+/**
+ * A number per row in a column of its own, with a hairline between rows:
+ * statements a reader counts and cites by number (a company's standing
+ * policies), each of which may run to several lines. The numbers are the
+ * list's own (an `ol`), drawn in tabular figures so a tenth row's number
+ * stands where the first one's does.
+ */
+ | 'numbered-divided'
 /**
  * A hairline between rows: a feed, a set of results, a conversation. THE
  * DEFAULT, because it is the list every screen in the product draws: rows a

package/dist/List/index.js

@@ -1,3 +1,3 @@
-export { List, ListItem } from '../chunk-DS2C73RJ.js';
+export { List, ListItem } from '../chunk-NZWX27J7.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{List-MYJIV6MP.css → List-YHLIZFK4.css}

@@ -120,6 +120,52 @@
   padding-inline: 0;
 }
 
+/*
+ * NUMBERED AND DIVIDED: the divided list's hairlines, with the number in a
+ * column of its own rather than in the margin, so a statement that runs to a
+ * second line wraps under its own first word and not under its number. The
+ * row grows with its text (no row height), at the body's leading, and the
+ * number stands on the first line's baseline.
+ *
+ * The number is the list's counter, drawn by the row. The `ol` already
+ * announces each item's position, so the drawn figure is given empty
+ * alternative text and is not read a second time.
+ */
+.crewlet-list--numbered-divided {
+  counter-reset: crewlet-list-item;
+}
+
+.crewlet-list--numbered-divided .crewlet-list__item {
+  counter-increment: crewlet-list-item;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-list--numbered-divided .crewlet-list__item:last-child {
+  border-bottom: none;
+}
+
+.crewlet-list--numbered-divided .crewlet-list__row {
+  align-items: baseline;
+  min-height: 0;
+  /* At a card's own inset, since a card is where these stand: the numbers
+     line up under the card head's glyph rather than 4px left of it. */
+  padding: var(--spacing-3) var(--spacing-4);
+  border-radius: 0;
+  line-height: var(--font-line-height-body);
+}
+
+.crewlet-list--numbered-divided .crewlet-list__row::before {
+  content: counter(crewlet-list-item);
+  content: counter(crewlet-list-item) / '';
+  flex: none;
+  min-width: 2ch;
+  text-align: end;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
 /* ---- States ------------------------------------------------------------ */
 
 /*

package/dist/ListInput/ListInput.d.ts

@@ -21,6 +21,14 @@ export interface ListInputProps {
     optional?: boolean | undefined;
     /** Draws the Enter keycap inside the new-item box, which is what adds one. */
     enterHint?: boolean | undefined;
+    /**
+     * Puts the focus in the new-item box when the list mounts, for a form
+     * opened to change THIS list ("Edit policies"): the reader lands where the
+     * next item is written rather than on the form's first field. It is taken
+     * during mount, so a dialog the list opens in keeps it rather than moving
+     * focus to its own first control. Named as `TagsInput`'s is.
+     */
+    focusOnMount?: boolean | undefined;
     /** The name of the control beside the legend that appends what the box holds. */
     addLabel?: ((itemName: string) => string) | undefined;
     itemLabel?: ((name: string, position: string) => string) | undefined;
@@ -67,4 +75,4 @@ export interface ListInputProps {
  *
  * Ported from the engine dashboard's `ui/ListField.tsx`.
  */
-export declare function ListInput({ label, itemName, value, onChange, multiline, helper, helperOnFocus, error, placeholder, disabled, optional, enterHint, addLabel, itemLabel, newItemLabel, moveUpLabel, moveDownLabel, removeLabel, addedMessage, removedMessage, movedMessage, }: ListInputProps): import("react").JSX.Element;
+export declare function ListInput({ label, itemName, value, onChange, multiline, helper, helperOnFocus, error, placeholder, disabled, optional, enterHint, focusOnMount, addLabel, itemLabel, newItemLabel, moveUpLabel, moveDownLabel, removeLabel, addedMessage, removedMessage, movedMessage, }: ListInputProps): import("react").JSX.Element;

package/dist/ListInput/index.js

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