@datalayer/core 0.0.2 → 0.0.4

package/lib/examples/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;

package/lib/examples/NativeNavigationExample.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState, useEffect } from 'react';
+import { Box, Button, Heading, Text, Link as PrimerLink } from '@primer/react';
+import { useNavigate, useLocation, useParams, useHistory } from '../hooks';
+/**
+ * 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 const NativeNavigationExample = () => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const params = useParams();
+    const history = useHistory();
+    const [navigationType, setNavigationType] = useState('detecting...');
+    const [navigationCount, setNavigationCount] = useState(0);
+    const [currentView, setCurrentView] = useState('home');
+    // Track navigation type detection
+    useEffect(() => {
+        // Since we're not using React Router, this should detect as 'native'
+        setNavigationType('native');
+    }, []);
+    // Track navigation events
+    useEffect(() => {
+        setNavigationCount(prev => prev + 1);
+        // Parse the path to determine which view to show
+        const path = location.pathname;
+        if (path.includes('page1')) {
+            setCurrentView('page1');
+        }
+        else if (path.includes('page2')) {
+            setCurrentView('page2');
+        }
+        else if (path.includes('page3')) {
+            setCurrentView('page3');
+        }
+        else if (path.includes('user')) {
+            setCurrentView('user');
+        }
+        else {
+            setCurrentView('home');
+        }
+    }, [location]);
+    const handleProgrammaticNavigation = () => {
+        navigate('/page3', undefined, true);
+    };
+    const handleNavigateWithQuery = () => {
+        navigate('/page2?test=456&native=true', undefined, true);
+    };
+    const handleNavigateWithHash = () => {
+        navigate('/page3#native-section', undefined, true);
+    };
+    const handleBackNavigation = () => {
+        history.back();
+    };
+    const handleForwardNavigation = () => {
+        history.forward();
+    };
+    const handleReplaceNavigation = () => {
+        history.replace('/replaced-page', { replaced: true });
+    };
+    // Simple link handler for native navigation
+    const handleLinkClick = (e, path) => {
+        e.preventDefault();
+        navigate(path, e, true);
+    };
+    // Render different content based on current view
+    const renderContent = () => {
+        switch (currentView) {
+            case 'page1':
+                return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "Page 1 (Native)" }), _jsx(Text, { as: "p", children: "You've navigated to Page 1 using native browser navigation." })] }));
+            case 'page2':
+                return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "Page 2 (Native)" }), _jsx(Text, { as: "p", children: "This is Page 2 with native navigation. Check the query parameters!" })] }));
+            case 'page3':
+                return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "Page 3 (Native)" }), _jsx(Text, { as: "p", children: "Welcome to Page 3 using native browser APIs. Notice the hash in the URL!" })] }));
+            case 'user':
+                return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "User Page (Native)" }), _jsxs(Text, { as: "p", children: ["User pages with native navigation. Path: ", location.pathname] })] }));
+            default:
+                return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "Home Page (Native)" }), _jsx(Text, { as: "p", children: "This is the home page of the Native navigation example." })] }));
+        }
+    };
+    return (_jsxs(Box, { sx: { minHeight: '100vh', p: 4 }, children: [_jsxs(Box, { sx: { mb: 4, p: 3, bg: 'canvas.subtle', borderRadius: 2 }, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Native Browser Navigation Example" }), _jsx(Text, { as: "p", sx: { mb: 2 }, children: "This example demonstrates the navigation hooks WITHOUT React Router context. The hooks automatically fall back to native browser navigation (history API)." }), _jsx(Text, { as: "p", sx: { color: 'attention.fg', fontWeight: 'bold' }, children: "\u26A0\uFE0F No React Router is loaded in this example - using native browser APIs only!" })] }), renderContent(), _jsxs(Box, { sx: { mt: 4 }, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "Navigation Information" }), _jsxs(Box, { sx: {
+                            mb: 4,
+                            p: 3,
+                            borderWidth: 1,
+                            borderStyle: 'solid',
+                            borderColor: 'border.default',
+                            borderRadius: 2,
+                        }, children: [_jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Navigation Type Detected:" }), ' ', _jsx(Text, { as: "span", sx: {
+                                            color: navigationType === 'native' ? 'success.fg' : 'danger.fg',
+                                        }, children: navigationType })] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Current Path:" }), " ", location.pathname] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Search Params:" }), " ", location.search || '(none)'] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Hash:" }), " ", location.hash || '(none)'] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "Location Key:" }), " ", location.key] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "State:" }), " ", JSON.stringify(location.state) || '(none)'] }), _jsxs(Text, { as: "p", sx: { mb: 2 }, children: [_jsx("strong", { children: "URL Params (parsed from search):" }), ' ', JSON.stringify(params)] }), _jsxs(Text, { as: "p", children: [_jsx("strong", { children: "Navigation Count:" }), " ", navigationCount] })] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "Test Programmatic Navigation" }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsx(Button, { onClick: handleProgrammaticNavigation, children: "Navigate to /page3" }), _jsx(Button, { onClick: handleNavigateWithQuery, variant: "default", children: "Navigate with Query Params" }), _jsx(Button, { onClick: handleNavigateWithHash, variant: "default", children: "Navigate with Hash" }), _jsx(Button, { onClick: handleReplaceNavigation, variant: "default", children: "Replace Current Entry" })] })] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "Test History API" }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsx(Button, { onClick: handleBackNavigation, variant: "default", children: "History Back" }), _jsx(Button, { onClick: handleForwardNavigation, variant: "default", children: "History Forward" })] })] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "Test Link Navigation" }), _jsxs(Box, { sx: { display: 'flex', gap: 3, flexWrap: 'wrap' }, children: [_jsx(PrimerLink, { href: "/", onClick: e => handleLinkClick(e, '/'), sx: { cursor: 'pointer' }, children: "Home" }), _jsx(PrimerLink, { href: "/page1", onClick: e => handleLinkClick(e, '/page1'), sx: { cursor: 'pointer' }, children: "Page 1" }), _jsx(PrimerLink, { href: "/page2?test=123", onClick: e => handleLinkClick(e, '/page2?test=123'), sx: { cursor: 'pointer' }, children: "Page 2 with Query" }), _jsx(PrimerLink, { href: "/page3#section", onClick: e => handleLinkClick(e, '/page3#section'), sx: { cursor: 'pointer' }, children: "Page 3 with Hash" }), _jsx(PrimerLink, { href: "/user/456", onClick: e => handleLinkClick(e, '/user/456'), sx: { cursor: 'pointer' }, children: "User 456" })] })] }), _jsxs(Box, { sx: { mt: 4, p: 3, bg: 'attention.subtle', borderRadius: 2 }, children: [_jsx(Heading, { as: "h3", sx: { mb: 2 }, children: "How This Works" }), _jsx(Text, { as: "p", sx: { mb: 2 }, children: "This example does NOT include React Router. The navigation hooks automatically detect this and:" }), _jsxs(Box, { as: "ul", sx: { pl: 4 }, children: [_jsxs(Text, { as: "li", children: ["Use ", _jsx("code", { children: "window.history.pushState()" }), " for navigation"] }), _jsxs(Text, { as: "li", children: ["Listen to ", _jsx("code", { children: "popstate" }), " events for browser back/forward"] }), _jsxs(Text, { as: "li", children: ["Parse ", _jsx("code", { children: "window.location" }), " for current path and params"] }), _jsx(Text, { as: "li", children: "Provide the same API as when React Router is present" })] }), _jsx(Text, { as: "p", sx: { mt: 2 }, children: "The beauty is that the same hooks work in both scenarios without any code changes!" })] })] })] }));
+};
+export default NativeNavigationExample;

package/lib/examples/NotebookExample.d.ts

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

package/lib/examples/NotebookExample.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+import { useMemo } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { Notebook2, NotebookToolbar, CellSidebarExtension, CellSidebarButton, } from '@datalayer/jupyter-react';
+import nbformatExample from './notebooks/NotebookExample1.ipynb.json';
+const NOTEBOOK_ID = 'notebook-example-1';
+export const NotebookExample = (props) => {
+    const { serviceManager } = props;
+    const extensions = useMemo(() => [new CellSidebarExtension({ factory: CellSidebarButton })], []);
+    if (!serviceManager) {
+        return (_jsxs(Box, { as: "h1", children: ["A Jupyter Notebook", _jsx("div", { children: "Loading..." })] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { as: "h1", children: "A Jupyter Notebook" }), _jsx(Notebook2, { id: NOTEBOOK_ID, nbformat: nbformatExample, serviceManager: serviceManager, startDefaultKernel: true, extensions: extensions, Toolbar: NotebookToolbar })] }));
+};
+export default NotebookExample;

package/lib/examples/NotebookMutationsKernel.d.ts

@@ -0,0 +1,2 @@
+declare const NotebookMutationsKernel: () => import("react/jsx-runtime").JSX.Element;
+export default NotebookMutationsKernel;

package/lib/examples/NotebookMutationsKernel.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Box, SegmentedControl, Label, Text } from '@primer/react';
+import { ServiceManager } from '@jupyterlab/services';
+import { createLiteServiceManager, createServerSettings, setJupyterServerUrl, getJupyterServerUrl, getJupyterServerToken, ServiceManagerLess, loadJupyterConfig, DEFAULT_JUPYTER_SERVER_URL, useNotebookStore, Notebook, SpinnerCentered, JupyterReactTheme, } from '@datalayer/jupyter-react';
+import { useCoreStore } from '../state/substates/CoreState';
+import { createDatalayerServiceManager } from '../services/DatalayerServiceManager';
+import nbformatExample from './notebooks/NotebookExample1.ipynb.json';
+const NOTEBOOK_ID = 'notebook-mutations-id';
+loadJupyterConfig();
+const SERVICE_MANAGER_LESS = new ServiceManagerLess();
+const NotebookMutationsKernel = () => {
+    const [index, setIndex] = useState(0);
+    const [nbformat, setNbformat] = useState(nbformatExample);
+    const [readonly, setReadonly] = useState(true);
+    const [serverless, setServerless] = useState(true);
+    const [kernelIndex, setKernelIndex] = useState(-1);
+    const [waiting, setWaiting] = useState(false);
+    const [lite, setLite] = useState(false);
+    const [serviceManager, setServiceManager] = useState(SERVICE_MANAGER_LESS);
+    const [sessions, setSessions] = useState([]);
+    const { configuration } = useCoreStore();
+    const notebookStore = useNotebookStore();
+    const notebook = notebookStore.selectNotebook(NOTEBOOK_ID);
+    const onSessionConnection = (session) => {
+        console.log('Received a Kernel Session.', session);
+        if (session) {
+            setSessions(sessions.concat(session));
+        }
+    };
+    const changeIndex = (index) => {
+        setIndex(index);
+        switch (index) {
+            case 0: {
+                setKernelIndex(-1);
+                setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON());
+                setServerless(true);
+                setReadonly(true);
+                setLite(false);
+                setServiceManager(SERVICE_MANAGER_LESS);
+                break;
+            }
+            case 1: {
+                setJupyterServerUrl(location.protocol + '//' + location.host);
+                createLiteServiceManager().then(liteServiceManager => {
+                    setKernelIndex(-1);
+                    console.log('Lite Service Manager is available', liteServiceManager);
+                    setServiceManager(liteServiceManager);
+                    setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON());
+                    setServerless(false);
+                    setReadonly(false);
+                    setLite(true);
+                });
+                break;
+            }
+            case 2: {
+                setJupyterServerUrl(DEFAULT_JUPYTER_SERVER_URL);
+                setKernelIndex(-1);
+                setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON());
+                setServerless(false);
+                setReadonly(false);
+                setLite(false);
+                const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+                const serviceManager = new ServiceManager({ serverSettings });
+                serviceManager['__NAME__'] = 'MutatingServiceManager';
+                setServiceManager(serviceManager);
+                break;
+            }
+            case 3: {
+                //        setWaiting(true);
+                setLite(false);
+                createDatalayerServiceManager(configuration?.cpuEnvironment || 'python-simple-env', configuration?.credits || 1).then(serviceManager => {
+                    serviceManager['__NAME__'] = 'DatalayerCPUServiceManager';
+                    setServiceManager(serviceManager);
+                    setServerless(false);
+                    setReadonly(false);
+                    setKernelIndex(0);
+                    setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON());
+                    //          setWaiting(false);
+                });
+                break;
+            }
+            case 4: {
+                setWaiting(true);
+                setLite(false);
+                createDatalayerServiceManager(configuration?.gpuEnvironment || 'pytorch-cuda-env', configuration?.credits || 1).then(serviceManager => {
+                    setKernelIndex(0);
+                    serviceManager['__NAME__'] = 'DatalayerGPUServiceManager';
+                    setServiceManager(serviceManager);
+                    setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON());
+                    setServerless(false);
+                    setReadonly(false);
+                    setWaiting(false);
+                });
+                break;
+            }
+        }
+    };
+    return (_jsx(JupyterReactTheme, { children: _jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", children: [_jsx(Box, { children: _jsxs(SegmentedControl, { onChange: index => changeIndex(index), "aria-label": "jupyter-react-example", children: [_jsx(SegmentedControl.Button, { defaultSelected: index === 0, children: "Readonly" }), _jsx(SegmentedControl.Button, { defaultSelected: index === 1, children: "Browser Kernel" }), _jsx(SegmentedControl.Button, { defaultSelected: index === 2, children: "OSS Kernel (CPU)" }), _jsx(SegmentedControl.Button, { defaultSelected: index === 3, children: "Kernel (CPU)" }), _jsx(SegmentedControl.Button, { defaultSelected: index === 4, children: "Kernel (GPU)" })] }) }), _jsxs(Box, { ml: 1, mt: 1, children: [_jsxs(Label, { children: ["Lite: ", String(notebook?.adapter?.lite)] }), _jsxs(Label, { children: ["Service Manager URL:", ' ', notebook?.adapter?.serviceManager.serverSettings.baseUrl] }), _jsxs(Label, { children: ["Service Manager is ready:", ' ', String(notebook?.adapter?.serviceManager.isReady)] }), _jsxs(Label, { children: ["Kernel ID: ", notebook?.adapter?.kernel?.id] }), _jsxs(Label, { children: ["Kernel Banner: ", notebook?.adapter?.kernel?.info?.banner] })] })] }), _jsx(Box, { children: _jsx(Text, { as: "h3", children: "Kernel Sessions" }) }), _jsx(Box, { children: sessions.map(session => {
+                        return (_jsx(Box, { children: _jsxs(Text, { children: [session.name, " ", session.id, " ", _jsx(Label, { children: "Kernel" }), " clientId [", session.kernel?.clientId, ") - id ", session.kernel?.id] }) }, session.id));
+                    }) }), waiting ? (_jsx(SpinnerCentered, {})) : (_jsx(Notebook, { height: "calc(100vh - 2.6rem)", id: NOTEBOOK_ID, lite: lite, nbformat: nbformat, onSessionConnection: onSessionConnection, readonly: readonly, serverless: serverless, serviceManager: serviceManager, useRunningKernelIndex: kernelIndex }))] }) }));
+};
+export default NotebookMutationsKernel;
+// For standalone testing
+if (typeof window !== 'undefined' && window.location.pathname === '/test') {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    const root = createRoot(div);
+    root.render(_jsx(NotebookMutationsKernel, {}));
+}

package/lib/examples/NotebookMutationsServiceManager.d.ts

@@ -0,0 +1,2 @@
+declare const NotebookMutationsServiceManager: () => import("react/jsx-runtime").JSX.Element;
+export default NotebookMutationsServiceManager;

package/lib/examples/NotebookMutationsServiceManager.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Box, SegmentedControl, Label, Text } from '@primer/react';
+import { ServiceManager } from '@jupyterlab/services';
+import { createLiteServiceManager, createServerSettings, setJupyterServerUrl, getJupyterServerUrl, getJupyterServerToken, ServiceManagerLess, loadJupyterConfig, DEFAULT_JUPYTER_SERVER_URL, useNotebookStore, Notebook, SpinnerCentered, JupyterReactTheme, } from '@datalayer/jupyter-react';
+import { useCoreStore } from '../state/substates/CoreState';
+import { createDatalayerServiceManager } from '../services/DatalayerServiceManager';
+import nbformatExample from './notebooks/NotebookExample1.ipynb.json';
+const NOTEBOOK_ID = 'notebook-mutations-id';
+loadJupyterConfig();
+const SERVICE_MANAGER_LESS = new ServiceManagerLess();
+const NotebookMutationsServiceManager = () => {
+    const [index, setIndex] = useState(0);
+    const [nbformat, setNbformat] = useState(nbformatExample);
+    const [readonly, setReadonly] = useState(true);
+    const [waiting, setWaiting] = useState(false);
+    const [lite, setLite] = useState(false);
+    const [serviceManager, setServiceManager] = useState(SERVICE_MANAGER_LESS);
+    const [sessions, setSessions] = useState([]);
+    const { configuration } = useCoreStore();
+    const notebookStore = useNotebookStore();
+    const notebook = notebookStore.selectNotebook(NOTEBOOK_ID);
+    const onSessionConnection = (session) => {
+        console.log('Received a Kernel Session.', session);
+        if (session) {
+            setSessions(sessions.concat(session));
+        }
+    };
+    const changeIndex = (index) => {
+        setIndex(index);
+        switch (index) {
+            case 0: {
+                setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON());
+                setReadonly(true);
+                setLite(false);
+                setServiceManager(SERVICE_MANAGER_LESS);
+                break;
+            }
+            case 1: {
+                setJupyterServerUrl(location.protocol + '//' + location.host);
+                createLiteServiceManager().then(liteServiceManager => {
+                    console.log('Lite Service Manager is available', liteServiceManager);
+                    setServiceManager(liteServiceManager);
+                    setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON());
+                    setReadonly(false);
+                    setLite(true);
+                });
+                break;
+            }
+            case 2: {
+                setJupyterServerUrl(DEFAULT_JUPYTER_SERVER_URL);
+                setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON());
+                setReadonly(false);
+                setLite(false);
+                const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+                const serviceManager = new ServiceManager({ serverSettings });
+                serviceManager['__NAME__'] = 'MutatingServiceManager';
+                setServiceManager(serviceManager);
+                break;
+            }
+            case 3: {
+                setReadonly(false);
+                setWaiting(true);
+                setLite(false);
+                setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON());
+                createDatalayerServiceManager(configuration?.cpuEnvironment || 'python-simple-env', configuration?.credits || 1).then(serviceManager => {
+                    serviceManager['__NAME__'] = 'DatalayerCPUServiceManager';
+                    setServiceManager(serviceManager);
+                    setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON());
+                    setReadonly(false);
+                    setWaiting(false);
+                });
+                break;
+            }
+            case 4: {
+                setReadonly(false);
+                setWaiting(true);
+                setLite(false);
+                setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON());
+                createDatalayerServiceManager(configuration?.gpuEnvironment || 'pytorch-cuda-env', configuration?.credits || 1).then(serviceManager => {
+                    serviceManager['__NAME__'] = 'DatalayerGPUServiceManager';
+                    setServiceManager(serviceManager);
+                    setNbformat(notebook?.adapter?.notebookPanel?.content.model?.toJSON());
+                    setReadonly(false);
+                    setWaiting(false);
+                });
+                break;
+            }
+        }
+    };
+    return (_jsx(JupyterReactTheme, { children: _jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", children: [_jsx(Box, { children: _jsxs(SegmentedControl, { onChange: index => changeIndex(index), "aria-label": "jupyter-react-example", children: [_jsx(SegmentedControl.Button, { defaultSelected: index === 0, children: "Readonly" }), _jsx(SegmentedControl.Button, { defaultSelected: index === 1, children: "Browser Kernel" }), _jsx(SegmentedControl.Button, { defaultSelected: index === 2, children: "OSS Kernel (CPU)" }), _jsx(SegmentedControl.Button, { defaultSelected: index === 3, children: "Kernel (CPU)" }), _jsx(SegmentedControl.Button, { defaultSelected: index === 4, children: "Kernel (GPU)" })] }) }), _jsxs(Box, { ml: 1, mt: 1, children: [_jsxs(Label, { children: ["Lite: ", String(notebook?.adapter?.lite)] }), _jsxs(Label, { children: ["Service Manager URL:", ' ', notebook?.adapter?.serviceManager.serverSettings.baseUrl] }), _jsxs(Label, { children: ["Service Manager is ready:", ' ', String(notebook?.adapter?.serviceManager.isReady)] }), _jsxs(Label, { children: ["Kernel ID: ", notebook?.adapter?.kernel?.id] }), _jsxs(Label, { children: ["Kernel Banner: ", notebook?.adapter?.kernel?.info?.banner] })] })] }), _jsx(Box, { children: _jsx(Text, { as: "h3", children: "Kernel Sessions" }) }), _jsx(Box, { children: sessions.map(session => {
+                        return (_jsx(Box, { children: _jsxs(Text, { children: [session.name, " ", session.id, " ", _jsx(Label, { children: "Kernel" }), " clientId [", session.kernel?.clientId, ") - id ", session.kernel?.id] }) }, session.id));
+                    }) }), waiting ? (_jsx(SpinnerCentered, {})) : (_jsx(Notebook, { height: "calc(100vh - 2.6rem)", id: NOTEBOOK_ID, lite: lite, nbformat: nbformat, onSessionConnection: onSessionConnection, readonly: readonly, serviceManager: serviceManager }))] }) }));
+};
+export default NotebookMutationsServiceManager;
+// For standalone testing
+if (typeof window !== 'undefined' && window.location.pathname === '/test') {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    const root = createRoot(div);
+    root.render(_jsx(NotebookMutationsServiceManager, {}));
+}

package/lib/examples/ReactRouterExample.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Main App Component - Advanced React Router Example
+ */
+export declare const ReactRouterAdvancedExample: React.FC;
+export default ReactRouterAdvancedExample;

package/lib/examples/ReactRouterExample.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useState, useEffect } from 'react';
+import { BrowserRouter, Routes, Route, Link as RouterLink, NavLink, Outlet, Navigate, } from 'react-router-dom';
+import { Box, Button, Heading, Text, TextInput } from '@primer/react';
+import { useNavigate, useLocation, useParams, useHistory } from '../hooks';
+/**
+ * Navigation Logger Component - Shows all navigation events
+ */
+const NavigationLogger = () => {
+    const [logs, setLogs] = useState([]);
+    const location = useLocation();
+    const params = useParams();
+    useEffect(() => {
+        const log = `[${new Date().toLocaleTimeString()}] Navigated to ${location.pathname}${location.search}${location.hash} | Params: ${JSON.stringify(params)} | State: ${JSON.stringify(location.state)}`;
+        setLogs(prev => [...prev.slice(-9), log]);
+    }, [location, params]);
+    return (_jsxs(Box, { sx: {
+            p: 2,
+            mb: 3,
+            bg: 'canvas.subtle',
+            borderRadius: 2,
+            fontSize: 0,
+            fontFamily: 'mono',
+            maxHeight: 150,
+            overflowY: 'auto',
+        }, children: [_jsx(Text, { as: "div", sx: { fontWeight: 'bold', mb: 1 }, children: "Navigation Log:" }), logs.map((log, i) => (_jsx(Text, { as: "div", sx: { color: 'fg.muted' }, children: log }, i)))] }));
+};
+/**
+ * Navigation Controls - Test all navigation methods
+ */
+const NavigationControls = () => {
+    const navigate = useNavigate();
+    const history = useHistory();
+    const location = useLocation();
+    const [customPath, setCustomPath] = useState('/custom');
+    const [stateValue, setStateValue] = useState('');
+    const handleNavigateWithState = () => {
+        navigate('/dashboard/analytics', {
+            state: { message: stateValue || 'Hello from navigation!' },
+        });
+    };
+    const handleReplaceWithState = () => {
+        history.replace('/settings', { replaced: true, time: Date.now() });
+    };
+    const handleNavigateWithQuery = () => {
+        navigate('/search?q=react&category=framework');
+    };
+    const handleNavigateWithHash = () => {
+        navigate('/docs#installation');
+    };
+    const handleComplexNavigation = () => {
+        navigate('/products/123/reviews?sort=newest#review-42');
+    };
+    return (_jsxs(Box, { sx: {
+            p: 3,
+            borderWidth: 1,
+            borderStyle: 'solid',
+            borderColor: 'border.default',
+            borderRadius: 2,
+            mb: 3,
+        }, children: [_jsx(Heading, { as: "h3", sx: { mb: 3 }, children: "Navigation Controls" }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Text, { as: "label", sx: { display: 'block', mb: 1, fontSize: 1 }, children: "Custom Path:" }), _jsx(TextInput, { value: customPath, onChange: e => setCustomPath(e.target.value), sx: { mb: 2 } }), _jsx(Button, { onClick: () => navigate(customPath), sx: { mr: 2 }, children: "Navigate to Custom Path" })] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Text, { as: "label", sx: { display: 'block', mb: 1, fontSize: 1 }, children: "State Value:" }), _jsx(TextInput, { value: stateValue, onChange: e => setStateValue(e.target.value), placeholder: "Enter state to pass", sx: { mb: 2 } }), _jsx(Button, { onClick: handleNavigateWithState, variant: "primary", children: "Navigate with State" })] }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap', mb: 3 }, children: [_jsx(Button, { onClick: () => history.back(), variant: "default", children: "\u2190 Back" }), _jsx(Button, { onClick: () => history.forward(), variant: "default", children: "Forward \u2192" }), _jsx(Button, { onClick: handleReplaceWithState, variant: "default", children: "Replace Current" }), _jsx(Button, { onClick: handleNavigateWithQuery, variant: "default", children: "Nav with Query" }), _jsx(Button, { onClick: handleNavigateWithHash, variant: "default", children: "Nav with Hash" }), _jsx(Button, { onClick: handleComplexNavigation, variant: "default", children: "Complex Navigation" })] }), _jsx(Box, { sx: { p: 2, bg: 'canvas.inset', borderRadius: 1 }, children: _jsxs(Text, { as: "div", sx: { fontSize: 0, fontFamily: 'mono' }, children: [_jsx("strong", { children: "Current Location:" }), _jsx("br", {}), "Path: ", location.pathname, _jsx("br", {}), "Search: ", location.search || '(none)', _jsx("br", {}), "Hash: ", location.hash || '(none)', _jsx("br", {}), "State: ", JSON.stringify(location.state) || '(none)'] }) })] }));
+};
+/**
+ * Layout Component with Navigation Menu
+ */
+const Layout = () => {
+    return (_jsxs(Box, { children: [_jsx(Box, { as: "nav", sx: {
+                    p: 3,
+                    bg: 'canvas.subtle',
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                    mb: 3,
+                }, children: _jsxs(Box, { sx: { display: 'flex', gap: 3, flexWrap: 'wrap' }, children: [_jsx(NavLink, { to: "/", style: ({ isActive }) => ({
+                                fontWeight: isActive ? 'bold' : 'normal',
+                                color: isActive ? '#0969da' : 'inherit',
+                                textDecoration: 'none',
+                            }), children: "Home" }), _jsx(NavLink, { to: "/dashboard", style: ({ isActive }) => ({
+                                fontWeight: isActive ? 'bold' : 'normal',
+                                color: isActive ? '#0969da' : 'inherit',
+                                textDecoration: 'none',
+                            }), children: "Dashboard" }), _jsx(NavLink, { to: "/products", style: ({ isActive }) => ({
+                                fontWeight: isActive ? 'bold' : 'normal',
+                                color: isActive ? '#0969da' : 'inherit',
+                                textDecoration: 'none',
+                            }), children: "Products" }), _jsx(NavLink, { to: "/users/john-doe", style: ({ isActive }) => ({
+                                fontWeight: isActive ? 'bold' : 'normal',
+                                color: isActive ? '#0969da' : 'inherit',
+                                textDecoration: 'none',
+                            }), children: "User Profile" }), _jsx(NavLink, { to: "/settings", style: ({ isActive }) => ({
+                                fontWeight: isActive ? 'bold' : 'normal',
+                                color: isActive ? '#0969da' : 'inherit',
+                                textDecoration: 'none',
+                            }), children: "Settings" })] }) }), _jsx(NavigationLogger, {}), _jsx(NavigationControls, {}), _jsx(Box, { sx: {
+                    p: 3,
+                    borderWidth: 1,
+                    borderStyle: 'solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    minHeight: 200,
+                }, children: _jsx(Outlet, {}) })] }));
+};
+/**
+ * Page Components
+ */
+const HomePage = () => (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "Home Page" }), _jsx(Text, { as: "p", children: "Welcome to the comprehensive React Router example. This demonstrates:" }), _jsxs("ul", { children: [_jsx("li", { children: "Programmatic navigation with useNavigate" }), _jsx("li", { children: "Route parameters with useParams" }), _jsx("li", { children: "Query parameters and hash navigation" }), _jsx("li", { children: "Navigation state passing" }), _jsx("li", { children: "Browser history (back/forward)" }), _jsx("li", { children: "Nested routes" }), _jsx("li", { children: "Protected routes" }), _jsx("li", { children: "Active link styling" })] })] }));
+const DashboardLayout = () => (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Dashboard" }), _jsxs(Box, { sx: { display: 'flex', gap: 2, mb: 3 }, children: [_jsx(RouterLink, { to: "/dashboard", children: "Overview" }), _jsx(RouterLink, { to: "/dashboard/analytics", children: "Analytics" }), _jsx(RouterLink, { to: "/dashboard/reports", children: "Reports" })] }), _jsx(Outlet, {})] }));
+const DashboardOverview = () => {
+    const location = useLocation();
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { mb: 2 }, children: "Overview" }), location.state && (_jsx(Box, { sx: { p: 2, bg: 'success.subtle', borderRadius: 1, mb: 2 }, children: _jsxs(Text, { children: ["State received: ", JSON.stringify(location.state)] }) })), _jsx(Text, { children: "Dashboard overview content here..." })] }));
+};
+const DashboardAnalytics = () => {
+    const location = useLocation();
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { mb: 2 }, children: "Analytics" }), location.state && (_jsx(Box, { sx: { p: 2, bg: 'success.subtle', borderRadius: 1, mb: 2 }, children: _jsxs(Text, { children: ["State received: ", JSON.stringify(location.state)] }) })), _jsx(Text, { children: "Analytics data visualization would go here..." })] }));
+};
+const DashboardReports = () => (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { mb: 2 }, children: "Reports" }), _jsx(Text, { children: "Reports section content..." })] }));
+const ProductList = () => {
+    const navigate = useNavigate();
+    const products = [
+        { id: 1, name: 'Product A' },
+        { id: 2, name: 'Product B' },
+        { id: 3, name: 'Product C' },
+    ];
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 3 }, children: "Products" }), _jsx(Box, { sx: { display: 'grid', gap: 2 }, children: products.map(product => (_jsxs(Button, { onClick: () => navigate(`/products/${product.id}`), variant: "default", sx: { justifyContent: 'flex-start' }, children: [product.name, " \u2192"] }, product.id))) })] }));
+};
+const ProductDetail = () => {
+    const params = useParams();
+    const navigate = useNavigate();
+    return (_jsxs(Box, { children: [_jsx(Button, { onClick: () => navigate('/products'), variant: "default", sx: { mb: 3 }, children: "\u2190 Back to Products" }), _jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Product Details" }), _jsxs(Text, { as: "p", children: ["Product ID: ", params.id] }), _jsxs(Text, { as: "p", children: ["All params: ", JSON.stringify(params)] }), _jsx(Box, { sx: { mt: 3 }, children: _jsx(Button, { onClick: () => navigate(`/products/${params.id}/reviews`), variant: "primary", children: "View Reviews" }) })] }));
+};
+const ProductReviews = () => {
+    const params = useParams();
+    const location = useLocation();
+    return (_jsxs(Box, { children: [_jsxs(Heading, { as: "h1", sx: { mb: 2 }, children: ["Reviews for Product ", params.id] }), _jsxs(Text, { as: "p", children: ["Query params: ", location.search] }), _jsxs(Text, { as: "p", children: ["Hash: ", location.hash] })] }));
+};
+const UserProfile = () => {
+    const params = useParams();
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "User Profile" }), _jsxs(Text, { children: ["Username: ", params.username] })] }));
+};
+const SearchPage = () => {
+    const location = useLocation();
+    const searchParams = new URLSearchParams(location.search);
+    const query = searchParams.get('q');
+    const category = searchParams.get('category');
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Search Results" }), _jsxs(Text, { as: "p", children: ["Query: ", query || '(none)'] }), _jsxs(Text, { as: "p", children: ["Category: ", category || '(none)'] }), _jsxs(Text, { as: "p", children: ["Full search string: ", location.search] })] }));
+};
+const DocsPage = () => {
+    const location = useLocation();
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Documentation" }), _jsxs(Text, { as: "p", children: ["Current hash: ", location.hash || '(none)'] }), location.hash === '#installation' && (_jsxs(Box, { sx: { p: 2, bg: 'attention.subtle', borderRadius: 1, mt: 2 }, children: [_jsx(Heading, { as: "h2", sx: { mb: 1 }, children: "Installation" }), _jsx(Text, { children: "Installation instructions would be here..." })] }))] }));
+};
+const SettingsPage = () => {
+    const location = useLocation();
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Settings" }), location.state?.replaced && (_jsxs(Box, { sx: { p: 2, bg: 'attention.subtle', borderRadius: 1, mb: 2 }, children: [_jsx(Text, { children: "This page replaced the previous history entry!" }), _jsxs(Text, { children: ["Time: ", new Date(location.state.time).toLocaleTimeString()] })] })), _jsx(Text, { children: "Settings configuration would go here..." })] }));
+};
+const NotFound = () => (_jsxs(Box, { children: [_jsx(Heading, { as: "h1", sx: { mb: 2, color: 'danger.fg' }, children: "404 - Not Found" }), _jsx(Text, { children: "The page you're looking for doesn't exist." })] }));
+/**
+ * Protected Route Component
+ */
+const ProtectedRoute = ({ children, }) => {
+    const [isAuthenticated] = useState(true); // Simulate authentication
+    if (!isAuthenticated) {
+        return _jsx(Navigate, { to: "/", replace: true });
+    }
+    return _jsx(_Fragment, { children: children });
+};
+/**
+ * Main App Component - Advanced React Router Example
+ */
+export const ReactRouterAdvancedExample = () => {
+    return (_jsx(BrowserRouter, { children: _jsxs(Box, { sx: { minHeight: '100vh', p: 4 }, children: [_jsxs(Box, { sx: { mb: 4, p: 3, bg: 'canvas.subtle', borderRadius: 2 }, children: [_jsx(Heading, { as: "h1", sx: { mb: 2 }, children: "Advanced React Router Navigation Example" }), _jsx(Text, { as: "p", sx: { mb: 2 }, children: "This comprehensive example demonstrates all navigation features working with our custom hooks that detect and use React Router." }), _jsx(Text, { as: "p", sx: { color: 'success.fg', fontWeight: 'bold' }, children: "\u2713 React Router detected and integrated with Datalayer SDK hooks" })] }), _jsx(Routes, { children: _jsxs(Route, { path: "/", element: _jsx(Layout, {}), children: [_jsx(Route, { index: true, element: _jsx(HomePage, {}) }), _jsxs(Route, { path: "dashboard", element: _jsx(DashboardLayout, {}), children: [_jsx(Route, { index: true, element: _jsx(DashboardOverview, {}) }), _jsx(Route, { path: "analytics", element: _jsx(DashboardAnalytics, {}) }), _jsx(Route, { path: "reports", element: _jsx(DashboardReports, {}) })] }), _jsx(Route, { path: "products/:id/reviews", element: _jsx(ProductReviews, {}) }), _jsx(Route, { path: "products/:id", element: _jsx(ProductDetail, {}) }), _jsx(Route, { path: "products", element: _jsx(ProductList, {}) }), _jsx(Route, { path: "users/:username", element: _jsx(UserProfile, {}) }), _jsx(Route, { path: "search", element: _jsx(SearchPage, {}) }), _jsx(Route, { path: "docs", element: _jsx(DocsPage, {}) }), _jsx(Route, { path: "settings", element: _jsx(ProtectedRoute, { children: _jsx(SettingsPage, {}) }) }), _jsx(Route, { path: "custom", element: _jsx(HomePage, {}) }), _jsx(Route, { path: "*", element: _jsx(NotFound, {}) })] }) })] }) }));
+};
+export default ReactRouterAdvancedExample;

package/lib/examples/example-selector.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Registry of available examples with dynamic imports.
+ * Add new examples here to make them available in the example runner.
+ */
+export declare const EXAMPLES: Record<string, () => Promise<{
+    default: React.ComponentType;
+}>>;
+/**
+ * Get the list of available example names
+ */
+export declare function getExampleNames(): string[];
+/**
+ * Get the selected example based on environment variable
+ * Falls back to 'NotebookExample' if not specified or invalid
+ */
+export declare function getSelectedExample(): () => Promise<{
+    default: React.ComponentType;
+}>;
+/**
+ * Get the selected example name
+ */
+export declare function getSelectedExampleName(): string;