@crewlethq/ui 0.43.0 → 0.45.0

package/dist/styles.css

@@ -3986,6 +3986,54 @@ a.crewlet-make-row__item:active {
 }
 
 
+/* AsideLayout-TH5SQZNK.css */
+/*
+ * AsideLayout: a main column with an aside beside it from 56rem of its own
+ * width, and after it below that (AsideLayout.tsx).
+ */
+
+.crewlet-aside-layout {
+  container-type: inline-size;
+  min-width: 0;
+}
+
+.crewlet-aside-layout__columns {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: start;
+  gap: var(--spacing-7);
+}
+
+/* EACH COLUMN IS A STACK one step apart, so the blocks in it stand apart
+   evenly without each carrying a margin of its own. */
+.crewlet-aside-layout__main,
+.crewlet-aside-layout__aside {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  min-width: 0;
+}
+
+/* FOLLOWING THE MAIN COLUMN, the aside is set off by one hairline, so its
+   facts read as about the page rather than as more of it. */
+.crewlet-aside-layout__aside {
+  padding-top: var(--spacing-6);
+  border-top: 1px solid var(--color-border-default);
+}
+
+@container (min-width: 56rem) {
+  .crewlet-aside-layout__columns {
+    grid-template-columns: minmax(0, 1fr) var(--crewlet-aside-layout-aside, 18rem);
+    gap: var(--spacing-8);
+  }
+
+  .crewlet-aside-layout__aside {
+    padding-top: 0;
+    border-top: 0;
+  }
+}
+
+
 /* AuthLayout-ODHBUPHQ.css */
 /*
  * The sign-in page: one narrow column near the top of the window.
@@ -6958,7 +7006,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* CatalogTile-XL4XLFUH.css */
+/* CatalogTile-VPSLCKJE.css */
 /*
  * CatalogTile: mark, name and state, one sentence, and a foot with a quiet
  * fact and one action.
@@ -7095,6 +7143,61 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   }
 }
 
+/*
+ * COMPACT: a summary's tile, about half the comfortable one's height. One
+ * header line holds the mark (the row step's well, 28px), the name, its state
+ * and its fact, and the action at the end; the sentence is one line under it,
+ * aligned to the name, cut to fit. No reserve and no foot, because a summary
+ * has no row of feet to line up.
+ */
+.crewlet-catalog-tile--compact {
+  gap: var(--spacing-1);
+  padding: var(--spacing-3);
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__head {
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__mark {
+  width: var(--size-row-sm);
+  height: var(--size-row-sm);
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__title {
+  flex: 1 1 auto;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding-top: 0;
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__name {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__status {
+  flex: none;
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__meta {
+  flex: 0 1 auto;
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__description {
+  flex: none;
+  min-height: 0;
+  padding-left: calc(var(--size-row-sm) + var(--spacing-2));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 
 /* ChangeMark-3VMTW7MT.css */
 /*
@@ -13725,7 +13828,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* DirectoryList-EESYMH2U.css */
+/* DirectoryList-7OXXN47X.css */
 /*
  * DirectoryList: named groups of links, each line a mark, a label and a state,
  * and one foot that holds the bottom (DirectoryList.tsx).
@@ -13750,7 +13853,9 @@ svg.crewlet-datetime__chevron {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
-  gap: var(--spacing-5);
+  /* One small step between groups, so a heading reads as the head of the lines
+     under it rather than a band between two runs of them. */
+  gap: var(--spacing-3);
   min-height: 0;
   overflow-y: auto;
 }
@@ -13781,16 +13886,24 @@ svg.crewlet-datetime__chevron {
   list-style: none;
 }
 
+/*
+ * THE RAIL'S ROW STEP, 30px (--size-nav-row): a directory is navigation beside
+ * the page as the rail is beside the app, so its lines stand at the rail's
+ * height and in its compact type. Everything a line says fits that one line:
+ * a mark the size of the rail's glyph box, the hint inline after the label,
+ * and the state compact at the end.
+ */
 .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);
+  height: var(--size-nav-row);
+  padding: 0 var(--spacing-2);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-tight);
   text-decoration: none;
 }
 
@@ -13808,22 +13921,28 @@ svg.crewlet-datetime__chevron {
   outline-offset: 1px;
 }
 
+/* The box takes its mark, as the rail's glyph box does: a mark at the glyph's
+   own step (16px, `md`) sits in the row with room to spare. */
 .crewlet-directory__mark {
   display: inline-flex;
   flex: none;
   align-items: center;
   justify-content: center;
-  width: var(--size-row-sm);
-  height: var(--size-row-sm);
 }
 
+/* ONE LINE: the label, then the hint after it in the quiet ink. The hint gives
+   way first, so a narrow column cuts "Atlassian" before it cuts "Confluence". */
 .crewlet-directory__text {
   display: flex;
-  flex-direction: column;
+  align-items: baseline;
+  gap: var(--spacing-1);
   min-width: 0;
 }
 
 .crewlet-directory__label {
+  flex: 0 0 auto;
+  max-width: 100%;
+  min-width: 0;
   overflow: hidden;
   font-weight: var(--font-weight-medium);
   text-overflow: ellipsis;
@@ -13831,6 +13950,8 @@ svg.crewlet-datetime__chevron {
 }
 
 .crewlet-directory__hint {
+  flex: 0 1 auto;
+  min-width: 0;
   overflow: hidden;
   font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
@@ -13838,10 +13959,15 @@ svg.crewlet-datetime__chevron {
   white-space: nowrap;
 }
 
+/* THE STATE IS COMPACT: a pill or a dot and its word in the small step, held
+   inside the row so a state never makes one line taller than the rest. */
 .crewlet-directory__status {
   display: inline-flex;
   flex: none;
+  align-items: center;
+  max-height: calc(var(--size-nav-row) - var(--spacing-2));
   font-size: var(--font-size-xs);
+  line-height: 1;
   color: var(--color-text-secondary);
 }
 
@@ -14848,7 +14974,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* EmptyState-C6HRBGT7.css */
+/* EmptyState-7L4UAQBX.css */
 /*
  * The empty state.
  *
@@ -14923,6 +15049,40 @@ svg.crewlet-datetime__chevron {
   margin-top: var(--spacing-2);
 }
 
+/*
+ * INLINE: one left-aligned row on a dashed hairline, the sentence beside its
+ * action. The dash says "nothing here yet" without a glyph, and the box keeps
+ * the place the content will take, so the page does not move when it is
+ * filled. Narrow, the action wraps under the words.
+ */
+.crewlet-empty-state--inline {
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--spacing-2) var(--spacing-4);
+  padding: var(--spacing-3) var(--spacing-4);
+  border: 1px dashed var(--color-border-default);
+  border-radius: var(--radius-md);
+  text-align: start;
+}
+
+.crewlet-empty-state__text {
+  display: flex;
+  flex: 1 1 16rem;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-empty-state--inline .crewlet-empty-state__description {
+  max-width: var(--size-measure);
+}
+
+.crewlet-empty-state--inline .crewlet-empty-state__action {
+  flex: none;
+  margin-top: 0;
+}
+
 
 /* EmptyValue-4B6ODXHT.css */
 /*
@@ -23325,7 +23485,7 @@ button.crewlet-presence-stack__member:focus-visible {
 }
 
 
-/* Section-O5AHGSOG.css */
+/* Section-M7SG6NP2.css */
 /*
  * Section, the vertical rhythm band. One spacing scale keeps the cadence
  * between page sections consistent, and collapses on small viewports.
@@ -23351,6 +23511,14 @@ button.crewlet-presence-stack__member:focus-visible {
   padding-block: 0;
 }
 
+/* The console band at its tightest: a group heading's step to what it names. */
+.crewlet-section--tight {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding-block: 0;
+}
+
 .crewlet-section--sm {
   padding-block: var(--spacing-9);
 }
@@ -23434,6 +23602,12 @@ button.crewlet-presence-stack__member:focus-visible {
   gap: var(--spacing-3);
 }
 
+/* A tight band keeps its one small step with a title too: the titled column's
+   gap would otherwise win, being later in the sheet. */
+.crewlet-section--tight.crewlet-section--titled {
+  gap: var(--spacing-2);
+}
+
 @media (max-width: 768px) {
   .crewlet-section--sm {
     padding-block: var(--spacing-7);
@@ -27764,6 +27938,62 @@ svg.crewlet-select__chevron {
 }
 
 
+/* Statement-M4QDXIMO.css */
+/*
+ * Statement: a label over the words a page exists to say (Statement.tsx).
+ *
+ * THE LABEL IS THE MICRO REGISTER and the words are a step over the body, at
+ * the reading measure, so the statement outweighs everything around it and a
+ * line of it is one an eye can follow back.
+ */
+
+.crewlet-statement {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin: 0;
+  min-width: 0;
+}
+
+.crewlet-statement__label {
+  margin: 0;
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  line-height: var(--font-line-height-snug);
+  text-transform: uppercase;
+  color: var(--color-text-tertiary);
+}
+
+/* THE AUTHOR'S OWN LINE BREAKS are kept, and no word stands alone on the last
+   line. A long word (an address, a product name) breaks rather than widening
+   the column. */
+.crewlet-statement__text {
+  margin: 0;
+  max-width: var(--size-measure);
+  font-size: var(--font-size-lg);
+  line-height: var(--font-line-height-relaxed);
+  color: var(--color-text-primary);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  text-wrap: pretty;
+}
+
+/* A BLOCK under the label is drawn as given: its own register, the column's
+   width. */
+.crewlet-statement__body {
+  min-width: 0;
+}
+
+/* ON A PHONE the words step down to the body's own step over it, so a
+   mission is a paragraph rather than a poster. */
+@media (width < 640px) {
+  .crewlet-statement__text {
+    font-size: var(--font-size-md);
+  }
+}
+
+
 /* StatusDot-7OMCQCZF.css */
 /*
  * The status dot: a 7px mark in its tone's fill, beside the word it belongs

package/package.json

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

package/dist/{chunk-UAGDFEBG.js → chunk-KKUJSMLF.js}

@@ -1,5 +1,5 @@
-import { ConfirmModal } from './chunk-FYINAYAJ.js';
 import { InlineCode } from './chunk-5CLW2CXT.js';
+import { ConfirmModal } from './chunk-FYINAYAJ.js';
 import { Callout } from './chunk-SZZRIHGT.js';
 import './LinkInterstitial-ET4MSVSV.css';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-524GGA67.js → chunk-NF6SWHQI.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-Z5WMCBHR.js → chunk-NMYGJJJK.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';

package/dist/{chunk-U2XAJONO.js → chunk-OKE5YSLD.js}

@@ -1,9 +1,9 @@
 import { Skeleton } from './chunk-TEUQWOWZ.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { AvatarStack } from './chunk-5AQBPHZD.js';
 import { ArtifactKindGround } from './chunk-UBZDYOCA.js';
 import { Card } from './chunk-INHXF2CL.js';
-import { AvatarStack } from './chunk-5AQBPHZD.js';
 import { ArtifactAccessGlyph } from './chunk-BGLKLXL3.js';
 import { ArtifactKindGlyph } from './chunk-CE2THTQR.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';

package/dist/{chunk-OVHJTOKW.js → chunk-OWIGEE2Y.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-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-IVAR7NRW.js → chunk-SXBJMBSV.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-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-NCM73C34.js → chunk-Y4GXCKOC.js}

@@ -1,9 +1,9 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
-import { DataTable } from './chunk-GI3S6RMM.js';
 import { DateTimePicker } from './chunk-UFXLNC2N.js';
+import { DataTable } from './chunk-GI3S6RMM.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
-import { Popover } from './chunk-KHJIEPZV.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
+import { Popover } from './chunk-KHJIEPZV.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Input } from './chunk-ZI5G5RS7.js';
 import { Kbd } from './chunk-SMBKXWML.js';