@datalayer/core 0.0.2 → 0.0.4

package/lib/components/tables/DataTable.js

@@ -3,11 +3,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import { useState } from 'react';
 import { Box, Button, PageLayout } from '@primer/react';
 import { Dialog } from '@primer/react/experimental';
@@ -16,9 +11,6 @@ const DataTableDetails = (props) => {
 };
 export const DataTable = (props) => {
     const [dialog, setDialog] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { children: dialog ?
-                    _jsx(Dialog, { sx: { width: "100%", height: '100%' }, onClose: e => setDialog(false), children: _jsx(DataTableDetails, { ...props }) })
-                    :
-                        _jsx(DataTableDetails, { ...props }) }), _jsx(Box, { children: _jsx(Button, { onClick: e => setDialog(true), children: "Zoom" }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { children: dialog ? (_jsx(Dialog, { sx: { width: '100%', height: '100%' }, onClose: e => setDialog(false), children: _jsx(DataTableDetails, { ...props }) })) : (_jsx(DataTableDetails, { ...props })) }), _jsx(Box, { children: _jsx(Button, { onClick: e => setDialog(true), children: "Zoom" }) })] }));
 };
 export default DataTable;

package/lib/components/tables/index.js

@@ -2,9 +2,4 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 export * from './DataTable';

package/lib/components/text-reveal/TextRevealAnimation.js

@@ -3,11 +3,6 @@ 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.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import React, { useEffect } from 'react';
 import clsx from 'clsx';
 import { useTextRevealAnimationLines } from './useTextRevealAnimationLines';
@@ -45,11 +40,15 @@ export function TextRevealAnimation({ children, ...rest }) {
             }
         };
     }, [ref]);
-    if (typeof children !== 'string' && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {
-        // eslint-disable-next-line no-console
+    if (typeof children !== 'string' &&
+        (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {
         console.warn('Children passed to TextRevealAnimation must be a string');
         return null;
     }
     return (_jsx("span", { ref: ref, ...rest, children: lines?.map((line, i) => (_jsxs(React.Fragment, { children: [_jsx("span", { className: clsx(styles.TextRevealAnimation, animationStarted && styles['TextRevealAnimation--visible'], animationStarted &&
-                        (hasAnimationCompleted ? styles['TextRevealAnimation'] : styles['TextRevealAnimation--animated'])), style: { '--animation-delay': `${220 + i * 200}ms` }, onAnimationEnd: () => onLineAnimationEnd(i), children: line }), ' '] }, line))) }));
+                        (hasAnimationCompleted
+                            ? styles['TextRevealAnimation']
+                            : styles['TextRevealAnimation--animated'])), style: {
+                        '--animation-delay': `${220 + i * 200}ms`,
+                    }, onAnimationEnd: () => onLineAnimationEnd(i), children: line }), ' '] }, line))) }));
 }

package/lib/components/text-reveal/TextRevealAnimation.module.css

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+@keyframes wipe {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+
+.TextRevealAnimation {
+  opacity: 0;
+  transition: opacity var(--brand-animation-duration-default)
+    var(--brand-animation-easing-default);
+}
+
+.TextRevealAnimation--visible {
+  opacity: 1;
+}
+
+.TextRevealAnimation,
+.TextRevealAnimation--animated {
+  width: 100%;
+  min-height: 1lh;
+  position: relative;
+}
+
+.TextRevealAnimation--animated::after {
+  content: '';
+  display: inline;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--brand-color-accent-primary);
+  transform-origin: right;
+  animation: wipe var(--brand-animation-duration-extended) forwards
+    var(--brand-animation-easing-default);
+  animation-delay: var(--animation-delay);
+}

package/lib/components/text-reveal/index.js

@@ -2,9 +2,4 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 export * from './TextRevealAnimation';

package/lib/components/text-reveal/useTextRevealAnimationLines.js

@@ -2,11 +2,6 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import { useRef, useEffect, useState } from 'react';
 export const useTextRevealAnimationLines = (text) => {
     const ref = useRef(null);

package/lib/components/tokens/SpaceVariantToken.d.ts

@@ -1,4 +1,4 @@
-import { ISpaceVariant } from "../../models";
+import { ISpaceVariant } from '../../models';
 export declare const SpaceVariantToken: (props: {
     variant: ISpaceVariant;
 }) => import("react/jsx-runtime").JSX.Element;

package/lib/components/tokens/SpaceVariantToken.js

@@ -3,20 +3,15 @@ import { jsx as _jsx, 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-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
-import { Token } from "@primer/react";
-import { ProjectIcon } from "@primer/octicons-react";
-import { StudentIcon } from "@datalayer/icons-react";
+import { Token } from '@primer/react';
+import { ProjectIcon } from '@primer/octicons-react';
+import { StudentIcon } from '@datalayer/icons-react';
 export const SpaceVariantToken = (props) => {
     const { variant } = props;
     switch (variant) {
-        case ("default"):
+        case 'default':
             return _jsx(Token, { text: "default", leadingVisual: ProjectIcon });
-        case ("course"):
+        case 'course':
             return _jsx(Token, { text: "course", leadingVisual: StudentIcon });
         default:
             return _jsx(_Fragment, {});

package/lib/components/tokens/index.js

@@ -2,9 +2,4 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 export * from './SpaceVariantToken';

package/lib/components/toolbars/AssignmentEditorToolbar.js

@@ -3,11 +3,6 @@ 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.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import { Button, Box } from '@primer/react';
 import { RepoPushIcon, PlayIcon, StopIcon } from '@primer/octicons-react';
 import { notebookStore } from '@datalayer/jupyter-react';
@@ -16,8 +11,6 @@ export const AssignmentEditorToolbar = (props) => {
     const { notebookId } = props;
     const { grade } = useGradeStore();
     const notebook = notebookStore.getState().selectNotebook(notebookId);
-    return (_jsxs(Box, { display: "flex", children: [_jsx(Box, { children: _jsx(Button, { variant: "invisible", size: "small", leadingVisual: RepoPushIcon, onClick: () => grade(new Date()), children: "Grade" }) }), notebook?.kernelStatus !== 'busy' &&
-                _jsx(Box, { children: _jsx(Button, { variant: "invisible", size: "small", leadingVisual: PlayIcon, onClick: e => notebookStore.getState().runAll(notebookId), children: "Run all" }) }), notebook?.kernelStatus === 'busy' &&
-                _jsx(Box, { children: _jsx(Button, { variant: "danger", size: "small", leadingVisual: StopIcon, onClick: e => notebookStore.getState().interrupt(notebookId), children: "Interrupt" }) })] }));
+    return (_jsxs(Box, { display: "flex", children: [_jsx(Box, { children: _jsx(Button, { variant: "invisible", size: "small", leadingVisual: RepoPushIcon, onClick: () => grade(new Date()), children: "Grade" }) }), notebook?.kernelStatus !== 'busy' && (_jsx(Box, { children: _jsx(Button, { variant: "invisible", size: "small", leadingVisual: PlayIcon, onClick: e => notebookStore.getState().runAll(notebookId), children: "Run all" }) })), notebook?.kernelStatus === 'busy' && (_jsx(Box, { children: _jsx(Button, { variant: "danger", size: "small", leadingVisual: StopIcon, onClick: e => notebookStore.getState().interrupt(notebookId), children: "Interrupt" }) }))] }));
 };
 export default AssignmentEditorToolbar;

package/lib/components/toolbars/DocumentEditorToolbar.js

@@ -3,11 +3,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import { Button, Box } from '@primer/react';
 import { RepoPushIcon } from '@primer/octicons-react';
 import { documentStore } from '../../state';

package/lib/components/toolbars/NotebookEditorToolbar.d.ts

@@ -1,6 +1,6 @@
 import { Session } from '@jupyterlab/services';
 import { CommandRegistry } from '@lumino/commands';
-import { type IRuntimeDesc } from '../../api';
+import type { IRuntimeDesc } from '../../models';
 /**
  * NotebookEditorToolbar component properties
  */

package/lib/components/toolbars/NotebookEditorToolbar.js

@@ -3,11 +3,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import { NotebookCommandIds } from '@datalayer/jupyter-react';
 import { Button } from '@primer/react';
 import { PlayIcon, StopIcon } from '@primer/octicons-react';

package/lib/components/toolbars/index.js

@@ -2,11 +2,6 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 export * from './AssignmentEditorToolbar';
 export * from './DocumentEditorToolbar';
 export * from './NotebookEditorToolbar';

package/lib/components/users/PeerIndicator.d.ts

@@ -15,4 +15,4 @@ export type IPeersIndicatorProps = {
 /**
  * Connected peers indicator
  */
-export declare function PeersIndicator({ awareness, currentUserHandle }: IPeersIndicatorProps): JSX.Element | null;
+export declare function PeersIndicator({ awareness, currentUserHandle, }: IPeersIndicatorProps): JSX.Element | null;

package/lib/components/users/PeerIndicator.js

@@ -3,11 +3,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import { useEffect, useState } from 'react';
 import { Avatar, AvatarStack } from '@primer/react';
 import { getAvatarURL, getRelativeTime } from '../../utils';
@@ -23,7 +18,7 @@ var NotificationType;
 const MSG_TO_NOTIFICATION = {
     '-1': NotificationType.ERROR,
     '0': NotificationType.PROGRESS,
-    '1': NotificationType.SUCCESS
+    '1': NotificationType.SUCCESS,
 };
 function isExpired(timestamp) {
     // Timestamp is expired if older than 10 seconds ago
@@ -36,7 +31,7 @@ function defaultAvatarSrc(color, text) {
 /**
  * Connected peers indicator
  */
-export function PeersIndicator({ awareness, currentUserHandle }) {
+export function PeersIndicator({ awareness, currentUserHandle, }) {
     const [peers, setPeers] = useState([]);
     useEffect(() => {
         const onAwarenessChange = () => {
@@ -63,7 +58,7 @@ export function PeersIndicator({ awareness, currentUserHandle }) {
                         notificationType: notExpiredNotification &&
                             peer.notification?.message_type !== undefined
                             ? MSG_TO_NOTIFICATION[peer.notification?.message_type.toString()]
-                            : undefined
+                            : undefined,
                     }
                     : {
                         avatarUrl: user.avatar_url,
@@ -71,7 +66,7 @@ export function PeersIndicator({ awareness, currentUserHandle }) {
                         displayName: user.display_name,
                         handle: user.name,
                         initials: user.initials,
-                        username: user.username
+                        username: user.username,
                     };
                 // Ensure to display a peer only once
                 if (!agg.map(p => p.username).includes(newPeer.username)) {
@@ -97,7 +92,7 @@ export function PeersIndicator({ awareness, currentUserHandle }) {
             return (_jsx(Avatar, { sx: {
                     border: peer.notificationType
                         ? `var(--borderWidth-thick) solid ${peer.notificationType}`
-                        : 'none'
+                        : 'none',
                 }, title: title, src: peer.avatarUrl
                     ? getAvatarURL(peer.avatarUrl)
                     : defaultAvatarSrc(peer.color, peer.initials), size: AVATAR_SIZE }, peer.displayName));

package/lib/components/users/index.js

@@ -2,9 +2,4 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 export * from './PeerIndicator';

package/lib/config/Configuration.d.ts

@@ -1,6 +1,40 @@
 import { ISignal } from '@lumino/signaling';
 export declare const FORCE_ACTIVATE_RUNTIMES_PLUGINS = false;
+/**
+ * Configuration interface for Datalayer platform integration
+ *
+ * This interface defines the configuration needed to connect to
+ * and interact with the Datalayer platform services.
+ */
 export type IDatalayerCoreConfig = {
+    /**
+     * Datalayer RUN URL.
+     * The base URL for the Datalayer platform API.
+     * @example "https://prod1.datalayer.run"
+     */
+    runUrl: string;
+    /**
+     * Datalayer API authentication token.
+     * Used for authenticating requests to the Datalayer platform.
+     */
+    token: string;
+    /**
+     * Credits limit for kernel usage.
+     * Determines the maximum credits that can be consumed by kernels.
+     */
+    credits: number;
+    /**
+     * CPU environment name.
+     * Specifies which CPU-based environment to use for kernels.
+     * @example "python-cpu-env"
+     */
+    cpuEnvironment: string;
+    /**
+     * GPU environment name.
+     * Specifies which GPU-enabled environment to use for kernels.
+     * @example "ai-env"
+     */
+    gpuEnvironment: string;
     /**
      * Use mock model, useful for e.g. storybooks.
      */
@@ -108,4 +142,18 @@ export declare class DatalayerConfiguration {
     get configuration(): IDatalayerCoreConfig;
     get configurationChanged(): ISignal<DatalayerConfiguration, IDatalayerCoreConfig>;
 }
+/**
+ * Default configuration values for Datalayer
+ */
+export declare const DEFAULT_DATALAYER_CONFIG: Partial<IDatalayerCoreConfig>;
+/**
+ * Type guard to check if a config object is a valid IDatalayerConfig
+ */
+export declare function isDatalayerConfig(config: any): config is IDatalayerCoreConfig;
+/**
+ * Helper function to merge partial config with defaults
+ * @param config Partial configuration to merge
+ * @returns Complete configuration with defaults applied, or undefined if required fields missing
+ */
+export declare function mergeConfigWithDefaults(config?: Partial<IDatalayerCoreConfig>): Partial<IDatalayerCoreConfig> | undefined;
 export default DatalayerConfiguration;

package/lib/config/Configuration.js

@@ -2,11 +2,6 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import { Signal } from '@lumino/signaling';
 import { coreStore } from '../state';
 export const FORCE_ACTIVATE_RUNTIMES_PLUGINS = false;
@@ -27,4 +22,46 @@ export class DatalayerConfiguration {
         return this._configurationChanged;
     }
 }
+/**
+ * Default configuration values for Datalayer
+ */
+export const DEFAULT_DATALAYER_CONFIG = {
+    runUrl: 'https://prod1.datalayer.run',
+    credits: 100,
+    cpuEnvironment: 'python-cpu-env',
+    gpuEnvironment: 'ai-env',
+};
+/**
+ * Type guard to check if a config object is a valid IDatalayerConfig
+ */
+export function isDatalayerConfig(config) {
+    return (config &&
+        typeof config === 'object' &&
+        typeof config.runUrl === 'string' &&
+        typeof config.token === 'string' &&
+        typeof config.credits === 'number' &&
+        typeof config.cpuEnvironment === 'string' &&
+        typeof config.gpuEnvironment === 'string');
+}
+/**
+ * Helper function to merge partial config with defaults
+ * @param config Partial configuration to merge
+ * @returns Complete configuration with defaults applied, or undefined if required fields missing
+ */
+export function mergeConfigWithDefaults(config) {
+    if (!config)
+        return undefined;
+    // If we have required fields (token and runUrl), merge with defaults for optional fields
+    if (config.token && config.runUrl) {
+        return {
+            runUrl: config.runUrl,
+            token: config.token,
+            credits: config.credits ?? DEFAULT_DATALAYER_CONFIG.credits,
+            cpuEnvironment: config.cpuEnvironment ?? DEFAULT_DATALAYER_CONFIG.cpuEnvironment,
+            gpuEnvironment: config.gpuEnvironment ?? DEFAULT_DATALAYER_CONFIG.gpuEnvironment,
+        };
+    }
+    // If missing required fields, return undefined
+    return undefined;
+}
 export default DatalayerConfiguration;

package/lib/config/index.js

@@ -2,10 +2,5 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 export * from './Configuration';
 export * from './integrations';

package/lib/config/integrations/Loom.js

@@ -2,20 +2,15 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 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/config/integrations/index.js

@@ -2,9 +2,4 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 export * from './Loom';

package/lib/examples/CellExample.d.ts

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

package/lib/examples/CellExample.js

@@ -0,0 +1,55 @@
+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 { useEffect, useState } from 'react';
+import { Box, Button, Label } from '@primer/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, 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;