@crewlethq/ui 0.70.0 → 0.72.0

package/dist/styles.css

@@ -5757,11 +5757,12 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* BriefCard-L66R5U32.css */
+/* BriefCard-VKTH3BSW.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.
+ * A brief inside the product's status card: the verdict in the head, then one
+ * line on what the page is about, the ranked rows that wait on the reader, a
+ * quiet line of context and the questions to ask next. No block carries a
+ * label: the verdict already says what the rows are.
  */
 .crewlet-brief-card__where {
   display: inline-flex;
@@ -5776,35 +5777,19 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 .crewlet-brief-card__body {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-4);
+  gap: var(--spacing-3);
   min-width: 0;
 }
 
-.crewlet-brief-card__summary {
+.crewlet-brief-card__about {
   margin: 0;
+  overflow-wrap: anywhere;
   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;
@@ -5816,7 +5801,8 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 /*
  * 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.
+ * down the dots and across to the presses. The first row, the one the brief
+ * recommends, stands on the accent's softest ground.
  */
 .crewlet-brief-card__need {
   display: grid;
@@ -5830,6 +5816,26 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   border-top: 1px solid var(--color-border-default);
 }
 
+.crewlet-brief-card__need--first {
+  padding-inline: var(--spacing-3);
+  margin-inline: calc(-1 * var(--spacing-3));
+  border-radius: var(--radius-md);
+  background: var(--color-brand-accent-soft);
+}
+
+.crewlet-brief-card__need--first + .crewlet-brief-card__need {
+  border-top: 0;
+}
+
+.crewlet-brief-card__first {
+  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-brand-accent-ink);
+}
+
 .crewlet-brief-card__need > .crewlet-button {
   align-self: center;
 }
@@ -5855,30 +5861,12 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   color: var(--color-text-tertiary);
 }
 
-.crewlet-brief-card__clear {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--spacing-2);
+.crewlet-brief-card__context {
   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);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+  color: var(--color-text-tertiary);
   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. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.70.0",
+  "version": "0.72.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.70.0",
-    "@crewlethq/tokens": "0.70.0",
+    "@crewlethq/icons": "0.72.0",
+    "@crewlethq/tokens": "0.72.0",
     "prosemirror-commands": "1.7.2",
     "prosemirror-gapcursor": "1.4.1",
     "prosemirror-history": "1.5.1",

package/dist/chunk-VBA5FSWV.js

@@ -1,87 +0,0 @@
-import { SuggestionList, SuggestionRow } from './chunk-Y7PVLEZJ.js';
-import { StatusCard } from './chunk-NTQPJJAN.js';
-import { StatusDot } from './chunk-WIATRXEJ.js';
-import { Button } from './chunk-DGXZ635L.js';
-import { cx } from './chunk-ODEQTPFM.js';
-import './BriefCard-L66R5U32.css';
-import { useId } from 'react';
-import { CircleCheckGlyph, ArrowRightGlyph, MessageCircleQuestionMarkGlyph } from '@crewlethq/icons/glyphs';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var BRIEF_CARD_MAX_NEEDS = 3;
-var BRIEF_CARD_LABELS = {
-  heading: "Brief",
-  needs: "Needs you",
-  clear: "Nothing needs you.",
-  recommended: "Recommended",
-  followUps: "Ask next",
-  count: (n) => n === 1 ? "1 needs you" : `${n} need you`,
-  allClear: "All clear"
-};
-function BriefCard({
-  scope,
-  asOf,
-  summary,
-  needs,
-  recommended,
-  followUps,
-  labels: overrides,
-  className,
-  ...rest
-}) {
-  const labels = overrides ? { ...BRIEF_CARD_LABELS, ...overrides } : BRIEF_CARD_LABELS;
-  const id = useId();
-  const rows = needs.slice(0, BRIEF_CARD_MAX_NEEDS);
-  const hasScope = !(scope === void 0 || scope === null || scope === "");
-  const hasAsOf = !(asOf === void 0 || asOf === null || asOf === "");
-  const subtitle = hasScope || hasAsOf ? /* @__PURE__ */ jsxs("span", { className: "crewlet-brief-card__where", children: [
-    hasScope ? /* @__PURE__ */ jsx("span", { children: scope }) : null,
-    hasScope && hasAsOf ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
-    hasAsOf ? /* @__PURE__ */ jsx("span", { className: "crewlet-brief-card__asof", children: asOf }) : null
-  ] }) : void 0;
-  return /* @__PURE__ */ jsx(
-    StatusCard,
-    {
-      ...rest,
-      title: labels.heading,
-      subtitle,
-      status: rows.length > 0 ? { label: labels.count(rows.length), tone: "warning" } : { label: labels.allClear, tone: "success", icon: /* @__PURE__ */ jsx(CircleCheckGlyph, { size: "xs" }) },
-      className: cx("crewlet-brief-card", className),
-      children: /* @__PURE__ */ jsxs("div", { className: "crewlet-brief-card__body", children: [
-        /* @__PURE__ */ jsx("p", { className: "crewlet-brief-card__summary", children: summary }),
-        /* @__PURE__ */ jsxs("section", { className: "crewlet-brief-card__block", "aria-labelledby": `${id}-needs`, children: [
-          /* @__PURE__ */ jsx("h4", { className: "crewlet-brief-card__label", id: `${id}-needs`, children: labels.needs }),
-          rows.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "crewlet-brief-card__clear", children: [
-            /* @__PURE__ */ jsx(CircleCheckGlyph, { size: "sm", "aria-hidden": "true" }),
-            labels.clear
-          ] }) : (
-            // A list the reader moves through by item; Safari drops the role of a list styled without markers.
-            // eslint-disable-next-line jsx-a11y/no-redundant-roles
-            /* @__PURE__ */ jsx("ul", { role: "list", className: "crewlet-brief-card__needs", children: rows.map((need) => /* @__PURE__ */ jsxs("li", { className: "crewlet-brief-card__need", children: [
-              /* @__PURE__ */ jsx("span", { className: "crewlet-brief-card__dot", children: /* @__PURE__ */ jsx(StatusDot, { tone: need.tone ?? "warning" }) }),
-              /* @__PURE__ */ jsxs("span", { className: "crewlet-brief-card__words", children: [
-                /* @__PURE__ */ jsx("span", { children: need.text }),
-                need.detail === void 0 || need.detail === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-brief-card__detail", children: need.detail })
-              ] }),
-              need.action ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: need.action.onSelect, children: need.action.label }) : null
-            ] }, need.key)) })
-          )
-        ] }),
-        recommended === null ? null : /* @__PURE__ */ jsxs("section", { className: "crewlet-brief-card__block", "aria-labelledby": `${id}-next`, children: [
-          /* @__PURE__ */ jsx("h4", { className: "crewlet-brief-card__label", id: `${id}-next`, children: labels.recommended }),
-          /* @__PURE__ */ jsxs("div", { className: "crewlet-brief-card__next", children: [
-            /* @__PURE__ */ jsx(ArrowRightGlyph, { size: "sm", "aria-hidden": "true", className: "crewlet-brief-card__arrow" }),
-            /* @__PURE__ */ jsx("span", { children: recommended.text }),
-            recommended.action ? /* @__PURE__ */ jsx(Button, { size: "small", variant: "primary", onClick: recommended.action.onSelect, children: recommended.action.label }) : null
-          ] })
-        ] }),
-        followUps && followUps.length > 0 ? /* @__PURE__ */ jsxs("section", { className: "crewlet-brief-card__block", "aria-labelledby": `${id}-ask`, children: [
-          /* @__PURE__ */ jsx("h4", { className: "crewlet-brief-card__label", id: `${id}-ask`, children: labels.followUps }),
-          /* @__PURE__ */ jsx(SuggestionList, { className: "crewlet-brief-card__follow-ups", children: followUps.map((f) => /* @__PURE__ */ jsx(SuggestionRow, { icon: /* @__PURE__ */ jsx(MessageCircleQuestionMarkGlyph, { size: "sm" }), onSelect: f.onSelect, children: f.question }, f.key)) })
-        ] }) : null
-      ] })
-    }
-  );
-}
-
-export { BRIEF_CARD_LABELS, BRIEF_CARD_MAX_NEEDS, BriefCard };

package/dist/{chunk-HEIOLITO.js → chunk-5VMAJAVF.js}

@@ -1,9 +1,9 @@
 import { useListbox } from './chunk-7KHM2FZH.js';
 import { Tag } from './chunk-I5OIKDX2.js';
-import { announce } from './chunk-2G355KDJ.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
+import { announce } from './chunk-2G355KDJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TagsInput-MZXEHKJD.css';
 import { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useMemo, useLayoutEffect } from 'react';

package/dist/{chunk-PLNJEDGI.js → chunk-I4IO56EY.js}

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

package/dist/{chunk-L4HHWG4V.js → chunk-V2EV56MY.js}

@@ -1,7 +1,7 @@
 import { Toolbar } from './chunk-NR4CPM4T.js';
-import { announce } from './chunk-2G355KDJ.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { returnFocus } from './chunk-NUZHC6MM.js';
+import { announce } from './chunk-2G355KDJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SelectionBar-SCAU6EBY.css';
 import { useRef, useEffect } from 'react';

package/dist/{chunk-ETSF7SU6.js → chunk-ZMML6NRS.js}

@@ -1,9 +1,9 @@
 import { characterCountState, CharacterCount } from './chunk-PGCLHYVP.js';
 import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
-import { announce } from './chunk-2G355KDJ.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
+import { announce } from './chunk-2G355KDJ.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Input-GEFFMKBS.css';