@datalayer/core 0.0.3 → 0.0.5

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;

package/lib/examples/example-selector.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Registry of available examples with dynamic imports.
+ * Add new examples here to make them available in the example runner.
+ */
+export const EXAMPLES = {
+    CellExample: () => import('./CellExample'),
+    DatalayerNotebookExample: () => import('./DatalayerNotebookExample'),
+    NotebookExample: () => import('./NotebookExample'),
+    NotebookMutationsKernel: () => import('./NotebookMutationsKernel'),
+    NotebookMutationsServiceManager: () => import('./NotebookMutationsServiceManager'),
+    ReactRouterExample: () => import('./ReactRouterExample'),
+    NativeNavigationExample: () => import('./NativeNavigationExample'),
+};
+/**
+ * Get the list of available example names
+ */
+export function getExampleNames() {
+    return Object.keys(EXAMPLES);
+}
+/**
+ * Get the selected example based on environment variable
+ * Falls back to 'NotebookExample' if not specified or invalid
+ */
+export function getSelectedExample() {
+    // import.meta.env.EXAMPLE is defined in vite config
+    const exampleName = import.meta.env.EXAMPLE || 'NotebookExample';
+    if (!EXAMPLES[exampleName]) {
+        console.warn(`Example "${exampleName}" not found. Available examples:`, getExampleNames());
+        console.log('Falling back to NotebookExample');
+        return EXAMPLES['NotebookExample'];
+    }
+    return EXAMPLES[exampleName];
+}
+/**
+ * Get the selected example name
+ */
+export function getSelectedExampleName() {
+    // import.meta.env.EXAMPLE is defined in vite config
+    const exampleName = import.meta.env.EXAMPLE || 'NotebookExample';
+    return EXAMPLES[exampleName] ? exampleName : 'NotebookExample';
+}

package/lib/examples/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NotebookMutationsKernel';
+export * from './NotebookMutationsServiceManager';

package/lib/examples/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './NotebookMutationsKernel';
+export * from './NotebookMutationsServiceManager';

package/lib/examples/main.js

@@ -0,0 +1,153 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { loadJupyterConfig, JupyterReactTheme, createServerSettings, setJupyterServerUrl, setJupyterServerToken, getJupyterServerUrl, getJupyterServerToken, } from '@datalayer/jupyter-react';
+import { ServiceManager } from '@jupyterlab/services';
+import { coreStore } from '../state/substates/CoreState';
+import { iamStore } from '../state';
+import { getSelectedExample, getSelectedExampleName } from './example-selector';
+import { createDatalayerServiceManager } from '../services/DatalayerServiceManager';
+// Load configurations from DOM
+const loadConfigurations = () => {
+    // Load Datalayer configuration
+    const datalayerConfigElement = document.getElementById('datalayer-config-data');
+    if (datalayerConfigElement?.textContent) {
+        try {
+            const datalayerConfig = JSON.parse(datalayerConfigElement.textContent);
+            if (datalayerConfig.runUrl) {
+                console.log('Setting Datalayer config:', datalayerConfig);
+                coreStore.getState().setConfiguration(datalayerConfig);
+                // Also set the token in the IAM store for API authentication
+                if (datalayerConfig.token) {
+                    // Use the setLogin method to set the token in IAM store
+                    // For now, we'll just set a minimal user object since we don't have full user data
+                    iamStore.getState().setLogin({
+                        id: 'example-id',
+                        handle: 'example-user',
+                        email: 'example@datalayer.com',
+                        firstName: 'Example',
+                        lastName: 'User',
+                        initials: 'EU',
+                        displayName: 'Example User',
+                        avatarUrl: '',
+                        roles: [],
+                        setRoles: () => { },
+                        iamProviders: [],
+                        settings: {},
+                        unsubscribedFromOutbounds: false,
+                        onboarding: {},
+                        events: [],
+                    }, datalayerConfig.token);
+                }
+            }
+        }
+        catch (e) {
+            console.error('Failed to parse Datalayer config:', e);
+        }
+    }
+    // Load Jupyter configuration
+    loadJupyterConfig();
+    // Also set Jupyter server URL and token if available in jupyter-config-data
+    const jupyterConfigElement = document.getElementById('jupyter-config-data');
+    if (jupyterConfigElement?.textContent) {
+        try {
+            const jupyterConfig = JSON.parse(jupyterConfigElement.textContent);
+            if (jupyterConfig.baseUrl) {
+                setJupyterServerUrl(jupyterConfig.baseUrl);
+            }
+            if (jupyterConfig.token) {
+                setJupyterServerToken(jupyterConfig.token);
+            }
+        }
+        catch (e) {
+            console.error('Failed to parse Jupyter config:', e);
+        }
+    }
+};
+// Main App component that loads and renders the selected example
+const ExampleApp = () => {
+    const [ExampleComponent, setExampleComponent] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [serviceManager, setServiceManager] = useState(null);
+    useEffect(() => {
+        // Load configurations
+        loadConfigurations();
+        // Create service manager
+        const createManager = async () => {
+            const { configuration } = coreStore.getState();
+            // Try to use DatalayerServiceManager if we have a token
+            if (configuration?.token) {
+                console.log('Using DatalayerServiceManager with token');
+                try {
+                    const manager = await createDatalayerServiceManager(configuration.cpuEnvironment || 'python-3.11', configuration.credits || 100);
+                    await manager.ready;
+                    console.log('DatalayerServiceManager is ready');
+                    setServiceManager(manager);
+                    return;
+                }
+                catch (error) {
+                    console.error('Failed to create DatalayerServiceManager:', error);
+                    console.log('Falling back to regular ServiceManager');
+                }
+            }
+            // Fall back to regular ServiceManager
+            console.log('Using regular ServiceManager (no Datalayer token)');
+            const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+            const manager = new ServiceManager({ serverSettings });
+            await manager.ready;
+            console.log('Regular ServiceManager is ready');
+            setServiceManager(manager);
+        };
+        createManager();
+        // Load the selected example
+        const loadExample = async () => {
+            try {
+                const exampleLoader = getSelectedExample();
+                const module = await exampleLoader();
+                setExampleComponent(() => module.default);
+                setLoading(false);
+            }
+            catch (e) {
+                console.error('Failed to load example:', e);
+                setError(`Failed to load example: ${e}`);
+                setLoading(false);
+            }
+        };
+        loadExample();
+    }, []);
+    if (loading) {
+        return (_jsxs("div", { style: { padding: '20px', textAlign: 'center' }, children: [_jsxs("h2", { children: ["Loading Example: ", getSelectedExampleName()] }), _jsx("p", { children: "Please wait..." })] }));
+    }
+    if (error) {
+        return (_jsxs("div", { style: { padding: '20px', color: 'red' }, children: [_jsx("h2", { children: "Error Loading Example" }), _jsx("pre", { children: error })] }));
+    }
+    if (!ExampleComponent) {
+        return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h2", { children: "Example Not Found" }), _jsx("p", { children: "The selected example could not be loaded." })] }));
+    }
+    // Check if the example component expects props
+    // Most examples will need serviceManager
+    const exampleProps = {};
+    if (serviceManager) {
+        exampleProps.serviceManager = serviceManager;
+    }
+    return (_jsx(JupyterReactTheme, { children: _jsxs("div", { style: { width: '100vw', height: '100vh', overflow: 'hidden' }, children: [_jsxs("div", { style: {
+                        padding: '10px',
+                        background: '#f0f0f0',
+                        borderBottom: '1px solid #ccc',
+                        fontSize: '14px',
+                        fontFamily: 'monospace',
+                    }, children: ["Running Example: ", _jsx("strong", { children: getSelectedExampleName() })] }), _jsx("div", { style: { height: 'calc(100vh - 40px)', overflow: 'auto' }, children: _jsx(ExampleComponent, { ...exampleProps }) })] }) }));
+};
+// Mount the app
+const root = document.getElementById('root');
+if (root) {
+    createRoot(root).render(_jsx(ExampleApp, {}));
+}
+else {
+    console.error('Root element not found');
+}

package/lib/examples/notebooks/IPyWidgetsExample.ipynb.json

@@ -0,0 +1,101 @@
+{
+  "cells": [
+    {
+      "cell_type": "code",
+      "execution_count": 1,
+      "id": "3a86eccf-352d-480d-b1b0-4cf355921be9",
+      "metadata": {},
+      "outputs": [
+        {
+          "data": {
+            "application/vnd.jupyter.widget-view+json": {
+              "model_id": "c686864a5ad44793b53c9cf1b112fafe",
+              "version_major": 2,
+              "version_minor": 0
+            },
+            "text/plain": []
+          },
+          "metadata": {},
+          "output_type": "display_data"
+        }
+      ],
+      "source": ["import ipywidgets as widgets\n", "widgets.IntSlider()"]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": 8,
+      "id": "f347e0ac-7614-4643-8fed-e6b5dfb67bcd",
+      "metadata": {},
+      "outputs": [
+        {
+          "data": {
+            "application/vnd.jupyter.widget-view+json": {
+              "model_id": "e361a274319a4715ae5cfc8104c87224",
+              "version_major": 2,
+              "version_minor": 0
+            },
+            "text/plain": ["FloatText(value=0.0)"]
+          },
+          "metadata": {},
+          "output_type": "display_data"
+        },
+        {
+          "data": {
+            "application/vnd.jupyter.widget-view+json": {
+              "model_id": "859ac1871f56461fa8f2c97e6e18c4c4",
+              "version_major": 2,
+              "version_minor": 0
+            },
+            "text/plain": ["FloatSlider(value=0.0)"]
+          },
+          "metadata": {},
+          "output_type": "display_data"
+        }
+      ],
+      "source": [
+        "from IPython.display import display\n",
+        "a = widgets.FloatText()\n",
+        "b = widgets.FloatSlider()\n",
+        "display(a,b)\n",
+        "mylink = widgets.jslink((a, 'value'), (b, 'value'))"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": 7,
+      "id": "07f52271-ccae-476d-83b9-715c96168c7c",
+      "metadata": {},
+      "outputs": [],
+      "source": ["mylink.unlink()"]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "id": "81b15288-063d-412d-99db-c73453e18565",
+      "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"
+    }
+  },
+  "nbformat": 4,
+  "nbformat_minor": 5
+}

package/lib/examples/notebooks/IPyWidgetsExampleWithState.ipynb.json

@@ -0,0 +1,112 @@
+{
+  "cells": [
+    {
+      "cell_type": "code",
+      "execution_count": 1,
+      "id": "58fc6682",
+      "metadata": {},
+      "outputs": [
+        {
+          "data": {
+            "application/vnd.jupyter.widget-view+json": {
+              "model_id": "68c218b87d4d43589628d4f23e112319",
+              "version_major": 2,
+              "version_minor": 0
+            },
+            "text/plain": ["IntSlider(value=0)"]
+          },
+          "execution_count": 1,
+          "metadata": {},
+          "output_type": "execute_result"
+        }
+      ],
+      "source": ["import ipywidgets\n", "ipywidgets.IntSlider()"]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "id": "5af4e4a9",
+      "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.10.13"
+    },
+    "widgets": {
+      "application/vnd.jupyter.widget-state+json": {
+        "state": {
+          "1a916ae14b904353bc5f2db9714a8f2b": {
+            "model_module": "@jupyter-widgets/base",
+            "model_module_version": "2.0.0",
+            "model_name": "LayoutModel",
+            "state": {}
+          },
+          "32c74c0d7a7a4bbe84039bb47cc032d6": {
+            "model_module": "@jupyter-widgets/controls",
+            "model_module_version": "2.0.0",
+            "model_name": "IntSliderModel",
+            "state": {
+              "behavior": "drag-tap",
+              "layout": "IPY_MODEL_6753cb5249ae4429b1d0aaf7af2ef7c1",
+              "style": "IPY_MODEL_f18c172d32f54e0b810ff0725b827fdf",
+              "value": 33
+            }
+          },
+          "39beda15640c4c3fa82a284dc7df1235": {
+            "model_module": "@jupyter-widgets/controls",
+            "model_module_version": "2.0.0",
+            "model_name": "SliderStyleModel",
+            "state": {
+              "description_width": ""
+            }
+          },
+          "6753cb5249ae4429b1d0aaf7af2ef7c1": {
+            "model_module": "@jupyter-widgets/base",
+            "model_module_version": "2.0.0",
+            "model_name": "LayoutModel",
+            "state": {}
+          },
+          "68c218b87d4d43589628d4f23e112319": {
+            "model_module": "@jupyter-widgets/controls",
+            "model_module_version": "2.0.0",
+            "model_name": "IntSliderModel",
+            "state": {
+              "behavior": "drag-tap",
+              "layout": "IPY_MODEL_1a916ae14b904353bc5f2db9714a8f2b",
+              "style": "IPY_MODEL_39beda15640c4c3fa82a284dc7df1235"
+            }
+          },
+          "f18c172d32f54e0b810ff0725b827fdf": {
+            "model_module": "@jupyter-widgets/controls",
+            "model_module_version": "2.0.0",
+            "model_name": "SliderStyleModel",
+            "state": {
+              "description_width": ""
+            }
+          }
+        },
+        "version_major": 2,
+        "version_minor": 0
+      }
+    }
+  },
+  "nbformat": 4,
+  "nbformat_minor": 5
+}