@iloveagents/foundry-web-ui 0.14.2 → 0.17.0

package/README.md

@@ -38,6 +38,29 @@ components are generated:
 @source "../node_modules/@iloveagents/foundry-web-ui/dist";
 ```
 
+## Lists
+
+Every list renders through one `DataTable` family (TanStack Table underneath):
+AND-of-tokens search, faceted filters with live counts (OR within a facet, AND
+across facets, array cells count per element, empty cells as "None"), sortable
+headers, column visibility, row selection, optional paging, optional grouping,
+and a URL codec that keeps `q` / `sort` / `f_<column>` / `hide` / `page` / `size`.
+
+```tsx
+const table = useDataTable({ data: rows, columns, getRowId: (row) => row.id, pageSize: 20 });
+
+<DataTableToolbar table={table} facets={[{ columnId: "status" }, { columnId: "priority" }]} />
+<DataTable table={table} onRowClick={(row) => open(row.original)} />
+<DataTablePagination table={table} />
+```
+
+Give a column `filterFn: facetFilterFn` (or the string `"facet"` in untyped
+code) to use it as a facet; `meta.facetLabels` names
+its values, `meta.label` names the column in the View menu, and
+`DataTableColumnHeader` makes a header sortable. Pass `state` + `onStateChange`
+(with `parseDataTableState` / `mergeDataTableUrlState`) to keep the whole list
+state in the URL.
+
 ## Extension Points
 
 Feature modules (like SPACES) plug into `@iloveagents/foundry-web-ui` via registries — no direct imports needed:

package/dist/components/assistant-chat.js

@@ -120,7 +120,7 @@ export function ChatContent({ starterSuggestions = DEFAULT_STARTER_SUGGESTIONS,
     const collapseChat = useChatBubbleStore((s) => s.collapse);
     const showPagePanel = useChatBubbleStore((s) => s.showPagePanel);
     const togglePagePanel = useChatBubbleStore((s) => s.togglePagePanel);
-    return (_jsxs(ThreadPrimitive.Root, { className: cn("flex flex-col flex-1", "bg-background text-foreground", "overflow-hidden"), children: [isExpanded && (_jsxs("div", { className: "shrink-0 flex items-center justify-between px-4 py-2 border-b border-border", children: [_jsxs("span", { className: "text-sm font-medium text-foreground flex items-center gap-2", children: [_jsx(Bot, { className: "size-4 text-primary" }), "Chat"] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(TooltipIconButton, { tooltip: showPagePanel ? "Hide page panel" : "Show page panel", size: "icon", onClick: togglePagePanel, className: "hidden xl:inline-flex", children: showPagePanel ? (_jsx(PanelRightClose, { className: "size-4" })) : (_jsx(PanelRightOpen, { className: "size-4" })) }), _jsx(TooltipIconButton, { tooltip: "Minimize to bubble", size: "icon", onClick: collapseChat, children: _jsx(Minimize2, { className: "size-4" }) })] })] })), _jsxs(DropZone, { children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsxs(ThreadPrimitive.Viewport, { className: "absolute inset-0 overflow-y-auto bg-background", children: [_jsx(ThreadPrimitive.Empty, { children: _jsxs("div", { className: cn("flex min-h-full flex-col", "items-center justify-center", "px-4"), children: [_jsx(Bot, { className: "size-16 mb-6 text-primary/70" }), _jsx("h1", { className: "text-[2rem] font-normal text-foreground text-center mb-6", children: "How can I help you today?" }), starterSuggestions.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-2 max-w-lg", children: starterSuggestions.map((prompt) => (_jsx(ThreadPrimitive.Suggestion, { prompt: prompt, send: true, asChild: true, children: _jsx(Button, { variant: "outline", className: "text-sm", children: prompt }) }, prompt))) }))] }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "mx-auto max-w-3xl px-4 pt-8", children: [_jsx(ThreadPrimitive.Messages, { components: {
+    return (_jsxs(ThreadPrimitive.Root, { className: cn("flex flex-col flex-1", "bg-background text-foreground", "overflow-hidden"), children: [isExpanded && (_jsxs("div", { className: "shrink-0 flex items-center justify-between px-4 py-2 border-b border-border", children: [_jsxs("span", { className: "text-sm font-medium text-foreground flex items-center gap-2", children: [_jsx(Bot, { className: "size-4 text-primary" }), "Chat"] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(TooltipIconButton, { tooltip: showPagePanel ? "Hide page panel" : "Show page panel", size: "icon", onClick: togglePagePanel, className: "hidden xl:inline-flex", children: showPagePanel ? (_jsx(PanelRightClose, { className: "size-4" })) : (_jsx(PanelRightOpen, { className: "size-4" })) }), _jsx(TooltipIconButton, { tooltip: "Minimize to bubble", size: "icon", onClick: collapseChat, children: _jsx(Minimize2, { className: "size-4" }) })] })] })), _jsxs(DropZone, { children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsxs(ThreadPrimitive.Viewport, { className: "absolute inset-0 overflow-y-auto bg-background", children: [_jsx(ThreadPrimitive.Empty, { children: _jsxs("div", { className: cn("flex min-h-full flex-col", "items-center justify-center", "px-4"), children: [_jsx(Bot, { className: "size-16 mb-6 text-primary/70" }), _jsx("h1", { className: "text-[2rem] font-normal text-foreground text-center mb-6", children: "How can I help you today?" }), starterSuggestions.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-2 max-w-lg", children: starterSuggestions.map((prompt) => (_jsx(ThreadPrimitive.Suggestion, { prompt: prompt, send: true, asChild: true, children: _jsx(Button, { variant: "outline", className: "text-sm", children: prompt }) }, prompt))) }))] }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "mx-auto max-w-3xl px-4 pt-8 pb-4", children: [_jsx(ThreadPrimitive.Messages, { components: {
                                                         UserMessage,
                                                         EditComposer,
                                                         AssistantMessage,

package/dist/components/chat-message-parts.d.ts

@@ -10,13 +10,18 @@
  * hand-rolling a parts config is what keeps them honest — there is now only
  * one place to drift from.
  *
- * Adjacent tool calls fold into one {@link ToolRunGroup} — a single summary row
- * over the cards, collapsed; see that component for why.
+ * Each stretch of machinery folds into one {@link TurnActivity} — a single
+ * summary row over the cards and the thinking, collapsed; see that component
+ * for why.
  *
- * Reading order is fixed rather than chronological: tool runs, then the
- * reasoning that explains them, then the answer. A model normally emits its
- * thinking FIRST, which put the least important row at the top of every
- * message and pushed the answer down. Flex `order` does the moving, so the
- * parts stay where the runtime put them in the DOM.
+ * Reading order is CHRONOLOGICAL, throughout. It briefly was not: text
+ * carried a flex `order` that floated every prose part to the bottom of the
+ * message, to keep a reasoning row from sitting above a one-line answer.
+ * With the machinery folded into a quiet 20px row that argument is spent,
+ * and the hoist actively hurt — in a multi-step turn it stripped the
+ * narration out from between the work and stacked the bare rows into the
+ * ladder this component exists to prevent. It also glued consecutive prose
+ * parts into one run-on paragraph. Parts now render where the model put
+ * them.
  */
 export declare function ChatMessageParts(): import("react/jsx-runtime").JSX.Element;

package/dist/components/chat-message-parts.js

@@ -3,12 +3,21 @@ import { MessagePrimitive, groupPartByType } from "@assistant-ui/react";
 import { MarkdownText } from "./markdown-text.js";
 import { ReasoningMessagePartComponent } from "./reasoning-part.js";
 import { ToolFallback } from "./tool-fallback.js";
-import { ToolRunGroup } from "./tool-run-group.js";
+import { TurnActivity } from "./turn-activity.js";
 /**
- * Coalesce adjacent tool calls into one `group-tool` node. Everything else
- * stays ungrouped and renders as its own leaf.
+ * A turn's machinery nests under a `group-activity` node; inside it, adjacent
+ * tool calls still coalesce into `group-tool`.
+ *
+ * Text is deliberately absent from this map. The model's prose stays
+ * ungrouped, so it can never end up inside the fold — and because grouping
+ * coalesces ADJACENT parts, each stretch of prose also ends one activity node
+ * and starts the next. That is the intent: a multi-step turn reads as work,
+ * what it learned, work, what it learned, answer.
  */
-const groupBy = groupPartByType({ "tool-call": ["group-tool"] });
+const groupBy = groupPartByType({
+    "tool-call": ["group-activity", "group-tool"],
+    reasoning: ["group-activity"],
+});
 /**
  * The parts of an assistant message — ONE renderer, used by every chat
  * surface.
@@ -21,27 +30,53 @@ const groupBy = groupPartByType({ "tool-call": ["group-tool"] });
  * hand-rolling a parts config is what keeps them honest — there is now only
  * one place to drift from.
  *
- * Adjacent tool calls fold into one {@link ToolRunGroup} — a single summary row
- * over the cards, collapsed; see that component for why.
+ * Each stretch of machinery folds into one {@link TurnActivity} — a single
+ * summary row over the cards and the thinking, collapsed; see that component
+ * for why.
  *
- * Reading order is fixed rather than chronological: tool runs, then the
- * reasoning that explains them, then the answer. A model normally emits its
- * thinking FIRST, which put the least important row at the top of every
- * message and pushed the answer down. Flex `order` does the moving, so the
- * parts stay where the runtime put them in the DOM.
+ * Reading order is CHRONOLOGICAL, throughout. It briefly was not: text
+ * carried a flex `order` that floated every prose part to the bottom of the
+ * message, to keep a reasoning row from sitting above a one-line answer.
+ * With the machinery folded into a quiet 20px row that argument is spent,
+ * and the hoist actively hurt — in a multi-step turn it stripped the
+ * narration out from between the work and stacked the bare rows into the
+ * ladder this component exists to prevent. It also glued consecutive prose
+ * parts into one run-on paragraph. Parts now render where the model put
+ * them.
  */
 export function ChatMessageParts() {
     return (_jsx(MessagePrimitive.GroupedParts, { groupBy: groupBy, indicator: "never", children: ({ part, children }) => {
             switch (part.type) {
+                case "group-activity":
+                    return (_jsx(TurnActivity, { indices: part.indices, isRunning: part.status?.type === "running", children: children }));
                 case "group-tool":
-                    return (_jsx(ToolRunGroup, { indices: part.indices, isRunning: part.status?.type === "running", children: children }));
+                    // Inside the activity fold, so NOT another collapsed row —
+                    // opening one disclosure only to meet a second is a maze. The
+                    // cards render directly; the count already showed on the row
+                    // above.
+                    return _jsx("div", { className: "flex flex-col gap-2", children: children });
                 case "text":
-                    // The answer is ordered LAST so the message ends on its point,
-                    // with the reasoning row (order-1) sitting between the tool runs
-                    // and it. Tool groups keep the default order-0.
-                    return (_jsx("div", { className: "order-2", children: _jsx(MarkdownText, {}) }));
+                    // The wrapper is load-bearing, though it carries no classes.
+                    // `MarkdownText` renders `<ReactMarkdown>` directly, which emits
+                    // its top-level blocks into a FRAGMENT — without an element to
+                    // hold them, every paragraph, list and code block becomes a
+                    // direct child of the message's `gap-4` flex container and picks
+                    // up 16px of message-part spacing between them, on top of their
+                    // own margins. It used to be the `order-2` div; the ordering went
+                    // away, the wrapper must not.
+                    return (_jsx("div", { children: _jsx(MarkdownText, {}) }));
                 case "reasoning":
-                    return _jsx(ReasoningMessagePartComponent, { text: part.text });
+                    // Plain inside the fold, rather than behind a second disclosure.
+                    //
+                    // Its POSITION is only as chronological as the parts array it is
+                    // given. Replayed history preserves the model's interleaving;
+                    // the live adapter does not — it accumulates all reasoning into a
+                    // single part emitted ahead of every tool call, so a live
+                    // reasoning A → tool A → reasoning B → tool B arrives as
+                    // reasoning A+B → tool A → tool B. That is the adapter's to fix,
+                    // and rendering in place is right either way; this note is here
+                    // so the next reader does not take the ordering on faith.
+                    return _jsx(ReasoningMessagePartComponent, { text: part.text, nested: true });
                 case "tool-call":
                     return part.toolUI ?? _jsx(ToolFallback, { ...part });
                 default:

package/dist/components/data-table/data-table-column-header.d.ts

@@ -0,0 +1,8 @@
+/** Sortable column header with an asc / desc / hide menu. */
+import type { Column } from "@tanstack/react-table";
+export interface DataTableColumnHeaderProps<T> {
+    column: Column<T, unknown>;
+    title: string;
+    className?: string;
+}
+export declare function DataTableColumnHeader<T>({ column, title, className, }: DataTableColumnHeaderProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-table/data-table-column-header.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react";
+import { Button, cn } from "@iloveagents/foundry-web-primitives";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "../../ui/dropdown-menu.js";
+export function DataTableColumnHeader({ column, title, className, }) {
+    if (!column.getCanSort()) {
+        return _jsx("div", { className: cn("font-medium", className), children: title });
+    }
+    const sorted = column.getIsSorted();
+    const align = column.columnDef.meta?.align;
+    return (_jsx("div", { className: cn("flex items-center", align === "right" && "justify-end", className), children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": `${title}: ${sorted === "asc" ? "sorted ascending" : sorted === "desc" ? "sorted descending" : "not sorted"}`, "data-sorted": sorted || undefined, className: "-ml-3 h-8 gap-1.5 rounded-lg px-2 text-xs font-medium text-muted-foreground data-[state=open]:bg-accent data-[sorted]:text-foreground", children: [_jsx("span", { children: title }), sorted === "desc" ? (_jsx(ArrowDown, { className: "size-3.5" })) : sorted === "asc" ? (_jsx(ArrowUp, { className: "size-3.5" })) : (_jsx(ChevronsUpDown, { className: "size-3.5 opacity-60" }))] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "rounded-xl border-border/45 bg-popover/95 shadow-lg", children: [_jsxs(DropdownMenuItem, { onClick: () => column.toggleSorting(false), children: [_jsx(ArrowUp, { className: "size-3.5 text-muted-foreground" }), "Asc"] }), _jsxs(DropdownMenuItem, { onClick: () => column.toggleSorting(true), children: [_jsx(ArrowDown, { className: "size-3.5 text-muted-foreground" }), "Desc"] }), sorted ? (_jsxs(DropdownMenuItem, { onClick: () => column.clearSorting(), children: [_jsx(ChevronsUpDown, { className: "size-3.5 text-muted-foreground" }), "Unsorted"] })) : null, column.getCanHide() ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => column.toggleVisibility(false), children: [_jsx(EyeOff, { className: "size-3.5 text-muted-foreground" }), "Hide"] })] })) : null] })] }) }));
+}

package/dist/components/data-table/data-table-faceted-filter.d.ts

@@ -0,0 +1,16 @@
+/**
+ * One facet: a dashed "+ Title" button that opens a checklist of options
+ * with live counts. Picking several options ORs them; the table ANDs the
+ * facets. Options come from the data unless declared.
+ */
+import type { Column } from "@tanstack/react-table";
+import { type DataTableFacetOption } from "./facets.js";
+export interface DataTableFacetedFilterProps<T> {
+    column: Column<T, unknown>;
+    title?: string;
+    options?: DataTableFacetOption[];
+    /** Show a search box inside the list once there are more options than this (default 7). */
+    searchableFrom?: number;
+    className?: string;
+}
+export declare function DataTableFacetedFilter<T>({ column, title, options: declared, searchableFrom, className, }: DataTableFacetedFilterProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-table/data-table-faceted-filter.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Check, PlusCircle } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Button, cn } from "@iloveagents/foundry-web-primitives";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { columnLabel, facetOptions, normalizeFacetValue, } from "./facets.js";
+export function DataTableFacetedFilter({ column, title, options: declared, searchableFrom = 7, className, }) {
+    const [query, setQuery] = useState("");
+    const label = title ?? columnLabel(column);
+    const selected = normalizeFacetValue(column.getFilterValue());
+    const selectedSet = new Set(selected);
+    const options = facetOptions(column, declared);
+    const shown = useMemo(() => {
+        const needle = query.trim().toLowerCase();
+        return needle ? options.filter((o) => o.label.toLowerCase().includes(needle)) : options;
+    }, [options, query]);
+    const toggle = (value) => {
+        const next = selectedSet.has(value)
+            ? selected.filter((item) => item !== value)
+            : [...selected, value];
+        column.setFilterValue(next.length ? next : undefined);
+    };
+    return (_jsxs(Popover, { onOpenChange: (open) => !open && setQuery(""), children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", "data-facet": column.id, "data-active": selected.length ? "" : undefined, className: cn("h-8 rounded-xl border-dashed border-border/60 bg-background/65 shadow-none hover:bg-muted/26", selected.length && "border-solid border-primary/30", className), children: [_jsx(PlusCircle, { className: "size-4" }), label, selected.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "mx-0.5 h-4 w-px bg-border/60", "aria-hidden": "true" }), _jsx("span", { className: "rounded-md bg-muted px-1.5 py-0.5 text-xs font-normal lg:hidden", children: selected.length }), _jsx("span", { className: "hidden gap-1 lg:flex", children: selected.length > 2 ? (_jsxs("span", { className: "rounded-md bg-muted px-1.5 py-0.5 text-xs font-normal", children: [selected.length, " selected"] })) : (options
+                                        .filter((option) => selectedSet.has(option.value))
+                                        .map((option) => (_jsx("span", { className: "rounded-md bg-muted px-1.5 py-0.5 text-xs font-normal", children: option.label }, option.value)))) })] })) : null] }) }), _jsxs(PopoverContent, { align: "start", className: "w-56 p-1.5", children: [options.length >= searchableFrom ? (_jsx("input", { value: query, onChange: (event) => setQuery(event.target.value), placeholder: label, "aria-label": `Search ${label} options`, className: "mb-1 h-8 w-full rounded-lg border border-border/45 bg-background/72 px-2 text-sm outline-none focus:border-primary/30" })) : null, _jsx("div", { role: "group", "aria-label": `${label} filter`, className: "max-h-72 space-y-0.5 overflow-y-auto", children: shown.length === 0 ? (_jsx("div", { className: "px-2 py-4 text-center text-xs text-muted-foreground", children: "No options." })) : (shown.map((option) => {
+                            const checked = selectedSet.has(option.value);
+                            const Icon = option.icon;
+                            return (_jsxs("button", { type: "button", role: "checkbox", "aria-checked": checked, onClick: () => toggle(option.value), className: cn("flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm transition-colors hover:bg-accent", option.count === 0 && !checked && "text-muted-foreground"), children: [_jsx("span", { className: cn("flex size-4 shrink-0 items-center justify-center rounded border border-border", checked
+                                            ? "border-primary bg-primary text-primary-foreground"
+                                            : "opacity-60 [&_svg]:invisible"), children: _jsx(Check, { className: "size-3.5" }) }), Icon ? _jsx(Icon, { className: "size-4 text-muted-foreground" }) : null, _jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label }), _jsx("span", { className: "ml-auto font-mono text-xs tabular-nums text-muted-foreground", children: option.count })] }, option.value));
+                        })) }), selected.length > 0 ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "my-1 h-px bg-border/45" }), _jsx("button", { type: "button", onClick: () => column.setFilterValue(undefined), className: "w-full rounded-lg px-2 py-1.5 text-center text-sm hover:bg-accent", children: "Clear filter" })] })) : null] })] }));
+}

package/dist/components/data-table/data-table-pagination.d.ts

@@ -0,0 +1,8 @@
+/** Selection summary, rows-per-page, page x of y, first/prev/next/last. */
+import type { Table } from "@tanstack/react-table";
+export interface DataTablePaginationProps<T> {
+    table: Table<T>;
+    pageSizeOptions?: number[];
+    className?: string;
+}
+export declare function DataTablePagination<T>({ table, pageSizeOptions, className, }: DataTablePaginationProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-table/data-table-pagination.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+import { Button, cn } from "@iloveagents/foundry-web-primitives";
+import { Select } from "../../ui/select.js";
+export function DataTablePagination({ table, pageSizeOptions = [10, 20, 50, 100], className, }) {
+    const total = table.getFilteredRowModel().rows.length;
+    const selected = table.getFilteredSelectedRowModel().rows.length;
+    const { pageIndex, pageSize } = table.getState().pagination;
+    const pageCount = Math.max(1, table.getPageCount());
+    const sizes = pageSizeOptions.includes(pageSize)
+        ? pageSizeOptions
+        : [...pageSizeOptions, pageSize].sort((a, b) => a - b);
+    const iconButton = "size-8 rounded-lg border-border/45 bg-background/65 p-0 shadow-none hover:bg-muted/26";
+    return (_jsxs("div", { className: cn("flex flex-wrap items-center gap-x-6 gap-y-2 text-sm", className), children: [_jsx("div", { className: "flex-1 text-muted-foreground", "aria-live": "polite", children: selected > 0 ? `${selected} of ${total} row(s) selected.` : `${total} row(s)` }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium", children: "Rows per page" }), _jsx(Select, { value: pageSize, onChange: (event) => table.setPageSize(Number(event.target.value)), className: "h-8 w-[4.5rem] rounded-lg px-2 py-0", children: sizes.map((size) => (_jsx("option", { value: size, children: size }, size))) })] }), _jsxs("div", { className: "font-medium", children: ["Page ", pageIndex + 1, " of ", pageCount] }), _jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs(Button, { type: "button", variant: "outline", className: cn(iconButton, "hidden lg:inline-flex"), onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), children: [_jsx("span", { className: "sr-only", children: "Go to first page" }), _jsx(ChevronsLeft, { className: "size-4" })] }), _jsxs(Button, { type: "button", variant: "outline", className: iconButton, onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: [_jsx("span", { className: "sr-only", children: "Go to previous page" }), _jsx(ChevronLeft, { className: "size-4" })] }), _jsxs(Button, { type: "button", variant: "outline", className: iconButton, onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: [_jsx("span", { className: "sr-only", children: "Go to next page" }), _jsx(ChevronRight, { className: "size-4" })] }), _jsxs(Button, { type: "button", variant: "outline", className: cn(iconButton, "hidden lg:inline-flex"), onClick: () => table.setPageIndex(pageCount - 1), disabled: !table.getCanNextPage(), children: [_jsx("span", { className: "sr-only", children: "Go to last page" }), _jsx(ChevronsRight, { className: "size-4" })] })] })] }));
+}

package/dist/components/data-table/data-table-row-actions.d.ts

@@ -0,0 +1,16 @@
+import type { ComponentType } from "react";
+export interface DataTableRowAction {
+    label: string;
+    onSelect: () => void;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    destructive?: boolean;
+    disabled?: boolean;
+}
+export interface DataTableRowActionsProps {
+    actions: Array<DataTableRowAction | "separator">;
+    label?: string;
+    className?: string;
+}
+export declare function DataTableRowActions({ actions, label, className, }: DataTableRowActionsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-table/data-table-row-actions.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** The "…" menu at the end of a row. Items are data, so agents and tests can read them. */
+import { MoreHorizontal } from "lucide-react";
+import { Button, cn } from "@iloveagents/foundry-web-primitives";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "../../ui/dropdown-menu.js";
+export function DataTableRowActions({ actions, label = "Open menu", className, }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", "data-no-row-click": "", className: cn("size-8 rounded-lg p-0 data-[state=open]:bg-accent", className), children: [_jsx(MoreHorizontal, { className: "size-4" }), _jsx("span", { className: "sr-only", children: label })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-44 rounded-xl border-border/45 bg-popover/95 shadow-lg", children: actions.map((action, index) => action === "separator" ? (_jsx(DropdownMenuSeparator, {}, `sep-${index}`)) : (_jsxs(DropdownMenuItem, { disabled: action.disabled, onClick: (event) => {
+                        event.stopPropagation();
+                        action.onSelect();
+                    }, className: cn(action.destructive && "text-destructive focus:text-destructive"), children: [action.icon ? _jsx(action.icon, { className: "size-4 text-muted-foreground" }) : null, action.label] }, action.label))) })] }));
+}

package/dist/components/data-table/data-table-toolbar.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Search + facets + Reset on the left, actions + View menu on the right.
+ * Facets are declared by column id; everything else is read off the table.
+ */
+import type { Table } from "@tanstack/react-table";
+import type { ReactNode } from "react";
+import type { DataTableFacetOption } from "./facets.js";
+export interface DataTableFacet {
+    columnId: string;
+    title?: string;
+    options?: DataTableFacetOption[];
+}
+export interface DataTableToolbarProps<T> {
+    table: Table<T>;
+    facets?: DataTableFacet[];
+    searchPlaceholder?: string;
+    /** Hide the search box. */
+    search?: boolean;
+    /** Hide the View (column visibility) menu. */
+    viewOptions?: boolean;
+    /** Extra controls rendered next to the facets (left side). */
+    children?: ReactNode;
+    /** Controls rendered on the right, before the View menu. */
+    actions?: ReactNode;
+    className?: string;
+}
+export declare function DataTableToolbar<T>({ table, facets, searchPlaceholder, search, viewOptions, children, actions, className, }: DataTableToolbarProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-table/data-table-toolbar.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search, X } from "lucide-react";
+import { Button, Input, cn } from "@iloveagents/foundry-web-primitives";
+import { DataTableFacetedFilter } from "./data-table-faceted-filter.js";
+import { DataTableViewOptions } from "./data-table-view-options.js";
+export function DataTableToolbar({ table, facets = [], searchPlaceholder = "Search…", search = true, viewOptions = true, children, actions, className, }) {
+    const state = table.getState();
+    const isFiltered = state.columnFilters.length > 0 || Boolean(state.globalFilter);
+    return (_jsxs("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [search ? (_jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { type: "search", value: state.globalFilter ?? "", onChange: (event) => table.setGlobalFilter(event.target.value), placeholder: searchPlaceholder, "aria-label": searchPlaceholder, className: "h-8 w-[160px] rounded-xl border-border/45 bg-background/72 pl-8 text-sm shadow-none lg:w-[250px]" })] })) : null, facets.map((facet) => {
+                const column = table.getColumn(facet.columnId);
+                if (!column)
+                    return null;
+                return (_jsx(DataTableFacetedFilter, { column: column, title: facet.title, options: facet.options }, facet.columnId));
+            }), children, isFiltered ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                    table.resetColumnFilters();
+                    table.setGlobalFilter("");
+                }, className: "h-8 rounded-xl px-2.5", children: ["Reset", _jsx(X, { className: "size-4" })] })) : null, actions || viewOptions ? (_jsxs("div", { className: "ml-auto flex items-center gap-2", children: [actions, viewOptions ? _jsx(DataTableViewOptions, { table: table }) : null] })) : null] }));
+}

package/dist/components/data-table/data-table-view-options.d.ts

@@ -0,0 +1,7 @@
+/** The "View" menu: toggle column visibility. */
+import type { Table } from "@tanstack/react-table";
+export interface DataTableViewOptionsProps<T> {
+    table: Table<T>;
+    className?: string;
+}
+export declare function DataTableViewOptions<T>({ table, className }: DataTableViewOptionsProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/data-table/data-table-view-options.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Settings2 } from "lucide-react";
+import { Button, cn } from "@iloveagents/foundry-web-primitives";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../../ui/dropdown-menu.js";
+import { columnLabel } from "./facets.js";
+export function DataTableViewOptions({ table, className }) {
+    const columns = table.getAllLeafColumns().filter((column) => column.getCanHide());
+    if (!columns.length)
+        return null;
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: cn("h-8 rounded-xl border-border/45 bg-background/65 shadow-none hover:bg-muted/26", className), children: [_jsx(Settings2, { className: "size-4" }), "View"] }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-48 rounded-xl border-border/45 bg-popover/95 shadow-lg", children: [_jsx(DropdownMenuLabel, { children: "Toggle columns" }), _jsx(DropdownMenuSeparator, {}), columns.map((column) => (_jsx(DropdownMenuCheckboxItem, { checked: column.getIsVisible(), onCheckedChange: (checked) => column.toggleVisibility(Boolean(checked)), onSelect: (event) => event.preventDefault(), className: "capitalize", children: columnLabel(column) }, column.id)))] })] }));
+}

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

@@ -0,0 +1,25 @@
+/**
+ * The grid. Renders whatever a `useDataTable` instance says: header groups,
+ * flat rows, or group header rows with their expanded children. Row clicks
+ * ignore interactive descendants so a selection checkbox or a row menu
+ * never doubles as "open".
+ */
+import { type Row, type Table } from "@tanstack/react-table";
+import type { KeyboardEvent, MouseEvent, ReactNode } from "react";
+export interface DataTableProps<T> {
+    table: Table<T>;
+    onRowClick?: (row: Row<T>, event: MouseEvent | KeyboardEvent) => void;
+    /** The row whose details are open elsewhere (drawer, panel) — highlighted, `aria-current`. */
+    activeRowId?: string | null;
+    rowClassName?: (row: Row<T>) => string | undefined;
+    /** Content of a group header row (default: label and count). */
+    renderGroup?: (row: Row<T>) => ReactNode;
+    /** Declared order of group keys; unknown keys follow in data order. */
+    groupOrder?: string[];
+    emptyState?: ReactNode;
+    stickyHeader?: boolean;
+    dense?: boolean;
+    className?: string;
+    "aria-label"?: string;
+}
+export declare function DataTable<T>({ table, onRowClick, activeRowId, rowClassName, renderGroup, groupOrder, emptyState, stickyHeader, dense, className, "aria-label": ariaLabel, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-table/data-table.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The grid. Renders whatever a `useDataTable` instance says: header groups,
+ * flat rows, or group header rows with their expanded children. Row clicks
+ * ignore interactive descendants so a selection checkbox or a row menu
+ * never doubles as "open".
+ */
+import { flexRender } from "@tanstack/react-table";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+const INTERACTIVE = "a, button, input, select, textarea, [role='menuitem'], [data-no-row-click]";
+function orderedRows(table, groupOrder) {
+    const rows = table.getRowModel().rows;
+    if (!table.getState().grouping.length)
+        return rows;
+    const top = rows.filter((row) => row.depth === 0);
+    const rank = new Map((groupOrder ?? []).map((key, index) => [key, index]));
+    const sorted = groupOrder
+        ? [...top].sort((a, b) => {
+            const ra = rank.get(String(a.groupingValue ?? "")) ?? Number.MAX_SAFE_INTEGER;
+            const rb = rank.get(String(b.groupingValue ?? "")) ?? Number.MAX_SAFE_INTEGER;
+            return ra - rb;
+        })
+        : top;
+    return sorted.flatMap((row) => row.getIsGrouped() && row.getIsExpanded() ? [row, ...row.subRows] : [row]);
+}
+export function DataTable({ table, onRowClick, activeRowId, rowClassName, renderGroup, groupOrder, emptyState = "No results.", stickyHeader = false, dense = false, className, "aria-label": ariaLabel, }) {
+    const rows = orderedRows(table, groupOrder);
+    const columnCount = table.getVisibleLeafColumns().length;
+    const cellPad = dense ? "px-3 py-1.5" : "px-3 py-2.5";
+    const activate = (row, event) => {
+        if (!onRowClick)
+            return;
+        const target = event.target;
+        if (target?.closest(INTERACTIVE))
+            return;
+        onRowClick(row, event);
+    };
+    return (_jsx("div", { className: cn("overflow-hidden rounded-2xl border border-border/45 bg-card/60", className), children: _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full caption-bottom text-sm", "aria-label": ariaLabel, children: [_jsx("thead", { className: cn(stickyHeader && "sticky top-0 z-10 bg-card"), children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { className: "border-b border-border/45", children: headerGroup.headers.map((header) => {
+                                const meta = header.column.columnDef.meta;
+                                return (_jsx("th", { colSpan: header.colSpan, scope: "col", style: header.getSize() !== 150 ? { width: header.getSize() } : undefined, className: cn("h-10 px-3 text-left align-middle text-xs font-medium text-muted-foreground", meta?.align === "right" && "text-right", meta?.align === "center" && "text-center", meta?.headerClassName), children: header.isPlaceholder
+                                        ? null
+                                        : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                            }) }, headerGroup.id))) }), _jsx("tbody", { children: rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columnCount, className: "h-24 text-center text-sm text-muted-foreground", children: emptyState }) })) : (rows.map((row) => row.getIsGrouped() ? (_jsx("tr", { "data-group-row": "", className: "border-t border-border/45 bg-muted/35 text-sm font-medium", children: _jsx("td", { colSpan: columnCount, className: "px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: row.getToggleExpandedHandler(), "aria-expanded": row.getIsExpanded(), "aria-label": row.getIsExpanded() ? "Collapse group" : "Expand group", className: "rounded-md p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground", children: row.getIsExpanded() ? (_jsx(ChevronDown, { className: "size-4" })) : (_jsx(ChevronRight, { className: "size-4" })) }), _jsx("div", { className: "min-w-0 flex-1", children: renderGroup ? renderGroup(row) : _jsx(DefaultGroupLabel, { row: row }) })] }) }) }, row.id)) : (_jsx("tr", { "data-row-id": row.id, "data-state": row.getIsSelected() ? "selected" : undefined, "data-active": activeRowId != null && row.id === activeRowId ? "" : undefined, "aria-current": activeRowId != null && row.id === activeRowId ? "true" : undefined, "aria-selected": row.getIsSelected() || undefined, tabIndex: onRowClick ? 0 : undefined, onClick: (event) => activate(row, event), onKeyDown: (event) => {
+                                if (event.key === "Enter" || event.key === " ") {
+                                    if (event.target.closest(INTERACTIVE))
+                                        return;
+                                    event.preventDefault();
+                                    activate(row, event);
+                                }
+                            }, className: cn("border-t border-border/35 transition-colors", onRowClick &&
+                                "cursor-pointer hover:bg-muted/30 focus-visible:bg-muted/30 focus-visible:outline-none", "data-[state=selected]:bg-primary/6 data-[active]:bg-primary/8", rowClassName?.(row)), children: row.getVisibleCells().map((cell) => {
+                                const meta = cell.column.columnDef.meta;
+                                return (_jsx("td", { className: cn(cellPad, "align-middle", meta?.align === "right" && "text-right", meta?.align === "center" && "text-center", meta?.className), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                            }) }, row.id)))) })] }) }) }));
+}
+function DefaultGroupLabel({ row }) {
+    const grouping = row
+        .getAllCells()
+        .map((cell) => cell.column)
+        .find((column) => column.getIsGrouped());
+    const key = String(row.groupingValue ?? "");
+    const label = grouping ? (grouping.columnDef.meta?.facetLabels?.[key] ?? key) : key;
+    return (_jsxs("span", { children: [label || "None", " ", _jsxs("span", { className: "font-normal text-muted-foreground", children: ["(", row.subRows.length, ")"] })] }));
+}

package/dist/components/data-table/facets.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Facet semantics shared by every DataTable: how a cell value turns into
+ * facet keys, how a facet filter matches (OR within one facet — the table
+ * ANDs facets together), and how option counts are derived from the rows
+ * that every *other* filter lets through (TanStack's faceted row model), so
+ * a count always reads "rows you'd see if you added this option".
+ */
+import type { Column, FilterFn, Row, RowData } from "@tanstack/react-table";
+import type { ComponentType } from "react";
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /** Label for the View menu, facet titles and agent descriptions (defaults to a string header, then the id). */
+        label?: string;
+        /** Class for body cells of this column. */
+        className?: string;
+        /** Class for the header cell of this column. */
+        headerClassName?: string;
+        /** Horizontal alignment of header and cells. */
+        align?: "left" | "center" | "right";
+        /** Text the global search sees for this column instead of the cell value. */
+        searchText?: (row: TData) => string;
+        /** Labels for facet keys and group headers (`value → label`). */
+        facetLabels?: Record<string, string>;
+        /** Keep unused type parameter referenced for declaration merging. */
+        __cellValue?: TValue;
+        /** Hosts may carry their own keys in `meta` (e.g. a server sort key). */
+        [key: string]: unknown;
+    }
+}
+/** Facet key for empty cells (`null`, `undefined`, `""`, `[]`). */
+export declare const FACET_EMPTY = "__none__";
+export interface DataTableFacetOption {
+    value: string;
+    label: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+}
+export interface DataTableFacetCount extends DataTableFacetOption {
+    count: number;
+}
+/**
+ * Keys a cell value contributes to a facet — arrays contribute one key per
+ * element. A real value that spells the empty sentinel is escaped with a
+ * leading backslash so it never masquerades as "no value".
+ */
+export declare function facetKeys(value: unknown): string[];
+/** A facet filter value is a list of selected keys; anything else means "no filter". */
+export declare function normalizeFacetValue(filterValue: unknown): string[];
+/**
+ * OR within a facet: a row passes when any of its keys is selected. Typed
+ * loosely so `filterFn: facetFilterFn` fits any row type; `useDataTable`
+ * also registers it as the string `"facet"` for untyped (JSX) columns.
+ */
+export declare const facetFilterFn: FilterFn<any>;
+/** Rows per facet key, counted over the rows every OTHER filter lets through. */
+export declare function facetCounts<T>(column: Column<T, unknown>): Map<string, number>;
+export interface FacetOptionsOptions {
+    /** Label for keys that are neither declared nor in `meta.facetLabels`. */
+    labelFor?: (key: string) => string;
+    /** Label for the empty-cell option (default "None"). */
+    emptyLabel?: string;
+}
+/**
+ * Declared options first (in declared order, kept even at count 0), then
+ * every undeclared key seen in the data, then the empty option when some
+ * rows have no value.
+ */
+export declare function facetOptions<T>(column: Column<T, unknown>, declared?: DataTableFacetOption[], options?: FacetOptionsOptions): DataTableFacetCount[];
+/** Plain-text projection of a cell value for search and agent read-outs. */
+export declare function cellText(value: unknown): string;
+/**
+ * Lower-cased text of every searchable cell of a row. Cached per row object
+ * and invalidated when the row's cells change identity (new columns or a
+ * changed `meta.searchText`), since TanStack keeps row objects across
+ * column changes.
+ */
+export declare function rowSearchText<T>(row: Row<T>): string;
+/** Every whitespace-separated token must appear somewhere in the row (AND across tokens). */
+export declare const tokenSearchFilterFn: FilterFn<any>;
+/** Human label of a column: `meta.label`, then a string header, then the id. */
+export declare function columnLabel<T>(column: Column<T, unknown>): string;