@crewlethq/ui 0.67.0 → 0.69.0

package/dist/styles.css

@@ -5757,6 +5757,136 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
+/* BriefCard-L66R5U32.css */
+/*
+ * A brief inside the product's status card: one sentence, the rows that wait
+ * on the reader, one recommendation and the questions to ask next, each block
+ * under a quiet label so a reader scans straight to the part they need.
+ */
+.crewlet-brief-card__where {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1);
+}
+
+.crewlet-brief-card__asof {
+  white-space: nowrap;
+}
+
+.crewlet-brief-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  min-width: 0;
+}
+
+.crewlet-brief-card__summary {
+  margin: 0;
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-snug);
+  text-wrap: pretty;
+}
+
+.crewlet-brief-card__block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-brief-card__label {
+  margin: 0;
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  letter-spacing: var(--font-letter-spacing-wide);
+  text-transform: uppercase;
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-brief-card__needs {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/*
+ * A ROW IS THE LIST ROW'S GRAMMAR: the dot on the first line, the words and
+ * their one fact, and the action centred at the end, so a column of rows reads
+ * down the dots and across to the presses.
+ */
+.crewlet-brief-card__need {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--spacing-3);
+  padding-block: var(--spacing-2);
+}
+
+.crewlet-brief-card__need + .crewlet-brief-card__need {
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-brief-card__need > .crewlet-button {
+  align-self: center;
+}
+
+.crewlet-brief-card__dot {
+  display: inline-flex;
+  align-items: center;
+  height: 1lh;
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-brief-card__words {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-0);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-brief-card__detail {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-brief-card__clear {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  margin: 0;
+  font-size: var(--font-size-compact);
+  color: var(--color-feedback-success-ink);
+}
+
+/* The recommendation: one step, on the accent's softest ground. */
+.crewlet-brief-card__next {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-md);
+  background: var(--color-brand-accent-soft);
+  overflow-wrap: anywhere;
+  font-size: var(--font-size-compact);
+}
+
+.crewlet-brief-card__arrow {
+  color: var(--color-brand-accent-ink);
+}
+
+/* The questions to ask next sit on the card's text edge: each row's own inset is pulled out. */
+.crewlet-brief-card__follow-ups {
+  margin-inline: calc(-1 * var(--spacing-3));
+}
+
+
 /* Button-VRRYSXFN.css */
 /*
  * The button, and the link drawn as one.
@@ -19423,7 +19553,7 @@ a.crewlet-icon-btn {
 }
 
 
-/* InboxList-OCL2M3ZF.css */
+/* InboxList-OFGSX5IH.css */
 /*
  * The inbox's column: groups of rows, each row a control with the task it is
  * about under it, and the quiet toggles at the end.
@@ -19459,6 +19589,63 @@ a.crewlet-icon-btn {
   line-height: var(--font-line-height-snug);
 }
 
+/* The count after a label, in the quiet ink and the label's own register. */
+.crewlet-inbox-list__count {
+  margin-inline-start: var(--spacing-1);
+  font-size: var(--font-size-2xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
+/*
+ * A collapsible group's label is a button the width of the column, so the
+ * whole line is the target, with the chevron turned a quarter while closed.
+ */
+.crewlet-inbox-list__disclosure {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  width: 100%;
+  min-height: var(--size-target-min);
+  margin: calc(var(--spacing-1) * -1) 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-xs);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.crewlet-inbox-list__disclosure:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-inbox-list__chevron {
+  flex: none;
+  color: var(--color-text-tertiary);
+  transform: rotate(-90deg);
+  transition: transform var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-inbox-list__disclosure[aria-expanded='true'] .crewlet-inbox-list__chevron {
+  transform: rotate(0deg);
+}
+
+.crewlet-inbox-list__disclosure:hover .crewlet-inbox-list__chevron {
+  color: var(--color-text-primary);
+}
+
+.crewlet-inbox-list__disclosure .crewlet-inbox-list__count {
+  margin-inline-start: 0;
+}
+
+.crewlet-inbox-list__rows[hidden] {
+  display: none;
+}
+
 .crewlet-inbox-list__rows {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
@@ -19620,16 +19807,89 @@ a.crewlet-icon-btn {
 }
 
 /*
- * Settled. The strike is drawn in the strong hairline rather than the text's
- * own ink, so the words under it stay legible; the state is also read out,
- * because a line through a word says nothing to somebody listening.
+ * Settled. The name drops to the regular weight and the words to the
+ * secondary ink, which still reads at body contrast: a settled row is read
+ * again, to see what came of it. No strike, which says "cancelled" and cuts
+ * through the letters a reader is trying to read; the state is read out, and
+ * the outcome line and any status say it in words.
  */
+.crewlet-inbox-row__control--done .crewlet-inbox-row__title {
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-secondary);
+}
+
 .crewlet-inbox-row__control--done .crewlet-inbox-row__text {
-  text-decoration: line-through;
-  text-decoration-color: var(--color-border-strong);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-inbox-row__status {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+/* With a status, the time stays at the end and the status sits beside it. */
+.crewlet-inbox-row__status + .crewlet-inbox-row__meta {
+  margin-inline-start: 0;
+}
+
+.crewlet-inbox-row__head > .crewlet-inbox-row__status {
+  margin-inline-start: auto;
+}
+
+/*
+ * What came of the row: a glyph in the tone's ink, then words in the
+ * secondary ink, on one line that wraps rather than cuts.
+ */
+.crewlet-inbox-row__outcome {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding-top: 2px;
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-secondary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-inbox-row__outcome-icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  height: 1lh;
   color: var(--color-text-tertiary);
 }
 
+.crewlet-inbox-row__outcome--success .crewlet-inbox-row__outcome-icon {
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-inbox-row__outcome--info .crewlet-inbox-row__outcome-icon {
+  color: var(--color-feedback-info-ink);
+}
+
+.crewlet-inbox-row__outcome--warning .crewlet-inbox-row__outcome-icon {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-inbox-row__outcome--danger .crewlet-inbox-row__outcome-icon {
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-inbox-row__outcome--brand .crewlet-inbox-row__outcome-icon {
+  color: var(--color-brand-accent);
+}
+
+.crewlet-inbox-row__outcome-text {
+  min-width: 0;
+}
+
+.crewlet-inbox-row__outcome-text strong {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
 /*
  * The task, under the words and lined up with them: the control's start pad,
  * the leading slot and the gap after it.
@@ -19685,7 +19945,8 @@ a.crewlet-icon-btn {
     transition: none;
   }
 
-  .crewlet-inbox-list__toggle {
+  .crewlet-inbox-list__toggle,
+  .crewlet-inbox-list__chevron {
     transition: none;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.67.0",
+  "version": "0.69.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.67.0",
-    "@crewlethq/tokens": "0.67.0",
+    "@crewlethq/icons": "0.69.0",
+    "@crewlethq/tokens": "0.69.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/{Editor-URGZOK2S.js → Editor-NZRUKWB4.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-ETSF7SU6.js';

package/dist/{chunk-VLGGLLKH.js → chunk-AIMMHN5J.js}

@@ -1,5 +1,5 @@
-import { StatusDot } from './chunk-WIATRXEJ.js';
 import { toISO, useNow, formatRelative } from './chunk-EJNJMHQG.js';
+import { StatusDot } from './chunk-WIATRXEJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './EditingStatus-TMGT265J.css';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';

package/dist/{chunk-PZAOUZFZ.js → chunk-EHB4TSP2.js}

@@ -1,7 +1,7 @@
 import { Modal } from './chunk-I24FI46B.js';
 import { useListbox, useHighlightRest } from './chunk-7KHM2FZH.js';
-import { Kbd } from './chunk-ANTAQAR4.js';
 import { Input } from './chunk-ETSF7SU6.js';
+import { Kbd } from './chunk-ANTAQAR4.js';
 import { Count } from './chunk-MLDTLZAO.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/{chunk-2AQMXGWA.js → chunk-HXJHRQDR.js}

@@ -1,6 +1,6 @@
 import { RefusalStrip, ReceiptStrip } from './chunk-M25IV5MH.js';
-import { StatusCard } from './chunk-NTQPJJAN.js';
 import { ChangeList } from './chunk-WQRSZMN4.js';
+import { StatusCard } from './chunk-NTQPJJAN.js';
 import { Checkbox } from './chunk-PBCNINMB.js';
 import { Disclosure } from './chunk-222VILSP.js';
 import { Button } from './chunk-7QTPJDRF.js';

package/dist/{chunk-MNTUIAQT.js → chunk-IABWA76I.js}

@@ -1,7 +1,7 @@
 import { useReorder } from './chunk-MPVMB2DV.js';
-import { Kbd } from './chunk-ANTAQAR4.js';
 import { FormField, Textarea } from './chunk-ETSF7SU6.js';
 import { characterCountState, CharacterCount, countCharacters } from './chunk-PGCLHYVP.js';
+import { Kbd } from './chunk-ANTAQAR4.js';
 import { announce } from './chunk-2G355KDJ.js';
 import { Button } from './chunk-7QTPJDRF.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/{chunk-WWXIGN4O.js → chunk-L4UO57YP.js}

@@ -1,6 +1,6 @@
 import { Select } from './chunk-VK45YJLH.js';
-import { CopyButton } from './chunk-IYG4ETAQ.js';
 import { Modal } from './chunk-I24FI46B.js';
+import { CopyButton } from './chunk-IYG4ETAQ.js';
 import { Callout } from './chunk-BPCY7ZID.js';
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';

package/dist/{chunk-KQGOVBGF.js → chunk-O3BNL4TV.js}

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

package/dist/{chunk-OOC6KXNL.js → chunk-S2UHV52X.js}

@@ -6,9 +6,9 @@ import { isEmptyValue, displayText, ratingMax, findPerson, findOption, statusTon
 import { presenceLabels } from './chunk-Z7JYG5TF.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { Tag } from './chunk-I5OIKDX2.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-T73DMDU4.js';
 import { Button } from './chunk-7QTPJDRF.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/{chunk-R2YHKVWN.js → chunk-SBHAKX2T.js}

@@ -1,5 +1,5 @@
-import { PageHeader } from './chunk-FPDIHEM4.js';
 import { Stepper } from './chunk-HJBHP66O.js';
+import { PageHeader } from './chunk-FPDIHEM4.js';
 import { Disclosure } from './chunk-222VILSP.js';
 import { useHeadingLevel, nextHeadingLevel, headingTag, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';

package/dist/{chunk-CFY257ND.js → chunk-UYK3SGZI.js}

@@ -1,5 +1,5 @@
-import { useClipboard } from './chunk-STJ7QBC3.js';
 import { Modal } from './chunk-I24FI46B.js';
+import { useClipboard } from './chunk-STJ7QBC3.js';
 import { EmptyValue } from './chunk-RE3FBGQQ.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
 import { Checkbox } from './chunk-PBCNINMB.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-5OFRDX66.js → chunk-XWOH3UPZ.js}

@@ -1,5 +1,5 @@
-import { Kbd } from './chunk-ANTAQAR4.js';
 import { Textarea } from './chunk-ETSF7SU6.js';
+import { Kbd } from './chunk-ANTAQAR4.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-SBOUVASH.js → chunk-ZHVLDRAT.js}

@@ -3,8 +3,8 @@ import { SHEET_LABELS, SHEET_COLUMN_TYPES, optionHue, retypeColumn } from './chu
 import { HueSwatch } from './chunk-2EA2GSA2.js';
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { Checkbox } from './chunk-PBCNINMB.js';
-import { Kbd } from './chunk-ANTAQAR4.js';
 import { FormField, Input } from './chunk-ETSF7SU6.js';
+import { Kbd } from './chunk-ANTAQAR4.js';
 import { Menu } from './chunk-T73DMDU4.js';
 import { Button } from './chunk-7QTPJDRF.js';
 import { IconButton } from './chunk-UAUP6XGK.js';