@datalayer/core 1.2.18 → 1.2.20

package/lib/components/checkout/StripeCheckout.js

@@ -122,7 +122,9 @@ function StripePaymentForm({ clientSecret, intentType = 'payment', onPaymentSucc
             },
         };
     }, [themeIsDark]);
-    const handleSubmit = useCallback(async (event) => {
+    const handleSubmit = useCallback(
+    // A Box drawn as a form hands an HTMLElement's submit event.
+    async (event) => {
         event.preventDefault();
         if (!stripe || !elements) {
             return;
@@ -166,7 +168,7 @@ function StripePaymentForm({ clientSecret, intentType = 'payment', onPaymentSucc
         }
         setIsSubmitting(false);
     }, [clientSecret, elements, onPaymentSucceeded, stripe]);
-    return (_jsxs(Box, { as: "form", onSubmit: handleSubmit, sx: { display: 'grid', gap: 3 }, children: [_jsx(CardElement, { options: cardOptions, onReady: element => {
+    return (_jsxs(Box, { as: "form", onSubmit: handleSubmit, display: "grid", gap: 3, children: [_jsx(CardElement, { options: cardOptions, onReady: element => {
                     try {
                         element.focus();
                     }
@@ -844,49 +846,15 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
         marginBottom: 'var(--stack-gap-normal)',
     };
     const shouldShowMonthlySubscriptionSection = !isPaidSubscription || isIncompleteSubscription;
-    const monthlySubscriptionSection = shouldShowMonthlySubscriptionSection ? (_jsxs(Box, { sx: {
-            borderTop: 'none',
-            paddingTop: 0,
-        }, children: [_jsx(Text, { as: "h3", sx: sectionTitleSx, children: "Choose a monthly plan" }), isIncompleteSubscription ? (_jsxs(_Fragment, { children: [_jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: "A pending plan change already exists. Complete payment or cancel it from the billing portal before creating a new one." }), _jsxs(Box, { sx: {
-                            display: 'flex',
-                            gap: 'var(--stack-gap-condensed)',
-                            flexWrap: 'wrap',
-                            marginTop: 'var(--stack-gap-normal)',
-                        }, children: [_jsx(Button, { variant: "primary", onClick: startPendingSubscriptionCheckout, disabled: subscriptionPaymentIntentMutation.isPending ||
+    const monthlySubscriptionSection = shouldShowMonthlySubscriptionSection ? (_jsxs(Box, { borderTop: "none", paddingTop: 0, children: [_jsx(Text, { as: "h3", sx: sectionTitleSx, children: "Choose a monthly plan" }), isIncompleteSubscription ? (_jsxs(_Fragment, { children: [_jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: "A pending plan change already exists. Complete payment or cancel it from the billing portal before creating a new one." }), _jsxs(Box, { display: "flex", gap: "var(--stack-gap-condensed)", flexWrap: "wrap", marginTop: "var(--stack-gap-normal)", children: [_jsx(Button, { variant: "primary", onClick: startPendingSubscriptionCheckout, disabled: subscriptionPaymentIntentMutation.isPending ||
                                     checkout ||
                                     !pendingSubscriptionPlan, children: subscriptionPaymentIntentMutation.isPending
                                     ? 'Preparing checkout...'
-                                    : 'Continue pending payment' }), _jsx(Button, { variant: "danger", onClick: onCancelSubscription, children: "Cancel pending plan change" })] }), cancelViewOpen && (_jsxs(Box, { sx: {
-                            marginTop: 'var(--stack-gap-normal)',
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 'var(--borderRadius-medium)',
-                            backgroundColor: 'canvas.subtle',
-                            padding: 'var(--stack-padding-normal)',
-                            display: 'grid',
-                            gap: 'var(--stack-gap-condensed)',
-                        }, children: [_jsx(Text, { as: "h4", sx: { fontWeight: 'bold' }, children: "Cancel pending plan change" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: "This pending plan change will be canceled immediately." }), _jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    gap: 'var(--stack-gap-condensed)',
-                                    flexWrap: 'wrap',
-                                }, children: [_jsx(Button, { variant: "danger", onClick: () => void onConfirmCancelSubscription(), disabled: isCancelActionPending, leadingVisual: () => isCancelActionPending ? _jsx(Spinner, { size: "small" }) : undefined, children: isCancelActionPending
+                                    : 'Continue pending payment' }), _jsx(Button, { variant: "danger", onClick: onCancelSubscription, children: "Cancel pending plan change" })] }), cancelViewOpen && (_jsxs(Box, { marginTop: "var(--stack-gap-normal)", border: "1px solid", borderColor: "border.default", borderRadius: "medium", backgroundColor: "canvas.subtle", padding: "var(--stack-padding-normal)", display: "grid", gap: "var(--stack-gap-condensed)", children: [_jsx(Text, { as: "h4", sx: { fontWeight: 'bold' }, children: "Cancel pending plan change" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: "This pending plan change will be canceled immediately." }), _jsxs(Box, { display: "flex", gap: "var(--stack-gap-condensed)", flexWrap: "wrap", children: [_jsx(Button, { variant: "danger", onClick: () => void onConfirmCancelSubscription(), disabled: isCancelActionPending, leadingVisual: () => isCancelActionPending ? _jsx(Spinner, { size: "small" }) : undefined, children: isCancelActionPending
                                             ? 'Canceling pending plan change...'
-                                            : 'Confirm cancel pending plan change' }), _jsx(Button, { variant: "default", onClick: onAbortCancelView, disabled: isCancelActionPending, children: "Keep pending plan change" })] })] }))] })) : !isPaidSubscription ? (_jsxs(_Fragment, { children: [_jsxs(Box, { role: "radiogroup", sx: {
-                            display: 'grid',
-                            gap: 'var(--stack-gap-condensed)',
-                            maxHeight: '260px',
-                            overflowY: 'auto',
-                            marginBottom: 'var(--stack-gap-normal)',
-                        }, children: [plans.map(plan => (_jsx(Box, { role: "radio", "aria-labelledby": `subscription-plan-${plan.id}`, "aria-checked": subscriptionPlan?.id === plan.id, onClick: () => setSubscriptionPlan(plan), sx: {
-                                    borderStyle: 'solid',
-                                    borderRadius: 'var(--borderRadius-medium)',
-                                    borderWidth: 'var(--borderWidth-thick)',
-                                    borderColor: subscriptionPlan?.id === plan.id
-                                        ? 'var(--borderColor-accent-emphasis)'
-                                        : 'var(--borderColor-default)',
-                                    padding: 'var(--stack-padding-condensed)',
-                                    cursor: 'pointer',
-                                }, children: _jsxs(FormControl, { sx: { alignItems: 'center' }, children: [_jsx(FormControl.Label, { id: `subscription-plan-${plan.id}`, sx: { alignSelf: 'center' }, children: plan.name }), _jsxs(Text, { as: "p", children: [new Intl.NumberFormat(undefined, {
+                                            : 'Confirm cancel pending plan change' }), _jsx(Button, { variant: "default", onClick: onAbortCancelView, disabled: isCancelActionPending, children: "Keep pending plan change" })] })] }))] })) : !isPaidSubscription ? (_jsxs(_Fragment, { children: [_jsxs(Box, { role: "radiogroup", display: "grid", gap: "var(--stack-gap-condensed)", maxHeight: "260px", overflowY: "auto", marginBottom: "var(--stack-gap-normal)", children: [plans.map(plan => (_jsx(Box, { role: "radio", "aria-labelledby": `subscription-plan-${plan.id}`, "aria-checked": subscriptionPlan?.id === plan.id, onClick: () => setSubscriptionPlan(plan), borderStyle: "solid", borderRadius: "medium", borderWidth: "var(--borderWidth-thick)", borderColor: subscriptionPlan?.id === plan.id
+                                    ? 'var(--borderColor-accent-emphasis)'
+                                    : 'border.default', padding: "var(--stack-padding-condensed)", cursor: "pointer", children: _jsxs(FormControl, { sx: { alignItems: 'center' }, children: [_jsx(FormControl.Label, { id: `subscription-plan-${plan.id}`, sx: { alignSelf: 'center' }, children: plan.name }), _jsxs(Text, { as: "p", children: [new Intl.NumberFormat(undefined, {
                                                     style: 'currency',
                                                     currency: plan.currency,
                                                 }).format((plan.amount || 0) / 100), plan.interval ? ` / ${plan.interval}` : ''] }), typeof plan.included_runs === 'number' && (_jsxs(Text, { as: "p", children: [plan.included_runs, " included runs"] }))] }) }, plan.id))), plans.length === 0 && (_jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: "No monthly plans available right now." }))] }), _jsx(Button, { variant: "primary", onClick: () => void startSubscriptionCheckout(), disabled: !subscriptionPlan ||
@@ -894,26 +862,13 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
                             checkout, children: subscriptionPaymentIntentMutation.isPending
                             ? 'Preparing Team plan checkout...'
                             : 'Upgrade to Team Plan' })] })) : null] })) : null;
-    const topUpSection = (_jsxs(Box, { children: [_jsx(Text, { as: "h3", sx: sectionTitleSx, children: "Topup your wallet with credits" }), _jsx(Box, { role: "radiogroup", sx: {
-                    display: 'grid',
-                    gap: 'var(--stack-gap-normal)',
-                    gridTemplateColumns: Array(sortedTopUpItems.length)
-                        .fill('1fr')
-                        .join(' '),
-                    padding: 0,
-                    marginBottom: 'var(--stack-gap-normal)',
-                }, children: sortedTopUpItems.map(item => (_jsx(Box, { role: "radio", "aria-labelledby": `checkout-price-${item.id}`, "aria-checked": product?.id === item.id, onClick: () => {
+    const topUpSection = (_jsxs(Box, { children: [_jsx(Text, { as: "h3", sx: sectionTitleSx, children: "Topup your wallet with credits" }), _jsx(Box, { role: "radiogroup", display: "grid", gap: "var(--stack-gap-normal)", gridTemplateColumns: Array(sortedTopUpItems.length)
+                    .fill('1fr')
+                    .join(' '), padding: 0, marginBottom: "var(--stack-gap-normal)", children: sortedTopUpItems.map(item => (_jsx(Box, { role: "radio", "aria-labelledby": `checkout-price-${item.id}`, "aria-checked": product?.id === item.id, onClick: () => {
                         setProduct(item);
-                    }, sx: {
-                        borderStyle: 'solid',
-                        borderRadius: 'var(--borderRadius-medium)',
-                        borderWidth: 'var(--borderWidth-thick)',
-                        borderColor: product?.id === item.id
-                            ? 'var(--borderColor-accent-emphasis)'
-                            : 'var(--borderColor-default)',
-                        padding: 'var(--stack-padding-condensed)',
-                        cursor: 'pointer',
-                    }, children: _jsxs(FormControl, { sx: {
+                    }, borderStyle: "solid", borderRadius: "medium", borderWidth: "var(--borderWidth-thick)", borderColor: product?.id === item.id
+                        ? 'var(--borderColor-accent-emphasis)'
+                        : 'border.default', padding: "var(--stack-padding-condensed)", cursor: "pointer", children: _jsxs(FormControl, { sx: {
                             alignItems: 'center',
                         }, children: [_jsx(FormControl.Label, { id: `checkout-price-${item.id}`, sx: { alignSelf: 'center' }, children: item.name }), _jsx(Text, { as: "p", children: new Intl.NumberFormat(undefined, {
                                     style: 'currency',
@@ -923,38 +878,10 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
                 }, disabled: product === null || topUpPaymentIntentMutation.isPending || checkout, sx: { float: 'right' }, children: topUpPaymentIntentMutation.isPending
                     ? 'Preparing top-up checkout...'
                     : 'Checkout' }), topUpConfirmation ? (_jsxs(Flash, { variant: "success", sx: { mt: 3 }, children: [_jsxs(Text, { as: "p", sx: { fontWeight: 'bold' }, children: ["Top-up confirmed: +", topUpConfirmation.purchasedCredits.toLocaleString(), " credits"] }), _jsx(Text, { as: "p", children: `Wallet balance: ${topUpConfirmation.oldWalletBalance.toLocaleString()} to ${topUpConfirmation.newWalletBalance.toLocaleString()}` }), _jsx(Text, { as: "p", children: `Available credits: ${topUpConfirmation.oldAvailableCredits.toLocaleString()} to ${topUpConfirmation.newAvailableCredits.toLocaleString()}` })] })) : null] }));
-    const topCards = showStatusUsageSummary && !isPaidSubscription ? (_jsx(Box, { sx: {
-            marginBottom: 'var(--stack-gap-normal)',
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 'var(--borderRadius-medium)',
-            backgroundColor: 'canvas.default',
-            padding: 'var(--stack-padding-normal)',
-            display: 'grid',
-            gap: 'var(--stack-gap-normal)',
-        }, children: _jsx(Box, { sx: {
-                display: 'grid',
-                gap: 'var(--stack-gap-normal)',
-                gridTemplateColumns: ['1fr'],
-                alignItems: 'start',
-            }, children: _jsxs(Box, { children: [_jsx(Text, { as: "h3", sx: {
+    const topCards = showStatusUsageSummary && !isPaidSubscription ? (_jsx(Box, { marginBottom: "var(--stack-gap-normal)", border: "1px solid", borderColor: "border.default", borderRadius: "medium", backgroundColor: "canvas.default", padding: "var(--stack-padding-normal)", display: "grid", gap: "var(--stack-gap-normal)", children: _jsx(Box, { display: "grid", gap: "var(--stack-gap-normal)", gridTemplateColumns: ['1fr'], alignItems: "start", children: _jsxs(Box, { children: [_jsx(Text, { as: "h3", sx: {
                             fontWeight: 'bold',
                             marginBottom: 'var(--stack-gap-condensed)',
-                        }, children: "Plan status" }), _jsxs(Text, { as: "p", children: ["Plan: ", String(currentSubscriptionPlan)] }), isPendingSubscriptionCheckout && (_jsx(Flash, { variant: "warning", sx: { marginTop: 'var(--stack-gap-condensed)' }, children: "Upgrade pending payment. Your Team plan is not active until card payment succeeds." })), currentPlanPriceLabel !== 'N/A' && (_jsxs(Text, { as: "p", children: ["Price: ", currentPlanPriceLabel] })), displaySubscriptionStatus && (_jsxs(Text, { as: "p", sx: { marginBottom: 'var(--stack-gap-condensed)' }, children: ["Status: ", displaySubscriptionStatus] })), _jsxs(Box, { sx: {
-                            marginBottom: 'var(--stack-gap-normal)',
-                            border: '1px solid',
-                            borderColor: 'border.muted',
-                            borderRadius: 'var(--borderRadius-medium)',
-                            backgroundColor: 'canvas.subtle',
-                            padding: 'var(--stack-padding-condensed)',
-                            display: 'grid',
-                            gap: 'var(--stack-gap-condensed)',
-                        }, children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'space-between',
-                                    gap: 2,
-                                }, children: [_jsx(Text, { as: "h4", sx: { fontWeight: 'bold' }, children: "Current usage" }), _jsx(Label, { size: "small", children: String(currentSubscriptionPlan) })] }), _jsxs(Box, { children: [_jsxs(Text, { as: "p", sx: {
+                        }, children: "Plan status" }), _jsxs(Text, { as: "p", children: ["Plan: ", String(currentSubscriptionPlan)] }), isPendingSubscriptionCheckout && (_jsx(Flash, { variant: "warning", sx: { marginTop: 'var(--stack-gap-condensed)' }, children: "Upgrade pending payment. Your Team plan is not active until card payment succeeds." })), currentPlanPriceLabel !== 'N/A' && (_jsxs(Text, { as: "p", children: ["Price: ", currentPlanPriceLabel] })), displaySubscriptionStatus && (_jsxs(Text, { as: "p", sx: { marginBottom: 'var(--stack-gap-condensed)' }, children: ["Status: ", displaySubscriptionStatus] })), _jsxs(Box, { marginBottom: "var(--stack-gap-normal)", border: "1px solid", borderColor: "border.muted", borderRadius: "medium", backgroundColor: "canvas.subtle", padding: "var(--stack-padding-condensed)", display: "grid", gap: "var(--stack-gap-condensed)", children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, children: [_jsx(Text, { as: "h4", sx: { fontWeight: 'bold' }, children: "Current usage" }), _jsx(Label, { size: "small", children: String(currentSubscriptionPlan) })] }), _jsxs(Box, { children: [_jsxs(Text, { as: "p", sx: {
                                             marginBottom: 'var(--stack-gap-condensed)',
                                             color: isRunsOverQuota ? 'danger.fg' : 'fg.default',
                                             fontWeight: isRunsOverQuota ? 'bold' : 'normal',
@@ -964,25 +891,7 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
                                                     backgroundColor: 'var(--bgColor-accent-emphasis)',
                                                 }, "aria-label": `Remaining: ${runsSegments.remainingPct.toFixed(1)}%` }), _jsx(ProgressBar.Item, { progress: runsSegments.overPct, style: {
                                                     backgroundColor: 'var(--bgColor-danger-emphasis)',
-                                                }, "aria-label": `Over quota: ${runsSegments.overPct.toFixed(1)}%` })] }), _jsxs(Box, { sx: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: 3,
-                                            mt: 1,
-                                            flexWrap: 'wrap',
-                                        }, children: [_jsxs(Box, { sx: {
-                                                    display: 'inline-flex',
-                                                    alignItems: 'center',
-                                                    gap: 1,
-                                                }, children: [_jsx(DotFillIcon, { fill: "var(--bgColor-success-emphasis)" }), _jsx(Text, { sx: { fontSize: 0 }, children: "Used in quota" })] }), _jsxs(Box, { sx: {
-                                                    display: 'inline-flex',
-                                                    alignItems: 'center',
-                                                    gap: 1,
-                                                }, children: [_jsx(DotFillIcon, { fill: "var(--bgColor-accent-emphasis)" }), _jsx(Text, { sx: { fontSize: 0 }, children: "Remaining" })] }), _jsxs(Box, { sx: {
-                                                    display: 'inline-flex',
-                                                    alignItems: 'center',
-                                                    gap: 1,
-                                                }, children: [_jsx(DotFillIcon, { fill: "var(--bgColor-danger-emphasis)" }), _jsx(Text, { sx: { fontSize: 0 }, children: "Over quota" })] })] })] }), periodProgress ? (_jsxs(Box, { children: [_jsxs(Text, { as: "p", sx: { marginBottom: 'var(--stack-gap-condensed)' }, children: ["Usage period days: ", periodProgress.elapsedDays, " /", ' ', periodProgress.totalDays] }), _jsxs(ProgressBar, { barSize: "small", "aria-label": "Usage period progress", "aria-valuenow": periodProgress.elapsedPct, children: [_jsx(ProgressBar.Item, { progress: periodProgress.elapsedPct, style: {
+                                                }, "aria-label": `Over quota: ${runsSegments.overPct.toFixed(1)}%` })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 3, mt: 1, flexWrap: "wrap", children: [_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, children: [_jsx(DotFillIcon, { fill: "var(--bgColor-success-emphasis)" }), _jsx(Text, { sx: { fontSize: 0 }, children: "Used in quota" })] }), _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, children: [_jsx(DotFillIcon, { fill: "var(--bgColor-accent-emphasis)" }), _jsx(Text, { sx: { fontSize: 0 }, children: "Remaining" })] }), _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, children: [_jsx(DotFillIcon, { fill: "var(--bgColor-danger-emphasis)" }), _jsx(Text, { sx: { fontSize: 0 }, children: "Over quota" })] })] })] }), periodProgress ? (_jsxs(Box, { children: [_jsxs(Text, { as: "p", sx: { marginBottom: 'var(--stack-gap-condensed)' }, children: ["Usage period days: ", periodProgress.elapsedDays, " /", ' ', periodProgress.totalDays] }), _jsxs(ProgressBar, { barSize: "small", "aria-label": "Usage period progress", "aria-valuenow": periodProgress.elapsedPct, children: [_jsx(ProgressBar.Item, { progress: periodProgress.elapsedPct, style: {
                                                     backgroundColor: 'var(--bgColor-success-emphasis)',
                                                 }, "aria-label": `Elapsed: ${periodProgress.elapsedPct.toFixed(1)}%` }), _jsx(ProgressBar.Item, { progress: periodProgress.remainingPct, style: {
                                                     backgroundColor: 'var(--bgColor-accent-emphasis)',
@@ -993,11 +902,7 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
                                         }, children: [periodProgress.remainingDays, " day(s) remaining in current period"] })] })) : null, _jsxs(Box, { children: [_jsxs(Text, { as: "p", sx: { marginBottom: 'var(--stack-gap-condensed)' }, children: ["Wallet balance: ", displayedWalletBalance.toLocaleString()] }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted' }, children: ["Spent credits in current period:", ' ', usedCredits.toLocaleString(undefined, {
                                                 minimumFractionDigits: 2,
                                                 maximumFractionDigits: 2,
-                                            })] }), _jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: "Wallet credits are additive on renewal and top-ups." })] })] }), isCancellationScheduled && (_jsxs(Flash, { variant: "warning", sx: { marginBottom: 'var(--stack-gap-condensed)' }, children: ["Plan will switch to Free at the end of the current period on", ' ', subscriptionPeriodEndLabel, "."] })), _jsxs(Box, { sx: {
-                            display: 'flex',
-                            gap: 'var(--stack-gap-condensed)',
-                            flexWrap: 'wrap',
-                        }, children: [subscriptionPortalUrl && (_jsx(Button, { variant: "default", onClick: () => openPortal(subscriptionPortalUrl), children: "Open Stripe billing portal" })), _jsx(Button, { variant: "default", onClick: () => void onRefreshSubscriptionStatus(), disabled: isSubscriptionStatusRefreshing, children: isSubscriptionStatusRefreshing
+                                            })] }), _jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: "Wallet credits are additive on renewal and top-ups." })] })] }), isCancellationScheduled && (_jsxs(Flash, { variant: "warning", sx: { marginBottom: 'var(--stack-gap-condensed)' }, children: ["Plan will switch to Free at the end of the current period on", ' ', subscriptionPeriodEndLabel, "."] })), _jsxs(Box, { display: "flex", gap: "var(--stack-gap-condensed)", flexWrap: "wrap", children: [subscriptionPortalUrl && (_jsx(Button, { variant: "default", onClick: () => openPortal(subscriptionPortalUrl), children: "Open Stripe billing portal" })), _jsx(Button, { variant: "default", onClick: () => void onRefreshSubscriptionStatus(), disabled: isSubscriptionStatusRefreshing, children: isSubscriptionStatusRefreshing
                                     ? 'Refreshing status...'
                                     : 'Refresh status' }), canCancelSubscription && !cancelViewOpen && (_jsx(Button, { variant: "danger", onClick: onCancelSubscription, children: "Downgrade to Free Plan" })), isIncompleteSubscription && !cancelViewOpen && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", onClick: startPendingSubscriptionCheckout, disabled: subscriptionPaymentIntentMutation.isPending ||
                                             checkout ||
@@ -1009,24 +914,11 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
                                     ? 'Your payment is pending. Open the in-app cancel view below to cancel this plan change or continue with payment.'
                                     : isPaidSubscription
                                         ? 'Keep your plan active. You can top-up credits any time.'
-                                        : 'Top-up credits are available on Free and Team plans.'] }), cancelViewOpen && (_jsxs(Box, { sx: {
-                            marginTop: 'var(--stack-gap-normal)',
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 'var(--borderRadius-medium)',
-                            backgroundColor: 'canvas.subtle',
-                            padding: 'var(--stack-padding-normal)',
-                            display: 'grid',
-                            gap: 'var(--stack-gap-condensed)',
-                        }, children: [_jsx(Text, { as: "h4", sx: { fontWeight: 'bold' }, children: isIncompleteSubscription
+                                        : 'Top-up credits are available on Free and Team plans.'] }), cancelViewOpen && (_jsxs(Box, { marginTop: "var(--stack-gap-normal)", border: "1px solid", borderColor: "border.default", borderRadius: "medium", backgroundColor: "canvas.subtle", padding: "var(--stack-padding-normal)", display: "grid", gap: "var(--stack-gap-condensed)", children: [_jsx(Text, { as: "h4", sx: { fontWeight: 'bold' }, children: isIncompleteSubscription
                                     ? 'Cancel pending plan change'
                                     : 'Downgrade to Free Plan' }), _jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: isIncompleteSubscription
                                     ? 'This pending plan change will be canceled immediately.'
-                                    : 'Your plan will switch at the end of the current usage period.' }), _jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    gap: 'var(--stack-gap-condensed)',
-                                    flexWrap: 'wrap',
-                                }, children: [_jsx(Button, { variant: "danger", onClick: () => void onConfirmCancelSubscription(), disabled: isCancelActionPending, leadingVisual: () => isCancelActionPending ? (_jsx(Spinner, { size: "small" })) : undefined, children: isCancelActionPending
+                                    : 'Your plan will switch at the end of the current usage period.' }), _jsxs(Box, { display: "flex", gap: "var(--stack-gap-condensed)", flexWrap: "wrap", children: [_jsx(Button, { variant: "danger", onClick: () => void onConfirmCancelSubscription(), disabled: isCancelActionPending, leadingVisual: () => isCancelActionPending ? (_jsx(Spinner, { size: "small" })) : undefined, children: isCancelActionPending
                                             ? isIncompleteSubscription
                                                 ? 'Canceling pending plan change...'
                                                 : 'Waiting for confirmation...'
@@ -1035,47 +927,16 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
                                                 : 'Confirm downgrade' }), _jsx(Button, { variant: "default", onClick: onAbortCancelView, disabled: isCancelActionPending, children: isIncompleteSubscription
                                             ? 'Keep pending plan change'
                                             : 'Keep current plan' })] })] }))] }) }) })) : null;
-    const currentPlanSection = isPaidSubscription ? (_jsx(Box, { sx: {
-            borderRight: ['none', '1px solid'],
-            borderColor: 'border.muted',
-            paddingRight: ['0', 'var(--stack-gap-normal)'],
-            alignSelf: 'stretch',
-        }, children: _jsxs(Box, { sx: {
-                borderTop: 'none',
-                paddingTop: 0,
-                display: 'grid',
-                gap: 'var(--stack-gap-condensed)',
-            }, children: [_jsx(Text, { as: "h3", sx: sectionTitleSx, children: "Current plan" }), _jsx(Text, { as: "h4", sx: { fontSize: 3, fontWeight: 'bold' }, children: String(currentSubscriptionPlan) }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted' }, children: ["You are currently on ", String(currentSubscriptionPlan), "."] }), currentPlanPriceLabel !== 'N/A' && (_jsx(Text, { as: "p", sx: { fontWeight: 'bold', fontSize: 2 }, children: currentPlanPriceLabel })), displaySubscriptionStatus && (_jsx(Box, { sx: { display: 'inline-flex', alignItems: 'center' }, children: _jsx(Label, { variant: "success", children: displaySubscriptionStatus }) })), isCancellationScheduled ? (_jsxs(Flash, { variant: "warning", sx: { marginTop: 'var(--stack-gap-condensed)' }, children: ["Your downgrade to Free Plan is scheduled at period end on", ' ', subscriptionPeriodEndLabel, "."] })) : null, !isCancellationScheduled || showResumeAction ? (_jsx(Text, { as: "p", sx: { color: 'fg.muted', marginTop: 'var(--stack-gap-condensed)' }, children: showResumeAction
+    const currentPlanSection = isPaidSubscription ? (_jsx(Box, { borderRight: ['none', '1px solid'], borderColor: "border.muted", paddingRight: ['0', 'var(--stack-gap-normal)'], alignSelf: "stretch", children: _jsxs(Box, { borderTop: "none", paddingTop: 0, display: "grid", gap: "var(--stack-gap-condensed)", children: [_jsx(Text, { as: "h3", sx: sectionTitleSx, children: "Current plan" }), _jsx(Text, { as: "h4", sx: { fontSize: 3, fontWeight: 'bold' }, children: String(currentSubscriptionPlan) }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted' }, children: ["You are currently on ", String(currentSubscriptionPlan), "."] }), currentPlanPriceLabel !== 'N/A' && (_jsx(Text, { as: "p", sx: { fontWeight: 'bold', fontSize: 2 }, children: currentPlanPriceLabel })), displaySubscriptionStatus && (_jsx(Box, { display: "inline-flex", alignItems: "center", children: _jsx(Label, { variant: "success", children: displaySubscriptionStatus }) })), isCancellationScheduled ? (_jsxs(Flash, { variant: "warning", sx: { marginTop: 'var(--stack-gap-condensed)' }, children: ["Your downgrade to Free Plan is scheduled at period end on", ' ', subscriptionPeriodEndLabel, "."] })) : null, !isCancellationScheduled || showResumeAction ? (_jsx(Text, { as: "p", sx: { color: 'fg.muted', marginTop: 'var(--stack-gap-condensed)' }, children: showResumeAction
                         ? 'Possible action: Resume Team Plan.'
-                        : 'Possible action: Downgrade to Free Plan.' })) : null, _jsxs(Box, { sx: {
-                        display: 'flex',
-                        gap: 'var(--stack-gap-condensed)',
-                        flexWrap: 'wrap',
-                    }, children: [canCancelSubscription && !cancelViewOpen && (_jsx(Button, { variant: "danger", onClick: onCancelSubscription, children: "Downgrade to Free Plan" })), showResumeAction && (_jsx(Button, { variant: "primary", onClick: () => void onResumeSubscription(), disabled: isResumeActionPending, leadingVisual: () => isResumeActionPending ? _jsx(Spinner, { size: "small" }) : undefined, children: isResumeActionPending ? 'Resuming...' : 'Resume plan' }))] }), cancelViewOpen && (_jsxs(Box, { sx: {
-                        marginTop: 'var(--stack-gap-normal)',
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 'var(--borderRadius-medium)',
-                        backgroundColor: 'canvas.subtle',
-                        padding: 'var(--stack-padding-normal)',
-                        display: 'grid',
-                        gap: 'var(--stack-gap-condensed)',
-                    }, children: [_jsx(Text, { as: "h4", sx: { fontWeight: 'bold' }, children: "Downgrade to Free Plan" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: "Your plan will switch at the end of the current usage period." }), _jsxs(Box, { sx: {
-                                display: 'flex',
-                                gap: 'var(--stack-gap-condensed)',
-                                flexWrap: 'wrap',
-                            }, children: [_jsx(Button, { variant: "danger", onClick: () => void onConfirmCancelSubscription(), disabled: isCancelActionPending, leadingVisual: () => isCancelActionPending ? _jsx(Spinner, { size: "small" }) : undefined, children: isCancelActionPending
+                        : 'Possible action: Downgrade to Free Plan.' })) : null, _jsxs(Box, { display: "flex", gap: "var(--stack-gap-condensed)", flexWrap: "wrap", children: [canCancelSubscription && !cancelViewOpen && (_jsx(Button, { variant: "danger", onClick: onCancelSubscription, children: "Downgrade to Free Plan" })), showResumeAction && (_jsx(Button, { variant: "primary", onClick: () => void onResumeSubscription(), disabled: isResumeActionPending, leadingVisual: () => isResumeActionPending ? _jsx(Spinner, { size: "small" }) : undefined, children: isResumeActionPending ? 'Resuming...' : 'Resume plan' }))] }), cancelViewOpen && (_jsxs(Box, { marginTop: "var(--stack-gap-normal)", border: "1px solid", borderColor: "border.default", borderRadius: "medium", backgroundColor: "canvas.subtle", padding: "var(--stack-padding-normal)", display: "grid", gap: "var(--stack-gap-condensed)", children: [_jsx(Text, { as: "h4", sx: { fontWeight: 'bold' }, children: "Downgrade to Free Plan" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted' }, children: "Your plan will switch at the end of the current usage period." }), _jsxs(Box, { display: "flex", gap: "var(--stack-gap-condensed)", flexWrap: "wrap", children: [_jsx(Button, { variant: "danger", onClick: () => void onConfirmCancelSubscription(), disabled: isCancelActionPending, leadingVisual: () => isCancelActionPending ? _jsx(Spinner, { size: "small" }) : undefined, children: isCancelActionPending
                                         ? 'Waiting for confirmation...'
                                         : 'Confirm downgrade' }), _jsx(Button, { variant: "default", onClick: onAbortCancelView, disabled: isCancelActionPending, children: "Keep current plan" })] })] }))] }) })) : null;
     let view;
     // While the Stripe payment form is shown, disable interaction with the
     // status / plan picker cards behind it so the only available action is the
     // "Cancel" button next to the form.
-    const disabledTopCards = topCards ? (_jsx(Box, { "aria-disabled": "true", sx: {
-            pointerEvents: 'none',
-            opacity: 0.5,
-            userSelect: 'none',
-        }, children: topCards })) : null;
+    const disabledTopCards = topCards ? (_jsx(Box, { "aria-disabled": "true", pointerEvents: "none", opacity: 0.5, userSelect: "none", children: topCards })) : null;
     if (checkout) {
         if (stripe && paymentOptions && paymentClientSecret) {
             view = createElement(Box, { id: 'checkout', sx: { flex: '1 1 auto', display: 'grid', gap: 3 } }, createElement(Box, {
@@ -1124,36 +985,14 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
             }))), disabledTopCards);
         }
         else {
-            view = (_jsxs(Box, { sx: { flex: '1 1 auto', display: 'grid', gap: 3 }, children: [_jsxs(Box, { sx: {
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 'var(--borderRadius-medium)',
-                            backgroundColor: 'canvas.default',
-                            padding: 'var(--stack-padding-normal)',
-                            display: 'flex',
-                            gap: 'var(--stack-gap-normal)',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            flexWrap: 'wrap',
-                        }, children: [_jsx(Text, { as: "p", children: "Preparing Stripe checkout\u2026" }), _jsx(Button, { variant: "default", onClick: cancelStripeCheckout, children: "Cancel" })] }), disabledTopCards] }));
+            view = (_jsxs(Box, { flex: "1 1 auto", display: "grid", gap: 3, children: [_jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: "medium", backgroundColor: "canvas.default", padding: "var(--stack-padding-normal)", display: "flex", gap: "var(--stack-gap-normal)", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", children: [_jsx(Text, { as: "p", children: "Preparing Stripe checkout\u2026" }), _jsx(Button, { variant: "default", onClick: cancelStripeCheckout, children: "Cancel" })] }), disabledTopCards] }));
         }
     }
     else if (isReturningFromCheckout) {
-        view = (_jsxs(Box, { sx: { flex: '1 1 auto', display: 'grid', gap: 3 }, children: [_jsxs(Box, { sx: {
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 'var(--borderRadius-medium)',
-                        backgroundColor: 'canvas.default',
-                        padding: 'var(--stack-padding-normal)',
-                        display: 'flex',
-                        gap: 'var(--stack-gap-normal)',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        flexWrap: 'wrap',
-                    }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { as: "p", children: "Refreshing plan status\u2026" })] }), disabledTopCards] }));
+        view = (_jsxs(Box, { flex: "1 1 auto", display: "grid", gap: 3, children: [_jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: "medium", backgroundColor: "canvas.default", padding: "var(--stack-padding-normal)", display: "flex", gap: "var(--stack-gap-normal)", alignItems: "center", justifyContent: "center", flexWrap: "wrap", children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { as: "p", children: "Refreshing plan status\u2026" })] }), disabledTopCards] }));
     }
     else if (isTopUpPricesPending) {
-        view = (_jsx(Box, { sx: { minHeight: '40px', display: 'grid', placeItems: 'center' }, children: _jsx(Spinner, {}) }));
+        view = (_jsx(Box, { minHeight: "40px", display: "grid", placeItems: "center", children: _jsx(Spinner, {}) }));
     }
     else if (isTopUpPricesError) {
         view = (_jsxs(Box, { children: [topCards, _jsx(Flash, { variant: "danger", children: topUpPricesError instanceof Error
@@ -1161,38 +1000,15 @@ export function StripeCheckout({ checkoutPortal, appearance, accountUid, showSta
                         : 'Unable to fetch the available products. Please try again later.' })] }));
     }
     else {
-        view = items.length ? (_jsxs(Box, { sx: { flex: '1 1 auto' }, onKeyDown: event => {
+        view = items.length ? (_jsxs(Box, { flex: "1 1 auto", onKeyDown: event => {
                 if (product && event.key === 'Enter') {
                     void startCheckout();
                 }
-            }, children: [_jsxs(Box, { sx: {
-                        marginTop: 'var(--stack-gap-normal)',
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 'var(--borderRadius-medium)',
-                        backgroundColor: 'canvas.default',
-                        padding: 'var(--stack-padding-normal)',
-                        display: 'grid',
-                        gap: 'var(--stack-gap-normal)',
-                        gridTemplateColumns: shouldShowMonthlySubscriptionSection || currentPlanSection
-                            ? ['1fr', 'minmax(0, 1fr) minmax(0, 1fr)']
-                            : ['1fr'],
-                        alignItems: 'stretch',
-                    }, children: [shouldShowMonthlySubscriptionSection ? (_jsx(Box, { sx: {
-                                borderRight: ['none', '1px solid'],
-                                borderColor: 'border.muted',
-                                paddingRight: ['0', 'var(--stack-gap-normal)'],
-                                alignSelf: 'stretch',
-                            }, children: monthlySubscriptionSection })) : null, currentPlanSection, _jsx(Box, { sx: {
-                                paddingLeft: shouldShowMonthlySubscriptionSection || currentPlanSection
-                                    ? ['0', 'var(--stack-gap-normal)']
-                                    : 0,
-                            }, children: topUpSection }), isStripeTestConfiguration ? (_jsx(Box, { sx: {
-                                gridColumn: ['1', '1 / -1'],
-                                borderTop: '1px solid',
-                                borderColor: 'border.muted',
-                                paddingTop: 'var(--stack-gap-normal)',
-                            }, children: _jsx(Label, { variant: "attention", children: "Stripe test configuration" }) })) : null] }), resumeConfirmationMessage && (_jsx(Flash, { variant: "success", sx: { mt: 3 }, children: resumeConfirmationMessage })), paymentMessage && !resumeConfirmationMessage && (_jsx(Flash, { variant: "success", sx: { mt: 3 }, children: paymentMessage })), topCards] })) : (_jsxs(Box, { children: [resumeConfirmationMessage && (_jsx(Flash, { variant: "success", sx: { mt: 3 }, children: resumeConfirmationMessage })), paymentMessage && !resumeConfirmationMessage && (_jsx(Flash, { variant: "success", sx: { mt: 3 }, children: paymentMessage })), topCards, _jsx(Flash, { variant: "default", children: "No products are available yet." })] }));
+            }, children: [_jsxs(Box, { marginTop: "var(--stack-gap-normal)", border: "1px solid", borderColor: "border.default", borderRadius: "medium", backgroundColor: "canvas.default", padding: "var(--stack-padding-normal)", display: "grid", gap: "var(--stack-gap-normal)", gridTemplateColumns: shouldShowMonthlySubscriptionSection || currentPlanSection
+                        ? ['1fr', 'minmax(0, 1fr) minmax(0, 1fr)']
+                        : ['1fr'], alignItems: "stretch", children: [shouldShowMonthlySubscriptionSection ? (_jsx(Box, { borderRight: ['none', '1px solid'], borderColor: "border.muted", paddingRight: ['0', 'var(--stack-gap-normal)'], alignSelf: "stretch", children: monthlySubscriptionSection })) : null, currentPlanSection, _jsx(Box, { paddingLeft: shouldShowMonthlySubscriptionSection || currentPlanSection
+                                ? ['0', 'var(--stack-gap-normal)']
+                                : 0, children: topUpSection }), isStripeTestConfiguration ? (_jsx(Box, { gridColumn: ['1', '1 / -1'], borderTop: "1px solid", borderColor: "border.muted", paddingTop: "var(--stack-gap-normal)", children: _jsx(Label, { variant: "attention", children: "Stripe test configuration" }) })) : null] }), resumeConfirmationMessage && (_jsx(Flash, { variant: "success", sx: { mt: 3 }, children: resumeConfirmationMessage })), paymentMessage && !resumeConfirmationMessage && (_jsx(Flash, { variant: "success", sx: { mt: 3 }, children: paymentMessage })), topCards] })) : (_jsxs(Box, { children: [resumeConfirmationMessage && (_jsx(Flash, { variant: "success", sx: { mt: 3 }, children: resumeConfirmationMessage })), paymentMessage && !resumeConfirmationMessage && (_jsx(Flash, { variant: "success", sx: { mt: 3 }, children: paymentMessage })), topCards, _jsx(Flash, { variant: "default", children: "No products are available yet." })] }));
     }
     return view;
 }

package/lib/components/collaboration/LiveEditorCollaborators.d.ts

@@ -23,12 +23,11 @@ export type LiveCollaborator = {
     id: string;
     name: string;
     avatarUrl?: string;
-    avatarIcon?: string;
     /**
-     * A literal emoji, for a face this platform draws rather than a person's
-     * own — an agent's — checked before `avatarUrl`/`avatarIcon`.
+     * The chosen avatar, as it is kept: `emoji:…` or
+     * `@datalayer/icons-react:…`; an agent's face is its emoji (`emoji:…`).
      */
-    avatarEmoji?: string;
+    avatar?: string;
     /** Cursor color of the presence, worn by the initials disc. */
     color?: string;
     /** The platform uid, when the face is a real account — for its profile. */

package/lib/components/collaboration/LiveEditorCollaborators.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { AvatarStack } from '@primer/react';
+import { emojiAvatar } from '../avatars/avatarChoice.js';
 import { PrincipalAvatar } from '../principal/PrincipalAvatar.js';
 import { PrincipalHoverCard } from '../principal/PrincipalHoverCard.js';
 /** The `user` field of an awareness state, in its several spellings. */
@@ -36,8 +37,10 @@ function collaboratorOfState(clientId, state) {
         id: String(uid ?? user.username ?? clientId),
         name,
         avatarUrl: user.avatar_url || user.avatarUrl || undefined,
-        avatarIcon: user.avatar_icon_s || user.avatarIcon || undefined,
-        avatarEmoji: user.avatar_emoji_s || user.avatarEmoji || undefined,
+        // A person's chosen avatar; an agent announces its face as an emoji.
+        avatar: user.avatar_icon_s ||
+            user.avatarIcon ||
+            (user.avatar_emoji_s ? emojiAvatar(user.avatar_emoji_s) : undefined),
         color: user.color || undefined,
         uid: uid ? String(uid) : undefined,
         handle: user.handle || username || undefined,
@@ -58,8 +61,7 @@ function mergeCollaborators(known, incoming) {
         uid: known.uid || incoming.uid,
         handle: known.handle || incoming.handle,
         avatarUrl: known.avatarUrl || incoming.avatarUrl,
-        avatarIcon: known.avatarIcon || incoming.avatarIcon,
-        avatarEmoji: known.avatarEmoji || incoming.avatarEmoji,
+        avatar: known.avatar || incoming.avatar,
         color: known.color || incoming.color,
     };
 }
@@ -159,6 +161,6 @@ export function LiveEditorCollaborators(props) {
         // person arrives now under their uid, now under a client id, and a
         // key that followed that would unmount the hover card mid-open and
         // leak its overlay. Their identity, not their arrival, names them.
-        , { kind: "personal", uid: face.uid, handle: face.handle, displayName: face.name, name: face.name, avatarUrl: face.avatarUrl, avatarIcon: face.avatarIcon, avatarEmoji: face.avatarEmoji, onNavigate: onNavigate, children: _jsx(PrincipalAvatar, { kind: "personal", size: size, alt: face.name, avatarUrl: face.avatarUrl, avatarIcon: face.avatarIcon, avatarEmoji: face.avatarEmoji, square: false }) }, face.uid || face.handle || face.name.trim().toLowerCase()))) }));
+        , { kind: "personal", uid: face.uid, handle: face.handle, displayName: face.name, name: face.name, avatarUrl: face.avatarUrl, avatar: face.avatar, onNavigate: onNavigate, children: _jsx(PrincipalAvatar, { kind: "personal", size: size, alt: face.name, avatarUrl: face.avatarUrl, avatar: face.avatar, square: false }) }, face.uid || face.handle || face.name.trim().toLowerCase()))) }));
 }
 export default LiveEditorCollaborators;

package/lib/components/contents/ContentSourceCard.js

@@ -7,17 +7,8 @@ import { Label, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { contentSourceEffectiveRole, contentSourceLabel, } from '../../models/contents/index.js';
 /** Compact, host-neutral catalog row shared by Datalayer clients. */
-export const ContentSourceCard = ({ item, onOpen }) => (_jsx(Box, { as: "li", onClick: () => onOpen?.(item.source.uid), sx: {
-        p: 3,
+export const ContentSourceCard = ({ item, onOpen }) => (_jsx(Box, { as: "li", onClick: () => onOpen?.(item.source.uid), p: 3, borderColor: "border.muted", cursor: onOpen ? 'pointer' : 'default', hover: onOpen ? { bg: 'canvas.subtle' } : undefined, sx: {
         borderBottom: '1px solid',
-        borderColor: 'border.muted',
-        cursor: onOpen ? 'pointer' : 'default',
         ':last-child': { borderBottom: 0 },
-        ':hover': onOpen ? { bg: 'canvas.subtle' } : undefined,
-    }, children: _jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', gap: 3 }, children: [_jsxs(Box, { sx: { minWidth: 0 }, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: item.source.name }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 0, m: 0, mt: 1 }, children: item.source.description || contentSourceLabel(item.source.kind) }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle', fontSize: 0, m: 0, mt: 1 }, children: item.source.uid })] }), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    flexShrink: 0,
-                }, children: [_jsx(Label, { children: contentSourceLabel(item.source.kind) }), _jsx(Label, { variant: item.source.status === 'ready' ? 'success' : 'secondary', children: item.source.status }), _jsx(Label, { variant: "accent", children: contentSourceEffectiveRole(item) })] })] }) }));
+    }, children: _jsxs(Box, { display: "flex", justifyContent: "space-between", gap: 3, children: [_jsxs(Box, { minWidth: 0, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: item.source.name }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 0, m: 0, mt: 1 }, children: item.source.description || contentSourceLabel(item.source.kind) }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle', fontSize: 0, m: 0, mt: 1 }, children: item.source.uid })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexShrink: 0, children: [_jsx(Label, { children: contentSourceLabel(item.source.kind) }), _jsx(Label, { variant: item.source.status === 'ready' ? 'success' : 'secondary', children: item.source.status }), _jsx(Label, { variant: "accent", children: contentSourceEffectiveRole(item) })] })] }) }));
 export default ContentSourceCard;

package/lib/components/contents/HomeFolderObjectsBrowser.d.ts

@@ -6,5 +6,5 @@ export type HomeFolderObjectsBrowserProps = {
     selectionDisabled?: boolean;
 };
 /** Browser for the server-managed Home Folder metadata and version history. */
-export declare const HomeFolderObjectsBrowser: ({ prefix, selectedObjectUids, onSelectedObjectsChange, selectionDisabled }: HomeFolderObjectsBrowserProps) => import("react").JSX.Element;
+export declare const HomeFolderObjectsBrowser: ({ prefix, selectedObjectUids, onSelectedObjectsChange, selectionDisabled, }: HomeFolderObjectsBrowserProps) => import("react").JSX.Element;
 export default HomeFolderObjectsBrowser;

package/lib/components/contents/HomeFolderObjectsBrowser.js

@@ -24,7 +24,7 @@ const mutationKey = (action, uid) => {
     return `${action}:${uid}:${random}`;
 };
 /** Browser for the server-managed Home Folder metadata and version history. */
-export const HomeFolderObjectsBrowser = ({ prefix, selectedObjectUids = [], onSelectedObjectsChange, selectionDisabled = false }) => {
+export const HomeFolderObjectsBrowser = ({ prefix, selectedObjectUids = [], onSelectedObjectsChange, selectionDisabled = false, }) => {
     const objects = useHomeFolderObjects({ prefix, limit: 100 });
     const [selected, setSelected] = useState();
     const [uploadProgress, setUploadProgress] = useState();
@@ -40,7 +40,9 @@ export const HomeFolderObjectsBrowser = ({ prefix, selectedObjectUids = [], onSe
         if (!onSelectedObjectsChange)
             return;
         const selectedUids = new Set(selectedObjectUids);
-        selectedUids.has(object.uid) ? selectedUids.delete(object.uid) : selectedUids.add(object.uid);
+        selectedUids.has(object.uid)
+            ? selectedUids.delete(object.uid)
+            : selectedUids.add(object.uid);
         onSelectedObjectsChange((objects.data?.items ?? []).filter(item => selectedUids.has(item.uid)));
     };
     const onUpload = (file, overwrite = 'reject') => {
@@ -86,33 +88,19 @@ export const HomeFolderObjectsBrowser = ({ prefix, selectedObjectUids = [], onSe
         });
     };
     if (objects.isPending) {
-        return (_jsx(Box, { sx: { p: 4, display: 'flex', justifyContent: 'center' }, children: _jsx(Spinner, {}) }));
+        return (_jsx(Box, { p: 4, display: "flex", justifyContent: "center", children: _jsx(Spinner, {}) }));
     }
     if (objects.isError) {
-        return (_jsxs(Box, { sx: { p: 3, border: '1px solid', borderColor: 'danger.muted' }, children: [_jsx(Text, { sx: { color: 'danger.fg' }, children: objects.error instanceof Error
+        return (_jsxs(Box, { p: 3, border: "1px solid", borderColor: "danger.muted", children: [_jsx(Text, { sx: { color: 'danger.fg' }, children: objects.error instanceof Error
                         ? objects.error.message
                         : 'The Home Folder could not be loaded.' }), _jsx(Button, { sx: { ml: 2 }, onClick: () => objects.refetch(), children: "Retry" })] }));
     }
-    return (_jsxs(Box, { children: [_jsxs(Box, { sx: {
-                    mb: 3,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    gap: 3,
-                }, children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: prefix ? `home-folder:///${prefix}` : 'home-folder:///' }), _jsxs(_Fragment, { children: [_jsx("input", { ref: fileInput, type: "file", hidden: true, onChange: event => {
+    return (_jsxs(Box, { children: [_jsxs(Box, { mb: 3, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 3, children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: prefix ? `home-folder:///${prefix}` : 'home-folder:///' }), _jsxs(_Fragment, { children: [_jsx("input", { ref: fileInput, type: "file", hidden: true, onChange: event => {
                                     onUpload(event.target.files?.[0]);
                                     event.target.value = '';
-                                } }), _jsx(Button, { leadingVisual: UploadIcon, disabled: uploadObject.isPending, onClick: () => fileInput.current?.click(), children: "Upload" })] })] }), uploadProgress && (_jsxs(Box, { sx: { mb: 3 }, children: [_jsx(ProgressBar, { progress: uploadProgress.total
+                                } }), _jsx(Button, { leadingVisual: UploadIcon, disabled: uploadObject.isPending, onClick: () => fileInput.current?.click(), children: "Upload" })] })] }), uploadProgress && (_jsxs(Box, { mb: 3, children: [_jsx(ProgressBar, { progress: uploadProgress.total
                             ? (uploadProgress.uploaded / uploadProgress.total) * 100
-                            : 100, "aria-label": "Upload progress" }), _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: [formatBytes(uploadProgress.uploaded), " of", ' ', formatBytes(uploadProgress.total)] })] })), uploadObject.isError && (_jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Text, { as: "p", sx: { color: 'danger.fg', mb: 2 }, children: uploadObject.error.message }), failedUpload && (_jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", onClick: () => onUpload(failedUpload), children: "Retry" }), _jsx(Button, { size: "small", variant: "primary", onClick: () => onUpload(failedUpload, 'new-version'), children: "Upload as new version" })] }))] })), (objects.data?.items.length ?? 0) === 0 ? (_jsxs(Box, { sx: {
-                    p: 4,
-                    textAlign: 'center',
-                    border: '1px dashed',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                }, children: [_jsx(FileIcon, { size: 24 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, mt: 2 }, children: "Your Home Folder is empty" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', mb: 0 }, children: "Uploaded and transferred files will appear here." })] })) : (_jsxs(Box, { as: "table", sx: {
-                    width: '100%',
-                    borderCollapse: 'collapse',
+                            : 100, "aria-label": "Upload progress" }), _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: [formatBytes(uploadProgress.uploaded), " of", ' ', formatBytes(uploadProgress.total)] })] })), uploadObject.isError && (_jsxs(Box, { mb: 3, children: [_jsx(Text, { as: "p", sx: { color: 'danger.fg', mb: 2 }, children: uploadObject.error.message }), failedUpload && (_jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Button, { size: "small", onClick: () => onUpload(failedUpload), children: "Retry" }), _jsx(Button, { size: "small", variant: "primary", onClick: () => onUpload(failedUpload, 'new-version'), children: "Upload as new version" })] }))] })), (objects.data?.items.length ?? 0) === 0 ? (_jsxs(Box, { p: 4, textAlign: "center", border: "1px dashed", borderColor: "border.default", borderRadius: 2, children: [_jsx(FileIcon, { size: 24 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, mt: 2 }, children: "Your Home Folder is empty" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', mb: 0 }, children: "Uploaded and transferred files will appear here." })] })) : (_jsxs(Box, { as: "table", width: "100%", borderCollapse: "collapse", sx: {
                     'th, td': {
                         px: 3,
                         py: 2,
@@ -121,22 +109,10 @@ export const HomeFolderObjectsBrowser = ({ prefix, selectedObjectUids = [], onSe
                         borderColor: 'border.muted',
                     },
                     th: { color: 'fg.muted', fontSize: 0, fontWeight: 600 },
-                }, children: [_jsx("thead", { children: _jsxs("tr", { children: [selectable && _jsx("th", { "aria-label": "Select" }), _jsx("th", { children: "Path" }), _jsx("th", { children: "Size" }), _jsx("th", { children: "Updated" }), _jsx("th", { "aria-label": "Actions" })] }) }), _jsx("tbody", { children: objects.data?.items.map(object => (_jsxs("tr", { children: [selectable && (_jsx("td", { children: _jsx(Checkbox, { "aria-label": `Select ${object.path}`, checked: selectedObjectUids.includes(object.uid), disabled: selectionDisabled || !object.currentVersionUid, onChange: () => toggleSelection(object) }) })), _jsx("td", { children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(FileIcon, {}), _jsx(Text, { sx: { fontFamily: 'mono' }, children: object.path })] }) }), _jsx("td", { children: formatBytes(object.size) }), _jsx("td", { children: new Date(object.updatedAt).toLocaleString() }), _jsx("td", { children: _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 2 }, children: [_jsx(Button, { size: "small", leadingVisual: HistoryIcon, onClick: () => setSelected(object), children: "Versions" }), _jsx(Button, { size: "small", leadingVisual: DownloadIcon, disabled: downloadObject.isPending, onClick: () => onDownload(object), children: "Download" }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: TrashIcon, disabled: deleteObject.isPending, onClick: () => onDelete(object), children: "Delete" })] }) })] }, object.uid))) })] })), selected && (_jsxs(Box, { sx: {
-                    mt: 3,
-                    p: 3,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                }, children: [_jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', gap: 2 }, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2 }, children: ["Versions of ", selected.path] }), _jsx(Button, { size: "small", onClick: () => setSelected(undefined), children: "Close" })] }), versions.isPending ? (_jsx(Spinner, { size: "small" })) : versions.isError ? (_jsx(Text, { sx: { color: 'danger.fg' }, children: "Version history could not be loaded." })) : (_jsx(Box, { as: "ul", sx: { listStyle: 'none', p: 0, mb: 0 }, children: versions.data?.items.map(version => {
+                }, children: [_jsx("thead", { children: _jsxs("tr", { children: [selectable && _jsx("th", { "aria-label": "Select" }), _jsx("th", { children: "Path" }), _jsx("th", { children: "Size" }), _jsx("th", { children: "Updated" }), _jsx("th", { "aria-label": "Actions" })] }) }), _jsx("tbody", { children: objects.data?.items.map(object => (_jsxs("tr", { children: [selectable && (_jsx("td", { children: _jsx(Checkbox, { "aria-label": `Select ${object.path}`, checked: selectedObjectUids.includes(object.uid), disabled: selectionDisabled || !object.currentVersionUid, onChange: () => toggleSelection(object) }) })), _jsx("td", { children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(FileIcon, {}), _jsx(Text, { sx: { fontFamily: 'mono' }, children: object.path })] }) }), _jsx("td", { children: formatBytes(object.size) }), _jsx("td", { children: new Date(object.updatedAt).toLocaleString() }), _jsx("td", { children: _jsxs(Box, { display: "flex", justifyContent: "flex-end", gap: 2, children: [_jsx(Button, { size: "small", leadingVisual: HistoryIcon, onClick: () => setSelected(object), children: "Versions" }), _jsx(Button, { size: "small", leadingVisual: DownloadIcon, disabled: downloadObject.isPending, onClick: () => onDownload(object), children: "Download" }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: TrashIcon, disabled: deleteObject.isPending, onClick: () => onDelete(object), children: "Delete" })] }) })] }, object.uid))) })] })), selected && (_jsxs(Box, { mt: 3, p: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", gap: 2, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2 }, children: ["Versions of ", selected.path] }), _jsx(Button, { size: "small", onClick: () => setSelected(undefined), children: "Close" })] }), versions.isPending ? (_jsx(Spinner, { size: "small" })) : versions.isError ? (_jsx(Text, { sx: { color: 'danger.fg' }, children: "Version history could not be loaded." })) : (_jsx(Box, { as: "ul", listStyle: "none", p: 0, mb: 0, children: versions.data?.items.map(version => {
                             const isCurrent = version.uid === selected.currentVersionUid;
-                            return (_jsxs(Box, { as: "li", sx: {
-                                    py: 2,
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'space-between',
-                                    gap: 3,
+                            return (_jsxs(Box, { as: "li", py: 2, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 3, borderColor: "border.muted", sx: {
                                     borderBottom: '1px solid',
-                                    borderColor: 'border.muted',
                                     ':last-child': { borderBottom: 0 },
                                 }, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: version.uid }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', m: 0, fontSize: 0 }, children: [new Date(version.createdAt).toLocaleString(), " \u00B7", ' ', formatBytes(version.size)] })] }), isCurrent ? (_jsx(Label, { variant: "success", children: "Current" })) : version.deleted ? (_jsx(Label, { children: "Deletion marker" })) : (_jsx(Button, { size: "small", leadingVisual: SyncIcon, disabled: restoreObject.isPending, onClick: () => restoreObject.mutate({
                                             objectUid: selected.uid,

package/lib/components/display/CenteredSpinner.js

@@ -6,11 +6,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Spinner, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 export const CenteredSpinner = ({ message, size = 'medium', }) => {
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            minHeight: '40px',
-        }, children: [_jsx(Spinner, { size: size }), message && _jsx(Text, { sx: { marginLeft: 3 }, children: message })] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: "40px", children: [_jsx(Spinner, { size: size }), message && _jsx(Text, { sx: { marginLeft: 3 }, children: message })] }));
 };
 export default CenteredSpinner;