\n \n \n\n",[149],"91ffb741-abaa-4b94-b44c-2aaa14717d2c","index.html","ecd8ff60-9ce0-11f1-a5bb-1607ee4eb77e",44,["D",1787869593067],"\n\n \n \n \n Takoma Park purchase model\n \n \n \n \n \n \n

\n \n \n\n",[157],"a0c2d634-93ab-4371-9358-2515135c1643","deno.json","ec407f4c-9ce0-11f1-b46e-1607ee4eb77e",59,["D",1788042566187],"{\n \"tasks\": {\n \"dev\": \"deno run --allow-net --allow-read --allow-env --env-file=.env --watch=main.tsx,server/ main.tsx\",\n \"test\": \"deno test frontend/\",\n \"check\": \"deno check main.tsx && deno fmt --check && deno lint && deno test --quiet frontend/\"\n },\n \"compilerOptions\": {\n \"jsx\": \"react\",\n \"lib\": [\n \"deno.window\",\n \"dom\",\n \"dom.iterable\"\n ]\n },\n \"fmt\": {\n \"exclude\": [\n \".claude/\",\n \".vt/\",\n \"circleave/\",\n \"frontend/model.jsx\"\n ]\n },\n \"lint\": {\n \"exclude\": [\n \".claude/\",\n \"circleave/\",\n \"frontend/model.jsx\"\n ],\n \"rules\": {\n \"exclude\": [\n \"no-import-prefix\"\n ]\n }\n }\n}\n",[164],"2c4a9783-fc72-4d01-a238-ded7df2b3318","README.md","ec6db6c4-9ce0-11f1-b46e-1607ee4eb77e",61,["D",1788042566240],"# househunt\n\nInteractive model of a Takoma Park purchase: closing costs, SBLOC bridge,\ndouble-carry during renovation, MD reassessment, and 60 months of cash / equity.\n\nBehind a password, and your figures live in your browser, not in this repo.\n\n## Run locally\n\n```\ndeno task dev\n```\n\nReads `.env` for `HOUSEHUNT_PASSWORD` and serves http://localhost:8000. The\nserver watches itself; client edits are picked up on reload — files are read and\ntranspiled per request, no build step.\n\n`deno task test` runs the model's unit tests. `deno task check` runs\n`deno check` + `fmt --check` + `lint` + the tests.\n\n## Access\n\nOne shared password in `HOUSEHUNT_PASSWORD`. Signing in sets a signed, HttpOnly\ncookie good for 30 days; the signing secret is derived from the password, so\nchanging the password signs every device out. Set `SESSION_SECRET` to pin it\ninstead. Every route except `/login` is gated, including the client modules.\n\n## Your numbers\n\nNothing personal is in the source. `frontend/schema.js` splits inputs in two:\n\n- `MODEL_PARAMS` — rates, county fees, insurance, reassessment and policy\n assumptions. Generic, stay in the repo.\n- `PERSONAL_FIELDS` — price, renovation, and DC rent budgets, plus cash, gifts,\n and SBLOC for funding the purchase. Blank in the repo, entered on first visit,\n saved to `localStorage` under `househunt:inputs:v1`.\n\nFirst visit shows a setup screen: type the figures in, or paste a JSON blob.\nYour original values are in `private/defaults.local.json` (gitignored, and\nexcluded from the Val Town push) — paste that on first load, then delete the\nfile if you'd rather it not sit on disk.\n\nAfter that every edit persists automatically. The left column has **Copy values\nas JSON** (for moving to another browser), **Reset rates and fees**, **Erase and\nstart over** (back to the setup screen), and **Sign out**. Clearing site data\nloses the figures — copy them out first.\n\n## Layout\n\n| Path | What it is |\n| ------------------------ | ------------------------------------------------------------- |\n| `main.tsx` | Hono app — default export for Val Town, `Deno.serve` locally |\n| `server/auth.ts` | Password check, signed session cookie, gate middleware |\n| `server/files.ts` | File serving: `std/utils` on Val Town, disk + sucrase locally |\n| `login.html` | Sign-in page |\n| `index.html` | App shell: Twind CDN, Val Town error catcher, module script |\n| `frontend/index.jsx` | Mounts setup or model depending on what's stored |\n| `frontend/setup.jsx` | First-run screen |\n| `frontend/schema.js` | Model params vs. personal fields |\n| `frontend/storage.js` | localStorage read/write |\n| `frontend/model.js` | The model: closing costs, MD assessment, cash sim, frontier |\n| `frontend/model.jsx` | The UI around it |\n| `frontend/model_test.js` | Unit tests for `model.js` |\n\nReact and recharts load from esm.sh in the browser, pinned to react 18.2.0.\nClient imports keep explicit extensions (`./model.jsx`) because the browser\nresolves them as URLs.\n\n## Moving to Val Town\n\nPush these files to a val with `main.tsx` as the HTTP entrypoint, then set\n`HOUSEHUNT_PASSWORD` in the val's environment variables — it is not in the code\nand the app returns a 500 explaining itself until it's set. `.vtignore` keeps\n`.env` and `private/` out of the push.\n\nThere:\n\n- `serveFile` from `https://esm.town/v/std/utils/index.ts` reads project files\n and transpiles `.jsx` on the way out; sucrase and the disk reads are never\n loaded (`IS_VAL_TOWN` is decided by whether modules load over `https:`).\n- `/source` redirects to the val via `parseVal()`.\n- Client errors surface in val logs through `https://esm.town/v/std/catch`.\n",[171],"5834bf9f-4ac2-4b59-8bc6-a8e0ffb1a6c6",".vtignore","ec8c86f8-9ce0-11f1-9127-1607ee4eb77e",31,["D",1787512058680],".env\nprivate/\ndeno.lock\n.claude/\n.git\n",[178],"99d7e1e8-6853-491b-ac3a-05644dad2844",["D",1788042566324],[28],"5766a7d8-7e21-4697-b7bf-49455daf9980","server","ebc38d70-9ce0-11f1-b401-1607ee4eb77e",3,["D",1787262526708],"directory",[188],"09e9afd4-e9f5-4b6f-845b-7d6603a73ed5","frontend","eb86824a-9ce0-11f1-8fc3-1607ee4eb77e",["D",1787262526308],[195],"fea5cfe3-d91d-4fa1-9dcf-f14feade3bb4","circleave","80142aa8-a2d5-11f1-bb39-1607ee4eb77e",55,["D",1787917328566],[200],"5c2a5547-d76c-4567-8522-29423283e60f",".claude","eba0af44-9ce0-11f1-a8fe-1607ee4eb77e",["D",1787262526487],[206],"pulls","branches","forks","envVars",{"_217":142,"_219":62},"connections",{"_217":62,"_218":62},"count","unfilledCount","emptyCount",{"_42":205,"_32":206,"_30":207,"_138":-5,"_40":41,"_39":153,"_140":58,"_37":346,"_13":62,"_33":192,"_34":-5,"_24":25,"_145":-5,"_241":347,"_27":348},{"_42":199,"_32":200,"_30":201,"_138":-5,"_40":41,"_39":202,"_140":58,"_37":343,"_13":62,"_33":192,"_34":-5,"_24":25,"_145":-5,"_241":344,"_27":345},{"_42":194,"_32":195,"_30":196,"_138":-5,"_40":41,"_39":142,"_140":58,"_37":340,"_13":62,"_33":192,"_34":-5,"_24":25,"_145":-5,"_241":341,"_27":342},{"_42":332,"_32":333,"_30":334,"_138":196,"_40":41,"_39":335,"_140":58,"_37":336,"_13":62,"_33":267,"_34":337,"_24":25,"_145":-5,"_241":338,"_27":339},{"_42":324,"_32":325,"_30":326,"_138":196,"_40":41,"_39":327,"_140":58,"_37":328,"_13":62,"_33":267,"_34":329,"_24":25,"_145":-5,"_241":330,"_27":331},{"_42":315,"_32":316,"_30":317,"_138":196,"_40":41,"_39":318,"_140":25,"_37":319,"_13":320,"_33":267,"_34":321,"_24":25,"_145":-5,"_241":322,"_27":323},{"_42":307,"_32":308,"_30":309,"_138":196,"_40":41,"_39":310,"_140":58,"_37":311,"_13":62,"_33":267,"_34":312,"_24":25,"_145":-5,"_241":313,"_27":314},{"_42":298,"_32":299,"_30":300,"_138":196,"_40":41,"_39":301,"_140":58,"_37":302,"_13":303,"_33":267,"_34":304,"_24":25,"_145":-5,"_241":305,"_27":306},{"_42":290,"_32":291,"_30":292,"_138":196,"_40":41,"_39":293,"_140":58,"_37":294,"_13":190,"_33":267,"_34":295,"_24":25,"_145":-5,"_241":296,"_27":297},{"_42":282,"_32":283,"_30":284,"_138":196,"_40":41,"_39":285,"_140":58,"_37":286,"_13":62,"_33":267,"_34":287,"_24":25,"_145":-5,"_241":288,"_27":289},{"_42":187,"_32":188,"_30":189,"_138":-5,"_40":41,"_39":190,"_140":58,"_37":279,"_13":62,"_33":192,"_34":-5,"_24":25,"_145":-5,"_241":280,"_27":281},{"_42":271,"_32":272,"_30":273,"_138":189,"_40":41,"_39":274,"_140":58,"_37":275,"_13":62,"_33":267,"_34":276,"_24":25,"_145":-5,"_241":277,"_27":278},{"_42":262,"_32":263,"_30":264,"_138":189,"_40":41,"_39":265,"_140":58,"_37":266,"_13":62,"_33":267,"_34":268,"_24":25,"_145":-5,"_241":269,"_27":270},{"_42":184,"_32":28,"_30":31,"_138":-5,"_40":41,"_39":14,"_140":25,"_37":259,"_13":153,"_33":20,"_34":36,"_24":25,"_145":-5,"_241":260,"_27":261},{"_42":177,"_32":178,"_30":179,"_138":-5,"_40":41,"_39":180,"_140":58,"_37":256,"_13":142,"_33":20,"_34":182,"_24":25,"_145":-5,"_241":257,"_27":258},{"_42":170,"_32":171,"_30":172,"_138":-5,"_40":41,"_39":173,"_140":58,"_37":253,"_13":153,"_33":20,"_34":175,"_24":25,"_145":-5,"_241":254,"_27":255},{"_42":163,"_32":164,"_30":165,"_138":-5,"_40":41,"_39":166,"_140":58,"_37":250,"_13":142,"_33":20,"_34":168,"_24":25,"_145":-5,"_241":251,"_27":252},{"_42":156,"_32":157,"_30":158,"_138":-5,"_40":41,"_39":159,"_140":58,"_37":247,"_13":153,"_33":20,"_34":161,"_24":25,"_145":-5,"_241":248,"_27":249},{"_42":148,"_32":149,"_30":150,"_138":-5,"_40":41,"_39":151,"_140":58,"_37":244,"_13":153,"_33":20,"_34":154,"_24":25,"_145":-5,"_241":245,"_27":246},{"_42":136,"_32":137,"_30":56,"_138":-5,"_40":41,"_39":139,"_140":58,"_37":240,"_13":142,"_33":143,"_34":144,"_24":25,"_145":146,"_241":242,"_27":243},["D",1787262609265],"children",[],[137],["D",1787869593229],[],[149],["D",1787869593067],[],[157],["D",1788042566187],[],[164],["D",1788042566240],[],[171],["D",1787512058680],[],[178],["D",1788042566324],[],[28],"83fc666f-7348-492a-8819-269f1414f505","files.ts","ec59d8ca-9ce0-11f1-a8fe-1607ee4eb77e",14,["D",1787262527599],"script","// File serving that works both on Val Town and on a local Deno process.\n//\n// Val Town has no filesystem: files are read through std/utils, which also\n// transpiles .ts/.tsx/.jsx on the way out. Locally we read from disk and\n// transpile with sucrase so the browser gets the same plain JS either way.\n\n// Val Town loads modules over https from esm.town; locally they are file:// URLs.\nexport const IS_VAL_TOWN = !import.meta.url.startsWith(\"file://\") ||\n Boolean(Deno.env.get(\"valtown\"));\n\nconst ROOT = new URL(\"../\", import.meta.url);\n\nconst CONTENT_TYPES: Record = {\n \".html\": \"text/html; charset=utf-8\",\n \".css\": \"text/css; charset=utf-8\",\n \".js\": \"text/javascript; charset=utf-8\",\n \".json\": \"application/json; charset=utf-8\",\n \".svg\": \"image/svg+xml\",\n \".ico\": \"image/x-icon\",\n \".png\": \"image/png\",\n \".txt\": \"text/plain; charset=utf-8\",\n};\n\nconst TRANSPILED = new Set([\".ts\", \".tsx\", \".jsx\"]);\n\n// Imported lazily so the Val Town deploy never pulls it in.\nlet sucrase: typeof import(\"npm:sucrase@3.35.0\") | undefined;\nasync function transpile(source: string, filePath: string): Promise {\n sucrase ??= await import(\"npm:sucrase@3.35.0\");\n return sucrase.transform(source, {\n transforms: [\"typescript\", \"jsx\"],\n filePath,\n production: true,\n }).code;\n}\n\nfunction extname(path: string): string {\n const i = path.lastIndexOf(\".\");\n return i === -1 ? \"\" : path.slice(i).toLowerCase();\n}\n\nexport async function serveFile(path: string): Promise {\n if (IS_VAL_TOWN) {\n const { serveFile: valTownServeFile } = await import(\n \"https://esm.town/v/std/utils/index.ts\"\n );\n return await valTownServeFile(path, import.meta.url);\n }\n return await serveLocalFile(path);\n}\n\nasync function serveLocalFile(path: string): Promise {\n const file = new URL(path.replace(/^\\/+/, \"\"), ROOT);\n if (!file.href.startsWith(ROOT.href)) {\n return new Response(\"Not found\", { status: 404 });\n }\n\n const ext = extname(path);\n let body: string | Uint8Array;\n try {\n body = TRANSPILED.has(ext)\n ? await Deno.readTextFile(file)\n : await Deno.readFile(file);\n } catch (err) {\n if (err instanceof Deno.errors.NotFound) {\n return new Response(\"Not found\", { status: 404 });\n }\n throw err;\n }\n\n let contentType = CONTENT_TYPES[ext] ?? \"application/octet-stream\";\n if (TRANSPILED.has(ext)) {\n body = await transpile(body as string, path);\n contentType = CONTENT_TYPES[\".js\"];\n }\n\n return new Response(body, {\n headers: {\n \"content-type\": contentType,\n // Local dev only: always pick up the latest edit on reload.\n \"cache-control\": \"no-store\",\n },\n });\n}\n",[],[188,263],"9b924462-60f2-4272-9436-08d3e1584906","auth.ts","ec5ff872-9ce0-11f1-9127-1607ee4eb77e",15,["D",1787262527736],"// Password gate. One shared password, kept in the HOUSEHUNT_PASSWORD env var\n// (never in source). A correct password sets a signed, HttpOnly cookie; the\n// signing secret is derived from the password, so changing it logs everyone out.\n\nimport type { Context, Next } from \"https://esm.sh/hono@4.13.3\";\nimport {\n deleteCookie,\n getSignedCookie,\n setSignedCookie,\n} from \"https://esm.sh/hono@4.13.3/cookie\";\n\nconst COOKIE = \"hh_session\";\nconst MAX_AGE_SECONDS = 60 * 60 * 24 * 30;\nconst PUBLIC_PATHS = new Set([\"/login\", \"/logout\", \"/favicon.ico\"]);\n\nfunction configuredPassword(): string | undefined {\n return Deno.env.get(\"HOUSEHUNT_PASSWORD\") || undefined;\n}\n\nasync function sha256(input: string): Promise {\n const bytes = new TextEncoder().encode(input);\n return new Uint8Array(await crypto.subtle.digest(\"SHA-256\", bytes));\n}\n\nfunction equalBytes(a: Uint8Array, b: Uint8Array): boolean {\n if (a.length !== b.length) return false;\n let diff = 0;\n for (let i = 0; i < a.length; i++) diff |= a[i] ^ b[i];\n return diff === 0;\n}\n\nasync function cookieSecret(password: string): Promise {\n const explicit = Deno.env.get(\"SESSION_SECRET\");\n if (explicit) return explicit;\n const digest = await sha256(`${password}::hh-session-secret`);\n return Array.from(digest, (b) => b.toString(16).padStart(2, \"0\")).join(\"\");\n}\n\nasync function passwordMatches(\n attempt: string,\n password: string,\n): Promise {\n // Digest first so the comparison is over fixed-length values.\n return equalBytes(await sha256(attempt), await sha256(password));\n}\n\nfunction misconfigured(c: Context): Response {\n return c.text(\n \"HOUSEHUNT_PASSWORD is not set. Set it in .env locally, or in the val's environment variables.\",\n 500,\n );\n}\n\nexport async function requireAuth(c: Context, next: Next) {\n const password = configuredPassword();\n if (!password) return misconfigured(c);\n\n if (PUBLIC_PATHS.has(new URL(c.req.url).pathname)) return await next();\n\n const issued = await getSignedCookie(c, await cookieSecret(password), COOKIE);\n const fresh = typeof issued === \"string\" &&\n Date.now() - Number(issued) < MAX_AGE_SECONDS * 1000;\n\n if (fresh) return await next();\n if (c.req.method === \"GET\") return c.redirect(\"/login\", 302);\n return c.text(\"Unauthorized\", 401);\n}\n\nexport async function login(c: Context): Promise {\n const password = configuredPassword();\n if (!password) return misconfigured(c);\n\n const form = await c.req.formData();\n const attempt = String(form.get(\"password\") ?? \"\");\n\n if (!await passwordMatches(attempt, password)) {\n // Crude brute-force tax; there is no shared state to rate limit against.\n await new Promise((r) => setTimeout(r, 500));\n return c.redirect(\"/login?error=1\", 302);\n }\n\n await setSignedCookie(\n c,\n COOKIE,\n String(Date.now()),\n await cookieSecret(password),\n {\n path: \"/\",\n httpOnly: true,\n sameSite: \"Lax\",\n secure: new URL(c.req.url).protocol === \"https:\",\n maxAge: MAX_AGE_SECONDS,\n },\n );\n return c.redirect(\"/\", 302);\n}\n\nexport function logout(c: Context): Response {\n deleteCookie(c, COOKIE, { path: \"/\" });\n return c.redirect(\"/login\", 302);\n}\n",[],[188,272],["D",1787262526708],[231,232],[188],"b9a1e137-9e3e-4da1-a1a1-c02db951a82a","storage.js","ec332478-9ce0-11f1-a8fe-1607ee4eb77e",10,["D",1787262527429],"// All inputs live in this browser only. Nothing is sent to the server.\n\nimport { withDefaults } from \"./schema.js\";\n\nconst KEY = \"househunt:inputs:v1\";\n\nexport function loadInputs() {\n try {\n const raw = localStorage.getItem(KEY);\n if (!raw) return null;\n const parsed = JSON.parse(raw);\n return parsed && typeof parsed === \"object\" ? withDefaults(parsed) : null;\n } catch {\n return null;\n }\n}\n\nexport function saveInputs(inputs) {\n try {\n localStorage.setItem(KEY, JSON.stringify(inputs));\n } catch {\n // Private browsing or a full quota — the session still works, it just\n // won't survive a reload.\n }\n}\n\nexport function clearInputs() {\n try {\n localStorage.removeItem(KEY);\n } catch {\n // nothing to do\n }\n}\n",[],[195,283],"2cb10c96-1a54-42ca-89f4-1a46d1c28209","setup.jsx","ec1b1a86-9ce0-11f1-8d4a-1607ee4eb77e",45,["D",1787869593115],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n BLANK,\n PERSONAL_FIELDS,\n PERSONAL_KEYS,\n withDefaults,\n} from \"./schema.js\";\n\nconst GROUPS = [\"House\", \"Liquidity\"];\n\nfunction Field({ field, value, onChange }) {\n return (\n \n {field.label}\n \n \n onChange(e.target.value === \"\" ? 0 : Number(e.target.value))}\n className=\"w-32 rounded border border-slate-300 px-2 py-1 text-right text-xs font-mono tabular-nums focus:border-slate-900 focus:outline-none\"\n />\n {field.suffix ?? \"\"}\n \n \n );\n}\n\nexport default function Setup({ onDone }) {\n const [values, setValues] = useState(BLANK);\n const [paste, setPaste] = useState(\"\");\n const [pasteError, setPasteError] = useState(\"\");\n\n const set = (key) => (v) => setValues((p) => ({ ...p, [key]: v }));\n\n const importJson = () => {\n try {\n const parsed = JSON.parse(paste);\n if (!parsed || typeof parsed !== \"object\") {\n throw new Error(\"not an object\");\n }\n setValues(withDefaults(parsed));\n setPaste(\"\");\n setPasteError(\"\");\n } catch {\n setPasteError(\"That isn't valid JSON.\");\n }\n };\n\n const ready = PERSONAL_KEYS.some((k) => Number(values[k]) > 0);\n\n return (\n

Set up your numbers

\n These stay in this browser's local storage — they are not in the\n source and never reach the server. Everything is editable later;\n rates, fees, and county assumptions already have defaults.\n

\n\n

\n {GROUPS.map((group) => (\n \n

\n {group}\n

\n {PERSONAL_FIELDS.filter((f) => f.group === group).map((f) => (\n \n ))}\n

\n ))}\n\n

\n Paste saved values\n

\n JSON exported from another browser, or from your own notes.\n

\n setPaste(e.target.value)}\n rows={5}\n placeholder='{\"price\": 1100000, \"cashNow\": 300000, ...}'\n className=\"mt-1 w-full rounded border border-slate-300 px-2 py-1 font-mono text-xs focus:border-slate-900 focus:outline-none\"\n />\n {pasteError &&

{pasteError}

}\n \n Load into the form\n \n

\n\n onDone(values)}\n disabled={!ready}\n className=\"w-full rounded bg-slate-900 px-3 py-2 text-sm text-white hover:bg-slate-700 disabled:opacity-40\"\n >\n Save and open the model\n \n

\n \n );\n}\n",[],[195,291],"4c1dad0d-7e90-4edb-bb84-aa2fb0262eb4","schema.js","ec0fae62-9ce0-11f1-b401-1607ee4eb77e",58,["D",1788042566127],5,"// Two kinds of input. Model parameters are market/county assumptions and stay\n// in source. Personal fields are your money — they live only in this browser's\n// localStorage, entered on first visit. Cash, gifts, and the SBLOC are a\n// dedicated fund for the purchase itself (through move-in), isolated from\n// ordinary monthly income/expenses, which this app doesn't track.\n\nexport const MODEL_PARAMS = {\n // House\n downPct: 20,\n pmiAnnualPct: 0.55,\n mortgageRate: 6.5,\n termYears: 30,\n propTaxRate: 1.65,\n itoc: 692,\n insuranceAnnual: 2400,\n // The price `insuranceAnnual` is a quote for. Premiums price off replacement\n // cost, so the quote has to be pinned to a house before it can be scaled to\n // any other one — otherwise a $1.6M house insures for the same $2,400 as a\n // $600k house, and the frontier's price axis sees no insurance at all.\n insuranceBasePrice: 1000000,\n replacementCostPct: 65,\n insuranceVacancyMult: 1.75,\n buildersRiskPct: 2.0,\n buyerSharePct: 50,\n titlePct: 0.55,\n fixedFees: 5500,\n escrowMonths: 3,\n firstTime: true,\n ownerOccupied: true,\n\n // Renovation\n renoMonths: 6,\n renoStart: 0,\n movingCost: 5000,\n renoValueAdd: 70,\n appreciation: 3.0,\n\n // Reassessment\n modelReassessment: true,\n // Maryland does not reassess on sale — the SDAT value in force at closing\n // carries until the next cycle, and it usually trails the purchase price.\n assessmentRatioPct: 85,\n reassessLagMonths: 6,\n homesteadCapPct: 10,\n\n // Policy\n priority: \"reno,sbloc\",\n sweepMonthly: true,\n};\n\nexport const PERSONAL_FIELDS = [\n { key: \"price\", group: \"House\", label: \"Purchase price\", step: 10000 },\n { key: \"renoCost\", group: \"House\", label: \"Renovation budget\", step: 5000 },\n { key: \"rent\", group: \"House\", label: \"DC rent (double carry)\" },\n\n { key: \"cashNow\", group: \"Liquidity\", label: \"Cash today\" },\n { key: \"gift1\", group: \"Liquidity\", label: \"Gift 1\" },\n {\n key: \"gift1Month\",\n group: \"Liquidity\",\n label: \"Gift 1 arrives\",\n suffix: \"mo\",\n },\n { key: \"gift2\", group: \"Liquidity\", label: \"Gift 2\" },\n {\n key: \"gift2Month\",\n group: \"Liquidity\",\n label: \"Gift 2 arrives\",\n suffix: \"mo\",\n },\n { key: \"sblocLimit\", group: \"Liquidity\", label: \"SBLOC limit\" },\n {\n key: \"sblocRate\",\n group: \"Liquidity\",\n label: \"SBLOC rate\",\n step: 0.25,\n suffix: \"%\",\n },\n { key: \"cashFloor\", group: \"Liquidity\", label: \"Cash floor\" },\n];\n\nexport const PERSONAL_KEYS = PERSONAL_FIELDS.map((f) => f.key);\n\nexport const BLANK = {\n ...MODEL_PARAMS,\n ...Object.fromEntries(PERSONAL_KEYS.map((k) => [k, 0])),\n};\n\n// Fill in anything a saved set is missing, so adding a parameter later doesn't\n// strand people on stale storage.\nexport function withDefaults(saved) {\n return { ...BLANK, ...saved };\n}\n",[],[195,299],"e9718646-83c6-4025-a3e3-02e4a2870d68","model_test.js","1797354a-a3f9-11f1-8f89-1607ee4eb77e",62,["D",1788042566216],"// Tests for the pure model. Run with `deno task test`.\n//\n// No test-framework dependency on purpose: the rest of this project pulls its\n// libraries from URLs at runtime, and the model itself imports nothing, so the\n// suite stays runnable offline.\n\nimport { MODEL_PARAMS } from \"./schema.js\";\nimport {\n annualPropertyTax,\n assessedAtClose,\n closingCosts,\n frontier,\n HORIZON,\n insuranceProfile,\n mortgageBalance,\n piti60,\n pmiMonthly,\n pmt,\n priceCeiling,\n recordationTax,\n renoHeadroom,\n renovationSchedule,\n simulate,\n trueValueSeries,\n} from \"./model.js\";\n\n// --- assertions -------------------------------------------------------------\n\nfunction assert(cond, msg) {\n if (!cond) throw new Error(msg ?? \"assertion failed\");\n}\n\nfunction assertEquals(actual, expected, msg) {\n if (actual !== expected) {\n throw new Error(`${msg ?? \"not equal\"}: got ${actual}, want ${expected}`);\n }\n}\n\nfunction assertClose(actual, expected, tolerance, msg) {\n if (!(Math.abs(actual - expected) <= tolerance)) {\n throw new Error(\n `${msg ?? \"not close\"}: got ${actual}, want ${expected} ±${tolerance}`,\n );\n }\n}\n\n// --- fixtures ---------------------------------------------------------------\n\nconst PERSONAL = {\n price: 1000000,\n renoCost: 200000,\n rent: 3000,\n cashNow: 500000,\n gift1: 100000,\n gift1Month: 3,\n gift2: 100000,\n gift2Month: 12,\n sblocLimit: 300000,\n sblocRate: 6,\n cashFloor: 50000,\n};\n\nconst BASE = { ...MODEL_PARAMS, ...PERSONAL };\nconst at = (over) => ({ ...BASE, ...over });\n\n// --- Montgomery County transfer taxes ---------------------------------------\n\nDeno.test(\"recordationTax applies the tiers marginally\", () => {\n // 500k @ 4.45 + 100k @ 6.75 + 150k @ 10.20 + 250k @ 10.78, all per $500.\n assertClose(recordationTax(1000000), 14250, 0.01, \"$1M\");\n assertClose(recordationTax(500000), 4450, 0.01, \"top of the first tier\");\n assertClose(recordationTax(0), 0, 0.01, \"no price, no tax\");\n});\n\nDeno.test(\"recordationTax is continuous across tier boundaries\", () => {\n for (const edge of [500000, 600000, 750000, 1000000]) {\n const below = recordationTax(edge - 1);\n const above = recordationTax(edge + 1);\n assertClose(above - below, 0, 0.1, `discontinuity at ${edge}`);\n }\n});\n\nDeno.test(\"closing costs honor the first-time and owner-occupied breaks\", () => {\n const full = closingCosts(at({ firstTime: false, ownerOccupied: false }));\n const broken = closingCosts(at({ firstTime: true, ownerOccupied: true }));\n\n assertClose(\n full.stateTransfer,\n 1000000 * 0.005 * 0.5,\n 0.01,\n \"state transfer\",\n );\n assertEquals(\n broken.stateTransfer,\n 0,\n \"first-time buyer pays no state transfer\",\n );\n\n // County exempts the first $50k of consideration for an owner-occupant.\n assertClose(\n full.countyTransfer - broken.countyTransfer,\n 50000 * 0.01 * 0.5,\n 0.01,\n );\n // And the recordation credit is worth $890 gross, split at the buyer's share.\n assertClose(full.recordation - broken.recordation, 890 * 0.5, 0.01);\n});\n\nDeno.test(\"closing cost total is the sum of its parts\", () => {\n const cc = closingCosts(BASE);\n const parts = cc.recordation + cc.countyTransfer + cc.stateTransfer +\n cc.title + cc.fixed + cc.prepaids;\n assertClose(cc.total, parts, 0.01);\n});\n\n// --- financing --------------------------------------------------------------\n\nDeno.test(\"pmt matches a known amortization\", () => {\n // $800,000 at 6.5% over 30 years.\n assertClose(pmt(800000, 6.5, 30), 5056.5442, 0.001);\n assertClose(pmt(120000, 0, 10), 1000, 1e-9, \"zero rate is straight-line\");\n assertEquals(pmt(100000, 5, 0), 0, \"zero term has no payment\");\n});\n\nDeno.test(\"mortgageBalance agrees with month-by-month amortization\", () => {\n // `simulate` amortizes in a loop; the frontier uses the closed form. If these\n // ever drift, month-60 PITI on the chart stops matching the panel beside it.\n const r = simulate(BASE);\n for (const m of [1, 12, 36, HORIZON]) {\n assertClose(\n mortgageBalance(r.loan, BASE.mortgageRate, BASE.termYears, m),\n r.rows[m].mortBal,\n 1,\n `balance at month ${m}`,\n );\n }\n assertEquals(\n mortgageBalance(800000, 6.5, 30, 0),\n 800000,\n \"month 0 is the loan\",\n );\n});\n\nDeno.test(\"PMI applies below 20% down and terminates at 80% LTV\", () => {\n const full = at({ downPct: 20 });\n assertEquals(\n pmiMonthly(full, full.price * 0.8, full.price * 0.8),\n 0,\n \"20% down\",\n );\n\n const thin = at({ downPct: 10 });\n const loan = thin.price * 0.9;\n assertClose(\n pmiMonthly(thin, loan, loan),\n (loan * thin.pmiAnnualPct) / 100 / 12,\n 0.01,\n );\n assertEquals(\n pmiMonthly(thin, loan, thin.price * 0.8),\n 0,\n \"terminated once the balance reaches 80% of price\",\n );\n\n const r = simulate(thin);\n assert(r.pmiInitial > 0, \"10% down should carry PMI\");\n assert(r.rows[0].pmi > 0, \"and it should show in the monthly rows\");\n assertEquals(simulate(full).pmiInitial, 0, \"20% down should not\");\n});\n\n// --- renovation schedule and market value -----------------------------------\n\nDeno.test(\"renovation draws sum to the budget\", () => {\n const spread = renovationSchedule(at({ renoStart: 2, renoMonths: 6 }));\n assertEquals(spread.moveIn, 8);\n assertEquals(spread.draws.size, 6);\n assertClose(\n [...spread.draws.values()].reduce((a, b) => a + b, 0),\n 200000,\n 0.01,\n );\n assert(\n spread.draws.has(2) && spread.draws.has(7),\n \"draws run start..start+n-1\",\n );\n\n const lump = renovationSchedule(at({ renoStart: 3, renoMonths: 0 }));\n assertEquals(lump.moveIn, 3, \"zero-length reno moves in at the start month\");\n assertClose(lump.draws.get(3), 200000, 0.01, \"and pays in one lump\");\n});\n\nDeno.test(\"value-add appreciates from the month it is spent\", () => {\n const inp = at({\n appreciation: 3,\n renoValueAdd: 70,\n renoStart: 0,\n renoMonths: 6,\n });\n const { values } = trueValueSeries(inp);\n\n assertClose(values[0], inp.price + (200000 / 6) * 0.7, 0.5, \"month 0\");\n\n // By month 60 the whole add has been in the ground for a while, so it must\n // have grown — holding it flat was the old behavior.\n const flat = inp.price * Math.pow(1.03, 5) + 200000 * 0.7;\n assert(\n values[HORIZON] > flat + 1000,\n \"the add should compound, not sit still\",\n );\n\n const noGrowth = trueValueSeries(at({ appreciation: 0 })).values;\n assertClose(noGrowth[HORIZON], inp.price + 200000 * 0.7, 1, \"flat at 0%\");\n});\n\n// --- insurance --------------------------------------------------------------\n\nDeno.test(\"insurance is the quote at the anchor price\", () => {\n const inp = at({ price: 1000000, insuranceBasePrice: 1000000, renoCost: 0 });\n assertClose(insuranceProfile(inp).beforeAnnual, inp.insuranceAnnual, 0.01);\n});\n\nDeno.test(\"a pricier house costs more to insure\", () => {\n // Regression: the premium used to be a flat dollar quote divided by a\n // price-dependent replacement cost, which made bigger houses *cheaper* to\n // insure and bent every iso-PITI contour the wrong way.\n let last = 0;\n for (const price of [600000, 800000, 1000000, 1200000, 1600000]) {\n const { afterRenoAnnual } = insuranceProfile(at({ price }));\n assert(\n afterRenoAnnual > last,\n `premium should rise with price (at ${price})`,\n );\n last = afterRenoAnnual;\n }\n});\n\nDeno.test(\"renovation raises replacement cost and the premium with it\", () => {\n const none = insuranceProfile(at({ renoCost: 0 }));\n const some = insuranceProfile(at({ renoCost: 200000 }));\n assertClose(some.replacementAfter - none.replacementAfter, 200000, 0.01);\n assert(some.afterRenoAnnual > none.afterRenoAnnual, \"premium steps up\");\n});\n\nDeno.test(\"the vacancy multiplier applies only when the house sits empty\", () => {\n const empty = insuranceProfile(at({ renoStart: 0, renoMonths: 6 }));\n assertClose(\n empty.duringRenoAnnual,\n empty.beforeAnnual * BASE.insuranceVacancyMult,\n 0.01,\n );\n\n const straightIn = insuranceProfile(at({ renoStart: 0, renoMonths: 0 }));\n assertClose(straightIn.duringRenoAnnual, straightIn.beforeAnnual, 0.01);\n});\n\nDeno.test(\"builder's risk is a share of construction cost\", () => {\n const { buildersRisk } = insuranceProfile(\n at({ renoCost: 200000, buildersRiskPct: 2 }),\n );\n assertClose(buildersRisk, 4000, 0.01);\n});\n\n// --- property tax and the Maryland assessment -------------------------------\n\nDeno.test(\"the ITOC credit follows the owner-occupancy affidavit\", () => {\n const occupied = at({ ownerOccupied: true });\n const rented = at({ ownerOccupied: false });\n assertClose(\n annualPropertyTax(1000000, rented) - annualPropertyTax(1000000, occupied),\n BASE.itoc,\n 0.01,\n );\n});\n\nDeno.test(\"assessment starts below price, because Maryland doesn't reassess on sale\", () => {\n const inp = at({ assessmentRatioPct: 85 });\n assertClose(assessedAtClose(inp), 850000, 0.01);\n assertClose(simulate(inp).rows[0].assessed, 850000, 1);\n assertClose(assessedAtClose(at({ assessmentRatioPct: 100 })), 1000000, 0.01);\n});\n\nDeno.test(\"assessed value never exceeds market value\", () => {\n // Regression: overlapping phase-ins used to stack, so the renovation ramp and\n // the triennial ramp both ran and drove the assessment past what the house\n // was worth. Sweep the timings that put the two events near each other, with\n // the homestead cap lifted so it can't mask the overshoot.\n for (const renoStart of [0, 3, 6, 12, 18, 24, 30]) {\n for (const lag of [0, 3, 6, 9]) {\n const inp = at({\n renoStart,\n reassessLagMonths: lag,\n homesteadCapPct: 1000,\n });\n const r = simulate(inp);\n for (const row of r.rows) {\n assert(\n row.assessed <= row.value + 1,\n `assessed ${row.assessed} > market ${row.value} at month ${row.month} ` +\n `(renoStart ${renoStart}, lag ${lag})`,\n );\n }\n }\n }\n});\n\nDeno.test(\"colliding reassessment triggers apply the increase once\", () => {\n // renoStart 24 + 6 months of work + a 6-month lag lands the SDAT pickup\n // exactly on the triennial month.\n const collide = at({\n renoStart: 24,\n renoMonths: 6,\n reassessLagMonths: 6,\n homesteadCapPct: 1000,\n });\n const justBefore = { ...collide, reassessLagMonths: 5 };\n const justAfter = { ...collide, reassessLagMonths: 7 };\n\n const end = (inp) => simulate(inp).rows[HORIZON].assessed;\n const mid = end(collide);\n assert(\n mid <= Math.max(end(justBefore), end(justAfter)) + 1,\n \"a collision should not assess more than either neighbouring lag\",\n );\n});\n\nDeno.test(\"the homestead cap defers an increase rather than forgiving it\", () => {\n // A big renovation pushes the phase-in past 10% a year, so the cap binds.\n const inp = at({ renoCost: 400000, homesteadCapPct: 10 });\n const r = simulate(inp);\n const yearly = [0, 12, 24, 36, 48, 60].map((m) => r.rows[m].assessed);\n\n let capped = false;\n for (let i = 1; i < yearly.length; i++) {\n const growth = yearly[i] / yearly[i - 1] - 1;\n assert(growth <= 0.1 + 1e-6, `year ${i} grew ${growth}, over the cap`);\n assert(growth >= -1e-9, `year ${i} went backwards`);\n if (growth > 0.09) capped = true;\n }\n assert(capped, \"this scenario should actually bind the cap\");\n\n // Uncapped, the same scenario reaches a strictly higher assessment — the\n // capped run is behind, not permanently short by a forgiven amount.\n const uncapped = simulate({ ...inp, homesteadCapPct: 1000 });\n assert(uncapped.rows[HORIZON].assessed > r.rows[HORIZON].assessed);\n});\n\nDeno.test(\"the cap does not bind in the first year of ownership\", () => {\n const r = simulate(\n at({\n renoStart: 0,\n renoMonths: 0,\n reassessLagMonths: 3,\n homesteadCapPct: 0,\n }),\n );\n assert(\n r.rows[11].assessed >= r.rows[6].assessed,\n \"first year rides uncapped\",\n );\n});\n\nDeno.test(\"the phase-in runs 36 months, not just to the horizon\", () => {\n // Regression: the ramp length used to be clipped to the months left in the\n // window, so a month-36 reassessment finished by month 60 instead of 72.\n const inp = at({\n renoCost: 0,\n assessmentRatioPct: 85,\n homesteadCapPct: 1000,\n });\n const r = simulate(inp);\n const values = trueValueSeries(inp).values;\n\n const reached = r.rows[HORIZON].assessed - r.rows[36].assessed;\n const target = values[36] - r.rows[36].assessed;\n // 24 of the 36 phase-in months have elapsed by month 60.\n assertClose(reached / target, 24 / 36, 0.02, \"two thirds phased in\");\n assert(\n r.rows[HORIZON].assessed < values[36],\n \"should not have finished early\",\n );\n});\n\nDeno.test(\"reassessment can be switched off\", () => {\n const r = simulate(at({ modelReassessment: false }));\n const base = assessedAtClose(BASE);\n for (const row of r.rows) assertClose(row.assessed, base, 1);\n assertClose(r.taxAtEnd, r.monthlyTax, 0.01, \"tax stays flat\");\n});\n\nDeno.test(\"a small renovation waits for the regular cycle\", () => {\n const under = at({ renoCost: 100000, renoValueAdd: 70 }); // $70k of value\n const over = at({ renoCost: 200000, renoValueAdd: 70 }); // $140k of value\n const r = simulate(under);\n // Nothing moves before the triennial month when the pickup isn't triggered.\n assertClose(r.rows[30].assessed, r.rows[0].assessed, 1);\n assert(\n simulate(over).rows[30].assessed > r.rows[30].assessed,\n \"crossing $100k should pull the assessment forward\",\n );\n});\n\n// --- the cash simulation ----------------------------------------------------\n\nDeno.test(\"cash reconciles against the lumpy outflows and the gifts\", () => {\n const inp = at({ sblocLimit: 0, cashNow: 900000, cashFloor: 0 });\n const r = simulate(inp);\n const spent = r.rows.reduce((a, row) => a + row.lumpy, 0);\n assertClose(\n r.rows[HORIZON].cash,\n inp.cashNow + inp.gift1 + inp.gift2 - spent,\n 2,\n \"every dollar is accounted for\",\n );\n assertEquals(r.peakSbloc, 0, \"no borrowing was needed\");\n});\n\nDeno.test(\"closing, builder's risk, draws, and moving all hit the fund\", () => {\n const inp = at({ renoStart: 2, renoMonths: 6 });\n const r = simulate(inp);\n assertClose(\n r.rows[0].lumpy,\n r.down + r.cc.total,\n 1,\n \"month 0 is down + closing\",\n );\n assertClose(\n r.rows[2].lumpy,\n r.buildersRisk + inp.renoCost / 6,\n 1,\n \"builder's risk lands with the first draw\",\n );\n assertClose(r.rows[8].lumpy, inp.movingCost, 1, \"moving lands at move-in\");\n // Rows carry rounded dollars, so the sum drifts a little from the total.\n assertClose(\n r.totalThroughMoveIn,\n r.rows.filter((x) => x.month <= r.moveIn).reduce((a, x) => a + x.lumpy, 0),\n 5,\n );\n});\n\nDeno.test(\"gifts scheduled outside the horizon are reported, not silently dropped\", () => {\n const clean = simulate(BASE);\n assertEquals(clean.strandedGifts.length, 0);\n\n const late = simulate(at({ gift2Month: HORIZON + 1 }));\n assertEquals(late.strandedGifts.length, 1);\n assertEquals(late.strandedGifts[0].label, \"Gift 2\");\n assertEquals(late.strandedGifts[0].amount, 100000);\n\n assertEquals(\n simulate(at({ gift1Month: -1 })).strandedGifts.length,\n 1,\n \"before closing\",\n );\n assertEquals(\n simulate(at({ gift2: 0, gift2Month: 999 })).strandedGifts.length,\n 0,\n \"a zero gift is not a warning\",\n );\n});\n\nDeno.test(\"the SBLOC bridges a gap and is repaid when a gift lands\", () => {\n const inp = at({\n cashNow: 260000,\n gift1: 0,\n gift2: 250000,\n gift2Month: 9,\n cashFloor: 0,\n });\n const r = simulate(inp);\n assert(r.peakSbloc > 0, \"should have drawn\");\n assert(r.sblocInterest > 0, \"and accrued interest\");\n assert(\n r.sblocClearedMonth !== null && r.sblocClearedMonth >= 9,\n \"repaid at the gift\",\n );\n assert(!r.limitBreach, \"within the limit\");\n});\n\nDeno.test(\"an exhausted line is flagged as a breach\", () => {\n const r = simulate(\n at({ cashNow: 100000, gift1: 0, gift2: 0, sblocLimit: 50000 }),\n );\n assert(r.limitBreach, \"the line cannot cover this\");\n assert(r.shortfall > 0, \"and cash goes negative\");\n});\n\nDeno.test(\"protecting the renovation delays repaying the line\", () => {\n const inp = at({\n cashNow: 240000,\n gift1: 0,\n gift2: 300000,\n gift2Month: 2,\n renoStart: 0,\n renoMonths: 12,\n cashFloor: 0,\n });\n const protectedFirst = simulate({ ...inp, priority: \"reno,sbloc\" });\n const repayFirst = simulate({ ...inp, priority: \"sbloc,reno\" });\n assert(\n repayFirst.sblocInterest <= protectedFirst.sblocInterest,\n \"repaying first should cost no more interest than reserving the draws\",\n );\n});\n\n// --- consistency between the panel and the frontier -------------------------\n\nDeno.test(\"piti60 reproduces the simulation's month-60 PITI\", () => {\n // These are two separate code paths over the same assumptions. This is the\n // test that stops them drifting apart.\n for (\n const over of [\n {},\n { price: 700000, renoCost: 50000 },\n { price: 1500000, renoCost: 400000 },\n { downPct: 10 },\n { modelReassessment: false },\n { ownerOccupied: false },\n { renoStart: 6, renoMonths: 12 },\n ]\n ) {\n const inp = at(over);\n assertClose(\n piti60(inp, inp.price, inp.renoCost),\n simulate(inp).pitiAtEnd,\n 0.01,\n `mismatch for ${JSON.stringify(over)}`,\n );\n }\n});\n\nDeno.test(\"piti60 rises monotonically with price\", () => {\n // priceAtPiti bisects on this, so it has to hold across the search range.\n let last = -Infinity;\n for (let price = 100000; price <= 4000000; price += 100000) {\n const v = piti60(BASE, price, BASE.renoCost);\n assert(v > last, `PITI fell going into ${price}`);\n last = v;\n }\n});\n\nDeno.test(\"frontier headroom is what the simulation can actually spend\", () => {\n // Regression: the frontier charged for down payment, closing, moving and the\n // cash floor but not builder's risk, so it promised a renovation the cash\n // simulation could not fund.\n const inp = at({ sblocLimit: 5000000, sblocRate: 0 });\n const f = frontier(inp);\n\n const spend = (renoCost) => {\n const r = simulate({ ...inp, renoCost });\n const end = r.rows[HORIZON];\n return end.cash - end.sbloc - inp.cashFloor;\n };\n\n assertClose(\n spend(f.headroom),\n 0,\n 2,\n \"the headroom exactly exhausts the fund\",\n );\n assert(spend(f.headroom - 5000) > 0, \"a smaller renovation leaves slack\");\n assert(spend(f.headroom + 5000) < 0, \"a larger one overdraws\");\n});\n\nDeno.test(\"headroom falls as price rises\", () => {\n const fund = BASE.cashNow + BASE.gift1 + BASE.gift2;\n let last = Infinity;\n for (let price = 600000; price <= 1600000; price += 50000) {\n const h = renoHeadroom(BASE, price, fund);\n assert(h < last, `headroom rose going into ${price}`);\n last = h;\n }\n});\n\nDeno.test(\"priceCeiling inverts renoHeadroom\", () => {\n const fund = BASE.cashNow + BASE.gift1 + BASE.gift2;\n for (const reno of [0, 100000, 250000]) {\n const ceiling = priceCeiling(BASE, fund, reno);\n assertClose(renoHeadroom(BASE, ceiling, fund), reno, 5, `at reno ${reno}`);\n }\n assertEquals(priceCeiling(BASE, 0, 100000), 0, \"no fund buys nothing\");\n});\n\nDeno.test(\"the frontier's own summary figures line up\", () => {\n const f = frontier(BASE);\n assertClose(f.fund, BASE.cashNow + BASE.gift1 + BASE.gift2, 0.01);\n assertClose(f.slack, f.headroom - BASE.renoCost, 0.01);\n assertClose(f.piti, simulate(BASE).pitiAtEnd, 0.01);\n assert(f.pitiPerPrice > 0, \"more house costs more per month\");\n assert(f.pitiPerReno > 0, \"so does more renovation\");\n assert(\n f.pitiPerPrice > f.pitiPerReno,\n \"price should move PITI harder than renovation — that's why the contours are steep\",\n );\n assert(f.contours.length > 0, \"there should be contours to draw\");\n});\n\n// --- degenerate inputs ------------------------------------------------------\n\nDeno.test(\"a blank form produces finite numbers\", () => {\n const blank = { ...MODEL_PARAMS };\n for (const k of Object.keys(PERSONAL)) blank[k] = 0;\n const r = simulate(blank);\n for (const [k, v] of Object.entries(r)) {\n if (typeof v === \"number\") assert(Number.isFinite(v), `${k} is ${v}`);\n }\n assertEquals(r.rows.length, HORIZON + 1);\n});\n\nDeno.test(\"a zero-length renovation still pays and moves in at month 0\", () => {\n const r = simulate(at({ renoStart: 0, renoMonths: 0 }));\n assertEquals(r.moveIn, 0);\n assertClose(\n r.rows[0].lumpy,\n r.down + r.cc.total + BASE.renoCost + r.buildersRisk + BASE.movingCost,\n 1,\n \"everything lands at closing\",\n );\n});\n",[],[195,308],"70956aa5-44ab-4eb6-94cd-87510a7f7b72","model.jsx","ec473652-9ce0-11f1-8da2-1607ee4eb77e",56,["D",1787917328719],12,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n Area,\n CartesianGrid,\n ComposedChart,\n Legend,\n Line,\n LineChart,\n ReferenceDot,\n ReferenceLine,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"https://esm.sh/recharts@2.15.4?deps=react@18.2.0,react-dom@18.2.0\";\nimport { BLANK, MODEL_PARAMS } from \"./schema.js\";\n\nconst HORIZON = 60;\n\n// Slider bounds, shared with the price/renovation frontier chart so the two\n// always describe the same window.\nconst PRICE_MIN = 600000;\nconst PRICE_MAX = 1600000;\nconst RENO_MAX = 500000;\n\nconst PRIORITY_OPTIONS = [\n { value: \"reno,sbloc\", label: \"Finish renovation first, then repay SBLOC\" },\n { value: \"sbloc,reno\", label: \"Repay SBLOC first, then finish renovation\" },\n];\n\nfunction recordationTax(price) {\n const tiers = [\n [500000, 4.45],\n [600000, 6.75],\n [750000, 10.2],\n [1000000, 10.78],\n [Infinity, 11.35],\n ];\n let prev = 0;\n let tax = 0;\n for (const [cap, rate] of tiers) {\n if (price <= prev) break;\n const portion = Math.min(price, cap) - prev;\n tax += (portion / 500) * rate;\n prev = cap;\n }\n return tax;\n}\n\nfunction pmt(principal, annualPct, years) {\n const r = annualPct / 100 / 12;\n const n = years * 12;\n if (n <= 0) return 0;\n if (r === 0) return principal / n;\n return (principal * r) / (1 - Math.pow(1 + r, -n));\n}\n\nfunction moveInMonth(inp) {\n return (\n Math.max(0, Math.round(inp.renoStart)) +\n Math.max(0, Math.round(inp.renoMonths))\n );\n}\n\n// Three distinct insurance costs, not one.\n//\n// 1. While the house sits empty between closing and move-in, a standard HO-3\n// won't carry it — the vacancy clause suspends vandalism, theft, and water\n// coverage somewhere around day 60, and the lender requires continuous\n// coverage regardless. That's a vacancy endorsement or a vacant-dwelling\n// policy, priced above the standard premium. Vacancy starts at *closing*,\n// not at `renoStart` — the trigger is the empty house, not the work.\n// 2. Builder's risk covers the structure and materials during construction.\n// The GC's liability and comp policies don't touch the building, and the\n// AIA forms leave property insurance with the owner, so this is ours. It's\n// a single premium for the project term, quoted off construction cost, so\n// it lands in `lumpy` at `renoStart` like any other purchase-fund outlay.\n// 3. After move-in the premium steps up permanently, because dwelling coverage\n// prices off replacement cost and renovation dollars go into the structure\n// roughly 1:1. Land isn't insured, hence `replacementCostPct` of price as\n// the pre-reno base rather than price itself.\n//\n// Not modeled: construction-cost inflation on replacement value over the\n// horizon, which would drift the post-reno premium up a few percent a year.\nfunction insuranceProfile(inp) {\n const replacementBefore = (inp.price * inp.replacementCostPct) / 100;\n const replacementAfter = replacementBefore + inp.renoCost;\n const ratio =\n replacementBefore > 0 ? replacementAfter / replacementBefore : 1;\n const vacantPeriod = moveInMonth(inp) > 0;\n\n return {\n replacementBefore,\n replacementAfter,\n duringRenoAnnual:\n inp.insuranceAnnual * (vacantPeriod ? inp.insuranceVacancyMult : 1),\n afterRenoAnnual: inp.insuranceAnnual * ratio,\n buildersRisk: (inp.renoCost * inp.buildersRiskPct) / 100,\n };\n}\n\nfunction closingCosts(inp) {\n const price = inp.price;\n const loan = price * (1 - inp.downPct / 100);\n const share = inp.buyerSharePct / 100;\n\n const recGross = recordationTax(price);\n const recNet = Math.max(0, recGross - (inp.ownerOccupied ? 890 : 0));\n const recordation = recNet * share;\n\n const countyBase = inp.ownerOccupied ? Math.max(0, price - 50000) : price;\n const countyTransfer = countyBase * 0.01 * share;\n\n const stateTransfer = inp.firstTime ? 0 : price * 0.005 * share;\n\n const title = (price * inp.titlePct) / 100;\n const fixed = inp.fixedFees;\n\n const annualTax = Math.max(0, (price * inp.propTaxRate) / 100 - inp.itoc);\n // The prepaid year of hazard insurance is bought at the rate in force on\n // closing day, which is the vacancy rate if the house sits empty first.\n const escrow =\n annualTax * (inp.escrowMonths / 12) + insuranceProfile(inp).duringRenoAnnual;\n const perDiem = (loan * (inp.mortgageRate / 100)) / 365 * 15;\n const prepaids = escrow + perDiem;\n\n const total =\n recordation + countyTransfer + stateTransfer + title + fixed + prepaids;\n\n return {\n recordation,\n countyTransfer,\n stateTransfer,\n title,\n fixed,\n prepaids,\n total,\n };\n}\n\n// ---------------------------------------------------------------------------\n// Price / renovation frontier\n//\n// Collapse the whole timeline into one accounting identity: every dollar of\n// cash and gifts lands in the down payment, closing costs, moving, or the\n// renovation. Timing drops out, so what remains is a single curve trading\n// price against renovation budget.\n//\n// The SBLOC is deliberately absent. It is a bridge, repaid out of the same\n// cash and gifts, so it changes when a dollar is available, not how many there\n// are — and this view has already thrown timing away. Borrowing shows up in\n// the trajectory chart, which still knows what month it is.\n\n// Everything the price buys before a nail is swung, plus the cash you refuse to\n// spend. Closing costs are re-derived at the trial price, so the recordation\n// tiers and the county's $50k owner-occupied exemption stay honest.\nfunction fixedUses(inp, price) {\n const down = (price * inp.downPct) / 100;\n const cc = closingCosts({ ...inp, price }).total;\n return down + cc + inp.movingCost + inp.cashFloor;\n}\n\nfunction renoHeadroom(inp, price, budget) {\n return budget - fixedUses(inp, price);\n}\n\n// Highest price that still leaves `reno` for the renovation. Headroom falls\n// monotonically with price, so bisect rather than invert the tier table.\nfunction priceCeiling(inp, budget, reno) {\n let lo = 0;\n let hi = 5000000;\n if (renoHeadroom(inp, lo, budget) < reno) return 0;\n if (renoHeadroom(inp, hi, budget) >= reno) return hi;\n for (let i = 0; i < 50; i++) {\n const mid = (lo + hi) / 2;\n if (renoHeadroom(inp, mid, budget) >= reno) lo = mid;\n else hi = mid;\n }\n return lo;\n}\n\n// Month-60 PITI, without running the cash simulation: the mortgage payment\n// plus the reassessed tax and insurance. `simulate` computes the same figure\n// as `pitiAtEnd`, but the frontier has to evaluate this a few thousand times\n// per render to invert it, so this reuses only the assessment machinery.\nfunction piti60(inp, price, renoCost) {\n const at = { ...inp, price, renoCost };\n const loan = price * (1 - inp.downPct / 100);\n const mPmt = pmt(loan, inp.mortgageRate, inp.termYears);\n\n const renoStart = Math.max(0, Math.round(inp.renoStart));\n const renoMonths = Math.max(0, Math.round(inp.renoMonths));\n const moveIn = renoStart + renoMonths;\n\n const trueValueArr = [];\n for (let m = 0; m <= HORIZON; m++) {\n // Same draw schedule as `simulate`: evenly spread over the reno months,\n // or a single lump at renoStart when the length is zero.\n const done = renoMonths <= 0\n ? (m >= renoStart ? 1 : 0)\n : Math.min(1, Math.max(0, (m - renoStart + 1) / renoMonths));\n trueValueArr.push(\n price * Math.pow(1 + inp.appreciation / 100, m / 12) +\n (renoCost * done * inp.renoValueAdd) / 100\n );\n }\n\n const assessed = assessedValueSeries(at, trueValueArr, moveIn);\n const tax =\n Math.max(0, (assessed[HORIZON] * inp.propTaxRate) / 100 - inp.itoc) / 12;\n // Post-reno premium, since month 60 is well past move-in. It varies with\n // both axes of this chart — price sets the structure's replacement cost and\n // the renovation adds to it — so it has to be re-derived at the trial point.\n return mPmt + tax + insuranceProfile(at).afterRenoAnnual / 12;\n}\n\n// Price that puts month-60 PITI exactly at `target`, at a given renovation\n// budget. Iso-PITI lines run steeply — about $5 of renovation per $1 of price —\n// so they are near-vertical on these axes and are far better conditioned\n// solved for price than for renovation. PITI rises monotonically with price,\n// so bisect. Returns null when the level is unreachable in the search range.\nconst PRICE_SEARCH_LO = 100000;\nconst PRICE_SEARCH_HI = 4000000;\n\nfunction priceAtPiti(inp, renoCost, target) {\n if (piti60(inp, PRICE_SEARCH_LO, renoCost) > target) return null;\n if (piti60(inp, PRICE_SEARCH_HI, renoCost) < target) return null;\n let lo = PRICE_SEARCH_LO;\n let hi = PRICE_SEARCH_HI;\n for (let i = 0; i < 26; i++) {\n const mid = (lo + hi) / 2;\n if (piti60(inp, mid, renoCost) < target) lo = mid;\n else hi = mid;\n }\n return (lo + hi) / 2;\n}\n\n// Renovation spend at which the added value trips MD's $100k interim-assessment\n// threshold — a horizontal cliff across the chart, since it's a level of reno.\nfunction sdatThreshold(inp) {\n if (inp.renoValueAdd <= 0) return null;\n return (REASSESS_THRESHOLD * 100) / inp.renoValueAdd;\n}\n\nconst CONTOUR_STEPS = [250, 500, 1000, 2000, 2500, 5000];\nconst CONTOUR_SAMPLES = 8; // points per contour, per reassessment regime\n\nfunction frontier(inp) {\n const fund = inp.cashNow + inp.gift1 + inp.gift2;\n\n const points = [];\n const steps = 60;\n for (let i = 0; i <= steps; i++) {\n const price = PRICE_MIN + ((PRICE_MAX - PRICE_MIN) * i) / steps;\n points.push({ price, reno: Math.max(0, renoHeadroom(inp, price, fund)) });\n }\n\n const headroom = renoHeadroom(inp, inp.price, fund);\n\n // Plot box: the frontier itself, but always tall enough to show the dot and\n // the SDAT cliff so neither can sit silently off-screen.\n const threshold = sdatThreshold(inp);\n const yMax = Math.max(\n ...points.map((p) => p.reno),\n inp.renoCost,\n threshold ?? 0,\n ) * 1.08 || RENO_MAX;\n\n // Iso-PITI levels. Because the contours are near-vertical, what sets a\n // readable density is how much PITI moves across the *price* axis, not the\n // corner-to-corner range — aim for roughly half a dozen lines.\n const midReno = yMax / 2;\n const lo = piti60(inp, PRICE_MIN, midReno);\n const hi = piti60(inp, PRICE_MAX, midReno);\n const step = CONTOUR_STEPS.find((s) => (hi - lo) / s <= 7) ?? 10000;\n\n const levels = [];\n for (let L = Math.ceil(lo / step) * step; L <= hi; L += step) levels.push(L);\n\n // Contours step across the SDAT threshold, so each is drawn as a separate\n // polyline on either side of it — a single line through both would average\n // away the jog. Inside a regime the contour is very nearly straight, but not\n // exactly: the homestead cap binds over part of the range and bends it. So\n // sample each side rather than assuming a chord.\n const spans = [];\n if (threshold !== null && threshold > 0 && threshold < yMax) {\n spans.push([0, threshold - 1], [threshold, yMax]);\n } else {\n spans.push([0, yMax]);\n }\n\n const contours = levels\n .map((L) => {\n const segments = [];\n for (const [ya, yb] of spans) {\n let prev = null;\n for (let i = 0; i <= CONTOUR_SAMPLES; i++) {\n const y = ya + ((yb - ya) * i) / CONTOUR_SAMPLES;\n const x = priceAtPiti(inp, y, L);\n const pt = x === null ? null : { x, y };\n if (\n prev && pt &&\n !(Math.max(prev.x, pt.x) < PRICE_MIN ||\n Math.min(prev.x, pt.x) > PRICE_MAX)\n ) {\n segments.push({ from: prev, to: pt });\n }\n prev = pt;\n }\n }\n return segments.length ? { level: L, segments } : null;\n })\n .filter(Boolean);\n\n return {\n fund,\n points,\n contours,\n step,\n yMax,\n threshold,\n fixed: fixedUses(inp, inp.price),\n headroom,\n slack: headroom - inp.renoCost,\n ceiling: priceCeiling(inp, fund, inp.renoCost),\n // What another $10k of house costs the renovation: 20% down plus the\n // marginal transfer, recordation, and title on that slice.\n tradeoff: headroom - renoHeadroom(inp, inp.price + 10000, fund),\n piti: piti60(inp, inp.price, inp.renoCost),\n // Monthly cost of the same $10k, and of $10k of renovation instead. The\n // ratio is why sliding down the frontier never holds PITI flat.\n pitiPerPrice: piti60(inp, inp.price + 10000, inp.renoCost) -\n piti60(inp, inp.price, inp.renoCost),\n pitiPerReno: piti60(inp, inp.price, inp.renoCost + 10000) -\n piti60(inp, inp.price, inp.renoCost),\n };\n}\n\nconst REASSESS_THRESHOLD = 100000; // MD SDAT interim-assessment trigger\n\n// Maryland reassesses on a 3-year cycle with increases phased in over the\n// following 3 years, capped annually by the county homestead limit. Permits\n// for improvements adding >= $100k in value trigger an off-cycle pickup\n// instead of waiting for the regular cycle. This builds the *taxable*\n// assessed value per month, separate from true market value.\nfunction assessedValueSeries(inp, trueValueArr, moveIn) {\n const n = trueValueArr.length;\n const assessed = new Array(n).fill(inp.price);\n if (!inp.modelReassessment) {\n return trueValueArr.map(() => inp.price);\n }\n\n const renoAdded =\n (inp.renoCost * inp.renoValueAdd) / 100;\n const events = [{ month: Math.min(36, n - 1) }];\n if (renoAdded >= REASSESS_THRESHOLD) {\n const trigger = Math.min(n - 1, moveIn + Math.round(inp.reassessLagMonths));\n if (trigger > 0) events.push({ month: trigger });\n }\n events.sort((a, b) => a.month - b.month);\n\n const phaseIns = [];\n for (let m = 1; m < n; m++) {\n assessed[m] = assessed[m - 1];\n let inc = 0;\n for (const p of phaseIns) {\n if (m > p.start && m <= p.end) inc += p.perMonth;\n }\n let next = assessed[m] + inc;\n if (m >= 12) {\n const cap = assessed[m - 12] * (1 + inp.homesteadCapPct / 100);\n next = Math.min(next, cap);\n }\n assessed[m] = next;\n\n for (const e of events) {\n if (e.month === m) {\n const target = trueValueArr[m];\n const diff = target - assessed[m];\n if (diff > 0) {\n const dur = Math.min(36, n - 1 - m);\n if (dur > 0) phaseIns.push({ start: m, end: m + dur, perMonth: diff / dur });\n }\n }\n }\n }\n return assessed;\n}\n\nfunction simulate(inp) {\n const price = inp.price;\n const down = (price * inp.downPct) / 100;\n const loan = price - down;\n const mRate = inp.mortgageRate / 100 / 12;\n const mPmt = pmt(loan, inp.mortgageRate, inp.termYears);\n const cc = closingCosts(inp);\n\n const ins = insuranceProfile(inp);\n const insDuringReno = ins.duringRenoAnnual / 12;\n const insAfterReno = ins.afterRenoAnnual / 12;\n\n const renoStart = Math.max(0, Math.round(inp.renoStart));\n const renoMonths = Math.max(0, Math.round(inp.renoMonths));\n const draws = {};\n if (renoMonths <= 0) {\n draws[renoStart] = inp.renoCost;\n } else {\n for (let i = 0; i < renoMonths; i++) {\n draws[renoStart + i] = inp.renoCost / renoMonths;\n }\n }\n const moveIn = renoStart + renoMonths;\n\n const remainingReno = (m) =>\n Object.entries(draws)\n .filter(([k]) => Number(k) > m)\n .reduce((a, [, v]) => a + v, 0);\n\n const renoSpentArr = [];\n const trueValueArr = [];\n let spent = 0;\n for (let m = 0; m <= HORIZON; m++) {\n if (draws[m]) spent += draws[m];\n renoSpentArr.push(spent);\n trueValueArr.push(\n price * Math.pow(1 + inp.appreciation / 100, m / 12) +\n (spent * inp.renoValueAdd) / 100\n );\n }\n const assessedArr = assessedValueSeries(inp, trueValueArr, moveIn);\n const taxArr = assessedArr.map((a) =>\n Math.max(0, (a * inp.propTaxRate) / 100 - inp.itoc) / 12\n );\n const monthlyTax = taxArr[0];\n const insArr = trueValueArr.map((_, m) =>\n m < moveIn ? insDuringReno : insAfterReno\n );\n\n const order = inp.priority.split(\",\");\n\n let cash = inp.cashNow;\n let sbloc = 0;\n let mortBal = loan;\n let sblocInterest = 0;\n let peakSbloc = 0;\n let peakSblocMonth = 0;\n let sblocClearedMonth = null;\n let sblocEverDrawn = false;\n let limitBreach = false;\n let shortfall = 0;\n let minCash = Infinity;\n let minCashMonth = 0;\n let cashAtClose = null;\n let sblocAtClose = 0;\n\n const rows = [];\n\n for (let m = 0; m <= HORIZON; m++) {\n // `expense` is informational only (monthly PITI + double-carry rent) —\n // it's paid out of ordinary income, which this model doesn't track.\n // `cash` is the dedicated purchase fund and only moves for the lumpy\n // costs of getting to (and furnishing) the house.\n let expense = 0;\n if (m >= 1 && mortBal > 0) {\n const interest = mortBal * mRate;\n const principal = Math.min(mPmt - interest, mortBal);\n mortBal -= principal;\n expense += interest + principal;\n }\n expense += taxArr[m] + insArr[m];\n if (m < moveIn) expense += inp.rent;\n\n if (sbloc > 0) {\n const si = (sbloc * inp.sblocRate) / 100 / 12;\n sbloc += si;\n sblocInterest += si;\n }\n\n let lumpy = 0;\n if (m === 0) lumpy += down + cc.total;\n if (m === renoStart && inp.renoCost > 0) lumpy += ins.buildersRisk;\n if (draws[m]) lumpy += draws[m];\n if (m === moveIn && moveIn > 0) lumpy += inp.movingCost;\n if (m === 0 && moveIn === 0) lumpy += inp.movingCost;\n cash -= lumpy;\n\n let gift = 0;\n if (m === Math.round(inp.gift1Month)) gift += inp.gift1;\n if (m === Math.round(inp.gift2Month)) gift += inp.gift2;\n cash += gift;\n\n if (cash < inp.cashFloor) {\n const need = inp.cashFloor - cash;\n const avail = Math.max(0, inp.sblocLimit - sbloc);\n const draw = Math.min(need, avail);\n if (draw > 0) {\n sbloc += draw;\n cash += draw;\n sblocEverDrawn = true;\n }\n if (draw < need - 0.5) limitBreach = true;\n }\n if (cash < 0) {\n shortfall = Math.max(shortfall, -cash);\n }\n\n const doSweep = inp.sweepMonthly || gift > 0;\n if (doSweep) {\n let renoProtected = false;\n for (const step of order) {\n if (step === \"reno\") {\n renoProtected = true;\n continue;\n }\n const reserve = renoProtected ? remainingReno(m) : 0;\n let avail = cash - inp.cashFloor - reserve;\n if (avail < 1000) continue;\n if (step === \"sbloc\" && sbloc > 0) {\n const p = Math.min(avail, sbloc);\n sbloc -= p;\n cash -= p;\n avail -= p;\n }\n }\n }\n\n if (sbloc > peakSbloc) {\n peakSbloc = sbloc;\n peakSblocMonth = m;\n }\n if (sblocEverDrawn && sbloc < 1 && sblocClearedMonth === null) {\n sblocClearedMonth = m;\n }\n if (cash < minCash) {\n minCash = cash;\n minCashMonth = m;\n }\n if (m === 0) {\n cashAtClose = cash;\n sblocAtClose = sbloc;\n }\n\n const value = trueValueArr[m];\n\n rows.push({\n month: m,\n cash: Math.round(cash),\n sbloc: Math.round(sbloc),\n mortBal: Math.round(mortBal),\n equity: Math.round(value - mortBal),\n netEquity: Math.round(value - mortBal - sbloc),\n value: Math.round(value),\n expense: Math.round(expense),\n lumpy: Math.round(lumpy),\n tax: Math.round(taxArr[m]),\n ins: Math.round(insArr[m]),\n assessed: Math.round(assessedArr[m]),\n });\n }\n\n const taxAtMoveIn = taxArr[Math.min(moveIn, HORIZON)];\n const taxAtEnd = taxArr[HORIZON];\n\n const pitiInitial = mPmt + monthlyTax + insDuringReno;\n const pitiAtMoveIn = mPmt + taxAtMoveIn + insAfterReno;\n const pitiAtEnd = mPmt + taxAtEnd + insAfterReno;\n const duringReno = pitiInitial + inp.rent;\n\n const moveInRow = rows[Math.min(moveIn, HORIZON)];\n const buildersRisk = inp.renoCost > 0 ? ins.buildersRisk : 0;\n const totalThroughMoveIn =\n down + cc.total + inp.renoCost + inp.movingCost + buildersRisk;\n\n return {\n cc,\n down,\n loan,\n mPmt,\n monthlyTax,\n taxAtMoveIn,\n taxAtEnd,\n insDuringReno,\n insAfterReno,\n buildersRisk,\n replacementBefore: ins.replacementBefore,\n replacementAfter: ins.replacementAfter,\n moveIn,\n rows,\n cashAtClose,\n sblocAtClose,\n cashAtMoveIn: moveInRow.cash,\n sblocAtMoveIn: moveInRow.sbloc,\n totalThroughMoveIn,\n peakSbloc,\n peakSblocMonth,\n sblocClearedMonth,\n sblocInterest,\n limitBreach,\n shortfall,\n minCash,\n minCashMonth,\n pitiInitial,\n pitiAtMoveIn,\n pitiAtEnd,\n duringReno,\n cashDeployedAtClose: down + cc.total,\n };\n}\n\nfunction eventMarkers(inp, r) {\n const markers = [];\n const push = (month, label, ok) => {\n if (!ok) return;\n const m = Math.max(0, Math.min(HORIZON, Math.round(month)));\n markers.push({ month: m, label });\n };\n\n push(0, \"Closing\", true);\n push(r.moveIn, \"Move in\", r.moveIn > 0);\n push(inp.gift1Month, \"Gift 1\", inp.gift1 > 0);\n push(inp.gift2Month, \"Gift 2\", inp.gift2 > 0);\n push(r.peakSblocMonth, \"SBLOC peak\", r.peakSbloc > 0);\n push(r.sblocClearedMonth, \"SBLOC cleared\", r.sblocClearedMonth != null);\n push(36, \"Reassessment\", inp.modelReassessment);\n\n const renoAdded = (inp.renoCost * inp.renoValueAdd) / 100;\n if (inp.modelReassessment && renoAdded >= 100000) {\n push(r.moveIn + inp.reassessLagMonths, \"Reno reassessment\", true);\n }\n\n return markers.sort((a, b) => a.month - b.month);\n}\n\nfunction chartTooltip(eventsByMonth) {\n return ({ active, payload, label }) => {\n if (!active || !payload?.length) return null;\n const events = eventsByMonth[label] || [];\n return (\n

Month {label}

\n {events.length > 0 && (\n

\n {events.join(\" • \")}\n

\n )}\n {payload.map((p, i) => (\n

\n \n {p.name}:\n {money(p.value)}\n

\n ))}\n

\n );\n };\n}\n\nfunction frontierTooltip({ active, payload, label }) {\n if (!active || !payload?.length) return null;\n return (\n

{money(label)} house

\n {payload.map((p, i) => (\n

\n \n {p.name}:\n {money(p.value)}\n

\n ))}\n

\n );\n}\n\nconst money = (n) =>\n (n < 0 ? \"-\" : \"\") + \"$\" + Math.round(Math.abs(n)).toLocaleString();\nconst pct = (n) => n.toFixed(1) + \"%\";\n\n\nfunction Row({ label, value, sub, warn }) {\n return (\n

\n {label}\n \n {value}\n {sub && {sub}}\n \n

\n );\n}\n\nfunction Num({ label, value, onChange, step = 1, suffix }) {\n return (\n \n {label}\n \n \n onChange(e.target.value === \"\" ? 0 : Number(e.target.value))\n }\n className=\"w-28 rounded border border-slate-300 px-2 py-1 text-right text-xs font-mono tabular-nums focus:border-slate-900 focus:outline-none\"\n />\n {suffix && {suffix}}\n \n \n );\n}\n\nfunction Slide({ label, value, onChange, min, max, step, format }) {\n return (\n

\n {label}\n \n {format ? format(value) : value}\n \n

\n onChange(Number(e.target.value))}\n className=\"mt-1 w-full accent-slate-900\"\n />\n

\n );\n}\n\nfunction Section({ title, children, open = true }) {\n const [show, setShow] = useState(open);\n return (\n

\n setShow(!show)}\n className=\"flex w-full items-center justify-between px-3 py-2 text-left\"\n >\n \n {title}\n \n {show ? \"−\" : \"+\"}\n \n {show &&

{children}

}\n

\n );\n}\n\nfunction Stat({ label, value, warn }) {\n return (\n

{label}

\n \n {value}\n

\n \n );\n}\n\nfunction Zone({ label }) {\n return (\n

\n {label}\n

\n );\n}\n\nconst axisLabel = { fontSize: 11, fill: \"#64748b\" };\n\nfunction Frontier({ inp }) {\n const f = useMemo(() => frontier(inp), [inp]);\n\n const within = inp.renoCost <= f.headroom;\n\n return (\n

\n Price vs. renovation budget\n

\n \n \n \n `${(v / 1e6).toFixed(1)}M`}\n tick={{ fontSize: 11 }}\n label={{\n value: \"Purchase price\",\n position: \"insideBottom\",\n offset: -14,\n style: axisLabel,\n }}\n />\n `${Math.round(v / 1000)}k`}\n width={56}\n domain={[0, f.yMax]}\n allowDataOverflow\n label={{\n value: \"Renovation budget\",\n angle: -90,\n position: \"insideLeft\",\n offset: 14,\n style: { ...axisLabel, textAnchor: \"middle\" },\n }}\n />\n \n \n {/* Above the fill so the field reads through it, below the dot.\n Each contour is one segment per reassessment regime; only the\n topmost carries the label. */}\n {f.contours.flatMap((c) =>\n c.segments.map((s, si) => (\n \n ))\n )}\n {f.threshold != null && (\n \n )}\n \n \n \n \n

\n\n

\n \n \n \n \n \n \n \n

\n\n

\n Every $10,000 more house costs {money(f.tradeoff)} of renovation — 20%\n down plus the transfer, recordation, and title on that slice. The dot is\n where you are;{\" \"}\n {within ? \"it sits under the curve.\" : \"it is past the curve.\"}\n

\n Grey lines are equal month-60 PITI, {money(f.step)}/mo apart. They run\n far steeper than the frontier — {money(f.pitiPerPrice)}/mo for $10k of\n price against {money(f.pitiPerReno)}/mo for $10k of renovation, a{\" \"}\n {(f.pitiPerReno > 0 ? f.pitiPerPrice / f.pitiPerReno : 0).toFixed(1)}×\n gap, because renovation isn't mortgaged and is assessed at{\" \"}\n {inp.renoValueAdd}% of cost. So no move along the frontier holds monthly\n cost flat: trading price for renovation always lowers it.\n

\n {f.threshold != null && (\n

\n The dashed line at {money(f.threshold)} of renovation is where the\n added value crosses $100k and SDAT picks it up off-cycle instead of at\n the 3-year mark. Crossing it costs about{\" \"}\n {money(\n piti60(inp, inp.price, f.threshold + 500) -\n piti60(inp, inp.price, f.threshold - 500),\n )}\n /mo at month 60 — though that gap is mostly phase-in timing under the\n homestead cap, and narrows if you hold past five years.\n

\n )}\n

\n Timing is collapsed out: gifts count no matter when they land, and the\n cash floor ({money(inp.cashFloor)}) is held back. The SBLOC isn't budget\n here — it's a bridge, repaid from this same fund, so it changes when you\n can spend rather than how much. Borrowing shows up in the trajectory\n chart above.\n

\n );\n}\n\nexport default function HouseModel({ initial, onChange, onClear }) {\n const [inp, setInp] = useState(() => ({ ...BLANK, ...initial }));\n const [scenarios, setScenarios] = useState([]);\n const [showTable, setShowTable] = useState(false);\n const [showClosingDetail, setShowClosingDetail] = useState(false);\n const [copied, setCopied] = useState(false);\n\n const set = (k) => (v) => setInp((p) => ({ ...p, [k]: v }));\n\n useEffect(() => {\n onChange?.(inp);\n }, [inp, onChange]);\n const r = useMemo(() => simulate(inp), [inp]);\n\n const copyValues = async () => {\n try {\n await navigator.clipboard.writeText(JSON.stringify(inp, null, 2));\n setCopied(true);\n setTimeout(() => setCopied(false), 1500);\n } catch {\n // clipboard blocked (insecure origin, denied permission) — no-op\n }\n };\n\n const saveScenario = () => {\n setScenarios((s) => [\n ...s,\n {\n id: Date.now(),\n price: inp.price,\n reno: inp.renoCost,\n months: inp.renoMonths,\n cashAtClose: r.cashAtClose,\n peakSbloc: r.peakSbloc,\n sblocInterest: r.sblocInterest,\n cleared: r.sblocClearedMonth,\n piti: r.duringReno,\n equity36: r.rows[36].netEquity,\n ok: !r.limitBreach && r.shortfall < 1,\n },\n ]);\n };\n\n const chartEnd = Math.min(HORIZON, r.moveIn + 1);\n const chartData = [\n { month: -1, Cash: inp.cashNow, SBLOC: 0, \"Net equity\": 0 },\n ...r.rows\n .filter((x) => x.month <= chartEnd)\n .map((x) => ({\n month: x.month,\n Cash: x.cash,\n SBLOC: x.sbloc,\n \"Net equity\": x.netEquity,\n })),\n ];\n\n const markers = eventMarkers(inp, r);\n const markerMonths = [...new Set(markers.map((m) => m.month))]\n .filter((m) => m <= chartEnd)\n .sort((a, b) => a - b);\n const eventsByMonth = Object.fromEntries(\n markerMonths.map((month) => [\n month,\n markers.filter((m) => m.month === month).map((m) => m.label),\n ])\n );\n\n const infeasible = r.limitBreach || r.shortfall > 1;\n\n return (\n

Takoma Park purchase model

\n Month 0 = closing. All figures nominal. Defaults are estimates — verify\n taxes and fees with your settlement agent.{\" \"}\n \n view source\n \n

\n\n {infeasible && (\n

\n Not fundable as configured.\n {r.limitBreach && \" SBLOC limit is exhausted.\"}\n {r.shortfall > 1 && ` Cash goes negative by ${money(r.shortfall)}.`}\n

\n )}\n\n

\n \n \n \n \n \n \n \n

\n\n

\n {/* ---------------- INPUTS ---------------- */}\n

\n \n \n `${v} mo`}\n />\n `month ${v}`}\n />\n

\n Down payment locked at 20% = {money(r.down)}. Move-in month{\" \"}\n {r.moveIn}; DC rent runs through month {Math.max(0, r.moveIn - 1)}.\n

\n \n \n

\n\n

\n \n \n \n \n \n \n \n

\n Insurance through the reno\n

\n \n \n \n

\n Replacement cost {money(r.replacementBefore)} → {money(r.replacementAfter)}\n , so the premium steps to {money(r.insAfterReno)}/mo after\n move-in. Builder's risk is {money(r.buildersRisk)} once, at\n month {Math.max(0, Math.round(inp.renoStart))}.\n

\n \n set(\"modelReassessment\")(e.target.checked)}\n />\n Model post-purchase reassessment\n \n {inp.modelReassessment && (\n <>\n \n \n

\n Reno adds {money((inp.renoCost * inp.renoValueAdd) / 100)} in value\n {(inp.renoCost * inp.renoValueAdd) / 100 >= 100000\n ? \" — triggers an off-cycle SDAT pickup (≥$100k).\"\n : \" — under the $100k interim-assessment threshold; picked up at the normal 3-year cycle instead.\"}\n

\n \n )}\n

\n\n

\n \n \n \n \n \n set(\"firstTime\")(e.target.checked)} />\n First-time MD buyer (seller pays state transfer tax)\n \n \n set(\"ownerOccupied\")(e.target.checked)} />\n Owner-occupied affidavit ($50k county exemption, $890 credit)\n \n

\n\n

\n \n \n \n \n \n \n \n \n

\n\n

\n \n When money frees up\n set(\"priority\")(e.target.value)}\n className=\"mt-1 w-full rounded border border-slate-300 px-2 py-1 text-xs\"\n >\n {PRIORITY_OPTIONS.map((o) => (\n \n ))}\n \n \n \n set(\"sweepMonthly\")(e.target.checked)}\n />\n Sweep monthly surplus, not just gifts\n \n

\n\n

\n Your values\n

\n Saved in this browser only. Copy them out before switching\n machines or clearing site data.\n

\n \n {copied ? \"Copied\" : \"Copy values as JSON\"}\n \n setInp((p) => ({ ...p, ...MODEL_PARAMS }))}\n className=\"w-full rounded border border-slate-300 px-3 py-2 text-xs text-slate-600 hover:bg-slate-100\"\n >\n Reset rates and fees\n \n {\n if (confirm(\"Erase your saved figures from this browser?\")) {\n onClear?.();\n }\n }}\n className=\"w-full rounded border border-slate-300 px-3 py-2 text-xs text-red-600 hover:bg-red-50\"\n >\n Erase and start over\n \n

\n\n {/* ---------------- OUTPUTS ---------------- */}\n

\n \n

\n At closing\n

\n \n \n \n \n \n \n

\n\n

\n At move-in\n

\n \n {r.buildersRisk > 0 && (\n \n )}\n \n \n \n \n

\n\n

\n Bridge exposure\n

\n \n \n \n = 1 && r.sblocClearedMonth === null}\n />\n \n

\n\n \n

\n During reno (double carry)\n

\n \n \n 0 ? `${inp.insuranceVacancyMult}×` : null}\n />\n \n \n {r.buildersRisk > 0 && (\n

\n Plus {money(r.buildersRisk)} of builder's risk, paid once at\n month {Math.max(0, Math.round(inp.renoStart))} — it comes out\n of the purchase fund, not monthly income.\n

\n )}\n

\n\n

\n After move-in\n

\n \n \n r.insDuringReno\n ? `+${money(r.insAfterReno - r.insDuringReno)}`\n : null\n }\n />\n \n

\n r.taxAtMoveIn * 1.15} />\n \n {inp.modelReassessment && r.taxAtEnd > r.taxAtMoveIn + 1 && (\n

\n Reassessment adds {money(r.taxAtEnd - r.taxAtMoveIn)}/mo by month\n 60 as the renovation's added value and ordinary appreciation\n get picked up by SDAT.\n

\n )}\n

\n\n \n

\n \n Saved scenarios\n \n \n Save current\n \n

\n {scenarios.length === 0 ? (\n

\n Nothing saved yet. Set a combination, then save it to compare.\n

\n ) : (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {scenarios.map((s) => (\n \n \n \n \n \n \n \n \n \n \n \n \n ))}\n \n

Price	Reno	Mo	Cash left	Peak SBLOC	SBLOC int.	Clear	Peak mo.	Eq. mo36
{money(s.price)}	{money(s.reno)}	{s.months}	{money(s.cashAtClose)}	\n {money(s.peakSbloc)}\n	{money(s.sblocInterest)}	\n {s.peakSbloc < 1 ? \"—\" : s.cleared === null ? \">60\" : s.cleared}\n	{money(s.piti)}	{money(s.equity36)}	\n \n setScenarios((x) => x.filter((y) => y.id !== s.id))\n }\n className=\"text-slate-400 hover:text-red-600\"\n >\n ×\n \n

\n )}\n

\n\n \n

\n setShowClosingDetail(!showClosingDetail)}\n className=\"text-xs font-semibold uppercase tracking-wide text-slate-500\"\n >\n {showClosingDetail ? \"Hide\" : \"Show\"} closing cost breakdown\n \n {showClosingDetail && (\n

\n \n \n \n \n \n \n \n

\n = {pct((r.cc.total / inp.price) * 100)} of price\n

\n )}\n

\n\n

\n setShowTable(!showTable)}\n className=\"text-xs font-semibold uppercase tracking-wide text-slate-500\"\n >\n {showTable ? \"Hide\" : \"Show\"} month-by-month detail\n \n {showTable && (\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n {r.rows.map((x) => (\n \n \n \n \n \n \n \n \n \n ))}\n \n

Mo	Outflow	Lump	Cash	SBLOC	Mortgage	Net equity
{x.month}	{money(x.expense)}	{x.lumpy ? money(x.lumpy) : \"—\"}	\n {money(x.cash)}\n	0 ? \"text-red-600\" : \"text-slate-300\")}>\n {x.sbloc ? money(x.sbloc) : \"—\"}\n	{money(x.mortBal)}	{money(x.netEquity)}

\n )}\n

\n\n {/* ---------------- VISUALIZATION ---------------- */}\n

\n \n

\n Cash, SBLOC, and equity, starting balances through month {chartEnd} (move-in + 1)\n

\n \n \n \n \n `${Math.round(v / 1000)}k`}\n width={48}\n />\n \n \n {markerMonths.map((month) => (\n \n ))}\n \n \n \n \n \n

\n\n \n \n\n

\n Equity\n

\n {[12, 36, 60].map((m) => (\n \n ))}\n

\n Net equity = home value − mortgage − SBLOC. Excludes brokerage.\n

\n );\n}\n",[],[195,316],"9df74c3e-2202-4644-b2ec-6f68c8870c70","model.js","178b8c54-a3f9-11f1-bcce-1607ee4eb77e",60,["D",1788042566227],"// The model itself: closing costs, the Maryland assessment machinery, the\n// month-by-month cash simulation, and the price/renovation frontier.\n//\n// No React and no DOM in here — `model.jsx` owns the UI, and `model_test.js`\n// exercises this file directly.\n\nexport const HORIZON = 60;\n\n// Slider bounds, shared with the price/renovation frontier chart so the two\n// always describe the same window.\nexport const PRICE_MIN = 600000;\nexport const PRICE_MAX = 1600000;\nexport const RENO_MAX = 500000;\n\nexport const REASSESS_THRESHOLD = 100000; // MD SDAT interim-assessment trigger\nconst PHASE_IN_MONTHS = 36; // MD phases an increase in over three years\nconst TRIENNIAL_MONTH = 36; // next regular cycle, assumed three years out\n\nexport const PRIORITY_OPTIONS = [\n { value: \"reno,sbloc\", label: \"Finish renovation first, then repay SBLOC\" },\n { value: \"sbloc,reno\", label: \"Repay SBLOC first, then finish renovation\" },\n];\n\n// ---------------------------------------------------------------------------\n// Montgomery County transfer taxes and financing math\n\nexport function recordationTax(price) {\n const tiers = [\n [500000, 4.45],\n [600000, 6.75],\n [750000, 10.2],\n [1000000, 10.78],\n [Infinity, 11.35],\n ];\n let prev = 0;\n let tax = 0;\n for (const [cap, rate] of tiers) {\n if (price <= prev) break;\n const portion = Math.min(price, cap) - prev;\n tax += (portion / 500) * rate;\n prev = cap;\n }\n return tax;\n}\n\nexport function pmt(principal, annualPct, years) {\n const r = annualPct / 100 / 12;\n const n = years * 12;\n if (n <= 0) return 0;\n if (r === 0) return principal / n;\n return (principal * r) / (1 - Math.pow(1 + r, -n));\n}\n\n// Closed-form remaining balance after `months` payments. `simulate` amortizes\n// month by month because it needs the interest/principal split; the frontier\n// only ever wants one balance, and calling this beats running the loop.\nexport function mortgageBalance(principal, annualPct, years, months) {\n if (months <= 0) return principal;\n const r = annualPct / 100 / 12;\n const payment = pmt(principal, annualPct, years);\n if (r === 0) return Math.max(0, principal - payment * months);\n const growth = Math.pow(1 + r, months);\n return Math.max(0, principal * growth - (payment * (growth - 1)) / r);\n}\n\n// PMI is quoted as a percentage of the *original* loan and falls away when the\n// balance reaches 80% of the original price — the automatic-termination point.\nexport function pmiMonthly(inp, loan, balance) {\n if (balance <= inp.price * 0.8 + 0.5) return 0;\n return (loan * Math.max(0, inp.pmiAnnualPct)) / 100 / 12;\n}\n\n// ---------------------------------------------------------------------------\n// Renovation schedule and what the house is worth\n\nexport function moveInMonth(inp) {\n return (\n Math.max(0, Math.round(inp.renoStart)) +\n Math.max(0, Math.round(inp.renoMonths))\n );\n}\n\n// One schedule, built once and shared. `simulate` and `piti60` used to derive\n// this separately and had to be kept in step by hand.\nexport function renovationSchedule(inp) {\n const start = Math.max(0, Math.round(inp.renoStart));\n const months = Math.max(0, Math.round(inp.renoMonths));\n const draws = new Map();\n if (months <= 0) {\n if (inp.renoCost > 0) draws.set(start, inp.renoCost);\n } else {\n for (let i = 0; i < months; i++) {\n draws.set(start + i, inp.renoCost / months);\n }\n }\n return { start, months, moveIn: start + months, draws };\n}\n\n// Market value: the price compounding at `appreciation`, plus the renovation's\n// value-add compounding from the month each draw is spent. Holding the add flat\n// while the base appreciates would quietly shrink it in real terms.\nexport function trueValueSeries(inp, sched = renovationSchedule(inp)) {\n const annualGrowth = Math.max(0, 1 + inp.appreciation / 100);\n const monthlyGrowth = Math.pow(annualGrowth, 1 / 12);\n const values = [];\n const spentByMonth = [];\n let spent = 0;\n let added = 0;\n for (let m = 0; m <= HORIZON; m++) {\n added *= monthlyGrowth;\n const draw = sched.draws.get(m) ?? 0;\n spent += draw;\n added += (draw * inp.renoValueAdd) / 100;\n spentByMonth.push(spent);\n values.push(inp.price * Math.pow(annualGrowth, m / 12) + added);\n }\n return { values, spentByMonth };\n}\n\n// ---------------------------------------------------------------------------\n// Three distinct insurance costs, not one.\n//\n// 1. While the house sits empty between closing and move-in, a standard HO-3\n// won't carry it — the vacancy clause suspends vandalism, theft, and water\n// coverage somewhere around day 60, and the lender requires continuous\n// coverage regardless. That's a vacancy endorsement or a vacant-dwelling\n// policy, priced above the standard premium. Vacancy starts at *closing*,\n// not at `renoStart` — the trigger is the empty house, not the work.\n// 2. Builder's risk covers the structure and materials during construction.\n// The GC's liability and comp policies don't touch the building, and the\n// AIA forms leave property insurance with the owner, so this is ours. It's\n// a single premium for the project term, quoted off construction cost, so\n// it lands in `lumpy` at `renoStart` like any other purchase-fund outlay.\n// 3. After move-in the premium steps up permanently, because dwelling coverage\n// prices off replacement cost and renovation dollars go into the structure\n// roughly 1:1. Land isn't insured, hence `replacementCostPct` of price as\n// the pre-reno base rather than price itself.\n//\n// Everything scales off one rate per dollar of replacement cost, backed out of\n// the quote in `insuranceAnnual` at the house it was quoted for. That is what\n// makes a pricier house cost more to insure, which the frontier's price axis\n// depends on.\n//\n// Not modeled: construction-cost inflation on replacement value over the\n// horizon, which would drift the post-reno premium up a few percent a year.\nexport function insuranceProfile(inp) {\n const structurePct = Math.max(0, inp.replacementCostPct) / 100;\n const replacementBefore = Math.max(0, inp.price) * structurePct;\n const replacementAfter = replacementBefore + Math.max(0, inp.renoCost);\n\n const anchorPrice = inp.insuranceBasePrice > 0\n ? inp.insuranceBasePrice\n : inp.price;\n const replacementAnchor = Math.max(0, anchorPrice) * structurePct;\n\n // With no structure to price off — a blank form, or a zeroed-out structure\n // percentage — fall back to treating the quote as a flat premium.\n const perDollar = replacementAnchor > 0\n ? inp.insuranceAnnual / replacementAnchor\n : 0;\n const beforeAnnual = replacementAnchor > 0\n ? perDollar * replacementBefore\n : inp.insuranceAnnual;\n const afterRenoAnnual = replacementAnchor > 0\n ? perDollar * replacementAfter\n : inp.insuranceAnnual;\n\n const vacantPeriod = moveInMonth(inp) > 0;\n\n return {\n replacementBefore,\n replacementAfter,\n beforeAnnual,\n duringRenoAnnual: beforeAnnual *\n (vacantPeriod ? inp.insuranceVacancyMult : 1),\n afterRenoAnnual,\n buildersRisk: (Math.max(0, inp.renoCost) * inp.buildersRiskPct) / 100,\n };\n}\n\n// ---------------------------------------------------------------------------\n// Property tax\n\n// The Income Tax Offset Credit is an owner-occupancy credit, so it follows the\n// affidavit rather than applying unconditionally.\nexport function annualPropertyTax(assessed, inp) {\n const credit = inp.ownerOccupied ? inp.itoc : 0;\n return Math.max(0, (assessed * inp.propTaxRate) / 100 - credit);\n}\n\n// Maryland does not reassess on sale. The SDAT value in force at closing is\n// whatever the last cycle set, which normally trails the purchase price.\nexport function assessedAtClose(inp) {\n return inp.price * (Math.max(0, inp.assessmentRatioPct) / 100);\n}\n\n// Maryland reassesses on a 3-year cycle with increases phased in over the\n// following 3 years, capped annually by the county homestead limit. Permits\n// for improvements adding >= $100k in value trigger an off-cycle pickup\n// instead of waiting for the regular cycle.\n//\n// Two series come out of that, and conflating them is what makes this subtle:\n//\n// - `full` is SDAT's phase-in value. Each reassessment *re-targets* the ramp\n// toward market value, replacing whatever ramp was still running. A new\n// assessment supersedes the old one; it does not stack on top of it, which\n// would drive the assessment above what the house is actually worth.\n// - `taxable` is what the homestead credit lets the county bill. It trails\n// `full` by at most the cap each year and then keeps climbing until it\n// catches up, because the credit *defers* an increase rather than forgiving\n// it.\nexport function assessedValueSeries(inp, trueValues, moveIn) {\n const n = trueValues.length;\n const base = assessedAtClose(inp);\n if (!inp.modelReassessment) return new Array(n).fill(base);\n\n const renoAdded = (inp.renoCost * inp.renoValueAdd) / 100;\n // A Set, because the renovation pickup can land on the triennial month; two\n // events in one month would otherwise each re-target off the same untouched\n // value and apply the increase twice.\n const events = new Set([Math.min(TRIENNIAL_MONTH, n - 1)]);\n if (renoAdded >= REASSESS_THRESHOLD) {\n const trigger = Math.min(n - 1, moveIn + Math.round(inp.reassessLagMonths));\n if (trigger > 0) events.add(trigger);\n }\n\n const full = new Array(n).fill(base);\n const taxable = new Array(n).fill(base);\n let ramp = null;\n\n for (let m = 1; m < n; m++) {\n full[m] = full[m - 1] + (ramp && m <= ramp.end ? ramp.perMonth : 0);\n\n if (events.has(m)) {\n const diff = trueValues[m] - full[m];\n // The phase-in is three years whatever the horizon is. Squeezing it into\n // the months that happen to be left would make it finish early.\n ramp = diff > 0\n ? { perMonth: diff / PHASE_IN_MONTHS, end: m + PHASE_IN_MONTHS }\n : null;\n }\n\n // The homestead cap doesn't bind until the property has been owned and\n // occupied a full taxable year, so the first twelve months ride the full\n // assessment.\n const cap = m >= 12\n ? taxable[m - 12] * (1 + Math.max(0, inp.homesteadCapPct) / 100)\n : Infinity;\n taxable[m] = Math.max(taxable[m - 1], Math.min(full[m], cap));\n }\n return taxable;\n}\n\n// ---------------------------------------------------------------------------\n// Closing\n\nexport function closingCosts(inp) {\n const price = inp.price;\n const loan = price * (1 - Math.max(0, inp.downPct) / 100);\n const share = inp.buyerSharePct / 100;\n\n const recGross = recordationTax(price);\n const recNet = Math.max(0, recGross - (inp.ownerOccupied ? 890 : 0));\n const recordation = recNet * share;\n\n const countyBase = inp.ownerOccupied ? Math.max(0, price - 50000) : price;\n const countyTransfer = countyBase * 0.01 * share;\n\n const stateTransfer = inp.firstTime ? 0 : price * 0.005 * share;\n\n const title = (price * inp.titlePct) / 100;\n const fixed = inp.fixedFees;\n\n // The lender escrows against the bill the county will actually send, which\n // is struck on the assessment in force, not on what you paid.\n const annualTax = annualPropertyTax(assessedAtClose(inp), inp);\n // The prepaid year of hazard insurance is bought at the rate in force on\n // closing day, which is the vacancy rate if the house sits empty first.\n const escrow = annualTax * (inp.escrowMonths / 12) +\n insuranceProfile(inp).duringRenoAnnual;\n const perDiem = ((loan * (inp.mortgageRate / 100)) / 365) * 15;\n const prepaids = escrow + perDiem;\n\n const total = recordation + countyTransfer + stateTransfer + title + fixed +\n prepaids;\n\n return {\n recordation,\n countyTransfer,\n stateTransfer,\n title,\n fixed,\n prepaids,\n total,\n };\n}\n\n// ---------------------------------------------------------------------------\n// The month-by-month simulation\n\nexport function simulate(inp) {\n const price = inp.price;\n const down = (price * Math.max(0, inp.downPct)) / 100;\n const loan = price - down;\n const mRate = inp.mortgageRate / 100 / 12;\n const mPmt = pmt(loan, inp.mortgageRate, inp.termYears);\n const cc = closingCosts(inp);\n\n const ins = insuranceProfile(inp);\n const insDuringReno = ins.duringRenoAnnual / 12;\n const insAfterReno = ins.afterRenoAnnual / 12;\n\n const sched = renovationSchedule(inp);\n const { start: renoStart, moveIn, draws } = sched;\n const { values: trueValueArr } = trueValueSeries(inp, sched);\n\n const remainingReno = (m) => {\n let sum = 0;\n for (const [month, amount] of draws) if (month > m) sum += amount;\n return sum;\n };\n\n const assessedArr = assessedValueSeries(inp, trueValueArr, moveIn);\n const taxArr = assessedArr.map((a) => annualPropertyTax(a, inp) / 12);\n const monthlyTax = taxArr[0];\n const insArr = trueValueArr.map((_, m) =>\n m < moveIn ? insDuringReno : insAfterReno\n );\n\n // Gifts land on a named month. One scheduled outside the horizon would\n // otherwise just fail to arrive, with the money silently absent from every\n // figure on the page.\n const giftSchedule = [\n { label: \"Gift 1\", month: Math.round(inp.gift1Month), amount: inp.gift1 },\n { label: \"Gift 2\", month: Math.round(inp.gift2Month), amount: inp.gift2 },\n ].filter((g) => g.amount > 0);\n const strandedGifts = giftSchedule.filter(\n (g) => g.month < 0 || g.month > HORIZON,\n );\n\n // \"reno,sbloc\" holds the unspent renovation draws back before repaying the\n // line; \"sbloc,reno\" repays first and lets the line refill the renovation.\n const order = inp.priority.split(\",\");\n const protectReno = order.indexOf(\"reno\") >= 0 &&\n (order.indexOf(\"sbloc\") < 0 ||\n order.indexOf(\"reno\") < order.indexOf(\"sbloc\"));\n\n let cash = inp.cashNow;\n let sbloc = 0;\n let mortBal = loan;\n let sblocInterest = 0;\n let peakSbloc = 0;\n let peakSblocMonth = 0;\n let sblocClearedMonth = null;\n let sblocEverDrawn = false;\n let limitBreach = false;\n let shortfall = 0;\n let minCash = Infinity;\n let minCashMonth = 0;\n let cashAtClose = null;\n let sblocAtClose = 0;\n\n const rows = [];\n\n for (let m = 0; m <= HORIZON; m++) {\n // `expense` is informational only (monthly PITI + double-carry rent) —\n // it's paid out of ordinary income, which this model doesn't track.\n // `cash` is the dedicated purchase fund and only moves for the lumpy\n // costs of getting to (and furnishing) the house.\n let expense = 0;\n if (m >= 1 && mortBal > 0) {\n const interest = mortBal * mRate;\n const principal = Math.min(mPmt - interest, mortBal);\n mortBal -= principal;\n expense += interest + principal;\n }\n const pmi = pmiMonthly(inp, loan, mortBal);\n expense += taxArr[m] + insArr[m] + pmi;\n if (m < moveIn) expense += inp.rent;\n\n if (sbloc > 0) {\n const si = (sbloc * inp.sblocRate) / 100 / 12;\n sbloc += si;\n sblocInterest += si;\n }\n\n let lumpy = 0;\n if (m === 0) lumpy += down + cc.total;\n if (m === renoStart && inp.renoCost > 0) lumpy += ins.buildersRisk;\n if (draws.has(m)) lumpy += draws.get(m);\n if (m === moveIn && moveIn > 0) lumpy += inp.movingCost;\n if (m === 0 && moveIn === 0) lumpy += inp.movingCost;\n cash -= lumpy;\n\n let gift = 0;\n for (const g of giftSchedule) if (g.month === m) gift += g.amount;\n cash += gift;\n\n if (cash < inp.cashFloor) {\n const need = inp.cashFloor - cash;\n const avail = Math.max(0, inp.sblocLimit - sbloc);\n const draw = Math.min(need, avail);\n if (draw > 0) {\n sbloc += draw;\n cash += draw;\n sblocEverDrawn = true;\n }\n if (draw < need - 0.5) limitBreach = true;\n }\n if (cash < 0) {\n shortfall = Math.max(shortfall, -cash);\n }\n\n if ((inp.sweepMonthly || gift > 0) && sbloc > 0) {\n const reserve = protectReno ? remainingReno(m) : 0;\n const avail = cash - inp.cashFloor - reserve;\n if (avail >= 1000) {\n const repay = Math.min(avail, sbloc);\n sbloc -= repay;\n cash -= repay;\n }\n }\n\n if (sbloc > peakSbloc) {\n peakSbloc = sbloc;\n peakSblocMonth = m;\n }\n if (sblocEverDrawn && sbloc < 1 && sblocClearedMonth === null) {\n sblocClearedMonth = m;\n }\n if (cash < minCash) {\n minCash = cash;\n minCashMonth = m;\n }\n if (m === 0) {\n cashAtClose = cash;\n sblocAtClose = sbloc;\n }\n\n const value = trueValueArr[m];\n\n rows.push({\n month: m,\n cash: Math.round(cash),\n sbloc: Math.round(sbloc),\n mortBal: Math.round(mortBal),\n equity: Math.round(value - mortBal),\n netEquity: Math.round(value - mortBal - sbloc),\n value: Math.round(value),\n expense: Math.round(expense),\n lumpy: Math.round(lumpy),\n tax: Math.round(taxArr[m]),\n ins: Math.round(insArr[m]),\n pmi: Math.round(pmi),\n assessed: Math.round(assessedArr[m]),\n });\n }\n\n const taxAtMoveIn = taxArr[Math.min(moveIn, HORIZON)];\n const taxAtEnd = taxArr[HORIZON];\n\n const pmiInitial = pmiMonthly(inp, loan, loan);\n const pmiAtMoveIn = pmiMonthly(\n inp,\n loan,\n mortgageBalance(\n loan,\n inp.mortgageRate,\n inp.termYears,\n Math.min(moveIn, HORIZON),\n ),\n );\n const pmiAtEnd = pmiMonthly(\n inp,\n loan,\n mortgageBalance(loan, inp.mortgageRate, inp.termYears, HORIZON),\n );\n\n const pitiInitial = mPmt + monthlyTax + insDuringReno + pmiInitial;\n const pitiAtMoveIn = mPmt + taxAtMoveIn + insAfterReno + pmiAtMoveIn;\n const pitiAtEnd = mPmt + taxAtEnd + insAfterReno + pmiAtEnd;\n const duringReno = pitiInitial + inp.rent;\n\n const moveInRow = rows[Math.min(moveIn, HORIZON)];\n const buildersRisk = inp.renoCost > 0 ? ins.buildersRisk : 0;\n const totalThroughMoveIn = down + cc.total + inp.renoCost + inp.movingCost +\n buildersRisk;\n\n return {\n cc,\n down,\n loan,\n mPmt,\n monthlyTax,\n taxAtMoveIn,\n taxAtEnd,\n insDuringReno,\n insAfterReno,\n buildersRisk,\n pmiInitial,\n pmiAtMoveIn,\n pmiAtEnd,\n replacementBefore: ins.replacementBefore,\n replacementAfter: ins.replacementAfter,\n moveIn,\n rows,\n cashAtClose,\n sblocAtClose,\n cashAtMoveIn: moveInRow.cash,\n sblocAtMoveIn: moveInRow.sbloc,\n totalThroughMoveIn,\n peakSbloc,\n peakSblocMonth,\n sblocClearedMonth,\n sblocInterest,\n limitBreach,\n shortfall,\n strandedGifts,\n minCash,\n minCashMonth,\n pitiInitial,\n pitiAtMoveIn,\n pitiAtEnd,\n duringReno,\n cashDeployedAtClose: down + cc.total,\n };\n}\n\n// ---------------------------------------------------------------------------\n// Price / renovation frontier\n//\n// Collapse the whole timeline into one accounting identity: every dollar of\n// cash and gifts lands in the down payment, closing costs, moving, builder's\n// risk, or the renovation. Timing drops out, so what remains is a single curve\n// trading price against renovation budget.\n//\n// The SBLOC is deliberately absent. It is a bridge, repaid out of the same cash\n// and gifts, so it mostly changes when a dollar is available rather than how\n// many there are — and this view has already thrown timing away. Its interest\n// is a real leak the curve doesn't charge for. Borrowing shows up in the\n// trajectory chart, which still knows what month it is.\n\n// Everything the price buys before a nail is swung, plus the cash you refuse to\n// spend. Closing costs are re-derived at the trial price, so the recordation\n// tiers and the county's $50k owner-occupied exemption stay honest.\nexport function fixedUses(inp, price) {\n const down = (price * Math.max(0, inp.downPct)) / 100;\n const cc = closingCosts({ ...inp, price }).total;\n return down + cc + inp.movingCost + inp.cashFloor;\n}\n\n// Builder's risk is quoted off construction cost, so it scales with the answer:\n// a renovation of R costs R * (1 + buildersRiskPct/100) out of the fund, not R.\n// Solving for R rather than subtracting a fixed number is what keeps this curve\n// agreeing with `simulate` about what is affordable.\nexport function renoHeadroom(inp, price, budget) {\n const grossUp = 1 + Math.max(0, inp.buildersRiskPct) / 100;\n return (budget - fixedUses(inp, price)) / grossUp;\n}\n\n// Highest price that still leaves `reno` for the renovation. Headroom falls\n// monotonically with price, so bisect rather than invert the tier table.\nexport function priceCeiling(inp, budget, reno) {\n const lo = 0;\n const hi = 5000000;\n if (renoHeadroom(inp, lo, budget) < reno) return 0;\n if (renoHeadroom(inp, hi, budget) >= reno) return hi;\n let low = lo;\n let high = hi;\n for (let i = 0; i < 50; i++) {\n const mid = (low + high) / 2;\n if (renoHeadroom(inp, mid, budget) >= reno) low = mid;\n else high = mid;\n }\n return low;\n}\n\n// Month-60 PITI, without running the cash simulation. `simulate` reports the\n// same figure as `pitiAtEnd`, but the frontier has to evaluate this a few\n// thousand times per render to invert it, so this skips straight to the\n// assessment and the closed-form mortgage balance.\nexport function piti60(inp, price, renoCost) {\n const at = { ...inp, price, renoCost };\n const loan = price * (1 - Math.max(0, inp.downPct) / 100);\n const mPmt = pmt(loan, inp.mortgageRate, inp.termYears);\n\n const sched = renovationSchedule(at);\n const { values } = trueValueSeries(at, sched);\n const assessed = assessedValueSeries(at, values, sched.moveIn);\n\n const tax = annualPropertyTax(assessed[HORIZON], at) / 12;\n const balance = mortgageBalance(\n loan,\n inp.mortgageRate,\n inp.termYears,\n HORIZON,\n );\n // Post-reno premium, since month 60 is well past move-in. It varies with both\n // axes of this chart — price sets the structure's replacement cost and the\n // renovation adds to it — so it has to be re-derived at the trial point.\n return mPmt + tax + insuranceProfile(at).afterRenoAnnual / 12 +\n pmiMonthly(at, loan, balance);\n}\n\n// Price that puts month-60 PITI exactly at `target`, at a given renovation\n// budget. Iso-PITI lines run steeply — about $5 of renovation per $1 of price —\n// so they are near-vertical on these axes and are far better conditioned\n// solved for price than for renovation. PITI rises monotonically with price,\n// so bisect. Returns null when the level is unreachable in the search range.\nconst PRICE_SEARCH_LO = 100000;\nconst PRICE_SEARCH_HI = 4000000;\n\nexport function priceAtPiti(inp, renoCost, target) {\n if (piti60(inp, PRICE_SEARCH_LO, renoCost) > target) return null;\n if (piti60(inp, PRICE_SEARCH_HI, renoCost) < target) return null;\n let lo = PRICE_SEARCH_LO;\n let hi = PRICE_SEARCH_HI;\n for (let i = 0; i < 26; i++) {\n const mid = (lo + hi) / 2;\n if (piti60(inp, mid, renoCost) < target) lo = mid;\n else hi = mid;\n }\n return (lo + hi) / 2;\n}\n\n// Renovation spend at which the added value trips MD's $100k interim-assessment\n// threshold — a horizontal cliff across the chart, since it's a level of reno.\nexport function sdatThreshold(inp) {\n if (inp.renoValueAdd <= 0) return null;\n return (REASSESS_THRESHOLD * 100) / inp.renoValueAdd;\n}\n\nconst CONTOUR_STEPS = [250, 500, 1000, 2000, 2500, 5000];\nconst CONTOUR_SAMPLES = 8; // points per contour, per reassessment regime\n\nexport function frontier(inp) {\n const fund = inp.cashNow + inp.gift1 + inp.gift2;\n\n const points = [];\n const steps = 60;\n for (let i = 0; i <= steps; i++) {\n const price = PRICE_MIN + ((PRICE_MAX - PRICE_MIN) * i) / steps;\n points.push({ price, reno: Math.max(0, renoHeadroom(inp, price, fund)) });\n }\n\n const headroom = renoHeadroom(inp, inp.price, fund);\n\n // Plot box: the frontier itself, but always tall enough to show the dot and\n // the SDAT cliff so neither can sit silently off-screen.\n const threshold = sdatThreshold(inp);\n const yMax = Math.max(\n ...points.map((p) => p.reno),\n inp.renoCost,\n threshold ?? 0,\n ) * 1.08 || RENO_MAX;\n\n // Iso-PITI levels. Because the contours are near-vertical, what sets a\n // readable density is how much PITI moves across the *price* axis, not the\n // corner-to-corner range — aim for roughly half a dozen lines.\n const midReno = yMax / 2;\n const lo = piti60(inp, PRICE_MIN, midReno);\n const hi = piti60(inp, PRICE_MAX, midReno);\n const step = CONTOUR_STEPS.find((s) => (hi - lo) / s <= 7) ?? 10000;\n\n const levels = [];\n for (let L = Math.ceil(lo / step) * step; L <= hi; L += step) levels.push(L);\n\n // Contours step across the SDAT threshold, so each is drawn as a separate\n // polyline on either side of it — a single line through both would average\n // away the jog. Inside a regime the contour is very nearly straight, but not\n // exactly: the homestead cap binds over part of the range and bends it. So\n // sample each side rather than assuming a chord.\n const spans = [];\n if (threshold !== null && threshold > 0 && threshold < yMax) {\n spans.push([0, threshold - 1], [threshold, yMax]);\n } else {\n spans.push([0, yMax]);\n }\n\n const contours = levels\n .map((L) => {\n const segments = [];\n for (const [ya, yb] of spans) {\n let prev = null;\n for (let i = 0; i <= CONTOUR_SAMPLES; i++) {\n const y = ya + ((yb - ya) * i) / CONTOUR_SAMPLES;\n const x = priceAtPiti(inp, y, L);\n const pt = x === null ? null : { x, y };\n if (\n prev && pt &&\n !(Math.max(prev.x, pt.x) < PRICE_MIN ||\n Math.min(prev.x, pt.x) > PRICE_MAX)\n ) {\n segments.push({ from: prev, to: pt });\n }\n prev = pt;\n }\n }\n return segments.length ? { level: L, segments } : null;\n })\n .filter(Boolean);\n\n return {\n fund,\n points,\n contours,\n step,\n yMax,\n threshold,\n fixed: fixedUses(inp, inp.price),\n headroom,\n slack: headroom - inp.renoCost,\n ceiling: priceCeiling(inp, fund, inp.renoCost),\n // What another $10k of house costs the renovation: 20% down plus the\n // marginal transfer, recordation, and title on that slice.\n tradeoff: headroom - renoHeadroom(inp, inp.price + 10000, fund),\n piti: piti60(inp, inp.price, inp.renoCost),\n // Monthly cost of the same $10k, and of $10k of renovation instead. The\n // ratio is why sliding down the frontier never holds PITI flat.\n pitiPerPrice: piti60(inp, inp.price + 10000, inp.renoCost) -\n piti60(inp, inp.price, inp.renoCost),\n pitiPerReno: piti60(inp, inp.price, inp.renoCost + 10000) -\n piti60(inp, inp.price, inp.renoCost),\n };\n}\n\n// ---------------------------------------------------------------------------\n\nexport function eventMarkers(inp, r) {\n const markers = [];\n const push = (month, label, ok) => {\n if (!ok) return;\n const m = Math.max(0, Math.min(HORIZON, Math.round(month)));\n markers.push({ month: m, label });\n };\n\n push(0, \"Closing\", true);\n push(r.moveIn, \"Move in\", r.moveIn > 0);\n push(inp.gift1Month, \"Gift 1\", inp.gift1 > 0);\n push(inp.gift2Month, \"Gift 2\", inp.gift2 > 0);\n push(r.peakSblocMonth, \"SBLOC peak\", r.peakSbloc > 0);\n push(r.sblocClearedMonth, \"SBLOC cleared\", r.sblocClearedMonth != null);\n push(TRIENNIAL_MONTH, \"Reassessment\", inp.modelReassessment);\n\n const renoAdded = (inp.renoCost * inp.renoValueAdd) / 100;\n if (inp.modelReassessment && renoAdded >= REASSESS_THRESHOLD) {\n push(r.moveIn + inp.reassessLagMonths, \"Reno reassessment\", true);\n }\n\n return markers.sort((a, b) => a.month - b.month);\n}\n",[],[195,325],"97e4308f-12a8-41e5-8c80-9930d6a2147a","index.jsx","ec22baac-9ce0-11f1-b72c-1607ee4eb77e",8,["D",1787262527232],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport HouseModel from \"./model.jsx\";\nimport Setup from \"./setup.jsx\";\nimport { clearInputs, loadInputs, saveInputs } from \"./storage.js\";\n\nfunction App() {\n const [inputs, setInputs] = useState(loadInputs);\n\n if (!inputs) {\n return (\n {\n saveInputs(values);\n setInputs(values);\n }}\n />\n );\n }\n\n return (\n {\n clearInputs();\n setInputs(null);\n }}\n />\n );\n}\n\nconst root = document.getElementById(\"root\");\nif (!root) throw new Error(\"#root element missing\");\n\ncreateRoot(root).render(\n \n \n ,\n);\n",[],[195,333],["D",1787262526308],[223,224,225,226,227,228,229],[195],["D",1787917328566],[],[200],["D",1787262526487],[],[206],["D",1787262525473],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},{"_13":85,"_32":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"ctx",{"_78":-5,"_122":386,"_387":388,"_389":390,"_391":25,"_392":25,"_393":25,"_394":58,"_395":-5,"_396":-7,"_397":-7,"_398":62,"_399":25,"_400":25,"_401":-5,"_402":25,"_403":25,"_404":25,"_405":-5},"ENV",{"_357":358,"_359":360,"_361":86,"_362":363,"_364":365,"_366":367,"_368":369,"_370":371,"_372":373,"_374":375,"_376":377,"_378":379,"_380":381,"_382":383,"_384":385},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Purchase model

Set up your numbers

\n {label}\n

Takoma Park purchase model

Diff · v63