@crewlethq/ui 0.69.0 → 0.71.0

package/dist/{chunk-ELLRZ5XR.js → chunk-FURJVZCT.js}

@@ -1,15 +1,19 @@
 import { Checkbox } from './chunk-PBCNINMB.js';
 import { EmptyState } from './chunk-PPUR46MK.js';
 import { useMediaMatch } from './chunk-RTPQDNW3.js';
-import { Button } from './chunk-7QTPJDRF.js';
+import { Button } from './chunk-DGXZ635L.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DataGrid-NHIN2I42.css';
+import './DataGrid-Q26F2V5Q.css';
 import { useId, useRef, useState, useMemo, useCallback, useLayoutEffect, useImperativeHandle, useSyncExternalStore, useEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
-import { ChevronDownGlyph, ChevronUpGlyph } from '@crewlethq/icons/glyphs';
+import { ArrowDownGlyph, ArrowUpGlyph, ArrowUpDownGlyph } from '@crewlethq/icons/glyphs';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
+var DATA_GRID_ICON_TRACK = "calc(var(--size-target-min) + var(--spacing-3) * 2)";
+function alignOf(column) {
+  return column.align ?? (column.icon ? "center" : "left");
+}
 function columnChoicesOf(columns) {
   return columns.map((column) => ({
     key: column.key,
@@ -59,6 +63,15 @@ function parseGridSort(raw) {
   if (!raw) return null;
   return raw.startsWith("-") ? { key: raw.slice(1), desc: true } : { key: raw, desc: false };
 }
+function nextGridSort(column, sort, defaultSort = "") {
+  const chosen = sort === defaultSort ? "" : sort;
+  const current2 = parseGridSort(chosen || defaultSort);
+  let next;
+  if (current2?.key !== column) next = column;
+  else if (!current2.desc) next = `-${column}`;
+  else next = chosen ? "" : column;
+  return next === defaultSort ? "" : next;
+}
 function headerWord(column) {
   return typeof column.header === "string" ? column.header : "";
 }
@@ -120,7 +133,7 @@ function squeezed(wrap, visible, leading = 0) {
   let headCut = false;
   for (let i = 0; i < visible.length; i++) {
     const column = visible[i];
-    if (!column.shrink || column.width) continue;
+    if (!column.shrink || column.width || column.icon) continue;
     const head = heads[i + leading];
     if (!head || head.getBoundingClientRect().width >= cap) continue;
     if (cutShort(head)) headCut = true;
@@ -156,6 +169,7 @@ function DataGrid({
   selection,
   isFailed,
   sort: sortRaw = "",
+  defaultSort = "",
   onSortChange,
   serverSorted = false,
   cols: colsRaw = "",
@@ -174,7 +188,7 @@ function DataGrid({
   className
 }) {
   const text = { ...LABELS, ...labels };
-  const sort = parseGridSort(sortRaw);
+  const sort = parseGridSort(sortRaw || defaultSort);
   const body = useRef(null);
   const [cursor, setCursor] = useState(-1);
   const gridId = useId();
@@ -278,7 +292,7 @@ function DataGrid({
     ),
     action: true,
     phoneLead: true,
-    width: "calc(var(--size-target-min) + var(--spacing-3) * 2)"
+    width: DATA_GRID_ICON_TRACK
   } : null;
   const drawnColumns = selectColumn ? [selectColumn, ...visibleColumns] : visibleColumns;
   const leading = drawnColumns.length - visibleColumns.length;
@@ -312,10 +326,31 @@ function DataGrid({
         body.current?.querySelector(`[data-row-index="${next}"]`)?.scrollIntoView({ block: "nearest" });
         return next;
       }),
+      // THE ROW'S OWN WAY IN, from the keyboard: its handler where it has
+      // one, else its link, followed as a click on it would be (with the
+      // keys held, so a modified Enter opens it elsewhere as a modified
+      // click does). A grid of links only had no Enter at all.
       activate: (event) => {
         const row = flat[cursor];
-        if (row === void 0 || !onRowActivate) return false;
-        onRowActivate(row, event);
+        if (row === void 0) return false;
+        if (onRowActivate) {
+          onRowActivate(row, event);
+          return true;
+        }
+        const link = body.current?.querySelector(
+          `[data-row-index="${cursor}"] > .crewlet-data-grid__cell > a.crewlet-data-grid__row-link`
+        );
+        if (!link) return false;
+        link.dispatchEvent(
+          new MouseEvent("click", {
+            bubbles: true,
+            cancelable: true,
+            metaKey: event.metaKey,
+            ctrlKey: event.ctrlKey,
+            shiftKey: event.shiftKey,
+            altKey: event.altKey
+          })
+        );
         return true;
       },
       rowCount: () => flat.length
@@ -324,11 +359,11 @@ function DataGrid({
   );
   function headerClick(column) {
     if (!column.sortValue || !onSortChange) return;
-    if (sort?.key === column.key && !sort.desc) onSortChange(`-${column.key}`);
-    else if (sort?.key === column.key && sort.desc) onSortChange("");
-    else onSortChange(column.key);
+    onSortChange(nextGridSort(column.key, sortRaw, defaultSort));
   }
-  const template = drawnColumns.map((c) => c.width ?? (c.shrink ? `fit-content(${SHRINK_CAP})` : `minmax(${c.floor ?? 0}, 1fr)`)).join(" ");
+  const template = drawnColumns.map(
+    (c) => c.width ?? (c.icon ? DATA_GRID_ICON_TRACK : c.shrink ? `fit-content(${SHRINK_CAP})` : `minmax(${c.floor ?? 0}, 1fr)`)
+  ).join(" ");
   if (flat.length === 0 && !bands?.length && empty) {
     return /* @__PURE__ */ jsx("div", { className: cx("crewlet-data-grid", className), "data-flush": flush || void 0, children: /* @__PURE__ */ jsx(
       EmptyState,
@@ -377,7 +412,8 @@ function DataGrid({
         role: "cell",
         className: cx(
           "crewlet-data-grid__cell",
-          column.align === "right" && "crewlet-data-grid__cell--right",
+          alignOf(column) !== "left" && `crewlet-data-grid__cell--${alignOf(column)}`,
+          column.icon && "crewlet-data-grid__cell--icon",
           column.shrink && "crewlet-data-grid__cell--shrink"
         ),
         "data-lead": column.phoneLead || void 0,
@@ -444,36 +480,46 @@ function DataGrid({
           const sortable = Boolean(column.sortValue && onSortChange);
           const headClass = cx(
             "crewlet-data-grid__th",
-            column.align === "right" && "crewlet-data-grid__th--right",
+            alignOf(column) !== "left" && `crewlet-data-grid__th--${alignOf(column)}`,
+            column.icon && "crewlet-data-grid__th--icon",
             column.shrink && "crewlet-data-grid__th--shrink",
             sorted && "crewlet-data-grid__th--sorted",
             !sortable && "crewlet-data-grid__th--plain"
           );
-          const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: "crewlet-data-grid__truncate", children: column.header }),
-            sorted && (sort?.desc ? /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "xs" }) : /* @__PURE__ */ jsx(ChevronUpGlyph, { size: "xs" }))
-          ] });
+          const worded = column.header !== "" && column.header !== null && column.header !== void 0;
+          const label = worded ? /* @__PURE__ */ jsx("span", { className: "crewlet-data-grid__truncate", children: column.header }) : null;
+          const arrow = sorted ? sort?.desc ? /* @__PURE__ */ jsx(ArrowDownGlyph, { size: "xs" }) : /* @__PURE__ */ jsx(ArrowUpGlyph, { size: "xs" }) : sortable ? /* @__PURE__ */ jsx(ArrowUpDownGlyph, { size: "xs" }) : null;
+          const ariaSort = sorted ? sort?.desc ? "descending" : "ascending" : void 0;
+          const mark = arrow && /* @__PURE__ */ jsx("span", { className: "crewlet-data-grid__sort-mark", "aria-hidden": "true", children: arrow });
           if (!sortable) {
             const named = !headerWord(column) && !column.action ? column.label : void 0;
-            return /* @__PURE__ */ jsxs("div", { className: headClass, role: "columnheader", title: named, children: [
-              content,
-              named && /* @__PURE__ */ jsx(VisuallyHidden, { children: named })
-            ] }, column.key);
+            return (
+              // THE ORDER IN FORCE IS SAID on a head that cannot change it too:
+              // a grid sorted by its default, with nothing to press.
+              /* @__PURE__ */ jsxs("div", { className: headClass, role: "columnheader", title: named, "aria-sort": ariaSort, children: [
+                label,
+                mark,
+                named && /* @__PURE__ */ jsx(VisuallyHidden, { children: named })
+              ] }, column.key)
+            );
           }
           return /* @__PURE__ */ jsx(
             "div",
             {
               className: headClass,
               role: "columnheader",
-              "aria-sort": sorted ? sort?.desc ? "descending" : "ascending" : void 0,
-              children: /* @__PURE__ */ jsx(
+              "aria-sort": ariaSort,
+              children: /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
                   className: "crewlet-data-grid__sort",
                   onClick: () => headerClick(column),
                   "aria-label": headerWord(column) ? void 0 : column.label,
-                  children: content
+                  children: [
+                    label,
+                    mark
+                  ]
                 }
               )
             },
@@ -544,4 +590,4 @@ function useAnyDataGridDriving() {
   return drivable.length > 0;
 }
 
-export { ChooserList, ColumnChooser, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, parseGridSort, useAnyDataGridDriving, useDataGridDriving };
+export { ChooserList, ColumnChooser, DATA_GRID_ICON_TRACK, DataGrid, columnChoicesOf, countDataGridRows, fitGridColumns, nextGridSort, parseGridSort, useAnyDataGridDriving, useDataGridDriving };

package/dist/{chunk-5K7GGQNX.js → chunk-G4QZWVAB.js}

@@ -1,8 +1,8 @@
 import { safeHref } from './chunk-BAKPMH3S.js';
 import { IconTile } from './chunk-3LI4TRUR.js';
-import { ReceiptStrip } from './chunk-M25IV5MH.js';
+import { ReceiptStrip } from './chunk-ZWCK4N4L.js';
 import { StatusCard } from './chunk-NTQPJJAN.js';
-import { ButtonLink, Button } from './chunk-7QTPJDRF.js';
+import { ButtonLink, Button } from './chunk-DGXZ635L.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './OpenInAppCard-CKHCK7DO.css';
 import { CircleCheckGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-IABWA76I.js → chunk-H32JW6CZ.js}

@@ -1,9 +1,9 @@
 import { useReorder } from './chunk-MPVMB2DV.js';
+import { Kbd } from './chunk-ANTAQAR4.js';
 import { FormField, Textarea } from './chunk-ETSF7SU6.js';
 import { characterCountState, CharacterCount, countCharacters } from './chunk-PGCLHYVP.js';
-import { Kbd } from './chunk-ANTAQAR4.js';
 import { announce } from './chunk-2G355KDJ.js';
-import { Button } from './chunk-7QTPJDRF.js';
+import { Button } from './chunk-DGXZ635L.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-PX54PALQ.js → chunk-HPI5J6AR.js}

@@ -1,6 +1,6 @@
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-EE3DJMSQ.js';
 import { Popover } from './chunk-KHJIEPZV.js';
-import { Button } from './chunk-7QTPJDRF.js';
+import { Button } from './chunk-DGXZ635L.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { useFocusModality } from './chunk-NUZHC6MM.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-ZEPUKRO7.js → chunk-IJ7KLXUZ.js}

@@ -1,4 +1,4 @@
-import { Button } from './chunk-7QTPJDRF.js';
+import { Button } from './chunk-DGXZ635L.js';
 import './ErrorBoundary-U2PA3LY2.css';
 import { Component } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/{chunk-PVZOP3QK.js → chunk-IPUEVTRJ.js}

@@ -1,7 +1,7 @@
 import { useRoving, tabStop } from './chunk-EGMQURBR.js';
 import { StatusDot } from './chunk-WIATRXEJ.js';
 import { Count } from './chunk-MLDTLZAO.js';
-import { Menu } from './chunk-T73DMDU4.js';
+import { Menu } from './chunk-OQG4P5KU.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-RLBGU35B.js → chunk-J5WWMC35.js}

@@ -1,19 +1,20 @@
 import { PageHeader } from './chunk-FPDIHEM4.js';
-import { DataTable } from './chunk-UYK3SGZI.js';
-import { DateTimePicker } from './chunk-PX54PALQ.js';
+import { FilterPill } from './chunk-K4LZXSKZ.js';
+import { DataTable } from './chunk-BWFJB5JD.js';
+import { DateTimePicker } from './chunk-HPI5J6AR.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Toolbar } from './chunk-NR4CPM4T.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
-import { Input } from './chunk-ETSF7SU6.js';
 import { Kbd } from './chunk-ANTAQAR4.js';
+import { Input } from './chunk-ETSF7SU6.js';
 import { Count } from './chunk-MLDTLZAO.js';
-import { Menu } from './chunk-T73DMDU4.js';
-import { Button } from './chunk-7QTPJDRF.js';
+import { Menu } from './chunk-OQG4P5KU.js';
+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 './DataView-RH5UDA5F.css';
+import './DataView-L7HLNW7C.css';
 import { useMemo, useState, useEffect, useCallback, useRef, useId } from 'react';
 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';
@@ -362,31 +363,34 @@ var isMultiple = (def) => def.kind === "select" && def.multiple === true;
 var chosenValues = (value) => Array.isArray(value) ? [...value] : [];
 var sameValue = (a, b) => String(a) === String(b);
 function formatFilterValue(def, value, labels) {
-  const operator = operatorOf(def);
+  const { operator, answer } = filterAnswer(def, value, labels);
+  return operator ? `${operator} ${answer}` : answer;
+}
+function filterAnswer(def, value, labels) {
   const unusual = def.operator !== void 0 && def.operator !== defaultOperator(def);
-  const prefix = unusual ? `${labels.operator[operator]} ` : "";
+  const compared = (answer) => unusual ? { operator: labels.operator[operatorOf(def)], answer } : { answer };
   if (isMultiple(def)) {
     const held = chosenValues(value);
-    if (held.length === 0) return labels.any;
+    if (held.length === 0) return { answer: labels.any };
     if (held.length === 1) {
       const option = def.options?.find((candidate) => sameValue(candidate.value, held[0]));
-      return `${prefix}${option ? option.label : String(held[0])}`;
+      return compared(option ? option.label : String(held[0]));
     }
-    return labels.selected(held.length);
+    return { answer: labels.selected(held.length) };
   }
   if (value === void 0 || value === null || value === "") {
     const option = def.options?.find((candidate) => String(candidate.value) === "");
-    return option ? option.label : labels.any;
+    return { answer: option ? option.label : labels.any };
   }
   if (def.kind === "select") {
     const option = def.options?.find((candidate) => sameValue(candidate.value, value));
-    return `${prefix}${option ? option.label : String(value)}`;
+    return compared(option ? option.label : String(value));
   }
   if (def.kind === "datetime") {
     const at = new Date(String(value));
-    if (!Number.isNaN(at.getTime())) return `${prefix}${at.toLocaleString()}`;
+    if (!Number.isNaN(at.getTime())) return compared(at.toLocaleString());
   }
-  return `${prefix}${String(value)}`;
+  return compared(String(value));
 }
 function OptionListEditor({ def, value, labels, onCommit }) {
   const id = useId();
@@ -563,38 +567,33 @@ function FilterAxisChip({
     if (def.kind === "datetime") return /* @__PURE__ */ jsx(MomentEditor, { ...props });
     return /* @__PURE__ */ jsx(TextEditor, { ...props });
   };
-  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-filter-axis-chip", className), children: [
-    /* @__PURE__ */ jsx(
-      Popover,
-      {
-        align: "start",
-        role: "dialog",
-        label: labels.editor(def.label),
-        defaultOpen: autoOpen,
-        className: "crewlet-filter-axis__popover",
-        trigger: (open, toggle) => /* @__PURE__ */ jsxs("button", { type: "button", className: cx("crewlet-filter-axis-chip__trigger", open && "is-open"), onClick: toggle, children: [
-          /* @__PURE__ */ jsxs("span", { className: "crewlet-filter-axis-chip__label", children: [
-            def.label,
-            ":"
+  const { operator, answer } = filterAnswer(def, value, labels);
+  return /* @__PURE__ */ jsx(
+    FilterPill,
+    {
+      className: cx("crewlet-filter-axis-chip", className),
+      field: def.label,
+      operator,
+      value: answer,
+      onRemove,
+      removeLabel: labels.remove(def.label),
+      renderWords: (words, wordsClass) => /* @__PURE__ */ jsx(
+        Popover,
+        {
+          align: "start",
+          role: "dialog",
+          label: labels.editor(def.label),
+          defaultOpen: autoOpen,
+          className: "crewlet-filter-axis__popover",
+          trigger: (open, toggle) => /* @__PURE__ */ jsxs("button", { type: "button", className: cx(wordsClass, open && "is-open"), onClick: toggle, children: [
+            words,
+            /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "xs" })
           ] }),
-          /* @__PURE__ */ jsx("span", { className: "crewlet-filter-axis-chip__value", children: formatFilterValue(def, value, labels) }),
-          /* @__PURE__ */ jsx(ChevronDownGlyph, { className: "crewlet-filter-axis-chip__chevron", size: "xs" })
-        ] }),
-        children: editor
-      }
-    ),
-    onRemove ? /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        className: "crewlet-filter-axis-chip__remove",
-        size: "sm",
-        variant: "ghost",
-        label: labels.remove(def.label),
-        icon: /* @__PURE__ */ jsx(XGlyph, { size: "xs" }),
-        onClick: onRemove
-      }
-    ) : null
-  ] });
+          children: editor
+        }
+      )
+    }
+  );
 }
 function FilterAxisBar({
   filters,

package/dist/{chunk-O3BNL4TV.js → chunk-JD7P2GJP.js}

@@ -1,4 +1,4 @@
-import { ConfirmModal } from './chunk-I24FI46B.js';
+import { ConfirmModal } from './chunk-C667GCU7.js';
 import { InlineCode } from './chunk-PLL7ZJHY.js';
 import { Callout } from './chunk-BPCY7ZID.js';
 import './LinkInterstitial-ET4MSVSV.css';

package/dist/{chunk-SZFKGH2W.js → chunk-JIBWNHTC.js}

@@ -30,18 +30,44 @@ var TITLES = {
   warning: "Heads up",
   danger: "Something went wrong"
 };
-var DURATIONS = {
-  info: 4e3,
-  success: 4e3,
-  warning: 0,
-  danger: 0
+var GOES_BY_ITSELF = {
+  info: true,
+  success: true,
+  warning: false,
+  danger: false
 };
+var READ_MS_PER_WORD = 300;
+var READ_LEAD_MS = 2e3;
+var READ_FLOOR_MS = 4e3;
+var READ_CAP_MS = 15e3;
+function readingDuration(text) {
+  const words = wordsIn(text);
+  return Math.min(READ_CAP_MS, Math.max(READ_FLOOR_MS, READ_LEAD_MS + words * READ_MS_PER_WORD));
+}
+var segmenter;
+function wordsIn(text) {
+  if (segmenter === void 0) {
+    segmenter = typeof Intl !== "undefined" && typeof Intl.Segmenter === "function" ? new Intl.Segmenter(void 0, { granularity: "word" }) : null;
+  }
+  if (segmenter === null) return text.trim().split(/\s+/).filter(Boolean).length;
+  let words = 0;
+  for (const part of segmenter.segment(text)) {
+    if (part.isWordLike) words += 1;
+  }
+  return words;
+}
 var KNOWN = /* @__PURE__ */ new Set(["info", "success", "warning", "danger"]);
 var isKnown = (variant) => KNOWN.has(variant);
 var durationOf = (toast) => {
+  const given = toast.duration ?? null;
+  if (given !== null) return timerSafe(given);
   const variant = toast.variant ?? "info";
-  return toast.duration ?? (isKnown(variant) ? DURATIONS[variant] : 0);
+  if (!isKnown(variant) || !GOES_BY_ITSELF[variant]) return 0;
+  return readingDuration(readable(toast).join(" "));
 };
+var MAX_TIMER_MS = 2 ** 31 - 1;
+var timerSafe = (ms) => Number.isFinite(ms) ? Math.min(ms, MAX_TIMER_MS) : 0;
+var readable = (toast) => [toast.title, toast.message].filter((part) => typeof part === "string");
 var isSticky = (toast) => durationOf(toast) <= 0;
 var politeness = (variant) => variant === "danger" || variant === "quota" ? "assertive" : "polite";
 var isToastAction = (value) => {
@@ -51,7 +77,7 @@ var isToastAction = (value) => {
 };
 var sentences = (parts) => parts.length < 2 ? parts[0] ?? "" : parts.map((part) => /[.!?]$/.test(part) ? part : `${part}.`).join(" ");
 function spoken(toast, titles) {
-  const parts = [toast.title, toast.message].filter((part) => typeof part === "string");
+  const parts = readable(toast);
   if (parts.length > 0) return parts.join(". ");
   const variant = toast.variant ?? "info";
   return isKnown(variant) ? titles[variant] ?? "Notification" : "Notification";
@@ -70,8 +96,15 @@ function ToastItem({
   const dismiss = useCallback(() => onDismiss(id), [onDismiss, id]);
   const [paused, setPaused] = useState(false);
   const remaining = useRef(duration);
+  const counting = useRef({ version, duration });
   useEffect(() => {
-    remaining.current = duration;
+    const was = counting.current;
+    if (was.version !== version) {
+      remaining.current = duration;
+    } else if (was.duration !== duration) {
+      remaining.current = Math.max(0, remaining.current + duration - was.duration);
+    }
+    counting.current = { version, duration };
   }, [duration, version]);
   useEffect(() => {
     if (duration <= 0 || paused) return;
@@ -273,4 +306,4 @@ function ToastProvider({ children, position = "bottom-right", inset, renderActio
   ] });
 }
 
-export { ToastProvider, Toaster, toasterInsetStyle, useToast };
+export { ToastProvider, Toaster, readingDuration, toasterInsetStyle, useToast };

package/dist/{chunk-KIJJD4YD.js → chunk-JQEXAH7G.js}

@@ -1,5 +1,5 @@
 import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-MY374UUD.js';
-import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-F32FFE6I.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-OBPINJNO.js';
 import { focusables } from './chunk-H5XTJ7GJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeCanvas-5FPK4CII.css';

package/dist/{chunk-K4IVKHKU.js → chunk-JT7WRPZ6.js}

@@ -1,5 +1,5 @@
 import { Callout } from './chunk-BPCY7ZID.js';
-import { Button } from './chunk-7QTPJDRF.js';
+import { Button } from './chunk-DGXZ635L.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { useEffect } from 'react';

package/dist/chunk-K4LZXSKZ.js

@@ -0,0 +1,62 @@
+import { IconButton } from './chunk-UAUP6XGK.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './FilterPill-4GMNFZND.css';
+import { XGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var FILTER_PILL_LABELS = {
+  remove: (sentence) => `Remove the ${sentence} filter`,
+  removeUnnamed: "Remove this filter",
+  fieldEnd: ":"
+};
+var FILTER_PILL_WORDS_CLASS = "crewlet-filter-pill__words";
+function filterPillSentence(field, operator, value) {
+  const parts = [field, operator, value].filter((part) => part !== void 0 && part !== null && part !== "");
+  if (!parts.every((part) => typeof part === "string" || typeof part === "number")) return void 0;
+  return parts.join(" ");
+}
+function FilterPill({
+  field,
+  operator,
+  value,
+  onRemove,
+  removeLabel,
+  renderWords,
+  labels,
+  className
+}) {
+  const text = { ...FILTER_PILL_LABELS, ...labels };
+  const hasValue = value !== void 0 && value !== null && value !== "";
+  const hasOperator = operator !== void 0 && operator !== null && operator !== "";
+  const words = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-filter-pill__field", children: [
+      field,
+      hasValue && !hasOperator ? text.fieldEnd : null
+    ] }),
+    hasOperator ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "crewlet-filter-pill__operator", children: operator })
+    ] }) : null,
+    hasValue ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "crewlet-filter-pill__value", children: value })
+    ] }) : null
+  ] });
+  const sentence = filterPillSentence(field, hasOperator ? operator : void 0, hasValue ? value : void 0);
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-filter-pill", className), children: [
+    renderWords ? renderWords(words, FILTER_PILL_WORDS_CLASS) : /* @__PURE__ */ jsx("span", { className: FILTER_PILL_WORDS_CLASS, children: words }),
+    onRemove ? /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: "crewlet-filter-pill__remove",
+        size: "sm",
+        variant: "ghost",
+        label: removeLabel ?? (sentence ? text.remove(sentence) : text.removeUnnamed),
+        icon: /* @__PURE__ */ jsx(XGlyph, { size: "xs" }),
+        onClick: onRemove
+      }
+    ) : null
+  ] });
+}
+
+export { FILTER_PILL_LABELS, FILTER_PILL_WORDS_CLASS, FilterPill, filterPillSentence };

package/dist/{chunk-ZHVLDRAT.js → chunk-KAA3GFTP.js}

@@ -1,12 +1,12 @@
 import { Select } from './chunk-VK45YJLH.js';
 import { SHEET_LABELS, SHEET_COLUMN_TYPES, optionHue, retypeColumn } from './chunk-LFSIKGRQ.js';
-import { HueSwatch } from './chunk-2EA2GSA2.js';
+import { HueSwatch } from './chunk-AQIFKLXY.js';
 import { NODE_HUES, NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
 import { Checkbox } from './chunk-PBCNINMB.js';
-import { FormField, Input } from './chunk-ETSF7SU6.js';
 import { Kbd } from './chunk-ANTAQAR4.js';
-import { Menu } from './chunk-T73DMDU4.js';
-import { Button } from './chunk-7QTPJDRF.js';
+import { FormField, Input } from './chunk-ETSF7SU6.js';
+import { Menu } from './chunk-OQG4P5KU.js';
+import { Button } from './chunk-DGXZ635L.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { VisuallyHidden } from './chunk-UT6CW3C7.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-WDNURPXU.js → chunk-KL6A7JGH.js}

@@ -1,5 +1,5 @@
 import { Toolbar } from './chunk-NR4CPM4T.js';
-import { ShortcutTip } from './chunk-F32FFE6I.js';
+import { ShortcutTip } from './chunk-OBPINJNO.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './CanvasToolbar-EM5EVZED.css';

package/dist/{chunk-2JHGPXYG.js → chunk-KQWJWTED.js}

@@ -1,4 +1,4 @@
-import { Button } from './chunk-7QTPJDRF.js';
+import { Button } from './chunk-DGXZ635L.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './FileDrop-WE7BNZGV.css';
 import { forwardRef, useRef, useState } from 'react';

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

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

package/dist/{chunk-GDDVI4US.js → chunk-LQWORB5B.js}

@@ -1,4 +1,4 @@
-import { Modal } from './chunk-I24FI46B.js';
+import { Modal } from './chunk-C667GCU7.js';
 import { useListbox, useOptionKeys } from './chunk-7KHM2FZH.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { KeyChip, highlightMatch } from './chunk-HBDA76EZ.js';

package/dist/{chunk-EHB4TSP2.js → chunk-NXNLAZPK.js}

@@ -1,7 +1,7 @@
-import { Modal } from './chunk-I24FI46B.js';
+import { Modal } from './chunk-C667GCU7.js';
 import { useListbox, useHighlightRest } from './chunk-7KHM2FZH.js';
-import { Input } from './chunk-ETSF7SU6.js';
 import { Kbd } from './chunk-ANTAQAR4.js';
+import { Input } from './chunk-ETSF7SU6.js';
 import { Count } from './chunk-MLDTLZAO.js';
 import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { isComposing } from './chunk-H5XTJ7GJ.js';

package/dist/{chunk-WPMZKZUH.js → chunk-O3HCFM3D.js}

@@ -1,7 +1,7 @@
 import { PrincipalAvatar } from './chunk-CI3VPIJN.js';
 import { RelativeTime } from './chunk-EJNJMHQG.js';
 import { Timeline } from './chunk-4MJN2KN6.js';
-import { Button } from './chunk-7QTPJDRF.js';
+import { Button } from './chunk-DGXZ635L.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './VersionTimeline-DEAQ7CJG.css';
 import { RotateCcwClockGlyph, PencilGlyph, ShieldGlyph, DatabaseGlyph, UploadGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-F32FFE6I.js → chunk-OBPINJNO.js}

@@ -1,7 +1,7 @@
 import { LayerNodeBridge } from './chunk-LM3ISVJA.js';
 import { Tooltip } from './chunk-I33UIUZD.js';
 import { Kbd } from './chunk-ANTAQAR4.js';
-import { Button } from './chunk-7QTPJDRF.js';
+import { Button } from './chunk-DGXZ635L.js';
 import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-OMV5W53A.js';
 import { IconButton } from './chunk-UAUP6XGK.js';
 import { returnFocus } from './chunk-NUZHC6MM.js';