@classytic/labs 0.6.0 → 0.7.0

package/dist/domains/accounting/trial-balance/scene.mjs

@@ -0,0 +1,293 @@
+'use client';
+
+import { formatMoney } from "../../../model/money.mjs";
+import { Chip } from "../../../kit/controls.mjs";
+import { useControl } from "../../../runtime/use-control.mjs";
+import { useLabView } from "../../../runtime/use-lab-view.mjs";
+import { tbAmount, trialBalanceModel } from "./model.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/domains/accounting/trial-balance/scene.tsx
+function TrialBalanceScene() {
+	const { scenario: s, reading: r, state } = useLabView(trialBalanceModel);
+	const account = useControl(trialBalanceModel, "account");
+	const column = useControl(trialBalanceModel, "column");
+	const errorPick = useControl(trialBalanceModel, "error");
+	const verdict = useControl(trialBalanceModel, "verdict");
+	const next = useControl(trialBalanceModel, "next");
+	const amount = (v) => tbAmount(v, s.currency);
+	const money = (v) => formatMoney(v, { currency: s.currency });
+	const errors = s.mode === "errors";
+	const landed = s.rows.filter((row) => row.column !== "out" && state.placed[row.id] !== undefined);
+	const leftOut = s.rows.filter((row) => row.column === "out" && state.placed[row.id] !== undefined);
+	const finished = errors ? true : r.complete;
+	const judged = errors && r.verdict !== undefined;
+	const totalsMoved = judged && r.error ? {
+		debit: r.error.effect.debit !== 0,
+		credit: r.error.effect.credit !== 0
+	} : undefined;
+	const line = (row, i) => /* @__PURE__ */ jsxs("tr", {
+		"data-new": !errors && row.id === r.last?.id ? true : undefined,
+		children: [
+			/* @__PURE__ */ jsx("td", {
+				className: "tbal-serial",
+				children: row.code ?? i + 1
+			}),
+			/* @__PURE__ */ jsx("td", {
+				className: "tbal-name",
+				children: row.name
+			}),
+			s.hasFolio ? /* @__PURE__ */ jsx("td", {
+				className: "tbal-folio",
+				children: row.folio ?? ""
+			}) : null,
+			/* @__PURE__ */ jsx("td", {
+				className: "tbal-amount",
+				children: row.column === "debit" ? amount(row.balance) : ""
+			}),
+			/* @__PURE__ */ jsx("td", {
+				className: "tbal-amount",
+				children: row.column === "credit" ? amount(row.balance) : ""
+			})
+		]
+	}, row.id);
+	const status = () => {
+		if (!finished) return null;
+		const t = r.totals;
+		return /* @__PURE__ */ jsx("p", {
+			className: "tbal-status",
+			"data-agrees": t.agrees,
+			children: t.agrees ? s.phrases.agree : `${s.phrases.differ} ${money(Math.abs(t.difference))}.`
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "tbal",
+		"data-mode": s.mode,
+		children: [
+			!errors && r.inHand ? /* @__PURE__ */ jsxs("div", {
+				className: "tbal-hand",
+				"data-state": r.wrong ? "wrong" : undefined,
+				"aria-live": "polite",
+				children: [
+					/* @__PURE__ */ jsxs("p", {
+						className: "tbal-hand-line",
+						children: [/* @__PURE__ */ jsx("strong", { children: r.inHand.name }), /* @__PURE__ */ jsx("span", {
+							className: "tbal-hand-amount",
+							children: money(r.inHand.balance)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "tbal-keys",
+						role: "group",
+						"aria-label": `Where does ${r.inHand.name} go?`,
+						children: [
+							/* @__PURE__ */ jsx(Chip, {
+								control: column,
+								option: "debit",
+								children: "Debit"
+							}),
+							/* @__PURE__ */ jsx(Chip, {
+								control: column,
+								option: "credit",
+								children: "Credit"
+							}),
+							/* @__PURE__ */ jsx(Chip, {
+								control: column,
+								option: "out",
+								children: "Leave out"
+							})
+						]
+					}),
+					r.wrong ? /* @__PURE__ */ jsx("p", {
+						className: "tbal-why",
+						children: r.wrong.row.why ?? r.wrong.row.reason
+					}) : null
+				]
+			}) : null,
+			!errors && r.last?.why && !r.wrong ? /* @__PURE__ */ jsxs("p", {
+				className: "tbal-rule",
+				children: ["✓ ", r.last.why]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "tbal-page",
+				"data-finished": finished,
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "tbal-business",
+						children: s.business
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "tbal-title",
+						children: s.headings.title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "tbal-date",
+						children: s.asAt
+					}),
+					/* @__PURE__ */ jsxs("table", {
+						className: "tbal-table",
+						children: [
+							/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+								/* @__PURE__ */ jsx("th", {
+									className: "tbal-serial",
+									children: s.headings.serial
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "tbal-name",
+									children: s.headings.account
+								}),
+								s.hasFolio ? /* @__PURE__ */ jsx("th", {
+									className: "tbal-folio",
+									children: s.headings.folio
+								}) : null,
+								/* @__PURE__ */ jsx("th", {
+									className: "tbal-amount",
+									children: s.headings.debit
+								}),
+								/* @__PURE__ */ jsx("th", {
+									className: "tbal-amount",
+									children: s.headings.credit
+								})
+							] }) }),
+							/* @__PURE__ */ jsx("tbody", { children: landed.length === 0 ? /* @__PURE__ */ jsx("tr", {
+								className: "tbal-empty",
+								children: /* @__PURE__ */ jsx("td", {
+									colSpan: s.hasFolio ? 5 : 4,
+									children: "…"
+								})
+							}) : landed.map(line) }),
+							/* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", {
+								className: "tbal-total",
+								"data-finished": finished,
+								children: [
+									/* @__PURE__ */ jsx("td", {}),
+									/* @__PURE__ */ jsxs("td", {
+										className: "tbal-name",
+										children: [s.headings.total, " ="]
+									}),
+									s.hasFolio ? /* @__PURE__ */ jsx("td", {}) : null,
+									/* @__PURE__ */ jsx("td", {
+										className: "tbal-amount",
+										"data-moved": totalsMoved?.debit || undefined,
+										children: amount(r.totals.debitTotal)
+									}),
+									/* @__PURE__ */ jsx("td", {
+										className: "tbal-amount",
+										"data-moved": totalsMoved?.credit || undefined,
+										children: amount(r.totals.creditTotal)
+									})
+								]
+							}) })
+						]
+					}),
+					leftOut.length > 0 ? /* @__PURE__ */ jsxs("p", {
+						className: "tbal-out",
+						children: [
+							/* @__PURE__ */ jsxs("span", { children: [s.headings.out, ":"] }),
+							" ",
+							leftOut.map((row) => `${row.name} ${amount(row.balance)}`).join(" · ")
+						]
+					}) : null
+				]
+			}),
+			!errors ? status() : null,
+			!errors && !r.complete ? /* @__PURE__ */ jsx("div", {
+				className: "tbal-rack",
+				role: "group",
+				"aria-label": "Ledger balances still to place",
+				children: s.rows.filter((row) => state.placed[row.id] === undefined && row.id !== r.inHand?.id).map((row) => /* @__PURE__ */ jsx(Chip, {
+					control: account,
+					option: row.id,
+					children: row.name
+				}, row.id))
+			}) : null,
+			errors && r.error ? /* @__PURE__ */ jsxs("div", {
+				className: "tbal-error",
+				"aria-live": "polite",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "tbal-error-pick",
+						role: "group",
+						"aria-label": "Errors",
+						children: s.errors.map((e, i) => /* @__PURE__ */ jsx("span", {
+							className: "tbal-error-chip",
+							"data-judged": state.verdicts[e.id] !== undefined,
+							children: /* @__PURE__ */ jsx(Chip, {
+								control: errorPick,
+								option: e.id,
+								children: i + 1
+							})
+						}, e.id))
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "tbal-error-text",
+						children: r.error.text
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "tbal-keys",
+						role: "group",
+						"aria-label": "Do the totals still agree?",
+						"data-state": judged && !r.verdictRight ? "wrong" : undefined,
+						children: [judged ? /* @__PURE__ */ jsx(Chip, {
+							control: verdict,
+							option: r.verdict,
+							children: r.verdict === "agree" ? "Totals agree" : "Totals disagree"
+						}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Chip, {
+							control: verdict,
+							option: "agree",
+							children: "Totals agree"
+						}), /* @__PURE__ */ jsx(Chip, {
+							control: verdict,
+							option: "disagree",
+							children: "Totals disagree"
+						})] }), judged ? /* @__PURE__ */ jsx("span", {
+							className: "tbal-mark",
+							children: r.verdictRight ? "✓" : "✗"
+						}) : null]
+					}),
+					judged ? /* @__PURE__ */ jsxs("div", {
+						className: "tbal-effect",
+						children: [
+							/* @__PURE__ */ jsxs("p", {
+								className: "tbal-effect-line",
+								children: [
+									s.headings.debit,
+									": ",
+									amount(s.truth.debitTotal),
+									" → ",
+									/* @__PURE__ */ jsx("b", { children: amount(r.error.after.debitTotal) }),
+									/* @__PURE__ */ jsx("br", {}),
+									s.headings.credit,
+									": ",
+									amount(s.truth.creditTotal),
+									" →",
+									" ",
+									/* @__PURE__ */ jsx("b", { children: amount(r.error.after.creditTotal) })
+								]
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "tbal-status",
+								"data-agrees": r.error.after.agrees,
+								children: r.error.after.agrees ? s.phrases.hidden : s.phrases.found
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "tbal-why",
+								children: r.error.why
+							}),
+							!r.allJudged ? /* @__PURE__ */ jsx("div", {
+								className: "tbal-keys",
+								children: /* @__PURE__ */ jsx(Chip, {
+									control: next,
+									children: "Next error"
+								})
+							}) : null
+						]
+					}) : null
+				]
+			}) : null
+		]
+	});
+}
+
+//#endregion
+export { TrialBalanceScene };

package/dist/domains/accounting/value-crossing/model.mjs

@@ -1,4 +1,5 @@
 import { defineLabModel } from "../../../model/define.mjs";
+import { formatMoney, formatNumber, groupingFor } from "../../../model/money.mjs";
 import { z } from "zod";
 
 //#region src/domains/accounting/value-crossing/model.ts
@@ -14,11 +15,11 @@ import { z } from "zod";
 * the correct opening claim for every round.
 */
 const deltaFor = (c) => c.effect === "grow" ? c.amount : c.effect === "shrink" ? -c.amount : 0;
-const makeCrossings = (incomeAmount, assetAmount, expenseAmount) => [
+const makeCrossings = (incomeAmount, assetAmount, expenseAmount, currency) => [
 	{
 		id: "income",
 		title: "Photocopying income",
-		story: `A customer pays ${incomeAmount.toLocaleString("en-US")} for photocopying services.`,
+		story: `A customer pays ${formatNumber(incomeAmount, { grouping: groupingFor(currency) })} for photocopying services.`,
 		amount: incomeAmount,
 		effect: "grow",
 		payoff: "Cash enters for a service already provided. Assets and the owner claim grow together."
@@ -26,7 +27,7 @@ const makeCrossings = (incomeAmount, assetAmount, expenseAmount) => [
 	{
 		id: "van",
 		title: "Buy a delivery van",
-		story: `The shop pays ${assetAmount.toLocaleString("en-US")} cash for a delivery van.`,
+		story: `The shop pays ${formatNumber(assetAmount, { grouping: groupingFor(currency) })} cash for a delivery van.`,
 		amount: assetAmount,
 		effect: "swap",
 		payoff: "Cash leaves as the van enters. One asset replaces another, so the owner claim stays still."
@@ -34,7 +35,7 @@ const makeCrossings = (incomeAmount, assetAmount, expenseAmount) => [
 	{
 		id: "wages",
 		title: "Pay the assistant",
-		story: `The shop pays ${expenseAmount.toLocaleString("en-US")} wages for work already used.`,
+		story: `The shop pays ${formatNumber(expenseAmount, { grouping: groupingFor(currency) })} wages for work already used.`,
 		amount: expenseAmount,
 		effect: "shrink",
 		payoff: "Cash leaves and no asset remains. Assets and the owner claim shrink together."
@@ -51,7 +52,7 @@ const valueCrossingModel = defineLabModel({
 	}),
 	resolve(p) {
 		return {
-			crossings: makeCrossings(p.incomeAmount, p.assetAmount, p.expenseAmount),
+			crossings: makeCrossings(p.incomeAmount, p.assetAmount, p.expenseAmount, p.currency),
 			openingCapital: p.openingCapital,
 			currency: p.currency
 		};
@@ -116,9 +117,20 @@ const valueCrossingModel = defineLabModel({
 		]
 	}),
 	describe: (s, _st, r) => {
-		const money = (value) => `${s.currency}${Math.round(value).toLocaleString("en-US")}`;
-		if (r.finished) return `Every crossing is predicted. The last: ${r.item.payoff} Owner claim moves from ${money(r.before)} to ${money(r.after)}.`;
-		if (r.correct) return `${r.item.payoff} Owner claim changes from ${money(r.before)} to ${money(r.after)}.`;
+		if (r.finished) return `Every crossing is predicted. The last: ${r.item.payoff} Owner claim moves from ${formatMoney(r.before, {
+			currency: s.currency,
+			decimals: 0
+		})} to ${formatMoney(r.after, {
+			currency: s.currency,
+			decimals: 0
+		})}.`;
+		if (r.correct) return `${r.item.payoff} Owner claim changes from ${formatMoney(r.before, {
+			currency: s.currency,
+			decimals: 0
+		})} to ${formatMoney(r.after, {
+			currency: s.currency,
+			decimals: 0
+		})}.`;
 		if (r.choice) return "That pattern does not fit this crossing. Ask whether value entered, merely changed form, or left after being used up.";
 		return r.item.story;
 	}

package/dist/domains/accounting/value-crossing/scene.mjs

@@ -1,11 +1,11 @@
 'use client';
 
+import { formatMoney } from "../../../model/money.mjs";
 import { FigText } from "../../../kit/figure/text.mjs";
 import { Figure, HUE, STROKE, alpha, shade, tint } from "../../../kit/figure/figure.mjs";
 import { ActionButton } from "../../../kit/controls.mjs";
-import { Arrow } from "../../../kit/figure/beam.mjs";
-import "../../../kit/figure/index.mjs";
 import { useLabView } from "../../../runtime/use-lab-view.mjs";
+import { Arrow } from "../../../kit/figure/beam.mjs";
 import { Building } from "../../../kit/commerce/buildings.mjs";
 import { NoteBundle, Person } from "../../../kit/commerce/glyphs.mjs";
 import { valueCrossingModel } from "./model.mjs";
@@ -13,15 +13,18 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowLeftRight, TrendingDown, TrendingUp } from "lucide-react";
 
 //#region src/domains/accounting/value-crossing/scene.tsx
-function money(value, currency) {
-	return `${currency}${Math.round(value).toLocaleString("en-US")}`;
-}
 function ValueCrossingScene() {
 	const { scenario, reading, act } = useLabView(valueCrossingModel);
 	const { item, before, after, correct, choice } = reading;
 	const currency = scenario.currency;
 	const revealed = correct;
-	const sceneLabel = revealed ? `${item.story} ${item.payoff} Owner claim changes from ${money(before, currency)} to ${money(after, currency)}.` : `${item.story} Predict whether the owner claim grows, stays the same, or shrinks.`;
+	const sceneLabel = revealed ? `${item.story} ${item.payoff} Owner claim changes from ${formatMoney(before, {
+		currency,
+		decimals: 0
+	})} to ${formatMoney(after, {
+		currency,
+		decimals: 0
+	})}.` : `${item.story} Predict whether the owner claim grows, stays the same, or shrinks.`;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "grid gap-4",
 		children: [
@@ -94,7 +97,10 @@ function ValueCrossingScene() {
 								anchor: "middle",
 								size: "label",
 								tone: "good",
-								children: money(revealed ? after : before, currency)
+								children: formatMoney(revealed ? after : before, {
+									currency,
+									decimals: 0
+								})
 							})
 						]
 					}),
@@ -116,7 +122,10 @@ function ValueCrossingScene() {
 								h: 28,
 								depth: 1,
 								color: HUE.good,
-								label: money(item.amount, currency)
+								label: formatMoney(item.amount, {
+									currency,
+									decimals: 0
+								})
 							})
 						}),
 						/* @__PURE__ */ jsx(Arrow, {
@@ -177,7 +186,10 @@ function ValueCrossingScene() {
 								h: 28,
 								depth: 1,
 								color: HUE.warn,
-								label: money(item.amount, currency)
+								label: formatMoney(item.amount, {
+									currency,
+									decimals: 0
+								})
 							})
 						}),
 						/* @__PURE__ */ jsx(Arrow, {
@@ -215,7 +227,10 @@ function ValueCrossingScene() {
 								h: 28,
 								depth: 1,
 								color: HUE.warn,
-								label: money(item.amount, currency)
+								label: formatMoney(item.amount, {
+									currency,
+									decimals: 0
+								})
 							})
 						}),
 						/* @__PURE__ */ jsx(Arrow, {

package/dist/domains/accounting/variance-detective/model.mjs

@@ -1,4 +1,5 @@
 import { defineLabModel } from "../../../model/define.mjs";
+import { formatMoney, formatNumber } from "../../../model/money.mjs";
 import { refuse } from "../../../model/index.mjs";
 import { z } from "zod";
 import { analyzeCostVariances } from "@classytic/stage/finance/management-accounting";
@@ -175,12 +176,12 @@ const varianceDetectiveModel = defineLabModel({
 		salesUnits: s.budgetedSalesUnits !== s.actualSalesUnits ? s.budgetedSalesUnits : s.actualSalesUnits + s.salesStep
 	}),
 	describe: (s, st, r) => {
-		const money = (v) => `${s.currency}${v.amount.toLocaleString()} ${v.outcome === "favorable" ? "favorable" : v.outcome === "adverse" ? "adverse" : "neutral"}`;
+		const money = (v) => `${formatMoney(v.amount, { currency: s.currency })} ${v.outcome === "favorable" ? "favorable" : v.outcome === "adverse" ? "adverse" : "neutral"}`;
 		if (r.atStandard && !r.salesChanged) {
 			return `Usage variance is now zero: material usage ${money(r.material.usage)}, price ${money(r.material.price)}. Usage variance is now zero. The purchase-price difference remains because actual price did not change.`;
 		}
 		if (r.salesChanged) {
-			return `Actual units sold is ${st.salesUnits.toLocaleString()}, moving the sales-volume variance to ${money(r.sales.volume)}. Reconciled profit variance is ${money(r.totalProfitVariance)}.`;
+			return `Actual units sold is ${formatNumber(st.salesUnits)}, moving the sales-volume variance to ${money(r.sales.volume)}. Reconciled profit variance is ${money(r.totalProfitVariance)}.`;
 		}
 		return `Material price ${money(r.material.price)}, usage ${money(r.material.usage)}. Labour rate ${money(r.labour.rate)}, efficiency ${money(r.labour.efficiency)}. Reconciled profit variance ${money(r.totalProfitVariance)}.`;
 	}

package/dist/domains/accounting/variance-detective/runtime.mjs

@@ -1,5 +1,6 @@
 'use client';
 
+import { formatMoney, formatNumber } from "../../../model/money.mjs";
 import { Readout, Stat, StatList } from "../../../kit/frame.mjs";
 import { useLab } from "../../../runtime/use-lab.mjs";
 import { AuthoredActivityRuntime } from "../../../kit/authored-activity-runtime.mjs";
@@ -18,7 +19,7 @@ function VarianceDetective(props) {
 		sceneLabel: "A standard-costing variance investigation",
 		status: ({ reading }) => `${reading.atStandard ? "at standard" : "away from standard"} · ${reading.salesChanged ? "sales changed" : "sales at starting point"}`,
 		evidence: ({ reading, scenario, sequence }) => {
-			const money = (v) => `${scenario.currency}${v.amount.toLocaleString()} ${v.outcome === "favorable" ? "F" : v.outcome === "adverse" ? "A" : "neutral"}`;
+			const money = (v) => `${formatMoney(v.amount, { currency: scenario.currency })} ${v.outcome === "favorable" ? "F" : v.outcome === "adverse" ? "A" : "neutral"}`;
 			const showVariances = sequence.shows("variances");
 			const showTotal = sequence.shows("total");
 			return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -29,11 +30,11 @@ function VarianceDetective(props) {
 				/* @__PURE__ */ jsxs(StatList, { children: [
 					/* @__PURE__ */ jsx(Stat, {
 						label: "standard quantity for output",
-						value: reading.standardQuantity.toLocaleString()
+						value: formatNumber(reading.standardQuantity)
 					}),
 					/* @__PURE__ */ jsx(Stat, {
 						label: "standard hours for output",
-						value: reading.standardHours.toLocaleString()
+						value: formatNumber(reading.standardHours)
 					}),
 					/* @__PURE__ */ jsx(Stat, {
 						label: "sales-volume basis",

package/dist/domains/accounting/variance-detective/scene.mjs

@@ -1,9 +1,9 @@
 'use client';
 
+import { formatMoney, formatNumber } from "../../../model/money.mjs";
 import { FigText } from "../../../kit/figure/text.mjs";
 import { Figure, HUE, STROKE, alpha } from "../../../kit/figure/figure.mjs";
 import { GripSlider } from "../../../kit/figure/grip.mjs";
-import "../../../kit/figure/index.mjs";
 import { useControl } from "../../../runtime/use-control.mjs";
 import { useLabView } from "../../../runtime/use-lab-view.mjs";
 import { varianceDetectiveModel } from "./model.mjs";
@@ -22,12 +22,12 @@ function ComparisonPanel({ kind, standard, actual, control, resultLabel }) {
 	const actualX = xOf(actual);
 	const difference = actual - standard;
 	const favorable = material ? difference < 0 : difference > 0;
-	const differenceText = difference === 0 ? "matches standard" : `${Math.abs(difference).toLocaleString()} units ${difference > 0 ? "above" : "below"} ${material ? "standard" : "budget"}`;
+	const differenceText = difference === 0 ? "matches standard" : `${formatNumber(Math.abs(difference))} units ${difference > 0 ? "above" : "below"} ${material ? "standard" : "budget"}`;
 	return /* @__PURE__ */ jsxs(Figure, {
 		viewBox: [360, resultLabel ? 198 : 172],
 		domain: "commerce",
 		interactive: !control.hidden,
-		label: `${material ? "Material quantity" : "Sales volume"} evidence. ${scope} ${standard.toLocaleString()} units; ${actualName} ${actual.toLocaleString()} units. ${differenceText}.`,
+		label: `${material ? "Material quantity" : "Sales volume"} evidence. ${scope} ${formatNumber(standard)} units; ${actualName} ${formatNumber(actual)} units. ${differenceText}.`,
 		children: [
 			/* @__PURE__ */ jsx(FigText, {
 				x: LEFT,
@@ -51,7 +51,7 @@ function ComparisonPanel({ kind, standard, actual, control, resultLabel }) {
 				size: "note",
 				anchor: "end",
 				caps: false,
-				children: standard.toLocaleString()
+				children: formatNumber(standard)
 			}),
 			/* @__PURE__ */ jsx("rect", {
 				x: LEFT,
@@ -83,7 +83,7 @@ function ComparisonPanel({ kind, standard, actual, control, resultLabel }) {
 				size: "note",
 				anchor: "end",
 				caps: false,
-				children: actual.toLocaleString()
+				children: formatNumber(actual)
 			}),
 			/* @__PURE__ */ jsx("rect", {
 				x: LEFT,
@@ -157,7 +157,7 @@ function VarianceDetectiveScene() {
 	const { scenario, reading } = useLabView(varianceDetectiveModel);
 	const materialControl = useControl(varianceDetectiveModel, "materialQuantity");
 	const salesControl = useControl(varianceDetectiveModel, "salesUnits");
-	const money = (v) => `${scenario.currency}${v.amount.toLocaleString()} ${v.outcome === "favorable" ? "F" : v.outcome === "adverse" ? "A" : "neutral"}`;
+	const money = (v) => `${formatMoney(v.amount, { currency: scenario.currency })} ${v.outcome === "favorable" ? "F" : v.outcome === "adverse" ? "A" : "neutral"}`;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "grid gap-4",
 		children: [/* @__PURE__ */ jsx(ComparisonPanel, {

package/dist/domains/biology/cell-energy/scene.mjs

@@ -4,16 +4,13 @@ import { FigText } from "../../../kit/figure/text.mjs";
 import { Figure, HUE, STROKE, tint } from "../../../kit/figure/figure.mjs";
 import { GripDot, GripKey, GripSlider } from "../../../kit/figure/grip.mjs";
 import { Stat, StatList } from "../../../kit/frame.mjs";
-import { Arrow } from "../../../kit/figure/beam.mjs";
-import { useNarrow } from "../../../kit/figure/narrow.mjs";
-import { Display } from "../../../kit/scene/objects/block.mjs";
-import "../../../kit/scene/index.mjs";
-import "../../../kit/figure/index.mjs";
 import { useControl } from "../../../runtime/use-control.mjs";
+import { Reading } from "../../../kit/figure/reading.mjs";
 import { useLabView } from "../../../runtime/use-lab-view.mjs";
+import { Arrow } from "../../../kit/figure/beam.mjs";
+import { useNarrow } from "../../../kit/figure/narrow.mjs";
 import { useEarned } from "../../../kit/shell/earned.mjs";
 import { MembranePatch } from "../../../kit/biology/cell/membrane.mjs";
-import "../../../kit/biology/index.mjs";
 import { cellEnergyModel } from "./model.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -267,12 +264,14 @@ function CellEnergyPicture({ reading, demand, glucose, oxygen, fermentation, ear
 								height: 17,
 								fill: HUE.soft
 							}),
-							/* @__PURE__ */ jsx(Display, {
+							/* @__PURE__ */ jsx(Reading, {
+								face: "window",
 								x: barX,
 								y: workY + 96,
 								w: barWidth,
 								h: 44,
-								lines: [`ATP ${reading.atpProduction.toFixed(0)} / ${reading.atpDemand.toFixed(0)}`, `${reading.suppliedWorkPercent.toFixed(0)}% work supplied`]
+								label: `ATP ${reading.atpProduction.toFixed(0)} / ${reading.atpDemand.toFixed(0)}`,
+								value: `${reading.suppliedWorkPercent.toFixed(0)}% work supplied`
 							}),
 							/* @__PURE__ */ jsx("title", { children: "Upper bar: ATP produced. Lower bar: ATP demanded. Both use a fixed scale of zero to 300 relative ATP-rate units." })
 						]

package/dist/domains/biology/cell-system/scene.mjs

@@ -4,18 +4,15 @@ import { FigText } from "../../../kit/figure/text.mjs";
 import { Figure, HUE, STROKE, tint } from "../../../kit/figure/figure.mjs";
 import { GripDot, GripKey } from "../../../kit/figure/grip.mjs";
 import { Stat, StatList } from "../../../kit/frame.mjs";
+import { useControl } from "../../../runtime/use-control.mjs";
+import { LabelChip } from "../../../kit/scene/workbench.mjs";
+import { useLabView } from "../../../runtime/use-lab-view.mjs";
 import { Arrow } from "../../../kit/figure/beam.mjs";
 import { FigureAction } from "../../../kit/figure/action.mjs";
 import { DetentPathGrip } from "../../../kit/figure/detent-path-grip.mjs";
 import { useNarrow } from "../../../kit/figure/narrow.mjs";
-import { LabelChip } from "../../../kit/scene/workbench.mjs";
-import "../../../kit/scene/index.mjs";
-import "../../../kit/figure/index.mjs";
-import { useControl } from "../../../runtime/use-control.mjs";
-import { useLabView } from "../../../runtime/use-lab-view.mjs";
 import { useEarned } from "../../../kit/shell/earned.mjs";
 import { MembranePatch, SecretoryMembraneDiagram } from "../../../kit/biology/cell/membrane.mjs";
-import "../../../kit/biology/index.mjs";
 import { cellSystemModel } from "./model.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
@@ -262,7 +259,7 @@ function CellSystemScene({ renderer: Renderer }) {
 								})] }) : null,
 								earned && failure.value === id ? /* @__PURE__ */ jsxs("g", {
 									"data-failed-compartment": id,
-									children: [/* @__PURE__ */ jsxs("title", { children: [LABELS[id], " failure"] }), /* @__PURE__ */ jsx("path", {
+									children: [/* @__PURE__ */ jsx("title", { children: `${LABELS[id]} failure` }), /* @__PURE__ */ jsx("path", {
 										d: "M 27 -40 l 14 14 m 0 -14 l -14 14",
 										fill: "none",
 										stroke: HUE.danger,
@@ -281,13 +278,7 @@ function CellSystemScene({ renderer: Renderer }) {
 							fill: reading.blockedAt === "none" ? HUE[3] : HUE.danger,
 							stroke: HUE.paper,
 							strokeWidth: STROKE.edge
-						}), /* @__PURE__ */ jsxs("title", { children: [
-							"Tracked ",
-							reading.actualCargo,
-							" at ",
-							reading.actualLocation,
-							"; inspection does not move it."
-						] })]
+						}), /* @__PURE__ */ jsx("title", { children: `Tracked ${reading.actualCargo} at ${reading.actualLocation}; inspection does not move it.` })]
 					}) : null,
 					/* @__PURE__ */ jsx(DetentPathGrip, {
 						control: failure,

package/dist/domains/biology/central-dogma/scene.mjs

@@ -5,7 +5,6 @@ import { useControl } from "../../../runtime/use-control.mjs";
 import { useLabView } from "../../../runtime/use-lab-view.mjs";
 import { useEarned } from "../../../kit/shell/earned.mjs";
 import { MolecularSlots, MolecularTemplate } from "../../../kit/biology/molecular/strand.mjs";
-import "../../../kit/biology/index.mjs";
 import { centralDogmaModel } from "./model.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 

package/dist/domains/biology/enzyme-rate/scene.mjs

@@ -2,10 +2,9 @@
 
 import { Figure } from "../../../kit/figure/figure.mjs";
 import { ActionButton, Slider, StatusPill } from "../../../kit/controls.mjs";
-import { Curve, PlotFrame, scale } from "../../../kit/figure/plot.mjs";
-import "../../../kit/figure/index.mjs";
 import { useControl } from "../../../runtime/use-control.mjs";
 import { useLabView } from "../../../runtime/use-lab-view.mjs";
+import { Curve, PlotFrame, scale } from "../../../kit/figure/plot.mjs";
 import { useReveal } from "../../../runtime/use-reveal.mjs";
 import { useEarned } from "../../../kit/shell/earned.mjs";
 import { enzymeRateModel } from "./model.mjs";