@datalayer/core 1.2.19 → 1.2.21

package/lib/components/emoji/fluent/svg/2728.js

@@ -0,0 +1,5 @@
+/*
+ * ✨ sparkles — Fluent Emoji, Flat, by Microsoft (MIT,
+ * see ../LICENSE). Written by scripts/generate-fluent-emoji.py: do not edit.
+ */
+export default '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.5194 7.0517C10.2265 6.93064 9.99626 6.69861 9.88117 6.41614L8.929 4.25725C8.75112 3.91425 8.23842 3.91425 8.071 4.25725L7.11883 6.41614C6.99327 6.69861 6.76308 6.92055 6.48057 7.0517L5.26682 7.57629C4.91106 7.74779 4.91106 8.24212 5.26682 8.41362L6.48057 8.93821C6.77354 9.05927 7.00374 9.2913 7.11883 9.57377L8.071 11.7427C8.24888 12.0858 8.76158 12.0858 8.929 11.7427L9.88117 9.57377C10.0067 9.2913 10.2369 9.06936 10.5194 8.93821L11.7332 8.41362C12.0889 8.24212 12.0889 7.74779 11.7332 7.57629L10.5194 7.0517Z" fill="#F9C23C"/> <path d="M25.5744 13.5546C24.7045 13.1673 24.0166 12.4539 23.6525 11.5775L20.7897 4.81023C20.2637 3.72992 18.7363 3.72992 18.2103 4.81023L15.3475 11.5775C14.9733 12.4539 14.2854 13.1673 13.4256 13.5546L9.80419 15.1955C8.73194 15.7254 8.73194 17.2746 9.80419 17.8045L13.4256 19.4454C14.2955 19.8327 14.9834 20.5461 15.3475 21.4225L18.2103 28.1898C18.7363 29.2701 20.2637 29.2701 20.7897 28.1898L23.6525 21.4225C24.0267 20.5461 24.7146 19.8327 25.5744 19.4454L29.1958 17.8045C30.2681 17.2746 30.2681 15.7254 29.1958 15.1955L25.5744 13.5546Z" fill="#F9C23C"/> <path d="M8.2811 20.3304C8.44173 20.7222 8.73465 21.0258 9.10315 21.2021L10.6528 21.927C11.1157 22.1621 11.1157 22.8379 10.6528 23.073L9.10315 23.7979C8.73465 23.9742 8.44173 24.2876 8.2811 24.6696L7.05276 27.6474C6.82598 28.1175 6.17402 28.1175 5.94724 27.6474L4.7189 24.6696C4.55827 24.2778 4.26535 23.9742 3.89685 23.7979L2.34724 23.073C1.88425 22.8379 1.88425 22.1621 2.34724 21.927L3.89685 21.2021C4.26535 21.0258 4.55827 20.7124 4.7189 20.3304L5.94724 17.3526C6.17402 16.8825 6.82598 16.8825 7.05276 17.3526L8.2811 20.3304Z" fill="#F9C23C"/> </svg>';

package/lib/components/emoji/fluent/svg/2b1c.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M4.02783 1.5C2.64712 1.5 1.52783 2.61929 1.52783 4V28C1.52783 29.3807 2.64712 30.5 4.02783 30.5H28.0278C29.4085 30.5 30.5278 29.3807 30.5278 28V4C30.5278 2.61929 29.4085 1.5 28.0278 1.5H4.02783Z\" fill=\"#9B9B9B\"/> <path d=\"M2.52783 4C2.52783 3.17157 3.19941 2.5 4.02783 2.5H28.0278C28.8563 2.5 29.5278 3.17157 29.5278 4V28C29.5278 28.8284 28.8563 29.5 28.0278 29.5H4.02783C3.19941 29.5 2.52783 28.8284 2.52783 28V4Z\" fill=\"white\"/> </svg>";
+export default _default;

package/lib/components/emoji/fluent/svg/2b1c.js

@@ -0,0 +1,5 @@
+/*
+ * ⬜ white large square — Fluent Emoji, Flat, by Microsoft (MIT,
+ * see ../LICENSE). Written by scripts/generate-fluent-emoji.py: do not edit.
+ */
+export default '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4.02783 1.5C2.64712 1.5 1.52783 2.61929 1.52783 4V28C1.52783 29.3807 2.64712 30.5 4.02783 30.5H28.0278C29.4085 30.5 30.5278 29.3807 30.5278 28V4C30.5278 2.61929 29.4085 1.5 28.0278 1.5H4.02783Z" fill="#9B9B9B"/> <path d="M2.52783 4C2.52783 3.17157 3.19941 2.5 4.02783 2.5H28.0278C28.8563 2.5 29.5278 3.17157 29.5278 4V28C29.5278 28.8284 28.8563 29.5 28.0278 29.5H4.02783C3.19941 29.5 2.52783 28.8284 2.52783 28V4Z" fill="white"/> </svg>';

package/lib/components/principal/Principal.js

@@ -288,6 +288,6 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
         resolvedIsPublic,
         upsertCachedPrincipal,
     ]);
-    return (_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: gap, minWidth: 0, sx: sx, children: [_jsx(PrincipalAvatar, { kind: resolvedPrincipal.kind, avatarUrl: resolvedPrincipal.avatarUrl, avatarIcon: resolvedPrincipal.avatarIcon, alt: resolvedPrincipal.displayName, size: avatarSize, square: square }), _jsx(PrincipalDetailsOverlay, { kind: resolvedPrincipal.kind, uid: resolvedPrincipal.uid, displayName: resolvedPrincipal.displayName, name: resolvedPrincipal.name, description: resolvedPrincipal.description, handle: resolvedPrincipal.handle, accountHandle: resolvedPrincipal.accountHandle, firstName: resolvedPrincipal.firstName, lastName: resolvedPrincipal.lastName, email: resolvedPrincipal.email, origin: resolvedPrincipal.origin, avatarUrl: resolvedPrincipal.avatarUrl, avatarIcon: resolvedPrincipal.avatarIcon, organizationName: teamOrganizationNameResolved, memberCount: teamMemberCount, isPublic: resolvedIsPublic, isAdmin: isAdmin })] }));
+    return (_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: gap, minWidth: 0, sx: sx, children: [_jsx(PrincipalAvatar, { kind: resolvedPrincipal.kind, avatarUrl: resolvedPrincipal.avatarUrl, avatar: resolvedPrincipal.avatarIcon, alt: resolvedPrincipal.displayName, size: avatarSize, square: square }), _jsx(PrincipalDetailsOverlay, { kind: resolvedPrincipal.kind, uid: resolvedPrincipal.uid, displayName: resolvedPrincipal.displayName, name: resolvedPrincipal.name, description: resolvedPrincipal.description, handle: resolvedPrincipal.handle, accountHandle: resolvedPrincipal.accountHandle, firstName: resolvedPrincipal.firstName, lastName: resolvedPrincipal.lastName, email: resolvedPrincipal.email, origin: resolvedPrincipal.origin, avatarUrl: resolvedPrincipal.avatarUrl, avatar: resolvedPrincipal.avatarIcon, organizationName: teamOrganizationNameResolved, memberCount: teamMemberCount, isPublic: resolvedIsPublic, isAdmin: isAdmin })] }));
 };
 export default Principal;

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

@@ -1,5 +1,6 @@
 import type { JSX } from 'react';
 import { type ComponentType, type SVGProps } from 'react';
+import { type AvatarChoice } from '../avatars/avatarChoice';
 /**
  * Who a principal is: a person, an organization, a team — or a service
  * principal, the one a deployed LOOP application acts in its own name through
@@ -114,7 +115,29 @@ export declare const PRINCIPAL_BANNERS: readonly [{
     readonly Component: ComponentType<any>;
 }];
 export declare function getPrincipalBannerForSeed(seed: string): string;
-export declare function getPrincipalAvatarIcon(name?: string): AvatarComponent | undefined;
+/** The names of the avatar set: the icons an avatar may be. */
+export declare const PRINCIPAL_AVATAR_ICON_NAMES: ReadonlySet<string>;
+/** The avatar a kept value names; throws `AvatarRefused` for anything else. */
+export declare function parsePrincipalAvatar(value: string): AvatarChoice;
+/**
+ * The avatar a kept value names, or `undefined` when there is none or it is
+ * refused — said once on the console, in its sentence: a picture that cannot
+ * be drawn is drawn as no choice, never as a broken page.
+ */
+export declare function principalAvatarOf(value: string | undefined): AvatarChoice | undefined;
+/**
+ * The drawing of a chosen avatar — an emoji or an icon of the set, by its
+ * kept value — on nothing: whatever holds it gives it its disc
+ * (`UserAvatar`, `PrincipalAvatar`, an application's face). `null` for no
+ * choice, or a refused one.
+ */
+export declare function ChosenAvatar({ avatar, size, label, }: {
+    avatar: string | undefined;
+    /** Its edge, in pixels. */
+    size: number;
+    /** What it is called for a screen reader; empty, it is decoration. */
+    label?: string;
+}): JSX.Element | null;
 export declare function PrincipalBannerImage({ banner, height, }: {
     banner?: string;
     height?: number;

package/lib/components/principal/PrincipalAppearance.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Suspense, lazy, useEffect, useState, } from 'react';
-import { Box } from '@datalayer/primer-addons';
-import { Button, Text, Tooltip } from '@primer/react';
+import { Box, useColorPalette } from '@datalayer/primer-addons';
+import { Button, SegmentedControl, Text, Tooltip } from '@primer/react';
 import { Dialog } from '@primer/react/experimental';
+import { AvatarRefused, emojiAvatar, iconAvatar, parseAvatar, } from '../avatars/avatarChoice.js';
+import { FACE_EMOJIS } from '../emoji/faceEmojis.js';
+import { FluentEmoji } from '../emoji/FluentEmoji.js';
 /**
  * An avatar icon, fetched the first time it is drawn.
  *
@@ -577,8 +580,50 @@ export function getPrincipalBannerForSeed(seed) {
     }
     return PRINCIPAL_BANNERS[Math.abs(hash) % PRINCIPAL_BANNERS.length].name;
 }
-export function getPrincipalAvatarIcon(name) {
-    return PRINCIPAL_AVATAR_ICONS.find(option => option.name === name)?.Icon;
+/** The names of the avatar set: the icons an avatar may be. */
+export const PRINCIPAL_AVATAR_ICON_NAMES = new Set(PRINCIPAL_AVATAR_ICONS.map(option => option.name));
+/** The avatar a kept value names; throws `AvatarRefused` for anything else. */
+export function parsePrincipalAvatar(value) {
+    return parseAvatar(value, PRINCIPAL_AVATAR_ICON_NAMES);
+}
+/**
+ * The avatar a kept value names, or `undefined` when there is none or it is
+ * refused — said once on the console, in its sentence: a picture that cannot
+ * be drawn is drawn as no choice, never as a broken page.
+ */
+export function principalAvatarOf(value) {
+    if (!value) {
+        return undefined;
+    }
+    try {
+        return parsePrincipalAvatar(value);
+    }
+    catch (error) {
+        if (error instanceof AvatarRefused) {
+            console.error(`Avatar refused: ${error.message}`);
+            return undefined;
+        }
+        throw error;
+    }
+}
+/**
+ * The drawing of a chosen avatar — an emoji or an icon of the set, by its
+ * kept value — on nothing: whatever holds it gives it its disc
+ * (`UserAvatar`, `PrincipalAvatar`, an application's face). `null` for no
+ * choice, or a refused one.
+ */
+export function ChosenAvatar({ avatar, size, label = '', }) {
+    const choice = principalAvatarOf(avatar);
+    if (!choice) {
+        return null;
+    }
+    if (choice.kind === 'emoji') {
+        return _jsx(FluentEmoji, { emoji: choice.emoji, size: size, label: label });
+    }
+    const Icon = PRINCIPAL_AVATAR_ICONS.find(option => option.name === choice.name).Icon;
+    // The plain icon, coloured by the theme — never the `colored` variant,
+    // whose fixed palette belongs to the emoji it is drawn from.
+    return (_jsx(Icon, { size: size, themed: true, colormode: true, "aria-label": label || undefined, "aria-hidden": label ? undefined : true }));
 }
 export function PrincipalBannerImage({ banner, height = 180, }) {
     const Banner = PRINCIPAL_BANNERS.find(option => option.name === banner)?.Component;
@@ -601,8 +646,26 @@ 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), 
+    const chosen = principalAvatarOf(value);
+    // The colour a chosen avatar is drawn in (`UserAvatar`'s `--datalayer-icon-fg`):
+    // the icons are offered as they will look.
+    const palette = useColorPalette();
+    // The tab the dialog opens on: what is chosen, the icons when nothing is.
+    const [tab, setTab] = useState(chosen?.kind === 'emoji' ? 'emoji' : 'icons');
+    const choose = (next) => {
+        onChange(next);
+        setOpen(false);
+    };
+    const selectedLabel = chosen?.kind === 'emoji'
+        ? chosen.emoji
+        : chosen
+            ? PRINCIPAL_AVATAR_ICONS.find(option => option.name === chosen.name)
+                ?.label
+            : undefined;
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", disabled: disabled, onClick: () => {
+                    setTab(chosen?.kind === 'emoji' ? 'emoji' : 'icons');
+                    setOpen(true);
+                }, leadingVisual: chosen ? () => _jsx(ChosenAvatar, { avatar: value, size: 16 }) : undefined, children: selectedLabel ? `Change Avatar (${selectedLabel})` : 'Choose Avatar' }), open ? (_jsxs(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", 
@@ -622,34 +685,42 @@ export function PrincipalAvatarPicker({ value, onChange, disabled = false, }) {
                         width: 'min(1080px, calc(100vw - 32px))',
                         maxWidth: 'none',
                     },
-                }, children: _jsx(Box, { display: "grid", 
-                    // 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, 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);
-                            }, 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, { 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] }));
+                }, children: [_jsxs(SegmentedControl, { "aria-label": "Avatar kind", sx: { mb: 3 }, onChange: index => setTab(index === 0 ? 'emoji' : 'icons'), children: [_jsx(SegmentedControl.Button, { selected: tab === 'emoji', children: "Emoji" }), _jsx(SegmentedControl.Button, { selected: tab === 'icons', children: "Icons" })] }), tab === 'emoji' ? (_jsx(Box, { display: "grid", gridTemplateColumns: [
+                            'repeat(6, minmax(0, 1fr))',
+                            'repeat(12, minmax(0, 1fr))',
+                        ], gap: 2, children: FACE_EMOJIS.map(emoji => {
+                            const next = emojiAvatar(emoji);
+                            const pressed = value === next;
+                            return (_jsx(Box, { as: "button", type: "button", "aria-label": emoji, "aria-pressed": pressed, onClick: () => choose(next), display: "flex", alignItems: "center", justifyContent: "center", height: 72, width: "100%", p: 0, appearance: "none", cursor: "pointer", border: "1px solid", borderRadius: 2, borderColor: pressed ? 'accent.emphasis' : 'border.default', bg: pressed ? 'accent.subtle' : 'canvas.default', hover: { borderColor: 'accent.emphasis' }, children: _jsx(FluentEmoji, { emoji: emoji, size: 44, label: "" }) }, emoji));
+                        }) })) : null, tab === 'icons' ? (_jsx(Box, { style: { '--datalayer-icon-fg': palette.primary }, display: "grid", 
+                        // 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, 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 === iconAvatar(name), onClick: () => choose(iconAvatar(name)), display: "block", width: "100%", p: 0, overflow: "hidden", appearance: "none", color: "fg.default", cursor: "pointer", border: "1px solid", borderRadius: 2, borderColor: value === iconAvatar(name)
+                                    ? 'accent.emphasis'
+                                    : 'border.default', bg: value === iconAvatar(name)
+                                    ? 'accent.subtle'
+                                    : 'canvas.default', hover: { borderColor: 'accent.emphasis' }, children: [_jsx(Box, { 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] })) : null] }));
 }
 export function PrincipalBannerPicker({ value, onChange, disabled = false, showPreview = true, }) {
     const [open, setOpen] = useState(false);

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

@@ -4,14 +4,12 @@ export type PrincipalAvatarKind = PrincipalType;
 export type PrincipalAvatarProps = {
     kind: PrincipalAvatarKind;
     avatarUrl?: string;
-    avatarIcon?: string;
     /**
-     * A literal emoji this platform draws for a face of its own — an agent —
-     * rather than a person's chosen picture or icon. Checked before
-     * `avatarUrl`/`avatarIcon`, and only for `kind: 'personal'`: an agent is a
-     * personal-shaped seat in every roster it appears in today.
+     * The chosen avatar, as it is kept: `emoji:…` or
+     * `@datalayer/icons-react:…` (`components/avatars/avatarChoice`). An
+     * agent's face is its emoji, as `emoji:…`.
      */
-    avatarEmoji?: string;
+    avatar?: string;
     alt?: string;
     size?: number;
     square?: boolean;
@@ -24,5 +22,5 @@ export type PrincipalAvatarProps = {
     ring?: boolean;
     className?: string;
 };
-export declare function PrincipalAvatar({ kind, avatarUrl, avatarIcon, avatarEmoji, alt, size, square, ring, className, }: PrincipalAvatarProps): JSX.Element;
+export declare function PrincipalAvatar({ kind, avatarUrl, avatar, alt, size, square, ring, className, }: PrincipalAvatarProps): JSX.Element;
 export default PrincipalAvatar;

package/lib/components/principal/PrincipalAvatar.js

@@ -1,18 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@datalayer/primer-addons';
+import { EntityAvatar } from '@datalayer/primer-addons';
 import { OrganizationIcon, PeopleIcon } from '@primer/octicons-react';
 import { UserAvatar } from '../avatars/index.js';
-import { getPrincipalAvatarIcon, } from './PrincipalAppearance.js';
+import { ChosenAvatar, principalAvatarOf, } from './PrincipalAppearance.js';
 function getFallbackIconSize(size) {
     return Math.max(12, Math.round(size * 0.62));
 }
-export function PrincipalAvatar({ kind, avatarUrl, avatarIcon, avatarEmoji, 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;
+export function PrincipalAvatar({ kind, avatarUrl, avatar, alt, size = 20, square = false, ring = false, className, }) {
+    const chosen = principalAvatarOf(avatar);
+    const shape = square ? 'rounded' : 'circle';
     /*
      * A person is drawn by `UserAvatar`, whatever they wear.
      *
@@ -25,17 +21,15 @@ export function PrincipalAvatar({ kind, avatarUrl, avatarIcon, avatarEmoji, alt,
     // A service principal — an application's — is drawn as a person is: its
     // chosen avatar, or its emoji, on the same disc (LOOP I-07).
     if (kind === 'personal' || kind === 'service') {
-        return (_jsx(UserAvatar, { avatarUrl: avatarUrl, avatarIcon: avatarIcon, avatarEmoji: avatarEmoji, size: size, square: square, iconSize: getFallbackIconSize(size), ring: ring, className: className }));
+        return (_jsx(UserAvatar, { avatarUrl: avatarUrl, avatar: avatar, size: size, square: square, iconSize: getFallbackIconSize(size), ring: ring, className: className }));
     }
-    if (SelectedIcon) {
-        return (_jsx(Box, { className: className, width: size, height: size, display: "inline-flex", alignItems: "center", justifyContent: "center", overflow: "hidden", borderRadius: square ? 2 : '50%', 
-            // The disc of `UserAvatar`, for the same reason: the shape is what
-            // says "avatar", and an icon drawn on nothing shows none of it.
-            bg: "accent.subtle", sx: ringSx, "aria-label": alt || `${kind} avatar`, children: _jsx(SelectedIcon, { size: getFallbackIconSize(size), themed: true, colormode: true }) }));
+    if (chosen) {
+        return (
+        // The disc of `UserAvatar`, for the same reason: the shape is what says
+        // "avatar", and an icon drawn on nothing shows none of it.
+        _jsx(EntityAvatar, { className: className, size: size, shape: shape, ring: ring, alt: alt || `${kind} avatar`, children: _jsx(ChosenAvatar, { avatar: avatar, size: getFallbackIconSize(size) }) }));
     }
-    const iconSize = getFallbackIconSize(size);
-    const borderRadius = square ? 2 : '50%';
     const Icon = kind === 'team' ? PeopleIcon : OrganizationIcon;
-    return (_jsx(Box, { className: className, width: size, height: size, display: "inline-flex", alignItems: "center", justifyContent: "center", bg: "canvas.subtle", borderRadius: borderRadius, border: "1px solid", borderColor: "border.default", sx: ringSx, "aria-label": alt || (kind === 'team' ? 'Team' : 'Organization'), children: _jsx(Icon, { size: iconSize }) }));
+    return (_jsx(EntityAvatar, { className: className, size: size, shape: shape, ring: ring, ground: "canvas", alt: alt || (kind === 'team' ? 'Team' : 'Organization'), children: _jsx(Icon, { size: getFallbackIconSize(size) }) }));
 }
 export default PrincipalAvatar;

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

@@ -14,14 +14,11 @@ export type PrincipalDetailsOverlayProps = {
     email?: string;
     origin?: string;
     avatarUrl?: string;
-    avatarIcon?: string;
     /**
-     * A literal emoji, for a face this platform draws rather than a person's
-     * own choice of picture or icon — an agent, checked before `avatarUrl`/
-     * `avatarIcon` since the emoji is its real identity here, not a
-     * placeholder standing in for one.
+     * The chosen avatar, as it is kept: `emoji:…` (an agent's face is its
+     * emoji) or `@datalayer/icons-react:…`.
      */
-    avatarEmoji?: string;
+    avatar?: string;
     /** Team-specific: parent organization display name. */
     organizationName?: string;
     /** Team-specific: number of members. */
@@ -59,7 +56,7 @@ export declare function buildPrincipalProfilePath({ kind, uid, handle, accountHa
  * anchored on an avatar ({@link PrincipalHoverCard}) both render this, so
  * the two never drift.
  */
-export declare function PrincipalDetailsCard({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, avatarIcon, avatarEmoji, organizationName, memberCount, isPublic, isAdmin, onNavigate, }: PrincipalDetailsOverlayProps): JSX.Element;
+export declare function PrincipalDetailsCard({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, avatar, organizationName, memberCount, isPublic, isAdmin, onNavigate, }: PrincipalDetailsOverlayProps): JSX.Element;
 /**
  * A principal's details, shown from a click on their name.
  *

package/lib/components/principal/PrincipalDetailsOverlay.js

@@ -89,7 +89,7 @@ export function buildPrincipalProfilePath({ kind, uid, handle, accountHandle, is
  * anchored on an avatar ({@link PrincipalHoverCard}) both render this, so
  * the two never drift.
  */
-export function PrincipalDetailsCard({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, avatarIcon, avatarEmoji, organizationName, memberCount, isPublic, isAdmin = false, onNavigate, }) {
+export function PrincipalDetailsCard({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, avatar, organizationName, memberCount, isPublic, isAdmin = false, onNavigate, }) {
     const navigate = useNavigate();
     // Where a profile or organization link goes: the router of this subtree,
     // unless the caller knows of one that can actually serve it — see
@@ -140,7 +140,7 @@ export function PrincipalDetailsCard({ kind, uid, displayName, name, description
     const organizationPath = teamOrganizationHandle
         ? `/${teamOrganizationHandle.replace(/^@+/, '')}`
         : '';
-    return (_jsxs(Box, { display: "grid", gap: 3, p: 4, minWidth: 420, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(PrincipalAvatar, { kind: kind, avatarUrl: avatarUrl, avatarIcon: avatarIcon, avatarEmoji: avatarEmoji, alt: normalizedDisplayName, size: 40, 
+    return (_jsxs(Box, { display: "grid", gap: 3, p: 4, minWidth: 420, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(PrincipalAvatar, { kind: kind, avatarUrl: avatarUrl, avatar: avatar, alt: normalizedDisplayName, size: 40, 
                         // The card sets the avatar on its own ground, the same colour
                         // the avatar itself is on: without an edge of its own it has
                         // no visible shape at all. Round, and ringed.

package/lib/components/principal/PrincipalSwitcherMenu.js

@@ -226,7 +226,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                             if (personalUid && personalHandle) {
                                                 selectUser(personalUid, personalHandle);
                                             }
-                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(UserAvatar, { avatarUrl: user?.avatarUrl, avatarIcon: user?.avatarIcon, size: 16, square: false, ring: true }) }), _jsxs(Box, { as: "span", display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [String(user?.friendlyName ||
+                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(UserAvatar, { avatarUrl: user?.avatarUrl, avatar: user?.avatarIcon, size: 16, square: false, ring: true }) }), _jsxs(Box, { as: "span", display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [String(user?.friendlyName ||
                                                         user?.displayName ||
                                                         personalHandle ||
                                                         'Me').trim(), _jsxs(Box, { as: "span", color: "fg.muted", children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: personalHandle || 'me' })] })] }), isPlatformAdmin ? (_jsx(ActionList.TrailingVisual, { children: _jsx(AdminLabel, {}) })) : null] })] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Organizations" }), organizations.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No organizations" })) : (organizations.map((organization) => {

package/lib/hooks/unlinkIAMProvider.d.ts

@@ -0,0 +1,22 @@
+import type { IIAMProviderName } from '../models/IAMProvidersSpecs';
+/** What `requestDatalayer` resolves: on failure, `success: false` and IAM's sentence. */
+type UnlinkResponse = {
+    success?: boolean;
+    message?: string;
+};
+type Request = (request: {
+    url: string;
+    method: 'DELETE';
+    notifyOnError: false;
+}) => Promise<UnlinkResponse>;
+/**
+ * Unlink a provider from the signed-in account
+ * (`DELETE /api/iam/v1/me/providers/{provider}`).
+ *
+ * IAM answers 409 when the provider is the account's only way to sign in and
+ * 404 when it is not linked; either way its sentence is thrown as the error's
+ * message for the page to show, and nothing is toasted. On success `refresh`
+ * reads the user again before this resolves.
+ */
+export declare function unlinkIAMProvider(request: Request, iamUrl: string, provider: IIAMProviderName, refresh: () => Promise<void>): Promise<void>;
+export {};

package/lib/hooks/unlinkIAMProvider.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Unlink a provider from the signed-in account
+ * (`DELETE /api/iam/v1/me/providers/{provider}`).
+ *
+ * IAM answers 409 when the provider is the account's only way to sign in and
+ * 404 when it is not linked; either way its sentence is thrown as the error's
+ * message for the page to show, and nothing is toasted. On success `refresh`
+ * reads the user again before this resolves.
+ */
+export async function unlinkIAMProvider(request, iamUrl, provider, refresh) {
+    const response = await request({
+        url: `${iamUrl}/api/iam/v1/me/providers/${encodeURIComponent(provider)}`,
+        method: 'DELETE',
+        notifyOnError: false,
+    });
+    if (!response?.success) {
+        throw new Error(response?.message || `The ${provider} account could not be unlinked.`);
+    }
+    await refresh();
+}

package/lib/hooks/useCache.d.ts

@@ -33,7 +33,7 @@
  * ```
  */
 import { QueryClient, UseQueryOptions, UseMutationOptions } from '@tanstack/react-query';
-import { IAnyOrganization, IContact, IIAMToken, IOrganization, ISchool, ISecret, IStudent, ITeam, IUser, IUserOnboarding, IUserSettings } from '../models';
+import { IAnyOrganization, IContact, IIAMProviderName, IIAMToken, IOrganization, ISchool, ISecret, IStudent, ITeam, IUser, IUserOnboarding, IUserSettings } from '../models';
 type IAnySpace = any;
 export type CacheProps = {
     loginRoute?: string;
@@ -486,6 +486,7 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
     useGetGitHubProfile: () => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;
     useGetGoogleProfile: () => import("@tanstack/react-query").UseMutationResult<any, Error, string, unknown>;
     useGetLinkedinProfile: () => import("@tanstack/react-query").UseMutationResult<any, Error, void, unknown>;
+    useUnlinkIAMProvider: () => import("@tanstack/react-query").UseMutationResult<void, Error, IIAMProviderName, unknown>;
     usePostLinkedinShare: () => import("@tanstack/react-query").UseMutationResult<any, Error, {
         postText: string;
     }, unknown>;
@@ -1015,6 +1016,12 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
     useSecrets: (options?: {
         principalUid?: string;
         principalKind?: "personal" | "organization" | "team";
+    } & {
+        /**
+         * `false` reads nothing: a page a visitor opens signed out, whose 401
+         * would otherwise send them to the sign-in.
+         */
+        enabled?: boolean;
     }) => import("@tanstack/react-query").UseQueryResult<any, Error>;
     useCreateSecret: (options?: {
         principalUid?: string;

package/lib/hooks/useCache.js

@@ -40,6 +40,7 @@ import { useQuery, useQueries, useMutation, useQueryClient, } from '@tanstack/re
 import { BOOTSTRAP_USER_ONBOARDING, asContact, asInvite, asOrganization, asSecret, asTeam, asToken, asUser, } from '../models/index.js';
 import { asSpace } from './cacheConverters.js';
 import { libraryAppFieldsOf } from './libraryApp.js';
+import { unlinkIAMProvider } from './unlinkIAMProvider.js';
 import { useCoreStore, useIAMStore, profileStore } from '../state/index.js';
 import { asDisplayName, namesAsInitials, asArray } from '../utils/index.js';
 import { useDatalayer } from './useDatalayer.js';
@@ -1270,7 +1271,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
             tags: Array.isArray(raw_evalset.tags_ss) ? raw_evalset.tags_ss : [],
             /*
              * What the runs of a benchmark say about it, projected onto its
-             * library card whenever a run moves (BENCHMARK.md, B2-10 and B1-09).
+             * library card whenever a run moves (B2-10 and B1-09).
              *
              * These were dropped here, so a card in the Library or on the home
              * page could show a name and a description and nothing that would
@@ -1296,7 +1297,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
         };
     };
     /**
-     * A published environment version as a library artifact (PLAN_ENV E2-16).
+     * A published environment version as a library artifact (E2-16).
      *
      * Keyed on the version uid, so one published version is one card, and read
      * from the publication's immutable snapshot: its name, title, README (the
@@ -2853,6 +2854,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
             },
             ...DEFAULT_QUERY_OPTIONS,
             refetchOnMount: true, // Override to refetch when stale after invalidation
+            enabled: options?.enabled ?? true,
         });
     };
     /**
@@ -5740,14 +5742,17 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
         });
     };
     /**
-     * Confirm password change with token
+     * Confirm password change with the token the reset email carried. The
+     * handle and token travel in the body, never in the URL: paths are written
+     * to access logs.
      */
     const useConfirmPasswordWithToken = () => {
         return useMutation({
             mutationFn: async ({ userHandle, token, }) => {
                 return requestDatalayer({
-                    url: `${configuration.iamUrl}/api/iam/v1/password/confirm/users/${userHandle}/tokens/${token}`,
-                    method: 'PUT',
+                    url: `${configuration.iamUrl}/api/iam/v1/password-reset/confirm`,
+                    method: 'POST',
+                    body: { handle: userHandle, token },
                 });
             },
         });
@@ -7273,13 +7278,38 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
             },
         });
     };
-    /** Get the server-connected LinkedIn profile. */
+    /**
+     * Unlink a provider (github, google, linkedin, x) from the signed-in
+     * account; IAM deletes the link and the tokens it holds for it.
+     *
+     * IAM's refusal (409: the provider is the account's only way to sign in)
+     * is the error's message, for the page to show: nothing is toasted. On
+     * success the signed-in user is read again, so the settings pages and the
+     * header's provider icons follow its linked providers.
+     */
+    const useUnlinkIAMProvider = () => {
+        const iamStore = useIAMStore();
+        return useMutation({
+            mutationFn: async (provider) => unlinkIAMProvider(requestDatalayer, configuration.iamUrl, provider, async () => {
+                queryClient.invalidateQueries({ queryKey: queryKeys.auth.me() });
+                await iamStore.refreshUser();
+            }),
+        });
+    };
+    /**
+     * Get the server-connected LinkedIn profile.
+     *
+     * IAM answers 404 when no LinkedIn posting account is connected: a state
+     * the caller shows (a link button), never an error toast. The resolved
+     * response then carries `success: false`, `status` and `message`.
+     */
     const useGetLinkedinProfile = () => {
         return useMutation({
             mutationFn: async () => {
                 return requestDatalayer({
                     url: `${configuration.iamUrl}/api/iam/v1/social/linkedin/profile`,
                     method: 'GET',
+                    notifyOnError: false,
                 });
             },
         });
@@ -8426,6 +8456,7 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
         useGetGitHubProfile,
         useGetGoogleProfile,
         useGetLinkedinProfile,
+        useUnlinkIAMProvider,
         usePostLinkedinShare,
         usePostLinkedinShareWithUpload,
         useGetBlueskyConnection,

package/lib/hooks/useNavigate.js

@@ -25,6 +25,7 @@
 import { useCallback, useMemo } from 'react';
 import { useLayoutStore } from '../state/index.js';
 import { navigationStore } from '../state/substates/NavigationState.js';
+import { iamStore } from '../state/substates/IAMState.js';
 import { createNativeNavigate } from '../navigation/adapters/native.js';
 // Import React Router hooks from our wrapper
 import { useNavigateRR } from '../navigation/adapters/react-router.js';
@@ -133,8 +134,13 @@ export const useNavigate = () => {
             document.body.scrollTop = 0;
         }
         // Where the reader is now, for the shell they are in. A new tab and a
-        // step back through history are both already past by here.
-        navigationStore.getState().rememberRoute(to);
+        // step back through history are both already past by here. Only for
+        // somebody signed in: the shells are theirs, and a page a visitor read
+        // signed out (`/features`) would otherwise come back as the Platform's
+        // last page after they sign in.
+        if (iamStore.getState().user) {
+            navigationStore.getState().rememberRoute(to);
+        }
         if (rrNavigate) {
             rrNavigate(to, { replace: options.replace, state: options.state });
             return;

package/lib/models/IAMProviderLinked.d.ts

@@ -1,6 +1,15 @@
 import { JSONObject } from '@lumino/coreutils';
 import { IIAMProviderName } from './IAMProvidersSpecs';
+/**
+ * One `iam_providers` child of the user IAM returns (whoami, login): its
+ * Solr fields `iam_provider_name_s`, `linked_account_s`,
+ * `linked_account_url_s`, `linked_account_id_s`.
+ */
 export declare function asIAMProviderLinked(iamProvider: any): IIAMProviderLinked;
+/** Whether the user has linked this provider in IAM. */
+export declare function hasLinkedIAMProvider(user: {
+    iamProviders?: Array<IIAMProviderLinked>;
+} | null | undefined, name: IIAMProviderName): boolean;
 export type IIAMProviderLinked = {
     iamProviderName: IIAMProviderName;
     linkedAccount: JSONObject;