@datalayer/core 1.1.60 → 1.2.10

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

@@ -1,9 +1,17 @@
+import type { JSX } from 'react';
 import { type PrincipalType } from './PrincipalAppearance';
 export type PrincipalAvatarKind = PrincipalType;
 export type PrincipalAvatarProps = {
     kind: PrincipalAvatarKind;
     avatarUrl?: string;
     avatarIcon?: string;
+    /**
+     * A literal emoji this platform draws for a face of its own — an agent —
+     * rather than a person's chosen picture or icon. Checked before
+     * `avatarUrl`/`avatarIcon`, and only for `kind: 'personal'`: an agent is a
+     * personal-shaped seat in every roster it appears in today.
+     */
+    avatarEmoji?: string;
     alt?: string;
     size?: number;
     square?: boolean;
@@ -16,5 +24,5 @@ export type PrincipalAvatarProps = {
     ring?: boolean;
     className?: string;
 };
-export declare function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size, square, ring, className, }: PrincipalAvatarProps): JSX.Element;
+export declare function PrincipalAvatar({ kind, avatarUrl, avatarIcon, avatarEmoji, alt, size, square, ring, className, }: PrincipalAvatarProps): JSX.Element;
 export default PrincipalAvatar;

package/lib/components/principal/PrincipalAvatar.js

@@ -1,22 +1,30 @@
 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 } from '@datalayer/primer-addons';
 import { OrganizationIcon, PeopleIcon } from '@primer/octicons-react';
 import { UserAvatar } from '../avatars/index.js';
-import { getPrincipalAvatarIcon } from './PrincipalAppearance.js';
+import { getPrincipalAvatarIcon, } from './PrincipalAppearance.js';
 function getFallbackIconSize(size) {
     return Math.max(12, Math.round(size * 0.62));
 }
-export function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size = 20, square = false, ring = false, className, }) {
+export function PrincipalAvatar({ kind, avatarUrl, avatarIcon, avatarEmoji, alt, size = 20, square = false, ring = false, className, }) {
     const SelectedIcon = getPrincipalAvatarIcon(avatarIcon);
     // Outside the edge rather than a border, so the avatar keeps the size it
     // was asked for — see `UserAvatar`, which draws its ring the same way.
     const ringSx = ring
         ? { boxShadow: '0 0 0 1px var(--borderColor-default, currentColor)' }
         : undefined;
+    /*
+     * A person is drawn by `UserAvatar`, whatever they wear.
+     *
+     * It is the single source of truth for a user's avatar — a photograph, a
+     * chosen icon, or the default one — and it sets a chosen icon on the tinted
+     * disc that makes it read as an avatar rather than as a loose glyph.
+     * Answering the icon here first drew that same icon WITHOUT the disc, so a
+     * person who had chosen one was a bare drawing among circles.
+     */
+    if (kind === 'personal') {
+        return (_jsx(UserAvatar, { avatarUrl: avatarUrl, avatarIcon: avatarIcon, avatarEmoji: avatarEmoji, size: size, square: square, iconSize: getFallbackIconSize(size), ring: ring, className: className }));
+    }
     if (SelectedIcon) {
         return (_jsx(Box, { className: className, sx: {
                 width: size,
@@ -26,11 +34,11 @@ export function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size = 20, s
                 justifyContent: 'center',
                 overflow: 'hidden',
                 borderRadius: square ? 2 : '50%',
+                // The disc of `UserAvatar`, for the same reason: the shape is what
+                // says "avatar", and an icon drawn on nothing shows none of it.
+                bg: 'accent.subtle',
                 ...ringSx,
-            }, "aria-label": alt || `${kind} avatar`, children: _jsx(SelectedIcon, { size: size, themed: true, colormode: true }) }));
-    }
-    if (kind === 'personal') {
-        return (_jsx(UserAvatar, { avatarUrl: avatarUrl, avatarIcon: avatarIcon, size: size, square: square, iconSize: getFallbackIconSize(size), ring: ring, className: className }));
+            }, "aria-label": alt || `${kind} avatar`, children: _jsx(SelectedIcon, { size: getFallbackIconSize(size), themed: true, colormode: true }) }));
     }
     const iconSize = getFallbackIconSize(size);
     const borderRadius = square ? 2 : '50%';

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

@@ -16,5 +16,5 @@ type PrincipalBadgeProps = {
  * (user / organization / team). Falls back to the currently selected
  * principal when no explicit `principal` prop is supplied.
  */
-export declare const PrincipalBadge: ({ principal: providedPrincipal, showPrincipalLabel, showApplyingToText, showOriginLabel, principalLabel, isAdmin, sx, }?: PrincipalBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PrincipalBadge: ({ principal: providedPrincipal, showPrincipalLabel, showApplyingToText, showOriginLabel, principalLabel, isAdmin, sx, }?: PrincipalBadgeProps) => import("react").JSX.Element;
 export default PrincipalBadge;

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

@@ -3,5 +3,5 @@ export type PrincipalBannerProps = {
     caption?: string;
     rightContent?: ReactNode;
 };
-export declare const PrincipalBanner: ({ caption, rightContent, }: PrincipalBannerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PrincipalBanner: ({ caption, rightContent, }: PrincipalBannerProps) => import("react").JSX.Element;
 export default PrincipalBanner;

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

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type PrincipalKind = 'personal' | 'team' | 'organization';
 export type PrincipalDetailsOverlayProps = {
     kind: PrincipalKind;
@@ -13,6 +14,13 @@ export type PrincipalDetailsOverlayProps = {
     origin?: string;
     avatarUrl?: string;
     avatarIcon?: string;
+    /**
+     * A literal emoji, for a face this platform draws rather than a person's
+     * own choice of picture or icon — an agent, checked before `avatarUrl`/
+     * `avatarIcon` since the emoji is its real identity here, not a
+     * placeholder standing in for one.
+     */
+    avatarEmoji?: string;
     /** Team-specific: parent organization display name. */
     organizationName?: string;
     /** Team-specific: number of members. */
@@ -20,6 +28,20 @@ export type PrincipalDetailsOverlayProps = {
     /** Team/organization visibility. */
     isPublic?: boolean;
     isAdmin?: boolean;
+    /**
+     * Show a route some other way than through the router of this subtree.
+     *
+     * The card is also shown inside the notebook and document editors, which
+     * JupyterLab embeds under a `MemoryRouter` of their own — a router with none
+     * of the application's routes behind it, where a `navigate` reaches nobody.
+     * Those editors hand the route to the view that does have the routes; the
+     * profile then renders there, navigated to rather than loaded, and the page
+     * is never reloaded.
+     *
+     * Left out, the route is followed with `useNavigate`, which is what the web
+     * application and the Datalayer view both want.
+     */
+    onNavigate?: (path: string) => void;
 };
 export declare function buildPrincipalProfilePath({ kind, uid, handle, accountHandle, isAdmin, }: {
     kind: PrincipalKind;
@@ -28,5 +50,20 @@ export declare function buildPrincipalProfilePath({ kind, uid, handle, accountHa
     accountHandle?: string;
     isAdmin?: boolean;
 }): string | null;
-export declare function PrincipalDetailsOverlay({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, avatarIcon, organizationName, memberCount, isPublic, isAdmin, }: PrincipalDetailsOverlayProps): JSX.Element;
+/**
+ * The card of a principal, on its own — avatar, identity, and the buttons.
+ *
+ * The body every surface that shows a principal shares: the click overlay
+ * anchored on a name ({@link PrincipalDetailsOverlay}) and the hover card
+ * anchored on an avatar ({@link PrincipalHoverCard}) both render this, so
+ * the two never drift.
+ */
+export declare function PrincipalDetailsCard({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, avatarIcon, avatarEmoji, organizationName, memberCount, isPublic, isAdmin, onNavigate, }: PrincipalDetailsOverlayProps): JSX.Element;
+/**
+ * A principal's details, shown from a click on their name.
+ *
+ * The name is the anchor; clicking it opens the shared
+ * {@link PrincipalDetailsCard}.
+ */
+export declare function PrincipalDetailsOverlay(props: PrincipalDetailsOverlayProps): JSX.Element;
 export default PrincipalDetailsOverlay;

package/lib/components/principal/PrincipalDetailsOverlay.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
 import { ActionMenu, Box, Button, Label, Text, ThemeProvider, } from '@primer/react';
 import { useNavigate } from '../../hooks/index.js';
 import { PrincipalAvatar } from './PrincipalAvatar.js';
@@ -80,8 +76,30 @@ export function buildPrincipalProfilePath({ kind, uid, handle, accountHandle, is
     }
     return null;
 }
-export function PrincipalDetailsOverlay({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, avatarIcon, organizationName, memberCount, isPublic, isAdmin = false, }) {
+/**
+ * The card of a principal, on its own — avatar, identity, and the buttons.
+ *
+ * The body every surface that shows a principal shares: the click overlay
+ * anchored on a name ({@link PrincipalDetailsOverlay}) and the hover card
+ * anchored on an avatar ({@link PrincipalHoverCard}) both render this, so
+ * the two never drift.
+ */
+export function PrincipalDetailsCard({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, avatarIcon, avatarEmoji, organizationName, memberCount, isPublic, isAdmin = false, onNavigate, }) {
     const navigate = useNavigate();
+    // Where a profile or organization link goes: the router of this subtree,
+    // unless the caller knows of one that can actually serve it — see
+    // `onNavigate`. Either way it is a navigation, never a page load.
+    const go = (path) => {
+        if (!path) {
+            return;
+        }
+        if (onNavigate) {
+            onNavigate(path);
+        }
+        else {
+            navigate(path);
+        }
+    };
     const normalizedDisplayName = normalize(displayName) ||
         normalize(handle) ||
         normalize(uid) ||
@@ -117,6 +135,46 @@ export function PrincipalDetailsOverlay({ kind, uid, displayName, name, descript
     const organizationPath = teamOrganizationHandle
         ? `/${teamOrganizationHandle.replace(/^@+/, '')}`
         : '';
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, p: 4, minWidth: 420 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(PrincipalAvatar, { kind: kind, avatarUrl: avatarUrl, avatarIcon: avatarIcon, avatarEmoji: avatarEmoji, alt: normalizedDisplayName, size: 40, 
+                        // The card sets the avatar on its own ground, the same colour
+                        // the avatar itself is on: without an edge of its own it has
+                        // no visible shape at all. Round, and ringed.
+                        square: false, ring: true }), _jsxs(Box, { sx: { display: 'grid', gap: 0.5 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: normalizedDisplayName }), kind === 'team' ? (teamHandleOnly ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [displayHandleText(teamHandleOnly), teamOrganizationHandle
+                                        ? ` · @${teamOrganizationHandle.replace(/^@+/, '')}`
+                                        : ''] })) : null) : resolvedHandle ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: displayHandleText(resolvedHandle) })) : null] })] }), _jsxs(Box, { sx: {
+                    display: 'grid',
+                    gridTemplateColumns: '110px 1fr',
+                    gap: 1,
+                    alignItems: 'baseline',
+                }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Kind" }), _jsx(Text, { sx: { fontSize: 1 }, children: kind }), resolvedHandle && kind !== 'team' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontSize: 1 }, children: displayHandleText(resolvedHandle) })] })) : null, normalizedUid ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedUid })] })) : null, kind === 'personal' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontSize: 1 }, children: firstName || 'N/A' }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontSize: 1 }, children: lastName || 'N/A' }), email ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontSize: 1 }, children: email })] })) : null, _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Label, { size: "small", variant: "secondary", title: normalizedOrigin, sx: {
+                                    justifySelf: 'start',
+                                    width: 'fit-content',
+                                    maxWidth: '100%',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                }, children: normalizedOrigin })] })) : (_jsxs(_Fragment, { children: [kind === 'team' && teamHandleOnly ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontSize: 1 }, children: displayHandleText(teamHandleOnly) })] })) : null, kind === 'team' && teamOrganizationHandle ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Organization" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedOrganizationName
+                                            ? `${normalizedOrganizationName} (${displayHandleText(teamOrganizationHandle)})`
+                                            : displayHandleText(teamOrganizationHandle) })] })) : null, _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Name" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedName || normalizedDisplayName }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Description" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedDescription || 'N/A' }), kind === 'team' && typeof memberCount === 'number' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Members" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [memberCount, " ", memberCount === 1 ? 'member' : 'members'] })] })) : null, typeof isPublic === 'boolean' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Visibility" }), _jsx(Label, { size: "small", variant: isPublic ? 'success' : 'secondary', sx: { justifySelf: 'start', width: 'fit-content' }, children: isPublic ? 'Public' : 'Private' })] })) : null, _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Label, { size: "small", variant: "secondary", title: normalizedOrigin, sx: {
+                                    justifySelf: 'start',
+                                    width: 'fit-content',
+                                    maxWidth: '100%',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                }, children: normalizedOrigin })] }))] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 2 }, children: [kind === 'team' && organizationPath ? (_jsx(Button, { size: "small", variant: "invisible", onClick: () => go(organizationPath), children: "View Organization" })) : null, _jsx(Button, { size: "small", onClick: () => go(targetPath), disabled: !targetPath, children: "View Profile" })] })] }));
+}
+/**
+ * A principal's details, shown from a click on their name.
+ *
+ * The name is the anchor; clicking it opens the shared
+ * {@link PrincipalDetailsCard}.
+ */
+export function PrincipalDetailsOverlay(props) {
+    const normalizedDisplayName = normalize(props.displayName) ||
+        normalize(props.handle) ||
+        normalize(props.uid) ||
+        'Principal';
     return (_jsx(ThemeProvider, { children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Box, { as: "button", type: "button", sx: {
                             fontWeight: 'semibold',
                             color: 'accent.fg',
@@ -129,33 +187,6 @@ export function PrincipalDetailsOverlay({ kind, uid, displayName, name, descript
                             ':hover': {
                                 textDecoration: 'underline',
                             },
-                        }, children: normalizedDisplayName }) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsxs(Box, { sx: { display: 'grid', gap: 3, p: 4, minWidth: 420 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(PrincipalAvatar, { kind: kind, avatarUrl: avatarUrl, avatarIcon: avatarIcon, alt: normalizedDisplayName, size: 40 }), _jsxs(Box, { sx: { display: 'grid', gap: 0.5 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: normalizedDisplayName }), kind === 'team' ? (teamHandleOnly ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [displayHandleText(teamHandleOnly), teamOrganizationHandle
-                                                        ? ` · @${teamOrganizationHandle.replace(/^@+/, '')}`
-                                                        : ''] })) : null) : resolvedHandle ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: displayHandleText(resolvedHandle) })) : null] })] }), _jsxs(Box, { sx: {
-                                    display: 'grid',
-                                    gridTemplateColumns: '110px 1fr',
-                                    gap: 1,
-                                    alignItems: 'baseline',
-                                }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Kind" }), _jsx(Text, { sx: { fontSize: 1 }, children: kind }), resolvedHandle && kind !== 'team' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontSize: 1 }, children: displayHandleText(resolvedHandle) })] })) : null, normalizedUid ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedUid })] })) : null, kind === 'personal' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontSize: 1 }, children: firstName || 'N/A' }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontSize: 1 }, children: lastName || 'N/A' }), email ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontSize: 1 }, children: email })] })) : null, _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Label, { size: "small", variant: "secondary", title: normalizedOrigin, sx: {
-                                                    justifySelf: 'start',
-                                                    width: 'fit-content',
-                                                    maxWidth: '100%',
-                                                    overflow: 'hidden',
-                                                    textOverflow: 'ellipsis',
-                                                    whiteSpace: 'nowrap',
-                                                }, children: normalizedOrigin })] })) : (_jsxs(_Fragment, { children: [kind === 'team' && teamHandleOnly ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontSize: 1 }, children: displayHandleText(teamHandleOnly) })] })) : null, kind === 'team' && teamOrganizationHandle ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Organization" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedOrganizationName
-                                                            ? `${normalizedOrganizationName} (${displayHandleText(teamOrganizationHandle)})`
-                                                            : displayHandleText(teamOrganizationHandle) })] })) : null, _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Name" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedName || normalizedDisplayName }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Description" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedDescription || 'N/A' }), kind === 'team' && typeof memberCount === 'number' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Members" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [memberCount, " ", memberCount === 1 ? 'member' : 'members'] })] })) : null, typeof isPublic === 'boolean' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Visibility" }), _jsx(Label, { size: "small", variant: isPublic ? 'success' : 'secondary', sx: { justifySelf: 'start', width: 'fit-content' }, children: isPublic ? 'Public' : 'Private' })] })) : null, _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Label, { size: "small", variant: "secondary", title: normalizedOrigin, sx: {
-                                                    justifySelf: 'start',
-                                                    width: 'fit-content',
-                                                    maxWidth: '100%',
-                                                    overflow: 'hidden',
-                                                    textOverflow: 'ellipsis',
-                                                    whiteSpace: 'nowrap',
-                                                }, children: normalizedOrigin })] }))] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 2 }, children: [kind === 'team' && organizationPath ? (_jsx(Button, { size: "small", variant: "invisible", onClick: () => navigate(organizationPath), children: "View Organization" })) : null, _jsx(Button, { size: "small", onClick: () => {
-                                            if (targetPath) {
-                                                navigate(targetPath);
-                                            }
-                                        }, disabled: !targetPath, children: "View Profile" })] })] }) })] }) }));
+                        }, children: normalizedDisplayName }) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsx(PrincipalDetailsCard, { ...props }) })] }) }));
 }
 export default PrincipalDetailsOverlay;

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

@@ -0,0 +1,31 @@
+/**
+ * A principal's details, shown from a hover on their avatar.
+ *
+ * The same {@link PrincipalDetailsCard} the click overlay uses, anchored on
+ * an avatar and opened by pointing at it — for the faces of a shared
+ * document, where there is no name to click, only a stack of avatars.
+ *
+ * The card stays open while the pointer is on the avatar OR on the card, so
+ * the "View Profile" button inside it can be reached: leaving the avatar
+ * starts a short countdown that entering the card cancels.
+ *
+ * The anchor forwards the class an `AvatarStack` clones onto its children
+ * (`pc-AvatarItem`, which sizes and overlaps the faces) so a hover card can
+ * wrap a face without breaking the stack.
+ *
+ * @module components/principal/PrincipalHoverCard
+ */
+import type { JSX } from 'react';
+import type { ReactNode } from 'react';
+import { type PrincipalDetailsOverlayProps } from './PrincipalDetailsOverlay';
+export type PrincipalHoverCardProps = PrincipalDetailsOverlayProps & {
+    /** The avatar the card hangs off — the anchor. */
+    children: ReactNode;
+    /**
+     * Cloned in by `AvatarStack` onto each child; forwarded to the anchor so
+     * the face keeps its size, overlap and mask inside the stack.
+     */
+    className?: string;
+};
+export declare function PrincipalHoverCard({ children, className, ...principal }: PrincipalHoverCardProps): JSX.Element;
+export default PrincipalHoverCard;

package/lib/components/principal/PrincipalHoverCard.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { AnchoredOverlay, Box, ThemeProvider } from '@primer/react';
+import { PrincipalDetailsCard, } from './PrincipalDetailsOverlay.js';
+/** How long the card lingers after the pointer leaves, to let it be entered. */
+const HIDE_DELAY_MS = 200;
+export function PrincipalHoverCard({ children, className, ...principal }) {
+    const [open, setOpen] = useState(false);
+    const hideTimeout = useRef(undefined);
+    const cancelHide = useCallback(() => {
+        if (hideTimeout.current !== undefined) {
+            window.clearTimeout(hideTimeout.current);
+            hideTimeout.current = undefined;
+        }
+    }, []);
+    const show = useCallback(() => {
+        cancelHide();
+        setOpen(true);
+    }, [cancelHide]);
+    const hide = useCallback(() => {
+        cancelHide();
+        hideTimeout.current = window.setTimeout(() => {
+            setOpen(false);
+            hideTimeout.current = undefined;
+        }, HIDE_DELAY_MS);
+    }, [cancelHide]);
+    useEffect(() => cancelHide, [cancelHide]);
+    return (_jsx(AnchoredOverlay, { open: open, onOpen: show, onClose: () => setOpen(false), side: "outside-bottom", align: "center", displayCloseButton: false, focusTrapSettings: { disabled: true }, focusZoneSettings: { disabled: true }, overlayProps: {
+            role: 'dialog',
+            onMouseEnter: show,
+            onMouseLeave: hide,
+            preventFocusOnOpen: true,
+        }, renderAnchor: anchorProps => (_jsx(Box, { ...anchorProps, className: [className, anchorProps.className]
+                .filter(Boolean)
+                .join(' '), onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                cursor: 'pointer',
+                /*
+                 * Round, like the face it holds.
+                 *
+                 * This box stands between the stack and the avatar — it is the
+                 * element `AvatarStack` sizes and clips as one of its items — so a
+                 * square one clipped a round avatar into a square. It takes the
+                 * shape of what it wraps.
+                 */
+                borderRadius: '50%',
+                overflow: 'hidden',
+            }, children: children })), children: _jsx(ThemeProvider, { children: _jsx(PrincipalDetailsCard, { ...principal }) }) }));
+}
+export default PrincipalHoverCard;

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

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 export type PrincipalSwitcherMenuProps = {
     maxLabelChars?: number;
     fullWidth?: boolean;

package/lib/components/principal/PrincipalSwitcherMenu.js

@@ -1,10 +1,6 @@
 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.
- */
 import { useEffect, useMemo, useState } from 'react';
-import { ActionList, ActionMenu, Box, Button, Label, Text, ThemeProvider, } from '@primer/react';
+import { ActionList, ActionMenu, Box, Button, Text, ThemeProvider, } from '@primer/react';
 import { OrganizationIcon, PeopleIcon, PersonIcon, TriangleDownIcon, } from '@primer/octicons-react';
 import { useCache, useAuthorization } from '../../hooks/index.js';
 import { useCoreStore } from '../../state/index.js';
@@ -15,6 +11,7 @@ import { usePrincipalStore } from '../../hooks/usePrincipalStore.js';
 import { useBillingEntityStore } from '../../hooks/useBillingEntityStore.js';
 import { useSelectedPrincipal } from '../../hooks/useSelectedPrincipal.js';
 import { DisplayHandle, displayHandleText } from '../display/DisplayHandle.js';
+import { AdminLabel } from '../labels/StatusLabels.js';
 function truncatePrincipalLabel(label, maxChars) {
     const trimmed = (label || '').trim();
     if (!trimmed) {
@@ -201,12 +198,6 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
         color: 'accent.fg',
         fontWeight: 'semibold',
     };
-    const adminBadgeSx = {
-        bg: 'attention.subtle',
-        color: 'attention.fg',
-        textTransform: 'lowercase',
-        lineHeight: 1.2,
-    };
     return (_jsx(ThemeProvider, { children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: showClosedBorder ? (_jsxs(Box, { as: "button", type: "button", "aria-label": "Switch principal", sx: {
                             width: fullWidth ? '100%' : 'auto',
                             boxSizing: 'border-box',
@@ -251,7 +242,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                     flexShrink: 0,
                                     display: 'inline-flex',
                                     alignItems: 'center',
-                                }, children: _jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" }) })) : null, _jsx(Box, { sx: {
+                                }, children: _jsx(AdminLabel, {}) })) : null, _jsx(Box, { sx: {
                                     display: 'inline-flex',
                                     alignItems: 'center',
                                     color: 'fg.muted',
@@ -278,7 +269,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                     }, children: _jsx(Text, { sx: {
                                             color: 'accent.fg',
                                             fontWeight: 'semibold',
-                                        }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" })) : null] }) })) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsxs(ActionList, { selectionVariant: "single", children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Personal" }), _jsxs(ActionList.Item, { disabled: isCurrentUserPrincipal, selected: isCurrentUserPrincipal, sx: isCurrentUserPrincipal ? selectedItemSx : undefined, onSelect: () => {
+                                        }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(AdminLabel, {})) : null] }) })) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsxs(ActionList, { selectionVariant: "single", children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Personal" }), _jsxs(ActionList.Item, { disabled: isCurrentUserPrincipal, selected: isCurrentUserPrincipal, sx: isCurrentUserPrincipal ? selectedItemSx : undefined, onSelect: () => {
                                             if (isCurrentUserPrincipal) {
                                                 return;
                                             }
@@ -294,7 +285,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                                 }, children: [String(user?.friendlyName ||
                                                         user?.displayName ||
                                                         personalHandle ||
-                                                        'Me').trim(), _jsxs(Box, { as: "span", sx: { color: 'fg.muted' }, children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: personalHandle || 'me' })] })] }), isPlatformAdmin ? (_jsx(ActionList.TrailingVisual, { children: _jsx(Label, { variant: "secondary", size: "small", sx: adminBadgeSx, children: "admin" }) })) : null] })] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Organizations" }), organizations.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No organizations" })) : (organizations.map((organization) => {
+                                                        'Me').trim(), _jsxs(Box, { as: "span", sx: { color: 'fg.muted' }, children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: personalHandle || 'me' })] })] }), isPlatformAdmin ? (_jsx(ActionList.TrailingVisual, { children: _jsx(AdminLabel, {}) })) : null] })] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Organizations" }), organizations.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No organizations" })) : (organizations.map((organization) => {
                                         const organizationUid = getOrganizationUid(organization);
                                         const isCurrentOrganizationPrincipal = selectedPrincipalKind === 'organization' &&
                                             selectedPrincipalUid === organizationUid;

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

@@ -3,6 +3,7 @@ export * from './PrincipalAvatar';
 export * from './PrincipalAppearance';
 export * from './PrincipalBadge';
 export * from './PrincipalBanner';
-export { buildPrincipalProfilePath, PrincipalDetailsOverlay, } from './PrincipalDetailsOverlay';
+export { buildPrincipalProfilePath, PrincipalDetailsCard, PrincipalDetailsOverlay, } from './PrincipalDetailsOverlay';
 export type { PrincipalDetailsOverlayProps } from './PrincipalDetailsOverlay';
+export { PrincipalHoverCard, type PrincipalHoverCardProps, } from './PrincipalHoverCard';
 export * from './PrincipalSwitcherMenu';

package/lib/components/principal/index.js

@@ -7,5 +7,6 @@ export * from './PrincipalAvatar.js';
 export * from './PrincipalAppearance.js';
 export * from './PrincipalBadge.js';
 export * from './PrincipalBanner.js';
-export { buildPrincipalProfilePath, PrincipalDetailsOverlay, } from './PrincipalDetailsOverlay.js';
+export { buildPrincipalProfilePath, PrincipalDetailsCard, PrincipalDetailsOverlay, } from './PrincipalDetailsOverlay.js';
+export { PrincipalHoverCard, } from './PrincipalHoverCard.js';
 export * from './PrincipalSwitcherMenu.js';

package/lib/components/progress/ConsumptionBar.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 /**
  * Consumption progress bar properties
  */

package/lib/components/progress/ConsumptionBar.js

@@ -1,8 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment } 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 { useInterval } from 'usehooks-ts';
 import { ProgressBar, Tooltip, Button } from '@primer/react';

package/lib/components/progress/ProgressRing.d.ts

@@ -1,6 +1,7 @@
 /**
  * Progress ring segment properties
  */
+import type { JSX } from 'react';
 export interface IProgressRingItemProps {
     /**
      * Progress

package/lib/components/progress/SpinnerBar.d.ts

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

package/lib/components/progress/Timer.d.ts

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 /**
  * Timer displaying the time as text.
  *

package/lib/components/progress/Timer.js

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

package/lib/components/screencapture/Screencapture.js

@@ -5,6 +5,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Component } from 'react';
 import html2canvas from 'html2canvas';
+/**
+ * The longest edge a capture is allowed, in device pixels.
+ *
+ * The library caps a stored image at 2 MB. 1600 keeps a full-width selection
+ * legible while leaving room under that ceiling as lossless PNG.
+ */
+const MAX_CAPTURE_EDGE = 1600;
 export class Screencapture extends Component {
     state = {
         on: false,
@@ -128,13 +135,49 @@ export class Screencapture extends Component {
                 width: windowWidth,
                 height: windowHeight,
                 scale: scale,
+                /*
+                 * Draw the pictures that come from somewhere else.
+                 *
+                 * Without this html2canvas leaves every cross-origin image out and
+                 * keeps the space it occupied, so a markdown cell carrying an `<img>`
+                 * from the web captured as a blank rectangle the right size. With it
+                 * the image is fetched anonymously and drawn, and the canvas stays
+                 * untainted so `toDataURL` below still works — which `allowTaint`
+                 * would not: that draws the image and then makes the canvas
+                 * unreadable, which is worse than the hole it fills.
+                 *
+                 * A host that sends no `Access-Control-Allow-Origin` still cannot be
+                 * drawn. Nothing can be done about that from here.
+                 */
+                useCORS: true,
             }).then(canvas => {
                 const croppedCanvas = document.createElement('canvas');
                 const croppedCanvasContext = croppedCanvas.getContext('2d');
-                croppedCanvas.width = cropWidth;
-                croppedCanvas.height = cropHeigth;
+                /*
+                 * Device pixels, not CSS pixels.
+                 *
+                 * `html2canvas` renders at `scale`, so the source rectangle below is
+                 * measured in device pixels — and it was being drawn into a canvas
+                 * sized in CSS ones. On any display with a pixel ratio above 1 the
+                 * destination was twice the canvas, so the capture came back cut off
+                 * at the right and the bottom.
+                 */
+                const sourceWidth = cropWidth * scale;
+                const sourceHeight = cropHeigth * scale;
+                /*
+                 * And bounded, because a capture has somewhere to go.
+                 *
+                 * The library refuses an image over 2 MB, and a full-height selection
+                 * on a retina screen is comfortably past that as lossless PNG — so an
+                 * honest device-pixel capture has to be capped or it becomes a
+                 * capture that cannot be published. Shrunk on the way into the canvas
+                 * rather than after it, so there is one resample rather than two.
+                 */
+                const shrink = Math.min(1, MAX_CAPTURE_EDGE / Math.max(sourceWidth, sourceHeight));
+                croppedCanvas.width = Math.max(1, Math.round(sourceWidth * shrink));
+                croppedCanvas.height = Math.max(1, Math.round(sourceHeight * shrink));
                 if (croppedCanvasContext) {
-                    croppedCanvasContext.drawImage(canvas, cropPositionLeft * scale, cropPositionTop * scale, cropWidth * scale, cropHeigth * scale, 0, 0, cropWidth * scale, cropHeigth * scale);
+                    croppedCanvasContext.drawImage(canvas, cropPositionLeft * scale, cropPositionTop * scale, sourceWidth, sourceHeight, 0, 0, croppedCanvas.width, croppedCanvas.height);
                 }
                 if (croppedCanvas) {
                     const type = 'image/png';

package/lib/components/screencapture/ScreencaptureButton.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
-export declare const ScreencaptureButton: (props: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export declare const ScreencaptureButton: (props: PropsWithChildren) => import("react").JSX.Element;
 export default ScreencaptureButton;