@crewlethq/ui 0.84.2 → 0.86.0

package/dist/MemberPicker-ZD35VEK6.css

@@ -0,0 +1,162 @@
+/*
+ * Who gets something, as one list: a group row with its box, its name and
+ * its count, opening to its members, each a row of face, name and one quiet
+ * line. Rows stand at the kit's compact list height; the only colour is the
+ * box's own accent and a left-out member's quieter ink.
+ *
+ * A LIST'S TYPE, NOT A FORM'S: names in the 13px every list and table row
+ * sets a name in, at the medium weight a group's name takes, and every box the
+ * compact Checkbox's (14px beside 13px words). At the body's 14px, with a
+ * 16px box over 14px ones, it read a step larger than every list around it.
+ */
+.crewlet-member-picker {
+  display: grid;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-member-picker__summary {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-member-picker__list,
+.crewlet-member-picker__members {
+  display: grid;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-member-picker__list {
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.crewlet-member-picker__group + .crewlet-member-picker__group {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-member-picker__group-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-1);
+}
+
+/* The open control is the kit's small ghost IconButton; only its chevron
+   turns here, a quarter turn once the group is open. */
+.crewlet-member-picker__toggle svg {
+  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-member-picker__group.is-open .crewlet-member-picker__toggle svg {
+  transform: rotate(90deg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-member-picker__toggle svg {
+    transition: none;
+  }
+}
+
+.crewlet-member-picker__count {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.crewlet-member-picker__members {
+  border-top: 1px solid var(--color-border-default);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-member-picker__member {
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-control-lg);
+  /* Each member's box under its group's, past the open control and its gap. */
+  padding: var(--spacing-1) var(--spacing-3) var(--spacing-1) calc(var(--spacing-1) + var(--size-control-sm) + var(--spacing-2));
+}
+
+/* A MEMBER'S BOX STANDS UNDER ITS GROUP'S. The bare Checkbox centres its box
+   on the square the pointer floor allows, which set the box half the
+   difference in from the row's edge, a few pixels right of the group's box
+   above it. That inset is taken back, and the pointer square reaches into
+   the row's padding instead. */
+.crewlet-member-picker__members:not(.is-ungrouped) .crewlet-checkbox--bare {
+  margin-inline-start: calc((var(--crewlet-checkbox-size) - var(--size-target-min)) / 2);
+}
+
+.crewlet-member-picker__members.is-ungrouped {
+  border-top: 0;
+  background: transparent;
+}
+
+.crewlet-member-picker__members.is-ungrouped .crewlet-member-picker__member {
+  padding-inline-start: var(--spacing-3);
+}
+
+.crewlet-member-picker__avatar {
+  display: inline-flex;
+  flex: none;
+}
+
+/* The name and its line label the member's box, so they take the pointer a
+   Checkbox's own words take. */
+.crewlet-member-picker__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  cursor: pointer;
+}
+
+.crewlet-member-picker__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-compact);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-member-picker__detail {
+  overflow: hidden;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-member-picker__mark {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  white-space: nowrap;
+}
+
+.crewlet-member-picker__member.is-left-out .crewlet-member-picker__name,
+.crewlet-member-picker__mark.is-left-out {
+  color: var(--color-text-tertiary);
+}
+
+@media (width < 480px) {
+  .crewlet-member-picker__member {
+    grid-template-columns: auto auto minmax(0, 1fr);
+    padding-inline-start: var(--spacing-3);
+  }
+
+  .crewlet-member-picker__mark {
+    grid-column: 3;
+  }
+}
+
+/* A group's name is the row's title: the medium weight, at the list's 13px. */
+.crewlet-member-picker__group-row .crewlet-checkbox__label {
+  font-weight: var(--font-weight-medium);
+}

package/dist/MergeConflicts/index.js

@@ -1,5 +1,5 @@
 export { MERGE_CONFLICTS_LABELS, MergeConflicts } from '../chunk-C42XW5YP.js';
-import '../chunk-36WK24AI.js';
+import '../chunk-EVM6GYZ2.js';
 import '../chunk-AZYE7NR4.js';
 import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';

package/dist/PresenterView/index.js

@@ -1,6 +1,6 @@
-export { PresenterView, formatStopwatch } from '../chunk-LMEMH6DO.js';
-import '../chunk-5AJR6X75.js';
+export { PresenterView, formatStopwatch } from '../chunk-WCJTOKTY.js';
 import '../chunk-O6EV6GKI.js';
+import '../chunk-5AJR6X75.js';
 import '../chunk-RK4XPHVG.js';
 import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';

package/dist/ProposalCard/index.js

@@ -1,6 +1,6 @@
-export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, PROPOSAL_TONES, ProposalCard } from '../chunk-P7HMY3BQ.js';
+export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, PROPOSAL_TONES, ProposalCard } from '../chunk-M33DABTW.js';
 import '../chunk-ZWCK4N4L.js';
-import '../chunk-AOJ6ZA77.js';
+import '../chunk-3MFRTZH6.js';
 import '../chunk-LR4IWUWQ.js';
 import '../chunk-FLW5U7YS.js';
 import '../chunk-LBGKLYBY.js';
@@ -8,7 +8,7 @@ import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-YQ7Q52XU.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-LVJGN5II.js';
+import '../chunk-NAHA62WD.js';
 import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-DGXZ635L.js';

package/dist/RailList/RailList.d.ts

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react';
+import { type NavItemProps } from '../SidebarNav/index.js';
+/** One of the groups a directory files its items in, and the rail's row for it. */
+export interface RailListItem {
+    /** Unique among the items, and what `value` names. An empty key is a fine "All". */
+    key: string;
+    label: string;
+    /** How many items the group holds: a quiet figure at the row's end, and after the label in the folded picker. */
+    count?: number | undefined;
+    /**
+     * The group's own address, where the chosen group is kept in the page's
+     * address: the row is then a link a reader can open in a new tab, and a
+     * plain click still chooses it in place.
+     */
+    href?: string | undefined;
+    /** One quiet line about the group, said over the list while it is chosen: what the group holds. */
+    description?: ReactNode;
+}
+/** Every word the rail and its picker say, beyond the items' own labels. */
+export interface RailListLabels {
+    /** What a count counts, read after the figure as part of the row's name: "apps" makes "Chat, 6 apps". */
+    counted: string;
+    /** A group as the folded picker names it: "Chat (6)". */
+    option: (label: string, count: number | undefined) => string;
+}
+export declare const RAIL_LIST_LABELS: RailListLabels;
+export interface RailListProps {
+    /** Names the rail's navigation and the picker it folds into: "Categories", "Template kinds". */
+    label: string;
+    /** The groups, in the order the rail lists them; an "All" group is one of them, usually the first. */
+    items: readonly RailListItem[];
+    /** The chosen group's key. */
+    value: string;
+    onChange: (key: string) => void;
+    /**
+     * The bar across the top of the card, over the rail and the list: a search
+     * and filter chips. Where the card is too narrow for the rail, the picker
+     * it folds into joins this bar. Given as a function, it is handed the
+     * picker to place among its own controls; given as content, the picker
+     * leads the bar. Left out, the bar is drawn only to hold the picker.
+     */
+    toolbar?: ReactNode | ((picker: ReactNode) => ReactNode);
+    /** One quiet fact about the whole directory, under the rail's rows: what every item in it has in common. */
+    note?: ReactNode;
+    /** The list the chosen group shows: a grid, a list of tiles. */
+    children: ReactNode;
+    /** Draws each rail row's link, for a router that owns navigation (`SidebarNav`'s `renderLink`). */
+    renderLink?: NavItemProps['renderLink'];
+    labels?: Partial<RailListLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * A directory in a card: a rail of the groups its items are filed in, beside
+ * the list of the chosen group, so a long catalogue reads as a few short
+ * lists: apps in what they are for, templates in their kinds, reports in
+ * the teams that read them.
+ *
+ * THE RAIL IS THE APPLICATION'S RAIL, DENSER (`SidebarNav` `dense`), each
+ * group a row with its count, the chosen one raised and `aria-current`, on a
+ * hairline of its own beside the list, with an optional quiet note under its
+ * rows. The chosen group's description, where it has one, stands over the
+ * list on a hairline, so a reader knows what the short list is.
+ *
+ * IT FOLDS BY ITS OWN WIDTH, NOT THE WINDOW'S. Under 44rem of the card's
+ * width the rail does not leave the list a readable column, so the rail goes
+ * and a `Select` of the same groups, named the same, joins the bar across the
+ * top. The same directory in a page and in a 560px sheet is one component
+ * with nothing to set: the sheet is simply narrow.
+ *
+ * Controlled: the chosen group is the caller's, often kept in the page's
+ * address (`href` on each group), so a group opened in a new tab and Back
+ * both keep it.
+ */
+export declare function RailList({ label, items, value, onChange, toolbar, note, children, renderLink, labels: overrides, className, }: RailListProps): import("react").JSX.Element;

package/dist/RailList/index.d.ts

@@ -0,0 +1,3 @@
+import './RailList.css';
+export { RAIL_LIST_LABELS, RailList } from './RailList.js';
+export type { RailListItem, RailListLabels, RailListProps } from './RailList.js';

package/dist/RailList/index.js

@@ -0,0 +1,17 @@
+export { RAIL_LIST_LABELS, RailList } from '../chunk-REWKR3S4.js';
+import '../chunk-BRK3HXGZ.js';
+import '../chunk-3IWZVEXA.js';
+import '../chunk-O5CEG7TQ.js';
+import '../chunk-YGRTX67J.js';
+import '../chunk-TEV5REGB.js';
+import '../chunk-HBDA76EZ.js';
+import '../chunk-U2IQNDDR.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
+import '../chunk-D2GT3CR4.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/RailList-N2ZBPRM2.css

@@ -0,0 +1,97 @@
+/*
+ * RailList: a directory in a card, a rail of groups beside the chosen
+ * group's list, folding into a picker where the card is narrow
+ * (RailList.tsx).
+ *
+ * SIZED BY ITS OWN WIDTH, NOT THE WINDOW'S, because the same directory stands
+ * in a page and in a sheet: the root is an inline-size container, and under
+ * the rail's room (44rem) the rail goes and the picker shows. Both are always
+ * rendered and the stylesheet decides, so the fold costs no measurement and
+ * never draws the wrong one first.
+ */
+.crewlet-rail-list {
+  container: crewlet-rail-list / inline-size;
+  min-width: 0;
+}
+
+/* The bar across the card's top: the caller's search and chips, and the folded picker. */
+.crewlet-rail-list__bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  border-block-end: 1px solid var(--color-border-default);
+}
+
+/* Wide, the rail is the choice: the picker and a bar that holds nothing else are not drawn. */
+.crewlet-rail-list__picker,
+.crewlet-rail-list__bar--picker-only {
+  display: none;
+}
+
+/* The rail at a fixed width (13rem by default), the list taking the rest. */
+.crewlet-rail-list__body {
+  display: grid;
+  grid-template-columns: var(--crewlet-rail-list-rail, 13rem) minmax(0, 1fr);
+  min-width: 0;
+}
+
+/* The rail on a hairline of its own, its note a step under its rows. */
+.crewlet-rail-list__rail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-2);
+  border-inline-end: 1px solid var(--color-border-default);
+}
+
+/* The note starts on the rows' words, inside the dense rail's own inset. */
+.crewlet-rail-list__note {
+  margin: 0;
+  padding-inline: var(--spacing-2);
+}
+
+.crewlet-rail-list__list {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* What the chosen group holds, over its list on a hairline, at the list's own inset. */
+.crewlet-rail-list__about {
+  margin: 0;
+  padding: var(--spacing-2) var(--spacing-4);
+  border-block-end: 1px solid var(--color-border-default);
+}
+
+/*
+ * A GRID AT THE LIST'S TOP TAKES NO RULE OF ITS OWN. A grid in a card draws
+ * one rule above its head to part it from the card's head (DataGrid.css);
+ * here the bar's hairline, the description's or the card's own edge is
+ * already that rule, and the grid's drew a second line under it.
+ */
+.crewlet-rail-list__list > .crewlet-data-grid:first-child,
+.crewlet-rail-list__about + .crewlet-data-grid {
+  border-top: 0;
+}
+
+/* Under the rail's room the list takes the card, and the picker takes the rail's place in the bar. */
+@container crewlet-rail-list (width < 44rem) {
+  .crewlet-rail-list__body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .crewlet-rail-list__rail {
+    display: none;
+  }
+
+  .crewlet-rail-list__picker {
+    display: inline-flex;
+  }
+
+  .crewlet-rail-list__bar--picker-only {
+    display: flex;
+  }
+}

package/dist/RelatedRow/index.js

@@ -1,5 +1,5 @@
-export { RelatedRow } from '../chunk-EAHEJNVJ.js';
-import '../chunk-QP2P6GDQ.js';
+export { RelatedRow } from '../chunk-CL3FWLDO.js';
+import '../chunk-O5CEG7TQ.js';
 import '../chunk-ZAC7SKUN.js';
 import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';

package/dist/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-AUSFKGKL.js';
+export { RichEditor, preloadRichEditor } from '../chunk-3AMWXJQX.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-2DMTW2Y3.js';
 import '../chunk-KOJPDCGQ.js';
 import '../chunk-KBZO4B33.js';

package/dist/RunChip/index.js

@@ -1,7 +1,7 @@
-export { RUN_STATES, RunChip } from '../chunk-X7VZQKIW.js';
-import '../chunk-RJWO2PC5.js';
+export { RUN_STATES, RunChip } from '../chunk-AQ7ZV3CH.js';
+import '../chunk-TMML7BHT.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-LVJGN5II.js';
+import '../chunk-NAHA62WD.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-ULYHDP7U.js';
 import '../chunk-D2GT3CR4.js';

package/dist/SegmentedControl/index.js

@@ -1,4 +1,4 @@
-import '../chunk-36WK24AI.js';
+import '../chunk-EVM6GYZ2.js';
 export { SegmentedControl } from '../chunk-AZYE7NR4.js';
 import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';

package/dist/{SegmentedControl-B7XCUOML.css → SegmentedControl-7GY2KM44.css}

@@ -136,6 +136,17 @@
   background: var(--color-brand-accent);
 }
 
+/* A COUNT IN A CHIP IS A FIGURE IN THE CHIP'S OWN INK, as on a FilterChip and
+   a lens chip: no pill of its own, since a box inside a box beside its word
+   says nothing more. On the chosen chip the inset pill's tertiary figure lay
+   on the accent fill at 1.4:1; inheriting, it is the label's on-accent ink. */
+.crewlet-segmented--chips .crewlet-count {
+  min-width: 0;
+  padding: 0;
+  background: none;
+  color: inherit;
+}
+
 /* What completes the last choice sits in the row, at the chips' own height
    and in their face: a field at its own control step stood taller than every
    chip beside it. */

package/dist/SetupWizard/index.js

@@ -1,9 +1,9 @@
-export { SetupWizard } from '../chunk-K6RWEQ6P.js';
-import '../chunk-RJWO2PC5.js';
+export { SetupWizard } from '../chunk-WRZPO4YL.js';
+import '../chunk-TMML7BHT.js';
 import '../chunk-FPDIHEM4.js';
 import '../chunk-YJQXESOJ.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-LVJGN5II.js';
+import '../chunk-NAHA62WD.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-ULYHDP7U.js';
 import '../chunk-D2GT3CR4.js';

package/dist/ShareDialog/index.js

@@ -1,10 +1,10 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-AQNP3KQU.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-Y7PPKQFQ.js';
 import '../chunk-3IWZVEXA.js';
 import '../chunk-ZXXZESCD.js';
-import '../chunk-T5GBTXNC.js';
+import '../chunk-YGRTX67J.js';
+import '../chunk-ETNQYT5O.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-YGRTX67J.js';
 import '../chunk-BPCY7ZID.js';
 import '../chunk-HF5L56YQ.js';
 import '../chunk-YTLWOHOY.js';

package/dist/{StepList-A4YVU4JI.css → StepList-OAJ45IBX.css}

@@ -35,7 +35,8 @@
 }
 
 .crewlet-step-mark--refused,
-.crewlet-step-mark--stopped {
+.crewlet-step-mark--stopped,
+.crewlet-step-mark--pending {
   color: var(--color-text-tertiary);
 }
 
@@ -88,6 +89,16 @@
   overflow-wrap: anywhere;
 }
 
+/*
+ * A STEP THAT HAS NOT STARTED IS QUIET THROUGH: its words take the tertiary
+ * ink its mark and its detail already have, so the whole step reads as one
+ * thing still to come rather than as a label in full ink beside a dimmed
+ * mark.
+ */
+.crewlet-step-list__step--pending .crewlet-step-list__label {
+  color: var(--color-text-tertiary);
+}
+
 /*
  * WHAT THE STEP ASKED FOR, in the mono face. Each piece between separators is
  * one inline block, so a line breaks only between pieces (at a space, or

package/dist/Stepper/StepList.d.ts

@@ -5,10 +5,12 @@ import { type HTMLAttributes, type ReactNode } from 'react';
  * request finish, fail or are refused on their own: `running` while it works,
  * `done`, `failed` (the system could not do it), `refused` (the person's own
  * access does not allow it), `stopped` (the person stopped the request before
- * it finished) and `waiting` (it waits on the person's approval).
+ * it finished), `waiting` (it waits on the person's approval) and `pending`
+ * (it has not started: the request has not reached it yet, or ended before
+ * it, as the steps after a failed check that the check never got to).
  */
-export type StepState = 'running' | 'done' | 'failed' | 'refused' | 'stopped' | 'waiting';
-export declare const STEP_STATES: readonly ["running", "done", "failed", "refused", "stopped", "waiting"];
+export type StepState = 'running' | 'done' | 'failed' | 'refused' | 'stopped' | 'waiting' | 'pending';
+export declare const STEP_STATES: readonly ["running", "done", "failed", "refused", "stopped", "waiting", "pending"];
 /** The words each state is said with, after the step's own words: "Read token spend by agent, Done". */
 export type StepStateLabels = Record<StepState, string>;
 export declare const STEP_STATE_LABELS: StepStateLabels;
@@ -20,7 +22,8 @@ export interface StepStateMarkProps {
  * A state's mark in its 16px box: the 14px glyph, or the spinner at the same
  * size while it runs, so nothing moves when the ring becomes a check. Running
  * takes the secondary ink, done the success ink, failed the danger ink,
- * waiting the warning ink, and refused and stopped the tertiary ink. One
+ * waiting the warning ink, and refused, stopped and pending the tertiary
+ * ink; pending is a dashed circle, the outline of a step still to come. One
  * mark for a request's steps and for the request's own state (`RunChip`),
  * which is what makes them one column.
  */

package/dist/Stepper/index.js

@@ -1,4 +1,4 @@
-export { STEP_STATES, STEP_STATE_LABELS, StepList, StepStateMark, Stepper, stepDetailPieces } from '../chunk-RJWO2PC5.js';
+export { STEP_STATES, STEP_STATE_LABELS, StepList, StepStateMark, Stepper, stepDetailPieces } from '../chunk-TMML7BHT.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';

package/dist/TableCells/TableCells.d.ts

@@ -151,3 +151,63 @@ export type TableTextCellProps = {
  * would draw the column's answer over the row's.
  */
 export declare function TableTextCell({ children, icon, mark }: TableTextCellProps): import("react").JSX.Element;
+/** Which of a two-line cell's lines is a literal, set in the mono face. */
+export type TableTwoLineCellMono = 'value' | 'detail' | 'both';
+export type TableTwoLineCellProps = {
+    /** The value, in the cell's own register: a name, a key, a short state. */
+    value: ReactNode;
+    /**
+     * The quieter line under it, a caption in the secondary ink: where it runs,
+     * the id it resolves to, when it last answered. Left out, the cell is the
+     * value's one line, at the same place a row of two-line cells puts it.
+     */
+    detail?: ReactNode;
+    /**
+     * Which line is a literal (a command, an id, a key), set in the mono face:
+     * in the sans face `--` and `=` read as prose.
+     */
+    mono?: TableTwoLineCellMono | undefined;
+    /**
+     * The whole cell's hover text, where the two lines are not the whole story
+     * (a model's CLI, key and id in one line). Given, neither line adds its own.
+     */
+    title?: string | undefined;
+    /**
+     * Whether a cut line carries its whole words as its title (`Text`'s
+     * `titleWhenCut`). On by default. Off where something else already shows
+     * them, a `Tooltip` around the cell.
+     */
+    titleWhenCut?: boolean | undefined;
+} & ({
+    /**
+     * A mark every row of the column wears, centred against the two lines.
+     * The header carries the meaning, so it is drawn as decoration.
+     */
+    icon?: ReactNode;
+    mark?: never;
+} | {
+    icon?: never;
+    /**
+     * A mark that varies per row and states a fact of its own (a vendor, the
+     * CLI a model runs on), centred against the two lines. It brings its own
+     * accessible name and is read.
+     */
+    mark: ReactNode;
+});
+/**
+ * A value over a quieter line, each cut on one line: a name over where it
+ * runs, a key over the id it resolves to, a short state over when it began.
+ *
+ * TWO LINES IN TWO REGISTERS, ALWAYS THE SAME TWO, so every two-line cell in a
+ * table reads alike: the value in the cell's own register (it inherits the
+ * grid's size and ink), the line under it a caption in the secondary ink. A
+ * row of them is as tall as two lines whatever they hold, because each line
+ * is cut with an ellipsis rather than wrapped, and its whole words are on its
+ * title while it is cut (`Text`'s `truncate`).
+ *
+ * A MARK STANDS CENTRED AGAINST BOTH LINES, the way a vendor's mark stands
+ * beside a service's name and host. In a grid's stacked rows the lines, not
+ * the mark, give the row its baseline, so a column's label stands on the
+ * value's line (DataGrid.css).
+ */
+export declare function TableTwoLineCell({ value, detail, mono, title, titleWhenCut, icon, mark, }: TableTwoLineCellProps): import("react").JSX.Element;

package/dist/TableCells/index.d.ts

@@ -1,3 +1,3 @@
 import './TableCells.css';
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, } from './TableCells.js';
-export type { TableDateCellProps, TableEntityCellProps, TableKeyCellProps, TableNumberCellProps, TableStatusCellProps, TableTagsCellLabels, TableTagsCellProps, TableTextCellProps, } from './TableCells.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, TableTwoLineCell, } from './TableCells.js';
+export type { TableDateCellProps, TableEntityCellProps, TableKeyCellProps, TableNumberCellProps, TableStatusCellProps, TableTagsCellLabels, TableTagsCellProps, TableTextCellProps, TableTwoLineCellMono, TableTwoLineCellProps, } from './TableCells.js';

package/dist/TableCells/index.js

@@ -1,4 +1,5 @@
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-AFLS26AC.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, TableTwoLineCell } from '../chunk-3CALM534.js';
+import '../chunk-O5CEG7TQ.js';
 import '../chunk-QF5UNP4T.js';
 import '../chunk-LBGKLYBY.js';
 import '../chunk-EJNJMHQG.js';

package/dist/{TableCells-TKSNLRK3.css → TableCells-ZALZLLEF.css}

@@ -112,3 +112,31 @@
   font-size: var(--font-size-xs);
   font-variant-numeric: tabular-nums;
 }
+
+/*
+ * A VALUE OVER A QUIETER LINE (TableTwoLineCell), each line its own block cut
+ * on one line. A column of boxes rather than two runs of text, so neither
+ * line takes the line box of the words around it, and the cell is exactly
+ * the two lines tall. `min-width: 0` lets the column shrink inside a grid's
+ * cell, which is what cuts the lines rather than pushing the column wider.
+ */
+.crewlet-table-cell__lines {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* The mark is centred against both lines, as an entity's badge is against its name. */
+.crewlet-table-cell__two-line {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* The mark keeps its size: the lines give way to the column, never the mark. */
+.crewlet-table-cell__two-line > :first-child {
+  flex: none;
+}