@datalayer/core 1.1.49 → 1.1.50

package/lib/components/auth/Login.js

@@ -183,7 +183,7 @@ 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, 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: () => {
+    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);
                                                         }, disabled: loading, icon: passwordVisibility ? EyeClosedIcon : EyeIcon, "aria-label": passwordVisibility
                                                             ? 'Hide password'

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/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/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/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.js

@@ -14,8 +14,9 @@ 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 { createGlobalStyle } from 'styled-components';
 import { Box, Button, FormControl, Heading, Link, Spinner, Text, Textarea, TextInput, } from '@primer/react';
-import { EyeIcon, EyeClosedIcon, KeyIcon, TelescopeIcon, } from '@primer/octicons-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';
@@ -67,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, 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 headingText = name ?? title;
-    const headingIcon = icon ?? leadingIcon;
+    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;
@@ -280,104 +315,104 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
         }
     }, [mfaUserUid, submit, submitMfa]);
     const socialDisabled = socialLoading || loading || asDoc;
-    return (_jsx(Box, { sx: {
+    return (_jsxs(Box, { className: "signin-input-theme-scope", sx: {
             display: 'flex',
-            alignItems: hideHero ? 'flex-start' : 'center',
+            alignItems: hideHero || compactDocMode ? 'flex-start' : 'center',
             justifyContent: 'center',
-            minHeight: hideHero ? 'auto' : '100vh',
+            minHeight: hideHero || compactDocMode ? 'auto' : '100vh',
             bg: hideHero ? 'transparent' : 'canvas.default',
             color: 'fg.default',
-            py: hideHero ? 0 : 4,
-        }, children: _jsxs(Box, { sx: {
-                width: '100%',
-                maxWidth: 440,
-                p: 0,
-            }, children: [!hideHero && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: 2,
-                                mb: 3,
-                                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 })] })), (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", 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,
-                                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.49",
+  "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 {};