@iloveagents/foundry-web-ui 0.21.0 → 0.21.1

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

@@ -5,7 +5,8 @@
  * habit across the platform (and the same set the chat agent reads).
  */
 import type { Row, Table } from "@tanstack/react-table";
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
+export declare const SelectionBarSingleLine: import("react").Provider<boolean>;
 export interface DataTableSelectionBarProps<T> {
     table: Table<T>;
     /** Bulk actions for the selected rows. */

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

@@ -1,14 +1,34 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { X } from "lucide-react";
+import { createContext, useContext } from "react";
 import { Button, cn } from "@iloveagents/foundry-web-primitives";
+/**
+ * Whether the bar has a row to itself or shares one.
+ *
+ * The toolbar's non-stacked layout puts the bar on the SAME line as the
+ * search, in a region that scrolls sideways rather than growing — because a
+ * toolbar that gains height on the first tick shoves the table down under
+ * the cursor mid-click, which is the whole reason the bar moved into the
+ * toolbar. A bar that wraps internally defeats that just as thoroughly as
+ * one that wraps externally, and its nested actions container is a second
+ * place it can happen (review catch).
+ *
+ * The container knows the constraint and the bar owns the class names, so
+ * the policy travels between them instead of the toolbar reaching in with a
+ * descendant selector — which would apply to a host's own `selectionBar`
+ * node too, and lose to it on specificity besides.
+ */
+const SelectionBarSingleLineContext = createContext(false);
+export const SelectionBarSingleLine = SelectionBarSingleLineContext.Provider;
 export function DataTableSelectionBar({ table, children, label = "row", plural, className, }) {
     // Every selected row, not only the ones the current filter shows: a
     // selection the user cannot see is still a selection, and hiding the bar
     // would take away the only way to clear it.
     const rows = table.getSelectedRowModel().rows;
+    const singleLine = useContext(SelectionBarSingleLineContext);
     if (rows.length === 0)
         return null;
-    return (_jsxs("div", { "data-selection-bar": "", role: "status", className: cn("flex min-h-8 flex-wrap items-center gap-2 rounded-xl bg-primary/5 px-3 text-sm", className), children: [_jsxs("span", { className: "font-medium", children: [rows.length, " ", rows.length === 1 ? label : (plural ?? `${label}s`), " selected"] }), _jsx("div", { className: "flex flex-wrap items-center gap-2", children: typeof children === "function" ? children(rows) : children }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", 
+    return (_jsxs("div", { "data-selection-bar": "", role: "status", className: cn("flex min-h-8 items-center gap-2 rounded-xl bg-primary/5 px-3 text-sm", singleLine ? "flex-nowrap whitespace-nowrap" : "flex-wrap", className), children: [_jsxs("span", { className: "font-medium", children: [rows.length, " ", rows.length === 1 ? label : (plural ?? `${label}s`), " selected"] }), _jsx("div", { "data-selection-actions": "", className: cn("flex items-center gap-2", singleLine ? "flex-nowrap" : "flex-wrap"), children: typeof children === "function" ? children(rows) : children }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", 
                 // `true` = the blank state, not the caller's `initialState`, which
                 // would make "Clear" resurrect rows.
                 onClick: () => table.resetRowSelection(true), className: "ml-auto h-8 rounded-lg px-2.5", children: ["Clear", _jsx(X, { className: "size-4" })] })] }));

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

@@ -1,9 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 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 { SelectionBarSingleLine } from "./data-table-selection-bar.js";
 import { useDataTableFrame } from "./data-table-frame.js";
 import { DataTableViewOptions } from "./data-table-view-options.js";
 import { columnLabel, normalizeFacetValue } from "./facets.js";
@@ -75,7 +76,32 @@ export function DataTableToolbar({ table, facets = [], layout = "auto", collapsi
     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 flex-col gap-2", className), children: [_jsxs("div", { className: "flex items-start gap-2", 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] }), showSelectionBar ? _jsx("div", { "data-selection-row": "", children: selectionBar }) : null] }));
+        return (
+        // A stable hook for tests and hosts, rather than leaving them to
+        // match on Tailwind classes — a selector that silently stops
+        // matching is how an assertion starts passing for the wrong reason
+        // (review catch).
+        _jsx("div", { "data-slot": "data-table-toolbar", className: cn("flex flex-col gap-2", className), children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsxs("div", { "data-toolbar-lead": showSelectionBar ? "selection" : "filters", className: cn("flex min-w-0 flex-1 items-center gap-2", 
+                        // Facets genuinely want rows: six of them in a narrow pane
+                        // should stack rather than scroll off the side. A selection
+                        // bar is the opposite — one row by definition. Left wrapping,
+                        // it drops below the search as soon as the search alone is
+                        // wider than the space, which grows the toolbar again and is
+                        // the jump this whole change exists to remove (review catch).
+                        showSelectionBar ? "flex-nowrap" : "flex-wrap"), children: [searchNode, showSelectionBar ? (
+                            // The bar shares this row with a search that has a width
+                            // floor and a right group that does not shrink, so in a
+                            // narrow pane it gets squeezed. It scrolls rather than
+                            // wrapping inside itself — the row stays exactly one high.
+                            //
+                            // And the scrollbar itself stays out of layout. A classic,
+                            // space-consuming one — Windows and Linux by default, macOS
+                            // set to "always show" — appears only once the bar overflows,
+                            // which is only once something is ticked, so its height lands
+                            // on the toolbar as the same jump by another route (review
+                            // catch). `[data-selection-row]` in `styles.css` keeps it out
+                            // of layout; hiding the widget does not hide the scrolling.
+                            _jsx("div", { "data-selection-row": "", className: "min-w-0 flex-1 overflow-x-auto", children: _jsx(SelectionBarSingleLine, { value: true, children: selectionBar }) })) : (_jsxs(_Fragment, { children: [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] }), showSelectionBar ? (_jsx("div", { "data-selection-row": "", children: selectionBar })) : showFilters ? (_jsxs("div", { "data-filter-row": "", className: "flex flex-wrap items-center gap-2", children: [facetNodes, addFilterNode, children, resetNode] })) : null] }));
+    return (_jsxs("div", { "data-slot": "data-table-toolbar", 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] }), showSelectionBar ? (_jsx("div", { "data-selection-row": "", children: selectionBar })) : showFilters ? (_jsxs("div", { "data-filter-row": "", className: "flex flex-wrap items-center gap-2", children: [facetNodes, addFilterNode, children, resetNode] })) : null] }));
 }

package/dist/components/theme-runtime-provider.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { resolveThemeRuntime, } from "../lib/theme-runtime.js";
 const ThemeRuntimeContext = createContext(null);
+/** True inside a ThemeScope — the outermost one owns the document. */
+const ThemeScopeNestedContext = createContext(false);
 export function ThemeRuntimeProvider({ layers, mode, children, }) {
     const fallback = useRef(resolveThemeRuntime([], "system"));
     const [systemPrefersDark, setSystemPrefersDark] = useState(() => typeof window !== "undefined"
@@ -33,9 +35,149 @@ export function ThemeRuntimeProvider({ layers, mode, children, }) {
 export function useThemeRuntime() {
     return useContext(ThemeRuntimeContext) ?? resolveThemeRuntime([], "system");
 }
+const rootThemeStack = [];
+const rootThemeBase = new Map();
+// What this module last put on the element, per name. Anything else there
+// now came from outside, and outside wins — see `applyTopRootTheme`. Value
+// AND priority: a host re-declaring the same value as `!important` has said
+// something new about that name, and comparing values alone would read it as
+// our own write and quietly drop the flag (review catch).
+const rootThemeWritten = new Map();
+function currentlyOurs(root, name) {
+    const written = rootThemeWritten.get(name);
+    if (written === undefined)
+        return true;
+    return (root.style.getPropertyValue(name) === written.value
+        && root.style.getPropertyPriority(name) === written.priority);
+}
+function rememberWrite(root, name) {
+    // Read back rather than storing what we passed: the browser normalises the
+    // value, and a comparison against the un-normalised string would read
+    // every one of our own writes as somebody else's.
+    rootThemeWritten.set(name, {
+        value: root.style.getPropertyValue(name),
+        priority: root.style.getPropertyPriority(name),
+    });
+}
+function applyTopRootTheme(root) {
+    const top = rootThemeStack[rootThemeStack.length - 1];
+    for (const [name, base] of rootThemeBase) {
+        if (!currentlyOurs(root, name)) {
+            // Someone outside this module wrote this name after we did — a host
+            // theme manager, a design-mode preview, a test. Their write is newer
+            // than anything we have to say about it, so we neither overwrite it
+            // now nor restore over it later: the name is theirs from here
+            // (review catch).
+            continue;
+        }
+        const next = top?.vars[name];
+        if (next !== undefined) {
+            root.style.setProperty(name, String(next));
+        }
+        else if (base.value) {
+            // Value AND priority: a host token declared `!important` keeps its
+            // flag, or anything else can start overriding a theme it owns.
+            root.style.setProperty(name, base.value, base.priority);
+        }
+        else {
+            root.style.removeProperty(name);
+            rootThemeWritten.delete(name);
+            continue;
+        }
+        rememberWrite(root, name);
+    }
+}
+/**
+ * Publish `vars` on the document for `id`, claiming a place in the stack the
+ * first time and KEEPING it afterwards.
+ *
+ * Keeping it is the point: a scope whose theme merely changes — a rerender
+ * that hands back a new `variables` object, even a semantically identical
+ * one from an inline `layers` array — must not jump over a scope that
+ * mounted after it. Re-registering on every dependency change would make
+ * the newest write win instead of the newest owner (review catch).
+ */
+function writeRootTheme(root, id, vars) {
+    for (const name of Object.keys(vars)) {
+        if (!rootThemeBase.has(name)) {
+            rootThemeBase.set(name, {
+                value: root.style.getPropertyValue(name),
+                priority: root.style.getPropertyPriority(name),
+            });
+        }
+    }
+    const existing = rootThemeStack.find((write) => write.id === id);
+    if (existing)
+        existing.vars = vars;
+    else
+        rootThemeStack.push({ id, vars });
+    applyTopRootTheme(root);
+}
+/** Give up `id`'s place, wherever in the stack it sits. */
+function releaseRootTheme(root, id) {
+    const at = rootThemeStack.findIndex((write) => write.id === id);
+    if (at >= 0)
+        rootThemeStack.splice(at, 1);
+    applyTopRootTheme(root);
+    if (rootThemeStack.length === 0) {
+        rootThemeBase.clear();
+        rootThemeWritten.clear();
+    }
+}
 export function ThemeScope({ children, className, style, }) {
     const runtime = useThemeRuntime();
-    return (_jsx("div", { className: className, style: { ...runtime.variables, fontFamily: "var(--font-body)", ...style }, children: children }));
+    const nested = useContext(ThemeScopeNestedContext);
+    // Variables on this div alone reach only what renders INSIDE it. Radix
+    // portals mount into document.body, outside it, so every dropdown,
+    // popover, select and tooltip fell back to :root — the base preset —
+    // while the page around them wore the customer's theme. `dialog` papered
+    // over its own case with a nested ThemeScope; that fixes one portal and
+    // leaves the next one to rediscover the bug.
+    //
+    // The outermost scope publishes to the document element instead, so
+    // anything portalled anywhere inherits. Nested scopes keep the div only:
+    // they exist to theme a subtree differently, and must not overwrite the
+    // document with their own values.
+    //
+    // Residual, stated because it is a real limit and not an oversight: a
+    // NESTED scope's own portalled content still resolves the document's
+    // (outermost) theme, because the portal escapes the nested div and the
+    // nested scope deliberately does not publish. That is strictly better
+    // than before — such content used to get the base `:root` preset rather
+    // than any theme at all — and the remedy already exists and is used:
+    // wrap the portalled content in a `ThemeScope`, as `ui/dialog.tsx` does
+    // with `display: contents`. Context reaches through a portal, so the
+    // nested scope's variables land on the portalled subtree (review catch).
+    // BEFORE paint, not after. A portal that exists on the very first render —
+    // a default-open dialog, an overlay restored during hydration — would
+    // otherwise paint once against the base `:root` preset and then correct
+    // itself: the mismatched-theme flash this exists to remove, in miniature
+    // (review catch).
+    // The identity of THIS scope, stable for its whole life. Its place in the
+    // stack is claimed once and released once; changing its theme in between
+    // must not re-order it (review catch).
+    const idRef = useRef(undefined);
+    idRef.current ?? (idRef.current = Symbol("theme-scope"));
+    useLayoutEffect(() => {
+        if (nested || typeof document === "undefined")
+            return;
+        const root = document.documentElement;
+        const id = idRef.current;
+        return () => releaseRootTheme(root, id);
+    }, [nested]);
+    useLayoutEffect(() => {
+        if (nested || typeof document === "undefined")
+            return;
+        // `font-family` rides along as one more name: `<html>` needs it set,
+        // not just `--font-body` defined, or portalled content keeps the host's
+        // font (review catch).
+        const vars = {
+            ...runtime.variables,
+            "font-family": "var(--font-body)",
+        };
+        writeRootTheme(document.documentElement, idRef.current, vars);
+    }, [nested, runtime.variables]);
+    return (_jsx(ThemeScopeNestedContext.Provider, { value: true, children: _jsx("div", { className: className, style: { ...runtime.variables, fontFamily: "var(--font-body)", ...style }, children: children }) }));
 }
 export function ThemeDocumentMetadata() {
     const runtime = useThemeRuntime();

package/dist/styles.css

@@ -184,6 +184,27 @@
   box-shadow: 6px 0 6px -6px color-mix(in srgb, var(--foreground) 12%, transparent);
 }
 
+/* The opposite call from the list scroller below, for the opposite reason.
+ * The toolbar's selection row shares a line with the search and the actions,
+ * and its entire contract is that ticking a row never changes the toolbar's
+ * height. A classic, space-consuming scrollbar — Windows and Linux by
+ * default, macOS set to "always show" — would appear exactly when the bar
+ * overflows, which is exactly when something is ticked, and its height would
+ * land on the toolbar as the same jump by another route (review catch).
+ *
+ * So the widget is hidden, not the scrolling: wheel, trackpad, and tabbing
+ * to a button past the edge all still reach it. Plain CSS rather than
+ * utilities, because a class that a consumer's Tailwind never scans fails
+ * silently, and this one has no visible symptom until the platform is one we
+ * do not develop on. */
+[data-selection-row] {
+  scrollbar-width: none;
+}
+[data-selection-row]::-webkit-scrollbar {
+  height: 0;
+  display: none;
+}
+
 /* A list you can scroll should say so: keep its scrollbars visible rather
  * than relying on the overlay ones macOS hides until you already scroll. */
 [data-list-scroller] {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.21.0",
+  "version": "0.21.1",
   "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.21.0",
-    "@iloveagents/foundry-web-primitives": "^0.21.0"
+    "@iloveagents/foundry-agent": "^0.21.1",
+    "@iloveagents/foundry-web-primitives": "^0.21.1"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",