@crewlethq/ui 0.84.2 → 0.86.0

package/dist/Text/Text.d.ts

@@ -57,10 +57,22 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
      * it on every push, because the proportional digits have different widths.
      */
     numeric?: boolean | undefined;
-    /** One line, cut with an ellipsis. */
+    /**
+     * One line, cut with an ellipsis: a name in a narrow column, a caption
+     * under it. While the words are cut, the pointer's title carries them whole
+     * (see `titleWhenCut`).
+     */
     truncate?: boolean | undefined;
-    /** Two or three lines, then an ellipsis. */
+    /** Two or three lines, then an ellipsis, with the whole words on the title while they are cut. */
     clamp?: 2 | 3 | undefined;
+    /**
+     * Whether words cut by `truncate` or `clamp` carry their whole text as the
+     * element's title while they are cut. On by default. Turn it off where
+     * something else already shows the whole words, a `Tooltip` around the
+     * text or a title on the element around it, so the reader is not shown
+     * them twice. A `title` the caller passes always wins.
+     */
+    titleWhenCut?: boolean | undefined;
     /** Bounds the line length, for anything a reader reads rather than scans. */
     measure?: TextMeasure | undefined;
 }
@@ -77,5 +89,15 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
  * `variant` sets the size, the weight, the tracking and the ink together,
  * because those four move as one. `tone` overrides only the ink, for the case
  * where the same register carries a quieter fact.
+ *
+ * CUT WORDS ARE STILL READABLE WHOLE. A line cut with an ellipsis hid the
+ * end of a name from a sighted reader, who had no way to read it short of
+ * widening the window, while a screen reader read it whole (the cut is
+ * paint, not content). So a cut Text puts its whole words on its title. It
+ * is MEASURED AT THE MOMENT THE POINTER ARRIVES, which is the only moment a
+ * title is read: the words and the column are what they are then, so a title
+ * never goes stale after a resize or a new value, and a table of a thousand
+ * cut cells costs nothing until one is hovered. Words that fit carry no
+ * title, since a tooltip that repeats what is on the screen is noise.
  */
-export declare function Text({ as: Tag, variant, tone, mono, numeric, truncate, clamp, measure, className, children, ...rest }: TextProps): import("react").JSX.Element;
+export declare function Text({ as: Tag, variant, tone, mono, numeric, truncate, clamp, measure, titleWhenCut, className, children, ...rest }: TextProps): import("react").JSX.Element;

package/dist/Text/index.js

@@ -1,2 +1,2 @@
-export { Text } from '../chunk-QP2P6GDQ.js';
+export { Text } from '../chunk-O5CEG7TQ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThemeSwitcher/index.js

@@ -1,7 +1,7 @@
 export { DensitySwitcher, ThemeSwitcher } from '../chunk-5V6GW6HK.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
-import '../chunk-36WK24AI.js';
+import '../chunk-EVM6GYZ2.js';
 import '../chunk-AZYE7NR4.js';
 import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';

package/dist/TimeRangePicker/index.js

@@ -1,7 +1,7 @@
 export { TIME_RANGE_CUSTOM, TIME_RANGE_PICKER_LABELS, TimeRangePicker, timeRangeFieldKey, timeRangeProblem } from '../chunk-ZJVLGYE3.js';
 import '../chunk-ZXXZESCD.js';
 import '../chunk-BPCY7ZID.js';
-import '../chunk-36WK24AI.js';
+import '../chunk-EVM6GYZ2.js';
 import '../chunk-AZYE7NR4.js';
 import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';

package/dist/VersionCompare/index.js

@@ -1,6 +1,6 @@
 export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-RBQRTGXX.js';
 import '../chunk-AOFVXE6V.js';
-import '../chunk-36WK24AI.js';
+import '../chunk-EVM6GYZ2.js';
 import '../chunk-AZYE7NR4.js';
 import '../chunk-MVKUE4FI.js';
 import '../chunk-EGMQURBR.js';

package/dist/{chunk-CV2LU2T2.js → chunk-35CKF77R.js}

@@ -1,8 +1,8 @@
-import { StepList } from './chunk-RJWO2PC5.js';
+import { StepList } from './chunk-TMML7BHT.js';
 import { ReceiptStrip } from './chunk-ZWCK4N4L.js';
 import { Meter } from './chunk-RQFRRPV6.js';
 import { StatusCard } from './chunk-FLW5U7YS.js';
-import { Disclosure } from './chunk-LVJGN5II.js';
+import { Disclosure } from './chunk-NAHA62WD.js';
 import { Spinner } from './chunk-XSPCITPN.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DeepWorkCard-CMRRNISU.css';

package/dist/{chunk-AUSFKGKL.js → chunk-3AMWXJQX.js}

@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-5D5Z3LBQ.js').then(
+  loading ??= import('./Editor-VGNB35NJ.js').then(
     (module) => {
       engine = module.Editor;
       return engine;

package/dist/{chunk-AFLS26AC.js → chunk-3CALM534.js}

@@ -1,3 +1,4 @@
+import { Text } from './chunk-O5CEG7TQ.js';
 import { Link } from './chunk-QF5UNP4T.js';
 import { Tag } from './chunk-LBGKLYBY.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
@@ -5,7 +6,7 @@ import { EmptyValue } from './chunk-RE3FBGQQ.js';
 import { Avatar } from './chunk-XZY6S3UC.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './TableCells-TKSNLRK3.css';
+import './TableCells-ZALZLLEF.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function TableKeyCell({ value, text, href, emptyLabel = "Not set" }) {
@@ -84,5 +85,38 @@ function TableTextCell({ children, icon, mark }) {
     /* @__PURE__ */ jsx("span", { className: "crewlet-table-cell__truncate", children })
   ] });
 }
+function TableTwoLineCell({
+  value,
+  detail,
+  mono,
+  title,
+  titleWhenCut = true,
+  icon,
+  mark
+}) {
+  const ownTitles = titleWhenCut && title === void 0;
+  const hasDetail = detail !== void 0 && detail !== null && detail !== false && detail !== "";
+  const leading = mark ?? (icon !== void 0 && icon !== null ? /* @__PURE__ */ jsx("span", { className: "crewlet-table-cell__icon", "aria-hidden": "true", children: icon }) : null);
+  const leads = leading !== null && leading !== void 0 && leading !== false;
+  const lines = /* @__PURE__ */ jsxs("span", { className: "crewlet-table-cell__lines", title: leads ? void 0 : title, children: [
+    /* @__PURE__ */ jsx(Text, { variant: "inherit", truncate: true, mono: mono === "value" || mono === "both", titleWhenCut: ownTitles, children: value }),
+    hasDetail ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        variant: "caption",
+        tone: "secondary",
+        truncate: true,
+        mono: mono === "detail" || mono === "both",
+        titleWhenCut: ownTitles,
+        children: detail
+      }
+    ) : null
+  ] });
+  if (!leads) return lines;
+  return /* @__PURE__ */ jsxs("span", { className: "crewlet-table-cell__two-line", title, children: [
+    leading,
+    lines
+  ] });
+}
 
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell };
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell, TableTwoLineCell };

package/dist/{chunk-AOJ6ZA77.js → chunk-3MFRTZH6.js}

@@ -1,6 +1,6 @@
 import { DiffList } from './chunk-LR4IWUWQ.js';
 import { Tag } from './chunk-LBGKLYBY.js';
-import { Disclosure } from './chunk-LVJGN5II.js';
+import { Disclosure } from './chunk-NAHA62WD.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ChangeList-ITJMTVDF.css';

package/dist/{chunk-QSWQJX27.js → chunk-4ME4J3YY.js}

@@ -1,4 +1,4 @@
-import { CopyButton } from './chunk-T5GBTXNC.js';
+import { CopyButton } from './chunk-ETNQYT5O.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CodeBlock-T47UA5GM.css';
 import { forwardRef, useRef, useState, useLayoutEffect } from 'react';

package/dist/{chunk-6FBPFG3C.js → chunk-6EZX26BD.js}

@@ -1,4 +1,4 @@
-import { Copyable } from './chunk-T5GBTXNC.js';
+import { Copyable } from './chunk-ETNQYT5O.js';
 import { normalizeHex } from './chunk-7W3LYIOC.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ColorSwatch-V4DA4TK5.css';

package/dist/chunk-AELKT34H.js

@@ -0,0 +1,121 @@
+import { Card } from './chunk-U2IQNDDR.js';
+import { Button } from './chunk-DGXZ635L.js';
+import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
+import { VisuallyHidden } from './chunk-UT6CW3C7.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './AttentionList-LVX7KRET.css';
+import { useId, useState } from 'react';
+import { BellGlyph, ChevronDownGlyph, CircleAlertGlyph, TriangleAlertGlyph, InfoGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var plural = (n, one, many) => `${n} ${n === 1 ? one : many}`;
+var ATTENTION_LIST_LABELS = {
+  title: "Needs attention",
+  tones: { danger: "Problem", warning: "Warning", info: "Note" },
+  details: "Details",
+  more: (hidden) => `Show ${hidden} more`,
+  less: "Show fewer",
+  summary: (c) => [
+    c.danger ? plural(c.danger, "problem", "problems") : "",
+    c.warning ? plural(c.warning, "warning", "warnings") : "",
+    c.info ? plural(c.info, "note", "notes") : ""
+  ].filter(Boolean).join(", ")
+};
+var ORDER = { danger: 0, warning: 1, info: 2 };
+var TONES = ["danger", "warning", "info"];
+function ToneGlyph({ tone, size }) {
+  if (tone === "danger") return /* @__PURE__ */ jsx(CircleAlertGlyph, { size });
+  if (tone === "warning") return /* @__PURE__ */ jsx(TriangleAlertGlyph, { size });
+  return /* @__PURE__ */ jsx(InfoGlyph, { size });
+}
+function AttentionList({ items, collapseAfter = 3, labels: overrides, headingLevel, className }) {
+  const contextLevel = useHeadingLevel();
+  const Heading = headingTag(headingLevel ?? contextLevel);
+  const words = {
+    ...ATTENTION_LIST_LABELS,
+    ...overrides,
+    tones: { ...ATTENTION_LIST_LABELS.tones, ...overrides?.tones }
+  };
+  const id = useId();
+  const [expanded, setExpanded] = useState(false);
+  const [opened, setOpened] = useState(/* @__PURE__ */ new Set());
+  if (items.length === 0) return null;
+  const ordered = [...items].sort((a, b) => ORDER[a.tone] - ORDER[b.tone]);
+  const counts = { danger: 0, warning: 0, info: 0 };
+  for (const i of items) counts[i.tone] += 1;
+  const folds = ordered.length > collapseAfter + 1;
+  const shown = folds && !expanded ? ordered.slice(0, collapseAfter) : ordered;
+  const media = ordered.some((item) => item.media != null);
+  return /* @__PURE__ */ jsxs(Card, { as: "section", padding: "none", className: cx("crewlet-attention-list", className), children: [
+    /* @__PURE__ */ jsx(
+      Card.Header,
+      {
+        icon: /* @__PURE__ */ jsx(BellGlyph, { size: "sm" }),
+        actions: /* @__PURE__ */ jsxs("span", { className: "crewlet-attention-list__counts", children: [
+          TONES.filter((tone) => counts[tone] > 0).map((tone) => /* @__PURE__ */ jsxs("span", { className: cx("crewlet-attention-list__count", `is-${tone}`), "aria-hidden": true, children: [
+            /* @__PURE__ */ jsx(ToneGlyph, { tone, size: "xs" }),
+            counts[tone]
+          ] }, tone)),
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: words.summary(counts) })
+        ] }),
+        children: /* @__PURE__ */ jsx(Card.Title, { as: Heading, children: words.title })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Card.Body, { padding: "none", children: [
+      /* @__PURE__ */ jsx("ul", { className: cx("crewlet-attention-list__rows", media && "crewlet-attention-list__rows--media"), children: shown.map((item, index) => {
+        const open = opened.has(item.key);
+        const panel = `${id}-${index}`;
+        return /* @__PURE__ */ jsxs("li", { className: "crewlet-attention-list__item", children: [
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-attention-list__row", children: [
+            /* @__PURE__ */ jsx("span", { className: cx("crewlet-attention-list__glyph", `is-${item.tone}`), "aria-hidden": true, children: /* @__PURE__ */ jsx(ToneGlyph, { tone: item.tone, size: "sm" }) }),
+            item.media != null ? /* @__PURE__ */ jsx("span", { className: "crewlet-attention-list__media", "aria-hidden": true, children: item.media }) : null,
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-attention-list__text", children: [
+              /* @__PURE__ */ jsxs("span", { className: "crewlet-attention-list__line", children: [
+                /* @__PURE__ */ jsx(VisuallyHidden, { children: `${words.tones[item.tone]}: ` }),
+                item.title
+              ] }),
+              item.meta ? /* @__PURE__ */ jsx("span", { className: "crewlet-attention-list__meta", children: item.meta }) : null
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-attention-list__end", children: [
+              item.details ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "small",
+                  flush: true,
+                  className: "crewlet-attention-list__details",
+                  "aria-expanded": open,
+                  "aria-controls": open ? panel : void 0,
+                  trailingIcon: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "xs" }),
+                  onClick: () => setOpened((was) => {
+                    const next = new Set(was);
+                    if (next.has(item.key)) next.delete(item.key);
+                    else next.add(item.key);
+                    return next;
+                  }),
+                  children: words.details
+                }
+              ) : null,
+              item.action != null ? /* @__PURE__ */ jsx("span", { className: "crewlet-attention-list__action", children: item.action }) : null
+            ] })
+          ] }),
+          item.details && open ? /* @__PURE__ */ jsx("div", { id: panel, className: "crewlet-attention-list__body", children: item.details }) : null
+        ] }, item.key);
+      }) }),
+      folds ? /* @__PURE__ */ jsx("div", { className: "crewlet-attention-list__foot", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "small",
+          flush: true,
+          className: "crewlet-attention-list__more",
+          "aria-expanded": expanded,
+          onClick: () => setExpanded((e) => !e),
+          children: expanded ? words.less : words.more(ordered.length - collapseAfter)
+        }
+      ) }) : null
+    ] })
+  ] });
+}
+
+export { ATTENTION_LIST_LABELS, AttentionList };

package/dist/{chunk-X7VZQKIW.js → chunk-AQ7ZV3CH.js}

@@ -1,4 +1,4 @@
-import { StepStateMark } from './chunk-RJWO2PC5.js';
+import { StepStateMark } from './chunk-TMML7BHT.js';
 import { DisclosureAnatomy } from './chunk-ULYHDP7U.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-EAHEJNVJ.js → chunk-CL3FWLDO.js}

@@ -1,4 +1,4 @@
-import { Text } from './chunk-QP2P6GDQ.js';
+import { Text } from './chunk-O5CEG7TQ.js';
 import { Inline, Stack, Spacer } from './chunk-ZAC7SKUN.js';
 import { Card } from './chunk-U2IQNDDR.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-XNC3M4IN.js → chunk-E2QPZGLG.js}

@@ -1,7 +1,7 @@
 import { DisclosureAnatomy } from './chunk-ULYHDP7U.js';
 import { useHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Disclosure-D727FN5X.css';
+import './Disclosure-RJSKKO7Z.css';
 import './Accordion-V7YNDK7Y.css';
 import { createContext, useState, useCallback, useMemo, useContext, useId } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-T5GBTXNC.js → chunk-ETNQYT5O.js}

@@ -3,7 +3,7 @@ import { Button } from './chunk-DGXZ635L.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Copyable-IS3MHMPL.css';
+import './Copyable-P5AMRHFX.css';
 import { useCallback } from 'react';
 import { CheckGlyph, CircleAlertGlyph, CopyGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-36WK24AI.js → chunk-EVM6GYZ2.js}

@@ -1,3 +1,3 @@
 import './HitArea-QUOS6ZDJ.css';
 import './Tabs-M2ELSU3V.css';
-import './SegmentedControl-B7XCUOML.css';
+import './SegmentedControl-7GY2KM44.css';

package/dist/{chunk-B7NX425Z.js → chunk-JDMJVVVQ.js}

@@ -1,7 +1,7 @@
 import { StatusDot } from './chunk-CYQBDZ6M.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './ChoiceCards-TVMBO3HZ.css';
-import { useId } from 'react';
+import './ChoiceCards-KHJW2FKO.css';
+import { useId, Fragment } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 function ChoiceCards({
@@ -19,6 +19,8 @@ function ChoiceCards({
   const inFact = (o) => o.disabledReasonAt !== void 0 && o.disabledReasonAt >= 0 && o.disabledReasonAt < (o.facts?.length ?? 0);
   const reasons = options.some((o) => o.disabled && o.disabledReason && !inFact(o)) ? 1 : 0;
   const rows = { "--crewlet-choice-cards-rows": 1 + (described ? 1 : 0) + facts + reasons };
+  const chosen = options.find((o) => o.value === value && o.detail != null && !o.disabled) ?? null;
+  const detailId = `${name}-detail`;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -43,7 +45,7 @@ function ChoiceCards({
           ...(option.facts ?? []).map((_, at) => at === reasonAt ? reason : part(`fact-${at}`)),
           reasonAt < 0 ? reason : null
         ].filter(Boolean).join(" ");
-        return /* @__PURE__ */ jsxs(
+        const card = /* @__PURE__ */ jsxs(
           "label",
           {
             htmlFor: id,
@@ -60,6 +62,7 @@ function ChoiceCards({
                   disabled: option.disabled,
                   "aria-labelledby": labelledBy,
                   "aria-describedby": describedBy || void 0,
+                  "aria-controls": option === chosen ? detailId : void 0,
                   onChange: () => onChange(option.value),
                   className: "crewlet-choice-cards__radio"
                 }
@@ -67,7 +70,7 @@ function ChoiceCards({
               /* @__PURE__ */ jsxs("span", { className: "crewlet-choice-cards__title", children: [
                 option.media != null ? /* @__PURE__ */ jsx("span", { className: "crewlet-choice-cards__media", "aria-hidden": true, children: option.media }) : null,
                 /* @__PURE__ */ jsx("span", { id: part("label"), className: "crewlet-choice-cards__label", children: option.label }),
-                option.tag ? /* @__PURE__ */ jsx("span", { id: part("tag"), className: "crewlet-choice-cards__tag", children: option.tag }) : null
+                option.tag ? /* @__PURE__ */ jsx("span", { id: part("tag"), className: cx("crewlet-choice-cards__tag", option.tagTone && `is-${option.tagTone}`), children: option.tag }) : null
               ] }),
               option.description ? /* @__PURE__ */ jsx("span", { id: part("description"), className: "crewlet-choice-cards__description", children: option.description }) : described ? /* @__PURE__ */ jsx("span", { className: "crewlet-choice-cards__description", "aria-hidden": true }) : null,
               option.facts && option.facts.length > 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-choice-cards__facts", children: option.facts.map((fact, at) => /* @__PURE__ */ jsxs(
@@ -88,6 +91,11 @@ function ChoiceCards({
           },
           option.value
         );
+        if (option !== chosen) return card;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          card,
+          /* @__PURE__ */ jsx("div", { id: detailId, role: "group", "aria-labelledby": part("label"), className: "crewlet-choice-cards__detail", children: option.detail })
+        ] }, option.value);
       })
     }
   );

package/dist/chunk-KA4RBKQV.js

@@ -0,0 +1,148 @@
+import { Checkbox } from './chunk-YQ7Q52XU.js';
+import { IconButton } from './chunk-UAUP6XGK.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './MemberPicker-ZD35VEK6.css';
+import { useId, useState } from 'react';
+import { ChevronRightGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MEMBER_PICKER_LABELS = {
+  later: "Includes agents who join later",
+  through: (group) => `Through ${group}`,
+  leftOut: "Left out",
+  summary: (chosen, total) => `${chosen} of ${total} ${total === 1 ? "agent" : "agents"}`,
+  count: (n) => `${n} ${n === 1 ? "agent" : "agents"}`,
+  expand: (group) => `Show the agents in ${group}`
+};
+var without = (list, drop) => list.filter((k) => !drop.includes(k));
+var plus = (list, add) => [.../* @__PURE__ */ new Set([...list, ...add])];
+function chosenMembers(groups, ungrouped, value) {
+  const out = /* @__PURE__ */ new Set();
+  for (const g of groups) {
+    for (const m of g.members) {
+      if (value.groups.includes(g.key) && !value.except.includes(m.key) || value.members.includes(m.key)) out.add(m.key);
+    }
+  }
+  for (const m of ungrouped) if (value.members.includes(m.key)) out.add(m.key);
+  return out;
+}
+function MemberPicker({
+  label,
+  groups,
+  ungrouped = [],
+  value,
+  onChange,
+  defaultOpen = [],
+  labels: overrides,
+  className
+}) {
+  const words = { ...MEMBER_PICKER_LABELS, ...overrides };
+  const id = useId();
+  const [open, setOpen] = useState(
+    () => /* @__PURE__ */ new Set([
+      ...defaultOpen,
+      ...groups.filter((g) => g.members.some((m) => value.except.includes(m.key) || value.members.includes(m.key))).map((g) => g.key)
+    ])
+  );
+  const total = (/* @__PURE__ */ new Set([...groups.flatMap((g) => g.members.map((m) => m.key)), ...ungrouped.map((m) => m.key)])).size;
+  const chosen = chosenMembers(groups, ungrouped, value);
+  const toggleGroup = (g, on) => {
+    const keys = g.members.map((m) => m.key);
+    onChange({
+      groups: on ? plus(value.groups, [g.key]) : without(value.groups, [g.key]),
+      // THE GROUP'S OWN OVERRIDES GO EITHER WAY: chosen whole, nobody is left
+      // out or chosen twice; unchosen, nobody stays chosen behind its back.
+      members: without(value.members, keys),
+      except: without(value.except, keys)
+    });
+  };
+  const toggleMember = (m, on) => {
+    const reached = groups.some((g) => value.groups.includes(g.key) && g.members.some((x) => x.key === m.key));
+    onChange({
+      ...value,
+      members: on && !reached ? plus(value.members, [m.key]) : without(value.members, [m.key]),
+      except: !on && reached ? plus(value.except, [m.key]) : without(value.except, [m.key])
+    });
+  };
+  const memberRow = (m, group, at) => {
+    const viaGroup = !!group && value.groups.includes(group.key);
+    const leftOut = viaGroup && value.except.includes(m.key);
+    const mark = viaGroup ? leftOut ? words.leftOut : words.through(group.label) : null;
+    const detailId = m.detail ? `${id}-${at}-detail` : null;
+    const markId = mark ? `${id}-${at}-mark` : null;
+    const describedBy = cx(detailId, markId);
+    const boxId = `${id}-${at}-box`;
+    return /* @__PURE__ */ jsxs("li", { className: cx("crewlet-member-picker__member", leftOut && "is-left-out"), children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          id: boxId,
+          label: m.name,
+          hideLabel: true,
+          size: "sm",
+          checked: chosen.has(m.key),
+          onCheckedChange: (on) => toggleMember(m, on),
+          ...describedBy ? { "aria-describedby": describedBy } : {}
+        }
+      ),
+      m.avatar != null ? /* @__PURE__ */ jsx("span", { className: "crewlet-member-picker__avatar", "aria-hidden": true, children: m.avatar }) : null,
+      /* @__PURE__ */ jsxs("label", { htmlFor: boxId, className: "crewlet-member-picker__text", children: [
+        /* @__PURE__ */ jsx("span", { className: "crewlet-member-picker__name", children: m.name }),
+        detailId ? /* @__PURE__ */ jsx("span", { id: detailId, className: "crewlet-member-picker__detail", children: m.detail }) : null
+      ] }),
+      markId ? /* @__PURE__ */ jsx("span", { id: markId, className: cx("crewlet-member-picker__mark", leftOut && "is-left-out"), children: mark }) : null
+    ] }, m.key);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-member-picker", className), role: "group", "aria-label": label, children: [
+    /* @__PURE__ */ jsx("p", { className: "crewlet-member-picker__summary", "aria-live": "polite", children: words.summary(chosen.size, total) }),
+    /* @__PURE__ */ jsxs("ul", { className: "crewlet-member-picker__list", children: [
+      groups.map((g, gi) => {
+        const whole = value.groups.includes(g.key);
+        const reached = g.members.filter((m) => chosen.has(m.key)).length;
+        const all = g.members.length > 0 && reached === g.members.length;
+        const ticked = whole && (all || g.members.length === 0);
+        const mixed = !ticked && reached + (whole ? 1 : 0) > 0;
+        const isOpen = open.has(g.key);
+        const panel = `${id}-g${gi}`;
+        return /* @__PURE__ */ jsxs("li", { className: cx("crewlet-member-picker__group", isOpen && "is-open"), children: [
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-member-picker__group-row", children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "sm",
+                variant: "ghost",
+                className: "crewlet-member-picker__toggle",
+                label: words.expand(g.label),
+                icon: /* @__PURE__ */ jsx(ChevronRightGlyph, { size: "sm" }),
+                "aria-expanded": isOpen,
+                "aria-controls": isOpen ? panel : void 0,
+                onClick: () => setOpen((was) => {
+                  const next = new Set(was);
+                  if (next.has(g.key)) next.delete(g.key);
+                  else next.add(g.key);
+                  return next;
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                label: g.label,
+                size: "sm",
+                checked: ticked,
+                indeterminate: mixed,
+                description: whole ? words.later : void 0,
+                onCheckedChange: () => toggleGroup(g, !ticked)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "crewlet-member-picker__count", children: words.count(g.members.length) })
+          ] }),
+          isOpen ? /* @__PURE__ */ jsx("ul", { id: panel, className: "crewlet-member-picker__members", children: g.members.map((m, mi) => memberRow(m, g, `g${gi}-m${mi}`)) }) : null
+        ] }, g.key);
+      }),
+      ungrouped.length > 0 ? /* @__PURE__ */ jsx("li", { className: "crewlet-member-picker__group", children: /* @__PURE__ */ jsx("ul", { className: "crewlet-member-picker__members is-ungrouped", children: ungrouped.map((m, mi) => memberRow(m, null, `u-m${mi}`)) }) }) : null
+    ] })
+  ] });
+}
+
+export { MEMBER_PICKER_LABELS, MemberPicker, chosenMembers };

package/dist/{chunk-ABRWL5FJ.js → chunk-L2QRKIL4.js}

@@ -4,7 +4,7 @@ import { EmptyState } from './chunk-PPUR46MK.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DataGrid-Q26F2V5Q.css';
+import './DataGrid-SAHEL4SN.css';
 import { useId, useRef, useState, useMemo, useCallback, useLayoutEffect, useImperativeHandle, useSyncExternalStore, useEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { ArrowDownGlyph, ArrowUpGlyph, ArrowUpDownGlyph } from '@crewlethq/icons/glyphs';
@@ -414,7 +414,8 @@ function DataGrid({
           "crewlet-data-grid__cell",
           alignOf(column) !== "left" && `crewlet-data-grid__cell--${alignOf(column)}`,
           column.icon && "crewlet-data-grid__cell--icon",
-          column.shrink && "crewlet-data-grid__cell--shrink"
+          column.shrink && "crewlet-data-grid__cell--shrink",
+          column.action && "crewlet-data-grid__cell--action"
         ),
         "data-lead": column.phoneLead || void 0,
         "data-phone-omit": column.phoneOmit || void 0,

package/dist/{chunk-P7HMY3BQ.js → chunk-M33DABTW.js}

@@ -1,8 +1,8 @@
 import { RefusalStrip, ReceiptStrip } from './chunk-ZWCK4N4L.js';
-import { ChangeList } from './chunk-AOJ6ZA77.js';
+import { ChangeList } from './chunk-3MFRTZH6.js';
 import { StatusCard } from './chunk-FLW5U7YS.js';
 import { Checkbox } from './chunk-YQ7Q52XU.js';
-import { Disclosure } from './chunk-LVJGN5II.js';
+import { Disclosure } from './chunk-NAHA62WD.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { Spinner } from './chunk-XSPCITPN.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-LVJGN5II.js → chunk-NAHA62WD.js}

@@ -1,7 +1,7 @@
 import { DisclosureAnatomy } from './chunk-ULYHDP7U.js';
 import { useHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Disclosure-D727FN5X.css';
+import './Disclosure-RJSKKO7Z.css';
 import { useState, useId, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -17,6 +17,7 @@ function Disclosure({
   lazy = false,
   variant = "default",
   size = "default",
+  flush = false,
   headingLevel,
   className,
   children,
@@ -39,6 +40,7 @@ function Disclosure({
         "crewlet-disclosure",
         `crewlet-disclosure--${variant}`,
         size === "compact" && "crewlet-disclosure--compact",
+        flush && "crewlet-disclosure--flush",
         className
       ),
       "data-state": open ? "open" : "closed",

package/dist/{chunk-QP2P6GDQ.js → chunk-O5CEG7TQ.js}

@@ -11,14 +11,22 @@ function Text({
   truncate = false,
   clamp,
   measure,
+  titleWhenCut = true,
   className,
   children,
   ...rest
 }) {
+  const cuts = truncate || clamp !== void 0;
+  const measures = cuts && titleWhenCut && rest.title === void 0;
+  const { onMouseEnter } = rest;
   return /* @__PURE__ */ jsx(
     Tag,
     {
       ...rest,
+      onMouseEnter: measures ? (event) => {
+        titleIfCut(event.currentTarget, truncate ? "inline" : "block");
+        onMouseEnter?.(event);
+      } : onMouseEnter,
       className: cx(
         "crewlet-text",
         `crewlet-text--${variant}`,
@@ -34,5 +42,11 @@ function Text({
     }
   );
 }
+function titleIfCut(element, axis) {
+  const cut = axis === "inline" ? element.scrollWidth > element.clientWidth : element.scrollHeight > element.clientHeight;
+  const words = (element.textContent ?? "").replace(/\s+/g, " ").trim();
+  if (cut && words !== "") element.setAttribute("title", words);
+  else element.removeAttribute("title");
+}
 
 export { Text };

package/dist/{chunk-6SFDL4QH.js → chunk-P3LNA6G4.js}

@@ -1,5 +1,5 @@
 import { FileDrop, FilePickButton } from './chunk-KQWJWTED.js';
-import { contrastRatio } from './chunk-2ZSCHQOA.js';
+import { contrastRatio } from './chunk-WMSXPF7T.js';
 import { normalizeHex } from './chunk-7W3LYIOC.js';
 import { Button } from './chunk-DGXZ635L.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';