@crewlethq/ui 0.2.0 → 0.3.0

package/dist/chunk-GHYY2WPF.js

@@ -0,0 +1,907 @@
+import { Toolbar } from './chunk-5EKIWVOR.js';
+import { PageHeader } from './chunk-HOXGBLEY.js';
+import { RelativeTime } from './chunk-3CZ7XAVY.js';
+import { Kbd } from './chunk-SFZOKW2G.js';
+import { DataTable } from './chunk-EHMQQHYR.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 { Count } from './chunk-BHHIIK3M.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { Button } from './chunk-BZYDZBAN.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './DataView-256YF32J.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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var DATA_VIEW_TOOLBAR_LABELS = {
+  toolbar: "Filters",
+  search: "Search",
+  searchPlaceholder: "Search",
+  clearSearch: "Clear search",
+  filter: "Filter",
+  addFilter: "Add filter",
+  sort: "Sort",
+  sortedBy: (column) => `Sort: ${column}`,
+  sortPanel: "Sort",
+  ascending: (column) => `Sort ${column} ascending`,
+  descending: (column) => `Sort ${column} descending`,
+  ascendingWord: "ascending",
+  descendingWord: "descending",
+  clearSort: "Clear sort",
+  showArchived: (archivedLabel) => `Show ${archivedLabel}`,
+  archivedCount: (archivedLabel) => `${archivedLabel} rows`
+};
+function glyphForKind(def) {
+  switch (def.kind) {
+    case "select":
+      return /* @__PURE__ */ jsx(ListGlyph, { size: "sm" });
+    case "datetime":
+      return /* @__PURE__ */ jsx(ScheduleGlyph, { size: "sm" });
+    case "number":
+      return /* @__PURE__ */ jsx(TagGlyph, { size: "sm" });
+    default:
+      return /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" });
+  }
+}
+function DataViewToolbar({
+  filters,
+  values,
+  onValuesChange,
+  displayed = [],
+  onAddFilter,
+  onSubmit,
+  columns = [],
+  sort = null,
+  onSortChange,
+  onShowArchivedChange,
+  showArchived = false,
+  archivedLabel = "archived",
+  archivedCount = 0,
+  actions,
+  sticky = false,
+  labels: overrides,
+  className
+}) {
+  const labels = overrides ? { ...DATA_VIEW_TOOLBAR_LABELS, ...overrides } : DATA_VIEW_TOOLBAR_LABELS;
+  const searchDef = useMemo(
+    () => filters.find((def) => def.role === "search") ?? filters.find((def) => (def.kind ?? "text") === "text"),
+    [filters]
+  );
+  const addable = useMemo(
+    () => filters.filter((def) => def !== searchDef && !displayed.includes(def.name)),
+    [filters, searchDef, displayed]
+  );
+  const sortable = useMemo(() => columns.filter((column) => column.sortable), [columns]);
+  const sortedColumn = sort ? sortable.find((column) => column.key === sort.key) : void 0;
+  const sortedName = sortedColumn ? headerText(sortedColumn) : sort?.key;
+  const setSearch = (next) => {
+    if (!searchDef) return;
+    onValuesChange({ ...values, [searchDef.name]: next });
+  };
+  const onSearchKeyDown = (event) => {
+    if (event.key !== "Enter" || !searchDef || searchDef.submitOnEnter === false) return;
+    event.preventDefault();
+    onSubmit?.();
+  };
+  const filterItems = addable.map((def) => ({
+    key: def.name,
+    label: def.label,
+    icon: glyphForKind(def),
+    onSelect: () => onAddFilter?.(def.name)
+  }));
+  return /* @__PURE__ */ jsxs(Toolbar, { label: labels.toolbar, mode: "group", sticky, className: cx("crewlet-data-view-toolbar", className), children: [
+    searchDef ? /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "search",
+        inputSize: "sm",
+        containerClassName: "crewlet-data-view-toolbar__search",
+        leading: /* @__PURE__ */ jsx(SearchGlyph, { size: "sm" }),
+        "aria-label": searchDef.label || labels.search,
+        placeholder: searchDef.placeholder ?? labels.searchPlaceholder,
+        value: values[searchDef.name] === void 0 || values[searchDef.name] === null ? "" : String(values[searchDef.name]),
+        onChange: (event) => setSearch(event.target.value),
+        onKeyDown: onSearchKeyDown,
+        clearLabel: labels.clearSearch,
+        onClear: () => {
+          setSearch("");
+          onSubmit?.();
+        }
+      }
+    ) : null,
+    filterItems.length > 0 && onAddFilter ? /* @__PURE__ */ jsx(
+      Menu,
+      {
+        label: labels.addFilter,
+        items: filterItems,
+        icon: /* @__PURE__ */ jsx(TuneGlyph, { size: "sm" }),
+        triggerVariant: "secondary",
+        trigger: /* @__PURE__ */ jsxs("span", { className: "crewlet-data-view-toolbar__menu-label", children: [
+          labels.filter,
+          /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { size: "xs" })
+        ] })
+      }
+    ) : null,
+    sortable.length > 0 && onSortChange ? /* @__PURE__ */ jsx(
+      Popover,
+      {
+        align: "start",
+        role: "dialog",
+        label: labels.sortPanel,
+        className: "crewlet-data-view-toolbar__sort-panel",
+        trigger: (_open, toggle) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "small",
+            pressed: sort !== null,
+            leadingIcon: /* @__PURE__ */ jsx(SwapVertGlyph, { 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" }),
+              /* @__PURE__ */ jsx(VisuallyHidden, { children: sort.direction === "asc" ? labels.ascendingWord : labels.descendingWord })
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              labels.sort,
+              /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { size: "xs" })
+            ] }) })
+          }
+        ),
+        children: (close) => /* @__PURE__ */ jsxs("div", { className: "crewlet-data-view-toolbar__sort", children: [
+          /* @__PURE__ */ jsx("ul", { className: "crewlet-data-view-toolbar__sort-list", children: sortable.map((column) => {
+            const name = headerText(column);
+            const isAscending = sort?.key === column.key && sort.direction === "asc";
+            const isDescending = sort?.key === column.key && sort.direction === "desc";
+            return /* @__PURE__ */ jsxs("li", { className: "crewlet-data-view-toolbar__sort-row", children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-data-view-toolbar__sort-label", children: column.header }),
+              /* @__PURE__ */ jsxs("span", { className: "crewlet-data-view-toolbar__sort-buttons", children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "sm",
+                    variant: "ghost",
+                    pressed: isAscending,
+                    label: labels.ascending(name),
+                    icon: /* @__PURE__ */ jsx(ArrowUpwardGlyph, { size: "xs" }),
+                    onClick: () => {
+                      onSortChange({ key: column.key, direction: "asc" });
+                      close();
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "sm",
+                    variant: "ghost",
+                    pressed: isDescending,
+                    label: labels.descending(name),
+                    icon: /* @__PURE__ */ jsx(ArrowDownwardGlyph, { size: "xs" }),
+                    onClick: () => {
+                      onSortChange({ key: column.key, direction: "desc" });
+                      close();
+                    }
+                  }
+                )
+              ] })
+            ] }, column.key);
+          }) }),
+          sort ? /* @__PURE__ */ jsx("div", { className: "crewlet-data-view-toolbar__sort-footer", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              size: "small",
+              leadingIcon: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" }),
+              onClick: () => {
+                onSortChange(null);
+                close();
+              },
+              children: labels.clearSort
+            }
+          ) }) : null
+        ] })
+      }
+    ) : null,
+    onShowArchivedChange ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        size: "small",
+        pressed: showArchived,
+        leadingIcon: showArchived ? /* @__PURE__ */ jsx(VisibilityGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(VisibilityOffGlyph, { size: "sm" }),
+        onClick: () => onShowArchivedChange(!showArchived),
+        children: /* @__PURE__ */ jsxs("span", { className: "crewlet-data-view-toolbar__menu-label", children: [
+          labels.showArchived(archivedLabel),
+          archivedCount > 0 ? /* @__PURE__ */ jsx(Count, { value: archivedCount, label: labels.archivedCount(archivedLabel) }) : null
+        ] })
+      }
+    ) : null,
+    actions ? /* @__PURE__ */ jsx("div", { className: "crewlet-data-view-toolbar__spacer" }) : null,
+    actions ? /* @__PURE__ */ jsx("div", { className: "crewlet-data-view-toolbar__actions", children: actions }) : null
+  ] });
+}
+function headerText(column) {
+  return typeof column.header === "string" ? column.header : column.key;
+}
+
+// src/DataView/filters.ts
+function defaultOperator(def) {
+  switch (def.kind ?? "text") {
+    case "select":
+      return def.multiple === true ? "is-any-of" : "is";
+    case "number":
+      return "equals";
+    case "datetime":
+      return "on-or-after";
+    default:
+      return "contains";
+  }
+}
+function operatorOf(def) {
+  return def.operator ?? defaultOperator(def);
+}
+function blankFilterValue(def) {
+  if (def.kind === "select" && def.multiple === true) return [];
+  if (def.kind === "select" && def.options && def.options.length > 0) return def.options[0]?.value ?? "";
+  return "";
+}
+function filterHasValue(def, value) {
+  if (def.kind === "select" && def.multiple === true) return Array.isArray(value) && value.length > 0;
+  if (value === void 0 || value === null || value === "") return false;
+  if (def.kind === "select" && def.options && def.options.length > 0) {
+    return String(value) !== String(def.options[0]?.value);
+  }
+  return true;
+}
+function asText(value) {
+  return value === void 0 || value === null ? "" : String(value);
+}
+function asTime(value) {
+  if (value === void 0 || value === null || value === "") return Number.NaN;
+  if (value instanceof Date) return value.getTime();
+  return new Date(String(value)).getTime();
+}
+function filterPredicate(def, value) {
+  if (!filterHasValue(def, value)) return null;
+  const read = def.value ?? ((row) => row?.[def.name]);
+  const operator = operatorOf(def);
+  if (operator === "is-any-of") {
+    const wanted = Array.isArray(value) ? value : [];
+    if (wanted.length === 0) return null;
+    const set = new Set(wanted.map((entry) => String(entry)));
+    return (row) => set.has(asText(read(row)));
+  }
+  if (operator === "is") {
+    return (row) => asText(read(row)) === String(value);
+  }
+  if (operator === "equals") {
+    const wanted = Number(value);
+    if (Number.isNaN(wanted)) return null;
+    return (row) => {
+      const raw = read(row);
+      if (raw === void 0 || raw === null || raw === "") return false;
+      return Number(raw) === wanted;
+    };
+  }
+  if (operator === "on-or-after" || operator === "on-or-before") {
+    const edge = asTime(value);
+    if (Number.isNaN(edge)) return null;
+    const after = operator === "on-or-after";
+    return (row) => {
+      const at = asTime(read(row));
+      if (Number.isNaN(at)) return false;
+      return after ? at >= edge : at <= edge;
+    };
+  }
+  const needle = String(value).trim().toLowerCase();
+  if (needle === "") return null;
+  return (row) => {
+    const raw = read(row);
+    if (raw === void 0 || raw === null) return false;
+    return String(raw).toLowerCase().includes(needle);
+  };
+}
+function applyFilters(rows, defs, values) {
+  if (!values || rows.length === 0 || defs.length === 0) return rows;
+  const predicates = [];
+  for (const def of defs) {
+    const predicate = filterPredicate(def, values[def.name]);
+    if (predicate) predicates.push(predicate);
+  }
+  if (predicates.length === 0) return rows;
+  return rows.filter((row) => predicates.every((predicate) => predicate(row)));
+}
+function filterDefsFromColumns(columns) {
+  const out = [];
+  for (const column of columns) {
+    if (!column.filterable) continue;
+    const def = {
+      name: column.key,
+      label: column.filterLabel ?? (typeof column.header === "string" ? column.header : column.key),
+      kind: column.filterKind ?? "text"
+    };
+    if (column.filterOperator) def.operator = column.filterOperator;
+    if (column.filterPlaceholder) def.placeholder = column.filterPlaceholder;
+    if (column.filterValue) def.value = column.filterValue;
+    if ((column.filterKind ?? "text") === "select") {
+      def.options = column.filterOptions ?? [];
+      def.multiple = column.filterMultiple === true;
+    }
+    out.push(def);
+  }
+  return out;
+}
+function applyColumnFilters(rows, columns, values) {
+  return applyFilters(rows, filterDefsFromColumns(columns), values);
+}
+var FILTER_AXIS_LABELS = {
+  clearAll: "Clear filters",
+  remove: (label) => `Remove the ${label} filter`,
+  editor: (label) => `${label} filter`,
+  options: (label) => `${label} options`,
+  any: "any",
+  selected: (howMany) => `${howMany} selected`,
+  clear: "Clear",
+  done: "Done",
+  enter: "Enter",
+  operator: {
+    contains: "contains",
+    is: "is",
+    "is-any-of": "is any of",
+    equals: "equals",
+    "on-or-after": "on or after",
+    "on-or-before": "on or before"
+  }
+};
+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 unusual = def.operator !== void 0 && def.operator !== defaultOperator(def);
+  const prefix = unusual ? `${labels.operator[operator]} ` : "";
+  if (isMultiple(def)) {
+    const held = chosenValues(value);
+    if (held.length === 0) return 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 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;
+  }
+  if (def.kind === "select") {
+    const option = def.options?.find((candidate) => sameValue(candidate.value, value));
+    return `${prefix}${option ? option.label : String(value)}`;
+  }
+  if (def.kind === "datetime") {
+    const at = new Date(String(value));
+    if (!Number.isNaN(at.getTime())) return `${prefix}${at.toLocaleString()}`;
+  }
+  return `${prefix}${String(value)}`;
+}
+function OptionListEditor({ def, value, labels, onCommit }) {
+  const id = useId();
+  const multiple = isMultiple(def);
+  const options = useMemo(() => def.options ?? [], [def.options]);
+  const held = useMemo(
+    () => multiple ? chosenValues(value) : value === void 0 || value === null ? [] : [value],
+    [multiple, value]
+  );
+  const list = useRef(null);
+  const isHeld = useCallback((candidate) => held.some((entry) => sameValue(entry, candidate)), [held]);
+  const commit = useCallback(
+    (index) => {
+      const option = options[index];
+      if (!option || option.disabled) return;
+      if (!multiple) {
+        onCommit(option.value, { close: true });
+        return;
+      }
+      const next = isHeld(option.value) ? held.filter((entry) => !sameValue(entry, option.value)) : [...held, option.value];
+      onCommit(next);
+    },
+    [held, isHeld, multiple, onCommit, options]
+  );
+  const listbox = useListbox({
+    id,
+    open: true,
+    count: options.length,
+    onCommit: commit,
+    // The popover around this owns Escape and the press outside, so the list
+    // must not register as a second popup: both would dismiss on one Escape.
+    popup: false,
+    onClose: () => {
+    }
+  });
+  const keys = useOptionKeys({
+    listbox,
+    count: options.length,
+    disabled: (index) => options[index]?.disabled === true,
+    textOf: (index) => options[index]?.label ?? ""
+  });
+  useEffect(() => {
+    listbox.setActive(keys.opening(options.findIndex((option) => isHeld(option.value))));
+  }, []);
+  useEffect(() => {
+    const box = list.current;
+    const row = box?.querySelector('[data-active="true"]');
+    if (!box || !row) return;
+    const bounds = box.getBoundingClientRect();
+    const spot = row.getBoundingClientRect();
+    if (spot.top < bounds.top) box.scrollTop -= bounds.top - spot.top;
+    else if (spot.bottom > bounds.bottom) box.scrollTop += spot.bottom - bounds.bottom;
+  }, [listbox.active]);
+  function onKeyDown(event) {
+    if (keys.onKeyDown(event)) return;
+    listbox.onKeyDown(event);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "crewlet-filter-axis__editor", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: (el) => {
+          list.current = el;
+          listbox.listRef(el);
+        },
+        id: listbox.listId,
+        role: "listbox",
+        "aria-label": labels.options(def.label),
+        "aria-multiselectable": multiple || void 0,
+        "aria-activedescendant": options.length > 0 ? listbox.optionId(listbox.active) : void 0,
+        tabIndex: 0,
+        className: "crewlet-filter-axis__options",
+        onKeyDown,
+        children: options.map((option, index) => {
+          const selected = isHeld(option.value);
+          const highlighted = index === listbox.active;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              id: listbox.optionId(index),
+              role: "option",
+              "aria-selected": selected,
+              "aria-disabled": option.disabled || void 0,
+              "data-active": highlighted || void 0,
+              className: cx(
+                "crewlet-filter-axis__option",
+                selected && "is-selected",
+                highlighted && "is-highlight",
+                option.disabled && "is-disabled"
+              ),
+              ...option.disabled ? {} : listbox.optionHandlers(index),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: cx("crewlet-filter-axis__tick", selected && "is-checked"), "aria-hidden": "true", children: selected ? /* @__PURE__ */ jsx(CheckGlyph, { size: "xs" }) : null }),
+                /* @__PURE__ */ jsx("span", { className: "crewlet-filter-axis__option-label", children: option.label })
+              ]
+            },
+            String(option.value)
+          );
+        })
+      }
+    ),
+    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: "primary", size: "small", onClick: () => onCommit(held, { close: true }), children: labels.done })
+    ] }) : null
+  ] });
+}
+function MomentEditor({ def, value, labels, onCommit }) {
+  return /* @__PURE__ */ jsx("div", { className: "crewlet-filter-axis__editor crewlet-filter-axis__editor--moment", children: /* @__PURE__ */ jsx(
+    DateTimePicker,
+    {
+      inline: true,
+      value: typeof value === "string" ? value : "",
+      onChange: (next) => onCommit(next),
+      onDone: () => onCommit(value, { close: true }),
+      showTime: true,
+      ariaLabel: labels.editor(def.label),
+      ...def.placeholder === void 0 ? {} : { placeholder: def.placeholder }
+    }
+  ) });
+}
+function TextEditor({ def, value, labels, onCommit }) {
+  const box = useRef(null);
+  useEffect(() => {
+    const node = box.current;
+    if (!node) return;
+    node.focus();
+    node.setSelectionRange(node.value.length, node.value.length);
+  }, []);
+  return /* @__PURE__ */ jsx("div", { className: "crewlet-filter-axis__editor crewlet-filter-axis__editor--text", children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      ref: box,
+      type: def.kind === "number" ? "number" : "text",
+      inputSize: "sm",
+      "aria-label": labels.editor(def.label),
+      trailing: /* @__PURE__ */ jsx(Kbd, { children: labels.enter }),
+      placeholder: def.placeholder ?? "",
+      defaultValue: value === void 0 || value === null ? "" : String(value),
+      onBlur: (event) => onCommit(event.target.value, { close: true }),
+      onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          onCommit(event.target.value, { close: true });
+        }
+      }
+    }
+  ) });
+}
+function FilterAxisChip({
+  def,
+  value,
+  onValueChange,
+  onRemove,
+  autoOpen = false,
+  onAutoOpenConsumed,
+  labels = FILTER_AXIS_LABELS,
+  className
+}) {
+  const [consumed, setConsumed] = useState(false);
+  useEffect(() => {
+    if (autoOpen && !consumed) {
+      setConsumed(true);
+      onAutoOpenConsumed?.();
+    }
+  }, [autoOpen, consumed, onAutoOpenConsumed]);
+  const editor = (close) => {
+    const onCommit = (next, options) => {
+      onValueChange(next);
+      if (options?.close) close();
+    };
+    const props = { def, value, labels, onCommit };
+    if (def.kind === "select") return /* @__PURE__ */ jsx(OptionListEditor, { ...props });
+    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,
+            ":"
+          ] }),
+          /* @__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" })
+        ] }),
+        children: editor
+      }
+    ),
+    onRemove ? /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        className: "crewlet-filter-axis-chip__remove",
+        size: "sm",
+        variant: "ghost",
+        label: labels.remove(def.label),
+        icon: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" }),
+        onClick: onRemove
+      }
+    ) : null
+  ] });
+}
+function FilterAxisBar({
+  filters,
+  values,
+  names,
+  onValuesChange,
+  onSubmit,
+  onRemove,
+  onClearAll,
+  autoOpenName,
+  onAutoOpenConsumed,
+  labels: overrides,
+  className,
+  children
+}) {
+  const labels = overrides ? { ...FILTER_AXIS_LABELS, ...overrides, operator: { ...FILTER_AXIS_LABELS.operator, ...overrides.operator } } : FILTER_AXIS_LABELS;
+  if (names.length === 0) return null;
+  const set = (def, next) => {
+    onValuesChange({ ...values, [def.name]: next });
+    onSubmit?.();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("crewlet-filter-axis-bar", className), children: [
+    names.map((name) => {
+      const def = filters.find((candidate) => candidate.name === name);
+      if (!def) return null;
+      return /* @__PURE__ */ jsx(
+        FilterAxisChip,
+        {
+          def,
+          value: values[name],
+          onValueChange: (next) => set(def, next),
+          ...onRemove ? { onRemove: () => onRemove(def) } : {},
+          autoOpen: autoOpenName === name,
+          ...onAutoOpenConsumed ? { onAutoOpenConsumed } : {},
+          labels
+        },
+        name
+      );
+    }),
+    children,
+    onClearAll ? /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "crewlet-filter-axis-bar__clear",
+        variant: "tertiary",
+        size: "small",
+        leadingIcon: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" }),
+        onClick: onClearAll,
+        children: labels.clearAll
+      }
+    ) : null
+  ] });
+}
+
+// src/DataView/columns.ts
+function tableColumns(columns) {
+  const record = {};
+  const order = [];
+  for (const column of columns) {
+    if (!column.key) continue;
+    const {
+      key,
+      header,
+      filterable: _filterable,
+      filterKind: _filterKind,
+      filterOperator: _filterOperator,
+      filterOptions: _filterOptions,
+      filterMultiple: _filterMultiple,
+      filterLabel: _filterLabel,
+      filterValue: _filterValue,
+      filterPlaceholder: _filterPlaceholder,
+      ...rest
+    } = column;
+    order.push(key);
+    record[key] = { ...rest, label: header };
+  }
+  return { columns: record, order };
+}
+function readStored(key) {
+  if (!key) return false;
+  try {
+    return globalThis.localStorage?.getItem(key) === "1";
+  } catch {
+    return false;
+  }
+}
+function writeStored(key, on) {
+  if (!key) return;
+  try {
+    if (on) globalThis.localStorage?.setItem(key, "1");
+    else globalThis.localStorage?.removeItem(key);
+  } catch {
+  }
+}
+function DataView({
+  title,
+  description,
+  badges,
+  headerActions,
+  headingLevel,
+  filters = [],
+  filterValues,
+  onFilterValuesChange,
+  onApplyFilters,
+  columns,
+  rows,
+  defaultSort = null,
+  sort: sortProp,
+  onSortChange,
+  archivedPredicate,
+  archivedTimestamp,
+  showArchived: showArchivedProp,
+  onShowArchivedChange,
+  archivedStorageKey,
+  archivedLabel = "archived",
+  framed = false,
+  toolbarActions,
+  stickyToolbar = false,
+  labels: labelOverrides,
+  className,
+  ...table
+}) {
+  const labels = {
+    toolbar: labelOverrides?.toolbar,
+    chips: labelOverrides?.chips,
+    archivedAt: labelOverrides?.archivedAt ?? "Archived at",
+    archivedAtAbsent: labelOverrides?.archivedAtAbsent ?? "Not archived"
+  };
+  const [ownSort, setOwnSort] = useState(defaultSort);
+  const sort = sortProp !== void 0 ? sortProp : ownSort;
+  const setSort = onSortChange ?? setOwnSort;
+  const columnDefs = useMemo(() => filterDefsFromColumns(columns), [columns]);
+  const allFilters = useMemo(() => {
+    const seen = new Set(filters.map((def) => def.name));
+    return [...filters, ...columnDefs.filter((def) => !seen.has(def.name))];
+  }, [filters, columnDefs]);
+  const withValue = useCallback(
+    (values2) => {
+      const set = /* @__PURE__ */ new Set();
+      if (!values2) return set;
+      for (const def of allFilters) {
+        if (def.role === "search") continue;
+        if (filterHasValue(def, values2[def.name])) set.add(def.name);
+      }
+      return set;
+    },
+    [allFilters]
+  );
+  const [displayed, setDisplayed] = useState(() => withValue(filterValues));
+  const [justAdded, setJustAdded] = useState(null);
+  const lastValues = useRef(void 0);
+  useEffect(() => {
+    if (lastValues.current === filterValues) return;
+    lastValues.current = filterValues;
+    setDisplayed((was) => {
+      let next = null;
+      for (const name of withValue(filterValues)) {
+        if (was.has(name)) continue;
+        next ??= new Set(was);
+        next.add(name);
+      }
+      return next ?? was;
+    });
+  }, [filterValues, withValue]);
+  const names = useMemo(
+    () => allFilters.filter((def) => displayed.has(def.name)).map((def) => def.name),
+    [allFilters, displayed]
+  );
+  const values = filterValues ?? {};
+  const addFilter = (name) => {
+    setDisplayed((was) => new Set(was).add(name));
+    setJustAdded(name);
+  };
+  const removeFilter = (def) => {
+    setDisplayed((was) => {
+      const next = new Set(was);
+      next.delete(def.name);
+      return next;
+    });
+    onFilterValuesChange?.({ ...values, [def.name]: blankFilterValue(def) });
+    onApplyFilters?.();
+  };
+  const clearAll = () => {
+    const blank = { ...values };
+    for (const def of allFilters) {
+      if (def.role === "search") continue;
+      blank[def.name] = blankFilterValue(def);
+    }
+    setDisplayed(/* @__PURE__ */ new Set());
+    onFilterValuesChange?.(blank);
+    onApplyFilters?.();
+  };
+  const [ownShowArchived, setOwnShowArchived] = useState(() => readStored(archivedStorageKey));
+  const showArchived = showArchivedProp !== void 0 ? showArchivedProp : ownShowArchived;
+  const setShowArchived = (next) => {
+    if (onShowArchivedChange) {
+      onShowArchivedChange(next);
+      return;
+    }
+    setOwnShowArchived(next);
+    writeStored(archivedStorageKey, next);
+  };
+  const archivedCount = useMemo(
+    () => archivedPredicate ? rows.reduce((count, row) => archivedPredicate(row) ? count + 1 : count, 0) : 0,
+    [rows, archivedPredicate]
+  );
+  const visibleRows = useMemo(() => {
+    const filtered = applyFilters(rows, columnDefs, filterValues);
+    if (!archivedPredicate || showArchived) return filtered;
+    return filtered.filter((row) => !archivedPredicate(row));
+  }, [rows, columnDefs, filterValues, archivedPredicate, showArchived]);
+  const shownColumns = useMemo(() => {
+    if (!showArchived || !archivedTimestamp) return columns;
+    const archivedColumn = {
+      key: "__archived_at",
+      header: labels.archivedAt,
+      sortable: true,
+      shrink: true,
+      sortValue: (row) => {
+        const at = archivedTimestamp(row);
+        if (at === null || at === void 0 || at === "") return null;
+        const time = at instanceof Date ? at.getTime() : new Date(String(at)).getTime();
+        return Number.isNaN(time) ? null : time;
+      },
+      render: (row) => /* @__PURE__ */ jsx(RelativeTime, { value: archivedTimestamp(row) ?? null, emptyLabel: labels.archivedAtAbsent })
+    };
+    return [...columns, archivedColumn];
+  }, [columns, showArchived, archivedTimestamp, labels.archivedAt, labels.archivedAtAbsent]);
+  const { columns: tableCols, order } = useMemo(() => tableColumns(shownColumns), [shownColumns]);
+  const showToolbar = allFilters.length > 0 || !!toolbarActions || (!!onShowArchivedChange || !!archivedPredicate);
+  const toolbar = showToolbar ? /* @__PURE__ */ jsx(
+    DataViewToolbar,
+    {
+      filters: allFilters,
+      values,
+      onValuesChange: (next) => onFilterValuesChange?.(next),
+      displayed: names,
+      onAddFilter: addFilter,
+      ...onApplyFilters ? { onSubmit: onApplyFilters } : {},
+      columns: shownColumns,
+      sort,
+      onSortChange: setSort,
+      ...archivedPredicate ? { onShowArchivedChange: setShowArchived } : {},
+      showArchived,
+      archivedLabel,
+      archivedCount,
+      actions: toolbarActions,
+      ...labels.toolbar ? { labels: labels.toolbar } : {}
+    }
+  ) : null;
+  const chips = names.length > 0 ? /* @__PURE__ */ jsx(
+    FilterAxisBar,
+    {
+      filters: allFilters,
+      values,
+      names,
+      onValuesChange: (next) => onFilterValuesChange?.(next),
+      ...onApplyFilters ? { onSubmit: onApplyFilters } : {},
+      onRemove: removeFilter,
+      onClearAll: clearAll,
+      autoOpenName: justAdded,
+      onAutoOpenConsumed: () => setJustAdded(null),
+      ...labels.chips ? { labels: labels.chips } : {}
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        "crewlet-data-view",
+        framed && "crewlet-data-view--framed",
+        stickyToolbar && "crewlet-data-view--sticky-toolbar",
+        className
+      ),
+      children: [
+        title !== void 0 ? /* @__PURE__ */ jsx(
+          PageHeader,
+          {
+            title,
+            ...headingLevel === void 0 ? {} : { headingLevel },
+            ...description === void 0 ? {} : { description },
+            ...badges === void 0 ? {} : { badges },
+            ...headerActions === void 0 ? {} : { actions: headerActions }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("div", { className: "crewlet-data-view__table", children: /* @__PURE__ */ jsx(
+          DataTable,
+          {
+            ...table,
+            variant: "compact",
+            paginated: table.paginated ?? false,
+            showSettings: table.showSettings ?? true,
+            columns: tableCols,
+            defaultColumnOrder: order,
+            data: [...visibleRows],
+            sort,
+            onSortChange: setSort,
+            defaultSort,
+            ...toolbar ? { renderToolbar: toolbar } : {},
+            ...chips ? { renderFilterBar: chips } : {},
+            ...archivedPredicate ? { archivedPredicate } : {},
+            archivedLabel
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns };