@datalayer/core 1.1.50 → 1.1.56

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

@@ -1,5 +1,5 @@
 /**
  * Authentication components for Datalayer platform
  */
-export * from './Login';
-export * from './LoginToken';
+export * from './SignIn';
+export * from './SigInAPIKey';

package/lib/components/auth/index.js

@@ -5,7 +5,7 @@
 /**
  * Authentication components for Datalayer platform
  */
-export * from './Login.js';
+export * from './SignIn.js';
 // LoginCLI is excluded from build - it's meant for CLI apps with full routing.
 // export * from './LoginCLI.js';
-export * from './LoginToken.js';
+export * from './SigInAPIKey.js';

package/lib/components/avatars/UserAvatar.d.ts

@@ -5,6 +5,7 @@
 export declare function hasRealAvatar(url?: string): boolean;
 export type UserAvatarProps = {
     avatarUrl?: string;
+    avatarIcon?: string;
     /** Avatar edge length in pixels. Defaults to 100. */
     size?: number;
     /** Render with rounded square corners instead of a circle. Defaults to true. */
@@ -15,6 +16,7 @@ export type UserAvatarProps = {
     fallbackBackground?: string;
     /** Optional icon foreground color override for the default avatar. */
     fallbackForeground?: string;
+    className?: string;
 };
-export declare const UserAvatar: ({ avatarUrl, size, square, iconSize, fallbackBackground, fallbackForeground, }: UserAvatarProps) => JSX.Element;
+export declare const UserAvatar: ({ avatarUrl, avatarIcon, size, square, iconSize, fallbackBackground, fallbackForeground, className, }: UserAvatarProps) => JSX.Element;
 export default UserAvatar;

package/lib/components/avatars/UserAvatar.js

@@ -14,6 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { AlienIcon } from '@datalayer/icons-react';
 import { Box, useColorPalette } from '@datalayer/primer-addons';
 import { DLAvatar } from './DLAvatar.js';
+import { getPrincipalAvatarIcon } from '../principal/PrincipalAppearance.js';
 /**
  * Returns `true` when the given URL points to a real user avatar (i.e. not a
  * Gravatar default placeholder).
@@ -27,13 +28,25 @@ export function hasRealAvatar(url) {
     }
     return true;
 }
-export const UserAvatar = ({ avatarUrl, size = 100, square = true, iconSize, fallbackBackground, fallbackForeground, }) => {
+export const UserAvatar = ({ avatarUrl, avatarIcon, size = 100, square = true, iconSize, fallbackBackground, fallbackForeground, className, }) => {
     const palette = useColorPalette();
+    const SelectedIcon = getPrincipalAvatarIcon(avatarIcon);
+    if (SelectedIcon) {
+        return (_jsx(Box, { className: className, sx: {
+                width: size,
+                height: size,
+                borderRadius: square ? 2 : '50%',
+                overflow: 'hidden',
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }, children: _jsx(SelectedIcon, { size: size, colored: true }) }));
+    }
     if (hasRealAvatar(avatarUrl)) {
-        return _jsx(DLAvatar, { square: square, src: avatarUrl, size: size });
+        return _jsx(DLAvatar, { className: className, square: square, src: avatarUrl, size: size });
     }
     const resolvedIconSize = iconSize ?? Math.round(size * 0.48);
-    return (_jsx(Box, { sx: {
+    return (_jsx(Box, { className: className, sx: {
             width: size,
             height: size,
             borderRadius: square ? 2 : '50%',

package/lib/components/avatars/UserProfileAvatar.js

@@ -6,13 +6,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Link } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { AvatarSkeleton } from '../../components/display/index.js';
-import { DLAvatar } from './DLAvatar.js';
+import { UserAvatar } from './UserAvatar.js';
 const Profile = ({ user, size = 100, onClick }) => {
-    return (_jsx(Box, { style: { width: size }, children: _jsx(DLAvatar
-        //      square
-        , { 
-            //      square
-            src: user?.avatarUrl, size: size, onClick: onClick }) }));
+    return (_jsx(Box, { style: { width: size }, onClick: onClick, children: _jsx(UserAvatar, { avatarUrl: user?.avatarUrl, avatarIcon: user?.avatarIcon, size: size }) }));
 };
 export const UserProfileAvatar = ({ onClick, user, size = 100, }) => {
     return user ? (onClick ? (_jsx(Link, { href: "javascript: return false;", onClick: onClick, children: _jsx(Profile, { user: user, size: size, onClick: onClick }) })) : (_jsx(Profile, { user: user, size: size, onClick: onClick }))) : (_jsx(AvatarSkeleton, { size: size }));

package/lib/components/collaboration/LiveEditorCollaborators.d.ts

@@ -0,0 +1,31 @@
+export type LiveCollaborator = {
+    /** Stable identity — a user uid, or the awareness client id. */
+    id: string;
+    name: string;
+    avatarUrl?: string;
+    avatarIcon?: string;
+    /** Cursor color of the presence, worn by the initials disc. */
+    color?: string;
+};
+/**
+ * The slice of a Yjs-style awareness this component reads. Structural, so
+ * any provider — Jupyter collaboration, Datalayer spacer — fits without a
+ * dependency on its package.
+ */
+export type IAwarenessLike = {
+    getStates(): Map<number, Record<string, any>>;
+    on(event: 'change', handler: () => void): void;
+    off(event: 'change', handler: () => void): void;
+};
+export type LiveEditorCollaboratorsProps = {
+    /** The presence of the room, followed live when given. */
+    awareness?: IAwarenessLike | null;
+    /** The collaborators known without a room — owner and granted. */
+    collaborators?: LiveCollaborator[];
+    /** Diameter of a face, in pixels. */
+    size?: number;
+    /** How many faces at most; the stack keeps the first ones. */
+    max?: number;
+};
+export declare function LiveEditorCollaborators(props: LiveEditorCollaboratorsProps): JSX.Element | null;
+export default LiveEditorCollaborators;

package/lib/components/collaboration/LiveEditorCollaborators.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The faces on a shared document: who is here now, and who belongs here.
+ *
+ * One avatar stack for every surface that names collaborators — the cards of
+ * the home page, the headers of the notebook and document editors, in the
+ * web application and in JupyterLab alike. Two sources feed it, both
+ * optional and freely combined:
+ *
+ * - `awareness`: the presence channel of a collaborative editor. The stack
+ *   follows it live — people appear as they join and leave as they go.
+ * - `collaborators`: what is known without a room, the owner and the granted
+ *   of an item. They fill the stack when there is no presence, and complete
+ *   it when there is.
+ *
+ * Every face uses the shared principal avatar rules: a selected icon wins,
+ * then a connected-account picture, then the standard personal fallback.
+ *
+ * @module components/collaboration/LiveEditorCollaborators
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { AvatarStack } from '@primer/react';
+import { PrincipalAvatar } from '../principal/PrincipalAvatar.js';
+/** The `user` field of an awareness state, in its several spellings. */
+function collaboratorOfState(clientId, state) {
+    const user = state?.user;
+    if (!user) {
+        return undefined;
+    }
+    const name = user.display_name || user.displayName || user.name || user.username || '';
+    if (!name) {
+        return undefined;
+    }
+    return {
+        id: String(user.uid ?? user.id ?? user.username ?? clientId),
+        name,
+        avatarUrl: user.avatar_url || user.avatarUrl || undefined,
+        avatarIcon: user.avatar_icon_s || user.avatarIcon || undefined,
+        color: user.color || undefined
+    };
+}
+export function LiveEditorCollaborators(props) {
+    const { awareness, collaborators = [], max = 5, size = 24 } = props;
+    const [present, setPresent] = useState([]);
+    useEffect(() => {
+        if (!awareness) {
+            setPresent([]);
+            return;
+        }
+        const read = () => {
+            const seen = new Map();
+            awareness.getStates().forEach((state, clientId) => {
+                const collaborator = collaboratorOfState(clientId, state);
+                // One face per person, however many tabs they have open.
+                if (collaborator && !seen.has(collaborator.id)) {
+                    seen.set(collaborator.id, collaborator);
+                }
+            });
+            setPresent(Array.from(seen.values()));
+        };
+        read();
+        awareness.on('change', read);
+        return () => {
+            awareness.off('change', read);
+        };
+    }, [awareness]);
+    const faces = useMemo(() => {
+        // Who is here leads; who merely belongs completes. Folded by id and
+        // then by name: the same person often arrives twice — once under their
+        // platform uid, once under the identity the room gave them.
+        const merged = new Map();
+        const byName = new Map();
+        for (const collaborator of [...present, ...collaborators]) {
+            const nameKey = collaborator.name.trim().toLowerCase();
+            const key = merged.has(collaborator.id)
+                ? collaborator.id
+                : (byName.get(nameKey) ?? collaborator.id);
+            const known = merged.get(key);
+            if (!known) {
+                merged.set(key, collaborator);
+                byName.set(nameKey, key);
+            }
+            else if ((!known.avatarIcon && collaborator.avatarIcon) ||
+                (!known.avatarUrl && collaborator.avatarUrl)) {
+                merged.set(key, {
+                    ...known,
+                    avatarIcon: known.avatarIcon || collaborator.avatarIcon,
+                    avatarUrl: known.avatarUrl || collaborator.avatarUrl,
+                });
+            }
+        }
+        return Array.from(merged.values()).slice(0, max);
+    }, [collaborators, max, present]);
+    if (!faces.length) {
+        return null;
+    }
+    return (_jsx(AvatarStack, { size: size, children: faces.map(face => (_jsx(PrincipalAvatar, { kind: "personal", size: size, alt: face.name, avatarUrl: face.avatarUrl, avatarIcon: face.avatarIcon, square: false }, face.id))) }));
+}
+export default LiveEditorCollaborators;

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

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

package/lib/components/collaboration/index.js

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

package/lib/components/display/DatalayerBox.d.ts

@@ -1,8 +1,10 @@
+import type { PropsWithChildren, ReactNode } from 'react';
 type DatalayerBoxProps = {
     id?: string;
     title: string;
+    titleAction?: ReactNode;
     linkLabel?: string;
     linkRoute?: string;
 };
-export declare const DatalayerBox: (props: React.PropsWithChildren<DatalayerBoxProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const DatalayerBox: (props: PropsWithChildren<DatalayerBoxProps>) => import("react/jsx-runtime").JSX.Element;
 export default DatalayerBox;

package/lib/components/display/DatalayerBox.js

@@ -8,19 +8,19 @@ import { Box } from '@datalayer/primer-addons';
 import { ArrowRightIcon } from '@primer/octicons-react';
 import { useNavigate } from '../../hooks/index.js';
 export const DatalayerBox = (props) => {
-    const { title, linkLabel, linkRoute, children } = props;
+    const { title, titleAction, linkLabel, linkRoute, children } = props;
     const navigate = useNavigate();
     return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'space-between',
                     paddingRight: 4,
-                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '6px solid #28b899', paddingLeft: 2 }, children: title }), linkRoute && linkLabel && (_jsxs(Link, { href: "javascript: return false;", onClick: e => navigate(linkRoute), sx: {
-                            display: 'inline-flex',
-                            alignItems: 'center',
-                            gap: 1,
-                            whiteSpace: 'nowrap',
-                        }, children: [linkLabel, _jsx(ArrowRightIcon, {})] }))] }), _jsx(Box, { sx: {
+                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '6px solid #28b899', paddingLeft: 2 }, children: title }), (titleAction || (linkRoute && linkLabel)) && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [titleAction, linkRoute && linkLabel && (_jsxs(Link, { href: "javascript: return false;", onClick: e => navigate(linkRoute), sx: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    gap: 1,
+                                    whiteSpace: 'nowrap',
+                                }, children: [linkLabel, _jsx(ArrowRightIcon, {})] }))] }))] }), _jsx(Box, { sx: {
                     borderColor: 'border.default',
                     borderStyle: 'solid',
                     borderWidth: '1',

package/lib/components/display/JupyterDialog.d.ts

@@ -45,6 +45,8 @@ export interface IDialogWrapperOptions<T> {
 export declare class JupyterDialog<T> extends ReactWidget {
     protected body: JSXElementConstructor<PropsWithChildren<DialogProps & {
         setValue: (v: T | Error) => void;
+        /** Whether an accepted answer is being acted on. */
+        pending?: boolean;
     }>>;
     protected checkbox: Partial<Dialog.ICheckbox> | null;
     protected buttons: Dialog.IButton[];

package/lib/components/display/JupyterDialog.js

@@ -56,10 +56,16 @@ export class JupyterDialog extends ReactWidget {
         this.dialogTitle = options.title;
         this.onWillAccept = options.onWillAccept;
     }
-    _renderBody = (props) => (_jsx(PrimerDialog.Body, { children: createElement(this.body, {
-            ...props,
-            setValue: this.setValue,
-        }) }));
+    _renderBody = (props) => {
+        const pending = this._pendingButtonIndex !== null;
+        return (_jsx(PrimerDialog.Body, { children: _jsx("div", { "aria-busy": pending, ...(pending ? { inert: '' } : {}), style: pending
+                    ? { pointerEvents: 'none', opacity: 0.6 }
+                    : undefined, children: createElement(this.body, {
+                    ...props,
+                    setValue: this.setValue,
+                    pending,
+                }) }) }));
+    };
     _renderFooter = (props) => (_jsx(DialogFooter, { ...props, checkbox: this.checkbox, setChecked: this.setChecked }));
     render() {
         // TODO title color is enforced for JupyterLab.

package/lib/components/iam/ExternalTokenSilentLogin.js

@@ -18,8 +18,8 @@ const ExternalTokenSilentLoginRoute = (props) => {
         if (externalToken) {
             loginAndNavigate(externalToken, logout, checkIAMToken)
                 .catch(error => {
-                console.debug('Failed to login with the provided token.', error);
-                enqueueToast('Failed to login with the provided token.', {
+                console.debug('Failed to sign in with the provided token.', error);
+                enqueueToast('Failed to sign in with the provided token.', {
                     variant: 'error',
                 });
             })

package/lib/components/index.d.ts

@@ -1,5 +1,7 @@
 export * from './auth';
+export * from './animation';
 export * from './billing';
+export * from './collaboration';
 export * from './sharing';
 export * from './sparklines';
 export * from './time';

package/lib/components/index.js

@@ -3,7 +3,9 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './auth/index.js';
+export * from './animation/index.js';
 export * from './billing/index.js';
+export * from './collaboration/index.js';
 export * from './sharing/index.js';
 export * from './sparklines/index.js';
 export * from './time/index.js';

package/lib/components/labels/StatusLabels.d.ts

@@ -0,0 +1,42 @@
+/**
+ * The small pills that qualify an entry.
+ *
+ * A menu entry, a card, a row of a switcher: what qualifies them is always
+ * the same mark — one lowercase word in a semantic tone — and it was written
+ * out at every place that needed one. These are that mark, named after what
+ * they say, so `alpha` looks the same in the user menu, on an integration and
+ * wherever it is needed next.
+ *
+ * @module components/labels/StatusLabels
+ */
+import type { ReactNode } from 'react';
+/** The tones a status pill is read in. */
+export type StatusLabelTone = 'accent' | 'attention' | 'success' | 'neutral';
+export type StatusLabelProps = {
+    /** Word of the pill; each label has one of its own. */
+    children?: ReactNode;
+    size?: 'small' | 'large';
+    sx?: Record<string, unknown>;
+};
+/**
+ * The pill the named labels below are made of.
+ *
+ * Exported for a qualification that has no label of its own yet; prefer one of
+ * the named ones, so the same thing is said the same way everywhere.
+ */
+export declare function StatusLabel(props: StatusLabelProps & {
+    tone: StatusLabelTone;
+}): JSX.Element;
+/**
+ * A feature that is being tried out.
+ */
+export declare function AlphaLabel(props?: StatusLabelProps): JSX.Element;
+/**
+ * Something reserved to the administrators of the platform.
+ */
+export declare function AdminLabel(props?: StatusLabelProps): JSX.Element;
+/**
+ * The one that is taken when none is chosen — the default space of an account.
+ */
+export declare function DefaultLabel(props?: StatusLabelProps): JSX.Element;
+export default StatusLabel;

package/lib/components/labels/StatusLabels.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Label } from '@primer/react';
+const TONES = {
+    accent: {
+        bg: 'accent.subtle',
+        color: 'accent.fg',
+        borderColor: 'accent.muted',
+    },
+    attention: {
+        bg: 'attention.subtle',
+        color: 'attention.fg',
+        borderColor: 'attention.muted',
+    },
+    success: {
+        bg: 'success.subtle',
+        color: 'success.fg',
+        borderColor: 'success.muted',
+    },
+    neutral: {
+        bg: 'neutral.subtle',
+        color: 'fg.muted',
+        borderColor: 'border.default',
+    },
+};
+/**
+ * The pill the named labels below are made of.
+ *
+ * Exported for a qualification that has no label of its own yet; prefer one of
+ * the named ones, so the same thing is said the same way everywhere.
+ */
+export function StatusLabel(props) {
+    const { children, size = 'small', sx, tone } = props;
+    return (_jsx(Label, { variant: "secondary", size: size, sx: {
+            textTransform: 'lowercase',
+            lineHeight: 1.2,
+            ...TONES[tone],
+            ...sx,
+        }, children: children }));
+}
+/**
+ * A feature that is being tried out.
+ */
+export function AlphaLabel(props = {}) {
+    const { children = 'alpha', ...rest } = props;
+    return (_jsx(StatusLabel, { tone: "accent", ...rest, children: children }));
+}
+/**
+ * Something reserved to the administrators of the platform.
+ */
+export function AdminLabel(props = {}) {
+    const { children = 'admin', ...rest } = props;
+    return (_jsx(StatusLabel, { tone: "attention", ...rest, children: children }));
+}
+/**
+ * The one that is taken when none is chosen — the default space of an account.
+ */
+export function DefaultLabel(props = {}) {
+    const { children = 'default', ...rest } = props;
+    return (_jsx(StatusLabel, { tone: "accent", ...rest, children: children }));
+}
+export default StatusLabel;

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

@@ -1 +1,2 @@
+export * from './StatusLabels';
 export * from './VisibilityLabel';

package/lib/components/labels/index.js

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

package/lib/components/principal/Principal.d.ts

@@ -26,6 +26,8 @@ export type PrincipalDescriptor = {
     email?: string;
     origin?: string;
     avatarUrl?: string;
+    avatarIcon?: string;
+    banner?: string;
 };
 export type PrincipalProps = {
     principal: PrincipalDescriptor;

package/lib/components/principal/Principal.js

@@ -114,6 +114,8 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
             lastName: profile.last_name,
             handle: profile.handle,
             avatarUrl: profile.avatar_url,
+            avatarIcon: profile.avatar_icon_s || profile.avatar_icon,
+            banner: profile.banner_s || profile.banner,
             origin: profile.origin,
             email: profile.email,
         };
@@ -129,6 +131,8 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
             description: profile.description || profile.description_t,
             handle: profile.handle,
             avatarUrl: profile.avatar_url,
+            avatarIcon: profile.avatar_icon_s || profile.avatar_icon,
+            banner: profile.banner_s || profile.banner,
         };
     }, [hydratedPublicOrgQuery.data]);
     const hydratedEntity = principal.kind === 'personal'
@@ -222,6 +226,10 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
             hydratedEntity?.avatarUrl ||
             cachedPrincipal?.avatarUrl ||
             undefined,
+        avatarIcon: principal.avatarIcon ||
+            hydratedEntity?.avatarIcon ||
+            undefined,
+        banner: principal.banner || hydratedEntity?.banner || undefined,
         firstName: principal.firstName ||
             hydratedEntity?.firstName ||
             cachedPrincipal?.firstName ||
@@ -263,6 +271,8 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
             email: resolvedPrincipal.email,
             origin: resolvedPrincipal.origin,
             avatarUrl: resolvedPrincipal.avatarUrl,
+            avatarIcon: resolvedPrincipal.avatarIcon,
+            banner: resolvedPrincipal.banner,
             organizationHandle: teamOrganizationHandleResolved,
             organizationName: teamOrganizationNameResolved,
             memberCount: teamMemberCount,
@@ -286,6 +296,6 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
             gap,
             minWidth: 0,
             ...sx,
-        }, children: [_jsx(PrincipalAvatar, { kind: resolvedPrincipal.kind, avatarUrl: resolvedPrincipal.avatarUrl, alt: resolvedPrincipal.displayName, size: avatarSize, square: square }), _jsx(PrincipalDetailsOverlay, { kind: resolvedPrincipal.kind, uid: resolvedPrincipal.uid, displayName: resolvedPrincipal.displayName, name: resolvedPrincipal.name, description: resolvedPrincipal.description, handle: resolvedPrincipal.handle, accountHandle: resolvedPrincipal.accountHandle, firstName: resolvedPrincipal.firstName, lastName: resolvedPrincipal.lastName, email: resolvedPrincipal.email, origin: resolvedPrincipal.origin, avatarUrl: resolvedPrincipal.avatarUrl, organizationName: teamOrganizationNameResolved, memberCount: teamMemberCount, isPublic: resolvedIsPublic, isAdmin: isAdmin })] }));
+        }, children: [_jsx(PrincipalAvatar, { kind: resolvedPrincipal.kind, avatarUrl: resolvedPrincipal.avatarUrl, avatarIcon: resolvedPrincipal.avatarIcon, alt: resolvedPrincipal.displayName, size: avatarSize, square: square }), _jsx(PrincipalDetailsOverlay, { kind: resolvedPrincipal.kind, uid: resolvedPrincipal.uid, displayName: resolvedPrincipal.displayName, name: resolvedPrincipal.name, description: resolvedPrincipal.description, handle: resolvedPrincipal.handle, accountHandle: resolvedPrincipal.accountHandle, firstName: resolvedPrincipal.firstName, lastName: resolvedPrincipal.lastName, email: resolvedPrincipal.email, origin: resolvedPrincipal.origin, avatarUrl: resolvedPrincipal.avatarUrl, avatarIcon: resolvedPrincipal.avatarIcon, organizationName: teamOrganizationNameResolved, memberCount: teamMemberCount, isPublic: resolvedIsPublic, isAdmin: isAdmin })] }));
 };
 export default Principal;