@iloveagents/foundry-web-ui 0.21.1 → 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/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/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%);

package/package.json

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