@datalayer/core 1.0.25 → 1.1.41

package/lib/components/billing/index.js

@@ -1,3 +1,7 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 /*
  * Copyright (c) 2023-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.

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

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

package/lib/components/context/index.js

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

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

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

package/lib/components/display/DisplayHandle.js

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

package/lib/components/display/LiveRelativeTime.js

@@ -1,3 +1,7 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 /*
  * Copyright (c) 2023-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.

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

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

package/lib/components/display/index.js

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

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

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

package/lib/components/flashes/index.js

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

package/lib/components/index.d.ts

@@ -1,6 +1,5 @@
 export * from './auth';
 export * from './billing';
-export * from './scheduler';
 export * from './sharing';
 export * from './sparklines';
 export * from './time';

package/lib/components/index.js

@@ -4,7 +4,6 @@
  */
 export * from './auth/index.js';
 export * from './billing/index.js';
-export * from './scheduler/index.js';
 export * from './sharing/index.js';
 export * from './sparklines/index.js';
 export * from './time/index.js';

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

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

package/lib/components/principal/Principal.js

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

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

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

package/lib/components/principal/PrincipalAvatar.js

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

package/lib/components/principal/PrincipalBadge.js

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

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

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

package/lib/components/principal/PrincipalDetailsOverlay.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { ActionMenu, Box, Button, Text } from '@primer/react';
+import { ActionMenu, Box, Button, Label, Text } from '@primer/react';
 import { useNavigate } from '../../hooks/index.js';
 import { PrincipalAvatar } from './PrincipalAvatar.js';
 function normalize(value) {
@@ -16,7 +16,7 @@ export function buildPrincipalProfilePath({ kind, uid, handle, accountHandle, is
     const safeHandle = normalizedHandle && normalizedHandle !== normalizedUid
         ? normalizedHandle
         : '';
-    if (kind === 'user') {
+    if (kind === 'personal') {
         if (isAdmin && normalizedUid) {
             return `/admin/management/iam/users/${normalizedUid}`;
         }
@@ -45,7 +45,7 @@ export function buildPrincipalProfilePath({ kind, uid, handle, accountHandle, is
     }
     return null;
 }
-export function PrincipalDetailsOverlay({ kind, uid, displayName, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, isAdmin = false, }) {
+export function PrincipalDetailsOverlay({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, isAdmin = false, }) {
     const navigate = useNavigate();
     const normalizedDisplayName = normalize(displayName) ||
         normalize(handle) ||
@@ -53,10 +53,16 @@ export function PrincipalDetailsOverlay({ kind, uid, displayName, handle, accoun
         'Principal';
     const normalizedHandle = normalize(handle);
     const normalizedUid = normalize(uid);
+    const normalizedName = normalize(name);
+    const normalizedDescription = normalize(description);
+    const normalizedOrigin = normalize(origin) || 'Datalayer';
+    const resolvedHandle = normalizedHandle && normalizedHandle !== normalizedUid
+        ? normalizedHandle
+        : '';
     const targetPath = buildPrincipalProfilePath({
         kind,
         uid: normalizedUid,
-        handle: normalizedHandle,
+        handle: resolvedHandle,
         accountHandle,
         isAdmin,
     });
@@ -72,15 +78,29 @@ export function PrincipalDetailsOverlay({ kind, uid, displayName, handle, accoun
                         ':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, alt: normalizedDisplayName, size: 40 }), _jsxs(Box, { sx: { display: 'grid', gap: 0.5 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: normalizedDisplayName }), normalizedHandle ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["@", normalizedHandle] })) : null] })] }), _jsxs(Box, { sx: {
+                    }, 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, alt: normalizedDisplayName, size: 40 }), _jsxs(Box, { sx: { display: 'grid', gap: 0.5 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: normalizedDisplayName }), resolvedHandle ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["@", resolvedHandle] })) : null] })] }), _jsxs(Box, { sx: {
                                 display: 'grid',
                                 gridTemplateColumns: '110px 1fr',
                                 gap: 1,
                                 alignItems: 'baseline',
-                            }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Type" }), _jsx(Text, { sx: { fontSize: 1 }, children: kind }), normalizedHandle ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsxs(Text, { sx: { fontSize: 1 }, children: ["@", normalizedHandle] })] })) : null, normalizedUid ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedUid })] })) : null, kind === 'user' ? (_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' }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Text, { sx: { fontSize: 1 }, children: origin || 'Datalayer' }), email ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontSize: 1 }, children: email })] })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Text, { sx: { fontSize: 1 }, children: origin || 'Datalayer' })] }))] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Button, { size: "small", onClick: () => {
+                            }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Kind" }), _jsx(Text, { sx: { fontSize: 1 }, children: kind }), resolvedHandle ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsxs(Text, { sx: { fontSize: 1 }, children: ["@", 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: [_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' }), _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 })] }))] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Button, { size: "small", onClick: () => {
                                     if (targetPath) {
                                         navigate(targetPath);
                                     }
-                                }, disabled: !targetPath, children: "View profile" }) })] }) })] }));
+                                }, disabled: !targetPath, children: "View Profile" }) })] }) })] }));
 }
 export default PrincipalDetailsOverlay;