@classytic/labs 0.2.0 → 0.3.0

package/dist/commerce/accounting/journal-poster.mjs

@@ -1,12 +1,13 @@
 'use client';
 
 import { CheckButton, Chip, StatusPill } from "../../kit/controls.mjs";
-import { LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { LiveRegion } from "../../kit/frame.mjs";
 import { RevealSolution } from "../../kit/pedagogy.mjs";
+import { AuthoredActivityRuntime, AuthoredMetricGate } from "../../kit/authored-activity-runtime.mjs";
 import { CATEGORY_COLOR, money, normalBalance } from "./core.mjs";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useLearner } from "@classytic/stage";
+import { Button } from "@/components/ui/button";
 
 //#region src/commerce/accounting/journal-poster.tsx
 /**
@@ -57,50 +58,115 @@ const DEMO_ACCOUNTS = [
 const DEMO_TXNS = [
 	{
 		id: "t1",
-		prompt: "Owner pays $10,000 into the business bank account",
+		prompt: "Owner contributes cash to the business",
 		debit: "cash",
 		credit: "capital",
 		amount: 1e4
 	},
 	{
 		id: "t2",
-		prompt: "Take a $5,000 bank loan (cash received)",
+		prompt: "Take a bank loan (cash received)",
 		debit: "cash",
 		credit: "loan",
 		amount: 5e3
 	},
 	{
 		id: "t3",
-		prompt: "Buy equipment for $3,000 cash",
+		prompt: "Buy equipment for cash",
 		debit: "equip",
 		credit: "cash",
 		amount: 3e3
 	},
 	{
 		id: "t4",
-		prompt: "Make a cash sale of $2,000",
+		prompt: "Make a cash sale",
 		debit: "cash",
 		credit: "sales",
 		amount: 2e3
 	},
 	{
 		id: "t5",
-		prompt: "Pay $800 rent in cash",
+		prompt: "Pay rent in cash",
 		debit: "rent",
 		credit: "cash",
 		amount: 800
 	}
 ];
+const JOURNAL_QUESTIONS = [{
+	id: "asset-increase",
+	prompt: "An increase in an asset is normally posted on the…",
+	choices: [{
+		value: "debit",
+		label: "debit (left) side"
+	}, {
+		value: "credit",
+		label: "credit (right) side"
+	}],
+	answer: "debit",
+	explain: "Assets have a normal debit balance, so an increase is posted on the left."
+}, {
+	id: "trial-balance",
+	prompt: "Why does a correct trial balance stay level?",
+	choices: [
+		{
+			value: "equal",
+			label: "every entry posts equal debits and credits"
+		},
+		{
+			value: "cash",
+			label: "every entry uses Cash"
+		},
+		{
+			value: "profit",
+			label: "profit always equals cash"
+		}
+	],
+	answer: "equal",
+	explain: "Double entry records the same amount as a debit and a credit."
+}];
+const JOURNAL_STEPS = [
+	{
+		id: "predict",
+		phase: "predict",
+		title: "Choose the normal side",
+		lead: "Recall the normal balance before posting.",
+		success: "asset-side"
+	},
+	{
+		id: "post",
+		phase: "act",
+		title: "Post the journal",
+		lead: "Choose the debit and credit account for every event.",
+		reveal: ["journal"],
+		controls: true,
+		success: "journal-complete"
+	},
+	{
+		id: "explain",
+		phase: "explain",
+		title: "Explain the level trial balance",
+		lead: "Connect each entry to equal debit and credit totals.",
+		reveal: ["journal"],
+		success: "trial-explanation"
+	},
+	{
+		id: "transfer",
+		phase: "transfer",
+		title: "Read the completed ledger",
+		lead: "Inspect account balances and the final trial balance.",
+		reveal: ["journal"]
+	}
+];
 function JournalPosterLab({ accounts = DEMO_ACCOUNTS, transactions = DEMO_TXNS, showTrialBalance = true, title = "Post the entry: fill the T-accounts", prompt = "Choose the debit (left) and credit (right) account for each event.", objectives }) {
 	const [idx, setIdx] = useState(0);
 	const [debitId, setDebitId] = useState(null);
 	const [creditId, setCreditId] = useState(null);
+	const [active, setActive] = useState("debit");
 	const [posted, setPosted] = useState([]);
 	const [feedback, setFeedback] = useState(null);
+	const [announcement, setAnnouncement] = useState(null);
 	const [wrongHere, setWrongHere] = useState(false);
 	const [peeked, setPeeked] = useState(0);
-	const learner = useLearner();
-	const reported = useRef(false);
 	const nameOf = (id) => accounts.find((a) => a.id === id)?.name ?? id;
 	const catOf = (id) => accounts.find((a) => a.id === id)?.category;
 	const reason = (id) => {
@@ -113,16 +179,24 @@ function JournalPosterLab({ accounts = DEMO_ACCOUNTS, transactions = DEMO_TXNS,
 	const allDone = idx >= transactions.length;
 	const pick = (id) => {
 		setFeedback(null);
+		setAnnouncement(null);
 		if (debitId === id) {
 			setDebitId(null);
+			setActive("debit");
 			return;
 		}
 		if (creditId === id) {
 			setCreditId(null);
+			setActive("credit");
 			return;
 		}
-		if (!debitId) setDebitId(id);
-		else if (!creditId) setCreditId(id);
+		if (active === "debit") {
+			setDebitId(id);
+			setActive(creditId ? "debit" : "credit");
+		} else {
+			setCreditId(id);
+			setActive(debitId ? "credit" : "debit");
+		}
 	};
 	const post = () => {
 		if (!txn || !debitId || !creditId) return;
@@ -134,25 +208,11 @@ function JournalPosterLab({ accounts = DEMO_ACCOUNTS, transactions = DEMO_TXNS,
 			}]);
 			setDebitId(null);
 			setCreditId(null);
+			setActive("debit");
 			setWrongHere(false);
-			setFeedback({
-				ok: true,
-				msg: `Posted: debit ${nameOf(txn.debit)} ${money(txn.amount)}, credit ${nameOf(txn.credit)} ${money(txn.amount)} ✓`
-			});
-			const nextIdx = idx + 1;
-			setIdx(nextIdx);
-			if (nextIdx >= transactions.length && !reported.current) {
-				reported.current = true;
-				learner?.report({
-					activity: "journal-poster",
-					correct: peeked === 0,
-					score: {
-						raw: Math.max(0, transactions.length - peeked),
-						max: transactions.length
-					},
-					completion: true
-				});
-			}
+			setFeedback(null);
+			setAnnouncement(`Posted debit ${nameOf(txn.debit)} ${money(txn.amount)} and credit ${nameOf(txn.credit)} ${money(txn.amount)}.`);
+			setIdx(idx + 1);
 		} else {
 			setWrongHere(true);
 			setFeedback({
@@ -166,28 +226,29 @@ function JournalPosterLab({ accounts = DEMO_ACCOUNTS, transactions = DEMO_TXNS,
 		setDebitId(txn.debit);
 		setCreditId(txn.credit);
 		setFeedback(null);
+		setAnnouncement(null);
 		setPeeked((n) => n + 1);
 	};
 	const solutionNode = txn ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		"Debit ",
+		"Debit",
+		" ",
 		/* @__PURE__ */ jsx("b", {
-			style: { color: CATEGORY_COLOR[catOf(txn.debit)] },
+			className: "account-category-text",
+			style: { "--account-color": CATEGORY_COLOR[catOf(txn.debit)] },
 			children: nameOf(txn.debit)
 		}),
-		" (left), credit ",
+		" ",
+		"(left), credit",
+		" ",
 		/* @__PURE__ */ jsx("b", {
-			style: { color: CATEGORY_COLOR[catOf(txn.credit)] },
+			className: "account-category-text",
+			style: { "--account-color": CATEGORY_COLOR[catOf(txn.credit)] },
 			children: nameOf(txn.credit)
 		}),
-		" (right).",
+		" ",
+		"(right).",
 		/* @__PURE__ */ jsxs("span", {
-			style: {
-				display: "block",
-				marginTop: 4,
-				fontWeight: 400,
-				fontSize: 12.5,
-				opacity: .85
-			},
+			className: "journal-solution-reason",
 			children: [
 				reason(txn.debit),
 				" ",
@@ -202,230 +263,150 @@ function JournalPosterLab({ accounts = DEMO_ACCOUNTS, transactions = DEMO_TXNS,
 	})).filter((a) => a.debits > 0 || a.credits > 0);
 	const sigmaDebit = posted.reduce((s, p) => s + p.amount, 0);
 	const sigmaCredit = sigmaDebit;
-	const cell = (filled) => ({
-		flex: 1,
-		padding: "4px 8px",
-		fontVariantNumeric: "tabular-nums",
-		fontWeight: 600,
-		textAlign: filled ? "right" : "left",
-		color: filled ? "var(--stage-fg)" : "transparent"
-	});
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title,
-		prompt,
-		objectives,
-		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
-			style: {
-				borderRadius: 14,
-				background: "var(--stage-bg)",
-				border: "1px solid var(--stage-grid)",
-				padding: 16
-			},
-			children: [
-				allDone ? /* @__PURE__ */ jsx("p", {
-					style: {
-						fontWeight: 700,
-						color: "var(--stage-good)",
-						margin: 0
-					},
-					children: "All entries posted ✓, the trial balance is level."
-				}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-					/* @__PURE__ */ jsxs("p", {
-						style: {
-							margin: "0 0 4px",
-							fontSize: 12,
-							color: "var(--stage-muted)",
-							fontWeight: 700
-						},
-						children: [
-							"Event ",
-							idx + 1,
-							" of ",
-							transactions.length
-						]
-					}),
-					/* @__PURE__ */ jsxs("p", {
-						style: {
-							margin: "0 0 10px",
-							fontWeight: 600
-						},
-						children: [
-							txn.prompt,
-							" ",
-							/* @__PURE__ */ jsxs("span", {
-								style: { color: "var(--stage-accent)" },
-								children: [
-									"($",
-									money(txn.amount),
-									")"
-								]
-							})
-						]
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						style: {
-							display: "flex",
-							gap: 8,
-							marginBottom: 10,
-							fontSize: 13
-						},
-						children: [/* @__PURE__ */ jsxs("span", {
-							style: {
-								flex: 1,
-								padding: "6px 10px",
-								borderRadius: 8,
-								border: "1px dashed var(--stage-grid)",
-								background: debitId ? "color-mix(in oklab, var(--stage-accent) 14%, transparent)" : "transparent"
-							},
-							children: ["DEBIT (left): ", /* @__PURE__ */ jsx("b", { children: debitId ? nameOf(debitId) : ", " })]
-						}), /* @__PURE__ */ jsxs("span", {
-							style: {
-								flex: 1,
-								padding: "6px 10px",
-								borderRadius: 8,
-								border: "1px dashed var(--stage-grid)",
-								background: creditId ? "color-mix(in oklab, var(--stage-accent-2) 14%, transparent)" : "transparent"
-							},
-							children: ["CREDIT (right): ", /* @__PURE__ */ jsx("b", { children: creditId ? nameOf(creditId) : ", " })]
+	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "journal-workspace",
+		children: [allDone ? /* @__PURE__ */ jsx("p", {
+			className: "business-complete",
+			children: "All entries posted ✓, the trial balance is level."
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("p", {
+				className: "journal-event-prompt",
+				children: [
+					txn.prompt,
+					" ",
+					/* @__PURE__ */ jsx("span", { children: money(txn.amount) })
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "journal-entry-slots",
+				children: ["debit", "credit"].map((which) => {
+					const id = which === "debit" ? debitId : creditId;
+					const isActive = active === which;
+					const col = id ? CATEGORY_COLOR[catOf(id)] : "var(--stage-accent)";
+					return /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: () => setActive(which),
+						"aria-label": `${which} slot${id ? `: ${nameOf(id)}` : " empty"}${isActive ? ", active" : ""}`,
+						className: "journal-entry-slot",
+						"data-active": isActive,
+						"data-filled": !!id,
+						style: { "--account-color": col },
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "journal-slot-label",
+							children: which === "debit" ? "DEBIT (left)" : "CREDIT (right)"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "journal-slot-value",
+							"data-filled": !!id,
+							children: id ? nameOf(id) : isActive ? "tap an account ↓" : "tap to choose"
 						})]
-					}),
-					/* @__PURE__ */ jsx("div", {
-						style: {
-							display: "flex",
-							flexWrap: "wrap",
-							gap: 6,
-							marginBottom: 10
-						},
-						children: accounts.map((a) => /* @__PURE__ */ jsxs(Chip, {
-							selected: a.id === debitId || a.id === creditId,
-							onClick: () => pick(a.id),
-							children: [/* @__PURE__ */ jsx("span", { style: {
-								display: "inline-block",
-								width: 8,
-								height: 8,
-								borderRadius: 2,
-								background: CATEGORY_COLOR[a.category],
-								marginRight: 6
-							} }), a.name]
-						}, a.id))
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						style: {
-							display: "flex",
-							gap: 8,
-							alignItems: "center",
-							flexWrap: "wrap"
-						},
+					}, which);
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "journal-account-rack",
+				children: accounts.map((a) => {
+					const slot = a.id === debitId ? "Dr" : a.id === creditId ? "Cr" : null;
+					return /* @__PURE__ */ jsxs(Chip, {
+						selected: slot != null,
+						onClick: () => pick(a.id),
 						children: [
-							/* @__PURE__ */ jsx(CheckButton, {
-								onClick: post,
-								disabled: !debitId || !creditId,
-								children: "Post entry"
+							/* @__PURE__ */ jsx("span", {
+								className: "account-category-dot",
+								style: { "--account-color": CATEGORY_COLOR[a.category] }
 							}),
-							/* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: "lab-chip",
-								onClick: () => {
-									setDebitId(null);
-									setCreditId(null);
-									setFeedback(null);
-								},
-								children: "clear"
-							}),
-							feedback && /* @__PURE__ */ jsx(StatusPill, {
-								ok: feedback.ok,
-								children: feedback.msg
+							a.name,
+							slot && /* @__PURE__ */ jsx("span", {
+								className: "journal-slot-badge",
+								children: slot
 							})
 						]
+					}, a.id);
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "journal-actions",
+				children: [
+					/* @__PURE__ */ jsx(CheckButton, {
+						onClick: post,
+						disabled: !debitId || !creditId,
+						children: "Post entry"
 					}),
-					/* @__PURE__ */ jsx("div", {
-						style: { marginTop: 10 },
-						children: /* @__PURE__ */ jsx(RevealSolution, {
-							available: wrongHere,
-							solution: solutionNode,
-							onReveal: revealAnswer,
-							buttonLabel: "Show answer"
-						}, idx)
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: () => {
+							setDebitId(null);
+							setCreditId(null);
+							setActive("debit");
+							setFeedback(null);
+							setAnnouncement(null);
+						},
+						children: "Clear"
+					}),
+					feedback && /* @__PURE__ */ jsx(StatusPill, {
+						ok: feedback.ok,
+						children: feedback.msg
 					})
-				] }),
-				tAccounts.length > 0 && /* @__PURE__ */ jsx("div", {
-					style: {
-						display: "grid",
-						gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))",
-						gap: 10,
-						marginTop: 16
-					},
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "journal-reveal",
+				children: /* @__PURE__ */ jsx(RevealSolution, {
+					available: wrongHere,
+					solution: solutionNode,
+					onReveal: revealAnswer,
+					buttonLabel: "Show answer"
+				}, idx)
+			})
+		] }), tAccounts.length > 0 && /* @__PURE__ */ jsxs("details", {
+			className: "journal-ledger",
+			open: allDone || void 0,
+			children: [/* @__PURE__ */ jsxs("summary", { children: [/* @__PURE__ */ jsxs("span", { children: [
+				"Ledger after ",
+				posted.length,
+				" ",
+				posted.length === 1 ? "entry" : "entries"
+			] }), /* @__PURE__ */ jsxs("span", {
+				className: "journal-ledger-balance",
+				children: [
+					"ΣDr ",
+					money(sigmaDebit),
+					" · ΣCr ",
+					money(sigmaCredit),
+					" · level"
+				]
+			})] }), /* @__PURE__ */ jsxs("div", {
+				className: "journal-ledger-body",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "t-account-grid",
 					children: tAccounts.map((a) => {
 						const bal = a.debits - a.credits;
 						const onNormal = normalBalance(a.category) === "debit" ? bal : -bal;
 						return /* @__PURE__ */ jsxs("div", {
-							style: {
-								borderRadius: 8,
-								border: "1px solid var(--stage-grid)",
-								overflow: "hidden",
-								fontSize: 12
-							},
+							className: "t-account",
+							style: { "--account-color": CATEGORY_COLOR[a.category] },
 							children: [
 								/* @__PURE__ */ jsx("div", {
-									style: {
-										padding: "4px 8px",
-										fontWeight: 700,
-										color: "var(--stage-bg)",
-										background: CATEGORY_COLOR[a.category]
-									},
+									className: "t-account-title",
 									children: a.name
 								}),
 								/* @__PURE__ */ jsxs("div", {
-									style: {
-										display: "flex",
-										borderBottom: "1px solid var(--stage-grid)",
-										background: "color-mix(in oklab, var(--stage-muted) 8%, transparent)"
-									},
-									children: [/* @__PURE__ */ jsx("span", {
-										style: {
-											flex: 1,
-											padding: "2px 8px",
-											fontSize: 10,
-											fontWeight: 700,
-											color: "var(--stage-muted)"
-										},
-										children: "Dr"
-									}), /* @__PURE__ */ jsx("span", {
-										style: {
-											flex: 1,
-											padding: "2px 8px",
-											fontSize: 10,
-											fontWeight: 700,
-											color: "var(--stage-muted)",
-											textAlign: "right"
-										},
-										children: "Cr"
-									})]
+									className: "t-account-head",
+									children: [/* @__PURE__ */ jsx("span", { children: "Dr" }), /* @__PURE__ */ jsx("span", { children: "Cr" })]
 								}),
 								/* @__PURE__ */ jsxs("div", {
-									style: {
-										display: "flex",
-										minHeight: 22
-									},
+									className: "t-account-values",
 									children: [/* @__PURE__ */ jsx("span", {
-										style: cell(a.debits > 0),
+										"data-filled": a.debits > 0,
 										children: a.debits > 0 ? money(a.debits) : "·"
 									}), /* @__PURE__ */ jsx("span", {
-										style: {
-											...cell(a.credits > 0),
-											borderLeft: "1px solid var(--stage-grid)"
-										},
+										"data-filled": a.credits > 0,
 										children: a.credits > 0 ? money(a.credits) : "·"
 									})]
 								}),
 								/* @__PURE__ */ jsxs("div", {
-									style: {
-										padding: "3px 8px",
-										textAlign: "right",
-										fontWeight: 700,
-										borderTop: "1px solid var(--stage-grid)",
-										color: CATEGORY_COLOR[a.category]
-									},
+									className: "t-account-balance",
 									children: [
 										money(Math.abs(onNormal)),
 										" ",
@@ -435,26 +416,16 @@ function JournalPosterLab({ accounts = DEMO_ACCOUNTS, transactions = DEMO_TXNS,
 							]
 						}, a.id);
 					})
-				}),
-				showTrialBalance && posted.length > 0 && /* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "flex",
-						alignItems: "center",
-						gap: 14,
-						marginTop: 14,
-						paddingTop: 10,
-						borderTop: "1px solid var(--stage-grid)",
-						fontVariantNumeric: "tabular-nums",
-						fontWeight: 700
-					},
+				}), showTrialBalance && /* @__PURE__ */ jsxs("div", {
+					className: "trial-balance",
 					children: [
-						/* @__PURE__ */ jsx("span", { children: "Trial balance:" }),
+						/* @__PURE__ */ jsx("span", { children: "Trial balance" }),
 						/* @__PURE__ */ jsxs("span", {
-							style: { color: "var(--stage-accent)" },
+							"data-side": "debit",
 							children: ["ΣDr ", money(sigmaDebit)]
 						}),
 						/* @__PURE__ */ jsxs("span", {
-							style: { color: "var(--stage-accent-2)" },
+							"data-side": "credit",
 							children: ["ΣCr ", money(sigmaCredit)]
 						}),
 						/* @__PURE__ */ jsx(StatusPill, {
@@ -462,9 +433,70 @@ function JournalPosterLab({ accounts = DEMO_ACCOUNTS, transactions = DEMO_TXNS,
 							children: sigmaDebit === sigmaCredit ? "level ✓" : "not level"
 						})
 					]
-				})
+				})]
+			})]
+		})]
+	}), /* @__PURE__ */ jsx(LiveRegion, { children: announcement ?? feedback?.msg ?? (allDone ? "All entries posted." : txn?.prompt) })] });
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		activity: {
+			pattern: "construction",
+			title,
+			objectives: objectives ?? [
+				"Apply normal-balance rules",
+				"Post equal debits and credits",
+				"Read a trial balance"
+			],
+			steps: JOURNAL_STEPS,
+			questions: JOURNAL_QUESTIONS,
+			success: [
+				{
+					id: "asset-side",
+					source: "answer",
+					key: "asset-increase",
+					pendingLabel: "Choose the normal side for an asset increase."
+				},
+				{
+					id: "journal-complete",
+					source: "metric",
+					key: "posted",
+					operator: "eq",
+					value: transactions.length,
+					pendingLabel: "Post every event."
+				},
+				{
+					id: "trial-explanation",
+					source: "answer",
+					key: "trial-balance",
+					pendingLabel: "Explain why the trial balance remains level."
+				}
 			]
-		}), /* @__PURE__ */ jsx(LiveRegion, { children: feedback?.msg ?? (allDone ? "All entries posted." : txn?.prompt) })] })
+		},
+		activityId: "journal-poster",
+		eyebrow: "Double-entry posting",
+		title,
+		description: prompt,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("strong", { children: allDone ? "complete" : `event ${idx + 1}` }),
+			/* @__PURE__ */ jsxs("span", { children: [
+				posted.length,
+				"/",
+				transactions.length,
+				" posted"
+			] }),
+			/* @__PURE__ */ jsxs("span", { children: ["ΣDr ", money(sigmaDebit)] }),
+			/* @__PURE__ */ jsxs("span", { children: ["ΣCr ", money(sigmaCredit)] }),
+			peeked > 0 && /* @__PURE__ */ jsxs("span", { children: [peeked, " revealed"] })
+		] }),
+		transcript: `Journal has ${posted.length} of ${transactions.length} entries posted. Total debits are ${money(sigmaDebit)} and total credits are ${money(sigmaCredit)}. ${allDone ? "The trial balance is level." : txn?.prompt ?? ""}`,
+		children: ({ sequence, complete }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(AuthoredMetricGate, {
+			conditionId: "journal-complete",
+			met: sequence.current.id === "post" && allDone,
+			complete,
+			outcome: `${posted.length}/${transactions.length}`
+		}), sequence.shows("journal") ? figure : /* @__PURE__ */ jsxs("div", {
+			className: "commerce-model-lock",
+			children: [/* @__PURE__ */ jsx("strong", { children: "Recall the normal balance first" }), /* @__PURE__ */ jsx("span", { children: "The journal opens after your prediction." })]
+		})] })
 	});
 }