@iloveagents/foundry-web-ui 0.29.1 → 0.31.0

package/dist/lib/chat-runs-store.js

@@ -0,0 +1,173 @@
+import { create } from "zustand";
+import { agentStateStore, citationStore, streamingStatusStore, } from "@iloveagents/foundry-agent";
+export const isChatRunActive = (run) => run.status === "running" || run.status === "waiting";
+/** Browser-session activity. Message persistence remains owned by the history adapter. */
+export const useChatRuns = create(() => ({ foregroundId: null, runs: {}, deletedThreads: {} }));
+const agentStates = new Map();
+const appProjections = new Map();
+export function getChatStateSnapshot(threadId) {
+    return { state: agentStates.get(threadId)?.state, projection: appProjections.get(threadId) };
+}
+export function retainChatProjection(threadId, projection) {
+    appProjections.set(threadId, structuredClone(projection));
+}
+export function publishChatAgentState(threadId, state, patch) {
+    if (useChatRuns.getState().deletedThreads[threadId])
+        return;
+    agentStates.set(threadId, { state, patch });
+    if (isForegroundChat(threadId))
+        agentStateStore.getState().setAgentState(state, patch);
+}
+const signals = new Map();
+export function isForegroundChat(threadId) {
+    const foreground = useChatRuns.getState().foregroundId;
+    return foreground === null || foreground === threadId;
+}
+export function selectChatRun(threadId) {
+    useChatRuns.setState({ foregroundId: threadId });
+    citationStore.getState().selectThread(threadId);
+    const stored = agentStates.get(threadId);
+    if (stored)
+        agentStateStore.getState().setAgentState(stored.state, stored.patch);
+    else
+        agentStateStore.getState().reset();
+    streamingStatusStore.setState(signals.get(threadId) ?? {
+        streamingStatus: { status: "idle" },
+        runStartedAt: null,
+        lastSignalAt: null,
+    });
+}
+/** Call after a successful conversation deletion so session activity cannot restore it. */
+export function removeChatRun(threadId) {
+    const run = useChatRuns.getState().runs[threadId];
+    if (run && isChatRunActive(run))
+        run.stop();
+    useChatRuns.setState((state) => {
+        const runs = { ...state.runs };
+        delete runs[threadId];
+        return { runs, deletedThreads: { ...state.deletedThreads, [threadId]: true } };
+    });
+    citationStore.getState().clear(threadId);
+    signals.delete(threadId);
+    agentStates.delete(threadId);
+    appProjections.delete(threadId);
+    if (useChatRuns.getState().foregroundId === threadId) {
+        agentStateStore.getState().reset();
+        streamingStatusStore.setState({
+            streamingStatus: { status: "idle" },
+            runStartedAt: null,
+            lastSignalAt: null,
+        });
+    }
+}
+export function beginChatRun(run) {
+    const startedAt = Date.now();
+    useChatRuns.setState((s) => ({
+        runs: {
+            ...s.runs,
+            [run.threadId]: { ...run, status: "running", startedAt },
+        },
+    }));
+    signals.set(run.threadId, {
+        streamingStatus: { status: "thinking" },
+        runStartedAt: startedAt,
+        lastSignalAt: startedAt,
+    });
+    touchChatRun(run.threadId);
+}
+export function touchChatRun(threadId, status) {
+    const previous = signals.get(threadId);
+    if (!previous)
+        return;
+    const next = {
+        ...previous,
+        lastSignalAt: Date.now(),
+        ...(status ? { streamingStatus: status } : {}),
+    };
+    signals.set(threadId, next);
+    if (isForegroundChat(threadId))
+        streamingStatusStore.setState(next);
+}
+export function updateChatRun(threadId, status, error) {
+    useChatRuns.setState((s) => {
+        const run = s.runs[threadId];
+        if (!run)
+            return s;
+        return {
+            runs: {
+                ...s.runs,
+                [threadId]: {
+                    ...run,
+                    status,
+                    ...(error ? { error } : {}),
+                    ...(["completed", "failed", "cancelled"].includes(status)
+                        ? { finishedAt: Date.now() }
+                        : {}),
+                },
+            },
+        };
+    });
+    if (status !== "running" && status !== "waiting") {
+        signals.delete(threadId);
+        if (isForegroundChat(threadId))
+            streamingStatusStore.setState({
+                streamingStatus: { status: "idle" },
+                runStartedAt: null,
+                lastSignalAt: null,
+            });
+    }
+}
+/** Browser tools need the conversation in front, so they cannot act on another chat's page. */
+export async function waitForForegroundChat(threadId, signal) {
+    signal.throwIfAborted();
+    if (isForegroundChat(threadId))
+        return;
+    updateChatRun(threadId, "waiting");
+    await new Promise((resolve, reject) => {
+        const cleanup = () => {
+            unsubscribe();
+            signal.removeEventListener("abort", aborted);
+        };
+        const aborted = () => {
+            cleanup();
+            reject(signal.reason ?? new DOMException("Stopped", "AbortError"));
+        };
+        const unsubscribe = useChatRuns.subscribe(() => {
+            if (isForegroundChat(threadId)) {
+                cleanup();
+                resolve();
+            }
+        });
+        signal.addEventListener("abort", aborted, { once: true });
+        if (signal.aborted)
+            aborted();
+        else if (isForegroundChat(threadId)) {
+            cleanup();
+            resolve();
+        }
+    });
+    updateChatRun(threadId, "running");
+}
+export function warnBeforeChatUnload(event) {
+    if (!Object.values(useChatRuns.getState().runs).some(isChatRunActive))
+        return;
+    event.preventDefault();
+    event.returnValue = "";
+}
+/** Dispose browser-owned runs when the authenticated runtime is torn down. */
+export function disposeChatRuns() {
+    for (const run of Object.values(useChatRuns.getState().runs)) {
+        if (isChatRunActive(run))
+            run.stop();
+    }
+    signals.clear();
+    agentStates.clear();
+    appProjections.clear();
+    citationStore.setState({ results: [], byThread: {}, threadId: null });
+    useChatRuns.setState({ foregroundId: null, runs: {}, deletedThreads: {} });
+    streamingStatusStore.setState({
+        streamingStatus: { status: "idle" },
+        runStartedAt: null,
+        lastSignalAt: null,
+    });
+}

package/dist/lib/merge-chat-state.d.ts

@@ -0,0 +1,3 @@
+/** Apply changes in the visible UI to retained server state, preserving server
+ * updates when the corresponding UI value has not changed since the last turn. */
+export declare function mergeChatState(server: Record<string, unknown>, previous: Record<string, unknown> | undefined, current: Record<string, unknown>): Record<string, unknown>;

package/dist/lib/merge-chat-state.js

@@ -0,0 +1,21 @@
+/** Apply changes in the visible UI to retained server state, preserving server
+ * updates when the corresponding UI value has not changed since the last turn. */
+export function mergeChatState(server, previous, current) {
+    const result = { ...server };
+    for (const key of new Set([...Object.keys(previous ?? {}), ...Object.keys(current)])) {
+        const before = previous?.[key];
+        const after = current[key];
+        if (previous && JSON.stringify(before) === JSON.stringify(after))
+            continue;
+        if (!(key in current)) {
+            delete result[key];
+            continue;
+        }
+        const object = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+        result[key] =
+            object(before) && object(after) && object(server[key])
+                ? mergeChatState(server[key], before, after)
+                : after;
+    }
+    return result;
+}

package/dist/lib/nav-config.js

@@ -92,23 +92,40 @@ export const DEFAULT_NAV_CONFIG = [
     // },
 ];
 function findExactNavItem(items, path) {
+    const target = new URL(path, "http://navigation.local");
+    let best = null;
+    let specificity = -1;
     for (const item of items) {
-        if (item.to === path) {
-            return item;
+        const route = new URL(item.to, target.origin);
+        if (route.pathname.replace(/\/+$/, "") === target.pathname.replace(/\/+$/, "") &&
+            [...route.searchParams].every(([key, value]) => target.searchParams.getAll(key).includes(value)) &&
+            route.searchParams.size > specificity) {
+            best = item;
+            specificity = route.searchParams.size;
         }
-        if (item.children) {
-            const nested = findExactNavItem(item.children, path);
-            if (nested)
-                return nested;
+        const nested = item.children && findExactNavItem(item.children, path);
+        if (nested) {
+            const nestedSpecificity = new URL(nested.to, target.origin).searchParams.size;
+            if (nestedSpecificity > specificity) {
+                best = nested;
+                specificity = nestedSpecificity;
+            }
         }
     }
-    return null;
+    return best;
 }
 function findBestPrefixNavItem(items, path, currentBest = null) {
     let best = currentBest;
+    const target = new URL(path, "http://navigation.local");
     for (const item of items) {
-        if (path.startsWith(item.to + "/") && item.to.length > (best?.length ?? 0)) {
-            best = { item, length: item.to.length };
+        const route = new URL(item.to, target.origin);
+        const pathname = route.pathname.replace(/\/+$/, "");
+        const scope = route.searchParams.size;
+        if (target.pathname.startsWith(pathname + "/") &&
+            [...route.searchParams].every(([key, value]) => target.searchParams.getAll(key).includes(value)) &&
+            (pathname.length > (best?.length ?? 0) ||
+                (pathname.length === best?.length && scope > best.scope))) {
+            best = { item, length: pathname.length, scope };
         }
         if (item.children) {
             best = findBestPrefixNavItem(item.children, path, best);
@@ -117,22 +134,29 @@ function findBestPrefixNavItem(items, path, currentBest = null) {
     return best;
 }
 export function findNavItem(config, path) {
-    // Pass 1: exact match on items
+    // Prefer matching scope parameters; unrelated table filters do not change the page.
+    let exact = null;
+    let specificity = -1;
     for (const group of config) {
-        const base = {
-            group: group.label,
-            groupMeta: group.meta,
-            groupDescription: group.description,
-            groupInstructions: group.contextInstructions,
-        };
         const match = findExactNavItem(group.items, path);
-        if (match) {
-            return { ...base, item: match };
+        const score = match ? new URL(match.to, "http://navigation.local").searchParams.size : -1;
+        if (match && score > specificity) {
+            specificity = score;
+            exact = {
+                group: group.label,
+                groupMeta: group.meta,
+                groupDescription: group.description,
+                groupInstructions: group.contextInstructions,
+                item: match,
+            };
         }
     }
+    if (exact)
+        return exact;
+    const pathname = new URL(path, "http://navigation.local").pathname;
     // Pass 2: group-level `to` match (e.g. /spaces matches Workspaces group)
     for (const group of config) {
-        if (group.to && group.to === path) {
+        if (group.to && group.to === pathname) {
             return {
                 group: group.label,
                 groupMeta: group.meta,
@@ -145,6 +169,7 @@ export function findNavItem(config, path) {
     // Pass 3: longest-prefix match (for dynamic/parameterized routes)
     let best = null;
     let bestLen = 0;
+    let bestScope = -1;
     for (const group of config) {
         const base = {
             group: group.label,
@@ -153,9 +178,11 @@ export function findNavItem(config, path) {
             groupInstructions: group.contextInstructions,
         };
         const match = findBestPrefixNavItem(group.items, path);
-        if (match && match.length > bestLen) {
+        if (match &&
+            (match.length > bestLen || (match.length === bestLen && match.scope > bestScope))) {
             best = { ...base, item: match.item };
             bestLen = match.length;
+            bestScope = match.scope;
         }
     }
     return best;

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,