@datalayer/core 1.1.49 → 1.1.56

package/lib/components/principal/Principal.js

@@ -114,6 +114,8 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
             lastName: profile.last_name,
             handle: profile.handle,
             avatarUrl: profile.avatar_url,
+            avatarIcon: profile.avatar_icon_s || profile.avatar_icon,
+            banner: profile.banner_s || profile.banner,
             origin: profile.origin,
             email: profile.email,
         };
@@ -129,6 +131,8 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
             description: profile.description || profile.description_t,
             handle: profile.handle,
             avatarUrl: profile.avatar_url,
+            avatarIcon: profile.avatar_icon_s || profile.avatar_icon,
+            banner: profile.banner_s || profile.banner,
         };
     }, [hydratedPublicOrgQuery.data]);
     const hydratedEntity = principal.kind === 'personal'
@@ -222,6 +226,10 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
             hydratedEntity?.avatarUrl ||
             cachedPrincipal?.avatarUrl ||
             undefined,
+        avatarIcon: principal.avatarIcon ||
+            hydratedEntity?.avatarIcon ||
+            undefined,
+        banner: principal.banner || hydratedEntity?.banner || undefined,
         firstName: principal.firstName ||
             hydratedEntity?.firstName ||
             cachedPrincipal?.firstName ||
@@ -263,6 +271,8 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
             email: resolvedPrincipal.email,
             origin: resolvedPrincipal.origin,
             avatarUrl: resolvedPrincipal.avatarUrl,
+            avatarIcon: resolvedPrincipal.avatarIcon,
+            banner: resolvedPrincipal.banner,
             organizationHandle: teamOrganizationHandleResolved,
             organizationName: teamOrganizationNameResolved,
             memberCount: teamMemberCount,
@@ -286,6 +296,6 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
             gap,
             minWidth: 0,
             ...sx,
-        }, children: [_jsx(PrincipalAvatar, { kind: resolvedPrincipal.kind, avatarUrl: resolvedPrincipal.avatarUrl, 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, organizationName: teamOrganizationNameResolved, memberCount: teamMemberCount, isPublic: resolvedIsPublic, isAdmin: isAdmin })] }));
+        }, 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 })] }));
 };
 export default Principal;

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

@@ -0,0 +1,136 @@
+import { type ComponentType, type SVGProps } from 'react';
+import { SvgAboutHero } from '@datalayer/design/lib/svg/SvgAboutHero';
+import { SvgAgentsHero } from '@datalayer/design/lib/svg/SvgAgentsHero';
+import { SvgAgentsHomeHero } from '@datalayer/design/lib/svg/SvgAgentsHomeHero';
+import { SvgBlogHero } from '@datalayer/design/lib/svg/SvgBlogHero';
+import { SvgCareersHero } from '@datalayer/design/lib/svg/SvgCareersHero';
+import { SvgChangelogHero } from '@datalayer/design/lib/svg/SvgChangelogHero';
+import { SvgCommunityHero } from '@datalayer/design/lib/svg/SvgCommunityHero';
+import { SvgContactHero } from '@datalayer/design/lib/svg/SvgContactHero';
+import { SvgEarthHero } from '@datalayer/design/lib/svg/SvgEarthHero';
+import { SvgEvalsHero } from '@datalayer/design/lib/svg/SvgEvalsHero';
+import { SvgEventsHero } from '@datalayer/design/lib/svg/SvgEventsHero';
+import { SvgIntegrationsHero } from '@datalayer/design/lib/svg/SvgIntegrationsHero';
+import { SvgLoginHero } from '@datalayer/design/lib/svg/SvgLoginHero';
+import { SvgPartnersHero } from '@datalayer/design/lib/svg/SvgPartnersHero';
+import { SvgPricingHero } from '@datalayer/design/lib/svg/SvgPricingHero';
+import { SvgPrivacyHero } from '@datalayer/design/lib/svg/SvgPrivacyHero';
+import { SvgResearchHero } from '@datalayer/design/lib/svg/SvgResearchHero';
+import { SvgStarsHero } from '@datalayer/design/lib/svg/SvgStarsHero';
+import { SvgTermsHero } from '@datalayer/design/lib/svg/SvgTermsHero';
+import { SvgTutorialsHero } from '@datalayer/design/lib/svg/SvgTutorialsHero';
+import { SvgUsecasesHero } from '@datalayer/design/lib/svg/SvgUsecasesHero';
+export type PrincipalType = 'personal' | 'organization' | 'team';
+type AvatarComponent = ComponentType<SVGProps<SVGSVGElement> & {
+    size?: number | 'small' | 'medium' | 'large';
+    colored?: boolean;
+}>;
+export declare const PRINCIPAL_AVATAR_ICONS: ReadonlyArray<{
+    name: string;
+    label: string;
+    Icon: AvatarComponent;
+}>;
+export declare const PRINCIPAL_BANNERS: readonly [{
+    readonly name: "SvgAboutHero";
+    readonly label: "About";
+    readonly Component: typeof SvgAboutHero;
+}, {
+    readonly name: "SvgAgentsHero";
+    readonly label: "Agents";
+    readonly Component: typeof SvgAgentsHero;
+}, {
+    readonly name: "SvgAgentsHomeHero";
+    readonly label: "Agents home";
+    readonly Component: typeof SvgAgentsHomeHero;
+}, {
+    readonly name: "SvgBlogHero";
+    readonly label: "Blog";
+    readonly Component: typeof SvgBlogHero;
+}, {
+    readonly name: "SvgCareersHero";
+    readonly label: "Careers";
+    readonly Component: typeof SvgCareersHero;
+}, {
+    readonly name: "SvgChangelogHero";
+    readonly label: "Changelog";
+    readonly Component: typeof SvgChangelogHero;
+}, {
+    readonly name: "SvgCommunityHero";
+    readonly label: "Community";
+    readonly Component: typeof SvgCommunityHero;
+}, {
+    readonly name: "SvgContactHero";
+    readonly label: "Contact";
+    readonly Component: typeof SvgContactHero;
+}, {
+    readonly name: "SvgEarthHero";
+    readonly label: "Earth";
+    readonly Component: typeof SvgEarthHero;
+}, {
+    readonly name: "SvgEvalsHero";
+    readonly label: "Evaluations";
+    readonly Component: typeof SvgEvalsHero;
+}, {
+    readonly name: "SvgEventsHero";
+    readonly label: "Events";
+    readonly Component: typeof SvgEventsHero;
+}, {
+    readonly name: "SvgIntegrationsHero";
+    readonly label: "Integrations";
+    readonly Component: typeof SvgIntegrationsHero;
+}, {
+    readonly name: "SvgLoginHero";
+    readonly label: "Login";
+    readonly Component: typeof SvgLoginHero;
+}, {
+    readonly name: "SvgPartnersHero";
+    readonly label: "Partners";
+    readonly Component: typeof SvgPartnersHero;
+}, {
+    readonly name: "SvgPricingHero";
+    readonly label: "Pricing";
+    readonly Component: typeof SvgPricingHero;
+}, {
+    readonly name: "SvgPrivacyHero";
+    readonly label: "Privacy";
+    readonly Component: typeof SvgPrivacyHero;
+}, {
+    readonly name: "SvgResearchHero";
+    readonly label: "Research";
+    readonly Component: typeof SvgResearchHero;
+}, {
+    readonly name: "SvgStarsHero";
+    readonly label: "Stars";
+    readonly Component: typeof SvgStarsHero;
+}, {
+    readonly name: "SvgTermsHero";
+    readonly label: "Terms";
+    readonly Component: typeof SvgTermsHero;
+}, {
+    readonly name: "SvgTutorialsHero";
+    readonly label: "Tutorials";
+    readonly Component: typeof SvgTutorialsHero;
+}, {
+    readonly name: "SvgUsecasesHero";
+    readonly label: "Use cases";
+    readonly Component: typeof SvgUsecasesHero;
+}];
+export declare function getPrincipalBannerForSeed(seed: string): string;
+export declare function getPrincipalAvatarIcon(name?: string): AvatarComponent | undefined;
+export declare function PrincipalBannerImage({ banner, height, }: {
+    banner?: string;
+    height?: number;
+}): JSX.Element | null;
+export declare function PrincipalAvatarPicker({ value, onChange, disabled, }: {
+    value?: string;
+    onChange: (name: string) => void;
+    disabled?: boolean;
+}): JSX.Element;
+export declare function PrincipalBannerPicker({ value, onChange, disabled, showPreview, }: {
+    value?: string;
+    onChange: (name: string) => void;
+    disabled?: boolean;
+    /** Off when the surface already shows the banner the picker changes. */
+    showPreview?: boolean;
+}): JSX.Element;
+export {};

package/lib/components/principal/PrincipalAppearance.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * 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 { Dialog } from '@primer/react/experimental';
+import AlienMonsterIcon from '@datalayer/icons-react/data2/AlienMonsterIcon';
+import AstronautIcon from '@datalayer/icons-react/data2/AstronautIcon';
+import ConstructionWorkerIcon from '@datalayer/icons-react/data2/ConstructionWorkerIcon';
+import CowboyHatFaceIcon from '@datalayer/icons-react/data2/CowboyHatFaceIcon';
+import DragonFaceIcon from '@datalayer/icons-react/data2/DragonFaceIcon';
+import ElfManIcon from '@datalayer/icons-react/data2/ElfManIcon';
+import FlyingSaucerIcon from '@datalayer/icons-react/data2/FlyingSaucerIcon';
+import GremlinIcon from '@datalayer/icons-react/data2/GremlinIcon';
+import GrinningFaceIcon from '@datalayer/icons-react/data2/GrinningFaceIcon';
+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 NinjaIcon from '@datalayer/icons-react/data2/NinjaIcon';
+import PenguinIcon from '@datalayer/icons-react/data2/PenguinIcon';
+import PersonSurfingIcon from '@datalayer/icons-react/data2/PersonSurfingIcon';
+import PersonSwimmingIcon from '@datalayer/icons-react/data2/PersonSwimmingIcon';
+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 ScientistIcon from '@datalayer/icons-react/data2/ScientistIcon';
+import SharkIcon from '@datalayer/icons-react/data2/SharkIcon';
+import SnowmanIcon from '@datalayer/icons-react/data2/SnowmanIcon';
+import StarIcon from '@datalayer/icons-react/data2/StarIcon';
+import StudentWomanIcon from '@datalayer/icons-react/data2/StudentWomanIcon';
+import SunIcon from '@datalayer/icons-react/data2/SunIcon';
+import WhaleSpoutingIcon from '@datalayer/icons-react/data2/WhaleSpoutingIcon';
+import WomanTechnologistIcon from '@datalayer/icons-react/data2/WomanTechnologistIcon';
+import { SvgAboutHero } from '@datalayer/design/lib/svg/SvgAboutHero';
+import { SvgAgentsHero } from '@datalayer/design/lib/svg/SvgAgentsHero';
+import { SvgAgentsHomeHero } from '@datalayer/design/lib/svg/SvgAgentsHomeHero';
+import { SvgBlogHero } from '@datalayer/design/lib/svg/SvgBlogHero';
+import { SvgCareersHero } from '@datalayer/design/lib/svg/SvgCareersHero';
+import { SvgChangelogHero } from '@datalayer/design/lib/svg/SvgChangelogHero';
+import { SvgCommunityHero } from '@datalayer/design/lib/svg/SvgCommunityHero';
+import { SvgContactHero } from '@datalayer/design/lib/svg/SvgContactHero';
+import { SvgEarthHero } from '@datalayer/design/lib/svg/SvgEarthHero';
+import { SvgEvalsHero } from '@datalayer/design/lib/svg/SvgEvalsHero';
+import { SvgEventsHero } from '@datalayer/design/lib/svg/SvgEventsHero';
+import { SvgIntegrationsHero } from '@datalayer/design/lib/svg/SvgIntegrationsHero';
+import { SvgLoginHero } from '@datalayer/design/lib/svg/SvgLoginHero';
+import { SvgPartnersHero } from '@datalayer/design/lib/svg/SvgPartnersHero';
+import { SvgPricingHero } from '@datalayer/design/lib/svg/SvgPricingHero';
+import { SvgPrivacyHero } from '@datalayer/design/lib/svg/SvgPrivacyHero';
+import { SvgResearchHero } from '@datalayer/design/lib/svg/SvgResearchHero';
+import { SvgStarsHero } from '@datalayer/design/lib/svg/SvgStarsHero';
+import { SvgTermsHero } from '@datalayer/design/lib/svg/SvgTermsHero';
+import { SvgTutorialsHero } from '@datalayer/design/lib/svg/SvgTutorialsHero';
+import { SvgUsecasesHero } from '@datalayer/design/lib/svg/SvgUsecasesHero';
+export 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 },
+];
+export const PRINCIPAL_BANNERS = [
+    { name: 'SvgAboutHero', label: 'About', Component: SvgAboutHero },
+    { name: 'SvgAgentsHero', label: 'Agents', Component: SvgAgentsHero },
+    { 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 },
+    { name: 'SvgCommunityHero', label: 'Community', Component: SvgCommunityHero },
+    { name: 'SvgContactHero', label: 'Contact', Component: SvgContactHero },
+    { 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: 'SvgLoginHero', label: 'Login', Component: SvgLoginHero },
+    { name: 'SvgPartnersHero', label: 'Partners', Component: SvgPartnersHero },
+    { name: 'SvgPricingHero', label: 'Pricing', Component: SvgPricingHero },
+    { name: 'SvgPrivacyHero', label: 'Privacy', Component: SvgPrivacyHero },
+    { name: 'SvgResearchHero', label: 'Research', Component: SvgResearchHero },
+    { name: 'SvgStarsHero', label: 'Stars', Component: SvgStarsHero },
+    { name: 'SvgTermsHero', label: 'Terms', Component: SvgTermsHero },
+    { name: 'SvgTutorialsHero', label: 'Tutorials', Component: SvgTutorialsHero },
+    { name: 'SvgUsecasesHero', label: 'Use cases', Component: SvgUsecasesHero },
+];
+export function getPrincipalBannerForSeed(seed) {
+    let hash = 0;
+    for (let index = 0; index < seed.length; index += 1) {
+        hash = (hash * 31 + seed.charCodeAt(index)) | 0;
+    }
+    return PRINCIPAL_BANNERS[Math.abs(hash) % PRINCIPAL_BANNERS.length].name;
+}
+export function getPrincipalAvatarIcon(name) {
+    return PRINCIPAL_AVATAR_ICONS.find(option => option.name === name)?.Icon;
+}
+export function PrincipalBannerImage({ banner, height = 180, }) {
+    const Banner = PRINCIPAL_BANNERS.find(option => option.name === banner)?.Component;
+    if (!Banner)
+        return null;
+    return (_jsx(Box, { sx: {
+            position: 'relative',
+            width: '100%',
+            height,
+            overflow: 'hidden',
+            borderRadius: 2,
+            bg: 'canvas.subtle',
+            '& > svg': {
+                position: 'absolute',
+                inset: 0,
+                display: 'block',
+                width: '100% !important',
+                height: '100% !important',
+                maxWidth: 'none !important',
+                maxHeight: 'none !important',
+            },
+        }, children: _jsx(Banner, {}) }, banner));
+}
+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: {
+                        display: 'grid',
+                        gridTemplateColumns: 'repeat(auto-fill, minmax(72px, 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] }));
+}
+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: {
+                        display: 'grid',
+                        gridTemplateColumns: ['1fr', 'repeat(3, 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);
+                            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: selectedName === name ? 'accent.emphasis' : 'border.default',
+                            bg: selectedName === name ? 'accent.subtle' : 'canvas.default',
+                            textAlign: 'left',
+                            ':hover': { borderColor: 'accent.emphasis' },
+                        }, children: [_jsx(Box, { sx: {
+                                    position: 'relative',
+                                    width: '100%',
+                                    aspectRatio: '3 / 1',
+                                    overflow: 'hidden',
+                                    '& > svg': {
+                                        position: 'absolute',
+                                        inset: 0,
+                                        width: '100% !important',
+                                        height: '100% !important',
+                                        maxWidth: 'none !important',
+                                        maxHeight: 'none !important',
+                                    },
+                                }, children: _jsx(Component, {}) }), _jsx(Text, { sx: { display: 'block', px: 2, py: 1, fontSize: 0 }, children: label })] }, name))) }) })) : null] }));
+}

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

@@ -1,10 +1,13 @@
-export type PrincipalAvatarKind = 'personal' | 'team' | 'organization';
+import { type PrincipalType } from './PrincipalAppearance';
+export type PrincipalAvatarKind = PrincipalType;
 export type PrincipalAvatarProps = {
     kind: PrincipalAvatarKind;
     avatarUrl?: string;
+    avatarIcon?: string;
     alt?: string;
     size?: number;
     square?: boolean;
+    className?: string;
 };
-export declare function PrincipalAvatar({ kind, avatarUrl, alt, size, square, }: PrincipalAvatarProps): JSX.Element;
+export declare function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size, square, className, }: PrincipalAvatarProps): JSX.Element;
 export default PrincipalAvatar;

package/lib/components/principal/PrincipalAvatar.js

@@ -6,17 +6,30 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@datalayer/primer-addons';
 import { OrganizationIcon, PeopleIcon } from '@primer/octicons-react';
 import { UserAvatar } from '../avatars/index.js';
+import { getPrincipalAvatarIcon } from './PrincipalAppearance.js';
 function getFallbackIconSize(size) {
     return Math.max(12, Math.round(size * 0.62));
 }
-export function PrincipalAvatar({ kind, avatarUrl, alt, size = 20, square = false, }) {
+export function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size = 20, square = false, className, }) {
+    const SelectedIcon = getPrincipalAvatarIcon(avatarIcon);
+    if (SelectedIcon) {
+        return (_jsx(Box, { className: className, sx: {
+                width: size,
+                height: size,
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                overflow: 'hidden',
+                borderRadius: square ? 2 : '50%',
+            }, "aria-label": alt || `${kind} avatar`, children: _jsx(SelectedIcon, { size: size, colored: true }) }));
+    }
     if (kind === 'personal') {
-        return (_jsx(UserAvatar, { avatarUrl: avatarUrl, size: size, square: square, iconSize: getFallbackIconSize(size) }));
+        return (_jsx(UserAvatar, { avatarUrl: avatarUrl, avatarIcon: avatarIcon, size: size, square: square, iconSize: getFallbackIconSize(size), className: className }));
     }
     const iconSize = getFallbackIconSize(size);
     const borderRadius = square ? 2 : '50%';
     const Icon = kind === 'team' ? PeopleIcon : OrganizationIcon;
-    return (_jsx(Box, { sx: {
+    return (_jsx(Box, { className: className, sx: {
             width: size,
             height: size,
             display: 'inline-flex',

package/lib/components/principal/PrincipalBadge.js

@@ -115,6 +115,7 @@ export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabe
             lastName: user?.lastName,
             email: user?.email,
             avatarUrl: user?.avatarUrl,
+            avatarIcon: user?.avatarIcon,
             origin: normalizeUserOrigin(user?.origin),
         };
     }, [
@@ -130,6 +131,7 @@ export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabe
         user?.lastName,
         user?.email,
         user?.avatarUrl,
+        user?.avatarIcon,
     ]);
     const userLookupUid = basePrincipal.kind === 'personal' ? String(basePrincipal.uid || '') : '';
     const organizationLookupUid = basePrincipal.kind === 'organization'
@@ -153,6 +155,7 @@ export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabe
                     `@${normalizedHandle}`,
                 handle: resolvedHandle,
                 accountHandle: resolvedHandle,
+                avatarIcon: resolvedOrganization?.avatarIcon || basePrincipal.avatarIcon,
                 origin: basePrincipal.origin || 'Datalayer',
             };
         }
@@ -167,6 +170,7 @@ export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabe
                 handle: basePrincipal.handle,
                 accountHandle: basePrincipal.accountHandle,
                 avatarUrl: basePrincipal.avatarUrl,
+                avatarIcon: basePrincipal.avatarIcon,
                 origin: basePrincipal.origin,
             };
         }
@@ -198,6 +202,7 @@ export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabe
             lastName: resolvedUser?.lastName || basePrincipal.lastName,
             email: resolvedUser?.email || basePrincipal.email,
             avatarUrl: resolvedUser?.avatarUrl || basePrincipal.avatarUrl,
+            avatarIcon: resolvedUser?.avatarIcon || basePrincipal.avatarIcon,
             origin,
         };
     }, [
@@ -211,6 +216,8 @@ export const PrincipalBadge = ({ principal: providedPrincipal, showPrincipalLabe
         resolvedUser?.lastName,
         resolvedUser?.email,
         resolvedUser?.avatarUrl,
+        resolvedUser?.avatarIcon,
+        resolvedOrganization?.avatarIcon,
         resolvedUser?.origin,
     ]);
     return (_jsxs(Box, { sx: {

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

@@ -12,6 +12,7 @@ export type PrincipalDetailsOverlayProps = {
     email?: string;
     origin?: string;
     avatarUrl?: string;
+    avatarIcon?: string;
     /** Team-specific: parent organization display name. */
     organizationName?: string;
     /** Team-specific: number of members. */
@@ -27,5 +28,5 @@ export declare function buildPrincipalProfilePath({ kind, uid, handle, accountHa
     accountHandle?: string;
     isAdmin?: boolean;
 }): string | null;
-export declare function PrincipalDetailsOverlay({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, organizationName, memberCount, isPublic, isAdmin, }: PrincipalDetailsOverlayProps): JSX.Element;
+export declare function PrincipalDetailsOverlay({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, avatarIcon, organizationName, memberCount, isPublic, isAdmin, }: PrincipalDetailsOverlayProps): JSX.Element;
 export default PrincipalDetailsOverlay;

package/lib/components/principal/PrincipalDetailsOverlay.js

@@ -80,7 +80,7 @@ export function buildPrincipalProfilePath({ kind, uid, handle, accountHandle, is
     }
     return null;
 }
-export function PrincipalDetailsOverlay({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, organizationName, memberCount, isPublic, isAdmin = false, }) {
+export function PrincipalDetailsOverlay({ kind, uid, displayName, name, description, handle, accountHandle, firstName, lastName, email, origin, avatarUrl, avatarIcon, organizationName, memberCount, isPublic, isAdmin = false, }) {
     const navigate = useNavigate();
     const normalizedDisplayName = normalize(displayName) ||
         normalize(handle) ||
@@ -129,7 +129,7 @@ export function PrincipalDetailsOverlay({ kind, uid, displayName, name, descript
                             ':hover': {
                                 textDecoration: 'underline',
                             },
-                        }, children: normalizedDisplayName }) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsxs(Box, { sx: { display: 'grid', gap: 3, p: 4, minWidth: 420 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(PrincipalAvatar, { kind: kind, avatarUrl: avatarUrl, alt: normalizedDisplayName, size: 40 }), _jsxs(Box, { sx: { display: 'grid', gap: 0.5 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: normalizedDisplayName }), kind === 'team' ? (teamHandleOnly ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [displayHandleText(teamHandleOnly), teamOrganizationHandle
+                        }, children: normalizedDisplayName }) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsxs(Box, { sx: { display: 'grid', gap: 3, p: 4, minWidth: 420 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(PrincipalAvatar, { kind: kind, avatarUrl: avatarUrl, avatarIcon: avatarIcon, alt: normalizedDisplayName, size: 40 }), _jsxs(Box, { sx: { display: 'grid', gap: 0.5 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: normalizedDisplayName }), kind === 'team' ? (teamHandleOnly ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [displayHandleText(teamHandleOnly), teamOrganizationHandle
                                                         ? ` · @${teamOrganizationHandle.replace(/^@+/, '')}`
                                                         : ''] })) : null) : resolvedHandle ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: displayHandleText(resolvedHandle) })) : null] })] }), _jsxs(Box, { sx: {
                                     display: 'grid',

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

@@ -1,5 +1,6 @@
 export * from './Principal';
 export * from './PrincipalAvatar';
+export * from './PrincipalAppearance';
 export * from './PrincipalBadge';
 export * from './PrincipalBanner';
 export { buildPrincipalProfilePath, PrincipalDetailsOverlay, } from './PrincipalDetailsOverlay';

package/lib/components/principal/index.js

@@ -4,6 +4,7 @@
  */
 export * from './Principal.js';
 export * from './PrincipalAvatar.js';
+export * from './PrincipalAppearance.js';
 export * from './PrincipalBadge.js';
 export * from './PrincipalBanner.js';
 export { buildPrincipalProfilePath, PrincipalDetailsOverlay, } from './PrincipalDetailsOverlay.js';

package/lib/components/progress/ConsumptionBar.d.ts

@@ -33,6 +33,15 @@ export interface IConsumptionBarProps {
      * Duration is the kernel max duration in seconds.
      */
     onUpdate?: (progress: number, duration: number) => void;
+    /**
+     * Paddings of the indicator, each defaulting to what the button wears
+     * today. `0` collapses a side entirely — a host laying the bar out on a
+     * grid of its own passes zeros and spaces it itself.
+     */
+    paddingLeft?: number | string;
+    paddingRight?: number | string;
+    paddingTop?: number | string;
+    paddingBottom?: number | string;
 }
 /**
  * Consumption progress bar

package/lib/components/progress/ConsumptionBar.js

@@ -31,7 +31,7 @@ function formatTimeRemaining(seconds) {
  * Consumption progress bar
  */
 export function ConsumptionBar(props) {
-    const { expiredAt, startedAt, burningRate, onClick, onUpdate, refreshInterval = 2000, style, } = props;
+    const { expiredAt, startedAt, burningRate, onClick, onUpdate, refreshInterval = 2000, style, paddingLeft, paddingRight, paddingTop, paddingBottom, } = props;
     const duration = useMemo(() => getConsumptionDuration(startedAt, expiredAt), [expiredAt, startedAt]);
     const [progress, setProgress] = useState(getConsumptionProgress(startedAt, expiredAt));
     useEffect(() => {
@@ -62,5 +62,13 @@ export function ConsumptionBar(props) {
                             onClick();
                         }
                     }
-                    : undefined, tabIndex: onClick ? 0 : -1, sx: { cursor: onClick ? 'pointer' : 'default' }, children: _jsx(Box, { sx: { width: '70px' }, children: _jsx(ProgressBar, { style: style, animated: expiredAt ? false : true, bg: bg, progress: progress }) }) }) }) }));
+                    : undefined, tabIndex: onClick ? 0 : -1, sx: {
+                    cursor: onClick ? 'pointer' : 'default',
+                    // Only the sides that were asked for: an absent padding keeps
+                    // the button's own.
+                    ...(paddingLeft !== undefined ? { paddingLeft } : {}),
+                    ...(paddingRight !== undefined ? { paddingRight } : {}),
+                    ...(paddingTop !== undefined ? { paddingTop } : {}),
+                    ...(paddingBottom !== undefined ? { paddingBottom } : {}),
+                }, children: _jsx(Box, { sx: { width: '70px' }, children: _jsx(ProgressBar, { style: style, animated: expiredAt ? false : true, bg: bg, progress: progress }) }) }) }) }));
 }

package/lib/components/sharing/ShareAccessComponent.js

@@ -1408,7 +1408,12 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                 bg: 'canvas.default',
             }, children: content }));
     }
-    return (_jsx(Dialog, { title: `Share ${resourceLabel.toLowerCase()}`, onClose: onClose, width: "large", children: content }));
+    return (_jsx(Dialog, { title: `Share ${resourceLabel.toLowerCase()}`, onClose: onClose, 
+        // Wider than any preset — Primer's `xlarge` stops at 640px, and the
+        // principal picker, the access levels and the ACL list all live in
+        // this one surface. Capped to the viewport so small screens keep a
+        // margin.
+        width: "xlarge", sx: { width: 'min(960px, calc(100vw - 64px))', maxWidth: 'none' }, children: content }));
 }
 export default ShareAccessComponent;
 // Backward-compatible aliases (deprecated: use ShareAccessComponent).