@crewlethq/ui 0.86.0 → 0.87.0

package/dist/styles.css

@@ -19092,6 +19092,55 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* DeliveryReceipt-RMZW2DMT.css */
+/*
+ * Who a person's message reached and who answered, under its words; and the
+ * same line over a composer, before the message is sent.
+ */
+
+.crewlet-delivery-receipt {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: var(--spacing-1);
+  max-width: 100%;
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--crewlet-chat-meta);
+  line-height: var(--font-line-height-snug);
+}
+
+.crewlet-delivery-receipt__part {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-delivery-receipt__mark {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-delivery-receipt__answered {
+  color: var(--color-text-secondary);
+}
+
+/* The one raised tone: a message nobody was asked to answer. Its mark takes
+   the warning ink, its words the secondary ink; the hint stays quiet. */
+.crewlet-delivery-receipt--none {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-delivery-receipt--none .crewlet-delivery-receipt__mark {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-delivery-receipt__hint {
+  color: var(--color-text-tertiary);
+}
+
+
 /* DescriptionList-VF7NIBXA.css */
 /*
  * Metadata pairs on one grid.
@@ -22736,7 +22785,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* InboxList-X5Q5WWAI.css */
+/* InboxList-NVPIL3WU.css */
 /*
  * The inbox's column: groups of rows, each row a control with the task it is
  * about under it, and the quiet toggles at the end.
@@ -22962,19 +23011,36 @@ a.crewlet-icon-btn {
 }
 
 /*
- * The avatar is centred on the head's line, the name it belongs to: its box
- * is one line tall and the avatar, a target taller than the line, overflows
- * it evenly into the control's top pad. Hung from the line's top by a pixel
- * it stood 3.6px under the name's middle, its top a step further from the
- * row's edge than its side.
+ * THE LEADING SLOT FITS WHAT IT HOLDS. It is at least a target square (and at
+ * least a line tall), with its mark centred in it, and it grows to a larger
+ * mark, such as a 32px face, rather than letting it spill: a fixed one-line
+ * box let a 32px face overflow it by 8px, up and to the left, until it all but
+ * touched the row's edge.
+ *
+ * THE NAME'S LINE IS CENTRED ON A TARGET-SIZED MARK by moving the words down
+ * rather than the mark up: the words start half the difference between the
+ * target and a line lower, and the control's top pad is that much shorter, so
+ * a row with a target-sized avatar keeps its height and its name where they
+ * were, with the avatar inside the control instead of over its pad. A larger
+ * mark hangs from the same top, beside the name's line and the one under it.
  */
+.crewlet-inbox-row__control--leading {
+  --crewlet-inbox-row-lift: max(0px, (var(--size-target-min) - 1lh) / 2);
+
+  padding-top: calc(var(--spacing-2) + var(--spacing-1) / 2 - var(--crewlet-inbox-row-lift));
+}
+
+.crewlet-inbox-row__control--leading > .crewlet-inbox-row__main {
+  padding-top: var(--crewlet-inbox-row-lift);
+}
+
 .crewlet-inbox-row__leading {
   display: inline-flex;
   flex: none;
   align-items: center;
   justify-content: center;
-  width: var(--size-target-min);
-  height: 1lh;
+  min-width: var(--size-target-min);
+  min-height: max(var(--size-target-min), 1lh);
 }
 
 .crewlet-inbox-row__main {
@@ -22984,24 +23050,49 @@ a.crewlet-icon-btn {
   min-width: 0;
 }
 
+/*
+ * THE HEAD IS ONE RUN OF WORDS: who, then what they did, wrapping as words do
+ * and stopping at two lines with an ellipsis. The name comes first, so it is
+ * the last thing a long qualifier can push out of sight. As one line of boxes
+ * the name was the only one allowed to shrink, so a qualifier longer than a
+ * word ("replied to a thread in Product Manager") squeezed the name to
+ * nothing and pushed the time past the row's edge.
+ *
+ * THE TIME FLOATS AT THE END OF THE FIRST LINE, so only that line gives up
+ * room to it and the second runs the row's full width: "replied to a thread
+ * in #engineering" keeps the room's name, the part of the line most worth
+ * reading, where a column of its own took the time's width from both lines.
+ * The float sits in a block of its own inside the clamp, which is where every
+ * engine lays a float out and still counts the clamped lines.
+ */
 .crewlet-inbox-row__head {
-  display: flex;
-  align-items: baseline;
-  gap: var(--spacing-1);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
   min-width: 0;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  color: var(--color-text-tertiary);
 }
 
-.crewlet-inbox-row__title {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.crewlet-inbox-row__head-text {
+  display: block;
+}
+
+/* The time (and any status), in the head's own line box, so the time sits on the name's baseline. */
+.crewlet-inbox-row__head-end {
+  float: inline-end;
+  margin-inline-start: var(--spacing-2);
   white-space: nowrap;
+}
+
+.crewlet-inbox-row__title {
   font-weight: var(--font-weight-medium);
   color: var(--color-text-primary);
 }
 
 .crewlet-inbox-row__qualifier {
-  flex: none;
   font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
 }
@@ -23011,8 +23102,6 @@ a.crewlet-icon-btn {
 }
 
 .crewlet-inbox-row__meta {
-  flex: none;
-  margin-inline-start: auto;
   font-size: var(--font-size-xs);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
@@ -23060,21 +23149,12 @@ a.crewlet-icon-btn {
   color: var(--color-text-secondary);
 }
 
+/* At the end of the first line, before the time when the row has both. */
 .crewlet-inbox-row__status {
   display: inline-flex;
-  flex: none;
   align-items: center;
 }
 
-/* With a status, the time stays at the end and the status sits beside it. */
-.crewlet-inbox-row__status + .crewlet-inbox-row__meta {
-  margin-inline-start: 0;
-}
-
-.crewlet-inbox-row__head > .crewlet-inbox-row__status {
-  margin-inline-start: auto;
-}
-
 /*
  * What came of the row: a glyph in the tone's ink, then words in the
  * secondary ink, on one line that wraps rather than cuts.
@@ -23130,7 +23210,9 @@ a.crewlet-icon-btn {
 
 /*
  * The task, under the words and lined up with them: the control's start pad,
- * the leading slot and the gap after it.
+ * a target-sized leading slot and the gap after it. The task sits outside the
+ * control, so it lines up with the words for a mark of the target size, the
+ * size `leading` asks for.
  */
 .crewlet-inbox-row__aside {
   min-width: 0;
@@ -25458,7 +25540,7 @@ a.crewlet-link-card:hover .crewlet-link-card__title {
 }
 
 
-/* ListDetail-Q7SFVKSO.css */
+/* ListDetail-WXBCLONL.css */
 /*
  * ListDetail: a list beside the detail of what is chosen in it, each scrolling
  * on its own in the height it is given, one pane where it is narrow
@@ -25526,6 +25608,12 @@ a.crewlet-link-card:hover .crewlet-link-card__title {
   min-height: 0;
 }
 
+/* A LIST THAT GROWS SCROLLS IN ITS OWN COLUMN, whatever it holds. The pane
+   left the scrolling to its content, which a DirectoryList does for its
+   groups and an InboxList does not: an activity list taller than the screen
+   ran past the pane's end, where the screen clipped its later rows and its
+   "older" link, with nothing to scroll them into view. A list that scrolls
+   itself fills the pane and never makes it overflow. */
 .crewlet-list-detail__list {
   display: flex;
   flex-direction: column;
@@ -25533,6 +25621,7 @@ a.crewlet-link-card:hover .crewlet-link-card__title {
   min-height: 0;
   padding-right: var(--crewlet-list-detail-gutter);
   border-right: 1px solid var(--color-border-default);
+  overflow-y: auto;
 }
 
 /* A DIRECTORY RUNS TO THE HAIRLINE. A DirectoryList is navigation: its lines
@@ -25567,7 +25656,6 @@ a.crewlet-link-card:hover .crewlet-link-card__title {
   .crewlet-list-detail__list {
     padding-right: 0;
     border-right: 0;
-    overflow-y: auto;
   }
 
   /* The list is the pane that scrolls now, and takes the detail's end where

package/package.json

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

package/dist/{Editor-VGNB35NJ.js → Editor-5D5Z3LBQ.js}

@@ -1,5 +1,5 @@
-import { richEditorLabels } from './chunk-2DMTW2Y3.js';
 import { schema, readMarkdown, writeMarkdown } from './chunk-7CSTEH5I.js';
+import { richEditorLabels } from './chunk-2DMTW2Y3.js';
 import './chunk-KOJPDCGQ.js';
 import { safeHref, MARKDOWN_CALLOUT_TONES } from './chunk-KBZO4B33.js';
 import { Toolbar } from './chunk-NXFTCPF6.js';

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

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

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

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

package/dist/{chunk-WCJTOKTY.js → chunk-LMEMH6DO.js}

@@ -1,5 +1,5 @@
-import { SlideStage, SLIDE_WIDTH, SLIDE_HEIGHT } from './chunk-O6EV6GKI.js';
 import { SlideNav } from './chunk-5AJR6X75.js';
+import { SlideStage, SLIDE_WIDTH, SLIDE_HEIGHT } from './chunk-O6EV6GKI.js';
 import { Eyebrow } from './chunk-RK4XPHVG.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-REWKR3S4.js → chunk-M576OESX.js}

@@ -1,5 +1,5 @@
-import { SidebarNav, NavItem } from './chunk-BRK3HXGZ.js';
 import { Select } from './chunk-3IWZVEXA.js';
+import { SidebarNav, NavItem } from './chunk-BRK3HXGZ.js';
 import { Text } from './chunk-O5CEG7TQ.js';
 import { Card } from './chunk-U2IQNDDR.js';
 import './RailList-N2ZBPRM2.css';