@crewlethq/ui 0.85.0 → 0.86.0

package/dist/styles.css

@@ -24459,6 +24459,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.
@@ -31730,6 +31777,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 +41380,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 +41496,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.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.85.0",
-    "@crewlethq/tokens": "0.85.0",
+    "@crewlethq/icons": "0.86.0",
+    "@crewlethq/tokens": "0.86.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

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

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

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

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