@datalayer/agent-runtimes 1.0.10 → 1.0.17

package/lib/examples/utils/a2ui.js

@@ -5,7 +5,85 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { basicCatalog, } from '@a2ui/react/v0_9';
 import { MessageProcessor, } from '@a2ui/web_core/v0_9';
+import { themeConfigs, } from '@datalayer/primer-addons';
+import { useExampleThemeStore } from './themeStore';
+function resolveColorMode(mode) {
+    if (mode === 'dark') {
+        return 'dark';
+    }
+    if (mode === 'light') {
+        return 'light';
+    }
+    if (typeof window !== 'undefined') {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light';
+    }
+    return 'light';
+}
+function createA2uiTheme(themeVariant, colorMode) {
+    const cfg = themeConfigs[themeVariant];
+    const resolvedMode = resolveColorMode(colorMode);
+    const modeStyles = resolvedMode === 'dark' ? cfg.themeStyles.dark : cfg.themeStyles.light;
+    const vars = modeStyles;
+    // Primer buttons use a subtle resting shadow in light mode and none in dark.
+    const buttonShadow = resolvedMode === 'dark' ? 'none' : '0 1px 0 rgba(31, 35, 40, 0.04)';
+    return {
+        mode: resolvedMode,
+        // Use Primer's primary button color token so A2UI primary buttons match
+        // Primer semantics regardless of the selected brand palette.
+        '--a2ui-color-primary': vars['--button-primary-bgColor-rest'] ?? cfg.brandColor,
+        '--a2ui-color-primary-hover': vars['--button-primary-bgColor-hover'],
+        '--a2ui-color-on-primary': vars['--button-primary-fgColor-rest'],
+        '--a2ui-color-secondary': vars['--button-default-bgColor-rest'],
+        '--a2ui-color-secondary-hover': vars['--button-default-bgColor-hover'],
+        '--a2ui-color-on-secondary': vars['--button-default-fgColor-rest'],
+        '--a2ui-color-background': vars['--bgColor-default'],
+        '--a2ui-color-surface': vars['--bgColor-muted'],
+        '--a2ui-color-on-background': vars['--fgColor-default'],
+        '--a2ui-color-on-surface': vars['--fgColor-default'],
+        '--a2ui-color-input': vars['--bgColor-default'],
+        '--a2ui-color-on-input': vars['--fgColor-default'],
+        '--a2ui-color-border': vars['--borderColor-default'],
+        '--a2ui-color-border-hover': vars['--borderColor-emphasis'],
+        '--a2ui-text-caption-color': vars['--fgColor-muted'],
+        '--a2ui-border-radius': '12px',
+        '--a2ui-card-border-radius': '14px',
+        '--a2ui-card-box-shadow': resolvedMode === 'dark'
+            ? '0 8px 24px rgba(1, 4, 9, 0.55)'
+            : '0 8px 20px rgba(31, 35, 40, 0.08)',
+        // Primer-style button tokens: compact padding, 6px radius, semibold label,
+        // hairline default border and a subtle resting shadow.
+        '--a2ui-button-padding': '5px 16px',
+        '--a2ui-button-margin': '0',
+        '--a2ui-button-border-radius': '6px',
+        '--a2ui-button-font-weight': '500',
+        '--a2ui-button-box-shadow': buttonShadow,
+        '--a2ui-button-background': vars['--button-default-bgColor-rest'],
+        '--a2ui-button-border': `1px solid ${vars['--button-default-borderColor-rest']}`,
+        '--a2ui-textfield-border': `1px solid ${vars['--control-borderColor-rest'] ?? vars['--borderColor-default']}`,
+        '--a2ui-textfield-background': vars['--control-bgColor-rest'] ?? vars['--bgColor-default'],
+        '--a2ui-textfield-color': vars['--fgColor-default'],
+        '--a2ui-textfield-label-color': vars['--fgColor-muted'],
+        '--a2ui-textfield-color-border-hover': vars['--control-borderColor-emphasis'] ?? vars['--borderColor-emphasis'],
+        '--a2ui-textfield-color-border-focus': vars['--button-primary-bgColor-rest'],
+        '--a2ui-textfield-color-error': vars['--fgColor-danger'],
+        '--a2ui-textfield-border-radius': '6px',
+        '--a2ui-textfield-padding': '5px 12px',
+        '--a2ui-control-height': '32px',
+    };
+}
 export function useA2uiProcessor(onAction) {
+    const { colorMode, theme: themeVariant } = useExampleThemeStore();
+    const a2uiTheme = useMemo(() => createA2uiTheme(themeVariant, colorMode), [themeVariant, colorMode]);
+    // The A2UI basic catalog renders purely from inherited `--a2ui-*` CSS custom
+    // properties; it does not read `createSurface.theme`. Expose the computed
+    // theme as an inline style so callers can apply it to the surface container
+    // and have theme/color-mode changes cascade live to the rendered content.
+    const themeStyle = useMemo(() => {
+        const { mode, ...vars } = a2uiTheme;
+        return { colorScheme: mode, ...vars };
+    }, [a2uiTheme]);
     const processor = useMemo(() => new MessageProcessor([basicCatalog], onAction), [onAction]);
     const [surfaces, setSurfaces] = useState(() => Array.from(processor.model.surfacesMap.values()));
     useEffect(() => {
@@ -21,8 +99,24 @@ export function useA2uiProcessor(onAction) {
         };
     }, [processor]);
     const processMessages = useCallback((messages) => {
-        processor.processMessages(messages);
-    }, [processor]);
+        const themedMessages = messages.map(message => {
+            const msg = message;
+            if (!msg.createSurface) {
+                return message;
+            }
+            return {
+                ...msg,
+                createSurface: {
+                    ...msg.createSurface,
+                    theme: {
+                        ...a2uiTheme,
+                        ...(msg.createSurface.theme ?? {}),
+                    },
+                },
+            };
+        });
+        processor.processMessages(themedMessages);
+    }, [processor, a2uiTheme]);
     const resetSurfaces = useCallback(() => {
         Array.from(processor.model.surfacesMap.keys()).forEach(id => {
             processor.model.deleteSurface(id);
@@ -33,6 +127,7 @@ export function useA2uiProcessor(onAction) {
         surfaces,
         processMessages,
         resetSurfaces,
+        themeStyle,
     };
 }
 export function createSceneMessages(args) {

package/lib/examples/utils/agentSummaryStore.d.ts

@@ -0,0 +1,21 @@
+export type AgentSummaryLocation = 'local' | 'cloud';
+export interface AgentSummary {
+    exampleId: string;
+    agentName: string;
+    agentId?: string;
+    specId?: string;
+    location: AgentSummaryLocation;
+    baseUrl: string;
+    status?: string;
+    isReady?: boolean;
+    error?: string;
+}
+interface AgentSummaryState {
+    active: AgentSummary | null;
+    setActive: (summary: AgentSummary) => void;
+    clearActive: (exampleId?: string) => void;
+}
+export declare const agentSummaryStore: import("zustand").StoreApi<AgentSummaryState>;
+export declare function useAgentSummaryStore(): AgentSummaryState;
+export declare function useAgentSummaryStore<T>(selector: (state: AgentSummaryState) => T): T;
+export {};

package/lib/examples/utils/agentSummaryStore.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { createStore } from 'zustand/vanilla';
+import { useStore } from 'zustand';
+export const agentSummaryStore = createStore(set => ({
+    active: null,
+    setActive: (summary) => set({ active: summary }),
+    clearActive: (exampleId) => set(state => {
+        if (!state.active) {
+            return state;
+        }
+        if (!exampleId || state.active.exampleId === exampleId) {
+            return { active: null };
+        }
+        return state;
+    }),
+}));
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useAgentSummaryStore(selector) {
+    return useStore(agentSummaryStore, selector);
+}

package/lib/examples/utils/notebooks/Empty.ipynb.json

@@ -1,33 +1,33 @@
 {
-  "cells": [
-    {
-      "cell_type": "code",
-      "execution_count": null,
-      "id": "309d9aeb-4a19-400b-b5fe-ed20091b357b",
-      "metadata": {},
-      "outputs": [],
-      "source": []
-    }
-  ],
-  "metadata": {
-    "kernelspec": {
-      "display_name": "Python 3 (ipykernel)",
-      "language": "python",
-      "name": "python3"
+    "cells": [
+        {
+            "cell_type": "code",
+            "execution_count": null,
+            "id": "309d9aeb-4a19-400b-b5fe-ed20091b357b",
+            "metadata": {},
+            "outputs": [],
+            "source": []
+        }
+    ],
+    "metadata": {
+        "kernelspec": {
+            "display_name": "Python 3 (ipykernel)",
+            "language": "python",
+            "name": "python3"
+        },
+        "language_info": {
+            "codemirror_mode": {
+                "name": "ipython",
+                "version": 3
+            },
+            "file_extension": ".py",
+            "mimetype": "text/x-python",
+            "name": "python",
+            "nbconvert_exporter": "python",
+            "pygments_lexer": "ipython3",
+            "version": "3.11.4"
+        }
     },
-    "language_info": {
-      "codemirror_mode": {
-        "name": "ipython",
-        "version": 3
-      },
-      "file_extension": ".py",
-      "mimetype": "text/x-python",
-      "name": "python",
-      "nbconvert_exporter": "python",
-      "pygments_lexer": "ipython3",
-      "version": "3.11.4"
-    }
-  },
-  "nbformat": 4,
-  "nbformat_minor": 5
+    "nbformat": 4,
+    "nbformat_minor": 5
 }

package/lib/examples/utils/runtimeTargetStore.d.ts

@@ -0,0 +1,9 @@
+export type ExampleRuntimeTarget = 'local' | 'cloud';
+interface RuntimeTargetState {
+    target: ExampleRuntimeTarget;
+    setTarget: (target: ExampleRuntimeTarget) => void;
+}
+export declare const runtimeTargetStore: import("zustand").StoreApi<RuntimeTargetState>;
+export declare function useRuntimeTargetStore(): RuntimeTargetState;
+export declare function useRuntimeTargetStore<T>(selector: (state: RuntimeTargetState) => T): T;
+export {};

package/lib/examples/utils/runtimeTargetStore.js

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { createStore } from 'zustand/vanilla';
+import { useStore } from 'zustand';
+const STORAGE_KEY = 'agent-runtimes.examples.runtime-target';
+const readStoredTarget = () => {
+    if (typeof window === 'undefined') {
+        return 'local';
+    }
+    const value = window.localStorage.getItem(STORAGE_KEY);
+    return value === 'cloud' ? 'cloud' : 'local';
+};
+export const runtimeTargetStore = createStore(set => ({
+    target: readStoredTarget(),
+    setTarget: (target) => {
+        if (typeof window !== 'undefined') {
+            window.localStorage.setItem(STORAGE_KEY, target);
+        }
+        set({ target });
+    },
+}));
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useRuntimeTargetStore(selector) {
+    return useStore(runtimeTargetStore, selector);
+}

package/lib/examples/utils/teardownAgents.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Tear down server-side agents created by examples and wipe in-process agent
+ * state so a fresh example / runtime target boots with a clean slate.
+ *
+ * Deletes agents cached in sessionStorage under `agent-runtimes:agentId:<base>`
+ * (all of them, or only the given `agentId` when provided), then resets the
+ * chat, conversation and runtime stores and drops the persisted slice.
+ *
+ * @param agentBaseUrl - Base URL of the agent-runtimes server the agents live on.
+ * @param token - Optional bearer token for authenticated deletes.
+ * @param agentId - Optional specific agent id to tear down (defaults to all cached).
+ */
+export declare function teardownExampleAgents(agentBaseUrl: string, token: string | undefined, agentId?: string): Promise<void>;

package/lib/examples/utils/teardownAgents.js

@@ -0,0 +1,78 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { agentRuntimeStore, useChatStore, useConversationStore, } from '../../stores';
+/**
+ * Tear down server-side agents created by examples and wipe in-process agent
+ * state so a fresh example / runtime target boots with a clean slate.
+ *
+ * Deletes agents cached in sessionStorage under `agent-runtimes:agentId:<base>`
+ * (all of them, or only the given `agentId` when provided), then resets the
+ * chat, conversation and runtime stores and drops the persisted slice.
+ *
+ * @param agentBaseUrl - Base URL of the agent-runtimes server the agents live on.
+ * @param token - Optional bearer token for authenticated deletes.
+ * @param agentId - Optional specific agent id to tear down (defaults to all cached).
+ */
+export async function teardownExampleAgents(agentBaseUrl, token, agentId) {
+    // Collect the cached agent-id keys to delete.
+    const agentIdKeys = [];
+    try {
+        for (let i = 0; i < sessionStorage.length; i++) {
+            const key = sessionStorage.key(i);
+            if (key && key.startsWith('agent-runtimes:agentId:')) {
+                if (!agentId || sessionStorage.getItem(key) === agentId) {
+                    agentIdKeys.push(key);
+                }
+            }
+        }
+    }
+    catch {
+        // sessionStorage unavailable; skip agent deletion.
+    }
+    const idsToDelete = new Set();
+    if (agentId) {
+        idsToDelete.add(agentId);
+    }
+    for (const key of agentIdKeys) {
+        try {
+            const cached = sessionStorage.getItem(key);
+            if (cached)
+                idsToDelete.add(cached);
+        }
+        catch {
+            /* ignore */
+        }
+    }
+    await Promise.all([...idsToDelete].map(async (id) => {
+        try {
+            await fetch(`${agentBaseUrl}/api/v1/agents/${encodeURIComponent(id)}`, {
+                method: 'DELETE',
+                headers: token ? { Authorization: `Bearer ${token}` } : {},
+            });
+        }
+        catch {
+            // Best-effort teardown: ignore network / 404 errors.
+        }
+    }));
+    for (const key of agentIdKeys) {
+        try {
+            sessionStorage.removeItem(key);
+        }
+        catch {
+            /* ignore */
+        }
+    }
+    // Wipe every piece of in-process agent state so the next boot is clean.
+    useChatStore.getState().reset();
+    useConversationStore.getState().clearAll();
+    agentRuntimeStore.getState().reset();
+    // Drop the persisted slice so nothing rehydrates a previous agent state.
+    try {
+        localStorage.removeItem('agent-runtimes-storage');
+    }
+    catch {
+        // Ignore storage failures (e.g. private mode).
+    }
+}

package/lib/examples/utils/useExampleAgentRuntimesUrl.d.ts

@@ -1,3 +1,5 @@
+import { type ExampleRuntimeTarget } from './runtimeTargetStore';
+export declare function resolveExampleAgentRuntimesUrl(target: ExampleRuntimeTarget, override?: string): string;
 /**
  * Resolve the base URL used by examples to call the agent-runtimes service.
  * Priority: explicit override -> dedicated env -> legacy base env -> localhost.

package/lib/examples/utils/useExampleAgentRuntimesUrl.js

@@ -3,17 +3,36 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { useMemo } from 'react';
+import { useRuntimeTargetStore, } from './runtimeTargetStore';
+const normalizeBaseUrl = (value) => {
+    if (!value) {
+        return undefined;
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return undefined;
+    }
+    return trimmed.replace(/\/$/, '');
+};
+const LOCAL_DEFAULT = 'http://localhost:8765';
+const CLOUD_DEFAULT = 'https://r1.datalayer.run';
+export function resolveExampleAgentRuntimesUrl(target, override) {
+    if (override) {
+        return normalizeBaseUrl(override) ?? override;
+    }
+    const localUrl = normalizeBaseUrl(import.meta.env.VITE_BASE_URL) ?? LOCAL_DEFAULT;
+    const cloudUrl = normalizeBaseUrl(import.meta.env.VITE_DATALAYER_AGENT_RUNTIMES_URL) ??
+        normalizeBaseUrl(import.meta.env.VITE_DATALAYER_RUNTIMES_URL) ??
+        CLOUD_DEFAULT;
+    return target === 'cloud' ? cloudUrl : localUrl;
+}
 /**
  * Resolve the base URL used by examples to call the agent-runtimes service.
  * Priority: explicit override -> dedicated env -> legacy base env -> localhost.
  */
 export function useExampleAgentRuntimesUrl(override) {
+    const target = useRuntimeTargetStore(state => state.target);
     return useMemo(() => {
-        if (override) {
-            return override;
-        }
-        return (import.meta.env.VITE_DATALAYER_AGENT_RUNTIMES_URL ||
-            import.meta.env.VITE_BASE_URL ||
-            'http://localhost:8765');
-    }, [override]);
+        return resolveExampleAgentRuntimesUrl(target, override);
+    }, [target, override]);
 }

package/lib/examples2/CellExample.d.ts

@@ -0,0 +1,6 @@
+import { ServiceManager } from '@jupyterlab/services';
+type ICellExampleProps = {
+    serviceManager?: ServiceManager.IManager;
+};
+export declare const CellExample: (props: ICellExampleProps) => import("react/jsx-runtime").JSX.Element;
+export default CellExample;

package/lib/examples2/CellExample.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JupyterReactTheme, Cell, KernelIndicator, useJupyter, useKernelsStore, useCellsStore, } from '@datalayer/jupyter-react';
+import { Button, Label } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+const CELL_ID = 'cell-example-1';
+const DEFAULT_SOURCE = `from IPython.display import display
+
+for i in range(10):
+    display('I am a long string which is repeatedly added to the dom in separated divs: %d' % i)`;
+const CellExampleContent = (props) => {
+    //  const { serviceManager } = props;
+    const { defaultKernel } = useJupyter({ startDefaultKernel: true });
+    const cellsStore = useCellsStore();
+    const kernelsStore = useKernelsStore();
+    return (_jsxs(Box, { p: 4, children: [_jsx(Box, { as: "h1", children: "A Jupyter Cell" }), _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 CellExample = (props) => {
+    return (_jsx(JupyterReactTheme, { children: _jsx(CellExampleContent, { ...props }) }));
+};
+export default CellExample;

package/lib/examples2/DatalayerNotebookExample.d.ts

@@ -0,0 +1,16 @@
+import { ServiceManager } from '@jupyterlab/services';
+/**
+ * Example demonstrating how to use Datalayer services with Notebook
+ *
+ * This example shows:
+ * 1. How to create and use DatalayerServiceManager for kernel management
+ * 2. How to create and use DatalayerCollaborationProvider for real-time collaboration
+ * 3. How to enable/disable Datalayer collaboration
+ * 4. How to pass these to the base Notebook component
+ * 5. Graceful fallback when Datalayer credentials are not available
+ */
+type IDatalayerNotebookExampleProps = {
+    serviceManager?: ServiceManager.IManager;
+};
+declare const DatalayerNotebookExample: (props: IDatalayerNotebookExampleProps) => import("react/jsx-runtime").JSX.Element;
+export default DatalayerNotebookExample;

package/lib/examples2/DatalayerNotebookExample.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState, useEffect, useMemo } from 'react';
+import { Checkbox, FormControl, Heading } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { loadJupyterConfig, JupyterReactTheme, Notebook, } from '@datalayer/jupyter-react';
+import { DatalayerCollaborationProvider } from '../collaboration/DatalayerCollaborationProvider';
+import { createDatalayerServiceManager } from '../services/DatalayerServiceManager';
+import { useCoreStore } from '../state';
+import nbformatExample from './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';
+const DatalayerNotebookExample = (props) => {
+    // Load config on component mount
+    loadJupyterConfig();
+    const [nbformat] = useState(nbformatExample);
+    const [enableCollaboration, setEnableCollaboration] = useState(false);
+    const [readonly] = useState(false);
+    const [serviceManager, setServiceManager] = useState(props.serviceManager);
+    const { configuration } = useCoreStore();
+    useEffect(() => {
+        // Create DatalayerServiceManager if not provided
+        const createManager = async () => {
+            if (props.serviceManager) {
+                // Use provided service manager (should be DatalayerServiceManager from main.tsx)
+                // Wait for it to be ready
+                await props.serviceManager.ready;
+                return;
+            }
+            // Create DatalayerServiceManager if we have credentials
+            if (configuration?.token && configuration?.datalayerUrl) {
+                try {
+                    // Now we can pass undefined to use config/defaults
+                    const manager = await createDatalayerServiceManager(configuration?.cpuEnvironment, configuration?.credits);
+                    await manager.ready;
+                    setServiceManager(manager);
+                }
+                catch (error) {
+                    console.error('Failed to create DatalayerServiceManager:', error);
+                }
+            }
+            else {
+                console.warn('Datalayer credentials not configured. Please set datalayerUrl and token.');
+            }
+        };
+        createManager();
+    }, [props.serviceManager, configuration]);
+    // Create the collaboration provider when enabled
+    const collaborationProvider = useMemo(() => {
+        if (!enableCollaboration) {
+            return undefined;
+        }
+        const datalayerUrl = configuration?.datalayerUrl;
+        const token = configuration?.token;
+        if (!datalayerUrl || !token) {
+            console.warn('Datalayer collaboration enabled but datalayerUrl or token not configured. ' +
+                'Please configure them in the Datalayer store or environment.');
+            return undefined;
+        }
+        // Create and return the Datalayer collaboration provider
+        return new DatalayerCollaborationProvider({
+            datalayerUrl,
+            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?.datalayerUrl || !configuration?.token) && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'danger.subtle' }, children: "Warning: Datalayer configuration is missing. Please configure datalayerUrl 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',
+                    }, children: [_jsxs(Box, { sx: {
+                                flex: 1,
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                borderRadius: 2,
+                            }, children: [_jsx(Box, { sx: {
+                                        p: 2,
+                                        bg: 'canvas.subtle',
+                                        borderBottom: '1px solid',
+                                        borderColor: 'border.default',
+                                        fontWeight: 'bold',
+                                    }, children: "Collaborator 1" }), _jsx("iframe", { src: `${window.location.origin}/datalayer/notebook`, style: {
+                                        width: '100%',
+                                        height: 'calc(100vh - 280px)',
+                                        border: 'none',
+                                    }, title: "Collaborator 1" })] }), _jsxs(Box, { sx: {
+                                flex: 1,
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                borderRadius: 2,
+                            }, children: [_jsx(Box, { sx: {
+                                        p: 2,
+                                        bg: 'canvas.subtle',
+                                        borderBottom: '1px solid',
+                                        borderColor: 'border.default',
+                                        fontWeight: 'bold',
+                                    }, children: "Collaborator 2" }), _jsx("iframe", { src: `${window.location.origin}/datalayer/notebook`, style: {
+                                        width: '100%',
+                                        height: 'calc(100vh - 280px)',
+                                        border: 'none',
+                                    }, title: "Collaborator 2" })] })] })) : (_jsx(Box, { sx: {
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                    }, children: serviceManager ? (_jsx(Notebook, { id: NOTEBOOK_ID, height: "calc(100vh - 200px)", nbformat: nbformat, readonly: readonly, serviceManager: serviceManager, startDefaultKernel: true, collaborationProvider: collaborationProvider })) : (_jsx(Box, { sx: { p: 4, textAlign: 'center' }, children: "Loading ServiceManager..." })) })), _jsxs(Box, { sx: { mt: 2, fontSize: 1, color: 'fg.subtle' }, children: [_jsx("p", { children: "This example demonstrates how to use Datalayer services with Notebook:" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "DatalayerServiceManager:" }), " Connects to Datalayer infrastructure for kernel management"] }), _jsxs("li", { children: [_jsx("strong", { children: "DatalayerCollaborationProvider:" }), " Enables real-time collaboration"] }), _jsx("li", { children: "Both require Datalayer credentials (datalayerUrl and token)" }), _jsx("li", { children: "Pass them directly to the base Notebook component" }), _jsx("li", { children: "No wrapper components needed - just create the services and pass them as props" }), _jsx("li", { children: "This shows the explicit, composable pattern for Datalayer integration" })] })] })] }) }));
+};
+export default DatalayerNotebookExample;

package/lib/examples2/NativeNavigationExample.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+/**
+ * Native Navigation Example
+ * This example demonstrates the navigation hooks WITHOUT React Router.
+ * The hooks should automatically detect the absence of React Router and fall back to native browser navigation.
+ */
+export declare const NativeNavigationExample: React.FC;
+export default NativeNavigationExample;