@datalayer/core 0.0.3 → 0.0.5

package/lib/collaboration/DatalayerCollaborationProvider.js

@@ -0,0 +1,162 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { WebsocketProvider } from 'y-websocket';
+import { URLExt } from '@jupyterlab/coreutils';
+import { Signal } from '@lumino/signaling';
+// Import CollaborationStatus enum separately since it's exported
+var CollaborationStatus;
+(function (CollaborationStatus) {
+    CollaborationStatus["Disconnected"] = "disconnected";
+    CollaborationStatus["Connecting"] = "connecting";
+    CollaborationStatus["Connected"] = "connected";
+    CollaborationStatus["Error"] = "error";
+})(CollaborationStatus || (CollaborationStatus = {}));
+import { requestDatalayerCollaborationSessionId } from './DatalayerCollaboration';
+import { coreStore } from '../state/substates/CoreState';
+/**
+ * Datalayer collaboration provider
+ *
+ * This provider connects to Datalayer's collaboration service using WebSockets.
+ */
+export class DatalayerCollaborationProvider {
+    type = 'datalayer';
+    _status = CollaborationStatus.Disconnected;
+    _provider = null;
+    _sharedModel = null;
+    _statusChanged = new Signal(this);
+    _errorOccurred = new Signal(this);
+    _syncStateChanged = new Signal(this);
+    _isDisposed = false;
+    _config;
+    _onSync = null;
+    _onConnectionClose = null;
+    constructor(config) {
+        this._config = config;
+    }
+    get status() {
+        return this._status;
+    }
+    get isConnected() {
+        return this._status === CollaborationStatus.Connected;
+    }
+    get isDisposed() {
+        return this._isDisposed;
+    }
+    get events() {
+        return {
+            statusChanged: this._statusChanged,
+            errorOccurred: this._errorOccurred,
+            syncStateChanged: this._syncStateChanged,
+        };
+    }
+    setStatus(status) {
+        if (this._status !== status) {
+            this._status = status;
+            this._statusChanged.emit(status);
+        }
+    }
+    async connect(sharedModel, documentId, options) {
+        if (this.isConnected) {
+            console.warn('Already connected to Datalayer collaboration service');
+            return;
+        }
+        this.setStatus(CollaborationStatus.Connecting);
+        try {
+            // Get configuration from store or use provided config
+            const { configuration } = coreStore.getState();
+            const runUrl = this._config.runUrl ?? configuration?.runUrl;
+            const token = this._config.token ?? configuration?.token;
+            if (!runUrl) {
+                throw new Error('Datalayer runUrl is not configured');
+            }
+            if (!token) {
+                throw new Error('Datalayer token is not configured');
+            }
+            const { ydoc, awareness } = sharedModel;
+            // Build WebSocket URL
+            const documentURL = URLExt.join(runUrl, '/api/spacer/v1/documents');
+            const wsUrl = documentURL.replace(/^http/, 'ws');
+            // Request collaboration session from Datalayer
+            const sessionId = await requestDatalayerCollaborationSessionId({
+                url: URLExt.join(documentURL, documentId),
+                token,
+            });
+            // Create WebSocket provider
+            this._provider = new WebsocketProvider(wsUrl, documentId, ydoc, {
+                disableBc: true,
+                params: {
+                    sessionId,
+                    token,
+                },
+                awareness,
+                ...options,
+            });
+            this._sharedModel = sharedModel;
+            // Set up event handlers
+            this._onSync = (isSynced) => {
+                this.handleSync(isSynced);
+            };
+            this._onConnectionClose = (event) => {
+                if (event) {
+                    this.handleConnectionClose(event);
+                }
+            };
+            this._provider.on('sync', this._onSync);
+            this._provider.on('connection-close', this._onConnectionClose);
+            console.log('Connected to Datalayer collaboration service');
+        }
+        catch (error) {
+            this.setStatus(CollaborationStatus.Error);
+            this._errorOccurred.emit(error);
+            throw error;
+        }
+    }
+    disconnect() {
+        if (this._provider) {
+            if (this._onSync) {
+                this._provider.off('sync', this._onSync);
+            }
+            if (this._onConnectionClose) {
+                this._provider.off('connection-close', this._onConnectionClose);
+            }
+            this._provider.disconnect();
+            this._provider = null;
+        }
+        this._sharedModel = null;
+        this.setStatus(CollaborationStatus.Disconnected);
+    }
+    getProvider() {
+        return this._provider;
+    }
+    getSharedModel() {
+        return this._sharedModel;
+    }
+    handleConnectionClose(event) {
+        console.warn('Collaboration connection closed:', event);
+        this.setStatus(CollaborationStatus.Disconnected);
+        // Handle session expiration (code 4002)
+        if (event.code === 4002) {
+            console.warn('Datalayer collaboration session expired');
+            // Attempt to reconnect could be implemented here
+        }
+    }
+    handleSync(isSynced) {
+        this._syncStateChanged.emit(isSynced);
+        if (isSynced) {
+            this.setStatus(CollaborationStatus.Connected);
+        }
+    }
+    dispose() {
+        if (this._isDisposed) {
+            return;
+        }
+        this.disconnect();
+        // Signals don't need explicit disposal in Lumino
+        // They are cleaned up when the object is garbage collected
+        this._isDisposed = true;
+    }
+}
+// Export the provider for direct instantiation
+export default DatalayerCollaborationProvider;

package/lib/collaboration/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DatalayerCollaboration';
+export * from './DatalayerCollaborationProvider';

package/lib/collaboration/index.js

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

package/lib/components/avatars/BoringAvatar.d.ts

@@ -1,4 +1,4 @@
-type VariantType = "marble" | "beam" | "pixel" | "sunset" | "ring" | "bauhaus" | undefined;
+type VariantType = 'marble' | 'beam' | 'pixel' | 'sunset' | 'ring' | 'bauhaus' | undefined;
 type IBoringAvatarProps = {
     displayName: string;
     variant: VariantType;

package/lib/components/avatars/BoringAvatar.js

@@ -15,12 +15,12 @@ const variants = [
 ];
 export const getRandomBoringAvatarVariant = () => variants[Math.floor(Math.random() * variants.length)] as VariantType;
 */
-const getRandomBoringAvatarVariant = () => "bauhaus";
+const getRandomBoringAvatarVariant = () => 'bauhaus';
 const RANDOM_BORING_AVATOR_VARIANT = getRandomBoringAvatarVariant();
 export const BoringAvatar = (props) => {
     const { displayName, size, square, style } = props;
     const variant = props.variant ?? getRandomBoringAvatarVariant();
-    return (_jsx("span", { style: { ...style || {} }, children: _jsx(BoringAvatars, { size: size, name: displayName, variant: variant, square: square, colors: [
+    return (_jsx("span", { style: { ...(style || {}) }, children: _jsx(BoringAvatars, { size: size, name: displayName, variant: variant, square: square, colors: [
                 '#000000',
                 '#146A7C',
                 '#16A085',

package/lib/components/avatars/UserProfileAvatar.js

@@ -4,7 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { Avatar, Link } from '@primer/react';
-import { Box } from "@datalayer/primer-addons";
+import { Box } from '@datalayer/primer-addons';
 import { AvatarSkeleton } from '../../components/display';
 import { getAvatarURL } from '../../utils';
 const Profile = (props) => {
@@ -17,14 +17,7 @@ const Profile = (props) => {
 };
 export const UserProfileAvatar = (props) => {
     const { onClick, user, size } = props;
-    return (user ?
-        onClick
-            ?
-                _jsx(Link, { href: "javascript: return false;", onClick: onClick, children: _jsx(Profile, { ...props }) })
-            :
-                _jsx(Profile, { ...props })
-        :
-            _jsx(AvatarSkeleton, { size: size }));
+    return user ? (onClick ? (_jsx(Link, { href: "javascript: return false;", onClick: onClick, children: _jsx(Profile, { ...props }) })) : (_jsx(Profile, { ...props }))) : (_jsx(AvatarSkeleton, { size: size }));
 };
 UserProfileAvatar.defaultProps = {
     size: 100,

package/lib/components/banners/NoAutomationBanner.js

@@ -3,11 +3,11 @@ 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.
  */
-import { Link } from "@primer/react";
-import { Banner } from "@primer/react/experimental";
-import { useNavigate } from "../../hooks";
+import { Link } from '@primer/react';
+import { Banner } from '@primer/react/experimental';
+import { useNavigate } from '../../hooks';
 export const NoAutomationBanner = () => {
     const navigate = useNavigate();
-    return (_jsx(_Fragment, { children: _jsx(Banner, { title: "Warning", description: _jsxs(_Fragment, { children: ["We don't have bandwidth to automate this feature. ", _jsx(Link, { href: "", onClick: e => navigate('/contact', e), children: "Please reach out" }), " to prioritize this."] }), primaryAction: _jsx(Banner.PrimaryAction, { onClick: e => navigate('/contact', e), children: "Reach out" }), variant: "warning" }) }));
+    return (_jsx(_Fragment, { children: _jsx(Banner, { title: "Warning", description: _jsxs(_Fragment, { children: ["We don't have bandwidth to automate this feature.", ' ', _jsx(Link, { href: "", onClick: e => navigate('/contact', e), children: "Please reach out" }), ' ', "to prioritize this."] }), primaryAction: _jsx(Banner.PrimaryAction, { onClick: e => navigate('/contact', e), children: "Reach out" }), variant: "warning" }) }));
 };
 export default NoAutomationBanner;

package/lib/components/buttons/DownloadCSVButton.js

@@ -11,6 +11,6 @@ export const DownloadCSVButton = (props) => {
     return (_jsx(Button, { variant: variant, leadingVisual: DownloadIcon, onClick: e => downloadCSV(data, fileName), children: "Download" }));
 };
 DownloadCSVButton.defaultProps = {
-    variant: "default",
+    variant: 'default',
 };
 export default DownloadCSVButton;

package/lib/components/buttons/UploadButton.js

@@ -38,6 +38,6 @@ export function UploadButton(props) {
     return _jsx(UploadBaseButton, { buttonFactory: factory, ...others });
 }
 UploadButton.defaultProps = {
-    variant: "primary",
+    variant: 'primary',
 };
 export default UploadButton;

package/lib/components/checkout/StripeCheckout.d.ts

@@ -27,6 +27,6 @@ export interface IPrice {
 /**
  * Stripe checkout.
  */
-export declare function StripeCheckout({ checkoutPortal }: {
+export declare function StripeCheckout({ checkoutPortal, }: {
     checkoutPortal: ICheckoutPortal | null;
 }): import("react/jsx-runtime").JSX.Element;

package/lib/components/checkout/StripeCheckout.js

@@ -5,13 +5,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { createElement, useCallback, useEffect, useState } from 'react';
 import { Button, Flash, FormControl, Spinner, Text } from '@primer/react';
-import { Box } from "@datalayer/primer-addons";
+import { Box } from '@datalayer/primer-addons';
 import { useCache } from '../../hooks';
 import { useIAMStore } from '../../state';
 /**
  * Stripe checkout.
  */
-export function StripeCheckout({ checkoutPortal }) {
+export function StripeCheckout({ checkoutPortal, }) {
     const { iamRunUrl } = useIAMStore();
     const { createCheckoutSession, refreshStripePrices } = useCache();
     const [stripe, setStripe] = useState(null);
@@ -70,7 +70,7 @@ export function StripeCheckout({ checkoutPortal }) {
                         display: 'grid',
                         gap: 'var(--stack-gap-normal)',
                         gridTemplateColumns: Array(items.length).fill('1fr').join(' '),
-                        padding: 'var(--stack-padding-normal) 0'
+                        padding: 'var(--stack-padding-normal) 0',
                     }, children: items.map(item => (_jsx(Box, { role: "radio", "aria-labelledby": `checkout-price-${item.id}`, "aria-checked": product?.id === item.id, onClick: () => {
                             setProduct(item);
                         }, sx: {
@@ -81,12 +81,12 @@ export function StripeCheckout({ checkoutPortal }) {
                                 ? 'var(--borderColor-accent-emphasis)'
                                 : 'var(--borderColor-default)',
                             padding: 'var(--stack-padding-condensed)',
-                            cursor: 'pointer'
+                            cursor: 'pointer',
                         }, children: _jsxs(FormControl, { sx: {
-                                alignItems: 'center'
+                                alignItems: 'center',
                             }, children: [_jsx(FormControl.Label, { id: `checkout-price-${item.id}`, sx: { alignSelf: 'center' }, children: item.name }), _jsx(Text, { as: "p", children: new Intl.NumberFormat(undefined, {
                                         style: 'currency',
-                                        currency: item.currency
+                                        currency: item.currency,
                                     }).format(item.amount / 100) }), _jsxs(Text, { as: "p", children: [item.credits, " credits"] })] }, item.id) }))) }), _jsx(Button, { variant: "primary", onClick: () => {
                         setCheckout(true);
                     }, disabled: product === null, sx: { float: 'right' }, children: "Checkout" })] })) : (_jsx(Box, { children: _jsx(Flash, { variant: "danger", children: "Unable to fetch the available products. Please try again later." }) }));

package/lib/components/confetti/ConfettiSuccess.js

@@ -7,6 +7,6 @@ import { useWindowSize } from 'usehooks-ts';
 import Confetti from 'react-confetti';
 export const ConfettiSuccess = () => {
     const { width, height } = useWindowSize();
-    return (_jsx(Confetti, { width: width, height: height }));
+    return _jsx(Confetti, { width: width, height: height });
 };
 export default ConfettiSuccess;

package/lib/components/context/OrganizationSelect.js

@@ -3,11 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useState, useEffect, useCallback } from "react";
-import { Select } from "@primer/react";
-import { useCache, useUser } from "./../../hooks";
-import { useLayoutStore } from "../../state";
-const NO_ORGANIZATION_SELECTED_VALUE = "NO_ORGANIZATION_SELECTED_VALUE";
+import { useState, useEffect, useCallback } from 'react';
+import { Select } from '@primer/react';
+import { useCache, useUser } from './../../hooks';
+import { useLayoutStore } from '../../state';
+const NO_ORGANIZATION_SELECTED_VALUE = 'NO_ORGANIZATION_SELECTED_VALUE';
 export const OrganizationSelect = () => {
     const user = useUser();
     const { organization, updateLayoutOrganization, updateLayoutSpace } = useLayoutStore();

package/lib/components/context/SpaceSelect.js

@@ -3,15 +3,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useState, useEffect, useCallback } from "react";
-import { FormControl, Select } from "@primer/react";
-import { Box } from "@datalayer/primer-addons";
-import { useCache, useUser } from "./../../hooks";
-import { useLayoutStore } from "../../state";
+import { useState, useEffect, useCallback } from 'react';
+import { FormControl, Select } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { useCache, useUser } from './../../hooks';
+import { useLayoutStore } from '../../state';
 export const SpaceSelect = () => {
     const user = useUser();
     const { organization, space, updateLayoutSpace } = useLayoutStore();
-    const { refreshUserSpaces, getUserSpaces, refreshOrganizationSpaces, getOrganizationSpaces } = useCache();
+    const { refreshUserSpaces, getUserSpaces, refreshOrganizationSpaces, getOrganizationSpaces, } = useCache();
     const [spaces, setSpaces] = useState([]);
     const [_, setSelection] = useState(space);
     useEffect(() => {
@@ -32,7 +32,7 @@ export const SpaceSelect = () => {
     }, [user, organization]);
     const onSelectionChange = useCallback((e) => {
         const selectedSpace = e.target.value;
-        const org = (selectedSpace === undefined)
+        const org = selectedSpace === undefined
             ? undefined
             : spaces[parseInt(selectedSpace, 10)];
         setSelection(org);

package/lib/components/display/AvatarSkeleton.js

@@ -3,7 +3,7 @@ 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 { SkeletonAvatar } from "@primer/react/experimental";
+import { SkeletonAvatar } from '@primer/react/experimental';
 export const AvatarSkeleton = (props) => {
     const { size } = props;
     return (_jsx(_Fragment, { children: _jsx(SkeletonAvatar, { size: size }) }));

package/lib/components/display/CenteredSpinner.js

@@ -3,18 +3,18 @@ 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 { Spinner, Text } from "@primer/react";
-import { Box } from "@datalayer/primer-addons";
+import { Spinner, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 export const CenteredSpinner = (props) => {
     const { message, size } = props;
     return (_jsxs(Box, { sx: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            minHeight: '40px'
+            minHeight: '40px',
         }, children: [_jsx(Spinner, { size: size }), message && _jsx(Text, { sx: { marginLeft: 3 }, children: message })] }));
 };
 CenteredSpinner.defaultProps = {
-    size: "medium",
+    size: 'medium',
 };
 export default CenteredSpinner;

package/lib/components/display/CodePreview.js

@@ -6,10 +6,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const CodePreview = (props) => {
     const { code } = props;
     return (_jsx("pre", { style: {
-            fontSize: "12px",
-            wordBreak: "break-all",
-            wordWrap: "break-word",
-            whiteSpace: "pre-wrap",
+            fontSize: '12px',
+            wordBreak: 'break-all',
+            wordWrap: 'break-word',
+            whiteSpace: 'pre-wrap',
         }, children: code }));
 };
 export default CodePreview;

package/lib/components/display/DatalayerBox.js

@@ -3,24 +3,23 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { Link, Text } from "@primer/react";
-import { Box } from "@datalayer/primer-addons";
-import { ArrowRightIcon } from "@primer/octicons-react";
-import { useNavigate } from "../../hooks";
+import { Link, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ArrowRightIcon } from '@primer/octicons-react';
+import { useNavigate } from '../../hooks';
 export const DatalayerBox = (props) => {
     const { title, linkLabel, linkRoute, children } = props;
     const navigate = useNavigate();
     return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                    paddingRight: 4
-                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: "6px solid #28b899", paddingLeft: 2 }, children: title }), linkRoute && linkLabel &&
-                        _jsxs(Link, { href: "javascript: return false;", onClick: e => navigate(linkRoute), children: [linkLabel, _jsx(ArrowRightIcon, {})] })] }), _jsx(Box, { sx: {
-                    borderColor: "border.default",
-                    borderStyle: "solid",
-                    borderWidth: "1",
-                    borderRadius: "2",
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    paddingRight: 4,
+                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '6px solid #28b899', paddingLeft: 2 }, children: title }), linkRoute && linkLabel && (_jsxs(Link, { href: "javascript: return false;", onClick: e => navigate(linkRoute), children: [linkLabel, _jsx(ArrowRightIcon, {})] }))] }), _jsx(Box, { sx: {
+                    borderColor: 'border.default',
+                    borderStyle: 'solid',
+                    borderWidth: '1',
+                    borderRadius: '2',
                     padding: 4,
                     marginTop: 2,
                 }, children: children })] }));

package/lib/components/display/HorizontalCenter.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react';
 type IHorizontalCenterProps = {
     margin?: string;
 };

package/lib/components/display/HorizontalCenter.js

@@ -9,6 +9,6 @@ export const HorizontalCenter = (props) => {
         }, children: children }));
 };
 HorizontalCenter.defaultProps = {
-    margin: "0px",
+    margin: '0px',
 };
 export default HorizontalCenter;

package/lib/components/display/JupyterDialog.js

@@ -3,27 +3,25 @@ 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 { createElement, useState } from 'react';
+import { createElement, useState, } from 'react';
 import { Dialog } from '@jupyterlab/apputils';
 import { ReactWidget } from '@jupyterlab/ui-components';
 import { PromiseDelegate } from '@lumino/coreutils';
 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 { Dialog as PrimerDialog, } from '@primer/react/experimental';
 function DialogFooter(props) {
     const { checkbox, footerButtons, setChecked } = props;
     const [checked, setLocalChecked] = useState();
     const { containerRef: footerRef } = useFocusZone({
         bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
-        focusInStrategy: 'closest'
+        focusInStrategy: 'closest',
     });
-    return (_jsxs(PrimerDialog.Footer, { className: "dla-dialog-footer", ref: footerRef, children: [checkbox &&
-                _jsxs(FormControl, { layout: "horizontal", children: [_jsx(Checkbox, { className: checkbox.className ?? '', checked: checked, defaultChecked: checkbox.checked, onChange: e => {
-                                setLocalChecked(e.target.checked);
-                                setChecked(e.target.checked);
-                            }, title: checkbox.caption ?? '' }), _jsx(FormControl.Label, { children: checkbox.label ?? '' })] }), _jsx("div", { className: "dla-dialog-footer-spacer" }), footerButtons &&
-                _jsx(PrimerDialog.Buttons, { buttons: footerButtons })] }));
+    return (_jsxs(PrimerDialog.Footer, { className: "dla-dialog-footer", ref: footerRef, children: [checkbox && (_jsxs(FormControl, { layout: "horizontal", children: [_jsx(Checkbox, { className: checkbox.className ?? '', checked: checked, defaultChecked: checkbox.checked, onChange: e => {
+                            setLocalChecked(e.target.checked);
+                            setChecked(e.target.checked);
+                        }, title: checkbox.caption ?? '' }), _jsx(FormControl.Label, { children: checkbox.label ?? '' })] })), _jsx("div", { className: "dla-dialog-footer-spacer" }), footerButtons && (_jsx(PrimerDialog.Buttons, { buttons: footerButtons }))] }));
 }
 /**
  * A primer dialog mimicking the JupyterLab dialog interface
@@ -38,7 +36,7 @@ export class JupyterDialog extends ReactWidget {
     _result = {
         button: null,
         isChecked: null,
-        value: null
+        value: null,
     };
     /**
      * Create a dialog instance.
@@ -50,13 +48,13 @@ export class JupyterDialog extends ReactWidget {
         this.checkbox = options.checkbox ?? null;
         this.buttons = options.buttons ?? [
             Dialog.cancelButton(),
-            Dialog.okButton()
+            Dialog.okButton(),
         ];
         this.dialogTitle = options.title;
     }
     _renderBody = (props) => (_jsx(PrimerDialog.Body, { children: createElement(this.body, {
             ...props,
-            setValue: this.setValue
+            setValue: this.setValue,
         }) }));
     _renderFooter = (props) => (_jsx(DialogFooter, { ...props, checkbox: this.checkbox, setChecked: this.setChecked }));
     render() {
@@ -69,12 +67,16 @@ export class JupyterDialog extends ReactWidget {
             }, onClose: this.close, footerButtons: this.buttons.map((but, idx) => {
                 const footerButton = {
                     buttonType: but.displayType === 'default'
-                        ? but.accept ? 'primary' : 'default'
+                        ? but.accept
+                            ? 'primary'
+                            : 'default'
                         : 'danger',
-                    onClick: () => { this.handleButton(idx); },
+                    onClick: () => {
+                        this.handleButton(idx);
+                    },
                     content: but.label,
                     'aria-label': but.ariaLabel,
-                    autoFocus: but.accept
+                    autoFocus: but.accept,
                 };
                 return footerButton;
             }), renderBody: this._renderBody, renderFooter: this._renderFooter, title: this.dialogTitle }));

package/lib/components/display/NavLink.d.ts

@@ -2,8 +2,10 @@ import { type ReactNode } from 'react';
 export type NavLinkProps = {
     to: string;
     children: ReactNode;
+    [key: string]: any;
 };
 /**
- * React router Link for primer NavList
+ * Navigation link for primer NavList
+ * Works with React Router, Next.js, or native browser navigation
  */
-export declare const NavLink: import("react").ForwardRefExoticComponent<NavLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export declare const NavLink: import("react").ForwardRefExoticComponent<Omit<NavLinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;

package/lib/components/display/NavLink.js

@@ -6,12 +6,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from 'react';
 import { useNavigate } from '../../hooks';
 /**
- * React router Link for primer NavList
+ * Navigation link for primer NavList
+ * Works with React Router, Next.js, or native browser navigation
  */
 export const NavLink = forwardRef(({ to, children, ...props }, ref) => {
     const navigate = useNavigate();
-    const onClick = useCallback(() => {
+    const onClick = useCallback((e) => {
+        e.preventDefault();
         navigate(to);
-    }, [to]);
-    return (_jsx("a", { ref: ref, ...props, onClick: onClick, children: children }));
+    }, [to, navigate]);
+    return (_jsx("a", { ref: ref, href: to, ...props, onClick: onClick, children: children }));
 });

package/lib/components/display/NotebookSkeleton.js

@@ -3,8 +3,8 @@ 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.
  */
-import { Box } from "@datalayer/primer-addons";
-import { SkeletonBox } from "@primer/react/experimental";
+import { Box } from '@datalayer/primer-addons';
+import { SkeletonBox } from '@primer/react/experimental';
 export const NotebookSkeleton = () => {
     return (_jsxs(_Fragment, { children: [_jsx(SkeletonBox, { height: "100px" }), _jsx(Box, { style: { height: 20 } }), _jsx(SkeletonBox, { height: "100px" }), _jsx(Box, { style: { height: 20 } }), _jsx(SkeletonBox, { height: "100px" }), _jsx(Box, { style: { height: 20 } }), _jsx(SkeletonBox, { height: "100px" })] }));
 };

package/lib/components/display/Placeholder.js

@@ -4,6 +4,6 @@ import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 export const Placeholder = () => {
-    return (_jsx(_Fragment, {}));
+    return _jsx(_Fragment, {});
 };
 export default Placeholder;

package/lib/components/display/ToTopBranded.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { Button } from "@primer/react-brand";
+import { Button } from '@primer/react-brand';
 import { MoveToTopIcon } from '@primer/octicons-react';
 export const ToTopBranded = () => {
     return (_jsx("div", { style: { position: 'fixed', bottom: '50px', left: '100px' }, children: _jsx(Button, { leadingVisual: _jsx(MoveToTopIcon, {}), hasArrow: false, size: "small", onClick: e => window.scrollTo(0, 0), children: "Go Top" }) }));

package/lib/components/echarts/EChartsReact.d.ts

@@ -7,5 +7,5 @@ export interface EChartsProps {
     loading?: boolean;
     theme?: 'light' | 'dark';
 }
-export declare const EChartsReact: ({ options, style, settings, loading, theme }: EChartsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EChartsReact: ({ options, style, settings, loading, theme, }: EChartsProps) => import("react/jsx-runtime").JSX.Element;
 export default EChartsReact;