@datalayer/core 1.1.50 → 1.1.57

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>
@@ -18,7 +18,7 @@
 
 ## Overview
 
-Datalayer Core is the foundational package that powers the [Datalayer AI Platform](https://datalayer.app/). It provides a TypesScript and Python packages as a Command Line Interface (CLI) for AI engineers, data scientists, and researchers to seamlessly integrate scalable compute runtimes into their workflows.
+Datalayer Core is the foundational package that powers the [Datalayer AI Platform](https://datalayer.ai). It provides a TypesScript and Python packages as a Command Line Interface (CLI) for AI engineers, data scientists, and researchers to seamlessly integrate scalable compute runtimes into their workflows.
 
 This package serves as the base foundation used by many other Datalayer packages, containing core application classes, configuration, and unified APIs for authentication, runtime management, and code execution in cloud-based environments.
 
@@ -66,8 +66,6 @@ npm install
 
 ## Quick Start with Python
 
-### 1. Authentication
-
 Set your Datalayer token as an environment variable:
 
 ```bash
@@ -89,31 +87,19 @@ if client.authenticate():
     print("Successfully authenticated!")
 ```
 
-### 2. Runtime, Snapshots, and Evals
-
-Runtime execution, snapshot workflows, and evals CLI are now documented and maintained in:
+## Architecture
 
-- [agent-runtimes README](https://github.com/datalayer/agent-runtimes/blob/main/README.md)
-- [agent-runtimes CLI docs](https://agent-runtimes.datalayer.tech/cli)
+Datalayer Core serves as the foundation for the entire Datalayer ecosystem:
 
-Use `agent-runtimes` for runtime workloads (`RuntimeClient`, `@datalayer`, snapshots, and evals), and use `datalayer-core` for account/platform operations (authentication, secrets, API keys, usage, profile).
+- **Base Classes**: Core application classes inherited by other Datalayer packages
+- **Configuration Management**: Centralized configuration system for all Datalayer components
+- **Authentication Layer**: Unified authentication across all Datalayer services
+- **Runtime Abstraction**: Common interface for different types of compute runtimes
+- **Resource Management**: Automatic cleanup and lifecycle management
 
 ## Examples
 
-Examples have moved to Agent Runtimes:
-
-- [Agent Runtimes examples README](https://github.com/datalayer/agent-runtimes/blob/main/examples/README.md)
-- [Agent Runtimes examples directory](https://github.com/datalayer/agent-runtimes/tree/main/examples)
-
-## Platform Integration
-
-Datalayer adds AI capabilities and scalable compute runtimes to your development workflows. The platform is designed to seamlessly integrate into your existing processes and supercharge your computations with the processing power you need.
-
-Key platform features accessible through this Client and CLI:
-
-- **Remote Runtimes**: Execute code on powerful remote machines with CPU, RAM, and GPU resources
-- **Multiple Interfaces**: Access and consume runtimes through Python Client, CLI, or other integrated tools
-- **Scalable Compute**: Dynamically scale your computational resources based on workload requirements
+- [OTEL example README](./examples/otel/README.md)
 
 ## Documentation
 
@@ -193,16 +179,6 @@ This Client is designed to be simple and extensible. We welcome contributions! P
 
 For issues and enhancement requests, please use the [GitHub issue tracker](https://github.com/datalayer/core/issues).
 
-## Architecture
-
-Datalayer Core serves as the foundation for the entire Datalayer ecosystem:
-
-- **Base Classes**: Core application classes inherited by other Datalayer packages
-- **Configuration Management**: Centralized configuration system for all Datalayer components
-- **Authentication Layer**: Unified authentication across all Datalayer services
-- **Runtime Abstraction**: Common interface for different types of compute runtimes
-- **Resource Management**: Automatic cleanup and lifecycle management
-
 ## Use Cases
 
 - **AI/ML Development**: Scale your machine learning workflows with cloud compute using Client or CLI
@@ -219,15 +195,16 @@ This project is licensed under the [BSD 3-Clause License](https://github.com/dat
 
 - **Documentation**: [Datalayer Platform Documentation](https://datalayer.ai/docs/)
 - **Issues**: [GitHub Issues](https://github.com/datalayer/core/issues)
-- **Community**: [Datalayer Platform](https://datalayer.app/)
+- **Community**: [Datalayer Platform](https://datalayer.ai)
 
 ---
 
-<p align="center">
-  <img src="https://assets.datalayer.tech/datalayer-25.svg" alt="Datalayer Logo" width="200"></img>
-</p>
+<div align="center">
 
-<p align="center">
-  <strong>🚀 AI Agents for Data Analysis</strong><br></br>
-  <a href="https://datalayer.app/">Get started with Datalayer today!</a>
-</p>
+**If this project is helpful to you, please give us a ⭐️**
+
+Made with ❤️ by [Datalayer](https://datalayer.ai)
+
+<img src="https://assets.datalayer.tech/datalayer-25.svg" alt="Datalayer Logo" width="200"></img>
+
+</div>

package/lib/client/auth/AuthenticationManager.js

@@ -25,15 +25,17 @@ export class AuthenticationManager {
      */
     constructor(iamUrl, storage) {
         this.iamUrl = iamUrl;
-        // Extract datalayer_url (remove /api/iam/v1 if present)
-        const datalayerUrl = iamUrl.replace('/api/iam/v1', '');
-        // CRITICAL: Pass datalayerUrl to storage for keyring compatibility
+        // Extract the service URL (remove /api/iam/v1 if present)
+        // The service URL the credentials are stored under: the IAM one, without
+        // the path of its API.
+        const serviceUrl = iamUrl.replace('/api/iam/v1', '');
+        // CRITICAL: Pass the service URL to storage for keyring compatibility
         if (!storage) {
             if (typeof window !== 'undefined') {
                 this.storage = new BrowserStorage();
             }
             else {
-                this.storage = new NodeStorage(datalayerUrl); // Pass datalayerUrl as serviceUrl
+                this.storage = new NodeStorage(serviceUrl);
             }
         }
         else {

package/lib/client/auth/strategies.js

@@ -39,6 +39,8 @@ class BaseAuthStrategy {
             first_name_t: response.profile.first_name_t || response.profile.first_name || '',
             last_name_t: response.profile.last_name_t || response.profile.last_name || '',
             avatar_url_s: response.profile.avatar_url_s || response.profile.avatar_url,
+            avatar_icon_s: response.profile.avatar_icon_s,
+            banner_s: response.profile.banner_s,
         };
         return new UserDTO(userData, undefined);
     }

package/lib/components/animation/AnimatedText.d.ts

@@ -0,0 +1,98 @@
+/**
+ * One piece of an animated line.
+ *
+ * A string is written as it is. An object cycles through its words, and every
+ * cycling piece of the same line advances together — so a sentence can name
+ * two things that change at once and still read as one sentence rather than
+ * two independent slot machines.
+ */
+export type AnimatedTextPart = string | AnimatedTextWords;
+export type AnimatedTextWords = {
+    /** The words this piece cycles through. */
+    words: string[];
+    /**
+     * The colour of the words, as a Primer foreground token name — `accent`,
+     * `success`, `attention`, `severe`, `done`, `muted` — or any CSS colour.
+     * Given a token name the colour follows the theme, light or dark, because
+     * it resolves to the CSS variable Primer sets.
+     */
+    color?: AnimatedTextColor;
+    /** Overrides the background of this piece alone. */
+    background?: string;
+};
+export type AnimatedTextColor = 'accent' | 'success' | 'attention' | 'severe' | 'done' | 'muted' | 'default' | (string & {});
+export interface AnimatedTextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> {
+    /** Text before the cycling words. Ignored when `parts` is given. */
+    prefix?: string;
+    /** The words to cycle through. Ignored when `parts` is given. */
+    words?: string[];
+    /** Text after the cycling words. Ignored when `parts` is given. */
+    suffix?: string;
+    /**
+     * The line, as a sequence of fixed and cycling pieces. Every cycling piece
+     * advances on the same tick, so several of them stay in step.
+     */
+    parts?: AnimatedTextPart[];
+    /** Colour applied to cycling pieces that do not name their own. */
+    color?: AnimatedTextColor;
+    /**
+     * The colours to draw cycling words in when neither the piece nor `color`
+     * names one. Each word takes a different colour, and changes colour as it
+     * changes word.
+     */
+    palette?: string[];
+    /**
+     * What sits behind the cycling words. White by default so a coloured word
+     * stays readable over artwork; pass `'transparent'` for a plain background
+     * where the plate is not wanted.
+     */
+    background?: string;
+    /**
+     * Hold every cycling piece at the width of the longest word it can show,
+     * instead of letting it size itself to whichever word is currently up.
+     *
+     * Off by default, because it changes the look: a piece is then as wide as
+     * its longest word even when a short one is showing, which is right for a
+     * line that reads as a slot being filled and wrong for one meant to read as
+     * an ordinary sentence.
+     *
+     * Turn it on when the line is set large, or is close to the width it has.
+     * Words of different lengths otherwise shove the rest of the sentence
+     * sideways on every tick, and the longest combination can take a line that
+     * fits on one row and drop it onto two — which, since a theme may set any
+     * typeface, is not something a caller can rule out by measuring.
+     *
+     * The reservation is made by the browser, not by a measurement: all of the
+     * words are laid into one grid cell and the ones not showing are hidden, so
+     * the piece is exactly as wide as the widest of them in the font and size it
+     * actually ends up with.
+     */
+    reserveWidth?: boolean;
+    intervalMs?: number;
+    transitionMs?: number;
+}
+/**
+ * A line of text in which one or more words change, in step.
+ *
+ * ```tsx
+ * <AnimatedText
+ *   parts={[
+ *     'Bring ',
+ *     { words: ['Claude', 'Codex', 'Cursor'], color: 'accent' },
+ *     '. Datalayer gives it a secure endpoint to your ',
+ *     { words: ['Notebooks', 'Data', 'Code Sandboxes'], color: 'success' },
+ *     '.',
+ *   ]}
+ * />
+ * ```
+ *
+ * Set large, or set close to the width available, pass `reserveWidth` so the
+ * cycling pieces hold the width of their longest word and the line neither
+ * shifts on each tick nor wraps on its longest combination:
+ *
+ * ```tsx
+ * <AnimatedText reserveWidth parts={[...]} background="transparent" />
+ * ```
+ */
+export declare function AnimatedText({ prefix, words, suffix, parts, color, palette, background, reserveWidth, intervalMs, transitionMs, style, ...rest }: AnimatedTextProps): JSX.Element;
+export default AnimatedText;

package/lib/components/animation/AnimatedText.js

@@ -0,0 +1,220 @@
+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, useMemo, useState } from 'react';
+/** The Primer foreground tokens, which carry the theme with them. */
+const THEME_COLORS = {
+    accent: 'var(--fgColor-accent, var(--color-accent-fg))',
+    success: 'var(--fgColor-success, var(--color-success-fg))',
+    attention: 'var(--fgColor-attention, var(--color-attention-fg))',
+    severe: 'var(--fgColor-severe, var(--color-severe-fg))',
+    done: 'var(--fgColor-done, var(--color-done-fg))',
+    muted: 'var(--fgColor-muted, var(--color-fg-muted))',
+    default: 'inherit',
+};
+/**
+ * The colours the cycling words are drawn in when none is named.
+ *
+ * Fixed values rather than Primer's theme tokens, because the plate behind
+ * the words is white in either theme: a token would resolve to its light-mode
+ * variant in the dark and wash out. Every one of these sits between 4.8 and
+ * 5.4 contrast on white — comfortably readable, and none of them the pale or
+ * near-black ends of the palette.
+ */
+const MEDIUM_PALETTE = [
+    '#0969da', // blue
+    '#1a7f37', // green
+    '#8250df', // purple
+    '#bc4c00', // orange
+    '#cf222e', // red
+    '#1b7c83', // teal
+    '#bf3989', // pink
+];
+/**
+ * What sits behind the cycling words.
+ *
+ * A coloured word over a photograph or an illustrated hero is legible only by
+ * luck: the contrast changes with whatever the artwork happens to be doing
+ * behind that glyph. A solid plate underneath makes it legible by
+ * construction, whatever it is laid over.
+ */
+const DEFAULT_BACKGROUND = '#ffffff';
+/**
+ * Resolve a colour: a known token becomes the themed CSS variable, anything
+ * else is passed through so a caller can still give a literal colour.
+ */
+function resolveColor(color) {
+    if (!color) {
+        return undefined;
+    }
+    return THEME_COLORS[color] ?? color;
+}
+/** Whether this reader has asked for less movement. */
+function usePrefersReducedMotion() {
+    const [reduced, setReduced] = useState(false);
+    useEffect(() => {
+        if (typeof window === 'undefined' || !window.matchMedia) {
+            return;
+        }
+        const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const update = () => setReduced(query.matches);
+        update();
+        query.addEventListener('change', update);
+        return () => query.removeEventListener('change', update);
+    }, []);
+    return reduced;
+}
+/**
+ * A line of text in which one or more words change, in step.
+ *
+ * ```tsx
+ * <AnimatedText
+ *   parts={[
+ *     'Bring ',
+ *     { words: ['Claude', 'Codex', 'Cursor'], color: 'accent' },
+ *     '. Datalayer gives it a secure endpoint to your ',
+ *     { words: ['Notebooks', 'Data', 'Code Sandboxes'], color: 'success' },
+ *     '.',
+ *   ]}
+ * />
+ * ```
+ *
+ * Set large, or set close to the width available, pass `reserveWidth` so the
+ * cycling pieces hold the width of their longest word and the line neither
+ * shifts on each tick nor wraps on its longest combination:
+ *
+ * ```tsx
+ * <AnimatedText reserveWidth parts={[...]} background="transparent" />
+ * ```
+ */
+export function AnimatedText({ prefix, words, suffix, parts, color, palette = MEDIUM_PALETTE, background = DEFAULT_BACKGROUND, reserveWidth = false, intervalMs = 1800, transitionMs = 240, style, ...rest }) {
+    // The words still change for a reader who asked for less movement — that is
+    // what this component is for — but they do it without travelling, and the
+    // fade is dropped rather than merely shortened.
+    const reducedMotion = usePrefersReducedMotion();
+    // The older three-prop form is the same thing with one cycling piece.
+    const resolvedParts = useMemo(() => {
+        if (parts && parts.length > 0) {
+            return parts;
+        }
+        return [prefix ?? '', { words: words ?? [] }, suffix ?? ''];
+    }, [parts, prefix, suffix, words]);
+    const cyclingParts = useMemo(() => resolvedParts.filter((part) => typeof part !== 'string' &&
+        part.words.filter(word => word.trim().length > 0).length > 0), [resolvedParts]);
+    // One index for the whole line: what makes several cycling pieces change
+    // together rather than drifting apart.
+    const [step, setStep] = useState(0);
+    const [visible, setVisible] = useState(true);
+    // The tick has to run until every piece has come back round, so a line
+    // pairing three words with four does not repeat after three.
+    const cycleLength = useMemo(() => {
+        const lengths = cyclingParts.map(part => part.words.filter(word => word.trim().length > 0).length);
+        return lengths.reduce((total, length) => lowestCommonMultiple(total, length), 1);
+    }, [cyclingParts]);
+    useEffect(() => {
+        if (cycleLength <= 1) {
+            return;
+        }
+        const timer = setInterval(() => {
+            setVisible(false);
+            setTimeout(() => {
+                setStep(previous => (previous + 1) % cycleLength);
+                setVisible(true);
+            }, transitionMs);
+        }, intervalMs);
+        return () => {
+            clearInterval(timer);
+        };
+    }, [cycleLength, intervalMs, transitionMs]);
+    /**
+     * The colour of the cycling piece at `ordinal`, for the current step.
+     *
+     * Derived rather than random so a re-render does not repaint the line, and
+     * offset by the ordinal so two words showing at once never take the same
+     * colour. The palette length being prime keeps the pairing from settling
+     * into a short repeating pattern.
+     */
+    const paletteColor = (ordinal) => {
+        if (palette.length === 0) {
+            return undefined;
+        }
+        return palette[(step * 2 + ordinal * 3) % palette.length];
+    };
+    /** How a word arrives and leaves, and how far it travels doing it. */
+    const motion = reducedMotion
+        ? { transition: undefined }
+        : {
+            transition: `opacity ${transitionMs}ms ease, transform ${transitionMs}ms ease`,
+        };
+    const offset = reducedMotion ? 'translateY(0)' : 'translateY(0.25em)';
+    /** The plate the words of a piece are drawn on, and the colour they take. */
+    const pieceStyle = (part, ordinal) => {
+        const plate = part.background ?? background;
+        const hasPlate = plate !== 'transparent' && plate !== 'none';
+        return {
+            // An explicitly named colour always wins; otherwise the palette.
+            color: resolveColor(part.color ?? color) ?? paletteColor(ordinal),
+            backgroundColor: hasPlate ? plate : undefined,
+            // Enough to keep the plate clear of the glyphs without the words
+            // drifting apart from the fixed text around them.
+            padding: hasPlate ? '0 0.25em' : undefined,
+            borderRadius: hasPlate ? '0.25em' : undefined,
+        };
+    };
+    const wordStyle = (part, ordinal) => ({
+        ...pieceStyle(part, ordinal),
+        display: 'inline-block',
+        ...motion,
+        opacity: visible ? 1 : 0,
+        transform: visible ? 'translateY(0)' : offset,
+    });
+    /**
+     * The piece as a slot: a grid of one cell, holding every word it can show.
+     *
+     * The cell takes the width of its widest occupant, so the slot is the same
+     * width whichever word is up — which is the whole point of `reserveWidth`,
+     * and why the words have to be in the document rather than measured.
+     */
+    const slotStyle = (part, ordinal) => ({
+        ...pieceStyle(part, ordinal),
+        display: 'inline-grid',
+        justifyItems: 'center',
+    });
+    const wordInSlotStyle = (showing) => ({
+        gridArea: '1 / 1',
+        whiteSpace: 'nowrap',
+        // Hidden rather than merely transparent: the words not showing should be
+        // out of the accessibility tree and out of the way of the pointer, while
+        // still holding the cell open.
+        visibility: showing ? 'visible' : 'hidden',
+        ...motion,
+        opacity: showing && visible ? 1 : 0,
+        transform: showing && visible ? 'translateY(0)' : offset,
+    });
+    return (_jsx("span", { ...rest, style: style, children: resolvedParts.map((part, index) => {
+            if (typeof part === 'string') {
+                return _jsx("span", { children: part }, `fixed-${index}`);
+            }
+            const available = part.words.filter(word => word.trim().length > 0);
+            if (available.length === 0) {
+                return null;
+            }
+            const ordinal = cyclingParts.indexOf(part);
+            const current = step % available.length;
+            return (_jsx("span", { "aria-live": "polite", style: reserveWidth ? slotStyle(part, ordinal) : wordStyle(part, ordinal), children: reserveWidth
+                    ? available.map((word, wordIndex) => (_jsx("span", { "aria-hidden": wordIndex === current ? undefined : true, style: wordInSlotStyle(wordIndex === current), children: word }, word)))
+                    : available[current] }, `words-${index}`));
+        }) }));
+}
+function greatestCommonDivisor(a, b) {
+    return b === 0 ? a : greatestCommonDivisor(b, a % b);
+}
+function lowestCommonMultiple(a, b) {
+    if (a === 0 || b === 0) {
+        return Math.max(a, b);
+    }
+    return Math.abs(a * b) / greatestCommonDivisor(a, b);
+}
+export default AnimatedText;

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

@@ -0,0 +1 @@
+export * from './AnimatedText';

package/lib/components/animation/index.js

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

package/lib/components/auth/{LoginToken.d.ts → SigInAPIKey.d.ts}

@@ -1,4 +1,4 @@
-export interface ILoginTokenProps {
+export interface ISigninAPIKeyProps {
     /**
      * Home page route to navigate to after successful login
      */
@@ -16,5 +16,5 @@ export interface ILoginTokenProps {
  * Component for token-based authentication
  * Provides a simple button that expands to show a token input form
  */
-export declare const LoginToken: (props: ILoginTokenProps) => JSX.Element;
-export default LoginToken;
+export declare const SigInAPIKey: (props: ISigninAPIKeyProps) => JSX.Element;
+export default SigInAPIKey;

package/lib/components/auth/{LoginToken.js → SigInAPIKey.js}

@@ -14,7 +14,7 @@ import { useIAMStore } from '../../state/index.js';
  * Component for token-based authentication
  * Provides a simple button that expands to show a token input form
  */
-export const LoginToken = (props) => {
+export const SigInAPIKey = (props) => {
     const { homeRoute, disabled = false, style } = props;
     const [showForm, setShowForm] = useState(false);
     const [token, setToken] = useState('');
@@ -35,7 +35,7 @@ export const LoginToken = (props) => {
             setToken('');
         }
         catch (error) {
-            console.error('Token login failed:', error);
+            console.error('Token sign-in failed:', error);
             enqueueToast('Failed to authenticate with provided token', {
                 variant: 'error',
             });
@@ -45,7 +45,7 @@ export const LoginToken = (props) => {
         }
     };
     if (!showForm) {
-        return (_jsx(Button, { onClick: () => setShowForm(true), style: style, disabled: disabled, children: "Login with Token" }));
+        return (_jsx(Button, { onClick: () => setShowForm(true), style: style, disabled: disabled, children: "Sign in with API Key" }));
     }
     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') {
@@ -55,9 +55,9 @@ 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: disabled || loading || !token.trim(), sx: { mr: 2 }, children: loading ? 'Authenticating...' : 'Login' }), _jsx(Button, { variant: "default", disabled: disabled || loading, 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...' : 'Sign In' }), _jsx(Button, { variant: "default", disabled: disabled || loading, onClick: () => {
                             setShowForm(false);
                             setToken('');
                         }, children: "Cancel" })] })] }));
 };
-export default LoginToken;
+export default SigInAPIKey;

package/lib/components/auth/{Login.d.ts → SignIn.d.ts}

@@ -1,4 +1,4 @@
-export interface ILoginProps {
+export interface ISigninProps {
     /**
      * Page heading
      */
@@ -40,5 +40,5 @@ export interface ILoginProps {
      */
     showTokenLogin?: boolean;
 }
-export declare const Login: (props: ILoginProps) => JSX.Element;
-export default Login;
+export declare const SignIn: (props: ISigninProps) => JSX.Element;
+export default SignIn;

package/lib/components/auth/{Login.js → SignIn.js}

@@ -14,8 +14,8 @@ import { useIAMStore } from '../../state/index.js';
 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';
-export const Login = (props) => {
+import { SigInAPIKey } from './SigInAPIKey.js';
+export const SignIn = (props) => {
     const { heading, homeRoute, loginRoute, showEmailLogin = true, showGitHubLogin = true, showGoogleLogin = true, showTokenLogin = true, } = props;
     const { useLogin, useOAuth2AuthorizationURL } = useCache({ loginRoute });
     const loginMutation = useLogin();
@@ -62,7 +62,7 @@ export const Login = (props) => {
                         addIAMProviderAuthorizationURL(iamProvider.name, authUrl);
                     }
                     else {
-                        console.error(`Failed to get the Login URL from Datalayer IAM for provider ${iamProvider.name}.`);
+                        console.error(`Failed to get the sign-in URL from Datalayer IAM for provider ${iamProvider.name}.`);
                     }
                 },
             });
@@ -82,7 +82,7 @@ export const Login = (props) => {
             setLoadingWithToken(1);
             loginAndNavigate(externalToken, logout, checkIAMToken, navigate, homeRoute)
                 .catch(error => {
-                console.debug('Failed to login with token from cookie..', error);
+                console.debug('Failed to sign in with token from cookie..', error);
                 enqueueToast('Failed to check authentication.', { variant: 'error' });
             })
                 .finally(() => {
@@ -127,14 +127,14 @@ export const Login = (props) => {
                     navigate(homeRoute);
                 }
                 else {
-                    enqueueToast('Failed to login. Check your username and password.', {
+                    enqueueToast('Failed to sign in. Check your username and password.', {
                         variant: 'warning',
                     });
                     setValidationResult({
                         handle: '',
                         password: 'Invalid credentials',
                     });
-                    console.debug(`Failed to login: ${resp.message}`, resp.errors ?? '');
+                    console.debug(`Failed to sign in: ${resp.message}`, resp.errors ?? '');
                 }
             },
             onSettled: () => {
@@ -190,15 +190,15 @@ export const Login = (props) => {
                                                             : '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 !== '' ||
                                                     validationResult.password !== '', onClick: submit, children: loading
-                                                    ? 'Login…'
+                                                    ? 'Sign In…'
                                                     : 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 &&
+                                                        ? 'Sign in with Datalayer'
+                                                        : 'Sign In' }), _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: pendingOAuthProvider === IAMProvidersSpecs.GitHub.name
                                                 ? () => _jsx(Spinner, { size: "small" })
-                                                : MarkGithubIcon, onClick: () => startOAuthSignIn(IAMProvidersSpecs.GitHub), disabled: socialButtonsDisabled, style: { margin: '10px 0' }, children: "Login with GitHub" })), showGoogleLogin &&
+                                                : MarkGithubIcon, onClick: () => startOAuthSignIn(IAMProvidersSpecs.GitHub), disabled: socialButtonsDisabled, style: { margin: '10px 0' }, children: "Sign in 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, {})) })] }));
+                                                : GoogleIcon, onClick: () => startOAuthSignIn(IAMProvidersSpecs.Google), disabled: socialButtonsDisabled, style: { margin: '10px 0' }, children: "Sign in with Google" })), showTokenLogin && (_jsx(SigInAPIKey, { homeRoute: homeRoute, disabled: loading, style: { margin: '10px 0' } }))] }) })] }) })) : loadingWithToken ? (_jsx(CenteredSpinner, { message: "Checking authentication\u2026" })) : (_jsx(_Fragment, {})) })] }));
 };
-export default Login;
+export default SignIn;

package/lib/components/auth/{Login.stories.d.ts → SignIn.stories.d.ts}

@@ -1,6 +1,6 @@
 import type { StoryObj } from '@storybook/react-vite';
 /**
- * Login component provides a comprehensive authentication interface with multiple methods:
+ * SignIn component provides a comprehensive authentication interface with multiple methods:
  * - Email/password authentication
  * - OAuth (GitHub, LinkedIn)
  * - Direct token input
@@ -9,7 +9,7 @@ import type { StoryObj } from '@storybook/react-vite';
  */
 declare const meta: {
     title: string;
-    component: (props: import("./Login").ILoginProps) => JSX.Element;
+    component: (props: import("./SignIn").ISigninProps) => JSX.Element;
     parameters: {
         layout: string;
     };

package/lib/components/auth/{Login.stories.js → SignIn.stories.js}

@@ -2,9 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { BrowserRouter } from 'react-router-dom';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { queryClient } from '../../utils/cli/query.js';
-import { Login } from './Login.js';
+import { SignIn } from './SignIn.js';
 /**
- * Login component provides a comprehensive authentication interface with multiple methods:
+ * SignIn component provides a comprehensive authentication interface with multiple methods:
  * - Email/password authentication
  * - OAuth (GitHub, LinkedIn)
  * - Direct token input
@@ -12,8 +12,8 @@ import { Login } from './Login.js';
  * The component includes form validation, loading states, and error handling.
  */
 const meta = {
-    title: 'Components/Auth/Login',
-    component: Login,
+    title: 'Components/Auth/SignIn',
+    component: SignIn,
     parameters: {
         layout: 'fullscreen',
     },