@micha.bigler/ui-core-micha 4.2.0 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # Changelog
 
+## 4.4.0 - UCM-BILL-1
+
+Subscription and token surfaces in the main entry, against the `django-core-micha` billing API (DCM-BILL-1, `me/`,
+`checkout/`, `portal/`, `team/seats/`; base path `apiBase`, default `/api/billing/`). `PlanPicker` (monthly/yearly
+switch when both exist, team packages with seats and term, token packages with `kinds`) continues to Stripe Checkout:
+the checkout and portal links are followed only when the server returns an `https://` URL, through an injectable
+`redirect`. `SubscriptionSection` is the account section "Abo": the state comes only from the server (active
+subscription with end date and customer portal, team payer with seat management, team member, free access, ended
+access with `AccessEndedBanner` and renewal, token balance and "buy a package"). Also `TokenBalanceBadge`,
+`TokenCostPreview` (the cost, alternatives and balance the app passes in), `useBilling`, `createBillingApi` /
+`defaultBillingApi` and `billingTranslations` (de/en/fr/sw, part of `uiCoreTranslations`). The operator overview and the
+"free access" switch are not part of this release (UCM-BILL-2, no API yet). The server does not send the plan name,
+token expiry or seat-holder names, so none are shown.
+
+## 4.3.0 - UCM-CHAT-5
+
+`ChatWorkspace` gets three optional props; without them it behaves as in 4.2.x. `getSendContext()` (synchronous, no
+arguments) is called once per `send` frame, right before it is sent, for every route: the composer, `send(text)` from
+the answer slot, `sendRequest` and the retry of a failed turn. A plain object is sent as `context` on the frame
+(`{ type: 'send', message, context }`, read by `django-core-micha` 3.3.0, DCM-CHAT-11); `undefined` or `null` sends no
+`context`; anything else, or a thrown error, sends nothing, keeps the draft and shows the generic action-error notice
+(a failed retry also keeps the failed turn on screen). The surface does not interpret or size-check the context; the core
+answers `invalid_frame` for a bad or oversized one. The context never appears in the displayed turn text.
+`sendRequest` (`{ id, text }`) sends `text` as the next message of the shown chat, like a typed send including
+`getSendContext`. Each new `id` is handled once; with no chat shown, an archived chat, no connection, a running turn,
+blank text or `activeChatId` `null` it is not sent. A request that arrives together with an `activeChatId` switch waits
+for that chat. `onSendRequestHandled({ id, sent })` is called once per request so a host can fall back to
+`composerPrefill` when `sent` is `false`. Give every request a fresh `id` (a counter); an `id` that was answered earlier
+is treated as the same request and ignored.
+
 ## 4.2.0 - UCM-CHAT-4
 
 `ChatWorkspace` takes two optional props so a host can control which chat is shown. `activeChatId` shows that chat

package/README.md

@@ -44,3 +44,12 @@ The main entry needs only the required peers. Charts, the chat surface and `Mark
 extra peers are optional: `@micha.bigler/ui-core-micha/charts` (`@mui/x-charts`), `/chat` and `/markdown`
 (`react-markdown`, `remark-gfm`). Install those peers only in apps that import the sub-path. The 4.0.0 entry in
 `CHANGELOG.md` has the migration table.
+
+## Shared chat: host controls
+
+`ChatWorkspace` (from `@micha.bigler/ui-core-micha/chat`) takes optional props for apps that put UI around the surface;
+without them it behaves as before. Each is described in `CHANGELOG.md` under the release that added it.
+Since 4.3.0: `getSendContext()` (a plain object attached as `context` to every `send` frame, read by
+`django-core-micha` 3.3.0), `sendRequest` (`{ id, text }`, sends a message on the host's behalf) and
+`onSendRequestHandled({ id, sent })`. Since 4.2.0: `activeChatId`, `onActiveChatChange`, `composerPrefill` and
+`send(text)` / `canSend` in `renderAnswerExtra`.

package/dist/billing/AccessEndedBanner.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Alert, Button, Stack } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { formatDate } from './format';
+export const ACCESS_ENDED_BANNER_ALERT_SX = { alignItems: 'center' };
+export function AccessEndedBanner({ endedAt, deletionDate, onRenew }) {
+    const { t, i18n } = useTranslation();
+    return _jsx(Alert, { severity: "warning", role: "status", sx: ACCESS_ENDED_BANNER_ALERT_SX, action: _jsx(Button, { color: "inherit", onClick: onRenew, children: t('Billing.RENEW') }), children: _jsxs(Stack, { spacing: 0.5, children: [_jsx("span", { children: t('Billing.ENDED_TITLE') }), formatDate(endedAt, i18n.language) && _jsx("span", { children: t('Billing.ENDED_ON', { date: formatDate(endedAt, i18n.language) }) }), formatDate(deletionDate, i18n.language) && _jsx("span", { children: t('Billing.DELETION_ON', { date: formatDate(deletionDate, i18n.language) }) })] }) });
+}
+export default AccessEndedBanner;

package/dist/billing/PlanPicker.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useState } from 'react';
+import { Alert, Button, Card, FormControlLabel, Radio, RadioGroup, Stack, ToggleButton, ToggleButtonGroup, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { formatPrice, formatTokens } from './format';
+import { defaultBillingApi } from './api';
+import { DEFAULT_PAYMENT_HOSTS, isTrustedPaymentUrl } from './safeUrl';
+export const PLAN_PICKER_CARD_SX = { width: { xs: '100%', sm: 'calc(50% - 8px)' } };
+export const PLAN_PICKER_SELECTED_CARD_SX = { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 1 };
+export const PLAN_PICKER_ALERT_SX = { width: '100%' };
+export const PLAN_PICKER_LABEL_SX = { m: 0, p: 2, width: '100%', height: '100%', alignItems: 'flex-start' };
+export function PlanPicker({ plans = [], kinds = ['subscription', 'team_package'], api = defaultBillingApi, redirect = (url) => window.location.assign(url), allowedHosts = DEFAULT_PAYMENT_HOSTS, describePlan, onError }) {
+    const { t, i18n } = useTranslation();
+    const [selected, setSelected] = useState(null);
+    const [interval, setInterval] = useState('month');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(false);
+    const subscriptionPlans = plans.filter((plan) => kinds.includes('subscription') && (plan === null || plan === void 0 ? void 0 : plan.kind) === 'subscription');
+    const intervals = [...new Set(subscriptionPlans.map((plan) => plan.interval).filter((value) => value === 'month' || value === 'year'))];
+    const filteredPlans = useMemo(() => plans.filter((plan) => kinds.includes(plan === null || plan === void 0 ? void 0 : plan.kind)
+        && (plan.kind !== 'subscription' || intervals.length < 2 || plan.interval === interval)), [plans, kinds, intervals.length, interval]);
+    // A plan hidden by the interval switch is no longer selected, so a hidden plan can never be checked out.
+    const effectiveSelected = filteredPlans.some((plan) => plan.key === selected) ? selected : null;
+    const continueToPayment = async () => {
+        if (busy || effectiveSelected === null)
+            return;
+        setBusy(true);
+        setError(false);
+        try {
+            const result = await api.startCheckout(effectiveSelected);
+            if (!isTrustedPaymentUrl(result === null || result === void 0 ? void 0 : result.url, allowedHosts))
+                throw new Error('invalid_checkout_url');
+            redirect(result.url);
+        }
+        catch (cause) {
+            setError(true);
+            onError === null || onError === void 0 ? void 0 : onError(cause);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return _jsxs(Stack, { spacing: 2, children: [intervals.length > 1 && _jsxs(ToggleButtonGroup, { exclusive: true, value: interval, onChange: (_, value) => { if (value) {
+                    setInterval(value);
+                    setSelected(null);
+                } }, "aria-label": t('Billing.PLAN_INTERVAL'), children: [_jsx(ToggleButton, { value: "month", children: t('Billing.MONTHLY') }), _jsx(ToggleButton, { value: "year", children: t('Billing.YEARLY') })] }), _jsx(RadioGroup, { row: true, value: effectiveSelected !== null && effectiveSelected !== void 0 ? effectiveSelected : '', onChange: (event) => setSelected(event.target.value), "aria-label": t('Billing.PLANS'), children: _jsx(Stack, { direction: "row", useFlexGap: true, flexWrap: "wrap", spacing: 2, children: filteredPlans.map((plan) => {
+                        const active = effectiveSelected === plan.key;
+                        const suffix = plan.kind === 'subscription' ? (plan.interval === 'year' ? t('Billing.PER_YEAR') : t('Billing.PER_MONTH')) : '';
+                        return _jsx(Card, { variant: "outlined", sx: [PLAN_PICKER_CARD_SX, active && PLAN_PICKER_SELECTED_CARD_SX], children: _jsx(FormControlLabel, { value: plan.key, control: _jsx(Radio, {}), sx: PLAN_PICKER_LABEL_SX, label: _jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "h6", children: plan.name }), _jsxs(Typography, { children: [formatPrice(plan.amount_cents, i18n.language), suffix] }), plan.kind === 'team_package' && _jsxs(Typography, { children: [t('Billing.SEATS', { count: plan.seats }), " \u00B7 ", t('Billing.TERM_MONTHS', { count: plan.term_months })] }), Number.isFinite(plan.token_allowance) && plan.token_allowance > 0 && _jsx(Typography, { children: t('Billing.TOKENS_INCLUDED', { tokens: formatTokens(plan.token_allowance, i18n.language) }) }), describePlan === null || describePlan === void 0 ? void 0 : describePlan(plan)] }) }) }, plan.key);
+                    }) }) }), error && _jsx(Alert, { severity: "error", sx: PLAN_PICKER_ALERT_SX, children: t('Billing.ERROR_CHECKOUT') }), _jsx(Button, { variant: "contained", disabled: effectiveSelected === null || busy, onClick: continueToPayment, children: t('Billing.CONTINUE_TO_PAYMENT') })] });
+}
+export default PlanPicker;

package/dist/billing/SubscriptionSection.js

@@ -0,0 +1,95 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import { Alert, Button, CircularProgress, Stack, TextField, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { defaultBillingApi } from './api';
+import { DEFAULT_PAYMENT_HOSTS, isTrustedPaymentUrl } from './safeUrl';
+import { useBilling } from './useBilling';
+import { formatDate, formatPrice, formatTokens } from './format';
+import { PlanPicker } from './PlanPicker';
+import { TokenBalanceBadge } from './TokenBalanceBadge';
+import { AccessEndedBanner } from './AccessEndedBanner';
+export const SUBSCRIPTION_SECTION_ALERT_SX = { width: '100%' };
+function isStatus(error, status) { var _a; return ((_a = error === null || error === void 0 ? void 0 : error.response) === null || _a === void 0 ? void 0 : _a.status) === status; }
+function activeUntil(access, t, language) {
+    const date = formatDate(access === null || access === void 0 ? void 0 : access.ends_at, language);
+    return date ? t('Billing.ACTIVE_UNTIL', { date }) : null;
+}
+export function SubscriptionSection({ api = defaultBillingApi, redirect = (url) => window.location.assign(url), allowedHosts = DEFAULT_PAYMENT_HOSTS, onRenew, describePlan, sx }) {
+    const { t, i18n } = useTranslation();
+    const { state, me, reload } = useBilling(api);
+    const [seats, setSeats] = useState(null);
+    const [seatError, setSeatError] = useState(null);
+    const [seatInput, setSeatInput] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [actionError, setActionError] = useState(null);
+    const renewalPickerRef = useRef(null);
+    useEffect(() => {
+        var _a;
+        let live = true;
+        setSeats(null);
+        setSeatError(null);
+        if (state === 'ready' && ((_a = me === null || me === void 0 ? void 0 : me.access) === null || _a === void 0 ? void 0 : _a.status) === 'active' && me.access.source === 'team') {
+            api.listSeats().then((result) => { if (live)
+                setSeats(Array.isArray(result === null || result === void 0 ? void 0 : result.seats) ? result.seats : []); }).catch((error) => {
+                if (!live)
+                    return;
+                if (isStatus(error, 404))
+                    setSeats(false);
+                else
+                    setSeatError(error);
+            });
+        }
+        return () => { live = false; };
+    }, [api, state, me]);
+    const safeRedirect = async (operation, errorKey) => {
+        setBusy(true);
+        setActionError(null);
+        try {
+            const result = await operation();
+            if (!isTrustedPaymentUrl(result === null || result === void 0 ? void 0 : result.url, allowedHosts))
+                throw new Error('invalid_billing_url');
+            redirect(result.url);
+        }
+        catch (error) {
+            setActionError(errorKey);
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const updateSeat = async (operation) => {
+        setBusy(true);
+        setSeatError(null);
+        try {
+            await operation();
+            const result = await api.listSeats();
+            setSeats(Array.isArray(result === null || result === void 0 ? void 0 : result.seats) ? result.seats : []);
+            setSeatInput('');
+        }
+        catch (error) {
+            setSeatError(isStatus(error, 409) ? 'Billing.ERROR_SEAT_LIMIT' : isStatus(error, 400) ? 'Billing.ERROR_SEAT_USER' : 'Billing.ERROR_LOAD');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    if (state === 'loading')
+        return _jsxs(Stack, { sx: sx, role: "status", direction: "row", spacing: 1, alignItems: "center", children: [_jsx(CircularProgress, { size: 20 }), _jsx(Typography, { children: t('Billing.LOADING') })] });
+    if (state === 'error' || !(me === null || me === void 0 ? void 0 : me.access))
+        return _jsxs(Stack, { sx: sx, spacing: 1, children: [_jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: t('Billing.ERROR_LOAD') }), _jsx(Button, { onClick: reload, children: t('Billing.RETRY') })] });
+    const { access, tokens } = me;
+    if (!['active', 'read_only'].includes(access.status) || !Number.isFinite(tokens === null || tokens === void 0 ? void 0 : tokens.balance))
+        return _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: t('Billing.ERROR_LOAD') });
+    const dateLine = activeUntil(access, t, i18n.language);
+    const packagePlans = (Array.isArray(me.plans) ? me.plans : []).filter((plan) => (plan === null || plan === void 0 ? void 0 : plan.kind) === 'token_package');
+    const sourceLine = access.source === 'subscription' ? t('Billing.SOURCE_SUBSCRIPTION') : access.source === 'team' ? t('Billing.SOURCE_TEAM') : access.source === 'free' ? t('Billing.SOURCE_FREE') : null;
+    if (!sourceLine && access.status === 'active')
+        return _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: t('Billing.ERROR_LOAD') });
+    return _jsxs(Stack, { sx: sx, spacing: 2, children: [access.status === 'read_only' ? _jsxs(_Fragment, { children: [_jsx(AccessEndedBanner, { endedAt: access.ends_at, onRenew: onRenew || (() => {
+                            var _a, _b, _c, _d;
+                            (_b = (_a = renewalPickerRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { behavior: 'smooth', block: 'start' });
+                            (_d = (_c = renewalPickerRef.current) === null || _c === void 0 ? void 0 : _c.querySelector('input[type="radio"]')) === null || _d === void 0 ? void 0 : _d.focus();
+                        }) }), _jsx("div", { ref: renewalPickerRef, children: _jsx(PlanPicker, { plans: me.plans || [], api: api, redirect: redirect, allowedHosts: allowedHosts, describePlan: describePlan }) })] }) : _jsxs(_Fragment, { children: [_jsx(Typography, { variant: "h5", children: t('Billing.HEADING') }), _jsx(Typography, { children: sourceLine }), access.source !== 'free' && dateLine && _jsx(Typography, { children: dateLine }), access.source === 'subscription' && _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Button, { disabled: busy, onClick: () => safeRedirect(() => api.openPortal(), 'Billing.ERROR_PORTAL'), children: t('Billing.MANAGE') }), _jsx(Typography, { children: t('Billing.MANAGE_DETAILS') })] }), access.source === 'team' && seatError && !seats && _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: t('Billing.ERROR_LOAD') }), access.source === 'team' && seats && _jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { children: t('Billing.TEAM_SEATS') }), seats.map((seat) => _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { children: String(seat.user_id) }), _jsx(Button, { disabled: busy, onClick: () => updateSeat(() => api.removeSeat({ userId: seat.user_id })), children: t('Billing.SEAT_REMOVE') })] }, seat.user_id)), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { size: "small", label: t('Billing.SEAT_USER'), value: seatInput, onChange: (event) => setSeatInput(event.target.value) }), _jsx(Button, { disabled: busy || !seatInput.trim(), onClick: () => updateSeat(() => seatInput.includes('@') ? api.addSeat({ email: seatInput.trim() }) : api.addSeat({ userId: seatInput.trim() })), children: t('Billing.SEATS_ADD') })] }), seatError && _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: typeof seatError === 'string' ? t(seatError) : t('Billing.ERROR_LOAD') })] }), actionError && _jsx(Alert, { severity: "error", sx: SUBSCRIPTION_SECTION_ALERT_SX, children: t(actionError) })] }), _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { children: t('Billing.BALANCE_LABEL') }), _jsx(TokenBalanceBadge, { balance: tokens.balance })] }), _jsx(Typography, { children: t('Billing.BALANCE', { tokens: formatTokens(tokens.balance, i18n.language) }) }), packagePlans.length > 0 && _jsxs(Stack, { spacing: 1, children: [_jsx(Typography, { variant: "h6", children: t('Billing.BUY_PACKAGE') }), packagePlans.map((plan) => _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsxs(Typography, { children: [formatPrice(plan.amount_cents, i18n.language), " \u00B7 ", t('Billing.PACKAGE_TOKENS', { tokens: formatTokens(plan.tokens, i18n.language) })] }), _jsx(Button, { disabled: busy, onClick: () => safeRedirect(() => api.startCheckout(plan.key), 'Billing.ERROR_CHECKOUT'), children: t('Billing.PACKAGE_BUY') })] }, plan.key))] })] });
+}
+export default SubscriptionSection;

package/dist/billing/TokenBalanceBadge.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Chip } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { formatTokens } from './format';
+export const TOKEN_BALANCE_BADGE_SX = { fontVariantNumeric: 'tabular-nums' };
+export function TokenBalanceBadge({ balance, lowBelow, sx }) {
+    const { t, i18n } = useTranslation();
+    if (!Number.isInteger(balance) || balance < 0)
+        return null;
+    const label = t('Billing.BALANCE', { tokens: formatTokens(balance, i18n.language) });
+    return _jsx(Chip, { label: label, "aria-label": label, color: Number.isFinite(lowBelow) && balance < lowBelow ? 'warning' : 'default', sx: [TOKEN_BALANCE_BADGE_SX, ...(Array.isArray(sx) ? sx : sx ? [sx] : [])] });
+}
+export default TokenBalanceBadge;

package/dist/billing/TokenCostPreview.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Stack, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { formatTokens } from './format';
+export function TokenCostPreview({ cost, alternatives = [], balance }) {
+    const { t, i18n } = useTranslation();
+    if (!Number.isInteger(cost) || cost < 0 || !Number.isInteger(balance) || balance < 0 || !Array.isArray(alternatives)
+        || alternatives.some((item) => !item || typeof item.label !== 'string' || !Number.isInteger(item.cost) || item.cost < 0))
+        return null;
+    const insufficient = balance < cost;
+    // "47 Token, mit Übersetzung 71 · Guthaben 1'153": the cost and its alternatives, then the balance.
+    const costs = [t('Billing.COST', { tokens: formatTokens(cost, i18n.language) })];
+    alternatives.forEach(({ label, cost: alternativeCost }) => costs.push(`${label} ${formatTokens(alternativeCost, i18n.language)}`));
+    const parts = [costs.join(', '), t('Billing.BALANCE', { tokens: formatTokens(balance, i18n.language) })];
+    return _jsxs(Stack, { component: "span", direction: "row", spacing: 0.5, flexWrap: "wrap", "aria-live": "polite", children: [_jsx(Typography, { component: "span", color: insufficient ? 'error' : 'text.primary', children: parts.join(' · ') }), insufficient && _jsx(Typography, { component: "span", color: "error", children: t('Billing.NOT_ENOUGH') })] });
+}
+export default TokenCostPreview;

package/dist/billing/api.js

@@ -0,0 +1,16 @@
+import apiClient from '../auth/apiClient';
+import { billingApiUrls } from './wire';
+export function createBillingApi(overrides = {}, { apiBase = '/api/billing/' } = {}) {
+    const urls = billingApiUrls(apiBase);
+    const data = (request) => request.then((response) => response.data);
+    const defaults = {
+        getMe: () => data(apiClient.get(urls.me)),
+        startCheckout: (planKey) => data(apiClient.post(urls.checkout, { plan_key: planKey })),
+        openPortal: () => data(apiClient.post(urls.portal)),
+        listSeats: () => data(apiClient.get(urls.seats)),
+        addSeat: ({ userId, email } = {}) => data(apiClient.post(urls.seats, userId !== undefined ? { user_id: userId } : { email })),
+        removeSeat: ({ userId, email } = {}) => data(apiClient.delete(urls.seats, { data: userId !== undefined ? { user_id: userId } : { email } })),
+    };
+    return Object.assign(Object.assign({}, defaults), overrides);
+}
+export const defaultBillingApi = createBillingApi();

package/dist/billing/format.js

@@ -0,0 +1,18 @@
+export function formatPrice(amountCents, language) {
+    if (!Number.isFinite(amountCents))
+        return '';
+    return new Intl.NumberFormat(language, { style: 'currency', currency: 'USD' }).format(amountCents / 100);
+}
+export function formatTokens(count, language) {
+    if (!Number.isFinite(count))
+        return '';
+    return new Intl.NumberFormat(language, { maximumFractionDigits: 0 }).format(count);
+}
+export function formatDate(iso, language) {
+    if (typeof iso !== 'string' || !iso)
+        return '';
+    const date = new Date(iso);
+    if (!Number.isFinite(date.getTime()))
+        return '';
+    return new Intl.DateTimeFormat(language, { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }).format(date);
+}

package/dist/billing/safeUrl.js

@@ -0,0 +1,21 @@
+// Hosts a checkout or portal link may point to. The server (Stripe) returns the link; the surface still checks it, so a
+// malformed or tampered response can never send people to another site. An app can pass `allowedHosts` to add or replace.
+export const DEFAULT_PAYMENT_HOSTS = ['*.stripe.com'];
+const hostMatches = (hostname, pattern) => (pattern.startsWith('*.')
+    ? hostname.endsWith(pattern.slice(1)) && hostname.length > pattern.length - 1
+    : hostname === pattern);
+/** True only for an `https://` URL without credentials whose host is one of `allowedHosts` (exact or `*.suffix`). */
+export function isTrustedPaymentUrl(value, allowedHosts = DEFAULT_PAYMENT_HOSTS) {
+    if (typeof value !== 'string')
+        return false;
+    let url;
+    try {
+        url = new URL(value);
+    }
+    catch (_a) {
+        return false;
+    }
+    if (url.protocol !== 'https:' || url.username || url.password)
+        return false;
+    return allowedHosts.some((pattern) => hostMatches(url.hostname.toLowerCase(), String(pattern).toLowerCase()));
+}

package/dist/billing/useBilling.js

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useState } from 'react';
+import { BILLING_SOURCES, BILLING_STATUSES } from './wire';
+const validMe = (me) => {
+    var _a;
+    const access = me === null || me === void 0 ? void 0 : me.access;
+    return Boolean(access && typeof access === 'object' && !Array.isArray(access)
+        && [BILLING_STATUSES.ACTIVE, BILLING_STATUSES.READ_ONLY].includes(access.status)
+        && [BILLING_SOURCES.SUBSCRIPTION, BILLING_SOURCES.TEAM, BILLING_SOURCES.FREE, BILLING_SOURCES.NONE].includes(access.source)
+        && (access.ends_at === null || (typeof access.ends_at === 'string' && Number.isFinite(new Date(access.ends_at).getTime())))
+        && Number.isInteger((_a = me.tokens) === null || _a === void 0 ? void 0 : _a.balance) && me.tokens.balance >= 0);
+};
+export function useBilling(api) {
+    const [state, setState] = useState('loading');
+    const [me, setMe] = useState(null);
+    const [reloadCount, setReloadCount] = useState(0);
+    const reload = useCallback(() => { setState('loading'); setReloadCount((count) => count + 1); }, []);
+    useEffect(() => {
+        let live = true;
+        setState('loading');
+        Promise.resolve().then(() => api.getMe()).then((result) => {
+            if (!live)
+                return;
+            if (!validMe(result)) {
+                setMe(null);
+                setState('error');
+                return;
+            }
+            setMe(result);
+            setState('ready');
+        }).catch(() => { if (live) {
+            setMe(null);
+            setState('error');
+        } });
+        return () => { live = false; };
+    }, [api, reloadCount]);
+    return { state, me, reload };
+}

package/dist/billing/wire.js

@@ -0,0 +1,13 @@
+export const BILLING_STATUSES = { ACTIVE: 'active', READ_ONLY: 'read_only' };
+export const BILLING_SOURCES = { SUBSCRIPTION: 'subscription', TEAM: 'team', FREE: 'free', NONE: null };
+export const BILLING_KINDS = { SUBSCRIPTION: 'subscription', TEAM_PACKAGE: 'team_package', TOKEN_PACKAGE: 'token_package' };
+export const BILLING_ERROR_CODES = ['unknown_plan', 'checkout_unavailable', 'no_customer', 'portal_unavailable', 'no_active_team', 'invalid_user', 'seat_limit'];
+export const billingApiUrls = (base = '/api/billing/') => {
+    const root = base.replace(/\/$/, '') + '/';
+    return {
+        me: root + 'me/',
+        checkout: root + 'checkout/',
+        portal: root + 'portal/',
+        seats: root + 'team/seats/',
+    };
+};

package/dist/chat/ChatWorkspace.js

@@ -9,6 +9,26 @@ import ChatThread from './ChatThread';
 import ChatComposer from './ChatComposer';
 import ModelPicker from './ModelPicker';
 const PENDING_ID = 'pending';
+const buildSendFrame = (message, getContext) => {
+    if (typeof getContext !== 'function')
+        return { frame: { type: 'send', message } };
+    try {
+        const context = getContext();
+        if (context == null)
+            return { frame: { type: 'send', message } };
+        if (typeof context !== 'object' || Array.isArray(context))
+            return { error: true };
+        const prototype = Object.getPrototypeOf(context);
+        if (prototype !== Object.prototype && prototype !== null)
+            return { error: true };
+        if (typeof JSON.stringify(context) !== 'string')
+            return { error: true };
+        return { frame: { type: 'send', message, context } };
+    }
+    catch (_a) {
+        return { error: true };
+    }
+};
 const bySeq = (a, b) => { var _a, _b; return ((_a = a.seq) !== null && _a !== void 0 ? _a : Number.MAX_SAFE_INTEGER) - ((_b = b.seq) !== null && _b !== void 0 ? _b : Number.MAX_SAFE_INTEGER); };
 const chronological = (turns) => [...(turns || [])].sort(bySeq);
 const isGenerating = (turn) => turn.state === 'generating';
@@ -42,7 +62,7 @@ const appendDelta = (turns, text) => {
  * Props: `apiBase` and `wsUrl` (where the app mounted the chat routes), `api` (partial overrides of the REST
  * calls; every function not given keeps its default), `scope` (passed when creating a chat), `sx`.
  */
-export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, unavailableReasonText, sidePanel, sidePanelLabel, renderAnswerExtra, renderComposerExtra, onAppFrame, activeChatId, onActiveChatChange, composerPrefill, layout = 'viewport', compactBelow = 720 }) {
+export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, unavailableReasonText, sidePanel, sidePanelLabel, renderAnswerExtra, renderComposerExtra, onAppFrame, activeChatId, onActiveChatChange, composerPrefill, getSendContext, sendRequest, onSendRequestHandled, layout = 'viewport', compactBelow = 720 }) {
     const { t } = useTranslation();
     const theme = useTheme();
     const viewportNarrow = useMediaQuery(theme.breakpoints.down('md'));
@@ -78,6 +98,13 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, un
     const [draft, setDraft] = useState('');
     const composerInputRef = useRef(null);
     const lastPrefillId = useRef(undefined);
+    const lastSendRequestId = useRef(undefined);
+    const deferredSendRequest = useRef(null); // `{ id, wanted }`: a request that had to wait for the chat named by `activeChatId`
+    const connectedChatId = useRef(null);
+    const getSendContextRef = useRef(getSendContext);
+    getSendContextRef.current = getSendContext;
+    const sendRequestHandledRef = useRef(onSendRequestHandled);
+    sendRequestHandledRef.current = onSendRequestHandled;
     const [focusRequest, setFocusRequest] = useState(0);
     const focusPending = useRef(false);
     const [problem, setProblem] = useState(null);
@@ -186,6 +213,7 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, un
     }, [activeChatId, status, listsLoaded]);
     // Clear the previous chat's content before the browser paints, so a host-driven switch never flashes it under the new title.
     useLayoutEffect(() => {
+        connectedChatId.current = null; // the socket of the new chat has not opened yet
         setTurns([]);
         setOlderCursor(null);
         setTool(null);
@@ -239,8 +267,8 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, un
                 setUnavailableReason(frame.reason || unavailableReason);
         }
     }, [chat === null || chat === void 0 ? void 0 : chat.id]);
-    const onOpen = useCallback(() => { setOpenedOnce(true); setProblem((current) => (current === 'connection_lost' ? null : current)); }, []);
-    const onClose = useCallback(({ reason, retrying }) => { if (!retrying)
+    const onOpen = useCallback((chatId) => { connectedChatId.current = String(chatId); setOpenedOnce(true); setProblem((current) => (current === 'connection_lost' ? null : current)); }, []);
+    const onClose = useCallback(({ reason, retrying }) => { connectedChatId.current = null; if (!retrying)
         setProblem(reason); }, []);
     const socket = useChatSocket(chat === null || chat === void 0 ? void 0 : chat.id, { wsUrl, onFrame, onOpen, onClose });
     useEffect(() => {
@@ -262,6 +290,53 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, un
         focusPending.current = true;
         setFocusRequest((count) => count + 1);
     }, [composerPrefill, chat, isArchived, activeChatId]);
+    // Host send request, handled once per id. A request that arrives before the chat named by `activeChatId` is shown waits
+    // for that chat AND for its socket to open (sending needs a connected socket of that chat); a chat that cannot be found
+    // ends the wait. Every other request is decided at once. Decided = sent if the surface can send right now, otherwise
+    // reported as not sent.
+    useEffect(() => {
+        var _a;
+        const answerFor = (id, sent) => {
+            var _a, _b;
+            lastSendRequestId.current = id;
+            if (((_a = deferredSendRequest.current) === null || _a === void 0 ? void 0 : _a.id) === id)
+                deferredSendRequest.current = null;
+            (_b = sendRequestHandledRef.current) === null || _b === void 0 ? void 0 : _b.call(sendRequestHandledRef, { id, sent });
+        };
+        // A waiting request that the host replaced or withdrew is answered as not sent, exactly once.
+        const waiting = deferredSendRequest.current;
+        if (waiting && waiting.id !== (sendRequest === null || sendRequest === void 0 ? void 0 : sendRequest.id))
+            answerFor(waiting.id, false);
+        if (sendRequest == null || sendRequest.id === lastSendRequestId.current)
+            return;
+        const answer = (sent) => answerFor(sendRequest.id, sent);
+        const blank = typeof sendRequest.text !== 'string' || !sendRequest.text.trim();
+        if (activeChatId === null || blank) {
+            answer(false);
+            return;
+        }
+        const wanted = activeChatId === undefined ? null : String(activeChatId);
+        const deferred = ((_a = deferredSendRequest.current) === null || _a === void 0 ? void 0 : _a.id) === sendRequest.id ? deferredSendRequest.current : null;
+        // The host named another chat while the request was waiting: it belonged to the earlier one, so it is not sent.
+        if (deferred && deferred.wanted !== wanted) {
+            answer(false);
+            return;
+        }
+        if (wanted !== null && !unloadableIds.current.has(wanted)) {
+            if (String(chat === null || chat === void 0 ? void 0 : chat.id) !== wanted) {
+                deferredSendRequest.current = { id: sendRequest.id, wanted };
+                return;
+            }
+            // Only a request that could be sent once connected is worth waiting for.
+            if (deferred && connectedChatId.current !== wanted && !isArchived && !running)
+                return;
+        }
+        const text = sendRequest.text;
+        const sent = Boolean(canSendRef.current && typeof text === 'string' && text.trim() && startTurn(text));
+        if (sent)
+            canSendRef.current = false;
+        answer(sent);
+    }, [sendRequest, chat, activeChatId, socket.connected, running]);
     // Runs after the render that carries the prefilled draft; a counter, so the same text requested twice focuses twice.
     // A disabled input (connection down) cannot take focus, so the request stays pending until it is enabled again.
     useEffect(() => {
@@ -319,7 +394,12 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, un
         }
     });
     const startTurn = (message) => {
-        if (!socket.send({ type: 'send', message }))
+        const built = buildSendFrame(message, getSendContextRef.current);
+        if (built.error) {
+            setProblem('action_error');
+            return false;
+        }
+        if (!socket.send(built.frame))
             return false;
         setProblem(null);
         setTurns((current) => [...current, {
@@ -349,8 +429,8 @@ export function ChatWorkspace({ apiBase, wsUrl, api: apiOverrides, scope, sx, un
     const retry = (turn) => {
         if (!socket.connected)
             return;
-        setTurns((current) => current.filter((item) => item.id !== turn.id));
-        startTurn(turn.user_text);
+        if (startTurn(turn.user_text))
+            setTurns((current) => current.filter((item) => item.id !== turn.id));
     };
     const noticeFor = () => {
         const texts = {

package/dist/i18n/billingTranslations.js

@@ -0,0 +1,43 @@
+export const billingTranslations = {
+    'Billing.BALANCE': { de: 'Guthaben {{tokens}} Token', en: 'Balance {{tokens}} tokens', fr: 'Solde {{tokens}} jetons', sw: 'Salio {{tokens}} tokeni' },
+    'Billing.COST': { de: '{{tokens}} Token', en: '{{tokens}} tokens', fr: '{{tokens}} jetons', sw: 'Tokeni {{tokens}}' },
+    'Billing.NOT_ENOUGH': { de: 'Guthaben reicht nicht aus', en: 'Insufficient balance', fr: 'Solde insuffisant', sw: 'Salio halitoshi' },
+    'Billing.ENDED_TITLE': { de: 'Abo beendet – Projekte sind schreibgeschützt. Export bleibt möglich.', en: 'Subscription ended — projects are read-only. You can still export.', fr: 'Abonnement terminé — les projets sont en lecture seule. L’export reste possible.', sw: 'Usajili umeisha — miradi inaweza kusomwa tu. Bado unaweza kuhamisha data.' },
+    'Billing.ENDED_ON': { de: 'Beendet am {{date}}', en: 'Ended on {{date}}', fr: 'Terminé le {{date}}', sw: 'Uliisha tarehe {{date}}' },
+    'Billing.DELETION_ON': { de: 'Löschung am {{date}}', en: 'Deletion on {{date}}', fr: 'Suppression le {{date}}', sw: 'Kufutwa tarehe {{date}}' },
+    'Billing.RENEW': { de: 'Abo erneuern', en: 'Renew subscription', fr: 'Renouveler l’abonnement', sw: 'Fanya upya usajili' },
+    'Billing.MONTHLY': { de: 'Monatlich', en: 'Monthly', fr: 'Mensuel', sw: 'Kila mwezi' },
+    'Billing.YEARLY': { de: 'Jährlich', en: 'Yearly', fr: 'Annuel', sw: 'Kila mwaka' },
+    'Billing.PER_MONTH': { de: '/ Monat', en: '/ month', fr: '/ mois', sw: '/ mwezi' },
+    'Billing.PER_YEAR': { de: '/ Jahr', en: '/ year', fr: '/ an', sw: '/ mwaka' },
+    'Billing.TOKENS_INCLUDED': { de: '{{tokens}} Token inklusive', en: '{{tokens}} tokens included', fr: '{{tokens}} jetons inclus', sw: 'Tokeni {{tokens}} zimejumuishwa' },
+    'Billing.CONTINUE_TO_PAYMENT': { de: 'Weiter zur Bezahlung', en: 'Continue to payment', fr: 'Continuer vers le paiement', sw: 'Endelea kulipa' },
+    'Billing.ERROR_CHECKOUT': { de: 'Die Bezahlung konnte nicht gestartet werden. Bitte versuchen Sie es erneut.', en: 'Checkout could not be started. Please try again.', fr: 'Le paiement n’a pas pu démarrer. Veuillez réessayer.', sw: 'Malipo hayakuweza kuanzishwa. Tafadhali jaribu tena.' },
+    'Billing.ERROR_LOAD': { de: 'Abodaten konnten nicht geladen werden.', en: 'Subscription details could not be loaded.', fr: 'Impossible de charger les informations de l’abonnement.', sw: 'Maelezo ya usajili hayakuweza kupakiwa.' },
+    'Billing.RETRY': { de: 'Erneut versuchen', en: 'Try again', fr: 'Réessayer', sw: 'Jaribu tena' },
+    'Billing.SOURCE_SUBSCRIPTION': { de: 'Persönliches Abo', en: 'Personal subscription', fr: 'Abonnement personnel', sw: 'Usajili binafsi' },
+    'Billing.SOURCE_TEAM': { de: 'Platz in einem Team-Paket', en: 'Seat in a team package', fr: 'Place dans un forfait d’équipe', sw: 'Nafasi katika kifurushi cha timu' },
+    'Billing.SOURCE_FREE': { de: 'Ohne Abo freigeschaltet', en: 'Access enabled without a subscription', fr: 'Accès activé sans abonnement', sw: 'Ufikiaji umewezeshwa bila usajili' },
+    'Billing.ACTIVE_UNTIL': { de: 'Aktiv bis {{date}}', en: 'Active until {{date}}', fr: 'Actif jusqu’au {{date}}', sw: 'Inatumika hadi {{date}}' },
+    'Billing.MANAGE': { de: 'Abo verwalten', en: 'Manage subscription', fr: 'Gérer l’abonnement', sw: 'Dhibiti usajili' },
+    'Billing.MANAGE_DETAILS': { de: 'Kündigung, Zahlungsmethode und Belege', en: 'Cancellation, payment method, and receipts', fr: 'Résiliation, moyen de paiement et reçus', sw: 'Kughairi, njia ya malipo na risiti' },
+    'Billing.ERROR_PORTAL': { de: 'Das Abo-Portal ist derzeit nicht verfügbar.', en: 'The subscription portal is unavailable right now.', fr: 'Le portail d’abonnement est indisponible pour le moment.', sw: 'Tovuti ya usajili haipatikani kwa sasa.' },
+    'Billing.BALANCE_LABEL': { de: 'Token-Guthaben', en: 'Token balance', fr: 'Solde de jetons', sw: 'Salio la tokeni' },
+    'Billing.BUY_PACKAGE': { de: 'Token-Paket kaufen', en: 'Buy a token package', fr: 'Acheter un forfait de jetons', sw: 'Nunua kifurushi cha tokeni' },
+    'Billing.PACKAGE_BUY': { de: 'Paket kaufen', en: 'Buy package', fr: 'Acheter le forfait', sw: 'Nunua kifurushi' },
+    'Billing.SEATS_one': { de: '{{count}} Sitzplatz', en: '{{count}} seat', fr: '{{count}} place', sw: 'Nafasi {{count}}' },
+    'Billing.SEATS_other': { de: '{{count}} Sitzplätze', en: '{{count}} seats', fr: '{{count}} places', sw: 'Nafasi {{count}}' },
+    'Billing.TERM_MONTHS_one': { de: '{{count}} Monat', en: '{{count}} month', fr: '{{count}} mois', sw: 'Mwezi {{count}}' },
+    'Billing.TERM_MONTHS_other': { de: '{{count}} Monate', en: '{{count}} months', fr: '{{count}} mois', sw: 'Miezi {{count}}' },
+    'Billing.SEATS_ADD': { de: 'Sitzplatz hinzufügen', en: 'Add seat', fr: 'Ajouter une place', sw: 'Ongeza nafasi' },
+    'Billing.SEAT_USER': { de: 'E-Mail-Adresse oder Benutzer-ID', en: 'Email address or user ID', fr: 'Adresse e-mail ou identifiant utilisateur', sw: 'Barua pepe au kitambulisho cha mtumiaji' },
+    'Billing.SEAT_REMOVE': { de: 'Entfernen', en: 'Remove', fr: 'Retirer', sw: 'Ondoa' },
+    'Billing.ERROR_SEAT_LIMIT': { de: 'Alle Sitzplätze sind belegt.', en: 'All seats are occupied.', fr: 'Toutes les places sont occupées.', sw: 'Nafasi zote zimejazwa.' },
+    'Billing.ERROR_SEAT_USER': { de: 'Diese Person kann nicht hinzugefügt werden.', en: 'This person could not be added.', fr: 'Cette personne ne peut pas être ajoutée.', sw: 'Mtu huyu hakuweza kuongezwa.' },
+    'Billing.PLAN_INTERVAL': { de: 'Abrechnungszeitraum', en: 'Billing interval', fr: 'Période de facturation', sw: 'Kipindi cha malipo' },
+    'Billing.LOADING': { de: 'Abodaten werden geladen …', en: 'Loading subscription details …', fr: 'Chargement de l’abonnement …', sw: 'Inapakia maelezo ya usajili …' },
+    'Billing.HEADING': { de: 'Abo', en: 'Subscription', fr: 'Abonnement', sw: 'Usajili' },
+    'Billing.TEAM_SEATS': { de: 'Sitzplätze im Team-Paket', en: 'Seats in the team package', fr: 'Places dans le forfait d’équipe', sw: 'Nafasi katika kifurushi cha timu' },
+    'Billing.PACKAGE_TOKENS': { de: '{{tokens}} Token', en: '{{tokens}} tokens', fr: '{{tokens}} jetons', sw: 'Tokeni {{tokens}}' },
+    'Billing.PLANS': { de: 'Pläne', en: 'Plans', fr: 'Offres', sw: 'Mipango' },
+};

package/dist/i18n/uiCoreTranslations.js

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { authTranslations } from './authTranslations';
+import { billingTranslations } from './billingTranslations';
 import { chartsTranslations } from './chartsTranslations';
 import { chatTranslations } from './chatTranslations';
 import { messagingTranslations } from './messagingTranslations';
@@ -17,7 +18,7 @@ import { notificationsTranslations } from './notificationsTranslations';
 import { onboardingTranslations } from './onboardingTranslations';
 import { sectionNavTranslations } from './sectionNavTranslations';
 import { userMenuTranslations } from './userMenuTranslations';
-export const uiCoreTranslations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, authTranslations), chartsTranslations), chatTranslations), messagingTranslations), notificationsTranslations), onboardingTranslations), sectionNavTranslations), userMenuTranslations);
+export const uiCoreTranslations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, authTranslations), billingTranslations), chartsTranslations), chatTranslations), messagingTranslations), notificationsTranslations), onboardingTranslations), sectionNavTranslations), userMenuTranslations);
 export function createUiCoreTranslations({ germanVariant = 'formal' } = {}) {
     return Object.fromEntries(Object.entries(uiCoreTranslations).map(([key, value]) => {
         const { de_informal } = value, rest = __rest(value, ["de_informal"]);

package/dist/index.js

@@ -42,6 +42,14 @@ export { MobileBottomNav } from './components/MobileBottomNav';
 export { default as StatTile } from './components/StatTile';
 export { default as SoftChip } from './components/SoftChip';
 export { default as EmptyState } from './components/EmptyState';
+// --- 5.1 Billing ---
+export { TokenBalanceBadge } from './billing/TokenBalanceBadge';
+export { TokenCostPreview } from './billing/TokenCostPreview';
+export { AccessEndedBanner } from './billing/AccessEndedBanner';
+export { PlanPicker } from './billing/PlanPicker';
+export { SubscriptionSection } from './billing/SubscriptionSection';
+export { useBilling } from './billing/useBilling';
+export { createBillingApi, defaultBillingApi } from './billing/api';
 // --- 6. Charts ---
 export { getNeutralChartPalette, useNeutralChartPalette } from './components/charts/palette';
 export { formatShortTime, formatShortDate, formatShortMonth, formatShortYear, } from './components/charts/chartLabels';
@@ -88,4 +96,5 @@ export { onboardingTranslations } from './i18n/onboardingTranslations';
 export { chartsTranslations } from './i18n/chartsTranslations';
 export { messagingTranslations } from './i18n/messagingTranslations';
 export { chatTranslations } from './i18n/chatTranslations';
+export { billingTranslations } from './i18n/billingTranslations';
 export { createUiCoreTranslations, uiCoreTranslations } from './i18n/uiCoreTranslations';

package/dist/theme/kitSxRegistry.js

@@ -33,8 +33,13 @@ import { SIGN_UP_PAGE_ALERT_SX } from '../pages/SignUpPage';
 import { SIGNUP_CONFIRM_PAGE_ALERT_SX } from '../pages/SignupConfirmPage';
 import { REAUTH_MODAL_ALERT_SX, REAUTH_MODAL_TEXT_FIELD_SX } from '../auth/ReauthModal';
 import { createKitSxEntry } from './kitSxEntry';
+import { ACCESS_ENDED_BANNER_ALERT_SX } from '../billing/AccessEndedBanner';
+import { TOKEN_BALANCE_BADGE_SX } from '../billing/TokenBalanceBadge';
+import { PLAN_PICKER_ALERT_SX, PLAN_PICKER_CARD_SX, PLAN_PICKER_LABEL_SX, PLAN_PICKER_SELECTED_CARD_SX } from '../billing/PlanPicker';
+import { SUBSCRIPTION_SECTION_ALERT_SX } from '../billing/SubscriptionSection';
 const SX_EXPORTS = {
     ACCESS_CODE_ACTION_SX,
+    ACCESS_ENDED_BANNER_ALERT_SX,
     ACCESS_CODE_ALERT_SX,
     ACCESS_CODE_PRIMARY_ACTION_SX,
     ACCESS_CODE_SINGLE_USE_ALERT_SX,
@@ -101,6 +106,12 @@ const SX_EXPORTS = {
     SUPPORT_RECOVERY_AGENT_PAPER_SX,
     SUPPORT_RECOVERY_ALERT_SX,
     THREAD_DAY_SEPARATOR_SX,
+    TOKEN_BALANCE_BADGE_SX,
+    PLAN_PICKER_ALERT_SX,
+    PLAN_PICKER_CARD_SX,
+    PLAN_PICKER_LABEL_SX,
+    PLAN_PICKER_SELECTED_CARD_SX,
+    SUBSCRIPTION_SECTION_ALERT_SX,
     USER_INVITE_ACTION_SX,
     USER_INVITE_ALERT_SX,
     USER_LIST_ACTION_SX,
@@ -199,4 +210,11 @@ export const KIT_COMPONENT_SX_REGISTRY = [
     entry('SignupConfirmPage.alert', 'MuiAlert', SIGNUP_CONFIRM_PAGE_ALERT_SX),
     entry('ReauthModal.alert', 'MuiAlert', REAUTH_MODAL_ALERT_SX),
     entry('ReauthModal.field', 'MuiTextField', REAUTH_MODAL_TEXT_FIELD_SX),
+    entry('AccessEndedBanner.alert', 'MuiAlert', ACCESS_ENDED_BANNER_ALERT_SX),
+    entry('TokenBalanceBadge.root', 'MuiChip', TOKEN_BALANCE_BADGE_SX),
+    entry('PlanPicker.card', 'MuiCard', PLAN_PICKER_CARD_SX),
+    entry('PlanPicker.selectedCard', 'MuiCard', PLAN_PICKER_SELECTED_CARD_SX),
+    entry('PlanPicker.label', 'MuiFormControlLabel', PLAN_PICKER_LABEL_SX),
+    entry('PlanPicker.alert', 'MuiAlert', PLAN_PICKER_ALERT_SX),
+    entry('SubscriptionSection.alert', 'MuiAlert', SUBSCRIPTION_SECTION_ALERT_SX),
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "4.2.0",
+  "version": "4.4.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {