@crewlethq/ui 0.42.0 → 0.43.0

package/dist/styles.css

@@ -13725,6 +13725,135 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* DirectoryList-EESYMH2U.css */
+/*
+ * DirectoryList: named groups of links, each line a mark, a label and a state,
+ * and one foot that holds the bottom (DirectoryList.tsx).
+ *
+ * NO FRAME OF ITS OWN. The list draws on the column it is placed in, its lines
+ * on the hover and selected grounds alone, so it never makes a box inside a
+ * box; the foot's hairline is the one rule it draws.
+ */
+
+.crewlet-directory {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  font-family: var(--font-family-sans);
+}
+
+/* The groups take the room and scroll on their own, so the foot stays put. */
+.crewlet-directory__groups {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--spacing-5);
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.crewlet-directory__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-directory__heading {
+  margin: 0;
+  padding: 0 var(--spacing-2);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-directory__items {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-directory__item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-height: var(--size-row-md);
+  padding: var(--spacing-1) var(--spacing-2);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  text-decoration: none;
+}
+
+.crewlet-directory__item:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-directory__item--selected,
+.crewlet-directory__item--selected:hover {
+  background: var(--color-surface-selected);
+}
+
+.crewlet-directory__item:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 1px;
+}
+
+.crewlet-directory__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-row-sm);
+  height: var(--size-row-sm);
+}
+
+.crewlet-directory__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-directory__label {
+  overflow: hidden;
+  font-weight: var(--font-weight-medium);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-directory__hint {
+  overflow: hidden;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-directory__status {
+  display: inline-flex;
+  flex: none;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}
+
+/* The foot: one small step under the groups, at the bottom of the column. */
+.crewlet-directory__foot {
+  flex: none;
+  min-width: 0;
+  padding: var(--spacing-2) var(--spacing-2) 0;
+  border-top: 1px solid var(--color-border-default);
+}
+
+
 /* Disclosure-P4FH3C35.css */
 /*
  * The disclosure anatomy, declared once for every expander in the package.
@@ -17732,6 +17861,62 @@ a.crewlet-icon-btn {
 }
 
 
+/* ListDetail-ALKU5VJW.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 on a phone (ListDetail.tsx).
+ */
+
+.crewlet-list-detail {
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: var(--crewlet-list-detail-list, 17rem) minmax(0, 1fr);
+  gap: var(--spacing-8);
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-list-detail__list {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  padding-right: var(--spacing-6);
+  border-right: 1px solid var(--color-border-default);
+}
+
+.crewlet-list-detail__detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-5);
+  min-width: 0;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+@media (width < 640px) {
+  .crewlet-list-detail {
+    grid-template-columns: minmax(0, 1fr);
+    height: auto;
+  }
+
+  .crewlet-list-detail__list {
+    padding-right: 0;
+    border-right: 0;
+  }
+
+  .crewlet-list-detail__detail {
+    overflow: visible;
+  }
+
+  .crewlet-list-detail--showing-list .crewlet-list-detail__detail,
+  .crewlet-list-detail--showing-detail .crewlet-list-detail__list {
+    display: none;
+  }
+}
+
+
 /* ListInput-O7LJKOIG.css */
 /*
  * ListInput: an ordered list of sentences, written in the box at the top and
@@ -19635,7 +19820,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* ObjectHeader-ZOS22FKX.css */
+/* ObjectHeader-DNQWRGUK.css */
 /*
  * The header of an object: its eyebrow, its head row and its fact line.
  *
@@ -19656,6 +19841,56 @@ a.crewlet-icon-btn {
   padding: var(--spacing-3) 0 var(--spacing-2);
 }
 
+/*
+ * A MARKED HEADER: the object's own mark on a plate, the catalogue tile's well
+ * at one and a half rows, beside the column the rest of the header keeps. The
+ * plate is the one box in the header, so the mark reads as the object's face
+ * rather than as one more glyph in the eyebrow.
+ */
+.crewlet-object-header--marked {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+}
+
+.crewlet-object-header__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--size-row-lg) * 1.5);
+  height: calc(var(--size-row-lg) * 1.5);
+  border-radius: var(--radius-lg);
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border-default);
+}
+
+.crewlet-object-header--peek .crewlet-object-header__mark {
+  width: var(--size-row-lg);
+  height: var(--size-row-lg);
+  border-radius: var(--radius-md);
+}
+
+.crewlet-object-header__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+@media (width < 640px) {
+  .crewlet-object-header--marked {
+    gap: var(--spacing-3);
+  }
+
+  .crewlet-object-header--marked .crewlet-object-header__mark {
+    width: var(--size-row-lg);
+    height: var(--size-row-lg);
+    border-radius: var(--radius-md);
+  }
+}
+
 .crewlet-object-header__eyebrow {
   display: flex;
   align-items: center;

package/package.json

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

package/dist/{Editor-FXO2JVWK.js → Editor-AMO2B54T.js}

@@ -1,5 +1,5 @@
-import { richEditorLabels } from './chunk-CSQTDGTS.js';
 import { schema, readMarkdown, writeMarkdown } from './chunk-QH6VYJ3X.js';
+import { richEditorLabels } from './chunk-CSQTDGTS.js';
 import { safeHref, MARKDOWN_CALLOUT_TONES } from './chunk-BAKPMH3S.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
 import { FormField, Input } from './chunk-ZI5G5RS7.js';

package/dist/{chunk-NF6SWHQI.js → chunk-524GGA67.js}

@@ -4,10 +4,10 @@ import { Popover } from './chunk-KHJIEPZV.js';
 import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
 import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { Input } from './chunk-ZI5G5RS7.js';
-import { announce } from './chunk-RSAQOKH3.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
 import { focusables, isComposing } from './chunk-H5XTJ7GJ.js';
 import { returnFocus } from './chunk-NUZHC6MM.js';
+import { announce } from './chunk-RSAQOKH3.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Switcher-K3EPA2RB.css';

package/dist/{chunk-SXBJMBSV.js → chunk-IVAR7NRW.js}

@@ -1,9 +1,9 @@
 import { Tag } from './chunk-KYIAFNU7.js';
 import { useListbox } from './chunk-7KHM2FZH.js';
-import { announce } from './chunk-RSAQOKH3.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-LACA4JGC.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
+import { announce } from './chunk-RSAQOKH3.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-VWYT3GVV.js → chunk-LKBZV5IT.js}

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

package/dist/{chunk-AACPFUZW.js → chunk-NCM73C34.js}

@@ -1,6 +1,6 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
-import { DateTimePicker } from './chunk-UFXLNC2N.js';
 import { DataTable } from './chunk-GI3S6RMM.js';
+import { DateTimePicker } from './chunk-UFXLNC2N.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';

package/dist/{chunk-OWIGEE2Y.js → chunk-OVHJTOKW.js}

@@ -1,14 +1,14 @@
 import { TagGroup } from './chunk-O2EGEONV.js';
-import { Tag } from './chunk-KYIAFNU7.js';
 import { CursorFlag } from './chunk-3BYIWOTV.js';
 import { presenceHueClass } from './chunk-I6POAB4V.js';
+import { Tag } from './chunk-KYIAFNU7.js';
 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 { StatusDot } from './chunk-WIATRXEJ.js';
 import { Tooltip } from './chunk-I33UIUZD.js';
-import { Avatar } from './chunk-PZKHBB7D.js';
 import { Menu } from './chunk-PCI7ZJ6Z.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { Button } from './chunk-OG6CL3EB.js';

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

@@ -1,5 +1,5 @@
-import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { Avatar } from './chunk-PZKHBB7D.js';
+import { useRoving, tabStop } from './chunk-EGMQURBR.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-NMYGJJJK.js → chunk-Z5WMCBHR.js}

@@ -1,8 +1,8 @@
 import { FormField, Textarea, Input } from './chunk-ZI5G5RS7.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { announce } from './chunk-RSAQOKH3.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-LACA4JGC.js';
+import { announce } from './chunk-RSAQOKH3.js';
 import './ListInput-O7LJKOIG.css';
 import { useState, useRef, useLayoutEffect } from 'react';
 import { ArrowUpGlyph, ArrowDownGlyph, XGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';