@crewlethq/ui 0.61.0 → 0.63.0

package/dist/ValueField/ValueField.d.ts

@@ -0,0 +1,117 @@
+import { type ReactNode } from 'react';
+/**
+ * What a value field holds, which decides its control and what it does to a
+ * value on its way through.
+ *
+ * - `text`: free text, spaces kept.
+ * - `multiline`: prose in a textarea, every space and newline kept, spell check on.
+ * - `secret`: a credential, masked unless the value is a whole reference.
+ * - `url`: an address, wearing an `https://` affix, whitespace dropped.
+ * - `id` and `email`: one token, whitespace dropped.
+ * - `choice` and `handle`: one of `choices`, picked from a listbox.
+ */
+export type ValueFieldKind = 'text' | 'multiline' | 'secret' | 'url' | 'id' | 'choice' | 'handle' | 'email';
+/** One option of a `choice` or `handle` field. */
+export interface ValueFieldChoice {
+    value: string;
+    label: string;
+    /** A sentence saying what picking this one does: drawn under the option, and on the help line once chosen. */
+    hint?: string | undefined;
+}
+/** The words a value field draws itself. */
+export interface ValueFieldLabels {
+    /** Names the completion list. "Secrets" by default. */
+    references: string;
+    /** The choice placeholder while nothing is chosen. "Choose one" by default. */
+    choose: string;
+}
+export interface ValueFieldProps {
+    label: string;
+    /** A mark drawn before the label, such as a third party's own logo. */
+    mark?: ReactNode;
+    kind?: ValueFieldKind | undefined;
+    value: string;
+    onChange: (value: string) => void;
+    /** Where the value comes from, or what shape it takes. */
+    help?: ReactNode;
+    /** Why the last value was refused. */
+    error?: ReactNode;
+    placeholder?: string | undefined;
+    /** What a `choice` or `handle` field offers; ignored by every other kind. */
+    choices?: readonly ValueFieldChoice[] | undefined;
+    disabled?: boolean | undefined;
+    /**
+     * Whether an answer is required. REQUIRED IS THE UNMARKED DEFAULT: `false`
+     * says "(optional)" beside the label, `true` sets `aria-required` and draws
+     * nothing unless `markRequired` says the requiredness is news. Most fields
+     * on a form are required, and marking them all is noise that teaches a
+     * reader to skip the note.
+     */
+    required?: boolean | undefined;
+    /**
+     * Says "(required)" beside the label, for a field whose requiredness is
+     * NEWS: one that appeared because of an answer above it. Read only with
+     * `required`.
+     */
+    markRequired?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    /**
+     * The stored entry names offered when somebody types `$`, completed into a
+     * whole `${NAME}`. NAMES ONLY: a value never reaches the field, so a list
+     * that could not be assembled leaves the field exactly as it was.
+     */
+    references?: readonly string[] | undefined;
+    /**
+     * Called as the completion list is about to open, so the caller can make
+     * sure the names are current. On the way in only, never per keystroke.
+     */
+    onReferencesNeeded?: (() => void) | undefined;
+    /**
+     * Whether a value is exactly one reference, which keeps a `secret` field
+     * readable and lets a `url` field's affix step aside. [isWholeReference]
+     * by default; a product with its own reference grammar passes it here.
+     */
+    isReference?: ((value: string) => boolean) | undefined;
+    /** How many lines a `multiline` field shows before it scrolls. Three by default. */
+    rows?: number | undefined;
+    /** Show the help line only while the field has focus. See [FormField]. */
+    helperOnFocus?: boolean | undefined;
+    labels?: Partial<ValueFieldLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * A labelled value: [FormField] with the control a kind of value needs, and
+ * the rules every form holding such values otherwise rewrites.
+ *
+ * A SECRET FIELD IS A PASSWORD FIELD, and that is not decoration: `type` is
+ * what keeps the value out of an autofill store, out of a screenshot and out
+ * of the accessibility tree as text.
+ *
+ * A REFERENCE IS NOT A CREDENTIAL, so it is not masked. A secret whose value
+ * is wholly a `${NAME}` holds the NAME of a stored entry, and the reader has
+ * to be able to see which entry it points at. Typing over it masks again the
+ * moment it stops being a whole reference, so a credential is never on screen.
+ *
+ * TYPING `$` OFFERS THE STORED ENTRIES, from `references`, ranked closest
+ * first and written in as a whole `${NAME}` with the caret after it. Tab and
+ * Enter take the highlighted name, Escape closes the list and keeps what was
+ * typed, and a press outside closes only the list.
+ *
+ * A URL FIELD WEARS ITS SCHEME. An `https://` affix sits inside the box, is
+ * read once as part of the value, and is written into it. It steps aside for
+ * a value that carries `http://` and for one starting with `$` (a reference
+ * carries its own scheme once it resolves), and a pasted `https://` is not
+ * doubled onto it.
+ *
+ * A SINGLE TOKEN TAKES NO WHITESPACE. A `url`, `id` or `email` drops it as it
+ * is typed or pasted: a space around one is invisible in the box and fatal
+ * wherever it is used. No field asserts `type="email"`, because the browser
+ * would refuse a reference for having no "@" in it; `inputMode` still offers
+ * the right keyboard.
+ *
+ * A CHOICE IS THE LISTBOX, which can draw each choice's hint under it. The
+ * chosen one's hint also joins the help line, and a stored answer the list
+ * no longer offers keeps a row of its own rather than vanishing into a
+ * different selection.
+ */
+export declare function ValueField({ label, mark, kind, value, onChange, help, error, placeholder, choices, disabled, required, markRequired, autoFocus, references, onReferencesNeeded, isReference, rows, helperOnFocus, labels, className, }: ValueFieldProps): import("react").JSX.Element;

package/dist/ValueField/index.d.ts

@@ -0,0 +1,10 @@
+import '../Input/Input.css';
+import '../VisuallyHidden/VisuallyHidden.css';
+import '../HitArea/HitArea.css';
+import '../Combobox/Combobox.css';
+import '../Select/Select.css';
+import './ValueField.css';
+export { ValueField } from './ValueField.js';
+export type { ValueFieldChoice, ValueFieldKind, ValueFieldLabels, ValueFieldProps } from './ValueField.js';
+export { REFERENCE_NAME_PATTERN, completeReference, isWholeReference, rankReferences, referenceAt, urlSchemeOf, } from './references.js';
+export type { ReferenceQuery } from './references.js';

package/dist/ValueField/index.js

@@ -0,0 +1,15 @@
+export { REFERENCE_NAME_PATTERN, ValueField, completeReference, isWholeReference, rankReferences, referenceAt, urlSchemeOf } from '../chunk-OD3Z6QKN.js';
+import '../chunk-XQZ6EWOE.js';
+import '../chunk-PK2P2QH6.js';
+import '../chunk-7KHM2FZH.js';
+import '../chunk-TLIJG4TP.js';
+import '../chunk-PGCLHYVP.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-2YTOOH3A.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-2XWFWNDT.js';
+import '../chunk-NUZHC6MM.js';
+import '../chunk-UT6CW3C7.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ValueField/references.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Completing a `${NAME}` reference from a list of stored entry names.
+ *
+ * A value field takes either a value or a reference to one, and the reference
+ * has to be typed exactly: a name off by a character resolves to nothing,
+ * which reads as configured on every surface while whatever it feeds refuses
+ * every use. These helpers are what lets a field offer the names it knows
+ * rather than leaving the reader to copy one across from another screen.
+ */
+/** The shape of a reference's name: a letter or underscore, then letters, digits and underscores. */
+export declare const REFERENCE_NAME_PATTERN = "[A-Za-z_][A-Za-z0-9_]*";
+/**
+ * Whether a value is exactly one `${NAME}` reference, trimmed first.
+ *
+ * This is the default a [ValueField] asks when deciding whether a secret's
+ * value is a name (readable) or a credential (masked). A product whose
+ * reference grammar is stricter passes its own predicate as `isReference`.
+ */
+export declare function isWholeReference(value: string): boolean;
+/** Where a reference is being typed, and what has been typed of it. */
+export interface ReferenceQuery {
+    /** Index of the `$` that opens it. */
+    start: number;
+    /** What follows the `$`, with any `{` stripped. */
+    query: string;
+}
+/**
+ * The `${...}` under the caret, or null.
+ *
+ * IT SCANS BACK FROM THE CARET rather than matching the whole value, because
+ * a field can hold a reference among other text and the one being edited is
+ * the one being completed. The scan stops at whitespace and at a `}`: the
+ * first because no name contains one, the second because a reference that is
+ * already closed is finished, and offering to complete it again would replace
+ * a name somebody had chosen.
+ */
+export declare function referenceAt(value: string, caret: number): ReferenceQuery | null;
+/**
+ * The names ordered by how closely they match what has been typed.
+ *
+ * Three tiers, in the order somebody means them: a name that STARTS with the
+ * query, then one that CONTAINS it, then one whose letters appear in order.
+ * Case is ignored, because a name is upper snake case and nobody holds shift
+ * to filter a list. An empty query keeps every name in the order given: the
+ * point of typing `$` alone is to see what there is.
+ */
+export declare function rankReferences(names: readonly string[], query: string): string[];
+/**
+ * The value with the chosen name written in as a whole `${NAME}`, and where
+ * the caret goes.
+ *
+ * CLOSED BRACES, always, and the caret lands after them: a reference resolves
+ * only when it is whole, and a half-written one is a literal that reaches its
+ * destination as the characters somebody typed.
+ */
+export declare function completeReference(value: string, caret: number, at: ReferenceQuery, name: string): {
+    value: string;
+    caret: number;
+};
+/**
+ * The scheme a value already carries, `https://`, `http://` or empty.
+ *
+ * Matched without regard to case, because a pasted address is whatever the
+ * address bar had.
+ */
+export declare function urlSchemeOf(value: string): '' | 'https://' | 'http://';

package/dist/ValueField-EIBD6RYS.css

@@ -0,0 +1,13 @@
+/*
+ * ValueField: a labelled value with the control its kind needs.
+ *
+ * The row is FormField's and every control is the package's own; what is
+ * drawn here is the mark a label may carry, such as a third party's logo,
+ * set on the label's line ahead of its words.
+ */
+
+.crewlet-value-field__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}

package/dist/VersionCompare/index.js

@@ -1,18 +1,18 @@
-export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-NL72YZWF.js';
+export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-ISHLFPNN.js';
 import '../chunk-AOFVXE6V.js';
 import '../chunk-OOC7Q67K.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-PPUR46MK.js';
 import '../chunk-5KRRJNQO.js';
 import '../chunk-PQADV6P6.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/{chunk-53NTMTRM.js → chunk-6IGIYOTV.js}

@@ -1,5 +1,5 @@
 import { useThemePreference, useDensityPreference } from './chunk-Z24ZUSTX.js';
-import { SegmentedControl } from './chunk-3BQWARG2.js';
+import { SegmentedControl } from './chunk-F7VBYCW2.js';
 import { SunGlyph, MonitorGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/chunk-CZXF6EFK.js

@@ -0,0 +1,52 @@
+import { VisuallyHidden } from './chunk-UT6CW3C7.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './FileList-TGDNV2QS.css';
+import { useState } from 'react';
+import { FileTextGlyph, ImageGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function FileRow({ file }) {
+  const [broken, setBroken] = useState(false);
+  const preview = file.preview !== void 0 && file.preview !== "" && !broken ? file.preview : void 0;
+  return /* @__PURE__ */ jsxs("li", { className: "crewlet-file-list__file", children: [
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-file-list__row", children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-file-list__mark", "aria-hidden": "true", children: file.preview === void 0 ? /* @__PURE__ */ jsx(FileTextGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ImageGlyph, { size: "sm" }) }),
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-file-list__text", children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-file-list__name", title: file.name, children: file.name }),
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-file-list__meta", children: [
+          file.type,
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: "," }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }),
+          file.size
+        ] })
+      ] }),
+      file.action === void 0 || file.action === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-file-list__action", children: file.action })
+    ] }),
+    preview === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-file-list__preview", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: preview,
+        alt: "",
+        loading: "lazy",
+        decoding: "async",
+        referrerPolicy: "no-referrer",
+        draggable: false,
+        onError: () => setBroken(true)
+      }
+    ) })
+  ] });
+}
+function FileList({ files, label, className, ...rest }) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const file of files) {
+    if (seen.has(file.id)) throw new RangeError(`FileList file ids must be unique; "${file.id}" is used twice`);
+    seen.add(file.id);
+  }
+  return (
+    /* The role is restated for WebKit, which drops it from a list with no markers. */
+    /* eslint-disable-next-line jsx-a11y/no-redundant-roles */
+    /* @__PURE__ */ jsx("ul", { ...rest, role: "list", "aria-label": label, className: cx("crewlet-file-list", className), children: files.map((file) => /* @__PURE__ */ jsx(FileRow, { file }, file.id)) })
+  );
+}
+
+export { FileList };

package/dist/{chunk-5ZGJ22CO.js → chunk-DHIO6Q75.js}

@@ -1,4 +1,4 @@
-import { HuePicker } from './chunk-NRMXUNLR.js';
+import { HuePicker } from './chunk-QCVAVAF6.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { CharacterPicker } from './chunk-SNQRGH4A.js';

package/dist/{chunk-3BQWARG2.js → chunk-F7VBYCW2.js}

@@ -1,4 +1,4 @@
-import { tabId } from './chunk-VN3DCUED.js';
+import { tabId } from './chunk-27JCHL64.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { Count } from './chunk-5KRRJNQO.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';

package/dist/{chunk-5G76O23M.js → chunk-IJIC4COR.js}

@@ -1,4 +1,4 @@
-import { SegmentedControl } from './chunk-3BQWARG2.js';
+import { SegmentedControl } from './chunk-F7VBYCW2.js';
 import { Button } from './chunk-7QTPJDRF.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './MergeConflicts-O44ESH4T.css';

package/dist/{chunk-RPHQNXE5.js → chunk-IOZFPFQS.js}

@@ -1,4 +1,4 @@
-import { Combobox } from './chunk-VC2M2E7N.js';
+import { Combobox } from './chunk-PK2P2QH6.js';
 import { PRINCIPAL_KINDS, PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PrincipalPicker-7NNZTGUP.css';

package/dist/{chunk-NL72YZWF.js → chunk-ISHLFPNN.js}

@@ -1,5 +1,5 @@
 import { diffLines, diffStat, collapseDiff, DiffSummary, DiffView } from './chunk-AOFVXE6V.js';
-import { SegmentedControl } from './chunk-3BQWARG2.js';
+import { SegmentedControl } from './chunk-F7VBYCW2.js';
 import { EmptyState } from './chunk-PPUR46MK.js';
 import { useHeadingLevel, headingTag, nextHeadingLevel, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-5KW63GZ3.js → chunk-JAOJLEYB.js}

@@ -1,5 +1,5 @@
 import { Tooltip } from './chunk-I33UIUZD.js';
-import { SegmentedControl } from './chunk-3BQWARG2.js';
+import { SegmentedControl } from './chunk-F7VBYCW2.js';
 import { ArtifactIcon } from './chunk-AVL52EME.js';
 import { isApplePlatform, Kbd } from './chunk-ACRRRPWT.js';
 import { Menu } from './chunk-LODRX4FU.js';

package/dist/{chunk-MOW65OIJ.js → chunk-JPVORBWC.js}

@@ -1,5 +1,5 @@
 import { FileDrop, FilePickButton } from './chunk-2JHGPXYG.js';
-import { contrastRatio } from './chunk-WDRYUMN6.js';
+import { contrastRatio } from './chunk-BSAQE7PO.js';
 import { normalizeHex } from './chunk-7W3LYIOC.js';
 import { Button } from './chunk-7QTPJDRF.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';

package/dist/chunk-KYTOEWJD.js

@@ -0,0 +1,56 @@
+import { Tag } from './chunk-KYIAFNU7.js';
+import { Spinner } from './chunk-XSPCITPN.js';
+import { VisuallyHidden } from './chunk-UT6CW3C7.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './AttachmentChip-XF4KPQ3G.css';
+import { useState } from 'react';
+import { CircleAlertGlyph, ImageGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var ATTACHMENT_CHIP_LABELS = {
+  uploading: "Uploading",
+  failed: "Not attached",
+  remove: (name) => `Remove ${name}`
+};
+function AttachmentChip({
+  name,
+  preview,
+  state = "ready",
+  onRemove,
+  labels: overrides,
+  className,
+  ...rest
+}) {
+  const labels = overrides ? { ...ATTACHMENT_CHIP_LABELS, ...overrides } : ATTACHMENT_CHIP_LABELS;
+  const [broken, setBroken] = useState(false);
+  const picture = preview !== void 0 && preview !== "" && !broken;
+  const mark = state === "uploading" ? /* @__PURE__ */ jsx(Spinner, { size: "xs" }) : state === "failed" ? /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "xs" }) : picture ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      className: "crewlet-attachment-chip__thumb",
+      src: preview,
+      alt: "",
+      decoding: "async",
+      referrerPolicy: "no-referrer",
+      draggable: false,
+      onError: () => setBroken(true)
+    }
+  ) : /* @__PURE__ */ jsx(ImageGlyph, { size: "xs" });
+  const said = state === "ready" ? "" : `, ${labels[state]}`;
+  const common = {
+    ...rest,
+    className: cx("crewlet-attachment-chip", `crewlet-attachment-chip--${state}`, className),
+    size: "sm",
+    appearance: "outline",
+    variant: state === "failed" ? "danger" : "neutral",
+    leadingIcon: mark,
+    title: name
+  };
+  const words = /* @__PURE__ */ jsxs(Fragment, { children: [
+    name,
+    said === "" ? null : /* @__PURE__ */ jsx(VisuallyHidden, { children: said })
+  ] });
+  return onRemove === void 0 ? /* @__PURE__ */ jsx(Tag, { ...common, children: words }) : /* @__PURE__ */ jsx(Tag, { ...common, onRemove, removeAriaLabel: labels.remove(name), children: words });
+}
+
+export { ATTACHMENT_CHIP_LABELS, AttachmentChip };

package/dist/chunk-LA4PX7Z6.js

@@ -0,0 +1,118 @@
+import { StepList } from './chunk-Z4EKUMZW.js';
+import { Meter } from './chunk-RQFRRPV6.js';
+import { ReceiptStrip } from './chunk-NLI7OVO2.js';
+import { StatusCard } from './chunk-WW4E5EUS.js';
+import { Disclosure } from './chunk-P4YORMRZ.js';
+import { Spinner } from './chunk-XSPCITPN.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './DeepWorkCard-DGHRIQDM.css';
+import { useId } from 'react';
+import { TelescopeGlyph, CircleAlertGlyph, CircleStopGlyph, CircleCheckGlyph, ClockGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEEP_WORK_STATES = [
+  "starting",
+  "running",
+  "waiting",
+  "finished",
+  "stopped",
+  "failed"
+];
+var DEEP_WORK_STATE_LABELS = {
+  starting: "Starting",
+  running: "Working",
+  waiting: "Waiting for your approval",
+  finished: "Finished",
+  stopped: "Stopped",
+  failed: "Failed"
+};
+var STATUS = {
+  starting: { tone: "info", icon: /* @__PURE__ */ jsx(Spinner, { size: "xs" }) },
+  running: { tone: "info", icon: /* @__PURE__ */ jsx(Spinner, { size: "xs" }) },
+  waiting: { tone: "warning", icon: /* @__PURE__ */ jsx(ClockGlyph, { size: "xs" }) },
+  finished: { tone: "success", icon: /* @__PURE__ */ jsx(CircleCheckGlyph, { size: "xs" }) },
+  stopped: { tone: "neutral", icon: /* @__PURE__ */ jsx(CircleStopGlyph, { size: "xs" }) },
+  failed: { tone: "danger", icon: /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "xs" }) }
+};
+var NOTE_TONE = {
+  starting: "info",
+  running: "info",
+  waiting: "warning",
+  finished: "success",
+  stopped: "neutral",
+  failed: "danger"
+};
+var SETTLED = /* @__PURE__ */ new Set(["finished", "stopped", "failed"]);
+var DEEP_WORK_CARD_LABELS = {
+  title: "Deep work",
+  activity: "Latest activity",
+  steps: "Steps",
+  stepCount: (count) => count === 1 ? "1 step" : `${count} steps`
+};
+function DeepWorkCard({
+  state,
+  goal,
+  measures = [],
+  activity = [],
+  steps = [],
+  stepsOpenAt = 3,
+  note,
+  stateLabels,
+  labels: labelOverrides,
+  className,
+  ...rest
+}) {
+  const id = useId();
+  const labels = labelOverrides ? { ...DEEP_WORK_CARD_LABELS, ...labelOverrides } : DEEP_WORK_CARD_LABELS;
+  const words = stateLabels ? { ...DEEP_WORK_STATE_LABELS, ...stateLabels } : DEEP_WORK_STATE_LABELS;
+  const hasNote = !(note === void 0 || note === null || note === false || note === "");
+  const list = steps.length > 0 ? /* @__PURE__ */ jsx(StepList, { label: labels.steps, steps }) : null;
+  return /* @__PURE__ */ jsxs(
+    StatusCard,
+    {
+      ...rest,
+      className: cx("crewlet-deep-work-card", `crewlet-deep-work-card--${state}`, className),
+      title: labels.title,
+      status: { label: words[state], ...STATUS[state] },
+      settled: SETTLED.has(state),
+      strip: hasNote ? /* @__PURE__ */ jsx(ReceiptStrip, { tone: NOTE_TONE[state], children: note }) : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-deep-work-card__goal", children: [
+          /* @__PURE__ */ jsx(TelescopeGlyph, { size: "sm", className: "crewlet-deep-work-card__goal-mark" }),
+          /* @__PURE__ */ jsx("p", { className: "crewlet-deep-work-card__goal-text", children: goal })
+        ] }),
+        measures.length > 0 ? /* @__PURE__ */ jsx("div", { className: "crewlet-deep-work-card__measures", children: measures.map((measure) => /* @__PURE__ */ jsx(
+          Meter,
+          {
+            size: "compact",
+            label: measure.label,
+            value: measure.value,
+            max: measure.max,
+            hint: measure.hint,
+            valueText: measure.valueText ?? measure.hint
+          },
+          measure.key
+        )) }) : null,
+        activity.length > 0 ? (
+          /* The role is restated for WebKit, which drops it from a list with no markers. */
+          /* eslint-disable-next-line jsx-a11y/no-redundant-roles */
+          /* @__PURE__ */ jsx("ol", { role: "list", "aria-label": labels.activity, className: "crewlet-deep-work-card__activity", children: activity.map((line, index) => /* @__PURE__ */ jsx("li", { className: "crewlet-deep-work-card__line", title: line, children: /* @__PURE__ */ jsx("code", { children: line }) }, `${index}:${line}`)) })
+        ) : null,
+        list === null ? null : steps.length > stepsOpenAt ? /* @__PURE__ */ jsx(
+          Disclosure,
+          {
+            id: `${id}-steps`,
+            className: "crewlet-deep-work-card__steps",
+            size: "compact",
+            headingLevel: "none",
+            title: labels.stepCount(steps.length),
+            defaultOpen: false,
+            children: list
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "crewlet-deep-work-card__steps", children: list })
+      ]
+    }
+  );
+}
+
+export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard };

package/dist/{chunk-LG6TUGET.js → chunk-NSCYGUDG.js}

@@ -23,6 +23,7 @@ function DownloadButton({
   size = "small",
   variant = "ghost",
   title,
+  "aria-label": ariaLabel,
   disabled,
   resetMs,
   failedResetMs = null,
@@ -61,6 +62,7 @@ function DownloadButton({
         loading: fetching,
         disabled,
         title: state === "failed" ? failedMessage : title,
+        "aria-label": ariaLabel,
         children: state === "started" ? startedLabel : state === "failed" ? failedLabel : label
       }
     ),