@datalayer/core 1.1.49 → 1.1.56

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',
     },
@@ -28,7 +28,7 @@ export default meta;
  */
 export const Default = {
     args: {
-        heading: 'Login to Datalayer',
+        heading: 'Sign in to Datalayer',
         homeRoute: '/home',
         loginRoute: '/login',
         showEmailLogin: true,
@@ -41,7 +41,7 @@ export const Default = {
  */
 export const EmailOnly = {
     args: {
-        heading: 'Login to Datalayer',
+        heading: 'Sign in to Datalayer',
         homeRoute: '/home',
         loginRoute: '/login',
         showEmailLogin: true,
@@ -54,7 +54,7 @@ export const EmailOnly = {
  */
 export const OAuthOnly = {
     args: {
-        heading: 'Login to Datalayer',
+        heading: 'Sign in to Datalayer',
         homeRoute: '/home',
         loginRoute: '/login',
         showEmailLogin: false,
@@ -67,7 +67,7 @@ export const OAuthOnly = {
  */
 export const TokenOnly = {
     args: {
-        heading: 'Login to Datalayer',
+        heading: 'Sign in to Datalayer',
         homeRoute: '/home',
         loginRoute: '/login',
         showEmailLogin: false,
@@ -93,7 +93,7 @@ export const CustomHeading = {
  */
 export const WithPasswordReset = {
     args: {
-        heading: 'Login to Datalayer',
+        heading: 'Sign in to Datalayer',
         homeRoute: '/home',
         loginRoute: '/login',
         passwordRoute: '/password-reset',

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,12 +5,18 @@
 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. */
     square?: boolean;
     /** Fallback icon size. Defaults to ~48% of `size`. */
     iconSize?: number;
+    /** Optional background color override for the default (non-photo) avatar. */
+    fallbackBackground?: string;
+    /** Optional icon foreground color override for the default avatar. */
+    fallbackForeground?: string;
+    className?: string;
 };
-export declare const UserAvatar: ({ avatarUrl, size, square, iconSize, }: 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,21 +28,33 @@ export function hasRealAvatar(url) {
     }
     return true;
 }
-export const UserAvatar = ({ avatarUrl, size = 100, square = true, iconSize, }) => {
+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%',
-            bg: 'accent.subtle',
+            bg: fallbackBackground || 'accent.subtle',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            '--datalayer-icon-fg': palette.primary,
-        }, children: _jsx(AlienIcon, { size: resolvedIconSize, themed: true, colormoded: true }) }));
+            '--datalayer-icon-fg': fallbackForeground || palette.primary,
+        }, children: _jsx(AlienIcon, { size: resolvedIconSize, themed: true, colormode: true }) }));
 };
 export default UserAvatar;

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/billing/BillingEntitySelect.js

@@ -17,7 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * resolved account via `onSelectedAccountChange`.
  */
 import { useCallback, useEffect, useMemo, useRef, Fragment } from 'react';
-import { ActionList, ActionMenu, Button, Flash, FormControl, Label, Spinner, Text, } from '@primer/react';
+import { ActionList, ActionMenu, Button, FormControl, Label, Spinner, Text, } from '@primer/react';
 import { OrganizationIcon, PeopleIcon, PersonIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { useCache } from '../../hooks/useCache.js';
@@ -324,7 +324,15 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                                                         ? 'Organization'
                                                         : selectedAccount.accountType === 'team'
                                                             ? 'Team'
-                                                            : 'User', children: selectedAccount.accountType === 'organization' ? (_jsx(OrganizationIcon, { size: 12 })) : selectedAccount.accountType === 'team' ? (_jsx(PeopleIcon, { size: 12 })) : (_jsx(PersonIcon, { size: 12 })) }), _jsx(Label, { size: "small", variant: selectedAccount.isPaidPlan ? 'success' : 'attention', children: formatBillingEntityPlanLabel(selectedAccount.planName) })] })] })) : !hasEligibleAccount ? (emptyMessage) : ('Select a billing entity') }) }), _jsxs(ActionMenu.Overlay, { width: "large", children: [_jsx(Box, { sx: { p: 2 }, children: _jsx(Flash, { variant: "default", children: flashMessage }) }), _jsx(ActionList, { selectionVariant: "single", children: isLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsxs(Box, { sx: {
+                                                            : 'User', children: selectedAccount.accountType === 'organization' ? (_jsx(OrganizationIcon, { size: 12 })) : selectedAccount.accountType === 'team' ? (_jsx(PeopleIcon, { size: 12 })) : (_jsx(PersonIcon, { size: 12 })) }), _jsx(Label, { size: "small", variant: selectedAccount.isPaidPlan ? 'success' : 'attention', children: formatBillingEntityPlanLabel(selectedAccount.planName) })] })] })) : !hasEligibleAccount ? (emptyMessage) : ('Select a billing entity') }) }), _jsxs(ActionMenu.Overlay, { width: "large", children: [_jsx(Box, { sx: { p: 2 }, children: _jsx(Box, { sx: {
+                                            borderRadius: 2,
+                                            border: '1px solid',
+                                            borderColor: 'border.default',
+                                            bg: 'canvas.subtle',
+                                            color: 'fg.muted',
+                                            px: 3,
+                                            py: 2,
+                                        }, children: _jsx(Text, { sx: { fontSize: 1, lineHeight: 1.5 }, children: flashMessage }) }) }), _jsx(ActionList, { selectionVariant: "single", children: isLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsxs(Box, { sx: {
                                                 display: 'inline-flex',
                                                 alignItems: 'center',
                                                 gap: 2,

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

@@ -3,10 +3,12 @@ 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 } from 'react';
+import { useContext, useEffect } from 'react';
+import { QueryClient, QueryClientContext, QueryClientProvider, } from '@tanstack/react-query';
 import { CenteredSpinner } from '../../components/display/index.js';
 import { useIAMStore } from '../../state/index.js';
 import { useToast, useIAM } from '../../hooks/index.js';
+const externalTokenQueryClient = new QueryClient();
 const ExternalTokenSilentLoginRoute = (props) => {
     const { message } = props;
     const { loginAndNavigate } = useIAM();
@@ -16,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',
                 });
             })
@@ -29,7 +31,9 @@ const ExternalTokenSilentLoginRoute = (props) => {
     return _jsx(CenteredSpinner, { size: "small", message: message });
 };
 export const ExternalTokenSilentLogin = (props) => {
+    const queryClient = useContext(QueryClientContext);
     // No navigation provider needed anymore - auto-detection works without it
-    return _jsx(ExternalTokenSilentLoginRoute, { ...props });
+    const content = _jsx(ExternalTokenSilentLoginRoute, { ...props });
+    return queryClient ? (content) : (_jsx(QueryClientProvider, { client: externalTokenQueryClient, children: content }));
 };
 export default ExternalTokenSilentLogin;

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;