@crewlethq/ui 0.4.4 → 0.5.1

package/dist/{chunk-7HPRF5XN.js → chunk-FUF52K7E.js}

@@ -1,10 +1,10 @@
-import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel } from './chunk-NTRZGNEX.js';
-import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-CMEE37QJ.js';
-import { focusables } from './chunk-ITHXJHBB.js';
+import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-S3BCVWTU.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-BMYPGGPV.js';
+import { focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './TreeCanvas-WBNQPHC7.css';
-import { useState, useRef, useMemo, useLayoutEffect, useCallback, useImperativeHandle, useSyncExternalStore } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import './TreeCanvas-HVOV4SQN.css';
+import { useState, useRef, useMemo, useLayoutEffect, useCallback, useImperativeHandle, useId, useSyncExternalStore } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var ENTRANCE_STEP_MS = 60;
 var REFLOW_MS = 350;
@@ -90,7 +90,14 @@ function useReflow(layout, still) {
         return { ...one, x: was.x + (one.x - was.x) * through, y: was.y + (one.y - was.y) * through };
       });
       record(nodes);
-      setDrawn({ nodes, byId: new Map(nodes.map((one) => [one.id, one])), bounds: layout.bounds });
+      const byId = new Map(nodes.map((one) => [one.id, one]));
+      setDrawn({
+        nodes,
+        byId,
+        groups: placeGroups(byId, layout.groups ?? []),
+        ...layout.ranks ? { ranks: layout.ranks } : {},
+        bounds: layout.bounds
+      });
       frame.current = through < 1 ? requestAnimationFrame(tick) : null;
     };
     frame.current = requestAnimationFrame(tick);
@@ -100,6 +107,8 @@ function useReflow(layout, still) {
 }
 var GAP_PROBE = "crewlet:tree-canvas-gap";
 var MARGIN_PROBE = "crewlet:tree-canvas-margin";
+var GROUP_PAD_PROBE = "crewlet:tree-canvas-group-pad";
+var groupHeadKey = (id) => `crewlet:tree-canvas-group:${id}`;
 function TreeCanvas({
   label,
   nodes,
@@ -107,11 +116,11 @@ function TreeCanvas({
   cardOf,
   renderCard,
   renderUnder,
-  cardOutline,
   cardTone,
   appearance = "card",
   ranks,
-  connector = "step",
+  connector = "elbow",
+  groups,
   onNodeKey,
   onNodeKeyDown,
   hasNodeMenu,
@@ -154,12 +163,27 @@ function TreeCanvas({
     cardForest.forEach(walk);
     return out;
   }, [cardForest]);
+  const shownGroups = useMemo(() => {
+    if (!groups || groups.length === 0) return [];
+    const drawnCards = new Set(cardIds);
+    return groups.map((group) => ({ group, members: group.memberIds.filter((id) => drawnCards.has(id)) })).filter((one) => one.members.length > 0);
+  }, [groups, cardIds]);
   const spacing = ranks ?? (appearance === "node" ? "shared" : "per-parent");
   const previousLayout = useRef(null);
   const layout = useMemo(() => {
-    if (!measured([...cardIds, GAP_PROBE, MARGIN_PROBE])) return previousLayout.current;
+    const probes = [GAP_PROBE, MARGIN_PROBE];
+    if (shownGroups.length > 0) {
+      probes.push(GROUP_PAD_PROBE, ...shownGroups.map(({ group }) => groupHeadKey(group.id)));
+    }
+    if (!measured([...cardIds, ...probes])) return previousLayout.current;
     const size = (id) => sizes.get(id);
     const gap = size(GAP_PROBE);
+    const pad = shownGroups.length > 0 ? size(GROUP_PAD_PROBE) : null;
+    const boxes = shownGroups.map(({ group, members }) => ({
+      id: group.id,
+      members,
+      inset: { x: pad.width, top: size(groupHeadKey(group.id)).height, bottom: pad.height }
+    }));
     const toLayout = (card2) => ({
       id: card2.id,
       width: size(card2.id).width,
@@ -170,9 +194,10 @@ function TreeCanvas({
       gapX: gap.width,
       gapY: gap.height,
       ranks: spacing,
-      margin: size(MARGIN_PROBE).width
+      margin: size(MARGIN_PROBE).width,
+      groups: boxes
     });
-  }, [cardForest, cardIds, measured, sizes, spacing]);
+  }, [cardForest, cardIds, measured, sizes, spacing, shownGroups]);
   previousLayout.current = layout;
   const still = useStillness();
   const drawn = useReflow(layout, still) ?? layout;
@@ -362,6 +387,16 @@ function TreeCanvas({
       items.current.get(id)?.focus({ preventScroll: true });
     }
   });
+  const uid = useId();
+  const headIds = useMemo(
+    () => new Map(shownGroups.map(({ group }, i) => [group.id, `${uid}-group-${i}`])),
+    [shownGroups, uid]
+  );
+  const describedBy = useMemo(() => {
+    const out = /* @__PURE__ */ new Map();
+    for (const { group, members } of shownGroups) for (const id of members) out.set(id, headIds.get(group.id));
+    return out;
+  }, [shownGroups, headIds]);
   const card = {
     item: (id) => ({
       role: "treeitem",
@@ -371,6 +406,7 @@ function TreeCanvas({
       "aria-posinset": treePosInSet(model, id),
       "aria-expanded": treeExpandable(model, id) ? expanded.has(id) : void 0,
       "aria-selected": id === selectedId,
+      "aria-describedby": describedBy.get(id),
       "data-tree-id": id,
       ref: refFor(id),
       onClick: (event) => {
@@ -430,6 +466,21 @@ function TreeCanvas({
           children: [
             /* @__PURE__ */ jsx("div", { className: "crewlet-tree-canvas__gap", ref: measure(GAP_PROBE), "aria-hidden": "true" }),
             /* @__PURE__ */ jsx("div", { className: "crewlet-tree-canvas__margin", ref: measure(MARGIN_PROBE), "aria-hidden": "true" }),
+            shownGroups.length > 0 && /* @__PURE__ */ jsx("div", { className: "crewlet-tree-canvas__group-pad", ref: measure(GROUP_PAD_PROBE), "aria-hidden": "true" }),
+            shownGroups.map(({ group, members }) => {
+              const placed = drawn?.groups?.find((one) => one.id === group.id);
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "crewlet-tree-canvas__group",
+                  "aria-hidden": "true",
+                  "data-group-id": group.id,
+                  "data-enter": enterOf(members, arrived),
+                  style: placedStyle(placed, true)
+                },
+                group.id
+              );
+            }),
             drawn && /* @__PURE__ */ jsx(
               "svg",
               {
@@ -449,6 +500,28 @@ function TreeCanvas({
                 ))
               }
             ),
+            shownGroups.map(({ group, members }) => {
+              const placed = drawn?.groups?.find((one) => one.id === group.id);
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  id: headIds.get(group.id),
+                  ref: measure(groupHeadKey(group.id)),
+                  className: "crewlet-tree-canvas__group-head",
+                  "aria-hidden": "true",
+                  "data-enter": enterOf(members, arrived),
+                  style: placedStyle(placed, false),
+                  children: [
+                    group.lead === void 0 || group.lead === null ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("span", { className: "crewlet-tree-canvas__group-lead", children: group.lead }),
+                      " "
+                    ] }),
+                    /* @__PURE__ */ jsx("span", { className: "crewlet-tree-canvas__group-label", children: group.label })
+                  ]
+                },
+                group.id
+              );
+            }),
             /* @__PURE__ */ jsx("div", { role: "tree", "aria-label": label, className: "crewlet-tree-canvas__tree", onKeyDown, children: cardIds.filter((id) => id !== composeId).map((id) => {
               const placed = drawn?.byId.get(id);
               return /* @__PURE__ */ jsxs(
@@ -456,10 +529,7 @@ function TreeCanvas({
                 {
                   role: "none",
                   ref: measure(id),
-                  className: cx(
-                    "crewlet-tree-canvas__card",
-                    cardOutline?.(id) && "crewlet-tree-canvas__card--outline"
-                  ),
+                  className: "crewlet-tree-canvas__card",
                   "data-tone": cardTone?.(id),
                   "data-enter": arrived === null ? void 0 : arrived.has(id) ? "shown" : "waiting",
                   style: placed ? { transform: `translate(${placed.x}px, ${placed.y}px)` } : { visibility: "hidden" },
@@ -514,6 +584,18 @@ function UnderSlot({
   if (content === null || content === void 0 || content === false) return null;
   return /* @__PURE__ */ jsx("div", { className: "crewlet-tree-canvas__under", "aria-hidden": "true", ...card.press(id), children: content });
 }
+function enterOf(members, arrived) {
+  if (arrived === null) return void 0;
+  return members.some((id) => arrived.has(id)) ? "shown" : "waiting";
+}
+function placedStyle(placed, box) {
+  if (!placed) return { visibility: "hidden" };
+  return {
+    transform: `translate(${placed.x}px, ${placed.y}px)`,
+    width: `${placed.width}px`,
+    ...box ? { height: `${placed.height}px` } : {}
+  };
+}
 function offsetWithin(el, container) {
   let top = 0;
   for (let at = el; at && at !== container; at = at.offsetParent) {

package/dist/{chunk-5KPQ6D7N.js → chunk-FZVJDJFN.js}

@@ -1,7 +1,7 @@
 import { Count } from './chunk-BHHIIK3M.js';
 import { headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import { KeyboardArrowDownGlyph } from '@crewlethq/icons/glyphs';
+import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 function DisclosureAnatomy({
@@ -31,7 +31,7 @@ function DisclosureAnatomy({
       onClick: onToggle,
       onKeyDown,
       children: [
-        /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { className: "crewlet-disclosure__chevron", size: "sm" }),
+        /* @__PURE__ */ jsx(ChevronDownGlyph, { className: "crewlet-disclosure__chevron", size: "sm" }),
         /* @__PURE__ */ jsx("span", { className: cx("crewlet-disclosure__title", mono && "crewlet-disclosure__title--mono"), children: title }),
         meta === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
           " ",

package/dist/chunk-IA232OTU.js

@@ -0,0 +1,156 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Avatar-XID7Z74C.css';
+import './AvatarStack-GEJBNV7E.css';
+import { useState, useEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var AVATAR_SIZES = { xs: 20, sm: 26, md: 32, lg: 40 };
+var AVATAR_CORNER_RATIO = 0.29;
+var getInitials = (name) => {
+  if (!name) return "?";
+  const words = name.trim().split(/[\s\-_.]+/).filter(Boolean);
+  if (words.length === 0) return "?";
+  const first = (word2) => (Array.from(word2)[0] ?? "").toUpperCase();
+  if (words.length >= 2) return words.slice(0, 2).map(first).join("") || "?";
+  const word = words[0];
+  const humps = word.split(/(?<=\p{Ll})(?=\p{Lu})/u);
+  if (humps.length >= 2) return humps.slice(0, 2).map(first).join("");
+  return Array.from(word).slice(0, 2).map((character) => character.toUpperCase()).join("") || "?";
+};
+var TINT_COUNT = 10;
+var avatarTint = (seed) => {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = hash * 31 + seed.charCodeAt(i) >>> 0;
+  }
+  return hash % TINT_COUNT;
+};
+function avatarPixels(size) {
+  return typeof size === "number" ? size : AVATAR_SIZES[size];
+}
+function avatarCorner(pixels) {
+  return pixels * AVATAR_CORNER_RATIO;
+}
+var Avatar = ({
+  src,
+  name,
+  size = "md",
+  kind = "agent",
+  tone = "neutral",
+  ring,
+  decorative = false,
+  colorSeed,
+  className,
+  style,
+  ...rest
+}) => {
+  const [imageFailed, setImageFailed] = useState(false);
+  useEffect(() => {
+    setImageFailed(false);
+  }, [src]);
+  const step = typeof size === "number" ? null : size;
+  const pixels = avatarPixels(size);
+  const measured = step === null ? {
+    "--crewlet-avatar-size": `${pixels}px`,
+    fontSize: Math.max(9, Math.round(pixels * 0.36))
+  } : {};
+  const seeded = tone === "seeded" ? avatarTint(colorSeed ?? name ?? "") : null;
+  const classes = cx(
+    "crewlet-avatar",
+    `crewlet-avatar--${kind}`,
+    step === null ? null : `crewlet-avatar--${step}`,
+    ring === void 0 ? null : `crewlet-avatar--ring-${ring}`,
+    className
+  );
+  if (src && !imageFailed) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...rest,
+        className: cx(classes, "crewlet-avatar--image"),
+        style: { ...measured, ...style },
+        src,
+        alt: decorative ? "" : name ?? "",
+        "aria-hidden": decorative ? true : void 0,
+        onError: () => setImageFailed(true)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...rest,
+      className: cx(
+        classes,
+        "crewlet-avatar--fallback",
+        `crewlet-avatar--${tone}`,
+        seeded === null ? null : `crewlet-avatar--tint-${seeded}`
+      ),
+      style: { ...measured, ...style },
+      role: decorative ? void 0 : "img",
+      "aria-hidden": decorative ? true : void 0,
+      "aria-label": decorative ? void 0 : name ? `${name} avatar` : "Avatar",
+      children: getInitials(name)
+    }
+  );
+};
+function counted(count, one, many) {
+  return `${count} ${count === 1 ? one : many}`;
+}
+function avatarStackLabel(members) {
+  const humans = members.filter((member) => member.kind === "human").length;
+  const agents = members.length - humans;
+  const agentWords = counted(agents, "agent", "agents");
+  const humanWords = counted(humans, "person", "people");
+  const who = humans === 0 ? agentWords : agents === 0 ? humanWords : `${agentWords} and ${humanWords}`;
+  return `${who}: ${members.map((member) => member.name).join(", ")}`;
+}
+function AvatarStack({
+  members,
+  max = 4,
+  size = "sm",
+  label,
+  decorative = false,
+  className,
+  style,
+  ...rest
+}) {
+  if (!Number.isInteger(max) || max < 1) {
+    throw new RangeError(`AvatarStack max must be a whole number of at least 1; it was ${max}`);
+  }
+  if (members.length === 0) return null;
+  const shown = members.slice(0, max);
+  const overflow = members.length - shown.length;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...rest,
+      className: cx("crewlet-avatar-stack", className),
+      style: { "--crewlet-avatar-stack-size": `${AVATAR_SIZES[size]}px`, ...style },
+      role: decorative ? void 0 : "img",
+      "aria-label": decorative ? void 0 : label ?? avatarStackLabel(members),
+      "aria-hidden": decorative ? true : void 0,
+      children: [
+        shown.map((member) => /* @__PURE__ */ jsx(
+          Avatar,
+          {
+            className: "crewlet-avatar-stack__member",
+            name: member.name,
+            kind: member.kind,
+            src: member.src,
+            ring: member.ring,
+            size,
+            decorative: true
+          },
+          member.id ?? member.name
+        )),
+        overflow > 0 ? /* @__PURE__ */ jsxs("span", { className: "crewlet-avatar-stack__member crewlet-avatar-stack__more", "aria-hidden": "true", children: [
+          "+",
+          overflow
+        ] }) : null
+      ]
+    }
+  );
+}
+
+export { AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, AvatarStack, avatarCorner, avatarPixels, avatarStackLabel, avatarTint, getInitials };

package/dist/{chunk-2EOKFKHX.js → chunk-IG27QX7Q.js}

@@ -1,13 +1,13 @@
 import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { useLayerContainer } from './chunk-7RPGY3JE.js';
-import { focusables, useModalLayer, useBodyScrollLock } from './chunk-ITHXJHBB.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
-import { Button } from './chunk-BZYDZBAN.js';
+import { focusables, useModalLayer, useBodyScrollLock } from './chunk-R25RGPUB.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
+import { Button } from './chunk-ETYEBKR4.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Modal-XYQJ4BL6.css';
+import './Modal-JAYBS2KS.css';
 import { useId, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { CloseGlyph } from '@crewlethq/icons/glyphs';
+import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function Modal({ open, ...rest }) {
@@ -120,7 +120,7 @@ function ModalFrame({
         {
           className: "crewlet-modal__close",
           label: closeLabel,
-          icon: /* @__PURE__ */ jsx(CloseGlyph, { size: "md" }),
+          icon: /* @__PURE__ */ jsx(XGlyph, { size: "md" }),
           onClick: onClose,
           disabledReason: dismissable ? void 0 : closeDisabledReason
         }
@@ -197,7 +197,7 @@ function ConfirmModal({
   cancelLabel = "Cancel",
   destructive = false,
   confirmVariant,
-  cancelVariant = "tertiary",
+  cancelVariant = "ghost",
   confirmDisabled = false,
   confirmDisabledReason = "Complete the confirmation above to continue.",
   submitting = false,

package/dist/chunk-IKB6HFGK.js

@@ -0,0 +1,55 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './StatCard-KPAFD4E2.css';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var StatCard = ({
+  label,
+  value,
+  unit,
+  sub,
+  subTone = "neutral",
+  delta,
+  trend,
+  icon,
+  tone = "neutral",
+  loading = false,
+  loadingLabel = "Loading",
+  flush = false,
+  className,
+  ...rest
+}) => {
+  const change = loading ? void 0 : delta;
+  const said = sub !== void 0 && sub !== null && sub !== false && sub !== "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cx("crewlet-statcard", `crewlet-statcard--${tone}`, flush && "crewlet-statcard--flush", className),
+      "aria-busy": loading || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-statcard__label", children: [
+          icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__icon", "aria-hidden": true, children: icon }) : null,
+          label
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-statcard__reading", children: [
+          /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__value", children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__placeholder", "aria-hidden": true }),
+            /* @__PURE__ */ jsx(VisuallyHidden, { children: loadingLabel })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            value,
+            unit ? /* @__PURE__ */ jsx("span", { className: "crewlet-statcard__unit", children: unit }) : null
+          ] }) }),
+          trend && !loading ? /* @__PURE__ */ jsx("div", { className: "crewlet-statcard__trend", children: trend }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: cx("crewlet-statcard__sub", subTone !== "neutral" && `crewlet-statcard__sub--${subTone}`), children: [
+          change ? /* @__PURE__ */ jsx("span", { className: cx("crewlet-statcard__delta", `crewlet-statcard__delta--${change.polarity}`), children: change.value }) : null,
+          change && said ? " " : null,
+          sub
+        ] })
+      ]
+    }
+  );
+};
+
+export { StatCard };

package/dist/{chunk-T43A26SD.js → chunk-IPVQKAHO.js}

@@ -1,12 +1,12 @@
 import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
-import { usePopupLayer } from './chunk-ITHXJHBB.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
-import { Button } from './chunk-BZYDZBAN.js';
+import { usePopupLayer } from './chunk-R25RGPUB.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
+import { Button } from './chunk-ETYEBKR4.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Menu-BT5PMFJI.css';
 import { useId, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { MoreVertGlyph, CheckGlyph } from '@crewlethq/icons/glyphs';
+import { EllipsisVerticalGlyph, CheckGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var ITEM_SELECTOR = "[role='menuitem'],[role='menuitemradio']";
@@ -29,7 +29,7 @@ function Menu({
   items,
   icon,
   trigger,
-  triggerVariant = "tertiary",
+  triggerVariant = "ghost",
   triggerTabIndex,
   open: controlled,
   onOpenChange,
@@ -258,7 +258,7 @@ function Menu({
     onKeyDown: onTriggerKeyDown
   };
   return /* @__PURE__ */ jsxs("span", { className: "crewlet-menu-anchor", children: [
-    trigger === void 0 ? /* @__PURE__ */ jsx(IconButton, { ...shared, label, icon: icon ?? /* @__PURE__ */ jsx(MoreVertGlyph, {}), size: "sm" }) : /* @__PURE__ */ jsx(Button, { ...shared, variant: triggerVariant, size: "small", leadingIcon: icon, children: trigger }),
+    trigger === void 0 ? /* @__PURE__ */ jsx(IconButton, { ...shared, label, icon: icon ?? /* @__PURE__ */ jsx(EllipsisVerticalGlyph, {}), size: "sm" }) : /* @__PURE__ */ jsx(Button, { ...shared, variant: triggerVariant, size: "small", leadingIcon: icon, children: trigger }),
     list && container ? createPortal(list, container) : null
   ] });
 }

package/dist/{chunk-3EYF6HKB.js → chunk-IVFJD7WY.js}

@@ -1,14 +1,14 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './SidebarNav-QGSFKZYA.css';
+import './SidebarNav-X5NLZNWA.css';
 import { useId, useState } from 'react';
-import { KeyboardArrowDownGlyph } from '@crewlethq/icons/glyphs';
+import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function SidebarNav({ label, className, children }) {
   return /* @__PURE__ */ jsx("nav", { className: cx("crewlet-sidebar-nav", className), "aria-label": label, children });
 }
-function NavGroup({ label, className, children }) {
+function NavGroup({ label, action, className, children }) {
   const id = useId();
   const named = label !== void 0 && label !== null && label !== false && label !== "";
   return /* @__PURE__ */ jsxs(
@@ -18,17 +18,30 @@ function NavGroup({ label, className, children }) {
       role: named ? "group" : void 0,
       "aria-labelledby": named ? id : void 0,
       children: [
-        named ? /* @__PURE__ */ jsx("div", { className: "crewlet-nav-group__label", id, children: label }) : null,
+        named || action ? /* @__PURE__ */ jsxs("div", { className: "crewlet-nav-group__head", children: [
+          named ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-group__label", id, children: label }) : null,
+          action ? /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-nav-group__action", "aria-label": action.label, onClick: action.onClick, children: /* @__PURE__ */ jsx("span", { className: "crewlet-nav-group__action-icon", "aria-hidden": true, children: action.icon }) }) : null
+        ] }) : null,
         children
       ]
     }
   );
 }
+function Figure({ figure, className, mark }) {
+  return /* @__PURE__ */ jsx("span", { className, "aria-hidden": true, children: /* @__PURE__ */ jsxs("span", { className: "crewlet-nav-item__figure", children: [
+    mark ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-item__mark", children: mark }) : null,
+    figure.value
+  ] }) });
+}
+function spoken(figures) {
+  return figures.filter((figure) => figure !== void 0).map((figure) => `, ${String(figure.value)} ${figure.label}`).join("");
+}
 function NavItem({
   label,
   icon,
+  lead,
+  count,
   badge,
-  badgeTone = "neutral",
   href,
   current = false,
   disabledReason,
@@ -53,8 +66,14 @@ function NavItem({
   }
   const inside = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-item__icon", "aria-hidden": true, children: icon }) : null,
-    /* @__PURE__ */ jsx("span", { className: "crewlet-nav-item__label", children: label }),
-    badge ? /* @__PURE__ */ jsx("span", { className: cx("crewlet-nav-item__badge", badgeTone === "attention" && "crewlet-nav-item__badge--attention"), children: badge }) : null
+    lead ? /* @__PURE__ */ jsx("span", { className: "crewlet-nav-item__lead", children: lead }) : null,
+    lead ? " " : null,
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-nav-item__label", children: [
+      label,
+      count || badge ? /* @__PURE__ */ jsx(VisuallyHidden, { children: spoken([count, badge]) }) : null
+    ] }),
+    count ? /* @__PURE__ */ jsx(Figure, { figure: count, mark: count.mark, className: "crewlet-nav-item__count" }) : null,
+    badge ? /* @__PURE__ */ jsx(Figure, { figure: badge, className: "crewlet-nav-item__badge" }) : null
   ] });
   const rowClass = "crewlet-nav-item__row";
   let row;
@@ -96,7 +115,7 @@ function NavItem({
         },
         children: [
           inside,
-          nested ? /* @__PURE__ */ jsx("span", { className: cx("crewlet-nav-item__chevron", open && "crewlet-nav-item__chevron--open"), "aria-hidden": true, children: /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { size: "sm" }) }) : null
+          nested ? /* @__PURE__ */ jsx("span", { className: cx("crewlet-nav-item__chevron", open && "crewlet-nav-item__chevron--open"), "aria-hidden": true, children: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm" }) }) : null
         ]
       }
     );
@@ -120,7 +139,7 @@ function NavItem({
             "aria-controls": `${id}-children`,
             "aria-label": expandLabel ?? (typeof label === "string" ? `${label} sections` : "Sections"),
             onClick: toggle,
-            children: /* @__PURE__ */ jsx("span", { className: cx("crewlet-nav-item__chevron", open && "crewlet-nav-item__chevron--open"), "aria-hidden": true, children: /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { size: "sm" }) })
+            children: /* @__PURE__ */ jsx("span", { className: cx("crewlet-nav-item__chevron", open && "crewlet-nav-item__chevron--open"), "aria-hidden": true, children: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm" }) })
           }
         ) : null
       ] }),

package/dist/{chunk-XJWXPRSK.js → chunk-JGRNTBF2.js}

@@ -1,14 +1,14 @@
-import { Select } from './chunk-KNYYCWMK.js';
-import { Popover } from './chunk-EFSG7HNU.js';
+import { Select } from './chunk-SJQ546ID.js';
+import { Popover } from './chunk-AUS5FNQE.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
-import { Input } from './chunk-GKHAKGOF.js';
-import { isComposing } from './chunk-ITHXJHBB.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
-import { Button } from './chunk-BZYDZBAN.js';
+import { Input } from './chunk-DSUY5F4E.js';
+import { isComposing } from './chunk-R25RGPUB.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
+import { Button } from './chunk-ETYEBKR4.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TimeWindowPicker-7I7KWCMU.css';
 import { useMemo, useState, useRef, useId, useEffect } from 'react';
-import { ScheduleGlyph, KeyboardArrowDownGlyph, CheckGlyph, ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
+import { ClockGlyph, ChevronDownGlyph, CheckGlyph, ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/TimeWindowPicker/mask.ts
@@ -354,9 +354,9 @@ function TimeWindowPicker({
           "aria-expanded": open,
           "aria-label": labels.triggerName(ariaLabel, shown),
           children: [
-            /* @__PURE__ */ jsx(ScheduleGlyph, { className: "crewlet-time-window__icon", size: "sm" }),
+            /* @__PURE__ */ jsx(ClockGlyph, { className: "crewlet-time-window__icon", size: "sm" }),
             /* @__PURE__ */ jsx("span", { className: cx("crewlet-time-window__label", !isSet && "is-placeholder"), children: shown }),
-            /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { className: "crewlet-time-window__chevron", size: "sm" })
+            /* @__PURE__ */ jsx(ChevronDownGlyph, { className: "crewlet-time-window__chevron", size: "sm" })
           ]
         }
       ),
@@ -438,12 +438,12 @@ function Panel({
               Button,
               {
                 size: "small",
-                variant: "tertiary",
+                variant: "ghost",
                 onClick: () => setDraft(normalise(defaultValue)),
                 children: labels.resetLabel
               }
             ) : null,
-            /* @__PURE__ */ jsx(Button, { size: "small", variant: "tertiary", onClick: close, children: labels.cancelLabel }),
+            /* @__PURE__ */ jsx(Button, { size: "small", variant: "ghost", onClick: close, children: labels.cancelLabel }),
             /* @__PURE__ */ jsx(
               Button,
               {