@datalayer/core 0.0.6 → 0.0.9

package/lib/components/display/JupyterDialog.js

@@ -11,6 +11,7 @@ import { Widget } from '@lumino/widgets';
 import { FocusKeys } from '@primer/behaviors';
 import { Checkbox, FormControl, useFocusZone } from '@primer/react';
 import { Dialog as PrimerDialog, } from '@primer/react/experimental';
+import { JupyterReactTheme } from '@datalayer/jupyter-react';
 function DialogFooter(props) {
     const { checkbox, footerButtons, setChecked } = props;
     const [checked, setLocalChecked] = useState();
@@ -58,28 +59,28 @@ export class JupyterDialog extends ReactWidget {
         }) }));
     _renderFooter = (props) => (_jsx(DialogFooter, { ...props, checkbox: this.checkbox, setChecked: this.setChecked }));
     render() {
-        return (_jsx(PrimerDialog, { sx: {
-                color: 'var(--fgColor-default)',
-                backgroundColor: 'var(--bgColor-default)',
-                fontFamily: 'var(--fontStack-system)',
-                fontSize: 'var(--text-body-size-medium)',
-                lineHeight: 'var(--text-body-lineHeight-medium)',
-            }, onClose: this.close, footerButtons: this.buttons.map((but, idx) => {
-                const footerButton = {
-                    buttonType: but.displayType === 'default'
-                        ? but.accept
-                            ? 'primary'
-                            : 'default'
-                        : 'danger',
-                    onClick: () => {
-                        this.handleButton(idx);
-                    },
-                    content: but.label,
-                    'aria-label': but.ariaLabel,
-                    autoFocus: but.accept,
-                };
-                return footerButton;
-            }), renderBody: this._renderBody, renderFooter: this._renderFooter, title: this.dialogTitle }));
+        return (_jsx(JupyterReactTheme, { children: _jsx(PrimerDialog, { sx: {
+                    color: 'var(--fgColor-default)',
+                    backgroundColor: 'var(--bgColor-default)',
+                    fontFamily: 'var(--fontStack-system)',
+                    fontSize: 'var(--text-body-size-medium)',
+                    lineHeight: 'var(--text-body-lineHeight-medium)',
+                }, onClose: this.close, footerButtons: this.buttons.map((but, idx) => {
+                    const footerButton = {
+                        buttonType: but.displayType === 'default'
+                            ? but.accept
+                                ? 'primary'
+                                : 'default'
+                            : 'danger',
+                        onClick: () => {
+                            this.handleButton(idx);
+                        },
+                        content: but.label,
+                        'aria-label': but.ariaLabel,
+                        autoFocus: but.accept,
+                    };
+                    return footerButton;
+                }), renderBody: this._renderBody, renderFooter: this._renderFooter, title: this.dialogTitle }) }));
     }
     /**
      * Launch the dialog as a modal window.

package/lib/components/notebooks/JupyterNotebookToolbar.js

@@ -7,7 +7,7 @@ import { CircleCurrentColorIcon, CircleGreenIcon, CircleOrangeIcon, } from '@dat
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { Sparklines, SparklinesBars, SparklinesLine, SparklinesReferenceLine, } from 'react-sparklines';
-import { DatalayerThemeProvider } from '../../theme';
+import { JupyterReactTheme } from '@datalayer/jupyter-react';
 function boxMullerRandom() {
     let phase = false;
     let x1;
@@ -34,6 +34,6 @@ function randomData(n = 30) {
 const SAMPLE_DATA_30 = randomData(30);
 const SAMPLE_DATA_100 = randomData(100);
 export const JupyterNotebookToolbar = () => {
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { display: "flex", m: 5, children: [_jsxs(Box, { ml: 3, children: [_jsx(Box, { mb: 3, children: _jsx(Text, { children: "Notebook Kernel: python3" }) }), _jsxs(Box, { display: "flex", children: [_jsx(Box, { width: 100, height: 100, children: _jsxs(Sparklines, { data: SAMPLE_DATA_30, children: [_jsx(SparklinesLine, { color: "#fa7e17" }), _jsx(SparklinesReferenceLine, { type: "mean" })] }) }), _jsx(Box, { width: 100, height: 100, ml: 3, children: _jsxs(Sparklines, { data: SAMPLE_DATA_100, children: [_jsx(SparklinesBars, { style: { fill: '#41c3f9', fillOpacity: '.25' } }), _jsx(SparklinesLine, { style: { stroke: '#41c3f9', fill: 'none' } })] }) })] })] }), _jsxs(Box, { ml: 6, children: [_jsx(Box, { mb: 3, children: _jsx(Text, { children: "Running Cells" }) }), _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: _jsx(CircleGreenIcon, {}) }), _jsx(Box, { children: _jsx(CircleCurrentColorIcon, { style: { color: 'white' } }) }), _jsx(Box, { children: _jsx(CircleCurrentColorIcon, { style: { color: 'white' } }) }), _jsx(Box, { children: _jsx(CircleOrangeIcon, {}) }), _jsx(Box, { children: _jsx(CircleGreenIcon, {}) }), _jsx(Box, { children: _jsx(CircleCurrentColorIcon, { style: { color: 'white' } }) })] })] }), _jsx(Box, { ml: 6, children: _jsx(Box, { mb: 3, children: _jsx(Text, { children: "Credit: 12/100" }) }) })] }) }));
+    return (_jsx(JupyterReactTheme, { children: _jsxs(Box, { display: "flex", m: 5, children: [_jsxs(Box, { ml: 3, children: [_jsx(Box, { mb: 3, children: _jsx(Text, { children: "Notebook Kernel: python3" }) }), _jsxs(Box, { display: "flex", children: [_jsx(Box, { width: 100, height: 100, children: _jsxs(Sparklines, { data: SAMPLE_DATA_30, children: [_jsx(SparklinesLine, { color: "#fa7e17" }), _jsx(SparklinesReferenceLine, { type: "mean" })] }) }), _jsx(Box, { width: 100, height: 100, ml: 3, children: _jsxs(Sparklines, { data: SAMPLE_DATA_100, children: [_jsx(SparklinesBars, { style: { fill: '#41c3f9', fillOpacity: '.25' } }), _jsx(SparklinesLine, { style: { stroke: '#41c3f9', fill: 'none' } })] }) })] })] }), _jsxs(Box, { ml: 6, children: [_jsx(Box, { mb: 3, children: _jsx(Text, { children: "Running Cells" }) }), _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: _jsx(CircleGreenIcon, {}) }), _jsx(Box, { children: _jsx(CircleCurrentColorIcon, { style: { color: 'white' } }) }), _jsx(Box, { children: _jsx(CircleCurrentColorIcon, { style: { color: 'white' } }) }), _jsx(Box, { children: _jsx(CircleOrangeIcon, {}) }), _jsx(Box, { children: _jsx(CircleGreenIcon, {}) }), _jsx(Box, { children: _jsx(CircleCurrentColorIcon, { style: { color: 'white' } }) })] })] }), _jsx(Box, { ml: 6, children: _jsx(Box, { mb: 3, children: _jsx(Text, { children: "Credit: 12/100" }) }) })] }) }));
 };
 export default JupyterNotebookToolbar;

package/lib/components/runtimes/RuntimeCellVariables.d.ts

@@ -1,8 +1,8 @@
 import { ITranslator } from '@jupyterlab/translation';
 /**
- * {@link KernelCellVariables} properties
+ * {@link RuntimeCellVariables} properties
  */
-interface IKernelCellVariablesProps {
+interface IRuntimeCellVariablesProps {
     /**
      * Variable names to be imported
      */
@@ -33,7 +33,7 @@ interface IKernelCellVariablesProps {
     translator?: ITranslator;
 }
 /**
- * Kernel variables picker
+ * Runtime Cell Variables Picker.
  */
-export declare function KernelCellVariables(props: IKernelCellVariablesProps): JSX.Element;
-export default KernelCellVariables;
+export declare function RuntimeCellVariables(props: IRuntimeCellVariablesProps): JSX.Element;
+export default RuntimeCellVariables;

package/lib/components/runtimes/RuntimeCellVariables.js

@@ -9,10 +9,10 @@ import { JSONExt } from '@lumino/coreutils';
 import { Autocomplete, FormControl, TextInputWithTokens } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 /**
- * Kernel variables picker
+ * Runtime Cell Variables Picker.
  */
-export function KernelCellVariables(props) {
-    const { getInputOptions, inputs, setInputs, getOutputOptions, output, setOutput, translator, } = props;
+export function RuntimeCellVariables(props) {
+    const { getInputOptions, getOutputOptions, inputs, output, setInputs, setOutput, translator, } = props;
     const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
     const inputForOutputRef = useRef(null);
     const [willSaveOutput, setWillSaveOutput] = useState(false);
@@ -169,4 +169,4 @@ export function KernelCellVariables(props) {
                                         .filter(item => item.selected)
                                         .map(item => item.id), onSelectedChange: onSelectedInputsChange, "aria-labelledby": "cell-input-variables", selectionVariant: "multiple", emptyStateText: trans.__('No available variables.'), loading: inputLoading }) })] })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { id: "cell-output-variables", children: trans.__('Output') }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { ref: inputForOutputRef, value: output, onChange: onOutputChange }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { items: outputsState ?? [], selectedItemIds: output ? [output] : [], "aria-labelledby": "cell-output-variables", loading: getOutputOptions && !outputsState, emptyStateText: trans.__('Not among the available variables.'), onOpenChange: handleOutputMenuOpenChange }) })] })] })] }));
 }
-export default KernelCellVariables;
+export default RuntimeCellVariables;

package/lib/components/runtimes/RuntimeCellVariablesDialog.js

@@ -9,7 +9,7 @@ import { nullTranslator } from '@jupyterlab/translation';
 import { JSONExt } from '@lumino/coreutils';
 import { KernelExecutor } from '@datalayer/jupyter-react';
 import { RuntimeSnippetsFacade } from '../../api';
-import { KernelCellVariables } from './RuntimeCellVariables';
+import { RuntimeCellVariables } from './RuntimeCellVariables';
 /**
  * Dialog to define the runtime cell variables to transfer
  */
@@ -96,6 +96,6 @@ export function RuntimeCellVariablesDialog(props) {
                 onClick: setVariables,
                 autoFocus: true,
             },
-        ], children: _jsx(KernelCellVariables, { inputs: inputs, getInputOptions: sessionContext ? getInputCandidates : undefined, setInputs: setInputs, output: output ?? undefined, getOutputOptions: getOutputCandidates, setOutput: setOutput, translator: translator }) }));
+        ], children: _jsx(RuntimeCellVariables, { inputs: inputs, getInputOptions: sessionContext ? getInputCandidates : undefined, setInputs: setInputs, output: output ?? undefined, getOutputOptions: getOutputCandidates, setOutput: setOutput, translator: translator }) }));
 }
 export default RuntimeCellVariablesDialog;

package/lib/components/runtimes/RuntimeLauncherDialog.d.ts

@@ -2,9 +2,9 @@ import type { IMarkdownParser, IRenderMime } from '@jupyterlab/rendermime';
 import type { IRemoteServicesManager } from '../../api';
 import type { IRuntimeSnapshot, IRuntimeDesc } from '../../models';
 /**
- * {@link KernelLauncherDialog} properties.
+ * {@link RuntimeLauncherDialog} properties.
  */
-export interface IKernelLauncherDialogProps {
+export interface IRuntimeLauncherDialogProps {
     /**
      * Dialog title
      */
@@ -28,7 +28,7 @@ export interface IKernelLauncherDialogProps {
      *
      * Default: `true`
      */
-    startKernel?: boolean | 'with-example' | 'defer';
+    startRuntime?: boolean | 'with-example' | 'defer';
     /**
      * Markdown parser
      */
@@ -48,6 +48,6 @@ export interface IKernelLauncherDialogProps {
     upgradeSubscription?: string;
 }
 /**
- * Start Remote Runtime Dialog.
+ * Start Runtime Launcher Dialog.
  */
-export declare function KernelLauncherDialog(props: IKernelLauncherDialogProps): JSX.Element;
+export declare function RuntimeLauncherDialog(props: IRuntimeLauncherDialogProps): JSX.Element;

package/lib/components/runtimes/RuntimeLauncherDialog.js

@@ -9,10 +9,11 @@ import { Button, FormControl, Select, Spinner, Text, TextInput, ToggleSwitch, To
 import { Dialog } from '@primer/react/experimental';
 import { AlertIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
+import { useJupyterReactStore } from '@datalayer/jupyter-react';
 import { USAGE_ROUTE } from '../../routes';
 import { useNavigate } from '../../hooks';
 import { NO_RUNTIME_AVAILABLE_LABEL } from '../../i18n';
-import { iamStore, useCoreStore, useIAMStore, useRuntimesStore, } from '../../state';
+import { iamStore, useCoreStore, useIAMStore } from '../../state';
 import { createNotebook, sleep } from '../../utils';
 import { Markdown } from '../display';
 import { Timer } from '../progress';
@@ -27,11 +28,11 @@ const NOT_AVAILABLE_INIT_RETRY = 10_000;
  */
 const NOT_AVAILABLE_RETRIES = 5;
 /**
- * Start Remote Runtime Dialog.
+ * Start Runtime Launcher Dialog.
  */
-export function KernelLauncherDialog(props) {
-    const { dialogTitle, kernelSnapshot, manager, onSubmit, markdownParser, sanitizer, upgradeSubscription, startKernel = true, } = props;
-    const hasExample = startKernel === 'with-example';
+export function RuntimeLauncherDialog(props) {
+    const { dialogTitle, kernelSnapshot, manager, onSubmit, markdownParser, sanitizer, upgradeSubscription, startRuntime = true, } = props;
+    const hasExample = startRuntime === 'with-example';
     const user = iamStore.getState().user;
     const environments = manager.environments.get();
     const { configuration } = useCoreStore();
@@ -45,7 +46,7 @@ export function KernelLauncherDialog(props) {
         // TODO when would this component be shown outside of a react-router? navigation is only available within a react-router.
         console.warn(reason);
     }
-    const { jupyterLabAdapter } = useRuntimesStore();
+    const { jupyterLabAdapter } = useJupyterReactStore();
     const [selection, setSelection] = useState((kernelSnapshot?.environment || environments[0]?.name) ?? '');
     const [timeLimit, setTimeLimit] = useState(Math.min(credits?.available ?? 0, 10));
     const [runtimeName, setRuntimeName] = useState(environments[0]?.kernel?.givenNameTemplate || environments[0]?.title || '');
@@ -58,16 +59,16 @@ export function KernelLauncherDialog(props) {
     const [flashLevel, setFlashLevel] = useState('danger');
     const isMounted = useIsMounted();
     useEffect(() => {
-        if (startKernel) {
+        if (startRuntime) {
             refreshCredits();
         }
-    }, [startKernel]);
+    }, [startRuntime]);
     const spec = useMemo(() => environments.find(spec => spec.name === selection), [environments, selection]);
     const description = spec?.description ?? '';
     const burningRate = spec?.burning_rate ?? 1;
     const creditsToMinutes = 1.0 / burningRate / 60.0;
     const max = Math.floor((credits?.available ?? 0) * creditsToMinutes);
-    const outOfCredits = startKernel && (!credits?.available || max < Number.EPSILON);
+    const outOfCredits = startRuntime && (!credits?.available || max < Number.EPSILON);
     const handleSelectionChange = useCallback((e) => {
         const selection = e.target.value;
         setSelection(selection);
@@ -76,7 +77,7 @@ export function KernelLauncherDialog(props) {
             setRuntimeName(spec?.kernel?.givenNameTemplate || spec?.title || '');
         }
     }, [setSelection, hasCustomRuntimeName]);
-    const handleSubmitKernel = useCallback(async () => {
+    const handleSubmitRuntime = useCallback(async () => {
         if (selection) {
             setError(undefined);
             setWaitingForRuntime(true);
@@ -90,14 +91,14 @@ export function KernelLauncherDialog(props) {
             const creditsLimit = Math.min(timeLimit, MAXIMAL_RUNTIME_TIME_RESERVATION_MINUTES) /
                 creditsToMinutes;
             desc.params = {};
-            if (startKernel === 'defer') {
+            if (startRuntime === 'defer') {
                 desc.params['creditsLimit'] = creditsLimit;
             }
             if (userStorage) {
                 desc.params['capabilities'] = ['user_storage'];
             }
             let success = true;
-            if (startKernel && startKernel !== 'defer') {
+            if (startRuntime && startRuntime !== 'defer') {
                 success = false;
                 let availableTrial = 1;
                 let retryDelay = NOT_AVAILABLE_INIT_RETRY;
@@ -182,7 +183,7 @@ export function KernelLauncherDialog(props) {
     }, [
         manager,
         selection,
-        startKernel,
+        startRuntime,
         runtimeName,
         onSubmit,
         userStorage,
@@ -223,8 +224,8 @@ export function KernelLauncherDialog(props) {
             },
             {
                 buttonType: 'primary',
-                onClick: handleSubmitKernel,
-                content: waitingForRuntime ? (_jsx(Spinner, { size: "small" })) : (startKernel ?? true) ? ('Launch') : ('Assign from the Environment'),
+                onClick: handleSubmitRuntime,
+                content: waitingForRuntime ? (_jsx(Spinner, { size: "small" })) : (startRuntime ?? true) ? ('Launch') : ('Assign from the Environment'),
                 disabled: waitingForRuntime || outOfCredits || timeLimit < Number.EPSILON,
                 autoFocus: true,
             },
@@ -234,9 +235,9 @@ export function KernelLauncherDialog(props) {
                 }
                 if (event.key === 'Enter') {
                     event.preventDefault();
-                    handleSubmitKernel();
+                    handleSubmitRuntime();
                 }
-            }, children: [_jsxs(FormControl, { disabled: !!kernelSnapshot?.environment || environments.length === 0, children: [_jsx(FormControl.Label, { children: "Environment" }), _jsx(Select, { name: "environment", disabled: !!kernelSnapshot?.environment || environments.length === 0, value: selection, onChange: handleSelectionChange, block: true, children: environments.map(spec => (_jsxs(Select.Option, { value: spec.name, children: [spec.name, spec.title && (_jsxs(_Fragment, { children: [' - ', spec.title] }))] }, spec.name))) }), _jsx(FormControl.Caption, { children: _jsx(_Fragment, { children: markdownParser ? (_jsx(Box, { sx: { img: { maxWidth: '100%' } }, children: _jsx(Markdown, { text: description, markdownParser: markdownParser, sanitizer: sanitizer }) })) : (description) }) })] }), startKernel && (_jsx(RuntimeReservationControl, { addCredits: navigate
+            }, children: [_jsxs(FormControl, { disabled: !!kernelSnapshot?.environment || environments.length === 0, children: [_jsx(FormControl.Label, { children: "Environment" }), _jsx(Select, { name: "environment", disabled: !!kernelSnapshot?.environment || environments.length === 0, value: selection, onChange: handleSelectionChange, block: true, children: environments.map(spec => (_jsxs(Select.Option, { value: spec.name, children: [spec.name, spec.title && (_jsxs(_Fragment, { children: [' - ', spec.title] }))] }, spec.name))) }), _jsx(FormControl.Caption, { children: _jsx(_Fragment, { children: markdownParser ? (_jsx(Box, { sx: { img: { maxWidth: '100%' } }, children: _jsx(Markdown, { text: description, markdownParser: markdownParser, sanitizer: sanitizer }) })) : (description) }) })] }), startRuntime && (_jsx(RuntimeReservationControl, { addCredits: navigate
                         ? () => {
                             navigate(USAGE_ROUTE);
                         }

package/lib/components/runtimes/RuntimePickerBase.d.ts

@@ -27,7 +27,7 @@ export interface IRuntimePickerBaseProps {
     /**
      * Runtime description passing this filter function will be displayed.
      */
-    filterKernel?: (desc: IRuntimeDesc) => boolean;
+    filterRuntime?: (desc: IRuntimeDesc) => boolean;
     /**
      * Session preference.
      */

package/lib/components/runtimes/RuntimePickerBase.js

@@ -22,8 +22,8 @@ const RUNTIME_DISPLAY_NAME_MAX_LENGTH = 25;
  * Base Kernel Picker component.
  */
 export function RuntimePickerBase(props) {
-    const { disabled, display, filterKernel, multiServiceManager, postActions, preActions, preference, runtimeDesc, sessionContext, setRuntimeDesc, translator, variant, } = props;
-    const [groupedKernelDescs, _] = useState(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterKernel, variant));
+    const { disabled, display, filterRuntime, multiServiceManager, postActions, preActions, preference, runtimeDesc, sessionContext, setRuntimeDesc, translator, variant, } = props;
+    const [groupedRuntimeDescs, _] = useState(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterRuntime, variant));
     const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
     const [defaultSet, setDefaultSet] = useState(false);
     // Trick because overflow is an unknown prop of ActionMenu.Overlay.
@@ -34,36 +34,36 @@ export function RuntimePickerBase(props) {
     /*
     // TODO this effect generates refresh of the react components which discards any change in the selection.
     useEffect(() => {
-      const updateGroupedKernelDescs = () => {
+      const updateGroupedRuntimeDescs = () => {
         setGroupedKernelDescs(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterKernel, variant));
       };
-      multiServiceManager.browser?.kernels.runningChanged.connect(updateGroupedKernelDescs);
-      multiServiceManager.browser?.kernelspecs.specsChanged.connect(updateGroupedKernelDescs);
-      multiServiceManager.browser?.sessions.runningChanged.connect(updateGroupedKernelDescs);
-      multiServiceManager.local.kernels.runningChanged.connect(updateGroupedKernelDescs);
-      multiServiceManager.local.kernelspecs.specsChanged.connect(updateGroupedKernelDescs);
-      multiServiceManager.local.sessions.runningChanged.connect(updateGroupedKernelDescs);
-      multiServiceManager.remote?.kernels.changed.connect(updateGroupedKernelDescs);
-      multiServiceManager.remote?.environments.changed.connect(updateGroupedKernelDescs);
+      multiServiceManager.browser?.kernels.runningChanged.connect(updateGroupedRuntimeDescs);
+      multiServiceManager.browser?.kernelspecs.specsChanged.connect(updateGroupedRuntimeDescs);
+      multiServiceManager.browser?.sessions.runningChanged.connect(updateGroupedRuntimeDescs);
+      multiServiceManager.local.kernels.runningChanged.connect(updateGroupedRuntimeDescs);
+      multiServiceManager.local.kernelspecs.specsChanged.connect(updateGroupedRuntimeDescs);
+      multiServiceManager.local.sessions.runningChanged.connect(updateGroupedRuntimeDescs);
+      multiServiceManager.remote?.kernels.changed.connect(updateGroupedRuntimeDescs);
+      multiServiceManager.remote?.environments.changed.connect(updateGroupedRuntimeDescs);
       // multiServiceManager.remote?.sessions.runningChanged.connect(updateOptions);
       return () => {
-        multiServiceManager.browser?.kernels.runningChanged.disconnect(updateGroupedKernelDescs);
-        multiServiceManager.browser?.kernelspecs.specsChanged.disconnect(updateGroupedKernelDescs);
-        multiServiceManager.browser?.sessions.runningChanged.disconnect(updateGroupedKernelDescs);
-        multiServiceManager.local.kernels.runningChanged.disconnect(updateGroupedKernelDescs);
-        multiServiceManager.local.kernelspecs.specsChanged.disconnect(updateGroupedKernelDescs);
-        multiServiceManager.local.sessions.runningChanged.disconnect(updateGroupedKernelDescs);
-        multiServiceManager.remote?.kernels.changed.disconnect(updateGroupedKernelDescs);
-        multiServiceManager.remote?.environments.changed.disconnect(updateGroupedKernelDescs);
+        multiServiceManager.browser?.kernels.runningChanged.disconnect(updateGroupedRuntimeDescs);
+        multiServiceManager.browser?.kernelspecs.specsChanged.disconnect(updateGroupedRuntimeDescs);
+        multiServiceManager.browser?.sessions.runningChanged.disconnect(updateGroupedRuntimeDescs);
+        multiServiceManager.local.kernels.runningChanged.disconnect(updateGroupedRuntimeDescs);
+        multiServiceManager.local.kernelspecs.specsChanged.disconnect(updateGroupedRuntimeDescs);
+        multiServiceManager.local.sessions.runningChanged.disconnect(updateGroupedRuntimeDescs);
+        multiServiceManager.remote?.kernels.changed.disconnect(updateGroupedRuntimeDescs);
+        multiServiceManager.remote?.environments.changed.disconnect(updateGroupedRuntimeDescs);
         // multiServiceManager.remote?.sessions.runningChanged.disconnect(updateOptions);
       };
     }, [multiServiceManager, preference, translator, filterKernel, variant]);
     */
     useEffect(() => {
-        if (sessionContext && groupedKernelDescs) {
+        if (sessionContext && groupedRuntimeDescs) {
             const kernelId = sessionContext.session?.kernel?.id;
             if (kernelId) {
-                Object.entries(groupedKernelDescs).forEach(([group, runtimeDescs]) => {
+                Object.entries(groupedRuntimeDescs).forEach(([group, runtimeDescs]) => {
                     runtimeDescs.forEach(runtimeDesc => {
                         if (runtimeDesc.kernelId === kernelId) {
                             setRuntimeDesc(runtimeDesc);
@@ -73,7 +73,7 @@ export function RuntimePickerBase(props) {
             }
         }
         setDefaultSet(true);
-    }, [groupedKernelDescs]);
+    }, [groupedRuntimeDescs]);
     // For cell using submenu instead of group would be nice unfortunately the feature
     // is not yet implemented in the component there has been a not-great demo story.
     // https://github.com/primer/react/pull/3585
@@ -81,11 +81,11 @@ export function RuntimePickerBase(props) {
         /*
          * Section for Menu display.
          */
-        _jsxs(ActionMenu, { children: [variant === 'cell' ? (_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { disabled: disabled || groupedKernelDescs === null, 
+        _jsxs(ActionMenu, { children: [variant === 'cell' ? (_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { disabled: disabled || groupedRuntimeDescs === null, 
                         //                icon={() => <kernelIcon.react className="dla-Cell-runtime-icon" tag={'span'} />}
-                        icon: () => (_jsx("span", { className: "dla-Cell-runtime-icon", children: _jsx(CpuIcon, {}) })), "aria-label": trans.__('Assign a Runtime to the Cell.'), title: trans.__('Assign a Runtime to the Cell.'), size: "small", variant: "invisible" }) })) : (_jsxs(ActionMenu.Button, { variant: "default", disabled: disabled || groupedKernelDescs === null, children: [_jsx(Text, { fontWeight: 'bold', children: trans.__('Runtime:') }), ' ' + (runtimeDesc?.displayName ?? trans.__('No Runtime'))] })), _jsx(ActionMenu.Overlay, { ...overlayProps, width: "medium", sx: { overflowY: 'auto' }, side: variant === 'cell' ? 'outside-left' : 'outside-right', children: _jsxs(ActionList, { selectionVariant: "single", children: [variant === 'cell' && (_jsxs(ActionList.Item, { selected: runtimeDesc === undefined, onSelect: () => {
+                        icon: () => (_jsx("span", { className: "dla-Cell-runtime-icon", children: _jsx(CpuIcon, {}) })), "aria-label": trans.__('Assign a Runtime to the Cell.'), title: trans.__('Assign a Runtime to the Cell.'), size: "small", variant: "invisible" }) })) : (_jsxs(ActionMenu.Button, { variant: "default", disabled: disabled || groupedRuntimeDescs === null, children: [_jsx(Text, { fontWeight: 'bold', children: trans.__('Runtime:') }), ' ' + (runtimeDesc?.displayName ?? trans.__('No Runtime'))] })), _jsx(ActionMenu.Overlay, { ...overlayProps, width: "medium", sx: { overflowY: 'auto' }, side: variant === 'cell' ? 'outside-left' : 'outside-right', children: _jsxs(ActionList, { selectionVariant: "single", children: [variant === 'cell' && (_jsxs(ActionList.Item, { selected: runtimeDesc === undefined, onSelect: () => {
                                     setRuntimeDesc(undefined);
-                                }, children: [preference?.location && (_jsx(ActionList.LeadingVisual, { children: preference.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : preference.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) })), trans.__('Assign the Notebook Runtime')] }, 'null')), !!preActions && preActions, Object.entries(groupedKernelDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: group }), runtimeDescs.map(runtimeDesc => {
+                                }, children: [preference?.location && (_jsx(ActionList.LeadingVisual, { children: preference.location === 'local' ? (_jsx(LaptopSimpleIcon, {})) : preference.location === 'browser' ? (_jsx(BrowserIcon, {})) : (_jsx(CloudUploadIcon, {})) })), trans.__('Assign the Notebook Runtime')] }, 'null')), !!preActions && preActions, Object.entries(groupedRuntimeDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: group }), runtimeDescs.map(runtimeDesc => {
                                         const annotation = runtimeDesc.podName
                                             ? ` - ${runtimeDesc.podName.split('-', 2).reverse()[0]}`
                                             : runtimeDesc.kernelId
@@ -107,7 +107,7 @@ export function RuntimePickerBase(props) {
         /*
          * Section for Radio display.
          */
-        _jsxs(_Fragment, { children: [defaultSet && (_jsx(RadioGroup, { name: "kernel-options", "aria-labelledby": "kernel-options", children: Object.entries(groupedKernelDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(Box, { children: [_jsx(Box, { as: "h4", style: { marginTop: 0 }, children: group }), runtimeDescs.map(k => {
+        _jsxs(_Fragment, { children: [defaultSet && (_jsx(RadioGroup, { name: "kernel-options", "aria-labelledby": "kernel-options", children: Object.entries(groupedRuntimeDescs ?? {}).map(([group, runtimeDescs]) => (_jsxs(Box, { children: [_jsx(Box, { as: "h4", style: { marginTop: 0 }, children: group }), runtimeDescs.map(k => {
                                 return (_jsxs(Box, { title: k.name, children: [_jsxs(FormControl, { children: [_jsx(Radio, { value: k.kernelId, onChange: () => {
                                                         setRuntimeDesc(k);
                                                     }, checked: (k.location === k?.location ||

package/lib/components/runtimes/RuntimePickerCell.d.ts

@@ -28,7 +28,7 @@ export type IRuntimePickerCellProps = Pick<IRuntimePickerBaseProps, 'multiServic
     sanitizer?: IRenderMime.ISanitizer;
 };
 /**
- * Kernel picker component for a cell.
+ * Runtime picker component for a cell.
  */
 export declare function RuntimePickerCell(props: IRuntimePickerCellProps): JSX.Element;
 export default RuntimePickerCell;

package/lib/components/runtimes/RuntimePickerCell.js

@@ -7,22 +7,22 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { nullTranslator } from '@jupyterlab/translation';
 import { ActionList } from '@primer/react';
 import { CloudUploadIcon } from '@datalayer/icons-react';
-import { ExternalTokenSilentLogin } from '../../components/iam';
 import { useCoreStore, useIAMStore } from '../../state';
 import { isRuntimeRemote, RuntimeSnippetsFacade } from '../../api';
+import { ExternalTokenSilentLogin } from '../../components/iam';
 import { SnippetDialog } from './../snippets/SnippetDialog';
-import { KernelLauncherDialog } from './RuntimeLauncherDialog';
+import { RuntimeLauncherDialog } from './RuntimeLauncherDialog';
 import { RuntimePickerBase } from './RuntimePickerBase';
 import { RuntimeCellVariablesDialog } from './RuntimeCellVariablesDialog';
 /**
- * Kernel picker component for a cell.
+ * Runtime picker component for a cell.
  */
 export function RuntimePickerCell(props) {
     const { logIn, markdownParser, model, preference, sanitizer, multiServiceManager, sessionContext, translator, } = props;
     const { token } = useIAMStore();
     const { configuration } = useCoreStore();
     const [isForeign, setIsForeign] = useState(false);
-    const [hasCellKernel, setHasCellKernel] = useState(false);
+    const [hasCellRuntime, setHasCellRuntime] = useState(false);
     const [isKernelDialogOpen, setIsKernelDialogOpen] = useState(false);
     const [isVariableDialogOpen, setIsVariableDialogOpen] = useState(false);
     const [language, setLanguage] = useState('');
@@ -32,14 +32,14 @@ export function RuntimePickerCell(props) {
     useEffect(() => {
         const updateState = (model) => {
             const datalayerMeta = model.getMetadata('datalayer') ?? {};
-            const kernel = datalayerMeta.kernel;
-            setIsForeign(!!kernel);
-            setHasCellKernel(kernel?.params?.notebook === false);
+            const runtime = datalayerMeta.kernel;
+            setIsForeign(!!runtime);
+            setHasCellRuntime(runtime?.params?.notebook === false);
             const newSnippets = new Array();
-            if (kernel) {
+            if (runtime) {
                 const spec = multiServiceManager.remote?.environments
                     .get()
-                    .find(env => env.name === kernel.name);
+                    .find(env => env.name === runtime.name);
                 setLanguage(spec?.language ?? '');
                 if (spec?.snippets) {
                     newSnippets.push(...spec.snippets);
@@ -58,7 +58,7 @@ export function RuntimePickerCell(props) {
             isRuntimeRemote(desc.location) &&
             (!preference?.language || desc.language === preference?.language));
     }, [preference]);
-    const setSelectedKernelDesc = useCallback((kernel) => {
+    const setSelectedRuntimeDesc = useCallback((kernel) => {
         const datalayerMeta = model.getMetadata('datalayer') ?? {
             kernel: undefined,
         };
@@ -91,13 +91,13 @@ export function RuntimePickerCell(props) {
                 ...desc.params,
                 notebook: false,
             };
-            setSelectedKernelDesc(desc);
+            setSelectedRuntimeDesc(desc);
         }
         setIsKernelDialogOpen(false);
-    }, [setSelectedKernelDesc]);
+    }, [setSelectedRuntimeDesc]);
     const datalayerMeta = model.getMetadata('datalayer') ?? {};
-    return (_jsxs(_Fragment, { children: [_jsx(RuntimePickerBase, { display: "menu", filterKernel: filterKernel, preference: preference, multiServiceManager: multiServiceManager, runtimeDesc: datalayerMeta.kernel ? datalayerMeta.kernel : undefined, setRuntimeDesc: setSelectedKernelDesc, variant: 'cell', preActions: _jsxs(ActionList.Item, { disabled: !multiServiceManager.remote, onSelect: setCell, selected: hasCellKernel, title: !multiServiceManager.remote
+    return (_jsxs(_Fragment, { children: [_jsx(RuntimePickerBase, { display: "menu", filterRuntime: filterKernel, preference: preference, multiServiceManager: multiServiceManager, runtimeDesc: datalayerMeta.kernel ? datalayerMeta.kernel : undefined, setRuntimeDesc: setSelectedRuntimeDesc, variant: 'cell', preActions: _jsxs(ActionList.Item, { disabled: !multiServiceManager.remote, onSelect: setCell, selected: hasCellRuntime, title: !multiServiceManager.remote
                         ? 'You are not connected with Datalayer.'
-                        : 'Assign a new temporary Runtime on each Cell execution.', children: [_jsx(ActionList.LeadingVisual, { children: _jsx(CloudUploadIcon, {}) }), trans.__('Assign a Cell Runtime')] }), postActions: token || !logIn ? (_jsxs(_Fragment, { children: [RuntimeSnippetsFacade.supports(preference?.language ?? '') && (_jsx(ActionList.Item, { onSelect: openVariableDialog, disabled: !isForeign, title: trans.__('Define variables to transfer between the document kernel and the cell kernel.'), children: trans.__('Define Cell Variables Transfer') })), !configuration.whiteLabel && (_jsx(ActionList.Item, { onSelect: openSnippetDialog, disabled: snippets.length === 0, title: trans.__('Inject a code snippet at the end of the cell.'), children: trans.__('Inject Code Snippet') }))] })) : (_jsx(ActionList.Item, { onSelect: props.logIn, title: 'Connect to the Runtime provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Connect to the Runtime provider" }) })), translator: translator }), isVariableDialogOpen && (_jsx(RuntimeCellVariablesDialog, { model: model, onClose: closeVariableDialog, preference: preference, sessionContext: sessionContext, translator: translator })), isSnippetDialogOpen && (_jsx(SnippetDialog, { language: language, model: model, snippets: snippets, onClose: closeSnippetDialog, markdownParser: markdownParser, sanitizer: sanitizer })), isKernelDialogOpen && (_jsx(KernelLauncherDialog, { manager: multiServiceManager.remote, onSubmit: onStartRemote, startKernel: false, markdownParser: markdownParser, sanitizer: sanitizer }))] }));
+                        : 'Assign a new temporary Runtime on each Cell execution.', children: [_jsx(ActionList.LeadingVisual, { children: _jsx(CloudUploadIcon, {}) }), trans.__('Assign a Cell Runtime')] }), postActions: token || !logIn ? (_jsxs(_Fragment, { children: [RuntimeSnippetsFacade.supports(preference?.language ?? '') && (_jsx(ActionList.Item, { onSelect: openVariableDialog, disabled: !isForeign, title: trans.__('Define variables to transfer between the document kernel and the cell kernel.'), children: trans.__('Define Cell Variables Transfer') })), !configuration.whiteLabel && (_jsx(ActionList.Item, { onSelect: openSnippetDialog, disabled: snippets.length === 0, title: trans.__('Inject a code snippet at the end of the cell.'), children: trans.__('Inject Code Snippet') }))] })) : (_jsx(ActionList.Item, { onSelect: props.logIn, title: 'Connect to the Runtime provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Connect to the Runtime provider" }) })), translator: translator }), isVariableDialogOpen && (_jsx(RuntimeCellVariablesDialog, { model: model, onClose: closeVariableDialog, preference: preference, sessionContext: sessionContext, translator: translator })), isSnippetDialogOpen && (_jsx(SnippetDialog, { language: language, model: model, snippets: snippets, onClose: closeSnippetDialog, markdownParser: markdownParser, sanitizer: sanitizer })), isKernelDialogOpen && (_jsx(RuntimeLauncherDialog, { manager: multiServiceManager.remote, onSubmit: onStartRemote, startRuntime: false, markdownParser: markdownParser, sanitizer: sanitizer }))] }));
 }
 export default RuntimePickerCell;

package/lib/components/runtimes/RuntimePickerNotebook.js

@@ -9,7 +9,6 @@ import { Box } from '@datalayer/primer-addons';
 import { AlertIcon } from '@primer/octicons-react';
 import { JSONExt } from '@lumino/coreutils';
 import { KernelExecutor } from '@datalayer/jupyter-react';
-import { DatalayerThemeProvider } from '../../theme';
 import { RuntimeSnippetsFacade } from '../../api';
 import { ExternalTokenSilentLogin } from '../../components/iam';
 import { useCoreStore, useIAMStore } from '../../state';
@@ -138,31 +137,31 @@ export function RuntimePickerNotebook(props) {
     const { kernelPreference: { canStart }, } = sessionContext;
     const max = Math.floor((credits?.available ?? 0) / (selectedRuntimeDesc?.burningRate ?? -1) / 60.0);
     const outOfCredits = !credits?.available || max < Number.EPSILON;
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { as: "form", className: "dla-Runtimes-picker", children: [_jsx(Box, { sx: { padding: 'var(--stack-padding-condensed) 0' }, children: _jsx(RuntimePickerBase, { display: "radio", disabled: canStart === false, preference: {
-                            id: sessionContext.session?.id,
-                            kernelDisplayName: sessionContext.kernelPreference.shouldStart
-                                ? sessionContext.kernelDisplayName
-                                : undefined,
-                        }, sessionContext: sessionContext, multiServiceManager: multiServiceManager, translator: translator, runtimeDesc: selectedRuntimeDesc, setRuntimeDesc: setRuntimeDesc, postActions: token || !props.logIn ? (
-                        /*
-                      <Button
-                        variant="default"
-                        onClick={e => {
-                          e.preventDefault();
-                          commands.execute(CommandIDs.launchRemoteRuntime);
-                          close();
-                        }}
-                      >
-                        Launch a New Runtime
-                      </Button>
-                      */
-                        _jsx(_Fragment, {})) : (_jsx(ActionList.Item, { onSelect: props.logIn, title: 'Connect to Runtime provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Connect to the Runtime provider" }) })) }) }), !selectedRuntimeDesc?.kernelId &&
-                    selectedRuntimeDesc?.location === 'remote' && (_jsxs(_Fragment, { children: [_jsx(RuntimeReservationControl, { disabled: outOfCredits || selectedRuntimeDesc?.location !== 'remote', label: 'Time reservation', max: max < 0 ? 1 : max, time: timeLimit, onTimeChange: setTimeLimit, error: outOfCredits && max >= 0
-                                ? 'You must add credits to your account.'
-                                : timeLimit === 0
-                                    ? 'You must set a time limit.'
-                                    : undefined, burningRate: selectedRuntimeDesc.burningRate }), !configuration.whiteLabel && (_jsxs(FormControl, { disabled: !!selectedRuntimeDesc?.kernelId ||
-                                selectedRuntimeDesc?.location !== 'remote', layout: "horizontal", children: [_jsxs(FormControl.Label, { id: "user-storage-picker-label", children: ["User storage", _jsx(Tooltip, { text: "The runtime will be slower to start.", direction: "e", style: { marginLeft: 3 }, children: _jsx(IconButton, { icon: AlertIcon, "aria-label": "", variant: "invisible" }) })] }), _jsx(ToggleSwitch, { disabled: !!selectedRuntimeDesc?.kernelId ||
-                                        selectedRuntimeDesc?.location !== 'remote', checked: userStorage, size: "small", onClick: handleUserStorageChange, "aria-labelledby": "user-storage-picker-label" })] }))] })), canTransferFrom && canTransferTo && (_jsx(RuntimeVariables, { selectedVariables: toTransfer, setSelectVariable: setSelectedVariables, transferVariables: transferVariables, setTransferVariable: setTransferVariable, kernelVariables: kernelVariables, translator: translator }))] }) }));
+    return (_jsxs(Box, { as: "form", className: "dla-Runtimes-picker", children: [_jsx(Box, { sx: { padding: 'var(--stack-padding-condensed) 0' }, children: _jsx(RuntimePickerBase, { display: "radio", disabled: canStart === false, preference: {
+                        id: sessionContext.session?.id,
+                        kernelDisplayName: sessionContext.kernelPreference.shouldStart
+                            ? sessionContext.kernelDisplayName
+                            : undefined,
+                    }, sessionContext: sessionContext, multiServiceManager: multiServiceManager, translator: translator, runtimeDesc: selectedRuntimeDesc, setRuntimeDesc: setRuntimeDesc, postActions: token || !props.logIn ? (
+                    /*
+                  <Button
+                    variant="default"
+                    onClick={e => {
+                      e.preventDefault();
+                      commands.execute(CommandIDs.launchRemoteRuntime);
+                      close();
+                    }}
+                  >
+                    Launch a New Runtime
+                  </Button>
+                  */
+                    _jsx(_Fragment, {})) : (_jsx(ActionList.Item, { onSelect: props.logIn, title: 'Connect to Runtime provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Connect to the Runtime provider" }) })) }) }), !selectedRuntimeDesc?.kernelId &&
+                selectedRuntimeDesc?.location === 'remote' && (_jsxs(_Fragment, { children: [_jsx(RuntimeReservationControl, { disabled: outOfCredits || selectedRuntimeDesc?.location !== 'remote', label: 'Time reservation', max: max < 0 ? 1 : max, time: timeLimit, onTimeChange: setTimeLimit, error: outOfCredits && max >= 0
+                            ? 'You must add credits to your account.'
+                            : timeLimit === 0
+                                ? 'You must set a time limit.'
+                                : undefined, burningRate: selectedRuntimeDesc.burningRate }), !configuration.whiteLabel && (_jsxs(FormControl, { disabled: !!selectedRuntimeDesc?.kernelId ||
+                            selectedRuntimeDesc?.location !== 'remote', layout: "horizontal", children: [_jsxs(FormControl.Label, { id: "user-storage-picker-label", children: ["User storage", _jsx(Tooltip, { text: "The runtime will be slower to start.", direction: "e", style: { marginLeft: 3 }, children: _jsx(IconButton, { icon: AlertIcon, "aria-label": "", variant: "invisible" }) })] }), _jsx(ToggleSwitch, { disabled: !!selectedRuntimeDesc?.kernelId ||
+                                    selectedRuntimeDesc?.location !== 'remote', checked: userStorage, size: "small", onClick: handleUserStorageChange, "aria-labelledby": "user-storage-picker-label" })] }))] })), canTransferFrom && canTransferTo && (_jsx(RuntimeVariables, { selectedVariables: toTransfer, setSelectVariable: setSelectedVariables, transferVariables: transferVariables, setTransferVariable: setTransferVariable, kernelVariables: kernelVariables, translator: translator }))] }));
 }
 export default RuntimePickerNotebook;

package/lib/components/runtimes/RuntimeSimplePicker.d.ts

@@ -2,15 +2,15 @@ import { Session } from '@jupyterlab/services';
 import { IRuntimeModel, type IRuntimeDesc } from '../../models';
 export interface IRuntimeAssignOptions {
     /**
-     * Kernel description.
+     * Runtime description.
      */
     runtimeDesc?: IRuntimeDesc;
     /**
-     * Kernel model to connect to.
+     * Runtime model to connect to.
      */
     runtimeModel?: IRuntimeModel;
     /**
-     * Whether to transfer the state to the new Kernel model.
+     * Whether to transfer the state to the runtime model.
      */
     transferState?: boolean;
 }
@@ -19,11 +19,11 @@ export interface IRuntimeAssignOptions {
  */
 interface IRuntimeSimplePickerProps {
     /**
-     * Kernel assignment callback.
+     * Runtime assignment callback.
      */
     assignRuntime: (options: IRuntimeAssignOptions) => Promise<void>;
     /**
-     * Connection to the active Kernel.
+     * Connection to the active runtime.
      */
     sessionConnection?: Session.ISessionConnection;
 }

package/lib/components/runtimes/RuntimeSimplePicker.js

@@ -4,14 +4,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 import { useCallback, useEffect, useState } from 'react';
-import { KernelIndicator } from '@datalayer/jupyter-react';
+import { KernelIndicator, useJupyterReactStore, } from '@datalayer/jupyter-react';
 import { ISanitizer } from '@jupyterlab/apputils';
 import { IMarkdownParser } from '@jupyterlab/rendermime';
 import { ActionList, ActionMenu, Box, Button, Tooltip } from '@primer/react';
 import { CloudIcon, EyeIcon, UnfoldIcon } from '@primer/octicons-react';
 import { BrowserIcon, PlusIcon } from '@datalayer/icons-react';
 import { ArtifactIcon } from '../../components/icons';
-import { KernelLauncherDialog } from '../../components/runtimes';
+import { RuntimeLauncherDialog } from '../../components/runtimes';
 import { useRuntimesStore } from '../../state';
 /**
  * Cause to open the new runtime dialog.
@@ -23,11 +23,11 @@ var RuntimeDialogCause;
      */
     RuntimeDialogCause[RuntimeDialogCause["None"] = 0] = "None";
     /**
-     * Launch a new Remote Runtime.
+     * Launch a new runtime.
      */
     RuntimeDialogCause[RuntimeDialogCause["New"] = 1] = "New";
     /**
-     * Transfer the state from the current Runtime to a new Remote Runtime.
+     * Transfer the state from the current runtime to a new runtime.
      */
     RuntimeDialogCause[RuntimeDialogCause["Transfer"] = 2] = "Transfer";
 })(RuntimeDialogCause || (RuntimeDialogCause = {}));
@@ -36,7 +36,8 @@ var RuntimeDialogCause;
  */
 export function RuntimeSimplePicker(props) {
     const { assignRuntime, sessionConnection } = props;
-    const { runtimeModels, multiServiceManager, jupyterLabAdapter } = useRuntimesStore();
+    const { runtimeModels, multiServiceManager } = useRuntimesStore();
+    const { jupyterLabAdapter } = useJupyterReactStore();
     const [runtimeLocation, setRuntimeLocation] = useState();
     const [luminoServices, setLuminoServices] = useState({});
     const [dialogCause, setDialogCause] = useState(RuntimeDialogCause.None);
@@ -145,9 +146,9 @@ export function RuntimeSimplePicker(props) {
                                                 }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(ArtifactIcon, { type: "runtime" }) }), kernelModel.given_name, _jsx(ActionList.Description, { variant: "block", children: kernelModel.environment_name })] }, kernelModel.id));
                                         })] })), _jsx(ActionList.Divider, {}), _jsxs(ActionList.Group, { children: [_jsxs(ActionList.Item, { selected: false, onSelect: handleLaunchRemoteKernel, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PlusIcon, {}) }), "Launch a new Runtime\u2026"] }), _jsxs(ActionList.Item, { disabled: runtimeLocation !== 'browser', selected: false, onSelect: () => {
                                                 setDialogCause(RuntimeDialogCause.Transfer);
-                                            }, title: "Transfer the state of the current Runtime to a new Remote Runtime.", children: [_jsx(ActionList.LeadingVisual, { children: _jsx(UnfoldIcon, {}) }), "Transfer state to a new Runtime\u2026"] })] })] }) })] }), multiServiceManager?.remote && dialogCause > 0 && (_jsx(KernelLauncherDialog, { dialogTitle: dialogCause === RuntimeDialogCause.Transfer
+                                            }, title: "Transfer the state of the current Runtime to a new Remote Runtime.", children: [_jsx(ActionList.LeadingVisual, { children: _jsx(UnfoldIcon, {}) }), "Transfer state to a new Runtime\u2026"] })] })] }) })] }), multiServiceManager?.remote && dialogCause > 0 && (_jsx(RuntimeLauncherDialog, { dialogTitle: dialogCause === RuntimeDialogCause.Transfer
                     ? 'Switch to a new Cloud Runtime'
-                    : undefined, manager: multiServiceManager.remote, onSubmit: handleCloseDialog, markdownParser: luminoServices[IMarkdownParser.name], sanitizer: luminoServices[ISanitizer.name], startKernel: dialogCause === RuntimeDialogCause.Transfer
+                    : undefined, manager: multiServiceManager.remote, onSubmit: handleCloseDialog, markdownParser: luminoServices[IMarkdownParser.name], sanitizer: luminoServices[ISanitizer.name], startRuntime: dialogCause === RuntimeDialogCause.Transfer
                     ? 'defer'
                     : dialogCause === RuntimeDialogCause.New }))] }));
 }

package/lib/components/subnav/SubNav.d.ts

@@ -1,6 +1,6 @@
 import React, { type PropsWithChildren, type ReactNode, type RefObject } from 'react';
 import { ButtonSizes, ButtonVariants, TextProps } from '@primer/react-brand';
-import { BaseProps } from '../primer';
+import { BaseProps } from '@datalayer/primer-addons';
 /**
  * Design tokens
  */

package/lib/components/text-reveal/TextRevealAnimation.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseProps } from '../primer';
+import { BaseProps } from '@datalayer/primer-addons';
 export type TextRevealAnimationProps = BaseProps<HTMLSpanElement> & Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {
     children: React.ReactChild;
 };

package/lib/hooks/useToast.js

@@ -7,8 +7,8 @@ import React from 'react';
 import { toast } from 'react-toastify';
 import { Notification } from '@jupyterlab/apputils';
 import { Button } from '@primer/react';
+import { JupyterReactTheme } from '@datalayer/jupyter-react';
 import { isInsideJupyterLab } from '../utils';
-import { DatalayerThemeProvider } from '../theme';
 const TOAST_POSITION = 'bottom-right';
 const displayType2Class = {
     accent: 'primary',
@@ -37,7 +37,7 @@ function ToastButton({ action, closeToast }) {
  */
 function createContent(message, closeHandler, actions) {
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: "jp-toast-message", children: message.split('\n').map((part, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx("br", {}) : null, part] }, `part-${index}`))) }), (actions?.length ?? 0) > 0 && (_jsxs("div", { className: "jp-toast-buttonBar", children: [_jsx("div", { className: "jp-toast-spacer" }), actions.map((action, idx) => {
-                        return (_jsx(DatalayerThemeProvider, { children: _jsx(ToastButton, { action: action, closeToast: closeHandler }, 'button-' + idx) }));
+                        return (_jsx(JupyterReactTheme, { children: _jsx(ToastButton, { action: action, closeToast: closeHandler }, 'button-' + idx) }));
                     })] }))] }));
 }
 export const useToast = () => {

package/lib/state/substates/RuntimesState.d.ts

@@ -1,4 +1,3 @@
-import type { JupyterLabAppAdapter } from '@datalayer/jupyter-react';
 import type { IMultiServiceManager } from '../../api';
 import type { IRuntimesConfiguration } from '../../config';
 import type { IRuntimePod, IRuntimeSnapshot, IRuntimeModel } from '../../models';
@@ -15,14 +14,6 @@ export type RuntimesState = {
      * Runtimes RUN URL.
      */
     runtimesRunUrl: string;
-    /**
-     * JupyterLabApp adapter.
-     */
-    jupyterLabAdapter?: JupyterLabAppAdapter;
-    /**
-     * Set the JupyterLabAdapter.
-     */
-    setJupyterLabAdapter: (jupyterLabAdapter: JupyterLabAppAdapter) => void;
     tab: number;
     getIntTab: () => number;
     setTab: (tab: number) => void;

package/lib/state/substates/RuntimesState.js

@@ -24,9 +24,6 @@ export const runtimesStore = createStore((set, get) => {
                 : { configuration: { ...configuration } });
         },
         runtimesRunUrl: coreStore.getState().configuration?.runtimesRunUrl,
-        setJupyterLabAdapter: (jupyterLabAdapter) => {
-            set(state => ({ jupyterLabAdapter }));
-        },
         tab: 0.0,
         getIntTab: () => Math.floor(get().tab),
         setTab: (tab) => set(state => ({ tab })),

package/lib/theme/DatalayerThemeProvider.d.ts

@@ -2,16 +2,8 @@ import { type CSSProperties } from 'react';
 import { ThemeProviderProps } from '@primer/react';
 export interface IDatalayerThemeProviderProps extends ThemeProviderProps {
     /**
-     * Whether the components is embedded in Jupyter UI or not.
-     */
-    inJupyterLab?: boolean;
-    /**
-     * Base styles
+     * Base styles.
      */
     baseStyles?: CSSProperties;
 }
-/**
- * ThemeProvider component changing color mode with JupyterLab theme
- * if embedded in Jupyter or with the browser color scheme preference.
- */
 export declare function DatalayerThemeProvider(props: React.PropsWithChildren<IDatalayerThemeProviderProps>): JSX.Element;

package/lib/theme/DatalayerThemeProvider.js

@@ -1,67 +1,11 @@
-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.
- */
-import { useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { BaseStyles, ThemeProvider as PrimerThemeProvider, } from '@primer/react';
-import { loadJupyterConfig, jupyterLabTheme } from '@datalayer/jupyter-react';
-import { datalayerTheme } from '../theme';
-import { useRuntimesStore } from '../state';
-/**
- * ThemeProvider component changing color mode with JupyterLab theme
- * if embedded in Jupyter or with the browser color scheme preference.
- */
 export function DatalayerThemeProvider(props) {
-    const { children, colorMode: colorModeProps, 
-    //    inJupyterLab,
-    baseStyles, ...rest } = props;
-    const { jupyterLabAdapter } = useRuntimesStore();
-    const [colorMode, setColorMode] = useState(colorModeProps ?? 'light');
-    const [inJupyterLab, setInJupterLab] = useState(undefined);
-    useEffect(() => {
-        setInJupterLab(loadJupyterConfig().insideJupyterLab);
-    }, []);
-    useEffect(() => {
-        if (inJupyterLab !== undefined) {
-            function colorSchemeFromMedia({ matches }) {
-                setColorMode(matches ? 'dark' : 'light');
-            }
-            function updateColorMode(themeManager) {
-                setColorMode(themeManager.theme && !themeManager.isLight(themeManager.theme)
-                    ? 'dark'
-                    : 'light');
-            }
-            if (inJupyterLab) {
-                const themeManager = jupyterLabAdapter?.service('@jupyterlab/apputils-extension:themes');
-                console.log('---------DLA', inJupyterLab, jupyterLabAdapter, themeManager);
-                if (themeManager) {
-                    updateColorMode(themeManager);
-                    themeManager.themeChanged.connect(updateColorMode);
-                    return () => {
-                        themeManager.themeChanged.disconnect(updateColorMode);
-                    };
-                }
-            }
-            else {
-                colorSchemeFromMedia({
-                    matches: window.matchMedia('(prefers-color-scheme: dark)').matches,
-                });
-                window
-                    .matchMedia('(prefers-color-scheme: dark)')
-                    .addEventListener('change', colorSchemeFromMedia);
-                return () => {
-                    window
-                        .matchMedia('(prefers-color-scheme: dark)')
-                        .removeEventListener('change', colorSchemeFromMedia);
-                };
-            }
-        }
-    }, [inJupyterLab, jupyterLabAdapter]);
-    return inJupyterLab !== undefined ? (_jsx(PrimerThemeProvider, { colorMode: colorMode, theme: inJupyterLab ? jupyterLabTheme : datalayerTheme, ...rest, children: _jsx(BaseStyles, { style: {
+    const { children, colorMode, baseStyles, ...rest } = props;
+    return (_jsx(PrimerThemeProvider, { colorMode: colorMode, ...rest, children: _jsx(BaseStyles, { style: {
                 backgroundColor: 'var(--bgColor-default)',
                 color: 'var(--fgColor-default)',
                 fontSize: 'var(--text-body-size-medium)',
                 ...baseStyles,
-            }, children: children }) })) : (_jsx(_Fragment, {}));
+            }, children: children }) }));
 }

package/lib/theme/Palette.d.ts

@@ -1,4 +1,3 @@
-export declare const jpCssToColor: (cssVariableName: string) => any;
 export declare const RESERVATION_CIRCLE_COLOR = "#656D76";
 export declare const CREDITS_CIRCLE_COLOR = "#16A085";
 export declare const JOINED_INVITE_COLOR = "#0366d6";

package/lib/theme/Palette.js

@@ -2,18 +2,6 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-const JUPYTERLAB_COLLABORATORS_COLORS = {
-    '--jp-collaborator-color1': '#ffad8e',
-    '--jp-collaborator-color2': '#dac83d',
-    '--jp-collaborator-color3': '#72dd76',
-    '--jp-collaborator-color4': '#00e4d0',
-    '--jp-collaborator-color5': '#45d4ff',
-    '--jp-collaborator-color6': '#e2b1ff',
-    '--jp-collaborator-color7': '#ff9de6',
-};
-export const jpCssToColor = (cssVariableName) => {
-    return JUPYTERLAB_COLLABORATORS_COLORS[cssVariableName.replaceAll('var(', '').replaceAll(')', '')];
-};
 // export const RESERVATION_CIRCLE_COLOR_VAR = '--data-yellow-color';
 export const RESERVATION_CIRCLE_COLOR = '#656D76';
 // export const CREDITS_CIRCLE_COLOR_VAR = '--data-blue-color';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "type": "module",
   "workspaces": [
     ".",
@@ -83,7 +83,7 @@
   "dependencies": {
     "@datalayer/icons-react": "^1.0.6",
     "@datalayer/jupyter-react": "^1.1.0",
-    "@datalayer/primer-addons": "^1.0.3",
+    "@datalayer/primer-addons": "^1.0.4",
     "@datalayer/primer-rjsf": "^1.0.1",
     "@jupyterlab/coreutils": "^6.0.0",
     "@jupyterlab/services": "^7.0.0",

package/lib/components/primer/Helper.d.ts

@@ -1,32 +0,0 @@
-import React, { Ref, PropsWithChildren } from 'react';
-import { AnimateProps } from '@primer/react-brand';
-/**
- * Layout
- */
-export declare const Container: ({ children, style, }: {
-    children: React.ReactElement[] | React.ReactElement;
-    style?: React.CSSProperties;
-}) => import("react/jsx-runtime").JSX.Element;
-type RedlineBackgroundProps = {
-    height?: number;
-    hasBorder?: boolean;
-};
-export declare function RedlineBackground({ height, hasBorder, ...rest }: PropsWithChildren<RedlineBackgroundProps>): import("react/jsx-runtime").JSX.Element;
-/**
- * Base Types
- *
- * Component helper type to be extended by component types, e.g.:
- * type CustomComponentProps = BaseProps<HTMLDivElement> & { ... }
- *
- * Example use:
- *   const CustomComponent = forwardRef<HTMLDivElement, CustomComponentProps>(({className, ...props}, ref) => { ... })
- *   // OR:
- *   const CustomComponent = forwardRef(({className: CustomComponentProps, ...props}, ref: Ref<HTMLDivElement>) => { ... })
- */
-export type BaseProps<T> = {
-    className?: string;
-    id?: string;
-    ref?: Ref<T>;
-    animate?: AnimateProps;
-};
-export {};

package/lib/components/primer/Helper.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Layout
- */
-export const Container = ({ children, style, }) => (_jsx("div", { style: { maxWidth: 1024, margin: '0 auto', ...style }, children: children }));
-export function RedlineBackground({ height, hasBorder = true, ...rest }) {
-    return (_jsx("div", { style: {
-            display: 'flex',
-            overflow: 'hidden',
-            border: hasBorder
-                ? '1px solid var(--base-color-scale-red-2)'
-                : undefined,
-            backgroundImage: 'linear-gradient(45deg, var(--base-color-scale-red-0) 12.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 12.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 50%, var(--base-color-scale-red-0) 50%, var(--base-color-scale-red-0) 62.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 62.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 100%)',
-            backgroundSize: '5.66px 5.66px',
-            WebkitBoxPack: 'center',
-            justifyContent: 'center',
-            alignItems: 'center',
-            width: '100%',
-            height,
-        }, ...rest }));
-}

package/lib/components/primer/Portals.d.ts

@@ -1,9 +0,0 @@
-import '@primer/react-brand/lib/css/main.css';
-/**
- * Ensure we define a root for Primer portal root.
- *
- *  @see https://github.com/primer/react/blob/main/packages/react/src/Portal/Portal.tsx#L23
- *  @see https://github.com/primer/react/blob/030fe020b48b7f12c2994c6614e5d4191fe764ee/src/Portal/Portal.tsx#L33
- */
-export declare const setupPrimerPortals: () => void;
-export default setupPrimerPortals;

package/lib/components/primer/Portals.js

@@ -1,26 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-import { registerPortalRoot } from '@primer/react';
-// import { render } from 'react-dom';
-// import { Styles } from './Styles';
-const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
-import '@primer/react-brand/lib/css/main.css';
-/**
- * Ensure we define a root for Primer portal root.
- *
- *  @see https://github.com/primer/react/blob/main/packages/react/src/Portal/Portal.tsx#L23
- *  @see https://github.com/primer/react/blob/030fe020b48b7f12c2994c6614e5d4191fe764ee/src/Portal/Portal.tsx#L33
- */
-export const setupPrimerPortals = () => {
-    const div = document.body;
-    div.dataset['portalRoot'] = 'true';
-    div.dataset['colorMode'] = 'light';
-    div.dataset['lightTheme'] = 'light';
-    div.dataset['darkTheme'] = 'dark';
-    div.id = PRIMER_PORTAL_ROOT_ID;
-    registerPortalRoot(div);
-    //  render(<Styles/>, div);
-};
-export default setupPrimerPortals;

package/lib/components/primer/Styles.d.ts

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

package/lib/components/primer/Styles.js

@@ -1,11 +0,0 @@
-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.
- */
-import { ThemeProvider, BaseStyles } from '@primer/react';
-import { jupyterLabTheme } from '@datalayer/jupyter-react';
-export const Styles = () => {
-    return (_jsx(_Fragment, { children: _jsx(ThemeProvider, { theme: jupyterLabTheme, children: _jsx(BaseStyles, {}) }) }));
-};
-export default Styles;

package/lib/components/primer/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Helper';
-export * from './Portals';

package/lib/components/primer/index.js

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