@crewlethq/ui 0.59.0 → 0.61.0

package/dist/styles.css

@@ -5419,7 +5419,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Button-VXJ7M5XF.css */
+/* Button-VRRYSXFN.css */
 /*
  * The button, and the link drawn as one.
  *
@@ -5630,17 +5630,20 @@ a.crewlet-breadcrumb__crumb:focus-visible {
  */
 .crewlet-btn--secondary {
   background: var(--color-surface-subtle);
+  --crewlet-indicator-ring: var(--color-surface-subtle);
   color: var(--color-text-primary);
   border-color: var(--color-border-strong);
 }
 
 .crewlet-btn--secondary:hover:not(:disabled):not([aria-disabled='true']) {
   background: var(--color-surface-elevated);
+  --crewlet-indicator-ring: var(--color-surface-elevated);
   border-color: var(--color-border-strong-hover);
 }
 
 .crewlet-btn--secondary:active:not(:disabled):not([aria-disabled='true']) {
   background: var(--color-surface-pressed);
+  --crewlet-indicator-ring: var(--color-surface-pressed);
 }
 
 /* Outline: the branded secondary. Its ink is the accent's text step, never
@@ -5708,6 +5711,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
    about, so the two cannot disagree. */
 .crewlet-btn[aria-pressed='true'] {
   background: var(--color-brand-accent-soft);
+  --crewlet-indicator-ring: var(--color-brand-accent-soft);
   color: var(--color-brand-accent-ink);
   border-color: var(--color-brand-accent-soft-strong);
 }
@@ -17596,7 +17600,7 @@ button.crewlet-finding-list__row:focus-visible {
 }
 
 
-/* IconButton-6WA7UEBJ.css */
+/* IconButton-2D2PZ6GU.css */
 /*
  * IconButton: a square icon-only control.
  *
@@ -17720,17 +17724,20 @@ button.crewlet-finding-list__row:focus-visible {
  */
 .crewlet-icon-btn--secondary {
   background: var(--color-surface-subtle);
+  --crewlet-indicator-ring: var(--color-surface-subtle);
   border-color: var(--color-border-strong);
   color: var(--color-text-primary);
 }
 
 .crewlet-icon-btn--secondary:hover:not(:disabled):not([aria-disabled='true']) {
   background: var(--color-surface-elevated);
+  --crewlet-indicator-ring: var(--color-surface-elevated);
   border-color: var(--color-border-strong-hover);
 }
 
 .crewlet-icon-btn--secondary:active:not(:disabled):not([aria-disabled='true']) {
   background: var(--color-surface-pressed);
+  --crewlet-indicator-ring: var(--color-surface-pressed);
 }
 
 /* ghost: transparent, neutral ink, a mild tint on hover. */
@@ -17806,6 +17813,7 @@ a.crewlet-icon-btn {
 /* A toggle that is on, drawn from the state a screen reader is already told. */
 .crewlet-icon-btn[aria-pressed='true'] {
   background: var(--color-brand-accent-soft);
+  --crewlet-indicator-ring: var(--color-brand-accent-soft);
   color: var(--color-brand-accent-ink);
 }
 
@@ -18316,6 +18324,42 @@ a.crewlet-icon-btn {
 }
 
 
+/* IndicatorAnchor-ZVP47Q4T.css */
+/*
+ * A mark with an indicator at its top end corner. The anchor is as large as
+ * the mark, so the corner is the mark's; the indicator's centre stands on it.
+ */
+.crewlet-indicator-anchor {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+/*
+ * The indicator's box is the dot's own size (the line height is zero, so an
+ * inline dot adds no strut), centred on the corner by translating half of
+ * itself out, and ringed in the ground's colour so it parts from the mark.
+ */
+.crewlet-indicator-anchor__indicator {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  display: inline-flex;
+  line-height: 0;
+  border-radius: var(--radius-circle);
+  box-shadow: 0 0 0 2px var(--crewlet-indicator-ring, var(--color-surface-background));
+  transform: translate(50%, -50%);
+  pointer-events: none;
+}
+
+[dir='rtl'] .crewlet-indicator-anchor__indicator {
+  transform: translate(-50%, -50%);
+}
+
+
 /* InlineCode-ASYHLN3E.css */
 /*
  * One identifier inside a sentence: a mono chip on the inset surface.
@@ -25310,7 +25354,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* Prose-BTXNFT2Q.css */
+/* Prose-OMV2T6NT.css */
 /*
  * Natural language: the proportional face, real leading, a bounded measure.
  */
@@ -25374,7 +25418,23 @@ button.crewlet-presence-stack__member:focus-visible {
   transition: color var(--motion-duration-slow) var(--motion-easing-default);
 }
 
-.crewlet-prose--streaming::after {
+/*
+ * THE CARET ENDS THE LAST LINE OF TEXT, never a line of its own. On a block
+ * that holds rendered Markdown, the block's own ::after came after its last
+ * paragraph or list, so the caret stood alone on a new line; and on a reply
+ * with no words yet it stood alone at the start. So: no caret on an empty
+ * block, none on the block itself when its children are blocks, and the caret
+ * after the last child instead when that child is a paragraph or a heading,
+ * whose last line it then ends. A list, a table or code last draws none: a
+ * caret after its final row reads as a stray mark, not as the end of a line.
+ */
+.crewlet-prose--streaming:empty::after,
+.crewlet-prose--streaming:has(> :is(p, div, ul, ol, pre, table, blockquote, h1, h2, h3, h4, h5, h6))::after {
+  content: none;
+}
+
+.crewlet-prose--streaming::after,
+.crewlet-prose--streaming > :is(p, h1, h2, h3, h4, h5, h6):last-child::after {
   content: '';
   display: inline-block;
   width: 2px;
@@ -25406,7 +25466,8 @@ button.crewlet-presence-stack__member:focus-visible {
     transition: none;
   }
 
-  .crewlet-prose--streaming::after {
+  .crewlet-prose--streaming::after,
+  .crewlet-prose--streaming > :is(p, h1, h2, h3, h4, h5, h6):last-child::after {
     animation: none;
   }
 }
@@ -27861,6 +27922,182 @@ svg.crewlet-select__chevron {
 }
 
 
+/* SendButton-L4UX54XS.css */
+/*
+ * A chat composer's Send, which becomes Stop. See SendButton.tsx for what each
+ * state says. The surfaces, edges and hover and press inks are IconButton's
+ * primary and secondary squares; this sheet adds the glyph cross fade, the
+ * quiet held state, the press and the running arc.
+ */
+
+/*
+ * THE ARC'S ANGLE, registered so it can turn. An unregistered custom property
+ * animates in one step at the halfway point, which would make the arc jump
+ * between two places rather than travel.
+ */
+@property --crewlet-send-button-arc {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+.crewlet-send-button {
+  position: relative;
+  transition:
+    background var(--motion-duration-fast) var(--motion-easing-default),
+    border-color var(--motion-duration-fast) var(--motion-easing-default),
+    color var(--motion-duration-fast) var(--motion-easing-default),
+    transform var(--motion-duration-instant) var(--motion-easing-out);
+}
+
+/* A press sinks the square a little, so the pointer feels it land. */
+.crewlet-send-button:active:not([aria-disabled='true']) {
+  transform: scale(0.94);
+}
+
+/*
+ * BOTH GLYPHS IN ONE CELL. The one in use stands at full size; the other is
+ * faded and scaled to half, and the two trade places on the base step with
+ * the entering surface's ease, so Send turning into Stop reads as one control
+ * changing its mind rather than as two buttons swapping.
+ */
+.crewlet-send-button__glyphs {
+  display: grid;
+  place-items: center;
+}
+
+.crewlet-send-button__glyph {
+  grid-area: 1 / 1;
+  transition:
+    opacity var(--motion-duration-base) var(--motion-easing-default),
+    transform var(--motion-duration-base) var(--motion-easing-emphasized);
+}
+
+.crewlet-send-button--send .crewlet-send-button__glyph--stop,
+.crewlet-send-button--stop .crewlet-send-button__glyph--send {
+  opacity: 0;
+  transform: scale(0.5);
+}
+
+/*
+ * THE STOP SQUARE IS SMALLER THAN THE ARROW: a filled block at the arrow's
+ * 14px was the heaviest mark on the panel. At the 12px step its square is
+ * nine pixels, crisp on the pixel grid and the weight of the arrow's stroke.
+ */
+.crewlet-send-button.crewlet-icon-btn--md .crewlet-send-button__glyph--stop {
+  width: var(--font-size-xs);
+  height: var(--font-size-xs);
+}
+
+/*
+ * HELD, AT FULL OPACITY, with the glyph in the tertiary ink. A faded accent
+ * block read as a muddy, broken button on the dark ground, and the composer's
+ * own fade multiplied it further. Send held is the accent's soft tint, so it
+ * is still the purple control that lights up the moment there is something
+ * to send; Stop held (a stop already under way) is the neutral hover overlay,
+ * since nothing about it is waiting to light up.
+ */
+.crewlet-send-button.crewlet-icon-btn[aria-disabled='true'] {
+  opacity: 1;
+  border-color: transparent;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-send-button--send.crewlet-icon-btn[aria-disabled='true'] {
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-send-button--stop.crewlet-icon-btn[aria-disabled='true'] {
+  background: var(--color-surface-hover);
+}
+
+/*
+ * THE RUNNING ARC: a band of the accent travelling round Stop's edge, over its
+ * own 1px border, with a tail that fades behind it. The band is a conic
+ * gradient cut to a 2px ring by a mask (a mask reads only alpha, so its black
+ * is opacity rather than a colour), so it follows the rounded corner exactly.
+ * One round is the working ring's sweep period, and it fades in on the
+ * moderate step as Stop arrives.
+ */
+.crewlet-send-button--stop::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  padding: 2px;
+  border-radius: inherit;
+  background: conic-gradient(
+    from var(--crewlet-send-button-arc),
+    transparent 0turn,
+    transparent 0.55turn,
+    var(--color-brand-accent) 1turn
+  );
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#000 0 0) content-box exclude,
+    linear-gradient(#000 0 0);
+  /* Paint, never a target. */
+  pointer-events: none;
+  animation:
+    crewlet-send-button-arc var(--motion-duration-sweep) linear infinite,
+    crewlet-send-button-arc-in var(--motion-duration-moderate) var(--motion-easing-out);
+}
+
+/* A stop already under way has nothing left to show running. */
+.crewlet-send-button--stop[aria-disabled='true']::before {
+  display: none;
+}
+
+@keyframes crewlet-send-button-arc {
+  to {
+    --crewlet-send-button-arc: 360deg;
+  }
+}
+
+@keyframes crewlet-send-button-arc-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+/*
+ * UNDER REDUCED MOTION nothing travels or scales: the glyphs change in place,
+ * and the arc becomes the whole edge in the accent, still and still saying
+ * that something runs.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-send-button {
+    transition: none;
+  }
+
+  .crewlet-send-button:active:not([aria-disabled='true']) {
+    transform: none;
+  }
+
+  .crewlet-send-button__glyph {
+    transition: none;
+  }
+
+  .crewlet-send-button--stop::before {
+    background: var(--color-brand-accent);
+    animation: none;
+  }
+}
+
+/* The system draws its own edge; a masked gradient is not repainted there. */
+@media (forced-colors: active) {
+  .crewlet-send-button--stop::before {
+    display: none;
+  }
+}
+
+
 /* SettingsTable-6DUFAFXG.css */
 /*
  * SettingsTable: a read-only table of settings, one row each, on one grid.
@@ -35564,6 +35801,131 @@ b.crewlet-switcher__match {
 }
 
 
+/* ThinkingIndicator-QJMX2TXC.css */
+/*
+ * 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;
+  }
+}
+
+
 /* TileGrid-UYMVVVJK.css */
 /*
  * TileGrid: tiles on a fixed track count that folds by the grid's own width.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.59.0",
+  "version": "0.61.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.59.0",
-    "@crewlethq/tokens": "0.59.0",
+    "@crewlethq/icons": "0.61.0",
+    "@crewlethq/tokens": "0.61.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/chunk-P7QDOKTP.js

@@ -1,27 +0,0 @@
-import { IconButton } from './chunk-2GIUKIFV.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import { forwardRef } from 'react';
-import { SquareGlyph, ArrowUpGlyph } from '@crewlethq/icons/glyphs';
-import { jsx } from 'react/jsx-runtime';
-
-var SEND_BUTTON_LABELS = { send: "Send", stop: "Stop" };
-var SendButton = forwardRef(function SendButton2({ mode, onPress, disabledReason, labels: overrides, className, ...rest }, ref) {
-  const labels = overrides ? { ...SEND_BUTTON_LABELS, ...overrides } : SEND_BUTTON_LABELS;
-  const stopping = mode === "stop";
-  return /* @__PURE__ */ jsx(
-    IconButton,
-    {
-      ...rest,
-      ref,
-      size: "md",
-      variant: stopping ? "secondary" : "primary",
-      label: stopping ? labels.stop : labels.send,
-      icon: stopping ? /* @__PURE__ */ jsx(SquareGlyph, { filled: true }) : /* @__PURE__ */ jsx(ArrowUpGlyph, {}),
-      disabledReason: stopping ? void 0 : disabledReason,
-      className: cx("crewlet-send-button", `crewlet-send-button--${mode}`, className),
-      onClick: onPress
-    }
-  );
-});
-
-export { SEND_BUTTON_LABELS, SendButton };