@datalayer/core 1.0.20 → 1.0.22

package/lib/client/mixins/SpacerMixin.js

@@ -473,8 +473,29 @@ export function SpacerMixin(Base) {
             // Use getMySpaces and filter by variant, because the
             // /spaces/types/project endpoint returns empty results.
             const allSpaces = await this.getMySpaces();
+            const isProjectSpace = (space) => {
+                const raw = space.rawData();
+                const variant = raw?.variant_s ?? space.variant;
+                if (variant !== 'project') {
+                    return false;
+                }
+                const items = Array.isArray(raw?.items)
+                    ? raw.items
+                    : raw?.items && typeof raw.items === 'object'
+                        ? [raw.items]
+                        : [];
+                if (items.length === 0) {
+                    return true;
+                }
+                const hasNotebook = items.some((item) => (item?.type_s ?? item?.type) === 'notebook');
+                const hasDocument = items.some((item) => {
+                    const type = item?.type_s ?? item?.type;
+                    return type === 'document' || type === 'lexical';
+                });
+                return hasNotebook && hasDocument;
+            };
             return allSpaces
-                .filter(s => s.variant === 'project')
+                .filter(s => isProjectSpace(s))
                 .map(s => new ProjectDTO(s.rawData()));
         }
         /**

package/lib/collaboration/DatalayerCollaborationProvider.d.ts

@@ -1,4 +1,3 @@
-import { YNotebook } from '@jupyter/ydoc';
 import { WebsocketProvider } from 'y-websocket';
 import type { ICollaborationProvider, ICollaborationProviderEvents } from '@datalayer/jupyter-react';
 export declare enum CollaborationStatus {
@@ -7,6 +6,8 @@ export declare enum CollaborationStatus {
     Connected = "connected",
     Error = "error"
 }
+type SharedModel = Parameters<ICollaborationProvider['connect']>[0];
+type ConnectOptions = Parameters<ICollaborationProvider['connect']>[2];
 /**
  * Configuration for Datalayer collaboration provider
  */
@@ -48,10 +49,10 @@ export declare class DatalayerCollaborationProvider implements ICollaborationPro
     get isDisposed(): boolean;
     get events(): ICollaborationProviderEvents;
     private setStatus;
-    connect(sharedModel: YNotebook, documentId: string, options?: Record<string, any>): Promise<void>;
+    connect(sharedModel: SharedModel, documentId: string, options?: ConnectOptions): Promise<void>;
     disconnect(): void;
     getProvider(): WebsocketProvider | null;
-    getSharedModel(): YNotebook | null;
+    getSharedModel(): SharedModel | null;
     handleConnectionClose(event: CloseEvent): void;
     handleSync(isSynced: boolean): void;
     dispose(): void;

package/lib/components/avatars/DLAvatar.d.ts

@@ -0,0 +1,24 @@
+import { type AvatarProps } from '@primer/react';
+/**
+ * Props for {@link DLAvatar}.
+ *
+ * Same as Primer's `AvatarProps` but `src` accepts the raw avatar URL
+ * (e.g. `user.avatar_url_s`) and is run through {@link getAvatarURL}
+ * so Gravatar fallbacks and the default avatar are handled consistently.
+ */
+export type DLAvatarProps = Omit<AvatarProps, 'src'> & {
+    src?: string;
+};
+/**
+ * Datalayer Avatar wrapper.
+ *
+ * Centralizes two concerns for every avatar rendered in our apps:
+ *
+ *  - URL normalization via {@link getAvatarURL} (handles Gravatar query
+ *    parameters and the default avatar fallback).
+ *  - `referrerPolicy="no-referrer"` so that third-party CDNs such as
+ *    `lh3.googleusercontent.com` (Google), LinkedIn media, etc. do not
+ *    deny the request based on the `Referer` header.
+ */
+export declare const DLAvatar: ({ src, ...rest }: DLAvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default DLAvatar;

package/lib/components/avatars/DLAvatar.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Avatar } from '@primer/react';
+import { getAvatarURL } from '../../utils/index.js';
+/**
+ * Datalayer Avatar wrapper.
+ *
+ * Centralizes two concerns for every avatar rendered in our apps:
+ *
+ *  - URL normalization via {@link getAvatarURL} (handles Gravatar query
+ *    parameters and the default avatar fallback).
+ *  - `referrerPolicy="no-referrer"` so that third-party CDNs such as
+ *    `lh3.googleusercontent.com` (Google), LinkedIn media, etc. do not
+ *    deny the request based on the `Referer` header.
+ */
+export const DLAvatar = ({ src, ...rest }) => {
+    return (_jsx(Avatar, { src: getAvatarURL(src), referrerPolicy: "no-referrer", ...rest }));
+};
+export default DLAvatar;

package/lib/components/avatars/UserProfileAvatar.js

@@ -3,16 +3,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { Avatar, Link } from '@primer/react';
+import { Link } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { AvatarSkeleton } from '../../components/display/index.js';
-import { getAvatarURL } from '../../utils/index.js';
+import { DLAvatar } from './DLAvatar.js';
 const Profile = ({ user, size = 100, onClick }) => {
-    return (_jsx(Box, { style: { width: size }, children: _jsx(Avatar
+    return (_jsx(Box, { style: { width: size }, children: _jsx(DLAvatar
         //      square
         , { 
             //      square
-            src: getAvatarURL(user?.avatarUrl), size: size, onClick: onClick }) }));
+            src: user?.avatarUrl, size: size, onClick: onClick }) }));
 };
 export const UserProfileAvatar = ({ onClick, user, size = 100, }) => {
     return user ? (onClick ? (_jsx(Link, { href: "javascript: return false;", onClick: onClick, children: _jsx(Profile, { user: user, size: size, onClick: onClick }) })) : (_jsx(Profile, { user: user, size: size, onClick: onClick }))) : (_jsx(AvatarSkeleton, { size: size }));

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

@@ -1,2 +1,3 @@
 export * from './BoringAvatar';
+export * from './DLAvatar';
 export * from './UserProfileAvatar';

package/lib/components/avatars/index.js

@@ -3,4 +3,5 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './BoringAvatar.js';
+export * from './DLAvatar.js';
 export * from './UserProfileAvatar.js';

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/checkout/StripeCheckout.d.ts

@@ -1,3 +1,4 @@
+import type { StripeElementsOptions } from '@stripe/stripe-js';
 import type { ICheckoutPortal } from '../../models';
 /**
  * Price item interface
@@ -23,10 +24,30 @@ export interface IPrice {
      * Computational credits to receive
      */
     credits: number;
+    /**
+     * Whether this price is the server-selected default option
+     */
+    default?: boolean;
 }
+export interface ISubscriptionPlan {
+    id: string;
+    name: string;
+    amount: number;
+    currency: string;
+    interval?: string;
+    included_runs?: number;
+}
+export type StripeCheckoutProps = {
+    checkoutPortal: ICheckoutPortal | null;
+    appearance?: StripeElementsOptions['appearance'];
+    accountUid?: string;
+    showStatusUsageSummary?: boolean;
+    onCheckoutSuccess?: (event: {
+        checkoutType: 'topup' | 'subscription' | 'resume';
+        purchasedCredits?: number;
+    }) => void;
+};
 /**
  * Stripe checkout.
  */
-export declare function StripeCheckout({ checkoutPortal, }: {
-    checkoutPortal: ICheckoutPortal | null;
-}): import("react/jsx-runtime").JSX.Element;
+export declare function StripeCheckout({ checkoutPortal, appearance, accountUid, showStatusUsageSummary, onCheckoutSuccess, }: StripeCheckoutProps): import("react/jsx-runtime").JSX.Element;