@datalayer/core 1.1.60 → 1.1.66

package/lib/components/flashes/FlashUnauthorized.js

@@ -1,10 +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 { AlertIcon } from '@primer/octicons-react';
-// import { Box, Flash as PrimerFlash, Link } from '@primer/react';
 import { Link } from '@primer/react';
 import { Banner } from '@primer/react/experimental';
 import { QuestionIcon } from '@primer/octicons-react';

package/lib/components/flashes/surveys/Survey2025_1.d.ts

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

package/lib/components/iam/ExternalTokenSilentLogin.d.ts

@@ -1,5 +1,5 @@
 type IExternalTokenSilentLoginProps = {
     message: string;
 };
-export declare const ExternalTokenSilentLogin: (props: IExternalTokenSilentLoginProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ExternalTokenSilentLogin: (props: IExternalTokenSilentLoginProps) => import("react").JSX.Element;
 export default ExternalTokenSilentLogin;

package/lib/components/index.d.ts

@@ -2,6 +2,8 @@ export * from './auth';
 export * from './animation';
 export * from './billing';
 export * from './collaboration';
+export * from './contents';
+export * from './mcp';
 export * from './sharing';
 export * from './sparklines';
 export * from './time';

package/lib/components/index.js

@@ -6,6 +6,8 @@ export * from './auth/index.js';
 export * from './animation/index.js';
 export * from './billing/index.js';
 export * from './collaboration/index.js';
+export * from './contents/index.js';
+export * from './mcp/index.js';
 export * from './sharing/index.js';
 export * from './sparklines/index.js';
 export * from './time/index.js';

package/lib/components/labels/StatusLabels.d.ts

@@ -9,6 +9,7 @@
  *
  * @module components/labels/StatusLabels
  */
+import type { JSX } from 'react';
 import type { ReactNode } from 'react';
 /** The tones a status pill is read in. */
 export type StatusLabelTone = 'accent' | 'attention' | 'success' | 'neutral';

package/lib/components/labels/VisibilityLabel.d.ts

@@ -1,4 +1,4 @@
 export declare const VisibilityLabel: (props: {
     isPublic: boolean | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default VisibilityLabel;

package/lib/components/landings/StepBlock.d.ts

@@ -7,5 +7,5 @@ type IStepBlockProps = {
         colored?: boolean;
     }>;
 };
-export declare const StepBlock: (props: IStepBlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StepBlock: (props: IStepBlockProps) => import("react").JSX.Element;
 export default StepBlock;

package/lib/components/mcp/ClientBadge.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Which client this is, said the way its identity was established.
+ *
+ * A client that registered by Client ID Metadata Document *is* its URL: the
+ * host is the part of its identity nobody can invent, and it is what the
+ * consent screen showed — so the URL is the client id on screen, with the
+ * hostname read out beneath the name. A client registered through the
+ * deprecated dynamic path has an opaque id and gets it plainly, marked as
+ * such, because the two are not the same kind of fact.
+ *
+ * The badge explains itself through `title` and its accessible name rather
+ * than a Primer `Tooltip`. That component requires an interactive child and
+ * warns otherwise, because a tooltip on a label appears on hover and nowhere
+ * else — it does not exist for a keyboard or a screen reader. A `<button>`
+ * around the word would silence the warning by trading one problem for
+ * another: a tab stop that announces itself as a button and does nothing.
+ *
+ * The word alone is the part that needs explaining. "Document" read out on
+ * its own says nothing, so the accessible name is the whole sentence.
+ *
+ * @module components/mcp/ClientBadge
+ */
+import type { JSX } from 'react';
+import type { ConnectedAgentRegistration } from '../../api/iam/connectedAgents';
+export interface ClientBadgeProps {
+    clientId: string;
+    clientName?: string | null;
+    /**
+     * How the client registered, when IAM said. Without it the id's shape is
+     * used, which is what an audit row or a task leaves us with.
+     */
+    registration?: ConnectedAgentRegistration;
+    /** The document's hostname, when IAM answered one. */
+    clientHostname?: string | null;
+    /** Without the second line, for a dense table. */
+    compact?: boolean;
+}
+/** The hostname of a document URL, or an empty string for anything else. */
+export declare const clientHostnameOf: (clientId: string) => string;
+export declare const ClientBadge: ({ clientId, clientName, registration, clientHostname, compact, }: ClientBadgeProps) => JSX.Element;
+export default ClientBadge;

package/lib/components/mcp/ClientBadge.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { isCimdClientId } from '../../api/iam/connectedAgents.js';
+/** The hostname of a document URL, or an empty string for anything else. */
+export const clientHostnameOf = (clientId) => {
+    try {
+        return new URL(clientId).hostname;
+    }
+    catch {
+        return '';
+    }
+};
+export const ClientBadge = ({ clientId, clientName, registration, clientHostname, compact = false, }) => {
+    const byDocument = (registration ?? (isCimdClientId(clientId) ? 'cimd' : 'dcr')) === 'cimd';
+    const hostname = clientHostname || (byDocument ? clientHostnameOf(clientId) : '');
+    const name = clientName || (byDocument ? hostname : '') || clientId || 'Unknown client';
+    return (_jsxs(Box, { sx: { display: 'grid', gap: '2px', minWidth: 0 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, minWidth: 0 }, children: [_jsx(Text, { sx: {
+                            fontSize: 1,
+                            fontWeight: 'semibold',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }, children: name }), byDocument ? (_jsx(Label, { size: "small", variant: "accent", title: "Registered by Client ID Metadata Document", "aria-label": "Registered by Client ID Metadata Document", children: "Document" })) : (_jsx(Label, { size: "small", variant: "secondary", title: "Registered dynamically; its id is opaque", "aria-label": "Registered dynamically; its id is opaque", children: "Dynamic" }))] }), !compact && clientId && (_jsx(Text, { sx: {
+                    fontSize: 0,
+                    color: 'fg.muted',
+                    fontFamily: 'mono',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                }, title: clientId, children: clientId }))] }));
+};
+export default ClientBadge;

package/lib/components/mcp/McpErrorBlankslate.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A failure, said in the reader's terms, with a way out of it.
+ *
+ * The four situations "could not be loaded" covers each call for a
+ * different response — sign in, ask for access, wait, report — so the
+ * heading and the description come from the application's catalog and the
+ * retry button appears only when retrying could plausibly work.
+ *
+ * @module components/mcp/McpErrorBlankslate
+ */
+import type { JSX } from 'react';
+import type { McpErrorState } from '../../views/mcp/types';
+export interface McpErrorBlankslateProps {
+    state: McpErrorState;
+    /** Asked again; drawn only when the failure is retryable. */
+    onRetry?: () => void;
+    /** Without a border when it sits inside a panel that has one. */
+    border?: boolean;
+}
+export declare const McpErrorBlankslate: ({ state, onRetry, border, }: McpErrorBlankslateProps) => JSX.Element;
+export default McpErrorBlankslate;

package/lib/components/mcp/McpErrorBlankslate.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Text } from '@primer/react';
+import { Blankslate } from '@primer/react/experimental';
+import { AlertIcon, LockIcon, SearchIcon, ShieldLockIcon, StopIcon, } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+const VISUAL = {
+    unauthenticated: ShieldLockIcon,
+    forbidden: LockIcon,
+    'not-found': SearchIcon,
+    unavailable: StopIcon,
+    unknown: AlertIcon,
+};
+export const McpErrorBlankslate = ({ state, onRetry, border = true, }) => {
+    const Icon = VISUAL[state.reason];
+    return (_jsx(Box, { sx: { width: '100%', minWidth: 0 }, children: _jsxs(Blankslate, { border: border, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(Icon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: state.heading }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: state.description }) }), state.retryable && onRetry && (_jsx(Button, { size: "small", onClick: onRetry, children: "Try again" }))] }) }));
+};
+export default McpErrorBlankslate;

package/lib/components/mcp/ScopeList.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The scopes a grant carries, as labels.
+ *
+ * A grant with a dozen scopes would push every other column off the row, so
+ * the list shows the first few and says how many more there are; the whole
+ * list is in the title, which is where a reader who needs it looks.
+ *
+ * The `+N` is **not** a Primer `Tooltip`. That component requires an
+ * interactive child and warns otherwise, for a good reason: a tooltip on a
+ * span appears on hover and nowhere else, so it does not exist for anybody
+ * using a keyboard or a screen reader. Wrapping the count in a `<button>`
+ * would silence the warning by trading one problem for another — a tab stop
+ * that announces itself as a button and does nothing when pressed.
+ *
+ * So the scopes go where they are actually readable: `title` for the mouse,
+ * and the accessible name for everything else. Which is what the sentence
+ * above always said.
+ *
+ * @module components/mcp/ScopeList
+ */
+import type { JSX } from 'react';
+export interface ScopeListProps {
+    scopes: string[];
+    /** How many are drawn before the rest become a count. */
+    max?: number;
+}
+export declare const ScopeList: ({ scopes, max }: ScopeListProps) => JSX.Element;
+export default ScopeList;

package/lib/components/mcp/ScopeList.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+export const ScopeList = ({ scopes, max = 3 }) => {
+    if (scopes.length === 0) {
+        // A grant with no scope grants nothing, which is worth saying rather
+        // than drawing as an empty cell.
+        return _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No scope" });
+    }
+    const shown = scopes.slice(0, max);
+    const rest = scopes.length - shown.length;
+    return (_jsxs(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap', alignItems: 'center' }, children: [shown.map(scope => (_jsx(Label, { size: "small", variant: "secondary", children: scope }, scope))), rest > 0 && (_jsxs(Text, { as: "span", title: scopes.join('\n'), "aria-label": `and ${rest} more: ${scopes.slice(max).join(', ')}`, sx: { fontSize: 0, color: 'fg.muted' }, children: ["+", rest] }))] }));
+};
+export default ScopeList;

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

@@ -0,0 +1,10 @@
+/**
+ * The pieces every MCP surface is drawn from, so a client, a scope and a
+ * failure look the same on the dashboard, in the settings and in the
+ * Enterprise console.
+ *
+ * @module components/mcp
+ */
+export * from './ClientBadge';
+export * from './McpErrorBlankslate';
+export * from './ScopeList';

package/lib/components/mcp/index.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The pieces every MCP surface is drawn from, so a client, a scope and a
+ * failure look the same on the dashboard, in the settings and in the
+ * Enterprise console.
+ *
+ * @module components/mcp
+ */
+export * from './ClientBadge.js';
+export * from './McpErrorBlankslate.js';
+export * from './ScopeList.js';

package/lib/components/navbar/NavigationVisbilityObserver.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 export declare function NavigationVisbilityObserver({ children, className, ...rest }: {
     [x: string]: any;
     children: any;
     className: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/lib/components/navbar/SubdomainNavBar.d.ts

@@ -34,13 +34,18 @@ export type SubdomainNavBarProps = {
      */
     logoHref?: string;
 };
-declare function Root({ children, className, fixed, fullWidth, logoHref, title, titleHref, ...rest }: SubdomainNavBarProps): import("react/jsx-runtime").JSX.Element;
+declare function Root({ children, className, fixed, fullWidth, logoHref, title, titleHref, ...rest }: SubdomainNavBarProps): React.JSX.Element;
 type LinkProps = {
     href: string;
     isExternal?: boolean;
     target?: string;
+    /**
+     * Set from the link's own text when the overflow menu clones it, so
+     * `useVisibilityObserver` can track which items are visible.
+     */
+    'data-navitemid'?: React.ReactNode;
 } & React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>;
-declare function Link({ href, className, children, isExternal, target, ...rest }: PropsWithChildren<LinkProps>): import("react/jsx-runtime").JSX.Element;
+declare function Link({ href, className, children, isExternal, target, ...rest }: PropsWithChildren<LinkProps>): React.JSX.Element;
 export type SubdomainNavBarSearchResultProps = {
     title: string;
     description: string;
@@ -51,7 +56,7 @@ export type SubdomainNavBarSearchResultProps = {
 type SearchProps = {
     onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    ref: React.RefObject<HTMLInputElement>;
+    ref: React.RefObject<HTMLInputElement | null>;
     active?: boolean;
     title?: string;
     handlerFn?: (event: MouseEvent | TouchEvent | FocusEvent) => void;
@@ -63,8 +68,8 @@ type CTAActionProps = {
     hasArrow?: boolean;
     size?: string;
 } & React.HTMLAttributes<HTMLAnchorElement>;
-declare function PrimaryAction({ children, ...rest }: PropsWithChildren<CTAActionProps>): import("react/jsx-runtime").JSX.Element;
-declare function SecondaryAction({ children, ...rest }: PropsWithChildren<CTAActionProps>): import("react/jsx-runtime").JSX.Element;
+declare function PrimaryAction({ children, ...rest }: PropsWithChildren<CTAActionProps>): React.JSX.Element;
+declare function SecondaryAction({ children, ...rest }: PropsWithChildren<CTAActionProps>): React.JSX.Element;
 export declare const SubdomainNavBar: typeof Root & {
     Link: typeof Link;
     Search: React.ForwardRefExoticComponent<Omit<SearchProps, "ref"> & React.RefAttributes<unknown>>;

package/lib/components/navbar/SubdomainNavBar.js

@@ -81,7 +81,8 @@ function Root({ children, className, fixed = true, fullWidth = false, logoHref =
     []).length > 0;
     const menuItems = useMemo(() => React.Children.toArray(children)
         .map((child, index) => {
-        if (React.isValidElement(child) && typeof child.type !== 'string') {
+        if (React.isValidElement(child) &&
+            typeof child.type !== 'string') {
             if (child.type === Link) {
                 return React.cloneElement(child, {
                     'data-navitemid': child.props.children,

package/lib/components/notebooks/JupyterNotebook.d.ts

@@ -3,5 +3,5 @@ type IJupyterNotebooProps = {
     boxPanel: BoxPanel;
     height?: string;
 };
-export declare const JupyterNotebook: ({ boxPanel, height, }: IJupyterNotebooProps) => import("react/jsx-runtime").JSX.Element;
+export declare const JupyterNotebook: ({ boxPanel, height, }: IJupyterNotebooProps) => import("react").JSX.Element;
 export default JupyterNotebook;

package/lib/components/notebooks/JupyterNotebookToolbar.d.ts

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

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

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { type ComponentType, type SVGProps } from 'react';
 import { SvgAboutHero } from '@datalayer/design/lib/svg/SvgAboutHero';
 import { SvgAgentsHero } from '@datalayer/design/lib/svg/SvgAgentsHero';

package/lib/components/principal/PrincipalAppearance.js

@@ -1,12 +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.
- */
-/*
- * Copyright (c) 2023-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
 import { useEffect, useState } from 'react';
 import { Box, Button, Text, Tooltip } from '@primer/react';
 import { Dialog } from '@primer/react/experimental';

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

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { type PrincipalType } from './PrincipalAppearance';
 export type PrincipalAvatarKind = PrincipalType;
 export type PrincipalAvatarProps = {

package/lib/components/principal/PrincipalAvatar.js

@@ -1,12 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
 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));
 }
@@ -17,6 +13,18 @@ export function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size = 20, s
     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, 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;
@@ -20,6 +21,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 +43,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, 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, 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;