@tradalab/lyra 3.2.0 → 3.3.0

package/README.md

@@ -26,8 +26,8 @@ The stylesheet pulls in Tailwind v4, so your app needs `@tailwindcss/postcss`.
 |---|---|---|
 | `@tradalab/lyra/utils` | `cn` | server-safe |
 | `@tradalab/lyra/hooks` | `useMobile` | client |
-| `@tradalab/lyra/ui` | 60 shadcn primitives + `AccountMenu`, `ActionButton`, `Container` | client |
-| `@tradalab/lyra/shell` | `AppShell`, `NavItem`, `NavGroup`, `Breadcrumbs`, `useActiveRoute` | client |
+| `@tradalab/lyra/ui` | 60 shadcn primitives + `AccountMenu`, `ActionButton`, `Container`, `EmptyState`, `StatusBadge` | client |
+| `@tradalab/lyra/shell` | `AppShell`, `PageShell`, `PageHeader`, `NavItem`, `NavGroup`, `Breadcrumbs`, `useActiveRoute` | client |
 | `@tradalab/lyra/styles.css` | Tailwind v4 base + `radix-lyra` tokens (light/dark) | CSS |
 
 Client subpaths carry a build-injected `"use client"`; import them inside a

package/dist/data-table/index.d.ts

@@ -66,6 +66,15 @@ interface DataTableProps<TData, TValue> {
     loading?: boolean;
     /** Row shown when there are no results. */
     emptyText?: string;
+    /**
+     * What fills the body when there are no results, in place of `emptyText`.
+     *
+     * A centred grey line reads the same as a request that failed, and on a table it is the only
+     * thing a reader has to tell "nobody matched your filter" from "this screen is broken". Takes
+     * `EmptyState` from `@tradalab/lyra/ui`, or anything else. `emptyText` stays because most tables
+     * want one sentence and nothing more.
+     */
+    empty?: ReactNode;
     /** Row shown while `loading`. */
     loadingText?: string;
     /** Previous-page button label. */
@@ -125,6 +134,6 @@ interface DataTableProps<TData, TValue> {
  * reader opened it with.
  */
 declare function pageWindow(index: number, count: number, radius?: number): (number | null)[];
-declare function DataTable<TData, TValue>({ columns, data, loading, emptyText, loadingText, previousLabel, nextLabel, pageSize, className, searchable, searchPlaceholder, onReload, reloadLabel, toolbar, onLoadMore, hasMore, loadingMore, loadingMoreText, pageIndex, pageCount, onPageChange, pageSizeOptions, onPageSizeChange, rangeLabel, pageLabels, }: DataTableProps<TData, TValue>): React.JSX.Element;
+declare function DataTable<TData, TValue>({ columns, data, loading, emptyText, empty, loadingText, previousLabel, nextLabel, pageSize, className, searchable, searchPlaceholder, onReload, reloadLabel, toolbar, onLoadMore, hasMore, loadingMore, loadingMoreText, pageIndex, pageCount, onPageChange, pageSizeOptions, onPageSizeChange, rangeLabel, pageLabels, }: DataTableProps<TData, TValue>): React.JSX.Element;
 
 export { DataTable, type DataTableProps, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumnHeader, type TableColumnHeaderProps, TableContext, TableHead, type TableHeadProps, TableHeader, TableHeaderGroup, type TableHeaderGroupProps, type TableHeaderProps, TableProvider, type TableProviderProps, TableRow, type TableRowProps, pageWindow };

package/dist/data-table/index.js

@@ -103,6 +103,7 @@ function DataTable({
   data,
   loading,
   emptyText = "No results.",
+  empty,
   loadingText = "Loading\u2026",
   previousLabel = "Previous",
   nextLabel = "Next",
@@ -209,7 +210,19 @@ function DataTable({
           // Only replace the body with a loading row on the FIRST load; on a
           // refetch keep the (stale) rows visible while the reload icon spins.
           /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { className: "h-24 text-center", colSpan: columns.length, children: loadingText }) })
-        ) : rows.length ? rows.map((row) => /* @__PURE__ */ jsx(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { className: "text-muted-foreground h-24 text-center", colSpan: columns.length, children: emptyText }) }) })
+        ) : rows.length ? rows.map((row) => /* @__PURE__ */ jsx(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) : (
+          // An empty state is not a record, so the row drops the `hover:bg-muted/50` every
+          // other row carries: lighting up under the pointer offers an interaction that is not
+          // there, and it gets louder the taller the cell grows.
+          /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
+            TableCell,
+            {
+              className: empty ? "p-0" : "text-muted-foreground h-24 text-center",
+              colSpan: columns.length,
+              children: empty ?? emptyText
+            }
+          ) })
+        ) })
       ] }),
       infinite && loadingMore ? /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex items-center justify-center gap-2 py-3 text-sm", children: [
         /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" }),

package/dist/data-table/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/data-table/index.tsx"],"names":["TableHead","TableHeader","TableCell","TableRow","TableBody"],"mappings":"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","file":"index.js","sourcesContent":["import type { Cell, Column, ColumnDef, Header, HeaderGroup, Row, SortingState, Table } from \"@tanstack/react-table\"\nimport { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from \"@tanstack/react-table\"\nimport { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, Loader2Icon, RefreshCwIcon, SearchIcon } from \"lucide-react\"\nimport type { HTMLAttributes, ReactNode } from \"react\"\nimport { createContext, memo, useCallback, useContext, useEffect, useRef, useState } from \"react\"\nimport { Button } from \"~/ui/primitives/button.js\"\nimport { Input } from \"~/ui/primitives/input.js\"\nimport { NativeSelect, NativeSelectOption } from \"~/ui/primitives/native-select.js\"\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from \"~/ui/primitives/dropdown-menu.js\"\nimport {\n  TableBody as TableBodyRaw,\n  TableCell as TableCellRaw,\n  TableHeader as TableHeaderRaw,\n  TableHead as TableHeadRaw,\n  Table as TableRaw,\n  TableRow as TableRowRaw,\n} from \"~/ui/primitives/table.js\"\nimport { cn } from \"~/utils/cn.js\"\n\nexport type { ColumnDef } from \"@tanstack/react-table\"\n\n\nexport const TableContext = createContext<{\n  data: unknown[]\n  columns: ColumnDef<unknown, unknown>[]\n  table: Table<unknown> | null\n}>({\n  data: [],\n  columns: [],\n  table: null,\n})\n\nexport type TableProviderProps<TData, TValue> = {\n  columns: ColumnDef<TData, TValue>[]\n  data: TData[]\n  children: ReactNode\n  className?: string\n}\n\nexport function TableProvider<TData, TValue>({ columns, data, children, className }: TableProviderProps<TData, TValue>) {\n  const [sorting, setSorting] = useState<SortingState>([])\n  const table = useReactTable({\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    // useState's setter is itself a valid TanStack OnChangeFn (it accepts a\n    // value or an updater fn), so it can be wired directly — type-safe, no cast.\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n  })\n\n  return (\n    <TableContext.Provider\n      value={{\n        data,\n        columns: columns as never,\n        table: table as never,\n      }}\n    >\n      <TableRaw className={className}>{children}</TableRaw>\n    </TableContext.Provider>\n  )\n}\n\nexport type TableHeadProps = {\n  header: Header<unknown, unknown>\n  className?: string\n}\n\nexport const TableHead = memo(({ header, className }: TableHeadProps) => (\n  <TableHeadRaw className={className} key={header.id}>\n    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}\n  </TableHeadRaw>\n))\n\nTableHead.displayName = \"TableHead\"\n\nexport type TableHeaderGroupProps = {\n  headerGroup: HeaderGroup<unknown>\n  children: (props: { header: Header<unknown, unknown> }) => ReactNode\n}\n\nexport const TableHeaderGroup = ({ headerGroup, children }: TableHeaderGroupProps) => (\n  <TableRowRaw key={headerGroup.id}>{headerGroup.headers.map(header => children({ header }))}</TableRowRaw>\n)\n\nexport type TableHeaderProps = {\n  className?: string\n  children: (props: { headerGroup: HeaderGroup<unknown> }) => ReactNode\n}\n\nexport const TableHeader = ({ className, children }: TableHeaderProps) => {\n  const { table } = useContext(TableContext)\n\n  return <TableHeaderRaw className={className}>{table?.getHeaderGroups().map(headerGroup => children({ headerGroup }))}</TableHeaderRaw>\n}\n\nexport interface TableColumnHeaderProps<TData, TValue> extends HTMLAttributes<HTMLDivElement> {\n  column: Column<TData, TValue>\n  title: string\n}\n\nexport function TableColumnHeader<TData, TValue>({ column, title, className }: TableColumnHeaderProps<TData, TValue>) {\n  // Extract inline event handlers to prevent unnecessary re-renders\n  const handleSortAsc = useCallback(() => {\n    column.toggleSorting(false)\n  }, [column])\n\n  const handleSortDesc = useCallback(() => {\n    column.toggleSorting(true)\n  }, [column])\n\n  if (!column.getCanSort()) {\n    return <div className={cn(className)}>{title}</div>\n  }\n\n  return (\n    <div className={cn(\"flex items-center space-x-2\", className)}>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button className=\"-ml-3 h-8 data-[state=open]:bg-accent\" size=\"sm\" variant=\"ghost\">\n            <span>{title}</span>\n            {column.getIsSorted() === \"desc\" ? (\n              <ArrowDownIcon className=\"ml-2 h-4 w-4\" />\n            ) : column.getIsSorted() === \"asc\" ? (\n              <ArrowUpIcon className=\"ml-2 h-4 w-4\" />\n            ) : (\n              <ChevronsUpDownIcon className=\"ml-2 h-4 w-4\" />\n            )}\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\">\n          <DropdownMenuItem onClick={handleSortAsc}>\n            <ArrowUpIcon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground/70\" />\n            Asc\n          </DropdownMenuItem>\n          <DropdownMenuItem onClick={handleSortDesc}>\n            <ArrowDownIcon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground/70\" />\n            Desc\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n\nexport type TableCellProps = {\n  cell: Cell<unknown, unknown>\n  className?: string\n}\n\nexport const TableCell = ({ cell, className }: TableCellProps) => (\n  <TableCellRaw className={className}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCellRaw>\n)\n\nexport type TableRowProps = {\n  row: Row<unknown>\n  children: (props: { cell: Cell<unknown, unknown> }) => ReactNode\n  className?: string\n}\n\nexport const TableRow = ({ row, children, className }: TableRowProps) => (\n  <TableRowRaw className={className} data-state={row.getIsSelected() && \"selected\"} key={row.id}>\n    {row.getVisibleCells().map(cell => children({ cell }))}\n  </TableRowRaw>\n)\n\nexport type TableBodyProps = {\n  children: (props: { row: Row<unknown> }) => ReactNode\n  className?: string\n}\n\nexport const TableBody = ({ children, className }: TableBodyProps) => {\n  const { columns, table } = useContext(TableContext)\n  const rows = table?.getRowModel().rows\n\n  return (\n    <TableBodyRaw className={className}>\n      {rows?.length ? (\n        rows.map(row => children({ row }))\n      ) : (\n        <TableRowRaw>\n          <TableCellRaw className=\"h-24 text-center\" colSpan={columns.length}>\n            No results.\n          </TableCellRaw>\n        </TableRowRaw>\n      )}\n    </TableBodyRaw>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// DataTable — a batteries-included, self-contained paginated table. Unlike the\n// composition primitives above (TableProvider + render-prop parts), this is a\n// drop-in: pass `columns` + `data` and get header, body, empty/loading states\n// and Prev/Next pagination. All user-facing labels are props (English\n// defaults) so apps can feed i18n strings; the component itself ships no copy.\n// ---------------------------------------------------------------------------\n\nexport interface DataTableProps<TData, TValue> {\n  columns: ColumnDef<TData, TValue>[]\n  data: TData[]\n  /** Show a single-row loading state instead of the body. */\n  loading?: boolean\n  /** Row shown when there are no results. */\n  emptyText?: string\n  /** Row shown while `loading`. */\n  loadingText?: string\n  /** Previous-page button label. */\n  previousLabel?: string\n  /** Next-page button label. */\n  nextLabel?: string\n  /** Rows per page (default 10). Pagination controls appear only when needed. */\n  pageSize?: number\n  /** Extra classes on the bordered table wrapper. */\n  className?: string\n  // --- control bar (all optional; the bar renders only when one is set) ---\n  /** Show a search box that globally filters rows across all accessor columns. */\n  searchable?: boolean\n  /** Placeholder for the search box. */\n  searchPlaceholder?: string\n  /** Show a reload button; called on click. Its icon spins while `loading`. */\n  onReload?: () => void\n  /** Accessible label / tooltip for the reload button. */\n  reloadLabel?: string\n  /** Custom controls rendered on the right of the bar (e.g. a \"New\" button). */\n  toolbar?: ReactNode\n  // --- infinite scroll (opt-in; providing `onLoadMore` switches the table from\n  // Prev/Next pagination to rendering every accumulated row and requesting more\n  // as a bottom sentinel scrolls into view). Data fetching stays with the caller\n  // (e.g. react-query useInfiniteQuery); the table only owns the sentinel. ---\n  /** Called when the bottom sentinel becomes visible and more rows can load. */\n  onLoadMore?: () => void\n  /** Whether another page is available; the sentinel is ignored once false. */\n  hasMore?: boolean\n  /** True while the next page is loading — shows a spinner row and de-dupes calls. */\n  loadingMore?: boolean\n  /** Label beside the bottom spinner. */\n  loadingMoreText?: string\n  // --- server-driven pages (opt-in; providing `onPageChange` switches the table from\n  // slicing rows itself to showing exactly the page it was handed, plus a numbered pager).\n  //\n  // For the screens that get AUDITED rather than skimmed: a timesheet, a punch log at year\n  // end. Infinite scroll cannot say \"page 3 of 47\", cannot be sent to a colleague, and cannot\n  // reach the end of a long list without dragging through all of it.\n  //\n  // `onLoadMore` wins if both are given - a table with two pagers is a bug that ships. ---\n  /** Zero-based index of the page being shown. */\n  pageIndex?: number\n  /** How many pages exist. The table cannot work this out: only the server knows the total. */\n  pageCount?: number\n  /** Called with a zero-based page index. */\n  onPageChange?: (index: number) => void\n  /** Sizes offered in the selector. Omit to leave the size fixed and hide the control. */\n  pageSizeOptions?: number[]\n  /** Called with the chosen size. The caller is expected to return to page 1. */\n  onPageSizeChange?: (size: number) => void\n  /** Free text beside the pager, e.g. \"1-50 of 4,231\". lyra ships no copy and no number\n   *  formatting, so the caller builds it. */\n  rangeLabel?: ReactNode\n  /** Accessible labels for the pager buttons. */\n  pageLabels?: { first?: string; previous?: string; next?: string; last?: string; size?: string }\n}\n\n/**\n * Which page numbers to show: always the first, the last, and a couple either side of the\n * current one, with `null` where a gap is elided.\n *\n * A pager that renders every page is unusable at forty pages and absurd at four hundred, and\n * one that renders only prev/next hides how long the list is - which is the question the\n * reader opened it with.\n */\nexport function pageWindow(index: number, count: number, radius = 1): (number | null)[] {\n  if (count <= 0) return []\n  const want = new Set<number>([0, count - 1])\n  for (let p = index - radius; p <= index + radius; p++) {\n    if (p >= 0 && p < count) want.add(p)\n  }\n  const sorted = [...want].sort((a, b) => a - b)\n  const out: (number | null)[] = []\n  let prev = -1\n  for (const p of sorted) {\n    // A single skipped page is rendered rather than elided: \"1 … 3\" is longer than \"1 2 3\"\n    // and tells the reader less.\n    if (prev >= 0 && p - prev === 2) out.push(p - 1)\n    else if (prev >= 0 && p - prev > 2) out.push(null)\n    out.push(p)\n    prev = p\n  }\n  return out\n}\n\nexport function DataTable<TData, TValue>({\n  columns,\n  data,\n  loading,\n  emptyText = \"No results.\",\n  loadingText = \"Loading…\",\n  previousLabel = \"Previous\",\n  nextLabel = \"Next\",\n  pageSize = 10,\n  className,\n  searchable,\n  searchPlaceholder = \"Search…\",\n  onReload,\n  reloadLabel = \"Reload\",\n  toolbar,\n  onLoadMore,\n  hasMore,\n  loadingMore,\n  loadingMoreText = \"Loading more…\",\n  pageIndex = 0,\n  pageCount = 0,\n  onPageChange,\n  pageSizeOptions,\n  onPageSizeChange,\n  rangeLabel,\n  pageLabels,\n}: DataTableProps<TData, TValue>) {\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n  const infinite = Boolean(onLoadMore)\n  // Server pages: the rows handed in ARE the page, so the table must not slice them again.\n  const served = !infinite && Boolean(onPageChange)\n  const table = useReactTable({\n    data,\n    columns,\n    state: { globalFilter },\n    onGlobalFilterChange: setGlobalFilter,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    // Infinite mode renders every accumulated row; pagination is only wired for\n    // the default finite table.\n    ...(infinite || served\n      ? {}\n      : { getPaginationRowModel: getPaginationRowModel(), initialState: { pagination: { pageSize } } }),\n  })\n\n  const rows = table.getRowModel().rows\n  const showBar = Boolean(searchable || onReload || toolbar)\n\n  // --- infinite scroll: observe a bottom sentinel and ask the caller for more.\n  // Latest callback/flags are kept in refs so the observer subscribes once. ---\n  const sentinelRef = useRef<HTMLDivElement | null>(null)\n  const onLoadMoreRef = useRef(onLoadMore)\n  onLoadMoreRef.current = onLoadMore\n  const flags = useRef({ hasMore, loadingMore })\n  flags.current = { hasMore, loadingMore }\n  const intersecting = useRef(false)\n\n  const maybeLoadMore = useCallback(() => {\n    if (intersecting.current && flags.current.hasMore && !flags.current.loadingMore) {\n      onLoadMoreRef.current?.()\n    }\n  }, [])\n\n  useEffect(() => {\n    if (!infinite) return\n    const el = sentinelRef.current\n    if (!el) return\n    const io = new IntersectionObserver(\n      entries => {\n        intersecting.current = entries[0]?.isIntersecting ?? false\n        maybeLoadMore()\n      },\n      { rootMargin: \"200px\" },\n    )\n    io.observe(el)\n    return () => {\n      io.disconnect()\n    }\n  }, [infinite, maybeLoadMore])\n\n  // A freshly loaded page can leave the sentinel still on-screen; the observer\n  // won't re-fire on its own, so re-check whenever the rows or flags change.\n  useEffect(() => {\n    if (infinite) maybeLoadMore()\n  }, [infinite, rows.length, loadingMore, hasMore, maybeLoadMore])\n\n  return (\n    <div>\n      {showBar ? (\n        <div className=\"flex items-center gap-2 pb-4\">\n          {searchable ? (\n            <div className=\"relative w-full max-w-xs\">\n              <SearchIcon className=\"text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2\" />\n              <Input\n                value={globalFilter}\n                onChange={e => table.setGlobalFilter(e.target.value)}\n                placeholder={searchPlaceholder}\n                className=\"pl-8\"\n              />\n            </div>\n          ) : null}\n          {onReload || toolbar ? (\n            <div className=\"ml-auto flex items-center gap-2\">\n              {toolbar}\n              {onReload ? (\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  onClick={onReload}\n                  disabled={loading}\n                  aria-label={reloadLabel}\n                  title={reloadLabel}\n                >\n                  <RefreshCwIcon className={cn(\"size-4\", loading && \"animate-spin\")} />\n                </Button>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className={cn(\"overflow-hidden border\", className)}>\n        <TableRaw>\n          <TableHeaderRaw>\n            {table.getHeaderGroups().map(hg => (\n              <TableRowRaw key={hg.id}>\n                {hg.headers.map(header => (\n                  <TableHeadRaw key={header.id}>\n                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}\n                  </TableHeadRaw>\n                ))}\n              </TableRowRaw>\n            ))}\n          </TableHeaderRaw>\n          <TableBodyRaw>\n            {loading && rows.length === 0 ? (\n              // Only replace the body with a loading row on the FIRST load; on a\n              // refetch keep the (stale) rows visible while the reload icon spins.\n              <TableRowRaw>\n                <TableCellRaw className=\"h-24 text-center\" colSpan={columns.length}>\n                  {loadingText}\n                </TableCellRaw>\n              </TableRowRaw>\n            ) : rows.length ? (\n              rows.map(row => (\n                <TableRowRaw key={row.id} data-state={row.getIsSelected() && \"selected\"}>\n                  {row.getVisibleCells().map(cell => (\n                    <TableCellRaw key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCellRaw>\n                  ))}\n                </TableRowRaw>\n              ))\n            ) : (\n              <TableRowRaw>\n                <TableCellRaw className=\"text-muted-foreground h-24 text-center\" colSpan={columns.length}>\n                  {emptyText}\n                </TableCellRaw>\n              </TableRowRaw>\n            )}\n          </TableBodyRaw>\n        </TableRaw>\n        {infinite && loadingMore ? (\n          <div className=\"text-muted-foreground flex items-center justify-center gap-2 py-3 text-sm\">\n            <Loader2Icon className=\"size-4 animate-spin\" />\n            {loadingMoreText}\n          </div>\n        ) : null}\n        {infinite ? <div ref={sentinelRef} aria-hidden className=\"h-px w-full\" /> : null}\n      </div>\n      {served ? (\n        <div className=\"flex flex-wrap items-center justify-between gap-3 py-4\">\n          <div className=\"text-muted-foreground flex items-center gap-3 text-sm\">\n            {rangeLabel}\n            {pageSizeOptions && pageSizeOptions.length > 0 ? (\n              <NativeSelect\n                aria-label={pageLabels?.size ?? \"Rows per page\"}\n                className=\"h-8 w-auto\"\n                value={String(pageSize)}\n                onChange={e => onPageSizeChange?.(Number(e.target.value))}\n              >\n                {pageSizeOptions.map(n => (\n                  <NativeSelectOption key={n} value={String(n)}>\n                    {n}\n                  </NativeSelectOption>\n                ))}\n              </NativeSelect>\n            ) : null}\n          </div>\n          <div className=\"flex items-center gap-1\">\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              aria-label={pageLabels?.first ?? \"First page\"}\n              onClick={() => onPageChange?.(0)}\n              disabled={pageIndex <= 0}\n            >\n              «\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              aria-label={pageLabels?.previous ?? previousLabel}\n              onClick={() => onPageChange?.(pageIndex - 1)}\n              disabled={pageIndex <= 0}\n            >\n              ‹\n            </Button>\n            {pageWindow(pageIndex, pageCount).map((p, i) =>\n              p === null ? (\n                <span key={`gap${i}`} className=\"text-muted-foreground px-1 text-sm\">\n                  …\n                </span>\n              ) : (\n                <Button\n                  key={p}\n                  variant={p === pageIndex ? \"default\" : \"outline\"}\n                  size=\"sm\"\n                  aria-current={p === pageIndex ? \"page\" : undefined}\n                  onClick={() => onPageChange?.(p)}\n                >\n                  {p + 1}\n                </Button>\n              ),\n            )}\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              aria-label={pageLabels?.next ?? nextLabel}\n              onClick={() => onPageChange?.(pageIndex + 1)}\n              disabled={pageIndex >= pageCount - 1}\n            >\n              ›\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              aria-label={pageLabels?.last ?? \"Last page\"}\n              onClick={() => onPageChange?.(pageCount - 1)}\n              disabled={pageIndex >= pageCount - 1}\n            >\n              »\n            </Button>\n          </div>\n        </div>\n      ) : null}\n      {!infinite && !served && table.getPageCount() > 1 ? (\n        <div className=\"flex items-center justify-end gap-2 py-4\">\n          <Button variant=\"outline\" size=\"sm\" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>\n            {previousLabel}\n          </Button>\n          <Button variant=\"outline\" size=\"sm\" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>\n            {nextLabel}\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"]}
+{"version":3,"sources":["../../src/data-table/index.tsx"],"names":["TableHead","TableHeader","TableCell","TableRow","TableBody"],"mappings":"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","file":"index.js","sourcesContent":["import type { Cell, Column, ColumnDef, Header, HeaderGroup, Row, SortingState, Table } from \"@tanstack/react-table\"\nimport { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from \"@tanstack/react-table\"\nimport { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, Loader2Icon, RefreshCwIcon, SearchIcon } from \"lucide-react\"\nimport type { HTMLAttributes, ReactNode } from \"react\"\nimport { createContext, memo, useCallback, useContext, useEffect, useRef, useState } from \"react\"\nimport { Button } from \"~/ui/primitives/button.js\"\nimport { Input } from \"~/ui/primitives/input.js\"\nimport { NativeSelect, NativeSelectOption } from \"~/ui/primitives/native-select.js\"\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from \"~/ui/primitives/dropdown-menu.js\"\nimport {\n  TableBody as TableBodyRaw,\n  TableCell as TableCellRaw,\n  TableHeader as TableHeaderRaw,\n  TableHead as TableHeadRaw,\n  Table as TableRaw,\n  TableRow as TableRowRaw,\n} from \"~/ui/primitives/table.js\"\nimport { cn } from \"~/utils/cn.js\"\n\nexport type { ColumnDef } from \"@tanstack/react-table\"\n\n\nexport const TableContext = createContext<{\n  data: unknown[]\n  columns: ColumnDef<unknown, unknown>[]\n  table: Table<unknown> | null\n}>({\n  data: [],\n  columns: [],\n  table: null,\n})\n\nexport type TableProviderProps<TData, TValue> = {\n  columns: ColumnDef<TData, TValue>[]\n  data: TData[]\n  children: ReactNode\n  className?: string\n}\n\nexport function TableProvider<TData, TValue>({ columns, data, children, className }: TableProviderProps<TData, TValue>) {\n  const [sorting, setSorting] = useState<SortingState>([])\n  const table = useReactTable({\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    // useState's setter is itself a valid TanStack OnChangeFn (it accepts a\n    // value or an updater fn), so it can be wired directly — type-safe, no cast.\n    onSortingChange: setSorting,\n    state: {\n      sorting,\n    },\n  })\n\n  return (\n    <TableContext.Provider\n      value={{\n        data,\n        columns: columns as never,\n        table: table as never,\n      }}\n    >\n      <TableRaw className={className}>{children}</TableRaw>\n    </TableContext.Provider>\n  )\n}\n\nexport type TableHeadProps = {\n  header: Header<unknown, unknown>\n  className?: string\n}\n\nexport const TableHead = memo(({ header, className }: TableHeadProps) => (\n  <TableHeadRaw className={className} key={header.id}>\n    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}\n  </TableHeadRaw>\n))\n\nTableHead.displayName = \"TableHead\"\n\nexport type TableHeaderGroupProps = {\n  headerGroup: HeaderGroup<unknown>\n  children: (props: { header: Header<unknown, unknown> }) => ReactNode\n}\n\nexport const TableHeaderGroup = ({ headerGroup, children }: TableHeaderGroupProps) => (\n  <TableRowRaw key={headerGroup.id}>{headerGroup.headers.map(header => children({ header }))}</TableRowRaw>\n)\n\nexport type TableHeaderProps = {\n  className?: string\n  children: (props: { headerGroup: HeaderGroup<unknown> }) => ReactNode\n}\n\nexport const TableHeader = ({ className, children }: TableHeaderProps) => {\n  const { table } = useContext(TableContext)\n\n  return <TableHeaderRaw className={className}>{table?.getHeaderGroups().map(headerGroup => children({ headerGroup }))}</TableHeaderRaw>\n}\n\nexport interface TableColumnHeaderProps<TData, TValue> extends HTMLAttributes<HTMLDivElement> {\n  column: Column<TData, TValue>\n  title: string\n}\n\nexport function TableColumnHeader<TData, TValue>({ column, title, className }: TableColumnHeaderProps<TData, TValue>) {\n  // Extract inline event handlers to prevent unnecessary re-renders\n  const handleSortAsc = useCallback(() => {\n    column.toggleSorting(false)\n  }, [column])\n\n  const handleSortDesc = useCallback(() => {\n    column.toggleSorting(true)\n  }, [column])\n\n  if (!column.getCanSort()) {\n    return <div className={cn(className)}>{title}</div>\n  }\n\n  return (\n    <div className={cn(\"flex items-center space-x-2\", className)}>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button className=\"-ml-3 h-8 data-[state=open]:bg-accent\" size=\"sm\" variant=\"ghost\">\n            <span>{title}</span>\n            {column.getIsSorted() === \"desc\" ? (\n              <ArrowDownIcon className=\"ml-2 h-4 w-4\" />\n            ) : column.getIsSorted() === \"asc\" ? (\n              <ArrowUpIcon className=\"ml-2 h-4 w-4\" />\n            ) : (\n              <ChevronsUpDownIcon className=\"ml-2 h-4 w-4\" />\n            )}\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"start\">\n          <DropdownMenuItem onClick={handleSortAsc}>\n            <ArrowUpIcon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground/70\" />\n            Asc\n          </DropdownMenuItem>\n          <DropdownMenuItem onClick={handleSortDesc}>\n            <ArrowDownIcon className=\"mr-2 h-3.5 w-3.5 text-muted-foreground/70\" />\n            Desc\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n\nexport type TableCellProps = {\n  cell: Cell<unknown, unknown>\n  className?: string\n}\n\nexport const TableCell = ({ cell, className }: TableCellProps) => (\n  <TableCellRaw className={className}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCellRaw>\n)\n\nexport type TableRowProps = {\n  row: Row<unknown>\n  children: (props: { cell: Cell<unknown, unknown> }) => ReactNode\n  className?: string\n}\n\nexport const TableRow = ({ row, children, className }: TableRowProps) => (\n  <TableRowRaw className={className} data-state={row.getIsSelected() && \"selected\"} key={row.id}>\n    {row.getVisibleCells().map(cell => children({ cell }))}\n  </TableRowRaw>\n)\n\nexport type TableBodyProps = {\n  children: (props: { row: Row<unknown> }) => ReactNode\n  className?: string\n}\n\nexport const TableBody = ({ children, className }: TableBodyProps) => {\n  const { columns, table } = useContext(TableContext)\n  const rows = table?.getRowModel().rows\n\n  return (\n    <TableBodyRaw className={className}>\n      {rows?.length ? (\n        rows.map(row => children({ row }))\n      ) : (\n        <TableRowRaw>\n          <TableCellRaw className=\"h-24 text-center\" colSpan={columns.length}>\n            No results.\n          </TableCellRaw>\n        </TableRowRaw>\n      )}\n    </TableBodyRaw>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// DataTable — a batteries-included, self-contained paginated table. Unlike the\n// composition primitives above (TableProvider + render-prop parts), this is a\n// drop-in: pass `columns` + `data` and get header, body, empty/loading states\n// and Prev/Next pagination. All user-facing labels are props (English\n// defaults) so apps can feed i18n strings; the component itself ships no copy.\n// ---------------------------------------------------------------------------\n\nexport interface DataTableProps<TData, TValue> {\n  columns: ColumnDef<TData, TValue>[]\n  data: TData[]\n  /** Show a single-row loading state instead of the body. */\n  loading?: boolean\n  /** Row shown when there are no results. */\n  emptyText?: string\n  /**\n   * What fills the body when there are no results, in place of `emptyText`.\n   *\n   * A centred grey line reads the same as a request that failed, and on a table it is the only\n   * thing a reader has to tell \"nobody matched your filter\" from \"this screen is broken\". Takes\n   * `EmptyState` from `@tradalab/lyra/ui`, or anything else. `emptyText` stays because most tables\n   * want one sentence and nothing more.\n   */\n  empty?: ReactNode\n  /** Row shown while `loading`. */\n  loadingText?: string\n  /** Previous-page button label. */\n  previousLabel?: string\n  /** Next-page button label. */\n  nextLabel?: string\n  /** Rows per page (default 10). Pagination controls appear only when needed. */\n  pageSize?: number\n  /** Extra classes on the bordered table wrapper. */\n  className?: string\n  // --- control bar (all optional; the bar renders only when one is set) ---\n  /** Show a search box that globally filters rows across all accessor columns. */\n  searchable?: boolean\n  /** Placeholder for the search box. */\n  searchPlaceholder?: string\n  /** Show a reload button; called on click. Its icon spins while `loading`. */\n  onReload?: () => void\n  /** Accessible label / tooltip for the reload button. */\n  reloadLabel?: string\n  /** Custom controls rendered on the right of the bar (e.g. a \"New\" button). */\n  toolbar?: ReactNode\n  // --- infinite scroll (opt-in; providing `onLoadMore` switches the table from\n  // Prev/Next pagination to rendering every accumulated row and requesting more\n  // as a bottom sentinel scrolls into view). Data fetching stays with the caller\n  // (e.g. react-query useInfiniteQuery); the table only owns the sentinel. ---\n  /** Called when the bottom sentinel becomes visible and more rows can load. */\n  onLoadMore?: () => void\n  /** Whether another page is available; the sentinel is ignored once false. */\n  hasMore?: boolean\n  /** True while the next page is loading — shows a spinner row and de-dupes calls. */\n  loadingMore?: boolean\n  /** Label beside the bottom spinner. */\n  loadingMoreText?: string\n  // --- server-driven pages (opt-in; providing `onPageChange` switches the table from\n  // slicing rows itself to showing exactly the page it was handed, plus a numbered pager).\n  //\n  // For the screens that get AUDITED rather than skimmed: a timesheet, a punch log at year\n  // end. Infinite scroll cannot say \"page 3 of 47\", cannot be sent to a colleague, and cannot\n  // reach the end of a long list without dragging through all of it.\n  //\n  // `onLoadMore` wins if both are given - a table with two pagers is a bug that ships. ---\n  /** Zero-based index of the page being shown. */\n  pageIndex?: number\n  /** How many pages exist. The table cannot work this out: only the server knows the total. */\n  pageCount?: number\n  /** Called with a zero-based page index. */\n  onPageChange?: (index: number) => void\n  /** Sizes offered in the selector. Omit to leave the size fixed and hide the control. */\n  pageSizeOptions?: number[]\n  /** Called with the chosen size. The caller is expected to return to page 1. */\n  onPageSizeChange?: (size: number) => void\n  /** Free text beside the pager, e.g. \"1-50 of 4,231\". lyra ships no copy and no number\n   *  formatting, so the caller builds it. */\n  rangeLabel?: ReactNode\n  /** Accessible labels for the pager buttons. */\n  pageLabels?: { first?: string; previous?: string; next?: string; last?: string; size?: string }\n}\n\n/**\n * Which page numbers to show: always the first, the last, and a couple either side of the\n * current one, with `null` where a gap is elided.\n *\n * A pager that renders every page is unusable at forty pages and absurd at four hundred, and\n * one that renders only prev/next hides how long the list is - which is the question the\n * reader opened it with.\n */\nexport function pageWindow(index: number, count: number, radius = 1): (number | null)[] {\n  if (count <= 0) return []\n  const want = new Set<number>([0, count - 1])\n  for (let p = index - radius; p <= index + radius; p++) {\n    if (p >= 0 && p < count) want.add(p)\n  }\n  const sorted = [...want].sort((a, b) => a - b)\n  const out: (number | null)[] = []\n  let prev = -1\n  for (const p of sorted) {\n    // A single skipped page is rendered rather than elided: \"1 … 3\" is longer than \"1 2 3\"\n    // and tells the reader less.\n    if (prev >= 0 && p - prev === 2) out.push(p - 1)\n    else if (prev >= 0 && p - prev > 2) out.push(null)\n    out.push(p)\n    prev = p\n  }\n  return out\n}\n\nexport function DataTable<TData, TValue>({\n  columns,\n  data,\n  loading,\n  emptyText = \"No results.\",\n  empty,\n  loadingText = \"Loading…\",\n  previousLabel = \"Previous\",\n  nextLabel = \"Next\",\n  pageSize = 10,\n  className,\n  searchable,\n  searchPlaceholder = \"Search…\",\n  onReload,\n  reloadLabel = \"Reload\",\n  toolbar,\n  onLoadMore,\n  hasMore,\n  loadingMore,\n  loadingMoreText = \"Loading more…\",\n  pageIndex = 0,\n  pageCount = 0,\n  onPageChange,\n  pageSizeOptions,\n  onPageSizeChange,\n  rangeLabel,\n  pageLabels,\n}: DataTableProps<TData, TValue>) {\n  const [globalFilter, setGlobalFilter] = useState(\"\")\n  const infinite = Boolean(onLoadMore)\n  // Server pages: the rows handed in ARE the page, so the table must not slice them again.\n  const served = !infinite && Boolean(onPageChange)\n  const table = useReactTable({\n    data,\n    columns,\n    state: { globalFilter },\n    onGlobalFilterChange: setGlobalFilter,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    // Infinite mode renders every accumulated row; pagination is only wired for\n    // the default finite table.\n    ...(infinite || served\n      ? {}\n      : { getPaginationRowModel: getPaginationRowModel(), initialState: { pagination: { pageSize } } }),\n  })\n\n  const rows = table.getRowModel().rows\n  const showBar = Boolean(searchable || onReload || toolbar)\n\n  // --- infinite scroll: observe a bottom sentinel and ask the caller for more.\n  // Latest callback/flags are kept in refs so the observer subscribes once. ---\n  const sentinelRef = useRef<HTMLDivElement | null>(null)\n  const onLoadMoreRef = useRef(onLoadMore)\n  onLoadMoreRef.current = onLoadMore\n  const flags = useRef({ hasMore, loadingMore })\n  flags.current = { hasMore, loadingMore }\n  const intersecting = useRef(false)\n\n  const maybeLoadMore = useCallback(() => {\n    if (intersecting.current && flags.current.hasMore && !flags.current.loadingMore) {\n      onLoadMoreRef.current?.()\n    }\n  }, [])\n\n  useEffect(() => {\n    if (!infinite) return\n    const el = sentinelRef.current\n    if (!el) return\n    const io = new IntersectionObserver(\n      entries => {\n        intersecting.current = entries[0]?.isIntersecting ?? false\n        maybeLoadMore()\n      },\n      { rootMargin: \"200px\" },\n    )\n    io.observe(el)\n    return () => {\n      io.disconnect()\n    }\n  }, [infinite, maybeLoadMore])\n\n  // A freshly loaded page can leave the sentinel still on-screen; the observer\n  // won't re-fire on its own, so re-check whenever the rows or flags change.\n  useEffect(() => {\n    if (infinite) maybeLoadMore()\n  }, [infinite, rows.length, loadingMore, hasMore, maybeLoadMore])\n\n  return (\n    <div>\n      {showBar ? (\n        <div className=\"flex items-center gap-2 pb-4\">\n          {searchable ? (\n            <div className=\"relative w-full max-w-xs\">\n              <SearchIcon className=\"text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2\" />\n              <Input\n                value={globalFilter}\n                onChange={e => table.setGlobalFilter(e.target.value)}\n                placeholder={searchPlaceholder}\n                className=\"pl-8\"\n              />\n            </div>\n          ) : null}\n          {onReload || toolbar ? (\n            <div className=\"ml-auto flex items-center gap-2\">\n              {toolbar}\n              {onReload ? (\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  onClick={onReload}\n                  disabled={loading}\n                  aria-label={reloadLabel}\n                  title={reloadLabel}\n                >\n                  <RefreshCwIcon className={cn(\"size-4\", loading && \"animate-spin\")} />\n                </Button>\n              ) : null}\n            </div>\n          ) : null}\n        </div>\n      ) : null}\n      <div className={cn(\"overflow-hidden border\", className)}>\n        <TableRaw>\n          <TableHeaderRaw>\n            {table.getHeaderGroups().map(hg => (\n              <TableRowRaw key={hg.id}>\n                {hg.headers.map(header => (\n                  <TableHeadRaw key={header.id}>\n                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}\n                  </TableHeadRaw>\n                ))}\n              </TableRowRaw>\n            ))}\n          </TableHeaderRaw>\n          <TableBodyRaw>\n            {loading && rows.length === 0 ? (\n              // Only replace the body with a loading row on the FIRST load; on a\n              // refetch keep the (stale) rows visible while the reload icon spins.\n              <TableRowRaw>\n                <TableCellRaw className=\"h-24 text-center\" colSpan={columns.length}>\n                  {loadingText}\n                </TableCellRaw>\n              </TableRowRaw>\n            ) : rows.length ? (\n              rows.map(row => (\n                <TableRowRaw key={row.id} data-state={row.getIsSelected() && \"selected\"}>\n                  {row.getVisibleCells().map(cell => (\n                    <TableCellRaw key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCellRaw>\n                  ))}\n                </TableRowRaw>\n              ))\n            ) : (\n              // An empty state is not a record, so the row drops the `hover:bg-muted/50` every\n              // other row carries: lighting up under the pointer offers an interaction that is not\n              // there, and it gets louder the taller the cell grows.\n              <TableRowRaw className=\"hover:bg-transparent\">\n                <TableCellRaw\n                  className={empty ? \"p-0\" : \"text-muted-foreground h-24 text-center\"}\n                  colSpan={columns.length}\n                >\n                  {empty ?? emptyText}\n                </TableCellRaw>\n              </TableRowRaw>\n            )}\n          </TableBodyRaw>\n        </TableRaw>\n        {infinite && loadingMore ? (\n          <div className=\"text-muted-foreground flex items-center justify-center gap-2 py-3 text-sm\">\n            <Loader2Icon className=\"size-4 animate-spin\" />\n            {loadingMoreText}\n          </div>\n        ) : null}\n        {infinite ? <div ref={sentinelRef} aria-hidden className=\"h-px w-full\" /> : null}\n      </div>\n      {served ? (\n        <div className=\"flex flex-wrap items-center justify-between gap-3 py-4\">\n          <div className=\"text-muted-foreground flex items-center gap-3 text-sm\">\n            {rangeLabel}\n            {pageSizeOptions && pageSizeOptions.length > 0 ? (\n              <NativeSelect\n                aria-label={pageLabels?.size ?? \"Rows per page\"}\n                className=\"h-8 w-auto\"\n                value={String(pageSize)}\n                onChange={e => onPageSizeChange?.(Number(e.target.value))}\n              >\n                {pageSizeOptions.map(n => (\n                  <NativeSelectOption key={n} value={String(n)}>\n                    {n}\n                  </NativeSelectOption>\n                ))}\n              </NativeSelect>\n            ) : null}\n          </div>\n          <div className=\"flex items-center gap-1\">\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              aria-label={pageLabels?.first ?? \"First page\"}\n              onClick={() => onPageChange?.(0)}\n              disabled={pageIndex <= 0}\n            >\n              «\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              aria-label={pageLabels?.previous ?? previousLabel}\n              onClick={() => onPageChange?.(pageIndex - 1)}\n              disabled={pageIndex <= 0}\n            >\n              ‹\n            </Button>\n            {pageWindow(pageIndex, pageCount).map((p, i) =>\n              p === null ? (\n                <span key={`gap${i}`} className=\"text-muted-foreground px-1 text-sm\">\n                  …\n                </span>\n              ) : (\n                <Button\n                  key={p}\n                  variant={p === pageIndex ? \"default\" : \"outline\"}\n                  size=\"sm\"\n                  aria-current={p === pageIndex ? \"page\" : undefined}\n                  onClick={() => onPageChange?.(p)}\n                >\n                  {p + 1}\n                </Button>\n              ),\n            )}\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              aria-label={pageLabels?.next ?? nextLabel}\n              onClick={() => onPageChange?.(pageIndex + 1)}\n              disabled={pageIndex >= pageCount - 1}\n            >\n              ›\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              aria-label={pageLabels?.last ?? \"Last page\"}\n              onClick={() => onPageChange?.(pageCount - 1)}\n              disabled={pageIndex >= pageCount - 1}\n            >\n              »\n            </Button>\n          </div>\n        </div>\n      ) : null}\n      {!infinite && !served && table.getPageCount() > 1 ? (\n        <div className=\"flex items-center justify-end gap-2 py-4\">\n          <Button variant=\"outline\" size=\"sm\" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>\n            {previousLabel}\n          </Button>\n          <Button variant=\"outline\" size=\"sm\" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>\n            {nextLabel}\n          </Button>\n        </div>\n      ) : null}\n    </div>\n  )\n}\n"]}

package/dist/shell/index.d.ts

@@ -80,6 +80,55 @@ declare function SidebarDock({ className, ...rest }: ComponentProps<typeof Sideb
  */
 declare function SidebarPanel({ className, ...rest }: ComponentProps<typeof Sidebar>): React.JSX.Element;
 
+/**
+ * Width is decided by what is inside the page, not one page at a time.
+ *
+ * Left-aligned, not centred. `mx-auto` floats a form in the middle of a wide monitor with the nav
+ * stranded on the far left, and the two stop reading as one page. Centring is what `Container`
+ * offers, and it is right there: a standalone page owns the whole viewport. This one is the body of
+ * a page inside `AppShellBody`, which already holds the scroll region and the gutters, so adding
+ * either here doubles it.
+ */
+declare const MEASURE: {
+    /**
+     * Tables, trees, calendars and charts. A column nobody can read costs more than a long line: a
+     * self-imposed cap is what makes a report collapse five facts into one cell while a third of the
+     * monitor goes to margin.
+     */
+    readonly table: "max-w-none";
+    /** Prose, detail panes, dashboards. */
+    readonly read: "max-w-5xl";
+    /** Stops where a line stops being comfortable to read, which is what a form field is. */
+    readonly form: "max-w-3xl";
+};
+type PageMeasure = keyof typeof MEASURE;
+interface PageShellProps {
+    /** Default `"read"`. */
+    measure?: PageMeasure;
+    className?: string;
+    children?: ReactNode;
+}
+declare function PageShell({ measure, className, children }: PageShellProps): React.JSX.Element;
+
+/**
+ * Title, one line of context, and the actions that belong to the whole screen.
+ *
+ * Five apps carried this byte for byte and two more carried a variant, which is how the heading
+ * level drifted: the same product rendered its page titles at three sizes depending on which app
+ * you were standing in.
+ *
+ * The description is not decoration on a screen that names something a reader cannot infer (a pin,
+ * a derived day, a rule pack); it is the sentence that stops them guessing. Leave it out rather
+ * than restate the title.
+ */
+interface PageHeaderProps {
+    title: ReactNode;
+    description?: ReactNode;
+    actions?: ReactNode;
+    className?: string;
+}
+declare function PageHeader({ title, description, actions, className }: PageHeaderProps): React.JSX.Element;
+
 interface NavGroupProps {
     label?: ReactNode;
     children: ReactNode;
@@ -387,6 +436,21 @@ interface BreadcrumbsProps extends ComponentProps<typeof Breadcrumb> {
     separator?: ReactNode;
     /** Segment-id → display-label map. Unmapped segments render raw. */
     labels?: Record<string, string>;
+    /**
+     * Label a crumb from the path it links to, consulted before `labels`. Return
+     * `undefined` to fall through.
+     *
+     * This exists so the nav can be the one place a route gets its name. Every app
+     * already holds an `href → label` table to build the sidebar; the alternative
+     * is a second table keyed by segment, and a second table drifts. Measured on
+     * one app before this shipped: four routes the nav listed were missing from its
+     * crumb table, one route had two names across the two, and a nested route was
+     * swallowed by its parent's prefix so the crumb NAMED THE WRONG SCREEN. None of
+     * that is visible on the screen that caused it.
+     *
+     * `labels` stays for an app small enough that its segments are already words.
+     */
+    resolve?: (href: string, segment: string) => ReactNode | undefined;
     /**
      * Crumb rendered before the path segments — typically the app name linking
      * home. With it set the trail also renders on the root route (as the current
@@ -395,7 +459,7 @@ interface BreadcrumbsProps extends ComponentProps<typeof Breadcrumb> {
     leading?: LeadingCrumb;
 }
 /** Pathname-derived breadcrumbs. Renders nothing on the root route unless `leading` is set. */
-declare function Breadcrumbs({ separator, labels, leading, ...rest }: BreadcrumbsProps): React.JSX.Element | null;
+declare function Breadcrumbs({ separator, labels, resolve, leading, ...rest }: BreadcrumbsProps): React.JSX.Element | null;
 
 /** One application in the {@link AppGrid} — rendered as an {@link AppTile}. */
 interface AppGridItem {
@@ -507,4 +571,4 @@ interface AppGlyphProps {
 /** An app's mark: its image when `icon` is a URL that loads, else a name monogram. */
 declare function AppGlyph({ icon, name, className, ownOrigin }: AppGlyphProps): React.JSX.Element;
 
-export { AppGlyph, type AppGlyphProps, AppGrid, type AppGridGroup, type AppGridItem, type AppGridProps, AppShell, AppShellBody, AppShellHeader, AppShellMain, type AppShellProps, AppSwitcher, type AppSwitcherApp, type AppSwitcherProps, type AppSwitcherSection, AppTile, Breadcrumbs, type BreadcrumbsProps, type LeadingCrumb, type MatchMode, NavBrand, type NavBrandApp, type NavBrandGroup, type NavBrandProps, NavGroup, type NavGroupProps, type NavIcon, NavItem, type NavItemProps, NavSection, type NavSectionProps, NavUser, type NavUserProps, type NavUserThemeLabels, SidebarDock, SidebarPanel, StackedSidebar, TabBar, type TabBarLabels, type TabBarProps, type TabItem, type UseActiveRoute, defaultAppGridLabels, defaultNavBrandAppsLabel, defaultNavUserThemeLabels, defaultTabBarLabels, isIconUrl, useActiveRoute };
+export { AppGlyph, type AppGlyphProps, AppGrid, type AppGridGroup, type AppGridItem, type AppGridProps, AppShell, AppShellBody, AppShellHeader, AppShellMain, type AppShellProps, AppSwitcher, type AppSwitcherApp, type AppSwitcherProps, type AppSwitcherSection, AppTile, Breadcrumbs, type BreadcrumbsProps, type LeadingCrumb, type MatchMode, NavBrand, type NavBrandApp, type NavBrandGroup, type NavBrandProps, NavGroup, type NavGroupProps, type NavIcon, NavItem, type NavItemProps, NavSection, type NavSectionProps, NavUser, type NavUserProps, type NavUserThemeLabels, PageHeader, type PageHeaderProps, type PageMeasure, PageShell, type PageShellProps, SidebarDock, SidebarPanel, StackedSidebar, TabBar, type TabBarLabels, type TabBarProps, type TabItem, type UseActiveRoute, defaultAppGridLabels, defaultNavBrandAppsLabel, defaultNavUserThemeLabels, defaultTabBarLabels, isIconUrl, useActiveRoute };

package/dist/shell/index.js

@@ -88,6 +88,39 @@ function SidebarPanel({
     }
   );
 }
+var MEASURE = {
+  /**
+   * Tables, trees, calendars and charts. A column nobody can read costs more than a long line: a
+   * self-imposed cap is what makes a report collapse five facts into one cell while a third of the
+   * monitor goes to margin.
+   */
+  table: "max-w-none",
+  /** Prose, detail panes, dashboards. */
+  read: "max-w-5xl",
+  /** Stops where a line stops being comfortable to read, which is what a form field is. */
+  form: "max-w-3xl"
+};
+function PageShell({ measure = "read", className, children }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex w-full flex-col gap-6", MEASURE[measure], className), children });
+}
+function PageHeader({ title, description, actions, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: description }) : null
+        ] }),
+        actions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null
+      ]
+    }
+  );
+}
 function NavGroup({ label, children }) {
   return /* @__PURE__ */ jsxs(SidebarGroup, { children: [
     label != null ? /* @__PURE__ */ jsx(SidebarGroupLabel, { children: label }) : null,
@@ -609,7 +642,7 @@ function TabBar({
     }
   );
 }
-function Breadcrumbs({ separator, labels, leading, ...rest }) {
+function Breadcrumbs({ separator, labels, resolve, leading, ...rest }) {
   const { pathname } = useActiveRoute();
   const segments = pathname.split("/").filter(Boolean);
   if (segments.length === 0 && !leading) return null;
@@ -619,7 +652,7 @@ function Breadcrumbs({ separator, labels, leading, ...rest }) {
     leading ? /* @__PURE__ */ jsx(BreadcrumbItem, { className: hideLeading ? "hidden md:block" : void 0, children: segments.length === 0 ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: leading.label }) : leading.href ? /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Link2, { href: leading.href, children: leading.label }) }) : leading.label }) : null,
     segments.map((seg, i) => {
       const href = "/" + segments.slice(0, i + 1).join("/");
-      const label = labels?.[seg] ?? seg;
+      const label = resolve?.(href, seg) ?? labels?.[seg] ?? seg;
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         i > 0 || leading ? /* @__PURE__ */ jsx(BreadcrumbSeparator, { className: i === 0 && hideLeading && leading ? "hidden md:block" : void 0, children: separator }) : null,
         /* @__PURE__ */ jsx(BreadcrumbItem, { children: i === last ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: label }) : /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Link2, { href, children: label }) }) })
@@ -700,6 +733,6 @@ function AppTile({ app }) {
   );
 }
 
-export { AppGlyph, AppGrid, AppShell, AppShellBody, AppShellHeader, AppShellMain, AppSwitcher, AppTile, Breadcrumbs, NavBrand, NavGroup, NavItem, NavSection, NavUser, SidebarDock, SidebarPanel, StackedSidebar, TabBar, defaultAppGridLabels, defaultNavBrandAppsLabel, defaultNavUserThemeLabels, defaultTabBarLabels, isIconUrl, useActiveRoute };
+export { AppGlyph, AppGrid, AppShell, AppShellBody, AppShellHeader, AppShellMain, AppSwitcher, AppTile, Breadcrumbs, NavBrand, NavGroup, NavItem, NavSection, NavUser, PageHeader, PageShell, SidebarDock, SidebarPanel, StackedSidebar, TabBar, defaultAppGridLabels, defaultNavBrandAppsLabel, defaultNavUserThemeLabels, defaultTabBarLabels, isIconUrl, useActiveRoute };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map