@crewlethq/ui 0.68.0 → 0.70.0

package/README.md

@@ -44,10 +44,10 @@ 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`, `EntityList`, `RefusalCard`, `SuggestionRow` and `SuggestionList`, `SendButton` |
+| 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` |
 | 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`, `Spinner`, `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`) |
@@ -205,6 +205,28 @@ 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`.
+
 ## Changes in 0.67.0
 
 **The product marks are redrawn as one family** (`@crewlethq/icons`). Each stands on the Crewlet octagon in the brand violet with a deeper lower facet (`#6a3cff`, was `#5c24ff`) and one white figure: Worklet a tick over one open task, Doclet a page with a chamfer fold, Chat a speech bubble with the crewmate's visor, and the Assistant two sparks. The `dim` and `eye` parts are gone, and every drawing carries a hidden `keyline` part that the soon state paints. Nothing to change unless a stylesheet of your own reads those parts.

package/dist/AgentHandoffPanel/index.js

@@ -1,24 +1,24 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-QRKDP7RQ.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-6C6YK75K.js';
 import '../chunk-4MJN2KN6.js';
 import '../chunk-WFCWPXJN.js';
-import '../chunk-OXEWUAND.js';
+import '../chunk-5OFRDX66.js';
 import '../chunk-222VILSP.js';
 import '../chunk-FFGEJUAP.js';
 import '../chunk-CLJGFOTV.js';
 import '../chunk-ANTAQAR4.js';
-import '../chunk-DCQ2VTBB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.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';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AppShell/index.js

@@ -1,13 +1,13 @@
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-PHBMSXVE.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-2566PSQ3.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';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArrangeList/index.js

@@ -1,13 +1,13 @@
-export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-GAUBP247.js';
+export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-TWJERLT3.js';
 import '../chunk-3XDT5ZWL.js';
 import '../chunk-MPVMB2DV.js';
-import '../chunk-EAR2F5OA.js';
-import '../chunk-DCQ2VTBB.js';
+import '../chunk-PBCNINMB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactBar/index.js

@@ -1,21 +1,21 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-DMY4XEDS.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-TKBFRGUV.js';
 import '../chunk-25AZQ3GZ.js';
 import '../chunk-I33UIUZD.js';
-import '../chunk-MJTBINIY.js';
-import '../chunk-MVQLCSAC.js';
+import '../chunk-TYIHFDMP.js';
+import '../chunk-IPUEVTRJ.js';
 import '../chunk-EGMQURBR.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-AVL52EME.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-RSKW25Y5.js';
 import '../chunk-ANTAQAR4.js';
 import '../chunk-MLDTLZAO.js';
-import '../chunk-2566PSQ3.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';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactCard/index.js

@@ -1,4 +1,4 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-XI56IJGI.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-3EETQFAM.js';
 import '../chunk-BRLZXYPA.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-EJNJMHQG.js';
@@ -8,16 +8,16 @@ import '../chunk-AV2DXAEL.js';
 import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-NHLNHH4J.js';
-import '../chunk-EAR2F5OA.js';
+import '../chunk-PBCNINMB.js';
 import '../chunk-DOY3KC6I.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
-import '../chunk-DCQ2VTBB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-MLDTLZAO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArtifactPanel/index.js

@@ -5,7 +5,7 @@ import '../chunk-PIYJNCN7.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AvatarPicker/index.js

@@ -1,21 +1,21 @@
-export { AvatarPicker } from '../chunk-MVQSTBLQ.js';
-import '../chunk-YDXX5UB7.js';
+export { AvatarPicker } from '../chunk-DB7UVFOY.js';
+import '../chunk-AQIFKLXY.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-SNQRGH4A.js';
-import '../chunk-MJTBINIY.js';
-import '../chunk-MVQLCSAC.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-2566PSQ3.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';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/BriefCard/BriefCard.d.ts

@@ -0,0 +1,80 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** The most rows a brief draws: what waits on the reader is a short list or it is not a brief. */
+export declare const BRIEF_CARD_MAX_NEEDS = 3;
+/** The one thing a row or the recommendation lets the reader do, in one press. */
+export interface BriefCardAction {
+    /** A verb and its object: "Answer", "Open GOP-11", "Ask why". */
+    label: string;
+    onSelect: () => void;
+}
+/**
+ * How loud a row is. `danger` is for a fact the host knows (an agent stopped,
+ * a failed turn), never for urgency a writer chose; most rows are `warning`.
+ */
+export type BriefCardNeedTone = 'danger' | 'warning' | 'neutral';
+/** One thing that waits on the reader, pointing at the record it is about. */
+export interface BriefCardNeed {
+    key: string;
+    /** What waits, with its number and its name: "QA asks which store build to test on GOP-11". */
+    text: ReactNode;
+    /** One fact under it: "Asked 2 hours ago". */
+    detail?: ReactNode;
+    tone?: BriefCardNeedTone | undefined;
+    action?: BriefCardAction | undefined;
+}
+/** The one next step the brief recommends. */
+export interface BriefCardRecommendation {
+    text: ReactNode;
+    action?: BriefCardAction | undefined;
+}
+/** A question the reader can ask next, in the same conversation. */
+export interface BriefCardFollowUp {
+    key: string;
+    question: string;
+    onSelect: () => void;
+}
+export interface BriefCardLabels {
+    /** The card's title. */
+    heading: string;
+    needs: string;
+    /** Said in the needs block when nothing waits on the reader. */
+    clear: string;
+    recommended: string;
+    followUps: string;
+    /** The head's Tag: how many rows wait on the reader. */
+    count: (n: number) => string;
+    /** The head's Tag when nothing waits. */
+    allClear: string;
+}
+export declare const BRIEF_CARD_LABELS: BriefCardLabels;
+export interface BriefCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** What the brief covers, beside the title: "Inbox", "Decision on GOP-11". */
+    scope?: ReactNode;
+    /** When the brief was written, as the reader reads a time: "Just now". */
+    asOf?: ReactNode;
+    /** What is going on, in one sentence with numbers and names. */
+    summary: ReactNode;
+    /** What waits on the reader, at most [BRIEF_CARD_MAX_NEEDS]. An empty list says `labels.clear`. */
+    needs: readonly BriefCardNeed[];
+    /** The one next step, or `null` where nothing is worth recommending. */
+    recommended: BriefCardRecommendation | null;
+    /** Questions to ask next, drawn as suggestion rows under the recommendation. */
+    followUps?: readonly BriefCardFollowUp[] | undefined;
+    labels?: Partial<BriefCardLabels> | undefined;
+}
+/**
+ * A brief, as the assistant's answer card: one sentence on what is going on,
+ * the rows that wait on the reader (never more than three, each pointing at
+ * its record with the one press that deals with it), one recommended next
+ * step, and the questions worth asking next.
+ *
+ * A FIXED SHAPE, NOT PROSE. A reader who asks for a brief on every page learns
+ * where each answer sits and reads only the part they need. Nothing waiting is
+ * said in words, "Nothing needs you.", rather than drawn as an empty block, and
+ * the head's Tag says the count before the body is read.
+ *
+ * THE CARD DRAWS, THE HOST DECIDES. Every action is the host's own callback,
+ * so where a row leads (a record opened, a question asked) is settled by the
+ * code that built the brief, never by text inside it.
+ */
+export declare function BriefCard({ scope, asOf, summary, needs, recommended, followUps, labels: overrides, className, ...rest }: BriefCardProps): import("react").JSX.Element;

package/dist/BriefCard/index.d.ts

@@ -0,0 +1,3 @@
+import './BriefCard.css';
+export { BRIEF_CARD_LABELS, BRIEF_CARD_MAX_NEEDS, BriefCard } from './BriefCard.js';
+export type { BriefCardAction, BriefCardFollowUp, BriefCardLabels, BriefCardNeed, BriefCardNeedTone, BriefCardProps, BriefCardRecommendation, } from './BriefCard.js';

package/dist/BriefCard/index.js

@@ -0,0 +1,13 @@
+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-MLDTLZAO.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/BriefCard-L66R5U32.css

@@ -0,0 +1,127 @@
+/*
+ * A brief inside the product's status card: one sentence, the rows that wait
+ * on the reader, one recommendation and the questions to ask next, each block
+ * under a quiet label so a reader scans straight to the part they need.
+ */
+.crewlet-brief-card__where {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1);
+}
+
+.crewlet-brief-card__asof {
+  white-space: nowrap;
+}
+
+.crewlet-brief-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  min-width: 0;
+}
+
+.crewlet-brief-card__summary {
+  margin: 0;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-snug);
+  text-wrap: pretty;
+}
+
+.crewlet-brief-card__block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-brief-card__label {
+  margin: 0;
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-brief-card__needs {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/*
+ * A ROW IS THE LIST ROW'S GRAMMAR: the dot on the first line, the words and
+ * their one fact, and the action centred at the end, so a column of rows reads
+ * down the dots and across to the presses.
+ */
+.crewlet-brief-card__need {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--spacing-3);
+  padding-block: var(--spacing-2);
+}
+
+.crewlet-brief-card__need + .crewlet-brief-card__need {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-brief-card__need > .crewlet-button {
+  align-self: center;
+}
+
+.crewlet-brief-card__dot {
+  display: inline-flex;
+  align-items: center;
+  height: 1lh;
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-brief-card__words {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-0);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-brief-card__detail {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-brief-card__clear {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin: 0;
+  font-size: var(--font-size-compact);
+  color: var(--color-feedback-success-ink);
+}
+
+/* The recommendation: one step, on the accent's softest ground. */
+.crewlet-brief-card__next {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-md);
+  background: var(--color-brand-accent-soft);
+  overflow-wrap: anywhere;
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-brief-card__arrow {
+  color: var(--color-brand-accent-ink);
+}
+
+/* The questions to ask next sit on the card's text edge: each row's own inset is pulled out. */
+.crewlet-brief-card__follow-ups {
+  margin-inline: calc(-1 * var(--spacing-3));
+}

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,12 +1,12 @@
-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-NBOFBSVD.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';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CanvasBoard/index.js

@@ -1,16 +1,16 @@
-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-MCMPQBEV.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-WYXUDDTY.js';
+import '../chunk-KL6A7JGH.js';
 import '../chunk-NR4CPM4T.js';
-import '../chunk-NBOFBSVD.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';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CanvasToolbar/index.js

@@ -1,14 +1,14 @@
-export { CanvasToolbar, toolForKey } from '../chunk-WYXUDDTY.js';
+export { CanvasToolbar, toolForKey } from '../chunk-KL6A7JGH.js';
 import '../chunk-NR4CPM4T.js';
-import '../chunk-NBOFBSVD.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';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.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/Checkbox/index.js

@@ -1,10 +1,10 @@
-export { Checkbox, CheckboxGroup } from '../chunk-EAR2F5OA.js';
-import '../chunk-DCQ2VTBB.js';
+export { Checkbox, CheckboxGroup } from '../chunk-PBCNINMB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.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/ColorField/index.js

@@ -1,11 +1,11 @@
-export { ColorField } from '../chunk-CMTLQOJY.js';
+export { ColorField } from '../chunk-7LSSYHOT.js';
 import '../chunk-7W3LYIOC.js';
-import '../chunk-DCQ2VTBB.js';
+import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
 import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';