@bazous/ui 0.3.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bazous and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,150 @@
+# Bazous UI
+
+**Le kit d’interface open source de [Bazous](https://bazous.com).** Chaque question d’argent — *combien ai-je maintenant ? que dois-je payer avant le salaire ? jusqu’où puis-je descendre ?* — est un module indépendant, rendu en cinq langues à partir d’un contrat de données public. La communauté peut en ajouter, les améliorer ou les traduire sans jamais toucher à un compte, une clé ou une donnée réelle.
+
+[![npm](https://img.shields.io/npm/v/@bazous/ui)](https://www.npmjs.com/package/@bazous/ui) [Galerie en ligne](https://bazousdotcom.github.io/ui/) · [La matrice des questions](docs/matrix.md) · [Contribuer](CONTRIBUTING.md) · [English below](#english)
+
+## Ce qu’il y a dedans
+
+| Dossier | Rôle |
+| --- | --- |
+| `schema/snapshot.schema.json` | Le contrat : la réponse de l’API Bazous (`GET /api/v1/cockpit`), la seule chose que le kit connaît. |
+| `schema/canvas.json` | Le contrat du canevas Capture : balises, classes et intentions qu’une IA a le droit d’écrire. |
+| `src/modules/<id>/` | Un module = une question. Une fonction pure `select(snapshot)` et une vue React. |
+| `src/primitives/` | Carte, tuile, ligne, bouton, courbe de trésorerie. |
+| `src/i18n/`, `src/format/` | Cinq langues (FR, DE, IT, RM, EN) et les chiffres suisses : `3’420.50` partout. |
+| `src/engine/scenario.ts` | Le seul calcul du kit : rejouer les échéances quand on active un levier « et si ». |
+| `src/canvas/` | Le CSS et le pont du canevas Capture (iframe isolée, aucune requête réseau). |
+| `fixtures/` | Trois ménages fictifs produits par le vrai moteur Bazous, et leurs réponses (`answers-*.json`). |
+| `src/answers/` | Les dessins des réponses : une fonction `drawVisual()` sans React, et le composant `<AnswerPicture>`. |
+| `schema/answers.schema.json` | Le contrat des réponses et de leur bloc `visual`. |
+| `gallery/` | La galerie publique : tous les modules, les réponses dessinées et la matrice, cinq langues, deux thèmes. |
+| `docs/matrix.md` | La matrice : les 16 questions, leur module, leur dessin, et celles qui attendent le leur. |
+
+## Les modules
+
+**Une question, une réponse d’expert.** On ne demande pas à la personne de savoir quoi demander : chaque module arrive avec la réponse. Un module réussi se lit en une phrase — un verdict, sa tonalité (tout va bien, attention, risque) et, si besoin, le « parce que ».
+
+| id | Question | Taille | Lit dans le contrat | Montre aujourd’hui | Intentions émises | Réponse d’expert ? | Ce qui manque | Verdict visé (exemple fictif) |
+| --- | --- | --- | --- | --- | --- | --- | --- | --- |
+| `available-now` | Combien ai-je maintenant ? | tuile | `opening_balance`, `accounts`, `data_quality` | Le disponible, et « N comptes sans solde » | — | ✅ oui | La fraîcheur du chiffre | « 3’420.50 CHF disponibles · 1 compte sans solde, chiffre incomplet » |
+| `due-before-payday` | Que dois-je payer avant le salaire ? | tuile | `due_before_next_income`, `gap_before_next_income`, `opening_balance`, `next_income_date` | « Couvert · il reste X » ou « Il manque X avant le revenu » | — | ✅ oui, le modèle à suivre | — | déjà en place |
+| `low-point` | Jusqu’où puis-je descendre ? | tuile | `low_point`, `next_income_date`, `second_income_date` | Point bas prévu et sa date, « N jours avant le revenu » | — | ✅ en grande partie | Une tonalité : +50 et −1’200 se ressemblent | « Point bas −1’240 le 20.10 · découvert 4 jours avant le salaire » |
+| `margin-after-payday` | Que me restera-t-il ? | tuile | `end_of_horizon`, `second_income_date`, `data_quality` | La marge à une date, signalée si des récurrences n’ont pas de montant | — | ✅ oui | — | déjà en place |
+| `monthly-structure` | Combien me coûte un mois ? | étroite | `structure`, `debts`, `data_quality` | Charges fixes / revenus, taux, marge structurelle, dettes | — | ⚠️ surtout des chiffres | Un jugement : ce taux est-il sain ? | « Vos charges fixes prennent 76 % du revenu : il reste ≈ 2’200 CHF / mois » |
+| `next-actions` | Que faire ensuite ? | large | `actions`, `next_income_date` | « N décisions · M min », groupées et accompagnées d’un conseil | `mark_paid`, `reschedule`, `classify_transaction`, `review_obligation`, `open` | ✅ oui, le plus « expert » | — | déjà en place |
+| `pay-cycles` | Qu’est-ce qui tombe à chaque salaire ? | pleine largeur | `cycles`, `events`, `next_income_date`, `horizon_end` | La liste des échéances par cycle de paie | `mark_paid`, `open` | ⚠️ une liste, pas de conclusion | Dire quel cycle est serré | « Le cycle 24.10 → 24.11 est le plus serré : 5’600 sortent pour 4’800 entrés » |
+| `what-if` | Et si je décale un paiement ? | pleine largeur | `points`, `events`, `main_cycle`, `low_point`, `end_of_horizon`… (11 champs) | Courbe, horizon, « Pourquoi ? », leviers à activer, « Enregistrer comme scénario » | `set_horizon`, `save_scenario` | ❌ demande à la personne d’explorer | Proposer d’emblée le meilleur levier | « Le meilleur geste : reporter le loyer au 24.10 → aucun jour sous zéro » |
+
+**Bilan de la 0.1 :** 5 modules répondent, 2 affichent des données, 1 demande d’explorer. Aucun module ne renvoie `null` : face à des données incomplètes, ils répondent en partie et le signalent.
+
+**Prochaine étape (0.2) :** rendre la réponse obligatoire dans le contrat — chaque module fournira un verdict d’une phrase avec sa tonalité, testé dans les cinq langues — puis donner un verdict à `monthly-structure` et `pay-cycles`, et faire de `what-if` « le meilleur geste », recommandation d’abord. Les contributions sur ces trois modules sont les bienvenues.
+
+## Les réponses dessinées
+
+Bazous répond aussi en phrases (`GET /api/v1/answers`, et l’outil MCP `get_household_answers` pour Claude et ChatGPT). Une réponse peut porter un bloc `visual` : la forme du dessin, les chiffres à dessiner et une légende qui dit la même réponse sous un autre angle. Tout est calculé par le moteur ; le kit dessine.
+
+| `kind` | Question | Ce que le dessin montre |
+| --- | --- | --- |
+| `runway` | Que dois-je payer avant le salaire ? | La piste jusqu’au jour de paie, les factures en chemin, le disponible face à ce qui est dû |
+| `valley` | Jusqu’où puis-je descendre ? | La vallée du solde, la zone sous zéro, le point bas |
+| `shift` | Et si je décale un paiement ? | Avant / après : la facture déplacée au jour de paie, les deux courbes rejouées par le moteur |
+| `days` | Combien de temps tiendrais-je sans revenu ? | Les jours de charges fixes couverts, sur les 90 conseillés |
+| `balance` | Qu’est-ce qui tombe à chaque salaire ? | Ce qui entre face à ce qui sort, et le trou |
+| `countdown` | Ma prime d’assurance maladie augmente-t-elle ? | Le compte à rebours jusqu’à l’échéance, la marche de la prime |
+| `horizon` | Que me restera-t-il ? | La courbe jusqu’à la fin de la période, la ligne d’arrivée et ce qu’elle représente en jours de charges fixes |
+| `calendar` | Quelle grosse dépense de l’année arrive bientôt ? | Les 90 prochains jours et les factures annuelles qui y tombent |
+| `leak` | Est-ce que je paie des frais évitables ? | Ce que les frais font sur 10 ans |
+| `jar` | Ai-je mis de côté pour mes impôts ? | Douze mois à remplir face au bordereau, ce que cela fait par jour |
+| `gauge` | Puis-je encore verser sur mon 3e pilier ? | Versé et encore possible jusqu’au plafond, et les jours jusqu’au 31.12 |
+| `deadline` | Un contrat doit-il être résilié bientôt ? | Aujourd’hui, le jour où la lettre doit arriver, le renouvellement |
+
+```tsx
+import { AnswerPicture, type Answers } from "@bazous/ui";
+
+function Answer({ answer, locale }: { answer: Answers["answers"][number]; locale: "fr" }) {
+  return (
+    <article>
+      <p>{answer.question}</p>
+      <AnswerPicture visual={answer.visual} locale={locale} />
+      {answer.visual && <p>{answer.visual.caption}</p>}
+      <p>{answer.answer}</p>
+    </article>
+  );
+}
+```
+
+Sans React (une page statique, la carte des assistants) : `import { drawVisual } from "@bazous/ui/answers"` renvoie un `SVGSVGElement`, ou `null` quand il n’y a rien à dessiner. Le dessin suit le thème par les jetons `--bz-*`.
+
+Les questions encore sans dessin (« Combien ai-je maintenant ? », « Que faire ensuite ? », « Combien me coûte un mois ? », « Et si l’un des revenus manquait ? ») sont ouvertes aux contributions : ouvrez une issue avec votre angle. La [matrice](docs/matrix.md) (et sa [version vivante](https://bazousdotcom.github.io/ui/#view=matrix)) montre où en est chaque question.
+
+## Les règles qui ne bougent pas
+
+1. **Aucun réseau.** Un module ne fait ni requête, ni stockage, ni cookie. Il émet une intention (`mark_paid`, `reschedule`, `open`…) que l’application exécute. Un test parcourt `src/` et échoue sinon.
+2. **Le moteur calcule, le kit montre.** Les modules sélectionnent et mettent en forme des chiffres déjà calculés côté serveur. Exception assumée : le rejeu des leviers, qui sans levier reproduit la courbe du moteur au centime (testé).
+3. **Cinq langues ou rien.** Chaque clé existe dans les cinq langues, chaque module est rendu dans les cinq langues et les trois ménages de test sans clé manquante, `NaN` ou `undefined`.
+4. **Chiffres suisses.** `3’420.50` dans toutes les langues, vrai signe moins, dates courtes `24.09`. Les nombres ne passent jamais par `Intl` (les navigateurs ne s’accordent pas sur fr-CH et it-CH).
+5. **Données fictives uniquement** dans ce dépôt.
+
+## Utiliser le kit
+
+```bash
+npm install @bazous/ui
+```
+
+```tsx
+import "@bazous/ui/styles.css";
+import { Dashboard, MODULES, type ModuleAction, type Snapshot } from "@bazous/ui";
+
+function Cockpit({ snapshot }: { snapshot: Snapshot }) {
+  const onAction = (action: ModuleAction) => {
+    // l’application appelle son API avec le jeton de l’utilisateur, puis recharge le snapshot
+  };
+  return <Dashboard modules={MODULES} snapshot={snapshot} locale="fr" theme="dark" onAction={onAction} />;
+}
+```
+
+Les polices ne sont pas embarquées : chargez Playfair Display (500, 600) et Montserrat (400, 500, 600).
+
+## Développer
+
+```bash
+npm install
+npm run dev        # galerie sur http://localhost:5173
+npm run check      # types, tests, build
+```
+
+## Traductions
+
+Le romanche suit le Rumantsch Grischun ; une relecture par un·e locuteur·rice natif·ve est la bienvenue (étiquette `langue:rm`).
+
+## Licence
+
+MIT. Le kit est libre ; la marque Bazous, son logo et le service Bazous Cloud ne sont pas couverts par cette licence.
+
+---
+
+## English
+
+**Bazous UI is the open-source interface kit of [Bazous](https://bazous.com).** Every money question is a self-contained module rendered in five languages (French, German, Italian, Romansh, English) from a public data contract (`schema/snapshot.schema.json`). Modules never touch the network: they select numbers the Bazous engine already computed and emit intents the host app executes. Fixtures are fictitious and generated by the real engine. Install with `npm install @bazous/ui`. The [question matrix](docs/matrix.md) lists every question, its module and its picture. See [CONTRIBUTING.md](CONTRIBUTING.md) to add a question; `npm run check` must pass. Licensed MIT; the Bazous name and logo are not.
+
+### The modules at a glance
+
+One question, one expert answer: people should not have to know what to ask. Each module should read as a single sentence — a verdict, its tone (fine, watch out, risk) and, when useful, the reason.
+
+| id | Question | Expert answer today? | What is missing |
+| --- | --- | --- | --- |
+| `available-now` | How much do I have now? | ✅ yes | How fresh the figure is |
+| `due-before-payday` | What do I owe before payday? | ✅ yes — the model to follow | — |
+| `low-point` | How low might I go? | ✅ mostly | A tone: +50 and −1’200 look alike |
+| `margin-after-payday` | What will be left? | ✅ yes | — |
+| `monthly-structure` | What does a month cost me? | ⚠️ mostly figures | A judgement: is this ratio healthy? |
+| `next-actions` | What next? | ✅ yes — the most "expert" | — |
+| `pay-cycles` | What falls due each pay cycle? | ⚠️ a list, no conclusion | Which cycle is tight |
+| `what-if` | What if I move a payment? | ❌ asks the person to explore | Lead with the best lever |
+
+Next (0.2): make the answer part of the contract (a one-sentence verdict with a tone, tested in all five languages), then give `monthly-structure` and `pay-cycles` a verdict and turn `what-if` into "the best move". Contributions on these three modules are welcome.
+
+### Answers with pictures
+
+Bazous also answers in sentences (`GET /api/v1/answers`, and the MCP tool `get_household_answers` for Claude and ChatGPT). An answer may carry a `visual` block: the kind of picture (`runway`, `valley`, `shift`, `days`, `balance`, `countdown`, `horizon`, `calendar`, `leak`, `jar`, `gauge`, `deadline`), the figures to draw and a caption that says the same answer from another angle. The engine computes everything; the kit draws it, with `<AnswerPicture>` in React or `drawVisual()` from `@bazous/ui/answers` anywhere else. The contract is `schema/answers.schema.json`. Questions without a picture yet (available now, next actions, monthly structure, income loss) are open for contributions.

package/dist/answers/AnswerPicture.d.ts

@@ -0,0 +1,13 @@
+import type { Locale } from "../i18n";
+import type { AnswerVisual } from "./contract";
+export type AnswerPictureProps = {
+    visual: AnswerVisual | null | undefined;
+    locale: Locale;
+    className?: string;
+};
+/**
+ * The picture of an answer, drawn by the same code as in the assistants' card. Nothing when there is none.
+ * It is laid out at the width of its container and redrawn when that width changes, so the labels keep
+ * their size on a phone.
+ */
+export declare function AnswerPicture({ visual, locale, className }: AnswerPictureProps): import("react").JSX.Element;

package/dist/answers/contract.d.ts

@@ -0,0 +1,160 @@
+import type { Decimal, IsoDate } from "../contract/snapshot";
+/**
+ * The answers Bazous gives (`GET /api/v1/answers`, and the MCP tool `get_household_answers`),
+ * as far as a view needs them. The engine computes everything, including the `visual` block:
+ * the kind of picture, the figures to draw and a caption that says the answer from that angle.
+ * Published as schema/answers.schema.json.
+ */
+/** A balance at the end of a day: [iso date, balance]. */
+export type BalancePoint = [IsoDate, Decimal];
+type Visual<K extends string, T> = {
+    kind: K;
+    caption: string;
+} & T;
+/** « Que dois-je payer avant le salaire ? » — a runway from today to payday, bills on the way. */
+export type RunwayVisual = Visual<"runway", {
+    today: IsoDate;
+    payday: IsoDate;
+    available: Decimal;
+    due: Decimal;
+    /** available − due: negative when something is missing. */
+    gap: Decimal;
+    bills: {
+        label: string;
+        amount: Decimal;
+        date: IsoDate;
+    }[];
+    /** Days before payday with the balance below zero. */
+    short_days: number;
+}>;
+/** « Jusqu’où puis-je descendre ? » — the valley of the balance. */
+export type ValleyVisual = Visual<"valley", {
+    series: BalancePoint[];
+    low: {
+        date: IsoDate;
+        balance: Decimal;
+    };
+    days_below_zero: number;
+    incomes: IsoDate[];
+}>;
+/** « Et si je décale un paiement ? » — before and after moving one bill (both curves by the engine). */
+export type ShiftVisual = Visual<"shift", {
+    before: BalancePoint[];
+    after: BalancePoint[];
+    move: {
+        label: string;
+        amount: Decimal;
+        from: IsoDate;
+        to: IsoDate;
+    };
+    low_before: Decimal;
+    low_after: Decimal;
+}>;
+/** « Combien de temps tiendrais-je sans revenu ? » — days of fixed costs covered, out of the advised ones. */
+export type DaysVisual = Visual<"days", {
+    covered: number;
+    target: number;
+    balance?: Decimal;
+}>;
+/** « Qu’est-ce qui tombe à chaque salaire ? » — what comes in against what goes out in a pay cycle. */
+export type BalanceVisual = Visual<"balance", {
+    in: Decimal;
+    out: Decimal;
+    gap: Decimal;
+    start: IsoDate;
+    end: IsoDate;
+}>;
+/** « Ma prime d’assurance maladie augmente-t-elle ? » — a countdown to a deadline, and the premium step. */
+export type CountdownVisual = Visual<"countdown", {
+    deadline: IsoDate;
+    days_left: number;
+    window_days: number;
+    current?: Decimal | null;
+    next?: Decimal | null;
+    increase_per_year?: Decimal | null;
+}>;
+/** « Que me restera-t-il ? » — the curve to the end of the period, and where it finishes. */
+export type HorizonVisual = Visual<"horizon", {
+    series: BalancePoint[];
+    end: {
+        date: IsoDate;
+        balance: Decimal;
+    };
+    /** When the end is below zero: how many days of fixed costs the hole represents. */
+    days_of_fixed_costs: number | null;
+}>;
+/** « Quelle grosse dépense de l’année arrive bientôt ? » — the next 90 days and the yearly bills in them. */
+export type CalendarVisual = Visual<"calendar", {
+    today: IsoDate;
+    until: IsoDate;
+    items: {
+        label: string;
+        amount: Decimal;
+        date: IsoDate;
+        days: number;
+        per_month: Decimal;
+    }[];
+}>;
+/** « Est-ce que je paie des frais évitables ? » — what the fees add up to, year after year. */
+export type LeakVisual = Visual<"leak", {
+    per_year: Decimal;
+    years: number;
+    total: Decimal;
+    items: {
+        label: string;
+    }[];
+}>;
+/** « Ai-je mis de côté pour mes impôts ? » — twelve months to fill before the bill. */
+export type JarVisual = Visual<"jar", {
+    bill: Decimal;
+    needed_per_month: Decimal;
+    set_aside_per_month: Decimal;
+    per_day: Decimal;
+}>;
+/** « Puis-je encore verser sur mon 3e pilier ? » — paid and still possible, up to the legal limit, until 31.12. */
+export type GaugeVisual = Visual<"gauge", {
+    year: number;
+    limit: Decimal;
+    paid: Decimal;
+    left: Decimal;
+    deadline: IsoDate;
+    days_left: number;
+}>;
+/** « Un contrat doit-il être résilié bientôt ? » — today, the day the letter must arrive, the renewal. */
+export type DeadlineVisual = Visual<"deadline", {
+    today: IsoDate;
+    contracts: {
+        name: string;
+        ends_on: IsoDate;
+        cancel_before: IsoDate;
+        days_left: number;
+    }[];
+}>;
+export type AnswerVisual = RunwayVisual | ValleyVisual | ShiftVisual | DaysVisual | BalanceVisual | CountdownVisual | HorizonVisual | CalendarVisual | LeakVisual | JarVisual | GaugeVisual | DeadlineVisual;
+export type VisualKind = AnswerVisual["kind"];
+export declare const VISUAL_KINDS: readonly ["runway", "valley", "shift", "days", "balance", "countdown", "horizon", "calendar", "leak", "jar", "gauge", "deadline"];
+export type AnswerTone = "risk" | "warn" | "info";
+export type Answer = {
+    id: string;
+    question: string;
+    answer: string;
+    tone: AnswerTone;
+    because: string | null;
+    source: "kit" | "expert";
+    figures: Record<string, unknown>;
+    needs: string[];
+    visual?: AnswerVisual;
+};
+export type Answers = {
+    as_of: IsoDate;
+    currency: string;
+    language: string;
+    headline: string;
+    answers: Answer[];
+    all_clear: {
+        id: string;
+        question: string;
+        short: string;
+    }[];
+};
+export {};

package/dist/answers/draw.d.ts

@@ -0,0 +1,16 @@
+import { type Locale } from "../i18n";
+import type { AnswerVisual } from "./contract";
+/**
+ * The picture is laid out at the width it is shown (one unit = one pixel), so its 11px labels stay
+ * 11px on a phone instead of being shrunk with the drawing. Below 260 it is scaled down, above 320 up.
+ */
+export declare const MIN_WIDTH = 260;
+export declare const MAX_WIDTH = 320;
+/** Long labels are shortened so they never leave the picture. */
+export declare const shorten: (label: string, max?: number) => string;
+export type DrawOptions = {
+    /** The width the picture is shown at, in CSS pixels (its container's width). 320 by default. */
+    width?: number;
+};
+/** The picture of one answer, or null when there is none (or it cannot be drawn). */
+export declare function drawVisual(visual: AnswerVisual | null | undefined, locale: Locale, doc?: Document, options?: DrawOptions): SVGSVGElement | null;

package/dist/answers/index.d.ts

@@ -0,0 +1,6 @@
+/** Answer pictures without React: for pages that are not React apps (such as the assistants' card). */
+export type * from "./contract";
+export { VISUAL_KINDS } from "./contract";
+export { MAX_WIDTH, MIN_WIDTH, drawVisual, shorten } from "./draw";
+export type { DrawOptions } from "./draw";
+export { answerMessages } from "./messages";

package/dist/answers/messages.d.ts

@@ -0,0 +1,3 @@
+import type { Catalog } from "../i18n";
+/** The few words written inside the answer pictures. The captions themselves come from the engine. */
+export declare const answerMessages: Catalog;

package/dist/answers.js

@@ -0,0 +1,10 @@
+import { M as e, g as r, V as I, k as M, f as o, u as D } from "./index-yeBMtDf1.js";
+export {
+  e as MAX_WIDTH,
+  r as MIN_WIDTH,
+  I as VISUAL_KINDS,
+  M as answerMessages,
+  o as drawVisual,
+  D as shorten
+};
+//# sourceMappingURL=answers.js.map

package/dist/answers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"answers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/canvas/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * The Capture canvas: the public contract between an AI model and the Bazous UI.
+ *
+ * A model writes an HTML fragment for a captured bill. The server rejects any tag,
+ * attribute, class or intent outside these lists, the fragment runs in a sandboxed
+ * iframe with a CSP that forbids the network, and buttons only emit named intents.
+ * The same lists are enforced server-side; a test keeps them identical.
+ */
+export declare const CANVAS_TAGS: readonly ["section", "article", "header", "footer", "div", "span", "p", "h1", "h2", "h3", "h4", "ul", "ol", "li", "dl", "dt", "dd", "table", "thead", "tbody", "tr", "th", "td", "strong", "em", "b", "i", "small", "br", "hr", "button", "label", "input", "select", "option", "textarea", "figure", "figcaption", "blockquote", "code", "time", "mark"];
+export declare const CANVAS_ATTRIBUTES: readonly ["class", "id", "type", "name", "value", "placeholder", "for", "checked", "selected", "disabled", "min", "max", "step", "rows", "datetime", "title", "aria-label", "role", "data-intent", "data-field", "data-payload", "colspan", "scope", "data-pct"];
+export declare const CANVAS_INTENTS: readonly ["confirm", "discard", "answer", "reschedule", "mark_internal_transfer", "open_cockpit"];
+export type CanvasIntent = (typeof CANVAS_INTENTS)[number];
+export declare const CANVAS_FIELDS: readonly ["label", "amount", "currency", "due_date", "category"];
+export declare const CANVAS_CLASSES: readonly ["page", "eyebrow", "title", "lead", "muted", "small", "card", "card-head", "tile", "tile-dark", "tile-value", "amount", "neg", "pos", "row", "date", "list", "grid-2", "grid-3", "chip", "chip-warn", "chip-ok", "banner", "banner-warn", "impact", "impact-before", "impact-after", "arrow", "question", "field", "actions", "button", "button-primary", "button-ghost", "source", "confidence", "timeline", "timeline-item", "table", "kv", "kpis", "kpi-label", "kpi-value", "kpi-note", "bars", "bar", "bar-label", "bar-track", "bar-fill", "bar-fill-2", "bar-fill-3", "bar-fill-4", "bar-value", "meter", "meter-fill", "stack", "stack-seg-1", "stack-seg-2", "stack-seg-3", "stack-seg-4", "legend", "legend-item", "swatch-1", "swatch-2", "swatch-3", "swatch-4", "spark", "spark-col", "spark-col-warn", "delta", "delta-up", "delta-down", "timeline-h", "timeline-h-item", "timeline-h-item-now", "timeline-h-item-warn", "gauge", "gauge-fill"];
+/** Classes whose width (height for spark columns) comes from `data-pct="0..100"`, never from `style`. */
+export declare const CANVAS_SIZED_CLASSES: readonly ["bar-fill", "bar-fill-2", "bar-fill-3", "bar-fill-4", "meter-fill", "gauge-fill", "stack-seg-1", "stack-seg-2", "stack-seg-3", "stack-seg-4", "spark-col", "spark-col-warn"];
+export declare const CANVAS_CSS = "\n:root,[data-theme=dark]{color-scheme:dark;--ground:#0B0B0B;--ground-2:#1f1e1b;--card:#1A1A1A;--line:#3a3833;--line-2:#2a2926;--ink:#F5F3ED;--ink-2:#D9D6CE;--ink-3:#B7B5AE;--muted:#9a978f;--ember:#FF9292;--ember-2:#FFB4B4;--ember-bg:#392425;--ember-line:#6b3a3a;--gold:#DAAF37;--gold-2:#E8C46E;--leaf:#76CCA1;--leaf-bg:#1d3a2c;--contrast-bg:#0B0B0B;--contrast-line:#DAAF37;--contrast-ink:#F5F3ED;--contrast-muted:#B7B5AE;--quote:#23211d;--mark:#5a4a1c;--sans:\"Montserrat\",system-ui,-apple-system,\"Segoe UI\",sans-serif;--serif:\"Playfair Display\",Georgia,serif}\n[data-theme=light]{color-scheme:light;--ground:#F5F3ED;--ground-2:#eae8e1;--card:#FFFFFF;--line:#cdd0d2;--line-2:#e2e3e2;--ink:#15191F;--ink-2:#323943;--ink-3:#555E6B;--muted:#838a93;--ember:#B33535;--ember-2:#8c2b2b;--ember-bg:#fff0f0;--ember-line:#e4b2b2;--gold:#896313;--gold-2:#DAAF37;--leaf:#1B704A;--leaf-bg:#e3f3ea;--contrast-bg:#0B0B0B;--contrast-line:#0B0B0B;--contrast-ink:#F5F3ED;--contrast-muted:#B7B5AE;--quote:#fbf8ee;--mark:#fbf3dd}\n*{box-sizing:border-box}\nhtml,body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45}\n.page{display:flex;flex-direction:column;gap:16px;padding:8px 4px 24px}\nh1,h2,h3,h4{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:-.01em}\nh1,.title{font-size:1.7rem;line-height:1.1}h2{font-size:1.2rem}h3{font-size:1.05rem}\np{margin:0}\n.eyebrow{color:var(--gold);letter-spacing:.14em;font-size:.72rem;font-weight:600;text-transform:uppercase}\n.lead{font-size:1.02rem;color:var(--ink-3)}\n.muted{color:var(--ink-3)}.small{font-size:.8rem}\n.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}\n.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}\n.tile{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}\n.tile-dark{background:var(--contrast-bg);border-color:var(--contrast-line);color:var(--contrast-ink)}\n.tile-dark .eyebrow,.tile-dark .muted{color:var(--contrast-muted)}\n.tile-value{font-family:var(--serif);font-size:2rem;font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}\n.tile-dark .tile-value{color:var(--gold-2)}\n.amount{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}\n.neg{color:var(--ember)}.pos{color:var(--leaf)}\n.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}\n.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}\n.list{display:flex;flex-direction:column}\n.row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line-2);font-size:.9rem}\n.row:first-child{border-top:0}\n.date{width:48px;flex:none;color:var(--muted);font-variant-numeric:tabular-nums}\n.chip{display:inline-block;font-size:.74rem;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--ground-2);color:var(--ink-2)}\n.chip-warn{background:var(--ember-bg);color:var(--ember-2)}\n.chip-ok{background:var(--leaf-bg);color:var(--leaf)}\n.banner{padding:12px 16px;border-radius:12px;background:var(--ground-2);font-size:.9rem}\n.banner-warn{background:var(--ember-bg);border:1px solid var(--ember-line);color:var(--ember-2)}\n.impact{display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--contrast-bg);border:1px solid var(--contrast-line);color:var(--contrast-ink);border-radius:12px;font-variant-numeric:tabular-nums;flex-wrap:wrap}\n.impact-before{color:var(--contrast-muted);font-size:1.05rem}\n.impact-after{color:var(--gold-2);font-family:var(--serif);font-size:1.6rem;font-weight:600}\n.arrow{color:var(--contrast-muted);font-size:1.2rem}\n.question{padding:12px 14px;background:var(--quote);border:1px solid var(--line);border-radius:10px;display:flex;flex-direction:column;gap:8px;font-size:.92rem}\n.field{display:flex;flex-direction:column;gap:4px;font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}\n.field input,.field select,.field textarea{font:500 15px var(--sans);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:var(--card);text-transform:none;letter-spacing:0}\n.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);border-color:var(--gold)}\n.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}\n.button{font:600 13px var(--sans);border:1px solid var(--line);border-radius:10px;padding:0 14px;height:38px;background:var(--card);color:var(--ink);cursor:pointer}\n.button-primary{background:var(--gold-2);border-color:var(--gold-2);color:#0B0B0B}\n.button-ghost{background:transparent;color:var(--gold)}\n.button:hover{filter:brightness(.97)}\n.source{font-size:.82rem;color:var(--ink-3);border-left:3px solid var(--gold);padding:6px 12px;background:var(--quote);border-radius:0 8px 8px 0;font-style:italic}\n.confidence{font-size:.78rem;color:var(--muted)}\n.timeline{display:flex;flex-direction:column;gap:0}\n.timeline-item{display:flex;gap:12px;padding:8px 0;border-left:2px solid var(--line);padding-left:14px;font-size:.88rem;position:relative}\n.timeline-item::before{content:\"\";position:absolute;left:-6px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--ink)}\n.table{width:100%;border-collapse:collapse;font-size:.88rem}\n.table th,.table td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line-2)}\n.table th{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}\n.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:.9rem}\n.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:500}\nhr{border:0;border-top:1px solid var(--line-2);margin:4px 0}\n/* dashboard primitives \u2014 sized by data-pct, applied by the bridge */\n.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}\n.kpi-label{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}\n.tile-dark .kpi-label{color:var(--contrast-muted)}\n.kpi-value{font-family:var(--serif);font-size:1.75rem;font-weight:600;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}\n.tile-dark .kpi-value{color:var(--gold-2)}\n.kpi-note{font-size:.78rem;color:var(--ink-3)}\n.tile-dark .kpi-note{color:var(--contrast-muted)}\n.bars{display:flex;flex-direction:column;gap:8px}\n.bar{display:grid;grid-template-columns:minmax(90px,38%) 1fr auto;align-items:center;gap:10px;font-size:.86rem}\n.bar-label{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.bar-track{display:block;height:9px;border-radius:5px;background:var(--ground-2);overflow:hidden}\n.bar-fill,.bar-fill-2,.bar-fill-3,.bar-fill-4{display:block;height:100%;border-radius:5px;width:0;transition:width .35s ease}\n.bar-fill{background:var(--gold-2)}.bar-fill-2{background:var(--ink)}.bar-fill-3{background:var(--ink-2)}.bar-fill-4{background:var(--muted)}\n.bar-value{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}\n.meter,.gauge{display:block;height:8px;border-radius:4px;background:var(--ground-2);overflow:hidden}\n.meter-fill,.gauge-fill{display:block;height:100%;border-radius:4px;width:0;background:var(--leaf);transition:width .35s ease}\n.gauge{height:14px;border-radius:7px}.gauge-fill{background:var(--gold)}\n.stack{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--ground-2)}\n.stack-seg-1,.stack-seg-2,.stack-seg-3,.stack-seg-4{display:block;height:100%;width:0}\n.stack-seg-1{background:var(--gold-2)}.stack-seg-2{background:var(--ink)}.stack-seg-3{background:var(--ink-2)}.stack-seg-4{background:var(--muted)}\n.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--ink-3)}\n.legend-item{display:inline-flex;align-items:center;gap:6px}\n.swatch-1,.swatch-2,.swatch-3,.swatch-4{display:inline-block;width:10px;height:10px;border-radius:2px}\n.swatch-1{background:var(--gold-2)}.swatch-2{background:var(--ink)}.swatch-3{background:var(--ink-2)}.swatch-4{background:var(--muted)}\n.spark{display:flex;align-items:flex-end;gap:3px;height:56px;padding:4px 0;border-bottom:1px solid var(--line)}\n.spark-col,.spark-col-warn{display:block;flex:1;min-width:6px;height:0;border-radius:2px 2px 0 0;background:var(--ink)}\n.spark-col-warn{background:var(--ember)}\n.delta{display:inline-block;font-size:.8rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--ground-2);font-variant-numeric:tabular-nums}\n.delta-up{background:var(--leaf-bg);color:var(--leaf)}.delta-down{background:var(--ember-bg);color:var(--ember-2)}\n.timeline-h{display:flex;gap:0;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:var(--card)}\n.timeline-h-item{flex:1;padding:10px 12px;font-size:.8rem;color:var(--ink-3);border-left:1px solid var(--line-2);position:relative;min-width:0}\n.timeline-h-item:first-child{border-left:0}\n.timeline-h-item::before{content:\"\";display:block;width:8px;height:8px;border-radius:50%;background:var(--muted);margin-bottom:6px}\n.timeline-h-item-now{color:var(--gold);font-weight:600}.timeline-h-item-now::before{background:var(--gold)}\n.timeline-h-item-warn{background:var(--ember-bg);color:var(--ember-2);font-weight:600}.timeline-h-item-warn::before{background:var(--ember)}\nmark{background:var(--mark);padding:0 3px;border-radius:3px}\n@media (max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr}.tile-value{font-size:1.6rem}.kpi-value{font-size:1.4rem}.timeline-h{flex-direction:column}.timeline-h-item{border-left:0;border-top:1px solid var(--line-2)}.timeline-h-item:first-child{border-top:0}}\n";
+/** Runs inside the sandbox: sizes data-pct elements and forwards intents and field values to the host. */
+export declare const CANVAS_BRIDGE = "\n(function(){\n  function fields(){var o={};document.querySelectorAll('[data-field]').forEach(function(el){o[el.getAttribute('data-field')]=el.value;});return o;}\n  document.addEventListener('click',function(ev){\n    var btn=ev.target.closest('[data-intent]');if(!btn)return;ev.preventDefault();\n    var payload=btn.getAttribute('data-payload');\n    var q=btn.closest('.question');var answer=null;\n    if(q){var inp=q.querySelector('input,select,textarea');if(inp)answer=inp.value;}\n    parent.postMessage({source:'billminder-canvas',intent:btn.getAttribute('data-intent'),payload:payload,answer:answer,fields:fields()},'*');\n  });\n  function size(){document.querySelectorAll('[data-pct]').forEach(function(el){var p=Math.max(0,Math.min(100,parseInt(el.getAttribute('data-pct'),10)||0));var c=el.className||'';if(c.indexOf('spark-col')>=0){el.style.height=p+'%';}else{el.style.width=p+'%';}});}\n  size();\n  function report(){parent.postMessage({source:'billminder-canvas',intent:'resize',height:document.documentElement.scrollHeight},'*');}\n  new ResizeObserver(report).observe(document.documentElement);report();\n})();\n";
+export type CanvasMessage = {
+    source: "billminder-canvas";
+    intent: CanvasIntent;
+    payload: string | null;
+    answer: string | null;
+    fields: Record<string, string>;
+} | {
+    source: "billminder-canvas";
+    intent: "resize";
+    height: number;
+};
+/** A complete sandboxed document for `<iframe sandbox="allow-scripts" srcdoc=…>`. */
+export declare function canvasDocument(fragment: string, theme?: "dark" | "light", lang?: string): string;