@datalayer/core 1.1.60 → 1.2.10

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

@@ -1,3 +1,12 @@
+/**
+ * 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 type { JSX } from 'react';
 /**
  * Returns `true` when the given URL points to a real user avatar (i.e. not a
  * Gravatar default placeholder).
@@ -6,6 +15,12 @@ export declare function hasRealAvatar(url?: string): boolean;
 export type UserAvatarProps = {
     avatarUrl?: string;
     avatarIcon?: string;
+    /**
+     * A literal emoji, checked before `avatarIcon`/`avatarUrl` — an agent's
+     * face is its emoji, not a photograph or a chosen icon standing in for
+     * one.
+     */
+    avatarEmoji?: string;
     /** Avatar edge length in pixels. Defaults to 100. */
     size?: number;
     /** Render with rounded square corners instead of a circle. Defaults to true. */
@@ -26,5 +41,5 @@ export type UserAvatarProps = {
     ring?: boolean;
     className?: string;
 };
-export declare const UserAvatar: ({ avatarUrl, avatarIcon, size, square, iconSize, fallbackBackground, fallbackForeground, ring, className, }: UserAvatarProps) => JSX.Element;
+export declare const UserAvatar: ({ avatarUrl, avatarIcon, avatarEmoji, size, square, iconSize, fallbackBackground, fallbackForeground, ring, className, }: UserAvatarProps) => JSX.Element;
 export default UserAvatar;

package/lib/components/avatars/UserAvatar.js

@@ -1,16 +1,4 @@
 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';
@@ -28,7 +16,7 @@ export function hasRealAvatar(url) {
     }
     return true;
 }
-export const UserAvatar = ({ avatarUrl, avatarIcon, size = 100, square = true, iconSize, fallbackBackground, fallbackForeground, ring = false, className, }) => {
+export const UserAvatar = ({ avatarUrl, avatarIcon, avatarEmoji, size = 100, square = true, iconSize, fallbackBackground, fallbackForeground, ring = false, className, }) => {
     const palette = useColorPalette();
     /*
      * The ring, as a shadow rather than a border.
@@ -40,6 +28,20 @@ export const UserAvatar = ({ avatarUrl, avatarIcon, size = 100, square = true, i
     const ringSx = ring
         ? { boxShadow: '0 0 0 1px var(--borderColor-default, currentColor)' }
         : undefined;
+    if (avatarEmoji) {
+        return (_jsx(Box, { role: "img", "aria-label": avatarEmoji, className: className, sx: {
+                width: size,
+                height: size,
+                borderRadius: square ? 2 : '50%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                bg: fallbackBackground || 'canvas.default',
+                fontSize: Math.round(size * 0.5),
+                lineHeight: 1,
+                ...ringSx,
+            }, children: avatarEmoji }));
+    }
     const SelectedIcon = getPrincipalAvatarIcon(avatarIcon);
     if (SelectedIcon) {
         return (_jsx(Box, { className: className, sx: {

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

@@ -4,5 +4,5 @@ type IUserProfileAvatarProps = {
     size?: number;
     onClick?: React.MouseEventHandler<any>;
 };
-export declare const UserProfileAvatar: ({ onClick, user, size, }: IUserProfileAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UserProfileAvatar: ({ onClick, user, size, }: IUserProfileAvatarProps) => import("react").JSX.Element;
 export default UserProfileAvatar;

package/lib/components/banners/NoAutomationBanner.d.ts

@@ -1,2 +1,2 @@
-export declare const NoAutomationBanner: () => import("react/jsx-runtime").JSX.Element;
+export declare const NoAutomationBanner: () => import("react").JSX.Element;
 export default NoAutomationBanner;

package/lib/components/billing/BillingEntitySelect.d.ts

@@ -1,3 +1,13 @@
+/**
+ * BillingEntitySelect — self-contained dropdown that lets the user pick a
+ * billing entity (personal, organization, or eligible team) for runs that
+ * consume wallet credits.
+ *
+ * Encapsulates eligibility merge logic and account-detail fetching. Callers
+ * only need to provide a value/onChange pair and optionally observe the full
+ * resolved account via `onSelectedAccountChange`.
+ */
+import type { JSX } from 'react';
 export type BillingEntityType = 'user' | 'organization' | 'team';
 export type BillingEntity = {
     accountUid: string;
@@ -7,6 +17,12 @@ export type BillingEntity = {
     planName: string;
     isEligible: boolean;
     isPaidPlan: boolean;
+    /**
+     * Billed through the AWS Marketplace: an organization created from an AWS
+     * subscription, or one of its teams. Work started under it is metered and
+     * reaches the AWS bill; work started under any other entry never does.
+     */
+    isAwsBilled: boolean;
     sourceOrganizationUid?: string;
     sourceOrganizationHandle?: string;
     teamHandle?: string;

package/lib/components/billing/BillingEntitySelect.js

@@ -1,21 +1,4 @@
 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.
- */
-/**
- * BillingEntitySelect — self-contained dropdown that lets the user pick a
- * billing entity (personal, organization, or eligible team) for runs that
- * consume wallet credits.
- *
- * Encapsulates eligibility merge logic and account-detail fetching. Callers
- * only need to provide a value/onChange pair and optionally observe the full
- * resolved account via `onSelectedAccountChange`.
- */
 import { useCallback, useEffect, useMemo, useRef, Fragment } from 'react';
 import { ActionList, ActionMenu, Button, FormControl, Label, Spinner, Text, } from '@primer/react';
 import { OrganizationIcon, PeopleIcon, PersonIcon, } from '@primer/octicons-react';
@@ -23,6 +6,7 @@ import { Box } from '@datalayer/primer-addons';
 import { useCache } from '../../hooks/useCache.js';
 import { useSelectedPrincipal } from '../../hooks/useSelectedPrincipal.js';
 import { useIAMStore } from '../../state/index.js';
+import { isBillingEntityEligible } from './eligibility.js';
 const PLAN_FREE_TERMS = ['free', 'starter'];
 const PLAN_PRO_TERMS = ['pro', 'paid', 'team', 'enterprise', 'business'];
 const BILLING_ENTITY_COOKIE = 'datalayer-billing-entity-uid';
@@ -41,6 +25,19 @@ function writeBillingEntityCookie(value) {
         `${BILLING_ENTITY_COOKIE}=${encodeURIComponent(value)};` +
             ` path=/; max-age=${BILLING_ENTITY_COOKIE_MAX_AGE}; SameSite=Lax`;
 }
+const AWS_ORIGIN_PREFIX = 'urn:dla:iam:ext::aws:';
+const AWS_BILLING_PROVIDER = 'aws-marketplace';
+/** Whether an origin URN names an AWS Marketplace subscription. */
+const isAwsOriginUrn = (origin) => String(origin ?? '')
+    .trim()
+    .toLowerCase()
+    .startsWith(AWS_ORIGIN_PREFIX);
+/** Whether IAM names the AWS Marketplace as who bills an account. */
+const isAwsBillingProvider = (provider) => String(provider ?? '')
+    .trim()
+    .toLowerCase() === AWS_BILLING_PROVIDER;
+/** The label beside an entry billed through the AWS Marketplace. */
+const AwsBilledLabel = () => (_jsx(Label, { size: "small", variant: "accent", title: "Billed through AWS Marketplace: work started here is reported to AWS", children: "AWS" }));
 const planContains = (value, terms) => terms.some(term => value.includes(term));
 export function resolveBillingPlanTier(value) {
     const normalized = String(value ?? '').toLowerCase();
@@ -74,6 +71,8 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
             String(entry.account_handle || '').trim() ||
             String(entry.account_uid || '').trim(),
         planName: String(entry?.subscription?.plan_name || entry?.plan?.plan_name || '').trim(),
+        isAwsBilled: isAwsBillingProvider(entry?.billing_provider) ||
+            isAwsBillingProvider(entry?.plan?.billing_provider),
     })), [eligibleAccountsRaw]);
     const personalAccountUid = String(user?.id || '');
     const allContextAccounts = useMemo(() => {
@@ -85,6 +84,7 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                 accountHandle: String(user?.handle || '').trim(),
                 accountName: String(user?.handle || '').trim() || personalAccountUid,
                 planName: '',
+                isAwsBilled: false,
             });
         }
         for (const organization of (userOrganizationsQuery.data || [])) {
@@ -101,6 +101,8 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                 planName: String(organization?.subscription?.plan_name ||
                     organization?.plan_name ||
                     '').trim(),
+                isAwsBilled: Boolean(organization?.awsMarketplace) ||
+                    isAwsOriginUrn(organization?.origin ?? organization?.origin_s),
             });
         }
         return Array.from(accountMap.values());
@@ -134,6 +136,11 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
             accountMap.set(a.accountUid, a);
         const merged = Array.from(accountMap.values());
         const mergedByUid = new Map(merged.map(a => [a.accountUid, a]));
+        // Either list may say it: the organizations carry their origin, and IAM
+        // names the billing provider on each eligible entry.
+        const awsBilledUids = new Set([...allContextAccounts, ...eligibleAccounts]
+            .filter(a => a.isAwsBilled)
+            .map(a => a.accountUid));
         return merged.map(account => {
             const eligible = eligibleAccountByUid.get(account.accountUid);
             const details = detailsByUid.get(account.accountUid);
@@ -149,15 +156,22 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                     details?.wallet_balance ??
                     0));
             const hasPositiveWallet = Number.isFinite(walletBalance) && walletBalance > 0;
-            const isEligible = accountType === 'team'
-                ? hasPositiveWallet
-                : typeof details?.is_eligible === 'boolean'
-                    ? details.is_eligible ||
-                        (accountType === 'user' && hasPositiveWallet)
-                    : Boolean(eligible);
             const sourceOrganizationUid = accountType === 'team'
                 ? String(details?.plan_source_account_uid || '').trim() || undefined
                 : undefined;
+            // A team inherits it from the organization that pays for it.
+            const isAwsBilled = awsBilledUids.has(account.accountUid) ||
+                Boolean(sourceOrganizationUid && awsBilledUids.has(sourceOrganizationUid)) ||
+                isAwsBillingProvider(details?.subscription?.billing_provider);
+            const isEligible = isBillingEntityEligible({
+                accountType,
+                iamEligible: typeof details?.is_eligible === 'boolean'
+                    ? details.is_eligible
+                    : undefined,
+                isAwsBilled,
+                hasPositiveWallet,
+                listedEligible: Boolean(eligible),
+            });
             const sourceOrgDetails = sourceOrganizationUid
                 ? detailsByUid.get(sourceOrganizationUid)
                 : undefined;
@@ -177,6 +191,7 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                 planName,
                 isEligible,
                 isPaidPlan: resolveBillingPlanTier(planName || 'free') === 'pro',
+                isAwsBilled,
                 sourceOrganizationUid,
                 sourceOrganizationHandle,
                 teamHandle: accountType === 'team' ? accountHandle : undefined,
@@ -324,7 +339,7 @@ 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(Box, { sx: {
+                                                            : 'User', children: selectedAccount.accountType === 'organization' ? (_jsx(OrganizationIcon, { size: 12 })) : selectedAccount.accountType === 'team' ? (_jsx(PeopleIcon, { size: 12 })) : (_jsx(PersonIcon, { size: 12 })) }), selectedAccount.isAwsBilled ? _jsx(AwsBilledLabel, {}) : null, _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: _jsxs(Box, { sx: {
                                             borderRadius: 2,
                                             border: '1px solid',
                                             borderColor: 'border.default',
@@ -332,7 +347,12 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                                             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: {
+                                        }, children: [_jsx(Text, { sx: { fontSize: 1, lineHeight: 1.5 }, children: flashMessage }), accounts.some(account => account.isAwsBilled) ? (_jsx(Text, { sx: {
+                                                    display: 'block',
+                                                    fontSize: 1,
+                                                    lineHeight: 1.5,
+                                                    mt: 2,
+                                                }, children: "Entries marked AWS are billed through AWS Marketplace: only work started under them is reported to AWS. Work started under any other entry is charged to the credits of that account and never reaches the AWS bill." })) : null] }) }), _jsx(ActionList, { selectionVariant: "single", children: isLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsxs(Box, { sx: {
                                                 display: 'inline-flex',
                                                 alignItems: 'center',
                                                 gap: 2,
@@ -374,9 +394,11 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                                                                                     ? 'Organization'
                                                                                     : account.accountType === 'team'
                                                                                         ? 'Team'
-                                                                                        : 'User', children: account.accountType === 'organization' ? (_jsx(OrganizationIcon, { size: 12 })) : account.accountType === 'team' ? (_jsx(PeopleIcon, { size: 12 })) : (_jsx(PersonIcon, { size: 12 })) }), !account.isEligible &&
+                                                                                        : 'User', children: account.accountType === 'organization' ? (_jsx(OrganizationIcon, { size: 12 })) : account.accountType === 'team' ? (_jsx(PeopleIcon, { size: 12 })) : (_jsx(PersonIcon, { size: 12 })) }), account.isAwsBilled ? _jsx(AwsBilledLabel, {}) : null, !account.isEligible &&
                                                                                 account.accountType === 'team' && (_jsx(Label, { size: "small", variant: "attention", children: "No credits" })), _jsx(Label, { size: "small", variant: account.isPaidPlan ? 'success' : 'attention', children: formatBillingEntityPlanLabel(account.planName) })] })] }), _jsx(ActionList.Description, { variant: "block", children: account.isEligible
-                                                                    ? 'Eligible'
+                                                                    ? account.isAwsBilled
+                                                                        ? 'Eligible — billed through AWS Marketplace'
+                                                                        : 'Eligible'
                                                                     : account.accountType === 'team'
                                                                         ? 'Not eligible — no team credits allocated'
                                                                         : 'Not eligible — activate a plan or add credits to use this account' })] })] }, account.accountUid));

package/lib/components/billing/eligibility.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Whether work may be started under a billing entity: the rule the launch
+ * picker enables an entry by.
+ *
+ * IAM answers `is_eligible` from what its reservation door would accept, for
+ * every kind of account. For an entity AWS does not pay for, that door reads
+ * the entity's own wallet and asks no plan — so credits in the wallet make it
+ * eligible, personal, organization or team, on a paid plan or none. That is
+ * said here as well as in IAM, so an IAM that still asked organizations for a
+ * paid plan does not grey out an organization with credits to spend. An
+ * entity AWS pays for has no wallet: IAM alone decides it, from the
+ * subscription.
+ */
+export declare function isBillingEntityEligible({ accountType, iamEligible, isAwsBilled, hasPositiveWallet, listedEligible, }: {
+    accountType: string;
+    /** `is_eligible` from IAM's account details, when it answered one. */
+    iamEligible?: boolean;
+    isAwsBilled: boolean;
+    hasPositiveWallet: boolean;
+    /** Whether IAM's eligible-accounts listing named the entity. */
+    listedEligible: boolean;
+}): boolean;

package/lib/components/billing/eligibility.js

@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+/**
+ * Whether work may be started under a billing entity: the rule the launch
+ * picker enables an entry by.
+ *
+ * IAM answers `is_eligible` from what its reservation door would accept, for
+ * every kind of account. For an entity AWS does not pay for, that door reads
+ * the entity's own wallet and asks no plan — so credits in the wallet make it
+ * eligible, personal, organization or team, on a paid plan or none. That is
+ * said here as well as in IAM, so an IAM that still asked organizations for a
+ * paid plan does not grey out an organization with credits to spend. An
+ * entity AWS pays for has no wallet: IAM alone decides it, from the
+ * subscription.
+ */
+export function isBillingEntityEligible({ accountType, iamEligible, isAwsBilled, hasPositiveWallet, listedEligible, }) {
+    if (typeof iamEligible === 'boolean') {
+        return iamEligible || (!isAwsBilled && hasPositiveWallet);
+    }
+    return accountType === 'team' ? hasPositiveWallet : listedEligible;
+}

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

@@ -1 +1,2 @@
 export * from './BillingEntitySelect';
+export * from './eligibility';

package/lib/components/billing/index.js

@@ -2,8 +2,5 @@
  * 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 './BillingEntitySelect.js';
+export * from './eligibility.js';

package/lib/components/buttons/DownloadCSVButton.d.ts

@@ -4,5 +4,5 @@ type IDownloadCSVButtonProps = {
     fileName: string;
     variant?: VariantType;
 };
-export declare const DownloadCSVButton: ({ data, fileName, variant, }: IDownloadCSVButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DownloadCSVButton: ({ data, fileName, variant, }: IDownloadCSVButtonProps) => import("react").JSX.Element;
 export default DownloadCSVButton;

package/lib/components/buttons/DownloadJsonButton.d.ts

@@ -5,5 +5,5 @@ type IDownloadJsonButtonProps = {
     extension?: string;
     variant?: VariantType;
 };
-export declare const DownloadJsonButton: ({ data, fileName, variant, extension, }: IDownloadJsonButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DownloadJsonButton: ({ data, fileName, variant, extension, }: IDownloadJsonButtonProps) => import("react").JSX.Element;
 export default DownloadJsonButton;

package/lib/components/buttons/LongActionButton.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { type ElementType } from 'react';
 type ILongActionButtonProps = {
     /**

package/lib/components/buttons/LongActionButton.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
 import { useCallback, useState } from 'react';
 import { IconButton, Spinner } from '@primer/react';
 /**

package/lib/components/buttons/UploadButton.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import type { VariantType } from './VariantType';
 interface IUploadBaseButtonProps {
     /**

package/lib/components/buttons/UploadButton.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
 import { useCallback, useMemo, useRef } from 'react';
 import { Button, IconButton } from '@primer/react';
 import { UploadIcon } from '@primer/octicons-react';

package/lib/components/checkout/StripeCheckout.d.ts

@@ -50,4 +50,4 @@ export type StripeCheckoutProps = {
 /**
  * Stripe checkout.
  */
-export declare function StripeCheckout({ checkoutPortal, appearance, accountUid, showStatusUsageSummary, onCheckoutSuccess, }: StripeCheckoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function StripeCheckout({ checkoutPortal, appearance, accountUid, showStatusUsageSummary, onCheckoutSuccess, }: StripeCheckoutProps): import("react").JSX.Element;

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

@@ -1,11 +1,40 @@
+/**
+ * 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 type { JSX } from 'react';
 export type LiveCollaborator = {
     /** Stable identity — a user uid, or the awareness client id. */
     id: string;
     name: string;
     avatarUrl?: string;
     avatarIcon?: string;
+    /**
+     * A literal emoji, for a face this platform draws rather than a person's
+     * own — an agent's — checked before `avatarUrl`/`avatarIcon`.
+     */
+    avatarEmoji?: string;
     /** Cursor color of the presence, worn by the initials disc. */
     color?: string;
+    /** The platform uid, when the face is a real account — for its profile. */
+    uid?: string;
+    /** The account handle, when known — the address of the profile page. */
+    handle?: string;
 };
 /**
  * The slice of a Yjs-style awareness this component reads. Structural, so
@@ -26,6 +55,13 @@ export type LiveEditorCollaboratorsProps = {
     size?: number;
     /** How many faces at most; the stack keeps the first ones. */
     max?: number;
+    /**
+     * Show a face's profile some other way than through the router of this
+     * subtree — for the editors embedded under a router of their own, which hand
+     * the route to the view that has the routes. See
+     * {@link PrincipalDetailsOverlayProps.onNavigate}.
+     */
+    onNavigate?: (path: string) => void;
 };
 export declare function LiveEditorCollaborators(props: LiveEditorCollaboratorsProps): JSX.Element | null;
 export default LiveEditorCollaborators;

package/lib/components/collaboration/LiveEditorCollaborators.js

@@ -1,34 +1,8 @@
 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';
+import { PrincipalHoverCard } from '../principal/PrincipalHoverCard.js';
 /** The `user` field of an awareness state, in its several spellings. */
 function collaboratorOfState(clientId, state) {
     const user = state?.user;
@@ -51,16 +25,46 @@ function collaboratorOfState(clientId, state) {
     if (user.anonymous === true || /^anonymous(\s|$)/i.test(name)) {
         return undefined;
     }
+    const uid = user.uid ?? user.id ?? undefined;
+    // The room writes the uid into `username` as often as it writes a handle;
+    // only take it for the handle when it is not just the uid under another
+    // name, or the profile link would carry a uid where a handle belongs.
+    const username = user.username && String(user.username) !== String(uid ?? '')
+        ? user.username
+        : undefined;
     return {
-        id: String(user.uid ?? user.id ?? user.username ?? clientId),
+        id: String(uid ?? user.username ?? clientId),
         name,
         avatarUrl: user.avatar_url || user.avatarUrl || undefined,
         avatarIcon: user.avatar_icon_s || user.avatarIcon || undefined,
-        color: user.color || undefined
+        avatarEmoji: user.avatar_emoji_s || user.avatarEmoji || undefined,
+        color: user.color || undefined,
+        uid: uid ? String(uid) : undefined,
+        handle: user.handle || username || undefined,
+    };
+}
+/**
+ * Fold a second sighting of a person into the first, keeping the fuller of
+ * the two. The name that wins is the one belonging to the record that also
+ * carries a uid — the identity a profile is named by, "Eric Charles" over
+ * the room's cursor label "eric" — and every other field is taken wherever it
+ * is present. The cursor color of the live presence, seen first, is kept.
+ */
+function mergeCollaborators(known, incoming) {
+    const incomingNameWins = !!incoming.uid && !known.uid && incoming.name.trim().length > 0;
+    return {
+        id: known.id,
+        name: incomingNameWins ? incoming.name : known.name,
+        uid: known.uid || incoming.uid,
+        handle: known.handle || incoming.handle,
+        avatarUrl: known.avatarUrl || incoming.avatarUrl,
+        avatarIcon: known.avatarIcon || incoming.avatarIcon,
+        avatarEmoji: known.avatarEmoji || incoming.avatarEmoji,
+        color: known.color || incoming.color,
     };
 }
 export function LiveEditorCollaborators(props) {
-    const { awareness, collaborators = [], max = 5, size = 24 } = props;
+    const { awareness, collaborators = [], max = 5, size = 24, onNavigate, } = props;
     const [present, setPresent] = useState([]);
     useEffect(() => {
         if (!awareness) {
@@ -85,31 +89,57 @@ export function LiveEditorCollaborators(props) {
         };
     }, [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);
+        // Who is here leads; who merely belongs completes. One person, though,
+        // arrives more than once and never quite the same: the room knows them by
+        // their handle and a cursor name ("eric"), the grants by their uid and
+        // their full name ("Eric Charles"). Neither their id nor their name is
+        // shared, so a fold on either alone leaves two faces of one person — and
+        // two faces means two hover cards over the one avatar. So they are folded
+        // on ANY identity they have in common — uid, handle, name, or id — and the
+        // fuller of the two records is the one that survives.
+        const list = [];
+        const indexByToken = new Map();
+        const tokensOf = (person) => {
+            const tokens = [];
+            if (person.uid) {
+                tokens.push(`uid:${person.uid}`);
             }
-            else if ((!known.avatarIcon && collaborator.avatarIcon) ||
-                (!known.avatarUrl && collaborator.avatarUrl)) {
-                merged.set(key, {
-                    ...known,
-                    avatarIcon: known.avatarIcon || collaborator.avatarIcon,
-                    avatarUrl: known.avatarUrl || collaborator.avatarUrl,
-                });
+            if (person.handle) {
+                tokens.push(`handle:${person.handle.trim().toLowerCase()}`);
+            }
+            const nameKey = person.name.trim().toLowerCase();
+            if (nameKey) {
+                tokens.push(`name:${nameKey}`);
+            }
+            tokens.push(`id:${person.id}`);
+            return tokens;
+        };
+        for (const person of [...present, ...collaborators]) {
+            const tokens = tokensOf(person);
+            let index = -1;
+            for (const token of tokens) {
+                const found = indexByToken.get(token);
+                if (found !== undefined) {
+                    index = found;
+                    break;
+                }
+            }
+            if (index === -1) {
+                index = list.length;
+                list.push({ ...person });
+            }
+            else {
+                list[index] = mergeCollaborators(list[index], person);
+            }
+            // Every identity this person carries now points at their one face, so
+            // the next record that shares any of them folds in rather than doubling.
+            for (const token of [...tokens, ...tokensOf(list[index])]) {
+                if (!indexByToken.has(token)) {
+                    indexByToken.set(token, index);
+                }
             }
         }
-        return Array.from(merged.values()).slice(0, max);
+        return list.slice(0, max);
     }, [collaborators, max, present]);
     if (!faces.length) {
         return null;
@@ -124,6 +154,11 @@ export function LiveEditorCollaborators(props) {
      * opens back over the space it came from — empty by construction, since
      * the stack was collapsed there a moment before.
      */
-    _jsx(AvatarStack, { alignRight: true, 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))) }));
+    _jsx(AvatarStack, { alignRight: true, size: size, children: faces.map(face => (_jsx(PrincipalHoverCard
+        // A key that does not flip as the room's awareness churns: the same
+        // person arrives now under their uid, now under a client id, and a
+        // key that followed that would unmount the hover card mid-open and
+        // leak its overlay. Their identity, not their arrival, names them.
+        , { kind: "personal", uid: face.uid, handle: face.handle, displayName: face.name, name: face.name, avatarUrl: face.avatarUrl, avatarIcon: face.avatarIcon, avatarEmoji: face.avatarEmoji, onNavigate: onNavigate, children: _jsx(PrincipalAvatar, { kind: "personal", size: size, alt: face.name, avatarUrl: face.avatarUrl, avatarIcon: face.avatarIcon, avatarEmoji: face.avatarEmoji, square: false }) }, face.uid || face.handle || face.name.trim().toLowerCase()))) }));
 }
 export default LiveEditorCollaborators;