@datalayer/core 0.0.2 → 0.0.4

package/lib/hooks/useNavigate.js

@@ -2,19 +2,68 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
-import { useNavigate as useRouterNavigate } from "react-router-dom";
+import { useCallback } from 'react';
 import { useLayoutStore } from '../state';
+import { createNativeNavigate } from '../navigation/adapters/native';
+// Import React Router hooks from our wrapper
+import { useNavigateRR } from '../navigation/adapters/react-router';
+// Import Next.js hooks from our wrapper
+// Currently not used but kept for future Next.js support
+// import { useRouterNext } from '../navigation/adapters/nextjs';
+/**
+ * Main navigation hook that provides a universal navigate function
+ * Works with React Router, Next.js, or native browser navigation
+ */
 export const useNavigate = () => {
-    const routerNavigate = useRouterNavigate();
     const layoutStore = useLayoutStore();
-    const navigate = (location, e = undefined, resetPortals = true, options = undefined) => {
-        if (e) {
-            e.preventDefault();
+    // Detect environment
+    const isNextJs = typeof window !== 'undefined' && !!window.__NEXT_DATA__;
+    const isClient = typeof window !== 'undefined';
+    // Try to use React Router's useNavigate if available
+    let rrNavigate = null;
+    let isReactRouter = false;
+    if (!isNextJs && useNavigateRR && isClient) {
+        try {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            rrNavigate = useNavigateRR();
+            isReactRouter = !!rrNavigate;
+        }
+        catch {
+            // Not in a Router context
+        }
+    }
+    // If React Router is available, return it directly (wrapped for consistency)
+    if (isReactRouter && rrNavigate) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useCallback((to, options) => {
+            // For React Router, just pass through directly without side effects
+            return rrNavigate(to, options);
+        }, [rrNavigate]);
+    }
+    // Otherwise use native navigation with our custom behavior
+    const baseNavigate = createNativeNavigate();
+    // Wrap with our custom behavior for native navigation
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const navigate = useCallback((location, optionsOrEvent, resetPortals = true, extraOptions) => {
+        // Handle different call signatures for native navigation
+        let options = undefined;
+        let event = undefined;
+        if (optionsOrEvent && optionsOrEvent.preventDefault) {
+            // Legacy signature with event as second parameter
+            event = optionsOrEvent;
+            options = extraOptions;
+        }
+        else if (typeof optionsOrEvent === 'boolean') {
+            // Legacy signature with resetPortals as second parameter
+            resetPortals = optionsOrEvent;
+            options = extraOptions;
+        }
+        else {
+            // Standard signature with options as second parameter
+            options = optionsOrEvent;
+        }
+        if (event) {
+            event.preventDefault();
         }
         if (resetPortals) {
             layoutStore.resetLeftPortal();
@@ -22,8 +71,9 @@ export const useNavigate = () => {
         }
         window.scrollTo(0, 0);
         document.body.scrollTop = 0;
-        routerNavigate(location, options);
-    };
+        // Use native navigation
+        baseNavigate(location, options);
+    }, [baseNavigate, layoutStore]);
     return navigate;
 };
 export default useNavigate;

package/lib/hooks/useNotebookAIAgent.js

@@ -2,11 +2,6 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import { useEffect } from 'react';
 import { useAIAgentStore } from '../state';
 import { useAIAgents } from './useAIAgents';
@@ -24,7 +19,9 @@ export function useNotebookAIAgent(notebookId) {
         const refreshAIAgent = async () => {
             abortController = new AbortController();
             try {
-                const response = await getAIAgent(notebookId, { signal: abortController.signal });
+                const response = await getAIAgent(notebookId, {
+                    signal: abortController.signal,
+                });
                 if (!response.success) {
                     deleteAIAgent(notebookId);
                     return;

package/lib/hooks/useOnClickOutside.js

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

package/lib/hooks/useParams.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook to get URL parameters
+ * Works with Next.js App Router, React Router, or falls back to URL parsing
+ */
+export declare const useParams: () => Record<string, string>;

package/lib/hooks/useParams.js

@@ -0,0 +1,152 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useState, useMemo } from 'react';
+import { useParamsRR } from '../navigation/adapters/react-router';
+import { useParamsNext, useSearchParamsNext, } from '../navigation/adapters/nextjs';
+/**
+ * Hook to get URL parameters
+ * Works with Next.js App Router, React Router, or falls back to URL parsing
+ */
+export const useParams = () => {
+    // State for fallback URL search params
+    const [searchParams, setSearchParams] = useState({});
+    // Detect environment
+    const isNextJs = typeof window !== 'undefined' && !!window.__NEXT_DATA__;
+    const isClient = typeof window !== 'undefined';
+    // Try to get params from different sources
+    let routeParams = {};
+    const queryParams = {};
+    let paramsSource = 'fallback';
+    // 1. Try Next.js first (if detected)
+    if (isNextJs && useParamsNext) {
+        try {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            routeParams = useParamsNext() || {};
+            paramsSource = 'nextjs';
+            // Also get search params in Next.js
+            if (useSearchParamsNext) {
+                try {
+                    // eslint-disable-next-line react-hooks/rules-of-hooks
+                    const searchParamsObj = useSearchParamsNext();
+                    if (searchParamsObj) {
+                        searchParamsObj.forEach((value, key) => {
+                            queryParams[key] = value;
+                        });
+                    }
+                }
+                catch {
+                    // Not in Next.js context or search params not available
+                }
+            }
+        }
+        catch {
+            // Not in Next.js router context
+        }
+    }
+    // 2. Try React Router (if not Next.js)
+    if (paramsSource === 'fallback' && !isNextJs && useParamsRR) {
+        try {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            routeParams = useParamsRR() || {};
+            paramsSource = 'react-router';
+        }
+        catch {
+            // Not in React Router context
+        }
+    }
+    // 3. Get URL search params (for React Router and fallback)
+    useEffect(() => {
+        if (!isClient || paramsSource === 'nextjs')
+            return;
+        const updateSearchParams = () => {
+            const params = {};
+            const urlParams = new URLSearchParams(window.location.search);
+            urlParams.forEach((value, key) => {
+                params[key] = value;
+            });
+            setSearchParams(params);
+        };
+        updateSearchParams();
+        // Listen for URL changes
+        window.addEventListener('popstate', updateSearchParams);
+        window.addEventListener('pushstate', updateSearchParams);
+        window.addEventListener('replacestate', updateSearchParams);
+        return () => {
+            window.removeEventListener('popstate', updateSearchParams);
+            window.removeEventListener('pushstate', updateSearchParams);
+            window.removeEventListener('replacestate', updateSearchParams);
+        };
+    }, [isClient, paramsSource]);
+    // 4. For fallback, also try to parse route params from URL path
+    const fallbackRouteParams = useMemo(() => {
+        if (!isClient || paramsSource !== 'fallback')
+            return {};
+        const pathname = window.location.pathname;
+        const params = {};
+        // Common patterns to match
+        // /products/123 -> { id: '123' }
+        // /users/john-doe -> { username: 'john-doe' }
+        // /blog/2024/01/my-post -> { year: '2024', month: '01', slug: 'my-post' }
+        const patterns = [
+            { regex: /^\/products\/([^/]+)$/, params: ['id'] },
+            { regex: /^\/products\/([^/]+)\/reviews$/, params: ['id'] },
+            { regex: /^\/users\/([^/]+)$/, params: ['username'] },
+            {
+                regex: /^\/blog\/(\d{4})\/(\d{2})\/([^/]+)$/,
+                params: ['year', 'month', 'slug'],
+            },
+            { regex: /^\/posts\/([^/]+)$/, params: ['slug'] },
+            { regex: /^\/([^/]+)\/([^/]+)$/, params: ['category', 'id'] },
+        ];
+        for (const pattern of patterns) {
+            const match = pathname.match(pattern.regex);
+            if (match) {
+                pattern.params.forEach((paramName, index) => {
+                    if (match[index + 1]) {
+                        params[paramName] = match[index + 1];
+                    }
+                });
+                break;
+            }
+        }
+        return params;
+    }, [isClient, paramsSource, isClient ? window.location.pathname : '']);
+    // Combine all params with proper memoization to prevent re-renders
+    const combinedParams = useMemo(() => {
+        const result = {};
+        // Add route params
+        for (const [key, value] of Object.entries(routeParams)) {
+            if (value !== undefined) {
+                // Handle array values (Next.js catch-all routes)
+                result[key] = Array.isArray(value) ? value.join('/') : String(value);
+            }
+        }
+        // Add query params (Next.js)
+        for (const [key, value] of Object.entries(queryParams)) {
+            result[key] = value;
+        }
+        // Add search params (React Router and fallback)
+        if (paramsSource !== 'nextjs') {
+            for (const [key, value] of Object.entries(searchParams)) {
+                result[key] = value;
+            }
+        }
+        // Add fallback route params
+        if (paramsSource === 'fallback') {
+            for (const [key, value] of Object.entries(fallbackRouteParams)) {
+                result[key] = value;
+            }
+        }
+        return result;
+    }, [
+        // Use JSON.stringify for deep comparison
+        JSON.stringify(routeParams),
+        JSON.stringify(queryParams),
+        JSON.stringify(searchParams),
+        JSON.stringify(fallbackRouteParams),
+        paramsSource,
+    ]);
+    return combinedParams;
+};

package/lib/hooks/useRef.js

@@ -2,11 +2,6 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import { useRef } from 'react';
 /**
  * There are some situations where we only want to create a new ref if one is not provided to a component

package/lib/hooks/useRuntimes.js

@@ -2,11 +2,6 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import { requestJupyterKernelsExtension } from '../api';
 export const useRuntimes = () => {
     // Folder Mounting ----------------------------------------------------------
@@ -21,7 +16,7 @@ export const useRuntimes = () => {
     };
     const unmountLocalFolder = (kernelId) => {
         requestJupyterKernelsExtension(`jump/${kernelId}`, {
-            method: 'DELETE'
+            method: 'DELETE',
         })
             .then(data => {
             //        console.log('--- Unmount Local Folder', data);
@@ -33,7 +28,7 @@ export const useRuntimes = () => {
     // --------------------------------------------------------------------------
     return {
         mountLocalFolder,
-        unmountLocalFolder
+        unmountLocalFolder,
     };
 };
 export default useRuntimes;

package/lib/hooks/useScreenshot.js

@@ -3,13 +3,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import { createContext, useState, useContext } from 'react';
-import { LayoutScreenshot } from "./layouts";
+import { LayoutScreenshot } from './layouts';
 export const ScreenshotContext = createContext({
     closeScreenshot: () => { },
     displayScreenshot: (nextScreenshot) => { },
@@ -27,7 +22,7 @@ export const ScreenshotContextProvider = ScreenshotContext.Provider;
 export function ScreenshotProvider(props) {
     const { children, zIndex, disableDarken, screenshotSurface } = props;
     const defaultScreenshotSurface = {
-        position: "fixed",
+        position: 'fixed',
         top: 0,
         left: 0,
         width: '100%',
@@ -40,18 +35,18 @@ export function ScreenshotProvider(props) {
     };
     const [screenshot, setScreenshot] = useState({
         open: false,
-        render: (closeScreenshot) => _jsx(_Fragment, {})
+        render: (closeScreenshot) => _jsx(_Fragment, {}),
     });
     const displayScreenshot = (nextScreenshot) => {
         setScreenshot({
             open: true,
-            render: nextScreenshot
+            render: nextScreenshot,
         });
     };
     const closeScreenshot = () => {
         setScreenshot({
             open: false,
-            render: (closeScreenshot) => _jsx(_Fragment, {})
+            render: (closeScreenshot) => _jsx(_Fragment, {}),
         });
     };
     return (_jsxs(ScreenshotContextProvider, { value: { closeScreenshot, displayScreenshot }, children: [_jsx(LayoutScreenshot, {}), children, screenshot.open &&

package/lib/hooks/useToast.js

@@ -3,23 +3,18 @@ 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.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import React from 'react';
 import { toast } from 'react-toastify';
 import { Notification } from '@jupyterlab/apputils';
 import { Button } from '@primer/react';
 import { isInsideJupyterLab } from '../utils';
 import { DatalayerThemeProvider } from '../theme';
-const TOAST_POSITION = toast.POSITION.BOTTOM_RIGHT;
+const TOAST_POSITION = 'bottom-right';
 const displayType2Class = {
     accent: 'primary',
     link: 'invisible',
     warn: 'danger',
-    default: 'default'
+    default: 'default',
 };
 /**
  * Create a button with customized callback in a toast
@@ -53,11 +48,10 @@ export const useToast = () => {
         switch (options.variant) {
             case 'info': {
                 return insideJupyterLab
-                    ?
-                        Notification.info(message, {
-                            autoClose: autoClose ?? 5000,
-                            actions
-                        })
+                    ? Notification.info(message, {
+                        autoClose: autoClose ?? 5000,
+                        actions,
+                    })
                     : toast.info(({ closeToast }) => createContent(message, () => {
                         if (closeToast)
                             closeToast();
@@ -67,7 +61,7 @@ export const useToast = () => {
                 return insideJupyterLab
                     ? Notification.success(message, {
                         autoClose: autoClose ?? 5000,
-                        actions
+                        actions,
                     })
                     : toast.success(({ closeToast }) => createContent(message, () => {
                         if (closeToast)
@@ -78,7 +72,7 @@ export const useToast = () => {
                 return insideJupyterLab
                     ? Notification.warning(message, {
                         autoClose: autoClose ?? false,
-                        actions
+                        actions,
                     })
                     : toast.warning(({ closeToast }) => createContent(message, () => {
                         if (closeToast)
@@ -89,7 +83,7 @@ export const useToast = () => {
                 return insideJupyterLab
                     ? Notification.error(message, {
                         autoClose: autoClose ?? false,
-                        actions
+                        actions,
                     })
                     : toast.error(({ closeToast }) => createContent(message, () => {
                         if (closeToast)
@@ -104,10 +98,13 @@ export const useToast = () => {
             : toast.promise(promise, {
                 error: { render: options.error.message, ...options.error.options },
                 pending: options.pending.message,
-                success: { render: options.success.message, ...options.success.options }
+                success: {
+                    render: options.success.message,
+                    ...options.success.options,
+                },
             }, {
                 position: TOAST_POSITION,
-                ...options.pending.options
+                ...options.pending.options,
             });
     };
     return Object.freeze({
@@ -125,9 +122,12 @@ export const useToast = () => {
          * @param id Toast id
          */
         dismiss: (id) => {
-            insideJupyterLab
-                ? Notification.dismiss(id)
-                : toast.dismiss(id);
+            if (insideJupyterLab) {
+                Notification.dismiss(id);
+            }
+            else {
+                toast.dismiss(id);
+            }
         },
         /**
          * Track the progress of an asynchronous task
@@ -137,7 +137,7 @@ export const useToast = () => {
          * @param options Task progress options
          * @returns Toast id
          */
-        trackAsyncTask
+        trackAsyncTask,
     });
 };
 export default useToast;

package/lib/hooks/useUpload.js

@@ -2,15 +2,10 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
-import { useState } from "react";
-import axios from "axios";
+import { useState } from 'react';
+import axios from 'axios';
 // import useRun from "./useRun";
-import { useIAMStore } from "../state";
+import { useIAMStore } from '../state';
 // TODO reuse useRun hook.
 export const useUploadForm = (url) => {
     const [isSuccess, setIsSuccess] = useState(false);
@@ -27,21 +22,21 @@ export const useUploadForm = (url) => {
         setIsLoading(true);
         const { data } = await axios.post(url, formData, {
             headers: {
-                "Content-Type": "multipart/form-data",
-                Authorization: `Bearer ${token}`
+                'Content-Type': 'multipart/form-data',
+                Authorization: `Bearer ${token}`,
             },
-            onUploadProgress: (progressEvent) => {
+            onUploadProgress: progressEvent => {
                 const progress = (progressEvent.loaded / progressEvent.total) * 50;
                 setProgress(progress);
             },
-            onDownloadProgress: (progressEvent) => {
+            onDownloadProgress: progressEvent => {
                 const progress = 50 + (progressEvent.loaded / progressEvent.total) * 50;
                 setProgress(progress);
             },
         });
         setProgress(100);
-        await new Promise((resolve) => {
-            setTimeout(() => resolve("success"), 500);
+        await new Promise(resolve => {
+            setTimeout(() => resolve('success'), 500);
         });
         setIsSuccess(true);
         setProgress(0);

package/lib/hooks/useUser.js

@@ -3,7 +3,7 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { useIAMStore } from '../state';
-const LOGIN_HREF = "/login";
+const LOGIN_HREF = '/login';
 export const useUser = (role) => {
     const { user } = useIAMStore();
     if (role) {

package/lib/hooks/useVisibilityObserver.js

@@ -2,11 +2,6 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import { useState, useEffect } from 'react';
 export function useVisibilityObserver(navigationRef, children) {
     const [visibilityMap, setVisibilityMap] = useState({});

package/lib/hooks/useWindowSize.js

@@ -2,11 +2,6 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import { useState, useEffect } from 'react';
 export var BreakpointSize;
 (function (BreakpointSize) {
@@ -48,7 +43,6 @@ export function useWindowSize() {
                 currentBreakpointSize: breakpointSwitch(window.innerWidth),
             });
         }
-        // eslint-disable-next-line github/prefer-observers
         window.addEventListener('resize', handleResize);
         handleResize();
         return () => window.removeEventListener('resize', handleResize);

package/lib/i18n/Labels.js

@@ -2,9 +2,4 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 export const NO_RUNTIME_AVAILABLE_LABEL = 'The runtime you have requested is currently not available due to resource limitations. Please try again later...';

package/lib/i18n/index.js

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

package/lib/index.css

@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/lib/index.d.ts

@@ -1,3 +1,6 @@
-export * from "./hooks";
-export * from "./utils";
-export * from "./App";
+export * from './utils';
+export * from './state';
+export * from './collaboration';
+export * from './services';
+export * from './navigation';
+export * from './hooks';