@datalayer/core 1.0.2 → 1.0.11

package/lib/otel/views/OtelTracesList.js

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OtelTracesList – Tabular list of spans with Time / Message / Scope / Duration
+ * columns, using Primer React components for consistent theming.
+ *
+ * Spans that share the same trace_id are grouped into collapsible trees:
+ * only root spans are shown initially; clicking a row with children
+ * expands / collapses the nested child rows (shown indented).
+ *
+ * @module otel/OtelTracesList
+ */
+import { useMemo, useCallback, useState } from 'react';
+import { Box, Text, Label, Spinner } from '@primer/react';
+import { Blankslate } from '@primer/react/experimental';
+import { TelescopeIcon, ChevronRightIcon, ChevronDownIcon, } from '@primer/octicons-react';
+import { formatDuration, formatTime, buildSpanTree } from '../utils';
+const GRID_COLS = '140px 1fr 160px 90px';
+// ── Helpers ─────────────────────────────────────────────────────────
+/** Extract gen_ai token counts from span attributes. */
+function getTokenUsage(span) {
+    const attrs = span.attributes;
+    if (!attrs)
+        return null;
+    const input = attrs['gen_ai.usage.input_tokens'] != null
+        ? Number(attrs['gen_ai.usage.input_tokens'])
+        : undefined;
+    const output = attrs['gen_ai.usage.output_tokens'] != null
+        ? Number(attrs['gen_ai.usage.output_tokens'])
+        : undefined;
+    if (input == null && output == null)
+        return null;
+    return { input, output };
+}
+export const OtelTracesList = ({ spans, loading, selectedSpanId, onSelectSpan, }) => {
+    // Set of expanded span_ids (show their children)
+    const [expanded, setExpanded] = useState(new Set());
+    // Build the span tree from flat input
+    const roots = useMemo(() => buildSpanTree(spans), [spans]);
+    // Flatten visible rows based on which nodes are expanded
+    const visibleRows = useMemo(() => {
+        const rows = [];
+        function walk(node, depth) {
+            const children = node.children ?? [];
+            rows.push({ span: node, depth, hasChildren: children.length > 0 });
+            if (expanded.has(node.span_id)) {
+                for (const child of children) {
+                    walk(child, depth + 1);
+                }
+            }
+        }
+        for (const root of roots) {
+            walk(root, 0);
+        }
+        return rows;
+    }, [roots, expanded]);
+    const toggleExpand = useCallback((spanId) => {
+        setExpanded(prev => {
+            const next = new Set(prev);
+            if (next.has(spanId)) {
+                next.delete(spanId);
+            }
+            else {
+                next.add(spanId);
+            }
+            return next;
+        });
+    }, []);
+    if (loading) {
+        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 5 }, children: _jsx(Spinner, { size: "medium" }) }));
+    }
+    if (spans.length === 0) {
+        return (_jsxs(Blankslate, { children: [_jsx(Blankslate.Visual, { children: _jsx(TelescopeIcon, { size: 24 }) }), _jsx(Blankslate.Heading, { children: "No traces found" }), _jsx(Blankslate.Description, { children: "Send some telemetry data first." })] }));
+    }
+    return (_jsxs(Box, { sx: { width: '100%', flex: 1, minHeight: 0, overflow: 'auto' }, children: [_jsx(Box, { sx: {
+                    display: 'grid',
+                    gridTemplateColumns: GRID_COLS,
+                    gap: 2,
+                    px: 3,
+                    position: 'sticky',
+                    top: 0,
+                    bg: 'canvas.subtle',
+                    zIndex: 1,
+                    borderBottom: '2px solid',
+                    borderColor: 'border.default',
+                }, children: ['Time', 'Message', 'Scope', 'Duration'].map(h => (_jsx(Text, { sx: {
+                        fontWeight: 'bold',
+                        fontSize: 0,
+                        color: 'fg.muted',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.05em',
+                        py: 2,
+                        ...(h === 'Duration' ? { textAlign: 'right' } : {}),
+                    }, children: h }, h))) }), visibleRows.map(({ span, depth, hasChildren }, idx) => {
+                const isSelected = selectedSpanId === span.span_id;
+                const isExpanded = expanded.has(span.span_id);
+                const indent = depth * 20;
+                return (_jsxs(Box, { onClick: () => {
+                        if (hasChildren) {
+                            toggleExpand(span.span_id);
+                        }
+                        onSelectSpan?.(span);
+                    }, sx: {
+                        display: 'grid',
+                        gridTemplateColumns: GRID_COLS,
+                        gap: 2,
+                        px: 3,
+                        py: '5px',
+                        cursor: 'pointer',
+                        bg: isSelected
+                            ? 'accent.subtle'
+                            : depth > 0
+                                ? 'canvas.inset'
+                                : 'canvas.default',
+                        borderBottom: '1px solid',
+                        borderColor: 'border.muted',
+                        ':hover': {
+                            bg: isSelected ? 'accent.subtle' : 'canvas.subtle',
+                        },
+                    }, children: [_jsx(Text, { sx: {
+                                fontSize: 1,
+                                fontFamily: 'mono',
+                                color: 'fg.muted',
+                                whiteSpace: 'nowrap',
+                                lineHeight: '22px',
+                            }, children: formatTime(span.start_time) }), _jsxs(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 1,
+                                overflow: 'hidden',
+                                lineHeight: '22px',
+                                pl: `${indent}px`,
+                            }, children: [hasChildren ? (_jsx(Box, { sx: {
+                                        flexShrink: 0,
+                                        color: 'fg.muted',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                    }, children: isExpanded ? (_jsx(ChevronDownIcon, { size: 14 })) : (_jsx(ChevronRightIcon, { size: 14 })) })) : depth > 0 ? (
+                                /* Connector dash for child leaves */
+                                _jsx(Box, { sx: {
+                                        flexShrink: 0,
+                                        width: '14px',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        color: 'fg.subtle',
+                                        fontSize: 0,
+                                    }, children: "\u2500" })) : null, _jsx(Text, { sx: {
+                                        fontSize: 1,
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                    }, title: span.span_name, children: span.span_name }), span.status_code === 'ERROR' && (_jsx(Label, { variant: "danger", size: "small", children: "ERROR" })), (() => {
+                                    const usage = getTokenUsage(span);
+                                    if (!usage)
+                                        return null;
+                                    return (_jsxs(Box, { sx: {
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            gap: '2px',
+                                            border: '1px solid',
+                                            borderColor: 'border.default',
+                                            borderRadius: 2,
+                                            px: 1,
+                                            fontSize: '10px',
+                                            fontFamily: 'mono',
+                                            color: 'fg.muted',
+                                            flexShrink: 0,
+                                            lineHeight: '16px',
+                                        }, children: [usage.input != null && (_jsxs(Box, { sx: {
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    gap: '1px',
+                                                }, children: [_jsx(Text, { sx: { fontSize: '9px', color: 'fg.subtle' }, children: "\u2197" }), _jsx(Text, { children: usage.input })] })), usage.output != null && (_jsxs(Box, { sx: {
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    gap: '1px',
+                                                }, children: [_jsx(Text, { sx: { fontSize: '9px', color: 'fg.subtle' }, children: "\u2199" }), _jsx(Text, { children: usage.output })] }))] }));
+                                })(), span.otel_scope_name && (_jsx(Label, { size: "small", variant: "secondary", sx: { flexShrink: 0, fontSize: '10px' }, children: span.otel_scope_name }))] }), _jsx(Text, { sx: {
+                                fontSize: 1,
+                                color: 'fg.muted',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                                lineHeight: '22px',
+                            }, title: `${span.service_name} / ${span.otel_scope_name ?? ''}`, children: span.service_name }), _jsx(Text, { sx: {
+                                fontSize: 1,
+                                fontFamily: 'mono',
+                                textAlign: 'right',
+                                lineHeight: '22px',
+                                color: span.duration_ms != null && span.duration_ms > 1000
+                                    ? 'danger.fg'
+                                    : 'fg.default',
+                            }, children: formatDuration(span.duration_ms) })] }, `${span.trace_id}-${span.span_id}-${idx}`));
+            })] }));
+};

package/lib/otel/views/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * OTEL view components.
+ *
+ * @module otel/views
+ */
+export { OtelLive } from './OtelLive';
+export { OtelTracesList } from './OtelTracesList';
+export { OtelLogsList } from './OtelLogsList';
+export { OtelMetricsList } from './OtelMetricsList';
+export { OtelMetricsChart } from './OtelMetricsChart';
+export type { OtelMetricsChartProps } from './OtelMetricsChart';
+export { OtelSearchBar } from './OtelSearchBar';
+export { OtelSpanDetail } from './OtelSpanDetail';
+export { OtelSpanTree } from './OtelSpanTree';
+export { OtelTimeline } from './OtelTimeline';
+export { OtelTimelineRangeSlider } from './OtelTimelineRangeSlider';
+export { OtelSqlView } from './OtelSqlView';
+export type { OtelSqlViewProps } from './OtelSqlView';
+export { OtelSystemView } from './OtelSystemView';
+export type { OtelSystemViewProps } from './OtelSystemView';

package/lib/otel/views/index.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OTEL view components.
+ *
+ * @module otel/views
+ */
+export { OtelLive } from './OtelLive';
+export { OtelTracesList } from './OtelTracesList';
+export { OtelLogsList } from './OtelLogsList';
+export { OtelMetricsList } from './OtelMetricsList';
+export { OtelMetricsChart } from './OtelMetricsChart';
+export { OtelSearchBar } from './OtelSearchBar';
+export { OtelSpanDetail } from './OtelSpanDetail';
+export { OtelSpanTree } from './OtelSpanTree';
+export { OtelTimeline } from './OtelTimeline';
+export { OtelTimelineRangeSlider } from './OtelTimelineRangeSlider';
+export { OtelSqlView } from './OtelSqlView';
+export { OtelSystemView } from './OtelSystemView';

package/lib/state/storage/IAMStorage.d.ts

@@ -9,7 +9,8 @@ export type IJWTToken = {
     iss: string;
     jti: number;
     roles: Array<string>;
-    sub: IUser;
+    sub: string;
+    user: IUser;
 };
 /**
  * Return the user from the local storage.

package/lib/state/substates/CoreState.js

@@ -17,12 +17,13 @@ let initialConfiguration = {
     loadConfigurationFromServer: true,
     jupyterServerless: false,
     iamRunUrl: 'https://prod1.datalayer.run',
-    runtimesRunUrl: 'https://prod1.datalayer.run',
+    runtimesRunUrl: 'https://r1.datalayer.run',
     libraryRunUrl: 'https://prod1.datalayer.run',
     spacerRunUrl: 'https://prod1.datalayer.run',
     aiagentsRunUrl: 'https://prod1.datalayer.run',
     aiinferenceRunUrl: 'https://prod1.datalayer.run',
     mcpserversRunUrl: 'https://prod1.datalayer.run',
+    otelRunUrl: 'https://prod1.datalayer.run',
     growthRunUrl: 'https://prod1.datalayer.run',
     inboundsRunUrl: 'https://prod1.datalayer.run',
     successRunUrl: 'https://prod1.datalayer.run',
@@ -39,11 +40,11 @@ let initialConfiguration = {
         logoUrl: 'https://assets.datalayer.tech/datalayer-25.svg',
         logoSquareUrl: 'https://assets.datalayer.tech/datalayer-square.png',
         copyright: '© 2025 Datalayer, Inc',
-        docsUrl: 'https://docs.datalayer.app',
-        supportUrl: 'https://datalayer.app/support',
-        termsUrl: 'https://datalayer.app/terms',
-        pricingUrl: 'https://datalayer.app/pricing',
-        privacyUrl: 'https://datalayer.app/privacy',
+        docsUrl: 'https://docs.datalayer.ai',
+        supportUrl: 'https://datalayer.ai/support',
+        termsUrl: 'https://datalayer.ai/terms',
+        pricingUrl: 'https://datalayer.ai/pricing',
+        privacyUrl: 'https://datalayer.ai/privacy',
     },
 };
 // Try loading initial state from datalayer-config-data element

package/lib/utils/Date.d.ts

@@ -1,2 +1,8 @@
 export declare const getRelativeTime: (d1: Date, d2?: Date) => string;
 export declare const timeSince: (date: Date) => string;
+/**
+ * Format a timestamp into a compact relative string.
+ *
+ * Examples: "just now", "15m ago", "3h ago", "2d ago", "4w ago", "1y ago".
+ */
+export declare const formatRelativeTime: (value?: Date | string | number, now?: Date) => string | undefined;

package/lib/utils/Date.js

@@ -58,3 +58,40 @@ export const timeSince = (date) => {
     const i = Math.floor(interval);
     return i + ` second${p(i)}`;
 };
+/**
+ * Format a timestamp into a compact relative string.
+ *
+ * Examples: "just now", "15m ago", "3h ago", "2d ago", "4w ago", "1y ago".
+ */
+export const formatRelativeTime = (value, now = new Date()) => {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    const date = value instanceof Date
+        ? value
+        : typeof value === 'number'
+            ? new Date(value)
+            : new Date(value);
+    const ts = date.getTime();
+    if (Number.isNaN(ts)) {
+        return typeof value === 'string' ? value : undefined;
+    }
+    const diffMs = Math.max(0, now.getTime() - ts);
+    const seconds = Math.floor(diffMs / 1000);
+    if (seconds < 60)
+        return 'just now';
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours}h ago`;
+    const days = Math.floor(hours / 24);
+    if (days < 7)
+        return `${days}d ago`;
+    const weeks = Math.floor(days / 7);
+    if (weeks < 52)
+        return `${weeks}w ago`;
+    const years = Math.floor(days / 365);
+    return `${years}y ago`;
+};

package/lib/utils/Jwt.d.ts

@@ -0,0 +1,42 @@
+/**
+ * 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;
+    handle: string;
+    email: string;
+    firstName: string;
+    lastName: string;
+    avatarUrl: string;
+    roles: string[];
+}
+/** Full Datalayer JWT payload shape. */
+export interface DatalayerJwtPayload {
+    jti: string;
+    iss: string;
+    iat: number;
+    exp: number;
+    sub: string;
+    user: DatalayerJwtUser;
+    /** Legacy top-level roles array (some tokens). */
+    roles?: string[];
+}
+/**
+ * Decode the payload of a JWT without verifying the signature.
+ * Returns `null` on any error (malformed token, invalid base64, etc.).
+ */
+export declare function parseJwtPayload<T = DatalayerJwtPayload>(token: string): T | null;
+/**
+ * Extract the Datalayer user object from a JWT, returning `null` if the
+ * token is missing or cannot be decoded.
+ */
+export declare function getDatalayerJwtUser(token: string | null | undefined): DatalayerJwtUser | null;
+/**
+ * Format a human-readable display name from a JWT user.
+ * Prefers "FirstName LastName", falls back to handle.
+ */
+export declare function getDatalayerDisplayName(user: DatalayerJwtUser | null | undefined, fallback?: string): string;

package/lib/utils/Jwt.js

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+// ── Utilities ─────────────────────────────────────────────────────
+/**
+ * Decode the payload of a JWT without verifying the signature.
+ * Returns `null` on any error (malformed token, invalid base64, etc.).
+ */
+export function parseJwtPayload(token) {
+    try {
+        const parts = token.split('.');
+        if (parts.length < 2)
+            return null;
+        // Base64Url → Base64 → JSON
+        const base64 = parts[1].replace(/-/g, '+').replace(/_/g, '/');
+        const padded = base64.padEnd(base64.length + ((4 - (base64.length % 4)) % 4), '=');
+        const json = atob(padded);
+        return JSON.parse(json);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Extract the Datalayer user object from a JWT, returning `null` if the
+ * token is missing or cannot be decoded.
+ */
+export function getDatalayerJwtUser(token) {
+    if (!token)
+        return null;
+    const payload = parseJwtPayload(token);
+    return payload?.user ?? null;
+}
+/**
+ * Format a human-readable display name from a JWT user.
+ * Prefers "FirstName LastName", falls back to handle.
+ */
+export function getDatalayerDisplayName(user, fallback = '') {
+    if (!user)
+        return fallback;
+    const full = `${user.firstName ?? ''} ${user.lastName ?? ''}`.trim();
+    return full || user.handle || fallback;
+}

package/lib/utils/index.d.ts

@@ -11,6 +11,7 @@ export * from './Env';
 export * from './File';
 export * from './Format';
 export * from './Ids';
+export * from './Jwt';
 export * from './Jupyter';
 export * from './Lazy';
 export * from './Msc';

package/lib/utils/index.js

@@ -15,6 +15,7 @@ export * from './Env';
 export * from './File';
 export * from './Format';
 export * from './Ids';
+export * from './Jwt';
 export * from './Jupyter';
 export * from './Lazy';
 export * from './Msc';

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

@@ -0,0 +1,43 @@
+/**
+ * SignInSimple – Generic handle + password sign-in form.
+ *
+ * Posts to `loginUrl` (default `/api/iam/v1/login`) with
+ * `{ handle, password }`, then calls `onSignIn(token, handle)` on
+ * success so the caller can persist credentials as needed.
+ *
+ * @module views/signin
+ */
+import React from 'react';
+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;
+    /**
+     * Called when the user authenticates with an API key.
+     * If not provided the "Sign in with API Key" button is hidden.
+     */
+    onApiKeySignIn?: (apiKey: string) => void;
+    /**
+     * Login endpoint.  Defaults to `/api/iam/v1/login`.
+     * The endpoint must accept `POST { handle, password }` and return
+     * `{ success: boolean; token?: string; message?: string }`.
+     */
+    loginUrl?: string;
+    /**
+     * Optional heading text.  Defaults to `"Datalayer OTEL"`.
+     */
+    title?: string;
+    /**
+     * Optional subtitle / description.
+     */
+    description?: string;
+    /**
+     * Leading icon element rendered next to the title.
+     * Defaults to `<TelescopeIcon size={24} />`.
+     */
+    leadingIcon?: React.ReactNode;
+}
+export declare const SignInSimple: React.FC<SignInSimpleProps>;
+export default SignInSimple;

package/lib/views/iam/SignInSimple.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * SignInSimple – Generic handle + password sign-in form.
+ *
+ * Posts to `loginUrl` (default `/api/iam/v1/login`) with
+ * `{ handle, password }`, then calls `onSignIn(token, handle)` on
+ * success so the caller can persist credentials as needed.
+ *
+ * @module views/signin
+ */
+import { useState, useCallback, useRef } from 'react';
+import { Box, Button, FormControl, Heading, Text, Textarea, TextInput, } from '@primer/react';
+import { Dialog } from '@primer/react/experimental';
+import { EyeIcon, EyeClosedIcon, KeyIcon, TelescopeIcon, } from '@primer/octicons-react';
+// ── Component ────────────────────────────────────────────────────────
+export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl = '/api/iam/v1/login', title = 'Datalayer OTEL', description = 'Sign in to access the observability dashboard.', leadingIcon = _jsx(TelescopeIcon, { size: 24 }), }) => {
+    const [handle, setHandle] = useState('');
+    const [password, setPassword] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    // API Key dialog state
+    const [showApiKeyDialog, setShowApiKeyDialog] = useState(false);
+    const [apiKey, setApiKey] = useState('');
+    const apiKeyRef = useRef(null);
+    const submit = useCallback(async () => {
+        if (!handle || !password || loading)
+            return;
+        setLoading(true);
+        setError(null);
+        try {
+            const resp = await fetch(loginUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ handle, password }),
+            });
+            if (!resp.ok) {
+                throw new Error(`HTTP ${resp.status}`);
+            }
+            const data = await resp.json();
+            if (data.success && data.token) {
+                onSignIn(data.token, handle);
+            }
+            else {
+                setError(data.message || 'Invalid username or password.');
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [handle, password, loading, loginUrl, onSignIn]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter')
+            submit();
+    }, [submit]);
+    return (_jsx(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100vh',
+            bg: 'canvas.default',
+            color: 'fg.default',
+        }, children: _jsxs(Box, { sx: {
+                width: 360,
+                p: 4,
+                borderRadius: 2,
+                border: '1px solid',
+                borderColor: 'border.default',
+                bg: 'canvas.subtle',
+            }, children: [_jsxs(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 2,
+                        mb: 4,
+                        justifyContent: 'center',
+                    }, children: [leadingIcon, _jsx(Heading, { sx: { fontSize: 3 }, children: title })] }), _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' }), 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 API Key" }), showApiKeyDialog && (_jsx(Dialog, { title: "Enter your API Key", onClose: () => {
+                                setShowApiKeyDialog(false);
+                                setApiKey('');
+                            }, initialFocusRef: apiKeyRef, footerButtons: [
+                                {
+                                    buttonType: 'default',
+                                    onClick: () => {
+                                        setShowApiKeyDialog(false);
+                                        setApiKey('');
+                                    },
+                                    content: 'Cancel',
+                                },
+                                {
+                                    buttonType: 'primary',
+                                    onClick: () => {
+                                        if (apiKey.trim()) {
+                                            onApiKeySignIn(apiKey.trim());
+                                            setShowApiKeyDialog(false);
+                                            setApiKey('');
+                                        }
+                                    },
+                                    content: 'Authenticate',
+                                },
+                            ], children: _jsx(Box, { as: "form", children: _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: apiKey, onInput: (e) => setApiKey(e.target.value), ref: apiKeyRef })] }) }) }))] }))] }) }));
+};
+export default SignInSimple;

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

@@ -0,0 +1,2 @@
+export { SignInSimple } from './SignInSimple';
+export type { SignInSimpleProps } from './SignInSimple';

package/lib/views/iam/index.js

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

package/lib/views/iam-tokens/IAMTokenEdit.d.ts

@@ -1,2 +1,6 @@
-export declare const IAMTokenEdit: () => import("react/jsx-runtime").JSX.Element;
+export type IAMTokenEditProps = {
+    /** Route to navigate after delete. Defaults to '/settings/iam/tokens'. */
+    tokensListRoute?: string;
+};
+export declare const IAMTokenEdit: ({ tokensListRoute, }?: IAMTokenEditProps) => import("react/jsx-runtime").JSX.Element;
 export default IAMTokenEdit;