@crewlethq/ui 0.84.2 → 0.85.0

package/dist/{SegmentedControl-B7XCUOML.css → SegmentedControl-7GY2KM44.css}

@@ -136,6 +136,17 @@
   background: var(--color-brand-accent);
 }
 
+/* A COUNT IN A CHIP IS A FIGURE IN THE CHIP'S OWN INK, as on a FilterChip and
+   a lens chip: no pill of its own, since a box inside a box beside its word
+   says nothing more. On the chosen chip the inset pill's tertiary figure lay
+   on the accent fill at 1.4:1; inheriting, it is the label's on-accent ink. */
+.crewlet-segmented--chips .crewlet-count {
+  min-width: 0;
+  padding: 0;
+  background: none;
+  color: inherit;
+}
+
 /* What completes the last choice sits in the row, at the chips' own height
    and in their face: a field at its own control step stood taller than every
    chip beside it. */

package/dist/SetupWizard/index.js

@@ -1,9 +1,9 @@
-export { SetupWizard } from '../chunk-K6RWEQ6P.js';
-import '../chunk-RJWO2PC5.js';
+export { SetupWizard } from '../chunk-3BVNNQZY.js';
 import '../chunk-FPDIHEM4.js';
+import '../chunk-TMML7BHT.js';
 import '../chunk-YJQXESOJ.js';
 import '../chunk-CYQBDZ6M.js';
-import '../chunk-LVJGN5II.js';
+import '../chunk-NAHA62WD.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-ULYHDP7U.js';
 import '../chunk-D2GT3CR4.js';

package/dist/ShareDialog/index.js

@@ -1,7 +1,7 @@
-export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-AQNP3KQU.js';
+export { ARTIFACT_ROLES, SHAREABLE_ROLES, ShareDialog, roleAtLeast } from '../chunk-Y7PPKQFQ.js';
 import '../chunk-3IWZVEXA.js';
 import '../chunk-ZXXZESCD.js';
-import '../chunk-T5GBTXNC.js';
+import '../chunk-ETNQYT5O.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-YGRTX67J.js';

package/dist/{StepList-A4YVU4JI.css → StepList-OAJ45IBX.css}

@@ -35,7 +35,8 @@
 }
 
 .crewlet-step-mark--refused,
-.crewlet-step-mark--stopped {
+.crewlet-step-mark--stopped,
+.crewlet-step-mark--pending {
   color: var(--color-text-tertiary);
 }
 
@@ -88,6 +89,16 @@
   overflow-wrap: anywhere;
 }
 
+/*
+ * A STEP THAT HAS NOT STARTED IS QUIET THROUGH: its words take the tertiary
+ * ink its mark and its detail already have, so the whole step reads as one
+ * thing still to come rather than as a label in full ink beside a dimmed
+ * mark.
+ */
+.crewlet-step-list__step--pending .crewlet-step-list__label {
+  color: var(--color-text-tertiary);
+}
+
 /*
  * WHAT THE STEP ASKED FOR, in the mono face. Each piece between separators is
  * one inline block, so a line breaks only between pieces (at a space, or

package/dist/Stepper/StepList.d.ts

@@ -5,10 +5,12 @@ import { type HTMLAttributes, type ReactNode } from 'react';
  * request finish, fail or are refused on their own: `running` while it works,
  * `done`, `failed` (the system could not do it), `refused` (the person's own
  * access does not allow it), `stopped` (the person stopped the request before
- * it finished) and `waiting` (it waits on the person's approval).
+ * it finished), `waiting` (it waits on the person's approval) and `pending`
+ * (it has not started: the request has not reached it yet, or ended before
+ * it, as the steps after a failed check that the check never got to).
  */
-export type StepState = 'running' | 'done' | 'failed' | 'refused' | 'stopped' | 'waiting';
-export declare const STEP_STATES: readonly ["running", "done", "failed", "refused", "stopped", "waiting"];
+export type StepState = 'running' | 'done' | 'failed' | 'refused' | 'stopped' | 'waiting' | 'pending';
+export declare const STEP_STATES: readonly ["running", "done", "failed", "refused", "stopped", "waiting", "pending"];
 /** The words each state is said with, after the step's own words: "Read token spend by agent, Done". */
 export type StepStateLabels = Record<StepState, string>;
 export declare const STEP_STATE_LABELS: StepStateLabels;
@@ -20,7 +22,8 @@ export interface StepStateMarkProps {
  * A state's mark in its 16px box: the 14px glyph, or the spinner at the same
  * size while it runs, so nothing moves when the ring becomes a check. Running
  * takes the secondary ink, done the success ink, failed the danger ink,
- * waiting the warning ink, and refused and stopped the tertiary ink. One
+ * waiting the warning ink, and refused, stopped and pending the tertiary
+ * ink; pending is a dashed circle, the outline of a step still to come. One
  * mark for a request's steps and for the request's own state (`RunChip`),
  * which is what makes them one column.
  */

package/dist/Stepper/index.js

@@ -1,4 +1,4 @@
-export { STEP_STATES, STEP_STATE_LABELS, StepList, StepStateMark, Stepper, stepDetailPieces } from '../chunk-RJWO2PC5.js';
+export { STEP_STATES, STEP_STATE_LABELS, StepList, StepStateMark, Stepper, stepDetailPieces } from '../chunk-TMML7BHT.js';
 import '../chunk-CYQBDZ6M.js';
 import '../chunk-XSPCITPN.js';
 import '../chunk-UT6CW3C7.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-K6RWEQ6P.js → chunk-3BVNNQZY.js}

@@ -1,7 +1,7 @@
-import { Stepper } from './chunk-RJWO2PC5.js';
 import { PageHeader } from './chunk-FPDIHEM4.js';
+import { Stepper } from './chunk-TMML7BHT.js';
 import { useMediaMatch } from './chunk-YJQXESOJ.js';
-import { Disclosure } from './chunk-LVJGN5II.js';
+import { Disclosure } from './chunk-NAHA62WD.js';
 import { useHeadingLevel, nextHeadingLevel, headingTag, HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SetupWizard-Y2PFPBCZ.css';

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-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-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';

package/dist/{chunk-WMO722J2.js → chunk-TBQFZV4H.js}

@@ -1,4 +1,4 @@
-import { ContrastLevelTag } from './chunk-2ZSCHQOA.js';
+import { ContrastLevelTag } from './chunk-WMSXPF7T.js';
 import { Popover } from './chunk-EC6EUIAD.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';