@crewlethq/ui 0.4.3 → 0.5.0

package/dist/{chunk-HZ5XZNPS.js → chunk-DS2C73RJ.js}

@@ -1,8 +1,8 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './List-XTHESXLR.css';
+import './List-MYJIV6MP.css';
 import { createContext, useContext, Children, isValidElement, cloneElement } from 'react';
-import { ErrorGlyph } from '@crewlethq/icons/glyphs';
+import { CircleAlertGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var ListContext = createContext({ variant: "divided", templated: false });
@@ -36,7 +36,7 @@ function ListItem({
   const interactive = href !== void 0 || onClick !== void 0 || asChild;
   const contents = (words) => /* @__PURE__ */ jsxs(Fragment, { children: [
     tone === "danger" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(ErrorGlyph, { className: "crewlet-list__danger-mark", size: "sm" }),
+      /* @__PURE__ */ jsx(CircleAlertGlyph, { className: "crewlet-list__danger-mark", size: "sm" }),
       /* @__PURE__ */ jsx(VisuallyHidden, { children: dangerLabel }),
       " "
     ] }) : null,

package/dist/{chunk-O6232G37.js → chunk-DSUY5F4E.js}

@@ -1,10 +1,10 @@
 import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Input-2PU5CPKK.css';
 import { forwardRef, useRef, useState, useImperativeHandle, useEffect, useId } from 'react';
-import { CloseGlyph } from '@crewlethq/icons/glyphs';
+import { XGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var Input = forwardRef(function Input2({
@@ -68,7 +68,7 @@ var Input = forwardRef(function Input2({
           }
         ),
         trailing ? /* @__PURE__ */ jsx("span", { className: "crewlet-input__trailing", children: trailing }) : null,
-        onClear && filled ? /* @__PURE__ */ jsx("span", { className: "crewlet-input__clear", children: /* @__PURE__ */ jsx(IconButton, { size: "sm", variant: "ghost", label: clearLabel, icon: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" }), onClick: clear, disabled }) }) : null
+        onClear && filled ? /* @__PURE__ */ jsx("span", { className: "crewlet-input__clear", children: /* @__PURE__ */ jsx(IconButton, { size: "sm", variant: "ghost", label: clearLabel, icon: /* @__PURE__ */ jsx(XGlyph, { size: "xs" }), onClick: clear, disabled }) }) : null
       ]
     }
   );
@@ -86,8 +86,20 @@ var Textarea = forwardRef(function Textarea2({ error = false, autoResize = false
     if (!autoResize) return;
     const el = localRef.current;
     if (!el) return;
-    el.style.height = "auto";
-    el.style.height = `${el.scrollHeight}px`;
+    const measure = () => {
+      el.style.height = "auto";
+      const style = getComputedStyle(el);
+      const border = style.boxSizing === "border-box" ? Number.parseFloat(style.borderTopWidth || "0") + Number.parseFloat(style.borderBottomWidth || "0") : 0;
+      el.style.height = `${el.scrollHeight + (Number.isFinite(border) ? border : 0)}px`;
+    };
+    measure();
+    el.addEventListener("input", measure);
+    const resize = typeof ResizeObserver === "function" ? new ResizeObserver(measure) : null;
+    resize?.observe(el);
+    return () => {
+      el.removeEventListener("input", measure);
+      resize?.disconnect();
+    };
   }, [autoResize, value]);
   const control = /* @__PURE__ */ jsx(
     "textarea",

package/dist/{chunk-Q4ZPPART.js → chunk-EFYPAJT3.js}

@@ -1,17 +1,17 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './SearchTrigger-QXOYAUUY.css';
+import './SearchTrigger-Z5D4AAY7.css';
 import { forwardRef } from 'react';
 import { SearchGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var SearchTrigger = forwardRef(function SearchTrigger2({ label = "Search", shortcut, keyshortcuts, icon, className, type = "button", ...rest }, ref) {
+var SearchTrigger = forwardRef(function SearchTrigger2({ label = "Search", variant = "rail", shortcut, keyshortcuts, icon, className, type = "button", ...rest }, ref) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
       ...rest,
       ref,
       type,
-      className: cx("crewlet-search-trigger", className),
+      className: cx("crewlet-search-trigger", `crewlet-search-trigger--${variant}`, className),
       "aria-label": label,
       "aria-keyshortcuts": keyshortcuts,
       children: [

package/dist/{chunk-WQX73TWF.js → chunk-ERVO6OUF.js}

@@ -1,17 +1,17 @@
-import { Menu } from './chunk-FBZAKNSX.js';
+import { Menu } from './chunk-IPVQKAHO.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
-import { Modal } from './chunk-2EOKFKHX.js';
+import { Modal } from './chunk-IG27QX7Q.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Checkbox } from './chunk-2PRH365R.js';
+import { Checkbox } from './chunk-UA7O3KKJ.js';
 import { useClipboard } from './chunk-5VNUYO76.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
-import { Button } from './chunk-BZYDZBAN.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
+import { Button } from './chunk-ETYEBKR4.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DataTable-ITNACQ2X.css';
+import './DataTable-OLHPF7D4.css';
 import React, { useState, useCallback, useMemo, useRef, useLayoutEffect, useEffect, useId } from 'react';
 import { createPortal } from 'react-dom';
-import { CheckGlyph, ErrorGlyph, ContentCopyGlyph, KeyboardDoubleArrowLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, KeyboardDoubleArrowRightGlyph, SettingsGlyph, DragIndicatorGlyph, KeyboardArrowUpGlyph, KeyboardArrowDownGlyph, DeleteGlyph, ArrowUpwardGlyph, ArrowDownwardGlyph, UnfoldMoreGlyph, SettingsBackupRestoreGlyph } from '@crewlethq/icons/glyphs';
+import { CheckGlyph, CircleAlertGlyph, CopyGlyph, ChevronsLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, ChevronsRightGlyph, SettingsGlyph, GripVerticalGlyph, ChevronUpGlyph, ChevronDownGlyph, TrashGlyph, ArrowUpGlyph, ArrowDownGlyph, ChevronsUpDownGlyph, RotateCcwGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var CopyableCell = ({
@@ -39,7 +39,7 @@ var CopyableCell = ({
           onClick: onCopy,
           "aria-label": ariaLabel || "Copy to clipboard",
           title: ariaLabel || "Copy to clipboard",
-          children: clipboard.state === "copied" ? /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" }) : clipboard.state === "failed" ? /* @__PURE__ */ jsx(ErrorGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ContentCopyGlyph, { size: "sm" })
+          children: clipboard.state === "copied" ? /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" }) : clipboard.state === "failed" ? /* @__PURE__ */ jsx(CircleAlertGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(CopyGlyph, { size: "sm" })
         }
       ),
       /* @__PURE__ */ jsx("span", { role: "status", children: /* @__PURE__ */ jsx(VisuallyHidden, { children: clipboard.state === "copied" ? copiedLabel : clipboard.state === "failed" ? failedLabel : "" }) })
@@ -225,7 +225,7 @@ var DataTable = ({
   itemsPerPageOptions = [5, 10, 20, 50, 100],
   onRowAction = null,
   actionLabel = "Delete",
-  actionIcon = /* @__PURE__ */ jsx(DeleteGlyph, { size: "md" }),
+  actionIcon = /* @__PURE__ */ jsx(TrashGlyph, { size: "md" }),
   getRowKey,
   rowKey,
   emptyMessage = "No data available",
@@ -551,6 +551,7 @@ var DataTable = ({
     const el = scrollRef.current;
     if (!el) return;
     let lastWidth = el.clientWidth;
+    if (typeof ResizeObserver !== "function") return;
     const observer = new ResizeObserver(() => {
       const w = el.clientWidth;
       if (w > 0 && w !== lastWidth) {
@@ -919,7 +920,7 @@ var DataTable = ({
     if (!column) return null;
     const isSortable = column.sortable !== false;
     const isActive = effectiveSort.key === columnKey && effectiveSort.direction !== null;
-    const arrow = !isSortable ? null : isActive ? effectiveSort.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUpwardGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ArrowDownwardGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(UnfoldMoreGlyph, { size: "sm" });
+    const arrow = !isSortable ? null : isActive ? effectiveSort.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUpGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ArrowDownGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(ChevronsUpDownGlyph, { size: "sm" });
     const ariaSort = isActive ? effectiveSort.direction === "asc" ? "ascending" : "descending" : void 0;
     const isSticky = column.sticky === "right";
     if (isCompact) {
@@ -1051,7 +1052,7 @@ var DataTable = ({
             },
             "aria-label": labels.resetColumns,
             title: labels.resetColumns,
-            children: /* @__PURE__ */ jsx(SettingsBackupRestoreGlyph, { size: "md" })
+            children: /* @__PURE__ */ jsx(RotateCcwGlyph, { size: "md" })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1215,7 +1216,7 @@ var DataTable = ({
           onClick: () => goToPage(1),
           disabled: currentPage <= 1,
           label: labels.firstPage,
-          icon: /* @__PURE__ */ jsx(KeyboardDoubleArrowLeftGlyph, { size: "md" })
+          icon: /* @__PURE__ */ jsx(ChevronsLeftGlyph, { size: "md" })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1256,7 +1257,7 @@ var DataTable = ({
           onClick: () => goToPage(totalPages),
           disabled: currentPage >= totalPages,
           label: labels.lastPage,
-          icon: /* @__PURE__ */ jsx(KeyboardDoubleArrowRightGlyph, { size: "md" })
+          icon: /* @__PURE__ */ jsx(ChevronsRightGlyph, { size: "md" })
         }
       )
     ] }),
@@ -1527,7 +1528,7 @@ var DataTable = ({
           /* @__PURE__ */ jsx("span", { role: "status", children: /* @__PURE__ */ jsx(VisuallyHidden, { children: settingsSaid }) })
         ] }),
         footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button, { variant: "tertiary", onClick: cancelTableSettings, children: labels.cancel }),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: cancelTableSettings, children: labels.cancel }),
           /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: applyTableSettings, children: labels.apply })
         ] }),
         children: [
@@ -1590,7 +1591,7 @@ var DataTable = ({
                         size: "sm",
                         className: "crewlet-data-table__column-drag-handle",
                         label: labels.reorder(name),
-                        icon: /* @__PURE__ */ jsx(DragIndicatorGlyph, { size: "md" }),
+                        icon: /* @__PURE__ */ jsx(GripVerticalGlyph, { size: "md" }),
                         "aria-describedby": reorderHintId,
                         draggable: true,
                         onDragStart: (e) => handleDragStart(e, key),
@@ -1621,7 +1622,7 @@ var DataTable = ({
                         {
                           size: "sm",
                           label: labels.moveUp(name),
-                          icon: /* @__PURE__ */ jsx(KeyboardArrowUpGlyph, { size: "sm" }),
+                          icon: /* @__PURE__ */ jsx(ChevronUpGlyph, { size: "sm" }),
                           ...index === 0 ? { disabledReason: labels.atTop(name) } : {},
                           onClick: () => moveColumn(key, -1)
                         }
@@ -1631,7 +1632,7 @@ var DataTable = ({
                         {
                           size: "sm",
                           label: labels.moveDown(name),
-                          icon: /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { size: "sm" }),
+                          icon: /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm" }),
                           ...index === draftColumnOrder.length - 1 ? { disabledReason: labels.atBottom(name) } : {},
                           onClick: () => moveColumn(key, 1)
                         }

package/dist/{chunk-BZYDZBAN.js → chunk-ETYEBKR4.js}

@@ -1,8 +1,8 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Button-D4J6B4MA.css';
+import './Button-X4B2TJAQ.css';
 import { forwardRef, useId, Children, isValidElement, cloneElement } from 'react';
-import { OpenInNewGlyph } from '@crewlethq/icons/glyphs';
+import { ExternalLinkGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function buttonClass({ variant = "primary", size = "medium", shape = "square", block, className }, extra) {
@@ -104,7 +104,7 @@ var ButtonLink = forwardRef(function ButtonLink2({
   children,
   ...rest
 }, ref) {
-  const trailing = trailingIcon ?? (external ? /* @__PURE__ */ jsx(OpenInNewGlyph, { size: "sm" }) : void 0);
+  const trailing = trailingIcon ?? (external ? /* @__PURE__ */ jsx(ExternalLinkGlyph, { size: "sm" }) : void 0);
   return /* @__PURE__ */ jsx(
     "a",
     {

package/dist/{chunk-34VGEDVV.js → chunk-FD5UEN6X.js}

@@ -1,21 +1,21 @@
-import { Toolbar } from './chunk-5EKIWVOR.js';
+import { Toolbar } from './chunk-PGRPNDWM.js';
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
-import { Kbd } from './chunk-SFZOKW2G.js';
-import { DataTable } from './chunk-WQX73TWF.js';
-import { Menu } from './chunk-FBZAKNSX.js';
-import { DateTimePicker } from './chunk-UG46QBLT.js';
-import { Popover } from './chunk-DD5BBGBE.js';
-import { useListbox, useOptionKeys } from './chunk-GTOUGQQK.js';
-import { Input } from './chunk-O6232G37.js';
+import { Kbd } from './chunk-KJ34ZBBI.js';
+import { DataTable } from './chunk-ERVO6OUF.js';
+import { Menu } from './chunk-IPVQKAHO.js';
+import { DateTimePicker } from './chunk-YIMOT5OO.js';
+import { Popover } from './chunk-AUS5FNQE.js';
+import { useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
+import { Input } from './chunk-DSUY5F4E.js';
 import { Count } from './chunk-BHHIIK3M.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
-import { Button } from './chunk-BZYDZBAN.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
+import { Button } from './chunk-ETYEBKR4.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DataView-256YF32J.css';
+import './DataView-N6JX464S.css';
 import { useMemo, useState, useEffect, useCallback, useRef, useId } from 'react';
-import { SearchGlyph, KeyboardArrowDownGlyph, TuneGlyph, ArrowUpwardGlyph, ArrowDownwardGlyph, CloseGlyph, SwapVertGlyph, VisibilityGlyph, VisibilityOffGlyph, TagGlyph, ScheduleGlyph, ListGlyph, CheckGlyph } from '@crewlethq/icons/glyphs';
+import { SearchGlyph, ChevronDownGlyph, SlidersVerticalGlyph, ArrowUpGlyph, ArrowDownGlyph, XGlyph, ArrowUpDownGlyph, EyeGlyph, EyeOffGlyph, HashGlyph, ClockGlyph, ListGlyph, CheckGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var DATA_VIEW_TOOLBAR_LABELS = {
@@ -41,9 +41,9 @@ function glyphForKind(def) {
     case "select":
       return /* @__PURE__ */ jsx(ListGlyph, { size: "sm" });
     case "datetime":
-      return /* @__PURE__ */ jsx(ScheduleGlyph, { size: "sm" });
+      return /* @__PURE__ */ jsx(ClockGlyph, { size: "sm" });
     case "number":
-      return /* @__PURE__ */ jsx(TagGlyph, { size: "sm" });
+      return /* @__PURE__ */ jsx(HashGlyph, { size: "sm" });
     default:
       return /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" });
   }
@@ -119,11 +119,11 @@ function DataViewToolbar({
       {
         label: labels.addFilter,
         items: filterItems,
-        icon: /* @__PURE__ */ jsx(TuneGlyph, { size: "sm" }),
+        icon: /* @__PURE__ */ jsx(SlidersVerticalGlyph, { size: "sm" }),
         triggerVariant: "secondary",
         trigger: /* @__PURE__ */ jsxs("span", { className: "crewlet-data-view-toolbar__menu-label", children: [
           labels.filter,
-          /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { size: "xs" })
+          /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "xs" })
         ] })
       }
     ) : null,
@@ -140,15 +140,15 @@ function DataViewToolbar({
             variant: "secondary",
             size: "small",
             pressed: sort !== null,
-            leadingIcon: /* @__PURE__ */ jsx(SwapVertGlyph, { size: "sm" }),
+            leadingIcon: /* @__PURE__ */ jsx(ArrowUpDownGlyph, { size: "sm" }),
             onClick: toggle,
             children: /* @__PURE__ */ jsx("span", { className: "crewlet-data-view-toolbar__menu-label", children: sort && sortedName ? /* @__PURE__ */ jsxs(Fragment, { children: [
               labels.sortedBy(String(sortedName)),
-              sort.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUpwardGlyph, { size: "xs" }) : /* @__PURE__ */ jsx(ArrowDownwardGlyph, { size: "xs" }),
+              sort.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUpGlyph, { size: "xs" }) : /* @__PURE__ */ jsx(ArrowDownGlyph, { size: "xs" }),
               /* @__PURE__ */ jsx(VisuallyHidden, { children: sort.direction === "asc" ? labels.ascendingWord : labels.descendingWord })
             ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
               labels.sort,
-              /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { size: "xs" })
+              /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "xs" })
             ] }) })
           }
         ),
@@ -167,7 +167,7 @@ function DataViewToolbar({
                     variant: "ghost",
                     pressed: isAscending,
                     label: labels.ascending(name),
-                    icon: /* @__PURE__ */ jsx(ArrowUpwardGlyph, { size: "xs" }),
+                    icon: /* @__PURE__ */ jsx(ArrowUpGlyph, { size: "xs" }),
                     onClick: () => {
                       onSortChange({ key: column.key, direction: "asc" });
                       close();
@@ -181,7 +181,7 @@ function DataViewToolbar({
                     variant: "ghost",
                     pressed: isDescending,
                     label: labels.descending(name),
-                    icon: /* @__PURE__ */ jsx(ArrowDownwardGlyph, { size: "xs" }),
+                    icon: /* @__PURE__ */ jsx(ArrowDownGlyph, { size: "xs" }),
                     onClick: () => {
                       onSortChange({ key: column.key, direction: "desc" });
                       close();
@@ -194,9 +194,9 @@ function DataViewToolbar({
           sort ? /* @__PURE__ */ jsx("div", { className: "crewlet-data-view-toolbar__sort-footer", children: /* @__PURE__ */ jsx(
             Button,
             {
-              variant: "tertiary",
+              variant: "ghost",
               size: "small",
-              leadingIcon: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" }),
+              leadingIcon: /* @__PURE__ */ jsx(XGlyph, { size: "xs" }),
               onClick: () => {
                 onSortChange(null);
                 close();
@@ -213,7 +213,7 @@ function DataViewToolbar({
         variant: "secondary",
         size: "small",
         pressed: showArchived,
-        leadingIcon: showArchived ? /* @__PURE__ */ jsx(VisibilityGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(VisibilityOffGlyph, { size: "sm" }),
+        leadingIcon: showArchived ? /* @__PURE__ */ jsx(EyeGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(EyeOffGlyph, { size: "sm" }),
         onClick: () => onShowArchivedChange(!showArchived),
         children: /* @__PURE__ */ jsxs("span", { className: "crewlet-data-view-toolbar__menu-label", children: [
           labels.showArchived(archivedLabel),
@@ -456,7 +456,7 @@ function OptionListEditor({ def, value, labels, onCommit }) {
         role: "listbox",
         "aria-label": labels.options(def.label),
         "aria-multiselectable": multiple || void 0,
-        "aria-activedescendant": options.length > 0 ? listbox.optionId(listbox.active) : void 0,
+        "aria-activedescendant": listbox.active >= 0 ? listbox.optionId(listbox.active) : void 0,
         tabIndex: 0,
         className: "crewlet-filter-axis__options",
         onKeyDown,
@@ -489,7 +489,7 @@ function OptionListEditor({ def, value, labels, onCommit }) {
       }
     ),
     multiple && held.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "crewlet-filter-axis__editor-footer", children: [
-      /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "small", onClick: () => onCommit([]), children: labels.clear }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "small", onClick: () => onCommit([]), children: labels.clear }),
       /* @__PURE__ */ jsx(Button, { variant: "primary", size: "small", onClick: () => onCommit(held, { close: true }), children: labels.done })
     ] }) : null
   ] });
@@ -578,7 +578,7 @@ function FilterAxisChip({
             ":"
           ] }),
           /* @__PURE__ */ jsx("span", { className: "crewlet-filter-axis-chip__value", children: formatFilterValue(def, value, labels) }),
-          /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { className: "crewlet-filter-axis-chip__chevron", size: "xs" })
+          /* @__PURE__ */ jsx(ChevronDownGlyph, { className: "crewlet-filter-axis-chip__chevron", size: "xs" })
         ] }),
         children: editor
       }
@@ -590,7 +590,7 @@ function FilterAxisChip({
         size: "sm",
         variant: "ghost",
         label: labels.remove(def.label),
-        icon: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" }),
+        icon: /* @__PURE__ */ jsx(XGlyph, { size: "xs" }),
         onClick: onRemove
       }
     ) : null
@@ -639,9 +639,9 @@ function FilterAxisBar({
       Button,
       {
         className: "crewlet-filter-axis-bar__clear",
-        variant: "tertiary",
+        variant: "ghost",
         size: "small",
-        leadingIcon: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" }),
+        leadingIcon: /* @__PURE__ */ jsx(XGlyph, { size: "xs" }),
         onClick: onClearAll,
         children: labels.clearAll
       }

package/dist/{chunk-5SDBMKUO.js → chunk-FIFNP6PL.js}

@@ -1,8 +1,8 @@
-import { useTreeState, treeExpandable, treeLevel, treePosInSet, treeSetSize, treeItemAction, treePrevious, treeNext, treeStep } from './chunk-NTRZGNEX.js';
+import { useTreeState, treeExpandable, treeLevel, treePosInSet, treeSetSize, treeItemAction, treePrevious, treeNext, treeStep } from './chunk-S3BCVWTU.js';
 import { LayerNodeBridge } from './chunk-53DVJCVW.js';
 import { LayerHost, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
-import { focusables } from './chunk-ITHXJHBB.js';
-import { IconButton } from './chunk-F27EPQ7D.js';
+import { focusables } from './chunk-R25RGPUB.js';
+import { IconButton } from './chunk-4UQ7SMPK.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeGrid-NSW7VMOX.css';

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: [
           " ",