@iloveagents/foundry-web-ui 0.21.0 → 0.22.0

package/dist/components/app-brand.d.ts

@@ -6,20 +6,10 @@ export interface BrandLockup {
     isIcon: boolean;
     name: string;
     showName: boolean;
+    /** Validated CSS height for the mark, or undefined to use the default. */
+    height?: string;
 }
-/**
- * Decide what the brand lockup renders. Exported (underscore-prefixed) so the
- * branching is unit-testable without a DOM renderer — same approach as
- * ``tool-fallback.tsx``.
- *
- * The rule worth stating: whether the name is printed depends on the *shape*
- * of the brand image. A wordmark already spells the brand out, so pairing it
- * with `appName` stutters ("Acme Acme"). An icon says nothing on its
- * own, so it needs the name to complete the lockup. Hence an icon wins over a
- * wordmark when both are set — supplying an icon is an explicit request for
- * "<mark> Product Name", which is what a tenant whose product name differs
- * from their company name is asking for.
- */
+export declare function _safeLogoHeight(value: string | undefined): string | undefined;
 export declare function _resolveBrandLockup(branding: ThemeBranding, mode: "light" | "dark", showName: boolean): BrandLockup;
 export declare function AppBrand({ showName, className, iconClassName, labelClassName, }: {
     showName?: boolean;

package/dist/components/app-brand.js

@@ -15,6 +15,37 @@ import { useThemeRuntime } from "./theme-runtime-provider.js";
  * "<mark> Product Name", which is what a tenant whose product name differs
  * from their company name is asking for.
  */
+/**
+ * A tenant-supplied length, or undefined.
+ *
+ * The value lands in an inline `style`, and a theme is content a tenant
+ * authors — so this allowlists a shape rather than trying to spot bad ones.
+ * Anything else (a `calc()`, a `var()`, a url, a second declaration smuggled
+ * in behind a `;`) fails the pattern and the caller falls back to the default
+ * height, which is always a safe thing to render.
+ */
+//: The tallest mark the header will render. A syntactically valid length is
+//: not a SAFE one: `logoHeight: "320px"` is a plausible typo, and because the
+//: mark is `shrink-0` it would push the sidebar and mobile-header actions off
+//: screen rather than shrinking. Marks above this are clamped, not rejected —
+//: a too-large value should look wrong, not vanish.
+const MAX_LOGO_HEIGHT_REM = 4;
+const REM_PER_UNIT = { rem: 1, em: 1, px: 1 / 16 };
+export function _safeLogoHeight(value) {
+    if (!value)
+        return undefined;
+    // The integer part is optional: `.5rem` is a valid CSS length and a common
+    // spelling, and silently falling back to the default for it would make the
+    // contract a lie.
+    const match = /^(\d*\.?\d+)(px|rem|em)$/.exec(value.trim());
+    if (!match)
+        return undefined;
+    const [, rawNumber, unit] = match;
+    const asRem = Number(rawNumber) * REM_PER_UNIT[unit];
+    if (!Number.isFinite(asRem) || asRem <= 0)
+        return undefined;
+    return asRem > MAX_LOGO_HEIGHT_REM ? `${MAX_LOGO_HEIGHT_REM}rem` : value.trim();
+}
 export function _resolveBrandLockup(branding, mode, showName) {
     const isDark = mode === "dark";
     const pick = (dark, light) => (isDark ? dark || light : light || dark);
@@ -26,12 +57,18 @@ export function _resolveBrandLockup(branding, mode, showName) {
         isIcon: Boolean(iconUrl),
         name: branding.appName || "Foundry UI",
         showName: showName && (Boolean(iconUrl) || !markUrl),
+        height: _safeLogoHeight(branding.logoHeight),
     };
 }
 export function AppBrand({ showName = true, className, iconClassName, labelClassName, }) {
     const runtime = useThemeRuntime();
     const lockup = _resolveBrandLockup(runtime.branding, runtime.mode, showName);
-    return (_jsxs("span", { className: cn("flex items-center gap-2", className), children: [lockup.markUrl ? (_jsx("img", { src: lockup.markUrl, alt: lockup.name, className: cn("shrink-0 object-contain", 
+    return (_jsxs("span", { className: cn("flex items-center gap-2", className), children: [lockup.markUrl ? (_jsx("img", { src: lockup.markUrl, alt: lockup.name, style: lockup.height ? { height: lockup.height } : undefined, className: cn("object-contain", 
+                // A custom mark must be able to SHRINK. `shrink-0` is right for the
+                // 20px default, whose max-widths already fit every header; for a
+                // taller one it is the thing that pushes the collapse button out
+                // of the sidebar instead of letting the image narrow.
+                lockup.height ? "min-w-0 shrink" : "shrink-0", 
                 // Both lock HEIGHT and let width follow the aspect ratio. Sizing an
                 // icon into a square box (`size-5`) silently shrinks any mark that
                 // is not 1:1 — `object-contain` letterboxes a 4:3 glyph to 20x15,
@@ -39,5 +76,16 @@ export function AppBrand({ showName = true, className, iconClassName, labelClass
                 // replaced. Marks are rarely square, so height is the only
                 // dimension worth fixing. The max-width is just a runaway guard:
                 // tighter for an icon, which has to leave room for the name.
-                lockup.isIcon ? "h-5 w-auto max-w-8" : "h-5 w-auto max-w-[7rem]", iconClassName) })) : (_jsx(Layers3, { className: cn("size-5 shrink-0 text-primary", iconClassName) })), lockup.showName && _jsx("span", { className: cn("truncate", labelClassName), children: lockup.name })] }));
+                // `branding.logoHeight` overrides the HEIGHT, and the width is
+                // bounded by the CONTAINER rather than by a number picked here.
+                // The 7rem cap is sized for a 20px mark and would letterbox a
+                // taller one; a bigger fixed cap is just a different wrong number
+                // — 20rem is 320px while an expanded sidebar is 248px, so a 4:1
+                // wordmark at the 4rem ceiling (256px) still overflowed it.
+                // `max-w-full` is whatever the header actually has.
+                lockup.height
+                    ? "w-auto max-w-full"
+                    : lockup.isIcon
+                        ? "h-5 w-auto max-w-8"
+                        : "h-5 w-auto max-w-[7rem]", iconClassName) })) : (_jsx(Layers3, { className: cn("size-5 shrink-0 text-primary", iconClassName) })), lockup.showName && _jsx("span", { className: cn("truncate", labelClassName), children: lockup.name })] }));
 }

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/sidebar.js

@@ -211,7 +211,7 @@ function statusIconClass(tone) {
             return "text-primary";
         case "neutral":
         default:
-            return "text-sidebar-foreground/60";
+            return "text-sidebar-icon";
     }
 }
 function NavStatusIcon({ statusIcon }) {
@@ -481,7 +481,7 @@ function NavLeafItem({ item, isActive, onClick, depth = 0, }) {
                         ? "text-sidebar-foreground/45 cursor-default"
                         : isActive
                             ? ACTIVE_NAV_TEXT_CLASS
-                            : "text-sidebar-foreground/80"), children: [_jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
+                            : "text-sidebar-foreground/80"), children: [_jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-icon") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
                                 ? ACTIVE_NAV_BADGE_CLASS
                                 : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item })] }));
     }
@@ -492,7 +492,7 @@ function NavLeafItem({ item, isActive, onClick, depth = 0, }) {
             !isDisabled &&
             "ring-2 ring-inset ring-sidebar-ring/50 bg-sidebar-selected", isFileDragOver &&
             !isDisabled &&
-            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: false, childrenUnloaded: item.childrenUnloaded, label: item.label, isActive: isActive && !isDisabled, depth: depth }), _jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: cn("truncate", isActive && !isDisabled && ACTIVE_NAV_TEXT_CLASS), children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "ml-auto size-3.5 shrink-0 text-primary pointer-events-none" }))] }));
+            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && !isDisabled && "opacity-50"), children: [_jsx(NavTwisty, { hasChildren: false, childrenUnloaded: item.childrenUnloaded, label: item.label, isActive: isActive && !isDisabled, depth: depth }), _jsx(item.icon, { className: cn("size-3.5 shrink-0", isActive && !isDisabled ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-icon") }), _jsx("span", { className: cn("truncate", isActive && !isDisabled && ACTIVE_NAV_TEXT_CLASS), children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive ? ACTIVE_NAV_BADGE_CLASS : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "ml-auto size-3.5 shrink-0 text-primary pointer-events-none" }))] }));
 }
 function SubNavItems({ items, parentPath, depth = 1, }) {
     const navigate = useNavigate();
@@ -586,7 +586,7 @@ function NestedFolderItem({ item, depth }) {
                                     ? ACTIVE_NAV_ICON_CLASS
                                     : isAncestorActive
                                         ? "text-sidebar-foreground/80"
-                                        : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
+                                        : "text-sidebar-icon") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
                                     ? ACTIVE_NAV_BADGE_CLASS
                                     : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item })] }), isExpanded && item.children && (_jsxs("div", { children: [item.children.map((child) => {
                         const hasNestedChildren = child.children && child.children.length > 0;
@@ -660,7 +660,7 @@ function CollapsibleNavItem({ item, inTree = true }) {
                                 ? ACTIVE_NAV_ICON_CLASS
                                 : ancestor
                                     ? "text-sidebar-foreground/80"
-                                    : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", selected
+                                    : "text-sidebar-icon") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", selected
                                 ? ACTIVE_NAV_BADGE_CLASS
                                 : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot })] }), isFileDragOver && !isDisabled && (_jsx(Upload, { "aria-hidden": "true", className: "size-3.5 mr-2 shrink-0 text-primary pointer-events-none" })), _jsx(NavRowControls, { item: item })] }));
         return (_jsxs("div", { ...(isDisabled ? {} : dropTargetProps), ...(isDisabled ? {} : draggableProps), children: [inner(isActive, isAncestorActive), hasChildren && isExpanded && (_jsxs(_Fragment, { children: [_jsx(SubNavItems, { items: item.children, parentPath: item.to }), item.dnd?.canDrop() && _jsx(ContainerDropZone, { dnd: item.dnd })] }))] }));
@@ -679,7 +679,7 @@ function CollapsibleNavItem({ item, inTree = true }) {
         "rounded-xl border border-transparent pr-3 py-2 text-sm text-left", "text-sidebar-foreground/85 transition-colors hover:bg-sidebar-accent/70", isActive && cn(ACTIVE_NAV_ROW_CLASS, ACTIVE_NAV_TEXT_CLASS), isDragOver &&
             !isFileDragOver &&
             "bg-sidebar-selected ring-2 ring-inset ring-sidebar-ring/50", isFileDragOver &&
-            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && "opacity-50"), children: ({ isActive }) => (_jsxs(_Fragment, { children: [_jsx(NavTwisty, { hasChildren: false, childrenUnloaded: item.childrenUnloaded, inTree: inTree, label: item.label, isActive: isActive, depth: 0 }), _jsx(item.icon, { className: cn("size-4 shrink-0", isActive ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-foreground/60") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
+            "outline-dashed outline-2 -outline-offset-2 outline-primary bg-primary/10", item.dimmed && "opacity-50"), children: ({ isActive }) => (_jsxs(_Fragment, { children: [_jsx(NavTwisty, { hasChildren: false, childrenUnloaded: item.childrenUnloaded, inTree: inTree, label: item.label, isActive: isActive, depth: 0 }), _jsx(item.icon, { className: cn("size-4 shrink-0", isActive ? ACTIVE_NAV_ICON_CLASS : "text-sidebar-icon") }), _jsx("span", { className: "truncate", children: item.label }), item.badge && (_jsx("span", { className: cn("shrink-0 rounded px-1 py-0.5 text-[10px] font-medium", isActive
                         ? ACTIVE_NAV_BADGE_CLASS
                         : "bg-sidebar-accent text-sidebar-accent-foreground"), children: item.badge })), _jsx(NavStatusIcon, { statusIcon: item.statusIcon }), _jsx(NavStatusDot, { statusDot: item.statusDot }), isFileDragOver && (_jsx(Upload, { "aria-hidden": "true", className: "ml-auto size-3.5 shrink-0 text-primary pointer-events-none" }))] })) }));
 }
@@ -743,7 +743,7 @@ function SidebarResizeHandle() {
 // group is now the source of truth for "you're in a chat right now".
 // Kept as a comment so future spelunkers know it was intentional.
 function CollapsedNavShortcut({ to, label, icon: Icon, isActive, }) {
-    return (_jsx(NavLink, { to: to, children: _jsx(TooltipIconButton, { tooltip: label, side: "right", className: cn(isActive && "border border-transparent bg-sidebar-selected text-sidebar-foreground"), children: _jsx(Icon, { className: cn("size-4", isActive && "text-primary") }) }) }, to));
+    return (_jsx(NavLink, { to: to, children: _jsx(TooltipIconButton, { tooltip: label, side: "right", className: cn(isActive && "border border-transparent bg-sidebar-selected text-sidebar-foreground"), children: _jsx(Icon, { className: cn("size-4", isActive ? "text-primary" : "text-sidebar-icon") }) }) }, to));
 }
 // ---------------------------------------------------------------------------
 // Collapsible nav-group state — persisted per-label in localStorage so the
@@ -946,7 +946,7 @@ function SidebarContent({ collapsed }) {
         e.preventDefault();
     }, []);
     if (collapsed) {
-        return (_jsxs("div", { className: "flex flex-col items-center gap-1 py-3 flex-1", children: [_jsx(TooltipIconButton, { tooltip: "Expand sidebar", side: "right", onClick: toggle, children: _jsx(PanelLeftOpen, { className: "size-5" }) }), _jsx(TooltipIconButton, { tooltip: "New Thread", side: "right", onClick: handleNewConversation, children: _jsx(SquarePen, { className: "size-4" }) }), _jsx("div", { className: "mt-4 flex w-full flex-col items-stretch gap-1", children: navConfig
+        return (_jsxs("div", { className: "flex flex-col items-center gap-1 py-3 flex-1", children: [_jsx(TooltipIconButton, { tooltip: "Expand sidebar", side: "right", onClick: toggle, children: _jsx(PanelLeftOpen, { className: "size-5" }) }), _jsx(TooltipIconButton, { tooltip: "New Thread", side: "right", onClick: handleNewConversation, children: _jsx(SquarePen, { className: "size-4 text-sidebar-icon" }) }), _jsx("div", { className: "mt-4 flex w-full flex-col items-stretch gap-1", children: navConfig
                         .map((group, groupIndex) => {
                         // Modules with a non-flat collapsed rail (e.g. Spaces'
                         // "header + active workspace") supply `collapsedRail`; the
@@ -980,7 +980,7 @@ function SidebarContent({ collapsed }) {
                     // column so icons stay aligned with the rail.
                     _jsx("div", { className: cn("flex flex-col items-center gap-1", visibleIndex > 0 && "mt-2 pt-2 border-t border-sidebar-border/40"), children: items.map(({ to, label, icon, isActive }) => (_jsx(CollapsedNavShortcut, { to: to, label: label, icon: icon, isActive: isActive }, to))) }, `${group.label || ""}-${groupIndex}`))) })] }));
     }
-    return (_jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsx(NavLink, { to: "/", className: "flex items-center gap-2 hover:opacity-80 transition-opacity", children: _jsx(AppBrand, { iconClassName: "text-primary", labelClassName: "truncate text-sm font-semibold text-sidebar-foreground" }) }), _jsx(TooltipIconButton, { tooltip: "Collapse sidebar", side: "right", onClick: toggle, children: _jsx(PanelLeft, { className: "size-5" }) })] }), _jsx("div", { className: "px-1 mb-0.5", children: _jsxs("button", { type: "button", onClick: handleNewConversation, className: cn("flex items-center gap-2 w-full", "rounded-xl px-3 py-2 text-sm text-left", "text-sidebar-foreground/85 transition-colors hover:bg-sidebar-accent/70"), children: [_jsx(SquarePen, { className: "size-4 shrink-0 text-sidebar-foreground/60" }), "New Thread"] }) }), _jsxs("nav", { className: "flex-1 overflow-y-auto px-1 pb-16", onDragOverCapture: preventNativeFileDrop, onDropCapture: preventNativeFileDrop, children: [navConfig.map((group) => (_jsx(NavGroupSection, { group: group }, group.label))), showNavSkeleton && (_jsx("div", { className: "space-y-1 px-1 pt-2", "aria-hidden": "true", children: Array.from({ length: 6 }).map((_, index) => (_jsx("div", { className: "h-7 mx-1 rounded-lg animate-pulse bg-sidebar-accent/40" }, index))) }))] }), _jsx(SidebarFooterActions, {})] }));
+    return (_jsxs("div", { className: "flex flex-col flex-1 min-h-0", children: [_jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsx(NavLink, { to: "/", className: "flex items-center gap-2 hover:opacity-80 transition-opacity", children: _jsx(AppBrand, { iconClassName: "text-primary", labelClassName: "truncate text-sm font-semibold text-sidebar-foreground" }) }), _jsx(TooltipIconButton, { tooltip: "Collapse sidebar", side: "right", onClick: toggle, children: _jsx(PanelLeft, { className: "size-5" }) })] }), _jsx("div", { className: "px-1 mb-0.5", children: _jsxs("button", { type: "button", onClick: handleNewConversation, className: cn("flex items-center gap-2 w-full", "rounded-xl px-3 py-2 text-sm text-left", "text-sidebar-foreground/85 transition-colors hover:bg-sidebar-accent/70"), children: [_jsx(SquarePen, { className: "size-4 shrink-0 text-sidebar-icon" }), "New Thread"] }) }), _jsxs("nav", { className: "flex-1 overflow-y-auto px-1 pb-16", onDragOverCapture: preventNativeFileDrop, onDropCapture: preventNativeFileDrop, children: [navConfig.map((group) => (_jsx(NavGroupSection, { group: group }, group.label))), showNavSkeleton && (_jsx("div", { className: "space-y-1 px-1 pt-2", "aria-hidden": "true", children: Array.from({ length: 6 }).map((_, index) => (_jsx("div", { className: "h-7 mx-1 rounded-lg animate-pulse bg-sidebar-accent/40" }, index))) }))] }), _jsx(SidebarFooterActions, {})] }));
 }
 function SidebarFooterActions() {
     const footerActions = useNavStore((s) => s.footerActions);

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/lib/theme-runtime.d.ts

@@ -30,6 +30,16 @@ export interface ThemeSidebarSlots {
     sidebarAccentForeground?: string;
     sidebarSelected?: string;
     sidebarSelectedForeground?: string;
+    /**
+     * Colour of the icons in the sidebar's idle rows.
+     *
+     * Separate from `sidebarForeground` because a brand whose mark is a colour
+     * usually wants the icons in that colour and the LABELS still readable —
+     * tinting `sidebarForeground` to reach the icons drags every label with it.
+     * Unset resolves to the previous behaviour (the label colour at 60%), so no
+     * existing theme moves.
+     */
+    sidebarIcon?: string;
     sidebarBorder?: string;
     sidebarRing?: string;
 }
@@ -99,6 +109,21 @@ export interface ThemeBranding {
      */
     iconUrl?: string;
     darkIconUrl?: string;
+    /**
+     * Rendered height of the mark, as a CSS length (`"2rem"`, `"32px"`).
+     * Defaults to the 20px lockup height when unset.
+     *
+     * A wordmark is not interchangeable with an icon at one fixed height. Marks
+     * that carry a tagline under the name — a common wordmark shape — turn the
+     * tagline into an unreadable smear at 20px, and the whole lockup reads as
+     * undersized next to the product name. The tenant supplying the asset is the
+     * only one who knows how much height it needs, so this is theirs to set.
+     *
+     * Validated, not interpolated blindly: the value reaches an inline style and
+     * themes are tenant-authored content, so anything that is not a plain
+     * non-negative CSS length in px/rem/em is ignored in favour of the default.
+     */
+    logoHeight?: string;
 }
 export interface ThemeDefinition {
     light?: ThemeColorSlots;

package/dist/lib/theme-runtime.js

@@ -28,6 +28,7 @@ const SIDEBAR_KEYS = [
     "sidebarAccentForeground",
     "sidebarSelected",
     "sidebarSelectedForeground",
+    "sidebarIcon",
     "sidebarBorder",
     "sidebarRing",
 ];
@@ -84,6 +85,7 @@ const BRANDING_KEYS = [
     "darkLogoUrl",
     "iconUrl",
     "darkIconUrl",
+    "logoHeight",
 ];
 function cleanObject(value, keys) {
     if (!value || typeof value !== "object" || Array.isArray(value))
@@ -188,6 +190,7 @@ function toCssVars(colors, sidebar, status, charts, typography, radius, app) {
         ["--sidebar-accent-foreground"]: sidebar.sidebarAccentForeground,
         ["--sidebar-selected"]: sidebar.sidebarSelected,
         ["--sidebar-selected-foreground"]: sidebar.sidebarSelectedForeground,
+        ["--sidebar-icon"]: sidebar.sidebarIcon,
         ["--sidebar-border"]: sidebar.sidebarBorder,
         ["--sidebar-ring"]: sidebar.sidebarRing,
         ["--success"]: status.success,
@@ -248,6 +251,7 @@ function defaultSidebar(colors) {
         sidebarAccentForeground: colors.accentForeground,
         sidebarSelected: colors.muted,
         sidebarSelectedForeground: colors.foreground,
+        sidebarIcon: `color-mix(in srgb, ${colors.foreground} 60%, transparent)`,
         sidebarBorder: colors.border,
         sidebarRing: colors.ring,
     };
@@ -376,6 +380,7 @@ export const FOUNDRY_VIOLET_THEME = {
             sidebarAccentForeground: "color-mix(in srgb, var(--foreground) 92%, var(--primary) 8%)",
             sidebarSelected: "var(--muted)",
             sidebarSelectedForeground: "var(--foreground)",
+            sidebarIcon: "color-mix(in srgb, var(--sidebar-foreground) 60%, transparent)",
             sidebarBorder: "color-mix(in srgb, var(--border) 96%, var(--foreground) 4%)",
             sidebarRing: "oklch(43% 0.24 286)",
         },
@@ -388,6 +393,7 @@ export const FOUNDRY_VIOLET_THEME = {
             sidebarAccentForeground: "color-mix(in srgb, var(--foreground) 90%, white 10%)",
             sidebarSelected: "color-mix(in srgb, var(--muted) 78%, var(--background) 22%)",
             sidebarSelectedForeground: "var(--foreground)",
+            sidebarIcon: "color-mix(in srgb, var(--sidebar-foreground) 60%, transparent)",
             sidebarBorder: "color-mix(in srgb, var(--border) 90%, white 10%)",
             sidebarRing: "oklch(0.72 0.18 286)",
         },

package/dist/styles.css

@@ -33,6 +33,7 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-selected: var(--sidebar-selected);
   --color-sidebar-selected-foreground: var(--sidebar-selected-foreground);
+  --color-sidebar-icon: var(--sidebar-icon);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
   --color-success: var(--success);
@@ -77,6 +78,7 @@
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.967 0.001 286.375);
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-icon: color-mix(in srgb, var(--sidebar-foreground) 60%, transparent);
   --sidebar-selected: var(--muted);
   --sidebar-selected-foreground: var(--foreground);
   --sidebar-border: oklch(0.92 0.004 286.32);
@@ -122,6 +124,7 @@
   --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.274 0.006 286.033);
   --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-icon: color-mix(in srgb, var(--sidebar-foreground) 60%, transparent);
   --sidebar-selected: color-mix(in srgb, var(--muted) 78%, var(--background) 22%);
   --sidebar-selected-foreground: var(--foreground);
   --sidebar-border: oklch(1 0 0 / 10%);
@@ -184,6 +187,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.22.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.21.0",
-    "@iloveagents/foundry-web-primitives": "^0.21.0"
+    "@iloveagents/foundry-agent": "^0.22.0",
+    "@iloveagents/foundry-web-primitives": "^0.22.0"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",