@datalayer/core 1.1.49 → 1.1.56

package/lib/state/substates/ProfileState.js

@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * ProfileState — the one place the authenticated user's profile lives.
+ *
+ * The avatar and the banner used to be read from whatever carried them at
+ * each call site — the IAM user, a whoami response, a form snapshot — and
+ * the surfaces drifted: a banner updated on the profile page did not reach
+ * the user menu until the page reloaded. Every surface showing the profile
+ * (user menu, sidebars, profile views) reads this store instead, and every
+ * flow that learns something about the profile (login, `GET /me`, a profile
+ * update) writes it here.
+ *
+ * The store is fed automatically by {@link IAMState} on login, profile
+ * update and logout, and by the `useMe` query with the full profile — the
+ * consumers only ever read.
+ *
+ * @module state/substates/ProfileState
+ */
+import { useStore } from 'zustand';
+import { createStore } from 'zustand/vanilla';
+const userToProfile = (user) => user
+    ? {
+        id: user.id,
+        uid: user.uid,
+        handle: user.handle,
+        email: user.email,
+        firstName: user.firstName,
+        lastName: user.lastName,
+        displayName: user.displayName,
+        initials: user.initials,
+        avatarUrl: user.avatarUrl,
+        avatarIcon: user.avatarIcon,
+        banner: user.banner,
+        origin: user.origin,
+        roles: user.roles,
+    }
+    : undefined;
+export const profileStore = createStore(set => ({
+    profile: undefined,
+    setProfile: profile => set({ profile }),
+    updateProfile: partial => set(state => ({ profile: { ...state.profile, ...partial } })),
+    setProfileFromUser: user => set(state => {
+        const profile = userToProfile(user);
+        if (!profile) {
+            return state;
+        }
+        // A login refresh may know less than a profile update that already
+        // landed (the anonymous whoami has no banner): merge, newest wins,
+        // but never erase a field with undefined.
+        const merged = { ...state.profile };
+        for (const [key, value] of Object.entries(profile)) {
+            if (value !== undefined) {
+                merged[key] = value;
+            }
+        }
+        return { profile: merged };
+    }),
+    clearProfile: () => set({ profile: undefined }),
+}));
+export function useProfileStore(selector) {
+    return useStore(profileStore, selector);
+}
+/** The profile, for surfaces that show it. */
+export const useProfile = () => useProfileStore(state => state.profile);
+export default useProfileStore;

package/lib/state/substates/TeamState.d.ts

@@ -4,6 +4,12 @@ export type ITeamState = {
 };
 export type TeamState = ITeamState & {
     update: (teams: IBaseTeam[]) => void;
+    /**
+     * Merge what just changed into the team of the list — the way a settings
+     * save keeps every surface reading this store current (avatar, banner,
+     * name…) without refetching the list.
+     */
+    updateTeam: (team: Partial<IBaseTeam> & Pick<IBaseTeam, 'id'>) => void;
 };
 export declare const teamStore: import("zustand").StoreApi<TeamState>;
 export declare function useTeamStore(): TeamState;

package/lib/state/substates/TeamState.js

@@ -10,6 +10,9 @@ export const teamStore = createStore((set, get) => ({
     update: (teams) => set((state) => ({
         teams,
     })),
+    updateTeam: team => set((state) => ({
+        teams: state.teams.map(known => known.id === team.id ? { ...known, ...team } : known),
+    })),
 }));
 export function useTeamStore(selector) {
     return useStore(teamStore, selector);

package/lib/state/substates/index.d.ts

@@ -2,6 +2,7 @@ export * from './CoreState';
 export * from './DatasourceState';
 export * from './IAMState';
 export * from './LayoutState';
+export * from './ProfileState';
 export * from './OrganizationState';
 export * from './SurveysState';
 export * from './TeamState';

package/lib/state/substates/index.js

@@ -6,6 +6,7 @@ export * from './CoreState.js';
 export * from './DatasourceState.js';
 export * from './IAMState.js';
 export * from './LayoutState.js';
+export * from './ProfileState.js';
 export * from './OrganizationState.js';
 export * from './SurveysState.js';
 export * from './TeamState.js';

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

@@ -16,7 +16,7 @@ export interface SignInSimpleProps {
     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.
+     * If not provided the "Sign in with an API Key" button is hidden.
      */
     onApiKeySignIn?: (apiKey: string) => void;
     /**

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,43 @@ 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 +314,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.56",
   "type": "module",
   "workspaces": [
     ".",
@@ -90,7 +90,7 @@
     "watch:lib:src": "tsc -b -w",
     "type-check:watch": "tsc -b -w --noEmit",
     "examples": "run-p jupyter:start examples:vite",
-    "examples:vite": "VITE_DATALAYER_URL=http://localhost:8888 vite --config vite.examples.config.ts",
+    "examples:vite": "VITE_DATALAYER_IAM_URL=http://localhost:8888 vite --config vite.examples.config.ts",
     "examples:nextjs": "npm run dev --workspace=nextjj-example",
     "jupyter:start": "./dev/sh/start-jupyter-server.sh",
     "prepare": "husky || true",
@@ -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 {};