@copilotz/billing 0.0.0-stage → 1.0.0-rc.35

package/credits/views/web/staff.js

@@ -0,0 +1,265 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * What platform staff do with an org's billing, in the staff colour and marked
+ * as theirs: where it stands now (its plan, how it pays, any waiver, who waived
+ * it and why), and doing something about it: setting its plan or a contract of
+ * its own, giving or taking credits, waiving its usage or seats (and lifting
+ * that), recording a payment that came in by hand. Each in a dialog that says
+ * exactly what will happen, on a button naming it: all of it is on the org's
+ * record, and most of it can only be corrected afterwards, not undone.
+ */
+import { useEffect, useState } from "react";
+import { Badge, Button, Checkbox, Dialog, Field, Icon, Input, Notice, Select, Tabs, Textarea, } from "copilotz/web";
+import { nameOf } from "copilotz/plugins/access/contract";
+import { amountOf, dayShown, dollars, includes, money, seatsSaid, slug, startOfDay, } from "./numbers.js";
+import { useAct } from "./types.js";
+export function StaffPanel({ state, org, call, onChanged }) {
+    const [doing, setDoing] = useState();
+    const [lifting, setLifting] = useState();
+    const [people, setPeople] = useState([]);
+    useEffect(() => {
+        call("org.people", {}).then((found) => setPeople(found.people), () => { });
+    }, []);
+    const who = (id) => {
+        if (!id)
+            return "someone";
+        const found = people.find((p) => p.person === id);
+        return found?.name || found?.email || nameOf(id);
+    };
+    const plan = state.plan;
+    const name = org?.name ?? "this org";
+    const waived = plan?.waived;
+    const close = () => {
+        setDoing(undefined);
+        setLifting(undefined);
+    };
+    const shared = { state, org: name, call, close, onChanged };
+    return (_jsxs("section", { className: "billing-staff", "aria-labelledby": "billing-staff", children: [_jsxs("header", { className: "billing-staff-head", children: [_jsxs(Badge, { tone: "warning", children: [_jsx(Icon, { name: "shield", size: 12 }), "Staff only"] }), _jsxs("span", { id: "billing-staff", children: ["Setting ", name, "'s billing by hand. What you do here is on its record."] })] }), _jsxs("div", { className: "billing-staff-now", children: [_jsxs("dl", { className: "billing-facts", children: [_jsxs("div", { children: [_jsx("dt", { children: "Plan" }), _jsxs("dd", { children: [plan ? plan.terms.title : "None started yet", plan && plan.name.toLowerCase() !== plan.terms.title.toLowerCase()
+                                                ? _jsxs("small", { children: ["\u00B7 ", plan.name] })
+                                                : null] })] }), plan
+                                ? (_jsxs("div", { children: [_jsx("dt", { children: "Paid through" }), _jsxs("dd", { children: [plan.channel ?? "manual", plan.status ? _jsxs("small", { children: ["\u00B7 ", plan.status] }) : null, plan.customer ? _jsxs("small", { children: ["\u00B7 ", plan.customer] }) : null] })] }))
+                                : null, plan?.fixedSeats !== undefined
+                                ? (_jsxs("div", { children: [_jsx("dt", { children: "Fixed seats" }), _jsx("dd", { children: seatsSaid(plan.fixedSeats) })] }))
+                                : null, _jsxs("div", { children: [_jsx("dt", { children: "Balance" }), _jsx("dd", { children: money(state.balance ?? 0) })] })] }), _jsx(WaiverLine, { what: "usage", waiver: waived?.usage, who: who, onLift: () => setLifting("usage") }), _jsx(WaiverLine, { what: "seats", waiver: waived?.seats, who: who, onLift: () => setLifting("seats") })] }), _jsxs("div", { className: "billing-staff-actions", children: [_jsx(Button, { icon: "pencil", onClick: () => setDoing("plan"), children: "Set plan" }), _jsx(Button, { icon: "plus", onClick: () => setDoing("grant"), children: "Give or take credits" }), _jsx(Button, { icon: "pause", onClick: () => setDoing("waive"), children: "Waive" }), _jsx(Button, { icon: "note", onClick: () => setDoing("pay"), children: "Record a payment" })] }), _jsx(PlanDialog, { open: doing === "plan", ...shared }), _jsx(GrantDialog, { open: doing === "grant", ...shared }), _jsx(WaiveDialog, { open: doing === "waive", people: people, ...shared }), _jsx(PayDialog, { open: doing === "pay", ...shared }), _jsx(LiftDialog, { what: lifting, ...shared })] }));
+}
+/** A waiver in force: what, who and why, until when, and lifting it. */
+function WaiverLine({ what, waiver, who, onLift }) {
+    if (!waiver)
+        return null;
+    return (_jsxs("div", { className: "billing-waiver", children: [_jsxs("div", { children: [_jsx("b", { children: what === "usage" ? "Usage waived" : "Seats waived" }), _jsxs("p", { children: ["\u201C", waiver.reason, "\u201D, by ", who(waiver.by), ", since ", dayShown(waiver.from), waiver.until ? `, until ${dayShown(waiver.until)}` : ", until lifted", waiver.people?.length ? `, for ${waiver.people.map((id) => who(id)).join(", ")}` : ""] })] }), _jsx(Button, { size: "sm", onClick: onLift, children: "Lift" })] }));
+}
+/** A dialog's footer, its button naming what it does. */
+const Footer = ({ close, busy, ready, onGo, label, tone }) => (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", onClick: close, disabled: busy, children: "Cancel" }), _jsx(Button, { variant: tone ?? "primary", loading: busy, disabled: !ready, onClick: onGo, children: label })] }));
+const termsLine = (terms) => includes(terms).join(" · ") || "No credits of its own";
+function PlanDialog({ open, state, org, call, close, onChanged }) {
+    const plans = state.plans ?? {};
+    const names = Object.keys(plans);
+    const [kind, setKind] = useState("listed");
+    const [name, setName] = useState("");
+    const [title, setTitle] = useState("");
+    const [monthly, setMonthly] = useState("");
+    const [seats, setSeats] = useState("");
+    const { busy, error, run, clear } = useAct();
+    useEffect(() => {
+        if (!open)
+            return;
+        setKind("listed");
+        setName(names.find((n) => n !== state.plan?.name) ?? names[0] ?? "");
+        setTitle("");
+        setMonthly("");
+        setSeats("");
+        clear();
+    }, [open]);
+    const credits = amountOf(monthly);
+    const fixed = seats.trim() ? Number(seats) : undefined;
+    const seatsWrong = fixed !== undefined && (!Number.isInteger(fixed) || fixed < 0);
+    const listed = kind === "listed" ? plans[name] : undefined;
+    const ready = kind === "listed"
+        ? !!listed
+        : !!title.trim() && (!monthly.trim() || credits !== undefined) && !seatsWrong;
+    const hadFixed = state.plan?.fixedSeats !== undefined;
+    const go = (event) => {
+        event?.preventDefault();
+        if (!ready || busy)
+            return;
+        void run(async () => {
+            await call("billing.setPlan", kind === "listed" ? { name, ...(hadFixed ? { seats: null } : {}) } : {
+                name: slug(title) || "contract",
+                terms: {
+                    title: title.trim(),
+                    ...(credits ? { credits: { monthly: credits } } : {}),
+                },
+                ...(fixed !== undefined ? { seats: fixed } : hadFixed ? { seats: null } : {}),
+            });
+            await onChanged();
+            close();
+        });
+    };
+    const to = kind === "listed" ? listed?.title : title.trim();
+    return (_jsx(Dialog, { open: open, onClose: close, title: "Set plan", description: state.plan ? `${org} is on ${state.plan.terms.title} now.` : undefined, footer: _jsx(Footer, { close: close, busy: busy, ready: ready, onGo: () => go(), label: to ? `Move to ${to}` : "Move" }), children: _jsxs("form", { className: "billing-dialog", onSubmit: go, children: [_jsx(Tabs, { label: "A plan, or a contract", value: kind, onChange: setKind, tabs: [{ value: "listed", label: "A plan" }, { value: "contract", label: "A contract" }] }), kind === "listed"
+                    ? (_jsx(Field, { label: "Plan", hint: listed ? termsLine(listed) : undefined, children: (control) => (_jsx(Select, { ...control, value: name, onChange: (event) => setName(event.target.value), children: names.map((n) => (_jsxs("option", { value: n, children: [plans[n].title, plans[n].for ? ` · ${plans[n].for} orgs only` : "", n === state.plan?.name ? " (now)" : ""] }, n))) })) }))
+                    : (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Name", hint: "As the org's owners and admins will see it.", children: (control) => (_jsx(Input, { ...control, value: title, maxLength: 80, placeholder: "Acme contract", onChange: (event) => setTitle(event.target.value) })) }), _jsxs("div", { className: "billing-two", children: [_jsx(Field, { label: "Credits a month", error: monthly.trim() && credits === undefined
+                                            ? "That isn't an amount."
+                                            : undefined, children: (control) => (_jsx(Input, { ...control, inputMode: "decimal", placeholder: "0", className: "billing-money-input", value: monthly, onChange: (event) => setMonthly(event.target.value) })) }), _jsx(Field, { label: "Fixed seats", error: seatsWrong ? "A whole number." : undefined, hint: seatsWrong ? undefined : "Empty: count its people.", children: (control) => (_jsx(Input, { ...control, inputMode: "numeric", placeholder: "Its people", value: seats, onChange: (event) => setSeats(event.target.value) })) })] })] })), _jsxs("p", { className: "billing-text", children: ["It takes effect now, and its period starts today. What ", org, " ", "has stays until it lapses; the new plan's credits land next time it's checked.", hadFixed && (kind === "listed" || fixed === undefined)
+                            ? " Its seats go back to counting its people."
+                            : ""] }), error ? _jsx(Notice, { tone: "destructive", role: "alert", children: error }) : null] }) }));
+}
+function GrantDialog({ open, org, call, close, onChanged }) {
+    const [way, setWay] = useState("give");
+    const [typed, setTyped] = useState("");
+    const [reason, setReason] = useState("");
+    const [expires, setExpires] = useState("");
+    const { busy, error, run, clear } = useAct();
+    useEffect(() => {
+        if (!open)
+            return;
+        setWay("give");
+        setTyped("");
+        setReason("");
+        setExpires("");
+        clear();
+    }, [open]);
+    const amount = amountOf(typed);
+    const ready = !!amount && !!reason.trim();
+    const go = (event) => {
+        event?.preventDefault();
+        if (!ready || busy)
+            return;
+        void run(async () => {
+            await call("billing.grant", {
+                amount: way === "give" ? amount : -amount,
+                reason: reason.trim(),
+                ...(way === "give" && expires ? { expires } : {}),
+            });
+            await onChanged();
+            close();
+        });
+    };
+    return (_jsx(Dialog, { open: open, onClose: close, title: "Give or take credits", footer: _jsx(Footer, { close: close, busy: busy, ready: ready, onGo: () => go(), tone: way === "take" ? "destructive" : undefined, label: amount
+                ? `${way === "give" ? "Give" : "Take"} ${money(amount)}`
+                : way === "give"
+                    ? "Give"
+                    : "Take" }), children: _jsxs("form", { className: "billing-dialog", onSubmit: go, children: [_jsx(Tabs, { label: "Give or take", value: way, onChange: setWay, tabs: [{ value: "give", label: "Give" }, { value: "take", label: "Take away" }] }), _jsxs("div", { className: "billing-two", children: [_jsx(Field, { label: "Amount", error: typed.trim() && !amount ? "That isn't an amount." : undefined, children: (control) => (_jsx(Input, { ...control, inputMode: "decimal", autoFocus: true, placeholder: "0", className: "billing-money-input", value: typed, onChange: (event) => setTyped(event.target.value) })) }), way === "give"
+                            ? (_jsx(Field, { label: "Lapses on", hint: "Empty: they don't lapse.", children: (control) => (_jsx(Input, { ...control, type: "date", value: expires, onChange: (event) => setExpires(event.target.value) })) }))
+                            : null] }), _jsx(Field, { label: "Why", hint: `${org}'s owners and admins see this in their history.`, children: (control) => (_jsx(Textarea, { ...control, rows: 2, value: reason, placeholder: "Welcome credits for the pilot", onChange: (event) => setReason(event.target.value) })) }), _jsxs("p", { className: "billing-text", children: [way === "give"
+                            ? `${org} can use these right away. Any debt is covered first.`
+                            : `These come off ${org}'s balance now. If that takes it to nothing, its work stops.`, " ", "It stays in the history: to correct it, give or take again."] }), error ? _jsx(Notice, { tone: "destructive", role: "alert", children: error }) : null] }) }));
+}
+function WaiveDialog({ open, org, call, close, onChanged, people }) {
+    const [what, setWhat] = useState("usage");
+    const [reason, setReason] = useState("");
+    const [until, setUntil] = useState("");
+    const [whose, setWhose] = useState([]);
+    const { busy, error, run, clear } = useAct();
+    useEffect(() => {
+        if (!open)
+            return;
+        setWhat("usage");
+        setReason("");
+        setUntil("");
+        setWhose([]);
+        clear();
+    }, [open]);
+    const ready = !!reason.trim();
+    const go = (event) => {
+        event?.preventDefault();
+        if (!ready || busy)
+            return;
+        void run(async () => {
+            await call("billing.waive", {
+                what,
+                reason: reason.trim(),
+                ...(until ? { until: startOfDay(until) } : {}),
+                ...(what === "seats" && whose.length ? { people: whose } : {}),
+            });
+            await onChanged();
+            close();
+        });
+    };
+    return (_jsx(Dialog, { open: open, onClose: close, title: "Waive", footer: _jsx(Footer, { close: close, busy: busy, ready: ready, onGo: () => go(), label: what === "usage" ? "Waive usage" : "Waive seats" }), children: _jsxs("form", { className: "billing-dialog", onSubmit: go, children: [_jsx(Tabs, { label: "What to waive", value: what, onChange: setWhat, tabs: [{ value: "usage", label: "Usage" }, { value: "seats", label: "Seats" }] }), _jsx(Field, { label: "Why", children: (control) => (_jsx(Input, { ...control, autoFocus: true, value: reason, placeholder: "Design partner", onChange: (event) => setReason(event.target.value) })) }), _jsx(Field, { label: "Ends on", hint: "Empty: until you lift it.", children: (control) => (_jsx(Input, { ...control, type: "date", value: until, onChange: (event) => setUntil(event.target.value) })) }), what === "seats" && people.length
+                    ? (_jsxs("fieldset", { className: "billing-people", children: [_jsx("legend", { children: "Whose (none ticked: every seat)" }), people.map((p) => (_jsx(Checkbox, { label: p.name || p.email || nameOf(p.person), checked: whose.includes(p.person), onChange: (event) => setWhose(event.target.checked
+                                    ? [...whose, p.person]
+                                    : whose.filter((id) => id !== p.person)) }, p.person)))] }))
+                    : null, _jsx("p", { className: "billing-text", children: what === "usage"
+                        ? `${org}'s usage is still recorded but isn't charged, and when this ends none of it counts against its credits. Its owners and admins see that usage isn't charged, not why.`
+                        : `Those seats aren't paid for, from the next time its seats are counted.` }), error ? _jsx(Notice, { tone: "destructive", role: "alert", children: error }) : null] }) }));
+}
+function LiftDialog({ what, org, call, close, onChanged, state }) {
+    const { busy, error, run } = useAct();
+    const go = () => void run(async () => {
+        await call("billing.waive", { what: what, lift: true });
+        await onChanged();
+        close();
+    });
+    const noCredits = (state.balance ?? 0) <= 0;
+    return (_jsxs(Dialog, { open: !!what, onClose: close, size: "sm", title: what === "usage" ? "Start charging usage again?" : "Stop waiving seats?", footer: _jsx(Footer, { close: close, busy: busy, ready: true, onGo: go, label: "Lift the waiver" }), children: [_jsx("p", { className: "billing-text", children: what === "usage"
+                    ? `From now on, ${org}'s usage comes off its credits. What it used while waived doesn't count.${noCredits ? " It has no credits now, so its work stops." : ""}`
+                    : `${org}'s seats are all paid for again, from the next time they're counted.` }), error ? _jsx(Notice, { tone: "destructive", role: "alert", children: error }) : null] }));
+}
+const PURPOSES = [
+    { value: "credits", label: "Credits" },
+    { value: "seats", label: "Seats" },
+    { value: "contract", label: "Contract" },
+    { value: "refund", label: "Refund" },
+];
+function PayDialog({ open, org, call, close, onChanged }) {
+    const [ref, setRef] = useState("");
+    const [amount, setAmount] = useState("");
+    const [currency, setCurrency] = useState("usd");
+    const [purpose, setPurpose] = useState("credits");
+    const [credits, setCredits] = useState("");
+    const [rate, setRate] = useState("");
+    const [fee, setFee] = useState("");
+    const [note, setNote] = useState("");
+    const { busy, error, run, clear } = useAct();
+    useEffect(() => {
+        if (!open)
+            return;
+        setRef("");
+        setAmount("");
+        setCurrency("usd");
+        setPurpose("credits");
+        setCredits("");
+        setRate("");
+        setFee("");
+        setNote("");
+        clear();
+    }, [open]);
+    const paid = amountOf(amount);
+    const bought = amountOf(credits);
+    const rated = amountOf(rate);
+    const kept = amountOf(fee);
+    const usd = currency.trim().toLowerCase() === "usd";
+    const codeWrong = !/^[a-zA-Z]{3}$/.test(currency.trim());
+    const bad = (text, parsed) => !!text.trim() && parsed === undefined;
+    const refund = purpose === "refund";
+    const ready = !!ref.trim() && !!paid && !codeWrong && !bad(credits, bought) &&
+        !bad(rate, rated) &&
+        !bad(fee, kept) && (usd || !!rated);
+    const go = (event) => {
+        event?.preventDefault();
+        if (!ready || busy)
+            return;
+        void run(async () => {
+            await call("billing.pay", {
+                ref: ref.trim(),
+                amount: refund ? -paid : paid,
+                currency: currency.trim().toLowerCase(),
+                purpose,
+                ...(bought ? { credits: refund ? -bought : bought } : {}),
+                ...(rated && !usd ? { rate: rated } : {}),
+                ...(kept ? { fee: kept } : {}),
+                ...(note.trim() ? { note: note.trim() } : {}),
+            });
+            await onChanged();
+            close();
+        });
+    };
+    const adds = bought
+        ? refund ? `takes ${money(bought)} of credits back` : `adds ${money(bought)} of credits`
+        : "changes no credits";
+    return (_jsx(Dialog, { open: open, onClose: close, title: refund ? "Record a refund" : "Record a payment", description: `Money that came in by hand, for ${org}.`, footer: _jsx(Footer, { close: close, busy: busy, ready: ready, onGo: () => go(), label: refund ? "Record the refund" : "Record the payment" }), children: _jsxs("form", { className: "billing-dialog", onSubmit: go, children: [_jsxs("div", { className: "billing-two", children: [_jsx(Field, { label: "Reference", hint: "An invoice or transfer number. Once each.", children: (control) => (_jsx(Input, { ...control, autoFocus: true, value: ref, placeholder: "INV-1042", spellCheck: false, onChange: (event) => setRef(event.target.value) })) }), _jsx(Field, { label: "What for", children: (control) => (_jsx(Select, { ...control, value: purpose, onChange: (event) => setPurpose(event.target.value), children: PURPOSES.map((p) => _jsx("option", { value: p.value, children: p.label }, p.value)) })) }), _jsx(Field, { label: refund ? "Amount refunded" : "Amount paid", error: bad(amount, paid) ? "That isn't an amount." : undefined, children: (control) => (_jsx(Input, { ...control, inputMode: "decimal", placeholder: "0", value: amount, onChange: (event) => setAmount(event.target.value) })) }), _jsx(Field, { label: "Currency", error: currency.trim() && codeWrong ? "Three letters: usd, brl…" : undefined, children: (control) => (_jsx(Input, { ...control, value: currency, maxLength: 3, spellCheck: false, onChange: (event) => setCurrency(event.target.value) })) }), _jsx(Field, { label: refund ? "Credits to take back" : "Credits it buys", error: bad(credits, bought) ? "That isn't an amount." : undefined, children: (control) => (_jsx(Input, { ...control, inputMode: "decimal", placeholder: "0", className: "billing-money-input", value: credits, onChange: (event) => setCredits(event.target.value) })) }), _jsx(Field, { label: "What the channel kept", error: bad(fee, kept) ? "That isn't an amount." : undefined, children: (control) => (_jsx(Input, { ...control, inputMode: "decimal", placeholder: "0", value: fee, onChange: (event) => setFee(event.target.value) })) }), usd ? null : (_jsx(Field, { label: "USD per unit", error: bad(rate, rated) ? "That isn't an amount." : undefined, hint: "Needed, as it isn't in USD.", children: (control) => (_jsx(Input, { ...control, inputMode: "decimal", placeholder: "0.18", value: rate, onChange: (event) => setRate(event.target.value) })) }))] }), _jsx(Field, { label: "Note", hint: "Its owners and admins see this.", children: (control) => (_jsx(Input, { ...control, value: note, onChange: (event) => setNote(event.target.value) })) }), _jsxs("p", { className: "billing-text", children: [paid
+                            ? `This keeps ${dollarsIn(paid, currency, usd)} for ${org} and ${adds}.`
+                            : `This keeps the payment for ${org}.`, " It can't be edited after: a refund corrects it."] }), error ? _jsx(Notice, { tone: "destructive", role: "alert", children: error }) : null] }) }));
+}
+const dollarsIn = (amount, currency, usd) => usd ? dollars(amount) : `${amount} ${currency.trim().toUpperCase()}`;

package/credits/views/web/style.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Billing's layout on the web, on the theme's variables: the balance first (the
+ * big number, and what it's made of as one bar and a list), pairs of cards that
+ * stack where there's no room, the amounts to choose from, the budget's meter,
+ * the history's rows, staff's panel in the warning colour as the shell marks
+ * staff, and the note above where you type. Only layout and those marks: the
+ * pieces are the toolkit's.
+ */
+export declare const STYLE = "\n.billing { container: billing / inline-size; display: grid; gap: 16px; min-width: 0; }\n.billing-label { margin: 0; color: var(--muted-foreground); font-family: inherit; font-size: 12.5px; font-weight: 600; }\n.billing-text { margin: 0; color: var(--secondary-foreground); font-size: 13.5px; line-height: 1.5; }\n.billing-small { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--muted-foreground);\n  font-size: 12.5px; line-height: 1.45; }\n.billing-small .copilotz-icon { flex: none; margin-top: 2px; }\n\n/* An org with nothing to worry about */\n.billing-calm { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; }\n.billing-calm h3 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 650; letter-spacing: -.01em; }\n.billing-calm p { margin: 3px 0 0; color: var(--secondary-foreground); font-size: 14px; line-height: 1.5; }\n.billing-calm-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-lg);\n  background: var(--success-soft); color: var(--success-text); }\n\n/* The balance */\n.billing-balance { display: grid; gap: 16px; padding: 20px 22px; }\n.billing-standing { margin: -4px -6px 2px; }\n.billing-balance-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px 36px; align-items: start; }\n.billing-balance-main { display: grid; gap: 2px; min-width: 0; }\n.billing-amount { margin: 2px 0 0; font-family: var(--font-display); font-size: clamp(34px, 8.5cqi, 50px); font-weight: 680;\n  letter-spacing: -.03em; line-height: 1.08; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }\n.billing-debt { margin: 6px 0 0; color: var(--secondary-foreground); font-size: 13.5px; line-height: 1.45; }\n.billing-worth { margin: 8px 0 0; color: var(--muted-foreground); font-size: 12.5px; line-height: 1.45; }\n.billing-buckets { display: grid; gap: 10px; min-width: 0; }\n.billing-buckets h4 { font-size: 12.5px; }\n.billing-stack { display: flex; gap: 2px; height: 8px; border-radius: var(--radius-sm); overflow: hidden; }\n.billing-stack > span { flex-basis: 0; min-width: 3px; }\n[data-colour=\"1\"] { background: var(--chart-1, var(--primary)); }\n[data-colour=\"2\"] { background: var(--chart-2, var(--primary)); }\n[data-colour=\"3\"] { background: var(--chart-3, var(--success)); }\n[data-colour=\"4\"] { background: var(--chart-4, var(--warning)); }\n[data-colour=\"5\"] { background: var(--chart-5, var(--primary)); }\n.billing-bucket-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }\n.billing-bucket-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: baseline; gap: 10px;\n  padding: 5px 0; }\n.billing-bucket-list li + li { border-top: 1px solid var(--border); }\n.billing-bucket-list i { align-self: center; width: 10px; height: 10px; border-radius: var(--radius-sm); }\n.billing-bucket-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; font-size: 14px; font-weight: 580; }\n.billing-bucket-name small { color: var(--muted-foreground); font-size: 12.5px; font-weight: 450; }\n.billing-bucket-left { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0 6px;\n  font-size: 14px; font-weight: 620; font-variant-numeric: tabular-nums; text-align: right; }\n.billing-bucket-left small { color: var(--muted-foreground); font-size: 12px; font-weight: 450; }\n\n/* A payment being confirmed */\n.billing-paying-line { display: flex; align-items: flex-start; gap: 10px; }\n.billing-paying-line > :first-child { flex: none; margin-top: 2px; }\n.billing-paying b { font-weight: 650; }\n\n/* Cards, in pairs where there's room */\n.billing-pair { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; }\n.billing-pair[data-single] { grid-template-columns: minmax(0, 1fr); }\n.billing-pair-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n.billing-card { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 18px 20px; scroll-margin: 24px; }\n.billing-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 22px; }\n.billing-card-head h3 { margin: 0; font-size: 15px; font-weight: 650; }\n.billing-card-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 2px; }\n.billing-card-end .billing-small { flex: 1 1 140px; }\n.billing-facts { display: grid; gap: 8px; margin: 0; }\n.billing-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 10px; align-items: baseline; }\n.billing-facts dt { color: var(--muted-foreground); font-size: 13px; }\n.billing-facts dd { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }\n.billing-facts small { margin-left: 5px; color: var(--muted-foreground); font-size: 12.5px; }\n\n/* Adding credits */\n.billing-add { display: grid; gap: 12px; }\n.billing-choices { display: flex; flex-wrap: wrap; gap: 6px; }\n.billing-choice { position: relative; flex: 1 1 54px; display: grid; place-items: center; min-height: 46px; padding: 0 4px; border: 1px solid var(--input);\n  border-radius: var(--radius-lg); background: var(--card); color: var(--foreground); cursor: pointer; font-size: 15px; font-weight: 620;\n  font-variant-numeric: tabular-nums; transition: background-color .12s, border-color .12s, box-shadow .12s; }\n.billing-choice:hover { background: var(--muted); }\n.billing-choice[data-on] { border-color: var(--ring); background: var(--primary-soft); color: var(--primary-text);\n  outline: 1px solid var(--ring); outline-offset: -2px; }\n.billing-choice input { position: absolute; inset: 0; margin: 0; appearance: none; border-radius: inherit; cursor: inherit; outline: none; }\n.billing-choice input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }\n.billing-choice:has(input:disabled) { opacity: .6; cursor: default; }\n.billing-money-input::before { content: \"$\"; color: var(--muted-foreground); font-size: 14.5px; }\n.billing-after { margin: 0; min-height: 1.45em; color: var(--secondary-foreground); font-size: 13.5px; line-height: 1.45; }\n.billing-after b { color: var(--foreground); font-weight: 650; font-variant-numeric: tabular-nums; }\n.billing-go { width: 100%; }\n.billing-pair[data-single] .billing-redeem { max-width: 480px; }\n.billing-redeem { display: grid; gap: 10px; justify-items: start; }\n.billing-redeem > * { width: 100%; }\n.billing-redeem > .billing-go-small { width: auto; }\n.billing-code-input input { font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .01em; }\n\n/* The plan */\n.billing-plan-name { margin: -6px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 660; letter-spacing: -.015em; line-height: 1.2; }\n.billing-plan-credits { display: grid; gap: 6px; padding: 10px 12px 11px; border-radius: var(--radius-lg); background: var(--muted); }\n.billing-plan-left { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }\n.billing-for-teams { padding-top: 10px; border-top: 1px solid var(--border); }\n.billing-card-head + .billing-for-teams { padding-top: 0; border-top: 0; }\n.billing-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }\n.billing-offer { display: grid; grid-template-rows: 1fr auto; gap: 12px; min-width: 0; padding: 14px 16px;\n  border: 1px solid var(--border); border-radius: var(--radius-lg); }\n.billing-offer-text { display: grid; align-content: start; gap: 1px; min-width: 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.45; }\n.billing-offer-text b { color: var(--foreground); font-family: var(--font-display); font-size: 17px; font-weight: 650; letter-spacing: -.01em; }\n.billing-offer-total { margin-bottom: 4px; color: var(--foreground); font-size: 14.5px; font-weight: 620; font-variant-numeric: tabular-nums; }\n\n/* The month's budget */\n.billing-spent { margin: -4px 0 0; color: var(--muted-foreground); font-size: 15px; font-variant-numeric: tabular-nums; }\n.billing-spent b { color: var(--foreground); font-family: var(--font-display); font-size: 22px; font-weight: 660; letter-spacing: -.015em; }\n.billing-meter { height: 8px; border-radius: var(--radius-sm); overflow: hidden;\n  background: color-mix(in oklab, var(--chart-1, var(--primary)) 14%, transparent); }\n.billing-meter > span { display: block; height: 100%; border-radius: var(--radius-sm); background: var(--chart-1, var(--primary));\n  transition: width .3s ease-out; }\n.billing-meter[data-tone=near] { background: color-mix(in oklab, var(--warning) 20%, transparent); }\n.billing-meter[data-tone=near] > span { background: var(--warning); }\n.billing-meter[data-tone=at] { background: color-mix(in oklab, var(--warning) 20%, transparent); }\n.billing-meter[data-tone=at] > span { background: var(--warning); border-radius: 0; }\n\n/* Dialogs */\n.billing-dialog { display: grid; gap: 14px; min-width: 0; }\n.billing-dialog > .copilotz-tabs { justify-self: start; }\n.billing-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; align-items: start; }\n.billing-rules { display: grid; gap: 6px; margin: 0; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--muted);\n  list-style: none; color: var(--secondary-foreground); font-size: 13.5px; line-height: 1.4; }\n.billing-rules li { display: flex; align-items: flex-start; gap: 8px; }\n.billing-rules .copilotz-icon { flex: none; margin-top: 2px; color: var(--muted-foreground); }\n.billing-people { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }\n.billing-people legend { margin-bottom: 6px; padding: 0; font-size: 13.5px; font-weight: 600; }\n\n/* History */\n.billing-history { gap: 6px; }\n.billing-history-head { margin-bottom: 6px; }\n.billing-rows { display: grid; margin: 0 -4px; padding: 0; list-style: none; }\n.billing-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 9px 4px; }\n.billing-row + .billing-row { border-top: 1px solid var(--border); }\n.billing-row-text { display: grid; gap: 1px; min-width: 0; font-size: 14px; line-height: 1.4; }\n.billing-row-text b { font-weight: 600; }\n.billing-row-note { color: var(--muted-foreground); font-size: 13px; overflow-wrap: anywhere; }\n.billing-row-end { display: grid; justify-items: end; gap: 1px; line-height: 1.4; }\n.billing-row-end small { color: var(--muted-foreground); font-size: 12.5px; white-space: nowrap; }\n.billing-row-staff { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; margin-top: 1px; font-size: 11.5px;\n  color: color-mix(in oklab, var(--warning-text) 80%, var(--muted-foreground)); overflow-wrap: anywhere; }\n.billing-row-amount { font-size: 14.5px; font-weight: 640; font-variant-numeric: tabular-nums; white-space: nowrap; }\n.billing-row-amount[data-way=in] { color: var(--success-text); }\n.billing-row-amount[data-way=out] { color: var(--secondary-foreground); }\n.billing-none { padding: 22px 12px 16px; }\n.billing-none .copilotz-empty-icon { width: 44px; height: 44px; margin-bottom: 4px; }\n.billing-none .copilotz-empty-title { font-size: 16px; }\n.billing-none .copilotz-empty-text { font-size: 13.5px; }\n.billing-more { justify-self: start; margin: 4px 0 -6px -8px; }\n\n/* Staff only */\n.billing-staff { display: grid; gap: 12px; padding: 12px 14px 14px; border: 1px solid var(--warning-border);\n  border-radius: var(--radius-lg); background: var(--warning-soft); }\n.billing-staff-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--secondary-foreground);\n  font-size: 12.5px; line-height: 1.4; }\n.billing-staff-head .copilotz-badge { gap: 4px; }\n.billing-staff-now { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--warning-border);\n  border-radius: var(--radius-md); background: var(--card); }\n.billing-waiver { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px;\n  border-top: 1px solid var(--border); font-size: 14px; }\n.billing-waiver b { font-weight: 620; }\n.billing-waiver p { margin: 1px 0 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }\n.billing-waiver .copilotz-button { flex: none; }\n.billing-staff-actions { display: flex; flex-wrap: wrap; gap: 8px; }\n\n/* Above where you type */\n.billing-note { align-items: center; padding: 6px 8px 6px 12px; font-size: 13.5px; }\n.billing-note > .copilotz-icon { margin-top: 0; }\n.billing-note .copilotz-notice-action { margin: 0; }\n.billing-note .copilotz-notice-text b { color: var(--foreground); font-weight: 620; }\n\n@container billing (max-width: 720px) {\n  .billing-pair, .billing-pair-even { grid-template-columns: minmax(0, 1fr); }\n  .billing-pair[data-budget-first] > :first-child { order: 1; }\n  .billing-balance-grid { grid-template-columns: minmax(0, 1fr); }\n}\n@container billing (max-width: 520px) {\n  .billing-balance, .billing-card { padding: 16px; }\n  .billing-standing { margin: -2px -2px 0; }\n  .billing-wrap { flex-wrap: wrap; }\n  .billing-wrap .copilotz-notice-body { flex: 1 1 calc(100% - 30px); }\n  .billing-wrap .copilotz-notice-action { flex: 1 1 100%; margin: 2px 0 0; }\n  .billing-wrap .copilotz-notice-action > .copilotz-button { flex: 1; }\n  .billing-two { grid-template-columns: minmax(0, 1fr); }\n  .billing-staff-actions > .copilotz-button { flex: 1 1 calc(50% - 4px); padding: 0 8px; }\n  .billing-waiver { align-items: flex-start; }\n}\n";

package/credits/views/web/style.js

@@ -0,0 +1,190 @@
+/**
+ * Billing's layout on the web, on the theme's variables: the balance first (the
+ * big number, and what it's made of as one bar and a list), pairs of cards that
+ * stack where there's no room, the amounts to choose from, the budget's meter,
+ * the history's rows, staff's panel in the warning colour as the shell marks
+ * staff, and the note above where you type. Only layout and those marks: the
+ * pieces are the toolkit's.
+ */
+export const STYLE = `
+.billing { container: billing / inline-size; display: grid; gap: 16px; min-width: 0; }
+.billing-label { margin: 0; color: var(--muted-foreground); font-family: inherit; font-size: 12.5px; font-weight: 600; }
+.billing-text { margin: 0; color: var(--secondary-foreground); font-size: 13.5px; line-height: 1.5; }
+.billing-small { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--muted-foreground);
+  font-size: 12.5px; line-height: 1.45; }
+.billing-small .copilotz-icon { flex: none; margin-top: 2px; }
+
+/* An org with nothing to worry about */
+.billing-calm { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; }
+.billing-calm h3 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
+.billing-calm p { margin: 3px 0 0; color: var(--secondary-foreground); font-size: 14px; line-height: 1.5; }
+.billing-calm-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-lg);
+  background: var(--success-soft); color: var(--success-text); }
+
+/* The balance */
+.billing-balance { display: grid; gap: 16px; padding: 20px 22px; }
+.billing-standing { margin: -4px -6px 2px; }
+.billing-balance-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px 36px; align-items: start; }
+.billing-balance-main { display: grid; gap: 2px; min-width: 0; }
+.billing-amount { margin: 2px 0 0; font-family: var(--font-display); font-size: clamp(34px, 8.5cqi, 50px); font-weight: 680;
+  letter-spacing: -.03em; line-height: 1.08; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+.billing-debt { margin: 6px 0 0; color: var(--secondary-foreground); font-size: 13.5px; line-height: 1.45; }
+.billing-worth { margin: 8px 0 0; color: var(--muted-foreground); font-size: 12.5px; line-height: 1.45; }
+.billing-buckets { display: grid; gap: 10px; min-width: 0; }
+.billing-buckets h4 { font-size: 12.5px; }
+.billing-stack { display: flex; gap: 2px; height: 8px; border-radius: var(--radius-sm); overflow: hidden; }
+.billing-stack > span { flex-basis: 0; min-width: 3px; }
+[data-colour="1"] { background: var(--chart-1, var(--primary)); }
+[data-colour="2"] { background: var(--chart-2, var(--primary)); }
+[data-colour="3"] { background: var(--chart-3, var(--success)); }
+[data-colour="4"] { background: var(--chart-4, var(--warning)); }
+[data-colour="5"] { background: var(--chart-5, var(--primary)); }
+.billing-bucket-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
+.billing-bucket-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: baseline; gap: 10px;
+  padding: 5px 0; }
+.billing-bucket-list li + li { border-top: 1px solid var(--border); }
+.billing-bucket-list i { align-self: center; width: 10px; height: 10px; border-radius: var(--radius-sm); }
+.billing-bucket-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; font-size: 14px; font-weight: 580; }
+.billing-bucket-name small { color: var(--muted-foreground); font-size: 12.5px; font-weight: 450; }
+.billing-bucket-left { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0 6px;
+  font-size: 14px; font-weight: 620; font-variant-numeric: tabular-nums; text-align: right; }
+.billing-bucket-left small { color: var(--muted-foreground); font-size: 12px; font-weight: 450; }
+
+/* A payment being confirmed */
+.billing-paying-line { display: flex; align-items: flex-start; gap: 10px; }
+.billing-paying-line > :first-child { flex: none; margin-top: 2px; }
+.billing-paying b { font-weight: 650; }
+
+/* Cards, in pairs where there's room */
+.billing-pair { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; }
+.billing-pair[data-single] { grid-template-columns: minmax(0, 1fr); }
+.billing-pair-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.billing-card { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 18px 20px; scroll-margin: 24px; }
+.billing-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 22px; }
+.billing-card-head h3 { margin: 0; font-size: 15px; font-weight: 650; }
+.billing-card-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 2px; }
+.billing-card-end .billing-small { flex: 1 1 140px; }
+.billing-facts { display: grid; gap: 8px; margin: 0; }
+.billing-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 2px 10px; align-items: baseline; }
+.billing-facts dt { color: var(--muted-foreground); font-size: 13px; }
+.billing-facts dd { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
+.billing-facts small { margin-left: 5px; color: var(--muted-foreground); font-size: 12.5px; }
+
+/* Adding credits */
+.billing-add { display: grid; gap: 12px; }
+.billing-choices { display: flex; flex-wrap: wrap; gap: 6px; }
+.billing-choice { position: relative; flex: 1 1 54px; display: grid; place-items: center; min-height: 46px; padding: 0 4px; border: 1px solid var(--input);
+  border-radius: var(--radius-lg); background: var(--card); color: var(--foreground); cursor: pointer; font-size: 15px; font-weight: 620;
+  font-variant-numeric: tabular-nums; transition: background-color .12s, border-color .12s, box-shadow .12s; }
+.billing-choice:hover { background: var(--muted); }
+.billing-choice[data-on] { border-color: var(--ring); background: var(--primary-soft); color: var(--primary-text);
+  outline: 1px solid var(--ring); outline-offset: -2px; }
+.billing-choice input { position: absolute; inset: 0; margin: 0; appearance: none; border-radius: inherit; cursor: inherit; outline: none; }
+.billing-choice input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+.billing-choice:has(input:disabled) { opacity: .6; cursor: default; }
+.billing-money-input::before { content: "$"; color: var(--muted-foreground); font-size: 14.5px; }
+.billing-after { margin: 0; min-height: 1.45em; color: var(--secondary-foreground); font-size: 13.5px; line-height: 1.45; }
+.billing-after b { color: var(--foreground); font-weight: 650; font-variant-numeric: tabular-nums; }
+.billing-go { width: 100%; }
+.billing-pair[data-single] .billing-redeem { max-width: 480px; }
+.billing-redeem { display: grid; gap: 10px; justify-items: start; }
+.billing-redeem > * { width: 100%; }
+.billing-redeem > .billing-go-small { width: auto; }
+.billing-code-input input { font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .01em; }
+
+/* The plan */
+.billing-plan-name { margin: -6px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 660; letter-spacing: -.015em; line-height: 1.2; }
+.billing-plan-credits { display: grid; gap: 6px; padding: 10px 12px 11px; border-radius: var(--radius-lg); background: var(--muted); }
+.billing-plan-left { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
+.billing-for-teams { padding-top: 10px; border-top: 1px solid var(--border); }
+.billing-card-head + .billing-for-teams { padding-top: 0; border-top: 0; }
+.billing-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
+.billing-offer { display: grid; grid-template-rows: 1fr auto; gap: 12px; min-width: 0; padding: 14px 16px;
+  border: 1px solid var(--border); border-radius: var(--radius-lg); }
+.billing-offer-text { display: grid; align-content: start; gap: 1px; min-width: 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.45; }
+.billing-offer-text b { color: var(--foreground); font-family: var(--font-display); font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
+.billing-offer-total { margin-bottom: 4px; color: var(--foreground); font-size: 14.5px; font-weight: 620; font-variant-numeric: tabular-nums; }
+
+/* The month's budget */
+.billing-spent { margin: -4px 0 0; color: var(--muted-foreground); font-size: 15px; font-variant-numeric: tabular-nums; }
+.billing-spent b { color: var(--foreground); font-family: var(--font-display); font-size: 22px; font-weight: 660; letter-spacing: -.015em; }
+.billing-meter { height: 8px; border-radius: var(--radius-sm); overflow: hidden;
+  background: color-mix(in oklab, var(--chart-1, var(--primary)) 14%, transparent); }
+.billing-meter > span { display: block; height: 100%; border-radius: var(--radius-sm); background: var(--chart-1, var(--primary));
+  transition: width .3s ease-out; }
+.billing-meter[data-tone=near] { background: color-mix(in oklab, var(--warning) 20%, transparent); }
+.billing-meter[data-tone=near] > span { background: var(--warning); }
+.billing-meter[data-tone=at] { background: color-mix(in oklab, var(--warning) 20%, transparent); }
+.billing-meter[data-tone=at] > span { background: var(--warning); border-radius: 0; }
+
+/* Dialogs */
+.billing-dialog { display: grid; gap: 14px; min-width: 0; }
+.billing-dialog > .copilotz-tabs { justify-self: start; }
+.billing-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; align-items: start; }
+.billing-rules { display: grid; gap: 6px; margin: 0; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--muted);
+  list-style: none; color: var(--secondary-foreground); font-size: 13.5px; line-height: 1.4; }
+.billing-rules li { display: flex; align-items: flex-start; gap: 8px; }
+.billing-rules .copilotz-icon { flex: none; margin-top: 2px; color: var(--muted-foreground); }
+.billing-people { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
+.billing-people legend { margin-bottom: 6px; padding: 0; font-size: 13.5px; font-weight: 600; }
+
+/* History */
+.billing-history { gap: 6px; }
+.billing-history-head { margin-bottom: 6px; }
+.billing-rows { display: grid; margin: 0 -4px; padding: 0; list-style: none; }
+.billing-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 9px 4px; }
+.billing-row + .billing-row { border-top: 1px solid var(--border); }
+.billing-row-text { display: grid; gap: 1px; min-width: 0; font-size: 14px; line-height: 1.4; }
+.billing-row-text b { font-weight: 600; }
+.billing-row-note { color: var(--muted-foreground); font-size: 13px; overflow-wrap: anywhere; }
+.billing-row-end { display: grid; justify-items: end; gap: 1px; line-height: 1.4; }
+.billing-row-end small { color: var(--muted-foreground); font-size: 12.5px; white-space: nowrap; }
+.billing-row-staff { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; margin-top: 1px; font-size: 11.5px;
+  color: color-mix(in oklab, var(--warning-text) 80%, var(--muted-foreground)); overflow-wrap: anywhere; }
+.billing-row-amount { font-size: 14.5px; font-weight: 640; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.billing-row-amount[data-way=in] { color: var(--success-text); }
+.billing-row-amount[data-way=out] { color: var(--secondary-foreground); }
+.billing-none { padding: 22px 12px 16px; }
+.billing-none .copilotz-empty-icon { width: 44px; height: 44px; margin-bottom: 4px; }
+.billing-none .copilotz-empty-title { font-size: 16px; }
+.billing-none .copilotz-empty-text { font-size: 13.5px; }
+.billing-more { justify-self: start; margin: 4px 0 -6px -8px; }
+
+/* Staff only */
+.billing-staff { display: grid; gap: 12px; padding: 12px 14px 14px; border: 1px solid var(--warning-border);
+  border-radius: var(--radius-lg); background: var(--warning-soft); }
+.billing-staff-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--secondary-foreground);
+  font-size: 12.5px; line-height: 1.4; }
+.billing-staff-head .copilotz-badge { gap: 4px; }
+.billing-staff-now { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--warning-border);
+  border-radius: var(--radius-md); background: var(--card); }
+.billing-waiver { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px;
+  border-top: 1px solid var(--border); font-size: 14px; }
+.billing-waiver b { font-weight: 620; }
+.billing-waiver p { margin: 1px 0 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
+.billing-waiver .copilotz-button { flex: none; }
+.billing-staff-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+
+/* Above where you type */
+.billing-note { align-items: center; padding: 6px 8px 6px 12px; font-size: 13.5px; }
+.billing-note > .copilotz-icon { margin-top: 0; }
+.billing-note .copilotz-notice-action { margin: 0; }
+.billing-note .copilotz-notice-text b { color: var(--foreground); font-weight: 620; }
+
+@container billing (max-width: 720px) {
+  .billing-pair, .billing-pair-even { grid-template-columns: minmax(0, 1fr); }
+  .billing-pair[data-budget-first] > :first-child { order: 1; }
+  .billing-balance-grid { grid-template-columns: minmax(0, 1fr); }
+}
+@container billing (max-width: 520px) {
+  .billing-balance, .billing-card { padding: 16px; }
+  .billing-standing { margin: -2px -2px 0; }
+  .billing-wrap { flex-wrap: wrap; }
+  .billing-wrap .copilotz-notice-body { flex: 1 1 calc(100% - 30px); }
+  .billing-wrap .copilotz-notice-action { flex: 1 1 100%; margin: 2px 0 0; }
+  .billing-wrap .copilotz-notice-action > .copilotz-button { flex: 1; }
+  .billing-two { grid-template-columns: minmax(0, 1fr); }
+  .billing-staff-actions > .copilotz-button { flex: 1 1 calc(50% - 4px); padding: 0 8px; }
+  .billing-waiver { align-items: flex-start; }
+}
+`;

package/credits/views/web/types.d.ts

@@ -0,0 +1,17 @@
+export type Call = <R = unknown>(action: string, input?: unknown) => Promise<R>;
+export type Org = {
+    id: string;
+    name: string;
+    kind: string;
+};
+/** Where what's there before paying is kept, to tell what's new on coming back. */
+export declare const LEFT = "billing-left-for-payment";
+/** Something being done: busy while it goes, why if it failed, kept until they try again. */
+export declare function useAct(): {
+    busy: boolean;
+    error: string | undefined;
+    clear: () => void;
+    /** Runs it; true when it went. `stay`: still busy after, as the page is leaving. */
+    run: (work: () => Promise<unknown>, stay?: boolean) => Promise<boolean>;
+    release: () => void;
+};

package/credits/views/web/types.js

@@ -0,0 +1,32 @@
+/** What Billing's pieces pass each other: how they call the app, and busy-then-why on acting. */
+import { useState } from "react";
+import { message } from "copilotz/web";
+/** Where what's there before paying is kept, to tell what's new on coming back. */
+export const LEFT = "billing-left-for-payment";
+/** Something being done: busy while it goes, why if it failed, kept until they try again. */
+export function useAct() {
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState();
+    return {
+        busy,
+        error,
+        clear: () => setError(undefined),
+        /** Runs it; true when it went. `stay`: still busy after, as the page is leaving. */
+        run: async (work, stay = false) => {
+            setBusy(true);
+            setError(undefined);
+            try {
+                await work();
+                if (!stay)
+                    setBusy(false);
+                return true;
+            }
+            catch (e) {
+                setError(message(e));
+                setBusy(false);
+                return false;
+            }
+        },
+        release: () => setBusy(false),
+    };
+}

package/credits/web.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Credits' web front end: the org page's Billing section (the web shell's
+ * `orgSettings`): what the org has and how it'll be spent, adding credits and
+ * redeeming a gift code, its plan, its month's budget and its history; for
+ * platform staff, setting all of that by hand. And a short note above where
+ * you type (chat's `composerNotes`), so people know before they send that the
+ * org is out, or running low. Add it beside the web shell, where the browser
+ * draws.
+ */
+import { type Plugin } from "copilotz";
+export declare const creditsWeb: Plugin;
+export default creditsWeb;

package/credits/web.js

@@ -0,0 +1,33 @@
+/**
+ * Credits' web front end: the org page's Billing section (the web shell's
+ * `orgSettings`): what the org has and how it'll be spent, adding credits and
+ * redeeming a gift code, its plan, its month's budget and its history; for
+ * platform staff, setting all of that by hand. And a short note above where
+ * you type (chat's `composerNotes`), so people know before they send that the
+ * org is out, or running low. Add it beside the web shell, where the browser
+ * draws.
+ */
+import { definePlugin } from "copilotz";
+import { composerNoteView } from "./views/web/composer.js";
+import { orgBillingView } from "./views/web/org.js";
+export const creditsWeb = definePlugin({
+    name: "credits-web",
+    requires: ["web-shell"],
+    views: {
+        "billing.org": orgBillingView,
+        "billing.composer": composerNoteView,
+    },
+    resources: {
+        orgSettings: {
+            billing: {
+                title: "Billing",
+                view: "billing.org",
+                icon: "star",
+                order: 25,
+                roles: ["owner", "admin"],
+            },
+        },
+        composerNotes: { billing: { view: "billing.composer" } },
+    },
+});
+export default creditsWeb;

package/mod.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Billing (`@copilotz/billing`): what an org has to spend, and paying for it,
+ * built on Copilotz's usage ledger (`usage`, in `copilotz/plugins/billing`),
+ * whose prices it counts.
+ *
+ * - `credits`: an org's plan, credits and payments, its balance and budget,
+ *   and the check that stops it at its limit (the `spending` resource
+ *   whatever spends reads); staff change plans and give credits by hand.
+ * - `stripe`: one way an org pays, by Stripe's Checkout and portal; what was
+ *   paid lands by a signed webhook (`stripeWebhook`, in the runtime of the
+ *   app's one address: the directory's, with many orgs).
+ *
+ * ```ts
+ * import { usage } from "copilotz/plugins/billing";
+ * import { credits, stripe, stripeWebhook } from "@copilotz/billing";
+ *
+ * plugins: [models, chat, usage, credits, stripe, stripeWebhook, …]
+ * ```
+ *
+ * Their front end is `@copilotz/billing/web` (`creditsWeb`: the org page's
+ * Billing, the note above where you type); their shapes,
+ * `@copilotz/billing/contract`.
+ */
+export * from "./credits/mod.js";
+export { API_VERSION, EVENTS, stripe, stripeWebhook } from "./stripe/mod.js";
+export type { Seller, StripeSettings } from "./stripe/mod.js";