npm - @firesmasher/velox.js - Versions diffs - 1.0.0 - Mend

@firesmasher/velox.js 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/lib/templates.js ADDED Viewed

@@ -0,0 +1,1400 @@
+export const templates = {
+  config: (a) => `// Velox.js Configuration File
+// Project: ${a.projectName}
+// Important — configure paths precisely before use.
+{
+  // Core paths
+  "tagsFolder": "../../tags",
+  "pagesFolder": "../../public",
+  // URL registry
+  "localUrlJson": "../../tags/json/UrlS.json",
+  // Variable storage
+  "variableStorage": "../../storage/variables/normal.json",
+  "SHA1VariableStorage": "../../storage/variables/sha1.json",
+  // Assets
+  "mainCssLocation": "../../assets/css/style.css",
+  "savedFilesPath": "../../tags/savedFiles",
+  // Icons (not automatically created — add your own files here)
+  "icons": {
+    "icon.png": "../../assets/icons/png/icon.png",
+    "icon.svg": "../../assets/icons/svg/icon.svg"
+  },
+  // Quick path imports — lets you use @env:key in .vlx files
+  "QuickPathsVariableStorage": "../../storage/env/quickPaths.json"
+}
+`,
+  quickPaths: () => `{}
+`,
+  urlS: () => `{}
+`,
+  css: (a) => `/* Velox.js — Main Stylesheet */
+/* Project: ${a.projectName} */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+:root {
+  --velox-bg: #0d0d0d;
+  --velox-surface: #161616;
+  --velox-accent: #00c2ff;
+  --velox-text: #e8e8e8;
+  --velox-muted: #6b6b6b;
+  --velox-font: system-ui, -apple-system, sans-serif;
+}
+body {
+  background: var(--velox-bg);
+  color: var(--velox-text);
+  font-family: var(--velox-font);
+  line-height: 1.6;
+  padding: 2rem;
+}
+button {
+  background: var(--velox-accent);
+  color: #000;
+  border: none;
+  padding: .5rem 1.2rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+button:hover { opacity: .85; }
+`,
+  // ── How to connect a .vlx to HTML ──────────────────────────────────────────
+  //
+  //  Option 1 — inline tag (runs at page load):
+  //    <?velox Dom.setText("Hello") $target="$id(myDiv)" >
+  //
+  //  Option 2 — run a .vlx file at page load:
+  //    <?velox Velox.run("../assets/scripts/velox/myscript.vlx") $target="$id(out)" >
+  //
+  //  Option 3 — event listener (runs on user interaction):
+  //    <?velox $on click "$id(myBtn)": Dom.setText("Clicked!") $target="$id(out)" >
+  //    <?velox $on click "$id(myBtn)": Velox.run("myscript.vlx") $target="$id(out)" >
+  //
+  // The runtime auto-scans for all <?velox ...> tags on DOMContentLoaded.
+  // velox.js MUST be loaded BEFORE the closing </body> tag.
+  indexHtml: (a) => `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${a.projectName}</title>
+  <link rel="stylesheet" href="../assets/css/style.css" />
+</head>
+<body>
+  <h1>Welcome to ${a.projectName}</h1>
+  <p>Your Velox.js project is ready.</p>
+  <!-- Output element -->
+  <div id="output" style="margin-top:1rem;"></div>
+  <!-- Button wired by a <?velox $on > tag below -->
+  <button id="myBtn" style="margin-top:1rem;">Click me</button>
+  <!--
+    <?velox > tags are scanned at page load by the runtime.
+    Example 1 — run inline velox on page load:
+    <?velox Dom.setText("Page loaded!") $target="$id(output)" >
+    Example 2 — run a .vlx file on page load:
+    <?velox Velox.run("../assets/scripts/velox/myscript.vlx") $target="$id(output)" >
+    Example 3 — wire a click event to a .vlx file:
+    <?velox $on click "$id(myBtn)": Velox.run("../assets/scripts/velox/myscript.vlx") $target="$id(output)" >
+    Example 4 — inline command on click:
+    <?velox $on click "$id(myBtn)": Dom.setText("Hello from Velox!") $target="$id(output)" >
+  -->
+  <!-- Active example: click button → run inline velox command -->
+  <?velox $on click "$id(myBtn)": Dom.setText("Hello from Velox!") $target="$id(output)" >
+  <!-- Velox.js runtime — must come BEFORE closing </body> -->
+  <script src="../assets/scripts/velox/velox.js"></script>
+</body>
+</html>
+`,
+  projectMeta: (a) => JSON.stringify({
+    name: a.projectName,
+    version: a.version || "1.0.0",
+    author: a.author || "",
+    framework: "velox.js",
+    frameworkVersion: "2.0.0",
+    created: new Date().toISOString().split("T")[0],
+  }, null, 2) + "\n",
+  gitignore: () => `# Velox.js
+node_modules/
+.DS_Store
+Thumbs.db
+*.log
+# Local secrets / overrides
+storage/variables/sha1.json
+`,
+  // myscript.vlx — starter script
+  starterVlx: () => `// myscript.vlx — Velox.js starter script
+// Statements are separated by ;
+// Run this from HTML with:
+//   <?velox Velox.run("../assets/scripts/velox/myscript.vlx") $target="$id(output)" >
+Dom.setText("Script ran successfully!")
+  $if .: echo("Target updated")
+  $else: echo.err("No target found");
+echo("myscript.vlx loaded");
+`,
+  veloxRuntime: () => `/**
+ * Velox.js Runtime v2.0.0
+ *
+ * ── How to connect a .vlx to HTML ──────────────────────────────────────────
+ *
+ *   1. Inline tag (runs at page load):
+ *        <?velox Dom.setText("Hello World") $target="$id(myDiv)" >
+ *
+ *   2. Run a .vlx file:
+ *        <?velox Velox.run("myscript.vlx") $target="$id(myDiv)" >
+ *
+ *   3. Event-driven (runs on click, hover, etc.):
+ *        <?velox $on click "$id(btn)": Velox.run("script.vlx") $target="$id(out)" >
+ *        <?velox $on click "$id(btn)": Dom.setText("Clicked!") $target="$id(out)" >
+ *
+ * ── Value rules ─────────────────────────────────────────────────────────────
+ *   0  = false / none
+ *   1  = true
+ *   .  = pass / blank / zero
+ *   _  = same as .
+ *
+ * ── Statement separator ──────────────────────────────────────────────────────
+ *   ;   ends a statement (use inside .vlx files and inline tags)
+ *
+ * ── Target selectors ────────────────────────────────────────────────────────
+ *   $id(myId)          → document.getElementById("myId")
+ *   $class(myClass)    → first element with that class
+ *   $query(selector)   → document.querySelector(any CSS selector)
+ *   $tag(div)          → first element of that tag
+ *
+ * ── Commands reference ───────────────────────────────────────────────────────
+ *
+ *  DOM
+ *    Dom.setText("text")            set textContent
+ *    Dom.setHtml("html")            set innerHTML
+ *    Dom.append("html")             appendChild parsed HTML
+ *    Dom.prepend("html")            prependChild parsed HTML
+ *    Dom.remove()                   remove element from DOM
+ *    Dom.clear()                    clear innerHTML
+ *    Dom.show()                     remove display:none
+ *    Dom.hide()                     display:none
+ *    Dom.toggle()                   toggle visibility
+ *    Dom.addClass("cls")            add class
+ *    Dom.removeClass("cls")         remove class
+ *    Dom.toggleClass("cls")         toggle class
+ *    Dom.setAttr("attr:value")      set attribute
+ *    Dom.removeAttr("attr")         remove attribute
+ *    Dom.setStyle("prop:value")     set inline style
+ *    Dom.focus()                    focus element
+ *    Dom.click()                    programmatic click
+ *    Dom.scrollTo()                 scroll element into view
+ *    Dom.getValue()                 log input value to console
+ *    Dom.setValue("val")            set input value
+ *
+ *  ANIMATION
+ *    Anim.fadeIn("duration")        fade in (ms)
+ *    Anim.fadeOut("duration")       fade out (ms)
+ *    Anim.slide("down|up:duration") slide open or close (ms)
+ *    Anim.shake()                   shake element
+ *    Anim.pulse("duration")         pulse element
+ *
+ *  EVENTS
+ *    $on click "$id(btn)": command()     attach click listener
+ *    $on hover "$id(btn)": command()     attach mouseenter listener
+ *    $on input "$id(inp)": command()     attach input listener
+ *    $on change "$id(sel)": command()    attach change listener
+ *    $on submit "$id(frm)": command()    attach submit listener (prevents default)
+ *    $on keydown "$id(el)": command()    attach keydown listener
+ *    $on load ".": command()             window load listener
+ *
+ *  FORM
+ *    Form.getValue("$id(inp)")       log value of input
+ *    Form.setValue("$id(inp):val")   set value of input
+ *    Form.clear("$id(frm)")          clear all inputs in a form
+ *    Form.serialize("$id(frm)")      log form data as JSON
+ *
+ *  LOCAL STORAGE
+ *    Store.set("key:value")          localStorage.setItem
+ *    Store.get("key")                localStorage.getItem (logs result)
+ *    Store.remove("key")             localStorage.removeItem
+ *    Store.clear()                   localStorage.clear
+ *
+ *  COOKIE
+ *    Cookie.set("key:value")         document.cookie setter
+ *    Cookie.get("key")               cookie getter (logs result)
+ *    Cookie.remove("key")            expire cookie
+ *
+ *  VARIABLES
+ *    Var.set("key:value")            set in-memory variable
+ *    Var.get("key")                  log in-memory variable
+ *    Var.clear("key|*")              clear one or all variables
+ *
+ *  NETWORK
+ *    Url.get("url")                  fetch text, insert into target
+ *    Url.getJson("url")              fetch JSON, insert as pretty text
+ *    Url.post("url")                 POST request
+ *    Url.postJson("url:body")        POST with JSON body
+ *    Url.fetch("url")                generic fetch (download if $type="download")
+ *    iframe.Url("url")               embed URL in iframe inside target
+ *
+ *  FILE
+ *    file.localFetch("path")         fetch local file (download if $type="download")
+ *
+ *  PAGE
+ *    Page.redirect("url")            navigate to URL
+ *    Page.reload()                   reload current page
+ *    Page.title("text")              set document title
+ *    Page.meta("name:content")       set/update meta tag
+ *    Page.scrollTop()                scroll window to top
+ *
+ *  ROUTER (SPA)
+ *    Router.define("route:vlxPath")  register a SPA route
+ *    Router.go("route")              navigate to a route
+ *    Router.start("$id(outlet)")     start router with hash-based routing
+ *
+ *  TEMPLATE
+ *    Template.render("tpl:data")     render a <template id="tpl"> with JSON data
+ *
+ *  SCRIPT / STYLE
+ *    Script.load("url")              load external JS file
+ *    Style.load("url")               load external CSS file
+ *
+ *  LOGGING
+ *    echo("msg")                     console.log
+ *    echo.warn("msg")                console.warn
+ *    echo.err("msg")                 console.error
+ */
+const Velox = (() => {
+  let _config = null;
+  let _quickPaths = {};
+  let _vars = {};
+  const _routes = {};
+  let _routerOutlet = null;
+  // ── Logging ────────────────────────────────────────────────────────────────
+  const log  = (msg) => console.log(\`[Velox] \${msg}\`);
+  const warn = (msg) => console.warn(\`[Velox] \${msg}\`);
+  const err  = (msg) => console.error(\`[Velox] \${msg}\`);
+  // ── Config ─────────────────────────────────────────────────────────────────
+  async function loadConfig() {
+    try {
+      const res = await fetch("/.velox/conf/config.jsonc");
+      if (!res.ok) throw new Error(\`HTTP \${res.status}\`);
+      const text = await res.text();
+      const stripped = text.replace(/\\/\\/.*$/gm, "").replace(/,(\\s*[}\\]])/g, "$1");
+      _config = JSON.parse(stripped);
+    } catch (e) {
+      _config = {};
+    }
+  }
+  async function loadQuickPaths() {
+    try {
+      const p = _config?.QuickPathsVariableStorage || "/storage/env/quickPaths.json";
+      const res = await fetch(resolveRelative(p));
+      if (!res.ok) throw new Error(\`HTTP \${res.status}\`);
+      _quickPaths = await res.json();
+    } catch (e) {
+      _quickPaths = {};
+    }
+  }
+  async function loadVars() {
+    try {
+      const p = _config?.variableStorage || "/storage/variables/normal.json";
+      const res = await fetch(resolveRelative(p));
+      if (!res.ok) throw new Error(\`HTTP \${res.status}\`);
+      _vars = await res.json();
+    } catch (e) {
+      _vars = {};
+    }
+  }
+  // ── Path helpers ───────────────────────────────────────────────────────────
+  function resolveEnv(value) {
+    return value.replace(/@env:([a-zA-Z0-9_]+)/g, (_, key) => {
+      if (_quickPaths[key] !== undefined) return _quickPaths[key];
+      warn(\`@env:\${key} not found in quickPaths.json\`);
+      return value;
+    });
+  }
+  function resolveRelative(p) {
+    if (!p) return p;
+    if (p.startsWith("http://") || p.startsWith("https://")) return p;
+    if (p.startsWith("/")) return p;
+    // Convert relative paths (../../) to absolute from root
+    return p.replace(/^(\\.\\.\\/)+/, "/").replace(/^\\.\\//, "/");
+  }
+  function resolvePath(raw) {
+    return resolveRelative(resolveEnv(raw.trim()));
+  }
+  // ── Selector resolver ──────────────────────────────────────────────────────
+  // Supports: $id(x)  $class(x)  $query(x)  $tag(x)
+  // Also accepts raw CSS selectors directly
+  function resolveTarget(target) {
+    if (!target || target === "." || target === "_") return document.body;
+    if (target instanceof Element) return target;
+    if (typeof target !== "string") return document.body;
+    const t = target.trim();
+    const idMatch    = t.match(/^\\$id\\(([^)]+)\\)$/);
+    const classMatch = t.match(/^\\$class\\(([^)]+)\\)$/);
+    const queryMatch = t.match(/^\\$query\\((.+)\\)$/);
+    const tagMatch   = t.match(/^\\$tag\\(([^)]+)\\)$/);
+    if (idMatch)    return document.getElementById(idMatch[1]);
+    if (classMatch) return document.getElementsByClassName(classMatch[1])[0] || null;
+    if (queryMatch) return document.querySelector(queryMatch[1]);
+    if (tagMatch)   return document.getElementsByTagName(tagMatch[1])[0] || null;
+    // Last resort: treat as a CSS selector
+    return document.querySelector(t) || document.body;
+  }
+  // ── Value rules ────────────────────────────────────────────────────────────
+  function resolveValue(v) {
+    if (v === "1") return true;
+    if (v === "0") return false;
+    if (v === "." || v === "_") return null;
+    return v;
+  }
+  // ── Block / modifier parser ────────────────────────────────────────────────
+  // Matches: $keyword [value]: callStr
+  // e.g.   $if true: echo("ok")
+  //        $on click "$id(btn)": Dom.show()
+  function parseBlocks(src) {
+    const blocks = [];
+    // Extended to support $on events
+    const blockRe = /\\$(if else|if|else|on|set|delay|repeat|log|err)\\s*([^:]*)?:\\s*([^;>]+)/g;
+    let m;
+    while ((m = blockRe.exec(src)) !== null) {
+      blocks.push({
+        keyword: m[1].trim(),
+        value:   m[2] ? m[2].trim() : null,
+        call:    m[3].trim(),
+      });
+    }
+    return blocks;
+  }
+  // ── .vlx source tokenizer ──────────────────────────────────────────────────
+  // Splits on ; but respects quoted strings and nested parens
+  function tokenizeVlx(source) {
+    // Strip line comments
+    source = source.replace(/\\/\\/.*$/gm, "");
+    const stmts = [];
+    let buf = "";
+    let depth = 0;
+    let inStr = false;
+    let strChar = "";
+    for (let i = 0; i < source.length; i++) {
+      const c = source[i];
+      if (inStr) {
+        buf += c;
+        if (c === strChar && source[i - 1] !== "\\\\") inStr = false;
+      } else if (c === '"' || c === "'") {
+        inStr = true; strChar = c; buf += c;
+      } else if (c === "(") {
+        depth++; buf += c;
+      } else if (c === ")") {
+        depth--; buf += c;
+      } else if (c === ";" && depth === 0) {
+        const trimmed = buf.trim();
+        if (trimmed) stmts.push(trimmed);
+        buf = "";
+      } else {
+        buf += c;
+      }
+    }
+    const trimmed = buf.trim();
+    if (trimmed) stmts.push(trimmed);
+    return stmts;
+  }
+  // ── Statement parser ────────────────────────────────────────────────────────
+  // Parses one statement: Cmd.name("arg") [$modifiers]
+  // Also handles $on event blocks
+  function parseStatement(stmt) {
+    stmt = stmt.trim();
+    if (!stmt) return null;
+    // Check for $on event block: $on click "$id(btn)": Dom.show()
+    const onMatch = stmt.match(/^\\$on\\s+(\\w+)\\s+"([^"]+)":\\s*(.+)$/s);
+    if (onMatch) {
+      return {
+        fn: "$on",
+        event: onMatch[1].trim(),
+        selector: onMatch[2].trim(),
+        call: onMatch[3].trim(),
+        delay: 0,
+        repeat: 1,
+        blocks: [],
+      };
+    }
+    // Standard call: Fn.name("arg") [$mods]
+    // arg may contain any chars except unescaped "
+    const callMatch = stmt.match(/^([a-zA-Z$][a-zA-Z0-9$.]*)\\("((?:[^"\\\\]|\\\\.)*)"\\)([\\s\\S]*)$/);
+    if (callMatch) {
+      const fn  = callMatch[1];
+      const arg = callMatch[2].replace(/\\\\"/g, '"');
+      const rest = callMatch[3];
+      const typeMatch   = rest.match(/\\$type\\s*=\\s*"([^"]+)"/);
+      const targetMatch = rest.match(/\\$target\\s*=\\s*"([^"]+)"/);
+      const delayMatch  = rest.match(/\\$delay\\s+(\\d+)/);
+      const repeatMatch = rest.match(/\\$repeat\\s+(\\d+)/);
+      return {
+        fn,
+        arg,
+        type:    typeMatch   ? typeMatch[1]            : null,
+        target:  targetMatch ? targetMatch[1]           : null,
+        delay:   delayMatch  ? parseInt(delayMatch[1])  : 0,
+        repeat:  repeatMatch ? parseInt(repeatMatch[1]) : 1,
+        blocks:  parseBlocks(rest),
+      };
+    }
+    // Zero-arg call: Dom.remove()  Dom.show()  etc.
+    const noArgMatch = stmt.match(/^([a-zA-Z$][a-zA-Z0-9$.]*)\\(\\)([\\s\\S]*)$/);
+    if (noArgMatch) {
+      const fn   = noArgMatch[1];
+      const rest = noArgMatch[2];
+      const typeMatch   = rest.match(/\\$type\\s*=\\s*"([^"]+)"/);
+      const targetMatch = rest.match(/\\$target\\s*=\\s*"([^"]+)"/);
+      const delayMatch  = rest.match(/\\$delay\\s+(\\d+)/);
+      const repeatMatch = rest.match(/\\$repeat\\s+(\\d+)/);
+      return {
+        fn,
+        arg: "",
+        type:    typeMatch   ? typeMatch[1]            : null,
+        target:  targetMatch ? targetMatch[1]           : null,
+        delay:   delayMatch  ? parseInt(delayMatch[1])  : 0,
+        repeat:  repeatMatch ? parseInt(repeatMatch[1]) : 1,
+        blocks:  parseBlocks(rest),
+      };
+    }
+    warn(\`Could not parse statement: \${stmt}\`);
+    return null;
+  }
+  function parseVlx(source) {
+    return tokenizeVlx(source)
+      .map(parseStatement)
+      .filter(Boolean);
+  }
+  // ── <?velox ...> tag scanner ───────────────────────────────────────────────
+  function extractVeloxTags(html) {
+    const results = [];
+    // Match <?velox ... > — non-greedy, supports multiline
+    const re = /<\\?velox([\\s\\S]*?)>/g;
+    let m;
+    while ((m = re.exec(html)) !== null) {
+      results.push(m[1].trim());
+    }
+    return results;
+  }
+  // ── Inline tag parser: handles Velox.run("path") $target="..." ────────────
+  function parseInlineTag(src) {
+    // Velox.run("path") [$target="..."]
+    const runMatch = src.match(/^Velox\\.run\\("([^"]+)"\\)([\\s\\S]*)$/);
+    if (runMatch) {
+      const vlxPath = runMatch[1];
+      const rest = runMatch[2];
+      const targetMatch = rest.match(/\\$target\\s*=\\s*"([^"]+)"/);
+      const typeMatch   = rest.match(/\\$type\\s*=\\s*"([^"]+)"/);
+      return {
+        kind:    "run",
+        vlxPath,
+        target:  targetMatch ? targetMatch[1] : null,
+        type:    typeMatch   ? typeMatch[1]   : null,
+        blocks:  parseBlocks(rest),
+      };
+    }
+    return null;
+  }
+  // ── Animation helpers ──────────────────────────────────────────────────────
+  function animFadeIn(el, ms = 300) {
+    el.style.transition = \`opacity \${ms}ms\`;
+    el.style.opacity = "0";
+    el.style.display = "";
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => { el.style.opacity = "1"; });
+    });
+  }
+  function animFadeOut(el, ms = 300) {
+    el.style.transition = \`opacity \${ms}ms\`;
+    el.style.opacity = "0";
+    setTimeout(() => { el.style.display = "none"; }, ms);
+  }
+  function animSlide(el, dir, ms = 300) {
+    if (dir === "down") {
+      el.style.overflow = "hidden";
+      el.style.height = "0";
+      el.style.display = "";
+      const h = el.scrollHeight;
+      el.style.transition = \`height \${ms}ms\`;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => { el.style.height = h + "px"; });
+      });
+      setTimeout(() => { el.style.height = ""; el.style.overflow = ""; }, ms);
+    } else {
+      el.style.overflow = "hidden";
+      el.style.height = el.scrollHeight + "px";
+      el.style.transition = \`height \${ms}ms\`;
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => { el.style.height = "0"; });
+      });
+      setTimeout(() => { el.style.display = "none"; el.style.height = ""; el.style.overflow = ""; }, ms);
+    }
+  }
+  function animShake(el) {
+    el.style.animation = "none";
+    const id = \`vlx-shake-\${Date.now()}\`;
+    if (!document.getElementById(id)) {
+      const s = document.createElement("style");
+      s.id = id;
+      s.textContent = \`@keyframes vlx-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}\`;
+      document.head.appendChild(s);
+    }
+    el.style.animation = "vlx-shake 0.4s";
+    setTimeout(() => { el.style.animation = ""; }, 400);
+  }
+  function animPulse(el, ms = 600) {
+    const id = \`vlx-pulse-\${Date.now()}\`;
+    if (!document.getElementById(id)) {
+      const s = document.createElement("style");
+      s.id = id;
+      s.textContent = \`@keyframes vlx-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}\`;
+      document.head.appendChild(s);
+    }
+    el.style.animation = \`vlx-pulse \${ms}ms\`;
+    setTimeout(() => { el.style.animation = ""; }, ms);
+  }
+  // ── Cookie helpers ─────────────────────────────────────────────────────────
+  function cookieGet(key) {
+    const m = document.cookie.match(new RegExp(\`(?:^|;\\\\s*)\${encodeURIComponent(key)}=([^;]*)\`));
+    return m ? decodeURIComponent(m[1]) : null;
+  }
+  function cookieSet(key, value, days = 365) {
+    const exp = new Date(Date.now() + days * 864e5).toUTCString();
+    document.cookie = \`\${encodeURIComponent(key)}=\${encodeURIComponent(value)};expires=\${exp};path=/\`;
+  }
+  function cookieRemove(key) {
+    document.cookie = \`\${encodeURIComponent(key)}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/\`;
+  }
+  // ── Template rendering ─────────────────────────────────────────────────────
+  // <template id="myTpl"><div>{{name}}</div></template>
+  // Template.render("myTpl:{\\"name\\":\\"World\\"}")
+  function renderTemplate(tplId, data, target) {
+    const tpl = document.getElementById(tplId);
+    if (!tpl || tpl.tagName !== "TEMPLATE") {
+      warn(\`Template #\${tplId} not found\`);
+      return false;
+    }
+    let html = tpl.innerHTML;
+    for (const [k, v] of Object.entries(data)) {
+      html = html.replaceAll(\`{{\${k}}}\`, v);
+    }
+    if (target) target.innerHTML = html;
+    return true;
+  }
+  // ── SPA Router ────────────────────────────────────────────────────────────
+  async function routerNavigate(route) {
+    const vlxPath = _routes[route] || _routes["*"];
+    if (!vlxPath) { warn(\`No route defined for: \${route}\`); return; }
+    window.location.hash = route;
+    if (_routerOutlet) {
+      _routerOutlet.innerHTML = "";
+      await runScript(vlxPath, { target: _routerOutlet });
+    }
+  }
+  function routerStart(outlet) {
+    _routerOutlet = outlet;
+    const go = () => {
+      const route = window.location.hash.slice(1) || "/";
+      routerNavigate(route);
+    };
+    window.addEventListener("hashchange", go);
+    go(); // run on start
+  }
+  // ── $on event binder ──────────────────────────────────────────────────────
+  async function bindEvent(cmd, options = {}) {
+    const { event, selector, call } = cmd;
+    const els = selector === "." || selector === "window"
+      ? [window]
+      : Array.from(document.querySelectorAll(selectorToCss(selector)));
+    if (!els.length) {
+      warn(\`$on \${event}: no elements match "\${selector}"\`);
+      return;
+    }
+    const domEvent = event === "hover" ? "mouseenter" : event;
+    for (const el of els) {
+      const handler = async (e) => {
+        if (event === "submit") e.preventDefault();
+        const target = resolveTarget(options.target || null) || el;
+        // Inline call inside $on
+        const stmt = parseStatement(call);
+        if (stmt) await executeCommand(stmt, { target, event: e, sourceEl: el });
+      };
+      el.addEventListener(domEvent, handler);
+    }
+  }
+  // Convert Velox selector syntax to a CSS selector string
+  function selectorToCss(sel) {
+    if (!sel) return "body";
+    const idM    = sel.match(/^\\$id\\(([^)]+)\\)$/);
+    const clsM   = sel.match(/^\\$class\\(([^)]+)\\)$/);
+    const qM     = sel.match(/^\\$query\\((.+)\\)$/);
+    const tagM   = sel.match(/^\\$tag\\(([^)]+)\\)$/);
+    if (idM)  return \`#\${idM[1]}\`;
+    if (clsM) return \`.\${clsM[1]}\`;
+    if (qM)   return qM[1];
+    if (tagM) return tagM[1];
+    return sel;
+  }
+  // ── Command executor ───────────────────────────────────────────────────────
+  async function executeCommand(cmd, options = {}) {
+    // Per-command $target overrides the options target
+    const targetSel = cmd.target || options.target;
+    const target = typeof targetSel === "string"
+      ? resolveTarget(targetSel)
+      : (targetSel instanceof Element ? targetSel : resolveTarget(options.target));
+    // ── $on event binding ──────────────────────────────────────────────────
+    if (cmd.fn === "$on") {
+      await bindEvent(cmd, options);
+      return;
+    }
+    const execute = async () => {
+      switch (cmd.fn) {
+        // ── DOM ─────────────────────────────────────────────────────────────
+        case "Dom.setText":
+          if (target) target.textContent = cmd.arg;
+          evalBlocks(cmd.blocks, !!target, target); break;
+        case "Dom.setHtml":
+          if (target) target.innerHTML = cmd.arg;
+          evalBlocks(cmd.blocks, !!target, target); break;
+        case "Dom.append": {
+          if (target) {
+            const tpl = document.createElement("template");
+            tpl.innerHTML = cmd.arg;
+            target.appendChild(tpl.content.cloneNode(true));
+          }
+          evalBlocks(cmd.blocks, !!target, target); break;
+        }
+        case "Dom.prepend": {
+          if (target) {
+            const tpl = document.createElement("template");
+            tpl.innerHTML = cmd.arg;
+            target.prepend(tpl.content.cloneNode(true));
+          }
+          evalBlocks(cmd.blocks, !!target, target); break;
+        }
+        case "Dom.remove":
+          if (target && target !== document.body) target.remove();
+          evalBlocks(cmd.blocks, true, null); break;
+        case "Dom.clear":
+          if (target) target.innerHTML = "";
+          evalBlocks(cmd.blocks, !!target, target); break;
+        case "Dom.show":
+          if (target) target.style.display = "";
+          evalBlocks(cmd.blocks, true, target); break;
+        case "Dom.hide":
+          if (target) target.style.display = "none";
+          evalBlocks(cmd.blocks, true, target); break;
+        case "Dom.toggle":
+          if (target) target.style.display = target.style.display === "none" ? "" : "none";
+          evalBlocks(cmd.blocks, true, target); break;
+        case "Dom.addClass":
+          if (target) target.classList.add(cmd.arg);
+          evalBlocks(cmd.blocks, true, target); break;
+        case "Dom.removeClass":
+          if (target) target.classList.remove(cmd.arg);
+          evalBlocks(cmd.blocks, true, target); break;
+        case "Dom.toggleClass":
+          if (target) target.classList.toggle(cmd.arg);
+          evalBlocks(cmd.blocks, true, target); break;
+        case "Dom.setAttr": {
+          if (target) {
+            const [attr, ...vals] = cmd.arg.split(":");
+            target.setAttribute(attr.trim(), vals.join(":").trim());
+          }
+          evalBlocks(cmd.blocks, !!target, target); break;
+        }
+        case "Dom.removeAttr":
+          if (target) target.removeAttribute(cmd.arg);
+          evalBlocks(cmd.blocks, !!target, target); break;
+        case "Dom.setStyle": {
+          if (target) {
+            const colonIdx = cmd.arg.indexOf(":");
+            const prop = cmd.arg.slice(0, colonIdx).trim();
+            const val  = cmd.arg.slice(colonIdx + 1).trim();
+            target.style[prop] = val;
+          }
+          evalBlocks(cmd.blocks, !!target, target); break;
+        }
+        case "Dom.focus":
+          if (target) target.focus();
+          evalBlocks(cmd.blocks, !!target, target); break;
+        case "Dom.click":
+          if (target) target.click();
+          evalBlocks(cmd.blocks, !!target, target); break;
+        case "Dom.scrollTo":
+          if (target) target.scrollIntoView({ behavior: "smooth" });
+          evalBlocks(cmd.blocks, !!target, target); break;
+        case "Dom.getValue":
+          log(\`Dom.getValue: \${target?.value ?? "undefined"}\`);
+          evalBlocks(cmd.blocks, target?.value !== undefined, target); break;
+        case "Dom.setValue":
+          if (target) target.value = cmd.arg;
+          evalBlocks(cmd.blocks, !!target, target); break;
+        // ── ANIMATION ───────────────────────────────────────────────────────
+        case "Anim.fadeIn": {
+          if (target) animFadeIn(target, parseInt(cmd.arg) || 300);
+          evalBlocks(cmd.blocks, !!target, target); break;
+        }
+        case "Anim.fadeOut": {
+          if (target) animFadeOut(target, parseInt(cmd.arg) || 300);
+          evalBlocks(cmd.blocks, !!target, target); break;
+        }
+        case "Anim.slide": {
+          if (target) {
+            const [dir, ms] = cmd.arg.split(":");
+            animSlide(target, dir.trim(), parseInt(ms) || 300);
+          }
+          evalBlocks(cmd.blocks, !!target, target); break;
+        }
+        case "Anim.shake":
+          if (target) animShake(target);
+          evalBlocks(cmd.blocks, !!target, target); break;
+        case "Anim.pulse":
+          if (target) animPulse(target, parseInt(cmd.arg) || 600);
+          evalBlocks(cmd.blocks, !!target, target); break;
+        // ── FORM ────────────────────────────────────────────────────────────
+        case "Form.getValue": {
+          const el = resolveTarget(cmd.arg);
+          log(\`Form.getValue: \${el?.value ?? "undefined"}\`);
+          evalBlocks(cmd.blocks, el?.value !== undefined, target); break;
+        }
+        case "Form.setValue": {
+          const colonIdx = cmd.arg.indexOf(":");
+          const sel = cmd.arg.slice(0, colonIdx).trim();
+          const val = cmd.arg.slice(colonIdx + 1).trim();
+          const el = resolveTarget(sel);
+          if (el) el.value = val;
+          evalBlocks(cmd.blocks, !!el, target); break;
+        }
+        case "Form.clear": {
+          const form = resolveTarget(cmd.arg) || target;
+          if (form) form.querySelectorAll("input,textarea,select").forEach(i => { i.value = ""; });
+          evalBlocks(cmd.blocks, !!form, target); break;
+        }
+        case "Form.serialize": {
+          const form = resolveTarget(cmd.arg) || target;
+          if (form) {
+            const data = {};
+            form.querySelectorAll("[name]").forEach(i => { data[i.name] = i.value; });
+            log(\`Form.serialize: \${JSON.stringify(data)}\`);
+            if (target && target !== form) target.textContent = JSON.stringify(data, null, 2);
+          }
+          evalBlocks(cmd.blocks, !!form, target); break;
+        }
+        // ── LOCAL STORAGE ────────────────────────────────────────────────────
+        case "Store.set": {
+          const colonIdx = cmd.arg.indexOf(":");
+          const k = cmd.arg.slice(0, colonIdx).trim();
+          const v = cmd.arg.slice(colonIdx + 1).trim();
+          localStorage.setItem(k, v);
+          log(\`Store.set: \${k} = \${v}\`);
+          evalBlocks(cmd.blocks, true, target); break;
+        }
+        case "Store.get": {
+          const val = localStorage.getItem(cmd.arg);
+          log(\`Store.get: \${cmd.arg} = \${val ?? "null"}\`);
+          if (target && val !== null) target.textContent = val;
+          evalBlocks(cmd.blocks, val !== null, target); break;
+        }
+        case "Store.remove":
+          localStorage.removeItem(cmd.arg);
+          evalBlocks(cmd.blocks, true, target); break;
+        case "Store.clear":
+          localStorage.clear();
+          evalBlocks(cmd.blocks, true, target); break;
+        // ── COOKIES ─────────────────────────────────────────────────────────
+        case "Cookie.set": {
+          const colonIdx = cmd.arg.indexOf(":");
+          const k = cmd.arg.slice(0, colonIdx).trim();
+          const v = cmd.arg.slice(colonIdx + 1).trim();
+          cookieSet(k, v);
+          evalBlocks(cmd.blocks, true, target); break;
+        }
+        case "Cookie.get": {
+          const val = cookieGet(cmd.arg);
+          log(\`Cookie.get: \${cmd.arg} = \${val ?? "null"}\`);
+          if (target && val !== null) target.textContent = val;
+          evalBlocks(cmd.blocks, val !== null, target); break;
+        }
+        case "Cookie.remove":
+          cookieRemove(cmd.arg);
+          evalBlocks(cmd.blocks, true, target); break;
+        // ── VARIABLES ────────────────────────────────────────────────────────
+        case "Var.set": {
+          const colonIdx = cmd.arg.indexOf(":");
+          const k = cmd.arg.slice(0, colonIdx).trim();
+          const v = cmd.arg.slice(colonIdx + 1).trim();
+          _vars[k] = v;
+          log(\`Var.set: \${k} = \${v}\`);
+          evalBlocks(cmd.blocks, true, target); break;
+        }
+        case "Var.get": {
+          const val = _vars[cmd.arg];
+          log(\`Var.get: \${cmd.arg} = \${val ?? "undefined"}\`);
+          if (target && val !== undefined) target.textContent = val;
+          evalBlocks(cmd.blocks, val !== undefined, target); break;
+        }
+        case "Var.clear":
+          if (cmd.arg === "*") _vars = {};
+          else delete _vars[cmd.arg];
+          evalBlocks(cmd.blocks, true, target); break;
+        // ── NETWORK ─────────────────────────────────────────────────────────
+        case "iframe.Url": {
+          const url = resolvePath(cmd.arg);
+          let iframeEl;
+          if (target && target.tagName === "IFRAME") {
+            iframeEl = target;
+          } else {
+            iframeEl = document.createElement("iframe");
+            iframeEl.style.cssText = "width:100%;height:600px;border:none;display:block;";
+            (target || document.body).appendChild(iframeEl);
+          }
+          iframeEl.src = url;
+          evalBlocks(cmd.blocks, true, iframeEl);
+          break;
+        }
+        case "Url.fetch": {
+          const url = resolvePath(cmd.arg);
+          try {
+            const res = await fetch(url);
+            if (!res.ok) throw new Error(\`HTTP \${res.status}\`);
+            if (cmd.type === "download") {
+              const blob = await res.blob();
+              const a = document.createElement("a");
+              a.href = URL.createObjectURL(blob);
+              a.download = url.split("/").pop();
+              a.click();
+            }
+            evalBlocks(cmd.blocks, true, target);
+          } catch (e) {
+            warn(\`Url.fetch failed: \${e.message}\`);
+            evalBlocks(cmd.blocks, false, target);
+          }
+          break;
+        }
+        case "Url.get": {
+          const url = resolvePath(cmd.arg);
+          try {
+            const res = await fetch(url);
+            if (!res.ok) throw new Error(\`HTTP \${res.status}\`);
+            const text = await res.text();
+            if (target) target.textContent = text;
+            evalBlocks(cmd.blocks, true, target);
+          } catch (e) {
+            warn(\`Url.get failed: \${e.message}\`);
+            evalBlocks(cmd.blocks, false, target);
+          }
+          break;
+        }
+        case "Url.getJson": {
+          const url = resolvePath(cmd.arg);
+          try {
+            const res = await fetch(url);
+            if (!res.ok) throw new Error(\`HTTP \${res.status}\`);
+            const json = await res.json();
+            if (target) target.textContent = JSON.stringify(json, null, 2);
+            evalBlocks(cmd.blocks, true, target);
+          } catch (e) {
+            warn(\`Url.getJson failed: \${e.message}\`);
+            evalBlocks(cmd.blocks, false, target);
+          }
+          break;
+        }
+        case "Url.post": {
+          const url = resolvePath(cmd.arg);
+          try {
+            const res = await fetch(url, { method: "POST" });
+            if (!res.ok) throw new Error(\`HTTP \${res.status}\`);
+            evalBlocks(cmd.blocks, true, target);
+          } catch (e) {
+            warn(\`Url.post failed: \${e.message}\`);
+            evalBlocks(cmd.blocks, false, target);
+          }
+          break;
+        }
+        case "Url.postJson": {
+          // arg format: "url:jsonBody"
+          const colonIdx = cmd.arg.indexOf(":");
+          const url  = resolvePath(cmd.arg.slice(0, colonIdx).trim());
+          const body = cmd.arg.slice(colonIdx + 1).trim();
+          try {
+            const res = await fetch(url, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body,
+            });
+            if (!res.ok) throw new Error(\`HTTP \${res.status}\`);
+            evalBlocks(cmd.blocks, true, target);
+          } catch (e) {
+            warn(\`Url.postJson failed: \${e.message}\`);
+            evalBlocks(cmd.blocks, false, target);
+          }
+          break;
+        }
+        case "file.localFetch": {
+          const url = resolvePath(cmd.arg);
+          try {
+            const res = await fetch(url);
+            if (!res.ok) throw new Error("Not found");
+            if (cmd.type === "download") {
+              const blob = await res.blob();
+              const a = document.createElement("a");
+              a.href = URL.createObjectURL(blob);
+              a.download = url.split("/").pop();
+              a.click();
+            }
+            evalBlocks(cmd.blocks, true, target);
+          } catch (e) {
+            warn(\`file.localFetch failed: \${e.message}\`);
+            evalBlocks(cmd.blocks, false, target);
+          }
+          break;
+        }
+        // ── PAGE ─────────────────────────────────────────────────────────────
+        case "Page.redirect":
+          evalBlocks(cmd.blocks, true, target);
+          window.location.href = resolvePath(cmd.arg);
+          break;
+        case "Page.reload":
+          evalBlocks(cmd.blocks, true, target);
+          window.location.reload();
+          break;
+        case "Page.title":
+          document.title = cmd.arg;
+          evalBlocks(cmd.blocks, true, target);
+          break;
+        case "Page.meta": {
+          const colonIdx = cmd.arg.indexOf(":");
+          const name    = cmd.arg.slice(0, colonIdx).trim();
+          const content = cmd.arg.slice(colonIdx + 1).trim();
+          let meta = document.querySelector(\`meta[name="\${name}"]\`);
+          if (!meta) { meta = document.createElement("meta"); meta.name = name; document.head.appendChild(meta); }
+          meta.content = content;
+          evalBlocks(cmd.blocks, true, target);
+          break;
+        }
+        case "Page.scrollTop":
+          window.scrollTo({ top: 0, behavior: "smooth" });
+          evalBlocks(cmd.blocks, true, target);
+          break;
+        // ── ROUTER ───────────────────────────────────────────────────────────
+        case "Router.define": {
+          const colonIdx = cmd.arg.indexOf(":");
+          const route   = cmd.arg.slice(0, colonIdx).trim();
+          const vlxPath = cmd.arg.slice(colonIdx + 1).trim();
+          _routes[route] = vlxPath;
+          evalBlocks(cmd.blocks, true, target);
+          break;
+        }
+        case "Router.go":
+          await routerNavigate(cmd.arg);
+          evalBlocks(cmd.blocks, true, target);
+          break;
+        case "Router.start":
+          routerStart(target || document.body);
+          evalBlocks(cmd.blocks, true, target);
+          break;
+        // ── TEMPLATE ─────────────────────────────────────────────────────────
+        case "Template.render": {
+          // arg: "templateId:jsonData"
+          const colonIdx = cmd.arg.indexOf(":");
+          const tplId = cmd.arg.slice(0, colonIdx).trim();
+          let data = {};
+          try { data = JSON.parse(cmd.arg.slice(colonIdx + 1).trim()); } catch (_) {}
+          const ok = renderTemplate(tplId, data, target);
+          evalBlocks(cmd.blocks, ok, target);
+          break;
+        }
+        // ── SCRIPT / STYLE ───────────────────────────────────────────────────
+        case "Script.load": {
+          const url = resolvePath(cmd.arg);
+          try {
+            await new Promise((resolve, reject) => {
+              const s = document.createElement("script");
+              s.src = url; s.onload = resolve; s.onerror = reject;
+              document.head.appendChild(s);
+            });
+            evalBlocks(cmd.blocks, true, target);
+          } catch (e) {
+            warn(\`Script.load failed: \${e.message}\`);
+            evalBlocks(cmd.blocks, false, target);
+          }
+          break;
+        }
+        case "Style.load": {
+          const link = document.createElement("link");
+          link.rel = "stylesheet";
+          link.href = resolvePath(cmd.arg);
+          document.head.appendChild(link);
+          evalBlocks(cmd.blocks, true, target);
+          break;
+        }
+        // ── ECHO / LOGGING ────────────────────────────────────────────────────
+        case "echo":      log(cmd.arg);  break;
+        case "echo.warn": warn(cmd.arg); break;
+        case "echo.err":  err(cmd.arg);  break;
+        default:
+          warn(\`Unknown command: \${cmd.fn}\`);
+      }
+    };
+    // Delay + repeat support
+    if (cmd.delay) await sleep(cmd.delay);
+    for (let i = 0; i < (cmd.repeat || 1); i++) {
+      if (i > 0 && cmd.delay) await sleep(cmd.delay);
+      await execute();
+    }
+  }
+  // ── Block evaluator ────────────────────────────────────────────────────────
+  function evalBlocks(blocks, success, target) {
+    let handled = false;
+    for (const block of blocks) {
+      switch (block.keyword) {
+        case "if": {
+          const cond = block.value === null ? success : (block.value === true || block.value === "true");
+          if (cond) { runCall(block.call, target); handled = true; }
+          break;
+        }
+        case "if else": {
+          if (!handled) {
+            const cond = block.value === null ? success : (block.value === true || block.value === "true");
+            if (cond) { runCall(block.call, target); handled = true; }
+          }
+          break;
+        }
+        case "else":
+          if (!handled) { runCall(block.call, target); handled = true; }
+          break;
+        case "log":
+          runCall(block.call, target); break;
+      }
+    }
+  }
+  // ── Inline callback runner (used inside $if/$else blocks) ─────────────────
+  function runCall(callStr, target) {
+    if (!callStr) return;
+    callStr = callStr.trim();
+    // echo / echo.err / echo.warn
+    const echoMatch = callStr.match(/^echo(?:\\.(err|warn))?\\("([^"]*)"\\)$/);
+    if (echoMatch) {
+      const type = echoMatch[1], msg = echoMatch[2];
+      if (type === "err") err(msg);
+      else if (type === "warn") warn(msg);
+      else log(msg);
+      return;
+    }
+    // Dom calls
+    const domTextMatch = callStr.match(/^Dom\\.(setText|setHtml)\\("([^"]*)"\\)$/);
+    if (domTextMatch && target) {
+      if (domTextMatch[1] === "setText") target.textContent = domTextMatch[2];
+      else target.innerHTML = domTextMatch[2];
+      return;
+    }
+    const domVisMatch = callStr.match(/^Dom\\.(show|hide|toggle|remove|clear|focus|click|scrollTo)\\(\\)$/);
+    if (domVisMatch && target) {
+      switch (domVisMatch[1]) {
+        case "show":     target.style.display = ""; break;
+        case "hide":     target.style.display = "none"; break;
+        case "toggle":   target.style.display = target.style.display === "none" ? "" : "none"; break;
+        case "remove":   target.remove(); break;
+        case "clear":    target.innerHTML = ""; break;
+        case "focus":    target.focus(); break;
+        case "click":    target.click(); break;
+        case "scrollTo": target.scrollIntoView({ behavior: "smooth" }); break;
+      }
+      return;
+    }
+    const domClassMatch = callStr.match(/^Dom\\.(addClass|removeClass|toggleClass)\\("([^"]*)"\\)$/);
+    if (domClassMatch && target) {
+      if (domClassMatch[1] === "addClass")      target.classList.add(domClassMatch[2]);
+      else if (domClassMatch[1] === "removeClass") target.classList.remove(domClassMatch[2]);
+      else target.classList.toggle(domClassMatch[2]);
+      return;
+    }
+    const domStyleMatch = callStr.match(/^Dom\\.setStyle\\("([^"]+)"\\)$/);
+    if (domStyleMatch && target) {
+      const colonIdx = domStyleMatch[1].indexOf(":");
+      target.style[domStyleMatch[1].slice(0, colonIdx).trim()] = domStyleMatch[1].slice(colonIdx + 1).trim();
+      return;
+    }
+    // Var calls
+    const varSetMatch = callStr.match(/^Var\\.set\\("([^"]+)"\\)$/);
+    if (varSetMatch) {
+      const colonIdx = varSetMatch[1].indexOf(":");
+      _vars[varSetMatch[1].slice(0, colonIdx).trim()] = varSetMatch[1].slice(colonIdx + 1).trim();
+      return;
+    }
+    // Anim calls
+    const animMatch = callStr.match(/^Anim\\.(fadeIn|fadeOut|shake|pulse)\\("?([^"]*)"?\\)$/);
+    if (animMatch && target) {
+      const [, fn, arg] = animMatch;
+      if (fn === "fadeIn")  animFadeIn(target, parseInt(arg) || 300);
+      if (fn === "fadeOut") animFadeOut(target, parseInt(arg) || 300);
+      if (fn === "shake")   animShake(target);
+      if (fn === "pulse")   animPulse(target, parseInt(arg) || 600);
+      return;
+    }
+    // Page calls
+    if (callStr === "Page.reload()") { window.location.reload(); return; }
+    if (callStr === "Page.scrollTop()") { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
+    const redirectMatch = callStr.match(/^Page\\.redirect\\("([^"]*)"\\)$/);
+    if (redirectMatch) { window.location.href = resolvePath(redirectMatch[1]); return; }
+    warn(\`Unknown callback: \${callStr}\`);
+  }
+  function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
+  // ── Run a .vlx file ────────────────────────────────────────────────────────
+  async function runScript(vlxPath, options = {}) {
+    const resolved = resolvePath(vlxPath);
+    try {
+      const res = await fetch(resolved);
+      if (!res.ok) throw new Error(\`Could not load \${resolved} (HTTP \${res.status})\`);
+      const source = await res.text();
+      const commands = parseVlx(source);
+      for (const cmd of commands) await executeCommand(cmd, options);
+    } catch (e) {
+      err("Runtime error: " + e.message);
+    }
+  }
+  // ── Run inline .vlx source ─────────────────────────────────────────────────
+  async function runInline(source, options = {}) {
+    const commands = parseVlx(source);
+    for (const cmd of commands) await executeCommand(cmd, options);
+  }
+  // ── Auto-init: scan HTML for <?velox ... > tags ────────────────────────────
+  async function autoInit() {
+    await loadConfig();
+    await loadQuickPaths();
+    await loadVars();
+    // Read raw HTML source to find <?velox > tags
+    const html = document.documentElement.outerHTML;
+    const tags = extractVeloxTags(html);
+    for (const tag of tags) {
+      if (!tag) continue;
+      // Velox.run("path") [$target="..."]
+      const inline = parseInlineTag(tag);
+      if (inline && inline.kind === "run") {
+        const resolvedTarget = resolveTarget(inline.target);
+        evalBlocks(inline.blocks, true, resolvedTarget);
+        await runScript(inline.vlxPath, { target: resolvedTarget, type: inline.type });
+        continue;
+      }
+      // Raw .vlx syntax directly in the tag
+      // Parse out optional $target="..." at the tag level
+      const tagTargetMatch = tag.match(/\\$target\\s*=\\s*"([^"]+)"/);
+      const tagTarget = tagTargetMatch ? resolveTarget(tagTargetMatch[1]) : null;
+      await runInline(tag, { target: tagTarget });
+    }
+  }
+  // ── Boot ───────────────────────────────────────────────────────────────────
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", autoInit);
+  } else {
+    autoInit();
+  }
+  // ── Public API ─────────────────────────────────────────────────────────────
+  return {
+    run:       runScript,
+    runInline,
+    var:       (key) => _vars[key] ?? null,
+    navigate:  routerNavigate,
+  };
+})();
+`,
+};