@datalayer/core 0.0.3 → 0.0.5

package/lib/config/integrations/Loom.js

@@ -6,11 +6,11 @@ const IS_LOCALHOST = location.hostname === 'localhost';
 export const getLoomPublicAppId = () => {
     return IS_LOCALHOST
         ? LOOM_PUBLIC_APP_ID.LOCALHOST
-        : LOOM_PUBLIC_APP_ID.DATALAYER_IO;
+        : LOOM_PUBLIC_APP_ID.DATALAYER_APP;
 };
 // It is safe to expose PUBLIC APP ID here.
 // @see https://dev.loom.com/docs
 const LOOM_PUBLIC_APP_ID = {
-    LOCALHOST: "05754d5d-4778-4e6f-852a-a22fa0b5e87f",
-    DATALAYER_IO: "4b431848-adf7-457e-a545-0b0c7d21602a"
+    LOCALHOST: '05754d5d-4778-4e6f-852a-a22fa0b5e87f',
+    DATALAYER_APP: '4b431848-adf7-457e-a545-0b0c7d21602a',
 };

package/lib/examples/CellExample.d.ts

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

package/lib/examples/CellExample.js

@@ -8,17 +8,48 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * MIT License
  */
+import { useEffect, useState } from 'react';
 import { Box, Button, Label } from '@primer/react';
-import { Cell, KernelIndicator, useKernelsStore, useCellsStore } from '@datalayer/jupyter-react';
+import { ServiceManager } from '@jupyterlab/services';
+import { createServerSettings, getJupyterServerUrl, getJupyterServerToken, } from '@datalayer/jupyter-react';
+import { Cell, KernelIndicator, useKernelsStore, useCellsStore, Kernel, } from '@datalayer/jupyter-react';
 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)`;
 export const CellExample = (props) => {
-    const { kernel } = props;
-    const cellsStore = useCellsStore();
+    const [kernel, setKernel] = useState();
+    const [serviceManager, setServiceManager] = useState(props.serviceManager);
     const kernelsStore = useKernelsStore();
+    useEffect(() => {
+        // Create service manager if not provided
+        if (!props.serviceManager) {
+            const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+            const manager = new ServiceManager({ serverSettings });
+            setServiceManager(manager);
+        }
+    }, [props.serviceManager]);
+    useEffect(() => {
+        if (!kernel && serviceManager) {
+            // Create a kernel using the service manager
+            const createKernel = async () => {
+                // Create a Kernel wrapper
+                const k = new Kernel({
+                    kernelName: 'python3',
+                });
+                // @ts-expect-error - Set service manager after construction
+                k._serviceManager = serviceManager;
+                await k.ready;
+                setKernel(k);
+            };
+            createKernel();
+        }
+    }, [serviceManager]);
+    const cellsStore = useCellsStore();
+    if (!kernel) {
+        return (_jsxs(Box, { p: 4, children: [_jsx(Box, { as: "h1", children: "A Jupyter Cell" }), _jsx(Box, { children: "Loading kernel..." })] }));
+    }
     return (_jsxs(_Fragment, { 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: kernelsStore.getExecutionState(kernel.id) })] }), _jsxs(Box, { children: ["Kernel Phase: ", _jsx(Label, { children: kernelsStore.getExecutionPhase(kernel.id) })] }), _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: "Kernel Indicator:" }), _jsx(Box, { ml: 3, children: _jsx(KernelIndicator, { kernel: kernel.connection }) })] }), _jsx(Box, { children: _jsx(Button, { onClick: () => cellsStore.execute(CELL_ID), children: "Run cell" }) }), _jsx(Cell, { source: DEFAULT_SOURCE, id: CELL_ID })] }));
 };
 export default CellExample;

package/lib/examples/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/examples/DatalayerNotebookExample.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, 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, useMemo } from 'react';
+import { Box, Checkbox, FormControl, Heading } from '@primer/react';
+import { loadJupyterConfig, JupyterReactTheme, Notebook2, } from '@datalayer/jupyter-react';
+import { DatalayerCollaborationProvider } from '../collaboration/DatalayerCollaborationProvider';
+import { createDatalayerServiceManager } from '../services/DatalayerServiceManager';
+import { useCoreStore } from '../state/substates/CoreState';
+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?.runUrl) {
+                try {
+                    console.log('Creating DatalayerServiceManager for Datalayer infrastructure');
+                    // 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 runUrl and token.');
+            }
+        };
+        createManager();
+    }, [props.serviceManager, configuration]);
+    // Create the collaboration provider when enabled
+    const collaborationProvider = useMemo(() => {
+        if (!enableCollaboration) {
+            return undefined;
+        }
+        const runUrl = configuration?.runUrl;
+        const token = configuration?.token;
+        if (!runUrl || !token) {
+            console.warn('Datalayer collaboration enabled but runUrl 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({
+            runUrl,
+            token,
+        });
+    }, [enableCollaboration, configuration]);
+    return (_jsx(JupyterReactTheme, { children: _jsxs(Box, { p: 3, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "DatalayerNotebook 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." })), _jsx(Box, { sx: {
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                    }, children: serviceManager ? (_jsx(Notebook2, { 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 (runUrl 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/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

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

package/lib/examples/NotebookExample.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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.
@@ -10,13 +10,15 @@ 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 { Notebook2, NotebookToolbar, CellSidebarExtension, CellSidebarButton } from '@datalayer/jupyter-react';
+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 { kernel, serviceManager } = props;
-    const extensions = useMemo(() => [
-        new CellSidebarExtension({ factory: CellSidebarButton })
-    ], []);
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { as: "h1", children: "A Jupyter Notebook" }), _jsx(Notebook2, { path: "ipywidgets.ipynb", id: NOTEBOOK_ID, serviceManager: serviceManager, kernelId: kernel.id, extensions: extensions, Toolbar: NotebookToolbar })] }));
+    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;