@crewlethq/ui 0.69.0 → 0.70.0

package/README.md

@@ -44,7 +44,7 @@ import { Button } from '@crewlethq/ui/Button';  // 8 KB of CSS, not 182 KB
 | Content and text | `Text` (the eight registers and `inherit`), `Prose`, `Statement`, `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`, `TimeRangePicker`, `ImageUpload`, `CharacterPicker`, `HuePicker`, `AvatarPicker`, `FactList`, `ChoiceList`, `Composer`, `MarkdownEditor`, `RichEditor` (with `preloadRichEditor`, and the round trip `roundTripMarkdown` and `canonicalMarkdown` from `@crewlethq/ui/RichEditorMarkdown`) |
 | Data display | `DataGrid` (with `useDataGridDriving`, `useAnyDataGridDriving` and `countDataGridRows`), `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`) |
+| List screens | `DataView`, and its parts on their own: `DataViewToolbar`, `FilterAxisBar`, `FilterAxisChip`, `FilterPill`, 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` |
 | Conversations and the assistant | `ChatThread` (with `ChatThreadHandle`), `MessageBubble`, `RunChip`, `StepList` and `StepStateMark`, `ProposalCard`, `ChangeList` (with `shortenUnchanged`), `StatusCard`, `ReceiptStrip`, `RefusalStrip`, `ResultTableCard`, `OpenInAppCard`, `BriefCard`, `EntityList`, `RefusalCard`, `SuggestionRow` and `SuggestionList`, `SendButton` |
@@ -205,6 +205,24 @@ 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.70.0
+
+**`FilterPill`, one filter in force as the sentence it is.** `field`, `operator` and `value` are drawn a step apart and separated by real spaces, so a pill reads, copies and is announced as "Status is In progress" rather than running its parts together. The field and the relation are the secondary ink at the regular weight; the value is the accent ink at the semibold weight, and the only part a long filter cuts. With no `operator` the field and the value are joined by a colon ("Role: Admin"); with no `value` the field alone names a switch ("Blocked"). It stands on the accent's soft pair, as a pressed `FilterChip` does. `onRemove` draws the remove control behind a hairline, named by the whole sentence ("Remove the Status is In progress filter") unless `removeLabel` names it. `renderWords` makes the words a control (a popover's trigger), handed the words and `FILTER_PILL_WORDS_CLASS`. `labels` replaces its words (`FILTER_PILL_LABELS`: `remove`, `removeUnnamed`, `fieldEnd`; `FilterPillLabels`). `filterPillSentence` builds the sentence where every part is a word. The remove control's rules outrank IconButton's own, so its height and square corners hold in any bundle order, and its hairline is logical (`border-inline-start`).
+
+**`FilterAxisChip` is a `FilterPill`** whose words open its editor, so every filter in force on any list has one look. It draws an unusual operator in the relation's register ("Created on or before 1 March") rather than inside the value. `formatFilterValue` is unchanged. The `.crewlet-filter-axis-chip__*` part classes are gone; the chip's root keeps `.crewlet-filter-axis-chip`.
+
+**A sortable `DataGrid` head says so before it is pressed.** It takes the surface hover overlay under the pointer and draws a two-way arrow on hover and on focus; the sorted head always draws an arrow naming its direction (up for ascending, down for descending), before the word in a right-aligned column. The arrow's box is always laid out, so a head never changes width under the pointer; **every sortable head is therefore about 16px wider at rest than before (the arrow and its gap), so the widths at which a grid drops a give-way column or stacks into card rows move accordingly.** A centred sortable head mirrors the arrow's box before its word, so the word stays on the column's middle. Where nothing hovers (`hover: none`, a touch screen) the two-way arrow is shown at rest. The whole head is the press target. Heads that cannot sort stay inert and draw no arrow unless they are the sort in force, which they still announce with `aria-sort`.
+
+**`DataGrid` takes `defaultSort`**, the order the rows take while `sort` is empty, drawn on its column's head as the sort in force. A press steps ascending, descending, then back to the default, from the sort in force rather than from the address: a column at its default descending turns ascending, and a step that lands on the default is written as `''`, so an address holds only what the reader chose and no press changes nothing. `nextGridSort(column, sort, defaultSort)` is that cycle, pure.
+
+**A `DataGrid` column has one edge, shared by its head and its values.** `align` takes `left` (the default), `right` or `center` (`DataGridAlign`), and the head, its sort button and every cell take the same modifier and the same inline inset, so a head never stands off the values it names. A right-aligned column draws tabular digits, so times and figures end on one edge. A column with `icon` (one glyph or face per row) is drawn in a fixed track (`DATA_GRID_ICON_TRACK`), centred, keeps the cells' own step on both sides even at the grid's edge, and is named by its `label`. `TableDateCell` draws tabular digits.
+
+**`Button` takes `flush`, and `Menu` takes `valueTrigger`.** A flush button's words start on the line its box starts on: its padding and edge are taken back at its start by its size's own inset (`--crewlet-btn-inset`), and its focus ring is drawn inside. A ghost button drawn as a value (a status chosen in place, a face that opens a picker) then starts on the line the plain values in its column start on, in a table or a properties rail, instead of one padding and one edge inside it. The outdent reads `--crewlet-btn-flush-outdent`; a container with no gutter to give sets it to 0, which `DataGrid` does for its first column, its right and centred columns and its card rows. The grid's own outdent for a ghost control written straight into a cell is the same declaration, so the old `--crewlet-data-grid-control-outdent` is gone. `Menu`'s `valueTrigger` is a trigger that IS the value it changes: flush, and in the surrounding text's size, weight and ink rather than a button label's, so a writer's row in a table or a properties rail reads as a reader's.
+
+**`DataGrid`'s handle activates a row that only links.** `DataGridHandle.activate` calls `onRowActivate` where the row has one, and otherwise follows the cursor row's `rowHref` link as a click would, with the keys held, so Enter opens a row in a grid of links and a modified Enter opens it elsewhere.
+
+**The `DataGrid` foot is a caption, not a row.** It takes the micro step of type, the tertiary ink, half the row's inset and the grid's own ground under a hairline, where it took the head's raised ground at nearly a row's height, so a grid's head, rows and foot no longer blur into one stack. A note in the foot takes the foot's size.
+
 ## Changes in 0.69.0
 
 **`BriefCard`, a brief as the assistant's answer card.** One sentence on what is going on (`summary`), the rows that wait on the reader (`needs`, never more than `BRIEF_CARD_MAX_NEEDS`, three, each with its words, one `detail`, a `tone` of `warning` (the default), `danger` or `neutral` drawn as a `StatusDot`, and one `action` button), one `recommended` next step on the accent's softest ground with an optional primary action (`null` leaves the block out), and `followUps`, the questions to ask next as plain `SuggestionRow`s under an "Ask next" label. An empty `needs` says "Nothing needs you." in words. It stands in a `StatusCard` titled "Brief" with `scope` and `asOf` beside the title and a Tag in the head that counts the rows ("2 need you") or says "All clear", so the card's region name carries the count. Every action is the host's own callback: the card never decides where a row leads. `labels` replaces any of its words (`BRIEF_CARD_LABELS`); the types are `BriefCardProps`, `BriefCardNeed`, `BriefCardNeedTone`, `BriefCardAction`, `BriefCardRecommendation`, `BriefCardFollowUp` and `BriefCardLabels`.

package/dist/AgentHandoffPanel/index.js

@@ -1,19 +1,19 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-BXEKD5NU.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-6C6YK75K.js';
 import '../chunk-4MJN2KN6.js';
 import '../chunk-WFCWPXJN.js';
-import '../chunk-XWOH3UPZ.js';
+import '../chunk-5OFRDX66.js';
 import '../chunk-222VILSP.js';
 import '../chunk-FFGEJUAP.js';
 import '../chunk-CLJGFOTV.js';
+import '../chunk-ANTAQAR4.js';
 import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-ANTAQAR4.js';
 import '../chunk-IVTQWOXV.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-PIYJNCN7.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';

package/dist/AppShell/index.js

@@ -1,8 +1,8 @@
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-GJ7VIQWL.js';
+export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-UY3FWQWG.js';
 import '../chunk-RTPQDNW3.js';
-import '../chunk-T73DMDU4.js';
+import '../chunk-OQG4P5KU.js';
 export { RESIZE_HANDLE_LARGE_STEP, RESIZE_HANDLE_STEP, ResizeHandle, clampSize, useAppShellAside, useAppShellPeek } from '../chunk-PIYJNCN7.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';

package/dist/ArtifactBar/index.js

@@ -1,16 +1,16 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-DXVJSBEW.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-TKBFRGUV.js';
 import '../chunk-25AZQ3GZ.js';
 import '../chunk-I33UIUZD.js';
-import '../chunk-W6UVBBNH.js';
-import '../chunk-PVZOP3QK.js';
+import '../chunk-TYIHFDMP.js';
+import '../chunk-IPUEVTRJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-AVL52EME.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-RSKW25Y5.js';
 import '../chunk-ANTAQAR4.js';
 import '../chunk-MLDTLZAO.js';
-import '../chunk-T73DMDU4.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-OQG4P5KU.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';

package/dist/AvatarPicker/index.js

@@ -1,16 +1,16 @@
-export { AvatarPicker } from '../chunk-NJYB4VJI.js';
-import '../chunk-2EA2GSA2.js';
+export { AvatarPicker } from '../chunk-DB7UVFOY.js';
+import '../chunk-AQIFKLXY.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-VZICPYGR.js';
-import '../chunk-PZKHBB7D.js';
-import '../chunk-W6UVBBNH.js';
-import '../chunk-PVZOP3QK.js';
+import '../chunk-SNQRGH4A.js';
+import '../chunk-TYIHFDMP.js';
+import '../chunk-IPUEVTRJ.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-WIATRXEJ.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-MLDTLZAO.js';
-import '../chunk-T73DMDU4.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-OQG4P5KU.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';

package/dist/BriefCard/index.js

@@ -1,13 +1,13 @@
-export { BRIEF_CARD_LABELS, BRIEF_CARD_MAX_NEEDS, BriefCard } from '../chunk-NTFVEOYY.js';
+export { BRIEF_CARD_LABELS, BRIEF_CARD_MAX_NEEDS, BriefCard } from '../chunk-VBA5FSWV.js';
 import '../chunk-Y7PVLEZJ.js';
 import '../chunk-NTQPJJAN.js';
 import '../chunk-I5OIKDX2.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Button/Button.d.ts

@@ -18,6 +18,16 @@ interface ButtonLook {
     trailingIcon?: ReactNode;
     /** Fills the line it is on. */
     block?: boolean | undefined;
+    /**
+     * Its words start on the line its box starts on: the padding and the edge
+     * are taken back at the start, so only the hover ground and the focus ring
+     * reach past them. For a GHOST button drawn as a value (a status chosen in
+     * place, a face that opens a picker), which then starts on the same line as
+     * the plain values above and below it, in a table column or a properties
+     * rail. Its focus ring is drawn inside it, so a container's clip never cuts
+     * it.
+     */
+    flush?: boolean | undefined;
     className?: string | undefined;
     children?: ReactNode;
 }

package/dist/Button/index.js

@@ -1,4 +1,4 @@
-export { Button, ButtonLink } from '../chunk-7QTPJDRF.js';
+export { Button, ButtonLink } from '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Button-VRRYSXFN.css → Button-GDEBGBX6.css}

@@ -110,23 +110,50 @@
    per size. min-height rather than height, so a label that wraps is read
    rather than clipped. */
 .crewlet-btn--small {
+  --crewlet-btn-inset: var(--spacing-2);
+
   min-height: var(--size-control-sm);
-  padding: 0 var(--spacing-2);
+  padding: 0 var(--crewlet-btn-inset);
   font-size: var(--font-size-xs);
 }
 
 .crewlet-btn--medium {
+  --crewlet-btn-inset: var(--spacing-3);
+
   min-height: var(--size-control-md);
-  padding: 0 var(--spacing-3);
+  padding: 0 var(--crewlet-btn-inset);
   font-size: var(--font-size-compact);
 }
 
 .crewlet-btn--large {
+  --crewlet-btn-inset: var(--spacing-4);
+
   min-height: var(--size-control-lg);
-  padding: 0 var(--spacing-4);
+  padding: 0 var(--crewlet-btn-inset);
   font-size: var(--font-size-sm);
 }
 
+/*
+ * FLUSH: the words start on the line. The padding and the 1px edge are taken
+ * back at the start, so a ghost button drawn as a value starts on the line
+ * the plain values in its column start on, and only the hover ground and the
+ * ring reach past it, into the gutter before it. The START ONLY: taken back at
+ * the end too, the box overran its cell's content edge, which a column that
+ * measures what it cuts short reads as a value that does not fit. The ring is
+ * drawn inside, so a container that clips (a table, a card) never cuts it.
+ *
+ * A CONTAINER WITH NO GUTTER TO GIVE sets `--crewlet-btn-flush-outdent` to 0:
+ * a table's first column and its card rows (DataGrid.css), where the outdent
+ * would pull the control toward the frame.
+ */
+.crewlet-btn--flush {
+  margin-inline-start: var(--crewlet-btn-flush-outdent, calc(-1 * (var(--crewlet-btn-inset) + 1px)));
+}
+
+.crewlet-btn--flush:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 .crewlet-btn--square {
   border-radius: var(--radius-md);
 }

package/dist/Canvas/index.js

@@ -1,8 +1,8 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-F32FFE6I.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, gridOf, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-OBPINJNO.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-ANTAQAR4.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/CanvasBoard/index.js

@@ -1,12 +1,12 @@
-export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-JEA5OX54.js';
+export { BOARD_NAME_MIN_CHARS, CANVAS_BOARD_MAX_LIVE, CANVAS_BOARD_MIN_LIVE_WIDTH, CANVAS_BOARD_MIN_ZOOM, CANVAS_NOTE_COLORS, CanvasBoard, TITLE_GLYPH_EM, boardName, boardRoom, liveBoards, titleSize } from '../chunk-FQI62PIZ.js';
 import '../chunk-5SZGKSGL.js';
-import '../chunk-WDNURPXU.js';
+import '../chunk-KL6A7JGH.js';
 import '../chunk-NR4CPM4T.js';
-import '../chunk-F32FFE6I.js';
+import '../chunk-OBPINJNO.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-ANTAQAR4.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/CanvasToolbar/index.js

@@ -1,10 +1,10 @@
-export { CanvasToolbar, toolForKey } from '../chunk-WDNURPXU.js';
+export { CanvasToolbar, toolForKey } from '../chunk-KL6A7JGH.js';
 import '../chunk-NR4CPM4T.js';
-import '../chunk-F32FFE6I.js';
+import '../chunk-OBPINJNO.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-ANTAQAR4.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/CharacterPicker/index.js

@@ -1,5 +1,5 @@
 import '../chunk-3L5NHASN.js';
-export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-VZICPYGR.js';
-import '../chunk-PZKHBB7D.js';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-SNQRGH4A.js';
 import '../chunk-EGMQURBR.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ChatThread/index.js

@@ -1,6 +1,6 @@
-export { CHAT_THREAD_FOLLOW_WITHIN, CHAT_THREAD_LABELS, ChatThread } from '../chunk-D2ZXIQ23.js';
+export { CHAT_THREAD_FOLLOW_WITHIN, CHAT_THREAD_LABELS, ChatThread } from '../chunk-R5OATXWU.js';
 import '../chunk-RTPQDNW3.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CodeBlock/index.js

@@ -1,8 +1,8 @@
-export { CodeBlock } from '../chunk-DMK2A4IK.js';
-import '../chunk-IYG4ETAQ.js';
+export { CodeBlock } from '../chunk-QSWQJX27.js';
+import '../chunk-T5GBTXNC.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';

package/dist/ColorSwatch/index.js

@@ -1,9 +1,9 @@
-export { ColorSwatch } from '../chunk-2A6DL3K5.js';
-import '../chunk-IYG4ETAQ.js';
+export { ColorSwatch } from '../chunk-6FBPFG3C.js';
+import '../chunk-T5GBTXNC.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';

package/dist/CommandPalette/index.js

@@ -1,13 +1,13 @@
-export { CommandPalette } from '../chunk-EHB4TSP2.js';
-import '../chunk-I24FI46B.js';
+export { CommandPalette } from '../chunk-NXNLAZPK.js';
+import '../chunk-C667GCU7.js';
 import '../chunk-7KHM2FZH.js';
+import '../chunk-ANTAQAR4.js';
 import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-ANTAQAR4.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-XSPCITPN.js';

package/dist/CommentThread/index.js

@@ -1,18 +1,18 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-OWQATZGW.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-YGWIWDXE.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-BXCL6P5Z.js';
-import '../chunk-XWOH3UPZ.js';
+import '../chunk-5OFRDX66.js';
+import '../chunk-ANTAQAR4.js';
 import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-ANTAQAR4.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/Composer/index.js

@@ -1,7 +1,7 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-XWOH3UPZ.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-5OFRDX66.js';
+import '../chunk-ANTAQAR4.js';
 import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-ANTAQAR4.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-OMV5W53A.js';

package/dist/ConflictNote/index.js

@@ -1,5 +1,5 @@
-export { CONFLICT_NOTE_LABELS, ConflictNote } from '../chunk-SUJO3AHN.js';
-import '../chunk-7QTPJDRF.js';
+export { CONFLICT_NOTE_LABELS, ConflictNote } from '../chunk-B3PK2LND.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Copyable/index.js

@@ -1,7 +1,7 @@
-export { CopyButton, Copyable } from '../chunk-IYG4ETAQ.js';
+export { CopyButton, Copyable } from '../chunk-T5GBTXNC.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UAUP6XGK.js';
 import '../chunk-UT6CW3C7.js';

package/dist/DataGrid/DataGrid.d.ts

@@ -5,6 +5,10 @@ import { type MouseEvent as ReactMouseEvent, type KeyboardEvent as ReactKeyboard
  * Each carries the modifier keys a handler reads to open in a new tab.
  */
 export type DataGridActivationEvent = ReactMouseEvent | ReactKeyboardEvent | KeyboardEvent;
+/** The edge a column's head and values share. */
+export type DataGridAlign = 'left' | 'right' | 'center';
+/** The track an `icon` column is drawn in: the target size and the cell's inset either side. */
+export declare const DATA_GRID_ICON_TRACK = "calc(var(--size-target-min) + var(--spacing-3) * 2)";
 /** One column of a [DataGrid]. */
 export interface DataGridColumn<T> {
     key: string;
@@ -12,7 +16,23 @@ export interface DataGridColumn<T> {
     cell: (row: T) => ReactNode;
     /** The value sorted on. Omit to make the column unsortable. */
     sortValue?: ((row: T) => string | number | null | undefined) | undefined;
-    align?: 'left' | 'right' | undefined;
+    /**
+     * Which edge the column's values and its head share: `left` (the default)
+     * for words, `right` for figures, times and dates (their digits are
+     * tabular, so a column of them reads down one edge), `center` for a column
+     * of one mark per row. The head and every cell take the same edge and the
+     * same inset, so a head never stands off the values it names.
+     */
+    align?: DataGridAlign | undefined;
+    /**
+     * A column of ONE MARK per row (a glyph, a face, a priority): a fixed track
+     * (`DATA_GRID_ICON_TRACK`, the target size and the cell's inset either
+     * side), its head and every cell centred. A run of such columns then reads
+     * as aligned columns rather than marks scattered at their content's width.
+     * Name it with `label`, which the head says to assistive technology and
+     * shows on hover.
+     */
+    icon?: boolean | undefined;
     /**
      * The column's name where `header` cannot carry one: a glyph head, or none
      * at all. Drawn by the card layout a grid takes on a phone, where every value
@@ -156,7 +176,10 @@ export interface DataGridLabels {
 export interface DataGridHandle {
     /** Moves the cursor row by `by` rows, clamped, and scrolls it into view. */
     step: (by: number) => void;
-    /** Activates the cursor row, as a click on it would. False when there is none. */
+    /**
+     * Activates the cursor row, as a click on it would: its `onRowActivate`, or
+     * where it has none, its `rowHref` link. False when there is neither.
+     */
     activate: (event: ReactKeyboardEvent | KeyboardEvent) => boolean;
     /** How many rows the grid draws, its bands' rows included. */
     rowCount: () => number;
@@ -189,7 +212,16 @@ export interface DataGridProps<T> {
      * Controlled, so an application keeps it where it keeps state (an address).
      */
     sort?: string | undefined;
-    /** A sortable head pressed: ascending, then descending, then unsorted. */
+    /**
+     * The order the rows take while `sort` is empty (`key` or `-key`), drawn on
+     * its column's head as the sort in force. Empty for the rows' own order.
+     */
+    defaultSort?: string | undefined;
+    /**
+     * A sortable head pressed: ascending, then descending, then back to the
+     * default. Called with `''` for the default, never with `defaultSort`
+     * itself, so an address holds the reader's choice and nothing else.
+     */
     onSortChange?: ((sort: string) => void) | undefined;
     /** The rows arrive ordered by their source (a paged answer ordered over the whole set). */
     serverSorted?: boolean | undefined;
@@ -235,6 +267,20 @@ export declare function parseGridSort(raw: string): {
     key: string;
     desc: boolean;
 } | null;
+/**
+ * The sort a press on a column's head asks for: ascending, then descending,
+ * then back to the default. PURE, so the cycle is held without a render.
+ *
+ * Against the EFFECTIVE sort (the reader's, else the default), because a head
+ * that reads "descending" must take its next press as one more step from
+ * descending, whoever chose it. Two rules keep every press a visible change:
+ *
+ * - a column already at its DEFAULT descending turns ascending, where the
+ *   cycle's "back to the default" would have changed nothing;
+ * - a step that lands on the default is written as `''`, so the address holds
+ *   only what the reader chose and the default can change under it.
+ */
+export declare function nextGridSort(column: string, sort: string, defaultSort?: string): string;
 /** What the fit has decided for one set of columns, at one width. */
 export interface GridFit {
     /** The column set it was decided for. */
@@ -323,4 +369,4 @@ export declare function squeezed<T>(wrap: HTMLElement, visible: readonly DataGri
  * lets its head stick against the page's scroller; an application whose
  * scroller carries a sticky bar sets `--crewlet-data-grid-sticky-top`.
  */
-export declare function DataGrid<T>({ rows, bands, columns, rowKey, onRowActivate, rowHref, isSelected, selection, isFailed, sort: sortRaw, onSortChange, serverSorted, cols: colsRaw, onColsChange, empty, footer, onLoadMore, loadedNote, phoneRows, flush, handleRef, onPointerDown, labels, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, }: DataGridProps<T>): import("react").JSX.Element;
+export declare function DataGrid<T>({ rows, bands, columns, rowKey, onRowActivate, rowHref, isSelected, selection, isFailed, sort: sortRaw, defaultSort, onSortChange, serverSorted, cols: colsRaw, onColsChange, empty, footer, onLoadMore, loadedNote, phoneRows, flush, handleRef, onPointerDown, labels, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, }: DataGridProps<T>): import("react").JSX.Element;

package/dist/DataGrid/index.d.ts

@@ -1,5 +1,5 @@
 import './DataGrid.css';
-export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, fitGridColumns, parseGridSort } from './DataGrid.js';
+export { ChooserList, ColumnChooser, DATA_GRID_ICON_TRACK, DataGrid, columnChoicesOf, fitGridColumns, nextGridSort, parseGridSort, } from './DataGrid.js';
 export { countDataGridRows, useAnyDataGridDriving, useDataGridDriving } from './driving.js';
 export type { DataGridDriving } from './driving.js';
-export type { ColumnChoice, ChooserItem, ChooserListProps, ColumnChooserProps, DataGridActivationEvent, DataGridBand, DataGridColumn, DataGridHandle, DataGridLabels, DataGridProps, GridFit, } from './DataGrid.js';
+export type { ColumnChoice, ChooserItem, ChooserListProps, ColumnChooserProps, DataGridActivationEvent, DataGridAlign, DataGridBand, DataGridColumn, DataGridHandle, DataGridLabels, DataGridProps, GridFit, } from './DataGrid.js';

package/dist/DataGrid/index.js

@@ -1,4 +1,4 @@
-export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-ELLRZ5XR.js';
+export { ChooserList, ColumnChooser, DATA_GRID_ICON_TRACK, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, nextGridSort, parseGridSort, useAnyDataGridDriving, useDataGridDriving } from '../chunk-FURJVZCT.js';
 import '../chunk-PBCNINMB.js';
 import '../chunk-PPUR46MK.js';
 import '../chunk-ETSF7SU6.js';
@@ -6,7 +6,7 @@ import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-RTPQDNW3.js';
-import '../chunk-7QTPJDRF.js';
+import '../chunk-DGXZ635L.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-UAUP6XGK.js';