@crewlethq/ui 0.87.0 → 0.89.0

package/dist/styles.css

@@ -25251,7 +25251,7 @@ a.crewlet-link-card:hover .crewlet-link-card__title {
 }
 
 
-/* List-JOELBLTU.css */
+/* List-ZZF6ZHRT.css */
 /*
  * The non-tabular list. One row recipe, four framings.
  *
@@ -25464,6 +25464,38 @@ a.crewlet-link-card:hover .crewlet-link-card__title {
   max-inline-size: var(--size-measure-wide);
 }
 
+/*
+ * A ROW WITH A CONTROL OF ITS OWN (`action`) or a line under it (`note`): the
+ * row's link or button takes the room and the action stands beside it, at the
+ * row's end and on its middle, so the two are two controls and the action is
+ * never inside the row's hover or its name. The note wraps under both, at the
+ * row's own inset.
+ */
+.crewlet-list__item--split {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: var(--spacing-2);
+}
+
+.crewlet-list__item--split > .crewlet-list__row {
+  flex: 1 1 0;
+}
+
+.crewlet-list__action {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding-inline-end: var(--spacing-3);
+}
+
+.crewlet-list__note {
+  flex-basis: 100%;
+  min-width: 0;
+  padding: 0 var(--spacing-3) var(--spacing-2);
+}
+
 /* ---- States ------------------------------------------------------------ */
 
 /*
@@ -30336,7 +30368,7 @@ button.crewlet-mention-chip:focus-visible {
 }
 
 
-/* PersonRow-V5GTPNVP.css */
+/* PersonRow-ZR6US2QJ.css */
 /*
  * PersonRow: a person or an agent as one row of a list, as a button or as a
  * listbox option. One design for every list of people.
@@ -30486,6 +30518,31 @@ button.crewlet-mention-chip:focus-visible {
   color: var(--color-text-on-accent);
 }
 
+/*
+ * A ROW WITH A CONTROL OF ITS OWN (`action`): the row's button takes the room
+ * and the control stands after it on the row's middle, outside the button's
+ * hover, so the two read as two controls.
+ */
+.crewlet-person-row-group {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-person-row-group > .crewlet-person-row {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.crewlet-person-row__action {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding-inline-end: var(--spacing-2);
+}
+
 /*
  * FORCED COLORS repaints every background to Canvas, which took the chosen
  * tint and the arrows' row with it. An outline is the one mark the mode
@@ -33305,6 +33362,64 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
+/* RoomRow-3OTEY6GK.css */
+/*
+ * RoomRow: a room as a directory of rooms lists it, on List.Item.
+ *
+ * The row's words stack: the name line, the topic, the facts. They take the
+ * conversation's own scale (ChatScale.css), so a room's name in a directory
+ * is the size it is in the room's header and its messages.
+ */
+
+.crewlet-room-row > .crewlet-list__row > .crewlet-list__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+/* A room's name wraps rather than pushing past the row: one unbroken name (a
+   slug with no hyphen) otherwise runs over its own tag and into the action. */
+.crewlet-room-row__name {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--spacing-5);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--crewlet-chat-text);
+  font-weight: var(--font-weight-medium);
+}
+
+.crewlet-room-row__mark {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-room-row__title {
+  min-width: 0;
+}
+
+.crewlet-room-row__topic {
+  overflow: hidden;
+  color: var(--color-text-secondary);
+  font-size: var(--crewlet-chat-text);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-room-row__facts {
+  color: var(--color-text-secondary);
+  font-size: var(--crewlet-chat-meta);
+}
+
+.crewlet-room-row__sep {
+  color: var(--color-text-tertiary);
+}
+
+
 /* RunChip-K5DGHXHO.css */
 /*
  * A request's state on the disclosure trigger. Only what differs from the
@@ -40651,7 +40766,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* Switch-AUYLQLTN.css */
+/* Switch-XJE34BZH.css */
 /*
  * Switch: a setting that takes effect as it moves.
  *
@@ -40826,6 +40941,21 @@ svg.crewlet-select__chevron {
   border-radius: var(--radius-lg);
 }
 
+/*
+ * THE TRACK ALONE, for a switch whose label is its name and not drawn: no
+ * gap after it and no padding to centre a line of text that is not there, so
+ * it stands on the middle of the row it ends.
+ */
+.crewlet-switch--label-hidden {
+  align-items: center;
+  gap: 0;
+  padding-block: 0;
+}
+
+.crewlet-switch--label-hidden .crewlet-switch__track {
+  margin-block: 0;
+}
+
 .crewlet-switch.is-disabled,
 .crewlet-switch.is-disabled .crewlet-switch__control {
   cursor: not-allowed;
@@ -43669,7 +43799,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* ThinkingIndicator-S7ZL2C77.css */
+/* ThinkingIndicator-G72NYYAM.css */
 /*
  * Ask Crewlet at work: the Ask Crewlet mark, its spark turning, and a line
  * of status under a shimmer. See ThinkingIndicator.tsx for why it replaces a
@@ -43864,6 +43994,33 @@ b.crewlet-switcher__match {
   }
 }
 
+/*
+ * QUEUED, THE MARK RESTS AND THE LINE IS STILL. Work has not started, so
+ * nothing moves: both parts of the mark stop in the idle pose (the spark at
+ * full size and upright, the companion at full strength), which is the pose
+ * the working loop rests in for half of every period, and the line drops its
+ * shimmer for the secondary ink. The same height, so the indicator starts
+ * moving in place when the work begins.
+ */
+.crewlet-thinking--queued .crewlet-thinking__mark [data-motion='turn'],
+.crewlet-thinking--queued .crewlet-thinking__mark [data-motion='twinkle'] {
+  animation: none;
+  transform: none;
+  opacity: 1;
+}
+
+.crewlet-thinking--queued .crewlet-thinking__status {
+  background-image: none;
+  color: var(--color-text-secondary);
+  animation: crewlet-thinking-enter var(--motion-duration-moderate) var(--motion-easing-out);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-thinking--queued .crewlet-thinking__status {
+    animation: none;
+  }
+}
+
 /* The system's own ink: a gradient clipped to text is dropped there. */
 @media (forced-colors: active) {
   .crewlet-thinking__status {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.87.0",
+  "version": "0.89.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.87.0",
-    "@crewlethq/tokens": "0.87.0",
+    "@crewlethq/icons": "0.89.0",
+    "@crewlethq/tokens": "0.89.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/{chunk-K2HEYQJL.js → chunk-22CU7V4J.js}

@@ -1,7 +1,7 @@
 import { HuePicker } from './chunk-SHH7UD5U.js';
 import { Popover } from './chunk-EC6EUIAD.js';
-import { CharacterPicker } from './chunk-LNQSNXGJ.js';
 import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
+import { CharacterPicker } from './chunk-LNQSNXGJ.js';
 import { Avatar } from './chunk-XZY6S3UC.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AvatarPicker-POOJUOKC.css';

package/dist/{chunk-CWCQCOIG.js → chunk-7IWZN5Q2.js}

@@ -1,8 +1,8 @@
 import { Skeleton } from './chunk-I4IUX3JF.js';
 import { PrincipalAvatar } from './chunk-HF5L56YQ.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
-import { AvatarStack } from './chunk-YTLWOHOY.js';
 import { Card } from './chunk-U2IQNDDR.js';
+import { AvatarStack } from './chunk-YTLWOHOY.js';
 import { ArtifactKindGround } from './chunk-J5T5TDM2.js';
 import { Checkbox } from './chunk-YQ7Q52XU.js';
 import { ArtifactAccessGlyph } from './chunk-DOY3KC6I.js';

package/dist/{chunk-3BVNNQZY.js → chunk-WRZPO4YL.js}

@@ -1,5 +1,5 @@
-import { PageHeader } from './chunk-FPDIHEM4.js';
 import { Stepper } from './chunk-TMML7BHT.js';
+import { PageHeader } from './chunk-FPDIHEM4.js';
 import { useMediaMatch } from './chunk-YJQXESOJ.js';
 import { Disclosure } from './chunk-NAHA62WD.js';
 import { useHeadingLevel, nextHeadingLevel, headingTag, HeadingLevelProvider } from './chunk-PQADV6P6.js';