@datalayer/core 0.0.17 → 0.0.18

package/lib/components/flashes/FlashClosable.js

@@ -10,8 +10,7 @@ import { useCallback, useState } from 'react';
 /**
  * Closable flash component with actions.
  */
-export const FlashClosable = (props) => {
-    const { actions, children, closable, variant, sx, ...others } = props;
+export const FlashClosable = ({ actions, children, closable = true, variant, sx, ...others }) => {
     const [open, setOpen] = useState(true);
     const visual = variant === 'warning' ? (_jsx(AlertIcon, {})) : variant === 'success' ? (_jsx(CheckIcon, {})) : variant === 'danger' ? (_jsx(StopIcon, {})) : (_jsx(InfoIcon, {}));
     const onClose = useCallback(() => {
@@ -58,7 +57,4 @@ export const FlashClosable = (props) => {
                         '& > svg': { marginRight: 0, color: 'var(--fgColor-default)' },
                     } }) }))] })) : (_jsx(_Fragment, {}));
 };
-FlashClosable.defaultProps = {
-    closable: true,
-};
 export default FlashClosable;

package/lib/components/flashes/FlashDisclaimer.js

@@ -12,6 +12,6 @@ export const FlashDisclaimer = () => {
     const { configuration } = useCoreStore();
     const { showDisclaimer, setShowDisclaimer } = useRuntimesStore();
     const navigate = useNavigate();
-    return (_jsx(_Fragment, { children: configuration?.whiteLabel === false && showDisclaimer && (_jsx(Banner, { variant: "info", title: "AI Platform for Data Analysis", description: _jsxs(Box, { children: [_jsx(Label, { style: { marginRight: 10 }, children: "PRIVATE BETA" }), "Create Kernels and use them from your JupyterLab, VS Code or CLI. Read the", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/docs', e), children: "documentation" }), ' ', "for any question or", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/support/request', e), children: "contact us for support" }), "."] }), onDismiss: () => setShowDisclaimer(false) })) }));
+    return (_jsx(_Fragment, { children: configuration?.whiteLabel === false && showDisclaimer && (_jsx(Banner, { variant: "info", title: "AI Agents for Data Analysis", description: _jsxs(Box, { children: [_jsx(Label, { style: { marginRight: 10 }, children: "PRIVATE BETA" }), "Create Kernels and use them from your JupyterLab, VS Code or CLI. Read the", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/docs', e), children: "documentation" }), ' ', "for any question or", ' ', _jsx(Link, { href: "javascript: return false;", onClick: e => navigate('/support/request', e), children: "contact us for support" }), "."] }), onDismiss: () => setShowDisclaimer(false) })) }));
 };
 export default FlashDisclaimer;

package/lib/components/index.d.ts

@@ -1 +1,2 @@
+export * from './auth';
 export * from './chat';

package/lib/components/index.js

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

package/lib/components/notebooks/JupyterNotebook.d.ts

@@ -3,10 +3,5 @@ type IJupyterNotebooProps = {
     boxPanel: BoxPanel;
     height?: string;
 };
-export declare const JupyterNotebook: {
-    (props: IJupyterNotebooProps): import("react/jsx-runtime").JSX.Element;
-    defaultProps: {
-        height: string;
-    };
-};
+export declare const JupyterNotebook: ({ boxPanel, height, }: IJupyterNotebooProps) => import("react/jsx-runtime").JSX.Element;
 export default JupyterNotebook;

package/lib/components/notebooks/JupyterNotebook.js

@@ -5,8 +5,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { Box } from '@datalayer/primer-addons';
 import { Lumino } from '@datalayer/jupyter-react';
-export const JupyterNotebook = (props) => {
-    const { boxPanel, height } = props;
+export const JupyterNotebook = ({ boxPanel, height = '100%', }) => {
     return (_jsx("div", { style: { position: 'relative' }, children: _jsx(Box, { className: "jp-LabShell", sx: {
                 position: 'relative',
                 '& .dla-Jupyter-Notebook': {
@@ -30,7 +29,4 @@ export const JupyterNotebook = (props) => {
                 },
             }, children: _jsx(Lumino, { children: boxPanel }) }) }));
 };
-JupyterNotebook.defaultProps = {
-    height: '100%',
-};
 export default JupyterNotebook;

package/lib/components/snapshots/RuntimeSnapshotMenu.d.ts

@@ -29,8 +29,5 @@ type IRuntimeSnapshotMenu = {
 /**
  * Runtime Snapshot menu component.
  */
-export declare function RuntimeSnapshotMenu(props: PropsWithChildren<IRuntimeSnapshotMenu>): JSX.Element;
-export declare namespace RuntimeSnapshotMenu {
-    var defaultProps: Partial<IRuntimeSnapshotMenu>;
-}
+export declare function RuntimeSnapshotMenu({ children, connection, podName, multiServiceManager, disabled, }: PropsWithChildren<IRuntimeSnapshotMenu>): JSX.Element;
 export {};

package/lib/components/snapshots/RuntimeSnapshotMenu.js

@@ -15,8 +15,7 @@ import { createRuntimeSnapshotName } from '../../utils';
 /**
  * Runtime Snapshot menu component.
  */
-export function RuntimeSnapshotMenu(props) {
-    const { children, connection, podName, multiServiceManager, disabled } = props;
+export function RuntimeSnapshotMenu({ children, connection, podName, multiServiceManager, disabled = false, }) {
     const { addRuntimeSnapshot, runtimesRunUrl, runtimeSnapshots, setRuntimeSnapshots, } = useRuntimesStore();
     const { enqueueToast, trackAsyncTask } = useToast();
     const [openLoadDialog, setOpenLoadDialog] = useState(false);
@@ -168,6 +167,3 @@ export function RuntimeSnapshotMenu(props) {
                     },
                 ], children: _jsxs(Box, { as: "form", children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Snapshot" }), _jsx(Select, { name: "snapshot", value: selection, onChange: onRuntimeSnapshotChanged, block: true, children: runtimeSnapshots.map(s => (_jsx(Select.Option, { value: s.id, children: s.name ? `${s.name} (${s.id})` : s.id }, s.id))) })] }), error && _jsx(Flash, { variant: "danger", children: error })] }) }))] }));
 }
-RuntimeSnapshotMenu.defaultProps = {
-    disabled: false,
-};

package/lib/config/Configuration.js

@@ -26,7 +26,7 @@ export class DatalayerConfiguration {
  * Default configuration values for Datalayer
  */
 export const DEFAULT_DATALAYER_CONFIG = {
-    runUrl: 'https://prod1.datalayer.run',
+    runUrl: 'https://oss.datalayer.run',
     credits: 100,
     cpuEnvironment: 'python-cpu-env',
     gpuEnvironment: 'ai-env',

package/lib/examples/CellExample.js

@@ -1,55 +1,19 @@
-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';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Jupyter, Cell, KernelIndicator, useJupyter, useKernelsStore, useCellsStore, } from '@datalayer/jupyter-react';
+import { Button, Label } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 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 CellExampleContent = () => {
+    const { defaultKernel } = useJupyter({ startDefaultKernel: true });
     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 })] }));
+    const kernelsStore = useKernelsStore();
+    return (_jsxs(Box, { p: 4, 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: defaultKernel && kernelsStore.getExecutionState(defaultKernel.id) })] }), _jsxs(Box, { children: ["Kernel Phase:", ' ', _jsx(Label, { children: defaultKernel && kernelsStore.getExecutionPhase(defaultKernel.id) })] }), _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: "Kernel Indicator:" }), _jsx(Box, { ml: 3, children: _jsx(KernelIndicator, { kernel: defaultKernel && defaultKernel.connection }) })] }), _jsx(Box, { children: _jsx(Button, { onClick: () => cellsStore.execute(CELL_ID), children: "Run cell" }) }), _jsx(Cell, { source: DEFAULT_SOURCE, id: CELL_ID, kernel: defaultKernel })] }));
+};
+export const CellExample = (props) => {
+    return (_jsx(Jupyter, { serviceManager: props.serviceManager, children: _jsx(CellExampleContent, {}) }));
 };
 export default CellExample;

package/lib/examples/lexical-theme.css

@@ -0,0 +1,436 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+/**
+ * Lexical Editor Theme - Integrated with JupyterReactTheme
+ *
+ * This theme uses CSS variables from:
+ * - JupyterLab theme (--jp-* variables)
+ * - Primer design system (--bgColor-*, --fgColor-*, --borderColor-*, etc.)
+ * - Automatically adapts to light/dark mode via JupyterReactTheme
+ *
+ * Based on Lexical's theming guide: https://lexical.dev/docs/getting-started/theming
+ */
+
+/* ============================================
+   Text Formatting
+   ============================================ */
+
+.lexical-theme-bold {
+  font-weight: bold;
+}
+
+.lexical-theme-italic {
+  font-style: italic;
+}
+
+.lexical-theme-underline {
+  text-decoration: underline;
+}
+
+.lexical-theme-strikethrough {
+  text-decoration: line-through;
+}
+
+.lexical-theme-code {
+  background-color: var(--jp-layout-color2, var(--bgColor-neutral-muted));
+  border-radius: 3px;
+  padding: 2px 4px;
+  font-family: var(
+    --jp-code-font-family,
+    'Monaco',
+    'Menlo',
+    'Ubuntu Mono',
+    'Consolas',
+    monospace
+  );
+  font-size: var(--jp-code-font-size, 0.9em);
+  color: var(--jp-mirror-editor-keyword-color, var(--fgColor-accent));
+}
+
+.lexical-theme-subscript {
+  font-size: 0.8em;
+  vertical-align: sub;
+}
+
+.lexical-theme-superscript {
+  font-size: 0.8em;
+  vertical-align: super;
+}
+
+/* ============================================
+   Block Elements
+   ============================================ */
+
+.lexical-theme-paragraph {
+  margin: 0;
+  padding: 8px 0;
+  line-height: var(--jp-content-line-height, 1.6);
+  color: var(--jp-ui-font-color1, var(--fgColor-default));
+}
+
+.lexical-theme-heading-h1 {
+  font-size: var(--jp-content-heading-font-size1, 2em);
+  font-weight: 600;
+  margin: 0.67em 0;
+  line-height: var(--jp-content-heading-line-height, 1.3);
+  color: var(--jp-ui-font-color0, var(--fgColor-default));
+}
+
+.lexical-theme-heading-h2 {
+  font-size: var(--jp-content-heading-font-size2, 1.5em);
+  font-weight: 600;
+  margin: 0.75em 0;
+  line-height: var(--jp-content-heading-line-height, 1.3);
+  color: var(--jp-ui-font-color0, var(--fgColor-default));
+}
+
+.lexical-theme-heading-h3 {
+  font-size: var(--jp-content-heading-font-size3, 1.25em);
+  font-weight: 600;
+  margin: 0.83em 0;
+  line-height: var(--jp-content-heading-line-height, 1.3);
+  color: var(--jp-ui-font-color0, var(--fgColor-default));
+}
+
+.lexical-theme-heading-h4 {
+  font-size: var(--jp-content-heading-font-size4, 1.1em);
+  font-weight: 600;
+  margin: 1em 0;
+  line-height: var(--jp-content-heading-line-height, 1.3);
+  color: var(--jp-ui-font-color0, var(--fgColor-default));
+}
+
+.lexical-theme-heading-h5 {
+  font-size: var(--jp-content-heading-font-size5, 1em);
+  font-weight: 600;
+  margin: 1.33em 0;
+  line-height: var(--jp-content-heading-line-height, 1.3);
+  color: var(--jp-ui-font-color0, var(--fgColor-default));
+}
+
+.lexical-theme-heading-h6 {
+  font-size: 0.875em;
+  font-weight: 600;
+  margin: 1.67em 0;
+  line-height: var(--jp-content-heading-line-height, 1.3);
+  color: var(--jp-ui-font-color1, var(--fgColor-muted));
+}
+
+.lexical-theme-quote {
+  margin: 16px 0;
+  padding: 8px 16px;
+  border-left: 4px solid
+    var(--jp-border-color2, var(--borderColor-accent-emphasis));
+  background-color: var(--jp-layout-color2, var(--bgColor-neutral-muted));
+  font-style: italic;
+  color: var(--jp-ui-font-color2, var(--fgColor-muted));
+}
+
+/* ============================================
+   Lists
+   ============================================ */
+
+.lexical-theme-list-ul {
+  margin: 8px 0;
+  padding-left: 24px;
+  list-style-type: disc;
+  color: var(--jp-ui-font-color1, var(--fgColor-default));
+}
+
+.lexical-theme-list-ol {
+  margin: 8px 0;
+  padding-left: 24px;
+  list-style-type: decimal;
+  color: var(--jp-ui-font-color1, var(--fgColor-default));
+}
+
+.lexical-theme-list-listitem {
+  margin: 4px 0;
+  line-height: var(--jp-content-line-height, 1.6);
+}
+
+.lexical-theme-list-nested-listitem {
+  list-style-type: none;
+}
+
+.lexical-theme-list-checklist {
+  padding-left: 4px;
+  list-style-type: none;
+}
+
+.lexical-theme-list-listitemChecked {
+  text-decoration: line-through;
+  opacity: 0.7;
+}
+
+.lexical-theme-list-listitemUnchecked {
+  text-decoration: none;
+}
+
+/* ============================================
+   Code Blocks
+   ============================================ */
+
+/* Code blocks styled like Jupyter cells */
+code.lexical-theme-code-block,
+code.lexical-theme-code-block[spellcheck],
+code.lexical-theme-code-block[data-highlight-language] {
+  background-color: #f7f7f7 !important;
+  background: #f7f7f7 !important;
+  border: 1px solid #d3d3d3 !important;
+  border-radius: 6px !important;
+  border-left: 3px solid #0366d6 !important;
+  padding: 8px 16px 8px 70px !important;
+  margin: 16px 0 0 0 !important;
+  overflow-x: auto !important;
+  font-family: var(
+    --jp-code-font-family,
+    'Monaco',
+    'Menlo',
+    'Ubuntu Mono',
+    monospace
+  ) !important;
+  font-size: 13px !important;
+  line-height: 1.6 !important;
+  color: #24292e !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+  display: block !important;
+  min-height: 50px !important;
+  position: relative !important;
+}
+
+/* Display line numbers from data-gutter attribute */
+code.lexical-theme-code-block::before {
+  content: attr(data-gutter);
+  position: absolute !important;
+  left: 0 !important;
+  top: 0 !important;
+  bottom: 0 !important;
+  width: 50px !important;
+  padding: 8px 8px 8px 0 !important;
+  color: #999 !important;
+  text-align: right !important;
+  white-space: pre !important;
+  font-family: monospace !important;
+  font-size: 13px !important;
+  line-height: 1.6 !important;
+  background-color: #f7f7f7 !important;
+  border-right: 1px solid #e1e4e8 !important;
+}
+
+/* Force transparent background on all child elements */
+code.lexical-theme-code-block *,
+code.lexical-theme-code-block span,
+code.lexical-theme-code-block span[class*='lexical-theme-code-token'],
+code.lexical-theme-code-block span[data-lexical-text],
+code.lexical-theme-code-block br {
+  background-color: transparent !important;
+  background: transparent !important;
+}
+
+code.lexical-theme-code-block:hover {
+  border-color: #66afe9 !important;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
+}
+
+/* Code syntax highlighting tokens using JupyterLab CodeMirror colors */
+.lexical-theme-code-tokenComment {
+  color: var(--jp-mirror-editor-comment-color, var(--fgColor-muted));
+}
+
+.lexical-theme-code-tokenPunctuation {
+  color: var(--jp-content-font-color1, var(--fgColor-default));
+}
+
+.lexical-theme-code-tokenProperty {
+  color: var(--jp-mirror-editor-attribute-color, var(--fgColor-accent));
+}
+
+.lexical-theme-code-tokenSelector {
+  color: var(--jp-mirror-editor-builtin-color, var(--fgColor-done));
+}
+
+.lexical-theme-code-tokenOperator {
+  color: var(--jp-mirror-editor-operator-color, var(--fgColor-danger));
+}
+
+.lexical-theme-code-tokenAttr {
+  color: var(--jp-mirror-editor-attribute-color, var(--fgColor-accent));
+}
+
+.lexical-theme-code-tokenVariable {
+  color: var(--jp-mirror-editor-variable-color, var(--fgColor-attention));
+}
+
+.lexical-theme-code-tokenFunction {
+  color: var(--jp-mirror-editor-def-color, var(--fgColor-done));
+}
+
+.lexical-theme-code-tokenKeyword {
+  color: var(--jp-mirror-editor-keyword-color, var(--fgColor-danger));
+}
+
+.lexical-theme-code-tokenString {
+  color: var(--jp-mirror-editor-string-color, var(--fgColor-success));
+}
+
+.lexical-theme-code-tokenNumber {
+  color: var(--jp-mirror-editor-number-color, var(--fgColor-accent));
+}
+
+.lexical-theme-code-tokenBoolean {
+  color: var(--jp-mirror-editor-number-color, var(--fgColor-accent));
+}
+
+.lexical-theme-code-tokenRegex {
+  color: var(--jp-mirror-editor-string-color, var(--fgColor-success));
+}
+
+/* ============================================
+   Links
+   ============================================ */
+
+.lexical-theme-link {
+  color: var(--jp-content-link-color, var(--fgColor-accent));
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.lexical-theme-link:hover {
+  text-decoration: underline;
+  color: var(--jp-content-link-color, var(--fgColor-accent));
+}
+
+.lexical-theme-autolink {
+  color: var(--jp-content-link-color, var(--fgColor-accent));
+  text-decoration: none;
+}
+
+.lexical-theme-autolink:hover {
+  text-decoration: underline;
+}
+
+/* ============================================
+   Tables
+   ============================================ */
+
+.lexical-theme-table {
+  border-collapse: collapse;
+  border: 1px solid var(--jp-border-color2, var(--borderColor-default));
+  margin: 16px 0;
+  width: 100%;
+}
+
+.lexical-theme-tableCell {
+  border: 1px solid var(--jp-border-color2, var(--borderColor-default));
+  padding: 8px 12px;
+  min-width: 75px;
+  vertical-align: top;
+  color: var(--jp-ui-font-color1, var(--fgColor-default));
+}
+
+.lexical-theme-tableCellHeader {
+  background-color: var(--jp-layout-color2, var(--bgColor-neutral-muted));
+  border: 1px solid var(--jp-border-color2, var(--borderColor-default));
+  padding: 8px 12px;
+  font-weight: 600;
+  text-align: left;
+  color: var(--jp-ui-font-color0, var(--fgColor-default));
+}
+
+/* ============================================
+   Special Nodes
+   ============================================ */
+
+.lexical-theme-hashtag {
+  color: var(--jp-brand-color1, var(--fgColor-accent));
+  background-color: var(--jp-layout-color2, var(--bgColor-accent-muted));
+  border-radius: 3px;
+  padding: 2px 4px;
+  cursor: pointer;
+}
+
+.lexical-theme-image {
+  max-width: 100%;
+  height: auto;
+  margin: 16px 0;
+  border-radius: var(--jp-border-radius, 6px);
+}
+
+.lexical-theme-hr {
+  border: none;
+  border-top: 2px solid var(--jp-border-color2, var(--borderColor-default));
+  margin: 24px 0;
+}
+
+.lexical-theme-mark {
+  background-color: var(--jp-warn-color3, rgba(255, 212, 0, 0.4));
+  padding: 2px 0;
+}
+
+/* ============================================
+   Jupyter-specific Nodes
+   ============================================ */
+
+/* Jupyter cells are styled by the jupyter-lexical components themselves.
+   Do not add theme CSS here as it conflicts with the component's internal styling.
+   The JupyterCellNode, JupyterInputNode, and JupyterOutputNode components
+   handle their own styling and theming. */
+
+/* ============================================
+   Editor Container Styles
+   ============================================ */
+
+.lexical-editor-content {
+  min-height: 450px;
+  outline: none;
+  padding: 16px;
+  font-family: var(
+    --jp-ui-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Helvetica,
+    Arial,
+    sans-serif
+  );
+  font-size: var(--jp-ui-font-size1, 16px);
+  line-height: var(--jp-content-line-height, 1.6);
+  color: var(--jp-ui-font-color1, var(--fgColor-default));
+  background-color: var(--jp-layout-color1, var(--bgColor-default));
+}
+
+.lexical-editor-content:focus {
+  outline: none;
+}
+
+.lexical-editor-inner {
+  position: relative;
+  background-color: var(--jp-layout-color1, var(--bgColor-default));
+}
+
+/* ============================================
+   Placeholder
+   ============================================ */
+
+.lexical-theme-placeholder {
+  color: var(--jp-ui-font-color3, var(--fgColor-muted));
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: 16px;
+  left: 16px;
+  font-size: var(--jp-ui-font-size1, 16px);
+  user-select: none;
+  pointer-events: none;
+}
+
+/* ============================================
+   Dark Mode Adjustments
+   ============================================ */
+
+/* Dark mode is handled automatically via CSS variables from JupyterReactTheme */
+/* The --jp-* and Primer variables change based on colormode */