@crewlethq/ui 0.65.1 → 0.67.0

package/README.md

@@ -205,6 +205,22 @@ 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.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.
+
+**`ProductMark` mounts a 16 pixel grid drawing below 24 px** and takes `drawing` (`ProductMarkDrawing`: `auto`, `small` or `master`). `auto` reads `size`; a size it cannot measure in px (the default `1em`) keeps the master, so pass `drawing="small"` for a mark set in a line of body text. Soon is now derived from either drawing, and under forced colours a mark draws its one colour form in the system colours.
+
+**`ThinkingIndicator` moves the new Assistant mark.** Its main spark makes a quarter turn about its own centre, tucking to 0.8 through the middle of the turn, while its companion twinkles, over `--motion-duration-spark` (1.6s, new in `@crewlethq/tokens`). Under reduced motion it holds a still working pose (the spark tucked, the companion dimmed) rather than the idle mark.
+
+## Changes in 0.65.0
+
+**`ProposalCard` takes `tone`, `confirmation` and `details`.** `tone="danger"` (`ProposalTone`, `PROPOSAL_TONES`) marks a change that removes or discards something: while the card waits on the person or carries the change out, Card's danger rail runs down its leading edge, the title is set in the danger ink (AA in both palettes) and the primary is the danger button. A settled card steps back with no tone, and the Tag keeps saying the state. `confirmation` (`{ label }`, `ProposalConfirmation`) draws a `Checkbox` above the decision: the primary is held soft disabled, described by `labels.confirmationNeeded` ("Check the confirmation above first"), until it is ticked. The tick clears when the card settles or is handed another proposal in place (another `title` or `approveLabel`), and `approveBlocked` still outranks it. `details` is the precise request behind the change, in a compact `Disclosure` titled `labels.details` ("Technical details"), collapsed by default and mounted only once opened, at the foot of the body above the note.
+
+**A `ProposalCard` primary that has just appeared takes no pointer for 500ms**: when the card arrives, when it is handed another proposal and when it returns to a decision (a step-up, a refused approval). A press meant for the card it replaced, such as the second press of a double click, can no longer approve it, and it shows no hover until then. Focus and the keyboard reach it at once, and it is never drawn or announced as disabled. The button carries `data-arming` while it arms.
+
+**`StatusCard` takes `rail`**, Card's own rail down the leading edge, for a risk the Tag does not carry.
+
 ## 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").

package/dist/AppShell/index.js

@@ -1,4 +1,4 @@
-export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-E55DKVY7.js';
+export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-GJ7VIQWL.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-T73DMDU4.js';
 export { RESIZE_HANDLE_LARGE_STEP, RESIZE_HANDLE_STEP, ResizeHandle, clampSize, useAppShellAside, useAppShellPeek } from '../chunk-PIYJNCN7.js';

package/dist/{AppShell-LZQA3XU4.css → AppShell-2IBUS4TH.css}

@@ -59,7 +59,12 @@
      past it. A page that can also scroll as a whole carries the rail off the
      top of the window. */
   height: 100dvh;
-  overflow: hidden;
+  /* CLIPPED, NOT SCROLLABLE. `overflow: hidden` is still a scroll container:
+     a focus or a scrollIntoView on anything that reaches past the viewport
+     scrolled the whole shell up, the frame showing as a band under it, and
+     nothing a reader could do scrolled it back. `clip` cuts the same edge
+     and offers nothing to scroll (SidePanel's flush body, the same rule). */
+  overflow: clip;
   /* The FRAME, the lowest rung: what the rail stands on and what shows round
      the sheet's inset. */
   background: var(--color-surface-frame);

package/dist/ArtifactCard/index.js

@@ -1,15 +1,15 @@
-export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-UBIPDEFV.js';
+export { ArtifactCard, ArtifactCardSkeleton, ArtifactPreviewGlyph } from '../chunk-3EETQFAM.js';
 import '../chunk-BRLZXYPA.js';
 import '../chunk-CI3VPIJN.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';
 import '../chunk-NHLNHH4J.js';
-import '../chunk-DOY3KC6I.js';
 import '../chunk-PBCNINMB.js';
+import '../chunk-DOY3KC6I.js';
 export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
 import '../chunk-ETSF7SU6.js';
 import '../chunk-PGCLHYVP.js';

package/dist/ChatThread/ChatThread.d.ts

@@ -49,5 +49,14 @@ export interface ChatThreadProps extends Omit<HTMLAttributes<HTMLDivElement>, 'r
  * latest" pill counts what arrived since. The browser's own scroll anchoring
  * is turned off (it fights a last child that keeps growing), and the
  * anchoring is done here instead.
+ *
+ * A JUMP HOLDS UNTIL IT LANDS. A smooth scroll passes through positions short
+ * of the end, and each one read as the reader leaving: the pill came back and
+ * following stopped, so an answer still growing left the jump short and the
+ * first press did nothing. While the jump runs, those positions are ignored
+ * and growth is followed; the reader's own wheel, touch or key ends it.
+ *
+ * THE PILL COVERS NOTHING: it sits under the log, in the thread's own column,
+ * rather than over the last lines of whatever is being read.
  */
 export declare const ChatThread: import("react").ForwardRefExoticComponent<ChatThreadProps & import("react").RefAttributes<ChatThreadHandle>>;

package/dist/ChatThread/index.js

@@ -1,4 +1,4 @@
-export { CHAT_THREAD_FOLLOW_WITHIN, CHAT_THREAD_LABELS, ChatThread } from '../chunk-F2IYVVA3.js';
+export { CHAT_THREAD_FOLLOW_WITHIN, CHAT_THREAD_LABELS, ChatThread } from '../chunk-D2ZXIQ23.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';

package/dist/{ChatThread-FGXVDLI2.css → ChatThread-2KO3FZKQ.css}

@@ -1,7 +1,7 @@
 /*
  * A conversation as it grows: the scroller, the items a spacing step and a
- * half apart on the panel's 16px inset, and the Jump to latest pill floating
- * over its foot.
+ * half apart on the panel's 16px inset, and the Jump to latest pill in a row
+ * of its own under it.
  */
 .crewlet-chat-thread {
   position: relative;
@@ -53,14 +53,17 @@
   flex: none;
 }
 
-/* The pill, centred a step above the thread's foot. */
+/*
+ * The pill, centred in a row of its own under the log. IN FLOW, NOT FLOATING:
+ * laid over the scroller it covered the last lines of whatever was being read,
+ * a table's rows or an answer's text. Here the log gives up the row while the
+ * pill shows, and nothing it holds is hidden under it.
+ */
 .crewlet-chat-thread__jump {
-  position: absolute;
-  bottom: var(--spacing-3);
-  left: 50%;
-  transform: translateX(-50%);
-  box-shadow: var(--shadow-md);
-  border-radius: var(--radius-pill);
+  display: flex;
+  flex: none;
+  justify-content: center;
+  padding: var(--spacing-2) var(--spacing-4);
 }
 
 .crewlet-chat-thread__fresh {

package/dist/CommentThread/index.js

@@ -1,6 +1,6 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-DKJJ434E.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-UBJ32EO2.js';
 import '../chunk-CI3VPIJN.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';

package/dist/DataView/index.js

@@ -1,4 +1,4 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-XGBGEI6V.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-J5BIKMQY.js';
 import '../chunk-FPDIHEM4.js';
 import '../chunk-CFY257ND.js';
 import '../chunk-PX54PALQ.js';
@@ -9,7 +9,7 @@ import '../chunk-7KHM2FZH.js';
 import '../chunk-EE3DJMSQ.js';
 import '../chunk-NR4CPM4T.js';
 import '../chunk-KHJIEPZV.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-AV2DXAEL.js';
 import '../chunk-PBCNINMB.js';

package/dist/DatasetSource/index.js

@@ -1,7 +1,7 @@
-export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-VRG2ZXNK.js';
+export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-R6K62EXV.js';
 import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-UT6CW3C7.js';

package/dist/EditingStatus/index.js

@@ -1,6 +1,6 @@
-export { EditingStatus } from '../chunk-B76OKJMX.js';
+export { EditingStatus } from '../chunk-VLGGLLKH.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/InlineEditor/index.js

@@ -1,7 +1,7 @@
-export { INLINE_EDITOR_LABELS, InlineEditor } from '../chunk-VVOFJFRT.js';
-import '../chunk-B76OKJMX.js';
+export { INLINE_EDITOR_LABELS, InlineEditor } from '../chunk-QBWNGNF7.js';
+import '../chunk-VLGGLLKH.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-ANTAQAR4.js';
 import '../chunk-7QTPJDRF.js';

package/dist/ProposalCard/ProposalCard.d.ts

@@ -26,6 +26,26 @@ export type ProposalKind = 'change' | 'create';
  */
 export type ProposalFailureOutcome = 'unchanged' | 'unknown';
 export declare const PROPOSAL_FAILURE_OUTCOMES: readonly ["unchanged", "unknown"];
+/**
+ * How much the decision weighs: `default`, or `danger` for a change that
+ * removes, discards or overwrites something (removing a seat, deleting a
+ * record). Danger draws the card's leading edge and its title in the danger
+ * ink and the primary as the danger button, while the card waits on the
+ * person or carries the change out.
+ */
+export type ProposalTone = 'default' | 'danger';
+export declare const PROPOSAL_TONES: readonly ["default", "danger"];
+/**
+ * A deliberate confirmation: a checkbox the person ticks before the primary
+ * can be pressed, for a change whose consequence has to be acknowledged.
+ */
+export interface ProposalConfirmation {
+    /**
+     * What the person confirms, as the checkbox's name: "I understand the QA
+     * Engineer seat and its history are removed."
+     */
+    label: ReactNode;
+}
 /**
  * Why the person's own decision was refused while the card stays open to
  * another one: the approval was turned down (a fresh sign-in, a change that
@@ -68,6 +88,10 @@ export interface ProposalCardLabels {
     unknownNotice: string;
     /** Why Decline is held while the approved change is carried out. */
     busy: string;
+    /** Why the primary is held until the `confirmation` is ticked, said as its description. */
+    confirmationNeeded: string;
+    /** The title of the collapsed `details` section. */
+    details: string;
 }
 export declare const PROPOSAL_CARD_LABELS: ProposalCardLabels;
 export interface ProposalCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
@@ -88,6 +112,25 @@ export interface ProposalCardProps extends Omit<HTMLAttributes<HTMLElement>, 'ti
     changesHeading?: ReactNode;
     /** The consequence, in one sentence, under the list. */
     note?: ReactNode;
+    /**
+     * The precise request behind the change (a method, a path, a body) for a
+     * reader who wants it: a collapsed `Disclosure` at the foot of the body,
+     * above the note, titled `labels.details`, whose content mounts only once
+     * it is opened. Never where the change itself is said: the list is.
+     */
+    details?: ReactNode;
+    /** `default`, or `danger` for a change that removes or discards something; see `ProposalTone`. */
+    tone?: ProposalTone | undefined;
+    /**
+     * A checkbox above the decision that the person ticks before the primary
+     * can be pressed. Until then the primary is held soft disabled and
+     * described by `labels.confirmationNeeded`, as `approveBlocked` holds it.
+     * The tick belongs to the proposal it was given for: it clears when the
+     * card settles, and when the card is handed a different proposal (another
+     * `title` or `approveLabel`) in place. Drawn while the card waits on the
+     * person and while the approved change is carried out.
+     */
+    confirmation?: ProposalConfirmation | undefined;
     /** The primary action, named for its effect: "Apply to this list", "Create task". Never a bare "OK". */
     approveLabel: string;
     /**
@@ -184,5 +227,19 @@ export interface ProposalCardProps extends Omit<HTMLAttributes<HTMLElement>, 'ti
  * "NOTHING CHANGED." ONLY WHEN IT IS TRUE. A failure whose outcome nobody
  * could confirm (`failureOutcome="unknown"`) may have landed, so the card
  * says "Not confirmed" and never adds the reassurance.
+ *
+ * A DESTRUCTIVE CHANGE LOOKS LIKE ONE (`tone="danger"`): the danger rail down
+ * the leading edge, the title in the danger ink and the danger primary. The
+ * colour only adds weight; the title, the summary and the confirmation say
+ * what is lost in words. With `confirmation`, the primary waits on a ticked
+ * checkbox, so the decision is a deliberate act rather than a single press.
+ *
+ * A PRIMARY THAT HAS JUST APPEARED IS NOT YET UNDER THE POINTER. For half a
+ * second after the card arrives (or returns to a decision) its primary takes
+ * no pointer, so a press meant for the card it replaced cannot approve this
+ * one. The keyboard is never held.
+ *
+ * THE PRECISE REQUEST IS THERE, FOLDED (`details`): a compact disclosure,
+ * collapsed by default, for a reader who wants the method, path and body.
  */
-export declare function ProposalCard({ title, subtitle, state, scope, kind, summary, changes, changesHeading, note, approveLabel, onApprove, onDecline, onPrepareAgain, onRetry, receipt, failure, failureOutcome, failureHint, approveBlocked, decisionRefusal, notice, labels: overrides, changeLabels, diffLabels, className, ...rest }: ProposalCardProps): import("react").JSX.Element;
+export declare function ProposalCard({ title, subtitle, state, scope, kind, summary, changes, changesHeading, note, details, tone, confirmation, approveLabel, onApprove, onDecline, onPrepareAgain, onRetry, receipt, failure, failureOutcome, failureHint, approveBlocked, decisionRefusal, notice, labels: overrides, changeLabels, diffLabels, className, ...rest }: ProposalCardProps): import("react").JSX.Element;

package/dist/ProposalCard/index.d.ts

@@ -1,4 +1,4 @@
 import '../VisuallyHidden/VisuallyHidden.css';
 import './ProposalCard.css';
-export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, ProposalCard } from './ProposalCard.js';
-export type { ProposalCardLabels, ProposalCardProps, ProposalDecisionRefusal, ProposalFailureOutcome, ProposalKind, ProposalScope, ProposalState, } from './ProposalCard.js';
+export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, PROPOSAL_TONES, ProposalCard } from './ProposalCard.js';
+export type { ProposalCardLabels, ProposalCardProps, ProposalConfirmation, ProposalDecisionRefusal, ProposalFailureOutcome, ProposalKind, ProposalScope, ProposalState, ProposalTone, } from './ProposalCard.js';

package/dist/ProposalCard/index.js

@@ -1,4 +1,4 @@
-export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, ProposalCard } from '../chunk-FZUDUNCK.js';
+export { PROPOSAL_CARD_LABELS, PROPOSAL_FAILURE_OUTCOMES, PROPOSAL_STATES, PROPOSAL_TONES, ProposalCard } from '../chunk-2AQMXGWA.js';
 import '../chunk-M25IV5MH.js';
 import '../chunk-NTQPJJAN.js';
 import '../chunk-WQRSZMN4.js';
@@ -7,11 +7,18 @@ import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-4AUTALJA.js';
 import '../chunk-AV2DXAEL.js';
+import '../chunk-PBCNINMB.js';
 import '../chunk-222VILSP.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-7QTPJDRF.js';
 import '../chunk-XSPCITPN.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-UAUP6XGK.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{ProposalCard-VTTCDXYK.css → ProposalCard-SF332W4E.css}

@@ -18,6 +18,28 @@
   text-align: end;
 }
 
+/* THE DELIBERATE CONFIRMATION, on a row of its own above the decision. It
+   starts at the foot's start edge, unlike the one-line reasons around it: a
+   checkbox's sentence wraps under its own first line, and set at the end its
+   lines would start in a different place each. */
+.crewlet-proposal-card__confirmation {
+  flex: 1 1 100%;
+}
+
+/* A PRIMARY THAT HAS JUST APPEARED takes no pointer for a moment (ARMING_MS
+   in ProposalCard.tsx): no hover, and no press from a pointer that was
+   already resting where it landed. Focus and the keyboard still reach it. */
+.crewlet-proposal-card__approve[data-arming] {
+  pointer-events: none;
+}
+
+/* THE DANGER TONE, while the decision is open: Card's rail (passed through
+   StatusCard) and the title in the danger ink, the step the tokens measure as
+   text, so it holds AA in every palette. The Tag keeps the state. */
+.crewlet-proposal-card--danger .crewlet-card__title {
+  color: var(--color-feedback-danger-ink);
+}
+
 /* WHY THE LAST DECISION WAS REFUSED, on a line of its own above the
    decision and at its end, as the held primary's reason is: the refusal
    strip's own inline drawing, which wraps rather than widening the row. */

package/dist/RelativeTime/index.js

@@ -1,4 +1,4 @@
-export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from '../chunk-L6NG7CUA.js';
+export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-DS5NBENV.js';
+export { RichEditor, preloadRichEditor } from '../chunk-BVNFNFA6.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-CSQTDGTS.js';
 import '../chunk-BAKPMH3S.js';
 import '../chunk-BPCY7ZID.js';

package/dist/StatusCard/StatusCard.d.ts

@@ -1,5 +1,5 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-import { type CardSectionPadding } from '../Card/index.js';
+import { type CardRail, type CardSectionPadding } from '../Card/index.js';
 import { type TagVariant } from '../Tag/index.js';
 /** A card's state, drawn as a `Tag` at the end of its head. */
 export interface StatusCardStatus {
@@ -58,6 +58,12 @@ export interface StatusCardProps extends Omit<HTMLAttributes<HTMLElement>, 'titl
      * stays legible.
      */
     settled?: boolean | undefined;
+    /**
+     * A risk down the card's leading edge, Card's own rail: what the reader
+     * has to weigh before acting, such as a proposal that removes something.
+     * Never the state, which the Tag already says in words.
+     */
+    rail?: CardRail | undefined;
     /** The body's inset. `md` by default; `none` lets a table run to the card's edges. */
     bodyPadding?: CardSectionPadding | undefined;
     /** What happened, as a `ReceiptStrip` at the card's foot, above any actions. */
@@ -72,8 +78,9 @@ export interface StatusCardProps extends Omit<HTMLAttributes<HTMLElement>, 'titl
  * A record with a state, as the product's own card: the default `Card`, one
  * hairline, a sentence-case title over the head's rule, the state as a `Tag`
  * at the end of the head, and what happened as a strip at the foot. No tone
- * rail and no tinted head: the Tag says the state in words, and a rail beside
- * it only repeated it in colour.
+ * rail for the state and no tinted head: the Tag says the state in words, and
+ * a rail beside it only repeated it in colour. A rail is drawn only for a
+ * risk the Tag does not carry (`rail`).
  *
  * A SECTION NAMED BY ITS TITLE AND ITS STATE ("Create task, Needs your
  * approval"), so a reader moving by region hears both before reading the

package/dist/TableCells/index.js

@@ -1,8 +1,8 @@
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-NWTHGZBH.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-GNDKUSCG.js';
 import '../chunk-QF5UNP4T.js';
 import '../chunk-I5OIKDX2.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';

package/dist/ThinkingIndicator/ThinkingIndicator.d.ts

@@ -15,9 +15,11 @@ export interface ThinkingIndicatorProps extends Omit<HTMLAttributes<HTMLDivEleme
 }
 /**
  * The assistant at work, drawn where its answer will be: the Assistant's mark
- * with its four blades turning a quarter at a time around a still core, and,
- * while nothing of the answer is on screen yet, a line saying what it is doing
- * under a slow shimmer.
+ * with its main spark making a quarter turn while its companion twinkles, then
+ * resting, and, while nothing of the answer is on screen yet, a line saying
+ * what it is doing under a slow shimmer. The mark is drawn at 16 px, so it is
+ * the 16 pixel grid drawing, and the motion is this component's stylesheet:
+ * the mark carries only its `data-motion` parts.
  *
  * IN PLACE OF A CARET. A blinking bar after streamed text lands wherever the
  * last block ends, on a line of its own under a list or at the start of an
@@ -30,8 +32,9 @@ export interface ThinkingIndicatorProps extends Omit<HTMLAttributes<HTMLDivEleme
  * changes with every step, is hidden from assistive technology, where the
  * steps are read from their own list.
  *
- * UNDER REDUCED MOTION the blades hold still and the line is drawn in the
- * secondary ink without the shimmer: the mark and the words still say that
- * work is under way.
+ * UNDER REDUCED MOTION the mark holds a still working pose (the main spark
+ * tucked, the companion dimmed) and the line is drawn in the secondary ink
+ * without the shimmer: the mark and the words still say that work is under
+ * way.
  */
 export declare function ThinkingIndicator({ status, label, className, ...rest }: ThinkingIndicatorProps): import("react").JSX.Element;

package/dist/ThinkingIndicator/index.js

@@ -1,3 +1,3 @@
-export { ThinkingIndicator } from '../chunk-E2MIUNUU.js';
+export { ThinkingIndicator } from '../chunk-M73MMEZY.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThinkingIndicator-JVF52N7L.css

@@ -0,0 +1,193 @@
+/*
+ * The assistant at work: the Assistant's mark, its spark turning, and a line
+ * of status under a shimmer. See ThinkingIndicator.tsx for why it replaces a
+ * caret and how it is announced.
+ */
+
+/*
+ * ONE LINE OF PROSE TALL, at every state: the mark alone, the mark with a
+ * status line, and the line changing from one step to the next all keep the
+ * same height, so the thread never moves while the assistant works.
+ */
+.crewlet-thinking {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  min-height: calc(var(--font-size-compact) * var(--font-line-height-relaxed));
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-relaxed);
+}
+
+/*
+ * THE SPARK TURNS A QUARTER, THEN RESTS. The Assistant's main spark
+ * (data-motion="turn") makes a quarter turn about its own centre while its
+ * companion (data-motion="twinkle") dims and shrinks, both on one timeline of
+ * --motion-duration-spark (1.6s). The gesture runs from 20% to 70% of the
+ * period and every part is at rest in the idle pose for the other half, so
+ * the loop never jumps: the spark is four-fold symmetric, so its 90 degree
+ * pose is its 0 degree pose. Both parts pivot on their own fill box, which is
+ * the spark's centre, so the same rules move the 16 pixel grid drawing and
+ * the 48 unit master.
+ *
+ * THE TURN TUCKS. A full-size spark sweeps its tip through the companion
+ * between 26.6 and 63.4 degrees. The spark therefore pulls in to 0.8 over the
+ * first 15.37 degrees, holds 0.8 through the fast middle of the turn and opens
+ * back to 1 over the last 15.37 degrees, which keeps clear violet between the
+ * two at every frame. Rotate and scale are one transform, so the two can never
+ * drift apart. The three timing functions are the design's one eased quarter
+ * turn, cubic-bezier(0.65, 0, 0.35, 1) over the gesture, split at the 37.5%
+ * and 52.5% stops, so the angle follows that curve exactly.
+ *
+ * THE COMPANION TWINKLES. Its trough sits at 45%, the instant the main spark
+ * passes 45 degrees, and it shares the turn's gesture window.
+ */
+.crewlet-thinking__mark [data-motion='turn'],
+.crewlet-thinking__mark [data-motion='twinkle'] {
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.crewlet-thinking__mark [data-motion='turn'] {
+  animation: crewlet-thinking-turn var(--motion-duration-spark) linear infinite;
+}
+
+.crewlet-thinking__mark [data-motion='twinkle'] {
+  animation: crewlet-thinking-twinkle var(--motion-duration-spark) linear infinite;
+}
+
+@keyframes crewlet-thinking-turn {
+  0%,
+  20% {
+    transform: rotate(0deg) scale(1);
+    animation-timing-function: cubic-bezier(0.4878, 0, 0.7883, 0.4041);
+  }
+
+  37.5% {
+    transform: rotate(15.37deg) scale(0.8);
+    animation-timing-function: cubic-bezier(0.4462, 0.2792, 0.5538, 0.7208);
+  }
+
+  52.5% {
+    transform: rotate(74.63deg) scale(0.8);
+    animation-timing-function: cubic-bezier(0.2117, 0.5959, 0.5122, 1);
+  }
+
+  70%,
+  100% {
+    transform: rotate(90deg) scale(1);
+  }
+}
+
+@keyframes crewlet-thinking-twinkle {
+  0%,
+  20% {
+    transform: scale(1);
+    opacity: 1;
+    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
+  }
+
+  45% {
+    transform: scale(0.7);
+    opacity: 0.5;
+    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
+  }
+
+  70%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/*
+ * THE SHIMMER IS A LIGHTER BAND CROSSING THE WORDS, the band Skeleton sweeps
+ * across a placeholder, set in ink rather than in surface: the words are the
+ * secondary ink at rest, so they read at every point of the sweep, and the
+ * band is the primary ink. The gradient is clipped to the glyphs and is three
+ * times the line's width, so the band crosses it rather than standing in it.
+ */
+.crewlet-thinking__status {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  animation: crewlet-thinking-enter var(--motion-duration-moderate) var(--motion-easing-out);
+}
+
+@supports (background-clip: text) or (-webkit-background-clip: text) {
+  .crewlet-thinking__status {
+    background-image: linear-gradient(
+      90deg,
+      var(--color-text-secondary) 0%,
+      var(--color-text-secondary) 40%,
+      var(--color-text-primary) 50%,
+      var(--color-text-secondary) 60%,
+      var(--color-text-secondary) 100%
+    );
+    background-size: 300% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation:
+      crewlet-thinking-enter var(--motion-duration-moderate) var(--motion-easing-out),
+      crewlet-thinking-shimmer var(--motion-duration-breath) linear infinite;
+  }
+}
+
+@keyframes crewlet-thinking-shimmer {
+  from {
+    background-position: 100% 50%;
+  }
+
+  to {
+    background-position: 0 50%;
+  }
+}
+
+@keyframes crewlet-thinking-enter {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+/*
+ * UNDER REDUCED MOTION THE MARK HOLDS A WORKING POSE. Both animations stop,
+ * and the mark shows the gesture's tuck and the twinkle's trough held still
+ * on the tile's axes: the main spark at 0.8 and the companion at 0.7 and half
+ * strength. It differs from the idle mark without moving, and the 16 pixel
+ * grid drawing keeps its pixel centred tips, so it stays crisp at 16 and
+ * 20 px. The pose is swapped in at once, never with a transition.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-thinking__mark [data-motion='turn'] {
+    animation: none;
+    transform: scale(0.8);
+  }
+
+  .crewlet-thinking__mark [data-motion='twinkle'] {
+    animation: none;
+    transform: scale(0.7);
+    opacity: 0.5;
+  }
+
+  .crewlet-thinking__status {
+    background-image: none;
+    color: var(--color-text-secondary);
+    animation: none;
+  }
+}
+
+/* The system's own ink: a gradient clipped to text is dropped there. */
+@media (forced-colors: active) {
+  .crewlet-thinking__status {
+    background-image: none;
+    color: CanvasText;
+  }
+}

package/dist/VersionTimeline/index.js

@@ -1,6 +1,6 @@
-export { VersionTimeline } from '../chunk-SRSE7FGL.js';
+export { VersionTimeline } from '../chunk-WPMZKZUH.js';
 import '../chunk-CI3VPIJN.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-BKP6XCAJ.js';
 import '../chunk-PZKHBB7D.js';

package/dist/WidgetFrame/index.js

@@ -1,6 +1,6 @@
-export { WidgetFrame } from '../chunk-4EDSEX7U.js';
+export { WidgetFrame } from '../chunk-S5QJZOPL.js';
 import '../chunk-BRLZXYPA.js';
-import '../chunk-L6NG7CUA.js';
+import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';