@datalayer/core 0.0.1 → 0.0.2

package/lib/components/navbar/SubdomainNavBar.js

@@ -0,0 +1,240 @@
+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-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import React, { useState, useCallback, useRef, forwardRef, useMemo, useEffect } from 'react';
+import clsx from 'clsx';
+import { SearchIcon, XIcon, LinkExternalIcon } from '@primer/octicons-react';
+import { Button, FormControl, Text, TextInput, Label } from '@primer/react-brand';
+import { CircleYellowIcon } from '@datalayer/icons-react';
+import { NavigationVisbilityObserver } from './NavigationVisbilityObserver';
+import { useCoreStore } from "../../state";
+import { useOnClickOutside, useFocusTrap, useKeyboardEscape, useWindowSize, useNavigate } from "../../hooks";
+import { useRunStore } from "../../state";
+import { useId } from '../../hooks';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/subdomain-nav-bar/colors-with-modes.css';
+/** * Main Stylesheet (as a CSS Module) */
+import styles from './SubdomainNavBar.module.css';
+const testIds = {
+    root: 'SubdomainNavBar',
+    get innerContainer() {
+        return `${this.root}-inner-container`;
+    },
+    get menuButton() {
+        return `${this.root}-menuButton`;
+    },
+    get menuLinks() {
+        return `${this.root}-menuLinks`;
+    },
+    get liveRegion() {
+        return `${this.root}-search-live-region`;
+    },
+};
+function Root({ children, className, fixed = true, fullWidth = false, logoHref = 'https://datalayer.app', title, titleHref = '/', ...rest }) {
+    const navigate = useNavigate();
+    const runStore = useRunStore();
+    const { configuration } = useCoreStore();
+    const { isMedium } = useWindowSize();
+    const isDev = runStore.isDev;
+    const [menuHidden, setMenuHidden] = useState(true);
+    const [searchVisible, setSearchVisible] = useState(false);
+    const [startOfContentButtonFocused, setStartOfContentButtonFocused] = useState(false);
+    const mainElRef = useRef(null);
+    const startOfContentID = useId('dla-start-of-content');
+    const handleMobileMenuClick = () => setMenuHidden(!menuHidden);
+    const handleSearchVisibility = () => setSearchVisible(!searchVisible);
+    const focusTrapRef = useRef(null);
+    useEffect(() => {
+        const mainEl = document.querySelector('main');
+        if (mainEl) {
+            mainEl.id = mainEl.id || startOfContentID;
+            mainElRef.current = mainEl;
+        }
+    }, [startOfContentID]);
+    useFocusTrap({ containerRef: focusTrapRef, restoreFocusOnCleanUp: true, disabled: menuHidden });
+    useKeyboardEscape(() => {
+        setMenuHidden(true);
+    });
+    useEffect(() => {
+        if (isMedium) {
+            setMenuHidden(true);
+        }
+    }, [isMedium, menuHidden]);
+    useEffect(() => {
+        const newOverflowState = menuHidden ? 'auto' : 'hidden';
+        document.body.style.overflow = newOverflowState;
+    }, [menuHidden]);
+    const setStartOfContentButtonFocusedTrue = useCallback(() => setStartOfContentButtonFocused(true), []);
+    const setStartOfContentButtonFocusedFalse = useCallback(() => setStartOfContentButtonFocused(false), []);
+    const hasLinks = useMemo(() => React.Children.toArray(children).filter(child => React.isValidElement(child) && typeof child.type !== 'string' && child.type === Link), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []).length > 0;
+    const menuItems = useMemo(() => React.Children.toArray(children)
+        .map((child, index) => {
+        if (React.isValidElement(child) && typeof child.type !== 'string') {
+            if (child.type === Link) {
+                return React.cloneElement(child, {
+                    'data-navitemid': child.props.children,
+                    href: child.props.href,
+                    children: child.props.children,
+                    style: {
+                        [`--animation-order`]: index,
+                    },
+                });
+            }
+            return null;
+        }
+    })
+        .filter(Boolean), [children]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: clsx(styles['SubdomainNavBar-outer-container'], fixed && styles['SubdomainNavBar-outer-container--fixed']), children: [_jsx(Button, { as: "a", href: `#${mainElRef.current?.id || startOfContentID}`, variant: "primary", className: clsx(styles['SubdomainNavBar-skip-to-content'], !startOfContentButtonFocused && 'visually-hidden'), onFocus: setStartOfContentButtonFocusedTrue, onBlur: setStartOfContentButtonFocusedFalse, children: "Skip to content" }), _jsx("header", { className: clsx(styles['SubdomainNavBar'], className), "data-testid": testIds.root, ...rest, children: _jsxs("div", { ref: focusTrapRef, className: clsx(styles['SubdomainNavBar-inner-container'], searchVisible && styles['SubdomainNavBar-inner-container--search-open'], !fullWidth && styles['SubdomainNavBar-inner-container--centered']), "data-testid": testIds.innerContainer, children: [_jsx("nav", { "aria-label": "global breadcrumb", children: _jsxs("ol", { className: styles['SubdomainNavBar-title-area'], children: [_jsx("li", { children: _jsx("a", { href: "javascript: return false;", "aria-label": "Datalayer Home", className: styles['SubdomainNavBar-logo-mark'], onClick: e => navigate('/', e), children: _jsx("img", { src: configuration.brand.logoUrl, style: { height: 25 } }) }) }), isDev &&
+                                                _jsx("li", { children: _jsx(Label, { leadingVisual: _jsx(CircleYellowIcon, {}), color: "green-blue", children: "DEV" }) })] }) }), hasLinks && (_jsx("nav", { id: "menu-navigation", "aria-label": title, className: styles['SubdomainNavBar-primary-nav'], "data-testid": testIds.menuLinks, children: _jsx(NavigationVisbilityObserver, { className: clsx(styles['SubdomainNavBar-primary-nav-list--invisible']), children: menuItems }) })), _jsxs("div", { className: clsx(styles['SubdomainNavBar-secondary-nav']), children: [React.Children.toArray(children)
+                                            .map(child => {
+                                            if (React.isValidElement(child) && typeof child.type !== 'string') {
+                                                if (child.type === Search) {
+                                                    return React.cloneElement(child, {
+                                                        active: searchVisible,
+                                                        handlerFn: handleSearchVisibility,
+                                                        title,
+                                                    });
+                                                }
+                                                return null;
+                                            }
+                                        })
+                                            .filter(Boolean), hasLinks && (_jsxs("button", { "aria-expanded": !menuHidden, "aria-label": "Menu", "aria-controls": "menu-navigation", "aria-haspopup": "true", className: clsx(styles['SubdomainNavBar-menu-button'], styles['SubdomainNavBar-mobile-menu-button'], !menuHidden && styles['SubdomainNavBar-menu-button--close']), "data-testid": testIds.menuButton, onClick: handleMobileMenuClick, children: [_jsx("div", { className: clsx(styles['SubdomainNavBar-menu-button-bar']) }), _jsx("div", { className: clsx(styles['SubdomainNavBar-menu-button-bar']) }), _jsx("div", { className: clsx(styles['SubdomainNavBar-menu-button-bar']) })] })), isMedium && (_jsx("div", { className: clsx(styles['SubdomainNavBar-button-area'], styles['SubdomainNavBar-button-area--visible']), children: _jsxs("div", { className: styles['SubdomainNavBar-button-area-inner'], children: [React.Children.toArray(children)
+                                                        .map(child => {
+                                                        if (React.isValidElement(child) && typeof child.type !== 'string') {
+                                                            if (child.type === PrimaryAction) {
+                                                                return child;
+                                                            }
+                                                            return null;
+                                                        }
+                                                    })
+                                                        .filter(Boolean), React.Children.toArray(children)
+                                                        .map(child => {
+                                                        if (React.isValidElement(child) && typeof child.type !== 'string') {
+                                                            if (child.type === SecondaryAction) {
+                                                                return child;
+                                                            }
+                                                            return null;
+                                                        }
+                                                    })
+                                                        .filter(Boolean)] }) })), !isMedium && (_jsxs("div", { className: clsx(styles['SubdomainNavBar-menu-wrapper'], menuHidden && styles['SubdomainNavBar-menu-wrapper--close']), children: [_jsxs("div", { children: [title && titleHref && (_jsx(Text, { as: "p", children: _jsx("a", { href: titleHref, "aria-label": `${title} home`, className: clsx(styles['SubdomainNavBar-link'], styles['SubdomainNavBar-link--title']), children: title }) })), hasLinks && !menuHidden && (_jsx(NavigationVisbilityObserver, { showOnlyOnNarrow: true, className: clsx(styles['SubdomainNavBar-primary-nav-list--visible']), children: menuItems }))] }), _jsx("div", { className: clsx(styles['SubdomainNavBar-button-area'], styles['SubdomainNavBar-button-area--visible']), children: _jsxs("div", { className: styles['SubdomainNavBar-button-area-inner'], children: [React.Children.toArray(children)
+                                                                .map(child => {
+                                                                if (React.isValidElement(child) && typeof child.type !== 'string') {
+                                                                    if (child.type === PrimaryAction) {
+                                                                        return child;
+                                                                    }
+                                                                    return null;
+                                                                }
+                                                            })
+                                                                .filter(Boolean), React.Children.toArray(children)
+                                                                .map(child => {
+                                                                if (React.isValidElement(child) && typeof child.type !== 'string') {
+                                                                    if (child.type === SecondaryAction) {
+                                                                        return child;
+                                                                    }
+                                                                    return null;
+                                                                }
+                                                            })
+                                                                .filter(Boolean)] }) })] }))] })] }) })] }), !mainElRef.current && _jsx("div", { id: `${startOfContentID}`, tabIndex: -1 })] }));
+}
+function Link({ href, className, children, isExternal, target, ...rest }) {
+    return (_jsx("li", { className: clsx(styles['SubdomainNavBar-primary-nav-list-item'], className), ...rest, children: _jsxs("a", { href: href, target: target ?? "_self", className: clsx(styles['SubdomainNavBar-link']), children: [_jsx("span", { className: clsx(styles['SubdomainNavBar-link-text']), children: children }), isExternal && _jsx(LinkExternalIcon, { size: 16, "aria-label": "External link" })] }) }));
+}
+const _SearchInternal = ({ active, title, searchResults, searchTerm, handlerFn, onSubmit, onChange }, ref) => {
+    const dialogRef = useRef(null);
+    useFocusTrap({ containerRef: dialogRef, restoreFocusOnCleanUp: true, disabled: !active });
+    useOnClickOutside(dialogRef, handlerFn);
+    const [activeDescendant, setActiveDescendant] = useState(-1);
+    const [listboxActive, setListboxActive] = useState();
+    const [liveRegion, setLiveRegion] = useState(false);
+    const handleClose = useCallback((event = null) => {
+        if (handlerFn)
+            handlerFn(event);
+        setActiveDescendant(-1);
+    }, [handlerFn]);
+    useOnClickOutside(dialogRef, handleClose);
+    useKeyboardEscape(() => {
+        // Close the dialog if combobox is already collapsed
+        if (!listboxActive && active) {
+            handleClose();
+            return false;
+        }
+        setListboxActive(false);
+        setActiveDescendant(-1);
+    });
+    const handleAriaFocus = useCallback(event => {
+        const supportedKeys = ['ArrowDown', 'ArrowUp', 'Escape', 'Enter'];
+        const currentCount = activeDescendant;
+        const searchResultsLength = searchResults ? searchResults.length : 0;
+        const dialog = dialogRef.current;
+        let count;
+        // Prevent any other keys outside of supported from being prevented.
+        // Only prevent "Enter" if activeDescendant is greater than -1.
+        if (!supportedKeys.includes(event.key) || (event.key === 'Enter' && activeDescendant === -1) || !dialog) {
+            return false;
+        }
+        event.preventDefault();
+        if (event.key === 'ArrowDown') {
+            // If count reaches last search result item, reset to -1
+            count = currentCount < searchResultsLength - 1 ? currentCount + 1 : -1;
+            setActiveDescendant(count);
+        }
+        else if (event.key === 'ArrowUp') {
+            // Reset to last search result item if
+            count = currentCount === -1 ? searchResultsLength - 1 : currentCount - 1;
+            setActiveDescendant(count);
+        }
+        if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
+            dialog.querySelector(`#subdomainnavbar-search-result-${count}`)?.scrollIntoView();
+        }
+        if (event.key === 'Enter') {
+            const link = dialog.querySelector(`#subdomainnavbar-search-result-${activeDescendant} a`);
+            link.click();
+        }
+    }, [searchResults, activeDescendant]);
+    const searchLiveRegion = useCallback(() => {
+        // Adding a non-breaking space and then removing it will force screen readers to announce the text,
+        // as it thinks that there was a change within the live region.
+        setLiveRegion(true);
+        setTimeout(() => {
+            if (active)
+                setLiveRegion(false);
+        }, 200);
+    }, [active]);
+    useEffect(() => {
+        // We want to set "listboxActive" when search results are present,
+        // or the user pressed "Escape". We watch for "searchTerm", as we -
+        // want the listbox to become active if they pressed "Escape", and -
+        // adjusted their existing value.
+        const search = searchResults && searchResults.length ? true : false;
+        setListboxActive(search);
+        searchLiveRegion();
+    }, [searchResults, searchTerm, searchLiveRegion]);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles['SubdomainNavBar-search-trigger']), children: _jsx("button", { "aria-label": "search", className: styles['SubdomainNavBar-search-button'], onClick: handlerFn, "data-testid": "toggle-search", children: _jsx(SearchIcon, {}) }) }), active && (_jsxs("div", { ref: dialogRef, role: "dialog", "aria-label": `Search ${title}`, "aria-modal": "true", tabIndex: -1, className: clsx(styles['SubdomainNavBar-search-dialog']), children: [_jsxs("div", { className: clsx(styles['SubdomainNavBar-search-dialog-control-area']), children: [_jsx("form", { className: clsx(styles['SubdomainNavBar-search-form']), onSubmit: onSubmit, role: "search", children: _jsxs(FormControl, { fullWidth: true, size: "medium", children: [_jsx(FormControl.Label, { visuallyHidden: true, children: "Search" }), _jsx(TextInput, { ref: ref, className: clsx(styles['SubdomainNavBar-search-text-input']), name: "search", role: "combobox", "aria-expanded": listboxActive, "aria-controls": "listbox-search-results", placeholder: `Search ${title}`, onChange: onChange, defaultValue: searchTerm, invisible: true, leadingVisual: _jsx(SearchIcon, { size: 16 }), "aria-activedescendant": activeDescendant === -1 ? undefined : `subdomainnavbar-search-result-${activeDescendant}`, onKeyDown: handleAriaFocus })] }) }), _jsx("button", { "aria-label": "Close", className: clsx(styles['SubdomainNavBar-menu-button'], styles['SubdomainNavBar-menu-button--close']), onClick: handleClose, children: _jsx(XIcon, { size: 24 }) })] }), _jsxs("div", { id: "listbox-search-results", children: [listboxActive && (_jsxs("div", { className: clsx(styles['SubdomainNavBar-search-results-container']), children: [_jsxs(Text, { id: "subdomainnavbar-search-results-heading", className: styles['SubdomainNavBar-search-results-heading'], children: ["Results for \u201C", searchTerm, "\u201D"] }), _jsx("ul", { role: "listbox", tabIndex: 0, "aria-labelledby": "subdomainnavbar-search-results-heading", className: clsx(styles['SubdomainNavBar-search-results']), children: searchResults?.map((result, index) => (_jsxs("li", { id: `subdomainnavbar-search-result-${index}`, className: styles['SubdomainNavBar-search-result-item'], role: "option", "aria-selected": index === activeDescendant, children: [_jsx("div", { className: styles['SubdomainNavBar-search-result-item-container'], children: _jsx("a", { href: result.url, children: result.title }) }), _jsx(Text, { as: "p", size: "200", id: `subdomainnavbar-search-result-item-desc${index}`, className: styles['SubdomainNavBar-search-result-item-desc'], children: result.description }), _jsxs("div", { children: [_jsx(Text, { size: "100", className: styles['SubdomainNavBar-search-result-item-desc'], children: result.date }), result.category && (_jsxs(_Fragment, { children: [_jsxs(Text, { size: "100", className: styles['SubdomainNavBar-search-result-item-desc'], children: [' ', "\u2022", ' '] }), _jsx(Text, { size: "100", className: styles['SubdomainNavBar-search-result-item-desc'], children: result.category })] }))] })] }, `${result.title}-${index}`))) })] })), _jsxs("div", { "aria-live": "polite", "aria-atomic": "true", "data-testid": testIds.liveRegion, className: "visually-hidden", children: [`${searchResults?.length} suggestions.`, liveRegion && _jsx("span", { children: "\u00A0" })] })] })] }))] }));
+};
+const Search = forwardRef(_SearchInternal);
+function PrimaryAction({ children, ...rest }) {
+    const { hasArrow = false, size = "small" } = rest;
+    return (_jsx(Button, { as: "a", href: "javascript: return false;", className: clsx(styles['SubdomainNavBar-cta-button']), variant: "primary", size: size, hasArrow: hasArrow, ...rest, children: children }));
+}
+function SecondaryAction({ children, ...rest }) {
+    const { hasArrow = false, size = "small" } = rest;
+    return (_jsx(Button, { as: "a", href: "javascript: return false;", className: clsx(styles['SubdomainNavBar-cta-button'], styles['SubdomainNavBar-cta-button--secondary']), size: size, hasArrow: hasArrow, ...rest, children: children }));
+}
+export const SubdomainNavBar = Object.assign(Root, {
+    Link,
+    Search,
+    PrimaryAction,
+    SecondaryAction,
+    testIds,
+});

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

@@ -0,0 +1,2 @@
+export * from './NavigationVisbilityObserver';
+export * from './SubdomainNavBar';

package/lib/components/navbar/index.js

@@ -0,0 +1,11 @@
+/*
+ * 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 './NavigationVisbilityObserver';
+export * from './SubdomainNavBar';

package/lib/components/nbgrader/NbGradesDetails.d.ts

@@ -0,0 +1,5 @@
+import { IStudentItem } from "../../models";
+export declare const NbGradesDetails: (props: {
+    studentItem?: IStudentItem;
+}) => import("react/jsx-runtime").JSX.Element;
+export default NbGradesDetails;

package/lib/components/nbgrader/NbGradesDetails.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { Heading, Text } from "@primer/react";
+import { Box } from "@datalayer/primer-addons";
+export const NbGradesDetails = (props) => {
+    const { studentItem } = props;
+    return (studentItem && studentItem?.nbgrades ?
+        _jsxs(Box, { children: [_jsx(Box, { children: _jsx(Heading, { sx: { fontSize: 1 }, children: "Grades" }) }), _jsx(Box, { mt: 3, children: studentItem?.nbgrades.map(nb => {
+                        return _jsx(Box, { children: _jsxs(Text, { sx: { fontSize: "small" }, children: [nb.grade_id_s, ": ", nb.score_f] }) });
+                    }) }), _jsx(Box, { mt: 3, children: _jsx(Heading, { sx: { fontSize: 1 }, children: "Total" }) }), _jsxs(Box, { mt: 3, children: [studentItem?.nbgradesTotalScore, " / ", studentItem?.nbgradesTotalPoints] })] })
+        :
+            _jsxs(Box, { children: [_jsx(Box, { children: _jsx(Heading, { sx: { fontSize: 1 }, children: "Grades" }) }), _jsx(Box, { mt: 3, children: "Please grade your assignment." })] }));
+};
+export default NbGradesDetails;

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

@@ -0,0 +1 @@
+export * from './NbGradesDetails';

package/lib/components/nbgrader/index.js

@@ -0,0 +1,10 @@
+/*
+ * 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 './NbGradesDetails';

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

@@ -0,0 +1,12 @@
+import { BoxPanel } from '@lumino/widgets';
+type IJupyterNotebooProps = {
+    boxPanel: BoxPanel;
+    height?: string;
+};
+export declare const JupyterNotebook: {
+    (props: IJupyterNotebooProps): import("react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        height: string;
+    };
+};
+export default JupyterNotebook;

package/lib/components/notebooks/JupyterNotebook.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { Box } from "@datalayer/primer-addons";
+import { Lumino } from '@datalayer/jupyter-react';
+export const JupyterNotebook = (props) => {
+    const { boxPanel, height } = props;
+    return (_jsx("div", { style: { position: 'relative' }, children: _jsx(Box, { className: "jp-LabShell", sx: {
+                position: 'relative',
+                '& .dla-Jupyter-Notebook': {
+                    height,
+                    maxHeight: 1000,
+                    width: '100%'
+                },
+                '& .jp-MainAreaWidget': {
+                    width: '100%',
+                    height,
+                },
+                '& .jp-Toolbar': {
+                    width: '100% !important'
+                },
+                '& .jp-NotebookPanel-notebook': {
+                    width: '100% !important',
+                    height,
+                },
+                '& .lm-mod-hidden': {
+                    display: 'unset !important'
+                }
+            }, children: _jsx(Lumino, { children: boxPanel }) }) }));
+};
+JupyterNotebook.defaultProps = {
+    height: '100%',
+};
+export default JupyterNotebook;

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

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

package/lib/components/notebooks/JupyterNotebookToolbar.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { CircleCurrentColorIcon, CircleGreenIcon, CircleOrangeIcon } from '@datalayer/icons-react';
+import { Text } from '@primer/react';
+import { Box } from "@datalayer/primer-addons";
+import { Sparklines, SparklinesBars, SparklinesLine, SparklinesReferenceLine } from 'react-sparklines';
+import { DatalayerThemeProvider } from '../../theme';
+function boxMullerRandom() {
+    let phase = false;
+    let x1;
+    let x2;
+    let w;
+    return (function () {
+        if ((phase = !phase)) {
+            do {
+                x1 = 2.0 * Math.random() - 1.0;
+                x2 = 2.0 * Math.random() - 1.0;
+                w = x1 * x1 + x2 * x2;
+            } while (w >= 1.0);
+            w = Math.sqrt((-2.0 * Math.log(w)) / w);
+            return x1 * w;
+        }
+        else {
+            return x2 * w;
+        }
+    })();
+}
+function randomData(n = 30) {
+    return Array.apply(0, Array(n)).map(boxMullerRandom);
+}
+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" }) }) })] }) }));
+};
+export default JupyterNotebookToolbar;

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

@@ -0,0 +1,2 @@
+export * from './JupyterNotebook';
+export * from './JupyterNotebookToolbar';

package/lib/components/notebooks/index.js

@@ -0,0 +1,11 @@
+/*
+ * 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 './JupyterNotebook';
+export * from './JupyterNotebookToolbar';

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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer 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

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

package/lib/components/primer/Styles.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { 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

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

package/lib/components/primer/index.js

@@ -0,0 +1,11 @@
+/*
+ * 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 './Helper';
+export * from './Portals';

package/lib/components/progress/ConsumptionBar.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Consumption progress bar properties
+ */
+export interface IConsumptionBarProps {
+    /**
+     * Credits burning rate per second
+     */
+    burningRate: number;
+    /**
+     * Consumption start timestamp
+     */
+    startedAt: number;
+    /**
+     * Consumption expiration timestamp
+     */
+    expiredAt?: number;
+    /**
+     * Progress bar refresh interval in milliseconds
+     */
+    refreshInterval?: number;
+    /**
+     * Component CSS styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Callback on progress bar click event
+     */
+    onClick?: () => void;
+    /**
+     * Callback on progress update.
+     *
+     * Progress is a percentage between 0 and 100.
+     * Duration is the kernel max duration in seconds.
+     */
+    onUpdate?: (progress: number, duration: number) => void;
+}
+/**
+ * Consumption progress bar
+ */
+export declare function ConsumptionBar(props: IConsumptionBarProps): JSX.Element;