@crewlethq/ui 0.66.0 → 0.67.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.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.

package/dist/SetupWizard/index.js

@@ -1,6 +1,6 @@
-export { SetupWizard } from '../chunk-SBHAKX2T.js';
-import '../chunk-HJBHP66O.js';
+export { SetupWizard } from '../chunk-R2YHKVWN.js';
 import '../chunk-FPDIHEM4.js';
+import '../chunk-HJBHP66O.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-222VILSP.js';
 import '../chunk-IVTQWOXV.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/{chunk-E2MIUNUU.js → chunk-M73MMEZY.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ThinkingIndicator-QJMX2TXC.css';
+import './ThinkingIndicator-JVF52N7L.css';
 import { ProductMark } from '@crewlethq/icons/product-mark';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/generated/index.js

@@ -13,22 +13,22 @@ export { ThemeSwatch } from '../chunk-3XQUEF5C.js';
 export { DensitySwitcher, ThemeSwitcher } from '../chunk-7EOUVWGQ.js';
 export { ThemeToggle } from '../chunk-IPMJGK2Q.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
-export { ThinkingIndicator } from '../chunk-E2MIUNUU.js';
+export { ThinkingIndicator } from '../chunk-M73MMEZY.js';
 export { TileGrid } from '../chunk-Q6CQMS6R.js';
 export { TIME_RANGE_CUSTOM, TIME_RANGE_PICKER_LABELS, TimeRangePicker, timeRangeFieldKey, timeRangeProblem } from '../chunk-PQWNK3N7.js';
 export { Switcher } from '../chunk-GDDVI4US.js';
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-GNDKUSCG.js';
 export { TagsInput } from '../chunk-HEIOLITO.js';
 export { StatCard } from '../chunk-G5IZGAWS.js';
-export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from '../chunk-4TMBAOXK.js';
 export { StatGroup } from '../chunk-OUD75UB2.js';
 export { Statement } from '../chunk-MZJKPTA5.js';
 export { SuggestionList, SuggestionRow } from '../chunk-Y7PVLEZJ.js';
 export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-2SU735S3.js';
 export { SlideFilmstrip } from '../chunk-U7J52N67.js';
 export { SlideGrid } from '../chunk-7MGXHCVK.js';
+export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from '../chunk-4TMBAOXK.js';
 export { SettingsTable, SettingsTableRow } from '../chunk-4RKTZSEW.js';
-export { SetupWizard } from '../chunk-SBHAKX2T.js';
+export { SetupWizard } from '../chunk-R2YHKVWN.js';
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-WWXIGN4O.js';
 export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from '../chunk-SBOUVASH.js';
 export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-OOC6KXNL.js';
@@ -38,13 +38,13 @@ import '../chunk-73GUXYYE.js';
 export { SearchTrigger } from '../chunk-ERNT3UTB.js';
 export { SectionFrame, SectionFrameBody, SectionFrameNav } from '../chunk-G4CGDUCP.js';
 export { NavGroup, NavItem, SidebarNav } from '../chunk-WCDPFTJZ.js';
-export { Select } from '../chunk-VK45YJLH.js';
 export { SegmentedMeter, segmentedMeterLabel } from '../chunk-4AK52VHB.js';
+export { Select } from '../chunk-VK45YJLH.js';
 export { SelectionBar } from '../chunk-WU5JDEEY.js';
 export { SEND_BUTTON_LABELS, SendButton } from '../chunk-T2GC7UAP.js';
-export { ReviewList } from '../chunk-DO4J4TBZ.js';
 export { RESULT_TABLE_CARD_LABELS, RESULT_TABLE_COLLAPSED_ROWS, RESULT_TABLE_MAX_ROWS, ResultTableCard } from '../chunk-7QTJO3PV.js';
 export { Table } from '../chunk-5DJMFRSZ.js';
+export { ReviewList } from '../chunk-DO4J4TBZ.js';
 export { RichEditor, preloadRichEditor } from '../chunk-BVNFNFA6.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-CSQTDGTS.js';
 export { canonicalMarkdown, roundTripMarkdown } from '../chunk-SWD4QBL6.js';
@@ -104,9 +104,9 @@ export { IconTile } from '../chunk-3LI4TRUR.js';
 export { ImageUpload } from '../chunk-56IFLQGF.js';
 export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from '../chunk-62DBFNOK.js';
 export { FactList } from '../chunk-CSXJIIO4.js';
+export { FileList } from '../chunk-5WRWBDML.js';
 export { FileDrop, FilePickButton, droppedFiles, pickedFiles } from '../chunk-2JHGPXYG.js';
 export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-IWZG7NPV.js';
-export { FileList } from '../chunk-5WRWBDML.js';
 export { FindingList } from '../chunk-LSRQ2A6B.js';
 export { FolderTile, describeFolderContents, folderContentsParts } from '../chunk-WTXCK46H.js';
 export { FollowBanner } from '../chunk-K4IVKHKU.js';
@@ -119,11 +119,7 @@ export { EntityChip } from '../chunk-OSKJZNBT.js';
 export { EntityList } from '../chunk-7IW3P6FH.js';
 export { ErrorBoundary } from '../chunk-ZEPUKRO7.js';
 export { Eyebrow } from '../chunk-RK4XPHVG.js';
-export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-UWOYDHVW.js';
-export { STEP_STATES, STEP_STATE_LABELS, StepList, StepStateMark, Stepper, stepDetailPieces } from '../chunk-HJBHP66O.js';
-export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from '../chunk-RQFRRPV6.js';
-export { REFUSAL_STRIP_LABELS, ReceiptStrip, RefusalStrip } from '../chunk-M25IV5MH.js';
-export { StatusCard } from '../chunk-NTQPJJAN.js';
+export { DescriptionList, DescriptionListItem } from '../chunk-MFS6F2P7.js';
 export { DIFF_SUMMARY_LABELS, DIFF_VIEW_LABELS, DiffSummary, DiffView, MAX_DIFF_LINES, collapseDiff, diffLines, diffStat, firstChangedLines, splitLines } from '../chunk-AOFVXE6V.js';
 export { DirectoryList } from '../chunk-SRDNGGZE.js';
 export { Divider } from '../chunk-6KWNXIDE.js';
@@ -136,7 +132,11 @@ export { PageHeader } from '../chunk-FPDIHEM4.js';
 export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-CFY257ND.js';
 export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-R6K62EXV.js';
 export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from '../chunk-PX54PALQ.js';
-export { DescriptionList, DescriptionListItem } from '../chunk-MFS6F2P7.js';
+export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from '../chunk-UWOYDHVW.js';
+export { STEP_STATES, STEP_STATE_LABELS, StepList, StepStateMark, Stepper, stepDetailPieces } from '../chunk-HJBHP66O.js';
+export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from '../chunk-RQFRRPV6.js';
+export { REFUSAL_STRIP_LABELS, ReceiptStrip, RefusalStrip } from '../chunk-M25IV5MH.js';
+export { StatusCard } from '../chunk-NTQPJJAN.js';
 export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-UBJ32EO2.js';
 export { ConfirmField, confirmMatches } from '../chunk-JVII5264.js';
 export { InlineCode } from '../chunk-PLL7ZJHY.js';
@@ -194,8 +194,8 @@ export { ArtifactNameCell } from '../chunk-4MRFLHJC.js';
 export { AsideLayout } from '../chunk-QOXLP5PE.js';
 export { ATTACHMENT_CHIP_LABELS, AttachmentChip } from '../chunk-3N36CYTU.js';
 export { Tag } from '../chunk-I5OIKDX2.js';
-export { ArrangeFrame, useGridResize } from '../chunk-PLNJEDGI.js';
 export { ArrangeGrid } from '../chunk-QBA5B2Z5.js';
+export { ArrangeFrame, useGridResize } from '../chunk-PLNJEDGI.js';
 export { ArrangeGroup } from '../chunk-CYYBE2MM.js';
 export { ArrangeList, DEFAULT_ARRANGE_LABELS } from '../chunk-TWJERLT3.js';
 export { Switch } from '../chunk-3XDT5ZWL.js';
@@ -226,6 +226,7 @@ export { ARTIFACT_KINDS, ArtifactKindGlyph } from '../chunk-RSKW25Y5.js';
 export { ACCESS_DENIED_REASONS, AccessDeniedCard } from '../chunk-QTMUKRTN.js';
 export { EmptyState } from '../chunk-PPUR46MK.js';
 export { Accordion, AccordionItem } from '../chunk-5NJMSYDZ.js';
+export { ADD_PILL_MS, AddPill } from '../chunk-CVKANYHD.js';
 export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-WUQVAFTC.js';
 export { Timeline, TimelineItem } from '../chunk-4MJN2KN6.js';
 export { Section } from '../chunk-WFCWPXJN.js';
@@ -239,7 +240,6 @@ export { CHARACTER_COUNT_LABELS, CHARACTER_COUNT_NEAR, CharacterCount, character
 export { DisclosureAnatomy } from '../chunk-IVTQWOXV.js';
 export { Count } from '../chunk-MLDTLZAO.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
-export { ADD_PILL_MS, AddPill } from '../chunk-CVKANYHD.js';
 export { Announcer, announce, useAnnouncer } from '../chunk-2G355KDJ.js';
 export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from '../chunk-GJ7VIQWL.js';
 export { useMediaMatch } from '../chunk-RTPQDNW3.js';

package/dist/index.js

@@ -13,22 +13,22 @@ export { ThemeSwatch } from './chunk-3XQUEF5C.js';
 export { DensitySwitcher, ThemeSwitcher } from './chunk-7EOUVWGQ.js';
 export { ThemeToggle } from './chunk-IPMJGK2Q.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from './chunk-Z24ZUSTX.js';
-export { ThinkingIndicator } from './chunk-E2MIUNUU.js';
+export { ThinkingIndicator } from './chunk-M73MMEZY.js';
 export { TileGrid } from './chunk-Q6CQMS6R.js';
 export { TIME_RANGE_CUSTOM, TIME_RANGE_PICKER_LABELS, TimeRangePicker, timeRangeFieldKey, timeRangeProblem } from './chunk-PQWNK3N7.js';
 export { Switcher } from './chunk-GDDVI4US.js';
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from './chunk-GNDKUSCG.js';
 export { TagsInput } from './chunk-HEIOLITO.js';
 export { StatCard } from './chunk-G5IZGAWS.js';
-export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from './chunk-4TMBAOXK.js';
 export { StatGroup } from './chunk-OUD75UB2.js';
 export { Statement } from './chunk-MZJKPTA5.js';
 export { SuggestionList, SuggestionRow } from './chunk-Y7PVLEZJ.js';
 export { SLIDE_COMPARE_LABELS, SlideCompare } from './chunk-2SU735S3.js';
 export { SlideFilmstrip } from './chunk-U7J52N67.js';
 export { SlideGrid } from './chunk-7MGXHCVK.js';
+export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from './chunk-4TMBAOXK.js';
 export { SettingsTable, SettingsTableRow } from './chunk-4RKTZSEW.js';
-export { SetupWizard } from './chunk-SBHAKX2T.js';
+export { SetupWizard } from './chunk-R2YHKVWN.js';
 export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from './chunk-WWXIGN4O.js';
 export { SHEET_COLUMN_EDITOR_LABELS, SheetColumnEditor, SheetColumnTypeGlyph } from './chunk-SBOUVASH.js';
 export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from './chunk-OOC6KXNL.js';
@@ -38,13 +38,13 @@ import './chunk-73GUXYYE.js';
 export { SearchTrigger } from './chunk-ERNT3UTB.js';
 export { SectionFrame, SectionFrameBody, SectionFrameNav } from './chunk-G4CGDUCP.js';
 export { NavGroup, NavItem, SidebarNav } from './chunk-WCDPFTJZ.js';
-export { Select } from './chunk-VK45YJLH.js';
 export { SegmentedMeter, segmentedMeterLabel } from './chunk-4AK52VHB.js';
+export { Select } from './chunk-VK45YJLH.js';
 export { SelectionBar } from './chunk-WU5JDEEY.js';
 export { SEND_BUTTON_LABELS, SendButton } from './chunk-T2GC7UAP.js';
-export { ReviewList } from './chunk-DO4J4TBZ.js';
 export { RESULT_TABLE_CARD_LABELS, RESULT_TABLE_COLLAPSED_ROWS, RESULT_TABLE_MAX_ROWS, ResultTableCard } from './chunk-7QTJO3PV.js';
 export { Table } from './chunk-5DJMFRSZ.js';
+export { ReviewList } from './chunk-DO4J4TBZ.js';
 export { RichEditor, preloadRichEditor } from './chunk-BVNFNFA6.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from './chunk-CSQTDGTS.js';
 export { canonicalMarkdown, roundTripMarkdown } from './chunk-SWD4QBL6.js';
@@ -104,9 +104,9 @@ export { IconTile } from './chunk-3LI4TRUR.js';
 export { ImageUpload } from './chunk-56IFLQGF.js';
 export { InboxGroup, InboxList, InboxMore, InboxRow, InboxToggle } from './chunk-62DBFNOK.js';
 export { FactList } from './chunk-CSXJIIO4.js';
+export { FileList } from './chunk-5WRWBDML.js';
 export { FileDrop, FilePickButton, droppedFiles, pickedFiles } from './chunk-2JHGPXYG.js';
 export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from './chunk-IWZG7NPV.js';
-export { FileList } from './chunk-5WRWBDML.js';
 export { FindingList } from './chunk-LSRQ2A6B.js';
 export { FolderTile, describeFolderContents, folderContentsParts } from './chunk-WTXCK46H.js';
 export { FollowBanner } from './chunk-K4IVKHKU.js';
@@ -119,11 +119,7 @@ export { EntityChip } from './chunk-OSKJZNBT.js';
 export { EntityList } from './chunk-7IW3P6FH.js';
 export { ErrorBoundary } from './chunk-ZEPUKRO7.js';
 export { Eyebrow } from './chunk-RK4XPHVG.js';
-export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from './chunk-UWOYDHVW.js';
-export { STEP_STATES, STEP_STATE_LABELS, StepList, StepStateMark, Stepper, stepDetailPieces } from './chunk-HJBHP66O.js';
-export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from './chunk-RQFRRPV6.js';
-export { REFUSAL_STRIP_LABELS, ReceiptStrip, RefusalStrip } from './chunk-M25IV5MH.js';
-export { StatusCard } from './chunk-NTQPJJAN.js';
+export { DescriptionList, DescriptionListItem } from './chunk-MFS6F2P7.js';
 export { DIFF_SUMMARY_LABELS, DIFF_VIEW_LABELS, DiffSummary, DiffView, MAX_DIFF_LINES, collapseDiff, diffLines, diffStat, firstChangedLines, splitLines } from './chunk-AOFVXE6V.js';
 export { DirectoryList } from './chunk-SRDNGGZE.js';
 export { Divider } from './chunk-6KWNXIDE.js';
@@ -136,7 +132,11 @@ export { PageHeader } from './chunk-FPDIHEM4.js';
 export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-CFY257ND.js';
 export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from './chunk-R6K62EXV.js';
 export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker } from './chunk-PX54PALQ.js';
-export { DescriptionList, DescriptionListItem } from './chunk-MFS6F2P7.js';
+export { DEEP_WORK_CARD_LABELS, DEEP_WORK_STATES, DEEP_WORK_STATE_LABELS, DeepWorkCard } from './chunk-UWOYDHVW.js';
+export { STEP_STATES, STEP_STATE_LABELS, StepList, StepStateMark, Stepper, stepDetailPieces } from './chunk-HJBHP66O.js';
+export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from './chunk-RQFRRPV6.js';
+export { REFUSAL_STRIP_LABELS, ReceiptStrip, RefusalStrip } from './chunk-M25IV5MH.js';
+export { StatusCard } from './chunk-NTQPJJAN.js';
 export { COMMENT_THREAD_LABELS, CommentThread } from './chunk-UBJ32EO2.js';
 export { ConfirmField, confirmMatches } from './chunk-JVII5264.js';
 export { InlineCode } from './chunk-PLL7ZJHY.js';
@@ -194,8 +194,8 @@ export { ArtifactNameCell } from './chunk-4MRFLHJC.js';
 export { AsideLayout } from './chunk-QOXLP5PE.js';
 export { ATTACHMENT_CHIP_LABELS, AttachmentChip } from './chunk-3N36CYTU.js';
 export { Tag } from './chunk-I5OIKDX2.js';
-export { ArrangeFrame, useGridResize } from './chunk-PLNJEDGI.js';
 export { ArrangeGrid } from './chunk-QBA5B2Z5.js';
+export { ArrangeFrame, useGridResize } from './chunk-PLNJEDGI.js';
 export { ArrangeGroup } from './chunk-CYYBE2MM.js';
 export { ArrangeList, DEFAULT_ARRANGE_LABELS } from './chunk-TWJERLT3.js';
 export { Switch } from './chunk-3XDT5ZWL.js';
@@ -226,6 +226,7 @@ export { ARTIFACT_KINDS, ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
 export { ACCESS_DENIED_REASONS, AccessDeniedCard } from './chunk-QTMUKRTN.js';
 export { EmptyState } from './chunk-PPUR46MK.js';
 export { Accordion, AccordionItem } from './chunk-5NJMSYDZ.js';
+export { ADD_PILL_MS, AddPill } from './chunk-CVKANYHD.js';
 export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from './chunk-WUQVAFTC.js';
 export { Timeline, TimelineItem } from './chunk-4MJN2KN6.js';
 export { Section } from './chunk-WFCWPXJN.js';
@@ -239,7 +240,6 @@ export { CHARACTER_COUNT_LABELS, CHARACTER_COUNT_NEAR, CharacterCount, character
 export { DisclosureAnatomy } from './chunk-IVTQWOXV.js';
 export { Count } from './chunk-MLDTLZAO.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './chunk-PQADV6P6.js';
-export { ADD_PILL_MS, AddPill } from './chunk-CVKANYHD.js';
 export { Announcer, announce, useAnnouncer } from './chunk-2G355KDJ.js';
 export { APP_SHELL_ASIDE_WIDTH, AccountRow, AppShell, AppShellRail, AppShellRailRow, AppShellRailStatus, AppShellToggle, AppShellTopbar, readStoredWidth, useAppShell, useScreenBelow, useScreenWidth, useStoredWidth } from './chunk-GJ7VIQWL.js';
 export { useMediaMatch } from './chunk-RTPQDNW3.js';

package/dist/styles.css

@@ -38169,9 +38169,9 @@ b.crewlet-switcher__match {
 }
 
 
-/* ThinkingIndicator-QJMX2TXC.css */
+/* ThinkingIndicator-JVF52N7L.css */
 /*
- * The assistant at work: the Assistant's mark, its blades turning, and a line
+ * 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.
  */
@@ -38193,27 +38193,83 @@ b.crewlet-switcher__match {
 }
 
 /*
- * THE BLADES TURN A QUARTER, THEN REST. The figure is four blades around a
- * core, the same after a quarter turn, so each round ends where the next
- * begins and the loop never shows a seam. One round is the breath period
- * (2.2s): the turn takes its first half on the in-out ease and the second
- * half is still, which reads as steady thought rather than as a spinner. The
- * core holds still, as the mark's own description promises.
- */
+ * 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'] {
-  transform-box: view-box;
-  transform-origin: 50% 50%;
-  animation: crewlet-thinking-turn var(--motion-duration-breath) var(--motion-easing-in-out) infinite;
+  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% {
-    transform: rotate(0deg);
+  0%,
+  20% {
+    transform: rotate(0deg) scale(1);
+    animation-timing-function: cubic-bezier(0.4878, 0, 0.7883, 0.4041);
   }
 
-  50%,
+  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);
+    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;
   }
 }
 
@@ -38273,9 +38329,24 @@ b.crewlet-switcher__match {
   }
 }
 
+/*
+ * 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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.66.0",
+  "version": "0.67.0",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.66.0",
-    "@crewlethq/tokens": "0.66.0",
+    "@crewlethq/icons": "0.67.0",
+    "@crewlethq/tokens": "0.67.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/ThinkingIndicator-QJMX2TXC.css

@@ -1,122 +0,0 @@
-/*
- * The assistant at work: the Assistant's mark, its blades 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 BLADES TURN A QUARTER, THEN REST. The figure is four blades around a
- * core, the same after a quarter turn, so each round ends where the next
- * begins and the loop never shows a seam. One round is the breath period
- * (2.2s): the turn takes its first half on the in-out ease and the second
- * half is still, which reads as steady thought rather than as a spinner. The
- * core holds still, as the mark's own description promises.
- */
-.crewlet-thinking__mark [data-motion='turn'] {
-  transform-box: view-box;
-  transform-origin: 50% 50%;
-  animation: crewlet-thinking-turn var(--motion-duration-breath) var(--motion-easing-in-out) infinite;
-}
-
-@keyframes crewlet-thinking-turn {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  50%,
-  100% {
-    transform: rotate(90deg);
-  }
-}
-
-/*
- * 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;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .crewlet-thinking__mark [data-motion='turn'] {
-    animation: none;
-  }
-
-  .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/{chunk-SBHAKX2T.js → chunk-R2YHKVWN.js}

@@ -1,5 +1,5 @@
-import { Stepper } from './chunk-HJBHP66O.js';
 import { PageHeader } from './chunk-FPDIHEM4.js';
+import { Stepper } from './chunk-HJBHP66O.js';
 import { Disclosure } from './chunk-222VILSP.js';
 import { useHeadingLevel, nextHeadingLevel, headingTag, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';