[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_106":107,"_108":109},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","drewmcdonald","name","househunt","path","frontend/model.jsx","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":56,"_57":-5,"_58":59,"_60":61,"_62":34,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/drewmcdonald/househunt/code/frontend/model.jsx","extension","id","6a39a0f0-edac-4298-ae47-c8bafeef4184","model.jsx","fileId","ec473652-9ce0-11f1-8da2-1607ee4eb77e","parentId","eb86824a-9ce0-11f1-8fc3-1607ee4eb77e","branchId","67fbed22-7bed-46f7-b296-04a9e1960c57","branchVersion",64,"latest",true,"createdAt",["D",1788042566199],"version",13,"fileType","script","content","/** @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\";\nimport {\n eventMarkers,\n frontier,\n HORIZON,\n piti60,\n PRICE_MAX,\n PRICE_MIN,\n PRIORITY_OPTIONS,\n RENO_MAX,\n simulate,\n} from \"./model.js\";\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

\n Every $10,000 more house costs {money(f.tradeoff)} of renovation —{\" \"}\n {inp.downPct}% down plus the transfer, recordation, and title on that\n slice. The dot is 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 mostly changes\n when you can spend rather than how much. Its interest is the exception,\n and this curve doesn't charge for it. Borrowing shows up in the\n trajectory 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 {r.strandedGifts.length > 0 && (\n

\n {r.strandedGifts\n .map((g) => `${g.label} (${money(g.amount)}) arrives in month ${g.month}`)\n .join(\"; \")}\n , outside the 0–{HORIZON} month window — so it never lands, and none\n of the figures below count it.\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 {inp.downPct}% = {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 {r.pmiInitial > 0 && (\n

\n Under 20% down, so PMI runs at {money(r.pmiInitial)}/mo until\n the balance reaches 80% of price —{\" \"}\n {r.pmiAtEnd > 0\n ? \"still on at month 60.\"\n : \"off before month 60.\"}\n

\n )}\n

\n Insurance through the reno\n

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

\n The premium is a rate on replacement cost, backed out of that\n quote at {money(inp.insuranceBasePrice)}. Here that's{\" \"}\n {money(r.replacementBefore)} → {money(r.replacementAfter)} of\n structure, so it 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 \n {inp.modelReassessment && (\n <>\n \n \n

\n Maryland doesn't reassess on sale, so month 0 starts at{\" \"}\n {money(r.rows[0].assessed)} — {inp.assessmentRatioPct}% of\n price. Reno adds{\" \"}\n {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 every month, not only when a gift lands\n \n

\n The purchase fund has no monthly income in it, so this only\n matters once renovation draws stop being reserved and free cash\n up between gifts.\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 {r.pmiInitial > 0 && (\n \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 {r.pmiAtMoveIn > 0 && (\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","deleted",false,"label",[47,24],"frontend","33cec31f-b870-42f0-a32f-ae43e665b3e6",["D",1787262525473],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","userId","b8db9d60-1994-11f0-a97f-49be2029e0a3","pinnedFileId","ec278a0a-9ce0-11f1-ba0b-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","5affebf8-2371-44b9-a6da-146d4a0e1f13","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_105":101},"org",{"_9":10,"_99":-5,"_100":101,"_58":59,"_102":103,"_104":44},"branch",{"_37":89,"_11":90,"_22":30,"_91":48,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":12,"_98":10},"isOwned",65,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydmtBUlRqVEEwb1lKTWo3UHNHN25IZlo0UFYifQ","tier","free","canRestrictVals","profileImageUrl","ctx",{"_82":-5,"_139":140,"_141":142,"_143":144,"_145":44,"_146":44,"_147":44,"_148":34,"_149":-5,"_150":-7,"_151":-7,"_152":66,"_153":44,"_154":44,"_155":-5,"_156":44,"_157":44,"_158":44,"_159":-5},"ENV",{"_110":111,"_112":113,"_114":90,"_115":116,"_117":118,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138},"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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]