@datalayer/core 1.1.48 → 1.1.49

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 || '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: () => {
                                                             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/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/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/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/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,11 @@ 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 { Box, Button, FormControl, Heading, Link, Spinner, Text, Textarea, TextInput, } from '@primer/react';
+import { EyeIcon, EyeClosedIcon, KeyIcon, 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',
@@ -69,7 +68,7 @@ const getErrorMessage = (error, fallback = 'Unable to start social sign-in.') =>
     return fallback;
 };
 // ── 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, }) => {
+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 loginUrl = useMemo(() => {
@@ -80,9 +79,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 +111,7 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
             return;
         }
         setError(null);
+        setPendingSocialProvider(providerSpec.name);
         setSocialLoading(true);
         try {
             const iamUrl = getIAMUrlFromDocumentConfig();
@@ -143,6 +148,7 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
             const message = getErrorMessage(err);
             setError(message);
             enqueueToast(message, { variant: 'error' });
+            setPendingSocialProvider(null);
             setSocialLoading(false);
         }
     }, [
@@ -168,10 +174,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 +203,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,42 +225,130 @@ 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]);
+        if (e.key === 'Enter') {
+            if (mfaUserUid) {
+                submitMfa();
+            }
+            else {
+                submit();
+            }
+        }
+    }, [mfaUserUid, submit, submitMfa]);
+    const socialDisabled = socialLoading || loading || asDoc;
     return (_jsx(Box, { sx: {
             display: 'flex',
-            alignItems: 'center',
+            alignItems: hideHero ? 'flex-start' : 'center',
             justifyContent: 'center',
-            height: '100vh',
-            bg: 'canvas.default',
+            minHeight: hideHero ? 'auto' : '100vh',
+            bg: hideHero ? 'transparent' : 'canvas.default',
             color: 'fg.default',
+            py: hideHero ? 0 : 4,
         }, 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: {
+                width: '100%',
+                maxWidth: 440,
+                p: 0,
+            }, children: [!hideHero && (_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: {
+                                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, 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 => {
+                            }, 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();
                                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "1.1.48",
+  "version": "1.1.49",
   "type": "module",
   "workspaces": [
     ".",