@crewlethq/ui 0.19.0 → 0.21.0

package/dist/styles.css

@@ -548,7 +548,7 @@
 }
 
 
-/* AppShell-RUNVM4WH.css */
+/* AppShell-APHZKJYH.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -1202,18 +1202,40 @@
   transition: background var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-a.crewlet-account-row__who:hover {
+/* The row as the reader's menu button: a button drawn as the link is. */
+button.crewlet-account-row__who {
+  width: 100%;
+  margin: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+/* A row that opens a menu fills the row as the link does. */
+.crewlet-account-row > .crewlet-menu-anchor {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+a.crewlet-account-row__who:hover,
+button.crewlet-account-row__who:hover,
+button.crewlet-account-row__who[aria-expanded='true'] {
   background: var(--color-surface-hover);
 }
 
 /* After :hover, so the current row shows the lift rather than the overlay. */
-a.crewlet-account-row__who[aria-current='page'] {
+a.crewlet-account-row__who[aria-current='page'],
+button.crewlet-account-row__who[data-current] {
   background: var(--color-surface-elevated);
   outline: 1px solid var(--color-border-default);
   outline-offset: -1px;
 }
 
-a.crewlet-account-row__who:focus-visible {
+a.crewlet-account-row__who:focus-visible,
+button.crewlet-account-row__who:focus-visible {
   outline: 2px solid var(--color-focus);
   outline-offset: var(--size-focus-ring-inset-offset);
 }
@@ -6207,6 +6229,99 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
+/* CommentThread-7VXOFTZO.css */
+/* CommentThread: a document's remarks, one per row with a hairline between,
+   then the field to add one. */
+.crewlet-comment-thread {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-comment-thread__heading {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-comment-thread__empty,
+.crewlet-comment-thread__hint {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-comment-thread__list {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-comment-thread__comment {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+  padding: var(--spacing-3) 0;
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-comment-thread__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-comment-thread__author {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-comment-thread__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-comment-thread__meta {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+/* Reply sits at the row's far end, wherever the head wraps. */
+.crewlet-comment-thread__reply {
+  margin-inline-start: auto;
+}
+
+.crewlet-comment-thread__compose {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.crewlet-comment-thread__replying {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+
 /* Composer-ABGJIAIR.css */
 /*
  * A message written in place: the field and its footer strip in one box. The
@@ -6298,6 +6413,36 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
+/* ConflictNote-DH77PYF7.css */
+/* ConflictNote: a refused write's sentence in the danger ink, with its glyph
+   so the colour is never the only carrier, and its controls beside it. */
+.crewlet-conflict-note {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1) var(--spacing-2);
+  max-width: 40rem;
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-compact);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-conflict-note__glyph {
+  flex: none;
+}
+
+.crewlet-conflict-note__text {
+  flex: 1 1 16rem;
+  min-width: 0;
+}
+
+.crewlet-conflict-note__actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1);
+}
+
+
 /* Container-3TSKMGNI.css */
 /*
  * Container, the centred content measure. One max-width scale shared by every
@@ -9439,6 +9584,100 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* DiffView-RVLIHTKG.css */
+/* DiffView: a line diff, monospace and line-numbered on both sides.
+
+   A changed line is marked three ways, a tint, a drawn mark and a word read
+   in its place, because colour alone is not a signal and a printed or
+   forced-colours render loses the tint entirely. The tint is the soft step of
+   the state and the mark the matching ink step, the pairing the palette suite
+   measures. */
+.crewlet-diff-view {
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-normal);
+}
+
+.crewlet-diff-view__section + .crewlet-diff-view__section,
+.crewlet-diff-view__skip + .crewlet-diff-view__line {
+  border-top: 1px solid var(--color-border-default);
+}
+
+/* A GAP SAYS WHAT IT STANDS FOR. Silently closed, a document edited at both
+   ends looks like one rewritten in the middle. */
+.crewlet-diff-view__skip {
+  padding: var(--spacing-1) var(--spacing-3);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-diff-view__line {
+  display: grid;
+  grid-template-columns: 3.5ch 3.5ch 2ch minmax(0, 1fr);
+  gap: var(--spacing-2);
+  padding: calc(var(--spacing-1) / 4) var(--spacing-3) calc(var(--spacing-1) / 4) var(--spacing-2);
+}
+
+.crewlet-diff-view__number {
+  color: var(--color-text-tertiary);
+  text-align: right;
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-diff-view__mark {
+  text-align: center;
+  user-select: none;
+}
+
+.crewlet-diff-view__text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-diff-view__line--add {
+  background: var(--color-feedback-success-soft);
+}
+
+.crewlet-diff-view__line--add .crewlet-diff-view__mark {
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-diff-view__line--remove {
+  background: var(--color-feedback-danger-soft);
+}
+
+.crewlet-diff-view__line--remove .crewlet-diff-view__mark {
+  color: var(--color-feedback-danger-ink);
+}
+
+/* DiffSummary: the size of the change, in the same inks as its lines. */
+.crewlet-diff-summary {
+  margin: 0;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-diff-summary__added,
+.crewlet-diff-summary__removed {
+  font-family: var(--font-family-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-diff-summary__added {
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-diff-summary__removed {
+  color: var(--color-feedback-danger-ink);
+}
+
+
 /* Disclosure-VKBJJIZ7.css */
 /*
  * The disclosure anatomy, declared once for every expander in the package.
@@ -13065,7 +13304,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Menu-BT5PMFJI.css */
+/* Menu-XIJ4LQUT.css */
 /*
  * The menu button's panel.
  *
@@ -13287,6 +13526,21 @@ svg.crewlet-datetime__chevron {
   font-size: var(--font-size-xs);
 }
 
+/*
+ * Facts above the items, across the panel's full width with a hairline under
+ * them: what the actions below are about, read rather than pressed.
+ */
+.crewlet-menu__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: calc(var(--spacing-1) * -1) calc(var(--spacing-1) * -1) var(--spacing-1);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-bottom: 1px solid var(--color-border-default);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}
+
 .crewlet-menu__separator {
   height: 1px;
   margin: var(--spacing-1) 0;
@@ -15442,6 +15696,84 @@ svg.crewlet-datetime__chevron {
 }
 
 
+/* PeopleRail-R64WVOSH.css */
+/* PeopleRail: a raised column of everybody present, one row a person, the
+   name over what they are doing and the controls at the row's end. */
+.crewlet-people-rail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  padding: var(--spacing-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+}
+
+.crewlet-people-rail__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+}
+
+.crewlet-people-rail__title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-people-rail__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-people-rail__person {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-people-rail__text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-people-rail__name {
+  overflow: hidden;
+  color: var(--color-text-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-people-rail__where {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-people-rail__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--spacing-1);
+}
+
+.crewlet-people-rail__note {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+}
+
+
 /* PinTile-IIA25MNZ.css */
 /*
  * PinTile: one pinned thing, a link with its facts.
@@ -20546,6 +20878,113 @@ b.crewlet-switcher__match {
 }
 
 
+/* TableCells-3VN5N2M3.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. */
+
+.crewlet-table-cell__truncate {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* AN IDENTIFIER IS ONE LINE, cut with its value on the title rather than
+   broken at whichever character the column ran out on. Named with the link's
+   class as well, so a linked identifier keeps the block box whatever order
+   the two stylesheets load in. */
+.crewlet-table-cell__key,
+.crewlet-link.crewlet-table-cell__key {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-family-mono);
+}
+
+.crewlet-table-cell__number {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.crewlet-table-cell__date {
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}
+
+.crewlet-table-cell__entity,
+.crewlet-link.crewlet-table-cell__entity,
+.crewlet-table-cell__status,
+.crewlet-table-cell__text {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-table-cell__status,
+.crewlet-table-cell__text {
+  gap: calc(var(--spacing-1) * 1.5);
+}
+
+.crewlet-table-cell__badge,
+.crewlet-table-cell__icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.crewlet-table-cell__icon {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-table-cell__glyph {
+  display: inline-flex;
+  flex: none;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  /* The quiet state is still a mark, so it takes the tertiary step: the
+     decoration step does not clear 3:1 on every ground. */
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-table-cell__status--info .crewlet-table-cell__glyph {
+  color: var(--color-feedback-info);
+}
+
+.crewlet-table-cell__status--success .crewlet-table-cell__glyph {
+  color: var(--color-feedback-success);
+}
+
+.crewlet-table-cell__status--warning .crewlet-table-cell__glyph {
+  color: var(--color-feedback-warning);
+}
+
+.crewlet-table-cell__status--danger .crewlet-table-cell__glyph {
+  color: var(--color-feedback-danger);
+}
+
+.crewlet-table-cell__status--brand .crewlet-table-cell__glyph {
+  color: var(--color-brand-accent);
+}
+
+.crewlet-table-cell__tags {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-table-cell__more {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+
 /* Tabs-ITJYJFMU.css */
 /*
  * The pill register: Tabs and SegmentedControl.
@@ -24605,6 +25044,77 @@ svg.crewlet-time-window__tick {
 }
 
 
+/* VersionCompare-UUZOPTQO.css */
+/* VersionCompare: a head naming the two versions with the lens switch at its
+   end, then the changes or the two versions. */
+.crewlet-version-compare {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-version-compare__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2) var(--spacing-3);
+}
+
+.crewlet-version-compare__titles {
+  display: flex;
+  flex: 1 1 16rem;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-version-compare__title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.crewlet-version-compare__description,
+.crewlet-version-compare__note {
+  margin: 0;
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-version-compare__changes,
+.crewlet-version-compare__versions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+}
+
+/* SIDE BY SIDE where there is room for two readable columns, and one above
+   the other where there is not, decided by the width the panes are given
+   rather than by the viewport, so a comparison in a side pane stacks too. */
+.crewlet-version-compare__panes {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
+  gap: var(--spacing-4);
+}
+
+.crewlet-version-compare__pane {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-version-compare__pane-title {
+  margin: 0;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+
 /* VersionTimeline-EBJ6MIPJ.css */
 /*
  * A version list beside the version on show. The row's main line is the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.19.0",
+  "version": "0.21.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.19.0",
-    "@crewlethq/tokens": "0.19.0",
+    "@crewlethq/icons": "0.21.0",
+    "@crewlethq/tokens": "0.21.0",
     "uqr": "0.1.3"
   },
   "peerDependencies": {

package/dist/{chunk-PUQY4WXR.js → chunk-36CWC2NH.js}

@@ -2,11 +2,11 @@ import { Tag } from './chunk-GFV4LJHH.js';
 import { StatusDot } from './chunk-WIATRXEJ.js';
 import { CursorFlag } from './chunk-3BYIWOTV.js';
 import { presenceHueClass } from './chunk-I6POAB4V.js';
-import { Button } from './chunk-OG6CL3EB.js';
 import { ChangeMark } from './chunk-PPAQFGS2.js';
 import { isEmptyValue, displayText, ratingMax, findPerson, findOption, statusTone, editText, textMax, isMod, sheetLabels, normalizeValue, sameValue, spokenText, drawnColumns, sortRows, SHEET_ROW_HEIGHT, columnOffsets, SHEET_ROW_NUMBER_WIDTH, columnWidth, rangeOf, presenceByCell, presenceByRow, presenceByColumn, cellKey, scrollToRow, planClear, visibleRows, cellDescription, nextSort, rowName, inRange, hasPrevious, flagText, toTSV, planPaste, parseTSV, moveFrom, isTypingKey, editorSide, optionHue, checkValue, parseText, liveOptions } from './chunk-YYZRLLLY.js';
 import { presenceLabels } from './chunk-S35G6PNC.js';
 import { Avatar } from './chunk-5OM447RW.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-7IJARUIF.js → chunk-F4DPAJCN.js}

@@ -1,5 +1,5 @@
-import { Button } from './chunk-OG6CL3EB.js';
 import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { useLayerContainer } from './chunk-HMPFGIWM.js';
 import { focusables, useModalLayer, useBodyScrollLock } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';

package/dist/{chunk-EIGEIT4O.js → chunk-NUZC6PJX.js}

@@ -1,8 +1,8 @@
 import { Select } from './chunk-FC4YTTFJ.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
-import { Button } from './chunk-OG6CL3EB.js';
 import { Input } from './chunk-Q55TXPA3.js';
 import { Popover } from './chunk-BWRGFKJP.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-L4H7SSWF.js → chunk-RE6ED5TO.js}

@@ -1,6 +1,6 @@
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
-import { Button } from './chunk-OG6CL3EB.js';
 import { Popover } from './chunk-BWRGFKJP.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DateTimePicker-NJ6XH2TE.css';

package/dist/{chunk-WXAULPBH.js → chunk-UNZ7TVV5.js}

@@ -1,7 +1,7 @@
 import { Timeline } from './chunk-AUQPBL4O.js';
-import { Button } from './chunk-OG6CL3EB.js';
 import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { Button } from './chunk-OG6CL3EB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './VersionTimeline-EBJ6MIPJ.css';
 import { RotateCcwClockGlyph, PencilGlyph, ShieldGlyph, DatabaseGlyph, UploadGlyph } from '@crewlethq/icons/glyphs';