@datalayer/core 1.1.48 → 1.1.50

package/README.md

@@ -2,7 +2,7 @@
 
 [![Become a Sponsor](https://img.shields.io/static/v1?label=Become%20a%20Sponsor&message=%E2%9D%A4&logo=GitHub&style=flat&color=1ABC9C)](https://github.com/sponsors/datalayer)
 
-# ☰ Datalayer Core
+# ☰ 〇 Datalayer Core
 
 <p align="center">
   <strong>Python and Typescript libraries for Datalayer</strong>

package/lib/components/auth/Login.js

@@ -6,7 +6,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from 'react';
 import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 import { EyeIcon, EyeClosedIcon, MarkGithubIcon } from '@primer/octicons-react';
-import { Button, FormControl, Heading, Link, PageLayout, TextInput, } from '@primer/react';
+import { GoogleIcon } from '@datalayer/icons-react';
+import { Button, FormControl, Heading, Link, PageLayout, Spinner, TextInput, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { asUser, IAMProvidersSpecs } from '../../models/index.js';
 import { useIAMStore } from '../../state/index.js';
@@ -14,8 +15,6 @@ import { CenteredSpinner } from '../display/index.js';
 import { isInsideJupyterLab, validateLength } from '../../utils/index.js';
 import { useNavigate, useCache, useToast, useIAM } from '../../hooks/index.js';
 import { LoginToken } from './LoginToken.js';
-/** Inline Google "G" icon for the login button. */
-const GoogleIcon = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 48 48", children: [_jsx("path", { fill: "#EA4335", d: "M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" }), _jsx("path", { fill: "#4285F4", d: "M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" }), _jsx("path", { fill: "#FBBC05", d: "M10.53 28.59a14.5 14.5 0 0 1 0-9.18l-7.98-6.19a24.1 24.1 0 0 0 0 21.56l7.98-6.19z" }), _jsx("path", { fill: "#34A853", d: "M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" })] }));
 export const Login = (props) => {
     const { heading, homeRoute, loginRoute, showEmailLogin = true, showGitHubLogin = true, showGoogleLogin = true, showTokenLogin = true, } = props;
     const { useLogin, useOAuth2AuthorizationURL } = useCache({ loginRoute });
@@ -36,19 +35,20 @@ export const Login = (props) => {
         password: undefined,
     });
     const [passwordVisibility, setPasswordVisibility] = useState(false);
+    const [pendingOAuthProvider, setPendingOAuthProvider] = useState(null);
+    const buildCallbackURI = (iamProvider) => isInsideJupyterLab()
+        ? URLExt.join(PageConfig.getBaseUrl(), iamProvider.oauth2CallbackServerRoute)
+        : location.protocol +
+            '//' +
+            location.hostname +
+            ':' +
+            location.port +
+            iamProvider.oauth2CallbackUIRoute;
     useEffect(() => {
         const initIAMProvider = (iamProvider) => {
-            const callbackURI = isInsideJupyterLab()
-                ? URLExt.join(PageConfig.getBaseUrl(), iamProvider.oauth2CallbackServerRoute)
-                : location.protocol +
-                    '//' +
-                    location.hostname +
-                    ':' +
-                    location.port +
-                    iamProvider.oauth2CallbackUIRoute;
             const queryArgs = {
                 provider: iamProvider.name,
-                callback_uri: callbackURI,
+                callback_uri: buildCallbackURI(iamProvider),
             };
             /*
             const xsrfTokenMatch = document.cookie.match('\\b_xsrf=([^;]*)\\b');
@@ -142,6 +142,32 @@ export const Login = (props) => {
             },
         });
     };
+    const startOAuthSignIn = (providerSpec) => {
+        if (getOAuth2URLMutation.isPending) {
+            return;
+        }
+        setPendingOAuthProvider(providerSpec.name);
+        const queryArgs = {
+            provider: providerSpec.name,
+            callback_uri: buildCallbackURI(providerSpec),
+        };
+        getOAuth2URLMutation.mutate(queryArgs, {
+            onSuccess: authUrl => {
+                if (authUrl) {
+                    window.location.assign(authUrl);
+                    return;
+                }
+                setPendingOAuthProvider(null);
+                enqueueToast('Unable to start social sign-in.', { variant: 'warning' });
+            },
+            onError: () => {
+                setPendingOAuthProvider(null);
+                enqueueToast('Unable to start social sign-in.', { variant: 'error' });
+            },
+        });
+    };
+    const socialAuthDisabled = getOAuth2URLMutation.isPending;
+    const socialButtonsDisabled = socialAuthDisabled || loading;
     useEffect(() => {
         setValidationResult({
             ...validationResult,
@@ -157,9 +183,9 @@ export const Login = (props) => {
                     : 'Your password may not be empty.',
         });
     }, [formValues]);
-    return (_jsxs(PageLayout, { containerWidth: "medium", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsx(Heading, { children: heading || 'Login to Datalayer' }) }), _jsx(PageLayout.Content, { children: loadingWithToken < 0 ? (_jsx(_Fragment, { children: _jsxs(Box, { display: "flex", children: [showEmailLogin && (_jsxs(Box, { sx: { label: { marginTop: 2 }, paddingRight: '10%' }, children: [_jsx(Box, { mt: 5, children: _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Your username" }), _jsx(TextInput, { autoFocus: true, placeholder: "Your username", value: formValues.handle, onChange: handleHandleChange, onKeyDown: handleKeyDown }), validationResult.handle && (_jsx(FormControl.Validation, { variant: validationResult.handle ? 'error' : 'success', children: validationResult.handle }))] }) }), _jsx(Box, { children: _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Your password" }), _jsx(TextInput, { placeholder: "Your password", type: passwordVisibility ? 'text' : 'password', value: formValues.password, onChange: handlePasswordChange, onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => {
+    return (_jsxs(PageLayout, { containerWidth: "medium", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsx(Heading, { children: heading || 'Sign in to Datalayer' }) }), _jsx(PageLayout.Content, { children: loadingWithToken < 0 ? (_jsx(_Fragment, { children: _jsxs(Box, { display: "flex", children: [showEmailLogin && (_jsxs(Box, { sx: { label: { marginTop: 2 }, paddingRight: '10%' }, children: [_jsx(Box, { mt: 5, children: _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Your username" }), _jsx(TextInput, { autoFocus: true, placeholder: "Your username", value: formValues.handle, disabled: loading, onChange: handleHandleChange, onKeyDown: handleKeyDown }), validationResult.handle && (_jsx(FormControl.Validation, { variant: validationResult.handle ? 'error' : 'success', children: validationResult.handle }))] }) }), _jsx(Box, { children: _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Your password" }), _jsx(TextInput, { placeholder: "Your password", type: passwordVisibility ? 'text' : 'password', value: formValues.password, disabled: loading, onChange: handlePasswordChange, onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => {
                                                             setPasswordVisibility(!passwordVisibility);
-                                                        }, icon: passwordVisibility ? EyeClosedIcon : EyeIcon, "aria-label": passwordVisibility
+                                                        }, disabled: loading, icon: passwordVisibility ? EyeClosedIcon : EyeIcon, "aria-label": passwordVisibility
                                                             ? 'Hide password'
                                                             : 'Show password', sx: { color: 'var(--fgColor-muted)' } }), sx: { overflow: 'visible' } }), validationResult.password && (_jsx(FormControl.Validation, { variant: validationResult.password ? 'error' : 'success', children: validationResult.password }))] }) }), _jsxs(Box, { mt: 5, children: [_jsx(Button, { variant: "primary", disabled: loading ||
                                                     validationResult.handle !== '' ||
@@ -168,7 +194,11 @@ export const Login = (props) => {
                                                     : heading
                                                         ? 'Login with Datalayer'
                                                         : 'Login' }), _jsx(Box, { pt: 6 }), _jsx(Link, { href: "https://datalayer.ai/password", target: "_blank", children: "Forgot password?" })] })] })), _jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", sx: { margin: 'auto' }, children: [showGitHubLogin &&
-                                            iamProvidersAuthorizationURL[IAMProvidersSpecs.GitHub.name] && (_jsx(Button, { leadingVisual: MarkGithubIcon, href: iamProvidersAuthorizationURL[IAMProvidersSpecs.GitHub.name], as: "a", style: { margin: '10px 0' }, children: "Login with GitHub" })), showGoogleLogin &&
-                                            iamProvidersAuthorizationURL[IAMProvidersSpecs.Google.name] && (_jsx(Button, { leadingVisual: GoogleIcon, href: iamProvidersAuthorizationURL[IAMProvidersSpecs.Google.name], as: "a", style: { margin: '10px 0' }, children: "Login with Google" })), showTokenLogin && (_jsx(LoginToken, { homeRoute: homeRoute, style: { margin: '10px 0' } }))] }) })] }) })) : loadingWithToken ? (_jsx(CenteredSpinner, { message: "Checking authentication\u2026" })) : (_jsx(_Fragment, {})) })] }));
+                                            iamProvidersAuthorizationURL[IAMProvidersSpecs.GitHub.name] && (_jsx(Button, { leadingVisual: pendingOAuthProvider === IAMProvidersSpecs.GitHub.name
+                                                ? () => _jsx(Spinner, { size: "small" })
+                                                : MarkGithubIcon, onClick: () => startOAuthSignIn(IAMProvidersSpecs.GitHub), disabled: socialButtonsDisabled, style: { margin: '10px 0' }, children: "Login with GitHub" })), showGoogleLogin &&
+                                            iamProvidersAuthorizationURL[IAMProvidersSpecs.Google.name] && (_jsx(Button, { leadingVisual: pendingOAuthProvider === IAMProvidersSpecs.Google.name
+                                                ? () => _jsx(Spinner, { size: "small" })
+                                                : GoogleIcon, onClick: () => startOAuthSignIn(IAMProvidersSpecs.Google), disabled: socialButtonsDisabled, style: { margin: '10px 0' }, children: "Login with Google" })), showTokenLogin && (_jsx(LoginToken, { homeRoute: homeRoute, disabled: loading, style: { margin: '10px 0' } }))] }) })] }) })) : loadingWithToken ? (_jsx(CenteredSpinner, { message: "Checking authentication\u2026" })) : (_jsx(_Fragment, {})) })] }));
 };
 export default Login;

package/lib/components/auth/Login.stories.js

@@ -28,7 +28,7 @@ export default meta;
  */
 export const Default = {
     args: {
-        heading: 'Login to Datalayer',
+        heading: 'Sign in to Datalayer',
         homeRoute: '/home',
         loginRoute: '/login',
         showEmailLogin: true,
@@ -41,7 +41,7 @@ export const Default = {
  */
 export const EmailOnly = {
     args: {
-        heading: 'Login to Datalayer',
+        heading: 'Sign in to Datalayer',
         homeRoute: '/home',
         loginRoute: '/login',
         showEmailLogin: true,
@@ -54,7 +54,7 @@ export const EmailOnly = {
  */
 export const OAuthOnly = {
     args: {
-        heading: 'Login to Datalayer',
+        heading: 'Sign in to Datalayer',
         homeRoute: '/home',
         loginRoute: '/login',
         showEmailLogin: false,
@@ -67,7 +67,7 @@ export const OAuthOnly = {
  */
 export const TokenOnly = {
     args: {
-        heading: 'Login to Datalayer',
+        heading: 'Sign in to Datalayer',
         homeRoute: '/home',
         loginRoute: '/login',
         showEmailLogin: false,
@@ -93,7 +93,7 @@ export const CustomHeading = {
  */
 export const WithPasswordReset = {
     args: {
-        heading: 'Login to Datalayer',
+        heading: 'Sign in to Datalayer',
         homeRoute: '/home',
         loginRoute: '/login',
         passwordRoute: '/password-reset',

package/lib/components/auth/LoginToken.d.ts

@@ -3,6 +3,10 @@ export interface ILoginTokenProps {
      * Home page route to navigate to after successful login
      */
     homeRoute: string;
+    /**
+     * Disable token login controls (e.g., while another login flow is submitting)
+     */
+    disabled?: boolean;
     /**
      * CSS style object
      */

package/lib/components/auth/LoginToken.js

@@ -15,7 +15,7 @@ import { useIAMStore } from '../../state/index.js';
  * Provides a simple button that expands to show a token input form
  */
 export const LoginToken = (props) => {
-    const { homeRoute, style } = props;
+    const { homeRoute, disabled = false, style } = props;
     const [showForm, setShowForm] = useState(false);
     const [token, setToken] = useState('');
     const [loading, setLoading] = useState(false);
@@ -45,9 +45,9 @@ export const LoginToken = (props) => {
         }
     };
     if (!showForm) {
-        return (_jsx(Button, { onClick: () => setShowForm(true), style: style, children: "Login with Token" }));
+        return (_jsx(Button, { onClick: () => setShowForm(true), style: style, disabled: disabled, children: "Login with Token" }));
     }
-    return (_jsxs(Box, { style: style, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Your Authentication Token" }), _jsx(TextInput, { block: true, placeholder: "Paste your authentication token here", value: token, onChange: e => setToken(e.target.value), onKeyDown: e => {
+    return (_jsxs(Box, { style: style, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Your Authentication Token" }), _jsx(TextInput, { block: true, placeholder: "Paste your authentication token here", value: token, disabled: disabled || loading, onChange: e => setToken(e.target.value), onKeyDown: e => {
                             if (e.key === 'Enter') {
                                 handleLogin();
                             }
@@ -55,7 +55,7 @@ export const LoginToken = (props) => {
                                 setShowForm(false);
                                 setToken('');
                             }
-                        } }), _jsx(FormControl.Caption, { children: "Enter your Datalayer authentication token to log in" })] }), _jsxs(Box, { mt: 3, display: "flex", justifyContent: "flex-start", children: [_jsx(Button, { variant: "primary", onClick: handleLogin, disabled: loading || !token.trim(), sx: { mr: 2 }, children: loading ? 'Authenticating...' : 'Login' }), _jsx(Button, { variant: "default", onClick: () => {
+                        } }), _jsx(FormControl.Caption, { children: "Enter your Datalayer authentication token to log in" })] }), _jsxs(Box, { mt: 3, display: "flex", justifyContent: "flex-start", children: [_jsx(Button, { variant: "primary", onClick: handleLogin, disabled: disabled || loading || !token.trim(), sx: { mr: 2 }, children: loading ? 'Authenticating...' : 'Login' }), _jsx(Button, { variant: "default", disabled: disabled || loading, onClick: () => {
                             setShowForm(false);
                             setToken('');
                         }, children: "Cancel" })] })] }));

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

@@ -11,6 +11,10 @@ export type UserAvatarProps = {
     square?: boolean;
     /** Fallback icon size. Defaults to ~48% of `size`. */
     iconSize?: number;
+    /** Optional background color override for the default (non-photo) avatar. */
+    fallbackBackground?: string;
+    /** Optional icon foreground color override for the default avatar. */
+    fallbackForeground?: string;
 };
-export declare const UserAvatar: ({ avatarUrl, size, square, iconSize, }: UserAvatarProps) => JSX.Element;
+export declare const UserAvatar: ({ avatarUrl, size, square, iconSize, fallbackBackground, fallbackForeground, }: UserAvatarProps) => JSX.Element;
 export default UserAvatar;

package/lib/components/avatars/UserAvatar.js

@@ -27,7 +27,7 @@ export function hasRealAvatar(url) {
     }
     return true;
 }
-export const UserAvatar = ({ avatarUrl, size = 100, square = true, iconSize, }) => {
+export const UserAvatar = ({ avatarUrl, size = 100, square = true, iconSize, fallbackBackground, fallbackForeground, }) => {
     const palette = useColorPalette();
     if (hasRealAvatar(avatarUrl)) {
         return _jsx(DLAvatar, { square: square, src: avatarUrl, size: size });
@@ -37,11 +37,11 @@ export const UserAvatar = ({ avatarUrl, size = 100, square = true, iconSize, })
             width: size,
             height: size,
             borderRadius: square ? 2 : '50%',
-            bg: 'accent.subtle',
+            bg: fallbackBackground || 'accent.subtle',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            '--datalayer-icon-fg': palette.primary,
-        }, children: _jsx(AlienIcon, { size: resolvedIconSize, themed: true, colormoded: true }) }));
+            '--datalayer-icon-fg': fallbackForeground || palette.primary,
+        }, children: _jsx(AlienIcon, { size: resolvedIconSize, themed: true, colormode: true }) }));
 };
 export default UserAvatar;

package/lib/components/billing/BillingEntitySelect.js

@@ -17,7 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * resolved account via `onSelectedAccountChange`.
  */
 import { useCallback, useEffect, useMemo, useRef, Fragment } from 'react';
-import { ActionList, ActionMenu, Button, Flash, FormControl, Label, Spinner, Text, } from '@primer/react';
+import { ActionList, ActionMenu, Button, FormControl, Label, Spinner, Text, } from '@primer/react';
 import { OrganizationIcon, PeopleIcon, PersonIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { useCache } from '../../hooks/useCache.js';
@@ -324,7 +324,15 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                                                         ? 'Organization'
                                                         : selectedAccount.accountType === 'team'
                                                             ? 'Team'
-                                                            : 'User', children: selectedAccount.accountType === 'organization' ? (_jsx(OrganizationIcon, { size: 12 })) : selectedAccount.accountType === 'team' ? (_jsx(PeopleIcon, { size: 12 })) : (_jsx(PersonIcon, { size: 12 })) }), _jsx(Label, { size: "small", variant: selectedAccount.isPaidPlan ? 'success' : 'attention', children: formatBillingEntityPlanLabel(selectedAccount.planName) })] })] })) : !hasEligibleAccount ? (emptyMessage) : ('Select a billing entity') }) }), _jsxs(ActionMenu.Overlay, { width: "large", children: [_jsx(Box, { sx: { p: 2 }, children: _jsx(Flash, { variant: "default", children: flashMessage }) }), _jsx(ActionList, { selectionVariant: "single", children: isLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsxs(Box, { sx: {
+                                                            : 'User', children: selectedAccount.accountType === 'organization' ? (_jsx(OrganizationIcon, { size: 12 })) : selectedAccount.accountType === 'team' ? (_jsx(PeopleIcon, { size: 12 })) : (_jsx(PersonIcon, { size: 12 })) }), _jsx(Label, { size: "small", variant: selectedAccount.isPaidPlan ? 'success' : 'attention', children: formatBillingEntityPlanLabel(selectedAccount.planName) })] })] })) : !hasEligibleAccount ? (emptyMessage) : ('Select a billing entity') }) }), _jsxs(ActionMenu.Overlay, { width: "large", children: [_jsx(Box, { sx: { p: 2 }, children: _jsx(Box, { sx: {
+                                            borderRadius: 2,
+                                            border: '1px solid',
+                                            borderColor: 'border.default',
+                                            bg: 'canvas.subtle',
+                                            color: 'fg.muted',
+                                            px: 3,
+                                            py: 2,
+                                        }, children: _jsx(Text, { sx: { fontSize: 1, lineHeight: 1.5 }, children: flashMessage }) }) }), _jsx(ActionList, { selectionVariant: "single", children: isLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsxs(Box, { sx: {
                                                 display: 'inline-flex',
                                                 alignItems: 'center',
                                                 gap: 2,

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

@@ -2,4 +2,4 @@ import { SxProp } from '@primer/react';
 export interface IVisuallyHiddenProps {
     isVisible?: boolean;
 }
-export declare const VisuallyHidden: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "sx" | "isVisible"> & IVisuallyHiddenProps & SxProp, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "sx" | "isVisible"> & IVisuallyHiddenProps & SxProp, never>>> & string;
+export declare const VisuallyHidden: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, IVisuallyHiddenProps & SxProp>> & string;

package/lib/components/iam/ExternalTokenSilentLogin.js

@@ -3,10 +3,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useEffect } from 'react';
+import { useContext, useEffect } from 'react';
+import { QueryClient, QueryClientContext, QueryClientProvider, } from '@tanstack/react-query';
 import { CenteredSpinner } from '../../components/display/index.js';
 import { useIAMStore } from '../../state/index.js';
 import { useToast, useIAM } from '../../hooks/index.js';
+const externalTokenQueryClient = new QueryClient();
 const ExternalTokenSilentLoginRoute = (props) => {
     const { message } = props;
     const { loginAndNavigate } = useIAM();
@@ -29,7 +31,9 @@ const ExternalTokenSilentLoginRoute = (props) => {
     return _jsx(CenteredSpinner, { size: "small", message: message });
 };
 export const ExternalTokenSilentLogin = (props) => {
+    const queryClient = useContext(QueryClientContext);
     // No navigation provider needed anymore - auto-detection works without it
-    return _jsx(ExternalTokenSilentLoginRoute, { ...props });
+    const content = _jsx(ExternalTokenSilentLoginRoute, { ...props });
+    return queryClient ? (content) : (_jsx(QueryClientProvider, { client: externalTokenQueryClient, children: content }));
 };
 export default ExternalTokenSilentLogin;

package/lib/hooks/useJupyterLabTheme.d.ts

@@ -1,4 +1,4 @@
-import { IThemeManager } from '@jupyterlab/apputils';
+import type { IThemeManager } from '@jupyterlab/apputils';
 export declare enum JupyterLabTheme {
     LIGHT = "JupyterLab Light",
     DARK = "JupyterLab Dark"

package/lib/hooks/useToast.d.ts

@@ -1,5 +1,5 @@
 import { type Id } from 'react-toastify';
-import { Notification } from '@jupyterlab/apputils';
+import type { Notification } from '@jupyterlab/apputils';
 export type ToastProps = {
     /**
      * List of associated actions

package/lib/hooks/useToast.js

@@ -5,10 +5,25 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import React from 'react';
 import { toast } from 'react-toastify';
-import { Notification } from '@jupyterlab/apputils';
 import { Button } from '@primer/react';
-import { JupyterReactTheme } from '@datalayer/jupyter-react';
 import { isInsideJupyterLab } from '../utils/index.js';
+// `@datalayer/jupyter-react` and `@jupyterlab/apputils` are heavy (they pull
+// JupyterLab / CodeMirror / lumino) and are only needed when running INSIDE
+// JupyterLab. They are lazily loaded here so the standalone bundle (landing app)
+// never puts JupyterLab on its critical path.
+const JupyterReactTheme = React.lazy(() => import('@datalayer/jupyter-react').then(m => ({
+    default: m.JupyterReactTheme,
+})));
+// Runtime handle to the JupyterLab Notification API. Populated only when running
+// inside JupyterLab (where @jupyterlab/apputils is already a shared singleton),
+// so standalone builds never eagerly import it. Callers fall back to
+// react-toastify until (and unless) this resolves.
+let NotificationApi;
+if (isInsideJupyterLab()) {
+    void import('@jupyterlab/apputils').then(m => {
+        NotificationApi = m.Notification;
+    });
+}
 const TOAST_POSITION = 'bottom-right';
 const THEME_STORAGE_KEY = 'datalayer-theme';
 function resolveToastTheme() {
@@ -62,7 +77,7 @@ function ToastButton({ action, closeToast }) {
  */
 function createContent(message, closeHandler, actions) {
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: "jp-toast-message", children: message.split('\n').map((part, index) => (_jsxs(React.Fragment, { children: [index > 0 ? _jsx("br", {}) : null, part] }, `part-${index}`))) }), (actions?.length ?? 0) > 0 && (_jsxs("div", { className: "jp-toast-buttonBar", children: [_jsx("div", { className: "jp-toast-spacer" }), actions.map((action, idx) => {
-                        return (_jsx(JupyterReactTheme, { children: _jsx(ToastButton, { action: action, closeToast: closeHandler }, 'button-' + idx) }));
+                        return (_jsx(React.Suspense, { fallback: null, children: _jsx(JupyterReactTheme, { children: _jsx(ToastButton, { action: action, closeToast: closeHandler }) }) }, 'button-' + idx));
                     })] }))] }));
 }
 export const useToast = () => {
@@ -73,8 +88,8 @@ export const useToast = () => {
         const theme = resolveToastTheme();
         switch (options.variant) {
             case 'info': {
-                return insideJupyterLab
-                    ? Notification.info(message, {
+                return insideJupyterLab && NotificationApi
+                    ? NotificationApi.info(message, {
                         autoClose: autoClose ?? 5000,
                         actions,
                     })
@@ -84,8 +99,8 @@ export const useToast = () => {
                     }, actions), { autoClose, position: TOAST_POSITION, theme });
             }
             case 'success': {
-                return insideJupyterLab
-                    ? Notification.success(message, {
+                return insideJupyterLab && NotificationApi
+                    ? NotificationApi.success(message, {
                         autoClose: autoClose ?? 5000,
                         actions,
                     })
@@ -95,8 +110,8 @@ export const useToast = () => {
                     }, actions), { autoClose, position: TOAST_POSITION, theme });
             }
             case 'warning': {
-                return insideJupyterLab
-                    ? Notification.warning(message, {
+                return insideJupyterLab && NotificationApi
+                    ? NotificationApi.warning(message, {
                         autoClose: autoClose ?? false,
                         actions,
                     })
@@ -110,8 +125,8 @@ export const useToast = () => {
                     });
             }
             case 'error': {
-                return insideJupyterLab
-                    ? Notification.error(message, {
+                return insideJupyterLab && NotificationApi
+                    ? NotificationApi.error(message, {
                         autoClose: autoClose ?? false,
                         actions,
                     })
@@ -128,8 +143,8 @@ export const useToast = () => {
     };
     const trackAsyncTask = (promise, options) => {
         const theme = resolveToastTheme();
-        return insideJupyterLab
-            ? Notification.promise(promise, options)
+        return insideJupyterLab && NotificationApi
+            ? NotificationApi.promise(promise, options)
             : toast.promise(promise, {
                 error: { render: options.error.message, ...options.error.options },
                 pending: options.pending.message,
@@ -158,8 +173,8 @@ export const useToast = () => {
          * @param id Toast id
          */
         dismiss: (id) => {
-            if (insideJupyterLab) {
-                Notification.dismiss(id);
+            if (insideJupyterLab && NotificationApi) {
+                NotificationApi.dismiss(id);
             }
             else {
                 toast.dismiss(id);

package/lib/state/substates/CoreState.js

@@ -34,8 +34,8 @@ let initialConfiguration = {
     supportUrl: 'https://prod1.datalayer.run',
     launcher: {
         category: 'Datalayer',
-        name: 'Datalayer Runtimes',
-        icon: 'https://raw.githubusercontent.com/datalayer/icons/main/svg/data1/jupyter-base.svg',
+        name: 'Datalayer',
+        icon: null,
         rank: 1,
     },
     brand: {

package/lib/utils/Jwt.d.ts

@@ -1,9 +1,3 @@
-/**
- * Lightweight JWT payload utilities.
- *
- * Decodes a JWT without verification (client-side display only).
- * Never use for security-critical checks.
- */
 export interface DatalayerJwtUser {
     id: string;
     uid: string;

package/lib/utils/Jwt.js

@@ -2,6 +2,13 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
+/**
+ * Lightweight JWT payload utilities.
+ *
+ * Decodes a JWT without verification (client-side display only).
+ * Never use for security-critical checks.
+ */
+import { asDisplayName } from './Name.js';
 // ── Utilities ─────────────────────────────────────────────────────
 /**
  * Decode the payload of a JWT without verifying the signature.
@@ -39,6 +46,6 @@ export function getDatalayerJwtUser(token) {
 export function getDatalayerDisplayName(user, fallback = '') {
     if (!user)
         return fallback;
-    const full = `${user.firstName ?? ''} ${user.lastName ?? ''}`.trim();
+    const full = asDisplayName(user.firstName ?? '', user.lastName ?? '').trim();
     return full || user.handle || fallback;
 }

package/lib/views/iam/SignInSimple.d.ts

@@ -13,7 +13,7 @@ export interface SignInSimpleProps {
      * Called after a successful login with the JWT and the user handle.
      * Typically used to store credentials in a Zustand / context store.
      */
-    onSignIn: (token: string, handle: string) => void;
+    onSignIn?: (token: string, handle: string) => void;
     /**
      * Called when the user authenticates with an API key.
      * If not provided the "Sign In with an API Key" button is hidden.
@@ -74,6 +74,62 @@ export interface SignInSimpleProps {
      * - `null`/empty disables forwarding any callback navigation target.
      */
     socialSignInNavigationTarget?: string | null;
+    /**
+     * Disable all interactive controls (useful when embedded in documentation).
+     */
+    asDoc?: boolean;
+    /**
+     * Hide header title and description area.
+     */
+    hideHero?: boolean;
+    /**
+     * Optional contextual heading shown above auth actions.
+     */
+    calloutTitle?: string;
+    /**
+     * Optional contextual description shown below the callout title.
+     */
+    calloutDescription?: string;
+    /**
+     * Label for password-auth toggle button.
+     */
+    passwordToggleLabel?: string;
+    /**
+     * Sign-up section heading text.
+     */
+    signUpTitle?: string;
+    /**
+     * Sign-up section descriptive text.
+     */
+    signUpDescription?: string;
+    /**
+     * Sign-up button label.
+     */
+    signUpLabel?: string;
+    /**
+     * Sign-up URL opened when clicking the sign-up button.
+     */
+    signUpHref?: string;
+    /**
+     * Forgot-password URL for password form.
+     */
+    forgotPasswordHref?: string;
+    /**
+     * Forgot-password link label.
+     */
+    forgotPasswordLabel?: string;
+    /**
+     * Show forgot-password link in password form.
+     */
+    showForgotPassword?: boolean;
+    /**
+     * Top margin for each social button.
+     */
+    socialButtonMarginTop?: number;
+    /**
+     * Maximum width (px) for primary action buttons.
+     */
+    actionButtonMaxWidth?: number;
 }
 export declare const SignInSimple: React.FC<SignInSimpleProps>;
 export default SignInSimple;

package/lib/views/iam/SignInSimple.js

@@ -14,12 +14,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useState, useCallback, useRef, useMemo, useEffect, } from 'react';
 import { PageConfig, URLExt } from '@jupyterlab/coreutils';
-import { Box, Button, FormControl, Heading, Text, Textarea, TextInput, } from '@primer/react';
-import { EyeIcon, EyeClosedIcon, KeyIcon, LinkExternalIcon, TelescopeIcon, } from '@primer/octicons-react';
-import { GithubMarkIcon, LinkedInGreyIcon } from '@datalayer/icons-react';
+import { createGlobalStyle } from 'styled-components';
+import { Box, Button, FormControl, Heading, Link, Spinner, Text, Textarea, TextInput, } from '@primer/react';
+import { EyeIcon, EyeClosedIcon, KeyIcon, MailIcon, SignInIcon, TelescopeIcon, } from '@primer/octicons-react';
+import { GithubMarkIcon, GoogleIcon, LinkedInGreyIcon, } from '@datalayer/icons-react';
 import { useToast } from '../../hooks/index.js';
 import { isInsideJupyterLab } from '../../utils/Jupyter.js';
-const GoogleIcon = () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid", viewBox: "0 0 256 262", height: "16px", fill: "currentColor", "aria-hidden": "true", children: [_jsx("path", { fill: "currentColor", d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" }), _jsx("path", { fill: "currentColor", d: "M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" }), _jsx("path", { fill: "currentColor", d: "M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" }), _jsx("path", { fill: "currentColor", d: "M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" })] }));
 const OAUTH2_PROVIDERS = {
     github: {
         name: 'github',
@@ -68,10 +68,44 @@ const getErrorMessage = (error, fallback = 'Unable to start social sign-in.') =>
     }
     return fallback;
 };
+// Repaint the browser autofill highlight (Chrome's blue/yellow) with theme
+// tokens so autofilled/disabled inputs keep the Primer surface colors. A
+// scoped global style is used because Primer's TextInput inner <input> is not
+// reliably reachable via the wrapper `sx` for vendor-prefixed autofill pseudos.
+const SignInInputGlobalStyle = createGlobalStyle `
+  .signin-input-theme-scope input:-webkit-autofill,
+  .signin-input-theme-scope input:-webkit-autofill:hover,
+  .signin-input-theme-scope input:-webkit-autofill:focus,
+  .signin-input-theme-scope input:-webkit-autofill:active,
+  .signin-input-theme-scope input:-webkit-autofill:disabled,
+  .signin-input-theme-scope textarea:-webkit-autofill,
+  .signin-input-theme-scope textarea:-webkit-autofill:hover,
+  .signin-input-theme-scope textarea:-webkit-autofill:focus,
+  .signin-input-theme-scope textarea:-webkit-autofill:active,
+  .signin-input-theme-scope textarea:-webkit-autofill:disabled {
+    -webkit-text-fill-color: var(--fgColor-default) !important;
+    caret-color: var(--fgColor-default) !important;
+    -webkit-box-shadow: 0 0 0 1000px var(--bgColor-default) inset !important;
+    box-shadow: 0 0 0 1000px var(--bgColor-default) inset !important;
+    background-color: var(--bgColor-default) !important;
+    transition: background-color 9999s ease-in-out 0s !important;
+  }
+
+  .signin-input-theme-scope input:disabled,
+  .signin-input-theme-scope textarea:disabled {
+    -webkit-text-fill-color: var(--fgColor-muted) !important;
+    -webkit-box-shadow: 0 0 0 1000px var(--bgColor-default) inset !important;
+    box-shadow: 0 0 0 1000px var(--bgColor-default) inset !important;
+    background-color: var(--bgColor-default) !important;
+    opacity: 1 !important;
+  }
+`;
 // ── Component ────────────────────────────────────────────────────────
-export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp, name, title = 'Datalayer OTEL', description = 'Sign in to access the observability dashboard.', icon, leadingIcon = _jsx(TelescopeIcon, { size: 24 }), github = false, google = false, linkedin = false, apiKey = false, signUp = true, socialSignInNavigationTarget, }) => {
-    const headingText = name ?? title;
-    const headingIcon = icon ?? leadingIcon;
+export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp, name, title = 'Datalayer OTEL', description = 'Sign in to access the observability dashboard.', icon, leadingIcon = _jsx(TelescopeIcon, { size: 24 }), github = false, google = false, linkedin = false, apiKey = false, signUp = true, socialSignInNavigationTarget, asDoc = false, hideHero = false, calloutTitle, calloutDescription, passwordToggleLabel = 'Sign in with a password', signUpTitle = "Don't have an account?", signUpDescription = 'Create a free Datalayer account with your email address.', signUpLabel = 'Sign up with email', signUpHref = 'https://datalayer.ai/signup', forgotPasswordHref = '/password', forgotPasswordLabel = 'Forgot password?', showForgotPassword = true, socialButtonMarginTop = 3, actionButtonMaxWidth = 320, }) => {
+    const compactDocMode = asDoc && !hideHero;
+    const headingText = name ??
+        (asDoc && title === 'Datalayer OTEL' ? 'Datalayer Sign In' : title);
+    const headingIcon = icon ?? (asDoc ? _jsx(SignInIcon, { size: 24 }) : leadingIcon);
     const loginUrl = useMemo(() => {
         if (loginUrlProp)
             return loginUrlProp;
@@ -80,9 +114,14 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
     }, [loginUrlProp]);
     const [handle, setHandle] = useState('');
     const [password, setPassword] = useState('');
+    const [showPasswordForm, setShowPasswordForm] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
     const [loading, setLoading] = useState(false);
     const [socialLoading, setSocialLoading] = useState(false);
+    const [pendingSocialProvider, setPendingSocialProvider] = useState(null);
+    const [mfaUserUid, setMfaUserUid] = useState(null);
+    const [mfaCode, setMfaCode] = useState('');
+    const [mfaToken, setMfaToken] = useState(null);
     const [error, setError] = useState(null);
     const { enqueueToast } = useToast();
     // API Key dialog state
@@ -107,6 +146,7 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
             return;
         }
         setError(null);
+        setPendingSocialProvider(providerSpec.name);
         setSocialLoading(true);
         try {
             const iamUrl = getIAMUrlFromDocumentConfig();
@@ -143,6 +183,7 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
             const message = getErrorMessage(err);
             setError(message);
             enqueueToast(message, { variant: 'error' });
+            setPendingSocialProvider(null);
             setSocialLoading(false);
         }
     }, [
@@ -168,10 +209,21 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
         closeApiKeyDialog();
     }, [apiKeyValue, onApiKeySignIn, closeApiKeyDialog]);
     const handleSignUp = useCallback(() => {
-        window.open('https://datalayer.ai/signup', '_blank', 'noopener,noreferrer');
-    }, []);
+        window.location.assign(signUpHref);
+    }, [signUpHref]);
+    const handleForgotPassword = useCallback(() => {
+        if (!forgotPasswordHref) {
+            return;
+        }
+        if (forgotPasswordHref.startsWith('http://') ||
+            forgotPasswordHref.startsWith('https://')) {
+            window.open(forgotPasswordHref, '_blank', 'noopener,noreferrer');
+            return;
+        }
+        window.location.assign(forgotPasswordHref);
+    }, [forgotPasswordHref]);
     const submit = useCallback(async () => {
-        if (!handle || !password || loading)
+        if (asDoc || !handle || !password || loading)
             return;
         setLoading(true);
         setError(null);
@@ -186,7 +238,17 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
             }
             const data = await resp.json();
             if (data.success && data.token) {
-                onSignIn(data.token, handle);
+                const maybeUserUid = String(data?.user?.id || data?.user?.uid || '').trim();
+                const hasMfa = Boolean(data?.user?.mfaUrl);
+                if (hasMfa && maybeUserUid) {
+                    setMfaUserUid(maybeUserUid);
+                    setMfaToken(data.token);
+                    setError(null);
+                    return;
+                }
+                if (onSignIn) {
+                    onSignIn(data.token, handle);
+                }
             }
             else {
                 setError(data.message || 'Invalid username or password.');
@@ -198,71 +260,159 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
         finally {
             setLoading(false);
         }
-    }, [handle, password, loading, loginUrl, onSignIn]);
+    }, [asDoc, handle, password, loading, loginUrl, onSignIn]);
+    const submitMfa = useCallback(async () => {
+        if (asDoc || loading || !mfaUserUid || !mfaCode.trim() || !mfaToken) {
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            const loginUrlObject = new URL(loginUrl, window.location.origin);
+            const iamBaseUrl = loginUrlObject.pathname.endsWith('/api/iam/v1/login')
+                ? loginUrlObject.href.replace(/\/api\/iam\/v1\/login$/, '')
+                : `${loginUrlObject.origin}`;
+            const response = await fetch(`${iamBaseUrl}/api/iam/v1/users/${mfaUserUid}/mfa/validate`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ userUid: mfaUserUid, code: mfaCode.trim() }),
+            });
+            const payload = await response.json();
+            if (!response.ok || !payload?.success) {
+                throw new Error(payload?.message || 'Failed to validate your MFA code.');
+            }
+            if (onSignIn) {
+                onSignIn(mfaToken, handle);
+            }
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : String(err);
+            setError(message);
+            enqueueToast(message, { variant: 'error' });
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [
+        asDoc,
+        enqueueToast,
+        handle,
+        loading,
+        loginUrl,
+        mfaCode,
+        mfaToken,
+        mfaUserUid,
+        onSignIn,
+    ]);
     const handleKeyDown = useCallback((e) => {
-        if (e.key === 'Enter')
-            submit();
-    }, [submit]);
-    return (_jsx(Box, { sx: {
+        if (e.key === 'Enter') {
+            if (mfaUserUid) {
+                submitMfa();
+            }
+            else {
+                submit();
+            }
+        }
+    }, [mfaUserUid, submit, submitMfa]);
+    const socialDisabled = socialLoading || loading || asDoc;
+    return (_jsxs(Box, { className: "signin-input-theme-scope", sx: {
             display: 'flex',
-            alignItems: 'center',
+            alignItems: hideHero || compactDocMode ? 'flex-start' : 'center',
             justifyContent: 'center',
-            height: '100vh',
-            bg: 'canvas.default',
+            minHeight: hideHero || compactDocMode ? 'auto' : '100vh',
+            bg: hideHero ? 'transparent' : 'canvas.default',
             color: 'fg.default',
-        }, children: _jsxs(Box, { sx: {
-                width: 360,
-                p: 4,
-                borderRadius: 2,
-                border: '1px solid',
-                borderColor: 'border.default',
-                bg: 'canvas.subtle',
-            }, children: [_jsxs(Box, { sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 2,
-                        mb: 4,
-                        justifyContent: 'center',
-                    }, children: [headingIcon, _jsx(Heading, { sx: { fontSize: 3 }, children: headingText })] }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', mb: 3, textAlign: 'center' }, children: description }), _jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Username" }), _jsx(TextInput, { autoFocus: true, block: true, placeholder: "Your username", value: handle, onChange: e => setHandle(e.target.value), onKeyDown: handleKeyDown })] }), _jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Password" }), _jsx(TextInput, { block: true, placeholder: "Your password", type: showPassword ? 'text' : 'password', value: password, onChange: e => setPassword(e.target.value), onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => setShowPassword(!showPassword), icon: showPassword ? EyeClosedIcon : EyeIcon, "aria-label": showPassword ? 'Hide password' : 'Show password', sx: { color: 'var(--fgColor-muted)' } }) })] }), error && (_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, mb: 3, display: 'block' }, children: error })), _jsx(Button, { variant: "primary", block: true, disabled: loading || !handle || !password, onClick: submit, children: loading ? 'Signing in…' : 'Sign in' }), (github || google || linkedin) && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: 2,
-                                my: 3,
-                            }, children: [_jsx(Box, { sx: { flex: 1, height: '1px', bg: 'border.default' } }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "or" }), _jsx(Box, { sx: { flex: 1, height: '1px', bg: 'border.default' } })] }), github && (_jsx(Button, { block: true, leadingVisual: GithubMarkIcon, disabled: socialLoading, onClick: () => startOAuthSignIn(OAUTH2_PROVIDERS.github), sx: { mb: 2 }, children: "Sign in with GitHub" })), google && (_jsx(Button, { block: true, leadingVisual: GoogleIcon, disabled: socialLoading, onClick: () => startOAuthSignIn(OAUTH2_PROVIDERS.google), sx: { mb: linkedin ? 2 : 0 }, children: "Sign in with Google" })), linkedin && (_jsx(Button, { block: true, leadingVisual: LinkedInGreyIcon, disabled: socialLoading, onClick: () => startOAuthSignIn(OAUTH2_PROVIDERS.linkedin), children: "Sign in with LinkedIn" }))] })), signUp && (_jsx(Box, { sx: { mt: 2, display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { size: "small", variant: "invisible", leadingVisual: LinkExternalIcon, onClick: handleSignUp, children: "Sign Up" }) })), apiKey && onApiKeySignIn && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: 2,
-                                my: 3,
-                            }, children: [_jsx(Box, { sx: { flex: 1, height: '1px', bg: 'border.default' } }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "or" }), _jsx(Box, { sx: { flex: 1, height: '1px', bg: 'border.default' } })] }), _jsx(Button, { block: true, leadingVisual: KeyIcon, onClick: () => setShowApiKeyDialog(true), children: "Sign In with an API Key" }), showApiKeyDialog && (_jsx(Box, { role: "dialog", "aria-modal": "true", "aria-labelledby": "signin-api-key-title", onKeyDown: event => {
-                                if (event.key === 'Escape') {
-                                    closeApiKeyDialog();
-                                }
-                            }, onClick: closeApiKeyDialog, sx: {
-                                position: 'fixed',
-                                inset: 0,
-                                zIndex: 200,
-                                p: 3,
-                                bg: 'canvas.backdrop',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                            }, children: _jsxs(Box, { as: "form", onClick: event => event.stopPropagation(), onSubmit: event => {
-                                    event.preventDefault();
-                                    handleApiKeyAuthenticate();
-                                }, sx: {
-                                    width: 'min(560px, 100%)',
+            py: hideHero ? 0 : compactDocMode ? 2 : 4,
+        }, children: [_jsx(SignInInputGlobalStyle, {}), _jsxs(Box, { sx: {
+                    width: '100%',
+                    maxWidth: 440,
+                    p: 0,
+                }, children: [!hideHero && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 2,
+                                    mb: compactDocMode ? 2 : 3,
+                                    justifyContent: 'center',
+                                }, children: [headingIcon, _jsx(Heading, { sx: { fontSize: 3 }, children: headingText })] }), _jsx(Text, { as: "p", sx: {
+                                    fontSize: 1,
+                                    color: 'fg.muted',
+                                    mb: compactDocMode ? 2 : 3,
+                                    textAlign: 'center',
+                                }, children: description })] })), (calloutTitle || calloutDescription) && (_jsxs(Box, { sx: { mb: 3, textAlign: 'center' }, children: [calloutTitle && (_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 1 }, children: calloutTitle })), calloutDescription && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: calloutDescription }))] })), !mfaUserUid && (github || google || linkedin) && (_jsxs(_Fragment, { children: [github && (_jsx(Button, { block: true, size: "large", leadingVisual: pendingSocialProvider === 'github'
+                                    ? () => _jsx(Spinner, { size: "small" })
+                                    : GithubMarkIcon, disabled: socialDisabled, onClick: () => startOAuthSignIn(OAUTH2_PROVIDERS.github), sx: {
+                                    mt: socialButtonMarginTop,
+                                    maxWidth: actionButtonMaxWidth,
+                                    mx: 'auto',
+                                }, children: "Sign in with GitHub" })), google && (_jsx(Button, { block: true, size: "large", leadingVisual: pendingSocialProvider === 'google'
+                                    ? () => _jsx(Spinner, { size: "small" })
+                                    : GoogleIcon, disabled: socialDisabled, onClick: () => startOAuthSignIn(OAUTH2_PROVIDERS.google), sx: {
+                                    mt: socialButtonMarginTop,
+                                    maxWidth: actionButtonMaxWidth,
+                                    mx: 'auto',
+                                }, children: "Sign in with Google" })), linkedin && (_jsx(Button, { block: true, size: "large", leadingVisual: pendingSocialProvider === 'linkedin'
+                                    ? () => _jsx(Spinner, { size: "small" })
+                                    : LinkedInGreyIcon, disabled: socialDisabled, onClick: () => startOAuthSignIn(OAUTH2_PROVIDERS.linkedin), sx: {
+                                    mt: socialButtonMarginTop,
+                                    maxWidth: actionButtonMaxWidth,
+                                    mx: 'auto',
+                                }, children: "Sign in with LinkedIn" }))] })), !mfaUserUid && !showPasswordForm && (_jsx(Box, { sx: { mt: 3, display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { leadingVisual: KeyIcon, size: "large", block: true, disabled: asDoc || loading || socialLoading, onClick: () => setShowPasswordForm(true), sx: { maxWidth: actionButtonMaxWidth, mx: 'auto' }, children: passwordToggleLabel }) })), !mfaUserUid && showPasswordForm && (_jsxs(Box, { sx: { mt: 4 }, children: [_jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Username" }), _jsx(TextInput, { autoFocus: true, block: true, placeholder: "Your username", value: handle, disabled: loading || asDoc, onChange: e => setHandle(e.target.value), onKeyDown: handleKeyDown })] }), _jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Password" }), _jsx(TextInput, { block: true, placeholder: "Your password", type: showPassword ? 'text' : 'password', value: password, disabled: loading || asDoc, onChange: e => setPassword(e.target.value), onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => setShowPassword(!showPassword), disabled: loading || asDoc, icon: showPassword ? EyeClosedIcon : EyeIcon, "aria-label": showPassword ? 'Hide password' : 'Show password', sx: { color: 'var(--fgColor-muted)' } }) })] }), _jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    mt: 3,
+                                }, children: [_jsx(Button, { variant: "primary", disabled: loading || asDoc || !handle || !password, onClick: submit, children: loading ? 'Signing in…' : 'Sign in' }), showForgotPassword && (_jsx(Link, { as: "button", sx: {
+                                            fontSize: 1,
+                                            cursor: asDoc ? 'not-allowed' : 'pointer',
+                                            background: 'none',
+                                            border: 'none',
+                                            opacity: asDoc ? 0.6 : 1,
+                                        }, onClick: () => {
+                                            if (asDoc || loading) {
+                                                return;
+                                            }
+                                            handleForgotPassword();
+                                        }, children: forgotPasswordLabel }))] })] })), mfaUserUid && (_jsxs(_Fragment, { children: [_jsxs(FormControl, { required: true, sx: { mb: 3, mt: 2 }, children: [_jsx(FormControl.Label, { children: "MFA Code" }), _jsx(TextInput, { autoFocus: true, block: true, placeholder: "Your MFA code", value: mfaCode, disabled: loading || asDoc, onChange: e => setMfaCode(e.target.value), onKeyDown: handleKeyDown })] }), _jsx(Button, { variant: "primary", block: true, disabled: loading || asDoc || !mfaCode.trim(), onClick: submitMfa, sx: { maxWidth: actionButtonMaxWidth, mx: 'auto' }, children: loading ? 'Validating…' : 'Validate MFA Code' })] })), error && (_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, mt: 3, display: 'block' }, children: error })), signUp && (_jsxs(Box, { sx: {
+                            mt: 4,
+                            pt: 4,
+                            textAlign: 'center',
+                            borderTop: '1px solid',
+                            borderColor: 'border.muted',
+                        }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: signUpTitle }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, mb: 3 }, children: signUpDescription }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { variant: "primary", size: "large", leadingVisual: MailIcon, disabled: asDoc || loading, onClick: handleSignUp, children: signUpLabel }) })] })), apiKey && onApiKeySignIn && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 2,
+                                    my: 3,
+                                }, children: [_jsx(Box, { sx: { flex: 1, height: '1px', bg: 'border.default' } }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "or" }), _jsx(Box, { sx: { flex: 1, height: '1px', bg: 'border.default' } })] }), _jsx(Button, { block: true, leadingVisual: KeyIcon, disabled: asDoc || loading || socialLoading, onClick: () => setShowApiKeyDialog(true), sx: { maxWidth: actionButtonMaxWidth, mx: 'auto' }, children: "Sign In with an API Key" }), showApiKeyDialog && (_jsx(Box, { role: "dialog", "aria-modal": "true", "aria-labelledby": "signin-api-key-title", onKeyDown: event => {
+                                    if (event.key === 'Escape') {
+                                        closeApiKeyDialog();
+                                    }
+                                }, onClick: closeApiKeyDialog, sx: {
+                                    position: 'fixed',
+                                    inset: 0,
+                                    zIndex: 200,
                                     p: 3,
-                                    borderRadius: 2,
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    bg: 'canvas.overlay',
-                                    color: 'fg.default',
-                                    boxShadow: 'shadow.large',
-                                }, children: [_jsx(Heading, { id: "signin-api-key-title", sx: { fontSize: 2, mb: 2 }, children: "Enter your API Key" }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "API Key" }), _jsx(Textarea, { block: true, required: true, autoFocus: true, placeholder: "Paste your API key here", value: apiKeyValue, onInput: (e) => setApiKeyValue(e.target.value), ref: apiKeyRef })] }), _jsxs(Box, { sx: {
-                                            mt: 3,
-                                            display: 'flex',
-                                            justifyContent: 'flex-end',
-                                            gap: 2,
-                                        }, children: [_jsx(Button, { type: "button", onClick: closeApiKeyDialog, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", disabled: !apiKeyValue.trim(), children: "Authenticate" })] })] }) }))] }))] }) }));
+                                    bg: 'canvas.backdrop',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                }, children: _jsxs(Box, { as: "form", onClick: event => event.stopPropagation(), onSubmit: event => {
+                                        event.preventDefault();
+                                        handleApiKeyAuthenticate();
+                                    }, sx: {
+                                        width: 'min(560px, 100%)',
+                                        p: 3,
+                                        borderRadius: 2,
+                                        border: '1px solid',
+                                        borderColor: 'border.default',
+                                        bg: 'canvas.overlay',
+                                        color: 'fg.default',
+                                        boxShadow: 'shadow.large',
+                                    }, children: [_jsx(Heading, { id: "signin-api-key-title", sx: { fontSize: 2, mb: 2 }, children: "Enter your API Key" }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "API Key" }), _jsx(Textarea, { block: true, required: true, autoFocus: true, placeholder: "Paste your API key here", value: apiKeyValue, onInput: (e) => setApiKeyValue(e.target.value), ref: apiKeyRef })] }), _jsxs(Box, { sx: {
+                                                mt: 3,
+                                                display: 'flex',
+                                                justifyContent: 'flex-end',
+                                                gap: 2,
+                                            }, children: [_jsx(Button, { type: "button", onClick: closeApiKeyDialog, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", disabled: !apiKeyValue.trim(), children: "Authenticate" })] })] }) }))] }))] })] }));
 };
 export default SignInSimple;

package/lib/views/profile/UserBadge.js

@@ -36,6 +36,9 @@ export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, ex
     const user = getDatalayerJwtUser(token);
     const displayName = getDatalayerDisplayName(user, user?.handle ?? '');
     const claims = parseJwtPayload(token);
+    const popoverDisplayName = claims?.user
+        ? getDatalayerDisplayName(claims.user, claims.user.handle ?? '')
+        : displayName;
     // Colour the trigger label based on token expiry:
     // - red when already expired,
     // - yellow when expiring within ``expirationWarningMs``,
@@ -84,14 +87,14 @@ export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, ex
                 }, children: [_jsxs(Box, { sx: {
                             px: 3,
                             py: 2,
-                            bg: 'canvas.subtle',
+                            bg: 'canvas.inset',
                             borderBottom: '1px solid',
                             borderColor: 'border.default',
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'space-between',
                             gap: 2,
-                        }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: "JWT Claims" }), variant === 'small' && showExpandToggle && (_jsx(Box, { as: "button", type: "button", onClick: () => setExpanded(v => !v), "aria-label": expanded ? 'Hide full JWT claims' : 'Show full JWT claims', "aria-expanded": expanded, title: expanded ? 'Hide full JWT claims' : 'Show full JWT claims', sx: {
+                        }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: popoverDisplayName || 'User' }), variant === 'small' && showExpandToggle && (_jsx(Box, { as: "button", type: "button", onClick: () => setExpanded(v => !v), "aria-label": expanded ? 'Hide full JWT claims' : 'Show full JWT claims', "aria-expanded": expanded, title: expanded ? 'Hide full JWT claims' : 'Show full JWT claims', sx: {
                                     appearance: 'none',
                                     border: '1px solid',
                                     borderColor: 'border.default',
@@ -120,7 +123,7 @@ export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, ex
                                 gridTemplateColumns: '90px 1fr',
                                 gap: 1,
                                 fontSize: 0,
-                            }, children: [claims.user.email && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.email })] })), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.handle }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontFamily: 'mono', wordBreak: 'break-all' }, children: claims.user.uid }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Issued" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: new Date(claims.iat * 1000).toISOString() }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Expires" }), _jsxs(Box, { sx: {
+                            }, children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.firstName }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.lastName }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Display name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: getDatalayerDisplayName(claims.user, claims.user.handle) }), claims.user.email && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.email })] })), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.handle }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontFamily: 'mono', wordBreak: 'break-all' }, children: claims.user.uid }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Issued" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: new Date(claims.iat * 1000).toISOString() }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Expires" }), _jsxs(Box, { sx: {
                                         display: 'flex',
                                         alignItems: 'center',
                                         gap: 2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "1.1.48",
+  "version": "1.1.50",
   "type": "module",
   "workspaces": [
     ".",
@@ -224,7 +224,7 @@
     "playwright": "^1.53.2",
     "prettier": "^3.6.2",
     "react-router-dom": "^6.22.3",
-    "rimraf": "^6.0.1",
+    "rimraf": "^6.1.3",
     "storybook": "^9.1.1",
     "typedoc-plugin-markdown": "^4.0.0",
     "typescript": "^5.8.3",

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

@@ -1 +0,0 @@
-export {};

package/lib/components/tokens/index.js

@@ -1,5 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-export {};