@datalayer/core 0.0.3 → 0.0.5

package/lib/components/students/StudentItemStatus.js

@@ -3,9 +3,9 @@ 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 { useMemo } from "react";
-import { useTheme, Tooltip, Button } from "@primer/react";
-import { Box } from "@datalayer/primer-addons";
+import { useMemo } from 'react';
+import { useTheme, Tooltip, Button } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 const getExercisePoints = (studentItem) => {
     if (studentItem && studentItem.points) {
         return studentItem.points;
@@ -19,25 +19,44 @@ export const StudentItemStatus = (props) => {
     const nokColor = useMemo(() => theme?.colorSchemes.light.colors.severe.muted, []);
     if (student && studentItem) {
         switch (studentItem.itemType) {
-            case ('dataset'): {
+            case 'dataset': {
                 const datasetColor = studentItem?.completed ? okColor : nokColor;
-                return _jsx(Box, { sx: { backgroundColor: datasetColor, width: '14px', height: '14px', borderRadius: 3 }, ml: 1 });
+                return (_jsx(Box, { sx: {
+                        backgroundColor: datasetColor,
+                        width: '14px',
+                        height: '14px',
+                        borderRadius: 3,
+                    }, ml: 1 }));
             }
-            case ('lesson'): {
+            case 'lesson': {
                 const lessonColor = studentItem?.completed ? okColor : nokColor;
-                return _jsx(Box, { sx: { backgroundColor: lessonColor, width: '14px', height: '14px', borderRadius: 3 }, ml: 1 });
+                return (_jsx(Box, { sx: {
+                        backgroundColor: lessonColor,
+                        width: '14px',
+                        height: '14px',
+                        borderRadius: 3,
+                    }, ml: 1 }));
             }
-            case ('exercise'): {
+            case 'exercise': {
                 const exerciseColor = getExercisePoints(studentItem) > 0 ? okColor : nokColor;
-                return _jsx(Box, { sx: { backgroundColor: exerciseColor, width: '14px', height: '14px', borderRadius: 3 }, ml: 1 });
+                return (_jsx(Box, { sx: {
+                        backgroundColor: exerciseColor,
+                        width: '14px',
+                        height: '14px',
+                        borderRadius: 3,
+                    }, ml: 1 }));
             }
-            case ('assignment'):
-                return (_jsxs(Box, { display: "flex", children: [(studentItem.nbgradesTotalScore !== undefined) && (studentItem.nbgradesTotalPoints !== undefined) &&
-                            _jsxs(Box, { children: [studentItem.nbgradesTotalScore, " / ", studentItem.nbgradesTotalPoints] }), studentItem.nbgrades &&
-                            _jsx(Box, { display: "flex", ml: 3, children: studentItem?.nbgrades.map(grade => {
-                                    const gradeColor = grade.score_f === grade.points_f ? okColor : nokColor;
-                                    return (_jsx(Tooltip, { text: grade.grade_id_s, children: _jsx(Button, { variant: "invisible", children: _jsx(Box, { sx: { backgroundColor: gradeColor, width: '14px', height: '14px', borderRadius: 3 }, ml: 1 }) }) }));
-                                }) })] }));
+            case 'assignment':
+                return (_jsxs(Box, { display: "flex", children: [studentItem.nbgradesTotalScore !== undefined &&
+                            studentItem.nbgradesTotalPoints !== undefined && (_jsxs(Box, { children: [studentItem.nbgradesTotalScore, " /", ' ', studentItem.nbgradesTotalPoints] })), studentItem.nbgrades && (_jsx(Box, { display: "flex", ml: 3, children: studentItem?.nbgrades.map(grade => {
+                                const gradeColor = grade.score_f === grade.points_f ? okColor : nokColor;
+                                return (_jsx(Tooltip, { text: grade.grade_id_s, children: _jsx(Button, { variant: "invisible", children: _jsx(Box, { sx: {
+                                                backgroundColor: gradeColor,
+                                                width: '14px',
+                                                height: '14px',
+                                                borderRadius: 3,
+                                            }, ml: 1 }) }) }));
+                            }) }))] }));
             default:
                 return _jsx(_Fragment, {});
         }

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

@@ -65,7 +65,7 @@ export declare const SubNav: React.NamedExoticComponent<{
 } & BaseProps<HTMLElement> & {
     children?: ReactNode | undefined;
 }> & {
-    readonly type: ({ id, children, className, "data-testid": testId, fullWidth, hasShadow }: SubNavProps) => import("react/jsx-runtime").JSX.Element;
+    readonly type: ({ id, children, className, "data-testid": testId, fullWidth, hasShadow, }: SubNavProps) => import("react/jsx-runtime").JSX.Element;
 } & {
     Heading: ({ href, children, className, "data-testid": testID, ...props }: SubNavHeadingProps) => import("react/jsx-runtime").JSX.Element;
     Link: React.ForwardRefExoticComponent<Omit<SubNavLinkProps, "ref"> & React.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;

package/lib/components/subnav/SubNav.js

@@ -5,11 +5,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import React, { Children, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { createPortal } from 'react-dom';
-import { Button, ButtonGroup, Text, ThemeProvider, useWindowSize } from '@primer/react-brand';
+import { Button, ButtonGroup, Text, ThemeProvider, useWindowSize, } from '@primer/react-brand';
 import { ChevronDownIcon, ChevronUpIcon } from '@primer/octicons-react';
 import { default as clsx } from 'clsx';
 import { useId } from '../../hooks';
-import { useKeyboardEscape, useOnClickOutside, useProvidedRefOrCreate, useContainsFocus } from '../../hooks';
+import { useKeyboardEscape, useOnClickOutside, useProvidedRefOrCreate, useContainsFocus, } from '../../hooks';
 /**
  * Design tokens
  */
@@ -69,7 +69,7 @@ function SubNavProvider({ children }) {
     }, []);
     return (_jsxs(SubNavContext.Provider, { value: value, children: [children, _jsx("div", { className: styles['SubNav__anchor-menu-outer-container'], ref: anchoredNavOuterPortalRef, children: _jsx("div", { className: clsx(styles['SubNav__anchor-menu-container']), ref: anchoredNavPortalRef }) })] }));
 }
-const _SubNavRoot = memo(({ id, children, className, 'data-testid': testId, fullWidth, hasShadow }) => {
+const _SubNavRoot = memo(({ id, children, className, 'data-testid': testId, fullWidth, hasShadow, }) => {
     const rootRef = React.useRef(null);
     const navRef = React.useRef(null);
     const overlayRef = React.useRef(null);
@@ -125,12 +125,16 @@ const _SubNavRoot = memo(({ id, children, className, 'data-testid': testId, full
                 if (subMenu?.props?.variant === 'anchor') {
                     acc.links.push(React.cloneElement(child, {
                         children: [link],
-                        onClick: child.props['aria-current'] ? closeMenuCallback : child.props.onClick,
+                        onClick: child.props['aria-current']
+                            ? closeMenuCallback
+                            : child.props.onClick,
                     }));
                 }
                 else {
                     acc.links.push(React.cloneElement(child, {
-                        onClick: child.props['aria-current'] ? closeMenuCallback : child.props.onClick,
+                        onClick: child.props['aria-current']
+                            ? closeMenuCallback
+                            : child.props.onClick,
                     }));
                 }
             }
@@ -140,13 +144,16 @@ const _SubNavRoot = memo(({ id, children, className, 'data-testid': testId, full
         }
         return acc;
     }, { heading: undefined, links: [], action: undefined });
-    const activeLinklabel = typeof activeLink?.props.children === 'string' ? activeLink.props.children : activeLink?.props.children[0];
+    const activeLinklabel = typeof activeLink?.props.children === 'string'
+        ? activeLink.props.children
+        : activeLink?.props.children[0];
     // needed to prevent rendering of anchor subnav inside the narrow <Button variant="invisible"> element
-    const MaybeSubNav = activeLink?.props.children?.[1]?.props?.variant === 'anchor' && activeLink.props.children?.[1];
-    return (_jsx("div", { className: clsx(styles['SubNav__container'], hasAnchoredNav && styles['SubNav__container--with-anchor-nav']), children: _jsx(SubNavProvider, { children: _jsx("nav", { ref: navRef, id: id, className: clsx(styles.SubNav, isOpenAtNarrow && styles['SubNav--open'], hasShadow && styles['SubNav--has-shadow'], fullWidth && styles['SubNav--full-width'], className), "data-testid": testId || testIds.root, children: _jsxs("div", { ref: rootRef, className: styles['SubNav--header-container-outer'], children: [_jsxs("div", { className: styles['SubNav__header-container'], children: [HeadingChild && _jsx("div", { className: styles['SubNav__heading-container'], children: HeadingChild }), !isLarge && (_jsxs("button", { className: clsx(styles['SubNav__overlay-toggle'], isOpenAtNarrow && styles['SubNav__overlay-toggle--open']), "data-testid": testIds.button, onClick: isOpenAtNarrow ? closeMenuCallback : handleMenuToggle, "aria-expanded": isOpenAtNarrow ? 'true' : 'false', "aria-controls": idForLinkContainer, children: [activeLinklabel && _jsx("span", { className: "visually-hidden", children: "Navigation menu. Current page: " }), _jsxs("span", { className: clsx(styles['SubNav__overlay-toggle-content'], !activeLinklabel && styles['SubNav__overlay-toggle-content--end']), children: [activeLinklabel && (_jsx(Text, { as: "span", size: "200", children: activeLinklabel })), isOpenAtNarrow ? (_jsx(ChevronUpIcon, { className: styles['SubNav__overlay-toggle-icon'], size: 24 })) : (_jsx(ChevronDownIcon, { className: styles['SubNav__overlay-toggle-icon'], size: 24 }))] })] })), MaybeSubNav && MaybeSubNav] }), LinkChildren.length && (_jsxs("ul", { ref: overlayRef, id: idForLinkContainer, className: clsx(styles['SubNav__links-overlay'], isOpenAtNarrow && styles['SubNav__links-overlay--open']), "data-testid": testIds.overlay, children: [ActionChild ?
-                                    _jsx("li", { className: styles['SubNav__action-container'], children: ActionChild })
-                                    :
-                                        _jsx("li", { className: styles['SubNav__action-container'] }), LinkChildren, _jsx(ButtonGroup, { buttonSize: "small", children: _jsx(Button, { href: "#", onClick: (e) => { window.location.assign("https://datalayer.app"); }, hasArrow: true, variant: "subtle", children: "Login" }) })] }))] }) }) }) }));
+    const MaybeSubNav = activeLink?.props.children?.[1]?.props?.variant === 'anchor' &&
+        activeLink.props.children?.[1];
+    return (_jsx("div", { className: clsx(styles['SubNav__container'], hasAnchoredNav && styles['SubNav__container--with-anchor-nav']), children: _jsx(SubNavProvider, { children: _jsx("nav", { ref: navRef, id: id, className: clsx(styles.SubNav, isOpenAtNarrow && styles['SubNav--open'], hasShadow && styles['SubNav--has-shadow'], fullWidth && styles['SubNav--full-width'], className), "data-testid": testId || testIds.root, children: _jsxs("div", { ref: rootRef, className: styles['SubNav--header-container-outer'], children: [_jsxs("div", { className: styles['SubNav__header-container'], children: [HeadingChild && (_jsx("div", { className: styles['SubNav__heading-container'], children: HeadingChild })), !isLarge && (_jsxs("button", { className: clsx(styles['SubNav__overlay-toggle'], isOpenAtNarrow && styles['SubNav__overlay-toggle--open']), "data-testid": testIds.button, onClick: isOpenAtNarrow ? closeMenuCallback : handleMenuToggle, "aria-expanded": isOpenAtNarrow ? 'true' : 'false', "aria-controls": idForLinkContainer, children: [activeLinklabel && (_jsxs("span", { className: "visually-hidden", children: ["Navigation menu. Current page:", ' '] })), _jsxs("span", { className: clsx(styles['SubNav__overlay-toggle-content'], !activeLinklabel &&
+                                                styles['SubNav__overlay-toggle-content--end']), children: [activeLinklabel && (_jsx(Text, { as: "span", size: "200", children: activeLinklabel })), isOpenAtNarrow ? (_jsx(ChevronUpIcon, { className: styles['SubNav__overlay-toggle-icon'], size: 24 })) : (_jsx(ChevronDownIcon, { className: styles['SubNav__overlay-toggle-icon'], size: 24 }))] })] })), MaybeSubNav && MaybeSubNav] }), LinkChildren.length && (_jsxs("ul", { ref: overlayRef, id: idForLinkContainer, className: clsx(styles['SubNav__links-overlay'], isOpenAtNarrow && styles['SubNav__links-overlay--open']), "data-testid": testIds.overlay, children: [ActionChild ? (_jsx("li", { className: styles['SubNav__action-container'], children: ActionChild })) : (_jsx("li", { className: styles['SubNav__action-container'] })), LinkChildren, _jsx(ButtonGroup, { buttonSize: "small", children: _jsx(Button, { href: "#", onClick: e => {
+                                            window.location.assign('https://datalayer.app');
+                                        }, hasArrow: true, variant: "subtle", children: "Login" }) })] }))] }) }) }) }));
 });
 const SubNavHeading = ({ href, children, className, 'data-testid': testID, ...props }) => {
     return (_jsx("a", { href: href, className: clsx(styles['SubNav__heading'], className), "data-testid": testIds.heading || testID, ...props, children: children }));
@@ -170,7 +177,9 @@ const SubNavLinkWithSubmenu = forwardRef(({ children, href, 'aria-current': aria
          * onFocus and onBlur need to be defined to keep the jsx-a11y/mouse-events-have-key-events
          * eslint rule happy. The focus/blur behaviour is handled by useContainsFocus
          */
-        onFocus: () => null, onBlur: () => null, children: [_jsx("a", { href: href, className: clsx(styles['SubNav__link'], ariaCurrent && styles['SubNav__link--active'], className), "aria-current": ariaCurrent, ...props, children: _jsx(Text, { as: "span", size: "200", weight: "semibold", className: styles['SubNav__link-label'], variant: ariaCurrent === 'page' || variant === 'default' ? 'default' : 'muted', children: label }) }), isLarge && (_jsx("button", { className: styles['SubNav__sub-menu-toggle'], onClick: handleOnClick, "aria-expanded": isExpanded ? 'true' : 'false', "aria-controls": submenuId, "aria-label": `${isExpanded ? 'Close' : 'Open'} submenu`, children: _jsx(ChevronDownIcon, { className: styles['SubNav__sub-menu-icon'], size: 16 }) })), _jsx("div", { id: submenuId, className: styles['SubNav__sub-menu-children'], children: SubMenuChildren })] }));
+        onFocus: () => null, onBlur: () => null, children: [_jsx("a", { href: href, className: clsx(styles['SubNav__link'], ariaCurrent && styles['SubNav__link--active'], className), "aria-current": ariaCurrent, ...props, children: _jsx(Text, { as: "span", size: "200", weight: "semibold", className: styles['SubNav__link-label'], variant: ariaCurrent === 'page' || variant === 'default'
+                        ? 'default'
+                        : 'muted', children: label }) }), isLarge && (_jsx("button", { className: styles['SubNav__sub-menu-toggle'], onClick: handleOnClick, "aria-expanded": isExpanded ? 'true' : 'false', "aria-controls": submenuId, "aria-label": `${isExpanded ? 'Close' : 'Open'} submenu`, children: _jsx(ChevronDownIcon, { className: styles['SubNav__sub-menu-icon'], size: 16 }) })), _jsx("div", { id: submenuId, className: styles['SubNav__sub-menu-children'], children: SubMenuChildren })] }));
 });
 const SubNavLink = forwardRef((props, ref) => {
     const [isInView, setIsInView] = useState(false);
@@ -188,8 +197,12 @@ const SubNavLink = forwardRef((props, ref) => {
         if (!target)
             return;
         const topOfWindow = '0px 0px -100%';
-        const observerParams = { threshold: 0, root: null, rootMargin: topOfWindow };
-        const handleIntersectionUpdate = ([entry]) => {
+        const observerParams = {
+            threshold: 0,
+            root: null,
+            rootMargin: topOfWindow,
+        };
+        const handleIntersectionUpdate = ([entry,]) => {
             setIsInView(entry.isIntersecting);
         };
         const observer = new IntersectionObserver(handleIntersectionUpdate, observerParams);
@@ -205,7 +218,9 @@ const SubNavLink = forwardRef((props, ref) => {
         return (_jsx("li", { children: _jsx(SubNavLinkWithSubmenu, { ...props, ref: ref, _subMenuVariant: isAnchorVariantSubMenu ? 'anchor' : undefined }) }));
     }
     const { children, href, 'aria-current': ariaCurrent, 'data-testid': testId, variant, className, ...rest } = props;
-    return (_jsx("li", { children: _jsx("a", { href: href, className: clsx(styles['SubNav__link'], ariaCurrent && styles['SubNav__link--active'], isInView && styles['SubNav__link--is-in-view'], className), "aria-current": ariaCurrent, "data-testid": testId || testIds.link, ref: ref, ...rest, children: _jsx(Text, { as: "span", size: "100", weight: "semibold", className: styles['SubNav__link-label'], variant: ariaCurrent === 'page' || variant === 'default' ? 'default' : 'muted', children: children }) }) }));
+    return (_jsx("li", { children: _jsx("a", { href: href, className: clsx(styles['SubNav__link'], ariaCurrent && styles['SubNav__link--active'], isInView && styles['SubNav__link--is-in-view'], className), "aria-current": ariaCurrent, "data-testid": testId || testIds.link, ref: ref, ...rest, children: _jsx(Text, { as: "span", size: "100", weight: "semibold", className: styles['SubNav__link-label'], variant: ariaCurrent === 'page' || variant === 'default'
+                    ? 'default'
+                    : 'muted', children: children }) }) }));
 });
 function SubMenu({ children, className, variant = 'dropdown', ...props }) {
     const context = React.useContext(SubNavContext);

package/lib/components/subnav/SubNav.module.css

@@ -104,8 +104,11 @@
   opacity: 0;
   background-color: transparent;
   transform: translateY(var(--brand-animation-variant-slideInDown-distance));
-  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
-    background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+  transition:
+    opacity var(--brand-animation-duration-default)
+      var(--brand-animation-easing-default),
+    background-color var(--brand-animation-duration-default)
+      var(--brand-animation-easing-default);
 }
 
 .SubNav__anchor-menu-outer-container--stuck .SubNav__anchor-menu-container {
@@ -116,7 +119,8 @@
 
 .SubNav__anchor-menu-outer-container {
   height: 0;
-  transition: height var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+  transition: height var(--brand-animation-duration-default)
+    var(--brand-animation-easing-default);
 }
 
 .SubNav__anchor-menu-outer-container--stuck {
@@ -127,9 +131,13 @@
   opacity: 0;
   visibility: hidden;
   transform: translateY(var(--brand-animation-variant-slideInDown-distance));
-  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
-    height var(--brand-animation-duration-default) var(--brand-animation-easing-default),
-    transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+  transition:
+    opacity var(--brand-animation-duration-default)
+      var(--brand-animation-easing-default),
+    height var(--brand-animation-duration-default)
+      var(--brand-animation-easing-default),
+    transform var(--brand-animation-duration-default)
+      var(--brand-animation-easing-default);
 }
 
 .SubNav__anchor-menu-outer-container--stuck .SubNav__sub-menu--anchor {
@@ -159,7 +167,8 @@
 .SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label::after,
 .SubNav__link:hover .SubNav__link-label::after,
 .SubNav__link:focus-visible .SubNav__link-label::after,
-.SubNav__link[aria-current]:not([aria-current='false']) .SubNav__link-label::after {
+.SubNav__link[aria-current]:not([aria-current='false'])
+  .SubNav__link-label::after {
   opacity: 1;
   transform: scale(0.8, 1);
 }
@@ -177,7 +186,9 @@
 }
 
 .SubNav__link:focus-visible .SubNav__link-label::after,
-.SubNav__sub-menu--anchor .SubNav__link--is-in-view:focus-visible .SubNav__link-label::after {
+.SubNav__sub-menu--anchor
+  .SubNav__link--is-in-view:focus-visible
+  .SubNav__link-label::after {
   opacity: 0;
 }
 
@@ -196,19 +207,23 @@
   height: 2px;
   border-width: 2px;
   border-bottom: var(--base-size-2) solid var(--brand-color-text-muted);
-  transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast),
+  transition:
+    opacity var(--brand-animation-duration-fast),
+    transform var(--brand-animation-duration-fast),
     border-color var(--brand-animation-duration-fast);
   opacity: 1;
   transform: scale(0);
   transform-origin: center;
 }
 
-.SubNav__link[aria-current]:not([aria-current='false']) .SubNav__link-label::after {
+.SubNav__link[aria-current]:not([aria-current='false'])
+  .SubNav__link-label::after {
   border-color: var(--brand-color-text-default);
 }
 
 .SubNav__link:hover .SubNav__link-label {
-  transition: color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
+  transition: color var(--brand-animation-duration-fast)
+    var(--brand-animation-easing-default);
   color: var(--brand-SubNav-color-link-active);
 }
 
@@ -254,8 +269,11 @@
   .SubNav--open::after {
     opacity: 0.3;
     visibility: visible;
-    transition: visibility var(--brand-animation-duration-default) var(--brand-animation-easing-default),
-      opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+    transition:
+      visibility var(--brand-animation-duration-default)
+        var(--brand-animation-easing-default),
+      opacity var(--brand-animation-duration-default)
+        var(--brand-animation-easing-default);
   }
 
   .SubNav__heading {
@@ -287,7 +305,9 @@
     z-index: 9998;
   }
 
-  .SubNav__heading-separator:not(.SubNav__heading-separator--has-adjacent-label) {
+  .SubNav__heading-separator:not(
+    .SubNav__heading-separator--has-adjacent-label
+  ) {
     display: none;
   }
 
@@ -313,7 +333,9 @@
     color: var(--brand-color-text-default);
   }
 
-  .SubNav__links-overlay--open .SubNav__link--has-sub-menu:hover .SubNav__link-label {
+  .SubNav__links-overlay--open
+    .SubNav__link--has-sub-menu:hover
+    .SubNav__link-label {
     color: var(--brand-color-text-muted);
   }
 
@@ -350,7 +372,9 @@
     position: relative;
   }
 
-  .SubNav__links-overlay--open .SubNav__link[aria-current]:not([aria-current='false']) * {
+  .SubNav__links-overlay--open
+    .SubNav__link[aria-current]:not([aria-current='false'])
+    * {
     color: var(--brand-SubNav-color-link-active);
   }
 
@@ -403,7 +427,11 @@
     top: 0;
     bottom: 0;
     width: var(--base-size-32);
-    background: linear-gradient(to left, var(--brand-color-canvas-default), transparent);
+    background: linear-gradient(
+      to left,
+      var(--brand-color-canvas-default),
+      transparent
+    );
     pointer-events: none;
     z-index: 100;
   }
@@ -444,7 +472,8 @@
 
   .SubNav__link:hover .SubNav__link-label::after,
   .SubNav__link:focus-visible .SubNav__link-label::after,
-  .SubNav__link[aria-current]:not([aria-current='false']) .SubNav__link-label::after {
+  .SubNav__link[aria-current]:not([aria-current='false'])
+    .SubNav__link-label::after {
     opacity: 1;
     transform: scale(1);
   }
@@ -566,7 +595,8 @@
   .SubNav__sub-menu.SubNav__sub-menu--dropdown {
     background-clip: padding-box;
     background-color: var(--brand-SubNav-color-subMenu-bgColor);
-    border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--borderColor-default, var(--color-border-default));
+    border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid
+      var(--borderColor-default, var(--color-border-default));
     border-radius: var(--brand-borderRadius-xlarge, 0.375rem);
     box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large));
     left: 0;
@@ -636,14 +666,18 @@
   }
 
   /* Show underline on submenu parent when child has aria-current */
-  .SubNav__link--has-sub-menu:has(.SubNav__link[aria-current]:not([aria-current='false']))
+  .SubNav__link--has-sub-menu:has(
+      .SubNav__link[aria-current]:not([aria-current='false'])
+    )
     > .SubNav__link
     .SubNav__link-label::after {
     opacity: 1;
     transform: scale(0.8, 1);
   }
 
-  .SubNav__link--has-sub-menu .SubNav__link[aria-current]:not([aria-current='false']) .SubNav__link-label::after,
+  .SubNav__link--has-sub-menu
+    .SubNav__link[aria-current]:not([aria-current='false'])
+    .SubNav__link-label::after,
   .SubNav__link--has-sub-menu .SubNav__link:hover .SubNav__link-label::after {
     opacity: 1;
     transform: scale(1);

package/lib/components/tables/DataTable.js

@@ -11,9 +11,6 @@ const DataTableDetails = (props) => {
 };
 export const DataTable = (props) => {
     const [dialog, setDialog] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { children: dialog ?
-                    _jsx(Dialog, { sx: { width: "100%", height: '100%' }, onClose: e => setDialog(false), children: _jsx(DataTableDetails, { ...props }) })
-                    :
-                        _jsx(DataTableDetails, { ...props }) }), _jsx(Box, { children: _jsx(Button, { onClick: e => setDialog(true), children: "Zoom" }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { children: dialog ? (_jsx(Dialog, { sx: { width: '100%', height: '100%' }, onClose: e => setDialog(false), children: _jsx(DataTableDetails, { ...props }) })) : (_jsx(DataTableDetails, { ...props })) }), _jsx(Box, { children: _jsx(Button, { onClick: e => setDialog(true), children: "Zoom" }) })] }));
 };
 export default DataTable;

package/lib/components/text-reveal/TextRevealAnimation.js

@@ -40,10 +40,15 @@ export function TextRevealAnimation({ children, ...rest }) {
             }
         };
     }, [ref]);
-    if (typeof children !== 'string' && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {
+    if (typeof children !== 'string' &&
+        (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {
         console.warn('Children passed to TextRevealAnimation must be a string');
         return null;
     }
     return (_jsx("span", { ref: ref, ...rest, children: lines?.map((line, i) => (_jsxs(React.Fragment, { children: [_jsx("span", { className: clsx(styles.TextRevealAnimation, animationStarted && styles['TextRevealAnimation--visible'], animationStarted &&
-                        (hasAnimationCompleted ? styles['TextRevealAnimation'] : styles['TextRevealAnimation--animated'])), style: { '--animation-delay': `${220 + i * 200}ms` }, onAnimationEnd: () => onLineAnimationEnd(i), children: line }), ' '] }, line))) }));
+                        (hasAnimationCompleted
+                            ? styles['TextRevealAnimation']
+                            : styles['TextRevealAnimation--animated'])), style: {
+                        '--animation-delay': `${220 + i * 200}ms`,
+                    }, onAnimationEnd: () => onLineAnimationEnd(i), children: line }), ' '] }, line))) }));
 }

package/lib/components/text-reveal/TextRevealAnimation.module.css

@@ -14,7 +14,8 @@
 
 .TextRevealAnimation {
   opacity: 0;
-  transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default);
+  transition: opacity var(--brand-animation-duration-default)
+    var(--brand-animation-easing-default);
 }
 
 .TextRevealAnimation--visible {
@@ -38,6 +39,7 @@
   height: 100%;
   background-color: var(--brand-color-accent-primary);
   transform-origin: right;
-  animation: wipe var(--brand-animation-duration-extended) forwards var(--brand-animation-easing-default);
+  animation: wipe var(--brand-animation-duration-extended) forwards
+    var(--brand-animation-easing-default);
   animation-delay: var(--animation-delay);
 }

package/lib/components/tokens/SpaceVariantToken.d.ts

@@ -1,4 +1,4 @@
-import { ISpaceVariant } from "../../models";
+import { ISpaceVariant } from '../../models';
 export declare const SpaceVariantToken: (props: {
     variant: ISpaceVariant;
 }) => import("react/jsx-runtime").JSX.Element;

package/lib/components/tokens/SpaceVariantToken.js

@@ -3,15 +3,15 @@ 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 { Token } from "@primer/react";
-import { ProjectIcon } from "@primer/octicons-react";
-import { StudentIcon } from "@datalayer/icons-react";
+import { Token } from '@primer/react';
+import { ProjectIcon } from '@primer/octicons-react';
+import { StudentIcon } from '@datalayer/icons-react';
 export const SpaceVariantToken = (props) => {
     const { variant } = props;
     switch (variant) {
-        case ("default"):
+        case 'default':
             return _jsx(Token, { text: "default", leadingVisual: ProjectIcon });
-        case ("course"):
+        case 'course':
             return _jsx(Token, { text: "course", leadingVisual: StudentIcon });
         default:
             return _jsx(_Fragment, {});

package/lib/components/toolbars/AssignmentEditorToolbar.js

@@ -11,8 +11,6 @@ export const AssignmentEditorToolbar = (props) => {
     const { notebookId } = props;
     const { grade } = useGradeStore();
     const notebook = notebookStore.getState().selectNotebook(notebookId);
-    return (_jsxs(Box, { display: "flex", children: [_jsx(Box, { children: _jsx(Button, { variant: "invisible", size: "small", leadingVisual: RepoPushIcon, onClick: () => grade(new Date()), children: "Grade" }) }), notebook?.kernelStatus !== 'busy' &&
-                _jsx(Box, { children: _jsx(Button, { variant: "invisible", size: "small", leadingVisual: PlayIcon, onClick: e => notebookStore.getState().runAll(notebookId), children: "Run all" }) }), notebook?.kernelStatus === 'busy' &&
-                _jsx(Box, { children: _jsx(Button, { variant: "danger", size: "small", leadingVisual: StopIcon, onClick: e => notebookStore.getState().interrupt(notebookId), children: "Interrupt" }) })] }));
+    return (_jsxs(Box, { display: "flex", children: [_jsx(Box, { children: _jsx(Button, { variant: "invisible", size: "small", leadingVisual: RepoPushIcon, onClick: () => grade(new Date()), children: "Grade" }) }), notebook?.kernelStatus !== 'busy' && (_jsx(Box, { children: _jsx(Button, { variant: "invisible", size: "small", leadingVisual: PlayIcon, onClick: e => notebookStore.getState().runAll(notebookId), children: "Run all" }) })), notebook?.kernelStatus === 'busy' && (_jsx(Box, { children: _jsx(Button, { variant: "danger", size: "small", leadingVisual: StopIcon, onClick: e => notebookStore.getState().interrupt(notebookId), children: "Interrupt" }) }))] }));
 };
 export default AssignmentEditorToolbar;

package/lib/components/users/PeerIndicator.d.ts

@@ -15,4 +15,4 @@ export type IPeersIndicatorProps = {
 /**
  * Connected peers indicator
  */
-export declare function PeersIndicator({ awareness, currentUserHandle }: IPeersIndicatorProps): JSX.Element | null;
+export declare function PeersIndicator({ awareness, currentUserHandle, }: IPeersIndicatorProps): JSX.Element | null;

package/lib/components/users/PeerIndicator.js

@@ -18,7 +18,7 @@ var NotificationType;
 const MSG_TO_NOTIFICATION = {
     '-1': NotificationType.ERROR,
     '0': NotificationType.PROGRESS,
-    '1': NotificationType.SUCCESS
+    '1': NotificationType.SUCCESS,
 };
 function isExpired(timestamp) {
     // Timestamp is expired if older than 10 seconds ago
@@ -31,7 +31,7 @@ function defaultAvatarSrc(color, text) {
 /**
  * Connected peers indicator
  */
-export function PeersIndicator({ awareness, currentUserHandle }) {
+export function PeersIndicator({ awareness, currentUserHandle, }) {
     const [peers, setPeers] = useState([]);
     useEffect(() => {
         const onAwarenessChange = () => {
@@ -58,7 +58,7 @@ export function PeersIndicator({ awareness, currentUserHandle }) {
                         notificationType: notExpiredNotification &&
                             peer.notification?.message_type !== undefined
                             ? MSG_TO_NOTIFICATION[peer.notification?.message_type.toString()]
-                            : undefined
+                            : undefined,
                     }
                     : {
                         avatarUrl: user.avatar_url,
@@ -66,7 +66,7 @@ export function PeersIndicator({ awareness, currentUserHandle }) {
                         displayName: user.display_name,
                         handle: user.name,
                         initials: user.initials,
-                        username: user.username
+                        username: user.username,
                     };
                 // Ensure to display a peer only once
                 if (!agg.map(p => p.username).includes(newPeer.username)) {
@@ -92,7 +92,7 @@ export function PeersIndicator({ awareness, currentUserHandle }) {
             return (_jsx(Avatar, { sx: {
                     border: peer.notificationType
                         ? `var(--borderWidth-thick) solid ${peer.notificationType}`
-                        : 'none'
+                        : 'none',
                 }, title: title, src: peer.avatarUrl
                     ? getAvatarURL(peer.avatarUrl)
                     : defaultAvatarSrc(peer.color, peer.initials), size: AVATAR_SIZE }, peer.displayName));

package/lib/config/Configuration.d.ts

@@ -1,6 +1,40 @@
 import { ISignal } from '@lumino/signaling';
 export declare const FORCE_ACTIVATE_RUNTIMES_PLUGINS = false;
+/**
+ * Configuration interface for Datalayer platform integration
+ *
+ * This interface defines the configuration needed to connect to
+ * and interact with the Datalayer platform services.
+ */
 export type IDatalayerCoreConfig = {
+    /**
+     * Datalayer RUN URL.
+     * The base URL for the Datalayer platform API.
+     * @example "https://prod1.datalayer.run"
+     */
+    runUrl: string;
+    /**
+     * Datalayer API authentication token.
+     * Used for authenticating requests to the Datalayer platform.
+     */
+    token: string;
+    /**
+     * Credits limit for kernel usage.
+     * Determines the maximum credits that can be consumed by kernels.
+     */
+    credits: number;
+    /**
+     * CPU environment name.
+     * Specifies which CPU-based environment to use for kernels.
+     * @example "python-cpu-env"
+     */
+    cpuEnvironment: string;
+    /**
+     * GPU environment name.
+     * Specifies which GPU-enabled environment to use for kernels.
+     * @example "ai-env"
+     */
+    gpuEnvironment: string;
     /**
      * Use mock model, useful for e.g. storybooks.
      */
@@ -108,4 +142,18 @@ export declare class DatalayerConfiguration {
     get configuration(): IDatalayerCoreConfig;
     get configurationChanged(): ISignal<DatalayerConfiguration, IDatalayerCoreConfig>;
 }
+/**
+ * Default configuration values for Datalayer
+ */
+export declare const DEFAULT_DATALAYER_CONFIG: Partial<IDatalayerCoreConfig>;
+/**
+ * Type guard to check if a config object is a valid IDatalayerConfig
+ */
+export declare function isDatalayerConfig(config: any): config is IDatalayerCoreConfig;
+/**
+ * Helper function to merge partial config with defaults
+ * @param config Partial configuration to merge
+ * @returns Complete configuration with defaults applied, or undefined if required fields missing
+ */
+export declare function mergeConfigWithDefaults(config?: Partial<IDatalayerCoreConfig>): Partial<IDatalayerCoreConfig> | undefined;
 export default DatalayerConfiguration;

package/lib/config/Configuration.js

@@ -22,4 +22,46 @@ export class DatalayerConfiguration {
         return this._configurationChanged;
     }
 }
+/**
+ * Default configuration values for Datalayer
+ */
+export const DEFAULT_DATALAYER_CONFIG = {
+    runUrl: 'https://prod1.datalayer.run',
+    credits: 100,
+    cpuEnvironment: 'python-cpu-env',
+    gpuEnvironment: 'ai-env',
+};
+/**
+ * Type guard to check if a config object is a valid IDatalayerConfig
+ */
+export function isDatalayerConfig(config) {
+    return (config &&
+        typeof config === 'object' &&
+        typeof config.runUrl === 'string' &&
+        typeof config.token === 'string' &&
+        typeof config.credits === 'number' &&
+        typeof config.cpuEnvironment === 'string' &&
+        typeof config.gpuEnvironment === 'string');
+}
+/**
+ * Helper function to merge partial config with defaults
+ * @param config Partial configuration to merge
+ * @returns Complete configuration with defaults applied, or undefined if required fields missing
+ */
+export function mergeConfigWithDefaults(config) {
+    if (!config)
+        return undefined;
+    // If we have required fields (token and runUrl), merge with defaults for optional fields
+    if (config.token && config.runUrl) {
+        return {
+            runUrl: config.runUrl,
+            token: config.token,
+            credits: config.credits ?? DEFAULT_DATALAYER_CONFIG.credits,
+            cpuEnvironment: config.cpuEnvironment ?? DEFAULT_DATALAYER_CONFIG.cpuEnvironment,
+            gpuEnvironment: config.gpuEnvironment ?? DEFAULT_DATALAYER_CONFIG.gpuEnvironment,
+        };
+    }
+    // If missing required fields, return undefined
+    return undefined;
+}
 export default DatalayerConfiguration;