@datalayer/core 1.1.43 → 1.1.45

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

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

package/lib/components/billing/{BillableAccountSelect.js → BillingEntitySelect.js}

@@ -8,8 +8,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * 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
+ * BillingEntitySelect — self-contained dropdown that lets the user pick a
+ * billing entity (personal, organization, or eligible team) for runs that
  * consume wallet credits.
  *
  * Encapsulates eligibility merge logic and account-detail fetching. Callers
@@ -25,24 +25,24 @@ 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() {
+const BILLING_ENTITY_COOKIE = 'datalayer-billing-entity-uid';
+const BILLING_ENTITY_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
+function readBillingEntityCookie() {
     if (typeof document === 'undefined')
         return null;
-    const escaped = BILLABLE_ACCOUNT_COOKIE.replace(/[.$?*|{}()[\]\\/+^]/g, '\\$&');
+    const escaped = BILLING_ENTITY_COOKIE.replace(/[.$?*|{}()[\]\\/+^]/g, '\\$&');
     const match = document.cookie.match(new RegExp('(?:^|; )' + escaped + '=([^;]*)'));
     return match ? decodeURIComponent(match[1]) : null;
 }
-function writeBillableAccountCookie(value) {
+function writeBillingEntityCookie(value) {
     if (typeof document === 'undefined')
         return;
     document.cookie =
-        `${BILLABLE_ACCOUNT_COOKIE}=${encodeURIComponent(value)};` +
-            ` path=/; max-age=${BILLABLE_ACCOUNT_COOKIE_MAX_AGE}; SameSite=Lax`;
+        `${BILLING_ENTITY_COOKIE}=${encodeURIComponent(value)};` +
+            ` path=/; max-age=${BILLING_ENTITY_COOKIE_MAX_AGE}; SameSite=Lax`;
 }
 const planContains = (value, terms) => terms.some(term => value.includes(term));
-export function resolveBillablePlanTier(value) {
+export function resolveBillingPlanTier(value) {
     const normalized = String(value ?? '').toLowerCase();
     if (!normalized || normalized === 'unknown')
         return 'free';
@@ -52,12 +52,10 @@ export function resolveBillablePlanTier(value) {
         return 'pro';
     return 'free';
 }
-export function formatBillableAccountPlanLabel(planName) {
-    return resolveBillablePlanTier(planName) === 'pro'
-        ? 'Team Plan'
-        : 'Free Plan';
+export function formatBillingEntityPlanLabel(planName) {
+    return resolveBillingPlanTier(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, }) {
+export function BillingEntitySelect({ value, onChange, onSelectedAccountChange, onAccountsResolved, disabled = false, label = 'Run under', caption = 'Personal, organization, and eligible team accounts can be selected for billing assignment. For team billing, runtime runs are attributed to the parent organization while credits are consumed from the selected team wallet.', emptyMessage = 'No billing entitys available', flashMessage = 'Runs and credits are charged to the selected billing entity. 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();
@@ -178,7 +176,7 @@ export function BillableAccountSelect({ value, onChange, onSelectedAccountChange
                 accountName: String(details?.account_name || account.accountName || account.accountUid),
                 planName,
                 isEligible,
-                isPaidPlan: resolveBillablePlanTier(planName || 'free') === 'pro',
+                isPaidPlan: resolveBillingPlanTier(planName || 'free') === 'pro',
                 sourceOrganizationUid,
                 sourceOrganizationHandle,
                 teamHandle: accountType === 'team' ? accountHandle : undefined,
@@ -190,21 +188,21 @@ export function BillableAccountSelect({ value, onChange, onSelectedAccountChange
         eligibleAccountByUid,
         detailsByUid,
     ]);
-    const eligibleBillable = useMemo(() => accounts.filter(a => a.isEligible), [accounts]);
-    const hasEligibleAccount = eligibleBillable.length > 0;
+    const eligibleBilling = useMemo(() => accounts.filter(a => a.isEligible), [accounts]);
+    const hasEligibleAccount = eligibleBilling.length > 0;
     const isLoading = eligibleAccountsLoading || detailsLoading;
-    const storedBillableAccountUid = useMemo(() => readBillableAccountCookie(), []);
+    const storedBillingEntityUid = useMemo(() => readBillingEntityCookie(), []);
     const preferredEligible = useMemo(() => {
-        const fromCookie = storedBillableAccountUid
-            ? eligibleBillable.find(account => account.accountUid === storedBillableAccountUid)
+        const fromCookie = storedBillingEntityUid
+            ? eligibleBilling.find(account => account.accountUid === storedBillingEntityUid)
             : undefined;
         if (fromCookie)
             return fromCookie;
-        const personalEligible = eligibleBillable.find(a => a.accountType === 'user' && a.accountUid === personalAccountUid);
+        const personalEligible = eligibleBilling.find(a => a.accountType === 'user' && a.accountUid === personalAccountUid);
         if (personalEligible)
             return personalEligible;
         const byPrincipal = selectedPrincipalUid
-            ? eligibleBillable.find(account => {
+            ? eligibleBilling.find(account => {
                 if (account.accountUid !== selectedPrincipalUid)
                     return false;
                 if (selectedPrincipalKind === 'organization')
@@ -216,20 +214,20 @@ export function BillableAccountSelect({ value, onChange, onSelectedAccountChange
             : undefined;
         if (byPrincipal)
             return byPrincipal;
-        const firstOrg = eligibleBillable.find(a => a.accountType === 'organization');
+        const firstOrg = eligibleBilling.find(a => a.accountType === 'organization');
         if (preferOrganizationDefault && firstOrg)
             return firstOrg;
-        return firstOrg || eligibleBillable[0];
+        return firstOrg || eligibleBilling[0];
     }, [
-        storedBillableAccountUid,
-        eligibleBillable,
+        storedBillingEntityUid,
+        eligibleBilling,
         personalAccountUid,
         preferOrganizationDefault,
         selectedPrincipalKind,
         selectedPrincipalUid,
     ]);
     const handleAccountSelect = useCallback((accountUid) => {
-        writeBillableAccountCookie(accountUid);
+        writeBillingEntityCookie(accountUid);
         onChange(accountUid);
     }, [onChange]);
     // Apply persisted selection (cookie) once accounts are resolved. Runs once
@@ -241,25 +239,25 @@ export function BillableAccountSelect({ value, onChange, onSelectedAccountChange
             return;
         if (initialSelectionAppliedRef.current)
             return;
-        if (eligibleBillable.length === 0 && accounts.length === 0)
+        if (eligibleBilling.length === 0 && accounts.length === 0)
             return;
         initialSelectionAppliedRef.current = true;
-        const storedAccount = storedBillableAccountUid
-            ? eligibleBillable.find(a => a.accountUid === storedBillableAccountUid)
+        const storedAccount = storedBillingEntityUid
+            ? eligibleBilling.find(a => a.accountUid === storedBillingEntityUid)
             : undefined;
-        const personalAccount = eligibleBillable.find(a => a.accountType === 'user' && a.accountUid === personalAccountUid);
+        const personalAccount = eligibleBilling.find(a => a.accountType === 'user' && a.accountUid === personalAccountUid);
         const target = storedAccount || personalAccount || preferredEligible;
         if (!target)
             return;
         if (target.accountUid !== value) {
-            writeBillableAccountCookie(target.accountUid);
+            writeBillingEntityCookie(target.accountUid);
             onChange(target.accountUid);
         }
     }, [
         isLoading,
         accounts,
-        eligibleBillable,
-        storedBillableAccountUid,
+        eligibleBilling,
+        storedBillingEntityUid,
         personalAccountUid,
         preferredEligible,
         value,
@@ -278,7 +276,7 @@ export function BillableAccountSelect({ value, onChange, onSelectedAccountChange
         }
         const current = accounts.find(a => a.accountUid === value);
         if (!current || !current.isEligible) {
-            writeBillableAccountCookie(preferredEligible.accountUid);
+            writeBillingEntityCookie(preferredEligible.accountUid);
             onChange(preferredEligible.accountUid);
         }
     }, [isLoading, preferredEligible, accounts, value, onChange]);
@@ -289,13 +287,13 @@ export function BillableAccountSelect({ value, onChange, onSelectedAccountChange
     useEffect(() => {
         onAccountsResolved?.({
             accounts,
-            eligibleAccounts: eligibleBillable,
+            eligibleAccounts: eligibleBilling,
             isLoading,
             hasEligibleAccount,
         });
     }, [
         accounts,
-        eligibleBillable,
+        eligibleBilling,
         isLoading,
         hasEligibleAccount,
         onAccountsResolved,
@@ -326,7 +324,7 @@ export function BillableAccountSelect({ value, onChange, onSelectedAccountChange
                                                         ? '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: {
+                                                            : '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: formatBillingEntityPlanLabel(selectedAccount.planName) })] })] })) : !hasEligibleAccount ? (emptyMessage) : ('Select a billing entity') }) }), _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,
@@ -369,7 +367,7 @@ export function BillableAccountSelect({ value, onChange, onSelectedAccountChange
                                                                                     : 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
+                                                                                account.accountType === 'team' && (_jsx(Label, { size: "small", variant: "attention", children: "No credits" })), _jsx(Label, { size: "small", variant: account.isPaidPlan ? 'success' : 'attention', children: formatBillingEntityPlanLabel(account.planName) })] })] }), _jsx(ActionList.Description, { variant: "block", children: account.isEligible
                                                                     ? 'Eligible'
                                                                     : account.accountType === 'team'
                                                                         ? 'Not eligible — no team credits allocated'
@@ -377,4 +375,4 @@ export function BillableAccountSelect({ value, onChange, onSelectedAccountChange
                                         });
                                     })()) })] })] }) }), _jsx(FormControl.Caption, { children: caption })] }));
 }
-export default BillableAccountSelect;
+export default BillingEntitySelect;

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

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

package/lib/components/billing/index.js

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

package/lib/components/checkout/StripeCheckout.js

@@ -492,7 +492,7 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
         ? Math.max(remainingCredits, pendingTopUpTarget.targetWalletBalance)
         : remainingCredits;
     const isRunsOverQuota = runsTotal > 0 && usedRuns > runsTotal;
-    const hasBillablePlan = useMemo(() => {
+    const hasBillingPlan = useMemo(() => {
         const normalizedPlan = String(currentSubscriptionPlan).toLowerCase();
         const freeLike = normalizedPlan.includes('free') ||
             normalizedPlan.includes('trial') ||
@@ -502,7 +502,7 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
     }, [currentSubscriptionPlan]);
     const isPaidSubscription = useMemo(() => {
         const normalizedStatus = String(subscriptionStatus).toLowerCase();
-        if (!hasBillablePlan) {
+        if (!hasBillingPlan) {
             return false;
         }
         if (normalizedStatus.includes('incomplete') ||
@@ -513,9 +513,9 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
             return false;
         }
         return ['active', 'trialing', 'past_due', 'paid'].includes(normalizedStatus);
-    }, [hasBillablePlan, subscriptionStatus]);
+    }, [hasBillingPlan, subscriptionStatus]);
     const canCancelSubscription = useMemo(() => {
-        if (!hasBillablePlan) {
+        if (!hasBillingPlan) {
             return false;
         }
         const status = String(subscriptionStatus).toLowerCase();
@@ -526,7 +526,7 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
             status.includes('free') ||
             status === 'unknown';
         return !nonCancelable;
-    }, [hasBillablePlan, subscriptionStatus, isCancellationScheduled]);
+    }, [hasBillingPlan, subscriptionStatus, isCancellationScheduled]);
     const isCancelActionPending = cancelSubscriptionMutation.isPending || isConfirmingCancel;
     const isResumeActionPending = resumeSubscriptionMutation.isPending || isResumingTransition;
     const showResumeAction = isCancellationScheduled && !isCancelActionPending;

package/lib/components/display/VisuallyHidden.d.ts

@@ -2,4 +2,4 @@ import { SxProp } from '@primer/react';
 export interface IVisuallyHiddenProps {
     isVisible?: boolean;
 }
-export declare const VisuallyHidden: import("styled-components").StyledComponent<"span", any, IVisuallyHiddenProps & SxProp, never>;
+export declare const VisuallyHidden: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "sx" | "isVisible"> & IVisuallyHiddenProps & SxProp, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "sx" | "isVisible"> & IVisuallyHiddenProps & SxProp, never>>> & string;

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

@@ -5,7 +5,6 @@ export * from './DatalayerBox';
 export * from './DisplayHandle';
 export * from './HorizontalCenter';
 export * from './JupyterDialog';
-export * from './LiveRelativeTime';
 export * from './Markdown';
 export * from './NavLink';
 export * from './NotebookSkeleton';

package/lib/components/display/index.js

@@ -9,7 +9,6 @@ export * from './DatalayerBox.js';
 export * from './DisplayHandle.js';
 export * from './HorizontalCenter.js';
 export * from './JupyterDialog.js';
-export * from './LiveRelativeTime.js';
 export * from './Markdown.js';
 export * from './NavLink.js';
 export * from './NotebookSkeleton.js';

package/lib/components/principal/Principal.js

@@ -33,7 +33,7 @@ const GENERIC_PLACEHOLDER_DISPLAY_NAMES = new Set([
     'personal',
     'team',
     'organization',
-    'billable account',
+    'billing entity',
 ]);
 /** Truncate a placeholder string to `maxLength`, appending an ellipsis. */
 function truncatePlaceholder(value, maxLength) {
@@ -165,7 +165,9 @@ export const Principal = ({ principal, isAdmin = false, avatarSize = 20, gap = 2
         handle: (!providedHandleIsUidPlaceholder ? principal.handle : undefined) ||
             String(hydratedEntity?.handle || '').trim() ||
             undefined,
-        accountHandle: (!providedAccountHandleIsUidPlaceholder ? principal.accountHandle : undefined) ||
+        accountHandle: (!providedAccountHandleIsUidPlaceholder
+            ? principal.accountHandle
+            : undefined) ||
             String(hydratedEntity?.handle || '').trim() ||
             undefined,
         name: principal.name ||

package/lib/components/principal/PrincipalBadge.js

@@ -16,6 +16,27 @@ function normalizeUserOrigin(originRaw) {
         return undefined;
     }
     const lower = value.toLowerCase();
+    const extPrefix = 'urn:dla:iam:ext::';
+    if (lower.startsWith(extPrefix)) {
+        const suffix = value.slice(extPrefix.length);
+        const provider = (suffix.split(':')[0] || '').trim().toLowerCase();
+        if (provider === 'github') {
+            return 'GitHub';
+        }
+        if (provider === 'google') {
+            return 'Google';
+        }
+        if (provider === 'linkedin') {
+            return 'LinkedIn';
+        }
+        if (provider === 'microsoft') {
+            return 'Microsoft';
+        }
+        if (provider) {
+            return provider.charAt(0).toUpperCase() + provider.slice(1);
+        }
+        return 'External';
+    }
     if (lower === 'github') {
         return 'GitHub';
     }

package/lib/components/principal/PrincipalDetailsOverlay.js

@@ -3,12 +3,47 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { ActionMenu, Box, Button, Label, Text } from '@primer/react';
+import { ActionMenu, Box, Button, Label, Text, ThemeProvider, } from '@primer/react';
 import { useNavigate } from '../../hooks/index.js';
 import { PrincipalAvatar } from './PrincipalAvatar.js';
+import { displayHandleText } from '../display/DisplayHandle.js';
 function normalize(value) {
     return (value || '').trim();
 }
+function normalizeOriginLabel(origin) {
+    const normalized = normalize(origin);
+    if (!normalized) {
+        return 'Datalayer';
+    }
+    const lower = normalized.toLowerCase();
+    if (lower === 'google')
+        return 'Google';
+    if (lower === 'github')
+        return 'GitHub';
+    if (lower === 'linkedin')
+        return 'LinkedIn';
+    if (lower === 'microsoft')
+        return 'Microsoft';
+    if (lower === 'datalayer')
+        return 'Datalayer';
+    const extPrefix = 'urn:dla:iam:ext::';
+    if (lower.startsWith(extPrefix)) {
+        const suffix = normalized.slice(extPrefix.length);
+        const provider = (suffix.split(':')[0] || '').trim().toLowerCase();
+        if (provider === 'google')
+            return 'Google';
+        if (provider === 'github')
+            return 'GitHub';
+        if (provider === 'linkedin')
+            return 'LinkedIn';
+        if (provider === 'microsoft')
+            return 'Microsoft';
+        if (provider) {
+            return provider.charAt(0).toUpperCase() + provider.slice(1);
+        }
+    }
+    return normalized;
+}
 export function buildPrincipalProfilePath({ kind, uid, handle, accountHandle, isAdmin, }) {
     const normalizedUid = normalize(uid);
     const normalizedHandle = normalize(handle);
@@ -55,7 +90,7 @@ export function PrincipalDetailsOverlay({ kind, uid, displayName, name, descript
     const normalizedUid = normalize(uid);
     const normalizedName = normalize(name);
     const normalizedDescription = normalize(description);
-    const normalizedOrigin = normalize(origin) || 'Datalayer';
+    const normalizedOrigin = normalizeOriginLabel(origin);
     const resolvedHandle = normalizedHandle && normalizedHandle !== normalizedUid
         ? normalizedHandle
         : '';
@@ -66,41 +101,41 @@ export function PrincipalDetailsOverlay({ kind, uid, displayName, name, descript
         accountHandle,
         isAdmin,
     });
-    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Box, { as: "button", type: "button", sx: {
-                        fontWeight: 'semibold',
-                        color: 'accent.fg',
-                        textDecoration: 'underline',
-                        background: 'transparent',
-                        border: 0,
-                        padding: 0,
-                        margin: 0,
-                        cursor: 'pointer',
-                        ':hover': {
+    return (_jsx(ThemeProvider, { children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Box, { as: "button", type: "button", sx: {
+                            fontWeight: 'semibold',
+                            color: 'accent.fg',
                             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 }), resolvedHandle ? (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["@", resolvedHandle] })) : null] })] }), _jsxs(Box, { sx: {
-                                display: 'grid',
-                                gridTemplateColumns: '110px 1fr',
-                                gap: 1,
-                                alignItems: 'baseline',
-                            }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Kind" }), _jsx(Text, { sx: { fontSize: 1 }, children: kind }), resolvedHandle ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsxs(Text, { sx: { fontSize: 1 }, children: ["@", resolvedHandle] })] })) : null, normalizedUid ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedUid })] })) : null, kind === 'personal' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontSize: 1 }, children: firstName || 'N/A' }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontSize: 1 }, children: lastName || 'N/A' }), email ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontSize: 1 }, children: email })] })) : null, _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Label, { size: "small", variant: "secondary", title: normalizedOrigin, sx: {
-                                                justifySelf: 'start',
-                                                width: 'fit-content',
-                                                maxWidth: '100%',
-                                                overflow: 'hidden',
-                                                textOverflow: 'ellipsis',
-                                                whiteSpace: 'nowrap',
-                                            }, children: normalizedOrigin })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Name" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedName || normalizedDisplayName }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Description" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedDescription || 'N/A' }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Label, { size: "small", variant: "secondary", title: normalizedOrigin, sx: {
-                                                justifySelf: 'start',
-                                                width: 'fit-content',
-                                                maxWidth: '100%',
-                                                overflow: 'hidden',
-                                                textOverflow: 'ellipsis',
-                                                whiteSpace: 'nowrap',
-                                            }, children: normalizedOrigin })] }))] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Button, { size: "small", onClick: () => {
-                                    if (targetPath) {
-                                        navigate(targetPath);
-                                    }
-                                }, disabled: !targetPath, children: "View Profile" }) })] }) })] }));
+                            background: 'transparent',
+                            border: 0,
+                            padding: 0,
+                            margin: 0,
+                            cursor: 'pointer',
+                            ':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 }), resolvedHandle && kind !== 'team' ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: displayHandleText(resolvedHandle) })) : null] })] }), _jsxs(Box, { sx: {
+                                    display: 'grid',
+                                    gridTemplateColumns: '110px 1fr',
+                                    gap: 1,
+                                    alignItems: 'baseline',
+                                }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Kind" }), _jsx(Text, { sx: { fontSize: 1 }, children: kind }), resolvedHandle && kind !== 'team' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontSize: 1 }, children: displayHandleText(resolvedHandle) })] })) : null, normalizedUid ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedUid })] })) : null, kind === 'personal' ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontSize: 1 }, children: firstName || 'N/A' }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontSize: 1 }, children: lastName || 'N/A' }), email ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontSize: 1 }, children: email })] })) : null, _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Label, { size: "small", variant: "secondary", title: normalizedOrigin, sx: {
+                                                    justifySelf: 'start',
+                                                    width: 'fit-content',
+                                                    maxWidth: '100%',
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    whiteSpace: 'nowrap',
+                                                }, children: normalizedOrigin })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Name" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedName || normalizedDisplayName }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Description" }), _jsx(Text, { sx: { fontSize: 1 }, children: normalizedDescription || 'N/A' }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Origin" }), _jsx(Label, { size: "small", variant: "secondary", title: normalizedOrigin, sx: {
+                                                    justifySelf: 'start',
+                                                    width: 'fit-content',
+                                                    maxWidth: '100%',
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    whiteSpace: 'nowrap',
+                                                }, children: normalizedOrigin })] }))] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Button, { size: "small", onClick: () => {
+                                        if (targetPath) {
+                                            navigate(targetPath);
+                                        }
+                                    }, disabled: !targetPath, children: "View Profile" }) })] }) })] }) }));
 }
 export default PrincipalDetailsOverlay;

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

@@ -5,10 +5,10 @@ export type PrincipalSwitcherMenuProps = {
 };
 /**
  * PrincipalSwitcherMenu — the *only* component allowed to write to the
- * principal store and the billable account store. It keeps both stores in
+ * principal store and the billing entity store. It keeps both stores in
  * sync per the rule:
- *   - selecting a user/org principal → billable account = same user/org
- *   - selecting a team principal     → billable account = the team's parent org
+ *   - selecting a user/org principal → billing entity = same user/org
+ *   - selecting a team principal     → billing entity = the team's parent org
  */
 export declare function PrincipalSwitcherMenu({ maxLabelChars, fullWidth, showClosedBorder, }: PrincipalSwitcherMenuProps): JSX.Element;
 export default PrincipalSwitcherMenu;