# Architecture ## Stack Pure vanilla HTML/CSS/JS — no frameworks, no build tools. MathJax v3 for LaTeX rendering is the only runtime dependency (loaded before app scripts). Eight JS modules loaded in dependency order at the end of ``. ## Load Order ``` index.html └─ style.css └─ lib/mathjax/tex-mml-chtml.js → MathJax v3 (LaTeX→HTML rendering) └─ dom.js → $, $id, svgNamespace, STORAGE_KEY └─ helpers.js → splitValueAndUnit, rebuildSelect, refresh* functions └─ error.js → showError, closeError └─ draw.js → routeBetween, drawpath, shadow link system └─ wcblock.js → WCBlock base (drag/drop, link system, code traversal) └─ blocks-algo.js → Algorithm tab blocks (WCStart, WCEnd, WCOutput, WCDecision, │ WCAssign, WCExpression, WCVarRef) └─ blocks-data.js → Data & Measurement tab blocks (WCQuantity, WCUnit, WCBoolean, │ WCScalar, WCString, WCArray) └─ blocks-proc.js → Procedure blocks (WCProcedure, WCProcCall) └─ wcprogram.js → WCProgram + block registry + registration calls └─ persist.js → saveWorkspace, loadWorkspace, newWorkspace └─ app.js → entry point, setupUI, main() ``` ## File Roles ### `dom.js` — Global constants & DOM shortcuts Provides app-wide constants that every module depends on: - `$` — `document.querySelector.bind(document)` — concise single-element selector - `$id` — `document.getElementById.bind(document)` — concise ID lookup - `svgNamespace` — `"http://www.w3.org/2000/svg"` — for SVG element creation - `STORAGE_KEY` — `"workspace"` — localStorage key for persistence ### `helpers.js` — Utility functions & dropdown refresh Pure helper functions (no module dependencies beyond DOM): - `splitValueAndUnit(str, defaultNum)` — parses `"5 km"` → `{numVal: 5, unitSuffix: "km"}` - `rebuildSelect(sel, placeholder, values, current)` — replaces `