@crewlethq/ui 0.53.0 → 0.54.0

package/dist/styles.css

@@ -702,7 +702,7 @@
 }
 
 
-/* AppShell-BIUFNT3J.css */
+/* AppShell-5LPXYUV3.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -1316,13 +1316,25 @@
    programmatic focus does not match :focus-visible, so neither the browser nor
    the document baseline draws a ring around the whole screen. */
 
+/*
+ * THE CONTENT'S END is room under the last line, so it never reads flush
+ * against the window's edge. It is a custom property,
+ * `--crewlet-app-shell-content-end`, because a screen that ends in a bar
+ * docked to the bottom of the scroller (a setup's footer) IS that edge: the
+ * bar takes the room back with a negative margin of the same length, and
+ * sits on the scroller's bottom at the end of a scroll exactly where it stood
+ * while scrolling, rather than riding the room's height above it.
+ */
 .crewlet-app-shell__content {
+  --crewlet-app-shell-content-end: var(--spacing-10);
+
   display: flex;
   flex-direction: column;
   gap: var(--spacing-5);
   max-width: var(--size-content-max);
   margin: 0 auto;
-  padding: var(--spacing-5) var(--spacing-5) var(--spacing-10);
+  padding: var(--spacing-5) var(--spacing-5);
+  padding-bottom: var(--crewlet-app-shell-content-end);
   min-width: 0;
 }
 
@@ -1341,8 +1353,9 @@
 }
 
 .crewlet-app-shell--fill .crewlet-app-shell__content {
+  --crewlet-app-shell-content-end: var(--spacing-5);
+
   height: 100%;
-  padding-bottom: var(--spacing-5);
 }
 
 /* Hidden by default, revealed by the breakpoint below: the wide layout has the
@@ -1461,7 +1474,10 @@
   }
 
   .crewlet-app-shell__content {
-    padding: var(--spacing-4) var(--spacing-4) var(--spacing-9);
+    --crewlet-app-shell-content-end: var(--spacing-9);
+
+    padding: var(--spacing-4) var(--spacing-4);
+    padding-bottom: var(--crewlet-app-shell-content-end);
   }
 }
 
@@ -24857,6 +24873,125 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
+/* ReviewList-TIN6C2JN.css */
+/*
+ * ReviewList: a setup's parts in one bordered box, a row each, before the
+ * setup is finished (ReviewList.tsx).
+ *
+ * A ROW IS A GRID OF THREE COLUMNS: the glyph's tile, the part (its title and
+ * state over its values), and the action. The values sit under the title, at
+ * its start, and reach the row's end under the action, so a row of logos or
+ * swatches has the whole width and the titles still run down one line.
+ */
+.crewlet-review-list {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  background-color: var(--color-surface-subtle);
+  list-style: none;
+}
+
+.crewlet-review-list__item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-areas:
+    'icon head action'
+    '.    body body'
+    '.    error error';
+  align-items: center;
+  column-gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-4) var(--spacing-5);
+}
+
+.crewlet-review-list__item + .crewlet-review-list__item {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-review-list__icon {
+  grid-area: icon;
+}
+
+.crewlet-review-list__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+  grid-area: head;
+  min-width: 0;
+}
+
+.crewlet-review-list__title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-tight);
+}
+
+.crewlet-review-list__action {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  grid-area: action;
+}
+
+.crewlet-review-list__body {
+  grid-area: body;
+  min-width: 0;
+  margin-top: var(--spacing-3);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  line-height: var(--font-line-height-body);
+}
+
+/* WHAT HOLDS THE FINISH, in the danger ink with its glyph, so it never rests on the hue alone. */
+.crewlet-review-list__error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  grid-area: error;
+  margin: var(--spacing-2) 0 0;
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-review-list__error > svg {
+  flex: none;
+  margin-top: 1px;
+}
+
+/* WITHOUT A GLYPH the part starts at the row's start, with no empty column before it. */
+.crewlet-review-list__item--plain {
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    'head action'
+    'body body'
+    'error error';
+}
+
+/* A NARROW LIST gives the values the whole row: an indent of a tile and a gap is a fifth of a phone. */
+@container (width < 28rem) {
+  .crewlet-review-list__item {
+    padding: var(--spacing-3) var(--spacing-4);
+  }
+
+  .crewlet-review-list__item:not(.crewlet-review-list__item--plain) {
+    grid-template-areas:
+      'icon head action'
+      'body body body'
+      'error error error';
+  }
+}
+
+
 /* RichEditor-NPD2KAPS.css */
 /*
  * The rich editor (RichEditor.tsx).
@@ -26834,7 +26969,7 @@ svg.crewlet-select__chevron {
 }
 
 
-/* SetupWizard-GZK5UDKC.css */
+/* SetupWizard-Z54H6RYW.css */
 /*
  * SetupWizard: a setup walked step by step on a page of its own
  * (SetupWizard.tsx).
@@ -26844,27 +26979,58 @@ svg.crewlet-select__chevron {
  * from 70rem of the wizard's own width, the aside (320px). Under 70rem the
  * aside takes the row under the content and the rail runs down beside both.
  * Under the phone breakpoint every part is one column, in reading order.
+ *
+ * THE TRACKS ARE THE MEASURE, NOT THE WINDOW. The content's track is at most
+ * its column, so on a window wider than the parts the aside stands right
+ * beside the content and the header and the footer end where the parts do.
+ * A track of 1fr with the content held to 640px inside it left the preview
+ * stranded at the window's far edge with a void between, and Continue a
+ * window's width from the fields it continues. A wide step (`wide`) takes
+ * the content and the aside's columns together, so its footer ends where
+ * every other step's does.
  */
 
 .crewlet-setup-wizard {
+  --crewlet-setup-wizard-rail: 240px;
+  --crewlet-setup-wizard-column: 640px;
+  --crewlet-setup-wizard-aside: 320px;
+  --crewlet-setup-wizard-gap: var(--spacing-8);
+  --crewlet-setup-wizard-wide: calc(
+    var(--crewlet-setup-wizard-column) + var(--crewlet-setup-wizard-gap) + var(--crewlet-setup-wizard-aside)
+  );
+
   container-type: inline-size;
   min-width: 0;
 }
 
 .crewlet-setup-wizard__frame {
   display: grid;
-  grid-template-columns: 240px minmax(0, 1fr);
+  grid-template-columns: var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-column));
   grid-template-areas:
     'head head'
     'rail content'
     'rail aside'
     'foot foot';
   grid-template-rows: auto auto 1fr auto;
-  column-gap: var(--spacing-8);
+  column-gap: var(--crewlet-setup-wizard-gap);
   row-gap: var(--spacing-6);
   min-width: 0;
 }
 
+/* With no aside there is no row for one, and no second gap above the footer. */
+.crewlet-setup-wizard--no-aside .crewlet-setup-wizard__frame {
+  grid-template-areas:
+    'head head'
+    'rail content'
+    'foot foot';
+  grid-template-rows: auto 1fr auto;
+}
+
+/* A WIDE STEP lays out columns of its own across the content's and the aside's columns together. */
+.crewlet-setup-wizard--wide .crewlet-setup-wizard__frame {
+  grid-template-columns: var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-wide));
+}
+
 .crewlet-setup-wizard__head {
   display: flex;
   flex-direction: column;
@@ -26896,7 +27062,6 @@ svg.crewlet-select__chevron {
   grid-area: content;
   box-sizing: border-box;
   width: 100%;
-  max-width: 640px;
   min-width: 0;
 }
 
@@ -26939,7 +27104,6 @@ svg.crewlet-select__chevron {
   gap: var(--spacing-4);
   grid-area: aside;
   box-sizing: border-box;
-  max-width: 640px;
   min-width: 0;
   padding-top: var(--spacing-6);
   border-top: 1px solid var(--color-border-default);
@@ -26949,6 +27113,14 @@ svg.crewlet-select__chevron {
  * THE FOOTER holds the step's actions at the bottom of the view while the
  * content scrolls under it, on the sheet's own ground with a hairline above,
  * and clears the device's safe area where it has one.
+ *
+ * IT ENDS THE SCREEN. Inside an `AppShell` the content column keeps room
+ * under its last line (`--crewlet-app-shell-content-end`, 64px wide), and a
+ * docked bar is that last line: the footer takes the room back, so at the end
+ * of a scroll it rests on the scroller's bottom edge, where it stood while
+ * scrolling, rather than rising 64px with a strip of empty sheet under it.
+ * Outside a shell there is no room to take back and the margin is zero. The
+ * wizard is the screen's last element for the same reason.
  */
 .crewlet-setup-wizard__footer {
   position: sticky;
@@ -26959,6 +27131,7 @@ svg.crewlet-select__chevron {
   align-items: center;
   gap: var(--spacing-2);
   grid-area: foot;
+  margin-bottom: calc(-1 * var(--crewlet-app-shell-content-end, 0px));
   padding: var(--spacing-3) 0 calc(var(--spacing-3) + env(safe-area-inset-bottom, var(--spacing-0)));
   border-top: 1px solid var(--color-border-default);
   background: var(--color-surface-background);
@@ -26977,15 +27150,16 @@ svg.crewlet-select__chevron {
   margin-inline-start: auto;
 }
 
-/* A WIDE STEP lays out columns of its own across the whole width beside the rail. */
-.crewlet-setup-wizard--wide .crewlet-setup-wizard__content {
-  max-width: none;
-}
-
-/* BESIDE THE CONTENT, from 70rem of the wizard's own width: the aside holds in view. */
+/*
+ * BESIDE THE CONTENT, from 70rem of the wizard's own width: the aside holds in
+ * view. Written at the specificity of the wide and no-aside rules above, and
+ * after them, so the three shapes are decided by source order alone.
+ */
 @container (min-width: 70rem) {
-  .crewlet-setup-wizard__frame {
-    grid-template-columns: 240px minmax(0, 1fr) 320px;
+  .crewlet-setup-wizard .crewlet-setup-wizard__frame {
+    grid-template-columns:
+      var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-column))
+      var(--crewlet-setup-wizard-aside);
     grid-template-areas:
       'head head head'
       'rail content aside'
@@ -26993,15 +27167,19 @@ svg.crewlet-select__chevron {
     grid-template-rows: auto 1fr auto;
   }
 
-  /* With no aside, nothing is held for one: the content takes its column too. */
+  /* With no aside, nothing is held for one. */
   .crewlet-setup-wizard--no-aside .crewlet-setup-wizard__frame {
-    grid-template-columns: 240px minmax(0, 1fr);
+    grid-template-columns: var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-column));
     grid-template-areas:
       'head head'
       'rail content'
       'foot foot';
   }
 
+  .crewlet-setup-wizard--wide.crewlet-setup-wizard--no-aside .crewlet-setup-wizard__frame {
+    grid-template-columns: var(--crewlet-setup-wizard-rail) minmax(0, var(--crewlet-setup-wizard-wide));
+  }
+
   .crewlet-setup-wizard__aside {
     position: sticky;
     top: var(--spacing-5);
@@ -27017,7 +27195,7 @@ svg.crewlet-select__chevron {
  * position line, and scrolls away with the page rather than covering it.
  */
 @media (width < 640px) {
-  .crewlet-setup-wizard__frame {
+  .crewlet-setup-wizard .crewlet-setup-wizard__frame {
     grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
       'head'
@@ -27029,6 +27207,14 @@ svg.crewlet-select__chevron {
     row-gap: var(--spacing-5);
   }
 
+  .crewlet-setup-wizard--no-aside .crewlet-setup-wizard__frame {
+    grid-template-areas:
+      'head'
+      'rail'
+      'content'
+      'foot';
+  }
+
   .crewlet-setup-wizard__rail {
     position: static;
     display: flex;
@@ -27045,6 +27231,26 @@ svg.crewlet-select__chevron {
     padding-top: 0;
     border-top: 0;
   }
+
+  /*
+   * THE ACTIONS SHARE TWO ROWS: the way out and the step's other actions on
+   * the first, the step's last action, its primary, the whole width on the
+   * second, under the thumb. The two groups give their buttons to the
+   * footer's own row, so three short buttons no longer take three lines of a
+   * footer held over the content.
+   */
+  .crewlet-setup-wizard__footer-start,
+  .crewlet-setup-wizard__footer-end {
+    display: contents;
+  }
+
+  .crewlet-setup-wizard__footer-end > :first-child {
+    margin-inline-start: auto;
+  }
+
+  .crewlet-setup-wizard__footer-end > :last-child {
+    flex: 1 1 100%;
+  }
 }
 
 .crewlet-setup-wizard__position {

package/dist/utils/index.js

@@ -3,6 +3,6 @@ export { downloadBlob, downloadText, safeFilename, useDownload } from '../chunk-
 export { useClipboard, writeClipboard } from '../chunk-STJ7QBC3.js';
 export { useOutcome } from '../chunk-DTIW4CHZ.js';
 export { NODE_HUES, NODE_HUE_NAMES, isNodeHue } from '../chunk-AYKXMIOR.js';
-export { FOCUS_MODALITY_ATTRIBUTE, FOCUS_RETURNED_ATTRIBUTE, returnFocus, trackFocusModality, useFocusModality } from '../chunk-NUZHC6MM.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
+export { FOCUS_MODALITY_ATTRIBUTE, FOCUS_RETURNED_ATTRIBUTE, returnFocus, trackFocusModality, useFocusModality } from '../chunk-NUZHC6MM.js';
 export { cx } from '../chunk-ODEQTPFM.js';

package/package.json

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

package/dist/{chunk-RRHB5WWN.js → chunk-25S5YROP.js}

@@ -2,8 +2,8 @@ import { Tag } from './chunk-KYIAFNU7.js';
 import { useListbox } from './chunk-7KHM2FZH.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
-import { IconButton } from './chunk-LACA4JGC.js';
 import { announce } from './chunk-RSAQOKH3.js';
+import { IconButton } from './chunk-LACA4JGC.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TagsInput-CLFHP6I2.css';
 import { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useMemo, useLayoutEffect } from 'react';

package/dist/{chunk-DEBVNLFJ.js → chunk-3RCHEFIL.js}

@@ -1,7 +1,7 @@
 import { PRESENCE_LABELS, presenceOrder, collapseSessions } from './chunk-Z7JYG5TF.js';
 import { Avatar } from './chunk-PZKHBB7D.js';
-import { Button } from './chunk-OG6CL3EB.js';
 import { headingTag, useHeadingLevel } from './chunk-PQADV6P6.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './PeopleRail-SZGHZXVT.css';

package/dist/{chunk-I4Q6PACO.js → chunk-GKRPPSWY.js}

@@ -1,8 +1,8 @@
 import { StatusDot } from './chunk-WIATRXEJ.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
+import { Count } from './chunk-BHHIIK3M.js';
 import { Menu } from './chunk-3JIZ2A6K.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
-import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';

package/dist/{chunk-MXBDOQA5.js → chunk-ICPQIAD6.js}

@@ -1,7 +1,7 @@
 import { LayerNodeBridge } from './chunk-LM3ISVJA.js';
 import { Tooltip } from './chunk-I33UIUZD.js';
-import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-OMV5W53A.js';
 import { Kbd } from './chunk-SMBKXWML.js';
+import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-OMV5W53A.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { returnFocus } from './chunk-NUZHC6MM.js';
 import { IconButton } from './chunk-LACA4JGC.js';

package/dist/{chunk-5UEANIIW.js → chunk-K2FNW3MK.js}

@@ -1,7 +1,7 @@
 import { SlideStage } from './chunk-RMEBFYL7.js';
 import { useReorder } from './chunk-XJ2QEBMM.js';
-import { Menu } from './chunk-3JIZ2A6K.js';
 import { Kbd, isApplePlatform } from './chunk-SMBKXWML.js';
+import { Menu } from './chunk-3JIZ2A6K.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SlideFilmstrip-PAT7P4OG.css';

package/dist/{chunk-NC3Z6MM3.js → chunk-N224FUS3.js}

@@ -6,9 +6,9 @@ import { ChangeMark } from './chunk-66X5WDKE.js';
 import { isEmptyValue, displayText, ratingMax, findPerson, findOption, statusTone, editText, textMax, sheetLabels, normalizeValue, sameValue, spokenText, drawnColumns, fitSamples, fittedWidth, columnWidth, SHEET_COLUMN_BOUNDS, sortRows, SHEET_ROW_HEIGHT, cellKey, columnOffsets, SHEET_ROW_NUMBER_WIDTH, rangeOf, presenceByCell, presenceByRow, presenceByColumn, scrollToRow, planClear, visibleRows, cellDescription, nextSort, rowName, inRange, hasPrevious, flagText, toTSV, planPaste, parseTSV, isMod, moveFrom, isTypingKey, editorSide, optionHue, parseText, liveOptions, checkValue } from './chunk-LFSIKGRQ.js';
 import { presenceLabels } from './chunk-Z7JYG5TF.js';
 import { Popover } from './chunk-KHJIEPZV.js';
-import { Avatar } from './chunk-PZKHBB7D.js';
 import { Tooltip } from './chunk-I33UIUZD.js';
 import { StatusDot } from './chunk-WIATRXEJ.js';
+import { Avatar } from './chunk-PZKHBB7D.js';
 import { Menu } from './chunk-3JIZ2A6K.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/{chunk-TN22R6LW.js → chunk-QLEJPU5R.js}

@@ -1,9 +1,9 @@
 import { characterCountState, CharacterCount } from './chunk-XCUUI7E7.js';
+import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
-import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
-import { IconButton } from './chunk-LACA4JGC.js';
 import { announce } from './chunk-RSAQOKH3.js';
+import { IconButton } from './chunk-LACA4JGC.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Input-GMOWHZRG.css';

package/dist/{chunk-RFK4ROA7.js → chunk-R3BA3C4Y.js}

@@ -1,5 +1,5 @@
-import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { ArtifactKindGlyph } from './chunk-RSKW25Y5.js';
+import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './HitArea-QUOS6ZDJ.css';

package/dist/{chunk-VZICPYGR.js → chunk-SNQRGH4A.js}

@@ -1,5 +1,5 @@
-import { Avatar } from './chunk-PZKHBB7D.js';
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
+import { Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { CREWLET_CHARACTERS, CREWLET_CHARACTER_GEOMETRY } from '@crewlethq/icons/characters';
 import { jsx } from 'react/jsx-runtime';

package/dist/{chunk-LKBZV5IT.js → chunk-VWYT3GVV.js}

@@ -1,5 +1,5 @@
-import { IconButton } from './chunk-LACA4JGC.js';
 import { announce } from './chunk-RSAQOKH3.js';
+import { IconButton } from './chunk-LACA4JGC.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArrangeFrame-QXOQTFAH.css';
 import { forwardRef, useRef, useCallback, useState, useEffect } from 'react';

package/dist/{chunk-SFG7TS4Q.js → chunk-YCC2S7DF.js}

@@ -1,7 +1,7 @@
+import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { useLayerContainer } from './chunk-OMV5W53A.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { focusables, useModalLayer, useBodyScrollLock } from './chunk-H5XTJ7GJ.js';
-import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Modal-3HMP7WAZ.css';