@datalayer/core 1.1.60 → 1.2.10

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,25 +1,5 @@
+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';
-import { SvgAgentsHomeHero } from '@datalayer/design/lib/svg/SvgAgentsHomeHero';
-import { SvgBlogHero } from '@datalayer/design/lib/svg/SvgBlogHero';
-import { SvgCareersHero } from '@datalayer/design/lib/svg/SvgCareersHero';
-import { SvgChangelogHero } from '@datalayer/design/lib/svg/SvgChangelogHero';
-import { SvgCommunityHero } from '@datalayer/design/lib/svg/SvgCommunityHero';
-import { SvgContactHero } from '@datalayer/design/lib/svg/SvgContactHero';
-import { SvgEarthHero } from '@datalayer/design/lib/svg/SvgEarthHero';
-import { SvgEvalsHero } from '@datalayer/design/lib/svg/SvgEvalsHero';
-import { SvgEventsHero } from '@datalayer/design/lib/svg/SvgEventsHero';
-import { SvgIntegrationsHero } from '@datalayer/design/lib/svg/SvgIntegrationsHero';
-import { SvgLoginHero } from '@datalayer/design/lib/svg/SvgLoginHero';
-import { SvgPartnersHero } from '@datalayer/design/lib/svg/SvgPartnersHero';
-import { SvgPricingHero } from '@datalayer/design/lib/svg/SvgPricingHero';
-import { SvgPrivacyHero } from '@datalayer/design/lib/svg/SvgPrivacyHero';
-import { SvgResearchHero } from '@datalayer/design/lib/svg/SvgResearchHero';
-import { SvgStarsHero } from '@datalayer/design/lib/svg/SvgStarsHero';
-import { SvgTermsHero } from '@datalayer/design/lib/svg/SvgTermsHero';
-import { SvgTutorialsHero } from '@datalayer/design/lib/svg/SvgTutorialsHero';
-import { SvgUsecasesHero } from '@datalayer/design/lib/svg/SvgUsecasesHero';
 export type PrincipalType = 'personal' | 'organization' | 'team';
 type AvatarComponent = ComponentType<SVGProps<SVGSVGElement> & {
     size?: number | 'small' | 'medium' | 'large';
@@ -45,87 +25,87 @@ export declare const PRINCIPAL_AVATAR_ICONS: ReadonlyArray<{
 export declare const PRINCIPAL_BANNERS: readonly [{
     readonly name: "SvgAboutHero";
     readonly label: "About";
-    readonly Component: typeof SvgAboutHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgAgentsHero";
     readonly label: "Agents";
-    readonly Component: typeof SvgAgentsHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgAgentsHomeHero";
     readonly label: "Agents home";
-    readonly Component: typeof SvgAgentsHomeHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgBlogHero";
     readonly label: "Blog";
-    readonly Component: typeof SvgBlogHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgCareersHero";
     readonly label: "Careers";
-    readonly Component: typeof SvgCareersHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgChangelogHero";
     readonly label: "Changelog";
-    readonly Component: typeof SvgChangelogHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgCommunityHero";
     readonly label: "Community";
-    readonly Component: typeof SvgCommunityHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgContactHero";
     readonly label: "Contact";
-    readonly Component: typeof SvgContactHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgEarthHero";
     readonly label: "Earth";
-    readonly Component: typeof SvgEarthHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgEvalsHero";
     readonly label: "Evaluations";
-    readonly Component: typeof SvgEvalsHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgEventsHero";
     readonly label: "Events";
-    readonly Component: typeof SvgEventsHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgIntegrationsHero";
     readonly label: "Integrations";
-    readonly Component: typeof SvgIntegrationsHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgLoginHero";
     readonly label: "Login";
-    readonly Component: typeof SvgLoginHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgPartnersHero";
     readonly label: "Partners";
-    readonly Component: typeof SvgPartnersHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgPricingHero";
     readonly label: "Pricing";
-    readonly Component: typeof SvgPricingHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgPrivacyHero";
     readonly label: "Privacy";
-    readonly Component: typeof SvgPrivacyHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgResearchHero";
     readonly label: "Research";
-    readonly Component: typeof SvgResearchHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgStarsHero";
     readonly label: "Stars";
-    readonly Component: typeof SvgStarsHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgTermsHero";
     readonly label: "Terms";
-    readonly Component: typeof SvgTermsHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgTutorialsHero";
     readonly label: "Tutorials";
-    readonly Component: typeof SvgTutorialsHero;
+    readonly Component: ComponentType<any>;
 }, {
     readonly name: "SvgUsecasesHero";
     readonly label: "Use cases";
-    readonly Component: typeof SvgUsecasesHero;
+    readonly Component: ComponentType<any>;
 }];
 export declare function getPrincipalBannerForSeed(seed: string): string;
 export declare function getPrincipalAvatarIcon(name?: string): AvatarComponent | undefined;