@iloveagents/foundry-web-ui 0.30.0 → 0.31.0

package/dist/components/assistant-chat.js

@@ -137,7 +137,7 @@ export function ChatContent({ centerComposer = false, composerIntro, composerFoo
                             // `overflow-hidden`, not scroll: a surface owns its own layout,
                             // and a full-bleed one (an avatar cropped to the frame) must be
                             // able to reach the edges rather than sit in a scroll box.
-                            _jsx("div", { className: "absolute inset-0 z-10 overflow-hidden bg-background", children: _jsx(ThreadSurface, {}) })), _jsxs(ThreadPrimitive.Viewport, { className: cn("absolute inset-0 overflow-y-auto bg-background", ThreadSurface && "invisible"), "aria-hidden": ThreadSurface ? true : undefined, children: [_jsx(ThreadPrimitive.Empty, { children: emptyState ?? (_jsxs("div", { className: cn("flex min-h-full flex-col", "items-center justify-center", "px-4"), children: [_jsx(Bot, { className: "size-16 mb-6 text-primary/70" }), _jsx("h1", { className: "text-[2rem] font-normal text-foreground text-center mb-6", children: "How can I help you today?" }), _jsx(ChatHomeStartersSlot, {}), starterSuggestions.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-2 max-w-lg", children: starterSuggestions.map((prompt) => (_jsx(ThreadPrimitive.Suggestion, { prompt: prompt, send: true, asChild: true, children: _jsx(Button, { variant: "outline", className: "text-sm", children: prompt }) }, prompt))) }))] })) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "mx-auto max-w-3xl px-4 pt-8 pb-4", children: [_jsx(ThreadPrimitive.Messages, { components: {
+                            _jsx("div", { className: "absolute inset-0 z-10 overflow-hidden bg-background", children: _jsx(ThreadSurface, {}) })), _jsxs(ThreadPrimitive.Viewport, { className: cn("absolute inset-0 overflow-y-auto bg-background", ThreadSurface && "invisible"), "aria-hidden": ThreadSurface ? true : undefined, children: [_jsx(ThreadPrimitive.Empty, { children: emptyState ?? (_jsxs("div", { className: cn("flex min-h-full flex-col", "items-center justify-center", "px-4"), children: [_jsx(Bot, { className: "size-16 mb-6 text-primary/70" }), _jsx("h1", { className: "text-[2rem] font-normal text-heading text-center mb-6", children: "How can I help you today?" }), _jsx(ChatHomeStartersSlot, {}), starterSuggestions.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-2 max-w-lg", children: starterSuggestions.map((prompt) => (_jsx(ThreadPrimitive.Suggestion, { prompt: prompt, send: true, asChild: true, children: _jsx(Button, { variant: "outline", className: "text-sm", children: prompt }) }, prompt))) }))] })) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "mx-auto max-w-3xl px-4 pt-8 pb-4", children: [_jsx(ThreadPrimitive.Messages, { components: {
                                                         UserMessage,
                                                         EditComposer,
                                                         AssistantMessage,

package/dist/components/markdown-text.js

@@ -132,10 +132,12 @@ function extractCodeInfo(children) {
  * Shared markdown component overrides used by both chat messages and the tool panel.
  */
 export const markdownComponents = {
-    h1: ({ children, ...props }) => (_jsx("h1", { className: "text-2xl font-bold mt-6 mb-4 text-foreground", ...props, children: children })),
-    h2: ({ children, ...props }) => (_jsx("h2", { className: "text-xl font-bold mt-5 mb-3 text-foreground", ...props, children: children })),
-    h3: ({ children, ...props }) => (_jsx("h3", { className: "text-lg font-semibold mt-4 mb-2 text-foreground", ...props, children: children })),
-    h4: ({ children, ...props }) => (_jsx("h4", { className: "text-base font-semibold mt-3 mb-1.5 text-foreground", ...props, children: children })),
+    h1: ({ children, ...props }) => (_jsx("h1", { className: "text-2xl font-bold mt-6 mb-4 text-content-heading-1", ...props, children: children })),
+    h2: ({ children, ...props }) => (_jsx("h2", { className: "text-xl font-bold mt-5 mb-3 text-content-heading-2", ...props, children: children })),
+    h3: ({ children, ...props }) => (_jsx("h3", { className: "text-lg font-semibold mt-4 mb-2 text-content-heading-3", ...props, children: children })),
+    h4: ({ children, ...props }) => (_jsx("h4", { className: "text-base font-semibold mt-3 mb-1.5 text-content-heading-4", ...props, children: children })),
+    h5: ({ children, ...props }) => (_jsx("h5", { className: "mt-3 mb-1.5 text-sm font-semibold text-content-heading-5", ...props, children: children })),
+    h6: ({ children, ...props }) => (_jsx("h6", { className: "mt-3 mb-1.5 text-xs font-semibold text-content-heading-6", ...props, children: children })),
     p: ({ children, ...props }) => (_jsx("p", { className: "mb-2 leading-relaxed text-foreground", ...props, children: injectCitations(children) })),
     ul: ({ children, ...props }) => (_jsx("ul", { className: "list-disc list-outside pl-6 mb-4 space-y-1 text-foreground", ...props, children: children })),
     ol: ({ children, ...props }) => (_jsx("ol", { className: "list-decimal list-outside pl-6 mb-4 space-y-1 text-foreground", ...props, children: children })),

package/dist/components/sidebar.js

@@ -13,9 +13,9 @@ import { TooltipIconButton } from "./tooltip-icon-button.js";
 import { Button } from "@iloveagents/foundry-web-primitives";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "../ui/dropdown-menu.js";
 import { AppBrand } from "./app-brand.js";
-const ACTIVE_NAV_ROW_CLASS = "border border-transparent bg-sidebar-selected shadow-none";
-const ACTIVE_NAV_TEXT_CLASS = "font-semibold text-sidebar-foreground";
-const ACTIVE_NAV_ICON_CLASS = "text-primary";
+const ACTIVE_NAV_ROW_CLASS = "border border-transparent bg-sidebar-selected text-sidebar-selected-foreground shadow-none";
+const ACTIVE_NAV_TEXT_CLASS = "font-semibold text-sidebar-selected-foreground";
+const ACTIVE_NAV_ICON_CLASS = "text-sidebar-selected-foreground";
 const ACTIVE_NAV_BADGE_CLASS = "border border-sidebar-border bg-background/60 text-sidebar-foreground";
 // Indent ladder for the nav tree, indexed by depth (0 = top-level item).
 //
@@ -437,13 +437,15 @@ function ContainerDropZone({ dnd }) {
 function NavTwisty({ hasChildren, childrenUnloaded = false, isExpanded, onToggle, label, isActive, depth, inTree = true, }) {
     const cell = cn(NAV_TWISTY_CLASS, getNavDepthOffsets(depth).column);
     if (!hasChildren) {
-        return (_jsx("span", { "data-nav-twisty-cell": true, "aria-hidden": "true", className: cn(cell, "pointer-events-none"), children: inTree && !childrenUnloaded && (_jsx("span", { "data-nav-leaf-dot": true, className: cn("block size-1 shrink-0 rounded-full", isActive ? "bg-primary/70" : "bg-sidebar-foreground/30") })) }));
+        return (_jsx("span", { "data-nav-twisty-cell": true, "aria-hidden": "true", className: cn(cell, "pointer-events-none"), children: inTree && !childrenUnloaded && (_jsx("span", { "data-nav-leaf-dot": true, className: cn("block size-1 shrink-0 rounded-full", isActive ? "bg-sidebar-selected-foreground/70" : "bg-sidebar-foreground/30") })) }));
     }
     return (_jsx("span", { "data-nav-twisty-cell": true, className: cell, children: _jsx("button", { type: "button", "data-nav-twisty": true, "aria-expanded": isExpanded, "aria-label": isExpanded ? `Collapse ${label}` : `Expand ${label}`, onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 onToggle?.();
-            }, className: cn("flex items-center justify-center rounded", NAV_TWISTY_HIT_CLASS, isActive ? "text-primary" : "text-sidebar-foreground/50 hover:text-sidebar-foreground"), children: _jsx(ChevronRight, { className: cn("size-3.5 transition-transform duration-150", isExpanded && "rotate-90") }) }) }));
+            }, className: cn("flex items-center justify-center rounded", NAV_TWISTY_HIT_CLASS, isActive
+                ? "text-sidebar-selected-foreground"
+                : "text-sidebar-foreground/50 hover:text-sidebar-foreground"), children: _jsx(ChevronRight, { className: cn("size-3.5 transition-transform duration-150", isExpanded && "rotate-90") }) }) }));
 }
 function NavItemActions({ actions }) {
     return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7 rounded-md text-muted-foreground hover:bg-muted/80 hover:text-foreground", onClick: (e) => {
@@ -666,7 +668,9 @@ function CollapsibleNavItem({ item, inTree = true, heading = false, underHeader
         : heading || !underHeader
             ? NAV_FLAT_BODY_CLASS
             : getNavDepthOffsets(0).body;
-    const headingClass = heading && !isDisabled && "font-semibold text-sidebar-foreground";
+    const headingClass = heading &&
+        !isDisabled &&
+        `font-semibold ${isActive ? "text-sidebar-selected-foreground" : "text-sidebar-primary"}`;
     const { draggableProps, dropTargetProps, isDragOver, isFileDragOver } = useNavItemDnd(item.dnd);
     const rendersRow = Boolean(hasChildren || hasActions);
     const activeRowRef = useActiveNavRowScroll(isActive && rendersRow);
@@ -794,7 +798,8 @@ 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" : "text-sidebar-icon") }) }) }, to));
+    return (_jsx(NavLink, { to: to, children: _jsx(TooltipIconButton, { tooltip: label, side: "right", className: cn(isActive &&
+                "border border-transparent bg-sidebar-selected text-sidebar-selected-foreground"), children: _jsx(Icon, { className: cn("size-4", isActive ? "text-sidebar-selected-foreground" : "text-sidebar-icon") }) }) }, to));
 }
 // ---------------------------------------------------------------------------
 // Collapsible nav-group state — persisted per-label in localStorage so the

package/dist/components/tool-panel.js

@@ -141,5 +141,5 @@ export function ToolPanel({ contained = false }) {
                     else
                         return;
                     event.preventDefault();
-                }, className: cn("absolute left-0 top-0 z-10 h-full w-2 -translate-x-1/2", "cursor-col-resize touch-none", "before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2", "before:bg-transparent hover:before:bg-primary/40 focus-visible:before:bg-primary", "focus:outline-none") })) : null, _jsx("div", { className: "flex-shrink-0 border-b border-border px-6 py-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold text-foreground truncate pr-4", children: content.title }), _jsxs("div", { className: "flex items-center gap-1", children: [entityId && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: handleToggleEntityPin, className: cn("flex items-center justify-center", "size-8 rounded-md shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", isEntityPinned ? "text-foreground" : "text-muted-foreground"), "aria-pressed": isEntityPinned, "aria-label": isEntityPinned ? "Unpin document" : "Pin document", title: isEntityPinned ? "Unpin document" : "Pin document", children: _jsx(PinStateIcon, { pinned: isEntityPinned }) }), _jsx("button", { type: "button", onClick: handleNavigateToEntity, className: cn("flex items-center justify-center", "size-8 rounded-md shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": "Open in navigation", title: "Open in navigation", children: _jsx(FolderOpen, { className: "size-4 text-muted-foreground" }) })] })), _jsx("button", { type: "button", onClick: handleCopyAll, className: cn("flex items-center justify-center", "size-8 rounded-md flex-shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": "Copy content", children: copied ? (_jsx(Check, { className: "size-4 text-success" })) : (_jsx(Copy, { className: "size-4 text-muted-foreground" })) }), !contained && (_jsx("button", { type: "button", onClick: toggleFullscreen, className: cn("flex items-center justify-center", "size-8 rounded-md flex-shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen", children: isFullscreen ? (_jsx(Minimize2, { className: "size-4 text-muted-foreground" })) : (_jsx(Maximize2, { className: "size-4 text-muted-foreground" })) })), _jsx("button", { type: "button", onClick: closePanel, className: cn("flex items-center justify-center", "size-8 rounded-md flex-shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": "Close panel", children: _jsx(X, { className: "size-5 text-muted-foreground" }) })] })] }) }), _jsxs("div", { className: "relative flex-1 overflow-y-auto", ref: contentRef, "data-testid": "tool-panel-content", children: [_jsx(PanelContentRenderer, { content: content }), _jsx(SelectionPopover, { containerRef: contentRef })] })] }));
+                }, className: cn("absolute left-0 top-0 z-10 h-full w-2 -translate-x-1/2", "cursor-col-resize touch-none", "before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2", "before:bg-transparent hover:before:bg-primary/40 focus-visible:before:bg-primary", "focus:outline-none") })) : null, _jsx("div", { className: "flex-shrink-0 border-b border-border px-6 py-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h2", { className: "text-lg font-semibold text-heading truncate pr-4", children: content.title }), _jsxs("div", { className: "flex items-center gap-1", children: [entityId && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: handleToggleEntityPin, className: cn("flex items-center justify-center", "size-8 rounded-md shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary", isEntityPinned ? "text-foreground" : "text-muted-foreground"), "aria-pressed": isEntityPinned, "aria-label": isEntityPinned ? "Unpin document" : "Pin document", title: isEntityPinned ? "Unpin document" : "Pin document", children: _jsx(PinStateIcon, { pinned: isEntityPinned }) }), _jsx("button", { type: "button", onClick: handleNavigateToEntity, className: cn("flex items-center justify-center", "size-8 rounded-md shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": "Open in navigation", title: "Open in navigation", children: _jsx(FolderOpen, { className: "size-4 text-muted-foreground" }) })] })), _jsx("button", { type: "button", onClick: handleCopyAll, className: cn("flex items-center justify-center", "size-8 rounded-md flex-shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": "Copy content", children: copied ? (_jsx(Check, { className: "size-4 text-success" })) : (_jsx(Copy, { className: "size-4 text-muted-foreground" })) }), !contained && (_jsx("button", { type: "button", onClick: toggleFullscreen, className: cn("flex items-center justify-center", "size-8 rounded-md flex-shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen", children: isFullscreen ? (_jsx(Minimize2, { className: "size-4 text-muted-foreground" })) : (_jsx(Maximize2, { className: "size-4 text-muted-foreground" })) })), _jsx("button", { type: "button", onClick: closePanel, className: cn("flex items-center justify-center", "size-8 rounded-md flex-shrink-0", "hover:bg-muted transition-colors", "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"), "aria-label": "Close panel", children: _jsx(X, { className: "size-5 text-muted-foreground" }) })] })] }) }), _jsxs("div", { className: "relative flex-1 overflow-y-auto", ref: contentRef, "data-testid": "tool-panel-content", children: [_jsx(PanelContentRenderer, { content: content }), _jsx(SelectionPopover, { containerRef: contentRef })] })] }));
 }

package/dist/index.d.ts

@@ -76,8 +76,8 @@ export { submitComposerText } from "./lib/composer-submit-store.js";
 export { registerSelectionContextResolver, resolveSelectionContext, type SelectionContextInput, type SelectionContextItem, type SelectionContextResolver, type SelectionContextResult, } from "./lib/selection-context.js";
 export { useThemeStore } from "./lib/theme-store.js";
 export type { ThemeMode } from "./lib/theme-store.js";
-export { mergeThemeDefinitions, resolveThemeRuntime, getEffectiveThemeMode, getThemePreset, } from "./lib/theme-runtime.js";
-export type { ThemeDefinition, ThemeLayer, ResolvedThemeRuntime, ThemeColorSlots, ThemeSidebarSlots, ThemeStatusSlots, ThemeChartSlots, ThemeTypographySlots, ThemeRadiusSlots, ThemeAppSlots, ThemeBranding, } from "./lib/theme-runtime.js";
+export { THEME_SLOTS, mergeThemeDefinitions, resolveThemeRuntime, getEffectiveThemeMode, getThemePreset, } from "./lib/theme-runtime.js";
+export type { ThemeSlot, ThemeDefinition, ThemeLayer, ResolvedThemeRuntime, ThemeColorSlots, ThemeSidebarSlots, ThemeStatusSlots, ThemeChartSlots, ThemeTypographySlots, ThemeRadiusSlots, ThemeAppSlots, ThemeBranding, } from "./lib/theme-runtime.js";
 export { useDevStore } from "./lib/dev-store.js";
 export { DEFAULT_NAV_CONFIG, findNavItem } from "./lib/nav-config.js";
 export type { NavItem, NavItemAction, NavItemDnd, NavGroup, NavGroupCreateAction, NavMatch, CollapsedRailItem, CollapsedRailContext, } from "./lib/nav-config.js";

package/dist/index.js

@@ -79,7 +79,7 @@ export { useChatLifecycleStore } from "./lib/chat-lifecycle-store.js";
 export { submitComposerText } from "./lib/composer-submit-store.js";
 export { registerSelectionContextResolver, resolveSelectionContext, } from "./lib/selection-context.js";
 export { useThemeStore } from "./lib/theme-store.js";
-export { mergeThemeDefinitions, resolveThemeRuntime, getEffectiveThemeMode, getThemePreset, } from "./lib/theme-runtime.js";
+export { THEME_SLOTS, mergeThemeDefinitions, resolveThemeRuntime, getEffectiveThemeMode, getThemePreset, } from "./lib/theme-runtime.js";
 // Stores moved to @iloveagents/foundry-agent (#95): authStore, citationStore,
 // streamingStatusStore, clientToolRegistry. Consumers import directly from
 // `@iloveagents/foundry-agent` / `@iloveagents/foundry-agent/msal` — no re-exports here per

package/dist/lib/auth-provider.js

@@ -42,7 +42,7 @@ export const AuthProvider = ({ config, children }) => {
     if (!ready)
         return null;
     if (initError) {
-        return (_jsx("div", { className: "flex min-h-dvh items-center justify-center bg-background px-6 text-center", children: _jsxs("div", { className: "max-w-md rounded-2xl border border-border bg-card px-6 py-5 shadow-sm", children: [_jsx("h1", { className: "text-lg font-semibold text-foreground", children: "Authentication unavailable" }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: initError })] }) }));
+        return (_jsx("div", { className: "flex min-h-dvh items-center justify-center bg-background px-6 text-center", children: _jsxs("div", { className: "max-w-md rounded-2xl border border-border bg-card px-6 py-5 shadow-sm", children: [_jsx("h1", { className: "text-lg font-semibold text-heading", children: "Authentication unavailable" }), _jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: initError })] }) }));
     }
     if (!MsalProvider || !useMsalHook) {
         return null;

package/dist/lib/theme-runtime.d.ts

@@ -3,6 +3,15 @@ import type { ThemeMode } from "./theme-store.js";
 export interface ThemeColorSlots {
     background?: string;
     foreground?: string;
+    /** Page and document headings, independent of body text and action colours. */
+    heading?: string;
+    /** Heading colours inside authored content, independent of application chrome. */
+    contentHeading1?: string;
+    contentHeading2?: string;
+    contentHeading3?: string;
+    contentHeading4?: string;
+    contentHeading5?: string;
+    contentHeading6?: string;
     card?: string;
     cardForeground?: string;
     popover?: string;
@@ -161,6 +170,20 @@ export interface ResolvedThemeRuntime {
     variables: CSSProperties;
     sources: ThemeLayer[];
 }
+export interface ThemeSlot {
+    path: readonly string[];
+    label: string;
+    group: string;
+    kind: "color" | "font" | "length" | "text" | "image";
+    cssVariable?: string;
+    mode?: "light" | "dark";
+    /** Lower values appear first in authoring tools. */
+    impact: number;
+    /** Human-readable source used when this value is not explicitly set. */
+    derivedFrom?: string;
+}
+/** The same allowlists power sanitization and authoring: supported slots cannot disappear from editors. */
+export declare const THEME_SLOTS: readonly ThemeSlot[];
 export declare function mergeThemeDefinitions(...definitions: (ThemeDefinition | null | undefined)[]): ThemeDefinition;
 export declare function getEffectiveThemeMode(mode: ThemeMode): "light" | "dark";
 export declare const FOUNDRY_VIOLET_THEME: ThemeDefinition;

package/dist/lib/theme-runtime.js

@@ -1,34 +1,41 @@
 const COLOR_KEYS = [
+    "primary",
+    "primaryForeground",
+    "heading",
+    "contentHeading1",
+    "contentHeading2",
+    "contentHeading3",
+    "contentHeading4",
+    "contentHeading5",
+    "contentHeading6",
     "background",
     "foreground",
+    "accent",
+    "accentForeground",
     "card",
     "cardForeground",
-    "popover",
-    "popoverForeground",
-    "primary",
-    "primaryForeground",
-    "secondary",
-    "secondaryForeground",
+    "border",
+    "ring",
+    "input",
     "muted",
     "mutedForeground",
-    "accent",
-    "accentForeground",
+    "secondary",
+    "secondaryForeground",
+    "popover",
+    "popoverForeground",
     "destructive",
     "destructiveForeground",
-    "border",
-    "input",
-    "ring",
 ];
 const SIDEBAR_KEYS = [
+    "sidebarSelected",
+    "sidebarSelectedForeground",
     "sidebar",
     "sidebarForeground",
     "sidebarPrimary",
     "sidebarPrimaryForeground",
+    "sidebarIcon",
     "sidebarAccent",
     "sidebarAccentForeground",
-    "sidebarSelected",
-    "sidebarSelectedForeground",
-    "sidebarIcon",
     "sidebarBorder",
     "sidebarRing",
 ];
@@ -87,6 +94,100 @@ const BRANDING_KEYS = [
     "darkIconUrl",
     "logoHeight",
 ];
+const SURFACE_IMPACT = Object.fromEntries(COLOR_KEYS.map((key, index) => [key, index]));
+const SURFACE_DERIVATIONS = {
+    heading: "foreground",
+    contentHeading1: "interface heading",
+    contentHeading2: "interface heading + foreground",
+    contentHeading3: "foreground",
+    contentHeading4: "foreground",
+    contentHeading5: "foreground",
+    contentHeading6: "foreground",
+    card: "background",
+    cardForeground: "foreground",
+    popover: "card",
+    popoverForeground: "foreground",
+    secondary: "background + primary",
+    secondaryForeground: "foreground",
+    muted: "background + foreground",
+    mutedForeground: "foreground + background",
+    accent: "background + primary",
+    accentForeground: "foreground",
+    border: "foreground + background",
+    input: "border",
+    ring: "primary",
+};
+const cssName = (key) => `--${key.replace(/[A-Z0-9]/g, (part) => `-${part.toLowerCase()}`)}`;
+const slotLabel = (key) => ({
+    heading: "Interface headings",
+    contentHeading1: "H1",
+    contentHeading2: "H2",
+    contentHeading3: "H3",
+    contentHeading4: "H4",
+    contentHeading5: "H5",
+    contentHeading6: "H6",
+    sidebarSelected: "Selected background",
+    sidebarSelectedForeground: "Selected text",
+})[key] ?? key.replace(/([a-z])([A-Z0-9])/g, "$1 $2").replace(/^./, (c) => c.toUpperCase());
+/** The same allowlists power sanitization and authoring: supported slots cannot disappear from editors. */
+export const THEME_SLOTS = [
+    ...["light", "dark"].flatMap((mode) => [
+        ...COLOR_KEYS.map((key) => ({
+            path: [mode, key],
+            label: slotLabel(key),
+            group: key.startsWith("contentHeading") ? "Content" : "Surfaces",
+            kind: "color",
+            cssVariable: cssName(key),
+            mode,
+            impact: SURFACE_IMPACT[key],
+            derivedFrom: SURFACE_DERIVATIONS[key],
+        })),
+        ...[
+            ["sidebar", SIDEBAR_KEYS, "Navigation"],
+            ["status", STATUS_KEYS, "Signals"],
+            ["charts", CHART_KEYS, "Charts"],
+            ["app", APP_KEYS, "Code & workflows"],
+        ].flatMap(([section, keys, group]) => keys.map((key, impact) => ({
+            path: [section, mode, key],
+            label: slotLabel(key),
+            group,
+            kind: "color",
+            cssVariable: cssName(key),
+            mode,
+            impact,
+            derivedFrom: group === "Navigation"
+                ? "page colours"
+                : group === "Signals" && String(key).startsWith("info")
+                    ? "primary action"
+                    : group === "Code & workflows"
+                        ? "page and signal colours"
+                        : undefined,
+        }))),
+    ]),
+    ...TYPOGRAPHY_KEYS.map((key) => ({
+        path: ["typography", key],
+        label: slotLabel(key),
+        group: "Typography & shape",
+        kind: "font",
+        cssVariable: `--font-${key.replace("Font", "")}`,
+        impact: key === "headingFont" ? 0 : key === "bodyFont" ? 1 : 3,
+    })),
+    ...RADIUS_KEYS.map((key) => ({
+        path: ["radius", key],
+        label: "Corner radius",
+        group: "Typography & shape",
+        kind: "length",
+        cssVariable: cssName(key),
+        impact: 2,
+    })),
+    ...BRANDING_KEYS.map((key) => ({
+        path: ["branding", key],
+        label: slotLabel(key),
+        group: "Brand",
+        kind: key.endsWith("Url") ? "image" : key === "logoHeight" ? "length" : "text",
+        impact: BRANDING_KEYS.indexOf(key),
+    })),
+];
 function cleanObject(value, keys) {
     if (!value || typeof value !== "object" || Array.isArray(value))
         return undefined;
@@ -165,6 +266,13 @@ function toCssVars(colors, sidebar, status, charts, typography, radius, app) {
     return {
         ["--background"]: colors.background,
         ["--foreground"]: colors.foreground,
+        ["--heading"]: colors.heading ?? colors.foreground,
+        ["--content-heading-1"]: colors.contentHeading1,
+        ["--content-heading-2"]: colors.contentHeading2,
+        ["--content-heading-3"]: colors.contentHeading3,
+        ["--content-heading-4"]: colors.contentHeading4,
+        ["--content-heading-5"]: colors.contentHeading5,
+        ["--content-heading-6"]: colors.contentHeading6,
         ["--card"]: colors.card,
         ["--card-foreground"]: colors.cardForeground,
         ["--popover"]: colors.popover,
@@ -251,7 +359,7 @@ function defaultSidebar(colors) {
         sidebarAccentForeground: colors.accentForeground,
         sidebarSelected: colors.muted,
         sidebarSelectedForeground: colors.foreground,
-        sidebarIcon: `color-mix(in srgb, ${colors.foreground} 60%, transparent)`,
+        sidebarIcon: "color-mix(in srgb, var(--sidebar-foreground) 60%, transparent)",
         sidebarBorder: colors.border,
         sidebarRing: colors.ring,
     };
@@ -322,8 +430,8 @@ function defaultApp(mode, colors) {
             workflowDiagramSkippedFill: "color-mix(in srgb, var(--muted) 80%, var(--background) 20%)",
             workflowDiagramSkippedStroke: "color-mix(in srgb, var(--muted-foreground) 36%, transparent)",
             workflowDiagramSkippedText: colors.mutedForeground,
-            workflowDiagramGlow: "rgba(182, 148, 255, 0.18)",
-            workflowDiagramShell: "rgba(182, 148, 255, 0.06)",
+            workflowDiagramGlow: "color-mix(in srgb, var(--primary) 18%, transparent)",
+            workflowDiagramShell: "color-mix(in srgb, var(--primary) 6%, transparent)",
         };
     }
     return {
@@ -344,8 +452,8 @@ function defaultApp(mode, colors) {
         workflowDiagramSkippedFill: "color-mix(in srgb, var(--muted) 65%, var(--background) 35%)",
         workflowDiagramSkippedStroke: "color-mix(in srgb, var(--muted-foreground) 22%, transparent)",
         workflowDiagramSkippedText: colors.mutedForeground,
-        workflowDiagramGlow: "rgba(124, 58, 237, 0.18)",
-        workflowDiagramShell: "rgba(124, 58, 237, 0.04)",
+        workflowDiagramGlow: "color-mix(in srgb, var(--primary) 18%, transparent)",
+        workflowDiagramShell: "color-mix(in srgb, var(--primary) 4%, transparent)",
     };
 }
 export const FOUNDRY_VIOLET_THEME = {
@@ -437,42 +545,114 @@ export function getThemePreset(name) {
         return FOUNDRY_VIOLET_THEME;
     return FOUNDRY_VIOLET_THEME;
 }
+function deriveSurfaceColors(resolved, explicit) {
+    // The preset remains the safe fallback for an entirely unthemed product.
+    // Only values depending on an authored colour should move. A sparse edit
+    // to an unrelated slot must not repaint preset surfaces.
+    const changed = new Set(Object.keys(explicit ?? {}).filter((key) => Boolean(explicit?.[key])));
+    if (!explicit || changed.size === 0)
+        return { colors: resolved, changed };
+    const next = { ...resolved, ...explicit };
+    const setDerived = (key, value, sources) => {
+        if (!explicit[key] && value && sources.some((source) => changed.has(source))) {
+            next[key] = value;
+            changed.add(key);
+        }
+    };
+    setDerived("heading", next.foreground, ["foreground"]);
+    setDerived("contentHeading1", next.heading, ["heading"]);
+    setDerived("contentHeading2", `color-mix(in srgb, ${next.heading} 78%, ${next.foreground} 22%)`, [
+        "heading",
+        "foreground",
+    ]);
+    setDerived("contentHeading3", next.foreground, ["foreground"]);
+    setDerived("contentHeading4", next.foreground, ["foreground"]);
+    setDerived("contentHeading5", next.foreground, ["foreground"]);
+    setDerived("contentHeading6", next.foreground, ["foreground"]);
+    setDerived("card", next.background, ["background"]);
+    setDerived("cardForeground", next.foreground, ["foreground"]);
+    setDerived("popover", next.card, ["card"]);
+    setDerived("popoverForeground", next.foreground, ["foreground"]);
+    setDerived("secondary", `color-mix(in srgb, ${next.background} 94%, ${next.primary} 6%)`, [
+        "background",
+        "primary",
+    ]);
+    setDerived("secondaryForeground", next.foreground, ["foreground"]);
+    setDerived("muted", `color-mix(in srgb, ${next.background} 97%, ${next.foreground} 3%)`, [
+        "background",
+        "foreground",
+    ]);
+    setDerived("mutedForeground", `color-mix(in srgb, ${next.foreground} 62%, ${next.background} 38%)`, ["foreground", "background"]);
+    setDerived("accent", `color-mix(in srgb, ${next.background} 90%, ${next.primary} 10%)`, [
+        "background",
+        "primary",
+    ]);
+    setDerived("accentForeground", next.foreground, ["foreground"]);
+    setDerived("border", `color-mix(in srgb, ${next.foreground} 14%, ${next.background} 86%)`, [
+        "foreground",
+        "background",
+    ]);
+    setDerived("input", next.border, ["border"]);
+    setDerived("ring", next.primary, ["primary"]);
+    return { colors: next, changed };
+}
 export function resolveThemeRuntime(layers, mode) {
     const effectiveMode = getEffectiveThemeMode(mode);
     const basePreset = layers.find((layer) => layer.basePreset && layer.basePreset.trim())?.basePreset ??
         "foundry-violet";
-    const definitions = [getThemePreset(basePreset), ...layers.map((layer) => layer.definition)];
+    const customDefinition = mergeThemeDefinitions(...layers.map((layer) => layer.definition));
+    const definitions = [getThemePreset(basePreset), customDefinition];
     const definition = mergeThemeDefinitions(...definitions);
-    const colors = {
-        ...(effectiveMode === "dark" ? definition.dark : definition.light),
+    const { colors, changed } = deriveSurfaceColors({ ...(effectiveMode === "dark" ? definition.dark : definition.light) }, effectiveMode === "dark" ? customDefinition.dark : customDefinition.light);
+    const explicitSidebar = effectiveMode === "dark" ? customDefinition.sidebar?.dark : customDefinition.sidebar?.light;
+    const presetSidebar = effectiveMode === "dark"
+        ? getThemePreset(basePreset).sidebar?.dark
+        : getThemePreset(basePreset).sidebar?.light;
+    const sidebarSources = {
+        sidebar: "secondary",
+        sidebarForeground: "foreground",
+        sidebarPrimary: "primary",
+        sidebarPrimaryForeground: "primaryForeground",
+        sidebarAccent: "accent",
+        sidebarAccentForeground: "accentForeground",
+        sidebarSelected: "muted",
+        sidebarSelectedForeground: "foreground",
+        sidebarIcon: null,
+        sidebarBorder: "border",
+        sidebarRing: "ring",
     };
+    const derivedSidebar = defaultSidebar(colors);
     const sidebar = {
-        ...defaultSidebar(colors),
-        ...(effectiveMode === "dark" ? definition.sidebar?.dark : definition.sidebar?.light),
+        ...derivedSidebar,
+        ...presetSidebar,
+        ...Object.fromEntries(Object.keys(sidebarSources)
+            .filter((key) => sidebarSources[key] && changed.has(sidebarSources[key]))
+            .map((key) => [key, derivedSidebar[key]])),
+        ...explicitSidebar,
     };
     const status = {
         ...defaultStatus(effectiveMode, colors),
-        ...(effectiveMode === "dark" ? definition.status?.dark : definition.status?.light),
+        ...(effectiveMode === "dark" ? customDefinition.status?.dark : customDefinition.status?.light),
     };
     const charts = {
         ...defaultCharts(effectiveMode),
-        ...(effectiveMode === "dark" ? definition.charts?.dark : definition.charts?.light),
+        ...(effectiveMode === "dark" ? customDefinition.charts?.dark : customDefinition.charts?.light),
     };
     const typography = {
         ...FOUNDRY_VIOLET_THEME.typography,
-        ...definition.typography,
+        ...customDefinition.typography,
     };
     const radius = {
         ...FOUNDRY_VIOLET_THEME.radius,
-        ...definition.radius,
+        ...customDefinition.radius,
     };
     const app = {
         ...defaultApp(effectiveMode, colors),
-        ...(effectiveMode === "dark" ? definition.app?.dark : definition.app?.light),
+        ...(effectiveMode === "dark" ? customDefinition.app?.dark : customDefinition.app?.light),
     };
     const branding = {
         ...FOUNDRY_VIOLET_THEME.branding,
-        ...definition.branding,
+        ...customDefinition.branding,
     };
     return {
         mode: effectiveMode,

package/dist/lib/theme-store.d.ts

@@ -7,7 +7,9 @@
 export type ThemeMode = "light" | "dark" | "system";
 interface ThemeState {
     mode: ThemeMode;
-    setMode: (mode: ThemeMode) => void;
+    setMode: (mode: ThemeMode, options?: {
+        persist?: boolean;
+    }) => void;
     /** Cycle through light -> dark -> system. */
     cycle: () => void;
 }

package/dist/lib/theme-store.js

@@ -38,8 +38,9 @@ export const useThemeStore = create((set, get) => {
     }
     return {
         mode: initial,
-        setMode: (mode) => {
-            localStorage.setItem(STORAGE_KEY, mode);
+        setMode: (mode, options) => {
+            if (options?.persist !== false)
+                localStorage.setItem(STORAGE_KEY, mode);
             applyTheme(mode);
             set({ mode });
         },

package/dist/styles.css

@@ -1,4 +1,11 @@
 @theme inline {
+  --color-heading: var(--heading, var(--foreground));
+  --color-content-heading-1: var(--content-heading-1, var(--heading, var(--foreground)));
+  --color-content-heading-2: var(--content-heading-2, var(--heading, var(--foreground)));
+  --color-content-heading-3: var(--content-heading-3, var(--foreground));
+  --color-content-heading-4: var(--content-heading-4, var(--foreground));
+  --color-content-heading-5: var(--content-heading-5, var(--foreground));
+  --color-content-heading-6: var(--content-heading-6, var(--foreground));
   --radius-xs: calc(var(--radius) - 6px);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -255,3 +262,10 @@ tr[data-state="selected"] > [data-pinned="cell"] {
 tr[data-active] > [data-pinned="cell"] {
   background-color: color-mix(in srgb, var(--primary) 8%, var(--pinned-surface));
 }
+
+@layer base {
+  :where(h1, h2, h3, h4, h5, h6) {
+    color: var(--heading, var(--foreground));
+    font-family: var(--font-heading, inherit);
+  }
+}

package/dist/workbench/selection-bridge.js

@@ -60,12 +60,9 @@ export function SelectionBridge({ children }) {
       .workbench-preview [data-sidebar-surface="desktop"] nav { padding-right: 16px; }
       .workbench-preview [data-sidebar-surface="desktop"] { border-right-color: transparent; }
       [data-connected-navigation="true"] [data-sidebar-surface="desktop"] [data-active-nav-row="true"] {
-        background: var(--background);
         border-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0;
       }
-    ` }), children, anchor && (_jsxs("svg", { "aria-hidden": "true", className: "pointer-events-none absolute z-20", style: { inset: 0, width: anchor.width + anchor.surfaceWidth, height: anchor.navHeight }, viewBox: `0 0 ${anchor.width + anchor.surfaceWidth} ${anchor.navHeight}`, children: [_jsx("path", { fill: "var(--background)", d: `M ${anchor.width},${anchor.top - 7} Q ${anchor.width},${anchor.top} ${anchor.width - 8},${anchor.top}
-          H ${anchor.rowRight} V ${anchor.top + anchor.height} H ${anchor.width - 8}
-          Q ${anchor.width},${anchor.top + anchor.height} ${anchor.width},${anchor.top + anchor.height + 7} Z` }), _jsx("path", { fill: "none", stroke: "var(--sidebar-ring)", strokeOpacity: 0.28, strokeWidth: 1, d: `M ${anchor.width + 12},0.5
+    ` }), children, anchor && (_jsx("svg", { "aria-hidden": "true", className: "pointer-events-none absolute z-20", style: { inset: 0, width: anchor.width + anchor.surfaceWidth, height: anchor.navHeight }, viewBox: `0 0 ${anchor.width + anchor.surfaceWidth} ${anchor.navHeight}`, children: _jsx("path", { fill: "none", stroke: "var(--sidebar-ring)", strokeOpacity: 0.6, strokeWidth: 1, d: `M ${anchor.width + 12},0.5
           H ${anchor.width + anchor.surfaceWidth - 12}
           Q ${anchor.width + anchor.surfaceWidth - 0.5},0.5 ${anchor.width + anchor.surfaceWidth - 0.5},12
           V ${anchor.navHeight - 12}
@@ -80,5 +77,5 @@ export function SelectionBridge({ children }) {
           Q ${anchor.left},${anchor.top + 0.5} ${anchor.left + 12},${anchor.top + 0.5}
           H ${anchor.width - 8}
           Q ${anchor.width - 0.5},${anchor.top + 0.5} ${anchor.width - 0.5},${anchor.top - 7}
-          V 12 Q ${anchor.width - 0.5},0.5 ${anchor.width + 12},0.5 Z` })] }))] }));
+          V 12 Q ${anchor.width - 0.5},0.5 ${anchor.width + 12},0.5 Z` }) }))] }));
 }

package/dist/workbench/workbench-styles.js

@@ -101,7 +101,6 @@ export function WorkbenchStyles() {
         }
         .workbench-preview {
           --workbench-header-height: 60px;
-          --sidebar: color-mix(in srgb, var(--background) 98.5%, var(--foreground) 1.5%);
           background: var(--sidebar);
           --workbench-outline: color-mix(in srgb, var(--sidebar-ring) 28%, transparent);
           padding: 8px 8px 8px 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.30.0",
+  "version": "0.31.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": [
@@ -80,8 +80,8 @@
     "recharts": "^3.10.1",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^3.5.0",
-    "@iloveagents/foundry-agent": "^0.30.0",
-    "@iloveagents/foundry-web-primitives": "^0.30.0"
+    "@iloveagents/foundry-agent": "^0.31.0",
+    "@iloveagents/foundry-web-primitives": "^0.31.0"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",