mui-atelier 0.1.0

package/dist/components/DataTable.js

@@ -0,0 +1,546 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslations } from "next-intl";
+import Box from "@mui/material/Box";
+import Checkbox from "@mui/material/Checkbox";
+import IconButton from "@mui/material/IconButton";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import KeyboardArrowUpRoundedIcon from "@mui/icons-material/KeyboardArrowUpRounded";
+import Card from "@mui/material/Card";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TablePagination from "@mui/material/TablePagination";
+import TableRow from "@mui/material/TableRow";
+import TableSortLabel from "@mui/material/TableSortLabel";
+import MenuItem from "@mui/material/MenuItem";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import CardHead, { CardHeadTitle } from "./CardHead.js";
+import LabeledField, { LabeledSelect } from "./LabeledField.js";
+import {
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import TableFilters from "./TableFilters.js";
+import { activeCount, applyFilters, filterableColumns } from "../lib/tableFilter.js";
+function RowCards({ rows, columns, selectable, t, expander = null }) {
+  const headline = columns.find((c) => c.primary) ?? columns.find((c) => c.value);
+  const actions = columns.find((c) => c.id === "actions");
+  const rest = columns.filter((c) => c !== headline && c !== actions);
+  return /* @__PURE__ */ jsx(Stack, { spacing: 1, sx: { p: 1.5 }, children: rows.map((row) => /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      variant: "outlined",
+      sx: { p: 1.5, borderRadius: (th) => `${th.rt?.radii?.card ?? 10}px` },
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "flex-start" }, children: [
+          selectable ? /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              size: "small",
+              sx: { mt: -0.5, ml: -1 },
+              checked: row.getIsSelected(),
+              disabled: !row.getCanSelect(),
+              onChange: row.getToggleSelectedHandler(),
+              slotProps: { input: { "aria-label": t("selectRow", { name: rowLabel(row.original, columns) }) } }
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+            headline ? /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", sx: { fontWeight: 600, mb: 0.5 }, children: headline.render ? headline.render(row.original) : headline.value?.(row.original) }) : null,
+            /* @__PURE__ */ jsx(Stack, { spacing: 0.5, children: rest.map((c) => {
+              const cell = c.render ? c.render(row.original) : c.value?.(row.original);
+              if (cell == null || cell === "") return null;
+              return /* @__PURE__ */ jsxs(
+                Stack,
+                {
+                  direction: "row",
+                  spacing: 1,
+                  sx: { alignItems: "baseline", justifyContent: "space-between", gap: 1 },
+                  children: [
+                    /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: "text.secondary", flexShrink: 0 }, children: c.header }),
+                    /* @__PURE__ */ jsx(Box, { sx: { minWidth: 0, textAlign: "right" }, children: cell })
+                  ]
+                },
+                c.id
+              );
+            }) })
+          ] })
+        ] }),
+        actions ? /* @__PURE__ */ jsx(Box, { sx: { mt: 1, pt: 1, borderTop: 1, borderColor: "divider", display: "flex", justifyContent: "flex-end" }, children: actions.render ? actions.render(row.original) : null }) : null,
+        expander ? /* @__PURE__ */ jsxs(Box, { sx: { mt: 1, pt: 1, borderTop: 1, borderColor: "divider" }, children: [
+          /* @__PURE__ */ jsx(ExpandToggle, { row, columns, expander, t }),
+          expander.isOpen(row.id) ? /* @__PURE__ */ jsx(Box, { sx: { mt: 1 }, children: expander.render(row.original) }) : null
+        ] }) : null
+      ]
+    },
+    row.id
+  )) });
+}
+function ExpandToggle({ row, columns, expander, t }) {
+  const open = expander.isOpen(row.id);
+  const name = rowLabel(row.original, columns);
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      "aria-expanded": open,
+      "aria-label": t(open ? "collapseRow" : "expandRow", { name }),
+      onClick: () => expander.toggle(row.id),
+      children: open ? /* @__PURE__ */ jsx(KeyboardArrowUpRoundedIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(KeyboardArrowDownRoundedIcon, { fontSize: "small" })
+    }
+  );
+}
+function DataTable({
+  rows,
+  getRowId,
+  columns,
+  initialSort,
+  selectable = false,
+  selection = [],
+  onSelectionChange,
+  filterable = true,
+  persistKey,
+  searchAlso,
+  searchPlaceholder,
+  // Show the free-text search box in the filter bar. Default on; set false for a
+  // table whose narrowing is entirely dropdowns, so the bar is just its selects.
+  searchable = true,
+  title = null,
+  action = null,
+  toolbar = null,
+  // A render prop shown BETWEEN the filter bar and the table header, given the
+  // currently-visible (filtered) rows: `banner={(rows) => node}`. Auto-updates as
+  // filters change, since it is handed the same `visible` set the table renders.
+  // For an overview strip (a chart, a summary) that tracks the filters.
+  banner = null,
+  empty = null,
+  emptyFiltered = null,
+  stickyHeader = false,
+  maxHeight = "fill",
+  paginate = false,
+  pageSize = 25,
+  rowsPerPageOptions = [10, 25, 50, 100],
+  /*
+   * SERVER-SIDE mode. Omit it and this table behaves exactly as it always has —
+   * it holds every row and filters, sorts and pages them in the browser.
+   *
+   * Pass it and those three become the SERVER's job: `rows` is one page that has
+   * already been narrowed and ordered, and this component only renders the
+   * controls and reports what the admin asked for.
+   *
+   *   manual={{
+   *     rowCount,                        // total matching rows, all pages
+   *     state: { page, pageSize, sorting, filters },
+   *     onChange: (next) => void,        // a partial of `state`
+   *   }}
+   *
+   * It exists because a large list outgrows the browser: holding every row is
+   * what makes client-side filtering possible, and it is exactly what does not
+   * scale. Opt-in rather than a rewrite, so tables that fit in memory are
+   * untouched.
+   */
+  manual = null,
+  renderExpanded = null
+}) {
+  const t = useTranslations("uikit.table");
+  const [expandedIds, setExpandedIds] = useState(() => /* @__PURE__ */ new Set());
+  const expander = renderExpanded ? {
+    isOpen: (id) => expandedIds.has(id),
+    toggle: (id) => setExpandedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    }),
+    render: renderExpanded
+  } : null;
+  const theme = useTheme();
+  const berrySurface = theme.rt?.ui?.surface === "berry";
+  const Surface = berrySurface ? Card : Paper;
+  const phone = useMediaQuery(theme.breakpoints.down("sm"), { noSsr: true });
+  const [ownFilters, setFilterState] = useState(() => restoreFilters(persistKey));
+  const [ownSorting, setSorting] = useState(() => restoreSort(persistKey) ?? (initialSort ? [initialSort] : []));
+  const [typedQuery, setTypedQuery] = useState(null);
+  const searchTimer = useRef(null);
+  useEffect(() => () => clearTimeout(searchTimer.current), []);
+  const filters = manual ? manual.state.filters ?? {} : ownFilters;
+  const sorting = manual ? manual.state.sorting ?? [] : ownSorting;
+  const canFilter = filterable && filterableColumns(columns).length > 0;
+  const hasFilters = activeCount(filters) > 0;
+  const visible = useMemo(
+    () => canFilter && !manual ? applyFilters(rows, columns, filters, searchAlso) : rows,
+    [canFilter, manual, rows, columns, filters, searchAlso]
+  );
+  const setFilters = (next) => {
+    if (manual) {
+      const typing = next.query !== filters.query && JSON.stringify(next.byColumn ?? {}) === JSON.stringify(filters.byColumn ?? {});
+      clearTimeout(searchTimer.current);
+      if (typing) {
+        setTypedQuery(next.query);
+        searchTimer.current = setTimeout(() => {
+          rememberFilters(persistKey, next);
+          if (selection.length > 0) onSelectionChange?.([]);
+          manual.onChange({ filters: next, page: 0 });
+        }, SEARCH_SETTLE);
+        return;
+      }
+      setTypedQuery(null);
+      rememberFilters(persistKey, next);
+      if (selection.length > 0) onSelectionChange?.([]);
+      manual.onChange({ filters: next, page: 0 });
+      return;
+    }
+    setFilterState(next);
+    rememberFilters(persistKey, next);
+    if (!canFilter || selection.length === 0) return;
+    const keep = new Set(applyFilters(rows, columns, next, searchAlso).map((r) => getRowId(r)));
+    const kept = selection.filter((id) => keep.has(id));
+    if (kept.length !== selection.length) onSelectionChange?.(kept);
+  };
+  const visibleIds = useMemo(() => new Set(visible.map((r) => getRowId(r))), [visible, getRowId]);
+  const effectiveSelection = useMemo(
+    () => manual ? selection : selection.filter((id) => visibleIds.has(id)),
+    [manual, selection, visibleIds]
+  );
+  const shown = useMemo(() => columns.filter((c) => !c.hidden), [columns]);
+  const sortable = useMemo(() => shown.filter((c) => c.sortable !== false && Boolean(c.value)), [shown]);
+  const columnDefs = useMemo(() => shown.map((c) => ({
+    id: c.id,
+    accessorFn: c.value ? (row) => c.value(row) ?? void 0 : () => void 0,
+    enableSorting: c.sortable !== false && Boolean(c.value),
+    sortUndefined: "last"
+  })), [shown]);
+  const table = useReactTable({
+    data: visible,
+    columns: columnDefs,
+    /*
+     * Keyed on the ROW's own id, never the array index. TanStack stores the
+     * selection against this key, so an index would quietly re-point every
+     * selection at a different record the moment the sort changed — you tick
+     * three rows, sort, and are now holding three others with no visible clue.
+     */
+    getRowId,
+    state: {
+      sorting,
+      rowSelection: Object.fromEntries(effectiveSelection.map((id) => [id, true])),
+      // Controlled only in manual mode; otherwise TanStack keeps its own and
+      // `initialState` below seeds the page size.
+      ...manual ? { pagination: { pageIndex: manual.state.page ?? 0, pageSize: manual.state.pageSize ?? pageSize } } : {}
+    },
+    onSortingChange: (updater) => {
+      const next = typeof updater === "function" ? updater(sorting) : updater;
+      rememberSort(persistKey, next);
+      if (manual) return manual.onChange({ sorting: next, page: 0 });
+      return setSorting(next);
+    },
+    onRowSelectionChange: (updater) => {
+      const current = Object.fromEntries(effectiveSelection.map((id) => [id, true]));
+      const next = typeof updater === "function" ? updater(current) : updater;
+      onSelectionChange?.(Object.keys(next).filter((id) => next[id]));
+    },
+    /*
+     * `selectable` may be a predicate, not just a flag — e.g. to make drafts
+     * unselectable. That can be load-bearing rather than cosmetic: if a bulk
+     * endpoint is all-or-nothing and rejects a selection containing a draft, a
+     * selectable draft turns "add a note to these five" into a flat "Not
+     * found" with nothing naming the row that caused it.
+     */
+    enableRowSelection: typeof selectable === "function" ? (row) => selectable(row.original) : selectable,
+    // First click always ascending, and a third click sorts again rather than
+    // dropping back to "unsorted" — an admin toggling a column wants the other
+    // direction, not the original order back.
+    sortDescFirst: false,
+    enableSortingRemoval: false,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    /*
+     * In manual mode the server has already sorted and paged, so BOTH row
+     * models must stand down — re-sorting one page would reorder it against the
+     * server's answer, and re-paging twenty-five rows into pages of twenty-five
+     * is a no-op that still resets the index. `rowCount` is what the pager
+     * counts, since the rows to count are not here.
+     */
+    ...manual ? {
+      manualSorting: true,
+      manualPagination: true,
+      rowCount: manual.rowCount ?? 0,
+      onPaginationChange: (updater) => {
+        const current = { pageIndex: manual.state.page ?? 0, pageSize: manual.state.pageSize ?? pageSize };
+        const next = typeof updater === "function" ? updater(current) : updater;
+        manual.onChange({ page: next.pageIndex, pageSize: next.pageSize });
+      }
+    } : {},
+    // Pagination is opt-in: without the row model TanStack returns every row, so
+    // a non-paginated table is unchanged. autoResetPageIndex (on by default)
+    // snaps back to page 1 when a filter shrinks the set out from under you.
+    ...paginate && !manual ? {
+      getPaginationRowModel: getPaginationRowModel(),
+      initialState: { pagination: { pageSize } }
+    } : {}
+  });
+  const displayed = table.getRowModel().rows;
+  const choosable = displayed.filter((r) => r.getCanSelect());
+  const allSelected = choosable.length > 0 && choosable.every((r) => r.getIsSelected());
+  const someSelected = choosable.some((r) => r.getIsSelected());
+  const paperRef = useRef(null);
+  const wantFill = stickyHeader && maxHeight === "fill";
+  const [fillHeight, setFillHeight] = useState(null);
+  useEffect(() => {
+    if (!wantFill) return void 0;
+    const recompute = () => {
+      const el = paperRef.current;
+      const vh = window.innerHeight;
+      if (!el || !vh) return;
+      const top = el.getBoundingClientRect().top + window.scrollY;
+      setFillHeight(`${Math.max(240, Math.round(vh - top - 24))}px`);
+    };
+    recompute();
+    window.addEventListener("resize", recompute);
+    return () => window.removeEventListener("resize", recompute);
+  }, [wantFill]);
+  const resolvedMaxHeight = wantFill ? fillHeight ?? "70dvh" : maxHeight;
+  return (
+    /*
+     * The toolbar lives INSIDE the card, above the table and divided from it,
+     * rather than floating in the space above. Filters that control a table
+     * should read as part of it — detached, they look like two stray form
+     * fields someone left on the page.
+     *
+     * It also renders when there are no rows, which is not incidental: filter
+     * everything out and an early return would take the search box with it,
+     * leaving no way to undo the filter that emptied the table.
+     */
+    /*
+     * A berry chrome draws a CARD as plain paper on a grey ground — no border,
+     * a drop shadow (see createSiteTheme). The table's card is one of those
+     * cards, so on that surface it is rendered as a Card and wears the same
+     * skin; everywhere else it stays outlined, as its neighbours are. An
+     * outlined table beside borderless cards read as another material.
+     */
+    /* @__PURE__ */ jsxs(
+      Surface,
+      {
+        ref: paperRef,
+        variant: berrySurface ? "elevation" : "outlined",
+        elevation: 0,
+        sx: {
+          borderRadius: (t2) => `${t2.rt?.radii?.card ?? 10}px`,
+          overflow: "hidden",
+          // Sticky = the PAPER is the bounded box, a flex column, and only the rows
+          // scroll inside it. Capping the TableContainer alone left the filter bar,
+          // selection toolbar, cross-page prompt and pager to stack ON TOP of a
+          // full-height scroll region, pushing the pager below the fold whenever the
+          // selection UI appeared. Bounding the Paper keeps every one of those, the
+          // pager included, on screen.
+          ...stickyHeader ? { display: "flex", flexDirection: "column", maxHeight: resolvedMaxHeight } : {}
+        },
+        children: [
+          !canFilter && (title || action) ? /* @__PURE__ */ jsx(CardHead, { title, action }) : null,
+          canFilter ? /* @__PURE__ */ jsx(Box, { sx: { borderBottom: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsx(
+            TableFilters,
+            {
+              columns,
+              rows,
+              filters: typedQuery === null ? filters : { ...filters, query: typedQuery },
+              onChange: setFilters,
+              searchPlaceholder,
+              searchable,
+              resultCount: manual ? manual.rowCount ?? 0 : visible.length,
+              totalCount: manual ? manual.unfilteredCount ?? manual.rowCount ?? 0 : rows.length,
+              lead: title ? /* @__PURE__ */ jsx(CardHeadTitle, { children: title }) : null,
+              trailing: action
+            }
+          ) }) : null,
+          toolbar && effectiveSelection.length > 0 ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                px: 2,
+                py: 1,
+                borderBottom: 1,
+                borderColor: "divider",
+                bgcolor: (t2) => `rgba(${t2.vars.palette.primary.mainChannel} / 0.08)`
+              },
+              children: toolbar({
+                selection: effectiveSelection,
+                clear: () => onSelectionChange?.([])
+              })
+            }
+          ) : null,
+          banner && visible.length > 0 ? /* @__PURE__ */ jsx(Box, { sx: { borderBottom: 1, borderColor: "divider" }, children: banner(visible) }) : null,
+          visible.length === 0 ? (
+            // Two different nothings. An empty table and a filter that matched none
+            // of a full one are not the same event, and saying "Nothing here yet"
+            // to the second reads as data loss.
+            /* @__PURE__ */ jsx(Box, { sx: { p: 3 }, children: (manual ? !hasFilters : rows.length === 0) ? empty : emptyFiltered ?? empty })
+          ) : (
+            /* When sticky, this is the only part that scrolls (both axes): it flexes to
+               fill whatever the bounded Paper leaves after the filters/toolbar/prompt/
+               pager, so the header pins and wide tables still scroll sideways. A
+               page-level sticky header and horizontal scroll cannot share one element:
+               overflow-x:auto (needed for wide tables) makes the container a scroll box
+               that also traps vertical stickiness — hence the bounded region. */
+            /*
+             * PHONE: cards. Rendered INSTEAD of the table, not alongside it — two
+             * copies of every row would double the DOM and hand a screen reader the
+             * whole list twice.
+             */
+            phone ? /* @__PURE__ */ jsxs(Box, { sx: { flex: stickyHeader ? 1 : void 0, minHeight: 0, overflowY: "auto" }, children: [
+              sortable.length > 0 ? (
+                /*
+                 * The column headers ARE the sort control on a table, and a card
+                 * list has none — so without this, sorting simply vanished on a
+                 * phone rather than being unavailable for a reason.
+                 */
+                /* @__PURE__ */ jsx(Box, { sx: { px: 1.5, pt: 1.5 }, children: /* @__PURE__ */ jsx(LabeledField, { label: t("sortBy"), children: ({ labelId }) => /* @__PURE__ */ jsx(
+                  LabeledSelect,
+                  {
+                    labelId,
+                    size: "small",
+                    value: sorting[0]?.id ?? "",
+                    onChange: (e) => {
+                      const next = [{ id: e.target.value, desc: false }];
+                      if (manual) manual.onChange({ sorting: next, page: 0 });
+                      else setSorting(next);
+                    },
+                    children: sortable.map((c) => /* @__PURE__ */ jsx(MenuItem, { value: c.id, children: c.header }, c.id))
+                  }
+                ) }) })
+              ) : null,
+              /* @__PURE__ */ jsx(RowCards, { rows: displayed, columns: shown, selectable, t, expander })
+            ] }) : /* @__PURE__ */ jsx(TableContainer, { sx: stickyHeader ? { flex: 1, minHeight: 0 } : void 0, children: /* @__PURE__ */ jsxs(
+              Table,
+              {
+                stickyHeader,
+                sx: stickyHeader ? {
+                  "& .MuiTableCell-stickyHeader": { backgroundColor: "background.paper" }
+                } : void 0,
+                children: [
+                  /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+                    expander ? /* @__PURE__ */ jsx(TableCell, { padding: "checkbox" }) : null,
+                    selectable ? /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        size: "small",
+                        checked: allSelected,
+                        indeterminate: someSelected && !allSelected,
+                        onChange: (e) => table.toggleAllPageRowsSelected(e.target.checked),
+                        slotProps: { input: { "aria-label": t("selectAll") } }
+                      }
+                    ) }) : null,
+                    table.getHeaderGroups()[0].headers.map((header) => {
+                      const col = shown.find((c) => c.id === header.column.id);
+                      const dir = header.column.getIsSorted();
+                      return /* @__PURE__ */ jsx(TableCell, { align: col.align, sortDirection: dir || false, children: header.column.getCanSort() ? /* @__PURE__ */ jsx(
+                        TableSortLabel,
+                        {
+                          active: Boolean(dir),
+                          direction: dir || "asc",
+                          onClick: header.column.getToggleSortingHandler(),
+                          children: col.header
+                        }
+                      ) : col.header }, col.id);
+                    })
+                  ] }) }),
+                  /* @__PURE__ */ jsx(TableBody, { children: displayed.map((row) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs(TableRow, { hover: true, selected: row.getIsSelected(), children: [
+                      expander ? /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(ExpandToggle, { row, columns: shown, expander, t }) }) : null,
+                      selectable ? /* @__PURE__ */ jsx(TableCell, { padding: "checkbox", children: /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          size: "small",
+                          checked: row.getIsSelected(),
+                          disabled: !row.getCanSelect(),
+                          onChange: row.getToggleSelectedHandler(),
+                          slotProps: { input: { "aria-label": t("selectRow", { name: rowLabel(row.original, shown) }) } }
+                        }
+                      ) }) : null,
+                      shown.map((c) => /* @__PURE__ */ jsx(TableCell, { align: c.align, children: c.render ? c.render(row.original) : c.value?.(row.original) }, c.id))
+                    ] }),
+                    expander?.isOpen(row.id) ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+                      TableCell,
+                      {
+                        colSpan: shown.length + (selectable ? 1 : 0) + 1,
+                        sx: { py: 1.5, pl: 7, bgcolor: "action.hover" },
+                        children: expander.render(row.original)
+                      }
+                    ) }) : null
+                  ] }, row.id)) })
+                ]
+              }
+            ) })
+          ),
+          paginate && (visible.length > 0 || manual && (manual.rowCount ?? 0) > 0) ? /* @__PURE__ */ jsx(
+            TablePagination,
+            {
+              component: "div",
+              count: manual ? manual.rowCount ?? 0 : visible.length,
+              page: table.getState().pagination.pageIndex,
+              rowsPerPage: table.getState().pagination.pageSize,
+              rowsPerPageOptions,
+              onPageChange: (_e, next) => table.setPageIndex(next),
+              onRowsPerPageChange: (e) => table.setPageSize(parseInt(e.target.value, 10)),
+              labelRowsPerPage: t("rowsPerPage"),
+              labelDisplayedRows: ({ from, to, count }) => t("displayedRows", { from, to, count }),
+              sx: { borderTop: 1, borderColor: "divider", flexShrink: 0 }
+            }
+          ) : null
+        ]
+      }
+    )
+  );
+}
+const SEARCH_SETTLE = 250;
+const NO_FILTERS = { query: "", byColumn: {} };
+function restoreFilters(key) {
+  if (!key || typeof window === "undefined") return NO_FILTERS;
+  try {
+    const stored = JSON.parse(window.localStorage.getItem(key) ?? "null");
+    return {
+      query: typeof stored?.query === "string" ? stored.query : "",
+      byColumn: stored?.byColumn && typeof stored.byColumn === "object" ? stored.byColumn : {}
+    };
+  } catch {
+    return NO_FILTERS;
+  }
+}
+function restoreSort(key) {
+  if (!key || typeof window === "undefined") return null;
+  try {
+    const stored = JSON.parse(window.localStorage.getItem(`${key}:sort`) ?? "null");
+    return Array.isArray(stored) && stored.every((s) => typeof s?.id === "string") ? stored : null;
+  } catch {
+    return null;
+  }
+}
+function rememberSort(key, sorting) {
+  if (!key || typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(`${key}:sort`, JSON.stringify(sorting));
+  } catch {
+  }
+}
+function rememberFilters(key, filters) {
+  if (!key || typeof window === "undefined") return;
+  try {
+    if (activeCount(filters) === 0) window.localStorage.removeItem(key);
+    else window.localStorage.setItem(key, JSON.stringify(filters));
+  } catch {
+  }
+}
+function rowLabel(row, columns) {
+  const first = columns.find((c) => c.value);
+  return first ? String(first.value(row) ?? "row") : "row";
+}
+export {
+  DataTable as default
+};

package/dist/components/DetailRows.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+function DetailRows({ rows }) {
+  return /* @__PURE__ */ jsx(Box, { children: rows.map((row, i) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "grid",
+        gridTemplateColumns: { xs: "1fr", sm: "190px minmax(0, 1fr)" },
+        columnGap: 2.5,
+        rowGap: 0.5,
+        alignItems: "start",
+        py: 1.25,
+        ...i > 0 ? { borderTop: "1px solid", borderColor: "divider" } : null
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body1",
+            sx: { color: "text.secondary", fontWeight: 500, wordBreak: "break-word", ...row.indent ? { pl: { sm: 2 } } : null },
+            children: row.label
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { sx: { minWidth: 0 }, children: typeof row.value === "string" || typeof row.value === "number" ? /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body1",
+            sx: { color: row.value === "" || row.value === null ? "text.secondary" : "text.primary", whiteSpace: "pre-wrap", wordBreak: "break-word" },
+            children: row.value === "" || row.value === null ? /* @__PURE__ */ jsx("em", { children: "\u2014" }) : row.value
+          }
+        ) : row.value })
+      ]
+    },
+    row.key ?? i
+  )) });
+}
+export {
+  DetailRows as default
+};

package/dist/components/EmptyNote.js

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+function EmptyNote({ children, action }) {
+  const { rt } = useTheme();
+  const flat = rt?.ui?.surface === "flat";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        px: 3,
+        py: 3.5,
+        textAlign: "center",
+        borderRadius: flat ? `${rt?.radii?.card ?? 4}px` : "12px",
+        border: flat ? "1px solid" : "1px dashed",
+        borderColor: "divider"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { color: "text.secondary" }, children }),
+        action ? /* @__PURE__ */ jsx(Box, { sx: { mt: 2 }, children: action }) : null
+      ]
+    }
+  );
+}
+export {
+  EmptyNote as default
+};

package/dist/components/Eyebrow.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+function Eyebrow({ children, component = "p", sx }) {
+  const { rt } = useTheme();
+  const glass = rt?.ui?.surface === "glass";
+  const fontFamily = glass ? rt?.mono : rt?.headingFont ?? void 0;
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      component,
+      variant: "overline",
+      sx: [{ display: "block", color: "text.secondary", lineHeight: 1.4, fontWeight: 600, fontFamily }, ...Array.isArray(sx) ? sx : [sx]],
+      children
+    }
+  );
+}
+export {
+  Eyebrow as default
+};

package/dist/components/HeadingHelp.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import HelpOutlineRoundedIcon from "@mui/icons-material/HelpOutlineRounded";
+function HeadingHelp({ text, label, size = "small", color = "text.secondary" }) {
+  if (!text) return null;
+  const onBar = color === "inherit";
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: text,
+      describeChild: true,
+      arrow: true,
+      enterTouchDelay: 0,
+      leaveTouchDelay: 6e3,
+      slotProps: { tooltip: { sx: { fontSize: "0.8125rem", lineHeight: 1.5, py: 1, px: 1.5, maxWidth: 320 } } },
+      children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size,
+          "aria-label": label ? `Help: ${label}` : "Help",
+          sx: {
+            color,
+            p: 0.25,
+            // On a coloured bar there is no accent to move to, so deepen the same
+            // colour on hover; in body text move to the org accent as elsewhere.
+            ...onBar ? { opacity: 0.85, "&:hover": { opacity: 1 } } : { "&:hover": { color: "primary.main" } }
+          },
+          children: /* @__PURE__ */ jsx(HelpOutlineRoundedIcon, { sx: { fontSize: 18 } })
+        }
+      )
+    }
+  );
+}
+export {
+  HeadingHelp as default
+};