@datalayer/core 1.1.57 → 1.1.60

package/lib/components/avatars/UserAvatar.d.ts

@@ -16,7 +16,15 @@ export type UserAvatarProps = {
     fallbackBackground?: string;
     /** Optional icon foreground color override for the default avatar. */
     fallbackForeground?: string;
+    /**
+     * Whether a ring is drawn around the avatar.
+     *
+     * Off by default: an avatar sits on its own in most places, and a ring
+     * there is one more line for nothing. On, it gives the avatar an edge of
+     * its own against a background of the same colour — a profile page, a card.
+     */
+    ring?: boolean;
     className?: string;
 };
-export declare const UserAvatar: ({ avatarUrl, avatarIcon, size, square, iconSize, fallbackBackground, fallbackForeground, className, }: UserAvatarProps) => JSX.Element;
+export declare const UserAvatar: ({ avatarUrl, avatarIcon, size, square, iconSize, fallbackBackground, fallbackForeground, ring, className, }: UserAvatarProps) => JSX.Element;
 export default UserAvatar;

package/lib/components/avatars/UserAvatar.js

@@ -28,8 +28,18 @@ export function hasRealAvatar(url) {
     }
     return true;
 }
-export const UserAvatar = ({ avatarUrl, avatarIcon, size = 100, square = true, iconSize, fallbackBackground, fallbackForeground, className, }) => {
+export const UserAvatar = ({ avatarUrl, avatarIcon, size = 100, square = true, iconSize, fallbackBackground, fallbackForeground, ring = false, className, }) => {
     const palette = useColorPalette();
+    /*
+     * The ring, as a shadow rather than a border.
+     *
+     * A border would take from the size asked for — the avatar is laid out
+     * against others of the same measure — so it is drawn just outside the
+     * edge instead, following whatever shape the avatar has.
+     */
+    const ringSx = ring
+        ? { boxShadow: '0 0 0 1px var(--borderColor-default, currentColor)' }
+        : undefined;
     const SelectedIcon = getPrincipalAvatarIcon(avatarIcon);
     if (SelectedIcon) {
         return (_jsx(Box, { className: className, sx: {
@@ -37,13 +47,16 @@ export const UserAvatar = ({ avatarUrl, avatarIcon, size = 100, square = true, i
                 height: size,
                 borderRadius: square ? 2 : '50%',
                 overflow: 'hidden',
-                display: 'inline-flex',
+                display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            }, children: _jsx(SelectedIcon, { size: size, colored: true }) }));
+                bg: fallbackBackground || 'accent.subtle',
+                '--datalayer-icon-fg': fallbackForeground || palette.primary,
+                ...ringSx,
+            }, children: _jsx(SelectedIcon, { size: iconSize ?? Math.round(size * 0.62), themed: true, colormode: true }) }));
     }
     if (hasRealAvatar(avatarUrl)) {
-        return _jsx(DLAvatar, { className: className, square: square, src: avatarUrl, size: size });
+        return (_jsx(DLAvatar, { className: className, square: square, src: avatarUrl, size: size, sx: ringSx }));
     }
     const resolvedIconSize = iconSize ?? Math.round(size * 0.48);
     return (_jsx(Box, { className: className, sx: {
@@ -55,6 +68,7 @@ export const UserAvatar = ({ avatarUrl, avatarIcon, size = 100, square = true, i
             alignItems: 'center',
             justifyContent: 'center',
             '--datalayer-icon-fg': fallbackForeground || palette.primary,
+            ...ringSx,
         }, children: _jsx(AlienIcon, { size: resolvedIconSize, themed: true, colormode: true }) }));
 };
 export default UserAvatar;

package/lib/components/collaboration/LiveEditorCollaborators.js

@@ -35,10 +35,22 @@ function collaboratorOfState(clientId, state) {
     if (!user) {
         return undefined;
     }
+    // Not a person: the presence of the collaboration service itself — the
+    // spacer joins its own rooms, wearing an `agent` field.
+    if (user.agent) {
+        return undefined;
+    }
     const name = user.display_name || user.displayName || user.name || user.username || '';
     if (!name) {
         return undefined;
     }
+    // Nobody either: the seed identity of a Jupyter Server that does not
+    // authenticate its users — "Anonymous Hegemone" and kin. A face for it
+    // would be one avatar too many, wearing the default fallback, next to the
+    // real identity written over it a moment later.
+    if (user.anonymous === true || /^anonymous(\s|$)/i.test(name)) {
+        return undefined;
+    }
     return {
         id: String(user.uid ?? user.id ?? user.username ?? clientId),
         name,
@@ -102,6 +114,16 @@ export function LiveEditorCollaborators(props) {
     if (!faces.length) {
         return null;
     }
-    return (_jsx(AvatarStack, { size: size, children: faces.map(face => (_jsx(PrincipalAvatar, { kind: "personal", size: size, alt: face.name, avatarUrl: face.avatarUrl, avatarIcon: face.avatarIcon, square: false }, face.id))) }));
+    return (
+    /*
+     * Expanding to the LEFT.
+     *
+     * A stack of faces spreads out on hover, and it spreads from where it is
+     * anchored: anchored on its left, it grew rightwards over whatever the
+     * toolbar holds next to it. `alignRight` anchors it on its right, so it
+     * opens back over the space it came from — empty by construction, since
+     * the stack was collapsed there a moment before.
+     */
+    _jsx(AvatarStack, { alignRight: true, size: size, children: faces.map(face => (_jsx(PrincipalAvatar, { kind: "personal", size: size, alt: face.name, avatarUrl: face.avatarUrl, avatarIcon: face.avatarIcon, square: false }, face.id))) }));
 }
 export default LiveEditorCollaborators;

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

@@ -39,4 +39,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/principal/PrincipalAppearance.d.ts

@@ -23,11 +23,23 @@ import { SvgUsecasesHero } from '@datalayer/design/lib/svg/SvgUsecasesHero';
 export type PrincipalType = 'personal' | 'organization' | 'team';
 type AvatarComponent = ComponentType<SVGProps<SVGSVGElement> & {
     size?: number | 'small' | 'medium' | 'large';
+    /**
+     * The multi-colour variant, of the emoji the icon is drawn from.
+     *
+     * The avatars are never drawn with it — see the picker: they follow the
+     * colour of the theme instead, through `themed` and `colormode`.
+     */
     colored?: boolean;
+    /** Take the colour from `--datalayer-icon-fg`, or from `currentColor`. */
+    themed?: boolean;
+    /** Follow the colour mode of the page. */
+    colormode?: boolean | 'light' | 'dark';
 }>;
 export declare const PRINCIPAL_AVATAR_ICONS: ReadonlyArray<{
     name: string;
     label: string;
+    /** What the picture is of, as the emoji catalogue describes it. */
+    description?: string;
     Icon: AvatarComponent;
 }>;
 export declare const PRINCIPAL_BANNERS: readonly [{

package/lib/components/principal/PrincipalAppearance.js

@@ -1,40 +1,80 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 } from '@primer/react';
+import { Box, Button, Text, Tooltip } from '@primer/react';
 import { Dialog } from '@primer/react/experimental';
+import AlienMaskIcon from '@datalayer/icons-react/data2/AlienMaskIcon';
 import AlienMonsterIcon from '@datalayer/icons-react/data2/AlienMonsterIcon';
 import AstronautIcon from '@datalayer/icons-react/data2/AstronautIcon';
+import AtomSymbolIcon from '@datalayer/icons-react/data2/AtomSymbolIcon';
+import BankIcon from '@datalayer/icons-react/data2/BankIcon';
+import BlackNibIcon from '@datalayer/icons-react/data2/BlackNibIcon';
+import BriefcaseIcon from '@datalayer/icons-react/data2/BriefcaseIcon';
+import BuildingClassicIcon from '@datalayer/icons-react/data2/BuildingClassicIcon';
+import BuildingConstructionIcon from '@datalayer/icons-react/data2/BuildingConstructionIcon';
+import BuildingOfficeIcon from '@datalayer/icons-react/data2/BuildingOfficeIcon';
+import BullseyeIcon from '@datalayer/icons-react/data2/BullseyeIcon';
+import CloudGreyIcon from '@datalayer/icons-react/data2/CloudGreyIcon';
+import ConstructionIcon from '@datalayer/icons-react/data2/ConstructionIcon';
 import ConstructionWorkerIcon from '@datalayer/icons-react/data2/ConstructionWorkerIcon';
 import CowboyHatFaceIcon from '@datalayer/icons-react/data2/CowboyHatFaceIcon';
+import DashboardGreyIcon from '@datalayer/icons-react/data1/DashboardGreyIcon';
+import DnaIcon from '@datalayer/icons-react/data2/DnaIcon';
+import DraftIcon from '@datalayer/icons-react/data1/DraftIcon';
 import DragonFaceIcon from '@datalayer/icons-react/data2/DragonFaceIcon';
+import DragonIcon from '@datalayer/icons-react/data2/DragonIcon';
 import ElfManIcon from '@datalayer/icons-react/data2/ElfManIcon';
+import FireIcon from '@datalayer/icons-react/data2/FireIcon';
+import FireworksIcon from '@datalayer/icons-react/data2/FireworksIcon';
 import FlyingSaucerIcon from '@datalayer/icons-react/data2/FlyingSaucerIcon';
+import FourLeafCloverIcon from '@datalayer/icons-react/data2/FourLeafCloverIcon';
+import GraduationCapIcon from '@datalayer/icons-react/data2/GraduationCapIcon';
 import GremlinIcon from '@datalayer/icons-react/data2/GremlinIcon';
 import GrinningFaceIcon from '@datalayer/icons-react/data2/GrinningFaceIcon';
+import HouseIcon from '@datalayer/icons-react/data2/HouseIcon';
 import LizardIcon from '@datalayer/icons-react/data2/LizardIcon';
 import MagicWandIcon from '@datalayer/icons-react/data2/MagicWandIcon';
 import ManOfficeWorkerIcon from '@datalayer/icons-react/data2/ManOfficeWorkerIcon';
 import ManTechnologistIcon from '@datalayer/icons-react/data2/ManTechnologistIcon';
+import MusicalNoteIcon from '@datalayer/icons-react/data2/MusicalNoteIcon';
 import NinjaIcon from '@datalayer/icons-react/data2/NinjaIcon';
+import OpenHandsIcon from '@datalayer/icons-react/data2/OpenHandsIcon';
+import PenIcon from '@datalayer/icons-react/data2/PenIcon';
 import PenguinIcon from '@datalayer/icons-react/data2/PenguinIcon';
+import PictureIcon from '@datalayer/icons-react/data2/PictureIcon';
+import PlaneDepartureIcon from '@datalayer/icons-react/data2/PlaneDepartureIcon';
 import PersonSurfingIcon from '@datalayer/icons-react/data2/PersonSurfingIcon';
 import PersonSwimmingIcon from '@datalayer/icons-react/data2/PersonSwimmingIcon';
+import PictureFramedIcon from '@datalayer/icons-react/data2/PictureFramedIcon';
 import RingedPlanetIcon from '@datalayer/icons-react/data2/RingedPlanetIcon';
 import RobotIcon from '@datalayer/icons-react/data2/RobotIcon';
 import RocketIcon from '@datalayer/icons-react/data2/RocketIcon';
 import SantaClausIcon from '@datalayer/icons-react/data2/SantaClausIcon';
+import SatelliteIcon from '@datalayer/icons-react/data2/SatelliteIcon';
 import ScientistIcon from '@datalayer/icons-react/data2/ScientistIcon';
 import SharkIcon from '@datalayer/icons-react/data2/SharkIcon';
 import SnowmanIcon from '@datalayer/icons-react/data2/SnowmanIcon';
+import SpaceInvadersAlien1Icon from '@datalayer/icons-react/eggs/SpaceInvadersAlien1Icon';
+import SpaceInvadersAlien2Icon from '@datalayer/icons-react/eggs/SpaceInvadersAlien2Icon';
+import SpaceInvadersAlien3Icon from '@datalayer/icons-react/eggs/SpaceInvadersAlien3Icon';
+import SparklerIcon from '@datalayer/icons-react/data2/SparklerIcon';
 import StarIcon from '@datalayer/icons-react/data2/StarIcon';
-import StudentWomanIcon from '@datalayer/icons-react/data2/StudentWomanIcon';
+import StudentIcon from '@datalayer/icons-react/data2/StudentIcon';
+import StudioMicrophoneIcon from '@datalayer/icons-react/data2/StudioMicrophoneIcon';
 import SunIcon from '@datalayer/icons-react/data2/SunIcon';
+import WavingHandIcon from '@datalayer/icons-react/data2/WavingHandIcon';
 import WhaleSpoutingIcon from '@datalayer/icons-react/data2/WhaleSpoutingIcon';
 import WomanTechnologistIcon from '@datalayer/icons-react/data2/WomanTechnologistIcon';
+import WrappedGiftIcon from '@datalayer/icons-react/data2/WrappedGiftIcon';
+import WritingHandIcon from '@datalayer/icons-react/data2/WritingHandIcon';
+import YinYangIcon from '@datalayer/icons-react/data2/YinYangIcon';
 import { SvgAboutHero } from '@datalayer/design/lib/svg/SvgAboutHero';
 import { SvgAgentsHero } from '@datalayer/design/lib/svg/SvgAgentsHero';
 import { SvgAgentsHomeHero } from '@datalayer/design/lib/svg/SvgAgentsHomeHero';
@@ -57,40 +97,405 @@ 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 const PRINCIPAL_AVATAR_ICONS = [
-    { name: 'AlienMonsterIcon', label: 'Alien monster', Icon: AlienMonsterIcon },
-    { name: 'AstronautIcon', label: 'Astronaut', Icon: AstronautIcon },
-    { name: 'ConstructionWorkerIcon', label: 'Construction worker', Icon: ConstructionWorkerIcon },
-    { name: 'CowboyHatFaceIcon', label: 'Cowboy', Icon: CowboyHatFaceIcon },
-    { name: 'DragonFaceIcon', label: 'Dragon', Icon: DragonFaceIcon },
-    { name: 'ElfManIcon', label: 'Elf', Icon: ElfManIcon },
-    { name: 'FlyingSaucerIcon', label: 'Flying saucer', Icon: FlyingSaucerIcon },
-    { name: 'GremlinIcon', label: 'Gremlin', Icon: GremlinIcon },
-    { name: 'GrinningFaceIcon', label: 'Grinning face', Icon: GrinningFaceIcon },
-    { name: 'LizardIcon', label: 'Lizard', Icon: LizardIcon },
-    { name: 'MagicWandIcon', label: 'Magic wand', Icon: MagicWandIcon },
-    { name: 'ManOfficeWorkerIcon', label: 'Office worker', Icon: ManOfficeWorkerIcon },
-    { name: 'ManTechnologistIcon', label: 'Man technologist', Icon: ManTechnologistIcon },
-    { name: 'NinjaIcon', label: 'Ninja', Icon: NinjaIcon },
-    { name: 'PenguinIcon', label: 'Penguin', Icon: PenguinIcon },
-    { name: 'PersonSurfingIcon', label: 'Surfer', Icon: PersonSurfingIcon },
-    { name: 'PersonSwimmingIcon', label: 'Swimmer', Icon: PersonSwimmingIcon },
-    { name: 'RingedPlanetIcon', label: 'Planet', Icon: RingedPlanetIcon },
-    { name: 'RobotIcon', label: 'Robot', Icon: RobotIcon },
-    { name: 'RocketIcon', label: 'Rocket', Icon: RocketIcon },
-    { name: 'SantaClausIcon', label: 'Santa', Icon: SantaClausIcon },
-    { name: 'ScientistIcon', label: 'Scientist', Icon: ScientistIcon },
-    { name: 'SharkIcon', label: 'Shark', Icon: SharkIcon },
-    { name: 'SnowmanIcon', label: 'Snowman', Icon: SnowmanIcon },
-    { name: 'StarIcon', label: 'Star', Icon: StarIcon },
-    { name: 'StudentWomanIcon', label: 'Student', Icon: StudentWomanIcon },
-    { name: 'SunIcon', label: 'Sun', Icon: SunIcon },
-    { name: 'WhaleSpoutingIcon', label: 'Whale', Icon: WhaleSpoutingIcon },
-    { name: 'WomanTechnologistIcon', label: 'Woman technologist', Icon: WomanTechnologistIcon },
+    {
+        name: 'AlienMaskIcon',
+        label: 'Alien mask',
+        description: 'A mask of an alien face, worn for disguise.',
+        Icon: AlienMaskIcon,
+    },
+    {
+        name: 'AlienMonsterIcon',
+        label: 'Alien monster',
+        description: 'The pixelated alien of the arcade cabinets.',
+        Icon: AlienMonsterIcon,
+    },
+    {
+        name: 'AstronautIcon',
+        label: 'Astronaut',
+        description: 'A person in a spacesuit, ready for orbit.',
+        Icon: AstronautIcon,
+    },
+    {
+        name: 'AtomSymbolIcon',
+        label: 'Atom',
+        description: 'A nucleus circled by electrons, the mark of physics.',
+        Icon: AtomSymbolIcon,
+    },
+    {
+        name: 'BankIcon',
+        label: 'Bank',
+        description: 'A columned building where money is kept.',
+        Icon: BankIcon,
+    },
+    {
+        name: 'BlackNibIcon',
+        label: 'Black nib',
+        description: 'The nib of a fountain pen, poised to write.',
+        Icon: BlackNibIcon,
+    },
+    {
+        name: 'BriefcaseIcon',
+        label: 'Briefcase',
+        description: 'A case for papers, carried to work.',
+        Icon: BriefcaseIcon,
+    },
+    {
+        name: 'BuildingClassicIcon',
+        label: 'Classic building',
+        description: 'A columned building of the classical order.',
+        Icon: BuildingClassicIcon,
+    },
+    {
+        name: 'BuildingConstructionIcon',
+        label: 'Building construction',
+        description: 'A building going up, crane and all.',
+        Icon: BuildingConstructionIcon,
+    },
+    {
+        name: 'BuildingOfficeIcon',
+        label: 'Office building',
+        description: 'An office block of many identical windows.',
+        Icon: BuildingOfficeIcon,
+    },
+    {
+        name: 'BullseyeIcon',
+        label: 'Bullseye',
+        description: 'A dart in the centre of the target.',
+        Icon: BullseyeIcon,
+    },
+    {
+        name: 'CloudGreyIcon',
+        label: 'Cloud',
+        description: 'A cloud, of the sky or of the servers.',
+        Icon: CloudGreyIcon,
+    },
+    {
+        name: 'ConstructionIcon',
+        label: 'Construction',
+        description: 'A striped barrier: work in progress.',
+        Icon: ConstructionIcon,
+    },
+    {
+        name: 'ConstructionWorkerIcon',
+        label: 'Construction worker',
+        description: 'A worker in a hard hat.',
+        Icon: ConstructionWorkerIcon,
+    },
+    {
+        name: 'CowboyHatFaceIcon',
+        label: 'Cowboy',
+        description: 'A grinning face under a cowboy hat.',
+        Icon: CowboyHatFaceIcon,
+    },
+    {
+        name: 'DashboardGreyIcon',
+        label: 'Dashboard',
+        description: 'A gauge with its needle in the red.',
+        Icon: DashboardGreyIcon,
+    },
+    {
+        name: 'DnaIcon',
+        label: 'DNA',
+        description: 'The double helix that carries the code of life.',
+        Icon: DnaIcon,
+    },
+    {
+        name: 'DraftIcon',
+        label: 'Draft',
+        description: 'A sheet still being drawn up.',
+        Icon: DraftIcon,
+    },
+    {
+        name: 'DragonFaceIcon',
+        label: 'Dragon face',
+        description: 'The face of a dragon, whiskers and horns.',
+        Icon: DragonFaceIcon,
+    },
+    {
+        name: 'DragonIcon',
+        label: 'Dragon',
+        description: 'A dragon in full, coiled and winged.',
+        Icon: DragonIcon,
+    },
+    {
+        name: 'ElfManIcon',
+        label: 'Elf',
+        description: 'A pointy-eared elf of the folk tales.',
+        Icon: ElfManIcon,
+    },
+    {
+        name: 'FireIcon',
+        label: 'Fire',
+        description: 'A flame — hot, fast, or simply on fire.',
+        Icon: FireIcon,
+    },
+    {
+        name: 'FireworksIcon',
+        label: 'Fireworks',
+        description: 'Fireworks bursting over a night sky.',
+        Icon: FireworksIcon,
+    },
+    {
+        name: 'FlyingSaucerIcon',
+        label: 'Flying saucer',
+        description: 'A saucer from elsewhere, beam and all.',
+        Icon: FlyingSaucerIcon,
+    },
+    {
+        name: 'FourLeafCloverIcon',
+        label: 'Four-leaf clover',
+        description: 'The rare fourth leaf, for luck.',
+        Icon: FourLeafCloverIcon,
+    },
+    {
+        name: 'GraduationCapIcon',
+        label: 'Graduation cap',
+        description: 'The square cap thrown on graduation day.',
+        Icon: GraduationCapIcon,
+    },
+    {
+        name: 'GremlinIcon',
+        label: 'Gremlin',
+        description: 'A small mischief-maker, blamed for the bugs.',
+        Icon: GremlinIcon,
+    },
+    {
+        name: 'GrinningFaceIcon',
+        label: 'Grinning face',
+        description: 'A face grinning from ear to ear.',
+        Icon: GrinningFaceIcon,
+    },
+    {
+        name: 'HouseIcon',
+        label: 'House',
+        description: 'A house with its roof and door.',
+        Icon: HouseIcon,
+    },
+    {
+        name: 'LizardIcon',
+        label: 'Lizard',
+        description: 'A lizard, still and watchful.',
+        Icon: LizardIcon,
+    },
+    {
+        name: 'MagicWandIcon',
+        label: 'Magic wand',
+        description: 'A wand trailing sparks.',
+        Icon: MagicWandIcon,
+    },
+    {
+        name: 'ManOfficeWorkerIcon',
+        label: 'Office worker',
+        description: 'A worker at a desk in an office.',
+        Icon: ManOfficeWorkerIcon,
+    },
+    {
+        name: 'ManTechnologistIcon',
+        label: 'Man technologist',
+        description: 'A man at a laptop, writing code.',
+        Icon: ManTechnologistIcon,
+    },
+    {
+        name: 'MusicalNoteIcon',
+        label: 'Musical note',
+        description: 'A single note off a stave.',
+        Icon: MusicalNoteIcon,
+    },
+    {
+        name: 'NinjaIcon',
+        label: 'Ninja',
+        description: 'A masked figure, quick and unseen.',
+        Icon: NinjaIcon,
+    },
+    {
+        name: 'OpenHandsIcon',
+        label: 'Open hands',
+        description: 'Two open hands, offered or welcoming.',
+        Icon: OpenHandsIcon,
+    },
+    {
+        name: 'PenIcon',
+        label: 'Pen',
+        description: 'A ballpoint pen for everyday writing.',
+        Icon: PenIcon,
+    },
+    {
+        name: 'PenguinIcon',
+        label: 'Penguin',
+        description: 'A penguin in its black and white.',
+        Icon: PenguinIcon,
+    },
+    {
+        name: 'PersonSurfingIcon',
+        label: 'Surfer',
+        description: 'A surfer riding the face of a wave.',
+        Icon: PersonSurfingIcon,
+    },
+    {
+        name: 'PersonSwimmingIcon',
+        label: 'Swimmer',
+        description: 'A swimmer mid-stroke.',
+        Icon: PersonSwimmingIcon,
+    },
+    {
+        name: 'PictureFramedIcon',
+        label: 'Framed picture',
+        description: 'A painting hung in its frame.',
+        Icon: PictureFramedIcon,
+    },
+    {
+        name: 'PictureIcon',
+        label: 'Picture',
+        description: 'A photograph of mountains and sun.',
+        Icon: PictureIcon,
+    },
+    {
+        name: 'PlaneDepartureIcon',
+        label: 'Plane',
+        description: 'An aeroplane lifting off the runway.',
+        Icon: PlaneDepartureIcon,
+    },
+    {
+        name: 'RingedPlanetIcon',
+        label: 'Planet',
+        description: 'A planet circled by its rings.',
+        Icon: RingedPlanetIcon,
+    },
+    {
+        name: 'RobotIcon',
+        label: 'Robot',
+        description: 'The square face of a robot.',
+        Icon: RobotIcon,
+    },
+    {
+        name: 'RocketIcon',
+        label: 'Rocket',
+        description: 'A rocket climbing on its exhaust.',
+        Icon: RocketIcon,
+    },
+    {
+        name: 'SantaClausIcon',
+        label: 'Santa',
+        description: 'Santa Claus, red hat and white beard.',
+        Icon: SantaClausIcon,
+    },
+    {
+        name: 'SatelliteIcon',
+        label: 'Satellite',
+        description: 'A satellite with its panels spread.',
+        Icon: SatelliteIcon,
+    },
+    {
+        name: 'ScientistIcon',
+        label: 'Scientist',
+        description: 'A scientist at the microscope.',
+        Icon: ScientistIcon,
+    },
+    {
+        name: 'SharkIcon',
+        label: 'Shark',
+        description: 'A shark, fin first.',
+        Icon: SharkIcon,
+    },
+    {
+        name: 'SnowmanIcon',
+        label: 'Snowman',
+        description: 'A snowman built up in the cold.',
+        Icon: SnowmanIcon,
+    },
+    {
+        name: 'SpaceInvadersAlien1Icon',
+        label: 'Space invader 1',
+        description: 'The first invader of the arcade fleet.',
+        Icon: SpaceInvadersAlien1Icon,
+    },
+    {
+        name: 'SpaceInvadersAlien2Icon',
+        label: 'Space invader 2',
+        description: 'The second invader of the arcade fleet.',
+        Icon: SpaceInvadersAlien2Icon,
+    },
+    {
+        name: 'SpaceInvadersAlien3Icon',
+        label: 'Space invader 3',
+        description: 'The third invader of the arcade fleet.',
+        Icon: SpaceInvadersAlien3Icon,
+    },
+    {
+        name: 'SparklerIcon',
+        label: 'Sparkler',
+        description: 'A hand-held sparkler throwing light.',
+        Icon: SparklerIcon,
+    },
+    {
+        name: 'StarIcon',
+        label: 'Star',
+        description: 'A five-pointed star.',
+        Icon: StarIcon,
+    },
+    {
+        name: 'StudentIcon',
+        label: 'Student',
+        description: 'A student with book and cap.',
+        Icon: StudentIcon,
+    },
+    {
+        name: 'StudioMicrophoneIcon',
+        label: 'Studio microphone',
+        description: 'The microphone of a recording studio.',
+        Icon: StudioMicrophoneIcon,
+    },
+    {
+        name: 'SunIcon',
+        label: 'Sun',
+        description: 'The sun at full strength.',
+        Icon: SunIcon,
+    },
+    {
+        name: 'WavingHandIcon',
+        label: 'Waving hand',
+        description: 'A hand raised in hello.',
+        Icon: WavingHandIcon,
+    },
+    {
+        name: 'WhaleSpoutingIcon',
+        label: 'Whale',
+        description: 'A whale blowing a spout of water.',
+        Icon: WhaleSpoutingIcon,
+    },
+    {
+        name: 'WomanTechnologistIcon',
+        label: 'Woman technologist',
+        description: 'A woman at a laptop, writing code.',
+        Icon: WomanTechnologistIcon,
+    },
+    {
+        name: 'WrappedGiftIcon',
+        label: 'Wrapped gift',
+        description: 'A present tied with a ribbon.',
+        Icon: WrappedGiftIcon,
+    },
+    {
+        name: 'WritingHandIcon',
+        label: 'Writing hand',
+        description: 'A hand writing with a pen.',
+        Icon: WritingHandIcon,
+    },
+    {
+        name: 'YinYangIcon',
+        label: 'Yin yang',
+        description: 'The two halves that make a whole.',
+        Icon: YinYangIcon,
+    },
 ];
 export const PRINCIPAL_BANNERS = [
     { name: 'SvgAboutHero', label: 'About', Component: SvgAboutHero },
     { name: 'SvgAgentsHero', label: 'Agents', Component: SvgAgentsHero },
-    { name: 'SvgAgentsHomeHero', label: 'Agents home', Component: SvgAgentsHomeHero },
+    {
+        name: 'SvgAgentsHomeHero',
+        label: 'Agents home',
+        Component: SvgAgentsHomeHero,
+    },
     { name: 'SvgBlogHero', label: 'Blog', Component: SvgBlogHero },
     { name: 'SvgCareersHero', label: 'Careers', Component: SvgCareersHero },
     { name: 'SvgChangelogHero', label: 'Changelog', Component: SvgChangelogHero },
@@ -99,7 +504,11 @@ export const PRINCIPAL_BANNERS = [
     { name: 'SvgEarthHero', label: 'Earth', Component: SvgEarthHero },
     { name: 'SvgEvalsHero', label: 'Evaluations', Component: SvgEvalsHero },
     { name: 'SvgEventsHero', label: 'Events', Component: SvgEventsHero },
-    { name: 'SvgIntegrationsHero', label: 'Integrations', Component: SvgIntegrationsHero },
+    {
+        name: 'SvgIntegrationsHero',
+        label: 'Integrations',
+        Component: SvgIntegrationsHero,
+    },
     { name: 'SvgLoginHero', label: 'Login', Component: SvgLoginHero },
     { name: 'SvgPartnersHero', label: 'Partners', Component: SvgPartnersHero },
     { name: 'SvgPricingHero', label: 'Pricing', Component: SvgPricingHero },
@@ -145,28 +554,95 @@ export function PrincipalBannerImage({ banner, height = 180, }) {
 export function PrincipalAvatarPicker({ value, onChange, disabled = false, }) {
     const [open, setOpen] = useState(false);
     const selected = PRINCIPAL_AVATAR_ICONS.find(option => option.name === value);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", disabled: disabled, onClick: () => setOpen(true), children: selected ? `Change Avatar (${selected.label})` : 'Choose Avatar' }), open ? (_jsx(Dialog, { title: "Choose an Avatar", onClose: () => setOpen(false), width: "large", sx: { width: 'min(720px, calc(100vw - 32px))', maxWidth: 'none' }, children: _jsx(Box, { sx: {
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", disabled: disabled, onClick: () => setOpen(true), children: selected ? `Change Avatar (${selected.label})` : 'Choose Avatar' }), open ? (_jsx(Dialog, { title: "Choose an Avatar", onClose: () => setOpen(false), 
+                // The widest the dialog names — 640px — which is what it falls
+                // back to should the width below ever stop applying.
+                width: "xlarge", 
+                /*
+                 * Wider than any name of the scale, for the twelve avatars of a
+                 * line to have room, and bounded by the window.
+                 *
+                 * Under `&&`, which doubles the specificity of the class it
+                 * generates: the width of a named size is written
+                 * `.prc-Dialog-Dialog:where([data-width=xlarge])`, whose `:where`
+                 * weighs nothing, so the rule and a plain `sx` are of the very
+                 * same specificity and the one applied is whichever the
+                 * stylesheets happen to order last.
+                 */
+                sx: {
+                    '&&': {
+                        width: 'min(1080px, calc(100vw - 32px))',
+                        maxWidth: 'none',
+                    },
+                }, children: _jsx(Box, { sx: {
                         display: 'grid',
-                        gridTemplateColumns: 'repeat(auto-fill, minmax(72px, 1fr))',
+                        // Twelve to a line, whatever the dialog is wide: the columns
+                        // share it evenly and `minmax(0, …)` lets them shrink under
+                        // their content, which a long name would otherwise widen.
+                        gridTemplateColumns: [
+                            'repeat(6, minmax(0, 1fr))',
+                            'repeat(12, minmax(0, 1fr))',
+                        ],
                         gap: 2,
-                    }, children: PRINCIPAL_AVATAR_ICONS.map(({ name, label, Icon }) => (_jsx(Button, { type: "button", "aria-label": label, "aria-pressed": value === name, onClick: () => {
-                            onChange(name);
-                            setOpen(false);
-                        }, sx: {
-                            height: 72,
-                            p: 1,
-                            borderColor: value === name ? 'accent.emphasis' : 'border.default',
-                            bg: value === name ? 'accent.subtle' : 'canvas.default',
-                        }, children: _jsx(Icon, { size: 52, colored: true }) }, name))) }) })) : null] }));
+                    }, children: PRINCIPAL_AVATAR_ICONS.map(({ name, label, description, Icon }) => (
+                    // A button drawn as a card rather than a Primer `Button`: the
+                    // avatar is named under it, as the banners are under theirs.
+                    // The name under a card is clipped when it is long, and a
+                    // picture says only so much: the tooltip gives the whole name
+                    // and what the picture is of.
+                    _jsx(Tooltip, { text: description ? `${label} — ${description}` : label, direction: "n", children: _jsxs(Box, { as: "button", type: "button", "aria-label": description ? `${label} — ${description}` : label, "aria-pressed": value === name, onClick: () => {
+                                onChange(name);
+                                setOpen(false);
+                            }, sx: {
+                                display: 'block',
+                                width: '100%',
+                                p: 0,
+                                overflow: 'hidden',
+                                appearance: 'none',
+                                color: 'fg.default',
+                                cursor: 'pointer',
+                                border: '1px solid',
+                                borderRadius: 2,
+                                borderColor: value === name ? 'accent.emphasis' : 'border.default',
+                                bg: value === name ? 'accent.subtle' : 'canvas.default',
+                                ':hover': { borderColor: 'accent.emphasis' },
+                            }, children: [_jsx(Box, { sx: {
+                                        height: 72,
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                    }, children: _jsx(Icon, { size: 52, themed: true, colormode: true }) }), _jsx(Text, { sx: {
+                                        display: 'block',
+                                        px: 2,
+                                        py: 1,
+                                        fontSize: 0,
+                                        textAlign: 'center',
+                                        // A name too long for the card is cut rather than
+                                        // stretching the grid it sits in.
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                    }, children: label })] }) }, name))) }) })) : null] }));
 }
 export function PrincipalBannerPicker({ value, onChange, disabled = false, showPreview = true, }) {
     const [open, setOpen] = useState(false);
     const [selectedName, setSelectedName] = useState(value);
     useEffect(() => setSelectedName(value), [value]);
     const selected = PRINCIPAL_BANNERS.find(option => option.name === selectedName);
-    return (_jsxs(_Fragment, { children: [showPreview && selected ? (_jsx(Box, { sx: { mb: 2 }, children: _jsx(PrincipalBannerImage, { banner: selected.name, height: 120 }) })) : null, _jsx(Button, { type: "button", disabled: disabled, onClick: () => setOpen(true), children: selected ? `Change Banner (${selected.label})` : 'Choose Banner' }), open ? (_jsx(Dialog, { title: "Choose a Banner", onClose: () => setOpen(false), width: "xlarge", sx: { width: 'min(960px, calc(100vw - 32px))', maxWidth: 'none' }, children: _jsx(Box, { sx: {
+    return (_jsxs(_Fragment, { children: [showPreview && selected ? (_jsx(Box, { sx: { mb: 2 }, children: _jsx(PrincipalBannerImage, { banner: selected.name, height: 120 }) })) : null, _jsx(Button, { type: "button", disabled: disabled, onClick: () => setOpen(true), children: selected ? `Change Banner (${selected.label})` : 'Choose Banner' }), open ? (_jsx(Dialog, { title: "Choose a Banner", onClose: () => setOpen(false), width: "xlarge", 
+                // Under `&&` for the reason given on the avatar picker: a plain
+                // `sx` ties with the named width and may lose to it.
+                sx: {
+                    '&&': {
+                        width: 'min(960px, calc(100vw - 32px))',
+                        maxWidth: 'none',
+                    },
+                }, children: _jsx(Box, { sx: {
                         display: 'grid',
-                        gridTemplateColumns: ['1fr', 'repeat(3, minmax(0, 1fr))'],
+                        // Four to a row, so a banner is seen against its neighbours
+                        // rather than one at a time; one column on a narrow overlay,
+                        // where four would be four slivers.
+                        gridTemplateColumns: ['1fr', 'repeat(4, minmax(0, 1fr))'],
                         gap: 3,
                     }, children: PRINCIPAL_BANNERS.map(({ name, label, Component }) => (_jsxs(Box, { as: "button", type: "button", "aria-label": label, "aria-pressed": selectedName === name, onClick: () => {
                             setSelectedName(name);
@@ -182,7 +658,9 @@ export function PrincipalBannerPicker({ value, onChange, disabled = false, showP
                             cursor: 'pointer',
                             border: '1px solid',
                             borderRadius: 2,
-                            borderColor: selectedName === name ? 'accent.emphasis' : 'border.default',
+                            borderColor: selectedName === name
+                                ? 'accent.emphasis'
+                                : 'border.default',
                             bg: selectedName === name ? 'accent.subtle' : 'canvas.default',
                             textAlign: 'left',
                             ':hover': { borderColor: 'accent.emphasis' },

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

@@ -7,7 +7,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

@@ -10,8 +10,13 @@ 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;
     if (SelectedIcon) {
         return (_jsx(Box, { className: className, sx: {
                 width: size,
@@ -21,10 +26,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, colored: true }) }));
+                ...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), className: className }));
+        return (_jsx(UserAvatar, { avatarUrl: avatarUrl, avatarIcon: avatarIcon, size: size, square: square, iconSize: getFallbackIconSize(size), ring: ring, className: className }));
     }
     const iconSize = getFallbackIconSize(size);
     const borderRadius = square ? 2 : '50%';
@@ -39,6 +45,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/PrincipalSwitcherMenu.js

@@ -9,6 +9,7 @@ import { OrganizationIcon, PeopleIcon, PersonIcon, TriangleDownIcon, } from '@pr
 import { useCache, useAuthorization } from '../../hooks/index.js';
 import { useCoreStore } from '../../state/index.js';
 import { useIAMStore } from '../../state/substates/index.js';
+import { UserAvatar } from '../avatars/index.js';
 import { memberships as fetchMemberships } from '../../api/iam/profile.js';
 import { usePrincipalStore } from '../../hooks/usePrincipalStore.js';
 import { useBillingEntityStore } from '../../hooks/useBillingEntityStore.js';
@@ -284,7 +285,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                             if (personalUid && personalHandle) {
                                                 selectUser(personalUid, personalHandle);
                                             }
-                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PersonIcon, {}) }), _jsxs(Box, { as: "span", sx: {
+                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(UserAvatar, { avatarUrl: user?.avatarUrl, avatarIcon: user?.avatarIcon, size: 16, square: false, ring: true }) }), _jsxs(Box, { as: "span", sx: {
                                                     display: 'block',
                                                     minWidth: 0,
                                                     overflow: 'hidden',

package/lib/hooks/useCache.js

@@ -2021,8 +2021,17 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
             onSuccess: (resp, _variables) => {
                 if (resp.success && resp.document) {
                     const document = toDocument(resp.document);
-                    // Set detail cache
-                    queryClient.setQueryData(queryKeys.documents.detail(document.id), document);
+                    /*
+                     * The creation answer carries no model — the spacer keeps the
+                     * model with the content, and only the GET of a document answers
+                     * with it. Seeding the detail cache here would hand the editor a
+                     * document without a model, shown as a blank page: the cache is
+                     * invalidated instead, so an editor opening on the creation reads
+                     * the document from the server, model included.
+                     */
+                    queryClient.invalidateQueries({
+                        queryKey: queryKeys.documents.detail(document.id),
+                    });
                     // Refetch all document queries immediately (including bySpace)
                     queryClient.refetchQueries({
                         queryKey: queryKeys.documents.all(),

package/lib/hooks/useUser.js

@@ -15,6 +15,28 @@ const isOnPublicPath = () => {
     }
     return isPublicPath(window.location?.pathname || '');
 };
+/**
+ * Whether these views are running inside JupyterLab.
+ *
+ * Read from the configuration JupyterLab writes into its own page, so nothing
+ * has to be imported from it: this module is used by the web application as
+ * well, which has no such configuration.
+ */
+const isInsideJupyterLab = () => {
+    if (typeof document === 'undefined') {
+        return false;
+    }
+    const config = document.getElementById('jupyter-config-data');
+    if (!config) {
+        return false;
+    }
+    try {
+        return JSON.parse(config.textContent || '{}').appName === 'JupyterLab';
+    }
+    catch {
+        return false;
+    }
+};
 export const useUser = (role) => {
     const { user } = useIAMStore();
     if (role) {
@@ -22,6 +44,10 @@ export const useUser = (role) => {
             if (isOnPublicPath()) {
                 return user;
             }
+            if (isInsideJupyterLab()) {
+                // Same reason as below: the router of these views answers this.
+                return user;
+            }
             console.warn(`User should have role ${role.handle} - Forcing navigation to login page...`);
             window.location.href = LOGIN_HREF;
             throw new Error(`User should have role ${role.handle}`);
@@ -31,6 +57,22 @@ export const useUser = (role) => {
         if (isOnPublicPath()) {
             return user;
         }
+        /*
+         * Inside JupyterLab, nobody leaves the page.
+         *
+         * `/login` is a page of the web application, at the root of the origin —
+         * and the origin of a JupyterLab is the Jupyter Server, which serves
+         * something else entirely there. Signing out of a view thus threw the user
+         * out of JupyterLab and onto a page of the server, which is not even a
+         * sign-in form.
+         *
+         * The views of Datalayer carry their own sign-in route under the base of
+         * JupyterLab, and their router shows it as soon as there is no user — so
+         * the way to reach it is to let that render, not to navigate away from it.
+         */
+        if (isInsideJupyterLab()) {
+            return user;
+        }
         console.warn('No user found... Forcing navigation to /login');
         window.location.href = LOGIN_HREF;
     }

package/lib/state/substates/ProfileState.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/views/datasources/Datasources.js

@@ -63,6 +63,6 @@ export const Datasources = ({ newDatasourceRoute = '/new/datasource', datasource
                             gap: 3,
                             flexWrap: 'wrap',
                             mb: 4,
-                        }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Datasources" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Configure external data providers available to your workspaces and agents." })] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: DatabaseIcon, onClick: e => navigate(newDatasourceRoute, e), children: "New datasource" })] }), _jsx(DatasourcesTable, { datasourcesListRoute: datasourcesListRoute, principalUid: principalUid, principalKind: principalKind, showInlineLoadingIndicator: showInlineLoadingIndicator })] }) }) }));
+                        }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Datasources" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Configure external data providers available to your workspaces and agents." })] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: DatabaseIcon, onClick: e => navigate(newDatasourceRoute, e), children: "New Datasource" })] }), _jsx(DatasourcesTable, { datasourcesListRoute: datasourcesListRoute, principalUid: principalUid, principalKind: principalKind, showInlineLoadingIndicator: showInlineLoadingIndicator })] }) }) }));
 };
 export default Datasources;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "1.1.57",
+  "version": "1.1.60",
   "type": "module",
   "workspaces": [
     ".",