tutuca 0.9.93 → 0.9.95

package/dist/tutuca-dev.ext.js

@@ -5800,1386 +5800,1549 @@ class LintParseContext extends ParseContext {
   }
 }
 
-// tools/core/results.js
-class ModuleInfo {
-  constructor({ path = null, present = new Set, counts = {}, warnings = [] }) {
-    this.path = path;
-    this.present = present;
-    this.counts = counts;
-    this.warnings = warnings;
-  }
-}
-
-class ComponentSummary {
-  constructor({ name, views, fields }) {
-    this.name = name;
-    this.views = views;
-    this.fields = fields;
-  }
-}
-
-class ComponentList {
-  constructor({ items, total = null, truncated = false }) {
-    this.items = items;
-    this.total = total ?? items.length;
-    this.truncated = truncated;
+// src/components.js
+class Components {
+  constructor() {
+    this.getComponentSymbol = Symbol("getComponent");
+    this.byId = new Map;
   }
-}
-
-class ExampleIndex {
-  constructor({ sections, total = null, truncated = false }) {
-    this.sections = sections;
-    this.total = total ?? sections.reduce((n, s) => n + (s.items?.length ?? 0), 0);
-    this.truncated = truncated;
+  registerComponent(comp) {
+    comp.Class.prototype[this.getComponentSymbol] = () => comp;
+    this.byId.set(comp.id, comp);
   }
-}
-
-class ComponentDocs {
-  constructor({ items }) {
-    this.items = items;
+  getComponentForId(id) {
+    return this.byId.get(id) ?? null;
   }
-}
-
-class LintFinding {
-  constructor({ id, level, info, context = {}, suggestion = null }) {
-    this.id = id;
-    this.level = level;
-    this.info = info;
-    this.context = context;
-    this.suggestion = suggestion;
+  getCompFor(v) {
+    return v?.[this.getComponentSymbol]?.() ?? null;
   }
-}
-
-class LintComponentResult {
-  constructor({ componentName, findings }) {
-    this.componentName = componentName;
-    this.findings = findings;
+  getHandlerFor(v, name, key) {
+    return this.getCompFor(v)?.[key][name] ?? null;
   }
-  get errorCount() {
-    return this.findings.filter((f) => f.level === "error").length;
+  getRequestFor(v, name) {
+    return this.getCompFor(v)?.scope.lookupRequest(name) ?? null;
   }
-  get warnCount() {
-    return this.findings.filter((f) => f.level === "warn").length;
+  compileStyles() {
+    const styles = [];
+    for (const comp of this.byId.values())
+      styles.push(comp.compileStyle());
+    return styles.join(`
+`);
   }
 }
 
-class LintReport {
-  constructor({ components }) {
-    this.components = components;
-  }
-  get hasErrors() {
-    return this.components.some((c) => c.errorCount > 0);
+class ComponentStack {
+  constructor(comps = new Components, parent = null) {
+    this.comps = comps;
+    this.parent = parent;
+    this.byName = {};
+    this.reqsByName = {};
+    this.macros = {};
   }
-  get totalErrors() {
-    return this.components.reduce((n, c) => n + c.errorCount, 0);
+  enter() {
+    return new ComponentStack(this.comps, this);
   }
-  get totalWarnings() {
-    return this.components.reduce((n, c) => n + c.warnCount, 0);
+  registerComponents(comps, opts) {
+    const { aliases = {} } = opts ?? {};
+    for (let i = 0;i < comps.length; i++) {
+      const comp = comps[i];
+      comp.scope = this.enter();
+      comp.Class.scope = comp.scope;
+      this.comps.registerComponent(comp);
+      this.byName[comp.name] = comp;
+    }
+    for (const alias in aliases) {
+      const comp = this.byName[aliases[alias]];
+      console.assert(this.byName[alias] === undefined, "alias overrides component", alias);
+      if (comp !== undefined)
+        this.byName[alias] = comp;
+      else
+        console.warn("alias", alias, "to inexistent component", aliases[alias]);
+    }
   }
-}
-
-class RenderedExample {
-  constructor({ title, description = null, componentName, view, html, error = null }) {
-    this.title = title;
-    this.description = description;
-    this.componentName = componentName;
-    this.view = view;
-    this.html = html;
-    this.error = error;
+  registerMacros(macros) {
+    for (const key in macros) {
+      const lower = key.toLowerCase();
+      console.assert(this.macros[lower] === undefined, "macro key collision", lower);
+      this.macros[lower] = macros[key];
+    }
   }
-}
-
-class RenderedSection {
-  constructor({ title, description = null, items }) {
-    this.title = title;
-    this.description = description;
-    this.items = items;
+  getCompFor(v) {
+    return this.comps.getCompFor(v);
   }
-}
-
-class RenderBatch {
-  constructor({ sections }) {
-    this.sections = sections;
+  registerRequestHandlers(handlers) {
+    for (const name in handlers)
+      this.reqsByName[name] = new RequestHandler(name, handlers[name]);
   }
-  get hasErrors() {
-    return this.sections.some((s) => s.items.some((i) => i.error !== null));
+  lookupRequest(name) {
+    return this.reqsByName[name] ?? this.parent?.lookupRequest(name) ?? null;
   }
-}
-
-class TestResult {
-  constructor({ title, fullPath, componentName = null, status, durationMs = 0, error = null }) {
-    this.title = title;
-    this.fullPath = fullPath;
-    this.componentName = componentName;
-    this.status = status;
-    this.durationMs = durationMs;
-    this.error = error;
+  lookupComponent(name) {
+    return this.byName[name] ?? this.parent?.lookupComponent(name) ?? null;
   }
-}
-
-class DescribeResult {
-  constructor({ title, componentName = null, children = [] }) {
-    this.title = title;
-    this.componentName = componentName;
-    this.children = children;
+  lookupMacro(name) {
+    return this.macros[name] ?? this.parent?.lookupMacro(name) ?? null;
   }
 }
 
-class ModuleTestReport {
-  constructor({ path = null, suites = [], counts = { pass: 0, fail: 0, skip: 0, total: 0 } }) {
-    this.path = path;
-    this.suites = suites;
-    this.counts = counts;
+class ProvideInfo {
+  constructor(name, val, symbol) {
+    this.name = name;
+    this.val = val;
+    this.symbol = symbol;
   }
 }
 
-class TestReport {
-  constructor({ modules = [] }) {
-    this.modules = modules;
-  }
-  get totals() {
-    return this.modules.reduce((acc, m) => ({
-      pass: acc.pass + m.counts.pass,
-      fail: acc.fail + m.counts.fail,
-      skip: acc.skip + m.counts.skip,
-      total: acc.total + m.counts.total
-    }), { pass: 0, fail: 0, skip: 0, total: 0 });
+class LookupInfo {
+  constructor(name, compName, provideName, val) {
+    this.name = name;
+    this.compName = compName;
+    this.provideName = provideName;
+    this.val = val;
+    this._sym = undefined;
   }
-  get hasFailures() {
-    return this.modules.some((m) => m.counts.fail > 0);
+  getProducerSymbol(stack) {
+    if (this._sym === undefined)
+      this._sym = stack.lookupType(this.compName)?.provide?.[this.provideName]?.symbol ?? null;
+    return this._sym;
   }
 }
+var isString = (v) => typeof v === "string";
+var _rawSpecKeys = "name view style commonStyle globalStyle input receive bubble response alter views provide lookup fields methods statics";
+var KNOWN_SPEC_KEYS = new Set(_rawSpecKeys.split(" "));
+var _compId = 0;
 
-// tools/core/tests.js
-class Describe {
-  constructor({ title, componentName = null, parent = null }) {
-    this.title = title;
-    this.componentName = componentName;
-    this.parent = parent;
-    this.children = [];
+class Component {
+  constructor(Class, o) {
+    this.id = _compId++;
+    this.name = o.name ?? "UnkComp";
+    this.Class = Class;
+    this.views = { main: new View("main", o.view, o.style) };
+    this.commonStyle = o.commonStyle ?? "";
+    this.globalStyle = o.globalStyle ?? "";
+    this.input = o.input ?? {};
+    this.receive = o.receive ?? {};
+    this.bubble = o.bubble ?? {};
+    this.response = o.response ?? {};
+    this.alter = o.alter ?? {};
+    for (const name in o.views ?? {}) {
+      const v = o.views[name];
+      const { view, style } = isString(v) ? { view: v } : v;
+      this.views[name] = new View(name, view, style);
+    }
+    this._rawProvide = o.provide ?? {};
+    this._rawLookup = o.lookup ?? {};
+    this.provide = {};
+    this.lookup = {};
+    this.scope = null;
+    this.spec = o;
+    this.extra = {};
+    for (const key of Object.keys(o))
+      if (!KNOWN_SPEC_KEYS.has(key))
+        this.extra[key] = o[key];
   }
-}
-
-class Test {
-  constructor({ title, fn, componentName = null, parent = null }) {
-    this.title = title;
-    this.fn = fn;
-    this.componentName = componentName;
-    this.parent = parent;
+  clone() {
+    return Component.fromSpec(this.spec);
   }
-}
-
-class ModuleTests {
-  constructor({ path = null, suites = [] } = {}) {
-    this.path = path;
-    this.suites = suites;
+  compile(ParseContext2) {
+    for (const name in this.views)
+      this.views[name].compile(new ParseContext2, this.scope, this.id);
+    const ctx = this.views.main.ctx;
+    for (const key in this._rawProvide) {
+      const val = vp.parseProvide(this._rawProvide[key], ctx);
+      if (val)
+        this.provide[key] = new ProvideInfo(key, val, Symbol(key));
+    }
+    for (const key in this._rawLookup) {
+      const linfo = this._rawLookup[key];
+      const forStr = isString(linfo) ? linfo : isString(linfo?.for) ? linfo.for : null;
+      const [compName, provideName] = forStr === null ? [] : forStr.split(".");
+      if (!isString(compName) || !isString(provideName))
+        continue;
+      const defStr = isString(linfo?.default) ? linfo.default : null;
+      const val = defStr === null ? null : vp.parseField(defStr, ctx);
+      this.lookup[key] = new LookupInfo(key, compName, provideName, val);
+    }
+    for (const key in this.lookup)
+      if (this.provide[key] !== undefined)
+        console.warn("name declared in both provide and lookup", this.name, key);
+  }
+  make(args, opts) {
+    return this.Class.make(args, opts ?? { scope: this.scope });
+  }
+  getView(name) {
+    return this.views[name] ?? this.views.main;
+  }
+  getEventForId(id, name = "main") {
+    return this.getView(name).ctx.getEventForId(id);
+  }
+  getNodeForId(id, name = "main") {
+    return this.getView(name).ctx.getNodeForId(id);
+  }
+  compileStyle() {
+    const { id, commonStyle, globalStyle, views } = this;
+    const styles = commonStyle ? [`[data-cid="${id}"]{${commonStyle}}`] : [];
+    if (globalStyle !== "")
+      styles.push(globalStyle);
+    for (const name in views) {
+      const { style } = views[name];
+      if (style !== "")
+        styles.push(`[data-cid="${id}"][data-vid="${name}"]{${style}}`);
+    }
+    return styles.join(`
+`);
   }
 }
 
-class TestIndex {
-  constructor({ modules = [] } = {}) {
-    this.modules = modules;
-  }
+// src/on.js
+var OP_KINDS = ["send", "bubble", "request", "input"];
+function phaseOps(phase) {
+  const ops = [];
+  for (const type of OP_KINDS)
+    for (const a of phase[type] ?? [])
+      ops.push({ type, ...a });
+  for (const a of phase.do ?? [])
+    ops.push(a);
+  return ops;
 }
-function isComponentObject(x) {
-  return x !== null && typeof x === "object" && typeof x.name === "string" && typeof x.Class === "function";
+function resolveArgs(args, self) {
+  return typeof args === "function" ? args(self) ?? [] : args ?? [];
 }
-function resolveComponentName(arg, components) {
-  if (isComponentObject(arg))
-    return arg.name;
-  if (typeof arg === "function") {
-    for (const c of components)
-      if (c.Class === arg)
-        return c.name;
+function dispatchPhase(dispatcher, targetPath, phase, self) {
+  if (!phase)
+    return;
+  for (const op of phaseOps(phase)) {
+    const args = resolveArgs(op.args, self);
+    switch (op.type) {
+      case "send":
+        dispatcher.sendAtPath(targetPath, op.name, args, op.opts);
+        break;
+      case "bubble":
+        dispatcher.sendAtPath(targetPath, op.name, args, {
+          skipSelf: true,
+          bubbles: true,
+          ...op.opts
+        });
+        break;
+      case "request":
+        dispatcher.requestAtPath(targetPath, op.name, args, op.opts);
+        break;
+      case "input":
+        dispatcher.inputAtPath(targetPath, op.name, args, op.opts);
+        break;
+    }
   }
-  return null;
 }
-function titleFromArg(arg) {
-  if (typeof arg === "string")
-    return arg;
-  if (isComponentObject(arg))
-    return arg.name;
-  if (typeof arg === "function")
-    return arg.name || "(anonymous)";
-  return String(arg);
+
+// src/stack.js
+var STOP = Symbol("STOP");
+var NEXT = Symbol("NEXT");
+function lookup(chain, name, dv = null) {
+  let n = chain;
+  while (n !== null) {
+    const r = n[0].lookup(name);
+    if (r === STOP)
+      return dv;
+    if (r !== NEXT)
+      return r;
+    n = n[1];
+  }
+  return dv;
 }
-function makeCollector({ path = null, components = [] } = {}) {
-  const moduleTests = new ModuleTests({ path, suites: [] });
-  const stack = [];
-  function describe(...args) {
-    let head;
-    let options = null;
-    let fn;
-    if (args.length === 2) {
-      [head, fn] = args;
-    } else if (args.length === 3) {
-      [head, options, fn] = args;
-    } else {
-      throw new Error(`describe() expects 2 or 3 arguments, got ${args.length}`);
-    }
-    if (typeof fn !== "function") {
-      throw new Error(`describe(${JSON.stringify(titleFromArg(head))}): final argument must be a function`);
-    }
-    let componentName = null;
-    if (typeof head !== "string") {
-      componentName = resolveComponentName(head, components);
-    }
-    if (componentName === null && options && options.component != null) {
-      componentName = resolveComponentName(options.component, components);
-    }
-    if (componentName === null) {
-      const parent2 = stack.length ? stack[stack.length - 1] : null;
-      if (parent2)
-        componentName = parent2.componentName;
-    }
-    const parent = stack.length ? stack[stack.length - 1] : null;
-    const node = new Describe({
-      title: titleFromArg(head),
-      componentName,
-      parent
-    });
-    if (parent)
-      parent.children.push(node);
-    else
-      moduleTests.suites.push(node);
-    stack.push(node);
-    try {
-      fn();
-    } finally {
-      stack.pop();
-    }
+
+class BindFrame {
+  constructor(it, binds, isFrame) {
+    this.it = it;
+    this.binds = binds;
+    this.isFrame = isFrame;
   }
-  function test(title, fn) {
-    if (typeof title !== "string") {
-      throw new Error("test(title, fn): title must be a string");
-    }
-    if (typeof fn !== "function") {
-      throw new Error(`test(${JSON.stringify(title)}): fn must be a function`);
-    }
-    const parent = stack.length ? stack[stack.length - 1] : null;
-    if (!parent) {
-      throw new Error(`test(${JSON.stringify(title)}) must be called inside a describe()`);
-    }
-    parent.children.push(new Test({
-      title,
-      fn,
-      componentName: parent.componentName,
-      parent
-    }));
+  lookup(name) {
+    const v = this.binds[name];
+    return v === undefined ? this.isFrame ? STOP : NEXT : v;
   }
-  return { describe, test, moduleTests };
 }
 
-// tools/core/test.js
-function buildPath(node) {
-  const parts = [];
-  let cur = node;
-  while (cur) {
-    parts.unshift(cur.title);
-    cur = cur.parent;
+class ObjectFrame {
+  constructor(binds) {
+    this.binds = binds;
+  }
+  lookup(key) {
+    const v = this.binds[key];
+    return v === undefined ? NEXT : v;
   }
-  return parts.join(" > ");
 }
-function captureError(e) {
-  const out = { message: e.message, stack: e.stack };
-  if ("expected" in e)
-    out.expected = e.expected;
-  if ("actual" in e)
-    out.actual = e.actual;
-  return out;
+function computeViewsId(views) {
+  let s = "";
+  let n = views;
+  while (n !== null) {
+    s += n[0];
+    n = n[1];
+  }
+  return s === "main" ? "" : s;
 }
-async function runTests({
-  getTests,
-  components = [],
-  path = null,
-  expect: expect2,
-  name = null,
-  grep = null,
-  bail = false
-} = {}) {
-  const counts = { pass: 0, fail: 0, skip: 0, total: 0 };
-  if (typeof getTests !== "function") {
-    return new TestReport({
-      modules: [new ModuleTestReport({ path, suites: [], counts })]
-    });
+
+class Stack {
+  constructor(comps, it, binds, dynBinds, views, viewsId, ctx = null) {
+    this.comps = comps;
+    this.it = it;
+    this.binds = binds;
+    this.dynBinds = dynBinds;
+    this.views = views;
+    this.viewsId = viewsId;
+    this.ctx = ctx;
   }
-  if (typeof expect2 !== "function") {
-    throw new Error("runTests: expect must be provided (e.g. chai's expect)");
+  _pushProvides() {
+    const provide = this.comps.getCompFor(this.it)?.provide;
+    if (provide == null)
+      return this;
+    const dynObj = {};
+    let has = false;
+    for (const k in provide) {
+      dynObj[provide[k].symbol] = provide[k].val.eval(this);
+      has = true;
+    }
+    if (!has)
+      return this;
+    const newDynBinds = [new ObjectFrame(dynObj), this.dynBinds];
+    const { comps, it, binds, views, viewsId, ctx } = this;
+    return new Stack(comps, it, binds, newDynBinds, views, viewsId, ctx);
   }
-  const { describe, test, moduleTests } = makeCollector({ path, components });
-  await getTests({ describe, test, expect: expect2 });
-  let bailed = false;
-  async function visit(node) {
-    if (node instanceof Test) {
-      if (name !== null && node.componentName !== name)
-        return null;
-      const fullPath = buildPath(node);
-      if (grep !== null && !fullPath.includes(grep))
-        return null;
-      counts.total++;
-      if (bailed) {
-        counts.skip++;
-        return new TestResult({
-          title: node.title,
-          fullPath,
-          componentName: node.componentName,
-          status: "skip"
-        });
-      }
-      const start = performance.now();
-      try {
-        await node.fn();
-        counts.pass++;
-        return new TestResult({
-          title: node.title,
-          fullPath,
-          componentName: node.componentName,
-          status: "pass",
-          durationMs: performance.now() - start
-        });
-      } catch (e) {
-        counts.fail++;
-        if (bail)
-          bailed = true;
-        return new TestResult({
-          title: node.title,
-          fullPath,
-          componentName: node.componentName,
-          status: "fail",
-          durationMs: performance.now() - start,
-          error: captureError(e)
-        });
-      }
-    }
-    const childResults = [];
-    for (const child of node.children) {
-      const r = await visit(child);
-      if (r !== null)
-        childResults.push(r);
-    }
-    if (childResults.length === 0)
+  static root(comps, it, ctx) {
+    const binds = [new BindFrame(it, { it }, true), null];
+    const dynBinds = [new ObjectFrame({}), null];
+    const views = ["main", null];
+    return new Stack(comps, it, binds, dynBinds, views, "", ctx)._pushProvides();
+  }
+  enter(it, bindings = {}, isFrame = true) {
+    const { comps, binds, dynBinds, views, viewsId, ctx } = this;
+    const newBinds = [new BindFrame(it, bindings, isFrame), binds];
+    const stack = new Stack(comps, it, newBinds, dynBinds, views, viewsId, ctx);
+    return isFrame ? stack._pushProvides() : stack;
+  }
+  pushViewName(name) {
+    const { comps, it, binds, dynBinds, views, ctx } = this;
+    const newViews = [name, views];
+    return new Stack(comps, it, binds, dynBinds, newViews, computeViewsId(newViews), ctx);
+  }
+  _pushDynBindValuesToArray(arr, comp) {
+    for (const k in comp.provide)
+      arr.push(this._lookupProvide(comp.provide[k]));
+    for (const k in comp.lookup)
+      arr.push(this._lookupAlias(comp.lookup[k]));
+  }
+  _lookupProvide(p) {
+    return lookup(this.dynBinds, p.symbol) ?? p.val.eval(this) ?? null;
+  }
+  _lookupAlias(lk) {
+    const sym = lk.getProducerSymbol(this);
+    return (sym != null ? lookup(this.dynBinds, sym) : null) ?? lk.val?.eval(this) ?? null;
+  }
+  lookupDynamic(name) {
+    const comp = this.comps.getCompFor(this.it);
+    if (comp == null)
       return null;
-    return new DescribeResult({
-      title: node.title,
-      componentName: node.componentName,
-      children: childResults
-    });
+    const lk = comp.lookup[name];
+    if (lk !== undefined)
+      return this._lookupAlias(lk);
+    const p = comp.provide[name];
+    return p !== undefined ? this._lookupProvide(p) : null;
   }
-  const suiteResults = [];
-  for (const suite of moduleTests.suites) {
-    const r = await visit(suite);
-    if (r !== null)
-      suiteResults.push(r);
+  lookupBind(name) {
+    return lookup(this.binds, name);
   }
-  return new TestReport({
-    modules: [new ModuleTestReport({ path, suites: suiteResults, counts })]
-  });
-}
-
-// tools/core/test-console.js
-var PASS = "color: #0a0; font-weight: bold";
-var FAIL = "color: #c00; font-weight: bold";
-var SKIP = "color: #888";
-var DIM = "color: #888";
-var RESET = "color: inherit; font-weight: normal";
-function reportTestNode(node) {
-  if (node.children) {
-    const label = node.componentName ? `${node.title} [${node.componentName}]` : node.title;
-    console.group(label);
-    for (const child of node.children)
-      reportTestNode(child);
-    console.groupEnd();
-    return;
+  lookupType(name) {
+    return this.comps.getCompFor(this.it).scope.lookupComponent(name);
   }
-  const dur = node.status === "skip" ? "" : ` (${Math.round(node.durationMs)}ms)`;
-  if (node.status === "pass") {
-    console.log(`%c✓%c ${node.title}%c${dur}`, PASS, RESET, DIM);
-  } else if (node.status === "skip") {
-    console.log(`%c○ ${node.title}%c (skipped)`, SKIP, RESET);
-  } else {
-    console.group(`%c✗%c ${node.title}%c${dur}`, FAIL, RESET, DIM);
-    console.error(node.error?.message ?? "(no error message)");
-    if (node.error && (("expected" in node.error) || ("actual" in node.error))) {
-      console.log("expected:", node.error.expected);
-      console.log("actual:  ", node.error.actual);
-    }
-    if (node.error?.stack)
-      console.log(node.error.stack);
-    console.groupEnd();
+  lookupFieldRaw(name) {
+    return this.it[name] ?? null;
   }
-}
-function reportTestReportToConsole(report) {
-  for (const m of report.modules) {
-    const label = `tutuca tests${m.path ? ` — ${m.path}` : ""}`;
-    console.group(label);
-    if (m.suites.length === 0) {
-      console.log("(no tests)");
-    } else {
-      for (const s of m.suites)
-        reportTestNode(s);
+  lookupMethod(name) {
+    const fn = this.it[name];
+    return fn instanceof Function ? fn.call(this.it) : null;
+  }
+  lookupName(name) {
+    return this.ctx.lookupName(name);
+  }
+  getHandlerFor(name, key) {
+    return this.comps.getHandlerFor(this.it, name, key);
+  }
+  lookupRequest(name) {
+    return this.comps.getRequestFor(this.it, name);
+  }
+  lookupBestView(views, defaultViewName) {
+    let n = this.views;
+    while (n !== null) {
+      const view = views[n[0]];
+      if (view !== undefined)
+        return view;
+      n = n[1];
     }
-    const c = m.counts;
-    const summary = `${c.pass} passed, ${c.fail} failed, ${c.skip} skipped (${c.total} total)`;
-    if (c.fail > 0)
-      console.error(`%c${summary}`, FAIL);
-    else if (c.total === 0)
-      console.log(`%c${summary}`, DIM);
-    else
-      console.log(`%c${summary}`, PASS);
-    console.groupEnd();
+    return views[defaultViewName];
   }
-  return report;
 }
 
-// tools/format/lint.js
-var UNSUPPORTED_EXPR_LABEL = {
-  ternary: "ternary expression",
-  comparison: "comparison",
-  logical: "logical expression",
-  "call-with-args": "method call with arguments"
-};
-function unsupportedExprMessage(info) {
-  const v = JSON.stringify(info.value);
-  const label = UNSUPPORTED_EXPR_LABEL[info.detected] ?? "expression";
-  switch (info.role) {
-    case "attr":
-      return `Unsupported ${label} ${v} in dynamic attribute ':${info.attr}'`;
-    case "directive":
-      return `Unsupported ${label} ${v} in directive '@${info.directive}'`;
-    case "if":
-      return `Unsupported ${label} ${v} in '@if.${info.attr}' condition`;
-    case "x-op":
-      return `Unsupported ${label} ${v} in <x ${info.op}>`;
-    default:
-      return `Unsupported ${label} ${v}`;
+// src/transactor.js
+class State2 {
+  constructor(val) {
+    this.val = val;
+    this.changeSubs = [];
   }
-}
-function badValueMessage(info) {
-  const v = JSON.stringify(info.value);
-  switch (info.role) {
-    case "attr":
-      return `Cannot parse value ${v} for attribute ':${info.attr}'`;
-    case "directive":
-      return `Cannot parse value ${v} for directive '@${info.directive}'`;
-    case "if":
-      return `Cannot parse condition ${v} for '@if.${info.attr}'`;
-    case "x-op":
-      return `Cannot parse value ${v} for <x ${info.op}>`;
-    case "handler-name":
-      return `Cannot parse handler name ${v}`;
-    case "handler-arg":
-      return `Cannot parse handler argument ${v}`;
-    case "macro-var":
-      return `Macro variable '^${info.name}' is not defined`;
-    default:
-      return `Cannot parse value ${v}`;
+  onChange(cb) {
+    this.changeSubs.push(cb);
   }
-}
-function tagDisplay(tag) {
-  return tag ? String(tag).toLowerCase() : null;
-}
-function fmtTagSuffix(info) {
-  const t = tagDisplay(info?.tag);
-  return t && t !== "x" ? ` on <${t}>` : "";
-}
-function fmtOriginSuffix(info) {
-  if (!info)
-    return "";
-  const parts = [];
-  if (info.originAttr) {
-    const branch = info.branch ? `[${info.branch}]` : "";
-    parts.push(`in ${info.originAttr}${branch}`);
+  set(val, info) {
+    const old = this.val;
+    this.val = val;
+    for (const sub of this.changeSubs)
+      sub({ val, old, info, timestamp: Date.now() });
   }
-  if (info.handlerName) {
-    parts.push(`handler '${info.handlerName}'${info.argIndex !== undefined ? ` arg ${info.argIndex}` : ""}`);
+  update(fn, info) {
+    return this.set(fn(this.val), info);
   }
-  const t = tagDisplay(info.tag);
-  if (t && t !== "x")
-    parts.push(`on <${t}>`);
-  return parts.length ? ` (${parts.join(", ")})` : "";
-}
-function fmtEventSuffix(info) {
-  if (info?.originAttr)
-    return ` in ${info.originAttr}`;
-  if (info?.eventName)
-    return ` in @on.${info.eventName}`;
-  return "";
 }
-function lintIdToMessage(id, info) {
-  switch (id) {
-    case "RENDER_IT_OUTSIDE_OF_LOOP":
-      return "<x render-it> used outside of a loop";
-    case "UNKNOWN_EVENT_MODIFIER": {
-      const mods = info.handler?.modifiers ?? [info.modifier];
-      const written = `@on.${info.name}+${mods.join("+")}`;
-      return `Unknown modifier '+${info.modifier}' in '${written}'`;
-    }
-    case "UNKNOWN_HANDLER_ARG_NAME":
-      return `Unknown handler argument '${info.name}'${fmtOriginSuffix(info)}`;
-    case "INPUT_HANDLER_NOT_IMPLEMENTED":
-      return `Input handler '${info.name}' is not implemented${fmtEventSuffix(info)}`;
-    case "INPUT_HANDLER_NOT_REFERENCED":
-      return `Input handler '${info.name}' is defined but never used — remove it or wire it to an @on.* event`;
-    case "INPUT_HANDLER_METHOD_NOT_IMPLEMENTED":
-      return `Method '$${info.name}' is not implemented${fmtEventSuffix(info)}`;
-    case "INPUT_HANDLER_FOR_INPUT_HANDLER_METHOD":
-      return `'$${info.name}' is a method reference, but '${info.name}' is defined as an input handler${fmtEventSuffix(info)}`;
-    case "INPUT_HANDLER_METHOD_FOR_INPUT_HANDLER":
-      return `'${info.name}' is an input handler reference, but '${info.name}' is defined as a method${fmtEventSuffix(info)}`;
-    case "FIELD_VAL_NOT_DEFINED":
-      return `Field '.${info.name}' is not defined${fmtOriginSuffix(info)}`;
-    case "FIELD_VAL_IS_METHOD":
-      return `'.${info.name}' reads a field, but '${info.name}' is defined as a method — use '$${info.name}'${fmtOriginSuffix(info)}`;
-    case "METHOD_VAL_NOT_DEFINED":
-      return `Method '$${info.name}' is not defined${fmtOriginSuffix(info)}`;
-    case "METHOD_VAL_IS_FIELD":
-      return `'$${info.name}' calls a method, but '${info.name}' is defined as a field — use '.${info.name}'${fmtOriginSuffix(info)}`;
-    case "DUPLICATE_ATTR_DEFINITION": {
-      const sources = info.sources?.length ? ` (${info.sources.join(", ")})` : "";
-      const tag = info.tag ? ` on <${String(info.tag).toLowerCase()}>` : "";
-      return `Attribute '${info.name}' is set ${info.sources?.length ?? "multiple"} times${sources}${tag}`;
+
+class Transactor {
+  constructor(comps, rootValue) {
+    this.comps = comps;
+    this.transactions = [];
+    this.state = new State2(rootValue);
+    this.onTransactionPushed = () => {};
+    this._inflight = new Set;
+  }
+  pushTransaction(t) {
+    this.transactions.push(t);
+    this.onTransactionPushed(t);
+  }
+  _link(child, parent) {
+    if (parent) {
+      const release = parent.completion.track();
+      child.completion.whenSubtreeSettled().then(release);
     }
-    case "IF_NO_BRANCH_SET":
-      return `'@if.${info.attr}' has no '@then' or '@else' branch — add '@then="…"' or '@else="…"' (or both)${fmtTagSuffix(info)}`;
-    case "UNKNOWN_REQUEST_NAME":
-      return `Unknown request '!${info.name}'${fmtOriginSuffix(info)}`;
-    case "UNKNOWN_COMPONENT_NAME":
-      return `Unknown component '${info.name}'${fmtOriginSuffix(info)}`;
-    case "ALT_HANDLER_NOT_DEFINED":
-      return `Alter handler '${info.name}' is not defined${fmtOriginSuffix(info)}`;
-    case "ALT_HANDLER_NOT_REFERENCED":
-      return `Alter handler '${info.name}' is defined but never used — remove it or reference it from @when, @enrich-with, or @loop-with`;
-    case "DYN_VAL_NOT_DEFINED":
-      return `Dynamic variable '*${info.name}' is not defined${fmtOriginSuffix(info)}`;
-    case "DYN_ALIAS_NOT_REFERENCED":
-      return `Lookup '${info.name}' is defined but never used — remove it or reference it as '*${info.name}' in a view`;
-    case "PROVIDE_NOT_ADDRESSABLE":
-      return `Provide '${info.name}' value '${info.value}' must be a field ('.f') or seq-access ('.s[.k]') — a method/constant can't be a render target`;
-    case "LOOKUP_BAD_SHAPE":
-      return `Lookup '${info.name}' has an invalid shape: ${info.problem}`;
-    case "LOOKUP_TARGET_MALFORMED":
-      return `Lookup '${info.name}' target '${info.target}' must be 'Producer.provideName' (a string, or the 'for' of { for, default })`;
-    case "UNKNOWN_MACRO_ARG":
-      return `Argument '${info.name}' is not declared in macro '${info.macroName}'`;
-    case "UNKNOWN_DIRECTIVE":
-      return `Unknown directive '@${info.name}=${JSON.stringify(info.value)}'${fmtTagSuffix(info)}`;
-    case "UNKNOWN_X_OP":
-      return `Unknown <x> op '${info.name}=${JSON.stringify(info.value)}'${fmtTagSuffix(info)}`;
-    case "UNKNOWN_X_ATTR":
-      return `Unknown attribute '${info.name}=${JSON.stringify(info.value)}' on <x ${info.op}>${fmtTagSuffix(info)}`;
-    case "MAYBE_DROP_AT_PREFIX": {
-      const written = info.value !== undefined ? `${info.name}=${JSON.stringify(info.value)}` : info.name;
-      return `'${written}' on <x> looks like a directive but is actually an x op/attr written with a leading '@'`;
+    return child;
+  }
+  pushSend(path, name, args = [], opts = {}, parent = null) {
+    const t = new SendEvent(path, this, name, args, parent, opts);
+    this.pushTransaction(t);
+    return this._link(t, parent);
+  }
+  pushInput(path, name, args = [], opts = {}, parent = null) {
+    const t = new InputDispatchEvent(path, this, name, args, parent, opts);
+    this.pushTransaction(t);
+    return this._link(t, parent);
+  }
+  pushBubble(path, name, args = [], opts = {}, parent = null, targetPath = null) {
+    const newOpts = opts.skipSelf ? { ...opts, skipSelf: false } : opts;
+    const t = new BubbleEvent(path, this, name, args, parent, newOpts, targetPath);
+    this.pushTransaction(t);
+    return this._link(t, parent);
+  }
+  pushRequest(path, name, args = [], opts = {}, parent = null) {
+    const release = parent ? parent.completion.track() : null;
+    const p = this._runRequest(path, name, args, opts, parent, release);
+    this._inflight.add(p);
+    p.finally(() => this._inflight.delete(p));
+    return p;
+  }
+  async settle(maxTurns = 1e4) {
+    while ((this.hasPendingTransactions || this._inflight.size) && maxTurns-- > 0) {
+      while (this.hasPendingTransactions)
+        this.transactNext();
+      if (this._inflight.size)
+        await Promise.allSettled([...this._inflight]);
+    }
+  }
+  async _runRequest(path, name, args = [], opts = {}, parent = null, release = null) {
+    let released = false;
+    const transfer = (t) => {
+      if (release) {
+        released = true;
+        t.completion.whenSubtreeSettled().then(release);
+      }
+    };
+    try {
+      const curRoot = this.state.val;
+      const txnPath = path.toTransactionPath();
+      const curLeaf = txnPath.lookup(curRoot);
+      const handler = this.comps.getRequestFor(curLeaf, name) ?? mkReq404(name);
+      const reqCtx = new RequestContext(path, this, parent, curRoot);
+      const resHandlerName = opts?.onResName ?? name;
+      const resPath = opts?.livePath ? null : txnPath.pinKeys(curRoot);
+      const push = (specificName, baseName, singleArg, result, error) => {
+        const resArgs = specificName ? [singleArg] : [result, error];
+        const t = new ResponseEvent(path, this, specificName ?? baseName, resArgs, parent, resPath);
+        transfer(t);
+        this.pushTransaction(t);
+      };
+      try {
+        const result = await handler.fn.apply(null, [...args, reqCtx]);
+        push(opts?.onOkName, resHandlerName, result, result, null);
+      } catch (error) {
+        push(opts?.onErrorName, resHandlerName, error, null, error);
+      }
+    } finally {
+      if (release && !released)
+        release();
     }
-    case "MAYBE_ADD_AT_PREFIX":
-      return `'${info.name}' on <${(info.tag ?? "").toLowerCase()}> is a plain attribute, but '@${info.name}' is a directive — add the leading '@'`;
-    case "BAD_VALUE":
-      return `${badValueMessage(info)}${fmtTagSuffix(info)}`;
-    case "UNSUPPORTED_EXPR_SYNTAX":
-      return `${unsupportedExprMessage(info)}${fmtTagSuffix(info)}`;
-    case "REDUNDANT_TEMPLATE_STRING":
-      return `Redundant template string — '{${info.simpler}}' should be just '${info.simpler}'${fmtOriginSuffix(info)}`;
-    case "PLACEHOLDERLESS_TEMPLATE_STRING":
-      return `Template string has no dynamic parts — use the string literal ${info.literal} instead${fmtOriginSuffix(info)}`;
-    case "UNKNOWN_COMPONENT_SPEC_KEY":
-      return `Unknown component spec key '${info.key}' — value will be ignored at runtime`;
-    case "COMP_FIELD_BAD_SHAPE":
-      return info.kind === "args-not-object" ? `Field '${info.fieldName}': in { component, args }, 'args' must be a plain object, got ${info.got}` : `Field '${info.fieldName}': in { component, args }, 'component' must be the component name as a string, got ${info.gotName ? `the ${info.gotName} class` : info.got}`;
-    case "HTML_TAG_NAME_HAS_UPPERCASE":
-      return `Tag <${info.raw}> will be lowercased to <${info.lowercased}>${fmtLocationSuffix(info)}`;
-    case "HTML_SVG_TAG_WILL_LOWERCASE":
-      return `SVG tag <${info.raw}> is not in the WHATWG case-correction list — will be lowercased to <${info.lowercased}>${fmtLocationSuffix(info)}`;
-    case "HTML_TAG_NOT_ALLOWED_IN_PARENT":
-      return `<${info.tag}> not allowed under <${info.parent ?? "?"}> in ${info.mode} — ${htmlActionPhrase(info.action, info.tag, info.parent)}${fmtLocationSuffix(info)}`;
-    case "HTML_TEXT_NOT_ALLOWED_IN_PARENT":
-      return `Non-whitespace text not allowed in ${info.mode}: ${JSON.stringify(info.snippet)}${fmtLocationSuffix(info)}`;
-    case "HTML_VOID_ELEMENT_HAS_CLOSE_TAG":
-      return `Void element <${info.tag}> has an explicit close tag${fmtLocationSuffix(info)}`;
-    case "HTML_DUPLICATE_FORM":
-      return `Nested <form> — the inner form will be dropped by the parser${fmtLocationSuffix(info)}`;
-    case "HTML_NESTED_INTERACTIVE":
-      return `<${info.tag}> nested inside another <${info.tag}> — adoption agency will reorder${fmtLocationSuffix(info)}`;
-    case "HTML_MISNESTED_FORMATTING":
-      return `Misnested formatting tag </${info.tag}> — adoption agency will reorder nodes${fmtLocationSuffix(info)}`;
-    case "HTML_UNEXPECTED_END_TAG":
-      return `Unexpected end tag </${info.tag}>${fmtLocationSuffix(info)}`;
-    case "HTML_UNCLOSED_BEFORE_END":
-      return `<${info.unclosed}> still open when </${info.tag}> was seen — implicitly closed${fmtLocationSuffix(info)}`;
-    case "HTML_DUPLICATE_ATTRIBUTE":
-      return `Duplicate attribute '${info.name}' — second occurrence dropped${fmtLocationSuffix(info)}`;
-    case "HTML_ATTRIBUTES_ON_END_TAG":
-      return `Attributes on end tag </${info.tag}> — dropped by the parser${fmtLocationSuffix(info)}`;
-    case "HTML_SELF_CLOSING_END_TAG":
-      return `Self-closing end tag </${info.tag}/> — trailing '/' is meaningless${fmtLocationSuffix(info)}`;
-    case "HTML_MISSING_ATTRIBUTE_VALUE":
-      return `Attribute '${info.name}' is missing a value${fmtLocationSuffix(info)}`;
-    case "HTML_CDATA_IN_HTML_NAMESPACE":
-      return `CDATA section in HTML namespace — reinterpreted as a bogus comment${fmtLocationSuffix(info)}`;
-    case "HTML_BOGUS_COMMENT":
-      return `Bogus comment — content dropped by the parser${fmtLocationSuffix(info)}`;
-    case "HTML_SVG_ATTR_WILL_LOWERCASE":
-      return `SVG attribute '${info.raw}' will be rewritten to '${info.canonical}'${fmtLocationSuffix(info)}`;
-    case "HTML_MATHML_ATTR_WILL_LOWERCASE":
-      return `MathML attribute '${info.raw}' will be rewritten to '${info.canonical}'${fmtLocationSuffix(info)}`;
-    case "ASYNC_HANDLER":
-      return `Handler '${info.name}' in '${info.channel}' is an async function — handlers must be synchronous and return the updated state (an async function returns a Promise the framework won't await)`;
-    case "TOP_LEVEL_AT_RULE_IN_SCOPED_STYLE":
-      return `'@${info.atRule}' is a top-level-only at-rule, but '${info.key}' is wrapped in a component-scoped selector ([data-cid=…]{…}) where it is invalid and silently dropped — move it to 'globalStyle'${fmtLocationSuffix(info)}`;
-    case "GLOBAL_SELECTOR_IN_SCOPED_STYLE":
-      return `Selector '${info.selector}' targets the document root, but '${info.key}' is wrapped in a component-scoped selector, so it becomes a descendant selector that never matches — move it to 'globalStyle'${fmtLocationSuffix(info)}`;
-    case "LINT_ERROR":
-      return info.message;
-    default:
-      return id;
   }
-}
-function suggestionToMessage(suggestion) {
-  if (!suggestion)
-    return null;
-  switch (suggestion.kind) {
-    case "replace-name":
-      return `did you mean '${suggestion.to}'?`;
-    case "drop-prefix":
-      return `did you mean '${suggestion.to}'? (drop the leading '${suggestion.from.slice(0, suggestion.from.length - suggestion.to.length)}')`;
-    case "add-prefix":
-      return `did you mean '${suggestion.to}'? (add the leading '${suggestion.to.slice(0, suggestion.to.length - suggestion.from.length)}')`;
-    case "remove":
-      return `remove ${suggestion.what}`;
-    case "rewrite":
-      return `use '${suggestion.to}' instead of '${suggestion.from}'`;
-    case "wrap":
-      return `wrap it in ${suggestion.to}`;
-    case "rephrase":
-      return suggestion.text ?? null;
-    default:
-      return null;
+  get hasPendingTransactions() {
+    return this.transactions.length > 0;
+  }
+  transactNext() {
+    if (this.hasPendingTransactions)
+      this.transact(this.transactions.shift());
+  }
+  transact(transaction) {
+    try {
+      const curState = this.state.val;
+      const newState = transaction.run(curState, this.comps);
+      if (newState !== undefined) {
+        this.state.set(newState, { transaction });
+        transaction.afterTransaction();
+      } else
+        console.warn("undefined new state", { curState, transaction });
+    } finally {
+      transaction._completion?.ensureSelfSettled();
+      transaction._completion?.releaseSelf();
+    }
+  }
+  transactInputNow(path, event, eventHandler, dragInfo) {
+    this.transact(new InputEvent(path, event, eventHandler, this, dragInfo));
   }
 }
-function fmtLocationSuffix(info) {
-  const loc = info?.location;
-  if (!loc)
-    return "";
-  return ` at line ${loc.line}, col ${loc.column}`;
+function mkReq404(name) {
+  const fn = () => {
+    throw new Error(`Request not found: ${name}`);
+  };
+  return { fn };
 }
-function htmlActionPhrase(action, tag, parent) {
-  switch (action) {
-    case "ignored":
-      return `the parser will drop this <${tag}>`;
-    case "drop":
-      return `the parser will drop this <${tag}>`;
-    case "auto-close-implicit":
-      return `the parser will close <${parent ?? "?"}> first, then place <${tag}> as a sibling`;
-    case "foster-parent":
-      return `the parser will move <${tag}> outside <${parent ?? "?"}> (foster-parenting)`;
-    case "foreign-breakout":
-      return `the parser will exit foreign content and re-process <${tag}> in HTML mode`;
-    default:
-      return `parser action: ${action}`;
-  }
+function nullHandler() {
+  return this;
 }
 
-// src/components.js
-class Components {
-  constructor() {
-    this.getComponentSymbol = Symbol("getComponent");
-    this.byId = new Map;
+class Transaction {
+  constructor(path, transactor, parentTransaction = null) {
+    this.path = path;
+    this.transactor = transactor;
+    this.parentTransaction = parentTransaction;
+    this._completion = null;
   }
-  registerComponent(comp) {
-    comp.Class.prototype[this.getComponentSymbol] = () => comp;
-    this.byId.set(comp.id, comp);
+  get completion() {
+    this._completion ??= new Completion;
+    return this._completion;
   }
-  getComponentForId(id) {
-    return this.byId.get(id) ?? null;
+  whenSettled() {
+    return this.completion.whenSettled();
   }
-  getCompFor(v) {
-    return v?.[this.getComponentSymbol]?.() ?? null;
+  whenSubtreeSettled() {
+    return this.completion.whenSubtreeSettled();
   }
-  getHandlerFor(v, name, key) {
-    return this.getCompFor(v)?.[key][name] ?? null;
+  run(rootValue, comps) {
+    return this.updateRootValue(rootValue, comps);
   }
-  getRequestFor(v, name) {
-    return this.getCompFor(v)?.scope.lookupRequest(name) ?? null;
+  afterTransaction() {}
+  buildRootStack(root, comps) {
+    return Stack.root(comps, root);
   }
-  compileStyles() {
-    const styles = [];
-    for (const comp of this.byId.values())
-      styles.push(comp.compileStyle());
-    return styles.join(`
-`);
+  buildStack(root, comps) {
+    return this.path.toTransactionPath().buildStack(this.buildRootStack(root, comps));
   }
-}
-
-class ComponentStack {
-  constructor(comps = new Components, parent = null) {
-    this.comps = comps;
-    this.parent = parent;
-    this.byName = {};
-    this.reqsByName = {};
-    this.macros = {};
+  callHandler(root, instance, comps) {
+    const [handler, args] = this.getHandlerAndArgs(root, instance, comps);
+    return handler.apply(instance, args);
   }
-  enter() {
-    return new ComponentStack(this.comps, this);
+  getHandlerAndArgs(_root, _instance, _comps) {
+    return null;
   }
-  registerComponents(comps, opts) {
-    const { aliases = {} } = opts ?? {};
-    for (let i = 0;i < comps.length; i++) {
-      const comp = comps[i];
-      comp.scope = this.enter();
-      comp.Class.scope = comp.scope;
-      this.comps.registerComponent(comp);
-      this.byName[comp.name] = comp;
-    }
-    for (const alias in aliases) {
-      const comp = this.byName[aliases[alias]];
-      console.assert(this.byName[alias] === undefined, "alias overrides component", alias);
-      if (comp !== undefined)
-        this.byName[alias] = comp;
-      else
-        console.warn("alias", alias, "to inexistent component", aliases[alias]);
-    }
+  getTransactionPath() {
+    return this.path.toTransactionPath();
   }
-  registerMacros(macros) {
-    for (const key in macros) {
-      const lower = key.toLowerCase();
-      console.assert(this.macros[lower] === undefined, "macro key collision", lower);
-      this.macros[lower] = macros[key];
-    }
+  updateRootValue(curRoot, comps) {
+    const txnPath = this.getTransactionPath();
+    const curLeaf = txnPath.lookup(curRoot);
+    const newLeaf = this.callHandler(curRoot, curLeaf, comps);
+    this._completion?.markSelfSettled({ value: newLeaf, old: curLeaf });
+    return curLeaf !== newLeaf ? txnPath.setValue(curRoot, newLeaf) : curRoot;
   }
-  getCompFor(v) {
-    return this.comps.getCompFor(v);
+  lookupName(_name) {
+    return null;
   }
-  registerRequestHandlers(handlers) {
-    for (const name in handlers)
-      this.reqsByName[name] = new RequestHandler(name, handlers[name]);
+}
+var toNullIfNaN = (v) => Number.isNaN(v) ? null : v;
+function getValue(e) {
+  return e.target.type === "checkbox" ? e.target.checked : (e instanceof CustomEvent ? e.detail : e.target.value) ?? null;
+}
+
+class InputEvent extends Transaction {
+  constructor(path, e, handler, transactor, dragInfo) {
+    super(path, transactor);
+    this.e = e;
+    this.handler = handler;
+    this.dragInfo = dragInfo;
+    this._dispatchPath = null;
   }
-  lookupRequest(name) {
-    return this.reqsByName[name] ?? this.parent?.lookupRequest(name) ?? null;
+  get dispatchPath() {
+    this._dispatchPath ??= this.path.compact();
+    return this._dispatchPath;
   }
-  lookupComponent(name) {
-    return this.byName[name] ?? this.parent?.lookupComponent(name) ?? null;
+  buildRootStack(root, comps) {
+    return Stack.root(comps, root, this);
   }
-  lookupMacro(name) {
-    return this.macros[name] ?? this.parent?.lookupMacro(name) ?? null;
+  getHandlerAndArgs(root, _instance, comps) {
+    const stack = this.buildStack(root, comps);
+    const [handler, args] = this.handler.getHandlerAndArgs(stack, this);
+    const path = this.dispatchPath;
+    let dispatcher;
+    for (let i = 0;i < args.length; i++) {
+      if (args[i]?.toHandlerArg) {
+        dispatcher ??= new Dispatcher(path, this.transactor, this);
+        args[i] = args[i].toHandlerArg(dispatcher);
+      }
+    }
+    args.push(new EventContext(path, this.transactor, this));
+    return [handler, args];
+  }
+  lookupName(name) {
+    const { e } = this;
+    switch (name) {
+      case "value":
+        return getValue(e);
+      case "valueAsInt":
+        return toNullIfNaN(parseInt(getValue(e), 10));
+      case "valueAsFloat":
+        return toNullIfNaN(parseFloat(getValue(e)));
+      case "target":
+        return e.target;
+      case "event":
+        return e;
+      case "isAlt":
+        return e.altKey;
+      case "isShift":
+        return e.shiftKey;
+      case "isCtrl":
+      case "isCmd":
+        return isMac && e.metaKey || e.ctrlKey;
+      case "key":
+        return e.key;
+      case "keyCode":
+        return e.keyCode;
+      case "isUpKey":
+        return e.key === "ArrowUp";
+      case "isDownKey":
+        return e.key === "ArrowDown";
+      case "isSend":
+        return e.key === "Enter";
+      case "isCancel":
+        return e.key === "Escape";
+      case "isTabKey":
+        return e.key === "Tab";
+      case "ctx":
+        return new EventContext(this.dispatchPath, this.transactor, this);
+      case "dragInfo":
+        return this.dragInfo;
+    }
+    return null;
   }
 }
 
-class ProvideInfo {
-  constructor(name, val, symbol) {
+class NameArgsTransaction extends Transaction {
+  constructor(path, transactor, name, args, parentTransaction, opts = {}) {
+    super(path, transactor, parentTransaction);
     this.name = name;
-    this.val = val;
-    this.symbol = symbol;
+    this.args = args;
+    this.opts = opts;
+    this.targetPath = path;
+  }
+  handlerProp = null;
+  getHandlerForName(comp) {
+    const handlers = comp?.[this.handlerProp];
+    return handlers?.[this.name] ?? handlers?.$unknown ?? nullHandler;
+  }
+  getHandlerAndArgs(_root, instance, comps) {
+    const handler = this.getHandlerForName(comps.getCompFor(instance));
+    return [handler, [...this.args, new EventContext(this.path, this.transactor, this)]];
   }
 }
 
-class LookupInfo {
-  constructor(name, compName, provideName, val) {
-    this.name = name;
-    this.compName = compName;
-    this.provideName = provideName;
-    this.val = val;
-    this._sym = undefined;
+class ResponseEvent extends NameArgsTransaction {
+  handlerProp = "response";
+  constructor(path, transactor, name, args, parent, txnPath = null) {
+    super(path, transactor, name, args, parent);
+    this._txnPath = txnPath;
   }
-  getProducerSymbol(stack) {
-    if (this._sym === undefined)
-      this._sym = stack.lookupType(this.compName)?.provide?.[this.provideName]?.symbol ?? null;
-    return this._sym;
+  getTransactionPath() {
+    return this._txnPath ?? super.getTransactionPath();
   }
 }
-var isString = (v) => typeof v === "string";
-var _rawSpecKeys = "name view style commonStyle globalStyle input receive bubble response alter views provide lookup fields methods statics";
-var KNOWN_SPEC_KEYS = new Set(_rawSpecKeys.split(" "));
-var _compId = 0;
 
-class Component {
-  constructor(Class, o) {
-    this.id = _compId++;
-    this.name = o.name ?? "UnkComp";
-    this.Class = Class;
-    this.views = { main: new View("main", o.view, o.style) };
-    this.commonStyle = o.commonStyle ?? "";
-    this.globalStyle = o.globalStyle ?? "";
-    this.input = o.input ?? {};
-    this.receive = o.receive ?? {};
-    this.bubble = o.bubble ?? {};
-    this.response = o.response ?? {};
-    this.alter = o.alter ?? {};
-    for (const name in o.views ?? {}) {
-      const v = o.views[name];
-      const { view, style } = isString(v) ? { view: v } : v;
-      this.views[name] = new View(name, view, style);
-    }
-    this._rawProvide = o.provide ?? {};
-    this._rawLookup = o.lookup ?? {};
-    this.provide = {};
-    this.lookup = {};
-    this.scope = null;
-    this.spec = o;
-    this.extra = {};
-    for (const key of Object.keys(o))
-      if (!KNOWN_SPEC_KEYS.has(key))
-        this.extra[key] = o[key];
+class SendEvent extends NameArgsTransaction {
+  handlerProp = "receive";
+  run(rootVal, comps) {
+    return this.opts.skipSelf ? rootVal : this.updateRootValue(rootVal, comps);
   }
-  clone() {
-    return Component.fromSpec(this.spec);
+  afterTransaction() {
+    const { path, name, args, opts, targetPath } = this;
+    if (opts.bubbles && path.steps.length > 0)
+      this.transactor.pushBubble(path.popStep(), name, args, opts, this, targetPath);
   }
-  compile(ParseContext2) {
-    for (const name in this.views)
-      this.views[name].compile(new ParseContext2, this.scope, this.id);
-    const ctx = this.views.main.ctx;
-    for (const key in this._rawProvide) {
-      const val = vp.parseProvide(this._rawProvide[key], ctx);
-      if (val)
-        this.provide[key] = new ProvideInfo(key, val, Symbol(key));
-    }
-    for (const key in this._rawLookup) {
-      const linfo = this._rawLookup[key];
-      const forStr = isString(linfo) ? linfo : isString(linfo?.for) ? linfo.for : null;
-      const [compName, provideName] = forStr === null ? [] : forStr.split(".");
-      if (!isString(compName) || !isString(provideName))
-        continue;
-      const defStr = isString(linfo?.default) ? linfo.default : null;
-      const val = defStr === null ? null : vp.parseField(defStr, ctx);
-      this.lookup[key] = new LookupInfo(key, compName, provideName, val);
-    }
-    for (const key in this.lookup)
-      if (this.provide[key] !== undefined)
-        console.warn("name declared in both provide and lookup", this.name, key);
+}
+
+class BubbleEvent extends SendEvent {
+  handlerProp = "bubble";
+  constructor(path, transactor, name, args, parent, opts, targetPath) {
+    super(path, transactor, name, args, parent, opts);
+    this.targetPath = targetPath ?? path;
   }
-  make(args, opts) {
-    return this.Class.make(args, opts ?? { scope: this.scope });
+  stopPropagation() {
+    this.opts.bubbles = false;
   }
-  getView(name) {
-    return this.views[name] ?? this.views.main;
+}
+
+class InputDispatchEvent extends NameArgsTransaction {
+  handlerProp = "input";
+}
+
+class Completion {
+  constructor() {
+    this.val = undefined;
+    this.selfSettled = false;
+    this.subtreeSettled = false;
+    this.pending = 1;
+    this._selfResolve = null;
+    this._selfPromise = null;
+    this._subtreeResolve = null;
+    this._subtreePromise = null;
+    this._selfReleased = false;
+  }
+  whenSettled() {
+    if (this.selfSettled)
+      return Promise.resolve(this.val);
+    this._selfPromise ??= new Promise((res) => {
+      this._selfResolve = res;
+    });
+    return this._selfPromise;
   }
-  getEventForId(id, name = "main") {
-    return this.getView(name).ctx.getEventForId(id);
+  whenSubtreeSettled() {
+    if (this.subtreeSettled)
+      return Promise.resolve(this.val);
+    this._subtreePromise ??= new Promise((res) => {
+      this._subtreeResolve = res;
+    });
+    return this._subtreePromise;
   }
-  getNodeForId(id, name = "main") {
-    return this.getView(name).ctx.getNodeForId(id);
+  markSelfSettled(val) {
+    if (this.selfSettled)
+      return;
+    this.selfSettled = true;
+    this.val = val;
+    this._selfResolve?.(val);
   }
-  compileStyle() {
-    const { id, commonStyle, globalStyle, views } = this;
-    const styles = commonStyle ? [`[data-cid="${id}"]{${commonStyle}}`] : [];
-    if (globalStyle !== "")
-      styles.push(globalStyle);
-    for (const name in views) {
-      const { style } = views[name];
-      if (style !== "")
-        styles.push(`[data-cid="${id}"][data-vid="${name}"]{${style}}`);
+  ensureSelfSettled() {
+    if (!this.selfSettled)
+      this.markSelfSettled(this.val);
+  }
+  track() {
+    this.pending++;
+    let done = false;
+    return () => {
+      if (done)
+        return;
+      done = true;
+      this._release();
+    };
+  }
+  releaseSelf() {
+    if (this._selfReleased)
+      return;
+    this._selfReleased = true;
+    this._release();
+  }
+  _release() {
+    if (--this.pending === 0) {
+      this.subtreeSettled = true;
+      this._subtreeResolve?.(this.val);
     }
-    return styles.join(`
-`);
   }
 }
 
-// src/stack.js
-var STOP = Symbol("STOP");
-var NEXT = Symbol("NEXT");
-function lookup(chain, name, dv = null) {
-  let n = chain;
-  while (n !== null) {
-    const r = n[0].lookup(name);
-    if (r === STOP)
-      return dv;
-    if (r !== NEXT)
-      return r;
-    n = n[1];
-  }
-  return dv;
-}
-
-class BindFrame {
-  constructor(it, binds, isFrame) {
-    this.it = it;
-    this.binds = binds;
-    this.isFrame = isFrame;
+class Dispatcher {
+  constructor(path, transactor, parentTransaction, root = transactor.state.val) {
+    this.path = path;
+    this.transactor = transactor;
+    this.parent = parentTransaction;
+    this.root = root;
   }
-  lookup(name) {
-    const v = this.binds[name];
-    return v === undefined ? this.isFrame ? STOP : NEXT : v;
+  walkPath(callback) {
+    const comps = this.transactor.comps;
+    const chain = this.path.toTransactionPath().resolveChain(this.root);
+    for (let i = chain.length - 1;i >= 0; i--) {
+      const comp = comps.getCompFor(chain[i]);
+      if (comp && callback(comp, chain[i]) === false)
+        return;
+    }
   }
-}
-
-class ObjectFrame {
-  constructor(binds) {
-    this.binds = binds;
+  get at() {
+    return new PathChanges(this);
   }
-  lookup(key) {
-    const v = this.binds[key];
-    return v === undefined ? NEXT : v;
+  send(name, args, opts) {
+    return this.sendAtPath(this.path, name, args, opts);
   }
-}
-function computeViewsId(views) {
-  let s = "";
-  let n = views;
-  while (n !== null) {
-    s += n[0];
-    n = n[1];
+  bubble(name, args, opts) {
+    return this.send(name, args, { skipSelf: true, bubbles: true, ...opts });
   }
-  return s === "main" ? "" : s;
-}
-
-class Stack {
-  constructor(comps, it, binds, dynBinds, views, viewsId, ctx = null) {
-    this.comps = comps;
-    this.it = it;
-    this.binds = binds;
-    this.dynBinds = dynBinds;
-    this.views = views;
-    this.viewsId = viewsId;
-    this.ctx = ctx;
+  sendAtPath(path, name, args, opts) {
+    return this.transactor.pushSend(path, name, args, opts, this.parent);
   }
-  _pushProvides() {
-    const provide = this.comps.getCompFor(this.it)?.provide;
-    if (provide == null)
-      return this;
-    const dynObj = {};
-    let has = false;
-    for (const k in provide) {
-      dynObj[provide[k].symbol] = provide[k].val.eval(this);
-      has = true;
-    }
-    if (!has)
-      return this;
-    const newDynBinds = [new ObjectFrame(dynObj), this.dynBinds];
-    const { comps, it, binds, views, viewsId, ctx } = this;
-    return new Stack(comps, it, binds, newDynBinds, views, viewsId, ctx);
+  request(name, args, opts) {
+    return this.requestAtPath(this.path, name, args, opts);
   }
-  static root(comps, it, ctx) {
-    const binds = [new BindFrame(it, { it }, true), null];
-    const dynBinds = [new ObjectFrame({}), null];
-    const views = ["main", null];
-    return new Stack(comps, it, binds, dynBinds, views, "", ctx)._pushProvides();
+  requestAtPath(path, name, args, opts) {
+    return this.transactor.pushRequest(path, name, args, opts, this.parent);
   }
-  enter(it, bindings = {}, isFrame = true) {
-    const { comps, binds, dynBinds, views, viewsId, ctx } = this;
-    const newBinds = [new BindFrame(it, bindings, isFrame), binds];
-    const stack = new Stack(comps, it, newBinds, dynBinds, views, viewsId, ctx);
-    return isFrame ? stack._pushProvides() : stack;
+  inputAtPath(path, name, args, opts) {
+    return this.transactor.pushInput(path, name, args, opts, this.parent);
   }
-  pushViewName(name) {
-    const { comps, it, binds, dynBinds, views, ctx } = this;
-    const newViews = [name, views];
-    return new Stack(comps, it, binds, dynBinds, newViews, computeViewsId(newViews), ctx);
+  lookupTypeFor(name, inst) {
+    return this.transactor.comps.getCompFor(inst).scope.lookupComponent(name);
   }
-  _pushDynBindValuesToArray(arr, comp) {
-    for (const k in comp.provide)
-      arr.push(this._lookupProvide(comp.provide[k]));
-    for (const k in comp.lookup)
-      arr.push(this._lookupAlias(comp.lookup[k]));
+}
+
+class EventContext extends Dispatcher {
+  get name() {
+    return this.parent?.name ?? null;
   }
-  _lookupProvide(p) {
-    return lookup(this.dynBinds, p.symbol) ?? p.val.eval(this) ?? null;
+  get targetPath() {
+    return this.parent.targetPath;
   }
-  _lookupAlias(lk) {
-    const sym = lk.getProducerSymbol(this);
-    return (sym != null ? lookup(this.dynBinds, sym) : null) ?? lk.val?.eval(this) ?? null;
+  stopPropagation() {
+    return this.parent.stopPropagation();
   }
-  lookupDynamic(name) {
-    const comp = this.comps.getCompFor(this.it);
-    if (comp == null)
-      return null;
-    const lk = comp.lookup[name];
-    if (lk !== undefined)
-      return this._lookupAlias(lk);
-    const p = comp.provide[name];
-    return p !== undefined ? this._lookupProvide(p) : null;
+}
+
+class RequestContext extends Dispatcher {
+}
+
+class PathChanges extends PathBuilder {
+  constructor(dispatcher) {
+    super();
+    this.dispatcher = dispatcher;
   }
-  lookupBind(name) {
-    return lookup(this.binds, name);
+  send(name, args, opts) {
+    return this.dispatcher.sendAtPath(this.buildPath(), name, args, opts);
   }
-  lookupType(name) {
-    return this.comps.getCompFor(this.it).scope.lookupComponent(name);
+  bubble(name, args, opts) {
+    return this.send(name, args, { skipSelf: true, bubbles: true, ...opts });
   }
-  lookupFieldRaw(name) {
-    return this.it[name] ?? null;
+  buildPath() {
+    return this.dispatcher.path.concat(this.pathChanges);
   }
-  lookupMethod(name) {
-    const fn = this.it[name];
-    return fn instanceof Function ? fn.call(this.it) : null;
+}
+function rootDispatcher(transactor) {
+  return new Dispatcher(new Path([]), transactor, null);
+}
+
+// tools/core/results.js
+class ModuleInfo {
+  constructor({ path = null, present = new Set, counts = {}, warnings = [] }) {
+    this.path = path;
+    this.present = present;
+    this.counts = counts;
+    this.warnings = warnings;
   }
-  lookupName(name) {
-    return this.ctx.lookupName(name);
+}
+
+class ComponentSummary {
+  constructor({ name, views, fields }) {
+    this.name = name;
+    this.views = views;
+    this.fields = fields;
   }
-  getHandlerFor(name, key) {
-    return this.comps.getHandlerFor(this.it, name, key);
+}
+
+class ComponentList {
+  constructor({ items, total = null, truncated = false }) {
+    this.items = items;
+    this.total = total ?? items.length;
+    this.truncated = truncated;
   }
-  lookupRequest(name) {
-    return this.comps.getRequestFor(this.it, name);
+}
+
+class ExampleIndex {
+  constructor({ sections, total = null, truncated = false }) {
+    this.sections = sections;
+    this.total = total ?? sections.reduce((n, s) => n + (s.items?.length ?? 0), 0);
+    this.truncated = truncated;
   }
-  lookupBestView(views, defaultViewName) {
-    let n = this.views;
-    while (n !== null) {
-      const view = views[n[0]];
-      if (view !== undefined)
-        return view;
-      n = n[1];
-    }
-    return views[defaultViewName];
+}
+
+class ComponentDocs {
+  constructor({ items }) {
+    this.items = items;
   }
 }
 
-// src/transactor.js
-class State2 {
-  constructor(val) {
-    this.val = val;
-    this.changeSubs = [];
+class LintFinding {
+  constructor({ id, level, info, context = {}, suggestion = null }) {
+    this.id = id;
+    this.level = level;
+    this.info = info;
+    this.context = context;
+    this.suggestion = suggestion;
   }
-  onChange(cb) {
-    this.changeSubs.push(cb);
+}
+
+class LintComponentResult {
+  constructor({ componentName, findings }) {
+    this.componentName = componentName;
+    this.findings = findings;
   }
-  set(val, info) {
-    const old = this.val;
-    this.val = val;
-    for (const sub of this.changeSubs)
-      sub({ val, old, info, timestamp: Date.now() });
+  get errorCount() {
+    return this.findings.filter((f) => f.level === "error").length;
   }
-  update(fn, info) {
-    return this.set(fn(this.val), info);
+  get warnCount() {
+    return this.findings.filter((f) => f.level === "warn").length;
   }
 }
 
-class Transactor {
-  constructor(comps, rootValue) {
-    this.comps = comps;
-    this.transactions = [];
-    this.state = new State2(rootValue);
-    this.onTransactionPushed = () => {};
+class LintReport {
+  constructor({ components }) {
+    this.components = components;
   }
-  pushTransaction(t) {
-    this.transactions.push(t);
-    this.onTransactionPushed(t);
+  get hasErrors() {
+    return this.components.some((c) => c.errorCount > 0);
   }
-  pushSend(path, name, args = [], opts = {}, parent = null) {
-    this.pushTransaction(new SendEvent(path, this, name, args, parent, opts));
+  get totalErrors() {
+    return this.components.reduce((n, c) => n + c.errorCount, 0);
   }
-  pushBubble(path, name, args = [], opts = {}, parent = null, targetPath = null) {
-    const newOpts = opts.skipSelf ? { ...opts, skipSelf: false } : opts;
-    this.pushTransaction(new BubbleEvent(path, this, name, args, parent, newOpts, targetPath));
-  }
-  async pushRequest(path, name, args = [], opts = {}, parent = null) {
-    const curRoot = this.state.val;
-    const txnPath = path.toTransactionPath();
-    const curLeaf = txnPath.lookup(curRoot);
-    const handler = this.comps.getRequestFor(curLeaf, name) ?? mkReq404(name);
-    const reqCtx = new RequestContext(path, this, parent, curRoot);
-    const resHandlerName = opts?.onResName ?? name;
-    const resPath = opts?.livePath ? null : txnPath.pinKeys(curRoot);
-    const push = (specificName, baseName, singleArg, result, error) => {
-      const resArgs = specificName ? [singleArg] : [result, error];
-      const t = new ResponseEvent(path, this, specificName ?? baseName, resArgs, parent, resPath);
-      this.pushTransaction(t);
-    };
-    try {
-      const result = await handler.fn.apply(null, [...args, reqCtx]);
-      push(opts?.onOkName, resHandlerName, result, result, null);
-    } catch (error) {
-      push(opts?.onErrorName, resHandlerName, error, null, error);
-    }
-  }
-  get hasPendingTransactions() {
-    return this.transactions.length > 0;
-  }
-  transactNext() {
-    if (this.hasPendingTransactions)
-      this.transact(this.transactions.shift());
-  }
-  transact(transaction) {
-    const curState = this.state.val;
-    const newState = transaction.run(curState, this.comps);
-    if (newState !== undefined) {
-      this.state.set(newState, { transaction });
-      transaction.afterTransaction();
-    } else
-      console.warn("undefined new state", { curState, transaction });
-  }
-  transactInputNow(path, event, eventHandler, dragInfo) {
-    this.transact(new InputEvent(path, event, eventHandler, this, dragInfo));
+  get totalWarnings() {
+    return this.components.reduce((n, c) => n + c.warnCount, 0);
   }
 }
-function mkReq404(name) {
-  const fn = () => {
-    throw new Error(`Request not found: ${name}`);
-  };
-  return { fn };
-}
-function nullHandler() {
-  return this;
-}
 
-class Transaction {
-  constructor(path, transactor, parentTransaction = null) {
-    this.path = path;
-    this.transactor = transactor;
-    this.parentTransaction = parentTransaction;
-    this._task = null;
-  }
-  get task() {
-    this._task ??= new Task;
-    return this._task;
-  }
-  getCompletionPromise() {
-    return this.task.promise;
-  }
-  setParent(parentTransaction) {
-    this.parentTransaction = parentTransaction;
-    parentTransaction.task.addDep(this.task);
-  }
-  run(rootValue, comps) {
-    return this.updateRootValue(rootValue, comps);
-  }
-  afterTransaction() {}
-  buildRootStack(root, comps) {
-    return Stack.root(comps, root);
-  }
-  buildStack(root, comps) {
-    return this.path.toTransactionPath().buildStack(this.buildRootStack(root, comps));
-  }
-  callHandler(root, instance, comps) {
-    const [handler, args] = this.getHandlerAndArgs(root, instance, comps);
-    return handler.apply(instance, args);
-  }
-  getHandlerAndArgs(_root, _instance, _comps) {
-    return null;
-  }
-  getTransactionPath() {
-    return this.path.toTransactionPath();
-  }
-  updateRootValue(curRoot, comps) {
-    const txnPath = this.getTransactionPath();
-    const curLeaf = txnPath.lookup(curRoot);
-    const newLeaf = this.callHandler(curRoot, curLeaf, comps);
-    this._task?.complete?.({ value: newLeaf, old: curLeaf });
-    return curLeaf !== newLeaf ? txnPath.setValue(curRoot, newLeaf) : curRoot;
-  }
-  lookupName(_name) {
-    return null;
+class RenderedExample {
+  constructor({ title, description = null, componentName, view, html, error = null }) {
+    this.title = title;
+    this.description = description;
+    this.componentName = componentName;
+    this.view = view;
+    this.html = html;
+    this.error = error;
   }
 }
-var toNullIfNaN = (v) => Number.isNaN(v) ? null : v;
-function getValue(e) {
-  return e.target.type === "checkbox" ? e.target.checked : (e instanceof CustomEvent ? e.detail : e.target.value) ?? null;
-}
 
-class InputEvent extends Transaction {
-  constructor(path, e, handler, transactor, dragInfo) {
-    super(path, transactor);
-    this.e = e;
-    this.handler = handler;
-    this.dragInfo = dragInfo;
-    this._dispatchPath = null;
-  }
-  get dispatchPath() {
-    this._dispatchPath ??= this.path.compact();
-    return this._dispatchPath;
-  }
-  buildRootStack(root, comps) {
-    return Stack.root(comps, root, this);
-  }
-  getHandlerAndArgs(root, _instance, comps) {
-    const stack = this.buildStack(root, comps);
-    const [handler, args] = this.handler.getHandlerAndArgs(stack, this);
-    const path = this.dispatchPath;
-    let dispatcher;
-    for (let i = 0;i < args.length; i++) {
-      if (args[i]?.toHandlerArg) {
-        dispatcher ??= new Dispatcher(path, this.transactor, this);
-        args[i] = args[i].toHandlerArg(dispatcher);
-      }
-    }
-    args.push(new EventContext(path, this.transactor, this));
-    return [handler, args];
-  }
-  lookupName(name) {
-    const { e } = this;
-    switch (name) {
-      case "value":
-        return getValue(e);
-      case "valueAsInt":
-        return toNullIfNaN(parseInt(getValue(e), 10));
-      case "valueAsFloat":
-        return toNullIfNaN(parseFloat(getValue(e)));
-      case "target":
-        return e.target;
-      case "event":
-        return e;
-      case "isAlt":
-        return e.altKey;
-      case "isShift":
-        return e.shiftKey;
-      case "isCtrl":
-      case "isCmd":
-        return isMac && e.metaKey || e.ctrlKey;
-      case "key":
-        return e.key;
-      case "keyCode":
-        return e.keyCode;
-      case "isUpKey":
-        return e.key === "ArrowUp";
-      case "isDownKey":
-        return e.key === "ArrowDown";
-      case "isSend":
-        return e.key === "Enter";
-      case "isCancel":
-        return e.key === "Escape";
-      case "isTabKey":
-        return e.key === "Tab";
-      case "ctx":
-        return new EventContext(this.dispatchPath, this.transactor, this);
-      case "dragInfo":
-        return this.dragInfo;
-    }
-    return null;
+class RenderedSection {
+  constructor({ title, description = null, items }) {
+    this.title = title;
+    this.description = description;
+    this.items = items;
   }
 }
 
-class NameArgsTransaction extends Transaction {
-  constructor(path, transactor, name, args, parentTransaction, opts = {}) {
-    super(path, transactor, parentTransaction);
-    this.name = name;
-    this.args = args;
-    this.opts = opts;
-    this.targetPath = path;
-  }
-  handlerProp = null;
-  getHandlerForName(comp) {
-    const handlers = comp?.[this.handlerProp];
-    return handlers?.[this.name] ?? handlers?.$unknown ?? nullHandler;
+class RenderBatch {
+  constructor({ sections }) {
+    this.sections = sections;
   }
-  getHandlerAndArgs(_root, instance, comps) {
-    const handler = this.getHandlerForName(comps.getCompFor(instance));
-    return [handler, [...this.args, new EventContext(this.path, this.transactor, this)]];
+  get hasErrors() {
+    return this.sections.some((s) => s.items.some((i) => i.error !== null));
   }
 }
 
-class ResponseEvent extends NameArgsTransaction {
-  handlerProp = "response";
-  constructor(path, transactor, name, args, parent, txnPath = null) {
-    super(path, transactor, name, args, parent);
-    this._txnPath = txnPath;
-  }
-  getTransactionPath() {
-    return this._txnPath ?? super.getTransactionPath();
+class TestResult {
+  constructor({ title, fullPath, componentName = null, status, durationMs = 0, error = null }) {
+    this.title = title;
+    this.fullPath = fullPath;
+    this.componentName = componentName;
+    this.status = status;
+    this.durationMs = durationMs;
+    this.error = error;
   }
 }
 
-class SendEvent extends NameArgsTransaction {
-  handlerProp = "receive";
-  run(rootVal, comps) {
-    return this.opts.skipSelf ? rootVal : this.updateRootValue(rootVal, comps);
-  }
-  afterTransaction() {
-    const { path, name, args, opts, targetPath } = this;
-    if (opts.bubbles && path.steps.length > 0)
-      this.transactor.pushBubble(path.popStep(), name, args, opts, this, targetPath);
+class DescribeResult {
+  constructor({ title, componentName = null, children = [] }) {
+    this.title = title;
+    this.componentName = componentName;
+    this.children = children;
   }
 }
 
-class BubbleEvent extends SendEvent {
-  handlerProp = "bubble";
-  constructor(path, transactor, name, args, parent, opts, targetPath) {
-    super(path, transactor, name, args, parent, opts);
-    this.targetPath = targetPath ?? path;
-  }
-  stopPropagation() {
-    this.opts.bubbles = false;
+class ModuleTestReport {
+  constructor({ path = null, suites = [], counts = { pass: 0, fail: 0, skip: 0, total: 0 } }) {
+    this.path = path;
+    this.suites = suites;
+    this.counts = counts;
   }
 }
 
-class Task {
-  constructor() {
-    this.deps = [];
-    this.val = this.resolve = this.reject = null;
-    this.promise = new Promise((res, rej) => {
-      this.resolve = res;
-      this.reject = rej;
-    });
-    this.isCompleted = false;
+class TestReport {
+  constructor({ modules = [] }) {
+    this.modules = modules;
   }
-  addDep(task) {
-    console.assert(!this.isCompleted, "addDep for completed task", this, task);
-    this.deps.push(task);
-    task.promise.then((_) => this._check());
+  get totals() {
+    return this.modules.reduce((acc, m) => ({
+      pass: acc.pass + m.counts.pass,
+      fail: acc.fail + m.counts.fail,
+      skip: acc.skip + m.counts.skip,
+      total: acc.total + m.counts.total
+    }), { pass: 0, fail: 0, skip: 0, total: 0 });
   }
-  complete(val) {
-    this.val = val;
-    this._check();
+  get hasFailures() {
+    return this.modules.some((m) => m.counts.fail > 0);
   }
-  _check() {
-    if (this.deps.every((task) => task.isCompleted)) {
-      this.isCompleted = true;
-      this.resolve(this);
-    }
+}
+
+// tools/core/tests.js
+class Describe {
+  constructor({ title, componentName = null, parent = null }) {
+    this.title = title;
+    this.componentName = componentName;
+    this.parent = parent;
+    this.children = [];
   }
 }
 
-class Dispatcher {
-  constructor(path, transactor, parentTransaction, root = transactor.state.val) {
-    this.path = path;
-    this.transactor = transactor;
-    this.parent = parentTransaction;
-    this.root = root;
+class Test {
+  constructor({ title, fn, componentName = null, parent = null }) {
+    this.title = title;
+    this.fn = fn;
+    this.componentName = componentName;
+    this.parent = parent;
   }
-  walkPath(callback) {
-    const comps = this.transactor.comps;
-    const chain = this.path.toTransactionPath().resolveChain(this.root);
-    for (let i = chain.length - 1;i >= 0; i--) {
-      const comp = comps.getCompFor(chain[i]);
-      if (comp && callback(comp, chain[i]) === false)
-        return;
-    }
-  }
-  get at() {
-    return new PathChanges(this);
-  }
-  send(name, args, opts) {
-    return this.sendAtPath(this.path, name, args, opts);
-  }
-  bubble(name, args, opts) {
-    return this.send(name, args, { skipSelf: true, bubbles: true, ...opts });
+}
+
+class ModuleTests {
+  constructor({ path = null, suites = [] } = {}) {
+    this.path = path;
+    this.suites = suites;
   }
-  sendAtPath(path, name, args, opts) {
-    return this.transactor.pushSend(path, name, args, opts, this.parent);
+}
+
+class TestIndex {
+  constructor({ modules = [] } = {}) {
+    this.modules = modules;
   }
-  request(name, args, opts) {
-    return this.requestAtPath(this.path, name, args, opts);
+}
+function isComponentObject(x) {
+  return x !== null && typeof x === "object" && typeof x.name === "string" && typeof x.Class === "function";
+}
+function resolveComponentName(arg, components) {
+  if (isComponentObject(arg))
+    return arg.name;
+  if (typeof arg === "function") {
+    for (const c of components)
+      if (c.Class === arg)
+        return c.name;
   }
-  requestAtPath(path, name, args, opts) {
-    return this.transactor.pushRequest(path, name, args, opts, this.parent);
+  return null;
+}
+function titleFromArg(arg) {
+  if (typeof arg === "string")
+    return arg;
+  if (isComponentObject(arg))
+    return arg.name;
+  if (typeof arg === "function")
+    return arg.name || "(anonymous)";
+  return String(arg);
+}
+function makeCollector({ path = null, components = [] } = {}) {
+  const moduleTests = new ModuleTests({ path, suites: [] });
+  const stack = [];
+  function describe(...args) {
+    let head;
+    let options = null;
+    let fn;
+    if (args.length === 2) {
+      [head, fn] = args;
+    } else if (args.length === 3) {
+      [head, options, fn] = args;
+    } else {
+      throw new Error(`describe() expects 2 or 3 arguments, got ${args.length}`);
+    }
+    if (typeof fn !== "function") {
+      throw new Error(`describe(${JSON.stringify(titleFromArg(head))}): final argument must be a function`);
+    }
+    let componentName = null;
+    if (typeof head !== "string") {
+      componentName = resolveComponentName(head, components);
+    }
+    if (componentName === null && options && options.component != null) {
+      componentName = resolveComponentName(options.component, components);
+    }
+    if (componentName === null) {
+      const parent2 = stack.length ? stack[stack.length - 1] : null;
+      if (parent2)
+        componentName = parent2.componentName;
+    }
+    const parent = stack.length ? stack[stack.length - 1] : null;
+    const node = new Describe({
+      title: titleFromArg(head),
+      componentName,
+      parent
+    });
+    if (parent)
+      parent.children.push(node);
+    else
+      moduleTests.suites.push(node);
+    stack.push(node);
+    try {
+      fn();
+    } finally {
+      stack.pop();
+    }
   }
-  lookupTypeFor(name, inst) {
-    return this.transactor.comps.getCompFor(inst).scope.lookupComponent(name);
+  function test(title, fn) {
+    if (typeof title !== "string") {
+      throw new Error("test(title, fn): title must be a string");
+    }
+    if (typeof fn !== "function") {
+      throw new Error(`test(${JSON.stringify(title)}): fn must be a function`);
+    }
+    const parent = stack.length ? stack[stack.length - 1] : null;
+    if (!parent) {
+      throw new Error(`test(${JSON.stringify(title)}) must be called inside a describe()`);
+    }
+    parent.children.push(new Test({
+      title,
+      fn,
+      componentName: parent.componentName,
+      parent
+    }));
   }
+  return { describe, test, moduleTests };
 }
 
-class EventContext extends Dispatcher {
-  get name() {
-    return this.parent?.name ?? null;
-  }
-  get targetPath() {
-    return this.parent.targetPath;
-  }
-  stopPropagation() {
-    return this.parent.stopPropagation();
+// tools/core/test.js
+function buildPath(node) {
+  const parts = [];
+  let cur = node;
+  while (cur) {
+    parts.unshift(cur.title);
+    cur = cur.parent;
   }
+  return parts.join(" > ");
 }
-
-class RequestContext extends Dispatcher {
+function captureError(e) {
+  const out = { message: e.message, stack: e.stack };
+  if ("expected" in e)
+    out.expected = e.expected;
+  if ("actual" in e)
+    out.actual = e.actual;
+  return out;
 }
-
-class PathChanges extends PathBuilder {
-  constructor(dispatcher) {
-    super();
-    this.dispatcher = dispatcher;
+function buildStack({ components = [], macros = null, requestHandlers = null } = {}) {
+  const stack = new ComponentStack;
+  stack.registerComponents(components);
+  if (macros)
+    stack.registerMacros(macros);
+  if (requestHandlers)
+    stack.registerRequestHandlers(requestHandlers);
+  return stack;
+}
+async function driveStack(stack, value, phase, opts = {}) {
+  const transactor = new Transactor(stack.comps, value);
+  if (opts.onMessage)
+    transactor.state.onChange(({ val, old, info }) => {
+      const t = info?.transaction;
+      opts.onMessage({ kind: t?.handlerProp ?? "input", name: t?.name, args: t?.args, path: t?.path }, old, val);
+    });
+  dispatchPhase(rootDispatcher(transactor), new Path([]), phase, value);
+  await transactor.settle();
+  return transactor.state.val;
+}
+async function drive(cfg, value, phase, opts = {}) {
+  return driveStack(buildStack(cfg), value, phase, opts);
+}
+async function runTests({
+  getTests,
+  components = [],
+  path = null,
+  expect: expect2,
+  name = null,
+  grep = null,
+  bail = false,
+  requestHandlers = null,
+  macros = null
+} = {}) {
+  const counts = { pass: 0, fail: 0, skip: 0, total: 0 };
+  if (typeof getTests !== "function") {
+    return new TestReport({
+      modules: [new ModuleTestReport({ path, suites: [], counts })]
+    });
   }
-  send(name, args, opts) {
-    return this.dispatcher.sendAtPath(this.buildPath(), name, args, opts);
+  if (typeof expect2 !== "function") {
+    throw new Error("runTests: expect must be provided (e.g. chai's expect)");
   }
-  bubble(name, args, opts) {
-    return this.send(name, args, { skipSelf: true, bubbles: true, ...opts });
+  const { describe, test, moduleTests } = makeCollector({ path, components });
+  let _stack = null;
+  const getStack = () => _stack ??= buildStack({ components, macros, requestHandlers });
+  const driveLocal = (value, phase, opts = {}) => driveStack(getStack(), value, phase, opts);
+  await getTests({ describe, test, expect: expect2, drive: driveLocal });
+  let bailed = false;
+  async function visit(node) {
+    if (node instanceof Test) {
+      if (name !== null && node.componentName !== name)
+        return null;
+      const fullPath = buildPath(node);
+      if (grep !== null && !fullPath.includes(grep))
+        return null;
+      counts.total++;
+      if (bailed) {
+        counts.skip++;
+        return new TestResult({
+          title: node.title,
+          fullPath,
+          componentName: node.componentName,
+          status: "skip"
+        });
+      }
+      const start = performance.now();
+      try {
+        await node.fn();
+        counts.pass++;
+        return new TestResult({
+          title: node.title,
+          fullPath,
+          componentName: node.componentName,
+          status: "pass",
+          durationMs: performance.now() - start
+        });
+      } catch (e) {
+        counts.fail++;
+        if (bail)
+          bailed = true;
+        return new TestResult({
+          title: node.title,
+          fullPath,
+          componentName: node.componentName,
+          status: "fail",
+          durationMs: performance.now() - start,
+          error: captureError(e)
+        });
+      }
+    }
+    const childResults = [];
+    for (const child of node.children) {
+      const r = await visit(child);
+      if (r !== null)
+        childResults.push(r);
+    }
+    if (childResults.length === 0)
+      return null;
+    return new DescribeResult({
+      title: node.title,
+      componentName: node.componentName,
+      children: childResults
+    });
   }
-  buildPath() {
-    return this.dispatcher.path.concat(this.pathChanges);
+  const suiteResults = [];
+  for (const suite of moduleTests.suites) {
+    const r = await visit(suite);
+    if (r !== null)
+      suiteResults.push(r);
+  }
+  return new TestReport({
+    modules: [new ModuleTestReport({ path, suites: suiteResults, counts })]
+  });
+}
+
+// tools/core/test-console.js
+var PASS = "color: #0a0; font-weight: bold";
+var FAIL = "color: #c00; font-weight: bold";
+var SKIP = "color: #888";
+var DIM = "color: #888";
+var RESET = "color: inherit; font-weight: normal";
+function reportTestNode(node) {
+  if (node.children) {
+    const label = node.componentName ? `${node.title} [${node.componentName}]` : node.title;
+    console.group(label);
+    for (const child of node.children)
+      reportTestNode(child);
+    console.groupEnd();
+    return;
+  }
+  const dur = node.status === "skip" ? "" : ` (${Math.round(node.durationMs)}ms)`;
+  if (node.status === "pass") {
+    console.log(`%c✓%c ${node.title}%c${dur}`, PASS, RESET, DIM);
+  } else if (node.status === "skip") {
+    console.log(`%c○ ${node.title}%c (skipped)`, SKIP, RESET);
+  } else {
+    console.group(`%c✗%c ${node.title}%c${dur}`, FAIL, RESET, DIM);
+    console.error(node.error?.message ?? "(no error message)");
+    if (node.error && (("expected" in node.error) || ("actual" in node.error))) {
+      console.log("expected:", node.error.expected);
+      console.log("actual:  ", node.error.actual);
+    }
+    if (node.error?.stack)
+      console.log(node.error.stack);
+    console.groupEnd();
+  }
+}
+function reportTestReportToConsole(report) {
+  for (const m of report.modules) {
+    const label = `tutuca tests${m.path ? ` — ${m.path}` : ""}`;
+    console.group(label);
+    if (m.suites.length === 0) {
+      console.log("(no tests)");
+    } else {
+      for (const s of m.suites)
+        reportTestNode(s);
+    }
+    const c = m.counts;
+    const summary = `${c.pass} passed, ${c.fail} failed, ${c.skip} skipped (${c.total} total)`;
+    if (c.fail > 0)
+      console.error(`%c${summary}`, FAIL);
+    else if (c.total === 0)
+      console.log(`%c${summary}`, DIM);
+    else
+      console.log(`%c${summary}`, PASS);
+    console.groupEnd();
+  }
+  return report;
+}
+
+// tools/format/lint.js
+var UNSUPPORTED_EXPR_LABEL = {
+  ternary: "ternary expression",
+  comparison: "comparison",
+  logical: "logical expression",
+  "call-with-args": "method call with arguments"
+};
+function unsupportedExprMessage(info) {
+  const v = JSON.stringify(info.value);
+  const label = UNSUPPORTED_EXPR_LABEL[info.detected] ?? "expression";
+  switch (info.role) {
+    case "attr":
+      return `Unsupported ${label} ${v} in dynamic attribute ':${info.attr}'`;
+    case "directive":
+      return `Unsupported ${label} ${v} in directive '@${info.directive}'`;
+    case "if":
+      return `Unsupported ${label} ${v} in '@if.${info.attr}' condition`;
+    case "x-op":
+      return `Unsupported ${label} ${v} in <x ${info.op}>`;
+    default:
+      return `Unsupported ${label} ${v}`;
+  }
+}
+function badValueMessage(info) {
+  const v = JSON.stringify(info.value);
+  switch (info.role) {
+    case "attr":
+      return `Cannot parse value ${v} for attribute ':${info.attr}'`;
+    case "directive":
+      return `Cannot parse value ${v} for directive '@${info.directive}'`;
+    case "if":
+      return `Cannot parse condition ${v} for '@if.${info.attr}'`;
+    case "x-op":
+      return `Cannot parse value ${v} for <x ${info.op}>`;
+    case "handler-name":
+      return `Cannot parse handler name ${v}`;
+    case "handler-arg":
+      return `Cannot parse handler argument ${v}`;
+    case "macro-var":
+      return `Macro variable '^${info.name}' is not defined`;
+    default:
+      return `Cannot parse value ${v}`;
+  }
+}
+function tagDisplay(tag) {
+  return tag ? String(tag).toLowerCase() : null;
+}
+function fmtTagSuffix(info) {
+  const t = tagDisplay(info?.tag);
+  return t && t !== "x" ? ` on <${t}>` : "";
+}
+function fmtOriginSuffix(info) {
+  if (!info)
+    return "";
+  const parts = [];
+  if (info.originAttr) {
+    const branch = info.branch ? `[${info.branch}]` : "";
+    parts.push(`in ${info.originAttr}${branch}`);
+  }
+  if (info.handlerName) {
+    parts.push(`handler '${info.handlerName}'${info.argIndex !== undefined ? ` arg ${info.argIndex}` : ""}`);
+  }
+  const t = tagDisplay(info.tag);
+  if (t && t !== "x")
+    parts.push(`on <${t}>`);
+  return parts.length ? ` (${parts.join(", ")})` : "";
+}
+function fmtEventSuffix(info) {
+  if (info?.originAttr)
+    return ` in ${info.originAttr}`;
+  if (info?.eventName)
+    return ` in @on.${info.eventName}`;
+  return "";
+}
+function lintIdToMessage(id, info) {
+  switch (id) {
+    case "RENDER_IT_OUTSIDE_OF_LOOP":
+      return "<x render-it> used outside of a loop";
+    case "UNKNOWN_EVENT_MODIFIER": {
+      const mods = info.handler?.modifiers ?? [info.modifier];
+      const written = `@on.${info.name}+${mods.join("+")}`;
+      return `Unknown modifier '+${info.modifier}' in '${written}'`;
+    }
+    case "UNKNOWN_HANDLER_ARG_NAME":
+      return `Unknown handler argument '${info.name}'${fmtOriginSuffix(info)}`;
+    case "INPUT_HANDLER_NOT_IMPLEMENTED":
+      return `Input handler '${info.name}' is not implemented${fmtEventSuffix(info)}`;
+    case "INPUT_HANDLER_NOT_REFERENCED":
+      return `Input handler '${info.name}' is defined but never used — remove it or wire it to an @on.* event`;
+    case "INPUT_HANDLER_METHOD_NOT_IMPLEMENTED":
+      return `Method '$${info.name}' is not implemented${fmtEventSuffix(info)}`;
+    case "INPUT_HANDLER_FOR_INPUT_HANDLER_METHOD":
+      return `'$${info.name}' is a method reference, but '${info.name}' is defined as an input handler${fmtEventSuffix(info)}`;
+    case "INPUT_HANDLER_METHOD_FOR_INPUT_HANDLER":
+      return `'${info.name}' is an input handler reference, but '${info.name}' is defined as a method${fmtEventSuffix(info)}`;
+    case "FIELD_VAL_NOT_DEFINED":
+      return `Field '.${info.name}' is not defined${fmtOriginSuffix(info)}`;
+    case "FIELD_VAL_IS_METHOD":
+      return `'.${info.name}' reads a field, but '${info.name}' is defined as a method — use '$${info.name}'${fmtOriginSuffix(info)}`;
+    case "METHOD_VAL_NOT_DEFINED":
+      return `Method '$${info.name}' is not defined${fmtOriginSuffix(info)}`;
+    case "METHOD_VAL_IS_FIELD":
+      return `'$${info.name}' calls a method, but '${info.name}' is defined as a field — use '.${info.name}'${fmtOriginSuffix(info)}`;
+    case "DUPLICATE_ATTR_DEFINITION": {
+      const sources = info.sources?.length ? ` (${info.sources.join(", ")})` : "";
+      const tag = info.tag ? ` on <${String(info.tag).toLowerCase()}>` : "";
+      return `Attribute '${info.name}' is set ${info.sources?.length ?? "multiple"} times${sources}${tag}`;
+    }
+    case "IF_NO_BRANCH_SET":
+      return `'@if.${info.attr}' has no '@then' or '@else' branch — add '@then="…"' or '@else="…"' (or both)${fmtTagSuffix(info)}`;
+    case "UNKNOWN_REQUEST_NAME":
+      return `Unknown request '!${info.name}'${fmtOriginSuffix(info)}`;
+    case "UNKNOWN_COMPONENT_NAME":
+      return `Unknown component '${info.name}'${fmtOriginSuffix(info)}`;
+    case "ALT_HANDLER_NOT_DEFINED":
+      return `Alter handler '${info.name}' is not defined${fmtOriginSuffix(info)}`;
+    case "ALT_HANDLER_NOT_REFERENCED":
+      return `Alter handler '${info.name}' is defined but never used — remove it or reference it from @when, @enrich-with, or @loop-with`;
+    case "DYN_VAL_NOT_DEFINED":
+      return `Dynamic variable '*${info.name}' is not defined${fmtOriginSuffix(info)}`;
+    case "DYN_ALIAS_NOT_REFERENCED":
+      return `Lookup '${info.name}' is defined but never used — remove it or reference it as '*${info.name}' in a view`;
+    case "PROVIDE_NOT_ADDRESSABLE":
+      return `Provide '${info.name}' value '${info.value}' must be a field ('.f') or seq-access ('.s[.k]') — a method/constant can't be a render target`;
+    case "LOOKUP_BAD_SHAPE":
+      return `Lookup '${info.name}' has an invalid shape: ${info.problem}`;
+    case "LOOKUP_TARGET_MALFORMED":
+      return `Lookup '${info.name}' target '${info.target}' must be 'Producer.provideName' (a string, or the 'for' of { for, default })`;
+    case "UNKNOWN_MACRO_ARG":
+      return `Argument '${info.name}' is not declared in macro '${info.macroName}'`;
+    case "UNKNOWN_DIRECTIVE":
+      return `Unknown directive '@${info.name}=${JSON.stringify(info.value)}'${fmtTagSuffix(info)}`;
+    case "UNKNOWN_X_OP":
+      return `Unknown <x> op '${info.name}=${JSON.stringify(info.value)}'${fmtTagSuffix(info)}`;
+    case "UNKNOWN_X_ATTR":
+      return `Unknown attribute '${info.name}=${JSON.stringify(info.value)}' on <x ${info.op}>${fmtTagSuffix(info)}`;
+    case "MAYBE_DROP_AT_PREFIX": {
+      const written = info.value !== undefined ? `${info.name}=${JSON.stringify(info.value)}` : info.name;
+      return `'${written}' on <x> looks like a directive but is actually an x op/attr written with a leading '@'`;
+    }
+    case "MAYBE_ADD_AT_PREFIX":
+      return `'${info.name}' on <${(info.tag ?? "").toLowerCase()}> is a plain attribute, but '@${info.name}' is a directive — add the leading '@'`;
+    case "BAD_VALUE":
+      return `${badValueMessage(info)}${fmtTagSuffix(info)}`;
+    case "UNSUPPORTED_EXPR_SYNTAX":
+      return `${unsupportedExprMessage(info)}${fmtTagSuffix(info)}`;
+    case "REDUNDANT_TEMPLATE_STRING":
+      return `Redundant template string — '{${info.simpler}}' should be just '${info.simpler}'${fmtOriginSuffix(info)}`;
+    case "PLACEHOLDERLESS_TEMPLATE_STRING":
+      return `Template string has no dynamic parts — use the string literal ${info.literal} instead${fmtOriginSuffix(info)}`;
+    case "UNKNOWN_COMPONENT_SPEC_KEY":
+      return `Unknown component spec key '${info.key}' — value will be ignored at runtime`;
+    case "COMP_FIELD_BAD_SHAPE":
+      return info.kind === "args-not-object" ? `Field '${info.fieldName}': in { component, args }, 'args' must be a plain object, got ${info.got}` : `Field '${info.fieldName}': in { component, args }, 'component' must be the component name as a string, got ${info.gotName ? `the ${info.gotName} class` : info.got}`;
+    case "HTML_TAG_NAME_HAS_UPPERCASE":
+      return `Tag <${info.raw}> will be lowercased to <${info.lowercased}>${fmtLocationSuffix(info)}`;
+    case "HTML_SVG_TAG_WILL_LOWERCASE":
+      return `SVG tag <${info.raw}> is not in the WHATWG case-correction list — will be lowercased to <${info.lowercased}>${fmtLocationSuffix(info)}`;
+    case "HTML_TAG_NOT_ALLOWED_IN_PARENT":
+      return `<${info.tag}> not allowed under <${info.parent ?? "?"}> in ${info.mode} — ${htmlActionPhrase(info.action, info.tag, info.parent)}${fmtLocationSuffix(info)}`;
+    case "HTML_TEXT_NOT_ALLOWED_IN_PARENT":
+      return `Non-whitespace text not allowed in ${info.mode}: ${JSON.stringify(info.snippet)}${fmtLocationSuffix(info)}`;
+    case "HTML_VOID_ELEMENT_HAS_CLOSE_TAG":
+      return `Void element <${info.tag}> has an explicit close tag${fmtLocationSuffix(info)}`;
+    case "HTML_DUPLICATE_FORM":
+      return `Nested <form> — the inner form will be dropped by the parser${fmtLocationSuffix(info)}`;
+    case "HTML_NESTED_INTERACTIVE":
+      return `<${info.tag}> nested inside another <${info.tag}> — adoption agency will reorder${fmtLocationSuffix(info)}`;
+    case "HTML_MISNESTED_FORMATTING":
+      return `Misnested formatting tag </${info.tag}> — adoption agency will reorder nodes${fmtLocationSuffix(info)}`;
+    case "HTML_UNEXPECTED_END_TAG":
+      return `Unexpected end tag </${info.tag}>${fmtLocationSuffix(info)}`;
+    case "HTML_UNCLOSED_BEFORE_END":
+      return `<${info.unclosed}> still open when </${info.tag}> was seen — implicitly closed${fmtLocationSuffix(info)}`;
+    case "HTML_DUPLICATE_ATTRIBUTE":
+      return `Duplicate attribute '${info.name}' — second occurrence dropped${fmtLocationSuffix(info)}`;
+    case "HTML_ATTRIBUTES_ON_END_TAG":
+      return `Attributes on end tag </${info.tag}> — dropped by the parser${fmtLocationSuffix(info)}`;
+    case "HTML_SELF_CLOSING_END_TAG":
+      return `Self-closing end tag </${info.tag}/> — trailing '/' is meaningless${fmtLocationSuffix(info)}`;
+    case "HTML_MISSING_ATTRIBUTE_VALUE":
+      return `Attribute '${info.name}' is missing a value${fmtLocationSuffix(info)}`;
+    case "HTML_CDATA_IN_HTML_NAMESPACE":
+      return `CDATA section in HTML namespace — reinterpreted as a bogus comment${fmtLocationSuffix(info)}`;
+    case "HTML_BOGUS_COMMENT":
+      return `Bogus comment — content dropped by the parser${fmtLocationSuffix(info)}`;
+    case "HTML_SVG_ATTR_WILL_LOWERCASE":
+      return `SVG attribute '${info.raw}' will be rewritten to '${info.canonical}'${fmtLocationSuffix(info)}`;
+    case "HTML_MATHML_ATTR_WILL_LOWERCASE":
+      return `MathML attribute '${info.raw}' will be rewritten to '${info.canonical}'${fmtLocationSuffix(info)}`;
+    case "ASYNC_HANDLER":
+      return `Handler '${info.name}' in '${info.channel}' is an async function — handlers must be synchronous and return the updated state (an async function returns a Promise the framework won't await)`;
+    case "TOP_LEVEL_AT_RULE_IN_SCOPED_STYLE":
+      return `'@${info.atRule}' is a top-level-only at-rule, but '${info.key}' is wrapped in a component-scoped selector ([data-cid=…]{…}) where it is invalid and silently dropped — move it to 'globalStyle'${fmtLocationSuffix(info)}`;
+    case "GLOBAL_SELECTOR_IN_SCOPED_STYLE":
+      return `Selector '${info.selector}' targets the document root, but '${info.key}' is wrapped in a component-scoped selector, so it becomes a descendant selector that never matches — move it to 'globalStyle'${fmtLocationSuffix(info)}`;
+    case "LINT_ERROR":
+      return info.message;
+    default:
+      return id;
+  }
+}
+function suggestionToMessage(suggestion) {
+  if (!suggestion)
+    return null;
+  switch (suggestion.kind) {
+    case "replace-name":
+      return `did you mean '${suggestion.to}'?`;
+    case "drop-prefix":
+      return `did you mean '${suggestion.to}'? (drop the leading '${suggestion.from.slice(0, suggestion.from.length - suggestion.to.length)}')`;
+    case "add-prefix":
+      return `did you mean '${suggestion.to}'? (add the leading '${suggestion.to.slice(0, suggestion.to.length - suggestion.from.length)}')`;
+    case "remove":
+      return `remove ${suggestion.what}`;
+    case "rewrite":
+      return `use '${suggestion.to}' instead of '${suggestion.from}'`;
+    case "wrap":
+      return `wrap it in ${suggestion.to}`;
+    case "rephrase":
+      return suggestion.text ?? null;
+    default:
+      return null;
+  }
+}
+function fmtLocationSuffix(info) {
+  const loc = info?.location;
+  if (!loc)
+    return "";
+  return ` at line ${loc.line}, col ${loc.column}`;
+}
+function htmlActionPhrase(action, tag, parent) {
+  switch (action) {
+    case "ignored":
+      return `the parser will drop this <${tag}>`;
+    case "drop":
+      return `the parser will drop this <${tag}>`;
+    case "auto-close-implicit":
+      return `the parser will close <${parent ?? "?"}> first, then place <${tag}> as a sibling`;
+    case "foster-parent":
+      return `the parser will move <${tag}> outside <${parent ?? "?"}> (foster-parenting)`;
+    case "foreign-breakout":
+      return `the parser will exit foreign content and re-process <${tag}> in HTML mode`;
+    default:
+      return `parser action: ${action}`;
   }
 }
 
@@ -8208,9 +8371,11 @@ export {
   setIn,
   set,
   runTests,
+  resolveArgs,
   reportTestReportToConsole,
   removeIn,
   remove,
+  phaseOps,
   mergeWith,
   mergeDeepWith,
   mergeDeep,
@@ -8246,7 +8411,9 @@ export {
   getComponentsDocs,
   get,
   fromJS,
+  drive,
   docComponents,
+  dispatchPhase,
   css,
   component,
   compileClassesToStyleText,