@datalayer/core 1.0.24 → 1.1.41

package/lib/components/avatars/UserAvatar.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * UserAvatar – Single source of truth for rendering a user's avatar.
+ *
+ * When a real (non-Gravatar) avatar URL is available it renders a
+ * {@link DLAvatar}. Otherwise it falls back to a themed, colormoded
+ * {@link AlienIcon} placeholder so every consumer (profile, sidebar,
+ * principal overlay, …) shares the same default look.
+ */
+import { AlienIcon } from '@datalayer/icons-react';
+import { Box, useColorPalette } from '@datalayer/primer-addons';
+import { DLAvatar } from './DLAvatar.js';
+/**
+ * Returns `true` when the given URL points to a real user avatar (i.e. not a
+ * Gravatar default placeholder).
+ */
+export function hasRealAvatar(url) {
+    if (!url) {
+        return false;
+    }
+    if (url.startsWith('https://www.gravatar.com/avatar')) {
+        return false;
+    }
+    return true;
+}
+export const UserAvatar = ({ avatarUrl, size = 100, square = true, iconSize, }) => {
+    const palette = useColorPalette();
+    if (hasRealAvatar(avatarUrl)) {
+        return _jsx(DLAvatar, { square: square, src: avatarUrl, size: size });
+    }
+    const resolvedIconSize = iconSize ?? Math.round(size * 0.48);
+    return (_jsx(Box, { sx: {
+            width: size,
+            height: size,
+            borderRadius: square ? 2 : '50%',
+            bg: 'accent.subtle',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            '--datalayer-icon-fg': palette.primary,
+        }, children: _jsx(AlienIcon, { size: resolvedIconSize, themed: true, colormoded: true }) }));
+};
+export default UserAvatar;

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

@@ -1,3 +1,4 @@
 export * from './BoringAvatar';
 export * from './DLAvatar';
+export * from './UserAvatar';
 export * from './UserProfileAvatar';

package/lib/components/avatars/index.js

@@ -4,4 +4,5 @@
  */
 export * from './BoringAvatar.js';
 export * from './DLAvatar.js';
+export * from './UserAvatar.js';
 export * from './UserProfileAvatar.js';

package/lib/components/billing/BillableAccountSelect.js

@@ -1,4 +1,8 @@
 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.
+ */
 /*
  * Copyright (c) 2023-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.

package/lib/components/billing/index.js

@@ -1,3 +1,7 @@
+/*
+ * 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.

package/lib/components/checkout/StripeCheckout.js

@@ -670,6 +670,37 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
         }
         void startSubscriptionCheckout(pendingSubscriptionPlan);
     }, [pendingSubscriptionPlan, startSubscriptionCheckout]);
+    // Auto-open the subscription checkout when the page is opened with
+    // `?upgrade` or `?action=upgrade` (e.g. from the Plan Overview
+    // "Upgrade to Team Plan" CTA).
+    useEffect(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        if (autoActionTriggeredRef.current) {
+            return;
+        }
+        if (isPaidSubscription || isCancellationScheduled) {
+            return;
+        }
+        try {
+            const params = new URLSearchParams(window.location.search);
+            const action = String(params.get('action') || '').toLowerCase();
+            const shouldAutoUpgrade = params.has('upgrade') || action === 'upgrade';
+            if (shouldAutoUpgrade && pendingSubscriptionPlan) {
+                autoActionTriggeredRef.current = true;
+                startPendingSubscriptionCheckout();
+            }
+        }
+        catch (_error) {
+            // Ignore malformed URLs.
+        }
+    }, [
+        isPaidSubscription,
+        isCancellationScheduled,
+        pendingSubscriptionPlan,
+        startPendingSubscriptionCheckout,
+    ]);
     const openPortal = useCallback((url) => {
         if (!url) {
             return;
@@ -825,7 +856,22 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
                                     checkout ||
                                     !pendingSubscriptionPlan, children: subscriptionPaymentIntentMutation.isPending
                                     ? 'Preparing checkout...'
-                                    : 'Continue pending payment' }), _jsx(Button, { variant: "danger", onClick: onCancelSubscription, children: "Cancel pending plan change" })] })] })) : !isPaidSubscription ? (_jsxs(_Fragment, { children: [_jsxs(Box, { role: "radiogroup", sx: {
+                                    : 'Continue pending payment' }), _jsx(Button, { variant: "danger", onClick: onCancelSubscription, children: "Cancel pending plan change" })] }), cancelViewOpen && (_jsxs(Box, { sx: {
+                            marginTop: 'var(--stack-gap-normal)',
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            borderRadius: 'var(--borderRadius-medium)',
+                            backgroundColor: 'canvas.subtle',
+                            padding: 'var(--stack-padding-normal)',
+                            display: 'grid',
+                            gap: 'var(--stack-gap-condensed)',
+                        }, children: [_jsx(Text, { as: "h4", sx: { fontWeight: 'bold' }, children: "Cancel pending plan change" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: "This pending plan change will be canceled immediately." }), _jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    gap: 'var(--stack-gap-condensed)',
+                                    flexWrap: 'wrap',
+                                }, children: [_jsx(Button, { variant: "danger", onClick: () => void onConfirmCancelSubscription(), disabled: isCancelActionPending, leadingVisual: () => isCancelActionPending ? _jsx(Spinner, { size: "small" }) : undefined, children: isCancelActionPending
+                                            ? 'Canceling pending plan change...'
+                                            : 'Confirm cancel pending plan change' }), _jsx(Button, { variant: "default", onClick: onAbortCancelView, disabled: isCancelActionPending, children: "Keep pending plan change" })] })] }))] })) : !isPaidSubscription ? (_jsxs(_Fragment, { children: [_jsxs(Box, { role: "radiogroup", sx: {
                             display: 'grid',
                             gap: 'var(--stack-gap-condensed)',
                             maxHeight: '260px',
@@ -847,7 +893,7 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
                             subscriptionPaymentIntentMutation.isPending ||
                             checkout, children: subscriptionPaymentIntentMutation.isPending
                             ? 'Preparing Team plan checkout...'
-                            : 'Update to Team Plan' })] })) : null] })) : null;
+                            : 'Upgrade to Team Plan' })] })) : null] })) : null;
     const topUpSection = (_jsxs(Box, { children: [_jsx(Text, { as: "h3", sx: sectionTitleSx, children: "Topup your wallet with credits" }), _jsx(Box, { role: "radiogroup", sx: {
                     display: 'grid',
                     gap: 'var(--stack-gap-normal)',

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

@@ -1,2 +1 @@
 export * from './OrganizationSelect';
-export * from './SpaceSelect';

package/lib/components/context/index.js

@@ -3,4 +3,3 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './OrganizationSelect.js';
-export * from './SpaceSelect.js';

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export type DisplayHandleProps = {
+    handle?: string;
+    withAt?: boolean;
+    fallback?: string;
+};
+export declare const displayHandleText: (handle?: string, options?: {
+    withAt?: boolean;
+    fallback?: string;
+}) => string;
+export declare const DisplayHandle: React.FC<DisplayHandleProps>;
+export default DisplayHandle;

package/lib/components/display/DisplayHandle.js

@@ -0,0 +1,11 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { formatFriendlyHandle } from '../../utils/Handles.js';
+export const displayHandleText = (handle, options) => {
+    const withAt = options?.withAt ?? true;
+    const fallback = options?.fallback ?? 'unknown';
+    const friendly = formatFriendlyHandle(handle);
+    const normalized = String(friendly || '').trim() || fallback;
+    return withAt ? `@${normalized}` : normalized;
+};
+export const DisplayHandle = ({ handle, withAt = true, fallback = 'unknown', }) => _jsx(_Fragment, { children: displayHandleText(handle, { withAt, fallback }) });
+export default DisplayHandle;

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

@@ -1,10 +1 @@
-type ILiveRelativeTimeProps = {
-    value?: Date | string | number;
-    refreshIntervalMs?: number;
-    fallback?: string;
-};
-/**
- * Display a live-updating relative time label (e.g. "5m ago").
- */
-export declare function LiveRelativeTime({ value, refreshIntervalMs, fallback, }: ILiveRelativeTimeProps): JSX.Element;
-export {};
+export { LiveRelativeTime } from '../time/LiveRelativeTime';

package/lib/components/display/LiveRelativeTime.js

@@ -1,21 +1,10 @@
-import { Fragment as _Fragment, 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';
-import { formatRelativeTime } from '../../utils/index.js';
-/**
- * Display a live-updating relative time label (e.g. "5m ago").
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
  */
-export function LiveRelativeTime({ value, refreshIntervalMs = 1000, fallback = '—', }) {
-    const [now, setNow] = useState(() => new Date());
-    useEffect(() => {
-        const timer = window.setInterval(() => {
-            setNow(new Date());
-        }, refreshIntervalMs);
-        return () => window.clearInterval(timer);
-    }, [refreshIntervalMs]);
-    const label = useMemo(() => formatRelativeTime(value, now), [value, now]);
-    return _jsx(_Fragment, { children: label ?? fallback });
-}
+// Backward compatibility export. Use ../../components/time/LiveRelativeTime.
+export { LiveRelativeTime } from '../time/LiveRelativeTime.js';

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

@@ -2,6 +2,7 @@ export * from './AvatarSkeleton';
 export * from './CenteredSpinner';
 export * from './CodePreview';
 export * from './DatalayerBox';
+export * from './DisplayHandle';
 export * from './HorizontalCenter';
 export * from './JupyterDialog';
 export * from './LiveRelativeTime';

package/lib/components/display/index.js

@@ -6,6 +6,7 @@ export * from './AvatarSkeleton.js';
 export * from './CenteredSpinner.js';
 export * from './CodePreview.js';
 export * from './DatalayerBox.js';
+export * from './DisplayHandle.js';
 export * from './HorizontalCenter.js';
 export * from './JupyterDialog.js';
 export * from './LiveRelativeTime.js';

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

@@ -1,6 +1,5 @@
 export * from './surveys';
 export * from './FlashClosable';
-export * from './FlashDisclaimer';
 export * from './FlashGuest';
 export * from './FlashSurveys';
 export * from './FlashUnauthorized';

package/lib/components/flashes/index.js

@@ -4,7 +4,6 @@
  */
 export * from './surveys/index.js';
 export * from './FlashClosable.js';
-export * from './FlashDisclaimer.js';
 export * from './FlashGuest.js';
 export * from './FlashSurveys.js';
 export * from './FlashUnauthorized.js';

package/lib/components/index.d.ts

@@ -2,3 +2,5 @@ export * from './auth';
 export * from './billing';
 export * from './sharing';
 export * from './sparklines';
+export * from './time';
+export * from './timeline';

package/lib/components/index.js

@@ -6,3 +6,5 @@ export * from './auth/index.js';
 export * from './billing/index.js';
 export * from './sharing/index.js';
 export * from './sparklines/index.js';
+export * from './time/index.js';
+export * from './timeline/index.js';

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

@@ -17,6 +17,8 @@ export type PrincipalDescriptor = {
     kind: PrincipalKind;
     uid?: string;
     displayName: string;
+    name?: string;
+    description?: string;
     handle?: string;
     accountHandle?: string;
     firstName?: string;
@@ -31,6 +33,11 @@ export type PrincipalProps = {
     avatarSize?: number;
     gap?: number;
     square?: boolean;
+    /**
+     * Maximum length of the placeholder (handle or uid) shown before the real
+     * display name resolves. Defaults to {@link DEFAULT_PLACEHOLDER_MAX_LENGTH}.
+     */
+    placeholderMaxLength?: number;
     sx?: any;
 };
 export declare const Principal: React.FC<PrincipalProps>;

package/lib/components/principal/Principal.js

@@ -1,18 +1,139 @@
 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.
+ */
+/**
+ * Principal – common, tunable display for an actor (user / team /
+ * organization). Combines a {@link PrincipalAvatar} with a
+ * {@link PrincipalDetailsOverlay} so all spots that need to show
+ * "avatar + clickable name with details overlay" can share a single
+ * component.
+ */
+import * as React from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { useCache } from '../../hooks/index.js';
+import { useIAMStore } from '../../state/index.js';
 import { PrincipalAvatar } from './PrincipalAvatar.js';
 import { PrincipalDetailsOverlay } from './PrincipalDetailsOverlay.js';
-export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2, square = false, sx, }) => {
-    const { useUser, useOrganization } = useCache();
-    const hydratedUserQuery = useUser(principal.kind === 'user' ? String(principal.uid || '') : '');
-    const hydratedOrgQuery = useOrganization(principal.kind === 'organization' ? String(principal.uid || '') : '');
-    const hydratedEntity = principal.kind === 'user'
-        ? hydratedUserQuery.data
+/**
+ * Default maximum length applied to the placeholder shown before a principal's
+ * real display name has been resolved. The placeholder (derived from the given
+ * handle or uid) is truncated to this many characters.
+ */
+const DEFAULT_PLACEHOLDER_MAX_LENGTH = 10;
+/**
+ * Generic, non-informative display names that callers pass while the real
+ * entity is still loading. When the provided display name is one of these we
+ * prefer a handle/uid-derived placeholder instead.
+ */
+const GENERIC_PLACEHOLDER_DISPLAY_NAMES = new Set([
+    'unknown',
+    'principal',
+    'personal',
+    'team',
+    'organization',
+    'billable account',
+]);
+/** Truncate a placeholder string to `maxLength`, appending an ellipsis. */
+function truncatePlaceholder(value, maxLength) {
+    const trimmed = value.trim();
+    if (maxLength <= 0 || trimmed.length <= maxLength) {
+        return trimmed;
+    }
+    return `${trimmed.slice(0, maxLength)}\u2026`;
+}
+export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2, square = false, placeholderMaxLength = DEFAULT_PLACEHOLDER_MAX_LENGTH, sx, }) => {
+    const { useUser, useOrganizationByHandle, useTeam, useUserPublicProfileByHandle, useOrganizationPublicProfileByHandle, } = useCache();
+    // When no user is authenticated (anonymous visitor, e.g. public pages), the
+    // authenticated `useUser` / `useOrganization` endpoints return 401, which
+    // triggers a global logout + redirect to sign-in. For anonymous visitors we
+    // resolve the principal through the public-by-handle endpoints instead, which
+    // are anonymous-accessible and therefore never redirect.
+    const { user: authenticatedUser } = useIAMStore();
+    const isAnonymous = !authenticatedUser;
+    const normalizedUid = String(principal.uid || '').trim();
+    const normalizedProvidedHandle = String(principal.handle || '').trim();
+    const normalizedProvidedAccountHandle = String(principal.accountHandle || '').trim();
+    const providedHandleIsUidPlaceholder = !!normalizedProvidedHandle &&
+        !!normalizedUid &&
+        normalizedProvidedHandle === normalizedUid;
+    const providedAccountHandleIsUidPlaceholder = !!normalizedProvidedAccountHandle &&
+        !!normalizedUid &&
+        normalizedProvidedAccountHandle === normalizedUid;
+    const principalHandle = String((!providedHandleIsUidPlaceholder ? principal.handle : '') ||
+        (!providedAccountHandleIsUidPlaceholder ? principal.accountHandle : '') ||
+        '').trim();
+    const teamPathParts = principal.kind === 'team' ? principalHandle.split('/') : [];
+    const teamOrganizationHandleFromPath = String(teamPathParts[0] || '').trim();
+    const teamOrganizationHandleFromAccount = principal.kind === 'team' && !providedAccountHandleIsUidPlaceholder
+        ? String(principal.accountHandle || '').trim()
+        : '';
+    const teamOrganizationHandle = teamOrganizationHandleFromPath || teamOrganizationHandleFromAccount;
+    const hydratedUserQuery = useUser(!isAnonymous && principal.kind === 'personal'
+        ? String(principal.uid || '')
+        : '');
+    // Authenticated organizations are fetched by handle via the accounts
+    // endpoint (`/api/iam/v1/accounts/{handle}`). The by-uid organization
+    // endpoint (`/api/iam/v1/organizations/{uid}`) is not served and 404s, so we
+    // never look an organization up by uid here.
+    const organizationLookupHandle = String(principalHandle || '')
+        .replace(/^@+/, '')
+        .trim();
+    const hydratedOrgQuery = useOrganizationByHandle(!isAnonymous && principal.kind === 'organization'
+        ? organizationLookupHandle
+        : '');
+    const teamOrganizationQuery = useOrganizationByHandle(principal.kind === 'team' ? teamOrganizationHandle : '');
+    const hydratedTeamQuery = useTeam(principal.kind === 'team' ? String(principal.uid || '') : '', principal.kind === 'team'
+        ? String(teamOrganizationQuery.data?.id || '')
+        : '');
+    const hydratedPublicUserQuery = useUserPublicProfileByHandle(isAnonymous && principal.kind === 'personal' ? principalHandle : '');
+    const hydratedPublicOrgQuery = useOrganizationPublicProfileByHandle(isAnonymous && principal.kind === 'organization' ? principalHandle : '');
+    // Normalise the public (snake_case) profile payloads into the same camelCase
+    // shape the authenticated entities expose, so downstream logic is uniform.
+    const normalizedPublicUser = React.useMemo(() => {
+        const profile = hydratedPublicUserQuery.data;
+        if (!profile) {
+            return undefined;
+        }
+        const displayName = String(profile.display_name ||
+            [profile.first_name, profile.last_name].filter(Boolean).join(' ') ||
+            '').trim();
+        return {
+            displayName,
+            firstName: profile.first_name,
+            lastName: profile.last_name,
+            handle: profile.handle,
+            avatarUrl: profile.avatar_url,
+            origin: profile.origin,
+            email: profile.email,
+        };
+    }, [hydratedPublicUserQuery.data]);
+    const normalizedPublicOrg = React.useMemo(() => {
+        const profile = hydratedPublicOrgQuery.data;
+        if (!profile) {
+            return undefined;
+        }
+        return {
+            displayName: String(profile.display_name || profile.name || '').trim(),
+            name: profile.name,
+            description: profile.description || profile.description_t,
+            handle: profile.handle,
+            avatarUrl: profile.avatar_url,
+        };
+    }, [hydratedPublicOrgQuery.data]);
+    const hydratedEntity = principal.kind === 'personal'
+        ? isAnonymous
+            ? normalizedPublicUser
+            : hydratedUserQuery.data
         : principal.kind === 'organization'
-            ? hydratedOrgQuery.data
-            : undefined;
-    const hydratedDisplayName = principal.kind === 'user'
+            ? isAnonymous
+                ? normalizedPublicOrg
+                : hydratedOrgQuery.data
+            : principal.kind === 'team'
+                ? hydratedTeamQuery.data
+                : undefined;
+    const hydratedDisplayName = principal.kind === 'personal'
         ? String(hydratedEntity?.displayName ||
             [
                 hydratedEntity?.firstName,
@@ -27,16 +148,32 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
     const resolvedPrincipal = {
         ...principal,
         displayName: hydratedDisplayName ||
-            principal.displayName ||
-            principal.handle ||
-            principal.uid ||
-            'Unknown',
-        handle: principal.handle ||
+            (() => {
+                const providedDisplayName = String(principal.displayName || '').trim();
+                const providedIsGenericPlaceholder = !providedDisplayName ||
+                    GENERIC_PLACEHOLDER_DISPLAY_NAMES.has(providedDisplayName.toLowerCase()) ||
+                    (!!normalizedUid && providedDisplayName === normalizedUid);
+                // While the real display name is unresolved, prefer the given handle
+                // (or uid) as a placeholder, truncated to a maximum length. Only fall
+                // back to the caller-provided display name when it is meaningful.
+                const placeholder = truncatePlaceholder(principalHandle || normalizedProvidedHandle || normalizedUid || '', placeholderMaxLength);
+                if (providedIsGenericPlaceholder) {
+                    return placeholder || providedDisplayName || 'Unknown';
+                }
+                return providedDisplayName || placeholder || 'Unknown';
+            })(),
+        handle: (!providedHandleIsUidPlaceholder ? principal.handle : undefined) ||
             String(hydratedEntity?.handle || '').trim() ||
             undefined,
-        accountHandle: principal.accountHandle ||
+        accountHandle: (!providedAccountHandleIsUidPlaceholder ? principal.accountHandle : undefined) ||
             String(hydratedEntity?.handle || '').trim() ||
             undefined,
+        name: principal.name ||
+            String(hydratedEntity?.name || '').trim() ||
+            undefined,
+        description: principal.description ||
+            String(hydratedEntity?.description || '').trim() ||
+            undefined,
         avatarUrl: principal.avatarUrl || hydratedEntity?.avatarUrl || undefined,
         firstName: principal.firstName || hydratedEntity?.firstName || undefined,
         lastName: principal.lastName || hydratedEntity?.lastName || undefined,
@@ -49,6 +186,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, handle: resolvedPrincipal.handle, accountHandle: resolvedPrincipal.accountHandle, firstName: resolvedPrincipal.firstName, lastName: resolvedPrincipal.lastName, email: resolvedPrincipal.email, origin: resolvedPrincipal.origin, avatarUrl: resolvedPrincipal.avatarUrl, isAdmin: isAdmin })] }));
+        }, 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, isAdmin: isAdmin })] }));
 };
 export default Principal;

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

@@ -1,4 +1,4 @@
-export type PrincipalAvatarKind = 'user' | 'team' | 'organization';
+export type PrincipalAvatarKind = 'personal' | 'team' | 'organization';
 export type PrincipalAvatarProps = {
     kind: PrincipalAvatarKind;
     avatarUrl?: string;

package/lib/components/principal/PrincipalAvatar.js

@@ -3,42 +3,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { Box, useColorPalette } from '@datalayer/primer-addons';
+import { Box } from '@datalayer/primer-addons';
 import { OrganizationIcon, PeopleIcon } from '@primer/octicons-react';
-import { AlienIcon } from '@datalayer/icons-react';
-import { DLAvatar } from '../avatars/index.js';
-function hasRealAvatar(url) {
-    if (!url) {
-        return false;
-    }
-    if (url.startsWith('https://www.gravatar.com/avatar')) {
-        return false;
-    }
-    return true;
-}
+import { UserAvatar } from '../avatars/index.js';
 function getFallbackIconSize(size) {
     return Math.max(12, Math.round(size * 0.62));
 }
 export function PrincipalAvatar({ kind, avatarUrl, alt, size = 20, square = false, }) {
-    const palette = useColorPalette();
-    if (kind === 'user' && hasRealAvatar(avatarUrl)) {
-        return (_jsx(DLAvatar, { src: avatarUrl, alt: alt || 'User', size: size, square: square }));
+    if (kind === 'personal') {
+        return (_jsx(UserAvatar, { avatarUrl: avatarUrl, size: size, square: square, iconSize: getFallbackIconSize(size) }));
     }
     const iconSize = getFallbackIconSize(size);
     const borderRadius = square ? 2 : '50%';
-    if (kind === 'user') {
-        return (_jsx(Box, { sx: {
-                width: size,
-                height: size,
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                bg: 'accent.subtle',
-                borderRadius,
-                overflow: 'hidden',
-                '--datalayer-icon-fg': palette.primary,
-            }, "aria-label": alt || 'User', children: _jsx(AlienIcon, { size: iconSize }) }));
-    }
     const Icon = kind === 'team' ? PeopleIcon : OrganizationIcon;
     return (_jsx(Box, { sx: {
             width: size,

package/lib/components/principal/PrincipalBadge.js

@@ -71,7 +71,7 @@ export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabe
                 kind: 'team',
                 uid: selectedPrincipalUid,
                 handle: `${orgHandle}/${teamHandle}`,
-                accountHandle: teamHandle,
+                accountHandle: orgHandle,
                 displayName: `@${formatFriendlyHandle(orgHandle)}/${formatFriendlyHandle(teamHandle)}`,
                 origin: 'Datalayer',
             };
@@ -85,7 +85,7 @@ export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabe
             ? `@${formatFriendlyHandle(resolvedHandle)}`
             : '@me';
         return {
-            kind: 'user',
+            kind: 'personal',
             uid: user?.id || selectedPrincipalUid,
             displayName: fullName || fallbackHandle,
             handle: resolvedHandle,
@@ -110,7 +110,7 @@ export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabe
         user?.email,
         user?.avatarUrl,
     ]);
-    const userLookupUid = basePrincipal.kind === 'user' ? String(basePrincipal.uid || '') : '';
+    const userLookupUid = basePrincipal.kind === 'personal' ? String(basePrincipal.uid || '') : '';
     const organizationLookupUid = basePrincipal.kind === 'organization'
         ? String(basePrincipal.uid || '')
         : '';
@@ -168,7 +168,7 @@ export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabe
             fallbackHandle;
         const origin = normalizeUserOrigin(resolvedUser?.origin || basePrincipal.origin);
         return {
-            kind: 'user',
+            kind: 'personal',
             uid: resolvedUser?.uid || basePrincipal.uid,
             displayName: resolvedDisplayName,
             handle: resolvedHandle,

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

@@ -1,8 +1,10 @@
-export type PrincipalKind = 'user' | 'team' | 'organization';
+export type PrincipalKind = 'personal' | 'team' | 'organization';
 export type PrincipalDetailsOverlayProps = {
     kind: PrincipalKind;
     uid?: string;
     displayName: string;
+    name?: string;
+    description?: string;
     handle?: string;
     accountHandle?: string;
     firstName?: string;
@@ -19,5 +21,5 @@ export declare function buildPrincipalProfilePath({ kind, uid, handle, accountHa
     accountHandle?: string;
     isAdmin?: boolean;
 }): string | null;
-export declare function PrincipalDetailsOverlay({ kind, uid, displayName, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, isAdmin, }: PrincipalDetailsOverlayProps): JSX.Element;
+export declare function PrincipalDetailsOverlay({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, isAdmin, }: PrincipalDetailsOverlayProps): JSX.Element;
 export default PrincipalDetailsOverlay;