@datalayer/core 1.1.59 → 1.1.66

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, 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, 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,19 +1,17 @@
 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';
 import { useIAMStore } from '../../state/substates/index.js';
+import { UserAvatar } from '../avatars/index.js';
 import { memberships as fetchMemberships } from '../../api/iam/profile.js';
 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) {
@@ -200,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',
@@ -250,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',
@@ -277,14 +269,14 @@ 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;
                                             }
                                             if (personalUid && personalHandle) {
                                                 selectUser(personalUid, personalHandle);
                                             }
-                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PersonIcon, {}) }), _jsxs(Box, { as: "span", sx: {
+                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(UserAvatar, { avatarUrl: user?.avatarUrl, avatarIcon: user?.avatarIcon, size: 16, square: false, ring: true }) }), _jsxs(Box, { as: "span", sx: {
                                                     display: 'block',
                                                     minWidth: 0,
                                                     overflow: 'hidden',
@@ -293,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/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;

package/lib/components/sharing/ShareAccessComponent.d.ts

@@ -1,8 +1,22 @@
+import type { JSX } from 'react';
 export type ItemAccessLevel = 'view' | 'update' | 'execute';
 type PrincipalKind = 'personal' | 'team' | 'organization';
+type SharingLevelPayload = {
+    userUids?: string[];
+    teamUids?: string[];
+    organizationUids?: string[];
+};
+type SharingPayload = {
+    access?: Partial<Record<ItemAccessLevel, SharingLevelPayload>>;
+};
+export type ShareAccessTransport = {
+    load: () => Promise<Record<string, any>>;
+    save: (sharing: SharingPayload) => Promise<void>;
+};
 export type ShareAccessComponentProps = {
     isOpen: boolean;
     requestUrl?: string;
+    transport?: ShareAccessTransport;
     resourceLabel: string;
     resourceName?: string;
     resourceDescription?: string;
@@ -13,7 +27,7 @@ export type ShareAccessComponentProps = {
     displayMode?: 'dialog' | 'inline';
     onClose: () => void;
 };
-export declare function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resourceName, resourceDescription: _resourceDescription, expanded, onSharingAccessRestrictedChange, defaultAccessLevel, principalKinds, displayMode, onClose, }: ShareAccessComponentProps): JSX.Element | null;
+export declare function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLabel, resourceName, resourceDescription: _resourceDescription, expanded, onSharingAccessRestrictedChange, defaultAccessLevel, principalKinds, displayMode, onClose, }: ShareAccessComponentProps): JSX.Element | null;
 export default ShareAccessComponent;
 export declare const ShareAccessDialog: typeof ShareAccessComponent;
 export type ShareAccessDialogProps = ShareAccessComponentProps;

package/lib/components/sharing/ShareAccessComponent.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, useEffect, useMemo, useRef, useState } from 'react';
 import { ChevronDownIcon, ChevronUpIcon, KeyIcon, PersonIcon, OrganizationIcon, PeopleIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
@@ -382,7 +378,7 @@ function AccessPrincipalRow({ entry, cache, showAvatarSkeleton = false, isPlatfo
 // ---------------------------------------------------------------------------
 // Main component.
 // ---------------------------------------------------------------------------
-export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resourceName, resourceDescription: _resourceDescription, expanded = false, onSharingAccessRestrictedChange, defaultAccessLevel = 'view', principalKinds = DEFAULT_PRINCIPAL_KINDS, displayMode = 'dialog', onClose, }) {
+export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLabel, resourceName, resourceDescription: _resourceDescription, expanded = false, onSharingAccessRestrictedChange, defaultAccessLevel = 'view', principalKinds = DEFAULT_PRINCIPAL_KINDS, displayMode = 'dialog', onClose, }) {
     void _resourceDescription;
     const { token, user } = useIAMStore();
     const { configuration } = useCoreStore();
@@ -432,7 +428,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
         onSharingAccessRestrictedChange,
     ]);
     // ----- Derived -----
-    const canRequest = Boolean(requestUrl && token);
+    const canRequest = Boolean(token && (requestUrl || transport));
     const canSearchPrincipals = Boolean(configuration?.iamUrl && token);
     const iamUrl = configuration?.iamUrl;
     const principalKindsSet = useMemo(() => new Set(principalKinds), [principalKinds]);
@@ -492,7 +488,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
             userHydrationMissesRef.current = new Set();
             return;
         }
-        if (!canRequest || !requestUrl) {
+        if (!canRequest) {
             setIsLoading(false);
             setIsSharingAccessConfirmed(false);
             return;
@@ -507,14 +503,18 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
             setIsSharingAccessConfirmed(false);
             setSharingAccessMessage(null);
             try {
-                const response = await fetch(requestUrl, {
-                    method: 'GET',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        Authorization: `Bearer ${token}`,
-                    },
-                });
-                const payload = await response.json();
+                const response = transport
+                    ? null
+                    : await fetch(requestUrl, {
+                        method: 'GET',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            Authorization: `Bearer ${token}`,
+                        },
+                    });
+                const payload = transport
+                    ? await transport.load()
+                    : await response.json();
                 const message = payload?.detail ||
                     payload?.message ||
                     `Unable to load ${resourceLabel.toLowerCase()} sharing.`;
@@ -528,7 +528,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                     }
                     throw new Error(message);
                 }
-                if (!response.ok) {
+                if (response && !response.ok) {
                     if (response.status === 403 ||
                         isSharingAuthorizationMessage(message)) {
                         if (!cancelled) {
@@ -585,6 +585,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
         isOpen,
         canRequest,
         requestUrl,
+        transport,
         token,
         resourceLabel,
         resourceName,
@@ -1009,7 +1010,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
     ]);
     // ----- Auto-save on access change after hydration -----
     const saveAccess = useCallback(async (snapshot) => {
-        if (!canRequest || !requestUrl) {
+        if (!canRequest) {
             return;
         }
         setIsSaving(true);
@@ -1033,6 +1034,13 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                     },
                 },
             };
+            if (transport) {
+                await transport.save(body);
+                enqueueToastRef.current(`${resourceLabel} sharing updated.`, {
+                    variant: 'success',
+                });
+                return;
+            }
             const response = await fetch(requestUrl, {
                 method: 'PUT',
                 headers: {
@@ -1073,7 +1081,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
         finally {
             setIsSaving(false);
         }
-    }, [canRequest, requestUrl, token, resourceLabel]);
+    }, [canRequest, requestUrl, token, resourceLabel, transport]);
     useEffect(() => {
         if (!hasHydratedSharingRef.current) {
             return;
@@ -1262,7 +1270,9 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                             alignItems: 'flex-start',
                             justifyContent: 'space-between',
                             gap: 2,
-                        }, children: [_jsx(Box, { sx: { display: 'grid', gap: 1 }, children: _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Share ", resourceName || `this ${resourceLabel.toLowerCase()}`, ". Pick a principal below \u2014 they will be granted the selected access level."] }) }), _jsxs(ActionMenu, { children: [_jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(ActionMenu.Anchor, { children: _jsxs(Button, { variant: "default", size: "small", leadingVisual: KeyIcon, disabled: isSaving || isReadOnly, children: ["Access: ", ACCESS_LEVEL_LABELS[selectedAccessLevel]] }) }), _jsx(Button, { variant: "invisible", size: "small", leadingVisual: isExpanded ? ChevronUpIcon : ChevronDownIcon, onClick: () => setIsExpanded(previous => !previous), "aria-label": isExpanded ? 'Shrink sharing details' : 'Expand sharing details', children: isExpanded ? 'Shrink details' : 'Expand details' })] }), _jsx(ActionMenu.Overlay, { width: "small", children: _jsx(ActionList, { selectionVariant: "single", children: ACCESS_LEVELS.map(level => (_jsx(ActionList.Item, { selected: selectedAccessLevel === level, onSelect: () => setSelectedAccessLevel(level), children: ACCESS_LEVEL_LABELS[level] }, level))) }) })] })] }), !isExpanded && (_jsxs(Box, { sx: {
+                        }, children: [_jsx(Box, { sx: { display: 'grid', gap: 1 }, children: _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Share ", resourceName || `this ${resourceLabel.toLowerCase()}`, ". Pick a principal below \u2014 they will be granted the selected access level."] }) }), _jsxs(ActionMenu, { children: [_jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(ActionMenu.Anchor, { children: _jsxs(Button, { variant: "default", size: "small", leadingVisual: KeyIcon, disabled: isSaving || isReadOnly, children: ["Access: ", ACCESS_LEVEL_LABELS[selectedAccessLevel]] }) }), _jsx(Button, { variant: "invisible", size: "small", leadingVisual: isExpanded ? ChevronUpIcon : ChevronDownIcon, onClick: () => setIsExpanded(previous => !previous), "aria-label": isExpanded
+                                                    ? 'Shrink sharing details'
+                                                    : 'Expand sharing details', children: isExpanded ? 'Shrink details' : 'Expand details' })] }), _jsx(ActionMenu.Overlay, { width: "small", children: _jsx(ActionList, { selectionVariant: "single", children: ACCESS_LEVELS.map(level => (_jsx(ActionList.Item, { selected: selectedAccessLevel === level, onSelect: () => setSelectedAccessLevel(level), children: ACCESS_LEVEL_LABELS[level] }, level))) }) })] })] }), !isExpanded && (_jsxs(Box, { sx: {
                             px: 3,
                             py: 2,
                             borderRadius: 2,
@@ -1272,7 +1282,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                             bg: 'canvas.default',
                             display: 'grid',
                             gap: 1,
-                        }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Sharing details are collapsed." }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [aclEntries.length, " principal", aclEntries.length === 1 ? '' : 's', " currently granted access."] })] })), isExpanded && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                        }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Sharing details are collapsed." }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [aclEntries.length, " principal", aclEntries.length === 1 ? '' : 's', ' ', "currently granted access."] })] })), isExpanded && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
                                     px: 3,
                                     py: 2,
                                     borderRadius: 2,
@@ -1303,7 +1313,11 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                                             alignItems: 'center',
                                             justifyContent: 'space-between',
                                             gap: 2,
-                                        }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 600 }, children: "Share with\u2026" }), isLoadingShareable && (_jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Loading\u2026" })] }))] }), !isLoadingShareable &&
+                                        }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 600 }, children: "Share with\u2026" }), isLoadingShareable && (_jsxs(Box, { sx: {
+                                                    display: 'inline-flex',
+                                                    alignItems: 'center',
+                                                    gap: 1,
+                                                }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Loading\u2026" })] }))] }), !isLoadingShareable &&
                                         groupedShareable.self.length === 0 &&
                                         groupedShareable.otherUsers.length === 0 &&
                                         groupedShareable.orgs.length === 0 &&
@@ -1356,8 +1370,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                                                                     gap: 1,
                                                                     flexWrap: 'wrap',
                                                                 }, children: [_jsx(Text, { children: result.displayName }), result.kind === 'personal' && (_jsx(Label, { size: "small", variant: "secondary", children: result.origin ||
-                                                                            principalCache[principalKey('personal', result.uid)]
-                                                                                ?.origin ||
+                                                                            principalCache[principalKey('personal', result.uid)]?.origin ||
                                                                             'Datalayer' }))] }), _jsxs(ActionList.Description, { variant: "block", children: ["@", result.handle] })] }, principalKey(result.kind, result.uid)))) })) }))] })] }), _jsxs(Box, { sx: {
                                     px: 3,
                                     py: 2,

package/lib/components/sharing/SharingEditor.d.ts

@@ -1,3 +1,20 @@
+/**
+ * SharingEditor — inline editor for the sharing payload shape used by
+ * `ShareAccessComponent` ACL endpoints.
+ *
+ * Unlike `ShareAccessComponent` (which is bound to a server-side resource
+ * via `requestUrl`), this component edits a free-form
+ * `{ access: { view/update/execute: { userUids, teamUids, organizationUids } } }`
+ * blob in memory. It is intended for "create" flows where the resource does
+ * not yet exist and the sharing payload must be POSTed alongside the rest of
+ * the configuration.
+ *
+ * This is a scaffold: it currently exposes a structured JSON editor with
+ * validation and the canonical default shape. Future iterations can replace
+ * the textarea with the same principal-picker UI used by
+ * `ShareAccessComponent`.
+ */
+import type { JSX } from 'react';
 export type SharingAccessLevel = 'view' | 'update' | 'execute';
 export type SharingLevelPayload = {
     userUids?: string[];

package/lib/components/sharing/SharingEditor.js

@@ -1,28 +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.
- */
-/**
- * SharingEditor — inline editor for the sharing payload shape used by
- * `ShareAccessComponent` ACL endpoints.
- *
- * Unlike `ShareAccessComponent` (which is bound to a server-side resource
- * via `requestUrl`), this component edits a free-form
- * `{ access: { view/update/execute: { userUids, teamUids, organizationUids } } }`
- * blob in memory. It is intended for "create" flows where the resource does
- * not yet exist and the sharing payload must be POSTed alongside the rest of
- * the configuration.
- *
- * This is a scaffold: it currently exposes a structured JSON editor with
- * validation and the canonical default shape. Future iterations can replace
- * the textarea with the same principal-picker UI used by
- * `ShareAccessComponent`.
- */
 import { useEffect, useMemo, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { FormControl, Text, Textarea } from '@primer/react';