@crewlethq/ui 0.61.0 → 0.63.0

package/README.md

@@ -205,6 +205,14 @@ 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.62.0
+
+**`ValueField`, a labelled value with the control its kind needs.** `FormField` with the control and the rules every form holding configuration values otherwise rewrites, in one component (`ValueField`, `ValueFieldKind`, `ValueFieldChoice`, `ValueFieldLabels`, `ValueFieldProps`). `kind` picks the control: `text`, `id`, `email` and `url` are a text field, `secret` a password field, `multiline` a `Textarea`, and `choice` and `handle` the `Select` listbox. A `secret` is masked unless its value is exactly one `${NAME}` reference, which reads as a name in the `reference` appearance. Typing `$` in a one-line field offers the names in `references`, ranked closest first and written in as a whole `${NAME}` (`onReferencesNeeded` is called as the list opens, so a caller can refresh it). A `url` wears an `https://` `InputAffix`, read as part of the value, which steps aside for `http://` and for a reference. `url`, `id` and `email` drop whitespace; no kind sets `type="email"`, so a reference is never refused by the browser. Required is the unmarked default: `required={false}` says "(optional)", and `markRequired` says "(required)" where it is news. A choice's `hint` is drawn under its option and joins the help line once chosen, and a stored answer the list no longer offers keeps a row of its own. `isReference` replaces the default `${NAME}` grammar, `mark` draws a logo before the label, `helperOnFocus` is passed to `FormField`, and `labels` replaces the list's name ("Secrets") and the choice placeholder ("Choose one").
+
+**The completion helpers are exported with it**: `referenceAt`, `rankReferences`, `completeReference`, `isWholeReference`, `urlSchemeOf`, `REFERENCE_NAME_PATTERN` and the `ReferenceQuery` type, for a field that completes references in a control of its own.
+
+**`Combobox` on a password field is a combobox only while its list is open.** HTML allows no ARIA role on `type="password"`, so a masked field carried an invalid `role="combobox"` (and `aria-autocomplete` and `aria-expanded`) at rest. It now takes those only while it has options to show. Every other field is unchanged.
+
 ## Changes in 0.58.0
 
 **`Spinner` turns at a calm pace, and its arc breathes.** It turned once per `--motion-duration-slow` (300ms), a transition step, so every running mark (a pending `Button`, `RunChip` while it thinks or works, a running step in `StepList`, `StepStateMark`) spun more than three times a second and read as alarm rather than as work. It now turns once a second (`--motion-duration-turn`, linear) while its arc eases between a quarter and three quarters of the ring on a slower cycle (`--motion-duration-sweep`, 1.5s), with soft ends. The stroke is still one 2px border in the current ink at every size (`em`, `xs`, `sm`, `md`); the arc is cut by a mask, so no side of the border is transparent any more. Under reduced motion it stops as before and keeps its open quarter. The arc's length is a registered custom property (`@property --crewlet-spinner-arc`); a browser without `@property` support steps between the two lengths rather than easing.

package/dist/AgentHandoffPanel/index.js

@@ -14,9 +14,9 @@ import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-PIYJNCN7.js';
 import '../chunk-7QTPJDRF.js';
-import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2XWFWNDT.js';
 import '../chunk-NUZHC6MM.js';

package/dist/AppShell/index.js

@@ -3,9 +3,9 @@ import '../chunk-RTPQDNW3.js';
 import '../chunk-LODRX4FU.js';
 export { RESIZE_HANDLE_LARGE_STEP, RESIZE_HANDLE_STEP, ResizeHandle, clampSize, useAppShellAside, useAppShellPeek } from '../chunk-PIYJNCN7.js';
 import '../chunk-7QTPJDRF.js';
-import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2XWFWNDT.js';
 import '../chunk-NUZHC6MM.js';

package/dist/ArtifactBar/index.js

@@ -1,19 +1,19 @@
-export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-5KW63GZ3.js';
+export { ARTIFACT_BAR_LABELS, ArtifactBar, ArtifactVersionChip } from '../chunk-JAOJLEYB.js';
 import '../chunk-OOC7Q67K.js';
 import '../chunk-I33UIUZD.js';
-import '../chunk-3BQWARG2.js';
-import '../chunk-VN3DCUED.js';
-import '../chunk-WIATRXEJ.js';
+import '../chunk-F7VBYCW2.js';
+import '../chunk-27JCHL64.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-AVL52EME.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-RSKW25Y5.js';
 import '../chunk-ACRRRPWT.js';
 import '../chunk-5KRRJNQO.js';
 import '../chunk-LODRX4FU.js';
 import '../chunk-7QTPJDRF.js';
-import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2XWFWNDT.js';
 import '../chunk-NUZHC6MM.js';

package/dist/ArtifactCard/index.js

@@ -1,13 +1,13 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-MHFTG2LO.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-EBCH3MRX.js';
 import '../chunk-QBI5ETKY.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-L6NG7CUA.js';
 import '../chunk-RE3FBGQQ.js';
+import '../chunk-MKKX6N7C.js';
+import '../chunk-AV2DXAEL.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-QZLNKLYD.js';
-import '../chunk-MKKX6N7C.js';
-import '../chunk-AV2DXAEL.js';
 import '../chunk-KIPAFCVS.js';
 import '../chunk-BGLKLXL3.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';

package/dist/AttachmentChip/AttachmentChip.d.ts

@@ -0,0 +1,37 @@
+import { type HTMLAttributes } from 'react';
+/** Where an attached file stands: on its way up, ready to send, or refused. */
+export type AttachmentChipState = 'uploading' | 'ready' | 'failed';
+/** The words a state is said with after the file's name, for a screen reader. */
+export interface AttachmentChipLabels {
+    uploading: string;
+    failed: string;
+    /** Names the remove control, by the file's name. */
+    remove: (name: string) => string;
+}
+export declare const ATTACHMENT_CHIP_LABELS: AttachmentChipLabels;
+export interface AttachmentChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The file's name. */
+    name: string;
+    /**
+     * The address of an image to draw as the chip's thumbnail, or nothing for
+     * the image mark. DRAWN ONLY AS AN `<img>`, so a picture never runs what it
+     * carries; one that fails to load falls back to the mark.
+     */
+    preview?: string | undefined;
+    state?: AttachmentChipState | undefined;
+    /** Takes the file off what is being sent. Without it, the chip only shows what was sent. */
+    onRemove?: (() => void) | undefined;
+    labels?: Partial<AttachmentChipLabels> | undefined;
+}
+/**
+ * A file attached to a message, as the chip in a composer's attachments row
+ * and under the message it was sent with: a thumbnail, the file's name, and
+ * a remove control while it can still be taken off.
+ *
+ * A `Tag`, SO IT STANDS IN ONE ROW with the other things a message carries
+ * (the page a question is asked about) at the same height and in the same
+ * outline. Uploading, the thumbnail gives way to the spinner; refused, the
+ * chip takes the danger tone and the alert mark, and its state is said in
+ * words after the name, because the mark is a picture of it.
+ */
+export declare function AttachmentChip({ name, preview, state, onRemove, labels: overrides, className, ...rest }: AttachmentChipProps): import("react").JSX.Element;

package/dist/AttachmentChip/index.d.ts

@@ -0,0 +1,3 @@
+import './AttachmentChip.css';
+export { ATTACHMENT_CHIP_LABELS, AttachmentChip } from './AttachmentChip.js';
+export type { AttachmentChipLabels, AttachmentChipProps, AttachmentChipState } from './AttachmentChip.js';

package/dist/AttachmentChip/index.js

@@ -0,0 +1,6 @@
+export { ATTACHMENT_CHIP_LABELS, AttachmentChip } from '../chunk-KYTOEWJD.js';
+import '../chunk-KYIAFNU7.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-XSPCITPN.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/AttachmentChip-XF4KPQ3G.css

@@ -0,0 +1,16 @@
+/*
+ * A file attached to a message: a Tag whose leading mark is the file's
+ * thumbnail, at the glyph's own box so the pill keeps its height, with the
+ * name cut short rather than widening the composer's row.
+ */
+.crewlet-attachment-chip {
+  max-width: 14rem;
+}
+
+.crewlet-attachment-chip__thumb {
+  display: block;
+  width: var(--font-size-md);
+  height: var(--font-size-md);
+  border-radius: var(--radius-xs);
+  object-fit: cover;
+}

package/dist/AvatarPicker/index.js

@@ -1,19 +1,19 @@
-export { AvatarPicker } from '../chunk-5ZGJ22CO.js';
-import '../chunk-NRMXUNLR.js';
+export { AvatarPicker } from '../chunk-DHIO6Q75.js';
+import '../chunk-QCVAVAF6.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-SNQRGH4A.js';
-import '../chunk-3BQWARG2.js';
-import '../chunk-VN3DCUED.js';
-import '../chunk-WIATRXEJ.js';
+import '../chunk-F7VBYCW2.js';
+import '../chunk-27JCHL64.js';
 import '../chunk-EGMQURBR.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-5KRRJNQO.js';
 import '../chunk-LODRX4FU.js';
 import '../chunk-7QTPJDRF.js';
-import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2XWFWNDT.js';
 import '../chunk-NUZHC6MM.js';

package/dist/Canvas/index.js

@@ -3,8 +3,8 @@ import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-ACRRRPWT.js';
 import '../chunk-7QTPJDRF.js';
-import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2XWFWNDT.js';
 import '../chunk-NUZHC6MM.js';

package/dist/CanvasBoard/index.js

@@ -7,8 +7,8 @@ import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-ACRRRPWT.js';
 import '../chunk-7QTPJDRF.js';
-import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2XWFWNDT.js';
 import '../chunk-NUZHC6MM.js';

package/dist/CanvasToolbar/index.js

@@ -5,8 +5,8 @@ import '../chunk-LM3ISVJA.js';
 import '../chunk-I33UIUZD.js';
 import '../chunk-ACRRRPWT.js';
 import '../chunk-7QTPJDRF.js';
-import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2XWFWNDT.js';
 import '../chunk-NUZHC6MM.js';

package/dist/Combobox/index.js

@@ -1,4 +1,4 @@
-export { Combobox } from '../chunk-VC2M2E7N.js';
+export { Combobox } from '../chunk-PK2P2QH6.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-TLIJG4TP.js';
 import '../chunk-PGCLHYVP.js';

package/dist/CommandPalette/index.js

@@ -8,9 +8,9 @@ import '../chunk-5KRRJNQO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-7QTPJDRF.js';
-import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2XWFWNDT.js';
 import '../chunk-NUZHC6MM.js';

package/dist/CommentThread/index.js

@@ -13,8 +13,8 @@ import '../chunk-5KRRJNQO.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-7QTPJDRF.js';
-import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2XWFWNDT.js';
 import '../chunk-NUZHC6MM.js';

package/dist/ContrastBadge/index.js

@@ -1,6 +1,6 @@
-export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-WDRYUMN6.js';
-import '../chunk-KYIAFNU7.js';
+export { ContrastBadge, ContrastLevelTag, contrastLevel, contrastRatio, formatContrastRatio } from '../chunk-BSAQE7PO.js';
 import '../chunk-7W3LYIOC.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ContrastHelp/index.js

@@ -1,8 +1,8 @@
-export { ContrastHelp } from '../chunk-3633T7EJ.js';
-import '../chunk-WDRYUMN6.js';
-import '../chunk-KYIAFNU7.js';
+export { ContrastHelp } from '../chunk-WSV3MBOE.js';
+import '../chunk-BSAQE7PO.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-7W3LYIOC.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';

package/dist/DataTable/index.js

@@ -11,8 +11,8 @@ import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-LODRX4FU.js';
 import '../chunk-7QTPJDRF.js';
-import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2XWFWNDT.js';
 import '../chunk-NUZHC6MM.js';

package/dist/DataView/index.js

@@ -21,8 +21,8 @@ import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-LODRX4FU.js';
 import '../chunk-7QTPJDRF.js';
-import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2XWFWNDT.js';
 import '../chunk-NUZHC6MM.js';

package/dist/DateTimePicker/index.js

@@ -2,8 +2,8 @@ export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-2BDPR4
 import '../chunk-GXQ3B46I.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-7QTPJDRF.js';
-import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2XWFWNDT.js';
 import '../chunk-NUZHC6MM.js';

package/dist/DeepWorkCard/DeepWorkCard.d.ts

@@ -0,0 +1,85 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type StepListStep } from '../Stepper/index.js';
+/**
+ * Where a long, bounded run stands: `starting` before its first step,
+ * `running` while it works, `waiting` on the person's approval of a change it
+ * prepared, `finished`, `stopped` (by the person, or at one of its limits)
+ * and `failed` (the system could not finish it).
+ */
+export type DeepWorkState = 'starting' | 'running' | 'waiting' | 'finished' | 'stopped' | 'failed';
+export declare const DEEP_WORK_STATES: readonly ["starting", "running", "waiting", "finished", "stopped", "failed"];
+/** The words each state is said with, on the card's state tag. */
+export type DeepWorkStateLabels = Record<DeepWorkState, string>;
+export declare const DEEP_WORK_STATE_LABELS: DeepWorkStateLabels;
+/** One of the run's limits, as a meter: time against its deadline, calls against their cap, budget used. */
+export interface DeepWorkMeasure {
+    /** What tells two measures apart, unique within the card. */
+    key: string;
+    /** What is measured, in a word or two: "Time", "Crewlet calls", "Budget used". */
+    label: string;
+    value: number;
+    /** The limit. A run's measure always has one. */
+    max: number;
+    /** The reading in words, at the legend's end: "4m of 20m", "12 of 60", "34%". */
+    hint: string;
+    /** The reading for a screen reader, where the hint abbreviates: "4 minutes of 20". Defaults to `hint`. */
+    valueText?: string | undefined;
+}
+export interface DeepWorkCardLabels {
+    /** The card's title. */
+    title: string;
+    /** Names the activity lines for a screen reader. */
+    activity: string;
+    /** Names the nested steps for a screen reader. */
+    steps: string;
+    /** The folded steps' title, by their count. */
+    stepCount: (count: number) => string;
+}
+export declare const DEEP_WORK_CARD_LABELS: DeepWorkCardLabels;
+export interface DeepWorkCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    state: DeepWorkState;
+    /** What the run was asked to do, in the person's or the assistant's words. */
+    goal: ReactNode;
+    /** The run's limits, each drawn as a compact meter in the order given. */
+    measures?: readonly DeepWorkMeasure[] | undefined;
+    /**
+     * The run's own latest account of itself, oldest first: a command it ran,
+     * a file it wrote. Drawn in the mono face, one line each, never wrapped
+     * into a paragraph. The consumer bounds how many it keeps.
+     */
+    activity?: readonly string[] | undefined;
+    /** The steps the run took, nested under it. */
+    steps?: readonly StepListStep[] | undefined;
+    /**
+     * Up to this many steps are drawn open; more fold behind one disclosure
+     * named by their count, so a long run stays one card. 3 by default.
+     */
+    stepsOpenAt?: number | undefined;
+    /**
+     * One sentence at the card's foot, in the state's tone: why a run stopped
+     * or failed, or what a waiting run waits on.
+     */
+    note?: ReactNode;
+    /** The state words on the card's tag. */
+    stateLabels?: Partial<DeepWorkStateLabels> | undefined;
+    labels?: Partial<DeepWorkCardLabels> | undefined;
+}
+/**
+ * A long, bounded run an assistant switched to: its goal, where it stands,
+ * how much of each limit it has used, what it is doing now and the steps it
+ * took, on the product's `StatusCard`.
+ *
+ * UPDATED IN PLACE. The run is re-sent as it moves, so every part is drawn
+ * from props and nothing animates on arrival: a meter's fill moves, a line of
+ * activity is added at the end, and the reader's open or closed steps stay as
+ * they left them.
+ *
+ * NOT A LIVE REGION. The card changes every second while the run works, so
+ * it announces nothing itself; the note at its foot is the strip's own status
+ * (an alert for a failure), which changes only when the run's state does.
+ *
+ * THE LIMITS ARE METERS ON THE SPENT RAMP: time, calls and budget are all
+ * spent towards a ceiling, so a run near one reads as near it without the
+ * consumer judging the number.
+ */
+export declare function DeepWorkCard({ state, goal, measures, activity, steps, stepsOpenAt, note, stateLabels, labels: labelOverrides, className, ...rest }: DeepWorkCardProps): import("react").JSX.Element;

package/dist/DeepWorkCard/index.d.ts

@@ -0,0 +1,3 @@
+import './DeepWorkCard.css';
+export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATE_LABELS, DEEP_WORK_STATES, DeepWorkCard } from './DeepWorkCard.js';
+export type { DeepWorkCardLabels, DeepWorkCardProps, DeepWorkMeasure, DeepWorkState, DeepWorkStateLabels, } from './DeepWorkCard.js';

package/dist/DeepWorkCard/index.js

@@ -0,0 +1,17 @@
+export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-LA4PX7Z6.js';
+import '../chunk-Z4EKUMZW.js';
+import '../chunk-RQFRRPV6.js';
+import '../chunk-NLI7OVO2.js';
+import '../chunk-WW4E5EUS.js';
+import '../chunk-KYIAFNU7.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-MKKX6N7C.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-P4YORMRZ.js';
+import '../chunk-ZYO2QFU6.js';
+import '../chunk-5KRRJNQO.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-7QTPJDRF.js';
+import '../chunk-XSPCITPN.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/DeepWorkCard-DGHRIQDM.css

@@ -0,0 +1,80 @@
+/*
+ * A deep run on the product's StatusCard: the goal with its mark, the limits
+ * as compact meters on a two-column grid that folds to one, the latest
+ * activity as mono lines in an inset well, then the steps. Only the body's
+ * own parts are said here; the card, its head, its tag and its strip are
+ * StatusCard's.
+ */
+.crewlet-deep-work-card .crewlet-status-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+/* The goal: the mark on the first line, the words wrapping beside it. */
+.crewlet-deep-work-card__goal {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: start;
+  gap: var(--spacing-2);
+}
+
+.crewlet-deep-work-card__goal-mark {
+  height: calc(var(--font-size-compact) * var(--font-line-height-normal));
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-deep-work-card__goal-text {
+  margin: 0;
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+}
+
+/* THE LIMITS SIDE BY SIDE where the card has room, one under another in a
+   narrow drawer, so no legend is cut to fit. */
+.crewlet-deep-work-card__measures {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+  gap: var(--spacing-2) var(--spacing-4);
+}
+
+/* THE LATEST ACTIVITY: one line each, never wrapped into a paragraph, cut
+   with an ellipsis rather than widening the card; the whole line is its
+   title for a pointer and its text for a screen reader. */
+.crewlet-deep-work-card__activity {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  margin: 0;
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+  list-style: none;
+}
+
+.crewlet-deep-work-card__line {
+  min-width: 0;
+  overflow: hidden;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* The newest line is what the run is doing now, in the primary ink. */
+.crewlet-deep-work-card__line:last-child {
+  color: var(--color-text-primary);
+}
+
+.crewlet-deep-work-card__line code {
+  font: inherit;
+}
+
+.crewlet-deep-work-card__steps {
+  min-width: 0;
+}

package/dist/DocTabsEditor/index.js

@@ -6,8 +6,8 @@ import '../chunk-PQADV6P6.js';
 import '../chunk-2G355KDJ.js';
 import '../chunk-LODRX4FU.js';
 import '../chunk-7QTPJDRF.js';
-import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-2XWFWNDT.js';
 import '../chunk-NUZHC6MM.js';

package/dist/DownloadButton/DownloadButton.d.ts

@@ -39,6 +39,12 @@ export interface DownloadButtonBaseProps {
     size?: ButtonSize | undefined;
     variant?: ButtonVariant | undefined;
     title?: string | undefined;
+    /**
+     * The control's name where several stand side by side, such as one per
+     * file in a list: "Download report.csv". It must contain the visible label,
+     * so a reader who says the label to a voice control still finds it.
+     */
+    'aria-label'?: string | undefined;
     /**
      * Nothing to offer yet, such as an export of an empty table. Give a `title`
      * that says why, so the control is never a dead button with no reason.
@@ -66,4 +72,4 @@ export type DownloadButtonProps = DownloadButtonBaseProps & DownloadButtonSource
  * refusal holds until the next press, and every attempt replaces the status
  * message, so a second identical refusal is still announced.
  */
-export declare function DownloadButton({ text, file, filename, mime, label, startedLabel, failedLabel, startedMessage, failedMessage, size, variant, title, disabled, resetMs, failedResetMs, className, }: DownloadButtonProps): import("react").JSX.Element;
+export declare function DownloadButton({ text, file, filename, mime, label, startedLabel, failedLabel, startedMessage, failedMessage, size, variant, title, 'aria-label': ariaLabel, disabled, resetMs, failedResetMs, className, }: DownloadButtonProps): import("react").JSX.Element;

package/dist/DownloadButton/index.js

@@ -1,4 +1,4 @@
-export { DownloadButton } from '../chunk-LG6TUGET.js';
+export { DownloadButton } from '../chunk-NSCYGUDG.js';
 import '../chunk-YNRKVY7X.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-7QTPJDRF.js';

package/dist/FileList/FileList.d.ts

@@ -0,0 +1,42 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+/** One file in a list. */
+export interface FileListItem {
+    /** What tells two files apart, unique within the list. */
+    id: string;
+    /** The file's name, as it will be saved. */
+    name: string;
+    /** What the file is, in words: "PNG image", "CSV file". */
+    type: string;
+    /** How large it is, already formatted: "120 KB". */
+    size: string;
+    /**
+     * The address of an image to preview it from, or nothing for no preview.
+     *
+     * DRAWN ONLY AS AN `<img>`. An image element renders a picture and runs no
+     * script, so a preview of an SVG that carries one is still only a picture.
+     * The primitive never draws a file's markup inline and never embeds it in
+     * a frame or an object. A preview that fails to load falls back to the
+     * file's mark.
+     */
+    preview?: string | undefined;
+    /** The file's control at the row's end, usually a `DownloadButton`. */
+    action?: ReactNode;
+}
+export interface FileListProps extends Omit<HTMLAttributes<HTMLUListElement>, 'children'> {
+    files: readonly FileListItem[];
+    /** Names the list for a screen reader: "Files". REQUIRED, since a list of files has no heading of its own. */
+    label: string;
+}
+/**
+ * Files handed to the reader: each with its name, what it is, how large it is
+ * and its download, and an image with a preview under its row.
+ *
+ * A PREVIEW IS ONLY EVER A PICTURE. It is an `<img>` with no alternative text
+ * of its own (the row's name already names it) and no referrer, so an SVG
+ * delivered by a run is drawn without running anything it carries, and a
+ * file's markup never reaches the page as markup.
+ *
+ * AN UNORDERED LIST named by `label`, one item per file, so a reader hears how
+ * many there are before the first.
+ */
+export declare function FileList({ files, label, className, ...rest }: FileListProps): import("react").JSX.Element;

package/dist/FileList/index.d.ts

@@ -0,0 +1,3 @@
+import './FileList.css';
+export { FileList } from './FileList.js';
+export type { FileListItem, FileListProps } from './FileList.js';

package/dist/FileList/index.js

@@ -0,0 +1,3 @@
+export { FileList } from '../chunk-CZXF6EFK.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';