@datalayer/core 1.2.18 → 1.2.20

package/lib/cli-login.js

@@ -5,9 +5,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useCallback, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Box, Button, Spinner, Text } from '@primer/react';
+import { Button, Spinner, Text } from '@primer/react';
 import { ShieldLockIcon } from '@primer/octicons-react';
-import { DatalayerThemeProvider, themeConfigs, createThemeStore, } from '@datalayer/primer-addons';
+import { Box, DatalayerThemeProvider, themeConfigs, createThemeStore, } from '@datalayer/primer-addons';
 import { SvgLinesLogo, SvgUsecasesHero } from '@datalayer/design';
 import { AppearanceControlsWithStore } from '@datalayer/primer-addons/lib/components/appearance';
 import { ConfettiSuccess } from './components/confetti/index.js';
@@ -90,58 +90,12 @@ function SignInCLIApp() {
             setState('signin');
         });
     }, [finalizeCliAuthentication]);
-    const renderLayout = (content) => (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsxs(Box, { sx: {
-                minHeight: '100vh',
-                bg: 'canvas.default',
-                color: 'fg.default',
-                position: 'relative',
-            }, children: [_jsx(Box, { sx: {
-                        position: 'fixed',
-                        top: 0,
-                        right: 0,
-                        zIndex: 20,
-                        p: 3,
-                        display: 'flex',
-                        justifyContent: 'flex-end',
-                    }, children: _jsx(AppearanceControlsWithStore, { useStore: useCliThemeStore }) }), content] }) }));
+    const renderLayout = (content) => (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsxs(Box, { minHeight: "100vh", bg: "canvas.default", color: "fg.default", position: "relative", children: [_jsx(Box, { position: "fixed", top: 0, right: 0, zIndex: 20, p: 3, display: "flex", justifyContent: "flex-end", children: _jsx(AppearanceControlsWithStore, { useStore: useCliThemeStore }) }), content] }) }));
     if (state === 'checking') {
-        return renderLayout(_jsx(Box, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                minHeight: '100vh',
-            }, children: _jsx(Spinner, {}) }));
+        return renderLayout(_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh", children: _jsx(Spinner, {}) }));
     }
     if (state === 'success') {
-        return renderLayout(_jsxs(Box, { sx: {
-                minHeight: '100vh',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                px: 3,
-                position: 'relative',
-                overflow: 'hidden',
-            }, children: [_jsx(Box, { sx: {
-                        position: 'absolute',
-                        inset: 0,
-                        opacity: 0.45,
-                        pointerEvents: 'none',
-                    }, children: _jsx(SvgUsecasesHero, {}) }), _jsx(Box, { sx: {
-                        position: 'absolute',
-                        inset: 0,
-                        pointerEvents: 'none',
-                        zIndex: 2,
-                    }, children: _jsx(ConfettiSuccess, {}) }), _jsxs(Box, { sx: {
-                        position: 'relative',
-                        zIndex: 3,
-                        textAlign: 'center',
-                        maxWidth: 560,
-                        p: 4,
-                        borderRadius: 2,
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        bg: 'canvas.default',
-                    }, children: [_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mb: 3 }, children: _jsx(Box, { sx: { width: 210 }, children: _jsx(SvgLinesLogo, { height: 32 }) }) }), _jsx(Text, { as: "h2", sx: { display: 'block', fontSize: 3, fontWeight: 600, mb: 2 }, children: message || 'Successfully logged in.' }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', mb: 3 }, children: "You can close this window." }), closeHelp && (_jsx(Text, { as: "p", sx: { color: 'fg.accent', mb: 3 }, children: closeHelp })), _jsx(Box, { sx: { display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { onClick: handleCloseWindow, children: "Close this window" }) })] })] }));
+        return renderLayout(_jsxs(Box, { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", px: 3, position: "relative", overflow: "hidden", children: [_jsx(Box, { position: "absolute", inset: 0, opacity: 0.45, pointerEvents: "none", children: _jsx(SvgUsecasesHero, {}) }), _jsx(Box, { position: "absolute", inset: 0, pointerEvents: "none", zIndex: 2, children: _jsx(ConfettiSuccess, {}) }), _jsxs(Box, { position: "relative", zIndex: 3, textAlign: "center", maxWidth: 560, p: 4, borderRadius: 2, border: "1px solid", borderColor: "border.default", bg: "canvas.default", children: [_jsx(Box, { display: "flex", justifyContent: "center", mb: 3, children: _jsx(Box, { width: 210, children: _jsx(SvgLinesLogo, { height: 32 }) }) }), _jsx(Text, { as: "h2", sx: { display: 'block', fontSize: 3, fontWeight: 600, mb: 2 }, children: message || 'Successfully logged in.' }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', mb: 3 }, children: "You can close this window." }), closeHelp && (_jsx(Text, { as: "p", sx: { color: 'fg.accent', mb: 3 }, children: closeHelp })), _jsx(Box, { display: "flex", justifyContent: "center", children: _jsx(Button, { onClick: handleCloseWindow, children: "Close this window" }) })] })] }));
     }
     return renderLayout(_jsx(SignInSimple, { name: "Datalayer CLI", description: "Sign in to continue in your CLI session.", icon: _jsx(ShieldLockIcon, { size: 24 }), github: true, google: true, linkedin: true, signUp: true, apiKey: false, socialSignInNavigationTarget: null, onSignIn: async (token, handle) => {
             window.localStorage.setItem(DATALAYER_IAM_TOKEN_KEY, token);

package/lib/components/anonymous/AnonymousKeyExpired.js

@@ -24,21 +24,7 @@ export function AnonymousKeyExpired({ agentName, sandboxStillRuns = false, tempo
         // the key — so clearing it is `onSignedIn`'s job, not this panel's.
         onSignedIn?.();
     }, [onSignedIn]);
-    return (_jsx(Box, { sx: {
-            height: '100%',
-            minHeight: 0,
-            overflowY: 'auto',
-            bg: 'canvas.default',
-            px: 4,
-            py: 4,
-        }, children: _jsxs(Box, { sx: { maxWidth: 440, mx: 'auto' }, children: [_jsxs(Box, { sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        gap: 2,
-                        color: 'attention.fg',
-                        mb: 2,
-                    }, children: [_jsx(KeyIcon, { size: 20 }), _jsx(Text, { sx: { fontSize: 2, fontWeight: 'semibold', color: 'fg.default' }, children: temporary
+    return (_jsx(Box, { height: "100%", minHeight: 0, overflowY: "auto", bg: "canvas.default", px: 4, py: 4, children: _jsxs(Box, { maxWidth: 440, mx: "auto", children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: 2, color: "attention.fg", mb: 2, children: [_jsx(KeyIcon, { size: 20 }), _jsx(Text, { sx: { fontSize: 2, fontWeight: 'semibold', color: 'fg.default' }, children: temporary
                                 ? 'This demo runs on a shared key'
                                 : 'Your key has expired' })] }), _jsxs(Text, { as: "p", sx: {
                         fontSize: 1,

package/lib/components/anonymous/AnonymousKeyTimer.js

@@ -81,20 +81,10 @@ export function AnonymousKeyTimer({ expiresAt, grantedMs, label = 'Trial key', w
         : fraction <= warnAt
             ? 'attention.fg'
             : 'fg.muted';
-    return (_jsxs(Box, { sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 1,
-            px: 2,
-            py: '2px',
-            borderRadius: '999px',
-            border: '1px solid',
-            borderColor: 'border.muted',
-            bg: 'canvas.subtle',
-            color: tone,
-            // The clock is the point; the row it sits in must not resize as the
-            // digits change width.
-            fontVariantNumeric: 'tabular-nums',
+    return (_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, px: 2, py: "2px", borderRadius: "999px", border: "1px solid", borderColor: "border.muted", bg: "canvas.subtle", color: tone, 
+        // The clock is the point; the row it sits in must not resize as the
+        // digits change width.
+        fontVariantNumeric: "tabular-nums", sx: {
             /*
               The last few percent, breathing.
     
@@ -135,6 +125,6 @@ export function AnonymousKeyTimer({ expiresAt, grantedMs, label = 'Trial key', w
           A status readout rather than a control, so the hint rides on the native
           attribute: Primer's `Tooltip` requires an interactive child.
         */
-        title: `${label}: this workspace is talking to the agent on a temporary key issued to nobody in particular. When it runs out the chat asks you to sign in. Sign in now for an account of your own.`, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', color: tone }, children: _jsx(KeyIcon, { size: 12 }) }), _jsxs(Box, { as: "svg", "aria-hidden": "true", focusable: "false", width: RING, height: RING, viewBox: `0 0 ${RING} ${RING}`, sx: { display: 'block', flexShrink: 0 }, children: [_jsx("circle", { cx: RING / 2, cy: RING / 2, r: RADIUS, fill: "none", stroke: "currentColor", strokeWidth: STROKE, opacity: 0.2 }), _jsx("circle", { cx: RING / 2, cy: RING / 2, r: RADIUS, fill: "none", stroke: "currentColor", strokeWidth: STROKE, strokeLinecap: "round", strokeDasharray: CIRCUMFERENCE, strokeDashoffset: CIRCUMFERENCE * (1 - fraction), transform: `rotate(-90 ${RING / 2} ${RING / 2})`, style: { transition: 'stroke-dashoffset 0.5s linear' } })] }), _jsx(Text, { sx: { fontSize: 0, color: tone, fontWeight: 'semibold' }, children: format(left) })] }));
+        title: `${label}: this workspace is talking to the agent on a temporary key issued to nobody in particular. When it runs out the chat asks you to sign in. Sign in now for an account of your own.`, children: [_jsx(Box, { display: "flex", alignItems: "center", color: tone, children: _jsx(KeyIcon, { size: 12 }) }), _jsxs(Box, { as: "svg", "aria-hidden": "true", focusable: "false", width: RING, height: RING, viewBox: `0 0 ${RING} ${RING}`, display: "block", flexShrink: 0, children: [_jsx("circle", { cx: RING / 2, cy: RING / 2, r: RADIUS, fill: "none", stroke: "currentColor", strokeWidth: STROKE, opacity: 0.2 }), _jsx("circle", { cx: RING / 2, cy: RING / 2, r: RADIUS, fill: "none", stroke: "currentColor", strokeWidth: STROKE, strokeLinecap: "round", strokeDasharray: CIRCUMFERENCE, strokeDashoffset: CIRCUMFERENCE * (1 - fraction), transform: `rotate(-90 ${RING / 2} ${RING / 2})`, style: { transition: 'stroke-dashoffset 0.5s linear' } })] }), _jsx(Text, { sx: { fontSize: 0, color: tone, fontWeight: 'semibold' }, children: format(left) })] }));
 }
 export default AnonymousKeyTimer;

package/lib/components/auth/SignIn.js

@@ -179,7 +179,7 @@ export const SignIn = (props) => {
                     : 'Your password may not be empty.',
         });
     }, [formValues]);
-    return (_jsxs(PageLayout, { containerWidth: "medium", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsx(Heading, { children: heading || 'Sign in to Datalayer' }) }), _jsx(PageLayout.Content, { children: loadingWithToken < 0 ? (_jsx(_Fragment, { children: _jsxs(Box, { display: "flex", children: [showEmailLogin && (_jsxs(Box, { sx: { label: { marginTop: 2 }, paddingRight: '10%' }, children: [_jsx(Box, { mt: 5, children: _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Your username" }), _jsx(TextInput, { autoFocus: true, placeholder: "Your username", value: formValues.handle, disabled: loading, onChange: handleHandleChange, onKeyDown: handleKeyDown }), validationResult.handle && (_jsx(FormControl.Validation, { variant: validationResult.handle ? 'error' : 'success', children: validationResult.handle }))] }) }), _jsx(Box, { children: _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Your password" }), _jsx(TextInput, { placeholder: "Your password", type: passwordVisibility ? 'text' : 'password', value: formValues.password, disabled: loading, onChange: handlePasswordChange, onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => {
+    return (_jsxs(PageLayout, { containerWidth: "medium", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsx(Heading, { children: heading || 'Sign in to Datalayer' }) }), _jsx(PageLayout.Content, { children: loadingWithToken < 0 ? (_jsx(_Fragment, { children: _jsxs(Box, { display: "flex", children: [showEmailLogin && (_jsxs(Box, { paddingRight: "10%", sx: { label: { marginTop: 2 } }, children: [_jsx(Box, { mt: 5, children: _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Your username" }), _jsx(TextInput, { autoFocus: true, placeholder: "Your username", value: formValues.handle, disabled: loading, onChange: handleHandleChange, onKeyDown: handleKeyDown }), validationResult.handle && (_jsx(FormControl.Validation, { variant: validationResult.handle ? 'error' : 'success', children: validationResult.handle }))] }) }), _jsx(Box, { children: _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Your password" }), _jsx(TextInput, { placeholder: "Your password", type: passwordVisibility ? 'text' : 'password', value: formValues.password, disabled: loading, onChange: handlePasswordChange, onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => {
                                                             setPasswordVisibility(!passwordVisibility);
                                                         }, disabled: loading, icon: passwordVisibility ? EyeClosedIcon : EyeIcon, "aria-label": passwordVisibility
                                                             ? 'Hide password'
@@ -189,7 +189,7 @@ export const SignIn = (props) => {
                                                     ? 'Sign In…'
                                                     : heading
                                                         ? 'Sign in with Datalayer'
-                                                        : 'Sign In' }), _jsx(Box, { pt: 6 }), _jsx(Link, { href: "https://datalayer.ai/password", target: "_blank", children: "Forgot password?" })] })] })), _jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", sx: { margin: 'auto' }, children: [showGitHubLogin &&
+                                                        : 'Sign In' }), _jsx(Box, { pt: 6 }), _jsx(Link, { href: "https://datalayer.ai/password", target: "_blank", children: "Forgot password?" })] })] })), _jsx(Box, { children: _jsxs(Box, { display: "flex", flexDirection: "column", margin: "auto", children: [showGitHubLogin &&
                                             iamProvidersAuthorizationURL[IAMProvidersSpecs.GitHub.name] && (_jsx(Button, { leadingVisual: pendingOAuthProvider === IAMProvidersSpecs.GitHub.name
                                                 ? () => _jsx(Spinner, { size: "small" })
                                                 : MarkGithubIcon, onClick: () => startOAuthSignIn(IAMProvidersSpecs.GitHub), disabled: socialButtonsDisabled, style: { margin: '10px 0' }, children: "Sign in with GitHub" })), showGoogleLogin &&

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

@@ -1,10 +1,10 @@
 /**
  * UserAvatar – Single source of truth for rendering a user's avatar.
  *
- * When a real (non-Gravatar) avatar URL is available it renders a
- * {@link DLAvatar}. Otherwise it falls back to a themed, colormoded
- * {@link AlienIcon} placeholder so every consumer (profile, sidebar,
- * principal overlay, …) shares the same default look.
+ * Drawn by primer-addons' `EntityAvatar`, so its ground, shape and ring are
+ * the theme's — a person's emoji, chosen icon or photograph, or a themed,
+ * colormoded {@link AlienIcon} placeholder, so every consumer (profile,
+ * sidebar, principal overlay, …) shares the same look, in every theme.
  */
 import type { JSX } from 'react';
 /**
@@ -14,14 +14,13 @@ import type { JSX } from 'react';
 export declare function hasRealAvatar(url?: string): boolean;
 export type UserAvatarProps = {
     avatarUrl?: string;
-    avatarIcon?: string;
     /**
-     * A literal emoji, checked before `avatarIcon`/`avatarUrl` — an agent's
-     * face is its emoji, not a photograph or a chosen icon standing in for
-     * one. Drawn in Fluent Emoji, the same on every platform (LOOP T-20); the
-     * system's, as text, only for one Datalayer ships no drawing of.
+     * The chosen avatar, as it is kept (`components/avatars/avatarChoice`):
+     * `emoji:👀` — drawn in Fluent Emoji, the same on every platform (LOOP
+     * T-20) — or `@datalayer/icons-react:RobotIcon`. Checked before
+     * `avatarUrl`: a chosen picture wins over a photograph.
      */
-    avatarEmoji?: string;
+    avatar?: string;
     /** Avatar edge length in pixels. Defaults to 100. */
     size?: number;
     /** Render with rounded square corners instead of a circle. Defaults to true. */
@@ -42,5 +41,5 @@ export type UserAvatarProps = {
     ring?: boolean;
     className?: string;
 };
-export declare const UserAvatar: ({ avatarUrl, avatarIcon, avatarEmoji, size, square, iconSize, fallbackBackground, fallbackForeground, ring, className, }: UserAvatarProps) => JSX.Element;
+export declare const UserAvatar: ({ avatarUrl, avatar, size, square, iconSize, fallbackBackground, fallbackForeground, ring, className, }: UserAvatarProps) => JSX.Element;
 export default UserAvatar;

package/lib/components/avatars/UserAvatar.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AlienIcon } from '@datalayer/icons-react';
-import { Box, useColorPalette } from '@datalayer/primer-addons';
-import { DLAvatar } from './DLAvatar.js';
-import { getPrincipalAvatarIcon } from '../principal/PrincipalAppearance.js';
-import { FluentEmoji } from '../emoji/FluentEmoji.js';
+import { EntityAvatar, useColorPalette } from '@datalayer/primer-addons';
+import { getAvatarURL } from '../../utils/index.js';
+import { ChosenAvatar, principalAvatarOf, } from '../principal/PrincipalAppearance.js';
 /**
  * Returns `true` when the given URL points to a real user avatar (i.e. not a
  * Gravatar default placeholder).
@@ -17,59 +16,31 @@ export function hasRealAvatar(url) {
     }
     return true;
 }
-export const UserAvatar = ({ avatarUrl, avatarIcon, avatarEmoji, size = 100, square = true, iconSize, fallbackBackground, fallbackForeground, ring = false, className, }) => {
+export const UserAvatar = ({ avatarUrl, avatar, size = 100, square = true, iconSize, fallbackBackground, fallbackForeground, ring = false, className, }) => {
     const palette = useColorPalette();
+    // A rounded square takes the theme's corner, a circle is a circle; the
+    // ring is drawn just outside the edge, so the avatar keeps its size.
+    const shape = square ? 'rounded' : 'circle';
+    const chosen = principalAvatarOf(avatar);
+    if (chosen?.kind === 'emoji') {
+        return (_jsx(EntityAvatar, { alt: chosen.emoji, className: className, size: size, shape: shape, ring: ring, bg: fallbackBackground || 'canvas.default', children: _jsx(ChosenAvatar, { avatar: avatar, size: iconSize ?? Math.round(size * 0.6) }) }));
+    }
     /*
-     * 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.
+     * A chosen icon and the default one are the same drawing in two shapes:
+     * the plain icon, coloured by the theme, on the accent's wash.
      */
-    const ringSx = ring
-        ? { boxShadow: '0 0 0 1px var(--borderColor-default, currentColor)' }
-        : undefined;
-    if (avatarEmoji) {
-        return (_jsx(Box, { role: "img", "aria-label": avatarEmoji, className: className, sx: {
-                width: size,
-                height: size,
-                borderRadius: square ? 2 : '50%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                bg: fallbackBackground || 'canvas.default',
-                ...ringSx,
-            }, children: _jsx(FluentEmoji, { emoji: avatarEmoji, size: iconSize ?? Math.round(size * 0.6), label: "" }) }));
-    }
-    const SelectedIcon = getPrincipalAvatarIcon(avatarIcon);
-    if (SelectedIcon) {
-        return (_jsx(Box, { className: className, sx: {
-                width: size,
-                height: size,
-                borderRadius: square ? 2 : '50%',
-                overflow: 'hidden',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                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 }) }));
+    const iconGround = {
+        ...(fallbackBackground ? { bg: fallbackBackground } : undefined),
+        style: {
+            '--datalayer-icon-fg': fallbackForeground || palette.primary,
+        },
+    };
+    if (chosen?.kind === 'icon') {
+        return (_jsx(EntityAvatar, { className: className, size: size, shape: shape, ring: ring, ...iconGround, children: _jsx(ChosenAvatar, { avatar: avatar, size: iconSize ?? Math.round(size * 0.62) }) }));
     }
     if (hasRealAvatar(avatarUrl)) {
-        return (_jsx(DLAvatar, { className: className, square: square, src: avatarUrl, size: size, sx: ringSx }));
+        return (_jsx(EntityAvatar, { className: className, src: getAvatarURL(avatarUrl), size: size, shape: shape, ring: ring }));
     }
-    const resolvedIconSize = iconSize ?? Math.round(size * 0.48);
-    return (_jsx(Box, { className: className, sx: {
-            width: size,
-            height: size,
-            borderRadius: square ? 2 : '50%',
-            bg: fallbackBackground || 'accent.subtle',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            '--datalayer-icon-fg': fallbackForeground || palette.primary,
-            ...ringSx,
-        }, children: _jsx(AlienIcon, { size: resolvedIconSize, themed: true, colormode: true }) }));
+    return (_jsx(EntityAvatar, { className: className, size: size, shape: shape, ring: ring, ...iconGround, children: _jsx(AlienIcon, { size: iconSize ?? Math.round(size * 0.48), themed: true, colormode: true }) }));
 };
 export default UserAvatar;

package/lib/components/avatars/UserProfileAvatar.js

@@ -8,7 +8,7 @@ import { Box } from '@datalayer/primer-addons';
 import { AvatarSkeleton } from '../../components/display/index.js';
 import { UserAvatar } from './UserAvatar.js';
 const Profile = ({ user, size = 100, onClick }) => {
-    return (_jsx(Box, { style: { width: size }, onClick: onClick, children: _jsx(UserAvatar, { avatarUrl: user?.avatarUrl, avatarIcon: user?.avatarIcon, size: size }) }));
+    return (_jsx(Box, { style: { width: size }, onClick: onClick, children: _jsx(UserAvatar, { avatarUrl: user?.avatarUrl, avatar: user?.avatarIcon, size: size }) }));
 };
 export const UserProfileAvatar = ({ onClick, user, size = 100, }) => {
     return user ? (onClick ? (_jsx(Link, { href: "javascript: return false;", onClick: onClick, children: _jsx(Profile, { user: user, size: size, onClick: onClick }) })) : (_jsx(Profile, { user: user, size: size, onClick: onClick }))) : (_jsx(AvatarSkeleton, { size: size }));

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

@@ -0,0 +1,42 @@
+/**
+ * The avatar a person, an organization, a team or an application chose, as it
+ * is kept: one string, prefixed by what it is.
+ *
+ * - `emoji:👀` — an emoji, drawn in Fluent Emoji (`FluentEmoji`);
+ * - `@datalayer/icons-react:RobotIcon` — a drawing of the avatar set
+ *   (`PRINCIPAL_AVATAR_ICONS`), by its component name.
+ *
+ * Nothing else is an avatar: a bare name, an unknown prefix, an icon outside
+ * the set or an emoji that is not one is refused, in a sentence.
+ *
+ * @module components/avatars/avatarChoice
+ */
+/** The prefix of an emoji avatar. */
+export declare const AVATAR_EMOJI_PREFIX = "emoji:";
+/** The prefix of an avatar drawn from `@datalayer/icons-react`. */
+export declare const AVATAR_ICON_PREFIX = "@datalayer/icons-react:";
+/** What an avatar is: an emoji, or an icon of the set by name. */
+export type AvatarChoice = {
+    kind: 'emoji';
+    emoji: string;
+} | {
+    kind: 'icon';
+    name: string;
+};
+/** Why a value is not an avatar, in a sentence. */
+export declare class AvatarRefused extends Error {
+    constructor(message: string);
+}
+/**
+ * The avatar a value names.
+ *
+ * `icons` is the set an icon must belong to (the names of
+ * `PRINCIPAL_AVATAR_ICONS`); throws `AvatarRefused` for anything else.
+ */
+export declare function parseAvatar(value: string, icons: ReadonlySet<string>): AvatarChoice;
+/** The value an avatar is kept as. */
+export declare function avatarValue(choice: AvatarChoice): string;
+/** An emoji, as an avatar value. */
+export declare const emojiAvatar: (emoji: string) => string;
+/** An icon of the set, by its component name, as an avatar value. */
+export declare const iconAvatar: (name: string) => string;

package/lib/components/avatars/avatarChoice.js

@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The avatar a person, an organization, a team or an application chose, as it
+ * is kept: one string, prefixed by what it is.
+ *
+ * - `emoji:👀` — an emoji, drawn in Fluent Emoji (`FluentEmoji`);
+ * - `@datalayer/icons-react:RobotIcon` — a drawing of the avatar set
+ *   (`PRINCIPAL_AVATAR_ICONS`), by its component name.
+ *
+ * Nothing else is an avatar: a bare name, an unknown prefix, an icon outside
+ * the set or an emoji that is not one is refused, in a sentence.
+ *
+ * @module components/avatars/avatarChoice
+ */
+/** The prefix of an emoji avatar. */
+export const AVATAR_EMOJI_PREFIX = 'emoji:';
+/** The prefix of an avatar drawn from `@datalayer/icons-react`. */
+export const AVATAR_ICON_PREFIX = '@datalayer/icons-react:';
+/** Why a value is not an avatar, in a sentence. */
+export class AvatarRefused extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'AvatarRefused';
+    }
+}
+/** One emoji: a pictograph, optionally joined and varied, nothing else. */
+const EMOJI = /^(?:\p{Extended_Pictographic}|\p{Regional_Indicator})(?:\p{Extended_Pictographic}|\p{Regional_Indicator}|\p{Emoji_Modifier}|‍|️|⃣)*$/u;
+/** An icon component name of `@datalayer/icons-react`. */
+const ICON_NAME = /^[A-Z][A-Za-z0-9]*Icon$/;
+/**
+ * The avatar a value names.
+ *
+ * `icons` is the set an icon must belong to (the names of
+ * `PRINCIPAL_AVATAR_ICONS`); throws `AvatarRefused` for anything else.
+ */
+export function parseAvatar(value, icons) {
+    if (value.startsWith(AVATAR_EMOJI_PREFIX)) {
+        const emoji = value.slice(AVATAR_EMOJI_PREFIX.length);
+        if (!emoji || emoji.length > 32 || !EMOJI.test(emoji)) {
+            throw new AvatarRefused(`“${emoji}” is not an emoji.`);
+        }
+        return { kind: 'emoji', emoji };
+    }
+    if (value.startsWith(AVATAR_ICON_PREFIX)) {
+        const name = value.slice(AVATAR_ICON_PREFIX.length);
+        if (!ICON_NAME.test(name) || !icons.has(name)) {
+            throw new AvatarRefused(`“${name}” is not an avatar of the set.`);
+        }
+        return { kind: 'icon', name };
+    }
+    throw new AvatarRefused(`An avatar is “${AVATAR_EMOJI_PREFIX}…” or “${AVATAR_ICON_PREFIX}…”, not “${value}”.`);
+}
+/** The value an avatar is kept as. */
+export function avatarValue(choice) {
+    return choice.kind === 'emoji'
+        ? `${AVATAR_EMOJI_PREFIX}${choice.emoji}`
+        : `${AVATAR_ICON_PREFIX}${choice.name}`;
+}
+/** An emoji, as an avatar value. */
+export const emojiAvatar = (emoji) => `${AVATAR_EMOJI_PREFIX}${emoji}`;
+/** An icon of the set, by its component name, as an avatar value. */
+export const iconAvatar = (name) => `${AVATAR_ICON_PREFIX}${name}`;

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

@@ -1,4 +1,5 @@
 export * from './BoringAvatar';
 export * from './DLAvatar';
 export * from './UserAvatar';
+export * from './avatarChoice';
 export * from './UserProfileAvatar';

package/lib/components/avatars/index.js

@@ -5,4 +5,5 @@
 export * from './BoringAvatar.js';
 export * from './DLAvatar.js';
 export * from './UserAvatar.js';
+export * from './avatarChoice.js';
 export * from './UserProfileAvatar.js';

package/lib/components/billing/BillingEntitySelect.js

@@ -313,50 +313,21 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
         hasEligibleAccount,
         onAccountsResolved,
     ]);
-    return (_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: label }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'center' }, children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { variant: "default", disabled: disabled || !hasEligibleAccount, sx: { width, justifyContent: 'space-between' }, children: isLoading ? (_jsxs(Box, { sx: {
-                                        display: 'inline-flex',
-                                        alignItems: 'center',
-                                        gap: 2,
-                                    }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1 }, children: "Loading plan status..." })] })) : selectedAccount ? (_jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'space-between',
-                                        width: '100%',
-                                        minWidth: 0,
-                                        gap: 2,
-                                    }, children: [_jsxs(Text, { sx: {
+    return (_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: label }), _jsx(Box, { display: "flex", justifyContent: "center", children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { variant: "default", disabled: disabled || !hasEligibleAccount, sx: { width, justifyContent: 'space-between' }, children: isLoading ? (_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1 }, children: "Loading plan status..." })] })) : selectedAccount ? (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", minWidth: 0, gap: 2, children: [_jsxs(Text, { sx: {
                                                 minWidth: 0,
                                                 overflow: 'hidden',
                                                 textOverflow: 'ellipsis',
                                                 whiteSpace: 'nowrap',
-                                            }, children: ["@", selectedAccount.accountName] }), _jsxs(Box, { sx: {
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'flex-end',
-                                                gap: 1,
-                                                flexShrink: 0,
-                                            }, children: [_jsx(Label, { size: "small", variant: "secondary", title: selectedAccount.accountType === 'organization'
+                                            }, children: ["@", selectedAccount.accountName] }), _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1, flexShrink: 0, children: [_jsx(Label, { size: "small", variant: "secondary", title: selectedAccount.accountType === 'organization'
                                                         ? 'Organization'
                                                         : selectedAccount.accountType === 'team'
                                                             ? 'Team'
-                                                            : 'User', children: selectedAccount.accountType === 'organization' ? (_jsx(OrganizationIcon, { size: 12 })) : selectedAccount.accountType === 'team' ? (_jsx(PeopleIcon, { size: 12 })) : (_jsx(PersonIcon, { size: 12 })) }), selectedAccount.isAwsBilled ? _jsx(AwsBilledLabel, {}) : null, _jsx(Label, { size: "small", variant: selectedAccount.isPaidPlan ? 'success' : 'attention', children: formatBillingEntityPlanLabel(selectedAccount.planName) })] })] })) : !hasEligibleAccount ? (emptyMessage) : ('Select a billing entity') }) }), _jsxs(ActionMenu.Overlay, { width: "large", children: [_jsx(Box, { sx: { p: 2 }, children: _jsxs(Box, { sx: {
-                                            borderRadius: 2,
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                            bg: 'canvas.subtle',
-                                            color: 'fg.muted',
-                                            px: 3,
-                                            py: 2,
-                                        }, children: [_jsx(Text, { sx: { fontSize: 1, lineHeight: 1.5 }, children: flashMessage }), accounts.some(account => account.isAwsBilled) ? (_jsx(Text, { sx: {
+                                                            : 'User', children: selectedAccount.accountType === 'organization' ? (_jsx(OrganizationIcon, { size: 12 })) : selectedAccount.accountType === 'team' ? (_jsx(PeopleIcon, { size: 12 })) : (_jsx(PersonIcon, { size: 12 })) }), selectedAccount.isAwsBilled ? _jsx(AwsBilledLabel, {}) : null, _jsx(Label, { size: "small", variant: selectedAccount.isPaidPlan ? 'success' : 'attention', children: formatBillingEntityPlanLabel(selectedAccount.planName) })] })] })) : !hasEligibleAccount ? (emptyMessage) : ('Select a billing entity') }) }), _jsxs(ActionMenu.Overlay, { width: "large", children: [_jsx(Box, { p: 2, children: _jsxs(Box, { borderRadius: 2, border: "1px solid", borderColor: "border.default", bg: "canvas.subtle", color: "fg.muted", px: 3, py: 2, children: [_jsx(Text, { sx: { fontSize: 1, lineHeight: 1.5 }, children: flashMessage }), accounts.some(account => account.isAwsBilled) ? (_jsx(Text, { sx: {
                                                     display: 'block',
                                                     fontSize: 1,
                                                     lineHeight: 1.5,
                                                     mt: 2,
-                                                }, children: "Entries marked AWS are billed through AWS Marketplace: only work started under them is reported to AWS. Work started under any other entry is charged to the credits of that account and never reaches the AWS bill." })) : null] }) }), _jsx(ActionList, { selectionVariant: "single", children: isLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsxs(Box, { sx: {
-                                                display: 'inline-flex',
-                                                alignItems: 'center',
-                                                gap: 2,
-                                            }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1 }, children: "Loading plan status..." })] }) })) : !hasEligibleAccount ? (_jsx(ActionList.Item, { disabled: true, children: emptyMessage })) : ((() => {
+                                                }, children: "Entries marked AWS are billed through AWS Marketplace: only work started under them is reported to AWS. Work started under any other entry is charged to the credits of that account and never reaches the AWS bill." })) : null] }) }), _jsx(ActionList, { selectionVariant: "single", children: isLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1 }, children: "Loading plan status..." })] }) })) : !hasEligibleAccount ? (_jsx(ActionList.Item, { disabled: true, children: emptyMessage })) : ((() => {
                                         const typeOrder = {
                                             user: 0,
                                             organization: 1,
@@ -372,25 +343,12 @@ export function BillingEntitySelect({ value, onChange, onSelectedAccountChange,
                                                             if (account.isEligible) {
                                                                 handleAccountSelect(account.accountUid);
                                                             }
-                                                        }, children: [_jsxs(Box, { sx: {
-                                                                    display: 'flex',
-                                                                    alignItems: 'center',
-                                                                    justifyContent: 'space-between',
-                                                                    width: '100%',
-                                                                    minWidth: 0,
-                                                                    gap: 2,
-                                                                }, children: [_jsxs(Text, { sx: {
+                                                        }, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", minWidth: 0, gap: 2, children: [_jsxs(Text, { sx: {
                                                                             minWidth: 0,
                                                                             overflow: 'hidden',
                                                                             textOverflow: 'ellipsis',
                                                                             whiteSpace: 'nowrap',
-                                                                        }, children: ["@", account.accountName] }), _jsxs(Box, { sx: {
-                                                                            display: 'flex',
-                                                                            alignItems: 'center',
-                                                                            justifyContent: 'flex-end',
-                                                                            gap: 1,
-                                                                            flexShrink: 0,
-                                                                        }, children: [_jsx(Label, { size: "small", variant: "secondary", title: account.accountType === 'organization'
+                                                                        }, children: ["@", account.accountName] }), _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 1, flexShrink: 0, children: [_jsx(Label, { size: "small", variant: "secondary", title: account.accountType === 'organization'
                                                                                     ? 'Organization'
                                                                                     : account.accountType === 'team'
                                                                                         ? 'Team'