diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
index 9839f83..1246e97 100644
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -98,6 +98,7 @@ Collectively they define two class hierarchies:
 - Two-click hook link system (`connectedCallback` → `_setupHook(hook)` per hook button)
 - Flow tracking (`wcForeFlow`, `wcNextFlow` arrays of SVG path elements)
 - Code generation (`generateCode()`, `generateNextCode()`)
+- Validation via `_require(selector)` — throws a descriptive `Error` if a required child element is missing from the template, failing early instead of producing `Cannot read properties of null`
 - Selection on click (`.selected` class, blue box-shadow ring)
 - Deletion via X button (top-right, shown on hover) or <kbd>Delete</kbd> key
 - X button omitted for `WCStart` / `WCEnd`; their `delete()` shows an error
@@ -113,8 +114,9 @@ Collectively they define two class hierarchies:
 | `WCUnit` | SI unit definition | none (inert hook) | unit comment |
 | `WCBoolean` | Boolean variable | none (inert hook) | `int name = 0/1;` |
 | `WCScalar` | Scalar variable with quantity + unit | none (inert hook) | `type name = value;` |
+| `WCVector` | N-dimensional vector with quantity + unit | none (inert hook) | `type name[N] = {v0, v1, ...};` |
 | `WCString` | String variable (char* + length) | none (inert hook) | `string name = {"text", len};` |
-| `WCArray` | Typed C array | none | `type name[] = {values};` |
+| `WCArray` | Typed C array (supports vector stride) | none | `type name[size];` |
 | `WCVarRef` | Read-only variable reference in algorithm view | 1 data out | `""` (visual only) |
 | `WCExpression` | MathJax-rendered expression | dynamic data-in (per variable), 1 data out | `double name = formula;` |
 | `WCProcedure` | Procedure definition with typed params | none (inert hook) | `""` (comments only) |
@@ -124,7 +126,7 @@ Collectively they define two class hierarchies:
 - `build()` — creates mandatory START/END blocks
 - `makeNode(tag)` — deep-clones a template by registry lookup, assigns unique ID
 - `newNode(tag, parent)` — creates a node and appends to the given parent (or registry default)
-- Convenience methods: `newDecisionNode`, `newExpressionNode`, `newVarRefNode`, `newOutputNode`, `newProcCallNode`, `newUnitNode`, `newQuantityNode`, `newBooleanNode`, `newScalarNode`, `newStringNode`, `newArrayNode`, `newProcedureNode`
+- Convenience methods: `newDecisionNode`, `newExpressionNode`, `newVarRefNode`, `newOutputNode`, `newProcCallNode`, `newUnitNode`, `newQuantityNode`, `newBooleanNode`, `newScalarNode`, `newVectorNode`, `newStringNode`, `newArrayNode`, `newProcedureNode`
 - `generateCode()` — traverses all blocks and produces complete C source
 
 ### `persist.js` — Workspace persistence (localStorage)
@@ -258,12 +260,13 @@ WCExpression uses MathJax v3 (`tex-mml-chtml.js`) for client-side LaTeX renderin
 - **Fallback**: If MathJax is unavailable, `.expr-rendered` shows the raw LaTeX text
 - **Persistence**: Only the LaTeX string is saved/restored; variable hooks are regenerated from it on load
 
-## Data Type System (WCBoolean / WCScalar / WCString)
+## Data Type System (WCBoolean / WCScalar / WCVector / WCString)
 
-Variable blocks come in three distinct types, **not** interchangeable:
+Variable blocks come in four distinct types, **not** interchangeable:
 
 - **WCBoolean** (`wc-boolean`): A boolean variable. Has a name and a true/false value selector. No unit, no SI conversion, no quantity dropdown. Generates `int name = 0/1;`.
 - **WCScalar** (`wc-scalar`): A typed scalar variable. Has a name, numeric value, unit dropdown, and quantity selector with SI conversion display. Generates `quantityName name = siValue;`.
+- **WCVector** (`wc-vector`): An N-dimensional vector of scalars. Has a name, dimension N, space-separated values, unit dropdown, and quantity selector with SI conversion display. Generates `type name[N] = {v0, v1, ...};`. Data hook type reports as `"scalar"` (varref outputs element values). Index-aware: WCAssign with an index hook assigns to `name[idx]`; without an index hook assigns to `name[0]` or broadcasts via loop.
 - **WCString** (`wc-string`): A string variable. Has a name and a text value. Generates `string name = {"text", length};`. The `string` struct (`{char *data; long int length;}`) is emitted once before variable declarations when any string blocks exist.
 
 Unlike the previous unified `WCDatum` block, there is no way to switch between types — they are separate custom elements with distinct templates and classes.
diff --git a/app.js b/app.js
index 9b60846..4de3557 100644
--- a/app.js
+++ b/app.js
@@ -69,13 +69,8 @@ function createDefaultMeasurements() {
     { fullname: "katal",     type: "catalytic_activity", suffix: "kat",  si: "1" },
   ];
 
-  const COLS = 4, COL_W = 250, ROW_H = 190, PAD = 10;
-  const typeRows = Math.ceil(typeDefs.length / COLS);
-
-  const typeTags = typeDefs.map((t, i) => {
+  const typeTags = typeDefs.map(t => {
     const el = prog.newQuantityNode();
-    el.style.left = PAD + (i % COLS) * COL_W + "px";
-    el.style.top  = PAD + Math.floor(i / COLS) * ROW_H + "px";
     el.querySelector(".quantity-name").value = t.name;
     for (let j = 0; j < 7; j++) {
       el.querySelector(`.dim-${j}`).value = t.dims[j];
@@ -84,10 +79,15 @@ function createDefaultMeasurements() {
     return el;
   });
 
-  const unitTags = unitDefs.map((u, i) => {
+  /* Sub-header separating quantities from units */
+  const unitHeader = document.createElement("div");
+  unitHeader.className = "list-header";
+  unitHeader.style.borderTop = "2px solid var(--border)";
+  unitHeader.textContent = "Units — Fullname &nbsp; Type &nbsp; Suffix &nbsp; SI Factor &nbsp; Resolved";
+  $id("data-area").appendChild(unitHeader);
+
+  const unitTags = unitDefs.map(u => {
     const el = prog.newUnitNode();
-    el.style.left = PAD + (i % COLS) * COL_W + "px";
-    el.style.top  = PAD + (typeRows + Math.floor(i / COLS)) * ROW_H + "px";
     el.querySelector(".unit-fullname").value = u.fullname;
     el.querySelector(".unit-type").value     = u.type;
     el.querySelector(".unit-suffix").value   = u.suffix;
@@ -116,154 +116,47 @@ function createDefaultMeasurements() {
  * @returns {HTMLElement} the #procedures-area element inside the new pane
  */
 function addLibTab(libName, makeActive) {
+  const tabBar = document.querySelector(".lib-tab-bar");
+  if (!tabBar) { showError("Missing .lib-tab-bar element"); return null; }
+  const paneContainer = $id("pane-procedures");
+  if (!paneContainer) { showError("Missing #pane-procedures element"); return null; }
+
   const tab = document.createElement("button");
   tab.className = "lib-tab" + (makeActive ? " active" : "");
   tab.dataset.libName = libName;
   tab.textContent = libName;
   tab.addEventListener("click", () => switchLibTab(libName));
-  document.querySelector(".lib-tab-bar").appendChild(tab);
+  tabBar.appendChild(tab);
 
   const pane = document.createElement("div");
   pane.className = "lib-pane" + (makeActive ? " active" : "");
   pane.dataset.libName = libName;
 
+  const hdr = document.createElement("div");
+  hdr.className = "list-header";
+  hdr.textContent = "Procedure \u00a0 Inputs \u2192 Outputs";
+  pane.appendChild(hdr);
   const area = document.createElement("div");
   area.className = "procedures-area";
   pane.appendChild(area);
-  $id("pane-procedures").appendChild(pane);
+  paneContainer.appendChild(pane);
 
   return area;
 }
 
-// ── Default library creation ──────────────────────────────────────────────────
-
 /**
- * Creates the default "stdio" library with a "puts" procedure
- * (one string input param, no outputs).
+ * Creates library tabs from the index, then lazy-loads procedures on first click.
  */
-function createDefaultLibraries() {
-  const prog = $id("main-program");
-  const libName = "stdio";
-  addLibTab(libName, true);
-  const proc = prog.newProcedureNode(libName);
-  if (proc) {
-    proc.querySelector(".proc-name").value = "puts";
-    proc._addParamRow(proc.querySelector(".proc-inputs"), "in");
-    const row = proc.querySelector(".proc-inputs .proc-param-row");
-    if (row) {
-      row.querySelector(".proc-param-name").value = "str";
-      row.querySelector(".proc-param-type").value = "string";
-    }
+async function initLibraries() {
+  const index = await loadLibraryIndex();
+  let first = true;
+  for (const entry of index) {
+    addLibTab(entry.id, first);
+    first = false;
   }
-  refreshProcOptions();
-}
-
-
-// ── OpenGL default procedures ─────────────────────────────────────────────────
-
-/**
- * Creates param rows on a procedure block and sets their name/type values.
- * Follows the same pattern as WCProcedure.restoreData().
- * @param {HTMLElement} proc - a wc-procedure element
- * @param {[string, string][]} inputs - array of [name, type] pairs
- * @param {[string, string][]} outputs - array of [name, type] pairs
- */
-function _addProcParams(proc, inputs, outputs) {
-  for (const [name, type] of inputs) {
-    proc._addParamRow(proc.querySelector(".proc-inputs"), "in");
-    const rows = proc.querySelectorAll(".proc-inputs .proc-param-row");
-    const last = rows[rows.length - 1];
-    last.querySelector(".proc-param-name").value = name;
-    last.querySelector(".proc-param-type").value = type;
-  }
-  for (const [name, type] of outputs) {
-    proc._addParamRow(proc.querySelector(".proc-outputs"), "out");
-    const rows = proc.querySelectorAll(".proc-outputs .proc-param-row");
-    const last = rows[rows.length - 1];
-    last.querySelector(".proc-param-name").value = name;
-    last.querySelector(".proc-param-type").value = type;
-  }
-}
-
-/**
- * Creates default OpenGL procedure definitions organised into three libraries:
- *
- *   glfw  — GLFW window management (init, create, swap, poll, close, terminate)
- *   glad  — OpenGL loader initialisation (gladLoadGL)
- *   gl    — OpenGL core functions for a Hello Triangle pipeline
- *           (shader compile/link, buffer/VAO setup, draw, clear, cleanup)
- *
- * Also creates a default "vertices" float array with Hello Triangle vertex data
- * in the Data tab so the user has a starting point.
- *
- * Code generation note:
- *   Output parameters are passed with a `&` prefix in the generated C code
- *   (e.g. `glCreateShader(type, &shader);`). For OpenGL functions that
- *   natively return values rather than taking pointer outputs, the generated
- *   code uses this convention and may need a thin wrapper.
- */
-function createDefaultOpenGLProcedures() {
-  const prog = $id("main-program");
-
-  const PROC_DEFS = [
-    // ── glfw: window management ──
-    { lib: "glfw", name: "glfwInit",                inputs: [],                                        outputs: [["result","int"]] },
-    { lib: "glfw", name: "glfwCreateWindow",        inputs: [["width","int"],["height","int"],["title","string"]], outputs: [["window","int"]] },
-    { lib: "glfw", name: "glfwMakeContextCurrent",  inputs: [["window","int"]],                        outputs: [] },
-    { lib: "glfw", name: "glfwSwapBuffers",         inputs: [["window","int"]],                        outputs: [] },
-    { lib: "glfw", name: "glfwPollEvents",          inputs: [],                                        outputs: [] },
-    { lib: "glfw", name: "glfwWindowShouldClose",   inputs: [["window","int"]],                        outputs: [["result","int"]] },
-    { lib: "glfw", name: "glfwTerminate",           inputs: [],                                        outputs: [] },
-    // ── glad: OpenGL loader ──
-    { lib: "glad", name: "gladLoadGL",              inputs: [],                                        outputs: [["result","int"]] },
-    // ── gl: OpenGL core Hello Triangle ──
-    { lib: "gl", name: "glCreateShader",            inputs: [["type","unsigned int"]],                 outputs: [["shader","unsigned int"]] },
-    { lib: "gl", name: "glShaderSource",            inputs: [["shader","unsigned int"],["count","int"],["source","string"]], outputs: [] },
-    { lib: "gl", name: "glCompileShader",           inputs: [["shader","unsigned int"]],               outputs: [] },
-    { lib: "gl", name: "glGetShaderiv",             inputs: [["shader","unsigned int"],["pname","unsigned int"]], outputs: [["params","int"]] },
-    { lib: "gl", name: "glCreateProgram",           inputs: [],                                        outputs: [["program","unsigned int"]] },
-    { lib: "gl", name: "glAttachShader",            inputs: [["program","unsigned int"],["shader","unsigned int"]], outputs: [] },
-    { lib: "gl", name: "glLinkProgram",             inputs: [["program","unsigned int"]],              outputs: [] },
-    { lib: "gl", name: "glGetProgramiv",            inputs: [["program","unsigned int"],["pname","unsigned int"]], outputs: [["params","int"]] },
-    { lib: "gl", name: "glGenVertexArrays",         inputs: [["n","unsigned int"]],                    outputs: [["arrays","unsigned int"]] },
-    { lib: "gl", name: "glBindVertexArray",         inputs: [["array","unsigned int"]],                outputs: [] },
-    { lib: "gl", name: "glGenBuffers",              inputs: [["n","unsigned int"]],                    outputs: [["buffers","unsigned int"]] },
-    { lib: "gl", name: "glBindBuffer",              inputs: [["target","unsigned int"],["buffer","unsigned int"]], outputs: [] },
-    { lib: "gl", name: "glBufferData",              inputs: [["target","unsigned int"],["size","int"],["data","string"],["usage","unsigned int"]], outputs: [] },
-    { lib: "gl", name: "glVertexAttribPointer",     inputs: [["index","unsigned int"],["size","int"],["type","unsigned int"],["normalized","int"],["stride","int"],["pointer","int"]], outputs: [] },
-    { lib: "gl", name: "glEnableVertexAttribArray", inputs: [["index","unsigned int"]],                outputs: [] },
-    { lib: "gl", name: "glUseProgram",              inputs: [["program","unsigned int"]],              outputs: [] },
-    { lib: "gl", name: "glDrawArrays",              inputs: [["mode","unsigned int"],["first","int"],["count","int"]], outputs: [] },
-    { lib: "gl", name: "glClear",                   inputs: [["mask","unsigned int"]],                 outputs: [] },
-    { lib: "gl", name: "glClearColor",              inputs: [["red","float"],["green","float"],["blue","float"],["alpha","float"]], outputs: [] },
-    { lib: "gl", name: "glDeleteShader",            inputs: [["shader","unsigned int"]],               outputs: [] },
-    { lib: "gl", name: "glDeleteProgram",           inputs: [["program","unsigned int"]],              outputs: [] },
-    { lib: "gl", name: "glViewport",                inputs: [["x","int"],["y","int"],["width","int"],["height","int"]], outputs: [] },
-  ];
-
-  // Create each library tab once, then populate procedures
-  const libsDone = {};
-  for (const pd of PROC_DEFS) {
-    if (!libsDone[pd.lib]) {
-      libsDone[pd.lib] = true;
-      addLibTab(pd.lib, false);
-    }
-    const proc = prog.newProcedureNode(pd.lib);
-    if (proc) {
-      proc.querySelector(".proc-name").value = pd.name;
-      _addProcParams(proc, pd.inputs, pd.outputs);
-    }
-  }
-  refreshProcOptions();
-
-  // ── Default vertex array for Hello Triangle ──
-  const arr = prog.newArrayNode();
-  if (arr) {
-    arr.restoreData({
-      name: "vertices",
-      type: "float",
-      values: ["-0.5", "-0.5", "0.0", "0.5", "-0.5", "0.0", "0.0", "0.5", "0.0"]
-    });
+  if (index.length > 0) {
+    switchLibTab(index[0].id);
+    loadLibrary(index[0].id);
   }
 }
 
@@ -279,7 +172,7 @@ function switchTab(name) {
     btn.classList.toggle("active", btn.dataset.tab === name);
   }
   for (const pane of document.querySelectorAll(".tab-pane")) {
-    pane.classList.toggle("active", pane.id === "pane-" + name);
+    pane.classList.toggle("active", pane.dataset.tab === name);
   }
 }
 
@@ -288,9 +181,10 @@ function switchTab(name) {
 
 /** Wires all static button click handlers (replaces inline onclick attributes). */
 function setupUI() {
-  function closeVariableSubmenu() {
-    const sub = document.querySelector(".submenu[data-action='variable-submenu']");
-    if (sub) sub.classList.remove("open");
+  function closeAllSubmenus() {
+    for (const sub of document.querySelectorAll(".submenu.open")) {
+      sub.classList.remove("open");
+    }
   }
 
   /* Toolbar block-creation helpers */
@@ -302,118 +196,210 @@ function setupUI() {
     array: refreshAll,
     quantity: refreshAll,
     unit: refreshAll,
-    proccall: refreshAll,
     assign: refreshAll
   };
   function handleBlockAction(btn) {
     const tag = BLOCK_ACTIONS[btn.dataset.action];
     if (!tag) return false;
     const prog = $id("main-program");
+
+    /* Procedure call: show browser modal first, create block only on selection */
+    if (btn.dataset.action === "proccall") {
+      showProcedureBrowser("", (qname) => {
+        if (qname) {
+          const el = prog.newNode(tag);
+          if (el) {
+            el.setProcedure(qname);
+            refreshAll();
+          }
+        }
+      });
+      return true;
+    }
+
     const el = prog.newNode(tag);
     if (el && ACTION_REFRESH[btn.dataset.action]) ACTION_REFRESH[btn.dataset.action]();
     return true;
   }
 
   /* Algorithm pane toolbar */
-  const algoToolbar = $id("pane-algorithm").querySelector(".pane-toolbar");
-  algoToolbar.addEventListener("click", e => {
-    const btn = e.target.closest("button");
-    if (btn && handleBlockAction(btn)) return;
-  });
+  const algoToolbarPane = $id("pane-algorithm");
+  const algoToolbar = algoToolbarPane && algoToolbarPane.querySelector(".pane-toolbar");
+  if (algoToolbar) {
+    algoToolbar.addEventListener("click", e => {
+      const btn = e.target.closest("button");
+      if (!btn) return;
+      if (handleBlockAction(btn)) return;
+      if (btn.dataset.action === "add-section" && typeof enterSectionCreateMode === "function") {
+        enterSectionCreateMode();
+      }
+    });
+  }
 
   /* Data pane toolbar */
-  const dataToolbar = $id("pane-data").querySelector(".pane-toolbar");
-  dataToolbar.addEventListener("click", e => {
-    const btn = e.target.closest("button");
-    if (!btn) return;
-    const action = btn.dataset.action;
-    const prog = $id("main-program");
-    if (action === "variable") {
-      const sub = document.querySelector(".submenu[data-action='variable-submenu']");
-      if (sub) sub.classList.toggle("open");
-    } else if (handleBlockAction(btn)) {
-      closeVariableSubmenu();
-    }
-  });
+  const dataToolbarPane = $id("pane-data");
+  const dataToolbar = dataToolbarPane && dataToolbarPane.querySelector(".pane-toolbar");
+  if (dataToolbar) {
+    dataToolbar.addEventListener("click", e => {
+      const btn = e.target.closest("button");
+      if (!btn) return;
+      const prog = $id("main-program");
+      if (btn.dataset.action === "variable") {
+        const sub = document.querySelector(".submenu[data-action='variable-submenu']");
+        if (sub) sub.classList.toggle("open");
+      } else if (handleBlockAction(btn)) {
+        closeAllSubmenus();
+      }
+    });
+  }
 
   /* Measurements pane toolbar */
-  const measToolbar = $id("pane-measurements").querySelector(".pane-toolbar");
-  measToolbar.addEventListener("click", e => {
-    const btn = e.target.closest("button");
-    if (btn) handleBlockAction(btn);
-  });
+  const measToolbarPane = $id("pane-measurements");
+  const measToolbar = measToolbarPane && measToolbarPane.querySelector(".pane-toolbar");
+  if (measToolbar) {
+    measToolbar.addEventListener("click", e => {
+      const btn = e.target.closest("button");
+      if (btn) handleBlockAction(btn);
+    });
+  }
 
   /* Procedures pane toolbar */
-  const procToolbar = $id("pane-procedures").querySelector(".pane-toolbar");
-  procToolbar.addEventListener("click", e => {
-    const btn = e.target.closest("button");
+  const procToolbarPane = $id("pane-procedures");
+  const procToolbar = procToolbarPane && procToolbarPane.querySelector(".pane-toolbar");
+  if (procToolbar) {
+    procToolbar.addEventListener("click", e => {
+      const btn = e.target.closest("button");
+      if (!btn) return;
+      const prog = $id("main-program");
+
+      if (btn.dataset.action === "add-library") {
+        const libName = prompt("Library name:", "mylib");
+        if (!libName) return;
+        markLibLoaded(libName);
+        addLibTab(libName, false);
+        switchLibTab(libName);
+      }
+
+      if (btn.dataset.action === "add-procedure") {
+        const activeLibPane = document.querySelector(".lib-pane.active");
+        if (!activeLibPane) return;
+        const el = prog.newNode("wc-procedure", activeLibPane.querySelector(".procedures-area"));
+      }
+
+      if (btn.dataset.action === "add-library-index") {
+        const sub = document.querySelector(".submenu[data-action='library-index-submenu']");
+        if (!sub) return;
+        const index = getLibraryIndex();
+        const available = index.filter(e => !isLibraryLoaded(e.id));
+        if (available.length === 0) {
+          showError("All libraries from the index are already loaded.");
+          return;
+        }
+        sub.innerHTML = available.map(e =>
+          `<button data-lib-id="${e.id}">${e.name} (${e.id})</button>`
+        ).join("");
+        if (sub.classList.contains("open")) {
+          sub.classList.remove("open");
+        } else {
+          closeAllSubmenus();
+          sub.classList.add("open");
+        }
+        return;
+      }
+    });
+  }
+
+  /* Library index submenu item click — load selected library */
+  document.addEventListener("click", e => {
+    const btn = e.target.closest(".submenu[data-action='library-index-submenu'] button");
     if (!btn) return;
-    const prog = $id("main-program");
-
-    if (btn.dataset.action === "add-library") {
-      const libName = prompt("Library name:", "mylib");
-      if (!libName) return;
-      addLibTab(libName, false);
-      switchLibTab(libName);
-    }
-
-    if (btn.dataset.action === "add-procedure") {
-      const activeLibPane = document.querySelector(".lib-pane.active");
-      if (!activeLibPane) return;
-      const el = prog.newNode("wc-procedure", activeLibPane.querySelector("#procedures-area"));
-      if (el) refreshProcOptions();
-    }
+    const libId = btn.dataset.libId;
+    if (!libId) return;
+    document.querySelector(".submenu[data-action='library-index-submenu']").classList.remove("open");
+    addLibTab(libId, false);
+    loadLibrary(libId);
+    switchLibTab(libId);
   });
 
-  /* Lib tab bar click (delegated) */
-  document.querySelector(".lib-tab-bar").addEventListener("click", e => {
-    const tab = e.target.closest(".lib-tab");
-    if (tab) switchLibTab(tab.dataset.libName);
-  });
+  /* Lib tab bar click (delegated) — lazy-load libraries on first click */
+  const libTabBar = document.querySelector(".lib-tab-bar");
+  if (libTabBar) {
+    libTabBar.addEventListener("click", async e => {
+      const tab = e.target.closest(".lib-tab");
+      if (!tab) return;
+      const libId = tab.dataset.libName;
+      if (!isLibraryLoaded(libId)) {
+        tab.textContent = libId + " \u2026";
+        try {
+          await loadLibrary(libId);
+        } catch (e) {
+          tab.textContent = libId;
+        }
+      }
+      switchLibTab(libId);
+    });
+  }
 
   /* Global toolbar */
   const globalToolbar = document.querySelector(".global-toolbar");
-  globalToolbar.addEventListener("click", e => {
-    const btn = e.target.closest("button");
-    if (!btn) return;
-    if (btn.dataset.action === "generate") $id("main-program").generateCode();
-    if (btn.dataset.action === "save")     saveWorkspace();
-    if (btn.dataset.action === "load")     loadWorkspace();
-    if (btn.dataset.action === "new")      newWorkspace();
-  });
+  if (globalToolbar) {
+    globalToolbar.addEventListener("click", e => {
+      const btn = e.target.closest("button");
+      if (!btn) return;
+      const prog = $id("main-program");
+      if (!prog) { showError("Main program element not found"); return; }
+      if (btn.dataset.action === "generate")  prog.generateCode();
+      if (btn.dataset.action === "save")      saveWorkspace();
+      if (btn.dataset.action === "load")      loadWorkspace();
+      if (btn.dataset.action === "new")       newWorkspace();
+      if (btn.dataset.action === "copy-code") copyCode();
+      if (btn.dataset.action === "run-tests") {
+        if (window.APP_TEST_SUITE) APP_TEST_SUITE.run();
+      }
+    });
+  }
 
   /* Tab bar */
-  document.querySelector(".tab-bar").addEventListener("click", e => {
-    const btn = e.target.closest(".tab-btn");
-    if (btn) switchTab(btn.dataset.tab);
-    closeVariableSubmenu();
-  });
+  const tabBar = document.querySelector(".tab-bar");
+  if (tabBar) {
+    tabBar.addEventListener("click", e => {
+      const btn = e.target.closest(".tab-btn");
+      if (btn) switchTab(btn.dataset.tab);
+      closeAllSubmenus();
+    });
+  }
 
-  /* Close variable submenu on outside click */
+  /* Close all submenus on outside click */
   document.addEventListener("click", e => {
-    if (!e.target.closest(".btn-group")) closeVariableSubmenu();
+    if (!e.target.closest(".btn-group")) closeAllSubmenus();
   });
 
   /* Click anywhere in draw-area (except hooks, which stopPropagation) cancels pending link */
-  $id("draw-area").addEventListener("click", resetLinkage);
+  const drawArea = $id("draw-area");
+  if (drawArea) drawArea.addEventListener("click", resetLinkage);
 
   /* Click on an SVG connection path deletes it */
-  $id("connections").addEventListener("click", e => {
-    const path = e.target.closest("path.flow, path.flow-data");
-    if (!path) return;
-    e.stopPropagation();
-    for (const el of document.querySelectorAll(".selected")) el.classList.remove("selected");
-    resetLinkage();
-    deleteLink(path);
-  });
+  const connectionsSvg = $id("connections");
+  if (connectionsSvg) {
+    connectionsSvg.addEventListener("click", e => {
+      const path = e.target.closest("path.flow, path.flow-data");
+      if (!path) return;
+      e.stopPropagation();
+      for (const el of document.querySelectorAll(".selected")) el.classList.remove("selected");
+      resetLinkage();
+      deleteLink(path);
+    });
+  }
 
   /* Error modal dismiss */
-  $("#error-overlay").addEventListener("click", closeError);
+  const errorOverlay = $("#error-overlay");
+  if (errorOverlay) errorOverlay.addEventListener("click", closeError);
 
   /* Keyboard: Delete key removes selected block */
   document.addEventListener("keydown", ev => {
     if (ev.key !== "Delete" && ev.key !== "Del") return;
     if (ev.target.tagName === "INPUT" || ev.target.tagName === "TEXTAREA" || ev.target.tagName === "SELECT") return;
+    if (window.LOGIC_SECTIONS && LOGIC_SECTIONS.editingId) return;
     const sel = document.querySelector(".selected");
     if (sel && typeof sel.delete === "function") {
       ev.preventDefault();
@@ -438,14 +424,29 @@ function setupUI() {
  * wires up all UI event listeners.
  */
 function main() {
-  $id("main-program").build();
+  const prog = $id("main-program");
+  if (!prog) { showError("Missing #main-program element"); return; }
+  window.prog = prog;
+  prog.build();
   createDefaultMeasurements();
-  createDefaultLibraries();
-  createDefaultOpenGLProcedures();
-  if (localStorage.getItem(STORAGE_KEY)) {
-    loadWorkspace();
+
+  /* Create default vertex array for Hello Triangle */
+  const arr = prog.newArrayNode();
+  if (arr) {
+    arr.restoreData({
+      name: "vertices",
+      type: "float",
+      values: ["-0.5", "-0.5", "0.0", "0.5", "-0.5", "0.0", "0.0", "0.5", "0.0"]
+    });
   }
-  setupUI();
+
+  /* Load library index and create tabs (procedures load on demand) */
+  initLibraries().then(() => {
+    if (localStorage.getItem(STORAGE_KEY)) {
+      loadWorkspace();
+    }
+    setupUI();
+  });
 }
 
 main();
diff --git a/blocks-algo.js b/blocks-algo.js
index 65a9ed5..6218f6a 100644
--- a/blocks-algo.js
+++ b/blocks-algo.js
@@ -15,6 +15,7 @@
 
 // ── WCStart — program entry point ──────────────────────────────────────────
 
+/** Program entry point. Cannot be deleted. */
 class WCStart extends WCBlock {
   delete() { showError("Cannot delete the start block."); }
 }
@@ -22,14 +23,185 @@ class WCStart extends WCBlock {
 
 // ── WCEnd — program exit ───────────────────────────────────────────────────
 
+/** Program exit block with errno autocomplete. At least one must return 0. */
 class WCEnd extends WCBlock {
-  delete() { showError("Cannot delete the end block."); }
-  generateOwnCode() { return ""; }
+  connectedCallback() {
+    super.connectedCallback();
+    this._errnoItems = _ERRNO_ITEMS;
+    this._selectedCode = 0;
+    this._el.input = this._require(".end-errno-input");
+    this._el.suggestions = this._require(".end-errno-suggestions");
+    this._el.desc = this._require(".end-desc-text");
+
+    this._el.input.addEventListener("input", () => this._onInput());
+    this._el.input.addEventListener("focus", () => { if (this._el.suggestions.children.length > 0) this._showSuggestions(); });
+    this._el.input.addEventListener("keydown", ev => this._onKeyDown(ev));
+    this._el.suggestions.addEventListener("mousedown", ev => {
+      const sug = ev.target.closest(".end-errno-suggestion");
+      if (sug) {
+        const code = parseInt(sug.dataset.code);
+        if (!isNaN(code)) this._selectByCode(code);
+      }
+    });
+    document.addEventListener("click", ev => {
+      if (!this.contains(ev.target)) this._hideSuggestions();
+    });
+
+    this._el.input.value = "0";
+    this._selectByCode(0);
+  }
+
+  _onInput() {
+    const q = this._el.input.value.trim().toLowerCase();
+    if (!q) {
+      this._renderSuggestions(this._errnoItems);
+      this._showSuggestions();
+      return;
+    }
+    const qCode = parseInt(q);
+    const matches = this._errnoItems.filter(item =>
+      (!isNaN(qCode) && item.code === qCode) ||
+      item.name.toLowerCase().includes(q) ||
+      item.desc.toLowerCase().includes(q)
+    );
+    this._renderSuggestions(matches);
+    this._showSuggestions();
+  }
+
+  _renderSuggestions(items) {
+    this._el.suggestions.innerHTML = "";
+    for (const item of items) this._addSuggestion(item);
+  }
+
+  _addSuggestion(item) {
+    const div = document.createElement("div");
+    div.className = "end-errno-suggestion";
+    div.dataset.code = item.code;
+    const codeSpan = document.createElement("span");
+    codeSpan.className = "end-suggestion-code";
+    codeSpan.textContent = item.code + "  " + item.name;
+    div.appendChild(codeSpan);
+    const descSpan = document.createElement("span");
+    descSpan.className = "end-suggestion-desc";
+    descSpan.textContent = item.desc;
+    div.appendChild(descSpan);
+    this._el.suggestions.appendChild(div);
+  }
+
+  _showSuggestions() { this._el.suggestions.style.display = "block"; }
+  _hideSuggestions() { this._el.suggestions.style.display = "none"; }
+
+  _onKeyDown(ev) {
+    if (ev.key === "ArrowDown" || ev.key === "ArrowUp") {
+      ev.preventDefault();
+      const items = [...this._el.suggestions.querySelectorAll(".end-errno-suggestion")];
+      let idx = items.findIndex(el => el.classList.contains("highlighted"));
+      if (ev.key === "ArrowDown") idx = Math.min(idx + 1, items.length - 1);
+      else idx = Math.max(idx - 1, 0);
+      items.forEach(el => el.classList.remove("highlighted"));
+      if (items[idx]) {
+        items[idx].classList.add("highlighted");
+        items[idx].scrollIntoView({ block: "nearest" });
+      }
+    }
+    if (ev.key === "Enter") {
+      const hl = this._el.suggestions.querySelector(".highlighted");
+      if (hl) {
+        ev.preventDefault();
+        this._selectByCode(parseInt(hl.dataset.code));
+      }
+    }
+    if (ev.key === "Escape") this._hideSuggestions();
+  }
+
+  _selectByCode(code) {
+    this._selectedCode = code;
+    const item = this._errnoItems.find(i => i.code === code);
+    if (item) {
+      this._el.input.value = code + "  " + item.name;
+      this._el.desc.textContent = item.desc;
+      this.dataset.exitError = code !== 0 ? "true" : "";
+    } else {
+      this._el.input.value = code + "  error";
+      this._el.desc.textContent = "unknown error";
+      this.dataset.exitError = "true";
+    }
+    this._hideSuggestions();
+  }
+
+  _enforceZeroEnd() {
+    if (this._selectedCode === 0) return;
+    const others = document.querySelectorAll("wc-end");
+    for (const other of others) {
+      if (other !== this && other._selectedCode === 0) return;
+    }
+    this._selectByCode(0);
+  }
+
+  _hasOtherZero() {
+    const others = document.querySelectorAll("wc-end");
+    for (const other of others) {
+      if (other !== this && other._selectedCode === 0) return true;
+    }
+    return false;
+  }
+
+  delete() {
+    if (this.id === "main-end") { showError("Cannot delete the default end block."); return; }
+    if (!this._hasOtherZero()) { showError("At least one end block must return 0."); return; }
+    super.delete();
+    setTimeout(() => {
+      for (const end of document.querySelectorAll("wc-end")) end._enforceZeroEnd();
+    }, 0);
+  }
+
+  _genStringFrees() {
+    const freed = new Set();
+    let code = "";
+    for (const el of document.querySelectorAll("#variable-area > [data-block]")) {
+      if (el.dataType === "string") {
+        const name = resolveSourceName(el);
+        if (name && !freed.has(name)) {
+          freed.add(name);
+          code += `  free(${name}.data);\n`;
+        }
+      }
+    }
+    return code;
+  }
+
+  generateOwnCode() {
+    const code = this._selectedCode;
+    if (code === 0) {
+      const frees = this._genStringFrees();
+      if (frees) return `\n${frees}  return 0;\n`;
+      return "\n  return 0;\n";
+    }
+    return `\n  exit(${code});\n`;
+  }
+
+  saveData() { return { exitCode: this._selectedCode }; }
+  restoreData(d) {
+    this._selectByCode(d.exitCode !== undefined ? d.exitCode : 0);
+  }
 }
 
+function _buildErrnoItems() {
+  const items = [
+    { code: 0,   name: "success",       desc: "success" },
+    { code: 255, name: "error",         desc: "generic error" },
+  ];
+  for (const e of ERRNO_LIST) {
+    items.push({ code: e.code, name: e.name, desc: e.desc });
+  }
+  return items;
+}
+const _ERRNO_ITEMS = _buildErrnoItems();
+
 
 // ── WCOutput — printf statement ────────────────────────────────────────────
 
+/** Output description block. Provides inline documentation without generating code. */
 class WCOutput extends WCBlock {
   connectedCallback() {
     super.connectedCallback();
@@ -48,6 +220,7 @@ class WCOutput extends WCBlock {
 
 // ── WCDecision — conditional branch ────────────────────────────────────────
 
+/** Conditional branch block; splits flow into yes/no branches and emits if/else C code. */
 class WCDecision extends WCBlock {
   connectedCallback() {
     super.connectedCallback();
@@ -129,6 +302,7 @@ class WCDecision extends WCBlock {
 
 // ── WCAssign — variable assignment block ───────────────────────────────────
 
+/** Variable assignment block; writes to scalar/array/vector/string targets with data hooks. */
 class WCAssign extends WCBlock {
   connectedCallback() {
     super.connectedCallback();
@@ -238,6 +412,7 @@ class WCAssign extends WCBlock {
 
 // ── WCVarRef — read-only variable reference with data output hook ──────────
 
+/** Read-only variable reference with data output hook; syncs type from selected variable. */
 class WCVarRef extends WCBlock {
   connectedCallback() {
     super.connectedCallback();
@@ -271,6 +446,7 @@ class WCVarRef extends WCBlock {
 
 // ── WCExpression — mathematical expression with MathJax rendering & data hooks ──
 
+/** Math expression block with LaTeX rendering via MathJax and dynamic variable data hooks. */
 class WCExpression extends WCBlock {
   get dataType() {
     const el = this._el?.latex || this.querySelector(".expr-latex");
diff --git a/blocks-data.js b/blocks-data.js
index 08ba20d..0788f1b 100644
--- a/blocks-data.js
+++ b/blocks-data.js
@@ -1,7 +1,7 @@
 // ── Data & Measurement tab block definitions ───────────────────────────────
 //
 // Blocks that live in the Data tab (variable area) and Measurements tab:
-//   WCQuantity, WCUnit, WCBoolean, WCScalar, WCString, WCArray
+//   WCQuantity, WCUnit, WCBoolean, WCScalar, WCVector, WCString, WCArray
 //
 // Each extends WCBlock (from wcblock.js) and provides generateOwnCode().
 //
@@ -16,11 +16,12 @@
 
 // ── WCQuantity — measurement quantity definition ───────────────────────────
 
+/** Measurement quantity definition: name, 7 SI base dimensions, min/max range, default unit. */
 class WCQuantity extends WCBlock {
   connectedCallback() {
     super.connectedCallback();
-    this._el.name = this.querySelector(".quantity-name");
-    this._el.dims = Array.from({ length: 7 }, (_, i) => this.querySelector(`.dim-${i}`));
+    this._el.name = this._require(".quantity-name");
+    this._el.dims = Array.from({ length: 7 }, (_, i) => this._require(`.dim-${i}`));
     this._el.min = this.querySelector(".quantity-min");
     this._el.max = this.querySelector(".quantity-max");
     this._el.defaultUnit = this.querySelector(".quantity-default-unit");
@@ -34,9 +35,8 @@ class WCQuantity extends WCBlock {
     }
     for (const sel of this.querySelectorAll("select")) {
       sel.addEventListener("change", () => {
-        for (const d of $id("variable-area").querySelectorAll("wc-scalar")) {
-          d.updateSiDisplay();
-        }
+        const va = $id("variable-area");
+        if (va) for (const d of va.querySelectorAll("wc-scalar")) d.updateSiDisplay();
       });
     }
     setTimeout(() => { refreshQuantityOptions(); refreshDefaultUnitOptions(); }, 0);
@@ -52,25 +52,26 @@ class WCQuantity extends WCBlock {
     };
   }
   restoreData(d) {
-    this.querySelector(".quantity-name").value = d.name || "";
-    for (let i = 0; i < 7; i++) this.querySelector(`.dim-${i}`).value = d.dims ? d.dims[i] : "0";
-    this.querySelector(".quantity-min").value = d.min || "";
-    this.querySelector(".quantity-max").value = d.max || "";
-    this.querySelector(".quantity-default-unit").value = d.defaultUnit || "";
+    this._el.name.value = d.name || "";
+    for (let i = 0; i < 7; i++) { if (this._el.dims[i]) this._el.dims[i].value = d.dims ? d.dims[i] : "0"; }
+    if (this._el.min) this._el.min.value = d.min || "";
+    if (this._el.max) this._el.max.value = d.max || "";
+    if (this._el.defaultUnit) this._el.defaultUnit.value = d.defaultUnit || "";
   }
 }
 
 
 // ── WCUnit — unit of measurement ───────────────────────────────────────────
 
+/** Unit of measurement: name, associated quantity, suffix, SI factor, recursive SI resolution. */
 class WCUnit extends WCBlock {
   connectedCallback() {
     super.connectedCallback();
-    this._el.fullname = this.querySelector(".unit-fullname");
-    this._el.type = this.querySelector(".unit-type");
-    this._el.suffix = this.querySelector(".unit-suffix");
-    this._el.si = this.querySelector(".unit-si");
-    this._el.resolved = this.querySelector(".unit-resolved");
+    this._el.fullname = this._require(".unit-fullname");
+    this._el.type = this._require(".unit-type");
+    this._el.suffix = this._require(".unit-suffix");
+    this._el.si = this._require(".unit-si");
+    this._el.resolved = this._require(".unit-resolved");
 
     for (const inp of this.querySelectorAll("input")) {
       inp.addEventListener("input", () => {
@@ -118,10 +119,10 @@ class WCUnit extends WCBlock {
     };
   }
   restoreData(d) {
-    this.querySelector(".unit-fullname").value = d.fullname || "";
-    this.querySelector(".unit-type").value = d.type || "";
-    this.querySelector(".unit-suffix").value = d.suffix || "";
-    this.querySelector(".unit-si").value = d.si || "1";
+    this._el.fullname.value = d.fullname || "";
+    this._el.type.value = d.type || "";
+    this._el.suffix.value = d.suffix || "";
+    this._el.si.value = d.si || "1";
   }
 
   updateSiDisplay() {
@@ -135,15 +136,14 @@ class WCUnit extends WCBlock {
 
 // ── WCBoolean — boolean variable ───────────────────────────────────────────
 
+/** Boolean variable: name, true/false value, optional comment. Generates C `int`. */
 class WCBoolean extends WCBlock {
-  get dataType() { return "boolean"; }
-
   connectedCallback() {
     super.connectedCallback();
-    this._el.name = this.querySelector(".var-name");
-    this._el.value = this.querySelector(".var-value");
-    this._el.comment = this.querySelector(".var-comment");
-    this._el.cname = this.querySelector(".var-cname");
+    this._el.name = this._require(".var-name");
+    this._el.value = this._require(".var-value");
+    this._el.comment = this._require(".var-comment");
+    this._el.cname = this._require(".var-cname");
     this._el.name.addEventListener("input", () => {
       this._el.cname.textContent = toCName(this._el.name.value);
     });
@@ -151,9 +151,9 @@ class WCBoolean extends WCBlock {
 
   saveData() { return { name: this._el.name.value, value: this._el.value.value, comment: this._el.comment.value }; }
   restoreData(d) {
-    this.querySelector(".var-name").value = d.name || "";
-    this.querySelector(".var-value").value = d.value || "false";
-    this.querySelector(".var-comment").value = d.comment || "";
+    this._el.name.value = d.name || "";
+    this._el.value.value = d.value || "false";
+    this._el.comment.value = d.comment || "";
     this._el.cname.textContent = toCName(this._el.name.value);
   }
 
@@ -169,18 +169,18 @@ class WCBoolean extends WCBlock {
 
 // ── WCScalar — typed scalar variable with quantity, unit, and SI conversion ──
 
+/** Typed scalar variable with quantity, unit, SI conversion, and auto-sync between value and unit. */
 class WCScalar extends WCBlock {
   get dataType() { return "scalar"; }
-
   connectedCallback() {
     super.connectedCallback();
-    this._el.name = this.querySelector(".var-name");
-    this._el.value = this.querySelector(".var-value");
-    this._el.unit = this.querySelector(".var-unit");
-    this._el.type = this.querySelector(".var-type");
-    this._el.si = this.querySelector(".var-si");
-    this._el.comment = this.querySelector(".var-comment");
-    this._el.cname = this.querySelector(".var-cname");
+    this._el.name = this._require(".var-name");
+    this._el.value = this._require(".var-value");
+    this._el.unit = this._require(".var-unit");
+    this._el.type = this._require(".var-type");
+    this._el.si = this._require(".var-si");
+    this._el.comment = this._require(".var-comment");
+    this._el.cname = this._require(".var-cname");
 
     this._el.name.addEventListener("input", () => {
       this._el.cname.textContent = toCName(this._el.name.value);
@@ -265,11 +265,11 @@ class WCScalar extends WCBlock {
     };
   }
   restoreData(d) {
-    this.querySelector(".var-name").value = d.name || "";
-    this.querySelector(".var-value").value = d.value || "";
-    this.querySelector(".var-type").value = d.type || "";
-    this.querySelector(".var-unit").value = d.unit || "";
-    this.querySelector(".var-comment").value = d.comment || "";
+    this._el.name.value = d.name || "";
+    this._el.value.value = d.value || "";
+    this._el.type.value = d.type || "";
+    this._el.unit.value = d.unit || "";
+    this._el.comment.value = d.comment || "";
     this._el.cname.textContent = toCName(this._el.name.value);
   }
 
@@ -285,17 +285,154 @@ class WCScalar extends WCBlock {
 }
 
 
-// ── WCString — string variable ─────────────────────────────────────────────
-
-class WCString extends WCBlock {
-  get dataType() { return "string"; }
+// ── WCVector — N-dimensional vector with quantity, unit, and SI conversion ──
 
+/** N-dimensional vector variable with quantity, unit, SI conversion; generates C array. */
+class WCVector extends WCBlock {
+  get dataType() { return "vector"; }
   connectedCallback() {
     super.connectedCallback();
-    this._el.name = this.querySelector(".var-name");
-    this._el.value = this.querySelector(".var-value");
-    this._el.comment = this.querySelector(".var-comment");
-    this._el.cname = this.querySelector(".var-cname");
+    this._el.name = this._require(".var-name");
+    this._el.dim = this._require(".var-dim");
+    this._el.value = this._require(".var-value");
+    this._el.unit = this._require(".var-unit");
+    this._el.type = this._require(".var-type");
+    this._el.si = this._require(".var-si");
+    this._el.comment = this._require(".var-comment");
+    this._el.cname = this._require(".var-cname");
+
+    this._el.name.addEventListener("input", () => {
+      this._el.cname.textContent = toCName(this._el.name.value);
+    });
+
+    setTimeout(() => {
+      refreshQuantityOptions();
+      refreshUnitOptions();
+      this.updateSiDisplay();
+    }, 0);
+
+    this._el.value.addEventListener("input", () => {
+      this.syncUnitFromValue();
+      this.updateSiDisplay();
+    });
+    this._el.unit.addEventListener("change", () => {
+      this.syncValueFromUnit();
+      this.updateSiDisplay();
+    });
+    this._el.type.addEventListener("change", () => {
+      refreshUnitOptions();
+      this.updateSiDisplay();
+    });
+  }
+
+  getDim() {
+    return parseInt(this._el.dim.value) || 3;
+  }
+
+  parseValue() {
+    const { numVal, unitSuffix } = splitValueAndUnit(this._el.value.value, 0);
+    return { numVal, unitSuffix };
+  }
+
+  siValue() {
+    const { numVal, unitSuffix } = this.parseValue();
+    if (!unitSuffix) return numVal;
+    const quantityName = this._el.type.value;
+    for (const u of $id("data-area").querySelectorAll("wc-unit")) {
+      if (
+        u.querySelector(".unit-type").value === quantityName &&
+        u.querySelector(".unit-suffix").value === unitSuffix
+      ) {
+        return numVal * u.getSiFactor();
+      }
+    }
+    return numVal;
+  }
+
+  syncUnitFromValue() {
+    const { unitSuffix } = this.parseValue();
+    if (unitSuffix && [...this._el.unit.options].some(o => o.value === unitSuffix)) {
+      this._el.unit.value = unitSuffix;
+    }
+  }
+
+  syncValueFromUnit() {
+    const unitSuffix = this._el.unit.value;
+    const vals = this._el.value.value.trim().split(/\s+/);
+    if (unitSuffix && vals.length > 0 && !isNaN(parseFloat(vals[0]))) {
+      const first = parseFloat(vals[0]);
+      if (vals.length <= 2) {
+        this._el.value.value = first + " " + unitSuffix;
+      }
+    }
+  }
+
+  updateSiDisplay() {
+    const typeName = this._el.type.value;
+    const { unitSuffix } = this.parseValue();
+    if (unitSuffix && typeName) {
+      const si = this.siValue();
+      const defaultUnit = getDefaultUnitSuffix(typeName);
+      this._el.si.textContent = defaultUnit
+        ? `= ${si} ${defaultUnit}`
+        : `= ${si} SI`;
+    } else {
+      this._el.si.textContent = "";
+    }
+  }
+
+  saveData() {
+    return {
+      name: this._el.name.value,
+      dim: parseInt(this._el.dim.value) || 3,
+      value: this._el.value.value,
+      type: this._el.type.value,
+      unit: this._el.unit.value,
+      comment: this._el.comment.value
+    };
+  }
+  restoreData(d) {
+    this._el.name.value = d.name || "";
+    this._el.dim.value = d.dim || 3;
+    this._el.value.value = d.value || "";
+    this._el.type.value = d.type || "";
+    this._el.unit.value = d.unit || "";
+    this._el.comment.value = d.comment || "";
+    this._el.cname.textContent = toCName(this._el.name.value);
+  }
+
+  generateOwnCode() {
+    const name = toCName(this._el.name.value) || "v";
+    const typeName = this._el.type.value;
+    const dim = this.getDim();
+    const prefix = commentPrefix(this._el.name.value, this._el.comment.value);
+    const baseType = typeName || "double";
+    const raw = this._el.value.value.trim();
+    if (raw) {
+      const parts = raw.split(/\s+/).filter(s => s);
+      const siFactor = this.parseValue().unitSuffix ? this.siValue() / this.parseValue().numVal : 1;
+      const siParts = parts.map(p => {
+        const n = parseFloat(p);
+        return isNaN(n) ? 0 : n * siFactor;
+      });
+      return `${prefix}${baseType} ${name}[${dim}] = {${siParts.join(", ")}};\n`;
+    }
+    return `${prefix}${baseType} ${name}[${dim}];\n`;
+  }
+}
+
+
+// ── WCString — string variable ─────────────────────────────────────────────
+
+/** String variable: name, value. Generates C `string` struct with malloc/memcpy. */
+class WCString extends WCBlock {
+  get dataType() { return "string"; }
+  connectedCallback() {
+    super.connectedCallback();
+    this._el.name = this._require(".var-name");
+    this._el.value = this._require(".var-value");
+    this._el.comment = this._require(".var-comment");
+    this._el.cname = this._require(".var-cname");
     this._el.name.addEventListener("input", () => {
       this._el.cname.textContent = toCName(this._el.name.value);
     });
@@ -303,9 +440,9 @@ class WCString extends WCBlock {
 
   saveData() { return { name: this._el.name.value, value: this._el.value.value, comment: this._el.comment.value }; }
   restoreData(d) {
-    this.querySelector(".var-name").value = d.name || "";
-    this.querySelector(".var-value").value = d.value || "";
-    this.querySelector(".var-comment").value = d.comment || "";
+    this._el.name.value = d.name || "";
+    this._el.value.value = d.value || "";
+    this._el.comment.value = d.comment || "";
     this._el.cname.textContent = toCName(this._el.name.value);
   }
 
@@ -322,27 +459,26 @@ class WCString extends WCBlock {
 
 // ── WCArray — typed C array variable ───────────────────────────────────────
 
+/** Typed C array variable with dynamic element list and optional vector dimension. */
 class WCArray extends WCBlock {
   get dataType() { return "array"; }
-
-  constructor() {
-    super();
-    this._values = [];
-  }
-
   connectedCallback() {
     super.connectedCallback();
-    this._el.name = this.querySelector(".var-name");
-    this._el.type = this.querySelector(".array-type");
-    this._el.elements = this.querySelector(".array-elements");
-    this._el.count = this.querySelector(".array-count");
-    this._el.comment = this.querySelector(".var-comment");
-    this._el.cname = this.querySelector(".var-cname");
+    this._el.name = this._require(".var-name");
+    this._el.type = this._require(".array-type");
+    this._el.elements = this._require(".array-elements");
+    this._el.count = this._require(".array-count");
+    this._el.comment = this._require(".var-comment");
+    this._el.cname = this._require(".var-cname");
+    this._el.vecDim = this.querySelector(".array-vec-dim");
 
     this._el.name.addEventListener("input", () => {
       this._el.cname.textContent = toCName(this._el.name.value);
       refreshVarRefOptions();
     });
+    if (this._el.vecDim) {
+      this._el.vecDim.addEventListener("input", () => this._updateCount());
+    }
     setTimeout(() => this._renderElements(), 0);
   }
 
@@ -441,17 +577,37 @@ class WCArray extends WCBlock {
 
   _addElement(value) {
     this._values.push(value);
-    this._renderElements();
+    const row = this._makeElementRow(this._values.length - 1);
+    this._el.elements.insertBefore(row, this._el.elements.lastChild);
+    const newRow = this._el.elements.lastChild;
+    newRow.querySelector(".array-element-idx").textContent = this._values.length;
+    this._updateCount();
   }
 
   _removeElement(idx) {
     this._values.splice(idx, 1);
-    this._renderElements();
+    const row = this._el.elements.querySelector(`[data-idx="${idx}"]`);
+    if (row) row.remove();
+    const rows = this._el.elements.children;
+    for (let i = 0; i < rows.length - 1; i++) {
+      rows[i].dataset.idx = i;
+      rows[i].querySelector(".array-element-idx").textContent = i;
+    }
+    this._updateCount();
   }
 
   _updateCount() {
     const n = this._values.length;
-    this._el.count.textContent = n + " element" + (n === 1 ? "" : "s");
+    const dim = this.getVecDim();
+    if (dim > 1) {
+      this._el.count.textContent = n + " element" + (n === 1 ? "" : "s") + " (\u00D7" + dim + " = " + (n * dim) + ")";
+    } else {
+      this._el.count.textContent = n + " element" + (n === 1 ? "" : "s");
+    }
+  }
+
+  getVecDim() {
+    return this._el.vecDim ? (parseInt(this._el.vecDim.value) || 1) : 1;
   }
 
   saveData() {
@@ -459,7 +615,8 @@ class WCArray extends WCBlock {
       name: this._el.name.value,
       type: this._el.type.value,
       values: [...this._values],
-      comment: this._el.comment.value
+      comment: this._el.comment.value,
+      vecDim: this.getVecDim()
     };
   }
   restoreData(d) {
@@ -467,6 +624,7 @@ class WCArray extends WCBlock {
     this._el.type.value = d.type || "float";
     this._el.comment.value = d.comment || "";
     this._el.cname.textContent = toCName(this._el.name.value);
+    if (this._el.vecDim) this._el.vecDim.value = d.vecDim || 1;
     if (Array.isArray(d.values)) {
       this._values = [...d.values];
     } else if (typeof d.values === "string" && d.values) {
@@ -480,11 +638,14 @@ class WCArray extends WCBlock {
   generateOwnCode() {
     const name = toCName(this._el.name.value) || "arr";
     const type = this._el.type.value || "float";
+    const dim = this.getVecDim();
+    const count = this._values.length || 1;
+    const totalSize = dim > 1 ? dim + "*" + count : count;
     const elements = this._values.filter(s => s).join(", ");
     const prefix = commentPrefix(this._el.name.value, this._el.comment.value);
-    if (elements) {
-      return `${prefix}${type} ${name}[] = {${elements}};\n`;
+    if (elements && dim <= 1) {
+      return `${prefix}${type} ${name}[${totalSize}] = {${elements}};\n`;
     }
-    return `${prefix}${type} ${name}[1];\n`;
+    return `${prefix}${type} ${name}[${totalSize}];\n`;
   }
 }
diff --git a/blocks-proc.js b/blocks-proc.js
index 299b36e..8128482 100644
--- a/blocks-proc.js
+++ b/blocks-proc.js
@@ -8,46 +8,71 @@
 //
 // Load order dependencies:
 //   wcblock.js  → WCBlock base class
-//   helpers.js  → refreshProcOptions, findDataSource, resolveSourceName
+//   helpers.js  → findDataSource, resolveSourceName, escapeString, toCName, commentPrefix
 //   dom.js      → $id
 //   draw.js     → deleteLink
 
 
+/** @type {Object<string,string>} Maps library IDs to icon image paths for procedure call blocks. */
+const LIB_ICONS = {
+  stdio: "lib-icons/c.svg",
+  stdlib: "lib-icons/c.svg",
+  string: "lib-icons/c.svg",
+  math: "lib-icons/c.svg",
+};
+
 // ── WCProcedure — procedure definition ─────────────────────────────────────
 
+/** Procedure definition block with inputs/outputs/description/return-style. Lives in the Procedures tab. */
 class WCProcedure extends WCBlock {
   connectedCallback() {
     super.connectedCallback();
-    this._el.name = this.querySelector(".proc-name");
-    this._el.inputs = this.querySelector(".proc-inputs");
-    this._el.outputs = this.querySelector(".proc-outputs");
+    this._el.naturalName = this._require(".proc-natural-name");
+    this._el.techName = this._require(".proc-tech-name");
+    this._el.inputs = this._require(".proc-inputs");
+    this._el.outputs = this._require(".proc-outputs");
+    this._el.description = this.querySelector(".proc-description");
+    this._el.descBody = this.querySelector(".proc-desc-body");
 
-    this.querySelector(".proc-add-input").addEventListener("click", () => {
+    this._require(".proc-add-input").addEventListener("click", () => {
+      if (this.dataset.readonly) return;
       this._addParamRow(this._el.inputs, "in");
     });
-    this.querySelector(".proc-add-output").addEventListener("click", () => {
+    this._require(".proc-add-output").addEventListener("click", () => {
+      if (this.dataset.readonly) return;
       this._addParamRow(this._el.outputs, "out");
     });
 
-    this._el.name.addEventListener("input", () => refreshProcOptions());
+    this._el.naturalName.addEventListener("input", () => {
+      if (!this.dataset.readonly) {
+        this._el.techName.textContent = toCName(this._el.naturalName.value) || "proc";
+      }
+    });
+
+    this._el.returnStyle = this.querySelector(".proc-return-style");
+    if (this._el.returnStyle) {
+      this.dataset.returnStyle = this._el.returnStyle.value;
+      this._el.returnStyle.addEventListener("change", () => {
+        if (this.dataset.readonly) return;
+        this.dataset.returnStyle = this._el.returnStyle.value;
+      });
+    }
   }
 
   _addParamRow(container, dir) {
     const row = document.createElement("div");
     row.className = "proc-param-row";
+    const readonly = this.dataset.readonly;
     row.innerHTML =
-      `<input class="proc-param-name" placeholder="name" value="">` +
-      `<input class="proc-param-type" placeholder="type" value="scalar">` +
-      `<button class="proc-param-del" title="remove">&times;</button>`;
-    row.querySelector(".proc-param-del").addEventListener("click", () => {
-      row.remove();
-      refreshProcOptions();
-    });
-    for (const inp of row.querySelectorAll("input")) {
-      inp.addEventListener("input", () => refreshProcOptions());
+      `<input class="proc-param-name" placeholder="name" value=""${readonly ? " readonly" : ""}>` +
+      `<input class="proc-param-type" placeholder="type" value="scalar"${readonly ? " readonly" : ""}>` +
+      (readonly ? "" : `<button class="proc-param-del" title="remove">&times;</button>`);
+    if (!readonly) {
+      row.querySelector(".proc-param-del").addEventListener("click", () => {
+        row.remove();
+      });
     }
     container.appendChild(row);
-    refreshProcOptions();
   }
 
   getLibrary() {
@@ -56,7 +81,7 @@ class WCProcedure extends WCBlock {
   }
 
   getQualifiedName() {
-    return this.getLibrary() + "/" + (this._el.name.value || "unnamed");
+    return this.getLibrary() + "/" + (this._el.techName.textContent || "unnamed");
   }
 
   getInputParams() {
@@ -77,13 +102,28 @@ class WCProcedure extends WCBlock {
   saveData() {
     return {
       library: this.getLibrary(),
-      name: this._el.name.value,
+      naturalName: this._el.naturalName.value,
+      name: this._el.techName.textContent,
       inputs: this.getInputParams(),
-      outputs: this.getOutputParams()
+      outputs: this.getOutputParams(),
+      returnStyle: this._el.returnStyle ? this._el.returnStyle.value : (this.dataset.returnStyle || "pointer"),
+      readonly: !!this.dataset.readonly,
+      formatString: this.dataset.formatString !== undefined,
+      description: this._el.descBody ? this._el.descBody.textContent : "",
+      descOpen: this._el.description ? this._el.description.open : false
     };
   }
   restoreData(d) {
-    this._el.name.value = d.name || "proc";
+    this._el.naturalName.value = d.naturalName || "";
+    this._el.techName.textContent = d.name || "proc";
+    if (d.readonly) this.dataset.readonly = "true";
+    if (d.formatString) this.dataset.formatString = "true";
+    if (d.returnStyle) {
+      this.dataset.returnStyle = d.returnStyle;
+      if (this._el.returnStyle) this._el.returnStyle.value = d.returnStyle;
+    }
+    if (this._el.descBody && d.description) this._el.descBody.textContent = d.description;
+    if (this._el.description && d.descOpen) this._el.description.open = true;
     for (const p of (d.inputs || [])) {
       this._addParamRow(this._el.inputs, "in");
       const rows = this._el.inputs.querySelectorAll(".proc-param-row");
@@ -106,20 +146,91 @@ class WCProcedure extends WCBlock {
 
 // ── WCProcCall — procedure call block ──────────────────────────────────────
 
+/** @type {RegExp} Matches C printf-format specifiers, capturing the type character. */
+const _FMT_SPEC_RE = /%(?:[+\- #0]*\d*(?:\.\d+)?)([diufFeEgGxXoscpaAn%])/g;
+
+/**
+ * Maps a printf format specifier character to a C data type.
+ * @param {string} spec Single format character (e.g. "d", "f", "s")
+ * @returns {string} "int", "double", or "string"
+ */
+function _specDataType(spec) {
+  if ("di".includes(spec))   return "int";
+  if ("u".includes(spec))    return "int";
+  if ("fFeEgGaA".includes(spec)) return "double";
+  if ("s".includes(spec))    return "string";
+  return "int";
+}
+
+/** Procedure call block with dynamic argument fields, format-string support, and error-handling hooks. Lives in the Algorithm tab. */
 class WCProcCall extends WCBlock {
   connectedCallback() {
     super.connectedCallback();
-    this._el.select = this.querySelector(".proccall-select");
-    this._el.nameInput = this.querySelector(".proccall-name");
-    this._el.inputs = this.querySelector(".proccall-inputs");
-    this._el.outputs = this.querySelector(".proccall-outputs");
+    this._selectedProc = "";
+    this._fmtProc = null;
+    this._fmtInput = null;
+    this._fmtObserver = null;
+    this._el.icon = this._require(".proccall-icon");
+    this._el.natName = this._require(".proccall-nat-name");
+    this._el.techName = this._require(".proccall-tech-name");
+    this._el.changeBtn = this._require(".proccall-change-btn");
+    this._el.nameInput = this._require(".proccall-name");
+    this._el.nameRow = this._require(".proccall-name-row");
+    this._el.inputs = this._require(".proccall-inputs");
+    this._el.outputs = this._require(".proccall-outputs");
+    this._el.errHook = this.querySelector(".proccall-error-hook");
+    this._el.fmtargs = this._require(".proccall-fmtargs");
+    this._el.fmtargsList = this._require(".proccall-fmtargs-list");
+    this._el.addFmtArgBtn = this._require(".proccall-add-fmtarg");
+    this._el.addFmtArgBtn.addEventListener("click", () => this._addFormatArg());
 
-    this._el.select.addEventListener("change", () => this._rebuildParams());
+    const openBrowser = () => {
+      const current = this._selectedProc;
+      showProcedureBrowser(current, (qname) => {
+        if (qname) this.setProcedure(qname);
+      });
+    };
+
+    this._el.natName.addEventListener("click", openBrowser);
+    this._el.changeBtn.addEventListener("click", openBrowser);
     this._initTimer = setTimeout(() => this._rebuildParams(), 0);
   }
 
+  setProcedure(qname) {
+    this._selectedProc = qname || "";
+    const libName = qname ? qname.split("/")[0] : "";
+    if (this._el.natName) {
+      if (qname) {
+        let natName = qname.split("/")[1] || qname;
+        let techName = qname.split("/")[1] || qname;
+        for (const proc of document.querySelectorAll("wc-procedure")) {
+          if (proc.getQualifiedName() === qname) {
+            const nat = proc.querySelector(".proc-natural-name");
+            if (nat && nat.value) natName = nat.value;
+            techName = (proc.querySelector(".proc-tech-name") || {}).textContent || techName;
+            break;
+          }
+        }
+        this._el.natName.textContent = natName;
+        this._el.natName.title = qname;
+        this._el.techName.textContent = techName;
+        this._el.techName.title = qname;
+        this._el.icon.src = LIB_ICONS[libName] || "";
+        this._el.icon.alt = libName;
+      } else {
+        this._el.natName.textContent = "(select procedure)";
+        this._el.natName.title = "";
+        this._el.techName.textContent = "";
+        this._el.techName.title = "";
+        this._el.icon.src = "";
+        this._el.icon.alt = "";
+      }
+    }
+    this._rebuildParams();
+  }
+
   _rebuildParams() {
-    const qname = this._el.select.dataset.restoredValue || this._el.select.value;
+    const qname = this._selectedProc;
 
     for (const container of [this._el.inputs, this._el.outputs]) {
       for (const hook of container.querySelectorAll(".hook")) {
@@ -134,19 +245,173 @@ class WCProcCall extends WCBlock {
     this._el.inputs.innerHTML = "";
     this._el.outputs.innerHTML = "";
 
-    if (!qname) return;
-
-    for (const proc of document.querySelectorAll("wc-procedure")) {
-      if (proc.getQualifiedName() === qname) {
-        for (const p of proc.getInputParams()) {
-          this._createArgField(this._el.inputs, p, "in");
+    let returnStyle = "pointer";
+    if (qname) {
+      for (const proc of document.querySelectorAll("wc-procedure")) {
+        if (proc.getQualifiedName() === qname) {
+          returnStyle = proc.dataset.returnStyle || "pointer";
+          this._cachedReturnStyle = returnStyle;
+          for (const p of proc.getInputParams()) {
+            this._createArgField(this._el.inputs, p, "in");
+          }
+          if (returnStyle !== "error") {
+            for (const p of proc.getOutputParams()) {
+              this._createArgField(this._el.outputs, p, "out");
+            }
+          }
+          break;
         }
-        for (const p of proc.getOutputParams()) {
-          this._createArgField(this._el.outputs, p, "out");
-        }
-        break;
       }
     }
+
+    this._setupFormatStringArgs();
+
+    const isError = returnStyle === "error";
+    const hasReturnValue = returnStyle === "error" || returnStyle === "value";
+    if (this._el.errHook) {
+      this._el.errHook.classList.toggle("visible", hasReturnValue);
+    }
+    if (this._el.nameRow) {
+      this._el.nameRow.style.display = isError ? "none" : "";
+    }
+  }
+
+  _setupFormatStringArgs() {
+    const qname = this._selectedProc;
+    let fmtProc = null;
+    if (qname) {
+      for (const proc of document.querySelectorAll("wc-procedure")) {
+        if (proc.getQualifiedName() === qname && proc.dataset.formatString !== undefined) {
+          fmtProc = proc;
+          break;
+        }
+      }
+    }
+    this._fmtProc = fmtProc;
+
+    if (this._fmtObserver) { this._fmtObserver.disconnect(); this._fmtObserver = null; }
+
+    if (!fmtProc) {
+      this._el.fmtargs.style.display = "none";
+      this._el.addFmtArgBtn.style.display = "none";
+      this._el.fmtargsList.innerHTML = "";
+      return;
+    }
+
+    this._el.fmtargs.style.display = "";
+    this._fmtInput = this._el.inputs.querySelector(".proccall-arg-input");
+
+    if (this._fmtInput) {
+      this._fmtInput.addEventListener("input", () => this._rebuildFormatArgs());
+    }
+
+    this._fmtObserver = new MutationObserver(() => {
+      if (this._isFmtDynamic()) this._ensureFmtUnconnected();
+    });
+    this._fmtObserver.observe(this._el.fmtargsList, { attributes: true, attributeFilter: ["data-connected"], subtree: true });
+
+    this._rebuildFormatArgs();
+  }
+
+  _isFmtDynamic() {
+    if (!this._fmtInput) return false;
+    const hook = this._fmtInput.parentElement.querySelector(".hook");
+    return hook ? findDataSource(hook) !== null : false;
+  }
+
+  _rebuildFormatArgs() {
+    this._el.fmtargsList.innerHTML = "";
+    const dynamic = this._isFmtDynamic();
+    this._el.addFmtArgBtn.style.display = dynamic ? "" : "none";
+
+    if (dynamic) {
+      this._ensureFmtUnconnected();
+      return;
+    }
+
+    const fmt = this._fmtInput ? this._fmtInput.value : "";
+    const specs = this._parseFormatSpecifiers(fmt);
+    for (let i = 0; i < specs.length; i++) {
+      this._createFormatArg(specs[i], i);
+    }
+  }
+
+  _parseFormatSpecifiers(fmt) {
+    const specs = [];
+    let m;
+    _FMT_SPEC_RE.lastIndex = 0;
+    while ((m = _FMT_SPEC_RE.exec(fmt)) !== null) {
+      if (m[1] === "%") continue;
+      specs.push({ full: m[0], spec: m[1] });
+    }
+    return specs;
+  }
+
+  _createFormatArg(spec, index) {
+    const row = document.createElement("div");
+    row.className = "proccall-arg-row";
+
+    const hook = document.createElement("button");
+    hook.className = "hook";
+    hook.dataset.direction = "in";
+    hook.dataset.linkType = "data";
+    hook.dataset.type = _specDataType(spec.spec);
+    hook.dataset.exit = "left";
+    hook.title = `expects ${_specDataType(spec.spec)}`;
+
+    const label = document.createElement("span");
+    label.className = "proccall-arg-label";
+    label.textContent = `arg${index + 1}:`;
+
+    const input = document.createElement("input");
+    input.className = "proccall-arg-input";
+    input.dataset.dir = "in";
+    input.dataset.paramName = `fmtArg${index}`;
+    input.placeholder = spec.full;
+
+    row.appendChild(hook);
+    row.appendChild(label);
+    row.appendChild(input);
+    this._el.fmtargsList.appendChild(row);
+    this._setupHook(hook);
+  }
+
+  _addFormatArg() {
+    const idx = this._el.fmtargsList.querySelectorAll(".proccall-arg-row").length;
+    const row = document.createElement("div");
+    row.className = "proccall-arg-row";
+
+    const hook = document.createElement("button");
+    hook.className = "hook";
+    hook.dataset.direction = "in";
+    hook.dataset.linkType = "data";
+    hook.dataset.type = "scalar";
+    hook.dataset.exit = "left";
+    hook.title = "expects scalar";
+
+    const label = document.createElement("span");
+    label.className = "proccall-arg-label";
+    label.textContent = `arg${idx + 1}:`;
+
+    const input = document.createElement("input");
+    input.className = "proccall-arg-input";
+    input.dataset.dir = "in";
+    input.dataset.paramName = `fmtArg${idx}`;
+    input.placeholder = `arg${idx + 1}`;
+
+    row.appendChild(hook);
+    row.appendChild(label);
+    row.appendChild(input);
+    this._el.fmtargsList.appendChild(row);
+    this._setupHook(hook);
+    this._ensureFmtUnconnected();
+  }
+
+  _ensureFmtUnconnected() {
+    if (!this._isFmtDynamic()) return;
+    const hooks = this._el.fmtargsList.querySelectorAll(".hook");
+    const hasFree = [...hooks].some(h => !h.dataset.connected);
+    if (!hasFree) this._addFormatArg();
   }
 
   _createArgField(container, param, dir) {
@@ -192,24 +457,92 @@ class WCProcCall extends WCBlock {
     return block.dataType === "string" ? name + ".data" : name;
   }
 
+  generateCode(visited = new Set()) {
+    if (visited.has(this)) return "";
+    visited.add(this);
+    const own = this.generateOwnCode();
+    if (this._el.errHook && this._el.errHook.classList.contains("visible") &&
+        Array.from(this.wcNextFlow).some(p => p.fromHook === this._el.errHook)) {
+      return own;
+    }
+    return own + this.generateNextCode(visited);
+  }
+
   generateOwnCode() {
-    const qname = this._el.select.value;
+    const qname = this._selectedProc;
     if (!qname) return "";
     const parts = qname.split("/");
     const procName = parts[1] || qname;
 
+    let returnStyle = this._cachedReturnStyle || "pointer";
+
     const inputs = [];
     const outputs = [];
     for (const row of this._el.inputs.querySelectorAll(".proccall-arg-row")) {
       const hook = row.querySelector(".hook");
       const inp = row.querySelector(".proccall-arg-input");
       const source = hook ? findDataSource(hook) : null;
-      inputs.push(source ? this._sourceName(source) : (inp.value || inp.placeholder));
+      if (source) {
+        inputs.push(this._sourceName(source));
+      } else {
+        let val = inp.value || inp.placeholder;
+        if (inp.dataset.paramType === "string") val = `"${escapeString(val)}"`;
+        inputs.push(val);
+      }
     }
     for (const row of this._el.outputs.querySelectorAll(".proccall-arg-row")) {
       const inp = row.querySelector(".proccall-arg-input");
       outputs.push("&" + (inp.value || inp.placeholder));
     }
+    if (this._fmtProc) {
+      for (const row of this._el.fmtargsList.querySelectorAll(".proccall-arg-row")) {
+        const hook = row.querySelector(".hook");
+        const inp = row.querySelector(".proccall-arg-input");
+        const source = hook ? findDataSource(hook) : null;
+        if (source) {
+          inputs.push(this._sourceName(source));
+        } else {
+          let val = inp.value || inp.placeholder;
+          if (hook.dataset.type === "string") val = `"${escapeString(val)}"`;
+          inputs.push(val);
+        }
+      }
+    }
+
+    const errPaths = this._el.errHook && this._el.errHook.classList.contains("visible")
+      ? Array.from(this.wcNextFlow).filter(p => p.fromHook === this._el.errHook)
+      : [];
+    const hasErrPath = errPaths.length > 0;
+
+    if (returnStyle === "error") {
+      const call = `${procName}(${inputs.join(", ")})`;
+      if (hasErrPath) {
+        const errCode = errPaths[0].toElement.generateCode(new Set());
+        let okCode = "";
+        for (const p of this.wcNextFlow) {
+          if (p.fromHook !== this._el.errHook) {
+            okCode += p.toElement.generateCode(new Set());
+          }
+        }
+        return `\nif (${call} != 0) {\n${errCode}} else {\n${okCode}}\n`;
+      }
+      return `\n${call};\n`;
+    }
+
+    if (returnStyle === "value" && outputs.length === 1) {
+      const outVar = outputs[0].replace(/^&/, "");
+      if (hasErrPath) {
+        const errCode = errPaths[0].toElement.generateCode(new Set());
+        let okCode = "";
+        for (const p of this.wcNextFlow) {
+          if (p.fromHook !== this._el.errHook) {
+            okCode += p.toElement.generateCode(new Set());
+          }
+        }
+        return `\nif ((${outVar} = ${procName}(${inputs.join(", ")})) != 0) {\n${errCode}} else {\n${okCode}}\n`;
+      }
+      return `\n${procName}(${inputs.join(", ")});\n`;
+    }
     const args = [...inputs, ...outputs].join(", ");
     return `\n${procName}(${args});\n`;
   }
@@ -219,19 +552,27 @@ class WCProcCall extends WCBlock {
     for (const inp of this.querySelectorAll(".proccall-arg-input")) {
       args[inp.dataset.dir + ":" + inp.dataset.paramName] = inp.value;
     }
-    return { selected: this._el.select.value, name: this._el.nameInput.value, args };
+    return { selected: this._selectedProc, name: this._el.nameInput.value, args };
   }
   restoreData(d) {
     if (this._initTimer) { clearTimeout(this._initTimer); this._initTimer = null; }
-    this._el.select.dataset.restoredValue = d.selected || "";
-    this._el.select.value = d.selected || "";
+    this.setProcedure(d.selected || "");
     this._el.nameInput.value = d.name || "";
-    this._rebuildParams();
     if (d.args) {
       for (const inp of this.querySelectorAll(".proccall-arg-input")) {
         const key = inp.dataset.dir + ":" + inp.dataset.paramName;
         if (d.args[key] !== undefined) inp.value = d.args[key];
       }
     }
+    if (this._fmtProc && d.args) {
+      this._rebuildFormatArgs();
+      for (const inp of this.querySelectorAll(".proccall-arg-input")) {
+        const key = inp.dataset.dir + ":" + inp.dataset.paramName;
+        if (key.startsWith("in:fmtArg") && d.args[key] !== undefined) {
+          inp.value = d.args[key];
+        }
+      }
+    }
   }
 }
+ 
\ No newline at end of file
diff --git a/docs/API.md b/docs/API.md
new file mode 100644
index 0000000..68ecbff
--- /dev/null
+++ b/docs/API.md
@@ -0,0 +1,1132 @@
+# API Reference
+
+Generated from JSDoc annotations in 16 source files.
+
+
+---
+## dom.js
+
+### <a name="const-svgNamespace"></a>`const` svgNamespace  
+*Line 19*
+
+SVG namespace URI, required when creating SVG elements via JS.
+
+### <a name="const-STORAGE_KEY"></a>`const` STORAGE_KEY  
+*Line 22*
+
+localStorage key for workspace persistence (save/load/new).
+
+
+---
+## helpers.js
+
+### <a name="function-splitValueAndUnit"></a>`function` splitValueAndUnit  
+*Line 29*
+
+Parses a string like "5 km" into a numeric value and an optional unit suffix.
+Falls back to parsing the entire string as a bare number when no suffix is present.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `str` | `string` | - e.g. "5 km", "42", "" |
+| `defaultNum` | `number` | - fallback when parseFloat yields NaN |
+
+**Returns:** `{ numVal: number, unitSuffix: string|null ` — }
+
+### <a name="function-rebuildSelect"></a>`function` rebuildSelect  
+*Line 50*
+
+Replaces all options in a <select>, preserving the current selection if it still exists.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `sel` | `HTMLSelectElement` | - the select element to rebuild |
+| `placeholder` | `string` | - text for the first (empty-value) option |
+| `values` | `string[]` | - option value/label pairs to add |
+| `current` | `string` | - currently selected value to attempt to preserve |
+
+### <a name="function-refreshQuantityOptions"></a>`function` refreshQuantityOptions  
+*Line 69*
+
+Refreshes every quantity-name dropdown (.var-type, .unit-type) by scanning
+all wc-quantity blocks in the data area.
+
+### <a name="function-refreshUnitOptions"></a>`function` refreshUnitOptions  
+*Line 92*
+
+Refreshes the unit-suffix dropdown on every datum block to show only units
+that match the datum's currently selected quantity.
+
+### <a name="function-getDefaultUnitSuffix"></a>`function` getDefaultUnitSuffix  
+*Line 124*
+
+Looks up the default unit suffix for a given quantity name.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `quantityName` | `string` |  |
+
+**Returns:** `string` — default unit suffix, or "" if not found
+
+### <a name="function-refreshDefaultUnitOptions"></a>`function` refreshDefaultUnitOptions  
+*Line 141*
+
+Refreshes the default-unit dropdown on every quantity block with suffixes
+of matching unit blocks.
+
+### <a name="function-refreshVarRefOptions"></a>`function` refreshVarRefOptions  
+*Line 171*
+
+Refreshes the variable-select dropdown on every wc-varref block in the
+algorithm pane. Scans all boolean, scalar, string, and array blocks.
+
+### <a name="function-switchLibTab"></a>`function` switchLibTab  
+*Line 204*
+
+Activates the clicked library sub-tab and shows its corresponding pane.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `name` | `string` | - library name (matches data-lib-name attribute) |
+
+### <a name="const-_dataSourceCache"></a>`const` _dataSourceCache  
+*Line 214*
+
+Type: `WeakMap<HTMLElement,HTMLElement>` Cache mapping data hooks to their source blocks.
+
+### <a name="function-findDataSource"></a>`function` findDataSource  
+*Line 222*
+
+Finds the block connected to a given data hook via any .flow-data path.
+Results are cached in _dataSourceCache.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `hook` | `HTMLElement` | - the data hook button element |
+
+**Returns:** `HTMLElement|null` — the source block, or null if nothing is connected
+
+### <a name="function-copyCode"></a>`function` copyCode  
+*Line 234*
+
+Copies the generated C code text to the clipboard.
+
+### <a name="function-escapeString"></a>`function` escapeString  
+*Line 245*
+
+Escapes special characters for embedding in a C string literal.
+Handles backslash, double-quote, newline, carriage return, and tab.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `str` | `string` | - raw string |
+
+**Returns:** `string` — escaped string safe for C "..." literals
+
+### <a name="const-C_KEYWORDS"></a>`const` C_KEYWORDS  
+*Line 253*
+
+Type: `Set<string>` C reserved keywords — toCName appends "_" to avoid clashes.
+
+### <a name="function-toCName"></a>`function` toCName  
+*Line 268*
+
+Converts a natural-language name into a valid C identifier.
+Lowercases, replaces non-alphanumeric chars with underscores,
+collapses runs of underscores, strips leading/trailing underscores,
+and prepends an underscore if the result starts with a digit.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `str` | `string` | - natural name like "My Variable 2" |
+
+**Returns:** `string` — valid C identifier like "my_variable_2"
+
+### <a name="function-deriveNaturalName"></a>`function` deriveNaturalName  
+*Line 284*
+
+Derives a human-readable natural name from a C function/tech name.
+Converts camelCase and snake_case to words, strips common prefixes.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `techName` | `string` | - e.g. "SDL_CreateWindow", "glfwInit", "puts" |
+
+**Returns:** `string` — e.g. "Create Window", "Init GLFW", "Puts"
+
+### <a name="function-commentPrefix"></a>`function` commentPrefix  
+*Line 316*
+
+Builds a C comment prefix from a variable's natural name and an optional comment.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `naturalName` | `string` | - the human-readable variable name |
+| `comment` | `string` | - the optional comment text |
+
+**Returns:** `string` — e.g. "// My Flag: indicates status\n" or "" when no comment
+
+### <a name="function-resolveSourceName"></a>`function` resolveSourceName  
+*Line 330*
+
+Resolves the ultimate C variable name from a block by checking for
+.var-name, .expr-name, and following .varref-select chains.
+Returns the empty string when nothing is found.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `block` | `HTMLElement` | - any block that may hold a variable reference |
+| `[visited]` | `Set` | - cycle detection set (internal use) |
+
+**Returns:** `string` — the C name, or ""
+
+### <a name="function-refreshBlockWarnings"></a>`function` refreshBlockWarnings  
+*Line 349*
+
+Check every algorithm block and flag those without an incoming logic connection.
+
+### <a name="function-refreshAll"></a>`function` refreshAll  
+*Line 356*
+
+Runs all refresh passes in dependency order.
+
+
+---
+## error.js
+
+### <a name="function-showError"></a>`function` showError  
+*Line 12*
+
+Shows the error modal with the given message.
+The overlay is absolutely positioned and blocks all interaction until dismissed.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `msg` | `string` | - message to display inside the error box |
+
+### <a name="function-closeError"></a>`function` closeError  
+*Line 25*
+
+Hides the error modal. Triggered by clicking the &times; button,
+the overlay backdrop, or called programmatically.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `[ev]` | `MouseEvent` | - event to check target matching |
+
+
+---
+## errno-data.js
+
+### <a name="const-ERRNO_LIST"></a>`const` ERRNO_LIST  
+*Line 6*
+
+Type: `Array<{code:number, name:string, desc:string` >}
+
+
+---
+## draw.js
+
+### <a name="const-EXT"></a>`const` EXT  
+*Line 12*
+
+Type: `number` Pixels the path extends from a hook in its exit direction.
+
+### <a name="function-routeBetween"></a>`function` routeBetween  
+*Line 31*
+
+Routes a 45°-constrained polyline between two points.
+Returns the SVG path data (everything after the initial "M") as a string
+suitable for appending to an existing moveto.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `x1` | `number` | - start x |
+| `y1` | `number` | - start y |
+| `x2` | `number` | - end x |
+| `y2` | `number` | - end y |
+
+**Returns:** `string` — SVG path data segment (e.g. "L 100 50 L 150 50")
+
+### <a name="function-resolveHook"></a>`function` resolveHook  
+*Line 72*
+
+Resolves a hook DOM element, preferring the explicitly stored reference
+and falling back to the block's first .hook child.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `path` | `SVGPathElement` |  |
+| `which` | `string` | - "from" or "to" |
+
+**Returns:** `HTMLElement` — the hook button
+
+### <a name="function-getHookExit"></a>`function` getHookExit  
+*Line 88*
+
+Computes the extended control point for a hook: the hook centre pushed
+`EXT` pixels in the hook's declared exit direction.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `hook` | `HTMLElement` | - the hook button element |
+| `svgRect` | `DOMRect` | - bounding rect of the SVG viewport |
+
+**Returns:** `{ x: number, y: number ` — }
+
+### <a name="function-drawpath"></a>`function` drawpath  
+*Line 109*
+
+Draws (or redraws) an SVG connection path between two linked block hooks.
+Each segment starts by extending EXT pixels in the source hook's exit
+direction and ends by approaching from the target hook's exit direction.
+The middle portion uses 45°-constrained routing.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `path` | `SVGPathElement` | - path element with fromHook / toHook references |
+
+### <a name="function-_linkFlow"></a>`function` _linkFlow  
+*Line 143*
+
+Programmatically connects two hooks with a logic flow link.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `fromBlock` | `HTMLElement` | - source block element |
+| `fromHookSel` | `string` | - CSS selector for the source hook (e.g. ".hook", "#hook-fore") |
+| `toBlock` | `HTMLElement` | - target block element |
+| `toHookSel` | `string` | - CSS selector for the target hook |
+
+### <a name="function-startShadowLink"></a>`function` startShadowLink  
+*Line 168*
+
+Begins showing a dashed shadow path from the given hook to the cursor.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `hook` | `HTMLElement` | - the source hook button |
+
+### <a name="function-onShadowMove"></a>`function` onShadowMove  
+*Line 179*
+
+Updates the shadow path endpoint to follow the mouse.
+
+### <a name="function-endShadowLink"></a>`function` endShadowLink  
+*Line 201*
+
+Removes the shadow path and stops tracking the mouse.
+
+### <a name="function-resetLinkage"></a>`function` resetLinkage  
+*Line 211*
+
+Cancels any pending link operation and removes the shadow.
+
+### <a name="function-deleteLink"></a>`function` deleteLink  
+*Line 223*
+
+Removes an SVG connection path and cleans up both blocks' flow arrays.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `path` | `SVGPathElement` | - the flow path element to delete |
+
+
+---
+## sections.js
+
+### <a name="const-_sec"></a>`const` _sec  
+*Line 23*
+
+Internal state for the sections subsystem.
+@type {{
+  list: Array<{id:string, points:Array<{x:number,y:number}>, title:string}>,
+  nextId: number,
+  creating: boolean,
+  curPoints: Array<{x:number,y:number}>,
+  editingId: string|null,
+  editOverlay: HTMLElement|null,
+  previewPoly: SVGPolygonElement|null,
+  previewLine: SVGLineElement|null,
+  ghostCircles: SVGCircleElement[]
+}}
+
+### <a name="function-_gridSize"></a>`function` _gridSize  
+*Line 38*
+
+**Returns:** `number` — The CSS `--grid-size` value, defaulting to 25.
+
+### <a name="function-_snap"></a>`function` _snap  
+*Line 49*
+
+Snaps a coordinate value to the nearest grid multiple.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `v` | `number` |  |
+
+**Returns:** `number` — 
+
+### <a name="function-_snapAngle"></a>`function` _snapAngle  
+*Line 57*
+
+Constrains a new point to 0°, 45°, or 90° relative to the previous point.
+@param {{x:number,y:number}} prev
+@param {{x:number,y:number}} raw
+
+**Returns:** `{x:number,y:number` — }
+
+### <a name="function-_xy"></a>`function` _xy  
+*Line 73*
+
+Converts a mouse event to grid-snapped coordinates relative to #draw-area.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `ev` | `MouseEvent` |  |
+
+**Returns:** `{x:number, y:number` — }
+
+### <a name="function-_svgPt"></a>`function` _svgPt  
+*Line 86*
+
+Converts absolute page coordinates to SVG-relative coordinates.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `x` | `number` |  |
+| `y` | `number` |  |
+
+**Returns:** `{x:number, y:number` — }
+
+### <a name="function-_shoelace"></a>`function` _shoelace  
+*Line 99*
+
+Computes the signed area of a polygon via the shoelace formula.
+Used to reject tiny/collinear sections.
+@param {Array<{x:number,y:number}>} pts
+
+**Returns:** `number` — 
+
+### <a name="function-_ptInPoly"></a>`function` _ptInPoly  
+*Line 116*
+
+Ray-casting point-in-polygon test.
+@param {Array<{x:number,y:number}>} pts Polygon vertices in order
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `px` | `number` |  |
+| `py` | `number` |  |
+
+**Returns:** `boolean` — 
+
+### <a name="function-_segmentsIntersect"></a>`function` _segmentsIntersect  
+*Line 134*
+
+Checks whether two line segments AB and CD intersect (including endpoints).
+@param {{x:number,y:number}} a
+@param {{x:number,y:number}} b
+@param {{x:number,y:number}} c
+@param {{x:number,y:number}} d
+
+**Returns:** `boolean` — 
+
+### <a name="function-_rectPolyOverlap"></a>`function` _rectPolyOverlap  
+*Line 152*
+
+Checks whether a rectangle overlaps a polygon (any edge crossing or
+one fully containing the other).
+@param {Array<{x:number,y:number}>} pts Polygon vertices
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `rx` | `number` | Rectangle left |
+| `ry` | `number` | Rectangle top |
+| `rw` | `number` | Rectangle width |
+| `rh` | `number` | Rectangle height |
+
+**Returns:** `boolean` — 
+
+### <a name="function-_pointsAttr"></a>`function` _pointsAttr  
+*Line 180*
+
+Converts a points array to an SVG `points` attribute string ("x,y x2,y2 …").
+@param {Array<{x:number,y:number}>} pts
+
+**Returns:** `string` — 
+
+### <a name="function-_topLeftOf"></a>`function` _topLeftOf  
+*Line 189*
+
+Returns the top-left-most point in a polygon (used for label positioning).
+@param {Array<{x:number,y:number}>} pts
+
+**Returns:** `{x:number,y:number` — }
+
+### <a name="function-_ensureSectionGroup"></a>`function` _ensureSectionGroup  
+*Line 199*
+
+**Returns:** `SVGGElement|null` — The `<g class="sections-group">`, creating it if needed.
+
+### <a name="function-renderSection"></a>`function` renderSection  
+*Line 215*
+
+Renders one section as SVG polygon + text label.
+@param {{id:string, points:Array<{x:number,y:number}>, title:string}} s
+
+### <a name="function-_removeSectionEls"></a>`function` _removeSectionEls  
+*Line 242*
+
+Removes all SVG elements for a given section ID. @param {string} id
+
+### <a name="function-renderAllSections"></a>`function` renderAllSections  
+*Line 249*
+
+Re-renders every section from scratch.
+
+### <a name="function-_showOverlay"></a>`function` _showOverlay  
+*Line 258*
+
+Shows the dimming overlay that blocks interaction with blocks/links during section editing.
+
+### <a name="function-_hideOverlay"></a>`function` _hideOverlay  
+*Line 270*
+
+Hides the dimming overlay.
+
+### <a name="function-_clearPreview"></a>`function` _clearPreview  
+*Line 282*
+
+Removes all preview visuals (polygon, line, ghost circles).
+
+### <a name="function-_updatePreview"></a>`function` _updatePreview  
+*Line 296*
+
+Updates the visual preview during polygon point placement.
+@param {Array<{x:number,y:number}>} pts Points placed so far
+@param {{x:number,y:number}|null} mouse Current snapped mouse position
+
+### <a name="function-_onCreateClick"></a>`function` _onCreateClick  
+*Line 335*
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `ev` | `MouseEvent` | Handles a click during polygon creation (adds point or closes polygon). |
+
+### <a name="function-_onCreateMove"></a>`function` _onCreateMove  
+*Line 357*
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `ev` | `MouseEvent` | Updates the preview line during mouse movement in create mode. |
+
+### <a name="function-_onCreateDblClick"></a>`function` _onCreateDblClick  
+*Line 365*
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `ev` | `MouseEvent` | Finishes polygon creation on double-click. |
+
+### <a name="function-_finishSection"></a>`function` _finishSection  
+*Line 375*
+
+Finalises a section from the placed points, adds it to the list, renders it,
+and exits create mode.
+@param {Array<{x:number,y:number}>} pts
+
+### <a name="function-_cancelCreate"></a>`function` _cancelCreate  
+*Line 386*
+
+Cancels section creation without saving.
+
+### <a name="function-_exitCreateMode"></a>`function` _exitCreateMode  
+*Line 391*
+
+Cleans up all create-mode event listeners and preview elements.
+
+### <a name="function-_onCreateKey"></a>`function` _onCreateKey  
+*Line 406*
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `ev` | `KeyboardEvent` | Handles Escape (cancel) / Enter (finish) during creation. |
+
+### <a name="function-enterCreateMode"></a>`function` enterCreateMode  
+*Line 413*
+
+Enters polygon creation mode: sets up event listeners and the dimming overlay.
+
+### <a name="function-_editTitle"></a>`function` _editTitle  
+*Line 432*
+
+Shows an inline text input (via SVG foreignObject) to edit a section's title.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `id` | `string` | Section ID |
+
+### <a name="function-_commitTitle"></a>`function` _commitTitle  
+*Line 471*
+
+Commits an edited section title and removes the editing foreignObject.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `id` | `string` |  |
+| `title` | `string` |  |
+| `fo` | `SVGForeignObjectElement` |  |
+
+### <a name="function-_cancelEdit"></a>`function` _cancelEdit  
+*Line 485*
+
+Cancels section title editing without saving.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `id` | `string` |  |
+
+### <a name="function-_hideOverlayIfIdle"></a>`function` _hideOverlayIfIdle  
+*Line 495*
+
+Hides the overlay if neither creation nor editing is active.
+
+### <a name="function-blockOnSectionBorder"></a>`function` blockOnSectionBorder  
+*Line 507*
+
+Checks whether a block's bounding rectangle overlaps any section polygon.
+Called during drag to prevent blocks from sitting on section borders.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `block` | `HTMLElement` | A WCBlock element |
+
+**Returns:** `boolean` — 
+
+### <a name="function-saveSections"></a>`function` saveSections  
+*Line 520*
+
+**Returns:** `Array<{id:string, title:string, points:Array<{x:number,y:number` — >}>}
+
+### <a name="function-restoreSections"></a>`function` restoreSections  
+*Line 530*
+
+Deserialises and restores sections from saved data.
+@param {Array<{id?:string, title?:string, points?:Array<{x:number,y:number}>}>} data
+
+### <a name="function-_onSectionClick"></a>`function` _onSectionClick  
+*Line 546*
+
+Handles a click on a section polygon: selects it, shows draggable vertex handles.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `ev` | `MouseEvent` |  |
+
+### <a name="function-_deselectSection"></a>`function` _deselectSection  
+*Line 613*
+
+Deselects a section when clicking outside all section elements.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `ev` | `MouseEvent` |  |
+
+### <a name="function-deleteSelectedSection"></a>`function` deleteSelectedSection  
+*Line 624*
+
+Deletes the currently selected/editing section.
+
+### <a name="function-initSections"></a>`function` initSections  
+*Line 638*
+
+Wires up section-related event listeners (SVG click, document click, delete key).
+
+
+---
+## wcblock.js
+
+### <a name="class-WCBlock"></a>`class` WCBlock  
+*Line 18*
+
+Base class for all draggable, linkable flowchart and measurement blocks.
+
+
+---
+## blocks-algo.js
+
+### <a name="class-WCStart"></a>`class` WCStart  
+*Line 19*
+
+Program entry point. Cannot be deleted.
+
+### <a name="class-WCEnd"></a>`class` WCEnd  
+*Line 27*
+
+Program exit block with errno autocomplete. At least one must return 0.
+
+### <a name="class-WCOutput"></a>`class` WCOutput  
+*Line 36*
+
+Output description block. Provides inline documentation without generating code.
+
+### <a name="class-WCDecision"></a>`class` WCDecision  
+*Line 55*
+
+Conditional branch block; splits flow into yes/no branches and emits if/else C code.
+
+### <a name="class-WCAssign"></a>`class` WCAssign  
+*Line 137*
+
+Variable assignment block; writes to scalar/array/vector/string targets with data hooks.
+
+### <a name="class-WCVarRef"></a>`class` WCVarRef  
+*Line 247*
+
+Read-only variable reference with data output hook; syncs type from selected variable.
+
+### <a name="class-WCExpression"></a>`class` WCExpression  
+*Line 281*
+
+Math expression block with LaTeX rendering via MathJax and dynamic variable data hooks.
+
+
+---
+## blocks-data.js
+
+### <a name="class-WCQuantity"></a>`class` WCQuantity  
+*Line 20*
+
+Measurement quantity definition: name, 7 SI base dimensions, min/max range, default unit.
+
+### <a name="class-WCUnit"></a>`class` WCUnit  
+*Line 67*
+
+Unit of measurement: name, associated quantity, suffix, SI factor, recursive SI resolution.
+
+### <a name="class-WCBoolean"></a>`class` WCBoolean  
+*Line 140*
+
+Boolean variable: name, true/false value, optional comment. Generates C `int`.
+
+### <a name="class-WCScalar"></a>`class` WCScalar  
+*Line 173*
+
+Typed scalar variable with quantity, unit, SI conversion, and auto-sync between value and unit.
+
+### <a name="class-WCVector"></a>`class` WCVector  
+*Line 291*
+
+N-dimensional vector variable with quantity, unit, SI conversion; generates C array.
+
+### <a name="class-WCString"></a>`class` WCString  
+*Line 428*
+
+String variable: name, value. Generates C `string` struct with malloc/memcpy.
+
+### <a name="class-WCArray"></a>`class` WCArray  
+*Line 463*
+
+Typed C array variable with dynamic element list and optional vector dimension.
+
+
+---
+## blocks-proc.js
+
+### <a name="const-LIB_ICONS"></a>`const` LIB_ICONS  
+*Line 17*
+
+Type: `Object<string,string>` Maps library IDs to icon image paths for procedure call blocks.
+
+### <a name="class-WCProcedure"></a>`class` WCProcedure  
+*Line 27*
+
+Procedure definition block with inputs/outputs/description/return-style. Lives in the Procedures tab.
+
+### <a name="const-_FMT_SPEC_RE"></a>`const` _FMT_SPEC_RE  
+*Line 150*
+
+Type: `RegExp` Matches C printf-format specifiers, capturing the type character.
+
+### <a name="function-_specDataType"></a>`function` _specDataType  
+*Line 157*
+
+Maps a printf format specifier character to a C data type.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `spec` | `string` | Single format character (e.g. "d", "f", "s") |
+
+**Returns:** `string` — "int", "double", or "string"
+
+### <a name="class-WCProcCall"></a>`class` WCProcCall  
+*Line 166*
+
+Procedure call block with dynamic argument fields, format-string support, and error-handling hooks. Lives in the Algorithm tab.
+
+
+---
+## wcprogram.js
+
+### <a name="class-WCProgram"></a>`class` WCProgram  
+*Line 24*
+
+Root container custom element; owns the flowchart workspace, block creation, and code generation.
+
+### <a name="const-INCLUDE_MAP"></a>`const` INCLUDE_MAP  
+*Line 252*
+
+Maps library names to their C #include paths.
+Libraries not listed here use the default `<{name}.h>` convention.
+
+### <a name="const-BLOCK_REGISTRY"></a>`const` BLOCK_REGISTRY  
+*Line 263*
+
+Type: `Object<string,{cls:typeof WCBlock, template:string, prefix:string, getParent:(()=>HTMLElement)|null` >}
+
+### <a name="const-BLOCK_ACTIONS"></a>`const` BLOCK_ACTIONS  
+*Line 265*
+
+Type: `Object<string,string>` Maps toolbar action names to block tag names.
+
+### <a name="function-registerBlock"></a>`function` registerBlock  
+*Line 275*
+
+Registers a custom element class and adds it to the block registry and action map.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `tag` | `string` | Custom element tag (e.g. "wc-decision") |
+| `cls` | `typeof WCBlock` | Class constructor |
+| `prefix` | `string` | ID prefix for auto-generated block IDs |
+| `creatable` | `string|null` | Action name for toolbar buttons, or null if not toolbar-creatable |
+| `getParent` | `(()=>HTMLElement)|null` | Function returning the parent container, or null for algorithm pane |
+
+### <a name="const-_connObserver"></a>`const` _connObserver  
+*Line 299*
+
+Type: `MutationObserver` Watches SVG connections for changes and refreshes assign-block value visibility.
+
+
+---
+## persist.js
+
+### <a name="function-saveBlockData"></a>`function` saveBlockData  
+*Line 18*
+
+Reads the position and type-specific data from a single block element.
+Delegates to the block's saveData() method for type-specific fields.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `block` | `HTMLElement` | - a WCBlock or WCProgram child element |
+
+**Returns:** `{ x: number, y: number, ... ` — }
+
+### <a name="function-saveWorkspace"></a>`function` saveWorkspace  
+*Line 33*
+
+Serialises the entire workspace to localStorage under STORAGE_KEY.
+Captures all blocks from algorithm, measurements, and data panes,
+plus every SVG connection path.
+
+### <a name="function-restoreBlock"></a>`function` restoreBlock  
+*Line 97*
+
+Deep-clones a block <template> by tag name and restores position + data onto it.
+Delegates to the element's restoreData() method for type-specific fields.
+@param {{ id: string, tag: string, data: object }} info - saved block descriptor
+
+**Returns:** `HTMLElement|null` — the restored element, or null for unknown tags
+
+### <a name="function-restoreGroup"></a>`function` restoreGroup  
+*Line 120*
+
+Restores a group of block descriptors into a container in a single pass.
+Creates each block, appends it, then calls restoreData on all of them.
+@param {{ id: string, tag: string, data: object }[]} infos - saved block descriptors
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `container` | `HTMLElement` | - parent element to append blocks into |
+
+### <a name="function-loadWorkspace"></a>`function` loadWorkspace  
+*Line 134*
+
+Deserialises the workspace from localStorage and reconstructs all blocks,
+connections, and internal state. Existing user blocks are removed first.
+
+### <a name="function-newWorkspace"></a>`function` newWorkspace  
+*Line 270*
+
+Clears the saved workspace (removes localStorage entry) and reloads the page,
+returning the app to its pristine default state.
+
+
+---
+## lib-loader.js
+
+### <a name="const-LOADED_LIBS"></a>`const` LOADED_LIBS  
+*Line 13*
+
+Type: `Set<string>` Tracks which libraries have been loaded (prevents re-loading).
+
+### <a name="function-_addProcParams"></a>`function` _addProcParams  
+*Line 24*
+
+Creates param rows on a procedure block and sets their name/type values.
+Follows the same pattern as WCProcedure.restoreData().
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `proc` | `HTMLElement` | A wc-procedure element |
+| `inputs` | `Array<[string,string]>` | Array of [name, type] pairs |
+| `outputs` | `Array<[string,string]>` | Array of [name, type] pairs |
+
+### <a name="function-getLibraryIndex"></a>`function` getLibraryIndex  
+*Line 115*
+
+Returns the loaded library index (synchronous after loadLibraryIndex).
+
+**Returns:** `Array<{id:string, name:string, group?:string` — >}
+
+### <a name="function-isLibraryLoaded"></a>`function` isLibraryLoaded  
+*Line 125*
+
+Checks if a library has been loaded yet.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `libId` | `string` |  |
+
+**Returns:** `boolean` — 
+
+### <a name="function-markLibLoaded"></a>`function` markLibLoaded  
+*Line 134*
+
+Marks a library as loaded (for user-created libs that don't have JSON files).
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `libId` | `string` |  |
+
+
+---
+## proc-browser.js
+
+### <a name="function-_buildTreeData"></a>`function` _buildTreeData  
+*Line 16*
+
+Builds the tree data structure from all wc-procedure blocks and the library index.
+
+**Returns:** `Array<{label:string, items:Array<{qname:string, naturalName:string, techName:string, readonly:boolean` — >, userDefined:boolean}>}
+
+### <a name="function-_createGroupElement"></a>`function` _createGroupElement  
+*Line 83*
+
+Creates a collapsible group DOM element in the procedure browser tree.
+@param {{label:string, items:Array<any>, userDefined:boolean}} group
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `[selectedQname]` | `string` | QName to pre-select |
+
+**Returns:** `HTMLElement` — 
+
+### <a name="function-_applySearchFilter"></a>`function` _applySearchFilter  
+*Line 163*
+
+Filters the procedure tree by a search query, showing/hiding groups and items.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `query` | `string` |  |
+| `overlay` | `HTMLElement` | The procedure browser overlay element |
+
+### <a name="function-_escapeHtml"></a>`function` _escapeHtml  
+*Line 230*
+
+Escapes HTML special characters for safe innerHTML insertion.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `str` | `string` |  |
+
+**Returns:** `string` — 
+
+### <a name="function-_confirmSelection"></a>`function` _confirmSelection  
+*Line 240*
+
+Confirms a procedure selection, closes the browser, and invokes the callback.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `qname` | `string` | Qualified procedure name |
+
+### <a name="function-_cancelBrowser"></a>`function` _cancelBrowser  
+*Line 250*
+
+Cancels procedure selection, closes the browser, invokes callback with null.
+
+### <a name="function-showProcedureBrowser"></a>`function` showProcedureBrowser  
+*Line 264*
+
+Opens the procedure browser modal, builds the tree, and wires up search/cancel/select.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `selectedQname` | `string` |  |
+| `callback` | `(qname:string|null)=>void` |  |
+
+
+---
+## templates.js
+
+### <a name="function-_clearWorkspace"></a>`function` _clearWorkspace  
+*Line 16*
+
+Removes all user-created blocks, connections, library tabs and panes,
+resetting flow arrays and LOADED_LIBS. Used by templates (new project) and
+persist.js (load workspace, with keepStorage:true to preserve localStorage).
+@param {{ keepStorage?: boolean }} [opts]
+
+
+---
+## app.js
+
+### <a name="function-createDefaultMeasurements"></a>`function` createDefaultMeasurements  
+*Line 19*
+
+Pre-populates the Measurements tab with SI base and coherent derived types/units.
+22 types and 22 units arranged in a 4-column grid.
+No prefixed units are created except kilogram (the SI base unit for mass).
+
+### <a name="function-addLibTab"></a>`function` addLibTab  
+*Line 118*
+
+Creates a library tab and its associated pane in the Procedures tab.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `libName` | `string` | - library identifier |
+| `[makeActive]` | `boolean` | - whether to mark the tab/pane as active |
+
+**Returns:** `HTMLElement` — the #procedures-area element inside the new pane
+
+### <a name="function-switchTab"></a>`function` switchTab  
+*Line 170*
+
+Activates the clicked tab and shows its corresponding pane.
+
+**Parameters:**
+
+| Name | Type | Description |
+|------|------|------------|
+| `name` | `string` | - tab identifier (matches data-tab attribute and pane id suffix) |
+
+### <a name="function-setupUI"></a>`function` setupUI  
+*Line 183*
+
+Wires all static button click handlers (replaces inline onclick attributes).
+
+### <a name="function-main"></a>`function` main  
+*Line 426*
+
+Bootstraps the application: builds the flowchart canvas with start/end blocks,
+creates default SI measurements, optionally loads a saved workspace, then
+wires up all UI event listeners.
+
diff --git a/draw.js b/draw.js
index 7a50e95..77a8274 100644
--- a/draw.js
+++ b/draw.js
@@ -8,8 +8,13 @@
 // Depends on: dom.js (svgNamespace, $, $id)
 //
 
-const EXT = 25;  // pixels the path extends from a hook in its exit direction
+/** @type {number} Pixels the path extends from a hook in its exit direction. */
+const EXT = 25;
+
+/** @type {{block: HTMLElement, hook: HTMLElement}|null} First hook clicked in a two-click link operation. */
 let linkageFirst = null;
+
+/** @type {SVGPathElement|null} The shadow path element shown while linking, or null. */
 let shadowPath = null;
 
 
@@ -67,7 +72,9 @@ function routeBetween(x1, y1, x2, y2) {
 function resolveHook(path, which) {
   const key = which === "from" ? "fromHook" : "toHook";
   const elKey = which === "from" ? "fromElement" : "toElement";
-  return path[key] || path[elKey].querySelector(".hook");
+  if (path[key]) return path[key];
+  const el = path[elKey];
+  return el ? el.querySelector(".hook") : null;
 }
 
 
@@ -79,6 +86,7 @@ function resolveHook(path, which) {
  * @returns {{ x: number, y: number }}
  */
 function getHookExit(hook, svgRect) {
+  if (!hook) return { x: 0, y: 0 };
   const r = hook.getBoundingClientRect();
   const x = (r.left + r.right) / 2 - svgRect.left;
   const y = (r.top  + r.bottom) / 2 - svgRect.top;
@@ -99,11 +107,14 @@ function getHookExit(hook, svgRect) {
  * @param {SVGPathElement} path - path element with fromHook / toHook references
  */
 function drawpath(path) {
+  if (!path || !path.isConnected) return;
   const svg = path.closest("svg");
+  if (!svg) return;
   const svgRect = svg.getBoundingClientRect();
 
   const fromHook = resolveHook(path, "from");
   const toHook   = resolveHook(path, "to");
+  if (!fromHook || !toHook || !fromHook.isConnected || !toHook.isConnected) return;
   const rFrom = fromHook.getBoundingClientRect();
   const rTo   = toHook.getBoundingClientRect();
 
@@ -123,6 +134,39 @@ function drawpath(path) {
 }
 
 
+/**
+ * Programmatically connects two hooks with a logic flow link.
+ * @param {HTMLElement} fromBlock - source block element
+ * @param {string} fromHookSel - CSS selector for the source hook (e.g. ".hook", "#hook-fore")
+ * @param {HTMLElement} toBlock - target block element
+ * @param {string} toHookSel - CSS selector for the target hook
+ */
+function _linkFlow(fromBlock, fromHookSel, toBlock, toHookSel) {
+  const fromHook = fromBlock.querySelector(fromHookSel);
+  const toHook = toBlock.querySelector(toHookSel);
+  if (!fromHook || !toHook) return;
+  const path = document.createElementNS(svgNamespace, "path");
+  path.toElement = toBlock;
+  path.fromElement = fromBlock;
+  path.fromHook = fromHook;
+  path.toHook = toHook;
+  toHook.dataset.connected = "";
+  path.dataset.linkType = "logic";
+  path.classList.add("flow");
+  if (fromHook.classList.contains("proccall-error-hook")) {
+    path.classList.add("flow-error-source");
+    path.classList.add("flow-error");
+  } else if (fromBlock.classList.contains("error-path")) {
+    path.classList.add("flow-error");
+  }
+  toBlock.wcForeFlow.push(path);
+  fromBlock.wcNextFlow.push(path);
+  document.getElementById("connections").appendChild(path);
+  drawpath(path);
+  refreshErrorPaths();
+}
+
+
 // ── Shadow (preview) link ─────────────────────────────────────────────────────
 
 /**
@@ -137,12 +181,15 @@ function startShadowLink(hook) {
   shadowPath._hook = hook;
   svg.appendChild(shadowPath);
   document.addEventListener("mousemove", onShadowMove);
+  const area = $id("draw-area");
+  if (area) area.classList.add("linking");
 }
 
 /** Updates the shadow path endpoint to follow the mouse. */
 function onShadowMove(ev) {
   if (!shadowPath) return;
   const svg = shadowPath.closest("svg");
+  if (!svg) return;
   const svgRect = svg.getBoundingClientRect();
   const mx = ev.clientX - svgRect.left;
   const my = ev.clientY - svgRect.top;
@@ -160,13 +207,15 @@ function onShadowMove(ev) {
   );
 }
 
-/** Removes the shadow path and stops tracking the mouse. */
+/** Removes the shadow path, stops tracking the mouse, and hides empty input hooks. */
 function endShadowLink() {
   if (shadowPath) {
     shadowPath.remove();
     shadowPath = null;
   }
   document.removeEventListener("mousemove", onShadowMove);
+  const area = $id("draw-area");
+  if (area) area.classList.remove("linking");
 }
 
 
@@ -198,10 +247,18 @@ function deleteLink(path) {
     if (i !== -1) tgt.wcForeFlow.splice(i, 1);
   }
 
+  if (path.toHook) {
+    delete path.toHook.dataset.connected;
+    _dataSourceCache.delete(path.toHook);
+  }
+
   path.remove();
 
   path.fromElement = null;
   path.toElement   = null;
   path.fromHook    = null;
   path.toHook      = null;
+
+  refreshBlockWarnings();
+  refreshErrorPaths();
 }
diff --git a/errno-data.js b/errno-data.js
new file mode 100644
index 0000000..373f234
--- /dev/null
+++ b/errno-data.js
@@ -0,0 +1,137 @@
+// ── Errno table: code, name, description ────────────────────────────────────
+// Generated from the system's errno definitions.
+// Used by WCEnd blocks to select exit codes.
+
+/** @type {Array<{code:number, name:string, desc:string}>} */
+const ERRNO_LIST = [
+  { code: 1, name: 'EPERM', desc: 'Operation not permitted' },
+  { code: 2, name: 'ENOENT', desc: 'No such file or directory' },
+  { code: 3, name: 'ESRCH', desc: 'No such process' },
+  { code: 4, name: 'EINTR', desc: 'Interrupted system call' },
+  { code: 5, name: 'EIO', desc: 'Input/output error' },
+  { code: 6, name: 'ENXIO', desc: 'No such device or address' },
+  { code: 7, name: 'E2BIG', desc: 'Argument list too long' },
+  { code: 8, name: 'ENOEXEC', desc: 'Exec format error' },
+  { code: 9, name: 'EBADF', desc: 'Bad file descriptor' },
+  { code: 10, name: 'ECHILD', desc: 'No child processes' },
+  { code: 11, name: 'EAGAIN', desc: 'Resource temporarily unavailable' },
+  { code: 12, name: 'ENOMEM', desc: 'Cannot allocate memory' },
+  { code: 13, name: 'EACCES', desc: 'Permission denied' },
+  { code: 14, name: 'EFAULT', desc: 'Bad address' },
+  { code: 15, name: 'ENOTBLK', desc: 'Block device required' },
+  { code: 16, name: 'EBUSY', desc: 'Device or resource busy' },
+  { code: 17, name: 'EEXIST', desc: 'File exists' },
+  { code: 18, name: 'EXDEV', desc: 'Invalid cross-device link' },
+  { code: 19, name: 'ENODEV', desc: 'No such device' },
+  { code: 20, name: 'ENOTDIR', desc: 'Not a directory' },
+  { code: 21, name: 'EISDIR', desc: 'Is a directory' },
+  { code: 22, name: 'EINVAL', desc: 'Invalid argument' },
+  { code: 23, name: 'ENFILE', desc: 'Too many open files in system' },
+  { code: 24, name: 'EMFILE', desc: 'Too many open files' },
+  { code: 25, name: 'ENOTTY', desc: 'Inappropriate ioctl for device' },
+  { code: 26, name: 'ETXTBSY', desc: 'Text file busy' },
+  { code: 27, name: 'EFBIG', desc: 'File too large' },
+  { code: 28, name: 'ENOSPC', desc: 'No space left on device' },
+  { code: 29, name: 'ESPIPE', desc: 'Illegal seek' },
+  { code: 30, name: 'EROFS', desc: 'Read-only file system' },
+  { code: 31, name: 'EMLINK', desc: 'Too many links' },
+  { code: 32, name: 'EPIPE', desc: 'Broken pipe' },
+  { code: 33, name: 'EDOM', desc: 'Numerical argument out of domain' },
+  { code: 34, name: 'ERANGE', desc: 'Numerical result out of range' },
+  { code: 35, name: 'EDEADLOCK', desc: 'Resource deadlock avoided' },
+  { code: 36, name: 'ENAMETOOLONG', desc: 'File name too long' },
+  { code: 37, name: 'ENOLCK', desc: 'No locks available' },
+  { code: 38, name: 'ENOSYS', desc: 'Function not implemented' },
+  { code: 39, name: 'ENOTEMPTY', desc: 'Directory not empty' },
+  { code: 40, name: 'ELOOP', desc: 'Too many levels of symbolic links' },
+  { code: 42, name: 'ENOMSG', desc: 'No message of desired type' },
+  { code: 43, name: 'EIDRM', desc: 'Identifier removed' },
+  { code: 44, name: 'ECHRNG', desc: 'Channel number out of range' },
+  { code: 45, name: 'EL2NSYNC', desc: 'Level 2 not synchronized' },
+  { code: 46, name: 'EL3HLT', desc: 'Level 3 halted' },
+  { code: 47, name: 'EL3RST', desc: 'Level 3 reset' },
+  { code: 48, name: 'ELNRNG', desc: 'Link number out of range' },
+  { code: 49, name: 'EUNATCH', desc: 'Protocol driver not attached' },
+  { code: 50, name: 'ENOCSI', desc: 'No CSI structure available' },
+  { code: 51, name: 'EL2HLT', desc: 'Level 2 halted' },
+  { code: 52, name: 'EBADE', desc: 'Invalid exchange' },
+  { code: 53, name: 'EBADR', desc: 'Invalid request descriptor' },
+  { code: 54, name: 'EXFULL', desc: 'Exchange full' },
+  { code: 55, name: 'ENOANO', desc: 'No anode' },
+  { code: 56, name: 'EBADRQC', desc: 'Invalid request code' },
+  { code: 57, name: 'EBADSLT', desc: 'Invalid slot' },
+  { code: 59, name: 'EBFONT', desc: 'Bad font file format' },
+  { code: 60, name: 'ENOSTR', desc: 'Device not a stream' },
+  { code: 61, name: 'ENODATA', desc: 'No data available' },
+  { code: 62, name: 'ETIME', desc: 'Timer expired' },
+  { code: 63, name: 'ENOSR', desc: 'Out of streams resources' },
+  { code: 64, name: 'ENONET', desc: 'Machine is not on the network' },
+  { code: 65, name: 'ENOPKG', desc: 'Package not installed' },
+  { code: 66, name: 'EREMOTE', desc: 'Object is remote' },
+  { code: 67, name: 'ENOLINK', desc: 'Link has been severed' },
+  { code: 68, name: 'EADV', desc: 'Advertise error' },
+  { code: 69, name: 'ESRMNT', desc: 'Srmount error' },
+  { code: 70, name: 'ECOMM', desc: 'Communication error on send' },
+  { code: 71, name: 'EPROTO', desc: 'Protocol error' },
+  { code: 72, name: 'EMULTIHOP', desc: 'Multihop attempted' },
+  { code: 73, name: 'EDOTDOT', desc: 'RFS specific error' },
+  { code: 74, name: 'EBADMSG', desc: 'Bad message' },
+  { code: 75, name: 'EOVERFLOW', desc: 'Value too large for defined data type' },
+  { code: 76, name: 'ENOTUNIQ', desc: 'Name not unique on network' },
+  { code: 77, name: 'EBADFD', desc: 'File descriptor in bad state' },
+  { code: 78, name: 'EREMCHG', desc: 'Remote address changed' },
+  { code: 79, name: 'ELIBACC', desc: 'Can not access a needed shared library' },
+  { code: 80, name: 'ELIBBAD', desc: 'Accessing a corrupted shared library' },
+  { code: 81, name: 'ELIBSCN', desc: '.lib section in a.out corrupted' },
+  { code: 82, name: 'ELIBMAX', desc: 'Attempting to link in too many shared libraries' },
+  { code: 83, name: 'ELIBEXEC', desc: 'Cannot exec a shared library directly' },
+  { code: 84, name: 'EILSEQ', desc: 'Invalid or incomplete multibyte or wide character' },
+  { code: 85, name: 'ERESTART', desc: 'Interrupted system call should be restarted' },
+  { code: 86, name: 'ESTRPIPE', desc: 'Streams pipe error' },
+  { code: 87, name: 'EUSERS', desc: 'Too many users' },
+  { code: 88, name: 'ENOTSOCK', desc: 'Socket operation on non-socket' },
+  { code: 89, name: 'EDESTADDRREQ', desc: 'Destination address required' },
+  { code: 90, name: 'EMSGSIZE', desc: 'Message too long' },
+  { code: 91, name: 'EPROTOTYPE', desc: 'Protocol wrong type for socket' },
+  { code: 92, name: 'ENOPROTOOPT', desc: 'Protocol not available' },
+  { code: 93, name: 'EPROTONOSUPPORT', desc: 'Protocol not supported' },
+  { code: 94, name: 'ESOCKTNOSUPPORT', desc: 'Socket type not supported' },
+  { code: 95, name: 'ENOTSUP', desc: 'Operation not supported' },
+  { code: 96, name: 'EPFNOSUPPORT', desc: 'Protocol family not supported' },
+  { code: 97, name: 'EAFNOSUPPORT', desc: 'Address family not supported by protocol' },
+  { code: 98, name: 'EADDRINUSE', desc: 'Address already in use' },
+  { code: 99, name: 'EADDRNOTAVAIL', desc: 'Cannot assign requested address' },
+  { code: 100, name: 'ENETDOWN', desc: 'Network is down' },
+  { code: 101, name: 'ENETUNREACH', desc: 'Network is unreachable' },
+  { code: 102, name: 'ENETRESET', desc: 'Network dropped connection on reset' },
+  { code: 103, name: 'ECONNABORTED', desc: 'Software caused connection abort' },
+  { code: 104, name: 'ECONNRESET', desc: 'Connection reset by peer' },
+  { code: 105, name: 'ENOBUFS', desc: 'No buffer space available' },
+  { code: 106, name: 'EISCONN', desc: 'Transport endpoint is already connected' },
+  { code: 107, name: 'ENOTCONN', desc: 'Transport endpoint is not connected' },
+  { code: 108, name: 'ESHUTDOWN', desc: 'Cannot send after transport endpoint shutdown' },
+  { code: 109, name: 'ETOOMANYREFS', desc: 'Too many references: cannot splice' },
+  { code: 110, name: 'ETIMEDOUT', desc: 'Connection timed out' },
+  { code: 111, name: 'ECONNREFUSED', desc: 'Connection refused' },
+  { code: 112, name: 'EHOSTDOWN', desc: 'Host is down' },
+  { code: 113, name: 'EHOSTUNREACH', desc: 'No route to host' },
+  { code: 114, name: 'EALREADY', desc: 'Operation already in progress' },
+  { code: 115, name: 'EINPROGRESS', desc: 'Operation now in progress' },
+  { code: 116, name: 'ESTALE', desc: 'Stale file handle' },
+  { code: 117, name: 'EUCLEAN', desc: 'Structure needs cleaning' },
+  { code: 118, name: 'ENOTNAM', desc: 'Not a XENIX named type file' },
+  { code: 119, name: 'ENAVAIL', desc: 'No XENIX semaphores available' },
+  { code: 120, name: 'EISNAM', desc: 'Is a named type file' },
+  { code: 121, name: 'EREMOTEIO', desc: 'Remote I/O error' },
+  { code: 122, name: 'EDQUOT', desc: 'Disk quota exceeded' },
+  { code: 123, name: 'ENOMEDIUM', desc: 'No medium found' },
+  { code: 124, name: 'EMEDIUMTYPE', desc: 'Wrong medium type' },
+  { code: 125, name: 'ECANCELED', desc: 'Operation canceled' },
+  { code: 126, name: 'ENOKEY', desc: 'Required key not available' },
+  { code: 127, name: 'EKEYEXPIRED', desc: 'Key has expired' },
+  { code: 128, name: 'EKEYREVOKED', desc: 'Key has been revoked' },
+  { code: 129, name: 'EKEYREJECTED', desc: 'Key was rejected by service' },
+  { code: 130, name: 'EOWNERDEAD', desc: 'Owner died' },
+  { code: 131, name: 'ENOTRECOVERABLE', desc: 'State not recoverable' },
+  { code: 132, name: 'ERFKILL', desc: 'Operation not possible due to RF-kill' },
+];
diff --git a/error.js b/error.js
index 1374c97..2dbe147 100644
--- a/error.js
+++ b/error.js
@@ -11,7 +11,9 @@
  */
 function showError(msg) {
   const el = $("#error-overlay");
-  el.querySelector(".error-msg").textContent = msg;
+  if (!el) { console.error("ACK: " + msg); return; }
+  const msgEl = el.querySelector(".error-msg");
+  if (msgEl) msgEl.textContent = msg;
   el.classList.add("active");
 }
 
@@ -21,11 +23,13 @@ function showError(msg) {
  * @param {MouseEvent} [ev] - event to check target matching
  */
 function closeError(ev) {
+  const el = $("#error-overlay");
+  if (!el) return;
   if (
     !ev ||
     ev.target === ev.currentTarget ||
     ev.target.classList.contains("error-close")
   ) {
-    $("#error-overlay").classList.remove("active");
+    el.classList.remove("active");
   }
 }
diff --git a/helpers.js b/helpers.js
index 3276c22..a88c263 100644
--- a/helpers.js
+++ b/helpers.js
@@ -11,11 +11,13 @@
 //   getDefaultUnitSuffix()      → lookup default unit for a quantity name
 //   refreshDefaultUnitOptions() → sync default-unit dropdowns on quantity blocks
 //   refreshVarRefOptions()      → sync variable-select dropdowns
-//   refreshProcOptions()        → sync procedure-select dropdowns
 //   switchLibTab()              → activate library sub-tab
 //   findDataSource()            → find block connected to a data hook
 //   escapeString()              → escape special chars for C string literal
+//   refreshBlockWarnings()      → check every algorithm block for missing input
+//   refreshErrorPaths()         → mark blocks only reachable via error-flow paths
 //   refreshAll()                → run all refresh passes in order
+//   copyCode()                  → copy generated C code to clipboard
 
 
 /**
@@ -66,9 +68,14 @@ function rebuildSelect(sel, placeholder, values, current) {
  * all wc-quantity blocks in the data area.
  */
 function refreshQuantityOptions() {
+  const dataArea = $id("data-area");
+  if (!dataArea) return;
   const qNames = Array.from(
-    $id("data-area").querySelectorAll("wc-quantity")
-  ).map(q => (q.querySelector(".quantity-name").value || "unnamed"));
+    dataArea.querySelectorAll("wc-quantity")
+  ).map(q => {
+    const el = q.querySelector(".quantity-name");
+    return el ? (el.value || "unnamed") : "unnamed";
+  });
 
   document.querySelectorAll(
     "#variable-area .var-type, #data-area .unit-type"
@@ -84,18 +91,28 @@ function refreshQuantityOptions() {
  * that match the datum's currently selected quantity.
  */
 function refreshUnitOptions() {
-  $id("variable-area").querySelectorAll("wc-scalar").forEach(d => {
-    const quantityName = d.querySelector(".var-type").value;
+  const varArea = $id("variable-area");
+  const dataArea = $id("data-area");
+  if (!varArea || !dataArea) return;
+  varArea.querySelectorAll("wc-scalar").forEach(d => {
+    const typeEl = d.querySelector(".var-type");
     const sel = d.querySelector(".var-unit");
+    if (!typeEl || !sel) return;
+    const quantityName = typeEl.value;
     const suffixes = Array.from(
-      $id("data-area").querySelectorAll("wc-unit")
+      dataArea.querySelectorAll("wc-unit")
     )
       .filter(
-        u =>
-          u.querySelector(".unit-type").value === quantityName &&
-          u.querySelector(".unit-suffix").value
+        u => {
+          const t = u.querySelector(".unit-type");
+          const s = u.querySelector(".unit-suffix");
+          return t && s && t.value === quantityName && s.value;
+        }
       )
-      .map(u => u.querySelector(".unit-suffix").value);
+      .map(u => {
+        const s = u.querySelector(".unit-suffix");
+        return s ? s.value : "";
+      });
     rebuildSelect(sel, "(unit)", suffixes, sel.value);
   });
 }
@@ -106,9 +123,13 @@ function refreshUnitOptions() {
  * @returns {string} default unit suffix, or "" if not found
  */
 function getDefaultUnitSuffix(quantityName) {
-  for (const q of $id("data-area").querySelectorAll("wc-quantity")) {
-    if ((q.querySelector(".quantity-name").value || "unnamed") === quantityName) {
-      return q.querySelector(".quantity-default-unit").value || "";
+  const dataArea = $id("data-area");
+  if (!dataArea) return "";
+  for (const q of dataArea.querySelectorAll("wc-quantity")) {
+    const nameEl = q.querySelector(".quantity-name");
+    if (nameEl && (nameEl.value || "unnamed") === quantityName) {
+      const unitEl = q.querySelector(".quantity-default-unit");
+      return unitEl ? (unitEl.value || "") : "";
     }
   }
   return "";
@@ -119,18 +140,27 @@ function getDefaultUnitSuffix(quantityName) {
  * of matching unit blocks.
  */
 function refreshDefaultUnitOptions() {
-  $id("data-area").querySelectorAll("wc-quantity").forEach(q => {
-    const quantityName = q.querySelector(".quantity-name").value || "unnamed";
+  const dataArea = $id("data-area");
+  if (!dataArea) return;
+  dataArea.querySelectorAll("wc-quantity").forEach(q => {
+    const nameEl = q.querySelector(".quantity-name");
     const sel = q.querySelector(".quantity-default-unit");
+    if (!nameEl || !sel) return;
+    const quantityName = nameEl.value || "unnamed";
     const suffixes = Array.from(
-      $id("data-area").querySelectorAll("wc-unit")
+      dataArea.querySelectorAll("wc-unit")
     )
       .filter(
-        u =>
-          u.querySelector(".unit-type").value === quantityName &&
-          u.querySelector(".unit-suffix").value
+        u => {
+          const t = u.querySelector(".unit-type");
+          const s = u.querySelector(".unit-suffix");
+          return t && s && t.value === quantityName && s.value;
+        }
       )
-      .map(u => u.querySelector(".unit-suffix").value);
+      .map(u => {
+        const s = u.querySelector(".unit-suffix");
+        return s ? s.value : "";
+      });
     rebuildSelect(sel, "(none)", suffixes, sel.value);
   });
 }
@@ -142,11 +172,15 @@ function refreshDefaultUnitOptions() {
 function refreshVarRefOptions() {
   const selects = document.querySelectorAll(".varref-select, .assign-target");
   if (!selects.length) return;
+  const varArea = $id("variable-area");
   const vars = [];
-  for (const b of $id("variable-area").querySelectorAll("wc-boolean, wc-scalar, wc-string, wc-array")) {
-    const name = (b.querySelector(".var-name") || {}).value || "unnamed";
-    const tag  = b.tagName.toLowerCase().replace("wc-", "");
-    vars.push({ id: b.id, label: tag + ": " + name });
+  if (varArea) {
+    for (const b of varArea.querySelectorAll("wc-boolean, wc-scalar, wc-string, wc-array, wc-vector")) {
+      const nameEl = b.querySelector(".var-name");
+      const name = nameEl ? (nameEl.value || "unnamed") : "unnamed";
+      const tag  = b.tagName.toLowerCase().replace("wc-", "");
+      vars.push({ id: b.id, label: tag + ": " + name });
+    }
   }
   for (const sel of selects) {
     const current = sel.dataset.restoredValue || sel.value;
@@ -164,31 +198,6 @@ function refreshVarRefOptions() {
   }
 }
 
-/**
- * Refreshes the procedure-select dropdown on every wc-proccall block.
- * Scans all wc-procedure blocks and populates options as "library/name".
- */
-function refreshProcOptions() {
-  const proccalls = document.querySelectorAll("wc-proccall");
-  if (!proccalls.length) return;
-  const options = Array.from(document.querySelectorAll("wc-procedure")).map(p => p.getQualifiedName());
-  for (const call of proccalls) {
-    const sel = call.querySelector(".proccall-select");
-    const current = sel.dataset.restoredValue || sel.value;
-    delete sel.dataset.restoredValue;
-    sel.innerHTML = '<option value="">(select procedure)</option>';
-    for (const opt of options) {
-      const o = document.createElement("option");
-      o.value = opt;
-      o.textContent = opt;
-      sel.appendChild(o);
-    }
-    if (current && [...sel.options].some(o => o.value === current)) {
-      sel.value = current;
-    }
-  }
-}
-
 /**
  * Activates the clicked library sub-tab and shows its corresponding pane.
  * @param {string} name - library name (matches data-lib-name attribute)
@@ -202,18 +211,32 @@ function switchLibTab(name) {
   }
 }
 
+/** @type {WeakMap<HTMLElement,HTMLElement>} Cache mapping data hooks to their source blocks. */
+const _dataSourceCache = new WeakMap();
+
 /**
  * Finds the block connected to a given data hook via any .flow-data path.
+ * Results are cached in _dataSourceCache.
  * @param {HTMLElement} hook - the data hook button element
  * @returns {HTMLElement|null} the source block, or null if nothing is connected
  */
 function findDataSource(hook) {
+  if (_dataSourceCache.has(hook)) return _dataSourceCache.get(hook);
   for (const path of document.querySelectorAll("path.flow-data")) {
-    if (path.toHook === hook) return path.fromElement;
+    if (path.toHook === hook) {
+      _dataSourceCache.set(hook, path.fromElement);
+      return path.fromElement;
+    }
   }
   return null;
 }
 
+/** Copies the generated C code text to the clipboard. */
+function copyCode() {
+  const el = $id("c-code");
+  if (el && el.textContent) navigator.clipboard.writeText(el.textContent).catch(() => {});
+}
+
 /**
  * Escapes special characters for embedding in a C string literal.
  * Handles backslash, double-quote, newline, carriage return, and tab.
@@ -223,9 +246,18 @@ function findDataSource(hook) {
 function escapeString(str) {
   return str
     .replace(/\\/g, "\\\\").replace(/"/g, '\\"')
-    .replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t");
+    .replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t")
+    .replace(/\f/g, "\\f").replace(/\v/g, "\\v").replace(/\0/g, "\\0");
 }
 
+/** @type {Set<string>} C reserved keywords — toCName appends "_" to avoid clashes. */
+const C_KEYWORDS = new Set([
+  "auto","break","case","char","const","continue","default","do","double",
+  "else","enum","extern","float","for","goto","if","int","long","register",
+  "return","short","signed","sizeof","static","struct","switch","typedef",
+  "union","unsigned","void","volatile","while"
+]);
+
 /**
  * Converts a natural-language name into a valid C identifier.
  * Lowercases, replaces non-alphanumeric chars with underscores,
@@ -240,7 +272,40 @@ function toCName(str) {
   s = s.replace(/_+/g, "_");
   s = s.replace(/^_|_$/g, "");
   if (/^\d/.test(s)) s = "_" + s;
-  return s || "var";
+  if (!s || C_KEYWORDS.has(s)) s = (s || "var") + "_";
+  return s;
+}
+
+/**
+ * Derives a human-readable natural name from a C function/tech name.
+ * Converts camelCase and snake_case to words, strips common prefixes.
+ * @param {string} techName - e.g. "SDL_CreateWindow", "glfwInit", "puts"
+ * @returns {string} e.g. "Create Window", "Init GLFW", "Puts"
+ */
+function deriveNaturalName(techName) {
+  if (!techName) return "";
+  let s = techName;
+  s = s.replace(/^(SDL_|glfw|gl_?)/i, '');
+  const known = {
+    puts: "Print String",
+    printf: "Print Formatted",
+    getchar: "Get Char",
+    putchar: "Put Char",
+    perror: "Print Error",
+    malloc: "Allocate Memory",
+    atoi: "Parse Int",
+    atof: "Parse Float",
+    strlen: "String Length",
+    strcmp: "Compare Strings",
+    fabs: "Abs Float",
+    fmod: "Float Modulo",
+  };
+  if (known[s]) return known[s];
+  s = s.replace(/([a-z])([A-Z])/g, '$1 $2');
+  s = s.replace(/_/g, ' ');
+  s = s.replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2');
+  s = s.replace(/\s+/g, ' ').trim();
+  return s.charAt(0).toUpperCase() + s.slice(1);
 }
 
 /**
@@ -281,11 +346,189 @@ function resolveSourceName(block, visited) {
   return "";
 }
 
+/**
+ * Opens a modal dialog that shows the block's editable fields in a compact,
+ * full-width layout for easier editing.
+ * @param {HTMLElement} block
+ */
+function showBlockEditor(block) {
+  let overlay = $id("block-editor-overlay");
+  if (!overlay) {
+    overlay = document.createElement("div");
+    overlay.id = "block-editor-overlay";
+    overlay.className = "block-editor-overlay";
+    overlay.addEventListener("click", ev => { if (ev.target === overlay) overlay.classList.remove("active"); });
+    document.body.appendChild(overlay);
+
+    const editorDiv = document.createElement("div");
+    editorDiv.className = "block-editor-modal";
+    editorDiv.innerHTML =
+      '<div class="block-editor-header">' +
+      '  <span class="block-editor-title">Edit Block</span>' +
+      '  <button class="block-editor-close">&times;</button>' +
+      '</div>' +
+      '<div class="block-editor-body"></div>' +
+      '<div class="block-editor-footer">' +
+      '  <button class="block-editor-cancel">Cancel</button>' +
+      '  <button class="block-editor-apply">Apply</button>' +
+      '</div>';
+    overlay.appendChild(editorDiv);
+
+    editorDiv.querySelector(".block-editor-close").addEventListener("click", () => overlay.classList.remove("active"));
+    editorDiv.querySelector(".block-editor-cancel").addEventListener("click", () => overlay.classList.remove("active"));
+  }
+
+  const body = overlay.querySelector(".block-editor-body");
+  body.innerHTML = "";
+
+  /* Colour picker row; error blocks default to red, others to blue */
+  const defaultColor = block.classList.contains("error-path") || block.tagName === "WC-END" ? "#ef5350" : "#4a90d9";
+  const colorRow = document.createElement("div");
+  colorRow.className = "block-editor-color-row";
+  colorRow.innerHTML =
+    '<label class="block-editor-color-label">Accent colour</label>' +
+    '<input type="color" class="block-editor-color-picker" value="' + (block.dataset.blockColor || defaultColor) + '">' +
+    '<button class="block-editor-color-reset" title="reset to default">Reset</button>';
+  body.appendChild(colorRow);
+
+  const colorPicker = colorRow.querySelector(".block-editor-color-picker");
+  const origColor = block.dataset.blockColor || "";
+
+  colorRow.querySelector(".block-editor-color-reset").addEventListener("click", () => {
+    colorPicker.value = defaultColor;
+  });
+
+  const clone = block.cloneNode(true);
+  clone.style.position = "static";
+  clone.style.width = "";
+  clone.style.height = "";
+  // Remove interactive buttons from clone (edit, delete, resize)
+  for (const btn of clone.querySelectorAll(".edit-btn, .delete-btn, .resize-handle, .hook")) btn.remove();
+  // Restore hidden inputs and remove their labels so the modal shows editable fields
+  for (const label of clone.querySelectorAll(".field-display")) {
+    const input = label.nextElementSibling;
+    if (input && (input.tagName === "INPUT" || input.tagName === "SELECT" || input.tagName === "TEXTAREA")) {
+      input.style.display = "";
+    }
+    label.remove();
+  }
+  body.appendChild(clone);
+
+  overlay.querySelector(".block-editor-title").textContent = "Edit " + (block.tagName || "Block");
+  overlay.classList.add("active");
+
+  overlay.querySelector(".block-editor-apply").onclick = () => {
+    // Sync inputs/selects/textareas from clone back to original
+    const srcFields = block.querySelectorAll("input, select, textarea");
+    const cloneFields = clone.querySelectorAll("input, select, textarea");
+    for (let i = 0; i < srcFields.length && i < cloneFields.length; i++) {
+      if (srcFields[i].type !== "hidden") srcFields[i].value = cloneFields[i].value;
+    }
+    // Trigger change and input events so block internals sync
+    for (const el of srcFields) {
+      el.dispatchEvent(new Event("change", { bubbles: true }));
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+    // For END blocks: parse and select the errno from the synced value
+    if (block.tagName === "WC-END" && typeof block._selectByCode === "function") {
+      const val = block._el?.input?.value || "";
+      const code = parseInt(val);
+      if (!isNaN(code)) block._selectByCode(code);
+    }
+
+    /* Apply colour */
+    const newColor = colorPicker.value;
+    if (newColor !== defaultColor) {
+      block.dataset.blockColor = newColor;
+      block.style.borderColor = newColor;
+      block.style.borderWidth = "2px";
+    } else {
+      delete block.dataset.blockColor;
+      block.style.borderColor = "";
+      block.style.borderWidth = "";
+    }
+
+    overlay.classList.remove("active");
+  };
+}
+
+/** Check every algorithm block and flag those without an incoming logic connection. */
+function refreshBlockWarnings() {
+  for (const block of document.querySelectorAll("#main-program > [data-block]")) {
+    if (typeof block._checkLogicInput === "function") block._checkLogicInput();
+  }
+
+  /* Warn when a wc-proccall has no connection from its error (!) output hook. */
+  for (const block of document.querySelectorAll("wc-proccall")) {
+    const errHook = block.querySelector(".proccall-error-hook");
+    if (!errHook) continue;
+    const hasConnection = block.wcNextFlow.some(p => p.fromHook === errHook);
+    block.classList.toggle("warn-error-unlinked", !hasConnection);
+  }
+
+  /* Warn when an error-path END block returns 0 (success in an error branch). */
+  for (const block of document.querySelectorAll("wc-end.error-path")) {
+    block.classList.toggle("warn-zero-in-error", block._selectedCode === 0);
+  }
+}
+
+/**
+ * Marks algorithm blocks that are reachable ONLY via error-flow paths.
+ * Adds/removes the `.error-path` class so they render with a red highlight.
+ */
+function refreshErrorPaths() {
+  for (const el of document.querySelectorAll("[data-block].error-path")) {
+    el.classList.remove("error-path");
+  }
+  for (const p of document.querySelectorAll("path.flow.flow-error")) {
+    p.classList.remove("flow-error");
+  }
+
+  const errorHooks = document.querySelectorAll("path.flow.flow-error-source");
+  if (errorHooks.length === 0) return;
+
+  const errorRoots = new Set();
+  for (const path of errorHooks) {
+    if (path.toElement) errorRoots.add(path.toElement);
+    path.classList.add("flow-error");
+  }
+
+  const normalReachable = new Set();
+  const start = $id("main-start");
+  if (start) {
+    const q = [start];
+    while (q.length) {
+      const el = q.pop();
+      if (normalReachable.has(el)) continue;
+      normalReachable.add(el);
+      for (const p of el.wcNextFlow) {
+        if (p.classList.contains("flow-error-source")) continue;
+        if (p.toElement) q.push(p.toElement);
+      }
+    }
+  }
+
+  const eq = [...errorRoots];
+  while (eq.length) {
+    const el = eq.pop();
+    if (normalReachable.has(el)) continue;
+    if (el.classList.contains("error-path")) continue;
+    el.classList.add("error-path");
+    for (const p of el.wcNextFlow) {
+      if (p.toElement) {
+        p.classList.add("flow-error");
+        eq.push(p.toElement);
+      }
+    }
+  }
+}
+
 /** Runs all refresh passes in dependency order. */
 function refreshAll() {
   refreshQuantityOptions();
   refreshUnitOptions();
   refreshDefaultUnitOptions();
   refreshVarRefOptions();
-  refreshProcOptions();
+  refreshBlockWarnings();
+  refreshErrorPaths();
 }
diff --git a/icons/bash.svg b/icons/bash.svg
new file mode 100644
index 0000000..857dd04
--- /dev/null
+++ b/icons/bash.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GNU Bash</title><path d="M21.038,4.9l-7.577-4.498C13.009,0.134,12.505,0,12,0c-0.505,0-1.009,0.134-1.462,0.403L2.961,4.9 C2.057,5.437,1.5,6.429,1.5,7.503v8.995c0,1.073,0.557,2.066,1.462,2.603l7.577,4.497C10.991,23.866,11.495,24,12,24 c0.505,0,1.009-0.134,1.461-0.402l7.577-4.497c0.904-0.537,1.462-1.529,1.462-2.603V7.503C22.5,6.429,21.943,5.437,21.038,4.9z M15.17,18.946l0.013,0.646c0.001,0.078-0.05,0.167-0.111,0.198l-0.383,0.22c-0.061,0.031-0.111-0.007-0.112-0.085L14.57,19.29 c-0.328,0.136-0.66,0.169-0.872,0.084c-0.04-0.016-0.057-0.075-0.041-0.142l0.139-0.584c0.011-0.046,0.036-0.092,0.069-0.121 c0.012-0.011,0.024-0.02,0.036-0.026c0.022-0.011,0.043-0.014,0.062-0.006c0.229,0.077,0.521,0.041,0.802-0.101 c0.357-0.181,0.596-0.545,0.592-0.907c-0.003-0.328-0.181-0.465-0.613-0.468c-0.55,0.001-1.064-0.107-1.072-0.917 c-0.007-0.667,0.34-1.361,0.889-1.8l-0.007-0.652c-0.001-0.08,0.048-0.168,0.111-0.2l0.37-0.236 c0.061-0.031,0.111,0.007,0.112,0.087l0.006,0.653c0.273-0.109,0.511-0.138,0.726-0.088c0.047,0.012,0.067,0.076,0.048,0.151 l-0.144,0.578c-0.011,0.044-0.036,0.088-0.065,0.116c-0.012,0.012-0.025,0.021-0.038,0.028c-0.019,0.01-0.038,0.013-0.057,0.009 c-0.098-0.022-0.332-0.073-0.699,0.113c-0.385,0.195-0.52,0.53-0.517,0.778c0.003,0.297,0.155,0.387,0.681,0.396 c0.7,0.012,1.003,0.318,1.01,1.023C16.105,17.747,15.736,18.491,15.17,18.946z M19.143,17.859c0,0.06-0.008,0.116-0.058,0.145 l-1.916,1.164c-0.05,0.029-0.09,0.004-0.09-0.056v-0.494c0-0.06,0.037-0.093,0.087-0.122l1.887-1.129 c0.05-0.029,0.09-0.004,0.09,0.056V17.859z M20.459,6.797l-7.168,4.427c-0.894,0.523-1.553,1.109-1.553,2.187v8.833 c0,0.645,0.26,1.063,0.66,1.184c-0.131,0.023-0.264,0.039-0.398,0.039c-0.42,0-0.833-0.114-1.197-0.33L3.226,18.64 c-0.741-0.44-1.201-1.261-1.201-2.142V7.503c0-0.881,0.46-1.702,1.201-2.142l7.577-4.498c0.363-0.216,0.777-0.33,1.197-0.33 c0.419,0,0.833,0.114,1.197,0.33l7.577,4.498c0.624,0.371,1.046,1.013,1.164,1.732C21.686,6.557,21.12,6.411,20.459,6.797z"/></svg>
\ No newline at end of file
diff --git a/icons/stop-circle.svg b/icons/stop-circle.svg
new file mode 100644
index 0000000..ae7f76a
--- /dev/null
+++ b/icons/stop-circle.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"/>
+  <rect x="9" y="9" width="6" height="6" rx="1"/>
+</svg>
diff --git a/index.html b/index.html
index e9b0ec3..611f112 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Visual Programming Tool</title>
     <link href="style.css" rel="stylesheet">
+    <link href="libraries/highlight/default.min.css" rel="stylesheet">
   </head>
   <body>
 
@@ -18,22 +19,26 @@
       </wc-start>
     </template>
 
-    <!-- Program exit (exit(0)). -->
+    <!-- Program exit block with autocomplete errno input and description.
+         At least one end block must return 0 throughout the workspace. -->
     <template id="wc-end">
       <wc-end>
         <button class="hook" data-direction="in" data-exit="up" data-link-type="logic"></button>
-        END
+        <div class="end-header">END</div>
+        <div class="end-exit-row">
+          <span class="end-exit-label">exit:</span>
+          <div class="end-exit-autocomplete">
+            <input class="end-errno-input" type="text" placeholder="0  success" autocomplete="off" spellcheck="false">
+            <div class="end-errno-suggestions"></div>
+          </div>
+        </div>
+        <div class="end-desc-row">
+          <span class="end-desc-text">success</span>
+        </div>
       </wc-end>
     </template>
 
-    <!-- Output/print block with a textarea for the format string. -->
-    <template id="wc-output">
-      <wc-output>
-        <textarea placeholder="output string"></textarea>
-        <button class="hook" id="hook-fore" data-direction="in" data-exit="left" data-link-type="logic">in</button>
-        <button class="hook" id="hook-next" data-direction="out" data-exit="right" data-link-type="logic">out</button>
-      </wc-output>
-    </template>
+
 
     <!-- Decision/branch block with condition, yes, no, test, and in ports. -->
     <template id="wc-decision">
@@ -43,9 +48,11 @@
           <span class="decision-label">if</span>
           <button class="hook decision-data-in" data-direction="in" data-link-type="data" data-type="boolean" data-exit="left">bool</button>
         </div>
-        <button class="hook" id="hook-out1" data-direction="out" data-exit="right" data-link-type="logic">yes</button>
-        <button class="hook" id="hook-out0" data-direction="out" data-exit="right" data-link-type="logic">no</button>
         <button class="hook" id="hook-fore" data-direction="in" data-exit="left" data-link-type="logic">in</button>
+        <div class="hook-row">
+          <button class="hook" id="hook-out1" data-direction="out" data-exit="down" data-link-type="logic">yes</button>
+          <button class="hook" id="hook-out0" data-direction="out" data-exit="down" data-link-type="logic">no</button>
+        </div>
       </wc-decision>
     </template>
 
@@ -133,6 +140,29 @@
       </wc-scalar>
     </template>
 
+    <!-- Vector variable block: N-dimensional typed vector with unit and SI conversion. -->
+    <template id="wc-vector">
+      <wc-vector>
+        <div class="datum-row">
+          <input class="var-name" placeholder="name" value="v">
+          [<input class="var-dim" value="3" size="3">]
+          =
+          <input class="var-value" placeholder="0 0 0" value="0">
+          <select class="var-unit">
+            <option value="">(unit)</option>
+          </select>
+        </div>
+        <div class="datum-row">
+          <select class="var-type">
+            <option value="">(no type)</option>
+          </select>
+          <span class="var-si"></span>
+        </div>
+        <span class="var-cname">v</span>
+        <input class="var-comment" placeholder="// comment">
+      </wc-vector>
+    </template>
+
     <!-- String variable block: C string (char* + length struct). -->
     <template id="wc-string">
       <wc-string>
@@ -160,6 +190,9 @@
           </select>
           <span class="array-bracket">[]</span>
           <span class="array-count">0 elements</span>
+          <span class="array-vec-row">
+            &times; <input class="array-vec-dim" value="1" size="2" title="vector dimension (1 = scalar)">
+          </span>
         </div>
         <span class="var-cname">arr</span>
         <input class="var-comment" placeholder="// comment">
@@ -215,8 +248,10 @@
           <button class="hook" data-direction="in" data-link-type="data" data-type="scalar" data-exit="left">idx</button>
           <span class="assign-bracket">]</span>
         </div>
-        <button class="hook" id="hook-fore" data-direction="in" data-exit="left" data-link-type="logic">in</button>
-        <button class="hook" id="hook-next" data-direction="out" data-exit="right" data-link-type="logic">out</button>
+        <button class="hook" id="hook-fore" data-direction="in" data-exit="left" data-link-type="logic"></button>
+        <div class="hook-row">
+          <button class="hook" id="hook-next" data-direction="out" data-exit="down" data-link-type="logic"></button>
+        </div>
       </wc-assign>
     </template>
 
@@ -226,8 +261,8 @@
     <template id="wc-procedure">
       <wc-procedure>
         <div class="proc-header">
-          <span class="proc-label">PROCEDURE</span>
-          <input class="proc-name" placeholder="proc_name" value="proc">
+          <input class="proc-natural-name" placeholder="Procedure name" value="My Procedure">
+          <span class="proc-tech-name">proc</span>
         </div>
         <div class="proc-params">
           <div class="proc-params-col">
@@ -235,13 +270,26 @@
             <div class="proc-inputs"></div>
             <button class="proc-add-input">+ input</button>
           </div>
+          <span class="proc-arrow">&rarr;</span>
           <div class="proc-params-col">
             <span class="proc-params-heading">outputs</span>
             <div class="proc-outputs"></div>
             <button class="proc-add-output">+ output</button>
           </div>
         </div>
+        <div class="proc-return-row">
+          <span class="proc-return-label">return:</span>
+          <select class="proc-return-style">
+            <option value="pointer">by pointer</option>
+            <option value="value">by value</option>
+            <option value="error">error int</option>
+          </select>
+        </div>
         <button class="hook"></button>
+        <details class="proc-description">
+          <summary class="proc-desc-summary">Description</summary>
+          <div class="proc-desc-body"></div>
+        </details>
       </wc-procedure>
     </template>
 
@@ -249,10 +297,11 @@
     <template id="wc-proccall">
       <wc-proccall>
         <div class="proccall-header">
+          <img class="proccall-icon" src="" alt="">
           <span class="proccall-label">CALL</span>
-          <select class="proccall-select">
-            <option value="">(select procedure)</option>
-          </select>
+          <span class="proccall-nat-name" title="(select procedure)"></span>
+          <span class="proccall-tech-name"></span>
+          <button class="proccall-change-btn" title="change procedure">change</button>
         </div>
         <div class="proccall-name-row">
           <input class="proccall-name" placeholder="result var" value="">
@@ -261,8 +310,15 @@
           <div class="proccall-inputs"></div>
           <div class="proccall-outputs"></div>
         </div>
-        <button class="hook hook-in" data-direction="in" data-link-type="logic" data-exit="up">in</button>
-        <button class="hook hook-out" data-direction="out" data-link-type="logic" data-exit="down">out</button>
+        <div class="proccall-fmtargs" style="display:none">
+          <div class="proccall-fmtargs-list"></div>
+          <button class="proccall-add-fmtarg" style="display:none">+ add arg</button>
+        </div>
+        <button class="hook hook-in" data-direction="in" data-link-type="logic" data-exit="up"></button>
+        <div class="hook-row">
+          <button class="hook hook-out" data-direction="out" data-link-type="logic" data-exit="down"></button>
+          <button class="hook proccall-error-hook" data-direction="out" data-link-type="logic" data-exit="down" title="error path">!</button>
+        </div>
       </wc-proccall>
     </template>
 
@@ -293,7 +349,7 @@
     <!-- Tab content area that fills remaining vertical space. -->
     <div class="tab-body">
       <!-- Algorithm pane: flowchart toolbar + drawing surface with SVG connections. -->
-      <div class="tab-pane active" id="pane-algorithm">
+      <div class="tab-pane active" id="pane-algorithm" data-tab="algorithm">
         <div class="pane-toolbar">
           <button data-action="decision" title="new decision">
             <img src="icons/diamond.svg" width="18" height="18" alt="">
@@ -304,15 +360,20 @@
           <button data-action="varref" title="new variable">
             <img src="icons/variable.svg" width="18" height="18" alt="">
           </button>
-          <button data-action="output" title="new output">
-            <img src="icons/terminal.svg" width="18" height="18" alt="">
-          </button>
+
           <button data-action="proccall" title="new procedure call">
             <img src="icons/book-open.svg" width="18" height="18" alt="">
           </button>
           <button data-action="assign" title="new assignment">
             <img src="icons/arrow-right-circle.svg" width="18" height="18" alt="">
           </button>
+          <button data-action="end" title="new end block">
+            <img src="icons/stop-circle.svg" width="18" height="18" alt="">
+          </button>
+          <span class="toolbar-sep"></span>
+          <button data-action="add-section" title="draw a logic section">
+            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="2"><line x1="9" y1="3" x2="9" y2="15"/><line x1="3" y1="9" x2="15" y2="9"/></svg>
+          </button>
         </div>
         <div id="draw-area">
           <svg id="connections" xmlns="http://www.w3.org/2000/svg">
@@ -324,7 +385,7 @@
       </div>
 
       <!-- Data pane: toolbar for creating variables/quantities + variable area. -->
-      <div class="tab-pane" id="pane-data">
+      <div class="tab-pane" id="pane-data" data-tab="data">
         <div class="pane-toolbar">
           <div class="btn-group">
             <button data-action="variable" title="new variable">
@@ -335,14 +396,16 @@
               <button data-action="scalar">scalar</button>
               <button data-action="string">string</button>
               <button data-action="array">array</button>
+              <button data-action="vector">vector</button>
             </div>
           </div>
         </div>
+        <div class="list-header">Name &nbsp; Value &nbsp; Type/Unit &nbsp; C Name &nbsp; Comment</div>
         <div id="variable-area"></div>
       </div>
 
       <!-- Measurements pane: toolbar for creating units + node area. -->
-      <div class="tab-pane" id="pane-measurements">
+      <div class="tab-pane" id="pane-measurements" data-tab="measurements">
           <div class="pane-toolbar">
           <button data-action="quantity" title="new quantity">
             <img src="icons/sliders.svg" width="18" height="18" alt="">
@@ -351,15 +414,22 @@
             <img src="icons/grid.svg" width="18" height="18" alt="">
           </button>
         </div>
+        <div class="list-header">Quantities — Name &nbsp; L &nbsp; M &nbsp; T &nbsp; I &nbsp; &Theta; &nbsp; N &nbsp; J &nbsp; Min &nbsp; Max &nbsp; Default Unit</div>
         <div id="data-area"></div>
       </div>
 
       <!-- Procedures pane: library sub-tabs + procedure definitions. -->
-      <div class="tab-pane" id="pane-procedures">
+      <div class="tab-pane" id="pane-procedures" data-tab="procedures">
         <div class="pane-toolbar">
           <button data-action="add-library" title="new library">
             <img src="icons/folder-plus.svg" width="18" height="18" alt="">
           </button>
+          <div class="btn-group">
+            <button data-action="add-library-index" title="add library from index">
+              <img src="icons/book-open.svg" width="18" height="18" alt="">
+            </button>
+            <div class="submenu" data-action="library-index-submenu"></div>
+          </div>
           <button data-action="add-procedure" title="new procedure">
             <img src="icons/file-plus.svg" width="18" height="18" alt="">
           </button>
@@ -368,13 +438,17 @@
       </div>
     </div>
 
-    <!-- Bottom toolbar: code generation button and output textarea. -->
+    <!-- Bottom toolbar: code generation button and highlighted output. -->
     <div class="global-toolbar">
       <button data-action="generate">Generate code</button>
       <button data-action="save">Save</button>
       <button data-action="load">Load</button>
       <button data-action="new">New</button>
-      <textarea id="c-code"></textarea>
+      <button data-action="copy-code">Copy</button>
+      <button data-action="run-tests">Tests</button>
+      <div class="code-output" id="c-code-container">
+        <pre><code id="c-code"></code></pre>
+      </div>
     </div>
     <div id="error-overlay" class="error-overlay">
       <div class="error-box">
@@ -383,6 +457,53 @@
         <div class="error-msg"></div>
       </div>
     </div>
+
+    <!-- Procedure browser modal: tree-based procedure picker. -->
+    <div id="proc-browser-overlay" class="proc-browser-overlay">
+      <div class="proc-browser-box">
+        <div class="proc-browser-header">
+          Select Procedure
+          <input class="proc-browser-search" type="text" placeholder="Search procedures..." spellcheck="false">
+        </div>
+        <div class="proc-browser-tree"></div>
+        <div class="proc-browser-empty"></div>
+        <div class="proc-browser-footer">
+          <button class="proc-browser-cancel">Cancel</button>
+          <button class="proc-browser-select">Select</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- New Project modal -->
+    <div id="new-project-overlay" class="modal-overlay" style="display:none">
+      <div class="modal">
+        <h2>New Project</h2>
+        <div class="modal-field">
+          <label for="project-name">Project Name</label>
+          <input type="text" id="project-name" class="modal-input" placeholder="My Project" value="Untitled">
+        </div>
+        <div class="modal-field">
+          <label>Template</label>
+          <div class="template-list" id="template-list">
+            <div class="template-card selected" data-template="console">
+              <span class="template-icon">&#9632;</span>
+              <span class="template-name">Console Program</span>
+              <span class="template-desc">Basic C program with stdio</span>
+            </div>
+            <div class="template-card" data-template="sdl3-triangle">
+              <span class="template-icon">&#9651;</span>
+              <span class="template-name">SDL3 Hello Triangle</span>
+              <span class="template-desc">SDL3 + OpenGL colored triangle</span>
+            </div>
+          </div>
+        </div>
+        <div class="modal-actions">
+          <button class="modal-btn modal-cancel">Cancel</button>
+          <button class="modal-btn modal-create">Create</button>
+        </div>
+      </div>
+    </div>
+
     <script>
     window.MathJax = {
       tex: { inlineMath: [['$', '$']], displayMath: [['$$', '$$']] },
@@ -394,13 +515,21 @@
     <script src="dom.js"></script>
     <script src="helpers.js"></script>
     <script src="error.js"></script>
+    <script src="errno-data.js"></script>
     <script src="draw.js"></script>
+    <script src="sections.js"></script>
     <script src="wcblock.js"></script>
     <script src="blocks-algo.js"></script>
     <script src="blocks-data.js"></script>
     <script src="blocks-proc.js"></script>
     <script src="wcprogram.js"></script>
     <script src="persist.js"></script>
+    <script src="lib-loader.js"></script>
+    <script src="libraries/highlight/highlight.min.js"></script>
+    <script src="libraries/highlight/c.min.js"></script>
+    <script src="proc-browser.js"></script>
+    <script src="templates.js"></script>
     <script src="app.js"></script>
+    <script src="tests/app/test-runner.js"></script>
   </body>
 </html>
diff --git a/lib-icons/c.svg b/lib-icons/c.svg
new file mode 100644
index 0000000..9234e43
--- /dev/null
+++ b/lib-icons/c.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <circle cx="50" cy="50" r="45" fill="#555"/>
+  <text x="50" y="68" font-size="56" font-family="monospace" font-weight="bold" fill="white" text-anchor="middle">C</text>
+</svg>
diff --git a/lib-icons/gl.svg b/lib-icons/gl.svg
new file mode 100644
index 0000000..6a24954
--- /dev/null
+++ b/lib-icons/gl.svg
@@ -0,0 +1 @@
+<svg fill="#5586A4" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>OpenGL</title><path d="M3.607 13.88c1.32 1.197 3.862 2.008 6.781 2.008 2.375 0 4.503-.481 5.923-1.325-1.555 1.413-4.328 2.41-7.495 2.41C3.947 16.972 0 14.745 0 11.999c0-2.747 3.948-4.973 8.818-4.972 3.179.001 5.96 1.001 7.511 2.425-1.421-.85-3.558-1.34-5.941-1.34-2.828 0-5.303.761-6.655 1.897.01-.004.019-.008.028-.013.253-.119.548-.179.885-.179.336 0 .631.06.885.179.253.12.465.28.635.48.171.201.298.431.383.691.086.26.128.531.128.812 0 .282-.042.553-.128.813-.085.26-.212.49-.383.691-.17.2-.382.359-.635.477-.254.117-.549.176-.885.176-.337 0-.632-.059-.885-.176a2.2 2.2 0 0 1-.154-.08m-.347-1.283c.056.203.143.385.262.547s.271.292.458.391q.279.147.666.147t.666-.147c.186-.099.339-.229.458-.391s.206-.344.261-.547a2.3 2.3 0 0 0 0-1.232c-.055-.203-.142-.385-.261-.547s-.272-.293-.458-.391-.408-.148-.666-.148-.48.05-.666.148c-.187.099-.339.229-.458.391s-.206.344-.262.547c-.055.202-.083.407-.083.616 0 .208.028.414.083.616m4.254-1.183v.356h.009c.073-.146.187-.252.344-.318.156-.066.328-.099.515-.099.208 0 .39.037.544.112.155.074.283.175.385.302.103.128.18.274.232.441.052.166.078.342.078.529s-.025.363-.075.529c-.051.167-.127.312-.229.435-.103.124-.231.222-.386.293-.154.071-.334.107-.539.107-.066 0-.139-.007-.221-.02a1.25 1.25 0 0 1-.242-.067.94.94 0 0 1-.227-.125.67.67 0 0 1-.179-.196h-.009v1.359h-.446v-3.638zm1.585.936c-.033-.117-.083-.222-.151-.313-.067-.092-.154-.165-.26-.219-.105-.054-.229-.081-.371-.081-.149 0-.275.028-.379.086a.76.76 0 0 0-.255.226c-.066.094-.113.2-.143.318-.029.119-.044.24-.044.362 0 .129.016.253.047.373.031.121.08.227.148.319.067.091.155.165.262.221q.162.084.39.084c.152 0 .28-.029.382-.087a.694.694 0 0 0 .246-.229c.063-.095.108-.203.135-.325.028-.122.042-.248.042-.377 0-.122-.016-.241-.049-.358m2.799 1.527c-.201.149-.455.224-.761.224q-.324 0-.561-.102c-.159-.068-.292-.163-.4-.285-.107-.122-.188-.268-.242-.438-.054-.169-.084-.354-.091-.554 0-.2.031-.384.094-.55.062-.166.15-.311.263-.433s.248-.217.402-.285c.155-.067.325-.101.51-.101.24 0 .439.048.598.145.158.097.285.22.381.37q.144.2235.198.489c.037.177.052.345.045.505h-2.018c-.004.115.01.224.041.328.032.103.082.195.151.274.07.08.158.143.266.191.108.047.234.071.38.071.187 0 .341-.043.461-.128q.1785-.1275.237-.387h.438c-.059.295-.19.517-.392.666m-.108-1.688c-.04-.092-.093-.171-.161-.237a.77.77 0 0 0-.239-.157c-.092-.039-.194-.059-.304-.059-.115 0-.218.02-.31.059a.71.71 0 0 0-.237.16.8.8 0 0 0-.156.236c-.038.09-.06.186-.067.287h1.545a.86.86 0 0 0-.071-.289m1.259-.775v.418h.009c.185-.32.478-.479.88-.479.178 0 .326.023.445.071s.215.114.288.199c.074.085.125.186.155.303.029.117.044.247.044.39v1.733h-.446v-1.783q0-.2445-.147-.387c-.097-.095-.231-.143-.402-.143-.136 0-.253.021-.353.062-.099.04-.182.098-.248.173a.75.75 0 0 0-.149.262c-.033.1-.049.21-.049.328v1.487h-.447v-2.634zm4.908 2.606c-.202.083-.406.125-.611.125-.324 0-.616-.056-.875-.166s-.477-.262-.655-.456c-.178-.193-.314-.42-.409-.682-.095-.261-.142-.542-.142-.844 0-.31.047-.597.142-.862.094-.265.23-.496.408-.694.177-.197.395-.352.654-.464.259-.113.55-.169.875-.169.217 0 .427.032.631.096.203.064.387.158.551.282.164.125.3.277.406.459.107.182.172.391.196.626h-.889c-.055-.231-.162-.405-.32-.521-.159-.116-.35-.174-.575-.174-.21 0-.388.04-.534.119s-.265.186-.356.319q-.1365.201-.198.456-.063.255-.063.528c0 .174.021.344.063.508.041.165.108.313.199.444.091.132.209.237.356.316.146.08.324.119.534.119.309 0 .547-.076.715-.228.169-.152.267-.372.294-.661h-.936v-.681h1.776v2.237h-.591l-.095-.47c-.166.209-.35.355-.551.438m2.746-4.107v3.368h2.063v.768h-2.992V9.913zM24 13.667c0 .07-.017.134-.052.194a.389.389 0 0 1-.336.194.389.389 0 0 1-.336-.194.39.39 0 0 1-.052-.194.389.389 0 0 1 .194-.336.39.39 0 0 1 .194-.052.389.389 0 0 1 .336.194c.035.06.052.125.052.194m-.075 0c0-.086-.031-.16-.092-.221a.302.302 0 0 0-.221-.092c-.086 0-.16.031-.221.092a.302.302 0 0 0-.092.221c0 .086.031.16.092.221s.135.092.221.092.16-.031.221-.092a.302.302 0 0 0 .092-.221m-.489-.207h.186c.052 0 .09.01.114.032.023.021.035.049.035.085q0 .0405-.027.072c-.018.02-.046.035-.085.044.016.006.028.013.035.019q.0165.015.033.042c.001.002.023.042.067.12h-.122c-.039-.079-.066-.126-.079-.141-.014-.016-.028-.023-.041-.023-.003 0-.007 0-.013.001v.163h-.103zm.103.176h.045q.045 0 .063-.015a.046.046 0 0 0 .018-.037.05.05 0 0 0-.017-.038c-.012-.009-.032-.014-.06-.014h-.049z"/></svg>
\ No newline at end of file
diff --git a/lib-icons/glad.svg b/lib-icons/glad.svg
new file mode 100644
index 0000000..2bf3024
--- /dev/null
+++ b/lib-icons/glad.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <polygon points="50,5 85,30 85,70 50,95 15,70 15,30" fill="#6a4c93" stroke="#4a2c73" stroke-width="3"/>
+  <text x="50" y="65" font-size="18" font-family="sans-serif" font-weight="bold" fill="white" text-anchor="middle">GLAD</text>
+</svg>
diff --git a/lib-icons/glfw.svg b/lib-icons/glfw.svg
new file mode 100644
index 0000000..6e197a1
--- /dev/null
+++ b/lib-icons/glfw.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <circle cx="50" cy="50" r="45" fill="#222"/>
+  <text x="50" y="57" font-size="18" font-family="sans-serif" font-weight="bold" fill="#8f8" text-anchor="middle">GLFW</text>
+</svg>
diff --git a/lib-icons/sdl3.svg b/lib-icons/sdl3.svg
new file mode 100644
index 0000000..2df7c8f
--- /dev/null
+++ b/lib-icons/sdl3.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect x="5" y="20" width="90" height="60" rx="10" fill="#333"/>
+  <text x="50" y="60" font-size="18" font-family="sans-serif" font-weight="bold" fill="#5cf" text-anchor="middle">SDL3</text>
+</svg>
diff --git a/lib-loader.js b/lib-loader.js
new file mode 100644
index 0000000..3a7cf30
--- /dev/null
+++ b/lib-loader.js
@@ -0,0 +1,136 @@
+// ── On-demand library loader ────────────────────────────────────────────────
+//
+// Fetches procedure definitions from JSON files in the libraries/ directory.
+// At startup only the index is loaded; individual libraries are fetched when
+// the user clicks their tab for the first time.
+//
+// Depends on: app.js (addLibTab, deriveNaturalName)
+//             blocks-proc.js (WCProcedure)
+//             wcprogram.js (BLOCK_REGISTRY)
+
+
+/** @type {Set<string>} Tracks which libraries have been loaded (prevents re-loading). */
+const LOADED_LIBS = new Set();
+/** @type {Array<{id:string, name:string, group?:string}>} */
+let LIB_INDEX = [];
+
+/**
+ * Creates param rows on a procedure block and sets their name/type values.
+ * Follows the same pattern as WCProcedure.restoreData().
+ * @param {HTMLElement} proc A wc-procedure element
+ * @param {Array<[string,string]>} inputs Array of [name, type] pairs
+ * @param {Array<[string,string]>} outputs Array of [name, type] pairs
+ */
+function _addProcParams(proc, inputs, outputs) {
+  for (const [name, type] of inputs) {
+    proc._addParamRow(proc.querySelector(".proc-inputs"), "in");
+    const rows = proc.querySelectorAll(".proc-inputs .proc-param-row");
+    const last = rows[rows.length - 1];
+    last.querySelector(".proc-param-name").value = name;
+    last.querySelector(".proc-param-type").value = type;
+  }
+  for (const [name, type] of outputs) {
+    proc._addParamRow(proc.querySelector(".proc-outputs"), "out");
+    const rows = proc.querySelectorAll(".proc-outputs .proc-param-row");
+    const last = rows[rows.length - 1];
+    last.querySelector(".proc-param-name").value = name;
+    last.querySelector(".proc-param-type").value = type;
+  }
+}
+
+/**
+ * Fetches libraries/index.json and returns the library metadata array.
+ * Called once at startup.
+ * @returns {Promise<Array<{id:string, name:string, group?:string}>>}
+ */
+async function loadLibraryIndex() {
+  try {
+    const res = await fetch("libraries/index.json");
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    LIB_INDEX = await res.json();
+  } catch (e) {
+    showError("Could not load library index: " + e.message);
+    LIB_INDEX = [];
+  }
+  return LIB_INDEX;
+}
+
+
+/**
+ * Loads a single library by its id (e.g. "stdio", "sdl3").
+ * Creates the tab if it doesn't exist yet, then populates all procedures.
+ * Idempotent — subsequent calls for the same lib are no-ops.
+ */
+async function loadLibrary(libId) {
+  if (LOADED_LIBS.has(libId)) return;
+  LOADED_LIBS.add(libId);
+
+  const prog = $id("main-program");
+  if (!prog) return;
+
+  let data;
+  try {
+    const res = await fetch(`libraries/${libId}.json`);
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    data = await res.json();
+  } catch (e) {
+    showError(`Could not load library "${libId}": ${e.message}`);
+    return;
+  }
+
+  const procs = data.procedures;
+  if (!procs || !procs.length) return;
+
+  /* Mark this lib as the active tab if it's the first one loaded */
+  const isFirst = LOADED_LIBS.size === 1;
+
+  /* Ensure the tab exists — but don't duplicate if already created from index */
+  if (!document.querySelector(`.lib-tab[data-lib-name="${libId}"]`)) {
+    addLibTab(libId, isFirst);
+  }
+
+  for (const pd of procs) {
+    const proc = prog.newProcedureNode(libId);
+    if (!proc) continue;
+    proc.querySelector(".proc-tech-name").textContent = pd.name;
+    proc.querySelector(".proc-natural-name").value = pd.naturalName || deriveNaturalName(pd.name);
+    if (pd.desc) {
+      const db = proc.querySelector(".proc-desc-body");
+      if (db) db.textContent = pd.desc;
+    }
+    proc.dataset.readonly = "true";
+    if (pd.returnStyle === "value") proc.dataset.returnStyle = "value";
+    if (pd.returnStyle === "error") proc.dataset.returnStyle = "error";
+    if (pd.formatString) proc.dataset.formatString = "true";
+    _addProcParams(proc, pd.inputs || [], pd.outputs || []);
+  }
+
+}
+
+
+/**
+ * Returns the loaded library index (synchronous after loadLibraryIndex).
+ * @returns {Array<{id:string, name:string, group?:string}>}
+ */
+function getLibraryIndex() {
+  return LIB_INDEX;
+}
+
+
+/**
+ * Checks if a library has been loaded yet.
+ * @param {string} libId
+ * @returns {boolean}
+ */
+function isLibraryLoaded(libId) {
+  return LOADED_LIBS.has(libId);
+}
+
+
+/**
+ * Marks a library as loaded (for user-created libs that don't have JSON files).
+ * @param {string} libId
+ */
+function markLibLoaded(libId) {
+  LOADED_LIBS.add(libId);
+}
diff --git a/libraries/gl.json b/libraries/gl.json
new file mode 100644
index 0000000..fc17bf7
--- /dev/null
+++ b/libraries/gl.json
@@ -0,0 +1,136 @@
+{
+  "procedures": [
+    {
+      "name": "glCreateShader",
+      "inputs": [["type","unsigned int"]],
+      "outputs": [["shader","unsigned int"]],
+      "desc": "Creates an empty shader object of the specified type."
+    },
+    {
+      "name": "glShaderSource",
+      "inputs": [["shader","unsigned int"],["count","int"],["source","string"]],
+      "outputs": [],
+      "desc": "Sets the source code for a shader object."
+    },
+    {
+      "name": "glCompileShader",
+      "inputs": [["shader","unsigned int"]],
+      "outputs": [],
+      "desc": "Compiles the source code of a shader object."
+    },
+    {
+      "name": "glGetShaderiv",
+      "inputs": [["shader","unsigned int"],["pname","unsigned int"]],
+      "outputs": [["params","int"]],
+      "desc": "Retrieves a parameter value from a shader object."
+    },
+    {
+      "name": "glCreateProgram",
+      "inputs": [],
+      "outputs": [["program","unsigned int"]],
+      "desc": "Creates an empty shader program object."
+    },
+    {
+      "name": "glAttachShader",
+      "inputs": [["program","unsigned int"],["shader","unsigned int"]],
+      "outputs": [],
+      "desc": "Attaches a shader object to a shader program."
+    },
+    {
+      "name": "glLinkProgram",
+      "inputs": [["program","unsigned int"]],
+      "outputs": [],
+      "desc": "Links the attached shaders into an executable program."
+    },
+    {
+      "name": "glGetProgramiv",
+      "inputs": [["program","unsigned int"],["pname","unsigned int"]],
+      "outputs": [["params","int"]],
+      "desc": "Retrieves a parameter value from a program object."
+    },
+    {
+      "name": "glGenVertexArrays",
+      "inputs": [["n","unsigned int"]],
+      "outputs": [["arrays","unsigned int"]],
+      "desc": "Generates vertex array object (VAO) names."
+    },
+    {
+      "name": "glBindVertexArray",
+      "inputs": [["array","unsigned int"]],
+      "outputs": [],
+      "desc": "Binds a VAO for use in subsequent vertex operations."
+    },
+    {
+      "name": "glGenBuffers",
+      "inputs": [["n","unsigned int"]],
+      "outputs": [["buffers","unsigned int"]],
+      "desc": "Generates buffer object names."
+    },
+    {
+      "name": "glBindBuffer",
+      "inputs": [["target","unsigned int"],["buffer","unsigned int"]],
+      "outputs": [],
+      "desc": "Binds a buffer object to a target."
+    },
+    {
+      "name": "glBufferData",
+      "inputs": [["target","unsigned int"],["size","int"],["data","string"],["usage","unsigned int"]],
+      "outputs": [],
+      "desc": "Uploads vertex data to the currently bound buffer."
+    },
+    {
+      "name": "glVertexAttribPointer",
+      "inputs": [["index","unsigned int"],["size","int"],["type","unsigned int"],["normalized","int"],["stride","int"],["pointer","int"]],
+      "outputs": [],
+      "desc": "Defines how vertex data is mapped to a shader attribute."
+    },
+    {
+      "name": "glEnableVertexAttribArray",
+      "inputs": [["index","unsigned int"]],
+      "outputs": [],
+      "desc": "Enables a vertex attribute array for rendering."
+    },
+    {
+      "name": "glUseProgram",
+      "inputs": [["program","unsigned int"]],
+      "outputs": [],
+      "desc": "Activates a shader program for rendering."
+    },
+    {
+      "name": "glDrawArrays",
+      "inputs": [["mode","unsigned int"],["first","int"],["count","int"]],
+      "outputs": [],
+      "desc": "Renders primitives from the currently bound vertex data."
+    },
+    {
+      "name": "glClear",
+      "inputs": [["mask","unsigned int"]],
+      "outputs": [],
+      "desc": "Clears the specified buffers (color, depth, stencil)."
+    },
+    {
+      "name": "glClearColor",
+      "inputs": [["red","float"],["green","float"],["blue","float"],["alpha","float"]],
+      "outputs": [],
+      "desc": "Sets the clear color used when clearing the color buffer."
+    },
+    {
+      "name": "glDeleteShader",
+      "inputs": [["shader","unsigned int"]],
+      "outputs": [],
+      "desc": "Deletes a shader object and frees its resources."
+    },
+    {
+      "name": "glDeleteProgram",
+      "inputs": [["program","unsigned int"]],
+      "outputs": [],
+      "desc": "Deletes a shader program and frees its resources."
+    },
+    {
+      "name": "glViewport",
+      "inputs": [["x","int"],["y","int"],["width","int"],["height","int"]],
+      "outputs": [],
+      "desc": "Sets the viewport rectangle for rendering."
+    }
+  ]
+}
diff --git a/libraries/glad.json b/libraries/glad.json
new file mode 100644
index 0000000..6787923
--- /dev/null
+++ b/libraries/glad.json
@@ -0,0 +1,10 @@
+{
+  "procedures": [
+    {
+      "name": "gladLoadGL",
+      "inputs": [],
+      "outputs": [["result","int"]],
+      "desc": "Loads all OpenGL function pointers after context creation."
+    }
+  ]
+}
diff --git a/libraries/glfw.json b/libraries/glfw.json
new file mode 100644
index 0000000..dfaa694
--- /dev/null
+++ b/libraries/glfw.json
@@ -0,0 +1,46 @@
+{
+  "procedures": [
+    {
+      "name": "glfwInit",
+      "inputs": [],
+      "outputs": [["result","int"]],
+      "desc": "Initializes the GLFW library for window and input management."
+    },
+    {
+      "name": "glfwCreateWindow",
+      "inputs": [["width","int"],["height","int"],["title","string"]],
+      "outputs": [["window","int"]],
+      "desc": "Creates a window with the specified dimensions and title."
+    },
+    {
+      "name": "glfwMakeContextCurrent",
+      "inputs": [["window","int"]],
+      "outputs": [],
+      "desc": "Sets the OpenGL context of the given window as current."
+    },
+    {
+      "name": "glfwSwapBuffers",
+      "inputs": [["window","int"]],
+      "outputs": [],
+      "desc": "Swaps the front and back buffers of the window."
+    },
+    {
+      "name": "glfwPollEvents",
+      "inputs": [],
+      "outputs": [],
+      "desc": "Processes pending window events (keyboard, mouse, etc.)."
+    },
+    {
+      "name": "glfwWindowShouldClose",
+      "inputs": [["window","int"]],
+      "outputs": [["result","int"]],
+      "desc": "Checks if the window close button has been pressed."
+    },
+    {
+      "name": "glfwTerminate",
+      "inputs": [],
+      "outputs": [],
+      "desc": "Cleans up GLFW resources and terminates the library."
+    }
+  ]
+}
diff --git a/libraries/highlight/c.min.js b/libraries/highlight/c.min.js
new file mode 100644
index 0000000..cb2d348
--- /dev/null
+++ b/libraries/highlight/c.min.js
@@ -0,0 +1,40 @@
+/*! `c` grammar compiled for Highlight.js 11.9.0 */
+(()=>{var e=(()=>{"use strict";return e=>{const n=e.regex,t=e.COMMENT("//","$",{
+contains:[{begin:/\\\n/}]
+}),s="decltype\\(auto\\)",a="[a-zA-Z_]\\w*::",r="("+s+"|"+n.optional(a)+"[a-zA-Z_]\\w*"+n.optional("<[^<>]+>")+")",i={
+className:"type",variants:[{begin:"\\b[a-z\\d_]*_t\\b"},{
+match:/\batomic_[a-z]{3,6}\b/}]},l={className:"string",variants:[{
+begin:'(u8?|U|L)?"',end:'"',illegal:"\\n",contains:[e.BACKSLASH_ESCAPE]},{
+begin:"(u8?|U|L)?'(\\\\(x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4,8}|[0-7]{3}|\\S)|.)",
+end:"'",illegal:"."},e.END_SAME_AS_BEGIN({
+begin:/(?:u8?|U|L)?R"([^()\\ ]{0,16})\(/,end:/\)([^()\\ ]{0,16})"/})]},o={
+className:"number",variants:[{begin:"\\b(0b[01']+)"},{
+begin:"(-?)\\b([\\d']+(\\.[\\d']*)?|\\.[\\d']+)((ll|LL|l|L)(u|U)?|(u|U)(ll|LL|l|L)?|f|F|b|B)"
+},{
+begin:"(-?)(\\b0[xX][a-fA-F0-9']+|(\\b[\\d']+(\\.[\\d']*)?|\\.[\\d']+)([eE][-+]?[\\d']+)?)"
+}],relevance:0},c={className:"meta",begin:/#\s*[a-z]+\b/,end:/$/,keywords:{
+keyword:"if else elif endif define undef warning error line pragma _Pragma ifdef ifndef include"
+},contains:[{begin:/\\\n/,relevance:0},e.inherit(l,{className:"string"}),{
+className:"string",begin:/<.*?>/},t,e.C_BLOCK_COMMENT_MODE]},d={
+className:"title",begin:n.optional(a)+e.IDENT_RE,relevance:0
+},g=n.optional(a)+e.IDENT_RE+"\\s*\\(",u={
+keyword:["asm","auto","break","case","continue","default","do","else","enum","extern","for","fortran","goto","if","inline","register","restrict","return","sizeof","struct","switch","typedef","union","volatile","while","_Alignas","_Alignof","_Atomic","_Generic","_Noreturn","_Static_assert","_Thread_local","alignas","alignof","noreturn","static_assert","thread_local","_Pragma"],
+type:["float","double","signed","unsigned","int","short","long","char","void","_Bool","_Complex","_Imaginary","_Decimal32","_Decimal64","_Decimal128","const","static","complex","bool","imaginary"],
+literal:"true false NULL",
+built_in:"std string wstring cin cout cerr clog stdin stdout stderr stringstream istringstream ostringstream auto_ptr deque list queue stack vector map set pair bitset multiset multimap unordered_set unordered_map unordered_multiset unordered_multimap priority_queue make_pair array shared_ptr abort terminate abs acos asin atan2 atan calloc ceil cosh cos exit exp fabs floor fmod fprintf fputs free frexp fscanf future isalnum isalpha iscntrl isdigit isgraph islower isprint ispunct isspace isupper isxdigit tolower toupper labs ldexp log10 log malloc realloc memchr memcmp memcpy memset modf pow printf putchar puts scanf sinh sin snprintf sprintf sqrt sscanf strcat strchr strcmp strcpy strcspn strlen strncat strncmp strncpy strpbrk strrchr strspn strstr tanh tan vfprintf vprintf vsprintf endl initializer_list unique_ptr"
+},m=[c,i,t,e.C_BLOCK_COMMENT_MODE,o,l],_={variants:[{begin:/=/,end:/;/},{
+begin:/\(/,end:/\)/},{beginKeywords:"new throw return else",end:/;/}],
+keywords:u,contains:m.concat([{begin:/\(/,end:/\)/,keywords:u,
+contains:m.concat(["self"]),relevance:0}]),relevance:0},p={
+begin:"("+r+"[\\*&\\s]+)+"+g,returnBegin:!0,end:/[{;=]/,excludeEnd:!0,
+keywords:u,illegal:/[^\w\s\*&:<>.]/,contains:[{begin:s,keywords:u,relevance:0},{
+begin:g,returnBegin:!0,contains:[e.inherit(d,{className:"title.function"})],
+relevance:0},{relevance:0,match:/,/},{className:"params",begin:/\(/,end:/\)/,
+keywords:u,relevance:0,contains:[t,e.C_BLOCK_COMMENT_MODE,l,o,i,{begin:/\(/,
+end:/\)/,keywords:u,relevance:0,contains:["self",t,e.C_BLOCK_COMMENT_MODE,l,o,i]
+}]},i,t,e.C_BLOCK_COMMENT_MODE,c]};return{name:"C",aliases:["h"],keywords:u,
+disableAutodetect:!0,illegal:"</",contains:[].concat(_,p,m,[c,{
+begin:e.IDENT_RE+"::",keywords:u},{className:"class",
+beginKeywords:"enum class struct union",end:/[{;:<>=]/,contains:[{
+beginKeywords:"final class struct"},e.TITLE_MODE]}]),exports:{preprocessor:c,
+strings:l,keywords:u}}}})();hljs.registerLanguage("c",e)})();
\ No newline at end of file
diff --git a/libraries/highlight/default.min.css b/libraries/highlight/default.min.css
new file mode 100644
index 0000000..a75ea91
--- /dev/null
+++ b/libraries/highlight/default.min.css
@@ -0,0 +1,9 @@
+/*!
+  Theme: Default
+  Description: Original highlight.js style
+  Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
+  Maintainer: @highlightjs/core-team
+  Website: https://highlightjs.org/
+  License: see project LICENSE
+  Touched: 2021
+*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#f3f3f3;color:#444}.hljs-comment{color:#697070}.hljs-punctuation,.hljs-tag{color:#444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:#444}.hljs-attribute,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-name,.hljs-selector-tag{font-weight:700}.hljs-deletion,.hljs-number,.hljs-quote,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-template-tag,.hljs-type{color:#800}.hljs-section,.hljs-title{color:#800;font-weight:700}.hljs-link,.hljs-operator,.hljs-regexp,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#ab5656}.hljs-literal{color:#695}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta .hljs-string{color:#38a}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
\ No newline at end of file
diff --git a/libraries/highlight/highlight.min.js b/libraries/highlight/highlight.min.js
new file mode 100644
index 0000000..5d699ae
--- /dev/null
+++ b/libraries/highlight/highlight.min.js
@@ -0,0 +1,1213 @@
+/*!
+  Highlight.js v11.9.0 (git: f47103d4f1)
+  (c) 2006-2023 undefined and other contributors
+  License: BSD-3-Clause
+ */
+var hljs=function(){"use strict";function e(n){
+return n instanceof Map?n.clear=n.delete=n.set=()=>{
+throw Error("map is read-only")}:n instanceof Set&&(n.add=n.clear=n.delete=()=>{
+throw Error("set is read-only")
+}),Object.freeze(n),Object.getOwnPropertyNames(n).forEach((t=>{
+const a=n[t],i=typeof a;"object"!==i&&"function"!==i||Object.isFrozen(a)||e(a)
+})),n}class n{constructor(e){
+void 0===e.data&&(e.data={}),this.data=e.data,this.isMatchIgnored=!1}
+ignoreMatch(){this.isMatchIgnored=!0}}function t(e){
+return e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#x27;")
+}function a(e,...n){const t=Object.create(null);for(const n in e)t[n]=e[n]
+;return n.forEach((e=>{for(const n in e)t[n]=e[n]})),t}const i=e=>!!e.scope
+;class r{constructor(e,n){
+this.buffer="",this.classPrefix=n.classPrefix,e.walk(this)}addText(e){
+this.buffer+=t(e)}openNode(e){if(!i(e))return;const n=((e,{prefix:n})=>{
+if(e.startsWith("language:"))return e.replace("language:","language-")
+;if(e.includes(".")){const t=e.split(".")
+;return[`${n}${t.shift()}`,...t.map(((e,n)=>`${e}${"_".repeat(n+1)}`))].join(" ")
+}return`${n}${e}`})(e.scope,{prefix:this.classPrefix});this.span(n)}
+closeNode(e){i(e)&&(this.buffer+="</span>")}value(){return this.buffer}span(e){
+this.buffer+=`<span class="${e}">`}}const s=(e={})=>{const n={children:[]}
+;return Object.assign(n,e),n};class o{constructor(){
+this.rootNode=s(),this.stack=[this.rootNode]}get top(){
+return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(e){
+this.top.children.push(e)}openNode(e){const n=s({scope:e})
+;this.add(n),this.stack.push(n)}closeNode(){
+if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){
+for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}
+walk(e){return this.constructor._walk(e,this.rootNode)}static _walk(e,n){
+return"string"==typeof n?e.addText(n):n.children&&(e.openNode(n),
+n.children.forEach((n=>this._walk(e,n))),e.closeNode(n)),e}static _collapse(e){
+"string"!=typeof e&&e.children&&(e.children.every((e=>"string"==typeof e))?e.children=[e.children.join("")]:e.children.forEach((e=>{
+o._collapse(e)})))}}class l extends o{constructor(e){super(),this.options=e}
+addText(e){""!==e&&this.add(e)}startScope(e){this.openNode(e)}endScope(){
+this.closeNode()}__addSublanguage(e,n){const t=e.root
+;n&&(t.scope="language:"+n),this.add(t)}toHTML(){
+return new r(this,this.options).value()}finalize(){
+return this.closeAllNodes(),!0}}function c(e){
+return e?"string"==typeof e?e:e.source:null}function d(e){return b("(?=",e,")")}
+function g(e){return b("(?:",e,")*")}function u(e){return b("(?:",e,")?")}
+function b(...e){return e.map((e=>c(e))).join("")}function m(...e){const n=(e=>{
+const n=e[e.length-1]
+;return"object"==typeof n&&n.constructor===Object?(e.splice(e.length-1,1),n):{}
+})(e);return"("+(n.capture?"":"?:")+e.map((e=>c(e))).join("|")+")"}
+function p(e){return RegExp(e.toString()+"|").exec("").length-1}
+const _=/\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./
+;function h(e,{joinWith:n}){let t=0;return e.map((e=>{t+=1;const n=t
+;let a=c(e),i="";for(;a.length>0;){const e=_.exec(a);if(!e){i+=a;break}
+i+=a.substring(0,e.index),
+a=a.substring(e.index+e[0].length),"\\"===e[0][0]&&e[1]?i+="\\"+(Number(e[1])+n):(i+=e[0],
+"("===e[0]&&t++)}return i})).map((e=>`(${e})`)).join(n)}
+const f="[a-zA-Z]\\w*",E="[a-zA-Z_]\\w*",y="\\b\\d+(\\.\\d+)?",N="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",w="\\b(0b[01]+)",v={
+begin:"\\\\[\\s\\S]",relevance:0},O={scope:"string",begin:"'",end:"'",
+illegal:"\\n",contains:[v]},k={scope:"string",begin:'"',end:'"',illegal:"\\n",
+contains:[v]},x=(e,n,t={})=>{const i=a({scope:"comment",begin:e,end:n,
+contains:[]},t);i.contains.push({scope:"doctag",
+begin:"[ ]*(?=(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):)",
+end:/(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):/,excludeBegin:!0,relevance:0})
+;const r=m("I","a","is","so","us","to","at","if","in","it","on",/[A-Za-z]+['](d|ve|re|ll|t|s|n)/,/[A-Za-z]+[-][a-z]+/,/[A-Za-z][a-z]{2,}/)
+;return i.contains.push({begin:b(/[ ]+/,"(",r,/[.]?[:]?([.][ ]|[ ])/,"){3}")}),i
+},M=x("//","$"),S=x("/\\*","\\*/"),A=x("#","$");var C=Object.freeze({
+__proto__:null,APOS_STRING_MODE:O,BACKSLASH_ESCAPE:v,BINARY_NUMBER_MODE:{
+scope:"number",begin:w,relevance:0},BINARY_NUMBER_RE:w,COMMENT:x,
+C_BLOCK_COMMENT_MODE:S,C_LINE_COMMENT_MODE:M,C_NUMBER_MODE:{scope:"number",
+begin:N,relevance:0},C_NUMBER_RE:N,END_SAME_AS_BEGIN:e=>Object.assign(e,{
+"on:begin":(e,n)=>{n.data._beginMatch=e[1]},"on:end":(e,n)=>{
+n.data._beginMatch!==e[1]&&n.ignoreMatch()}}),HASH_COMMENT_MODE:A,IDENT_RE:f,
+MATCH_NOTHING_RE:/\b\B/,METHOD_GUARD:{begin:"\\.\\s*"+E,relevance:0},
+NUMBER_MODE:{scope:"number",begin:y,relevance:0},NUMBER_RE:y,
+PHRASAL_WORDS_MODE:{
+begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/
+},QUOTE_STRING_MODE:k,REGEXP_MODE:{scope:"regexp",begin:/\/(?=[^/\n]*\/)/,
+end:/\/[gimuy]*/,contains:[v,{begin:/\[/,end:/\]/,relevance:0,contains:[v]}]},
+RE_STARTERS_RE:"!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",
+SHEBANG:(e={})=>{const n=/^#![ ]*\//
+;return e.binary&&(e.begin=b(n,/.*\b/,e.binary,/\b.*/)),a({scope:"meta",begin:n,
+end:/$/,relevance:0,"on:begin":(e,n)=>{0!==e.index&&n.ignoreMatch()}},e)},
+TITLE_MODE:{scope:"title",begin:f,relevance:0},UNDERSCORE_IDENT_RE:E,
+UNDERSCORE_TITLE_MODE:{scope:"title",begin:E,relevance:0}});function T(e,n){
+"."===e.input[e.index-1]&&n.ignoreMatch()}function R(e,n){
+void 0!==e.className&&(e.scope=e.className,delete e.className)}function D(e,n){
+n&&e.beginKeywords&&(e.begin="\\b("+e.beginKeywords.split(" ").join("|")+")(?!\\.)(?=\\b|\\s)",
+e.__beforeBegin=T,e.keywords=e.keywords||e.beginKeywords,delete e.beginKeywords,
+void 0===e.relevance&&(e.relevance=0))}function I(e,n){
+Array.isArray(e.illegal)&&(e.illegal=m(...e.illegal))}function L(e,n){
+if(e.match){
+if(e.begin||e.end)throw Error("begin & end are not supported with match")
+;e.begin=e.match,delete e.match}}function B(e,n){
+void 0===e.relevance&&(e.relevance=1)}const $=(e,n)=>{if(!e.beforeMatch)return
+;if(e.starts)throw Error("beforeMatch cannot be used with starts")
+;const t=Object.assign({},e);Object.keys(e).forEach((n=>{delete e[n]
+})),e.keywords=t.keywords,e.begin=b(t.beforeMatch,d(t.begin)),e.starts={
+relevance:0,contains:[Object.assign(t,{endsParent:!0})]
+},e.relevance=0,delete t.beforeMatch
+},z=["of","and","for","in","not","or","if","then","parent","list","value"],F="keyword"
+;function U(e,n,t=F){const a=Object.create(null)
+;return"string"==typeof e?i(t,e.split(" ")):Array.isArray(e)?i(t,e):Object.keys(e).forEach((t=>{
+Object.assign(a,U(e[t],n,t))})),a;function i(e,t){
+n&&(t=t.map((e=>e.toLowerCase()))),t.forEach((n=>{const t=n.split("|")
+;a[t[0]]=[e,j(t[0],t[1])]}))}}function j(e,n){
+return n?Number(n):(e=>z.includes(e.toLowerCase()))(e)?0:1}const P={},K=e=>{
+console.error(e)},H=(e,...n)=>{console.log("WARN: "+e,...n)},q=(e,n)=>{
+P[`${e}/${n}`]||(console.log(`Deprecated as of ${e}. ${n}`),P[`${e}/${n}`]=!0)
+},G=Error();function Z(e,n,{key:t}){let a=0;const i=e[t],r={},s={}
+;for(let e=1;e<=n.length;e++)s[e+a]=i[e],r[e+a]=!0,a+=p(n[e-1])
+;e[t]=s,e[t]._emit=r,e[t]._multi=!0}function W(e){(e=>{
+e.scope&&"object"==typeof e.scope&&null!==e.scope&&(e.beginScope=e.scope,
+delete e.scope)})(e),"string"==typeof e.beginScope&&(e.beginScope={
+_wrap:e.beginScope}),"string"==typeof e.endScope&&(e.endScope={_wrap:e.endScope
+}),(e=>{if(Array.isArray(e.begin)){
+if(e.skip||e.excludeBegin||e.returnBegin)throw K("skip, excludeBegin, returnBegin not compatible with beginScope: {}"),
+G
+;if("object"!=typeof e.beginScope||null===e.beginScope)throw K("beginScope must be object"),
+G;Z(e,e.begin,{key:"beginScope"}),e.begin=h(e.begin,{joinWith:""})}})(e),(e=>{
+if(Array.isArray(e.end)){
+if(e.skip||e.excludeEnd||e.returnEnd)throw K("skip, excludeEnd, returnEnd not compatible with endScope: {}"),
+G
+;if("object"!=typeof e.endScope||null===e.endScope)throw K("endScope must be object"),
+G;Z(e,e.end,{key:"endScope"}),e.end=h(e.end,{joinWith:""})}})(e)}function Q(e){
+function n(n,t){
+return RegExp(c(n),"m"+(e.case_insensitive?"i":"")+(e.unicodeRegex?"u":"")+(t?"g":""))
+}class t{constructor(){
+this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0}
+addRule(e,n){
+n.position=this.position++,this.matchIndexes[this.matchAt]=n,this.regexes.push([n,e]),
+this.matchAt+=p(e)+1}compile(){0===this.regexes.length&&(this.exec=()=>null)
+;const e=this.regexes.map((e=>e[1]));this.matcherRe=n(h(e,{joinWith:"|"
+}),!0),this.lastIndex=0}exec(e){this.matcherRe.lastIndex=this.lastIndex
+;const n=this.matcherRe.exec(e);if(!n)return null
+;const t=n.findIndex(((e,n)=>n>0&&void 0!==e)),a=this.matchIndexes[t]
+;return n.splice(0,t),Object.assign(n,a)}}class i{constructor(){
+this.rules=[],this.multiRegexes=[],
+this.count=0,this.lastIndex=0,this.regexIndex=0}getMatcher(e){
+if(this.multiRegexes[e])return this.multiRegexes[e];const n=new t
+;return this.rules.slice(e).forEach((([e,t])=>n.addRule(e,t))),
+n.compile(),this.multiRegexes[e]=n,n}resumingScanAtSamePosition(){
+return 0!==this.regexIndex}considerAll(){this.regexIndex=0}addRule(e,n){
+this.rules.push([e,n]),"begin"===n.type&&this.count++}exec(e){
+const n=this.getMatcher(this.regexIndex);n.lastIndex=this.lastIndex
+;let t=n.exec(e)
+;if(this.resumingScanAtSamePosition())if(t&&t.index===this.lastIndex);else{
+const n=this.getMatcher(0);n.lastIndex=this.lastIndex+1,t=n.exec(e)}
+return t&&(this.regexIndex+=t.position+1,
+this.regexIndex===this.count&&this.considerAll()),t}}
+if(e.compilerExtensions||(e.compilerExtensions=[]),
+e.contains&&e.contains.includes("self"))throw Error("ERR: contains `self` is not supported at the top-level of a language.  See documentation.")
+;return e.classNameAliases=a(e.classNameAliases||{}),function t(r,s){const o=r
+;if(r.isCompiled)return o
+;[R,L,W,$].forEach((e=>e(r,s))),e.compilerExtensions.forEach((e=>e(r,s))),
+r.__beforeBegin=null,[D,I,B].forEach((e=>e(r,s))),r.isCompiled=!0;let l=null
+;return"object"==typeof r.keywords&&r.keywords.$pattern&&(r.keywords=Object.assign({},r.keywords),
+l=r.keywords.$pattern,
+delete r.keywords.$pattern),l=l||/\w+/,r.keywords&&(r.keywords=U(r.keywords,e.case_insensitive)),
+o.keywordPatternRe=n(l,!0),
+s&&(r.begin||(r.begin=/\B|\b/),o.beginRe=n(o.begin),r.end||r.endsWithParent||(r.end=/\B|\b/),
+r.end&&(o.endRe=n(o.end)),
+o.terminatorEnd=c(o.end)||"",r.endsWithParent&&s.terminatorEnd&&(o.terminatorEnd+=(r.end?"|":"")+s.terminatorEnd)),
+r.illegal&&(o.illegalRe=n(r.illegal)),
+r.contains||(r.contains=[]),r.contains=[].concat(...r.contains.map((e=>(e=>(e.variants&&!e.cachedVariants&&(e.cachedVariants=e.variants.map((n=>a(e,{
+variants:null},n)))),e.cachedVariants?e.cachedVariants:X(e)?a(e,{
+starts:e.starts?a(e.starts):null
+}):Object.isFrozen(e)?a(e):e))("self"===e?r:e)))),r.contains.forEach((e=>{t(e,o)
+})),r.starts&&t(r.starts,s),o.matcher=(e=>{const n=new i
+;return e.contains.forEach((e=>n.addRule(e.begin,{rule:e,type:"begin"
+}))),e.terminatorEnd&&n.addRule(e.terminatorEnd,{type:"end"
+}),e.illegal&&n.addRule(e.illegal,{type:"illegal"}),n})(o),o}(e)}function X(e){
+return!!e&&(e.endsWithParent||X(e.starts))}class V extends Error{
+constructor(e,n){super(e),this.name="HTMLInjectionError",this.html=n}}
+const J=t,Y=a,ee=Symbol("nomatch"),ne=t=>{
+const a=Object.create(null),i=Object.create(null),r=[];let s=!0
+;const o="Could not find the language '{}', did you forget to load/include a language module?",c={
+disableAutodetect:!0,name:"Plain text",contains:[]};let p={
+ignoreUnescapedHTML:!1,throwUnescapedHTML:!1,noHighlightRe:/^(no-?highlight)$/i,
+languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",
+cssSelector:"pre code",languages:null,__emitter:l};function _(e){
+return p.noHighlightRe.test(e)}function h(e,n,t){let a="",i=""
+;"object"==typeof n?(a=e,
+t=n.ignoreIllegals,i=n.language):(q("10.7.0","highlight(lang, code, ...args) has been deprecated."),
+q("10.7.0","Please use highlight(code, options) instead.\nhttps://github.com/highlightjs/highlight.js/issues/2277"),
+i=e,a=n),void 0===t&&(t=!0);const r={code:a,language:i};x("before:highlight",r)
+;const s=r.result?r.result:f(r.language,r.code,t)
+;return s.code=r.code,x("after:highlight",s),s}function f(e,t,i,r){
+const l=Object.create(null);function c(){if(!x.keywords)return void S.addText(A)
+;let e=0;x.keywordPatternRe.lastIndex=0;let n=x.keywordPatternRe.exec(A),t=""
+;for(;n;){t+=A.substring(e,n.index)
+;const i=w.case_insensitive?n[0].toLowerCase():n[0],r=(a=i,x.keywords[a]);if(r){
+const[e,a]=r
+;if(S.addText(t),t="",l[i]=(l[i]||0)+1,l[i]<=7&&(C+=a),e.startsWith("_"))t+=n[0];else{
+const t=w.classNameAliases[e]||e;g(n[0],t)}}else t+=n[0]
+;e=x.keywordPatternRe.lastIndex,n=x.keywordPatternRe.exec(A)}var a
+;t+=A.substring(e),S.addText(t)}function d(){null!=x.subLanguage?(()=>{
+if(""===A)return;let e=null;if("string"==typeof x.subLanguage){
+if(!a[x.subLanguage])return void S.addText(A)
+;e=f(x.subLanguage,A,!0,M[x.subLanguage]),M[x.subLanguage]=e._top
+}else e=E(A,x.subLanguage.length?x.subLanguage:null)
+;x.relevance>0&&(C+=e.relevance),S.__addSublanguage(e._emitter,e.language)
+})():c(),A=""}function g(e,n){
+""!==e&&(S.startScope(n),S.addText(e),S.endScope())}function u(e,n){let t=1
+;const a=n.length-1;for(;t<=a;){if(!e._emit[t]){t++;continue}
+const a=w.classNameAliases[e[t]]||e[t],i=n[t];a?g(i,a):(A=i,c(),A=""),t++}}
+function b(e,n){
+return e.scope&&"string"==typeof e.scope&&S.openNode(w.classNameAliases[e.scope]||e.scope),
+e.beginScope&&(e.beginScope._wrap?(g(A,w.classNameAliases[e.beginScope._wrap]||e.beginScope._wrap),
+A=""):e.beginScope._multi&&(u(e.beginScope,n),A="")),x=Object.create(e,{parent:{
+value:x}}),x}function m(e,t,a){let i=((e,n)=>{const t=e&&e.exec(n)
+;return t&&0===t.index})(e.endRe,a);if(i){if(e["on:end"]){const a=new n(e)
+;e["on:end"](t,a),a.isMatchIgnored&&(i=!1)}if(i){
+for(;e.endsParent&&e.parent;)e=e.parent;return e}}
+if(e.endsWithParent)return m(e.parent,t,a)}function _(e){
+return 0===x.matcher.regexIndex?(A+=e[0],1):(D=!0,0)}function h(e){
+const n=e[0],a=t.substring(e.index),i=m(x,e,a);if(!i)return ee;const r=x
+;x.endScope&&x.endScope._wrap?(d(),
+g(n,x.endScope._wrap)):x.endScope&&x.endScope._multi?(d(),
+u(x.endScope,e)):r.skip?A+=n:(r.returnEnd||r.excludeEnd||(A+=n),
+d(),r.excludeEnd&&(A=n));do{
+x.scope&&S.closeNode(),x.skip||x.subLanguage||(C+=x.relevance),x=x.parent
+}while(x!==i.parent);return i.starts&&b(i.starts,e),r.returnEnd?0:n.length}
+let y={};function N(a,r){const o=r&&r[0];if(A+=a,null==o)return d(),0
+;if("begin"===y.type&&"end"===r.type&&y.index===r.index&&""===o){
+if(A+=t.slice(r.index,r.index+1),!s){const n=Error(`0 width match regex (${e})`)
+;throw n.languageName=e,n.badRule=y.rule,n}return 1}
+if(y=r,"begin"===r.type)return(e=>{
+const t=e[0],a=e.rule,i=new n(a),r=[a.__beforeBegin,a["on:begin"]]
+;for(const n of r)if(n&&(n(e,i),i.isMatchIgnored))return _(t)
+;return a.skip?A+=t:(a.excludeBegin&&(A+=t),
+d(),a.returnBegin||a.excludeBegin||(A=t)),b(a,e),a.returnBegin?0:t.length})(r)
+;if("illegal"===r.type&&!i){
+const e=Error('Illegal lexeme "'+o+'" for mode "'+(x.scope||"<unnamed>")+'"')
+;throw e.mode=x,e}if("end"===r.type){const e=h(r);if(e!==ee)return e}
+if("illegal"===r.type&&""===o)return 1
+;if(R>1e5&&R>3*r.index)throw Error("potential infinite loop, way more iterations than matches")
+;return A+=o,o.length}const w=v(e)
+;if(!w)throw K(o.replace("{}",e)),Error('Unknown language: "'+e+'"')
+;const O=Q(w);let k="",x=r||O;const M={},S=new p.__emitter(p);(()=>{const e=[]
+;for(let n=x;n!==w;n=n.parent)n.scope&&e.unshift(n.scope)
+;e.forEach((e=>S.openNode(e)))})();let A="",C=0,T=0,R=0,D=!1;try{
+if(w.__emitTokens)w.__emitTokens(t,S);else{for(x.matcher.considerAll();;){
+R++,D?D=!1:x.matcher.considerAll(),x.matcher.lastIndex=T
+;const e=x.matcher.exec(t);if(!e)break;const n=N(t.substring(T,e.index),e)
+;T=e.index+n}N(t.substring(T))}return S.finalize(),k=S.toHTML(),{language:e,
+value:k,relevance:C,illegal:!1,_emitter:S,_top:x}}catch(n){
+if(n.message&&n.message.includes("Illegal"))return{language:e,value:J(t),
+illegal:!0,relevance:0,_illegalBy:{message:n.message,index:T,
+context:t.slice(T-100,T+100),mode:n.mode,resultSoFar:k},_emitter:S};if(s)return{
+language:e,value:J(t),illegal:!1,relevance:0,errorRaised:n,_emitter:S,_top:x}
+;throw n}}function E(e,n){n=n||p.languages||Object.keys(a);const t=(e=>{
+const n={value:J(e),illegal:!1,relevance:0,_top:c,_emitter:new p.__emitter(p)}
+;return n._emitter.addText(e),n})(e),i=n.filter(v).filter(k).map((n=>f(n,e,!1)))
+;i.unshift(t);const r=i.sort(((e,n)=>{
+if(e.relevance!==n.relevance)return n.relevance-e.relevance
+;if(e.language&&n.language){if(v(e.language).supersetOf===n.language)return 1
+;if(v(n.language).supersetOf===e.language)return-1}return 0})),[s,o]=r,l=s
+;return l.secondBest=o,l}function y(e){let n=null;const t=(e=>{
+let n=e.className+" ";n+=e.parentNode?e.parentNode.className:""
+;const t=p.languageDetectRe.exec(n);if(t){const n=v(t[1])
+;return n||(H(o.replace("{}",t[1])),
+H("Falling back to no-highlight mode for this block.",e)),n?t[1]:"no-highlight"}
+return n.split(/\s+/).find((e=>_(e)||v(e)))})(e);if(_(t))return
+;if(x("before:highlightElement",{el:e,language:t
+}),e.dataset.highlighted)return void console.log("Element previously highlighted. To highlight again, first unset `dataset.highlighted`.",e)
+;if(e.children.length>0&&(p.ignoreUnescapedHTML||(console.warn("One of your code blocks includes unescaped HTML. This is a potentially serious security risk."),
+console.warn("https://github.com/highlightjs/highlight.js/wiki/security"),
+console.warn("The element with unescaped HTML:"),
+console.warn(e)),p.throwUnescapedHTML))throw new V("One of your code blocks includes unescaped HTML.",e.innerHTML)
+;n=e;const a=n.textContent,r=t?h(a,{language:t,ignoreIllegals:!0}):E(a)
+;e.innerHTML=r.value,e.dataset.highlighted="yes",((e,n,t)=>{const a=n&&i[n]||t
+;e.classList.add("hljs"),e.classList.add("language-"+a)
+})(e,t,r.language),e.result={language:r.language,re:r.relevance,
+relevance:r.relevance},r.secondBest&&(e.secondBest={
+language:r.secondBest.language,relevance:r.secondBest.relevance
+}),x("after:highlightElement",{el:e,result:r,text:a})}let N=!1;function w(){
+"loading"!==document.readyState?document.querySelectorAll(p.cssSelector).forEach(y):N=!0
+}function v(e){return e=(e||"").toLowerCase(),a[e]||a[i[e]]}
+function O(e,{languageName:n}){"string"==typeof e&&(e=[e]),e.forEach((e=>{
+i[e.toLowerCase()]=n}))}function k(e){const n=v(e)
+;return n&&!n.disableAutodetect}function x(e,n){const t=e;r.forEach((e=>{
+e[t]&&e[t](n)}))}
+"undefined"!=typeof window&&window.addEventListener&&window.addEventListener("DOMContentLoaded",(()=>{
+N&&w()}),!1),Object.assign(t,{highlight:h,highlightAuto:E,highlightAll:w,
+highlightElement:y,
+highlightBlock:e=>(q("10.7.0","highlightBlock will be removed entirely in v12.0"),
+q("10.7.0","Please use highlightElement now."),y(e)),configure:e=>{p=Y(p,e)},
+initHighlighting:()=>{
+w(),q("10.6.0","initHighlighting() deprecated.  Use highlightAll() now.")},
+initHighlightingOnLoad:()=>{
+w(),q("10.6.0","initHighlightingOnLoad() deprecated.  Use highlightAll() now.")
+},registerLanguage:(e,n)=>{let i=null;try{i=n(t)}catch(n){
+if(K("Language definition for '{}' could not be registered.".replace("{}",e)),
+!s)throw n;K(n),i=c}
+i.name||(i.name=e),a[e]=i,i.rawDefinition=n.bind(null,t),i.aliases&&O(i.aliases,{
+languageName:e})},unregisterLanguage:e=>{delete a[e]
+;for(const n of Object.keys(i))i[n]===e&&delete i[n]},
+listLanguages:()=>Object.keys(a),getLanguage:v,registerAliases:O,
+autoDetection:k,inherit:Y,addPlugin:e=>{(e=>{
+e["before:highlightBlock"]&&!e["before:highlightElement"]&&(e["before:highlightElement"]=n=>{
+e["before:highlightBlock"](Object.assign({block:n.el},n))
+}),e["after:highlightBlock"]&&!e["after:highlightElement"]&&(e["after:highlightElement"]=n=>{
+e["after:highlightBlock"](Object.assign({block:n.el},n))})})(e),r.push(e)},
+removePlugin:e=>{const n=r.indexOf(e);-1!==n&&r.splice(n,1)}}),t.debugMode=()=>{
+s=!1},t.safeMode=()=>{s=!0},t.versionString="11.9.0",t.regex={concat:b,
+lookahead:d,either:m,optional:u,anyNumberOfTimes:g}
+;for(const n in C)"object"==typeof C[n]&&e(C[n]);return Object.assign(t,C),t
+},te=ne({});te.newInstance=()=>ne({});var ae=te;const ie=e=>({IMPORTANT:{
+scope:"meta",begin:"!important"},BLOCK_COMMENT:e.C_BLOCK_COMMENT_MODE,HEXCOLOR:{
+scope:"number",begin:/#(([0-9a-fA-F]{3,4})|(([0-9a-fA-F]{2}){3,4}))\b/},
+FUNCTION_DISPATCH:{className:"built_in",begin:/[\w-]+(?=\()/},
+ATTRIBUTE_SELECTOR_MODE:{scope:"selector-attr",begin:/\[/,end:/\]/,illegal:"$",
+contains:[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]},CSS_NUMBER_MODE:{
+scope:"number",
+begin:e.NUMBER_RE+"(%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?",
+relevance:0},CSS_VARIABLE:{className:"attr",begin:/--[A-Za-z_][A-Za-z0-9_-]*/}
+}),re=["a","abbr","address","article","aside","audio","b","blockquote","body","button","canvas","caption","cite","code","dd","del","details","dfn","div","dl","dt","em","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hgroup","html","i","iframe","img","input","ins","kbd","label","legend","li","main","mark","menu","nav","object","ol","p","q","quote","samp","section","span","strong","summary","sup","table","tbody","td","textarea","tfoot","th","thead","time","tr","ul","var","video"],se=["any-hover","any-pointer","aspect-ratio","color","color-gamut","color-index","device-aspect-ratio","device-height","device-width","display-mode","forced-colors","grid","height","hover","inverted-colors","monochrome","orientation","overflow-block","overflow-inline","pointer","prefers-color-scheme","prefers-contrast","prefers-reduced-motion","prefers-reduced-transparency","resolution","scan","scripting","update","width","min-width","max-width","min-height","max-height"],oe=["active","any-link","blank","checked","current","default","defined","dir","disabled","drop","empty","enabled","first","first-child","first-of-type","fullscreen","future","focus","focus-visible","focus-within","has","host","host-context","hover","indeterminate","in-range","invalid","is","lang","last-child","last-of-type","left","link","local-link","not","nth-child","nth-col","nth-last-child","nth-last-col","nth-last-of-type","nth-of-type","only-child","only-of-type","optional","out-of-range","past","placeholder-shown","read-only","read-write","required","right","root","scope","target","target-within","user-invalid","valid","visited","where"],le=["after","backdrop","before","cue","cue-region","first-letter","first-line","grammar-error","marker","part","placeholder","selection","slotted","spelling-error"],ce=["align-content","align-items","align-self","all","animation","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-timing-function","backface-visibility","background","background-attachment","background-blend-mode","background-clip","background-color","background-image","background-origin","background-position","background-repeat","background-size","block-size","border","border-block","border-block-color","border-block-end","border-block-end-color","border-block-end-style","border-block-end-width","border-block-start","border-block-start-color","border-block-start-style","border-block-start-width","border-block-style","border-block-width","border-bottom","border-bottom-color","border-bottom-left-radius","border-bottom-right-radius","border-bottom-style","border-bottom-width","border-collapse","border-color","border-image","border-image-outset","border-image-repeat","border-image-slice","border-image-source","border-image-width","border-inline","border-inline-color","border-inline-end","border-inline-end-color","border-inline-end-style","border-inline-end-width","border-inline-start","border-inline-start-color","border-inline-start-style","border-inline-start-width","border-inline-style","border-inline-width","border-left","border-left-color","border-left-style","border-left-width","border-radius","border-right","border-right-color","border-right-style","border-right-width","border-spacing","border-style","border-top","border-top-color","border-top-left-radius","border-top-right-radius","border-top-style","border-top-width","border-width","bottom","box-decoration-break","box-shadow","box-sizing","break-after","break-before","break-inside","caption-side","caret-color","clear","clip","clip-path","clip-rule","color","column-count","column-fill","column-gap","column-rule","column-rule-color","column-rule-style","column-rule-width","column-span","column-width","columns","contain","content","content-visibility","counter-increment","counter-reset","cue","cue-after","cue-before","cursor","direction","display","empty-cells","filter","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","float","flow","font","font-display","font-family","font-feature-settings","font-kerning","font-language-override","font-size","font-size-adjust","font-smoothing","font-stretch","font-style","font-synthesis","font-variant","font-variant-caps","font-variant-east-asian","font-variant-ligatures","font-variant-numeric","font-variant-position","font-variation-settings","font-weight","gap","glyph-orientation-vertical","grid","grid-area","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-column","grid-column-end","grid-column-start","grid-gap","grid-row","grid-row-end","grid-row-start","grid-template","grid-template-areas","grid-template-columns","grid-template-rows","hanging-punctuation","height","hyphens","icon","image-orientation","image-rendering","image-resolution","ime-mode","inline-size","isolation","justify-content","left","letter-spacing","line-break","line-height","list-style","list-style-image","list-style-position","list-style-type","margin","margin-block","margin-block-end","margin-block-start","margin-bottom","margin-inline","margin-inline-end","margin-inline-start","margin-left","margin-right","margin-top","marks","mask","mask-border","mask-border-mode","mask-border-outset","mask-border-repeat","mask-border-slice","mask-border-source","mask-border-width","mask-clip","mask-composite","mask-image","mask-mode","mask-origin","mask-position","mask-repeat","mask-size","mask-type","max-block-size","max-height","max-inline-size","max-width","min-block-size","min-height","min-inline-size","min-width","mix-blend-mode","nav-down","nav-index","nav-left","nav-right","nav-up","none","normal","object-fit","object-position","opacity","order","orphans","outline","outline-color","outline-offset","outline-style","outline-width","overflow","overflow-wrap","overflow-x","overflow-y","padding","padding-block","padding-block-end","padding-block-start","padding-bottom","padding-inline","padding-inline-end","padding-inline-start","padding-left","padding-right","padding-top","page-break-after","page-break-before","page-break-inside","pause","pause-after","pause-before","perspective","perspective-origin","pointer-events","position","quotes","resize","rest","rest-after","rest-before","right","row-gap","scroll-margin","scroll-margin-block","scroll-margin-block-end","scroll-margin-block-start","scroll-margin-bottom","scroll-margin-inline","scroll-margin-inline-end","scroll-margin-inline-start","scroll-margin-left","scroll-margin-right","scroll-margin-top","scroll-padding","scroll-padding-block","scroll-padding-block-end","scroll-padding-block-start","scroll-padding-bottom","scroll-padding-inline","scroll-padding-inline-end","scroll-padding-inline-start","scroll-padding-left","scroll-padding-right","scroll-padding-top","scroll-snap-align","scroll-snap-stop","scroll-snap-type","scrollbar-color","scrollbar-gutter","scrollbar-width","shape-image-threshold","shape-margin","shape-outside","speak","speak-as","src","tab-size","table-layout","text-align","text-align-all","text-align-last","text-combine-upright","text-decoration","text-decoration-color","text-decoration-line","text-decoration-style","text-emphasis","text-emphasis-color","text-emphasis-position","text-emphasis-style","text-indent","text-justify","text-orientation","text-overflow","text-rendering","text-shadow","text-transform","text-underline-position","top","transform","transform-box","transform-origin","transform-style","transition","transition-delay","transition-duration","transition-property","transition-timing-function","unicode-bidi","vertical-align","visibility","voice-balance","voice-duration","voice-family","voice-pitch","voice-range","voice-rate","voice-stress","voice-volume","white-space","widows","width","will-change","word-break","word-spacing","word-wrap","writing-mode","z-index"].reverse(),de=oe.concat(le)
+;var ge="[0-9](_*[0-9])*",ue=`\\.(${ge})`,be="[0-9a-fA-F](_*[0-9a-fA-F])*",me={
+className:"number",variants:[{
+begin:`(\\b(${ge})((${ue})|\\.)?|(${ue}))[eE][+-]?(${ge})[fFdD]?\\b`},{
+begin:`\\b(${ge})((${ue})[fFdD]?\\b|\\.([fFdD]\\b)?)`},{
+begin:`(${ue})[fFdD]?\\b`},{begin:`\\b(${ge})[fFdD]\\b`},{
+begin:`\\b0[xX]((${be})\\.?|(${be})?\\.(${be}))[pP][+-]?(${ge})[fFdD]?\\b`},{
+begin:"\\b(0|[1-9](_*[0-9])*)[lL]?\\b"},{begin:`\\b0[xX](${be})[lL]?\\b`},{
+begin:"\\b0(_*[0-7])*[lL]?\\b"},{begin:"\\b0[bB][01](_*[01])*[lL]?\\b"}],
+relevance:0};function pe(e,n,t){return-1===t?"":e.replace(n,(a=>pe(e,n,t-1)))}
+const _e="[A-Za-z$_][0-9A-Za-z$_]*",he=["as","in","of","if","for","while","finally","var","new","function","do","return","void","else","break","catch","instanceof","with","throw","case","default","try","switch","continue","typeof","delete","let","yield","const","class","debugger","async","await","static","import","from","export","extends"],fe=["true","false","null","undefined","NaN","Infinity"],Ee=["Object","Function","Boolean","Symbol","Math","Date","Number","BigInt","String","RegExp","Array","Float32Array","Float64Array","Int8Array","Uint8Array","Uint8ClampedArray","Int16Array","Int32Array","Uint16Array","Uint32Array","BigInt64Array","BigUint64Array","Set","Map","WeakSet","WeakMap","ArrayBuffer","SharedArrayBuffer","Atomics","DataView","JSON","Promise","Generator","GeneratorFunction","AsyncFunction","Reflect","Proxy","Intl","WebAssembly"],ye=["Error","EvalError","InternalError","RangeError","ReferenceError","SyntaxError","TypeError","URIError"],Ne=["setInterval","setTimeout","clearInterval","clearTimeout","require","exports","eval","isFinite","isNaN","parseFloat","parseInt","decodeURI","decodeURIComponent","encodeURI","encodeURIComponent","escape","unescape"],we=["arguments","this","super","console","window","document","localStorage","sessionStorage","module","global"],ve=[].concat(Ne,Ee,ye)
+;function Oe(e){const n=e.regex,t=_e,a={begin:/<[A-Za-z0-9\\._:-]+/,
+end:/\/[A-Za-z0-9\\._:-]+>|\/>/,isTrulyOpeningTag:(e,n)=>{
+const t=e[0].length+e.index,a=e.input[t]
+;if("<"===a||","===a)return void n.ignoreMatch();let i
+;">"===a&&(((e,{after:n})=>{const t="</"+e[0].slice(1)
+;return-1!==e.input.indexOf(t,n)})(e,{after:t})||n.ignoreMatch())
+;const r=e.input.substring(t)
+;((i=r.match(/^\s*=/))||(i=r.match(/^\s+extends\s+/))&&0===i.index)&&n.ignoreMatch()
+}},i={$pattern:_e,keyword:he,literal:fe,built_in:ve,"variable.language":we
+},r="[0-9](_?[0-9])*",s=`\\.(${r})`,o="0|[1-9](_?[0-9])*|0[0-7]*[89][0-9]*",l={
+className:"number",variants:[{
+begin:`(\\b(${o})((${s})|\\.)?|(${s}))[eE][+-]?(${r})\\b`},{
+begin:`\\b(${o})\\b((${s})\\b|\\.)?|(${s})\\b`},{
+begin:"\\b(0|[1-9](_?[0-9])*)n\\b"},{
+begin:"\\b0[xX][0-9a-fA-F](_?[0-9a-fA-F])*n?\\b"},{
+begin:"\\b0[bB][0-1](_?[0-1])*n?\\b"},{begin:"\\b0[oO][0-7](_?[0-7])*n?\\b"},{
+begin:"\\b0[0-7]+n?\\b"}],relevance:0},c={className:"subst",begin:"\\$\\{",
+end:"\\}",keywords:i,contains:[]},d={begin:"html`",end:"",starts:{end:"`",
+returnEnd:!1,contains:[e.BACKSLASH_ESCAPE,c],subLanguage:"xml"}},g={
+begin:"css`",end:"",starts:{end:"`",returnEnd:!1,
+contains:[e.BACKSLASH_ESCAPE,c],subLanguage:"css"}},u={begin:"gql`",end:"",
+starts:{end:"`",returnEnd:!1,contains:[e.BACKSLASH_ESCAPE,c],
+subLanguage:"graphql"}},b={className:"string",begin:"`",end:"`",
+contains:[e.BACKSLASH_ESCAPE,c]},m={className:"comment",
+variants:[e.COMMENT(/\/\*\*(?!\/)/,"\\*/",{relevance:0,contains:[{
+begin:"(?=@[A-Za-z]+)",relevance:0,contains:[{className:"doctag",
+begin:"@[A-Za-z]+"},{className:"type",begin:"\\{",end:"\\}",excludeEnd:!0,
+excludeBegin:!0,relevance:0},{className:"variable",begin:t+"(?=\\s*(-)|$)",
+endsParent:!0,relevance:0},{begin:/(?=[^\n])\s/,relevance:0}]}]
+}),e.C_BLOCK_COMMENT_MODE,e.C_LINE_COMMENT_MODE]
+},p=[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,d,g,u,b,{match:/\$\d+/},l]
+;c.contains=p.concat({begin:/\{/,end:/\}/,keywords:i,contains:["self"].concat(p)
+});const _=[].concat(m,c.contains),h=_.concat([{begin:/\(/,end:/\)/,keywords:i,
+contains:["self"].concat(_)}]),f={className:"params",begin:/\(/,end:/\)/,
+excludeBegin:!0,excludeEnd:!0,keywords:i,contains:h},E={variants:[{
+match:[/class/,/\s+/,t,/\s+/,/extends/,/\s+/,n.concat(t,"(",n.concat(/\./,t),")*")],
+scope:{1:"keyword",3:"title.class",5:"keyword",7:"title.class.inherited"}},{
+match:[/class/,/\s+/,t],scope:{1:"keyword",3:"title.class"}}]},y={relevance:0,
+match:n.either(/\bJSON/,/\b[A-Z][a-z]+([A-Z][a-z]*|\d)*/,/\b[A-Z]{2,}([A-Z][a-z]+|\d)+([A-Z][a-z]*)*/,/\b[A-Z]{2,}[a-z]+([A-Z][a-z]+|\d)*([A-Z][a-z]*)*/),
+className:"title.class",keywords:{_:[...Ee,...ye]}},N={variants:[{
+match:[/function/,/\s+/,t,/(?=\s*\()/]},{match:[/function/,/\s*(?=\()/]}],
+className:{1:"keyword",3:"title.function"},label:"func.def",contains:[f],
+illegal:/%/},w={
+match:n.concat(/\b/,(v=[...Ne,"super","import"],n.concat("(?!",v.join("|"),")")),t,n.lookahead(/\(/)),
+className:"title.function",relevance:0};var v;const O={
+begin:n.concat(/\./,n.lookahead(n.concat(t,/(?![0-9A-Za-z$_(])/))),end:t,
+excludeBegin:!0,keywords:"prototype",className:"property",relevance:0},k={
+match:[/get|set/,/\s+/,t,/(?=\()/],className:{1:"keyword",3:"title.function"},
+contains:[{begin:/\(\)/},f]
+},x="(\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)|"+e.UNDERSCORE_IDENT_RE+")\\s*=>",M={
+match:[/const|var|let/,/\s+/,t,/\s*/,/=\s*/,/(async\s*)?/,n.lookahead(x)],
+keywords:"async",className:{1:"keyword",3:"title.function"},contains:[f]}
+;return{name:"JavaScript",aliases:["js","jsx","mjs","cjs"],keywords:i,exports:{
+PARAMS_CONTAINS:h,CLASS_REFERENCE:y},illegal:/#(?![$_A-z])/,
+contains:[e.SHEBANG({label:"shebang",binary:"node",relevance:5}),{
+label:"use_strict",className:"meta",relevance:10,
+begin:/^\s*['"]use (strict|asm)['"]/
+},e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,d,g,u,b,m,{match:/\$\d+/},l,y,{
+className:"attr",begin:t+n.lookahead(":"),relevance:0},M,{
+begin:"("+e.RE_STARTERS_RE+"|\\b(case|return|throw)\\b)\\s*",
+keywords:"return throw case",relevance:0,contains:[m,e.REGEXP_MODE,{
+className:"function",begin:x,returnBegin:!0,end:"\\s*=>",contains:[{
+className:"params",variants:[{begin:e.UNDERSCORE_IDENT_RE,relevance:0},{
+className:null,begin:/\(\s*\)/,skip:!0},{begin:/\(/,end:/\)/,excludeBegin:!0,
+excludeEnd:!0,keywords:i,contains:h}]}]},{begin:/,/,relevance:0},{match:/\s+/,
+relevance:0},{variants:[{begin:"<>",end:"</>"},{
+match:/<[A-Za-z0-9\\._:-]+\s*\/>/},{begin:a.begin,
+"on:begin":a.isTrulyOpeningTag,end:a.end}],subLanguage:"xml",contains:[{
+begin:a.begin,end:a.end,skip:!0,contains:["self"]}]}]},N,{
+beginKeywords:"while if switch catch for"},{
+begin:"\\b(?!function)"+e.UNDERSCORE_IDENT_RE+"\\([^()]*(\\([^()]*(\\([^()]*\\)[^()]*)*\\)[^()]*)*\\)\\s*\\{",
+returnBegin:!0,label:"func.def",contains:[f,e.inherit(e.TITLE_MODE,{begin:t,
+className:"title.function"})]},{match:/\.\.\./,relevance:0},O,{match:"\\$"+t,
+relevance:0},{match:[/\bconstructor(?=\s*\()/],className:{1:"title.function"},
+contains:[f]},w,{relevance:0,match:/\b[A-Z][A-Z_0-9]+\b/,
+className:"variable.constant"},E,k,{match:/\$[(.]/}]}}
+const ke=e=>b(/\b/,e,/\w$/.test(e)?/\b/:/\B/),xe=["Protocol","Type"].map(ke),Me=["init","self"].map(ke),Se=["Any","Self"],Ae=["actor","any","associatedtype","async","await",/as\?/,/as!/,"as","borrowing","break","case","catch","class","consume","consuming","continue","convenience","copy","default","defer","deinit","didSet","distributed","do","dynamic","each","else","enum","extension","fallthrough",/fileprivate\(set\)/,"fileprivate","final","for","func","get","guard","if","import","indirect","infix",/init\?/,/init!/,"inout",/internal\(set\)/,"internal","in","is","isolated","nonisolated","lazy","let","macro","mutating","nonmutating",/open\(set\)/,"open","operator","optional","override","postfix","precedencegroup","prefix",/private\(set\)/,"private","protocol",/public\(set\)/,"public","repeat","required","rethrows","return","set","some","static","struct","subscript","super","switch","throws","throw",/try\?/,/try!/,"try","typealias",/unowned\(safe\)/,/unowned\(unsafe\)/,"unowned","var","weak","where","while","willSet"],Ce=["false","nil","true"],Te=["assignment","associativity","higherThan","left","lowerThan","none","right"],Re=["#colorLiteral","#column","#dsohandle","#else","#elseif","#endif","#error","#file","#fileID","#fileLiteral","#filePath","#function","#if","#imageLiteral","#keyPath","#line","#selector","#sourceLocation","#warning"],De=["abs","all","any","assert","assertionFailure","debugPrint","dump","fatalError","getVaList","isKnownUniquelyReferenced","max","min","numericCast","pointwiseMax","pointwiseMin","precondition","preconditionFailure","print","readLine","repeatElement","sequence","stride","swap","swift_unboxFromSwiftValueWithType","transcode","type","unsafeBitCast","unsafeDowncast","withExtendedLifetime","withUnsafeMutablePointer","withUnsafePointer","withVaList","withoutActuallyEscaping","zip"],Ie=m(/[/=\-+!*%<>&|^~?]/,/[\u00A1-\u00A7]/,/[\u00A9\u00AB]/,/[\u00AC\u00AE]/,/[\u00B0\u00B1]/,/[\u00B6\u00BB\u00BF\u00D7\u00F7]/,/[\u2016-\u2017]/,/[\u2020-\u2027]/,/[\u2030-\u203E]/,/[\u2041-\u2053]/,/[\u2055-\u205E]/,/[\u2190-\u23FF]/,/[\u2500-\u2775]/,/[\u2794-\u2BFF]/,/[\u2E00-\u2E7F]/,/[\u3001-\u3003]/,/[\u3008-\u3020]/,/[\u3030]/),Le=m(Ie,/[\u0300-\u036F]/,/[\u1DC0-\u1DFF]/,/[\u20D0-\u20FF]/,/[\uFE00-\uFE0F]/,/[\uFE20-\uFE2F]/),Be=b(Ie,Le,"*"),$e=m(/[a-zA-Z_]/,/[\u00A8\u00AA\u00AD\u00AF\u00B2-\u00B5\u00B7-\u00BA]/,/[\u00BC-\u00BE\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u00FF]/,/[\u0100-\u02FF\u0370-\u167F\u1681-\u180D\u180F-\u1DBF]/,/[\u1E00-\u1FFF]/,/[\u200B-\u200D\u202A-\u202E\u203F-\u2040\u2054\u2060-\u206F]/,/[\u2070-\u20CF\u2100-\u218F\u2460-\u24FF\u2776-\u2793]/,/[\u2C00-\u2DFF\u2E80-\u2FFF]/,/[\u3004-\u3007\u3021-\u302F\u3031-\u303F\u3040-\uD7FF]/,/[\uF900-\uFD3D\uFD40-\uFDCF\uFDF0-\uFE1F\uFE30-\uFE44]/,/[\uFE47-\uFEFE\uFF00-\uFFFD]/),ze=m($e,/\d/,/[\u0300-\u036F\u1DC0-\u1DFF\u20D0-\u20FF\uFE20-\uFE2F]/),Fe=b($e,ze,"*"),Ue=b(/[A-Z]/,ze,"*"),je=["attached","autoclosure",b(/convention\(/,m("swift","block","c"),/\)/),"discardableResult","dynamicCallable","dynamicMemberLookup","escaping","freestanding","frozen","GKInspectable","IBAction","IBDesignable","IBInspectable","IBOutlet","IBSegueAction","inlinable","main","nonobjc","NSApplicationMain","NSCopying","NSManaged",b(/objc\(/,Fe,/\)/),"objc","objcMembers","propertyWrapper","requires_stored_property_inits","resultBuilder","Sendable","testable","UIApplicationMain","unchecked","unknown","usableFromInline","warn_unqualified_access"],Pe=["iOS","iOSApplicationExtension","macOS","macOSApplicationExtension","macCatalyst","macCatalystApplicationExtension","watchOS","watchOSApplicationExtension","tvOS","tvOSApplicationExtension","swift"]
+;var Ke=Object.freeze({__proto__:null,grmr_bash:e=>{const n=e.regex,t={},a={
+begin:/\$\{/,end:/\}/,contains:["self",{begin:/:-/,contains:[t]}]}
+;Object.assign(t,{className:"variable",variants:[{
+begin:n.concat(/\$[\w\d#@][\w\d_]*/,"(?![\\w\\d])(?![$])")},a]});const i={
+className:"subst",begin:/\$\(/,end:/\)/,contains:[e.BACKSLASH_ESCAPE]},r={
+begin:/<<-?\s*(?=\w+)/,starts:{contains:[e.END_SAME_AS_BEGIN({begin:/(\w+)/,
+end:/(\w+)/,className:"string"})]}},s={className:"string",begin:/"/,end:/"/,
+contains:[e.BACKSLASH_ESCAPE,t,i]};i.contains.push(s);const o={begin:/\$?\(\(/,
+end:/\)\)/,contains:[{begin:/\d+#[0-9a-f]+/,className:"number"},e.NUMBER_MODE,t]
+},l=e.SHEBANG({binary:"(fish|bash|zsh|sh|csh|ksh|tcsh|dash|scsh)",relevance:10
+}),c={className:"function",begin:/\w[\w\d_]*\s*\(\s*\)\s*\{/,returnBegin:!0,
+contains:[e.inherit(e.TITLE_MODE,{begin:/\w[\w\d_]*/})],relevance:0};return{
+name:"Bash",aliases:["sh"],keywords:{$pattern:/\b[a-z][a-z0-9._-]+\b/,
+keyword:["if","then","else","elif","fi","for","while","until","in","do","done","case","esac","function","select"],
+literal:["true","false"],
+built_in:["break","cd","continue","eval","exec","exit","export","getopts","hash","pwd","readonly","return","shift","test","times","trap","umask","unset","alias","bind","builtin","caller","command","declare","echo","enable","help","let","local","logout","mapfile","printf","read","readarray","source","type","typeset","ulimit","unalias","set","shopt","autoload","bg","bindkey","bye","cap","chdir","clone","comparguments","compcall","compctl","compdescribe","compfiles","compgroups","compquote","comptags","comptry","compvalues","dirs","disable","disown","echotc","echoti","emulate","fc","fg","float","functions","getcap","getln","history","integer","jobs","kill","limit","log","noglob","popd","print","pushd","pushln","rehash","sched","setcap","setopt","stat","suspend","ttyctl","unfunction","unhash","unlimit","unsetopt","vared","wait","whence","where","which","zcompile","zformat","zftp","zle","zmodload","zparseopts","zprof","zpty","zregexparse","zsocket","zstyle","ztcp","chcon","chgrp","chown","chmod","cp","dd","df","dir","dircolors","ln","ls","mkdir","mkfifo","mknod","mktemp","mv","realpath","rm","rmdir","shred","sync","touch","truncate","vdir","b2sum","base32","base64","cat","cksum","comm","csplit","cut","expand","fmt","fold","head","join","md5sum","nl","numfmt","od","paste","ptx","pr","sha1sum","sha224sum","sha256sum","sha384sum","sha512sum","shuf","sort","split","sum","tac","tail","tr","tsort","unexpand","uniq","wc","arch","basename","chroot","date","dirname","du","echo","env","expr","factor","groups","hostid","id","link","logname","nice","nohup","nproc","pathchk","pinky","printenv","printf","pwd","readlink","runcon","seq","sleep","stat","stdbuf","stty","tee","test","timeout","tty","uname","unlink","uptime","users","who","whoami","yes"]
+},contains:[l,e.SHEBANG(),c,o,e.HASH_COMMENT_MODE,r,{match:/(\/[a-z._-]+)+/},s,{
+match:/\\"/},{className:"string",begin:/'/,end:/'/},{match:/\\'/},t]}},
+grmr_c:e=>{const n=e.regex,t=e.COMMENT("//","$",{contains:[{begin:/\\\n/}]
+}),a="decltype\\(auto\\)",i="[a-zA-Z_]\\w*::",r="("+a+"|"+n.optional(i)+"[a-zA-Z_]\\w*"+n.optional("<[^<>]+>")+")",s={
+className:"type",variants:[{begin:"\\b[a-z\\d_]*_t\\b"},{
+match:/\batomic_[a-z]{3,6}\b/}]},o={className:"string",variants:[{
+begin:'(u8?|U|L)?"',end:'"',illegal:"\\n",contains:[e.BACKSLASH_ESCAPE]},{
+begin:"(u8?|U|L)?'(\\\\(x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4,8}|[0-7]{3}|\\S)|.)",
+end:"'",illegal:"."},e.END_SAME_AS_BEGIN({
+begin:/(?:u8?|U|L)?R"([^()\\ ]{0,16})\(/,end:/\)([^()\\ ]{0,16})"/})]},l={
+className:"number",variants:[{begin:"\\b(0b[01']+)"},{
+begin:"(-?)\\b([\\d']+(\\.[\\d']*)?|\\.[\\d']+)((ll|LL|l|L)(u|U)?|(u|U)(ll|LL|l|L)?|f|F|b|B)"
+},{
+begin:"(-?)(\\b0[xX][a-fA-F0-9']+|(\\b[\\d']+(\\.[\\d']*)?|\\.[\\d']+)([eE][-+]?[\\d']+)?)"
+}],relevance:0},c={className:"meta",begin:/#\s*[a-z]+\b/,end:/$/,keywords:{
+keyword:"if else elif endif define undef warning error line pragma _Pragma ifdef ifndef include"
+},contains:[{begin:/\\\n/,relevance:0},e.inherit(o,{className:"string"}),{
+className:"string",begin:/<.*?>/},t,e.C_BLOCK_COMMENT_MODE]},d={
+className:"title",begin:n.optional(i)+e.IDENT_RE,relevance:0
+},g=n.optional(i)+e.IDENT_RE+"\\s*\\(",u={
+keyword:["asm","auto","break","case","continue","default","do","else","enum","extern","for","fortran","goto","if","inline","register","restrict","return","sizeof","struct","switch","typedef","union","volatile","while","_Alignas","_Alignof","_Atomic","_Generic","_Noreturn","_Static_assert","_Thread_local","alignas","alignof","noreturn","static_assert","thread_local","_Pragma"],
+type:["float","double","signed","unsigned","int","short","long","char","void","_Bool","_Complex","_Imaginary","_Decimal32","_Decimal64","_Decimal128","const","static","complex","bool","imaginary"],
+literal:"true false NULL",
+built_in:"std string wstring cin cout cerr clog stdin stdout stderr stringstream istringstream ostringstream auto_ptr deque list queue stack vector map set pair bitset multiset multimap unordered_set unordered_map unordered_multiset unordered_multimap priority_queue make_pair array shared_ptr abort terminate abs acos asin atan2 atan calloc ceil cosh cos exit exp fabs floor fmod fprintf fputs free frexp fscanf future isalnum isalpha iscntrl isdigit isgraph islower isprint ispunct isspace isupper isxdigit tolower toupper labs ldexp log10 log malloc realloc memchr memcmp memcpy memset modf pow printf putchar puts scanf sinh sin snprintf sprintf sqrt sscanf strcat strchr strcmp strcpy strcspn strlen strncat strncmp strncpy strpbrk strrchr strspn strstr tanh tan vfprintf vprintf vsprintf endl initializer_list unique_ptr"
+},b=[c,s,t,e.C_BLOCK_COMMENT_MODE,l,o],m={variants:[{begin:/=/,end:/;/},{
+begin:/\(/,end:/\)/},{beginKeywords:"new throw return else",end:/;/}],
+keywords:u,contains:b.concat([{begin:/\(/,end:/\)/,keywords:u,
+contains:b.concat(["self"]),relevance:0}]),relevance:0},p={
+begin:"("+r+"[\\*&\\s]+)+"+g,returnBegin:!0,end:/[{;=]/,excludeEnd:!0,
+keywords:u,illegal:/[^\w\s\*&:<>.]/,contains:[{begin:a,keywords:u,relevance:0},{
+begin:g,returnBegin:!0,contains:[e.inherit(d,{className:"title.function"})],
+relevance:0},{relevance:0,match:/,/},{className:"params",begin:/\(/,end:/\)/,
+keywords:u,relevance:0,contains:[t,e.C_BLOCK_COMMENT_MODE,o,l,s,{begin:/\(/,
+end:/\)/,keywords:u,relevance:0,contains:["self",t,e.C_BLOCK_COMMENT_MODE,o,l,s]
+}]},s,t,e.C_BLOCK_COMMENT_MODE,c]};return{name:"C",aliases:["h"],keywords:u,
+disableAutodetect:!0,illegal:"</",contains:[].concat(m,p,b,[c,{
+begin:e.IDENT_RE+"::",keywords:u},{className:"class",
+beginKeywords:"enum class struct union",end:/[{;:<>=]/,contains:[{
+beginKeywords:"final class struct"},e.TITLE_MODE]}]),exports:{preprocessor:c,
+strings:o,keywords:u}}},grmr_cpp:e=>{const n=e.regex,t=e.COMMENT("//","$",{
+contains:[{begin:/\\\n/}]
+}),a="decltype\\(auto\\)",i="[a-zA-Z_]\\w*::",r="(?!struct)("+a+"|"+n.optional(i)+"[a-zA-Z_]\\w*"+n.optional("<[^<>]+>")+")",s={
+className:"type",begin:"\\b[a-z\\d_]*_t\\b"},o={className:"string",variants:[{
+begin:'(u8?|U|L)?"',end:'"',illegal:"\\n",contains:[e.BACKSLASH_ESCAPE]},{
+begin:"(u8?|U|L)?'(\\\\(x[0-9A-Fa-f]{2}|u[0-9A-Fa-f]{4,8}|[0-7]{3}|\\S)|.)",
+end:"'",illegal:"."},e.END_SAME_AS_BEGIN({
+begin:/(?:u8?|U|L)?R"([^()\\ ]{0,16})\(/,end:/\)([^()\\ ]{0,16})"/})]},l={
+className:"number",variants:[{begin:"\\b(0b[01']+)"},{
+begin:"(-?)\\b([\\d']+(\\.[\\d']*)?|\\.[\\d']+)((ll|LL|l|L)(u|U)?|(u|U)(ll|LL|l|L)?|f|F|b|B)"
+},{
+begin:"(-?)(\\b0[xX][a-fA-F0-9']+|(\\b[\\d']+(\\.[\\d']*)?|\\.[\\d']+)([eE][-+]?[\\d']+)?)"
+}],relevance:0},c={className:"meta",begin:/#\s*[a-z]+\b/,end:/$/,keywords:{
+keyword:"if else elif endif define undef warning error line pragma _Pragma ifdef ifndef include"
+},contains:[{begin:/\\\n/,relevance:0},e.inherit(o,{className:"string"}),{
+className:"string",begin:/<.*?>/},t,e.C_BLOCK_COMMENT_MODE]},d={
+className:"title",begin:n.optional(i)+e.IDENT_RE,relevance:0
+},g=n.optional(i)+e.IDENT_RE+"\\s*\\(",u={
+type:["bool","char","char16_t","char32_t","char8_t","double","float","int","long","short","void","wchar_t","unsigned","signed","const","static"],
+keyword:["alignas","alignof","and","and_eq","asm","atomic_cancel","atomic_commit","atomic_noexcept","auto","bitand","bitor","break","case","catch","class","co_await","co_return","co_yield","compl","concept","const_cast|10","consteval","constexpr","constinit","continue","decltype","default","delete","do","dynamic_cast|10","else","enum","explicit","export","extern","false","final","for","friend","goto","if","import","inline","module","mutable","namespace","new","noexcept","not","not_eq","nullptr","operator","or","or_eq","override","private","protected","public","reflexpr","register","reinterpret_cast|10","requires","return","sizeof","static_assert","static_cast|10","struct","switch","synchronized","template","this","thread_local","throw","transaction_safe","transaction_safe_dynamic","true","try","typedef","typeid","typename","union","using","virtual","volatile","while","xor","xor_eq"],
+literal:["NULL","false","nullopt","nullptr","true"],built_in:["_Pragma"],
+_type_hints:["any","auto_ptr","barrier","binary_semaphore","bitset","complex","condition_variable","condition_variable_any","counting_semaphore","deque","false_type","future","imaginary","initializer_list","istringstream","jthread","latch","lock_guard","multimap","multiset","mutex","optional","ostringstream","packaged_task","pair","promise","priority_queue","queue","recursive_mutex","recursive_timed_mutex","scoped_lock","set","shared_future","shared_lock","shared_mutex","shared_timed_mutex","shared_ptr","stack","string_view","stringstream","timed_mutex","thread","true_type","tuple","unique_lock","unique_ptr","unordered_map","unordered_multimap","unordered_multiset","unordered_set","variant","vector","weak_ptr","wstring","wstring_view"]
+},b={className:"function.dispatch",relevance:0,keywords:{
+_hint:["abort","abs","acos","apply","as_const","asin","atan","atan2","calloc","ceil","cerr","cin","clog","cos","cosh","cout","declval","endl","exchange","exit","exp","fabs","floor","fmod","forward","fprintf","fputs","free","frexp","fscanf","future","invoke","isalnum","isalpha","iscntrl","isdigit","isgraph","islower","isprint","ispunct","isspace","isupper","isxdigit","labs","launder","ldexp","log","log10","make_pair","make_shared","make_shared_for_overwrite","make_tuple","make_unique","malloc","memchr","memcmp","memcpy","memset","modf","move","pow","printf","putchar","puts","realloc","scanf","sin","sinh","snprintf","sprintf","sqrt","sscanf","std","stderr","stdin","stdout","strcat","strchr","strcmp","strcpy","strcspn","strlen","strncat","strncmp","strncpy","strpbrk","strrchr","strspn","strstr","swap","tan","tanh","terminate","to_underlying","tolower","toupper","vfprintf","visit","vprintf","vsprintf"]
+},
+begin:n.concat(/\b/,/(?!decltype)/,/(?!if)/,/(?!for)/,/(?!switch)/,/(?!while)/,e.IDENT_RE,n.lookahead(/(<[^<>]+>|)\s*\(/))
+},m=[b,c,s,t,e.C_BLOCK_COMMENT_MODE,l,o],p={variants:[{begin:/=/,end:/;/},{
+begin:/\(/,end:/\)/},{beginKeywords:"new throw return else",end:/;/}],
+keywords:u,contains:m.concat([{begin:/\(/,end:/\)/,keywords:u,
+contains:m.concat(["self"]),relevance:0}]),relevance:0},_={className:"function",
+begin:"("+r+"[\\*&\\s]+)+"+g,returnBegin:!0,end:/[{;=]/,excludeEnd:!0,
+keywords:u,illegal:/[^\w\s\*&:<>.]/,contains:[{begin:a,keywords:u,relevance:0},{
+begin:g,returnBegin:!0,contains:[d],relevance:0},{begin:/::/,relevance:0},{
+begin:/:/,endsWithParent:!0,contains:[o,l]},{relevance:0,match:/,/},{
+className:"params",begin:/\(/,end:/\)/,keywords:u,relevance:0,
+contains:[t,e.C_BLOCK_COMMENT_MODE,o,l,s,{begin:/\(/,end:/\)/,keywords:u,
+relevance:0,contains:["self",t,e.C_BLOCK_COMMENT_MODE,o,l,s]}]
+},s,t,e.C_BLOCK_COMMENT_MODE,c]};return{name:"C++",
+aliases:["cc","c++","h++","hpp","hh","hxx","cxx"],keywords:u,illegal:"</",
+classNameAliases:{"function.dispatch":"built_in"},
+contains:[].concat(p,_,b,m,[c,{
+begin:"\\b(deque|list|queue|priority_queue|pair|stack|vector|map|set|bitset|multiset|multimap|unordered_map|unordered_set|unordered_multiset|unordered_multimap|array|tuple|optional|variant|function)\\s*<(?!<)",
+end:">",keywords:u,contains:["self",s]},{begin:e.IDENT_RE+"::",keywords:u},{
+match:[/\b(?:enum(?:\s+(?:class|struct))?|class|struct|union)/,/\s+/,/\w+/],
+className:{1:"keyword",3:"title.class"}}])}},grmr_csharp:e=>{const n={
+keyword:["abstract","as","base","break","case","catch","class","const","continue","do","else","event","explicit","extern","finally","fixed","for","foreach","goto","if","implicit","in","interface","internal","is","lock","namespace","new","operator","out","override","params","private","protected","public","readonly","record","ref","return","scoped","sealed","sizeof","stackalloc","static","struct","switch","this","throw","try","typeof","unchecked","unsafe","using","virtual","void","volatile","while"].concat(["add","alias","and","ascending","async","await","by","descending","equals","from","get","global","group","init","into","join","let","nameof","not","notnull","on","or","orderby","partial","remove","select","set","unmanaged","value|0","var","when","where","with","yield"]),
+built_in:["bool","byte","char","decimal","delegate","double","dynamic","enum","float","int","long","nint","nuint","object","sbyte","short","string","ulong","uint","ushort"],
+literal:["default","false","null","true"]},t=e.inherit(e.TITLE_MODE,{
+begin:"[a-zA-Z](\\.?\\w)*"}),a={className:"number",variants:[{
+begin:"\\b(0b[01']+)"},{
+begin:"(-?)\\b([\\d']+(\\.[\\d']*)?|\\.[\\d']+)(u|U|l|L|ul|UL|f|F|b|B)"},{
+begin:"(-?)(\\b0[xX][a-fA-F0-9']+|(\\b[\\d']+(\\.[\\d']*)?|\\.[\\d']+)([eE][-+]?[\\d']+)?)"
+}],relevance:0},i={className:"string",begin:'@"',end:'"',contains:[{begin:'""'}]
+},r=e.inherit(i,{illegal:/\n/}),s={className:"subst",begin:/\{/,end:/\}/,
+keywords:n},o=e.inherit(s,{illegal:/\n/}),l={className:"string",begin:/\$"/,
+end:'"',illegal:/\n/,contains:[{begin:/\{\{/},{begin:/\}\}/
+},e.BACKSLASH_ESCAPE,o]},c={className:"string",begin:/\$@"/,end:'"',contains:[{
+begin:/\{\{/},{begin:/\}\}/},{begin:'""'},s]},d=e.inherit(c,{illegal:/\n/,
+contains:[{begin:/\{\{/},{begin:/\}\}/},{begin:'""'},o]})
+;s.contains=[c,l,i,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,a,e.C_BLOCK_COMMENT_MODE],
+o.contains=[d,l,r,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,a,e.inherit(e.C_BLOCK_COMMENT_MODE,{
+illegal:/\n/})];const g={variants:[c,l,i,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]
+},u={begin:"<",end:">",contains:[{beginKeywords:"in out"},t]
+},b=e.IDENT_RE+"(<"+e.IDENT_RE+"(\\s*,\\s*"+e.IDENT_RE+")*>)?(\\[\\])?",m={
+begin:"@"+e.IDENT_RE,relevance:0};return{name:"C#",aliases:["cs","c#"],
+keywords:n,illegal:/::/,contains:[e.COMMENT("///","$",{returnBegin:!0,
+contains:[{className:"doctag",variants:[{begin:"///",relevance:0},{
+begin:"\x3c!--|--\x3e"},{begin:"</?",end:">"}]}]
+}),e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,{className:"meta",begin:"#",
+end:"$",keywords:{
+keyword:"if else elif endif define undef warning error line region endregion pragma checksum"
+}},g,a,{beginKeywords:"class interface",relevance:0,end:/[{;=]/,
+illegal:/[^\s:,]/,contains:[{beginKeywords:"where class"
+},t,u,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{beginKeywords:"namespace",
+relevance:0,end:/[{;=]/,illegal:/[^\s:]/,
+contains:[t,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{
+beginKeywords:"record",relevance:0,end:/[{;=]/,illegal:/[^\s:]/,
+contains:[t,u,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{className:"meta",
+begin:"^\\s*\\[(?=[\\w])",excludeBegin:!0,end:"\\]",excludeEnd:!0,contains:[{
+className:"string",begin:/"/,end:/"/}]},{
+beginKeywords:"new return throw await else",relevance:0},{className:"function",
+begin:"("+b+"\\s+)+"+e.IDENT_RE+"\\s*(<[^=]+>\\s*)?\\(",returnBegin:!0,
+end:/\s*[{;=]/,excludeEnd:!0,keywords:n,contains:[{
+beginKeywords:"public private protected static internal protected abstract async extern override unsafe virtual new sealed partial",
+relevance:0},{begin:e.IDENT_RE+"\\s*(<[^=]+>\\s*)?\\(",returnBegin:!0,
+contains:[e.TITLE_MODE,u],relevance:0},{match:/\(\)/},{className:"params",
+begin:/\(/,end:/\)/,excludeBegin:!0,excludeEnd:!0,keywords:n,relevance:0,
+contains:[g,a,e.C_BLOCK_COMMENT_MODE]
+},e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},m]}},grmr_css:e=>{
+const n=e.regex,t=ie(e),a=[e.APOS_STRING_MODE,e.QUOTE_STRING_MODE];return{
+name:"CSS",case_insensitive:!0,illegal:/[=|'\$]/,keywords:{
+keyframePosition:"from to"},classNameAliases:{keyframePosition:"selector-tag"},
+contains:[t.BLOCK_COMMENT,{begin:/-(webkit|moz|ms|o)-(?=[a-z])/
+},t.CSS_NUMBER_MODE,{className:"selector-id",begin:/#[A-Za-z0-9_-]+/,relevance:0
+},{className:"selector-class",begin:"\\.[a-zA-Z-][a-zA-Z0-9_-]*",relevance:0
+},t.ATTRIBUTE_SELECTOR_MODE,{className:"selector-pseudo",variants:[{
+begin:":("+oe.join("|")+")"},{begin:":(:)?("+le.join("|")+")"}]
+},t.CSS_VARIABLE,{className:"attribute",begin:"\\b("+ce.join("|")+")\\b"},{
+begin:/:/,end:/[;}{]/,
+contains:[t.BLOCK_COMMENT,t.HEXCOLOR,t.IMPORTANT,t.CSS_NUMBER_MODE,...a,{
+begin:/(url|data-uri)\(/,end:/\)/,relevance:0,keywords:{built_in:"url data-uri"
+},contains:[...a,{className:"string",begin:/[^)]/,endsWithParent:!0,
+excludeEnd:!0}]},t.FUNCTION_DISPATCH]},{begin:n.lookahead(/@/),end:"[{;]",
+relevance:0,illegal:/:/,contains:[{className:"keyword",begin:/@-?\w[\w]*(-\w+)*/
+},{begin:/\s/,endsWithParent:!0,excludeEnd:!0,relevance:0,keywords:{
+$pattern:/[a-z-]+/,keyword:"and or not only",attribute:se.join(" ")},contains:[{
+begin:/[a-z-]+(?=:)/,className:"attribute"},...a,t.CSS_NUMBER_MODE]}]},{
+className:"selector-tag",begin:"\\b("+re.join("|")+")\\b"}]}},grmr_diff:e=>{
+const n=e.regex;return{name:"Diff",aliases:["patch"],contains:[{
+className:"meta",relevance:10,
+match:n.either(/^@@ +-\d+,\d+ +\+\d+,\d+ +@@/,/^\*\*\* +\d+,\d+ +\*\*\*\*$/,/^--- +\d+,\d+ +----$/)
+},{className:"comment",variants:[{
+begin:n.either(/Index: /,/^index/,/={3,}/,/^-{3}/,/^\*{3} /,/^\+{3}/,/^diff --git/),
+end:/$/},{match:/^\*{15}$/}]},{className:"addition",begin:/^\+/,end:/$/},{
+className:"deletion",begin:/^-/,end:/$/},{className:"addition",begin:/^!/,
+end:/$/}]}},grmr_go:e=>{const n={
+keyword:["break","case","chan","const","continue","default","defer","else","fallthrough","for","func","go","goto","if","import","interface","map","package","range","return","select","struct","switch","type","var"],
+type:["bool","byte","complex64","complex128","error","float32","float64","int8","int16","int32","int64","string","uint8","uint16","uint32","uint64","int","uint","uintptr","rune"],
+literal:["true","false","iota","nil"],
+built_in:["append","cap","close","complex","copy","imag","len","make","new","panic","print","println","real","recover","delete"]
+};return{name:"Go",aliases:["golang"],keywords:n,illegal:"</",
+contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,{className:"string",
+variants:[e.QUOTE_STRING_MODE,e.APOS_STRING_MODE,{begin:"`",end:"`"}]},{
+className:"number",variants:[{begin:e.C_NUMBER_RE+"[i]",relevance:1
+},e.C_NUMBER_MODE]},{begin:/:=/},{className:"function",beginKeywords:"func",
+end:"\\s*(\\{|$)",excludeEnd:!0,contains:[e.TITLE_MODE,{className:"params",
+begin:/\(/,end:/\)/,endsParent:!0,keywords:n,illegal:/["']/}]}]}},
+grmr_graphql:e=>{const n=e.regex;return{name:"GraphQL",aliases:["gql"],
+case_insensitive:!0,disableAutodetect:!1,keywords:{
+keyword:["query","mutation","subscription","type","input","schema","directive","interface","union","scalar","fragment","enum","on"],
+literal:["true","false","null"]},
+contains:[e.HASH_COMMENT_MODE,e.QUOTE_STRING_MODE,e.NUMBER_MODE,{
+scope:"punctuation",match:/[.]{3}/,relevance:0},{scope:"punctuation",
+begin:/[\!\(\)\:\=\[\]\{\|\}]{1}/,relevance:0},{scope:"variable",begin:/\$/,
+end:/\W/,excludeEnd:!0,relevance:0},{scope:"meta",match:/@\w+/,excludeEnd:!0},{
+scope:"symbol",begin:n.concat(/[_A-Za-z][_0-9A-Za-z]*/,n.lookahead(/\s*:/)),
+relevance:0}],illegal:[/[;<']/,/BEGIN/]}},grmr_ini:e=>{const n=e.regex,t={
+className:"number",relevance:0,variants:[{begin:/([+-]+)?[\d]+_[\d_]+/},{
+begin:e.NUMBER_RE}]},a=e.COMMENT();a.variants=[{begin:/;/,end:/$/},{begin:/#/,
+end:/$/}];const i={className:"variable",variants:[{begin:/\$[\w\d"][\w\d_]*/},{
+begin:/\$\{(.*?)\}/}]},r={className:"literal",
+begin:/\bon|off|true|false|yes|no\b/},s={className:"string",
+contains:[e.BACKSLASH_ESCAPE],variants:[{begin:"'''",end:"'''",relevance:10},{
+begin:'"""',end:'"""',relevance:10},{begin:'"',end:'"'},{begin:"'",end:"'"}]
+},o={begin:/\[/,end:/\]/,contains:[a,r,i,s,t,"self"],relevance:0
+},l=n.either(/[A-Za-z0-9_-]+/,/"(\\"|[^"])*"/,/'[^']*'/);return{
+name:"TOML, also INI",aliases:["toml"],case_insensitive:!0,illegal:/\S/,
+contains:[a,{className:"section",begin:/\[+/,end:/\]+/},{
+begin:n.concat(l,"(\\s*\\.\\s*",l,")*",n.lookahead(/\s*=\s*[^#\s]/)),
+className:"attr",starts:{end:/$/,contains:[a,o,r,i,s,t]}}]}},grmr_java:e=>{
+const n=e.regex,t="[\xc0-\u02b8a-zA-Z_$][\xc0-\u02b8a-zA-Z_$0-9]*",a=t+pe("(?:<"+t+"~~~(?:\\s*,\\s*"+t+"~~~)*>)?",/~~~/g,2),i={
+keyword:["synchronized","abstract","private","var","static","if","const ","for","while","strictfp","finally","protected","import","native","final","void","enum","else","break","transient","catch","instanceof","volatile","case","assert","package","default","public","try","switch","continue","throws","protected","public","private","module","requires","exports","do","sealed","yield","permits"],
+literal:["false","true","null"],
+type:["char","boolean","long","float","int","byte","short","double"],
+built_in:["super","this"]},r={className:"meta",begin:"@"+t,contains:[{
+begin:/\(/,end:/\)/,contains:["self"]}]},s={className:"params",begin:/\(/,
+end:/\)/,keywords:i,relevance:0,contains:[e.C_BLOCK_COMMENT_MODE],endsParent:!0}
+;return{name:"Java",aliases:["jsp"],keywords:i,illegal:/<\/|#/,
+contains:[e.COMMENT("/\\*\\*","\\*/",{relevance:0,contains:[{begin:/\w+@/,
+relevance:0},{className:"doctag",begin:"@[A-Za-z]+"}]}),{
+begin:/import java\.[a-z]+\./,keywords:"import",relevance:2
+},e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,{begin:/"""/,end:/"""/,
+className:"string",contains:[e.BACKSLASH_ESCAPE]
+},e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,{
+match:[/\b(?:class|interface|enum|extends|implements|new)/,/\s+/,t],className:{
+1:"keyword",3:"title.class"}},{match:/non-sealed/,scope:"keyword"},{
+begin:[n.concat(/(?!else)/,t),/\s+/,t,/\s+/,/=(?!=)/],className:{1:"type",
+3:"variable",5:"operator"}},{begin:[/record/,/\s+/,t],className:{1:"keyword",
+3:"title.class"},contains:[s,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{
+beginKeywords:"new throw return else",relevance:0},{
+begin:["(?:"+a+"\\s+)",e.UNDERSCORE_IDENT_RE,/\s*(?=\()/],className:{
+2:"title.function"},keywords:i,contains:[{className:"params",begin:/\(/,
+end:/\)/,keywords:i,relevance:0,
+contains:[r,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,me,e.C_BLOCK_COMMENT_MODE]
+},e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},me,r]}},grmr_javascript:Oe,
+grmr_json:e=>{const n=["true","false","null"],t={scope:"literal",
+beginKeywords:n.join(" ")};return{name:"JSON",keywords:{literal:n},contains:[{
+className:"attr",begin:/"(\\.|[^\\"\r\n])*"(?=\s*:)/,relevance:1.01},{
+match:/[{}[\],:]/,className:"punctuation",relevance:0
+},e.QUOTE_STRING_MODE,t,e.C_NUMBER_MODE,e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE],
+illegal:"\\S"}},grmr_kotlin:e=>{const n={
+keyword:"abstract as val var vararg get set class object open private protected public noinline crossinline dynamic final enum if else do while for when throw try catch finally import package is in fun override companion reified inline lateinit init interface annotation data sealed internal infix operator out by constructor super tailrec where const inner suspend typealias external expect actual",
+built_in:"Byte Short Char Int Long Boolean Float Double Void Unit Nothing",
+literal:"true false null"},t={className:"symbol",begin:e.UNDERSCORE_IDENT_RE+"@"
+},a={className:"subst",begin:/\$\{/,end:/\}/,contains:[e.C_NUMBER_MODE]},i={
+className:"variable",begin:"\\$"+e.UNDERSCORE_IDENT_RE},r={className:"string",
+variants:[{begin:'"""',end:'"""(?=[^"])',contains:[i,a]},{begin:"'",end:"'",
+illegal:/\n/,contains:[e.BACKSLASH_ESCAPE]},{begin:'"',end:'"',illegal:/\n/,
+contains:[e.BACKSLASH_ESCAPE,i,a]}]};a.contains.push(r);const s={
+className:"meta",
+begin:"@(?:file|property|field|get|set|receiver|param|setparam|delegate)\\s*:(?:\\s*"+e.UNDERSCORE_IDENT_RE+")?"
+},o={className:"meta",begin:"@"+e.UNDERSCORE_IDENT_RE,contains:[{begin:/\(/,
+end:/\)/,contains:[e.inherit(r,{className:"string"}),"self"]}]
+},l=me,c=e.COMMENT("/\\*","\\*/",{contains:[e.C_BLOCK_COMMENT_MODE]}),d={
+variants:[{className:"type",begin:e.UNDERSCORE_IDENT_RE},{begin:/\(/,end:/\)/,
+contains:[]}]},g=d;return g.variants[1].contains=[d],d.variants[1].contains=[g],
+{name:"Kotlin",aliases:["kt","kts"],keywords:n,
+contains:[e.COMMENT("/\\*\\*","\\*/",{relevance:0,contains:[{className:"doctag",
+begin:"@[A-Za-z]+"}]}),e.C_LINE_COMMENT_MODE,c,{className:"keyword",
+begin:/\b(break|continue|return|this)\b/,starts:{contains:[{className:"symbol",
+begin:/@\w+/}]}},t,s,o,{className:"function",beginKeywords:"fun",end:"[(]|$",
+returnBegin:!0,excludeEnd:!0,keywords:n,relevance:5,contains:[{
+begin:e.UNDERSCORE_IDENT_RE+"\\s*\\(",returnBegin:!0,relevance:0,
+contains:[e.UNDERSCORE_TITLE_MODE]},{className:"type",begin:/</,end:/>/,
+keywords:"reified",relevance:0},{className:"params",begin:/\(/,end:/\)/,
+endsParent:!0,keywords:n,relevance:0,contains:[{begin:/:/,end:/[=,\/]/,
+endsWithParent:!0,contains:[d,e.C_LINE_COMMENT_MODE,c],relevance:0
+},e.C_LINE_COMMENT_MODE,c,s,o,r,e.C_NUMBER_MODE]},c]},{
+begin:[/class|interface|trait/,/\s+/,e.UNDERSCORE_IDENT_RE],beginScope:{
+3:"title.class"},keywords:"class interface trait",end:/[:\{(]|$/,excludeEnd:!0,
+illegal:"extends implements",contains:[{
+beginKeywords:"public protected internal private constructor"
+},e.UNDERSCORE_TITLE_MODE,{className:"type",begin:/</,end:/>/,excludeBegin:!0,
+excludeEnd:!0,relevance:0},{className:"type",begin:/[,:]\s*/,end:/[<\(,){\s]|$/,
+excludeBegin:!0,returnEnd:!0},s,o]},r,{className:"meta",begin:"^#!/usr/bin/env",
+end:"$",illegal:"\n"},l]}},grmr_less:e=>{
+const n=ie(e),t=de,a="[\\w-]+",i="("+a+"|@\\{"+a+"\\})",r=[],s=[],o=e=>({
+className:"string",begin:"~?"+e+".*?"+e}),l=(e,n,t)=>({className:e,begin:n,
+relevance:t}),c={$pattern:/[a-z-]+/,keyword:"and or not only",
+attribute:se.join(" ")},d={begin:"\\(",end:"\\)",contains:s,keywords:c,
+relevance:0}
+;s.push(e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,o("'"),o('"'),n.CSS_NUMBER_MODE,{
+begin:"(url|data-uri)\\(",starts:{className:"string",end:"[\\)\\n]",
+excludeEnd:!0}
+},n.HEXCOLOR,d,l("variable","@@?"+a,10),l("variable","@\\{"+a+"\\}"),l("built_in","~?`[^`]*?`"),{
+className:"attribute",begin:a+"\\s*:",end:":",returnBegin:!0,excludeEnd:!0
+},n.IMPORTANT,{beginKeywords:"and not"},n.FUNCTION_DISPATCH);const g=s.concat({
+begin:/\{/,end:/\}/,contains:r}),u={beginKeywords:"when",endsWithParent:!0,
+contains:[{beginKeywords:"and not"}].concat(s)},b={begin:i+"\\s*:",
+returnBegin:!0,end:/[;}]/,relevance:0,contains:[{begin:/-(webkit|moz|ms|o)-/
+},n.CSS_VARIABLE,{className:"attribute",begin:"\\b("+ce.join("|")+")\\b",
+end:/(?=:)/,starts:{endsWithParent:!0,illegal:"[<=$]",relevance:0,contains:s}}]
+},m={className:"keyword",
+begin:"@(import|media|charset|font-face|(-[a-z]+-)?keyframes|supports|document|namespace|page|viewport|host)\\b",
+starts:{end:"[;{}]",keywords:c,returnEnd:!0,contains:s,relevance:0}},p={
+className:"variable",variants:[{begin:"@"+a+"\\s*:",relevance:15},{begin:"@"+a
+}],starts:{end:"[;}]",returnEnd:!0,contains:g}},_={variants:[{
+begin:"[\\.#:&\\[>]",end:"[;{}]"},{begin:i,end:/\{/}],returnBegin:!0,
+returnEnd:!0,illegal:"[<='$\"]",relevance:0,
+contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,u,l("keyword","all\\b"),l("variable","@\\{"+a+"\\}"),{
+begin:"\\b("+re.join("|")+")\\b",className:"selector-tag"
+},n.CSS_NUMBER_MODE,l("selector-tag",i,0),l("selector-id","#"+i),l("selector-class","\\."+i,0),l("selector-tag","&",0),n.ATTRIBUTE_SELECTOR_MODE,{
+className:"selector-pseudo",begin:":("+oe.join("|")+")"},{
+className:"selector-pseudo",begin:":(:)?("+le.join("|")+")"},{begin:/\(/,
+end:/\)/,relevance:0,contains:g},{begin:"!important"},n.FUNCTION_DISPATCH]},h={
+begin:a+":(:)?"+`(${t.join("|")})`,returnBegin:!0,contains:[_]}
+;return r.push(e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,m,p,h,b,_,u,n.FUNCTION_DISPATCH),
+{name:"Less",case_insensitive:!0,illegal:"[=>'/<($\"]",contains:r}},
+grmr_lua:e=>{const n="\\[=*\\[",t="\\]=*\\]",a={begin:n,end:t,contains:["self"]
+},i=[e.COMMENT("--(?!"+n+")","$"),e.COMMENT("--"+n,t,{contains:[a],relevance:10
+})];return{name:"Lua",keywords:{$pattern:e.UNDERSCORE_IDENT_RE,
+literal:"true false nil",
+keyword:"and break do else elseif end for goto if in local not or repeat return then until while",
+built_in:"_G _ENV _VERSION __index __newindex __mode __call __metatable __tostring __len __gc __add __sub __mul __div __mod __pow __concat __unm __eq __lt __le assert collectgarbage dofile error getfenv getmetatable ipairs load loadfile loadstring module next pairs pcall print rawequal rawget rawset require select setfenv setmetatable tonumber tostring type unpack xpcall arg self coroutine resume yield status wrap create running debug getupvalue debug sethook getmetatable gethook setmetatable setlocal traceback setfenv getinfo setupvalue getlocal getregistry getfenv io lines write close flush open output type read stderr stdin input stdout popen tmpfile math log max acos huge ldexp pi cos tanh pow deg tan cosh sinh random randomseed frexp ceil floor rad abs sqrt modf asin min mod fmod log10 atan2 exp sin atan os exit setlocale date getenv difftime remove time clock tmpname rename execute package preload loadlib loaded loaders cpath config path seeall string sub upper len gfind rep find match char dump gmatch reverse byte format gsub lower table setn insert getn foreachi maxn foreach concat sort remove"
+},contains:i.concat([{className:"function",beginKeywords:"function",end:"\\)",
+contains:[e.inherit(e.TITLE_MODE,{
+begin:"([_a-zA-Z]\\w*\\.)*([_a-zA-Z]\\w*:)?[_a-zA-Z]\\w*"}),{className:"params",
+begin:"\\(",endsWithParent:!0,contains:i}].concat(i)
+},e.C_NUMBER_MODE,e.APOS_STRING_MODE,e.QUOTE_STRING_MODE,{className:"string",
+begin:n,end:t,contains:[a],relevance:5}])}},grmr_makefile:e=>{const n={
+className:"variable",variants:[{begin:"\\$\\("+e.UNDERSCORE_IDENT_RE+"\\)",
+contains:[e.BACKSLASH_ESCAPE]},{begin:/\$[@%<?\^\+\*]/}]},t={className:"string",
+begin:/"/,end:/"/,contains:[e.BACKSLASH_ESCAPE,n]},a={className:"variable",
+begin:/\$\([\w-]+\s/,end:/\)/,keywords:{
+built_in:"subst patsubst strip findstring filter filter-out sort word wordlist firstword lastword dir notdir suffix basename addsuffix addprefix join wildcard realpath abspath error warning shell origin flavor foreach if or and call eval file value"
+},contains:[n]},i={begin:"^"+e.UNDERSCORE_IDENT_RE+"\\s*(?=[:+?]?=)"},r={
+className:"section",begin:/^[^\s]+:/,end:/$/,contains:[n]};return{
+name:"Makefile",aliases:["mk","mak","make"],keywords:{$pattern:/[\w-]+/,
+keyword:"define endef undefine ifdef ifndef ifeq ifneq else endif include -include sinclude override export unexport private vpath"
+},contains:[e.HASH_COMMENT_MODE,n,t,a,i,{className:"meta",begin:/^\.PHONY:/,
+end:/$/,keywords:{$pattern:/[\.\w]+/,keyword:".PHONY"}},r]}},grmr_markdown:e=>{
+const n={begin:/<\/?[A-Za-z_]/,end:">",subLanguage:"xml",relevance:0},t={
+variants:[{begin:/\[.+?\]\[.*?\]/,relevance:0},{
+begin:/\[.+?\]\(((data|javascript|mailto):|(?:http|ftp)s?:\/\/).*?\)/,
+relevance:2},{
+begin:e.regex.concat(/\[.+?\]\(/,/[A-Za-z][A-Za-z0-9+.-]*/,/:\/\/.*?\)/),
+relevance:2},{begin:/\[.+?\]\([./?&#].*?\)/,relevance:1},{
+begin:/\[.*?\]\(.*?\)/,relevance:0}],returnBegin:!0,contains:[{match:/\[(?=\])/
+},{className:"string",relevance:0,begin:"\\[",end:"\\]",excludeBegin:!0,
+returnEnd:!0},{className:"link",relevance:0,begin:"\\]\\(",end:"\\)",
+excludeBegin:!0,excludeEnd:!0},{className:"symbol",relevance:0,begin:"\\]\\[",
+end:"\\]",excludeBegin:!0,excludeEnd:!0}]},a={className:"strong",contains:[],
+variants:[{begin:/_{2}(?!\s)/,end:/_{2}/},{begin:/\*{2}(?!\s)/,end:/\*{2}/}]
+},i={className:"emphasis",contains:[],variants:[{begin:/\*(?![*\s])/,end:/\*/},{
+begin:/_(?![_\s])/,end:/_/,relevance:0}]},r=e.inherit(a,{contains:[]
+}),s=e.inherit(i,{contains:[]});a.contains.push(s),i.contains.push(r)
+;let o=[n,t];return[a,i,r,s].forEach((e=>{e.contains=e.contains.concat(o)
+})),o=o.concat(a,i),{name:"Markdown",aliases:["md","mkdown","mkd"],contains:[{
+className:"section",variants:[{begin:"^#{1,6}",end:"$",contains:o},{
+begin:"(?=^.+?\\n[=-]{2,}$)",contains:[{begin:"^[=-]*$"},{begin:"^",end:"\\n",
+contains:o}]}]},n,{className:"bullet",begin:"^[ \t]*([*+-]|(\\d+\\.))(?=\\s+)",
+end:"\\s+",excludeEnd:!0},a,i,{className:"quote",begin:"^>\\s+",contains:o,
+end:"$"},{className:"code",variants:[{begin:"(`{3,})[^`](.|\\n)*?\\1`*[ ]*"},{
+begin:"(~{3,})[^~](.|\\n)*?\\1~*[ ]*"},{begin:"```",end:"```+[ ]*$"},{
+begin:"~~~",end:"~~~+[ ]*$"},{begin:"`.+?`"},{begin:"(?=^( {4}|\\t))",
+contains:[{begin:"^( {4}|\\t)",end:"(\\n)$"}],relevance:0}]},{
+begin:"^[-\\*]{3,}",end:"$"},t,{begin:/^\[[^\n]+\]:/,returnBegin:!0,contains:[{
+className:"symbol",begin:/\[/,end:/\]/,excludeBegin:!0,excludeEnd:!0},{
+className:"link",begin:/:\s*/,end:/$/,excludeBegin:!0}]}]}},grmr_objectivec:e=>{
+const n=/[a-zA-Z@][a-zA-Z0-9_]*/,t={$pattern:n,
+keyword:["@interface","@class","@protocol","@implementation"]};return{
+name:"Objective-C",aliases:["mm","objc","obj-c","obj-c++","objective-c++"],
+keywords:{"variable.language":["this","super"],$pattern:n,
+keyword:["while","export","sizeof","typedef","const","struct","for","union","volatile","static","mutable","if","do","return","goto","enum","else","break","extern","asm","case","default","register","explicit","typename","switch","continue","inline","readonly","assign","readwrite","self","@synchronized","id","typeof","nonatomic","IBOutlet","IBAction","strong","weak","copy","in","out","inout","bycopy","byref","oneway","__strong","__weak","__block","__autoreleasing","@private","@protected","@public","@try","@property","@end","@throw","@catch","@finally","@autoreleasepool","@synthesize","@dynamic","@selector","@optional","@required","@encode","@package","@import","@defs","@compatibility_alias","__bridge","__bridge_transfer","__bridge_retained","__bridge_retain","__covariant","__contravariant","__kindof","_Nonnull","_Nullable","_Null_unspecified","__FUNCTION__","__PRETTY_FUNCTION__","__attribute__","getter","setter","retain","unsafe_unretained","nonnull","nullable","null_unspecified","null_resettable","class","instancetype","NS_DESIGNATED_INITIALIZER","NS_UNAVAILABLE","NS_REQUIRES_SUPER","NS_RETURNS_INNER_POINTER","NS_INLINE","NS_AVAILABLE","NS_DEPRECATED","NS_ENUM","NS_OPTIONS","NS_SWIFT_UNAVAILABLE","NS_ASSUME_NONNULL_BEGIN","NS_ASSUME_NONNULL_END","NS_REFINED_FOR_SWIFT","NS_SWIFT_NAME","NS_SWIFT_NOTHROW","NS_DURING","NS_HANDLER","NS_ENDHANDLER","NS_VALUERETURN","NS_VOIDRETURN"],
+literal:["false","true","FALSE","TRUE","nil","YES","NO","NULL"],
+built_in:["dispatch_once_t","dispatch_queue_t","dispatch_sync","dispatch_async","dispatch_once"],
+type:["int","float","char","unsigned","signed","short","long","double","wchar_t","unichar","void","bool","BOOL","id|0","_Bool"]
+},illegal:"</",contains:[{className:"built_in",
+begin:"\\b(AV|CA|CF|CG|CI|CL|CM|CN|CT|MK|MP|MTK|MTL|NS|SCN|SK|UI|WK|XC)\\w+"
+},e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,e.C_NUMBER_MODE,e.QUOTE_STRING_MODE,e.APOS_STRING_MODE,{
+className:"string",variants:[{begin:'@"',end:'"',illegal:"\\n",
+contains:[e.BACKSLASH_ESCAPE]}]},{className:"meta",begin:/#\s*[a-z]+\b/,end:/$/,
+keywords:{
+keyword:"if else elif endif define undef warning error line pragma ifdef ifndef include"
+},contains:[{begin:/\\\n/,relevance:0},e.inherit(e.QUOTE_STRING_MODE,{
+className:"string"}),{className:"string",begin:/<.*?>/,end:/$/,illegal:"\\n"
+},e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE]},{className:"class",
+begin:"("+t.keyword.join("|")+")\\b",end:/(\{|$)/,excludeEnd:!0,keywords:t,
+contains:[e.UNDERSCORE_TITLE_MODE]},{begin:"\\."+e.UNDERSCORE_IDENT_RE,
+relevance:0}]}},grmr_perl:e=>{const n=e.regex,t=/[dualxmsipngr]{0,12}/,a={
+$pattern:/[\w.]+/,
+keyword:"abs accept alarm and atan2 bind binmode bless break caller chdir chmod chomp chop chown chr chroot close closedir connect continue cos crypt dbmclose dbmopen defined delete die do dump each else elsif endgrent endhostent endnetent endprotoent endpwent endservent eof eval exec exists exit exp fcntl fileno flock for foreach fork format formline getc getgrent getgrgid getgrnam gethostbyaddr gethostbyname gethostent getlogin getnetbyaddr getnetbyname getnetent getpeername getpgrp getpriority getprotobyname getprotobynumber getprotoent getpwent getpwnam getpwuid getservbyname getservbyport getservent getsockname getsockopt given glob gmtime goto grep gt hex if index int ioctl join keys kill last lc lcfirst length link listen local localtime log lstat lt ma map mkdir msgctl msgget msgrcv msgsnd my ne next no not oct open opendir or ord our pack package pipe pop pos print printf prototype push q|0 qq quotemeta qw qx rand read readdir readline readlink readpipe recv redo ref rename require reset return reverse rewinddir rindex rmdir say scalar seek seekdir select semctl semget semop send setgrent sethostent setnetent setpgrp setpriority setprotoent setpwent setservent setsockopt shift shmctl shmget shmread shmwrite shutdown sin sleep socket socketpair sort splice split sprintf sqrt srand stat state study sub substr symlink syscall sysopen sysread sysseek system syswrite tell telldir tie tied time times tr truncate uc ucfirst umask undef unless unlink unpack unshift untie until use utime values vec wait waitpid wantarray warn when while write x|0 xor y|0"
+},i={className:"subst",begin:"[$@]\\{",end:"\\}",keywords:a},r={begin:/->\{/,
+end:/\}/},s={variants:[{begin:/\$\d/},{
+begin:n.concat(/[$%@](\^\w\b|#\w+(::\w+)*|\{\w+\}|\w+(::\w*)*)/,"(?![A-Za-z])(?![@$%])")
+},{begin:/[$%@][^\s\w{]/,relevance:0}]
+},o=[e.BACKSLASH_ESCAPE,i,s],l=[/!/,/\//,/\|/,/\?/,/'/,/"/,/#/],c=(e,a,i="\\1")=>{
+const r="\\1"===i?i:n.concat(i,a)
+;return n.concat(n.concat("(?:",e,")"),a,/(?:\\.|[^\\\/])*?/,r,/(?:\\.|[^\\\/])*?/,i,t)
+},d=(e,a,i)=>n.concat(n.concat("(?:",e,")"),a,/(?:\\.|[^\\\/])*?/,i,t),g=[s,e.HASH_COMMENT_MODE,e.COMMENT(/^=\w/,/=cut/,{
+endsWithParent:!0}),r,{className:"string",contains:o,variants:[{
+begin:"q[qwxr]?\\s*\\(",end:"\\)",relevance:5},{begin:"q[qwxr]?\\s*\\[",
+end:"\\]",relevance:5},{begin:"q[qwxr]?\\s*\\{",end:"\\}",relevance:5},{
+begin:"q[qwxr]?\\s*\\|",end:"\\|",relevance:5},{begin:"q[qwxr]?\\s*<",end:">",
+relevance:5},{begin:"qw\\s+q",end:"q",relevance:5},{begin:"'",end:"'",
+contains:[e.BACKSLASH_ESCAPE]},{begin:'"',end:'"'},{begin:"`",end:"`",
+contains:[e.BACKSLASH_ESCAPE]},{begin:/\{\w+\}/,relevance:0},{
+begin:"-?\\w+\\s*=>",relevance:0}]},{className:"number",
+begin:"(\\b0[0-7_]+)|(\\b0x[0-9a-fA-F_]+)|(\\b[1-9][0-9_]*(\\.[0-9_]+)?)|[0_]\\b",
+relevance:0},{
+begin:"(\\/\\/|"+e.RE_STARTERS_RE+"|\\b(split|return|print|reverse|grep)\\b)\\s*",
+keywords:"split return print reverse grep",relevance:0,
+contains:[e.HASH_COMMENT_MODE,{className:"regexp",variants:[{
+begin:c("s|tr|y",n.either(...l,{capture:!0}))},{begin:c("s|tr|y","\\(","\\)")},{
+begin:c("s|tr|y","\\[","\\]")},{begin:c("s|tr|y","\\{","\\}")}],relevance:2},{
+className:"regexp",variants:[{begin:/(m|qr)\/\//,relevance:0},{
+begin:d("(?:m|qr)?",/\//,/\//)},{begin:d("m|qr",n.either(...l,{capture:!0
+}),/\1/)},{begin:d("m|qr",/\(/,/\)/)},{begin:d("m|qr",/\[/,/\]/)},{
+begin:d("m|qr",/\{/,/\}/)}]}]},{className:"function",beginKeywords:"sub",
+end:"(\\s*\\(.*?\\))?[;{]",excludeEnd:!0,relevance:5,contains:[e.TITLE_MODE]},{
+begin:"-\\w\\b",relevance:0},{begin:"^__DATA__$",end:"^__END__$",
+subLanguage:"mojolicious",contains:[{begin:"^@@.*",end:"$",className:"comment"}]
+}];return i.contains=g,r.contains=g,{name:"Perl",aliases:["pl","pm"],keywords:a,
+contains:g}},grmr_php:e=>{
+const n=e.regex,t=/(?![A-Za-z0-9])(?![$])/,a=n.concat(/[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*/,t),i=n.concat(/(\\?[A-Z][a-z0-9_\x7f-\xff]+|\\?[A-Z]+(?=[A-Z][a-z0-9_\x7f-\xff])){1,}/,t),r={
+scope:"variable",match:"\\$+"+a},s={scope:"subst",variants:[{begin:/\$\w+/},{
+begin:/\{\$/,end:/\}/}]},o=e.inherit(e.APOS_STRING_MODE,{illegal:null
+}),l="[ \t\n]",c={scope:"string",variants:[e.inherit(e.QUOTE_STRING_MODE,{
+illegal:null,contains:e.QUOTE_STRING_MODE.contains.concat(s)}),o,{
+begin:/<<<[ \t]*(?:(\w+)|"(\w+)")\n/,end:/[ \t]*(\w+)\b/,
+contains:e.QUOTE_STRING_MODE.contains.concat(s),"on:begin":(e,n)=>{
+n.data._beginMatch=e[1]||e[2]},"on:end":(e,n)=>{
+n.data._beginMatch!==e[1]&&n.ignoreMatch()}},e.END_SAME_AS_BEGIN({
+begin:/<<<[ \t]*'(\w+)'\n/,end:/[ \t]*(\w+)\b/})]},d={scope:"number",variants:[{
+begin:"\\b0[bB][01]+(?:_[01]+)*\\b"},{begin:"\\b0[oO][0-7]+(?:_[0-7]+)*\\b"},{
+begin:"\\b0[xX][\\da-fA-F]+(?:_[\\da-fA-F]+)*\\b"},{
+begin:"(?:\\b\\d+(?:_\\d+)*(\\.(?:\\d+(?:_\\d+)*))?|\\B\\.\\d+)(?:[eE][+-]?\\d+)?"
+}],relevance:0
+},g=["false","null","true"],u=["__CLASS__","__DIR__","__FILE__","__FUNCTION__","__COMPILER_HALT_OFFSET__","__LINE__","__METHOD__","__NAMESPACE__","__TRAIT__","die","echo","exit","include","include_once","print","require","require_once","array","abstract","and","as","binary","bool","boolean","break","callable","case","catch","class","clone","const","continue","declare","default","do","double","else","elseif","empty","enddeclare","endfor","endforeach","endif","endswitch","endwhile","enum","eval","extends","final","finally","float","for","foreach","from","global","goto","if","implements","instanceof","insteadof","int","integer","interface","isset","iterable","list","match|0","mixed","new","never","object","or","private","protected","public","readonly","real","return","string","switch","throw","trait","try","unset","use","var","void","while","xor","yield"],b=["Error|0","AppendIterator","ArgumentCountError","ArithmeticError","ArrayIterator","ArrayObject","AssertionError","BadFunctionCallException","BadMethodCallException","CachingIterator","CallbackFilterIterator","CompileError","Countable","DirectoryIterator","DivisionByZeroError","DomainException","EmptyIterator","ErrorException","Exception","FilesystemIterator","FilterIterator","GlobIterator","InfiniteIterator","InvalidArgumentException","IteratorIterator","LengthException","LimitIterator","LogicException","MultipleIterator","NoRewindIterator","OutOfBoundsException","OutOfRangeException","OuterIterator","OverflowException","ParentIterator","ParseError","RangeException","RecursiveArrayIterator","RecursiveCachingIterator","RecursiveCallbackFilterIterator","RecursiveDirectoryIterator","RecursiveFilterIterator","RecursiveIterator","RecursiveIteratorIterator","RecursiveRegexIterator","RecursiveTreeIterator","RegexIterator","RuntimeException","SeekableIterator","SplDoublyLinkedList","SplFileInfo","SplFileObject","SplFixedArray","SplHeap","SplMaxHeap","SplMinHeap","SplObjectStorage","SplObserver","SplPriorityQueue","SplQueue","SplStack","SplSubject","SplTempFileObject","TypeError","UnderflowException","UnexpectedValueException","UnhandledMatchError","ArrayAccess","BackedEnum","Closure","Fiber","Generator","Iterator","IteratorAggregate","Serializable","Stringable","Throwable","Traversable","UnitEnum","WeakReference","WeakMap","Directory","__PHP_Incomplete_Class","parent","php_user_filter","self","static","stdClass"],m={
+keyword:u,literal:(e=>{const n=[];return e.forEach((e=>{
+n.push(e),e.toLowerCase()===e?n.push(e.toUpperCase()):n.push(e.toLowerCase())
+})),n})(g),built_in:b},p=e=>e.map((e=>e.replace(/\|\d+$/,""))),_={variants:[{
+match:[/new/,n.concat(l,"+"),n.concat("(?!",p(b).join("\\b|"),"\\b)"),i],scope:{
+1:"keyword",4:"title.class"}}]},h=n.concat(a,"\\b(?!\\()"),f={variants:[{
+match:[n.concat(/::/,n.lookahead(/(?!class\b)/)),h],scope:{2:"variable.constant"
+}},{match:[/::/,/class/],scope:{2:"variable.language"}},{
+match:[i,n.concat(/::/,n.lookahead(/(?!class\b)/)),h],scope:{1:"title.class",
+3:"variable.constant"}},{match:[i,n.concat("::",n.lookahead(/(?!class\b)/))],
+scope:{1:"title.class"}},{match:[i,/::/,/class/],scope:{1:"title.class",
+3:"variable.language"}}]},E={scope:"attr",
+match:n.concat(a,n.lookahead(":"),n.lookahead(/(?!::)/))},y={relevance:0,
+begin:/\(/,end:/\)/,keywords:m,contains:[E,r,f,e.C_BLOCK_COMMENT_MODE,c,d,_]
+},N={relevance:0,
+match:[/\b/,n.concat("(?!fn\\b|function\\b|",p(u).join("\\b|"),"|",p(b).join("\\b|"),"\\b)"),a,n.concat(l,"*"),n.lookahead(/(?=\()/)],
+scope:{3:"title.function.invoke"},contains:[y]};y.contains.push(N)
+;const w=[E,f,e.C_BLOCK_COMMENT_MODE,c,d,_];return{case_insensitive:!1,
+keywords:m,contains:[{begin:n.concat(/#\[\s*/,i),beginScope:"meta",end:/]/,
+endScope:"meta",keywords:{literal:g,keyword:["new","array"]},contains:[{
+begin:/\[/,end:/]/,keywords:{literal:g,keyword:["new","array"]},
+contains:["self",...w]},...w,{scope:"meta",match:i}]
+},e.HASH_COMMENT_MODE,e.COMMENT("//","$"),e.COMMENT("/\\*","\\*/",{contains:[{
+scope:"doctag",match:"@[A-Za-z]+"}]}),{match:/__halt_compiler\(\);/,
+keywords:"__halt_compiler",starts:{scope:"comment",end:e.MATCH_NOTHING_RE,
+contains:[{match:/\?>/,scope:"meta",endsParent:!0}]}},{scope:"meta",variants:[{
+begin:/<\?php/,relevance:10},{begin:/<\?=/},{begin:/<\?/,relevance:.1},{
+begin:/\?>/}]},{scope:"variable.language",match:/\$this\b/},r,N,f,{
+match:[/const/,/\s/,a],scope:{1:"keyword",3:"variable.constant"}},_,{
+scope:"function",relevance:0,beginKeywords:"fn function",end:/[;{]/,
+excludeEnd:!0,illegal:"[$%\\[]",contains:[{beginKeywords:"use"
+},e.UNDERSCORE_TITLE_MODE,{begin:"=>",endsParent:!0},{scope:"params",
+begin:"\\(",end:"\\)",excludeBegin:!0,excludeEnd:!0,keywords:m,
+contains:["self",r,f,e.C_BLOCK_COMMENT_MODE,c,d]}]},{scope:"class",variants:[{
+beginKeywords:"enum",illegal:/[($"]/},{beginKeywords:"class interface trait",
+illegal:/[:($"]/}],relevance:0,end:/\{/,excludeEnd:!0,contains:[{
+beginKeywords:"extends implements"},e.UNDERSCORE_TITLE_MODE]},{
+beginKeywords:"namespace",relevance:0,end:";",illegal:/[.']/,
+contains:[e.inherit(e.UNDERSCORE_TITLE_MODE,{scope:"title.class"})]},{
+beginKeywords:"use",relevance:0,end:";",contains:[{
+match:/\b(as|const|function)\b/,scope:"keyword"},e.UNDERSCORE_TITLE_MODE]},c,d]}
+},grmr_php_template:e=>({name:"PHP template",subLanguage:"xml",contains:[{
+begin:/<\?(php|=)?/,end:/\?>/,subLanguage:"php",contains:[{begin:"/\\*",
+end:"\\*/",skip:!0},{begin:'b"',end:'"',skip:!0},{begin:"b'",end:"'",skip:!0
+},e.inherit(e.APOS_STRING_MODE,{illegal:null,className:null,contains:null,
+skip:!0}),e.inherit(e.QUOTE_STRING_MODE,{illegal:null,className:null,
+contains:null,skip:!0})]}]}),grmr_plaintext:e=>({name:"Plain text",
+aliases:["text","txt"],disableAutodetect:!0}),grmr_python:e=>{
+const n=e.regex,t=/[\p{XID_Start}_]\p{XID_Continue}*/u,a=["and","as","assert","async","await","break","case","class","continue","def","del","elif","else","except","finally","for","from","global","if","import","in","is","lambda","match","nonlocal|10","not","or","pass","raise","return","try","while","with","yield"],i={
+$pattern:/[A-Za-z]\w+|__\w+__/,keyword:a,
+built_in:["__import__","abs","all","any","ascii","bin","bool","breakpoint","bytearray","bytes","callable","chr","classmethod","compile","complex","delattr","dict","dir","divmod","enumerate","eval","exec","filter","float","format","frozenset","getattr","globals","hasattr","hash","help","hex","id","input","int","isinstance","issubclass","iter","len","list","locals","map","max","memoryview","min","next","object","oct","open","ord","pow","print","property","range","repr","reversed","round","set","setattr","slice","sorted","staticmethod","str","sum","super","tuple","type","vars","zip"],
+literal:["__debug__","Ellipsis","False","None","NotImplemented","True"],
+type:["Any","Callable","Coroutine","Dict","List","Literal","Generic","Optional","Sequence","Set","Tuple","Type","Union"]
+},r={className:"meta",begin:/^(>>>|\.\.\.) /},s={className:"subst",begin:/\{/,
+end:/\}/,keywords:i,illegal:/#/},o={begin:/\{\{/,relevance:0},l={
+className:"string",contains:[e.BACKSLASH_ESCAPE],variants:[{
+begin:/([uU]|[bB]|[rR]|[bB][rR]|[rR][bB])?'''/,end:/'''/,
+contains:[e.BACKSLASH_ESCAPE,r],relevance:10},{
+begin:/([uU]|[bB]|[rR]|[bB][rR]|[rR][bB])?"""/,end:/"""/,
+contains:[e.BACKSLASH_ESCAPE,r],relevance:10},{
+begin:/([fF][rR]|[rR][fF]|[fF])'''/,end:/'''/,
+contains:[e.BACKSLASH_ESCAPE,r,o,s]},{begin:/([fF][rR]|[rR][fF]|[fF])"""/,
+end:/"""/,contains:[e.BACKSLASH_ESCAPE,r,o,s]},{begin:/([uU]|[rR])'/,end:/'/,
+relevance:10},{begin:/([uU]|[rR])"/,end:/"/,relevance:10},{
+begin:/([bB]|[bB][rR]|[rR][bB])'/,end:/'/},{begin:/([bB]|[bB][rR]|[rR][bB])"/,
+end:/"/},{begin:/([fF][rR]|[rR][fF]|[fF])'/,end:/'/,
+contains:[e.BACKSLASH_ESCAPE,o,s]},{begin:/([fF][rR]|[rR][fF]|[fF])"/,end:/"/,
+contains:[e.BACKSLASH_ESCAPE,o,s]},e.APOS_STRING_MODE,e.QUOTE_STRING_MODE]
+},c="[0-9](_?[0-9])*",d=`(\\b(${c}))?\\.(${c})|\\b(${c})\\.`,g="\\b|"+a.join("|"),u={
+className:"number",relevance:0,variants:[{
+begin:`(\\b(${c})|(${d}))[eE][+-]?(${c})[jJ]?(?=${g})`},{begin:`(${d})[jJ]?`},{
+begin:`\\b([1-9](_?[0-9])*|0+(_?0)*)[lLjJ]?(?=${g})`},{
+begin:`\\b0[bB](_?[01])+[lL]?(?=${g})`},{begin:`\\b0[oO](_?[0-7])+[lL]?(?=${g})`
+},{begin:`\\b0[xX](_?[0-9a-fA-F])+[lL]?(?=${g})`},{begin:`\\b(${c})[jJ](?=${g})`
+}]},b={className:"comment",begin:n.lookahead(/# type:/),end:/$/,keywords:i,
+contains:[{begin:/# type:/},{begin:/#/,end:/\b\B/,endsWithParent:!0}]},m={
+className:"params",variants:[{className:"",begin:/\(\s*\)/,skip:!0},{begin:/\(/,
+end:/\)/,excludeBegin:!0,excludeEnd:!0,keywords:i,
+contains:["self",r,u,l,e.HASH_COMMENT_MODE]}]};return s.contains=[l,u,r],{
+name:"Python",aliases:["py","gyp","ipython"],unicodeRegex:!0,keywords:i,
+illegal:/(<\/|\?)|=>/,contains:[r,u,{begin:/\bself\b/},{beginKeywords:"if",
+relevance:0},l,b,e.HASH_COMMENT_MODE,{match:[/\bdef/,/\s+/,t],scope:{
+1:"keyword",3:"title.function"},contains:[m]},{variants:[{
+match:[/\bclass/,/\s+/,t,/\s*/,/\(\s*/,t,/\s*\)/]},{match:[/\bclass/,/\s+/,t]}],
+scope:{1:"keyword",3:"title.class",6:"title.class.inherited"}},{
+className:"meta",begin:/^[\t ]*@/,end:/(?=#)|$/,contains:[u,m,l]}]}},
+grmr_python_repl:e=>({aliases:["pycon"],contains:[{className:"meta.prompt",
+starts:{end:/ |$/,starts:{end:"$",subLanguage:"python"}},variants:[{
+begin:/^>>>(?=[ ]|$)/},{begin:/^\.\.\.(?=[ ]|$)/}]}]}),grmr_r:e=>{
+const n=e.regex,t=/(?:(?:[a-zA-Z]|\.[._a-zA-Z])[._a-zA-Z0-9]*)|\.(?!\d)/,a=n.either(/0[xX][0-9a-fA-F]+\.[0-9a-fA-F]*[pP][+-]?\d+i?/,/0[xX][0-9a-fA-F]+(?:[pP][+-]?\d+)?[Li]?/,/(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?[Li]?/),i=/[=!<>:]=|\|\||&&|:::?|<-|<<-|->>|->|\|>|[-+*\/?!$&|:<=>@^~]|\*\*/,r=n.either(/[()]/,/[{}]/,/\[\[/,/[[\]]/,/\\/,/,/)
+;return{name:"R",keywords:{$pattern:t,
+keyword:"function if in break next repeat else for while",
+literal:"NULL NA TRUE FALSE Inf NaN NA_integer_|10 NA_real_|10 NA_character_|10 NA_complex_|10",
+built_in:"LETTERS letters month.abb month.name pi T F abs acos acosh all any anyNA Arg as.call as.character as.complex as.double as.environment as.integer as.logical as.null.default as.numeric as.raw asin asinh atan atanh attr attributes baseenv browser c call ceiling class Conj cos cosh cospi cummax cummin cumprod cumsum digamma dim dimnames emptyenv exp expression floor forceAndCall gamma gc.time globalenv Im interactive invisible is.array is.atomic is.call is.character is.complex is.double is.environment is.expression is.finite is.function is.infinite is.integer is.language is.list is.logical is.matrix is.na is.name is.nan is.null is.numeric is.object is.pairlist is.raw is.recursive is.single is.symbol lazyLoadDBfetch length lgamma list log max min missing Mod names nargs nzchar oldClass on.exit pos.to.env proc.time prod quote range Re rep retracemem return round seq_along seq_len seq.int sign signif sin sinh sinpi sqrt standardGeneric substitute sum switch tan tanh tanpi tracemem trigamma trunc unclass untracemem UseMethod xtfrm"
+},contains:[e.COMMENT(/#'/,/$/,{contains:[{scope:"doctag",match:/@examples/,
+starts:{end:n.lookahead(n.either(/\n^#'\s*(?=@[a-zA-Z]+)/,/\n^(?!#')/)),
+endsParent:!0}},{scope:"doctag",begin:"@param",end:/$/,contains:[{
+scope:"variable",variants:[{match:t},{match:/`(?:\\.|[^`\\])+`/}],endsParent:!0
+}]},{scope:"doctag",match:/@[a-zA-Z]+/},{scope:"keyword",match:/\\[a-zA-Z]+/}]
+}),e.HASH_COMMENT_MODE,{scope:"string",contains:[e.BACKSLASH_ESCAPE],
+variants:[e.END_SAME_AS_BEGIN({begin:/[rR]"(-*)\(/,end:/\)(-*)"/
+}),e.END_SAME_AS_BEGIN({begin:/[rR]"(-*)\{/,end:/\}(-*)"/
+}),e.END_SAME_AS_BEGIN({begin:/[rR]"(-*)\[/,end:/\](-*)"/
+}),e.END_SAME_AS_BEGIN({begin:/[rR]'(-*)\(/,end:/\)(-*)'/
+}),e.END_SAME_AS_BEGIN({begin:/[rR]'(-*)\{/,end:/\}(-*)'/
+}),e.END_SAME_AS_BEGIN({begin:/[rR]'(-*)\[/,end:/\](-*)'/}),{begin:'"',end:'"',
+relevance:0},{begin:"'",end:"'",relevance:0}]},{relevance:0,variants:[{scope:{
+1:"operator",2:"number"},match:[i,a]},{scope:{1:"operator",2:"number"},
+match:[/%[^%]*%/,a]},{scope:{1:"punctuation",2:"number"},match:[r,a]},{scope:{
+2:"number"},match:[/[^a-zA-Z0-9._]|^/,a]}]},{scope:{3:"operator"},
+match:[t,/\s+/,/<-/,/\s+/]},{scope:"operator",relevance:0,variants:[{match:i},{
+match:/%[^%]*%/}]},{scope:"punctuation",relevance:0,match:r},{begin:"`",end:"`",
+contains:[{begin:/\\./}]}]}},grmr_ruby:e=>{
+const n=e.regex,t="([a-zA-Z_]\\w*[!?=]?|[-+~]@|<<|>>|=~|===?|<=>|[<>]=?|\\*\\*|[-/+%^&*~`|]|\\[\\]=?)",a=n.either(/\b([A-Z]+[a-z0-9]+)+/,/\b([A-Z]+[a-z0-9]+)+[A-Z]+/),i=n.concat(a,/(::\w+)*/),r={
+"variable.constant":["__FILE__","__LINE__","__ENCODING__"],
+"variable.language":["self","super"],
+keyword:["alias","and","begin","BEGIN","break","case","class","defined","do","else","elsif","end","END","ensure","for","if","in","module","next","not","or","redo","require","rescue","retry","return","then","undef","unless","until","when","while","yield","include","extend","prepend","public","private","protected","raise","throw"],
+built_in:["proc","lambda","attr_accessor","attr_reader","attr_writer","define_method","private_constant","module_function"],
+literal:["true","false","nil"]},s={className:"doctag",begin:"@[A-Za-z]+"},o={
+begin:"#<",end:">"},l=[e.COMMENT("#","$",{contains:[s]
+}),e.COMMENT("^=begin","^=end",{contains:[s],relevance:10
+}),e.COMMENT("^__END__",e.MATCH_NOTHING_RE)],c={className:"subst",begin:/#\{/,
+end:/\}/,keywords:r},d={className:"string",contains:[e.BACKSLASH_ESCAPE,c],
+variants:[{begin:/'/,end:/'/},{begin:/"/,end:/"/},{begin:/`/,end:/`/},{
+begin:/%[qQwWx]?\(/,end:/\)/},{begin:/%[qQwWx]?\[/,end:/\]/},{
+begin:/%[qQwWx]?\{/,end:/\}/},{begin:/%[qQwWx]?</,end:/>/},{begin:/%[qQwWx]?\//,
+end:/\//},{begin:/%[qQwWx]?%/,end:/%/},{begin:/%[qQwWx]?-/,end:/-/},{
+begin:/%[qQwWx]?\|/,end:/\|/},{begin:/\B\?(\\\d{1,3})/},{
+begin:/\B\?(\\x[A-Fa-f0-9]{1,2})/},{begin:/\B\?(\\u\{?[A-Fa-f0-9]{1,6}\}?)/},{
+begin:/\B\?(\\M-\\C-|\\M-\\c|\\c\\M-|\\M-|\\C-\\M-)[\x20-\x7e]/},{
+begin:/\B\?\\(c|C-)[\x20-\x7e]/},{begin:/\B\?\\?\S/},{
+begin:n.concat(/<<[-~]?'?/,n.lookahead(/(\w+)(?=\W)[^\n]*\n(?:[^\n]*\n)*?\s*\1\b/)),
+contains:[e.END_SAME_AS_BEGIN({begin:/(\w+)/,end:/(\w+)/,
+contains:[e.BACKSLASH_ESCAPE,c]})]}]},g="[0-9](_?[0-9])*",u={className:"number",
+relevance:0,variants:[{
+begin:`\\b([1-9](_?[0-9])*|0)(\\.(${g}))?([eE][+-]?(${g})|r)?i?\\b`},{
+begin:"\\b0[dD][0-9](_?[0-9])*r?i?\\b"},{begin:"\\b0[bB][0-1](_?[0-1])*r?i?\\b"
+},{begin:"\\b0[oO][0-7](_?[0-7])*r?i?\\b"},{
+begin:"\\b0[xX][0-9a-fA-F](_?[0-9a-fA-F])*r?i?\\b"},{
+begin:"\\b0(_?[0-7])+r?i?\\b"}]},b={variants:[{match:/\(\)/},{
+className:"params",begin:/\(/,end:/(?=\))/,excludeBegin:!0,endsParent:!0,
+keywords:r}]},m=[d,{variants:[{match:[/class\s+/,i,/\s+<\s+/,i]},{
+match:[/\b(class|module)\s+/,i]}],scope:{2:"title.class",
+4:"title.class.inherited"},keywords:r},{match:[/(include|extend)\s+/,i],scope:{
+2:"title.class"},keywords:r},{relevance:0,match:[i,/\.new[. (]/],scope:{
+1:"title.class"}},{relevance:0,match:/\b[A-Z][A-Z_0-9]+\b/,
+className:"variable.constant"},{relevance:0,match:a,scope:"title.class"},{
+match:[/def/,/\s+/,t],scope:{1:"keyword",3:"title.function"},contains:[b]},{
+begin:e.IDENT_RE+"::"},{className:"symbol",
+begin:e.UNDERSCORE_IDENT_RE+"(!|\\?)?:",relevance:0},{className:"symbol",
+begin:":(?!\\s)",contains:[d,{begin:t}],relevance:0},u,{className:"variable",
+begin:"(\\$\\W)|((\\$|@@?)(\\w+))(?=[^@$?])(?![A-Za-z])(?![@$?'])"},{
+className:"params",begin:/\|/,end:/\|/,excludeBegin:!0,excludeEnd:!0,
+relevance:0,keywords:r},{begin:"("+e.RE_STARTERS_RE+"|unless)\\s*",
+keywords:"unless",contains:[{className:"regexp",contains:[e.BACKSLASH_ESCAPE,c],
+illegal:/\n/,variants:[{begin:"/",end:"/[a-z]*"},{begin:/%r\{/,end:/\}[a-z]*/},{
+begin:"%r\\(",end:"\\)[a-z]*"},{begin:"%r!",end:"![a-z]*"},{begin:"%r\\[",
+end:"\\][a-z]*"}]}].concat(o,l),relevance:0}].concat(o,l)
+;c.contains=m,b.contains=m;const p=[{begin:/^\s*=>/,starts:{end:"$",contains:m}
+},{className:"meta.prompt",
+begin:"^([>?]>|[\\w#]+\\(\\w+\\):\\d+:\\d+[>*]|(\\w+-)?\\d+\\.\\d+\\.\\d+(p\\d+)?[^\\d][^>]+>)(?=[ ])",
+starts:{end:"$",keywords:r,contains:m}}];return l.unshift(o),{name:"Ruby",
+aliases:["rb","gemspec","podspec","thor","irb"],keywords:r,illegal:/\/\*/,
+contains:[e.SHEBANG({binary:"ruby"})].concat(p).concat(l).concat(m)}},
+grmr_rust:e=>{const n=e.regex,t={className:"title.function.invoke",relevance:0,
+begin:n.concat(/\b/,/(?!let|for|while|if|else|match\b)/,e.IDENT_RE,n.lookahead(/\s*\(/))
+},a="([ui](8|16|32|64|128|size)|f(32|64))?",i=["drop ","Copy","Send","Sized","Sync","Drop","Fn","FnMut","FnOnce","ToOwned","Clone","Debug","PartialEq","PartialOrd","Eq","Ord","AsRef","AsMut","Into","From","Default","Iterator","Extend","IntoIterator","DoubleEndedIterator","ExactSizeIterator","SliceConcatExt","ToString","assert!","assert_eq!","bitflags!","bytes!","cfg!","col!","concat!","concat_idents!","debug_assert!","debug_assert_eq!","env!","eprintln!","panic!","file!","format!","format_args!","include_bytes!","include_str!","line!","local_data_key!","module_path!","option_env!","print!","println!","select!","stringify!","try!","unimplemented!","unreachable!","vec!","write!","writeln!","macro_rules!","assert_ne!","debug_assert_ne!"],r=["i8","i16","i32","i64","i128","isize","u8","u16","u32","u64","u128","usize","f32","f64","str","char","bool","Box","Option","Result","String","Vec"]
+;return{name:"Rust",aliases:["rs"],keywords:{$pattern:e.IDENT_RE+"!?",type:r,
+keyword:["abstract","as","async","await","become","box","break","const","continue","crate","do","dyn","else","enum","extern","false","final","fn","for","if","impl","in","let","loop","macro","match","mod","move","mut","override","priv","pub","ref","return","self","Self","static","struct","super","trait","true","try","type","typeof","unsafe","unsized","use","virtual","where","while","yield"],
+literal:["true","false","Some","None","Ok","Err"],built_in:i},illegal:"</",
+contains:[e.C_LINE_COMMENT_MODE,e.COMMENT("/\\*","\\*/",{contains:["self"]
+}),e.inherit(e.QUOTE_STRING_MODE,{begin:/b?"/,illegal:null}),{
+className:"string",variants:[{begin:/b?r(#*)"(.|\n)*?"\1(?!#)/},{
+begin:/b?'\\?(x\w{2}|u\w{4}|U\w{8}|.)'/}]},{className:"symbol",
+begin:/'[a-zA-Z_][a-zA-Z0-9_]*/},{className:"number",variants:[{
+begin:"\\b0b([01_]+)"+a},{begin:"\\b0o([0-7_]+)"+a},{
+begin:"\\b0x([A-Fa-f0-9_]+)"+a},{
+begin:"\\b(\\d[\\d_]*(\\.[0-9_]+)?([eE][+-]?[0-9_]+)?)"+a}],relevance:0},{
+begin:[/fn/,/\s+/,e.UNDERSCORE_IDENT_RE],className:{1:"keyword",
+3:"title.function"}},{className:"meta",begin:"#!?\\[",end:"\\]",contains:[{
+className:"string",begin:/"/,end:/"/}]},{
+begin:[/let/,/\s+/,/(?:mut\s+)?/,e.UNDERSCORE_IDENT_RE],className:{1:"keyword",
+3:"keyword",4:"variable"}},{
+begin:[/for/,/\s+/,e.UNDERSCORE_IDENT_RE,/\s+/,/in/],className:{1:"keyword",
+3:"variable",5:"keyword"}},{begin:[/type/,/\s+/,e.UNDERSCORE_IDENT_RE],
+className:{1:"keyword",3:"title.class"}},{
+begin:[/(?:trait|enum|struct|union|impl|for)/,/\s+/,e.UNDERSCORE_IDENT_RE],
+className:{1:"keyword",3:"title.class"}},{begin:e.IDENT_RE+"::",keywords:{
+keyword:"Self",built_in:i,type:r}},{className:"punctuation",begin:"->"},t]}},
+grmr_scss:e=>{const n=ie(e),t=le,a=oe,i="@[a-z-]+",r={className:"variable",
+begin:"(\\$[a-zA-Z-][a-zA-Z0-9_-]*)\\b",relevance:0};return{name:"SCSS",
+case_insensitive:!0,illegal:"[=/|']",
+contains:[e.C_LINE_COMMENT_MODE,e.C_BLOCK_COMMENT_MODE,n.CSS_NUMBER_MODE,{
+className:"selector-id",begin:"#[A-Za-z0-9_-]+",relevance:0},{
+className:"selector-class",begin:"\\.[A-Za-z0-9_-]+",relevance:0
+},n.ATTRIBUTE_SELECTOR_MODE,{className:"selector-tag",
+begin:"\\b("+re.join("|")+")\\b",relevance:0},{className:"selector-pseudo",
+begin:":("+a.join("|")+")"},{className:"selector-pseudo",
+begin:":(:)?("+t.join("|")+")"},r,{begin:/\(/,end:/\)/,
+contains:[n.CSS_NUMBER_MODE]},n.CSS_VARIABLE,{className:"attribute",
+begin:"\\b("+ce.join("|")+")\\b"},{
+begin:"\\b(whitespace|wait|w-resize|visible|vertical-text|vertical-ideographic|uppercase|upper-roman|upper-alpha|underline|transparent|top|thin|thick|text|text-top|text-bottom|tb-rl|table-header-group|table-footer-group|sw-resize|super|strict|static|square|solid|small-caps|separate|se-resize|scroll|s-resize|rtl|row-resize|ridge|right|repeat|repeat-y|repeat-x|relative|progress|pointer|overline|outside|outset|oblique|nowrap|not-allowed|normal|none|nw-resize|no-repeat|no-drop|newspaper|ne-resize|n-resize|move|middle|medium|ltr|lr-tb|lowercase|lower-roman|lower-alpha|loose|list-item|line|line-through|line-edge|lighter|left|keep-all|justify|italic|inter-word|inter-ideograph|inside|inset|inline|inline-block|inherit|inactive|ideograph-space|ideograph-parenthesis|ideograph-numeric|ideograph-alpha|horizontal|hidden|help|hand|groove|fixed|ellipsis|e-resize|double|dotted|distribute|distribute-space|distribute-letter|distribute-all-lines|disc|disabled|default|decimal|dashed|crosshair|collapse|col-resize|circle|char|center|capitalize|break-word|break-all|bottom|both|bolder|bold|block|bidi-override|below|baseline|auto|always|all-scroll|absolute|table|table-cell)\\b"
+},{begin:/:/,end:/[;}{]/,relevance:0,
+contains:[n.BLOCK_COMMENT,r,n.HEXCOLOR,n.CSS_NUMBER_MODE,e.QUOTE_STRING_MODE,e.APOS_STRING_MODE,n.IMPORTANT,n.FUNCTION_DISPATCH]
+},{begin:"@(page|font-face)",keywords:{$pattern:i,keyword:"@page @font-face"}},{
+begin:"@",end:"[{;]",returnBegin:!0,keywords:{$pattern:/[a-z-]+/,
+keyword:"and or not only",attribute:se.join(" ")},contains:[{begin:i,
+className:"keyword"},{begin:/[a-z-]+(?=:)/,className:"attribute"
+},r,e.QUOTE_STRING_MODE,e.APOS_STRING_MODE,n.HEXCOLOR,n.CSS_NUMBER_MODE]
+},n.FUNCTION_DISPATCH]}},grmr_shell:e=>({name:"Shell Session",
+aliases:["console","shellsession"],contains:[{className:"meta.prompt",
+begin:/^\s{0,3}[/~\w\d[\]()@-]*[>%$#][ ]?/,starts:{end:/[^\\](?=\s*$)/,
+subLanguage:"bash"}}]}),grmr_sql:e=>{
+const n=e.regex,t=e.COMMENT("--","$"),a=["true","false","unknown"],i=["bigint","binary","blob","boolean","char","character","clob","date","dec","decfloat","decimal","float","int","integer","interval","nchar","nclob","national","numeric","real","row","smallint","time","timestamp","varchar","varying","varbinary"],r=["abs","acos","array_agg","asin","atan","avg","cast","ceil","ceiling","coalesce","corr","cos","cosh","count","covar_pop","covar_samp","cume_dist","dense_rank","deref","element","exp","extract","first_value","floor","json_array","json_arrayagg","json_exists","json_object","json_objectagg","json_query","json_table","json_table_primitive","json_value","lag","last_value","lead","listagg","ln","log","log10","lower","max","min","mod","nth_value","ntile","nullif","percent_rank","percentile_cont","percentile_disc","position","position_regex","power","rank","regr_avgx","regr_avgy","regr_count","regr_intercept","regr_r2","regr_slope","regr_sxx","regr_sxy","regr_syy","row_number","sin","sinh","sqrt","stddev_pop","stddev_samp","substring","substring_regex","sum","tan","tanh","translate","translate_regex","treat","trim","trim_array","unnest","upper","value_of","var_pop","var_samp","width_bucket"],s=["create table","insert into","primary key","foreign key","not null","alter table","add constraint","grouping sets","on overflow","character set","respect nulls","ignore nulls","nulls first","nulls last","depth first","breadth first"],o=r,l=["abs","acos","all","allocate","alter","and","any","are","array","array_agg","array_max_cardinality","as","asensitive","asin","asymmetric","at","atan","atomic","authorization","avg","begin","begin_frame","begin_partition","between","bigint","binary","blob","boolean","both","by","call","called","cardinality","cascaded","case","cast","ceil","ceiling","char","char_length","character","character_length","check","classifier","clob","close","coalesce","collate","collect","column","commit","condition","connect","constraint","contains","convert","copy","corr","corresponding","cos","cosh","count","covar_pop","covar_samp","create","cross","cube","cume_dist","current","current_catalog","current_date","current_default_transform_group","current_path","current_role","current_row","current_schema","current_time","current_timestamp","current_path","current_role","current_transform_group_for_type","current_user","cursor","cycle","date","day","deallocate","dec","decimal","decfloat","declare","default","define","delete","dense_rank","deref","describe","deterministic","disconnect","distinct","double","drop","dynamic","each","element","else","empty","end","end_frame","end_partition","end-exec","equals","escape","every","except","exec","execute","exists","exp","external","extract","false","fetch","filter","first_value","float","floor","for","foreign","frame_row","free","from","full","function","fusion","get","global","grant","group","grouping","groups","having","hold","hour","identity","in","indicator","initial","inner","inout","insensitive","insert","int","integer","intersect","intersection","interval","into","is","join","json_array","json_arrayagg","json_exists","json_object","json_objectagg","json_query","json_table","json_table_primitive","json_value","lag","language","large","last_value","lateral","lead","leading","left","like","like_regex","listagg","ln","local","localtime","localtimestamp","log","log10","lower","match","match_number","match_recognize","matches","max","member","merge","method","min","minute","mod","modifies","module","month","multiset","national","natural","nchar","nclob","new","no","none","normalize","not","nth_value","ntile","null","nullif","numeric","octet_length","occurrences_regex","of","offset","old","omit","on","one","only","open","or","order","out","outer","over","overlaps","overlay","parameter","partition","pattern","per","percent","percent_rank","percentile_cont","percentile_disc","period","portion","position","position_regex","power","precedes","precision","prepare","primary","procedure","ptf","range","rank","reads","real","recursive","ref","references","referencing","regr_avgx","regr_avgy","regr_count","regr_intercept","regr_r2","regr_slope","regr_sxx","regr_sxy","regr_syy","release","result","return","returns","revoke","right","rollback","rollup","row","row_number","rows","running","savepoint","scope","scroll","search","second","seek","select","sensitive","session_user","set","show","similar","sin","sinh","skip","smallint","some","specific","specifictype","sql","sqlexception","sqlstate","sqlwarning","sqrt","start","static","stddev_pop","stddev_samp","submultiset","subset","substring","substring_regex","succeeds","sum","symmetric","system","system_time","system_user","table","tablesample","tan","tanh","then","time","timestamp","timezone_hour","timezone_minute","to","trailing","translate","translate_regex","translation","treat","trigger","trim","trim_array","true","truncate","uescape","union","unique","unknown","unnest","update","upper","user","using","value","values","value_of","var_pop","var_samp","varbinary","varchar","varying","versioning","when","whenever","where","width_bucket","window","with","within","without","year","add","asc","collation","desc","final","first","last","view"].filter((e=>!r.includes(e))),c={
+begin:n.concat(/\b/,n.either(...o),/\s*\(/),relevance:0,keywords:{built_in:o}}
+;return{name:"SQL",case_insensitive:!0,illegal:/[{}]|<\//,keywords:{
+$pattern:/\b[\w\.]+/,keyword:((e,{exceptions:n,when:t}={})=>{const a=t
+;return n=n||[],e.map((e=>e.match(/\|\d+$/)||n.includes(e)?e:a(e)?e+"|0":e))
+})(l,{when:e=>e.length<3}),literal:a,type:i,
+built_in:["current_catalog","current_date","current_default_transform_group","current_path","current_role","current_schema","current_transform_group_for_type","current_user","session_user","system_time","system_user","current_time","localtime","current_timestamp","localtimestamp"]
+},contains:[{begin:n.either(...s),relevance:0,keywords:{$pattern:/[\w\.]+/,
+keyword:l.concat(s),literal:a,type:i}},{className:"type",
+begin:n.either("double precision","large object","with timezone","without timezone")
+},c,{className:"variable",begin:/@[a-z0-9][a-z0-9_]*/},{className:"string",
+variants:[{begin:/'/,end:/'/,contains:[{begin:/''/}]}]},{begin:/"/,end:/"/,
+contains:[{begin:/""/}]},e.C_NUMBER_MODE,e.C_BLOCK_COMMENT_MODE,t,{
+className:"operator",begin:/[-+*/=%^~]|&&?|\|\|?|!=?|<(?:=>?|<|>)?|>[>=]?/,
+relevance:0}]}},grmr_swift:e=>{const n={match:/\s+/,relevance:0
+},t=e.COMMENT("/\\*","\\*/",{contains:["self"]}),a=[e.C_LINE_COMMENT_MODE,t],i={
+match:[/\./,m(...xe,...Me)],className:{2:"keyword"}},r={match:b(/\./,m(...Ae)),
+relevance:0},s=Ae.filter((e=>"string"==typeof e)).concat(["_|0"]),o={variants:[{
+className:"keyword",
+match:m(...Ae.filter((e=>"string"!=typeof e)).concat(Se).map(ke),...Me)}]},l={
+$pattern:m(/\b\w+/,/#\w+/),keyword:s.concat(Re),literal:Ce},c=[i,r,o],g=[{
+match:b(/\./,m(...De)),relevance:0},{className:"built_in",
+match:b(/\b/,m(...De),/(?=\()/)}],u={match:/->/,relevance:0},p=[u,{
+className:"operator",relevance:0,variants:[{match:Be},{match:`\\.(\\.|${Le})+`}]
+}],_="([0-9]_*)+",h="([0-9a-fA-F]_*)+",f={className:"number",relevance:0,
+variants:[{match:`\\b(${_})(\\.(${_}))?([eE][+-]?(${_}))?\\b`},{
+match:`\\b0x(${h})(\\.(${h}))?([pP][+-]?(${_}))?\\b`},{match:/\b0o([0-7]_*)+\b/
+},{match:/\b0b([01]_*)+\b/}]},E=(e="")=>({className:"subst",variants:[{
+match:b(/\\/,e,/[0\\tnr"']/)},{match:b(/\\/,e,/u\{[0-9a-fA-F]{1,8}\}/)}]
+}),y=(e="")=>({className:"subst",match:b(/\\/,e,/[\t ]*(?:[\r\n]|\r\n)/)
+}),N=(e="")=>({className:"subst",label:"interpol",begin:b(/\\/,e,/\(/),end:/\)/
+}),w=(e="")=>({begin:b(e,/"""/),end:b(/"""/,e),contains:[E(e),y(e),N(e)]
+}),v=(e="")=>({begin:b(e,/"/),end:b(/"/,e),contains:[E(e),N(e)]}),O={
+className:"string",
+variants:[w(),w("#"),w("##"),w("###"),v(),v("#"),v("##"),v("###")]
+},k=[e.BACKSLASH_ESCAPE,{begin:/\[/,end:/\]/,relevance:0,
+contains:[e.BACKSLASH_ESCAPE]}],x={begin:/\/[^\s](?=[^/\n]*\/)/,end:/\//,
+contains:k},M=e=>{const n=b(e,/\//),t=b(/\//,e);return{begin:n,end:t,
+contains:[...k,{scope:"comment",begin:`#(?!.*${t})`,end:/$/}]}},S={
+scope:"regexp",variants:[M("###"),M("##"),M("#"),x]},A={match:b(/`/,Fe,/`/)
+},C=[A,{className:"variable",match:/\$\d+/},{className:"variable",
+match:`\\$${ze}+`}],T=[{match:/(@|#(un)?)available/,scope:"keyword",starts:{
+contains:[{begin:/\(/,end:/\)/,keywords:Pe,contains:[...p,f,O]}]}},{
+scope:"keyword",match:b(/@/,m(...je))},{scope:"meta",match:b(/@/,Fe)}],R={
+match:d(/\b[A-Z]/),relevance:0,contains:[{className:"type",
+match:b(/(AV|CA|CF|CG|CI|CL|CM|CN|CT|MK|MP|MTK|MTL|NS|SCN|SK|UI|WK|XC)/,ze,"+")
+},{className:"type",match:Ue,relevance:0},{match:/[?!]+/,relevance:0},{
+match:/\.\.\./,relevance:0},{match:b(/\s+&\s+/,d(Ue)),relevance:0}]},D={
+begin:/</,end:/>/,keywords:l,contains:[...a,...c,...T,u,R]};R.contains.push(D)
+;const I={begin:/\(/,end:/\)/,relevance:0,keywords:l,contains:["self",{
+match:b(Fe,/\s*:/),keywords:"_|0",relevance:0
+},...a,S,...c,...g,...p,f,O,...C,...T,R]},L={begin:/</,end:/>/,
+keywords:"repeat each",contains:[...a,R]},B={begin:/\(/,end:/\)/,keywords:l,
+contains:[{begin:m(d(b(Fe,/\s*:/)),d(b(Fe,/\s+/,Fe,/\s*:/))),end:/:/,
+relevance:0,contains:[{className:"keyword",match:/\b_\b/},{className:"params",
+match:Fe}]},...a,...c,...p,f,O,...T,R,I],endsParent:!0,illegal:/["']/},$={
+match:[/(func|macro)/,/\s+/,m(A.match,Fe,Be)],className:{1:"keyword",
+3:"title.function"},contains:[L,B,n],illegal:[/\[/,/%/]},z={
+match:[/\b(?:subscript|init[?!]?)/,/\s*(?=[<(])/],className:{1:"keyword"},
+contains:[L,B,n],illegal:/\[|%/},F={match:[/operator/,/\s+/,Be],className:{
+1:"keyword",3:"title"}},U={begin:[/precedencegroup/,/\s+/,Ue],className:{
+1:"keyword",3:"title"},contains:[R],keywords:[...Te,...Ce],end:/}/}
+;for(const e of O.variants){const n=e.contains.find((e=>"interpol"===e.label))
+;n.keywords=l;const t=[...c,...g,...p,f,O,...C];n.contains=[...t,{begin:/\(/,
+end:/\)/,contains:["self",...t]}]}return{name:"Swift",keywords:l,
+contains:[...a,$,z,{beginKeywords:"struct protocol class extension enum actor",
+end:"\\{",excludeEnd:!0,keywords:l,contains:[e.inherit(e.TITLE_MODE,{
+className:"title.class",begin:/[A-Za-z$_][\u00C0-\u02B80-9A-Za-z$_]*/}),...c]
+},F,U,{beginKeywords:"import",end:/$/,contains:[...a],relevance:0
+},S,...c,...g,...p,f,O,...C,...T,R,I]}},grmr_typescript:e=>{
+const n=Oe(e),t=_e,a=["any","void","number","boolean","string","object","never","symbol","bigint","unknown"],i={
+beginKeywords:"namespace",end:/\{/,excludeEnd:!0,
+contains:[n.exports.CLASS_REFERENCE]},r={beginKeywords:"interface",end:/\{/,
+excludeEnd:!0,keywords:{keyword:"interface extends",built_in:a},
+contains:[n.exports.CLASS_REFERENCE]},s={$pattern:_e,
+keyword:he.concat(["type","namespace","interface","public","private","protected","implements","declare","abstract","readonly","enum","override"]),
+literal:fe,built_in:ve.concat(a),"variable.language":we},o={className:"meta",
+begin:"@"+t},l=(e,n,t)=>{const a=e.contains.findIndex((e=>e.label===n))
+;if(-1===a)throw Error("can not find mode to replace");e.contains.splice(a,1,t)}
+;return Object.assign(n.keywords,s),
+n.exports.PARAMS_CONTAINS.push(o),n.contains=n.contains.concat([o,i,r]),
+l(n,"shebang",e.SHEBANG()),l(n,"use_strict",{className:"meta",relevance:10,
+begin:/^\s*['"]use strict['"]/
+}),n.contains.find((e=>"func.def"===e.label)).relevance=0,Object.assign(n,{
+name:"TypeScript",aliases:["ts","tsx","mts","cts"]}),n},grmr_vbnet:e=>{
+const n=e.regex,t=/\d{1,2}\/\d{1,2}\/\d{4}/,a=/\d{4}-\d{1,2}-\d{1,2}/,i=/(\d|1[012])(:\d+){0,2} *(AM|PM)/,r=/\d{1,2}(:\d{1,2}){1,2}/,s={
+className:"literal",variants:[{begin:n.concat(/# */,n.either(a,t),/ *#/)},{
+begin:n.concat(/# */,r,/ *#/)},{begin:n.concat(/# */,i,/ *#/)},{
+begin:n.concat(/# */,n.either(a,t),/ +/,n.either(i,r),/ *#/)}]
+},o=e.COMMENT(/'''/,/$/,{contains:[{className:"doctag",begin:/<\/?/,end:/>/}]
+}),l=e.COMMENT(null,/$/,{variants:[{begin:/'/},{begin:/([\t ]|^)REM(?=\s)/}]})
+;return{name:"Visual Basic .NET",aliases:["vb"],case_insensitive:!0,
+classNameAliases:{label:"symbol"},keywords:{
+keyword:"addhandler alias aggregate ansi as async assembly auto binary by byref byval call case catch class compare const continue custom declare default delegate dim distinct do each equals else elseif end enum erase error event exit explicit finally for friend from function get global goto group handles if implements imports in inherits interface into iterator join key let lib loop me mid module mustinherit mustoverride mybase myclass namespace narrowing new next notinheritable notoverridable of off on operator option optional order overloads overridable overrides paramarray partial preserve private property protected public raiseevent readonly redim removehandler resume return select set shadows shared skip static step stop structure strict sub synclock take text then throw to try unicode until using when where while widening with withevents writeonly yield",
+built_in:"addressof and andalso await directcast gettype getxmlnamespace is isfalse isnot istrue like mod nameof new not or orelse trycast typeof xor cbool cbyte cchar cdate cdbl cdec cint clng cobj csbyte cshort csng cstr cuint culng cushort",
+type:"boolean byte char date decimal double integer long object sbyte short single string uinteger ulong ushort",
+literal:"true false nothing"},
+illegal:"//|\\{|\\}|endif|gosub|variant|wend|^\\$ ",contains:[{
+className:"string",begin:/"(""|[^/n])"C\b/},{className:"string",begin:/"/,
+end:/"/,illegal:/\n/,contains:[{begin:/""/}]},s,{className:"number",relevance:0,
+variants:[{begin:/\b\d[\d_]*((\.[\d_]+(E[+-]?[\d_]+)?)|(E[+-]?[\d_]+))[RFD@!#]?/
+},{begin:/\b\d[\d_]*((U?[SIL])|[%&])?/},{begin:/&H[\dA-F_]+((U?[SIL])|[%&])?/},{
+begin:/&O[0-7_]+((U?[SIL])|[%&])?/},{begin:/&B[01_]+((U?[SIL])|[%&])?/}]},{
+className:"label",begin:/^\w+:/},o,l,{className:"meta",
+begin:/[\t ]*#(const|disable|else|elseif|enable|end|externalsource|if|region)\b/,
+end:/$/,keywords:{
+keyword:"const disable else elseif enable end externalsource if region then"},
+contains:[l]}]}},grmr_wasm:e=>{e.regex;const n=e.COMMENT(/\(;/,/;\)/)
+;return n.contains.push("self"),{name:"WebAssembly",keywords:{$pattern:/[\w.]+/,
+keyword:["anyfunc","block","br","br_if","br_table","call","call_indirect","data","drop","elem","else","end","export","func","global.get","global.set","local.get","local.set","local.tee","get_global","get_local","global","if","import","local","loop","memory","memory.grow","memory.size","module","mut","nop","offset","param","result","return","select","set_global","set_local","start","table","tee_local","then","type","unreachable"]
+},contains:[e.COMMENT(/;;/,/$/),n,{match:[/(?:offset|align)/,/\s*/,/=/],
+className:{1:"keyword",3:"operator"}},{className:"variable",begin:/\$[\w_]+/},{
+match:/(\((?!;)|\))+/,className:"punctuation",relevance:0},{
+begin:[/(?:func|call|call_indirect)/,/\s+/,/\$[^\s)]+/],className:{1:"keyword",
+3:"title.function"}},e.QUOTE_STRING_MODE,{match:/(i32|i64|f32|f64)(?!\.)/,
+className:"type"},{className:"keyword",
+match:/\b(f32|f64|i32|i64)(?:\.(?:abs|add|and|ceil|clz|const|convert_[su]\/i(?:32|64)|copysign|ctz|demote\/f64|div(?:_[su])?|eqz?|extend_[su]\/i32|floor|ge(?:_[su])?|gt(?:_[su])?|le(?:_[su])?|load(?:(?:8|16|32)_[su])?|lt(?:_[su])?|max|min|mul|nearest|neg?|or|popcnt|promote\/f32|reinterpret\/[fi](?:32|64)|rem_[su]|rot[lr]|shl|shr_[su]|store(?:8|16|32)?|sqrt|sub|trunc(?:_[su]\/f(?:32|64))?|wrap\/i64|xor))\b/
+},{className:"number",relevance:0,
+match:/[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/
+}]}},grmr_xml:e=>{
+const n=e.regex,t=n.concat(/[\p{L}_]/u,n.optional(/[\p{L}0-9_.-]*:/u),/[\p{L}0-9_.-]*/u),a={
+className:"symbol",begin:/&[a-z]+;|&#[0-9]+;|&#x[a-f0-9]+;/},i={begin:/\s/,
+contains:[{className:"keyword",begin:/#?[a-z_][a-z1-9_-]+/,illegal:/\n/}]
+},r=e.inherit(i,{begin:/\(/,end:/\)/}),s=e.inherit(e.APOS_STRING_MODE,{
+className:"string"}),o=e.inherit(e.QUOTE_STRING_MODE,{className:"string"}),l={
+endsWithParent:!0,illegal:/</,relevance:0,contains:[{className:"attr",
+begin:/[\p{L}0-9._:-]+/u,relevance:0},{begin:/=\s*/,relevance:0,contains:[{
+className:"string",endsParent:!0,variants:[{begin:/"/,end:/"/,contains:[a]},{
+begin:/'/,end:/'/,contains:[a]},{begin:/[^\s"'=<>`]+/}]}]}]};return{
+name:"HTML, XML",
+aliases:["html","xhtml","rss","atom","xjb","xsd","xsl","plist","wsf","svg"],
+case_insensitive:!0,unicodeRegex:!0,contains:[{className:"meta",begin:/<![a-z]/,
+end:/>/,relevance:10,contains:[i,o,s,r,{begin:/\[/,end:/\]/,contains:[{
+className:"meta",begin:/<![a-z]/,end:/>/,contains:[i,r,o,s]}]}]
+},e.COMMENT(/<!--/,/-->/,{relevance:10}),{begin:/<!\[CDATA\[/,end:/\]\]>/,
+relevance:10},a,{className:"meta",end:/\?>/,variants:[{begin:/<\?xml/,
+relevance:10,contains:[o]},{begin:/<\?[a-z][a-z0-9]+/}]},{className:"tag",
+begin:/<style(?=\s|>)/,end:/>/,keywords:{name:"style"},contains:[l],starts:{
+end:/<\/style>/,returnEnd:!0,subLanguage:["css","xml"]}},{className:"tag",
+begin:/<script(?=\s|>)/,end:/>/,keywords:{name:"script"},contains:[l],starts:{
+end:/<\/script>/,returnEnd:!0,subLanguage:["javascript","handlebars","xml"]}},{
+className:"tag",begin:/<>|<\/>/},{className:"tag",
+begin:n.concat(/</,n.lookahead(n.concat(t,n.either(/\/>/,/>/,/\s/)))),
+end:/\/?>/,contains:[{className:"name",begin:t,relevance:0,starts:l}]},{
+className:"tag",begin:n.concat(/<\//,n.lookahead(n.concat(t,/>/))),contains:[{
+className:"name",begin:t,relevance:0},{begin:/>/,relevance:0,endsParent:!0}]}]}
+},grmr_yaml:e=>{
+const n="true false yes no null",t="[\\w#;/?:@&=+$,.~*'()[\\]]+",a={
+className:"string",relevance:0,variants:[{begin:/'/,end:/'/},{begin:/"/,end:/"/
+},{begin:/\S+/}],contains:[e.BACKSLASH_ESCAPE,{className:"template-variable",
+variants:[{begin:/\{\{/,end:/\}\}/},{begin:/%\{/,end:/\}/}]}]},i=e.inherit(a,{
+variants:[{begin:/'/,end:/'/},{begin:/"/,end:/"/},{begin:/[^\s,{}[\]]+/}]}),r={
+end:",",endsWithParent:!0,excludeEnd:!0,keywords:n,relevance:0},s={begin:/\{/,
+end:/\}/,contains:[r],illegal:"\\n",relevance:0},o={begin:"\\[",end:"\\]",
+contains:[r],illegal:"\\n",relevance:0},l=[{className:"attr",variants:[{
+begin:"\\w[\\w :\\/.-]*:(?=[ \t]|$)"},{begin:'"\\w[\\w :\\/.-]*":(?=[ \t]|$)'},{
+begin:"'\\w[\\w :\\/.-]*':(?=[ \t]|$)"}]},{className:"meta",begin:"^---\\s*$",
+relevance:10},{className:"string",
+begin:"[\\|>]([1-9]?[+-])?[ ]*\\n( +)[^ ][^\\n]*\\n(\\2[^\\n]+\\n?)*"},{
+begin:"<%[%=-]?",end:"[%-]?%>",subLanguage:"ruby",excludeBegin:!0,excludeEnd:!0,
+relevance:0},{className:"type",begin:"!\\w+!"+t},{className:"type",
+begin:"!<"+t+">"},{className:"type",begin:"!"+t},{className:"type",begin:"!!"+t
+},{className:"meta",begin:"&"+e.UNDERSCORE_IDENT_RE+"$"},{className:"meta",
+begin:"\\*"+e.UNDERSCORE_IDENT_RE+"$"},{className:"bullet",begin:"-(?=[ ]|$)",
+relevance:0},e.HASH_COMMENT_MODE,{beginKeywords:n,keywords:{literal:n}},{
+className:"number",
+begin:"\\b[0-9]{4}(-[0-9][0-9]){0,2}([Tt \\t][0-9][0-9]?(:[0-9][0-9]){2})?(\\.[0-9]*)?([ \\t])*(Z|[-+][0-9][0-9]?(:[0-9][0-9])?)?\\b"
+},{className:"number",begin:e.C_NUMBER_RE+"\\b",relevance:0},s,o,a],c=[...l]
+;return c.pop(),c.push(i),r.contains=c,{name:"YAML",case_insensitive:!0,
+aliases:["yml"],contains:l}}});const He=ae;for(const e of Object.keys(Ke)){
+const n=e.replace("grmr_","").replace("_","-");He.registerLanguage(n,Ke[e])}
+return He}()
+;"object"==typeof exports&&"undefined"!=typeof module&&(module.exports=hljs);
\ No newline at end of file
diff --git a/libraries/index.json b/libraries/index.json
new file mode 100644
index 0000000..f0e2d11
--- /dev/null
+++ b/libraries/index.json
@@ -0,0 +1,11 @@
+[
+  { "id": "stdio", "name": "stdio.h", "group": "C Standard Library" },
+  { "id": "stdlib", "name": "stdlib.h", "group": "C Standard Library" },
+  { "id": "string", "name": "string.h", "group": "C Standard Library" },
+  { "id": "math", "name": "math.h", "group": "C Standard Library" },
+  { "id": "time", "name": "time.h", "group": "C Standard Library" },
+  { "id": "glfw", "name": "GLFW", "group": "OpenGL" },
+  { "id": "glad", "name": "glad", "group": "OpenGL" },
+  { "id": "gl", "name": "OpenGL", "group": "OpenGL" },
+  { "id": "sdl3", "name": "SDL3", "group": "SDL3" }
+]
diff --git a/libraries/math.json b/libraries/math.json
new file mode 100644
index 0000000..5dfb523
--- /dev/null
+++ b/libraries/math.json
@@ -0,0 +1,88 @@
+{
+  "procedures": [
+    {
+      "name": "sin",
+      "inputs": [["x","float"]],
+      "outputs": [["result","float"]],
+      "returnStyle": "value",
+      "desc": "Returns the sine of an angle in radians."
+    },
+    {
+      "name": "cos",
+      "inputs": [["x","float"]],
+      "outputs": [["result","float"]],
+      "returnStyle": "value",
+      "desc": "Returns the cosine of an angle in radians."
+    },
+    {
+      "name": "tan",
+      "inputs": [["x","float"]],
+      "outputs": [["result","float"]],
+      "returnStyle": "value",
+      "desc": "Returns the tangent of an angle in radians."
+    },
+    {
+      "name": "sqrt",
+      "inputs": [["x","float"]],
+      "outputs": [["result","float"]],
+      "returnStyle": "value",
+      "desc": "Returns the square root of a number."
+    },
+    {
+      "name": "pow",
+      "inputs": [["x","float"],["y","float"]],
+      "outputs": [["result","float"]],
+      "returnStyle": "value",
+      "desc": "Returns a number raised to a power."
+    },
+    {
+      "name": "exp",
+      "inputs": [["x","float"]],
+      "outputs": [["result","float"]],
+      "returnStyle": "value",
+      "desc": "Returns e raised to the given power."
+    },
+    {
+      "name": "log",
+      "inputs": [["x","float"]],
+      "outputs": [["result","float"]],
+      "returnStyle": "value",
+      "desc": "Returns the natural logarithm of a number."
+    },
+    {
+      "name": "log10",
+      "inputs": [["x","float"]],
+      "outputs": [["result","float"]],
+      "returnStyle": "value",
+      "desc": "Returns the base-10 logarithm of a number."
+    },
+    {
+      "name": "fabs",
+      "inputs": [["x","float"]],
+      "outputs": [["result","float"]],
+      "returnStyle": "value",
+      "desc": "Returns the absolute value of a floating-point number."
+    },
+    {
+      "name": "floor",
+      "inputs": [["x","float"]],
+      "outputs": [["result","float"]],
+      "returnStyle": "value",
+      "desc": "Rounds a number down to the nearest integer."
+    },
+    {
+      "name": "ceil",
+      "inputs": [["x","float"]],
+      "outputs": [["result","float"]],
+      "returnStyle": "value",
+      "desc": "Rounds a number up to the nearest integer."
+    },
+    {
+      "name": "fmod",
+      "inputs": [["x","float"],["y","float"]],
+      "outputs": [["result","float"]],
+      "returnStyle": "value",
+      "desc": "Returns the floating-point remainder of division."
+    }
+  ]
+}
diff --git a/libraries/sdl3.json b/libraries/sdl3.json
new file mode 100644
index 0000000..ecb4234
--- /dev/null
+++ b/libraries/sdl3.json
@@ -0,0 +1,238 @@
+{
+  "procedures": [
+    {
+      "name": "SDL_Init",
+      "inputs": [["flags","unsigned int"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Initializes SDL subsystems (video, audio, etc.) with the given flags."
+    },
+    {
+      "name": "SDL_Quit",
+      "inputs": [],
+      "outputs": [],
+      "returnStyle": "void",
+      "desc": "Shuts down all SDL subsystems and cleans up resources."
+    },
+    {
+      "name": "SDL_SetAppMetadata",
+      "inputs": [["name","string"],["version","string"],["identifier","string"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Sets the application name, version, and identifier."
+    },
+    {
+      "name": "SDL_CreateWindow",
+      "inputs": [["title","string"],["w","int"],["h","int"],["flags","unsigned int"]],
+      "outputs": [["window","int"]],
+      "returnStyle": "value",
+      "desc": "Creates a window with the given title, size, and flags."
+    },
+    {
+      "name": "SDL_DestroyWindow",
+      "inputs": [["window","int"]],
+      "outputs": [],
+      "returnStyle": "void",
+      "desc": "Destroys a window and frees its resources."
+    },
+    {
+      "name": "SDL_SetWindowTitle",
+      "inputs": [["window","int"],["title","string"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Changes the title of a window."
+    },
+    {
+      "name": "SDL_GetWindowSize",
+      "inputs": [["window","int"]],
+      "outputs": [["w","int"],["h","int"]],
+      "desc": "Retrieves the current width and height of a window."
+    },
+    {
+      "name": "SDL_ShowWindow",
+      "inputs": [["window","int"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Makes a hidden window visible on screen."
+    },
+    {
+      "name": "SDL_HideWindow",
+      "inputs": [["window","int"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Hides a window from view."
+    },
+    {
+      "name": "SDL_RaiseWindow",
+      "inputs": [["window","int"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Brings a window to the front of the display."
+    },
+    {
+      "name": "SDL_MaximizeWindow",
+      "inputs": [["window","int"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Maximizes a window to fill the screen."
+    },
+    {
+      "name": "SDL_MinimizeWindow",
+      "inputs": [["window","int"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Minimizes a window to the taskbar."
+    },
+    {
+      "name": "SDL_RestoreWindow",
+      "inputs": [["window","int"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Restores a window from maximized or minimized state."
+    },
+    {
+      "name": "SDL_CreateRenderer",
+      "inputs": [["window","int"],["name","string"]],
+      "outputs": [["renderer","int"]],
+      "returnStyle": "value",
+      "desc": "Creates a 2D renderer for the given window."
+    },
+    {
+      "name": "SDL_DestroyRenderer",
+      "inputs": [["renderer","int"]],
+      "outputs": [],
+      "returnStyle": "void",
+      "desc": "Destroys a renderer and frees its resources."
+    },
+    {
+      "name": "SDL_RenderClear",
+      "inputs": [["renderer","int"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Clears the render target with the current draw color."
+    },
+    {
+      "name": "SDL_RenderPresent",
+      "inputs": [["renderer","int"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Presents the rendered frame to the screen."
+    },
+    {
+      "name": "SDL_SetRenderDrawColor",
+      "inputs": [["renderer","int"],["r","int"],["g","int"],["b","int"],["a","int"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Sets the color used for drawing operations."
+    },
+    {
+      "name": "SDL_RenderPoint",
+      "inputs": [["renderer","int"],["x","float"],["y","float"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Draws a single point at the given coordinates."
+    },
+    {
+      "name": "SDL_RenderLine",
+      "inputs": [["renderer","int"],["x1","float"],["y1","float"],["x2","float"],["y2","float"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Draws a line between two points."
+    },
+    {
+      "name": "SDL_RenderRect",
+      "inputs": [["renderer","int"],["x","float"],["y","float"],["w","float"],["h","float"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Draws a rectangle outline at the given position and size."
+    },
+    {
+      "name": "SDL_RenderFillRect",
+      "inputs": [["renderer","int"],["x","float"],["y","float"],["w","float"],["h","float"]],
+      "outputs": [],
+      "returnStyle": "error",
+      "desc": "Draws a filled rectangle at the given position and size."
+    },
+    {
+      "name": "SDL_PollEvent",
+      "inputs": [],
+      "outputs": [["event","int"]],
+      "desc": "Polls for the next pending input event."
+    },
+    {
+      "name": "SDL_WaitEvent",
+      "inputs": [],
+      "outputs": [["event","int"]],
+      "desc": "Waits indefinitely for the next input event."
+    },
+    {
+      "name": "SDL_PumpEvents",
+      "inputs": [],
+      "outputs": [],
+      "returnStyle": "void",
+      "desc": "Processes pending events without blocking."
+    },
+    {
+      "name": "SDL_FlushEvents",
+      "inputs": [["minType","unsigned int"],["maxType","unsigned int"]],
+      "outputs": [],
+      "returnStyle": "void",
+      "desc": "Discards all pending events in a given range."
+    },
+    {
+      "name": "SDL_GetTicks",
+      "inputs": [],
+      "outputs": [["ticks","unsigned int"]],
+      "returnStyle": "value",
+      "desc": "Returns milliseconds since SDL initialization."
+    },
+    {
+      "name": "SDL_Delay",
+      "inputs": [["ms","unsigned int"]],
+      "outputs": [],
+      "returnStyle": "void",
+      "desc": "Pauses execution for the given number of milliseconds."
+    },
+    {
+      "name": "SDL_GetKeyboardState",
+      "inputs": [],
+      "outputs": [["state","string"]],
+      "desc": "Returns a snapshot of the current keyboard state."
+    },
+    {
+      "name": "SDL_GetModState",
+      "inputs": [],
+      "outputs": [["mod","unsigned int"]],
+      "returnStyle": "value",
+      "desc": "Returns the current modifier key state (Shift, Ctrl, Alt)."
+    },
+    {
+      "name": "SDL_GetError",
+      "inputs": [],
+      "outputs": [["msg","string"]],
+      "returnStyle": "value",
+      "desc": "Returns the last error message as a string."
+    },
+    {
+      "name": "SDL_Log",
+      "inputs": [["fmt","string"]],
+      "outputs": [],
+      "returnStyle": "void",
+      "desc": "Outputs a log message via SDL's logging system."
+    },
+    {
+      "name": "SDL_GetTicksNS",
+      "inputs": [],
+      "outputs": [["ticks","unsigned int"]],
+      "returnStyle": "value",
+      "desc": "Returns nanoseconds since SDL initialization."
+    },
+    {
+      "name": "SDL_DelayNS",
+      "inputs": [["ns","unsigned int"]],
+      "outputs": [],
+      "returnStyle": "void",
+      "desc": "Pauses execution for the given number of nanoseconds."
+    }
+  ]
+}
diff --git a/libraries/stdio.json b/libraries/stdio.json
new file mode 100644
index 0000000..c9797d3
--- /dev/null
+++ b/libraries/stdio.json
@@ -0,0 +1,40 @@
+{
+  "procedures": [
+    {
+      "name": "puts",
+      "inputs": [["str","string"]],
+      "outputs": [],
+      "returnStyle": "void",
+      "desc": "Outputs a string followed by a newline to the console."
+    },
+    {
+      "name": "printf",
+      "inputs": [["fmt","string"]],
+      "outputs": [["result","int"]],
+      "returnStyle": "value",
+      "formatString": true,
+      "desc": "Outputs a formatted string with placeholders to the console. Dynamically creates data inputs for each % specifier in the format string."
+    },
+    {
+      "name": "getchar",
+      "inputs": [],
+      "outputs": [["result","int"]],
+      "returnStyle": "value",
+      "desc": "Reads a single character from the keyboard input."
+    },
+    {
+      "name": "putchar",
+      "inputs": [["c","int"]],
+      "outputs": [["result","int"]],
+      "returnStyle": "value",
+      "desc": "Writes a single character to the console output."
+    },
+    {
+      "name": "perror",
+      "inputs": [["msg","string"]],
+      "outputs": [],
+      "returnStyle": "void",
+      "desc": "Prints an error message describing the last error to stderr."
+    }
+  ]
+}
diff --git a/libraries/stdlib.json b/libraries/stdlib.json
new file mode 100644
index 0000000..6f5f0f4
--- /dev/null
+++ b/libraries/stdlib.json
@@ -0,0 +1,67 @@
+{
+  "procedures": [
+    {
+      "name": "malloc",
+      "inputs": [["size","int"]],
+      "outputs": [["ptr","int"]],
+      "returnStyle": "value",
+      "desc": "Allocates a block of memory of the given size."
+    },
+    {
+      "name": "free",
+      "inputs": [["ptr","int"]],
+      "outputs": [],
+      "returnStyle": "void",
+      "desc": "Releases a previously allocated memory block."
+    },
+    {
+      "name": "exit",
+      "inputs": [["status","int"]],
+      "outputs": [],
+      "returnStyle": "void",
+      "desc": "Terminates the program immediately with the given status code."
+    },
+    {
+      "name": "rand",
+      "inputs": [],
+      "outputs": [["result","int"]],
+      "returnStyle": "value",
+      "desc": "Returns a random integer between 0 and RAND_MAX."
+    },
+    {
+      "name": "srand",
+      "inputs": [["seed","unsigned int"]],
+      "outputs": [],
+      "returnStyle": "void",
+      "desc": "Seeds the random number generator with the given value."
+    },
+    {
+      "name": "atoi",
+      "inputs": [["str","string"]],
+      "outputs": [["result","int"]],
+      "returnStyle": "value",
+      "desc": "Converts a string to an integer."
+    },
+    {
+      "name": "atof",
+      "inputs": [["str","string"]],
+      "outputs": [["result","float"]],
+      "returnStyle": "value",
+      "desc": "Converts a string to a floating-point number."
+    },
+    {
+      "name": "abs",
+      "inputs": [["n","int"]],
+      "outputs": [["result","int"]],
+      "returnStyle": "value",
+      "desc": "Returns the absolute value of an integer."
+    },
+    {
+      "name": "system",
+      "inputs": [["cmd","string"]],
+      "outputs": [["result","int"]],
+      "returnStyle": "value",
+      "desc": "Executes a shell command."
+    }
+  ]
+}
diff --git a/libraries/string.json b/libraries/string.json
new file mode 100644
index 0000000..b7c667a
--- /dev/null
+++ b/libraries/string.json
@@ -0,0 +1,18 @@
+{
+  "procedures": [
+    {
+      "name": "strlen",
+      "inputs": [["str","string"]],
+      "outputs": [["result","int"]],
+      "returnStyle": "value",
+      "desc": "Returns the length of a string."
+    },
+    {
+      "name": "strcmp",
+      "inputs": [["s1","string"],["s2","string"]],
+      "outputs": [["result","int"]],
+      "returnStyle": "value",
+      "desc": "Compares two strings lexicographically."
+    }
+  ]
+}
diff --git a/libraries/time.json b/libraries/time.json
new file mode 100644
index 0000000..6414411
--- /dev/null
+++ b/libraries/time.json
@@ -0,0 +1,18 @@
+{
+  "procedures": [
+    {
+      "name": "time",
+      "inputs": [["timer","int"]],
+      "outputs": [["result","int"]],
+      "returnStyle": "value",
+      "desc": "Returns the current calendar time in seconds."
+    },
+    {
+      "name": "clock",
+      "inputs": [],
+      "outputs": [["result","int"]],
+      "returnStyle": "value",
+      "desc": "Returns the processor time used by the program."
+    }
+  ]
+}
diff --git a/persist.js b/persist.js
index ab92b78..07144a2 100644
--- a/persist.js
+++ b/persist.js
@@ -32,26 +32,38 @@ function saveBlockData(block) {
  */
 function saveWorkspace() {
   const prog = $id("main-program");
+  const dataArea = $id("data-area");
+  const varArea = $id("variable-area");
+  const connectionsSvg = $id("connections");
+  if (!prog || !dataArea || !varArea || !connectionsSvg) {
+    showError("Cannot save: missing core UI elements");
+    return;
+  }
+
   const state = {
     version: 1,
     counter: prog.counter,
     blocks: { algorithm: [], measurements: [], data: [], procedures: [] },
-    connections: []
+    connections: [],
+    sections: typeof saveSections === "function" ? saveSections() : []
   };
 
   for (const block of prog.children) {
+    if (!block.saveData) continue;
     state.blocks.algorithm.push({
       id: block.id, tag: block.tagName.toLowerCase(),
       data: saveBlockData(block)
     });
   }
-  for (const block of $id("data-area").children) {
+  for (const block of dataArea.children) {
+    if (!block.saveData) continue;
     state.blocks.measurements.push({
       id: block.id, tag: block.tagName.toLowerCase(),
       data: saveBlockData(block)
     });
   }
-  for (const block of $id("variable-area").children) {
+  for (const block of varArea.children) {
+    if (!block.saveData) continue;
     state.blocks.data.push({
       id: block.id, tag: block.tagName.toLowerCase(),
       data: saveBlockData(block)
@@ -63,11 +75,11 @@ function saveWorkspace() {
       data: saveBlockData(block)
     });
   }
-  for (const path of $id("connections").querySelectorAll("path.flow, path.flow-data")) {
+  for (const path of connectionsSvg.querySelectorAll("path.flow, path.flow-data")) {
     state.connections.push({
-      fromBlock: path.fromElement.id,
+      fromBlock: path.fromElement ? path.fromElement.id : "",
       fromHook: path.fromHook ? (path.fromHook.id || null) : null,
-      toBlock: path.toElement.id,
+      toBlock: path.toElement ? path.toElement.id : "",
       toHook: path.toHook ? (path.toHook.id || null) : null
     });
   }
@@ -85,12 +97,17 @@ function saveWorkspace() {
 function restoreBlock(info) {
   const reg = BLOCK_REGISTRY[info.tag];
   if (!reg) return null;
+  if (!info.data) { showError("Missing data for block " + info.id); return null; }
 
-  const frag = document.importNode(document.querySelector(reg.template).content, true);
+  const tmpl = document.querySelector(reg.template);
+  if (!tmpl) { showError("Missing template for " + info.tag); return null; }
+  const frag = document.importNode(tmpl.content, true);
   const el = frag.firstElementChild;
+  if (!el) { showError("Empty template for " + info.tag); return null; }
   el.id = info.id;
-  el.style.left = info.data.x + "px";
-  el.style.top  = info.data.y + "px";
+  /* Only set position for algorithm tab blocks (they have flow connections) */
+  if (info.data.x !== undefined) el.style.left = info.data.x + "px";
+  if (info.data.y !== undefined) el.style.top  = info.data.y + "px";
   return el;
 }
 
@@ -118,55 +135,64 @@ function loadWorkspace() {
   const raw = localStorage.getItem(STORAGE_KEY);
   if (!raw) return;
   let state;
-  try { state = JSON.parse(raw); } catch { return; }
+  try { state = JSON.parse(raw); } catch { showError("Could not load workspace: saved data is corrupted."); return; }
 
   const prog = $id("main-program");
   const dataArea = $id("data-area");
   const varArea = $id("variable-area");
   const connectionsSvg = $id("connections");
 
+  if (!prog || !dataArea || !varArea || !connectionsSvg) {
+    showError("Missing core UI elements for workspace load");
+    return;
+  }
+
   /* ── 1. Tear down existing state ── */
-  for (const p of connectionsSvg.querySelectorAll("path.flow, path.flow-data")) p.remove();
-  for (const block of document.querySelectorAll("[data-block]")) {
-    block.wcForeFlow = [];
-    block.wcNextFlow = [];
-  }
-  for (const block of [...prog.children]) {
-    if (block.id !== "main-start" && block.id !== "main-end") block.remove();
-  }
-  dataArea.innerHTML = "";
-  varArea.innerHTML  = "";
-  for (const pane of document.querySelectorAll(".lib-pane")) {
-    const pa = pane.querySelector(".procedures-area");
-    if (pa) pa.innerHTML = "";
-  }
-  document.querySelector(".lib-tab-bar").innerHTML = "";
+  _clearWorkspace({ keepStorage: true });
 
   prog.counter = state.counter;
 
   /* ── 2. Restore measurements (types + units) ── */
   restoreGroup(state.blocks.measurements, dataArea);
+  const firstUnit = dataArea.querySelector("wc-unit");
+  if (firstUnit) {
+    let unitHeader = dataArea.querySelector(".list-header");
+    if (!unitHeader) {
+      unitHeader = document.createElement("div");
+      unitHeader.className = "list-header";
+      unitHeader.style.borderTop = "2px solid var(--border)";
+      unitHeader.textContent = "Units \u2014 Fullname \u00a0 Type \u00a0 Suffix \u00a0 SI Factor \u00a0 Resolved";
+    }
+    dataArea.insertBefore(unitHeader, firstUnit);
+  }
 
   /* ── 3. Restore procedures — BEFORE algorithm (WCProcCall depends on them) ── */
   const libMap = {};
   const procEls = [];
+  const paneProcedures = $id("pane-procedures");
+  const procTabBar = document.querySelector(".lib-tab-bar");
   for (const info of state.blocks.procedures) {
     const lib = (info.data && info.data.library) || "unknown";
     if (!libMap[lib]) {
+      markLibLoaded(lib);
       const tab = document.createElement("button");
       tab.className = "lib-tab";
       tab.dataset.libName = lib;
       tab.textContent = lib;
       tab.addEventListener("click", () => switchLibTab(lib));
-      document.querySelector(".lib-tab-bar").appendChild(tab);
+      if (procTabBar) procTabBar.appendChild(tab);
 
       const pane = document.createElement("div");
       pane.className = "lib-pane";
       pane.dataset.libName = lib;
+      const hdr = document.createElement("div");
+      hdr.className = "list-header";
+      hdr.textContent = "Procedure \u00a0 Inputs \u2192 Outputs";
+      pane.appendChild(hdr);
       const pa = document.createElement("div");
       pa.className = "procedures-area";
       pane.appendChild(pa);
-      $id("pane-procedures").appendChild(pane);
+      if (paneProcedures) paneProcedures.appendChild(pane);
 
       libMap[lib] = pa;
     }
@@ -204,10 +230,10 @@ function loadWorkspace() {
     if (!fromBlock || !toBlock) continue;
 
     const fromHook = conn.fromHook
-      ? fromBlock.querySelector("#" + conn.fromHook)
+      ? (fromBlock.querySelector('[id="' + conn.fromHook + '"]') || fromBlock.querySelector('[data-direction="out"]') || fromBlock.querySelector(".hook"))
       : (fromBlock.querySelector('[data-direction="out"]') || fromBlock.querySelector(".hook"));
     const toHook = conn.toHook
-      ? toBlock.querySelector("#" + conn.toHook)
+      ? (toBlock.querySelector('[id="' + conn.toHook + '"]') || toBlock.querySelector('[data-direction="in"]') || toBlock.querySelector(".hook"))
       : (toBlock.querySelector('[data-direction="in"]') || toBlock.querySelector(".hook"));
     if (!fromHook || !toHook) continue;
 
@@ -225,10 +251,15 @@ function loadWorkspace() {
     drawpath(path);
   }
 
-  /* ── 7. Refresh dropdowns & SI displays (after all blocks + connections exist) ── */
+  /* ── 7. Restore logic sections ── */
+  if (state.sections && typeof restoreSections === "function") {
+    restoreSections(state.sections);
+  }
+
+  /* ── 8. Refresh dropdowns & SI displays (after all blocks + connections exist) ── */
   refreshAll();
-  for (const u of dataArea.querySelectorAll("wc-unit"))   u.updateSiDisplay();
-  for (const d of varArea.querySelectorAll("wc-scalar"))  d.updateSiDisplay();
+  if (dataArea) for (const u of dataArea.querySelectorAll("wc-unit"))   u.updateSiDisplay();
+  if (varArea)  for (const d of varArea.querySelectorAll("wc-scalar"))  d.updateSiDisplay();
 }
 
 
@@ -237,7 +268,7 @@ function loadWorkspace() {
  * returning the app to its pristine default state.
  */
 function newWorkspace() {
-  if (!confirm("Clear the entire workspace and start fresh?")) return;
-  localStorage.removeItem(STORAGE_KEY);
-  location.reload();
+  if (typeof showNewProjectModal === "function") {
+    showNewProjectModal();
+  }
 }
diff --git a/proc-browser.js b/proc-browser.js
new file mode 100644
index 0000000..1c1a900
--- /dev/null
+++ b/proc-browser.js
@@ -0,0 +1,360 @@
+// ── Procedure Browser Modal ────────────────────────────────────────────────
+//
+// A modal popup that displays a searchable, collapsible tree of all available
+// procedures (user-defined and library-provided). Replaces the old dropdown
+// <select> approach for selecting procedures in WCProcCall blocks.
+//
+// Depends on: dom.js ($, $id), helpers.js (switchLibTab, getLibraryIndex)
+
+/** @type {((qname:string|null)=>void)|null} */
+let _procBrowserCallback = null;
+
+/**
+ * Builds the tree data structure from all wc-procedure blocks and the library index.
+ * @returns {Array<{label:string, items:Array<{qname:string, naturalName:string, techName:string, readonly:boolean}>, userDefined:boolean}>}
+ */
+function _buildTreeData() {
+  const procs = document.querySelectorAll("wc-procedure");
+  const libIndex = getLibraryIndex();
+  const libMap = {};
+  for (const entry of libIndex) {
+    libMap[entry.id] = entry;
+  }
+
+  const userDefined = [];
+  const libGroups = {};
+
+  for (const proc of procs) {
+    const qname = proc.getQualifiedName();
+    if (!qname) continue;
+    const naturalName = proc.querySelector(".proc-natural-name").value || "";
+    const techName = proc.querySelector(".proc-tech-name").textContent || "";
+    const isReadonly = !!proc.dataset.readonly;
+
+    const item = { qname, naturalName, techName, readonly: isReadonly };
+
+    if (!isReadonly) {
+      userDefined.push(item);
+    } else {
+      const libId = proc.getLibrary();
+      if (!libGroups[libId]) {
+        const entry = libMap[libId];
+        libGroups[libId] = {
+          label: entry ? entry.name : libId,
+          items: []
+        };
+      }
+      libGroups[libId].items.push(item);
+    }
+  }
+
+  const groups = [];
+
+  if (userDefined.length > 0) {
+    userDefined.sort((a, b) => a.naturalName.localeCompare(b.naturalName) || a.qname.localeCompare(b.qname));
+    groups.push({ label: "User-defined", items: userDefined, userDefined: true });
+  }
+
+  const libIds = Object.keys(libGroups).sort((a, b) => {
+    const ga = libMap[a] ? libMap[a].group : "";
+    const gb = libMap[b] ? libMap[b].group : "";
+    if (ga !== gb) return ga.localeCompare(gb);
+    return (libMap[a] ? libMap[a].name : a).localeCompare(libMap[b] ? libMap[b].name : b);
+  });
+
+  for (const libId of libIds) {
+    libGroups[libId].items.sort((a, b) => a.techName.localeCompare(b.techName) || a.qname.localeCompare(b.qname));
+    groups.push({
+      label: libGroups[libId].label,
+      items: libGroups[libId].items,
+      userDefined: false
+    });
+  }
+
+  return groups;
+}
+
+/**
+ * Creates a collapsible group DOM element in the procedure browser tree.
+ * @param {{label:string, items:Array<any>, userDefined:boolean}} group
+ * @param {string} [selectedQname] QName to pre-select
+ * @returns {HTMLElement}
+ */
+function _createGroupElement(group, selectedQname) {
+  const groupDiv = document.createElement("div");
+  groupDiv.className = "proc-browser-tree-group";
+
+  const header = document.createElement("div");
+  header.className = "proc-browser-tree-group-header";
+  if (group.userDefined) {
+    header.classList.add("user-defined");
+  }
+
+  const arrow = document.createElement("span");
+  arrow.className = "proc-browser-tree-arrow";
+  arrow.textContent = group.userDefined ? "\u25BC" : "\u25B6";
+  header.appendChild(arrow);
+
+  const name = document.createElement("span");
+  name.className = "proc-browser-tree-group-name";
+  name.textContent = group.label;
+  header.appendChild(name);
+
+  const count = document.createElement("span");
+  count.className = "proc-browser-tree-group-count";
+  count.textContent = group.items.length.toString();
+  header.appendChild(count);
+
+  groupDiv.appendChild(header);
+
+  const itemsContainer = document.createElement("div");
+  itemsContainer.className = "proc-browser-tree-group-items";
+  if (!group.userDefined) {
+    itemsContainer.style.display = "none";
+  }
+
+  for (const item of group.items) {
+    const leaf = document.createElement("div");
+    leaf.className = "proc-browser-tree-leaf";
+    leaf.dataset.qname = item.qname;
+
+    if (item.qname === selectedQname) {
+      leaf.classList.add("selected");
+    }
+
+    const nameSpan = document.createElement("span");
+    nameSpan.className = "proc-browser-tree-leaf-name";
+    nameSpan.textContent = item.naturalName || item.techName || item.qname;
+    leaf.appendChild(nameSpan);
+
+    const qnameSpan = document.createElement("span");
+    qnameSpan.className = "proc-browser-tree-leaf-qname";
+    qnameSpan.textContent = item.qname;
+    leaf.appendChild(qnameSpan);
+
+    leaf.addEventListener("click", function () {
+      const sel = this.closest(".proc-browser-tree").querySelector(".proc-browser-tree-leaf.selected");
+      if (sel) sel.classList.remove("selected");
+      this.classList.add("selected");
+    });
+
+    leaf.addEventListener("dblclick", function () {
+      _confirmSelection(this.dataset.qname);
+    });
+
+    itemsContainer.appendChild(leaf);
+  }
+
+  header.addEventListener("click", function () {
+    const isCollapsed = arrow.textContent === "\u25B6";
+    arrow.textContent = isCollapsed ? "\u25BC" : "\u25B6";
+    itemsContainer.style.display = isCollapsed ? "" : "none";
+  });
+
+  groupDiv.appendChild(itemsContainer);
+  return groupDiv;
+}
+
+/**
+ * Filters the procedure tree by a search query, showing/hiding groups and items.
+ * @param {string} query
+ * @param {HTMLElement} overlay The procedure browser overlay element
+ */
+function _applySearchFilter(query, overlay) {
+  query = query.toLowerCase().trim();
+  const treeEl = overlay.querySelector(".proc-browser-tree");
+  const emptyEl = overlay.querySelector(".proc-browser-empty");
+
+  if (!treeEl) return;
+
+  if (!query) {
+    for (const groupEl of treeEl.querySelectorAll(".proc-browser-tree-group")) {
+      const header = groupEl.querySelector(".proc-browser-tree-group-header");
+      const items = groupEl.querySelector(".proc-browser-tree-group-items");
+      const arrow = groupEl.querySelector(".proc-browser-tree-arrow");
+      const isUserDefined = header.classList.contains("user-defined");
+      items.style.display = isUserDefined ? "" : "none";
+      arrow.textContent = isUserDefined ? "\u25BC" : "\u25B6";
+      for (const leaf of items.querySelectorAll(".proc-browser-tree-leaf")) {
+        leaf.style.display = "";
+      }
+      groupEl.style.display = "";
+    }
+    emptyEl.style.display = "none";
+    emptyEl.innerHTML = "";
+    return;
+  }
+
+  let hasVisible = false;
+  for (const groupEl of treeEl.querySelectorAll(".proc-browser-tree-group")) {
+    const items = groupEl.querySelector(".proc-browser-tree-group-items");
+    const arrow = groupEl.querySelector(".proc-browser-tree-arrow");
+    let groupHasMatch = false;
+
+    for (const leaf of items.querySelectorAll(".proc-browser-tree-leaf")) {
+      const nameEl = leaf.querySelector(".proc-browser-tree-leaf-name");
+      const qnameEl = leaf.querySelector(".proc-browser-tree-leaf-qname");
+      const name = nameEl ? nameEl.textContent.toLowerCase() : "";
+      const qname = qnameEl ? qnameEl.textContent.toLowerCase() : "";
+      if (name.includes(query) || qname.includes(query)) {
+        leaf.style.display = "";
+        groupHasMatch = true;
+      } else {
+        leaf.style.display = "none";
+      }
+    }
+
+    if (groupHasMatch) {
+      groupEl.style.display = "";
+      items.style.display = "";
+      arrow.textContent = "\u25BC";
+      hasVisible = true;
+    } else {
+      groupEl.style.display = "none";
+    }
+  }
+
+  if (hasVisible) {
+    emptyEl.style.display = "none";
+  } else {
+    emptyEl.style.display = "block";
+    emptyEl.innerHTML = "No procedures match '<strong>" + _escapeHtml(query) + "</strong>'.";
+  }
+}
+
+/**
+ * Escapes HTML special characters for safe innerHTML insertion.
+ * @param {string} str
+ * @returns {string}
+ */
+function _escapeHtml(str) {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+/**
+ * Confirms a procedure selection, closes the browser, and invokes the callback.
+ * @param {string} qname Qualified procedure name
+ */
+function _confirmSelection(qname) {
+  const overlay = $("#proc-browser-overlay");
+  if (overlay) overlay.classList.remove("active");
+  if (_procBrowserCallback) {
+    _procBrowserCallback(qname);
+    _procBrowserCallback = null;
+  }
+}
+
+/** Cancels procedure selection, closes the browser, invokes callback with null. */
+function _cancelBrowser() {
+  const overlay = $("#proc-browser-overlay");
+  if (overlay) overlay.classList.remove("active");
+  if (_procBrowserCallback) {
+    _procBrowserCallback(null);
+    _procBrowserCallback = null;
+  }
+}
+
+/**
+ * Opens the procedure browser modal, builds the tree, and wires up search/cancel/select.
+ * @param {string} selectedQname
+ * @param {(qname:string|null)=>void} callback
+ */
+function showProcedureBrowser(selectedQname, callback) {
+  _procBrowserCallback = callback;
+
+  const overlay = $("#proc-browser-overlay");
+  if (!overlay) return;
+
+  const groups = _buildTreeData();
+  const treeEl = overlay.querySelector(".proc-browser-tree");
+  const emptyEl = overlay.querySelector(".proc-browser-empty");
+  const searchInput = overlay.querySelector(".proc-browser-search");
+
+  treeEl.innerHTML = "";
+  searchInput.value = "";
+
+  if (groups.length === 0) {
+    emptyEl.style.display = "block";
+    emptyEl.innerHTML =
+      "No procedures available. " +
+      '<a href="#" class="proc-browser-goto-procedures">Go to the Procedures tab</a> ' +
+      "to define or load libraries.";
+  } else {
+    emptyEl.style.display = "none";
+    for (const group of groups) {
+      treeEl.appendChild(_createGroupElement(group, selectedQname));
+    }
+  }
+
+  _applySearchFilter("", overlay);
+
+  overlay.classList.add("active");
+  setTimeout(function () { searchInput.focus(); }, 100);
+}
+
+// Self-initialising IIFE — wires up the overlay event listeners at load time
+(function () {
+  const overlay = $("#proc-browser-overlay");
+  if (!overlay) return;
+
+  overlay.addEventListener("click", function (e) {
+    if (e.target === overlay) _cancelBrowser();
+  });
+
+  const cancelBtn = overlay.querySelector(".proc-browser-cancel");
+  if (cancelBtn) {
+    cancelBtn.addEventListener("click", _cancelBrowser);
+  }
+
+  const selectBtn = overlay.querySelector(".proc-browser-select");
+  if (selectBtn) {
+    selectBtn.addEventListener("click", function () {
+      let selected = overlay.querySelector(".proc-browser-tree-leaf.selected");
+      if (!selected) {
+        for (const leaf of overlay.querySelectorAll(".proc-browser-tree-leaf")) {
+          if (leaf.offsetParent !== null) {
+            selected = leaf;
+            break;
+          }
+        }
+      }
+      if (selected) {
+        _confirmSelection(selected.dataset.qname);
+      }
+    });
+  }
+
+  const searchInput = overlay.querySelector(".proc-browser-search");
+  if (searchInput) {
+    searchInput.addEventListener("input", function () {
+      _applySearchFilter(this.value, overlay);
+    });
+
+    searchInput.addEventListener("keydown", function (e) {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        const selected = overlay.querySelector(".proc-browser-tree-leaf.selected");
+        if (selected) {
+          _confirmSelection(selected.dataset.qname);
+        }
+      }
+      if (e.key === "Escape") {
+        _cancelBrowser();
+      }
+    });
+  }
+
+  const emptyEl = overlay.querySelector(".proc-browser-empty");
+  if (emptyEl) {
+    emptyEl.addEventListener("click", function (e) {
+      const link = e.target.closest(".proc-browser-goto-procedures");
+      if (link) {
+        e.preventDefault();
+        _cancelBrowser();
+        switchTab("procedures");
+      }
+    });
+  }
+})();
diff --git a/scripts/generate-docs.js b/scripts/generate-docs.js
new file mode 100644
index 0000000..614c86a
--- /dev/null
+++ b/scripts/generate-docs.js
@@ -0,0 +1,158 @@
+#!/usr/bin/env node
+// ── Standalone API documentation generator ────────────────────────────────
+//
+// Reads all production .js files, extracts JSDoc /** ... */ comment blocks
+// together with the declaration they annotate, and writes a formatted
+// Markdown file to docs/API.md.
+//
+// Zero dependencies - uses only Node.js built-in fs and path.
+// Run: node scripts/generate-docs.js
+//
+// ────────────────────────────────────────────────────────────────────────────
+
+const fs = require("fs");
+const path = require("path");
+
+const SOURCE_DIR = ".";
+const OUTPUT_FILE = path.join("docs", "API.md");
+const SOURCE_GLOB = [
+  "dom.js", "helpers.js", "error.js", "errno-data.js",
+  "draw.js", "sections.js", "wcblock.js", "blocks-algo.js",
+  "blocks-data.js", "blocks-proc.js", "wcprogram.js",
+  "persist.js", "lib-loader.js", "proc-browser.js",
+  "templates.js", "app.js"
+];
+
+// ── Parse helpers ────────────────────────────────────────────────────────
+
+/** Extracts the first doc comment block preceding a declaration. */
+function extractJSDoc(lines, startIdx) {
+  let i = startIdx;
+  while (i >= 0 && lines[i].trim() === "") i--;
+  if (i < 0) return null;
+  const line = lines[i].trim();
+  if (!line.endsWith("*/")) return null;
+  const end = i;
+  while (i >= 0 && !lines[i].trim().startsWith("/**")) i--;
+  if (i < 0) return null;
+  const raw = lines.slice(i, end + 1).join("\n");
+  return { raw, startLine: i + 1 };
+}
+
+/** Strips opening, closing, and leading star markers from a JSDoc block. */
+function cleanJSDoc(raw) {
+  const singleLine = !raw.includes("\n");
+  if (singleLine) {
+    return raw.replace(/^\/\*\*\s*/, "").replace(/\s*\*\/$/, "").trim();
+  }
+  return raw
+    .replace(/^\/\*\*[\s\S]*?\n/, "")
+    .replace(/\s*\*\/\s*$/, "")
+    .split("\n")
+    .map(l => l.replace(/^\s*\* ?/, ""))
+    .join("\n")
+    .trim();
+}
+
+/** Extracts the name from a declaration line like class Foo, function foo, or const foo. */
+function declName(line) {
+  const m = line.match(/^(?:class|function|const)\s+(\w+)/);
+  return m ? m[1] : null;
+}
+
+/** Determines the declaration kind (class/function/const) from the line. */
+function declKind(line) {
+  if (/^class\b/.test(line)) return "class";
+  if (/^function\b/.test(line)) return "function";
+  if (/^const\b/.test(line)) return "const";
+  return "declaration";
+}
+
+// ── Generator ────────────────────────────────────────────────────────────
+
+function generate() {
+  const blocks = [];
+
+  for (const filename of SOURCE_GLOB) {
+    const absPath = path.resolve(SOURCE_DIR, filename);
+    if (!fs.existsSync(absPath)) {
+      console.warn(`  [warn] ${filename} not found, skipping`);
+      continue;
+    }
+    const src = fs.readFileSync(absPath, "utf-8");
+    const lines = src.split("\n");
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const name = declName(line);
+      if (!name) continue;
+      const jsdoc = extractJSDoc(lines, i - 1);
+      if (!jsdoc) continue;
+      const kind = declKind(line);
+      const desc = cleanJSDoc(jsdoc.raw);
+
+      // extract @param and @returns from the cleaned JSDoc
+      const params = [];
+      const returns = [];
+      const descLines = desc.split("\n");
+      const bodyLines = [];
+      for (const dl of descLines) {
+        const pm = dl.match(/^\s*@param\s+\{([^}]+)\}\s+(\S+)\s*(.*)/);
+        const rm = dl.match(/^\s*@returns\s+\{([^}]+)\}\s*(.*)/);
+        const tm = dl.match(/^\s*@type\s+\{([^}]+)\}\s*(.*)/);
+        if (pm) params.push({ type: pm[1], name: pm[2], desc: pm[3] });
+        else if (rm) returns.push({ type: rm[1], desc: rm[2] });
+        else if (tm) bodyLines.push(`Type: \`${tm[1]}\` ${tm[2]}`);
+        else bodyLines.push(dl);
+      }
+
+      const body = bodyLines.join("\n").trim();
+      blocks.push({ filename, name, kind, line: i + 1, body, params, returns });
+    }
+  }
+
+  // ── Write output ─────────────────────────────────────────────────────
+
+  fs.mkdirSync(path.dirname(OUTPUT_FILE), { recursive: true });
+  const out = fs.createWriteStream(OUTPUT_FILE);
+  out.write("# API Reference\n\n");
+  out.write(`Generated from JSDoc annotations in ${SOURCE_GLOB.length} source files.\n\n`);
+
+  // Group by file
+  let currentFile = "";
+  for (const b of blocks) {
+    if (b.filename !== currentFile) {
+      currentFile = b.filename;
+      out.write(`\n---\n## ${b.filename}\n\n`);
+    }
+
+    const anchor = `${b.kind}-${b.name}`;
+    out.write(`### <a name="${anchor}"></a>\`${b.kind}\` ${b.name}  \n`);
+    out.write(`*Line ${b.line}*\n\n`);
+
+    if (b.body) out.write(b.body + "\n\n");
+
+    if (b.params.length > 0) {
+      out.write("**Parameters:**\n\n");
+      out.write("| Name | Type | Description |\n");
+      out.write("|------|------|------------|\n");
+      for (const p of b.params) {
+        out.write(`| \`${p.name}\` | \`${p.type}\` | ${p.desc} |\n`);
+      }
+      out.write("\n");
+    }
+
+    if (b.returns.length > 0) {
+      out.write("**Returns:** ");
+      for (const r of b.returns) {
+        out.write(`\`${r.type}\` — ${r.desc}`);
+      }
+      out.write("\n\n");
+    }
+  }
+
+  out.end();
+  console.log(`Wrote ${OUTPUT_FILE} (${blocks.length} documented declarations)`);
+}
+
+generate();
diff --git a/sections.js b/sections.js
new file mode 100644
index 0000000..4ee5bae
--- /dev/null
+++ b/sections.js
@@ -0,0 +1,667 @@
+// ── Logic Sections — labelled polygonal areas on the algorithm canvas ────
+//
+// Users draw labelled polygons (grid-snapped, 0/45/90° edges) to group
+// related blocks. Sections sit in #connections behind blocks/links.
+//
+// Dependencies: dom.js ($id, svgNamespace), draw.js (drawpath), helpers.js
+// Load order: after draw.js, before app.js (add toolbar button handler)
+
+/**
+ * Internal state for the sections subsystem.
+ * @type {{
+ *   list: Array<{id:string, points:Array<{x:number,y:number}>, title:string}>,
+ *   nextId: number,
+ *   creating: boolean,
+ *   curPoints: Array<{x:number,y:number}>,
+ *   editingId: string|null,
+ *   editOverlay: HTMLElement|null,
+ *   previewPoly: SVGPolygonElement|null,
+ *   previewLine: SVGLineElement|null,
+ *   ghostCircles: SVGCircleElement[]
+ * }}
+ */
+const _sec = {
+  list: [],
+  nextId: 1,
+  creating: false,
+  curPoints: [],
+  editingId: null,
+  editOverlay: null,
+  previewPoly: null,
+  previewLine: null,
+  ghostCircles: [],
+};
+
+// ── Helpers ────────────────────────────────────────────────────────────
+
+/** @returns {number} The CSS `--grid-size` value, defaulting to 25. */
+function _gridSize() {
+  const el = document.querySelector("[data-block]");
+  if (!el) return 25;
+  return parseInt(window.getComputedStyle(el).getPropertyValue("--grid-size")) || 25;
+}
+
+/**
+ * Snaps a coordinate value to the nearest grid multiple.
+ * @param {number} v
+ * @returns {number}
+ */
+function _snap(v) { const g = _gridSize(); return Math.round(v / g) * g; }
+
+/**
+ * Constrains a new point to 0°, 45°, or 90° relative to the previous point.
+ * @param {{x:number,y:number}} prev
+ * @param {{x:number,y:number}} raw
+ * @returns {{x:number,y:number}}
+ */
+function _snapAngle(prev, raw) {
+  const dx = raw.x - prev.x, dy = raw.y - prev.y;
+  const adx = Math.abs(dx), ady = Math.abs(dy);
+  let sx = dx >= 0 ? 1 : -1, sy = dy >= 0 ? 1 : -1;
+  if (adx === 0 && ady === 0) return { x: prev.x, y: prev.y };
+  if (adx > ady * 2)   return { x: raw.x, y: prev.y };
+  if (ady > adx * 2)   return { x: prev.x, y: raw.y };
+  const m = Math.max(adx, ady);
+  return { x: prev.x + sx * m, y: prev.y + sy * m };
+}
+
+/**
+ * Converts a mouse event to grid-snapped coordinates relative to #draw-area.
+ * @param {MouseEvent} ev
+ * @returns {{x:number, y:number}}
+ */
+function _xy(ev) {
+  const area = $id("draw-area");
+  if (!area) return { x: 0, y: 0 };
+  const r = area.getBoundingClientRect();
+  return { x: _snap(ev.clientX - r.left + area.scrollLeft), y: _snap(ev.clientY - r.top + area.scrollTop) };
+}
+
+/**
+ * Converts absolute page coordinates to SVG-relative coordinates.
+ * @param {number} x
+ * @param {number} y
+ * @returns {{x:number, y:number}}
+ */
+function _svgPt(x, y) {
+  const svg = $id("connections");
+  if (!svg) return { x: 0, y: 0 };
+  const r = svg.getBoundingClientRect();
+  return { x: x - r.left, y: y - r.top };
+}
+
+/**
+ * Computes the signed area of a polygon via the shoelace formula.
+ * Used to reject tiny/collinear sections.
+ * @param {Array<{x:number,y:number}>} pts
+ * @returns {number}
+ */
+function _shoelace(pts) {
+  if (pts.length < 3) return 0;
+  let s = 0;
+  for (let i = 0; i < pts.length; i++) {
+    const j = (i + 1) % pts.length;
+    s += pts[i].x * pts[j].y - pts[j].x * pts[i].y;
+  }
+  return Math.abs(s) / 2;
+}
+
+/**
+ * Ray-casting point-in-polygon test.
+ * @param {number} px
+ * @param {number} py
+ * @param {Array<{x:number,y:number}>} pts Polygon vertices in order
+ * @returns {boolean}
+ */
+function _ptInPoly(px, py, pts) {
+  let inside = false;
+  for (let i = 0, j = pts.length - 1; i < pts.length; j = i++) {
+    const xi = pts[i].x, yi = pts[i].y, xj = pts[j].x, yj = pts[j].y;
+    if ((yi > py) !== (yj > py) && px < (xj - xi) * (py - yi) / (yj - yi) + xi)
+      inside = !inside;
+  }
+  return inside;
+}
+
+/**
+ * Checks whether two line segments AB and CD intersect (including endpoints).
+ * @param {{x:number,y:number}} a
+ * @param {{x:number,y:number}} b
+ * @param {{x:number,y:number}} c
+ * @param {{x:number,y:number}} d
+ * @returns {boolean}
+ */
+function _segmentsIntersect(a, b, c, d) {
+  const det = (b.y - a.y) * (d.x - c.x) - (b.x - a.x) * (d.y - c.y);
+  if (Math.abs(det) < 1) return false;
+  const t = ((c.y - a.y) * (d.x - c.x) - (c.x - a.x) * (d.y - c.y)) / det;
+  const u = ((b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x)) / det;
+  return t >= 0 && t <= 1 && u >= 0 && u <= 1;
+}
+
+/**
+ * Checks whether a rectangle overlaps a polygon (any edge crossing or
+ * one fully containing the other).
+ * @param {number} rx Rectangle left
+ * @param {number} ry Rectangle top
+ * @param {number} rw Rectangle width
+ * @param {number} rh Rectangle height
+ * @param {Array<{x:number,y:number}>} pts Polygon vertices
+ * @returns {boolean}
+ */
+function _rectPolyOverlap(rx, ry, rw, rh, pts) {
+  const corners = [
+    { x: rx, y: ry }, { x: rx + rw, y: ry },
+    { x: rx + rw, y: ry + rh }, { x: rx, y: ry + rh }
+  ];
+  for (let i = 0; i < pts.length; i++) {
+    const j = (i + 1) % pts.length;
+    for (const c of corners) {
+      if (_segmentsIntersect(pts[i], pts[j], { x: rx, y: ry }, c)) return true;
+    }
+  }
+  for (let i = 0; i < corners.length; i++) {
+    const j = (i + 1) % corners.length;
+    for (let k = 0; k < pts.length; k++) {
+      const l = (k + 1) % pts.length;
+      if (_segmentsIntersect(corners[i], corners[j], pts[k], pts[l])) return true;
+    }
+  }
+  for (const c of corners) { if (_ptInPoly(c.x, c.y, pts)) return true; }
+  for (const p of pts) { if (p.x >= rx && p.x <= rx + rw && p.y >= ry && p.y <= ry + rh) return true; }
+  return false;
+}
+
+/**
+ * Converts a points array to an SVG `points` attribute string ("x,y x2,y2 …").
+ * @param {Array<{x:number,y:number}>} pts
+ * @returns {string}
+ */
+function _pointsAttr(pts) {
+  return pts.map(p => `${p.x},${p.y}`).join(" ");
+}
+
+/**
+ * Returns the top-left-most point in a polygon (used for label positioning).
+ * @param {Array<{x:number,y:number}>} pts
+ * @returns {{x:number,y:number}}
+ */
+function _topLeftOf(pts) {
+  if (!pts.length) return { x: 0, y: 0 };
+  let tl = pts[0];
+  for (const p of pts) { if (p.x < tl.x || (p.x === tl.x && p.y < tl.y)) tl = p; }
+  return tl;
+}
+
+// ── SVG rendering ──────────────────────────────────────────────────────
+
+/** @returns {SVGGElement|null} The `<g class="sections-group">`, creating it if needed. */
+function _ensureSectionGroup() {
+  const svg = $id("connections");
+  if (!svg) return null;
+  let g = svg.querySelector(".sections-group");
+  if (!g) {
+    g = document.createElementNS(svgNamespace, "g");
+    g.classList.add("sections-group");
+    svg.insertBefore(g, svg.firstChild);
+  }
+  return g;
+}
+
+/**
+ * Renders one section as SVG polygon + text label.
+ * @param {{id:string, points:Array<{x:number,y:number}>, title:string}} s
+ */
+function renderSection(s) {
+  const g = _ensureSectionGroup();
+  if (!g) return;
+  let poly = g.querySelector(`polygon[data-section-id="${s.id}"]`);
+  if (!poly) {
+    poly = document.createElementNS(svgNamespace, "polygon");
+    poly.dataset.sectionId = s.id;
+    poly.classList.add("section-bg");
+    g.appendChild(poly);
+  }
+  poly.setAttribute("points", _pointsAttr(s.points));
+
+  let label = g.querySelector(`text[data-section-id="${s.id}"]`);
+  if (!label) {
+    label = document.createElementNS(svgNamespace, "text");
+    label.dataset.sectionId = s.id;
+    label.classList.add("section-label");
+    label.addEventListener("click", ev => { ev.stopPropagation(); _editTitle(s.id); });
+    g.appendChild(label);
+  }
+  const tl = _topLeftOf(s.points);
+  label.setAttribute("x", tl.x + 6);
+  label.setAttribute("y", tl.y + 14);
+  label.textContent = s.title;
+}
+
+/** Removes all SVG elements for a given section ID. @param {string} id */
+function _removeSectionEls(id) {
+  const g = _ensureSectionGroup();
+  if (!g) return;
+  for (const el of g.querySelectorAll(`[data-section-id="${id}"]`)) el.remove();
+}
+
+/** Re-renders every section from scratch. */
+function renderAllSections() {
+  const g = _ensureSectionGroup();
+  if (g) g.innerHTML = "";
+  for (const s of _sec.list) renderSection(s);
+}
+
+// ── Create / edit mode overlay ─────────────────────────────────────────
+
+/** Shows the dimming overlay that blocks interaction with blocks/links during section editing. */
+function _showOverlay() {
+  if (_sec.editOverlay) return;
+  const area = $id("draw-area");
+  if (!area) return;
+  const ov = document.createElement("div");
+  ov.className = "section-edit-overlay";
+  area.appendChild(ov);
+  _sec.editOverlay = ov;
+  area.classList.add("section-editing");
+}
+
+/** Hides the dimming overlay. */
+function _hideOverlay() {
+  if (_sec.editOverlay) {
+    _sec.editOverlay.remove();
+    _sec.editOverlay = null;
+  }
+  const area = $id("draw-area");
+  if (area) area.classList.remove("section-editing");
+}
+
+// ── Point placement preview helpers ────────────────────────────────────
+
+/** Removes all preview visuals (polygon, line, ghost circles). */
+function _clearPreview() {
+  const svg = $id("connections");
+  if (!svg) return;
+  if (_sec.previewPoly) { _sec.previewPoly.remove(); _sec.previewPoly = null; }
+  if (_sec.previewLine) { _sec.previewLine.remove(); _sec.previewLine = null; }
+  for (const c of _sec.ghostCircles) c.remove();
+  _sec.ghostCircles = [];
+}
+
+/**
+ * Updates the visual preview during polygon point placement.
+ * @param {Array<{x:number,y:number}>} pts Points placed so far
+ * @param {{x:number,y:number}|null} mouse Current snapped mouse position
+ */
+function _updatePreview(pts, mouse) {
+  _clearPreview();
+  const svg = $id("connections");
+  if (!svg) return;
+  const g = _ensureSectionGroup();
+
+  if (pts.length >= 3) {
+    const poly = document.createElementNS(svgNamespace, "polygon");
+    poly.classList.add("section-preview-bg");
+    poly.setAttribute("points", _pointsAttr([...pts, pts[0]]));
+    g.appendChild(poly);
+    _sec.previewPoly = poly;
+  }
+
+  if (pts.length > 0 && mouse) {
+    const line = document.createElementNS(svgNamespace, "line");
+    line.classList.add("section-preview-line");
+    line.setAttribute("x1", pts[pts.length - 1].x);
+    line.setAttribute("y1", pts[pts.length - 1].y);
+    line.setAttribute("x2", mouse.x);
+    line.setAttribute("y2", mouse.y);
+    g.appendChild(line);
+    _sec.previewLine = line;
+  }
+
+  for (const p of pts) {
+    const circ = document.createElementNS(svgNamespace, "circle");
+    circ.classList.add("section-ghost");
+    circ.setAttribute("cx", p.x);
+    circ.setAttribute("cy", p.y);
+    circ.setAttribute("r", 4);
+    g.appendChild(circ);
+    _sec.ghostCircles.push(circ);
+  }
+}
+
+// ── Create mode ────────────────────────────────────────────────────────
+
+/** @param {MouseEvent} ev Handles a click during polygon creation (adds point or closes polygon). */
+function _onCreateClick(ev) {
+  if (!_sec.creating) return;
+  const pos = _xy(ev);
+  const pts = _sec.curPoints;
+
+  if (pts.length > 0) {
+    const snapped = _snapAngle(pts[pts.length - 1], pos);
+    if (pts.length >= 3) {
+      const first = pts[0];
+      if (Math.abs(snapped.x - first.x) < _gridSize() && Math.abs(snapped.y - first.y) < _gridSize()) {
+        _finishSection(pts);
+        return;
+      }
+    }
+    pts.push(snapped);
+  } else {
+    pts.push(pos);
+  }
+  _updatePreview(pts, null);
+}
+
+/** @param {MouseEvent} ev Updates the preview line during mouse movement in create mode. */
+function _onCreateMove(ev) {
+  if (!_sec.creating || _sec.curPoints.length === 0) return;
+  const pos = _xy(ev);
+  const snapped = _snapAngle(_sec.curPoints[_sec.curPoints.length - 1], pos);
+  _updatePreview(_sec.curPoints, snapped);
+}
+
+/** @param {MouseEvent} ev Finishes polygon creation on double-click. */
+function _onCreateDblClick(ev) {
+  if (!_sec.creating) return;
+  if (_sec.curPoints.length >= 3) _finishSection(_sec.curPoints);
+}
+
+/**
+ * Finalises a section from the placed points, adds it to the list, renders it,
+ * and exits create mode.
+ * @param {Array<{x:number,y:number}>} pts
+ */
+function _finishSection(pts) {
+  if (pts.length < 3) return;
+  if (_shoelace(pts) < 100) { _cancelCreate(); return; }
+  const id = "section-" + (_sec.nextId++);
+  _sec.list.push({ id, points: pts.map(p => ({ x: p.x, y: p.y })), title: "Section" });
+  renderSection(_sec.list[_sec.list.length - 1]);
+  _exitCreateMode();
+  setTimeout(() => _editTitle(id), 100);
+}
+
+/** Cancels section creation without saving. */
+function _cancelCreate() {
+  _exitCreateMode();
+}
+
+/** Cleans up all create-mode event listeners and preview elements. */
+function _exitCreateMode() {
+  _sec.creating = false;
+  _sec.curPoints = [];
+  _clearPreview();
+  _hideOverlay();
+  const area = $id("draw-area");
+  if (area) {
+    area.removeEventListener("click", _onCreateClick);
+    area.removeEventListener("mousemove", _onCreateMove);
+    area.removeEventListener("dblclick", _onCreateDblClick);
+  }
+  document.removeEventListener("keydown", _onCreateKey);
+}
+
+/** @param {KeyboardEvent} ev Handles Escape (cancel) / Enter (finish) during creation. */
+function _onCreateKey(ev) {
+  if (!_sec.creating) return;
+  if (ev.key === "Escape") _cancelCreate();
+  if (ev.key === "Enter" && _sec.curPoints.length >= 3) _finishSection(_sec.curPoints);
+}
+
+/** Enters polygon creation mode: sets up event listeners and the dimming overlay. */
+function enterCreateMode() {
+  if (_sec.creating) return;
+  _sec.creating = true;
+  _sec.curPoints = [];
+  _showOverlay();
+  const area = $id("draw-area");
+  if (!area) return;
+  area.addEventListener("click", _onCreateClick);
+  area.addEventListener("mousemove", _onCreateMove);
+  area.addEventListener("dblclick", _onCreateDblClick);
+  document.addEventListener("keydown", _onCreateKey);
+}
+
+// ── Title editing ──────────────────────────────────────────────────────
+
+/**
+ * Shows an inline text input (via SVG foreignObject) to edit a section's title.
+ * @param {string} id Section ID
+ */
+function _editTitle(id) {
+  const s = _sec.list.find(x => x.id === id);
+  if (!s) return;
+  _showOverlay();
+
+  const svg = $id("connections");
+  if (!svg) return;
+  const existing = svg.querySelector(`foreignObject[data-section-id="${id}"]`);
+  if (existing) return;
+
+  const tl = _topLeftOf(s.points);
+  const fo = document.createElementNS(svgNamespace, "foreignObject");
+  fo.dataset.sectionId = id;
+  fo.setAttribute("x", tl.x + 4);
+  fo.setAttribute("y", tl.y + 2);
+  fo.setAttribute("width", "200");
+  fo.setAttribute("height", "28");
+
+  const input = document.createElement("input");
+  input.className = "section-title-input";
+  input.type = "text";
+  input.value = s.title;
+  input.style.width = "192px";
+  input.addEventListener("blur", () => _commitTitle(id, input.value, fo));
+  input.addEventListener("keydown", ev => {
+    if (ev.key === "Enter") input.blur();
+    if (ev.key === "Escape") { _cancelEdit(id); }
+  });
+  fo.appendChild(input);
+  svg.appendChild(fo);
+  setTimeout(() => input.focus(), 0);
+}
+
+/**
+ * Commits an edited section title and removes the editing foreignObject.
+ * @param {string} id
+ * @param {string} title
+ * @param {SVGForeignObjectElement} fo
+ */
+function _commitTitle(id, title, fo) {
+  const s = _sec.list.find(x => x.id === id);
+  if (s) {
+    s.title = title || "Section";
+    renderSection(s);
+  }
+  if (fo) fo.remove();
+  _hideOverlayIfIdle();
+}
+
+/**
+ * Cancels section title editing without saving.
+ * @param {string} id
+ */
+function _cancelEdit(id) {
+  const svg = $id("connections");
+  if (svg) {
+    const fo = svg.querySelector(`foreignObject[data-section-id="${id}"]`);
+    if (fo) fo.remove();
+  }
+  _hideOverlayIfIdle();
+}
+
+/** Hides the overlay if neither creation nor editing is active. */
+function _hideOverlayIfIdle() {
+  if (!_sec.creating && !_sec.editingId) _hideOverlay();
+}
+
+// ── Block border collision ─────────────────────────────────────────────
+
+/**
+ * Checks whether a block's bounding rectangle overlaps any section polygon.
+ * Called during drag to prevent blocks from sitting on section borders.
+ * @param {HTMLElement} block A WCBlock element
+ * @returns {boolean}
+ */
+function blockOnSectionBorder(block) {
+  const rx = block.offsetLeft, ry = block.offsetTop;
+  const rw = block.offsetWidth, rh = block.offsetHeight;
+  if (!rw || !rh) return false;
+  for (const s of _sec.list) {
+    if (_rectPolyOverlap(rx, ry, rw, rh, s.points)) return true;
+  }
+  return false;
+}
+
+// ── Persistence ────────────────────────────────────────────────────────
+
+/** @returns {Array<{id:string, title:string, points:Array<{x:number,y:number}>}>} */
+function saveSections() {
+  return _sec.list.map(s => ({
+    id: s.id, title: s.title, points: s.points.map(p => ({ x: p.x, y: p.y }))
+  }));
+}
+
+/**
+ * Deserialises and restores sections from saved data.
+ * @param {Array<{id?:string, title?:string, points?:Array<{x:number,y:number}>}>} data
+ */
+function restoreSections(data) {
+  if (!Array.isArray(data)) return;
+  _sec.list = [];
+  for (const s of data) {
+    _sec.list.push({ id: s.id || ("section-" + _sec.nextId), title: s.title || "Section", points: s.points || [] });
+    _sec.nextId = Math.max(_sec.nextId, (parseInt(s.id.split("-")[1]) || 0) + 1);
+  }
+  renderAllSections();
+}
+
+// ── Selection / deletion (user clicks on section) ──────────────────────
+
+/**
+ * Handles a click on a section polygon: selects it, shows draggable vertex handles.
+ * @param {MouseEvent} ev
+ */
+function _onSectionClick(ev) {
+  const poly = ev.target.closest(".section-bg");
+  if (!poly) return;
+  const id = poly.dataset.sectionId;
+  if (!id) return;
+  ev.stopPropagation();
+
+  for (const el of document.querySelectorAll(".section-bg.selected-section")) el.classList.remove("selected-section");
+  poly.classList.add("selected-section");
+
+  _sec.editingId = id;
+  const s = _sec.list.find(x => x.id === id);
+  if (!s) return;
+
+  _showOverlay();
+
+  const svg = $id("connections");
+  if (!svg) return;
+
+  for (let i = 0; i < s.points.length; i++) {
+    const p = s.points[i];
+    const circ = document.createElementNS(svgNamespace, "circle");
+    circ.classList.add("section-handle");
+    circ.dataset.sectionId = id;
+    circ.dataset.idx = i;
+    circ.setAttribute("cx", p.x);
+    circ.setAttribute("cy", p.y);
+    circ.setAttribute("r", 5);
+    const g = _ensureSectionGroup();
+    g.appendChild(circ);
+
+    let dragged = false, startX, startY, origPts;
+    const down = de => {
+      de.stopPropagation();
+      dragged = false;
+      startX = de.clientX;
+      startY = de.clientY;
+      origPts = s.points.map(pt => ({ x: pt.x, y: pt.y }));
+      document.addEventListener("mousemove", move);
+      document.addEventListener("mouseup", up);
+    };
+    const move = me => {
+      dragged = true;
+      const curId = circ.dataset.sectionId;
+      const sec = _sec.list.find(x => x.id === curId);
+      if (!sec) return;
+      const idx = parseInt(circ.dataset.idx);
+      if (idx < 0 || idx >= sec.points.length) return;
+      const prevPt = sec.points[(idx - 1 + sec.points.length) % sec.points.length];
+      const newPos = { x: _snap(origPts[idx].x + me.clientX - startX), y: _snap(origPts[idx].y + me.clientY - startY) };
+      sec.points[idx] = _snapAngle(prevPt, newPos);
+      renderSection(sec);
+      circ.setAttribute("cx", sec.points[idx].x);
+      circ.setAttribute("cy", sec.points[idx].y);
+    };
+    const up = () => {
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
+    };
+    circ.addEventListener("mousedown", down);
+  }
+}
+
+/**
+ * Deselects a section when clicking outside all section elements.
+ * @param {MouseEvent} ev
+ */
+function _deselectSection(ev) {
+  if (ev.target.closest(".section-bg") || ev.target.closest(".section-label") || ev.target.closest(".section-handle") || ev.target.closest(".section-title-input")) return;
+  if (_sec.editingId) {
+    _sec.editingId = null;
+    _hideOverlayIfIdle();
+    for (const el of document.querySelectorAll(".section-bg.selected-section")) el.classList.remove("selected-section");
+    for (const el of document.querySelectorAll(".section-handle")) el.remove();
+  }
+}
+
+/** Deletes the currently selected/editing section. */
+function deleteSelectedSection() {
+  if (!_sec.editingId) return;
+  const idx = _sec.list.findIndex(x => x.id === _sec.editingId);
+  if (idx < 0) return;
+  _sec.list.splice(idx, 1);
+  _removeSectionEls(_sec.editingId);
+  _sec.editingId = null;
+  _hideOverlayIfIdle();
+  for (const el of document.querySelectorAll(".section-handle")) el.remove();
+}
+
+// ── Initialisation ─────────────────────────────────────────────────────
+
+/** Wires up section-related event listeners (SVG click, document click, delete key). */
+function initSections() {
+  const svg = $id("connections");
+  if (svg) {
+    svg.addEventListener("click", _onSectionClick);
+    document.addEventListener("click", _deselectSection);
+    document.addEventListener("keydown", ev => {
+      if (ev.key === "Delete" || ev.key === "Del" || ev.key === "Backspace") {
+        if (_sec.editingId && !ev.target.closest("input") && !ev.target.closest("textarea")) {
+          ev.preventDefault();
+          deleteSelectedSection();
+        }
+      }
+    });
+  }
+}
+
+// Expose global API
+window.LOGIC_SECTIONS = _sec;
+window.enterSectionCreateMode = enterCreateMode;
+window.saveSections = saveSections;
+window.restoreSections = restoreSections;
+window.renderAllSections = renderAllSections;
+window.blockOnSectionBorder = blockOnSectionBorder;
+window.initSections = initSections;
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initSections);
+} else {
+  initSections();
+}
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..6d12dab
--- /dev/null
+++ b/server.js
@@ -0,0 +1,42 @@
+const http = require("http");
+const fs = require("fs");
+const path = require("path");
+
+const PORT = 3000;
+const ROOT = __dirname;
+
+const MIME = {
+  ".html": "text/html",
+  ".js":   "application/javascript",
+  ".json": "application/json",
+  ".css":  "text/css",
+  ".svg":  "image/svg+xml",
+  ".png":  "image/png",
+  ".ico":  "image/x-icon",
+};
+
+const server = http.createServer((req, res) => {
+  let filePath = path.join(ROOT, req.url === "/" ? "index.html" : req.url);
+  filePath = path.normalize(filePath);
+
+  if (!filePath.startsWith(ROOT)) {
+    res.writeHead(403);
+    return res.end("Forbidden");
+  }
+
+  const ext = path.extname(filePath);
+  const contentType = MIME[ext] || "application/octet-stream";
+
+  fs.readFile(filePath, (err, data) => {
+    if (err) {
+      res.writeHead(404);
+      return res.end("Not found");
+    }
+    res.writeHead(200, { "Content-Type": contentType });
+    res.end(data);
+  });
+});
+
+server.listen(PORT, () => {
+  console.log(`Server running at http://localhost:${PORT}/`);
+});
diff --git a/shell.nix b/shell.nix
new file mode 100644
index 0000000..18dca1a
--- /dev/null
+++ b/shell.nix
@@ -0,0 +1,54 @@
+{ pkgs ? import <nixpkgs> {} }:
+
+let
+  codegraph = pkgs.stdenv.mkDerivation {
+    pname = "codegraph";
+    version = "1.0.1";
+
+    src = pkgs.fetchurl {
+      url = "https://github.com/colbymchenry/codegraph/releases/download/v1.0.1/codegraph-linux-x64.tar.gz";
+      sha256 = "d45a068f44596a85c7ba7d0ef924eaf7103fbbf3cafbeb668127daff60a52228";
+    };
+
+    sourceRoot = "codegraph-linux-x64";
+
+    nativeBuildInputs = [ pkgs.autoPatchelfHook ];
+
+    buildInputs = with pkgs; [
+      stdenv.cc.cc
+      zlib
+      openssl
+    ];
+
+    installPhase = ''
+      mkdir -p $out/bin
+      cp -r . $out/
+      chmod +x $out/node $out/bin/codegraph
+    '';
+
+    meta = {
+      description = "Code understanding and indexing tool for AI coding agents";
+      homepage = "https://github.com/colbymchenry/codegraph";
+      license = pkgs.lib.licenses.mit;
+      platforms = [ "x86_64-linux" ];
+    };
+  };
+in
+
+pkgs.mkShell {
+  packages = with pkgs; [
+    opencode
+    python3
+    codegraph
+    sdl3
+    nodejs
+  ];
+
+  shellHook = ''
+    echo "━━━ development shell ━━━"
+    echo "  opencode  $(opencode --version 2>&1 || true)"
+    echo "  codegraph $(codegraph --version 2>&1 || true)"
+    echo "  python    $(python --version 2>&1 || true)"
+    echo "  nodejs      $(node --version 2>&1 || true)"
+  '';
+}
diff --git a/style.css b/style.css
index c891db6..d046176 100644
--- a/style.css
+++ b/style.css
@@ -89,11 +89,22 @@ h1 {
 
 /* ── WCProcedure ── */
 wc-procedure { gap: 0.35rem; min-width: 200px; }
-wc-procedure .proc-header { display: flex; align-items: center; gap: 0.3rem; width: 100%; }
-wc-procedure .proc-label { font-weight: bold; font-size: 0.7rem; color: var(--muted); letter-spacing: 0.05em; }
-wc-procedure .proc-name {
-  flex: 1; background: var(--bg); border: 1px solid var(--border);
-  font: inherit; font-size: 0.8rem; padding: 0.15rem 0.3rem; text-align: center;
+wc-procedure .proc-header {
+  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; width: 100%;
+}
+wc-procedure .proc-natural-name {
+  font-weight: bold; font-size: 0.85rem;
+  border: none; background: transparent;
+  width: 100%; padding: 0.1rem; cursor: pointer;
+}
+wc-procedure .proc-natural-name:focus {
+  border: 1px solid var(--border); background: var(--bg); cursor: text;
+  outline: none;
+}
+wc-procedure .proc-tech-name {
+  font-size: 0.65rem; color: var(--muted);
+  font-family: 'Courier New', monospace;
+  padding: 0 0.3rem; line-height: 1.2;
 }
 wc-procedure .proc-params {
   display: flex; gap: 0.5rem; width: 100%;
@@ -129,15 +140,170 @@ wc-procedure .proc-add-input, wc-procedure .proc-add-output {
 wc-procedure .proc-add-input:hover, wc-procedure .proc-add-output:hover {
   background: #e8e8e8; color: var(--text);
 }
+.proc-arrow {
+  font-size: 1.6rem;
+  font-weight: bold;
+  color: var(--muted);
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  align-self: center;
+  padding: 0 0.15rem;
+  flex-shrink: 0;
+}
+/* Return style selector */
+wc-procedure .proc-return-row {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  width: 100%;
+}
+wc-procedure .proc-return-label {
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+wc-procedure .proc-return-style {
+  font-size: 0.7rem;
+  padding: 0.1rem 0.3rem;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  color: var(--text);
+  cursor: pointer;
+  flex: 1;
+}
+wc-procedure .proc-return-style:focus {
+  outline: none;
+  border-color: var(--accent, #1976d2);
+}
+wc-procedure[data-readonly] .proc-return-style {
+  display: none;
+}
+/* Collapsible description */
+wc-procedure .proc-description {
+  width: 100%;
+  font-size: 0.72rem;
+  color: var(--muted);
+  margin-top: 0.15rem;
+}
+wc-procedure .proc-desc-summary {
+  cursor: pointer;
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 0.1rem 0;
+  user-select: none;
+}
+wc-procedure .proc-desc-summary:hover {
+  color: var(--text);
+}
+wc-procedure .proc-desc-body {
+  padding: 0.3rem 0.5rem;
+  line-height: 1.5;
+  color: var(--text);
+  font-size: 0.72rem;
+  background: var(--surface);
+  border-radius: 3px;
+  margin-top: 0.15rem;
+}
+/* List-view: two-column procedure row with arrow */
+.procedures-area > wc-procedure {
+  gap: 0.3rem;
+  flex-wrap: wrap;
+}
+.procedures-area > wc-procedure .proc-header {
+  width: auto;
+  flex-shrink: 0;
+}
+.procedures-area > wc-procedure .proc-params {
+  width: auto;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 0;
+}
+.procedures-area > wc-procedure .proc-params-col {
+  flex: none;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.15rem;
+}
+.procedures-area > wc-procedure .proc-params-col:first-of-type {
+  margin-right: 0.5rem;
+}
+.procedures-area > wc-procedure .proc-params-heading {
+  white-space: nowrap;
+  margin-right: 0.15rem;
+}
+.procedures-area > wc-procedure .proc-param-row input {
+  width: 4em;
+}
+.procedures-area > wc-procedure .proc-add-input,
+.procedures-area > wc-procedure .proc-add-output {
+  white-space: nowrap;
+  font-size: 0.65rem;
+  padding: 0.1rem 0.3rem;
+}
+
+/* Read-only (external library) procedure styles */
+wc-procedure[data-readonly] .proc-param-row input {
+  background: transparent;
+  border: none;
+  cursor: default;
+  color: var(--text);
+  font-weight: 600;
+}
+wc-procedure[data-readonly] .proc-param-row input:focus {
+  outline: none;
+}
+wc-procedure[data-readonly] .proc-add-input,
+wc-procedure[data-readonly] .proc-add-output,
+wc-procedure[data-readonly] .proc-param-del {
+  display: none;
+}
+wc-procedure[data-readonly] .proc-natural-name:focus {
+  outline: none;
+}
+wc-procedure[data-readonly] .proc-tech-name {
+  color: var(--text);
+  font-weight: 600;
+}
 
 /* ── WCProcCall ── */
-wc-proccall { gap: 0.25rem; min-width: 160px; padding-top: 1.2rem; padding-bottom: 1.2rem; }
-wc-proccall .proccall-header { display: flex; align-items: center; gap: 0.3rem; width: 100%; }
-wc-proccall .proccall-label { font-weight: bold; font-size: 0.65rem; color: var(--muted); letter-spacing: 0.05em; }
-wc-proccall .proccall-select {
-  flex: 1; background: var(--bg); border: 1px solid var(--border);
-  font: inherit; font-size: 0.7rem; padding: 0.1rem 0.2rem;
+wc-proccall { position: relative; gap: 0.25rem; min-width: 160px; padding-top: 1.2rem; padding-bottom: 1.2rem; }
+wc-proccall .proccall-header { display: flex; align-items: center; gap: 0.25rem; width: 100%; }
+wc-proccall .proccall-icon {
+  width: 16px; height: 16px; flex-shrink: 0; object-fit: contain;
+  border-radius: 2px;
 }
+wc-proccall .proccall-label {
+  font-weight: 600; font-size: 0.55rem; color: var(--muted); letter-spacing: 0.06em;
+  flex-shrink: 0; opacity: 0.7; text-transform: uppercase;
+}
+wc-proccall .proccall-nat-name {
+  flex: 1; font-size: 0.85rem; font-weight: 700; cursor: pointer;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
+  color: var(--text); line-height: 1.3;
+}
+wc-proccall .proccall-nat-name:hover { color: var(--accent); }
+wc-proccall .proccall-tech-name {
+  font-size: 0.6rem; color: var(--muted); white-space: nowrap;
+  overflow: hidden; text-overflow: ellipsis; max-width: 100px; flex-shrink: 0;
+  font-family: monospace; opacity: 0.75;
+}
+wc-proccall .proccall-change-btn {
+  font-size: 0.55rem; padding: 0.08rem 0.25rem; cursor: pointer;
+  background: transparent; border: 1px solid var(--border); border-radius: 3px;
+  color: var(--muted); flex-shrink: 0; line-height: 1.3; opacity: 0.6;
+}
+wc-proccall .proccall-change-btn:hover { background: #e8e8e8; color: var(--text); opacity: 1; }
 wc-proccall .proccall-name-row {
   display: flex; align-items: center; gap: 0.25rem; width: 100%;
 }
@@ -168,6 +334,54 @@ wc-proccall .proccall-arg-row .hook {
   transform: none !important;
   flex-shrink: 0;
 }
+/* Error hook on proccall — styled like a logic out hook but with red accent */
+wc-proccall .proccall-error-hook {
+  background: #E69F00;
+  border: 2px solid #B8860B;
+  color: #1a1a1a;
+  font-size: 0.75rem;
+  font-weight: 900;
+  line-height: 1;
+  display: none;
+}
+wc-proccall button.proccall-error-hook[data-direction="out"] {
+  position: absolute;
+  right: -11px;
+  top: 50%;
+  left: auto;
+  bottom: auto;
+  z-index: 5;
+  width: 18px;
+  height: 18px;
+  transform: translateY(-50%);
+}
+wc-proccall button.proccall-error-hook:hover {
+  transform: translateY(-50%) scale(1.3);
+  box-shadow: 0 0 6px rgba(230,159,0,0.6);
+}
+wc-proccall button.proccall-error-hook.visible {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+wc-proccall .proccall-fmtargs {
+  display: flex; flex-direction: column; gap: 0.15rem; width: 100%;
+  border-top: 1px dashed var(--border); padding-top: 0.2rem; margin-top: 0.1rem;
+}
+wc-proccall .proccall-fmtargs-list {
+  display: flex; flex-direction: column; gap: 0.15rem;
+}
+wc-proccall .proccall-add-fmtarg {
+  font-size: 0.6rem; padding: 0.1rem 0.3rem; cursor: pointer;
+  background: transparent; border: 1px dashed var(--border); border-radius: 3px;
+  color: var(--muted); align-self: flex-start;
+}
+wc-proccall .proccall-add-fmtarg:hover { background: #e8e8e8; color: var(--text); }
+wc-proccall .proccall-fmtargs .proccall-arg-row .hook {
+  position: static !important;
+  transform: none !important;
+  flex-shrink: 0;
+}
 
 /* ── WCAssign ── */
 wc-assign { gap: 0.25rem; padding-top: 1.2rem; padding-bottom: 1.2rem; }
@@ -211,7 +425,7 @@ wc-assign #hook-next[data-direction="out"] {
   right: -7px; top: 50%; transform: translateY(-50%); bottom: auto; left: auto;
 }
 
-#draw-area, #data-area, #variable-area, .procedures-area {
+#draw-area {
   flex: 1; position: relative; min-height: 0;
   overflow: auto;
   background-size: var(--grid-size) var(--grid-size);
@@ -221,6 +435,34 @@ wc-assign #hook-next[data-direction="out"] {
   background-color: var(--bg);
 }
 
+/* Column headers for list-style containers */
+.list-header {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.3rem 0.5rem;
+  font-size: 0.6rem;
+  font-weight: 700;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  background: var(--surface);
+  border-bottom: 2px solid var(--border);
+  flex-shrink: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  min-height: 1.8em;
+}
+
+/* List-style containers for non-algorithm tabs */
+#data-area, #variable-area, .procedures-area {
+  flex: 1; min-height: 0;
+  overflow: auto;
+  background: var(--bg);
+  display: flex;
+  flex-direction: column;
+}
+
 .global-toolbar {
   display: flex; gap: 0.25rem; padding: 0.3rem;
   align-items: flex-start; flex-shrink: 0;
@@ -231,11 +473,22 @@ wc-assign #hook-next[data-direction="out"] {
   background: var(--accent); color: #fff; border: none; border-radius: 3px;
 }
 .global-toolbar button:hover { background: #357abd; }
-.global-toolbar textarea {
-  flex: 1; height: 80px; resize: vertical; padding: 0.3rem;
-  background: var(--bg); color: var(--text); border: 1px solid var(--border);
-  font-family: 'Courier New', monospace; font-size: 0.8rem;
+.global-toolbar .code-output {
+  flex: 1; min-height: 80px; max-height: 50vh; overflow: auto; resize: vertical;
+  background: var(--bg); border: 1px solid var(--border);
+  font-family: 'Courier New', monospace; font-size: 0.8rem; line-height: 1.5;
+  padding: 0.3rem; position: relative;
 }
+.global-toolbar .code-output pre {
+  margin: 0; white-space: pre; tab-size: 4;
+}
+.global-toolbar .code-output code {
+  display: block;
+}
+.global-toolbar .code-output code.hljs {
+  background: transparent; padding: 0;
+}
+
 
 [data-block] {
   border: 1px solid var(--border); padding: 0.5rem; margin: 0;
@@ -244,6 +497,57 @@ wc-assign #hook-next[data-direction="out"] {
   background: var(--bg); color: var(--text); min-width: 60px; min-height: 30px;
   overflow: visible; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); z-index: 1;
 }
+
+/* Algorithm-tab blocks — wider minimum to avoid hook/button overlap */
+#main-program > [data-block] {
+  min-width: 100px;
+}
+
+/* List-view blocks (non-algorithm tabs) — horizontal rows, no positioning */
+#variable-area > [data-block],
+#data-area > [data-block],
+.procedures-area > [data-block] {
+  position: static;
+  width: 100%;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.35rem 0.5rem;
+  min-width: auto;
+  min-height: auto;
+  box-shadow: none;
+  border-radius: 0;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  border-bottom: 1px solid var(--border);
+  margin: 0;
+  z-index: auto;
+}
+
+/* Flatten internal row wrappers in list-view blocks */
+#variable-area > [data-block] .datum-row,
+#data-area > [data-block] .datum-row {
+  display: contents;
+}
+
+/* Hide resize handle in list view */
+#variable-area > [data-block] .resize-handle,
+#data-area > [data-block] .resize-handle,
+.procedures-area > [data-block] .resize-handle {
+  display: none;
+}
+
+/* Inline delete button for list-view blocks */
+#variable-area > [data-block] .delete-btn,
+#data-area > [data-block] .delete-btn,
+.procedures-area > [data-block] .delete-btn {
+  position: static;
+  opacity: 0.4;
+  margin-left: auto;
+  flex-shrink: 0;
+}
 [data-block]:hover .resize-handle { opacity: 0.5; }
 .resize-handle {
   position: absolute; right: 0; bottom: 0; width: 14px; height: 14px;
@@ -253,67 +557,143 @@ wc-assign #hook-next[data-direction="out"] {
 }
 wc-start { background: #e8f5e9; border-color: #66bb6a; }
 wc-end { background: #fbe9e7; border-color: #ef5350; }
-wc-output { background: #e3f2fd; border-color: #42a5f5; }
-wc-decision { background: #fff3e0; border-color: #ffa726; }
-wc-boolean { background: #f3e5f5; border-color: #ab47bc; }
-wc-scalar { background: #e8eaf6; border-color: #5c6bc0; }
-wc-string { background: #fff8e1; border-color: #f9a825; }
-wc-varref { background: #f5f5f5; border-color: #9e9e9e; }
-wc-expression { background: #e8f5e9; border-color: #43a047; }
-wc-quantity { background: #fce4ec; border-color: #ec407a; }
-wc-unit { background: #e0f7fa; border-color: #26c6da; }
-wc-procedure { background: #ede7f6; border-color: #7e57c2; }
-wc-proccall { background: #fff8e1; border-color: #f9a825; }
-wc-assign { background: #fce4ec; border-color: #e91e63; }
-
-wc-output textarea {
+wc-end[data-exit-error="true"] {
+  background: #fff5f5;
+  border-color: #ef5350;
+}
+wc-end[data-exit-error="true"] .end-header::after {
+  content: " (error)";
+  font-weight: normal;
+  font-size: 0.65rem;
+  color: #e57373;
+}
+wc-end .end-header { font-weight: bold; font-size: 0.75rem; letter-spacing: 0.05em; }
+wc-end .end-exit-row {
+  display: flex; align-items: center; gap: 0.3rem; width: 100%;
+}
+wc-end .end-exit-label {
+  font-size: 0.65rem; font-weight: 600; color: var(--muted);
+  text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap;
+}
+wc-end .end-exit-autocomplete {
+  position: relative; flex: 1; min-width: 0;
+}
+wc-end .end-errno-input {
+  width: 100%; font-size: 0.7rem; padding: 0.1rem 0.25rem;
   background: var(--bg); border: 1px solid var(--border);
-  font: inherit; font-size: 0.75rem; padding: 0.2rem; width: 10em; resize: vertical;
+  border-radius: 3px; color: var(--text);
+  font-family: 'Courier New', monospace; outline: none;
+}
+wc-end .end-errno-input:focus {
+  border-color: var(--accent);
+}
+wc-end .end-errno-suggestions {
+  display: none; position: absolute; top: 100%; left: 0; right: 0;
+  z-index: 100; background: var(--bg); border: 1px solid var(--border);
+  border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
+  max-height: 180px; overflow-y: auto;
+}
+wc-end .end-errno-suggestion {
+  padding: 0.2rem 0.4rem; cursor: pointer;
+  border-bottom: 1px solid var(--border);
+}
+wc-end .end-errno-suggestion:last-child { border-bottom: none; }
+wc-end .end-errno-suggestion:hover,
+wc-end .end-errno-suggestion.highlighted { background: #e8f0fe; }
+wc-end .end-suggestion-code {
+  display: block; font-size: 0.7rem;
+  font-family: 'Courier New', monospace;
+}
+wc-end .end-suggestion-desc {
+  display: block; font-size: 0.6rem; color: var(--muted); font-style: italic;
+}
+wc-end .end-desc-row {
+  display: flex; align-items: center; width: 100%;
+  padding: 0 0.3rem; min-height: 1.3em;
+}
+wc-end .end-desc-text {
+  font-size: 0.65rem; color: var(--muted); font-style: italic;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 
+wc-decision { background: #fff3e0; border-color: #ffa726; }
 wc-decision p { margin: 0.2rem 0; font-weight: 600; }
 wc-decision .decision-row { display: flex; align-items: center; gap: 0.3rem; }
 wc-decision .decision-label { font-size: 0.8rem; font-weight: bold; color: var(--text); }
+/* ── Unified warning system ──────────────────────────────────────────── */
+/* The ⚠ icon (block-warn) is created for every algorithm block.
+   It stays hidden until any warning class is active on the block. */
+
+.block-warn { display: none; font-size: 1rem; cursor: help; position: absolute; top: 2px; right: 4px; z-index: 3; }
+
+/* Warning: block has no incoming logic connection */
+#main-program > [data-block].disconnected { border-color: #e65100; border-width: 2px; background: #fff3e0; }
+#main-program > [data-block].disconnected > .block-warn { display: inline; color: #e65100; }
+
+/* Warning: error output hook on wc-proccall is not connected */
+wc-proccall.warn-error-unlinked {
+  box-shadow: 0 0 0 2px #ef5350, 0 1px 3px rgba(0,0,0,0.08);
+}
+wc-proccall.warn-error-unlinked > .block-warn { display: inline; color: #ef5350; }
+wc-proccall.warn-error-unlinked .proccall-header::after {
+  content: " (unused)"; font-size: 0.65rem; color: #ef5350; font-weight: normal;
+}
+
+/* Warning: error-path END block returns 0 (success) */
+wc-end.warn-zero-in-error {
+  border-color: #ffa000;
+  border-width: 2px;
+  background: #fff8e1;
+}
+wc-end.warn-zero-in-error > .block-warn { display: inline; color: #ffa000; }
+wc-end.warn-zero-in-error .end-header::after {
+  content: " (success in error path)";
+  font-size: 0.6rem; color: #ffa000; font-weight: normal;
+}
 wc-decision .decision-row .hook {
   position: static !important;
   transform: none !important;
   flex-shrink: 0;
 }
 
-wc-boolean, wc-scalar, wc-string { gap: 0.25rem; }
-wc-boolean .datum-row, wc-scalar .datum-row, wc-string .datum-row { display: flex; align-items: center; gap: 0.25rem; width: 100%; }
-wc-boolean input, wc-scalar input, wc-string input {
+wc-boolean, wc-scalar, wc-vector, wc-string { gap: 0.25rem; }
+wc-boolean .datum-row, wc-scalar .datum-row, wc-vector .datum-row, wc-string .datum-row { display: flex; align-items: center; gap: 0.25rem; width: 100%; }
+wc-boolean input, wc-scalar input, wc-vector input, wc-string input {
   background: var(--bg); border: 1px solid var(--border); font: inherit;
   padding: 0.15rem 0.3rem; width: 4em; text-align: center;
 }
-wc-boolean .var-name, wc-scalar .var-name, wc-string .var-name, wc-array .var-name {
+wc-boolean .var-name, wc-scalar .var-name, wc-vector .var-name, wc-string .var-name, wc-array .var-name {
   border: none; background: transparent; cursor: pointer;
   font-weight: bold; font-size: 0.85rem;
   width: auto; min-width: 2em; padding: 0.1rem;
 }
-wc-boolean .var-name:focus, wc-scalar .var-name:focus, wc-string .var-name:focus, wc-array .var-name:focus {
+wc-boolean .var-name:focus, wc-scalar .var-name:focus, wc-vector .var-name:focus, wc-string .var-name:focus, wc-array .var-name:focus {
   border: 1px solid var(--border); background: var(--bg); cursor: text;
   outline: none; width: 5em;
 }
-wc-boolean .var-comment, wc-scalar .var-comment, wc-string .var-comment, wc-array .var-comment {
+wc-boolean .var-comment, wc-scalar .var-comment, wc-vector .var-comment, wc-string .var-comment, wc-array .var-comment {
   border: none; background: transparent;
   font-style: italic; font-size: 0.7rem; color: var(--muted);
   width: 100%; padding: 0.1rem 0.3rem; cursor: pointer;
   text-align: left;
 }
-wc-boolean .var-comment:focus, wc-scalar .var-comment:focus, wc-string .var-comment:focus, wc-array .var-comment:focus {
+wc-boolean .var-comment:focus, wc-scalar .var-comment:focus, wc-vector .var-comment:focus, wc-string .var-comment:focus, wc-array .var-comment:focus {
   border: 1px solid var(--border); background: var(--bg);
   font-style: italic; color: var(--text); cursor: text;
   outline: none;
 }
-wc-boolean .var-cname, wc-scalar .var-cname, wc-string .var-cname, wc-array .var-cname {
+wc-boolean .var-cname, wc-scalar .var-cname, wc-vector .var-cname, wc-string .var-cname, wc-array .var-cname {
   font-size: 0.65rem; color: var(--muted); font-family: 'Courier New', monospace;
   width: 100%; padding: 0 0.3rem; line-height: 1.2;
 }
-wc-boolean .var-value, wc-scalar .var-value { width: 5em; }
+wc-boolean .var-value, wc-scalar .var-value, wc-vector .var-value { width: 8em; }
 wc-string .var-value { width: 8em; }
 wc-array { gap: 0.25rem; background: #e0f2f1; border-color: #26a69a; }
 wc-array .array-row { display: flex; align-items: center; gap: 0.25rem; width: 100%; }
+/* In list view, array elements span full width below the row */
+#variable-area > wc-array .array-elements {
+  width: 100%; order: 999; flex-shrink: 0;
+}
 
 wc-array .array-type { width: 7em; }
 wc-array .array-bracket { font-size: 0.85rem; font-weight: bold; }
@@ -341,11 +721,14 @@ wc-array .array-element-del {
   display: flex; align-items: center; justify-content: center;
 }
 wc-array .array-element-del:hover { background: #d32f2f; color: #fff; border-color: #d32f2f; }
-wc-scalar .var-si { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
-wc-scalar .var-type, wc-scalar .var-unit {
+wc-array .array-vec-row { font-size: 0.7rem; color: var(--muted); white-space: nowrap; margin-left: auto; }
+wc-array .array-vec-dim { width: 2.5em; text-align: center; font: inherit; font-size: 0.75rem; background: var(--bg); border: 1px solid var(--border); padding: 0.1rem 0.2rem; }
+wc-scalar .var-si, wc-vector .var-si { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
+wc-scalar .var-type, wc-scalar .var-unit, wc-vector .var-type, wc-vector .var-unit {
   background: var(--bg); border: 1px solid var(--border);
   font: inherit; font-size: 0.75rem; padding: 0.1rem 0.2rem;
 }
+wc-vector .var-dim { width: 2.5em; text-align: center; }
 
 wc-expression { gap: 0.25rem; }
 wc-expression .expr-row { display: flex; align-items: center; gap: 0.25rem; width: 100%; }
@@ -407,6 +790,13 @@ wc-quantity .quantity-footer select {
   width: 100%; background: var(--bg); border: 1px solid var(--border);
   font: inherit; padding: 0.1rem 0.2rem;
 }
+/* List-view: flatten quantity internals into a row */
+#data-area > wc-quantity .quantity-header,
+#data-area > wc-quantity .dims,
+#data-area > wc-quantity .range,
+#data-area > wc-quantity .quantity-footer {
+  display: contents;
+}
 
 wc-unit { gap: 0.25rem; }
 wc-unit .unit-header { display: flex; align-items: center; gap: 0.3rem; width: 100%; }
@@ -423,6 +813,14 @@ wc-unit .unit-body select, wc-unit .unit-body input {
 }
 wc-unit .unit-si { width: 7em; }
 wc-unit .unit-resolved { font-size: 0.75rem; color: var(--muted); align-self: flex-end; }
+/* List-view: flatten unit internals */
+#data-area > wc-unit .unit-header,
+#data-area > wc-unit .unit-body {
+  display: contents;
+}
+#data-area > wc-unit .unit-body label {
+  display: inline-flex;
+}
 
 .error-overlay {
   display: none; position: fixed; z-index: 99999;
@@ -453,6 +851,10 @@ wc-unit .unit-resolved { font-size: 0.75rem; color: var(--muted); align-self: fl
 svg#connections {
   z-index: 0; background: transparent; position: absolute;
   top: 0; left: 0; width: 100%; height: 100%;
+  overflow: visible; pointer-events: none;
+}
+svg#connections path.flow, svg#connections path.flow-data {
+  pointer-events: stroke;
 }
 path.flow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: stroke 0.1s, stroke-width 0.1s; }
 path.flow:hover { stroke: #d32f2f; stroke-width: 3; cursor: pointer; }
@@ -461,27 +863,92 @@ path.flow-data { fill: none; stroke: #43a047; stroke-width: 2; stroke-linejoin:
 path.flow-data:hover { stroke: #d32f2f; stroke-width: 3; cursor: pointer; }
 path.flow-shadow-data { fill: none; stroke: #43a047; stroke-width: 1.5; stroke-dasharray: 5 3; pointer-events: none; opacity: 0.6; }
 
+/* ── Logic sections ── */
+.section-bg { fill: #e8e8e8; fill-opacity: 0.5; stroke: #ccc; stroke-width: 1; stroke-dasharray: 4 2; cursor: pointer; }
+.section-bg:hover { stroke: #999; stroke-width: 1.5; }
+.section-bg.selected-section { stroke: #666; stroke-width: 2; stroke-dasharray: none; fill-opacity: 0.6; }
+.section-label { font-size: 11px; font-family: sans-serif; fill: #888; cursor: pointer; user-select: none; pointer-events: auto; }
+.section-label:hover { fill: #555; }
+.section-handle { fill: #666; stroke: #fff; stroke-width: 1.5; cursor: move; }
+.section-preview-bg { fill: #e0e0e0; fill-opacity: 0.4; stroke: #aaa; stroke-width: 1; stroke-dasharray: 4 3; }
+.section-preview-line { stroke: #888; stroke-width: 1.5; stroke-dasharray: 4 3; }
+.section-ghost { fill: #888; }
+.section-title-input { font-size: 11px; border: 1px solid #aaa; border-radius: 2px; padding: 1px 4px; background: #fff; }
+
+/* Edit-mode overlay greys out blocks/links */
+.section-edit-overlay { position: absolute; inset: 0; z-index: 4; background: transparent; pointer-events: none; }
+#draw-area.section-editing [data-block] { opacity: 0.3; pointer-events: none; }
+#draw-area.section-editing path.flow, #draw-area.section-editing path.flow-data, #draw-area.section-editing path.flow-shadow, #draw-area.section-editing path.flow-shadow-data { opacity: 0.2; pointer-events: none; }
+#draw-area.section-editing .section-bg { pointer-events: auto; fill-opacity: 0.7; }
+#draw-area.section-editing .section-label { pointer-events: auto; }
+#draw-area.section-editing .section-handle { pointer-events: auto; }
+#draw-area.section-editing .section-preview-bg { pointer-events: none; }
+#draw-area.section-editing .section-preview-line { pointer-events: none; }
+#draw-area.section-editing .section-ghost { pointer-events: none; }
+
+.toolbar-sep { display: inline-block; width: 1px; height: 18px; background: var(--border); margin: 0 4px; vertical-align: middle; }
+
 button.hook {
   display: block; width: 14px; height: 14px; border-radius: 50%;
   cursor: pointer; padding: 0; z-index: 2;
   transition: transform 0.1s, box-shadow 0.1s;
 }
 
+/* Hook row for bottom-placed output hooks (side by side) */
+.hook-row {
+  display: flex; gap: 8px; justify-content: center;
+  position: absolute; bottom: -7px; left: 0; right: 0;
+  pointer-events: none;
+}
+.hook-row > .hook { position: static; pointer-events: auto; }
+
 button.hook[data-direction="out"] {
   background: var(--accent); border: 2px solid var(--accent);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
   position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
 }
+.hook-row > button.hook[data-direction="out"] {
+  position: static; transform: none;
+}
 button.hook[data-direction="out"]:hover {
   transform: translateX(-50%) scale(1.3);
-  box-shadow: 0 0 6px rgba(74,144,217,0.5);
+  box-shadow: 0 0 8px rgba(74,144,217,0.5), 0 1px 3px rgba(0,0,0,0.2);
+}
+.hook-row > button.hook[data-direction="out"]:hover {
+  transform: scale(1.3);
 }
 
 button.hook[data-direction="in"] {
-  background: var(--bg); border: 2px dashed var(--muted);
-  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
+  background: transparent;
+  border: 2px dashed var(--muted);
+  position: absolute;
+}
+button.hook[data-direction="in"][data-exit="up"] {
+  top: -7px; left: 50%; transform: translateX(-50%);
+}
+button.hook[data-direction="in"][data-exit="left"] {
+  top: 50%; left: -7px; transform: translateY(-50%);
+}
+button.hook[data-direction="in"][data-exit="right"] {
+  top: 50%; right: -7px; transform: translateY(-50%);
+}
+
+/* Empty input hooks hidden by default; shown during linking */
+button.hook[data-direction="in"]:not([data-connected]) {
+  display: none;
+}
+#draw-area.linking button.hook[data-direction="in"],
+#draw-area.linking button.hook[data-direction="in"]:not([data-connected]) {
+  display: block;
 }
 button.hook[data-direction="in"]:hover {
-  border-color: var(--accent); border-style: solid; background: #e8f0fe;
+  border-color: var(--accent); border-style: solid;
+}
+button.hook[data-direction="in"][data-connected] {
+  display: block;
+  background: #e8f0fe;
+  border-color: var(--accent);
+  border-style: solid;
 }
 
 button.hook:not([data-direction]) {
@@ -490,39 +957,59 @@ button.hook:not([data-direction]) {
 
 button.hook[data-link-type="data"][data-direction="out"] {
   background: #43a047; border-color: #43a047;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
 }
 button.hook[data-link-type="data"][data-direction="out"]:hover {
   transform: translateX(-50%) scale(1.3);
-  box-shadow: 0 0 6px rgba(67,160,71,0.5);
+  box-shadow: 0 0 8px rgba(67,160,71,0.5), 0 1px 3px rgba(0,0,0,0.2);
 }
 button.hook[data-link-type="data"][data-direction="in"] {
-  border-color: #43a047; background: #e8f5e9;
+  background: transparent;
+  border: 2px dashed #43a047;
 }
 button.hook[data-link-type="data"][data-direction="in"]:hover {
-  background: #c8e6c9; border-style: solid;
+  border-style: solid;
+}
+button.hook[data-link-type="data"][data-direction="in"][data-connected] {
+  background: #e8f5e9;
+  border-color: #43a047;
+  border-style: solid;
 }
 
-wc-output #hook-fore[data-direction="in"] {
-  left: -7px; top: 50%; transform: translateY(-50%);
+/* Error hook on wc-proccall — red to match WCEnd border */
+button.hook.proccall-error-hook,
+button.hook.proccall-error-hook[data-direction="out"] {
+  background: #ef5350; border-color: #ef5350;
 }
-wc-output #hook-next[data-direction="out"] {
-  right: -7px; top: 50%; transform: translateY(-50%); bottom: auto; left: auto;
+button.hook.proccall-error-hook[data-direction="out"]:hover {
+  transform: scale(1.3);
+  box-shadow: 0 0 8px rgba(239,83,80,0.5), 0 1px 3px rgba(0,0,0,0.2);
+}
+
+/* Error flow paths — red */
+path.flow.flow-error { stroke: #ef5350; }
+
+/* Blocks only reachable via error paths */
+[data-block].error-path {
+  border-color: #ef5350;
+  background: #fff5f5;
 }
 
 wc-decision #hook-fore[data-direction="in"] {
   left: -7px; top: 50%; transform: translateY(-50%); bottom: auto;
 }
-wc-decision #hook-out1[data-direction="out"] {
-  right: -7px; top: -7px; bottom: auto; left: auto; transform: none;
-}
-wc-decision #hook-out0[data-direction="out"] {
-  right: -7px; bottom: -7px; top: auto; left: auto; transform: none;
-}
 
 .selected {
   box-shadow: 0 0 0 2px var(--accent), 0 1px 3px rgba(0,0,0,0.08);
 }
 
+/* Compact field display (replaces input/select inside blocks) */
+#main-program > [data-block] .field-display {
+  font-size: 0.75rem; color: var(--text); white-space: nowrap;
+  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
+  display: inline-block; line-height: 1.4;
+}
+
 .delete-btn {
   position: absolute; top: -8px; right: -8px;
   width: 18px; height: 18px; border-radius: 50%;
@@ -538,6 +1025,22 @@ wc-decision #hook-out0[data-direction="out"] {
   opacity: 0.6;
 }
 
+/* Edit (pencil) button — sits left of the delete button */
+.edit-btn {
+  position: absolute; top: -8px; right: 14px;
+  width: 18px; height: 18px; border-radius: 50%;
+  border: 1px solid #ccc; background: #fff; color: #999;
+  cursor: pointer; padding: 0;
+  display: flex; align-items: center; justify-content: center;
+  z-index: 20; opacity: 0; transition: opacity 0.12s;
+}
+.edit-btn:hover {
+  opacity: 1 !important; background: var(--accent); color: #fff; border-color: var(--accent);
+}
+[data-block]:hover .edit-btn, .selected .edit-btn {
+  opacity: 0.6;
+}
+
 textarea { white-space: pre-wrap; }
 select {
   background: var(--bg); color: var(--text); border: 1px solid var(--border);
@@ -546,3 +1049,290 @@ select {
 select option { background: var(--bg); color: var(--text); }
 input { color-scheme: light; }
 * { scrollbar-color: var(--border) var(--bg); scrollbar-width: thin; }
+
+/* ── Procedure Browser Modal ── */
+.proc-browser-overlay {
+  display: none; position: fixed; z-index: 99998;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.45);
+  align-items: center; justify-content: center;
+}
+.proc-browser-overlay.active { display: flex; }
+
+.proc-browser-box {
+  background: #fff; color: #333;
+  border-radius: 8px; max-width: 500px; width: 90%;
+  max-height: 70vh; display: flex; flex-direction: column;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
+}
+
+.proc-browser-header {
+  padding: 0.75rem 1rem; font-weight: 600; font-size: 0.9rem;
+  border-bottom: 1px solid var(--border);
+  display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
+}
+
+.proc-browser-search {
+  flex: 1; padding: 0.3rem 0.5rem; border: 1px solid var(--border);
+  border-radius: 4px; font: inherit; font-size: 0.8rem;
+  outline: none; min-width: 0; color-scheme: light;
+}
+.proc-browser-search:focus { border-color: var(--accent); }
+
+.proc-browser-tree {
+  flex: 1; overflow-y: auto; padding: 0.25rem 0;
+  min-height: 120px;
+}
+
+.proc-browser-empty {
+  padding: 2rem; text-align: center; color: var(--muted);
+  font-size: 0.85rem; display: none; line-height: 1.6;
+}
+.proc-browser-empty a {
+  color: var(--accent); text-decoration: underline; cursor: pointer;
+}
+
+/* Tree group (collapsible section for each library) */
+.proc-browser-tree-group-header {
+  display: flex; align-items: center; gap: 0.3rem;
+  padding: 0.25rem 0.75rem; cursor: pointer;
+  user-select: none; font-size: 0.8rem;
+  border-top: 1px solid #eee; border-bottom: 1px solid #eee;
+  margin-top: -1px;
+}
+.proc-browser-tree-group-header:hover { background: #f5f5f5; }
+.proc-browser-tree-group-header.user-defined {
+  font-weight: 700; border-top: 2px solid var(--accent); background: #f8faff;
+}
+
+.proc-browser-tree-arrow {
+  font-size: 0.55rem; color: var(--muted);
+  width: 0.8em; flex-shrink: 0;
+}
+
+.proc-browser-tree-group-name { font-weight: 600; }
+
+.proc-browser-tree-group-count {
+  font-size: 0.65rem; color: var(--muted); margin-left: auto;
+}
+
+.proc-browser-tree-group-items { padding: 0; }
+
+/* Tree leaf (individual procedure) */
+.proc-browser-tree-leaf {
+  display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.25rem 0.75rem 0.25rem 1.75rem;
+  cursor: pointer; font-size: 0.8rem;
+  border-left: 3px solid transparent;
+}
+.proc-browser-tree-leaf:hover { background: #f0f4ff; }
+.proc-browser-tree-leaf.selected {
+  background: #e3f0ff; border-left-color: var(--accent); font-weight: 600;
+}
+.proc-browser-tree-leaf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.proc-browser-tree-leaf-qname {
+  font-size: 0.65rem; color: var(--muted);
+  font-family: 'Courier New', monospace; flex-shrink: 0;
+}
+
+.proc-browser-footer {
+  display: flex; gap: 0.5rem; justify-content: flex-end;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--border); flex-shrink: 0;
+}
+.proc-browser-footer button {
+  padding: 0.4rem 0.8rem; font: inherit; font-size: 0.8rem;
+  cursor: pointer; border-radius: 3px;
+}
+.proc-browser-cancel {
+  background: var(--bg); color: var(--text);
+  border: 1px solid var(--border);
+}
+.proc-browser-cancel:hover { background: #e8e8e8; }
+.proc-browser-select {
+  background: var(--accent); color: #fff; border: none;
+}
+.proc-browser-select:hover { background: #357abd; }
+
+/* ── In-app test panel ── */
+#apptest-panel {
+  position: fixed; top: 0; right: 0; width: 380px; max-height: 100vh;
+  background: #1e1e2e; color: #cdd6f4; font-family: monospace; font-size: 0.75rem;
+  z-index: 10000; display: flex; flex-direction: column;
+  border-left: 2px solid #45475a; box-shadow: -4px 0 12px rgba(0,0,0,0.4);
+}
+#apptest-panel .apptest-toolbar {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0.4rem 0.6rem; background: #181825; border-bottom: 1px solid #45475a;
+}
+#apptest-panel .apptest-title { font-weight: bold; font-size: 0.8rem; }
+#apptest-panel .apptest-close {
+  background: none; border: none; color: #cdd6f4; cursor: pointer;
+  font-size: 1rem; padding: 0 0.3rem;
+}
+#apptest-panel .apptest-close:hover { color: #f38ba8; }
+#apptest-panel .apptest-copy {
+  background: none; border: 1px solid #585b70; border-radius: 0.3rem;
+  color: #cdd6f4; cursor: pointer; font-size: 0.7rem; padding: 0.15rem 0.5rem;
+  margin-left: auto; margin-right: 0.5rem;
+}
+#apptest-panel .apptest-copy:hover { background: #313244; }
+#apptest-panel .apptest-body {
+  flex: 1; overflow-y: auto; padding: 0.3rem 0;
+}
+#apptest-panel .apptest-group {
+  font-weight: bold; padding: 0.4rem 0.6rem 0.15rem;
+  color: #89b4fa; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
+}
+#apptest-panel .apptest-row {
+  display: flex; align-items: baseline; gap: 0.3rem;
+  padding: 0.15rem 0.6rem 0.15rem 1.2rem; line-height: 1.5;
+}
+#apptest-panel .apptest-icon { flex-shrink: 0; font-weight: bold; }
+#apptest-panel .apptest-pass .apptest-icon { color: #a6e3a1; }
+#apptest-panel .apptest-fail .apptest-icon { color: #f38ba8; }
+#apptest-panel .apptest-name { }
+#apptest-panel .apptest-detail {
+  color: #f38ba8; font-size: 0.65rem; margin-left: auto;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+#apptest-panel .apptest-summary {
+  padding: 0.5rem 0.6rem; font-weight: bold; text-align: center;
+  border-bottom: 1px solid #45475a;
+}
+#apptest-panel .apptest-summary.apptest-pass { color: #a6e3a1; }
+#apptest-panel .apptest-summary.apptest-fail { color: #f38ba8; }
+
+/* New Project modal */
+.modal-overlay {
+  position: fixed; inset: 0; z-index: 100;
+  background: rgba(0,0,0,0.5);
+  display: flex; align-items: center; justify-content: center;
+}
+.modal {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 0.5rem; padding: 1.2rem 1.5rem;
+  min-width: 380px; max-width: 440px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+}
+.modal h2 { margin: 0 0 1rem; font-size: 1.1rem; }
+.modal-field { margin-bottom: 1rem; }
+.modal-field label {
+  display: block; font-size: 0.8rem; font-weight: 600;
+  margin-bottom: 0.3rem; color: var(--muted);
+}
+.modal-input {
+  width: 100%; padding: 0.4rem 0.5rem;
+  border: 1px solid var(--border); border-radius: 0.3rem;
+  font-size: 0.9rem; background: var(--bg); color: var(--text);
+}
+.template-list { display: flex; flex-direction: column; gap: 0.4rem; }
+.template-card {
+  display: flex; align-items: center; gap: 0.6rem;
+  padding: 0.5rem 0.7rem; border: 1px solid var(--border);
+  border-radius: 0.3rem; cursor: pointer; user-select: none;
+  transition: border-color 0.15s, background 0.15s;
+}
+.template-card:hover { border-color: var(--accent); }
+.template-card.selected {
+  border-color: var(--accent); background: #e8f0fe;
+}
+.template-card.selected .template-icon::after {
+  content: " \2713"; font-size: 0.85rem; color: var(--accent);
+}
+.template-icon { font-size: 1.3rem; flex-shrink: 0; }
+.template-name { font-weight: 600; font-size: 0.85rem; }
+.template-desc {
+  font-size: 0.7rem; color: var(--muted); margin-left: auto;
+  white-space: nowrap;
+}
+.modal-actions {
+  display: flex; justify-content: flex-end; gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+.modal-btn {
+  padding: 0.4rem 1rem; border: 1px solid var(--border);
+  border-radius: 0.3rem; cursor: pointer; font-size: 0.85rem;
+  background: var(--bg); color: var(--text);
+}
+.modal-btn:hover { background: var(--surface); }
+.modal-create { background: var(--accent); color: #fff; border-color: var(--accent); }
+.modal-create:hover { opacity: 0.9; }
+
+/* ── Block editor modal ── */
+.block-editor-overlay {
+  position: fixed; inset: 0; z-index: 110;
+  background: rgba(0,0,0,0.4);
+  display: none; align-items: center; justify-content: center;
+}
+.block-editor-overlay.active { display: flex; }
+.block-editor-modal {
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 0.5rem; min-width: 360px; max-width: 480px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+  display: flex; flex-direction: column; max-height: 80vh;
+}
+.block-editor-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border);
+}
+.block-editor-title { font-weight: 600; font-size: 0.9rem; }
+.block-editor-close {
+  background: none; border: none; font-size: 1.2rem; cursor: pointer;
+  color: var(--muted); padding: 0 0.2rem;
+}
+.block-editor-close:hover { color: var(--text); }
+.block-editor-body {
+  padding: 0.8rem; overflow-y: auto; overflow-x: hidden; flex: 1;
+}
+.block-editor-body > [data-block] {
+  position: static !important;
+  width: 100% !important;
+  height: auto !important;
+  border: 1px solid var(--border);
+  background: var(--bg);
+  display: flex; flex-direction: column; gap: 0.4rem;
+  border-radius: 0.3rem; padding: 0.5rem;
+}
+.block-editor-body input,
+.block-editor-body select,
+.block-editor-body textarea {
+  width: 100%; box-sizing: border-box;
+}
+.block-editor-footer {
+  display: flex; justify-content: flex-end; gap: 0.4rem;
+  padding: 0.6rem 0.8rem; border-top: 1px solid var(--border);
+}
+.block-editor-footer button {
+  padding: 0.35rem 0.8rem; border-radius: 0.3rem; cursor: pointer;
+  font-size: 0.8rem; border: 1px solid var(--border);
+  background: var(--bg); color: var(--text);
+}
+.block-editor-footer .block-editor-apply {
+  background: var(--accent); color: #fff; border-color: var(--accent);
+}
+.block-editor-footer .block-editor-apply:hover { opacity: 0.9; }
+.block-editor-footer .block-editor-cancel:hover { background: var(--surface); }
+
+/* Colour picker row inside block editor */
+.block-editor-color-row {
+  display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.4rem 0.5rem; margin-bottom: 0.5rem;
+  background: var(--bg); border: 1px solid var(--border);
+  border-radius: 0.3rem; flex-wrap: wrap; box-sizing: border-box;
+  max-width: 100%;
+}
+.block-editor-color-label {
+  font-size: 0.75rem; font-weight: 600; color: var(--muted);
+  white-space: nowrap;
+}
+.block-editor-color-picker {
+  width: 32px; height: 24px; padding: 0; border: 1px solid var(--border);
+  border-radius: 3px; cursor: pointer; flex-shrink: 0; max-width: 100%;
+}
+.block-editor-color-reset {
+  font-size: 0.7rem; padding: 0.2rem 0.5rem;
+  border: 1px solid var(--border); border-radius: 3px;
+  cursor: pointer; background: var(--bg); color: var(--text);
+}
+.block-editor-color-reset:hover { background: var(--surface); }
diff --git a/templates.js b/templates.js
new file mode 100644
index 0000000..4eecfd9
--- /dev/null
+++ b/templates.js
@@ -0,0 +1,455 @@
+// ── New Project modal & templates ──────────────────────────────────────────
+//
+// Each template is a function that receives the project name and builds the
+// initial workspace (blocks, variables, connections, libraries) in place.
+//
+// Load order: loaded after persist.js, before app.js
+// Depends on: dom.js ($id), helpers.js, draw.js, wcblock.js, blocks-*.js,
+//             wcprogram.js, persist.js, lib-loader.js
+
+/**
+ * Removes all user-created blocks, connections, library tabs and panes,
+ * resetting flow arrays and LOADED_LIBS. Used by templates (new project) and
+ * persist.js (load workspace, with keepStorage:true to preserve localStorage).
+ * @param {{ keepStorage?: boolean }} [opts]
+ */
+function _clearWorkspace(opts = {}) {
+  const { keepStorage } = opts;
+  const conn = $id("connections");
+  if (conn) {
+    for (const p of conn.querySelectorAll("path.flow, path.flow-data")) p.remove();
+  }
+  for (const block of document.querySelectorAll("[data-block]")) {
+    if (block.wcForeFlow) block.wcForeFlow = [];
+    if (block.wcNextFlow) block.wcNextFlow = [];
+  }
+  const prog = $id("main-program");
+  if (prog) {
+    for (const block of [...prog.children]) {
+      if (block.id !== "main-start" && block.id !== "main-end") block.remove();
+    }
+  }
+  const dataArea = $id("data-area");
+  if (dataArea) {
+    for (const block of [...dataArea.querySelectorAll("[data-block]")]) block.remove();
+  }
+  const varArea = $id("variable-area");
+  if (varArea) {
+    for (const block of [...varArea.querySelectorAll("[data-block]")]) block.remove();
+  }
+  const libTabBar = document.querySelector(".lib-tab-bar");
+  if (libTabBar) libTabBar.innerHTML = "";
+  for (const pane of document.querySelectorAll(".lib-pane")) pane.remove();
+  for (const tab of document.querySelectorAll(".lib-tab")) tab.remove();
+  LOADED_LIBS.clear();
+  if (!keepStorage) localStorage.removeItem(STORAGE_KEY);
+}
+
+function _pos(el, left, top) {
+  el.style.left = left + "px";
+  el.style.top = top + "px";
+}
+
+function _placeBelow(prev, block, gap = 16) {
+  block.style.top = (prev.offsetTop + prev.offsetHeight + gap) + "px";
+}
+
+function _createAssign(prog, targetId, value) {
+  const el = prog.newNode("wc-assign");
+  if (!el) return null;
+  el.style.left = "50px";
+  el._el.target.value = targetId;
+  el._el.value.value = String(value);
+  el._syncType();
+  el._updateValueVisibility();
+  return el;
+}
+
+function _createVarRef(prog, varId) {
+  const el = prog.newVarRefNode();
+  if (!el) return null;
+  el.style.left = "50px";
+  el._el.select.value = varId;
+  const target = varId ? $id(varId) : null;
+  const hook = el.querySelector(".hook-out");
+  if (hook) hook.dataset.type = target ? (target.dataType === "vector" ? "scalar" : target.dataType) : "scalar";
+  return el;
+}
+
+function _createProcCall(prog, qname, resultName) {
+  const el = prog.newProcCallNode();
+  if (!el) return null;
+  el.style.left = "50px";
+  if (el._el.nameInput) el._el.nameInput.value = resultName || "";
+  el.setProcedure(qname);
+  return el;
+}
+
+function _createScalarVar(prog, name) {
+  const el = prog.newScalarNode();
+  if (!el) return null;
+  el.style.left = "700px";
+  const nameEl = el.querySelector(".var-name");
+  if (nameEl) nameEl.value = name;
+  return el;
+}
+
+function _createBooleanVar(prog, name, value) {
+  const el = prog.newBooleanNode();
+  if (!el) return null;
+  el.style.left = "700px";
+  const nameEl = el.querySelector(".var-name");
+  if (nameEl) nameEl.value = name;
+  const valEl = el.querySelector(".var-value");
+  if (valEl) valEl.value = value || "false";
+  return el;
+}
+
+async function _loadLib(libId) {
+  const index = await loadLibraryIndex();
+  const entry = index.find(e => e.id === libId);
+  if (entry) await loadLibrary(libId);
+}
+
+const TEMPLATES = {};
+
+TEMPLATES.console = {
+  name: "Console Program",
+  icon: "\u25A0",
+  desc: "Basic C program with stdio",
+  async create(prog, projectName) {
+    _clearWorkspace();
+    await _loadLib("stdio");
+    refreshAll();
+
+    const start = $id("main-start");
+    const end = $id("main-end");
+    _pos(start, 50, 50);
+
+    const printfCall = _createProcCall(prog, "stdio/printf", "");
+    _placeBelow(start, printfCall);
+    if (printfCall) {
+      const arg = printfCall.querySelector(".proccall-inputs .proccall-arg-input");
+      if (arg) arg.value = '"Hello, World!\\n"';
+    }
+
+    _pos(end, 50, printfCall.offsetTop + printfCall.offsetHeight + 16);
+
+    if (start && end && printfCall) {
+      _linkFlow(start, ".hook", printfCall, ".hook-in");
+      _linkFlow(printfCall, ".hook-out", end, ".hook");
+    }
+  }
+};
+
+TEMPLATES["sdl3-triangle"] = {
+  name: "SDL3 Hello Triangle",
+  icon: "\u25B3",
+  desc: "SDL3 + OpenGL colored triangle",
+  async create(prog, projectName) {
+    _clearWorkspace();
+    await _loadLib("sdl3");
+    await _loadLib("gl");
+    refreshAll();
+
+    const start = $id("main-start");
+    const end = $id("main-end");
+    _pos(start, 50, 50);
+
+    /* Variables column (x=700) */
+    let varTop = start;
+    function varBelow(block) { _placeBelow(varTop, block); varTop = block; }
+
+    const varRunning = _createBooleanVar(prog, "running", "true");       varBelow(varRunning);
+    const varWindow = _createScalarVar(prog, "window");                  varBelow(varWindow);
+    const varRenderer = _createScalarVar(prog, "renderer");               varBelow(varRenderer);
+    const varVS = _createScalarVar(prog, "vs");                          varBelow(varVS);
+    const varFS = _createScalarVar(prog, "fs");                          varBelow(varFS);
+    const varProgram = _createScalarVar(prog, "program");                 varBelow(varProgram);
+    const varVAO = _createScalarVar(prog, "vao");                        varBelow(varVAO);
+
+    /* ── Initialisation chain (x=50) — each block placed below the previous ── */
+    let prev = start;
+    function algBelow(block) { _placeBelow(prev, block); prev = block; }
+
+    const initCall = _createProcCall(prog, "sdl3/SDL_Init", "ret");      algBelow(initCall);
+    if (initCall) {
+      const inputs = initCall.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "SDL_INIT_VIDEO";
+    }
+
+    const setMetaCall = _createProcCall(prog, "sdl3/SDL_SetAppMetadata", "");  algBelow(setMetaCall);
+    if (setMetaCall) {
+      const inputs = setMetaCall.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = '"' + projectName + '"';
+      if (inputs[1]) inputs[1].value = '"1.0"';
+      if (inputs[2]) inputs[2].value = '"com.example.triangle"';
+    }
+
+    const winCall = _createProcCall(prog, "sdl3/SDL_CreateWindow", "window");  algBelow(winCall);
+    if (winCall) {
+      const inputs = winCall.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = '"Hello Triangle"';
+      if (inputs[1]) inputs[1].value = "640";
+      if (inputs[2]) inputs[2].value = "480";
+      if (inputs[3]) inputs[3].value = "0";
+    }
+
+    const renCall = _createProcCall(prog, "sdl3/SDL_CreateRenderer", "renderer");  algBelow(renCall);
+    if (renCall) {
+      const inputs = renCall.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "window";
+      if (inputs[1]) inputs[1].value = "NULL";
+    }
+
+    const vsAssign = _createAssign(prog, varVS ? varVS.id : "", '"#version 330\\nlayout(location=0) in vec3 pos; void main(){gl_Position=vec4(pos,1);}"');  algBelow(vsAssign);
+    const fsAssign = _createAssign(prog, varFS ? varFS.id : "", '"#version 330\\nout vec4 c; void main(){c=vec4(1,0,0,1);}"');  algBelow(fsAssign);
+
+    const vsCreateCall = _createProcCall(prog, "gl/glCreateShader", "vs");  algBelow(vsCreateCall);
+    if (vsCreateCall) {
+      const inputs = vsCreateCall.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "GL_VERTEX_SHADER";
+    }
+
+    const vsSrcCall = _createProcCall(prog, "gl/glShaderSource", "");  algBelow(vsSrcCall);
+    if (vsSrcCall) {
+      const inputs = vsSrcCall.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "vs";
+      if (inputs[1]) inputs[1].value = "1";
+      if (inputs[2]) inputs[2].value = "vs";
+    }
+
+    const vsCompCall = _createProcCall(prog, "gl/glCompileShader", "");  algBelow(vsCompCall);
+    if (vsCompCall) {
+      const inputs = vsCompCall.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "vs";
+    }
+
+    const fsCreateCall = _createProcCall(prog, "gl/glCreateShader", "fs");  algBelow(fsCreateCall);
+    if (fsCreateCall) {
+      const inputs = fsCreateCall.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "GL_FRAGMENT_SHADER";
+    }
+
+    const fsSrcCall = _createProcCall(prog, "gl/glShaderSource", "");  algBelow(fsSrcCall);
+    if (fsSrcCall) {
+      const inputs = fsSrcCall.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "fs";
+      if (inputs[1]) inputs[1].value = "1";
+      if (inputs[2]) inputs[2].value = "fs";
+    }
+
+    const fsCompCall = _createProcCall(prog, "gl/glCompileShader", "");  algBelow(fsCompCall);
+    if (fsCompCall) {
+      const inputs = fsCompCall.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "fs";
+    }
+
+    const progCreate = _createProcCall(prog, "gl/glCreateProgram", "program");  algBelow(progCreate);
+    const progAttach1 = _createProcCall(prog, "gl/glAttachShader", "");  algBelow(progAttach1);
+    if (progAttach1) {
+      const inputs = progAttach1.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "program";
+      if (inputs[1]) inputs[1].value = "vs";
+    }
+    const progAttach2 = _createProcCall(prog, "gl/glAttachShader", "");  algBelow(progAttach2);
+    if (progAttach2) {
+      const inputs = progAttach2.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "program";
+      if (inputs[1]) inputs[1].value = "fs";
+    }
+    const progLink = _createProcCall(prog, "gl/glLinkProgram", "");  algBelow(progLink);
+    if (progLink) {
+      const inputs = progLink.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "program";
+    }
+
+    const vaoGen = _createProcCall(prog, "gl/glGenVertexArrays", "vao");  algBelow(vaoGen);
+    if (vaoGen) {
+      const inputs = vaoGen.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "1";
+    }
+    const vaoBind = _createProcCall(prog, "gl/glBindVertexArray", "");  algBelow(vaoBind);
+    if (vaoBind) {
+      const inputs = vaoBind.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "vao";
+    }
+
+    const bufGen = _createProcCall(prog, "gl/glGenBuffers", "");  algBelow(bufGen);
+    if (bufGen) {
+      const inputs = bufGen.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "1";
+    }
+    const bufBind = _createProcCall(prog, "gl/glBindBuffer", "");  algBelow(bufBind);
+    if (bufBind) {
+      const inputs = bufBind.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "GL_ARRAY_BUFFER";
+      if (inputs[1]) inputs[1].value = "vbo";
+    }
+
+    /* ── Main loop ── */
+    const loopDec = prog.newDecisionNode();  loopDec.style.left = "50px";  algBelow(loopDec);
+    const pollCall = _createProcCall(prog, "sdl3/SDL_PollEvent", "event");  algBelow(pollCall);
+    if (pollCall) {
+      const inputs = pollCall.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "event";
+    }
+
+    const checkEvent = prog.newDecisionNode();  checkEvent.style.left = "50px";  algBelow(checkEvent);
+    const stopRunning = _createAssign(prog, varRunning ? varRunning.id : "", "false");  algBelow(stopRunning);
+    const clearCall = _createProcCall(prog, "gl/glClear", "");  algBelow(clearCall);
+    if (clearCall) {
+      const inputs = clearCall.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "GL_COLOR_BUFFER_BIT";
+    }
+    const useProgCall = _createProcCall(prog, "gl/glUseProgram", "");  algBelow(useProgCall);
+    if (useProgCall) {
+      const inputs = useProgCall.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "program";
+    }
+    const drawCall = _createProcCall(prog, "gl/glDrawArrays", "");  algBelow(drawCall);
+    if (drawCall) {
+      const inputs = drawCall.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "GL_TRIANGLES";
+      if (inputs[1]) inputs[1].value = "0";
+      if (inputs[2]) inputs[2].value = "3";
+    }
+
+    const renClear = _createProcCall(prog, "sdl3/SDL_RenderClear", "");  algBelow(renClear);
+    if (renClear) {
+      const inputs = renClear.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "renderer";
+    }
+    const renPresent = _createProcCall(prog, "sdl3/SDL_RenderPresent", "");  algBelow(renPresent);
+    if (renPresent) {
+      const inputs = renPresent.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "renderer";
+    }
+
+    /* ── Cleanup (after loop body) ── */
+    const renDestroy = _createProcCall(prog, "sdl3/SDL_DestroyRenderer", "");  algBelow(renDestroy);
+    if (renDestroy) {
+      const inputs = renDestroy.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "renderer";
+    }
+    const winDestroy = _createProcCall(prog, "sdl3/SDL_DestroyWindow", "");  algBelow(winDestroy);
+    if (winDestroy) {
+      const inputs = winDestroy.querySelectorAll(".proccall-inputs .proccall-arg-input");
+      if (inputs[0]) inputs[0].value = "window";
+    }
+    const quitCall = _createProcCall(prog, "sdl3/SDL_Quit", "");  algBelow(quitCall);
+    _pos(end, 50, prev.offsetTop + prev.offsetHeight + 16);
+
+    /* ── Wire up flow connections ── */
+    _linkFlow(start, ".hook", initCall, ".hook-in");
+    if (initCall) _linkFlow(initCall, ".hook-out", setMetaCall, ".hook-in");
+    if (setMetaCall) _linkFlow(setMetaCall, ".hook-out", winCall, ".hook-in");
+    if (winCall) _linkFlow(winCall, ".hook-out", renCall, ".hook-in");
+    if (renCall) _linkFlow(renCall, ".hook-out", vsAssign, "#hook-fore");
+    if (vsAssign) _linkFlow(vsAssign, "#hook-next", fsAssign, "#hook-fore");
+    if (fsAssign) _linkFlow(fsAssign, "#hook-next", vsCreateCall, ".hook-in");
+    if (vsCreateCall) _linkFlow(vsCreateCall, ".hook-out", vsSrcCall, ".hook-in");
+    if (vsSrcCall) _linkFlow(vsSrcCall, ".hook-out", vsCompCall, ".hook-in");
+    if (vsCompCall) _linkFlow(vsCompCall, ".hook-out", fsCreateCall, ".hook-in");
+    if (fsCreateCall) _linkFlow(fsCreateCall, ".hook-out", fsSrcCall, ".hook-in");
+    if (fsSrcCall) _linkFlow(fsSrcCall, ".hook-out", fsCompCall, ".hook-in");
+    if (fsCompCall) _linkFlow(fsCompCall, ".hook-out", progCreate, ".hook-in");
+    if (progCreate) _linkFlow(progCreate, ".hook-out", progAttach1, ".hook-in");
+    if (progAttach1) _linkFlow(progAttach1, ".hook-out", progAttach2, ".hook-in");
+    if (progAttach2) _linkFlow(progAttach2, ".hook-out", progLink, ".hook-in");
+    if (progLink) _linkFlow(progLink, ".hook-out", vaoGen, ".hook-in");
+    if (vaoGen) _linkFlow(vaoGen, ".hook-out", vaoBind, ".hook-in");
+    if (vaoBind) _linkFlow(vaoBind, ".hook-out", bufGen, ".hook-in");
+    if (bufGen) _linkFlow(bufGen, ".hook-out", bufBind, ".hook-in");
+
+    if (bufBind) _linkFlow(bufBind, ".hook-out", loopDec, "#hook-fore");
+    if (loopDec) _linkFlow(loopDec, "#hook-out1", pollCall, ".hook-in");
+    if (pollCall) _linkFlow(pollCall, ".hook-out", checkEvent, "#hook-fore");
+    if (checkEvent) _linkFlow(checkEvent, "#hook-out1", stopRunning, ".hook-in");
+    if (stopRunning) _linkFlow(stopRunning, "#hook-next", clearCall, ".hook-in");
+    if (checkEvent) _linkFlow(checkEvent, "#hook-out0", clearCall, ".hook-in");
+    if (clearCall) _linkFlow(clearCall, ".hook-out", useProgCall, ".hook-in");
+    if (useProgCall) _linkFlow(useProgCall, ".hook-out", drawCall, ".hook-in");
+    if (drawCall) _linkFlow(drawCall, ".hook-out", renClear, ".hook-in");
+    if (renClear) _linkFlow(renClear, ".hook-out", renPresent, ".hook-in");
+
+    if (loopDec) _linkFlow(loopDec, "#hook-out0", renDestroy, ".hook-in");
+    if (renDestroy) _linkFlow(renDestroy, ".hook-out", winDestroy, ".hook-in");
+    if (winDestroy) _linkFlow(winDestroy, ".hook-out", quitCall, ".hook-in");
+    if (quitCall) _linkFlow(quitCall, ".hook-out", end, ".hook");
+  }
+};
+
+function showNewProjectModal() {
+  const overlay = $id("new-project-overlay");
+  if (!overlay) return;
+  const nameInput = $id("project-name");
+  if (nameInput) nameInput.value = "Untitled";
+  /* Reset to default template */
+  _selectedTemplateId = "console";
+  for (const c of document.querySelectorAll(".template-card")) c.classList.remove("selected");
+  const def = document.querySelector('.template-card[data-template="console"]');
+  if (def) def.classList.add("selected");
+  overlay.style.display = "";
+}
+
+function hideNewProjectModal() {
+  const overlay = $id("new-project-overlay");
+  if (overlay) overlay.style.display = "none";
+}
+
+/* Expose for app.js */
+window.TEMPLATES = TEMPLATES;
+window.showNewProjectModal = showNewProjectModal;
+window.hideNewProjectModal = hideNewProjectModal;
+
+/* Wire up modal interactivity on DOMContentLoaded */
+let _selectedTemplateId = "console";
+document.addEventListener("DOMContentLoaded", () => {
+  const overlay = $id("new-project-overlay");
+  if (!overlay) return;
+  const list = overlay.querySelector("#template-list");
+
+  /* Template card selection via event delegation */
+  if (list) {
+    list.addEventListener("click", e => {
+      const card = e.target.closest(".template-card");
+      if (!card) return;
+      for (const c of list.children) c.classList.remove("selected");
+      card.classList.add("selected");
+      _selectedTemplateId = card.dataset.template;
+    });
+  }
+
+  /* Cancel button */
+  const cancelBtn = overlay.querySelector(".modal-cancel");
+  if (cancelBtn) cancelBtn.addEventListener("click", hideNewProjectModal);
+
+  /* Create button */
+  const createBtn = overlay.querySelector(".modal-create");
+  if (createBtn) {
+    createBtn.addEventListener("click", async () => {
+      const nameInput = $id("project-name");
+      const name = nameInput ? nameInput.value.trim() || "Untitled" : "Untitled";
+      const template = TEMPLATES[_selectedTemplateId];
+      if (!template) return;
+
+      hideNewProjectModal();
+      const prog = $id("main-program");
+      if (!prog) return;
+
+      try {
+        await template.create(prog, name);
+      } catch (e) {
+        showError("Template creation failed: " + (e.message || e));
+        return;
+      }
+      refreshAll();
+    });
+  }
+
+  /* Close on overlay click (background) */
+  overlay.addEventListener("click", e => {
+    if (e.target === overlay) hideNewProjectModal();
+  });
+});
diff --git a/tests/app/test-runner.js b/tests/app/test-runner.js
new file mode 100644
index 0000000..bf74a7d
--- /dev/null
+++ b/tests/app/test-runner.js
@@ -0,0 +1,566 @@
+// ── In-app test runner ─────────────────────────────────────────────────
+//
+// Accessible from the global toolbar "Tests" button.
+// Tests DOM-dependent functionality in the live browser context.
+//
+
+const APP_TEST_SUITE = {
+  passed: 0,
+  failed: 0,
+  results: [],
+
+  run() {
+    this.passed = 0;
+    this.failed = 0;
+    this.results = [];
+    const panel = this._ensurePanel();
+    panel.innerHTML = '<div class="apptest-header">Running tests...</div>';
+
+    // Delay to let UI breathe
+    setTimeout(() => this._runAll(), 50);
+  },
+
+  _runAll() {
+    this._group("Block creation", () => {
+      this._test("create decision block", () => {
+        const el = prog.newDecisionNode();
+        if (!el || el.tagName !== "WC-DECISION") throw Error("decision not created");
+        el.remove();
+      });
+
+      this._test("create assign block", () => {
+        const el = prog.newNode("wc-assign");
+        if (!el || el.tagName !== "WC-ASSIGN") throw Error("assign not created");
+        el.remove();
+      });
+
+      this._test("create expression block", () => {
+        const el = prog.newExpressionNode();
+        if (!el || el.tagName !== "WC-EXPRESSION") throw Error("expr not created");
+        el.remove();
+      });
+
+      this._test("create proccall block", () => {
+        const el = prog.newProcCallNode();
+        if (!el || el.tagName !== "WC-PROCCALL") throw Error("proccall not created");
+        el.remove();
+      });
+
+      this._test("create boolean variable", () => {
+        const el = prog.newBooleanNode();
+        if (!el || el.tagName !== "WC-BOOLEAN") throw Error("boolean not created");
+        el.remove();
+      });
+
+      this._test("create scalar variable", () => {
+        const el = prog.newScalarNode();
+        if (!el || el.tagName !== "WC-SCALAR") throw Error("scalar not created");
+        el.remove();
+      });
+
+      this._test("create string variable", () => {
+        const el = prog.newStringNode();
+        if (!el || el.tagName !== "WC-STRING") throw Error("string not created");
+        el.remove();
+      });
+
+      this._test("start and end blocks exist", () => {
+        const start = $id("main-start");
+        const end = $id("main-end");
+        if (!start || start.tagName !== "WC-START") throw Error("start missing");
+        if (!end || end.tagName !== "WC-END") throw Error("end missing");
+      });
+
+      this._test("wcNextFlow and wcForeFlow initialized", () => {
+        const el = prog.newDecisionNode();
+        if (!Array.isArray(el.wcNextFlow)) throw Error("wcNextFlow not array");
+        if (!Array.isArray(el.wcForeFlow)) throw Error("wcForeFlow not array");
+        el.remove();
+      });
+    });
+
+    this._group("Code generation", () => {
+      this._test("generateCode returns without error", () => {
+        prog.generateCode();
+        const out = $id("c-code");
+        if (!out || !out.textContent) throw Error("no code output");
+      });
+
+      this._test("generated code contains main function", () => {
+        prog.generateCode();
+        const code = $id("c-code").textContent;
+        if (!code.includes("int main()")) throw Error("missing int main()");
+      });
+
+      this._test("generated code contains return 0", () => {
+        prog.generateCode();
+        const code = $id("c-code").textContent;
+        if (!code.includes("return 0")) throw Error("missing return 0");
+      });
+
+      this._test("branchDescendants traverses past nested decision", () => {
+        const dA = prog.newDecisionNode();
+        const dB = prog.newDecisionNode();
+        const aX = prog.newNode("wc-assign");
+        dA.style.left = "200px"; dA.style.top = "50px";
+        dB.style.left = "400px"; dB.style.top = "50px";
+        aX.style.left = "600px"; aX.style.top = "50px";
+
+        const start = $id("main-start");
+        const end = $id("main-end");
+        const savedPaths = [...start.wcNextFlow];
+        for (const p of savedPaths) deleteLink(p);
+
+        _linkFlow(start, ".hook", dA, "#hook-fore");
+        _linkFlow(dA, "#hook-out1", dB, "#hook-fore");
+        _linkFlow(dB, "#hook-out1", aX, "#hook-fore");
+
+        const desc = dA._branchDescendants([dB]);
+        dA.delete(); dB.delete(); aX.delete();
+
+        if (!desc.has(aX)) throw Error("block after nested decision not reached");
+      });
+    });
+
+    this._group("Variable operations", () => {
+      this._test("boolean has var-name and var-value", () => {
+        const el = prog.newBooleanNode();
+        if (!el.querySelector(".var-name")) throw Error("missing var-name");
+        if (!el.querySelector(".var-value")) throw Error("missing var-value");
+        el.remove();
+      });
+
+      this._test("scalar has var-name, var-type, var-unit", () => {
+        const el = prog.newScalarNode();
+        if (!el.querySelector(".var-name")) throw Error("missing var-name");
+        if (!el.querySelector(".var-type")) throw Error("missing var-type");
+        if (!el.querySelector(".var-unit")) throw Error("missing var-unit");
+        el.remove();
+      });
+    });
+
+    this._group("Data types", () => {
+      this._test("toCName on helpers starts with lowercase", () => {
+        if (typeof toCName !== "function") throw Error("toCName not global");
+        const r = toCName("Test Value");
+        if (r !== "test_value") throw Error("got: " + r);
+      });
+
+      this._test("escapeString escapes quotes", () => {
+        if (typeof escapeString !== "function") throw Error("escapeString not global");
+        const r = escapeString('say "hello"');
+        if (r !== 'say \\"hello\\"') throw Error("got: " + r);
+      });
+    });
+
+    this._group("Persist/restore", () => {
+      this._test("saveBlockData returns x/y", () => {
+        if (typeof saveBlockData !== "function") throw Error("saveBlockData not global");
+        const el = prog.newDecisionNode();
+        el.style.left = "50px";
+        el.style.top = "100px";
+        const d = saveBlockData(el);
+        if (d.x !== 50) throw Error("x wrong: " + d.x);
+        if (d.y !== 100) throw Error("y wrong: " + d.y);
+        el.remove();
+      });
+    });
+
+    this._group("Helpers", () => {
+      this._test("refreshAll runs without error", () => {
+        refreshAll();
+      });
+
+      this._test("findDataSource returns null for unconnected hook", () => {
+        const el = prog.newDecisionNode();
+        const hook = el.querySelector(".decision-data-in");
+        const r = findDataSource(hook);
+        if (r !== null) throw Error("expected null, got: " + r);
+        el.remove();
+      });
+
+      this._test("splitValueAndUnit parses correctly", () => {
+        if (typeof splitValueAndUnit !== "function") throw Error("not global");
+        const r = splitValueAndUnit("10 km/h", 0);
+        if (r.numVal !== 10 || r.unitSuffix !== "km/h") throw Error("got: " + JSON.stringify(r));
+      });
+    });
+
+    this._group("Block linking and warnings", () => {
+      this._test("_linkFlow creates SVG path element", () => {
+        const start = $id("main-start"), end = $id("main-end");
+        const before = document.querySelectorAll("path.flow").length;
+        _linkFlow(start, ".hook", end, ".hook");
+        const after = document.querySelectorAll("path.flow").length;
+        for (const p of end.wcForeFlow) deleteLink(p);
+        if (after <= before) throw Error("no path created");
+      });
+
+      this._test("linked block updates wcNextFlow and wcForeFlow", () => {
+        const start = $id("main-start"), end = $id("main-end");
+        _linkFlow(start, ".hook", end, ".hook");
+        const ok = start.wcNextFlow.length > 0 && end.wcForeFlow.length > 0;
+        for (const p of end.wcForeFlow) deleteLink(p);
+        if (!ok) throw Error("flow arrays not updated");
+      });
+
+      this._test("deleteLink removes path and cleans arrays", () => {
+        const start = $id("main-start"), end = $id("main-end");
+        _linkFlow(start, ".hook", end, ".hook");
+        const p = end.wcForeFlow[0];
+        deleteLink(p);
+        if (start.wcNextFlow.length > 0) throw Error("wcNextFlow not cleaned");
+        if (end.wcForeFlow.length > 0) throw Error("wcForeFlow not cleaned");
+        if (document.body.contains(p)) throw Error("path still in DOM");
+      });
+
+      this._test("end block is disconnected after startup", () => {
+        const end = $id("main-end");
+        end._checkLogicInput();
+        if (!end.classList.contains("disconnected")) throw Error("end should be disconnected");
+      });
+
+      this._test("linking then deleting restores disconnected warning", () => {
+        const start = $id("main-start"), end = $id("main-end");
+        _linkFlow(start, ".hook", end, ".hook");
+        refreshBlockWarnings();
+        end.classList.remove("disconnected");
+        for (const p of end.wcForeFlow) deleteLink(p);
+        refreshBlockWarnings();
+        if (!end.classList.contains("disconnected")) throw Error("should revert to disconnected");
+      });
+
+      this._test("new decision block shows disconnected warning", () => {
+        const d = prog.newDecisionNode();
+        d._checkLogicInput();
+        const hasWarning = d.classList.contains("disconnected");
+        d.remove();
+        if (!hasWarning) throw Error("new decision should be disconnected");
+      });
+    });
+
+    this._group("Decision code generation", () => {
+      this._test("decision with yes branch generates if statement", () => {
+        const dec = prog.newDecisionNode();
+        const a = prog.newNode("wc-assign");
+        const start = $id("main-start"), end = $id("main-end");
+        const saved = [...start.wcNextFlow];
+        for (const p of saved) deleteLink(p);
+
+        _linkFlow(start, ".hook", dec, "#hook-fore");
+        _linkFlow(dec, "#hook-out1", a, ".hook-in");
+        _linkFlow(a, "#hook-next", end, ".hook");
+        prog.generateCode();
+        const code = $id("c-code").textContent;
+
+        dec.delete(); a.delete();
+        _linkFlow(start, ".hook", end, ".hook");
+
+        if (!code.includes("if")) throw Error("expected if");
+        if (!code.includes("return 0")) throw Error("expected return 0");
+      });
+
+      this._test("decision with yes+no branches generates if/else", () => {
+        const dec = prog.newDecisionNode();
+        const aYes = prog.newNode("wc-assign");
+        const aNo = prog.newNode("wc-assign");
+        const start = $id("main-start"), end = $id("main-end");
+        const saved = [...start.wcNextFlow];
+        for (const p of saved) deleteLink(p);
+
+        _linkFlow(start, ".hook", dec, "#hook-fore");
+        _linkFlow(dec, "#hook-out1", aYes, ".hook-in");
+        _linkFlow(dec, "#hook-out0", aNo, ".hook-in");
+        _linkFlow(aYes, "#hook-next", end, ".hook");
+        _linkFlow(aNo, "#hook-next", end, ".hook");
+        prog.generateCode();
+        const code = $id("c-code").textContent;
+
+        dec.delete(); aYes.delete(); aNo.delete();
+        _linkFlow(start, ".hook", end, ".hook");
+
+        if (!code.includes("if")) throw Error("expected if");
+        if (!code.includes("else")) throw Error("expected else");
+      });
+    });
+
+    this._group("Workspace clearing", () => {
+      this._test("_clearWorkspace removes all non-start/end blocks", () => {
+        const d = prog.newDecisionNode();
+        const a = prog.newNode("wc-assign");
+        const blockCount = () => document.querySelectorAll("#main-program > [data-block]").length;
+        _clearWorkspace({ keepStorage: true });
+        if (blockCount() > 2) throw Error("blocks remain after clear");
+        d.remove(); a.remove();
+      });
+
+      this._test("_clearWorkspace resets flow arrays", () => {
+        const start = $id("main-start"), end = $id("main-end");
+        const d = prog.newDecisionNode();
+        _linkFlow(start, ".hook", d, "#hook-fore");
+        _linkFlow(d, "#hook-out1", end, ".hook");
+        _clearWorkspace({ keepStorage: true });
+        if (start.wcNextFlow.length > 0) throw Error("start.wcNextFlow not cleared");
+        if (end.wcForeFlow.length > 0) throw Error("end.wcForeFlow not cleared");
+        d.remove();
+      });
+
+      this._test("_clearWorkspace clears lib panes and tabs", () => {
+        const beforeTabs = document.querySelectorAll(".lib-tab").length;
+        const beforePanes = document.querySelectorAll(".lib-pane").length;
+        _clearWorkspace({ keepStorage: true });
+        const afterTabs = document.querySelectorAll(".lib-tab").length;
+        const afterPanes = document.querySelectorAll(".lib-pane").length;
+        if (afterTabs > 0 || afterPanes > 0) throw Error("lib tabs/panes remain");
+      });
+    });
+
+    this._group("Edge cases", () => {
+      this._test("generateCode with only start→end returns valid C", () => {
+        const start = $id("main-start"), end = $id("main-end");
+        const saved = [...start.wcNextFlow];
+        for (const p of saved) deleteLink(p);
+        _linkFlow(start, ".hook", end, ".hook");
+        prog.generateCode();
+        const code = $id("c-code").textContent;
+        if (!code.includes("int main()")) throw Error("missing main");
+        if (!code.includes("return 0")) throw Error("missing return 0");
+        if (!code.includes("exit")) throw Error("missing exit");
+      });
+
+      this._test("toCName handles edge cases correctly", () => {
+        if (typeof toCName !== "function") throw Error("toCName not global");
+        if (toCName("int") !== "int_") throw Error("keyword suffix: " + toCName("int"));
+        if (toCName("") !== "var_") throw Error("empty: " + toCName(""));
+        if (toCName("1abc") !== "_1abc") throw Error("leading digit: " + toCName("1abc"));
+        if (toCName("ABC_DEF") !== "abc_def") throw Error("case: " + toCName("ABC_DEF"));
+      });
+
+      this._test("refreshBlockWarnings runs without error on empty workspace", () => {
+        refreshBlockWarnings();
+      });
+    });
+
+    this._group("Sections", () => {
+      this._test("saveSections returns empty array when no sections", () => {
+        if (typeof saveSections !== "function") throw Error("saveSections not global");
+        const data = saveSections();
+        if (!Array.isArray(data)) throw Error("expected array");
+      });
+
+      this._test("blockOnSectionBorder returns false for isolated block", () => {
+        if (typeof blockOnSectionBorder !== "function") throw Error("blockOnSectionBorder not global");
+        const d = prog.newDecisionNode();
+        d.style.left = "9999px";
+        d.style.top = "9999px";
+        const hit = blockOnSectionBorder(d);
+        d.remove();
+        if (hit) throw Error("isolated block should not intersect");
+      });
+
+      this._test("saveSections + restoreSections round-trip preserves data", () => {
+        const orig = window.LOGIC_SECTIONS;
+        if (!orig) throw Error("LOGIC_SECTIONS not found");
+        orig.list.push({ id: "section-test-1", points: [{x:10,y:10},{x:100,y:10},{x:100,y:100}], title: "Test" });
+        const saved = saveSections();
+        orig.list = [];
+        restoreSections(saved);
+        const restored = saveSections();
+        orig.list = [];
+        if (restored.length !== 1) throw Error("round-trip lost sections");
+        if (restored[0].title !== "Test") throw Error("title not preserved");
+        if (restored[0].points.length !== 3) throw Error("points not preserved");
+      });
+    });
+
+    this._group("END block errno selection", () => {
+      this._test("end block has errno input field", () => {
+        const end = $id("main-end");
+        if (!end) throw Error("end block missing");
+        if (!end._el || !end._el.input) throw Error("_el.input not set");
+        const input = end.querySelector(".end-errno-input");
+        if (!input) throw Error(".end-errno-input element missing");
+      });
+
+      this._test("end block selectByCode picks exit value", () => {
+        const end = $id("main-end");
+        end._selectByCode(1);
+        if (end._selectedCode !== 1) throw Error("code not set to 1: " + end._selectedCode);
+        if (end.dataset.exitError !== "true") throw Error("exitError not set for non-zero");
+        const input = end.querySelector(".end-errno-input");
+        if (input.value.indexOf("1") !== 0) throw Error("input not updated: " + input.value);
+        end._selectByCode(0);
+        if (end._selectedCode !== 0) throw Error("code not reset to 0");
+        if (end.dataset.exitError !== "") throw Error("exitError not cleared for zero");
+      });
+
+      this._test("generateOwnCode returns return 0 for code 0", () => {
+        const end = $id("main-end");
+        end._selectedCode = 0;
+        const code = end.generateOwnCode();
+        if (!code.includes("return 0")) throw Error("expected return 0, got: " + code);
+      });
+
+      this._test("generateOwnCode returns exit(N) for non-zero code", () => {
+        const end = $id("main-end");
+        end._selectedCode = 42;
+        const code = end.generateOwnCode();
+        if (!code.includes("exit(42)")) throw Error("expected exit(42), got: " + code);
+        end._selectByCode(0);
+      });
+
+      this._test("saveData/restoreData round-trips exit code", () => {
+        const end = $id("main-end");
+        end._selectByCode(9);
+        const saved = end.saveData();
+        if (saved.exitCode !== 9) throw Error("save failed: " + JSON.stringify(saved));
+        end._selectByCode(0);
+        end.restoreData(saved);
+        if (end._selectedCode !== 9) throw Error("restore failed: " + end._selectedCode);
+        end._selectByCode(0);
+      });
+    });
+
+    this._group("Regression tests", () => {
+      this._test("WCEnd click-outside uses contains() not closest(this)", () => {
+        const end = $id("main-end");
+        if (!end) throw Error("end block missing");
+        // Show suggestions first
+        end._el.suggestions.style.display = "block";
+        if (end._el.suggestions.style.display !== "block") throw Error("suggestions not shown");
+        // Click outside the end block
+        const decoy = document.createElement("div");
+        document.body.appendChild(decoy);
+        decoy.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+        document.body.removeChild(decoy);
+        if (end._el.suggestions.style.display === "block") throw Error("suggestions not hidden after outside click");
+      });
+
+      this._test("drawpath handles detached path without crash", () => {
+        const start = $id("main-start"), end = $id("main-end");
+        if (!start || !end) throw Error("start/end missing");
+        // Create a valid link first
+        _linkFlow(start, ".hook", end, ".hook");
+        const paths = [...end.wcForeFlow];
+        if (paths.length === 0) throw Error("no path created");
+        const p = paths[0];
+        // Remove target block from DOM (detaches the hook)
+        end.style.display = "none";
+        let threw = false;
+        try { drawpath(p); } catch (e) { threw = true; }
+        end.style.display = "";
+        // Clean up link
+        for (const cp of end.wcForeFlow) deleteLink(cp);
+        if (threw) throw Error("drawpath threw on detached hook");
+      });
+
+      this._test("drawpath handles disconnected path without crash", () => {
+        const start = $id("main-start"), end = $id("main-end");
+        _linkFlow(start, ".hook", end, ".hook");
+        const p = end.wcForeFlow[0];
+        if (!p) throw Error("no path");
+        // Remove path from DOM
+        p.remove();
+        let threw = false;
+        try { drawpath(p); } catch (e) { threw = true; }
+        // Delete the remaining reference in the arrays
+        const idx = end.wcForeFlow.indexOf(p);
+        if (idx !== -1) end.wcForeFlow.splice(idx, 1);
+        const idx2 = start.wcNextFlow.indexOf(p);
+        if (idx2 !== -1) start.wcNextFlow.splice(idx2, 1);
+        delete p.toHook.dataset.connected;
+        if (threw) throw Error("drawpath threw on disconnected path");
+      });
+    });
+
+    this._group("Error handling", () => {
+      this._test("showError displays overlay", () => {
+        showError("test error");
+        const overlay = $id("error-overlay");
+        if (!overlay || !overlay.classList.contains("active")) throw Error("overlay not shown");
+        closeError();
+        if (overlay.classList.contains("active")) throw Error("overlay not hidden");
+      });
+    });
+
+    this._renderReport();
+  },
+
+  _group(name, fn) {
+    this._addResult("group", name, "");
+    fn();
+  },
+
+  _test(name, fn) {
+    try {
+      fn();
+      this.passed++;
+      this._addResult("pass", name, "");
+    } catch (e) {
+      this.failed++;
+      this._addResult("fail", name, e.message);
+    }
+  },
+
+  _addResult(type, name, detail) {
+    this.results.push({ type, name, detail });
+    const panel = this._ensurePanel();
+    if (type === "group") {
+      const h = document.createElement("div");
+      h.className = "apptest-group";
+      h.textContent = name;
+      panel.appendChild(h);
+    } else {
+      const row = document.createElement("div");
+      row.className = "apptest-row apptest-" + type;
+      row.innerHTML = `<span class="apptest-icon">${type === "pass" ? "✓" : "✗"}</span> <span class="apptest-name">${name}</span>` +
+        (detail ? `<span class="apptest-detail">${detail}</span>` : "");
+      panel.appendChild(row);
+    }
+  },
+
+  _ensurePanel() {
+    let panel = $id("apptest-panel");
+    if (panel) return panel;
+    panel = document.createElement("div");
+    panel.id = "apptest-panel";
+    panel.innerHTML = `
+      <div class="apptest-toolbar">
+        <span class="apptest-title">Test Suite</span>
+        <button class="apptest-copy" onclick="APP_TEST_SUITE._copyReport()">Copy</button>
+        <button class="apptest-close" onclick="document.getElementById('apptest-panel').remove()">x</button>
+      </div>
+      <div class="apptest-body"></div>`;
+    document.body.appendChild(panel);
+    return panel.querySelector(".apptest-body");
+  },
+
+  _copyReport() {
+    let text = "Test Suite\n==========\n";
+    for (const r of this.results) {
+      if (r.type === "group") {
+        text += "\n" + r.name + "\n";
+      } else {
+        text += "  " + (r.type === "pass" ? "✓" : "✗") + " " + r.name;
+        if (r.detail) text += " — " + r.detail;
+        text += "\n";
+      }
+    }
+    const total = this.passed + this.failed;
+    text += "\n── " + this.passed + "/" + total + " passed";
+    if (this.failed > 0) text += " — " + this.failed + " FAILURE(S)";
+    text += "\n";
+    navigator.clipboard.writeText(text).catch(() => {});
+  },
+
+  _renderReport() {
+    const panel = this._ensurePanel();
+    const total = this.passed + this.failed;
+    const summary = document.createElement("div");
+    summary.className = "apptest-summary " + (this.failed === 0 ? "apptest-pass" : "apptest-fail");
+    summary.textContent = `${this.passed}/${total} passed` + (this.failed > 0 ? ` — ${this.failed} FAILURE(S)` : " — all clear");
+    panel.insertBefore(summary, panel.firstChild);
+  }
+};
+
+window.APP_TEST_SUITE = APP_TEST_SUITE;
diff --git a/tests/node/test-pure.js b/tests/node/test-pure.js
new file mode 100644
index 0000000..eb4b151
--- /dev/null
+++ b/tests/node/test-pure.js
@@ -0,0 +1,674 @@
+// ── Node.js test suite for pure functions ─────────────────────────────────
+//
+// Tests all pure (DOM-independent) utility functions used in the app.
+// Run with: node tests/node/test-pure.js
+//
+// No external dependencies — uses only Node.js built-in assert.
+//
+
+const assert = require("assert");
+
+
+// ═══════════════════════════════════════════════════════════════════════════
+//  Helpers — extracted from helpers.js (pure functions only)
+// ═══════════════════════════════════════════════════════════════════════════
+
+function splitValueAndUnit(str, defaultNum) {
+  const trimmed = (str || "").trim();
+  const parts = trimmed.split(/\s+/);
+  let numVal, unitSuffix;
+  if (parts.length < 2 || isNaN(parseFloat(parts[0]))) {
+    numVal = parseFloat(trimmed);
+    unitSuffix = null;
+  } else {
+    numVal = parseFloat(parts[0]);
+    unitSuffix = parts.slice(1).join(" ");
+  }
+  return { numVal: isNaN(numVal) ? defaultNum : numVal, unitSuffix };
+}
+
+function escapeString(str) {
+  return str
+    .replace(/\\/g, "\\\\").replace(/"/g, '\\"')
+    .replace(/\n/g, "\\n").replace(/\r/g, "\\r").replace(/\t/g, "\\t")
+    .replace(/\f/g, "\\f").replace(/\v/g, "\\v").replace(/\0/g, "\\0");
+}
+
+const C_KEYWORDS = new Set([
+  "auto","break","case","char","const","continue","default","do","double",
+  "else","enum","extern","float","for","goto","if","int","long","register",
+  "return","short","signed","sizeof","static","struct","switch","typedef",
+  "union","unsigned","void","volatile","while"
+]);
+
+function toCName(str) {
+  let s = (str || "").trim().toLowerCase();
+  s = s.replace(/[^a-z0-9_]/g, "_");
+  s = s.replace(/_+/g, "_");
+  s = s.replace(/^_|_$/g, "");
+  if (/^\d/.test(s)) s = "_" + s;
+  if (!s || C_KEYWORDS.has(s)) s = (s || "var") + "_";
+  return s;
+}
+
+function deriveNaturalName(techName) {
+  if (!techName) return "";
+  let s = techName;
+  s = s.replace(/^(SDL_|glfw|gl_?)/i, '');
+  const known = {
+    puts: "Print String",
+    printf: "Print Formatted",
+    getchar: "Get Char",
+    putchar: "Put Char",
+    perror: "Print Error",
+    malloc: "Allocate Memory",
+    atoi: "Parse Int",
+    atof: "Parse Float",
+    strlen: "String Length",
+    strcmp: "Compare Strings",
+    fabs: "Abs Float",
+    fmod: "Float Modulo",
+  };
+  if (known[s]) return known[s];
+  s = s.replace(/([a-z])([A-Z])/g, '$1 $2');
+  s = s.replace(/_/g, ' ');
+  s = s.replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2');
+  s = s.replace(/\s+/g, ' ').trim();
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+function commentPrefix(naturalName, comment) {
+  naturalName = (naturalName || "").trim();
+  comment = (comment || "").trim();
+  return comment && naturalName ? `// ${naturalName}: ${comment}\n` : comment ? `// ${comment}\n` : "";
+}
+
+
+// ═══════════════════════════════════════════════════════════════════════════
+//  Format spec helpers — extracted from blocks-proc.js
+// ═══════════════════════════════════════════════════════════════════════════
+
+const _FMT_SPEC_RE = /%(?:[+\- #0]*\d*(?:\.\d+)?)([diufFeEgGxXoscpaAn%])/g;
+
+function _specDataType(spec) {
+  if ("di".includes(spec))   return "int";
+  if ("u".includes(spec))    return "int";
+  if ("fFeEgGaA".includes(spec)) return "double";
+  if ("s".includes(spec))    return "string";
+  return "int";
+}
+
+function _parseFormatSpecifiers(fmt) {
+  const specs = [];
+  let m;
+  _FMT_SPEC_RE.lastIndex = 0;
+  while ((m = _FMT_SPEC_RE.exec(fmt)) !== null) {
+    if (m[1] === "%") continue;
+    specs.push({ full: m[0], spec: m[1] });
+  }
+  return specs;
+}
+
+
+// ═══════════════════════════════════════════════════════════════════════════
+//  Errno helpers — from blocks-algo.js
+// ═══════════════════════════════════════════════════════════════════════════
+
+const ERRNO_LIST = [
+  { code: 1, name: "EPERM", desc: "Operation not permitted" },
+  { code: 2, name: "ENOENT", desc: "No such file or directory" },
+  { code: 3, name: "ESRCH", desc: "No such process" },
+];
+
+function _buildErrnoItems() {
+  const items = [
+    { code: 0,   name: "success",       desc: "success" },
+    { code: 255, name: "error",         desc: "generic error" },
+  ];
+  for (const e of ERRNO_LIST) {
+    items.push({ code: e.code, name: e.name, desc: e.desc });
+  }
+  return items;
+}
+
+
+// ═══════════════════════════════════════════════════════════════════════════
+//  Geometry helpers — from sections.js
+// ═══════════════════════════════════════════════════════════════════════════
+
+function _shoelace(pts) {
+  if (pts.length < 3) return 0;
+  let s = 0;
+  for (let i = 0; i < pts.length; i++) {
+    const j = (i + 1) % pts.length;
+    s += pts[i].x * pts[j].y - pts[j].x * pts[i].y;
+  }
+  return Math.abs(s) / 2;
+}
+
+function _ptInPoly(px, py, pts) {
+  let inside = false;
+  for (let i = 0, j = pts.length - 1; i < pts.length; j = i++) {
+    const xi = pts[i].x, yi = pts[i].y, xj = pts[j].x, yj = pts[j].y;
+    if ((yi > py) !== (yj > py) && px < (xj - xi) * (py - yi) / (yj - yi) + xi)
+      inside = !inside;
+  }
+  return inside;
+}
+
+function _segmentsIntersect(a, b, c, d) {
+  const det = (b.y - a.y) * (d.x - c.x) - (b.x - a.x) * (d.y - c.y);
+  if (Math.abs(det) < 1) return false;
+  const t = ((c.y - a.y) * (d.x - c.x) - (c.x - a.x) * (d.y - c.y)) / det;
+  const u = ((b.x - a.x) * (c.y - a.y) - (b.y - a.y) * (c.x - a.x)) / det;
+  return t >= 0 && t <= 1 && u >= 0 && u <= 1;
+}
+
+function _rectPolyOverlap(rx, ry, rw, rh, pts) {
+  const corners = [
+    { x: rx, y: ry }, { x: rx + rw, y: ry },
+    { x: rx + rw, y: ry + rh }, { x: rx, y: ry + rh }
+  ];
+  for (let i = 0; i < pts.length; i++) {
+    const j = (i + 1) % pts.length;
+    for (const c of corners) {
+      if (_segmentsIntersect(pts[i], pts[j], { x: rx, y: ry }, c)) return true;
+    }
+  }
+  for (let i = 0; i < corners.length; i++) {
+    const j = (i + 1) % corners.length;
+    for (let k = 0; k < pts.length; k++) {
+      const l = (k + 1) % pts.length;
+      if (_segmentsIntersect(corners[i], corners[j], pts[k], pts[l])) return true;
+    }
+  }
+  for (const c of corners) { if (_ptInPoly(c.x, c.y, pts)) return true; }
+  for (const p of pts) { if (p.x >= rx && p.x <= rx + rw && p.y >= ry && p.y <= ry + rh) return true; }
+  return false;
+}
+
+
+// ═══════════════════════════════════════════════════════════════════════════
+//  Route helper — from draw.js
+// ═══════════════════════════════════════════════════════════════════════════
+
+function routeBetween(x1, y1, x2, y2) {
+  const dx = x2 - x1, dy = y2 - y1;
+  const adx = Math.abs(dx), ady = Math.abs(dy);
+  if (adx === 0 && ady === 0) return `L ${x2} ${y2}`;
+  const sx = dx >= 0 ? 1 : -1;
+  const sy = dy >= 0 ? 1 : -1;
+  const R45 = Math.PI / 4, R90 = Math.PI / 2, TOL = 5 * Math.PI / 180;
+  const normAngle = (() => {
+    const raw = Math.abs(Math.atan2(dy, dx));
+    return raw > R90 ? Math.PI - raw : raw;
+  })();
+  if (
+    Math.abs(normAngle) < TOL ||
+    Math.abs(normAngle - R45) < TOL ||
+    Math.abs(normAngle - R90) < TOL
+  ) {
+    return `L ${x2} ${y2}`;
+  }
+  if (adx >= ady) {
+    const x1m = x1 + sx * ((adx - ady) / 2);
+    const x2m = x1m + sx * ady;
+    return `L ${x1m} ${y1} L ${x2m} ${y2} L ${x2} ${y2}`;
+  } else {
+    const y1m = y1 + sy * ((ady - adx) / 2);
+    const y2m = y1m + sy * adx;
+    return `L ${x1} ${y1m} L ${x2} ${y2m} L ${x2} ${y2}`;
+  }
+}
+
+
+// ═══════════════════════════════════════════════════════════════════════════
+//  Tests
+// ═══════════════════════════════════════════════════════════════════════════
+
+let passed = 0, failed = 0;
+
+function test(name, fn) {
+  try { fn(); passed++; }
+  catch (e) { console.error(`FAIL: ${name}\n  ${e.message}`); failed++; }
+}
+
+function group(name, fn) {
+  console.log(`\n── ${name} ──`);
+  fn();
+}
+
+
+// ── splitValueAndUnit ─────────────────────────────────────────────────────
+
+group("splitValueAndUnit", () => {
+  test("parses number with unit", () => {
+    const r = splitValueAndUnit("5 km", 0);
+    assert.strictEqual(r.numVal, 5);
+    assert.strictEqual(r.unitSuffix, "km");
+  });
+
+  test("parses number with multi-word unit", () => {
+    const r = splitValueAndUnit("100 km/h", 0);
+    assert.strictEqual(r.numVal, 100);
+    assert.strictEqual(r.unitSuffix, "km/h");
+  });
+
+  test("parses bare number", () => {
+    const r = splitValueAndUnit("42", 0);
+    assert.strictEqual(r.numVal, 42);
+    assert.strictEqual(r.unitSuffix, null);
+  });
+
+  test("returns default for NaN", () => {
+    const r = splitValueAndUnit("abc", 10);
+    assert.strictEqual(r.numVal, 10);
+    assert.strictEqual(r.unitSuffix, null);
+  });
+
+  test("handles empty string", () => {
+    const r = splitValueAndUnit("", 5);
+    assert.strictEqual(r.numVal, 5);
+    assert.strictEqual(r.unitSuffix, null);
+  });
+
+  test("parses negative number with unit", () => {
+    const r = splitValueAndUnit("-3.5 m", 0);
+    assert.strictEqual(r.numVal, -3.5);
+    assert.strictEqual(r.unitSuffix, "m");
+  });
+});
+
+
+// ── escapeString ──────────────────────────────────────────────────────────
+
+group("escapeString", () => {
+  test("escapes backslash", () => {
+    assert.strictEqual(escapeString("a\\b"), "a\\\\b");
+  });
+
+  test("escapes double quote", () => {
+    assert.strictEqual(escapeString('he"llo'), 'he\\"llo');
+  });
+
+  test("escapes newline", () => {
+    assert.strictEqual(escapeString("a\nb"), "a\\nb");
+  });
+
+  test("escapes carriage return", () => {
+    assert.strictEqual(escapeString("a\rb"), "a\\rb");
+  });
+
+  test("escapes tab", () => {
+    assert.strictEqual(escapeString("a\tb"), "a\\tb");
+  });
+
+  test("escapes form feed", () => {
+    assert.strictEqual(escapeString("a\fb"), "a\\fb");
+  });
+
+  test("escapes vertical tab", () => {
+    assert.strictEqual(escapeString("a\vb"), "a\\vb");
+  });
+
+  test("escapes null byte", () => {
+    assert.strictEqual(escapeString("a\0b"), "a\\0b");
+  });
+
+  test("passes through normal string", () => {
+    assert.strictEqual(escapeString("hello world"), "hello world");
+  });
+
+  test("handles empty string", () => {
+    assert.strictEqual(escapeString(""), "");
+  });
+});
+
+
+// ── toCName ───────────────────────────────────────────────────────────────
+
+group("toCName", () => {
+  test("lowercases input", () => {
+    assert.strictEqual(toCName("Hello"), "hello");
+  });
+
+  test("replaces spaces with underscores", () => {
+    assert.strictEqual(toCName("my var"), "my_var");
+  });
+
+  test("replaces special chars with underscores", () => {
+    assert.strictEqual(toCName("x@y#z"), "x_y_z");
+  });
+
+  test("collapses consecutive underscores", () => {
+    assert.strictEqual(toCName("a___b"), "a_b");
+  });
+
+  test("strips leading/trailing underscores", () => {
+    assert.strictEqual(toCName("_hello_"), "hello");
+  });
+
+  test("prepends underscore for leading digit", () => {
+    assert.strictEqual(toCName("1var"), "_1var");
+  });
+
+  test("appends underscore for C keyword", () => {
+    assert.strictEqual(toCName("int"), "int_");
+    assert.strictEqual(toCName("return"), "return_");
+    assert.strictEqual(toCName("while"), "while_");
+  });
+
+  test("handles empty input", () => {
+    assert.strictEqual(toCName(""), "var_");
+    assert.strictEqual(toCName(null), "var_");
+    assert.strictEqual(toCName(undefined), "var_");
+  });
+
+  test("handles single char", () => {
+    assert.strictEqual(toCName("x"), "x");
+  });
+
+  test("handles input with only special chars", () => {
+    assert.strictEqual(toCName("@#$"), "var_");
+  });
+});
+
+
+// ── deriveNaturalName ─────────────────────────────────────────────────────
+
+group("deriveNaturalName", () => {
+  test("strips SDL_ prefix", () => {
+    assert.strictEqual(deriveNaturalName("SDL_CreateWindow"), "Create Window");
+  });
+
+  test("strips glfw prefix", () => {
+    assert.strictEqual(deriveNaturalName("glfwInit"), "Init");
+  });
+
+  test("strips gl_ prefix", () => {
+    assert.strictEqual(deriveNaturalName("glClear"), "Clear");
+  });
+
+  test("uses known name map", () => {
+    assert.strictEqual(deriveNaturalName("puts"), "Print String");
+    assert.strictEqual(deriveNaturalName("printf"), "Print Formatted");
+    assert.strictEqual(deriveNaturalName("strlen"), "String Length");
+  });
+
+  test("converts snake_case", () => {
+    assert.strictEqual(deriveNaturalName("my_func"), "My func");
+  });
+
+  test("returns empty for null/undefined", () => {
+    assert.strictEqual(deriveNaturalName(null), "");
+    assert.strictEqual(deriveNaturalName(undefined), "");
+    assert.strictEqual(deriveNaturalName(""), "");
+  });
+});
+
+
+// ── commentPrefix ─────────────────────────────────────────────────────────
+
+group("commentPrefix", () => {
+  test("generates full prefix with name and comment", () => {
+    assert.strictEqual(
+      commentPrefix("My Flag", "indicates status"),
+      "// My Flag: indicates status\n"
+    );
+  });
+
+  test("generates comment-only prefix", () => {
+    assert.strictEqual(commentPrefix("", "just a note"), "// just a note\n");
+  });
+
+  test("returns empty when no comment", () => {
+    assert.strictEqual(commentPrefix("My Flag", ""), "");
+  });
+
+  test("returns empty when both empty", () => {
+    assert.strictEqual(commentPrefix("", ""), "");
+  });
+
+  test("trims whitespace", () => {
+    assert.strictEqual(
+      commentPrefix("  name  ", "  desc  "),
+      "// name: desc\n"
+    );
+  });
+});
+
+
+// ── _specDataType & _parseFormatSpecifiers ────────────────────────────────
+
+group("Format specifiers", () => {
+  test("_specDataType maps d/i to int", () => {
+    assert.strictEqual(_specDataType("d"), "int");
+    assert.strictEqual(_specDataType("i"), "int");
+  });
+
+  test("_specDataType maps u to int", () => {
+    assert.strictEqual(_specDataType("u"), "int");
+  });
+
+  test("_specDataType maps fFeEgGaA to double", () => {
+    for (const c of "fFeEgGaA") {
+      assert.strictEqual(_specDataType(c), "double", `char: ${c}`);
+    }
+  });
+
+  test("_specDataType maps s to string", () => {
+    assert.strictEqual(_specDataType("s"), "string");
+  });
+
+  test("_specDataType defaults to int for unknown", () => {
+    assert.strictEqual(_specDataType("n"), "int");
+  });
+
+  test("_parseFormatSpecifiers finds %d, %f, %s", () => {
+    const r = _parseFormatSpecifiers("x=%d y=%f name=%s");
+    assert.strictEqual(r.length, 3);
+    assert.strictEqual(r[0].spec, "d");
+    assert.strictEqual(r[1].spec, "f");
+    assert.strictEqual(r[2].spec, "s");
+  });
+
+  test("_parseFormatSpecifiers handles width and precision", () => {
+    const r = _parseFormatSpecifiers("x=%10.2f");
+    assert.strictEqual(r.length, 1);
+    assert.strictEqual(r[0].spec, "f");
+    assert.strictEqual(r[0].full, "%10.2f");
+  });
+
+  test("_parseFormatSpecifiers handles %% (escaped percent)", () => {
+    const r = _parseFormatSpecifiers("50%% %d");
+    assert.strictEqual(r.length, 1);
+    assert.strictEqual(r[0].spec, "d");
+  });
+
+  test("_parseFormatSpecifiers returns empty for no matches", () => {
+    assert.deepStrictEqual(_parseFormatSpecifiers("hello"), []);
+    assert.deepStrictEqual(_parseFormatSpecifiers(""), []);
+  });
+});
+
+
+// ── _buildErrnoItems ──────────────────────────────────────────────────────
+
+group("_buildErrnoItems", () => {
+  const items = _buildErrnoItems();
+
+  test("includes success (code 0) first", () => {
+    assert.strictEqual(items[0].code, 0);
+    assert.strictEqual(items[0].name, "success");
+  });
+
+  test("includes generic error (code 255) second", () => {
+    assert.strictEqual(items[1].code, 255);
+    assert.strictEqual(items[1].name, "error");
+  });
+
+  test("includes ERRNO_LIST items after defaults", () => {
+    assert.ok(items.length > 2);
+    assert.strictEqual(items[2].name, "EPERM");
+  });
+});
+
+
+// ── routeBetween ──────────────────────────────────────────────────────────
+
+group("routeBetween", () => {
+  test("returns direct line for zero distance", () => {
+    assert.strictEqual(routeBetween(10, 10, 10, 10), "L 10 10");
+  });
+
+  test("returns direct line for horizontal move", () => {
+    const r = routeBetween(0, 0, 100, 0);
+    assert.strictEqual(r, "L 100 0");
+  });
+
+  test("returns direct line for vertical move", () => {
+    const r = routeBetween(0, 0, 0, 100);
+    assert.strictEqual(r, "L 0 100");
+  });
+
+  test("returns direct line for 45-degree move", () => {
+    const r = routeBetween(0, 0, 100, 100);
+    assert.strictEqual(r, "L 100 100");
+  });
+
+  test("routes 3-segment for non-45-degree move (wider than tall)", () => {
+    const r = routeBetween(0, 0, 200, 50);
+    assert.strictEqual(r, "L 75 0 L 125 50 L 200 50");
+  });
+
+  test("routes 3-segment for non-45-degree move (taller than wide)", () => {
+    const r = routeBetween(0, 0, 50, 200);
+    assert.strictEqual(r, "L 0 75 L 50 125 L 50 200");
+  });
+});
+
+
+// ── _shoelace (polygon area) ──────────────────────────────────────────────
+
+group("_shoelace", () => {
+  test("returns 0 for empty array", () => {
+    assert.strictEqual(_shoelace([]), 0);
+  });
+
+  test("returns 0 for less than 3 points", () => {
+    assert.strictEqual(_shoelace([{x:0,y:0},{x:1,y:0}]), 0);
+  });
+
+  test("computes area of a 10x10 square", () => {
+    const pts = [{x:0,y:0},{x:10,y:0},{x:10,y:10},{x:0,y:10}];
+    assert.strictEqual(_shoelace(pts), 100);
+  });
+
+  test("computes area of a right triangle (3-4-5)", () => {
+    const pts = [{x:0,y:0},{x:3,y:0},{x:0,y:4}];
+    assert.strictEqual(_shoelace(pts), 6);
+  });
+
+  test("handles negative coordinates", () => {
+    const pts = [{x:-5,y:-5},{x:5,y:-5},{x:5,y:5},{x:-5,y:5}];
+    assert.strictEqual(_shoelace(pts), 100);
+  });
+});
+
+
+// ── _ptInPoly (point in polygon) ──────────────────────────────────────────
+
+group("_ptInPoly", () => {
+  const sq = [{x:0,y:0},{x:10,y:0},{x:10,y:10},{x:0,y:10}];
+
+  test("returns true for point inside square", () => {
+    assert.ok(_ptInPoly(5, 5, sq));
+  });
+
+  test("returns false for point outside square (left)", () => {
+    assert.ok(!_ptInPoly(-1, 5, sq));
+  });
+
+  test("returns false for point outside square (above)", () => {
+    assert.ok(!_ptInPoly(5, -1, sq));
+  });
+
+  test("returns true for point on edge (boundary)", () => {
+    assert.ok(_ptInPoly(0, 5, sq));
+  });
+
+  test("handles concave L-shaped polygon", () => {
+    const L = [{x:0,y:0},{x:8,y:0},{x:8,y:3},{x:3,y:3},{x:3,y:8},{x:0,y:8}];
+    assert.ok(_ptInPoly(1, 1, L));        // inside L
+    assert.ok(!_ptInPoly(5, 5, L));       // in the notch
+    assert.ok(_ptInPoly(1, 5, L));        // inside, left arm
+    assert.ok(!_ptInPoly(-1, 5, L));      // outside, left of shape
+  });
+});
+
+
+// ── _segmentsIntersect ────────────────────────────────────────────────────
+
+group("_segmentsIntersect", () => {
+  test("returns true for crossing segments", () => {
+    assert.ok(_segmentsIntersect({x:0,y:0},{x:10,y:10},{x:0,y:10},{x:10,y:0}));
+  });
+
+  test("returns false for parallel non-crossing segments", () => {
+    assert.ok(!_segmentsIntersect({x:0,y:0},{x:10,y:0},{x:0,y:10},{x:10,y:10}));
+  });
+
+  test("returns false for collinear non-overlapping segments", () => {
+    assert.ok(!_segmentsIntersect({x:0,y:0},{x:5,y:5},{x:6,y:6},{x:10,y:10}));
+  });
+
+  test("returns true when sharing endpoint", () => {
+    assert.ok(_segmentsIntersect({x:0,y:0},{x:5,y:5},{x:5,y:5},{x:10,y:0}));
+  });
+
+  test("returns false for disjoint segments", () => {
+    assert.ok(!_segmentsIntersect({x:0,y:0},{x:2,y:2},{x:8,y:8},{x:10,y:10}));
+  });
+});
+
+
+// ── _rectPolyOverlap (rectangle vs polygon) ───────────────────────────────
+
+group("_rectPolyOverlap", () => {
+  const tri = [{x:0,y:0},{x:10,y:0},{x:5,y:10}];
+
+  test("returns true when rect overlaps polygon", () => {
+    assert.ok(_rectPolyOverlap(4, 2, 2, 2, tri));
+  });
+
+  test("returns false when rect is far from polygon", () => {
+    assert.ok(!_rectPolyOverlap(50, 50, 5, 5, tri));
+  });
+
+  test("returns true when rect contains a polygon vertex", () => {
+    assert.ok(_rectPolyOverlap(8, -2, 5, 5, tri));
+  });
+
+  test("returns true when polygon encloses a rect corner", () => {
+    assert.ok(_rectPolyOverlap(4, 1, 1, 1, tri));
+  });
+
+  test("returns false for rect outside with zero-size", () => {
+    assert.ok(!_rectPolyOverlap(100, 100, 0, 0, tri));
+  });
+});
+
+
+// ═══════════════════════════════════════════════════════════════════════════
+//  Report
+// ═══════════════════════════════════════════════════════════════════════════
+
+console.log(`\n${"=".repeat(50)}`);
+const total = passed + failed;
+console.log(`Results: ${passed}/${total} passed`);
+if (failed > 0) {
+  console.log(`FAILURES: ${failed} test(s) failed`);
+  process.exit(1);
+} else {
+  console.log("All tests passed.");
+}
diff --git a/wcblock.js b/wcblock.js
index 4c27787..29ac82e 100644
--- a/wcblock.js
+++ b/wcblock.js
@@ -14,12 +14,15 @@
 // This file is loaded first among the block files.
 //   → blocks-algo.js, blocks-data.js, blocks-proc.js, wcprogram.js
 
+/** Base class for all draggable, linkable flowchart and measurement blocks. */
 class WCBlock extends HTMLElement {
   constructor() {
     super();
     this.dataset.block = "";
     this.addEventListener("mousedown", this.startDragging);
+    /** @type {SVGPathElement[]} Incoming flow paths (from other blocks to this one). */
     this.wcForeFlow = [];
+    /** @type {SVGPathElement[]} Outgoing flow paths (from this block to others). */
     this.wcNextFlow = [];
     this._gridSize = null;
     this._el = {};
@@ -42,6 +45,7 @@ class WCBlock extends HTMLElement {
       this._select();
     });
 
+    const isAlgoBlock = !!this.closest("#draw-area");
     if (!(this instanceof WCStart) && !(this instanceof WCEnd)) {
       const btn = document.createElement("button");
       btn.className = "delete-btn";
@@ -52,30 +56,99 @@ class WCBlock extends HTMLElement {
         this.delete();
       });
       this.appendChild(btn);
-      const rh = document.createElement("div");
-      rh.className = "resize-handle";
-      rh.addEventListener("mousedown", ev => {
+
+      if (isAlgoBlock) {
+        const rh = document.createElement("div");
+        rh.className = "resize-handle";
+        rh.addEventListener("mousedown", ev => {
+          ev.stopPropagation();
+          ev.preventDefault();
+          const startX = ev.clientX, startY = ev.clientY;
+          const startW = this.offsetWidth, startH = this.offsetHeight;
+          const move = e => {
+            this.style.width  = Math.max(60, startW + e.clientX - startX) + "px";
+            this.style.height = Math.max(30, startH + e.clientY - startY) + "px";
+            for (const p of this.wcNextFlow) drawpath(p);
+            for (const p of this.wcForeFlow) drawpath(p);
+          };
+          const up = () => {
+            document.removeEventListener("mousemove", move);
+            document.removeEventListener("mouseup", up);
+          };
+          document.addEventListener("mousemove", move);
+          document.addEventListener("mouseup", up);
+        });
+        this.appendChild(rh);
+      }
+    }
+
+    if (isAlgoBlock && !(this instanceof WCStart)) {
+      const eb = document.createElement("button");
+      eb.className = "edit-btn";
+      eb.title = "edit";
+      eb.innerHTML =
+        '<svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor">' +
+        '<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 ' +
+        '7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 ' +
+        '0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>';
+      eb.addEventListener("click", ev => {
         ev.stopPropagation();
-        ev.preventDefault();
-        const startX = ev.clientX, startY = ev.clientY;
-        const startW = this.offsetWidth, startH = this.offsetHeight;
-        const move = e => {
-          this.style.width  = Math.max(60, startW + e.clientX - startX) + "px";
-          this.style.height = Math.max(30, startH + e.clientY - startY) + "px";
-          for (const p of this.wcNextFlow) drawpath(p);
-          for (const p of this.wcForeFlow) drawpath(p);
-        };
-        const up = () => {
-          document.removeEventListener("mousemove", move);
-          document.removeEventListener("mouseup", up);
-        };
-        document.addEventListener("mousemove", move);
-        document.addEventListener("mouseup", up);
+        showBlockEditor(this);
       });
-      this.appendChild(rh);
+      this.appendChild(eb);
+    }
+
+    if (isAlgoBlock) {
+      const warn = document.createElement("span");
+      warn.className = "block-warn";
+      warn.textContent = "\u26A0";
+      this.appendChild(warn);
+      setTimeout(() => this._checkLogicInput(), 0);
+    }
+
+    /* Replace inputs with value labels so blocks show compact info.
+       The edit modal provides full editing. */
+    if (isAlgoBlock) {
+      for (const field of this.querySelectorAll("input, select, textarea")) {
+        const label = document.createElement("span");
+        label.className = "field-display";
+        const update = () => {
+          if (field.tagName === "SELECT") {
+            label.textContent = field.options[field.selectedIndex]?.text || "";
+          } else {
+            label.textContent = field.value || "";
+          }
+        };
+        update();
+        field.addEventListener("change", update);
+        field.addEventListener("input", update);
+        field.parentNode.insertBefore(label, field);
+        field.style.display = "none";
+      }
     }
   }
 
+  /** Checks if this block has an incoming logic flow; toggles the `.disconnected` class. */
+  _checkLogicInput() {
+    const hook = this.querySelector('.hook[data-direction="in"][data-link-type="logic"]');
+    if (!hook) return;
+    const has = this.wcForeFlow.some(p => p.toHook === hook);
+    if (!has) this.classList.add("disconnected");
+    else this.classList.remove("disconnected");
+  }
+
+  /**
+   * Finds a required child element or throws an informative error.
+   * @param {string} selector CSS selector
+   * @returns {HTMLElement}
+   */
+  _require(selector) {
+    const el = this.querySelector(selector);
+    if (!el) throw new Error(`${this.tagName}: missing required element "${selector}"`);
+    return el;
+  }
+
+  /** Marks this block as selected (adds `.selected` class, removes it from all others). */
   _select() {
     for (const el of document.querySelectorAll(".selected")) {
       el.classList.remove("selected");
@@ -83,6 +156,7 @@ class WCBlock extends HTMLElement {
     this.classList.add("selected");
   }
 
+  /** Removes this block and all connected flow paths, cleaning up arrays. */
   delete() {
     resetLinkage();
     for (const path of [...this.wcForeFlow]) deleteLink(path);
@@ -93,6 +167,10 @@ class WCBlock extends HTMLElement {
     refreshAll();
   }
 
+  /**
+   * Attaches two-click link behaviour to a single `.hook` button element.
+   * @param {HTMLElement} hook
+   */
   _setupHook(hook) {
     hook.addEventListener("click", ev => {
       ev.stopPropagation();
@@ -129,31 +207,61 @@ class WCBlock extends HTMLElement {
         path.fromElement = linkageFirst.block;
         path.fromHook = linkageFirst.hook;
         path.toHook = hook;
+        hook.dataset.connected = "";
         path.dataset.linkType = linkType || "logic";
         path.classList.add(linkType === "data" ? "flow-data" : "flow");
+        if (linkageFirst.hook.classList.contains("proccall-error-hook")) {
+          path.classList.add("flow-error-source");
+          path.classList.add("flow-error");
+        } else if (linkType !== "data" && linkageFirst.block.classList.contains("error-path")) {
+          path.classList.add("flow-error");
+        }
         this.wcForeFlow.push(path);
         linkageFirst.block.wcNextFlow.push(path);
         $id("connections").appendChild(path);
         drawpath(path);
+        if (linkType === "data") {
+          _dataSourceCache.set(hook, linkageFirst.block);
+        }
+        refreshBlockWarnings();
+        refreshErrorPaths();
         resetLinkage();
       }
     });
   }
 
+  /** @returns {string|null} The data type this block exposes (overridden by subclasses). */
   get dataType() { return null; }
 
+  /** @returns {Object} Serializable data for persistence (overridden by subclasses). */
   saveData() { return {}; }
 
+  /**
+   * Restores block state from saved data (overridden by subclasses).
+   * @param {Object} data
+   */
   restoreData(data) {}
 
+  /** @returns {string} C code fragment for this single block (overridden by subclasses). */
   generateOwnCode() { return ""; }
 
+  /**
+   * Generates C code for this block and its successors, respecting the visited set
+   * to avoid infinite loops.
+   * @param {Set} [visited]
+   * @returns {string}
+   */
   generateCode(visited = new Set()) {
     if (visited.has(this)) return "";
     visited.add(this);
     return this.generateOwnCode() + this.generateNextCode(visited);
   }
 
+  /**
+   * Walks wcNextFlow paths and accumulates code from downstream blocks.
+   * @param {Set} visited
+   * @returns {string}
+   */
   generateNextCode(visited) {
     let code = "";
     for (const path of this.wcNextFlow) {
@@ -162,38 +270,56 @@ class WCBlock extends HTMLElement {
     return code;
   }
 
+  /** @returns {number} The CSS `--grid-size` value, cached after first read (default 25). */
   _getGridSize() {
     if (this._gridSize === null) {
       this._gridSize = parseInt(
         window.getComputedStyle(this).getPropertyValue("--grid-size")
       );
     }
+    if (isNaN(this._gridSize)) this._gridSize = 25;
     return this._gridSize;
   }
 
+  /**
+   * Begins a drag operation; records start position and binds move/up listeners.
+   * @param {MouseEvent} event
+   */
   startDragging(event) {
     if (event.target.closest(".resize-handle")) return;
+    if (!this.closest("#draw-area")) return;
     this._dragMoved = false;
     this._getGridSize();
     this.dragStartX = event.clientX;
     this.dragStartY = event.clientY;
-    document.onmousemove = this._dragBound;
-    document.onmouseup = this._stopBound;
+    document.addEventListener("mousemove", this._dragBound);
+    document.addEventListener("mouseup", this._stopBound);
   }
 
+  /**
+   * Handles mouse move during drag; grid-snaps position and enforces section border constraint.
+   * @param {MouseEvent} event
+   */
   dragAround(event) {
     this._dragMoved = true;
     const snap = v => Math.round(v / this._gridSize) * this._gridSize;
+    const prevTop = this.style.top, prevLeft = this.style.left;
     this.style.top  = snap(this.offsetTop  + event.clientY - this.dragStartY) + "px";
     this.style.left = snap(this.offsetLeft + event.clientX - this.dragStartX) + "px";
-    this.dragStartX = snap(event.clientX);
-    this.dragStartY = snap(event.clientY);
+    if (typeof blockOnSectionBorder === "function" && blockOnSectionBorder(this)) {
+      this.style.top = prevTop;
+      this.style.left = prevLeft;
+    } else {
+      this.dragStartX = snap(event.clientX);
+      this.dragStartY = snap(event.clientY);
+    }
     for (const p of this.wcNextFlow) drawpath(p);
     for (const p of this.wcForeFlow) drawpath(p);
   }
 
+  /** Ends the drag operation and removes move/up listeners. */
   stopDragging() {
-    document.onmousemove = null;
-    document.onmouseup = null;
+    document.removeEventListener("mousemove", this._dragBound);
+    document.removeEventListener("mouseup", this._stopBound);
   }
 }
diff --git a/wcprogram.js b/wcprogram.js
index 1c6e01c..a96a3de 100644
--- a/wcprogram.js
+++ b/wcprogram.js
@@ -20,6 +20,7 @@
 //  WCProgram — root container
 // ═══════════════════════════════════════════════════════════════════════════════
 
+/** Root container custom element; owns the flowchart workspace, block creation, and code generation. */
 class WCProgram extends HTMLElement {
   constructor() {
     super();
@@ -27,23 +28,43 @@ class WCProgram extends HTMLElement {
   }
 
   build() {
-    const startFrag = document.importNode(
-      $id("wc-start").content, true
-    );
-    const endFrag = document.importNode(
-      $id("wc-end").content, true
-    );
-    startFrag.firstElementChild.id = "main-start";
-    endFrag.firstElementChild.id = "main-end";
+    const startTmpl = $id("wc-start");
+    const endTmpl = $id("wc-end");
+    if (!startTmpl || !endTmpl) {
+      showError("Missing wc-start or wc-end template elements");
+      return;
+    }
+    const startFrag = document.importNode(startTmpl.content, true);
+    const endFrag = document.importNode(endTmpl.content, true);
+    const startEl = startFrag.firstElementChild;
+    const endEl = endFrag.firstElementChild;
+    if (!startEl || !endEl) {
+      showError("wc-start or wc-end template has no content");
+      return;
+    }
+    startEl.id = "main-start";
+    endEl.id = "main-end";
     this.appendChild(startFrag);
     this.appendChild(endFrag);
+
+    const pw = this.parentElement ? this.parentElement.offsetWidth : 600;
+    const startW = startEl.offsetWidth || 80;
+    startEl.style.left = Math.max(20, (pw - startW) / 2) + "px";
+    startEl.style.top = "20px";
+    const endW = endEl.offsetWidth || 200;
+    endEl.style.left = Math.max(20, (pw - endW) / 2) + "px";
+    endEl.style.top = (startEl.offsetTop + startEl.offsetHeight + 60) + "px";
   }
 
   makeNode(tag) {
     const info = BLOCK_REGISTRY[tag];
     if (!info) return null;
+    const tmpl = document.querySelector(info.template);
+    if (!tmpl) { showError("Missing template: " + info.template); return null; }
+    const content = tmpl.content;
+    if (!content || !content.firstElementChild) { showError("Empty template: " + info.template); return null; }
     this.counter++;
-    const frag = document.importNode(document.querySelector(info.template).content, true);
+    const frag = document.importNode(content, true);
     const el = frag.firstElementChild;
     el.id = info.prefix + this.counter;
     return el;
@@ -61,8 +82,7 @@ class WCProgram extends HTMLElement {
   newDecisionNode()  { return this.newNode("wc-decision"); }
   newExpressionNode() { return this.newNode("wc-expression"); }
   newVarRefNode()     { return this.newNode("wc-varref"); }
-  newOutputNode()    { return this.newNode("wc-output"); }
-  newProcCallNode()   { const el = this.newNode("wc-proccall"); if (el) refreshProcOptions(); return el; }
+  newProcCallNode()   { return this.newNode("wc-proccall"); }
 
   newUnitNode() {
     const el = this.newNode("wc-unit", $id("data-area"));
@@ -94,69 +114,95 @@ class WCProgram extends HTMLElement {
     if (el) refreshVarRefOptions();
     return el;
   }
+  newVectorNode() {
+    const el = this.newNode("wc-vector", $id("variable-area"));
+    if (el) { refreshUnitOptions(); refreshVarRefOptions(); }
+    return el;
+  }
   newProcedureNode(libName) {
     const libPane = libName
       ? document.querySelector(`.lib-pane[data-lib-name="${libName}"]`)
       : document.querySelector(".lib-pane");
     if (!libPane) return null;
     const el = this.newNode("wc-procedure", libPane.querySelector(".procedures-area"));
-    if (el) refreshProcOptions();
     return el;
   }
 
   _gatherUsedTypes() {
     const usedQuantities = new Set(), usedUnits = new Set();
-    for (const d of $id("variable-area").querySelectorAll("wc-scalar")) {
-      const t = d.querySelector(".var-type").value;
-      if (t) usedQuantities.add(t);
-      const u = d.querySelector(".var-unit").value;
-      if (u) usedUnits.add(u);
+    const varArea = $id("variable-area");
+    if (!varArea) return { usedQuantities, usedUnits };
+    for (const d of varArea.querySelectorAll("wc-scalar, wc-vector")) {
+      const t = d.querySelector(".var-type");
+      if (t) { const v = t.value; if (v) usedQuantities.add(v); }
+      const u = d.querySelector(".var-unit");
+      if (u) { const v = u.value; if (v) usedUnits.add(v); }
     }
     return { usedQuantities, usedUnits };
   }
 
   _generateTypeDefs(usedQuantities) {
+    const dataArea = $id("data-area");
+    if (!dataArea) return "";
     return Array.from(
-      $id("data-area").querySelectorAll("wc-quantity")
-    ).filter(q => usedQuantities.has(q.querySelector(".quantity-name").value || "unnamed"))
+      dataArea.querySelectorAll("wc-quantity")
+    ).filter(q => {
+      const el = q.querySelector(".quantity-name");
+      return el && usedQuantities.has(el.value || "unnamed");
+    })
     .map(q => {
-      const name = q.querySelector(".quantity-name").value || "unnamed";
+      const el = q.querySelector(".quantity-name");
+      const name = el ? (el.value || "unnamed") : "unnamed";
       return `typedef double ${name};`;
     }).join("\n");
   }
 
   _generateUnitDefs(usedUnits) {
+    const dataArea = $id("data-area");
+    if (!dataArea) return "";
     return Array.from(
-      $id("data-area").querySelectorAll("wc-unit")
-    ).filter(u => usedUnits.has(u.querySelector(".unit-suffix").value))
+      dataArea.querySelectorAll("wc-unit")
+    ).filter(u => {
+      const el = u.querySelector(".unit-suffix");
+      return el && usedUnits.has(el.value);
+    })
     .map(u => {
-      const type     = u.querySelector(".unit-type").value     || "unknown";
-      const suffix   = u.querySelector(".unit-suffix").value   || "";
-      const fullname = u.querySelector(".unit-fullname").value || "";
-      const si       = u.querySelector(".unit-si").value       || "1";
+      const typeEl     = u.querySelector(".unit-type");
+      const suffixEl   = u.querySelector(".unit-suffix");
+      const fullnameEl = u.querySelector(".unit-fullname");
+      const siEl       = u.querySelector(".unit-si");
+      const type     = typeEl     ? typeEl.value     || "unknown" : "unknown";
+      const suffix   = suffixEl   ? suffixEl.value   || "" : "";
+      const fullname = fullnameEl ? fullnameEl.value || "" : "";
+      const si       = siEl       ? siEl.value       || "1" : "1";
       return `// unit: ${fullname} (${suffix}) = 1 ${type} * ${si}`;
     }).join("\n");
   }
 
   _generateVariableDeclarations() {
-    const boolDefs   = Array.from($id("variable-area").querySelectorAll("wc-boolean")).map(d => d.generateCode()).join("\n");
-    const scalarDefs = Array.from($id("variable-area").querySelectorAll("wc-scalar")).map(d => d.generateCode()).join("\n");
-    const stringDefs = Array.from($id("variable-area").querySelectorAll("wc-string")).map(d => d.generateCode()).join("\n");
-    const arrayDefs  = Array.from($id("variable-area").querySelectorAll("wc-array")).map(d => d.generateCode()).join("\n");
-    const exprDefs   = Array.from(this.querySelectorAll("wc-expression")).map(d => d.generateCode()).join("\n");
-    return { boolDefs, scalarDefs, stringDefs, arrayDefs, exprDefs };
+    const varArea = $id("variable-area");
+    if (!varArea) return { boolDefs: "", scalarDefs: "", vectorDefs: "", stringDefs: "", arrayDefs: "" };
+    const boolDefs   = Array.from(varArea.querySelectorAll("wc-boolean")).map(d => d.generateCode()).join("\n");
+    const scalarDefs = Array.from(varArea.querySelectorAll("wc-scalar")).map(d => d.generateCode()).join("\n");
+    const vectorDefs = Array.from(varArea.querySelectorAll("wc-vector")).map(d => d.generateCode()).join("\n");
+    const stringDefs = Array.from(varArea.querySelectorAll("wc-string")).map(d => d.generateCode()).join("\n");
+    const arrayDefs  = Array.from(varArea.querySelectorAll("wc-array")).map(d => d.generateCode()).join("\n");
+    return { boolDefs, scalarDefs, vectorDefs, stringDefs, arrayDefs };
   }
 
   _generateIncludes(proccalls, hasStrings) {
     const libNames = new Set();
     for (const p of proccalls) {
-      const qname = p.querySelector(".proccall-select").value;
+      const qname = p._selectedProc;
       if (qname) {
         const lib = qname.split("/")[0];
         if (lib) libNames.add(lib);
       }
     }
-    let includes = Array.from(libNames).map(l => `#include <${l}.h>`).join("\n");
+    let includes = Array.from(libNames).map(l => {
+      const path = INCLUDE_MAP[l] || (l + ".h");
+      return `#include <${path}>`;
+    }).join("\n");
     if (hasStrings) {
       const hdr = "#include <stdlib.h>\n#include <string.h>";
       includes = includes ? includes + "\n" + hdr : hdr;
@@ -165,53 +211,75 @@ class WCProgram extends HTMLElement {
   }
 
   generateCode() {
+    const outputEl = $id("c-code");
+    if (!outputEl) { showError("Missing #c-code output element"); return; }
+
     const { usedQuantities, usedUnits } = this._gatherUsedTypes();
 
     const typeDefs = this._generateTypeDefs(usedQuantities);
     const unitDefs = this._generateUnitDefs(usedUnits);
-    const { boolDefs, scalarDefs, stringDefs, arrayDefs, exprDefs } = this._generateVariableDeclarations();
+    const { boolDefs, scalarDefs, vectorDefs, stringDefs, arrayDefs } = this._generateVariableDeclarations();
 
     const hasStrings = $id("variable-area").querySelectorAll("wc-string").length > 0;
     const stringStruct = hasStrings
       ? "typedef struct { char *data; long int length; } string;\n\n"
       : "";
 
-    const body       = this.firstElementChild.generateCode(new Set());
+    const firstChild = this.firstElementChild;
+    const body = firstChild && typeof firstChild.generateCode === "function"
+      ? firstChild.generateCode(new Set())
+      : "\n// (no flowchart body)\n";
     const proccalls  = this.querySelectorAll("wc-proccall");
     const includes   = this._generateIncludes(proccalls, hasStrings);
 
-    const stringNames = Array.from($id("variable-area").querySelectorAll("wc-string")).map(
-      d => toCName(d.querySelector(".var-name").value) || "s"
-    );
-    const freeSection = hasStrings
-      ? "\n" + stringNames.map(n => `free(${n}.data);`).join("\n") + "\n"
-      : "";
-
-    const dataSection = (boolDefs || scalarDefs || stringDefs || arrayDefs || exprDefs)
-      ? [boolDefs, scalarDefs, stringDefs, arrayDefs, exprDefs]
+    const dataSection = (boolDefs || scalarDefs || vectorDefs || stringDefs || arrayDefs)
+      ? [boolDefs, scalarDefs, vectorDefs, stringDefs, arrayDefs]
           .filter(Boolean).map(s => s + "\n").join("")
       : "";
 
-    $id("c-code").value =
+    const raw =
       "// --- WiseCode\u00ae ---\n" +
       (includes ? includes + "\n\n" : "") +
       "int main() {\n" +
       (typeDefs ? typeDefs + "\n\n" : "") +
       (unitDefs ? unitDefs + "\n\n" : "") +
-      stringStruct + dataSection + body + freeSection +
+      stringStruct + dataSection + body +
       "return 0;\n" +
       "}\n// --- END ---";
+    outputEl.textContent = raw;
+    if (typeof hljs !== "undefined") hljs.highlightElement(outputEl);
+    outputEl.parentElement.dataset.language = "c";
   }
 }
 
 
+/**
+ * Maps library names to their C #include paths.
+ * Libraries not listed here use the default `<{name}.h>` convention.
+ */
+const INCLUDE_MAP = {
+  "sdl3":  "SDL3/SDL.h",
+  "glfw":  "GLFW/glfw3.h",
+  "gl":    "GL/gl.h",
+};
+
 // ═══════════════════════════════════════════════════════════════════════════════
 //  Block registry
 // ═══════════════════════════════════════════════════════════════════════════════
 
+/** @type {Object<string,{cls:typeof WCBlock, template:string, prefix:string, getParent:(()=>HTMLElement)|null}>} */
 const BLOCK_REGISTRY = {};
+/** @type {Object<string,string>} Maps toolbar action names to block tag names. */
 const BLOCK_ACTIONS = {};
 
+/**
+ * Registers a custom element class and adds it to the block registry and action map.
+ * @param {string} tag Custom element tag (e.g. "wc-decision")
+ * @param {typeof WCBlock} cls Class constructor
+ * @param {string} prefix ID prefix for auto-generated block IDs
+ * @param {string|null} creatable Action name for toolbar buttons, or null if not toolbar-creatable
+ * @param {(()=>HTMLElement)|null} getParent Function returning the parent container, or null for algorithm pane
+ */
 function registerBlock(tag, cls, prefix, creatable, getParent) {
   customElements.define(tag, cls);
   BLOCK_REGISTRY[tag] = { cls, template: "#" + tag, prefix: prefix || tag.replace("wc-", ""), getParent };
@@ -219,13 +287,13 @@ function registerBlock(tag, cls, prefix, creatable, getParent) {
 }
 
 registerBlock("wc-start",      WCStart,      "start",    null,       null);
-registerBlock("wc-end",        WCEnd,        "end",      null,       null);
+registerBlock("wc-end",        WCEnd,        "end",      "end",      null);
 registerBlock("wc-program",    WCProgram,    "program",  null,       null);
-registerBlock("wc-output",     WCOutput,     "output",   "output",   null);
 registerBlock("wc-decision",   WCDecision,   "decision", "decision", null);
 registerBlock("wc-boolean",    WCBoolean,    "bool",     "boolean",  () => $id("variable-area"));
 registerBlock("wc-scalar",     WCScalar,     "scalar",   "scalar",   () => $id("variable-area"));
 registerBlock("wc-string",     WCString,     "str",      "string",   () => $id("variable-area"));
+registerBlock("wc-vector",     WCVector,     "vec",      "vector",   () => $id("variable-area"));
 registerBlock("wc-array",      WCArray,      "arr",      "array",    () => $id("variable-area"));
 registerBlock("wc-varref",     WCVarRef,     "varref",   "varref",   null);
 registerBlock("wc-expression", WCExpression, "expr",     "expression", null);
@@ -235,6 +303,7 @@ registerBlock("wc-procedure",  WCProcedure,  "proc",     null,       null);
 registerBlock("wc-proccall",   WCProcCall,   "proccall", "proccall", null);
 registerBlock("wc-assign",     WCAssign,     "assign",   "assign",   null);
 
+/** @type {MutationObserver} Watches SVG connections for changes and refreshes assign-block value visibility. */
 const _connObserver = new MutationObserver(() => {
   for (const el of document.querySelectorAll("wc-assign")) el._updateValueVisibility();
 });