@datalayer/core 1.1.59 → 1.1.66

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

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

package/lib/components/echarts/EChartsReact.d.ts

@@ -7,5 +7,5 @@ export interface EChartsProps {
     loading?: boolean;
     theme?: 'light' | 'dark';
 }
-export declare const EChartsReact: ({ options, style, settings, loading, theme, }: EChartsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const EChartsReact: ({ options, style, settings, loading, theme, }: EChartsProps) => import("react").JSX.Element;
 export default EChartsReact;

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

@@ -1,3 +1,4 @@
+import type { JSX } from 'react';
 import { FlashProps } from '@primer/react';
 /**
  * {@link FlashClosable} component properties

package/lib/components/flashes/FlashClosable.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 { AlertIcon, CheckIcon, InfoIcon, StopIcon, XIcon, } from '@primer/octicons-react';
 import { Flash as PrimerFlash, IconButton } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';

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

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

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

@@ -2,5 +2,5 @@ export declare const SURVEY_2025_1_NAME = "2025-1";
 type IFlashSurveysProps = {
     surveyName?: string;
 };
-export declare const FlashSurveys: (props: IFlashSurveysProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FlashSurveys: (props: IFlashSurveysProps) => import("react").JSX.Element;
 export default FlashSurveys;

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

@@ -1,2 +1,3 @@
+import type { JSX } from 'react';
 export declare const FlashUnauthorized: () => JSX.Element;
 export default FlashUnauthorized;

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';
@@ -39,4 +40,13 @@ export declare function AdminLabel(props?: StatusLabelProps): JSX.Element;
  * The one that is taken when none is chosen — the default space of an account.
  */
 export declare function DefaultLabel(props?: StatusLabelProps): JSX.Element;
+/**
+ * Something announced and not there yet.
+ *
+ * A tone of its own, and deliberately not the accent an alpha wears: one says
+ * "you may try this, it may bite", the other "there is nothing to try". Read
+ * side by side in a navigation, two labels of one colour say the same thing
+ * about two entries that mean different things.
+ */
+export declare function SoonLabel(props?: StatusLabelProps): JSX.Element;
 export default StatusLabel;

package/lib/components/labels/StatusLabels.js

@@ -33,7 +33,24 @@ export function StatusLabel(props) {
     return (_jsx(Label, { variant: "secondary", size: size, sx: {
             textTransform: 'lowercase',
             lineHeight: 1.2,
-            ...TONES[tone],
+            /*
+             * The tone, under a doubled selector.
+             *
+             * Primer ships `NavList` and `ActionList` as CSS modules, and the
+             * colour they set on the contents of an item ties with the one Emotion
+             * generates for `sx` — so the same label came out in the colour of the
+             * navigation in one place and in its own colour in another, depending
+             * on which stylesheet happened to come last. `&&` raises the
+             * specificity enough that the tone always lands, wherever the label is
+             * put.
+             */
+            '&&': {
+                ...TONES[tone],
+                // The navigation of Primer colours the contents of its items, and
+                // its stylesheet is loaded after ours: a doubled selector was not
+                // enough on its own, so the colour of the tone is stated as final.
+                color: `${TONES[tone].color} !important`,
+            },
             ...sx,
         }, children: children }));
 }
@@ -58,4 +75,16 @@ export function DefaultLabel(props = {}) {
     const { children = 'default', ...rest } = props;
     return (_jsx(StatusLabel, { tone: "accent", ...rest, children: children }));
 }
+/**
+ * Something announced and not there yet.
+ *
+ * A tone of its own, and deliberately not the accent an alpha wears: one says
+ * "you may try this, it may bite", the other "there is nothing to try". Read
+ * side by side in a navigation, two labels of one colour say the same thing
+ * about two entries that mean different things.
+ */
+export function SoonLabel(props = {}) {
+    const { children = 'soon', ...rest } = props;
+    return (_jsx(StatusLabel, { tone: "neutral", ...rest, children: children }));
+}
 export default StatusLabel;

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 = {
@@ -7,7 +8,14 @@ export type PrincipalAvatarProps = {
     alt?: string;
     size?: number;
     square?: boolean;
+    /**
+     * Whether a ring is drawn around the avatar.
+     *
+     * Off by default, and the same option `UserAvatar` carries — a public
+     * profile wants the edge, a menu entry does not.
+     */
+    ring?: boolean;
     className?: string;
 };
-export declare function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size, square, className, }: PrincipalAvatarProps): JSX.Element;
+export declare function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size, square, ring, className, }: PrincipalAvatarProps): JSX.Element;
 export default PrincipalAvatar;

package/lib/components/principal/PrincipalAvatar.js

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

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;