@datalayer/core 1.0.21 → 1.0.22

package/lib/components/billing/BillableAccountSelect.d.ts

@@ -0,0 +1,35 @@
+export type BillableAccountType = 'user' | 'organization' | 'team';
+export type BillableAccount = {
+    accountUid: string;
+    accountType: BillableAccountType;
+    accountHandle: string;
+    accountName: string;
+    planName: string;
+    isEligible: boolean;
+    isPaidPlan: boolean;
+    sourceOrganizationUid?: string;
+    sourceOrganizationHandle?: string;
+    teamHandle?: string;
+};
+export type BillableAccountSelectProps = {
+    value: string;
+    onChange: (accountUid: string) => void;
+    onSelectedAccountChange?: (account: BillableAccount | undefined) => void;
+    onAccountsResolved?: (state: {
+        accounts: BillableAccount[];
+        eligibleAccounts: BillableAccount[];
+        isLoading: boolean;
+        hasEligibleAccount: boolean;
+    }) => void;
+    disabled?: boolean;
+    label?: string;
+    caption?: string;
+    emptyMessage?: string;
+    flashMessage?: string;
+    width?: string | number;
+    preferOrganizationDefault?: boolean;
+};
+export declare function resolveBillablePlanTier(value: unknown): 'free' | 'pro';
+export declare function formatBillableAccountPlanLabel(planName: string): string;
+export declare function BillableAccountSelect({ value, onChange, onSelectedAccountChange, onAccountsResolved, disabled, label, caption, emptyMessage, flashMessage, width, preferOrganizationDefault, }: BillableAccountSelectProps): JSX.Element;
+export default BillableAccountSelect;

package/lib/components/billing/BillableAccountSelect.js

@@ -0,0 +1,340 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * BillableAccountSelect — self-contained dropdown that lets the user pick a
+ * billable account (personal, organization, or eligible team) for runs that
+ * consume wallet credits.
+ *
+ * Encapsulates eligibility merge logic and account-detail fetching. Callers
+ * only need to provide a value/onChange pair and optionally observe the full
+ * resolved account via `onSelectedAccountChange`.
+ */
+import { useCallback, useEffect, useMemo, Fragment } from 'react';
+import { ActionList, ActionMenu, Button, Flash, FormControl, Label, Spinner, Text, } from '@primer/react';
+import { OrganizationIcon, PeopleIcon, PersonIcon, } from '@primer/octicons-react';
+import { Box } from '@datalayer/primer-addons';
+import { useCache } from '../../hooks/useCache.js';
+import { useSelectedPrincipal } from '../../hooks/useSelectedPrincipal.js';
+import { useIAMStore } from '../../state/index.js';
+const PLAN_FREE_TERMS = ['free', 'starter'];
+const PLAN_PRO_TERMS = ['pro', 'paid', 'team', 'enterprise', 'business'];
+const BILLABLE_ACCOUNT_COOKIE = 'datalayer-billable-account-uid';
+const BILLABLE_ACCOUNT_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
+function readBillableAccountCookie() {
+    if (typeof document === 'undefined')
+        return null;
+    const escaped = BILLABLE_ACCOUNT_COOKIE.replace(/[.$?*|{}()[\]\\/+^]/g, '\\$&');
+    const match = document.cookie.match(new RegExp('(?:^|; )' + escaped + '=([^;]*)'));
+    return match ? decodeURIComponent(match[1]) : null;
+}
+function writeBillableAccountCookie(value) {
+    if (typeof document === 'undefined')
+        return;
+    document.cookie =
+        `${BILLABLE_ACCOUNT_COOKIE}=${encodeURIComponent(value)};` +
+            ` path=/; max-age=${BILLABLE_ACCOUNT_COOKIE_MAX_AGE}; SameSite=Lax`;
+}
+const planContains = (value, terms) => terms.some(term => value.includes(term));
+export function resolveBillablePlanTier(value) {
+    const normalized = String(value ?? '').toLowerCase();
+    if (!normalized || normalized === 'unknown')
+        return 'free';
+    if (planContains(normalized, PLAN_FREE_TERMS))
+        return 'free';
+    if (planContains(normalized, PLAN_PRO_TERMS))
+        return 'pro';
+    return 'free';
+}
+export function formatBillableAccountPlanLabel(planName) {
+    return resolveBillablePlanTier(planName) === 'pro'
+        ? 'Team Plan'
+        : 'Free Plan';
+}
+export function BillableAccountSelect({ value, onChange, onSelectedAccountChange, onAccountsResolved, disabled = false, label = 'Run under', caption = 'Personal, organization, and eligible team accounts can be selected for billable assignment. For team billing, runtime runs are attributed to the parent organization while credits are consumed from the selected team wallet.', emptyMessage = 'No billable accounts available', flashMessage = 'Runs and credits are charged to the selected billable account. Wallet credits of that account are consumed; LLM token usage is tracked for visibility only. Accounts without an eligible plan or wallet balance are disabled.', width = 'min(100%, 520px)', preferOrganizationDefault = false, }) {
+    const { user } = useIAMStore();
+    const { useEligibleSubscriptionAccounts, useSubscriptionAccountsDetails, useUserOrganizations, } = useCache();
+    const { selectedPrincipalKind, selectedPrincipalUid } = useSelectedPrincipal();
+    const userOrganizationsQuery = useUserOrganizations();
+    const { data: eligibleAccountsRaw, isLoading: eligibleAccountsLoading } = useEligibleSubscriptionAccounts({
+        refetchInterval: 10_000,
+        refetchOnMount: true,
+        refetchOnWindowFocus: true,
+        staleTime: 0,
+    });
+    const eligibleAccounts = useMemo(() => (eligibleAccountsRaw || []).map((entry) => ({
+        accountUid: String(entry.account_uid || ''),
+        accountType: String(entry.account_type || 'user'),
+        accountHandle: String(entry.account_handle || '').trim(),
+        accountName: String(entry.account_name || '').trim() ||
+            String(entry.account_handle || '').trim() ||
+            String(entry.account_uid || '').trim(),
+        planName: String(entry?.subscription?.plan_name || entry?.plan?.plan_name || '').trim(),
+    })), [eligibleAccountsRaw]);
+    const personalAccountUid = String(user?.id || '');
+    const allContextAccounts = useMemo(() => {
+        const accountMap = new Map();
+        if (personalAccountUid) {
+            accountMap.set(personalAccountUid, {
+                accountUid: personalAccountUid,
+                accountType: 'user',
+                accountHandle: String(user?.handle || '').trim(),
+                accountName: String(user?.handle || '').trim() || personalAccountUid,
+                planName: '',
+            });
+        }
+        for (const organization of (userOrganizationsQuery.data || [])) {
+            const orgUid = String(organization?.uid || organization?.id || '').trim();
+            if (!orgUid)
+                continue;
+            accountMap.set(orgUid, {
+                accountUid: orgUid,
+                accountType: 'organization',
+                accountHandle: String(organization?.handle || '').trim(),
+                accountName: String(organization?.handle || '').trim() ||
+                    String(organization?.name || '').trim() ||
+                    orgUid,
+                planName: String(organization?.subscription?.plan_name ||
+                    organization?.plan_name ||
+                    '').trim(),
+            });
+        }
+        return Array.from(accountMap.values());
+    }, [personalAccountUid, user, userOrganizationsQuery.data]);
+    const eligibleAccountByUid = useMemo(() => new Map(eligibleAccounts.map(a => [a.accountUid, a])), [eligibleAccounts]);
+    const candidateUids = useMemo(() => {
+        const values = new Set();
+        for (const a of allContextAccounts)
+            values.add(a.accountUid);
+        for (const a of eligibleAccounts)
+            values.add(a.accountUid);
+        if (value)
+            values.add(value);
+        return Array.from(values).filter(Boolean);
+    }, [allContextAccounts, eligibleAccounts, value]);
+    const { data: detailsRaw, isLoading: detailsLoading } = useSubscriptionAccountsDetails(candidateUids, {
+        refetchInterval: 10_000,
+        refetchOnMount: true,
+        refetchOnWindowFocus: true,
+        staleTime: 0,
+    });
+    const detailsByUid = useMemo(() => new Map((detailsRaw || []).map((entry) => [
+        String(entry.account_uid || ''),
+        entry,
+    ])), [detailsRaw]);
+    const accounts = useMemo(() => {
+        const accountMap = new Map();
+        for (const a of allContextAccounts)
+            accountMap.set(a.accountUid, a);
+        for (const a of eligibleAccounts)
+            accountMap.set(a.accountUid, a);
+        const merged = Array.from(accountMap.values());
+        const mergedByUid = new Map(merged.map(a => [a.accountUid, a]));
+        return merged.map(account => {
+            const eligible = eligibleAccountByUid.get(account.accountUid);
+            const details = detailsByUid.get(account.accountUid);
+            const accountType = String(details?.account_type || account.accountType || 'user');
+            const accountHandle = String(details?.account_handle || account.accountHandle || '');
+            const planName = String(details?.subscription?.plan_name ||
+                eligible?.planName ||
+                account.planName ||
+                '').trim();
+            const walletBalance = Number(accountType === 'team'
+                ? (details?.wallet_balance ?? 0)
+                : (details?.subscription?.wallet_balance ??
+                    details?.wallet_balance ??
+                    0));
+            const hasPositiveWallet = Number.isFinite(walletBalance) && walletBalance > 0;
+            const isEligible = accountType === 'team'
+                ? hasPositiveWallet
+                : typeof details?.is_eligible === 'boolean'
+                    ? details.is_eligible ||
+                        (accountType === 'user' && hasPositiveWallet)
+                    : Boolean(eligible);
+            const sourceOrganizationUid = accountType === 'team'
+                ? String(details?.plan_source_account_uid || '').trim() || undefined
+                : undefined;
+            const sourceOrgDetails = sourceOrganizationUid
+                ? detailsByUid.get(sourceOrganizationUid)
+                : undefined;
+            const sourceOrgMerged = sourceOrganizationUid
+                ? mergedByUid.get(sourceOrganizationUid)
+                : undefined;
+            const sourceOrganizationHandle = sourceOrganizationUid
+                ? String(sourceOrgDetails?.account_handle ||
+                    sourceOrgMerged?.accountHandle ||
+                    '').trim() || undefined
+                : undefined;
+            return {
+                accountUid: account.accountUid,
+                accountType,
+                accountHandle,
+                accountName: String(details?.account_name || account.accountName || account.accountUid),
+                planName,
+                isEligible,
+                isPaidPlan: resolveBillablePlanTier(planName || 'free') === 'pro',
+                sourceOrganizationUid,
+                sourceOrganizationHandle,
+                teamHandle: accountType === 'team' ? accountHandle : undefined,
+            };
+        });
+    }, [
+        allContextAccounts,
+        eligibleAccounts,
+        eligibleAccountByUid,
+        detailsByUid,
+    ]);
+    const eligibleBillable = useMemo(() => accounts.filter(a => a.isEligible), [accounts]);
+    const hasEligibleAccount = eligibleBillable.length > 0;
+    const isLoading = eligibleAccountsLoading || detailsLoading;
+    const storedBillableAccountUid = useMemo(() => readBillableAccountCookie(), []);
+    const preferredEligible = useMemo(() => {
+        const fromCookie = storedBillableAccountUid
+            ? eligibleBillable.find(account => account.accountUid === storedBillableAccountUid)
+            : undefined;
+        if (fromCookie)
+            return fromCookie;
+        const byPrincipal = selectedPrincipalUid
+            ? eligibleBillable.find(account => {
+                if (account.accountUid !== selectedPrincipalUid)
+                    return false;
+                if (selectedPrincipalKind === 'organization')
+                    return account.accountType === 'organization';
+                if (selectedPrincipalKind === 'team')
+                    return account.accountType === 'team';
+                return account.accountType === 'user';
+            })
+            : undefined;
+        if (byPrincipal)
+            return byPrincipal;
+        const personalEligible = eligibleBillable.find(a => a.accountType === 'user' && a.accountUid === personalAccountUid);
+        if (personalEligible)
+            return personalEligible;
+        const firstOrg = eligibleBillable.find(a => a.accountType === 'organization');
+        if (preferOrganizationDefault && firstOrg)
+            return firstOrg;
+        return firstOrg || eligibleBillable[0];
+    }, [
+        storedBillableAccountUid,
+        eligibleBillable,
+        personalAccountUid,
+        preferOrganizationDefault,
+        selectedPrincipalKind,
+        selectedPrincipalUid,
+    ]);
+    const handleAccountSelect = useCallback((accountUid) => {
+        writeBillableAccountCookie(accountUid);
+        onChange(accountUid);
+    }, [onChange]);
+    // Auto-select a sensible default when current value is empty/ineligible.
+    useEffect(() => {
+        if (isLoading)
+            return;
+        if (!preferredEligible) {
+            if (value)
+                onChange('');
+            return;
+        }
+        const current = accounts.find(a => a.accountUid === value);
+        if (!current || !current.isEligible) {
+            onChange(preferredEligible.accountUid);
+        }
+    }, [isLoading, preferredEligible, accounts, value, onChange]);
+    const selectedAccount = useMemo(() => accounts.find(a => a.accountUid === value), [accounts, value]);
+    useEffect(() => {
+        onSelectedAccountChange?.(selectedAccount);
+    }, [selectedAccount, onSelectedAccountChange]);
+    useEffect(() => {
+        onAccountsResolved?.({
+            accounts,
+            eligibleAccounts: eligibleBillable,
+            isLoading,
+            hasEligibleAccount,
+        });
+    }, [
+        accounts,
+        eligibleBillable,
+        isLoading,
+        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: {
+                                                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'
+                                                        ? '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 })) }), _jsx(Label, { size: "small", variant: selectedAccount.isPaidPlan ? 'success' : 'attention', children: formatBillableAccountPlanLabel(selectedAccount.planName) })] })] })) : !hasEligibleAccount ? (emptyMessage) : ('Select a billable account') }) }), _jsxs(ActionMenu.Overlay, { width: "large", children: [_jsx(Box, { sx: { p: 2 }, children: _jsx(Flash, { variant: "default", children: flashMessage }) }), _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 })) : ((() => {
+                                        const typeOrder = {
+                                            user: 0,
+                                            organization: 1,
+                                            team: 2,
+                                        };
+                                        const sorted = [...accounts].sort((a, b) => (typeOrder[a.accountType] ?? 99) -
+                                            (typeOrder[b.accountType] ?? 99));
+                                        return sorted.map((account, idx) => {
+                                            const prevType = idx > 0 ? sorted[idx - 1].accountType : undefined;
+                                            const showDivider = prevType !== undefined &&
+                                                prevType !== account.accountType;
+                                            return (_jsxs(Fragment, { children: [showDivider && _jsx(ActionList.Divider, {}), _jsxs(ActionList.Item, { selected: account.accountUid === value, disabled: !account.isEligible, onSelect: () => {
+                                                            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: {
+                                                                            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'
+                                                                                    ? 'Organization'
+                                                                                    : account.accountType === 'team'
+                                                                                        ? 'Team'
+                                                                                        : 'User', children: account.accountType === 'organization' ? (_jsx(OrganizationIcon, { size: 12 })) : account.accountType === 'team' ? (_jsx(PeopleIcon, { size: 12 })) : (_jsx(PersonIcon, { size: 12 })) }), !account.isEligible &&
+                                                                                account.accountType === 'team' && (_jsx(Label, { size: "small", variant: "attention", children: "No credits" })), _jsx(Label, { size: "small", variant: account.isPaidPlan ? 'success' : 'attention', children: formatBillableAccountPlanLabel(account.planName) })] })] }), _jsx(ActionList.Description, { variant: "block", children: account.isEligible
+                                                                    ? 'Eligible'
+                                                                    : account.accountType === 'team'
+                                                                        ? 'Not eligible — no team credits allocated'
+                                                                        : 'Not eligible — activate a plan or add credits to use this account' })] })] }, account.accountUid));
+                                        });
+                                    })()) })] })] }) }), _jsx(FormControl.Caption, { children: caption })] }));
+}
+export default BillableAccountSelect;

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

@@ -0,0 +1 @@
+export * from './BillableAccountSelect';

package/lib/components/billing/index.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './BillableAccountSelect.js';

package/lib/components/index.d.ts

@@ -1,2 +1,4 @@
 export * from './auth';
+export * from './billing';
+export * from './sharing';
 export * from './sparklines';

package/lib/components/index.js

@@ -3,4 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './auth/index.js';
+export * from './billing/index.js';
+export * from './sharing/index.js';
 export * from './sparklines/index.js';

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

@@ -0,0 +1,37 @@
+/**
+ * Principal – common, tunable display for an actor (user / team /
+ * organization). Combines a {@link PrincipalAvatar} with a
+ * {@link PrincipalDetailsOverlay} so all spots that need to show
+ * "avatar + clickable name with details overlay" can share a single
+ * component.
+ */
+import * as React from 'react';
+import { PrincipalAvatarKind } from './PrincipalAvatar';
+type PrincipalKind = PrincipalAvatarKind;
+/**
+ * Normalised actor descriptor used by all caching resolvers. Views are
+ * expected to produce one of these out of their raw API data so the
+ * common component can render consistently.
+ */
+export type PrincipalDescriptor = {
+    kind: PrincipalKind;
+    uid?: string;
+    displayName: string;
+    handle?: string;
+    accountHandle?: string;
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+    origin?: string;
+    avatarUrl?: string;
+};
+export type PrincipalProps = {
+    principal: PrincipalDescriptor;
+    isAdmin?: boolean;
+    avatarSize?: number;
+    gap?: number;
+    square?: boolean;
+    sx?: any;
+};
+export declare const Principal: React.FC<PrincipalProps>;
+export default Principal;

package/lib/components/principal/Principal.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@datalayer/primer-addons';
+import { useCache } from '../../hooks/index.js';
+import { PrincipalAvatar } from './PrincipalAvatar.js';
+import { PrincipalDetailsOverlay } from './PrincipalDetailsOverlay.js';
+export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2, square = false, sx, }) => {
+    const { useUser, useOrganization } = useCache();
+    const hydratedUserQuery = useUser(principal.kind === 'user' ? String(principal.uid || '') : '');
+    const hydratedOrgQuery = useOrganization(principal.kind === 'organization' ? String(principal.uid || '') : '');
+    const hydratedEntity = principal.kind === 'user'
+        ? hydratedUserQuery.data
+        : principal.kind === 'organization'
+            ? hydratedOrgQuery.data
+            : undefined;
+    const hydratedDisplayName = principal.kind === 'user'
+        ? String(hydratedEntity?.displayName ||
+            [
+                hydratedEntity?.firstName,
+                hydratedEntity?.lastName,
+            ]
+                .filter(Boolean)
+                .join(' ') ||
+            '').trim()
+        : String(hydratedEntity?.displayName ||
+            hydratedEntity?.name ||
+            '').trim();
+    const resolvedPrincipal = {
+        ...principal,
+        displayName: hydratedDisplayName ||
+            principal.displayName ||
+            principal.handle ||
+            principal.uid ||
+            'Unknown',
+        handle: principal.handle ||
+            String(hydratedEntity?.handle || '').trim() ||
+            undefined,
+        accountHandle: principal.accountHandle ||
+            String(hydratedEntity?.handle || '').trim() ||
+            undefined,
+        avatarUrl: principal.avatarUrl || hydratedEntity?.avatarUrl || undefined,
+        firstName: principal.firstName || hydratedEntity?.firstName || undefined,
+        lastName: principal.lastName || hydratedEntity?.lastName || undefined,
+        email: principal.email || hydratedEntity?.email || undefined,
+        origin: principal.origin || hydratedEntity?.origin || undefined,
+    };
+    return (_jsxs(Box, { sx: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            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, handle: resolvedPrincipal.handle, accountHandle: resolvedPrincipal.accountHandle, firstName: resolvedPrincipal.firstName, lastName: resolvedPrincipal.lastName, email: resolvedPrincipal.email, origin: resolvedPrincipal.origin, avatarUrl: resolvedPrincipal.avatarUrl, isAdmin: isAdmin })] }));
+};
+export default Principal;

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

@@ -0,0 +1,10 @@
+export type PrincipalAvatarKind = 'user' | 'team' | 'organization';
+export type PrincipalAvatarProps = {
+    kind: PrincipalAvatarKind;
+    avatarUrl?: string;
+    alt?: string;
+    size?: number;
+    square?: boolean;
+};
+export declare function PrincipalAvatar({ kind, avatarUrl, alt, size, square, }: PrincipalAvatarProps): JSX.Element;
+export default PrincipalAvatar;

package/lib/components/principal/PrincipalAvatar.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Box, useColorPalette } from '@datalayer/primer-addons';
+import { OrganizationIcon, PeopleIcon } from '@primer/octicons-react';
+import { AlienIcon } from '@datalayer/icons-react';
+import { DLAvatar } from '../avatars/index.js';
+function hasRealAvatar(url) {
+    if (!url) {
+        return false;
+    }
+    if (url.startsWith('https://www.gravatar.com/avatar')) {
+        return false;
+    }
+    return true;
+}
+function getFallbackIconSize(size) {
+    return Math.max(12, Math.round(size * 0.62));
+}
+export function PrincipalAvatar({ kind, avatarUrl, alt, size = 20, square = false, }) {
+    const palette = useColorPalette();
+    if (kind === 'user' && hasRealAvatar(avatarUrl)) {
+        return (_jsx(DLAvatar, { src: avatarUrl, alt: alt || 'User', size: size, square: square }));
+    }
+    const iconSize = getFallbackIconSize(size);
+    const borderRadius = square ? 2 : '50%';
+    if (kind === 'user') {
+        return (_jsx(Box, { sx: {
+                width: size,
+                height: size,
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                bg: 'accent.subtle',
+                borderRadius,
+                overflow: 'hidden',
+                '--datalayer-icon-fg': palette.primary,
+            }, "aria-label": alt || 'User', children: _jsx(AlienIcon, { size: iconSize }) }));
+    }
+    const Icon = kind === 'team' ? PeopleIcon : OrganizationIcon;
+    return (_jsx(Box, { sx: {
+            width: size,
+            height: size,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            bg: 'canvas.subtle',
+            borderRadius,
+            border: '1px solid',
+            borderColor: 'border.default',
+        }, "aria-label": alt || (kind === 'team' ? 'Team' : 'Organization'), children: _jsx(Icon, { size: iconSize }) }));
+}
+export default PrincipalAvatar;

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

@@ -0,0 +1,20 @@
+import { type PrincipalDescriptor } from './Principal';
+export type PrincipalBadgeInput = Omit<PrincipalDescriptor, 'displayName'> & {
+    displayName?: string;
+};
+type PrincipalBadgeProps = {
+    principal?: PrincipalBadgeInput;
+    showPrincipalLabel?: boolean;
+    showApplyingToText?: boolean;
+    showOriginLabel?: boolean;
+    principalLabel?: string;
+    isAdmin?: boolean;
+    sx?: any;
+};
+/**
+ * PrincipalBadge — small inline pill that displays a resolved principal
+ * (user / organization / team). Falls back to the currently selected
+ * principal when no explicit `principal` prop is supplied.
+ */
+export declare const PrincipalBadge: ({ principal: providedPrincipal, showPrincipalLabel, showApplyingToText, showOriginLabel, principalLabel, isAdmin, sx, }?: PrincipalBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default PrincipalBadge;