novac 2.2.0 → 2.2.2

package/novac/kits/kitnovacweb/nvml/renderer.js

@@ -1,924 +0,0 @@
-'use strict';
-
-/**
- * NVML Renderer v2
- *
- * Converts a NvmlDocument into a complete HTML string.
- *
- * New in v2:
- *   - Reactive signal system: @state → window.__nvml.signals, auto-updates DOM
- *   - Computed signals: @computed → derived values that update when deps change
- *   - Effects: @effect → run Nova code server-side or JS client-side on signal change
- *   - One-way bindings (->): element prop mirrors signal value
- *   - Two-way bindings (<->): element input/value synced both directions with signal
- *   - Conditional rendering (?): element hidden/shown based on signal truthiness (reactive)
- *   - @each blocks: reactive list rendering with keyed diffing
- *   - CSS transitions (~): data-nvml-transition attr + auto-generated transition CSS
- *   - @component: inline component definitions compiled to reusable template functions
- *   - @route: client-side router with history API
- *   - @slot: named slot content filling
- *   - Virtual DOM diffing: patch() function for efficient DOM updates
- *   - Server-sent events: /_nvml/sse endpoint for server-push signal updates
- *   - Scoped CSS: [..]::ss generates properly-scoped style blocks
- *   - Full document API mutations baked server-side
- *   - nodejs scripts: {script}[language='nodejs'] runs server-side in Node.js VM
- *   - @lang: user-defined language extensions (server Nova/Node.js, or client JS)
- *   - bf: Brainfuck runtime available in every language scope
- */
-
-const { makeBfObject } = require('./executor');
-
-const VOID_ELEMENTS = new Set([
-  'area','base','br','col','embed','hr','img','input',
-  'link','meta','param','source','track','wbr',
-]);
-
-function safeAttr(name) { return String(name).replace(/[^a-zA-Z0-9\-_:.]/g, ''); }
-function escHtml(str)    { return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
-function esc(str)        { return String(str).replace(/\\/g,'\\\\').replace(/`/g,'\\`').replace(/\$\{/g,'\\${'); }
-
-const HTML_ATTRS = new Set([
-  'id','class','style','href','src','alt','title','placeholder','type','value','name',
-  'action','method','target','rel','for','checked','disabled','readonly','required',
-  'autofocus','autocomplete','multiple','size','rows','cols','maxlength','minlength',
-  'min','max','step','pattern','tabindex','accesskey','dir','draggable','hidden',
-  'spellcheck','translate','contenteditable','width','height','loading','decoding',
-  'crossorigin','integrity','referrerpolicy','charset','media','onload','onclick',
-  'onchange','oninput','onsubmit','onkeydown','onkeyup','onkeypress','onmouseover',
-  'onmouseout','onmouseenter','onmouseleave','onfocus','onblur','ondblclick',
-  'onpointerdown','onpointerup','onpointermove','role',
-  'aria-label','aria-hidden','aria-expanded','aria-controls','aria-describedby',
-  'aria-labelledby','aria-live','aria-atomic','aria-relevant','aria-busy',
-  'aria-checked','aria-selected','aria-pressed','aria-disabled','aria-invalid',
-  'aria-required','aria-multiline','aria-multiselectable','aria-orientation',
-  'aria-valuemin','aria-valuemax','aria-valuenow','aria-valuetext','aria-setsize',
-  'aria-posinset','aria-level','aria-readonly','aria-autocomplete','aria-haspopup',
-  'aria-modal','aria-sort','aria-colcount','aria-colindex','aria-rowcount','aria-rowindex',
-  'data','form','formaction','formmethod','formnovalidate','formtarget','enctype',
-  'accept','accept-charset','list','inputmode','enterkeyhint','is','part','slot',
-  'exportparts','inert','popover','popovertarget','popovertargetaction',
-]);
-
-class Renderer {
-  constructor(options = {}) {
-    this.novaEmitter = options.novaEmitter || null;
-  }
-
-  render(doc) {
-    const config = doc.config || {};
-    const hasState    = Object.keys(doc.state || {}).length > 0;
-    const hasComputed = (doc.computed || []).length > 0;
-    const hasEffects  = (doc.effects  || []).length > 0;
-    const hasRoutes   = (doc.routes   || []).length > 0;
-
-    // ── <head> ──────────────────────────────────────────────────────
-    const head = [];
-
-    head.push(`  <meta charset="${escHtml(config.charset || 'UTF-8')}">`);
-    head.push(`  <meta name="viewport" content="${escHtml(config.viewport || 'width=device-width, initial-scale=1.0')}">`);
-    if (config.title)       head.push(`  <title>${escHtml(config.title)}</title>`);
-    if (config.description) head.push(`  <meta name="description" content="${escHtml(config.description)}">`);
-    if (config.author)      head.push(`  <meta name="author" content="${escHtml(config.author)}">`);
-    if (config.keywords) {
-      const kw = Array.isArray(config.keywords) ? config.keywords.join(', ') : config.keywords;
-      head.push(`  <meta name="keywords" content="${escHtml(kw)}">`);
-    }
-    if (config['theme-color']) head.push(`  <meta name="theme-color" content="${escHtml(config['theme-color'])}">`);
-    if (config.robots)    head.push(`  <meta name="robots" content="${escHtml(config.robots)}">`);
-    if (config.canonical) head.push(`  <link rel="canonical" href="${escHtml(config.canonical)}">`);
-    if (config.favicon)   head.push(`  <link rel="icon" href="${escHtml(config.favicon)}">`);
-    if (config.base)      head.push(`  <base href="${escHtml(config.base)}">`);
-
-    for (const k of ['og:title','og:description','og:image','og:url','og:type']) {
-      if (config[k]) head.push(`  <meta property="${escHtml(k)}" content="${escHtml(config[k])}">`);
-    }
-    for (const k of ['twitter:card','twitter:title','twitter:description','twitter:image']) {
-      if (config[k]) head.push(`  <meta name="${escHtml(k)}" content="${escHtml(config[k])}">`);
-    }
-
-    const stylesheets = config.stylesheet ? [].concat(config.stylesheet) : [];
-    for (const href of stylesheets) head.push(`  <link rel="stylesheet" href="${escHtml(href)}">`);
-
-    const scripts = config.scripts ? [].concat(config.scripts) : [];
-    for (const src of scripts) head.push(`  <script src="${escHtml(src)}"></script>`);
-
-    // @ss global styles
-    if (doc.globalStyles && doc.globalStyles.trim()) {
-      head.push(`  <style>\n${doc.globalStyles}\n  </style>`);
-    }
-
-    // Transition CSS (generated from ~ hints collected during element render)
-    this._transitionNames = new Set();
-    this._componentDefs   = doc.components || {};
-    this._slots           = doc.slots       || {};
-    this._langDefs        = doc.langs       || {};
-
-    // Render body first to collect transition names and component templates
-    this._componentTemplates = {};
-    const bodyParts = [];
-    for (const el of doc.visual) bodyParts.push(this.renderElement(el, 1, doc));
-
-    // Transition CSS
-    if (this._transitionNames.size > 0) {
-      const tCss = [...this._transitionNames].map(name => `
-  .nvml-enter-${name} { animation: nvml-enter-${name} var(--nvml-dur-${name}, 0.25s) ease both; }
-  .nvml-leave-${name} { animation: nvml-leave-${name} var(--nvml-dur-${name}, 0.25s) ease both; }
-  @keyframes nvml-enter-${name} { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: none; } }
-  @keyframes nvml-leave-${name} { from { opacity:1; transform: none; } to { opacity:0; transform: translateY(8px); } }`).join('');
-      head.push(`  <style>${tCss}\n  </style>`);
-    }
-
-    if (config.head) head.push(`  ${config.head}`);
-
-    // ── bf client runtime ────────────────────────────────────────────
-    head.push(this._renderBfRuntime());
-
-    // ── Reactive runtime ────────────────────────────────────────────
-    if (hasState || hasComputed || hasEffects || hasRoutes) {
-      head.push(this._renderRuntime(doc));
-    }
-
-    // ── <body> ──────────────────────────────────────────────────────
-    const lang      = config.lang || 'en';
-    const bodyClass = config.bodyClass ? ` class="${escHtml(config.bodyClass)}"` : '';
-    const bodyId    = config.bodyId    ? ` id="${escHtml(config.bodyId)}"` : '';
-    const bodyStyle = config.bodyStyle ? ` style="${escHtml(config.bodyStyle)}"` : '';
-
-    return [
-      '<!DOCTYPE html>',
-      `<html lang="${escHtml(lang)}">`,
-      '<head>',
-      head.join('\n'),
-      '</head>',
-      `<body${bodyClass}${bodyId}${bodyStyle}>`,
-      bodyParts.join('\n'),
-      hasRoutes ? this._renderRoutingScript(doc) : '',
-      '</body>',
-      '</html>',
-    ].join('\n');
-  }
-
-  // ── Reactive runtime script ──────────────────────────────────────
-
-  _renderRuntime(doc) {
-    const stateJson    = JSON.stringify(doc.state || {});
-    const computedJson = JSON.stringify((doc.computed || []).map(c => ({ name: c.name, initial: c.initialValue })));
-    const effectsJson  = JSON.stringify((doc.effects || []).map(e => ({ deps: e.deps, code: e.code })));
-
-    return `  <script>
-// ── NVML Reactive Runtime ─────────────────────────────────────────────
-(function(){
-'use strict';
-
-// ── Signal store ──────────────────────────────────────────────────────
-const _state    = ${stateJson};
-const _computed = ${computedJson};
-const _effects  = ${effectsJson};
-const _subs     = {};   // signal → Set of subscriber functions
-const _bindings = [];   // { el, prop, signal, twoWay }
-const _conds    = [];   // { el, signal, display }
-const _eaches   = [];   // { container, signal, template, itemVar }
-
-function _get(name) { return _state[name]; }
-
-function _set(name, value, silent) {
-  if (_state[name] === value && typeof value !== 'object') return;
-  _state[name] = value;
-  if (!silent) _notify(name);
-}
-
-function _notify(name) {
-  (_subs[name] || []).forEach(fn => { try { fn(_state[name]); } catch(e) { console.error('[nvml signal]', name, e); } });
-  // recompute computed signals that depend on this one
-  _computed.forEach(c => {
-    if (c._deps && c._deps.includes(name)) {
-      // server computes these; client re-fetches via /_nvml/compute if needed
-      _notifyComputed(c.name);
-    }
-  });
-  // run effects that depend on this signal
-  _effects.forEach(e => {
-    if (e.deps.includes('*') || e.deps.includes(name)) _runEffect(e);
-  });
-}
-
-function _notifyComputed(name) {
-  (_subs[name] || []).forEach(fn => { try { fn(_state[name]); } catch(e) {} });
-}
-
-function _subscribe(name, fn) {
-  if (!_subs[name]) _subs[name] = new Set();
-  _subs[name].add(fn);
-  return () => _subs[name].delete(fn);
-}
-
-// ── Effects ────────────────────────────────────────────────────────────
-function _runEffect(effect) {
-  if (!effect.code || !effect.code.trim()) return;
-  // Effects with Nova code run via /_nvml/run server round-trip
-  fetch('/_nvml/run', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ code: effect.code, live: _liveSnapshot(), state: _state })
-  }).then(r => r.json()).then(({ mutations, error }) => {
-    if (error) { console.error('[nvml effect]', error); return; }
-    _applyMutations(mutations || []);
-  }).catch(e => console.error('[nvml effect fetch]', e));
-}
-
-// ── DOM patch / diff ────────────────────────────────────────────────────
-function _applyMutations(mutations) {
-  for (const m of mutations) {
-    const el = m.id ? document.getElementById(m.id) : null;
-    switch (m.type) {
-      case 'setText':      if (el) el.textContent = m.value; break;
-      case 'setHTML':      if (el) _patchHTML(el, m.value); break;
-      case 'setProp':      if (el) el.setAttribute(m.key, m.value); break;
-      case 'removeClass':  if (el) el.classList.remove(m.value); break;
-      case 'addClass':     if (el) el.classList.add(m.value); break;
-      case 'toggleClass':  if (el) el.classList.toggle(m.value, m.force); break;
-      case 'setClass':     if (el) el.className = m.value; break;
-      case 'hide':         if (el) _transitionOut(el, m.transition); break;
-      case 'show':         if (el) _transitionIn(el, m.value || 'block', m.transition); break;
-      case 'remove':       if (el) { _transitionOut(el, m.transition, () => el.remove()); } break;
-      case 'insertBefore': if (el) { const n = _createEl(m.html); el.parentNode.insertBefore(n, el); } break;
-      case 'insertAfter':  if (el) { const n = _createEl(m.html); el.parentNode.insertBefore(n, el.nextSibling); } break;
-      case 'appendChild':  if (el) { el.appendChild(_createEl(m.html)); } break;
-      case 'setStyle':     if (el) { el.style[m.key] = m.value; } break;
-      case 'setCSSVar':    document.documentElement.style.setProperty(m.name, m.value); break;
-      case 'addStyle':     { const s = document.createElement('style'); s.textContent = m.value; document.head.appendChild(s); } break;
-      case 'setAttr':      if (el) el.setAttribute(m.key, m.value); break;
-      case 'removeAttr':   if (el) el.removeAttribute(m.key); break;
-      case 'focus':        if (el) el.focus(); break;
-      case 'blur':         if (el) el.blur(); break;
-      case 'scroll':       if (el) el.scrollIntoView({ behavior: m.behavior || 'smooth' }); break;
-      case 'setSignal':    _set(m.name, m.value); break;
-      case 'navigate':     _nvmlNavigate(m.path); break;
-      case 'reload':       location.reload(); break;
-      case 'redirect':     location.href = m.url; break;
-      case 'alert':        alert(m.value); break;
-      case 'console':      console[m.level || 'log'](m.value); break;
-      case 'setConfig':    if (m.key === 'title') document.title = m.value; break;
-      case 'toast':        _nvmlToast(m.value, m.duration, m.type); break;
-      case 'patchList':    _patchList(m.id, m.items, m.template, m.key); break;
-    }
-  }
-}
-
-// ── Virtual DOM patch for innerHTML ────────────────────────────────────
-function _patchHTML(container, newHTML) {
-  const tmp = document.createElement('div');
-  tmp.innerHTML = newHTML;
-  _diffChildren(container, tmp);
-}
-
-function _diffChildren(parent, newParent) {
-  const oldChildren = Array.from(parent.childNodes);
-  const newChildren = Array.from(newParent.childNodes);
-  const max = Math.max(oldChildren.length, newChildren.length);
-  for (let i = 0; i < max; i++) {
-    const oldC = oldChildren[i], newC = newChildren[i];
-    if (!oldC && newC) { parent.appendChild(newC.cloneNode(true)); }
-    else if (oldC && !newC) { parent.removeChild(oldC); }
-    else if (oldC.nodeType !== newC.nodeType || oldC.nodeName !== newC.nodeName) {
-      parent.replaceChild(newC.cloneNode(true), oldC);
-    } else if (oldC.nodeType === Node.TEXT_NODE) {
-      if (oldC.textContent !== newC.textContent) oldC.textContent = newC.textContent;
-    } else if (oldC.nodeType === Node.ELEMENT_NODE) {
-      _diffAttrs(oldC, newC);
-      _diffChildren(oldC, newC);
-    }
-  }
-}
-
-function _diffAttrs(oldEl, newEl) {
-  for (const attr of Array.from(newEl.attributes)) {
-    if (oldEl.getAttribute(attr.name) !== attr.value) oldEl.setAttribute(attr.name, attr.value);
-  }
-  for (const attr of Array.from(oldEl.attributes)) {
-    if (!newEl.hasAttribute(attr.name)) oldEl.removeAttribute(attr.name);
-  }
-}
-
-// ── Keyed list patch ────────────────────────────────────────────────────
-function _patchList(containerId, items, templateFn, keyField) {
-  const container = document.getElementById(containerId);
-  if (!container) return;
-  const existing = {};
-  Array.from(container.children).forEach(c => { const k = c.dataset.nvmlKey; if (k) existing[k] = c; });
-  const seen = new Set();
-  items.forEach((item, i) => {
-    const key = keyField ? String(item[keyField]) : String(i);
-    seen.add(key);
-    if (existing[key]) {
-      // update existing — diff attrs
-      const tmp = document.createElement('div');
-      tmp.innerHTML = (typeof templateFn === 'function' ? templateFn(item, i) : templateFn.replace(/\{\{item\}\}/g, item));
-      const newChild = tmp.firstElementChild;
-      if (newChild) { _diffAttrs(existing[key], newChild); _diffChildren(existing[key], newChild); }
-    } else {
-      // insert new
-      const tmp = document.createElement('div');
-      tmp.innerHTML = (typeof templateFn === 'function' ? templateFn(item, i) : templateFn.replace(/\{\{item\}\}/g, item));
-      const newChild = tmp.firstElementChild;
-      if (newChild) { newChild.dataset.nvmlKey = key; container.appendChild(newChild); }
-    }
-  });
-  // remove stale
-  Object.keys(existing).forEach(k => { if (!seen.has(k)) _transitionOut(existing[k], null, () => existing[k].remove()); });
-}
-
-// ── Transitions ─────────────────────────────────────────────────────────
-function _transitionIn(el, display, transName) {
-  el.style.display = display || 'block';
-  if (transName) { el.classList.add('nvml-enter-' + transName); el.addEventListener('animationend', () => el.classList.remove('nvml-enter-' + transName), { once: true }); }
-}
-
-function _transitionOut(el, transName, done) {
-  if (transName) {
-    el.classList.add('nvml-leave-' + transName);
-    el.addEventListener('animationend', () => { el.style.display = 'none'; el.classList.remove('nvml-leave-' + transName); if (done) done(); }, { once: true });
-  } else { el.style.display = 'none'; if (done) done(); }
-}
-
-function _createEl(html) { const d = document.createElement('div'); d.innerHTML = html; return d.firstElementChild || d; }
-
-// ── Toast ───────────────────────────────────────────────────────────────
-function _nvmlToast(msg, duration, type) {
-  const t = document.createElement('div');
-  t.textContent = msg;
-  t.style.cssText = 'position:fixed;bottom:1.5rem;right:1.5rem;background:'+(type==='error'?'#e53e3e':type==='success'?'#38a169':'#2d3748')+';color:#fff;padding:0.65rem 1.2rem;border-radius:6px;font-size:0.9rem;z-index:9999;box-shadow:0 4px 12px #0004;animation:nvml-enter-toast 0.2s ease both';
-  document.body.appendChild(t);
-  setTimeout(() => { t.style.animation = 'nvml-leave-toast 0.2s ease both'; t.addEventListener('animationend', () => t.remove(), { once: true }); }, duration || 3000);
-}
-
-// ── Signal bindings (one-way: -> and two-way: <->) ──────────────────────
-function _initBindings() {
-  document.querySelectorAll('[data-nvml-bind]').forEach(el => {
-    const binding = el.dataset.nvmlBind; // "prop:signal" or "prop:signal:2way"
-    binding.split(';').forEach(b => {
-      const parts  = b.split(':');
-      const prop   = parts[0], signal = parts[1], twoWay = parts[2] === '2way';
-      // apply initial value
-      _applyBinding(el, prop, _get(signal));
-      // subscribe to signal changes
-      _subscribe(signal, val => _applyBinding(el, prop, val));
-      // two-way: listen for input/change and push back to signal
-      if (twoWay) {
-        const evName = (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.tagName === 'SELECT') ? 'input' : 'change';
-        el.addEventListener(evName, () => _set(signal, el.type === 'checkbox' ? el.checked : el.value));
-      }
-    });
-  });
-}
-
-function _applyBinding(el, prop, val) {
-  if      (prop === 'text')        el.textContent = val ?? '';
-  else if (prop === 'html')        _patchHTML(el, String(val ?? ''));
-  else if (prop === 'value')       el.value = val ?? '';
-  else if (prop === 'checked')     el.checked = !!val;
-  else if (prop === 'class')       el.className = val ?? '';
-  else if (prop === 'style')       el.style.cssText = val ?? '';
-  else if (prop === 'href')        el.href = val ?? '';
-  else if (prop === 'src')         el.src  = val ?? '';
-  else if (prop === 'disabled')    el.disabled = !!val;
-  else if (prop === 'hidden')      { if (val) el.style.display = 'none'; else el.style.display = ''; }
-  else if (prop === 'placeholder') el.placeholder = val ?? '';
-  else                             el.setAttribute(prop, val ?? '');
-}
-
-// ── Conditional renders ─────────────────────────────────────────────────
-function _initConditionals() {
-  document.querySelectorAll('[data-nvml-if]').forEach(el => {
-    const signal  = el.dataset.nvmlIf;
-    const display = el.dataset.nvmlDisplay || 'block';
-    const trans   = el.dataset.nvmlTransition || null;
-    const apply   = val => val ? _transitionIn(el, display, trans) : _transitionOut(el, trans);
-    apply(_get(signal));
-    _subscribe(signal, apply);
-  });
-}
-
-// ── @each reactive lists ─────────────────────────────────────────────────
-function _initEach() {
-  document.querySelectorAll('[data-nvml-each]').forEach(container => {
-    const signal   = container.dataset.nvmlEach;
-    const template = container.dataset.nvmlTemplate || '';
-    const key      = container.dataset.nvmlKey      || null;
-    const render   = items => _patchList(container.id, Array.isArray(items) ? items : [], template, key);
-    render(_get(signal) || []);
-    _subscribe(signal, render);
-  });
-}
-
-// ── Server-Sent Events for server-push signal updates ───────────────────
-function _initSSE() {
-  if (!window.EventSource) return;
-  const es = new EventSource('/_nvml/sse');
-  es.addEventListener('signal', e => {
-    try { const { name, value } = JSON.parse(e.data); _set(name, value); } catch(_) {}
-  });
-  es.addEventListener('mutations', e => {
-    try { _applyMutations(JSON.parse(e.data)); } catch(_) {}
-  });
-  es.onerror = () => { es.close(); setTimeout(_initSSE, 3000); }; // reconnect
-}
-
-// ── Live snapshot ────────────────────────────────────────────────────────
-function _liveSnapshot() {
-  const elements = {};
-  document.querySelectorAll('[id]').forEach(e => {
-    elements[e.id] = { text: e.textContent, value: e.value ?? null, class: e.className };
-  });
-  return { title: document.title, url: location.href, query: Object.fromEntries(new URLSearchParams(location.search)), elements, state: _state };
-}
-
-// ── Triggered server script handler ─────────────────────────────────────
-window.__nvmlRun = function(code) {
-  return fetch('/_nvml/run', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ code, live: _liveSnapshot() })
-  }).then(r => r.json()).then(({ mutations, error }) => {
-    if (error) { console.error('[nvml]', error); return; }
-    _applyMutations(mutations || []);
-  }).catch(e => console.error('[nvml fetch]', e));
-};
-
-// ── Expose signal API ────────────────────────────────────────────────────
-window.__nvml = {
-  get: _get, set: _set, subscribe: _subscribe,
-  state: _state, notify: _notify,
-  applyMutations: _applyMutations,
-};
-
-// ── Computed: set initial values ─────────────────────────────────────────
-_computed.forEach(c => { if (c.initial !== null && c.initial !== undefined) _state[c.name] = c.initial; });
-
-// ── Boot ─────────────────────────────────────────────────────────────────
-document.addEventListener('DOMContentLoaded', function() {
-  _initBindings();
-  _initConditionals();
-  _initEach();
-  _initSSE();
-  // run wildcard effects on load
-  _effects.forEach(e => { if (e.deps.includes('*')) _runEffect(e); });
-});
-
-})();
-</script>`;
-  }
-
-  // ── bf client runtime ────────────────────────────────────────────
-  // A compact Brainfuck runtime exposed as window.__nvml_bf on every page.
-  // Also provides window.__nvmlRunNode() for triggered nodejs scripts.
-
-  _renderBfRuntime() {
-    return `  <script>
-// ── NVML bf (Brainfuck) Runtime ───────────────────────────────────────
-(function(){
-'use strict';
-const TAPE = 30000;
-function _makeBf() {
-  let tape = new Uint8Array(TAPE), ptr = 0, output = '', input = '', inPtr = 0;
-  const obj = {
-    get tape()    { return tape; },
-    get pointer() { return ptr; },
-    get output()  { return output; },
-    get input()   { return input; },
-    set input(v)  { input = String(v); inPtr = 0; },
-    cell(n, v)    { const i = n === undefined ? ptr : +n; if (v !== undefined) tape[i] = +v & 0xFF; return tape[i]; },
-    reset()       { tape = new Uint8Array(TAPE); ptr = 0; output = ''; input = ''; inPtr = 0; return obj; },
-    run(code, inp) {
-      if (inp !== undefined) { input = String(inp); inPtr = 0; }
-      const src = String(code).split('').filter(c => '><+-.,[]'.includes(c));
-      const bk = {};
-      const stk = [];
-      for (let i = 0; i < src.length; i++) {
-        if (src[i] === '[') stk.push(i);
-        else if (src[i] === ']') { const o = stk.pop(); bk[o] = i; bk[i] = o; }
-      }
-      let ip = 0, ops = 0;
-      while (ip < src.length) {
-        if (++ops > 10000000) throw new Error('[bf] max ops exceeded');
-        switch (src[ip]) {
-          case '>': ptr = (ptr+1) % TAPE; break;
-          case '<': ptr = (ptr-1+TAPE) % TAPE; break;
-          case '+': tape[ptr] = (tape[ptr]+1) & 0xFF; break;
-          case '-': tape[ptr] = (tape[ptr]-1+256) & 0xFF; break;
-          case '.': output += String.fromCharCode(tape[ptr]); break;
-          case ',': tape[ptr] = inPtr < input.length ? input.charCodeAt(inPtr++) & 0xFF : 0; break;
-          case '[': if (!tape[ptr]) ip = bk[ip]; break;
-          case ']': if (tape[ptr]) ip = bk[ip]; break;
-        }
-        ip++;
-      }
-      return output;
-    },
-  };
-  return obj;
-}
-window.__nvml_bf_make = _makeBf;
-window.__nvml_bf = _makeBf();
-
-// ── __nvmlRunNode — triggered nodejs server script runner ────────────
-window.__nvmlRunNode = function(code) {
-  return fetch('/_nvml/run-node', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ code, live: window.__nvml ? { state: window.__nvml.state } : {} })
-  }).then(r => r.json()).then(({ mutations, error }) => {
-    if (error) { console.error('[nvml nodejs]', error); return; }
-    if (window.__nvml) window.__nvml.applyMutations(mutations || []);
-  }).catch(e => console.error('[nvml nodejs fetch]', e));
-};
-})();
-</script>`;
-  }
-
-  // ── Client-side router script ────────────────────────────────────
-
-  _renderRoutingScript(doc) {
-    const routes = (doc.routes || []).map(r => ({
-      path:    typeof r.path === 'object' ? (r.path.value || r.path) : r.path,
-      html:    r.body.map(n => this.renderElement(this._bodyToEl(n), 1, doc)).join(''),
-    }));
-    const routesJson = JSON.stringify(routes);
-    return `<script>
-// ── NVML Client Router ────────────────────────────────────────────────
-(function(){
-const _routes = ${routesJson};
-const _outlet = document.getElementById('nvml-router-outlet') || document.body;
-
-function _match(path) {
-  for (const r of _routes) {
-    const pattern = new RegExp('^' + r.path.replace(/:([^/]+)/g, '([^/]+)') + '$');
-    const m = path.match(pattern);
-    if (m) {
-      const keys = [...r.path.matchAll(/:([^/]+)/g)].map(x => x[1]);
-      const params = {};
-      keys.forEach((k, i) => { params[k] = m[i + 1]; });
-      return { route: r, params };
-    }
-  }
-  return null;
-}
-
-function _nvmlNavigate(path) {
-  window.history.pushState({}, '', path);
-  _render(path);
-}
-window._nvmlNavigate = _nvmlNavigate;
-
-function _render(path) {
-  const found = _match(path);
-  if (!found) return;
-  if (window.__nvml) {
-    // inject route params as signals
-    Object.entries(found.params).forEach(([k, v]) => window.__nvml.set(k, v));
-  }
-  _outlet.innerHTML = found.route.html;
-}
-
-window.addEventListener('popstate', () => _render(location.pathname));
-document.addEventListener('click', e => {
-  const a = e.target.closest('[data-nvml-link]');
-  if (a) { e.preventDefault(); _nvmlNavigate(a.dataset.nvmlLink || a.getAttribute('href')); }
-});
-
-document.addEventListener('DOMContentLoaded', () => _render(location.pathname));
-})();
-</script>`;
-  }
-
-  _bodyToEl(node) {
-    // Dummy wrapper for route body nodes that need rendering
-    if (!node) return null;
-    return node;
-  }
-
-  // ── Element → HTML ───────────────────────────────────────────────
-
-  renderElement(el, depth, doc) {
-    if (!el) return '';
-    const ind = '  '.repeat(depth);
-
-    // slot outlet
-    if (el.isSlotOutlet) return this._renderSlotOutlet(el, depth, doc);
-
-    // each block
-    if (el.tag === 'each-block') return this._renderEachBlock(el, ind, doc);
-
-    // script
-    if (el.tag === 'script') return this._renderScript(el, ind);
-
-    // component placeholder (external)
-    if (el.props && el.props['data-component'] && !el.children.length && !el.textValue) {
-      return this._renderComponentPlaceholder(el, ind);
-    }
-
-    let tag = el.tag;
-    if (!tag || tag === '..') return '';
-    const isVoid = VOID_ELEMENTS.has(tag);
-
-    // build attrs
-    const attrs = this._buildAttrs(el, doc);
-
-    // conditional render: data-nvml-if
-    if (el.cond) {
-      attrs['data-nvml-if']      = el.cond;
-      attrs['data-nvml-display'] = el.props.style?.includes('inline') ? 'inline' : 'block';
-    }
-
-    // bindings: data-nvml-bind="prop:signal;prop2:signal2:2way"
-    if (el.bindings && el.bindings.length > 0) {
-      attrs['data-nvml-bind'] = el.bindings.map(b => `${b.prop}:${b.signal}${b.twoWay ? ':2way' : ''}`).join(';');
-    }
-
-    // transitions
-    if (el.transitions && el.transitions.length > 0) {
-      el.transitions.forEach(t => {
-        this._transitionNames.add(t.name);
-        attrs['data-nvml-transition'] = t.name;
-      });
-    }
-
-    // signal text (inline signal ref → data-nvml-bind="text:signal")
-    if (el._signalText) {
-      const existing = attrs['data-nvml-bind'] || '';
-      attrs['data-nvml-bind'] = (existing ? existing + ';' : '') + `text:${el._signalText}`;
-    }
-
-    const attrStr = this._attrsToString(attrs);
-    const openTag = `<${tag}${attrStr}>`;
-
-    // scoped style block
-    const scopedStyleBlock = el.ss && el.ss.trim() ? ind + this._scopedStyle(el) + '\n' : '';
-
-    if (isVoid) return scopedStyleBlock + ind + openTag;
-
-    const childLines = [];
-
-    if (el._rawHTML) {
-      childLines.push(ind + '  ' + el._rawHTML);
-    } else if (el.textValue !== null && el.textValue !== undefined) {
-      // check for signal reference in text value
-      const tv = String(el.textValue);
-      if (tv.startsWith('__sig:')) {
-        // bind text to signal — leave text empty; runtime fills in
-        attrs['data-nvml-bind'] = (attrs['data-nvml-bind'] ? attrs['data-nvml-bind'] + ';' : '') + `text:${tv.slice(6)}`;
-      } else {
-        childLines.push(ind + '  ' + escHtml(tv));
-      }
-    }
-
-    for (const child of (el.children || [])) {
-      childLines.push(this.renderElement(child, depth + 1, doc));
-    }
-
-    const inner    = childLines.length ? '\n' + childLines.filter(Boolean).join('\n') + '\n' + ind : '';
-    const closeTag = `</${tag}>`;
-
-    return scopedStyleBlock + ind + openTag + inner + closeTag;
-  }
-
-  // ── @each block ──────────────────────────────────────────────────
-
-  _renderEachBlock(el, ind, doc) {
-    // Generate a template string and a container div.
-    // The reactive runtime will clone the template per item.
-    // For SSR: render with the initial state value if available.
-    const signal  = el.eachSignal;
-    const itemVar = el.eachItemVar || 'item';
-
-    // Build the per-item template as an HTML string with {{item}} placeholder
-    const templateParts = (el._eachBody || el.children || []).map(child => {
-      if (child && child.kind) {
-        // raw AST child — skip (handled at parse time)
-        return '';
-      }
-      return this.renderElement(child, 0, doc);
-    }).filter(Boolean);
-
-    const templateHTML = templateParts.join('') || `<div>{{item}}</div>`;
-    const escapedTemplate = esc(templateHTML);
-
-    return `${ind}<div id="${escHtml(el.id)}" data-nvml-each="${escHtml(signal)}" data-nvml-template=\`${escapedTemplate}\`></div>`;
-  }
-
-  // ── Slot outlet ──────────────────────────────────────────────────
-
-  _renderSlotOutlet(el, depth, doc) {
-    const slotName = el.slotName || 'default';
-    const slotEls  = (this._slots || {})[slotName] || [];
-    if (!slotEls.length) return '';
-    return slotEls.map(s => this.renderElement(s, depth, doc)).join('\n');
-  }
-
-  // ── Component placeholder (external) ─────────────────────────────
-
-  _renderComponentPlaceholder(el, ind) {
-    const name  = el.props['data-component'];
-    const attrs = this._attrsToString(this._buildAttrs(el, null));
-    return `${ind}<div${attrs}></div>`;
-  }
-
-  // ── script rendering ─────────────────────────────────────────────
-
-  _renderScript(el, ind) {
-    const scope = el._scriptScope || el.props.scope || 'client';
-    const lang  = el._scriptLang  || el.props.language || el.props.lang || 'js';
-
-    // Nova server-side: already ran, leave a comment
-    if ((lang === 'novac' || lang === 'nv') && scope === 'server') {
-      return this._renderNvFetch(el, ind);
-    }
-
-    // Node.js server-side: already ran at executor time, leave a comment
-    if ((lang === 'nodejs' || lang === 'node') && el._ranOnServer) {
-      return `${ind}<!-- nodejs server script executed at render time -->`;
-    }
-
-    // Node.js server-side with trigger: generate a fetch-based trigger wrapper
-    if ((lang === 'nodejs' || lang === 'node') && el.props.trigger) {
-      return this._renderNodejsFetch(el, ind);
-    }
-
-    // Custom lang (registered via @lang)
-    if (this._langDefs && this._langDefs[lang]) {
-      return this._renderCustomLangScript(el, ind, this._langDefs[lang]);
-    }
-
-    // Regular JS / Nova-compiled-to-JS
-    let code = el._scriptCode || el.code || el.textValue || '';
-    if ((lang === 'novac' || lang === 'nv') && scope !== 'server' && this.novaEmitter) {
-      try { code = this.novaEmitter(code); }
-      catch (e) { code = `/* Nova compilation error: ${e.message} */`; }
-    }
-
-    const extraAttrs = [];
-    if (el.props.src)   extraAttrs.push(`src="${escHtml(el.props.src)}"`);
-    if (el.props.defer) extraAttrs.push('defer');
-    if (el.props.async) extraAttrs.push('async');
-    if (el.props.type && lang !== 'novac' && lang !== 'nv') extraAttrs.push(`type="${escHtml(el.props.type)}"`);
-    const attrStr = extraAttrs.length ? ' ' + extraAttrs.join(' ') : '';
-
-    if (!code.trim() && el.props.src) return `${ind}<script${attrStr}></script>`;
-    return `${ind}<script${attrStr}>\n${code}\n${ind}</script>`;
-  }
-
-  // ── nodejs triggered server script ───────────────────────────────
-  // Sends code to /_nvml/run-node endpoint; the server runs it in Node.js VM.
-
-  _renderNodejsFetch(el, ind) {
-    const code    = (el._scriptCode || el.code || el.textValue || '').trim();
-    const trigger = el.props.trigger || null;
-    const target  = el.props.target  || null;
-    const escaped = esc(code);
-
-    const fetchCall = `window.__nvmlRunNode(\`${escaped}\`)`;
-
-    if (trigger && target) {
-      const evList   = trigger.split(',').map(t => t.trim());
-      const handlers = evList.map(ev => `_t.addEventListener('${ev}', function(_e){ ${fetchCall}; });`).join('\n    ');
-      return `${ind}<script>
-${ind}document.addEventListener('DOMContentLoaded', function() {
-${ind}  const _t = document.getElementById('${target}');
-${ind}  if (!_t) { console.error('[nvml] trigger target not found: ${target}'); return; }
-${ind}  ${handlers}
-${ind}});
-${ind}</script>`;
-    }
-
-    return `${ind}<script>(async () => { ${fetchCall}; })();</script>`;
-  }
-
-  // ── custom lang script rendering ─────────────────────────────────
-
-  _renderCustomLangScript(el, ind, langDef) {
-    if (el._ranOnServer) {
-      return `${ind}<!-- @lang ${langDef.name} (${langDef.runtimeLanguage}) script executed at render time -->`;
-    }
-
-    const code    = el._scriptCode || el.code || el.textValue || '';
-    const trigger = el.props.trigger || null;
-    const target  = el.props.target  || null;
-
-    // Server-side triggered custom lang: route through /_nvml/run (Nova) or /_nvml/run-node
-    if (langDef.scope === 'server-nova' || langDef.scope === 'server-node') {
-      const endpoint = langDef.scope === 'server-node' ? '/_nvml/run-node' : '/_nvml/run';
-      const wrapped  = langDef.code ? langDef.code + '\n' + code : code;
-      const escaped  = esc(wrapped);
-      const fetchCall = `fetch('${endpoint}', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ code: \`${escaped}\`, live: window.__nvml ? { state: window.__nvml.state } : {} }) }).then(r => r.json()).then(({ mutations }) => { if (window.__nvml) window.__nvml.applyMutations(mutations || []); })`;
-
-      if (trigger && target) {
-        const evList   = trigger.split(',').map(t => t.trim());
-        const handlers = evList.map(ev => `_t.addEventListener('${ev}', function() { ${fetchCall}; });`).join('\n    ');
-        return `${ind}<script>
-${ind}document.addEventListener('DOMContentLoaded', function() {
-${ind}  const _t = document.getElementById('${target}');
-${ind}  if (!_t) { console.error('[nvml] trigger target not found: ${target}'); return; }
-${ind}  ${handlers}
-${ind}});
-${ind}</script>`;
-      }
-      return `${ind}<script>(async () => { ${fetchCall}; })();</script>`;
-    }
-
-    // Client-scope custom lang: embed implementation + user code + bf runtime
-    const implCode = langDef.code || '';
-    const userCode = code;
-    return `${ind}<script>
-${ind}// @lang ${langDef.name} — client runtime
-${ind}(function() {
-${ind}  var bf = window.__nvml_bf || window.__nvml_bf_make();
-${implCode ? implCode + '\n' : ''}${userCode}
-${ind}})();
-${ind}</script>`;
-  }
-
-  // ── Triggered / IIFE nv server script ────────────────────────────
-
-  _renderNvFetch(el, ind) {
-    if (el._ranOnServer) return `${ind}<!-- nv server script executed at render time -->`;
-
-    const code    = (el._scriptCode || el.code || el.textValue || '').trim();
-    const trigger = el.props.trigger || null;
-    const target  = el.props.target  || null;
-    const escaped = esc(code);
-
-    const fetchCall = `window.__nvmlRun(\`${escaped}\`)`;
-
-    if (trigger && target) {
-      const evList   = trigger.split(',').map(t => t.trim());
-      const handlers = evList.map(ev => `_t.addEventListener('${ev}', function(_e){ ${fetchCall}; });`).join('\n    ');
-      return `${ind}<script>
-${ind}document.addEventListener('DOMContentLoaded', function() {
-${ind}  const _t = document.getElementById('${target}');
-${ind}  if (!_t) { console.error('[nvml] trigger target not found: ${target}'); return; }
-${ind}  ${handlers}
-${ind}});
-${ind}</script>`;
-    }
-
-    return `${ind}<script>(async () => { ${fetchCall}; })();</script>`;
-  }
-
-  // ── Attributes ───────────────────────────────────────────────────
-
-  _buildAttrs(el, doc) {
-    const attrs = {};
-
-    for (const [key, val] of Object.entries(el.props || {})) {
-      if (el.tag === 'script' && ['language','lang','scope','code','ss','trigger','target'].includes(key)) continue;
-      if (val === true)  attrs[safeAttr(key)] = true;
-      else if (val === false || val === null || val === undefined) continue;
-      else {
-        // check for signal ref value (prefixed __sig: by executor)
-        if (typeof val === 'string' && val.startsWith('__sig:')) {
-          const sigName = val.slice(6);
-          const existing = attrs['data-nvml-bind'] || '';
-          attrs['data-nvml-bind'] = (existing ? existing + ';' : '') + `${key}:${sigName}`;
-        } else {
-          attrs[safeAttr(key)] = val;
-        }
-      }
-    }
-
-    for (const [key, val] of Object.entries(el.extraProps || {})) {
-      if (typeof val === 'string' || typeof val === 'number') {
-        attrs[HTML_ATTRS.has(key) ? key : `data-${safeAttr(key)}`] = val;
-      }
-    }
-
-    if (el.ss && el.ss.trim()) attrs['data-nvml-id'] = el.id;
-
-    return attrs;
-  }
-
-  _attrsToString(attrs) {
-    const parts = [];
-    for (const [k, v] of Object.entries(attrs)) {
-      if (v === true) parts.push(k);
-      else parts.push(`${k}="${escHtml(String(v))}"`);
-    }
-    return parts.length ? ' ' + parts.join(' ') : '';
-  }
-
-  // ── Scoped style ─────────────────────────────────────────────────
-
-  _scopedStyle(el) {
-    const selector = el.props.id ? `#${el.props.id}` : `[data-nvml-id="${el.id}"]`;
-    const raw = el.ss.trim();
-    let css;
-    if (raw.includes('{')) {
-      css = raw;
-    } else {
-      const decls = raw.split('\n').map(l => '  ' + l.trim()).filter(l => l.trim()).join('\n');
-      css = `${selector} {\n${decls}\n}`;
-    }
-    return `<style>\n${css}\n</style>`;
-  }
-}
-
-module.exports = { Renderer };