@iloveagents/foundry-web-ui 0.17.0 → 0.19.0

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

@@ -11,6 +11,8 @@ export interface DataTableFacetedFilterProps<T> {
     options?: DataTableFacetOption[];
     /** Show a search box inside the list once there are more options than this (default 7). */
     searchableFrom?: number;
+    /** Called when the popover closes with nothing selected (a revealed facet goes back into the menu). */
+    onEmptyClose?: () => void;
     className?: string;
 }
-export declare function DataTableFacetedFilter<T>({ column, title, options: declared, searchableFrom, className, }: DataTableFacetedFilterProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableFacetedFilter<T>({ column, title, options: declared, searchableFrom, onEmptyClose, className, }: DataTableFacetedFilterProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,7 @@ 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, }) {
+export function DataTableFacetedFilter({ column, title, options: declared, searchableFrom = 7, onEmptyClose, className, }) {
     const [query, setQuery] = useState("");
     const label = title ?? columnLabel(column);
     const selected = normalizeFacetValue(column.getFilterValue());
@@ -20,9 +20,15 @@ export function DataTableFacetedFilter({ column, title, options: declared, searc
             : [...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) => {
+    return (_jsxs(Popover, { onOpenChange: (open) => {
+            if (open)
+                return;
+            setQuery("");
+            if (normalizeFacetValue(column.getFilterValue()).length === 0)
+                onEmptyClose?.();
+        }, 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" }), selected.length > 2 ? (_jsxs("span", { className: "rounded-md bg-muted px-1.5 py-0.5 text-xs font-normal tabular-nums", children: [_jsx("span", { "aria-hidden": "true", children: selected.length }), _jsxs("span", { className: "sr-only", children: [selected.length, " selected"] })] })) : (options
+                                    .filter((option) => selectedSet.has(option.value))
+                                    .map((option) => (_jsx("span", { title: option.label, className: "max-w-[8rem] truncate 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

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

@@ -0,0 +1,20 @@
+/**
+ * The frame around a list: normally a plain container, in focus mode a
+ * fullscreen layer (Escape leaves it). `DataTableToolbar` shows the focus
+ * button whenever it renders inside a frame — users with wide lists get a
+ * way out of a cramped page without the host doing anything.
+ */
+import { type HTMLAttributes, type ReactNode } from "react";
+export interface DataTableFrameContextValue {
+    focused: boolean;
+    setFocused: (focused: boolean) => void;
+}
+/** The enclosing frame's focus state, or `null` outside a frame. */
+export declare function useDataTableFrame(): DataTableFrameContextValue | null;
+export interface DataTableFrameProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    children: ReactNode;
+    /** Classes applied in focus mode on top of the fullscreen layer. */
+    focusClassName?: string;
+    defaultFocused?: boolean;
+}
+export declare function DataTableFrame({ children, className, focusClassName, defaultFocused, ...rest }: DataTableFrameProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The frame around a list: normally a plain container, in focus mode a
+ * fullscreen layer (Escape leaves it). `DataTableToolbar` shows the focus
+ * button whenever it renders inside a frame — users with wide lists get a
+ * way out of a cramped page without the host doing anything.
+ */
+import { createContext, useContext, useEffect, useMemo, useState, } from "react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+const DataTableFrameContext = createContext(null);
+/** The enclosing frame's focus state, or `null` outside a frame. */
+export function useDataTableFrame() {
+    return useContext(DataTableFrameContext);
+}
+export function DataTableFrame({ children, className, focusClassName, defaultFocused = false, ...rest }) {
+    const [focused, setFocused] = useState(defaultFocused);
+    useEffect(() => {
+        if (!focused)
+            return;
+        const onKeyDown = (event) => {
+            if (event.key === "Escape")
+                setFocused(false);
+        };
+        document.addEventListener("keydown", onKeyDown);
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.removeEventListener("keydown", onKeyDown);
+            document.body.style.overflow = previousOverflow;
+        };
+    }, [focused]);
+    const value = useMemo(() => ({ focused, setFocused }), [focused]);
+    return (_jsx(DataTableFrameContext.Provider, { value: value, children: _jsx("div", { ...rest, "data-focused": focused ? "" : undefined, className: focused
+                ? cn("fixed inset-0 z-50 flex flex-col gap-3 overflow-auto bg-background p-4 sm:p-6", focusClassName)
+                : className, children: children }) }));
+}

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

@@ -1,27 +1,60 @@
 /**
- * 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.
+ * Two bands, so a list with many filters still reads as ordered rather than
+ * as a ragged wrap:
+ *
+ *   row 1   search …………………………………… Filters (n) · actions · View · ⤢
+ *   row 2   facet · facet · facet · + Filter · Reset
+ *
+ * Row one never wraps (its right group is fixed); filters live on their own
+ * row, and only the *pinned* facets (explicit `pinned`, else the first
+ * `pinnedFacets`) sit there — the rest wait behind "+ Filter" and join once
+ * chosen or active. On a dense, Excel-like screen the filter row collapses
+ * behind the "Filters" toggle, which keeps the active count visible.
+ *
+ * `layout="inline"` puts everything back on one wrapping row (a small list
+ * with one or two facets and no actions).
  */
 import type { Table } from "@tanstack/react-table";
-import type { ReactNode } from "react";
-import type { DataTableFacetOption } from "./facets.js";
+import { type ReactNode } from "react";
+import { type DataTableFacetOption } from "./facets.js";
 export interface DataTableFacet {
     columnId: string;
     title?: string;
     options?: DataTableFacetOption[];
+    /** Always show this facet; unset → the first `pinnedFacets` are pinned. */
+    pinned?: boolean;
 }
+export type DataTableToolbarLayout = "auto" | "inline" | "stacked";
 export interface DataTableToolbarProps<T> {
     table: Table<T>;
     facets?: DataTableFacet[];
+    /**
+     * "auto" (default): filters get their own row as soon as there are facets;
+     * "stacked": always; "inline": one wrapping row.
+     */
+    layout?: DataTableToolbarLayout;
+    /** Show the Filters toggle that hides the filter row (default true when stacked). */
+    collapsibleFilters?: boolean;
+    /** Whether the filter row starts open (default `true`; when closed the toggle still shows the active count). */
+    defaultFiltersOpen?: boolean;
+    /** Facets always visible when none declares `pinned` (default 3; `Infinity` shows all). */
+    pinnedFacets?: number;
     searchPlaceholder?: string;
     /** Hide the search box. */
     search?: boolean;
     /** Hide the View (column visibility) menu. */
     viewOptions?: boolean;
+    /** Hide the focus (fullscreen) button that appears inside a `DataTableFrame`. */
+    focus?: 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;
+/** Which facets render as buttons: pinned ones, revealed ones, and any with a value. */
+export declare function visibleFacets<T>(table: Table<T>, facets: DataTableFacet[], revealed: ReadonlySet<string>, pinnedFacets: number): {
+    shown: DataTableFacet[];
+    hidden: DataTableFacet[];
+};
+export declare function DataTableToolbar<T>({ table, facets, layout, collapsibleFilters, defaultFiltersOpen, pinnedFacets, searchPlaceholder, search, viewOptions, focus, children, actions, className, }: DataTableToolbarProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,18 +1,68 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Search, X } from "lucide-react";
+import { Maximize2, Minimize2, Plus, Search, SlidersHorizontal, X } from "lucide-react";
+import { useState } from "react";
 import { Button, Input, cn } from "@iloveagents/foundry-web-primitives";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "../../ui/dropdown-menu.js";
 import { DataTableFacetedFilter } from "./data-table-faceted-filter.js";
+import { useDataTableFrame } from "./data-table-frame.js";
 import { DataTableViewOptions } from "./data-table-view-options.js";
-export function DataTableToolbar({ table, facets = [], searchPlaceholder = "Search…", search = true, viewOptions = true, children, actions, className, }) {
+import { columnLabel, normalizeFacetValue } from "./facets.js";
+/** Which facets render as buttons: pinned ones, revealed ones, and any with a value. */
+export function visibleFacets(table, facets, revealed, pinnedFacets) {
+    const explicit = facets.some((facet) => facet.pinned !== undefined);
+    const shown = [];
+    const hidden = [];
+    facets.forEach((facet, index) => {
+        const column = table.getColumn(facet.columnId);
+        if (!column)
+            return;
+        const pinned = explicit ? facet.pinned === true : index < pinnedFacets;
+        const active = normalizeFacetValue(column.getFilterValue()).length > 0;
+        (pinned || active || revealed.has(facet.columnId) ? shown : hidden).push(facet);
+    });
+    return { shown, hidden };
+}
+export function DataTableToolbar({ table, facets = [], layout = "auto", collapsibleFilters, defaultFiltersOpen = true, pinnedFacets = 3, searchPlaceholder = "Search…", search = true, viewOptions = true, focus = true, children, actions, className, }) {
+    const [revealed, setRevealed] = useState(() => new Set());
+    const [filtersOpen, setFiltersOpen] = useState(defaultFiltersOpen);
+    const frame = useDataTableFrame();
+    const focusButton = focus && frame ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", "aria-pressed": frame.focused, "aria-label": frame.focused ? "Leave focus mode" : "Focus on the list", title: frame.focused ? "Leave focus mode (Esc)" : "Focus on the list", onClick: () => frame.setFocused(!frame.focused), className: "size-8 rounded-xl border-border/45 bg-background/65 p-0 shadow-none hover:bg-muted/26", children: frame.focused ? _jsx(Minimize2, { className: "size-4" }) : _jsx(Maximize2, { className: "size-4" }) })) : null;
     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] }));
+    const isFiltered = state.columnFilters.length > 0 || Boolean(state.globalFilter) || revealed.size > 0;
+    const { shown, hidden } = visibleFacets(table, facets, revealed, pinnedFacets);
+    // `children` alone (extra controls, no facets) is not a reason to open a
+    // second band — it rides in the filter row only when there is one.
+    const stacked = layout === "stacked" || (layout === "auto" && facets.length > 0);
+    const canCollapse = stacked && (collapsibleFilters ?? true);
+    const activeFilters = state.columnFilters.length;
+    const showFilters = !canCollapse || filtersOpen;
+    const facetTitle = (facet) => {
+        const column = table.getColumn(facet.columnId);
+        return facet.title ?? (column ? columnLabel(column) : facet.columnId);
+    };
+    const searchNode = 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;
+    const facetNodes = shown.map((facet) => {
+        const column = table.getColumn(facet.columnId);
+        if (!column)
+            return null;
+        return (_jsx(DataTableFacetedFilter, { column: column, title: facet.title, options: facet.options, onEmptyClose: revealed.has(facet.columnId)
+                ? () => setRevealed((current) => {
+                    const next = new Set(current);
+                    next.delete(facet.columnId);
+                    return next;
+                })
+                : undefined }, facet.columnId));
+    });
+    const addFilterNode = hidden.length > 0 ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", "data-facet-menu": "", className: "h-8 rounded-xl px-2.5 text-muted-foreground hover:text-foreground", children: [_jsx(Plus, { className: "size-4" }), "Filter"] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "w-48 rounded-xl border-border/45 bg-popover/95 shadow-lg", children: [_jsx(DropdownMenuLabel, { children: "Filter by" }), _jsx(DropdownMenuSeparator, {}), hidden.map((facet) => (_jsx(DropdownMenuItem, { "data-facet-menu-item": facet.columnId, onSelect: () => setRevealed((current) => new Set([...current, facet.columnId])), children: facetTitle(facet) }, facet.columnId)))] })] })) : null;
+    const resetNode = isFiltered ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+            table.resetColumnFilters();
+            table.setGlobalFilter("");
+            setRevealed(new Set());
+        }, className: "h-8 rounded-xl px-2.5", children: ["Reset", _jsx(X, { className: "size-4" })] })) : null;
+    const filtersToggle = canCollapse ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", "data-filters-toggle": "", "aria-expanded": showFilters, onClick: () => setFiltersOpen((current) => !current), className: cn("h-8 rounded-xl border-border/45 bg-background/65 shadow-none hover:bg-muted/26", activeFilters > 0 && "border-primary/30"), children: [_jsx(SlidersHorizontal, { className: "size-4" }), "Filters", activeFilters > 0 ? (_jsxs("span", { className: "rounded-md bg-muted px-1.5 py-0.5 text-xs font-normal tabular-nums", children: [_jsx("span", { "aria-hidden": "true", children: activeFilters }), _jsxs("span", { className: "sr-only", children: [activeFilters, " active"] })] })) : null] })) : null;
+    const rightGroup = actions || viewOptions || focusButton || filtersToggle ? (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [filtersToggle, actions, viewOptions ? _jsx(DataTableViewOptions, { table: table }) : null, focusButton] })) : null;
+    if (!stacked) {
+        return (_jsxs("div", { className: cn("flex items-start gap-2", className), children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-2", children: [searchNode, facetNodes, addFilterNode, children, resetNode] }), rightGroup ? _jsx("div", { className: "ml-auto", children: rightGroup }) : null] }));
+    }
+    return (_jsxs("div", { className: cn("flex flex-col gap-2", className), children: [_jsxs("div", { className: "flex items-center gap-2", children: [searchNode, rightGroup ? _jsx("div", { className: "ml-auto", children: rightGroup }) : null] }), showFilters ? (_jsxs("div", { "data-filter-row": "", className: "flex flex-wrap items-center gap-2", children: [facetNodes, addFilterNode, children, resetNode] })) : null] }));
 }

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

@@ -9,6 +9,15 @@ 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]";
+/** Literal classes so Tailwind generates them: hide the column below the breakpoint. */
+const BREAKPOINT_CLASS = {
+    sm: "max-sm:hidden",
+    md: "max-md:hidden",
+    lg: "max-lg:hidden",
+    xl: "max-xl:hidden",
+    "2xl": "max-2xl:hidden",
+};
+const breakpointClass = (breakpoint) => breakpoint ? BREAKPOINT_CLASS[breakpoint] : undefined;
 function orderedRows(table, groupOrder) {
     const rows = table.getRowModel().rows;
     if (!table.getState().grouping.length)
@@ -38,7 +47,7 @@ export function DataTable({ table, onRowClick, activeRowId, rowClassName, render
     };
     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
+                                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", breakpointClass(meta?.breakpoint), 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) => {
@@ -51,7 +60,7 @@ export function DataTable({ table, onRowClick, activeRowId, rowClassName, render
                             }, 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));
+                                return (_jsx("td", { className: cn(cellPad, "align-middle", meta?.align === "right" && "text-right", meta?.align === "center" && "text-center", breakpointClass(meta?.breakpoint), meta?.className), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
                             }) }, row.id)))) })] }) }) }));
 }
 function DefaultGroupLabel({ row }) {

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

@@ -21,12 +21,16 @@ declare module "@tanstack/react-table" {
         searchText?: (row: TData) => string;
         /** Labels for facet keys and group headers (`value → label`). */
         facetLabels?: Record<string, string>;
+        /** Smallest viewport the column is shown at; below it the column is hidden (the View menu can still force it). */
+        breakpoint?: DataTableBreakpoint;
         /** 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;
     }
 }
+/** Tailwind breakpoints a column can be gated on. */
+export type DataTableBreakpoint = "sm" | "md" | "lg" | "xl" | "2xl";
 /** Facet key for empty cells (`null`, `undefined`, `""`, `[]`). */
 export declare const FACET_EMPTY = "__none__";
 export interface DataTableFacetOption {

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

@@ -19,8 +19,11 @@ export interface DataTableState {
 }
 export declare const DEFAULT_PAGE_SIZE = 20;
 export declare const EMPTY_DATA_TABLE_STATE: DataTableState;
-export declare function isDataTableUrlKey(key: string): boolean;
+/** `prefix` namespaces every key (`risks.q`, `risks.f_status`) so two lists can share a page. */
+export declare function isDataTableUrlKey(key: string, prefix?: string): boolean;
 export interface DataTableUrlOptions {
+    /** Key namespace for pages with several lists (`"risks."` → `risks.q`, `risks.f_status`). */
+    prefix?: string;
     /** Page size that is implied when `size` is absent (default 20). */
     defaultPageSize?: number;
     /**

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

@@ -9,9 +9,13 @@ export const EMPTY_DATA_TABLE_STATE = {
     expanded: true,
 };
 const FILTER_PREFIX = "f_";
-const OWN_KEYS = new Set(["q", "sort", "hide", "page", "size"]);
-export function isDataTableUrlKey(key) {
-    return OWN_KEYS.has(key) || key.startsWith(FILTER_PREFIX);
+const OWN_KEYS = ["q", "sort", "hide", "page", "size"];
+/** `prefix` namespaces every key (`risks.q`, `risks.f_status`) so two lists can share a page. */
+export function isDataTableUrlKey(key, prefix = "") {
+    if (!key.startsWith(prefix))
+        return false;
+    const bare = key.slice(prefix.length);
+    return OWN_KEYS.includes(bare) || bare.startsWith(FILTER_PREFIX);
 }
 function encodePart(value) {
     return value.replace(/%/g, "%25").replace(/,/g, "%2C");
@@ -48,12 +52,13 @@ function hiddenKey(visibility) {
  */
 export function serializeDataTableState(state, options) {
     const defaults = options?.defaults ?? {};
+    const prefix = options?.prefix ?? "";
     const params = new URLSearchParams();
     if (state.globalFilter !== undefined && state.globalFilter !== (defaults.globalFilter ?? "")) {
-        params.set("q", state.globalFilter);
+        params.set(`${prefix}q`, state.globalFilter);
     }
     if (state.sorting !== undefined && sortKey(state.sorting) !== sortKey(defaults.sorting)) {
-        params.set("sort", sortKey(state.sorting));
+        params.set(`${prefix}sort`, sortKey(state.sorting));
     }
     if (state.columnFilters !== undefined) {
         const current = new Map(state.columnFilters.map((f) => [f.id, filterValues(f.value).map(encodePart).join(",")]));
@@ -64,29 +69,32 @@ export function serializeDataTableState(state, options) {
         for (const id of new Set([...current.keys(), ...base.keys()])) {
             const value = current.get(id) ?? "";
             if (value !== (base.get(id) ?? ""))
-                params.set(`${FILTER_PREFIX}${id}`, value);
+                params.set(`${prefix}${FILTER_PREFIX}${id}`, value);
         }
     }
     if (state.columnVisibility !== undefined &&
         hiddenKey(state.columnVisibility) !== hiddenKey(defaults.columnVisibility)) {
-        params.set("hide", hiddenKey(state.columnVisibility));
+        params.set(`${prefix}hide`, hiddenKey(state.columnVisibility));
     }
     const pagination = state.pagination;
     if (pagination) {
         const defaultIndex = defaults.pagination?.pageIndex ?? 0;
-        if (pagination.pageIndex !== defaultIndex)
-            params.set("page", String(pagination.pageIndex + 1));
+        if (pagination.pageIndex !== defaultIndex) {
+            params.set(`${prefix}page`, String(pagination.pageIndex + 1));
+        }
         const defaultSize = options?.defaultPageSize ?? defaults.pagination?.pageSize ?? DEFAULT_PAGE_SIZE;
         if (pagination.pageSize !== defaultSize)
-            params.set("size", String(pagination.pageSize));
+            params.set(`${prefix}size`, String(pagination.pageSize));
     }
     return params;
 }
 /** Parse a URL into a full state; `defaults` fill what the URL doesn't say. */
 export function parseDataTableState(params, options) {
     const defaults = { ...EMPTY_DATA_TABLE_STATE, ...options?.defaults };
+    const prefix = options?.prefix ?? "";
+    const filterPrefix = `${prefix}${FILTER_PREFIX}`;
     const defaultSize = options?.defaultPageSize ?? defaults.pagination.pageSize;
-    const sortRaw = params.get("sort");
+    const sortRaw = params.get(`${prefix}sort`);
     const sorting = sortRaw == null
         ? defaults.sorting
         : sortRaw
@@ -97,9 +105,9 @@ export function parseDataTableState(params, options) {
             : { id: decodePart(part), desc: false });
     const filtersById = new Map(defaults.columnFilters.map((filter) => [filter.id, filter]));
     for (const [key, raw] of params.entries()) {
-        if (!key.startsWith(FILTER_PREFIX))
+        if (!key.startsWith(filterPrefix))
             continue;
-        const id = key.slice(FILTER_PREFIX.length);
+        const id = key.slice(filterPrefix.length);
         const values = raw.split(",").filter(Boolean).map(decodePart);
         if (values.length)
             filtersById.set(id, { id, value: values });
@@ -108,7 +116,7 @@ export function parseDataTableState(params, options) {
     }
     const columnFilters = Array.from(filtersById.values());
     const columnVisibility = { ...defaults.columnVisibility };
-    const hideRaw = params.get("hide");
+    const hideRaw = params.get(`${prefix}hide`);
     if (hideRaw != null) {
         for (const id of Object.keys(columnVisibility)) {
             if (columnVisibility[id] === false)
@@ -117,12 +125,14 @@ export function parseDataTableState(params, options) {
         for (const id of hideRaw.split(",").filter(Boolean).map(decodePart))
             columnVisibility[id] = false;
     }
-    const pageRaw = params.get("page");
+    const pageRaw = params.get(`${prefix}page`);
     const page = Number.parseInt(pageRaw ?? "", 10);
-    const size = Number.parseInt(params.get("size") ?? "", 10);
+    const size = Number.parseInt(params.get(`${prefix}size`) ?? "", 10);
     return {
         ...defaults,
-        globalFilter: params.has("q") ? (params.get("q") ?? "") : defaults.globalFilter,
+        globalFilter: params.has(`${prefix}q`)
+            ? (params.get(`${prefix}q`) ?? "")
+            : defaults.globalFilter,
         sorting,
         columnFilters,
         columnVisibility,
@@ -139,9 +149,10 @@ export function parseDataTableState(params, options) {
 /** Replace this table's keys in `params`, leaving every other key untouched. */
 export function mergeDataTableUrlState(params, state, options) {
     const next = new URLSearchParams();
-    for (const [key, value] of params.entries())
-        if (!isDataTableUrlKey(key))
+    for (const [key, value] of params.entries()) {
+        if (!isDataTableUrlKey(key, options?.prefix))
             next.append(key, value);
+    }
     for (const [key, value] of serializeDataTableState(state, options).entries())
         next.set(key, value);
     return next;

package/dist/index.d.ts

@@ -34,7 +34,8 @@ export { CollectionSkeleton } from "./components/collection-skeleton.js";
 export { InfiniteScrollSentinel } from "./components/infinite-scroll-sentinel.js";
 export { CollectionSurface } from "./components/collection-surface.js";
 export { DataTable, type DataTableProps } from "./components/data-table/data-table.js";
-export { DataTableToolbar, type DataTableFacet, type DataTableToolbarProps, } from "./components/data-table/data-table-toolbar.js";
+export { DataTableFrame, useDataTableFrame, type DataTableFrameProps, type DataTableFrameContextValue, } from "./components/data-table/data-table-frame.js";
+export { DataTableToolbar, visibleFacets, type DataTableFacet, type DataTableToolbarLayout, type DataTableToolbarProps, } from "./components/data-table/data-table-toolbar.js";
 export { DataTableFacetedFilter, type DataTableFacetedFilterProps, } from "./components/data-table/data-table-faceted-filter.js";
 export { DataTableViewOptions, type DataTableViewOptionsProps, } from "./components/data-table/data-table-view-options.js";
 export { DataTableColumnHeader, type DataTableColumnHeaderProps, } from "./components/data-table/data-table-column-header.js";
@@ -43,7 +44,7 @@ export { DataTableRowActions, type DataTableRowAction, type DataTableRowActionsP
 export { selectionColumn, SELECTION_COLUMN_ID } from "./components/data-table/selection-column.js";
 export { useDataTable, type UseDataTableOptions } from "./components/data-table/use-data-table.js";
 export { DEFAULT_PAGE_SIZE, EMPTY_DATA_TABLE_STATE, isDataTableUrlKey, mergeDataTableUrlState, parseDataTableState, serializeDataTableState, type DataTableState, type DataTableUrlOptions, } from "./components/data-table/state.js";
-export { FACET_EMPTY, cellText, columnLabel, facetCounts, facetFilterFn, facetKeys, facetOptions, normalizeFacetValue, rowSearchText, tokenSearchFilterFn, type DataTableFacetCount, type DataTableFacetOption, } from "./components/data-table/facets.js";
+export { FACET_EMPTY, cellText, columnLabel, facetCounts, facetFilterFn, facetKeys, facetOptions, normalizeFacetValue, rowSearchText, tokenSearchFilterFn, type DataTableBreakpoint, type DataTableFacetCount, type DataTableFacetOption, } from "./components/data-table/facets.js";
 export { createColumnHelper, flexRender, type Column, type ColumnDef, type ColumnFiltersState, type Row, type RowSelectionState, type SortingState, type Table, type VisibilityState, } from "@tanstack/react-table";
 export { ThemeRuntimeProvider, ThemeScope, ThemeDocumentMetadata, useThemeRuntime, } from "./components/theme-runtime-provider.js";
 export { JsonViewer } from "./components/json-viewer.js";

package/dist/index.js

@@ -32,7 +32,8 @@ export { CollectionSkeleton } from "./components/collection-skeleton.js";
 export { InfiniteScrollSentinel } from "./components/infinite-scroll-sentinel.js";
 export { CollectionSurface } from "./components/collection-surface.js";
 export { DataTable } from "./components/data-table/data-table.js";
-export { DataTableToolbar, } from "./components/data-table/data-table-toolbar.js";
+export { DataTableFrame, useDataTableFrame, } from "./components/data-table/data-table-frame.js";
+export { DataTableToolbar, visibleFacets, } from "./components/data-table/data-table-toolbar.js";
 export { DataTableFacetedFilter, } from "./components/data-table/data-table-faceted-filter.js";
 export { DataTableViewOptions, } from "./components/data-table/data-table-view-options.js";
 export { DataTableColumnHeader, } from "./components/data-table/data-table-column-header.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "license": "MIT",
   "description": "React agent UI core for Foundry UI — chat, composer, AG-UI adapter for assistant-ui, tool cards, panels, sidebar, theme runtime, and UI stores.",
   "keywords": [
@@ -71,8 +71,8 @@
     "react-markdown": "^10.0.0",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^3.5.0",
-    "@iloveagents/foundry-agent": "^0.17.0",
-    "@iloveagents/foundry-web-primitives": "^0.17.0"
+    "@iloveagents/foundry-agent": "^0.19.0",
+    "@iloveagents/foundry-web-primitives": "^0.19.0"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",