@datalayer/core 1.0.21 → 1.0.23

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,376 @@
+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, useRef, 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 personalEligible = eligibleBillable.find(a => a.accountType === 'user' && a.accountUid === personalAccountUid);
+        if (personalEligible)
+            return personalEligible;
+        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 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]);
+    // Apply persisted selection (cookie) once accounts are resolved. Runs once
+    // per mount so users can still change selection afterwards; falls back to
+    // personal user account when the stored uid is unknown/ineligible.
+    const initialSelectionAppliedRef = useRef(false);
+    useEffect(() => {
+        if (isLoading)
+            return;
+        if (initialSelectionAppliedRef.current)
+            return;
+        if (eligibleBillable.length === 0 && accounts.length === 0)
+            return;
+        initialSelectionAppliedRef.current = true;
+        const storedAccount = storedBillableAccountUid
+            ? eligibleBillable.find(a => a.accountUid === storedBillableAccountUid)
+            : undefined;
+        const personalAccount = eligibleBillable.find(a => a.accountType === 'user' && a.accountUid === personalAccountUid);
+        const target = storedAccount || personalAccount || preferredEligible;
+        if (!target)
+            return;
+        if (target.accountUid !== value) {
+            writeBillableAccountCookie(target.accountUid);
+            onChange(target.accountUid);
+        }
+    }, [
+        isLoading,
+        accounts,
+        eligibleBillable,
+        storedBillableAccountUid,
+        personalAccountUid,
+        preferredEligible,
+        value,
+        onChange,
+    ]);
+    // Auto-select a sensible default when current value is empty/ineligible.
+    useEffect(() => {
+        if (isLoading)
+            return;
+        if (!initialSelectionAppliedRef.current)
+            return;
+        if (!preferredEligible) {
+            if (value)
+                onChange('');
+            return;
+        }
+        const current = accounts.find(a => a.accountUid === value);
+        if (!current || !current.isEligible) {
+            writeBillableAccountCookie(preferredEligible.accountUid);
+            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/display/JupyterDialog.d.ts

@@ -33,6 +33,11 @@ export interface IDialogWrapperOptions<T> {
      * The top level text for the dialog.
      */
     title: string;
+    /**
+     * Optional async hook called before an accept button closes the dialog.
+     * Return false to keep the dialog open.
+     */
+    onWillAccept: (result: Dialog.IResult<T>) => Promise<boolean | void> | boolean | void;
 }
 /**
  * A primer dialog mimicking the JupyterLab dialog interface
@@ -45,6 +50,8 @@ export declare class JupyterDialog<T> extends ReactWidget {
     protected buttons: Dialog.IButton[];
     protected host: HTMLElement;
     protected dialogTitle?: string;
+    protected onWillAccept?: (result: Dialog.IResult<T>) => Promise<boolean | void> | boolean | void;
+    private _pendingButtonIndex;
     private _closing;
     private _result;
     /**
@@ -60,7 +67,7 @@ export declare class JupyterDialog<T> extends ReactWidget {
      * @returns a promise that resolves with the result of the dialog.
      */
     launch(): Promise<Dialog.IResult<T>>;
-    protected handleButton: (idx: number) => void;
+    protected handleButton: (idx: number) => Promise<void>;
     protected setButton: (button: Dialog.IButton) => void;
     protected setChecked: (c: boolean) => void;
     protected setValue: (v: T | Error) => void;

package/lib/components/display/JupyterDialog.js

@@ -9,7 +9,7 @@ import { ReactWidget } from '@jupyterlab/ui-components';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Widget } from '@lumino/widgets';
 import { FocusKeys } from '@primer/behaviors';
-import { Checkbox, FormControl, useFocusZone } from '@primer/react';
+import { Checkbox, FormControl, Spinner, useFocusZone } from '@primer/react';
 import { Dialog as PrimerDialog, } from '@primer/react/experimental';
 import { JupyterReactTheme } from '@datalayer/jupyter-react';
 function DialogFooter(props) {
@@ -33,6 +33,8 @@ export class JupyterDialog extends ReactWidget {
     buttons;
     host;
     dialogTitle;
+    onWillAccept;
+    _pendingButtonIndex = null;
     _closing = new PromiseDelegate();
     _result = {
         button: null,
@@ -52,6 +54,7 @@ export class JupyterDialog extends ReactWidget {
             Dialog.okButton(),
         ];
         this.dialogTitle = options.title;
+        this.onWillAccept = options.onWillAccept;
     }
     _renderBody = (props) => (_jsx(PrimerDialog.Body, { children: createElement(this.body, {
             ...props,
@@ -61,7 +64,11 @@ export class JupyterDialog extends ReactWidget {
     render() {
         // TODO title color is enforced for JupyterLab.
         // This may be fixed in the jupyter-react theme (Primer generates h1 for the dialog title).
-        return (_jsx(JupyterReactTheme, { children: _jsx(PrimerDialog, { title: _jsx("span", { style: { color: 'var(--fgColor-default)' }, children: this.dialogTitle }), onClose: this.close, renderBody: this._renderBody, renderFooter: this._renderFooter, footerButtons: this.buttons.map((but, idx) => {
+        return (_jsx(JupyterReactTheme, { children: _jsx(PrimerDialog, { title: _jsx("span", { style: { color: 'var(--fgColor-default)' }, children: this.dialogTitle }), onClose: () => {
+                    if (this._pendingButtonIndex === null) {
+                        this.close();
+                    }
+                }, renderBody: this._renderBody, renderFooter: this._renderFooter, footerButtons: this.buttons.map((but, idx) => {
                     const footerButton = {
                         buttonType: but.displayType === 'default'
                             ? but.accept
@@ -71,8 +78,9 @@ export class JupyterDialog extends ReactWidget {
                         onClick: () => {
                             this.handleButton(idx);
                         },
-                        content: but.label,
+                        content: this._pendingButtonIndex === idx ? (_jsx(Spinner, { size: "small" })) : (but.label),
                         'aria-label': but.ariaLabel,
+                        disabled: this._pendingButtonIndex !== null,
                         autoFocus: but.accept,
                     };
                     return footerButton;
@@ -88,8 +96,30 @@ export class JupyterDialog extends ReactWidget {
         await this._closing.promise;
         return this._result;
     }
-    handleButton = (idx) => {
-        this.setButton(this.buttons[idx]);
+    handleButton = async (idx) => {
+        if (this._pendingButtonIndex !== null) {
+            return;
+        }
+        const button = this.buttons[idx];
+        this.setButton(button);
+        if (button.accept && this.onWillAccept) {
+            this._pendingButtonIndex = idx;
+            this.update();
+            try {
+                const shouldClose = await this.onWillAccept(this._result);
+                if (shouldClose === false) {
+                    this._pendingButtonIndex = null;
+                    this.update();
+                    return;
+                }
+            }
+            catch (error) {
+                this._pendingButtonIndex = null;
+                this.update();
+                throw error;
+            }
+        }
+        this._pendingButtonIndex = null;
         this.close();
     };
     setButton = (button) => {
@@ -107,6 +137,9 @@ export class JupyterDialog extends ReactWidget {
         }
     };
     close = () => {
+        if (this._pendingButtonIndex !== null) {
+            return;
+        }
         Widget.detach(this);
         this._closing.resolve();
     };

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;