@crewlethq/ui 0.85.0 → 0.86.1

package/dist/styles.css

@@ -22736,7 +22736,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 +22962,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 +23001,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 +23053,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 +23100,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 +23161,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;
@@ -24459,6 +24492,53 @@ a.crewlet-icon-btn {
 }
 
 
+/* KeyValueRows-US5KW7JK.css */
+/*
+ * KeyValueRows: keys and their values as rows under one column head
+ * (KeyValueRows.tsx).
+ */
+
+/* The rows, then Add under them, a row's gap apart. */
+.crewlet-key-value-rows__body,
+.crewlet-key-value-rows__table {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+/*
+ * EVERY ROW STANDS ON ITS FIELDS' TOP EDGE, so a key's error grows its own
+ * cell downward and nothing beside it moves. The last track is the remove
+ * button's, a square the fields' height, and the head keeps it empty so the
+ * value's name stands over the value column.
+ */
+.crewlet-key-value-rows__head,
+.crewlet-key-value-rows__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--size-control-md);
+  align-items: start;
+  gap: var(--spacing-2);
+}
+
+/* The head stands over the first row at a field label's distance from its field. */
+.crewlet-key-value-rows__head {
+  margin-block-end: calc(var(--spacing-1) - var(--spacing-2));
+}
+
+.crewlet-key-value-rows__empty {
+  margin: 0;
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-secondary);
+}
+
+/* Add hugs its words, on the fields' start edge, rather than spanning the list. */
+.crewlet-key-value-rows__add {
+  display: flex;
+}
+
+
 /* Layer-J222IFNX.css */
 /*
  * The portal target a LayerHost provides.
@@ -25411,7 +25491,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
@@ -25479,6 +25559,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;
@@ -25486,6 +25572,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
@@ -25520,7 +25607,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
@@ -31730,6 +31816,106 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
+/* RailList-N2ZBPRM2.css */
+/*
+ * RailList: a directory in a card, a rail of groups beside the chosen
+ * group's list, folding into a picker where the card is narrow
+ * (RailList.tsx).
+ *
+ * SIZED BY ITS OWN WIDTH, NOT THE WINDOW'S, because the same directory stands
+ * in a page and in a sheet: the root is an inline-size container, and under
+ * the rail's room (44rem) the rail goes and the picker shows. Both are always
+ * rendered and the stylesheet decides, so the fold costs no measurement and
+ * never draws the wrong one first.
+ */
+.crewlet-rail-list {
+  container: crewlet-rail-list / inline-size;
+  min-width: 0;
+}
+
+/* The bar across the card's top: the caller's search and chips, and the folded picker. */
+.crewlet-rail-list__bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3);
+  border-block-end: 1px solid var(--color-border-default);
+}
+
+/* Wide, the rail is the choice: the picker and a bar that holds nothing else are not drawn. */
+.crewlet-rail-list__picker,
+.crewlet-rail-list__bar--picker-only {
+  display: none;
+}
+
+/* The rail at a fixed width (13rem by default), the list taking the rest. */
+.crewlet-rail-list__body {
+  display: grid;
+  grid-template-columns: var(--crewlet-rail-list-rail, 13rem) minmax(0, 1fr);
+  min-width: 0;
+}
+
+/* The rail on a hairline of its own, its note a step under its rows. */
+.crewlet-rail-list__rail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-2);
+  border-inline-end: 1px solid var(--color-border-default);
+}
+
+/* The note starts on the rows' words, inside the dense rail's own inset. */
+.crewlet-rail-list__note {
+  margin: 0;
+  padding-inline: var(--spacing-2);
+}
+
+.crewlet-rail-list__list {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* What the chosen group holds, over its list on a hairline, at the list's own inset. */
+.crewlet-rail-list__about {
+  margin: 0;
+  padding: var(--spacing-2) var(--spacing-4);
+  border-block-end: 1px solid var(--color-border-default);
+}
+
+/*
+ * A GRID AT THE LIST'S TOP TAKES NO RULE OF ITS OWN. A grid in a card draws
+ * one rule above its head to part it from the card's head (DataGrid.css);
+ * here the bar's hairline, the description's or the card's own edge is
+ * already that rule, and the grid's drew a second line under it.
+ */
+.crewlet-rail-list__list > .crewlet-data-grid:first-child,
+.crewlet-rail-list__about + .crewlet-data-grid {
+  border-top: 0;
+}
+
+/* Under the rail's room the list takes the card, and the picker takes the rail's place in the bar. */
+@container crewlet-rail-list (width < 44rem) {
+  .crewlet-rail-list__body {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .crewlet-rail-list__rail {
+    display: none;
+  }
+
+  .crewlet-rail-list__picker {
+    display: inline-flex;
+  }
+
+  .crewlet-rail-list__bar--picker-only {
+    display: flex;
+  }
+}
+
+
 /* ReactionBar-XXI4V7XG.css */
 /*
  * A message's reactions: one pill to an emoji, then the add pill. A pill at
@@ -41233,7 +41419,7 @@ b.crewlet-switcher__match {
 }
 
 
-/* TableCells-TKSNLRK3.css */
+/* TableCells-ZALZLLEF.css */
 /* The read-only table cells. Each one holds a single line and shrinks inside
    its column (`min-width: 0`), so a long value is cut with an ellipsis and
    its whole text on the title rather than standing the row two lines tall. */
@@ -41349,6 +41535,34 @@ b.crewlet-switcher__match {
   font-variant-numeric: tabular-nums;
 }
 
+/*
+ * A VALUE OVER A QUIETER LINE (TableTwoLineCell), each line its own block cut
+ * on one line. A column of boxes rather than two runs of text, so neither
+ * line takes the line box of the words around it, and the cell is exactly
+ * the two lines tall. `min-width: 0` lets the column shrink inside a grid's
+ * cell, which is what cuts the lines rather than pushing the column wider.
+ */
+.crewlet-table-cell__lines {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* The mark is centred against both lines, as an entity's badge is against its name. */
+.crewlet-table-cell__two-line {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* The mark keeps its size: the lines give way to the column, never the mark. */
+.crewlet-table-cell__two-line > :first-child {
+  flex: none;
+}
+
 
 /* Tabs-M2ELSU3V.css */
 /*

package/package.json

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

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';