@datalayer/agent-runtimes 1.0.0 → 1.0.1

package/lib/Agent.js

@@ -25,8 +25,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Text, Spinner } from '@primer/react';
 import { AlertIcon } from '@primer/octicons-react';
-import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { Box, DatalayerThemeProvider, setupPrimerPortals, } from '@datalayer/primer-addons';
 import { Chat } from './components/chat';
 import { DEFAULT_MODEL } from './specs';
 import '../style/primer-primitives.css';

package/lib/AgentLexical.js

@@ -48,8 +48,7 @@ import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { Text, Spinner } from '@primer/react';
 import { AlertIcon } from '@primer/octicons-react';
-import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { Box, DatalayerThemeProvider, setupPrimerPortals, } from '@datalayer/primer-addons';
 import { JupyterReactTheme, loadJupyterConfig, createServerSettings, getJupyterServerUrl, getJupyterServerToken, setJupyterServerUrl, setJupyterServerToken, useJupyter, } from '@datalayer/jupyter-react';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
 import { ServiceManager } from '@jupyterlab/services';

package/lib/AgentNotebook.js

@@ -21,8 +21,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Text, Spinner } from '@primer/react';
 import { AlertIcon } from '@primer/octicons-react';
-import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { Box, DatalayerThemeProvider, setupPrimerPortals, } from '@datalayer/primer-addons';
 import { Notebook, JupyterReactTheme, loadJupyterConfig, createServerSettings, getJupyterServerUrl, getJupyterServerToken, setJupyterServerUrl, setJupyterServerToken, } from '@datalayer/jupyter-react';
 import { ServiceManager } from '@jupyterlab/services';
 import { Chat } from './components/chat';

package/lib/components/chat/components/ChatFloating.d.ts

@@ -65,7 +65,9 @@ export interface ChatFloatingProps {
     showPoweredBy?: boolean;
     /** Powered by tag props */
     poweredByProps?: Partial<PoweredByTagProps>;
-    /** Enable click outside to close */
+    /** Enable click outside to close
+     * @default false
+     */
     clickOutsideToClose?: boolean;
     /** Enable escape key to close */
     escapeToClose?: boolean;
@@ -89,7 +91,7 @@ export interface ChatFloatingProps {
     buttonIcon?: React.ReactNode;
     /** Button tooltip text */
     buttonTooltip?: string;
-    /** Brand color */
+    /** Brand color override. Defaults to the theme's `accent.emphasis` token. */
     brandColor?: string;
     /** Offset from edge (in pixels) */
     offset?: number;

package/lib/components/chat/components/ChatFloating.js

@@ -43,7 +43,7 @@ function useIsMobile(breakpoint = 640) {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', onViewModeChange, showPanelBackdrop = false, availableModels, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, showTokenUsage = true, runtimeId, historyEndpoint, historyAuthToken, pendingPrompt, showInformation = false, onInformationClick, panelProps, }) {
+export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = false, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor, offset = 20, animationDuration = 200, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', onViewModeChange, showPanelBackdrop = false, availableModels, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, showTokenUsage = true, runtimeId, historyEndpoint, historyAuthToken, pendingPrompt, showInformation = false, onInformationClick, panelProps, }) {
     // Store-based state
     const storeIsOpen = useChatOpen();
     const storeMessages = useChatMessages();

package/lib/examples/A2UiRestaurantExample.js

@@ -20,7 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider } from './stores/themedProvider';
 import { Text, Spinner, TextInput, Button } from '@primer/react';
 import { A2UIProvider, A2UIRenderer, useA2UI } from '../renderers/a2ui';
 // A2UI endpoint for pydantic-ai restaurant agent
@@ -278,7 +278,7 @@ const A2UiRestaurantExample = () => {
         console.log('A2UI Action:', action);
         // Actions are handled in the content component
     }, []);
-    return (_jsx(DatalayerThemeProvider, { children: _jsx(A2UIProvider, { onAction: handleAction, children: _jsxs(Box, { sx: {
+    return (_jsx(ThemedProvider, { children: _jsx(A2UIProvider, { onAction: handleAction, children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',
                     minHeight: '100vh',

package/lib/examples/AgUiAgenticExample.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider } from './stores/themedProvider';
 import { ChatFloating } from '../components/chat';
 // AG-UI endpoint for agentic chat example
 const AGENTIC_CHAT_ENDPOINT = 'http://localhost:8765/api/v1/examples/agentic_chat/';
@@ -17,7 +17,7 @@ const AGENTIC_CHAT_ENDPOINT = 'http://localhost:8765/api/v1/examples/agentic_cha
  * - Floating popup interface
  */
 const AgUiAgenticExample = () => {
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
                 padding: 4,
@@ -49,7 +49,7 @@ const AgUiAgenticExample = () => {
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: "This example demonstrates the AG-UI (Agent User Interface) protocol for streaming AI interactions. The agent uses SSE (Server-Sent Events) to stream responses and tool calls in real-time." }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Protocol Events:" }), " TEXT_MESSAGE_START, TEXT_MESSAGE_CONTENT, TEXT_MESSAGE_END, TOOL_CALL_START, TOOL_CALL_END"] })] })] }), _jsx(ChatFloating, { endpoint: AGENTIC_CHAT_ENDPOINT, title: "Agentic Chat", description: "Chat with an AI agent that can use tools like getting the current time.", position: "bottom-right", brandColor: "#7c3aed", defaultOpen: true, suggestions: [
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: "This example demonstrates the AG-UI (Agent User Interface) protocol for streaming AI interactions. The agent uses SSE (Server-Sent Events) to stream responses and tool calls in real-time." }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Protocol Events:" }), " TEXT_MESSAGE_START, TEXT_MESSAGE_CONTENT, TEXT_MESSAGE_END, TOOL_CALL_START, TOOL_CALL_END"] })] })] }), _jsx(ChatFloating, { endpoint: AGENTIC_CHAT_ENDPOINT, title: "Agentic Chat", description: "Chat with an AI agent that can use tools like getting the current time.", position: "bottom-right", defaultOpen: true, suggestions: [
                         {
                             title: 'What time is it?',
                             message: 'What is the current time?',

package/lib/examples/AgUiBackendToolRenderingExample.js

@@ -18,7 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider, useThemeBrandColor } from './stores/themedProvider';
 import { ChatFloating } from '../components/chat';
 import { InlineWeatherCard } from './ag-ui/weather';
 // AG-UI endpoint for backend tool rendering example
@@ -53,12 +53,13 @@ const renderWeatherToolResult = (context) => {
  * - Loading states while fetching data
  */
 const AgUiBackendToolRenderingExample = () => {
+    const brandColor = useThemeBrandColor();
     // Optional: still track weather for sidebar display if needed
     const handleStateUpdate = useCallback((_state) => {
         // State updates are still available if needed for other purposes
         // Uncomment to debug: console.log('[WeatherExample] State update:', _state);
     }, []);
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
                 padding: 4,
@@ -89,7 +90,7 @@ const AgUiBackendToolRenderingExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\"What's the weather in New York?\"" }), _jsx("li", { children: "\"Weather in London and Paris\"" }), _jsx("li", { children: "\"Is it sunny in Sydney?\"" }), _jsx("li", { children: "\"How's the weather in Tokyo today?\"" })] })] })] })] }), _jsx(ChatFloating, { endpoint: BACKEND_TOOL_RENDERING_ENDPOINT, title: "Weather Assistant", description: "Ask me about the weather anywhere in the world!", position: "bottom-right", brandColor: "#667eea", onStateUpdate: handleStateUpdate, renderToolResult: renderWeatherToolResult, suggestions: [
+                                            }, children: [_jsx("li", { children: "\"What's the weather in New York?\"" }), _jsx("li", { children: "\"Weather in London and Paris\"" }), _jsx("li", { children: "\"Is it sunny in Sydney?\"" }), _jsx("li", { children: "\"How's the weather in Tokyo today?\"" })] })] })] })] }), _jsx(ChatFloating, { endpoint: BACKEND_TOOL_RENDERING_ENDPOINT, title: "Weather Assistant", description: "Ask me about the weather anywhere in the world!", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, renderToolResult: renderWeatherToolResult, suggestions: [
                         {
                             title: 'Paris weather',
                             message: "What's the weather like in Paris?",

package/lib/examples/AgUiHaikuGenUIExample.js

@@ -19,7 +19,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useRef, useImperativeHandle, forwardRef, } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider, useThemeBrandColor } from './stores/themedProvider';
 import { ChatFloating } from '../components/chat';
 import { InlineHaikuCard, HaikuDisplay } from './ag-ui/haiku';
 // AG-UI endpoint for haiku generative UI example
@@ -60,6 +60,7 @@ HaikuDisplayWithRef.displayName = 'HaikuDisplayWithRef';
  * - Japanese/English text rendering
  */
 const AgUiHaikuGenUIExample = () => {
+    const brandColor = useThemeBrandColor();
     // Ref to the main display for adding haikus
     const displayRef = useRef(null);
     // Track processed tool call IDs to avoid duplicates
@@ -95,7 +96,7 @@ const AgUiHaikuGenUIExample = () => {
         }
         return (_jsx(InlineHaikuCard, { haiku: haiku, status: context.status, error: context.error }));
     }, []);
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
                 padding: 4,
@@ -133,7 +134,7 @@ const AgUiHaikuGenUIExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\"Write me a haiku about cherry blossoms\"" }), _jsx("li", { children: "\"Create a haiku about coding late at night\"" }), _jsx("li", { children: "\"Generate a haiku about the ocean\"" }), _jsx("li", { children: "\"Write a haiku about autumn leaves\"" })] })] })] })] }), _jsx(ChatFloating, { endpoint: HAIKU_ENDPOINT, title: "Haiku Generator", description: "Ask me to write haiku poetry about any topic!", position: "bottom-right", brandColor: "#667eea", defaultOpen: true, renderToolResult: renderHaikuToolResult, hideMessagesAfterToolUI: true, suggestions: [
+                                            }, children: [_jsx("li", { children: "\"Write me a haiku about cherry blossoms\"" }), _jsx("li", { children: "\"Create a haiku about coding late at night\"" }), _jsx("li", { children: "\"Generate a haiku about the ocean\"" }), _jsx("li", { children: "\"Write a haiku about autumn leaves\"" })] })] })] })] }), _jsx(ChatFloating, { endpoint: HAIKU_ENDPOINT, title: "Haiku Generator", description: "Ask me to write haiku poetry about any topic!", position: "bottom-right", brandColor: brandColor, defaultOpen: true, renderToolResult: renderHaikuToolResult, hideMessagesAfterToolUI: true, suggestions: [
                         {
                             title: 'Cherry blossoms',
                             message: 'Write me a haiku about cherry blossoms in spring.',

package/lib/examples/AgUiHumanInTheLoopExample.js

@@ -18,7 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useEffect } from 'react';
 import { Text, Checkbox, FormControl, Label, ProgressBar, Button, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider, useThemeBrandColor } from './stores/themedProvider';
 import { ChatFloating } from '../components/chat';
 import { TasklistIcon, CheckCircleFillIcon, XCircleFillIcon, } from '@primer/octicons-react';
 // AG-UI endpoint for human in the loop example
@@ -178,7 +178,8 @@ const renderTaskStepsTool = (context) => {
  * - UI state changes based on user actions
  */
 const AgUiHumanInTheLoopExample = () => {
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    const brandColor = useThemeBrandColor();
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
                 padding: 4,
@@ -206,7 +207,7 @@ const AgUiHumanInTheLoopExample = () => {
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'accent.muted',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Key Concept: respond() Callback" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.default' }, children: ["The ", _jsx("code", { children: "renderToolResult" }), " function receives a", ' ', _jsx("code", { children: "respond" }), " callback when the tool status is \"executing\". Calling ", _jsxs("code", { children: ["respond(", '{ accepted: true, steps: [...] }', ")"] }), ' ', "sends the user's decision back to the agent, completing the human-in-the-loop interaction."] })] })] }), _jsx(ChatFloating, { endpoint: HUMAN_IN_THE_LOOP_ENDPOINT, title: "Task Planner", description: "I can help you plan tasks. I'll generate steps for your review.", position: "bottom-right", brandColor: "#059669", renderToolResult: renderTaskStepsTool, hideMessagesAfterToolUI: true, suggestions: [
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Key Concept: respond() Callback" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.default' }, children: ["The ", _jsx("code", { children: "renderToolResult" }), " function receives a", ' ', _jsx("code", { children: "respond" }), " callback when the tool status is \"executing\". Calling ", _jsxs("code", { children: ["respond(", '{ accepted: true, steps: [...] }', ")"] }), ' ', "sends the user's decision back to the agent, completing the human-in-the-loop interaction."] })] })] }), _jsx(ChatFloating, { endpoint: HUMAN_IN_THE_LOOP_ENDPOINT, title: "Task Planner", description: "I can help you plan tasks. I'll generate steps for your review.", position: "bottom-right", brandColor: brandColor, renderToolResult: renderTaskStepsTool, hideMessagesAfterToolUI: true, suggestions: [
                         {
                             title: 'Plan a trip',
                             message: 'Plan a weekend trip to Paris.',

package/lib/examples/AgUiSharedStateExample.js

@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
 import { Text, Button, TextInput, Label } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider, useThemeBrandColor } from './stores/themedProvider';
 import { ChatFloating } from '../components/chat';
 import { PlusIcon, XIcon, BeakerIcon, ClockIcon, PersonIcon, } from '@primer/octicons-react';
 // AG-UI endpoint for shared state example
@@ -104,6 +104,7 @@ const RecipeDisplay = ({ recipe, onUpdate }) => {
  * - Editable UI that updates shared state
  */
 const AgUiSharedStateExample = () => {
+    const brandColor = useThemeBrandColor();
     const [recipe, setRecipe] = useState(DEFAULT_RECIPE);
     // Handle state updates from AG-UI
     const handleStateUpdate = useCallback((state) => {
@@ -125,7 +126,7 @@ const AgUiSharedStateExample = () => {
     const handleClear = useCallback(() => {
         setRecipe(DEFAULT_RECIPE);
     }, []);
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
                 padding: 4,
@@ -167,7 +168,7 @@ const AgUiSharedStateExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\"Create a recipe for chocolate chip cookies\"" }), _jsx("li", { children: "\"Add butter and sugar to the ingredients\"" }), _jsx("li", { children: "\"Update the prep time to 20 minutes\"" }), _jsx("li", { children: "\"Suggest 3 more ingredients for my recipe\"" })] })] })] })] }), _jsx(ChatFloating, { endpoint: SHARED_STATE_ENDPOINT, title: "Recipe Assistant", description: "Let's build a recipe together! I can add ingredients, instructions, and more.", position: "bottom-right", brandColor: "#be185d", onStateUpdate: handleStateUpdate, suggestions: [
+                                            }, children: [_jsx("li", { children: "\"Create a recipe for chocolate chip cookies\"" }), _jsx("li", { children: "\"Add butter and sugar to the ingredients\"" }), _jsx("li", { children: "\"Update the prep time to 20 minutes\"" }), _jsx("li", { children: "\"Suggest 3 more ingredients for my recipe\"" })] })] })] })] }), _jsx(ChatFloating, { endpoint: SHARED_STATE_ENDPOINT, title: "Recipe Assistant", description: "Let's build a recipe together! I can add ingredients, instructions, and more.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
                         {
                             title: 'Pasta recipe',
                             message: 'Help me create a simple pasta recipe.',

package/lib/examples/AgUiToolsBasedGenUIExample.js

@@ -15,7 +15,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
 import { Text, ProgressBar, Button } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider, useThemeBrandColor } from './stores/themedProvider';
 import { ChatFloating } from '../components/chat';
 import { CheckCircleIcon, CircleIcon, DotFillIcon, CheckIcon, XIcon, } from '@primer/octicons-react';
 // AG-UI endpoint for agentic generative UI example
@@ -169,6 +169,7 @@ const PlanDisplay = ({ plan, isInteractive = true, onStepToggle, onConfirm, onRe
  * - Interactive step selection with Confirm/Reject buttons
  */
 const AgUiToolsBasedGenUIExample = () => {
+    const brandColor = useThemeBrandColor();
     const [plan, setPlan] = useState(null);
     const [decision, setDecision] = useState(null);
     // Handle state updates from AG-UI events
@@ -209,7 +210,7 @@ const AgUiToolsBasedGenUIExample = () => {
         setDecision('rejected');
         console.log('Plan rejected');
     }, []);
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
                 padding: 4,
@@ -243,7 +244,7 @@ const AgUiToolsBasedGenUIExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "STATE_SNAPSHOT - Full state replacement" }), _jsx("li", { children: "STATE_DELTA - Incremental JSON Patch updates (RFC 6902)" }), _jsx("li", { children: "TOOL_CALL_START / TOOL_CALL_END - Tool execution tracking" })] })] })] })] }), _jsx(ChatFloating, { endpoint: AGENTIC_GENERATIVE_UI_ENDPOINT, title: "Plan Generator", description: "I can create detailed plans and update them in real-time.", position: "bottom-right", brandColor: "#0969da", onStateUpdate: handleStateUpdate, suggestions: [
+                                            }, children: [_jsx("li", { children: "STATE_SNAPSHOT - Full state replacement" }), _jsx("li", { children: "STATE_DELTA - Incremental JSON Patch updates (RFC 6902)" }), _jsx("li", { children: "TOOL_CALL_START / TOOL_CALL_END - Tool execution tracking" })] })] })] })] }), _jsx(ChatFloating, { endpoint: AGENTIC_GENERATIVE_UI_ENDPOINT, title: "Plan Generator", description: "I can create detailed plans and update them in real-time.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
                         {
                             title: 'Project plan',
                             message: 'Create a project plan for building a mobile app.',

package/lib/examples/AgentRuntimeChatExample.js

@@ -19,7 +19,7 @@ import { useEffect, useState } from 'react';
 import { Text, Spinner } from '@primer/react';
 import { AlertIcon } from '@primer/octicons-react';
 import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider } from './stores/themedProvider';
 import { Chat } from '../components/chat';
 setupPrimerPortals();
 const BASE_URL = 'http://localhost:8765';
@@ -89,7 +89,7 @@ const AgentRuntimeChatExample = () => {
     }, []);
     // Loading state while agent is being created
     if (isCreating) {
-        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+        return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'center',
@@ -101,7 +101,7 @@ const AgentRuntimeChatExample = () => {
     }
     // Error state
     if (error || !agentId) {
-        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+        return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'center',

package/lib/examples/AgentRuntimeCustomExample.js

@@ -7,7 +7,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { Spinner, Text } from '@primer/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider } from './stores/themedProvider';
 import { Chat } from '../components/chat';
 // Create a query client for React Query
 const queryClient = new QueryClient({
@@ -121,7 +121,7 @@ Be concise, helpful, and provide working code examples when appropriate.`,
  */
 const AgentRuntimeCustomExample = () => {
     const { agentId, isLoading, error, retry } = useEnsureAgent();
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',
                     height: '100vh',

package/lib/examples/AgentRuntimeFormExample.js

@@ -11,7 +11,7 @@ import { AiAgentIcon } from '@datalayer/icons-react';
 import { Blankslate } from '@primer/react/experimental';
 import { QueryClient, QueryClientProvider, useQuery, } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider } from './stores/themedProvider';
 import { Chat, useChatStore } from '../components/chat';
 import { DEFAULT_MODEL } from '../specs';
 import { useAgentsStore } from './stores/examplesStore';
@@ -528,7 +528,7 @@ githubClientId, kaggleToken, }) => {
         }
         setIsConfigured(false);
     };
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(DatalayerThemeProvider, { children: _jsxs(PageLayout, { containerWidth: "full", children: [_jsx(Header, { activeSession: activeSession, agentName: isNewMode ? undefined : currentAgent?.name, agentDescription: isNewMode ? undefined : currentAgent?.description, agentStatus: currentAgent?.status, showContextTree: showContextTree, isNewAgent: isNewMode, isConfigured: isConfigured, onSessionChange: setActiveSession, onToggleContextTree: () => setShowContextTree(!showContextTree), onToggleStatus: currentAgent
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsxs(PageLayout, { containerWidth: "full", children: [_jsx(Header, { activeSession: activeSession, agentName: isNewMode ? undefined : currentAgent?.name, agentDescription: isNewMode ? undefined : currentAgent?.description, agentStatus: currentAgent?.status, showContextTree: showContextTree, isNewAgent: isNewMode, isConfigured: isConfigured, onSessionChange: setActiveSession, onToggleContextTree: () => setShowContextTree(!showContextTree), onToggleStatus: currentAgent
                             ? () => toggleAgentStatus(currentAgent.id)
                             : undefined }), leftPaneVisible ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
                                     position: 'fixed',

package/lib/examples/AgentRuntimeLexical2Example.js

@@ -47,7 +47,8 @@ import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { Box } from '@datalayer/primer-addons';
 import { Text } from '@primer/react';
-import { JupyterReactTheme, useJupyter } from '@datalayer/jupyter-react';
+import { useJupyter } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
 // Import Chat components
 import { ChatFloating, useChatStore, useFrontendTool, DatalayerInferenceProvider, } from '../components/chat';
@@ -228,7 +229,7 @@ export function ChatLexicalExampleInner({ serviceManager, }) {
  * Main example component with Simple wrapper
  */
 export function AgentRuntimePopupLexicalExample() {
-    return (_jsx(JupyterReactTheme, { children: _jsx(JupyterWrapper, {}) }));
+    return (_jsx(ThemedJupyterProvider, { children: _jsx(JupyterWrapper, {}) }));
 }
 function JupyterWrapper() {
     const { serviceManager } = useJupyter();

package/lib/examples/AgentRuntimeLexicalExample.js

@@ -44,7 +44,8 @@ import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { Box } from '@datalayer/primer-addons';
-import { JupyterReactTheme, useJupyter } from '@datalayer/jupyter-react';
+import { useJupyter } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
 // Agent-runtimes imports
 import { ChatFloating } from '../components/chat';
@@ -215,7 +216,7 @@ const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, ser
                     padding: 3,
                     backgroundColor: 'canvas.default',
                     minHeight: '600px',
-                }, children: _jsxs(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: [_jsx(LexicalToolsPlugin, { onToolsReady: onToolsReady }), _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
+                }, children: _jsxs(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: [_jsx(LexicalToolsPlugin, { onToolsReady: onToolsReady }), _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(ThemedJupyterProvider, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), _jsx(ChatInlinePlugin, { protocol: {
                                             type: 'ag-ui',
                                             endpoint: AG_UI_ENDPOINT,
                                         }, isOpen: isAiOpen, onClose: closeAi, pendingPrompt: pendingPrompt, onPendingPromptConsumed: clearPendingPrompt })] }) })] }) })] }));
@@ -246,7 +247,7 @@ function LexicalWithChat({ content, serviceManager, }) {
                     color: 'danger.fg',
                     borderRadius: 2,
                     maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { endpoint: AG_UI_ENDPOINT, title: "Lexical AI Agent Runtime", description: "Hi! I can help you edit documents. Try: 'Insert a heading', 'Add a code block', or 'Create a list'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", brandColor: "#7c3aed", frontendTools: tools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
+                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { endpoint: AG_UI_ENDPOINT, title: "Lexical AI Agent Runtime", description: "Hi! I can help you edit documents. Try: 'Insert a heading', 'Add a code block', or 'Create a list'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", frontendTools: tools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
                     {
                         title: 'Insert heading',
                         message: 'Insert a heading that says "Welcome"',

package/lib/examples/AgentRuntimeLexicalSidebarExample.js

@@ -45,7 +45,8 @@ import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { Box } from '@datalayer/primer-addons';
-import { JupyterReactTheme, useJupyter } from '@datalayer/jupyter-react';
+import { useJupyter } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, LexicalConfigProvider, LexicalStatePlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
 // Import Chat components
 import { ChatSidebar, } from '../components/chat';
@@ -165,7 +166,7 @@ export function ChatLexicalExampleInner({ serviceManager, }) {
  * Main example component with Simple wrapper
  */
 export function AgentRuntimeLexicalSidebarExample() {
-    return (_jsx(JupyterReactTheme, { children: _jsx(SimpleWrapper, {}) }));
+    return (_jsx(ThemedJupyterProvider, { children: _jsx(SimpleWrapper, {}) }));
 }
 function SimpleWrapper() {
     const { serviceManager } = useJupyter();

package/lib/examples/AgentRuntimeNotebookExample.js

@@ -17,7 +17,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import React, { useEffect, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { JupyterReactTheme, Notebook } from '@datalayer/jupyter-react';
+import { Notebook } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 // Agent-runtimes imports
 import { ChatFloating } from '../components/chat';
 import { useNotebookTools } from '../tools/adapters/agent-runtimes/notebookHooks';
@@ -107,7 +108,7 @@ const NotebookUI = React.memo(function NotebookUI({ serviceManager, }) {
                     borderRadius: 2,
                     padding: 3,
                     backgroundColor: 'canvas.default',
-                }, children: serviceManager ? (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
+                }, children: serviceManager ? (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
 });
 function NotebookWithChat({ serviceManager, }) {
     // Ensure the agent exists before rendering chat
@@ -128,7 +129,7 @@ function NotebookWithChat({ serviceManager, }) {
                     color: 'danger.fg',
                     borderRadius: 2,
                     maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { endpoint: AG_UI_ENDPOINT, title: "Notebook AI Agent Runtime", description: "Hi! I can help you edit notebook cells. Try: 'Add a new code cell', 'Run cell 1', or 'Delete the last cell'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", brandColor: "#7c3aed", frontendTools: frontendTools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
+                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), isReady && (_jsx(ChatFloating, { endpoint: AG_UI_ENDPOINT, title: "Notebook AI Agent Runtime", description: "Hi! I can help you edit notebook cells. Try: 'Add a new code cell', 'Run cell 1', or 'Delete the last cell'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", frontendTools: frontendTools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, suggestions: [
                     {
                         title: 'Add a cell',
                         message: 'Insert a random cell to the notebook',

package/lib/examples/AgentRuntimeNotebookSidebarExample.js

@@ -20,7 +20,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useMemo } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { Notebook, JupyterReactTheme, useJupyter, } from '@datalayer/jupyter-react';
+import { Notebook, useJupyter } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 // Import Chat components
 import { ChatSidebar, } from '../components/chat';
 // Import agent-runtimes notebook tools
@@ -112,7 +113,7 @@ export function AgentRuntimeNotebookExampleInner({ serviceManager, }) {
  * Main example component with Simple wrapper
  */
 export function AgentRuntimeNotebookSidebarExample() {
-    return (_jsx(JupyterReactTheme, { children: _jsx(SimpleWrapper, {}) }));
+    return (_jsx(ThemedJupyterProvider, { children: _jsx(SimpleWrapper, {}) }));
 }
 function SimpleWrapper() {
     const { serviceManager } = useJupyter();

package/lib/examples/AgentRuntimeStandaloneExample.js

@@ -18,7 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider } from './stores/themedProvider';
 import { ChatStandalone } from '../components/chat';
 /**
  * Simulated AI responses for demo purposes.
@@ -97,7 +97,7 @@ const AgentRuntimePopupStandaloneExample = () => {
             throw err;
         }
     }, []);
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
                 padding: 4,
@@ -153,6 +153,6 @@ const AgentRuntimePopupStandaloneExample = () => {
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'attention.muted',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "When to Use" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, marginBottom: 2 }, children: ["Use ", _jsx("strong", { children: "ChatStandalone" }), " when:"] }), _jsxs(Box, { as: "ul", sx: { paddingLeft: 3, fontSize: 1 }, children: [_jsx("li", { children: "You have a custom AI backend that does not use AG-UI/ACP" }), _jsx("li", { children: "You want full control over the message handling logic" }), _jsx("li", { children: "You need to integrate with a specific API (OpenAI, etc.)" }), _jsx("li", { children: "You want a quick demo without setting up a backend server" })] }), _jsxs(Text, { as: "p", sx: { fontSize: 1, marginTop: 2 }, children: ["Use ", _jsx("strong", { children: "ChatFloating" }), " instead when:"] }), _jsxs(Box, { as: "ul", sx: { paddingLeft: 3, fontSize: 1 }, children: [_jsx("li", { children: "You have an AG-UI compatible backend" }), _jsx("li", { children: "You need built-in tool rendering support" }), _jsx("li", { children: "You want automatic protocol handling" })] })] })] }), _jsx(ChatStandalone, { title: "Demo Assistant", onSendMessage: handleSendMessage, position: "bottom-right", brandColor: "#7c3aed", enableStreaming: true, emptyStateMessage: "Hi! I'm a demo assistant. Try asking me for the time, a joke, or what I can do!", buttonTooltip: "Chat with Demo Assistant", showPoweredBy: true })] }) }));
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "When to Use" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, marginBottom: 2 }, children: ["Use ", _jsx("strong", { children: "ChatStandalone" }), " when:"] }), _jsxs(Box, { as: "ul", sx: { paddingLeft: 3, fontSize: 1 }, children: [_jsx("li", { children: "You have a custom AI backend that does not use AG-UI/ACP" }), _jsx("li", { children: "You want full control over the message handling logic" }), _jsx("li", { children: "You need to integrate with a specific API (OpenAI, etc.)" }), _jsx("li", { children: "You want a quick demo without setting up a backend server" })] }), _jsxs(Text, { as: "p", sx: { fontSize: 1, marginTop: 2 }, children: ["Use ", _jsx("strong", { children: "ChatFloating" }), " instead when:"] }), _jsxs(Box, { as: "ul", sx: { paddingLeft: 3, fontSize: 1 }, children: [_jsx("li", { children: "You have an AG-UI compatible backend" }), _jsx("li", { children: "You need built-in tool rendering support" }), _jsx("li", { children: "You want automatic protocol handling" })] })] })] }), _jsx(ChatStandalone, { title: "Demo Assistant", onSendMessage: handleSendMessage, position: "bottom-right", enableStreaming: true, emptyStateMessage: "Hi! I'm a demo assistant. Try asking me for the time, a joke, or what I can do!", buttonTooltip: "Chat with Demo Assistant", showPoweredBy: true })] }) }));
 };
 export default AgentRuntimePopupStandaloneExample;

package/lib/examples/CopilotKitLexicalExample.js

@@ -47,7 +47,8 @@ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { CopilotKit, useFrontendTool } from '@copilotkit/react-core';
 import { CopilotSidebar } from '@copilotkit/react-ui';
 import { Box } from '@datalayer/primer-addons';
-import { JupyterReactTheme, useJupyter } from '@datalayer/jupyter-react';
+import { useJupyter } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
 import { ActionRegistrar, useLexicalToolActions, } from '../tools/adapters/copilotkit/lexicalHooks';
 import { editorConfig } from './lexical/editorConfig';
@@ -146,7 +147,7 @@ const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, ser
                         padding: 3,
                         backgroundColor: 'canvas.default',
                         minHeight: '600px',
-                    }, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) }) }) })] }) }));
+                    }, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(ThemedJupyterProvider, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) }) }) })] }) }));
 });
 function LexicalWithTools({ content, serviceManager, }) {
     // Get all actions for this lexical document

package/lib/examples/CopilotKitNotebookExample.js

@@ -16,7 +16,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import React from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { JupyterReactTheme, Notebook } from '@datalayer/jupyter-react';
+import { Notebook } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 // CopilotKit imports
 import { CopilotKit, useFrontendTool } from '@copilotkit/react-core';
 import { CopilotSidebar } from '@copilotkit/react-ui';
@@ -50,7 +51,7 @@ const NotebookUI = React.memo(function NotebookUI({ serviceManager, }) {
                         borderRadius: 8,
                         padding: 24,
                         backgroundColor: 'var(--bgColor-default)',
-                    }, children: serviceManager ? (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { style: { padding: 24 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }) }));
+                    }, children: serviceManager ? (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { style: { padding: 24 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }) }));
 });
 /**
  * Component to register actions with CopilotKit.

package/lib/examples/DatalayerNotebookExample.js

@@ -7,7 +7,8 @@ import { useState, useEffect, useMemo } from 'react';
 import { Checkbox, FormControl, Heading } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { useCoreStore, createDatalayerServiceManager, DatalayerCollaborationProvider, } from '@datalayer/core';
-import { loadJupyterConfig, JupyterReactTheme, Notebook, } from '@datalayer/jupyter-react';
+import { loadJupyterConfig, Notebook } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 import nbformatExample from './stores/notebooks/NotebookExample1.ipynb.json';
 // This corresponds to the notebook ID in the URL when you open an existing notbook in your library
 const NOTEBOOK_ID = '01JZQRQ35GG871QQCZW9TB1A8J';
@@ -64,7 +65,7 @@ const DatalayerNotebookExample = (props) => {
             token,
         });
     }, [enableCollaboration, configuration]);
-    return (_jsx(JupyterReactTheme, { children: _jsxs(Box, { p: 3, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "Datalayer Notebook Collaboration Example" }), _jsx(Box, { sx: { mb: 3 }, children: _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: enableCollaboration, onChange: e => setEnableCollaboration(e.target.checked) }), _jsx(FormControl.Label, { children: "Enable Datalayer Collaboration" })] }) }), (!configuration?.runUrl || !configuration?.token) && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'danger.subtle' }, children: "Warning: Datalayer configuration is missing. Please configure runUrl and token to use DatalayerServiceManager and collaboration features." })), !serviceManager && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'attention.subtle' }, children: "Note: DatalayerServiceManager is not available. Notebook functionality will be limited." })), enableCollaboration ? (_jsxs(Box, { sx: {
+    return (_jsx(ThemedJupyterProvider, { children: _jsxs(Box, { p: 3, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "Datalayer Notebook Collaboration Example" }), _jsx(Box, { sx: { mb: 3 }, children: _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: enableCollaboration, onChange: e => setEnableCollaboration(e.target.checked) }), _jsx(FormControl.Label, { children: "Enable Datalayer Collaboration" })] }) }), (!configuration?.runUrl || !configuration?.token) && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'danger.subtle' }, children: "Warning: Datalayer configuration is missing. Please configure runUrl and token to use DatalayerServiceManager and collaboration features." })), !serviceManager && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'attention.subtle' }, children: "Note: DatalayerServiceManager is not available. Notebook functionality will be limited." })), enableCollaboration ? (_jsxs(Box, { sx: {
                         display: 'flex',
                         gap: 2,
                         flexDirection: 'row',

package/lib/examples/JupyterCellExample.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JupyterReactTheme, Cell, KernelIndicator, useJupyter, useKernelsStore, useCellsStore, } from '@datalayer/jupyter-react';
+import { Cell, KernelIndicator, useJupyter, useKernelsStore, useCellsStore, } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 import { Button, Label } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 const CELL_ID = 'cell-example-1';
@@ -14,6 +15,6 @@ const JupyterCellExampleContent = () => {
     return (_jsxs(Box, { p: 4, children: [_jsx(Box, { as: "h1", children: "Jupyter Cell Example" }), _jsxs(Box, { children: ["Source: ", cellsStore.getSource(CELL_ID)] }), _jsxs(Box, { children: ["Outputs Count: ", cellsStore.getOutputsCount(CELL_ID)] }), _jsxs(Box, { children: ["Kernel State:", ' ', _jsx(Label, { children: defaultKernel && kernelsStore.getExecutionState(defaultKernel.id) })] }), _jsxs(Box, { children: ["Kernel Phase:", ' ', _jsx(Label, { children: defaultKernel && kernelsStore.getExecutionPhase(defaultKernel.id) })] }), _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: "Kernel Indicator:" }), _jsx(Box, { ml: 3, children: _jsx(KernelIndicator, { kernel: defaultKernel && defaultKernel.connection }) })] }), _jsx(Box, { children: _jsx(Button, { onClick: () => cellsStore.execute(CELL_ID), children: "Run cell" }) }), _jsx(Cell, { source: DEFAULT_SOURCE, id: CELL_ID, kernel: defaultKernel })] }));
 };
 export const JupyterCellExample = (props) => {
-    return (_jsx(JupyterReactTheme, { children: _jsx(JupyterCellExampleContent, {}) }));
+    return (_jsx(ThemedJupyterProvider, { children: _jsx(JupyterCellExampleContent, {}) }));
 };
 export default JupyterCellExample;

package/lib/examples/JupyterNotebookExample.js

@@ -10,12 +10,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { useMemo } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { JupyterReactTheme, Notebook, NotebookToolbar, CellSidebarExtension, CellSidebarButton, } from '@datalayer/jupyter-react';
+import { Notebook, NotebookToolbar, CellSidebarExtension, CellSidebarButton, } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 import nbformatExample from './stores/notebooks/NotebookExample1.ipynb.json';
 const NOTEBOOK_ID = 'notebook-example-1';
 export const JupyterNotebookExample = (props) => {
     const { serviceManager } = props;
     const extensions = useMemo(() => [new CellSidebarExtension({ factory: CellSidebarButton })], []);
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { as: "h1", children: "Jupyter Notebook Example" }), serviceManager && (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { id: NOTEBOOK_ID, nbformat: nbformatExample, serviceManager: serviceManager, startDefaultKernel: true, extensions: extensions, Toolbar: NotebookToolbar }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { as: "h1", children: "Jupyter Notebook Example" }), serviceManager && (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { id: NOTEBOOK_ID, nbformat: nbformatExample, serviceManager: serviceManager, startDefaultKernel: true, extensions: extensions, Toolbar: NotebookToolbar }) }))] }));
 };
 export default JupyterNotebookExample;

package/lib/examples/main.js

@@ -8,10 +8,15 @@ import { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { loadJupyterConfig, JupyterReactTheme, createServerSettings, setJupyterServerUrl, setJupyterServerToken, getJupyterServerUrl, getJupyterServerToken, } from '@datalayer/jupyter-react';
 import { ServiceManager } from '@jupyterlab/services';
-import { coreStore, iamStore, createDatalayerServiceManager, DatalayerThemeProvider, } from '@datalayer/core';
+import { DatalayerThemeProvider, themeConfigs, themeVariants, } from '@datalayer/primer-addons';
+import { SegmentedControl } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { MoonIcon, SunIcon, DeviceDesktopIcon } from '@primer/octicons-react';
+import { coreStore, iamStore, createDatalayerServiceManager, } from '@datalayer/core';
 import { useChatStore } from '../components/chat/store';
 import { OAuthCallback } from '../identity';
 import { EXAMPLES } from './example-selector';
+import { useExampleThemeStore } from './stores/themeStore';
 import nbformatExample from './stores/notebooks/NotebookExample1.ipynb.json';
 // Load configurations from DOM
 const loadConfigurations = () => {
@@ -292,39 +297,84 @@ export const ExampleApp = () => {
     if (serviceManager) {
         exampleProps.serviceManager = serviceManager;
     }
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs("div", { style: { width: '100vw', height: '100vh', overflow: 'hidden' }, children: [_jsxs("div", { style: {
+    return (_jsx(ExampleAppThemed, { selectedExample: selectedExample, isChangingExample: isChangingExample, error: error, ExampleComponent: ExampleComponent, exampleProps: exampleProps, onExampleChange: handleExampleChange }));
+};
+/**
+ * Inner shell that reads from the theme store and wires
+ * DatalayerThemeProvider + the header bar with selectors.
+ */
+const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleComponent, exampleProps, onExampleChange, }) => {
+    const { colorMode, theme: themeVariant } = useExampleThemeStore();
+    const cfg = themeConfigs[themeVariant];
+    return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsxs(Box, { sx: {
+                width: '100vw',
+                height: '100vh',
+                overflow: 'hidden',
+                bg: 'canvas.default',
+                color: 'fg.default',
+            }, children: [_jsxs(Box, { sx: {
                         position: 'fixed',
                         top: 0,
                         left: 0,
                         right: 0,
                         zIndex: 100,
-                        padding: '10px 20px',
-                        background: '#f0f0f0',
-                        borderBottom: '1px solid #ccc',
+                        px: 3,
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'space-between',
-                        gap: '15px',
-                        fontSize: '14px',
-                        fontFamily: 'system-ui, -apple-system, sans-serif',
+                        gap: 3,
                         height: '50px',
-                        boxSizing: 'border-box',
-                    }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '15px' }, children: [_jsx("label", { style: { fontWeight: 500, color: '#333' }, children: "Select Example:" }), _jsx("select", { value: selectedExample, onChange: e => handleExampleChange(e.target.value), disabled: isChangingExample, style: {
-                                        padding: '6px 12px',
-                                        fontSize: '14px',
-                                        border: '1px solid #ccc',
-                                        borderRadius: '4px',
-                                        background: 'white',
+                        bg: 'canvas.subtle',
+                        borderBottom: '1px solid',
+                        borderColor: 'border.default',
+                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { as: "select", value: selectedExample, onChange: (e) => onExampleChange(e.target.value), disabled: isChangingExample, sx: {
+                                        px: 2,
+                                        py: '6px',
+                                        fontSize: 1,
+                                        fontFamily: 'mono',
+                                        border: '1px solid',
+                                        borderColor: 'border.default',
+                                        borderRadius: 2,
+                                        bg: 'canvas.default',
+                                        color: 'fg.default',
                                         cursor: isChangingExample ? 'not-allowed' : 'pointer',
-                                        fontFamily: 'monospace',
                                         minWidth: '250px',
+                                        outline: 'none',
+                                        '&:focus-visible': {
+                                            boxShadow: '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))',
+                                        },
                                     }, children: getExampleNames()
                                         .sort()
-                                        .map(name => (_jsx("option", { value: name, children: name }, name))) }), isChangingExample && (_jsx("span", { style: { color: '#666', fontSize: '12px' }, children: "Loading..." })), error && (_jsxs("span", { style: { color: '#dc3545', fontSize: '12px' }, children: ["Error: ", error] }))] }), _jsx("img", { src: "https://assets.datalayer.tech/datalayer-25.svg", alt: "Datalayer", style: { height: '24px' } })] }), _jsx("div", { style: {
+                                        .map(name => (_jsx("option", { value: name, children: name }, name))) }), isChangingExample && (_jsx(Box, { as: "span", sx: { color: 'fg.muted', fontSize: 0 }, children: "Loading\u2026" })), error && (_jsxs(Box, { as: "span", sx: { color: 'danger.fg', fontSize: 0 }, children: ["Error: ", error] }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: themeVariants.map(variant => {
+                                        const tcfg = themeConfigs[variant];
+                                        const isSelected = themeVariant === variant;
+                                        return (_jsx(Box, { as: "button", "aria-label": tcfg.label, "aria-pressed": isSelected, onClick: () => useExampleThemeStore.getState().setTheme(variant, false), sx: {
+                                                width: 24,
+                                                height: 24,
+                                                borderRadius: '50%',
+                                                backgroundColor: tcfg.brandColor,
+                                                border: '2px solid',
+                                                borderColor: isSelected ? 'accent.fg' : 'border.default',
+                                                cursor: 'pointer',
+                                                padding: 0,
+                                                outline: 'none',
+                                                transition: 'border-color 0.15s ease',
+                                                boxShadow: isSelected
+                                                    ? '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))'
+                                                    : 'none',
+                                                '&:hover': { borderColor: 'accent.fg' },
+                                                '&:focus-visible': {
+                                                    boxShadow: '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))',
+                                                },
+                                            } }, variant));
+                                    }) }), _jsxs(SegmentedControl, { "aria-label": "Color mode", size: "small", onChange: (index) => {
+                                        const modes = ['light', 'dark', 'auto'];
+                                        useExampleThemeStore.getState().setColorMode(modes[index]);
+                                    }, children: [_jsx(SegmentedControl.IconButton, { selected: colorMode === 'light', icon: SunIcon, "aria-label": "Light" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'dark', icon: MoonIcon, "aria-label": "Dark" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'auto', icon: DeviceDesktopIcon, "aria-label": "Auto" })] }), _jsx("img", { src: "https://assets.datalayer.tech/datalayer-25.svg", alt: "Datalayer", style: { height: '24px' } })] })] }), _jsx(Box, { sx: {
                         marginTop: '50px',
                         height: 'calc(100vh - 50px)',
                         overflow: 'auto',
-                    }, children: isChangingExample ? (_jsxs("div", { style: { padding: '40px', textAlign: 'center', color: '#666' }, children: [_jsxs("h3", { children: ["Loading ", selectedExample, "..."] }), _jsx("p", { children: "Please wait while the example loads." })] })) : ExampleComponent ? (_jsx(ExampleComponent, { ...exampleProps })) : null })] }) }));
+                    }, children: isChangingExample ? (_jsxs(Box, { sx: { p: 5, textAlign: 'center', color: 'fg.muted' }, children: [_jsxs("h3", { children: ["Loading ", selectedExample, "\u2026"] }), _jsx("p", { children: "Please wait while the example loads." })] })) : ExampleComponent ? (_jsx(ExampleComponent, { ...exampleProps })) : null })] }) }));
 };
 // Mount the app - check route to determine which app to render
 const root = document.getElementById('root');

package/lib/examples/stores/themeStore.d.ts

@@ -0,0 +1,33 @@
+import { type ThemeVariant, type ColorMode } from '@datalayer/primer-addons';
+export type { ThemeVariant, ColorMode };
+export interface ThemeState {
+    /** Current color mode (light, dark, or auto = follow OS). */
+    colorMode: ColorMode;
+    /** Current theme variant. */
+    theme: ThemeVariant;
+    /** Cycle through light → dark → auto. */
+    toggleColorMode: () => void;
+    /** Set a specific color mode. */
+    setColorMode: (mode: ColorMode) => void;
+    /**
+     * Set the active theme variant.
+     * @param applyDefaultColorMode When true (default), also switches the
+     *   color mode to the theme's configured default.
+     */
+    setTheme: (theme: ThemeVariant, applyDefaultColorMode?: boolean) => void;
+}
+/**
+ * Zustand store for theme preferences in the examples app.
+ * Persisted to localStorage under 'agent-runtimes-theme' key.
+ */
+export declare const useExampleThemeStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ThemeState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: ThemeState) => void) => () => void;
+        onFinishHydration: (fn: (state: ThemeState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown>>;
+    };
+}>;

package/lib/examples/stores/themeStore.js

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { themeConfigs, } from '@datalayer/primer-addons';
+/**
+ * Zustand store for theme preferences in the examples app.
+ * Persisted to localStorage under 'agent-runtimes-theme' key.
+ */
+export const useExampleThemeStore = create()(persist(set => ({
+    colorMode: 'light',
+    theme: 'datalayer',
+    toggleColorMode: () => set(state => {
+        const cycle = {
+            light: 'dark',
+            dark: 'auto',
+            auto: 'light',
+        };
+        return { colorMode: cycle[state.colorMode] };
+    }),
+    setColorMode: (mode) => set({ colorMode: mode }),
+    setTheme: (theme, applyDefaultColorMode = true) => set(() => {
+        const next = { theme };
+        if (applyDefaultColorMode) {
+            next.colorMode = themeConfigs[theme].defaultColorMode;
+        }
+        return next;
+    }),
+}), {
+    name: 'agent-runtimes-theme',
+    storage: createJSONStorage(() => localStorage),
+    partialize: state => ({
+        colorMode: state.colorMode,
+        theme: state.theme,
+    }),
+}));

package/lib/examples/stores/themedProvider.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Theme-aware wrappers for example components.
+ *
+ * These are drop-in replacements for `DatalayerThemeProvider` and
+ * `JupyterReactTheme` that automatically read theme / color-mode
+ * from the shared `useExampleThemeStore`.
+ *
+ * Usage: replace
+ *   import { DatalayerThemeProvider } from '@datalayer/primer-addons';
+ * with
+ *   import { ThemedProvider } from './stores/themedProvider';
+ *
+ * and swap `<DatalayerThemeProvider>` → `<ThemedProvider>`.
+ */
+import React from 'react';
+import { type IDatalayerThemeProviderProps } from '@datalayer/primer-addons';
+/**
+ * Drop-in replacement for `<DatalayerThemeProvider>`.
+ * Reads theme/colorMode from the example theme store and
+ * forwards them to the real provider. Any explicit props
+ * (colorMode, theme, themeStyles) are still respected as overrides.
+ */
+export declare const ThemedProvider: React.FC<React.PropsWithChildren<Omit<IDatalayerThemeProviderProps, 'ref'>>>;
+/**
+ * Drop-in replacement for `<JupyterReactTheme>`.
+ * Wraps children in `ThemedProvider` so Jupyter components also
+ * pick up the selected theme/color-mode.
+ *
+ * The wrapper automatically derives `colormode` and `backgroundColor`
+ * from the shared theme store so every Jupyter component inherits
+ * the correct palette — mirroring the pattern used by
+ * `ProjectNotebookEditor`.
+ *
+ * @param useJupyterReactTheme - When `true`, wraps children in
+ *   `<JupyterReactTheme>` inside the themed provider. Defaults to `true`.
+ */
+/**
+ * Hook that returns the `brandColor` for the currently selected theme.
+ * Use this in example components to pass a dynamic brand color to
+ * `<ChatFloating>` or any other component that accepts a `brandColor` prop.
+ */
+export declare const useThemeBrandColor: () => string;
+export declare const ThemedJupyterProvider: React.FC<React.PropsWithChildren<{
+    useJupyterReactTheme?: boolean;
+}>>;

package/lib/examples/stores/themedProvider.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DatalayerThemeProvider, themeConfigs, } from '@datalayer/primer-addons';
+import { JupyterReactTheme } from '@datalayer/jupyter-react';
+import { useExampleThemeStore } from './themeStore';
+/**
+ * Drop-in replacement for `<DatalayerThemeProvider>`.
+ * Reads theme/colorMode from the example theme store and
+ * forwards them to the real provider. Any explicit props
+ * (colorMode, theme, themeStyles) are still respected as overrides.
+ */
+export const ThemedProvider = ({ children, ...rest }) => {
+    const { colorMode, theme: themeVariant } = useExampleThemeStore();
+    const cfg = themeConfigs[themeVariant];
+    return (_jsx(DatalayerThemeProvider, { colorMode: rest.colorMode ?? colorMode, theme: rest.theme ?? cfg.primerTheme, themeStyles: rest.themeStyles ?? cfg.themeStyles, ...rest, children: children }));
+};
+/**
+ * Drop-in replacement for `<JupyterReactTheme>`.
+ * Wraps children in `ThemedProvider` so Jupyter components also
+ * pick up the selected theme/color-mode.
+ *
+ * The wrapper automatically derives `colormode` and `backgroundColor`
+ * from the shared theme store so every Jupyter component inherits
+ * the correct palette — mirroring the pattern used by
+ * `ProjectNotebookEditor`.
+ *
+ * @param useJupyterReactTheme - When `true`, wraps children in
+ *   `<JupyterReactTheme>` inside the themed provider. Defaults to `true`.
+ */
+/**
+ * Hook that returns the `brandColor` for the currently selected theme.
+ * Use this in example components to pass a dynamic brand color to
+ * `<ChatFloating>` or any other component that accepts a `brandColor` prop.
+ */
+export const useThemeBrandColor = () => {
+    const { theme: themeVariant } = useExampleThemeStore();
+    return themeConfigs[themeVariant].brandColor;
+};
+export const ThemedJupyterProvider = ({ children, useJupyterReactTheme = true }) => {
+    const { colorMode, theme: themeVariant } = useExampleThemeStore();
+    const cfg = themeConfigs[themeVariant];
+    // Resolve 'auto' to an actual mode so we can pick the right style set.
+    const resolvedMode = colorMode === 'auto'
+        ? typeof window !== 'undefined' &&
+            window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light'
+        : colorMode === 'dark'
+            ? 'dark'
+            : 'light';
+    // Extract the canvas background from the theme's CSS-var overrides.
+    const modeStyles = resolvedMode === 'dark' ? cfg.themeStyles.dark : cfg.themeStyles.light;
+    const backgroundColor = modeStyles['--bgColor-default'];
+    return (_jsx(ThemedProvider, { children: useJupyterReactTheme ? (_jsx(JupyterReactTheme, { colormode: colorMode, backgroundColor: backgroundColor, children: children })) : (children) }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/agent-runtimes",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "type": "module",
   "workspaces": [
     ".",
@@ -130,10 +130,11 @@
     "@anthropic-ai/sdk": "^0.52.0",
     "@datalayer/core": "^1.0.1",
     "@datalayer/icons-react": "^1.0.6",
-    "@datalayer/jupyter-lexical": "^1.0.11",
+    "@datalayer/jupyter-lexical": "^1.0.13",
     "@datalayer/jupyter-react": "^2.0.3",
-    "@datalayer/primer-addons": "^1.0.7",
+    "@datalayer/primer-addons": "^1.0.10",
     "@datalayer/primer-rjsf": "^1.0.1",
+    "@excalidraw/excalidraw": "^0.18.0",
     "@jupyter-widgets/base-manager": "^1.0.12",
     "@jupyter-widgets/schema": "^0.5.6",
     "@jupyterlab/apputils": "^4.6.0",