@crewlethq/ui 0.81.2 → 0.83.0

package/dist/{SidebarNav-VTQ3G4AE.css → SidebarNav-E7PZGGA6.css}

@@ -87,6 +87,61 @@
   color: var(--color-text-tertiary);
 }
 
+/*
+ * A HEADING THAT FOLDS ITS GROUP (`collapsible`): the button is the heading's
+ * words and a chevron, the chevron centred in the glyph column (a nav glyph's
+ * 14px; the xs chevron is 12px) and the words on the label line, so the
+ * headings and the rows of a folded list stay one grid. It is the target
+ * floor tall, the head's own height, and as wide as its words, so the head's
+ * control keeps its own target at the end.
+ *
+ * THE RING IS DRAWN INSIDE ITS EDGE, because the words ellipsize and the box
+ * that cuts them would cut an outset ring on every side.
+ */
+.crewlet-nav-group__toggle {
+  display: inline-flex;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  min-width: 0;
+  min-height: var(--size-target-min);
+  margin: 0;
+  padding: 0 var(--spacing-1) 0 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-tertiary);
+  font: inherit;
+  cursor: pointer;
+  transition: color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-nav-group__toggle:hover {
+  color: var(--color-text-primary);
+}
+
+.crewlet-nav-group__toggle:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The words take the button's ink, so the heading lifts as one. */
+.crewlet-nav-group__toggle > .crewlet-nav-group__label {
+  color: inherit;
+}
+
+.crewlet-nav-group__chevron {
+  display: inline-flex;
+  flex: none;
+  margin: 0 calc((14px - 12px) / 2);
+  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+/* Folded, the chevron points at the words it would open. */
+.crewlet-nav-group--collapsed .crewlet-nav-group__chevron {
+  transform: rotate(-90deg);
+}
+
 /* The heading's control. Pushed to the end whether or not the heading has
    words, and at the floor the heading stands at. */
 .crewlet-nav-group__action {
@@ -332,13 +387,16 @@
  * somebody who cannot separate the hue at all: the filled pill is the signal,
  * the figure is the count.
  *
- * The design's 18px pill, at least as wide as it is tall so a single digit is
- * a round mark and not a lozenge, and following the density like the xs Tag
- * it matches. The label is the on-accent step, the primary action's own pair,
- * on every row alike, because the fill is opaque.
+ * The chrome's one count badge (`--size-badge`, 16px with a 10px figure), at
+ * least as wide as it is tall so a single digit is a round mark and not a
+ * lozenge, and following the density. The same pill is drawn on the compact
+ * rail's tiles and in its flyouts, so a count waiting for the reader is one
+ * mark wherever it is; at 18px with an 11px figure it read louder than the
+ * names beside it. The label is the on-accent step, the primary action's own
+ * pair, on every row alike, because the fill is opaque.
  */
 .crewlet-nav-item__badge {
-  --crewlet-nav-item-badge-size: calc(18px * var(--density, 1));
+  --crewlet-nav-item-badge-size: var(--size-badge);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -347,11 +405,11 @@
   min-width: var(--crewlet-nav-item-badge-size);
   height: var(--crewlet-nav-item-badge-size);
   margin-left: auto;
-  padding: 0 calc(var(--spacing-1) + 1px);
+  padding: 0 var(--size-badge-pad);
   border-radius: var(--radius-pill);
   background: var(--color-brand-accent);
   color: var(--color-text-on-accent);
-  font-size: var(--font-size-2xs);
+  font-size: var(--font-size-badge);
   font-weight: var(--font-weight-semibold);
   font-variant-numeric: tabular-nums;
   line-height: 1;
@@ -429,8 +487,75 @@
   border-left-color: var(--color-border-strong);
 }
 
+/*
+ * THE DENSE LIST (`dense`): a list read in passing that runs long, a step
+ * denser than the application's navigation.
+ *
+ * Its rows stand at the 24px target floor, the gutter is halved so a row's
+ * highlight runs nearly from edge to edge (a long bar rather than a pill), and
+ * the row's pad grows by exactly what the gutter gave up, so every glyph and
+ * name stays on the line it was on, whatever the surface set the two tokens
+ * to. The glyph column is as wide as a small face (an `Avatar` at `xs`), so a
+ * face, a glyph and a group's count stand in one column and every name starts
+ * on one line. Names are set in the regular weight, a step lighter than the
+ * navigation's, which is what lets an unread row stand out by weight.
+ */
+.crewlet-sidebar-nav--dense {
+  --crewlet-nav-dense-pad: calc(var(--size-nav-row-pad) + var(--size-nav-gutter) - var(--spacing-1));
+  --crewlet-nav-dense-slot: 20px;
+  padding-right: var(--spacing-1);
+  padding-left: var(--spacing-1);
+}
+
+.crewlet-sidebar-nav--dense .crewlet-nav-item__row {
+  min-height: var(--size-target-min);
+  padding-right: var(--crewlet-nav-dense-pad);
+  padding-left: var(--crewlet-nav-dense-pad);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-sidebar-nav--dense .crewlet-nav-group__head {
+  padding-right: calc(var(--crewlet-nav-dense-pad) - (var(--size-target-min) - 14px) / 2);
+  padding-left: var(--crewlet-nav-dense-pad);
+}
+
+.crewlet-sidebar-nav--dense .crewlet-nav-item__icon {
+  min-width: var(--crewlet-nav-dense-slot);
+}
+
+.crewlet-sidebar-nav--dense .crewlet-nav-group__chevron {
+  margin-right: calc((var(--crewlet-nav-dense-slot) - 12px) / 2);
+  margin-left: calc((var(--crewlet-nav-dense-slot) - 12px) / 2);
+}
+
+.crewlet-sidebar-nav--dense .crewlet-nav-item__children {
+  margin-left: var(--crewlet-nav-dense-pad);
+  padding-left: calc(var(--crewlet-nav-dense-slot) + var(--spacing-2) + var(--spacing-1) / 2 - var(--crewlet-nav-dense-pad) - 1px);
+}
+
+/*
+ * A ROW WITH NEWS (`unread`): its name a step heavier than its neighbours' and
+ * in the primary ink, which is the whole of the signal in a dense list whose
+ * names are regular. A muted row is never drawn unread (the component drops
+ * the class), so the two rules never meet.
+ */
+.crewlet-nav-item--unread > .crewlet-nav-item__head > .crewlet-nav-item__row {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-medium);
+}
+
+/*
+ * A MUTED ROW rests in the quiet ink, glyph and name together, and lifts as
+ * every row does: under the pointer, and while it is the row the reader is on.
+ */
+.crewlet-nav-item--muted > .crewlet-nav-item__head > .crewlet-nav-item__row:not([aria-current]):not(:hover) {
+  color: var(--color-text-tertiary);
+}
+
 @media (prefers-reduced-motion: reduce) {
   .crewlet-nav-group__action,
+  .crewlet-nav-group__toggle,
+  .crewlet-nav-group__chevron,
   .crewlet-nav-item__row,
   .crewlet-nav-item__chevron {
     transition: none;

package/dist/Skeleton/index.js

@@ -1,3 +1,3 @@
-export { Skeleton } from '../chunk-BRLZXYPA.js';
+export { Skeleton } from '../chunk-I4IUX3JF.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Skeleton-7ZA5ETJM.css → Skeleton-GIXV3KK5.css}

@@ -80,10 +80,12 @@
 .crewlet-skeleton__line--label { height: 13px; width: 40%; margin-bottom: var(--spacing-2); }
 .crewlet-skeleton__line--value { height: 14px; width: 80%; }
 
+/* A face's placeholder takes a face's shape, the rounded square every Avatar
+   is drawn as: at 40px its corner is 8.9px, which the md step rounds to. */
 .crewlet-skeleton__avatar {
   width: 40px;
   height: 40px;
-  border-radius: var(--radius-circle);
+  border-radius: var(--radius-md);
   flex-shrink: 0;
 }
 

package/dist/SlideCompare/index.js

@@ -1,9 +1,9 @@
-export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-DV5L2GRY.js';
-import '../chunk-RMEBFYL7.js';
+export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-XJMES7AE.js';
+import '../chunk-O6EV6GKI.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideFilmstrip/index.js

@@ -1,14 +1,16 @@
-export { SlideFilmstrip } from '../chunk-TPCBPGSB.js';
-import '../chunk-RMEBFYL7.js';
-import '../chunk-MPVMB2DV.js';
-import '../chunk-ANTAQAR4.js';
-import '../chunk-2G355KDJ.js';
-import '../chunk-OQG4P5KU.js';
+export { SlideFilmstrip } from '../chunk-RO5JU6SN.js';
+import '../chunk-O6EV6GKI.js';
+import '../chunk-BVML4UVB.js';
+import '../chunk-YJQXESOJ.js';
+import '../chunk-TGGYSQRD.js';
+import '../chunk-L72URIHR.js';
+import '../chunk-CMAZZY2I.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideGrid/index.js

@@ -1,6 +1,6 @@
-export { SlideGrid } from '../chunk-7MGXHCVK.js';
-import '../chunk-RMEBFYL7.js';
+export { SlideGrid } from '../chunk-6M2N6ETA.js';
+import '../chunk-O6EV6GKI.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideStage/index.js

@@ -1,5 +1,5 @@
-export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-RMEBFYL7.js';
+export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-O6EV6GKI.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SourceEditor/index.js

@@ -1,4 +1,4 @@
-export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from '../chunk-4TMBAOXK.js';
-import '../chunk-NUZHC6MM.js';
+export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from '../chunk-PW57R4BN.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/StatusCard/index.js

@@ -1,9 +1,9 @@
-export { StatusCard } from '../chunk-RTMNULTL.js';
-import '../chunk-VERJCAJ4.js';
-import '../chunk-CYQBDZ6M.js';
-import '../chunk-4AUTALJA.js';
+export { StatusCard } from '../chunk-FLW5U7YS.js';
+import '../chunk-LBGKLYBY.js';
+import '../chunk-U2IQNDDR.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-MLDTLZAO.js';
+import '../chunk-CYQBDZ6M.js';
+import '../chunk-D2GT3CR4.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Switcher/index.js

@@ -1,19 +1,20 @@
-export { Switcher } from '../chunk-YQDRJZ5J.js';
-import '../chunk-C667GCU7.js';
-import '../chunk-7KHM2FZH.js';
-import '../chunk-KHJIEPZV.js';
+export { Switcher } from '../chunk-7M7WKYOV.js';
+import '../chunk-ZXXZESCD.js';
+import '../chunk-YGRTX67J.js';
 import '../chunk-HBDA76EZ.js';
-import '../chunk-BRLZXYPA.js';
-import '../chunk-FB3TCNQP.js';
+import '../chunk-EC6EUIAD.js';
+import '../chunk-I4IUX3JF.js';
+import '../chunk-YJQXESOJ.js';
+import '../chunk-L72URIHR.js';
+import '../chunk-O7N6W52M.js';
 import '../chunk-PGCLHYVP.js';
-import '../chunk-PQADV6P6.js';
-import '../chunk-2G355KDJ.js';
-import '../chunk-RTPQDNW3.js';
 import '../chunk-DGXZ635L.js';
-import '../chunk-OMV5W53A.js';
 import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TableCells/index.js

@@ -1,10 +1,10 @@
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-VG3SIJ3M.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-AFLS26AC.js';
 import '../chunk-QF5UNP4T.js';
-import '../chunk-VERJCAJ4.js';
-import '../chunk-CYQBDZ6M.js';
+import '../chunk-LBGKLYBY.js';
 import '../chunk-EJNJMHQG.js';
 import '../chunk-RE3FBGQQ.js';
-import '../chunk-BT3GB7HC.js';
-import '../chunk-KTIQSSME.js';
+import '../chunk-IRONPJB4.js';
+import '../chunk-XZY6S3UC.js';
+import '../chunk-CYQBDZ6M.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tabs/index.js

@@ -1,14 +1,15 @@
-export { TabPanel, Tabs, tabId } from '../chunk-2IIHMJMZ.js';
+export { TabPanel, Tabs, tabId } from '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-OQG4P5KU.js';
+import '../chunk-TGGYSQRD.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-D2GT3CR4.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tag/Tag.d.ts

@@ -28,7 +28,14 @@ export type TagSize = 'xs' | 'sm' | 'md';
  * nothing else in the build would ever report.
  */
 export type InteractiveTagSize = Exclude<TagSize, 'xs'>;
-export type TagAppearance = 'soft' | 'outline';
+/**
+ * How the pill is drawn. `soft` is its tone's tint (the default), `outline` the
+ * boundary with no tint. `quiet` is a LABEL rather than a pill: a small filled
+ * mark with no boundary and square-ish corners, 16px tall in the label's own
+ * register (a seat's kind beside its name, "Agent"), so it reads as part of
+ * the line it sits in rather than as a control. It takes no size step.
+ */
+export type TagAppearance = 'soft' | 'outline' | 'quiet';
 interface TagLook {
     /** The state this tag names. Neutral by default, which is what a category such as a phase takes. */
     variant?: TagVariant | undefined;
@@ -44,7 +51,7 @@ interface TagLook {
      * carrier. With a hue the variant colours nothing, and `dot` draws neutral.
      */
     hue?: NodeHue | undefined;
-    /** A tinted fill, or a boundary over the surface beneath. */
+    /** A tinted fill, a boundary over the surface beneath, or a quiet label. */
     appearance?: TagAppearance | undefined;
     /** Drawn before the label. A glyph component, not a name. */
     leadingIcon?: ReactNode;

package/dist/Tag/index.js

@@ -1,3 +1,3 @@
-export { Tag } from '../chunk-VERJCAJ4.js';
+export { Tag } from '../chunk-LBGKLYBY.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Tag-JTJVZM2D.css → Tag-WLDOROB5.css}

@@ -302,6 +302,30 @@
   --crewlet-tag-ink: var(--color-text-tertiary);
 }
 
+/*
+ * THE QUIET LABEL (`appearance="quiet"`): a seat's kind beside its name
+ * ("Agent"), a small filled mark with no boundary, so it reads as part of the
+ * name line rather than as a control. 16px tall with a step of room each side,
+ * the xs corner rather than a pill's round ends, and the label register at the
+ * regular weight. The neutral label sits on the soft fill under the secondary
+ * ink; a tone keeps its own tint and ink. It takes no size step: these rules
+ * come after the steps, at their specificity, so a step cannot reshape it.
+ */
+.crewlet-tag--quiet {
+  --crewlet-tag-height: calc(16px * var(--density, 1));
+  --crewlet-tag-pad: var(--spacing-1);
+  --crewlet-tag-edge: transparent;
+  gap: var(--spacing-1);
+  border-radius: var(--radius-xs);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-regular);
+}
+
+.crewlet-tag--neutral.crewlet-tag--quiet {
+  --crewlet-tag-fill: var(--color-fill-soft);
+  --crewlet-tag-ink: var(--color-text-secondary);
+}
+
 /* ── the interactive form ──────────────────────────────────────────────── */
 
 .crewlet-tag--actionable {

package/dist/TagsInput/index.js

@@ -1,11 +1,11 @@
-export { TagsInput } from '../chunk-WK4FQPYW.js';
-import '../chunk-7KHM2FZH.js';
-import '../chunk-VERJCAJ4.js';
+export { TagsInput } from '../chunk-77VOASOY.js';
+import '../chunk-YGRTX67J.js';
+import '../chunk-LBGKLYBY.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-2G355KDJ.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-2G355KDJ.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThemeGallery/index.js

@@ -1,9 +1,9 @@
-export { ThemeGallery } from '../chunk-63GBSOLU.js';
+export { ThemeGallery } from '../chunk-NXBCAXP5.js';
 import '../chunk-3XQUEF5C.js';
-import '../chunk-7KHM2FZH.js';
-import '../chunk-VERJCAJ4.js';
+import '../chunk-YGRTX67J.js';
+import '../chunk-LBGKLYBY.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-H5XTJ7GJ.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThemeSwitcher/index.js

@@ -1,19 +1,20 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-YB64PWIN.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-5V6GW6HK.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
 import '../chunk-36WK24AI.js';
-import '../chunk-6R334YT3.js';
-import '../chunk-2IIHMJMZ.js';
+import '../chunk-AZYE7NR4.js';
+import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-MLDTLZAO.js';
-import '../chunk-OQG4P5KU.js';
+import '../chunk-TGGYSQRD.js';
+import '../chunk-L72URIHR.js';
 import '../chunk-DGXZ635L.js';
+import '../chunk-XSPCITPN.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-2YTOOH3A.js';
-import '../chunk-XSPCITPN.js';
-import '../chunk-H5XTJ7GJ.js';
+import '../chunk-TUEM2XIW.js';
+import '../chunk-4ITETIGZ.js';
 import '../chunk-UAUP6XGK.js';
-import '../chunk-NUZHC6MM.js';
+import '../chunk-D2GT3CR4.js';
 import '../chunk-UT6CW3C7.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThinkingIndicator/index.js

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

package/dist/{ThinkingIndicator-JMK2TNMZ.css → ThinkingIndicator-S7ZL2C77.css}

@@ -8,12 +8,20 @@
  * 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.
+ *
+ * NEVER WIDER THAN ITS COLUMN. The status never wraps, so where the
+ * indicator is sized by its content (a flex column that starts its items on
+ * the start edge, as a message's footer does) a long status made it as wide
+ * as its words and widened the column with it, and a phone's transcript
+ * scrolled sideways. Held to its container, the status truncates as it was
+ * written to.
  */
 .crewlet-thinking {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
   min-width: 0;
+  max-width: 100%;
   min-height: calc(var(--font-size-compact) * var(--font-line-height-relaxed));
   font-family: var(--font-family-sans);
   font-size: var(--font-size-compact);

package/dist/ThreadSummary/ThreadSummary.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+import { type AvatarStackMember } from '../Avatar/index.js';
+export interface ThreadSummaryLabels {
+    /** "1 reply", "4 replies". */
+    replies: (count: number) => string;
+    /** The replies the reader has not read: "2 new". */
+    fresh: (count: number) => string;
+    /** When the last reply came, given the caller's words for it: "Last reply 12m ago". */
+    last: (when: string) => string;
+    /** Shown in place of the last reply's time under the pointer. */
+    view: string;
+    /** Shown in its place while the thread is open beside the room. */
+    open: string;
+}
+export declare const THREAD_SUMMARY_LABELS: ThreadSummaryLabels;
+export interface ThreadSummaryProps {
+    /** How many replies the thread holds. */
+    replies: number;
+    /** Who replied, each once, as faces: at most three are drawn. */
+    participants: readonly AvatarStackMember[];
+    /** When the last reply came, in the caller's words: "12m ago". */
+    last: string;
+    /** Replies the reader has not read; none by default. */
+    unread?: number | undefined;
+    /** Under the line: an agent writing a reply in the thread, as a `ThinkingIndicator`. */
+    working?: ReactNode;
+    /** The thread is open beside the room (`aria-expanded`). */
+    open?: boolean | undefined;
+    onOpen: () => void;
+    labels?: Partial<ThreadSummaryLabels> | undefined;
+    className?: string | undefined;
+}
+/**
+ * The line under a message that has replies: the repliers' faces, "4
+ * replies" at the medium weight in the accent's ink, how many are new, and
+ * when the last one came. It opens the thread.
+ *
+ * UNDER THE POINTER OR THE KEYBOARD it is lifted onto the transcript's own
+ * ground inside a hairline, and "View thread" takes the place of the last
+ * reply's time in the same cell, so the line keeps its width. Its faces sit
+ * on the content edge: the line's inset and edge are taken back outside it.
+ */
+export declare function ThreadSummary({ replies, participants, last, unread, working, open, onOpen, labels: overrides, className, }: ThreadSummaryProps): import("react").JSX.Element;

package/dist/ThreadSummary/index.d.ts

@@ -0,0 +1,4 @@
+import '../ChatMessage/ChatScale.css';
+import './ThreadSummary.css';
+export { THREAD_SUMMARY_LABELS, ThreadSummary } from './ThreadSummary.js';
+export type { ThreadSummaryLabels, ThreadSummaryProps } from './ThreadSummary.js';

package/dist/ThreadSummary/index.js

@@ -0,0 +1,6 @@
+export { THREAD_SUMMARY_LABELS, ThreadSummary } from '../chunk-YP2FS6SH.js';
+import '../chunk-LBGKLYBY.js';
+import '../chunk-IRONPJB4.js';
+import '../chunk-XZY6S3UC.js';
+import '../chunk-CYQBDZ6M.js';
+import '../chunk-ODEQTPFM.js';