@capillaryjs/capillary-ui 1.0.0 → 1.2.0

package/dist/{jsx-dev-runtime-D3UnwrKT.js → jsx-runtime-BD_q3rPg.js}

@@ -1,12 +1,13 @@
-var ge = Object.defineProperty;
-var we = (e, t, n) => t in e ? ge(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var l = (e, t, n) => we(e, typeof t != "symbol" ? t + "" : t, n);
-const D = "data-cap-structural-styles";
-let Se = 1;
-class J {
-  constructor(t = `runtime-${Se++}`) {
-    l(this, "id");
-    l(this, "cssFragments", /* @__PURE__ */ new Map());
+var Te = Object.defineProperty;
+var je = (e, t, n) => t in e ? Te(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var c = (e, t, n) => je(e, typeof t != "symbol" ? t + "" : t, n);
+import { defaultDiagnosticScope as Pe, Diagnostics as u, diagnosticInfo as Ae, EventBubble as $e } from "@capillaryjs/capillary";
+const G = "data-cap-structural-styles";
+let ke = 1;
+class re {
+  constructor(t = `runtime-${ke++}`) {
+    c(this, "id");
+    c(this, "cssFragments", /* @__PURE__ */ new Map());
     if (typeof t != "string") throw new TypeError("StyleRegistry id must be a string");
     this.id = t;
   }
@@ -20,136 +21,136 @@ class J {
     if (typeof t != "string") throw new TypeError("Component CSS must be a string");
     if (typeof n != "string" || n.trim().length === 0)
       throw new TypeError("Component CSS host must be a non-empty selector");
-    const r = t.trim();
-    if (r.length === 0) return this;
-    if (!r.includes("&")) return this.registerCSS(r);
-    const i = `host:${r}`, s = this.cssFragments.get(i);
-    return s == null ? this.cssFragments.set(i, {
+    const i = t.trim();
+    if (i.length === 0) return this;
+    if (!i.includes("&")) return this.registerCSS(i);
+    const r = `host:${i}`, s = this.cssFragments.get(r);
+    return s == null ? this.cssFragments.set(r, {
       kind: "host",
-      css: r,
+      css: i,
       hosts: /* @__PURE__ */ new Set([n.trim()])
     }) : s.kind === "host" && s.hosts.add(n.trim()), this;
   }
   generateCSS() {
-    return [...this.cssFragments.values()].map((t) => t.kind === "raw" ? t.css : Q(t.css, [...t.hosts])).join(`
+    return [...this.cssFragments.values()].map((t) => t.kind === "raw" ? t.css : se(t.css, [...t.hosts])).join(`
 
 `);
   }
   injectAll(t = globalThis.document) {
     if ((t == null ? void 0 : t.head) == null)
       throw new TypeError("StyleRegistry.injectAll requires a document with a head");
-    const n = `style[${D}="${Ce(this.id)}"]`;
-    let r = t.head.querySelector(n);
-    r == null && (r = t.createElement("style"), r.setAttribute(D, this.id), t.head.prepend(r));
-    const i = this.generateCSS();
-    return r.textContent !== i && (r.textContent = i), r;
+    const n = `style[${G}="${Ne(this.id)}"]`;
+    let i = t.head.querySelector(n);
+    i == null && (i = t.createElement("style"), i.setAttribute(G, this.id), t.head.prepend(i));
+    const r = this.generateCSS();
+    return i.textContent !== r && (i.textContent = r), i;
   }
   reset() {
     this.cssFragments.clear();
   }
 }
-function ve() {
-  return new J();
+function ze() {
+  return new re();
 }
-const Ee = new J("");
-function Ce(e) {
+const _e = new re("");
+function Ne(e) {
   return e.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
 }
-function Q(e, t) {
-  let n = "", r = 0;
-  for (; r < e.length; ) {
-    const i = Le(e, r);
-    if (i < 0) return n + e.slice(r);
-    const s = Te(e, i);
-    if (s < 0) return n + e.slice(r);
-    const o = e.slice(r, i), a = e.slice(i + 1, s), c = o.trim();
-    n += c.startsWith("@") ? `${o}{${Q(a, t)}}` : `${Re(o, t)}{${a}}`, r = s + 1;
+function se(e, t) {
+  let n = "", i = 0;
+  for (; i < e.length; ) {
+    const r = Ue(e, i);
+    if (r < 0) return n + e.slice(i);
+    const s = Fe(e, r);
+    if (s < 0) return n + e.slice(i);
+    const o = e.slice(i, r), a = e.slice(r + 1, s), l = o.trim();
+    n += l.startsWith("@") ? `${o}{${se(a, t)}}` : `${Ie(o, t)}{${a}}`, i = s + 1;
   }
   return n;
 }
-function Re(e, t) {
-  var o, a, c;
+function Ie(e, t) {
+  var o, a, l;
   if (t.length === 1 || !e.includes("&"))
     return t.length === 1 ? e.replaceAll("&", t[0]) : e;
-  const n = ((o = e.match(/^\s*/)) == null ? void 0 : o[0]) ?? "", r = ((a = e.match(/\s*$/)) == null ? void 0 : a[0]) ?? "", i = Oe(e.trim()), s = ((c = n.match(/(?:^|\n)([ \t]*)$/)) == null ? void 0 : c[1]) ?? "";
-  return n + i.flatMap((u) => u.includes("&") ? t.map((p) => u.replaceAll("&", p)) : [u]).join(`,
-${s}`) + r;
+  const n = ((o = e.match(/^\s*/)) == null ? void 0 : o[0]) ?? "", i = ((a = e.match(/\s*$/)) == null ? void 0 : a[0]) ?? "", r = Me(e.trim()), s = ((l = n.match(/(?:^|\n)([ \t]*)$/)) == null ? void 0 : l[1]) ?? "";
+  return n + r.flatMap((f) => f.includes("&") ? t.map((p) => f.replaceAll("&", p)) : [f]).join(`,
+${s}`) + i;
 }
-function Oe(e) {
+function Me(e) {
   const t = [];
-  let n = 0, r = 0, i = 0, s = null;
+  let n = 0, i = 0, r = 0, s = null;
   for (let o = 0; o < e.length; o += 1) {
     const a = e[o];
     if (s != null) {
       a === "\\" ? o += 1 : a === s && (s = null);
       continue;
     }
-    a === '"' || a === "'" ? s = a : a === "(" ? r += 1 : a === ")" ? r -= 1 : a === "[" ? i += 1 : a === "]" ? i -= 1 : a === "," && r === 0 && i === 0 && (t.push(e.slice(n, o).trim()), n = o + 1);
+    a === '"' || a === "'" ? s = a : a === "(" ? i += 1 : a === ")" ? i -= 1 : a === "[" ? r += 1 : a === "]" ? r -= 1 : a === "," && i === 0 && r === 0 && (t.push(e.slice(n, o).trim()), n = o + 1);
   }
   return t.push(e.slice(n).trim()), t.filter(Boolean);
 }
-function Le(e, t) {
+function Ue(e, t) {
   for (let n = t; n < e.length; n += 1) {
-    const r = e[n];
-    if (r === '"' || r === "'")
-      n = X(e, n);
-    else if (r === "/" && e[n + 1] === "*")
-      n = ee(e, n);
-    else if (r === "{")
+    const i = e[n];
+    if (i === '"' || i === "'")
+      n = oe(e, n);
+    else if (i === "/" && e[n + 1] === "*")
+      n = ae(e, n);
+    else if (i === "{")
       return n;
   }
   return -1;
 }
-function Te(e, t) {
+function Fe(e, t) {
   let n = 1;
-  for (let r = t + 1; r < e.length; r += 1) {
-    const i = e[r];
-    if (i === '"' || i === "'")
-      r = X(e, r);
-    else if (i === "/" && e[r + 1] === "*")
-      r = ee(e, r);
-    else if (i === "{")
+  for (let i = t + 1; i < e.length; i += 1) {
+    const r = e[i];
+    if (r === '"' || r === "'")
+      i = oe(e, i);
+    else if (r === "/" && e[i + 1] === "*")
+      i = ae(e, i);
+    else if (r === "{")
       n += 1;
-    else if (i === "}" && --n === 0)
-      return r;
+    else if (r === "}" && --n === 0)
+      return i;
   }
   return -1;
 }
-function X(e, t) {
+function oe(e, t) {
   const n = e[t];
-  for (let r = t + 1; r < e.length; r += 1)
-    if (e[r] === "\\") r += 1;
-    else if (e[r] === n) return r;
+  for (let i = t + 1; i < e.length; i += 1)
+    if (e[i] === "\\") i += 1;
+    else if (e[i] === n) return i;
   return e.length;
 }
-function ee(e, t) {
+function ae(e, t) {
   const n = e.indexOf("*/", t + 2);
   return n < 0 ? e.length : n + 1;
 }
-const te = /* @__PURE__ */ new WeakSet(), ne = /* @__PURE__ */ new WeakSet();
-function st(e) {
+const le = /* @__PURE__ */ new WeakSet(), ce = /* @__PURE__ */ new WeakSet();
+function yt(e) {
   if (typeof e != "string" || e.trim() === "")
     throw new TypeError("Service name must be a non-empty string");
   const t = Object.freeze({ name: e.trim() });
-  return te.add(t), t;
+  return le.add(t), t;
 }
-function ot(e, t) {
-  if (I(e), typeof t != "function")
+function wt(e, t) {
+  if (x(e), typeof t != "function")
     throw new TypeError(`Service provider "${e.name}" requires a factory function`);
   const n = Object.freeze({ key: e, create: t });
-  return ne.add(n), n;
+  return ce.add(n), n;
 }
-class re {
+class ue {
   constructor(t = []) {
-    l(this, "providers", /* @__PURE__ */ new Map());
-    l(this, "instances", /* @__PURE__ */ new Map());
-    l(this, "creationOrder", []);
-    l(this, "resolving", []);
-    l(this, "disposed", !1);
+    c(this, "providers", /* @__PURE__ */ new Map());
+    c(this, "instances", /* @__PURE__ */ new Map());
+    c(this, "creationOrder", []);
+    c(this, "resolving", []);
+    c(this, "disposed", !1);
     if (!Array.isArray(t))
       throw new TypeError("ServiceScope providers must be an array");
     for (const n of t) {
-      if (Ae(n), this.providers.has(n.key))
+      if (Be(n), this.providers.has(n.key))
         throw new Error(`Service "${n.key.name}" is registered more than once`);
       this.providers.set(n.key, n);
     }
@@ -158,21 +159,21 @@ class re {
     return this.disposed;
   }
   has(t) {
-    return this.assertActive(), I(t), this.providers.has(t);
+    return this.assertActive(), x(t), this.providers.has(t);
   }
   require(t) {
-    if (this.assertActive(), I(t), this.instances.has(t)) return this.instances.get(t);
+    if (this.assertActive(), x(t), this.instances.has(t)) return this.instances.get(t);
     const n = this.providers.get(t);
     if (n == null) throw new Error(`Service "${t.name}" is not registered`);
-    const r = this.resolving.indexOf(t);
-    if (r >= 0) {
-      const i = [...this.resolving.slice(r), t].map((s) => s.name).join(" -> ");
-      throw new Error(`Circular service dependency: ${i}`);
+    const i = this.resolving.indexOf(t);
+    if (i >= 0) {
+      const r = [...this.resolving.slice(i), t].map((s) => s.name).join(" -> ");
+      throw new Error(`Circular service dependency: ${r}`);
     }
     this.resolving.push(t);
     try {
-      const i = n.create(this);
-      return this.instances.set(t, i), this.creationOrder.push(t), i;
+      const r = n.create(this);
+      return this.instances.set(t, r), this.creationOrder.push(t), r;
     } finally {
       this.resolving.pop();
     }
@@ -182,12 +183,12 @@ class re {
     this.disposed = !0;
     const t = [];
     for (const n of [...this.creationOrder].reverse()) {
-      const r = this.instances.get(n);
+      const i = this.instances.get(n);
       try {
-        const i = ze(r);
-        i != null && i.call(r);
-      } catch (i) {
-        t.push(i);
+        const r = Ve(i);
+        r != null && r.call(i);
+      } catch (r) {
+        t.push(r);
       }
     }
     if (this.instances.clear(), this.creationOrder.length = 0, this.resolving.length = 0, t.length === 1) throw t[0];
@@ -198,25 +199,25 @@ class re {
     if (this.disposed) throw new Error("ServiceScope has been disposed");
   }
 }
-function je(e = []) {
-  return new re(e);
+function xe(e = []) {
+  return new ue(e);
 }
-function Pe(e) {
-  return e != null && (typeof e == "object" || typeof e == "function") && te.has(e);
+function qe(e) {
+  return e != null && (typeof e == "object" || typeof e == "function") && le.has(e);
 }
-function I(e) {
-  if (!Pe(e)) throw new TypeError("Expected a service key created by defineService()");
+function x(e) {
+  if (!qe(e)) throw new TypeError("Expected a service key created by defineService()");
 }
-function Ae(e) {
-  if (e == null || typeof e != "object" && typeof e != "function" || !ne.has(e))
+function Be(e) {
+  if (e == null || typeof e != "object" && typeof e != "function" || !ce.has(e))
     throw new TypeError("Expected a service provider created by provideService()");
 }
-function ze(e) {
+function Ve(e) {
   if (e == null || typeof e != "object" && typeof e != "function") return null;
   const t = Reflect.get(e, "dispose");
   return typeof t == "function" ? t : null;
 }
-const T = Object.freeze({
+const P = Object.freeze({
   breadcrumbLabel: "Breadcrumb",
   checkboxOptionLabel: "Option",
   checkboxStateLabel: (e, t) => `${e}: ${t}`,
@@ -261,40 +262,40 @@ const T = Object.freeze({
   treeViewLoadError: "Unable to load tree items",
   treeViewLoading: "Loading tree items…"
 });
-class ie {
+class fe {
   constructor(t, n) {
-    l(this, "locale");
-    l(this, "messages");
+    c(this, "locale");
+    c(this, "messages");
     this.locale = t, this.messages = n, Object.freeze(this);
   }
   message(t) {
     return this.messages[t];
   }
 }
-const _e = new ie(
+const De = new fe(
   void 0,
-  T
+  P
 );
-function ke(e) {
-  if (e == null) return _e;
+function He(e) {
+  if (e == null) return De;
   if (typeof e != "object" || Array.isArray(e))
     throw new TypeError("Capillary UI localization must be an object");
-  const t = $e(e.locale), n = e.messages;
+  const t = We(e.locale), n = e.messages;
   if (n != null && (typeof n != "object" || Array.isArray(n)))
     throw new TypeError("Capillary UI localization messages must be an object");
-  const r = { ...T };
+  const i = { ...P };
   if (n != null)
-    for (const i of Object.keys(T)) {
-      const s = n[i];
+    for (const r of Object.keys(P)) {
+      const s = n[r];
       if (s === void 0) continue;
-      const o = T[i];
+      const o = P[r];
       if (typeof s != typeof o)
-        throw new TypeError(`Capillary UI localization message "${i}" has the wrong type`);
-      Object.assign(r, { [i]: s });
+        throw new TypeError(`Capillary UI localization message "${r}" has the wrong type`);
+      Object.assign(i, { [r]: s });
     }
-  return new ie(t, Object.freeze(r));
+  return new fe(t, Object.freeze(i));
 }
-function $e(e) {
+function We(e) {
   if (typeof e != "string" || e.trim() === "")
     throw new TypeError("Capillary UI localization locale must be a non-empty BCP 47 language tag");
   try {
@@ -303,7 +304,7 @@ function $e(e) {
     throw new RangeError(`Invalid Capillary UI localization locale: ${e}`, { cause: t });
   }
 }
-const Ne = /* @__PURE__ */ new Set([
+const Ke = /* @__PURE__ */ new Set([
   "annotation-xml",
   "color-profile",
   "font-face",
@@ -313,27 +314,28 @@ const Ne = /* @__PURE__ */ new Set([
   "font-face-name",
   "missing-glyph"
 ]);
-class M {
-  constructor(t = {}, n = ve()) {
-    l(this, "styleRegistry");
-    l(this, "services");
-    l(this, "router");
-    l(this, "localization");
-    l(this, "routedRoots", /* @__PURE__ */ new WeakSet());
+class V {
+  constructor(t = {}, n = ze()) {
+    c(this, "styleRegistry");
+    c(this, "services");
+    c(this, "router");
+    c(this, "localization");
+    c(this, "diagnosticScope");
+    c(this, "routedRoots", /* @__PURE__ */ new WeakSet());
     if (t == null || typeof t != "object" || Array.isArray(t))
       throw new TypeError("CapillaryUiRuntime options must be an object");
     if (Object.hasOwn(t, "elementNames"))
       throw new TypeError("CapillaryUiRuntime no longer supports configurable element names");
-    if (this.styleRegistry = n, this.localization = ke(t.localization), this.services = t.services ?? je(), !(this.services instanceof re))
+    if (this.styleRegistry = n, this.diagnosticScope = t.diagnosticScope ?? Pe, this.localization = He(t.localization), this.services = t.services ?? xe(), !(this.services instanceof ue))
       throw new TypeError("Capillary UI services must be a ServiceScope");
     if (this.router = t.router ?? null, this.router != null && (typeof this.router != "object" || typeof this.router.openScope != "function" || typeof this.router.completeScope != "function"))
       throw new TypeError("Capillary UI router must be a BrowserRouter");
   }
   /** Resolve a fixed one-hyphen public host name for a built-in component. */
   resolveElementName(t) {
-    se(t, "Capillary UI component host name");
+    pe(t, "Capillary UI component host name");
     const n = `cap-${t.replaceAll("-", "")}`;
-    return Ie(n), n;
+    return Ye(n), n;
   }
   resolveHostSelector(t, n) {
     if (typeof t != "string") throw new TypeError("Host selector must be a string");
@@ -344,17 +346,17 @@ class M {
     return t.replaceAll("&", this.resolveElementName(n));
   }
   create(t, ...n) {
-    const r = new t(...n);
-    return r._setRuntime(this), r;
+    const i = u.withScope(this.diagnosticScope, () => new t(...n));
+    return i._setRuntime(this), i;
   }
-  mount(t, n, r = null) {
+  mount(t, n, i = null) {
     t._setRuntime(this);
-    let i = null;
-    this.router != null && !this.routedRoots.has(t) && (this.routedRoots.add(t), i = this.router.openScope(this.router.root, t), t.onCleanup(i));
+    let r = null;
+    this.router != null && !this.routedRoots.has(t) && (this.routedRoots.add(t), r = this.router.openScope(this.router.root, t), t.onCleanup(r));
     try {
-      t.mount(n, r), this.router != null && i != null && this.router.completeScope(this.router.root, t);
+      t.mount(n, i), this.router != null && r != null && this.router.completeScope(this.router.root, t);
     } catch (s) {
-      throw i == null || i(), s;
+      throw r == null || r(), s;
     }
     return t;
   }
@@ -367,19 +369,19 @@ class M {
     return this.styleRegistry.injectAll(t);
   }
 }
-function at(e = {}) {
-  return new M(e);
+function St(e = {}) {
+  return new V(e);
 }
-const K = new M({}, Ee);
-function se(e, t) {
+const J = new V({}, _e);
+function pe(e, t) {
   if (typeof e != "string" || !/^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/.test(e))
     throw new TypeError(`${t} must be a lowercase kebab-case name`);
 }
-function Ie(e) {
-  if (se(e, "Capillary UI element name"), !e.includes("-") || Ne.has(e))
+function Ye(e) {
+  if (pe(e, "Capillary UI element name"), !e.includes("-") || Ke.has(e))
     throw new TypeError(`Capillary UI element name must be a non-reserved name containing a hyphen: ${e}`);
 }
-const P = Symbol.for("@capillaryjs/capillary-ui.Fragment"), oe = /* @__PURE__ */ new WeakSet(), Ue = /* @__PURE__ */ new Set([
+const $ = Symbol.for("@capillaryjs/capillary-ui.Fragment"), de = /* @__PURE__ */ new WeakSet(), Ze = /* @__PURE__ */ new Set([
   "allowFullScreen",
   "async",
   "autoFocus",
@@ -403,7 +405,7 @@ const P = Symbol.for("@capillaryjs/capillary-ui.Fragment"), oe = /* @__PURE__ */
   "required",
   "reversed",
   "selected"
-]), xe = /* @__PURE__ */ new Set([
+]), Ge = /* @__PURE__ */ new Set([
   "checked",
   "defaultChecked",
   "defaultValue",
@@ -417,58 +419,58 @@ const P = Symbol.for("@capillaryjs/capillary-ui.Fragment"), oe = /* @__PURE__ */
   "selectedIndex",
   "tabIndex",
   "value"
-]), W = "data-cap";
-function lt(e) {
-  H(e, "live");
+]), Q = "data-cap";
+function vt(e) {
+  Z(e, "live");
   const t = Object.freeze({ emitter: e });
-  return oe.add(t), t;
+  return de.add(t), t;
 }
-function A(e, t = null, ...n) {
-  const r = t ?? {};
-  if (typeof r != "object" || Array.isArray(r))
+function k(e, t = null, ...n) {
+  const i = t ?? {};
+  if (typeof i != "object" || Array.isArray(i))
     throw new TypeError("VNode props must be an object or null");
   const {
-    children: i,
+    children: r,
     key: s = null,
     ...o
-  } = r;
+  } = i;
   return {
     type: e,
     key: s,
     props: {
       ...o,
-      children: ae([i, n])
+      children: he([r, n])
     }
   };
 }
-function Me(e, ...t) {
-  return e.reduce((n, r, i) => n + r + String(t[i] ?? ""), "");
+function Je(e, ...t) {
+  return e.reduce((n, i, r) => n + i + String(t[r] ?? ""), "");
 }
 const h = class h {
   constructor(t = {}) {
-    l(this, "props");
-    l(this, "dom", null);
+    c(this, "props");
+    c(this, "dom", null);
     /** @internal */
-    l(this, "_rendered", null);
+    c(this, "_rendered", null);
     /** @internal */
-    l(this, "_childComponents", /* @__PURE__ */ new Set());
+    c(this, "_childComponents", /* @__PURE__ */ new Set());
     /** @internal Component ancestry used to enforce structural invariants. */
-    l(this, "_parentComponent", null);
-    l(this, "initialized", !1);
-    l(this, "mounted", !1);
-    l(this, "destroyed", !1);
-    l(this, "updating", !1);
-    l(this, "updateRequested", !1);
-    l(this, "cleanupFunctions", /* @__PURE__ */ new Set());
-    l(this, "watched", /* @__PURE__ */ new Map());
-    l(this, "renderReadSubscriptions", /* @__PURE__ */ new Map());
-    l(this, "collectingRenderReads", null);
+    c(this, "_parentComponent", null);
+    c(this, "initialized", !1);
+    c(this, "mounted", !1);
+    c(this, "destroyed", !1);
+    c(this, "updating", !1);
+    c(this, "updateRequested", !1);
+    c(this, "cleanupFunctions", /* @__PURE__ */ new Set());
+    c(this, "watched", /* @__PURE__ */ new Map());
+    c(this, "renderReadSubscriptions", /* @__PURE__ */ new Map());
+    c(this, "collectingRenderReads", null);
     /** @internal */
-    l(this, "_runtime", K);
+    c(this, "_runtime", J);
     /** @internal Route lineage inherited by nested routed components. */
-    l(this, "_routeContext", null);
+    c(this, "_routeContext", null);
     /** JSX component for this instance's runtime-configured custom host. */
-    l(this, "Host", ({
+    c(this, "Host", ({
       children: t = [],
       ...n
     }) => this.host(n, t));
@@ -482,20 +484,33 @@ const h = class h {
       throw new TypeError("Component.new() requires a Component constructor");
     return n.mount();
   }
-  static registerStyles(t = K, n = /* @__PURE__ */ new Set()) {
+  static registerStyles(t = J, n = /* @__PURE__ */ new Set()) {
     if (n.has(this)) return;
     n.add(this);
-    const r = this.hostName ?? null, i = nt(this);
-    for (const s of i)
-      Object.hasOwn(s, "css") && s.css && (r == null ? t.styleRegistry.registerCSS(s.css) : t.styleRegistry.registerHostCSS(
+    const i = this.hostName ?? null, r = ht(this);
+    for (const s of r)
+      Object.hasOwn(s, "css") && s.css && (i == null ? t.styleRegistry.registerCSS(s.css) : t.styleRegistry.registerHostCSS(
         s.css,
-        t.resolveElementName(r)
+        t.resolveElementName(i)
       ));
-    for (const s of i)
+    for (const s of r)
       if (Object.hasOwn(s, "dependencies"))
         for (const o of s.dependencies ?? [])
           o.registerStyles(t, n);
   }
+  get diagnosticScope() {
+    var t;
+    return this.constructor.diagnosticScope ?? ((t = this._parentComponent) == null ? void 0 : t.diagnosticScope) ?? this._runtime.diagnosticScope;
+  }
+  [Ae]() {
+    return {
+      kind: "component",
+      label: T(this),
+      scope: this.diagnosticScope,
+      sources: [...this.watched.keys(), ...this.renderReadSubscriptions.keys()],
+      targets: [...this._childComponents]
+    };
+  }
   /** One-time setup hook. Constructors must not subscribe or render. */
   initialize() {
   }
@@ -504,25 +519,25 @@ const h = class h {
   }
   /** Render this component's configured custom host element. */
   host(t = null, ...n) {
-    const r = this.constructor, i = r.hostName;
-    if (i == null)
+    const i = this.constructor, r = i.hostName;
+    if (r == null)
       throw new Error(`${this.constructor.name} does not declare a custom host name`);
     const {
       class: s,
       className: o,
       ...a
-    } = t ?? {}, c = o ?? s, u = this.props.island === !0 ? rt(c, "island") : c;
-    return A(this._runtime.resolveElementName(i), {
+    } = t ?? {}, l = o ?? s, f = this.props.island === !0 ? mt(l, "island") : l;
+    return k(this._runtime.resolveElementName(r), {
       ...a,
-      ...u == null ? {} : { className: u },
-      "data-cap-component": i,
-      ...r.dataSurface == null ? {} : { "data-cap-surface": r.dataSurface }
+      ...f == null ? {} : { className: f },
+      "data-cap-component": r,
+      ...i.dataSurface == null ? {} : { "data-cap-surface": i.dataSurface }
     }, ...n);
   }
   /** @internal Assign an immutable application runtime before initialization or mounting. */
   _setRuntime(t) {
     var n;
-    if (!(t instanceof M))
+    if (!(t instanceof V))
       throw new TypeError("Component runtime must be a CapillaryUiRuntime");
     if (t === this._runtime) return this;
     if (this.initialized || this.mounted || this._rendered != null)
@@ -548,8 +563,8 @@ const h = class h {
   mount(t = null, n = null) {
     if (this.destroyed) throw new Error("Cannot mount a destroyed component");
     this.validateIslandAncestry(this.props);
-    let r = !1;
-    return this.initialized || (this.validateRequiredServices(), this.initialized = !0, this.initialize()), this.mounted || (this.mounted = !0, this.update(), r = !0), t != null && (tt(t), V(t, this._rendered, n)), r && this.afterMount(this.dom), this;
+    let i = !1;
+    return this.initialized || (this.validateRequiredServices(), this.initialized = !0, u.withScope(this.diagnosticScope, () => this.initialize())), this.mounted || (this.mounted = !0, this.update(), i = !0), t != null && (dt(t), Y(t, this._rendered, n)), i && this.afterMount(this.dom), this;
   }
   attachTo(t) {
     return this.mount(t), this;
@@ -560,19 +575,37 @@ const h = class h {
     if (this.updating)
       return this.updateRequested = !0, this;
     this.updating = !0;
+    const n = u.event(this, "consumer", {
+      parent: t instanceof $e ? t : u.currentEvent,
+      cause: "component render",
+      outcome: "started"
+    });
     try {
-      do {
-        this.updateRequested = !1;
-        const n = /* @__PURE__ */ new Set();
-        this.collectingRenderReads = n;
-        let r;
-        try {
-          r = R(this.render());
-        } finally {
-          this.collectingRenderReads = null;
-        }
-        this._rendered = F(this._rendered, r, this), this.dom = pe(this._rendered), this.reconcileRenderReads(n), this.afterUpdate(this.dom);
-      } while (this.updateRequested && !this.destroyed);
+      u.withEvent(n, () => {
+        do {
+          this.updateRequested = !1;
+          const i = /* @__PURE__ */ new Set();
+          this.collectingRenderReads = i;
+          let r;
+          try {
+            r = u.withScope(this.diagnosticScope, () => L(this.render()));
+          } finally {
+            this.collectingRenderReads = null;
+          }
+          this._rendered = D(this._rendered, r, this), this.dom = ve(this._rendered), this.reconcileRenderReads(i), this.afterUpdate(this.dom);
+        } while (this.updateRequested && !this.destroyed);
+      }), n && u.event(this, "consumer", {
+        parent: n,
+        cause: "component rendered",
+        outcome: "succeeded"
+      });
+    } catch (i) {
+      throw n && u.event(this, "consumer", {
+        parent: n,
+        cause: "component render failed",
+        outcome: "failed",
+        error: i
+      }), i;
     } finally {
       this.updating = !1;
     }
@@ -592,11 +625,11 @@ const h = class h {
       if (n == null || typeof n.subscribe != "function")
         throw new TypeError("watch requires emitter-like values");
       if (this.watched.has(n)) continue;
-      const r = n.subscribe(({ event: i }) => {
-        this.mounted && !this.destroyed && this.update(i);
-      }, { emitCurrent: !1 });
-      this.watched.set(n, r), this.onCleanup(() => {
-        r(), this.watched.delete(n);
+      const i = n.subscribe(({ event: r }) => {
+        this.mounted && !this.destroyed && this.update(r);
+      }, { emitCurrent: !1, diagnosticTarget: this });
+      this.watched.set(n, i), this.onCleanup(() => {
+        i(), this.watched.delete(n);
       });
     }
     return this;
@@ -646,24 +679,39 @@ const h = class h {
   capillaryUiMessage(t) {
     return this.localization.message(t);
   }
-  listen(t, n, r, i) {
+  listen(t, n, i, r) {
     if (t == null || typeof t.addEventListener != "function")
       throw new TypeError("listen target must be an EventTarget");
-    const s = r;
-    return t.addEventListener(n, s, i), this.onCleanup(() => t.removeEventListener(n, s, i)), this;
+    const s = {};
+    u.configure(s, {
+      kind: "interaction",
+      label: `${T(this)}: ${n}`,
+      scope: this.diagnosticScope
+    });
+    const o = (a) => K(
+      s,
+      this.diagnosticScope,
+      a,
+      o,
+      n,
+      () => i(a)
+    );
+    return t.addEventListener(n, o, r), this.onCleanup(() => {
+      t.removeEventListener(n, o, r), u.dispose(s);
+    }), this;
   }
   registerChild(t) {
     if (!(t instanceof h))
       throw new TypeError("registerChild requires a Component");
-    return this._childComponents.add(t), t;
+    return this._childComponents.add(t), u.active && u.inspect(this), t;
   }
   destroy() {
     if (!this.destroyed) {
-      this.destroyed = !0, this.mounted = !1;
+      this.destroyed = !0, this.mounted = !1, u.dispose(this);
       for (const t of [...this.cleanupFunctions]) t();
       this.cleanupFunctions.clear(), this.watched.clear();
       for (const t of this.renderReadSubscriptions.values()) t();
-      this.renderReadSubscriptions.clear(), this.collectingRenderReads = null, this._rendered && g(this._rendered, !0), this._rendered = null, this.dom = null, this._childComponents.clear(), this.onDestroy();
+      this.renderReadSubscriptions.clear(), this.collectingRenderReads = null, this._rendered && w(this._rendered, !0), this._rendered = null, this.dom = null, this._childComponents.clear(), this.onDestroy();
     }
   }
   validateRequiredServices() {
@@ -673,42 +721,42 @@ const h = class h {
         throw new Error(`${t.name} requires unregistered service "${n.name}"`);
   }
   validateIslandAncestry(t) {
-    if (!N(t)) return;
+    if (!F(t)) return;
     if (this.hasIslandDescendant())
       throw new Error("An island component cannot contain another island");
     let n = this._parentComponent;
     for (; n != null; ) {
-      if (N(n.props))
+      if (F(n.props))
         throw new Error("An island component cannot be nested inside another island");
       n = n._parentComponent;
     }
   }
   hasIslandDescendant() {
     for (const t of this._childComponents)
-      if (N(t.props) || t.hasIslandDescendant()) return !0;
+      if (F(t.props) || t.hasIslandDescendant()) return !0;
     return !1;
   }
   onDestroy() {
   }
   trackRenderRead(t) {
-    if (H(t, "Component.read"), this.collectingRenderReads == null)
+    if (Z(t, "Component.read"), this.collectingRenderReads == null)
       throw new Error("Component.read() and snapshot() may only be called during render()");
     this.collectingRenderReads.add(t);
   }
   reconcileRenderReads(t) {
-    for (const [n, r] of this.renderReadSubscriptions)
-      t.has(n) || (r(), this.renderReadSubscriptions.delete(n));
+    for (const [n, i] of this.renderReadSubscriptions)
+      t.has(n) || (i(), this.renderReadSubscriptions.delete(n));
     for (const n of t) {
       if (this.watched.has(n) || this.renderReadSubscriptions.has(n)) continue;
-      const r = n.subscribe(({ event: i }) => {
-        this.mounted && !this.destroyed && this.update(i);
-      }, { emitCurrent: !1 });
-      this.renderReadSubscriptions.set(n, r);
+      const i = n.subscribe(({ event: r }) => {
+        this.mounted && !this.destroyed && this.update(r);
+      }, { emitCurrent: !1, diagnosticTarget: this });
+      this.renderReadSubscriptions.set(n, i);
     }
   }
 };
-l(h, "dependencies", []), l(h, "requiredServices", []), /** Component `live()` bindings are opt-in; subclasses declare their allowlist. */
-l(h, "liveProps", []), l(h, "css", Me`
+c(h, "dependencies", []), c(h, "requiredServices", []), /** Component `live()` bindings are opt-in; subclasses declare their allowlist. */
+c(h, "liveProps", []), c(h, "css", Je`
         .cap-fill-horizontal,
         .cap-fill-vertical {
             box-sizing: border-box;
@@ -808,17 +856,19 @@ l(h, "liveProps", []), l(h, "css", Me`
         label[data-cap] {
             user-select: none;
         }
-    `), l(h, "hostName", null), /** Optional host-level data surface marker for parent composition. */
-l(h, "dataSurface", null);
-let m = h;
-function R(e) {
-  return Array.isArray(e) ? A(P, null, e) : e == null || typeof e == "boolean" ? A(P) : e;
-}
-function ae(e) {
-  const t = [], n = (r) => {
-    if (Array.isArray(r))
-      for (const i of r) n(i);
-    else r != null && typeof r != "boolean" && t.push(r);
+    `), c(h, "hostName", null), /** Override for a diagnostic-tool subtree; ordinary components inherit their owner/runtime. */
+c(h, "diagnosticScope", null), /** Optional stable display name for bundled application components. Built-ins use their host name. */
+c(h, "diagnosticLabel", null), /** Optional host-level data surface marker for parent composition. */
+c(h, "dataSurface", null);
+let b = h;
+function L(e) {
+  return Array.isArray(e) ? k($, null, e) : e == null || typeof e == "boolean" ? k($) : e;
+}
+function he(e) {
+  const t = [], n = (i) => {
+    if (Array.isArray(i))
+      for (const r of i) n(r);
+    else i != null && typeof i != "boolean" && t.push(i);
   };
   return n(e), t;
 }
@@ -831,35 +881,35 @@ function O(e, t) {
       node: document.createTextNode(String(e)),
       owner: t
     };
-  if (k(e)) {
+  if (I(e)) {
     const s = document.createComment("cap-emitter-start"), o = document.createComment("cap-emitter-end"), a = e.get();
     if (Object.is(a, e))
       throw new TypeError("A Capillary UI emitter child cannot render itself");
-    const c = document.createDocumentFragment();
-    c.append(s, o);
-    const u = O(R(a), t);
-    V(c, u, o);
+    const l = document.createDocumentFragment();
+    l.append(s, o);
+    const f = O(L(a), t);
+    Y(l, f, o);
     const p = {
       kind: "emitter",
       key: null,
       source: e,
       start: s,
       end: o,
-      child: u,
+      child: f,
       unsubscribe: () => {
       },
       owner: t
     };
-    return p.unsubscribe = e.subscribe(({ value: b }) => {
-      if (Object.is(b, e))
+    return p.unsubscribe = N(e, p, t, "reactive child", (y) => {
+      if (Object.is(y, e))
         throw new TypeError("A Capillary UI emitter child cannot render itself");
-      p.child = F(p.child, R(b), t);
-    }, { emitCurrent: !1 }), p;
+      p.child = D(p.child, L(y), t);
+    }), p;
   }
-  if (e instanceof m)
+  if (e instanceof b)
     return e._setRuntime(t._runtime), e._setRouteContext(t._routeContextForChildren()), e._setParentComponent(t), e.mount(), t.registerChild(e), {
       kind: "component",
-      key: de(e.props),
+      key: Ee(e.props),
       type: e.constructor,
       instance: e,
       prebuilt: !0,
@@ -867,23 +917,23 @@ function O(e, t) {
       liveProps: /* @__PURE__ */ new Map(),
       owner: t
     };
-  if (!y(e))
-    throw new TypeError(`Invalid Capillary UI child: ${G(e)}`);
-  const { type: n, key: r = null, props: i } = e;
-  if (n === P) {
+  if (!g(e))
+    throw new TypeError(`Invalid Capillary UI child: ${ie(e)}`);
+  const { type: n, key: i = null, props: r } = e;
+  if (n === $) {
     const s = document.createComment("cap-fragment-start"), o = document.createComment("cap-fragment-end"), a = {
       kind: "fragment",
-      key: r,
+      key: i,
       type: n,
       start: s,
       end: o,
       children: [],
       owner: t
-    }, c = document.createDocumentFragment();
-    return c.append(s, o), a.children = z(
-      c,
+    }, l = document.createDocumentFragment();
+    return l.append(s, o), a.children = z(
+      l,
       [],
-      i.children,
+      r.children,
       t,
       o,
       s
@@ -892,7 +942,7 @@ function O(e, t) {
   if (typeof n == "string") {
     const s = document.createElement(n), o = {
       kind: "element",
-      key: r,
+      key: i,
       type: n,
       node: s,
       props: {},
@@ -903,16 +953,19 @@ function O(e, t) {
       children: [],
       owner: t
     };
-    return fe(o, i), o.children = z(s, [], i.children, t), o;
+    return we(o, r), o.children = z(s, [], r.children, t), o;
   }
-  if (me(n)) {
-    const s = i;
-    ue(n, s);
-    const o = Y(s), a = new n(o);
+  if (Re(n)) {
+    const s = r;
+    ge(n, s);
+    const o = X(s), a = u.withScope(
+      n.diagnosticScope ?? t.diagnosticScope,
+      () => new n(o)
+    );
     a._setRuntime(t._runtime), a._setRouteContext(t._routeContextForChildren()), a._setParentComponent(t);
-    const c = {
+    const l = {
       kind: "component",
-      key: r,
+      key: i,
       type: n,
       instance: a,
       prebuilt: !1,
@@ -920,191 +973,218 @@ function O(e, t) {
       liveProps: /* @__PURE__ */ new Map(),
       owner: t
     };
-    return ce(c, s), a.mount(), t.registerChild(a), c;
+    return be(l, s), a.mount(), t.registerChild(a), l;
   }
   if (typeof n == "function") {
-    const s = n, o = i, a = Y(o), c = R(s(a)), u = {
+    const s = n, o = r, a = X(o), l = s === Reflect.get(t, "Host") ? null : {};
+    l && u.configure(l, {
+      kind: "component",
+      label: String(Reflect.get(s, "diagnosticLabel") ?? s.name ?? "Function component"),
+      scope: t.diagnosticScope,
+      sources: [t]
+    });
+    const f = ye(l, () => O(L(s(a)), t)), p = {
       kind: "function",
-      key: r,
+      key: i,
       type: s,
       props: a,
       sourceProps: o,
       liveProps: /* @__PURE__ */ new Map(),
-      child: O(c, t),
+      child: f,
+      diagnosticSubject: l,
       owner: t
     };
-    return qe(u), u;
+    return Xe(p), p;
   }
-  throw new TypeError(`Unsupported vnode type: ${G(n)}`);
+  throw new TypeError(`Unsupported vnode type: ${ie(n)}`);
 }
-function F(e, t, n) {
+function D(e, t, n) {
   if (e == null) return O(t, n);
-  if (he(e, t)) return le(e, t, n);
-  const r = O(t, n), i = pe(e), s = (i == null ? void 0 : i.parentNode) ?? null;
-  return s && V(s, r, i), g(e, !0), r;
+  if (Ce(e, t)) return me(e, t, n);
+  const i = O(t, n), r = ve(e), s = (r == null ? void 0 : r.parentNode) ?? null;
+  return s && Y(s, i, r), w(e, !0), i;
 }
-function le(e, t, n) {
-  return e.kind === "text" ? (typeof t != "string" && typeof t != "number" || Object.is(e.value, t) || (e.value = t, e.node.data = String(t)), e) : e.kind === "emitter" ? (!k(t) || e.source !== t, e) : e.kind === "component" ? (t instanceof m || y(t) && Fe(e, t.props), e) : y(t) ? e.kind === "function" ? (Be(e, t.props), e) : e.kind === "fragment" ? (e.children = z(
+function me(e, t, n) {
+  return e.kind === "text" ? (typeof t != "string" && typeof t != "number" || Object.is(e.value, t) || (e.value = t, e.node.data = String(t)), e) : e.kind === "emitter" ? (!I(t) || e.source !== t, e) : e.kind === "component" ? (t instanceof b || g(t) && Qe(e, t.props), e) : g(t) ? e.kind === "function" ? (et(e, t.props), e) : e.kind === "fragment" ? (e.children = z(
     e.start.parentNode,
     e.children,
     t.props.children,
     n,
     e.end,
     e.start
-  ), e) : (fe(e, t.props), e.children = z(
+  ), e) : (we(e, t.props), e.children = z(
     e.node,
     e.children,
     t.props.children,
     n
   ), e) : e;
 }
-function Y(e) {
+function X(e) {
   return Object.fromEntries(Object.entries(e).map(([t, n]) => [
     t,
-    v(n) ? n.emitter.get() : n
+    E(n) ? n.emitter.get() : n
   ]));
 }
-function ce(e, t) {
-  q(e.liveProps, t, (n, r) => {
-    e.props = { ...e.props, [n]: r }, e.instance.setProps(e.props);
-  }), e.props = B(e.liveProps, t), e.instance.setProps(e.props);
+function be(e, t) {
+  H(e.liveProps, t, e.instance, T(e.instance), (n, i) => {
+    e.props = { ...e.props, [n]: i }, e.instance.setProps(e.props);
+  }), e.props = W(e.liveProps, t), e.instance.setProps(e.props);
 }
-function Fe(e, t) {
-  ue(e.type, t), ce(e, t);
+function Qe(e, t) {
+  ge(e.type, t), be(e, t);
 }
-function ue(e, t) {
+function ge(e, t) {
   const n = Reflect.get(e, "liveProps");
   if (n == null) return;
-  if (!Array.isArray(n) || n.some((i) => typeof i != "string"))
+  if (!Array.isArray(n) || n.some((r) => typeof r != "string"))
     throw new TypeError(`${e.name || "Component"}.liveProps must be an array`);
-  const r = new Set(n);
-  for (const [i, s] of Object.entries(t))
-    if (v(s) && !r.has(i))
+  const i = new Set(n);
+  for (const [r, s] of Object.entries(t))
+    if (E(s) && !i.has(r))
       throw new TypeError(
-        `${e.name || "Component"} prop "${i}" does not support live()`
+        `${e.name || "Component"} prop "${r}" does not support live()`
       );
 }
-function qe(e) {
-  q(e.liveProps, e.sourceProps, (t, n) => {
-    e.props = { ...e.props, [t]: n }, U(e);
-  }), e.props = B(e.liveProps, e.sourceProps);
-}
-function Be(e, t) {
-  e.sourceProps = t, q(e.liveProps, t, (n, r) => {
-    e.props = { ...e.props, [n]: r }, U(e);
-  }), e.props = B(e.liveProps, t), U(e);
-}
-function U(e) {
-  const t = R(e.type(e.props));
-  e.child = F(e.child, t, e.owner);
-}
-function q(e, t, n) {
-  for (const [r, i] of e) {
-    const s = t[r];
-    v(s) && s.emitter === i.source || (i.unsubscribe(), e.delete(r));
-  }
-  for (const [r, i] of Object.entries(t)) {
-    if (!v(i) || e.has(r)) continue;
-    const s = {
-      source: i.emitter,
-      value: i.emitter.get(),
+function Xe(e) {
+  H(e.liveProps, e.sourceProps, e.owner, e.type.diagnosticLabel ?? e.type.name, (t, n) => {
+    e.props = { ...e.props, [t]: n }, q(e);
+  }), e.props = W(e.liveProps, e.sourceProps);
+}
+function et(e, t) {
+  e.sourceProps = t, H(e.liveProps, t, e.owner, e.type.diagnosticLabel ?? e.type.name, (n, i) => {
+    e.props = { ...e.props, [n]: i }, q(e);
+  }), e.props = W(e.liveProps, t), q(e);
+}
+function q(e) {
+  ye(e.diagnosticSubject, () => {
+    const t = L(e.type(e.props));
+    e.child = D(e.child, t, e.owner);
+  });
+}
+function ye(e, t) {
+  if (!e) return t();
+  const n = u.event(e, "consumer", { cause: "function component render", outcome: "started" });
+  try {
+    const i = n ? u.withEvent(n, t) : t();
+    return n && u.event(e, "consumer", { parent: n, cause: "function component rendered", outcome: "succeeded" }), i;
+  } catch (i) {
+    throw n && u.event(e, "consumer", { parent: n, cause: "function component failed", outcome: "failed", error: i }), i;
+  }
+}
+function H(e, t, n, i, r) {
+  for (const [s, o] of e) {
+    const a = t[s];
+    E(a) && a.emitter === o.source || (o.unsubscribe(), e.delete(s));
+  }
+  for (const [s, o] of Object.entries(t)) {
+    if (!E(o) || e.has(s)) continue;
+    const a = {
+      source: o.emitter,
+      value: o.emitter.get(),
       unsubscribe: () => {
       }
     };
-    s.unsubscribe = i.emitter.subscribe(({ value: o }) => {
-      e.get(r) === s && (s.value = o, n(r, o));
-    }, { emitCurrent: !1 }), e.set(r, s);
+    a.unsubscribe = N(o.emitter, a, n, `${i}.${s}`, (l) => {
+      e.get(s) === a && (a.value = l, r(s, l));
+    }), e.set(s, a);
   }
 }
-function B(e, t) {
-  return Object.fromEntries(Object.entries(t).map(([n, r]) => {
-    var i;
+function W(e, t) {
+  return Object.fromEntries(Object.entries(t).map(([n, i]) => {
+    var r;
     return [
       n,
-      v(r) ? ((i = e.get(n)) == null ? void 0 : i.value) ?? r.emitter.get() : r
+      E(i) ? ((r = e.get(n)) == null ? void 0 : r.value) ?? i.emitter.get() : i
     ];
   }));
 }
-function z(e, t, n, r, i = null, s = null) {
+function z(e, t, n, i, r = null, s = null) {
   if (e == null) throw new Error("Cannot patch a detached fragment range");
-  const o = ae(n), a = /* @__PURE__ */ new Map(), c = [];
-  for (const f of t)
-    f.key == null ? c.push(f) : a.has(f.key) || a.set(f.key, f);
-  const u = /* @__PURE__ */ new Set(), p = /* @__PURE__ */ new Set(), b = [];
-  let be = 0;
-  for (const f of o) {
-    const d = C(f);
-    if (d != null) {
-      if (u.has(d)) throw new Error(`Duplicate sibling key: ${String(d)}`);
-      u.add(d);
+  const o = he(n), a = /* @__PURE__ */ new Map(), l = [];
+  for (const d of t)
+    d.key == null ? l.push(d) : a.has(d.key) || a.set(d.key, d);
+  const f = /* @__PURE__ */ new Set(), p = /* @__PURE__ */ new Set(), y = [];
+  let Oe = 0;
+  for (const d of o) {
+    const m = R(d);
+    if (m != null) {
+      if (f.has(m)) throw new Error(`Duplicate sibling key: ${String(m)}`);
+      f.add(m);
     }
-    const L = d == null ? c[be++] : a.get(d);
-    L && he(L, f) ? (p.add(L), b.push(le(L, f, r))) : b.push(O(f, r));
-  }
-  for (const f of t)
-    p.has(f) || g(f, !0);
-  let E = s ? s.nextSibling : e.firstChild;
-  for (const f of b)
-    for (const d of w(f))
-      d === E ? E = E.nextSibling : (e.insertBefore(d, E ?? i), E = d.nextSibling);
-  return b;
-}
-function fe(e, t) {
+    const j = m == null ? l[Oe++] : a.get(m);
+    j && Ce(j, d) ? (p.add(j), y.push(me(j, d, i))) : y.push(O(d, i));
+  }
+  for (const d of t)
+    p.has(d) || w(d, !0);
+  let C = s ? s.nextSibling : e.firstChild;
+  for (const d of y)
+    for (const m of S(d))
+      m === C ? C = C.nextSibling : (e.insertBefore(m, C ?? r), C = m.nextSibling);
+  return y;
+}
+function we(e, t) {
   const n = Object.fromEntries(Object.entries(t).filter(
-    ([s]) => s !== "children" && j(s) !== W
-  )), r = e.props, i = /* @__PURE__ */ new Set([...Object.keys(r), ...Object.keys(n)]);
+    ([s]) => s !== "children" && A(s) !== Q
+  )), i = e.props, r = /* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(n)]);
   for (const s of ["value", "checked"])
     if (Object.hasOwn(n, s) && Object.hasOwn(n, `bind:${s}`))
       throw new Error(`${s} and bind:${s} cannot be used together`);
-  for (const s of i) {
-    const o = r[s], a = n[s];
-    if (Je(s))
-      He(e, s, a);
+  for (const s of r) {
+    const o = i[s], a = n[s];
+    if (ct(s))
+      nt(e, s, a);
     else if (s === "ref")
-      o !== a && Ke(e, a);
-    else if (Ge(s))
-      De(e, s, a);
-    else if (v(a))
-      Ve(e, s, a);
+      o !== a && rt(e, a);
+    else if (lt(s))
+      it(e, s, a);
+    else if (E(a))
+      tt(e, s, a);
     else {
-      const c = e.liveProps.get(s);
-      c && (c.unsubscribe(), e.liveProps.delete(s));
-      const u = (c == null ? void 0 : c.value) ?? o;
-      Object.is(u, a) || S(e.node, s, u, a);
+      const l = e.liveProps.get(s);
+      l && (l.unsubscribe(), e.liveProps.delete(s));
+      const f = (l == null ? void 0 : l.value) ?? o;
+      Object.is(f, a) || v(e.node, s, f, a);
     }
   }
-  e.node.setAttribute(W, ""), e.props = { ...n };
+  e.node.setAttribute(Q, ""), e.props = { ...n };
 }
-function Ve(e, t, n) {
-  const r = e.liveProps.get(t);
-  if ((r == null ? void 0 : r.source) === n.emitter) return;
-  r == null || r.unsubscribe();
-  const i = n.emitter.get();
-  S(e.node, t, (r == null ? void 0 : r.value) ?? e.props[t], i);
+function tt(e, t, n) {
+  const i = e.liveProps.get(t);
+  if ((i == null ? void 0 : i.source) === n.emitter) return;
+  i == null || i.unsubscribe();
+  const r = n.emitter.get();
+  v(e.node, t, (i == null ? void 0 : i.value) ?? e.props[t], r);
   const s = {
     source: n.emitter,
-    value: i,
+    value: r,
     unsubscribe: () => {
     }
   };
-  s.unsubscribe = n.emitter.subscribe(({ value: o }) => {
+  s.unsubscribe = N(n.emitter, s, e.owner, `${e.type}.${t}`, (o) => {
     const a = s.value;
-    s.value = o, Object.is(a, o) || S(e.node, t, a, o);
-  }, { emitCurrent: !1 }), e.liveProps.set(t, s);
+    s.value = o, Object.is(a, o) || v(e.node, t, a, o);
+  }), e.liveProps.set(t, s);
 }
-function He(e, t, n) {
-  const r = t.slice(5), i = e.nativeBindings.get(t);
+function nt(e, t, n) {
+  const i = t.slice(5), r = e.nativeBindings.get(t);
   if (n == null) {
-    i && (i.unsubscribe(), e.node.removeEventListener(i.eventName, i.listener), e.nativeBindings.delete(t), S(e.node, r, i.value, void 0));
+    r && (r.unsubscribe(), e.node.removeEventListener(r.eventName, r.listener), e.nativeBindings.delete(t), v(e.node, i, r.value, void 0));
     return;
   }
-  if (Qe(n, t), (i == null ? void 0 : i.source) === n) return;
-  i && (i.unsubscribe(), e.node.removeEventListener(i.eventName, i.listener)), Xe(e.node, r);
-  const s = et(e.node, r), o = n.get();
-  S(e.node, r, i == null ? void 0 : i.value, o);
-  const a = () => {
-    n.set(Reflect.get(e.node, r), `${t} changed`);
-  }, c = {
+  if (ut(n, t), (r == null ? void 0 : r.source) === n) return;
+  r && (r.unsubscribe(), e.node.removeEventListener(r.eventName, r.listener)), ft(e.node, i);
+  const s = pt(e.node, i), o = n.get();
+  v(e.node, i, r == null ? void 0 : r.value, o);
+  const a = (f) => {
+    K(
+      Se(e, s),
+      e.owner.diagnosticScope,
+      f,
+      a,
+      `${t} changed`,
+      () => n.set(Reflect.get(e.node, i), `${t} changed`)
+    );
+  }, l = {
     source: n,
     value: o,
     eventName: s,
@@ -1112,73 +1192,142 @@ function He(e, t, n) {
     unsubscribe: () => {
     }
   };
-  c.unsubscribe = n.subscribe(({ value: u }) => {
-    const p = c.value;
-    c.value = u, Object.is(p, u) || S(e.node, r, p, u);
-  }, { emitCurrent: !1 }), e.node.addEventListener(s, a), e.nativeBindings.set(t, c);
-}
-function De(e, t, n) {
-  const r = t.slice(2).toLowerCase(), i = e.listeners.get(t);
-  if (i && i !== n && (e.node.removeEventListener(r, i), e.listeners.delete(t)), n != null && typeof n != "function")
+  l.unsubscribe = N(n, l, e.owner, `${e.type}.${t}`, (f) => {
+    const p = l.value;
+    l.value = f, Object.is(p, f) || v(e.node, i, p, f);
+  }), e.node.addEventListener(s, a), e.nativeBindings.set(t, l);
+}
+function it(e, t, n) {
+  const i = t.slice(2).toLowerCase(), r = e.listeners.get(t), s = r ? te.get(r) ?? r : null;
+  if (r && s !== n && (e.node.removeEventListener(i, r), e.listeners.delete(t)), n != null && typeof n != "function")
     throw new TypeError(`${t} must be a function or null`);
-  if (typeof n == "function" && i !== n) {
-    const s = n;
-    e.node.addEventListener(r, s), e.listeners.set(t, s);
-  }
+  if (typeof n == "function" && s !== n) {
+    const o = (a) => K(
+      Se(e, i),
+      e.owner.diagnosticScope,
+      a,
+      o,
+      i,
+      () => n.call(e.node, a)
+    );
+    te.set(o, n), e.node.addEventListener(i, o), e.listeners.set(t, o);
+  }
+}
+const ee = /* @__PURE__ */ new WeakMap(), te = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap();
+function K(e, t, n, i, r, s) {
+  return u.withScope(t, () => {
+    if (!u.active) return s();
+    let o = M.get(n);
+    return (!o || o.listeners.has(i)) && (o = { event: u.event(e, "interaction", { cause: r, outcome: "started" }), listeners: /* @__PURE__ */ new Set() }, M.set(n, o), queueMicrotask(() => M.delete(n))), o.listeners.add(i), u.withEvent(o.event, s);
+  });
+}
+function Se(e, t) {
+  var r;
+  let n = ee.get(e);
+  n || (n = /* @__PURE__ */ new Map(), ee.set(e, n));
+  let i = n.get(t);
+  if (!i) {
+    i = {};
+    const s = e.node.getAttribute("aria-label") ?? e.node.getAttribute("name") ?? ((r = e.node.textContent) == null ? void 0 : r.trim().slice(0, 80)) ?? "";
+    u.configure(i, {
+      kind: "interaction",
+      label: `${T(e.owner)}: ${e.type} ${s} ${t}`.trim(),
+      scope: e.owner.diagnosticScope
+    }), n.set(t, i);
+  }
+  return i;
+}
+function N(e, t, n, i, r) {
+  u.configure(t, {
+    kind: "binding",
+    label: `${T(n)}: ${i}`,
+    scope: n.diagnosticScope,
+    sources: [e]
+  });
+  const s = e.subscribe(({ value: o, event: a }) => {
+    const l = u.event(t, "consumer", {
+      parent: a,
+      cause: "binding update",
+      value: o,
+      outcome: "started"
+    });
+    try {
+      u.withEvent(l, () => r(o)), l && u.event(t, "consumer", {
+        parent: l,
+        cause: "binding updated",
+        value: o,
+        outcome: "succeeded"
+      });
+    } catch (f) {
+      throw l && u.event(t, "consumer", {
+        parent: l,
+        cause: "binding update failed",
+        outcome: "failed",
+        error: f
+      }), f;
+    }
+  }, { emitCurrent: !1, diagnosticTarget: t });
+  return () => {
+    s(), u.dispose(t);
+  };
+}
+function T(e) {
+  const t = e.constructor;
+  return t.diagnosticLabel ?? t.hostName ?? t.name;
 }
-function Ke(e, t) {
-  if (x(e.ref, null), t != null && typeof t != "function" && typeof t != "object")
+function rt(e, t) {
+  if (B(e.ref, null), t != null && typeof t != "function" && typeof t != "object")
     throw new TypeError("ref must be a function, object, or null");
-  e.ref = t, x(e.ref, e.node);
+  e.ref = t, B(e.ref, e.node);
 }
-function S(e, t, n, r) {
+function v(e, t, n, i) {
   if (t === "class" || t === "className") {
-    $(e, "class", r);
+    U(e, "class", i);
     return;
   }
   if (t === "for" || t === "htmlFor") {
-    $(e, "for", r);
+    U(e, "for", i);
     return;
   }
   if (t === "dataset") {
-    We(e, n, r);
+    st(e, n, i);
     return;
   }
   if (t === "style") {
-    Ye(e, n, r);
+    ot(e, n, i);
     return;
   }
   if (t === "dangerouslySetInnerHTML")
     throw new Error("dangerouslySetInnerHTML is not supported");
-  const i = Ze(t);
-  if (Ue.has(i)) {
-    const s = !!r;
-    i in e && Reflect.set(e, i, s), e.toggleAttribute(j(t), s);
+  const r = at(t);
+  if (Ze.has(r)) {
+    const s = !!i;
+    r in e && Reflect.set(e, r, s), e.toggleAttribute(A(t), s);
     return;
   }
-  if (xe.has(i) && i in e) {
-    const s = r ?? (i === "value" ? "" : !1);
-    Object.is(Reflect.get(e, i), s) || Reflect.set(e, i, s), r == null && e.removeAttribute(j(t));
+  if (Ge.has(r) && r in e) {
+    const s = i ?? (r === "value" ? "" : !1);
+    Object.is(Reflect.get(e, r), s) || Reflect.set(e, r, s), i == null && e.removeAttribute(A(t));
     return;
   }
-  $(e, j(t), r);
+  U(e, A(t), i);
 }
-function We(e, t, n) {
-  const r = _(t, "dataset"), i = _(n, "dataset");
-  for (const s of /* @__PURE__ */ new Set([...Object.keys(r), ...Object.keys(i)])) {
-    const o = i[s];
+function st(e, t, n) {
+  const i = _(t, "dataset"), r = _(n, "dataset");
+  for (const s of /* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(r)])) {
+    const o = r[s];
     o == null ? delete e.dataset[s] : e.dataset[s] = String(o);
   }
 }
-function Ye(e, t, n) {
+function ot(e, t, n) {
   if (typeof n == "string") {
     e.style.cssText = n;
     return;
   }
-  const r = typeof t == "string" ? {} : _(t, "style"), i = _(n, "style");
+  const i = typeof t == "string" ? {} : _(t, "style"), r = _(n, "style");
   typeof t == "string" && (e.style.cssText = "");
-  for (const s of /* @__PURE__ */ new Set([...Object.keys(r), ...Object.keys(i)])) {
-    const o = i[s];
+  for (const s of /* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(r)])) {
+    const o = r[s];
     s.startsWith("--") ? o == null ? e.style.removeProperty(s) : e.style.setProperty(s, String(o)) : Reflect.set(e.style, s, o == null ? "" : String(o));
   }
 }
@@ -1188,25 +1337,25 @@ function _(e, t) {
     throw new TypeError(`${t} must be an object or null`);
   return e;
 }
-function $(e, t, n) {
+function U(e, t, n) {
   n == null || n === !1 ? e.removeAttribute(t) : n === !0 ? e.setAttribute(t, "") : e.setAttribute(t, String(n));
 }
-function Ze(e) {
+function at(e) {
   return e === "readonly" ? "readOnly" : e === "autofocus" ? "autoFocus" : e;
 }
-function j(e) {
-  return e === "className" ? "class" : e === "htmlFor" ? "for" : e === "minLength" ? "minlength" : e === "maxLength" ? "maxlength" : e === "autoComplete" ? "autocomplete" : e === "inputMode" ? "inputmode" : /^aria[A-Z]/.test(e) || /^data[A-Z]/.test(e) ? Z(e) : e.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`);
+function A(e) {
+  return e === "className" ? "class" : e === "htmlFor" ? "for" : e === "minLength" ? "minlength" : e === "maxLength" ? "maxlength" : e === "autoComplete" ? "autocomplete" : e === "inputMode" ? "inputmode" : /^aria[A-Z]/.test(e) || /^data[A-Z]/.test(e) ? ne(e) : e.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`);
 }
-function Z(e) {
+function ne(e) {
   return e.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`);
 }
-function x(e, t) {
+function B(e, t) {
   e != null && (typeof e == "function" ? e(t) : e.current = t);
 }
-function g(e, t) {
+function w(e, t) {
   if (e.kind === "emitter") {
-    if (e.unsubscribe(), g(e.child, !1), t)
-      for (const n of w(e)) n.remove();
+    if (e.unsubscribe(), w(e.child, !1), t)
+      for (const n of S(e)) n.remove();
     return;
   }
   if (e.kind === "component") {
@@ -1216,147 +1365,147 @@ function g(e, t) {
   }
   if (e.kind === "function") {
     for (const n of e.liveProps.values()) n.unsubscribe();
-    e.liveProps.clear(), g(e.child, t);
+    e.liveProps.clear(), e.diagnosticSubject && u.dispose(e.diagnosticSubject), w(e.child, t);
     return;
   }
   if (e.kind === "element") {
-    x(e.ref, null);
-    for (const [n, r] of e.listeners)
-      e.node.removeEventListener(n.slice(2).toLowerCase(), r);
+    B(e.ref, null);
+    for (const [n, i] of e.listeners)
+      e.node.removeEventListener(n.slice(2).toLowerCase(), i);
     e.listeners.clear();
     for (const n of e.liveProps.values()) n.unsubscribe();
     e.liveProps.clear();
     for (const n of e.nativeBindings.values())
       n.unsubscribe(), e.node.removeEventListener(n.eventName, n.listener);
     e.nativeBindings.clear();
-    for (const n of e.children) g(n, !1);
+    for (const n of e.children) w(n, !1);
     t && e.node.remove();
     return;
   }
   if (e.kind === "fragment") {
-    for (const n of e.children) g(n, !1);
+    for (const n of e.children) w(n, !1);
     if (t)
-      for (const n of w(e)) n.remove();
+      for (const n of S(e)) n.remove();
     return;
   }
   t && e.node.remove();
 }
-function V(e, t, n = null) {
+function Y(e, t, n = null) {
   if (t != null)
-    for (const r of w(t)) e.insertBefore(r, n);
+    for (const i of S(t)) e.insertBefore(i, n);
 }
-function w(e) {
+function S(e) {
   if (e == null) return [];
   if (e.kind === "text" || e.kind === "element") return [e.node];
-  if (e.kind === "component") return w(e.instance._rendered);
-  if (e.kind === "function") return w(e.child);
+  if (e.kind === "component") return S(e.instance._rendered);
+  if (e.kind === "function") return S(e.child);
   const t = [];
   let n = e.start;
   for (; n && (t.push(n), n !== e.end); )
     n = n.nextSibling;
   return t;
 }
-function pe(e) {
-  return w(e)[0] ?? null;
+function ve(e) {
+  return S(e)[0] ?? null;
 }
-function C(e) {
-  return e instanceof m ? de(e.props) : y(e) ? e.key : null;
+function R(e) {
+  return e instanceof b ? Ee(e.props) : g(e) ? e.key : null;
 }
-function de(e) {
+function Ee(e) {
   const t = e.key;
   return typeof t == "string" || typeof t == "number" ? t : null;
 }
-function he(e, t) {
-  return e.kind === "text" ? typeof t == "string" || typeof t == "number" : e.kind === "emitter" ? k(t) && e.source === t : e.kind === "component" ? t instanceof m ? e.instance === t : y(t) && me(t.type) && e.type === t.type && e.key === C(t) : e.kind === "function" ? y(t) && e.type === t.type && e.key === C(t) : e.kind === "fragment" ? y(t) && t.type === P && e.key === C(t) : y(t) && typeof t.type == "string" && e.type === t.type && e.key === C(t);
+function Ce(e, t) {
+  return e.kind === "text" ? typeof t == "string" || typeof t == "number" : e.kind === "emitter" ? I(t) && e.source === t : e.kind === "component" ? t instanceof b ? e.instance === t : g(t) && Re(t.type) && e.type === t.type && e.key === R(t) : e.kind === "function" ? g(t) && e.type === t.type && e.key === R(t) : e.kind === "fragment" ? g(t) && t.type === $ && e.key === R(t) : g(t) && typeof t.type == "string" && e.type === t.type && e.key === R(t);
 }
-function y(e) {
+function g(e) {
   return e != null && typeof e == "object" && Object.hasOwn(e, "type");
 }
-function me(e) {
-  return typeof e == "function" && (e === m || e.prototype instanceof m);
+function Re(e) {
+  return typeof e == "function" && (e === b || e.prototype instanceof b);
 }
-function Ge(e) {
+function lt(e) {
   return /^on[A-Z]/.test(e);
 }
-function Je(e) {
+function ct(e) {
   return e === "bind:value" || e === "bind:checked";
 }
-function v(e) {
-  return e != null && typeof e == "object" && oe.has(e);
+function E(e) {
+  return e != null && typeof e == "object" && de.has(e);
 }
-function k(e) {
+function I(e) {
   return (typeof e != "object" || e == null) && typeof e != "function" ? !1 : typeof Reflect.get(e, "get") == "function" && typeof Reflect.get(e, "getFetchState") == "function" && typeof Reflect.get(e, "getError") == "function" && typeof Reflect.get(e, "subscribe") == "function";
 }
-function H(e, t) {
-  if (!k(e)) throw new TypeError(`${t} requires a readable emitter`);
+function Z(e, t) {
+  if (!I(e)) throw new TypeError(`${t} requires a readable emitter`);
 }
-function Qe(e, t) {
-  if (H(e, t), typeof Reflect.get(e, "set") != "function")
+function ut(e, t) {
+  if (Z(e, t), typeof Reflect.get(e, "set") != "function")
     throw new TypeError(`${t} requires a writable emitter`);
 }
-function Xe(e, t) {
+function ft(e, t) {
   const n = e.localName;
   if (!(t === "checked" ? n === "input" : n === "input" || n === "textarea" || n === "select")) throw new TypeError(`bind:${t} is not supported on ${n}`);
 }
-function et(e, t) {
+function pt(e, t) {
   return t === "value" && e.localName !== "select" ? "input" : "change";
 }
-function tt(e) {
+function dt(e) {
   if (e == null || typeof e != "object" && typeof e != "function" || typeof Reflect.get(e, "insertBefore") != "function")
     throw new TypeError("Component parent must be a DOM ParentNode");
 }
-function G(e) {
+function ie(e) {
   try {
     return String(e);
   } catch {
     return Object.prototype.toString.call(e);
   }
 }
-function nt(e) {
+function ht(e) {
   const t = [];
   let n = e;
-  for (; n != null && typeof n == "function" && (t.unshift(n), n !== m); )
+  for (; n != null && typeof n == "function" && (t.unshift(n), n !== b); )
     n = Object.getPrototypeOf(n);
   return t;
 }
-function rt(...e) {
+function mt(...e) {
   return [...new Set(e.flatMap((t) => typeof t == "string" ? t.split(/\s+/) : []).filter(Boolean))].join(" ");
 }
-function N(e) {
+function F(e) {
   if (e.island === !0) return !0;
   const t = e.className ?? e.class;
   return typeof t == "string" && t.split(/\s+/).includes("island");
 }
-function ye(e, t, n) {
-  const r = t == null ? {} : { ...t };
-  return n !== void 0 && (r.key = n), A(e, r);
+function Le(e, t, n) {
+  const i = t == null ? {} : { ...t };
+  return n !== void 0 && (i.key = n), k(e, i);
 }
-const ct = ye, ut = ye;
-function ft(e) {
-  if (!(e instanceof m))
+const Et = Le, Ct = Le;
+function Rt(e) {
+  if (!(e instanceof b))
     throw new TypeError("createPrebuiltElement requires a Component instance");
   return e;
 }
 export {
-  m as C,
-  P as F,
-  re as S,
-  ct as a,
-  M as b,
-  Me as c,
-  J as d,
-  at as e,
-  je as f,
-  ve as g,
-  A as h,
-  y as i,
-  ye as j,
-  K as k,
-  st as l,
-  ut as m,
-  lt as n,
-  ft as o,
-  ot as p,
-  Ee as s
+  b as C,
+  $ as F,
+  ue as S,
+  Le as a,
+  Et as b,
+  Je as c,
+  V as d,
+  re as e,
+  St as f,
+  xe as g,
+  k as h,
+  g as i,
+  Ct as j,
+  ze as k,
+  J as l,
+  yt as m,
+  vt as n,
+  Rt as o,
+  wt as p,
+  _e as s
 };
-//# sourceMappingURL=jsx-dev-runtime-D3UnwrKT.js.map
+//# sourceMappingURL=jsx-runtime-BD_q3rPg.js.map