@capillaryjs/capillary-viz 1.0.0-alpha.1 → 1.1.0

package/dist/index.js

@@ -1,19 +1,22 @@
-var Tt = Object.defineProperty;
-var zt = (t, e, r) => e in t ? Tt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
-var c = (t, e, r) => zt(t, typeof e != "symbol" ? e + "" : e, r);
-import { Emitter as A, DerivedEmitter as z, BaseEmitter as xe, FetchState as k, combineFetchStates as Rt } from "@capillaryjs/capillary";
-import { Component as Te, Button as oe, css as G, OptionGroup as At, readDeclarativeRegions as Ot, OptionGroupHeaderEnd as jt, OptionsBox as Lt, Checkbox as ae, GroupBox as ge } from "@capillaryjs/capillary-ui";
-function Xe([t, e, r]) {
+var Ft = Object.defineProperty;
+var qt = (t, e, r) => e in t ? Ft(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
+var c = (t, e, r) => qt(t, typeof e != "symbol" ? e + "" : e, r);
+import { Emitter as D, DerivedEmitter as j, BaseEmitter as Pe, FetchState as S, combineFetchStates as Ut, defaultDiagnosticScope as Ht, Diagnostics as m, diagnosticInfo as Vt, EventBubble as Ge } from "@capillaryjs/capillary";
+import { Component as Ne, Placeholder as xe, Button as he, css as re, OptionGroup as Wt, readDeclarativeRegions as Yt, OptionGroupHeaderEnd as Gt, OptionsBox as Xt, Checkbox as fe, GroupBox as Ce } from "@capillaryjs/capillary-ui";
+function ct([t, e, r]) {
   return {
     "--c1": t,
     "--c2": e,
     "--c3": r,
-    "--colored-dark": t,
-    "--colored-base": e,
-    "--colored-light": r
+    ...Te(t, "--colored-dark") ? {} : { "--colored-dark": t },
+    ...Te(e, "--colored-base") ? {} : { "--colored-base": e },
+    ...Te(r, "--colored-light") ? {} : { "--colored-light": r }
   };
 }
-class I {
+function Te(t, e) {
+  return t.trim().replaceAll(" ", "") === `var(${e})`;
+}
+class H {
   constructor(e) {
     c(this, "key");
     c(this, "label");
@@ -27,10 +30,10 @@ class I {
     c(this, "visibilityEmitters", /* @__PURE__ */ new Map());
     c(this, "releaseCategoryDefaults");
     c(this, "disposed", !1);
-    W(e, "Criterion options"), this.key = P(e.key, "Criterion key"), this.label = ze(e.label, "Criterion label"), pe(e.categories$, "Criterion categories$"), this.categories$ = e.categories$, this.allowResorting = e.allowResorting ?? !1, this.ownedCategories = e.ownedCategories, this.hidden$ = new A(
+    ie(e, "Criterion options"), this.key = F(e.key, "Criterion key"), this.label = Ke(e.label, "Criterion label"), ve(e.categories$, "Criterion categories$"), this.categories$ = e.categories$, this.allowResorting = e.allowResorting ?? !1, this.ownedCategories = e.ownedCategories, this.hidden$ = new D(
       new Set(e.initialHiddenKeys ?? []),
-      { owner: this, purpose: `${this.key} hidden categories`, equals: Mt }
-    ), this.visibleCategoriesEmitter = new z(
+      { owner: this, purpose: `${this.key} hidden categories`, equals: Jt }
+    ), this.visibleCategoriesEmitter = new j(
       [this.categories$, this.hidden$],
       ([r, i]) => Object.freeze(
         r.filter(({ key: n }) => !i.has(n))
@@ -42,9 +45,9 @@ class I {
   }
   visibility(e) {
     this.assertActive();
-    const r = P(e, "Category key");
+    const r = F(e, "Category key");
     let i = this.visibilityEmitters.get(r);
-    return i == null && (i = new Pt(this.hidden$, r, this), this.visibilityEmitters.set(r, i)), i;
+    return i == null && (i = new Qt(this.hidden$, r, this), this.visibilityEmitters.set(r, i)), i;
   }
   setAllVisible(e, r) {
     this.assertActive();
@@ -67,7 +70,7 @@ class I {
     }
   }
   applyFirstSeenDefaults(e) {
-    Je(e, `${this.label} categories`);
+    dt(e, `${this.label} categories`);
     const r = new Set(this.hidden$.get());
     let i = !1;
     for (const n of e)
@@ -78,36 +81,36 @@ class I {
     if (this.disposed) throw new Error(`Criterion "${this.key}" is disposed`);
   }
 }
-function si(t) {
-  W(t, "Static criterion options");
-  const e = Ze(t.categories, `${t.label} categories`), r = new A(e, {
+function Si(t) {
+  ie(t, "Static criterion options");
+  const e = ut(t.categories, `${t.label} categories`), r = new D(e, {
     purpose: `${t.key} static categories`
   });
-  return new I({ ...t, categories$: r, ownedCategories: r });
+  return new H({ ...t, categories$: r, ownedCategories: r });
 }
-function oi(t) {
-  if (W(t, "Derived criterion options"), pe(t.source$, "Derived criterion source$"), typeof t.extractKeys != "function")
+function Ei(t) {
+  if (ie(t, "Derived criterion options"), ve(t.source$, "Derived criterion source$"), typeof t.extractKeys != "function")
     throw new TypeError("Derived criterion extractKeys must be a function");
   if (typeof t.describe != "function")
     throw new TypeError("Derived criterion describe must be a function");
-  const e = new z(
+  const e = new j(
     [t.source$],
-    ([r]) => Dt(r, t),
+    ([r]) => Zt(r, t),
     { purpose: `${t.key} derived categories` }
   );
-  return new I({
+  return new H({
     ...t,
     allowResorting: t.allowResorting ?? !0,
     categories$: e,
     ownedCategories: e
   });
 }
-function Dt(t, e) {
+function Zt(t, e) {
   if (!Array.isArray(t)) throw new TypeError("Derived category items must be an array");
   const r = /* @__PURE__ */ new Map();
   let i = 0;
   for (const o of t) {
-    const a = be(e.extractKeys(o));
+    const a = ze(e.extractKeys(o));
     if (a.length === 0) {
       i += 1;
       continue;
@@ -118,41 +121,41 @@ function Dt(t, e) {
   n.sort(e.compare ?? ((o, a) => a.count - o.count || o.label.localeCompare(a.label) || o.key.localeCompare(a.key)));
   const s = n.map(({ key: o, count: a }) => {
     const l = e.describe(o, a);
-    return Ee({
+    return Le({
       key: o,
       ...l,
       generated: !0,
-      predicate: (u) => be(e.extractKeys(u)).includes(o)
+      predicate: (u) => ze(e.extractKeys(u)).includes(o)
     }, "Derived category");
   });
   if (i > 0 && e.unmatched != null) {
     const { key: o, ...a } = e.unmatched;
-    s.push(Ee({
+    s.push(Le({
       key: o,
       ...a,
       generated: !0,
-      predicate: (l) => be(e.extractKeys(l)).length === 0
+      predicate: (l) => ze(e.extractKeys(l)).length === 0
     }, "Derived unmatched category"));
   }
-  return Ze(s, "Derived categories");
+  return ut(s, "Derived categories");
 }
-function ai(t, e) {
-  pe(t, "filterByHidden items$"), Nt(e);
+function $i(t, e) {
+  ve(t, "filterByHidden items$"), er(e);
   const r = [t];
   for (const i of e) r.push(i.categories$, i.hidden$);
-  return new z(
+  return new j(
     r,
     (i) => i[0].filter((s) => !e.some((o, a) => {
       const l = i[a * 2 + 1], u = i[a * 2 + 2];
-      return l.some((h) => u.has(h.key) && h.predicate(s));
+      return l.some((d) => u.has(d.key) && d.predicate(s));
     })),
     { purpose: "items filtered by hidden visualization categories" }
   );
 }
-function li(t, e) {
-  if (pe(t, "categoryCounts items$"), !(e instanceof I))
+function xi(t, e) {
+  if (ve(t, "categoryCounts items$"), !(e instanceof H))
     throw new TypeError("categoryCounts criterion must be a GroupingCriterion");
-  return new z(
+  return new j(
     [t, e.categories$],
     (r) => {
       const i = r[0], n = r[1];
@@ -164,10 +167,10 @@ function li(t, e) {
     { purpose: `${e.key} unfiltered category counts` }
   );
 }
-function Mt(t, e) {
+function Jt(t, e) {
   return t === e || t.size === e.size && [...t].every((r) => e.has(r));
 }
-class Pt extends xe {
+class Qt extends Pe {
   constructor(r, i, n) {
     super(r.get().has(i) ? "hidden" : "visible", {
       owner: n,
@@ -199,76 +202,76 @@ class Pt extends xe {
     });
   }
 }
-function be(t) {
-  const r = (t == null ? [] : typeof t == "string" ? [t] : [...t]).map((i) => P(i, "Extracted category key"));
+function ze(t) {
+  const r = (t == null ? [] : typeof t == "string" ? [t] : [...t]).map((i) => F(i, "Extracted category key"));
   return [...new Set(r)];
 }
-function Ze(t, e) {
-  return Je(t, e), Object.freeze(t.map((r) => Ee(r, e)));
+function ut(t, e) {
+  return dt(t, e), Object.freeze(t.map((r) => Le(r, e)));
 }
-function Ee(t, e) {
-  W(t, e);
+function Le(t, e) {
+  ie(t, e);
   const r = {
     ...t,
-    key: P(t.key, `${e} key`),
-    label: ze(t.label, `${e} label`),
-    colors: Qe(t.colors, `${e} colors`)
+    key: F(t.key, `${e} key`),
+    label: Ke(t.label, `${e} label`),
+    colors: pt(t.colors, `${e} colors`)
   };
   if (typeof t.predicate != "function")
     throw new TypeError(`${e} predicate must be a function`);
-  return t.colorKey !== void 0 && P(t.colorKey, `${e} colorKey`), Object.freeze(r);
+  return t.colorKey !== void 0 && F(t.colorKey, `${e} colorKey`), Object.freeze(r);
 }
-function Je(t, e) {
+function dt(t, e) {
   if (!Array.isArray(t)) throw new TypeError(`${e} must be an array`);
   const r = /* @__PURE__ */ new Set();
   for (const i of t) {
-    W(i, e);
-    const n = P(i.key, `${e} key`);
+    ie(i, e);
+    const n = F(i.key, `${e} key`);
     if (r.has(n)) throw new Error(`${e} contains duplicate key "${n}"`);
-    if (r.add(n), ze(i.label, `${e} label`), Qe(i.colors, `${e} colors`), typeof i.predicate != "function")
+    if (r.add(n), Ke(i.label, `${e} label`), pt(i.colors, `${e} colors`), typeof i.predicate != "function")
       throw new TypeError(`${e} predicate must be a function`);
   }
 }
-function Nt(t) {
+function er(t) {
   if (!Array.isArray(t)) throw new TypeError("Criteria must be an array");
   const e = /* @__PURE__ */ new Set();
   for (const r of t) {
-    if (!(r instanceof I))
+    if (!(r instanceof H))
       throw new TypeError("Criteria must contain GroupingCriterion instances");
     if (e.has(r.key)) throw new Error(`Duplicate criterion key "${r.key}"`);
     e.add(r.key);
   }
 }
-function Qe(t, e) {
+function pt(t, e) {
   if (!Array.isArray(t) || t.length !== 3 || t.some((r) => typeof r != "string" || r.trim() === ""))
     throw new TypeError(`${e} must contain three non-empty CSS color values`);
   return Object.freeze([...t]);
 }
-function pe(t, e) {
+function ve(t, e) {
   if (t == null || typeof t != "object" && typeof t != "function" || typeof Reflect.get(t, "get") != "function" || typeof Reflect.get(t, "getFetchState") != "function" || typeof Reflect.get(t, "getError") != "function" || typeof Reflect.get(t, "subscribe") != "function")
     throw new TypeError(`${e} must be a readable emitter`);
 }
-function W(t, e) {
+function ie(t, e) {
   if (t == null || typeof t != "object" || Array.isArray(t))
     throw new TypeError(`${e} must be an object`);
 }
-function P(t, e) {
+function F(t, e) {
   if (typeof t != "string" || t.trim() === "")
     throw new TypeError(`${e} must be a non-empty string`);
   return t;
 }
-function ze(t, e) {
+function Ke(t, e) {
   if (typeof t != "string" || t.trim() === "")
     throw new TypeError(`${e} must be a non-empty string`);
   return t;
 }
-function we(t, e, r = {}) {
+function Re(t, e, r = {}) {
   if (!Array.isArray(t)) throw new TypeError("Block layout items must be an array");
   if (!Array.isArray(e)) throw new TypeError("Block layout splits must be an array");
   const i = r.readabilityThreshold ?? 0.02;
   if (!Number.isFinite(i) || i < 0 || i > 1)
     throw new RangeError("Block readability threshold must be between zero and one");
-  const n = [], s = Object.freeze([...t]), o = et({
+  const n = [], s = Object.freeze([...t]), o = ht({
     items: s,
     splits: e,
     splitIndex: 0,
@@ -283,8 +286,8 @@ function we(t, e, r = {}) {
   });
   return Object.freeze({ valid: n.length === 0, root: o, issues: Object.freeze(n) });
 }
-function Kt(t) {
-  if (!(t instanceof I))
+function tr(t) {
+  if (!(t instanceof H))
     throw new TypeError("criterionSnapshot requires a GroupingCriterion");
   return Object.freeze({
     key: t.key,
@@ -293,7 +296,7 @@ function Kt(t) {
     allowResorting: t.allowResorting
   });
 }
-function D(t, e) {
+function I(t, e) {
   if (e == null) return null;
   let r = t;
   for (const i of e) {
@@ -303,7 +306,7 @@ function D(t, e) {
   }
   return r;
 }
-class It {
+class rr {
   constructor(e, r, i = {}) {
     c(this, "layout$");
     c(this, "selectedPath$");
@@ -314,15 +317,15 @@ class It {
     c(this, "selectedItemsEmitter");
     c(this, "releases", []);
     c(this, "disposed", !1);
-    this.options = i, this.layoutEmitter = new Bt(e, r, i), this.layout$ = this.layoutEmitter, this.selectedPath$ = new A(null, {
+    this.options = i, this.layoutEmitter = new ir(e, r, i), this.layout$ = this.layoutEmitter, this.selectedPath$ = new D(null, {
       owner: this,
       purpose: "selected block path",
-      equals: qt
-    }), this.selectedBlockEmitter = new z(
+      equals: sr
+    }), this.selectedBlockEmitter = new j(
       [this.layout$, this.selectedPath$],
-      ([n, s]) => D(n.root, s),
+      ([n, s]) => I(n.root, s),
       { owner: this, purpose: "selected block" }
-    ), this.selectedBlock$ = this.selectedBlockEmitter, this.selectedItemsEmitter = new z(
+    ), this.selectedBlock$ = this.selectedBlockEmitter, this.selectedItemsEmitter = new j(
       [this.selectedBlock$],
       ([n]) => (n == null ? void 0 : n.items) ?? Object.freeze([]),
       { owner: this, purpose: "selected block items" }
@@ -333,8 +336,8 @@ class It {
   }
   select(e, r) {
     this.assertActive();
-    const i = tt(e);
-    if (D(this.layout$.get().root, i) == null)
+    const i = ft(e);
+    if (I(this.layout$.get().root, i) == null)
       throw new Error("Cannot select a path absent from the current block layout");
     return this.selectedPath$.set(i, r ?? "block selected");
   }
@@ -350,24 +353,24 @@ class It {
   }
   reconcileSelection() {
     const e = this.selectedPath$.get();
-    e == null || D(this.layout$.get().root, e) != null || this.selectedPath$.set(null, "block selection no longer exists");
+    e == null || I(this.layout$.get().root, e) != null || this.selectedPath$.set(null, "block selection no longer exists");
   }
   assertActive() {
     if (this.disposed) throw new Error("Block selection model is disposed");
   }
 }
-function ci(t, e, r = {}) {
-  return new It(t, e, r);
+function Ci(t, e, r = {}) {
+  return new rr(t, e, r);
 }
-class Bt extends xe {
+class ir extends Pe {
   constructor(r, i, n) {
-    super(we([], [], n), {
+    super(Re([], [], n), {
       purpose: "reactive block layout",
-      fetchState: k.Initial
+      fetchState: S.Initial
     });
     c(this, "releases", []);
     c(this, "categoryReleases", []);
-    this.items$ = r, this.splits$ = i, this.options = n, Ie(r, "Block selection items$"), Ie(i, "Block selection splits$"), this.releases.push(
+    this.items$ = r, this.splits$ = i, this.options = n, Xe(r, "Block selection items$"), Xe(i, "Block selection splits$"), this.releases.push(
       r.subscribe(({ event: s }) => this.recompute(s), { emitCurrent: !1 }),
       i.subscribe(({ event: s }) => {
         this.subscribeCategories(), this.recompute(s);
@@ -391,29 +394,29 @@ class Bt extends xe {
     const i = this.splits$.get(), n = [
       this.items$,
       this.splits$,
-      ...i.map(({ categories$: p }) => p)
-    ], s = n.map((p) => p.getFetchState()), o = n.map((p) => p.getError()).filter(Ut);
+      ...i.map(({ categories$: h }) => h)
+    ], s = n.map((h) => h.getFetchState()), o = n.map((h) => h.getError()).filter(ar);
     let a, l = null;
     try {
-      a = we(
+      a = Re(
         this.items$.get(),
-        i.map(Kt),
+        i.map(tr),
         this.options
       );
-    } catch (p) {
-      l = p, a = we([], [], this.options);
+    } catch (h) {
+      l = h, a = Re([], [], this.options);
     }
-    const u = l == null ? o : [...o, l], h = u.length > 0 ? k.Error : Rt(s);
+    const u = l == null ? o : [...o, l], d = u.length > 0 ? S.Error : Ut(s);
     this.setSnapshot({
       value: a,
-      fetchState: h,
+      fetchState: d,
       error: u.length === 0 ? null : Object.freeze(u),
       parentEvent: r,
       cause: "block layout source changed"
     });
   }
 }
-function et(t) {
+function ht(t) {
   const {
     items: e,
     splits: r,
@@ -424,26 +427,26 @@ function et(t) {
     parentCount: a,
     totalShare: l,
     readabilityThreshold: u,
-    issues: h,
-    rootLabel: p
-  } = t, b = r[i], y = b != null && n.length > 0 && l < u, g = b == null || y ? [] : Ft({
+    issues: d,
+    rootLabel: h
+  } = t, k = r[i], b = k != null && n.length > 0 && l < u, y = k == null || b ? [] : nr({
     items: e,
     splits: r,
     splitIndex: i,
     path: n,
-    criterion: b,
+    criterion: k,
     totalShare: l,
     readabilityThreshold: u,
-    issues: h,
-    rootLabel: p
+    issues: d,
+    rootLabel: h
   }), f = a === 0 ? 0 : e.length / a;
   return Object.freeze({
-    key: _t(n),
+    key: or(n),
     path: n,
     criterionKey: (s == null ? void 0 : s.key) ?? null,
     criterionLabel: (s == null ? void 0 : s.label) ?? null,
     categoryKey: (o == null ? void 0 : o.key) ?? null,
-    label: (o == null ? void 0 : o.label) ?? p,
+    label: (o == null ? void 0 : o.label) ?? h,
     colors: (o == null ? void 0 : o.colors) ?? null,
     colorKey: (o == null ? void 0 : o.colorKey) ?? null,
     count: e.length,
@@ -451,52 +454,52 @@ function et(t) {
     totalShare: l,
     depth: n.length - 1,
     items: e,
-    children: Object.freeze(g),
+    children: Object.freeze(y),
     childOrientation: n.length % 2 === 0 ? "horizontal" : "vertical",
-    childrenSuppressed: y
+    childrenSuppressed: b
   });
 }
-function Ft(t) {
+function nr(t) {
   const { items: e, criterion: r, path: i, issues: n } = t, s = new Map(r.categories.map((l) => [l.key, {
     category: l,
     items: []
   }]));
   let o = !0;
   if (e.forEach((l, u) => {
-    const h = r.categories.filter((p) => p.predicate(l));
-    if (h.length !== 1) {
+    const d = r.categories.filter((h) => h.predicate(l));
+    if (d.length !== 1) {
       o = !1, n.push(Object.freeze({
-        kind: h.length === 0 ? "unmatched" : "multiple-matches",
+        kind: d.length === 0 ? "unmatched" : "multiple-matches",
         criterionKey: r.key,
         criterionLabel: r.label,
         parentPath: i,
         item: l,
         itemIndex: u,
-        matchedCategoryKeys: Object.freeze(h.map(({ key: p }) => p))
+        matchedCategoryKeys: Object.freeze(d.map(({ key: h }) => h))
       }));
       return;
     }
-    s.get(h[0].key).items.push(l);
+    s.get(d[0].key).items.push(l);
   }), !o) return [];
   let a = [...s.values()].filter((l) => l.items.length > 0);
   return r.allowResorting && (a = a.sort((l, u) => u.items.length - l.items.length || l.category.label.localeCompare(u.category.label) || l.category.key.localeCompare(u.category.key))), a.map(({ category: l, items: u }) => {
-    const h = tt([...i, {
+    const d = ft([...i, {
       criterionKey: r.key,
       categoryKey: l.key
-    }]), p = e.length === 0 ? 0 : u.length / e.length;
-    return et({
+    }]), h = e.length === 0 ? 0 : u.length / e.length;
+    return ht({
       ...t,
       items: Object.freeze(u),
       splitIndex: t.splitIndex + 1,
-      path: h,
+      path: d,
       criterion: r,
       category: l,
       parentCount: e.length,
-      totalShare: t.totalShare * p
+      totalShare: t.totalShare * h
     });
   });
 }
-function tt(t) {
+function ft(t) {
   if (!Array.isArray(t)) throw new TypeError("Block path must be an array");
   return Object.freeze(t.map((e) => {
     if (e == null || typeof e != "object")
@@ -506,26 +509,26 @@ function tt(t) {
     return Object.freeze({ ...e });
   }));
 }
-function qt(t, e) {
+function sr(t, e) {
   return t === e || t != null && e != null && t.length === e.length && t.every((r, i) => {
     const n = e[i];
     return r.criterionKey === (n == null ? void 0 : n.criterionKey) && r.categoryKey === n.categoryKey;
   });
 }
-function _t(t) {
+function or(t) {
   return t.length === 0 ? "root" : t.map(({ criterionKey: e, categoryKey: r }) => `${encodeURIComponent(e)}=${encodeURIComponent(r)}`).join("/");
 }
-function Ut(t) {
+function ar(t) {
   return t != null;
 }
-function Ie(t, e) {
+function Xe(t, e) {
   if (t == null || typeof t != "object" && typeof t != "function" || typeof Reflect.get(t, "get") != "function" || typeof Reflect.get(t, "getFetchState") != "function" || typeof Reflect.get(t, "getError") != "function" || typeof Reflect.get(t, "subscribe") != "function")
     throw new TypeError(`${e} must be a readable emitter`);
 }
-const Be = "data-cap-structural-styles";
-let Ht = 1;
-class rt {
-  constructor(e = `runtime-${Ht++}`) {
+const Ze = "data-cap-structural-styles";
+let lr = 1;
+class mt {
+  constructor(e = `runtime-${lr++}`) {
     c(this, "id");
     c(this, "cssFragments", /* @__PURE__ */ new Map());
     if (typeof e != "string") throw new TypeError("StyleRegistry id must be a string");
@@ -552,16 +555,16 @@ class rt {
     }) : s.kind === "host" && s.hosts.add(r.trim()), this;
   }
   generateCSS() {
-    return [...this.cssFragments.values()].map((e) => e.kind === "raw" ? e.css : it(e.css, [...e.hosts])).join(`
+    return [...this.cssFragments.values()].map((e) => e.kind === "raw" ? e.css : yt(e.css, [...e.hosts])).join(`
 
 `);
   }
   injectAll(e = globalThis.document) {
     if ((e == null ? void 0 : e.head) == null)
       throw new TypeError("StyleRegistry.injectAll requires a document with a head");
-    const r = `style[${Be}="${Gt(this.id)}"]`;
+    const r = `style[${Ze}="${dr(this.id)}"]`;
     let i = e.head.querySelector(r);
-    i == null && (i = e.createElement("style"), i.setAttribute(Be, this.id), e.head.prepend(i));
+    i == null && (i = e.createElement("style"), i.setAttribute(Ze, this.id), e.head.prepend(i));
     const n = this.generateCSS();
     return i.textContent !== n && (i.textContent = n), i;
   }
@@ -569,34 +572,34 @@ class rt {
     this.cssFragments.clear();
   }
 }
-function Vt() {
-  return new rt();
+function cr() {
+  return new mt();
 }
-const Yt = new rt("");
-function Gt(t) {
+const ur = new mt("");
+function dr(t) {
   return t.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
 }
-function it(t, e) {
+function yt(t, e) {
   let r = "", i = 0;
   for (; i < t.length; ) {
-    const n = Zt(t, i);
+    const n = fr(t, i);
     if (n < 0) return r + t.slice(i);
-    const s = Jt(t, n);
+    const s = mr(t, n);
     if (s < 0) return r + t.slice(i);
     const o = t.slice(i, n), a = t.slice(n + 1, s), l = o.trim();
-    r += l.startsWith("@") ? `${o}{${it(a, e)}}` : `${Wt(o, e)}{${a}}`, i = s + 1;
+    r += l.startsWith("@") ? `${o}{${yt(a, e)}}` : `${pr(o, e)}{${a}}`, i = s + 1;
   }
   return r;
 }
-function Wt(t, e) {
+function pr(t, e) {
   var o, a, l;
   if (e.length === 1 || !t.includes("&"))
     return e.length === 1 ? t.replaceAll("&", e[0]) : t;
-  const r = ((o = t.match(/^\s*/)) == null ? void 0 : o[0]) ?? "", i = ((a = t.match(/\s*$/)) == null ? void 0 : a[0]) ?? "", n = Xt(t.trim()), s = ((l = r.match(/(?:^|\n)([ \t]*)$/)) == null ? void 0 : l[1]) ?? "";
-  return r + n.flatMap((u) => u.includes("&") ? e.map((h) => u.replaceAll("&", h)) : [u]).join(`,
+  const r = ((o = t.match(/^\s*/)) == null ? void 0 : o[0]) ?? "", i = ((a = t.match(/\s*$/)) == null ? void 0 : a[0]) ?? "", n = hr(t.trim()), s = ((l = r.match(/(?:^|\n)([ \t]*)$/)) == null ? void 0 : l[1]) ?? "";
+  return r + n.flatMap((u) => u.includes("&") ? e.map((d) => u.replaceAll("&", d)) : [u]).join(`,
 ${s}`) + i;
 }
-function Xt(t) {
+function hr(t) {
   const e = [];
   let r = 0, i = 0, n = 0, s = null;
   for (let o = 0; o < t.length; o += 1) {
@@ -609,26 +612,26 @@ function Xt(t) {
   }
   return e.push(t.slice(r).trim()), e.filter(Boolean);
 }
-function Zt(t, e) {
+function fr(t, e) {
   for (let r = e; r < t.length; r += 1) {
     const i = t[r];
     if (i === '"' || i === "'")
-      r = nt(t, r);
+      r = gt(t, r);
     else if (i === "/" && t[r + 1] === "*")
-      r = st(t, r);
+      r = bt(t, r);
     else if (i === "{")
       return r;
   }
   return -1;
 }
-function Jt(t, e) {
+function mr(t, e) {
   let r = 1;
   for (let i = e + 1; i < t.length; i += 1) {
     const n = t[i];
     if (n === '"' || n === "'")
-      i = nt(t, i);
+      i = gt(t, i);
     else if (n === "/" && t[i + 1] === "*")
-      i = st(t, i);
+      i = bt(t, i);
     else if (n === "{")
       r += 1;
     else if (n === "}" && --r === 0)
@@ -636,19 +639,19 @@ function Jt(t, e) {
   }
   return -1;
 }
-function nt(t, e) {
+function gt(t, e) {
   const r = t[e];
   for (let i = e + 1; i < t.length; i += 1)
     if (t[i] === "\\") i += 1;
     else if (t[i] === r) return i;
   return t.length;
 }
-function st(t, e) {
+function bt(t, e) {
   const r = t.indexOf("*/", e + 2);
   return r < 0 ? t.length : r + 1;
 }
-const Qt = /* @__PURE__ */ new WeakSet(), er = /* @__PURE__ */ new WeakSet();
-class ot {
+const yr = /* @__PURE__ */ new WeakSet(), gr = /* @__PURE__ */ new WeakSet();
+class wt {
   constructor(e = []) {
     c(this, "providers", /* @__PURE__ */ new Map());
     c(this, "instances", /* @__PURE__ */ new Map());
@@ -658,7 +661,7 @@ class ot {
     if (!Array.isArray(e))
       throw new TypeError("ServiceScope providers must be an array");
     for (const r of e) {
-      if (ir(r), this.providers.has(r.key))
+      if (vr(r), this.providers.has(r.key))
         throw new Error(`Service "${r.key.name}" is registered more than once`);
       this.providers.set(r.key, r);
     }
@@ -667,10 +670,10 @@ class ot {
     return this.disposed;
   }
   has(e) {
-    return this.assertActive(), Fe(e), this.providers.has(e);
+    return this.assertActive(), Je(e), this.providers.has(e);
   }
   require(e) {
-    if (this.assertActive(), Fe(e), this.instances.has(e)) return this.instances.get(e);
+    if (this.assertActive(), Je(e), this.instances.has(e)) return this.instances.get(e);
     const r = this.providers.get(e);
     if (r == null) throw new Error(`Service "${e.name}" is not registered`);
     const i = this.resolving.indexOf(e);
@@ -693,7 +696,7 @@ class ot {
     for (const r of [...this.creationOrder].reverse()) {
       const i = this.instances.get(r);
       try {
-        const n = nr(i);
+        const n = kr(i);
         n != null && n.call(i);
       } catch (n) {
         e.push(n);
@@ -707,29 +710,26 @@ class ot {
     if (this.disposed) throw new Error("ServiceScope has been disposed");
   }
 }
-function tr(t = []) {
-  return new ot(t);
+function br(t = []) {
+  return new wt(t);
 }
-function rr(t) {
-  return t != null && (typeof t == "object" || typeof t == "function") && Qt.has(t);
+function wr(t) {
+  return t != null && (typeof t == "object" || typeof t == "function") && yr.has(t);
 }
-function Fe(t) {
-  if (!rr(t)) throw new TypeError("Expected a service key created by defineService()");
+function Je(t) {
+  if (!wr(t)) throw new TypeError("Expected a service key created by defineService()");
 }
-function ir(t) {
-  if (t == null || typeof t != "object" && typeof t != "function" || !er.has(t))
+function vr(t) {
+  if (t == null || typeof t != "object" && typeof t != "function" || !gr.has(t))
     throw new TypeError("Expected a service provider created by provideService()");
 }
-function nr(t) {
+function kr(t) {
   if (t == null || typeof t != "object" && typeof t != "function") return null;
   const e = Reflect.get(t, "dispose");
   return typeof e == "function" ? e : null;
 }
-const ne = Object.freeze({
+const pe = Object.freeze({
   breadcrumbLabel: "Breadcrumb",
-  calendarGridLabel: "Choose a date",
-  calendarNextMonthLabel: "Next month",
-  calendarPreviousMonthLabel: "Previous month",
   checkboxOptionLabel: "Option",
   checkboxStateLabel: (t, e) => `${t}: ${e}`,
   colorOptionGrayLabel: "Gray",
@@ -744,10 +744,6 @@ const ne = Object.freeze({
   dataTableLoadError: "Unable to load rows",
   dataTableLoading: "Loading rows…",
   dataTableRetry: "Retry",
-  datePickerDialogLabel: "Choose a date",
-  datePickerOpenCalendarLabel: "Open calendar",
-  dateTimePickerDateLabel: "Date",
-  dateTimePickerTimeLabel: "Time",
   dialogCloseLabel: "Close",
   dropdownLoadError: "Unable to load options",
   dropdownPlaceholder: "Select…",
@@ -769,16 +765,15 @@ const ne = Object.freeze({
   tabLineLabel: "Sections",
   tableFilterColumnLabel: (t) => `Filter ${t}`,
   tableSortColumnLabel: (t) => `Sort ${t}`,
-  themeOptionJavaLabel: "Java",
+  themeOptionCapillaryLabel: "Capillary",
   themeOptionMinimalLabel: "Minimal",
   themeOptionShinyLabel: "Shiny",
-  timePickerPlaceholder: "Select time…",
   toolbarLabel: "Actions",
   treeViewEmpty: "No tree items",
   treeViewLoadError: "Unable to load tree items",
   treeViewLoading: "Loading tree items…"
 });
-class at {
+class vt {
   constructor(e, r) {
     c(this, "locale");
     c(this, "messages");
@@ -788,30 +783,30 @@ class at {
     return this.messages[e];
   }
 }
-const sr = new at(
+const Sr = new vt(
   void 0,
-  ne
+  pe
 );
-function or(t) {
-  if (t == null) return sr;
+function Er(t) {
+  if (t == null) return Sr;
   if (typeof t != "object" || Array.isArray(t))
     throw new TypeError("Capillary UI localization must be an object");
-  const e = ar(t.locale), r = t.messages;
+  const e = $r(t.locale), r = t.messages;
   if (r != null && (typeof r != "object" || Array.isArray(r)))
     throw new TypeError("Capillary UI localization messages must be an object");
-  const i = { ...ne };
+  const i = { ...pe };
   if (r != null)
-    for (const n of Object.keys(ne)) {
+    for (const n of Object.keys(pe)) {
       const s = r[n];
       if (s === void 0) continue;
-      const o = ne[n];
+      const o = pe[n];
       if (typeof s != typeof o)
         throw new TypeError(`Capillary UI localization message "${n}" has the wrong type`);
       Object.assign(i, { [n]: s });
     }
-  return new at(e, Object.freeze(i));
+  return new vt(e, Object.freeze(i));
 }
-function ar(t) {
+function $r(t) {
   if (typeof t != "string" || t.trim() === "")
     throw new TypeError("Capillary UI localization locale must be a non-empty BCP 47 language tag");
   try {
@@ -820,7 +815,7 @@ function ar(t) {
     throw new RangeError(`Invalid Capillary UI localization locale: ${t}`, { cause: e });
   }
 }
-const lr = /* @__PURE__ */ new Set([
+const xr = /* @__PURE__ */ new Set([
   "annotation-xml",
   "color-profile",
   "font-face",
@@ -830,27 +825,28 @@ const lr = /* @__PURE__ */ new Set([
   "font-face-name",
   "missing-glyph"
 ]);
-class lt {
-  constructor(e = {}, r = Vt()) {
+class kt {
+  constructor(e = {}, r = cr()) {
     c(this, "styleRegistry");
     c(this, "services");
     c(this, "router");
     c(this, "localization");
+    c(this, "diagnosticScope");
     c(this, "routedRoots", /* @__PURE__ */ new WeakSet());
     if (e == null || typeof e != "object" || Array.isArray(e))
       throw new TypeError("CapillaryUiRuntime options must be an object");
     if (Object.hasOwn(e, "elementNames"))
       throw new TypeError("CapillaryUiRuntime no longer supports configurable element names");
-    if (this.styleRegistry = r, this.localization = or(e.localization), this.services = e.services ?? tr(), !(this.services instanceof ot))
+    if (this.styleRegistry = r, this.diagnosticScope = e.diagnosticScope ?? Ht, this.localization = Er(e.localization), this.services = e.services ?? br(), !(this.services instanceof wt))
       throw new TypeError("Capillary UI services must be a ServiceScope");
     if (this.router = e.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(e) {
-    ct(e, "Capillary UI component host name");
+    St(e, "Capillary UI component host name");
     const r = `cap-${e.replaceAll("-", "")}`;
-    return cr(r), r;
+    return Cr(r), r;
   }
   resolveHostSelector(e, r) {
     if (typeof e != "string") throw new TypeError("Host selector must be a string");
@@ -861,7 +857,7 @@ class lt {
     return e.replaceAll("&", this.resolveElementName(r));
   }
   create(e, ...r) {
-    const i = new e(...r);
+    const i = m.withScope(this.diagnosticScope, () => new e(...r));
     return i._setRuntime(this), i;
   }
   mount(e, r, i = null) {
@@ -884,16 +880,16 @@ class lt {
     return this.styleRegistry.injectAll(e);
   }
 }
-const qe = new lt({}, Yt);
-function ct(t, e) {
+const Qe = new kt({}, ur);
+function St(t, e) {
   if (typeof t != "string" || !/^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/.test(t))
     throw new TypeError(`${e} must be a lowercase kebab-case name`);
 }
-function cr(t) {
-  if (ct(t, "Capillary UI element name"), !t.includes("-") || lr.has(t))
+function Cr(t) {
+  if (St(t, "Capillary UI element name"), !t.includes("-") || xr.has(t))
     throw new TypeError(`Capillary UI element name must be a non-reserved name containing a hyphen: ${t}`);
 }
-const le = Symbol.for("@capillaryjs/capillary-ui.Fragment"), ur = /* @__PURE__ */ new WeakSet(), hr = /* @__PURE__ */ new Set([
+const ee = Symbol.for("@capillaryjs/capillary-ui.Fragment"), Tr = /* @__PURE__ */ new WeakSet(), zr = /* @__PURE__ */ new Set([
   "allowFullScreen",
   "async",
   "autoFocus",
@@ -917,7 +913,7 @@ const le = Symbol.for("@capillaryjs/capillary-ui.Fragment"), ur = /* @__PURE__ *
   "required",
   "reversed",
   "selected"
-]), dr = /* @__PURE__ */ new Set([
+]), Rr = /* @__PURE__ */ new Set([
   "checked",
   "defaultChecked",
   "defaultValue",
@@ -931,8 +927,12 @@ const le = Symbol.for("@capillaryjs/capillary-ui.Fragment"), ur = /* @__PURE__ *
   "selectedIndex",
   "tabIndex",
   "value"
-]), _e = "data-cap";
-function ce(t, e = null, ...r) {
+]), et = "data-cap";
+let C = null;
+function E() {
+  C && (C.count += 1);
+}
+function me(t, e = null, ...r) {
   const i = e ?? {};
   if (typeof i != "object" || Array.isArray(i))
     throw new TypeError("VNode props must be an object or null");
@@ -946,14 +946,14 @@ function ce(t, e = null, ...r) {
     key: s,
     props: {
       ...o,
-      children: ut([n, r])
+      children: Et([n, r])
     }
   };
 }
-function pr(t, ...e) {
+function Ar(t, ...e) {
   return t.reduce((r, i, n) => r + i + String(e[n] ?? ""), "");
 }
-const $ = class $ {
+const x = class x {
   constructor(e = {}) {
     c(this, "props");
     c(this, "dom", null);
@@ -973,7 +973,7 @@ const $ = class $ {
     c(this, "renderReadSubscriptions", /* @__PURE__ */ new Map());
     c(this, "collectingRenderReads", null);
     /** @internal */
-    c(this, "_runtime", qe);
+    c(this, "_runtime", Qe);
     /** @internal Route lineage inherited by nested routed components. */
     c(this, "_routeContext", null);
     /** JSX component for this instance's runtime-configured custom host. */
@@ -987,14 +987,14 @@ const $ = class $ {
   }
   static new(...e) {
     const r = new this(...e);
-    if (!(r instanceof $))
+    if (!(r instanceof x))
       throw new TypeError("Component.new() requires a Component constructor");
     return r.mount();
   }
-  static registerStyles(e = qe, r = /* @__PURE__ */ new Set()) {
+  static registerStyles(e = Qe, r = /* @__PURE__ */ new Set()) {
     if (r.has(this)) return;
     r.add(this);
-    const i = this.hostName ?? null, n = Ar(this);
+    const i = this.hostName ?? null, n = Wr(this);
     for (const s of n)
       Object.hasOwn(s, "css") && s.css && (i == null ? e.styleRegistry.registerCSS(s.css) : e.styleRegistry.registerHostCSS(
         s.css,
@@ -1005,6 +1005,24 @@ const $ = class $ {
         for (const o of s.dependencies ?? [])
           o.registerStyles(e, r);
   }
+  get diagnosticScope() {
+    var e;
+    return this.constructor.diagnosticScope ?? ((e = this._parentComponent) == null ? void 0 : e.diagnosticScope) ?? this._runtime.diagnosticScope;
+  }
+  /** Stable instance label, captured when this component is first observed. */
+  get diagnosticLabel() {
+    const e = this.constructor;
+    return e.diagnosticLabel ?? e.hostName ?? e.name;
+  }
+  [Vt]() {
+    return {
+      kind: "component",
+      label: _(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() {
   }
@@ -1013,24 +1031,25 @@ const $ = class $ {
   }
   /** Render this component's configured custom host element. */
   host(e = null, ...r) {
-    const n = this.constructor.hostName;
+    const i = this.constructor, n = i.hostName;
     if (n == null)
       throw new Error(`${this.constructor.name} does not declare a custom host name`);
     const {
       class: s,
       className: o,
       ...a
-    } = e ?? {}, l = o ?? s, u = this.props.island === !0 ? Or(l, "island") : l;
-    return ce(this._runtime.resolveElementName(n), {
+    } = e ?? {}, l = o ?? s, u = this.props.island === !0 ? Yr(l, "island") : l;
+    return me(this._runtime.resolveElementName(n), {
       ...a,
       ...u == null ? {} : { className: u },
-      "data-cap-component": n
+      "data-cap-component": n,
+      ...i.dataSurface == null ? {} : { "data-cap-surface": i.dataSurface }
     }, ...r);
   }
   /** @internal Assign an immutable application runtime before initialization or mounting. */
   _setRuntime(e) {
     var r;
-    if (!(e instanceof lt))
+    if (!(e instanceof kt))
       throw new TypeError("Component runtime must be a CapillaryUiRuntime");
     if (e === this._runtime) return this;
     if (this.initialized || this.mounted || this._rendered != null)
@@ -1057,39 +1076,66 @@ const $ = class $ {
     if (this.destroyed) throw new Error("Cannot mount a destroyed component");
     this.validateIslandAncestry(this.props);
     let i = !1;
-    return this.initialized || (this.validateRequiredServices(), this.initialized = !0, this.initialize()), this.mounted || (this.mounted = !0, this.update(), i = !0), e != null && (Rr(e), je(e, this._rendered, r)), i && this.afterMount(this.dom), this;
+    return this.initialized || (this.validateRequiredServices(), this.initialized = !0, m.withScope(this.diagnosticScope, () => this.initialize())), this.mounted || (this.mounted = !0, this.update(), i = !0), e != null && (Vr(e), Fe(e, this._rendered, r)), i && this.afterMount(this.dom), this;
   }
   attachTo(e) {
     return this.mount(e), this;
   }
-  update(e) {
+  update(e, r = e instanceof Ge ? "dependency" : "explicit") {
     if (this.destroyed) return this;
     if (!this.mounted) return this.mount();
     if (this.updating)
       return this.updateRequested = !0, this;
     this.updating = !0;
+    const i = m.event(this, "consumer", {
+      parent: e instanceof Ge ? e : m.currentEvent,
+      cause: "component render",
+      outcome: "started",
+      consumer: { trigger: r }
+    }), n = C, s = i ? { count: 0 } : null;
+    let o = 0;
+    C = s;
     try {
-      do {
-        this.updateRequested = !1;
-        const r = /* @__PURE__ */ new Set();
-        this.collectingRenderReads = r;
-        let i;
-        try {
-          i = H(this.render());
-        } finally {
-          this.collectingRenderReads = null;
-        }
-        this._rendered = Re(this._rendered, i, this), this.dom = mt(this._rendered), this.reconcileRenderReads(r), this.afterUpdate(this.dom);
-      } while (this.updateRequested && !this.destroyed);
+      m.withEvent(i, () => {
+        do {
+          o += 1, this.updateRequested = !1;
+          const a = /* @__PURE__ */ new Set();
+          this.collectingRenderReads = a;
+          let l;
+          try {
+            l = m.withScope(this.diagnosticScope, () => J(this.render()));
+          } finally {
+            this.collectingRenderReads = null;
+          }
+          this._rendered = Ie(this._rendered, l, this), this.dom = At(this._rendered), this.reconcileRenderReads(a), this.afterUpdate(this.dom);
+        } while (this.updateRequested && !this.destroyed);
+      }), i && m.event(this, "consumer", {
+        parent: i,
+        cause: "component rendered",
+        outcome: "succeeded",
+        consumer: { trigger: r, domWrites: s.count, renderPasses: o }
+      });
+    } catch (a) {
+      throw i && m.event(this, "consumer", {
+        parent: i,
+        cause: "component render failed",
+        outcome: "failed",
+        error: a,
+        consumer: { trigger: r, domWrites: s.count, renderPasses: o }
+      }), a;
     } finally {
-      this.updating = !1;
+      C = n, this.updating = !1;
     }
     return this;
   }
   setProps(e) {
+    var r, i;
     if (e == null || typeof e != "object" || Array.isArray(e))
       throw new TypeError(`${this.constructor.name} props must be an object`);
-    return this.validateIslandAncestry(e), this.props = e, this.mounted && this.update(), this;
+    return this.validateIslandAncestry(e), this.props = e, this.mounted && this.update(
+      void 0,
+      ((i = (r = m.currentEvent) == null ? void 0 : r.diagnostic) == null ? void 0 : i.node.kind) === "binding" ? "dependency" : "parent"
+    ), this;
   }
   afterMount(e) {
   }
@@ -1102,7 +1148,7 @@ const $ = class $ {
       if (this.watched.has(r)) continue;
       const i = r.subscribe(({ event: n }) => {
         this.mounted && !this.destroyed && this.update(n);
-      }, { emitCurrent: !1 });
+      }, { emitCurrent: !1, diagnosticTarget: this });
       this.watched.set(r, i), this.onCleanup(() => {
         i(), this.watched.delete(r);
       });
@@ -1157,21 +1203,67 @@ const $ = class $ {
   listen(e, r, i, n) {
     if (e == null || typeof e.addEventListener != "function")
       throw new TypeError("listen target must be an EventTarget");
-    const s = i;
-    return e.addEventListener(r, s, n), this.onCleanup(() => e.removeEventListener(r, s, n)), this;
+    const s = {};
+    m.configure(s, {
+      kind: "interaction",
+      label: `${_(this)}: ${r}`,
+      scope: this.diagnosticScope
+    });
+    const o = (a) => ge(
+      s,
+      this.diagnosticScope,
+      a,
+      o,
+      r,
+      () => i(a)
+    );
+    return e.addEventListener(r, o, n), this.onCleanup(() => {
+      e.removeEventListener(r, o, n), m.dispose(s);
+    }), this;
+  }
+  /**
+   * Like {@link listen}, but returns a function that detaches the listener.
+   * Use for listeners that are only active some of the time — for example
+   * an outside-click handler that exists only while a popup is open — so
+   * they neither fire nor appear in the trace while inactive. The listener
+   * runs through the same traced native-event coalescing as listen(), and
+   * is removed on destroy if it is still attached.
+   */
+  listenWhile(e, r, i, n) {
+    if (e == null || typeof e.addEventListener != "function")
+      throw new TypeError("listen target must be an EventTarget");
+    const s = {};
+    m.configure(s, {
+      kind: "interaction",
+      label: `${_(this)}: ${r}`,
+      scope: this.diagnosticScope
+    });
+    const o = (d) => ge(
+      s,
+      this.diagnosticScope,
+      d,
+      o,
+      r,
+      () => i(d)
+    );
+    let a = !1;
+    const l = () => {
+      a && (a = !1, e.removeEventListener(r, o, n), m.dispose(s));
+    }, u = this.onCleanup(l);
+    return this.destroyed || (a = !0, e.addEventListener(r, o, n)), u;
   }
   registerChild(e) {
-    if (!(e instanceof $))
+    if (!(e instanceof x))
       throw new TypeError("registerChild requires a Component");
-    return this._childComponents.add(e), e;
+    return this._childComponents.add(e), m.active && m.inspect(this), e;
   }
   destroy() {
     if (!this.destroyed) {
-      this.destroyed = !0, this.mounted = !1;
+      this.destroyed = !0, this.mounted = !1, m.dispose(this);
       for (const e of [...this.cleanupFunctions]) e();
       this.cleanupFunctions.clear(), this.watched.clear();
       for (const e of this.renderReadSubscriptions.values()) e();
-      this.renderReadSubscriptions.clear(), this.collectingRenderReads = null, this._rendered && R(this._rendered, !0), this._rendered = null, this.dom = null, this._childComponents.clear(), this.onDestroy();
+      this.renderReadSubscriptions.clear(), this.collectingRenderReads = null, this._rendered && M(this._rendered, !0), this._rendered = null, this.dom = null, this._childComponents.clear(), this.onDestroy();
     }
   }
   validateRequiredServices() {
@@ -1181,25 +1273,25 @@ const $ = class $ {
         throw new Error(`${e.name} requires unregistered service "${r.name}"`);
   }
   validateIslandAncestry(e) {
-    if (!ke(e)) return;
+    if (!Oe(e)) return;
     if (this.hasIslandDescendant())
       throw new Error("An island component cannot contain another island");
     let r = this._parentComponent;
     for (; r != null; ) {
-      if (ke(r.props))
+      if (Oe(r.props))
         throw new Error("An island component cannot be nested inside another island");
       r = r._parentComponent;
     }
   }
   hasIslandDescendant() {
     for (const e of this._childComponents)
-      if (ke(e.props) || e.hasIslandDescendant()) return !0;
+      if (Oe(e.props) || e.hasIslandDescendant()) return !0;
     return !1;
   }
   onDestroy() {
   }
   trackRenderRead(e) {
-    if (wt(e, "Component.read"), this.collectingRenderReads == null)
+    if (Mt(e, "Component.read"), this.collectingRenderReads == null)
       throw new Error("Component.read() and snapshot() may only be called during render()");
     this.collectingRenderReads.add(e);
   }
@@ -1210,13 +1302,13 @@ const $ = class $ {
       if (this.watched.has(r) || this.renderReadSubscriptions.has(r)) continue;
       const i = r.subscribe(({ event: n }) => {
         this.mounted && !this.destroyed && this.update(n);
-      }, { emitCurrent: !1 });
+      }, { emitCurrent: !1, diagnosticTarget: this });
       this.renderReadSubscriptions.set(r, i);
     }
   }
 };
-c($, "dependencies", []), c($, "requiredServices", []), /** Component `live()` bindings are opt-in; subclasses declare their allowlist. */
-c($, "liveProps", []), c($, "css", pr`
+c(x, "dependencies", []), c(x, "requiredServices", []), /** Component `live()` bindings are opt-in; subclasses declare their allowlist. */
+c(x, "liveProps", []), c(x, "css", Ar`
         .cap-fill-horizontal,
         .cap-fill-vertical {
             box-sizing: border-box;
@@ -1247,6 +1339,7 @@ c($, "liveProps", []), c($, "css", pr`
             align-items: stretch;
             min-inline-size: 0;
             min-block-size: 0;
+            gap: calc(var(--_cap-island-flow, 0) * var(--island-gap, 0px));
         }
 
         .cap-layout-horizontal {
@@ -1268,11 +1361,55 @@ c($, "liveProps", []), c($, "css", pr`
         }
 
         .cap-scroll {
+            /* Move the clip into the surrounding gutter without moving the
+             * content. The inherited allowance is owned by the parent layout,
+             * so local gaps and nested scrollports do not add extra spacing. */
+            --_cap-scroll-gutter: calc(var(--_cap-island-flow, 0) * var(--_cap-island-gutter, 0px));
+            margin: calc(-1 * var(--_cap-scroll-gutter));
+            padding: var(--_cap-scroll-gutter);
             overflow: auto;
             min-inline-size: 0;
             min-block-size: 0;
         }
 
+        /* The mode crosses wrappers; each layout resolves its own public gap.
+         * Only the first enabled scope contributes a perimeter inset. */
+        .cap-island-layout {
+            --_cap-island-flow: 1;
+            --_cap-island-margin: 0px;
+            --_cap-island-separator-background: transparent;
+            box-sizing: border-box;
+            padding: var(--_cap-island-outer-inset, var(--island-inset, 0px));
+            gap: calc(var(--_cap-island-flow, 0) * var(--island-gap, 0px));
+        }
+
+        .cap-island-layout > * {
+            --_cap-island-outer-inset: 0px;
+        }
+
+        .cap-layout-horizontal > *,
+        .cap-layout-vertical > *,
+        .cap-island-layout > * {
+            --_cap-island-gutter: calc(var(--_cap-island-flow, 0) * var(--island-gap, 0px) / 2);
+        }
+
+        .cap-island-layout.cap-scroll {
+            padding: calc(var(--_cap-island-outer-inset, var(--island-inset, 0px))
+                + var(--_cap-scroll-gutter));
+        }
+
+        .cap-island-layout-off {
+            --_cap-island-flow: 0;
+            --_cap-island-margin: initial;
+            --_cap-island-separator-background: initial;
+        }
+
+        .cap-island-layout-off > *,
+        .island > * {
+            --_cap-island-outer-inset: initial;
+            --_cap-island-gutter: 0px;
+        }
+
         .colored {
             --colored-base-bg:
                     linear-gradient(
@@ -1290,10 +1427,12 @@ c($, "liveProps", []), c($, "css", pr`
 
         .app-footer.island,
         .island {
+            --_cap-island-flow: 0;
+            --_cap-island-separator-background: initial;
             box-sizing: border-box;
             min-width: 0;
             min-height: 0;
-            margin: var(--island-margin);
+            margin: var(--_cap-island-margin, var(--island-margin));
             padding: var(--island-padding);
             background: var(--island-background);
             border: var(--island-border);
@@ -1303,25 +1442,28 @@ c($, "liveProps", []), c($, "css", pr`
 
         .cap-fill-horizontal.island,
         .cap-fill-horizontal .island {
-            max-width: calc(100% - (2 * var(--island-margin)));
+            max-width: calc(100% - (2 * var(--_cap-island-margin, var(--island-margin))));
             overflow-x: auto;
         }
 
         .cap-fill-vertical.island,
         .cap-fill-vertical .island {
-            max-height: calc(100% - (2 * var(--island-margin)));
+            max-height: calc(100% - (2 * var(--_cap-island-margin, var(--island-margin))));
             overflow-y: auto;
         }
 
         label[data-cap] {
             user-select: none;
         }
-    `), c($, "hostName", null);
-let C = $;
-function H(t) {
-  return Array.isArray(t) ? ce(le, null, t) : t == null || typeof t == "boolean" ? ce(le) : t;
+    `), c(x, "hostName", null), /** Override for a diagnostic-tool subtree; ordinary components inherit their owner/runtime. */
+c(x, "diagnosticScope", null), /** Optional stable display name for bundled application components. Built-ins use their host name. */
+c(x, "diagnosticLabel", null), /** Optional host-level data surface marker for parent composition. */
+c(x, "dataSurface", null);
+let T = x;
+function J(t) {
+  return Array.isArray(t) ? me(ee, null, t) : t == null || typeof t == "boolean" ? me(ee) : t;
 }
-function ut(t) {
+function Et(t) {
   const e = [], r = (i) => {
     if (Array.isArray(i))
       for (const n of i) r(n);
@@ -1329,7 +1471,7 @@ function ut(t) {
   };
   return r(t), e;
 }
-function Y(t, e) {
+function te(t, e) {
   if (typeof t == "string" || typeof t == "number")
     return {
       kind: "text",
@@ -1338,15 +1480,15 @@ function Y(t, e) {
       node: document.createTextNode(String(t)),
       owner: e
     };
-  if (fe(t)) {
+  if (Se(t)) {
     const s = document.createComment("cap-emitter-start"), o = document.createComment("cap-emitter-end"), a = t.get();
     if (Object.is(a, t))
       throw new TypeError("A Capillary UI emitter child cannot render itself");
     const l = document.createDocumentFragment();
-    l.append(s, o);
-    const u = Y(H(a), e);
-    je(l, u, o);
-    const h = {
+    l.append(s, o), E(), E();
+    const u = te(J(a), e);
+    Fe(l, u, o);
+    const d = {
       kind: "emitter",
       key: null,
       source: t,
@@ -1357,16 +1499,16 @@ function Y(t, e) {
       },
       owner: e
     };
-    return h.unsubscribe = t.subscribe(({ value: p }) => {
-      if (Object.is(p, t))
+    return d.unsubscribe = ke(t, d, e, "reactive child", (h) => {
+      if (Object.is(h, t))
         throw new TypeError("A Capillary UI emitter child cannot render itself");
-      h.child = Re(h.child, H(p), e);
-    }, { emitCurrent: !1 }), h;
+      d.child = Ie(d.child, J(h), e);
+    }), d;
   }
-  if (t instanceof C)
+  if (t instanceof T)
     return t._setRuntime(e._runtime), t._setRouteContext(e._routeContextForChildren()), t._setParentComponent(e), t.mount(), e.registerChild(t), {
       kind: "component",
-      key: yt(t.props),
+      key: Ot(t.props),
       type: t.constructor,
       instance: t,
       prebuilt: !0,
@@ -1374,10 +1516,10 @@ function Y(t, e) {
       liveProps: /* @__PURE__ */ new Map(),
       owner: e
     };
-  if (!T(t))
-    throw new TypeError(`Invalid Capillary UI child: ${Ve(t)}`);
+  if (!O(t))
+    throw new TypeError(`Invalid Capillary UI child: ${st(t)}`);
   const { type: r, key: i = null, props: n } = t;
-  if (r === le) {
+  if (r === ee) {
     const s = document.createComment("cap-fragment-start"), o = document.createComment("cap-fragment-end"), a = {
       kind: "fragment",
       key: i,
@@ -1387,7 +1529,7 @@ function Y(t, e) {
       children: [],
       owner: e
     }, l = document.createDocumentFragment();
-    return l.append(s, o), a.children = ue(
+    return l.append(s, o), E(), E(), a.children = ye(
       l,
       [],
       n.children,
@@ -1410,12 +1552,15 @@ function Y(t, e) {
       children: [],
       owner: e
     };
-    return ft(o, n), o.children = ue(s, [], n.children, e), o;
+    return zt(o, n), o.children = ye(s, [], n.children, e), o;
   }
-  if (bt(r)) {
+  if (Lt(r)) {
     const s = n;
-    pt(r, s);
-    const o = Ue(s), a = new r(o);
+    Ct(r, s);
+    const o = tt(s), a = m.withScope(
+      r.diagnosticScope ?? e.diagnosticScope,
+      () => new r(o)
+    );
     a._setRuntime(e._runtime), a._setRouteContext(e._routeContextForChildren()), a._setParentComponent(e);
     const l = {
       kind: "component",
@@ -1427,190 +1572,220 @@ function Y(t, e) {
       liveProps: /* @__PURE__ */ new Map(),
       owner: e
     };
-    return dt(l, s), a.mount(), e.registerChild(a), l;
+    return xt(l, s), a.mount(), e.registerChild(a), l;
   }
   if (typeof r == "function") {
-    const s = r, o = n, a = Ue(o), l = H(s(a)), u = {
+    const s = r, o = n, a = tt(o), l = s === Reflect.get(e, "Host") ? null : {};
+    l && m.configure(l, {
+      kind: "component",
+      label: String(Reflect.get(s, "diagnosticLabel") ?? s.name ?? "Function component"),
+      scope: e.diagnosticScope,
+      sources: [e]
+    });
+    const u = Tt(l, () => te(J(s(a)), e)), d = {
       kind: "function",
       key: i,
       type: s,
       props: a,
       sourceProps: o,
       liveProps: /* @__PURE__ */ new Map(),
-      child: Y(l, e),
+      child: u,
+      diagnosticSubject: l,
       owner: e
     };
-    return mr(u), u;
+    return jr(d), d;
   }
-  throw new TypeError(`Unsupported vnode type: ${Ve(r)}`);
+  throw new TypeError(`Unsupported vnode type: ${st(r)}`);
 }
-function Re(t, e, r) {
-  if (t == null) return Y(e, r);
-  if (gt(t, e)) return ht(t, e, r);
-  const i = Y(e, r), n = mt(t), s = (n == null ? void 0 : n.parentNode) ?? null;
-  return s && je(s, i, n), R(t, !0), i;
+function Ie(t, e, r) {
+  if (t == null) return te(e, r);
+  if (jt(t, e)) return $t(t, e, r);
+  const i = te(e, r), n = At(t), s = (n == null ? void 0 : n.parentNode) ?? null;
+  return s && Fe(s, i, n), M(t, !0), i;
 }
-function ht(t, e, r) {
-  return t.kind === "text" ? (typeof e != "string" && typeof e != "number" || Object.is(t.value, e) || (t.value = e, t.node.data = String(e)), t) : t.kind === "emitter" ? (!fe(e) || t.source !== e, t) : t.kind === "component" ? (e instanceof C || T(e) && fr(t, e.props), t) : T(e) ? t.kind === "function" ? (yr(t, e.props), t) : t.kind === "fragment" ? (t.children = ue(
+function $t(t, e, r) {
+  return t.kind === "text" ? (typeof e != "string" && typeof e != "number" || Object.is(t.value, e) || (t.value = e, t.node.data = String(e), E()), t) : t.kind === "emitter" ? (!Se(e) || t.source !== e, t) : t.kind === "component" ? (e instanceof T || O(e) && Or(t, e.props), t) : O(e) ? t.kind === "function" ? (Lr(t, e.props), t) : t.kind === "fragment" ? (t.children = ye(
     t.start.parentNode,
     t.children,
     e.props.children,
     r,
     t.end,
     t.start
-  ), t) : (ft(t, e.props), t.children = ue(
+  ), t) : (zt(t, e.props), t.children = ye(
     t.node,
     t.children,
     e.props.children,
     r
   ), t) : t;
 }
-function Ue(t) {
+function tt(t) {
   return Object.fromEntries(Object.entries(t).map(([e, r]) => [
     e,
-    N(r) ? r.emitter.get() : r
+    q(r) ? r.emitter.get() : r
   ]));
 }
-function dt(t, e) {
-  Ae(t.liveProps, e, (r, i) => {
+function xt(t, e) {
+  _e(t.liveProps, e, t.instance, _(t.instance), (r, i) => {
     t.props = { ...t.props, [r]: i }, t.instance.setProps(t.props);
-  }), t.props = Oe(t.liveProps, e), t.instance.setProps(t.props);
+  }), t.props = Be(t.liveProps, e), t.instance.setProps(t.props);
 }
-function fr(t, e) {
-  pt(t.type, e), dt(t, e);
+function Or(t, e) {
+  Ct(t.type, e), xt(t, e);
 }
-function pt(t, e) {
+function Ct(t, e) {
   const r = Reflect.get(t, "liveProps");
   if (r == null) return;
   if (!Array.isArray(r) || r.some((n) => typeof n != "string"))
     throw new TypeError(`${t.name || "Component"}.liveProps must be an array`);
   const i = new Set(r);
   for (const [n, s] of Object.entries(e))
-    if (N(s) && !i.has(n))
+    if (q(s) && !i.has(n))
       throw new TypeError(
         `${t.name || "Component"} prop "${n}" does not support live()`
       );
 }
-function mr(t) {
-  Ae(t.liveProps, t.sourceProps, (e, r) => {
-    t.props = { ...t.props, [e]: r }, $e(t);
-  }), t.props = Oe(t.liveProps, t.sourceProps);
-}
-function yr(t, e) {
-  t.sourceProps = e, Ae(t.liveProps, e, (r, i) => {
-    t.props = { ...t.props, [r]: i }, $e(t);
-  }), t.props = Oe(t.liveProps, e), $e(t);
-}
-function $e(t) {
-  const e = H(t.type(t.props));
-  t.child = Re(t.child, e, t.owner);
-}
-function Ae(t, e, r) {
-  for (const [i, n] of t) {
-    const s = e[i];
-    N(s) && s.emitter === n.source || (n.unsubscribe(), t.delete(i));
-  }
-  for (const [i, n] of Object.entries(e)) {
-    if (!N(n) || t.has(i)) continue;
-    const s = {
-      source: n.emitter,
-      value: n.emitter.get(),
+function jr(t) {
+  _e(t.liveProps, t.sourceProps, t.owner, t.type.diagnosticLabel ?? t.type.name, (e, r) => {
+    t.props = { ...t.props, [e]: r }, Me(t, "dependency");
+  }), t.props = Be(t.liveProps, t.sourceProps);
+}
+function Lr(t, e) {
+  t.sourceProps = e, _e(t.liveProps, e, t.owner, t.type.diagnosticLabel ?? t.type.name, (r, i) => {
+    t.props = { ...t.props, [r]: i }, Me(t, "dependency");
+  }), t.props = Be(t.liveProps, e), Me(t);
+}
+function Me(t, e = "parent") {
+  Tt(t.diagnosticSubject, () => {
+    const r = J(t.type(t.props));
+    t.child = Ie(t.child, r, t.owner);
+  }, e);
+}
+function Tt(t, e, r = "parent") {
+  if (!t) return e();
+  const i = m.event(t, "consumer", { cause: "function component render", outcome: "started", consumer: { trigger: r } }), n = C, s = i ? { count: 0 } : null;
+  C = s;
+  try {
+    const o = i ? m.withEvent(i, e) : e();
+    return i && m.event(t, "consumer", { parent: i, cause: "function component rendered", outcome: "succeeded", consumer: { trigger: r, domWrites: s.count, renderPasses: 1 } }), o;
+  } catch (o) {
+    throw i && m.event(t, "consumer", { parent: i, cause: "function component failed", outcome: "failed", error: o, consumer: { trigger: r, domWrites: s.count, renderPasses: 1 } }), o;
+  } finally {
+    C = n;
+  }
+}
+function _e(t, e, r, i, n) {
+  for (const [s, o] of t) {
+    const a = e[s];
+    q(a) && a.emitter === o.source || (o.unsubscribe(), t.delete(s));
+  }
+  for (const [s, o] of Object.entries(e)) {
+    if (!q(o) || t.has(s)) continue;
+    const a = {
+      source: o.emitter,
+      value: o.emitter.get(),
       unsubscribe: () => {
       }
     };
-    s.unsubscribe = n.emitter.subscribe(({ value: o }) => {
-      t.get(i) === s && (s.value = o, r(i, o));
-    }, { emitCurrent: !1 }), t.set(i, s);
+    a.unsubscribe = ke(o.emitter, a, r, `${i}.${s}`, (l) => {
+      t.get(s) === a && (a.value = l, n(s, l));
+    }), t.set(s, a);
   }
 }
-function Oe(t, e) {
+function Be(t, e) {
   return Object.fromEntries(Object.entries(e).map(([r, i]) => {
     var n;
     return [
       r,
-      N(i) ? ((n = t.get(r)) == null ? void 0 : n.value) ?? i.emitter.get() : i
+      q(i) ? ((n = t.get(r)) == null ? void 0 : n.value) ?? i.emitter.get() : i
     ];
   }));
 }
-function ue(t, e, r, i, n = null, s = null) {
+function ye(t, e, r, i, n = null, s = null) {
   if (t == null) throw new Error("Cannot patch a detached fragment range");
-  const o = ut(r), a = /* @__PURE__ */ new Map(), l = [];
-  for (const g of e)
-    g.key == null ? l.push(g) : a.has(g.key) || a.set(g.key, g);
-  const u = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), p = [];
-  let b = 0;
-  for (const g of o) {
-    const f = U(g);
+  const o = Et(r), a = /* @__PURE__ */ new Map(), l = [];
+  for (const y of e)
+    y.key == null ? l.push(y) : a.has(y.key) || a.set(y.key, y);
+  const u = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set(), h = [];
+  let k = 0;
+  for (const y of o) {
+    const f = Z(y);
     if (f != null) {
       if (u.has(f)) throw new Error(`Duplicate sibling key: ${String(f)}`);
       u.add(f);
     }
-    const E = f == null ? l[b++] : a.get(f);
-    E && gt(E, g) ? (h.add(E), p.push(ht(E, g, i))) : p.push(Y(g, i));
-  }
-  for (const g of e)
-    h.has(g) || R(g, !0);
-  let y = s ? s.nextSibling : t.firstChild;
-  for (const g of p)
-    for (const f of O(g))
-      f === y ? y = y.nextSibling : (t.insertBefore(f, y ?? n), y = f.nextSibling);
-  return p;
-}
-function ft(t, e) {
+    const z = f == null ? l[k++] : a.get(f);
+    z && jt(z, y) ? (d.add(z), h.push($t(z, y, i))) : h.push(te(y, i));
+  }
+  for (const y of e)
+    d.has(y) || M(y, !0);
+  let b = s ? s.nextSibling : t.firstChild;
+  for (const y of h)
+    for (const f of P(y))
+      f === b ? b = b.nextSibling : (t.insertBefore(f, b ?? n), E(), b = f.nextSibling);
+  return h;
+}
+function zt(t, e) {
   const r = Object.fromEntries(Object.entries(e).filter(
-    ([s]) => s !== "children" && se(s) !== _e
+    ([s]) => s !== "children" && X(s) !== et
   )), i = t.props, n = /* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(r)]);
   for (const s of ["value", "checked"])
     if (Object.hasOwn(r, s) && Object.hasOwn(r, `bind:${s}`))
       throw new Error(`${s} and bind:${s} cannot be used together`);
   for (const s of n) {
     const o = i[s], a = r[s];
-    if (Cr(s))
-      br(t, s, a);
+    if (Fr(s))
+      Dr(t, s, a);
     else if (s === "ref")
-      o !== a && vr(t, a);
-    else if ($r(s))
-      wr(t, s, a);
-    else if (N(a))
-      gr(t, s, a);
+      o !== a && Nr(t, a);
+    else if (Br(s))
+      Pr(t, s, a);
+    else if (q(a))
+      Mr(t, s, a);
     else {
       const l = t.liveProps.get(s);
       l && (l.unsubscribe(), t.liveProps.delete(s));
       const u = (l == null ? void 0 : l.value) ?? o;
-      Object.is(u, a) || M(t.node, s, u, a);
+      Object.is(u, a) || B(t.node, s, u, a);
     }
   }
-  t.node.setAttribute(_e, ""), t.props = { ...r };
+  L(t.node, et, ""), t.props = { ...r };
 }
-function gr(t, e, r) {
+function Mr(t, e, r) {
   const i = t.liveProps.get(e);
   if ((i == null ? void 0 : i.source) === r.emitter) return;
   i == null || i.unsubscribe();
   const n = r.emitter.get();
-  M(t.node, e, (i == null ? void 0 : i.value) ?? t.props[e], n);
+  B(t.node, e, (i == null ? void 0 : i.value) ?? t.props[e], n);
   const s = {
     source: r.emitter,
     value: n,
     unsubscribe: () => {
     }
   };
-  s.unsubscribe = r.emitter.subscribe(({ value: o }) => {
+  s.unsubscribe = ke(r.emitter, s, t.owner, `${t.type}.${e}`, (o) => {
     const a = s.value;
-    s.value = o, Object.is(a, o) || M(t.node, e, a, o);
-  }, { emitCurrent: !1 }), t.liveProps.set(e, s);
+    s.value = o, Object.is(a, o) || B(t.node, e, a, o);
+  }), t.liveProps.set(e, s);
 }
-function br(t, e, r) {
+function Dr(t, e, r) {
   const i = e.slice(5), n = t.nativeBindings.get(e);
   if (r == null) {
-    n && (n.unsubscribe(), t.node.removeEventListener(n.eventName, n.listener), t.nativeBindings.delete(e), M(t.node, i, n.value, void 0));
+    n && (n.unsubscribe(), t.node.removeEventListener(n.eventName, n.listener), t.nativeBindings.delete(e), B(t.node, i, n.value, void 0));
     return;
   }
-  if (xr(r, e), (n == null ? void 0 : n.source) === r) return;
-  n && (n.unsubscribe(), t.node.removeEventListener(n.eventName, n.listener)), Tr(t.node, i);
-  const s = zr(t.node, i), o = r.get();
-  M(t.node, i, n == null ? void 0 : n.value, o);
-  const a = () => {
-    r.set(Reflect.get(t.node, i), `${e} changed`);
+  if (qr(r, e), (n == null ? void 0 : n.source) === r) return;
+  n && (n.unsubscribe(), t.node.removeEventListener(n.eventName, n.listener)), Ur(t.node, i);
+  const s = Hr(t.node, i), o = r.get();
+  B(t.node, i, n == null ? void 0 : n.value, o);
+  const a = (u) => {
+    ge(
+      Rt(t, s),
+      t.owner.diagnosticScope,
+      u,
+      a,
+      `${e} changed`,
+      () => r.set(Reflect.get(t.node, i), `${e} changed`)
+    );
   }, l = {
     source: r,
     value: o,
@@ -1619,101 +1794,187 @@ function br(t, e, r) {
     unsubscribe: () => {
     }
   };
-  l.unsubscribe = r.subscribe(({ value: u }) => {
-    const h = l.value;
-    l.value = u, Object.is(h, u) || M(t.node, i, h, u);
-  }, { emitCurrent: !1 }), t.node.addEventListener(s, a), t.nativeBindings.set(e, l);
-}
-function wr(t, e, r) {
-  const i = e.slice(2).toLowerCase(), n = t.listeners.get(e);
-  if (n && n !== r && (t.node.removeEventListener(i, n), t.listeners.delete(e)), r != null && typeof r != "function")
+  l.unsubscribe = ke(r, l, t.owner, `${t.type}.${e}`, (u) => {
+    const d = l.value;
+    l.value = u, Object.is(d, u) || B(t.node, i, d, u);
+  }), t.node.addEventListener(s, a), t.nativeBindings.set(e, l);
+}
+function Pr(t, e, r) {
+  const i = e.slice(2).toLowerCase(), n = t.listeners.get(e), s = n ? it.get(n) ?? n : null;
+  if (n && s !== r && (t.node.removeEventListener(i, n), t.listeners.delete(e)), r != null && typeof r != "function")
     throw new TypeError(`${e} must be a function or null`);
-  if (typeof r == "function" && n !== r) {
-    const s = r;
-    t.node.addEventListener(i, s), t.listeners.set(e, s);
+  if (typeof r == "function" && s !== r) {
+    const o = (a) => ge(
+      Rt(t, i),
+      t.owner.diagnosticScope,
+      a,
+      o,
+      i,
+      () => r.call(t.node, a)
+    );
+    it.set(o, r), t.node.addEventListener(i, o), t.listeners.set(e, o);
+  }
+}
+const rt = /* @__PURE__ */ new WeakMap(), it = /* @__PURE__ */ new WeakMap(), Ae = /* @__PURE__ */ new WeakMap();
+function ge(t, e, r, i, n, s) {
+  return m.withScope(e, () => {
+    if (!m.active) return s();
+    let o = Ae.get(r);
+    return (!o || o.listeners.has(i)) && (o = { event: m.event(t, "interaction", { cause: n, outcome: "started" }), listeners: /* @__PURE__ */ new Set() }, Ae.set(r, o), queueMicrotask(() => Ae.delete(r))), o.listeners.add(i), m.withEvent(o.event, s);
+  });
+}
+function Rt(t, e) {
+  var n;
+  let r = rt.get(t);
+  r || (r = /* @__PURE__ */ new Map(), rt.set(t, r));
+  let i = r.get(e);
+  if (!i) {
+    i = {};
+    const s = t.node.getAttribute("aria-label") ?? t.node.getAttribute("name") ?? ((n = t.node.textContent) == null ? void 0 : n.trim().slice(0, 80)) ?? "";
+    m.configure(i, {
+      kind: "interaction",
+      label: `${_(t.owner)}: ${t.type} ${s} ${e}`.trim(),
+      scope: t.owner.diagnosticScope
+    }), r.set(e, i);
   }
+  return i;
+}
+function ke(t, e, r, i, n) {
+  m.configure(e, {
+    kind: "binding",
+    label: `${_(r)}: ${i}`,
+    scope: r.diagnosticScope,
+    sources: [t]
+  });
+  const s = t.subscribe(({ value: o, event: a }) => {
+    const l = m.event(e, "consumer", {
+      parent: a,
+      cause: "binding update",
+      value: o,
+      outcome: "started",
+      consumer: { trigger: "dependency" }
+    }), u = C, d = l ? { count: 0 } : null;
+    C = d;
+    try {
+      m.withEvent(l, () => n(o)), l && m.event(e, "consumer", {
+        parent: l,
+        cause: "binding updated",
+        value: o,
+        outcome: "succeeded",
+        consumer: { trigger: "dependency", domWrites: d.count }
+      });
+    } catch (h) {
+      throw l && m.event(e, "consumer", {
+        parent: l,
+        cause: "binding update failed",
+        outcome: "failed",
+        error: h,
+        consumer: { trigger: "dependency", domWrites: d.count }
+      }), h;
+    } finally {
+      C = u;
+    }
+  }, { emitCurrent: !1, diagnosticTarget: e });
+  return () => {
+    s(), m.dispose(e);
+  };
+}
+function _(t) {
+  return t.diagnosticLabel;
 }
-function vr(t, e) {
-  if (Ce(t.ref, null), e != null && typeof e != "function" && typeof e != "object")
+function Nr(t, e) {
+  if (De(t.ref, null), e != null && typeof e != "function" && typeof e != "object")
     throw new TypeError("ref must be a function, object, or null");
-  t.ref = e, Ce(t.ref, t.node);
+  t.ref = e, De(t.ref, t.node);
 }
-function M(t, e, r, i) {
+function B(t, e, r, i) {
   if (e === "class" || e === "className") {
-    ve(t, "class", i);
+    L(t, "class", i);
     return;
   }
   if (e === "for" || e === "htmlFor") {
-    ve(t, "for", i);
+    L(t, "for", i);
     return;
   }
   if (e === "dataset") {
-    kr(t, r, i);
+    Kr(t, r, i);
     return;
   }
   if (e === "style") {
-    Sr(t, r, i);
+    Ir(t, r, i);
     return;
   }
   if (e === "dangerouslySetInnerHTML")
     throw new Error("dangerouslySetInnerHTML is not supported");
-  const n = Er(e);
-  if (hr.has(n)) {
+  const n = _r(e);
+  if (zr.has(n)) {
     const s = !!i;
-    n in t && Reflect.set(t, n, s), t.toggleAttribute(se(e), s);
+    n in t && Reflect.get(t, n) !== s && (Reflect.set(t, n, s), E()), L(t, X(e), s);
+    return;
+  }
+  if (n === "value" && t.localName === "option") {
+    L(t, X(e), i);
     return;
   }
-  if (dr.has(n) && n in t) {
+  if (Rr.has(n) && n in t) {
     const s = i ?? (n === "value" ? "" : !1);
-    Object.is(Reflect.get(t, n), s) || Reflect.set(t, n, s), i == null && t.removeAttribute(se(e));
+    Object.is(Reflect.get(t, n), s) || (Reflect.set(t, n, s), E()), i == null && L(t, X(e), null);
     return;
   }
-  ve(t, se(e), i);
+  L(t, X(e), i);
 }
-function kr(t, e, r) {
-  const i = he(e, "dataset"), n = he(r, "dataset");
+function Kr(t, e, r) {
+  const i = be(e, "dataset"), n = be(r, "dataset");
   for (const s of /* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(n)])) {
     const o = n[s];
-    o == null ? delete t.dataset[s] : t.dataset[s] = String(o);
+    t.dataset[s] !== (o == null ? void 0 : String(o)) && (o == null ? delete t.dataset[s] : t.dataset[s] = String(o), E());
   }
 }
-function Sr(t, e, r) {
+function Ir(t, e, r) {
   if (typeof r == "string") {
-    t.style.cssText = r;
+    t.style.cssText !== r && (t.style.cssText = r, E());
     return;
   }
-  const i = typeof e == "string" ? {} : he(e, "style"), n = he(r, "style");
-  typeof e == "string" && (t.style.cssText = "");
+  const i = typeof e == "string" ? {} : be(e, "style"), n = be(r, "style");
+  typeof e == "string" && t.style.cssText !== "" && (t.style.cssText = "", E());
   for (const s of /* @__PURE__ */ new Set([...Object.keys(i), ...Object.keys(n)])) {
     const o = n[s];
-    s.startsWith("--") ? o == null ? t.style.removeProperty(s) : t.style.setProperty(s, String(o)) : Reflect.set(t.style, s, o == null ? "" : String(o));
+    if (s.startsWith("--")) {
+      if (t.style.getPropertyValue(s) === (o == null ? "" : String(o))) continue;
+      o == null ? t.style.removeProperty(s) : t.style.setProperty(s, String(o));
+    } else {
+      if (Reflect.get(t.style, s) === (o == null ? "" : String(o))) continue;
+      Reflect.set(t.style, s, o == null ? "" : String(o));
+    }
+    E();
   }
 }
-function he(t, e) {
+function be(t, e) {
   if (t == null) return {};
   if (typeof t != "object" || Array.isArray(t))
     throw new TypeError(`${e} must be an object or null`);
   return t;
 }
-function ve(t, e, r) {
-  r == null || r === !1 ? t.removeAttribute(e) : r === !0 ? t.setAttribute(e, "") : t.setAttribute(e, String(r));
+function L(t, e, r) {
+  const i = r == null || r === !1 ? null : r === !0 ? "" : String(r);
+  t.getAttribute(e) !== i && (i === null ? t.removeAttribute(e) : t.setAttribute(e, i), E());
 }
-function Er(t) {
+function _r(t) {
   return t === "readonly" ? "readOnly" : t === "autofocus" ? "autoFocus" : t;
 }
-function se(t) {
-  return t === "className" ? "class" : t === "htmlFor" ? "for" : t === "minLength" ? "minlength" : t === "maxLength" ? "maxlength" : t === "autoComplete" ? "autocomplete" : t === "inputMode" ? "inputmode" : /^aria[A-Z]/.test(t) || /^data[A-Z]/.test(t) ? He(t) : t.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
+function X(t) {
+  return t === "className" ? "class" : t === "htmlFor" ? "for" : t === "minLength" ? "minlength" : t === "maxLength" ? "maxlength" : t === "autoComplete" ? "autocomplete" : t === "inputMode" ? "inputmode" : /^aria[A-Z]/.test(t) || /^data[A-Z]/.test(t) ? nt(t) : t.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
 }
-function He(t) {
+function nt(t) {
   return t.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
 }
-function Ce(t, e) {
+function De(t, e) {
   t != null && (typeof t == "function" ? t(e) : t.current = e);
 }
-function R(t, e) {
+function M(t, e) {
   if (t.kind === "emitter") {
-    if (t.unsubscribe(), R(t.child, !1), e)
-      for (const r of O(t)) r.remove();
+    if (t.unsubscribe(), M(t.child, !1), e)
+      for (const r of P(t)) le(r);
     return;
   }
   if (t.kind === "component") {
@@ -1723,11 +1984,11 @@ function R(t, e) {
   }
   if (t.kind === "function") {
     for (const r of t.liveProps.values()) r.unsubscribe();
-    t.liveProps.clear(), R(t.child, e);
+    t.liveProps.clear(), t.diagnosticSubject && m.dispose(t.diagnosticSubject), M(t.child, e);
     return;
   }
   if (t.kind === "element") {
-    Ce(t.ref, null);
+    De(t.ref, null);
     for (const [r, i] of t.listeners)
       t.node.removeEventListener(r.slice(2).toLowerCase(), i);
     t.listeners.clear();
@@ -1736,114 +1997,118 @@ function R(t, e) {
     for (const r of t.nativeBindings.values())
       r.unsubscribe(), t.node.removeEventListener(r.eventName, r.listener);
     t.nativeBindings.clear();
-    for (const r of t.children) R(r, !1);
-    e && t.node.remove();
+    for (const r of t.children) M(r, !1);
+    e && le(t.node);
     return;
   }
   if (t.kind === "fragment") {
-    for (const r of t.children) R(r, !1);
+    for (const r of t.children) M(r, !1);
     if (e)
-      for (const r of O(t)) r.remove();
+      for (const r of P(t)) le(r);
     return;
   }
-  e && t.node.remove();
+  e && le(t.node);
+}
+function le(t) {
+  t.parentNode && (t.remove(), E());
 }
-function je(t, e, r = null) {
+function Fe(t, e, r = null) {
   if (e != null)
-    for (const i of O(e)) t.insertBefore(i, r);
+    for (const i of P(e))
+      i.parentNode === t && i.nextSibling === r || (t.insertBefore(i, r), E());
 }
-function O(t) {
+function P(t) {
   if (t == null) return [];
   if (t.kind === "text" || t.kind === "element") return [t.node];
-  if (t.kind === "component") return O(t.instance._rendered);
-  if (t.kind === "function") return O(t.child);
+  if (t.kind === "component") return P(t.instance._rendered);
+  if (t.kind === "function") return P(t.child);
   const e = [];
   let r = t.start;
   for (; r && (e.push(r), r !== t.end); )
     r = r.nextSibling;
   return e;
 }
-function mt(t) {
-  return O(t)[0] ?? null;
+function At(t) {
+  return P(t)[0] ?? null;
 }
-function U(t) {
-  return t instanceof C ? yt(t.props) : T(t) ? t.key : null;
+function Z(t) {
+  return t instanceof T ? Ot(t.props) : O(t) ? t.key : null;
 }
-function yt(t) {
+function Ot(t) {
   const e = t.key;
   return typeof e == "string" || typeof e == "number" ? e : null;
 }
-function gt(t, e) {
-  return t.kind === "text" ? typeof e == "string" || typeof e == "number" : t.kind === "emitter" ? fe(e) && t.source === e : t.kind === "component" ? e instanceof C ? t.instance === e : T(e) && bt(e.type) && t.type === e.type && t.key === U(e) : t.kind === "function" ? T(e) && t.type === e.type && t.key === U(e) : t.kind === "fragment" ? T(e) && e.type === le && t.key === U(e) : T(e) && typeof e.type == "string" && t.type === e.type && t.key === U(e);
+function jt(t, e) {
+  return t.kind === "text" ? typeof e == "string" || typeof e == "number" : t.kind === "emitter" ? Se(e) && t.source === e : t.kind === "component" ? e instanceof T ? t.instance === e : O(e) && Lt(e.type) && t.type === e.type && t.key === Z(e) : t.kind === "function" ? O(e) && t.type === e.type && t.key === Z(e) : t.kind === "fragment" ? O(e) && e.type === ee && t.key === Z(e) : O(e) && typeof e.type == "string" && t.type === e.type && t.key === Z(e);
 }
-function T(t) {
+function O(t) {
   return t != null && typeof t == "object" && Object.hasOwn(t, "type");
 }
-function bt(t) {
-  return typeof t == "function" && (t === C || t.prototype instanceof C);
+function Lt(t) {
+  return typeof t == "function" && (t === T || t.prototype instanceof T);
 }
-function $r(t) {
+function Br(t) {
   return /^on[A-Z]/.test(t);
 }
-function Cr(t) {
+function Fr(t) {
   return t === "bind:value" || t === "bind:checked";
 }
-function N(t) {
-  return t != null && typeof t == "object" && ur.has(t);
+function q(t) {
+  return t != null && typeof t == "object" && Tr.has(t);
 }
-function fe(t) {
+function Se(t) {
   return (typeof t != "object" || t == null) && typeof t != "function" ? !1 : typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "getFetchState") == "function" && typeof Reflect.get(t, "getError") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-function wt(t, e) {
-  if (!fe(t)) throw new TypeError(`${e} requires a readable emitter`);
+function Mt(t, e) {
+  if (!Se(t)) throw new TypeError(`${e} requires a readable emitter`);
 }
-function xr(t, e) {
-  if (wt(t, e), typeof Reflect.get(t, "set") != "function")
+function qr(t, e) {
+  if (Mt(t, e), typeof Reflect.get(t, "set") != "function")
     throw new TypeError(`${e} requires a writable emitter`);
 }
-function Tr(t, e) {
+function Ur(t, e) {
   const r = t.localName;
   if (!(e === "checked" ? r === "input" : r === "input" || r === "textarea" || r === "select")) throw new TypeError(`bind:${e} is not supported on ${r}`);
 }
-function zr(t, e) {
+function Hr(t, e) {
   return e === "value" && t.localName !== "select" ? "input" : "change";
 }
-function Rr(t) {
+function Vr(t) {
   if (t == null || typeof t != "object" && typeof t != "function" || typeof Reflect.get(t, "insertBefore") != "function")
     throw new TypeError("Component parent must be a DOM ParentNode");
 }
-function Ve(t) {
+function st(t) {
   try {
     return String(t);
   } catch {
     return Object.prototype.toString.call(t);
   }
 }
-function Ar(t) {
+function Wr(t) {
   const e = [];
   let r = t;
-  for (; r != null && typeof r == "function" && (e.unshift(r), r !== C); )
+  for (; r != null && typeof r == "function" && (e.unshift(r), r !== T); )
     r = Object.getPrototypeOf(r);
   return e;
 }
-function Or(...t) {
+function Yr(...t) {
   return [...new Set(t.flatMap((e) => typeof e == "string" ? e.split(/\s+/) : []).filter(Boolean))].join(" ");
 }
-function ke(t) {
+function Oe(t) {
   if (t.island === !0) return !0;
   const e = t.className ?? t.class;
   return typeof e == "string" && e.split(/\s+/).includes("island");
 }
-function d(t, e, r) {
+function p(t, e, r) {
   const i = e == null ? {} : { ...e };
-  return r !== void 0 && (i.key = r), ce(t, i);
+  return r !== void 0 && (i.key = r), me(t, i);
 }
-const m = d, jr = [
+const g = p, Gr = [
   "var(--colored-dark)",
   "var(--colored-base)",
   "var(--colored-light)"
 ];
-class ee extends Te {
+class Y extends Ne {
   render() {
     var b;
     const {
@@ -1851,72 +2116,74 @@ class ee extends Te {
       label: r = "Block graph",
       description: i = "Area is proportional to item count.",
       emptyMessage: n = "No items are available."
-    } = this.props, s = this.snapshot(e.layout$), o = this.read(e.selectedPath$), a = s.value, l = D(a.root, o), u = a.root.children.length === 0 ? [a.root] : a.root.children, h = (b = u[0]) == null ? void 0 : b.key, p = this.Host;
-    return /* @__PURE__ */ m(
-      p,
+    } = this.props, s = this.snapshot(e.layout$), o = s.fetchState === S.Initial || s.fetchState === S.Loading, a = this.read(e.selectedPath$), l = s.value, u = I(l.root, a), d = l.root.children.length === 0 ? [l.root] : l.root.children, h = (b = d[0]) == null ? void 0 : b.key, k = this.Host;
+    return /* @__PURE__ */ g(
+      k,
       {
         className: (this.props.className ?? this.props.class ?? "") || null,
         "aria-label": r,
-        "aria-busy": s.fetchState !== k.Ready ? "true" : null,
+        "aria-busy": o ? "true" : null,
         children: [
-          /* @__PURE__ */ m("header", { children: [
-            /* @__PURE__ */ m("cap-summary", { children: [
-              /* @__PURE__ */ d("h2", { children: r }),
-              /* @__PURE__ */ m("p", { children: [
+          /* @__PURE__ */ g("header", { children: [
+            /* @__PURE__ */ g("cap-summary", { children: [
+              /* @__PURE__ */ p("h2", { children: r }),
+              /* @__PURE__ */ g("p", { children: [
                 i,
                 " ",
-                a.root.count,
-                " items."
+                o ? null : `${l.root.count} items.`
               ] }),
-              /* @__PURE__ */ m("output", { children: [
-                /* @__PURE__ */ d("strong", { children: "Selection:" }),
+              o ? /* @__PURE__ */ p(xe, { width: 45 }) : /* @__PURE__ */ g("output", { children: [
+                /* @__PURE__ */ p("strong", { children: "Selection:" }),
                 " ",
-                l == null ? "None" : l.path.length === 0 ? l.label : l.path.map((y, g) => {
-                  var E;
-                  const f = l.path.slice(0, g + 1);
-                  return ((E = D(a.root, f)) == null ? void 0 : E.label) ?? y.categoryKey;
+                u == null ? "None" : u.path.length === 0 ? u.label : u.path.map((y, f) => {
+                  var R;
+                  const z = u.path.slice(0, f + 1);
+                  return ((R = I(l.root, z)) == null ? void 0 : R.label) ?? y.categoryKey;
                 }).join(" → ")
               ] })
             ] }),
-            /* @__PURE__ */ d(
-              oe,
+            /* @__PURE__ */ p(
+              he,
               {
                 label: "Clear selection",
-                disabled: o == null,
+                disabled: o || a == null,
                 onClick: () => e.clear()
               }
             )
           ] }),
-          s.fetchState === k.Error ? /* @__PURE__ */ d("p", { role: "alert", children: "The block graph could not be calculated." }) : s.fetchState !== k.Ready ? /* @__PURE__ */ d("p", { role: "status", "aria-live": "polite", children: "Loading block graph…" }) : a.valid ? a.root.count === 0 ? /* @__PURE__ */ d("p", { role: "status", children: n }) : /* @__PURE__ */ d(
+          s.fetchState === S.Error ? /* @__PURE__ */ p("p", { role: "alert", children: "The block graph could not be calculated." }) : o ? /* @__PURE__ */ g(ee, { children: [
+            /* @__PURE__ */ p("p", { role: "status", "aria-live": "polite", children: "Loading block graph…" }),
+            /* @__PURE__ */ p("cap-blockskeleton", { "aria-hidden": "true", children: [0, 1, 2].map((y) => /* @__PURE__ */ p("cap-blockskeletoncolumn", { children: [0, 1].map((f) => /* @__PURE__ */ p(xe, { width: 100 }, f)) }, y)) })
+          ] }) : l.valid ? l.root.count === 0 ? /* @__PURE__ */ p("p", { role: "status", children: n }) : /* @__PURE__ */ p(
             "cap-scroller",
             {
               tabIndex: 0,
               "aria-label": `Scrollable ${r}`,
-              children: /* @__PURE__ */ d(
+              children: /* @__PURE__ */ p(
                 "cap-blocks",
                 {
                   role: "tree",
                   "aria-label": r,
-                  className: a.root.childOrientation,
+                  className: l.root.childOrientation,
                   onClick: (y) => {
                     y.target === y.currentTarget && e.clear();
                   },
-                  children: u.map((y) => this.renderBlock(
+                  children: d.map((y) => this.renderBlock(
                     y,
-                    o,
-                    (l == null ? void 0 : l.key) ?? h ?? null
+                    a,
+                    (u == null ? void 0 : u.key) ?? h ?? null
                   ))
                 }
               )
             }
-          ) : this.renderPartitionError(a.issues)
+          ) : this.renderPartitionError(l.issues)
         ]
       }
     );
   }
   renderBlock(e, r, i) {
-    const n = Lr(e.path, r), s = e.colors, o = Xe(s ?? jr);
-    return /* @__PURE__ */ m(
+    const n = Xr(e.path, r), s = e.colors, o = ct(s ?? Gr);
+    return /* @__PURE__ */ g(
       "article",
       {
         role: "treeitem",
@@ -1938,17 +2205,17 @@ class ee extends Te {
           }
         },
         children: [
-          /* @__PURE__ */ m("cap-blocklabel", { children: [
-            /* @__PURE__ */ m("cap-blockname", { children: [
-              /* @__PURE__ */ m("small", { children: [
+          /* @__PURE__ */ g("cap-blocklabel", { children: [
+            /* @__PURE__ */ g("cap-blockname", { children: [
+              /* @__PURE__ */ g("small", { children: [
                 e.criterionLabel ?? "Items",
                 ":"
               ] }),
-              /* @__PURE__ */ d("strong", { children: e.label })
+              /* @__PURE__ */ p("strong", { children: e.label })
             ] }),
-            /* @__PURE__ */ d("data", { value: String(e.count), children: e.count })
+            /* @__PURE__ */ p("data", { value: String(e.count), children: e.count })
           ] }),
-          e.children.length === 0 ? null : /* @__PURE__ */ d(
+          e.children.length === 0 ? null : /* @__PURE__ */ p(
             "cap-blockgroup",
             {
               role: "group",
@@ -1967,9 +2234,9 @@ class ee extends Te {
   }
   renderPartitionError(e) {
     const r = e[0], i = r == null ? "The selected criteria do not form a complete partition." : r.kind === "unmatched" ? `${r.criterionLabel} has an item with no category.` : `${r.criterionLabel} has an item matching multiple categories.`;
-    return /* @__PURE__ */ m("div", { role: "alert", children: [
-      /* @__PURE__ */ d("strong", { children: "Invalid block partition" }),
-      /* @__PURE__ */ m("p", { children: [
+    return /* @__PURE__ */ g("div", { role: "alert", children: [
+      /* @__PURE__ */ p("strong", { children: "Invalid block partition" }),
+      /* @__PURE__ */ g("p", { children: [
         i,
         " ",
         e.length,
@@ -1988,7 +2255,7 @@ class ee extends Te {
       e.preventDefault(), this.props.model.clear("block selection cleared by keyboard");
       return;
     }
-    const i = this.props.model.layout$.get().root, n = vt(i.children.length === 0 ? [i] : i.children), s = n.findIndex(({ key: a }) => a === r.key);
+    const i = this.props.model.layout$.get().root, n = Dt(i.children.length === 0 ? [i] : i.children), s = n.findIndex(({ key: a }) => a === r.key);
     let o;
     if (e.key === "ArrowDown") o = n[s + 1];
     else if (e.key === "ArrowUp") o = n[s - 1];
@@ -1996,7 +2263,7 @@ class ee extends Te {
     else if (e.key === "End") o = n.at(-1);
     else if (e.key === "ArrowRight") o = r.children[0] ?? n[s + 1];
     else if (e.key === "ArrowLeft")
-      o = r.path.length <= 1 ? n[s - 1] : D(i, r.path.slice(0, -1)) ?? void 0;
+      o = r.path.length <= 1 ? n[s - 1] : I(i, r.path.slice(0, -1)) ?? void 0;
     else return;
     o != null && (e.preventDefault(), this.focusBlock(o.key));
   }
@@ -2010,7 +2277,7 @@ class ee extends Te {
     }
   }
 }
-c(ee, "liveProps", []), c(ee, "hostName", "block-graph"), c(ee, "dependencies", [oe]), c(ee, "css", G`
+c(Y, "liveProps", []), c(Y, "hostName", "block-graph"), c(Y, "dataSurface", "data"), c(Y, "dependencies", [he, xe]), c(Y, "css", re`
         & {
             display: flex;
             min-width: 0;
@@ -2047,6 +2314,33 @@ c(ee, "liveProps", []), c(ee, "hostName", "block-graph"), c(ee, "dependencies",
             overflow: auto;
         }
 
+        & > cap-blockskeleton {
+            display: flex;
+            flex: 1;
+            gap: var(--viz-space, 0.7rem);
+            min-block-size: 24rem;
+        }
+
+        & cap-blockskeletoncolumn {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            gap: var(--viz-space, 0.7rem);
+        }
+
+        & cap-blockskeletoncolumn:nth-child(2) {
+            flex: 2;
+        }
+
+        & cap-blockskeletoncolumn > cap-placeholder {
+            flex: 1;
+            block-size: auto;
+        }
+
+        & cap-blockskeletoncolumn:nth-child(odd) > cap-placeholder:first-child {
+            flex: 2;
+        }
+
         & cap-blocks,
         & cap-blockgroup {
             display: flex;
@@ -2090,9 +2384,8 @@ c(ee, "liveProps", []), c(ee, "hostName", "block-graph"), c(ee, "dependencies",
             inset-block-start: 0;
             inset-inline-start: 0;
             box-sizing: border-box;
-            display: grid;
-            grid-template-columns: minmax(0, 1fr) auto;
-            grid-template-areas: "label count";
+            display: flex;
+            flex-flow: row nowrap;
             align-items: center;
             gap: 0 0.35rem;
             width: 100%;
@@ -2116,9 +2409,9 @@ c(ee, "liveProps", []), c(ee, "hostName", "block-graph"), c(ee, "dependencies",
         }
 
         & cap-blocklabel > cap-blockname {
-            grid-area: label;
-            display: grid;
-            grid-template-columns: auto minmax(0, 1fr);
+            display: flex;
+            flex: 1 1 auto;
+            flex-flow: row nowrap;
             align-items: baseline;
             gap: 0.2rem;
             min-width: 0;
@@ -2127,6 +2420,7 @@ c(ee, "liveProps", []), c(ee, "hostName", "block-graph"), c(ee, "dependencies",
         }
 
         & cap-blockname > small {
+            flex: 0 1 auto;
             overflow: hidden;
             font-size: 0.68rem;
             opacity: 0.82;
@@ -2135,6 +2429,7 @@ c(ee, "liveProps", []), c(ee, "hostName", "block-graph"), c(ee, "dependencies",
         }
 
         & cap-blockname > strong {
+            flex: 1 1 auto;
             min-width: 0;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -2142,7 +2437,7 @@ c(ee, "liveProps", []), c(ee, "hostName", "block-graph"), c(ee, "dependencies",
         }
 
         & cap-blocklabel > data {
-            grid-area: count;
+            flex: 0 0 auto;
             align-self: center;
             font-weight: 750;
         }
@@ -2173,16 +2468,16 @@ c(ee, "liveProps", []), c(ee, "hostName", "block-graph"), c(ee, "dependencies",
             }
         }
     `);
-function vt(t) {
-  return t.flatMap((e) => [e, ...vt(e.children)]);
+function Dt(t) {
+  return t.flatMap((e) => [e, ...Dt(e.children)]);
 }
-function Lr(t, e) {
+function Xr(t, e) {
   return e != null && t.length === e.length && t.every((r, i) => {
     var n, s;
     return r.criterionKey === ((n = e[i]) == null ? void 0 : n.criterionKey) && r.categoryKey === ((s = e[i]) == null ? void 0 : s.categoryKey);
   });
 }
-class de extends At {
+class we extends Wt {
   constructor(r) {
     super(r);
     c(this, "contentId");
@@ -2194,10 +2489,10 @@ class de extends At {
       throw new Error(
         "CollapsibleOptionGroup trailing header content must use a direct OptionGroupHeaderEnd child"
       );
-    const { content: r, regions: i } = Ot(
+    const { content: r, regions: i } = Yt(
       "CollapsibleOptionGroup",
       this.props.children,
-      { headerEnd: jt }
+      { headerEnd: Gt }
     );
     return this.renderOptionGroup(r, i.headerEnd ?? null);
   }
@@ -2211,10 +2506,10 @@ class de extends At {
       disabled: a = !1,
       required: l = !1,
       busy: u = !1,
-      error: h = null
+      error: d = null
     } = this.props;
-    return /* @__PURE__ */ m(n, { className: this.props.className ?? this.props.class ?? null, children: [
-      /* @__PURE__ */ m(
+    return /* @__PURE__ */ g(n, { className: this.props.className ?? this.props.class ?? null, children: [
+      /* @__PURE__ */ g(
         "fieldset",
         {
           id: this.groupId,
@@ -2222,11 +2517,11 @@ class de extends At {
           "aria-label": s == null ? o : null,
           "aria-required": l ? "true" : null,
           "aria-busy": u ? "true" : null,
-          "aria-invalid": h == null ? null : "true",
-          "aria-describedby": h == null ? null : this.errorId,
+          "aria-invalid": d == null ? null : "true",
+          "aria-describedby": d == null ? null : this.errorId,
           children: [
-            /* @__PURE__ */ m("legend", { children: [
-              /* @__PURE__ */ d(
+            /* @__PURE__ */ g("legend", { children: [
+              /* @__PURE__ */ p(
                 "button",
                 {
                   type: "button",
@@ -2237,18 +2532,18 @@ class de extends At {
                   children: this.collapsed ? "▸" : "▾"
                 }
               ),
-              s != null ? /* @__PURE__ */ d("span", { children: s }) : null,
+              s != null ? /* @__PURE__ */ p("span", { children: s }) : null,
               i
             ] }),
-            /* @__PURE__ */ d("div", { id: this.contentId, hidden: this.collapsed, children: r })
+            /* @__PURE__ */ p("div", { id: this.contentId, hidden: this.collapsed, children: r })
           ]
         }
       ),
-      this.renderOptionGroupError(h)
+      this.renderOptionGroupError(d)
     ] });
   }
 }
-c(de, "hostName", "collapsible-option-group"), c(de, "css", G`
+c(we, "hostName", "collapsible-option-group"), c(we, "css", re`
         & > fieldset > legend > button.cap-collapse-toggle {
             display: inline-flex;
             align-items: center;
@@ -2283,11 +2578,11 @@ c(de, "hostName", "collapsible-option-group"), c(de, "css", G`
             display: none;
         }
     `);
-const Dr = [
+const Zr = [
   ["☐", "hidden"],
   ["✓", "visible"]
 ];
-class te extends Lt {
+class ce extends Xt {
   render() {
     const {
       criteria: e,
@@ -2296,38 +2591,38 @@ class te extends Lt {
     } = this.props, n = this.snapshot(this.props.items$), s = Array.isArray(n.value) ? n.value : [];
     return this.renderGroupBox(
       r,
-      /* @__PURE__ */ m("cap-categoryhidecontent", { children: [
-        /* @__PURE__ */ d("p", { children: i }),
-        n.fetchState === k.Error ? /* @__PURE__ */ d("p", { role: "alert", children: "Category counts are unavailable." }) : null,
-        /* @__PURE__ */ d("cap-criteriongroups", { children: e.map((o) => {
+      /* @__PURE__ */ g("cap-categoryhidecontent", { children: [
+        /* @__PURE__ */ p("p", { children: i }),
+        n.fetchState === S.Error ? /* @__PURE__ */ p("p", { role: "alert", children: "Category counts are unavailable." }) : null,
+        /* @__PURE__ */ p("cap-criteriongroups", { children: e.map((o) => {
           const a = this.snapshot(o.categories$), l = Array.isArray(a.value) ? a.value : [];
-          return /* @__PURE__ */ m(
-            de,
+          return /* @__PURE__ */ g(
+            we,
             {
               label: o.label,
               children: [
-                a.fetchState === k.Error ? /* @__PURE__ */ m("p", { role: "alert", children: [
+                a.fetchState === S.Error ? /* @__PURE__ */ g("p", { role: "alert", children: [
                   o.label,
                   " categories are unavailable."
                 ] }) : null,
-                a.fetchState !== k.Ready ? /* @__PURE__ */ m("p", { role: "status", "aria-live": "polite", children: [
+                a.fetchState !== S.Ready ? /* @__PURE__ */ g("p", { role: "status", "aria-live": "polite", children: [
                   "Loading ",
                   o.label,
                   "…"
                 ] }) : null,
-                /* @__PURE__ */ d("cap-categories", { children: l.map((u) => {
-                  const h = Mr(s, u.predicate);
-                  return /* @__PURE__ */ m(
+                /* @__PURE__ */ p("cap-categories", { children: l.map((u) => {
+                  const d = Jr(s, u.predicate);
+                  return /* @__PURE__ */ g(
                     "cap-categoryoption",
                     {
-                      style: { ...Xe(u.colors) },
+                      style: { ...ct(u.colors) },
                       children: [
-                        /* @__PURE__ */ d("cap-categoryswatch", { "aria-hidden": "true" }),
-                        /* @__PURE__ */ d(
-                          ae,
+                        /* @__PURE__ */ p("cap-categoryswatch", { "aria-hidden": "true" }),
+                        /* @__PURE__ */ p(
+                          fe,
                           {
-                            symbols: Dr,
-                            label: `${u.label} (${h})`,
+                            symbols: Zr,
+                            label: `${u.label} (${d})`,
                             valueEmitter: o.visibility(u.key)
                           }
                         )
@@ -2345,7 +2640,7 @@ class te extends Lt {
     );
   }
 }
-c(te, "liveProps", []), c(te, "hostName", "category-hide-panel"), c(te, "dependencies", [ae, de]), c(te, "css", G`
+c(ce, "liveProps", []), c(ce, "hostName", "category-hide-panel"), c(ce, "dependencies", [fe, we]), c(ce, "css", re`
         & {
             flex: 0 0 auto;
             min-width: 0;
@@ -2353,8 +2648,9 @@ c(te, "liveProps", []), c(te, "hostName", "category-hide-panel"), c(te, "depende
         }
 
         & > cap-content > cap-categoryhidecontent {
-            display: grid;
-            align-content: start;
+            display: flex;
+            flex-flow: column nowrap;
+            align-items: stretch;
             gap: var(--viz-space, 0.6rem);
             min-width: 0;
         }
@@ -2366,7 +2662,8 @@ c(te, "liveProps", []), c(te, "hostName", "category-hide-panel"), c(te, "depende
         }
 
         & > cap-content > cap-categoryhidecontent > cap-criteriongroups {
-            display: grid;
+            display: flex;
+            flex-flow: column nowrap;
             gap: 1em;
             min-width: 0;
         }
@@ -2391,7 +2688,7 @@ c(te, "liveProps", []), c(te, "hostName", "category-hide-panel"), c(te, "depende
             align-items: center;
             gap: 0.45rem;
             min-width: 0;
-            max-height: 1em;
+
         }
 
         & cap-categoryswatch {
@@ -2420,80 +2717,80 @@ c(te, "liveProps", []), c(te, "hostName", "category-hide-panel"), c(te, "depende
             white-space: nowrap;
         }
     `);
-function Mr(t, e) {
+function Jr(t, e) {
   let r = 0;
   for (const i of t)
     e(i) && (r += 1);
   return r;
 }
-const kt = 864e5, Pr = /^(\d{4})-(\d{2})-(\d{2})$/;
-function S(t) {
-  const e = Pr.exec(t);
+const Pt = 864e5, Qr = /^(\d{4})-(\d{2})-(\d{2})$/;
+function $(t) {
+  const e = Qr.exec(t);
   if (e == null) throw new TypeError(`Invalid civil date "${t}"; expected YYYY-MM-DD`);
   const r = Number(e[1]), i = Number(e[2]), n = Number(e[3]), s = Date.UTC(r, i - 1, n), o = new Date(s);
   if (o.getUTCFullYear() !== r || o.getUTCMonth() !== i - 1 || o.getUTCDate() !== n)
     throw new TypeError(`Invalid civil date "${t}"`);
-  return Math.floor(s / kt);
+  return Math.floor(s / Pt);
 }
-function K(t) {
+function U(t) {
   if (!Number.isInteger(t)) throw new TypeError("Civil day must be an integer");
-  return new Date(t * kt).toISOString().slice(0, 10);
+  return new Date(t * Pt).toISOString().slice(0, 10);
 }
-function Nr(t, e) {
+function ei(t, e) {
   if (!Number.isInteger(e)) throw new TypeError("Civil date offset must be an integer");
-  return K(S(t) + e);
+  return U($(t) + e);
 }
-function Kr(t = /* @__PURE__ */ new Date()) {
+function ti(t = /* @__PURE__ */ new Date()) {
   if (!(t instanceof Date) || Number.isNaN(t.getTime()))
     throw new TypeError("todayCivilDate requires a valid Date");
   return `${String(t.getUTCFullYear()).padStart(4, "0")}-${String(
     t.getUTCMonth() + 1
   ).padStart(2, "0")}-${String(t.getUTCDate()).padStart(2, "0")}`;
 }
-function Ir(t, e) {
-  return S(t) - S(e);
+function ri(t, e) {
+  return $(t) - $(e);
 }
-function Br(t, e = {}) {
-  var Me, Pe, Ne, Ke;
-  Vr(t);
-  const r = Ye(e.width ?? 960, "Chart width"), i = Ye(e.height ?? 420, "Chart height"), n = Math.min(72, r * 0.18), s = 24, o = Math.max(1, r - n - 24), a = Math.max(1, i - s - 58), l = t.flatMap((w) => Object.keys(w.values)), u = e.today ?? Kr(), h = ((Me = e.range) == null ? void 0 : Me.minX) ?? Yr(l) ?? u, p = ((Pe = e.range) == null ? void 0 : Pe.maxX) ?? u, b = S(h), y = S(p);
-  if (b > y) throw new RangeError("Line graph minX must not be after maxX");
-  const g = Ur(t, b, y), f = e.stacked ?? !1, E = t.map((w) => ({
+function ii(t, e = {}) {
+  var He, Ve, We, Ye;
+  ci(t);
+  const r = ot(e.width ?? 960, "Chart width"), i = ot(e.height ?? 420, "Chart height"), n = Math.min(72, r * 0.18), s = 24, o = Math.max(1, r - n - 24), a = Math.max(1, i - s - 58), l = t.flatMap((w) => Object.keys(w.values)), u = e.today ?? ti(), d = ((He = e.range) == null ? void 0 : He.minX) ?? ui(l) ?? u, h = ((Ve = e.range) == null ? void 0 : Ve.maxX) ?? u, k = $(d), b = $(h);
+  if (k > b) throw new RangeError("Line graph minX must not be after maxX");
+  const y = ai(t, k, b), f = e.stacked ?? !1, z = t.map((w) => ({
     shape: w,
-    values: g.map((F) => Et(w, F))
+    values: y.map((V) => Kt(w, V))
   }));
-  let B = ((Ne = e.range) == null ? void 0 : Ne.minY) ?? 0, X = B;
-  const Le = Array.from({ length: g.length }, () => 0), $t = E.map(({ shape: w, values: F }) => {
-    const q = F.map((Z, L) => {
-      const J = f ? Le[L] : 0, Q = J + Z;
-      return f && (Le[L] = Q), B = Math.min(B, J, Q), X = Math.max(X, J, Q), { value: Z, baseValue: J, displayValue: Q };
+  let R = ((We = e.range) == null ? void 0 : We.minY) ?? 0, ne = R;
+  const qe = Array.from({ length: y.length }, () => 0), It = z.map(({ shape: w, values: V }) => {
+    const W = V.map((se, K) => {
+      const oe = f ? qe[K] : 0, ae = oe + se;
+      return f && (qe[K] = ae), R = Math.min(R, oe, ae), ne = Math.max(ne, oe, ae), { value: se, baseValue: oe, displayValue: ae };
     });
-    return { shape: w, entries: q };
-  }), Ct = Math.max(1, X - B), j = X + Ct * 0.05, me = ((Ke = e.range) == null ? void 0 : Ke.minY) ?? B, ye = Math.max(1, j - me), De = Math.max(1, y - b), xt = $t.map(({ shape: w, entries: F }) => ({
+    return { shape: w, entries: W };
+  }), _t = Math.max(1, ne - R), N = ne + _t * 0.05, Ee = ((Ye = e.range) == null ? void 0 : Ye.minY) ?? R, $e = Math.max(1, N - Ee), Ue = Math.max(1, b - k), Bt = It.map(({ shape: w, entries: V }) => ({
     key: w.key,
     label: w.label,
     color: w.color,
     ...w.colorKey === void 0 ? {} : { colorKey: w.colorKey },
     shape: w,
-    points: Object.freeze(F.map((q, Z) => {
-      const L = g[Z];
+    points: Object.freeze(V.map((W, se) => {
+      const K = y[se];
       return Object.freeze({
-        date: K(L),
-        day: L,
-        ...q,
-        x: n + (L - b) / De * o,
-        y: s + (j - q.displayValue) / ye * a,
-        baseY: s + (j - q.baseValue) / ye * a
+        date: U(K),
+        day: K,
+        ...W,
+        x: n + (K - k) / Ue * o,
+        y: s + (N - W.displayValue) / $e * a,
+        baseY: s + (N - W.baseValue) / $e * a
       });
     }))
   }));
   return Object.freeze({
-    minDate: h,
-    maxDate: p,
-    minDay: b,
-    maxDay: y,
-    minY: me,
-    maxY: j,
+    minDate: d,
+    maxDate: h,
+    minDay: k,
+    maxDay: b,
+    minY: Ee,
+    maxY: N,
     width: r,
     height: i,
     plotLeft: n,
@@ -2501,22 +2798,22 @@ function Br(t, e = {}) {
     plotWidth: o,
     plotHeight: a,
     stacked: f,
-    series: Object.freeze(xt),
-    dateMarks: Object.freeze(Hr(b, y, e.maxDateMarks ?? 8).map((w) => ({
-      date: K(w),
+    series: Object.freeze(Bt),
+    dateMarks: Object.freeze(li(k, b, e.maxDateMarks ?? 8).map((w) => ({
+      date: U(w),
       day: w,
-      x: n + (w - b) / De * o
+      x: n + (w - k) / Ue * o
     }))),
-    valueTicks: Object.freeze(_r(me, j).map((w) => ({
+    valueTicks: Object.freeze(oi(Ee, N).map((w) => ({
       value: w,
-      y: s + (j - w) / ye * a
+      y: s + (N - w) / $e * a
     })))
   });
 }
-function Fr(t, e) {
-  return Et(t, S(e));
+function ni(t, e) {
+  return Kt(t, $(e));
 }
-function St(t, e) {
+function Nt(t, e) {
   const r = t[0];
   if (r == null) return "";
   let i = `M ${v(r.x)} ${v(r.y)}`;
@@ -2530,9 +2827,9 @@ function St(t, e) {
   }
   return i;
 }
-function qr(t, e) {
+function si(t, e) {
   if (t.length === 0) return "";
-  const r = St(t, e), i = [...t].reverse();
+  const r = Nt(t, e), i = [...t].reverse();
   let n = "";
   for (let s = 0; s < i.length; s += 1) {
     const o = i[s];
@@ -2545,43 +2842,43 @@ function qr(t, e) {
   }
   return `${r}${n} Z`;
 }
-function _r(t, e, r = 6) {
+function oi(t, e, r = 6) {
   if (!Number.isFinite(t) || !Number.isFinite(e) || t > e)
     throw new RangeError("Tick range must contain finite ascending values");
   if (!Number.isInteger(r) || r < 2) throw new RangeError("Tick target must be at least two");
-  const n = Math.max(1, e - t) / (r - 1), s = 10 ** Math.floor(Math.log10(n)), o = n / s, a = o <= 1 ? 1 : o <= 2 ? 2 : o <= 5 ? 5 : 10, l = Math.max(1, a * s), u = Math.ceil(t / l) * l, h = [];
-  for (let p = u; p <= e + l / 1e3; p += l)
-    h.push(Number(p.toFixed(10)));
-  return h.length === 0 && h.push(Math.ceil(t)), h;
+  const n = Math.max(1, e - t) / (r - 1), s = 10 ** Math.floor(Math.log10(n)), o = n / s, a = o <= 1 ? 1 : o <= 2 ? 2 : o <= 5 ? 5 : 10, l = Math.max(1, a * s), u = Math.ceil(t / l) * l, d = [];
+  for (let h = u; h <= e + l / 1e3; h += l)
+    d.push(Number(h.toFixed(10)));
+  return d.length === 0 && d.push(Math.ceil(t)), d;
 }
-function Ur(t, e, r) {
+function ai(t, e, r) {
   const i = /* @__PURE__ */ new Set([e, r]);
   for (const n of t)
     for (const s of Object.keys(n.values)) {
-      const o = S(s);
+      const o = $(s);
       o >= e && o <= r && i.add(o);
     }
   return [...i].sort((n, s) => n - s);
 }
-function Et(t, e) {
-  const r = t.values[K(e)];
+function Kt(t, e) {
+  const r = t.values[U(e)];
   if (r !== void 0) return r;
   if (t.carryForward !== !0) return 0;
   let i = Number.NEGATIVE_INFINITY, n = 0;
   for (const [s, o] of Object.entries(t.values)) {
-    const a = S(s);
+    const a = $(s);
     a <= e && a > i && (i = a, n = o);
   }
   return n;
 }
-function Hr(t, e, r) {
+function li(t, e, r) {
   if (!Number.isInteger(r) || r < 2)
     throw new RangeError("Maximum date marks must be at least two");
   const i = Math.max(0, e - t), n = i <= 62 ? 7 : i <= 730 ? 30 : 365, s = Math.max(n, Math.ceil(Math.max(1, i) / (r - 1))), o = [t];
   for (let a = t + s; a < e; a += s) o.push(a);
   return e !== t && o.push(e), o;
 }
-function Vr(t) {
+function ci(t) {
   if (!Array.isArray(t)) throw new TypeError("History shapes must be an array");
   const e = /* @__PURE__ */ new Set();
   for (const r of t) {
@@ -2593,23 +2890,23 @@ function Vr(t) {
     if (typeof r.color != "string" || r.color.trim() === "")
       throw new TypeError("History shape color must be a non-empty CSS value");
     for (const [i, n] of Object.entries(r.values))
-      if (S(i), !Number.isFinite(n)) throw new TypeError("History shape values must be finite");
+      if ($(i), !Number.isFinite(n)) throw new TypeError("History shape values must be finite");
   }
 }
-function Yr(t) {
-  return t.length === 0 ? void 0 : t.reduce((e, r) => S(e) <= S(r) ? e : r);
+function ui(t) {
+  return t.length === 0 ? void 0 : t.reduce((e, r) => $(e) <= $(r) ? e : r);
 }
-function Ye(t, e) {
+function ot(t, e) {
   if (!Number.isFinite(t) || t <= 0) throw new RangeError(`${e} must be positive`);
   return t;
 }
 function v(t) {
   return Number(t.toFixed(3)).toString();
 }
-class Se extends Te {
+class je extends Ne {
   constructor(r) {
     super(r);
-    c(this, "cursorDate$", new A(null, {
+    c(this, "cursorDate$", new D(null, {
       owner: this,
       purpose: "line graph cursor date"
     }));
@@ -2625,11 +2922,11 @@ class Se extends Te {
     this.shapes$ = this.source(r.shapes$, "line graph shapes"), this.stacked$ = this.source(r.stacked$, "line graph stacked state"), this.smooth$ = this.source(r.smooth$, "line graph smooth state"), this.range$ = this.source(r.range$, "line graph range");
   }
   render() {
-    const r = this.snapshot(this.shapes$), i = this.snapshot(this.stacked$), n = this.snapshot(this.smooth$), s = this.snapshot(this.range$), o = this.read(this.cursorDate$), a = this.props.label ?? "History chart", l = [r, i, n, s].some(({ fetchState: f }) => f === k.Error) ? k.Error : [r, i, n, s].some(({ fetchState: f }) => f !== k.Ready) ? k.Loading : k.Ready;
+    const r = this.snapshot(this.shapes$), i = this.snapshot(this.stacked$), n = this.snapshot(this.smooth$), s = this.snapshot(this.range$), o = this.read(this.cursorDate$), a = this.props.label ?? "History chart", l = [r, i, n, s].some(({ fetchState: f }) => f === S.Error) ? S.Error : [r, i, n, s].some(({ fetchState: f }) => f !== S.Ready) ? S.Loading : S.Ready;
     let u = null;
-    if (this.currentModel = null, l === k.Ready)
+    if (this.currentModel = null, l === S.Ready)
       try {
-        this.currentModel = Br(r.value, {
+        this.currentModel = ii(r.value, {
           stacked: i.value,
           range: s.value,
           width: Math.max(480, this.observedWidth),
@@ -2638,17 +2935,17 @@ class Se extends Te {
       } catch (f) {
         u = f;
       }
-    const h = this.currentModel, p = h == null ? null : o ?? h.maxDate, b = this.props.formatDate ?? ((f) => f), y = this.props.formatValue ?? ((f) => String(f)), g = this.Host;
-    return /* @__PURE__ */ m(
-      g,
+    const d = this.currentModel, h = d == null ? null : o ?? d.maxDate, k = this.props.formatDate ?? ((f) => f), b = this.props.formatValue ?? ((f) => String(f)), y = this.Host;
+    return /* @__PURE__ */ g(
+      y,
       {
         className: (this.props.className ?? this.props.class ?? "") || null,
         "aria-label": a,
-        "aria-busy": l !== k.Ready ? "true" : null,
+        "aria-busy": l !== S.Ready ? "true" : null,
         children: [
-          /* @__PURE__ */ m("header", { children: [
-            /* @__PURE__ */ d("h2", { children: a }),
-            /* @__PURE__ */ m("p", { children: [
+          /* @__PURE__ */ g("header", { children: [
+            /* @__PURE__ */ p("h2", { children: a }),
+            /* @__PURE__ */ g("p", { children: [
               i.value ? "Stacked area" : "Individual line",
               " chart;",
               " ",
@@ -2656,7 +2953,7 @@ class Se extends Te {
               " rendering."
             ] })
           ] }),
-          l === k.Error || u != null ? /* @__PURE__ */ d("p", { role: "alert", children: "The history chart could not be calculated." }) : l !== k.Ready ? /* @__PURE__ */ d("p", { role: "status", "aria-live": "polite", children: "Loading history chart…" }) : r.value.length === 0 ? /* @__PURE__ */ d("p", { role: "status", children: this.props.emptyMessage ?? "No history values are available." }) : /* @__PURE__ */ d(
+          l === S.Error || u != null ? /* @__PURE__ */ p("p", { role: "alert", children: "The history chart could not be calculated." }) : l !== S.Ready ? /* @__PURE__ */ p("p", { role: "status", "aria-live": "polite", children: "Loading history chart…" }) : r.value.length === 0 ? /* @__PURE__ */ p("p", { role: "status", children: this.props.emptyMessage ?? "No history values are available." }) : /* @__PURE__ */ p(
             "cap-chart",
             {
               tabIndex: 0,
@@ -2667,18 +2964,18 @@ class Se extends Te {
               ref: (f) => this.chartHost = f
             }
           ),
-          h == null || p == null ? null : /* @__PURE__ */ m("cap-readout", { children: [
-            /* @__PURE__ */ d("p", { "aria-live": "polite", children: /* @__PURE__ */ d("strong", { children: b(p) }) }),
-            /* @__PURE__ */ d("ul", { children: h.series.map(({ shape: f }) => /* @__PURE__ */ m("li", { children: [
-              /* @__PURE__ */ d(
+          d == null || h == null ? null : /* @__PURE__ */ g("cap-readout", { children: [
+            /* @__PURE__ */ p("p", { "aria-live": "polite", children: /* @__PURE__ */ p("strong", { children: k(h) }) }),
+            /* @__PURE__ */ p("ul", { children: d.series.map(({ shape: f }) => /* @__PURE__ */ g("li", { children: [
+              /* @__PURE__ */ p(
                 "cap-swatch",
                 {
                   style: { "--colored-base": f.color },
                   "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ d("span", { children: f.label }),
-              /* @__PURE__ */ d("strong", { children: y(Fr(f, p)) })
+              /* @__PURE__ */ p("span", { children: f.label }),
+              /* @__PURE__ */ p("strong", { children: b(ni(f, h)) })
             ] }, f.key)) })
           ] })
         ]
@@ -2705,8 +3002,8 @@ class Se extends Te {
     }), this.resizeObserver.observe(this.chartHost));
   }
   source(r, i) {
-    if (Gr(r)) return r;
-    const n = new A(r, { owner: this, purpose: i });
+    if (di(r)) return r;
+    const n = new D(r, { owner: this, purpose: i });
     return this.ownedSources.push(n), n;
   }
   pointerMove(r) {
@@ -2715,12 +3012,12 @@ class Se extends Te {
     const s = n.getBoundingClientRect();
     if (s.width <= 0) return;
     const o = (r.clientX - s.left) / s.width * i.width, a = Math.max(0, Math.min(1, (o - i.plotLeft) / i.plotWidth)), l = Math.round(i.minDay + a * (i.maxDay - i.minDay));
-    this.cursorDate$.set(K(l), "line graph pointer moved");
+    this.cursorDate$.set(U(l), "line graph pointer moved");
   }
   cursorKeyDown(r) {
     const i = this.currentModel;
     if (i == null) return;
-    let n = S(this.cursorDate$.get() ?? i.maxDate);
+    let n = $(this.cursorDate$.get() ?? i.maxDate);
     if (r.key === "ArrowLeft") n -= r.shiftKey ? 7 : 1;
     else if (r.key === "ArrowRight") n += r.shiftKey ? 7 : 1;
     else if (r.key === "Home") n = i.minDay;
@@ -2730,35 +3027,35 @@ class Se extends Te {
       return;
     } else return;
     r.preventDefault();
-    const s = K(Math.max(i.minDay, Math.min(i.maxDay, n)));
+    const s = U(Math.max(i.minDay, Math.min(i.maxDay, n)));
     this.cursorDate$.set(s, "line graph cursor moved by keyboard");
   }
   drawChart() {
     const r = this.chartHost, i = this.currentModel;
     if (r == null || i == null) return;
-    const n = this.smooth$.get(), s = x("svg");
+    const n = this.smooth$.get(), s = A("svg");
     s.setAttribute("viewBox", `0 0 ${i.width} ${i.height}`), s.setAttribute("role", "img"), s.setAttribute("aria-label", this.props.label ?? "History chart");
     for (const a of i.valueTicks) {
-      const l = x("line");
-      l.classList.add("gridline"), _(l, {
+      const l = A("line");
+      l.classList.add("gridline"), G(l, {
         x1: i.plotLeft,
         x2: i.plotLeft + i.plotWidth,
         y1: a.y,
         y2: a.y
       }), s.append(l);
-      const u = x("text");
-      u.classList.add("axismark"), _(u, { x: i.plotLeft - 8, y: a.y + 4, "text-anchor": "end" }), u.textContent = String(a.value), s.append(u);
+      const u = A("text");
+      u.classList.add("axismark"), G(u, { x: i.plotLeft - 8, y: a.y + 4, "text-anchor": "end" }), u.textContent = String(a.value), s.append(u);
     }
     for (const a of i.dateMarks) {
-      const l = x("line");
-      l.classList.add("gridline"), _(l, {
+      const l = A("line");
+      l.classList.add("gridline"), G(l, {
         x1: a.x,
         x2: a.x,
         y1: i.plotTop,
         y2: i.plotTop + i.plotHeight
       }), s.append(l);
-      const u = x("text");
-      u.classList.add("axismark"), _(u, {
+      const u = A("text");
+      u.classList.add("axismark"), G(u, {
         x: a.x,
         y: i.plotTop + i.plotHeight + 22,
         "text-anchor": "middle"
@@ -2766,16 +3063,16 @@ class Se extends Te {
     }
     for (const a of i.series) {
       if (i.stacked) {
-        const u = x("path");
-        u.classList.add("seriesarea"), u.setAttribute("fill", a.color), u.setAttribute("d", qr(a.points, n)), s.append(u);
+        const u = A("path");
+        u.classList.add("seriesarea"), u.setAttribute("fill", a.color), u.setAttribute("d", si(a.points, n)), s.append(u);
       }
-      const l = x("path");
-      l.classList.add("seriesline"), l.setAttribute("stroke", a.color), l.setAttribute("d", St(a.points, n)), s.append(l);
+      const l = A("path");
+      l.classList.add("seriesline"), l.setAttribute("stroke", a.color), l.setAttribute("d", Nt(a.points, n)), s.append(l);
     }
     const o = this.cursorDate$.get();
     if (o != null) {
-      const a = S(o), l = i.plotLeft + (a - i.minDay) / Math.max(1, i.maxDay - i.minDay) * i.plotWidth, u = x("line");
-      u.classList.add("cursor"), _(u, {
+      const a = $(o), l = i.plotLeft + (a - i.minDay) / Math.max(1, i.maxDay - i.minDay) * i.plotWidth, u = A("line");
+      u.classList.add("cursor"), G(u, {
         x1: l,
         x2: l,
         y1: i.plotTop,
@@ -2785,7 +3082,7 @@ class Se extends Te {
     r.replaceChildren(s);
   }
 }
-c(Se, "liveProps", []), c(Se, "hostName", "line-graph"), c(Se, "css", G`
+c(je, "liveProps", []), c(je, "hostName", "line-graph"), c(je, "css", re`
         & {
             display: flex;
             min-width: 0;
@@ -2886,18 +3183,18 @@ c(Se, "liveProps", []), c(Se, "hostName", "line-graph"), c(Se, "css", G`
             }
         }
     `);
-function Gr(t) {
+function di(t) {
   return t != null && (typeof t == "object" || typeof t == "function") && typeof Reflect.get(t, "get") == "function" && typeof Reflect.get(t, "subscribe") == "function";
 }
-const Wr = "http://www.w3.org/2000/svg";
-function x(t) {
-  return document.createElementNS(Wr, t);
+const pi = "http://www.w3.org/2000/svg";
+function A(t) {
+  return document.createElementNS(pi, t);
 }
-function _(t, e) {
+function G(t, e) {
   for (const [r, i] of Object.entries(e))
     t.setAttribute(r, String(i));
 }
-class Xr {
+class hi {
   constructor(e, r = {}) {
     c(this, "criteria");
     c(this, "presets");
@@ -2910,29 +3207,29 @@ class Xr {
     c(this, "activeSplitsEmitter");
     c(this, "activeEmitters", /* @__PURE__ */ new Map());
     c(this, "disposed", !1);
-    if (!Array.isArray(e) || e.some((o) => !(o instanceof I)))
+    if (!Array.isArray(e) || e.some((o) => !(o instanceof H)))
       throw new TypeError("Split criteria must contain GroupingCriterion instances");
     const i = new Map(
       e.map((o) => [o.key, o])
     );
     if (i.size !== e.length) throw new Error("Split criteria keys must be unique");
-    this.criteria = Object.freeze([...e]), this.byKey = i, this.presets = Jr(r.presets ?? [], i);
+    this.criteria = Object.freeze([...e]), this.byKey = i, this.presets = mi(r.presets ?? [], i);
     const n = this.criteria.map(({ key: o }) => o), s = r.active ?? n;
-    V(s, i, "Active split keys"), this.state$ = new A(re(n, new Set(s)), {
+    Q(s, i, "Active split keys"), this.state$ = new D(ue(n, new Set(s)), {
       owner: this,
       purpose: "split selection state",
-      equals: Qr
-    }), this.orderEmitter = new z(
+      equals: yi
+    }), this.orderEmitter = new j(
       [this.state$],
       ([o]) => Object.freeze(
-        o.order.map((a) => Ge(i, a))
+        o.order.map((a) => at(i, a))
       ),
       { owner: this, purpose: "ordered visualization criteria" }
-    ), this.order$ = this.orderEmitter, this.activeSplitsEmitter = new z(
+    ), this.order$ = this.orderEmitter, this.activeSplitsEmitter = new j(
       [this.state$],
-      ([o]) => Object.freeze(o.order.filter((a) => o.active.has(a)).map((a) => Ge(i, a))),
+      ([o]) => Object.freeze(o.order.filter((a) => o.active.has(a)).map((a) => at(i, a))),
       { owner: this, purpose: "active ordered visualization splits" }
-    ), this.activeSplits$ = this.activeSplitsEmitter, this.activePreset$ = new A(null, {
+    ), this.activeSplits$ = this.activeSplitsEmitter, this.activePreset$ = new D(null, {
       owner: this,
       purpose: "active visualization split preset"
     });
@@ -2941,7 +3238,7 @@ class Xr {
     this.assertActive();
     const r = this.requireKey(e);
     let i = this.activeEmitters.get(r);
-    return i == null && (i = new Zr(this, r), this.activeEmitters.set(r, i)), i;
+    return i == null && (i = new fi(this, r), this.activeEmitters.set(r, i)), i;
   }
   isActive(e) {
     return this.state$.get().active.has(this.requireKey(e));
@@ -2950,7 +3247,7 @@ class Xr {
     this.assertActive();
     const i = this.requireKey(e), n = this.state$.get(), s = new Set(n.active);
     return s.has(i) ? s.delete(i) : s.add(i), this.activePreset$.set(null, "split selection customized"), this.state$.set(
-      re(n.order, s),
+      ue(n.order, s),
       r ?? `${i} split toggled`
     );
   }
@@ -2962,7 +3259,7 @@ class Xr {
     if (o === a) return !1;
     const l = [...s.order];
     return l.splice(o, 1), l.splice(a, 0, n), this.activePreset$.set(null, "split order customized"), this.state$.set(
-      re(l, s.active),
+      ue(l, s.active),
       i ?? `${n} split moved`
     );
   }
@@ -2976,14 +3273,14 @@ class Xr {
     );
   }
   setSplits(e, r, i) {
-    this.assertActive(), V(e, this.byKey, "Active split keys");
+    this.assertActive(), Q(e, this.byKey, "Active split keys");
     const n = new Set(e), s = r ?? this.state$.get().order.filter((a) => !n.has(a));
-    V(s, this.byKey, "Inactive split keys");
+    Q(s, this.byKey, "Inactive split keys");
     const o = [...e, ...s];
     if (new Set(o).size !== this.criteria.length || o.length !== this.criteria.length)
       throw new Error("Active and inactive split keys must cover every criterion exactly once");
     return this.activePreset$.set(null, "split selection replaced"), this.state$.set(
-      re(o, n),
+      ue(o, n),
       i ?? "split selection replaced"
     );
   }
@@ -3010,10 +3307,10 @@ class Xr {
     if (this.disposed) throw new Error("Split selection model is disposed");
   }
 }
-function ui(t, e = {}) {
-  return new Xr(t, e);
+function Ti(t, e = {}) {
+  return new hi(t, e);
 }
-class Zr extends xe {
+class fi extends Pe {
   constructor(r, i) {
     super(r.isActive(i) ? "visible" : "hidden", {
       owner: r,
@@ -3045,7 +3342,7 @@ class Zr extends xe {
     });
   }
 }
-function Jr(t, e) {
+function mi(t, e) {
   if (!Array.isArray(t)) throw new TypeError("Split presets must be an array");
   const r = /* @__PURE__ */ new Set();
   return Object.freeze(t.map((i) => {
@@ -3055,35 +3352,35 @@ function Jr(t, e) {
       throw new Error("Split preset keys must be non-empty and unique");
     if (typeof i.label != "string" || i.label.trim() === "")
       throw new TypeError("Split preset label must be a non-empty string");
-    r.add(i.key), V(i.active, e, `${i.key} active keys`);
+    r.add(i.key), Q(i.active, e, `${i.key} active keys`);
     const n = Object.freeze([...i.active]), s = i.inactive == null ? Object.freeze([...e.keys()].filter((o) => !n.includes(o))) : Object.freeze([...i.inactive]);
-    if (V(s, e, `${i.key} inactive keys`), (/* @__PURE__ */ new Set([...n, ...s])).size !== e.size || n.length + s.length !== e.size)
+    if (Q(s, e, `${i.key} inactive keys`), (/* @__PURE__ */ new Set([...n, ...s])).size !== e.size || n.length + s.length !== e.size)
       throw new Error(`Split preset "${i.key}" must cover every criterion exactly once`);
     return Object.freeze({ ...i, active: n, inactive: s });
   }));
 }
-function V(t, e, r) {
+function Q(t, e, r) {
   if (!Array.isArray(t)) throw new TypeError(`${r} must be an array`);
   if (new Set(t).size !== t.length) throw new Error(`${r} must be unique`);
   for (const n of t)
     if (!e.has(n)) throw new Error(`${r} contains unknown criterion "${n}"`);
 }
-function Ge(t, e) {
+function at(t, e) {
   const r = t.get(e);
   if (r == null) throw new Error(`Missing criterion "${e}"`);
   return r;
 }
-function re(t, e) {
+function ue(t, e) {
   return Object.freeze({ order: Object.freeze([...t]), active: new Set(e) });
 }
-function Qr(t, e) {
+function yi(t, e) {
   return t.order.length === e.order.length && t.order.every((r, i) => r === e.order[i]) && t.active.size === e.active.size && [...t.active].every((r) => e.active.has(r));
 }
-const ei = [
+const gi = [
   ["☐", "hidden"],
   ["✓", "visible"]
 ];
-class ie extends Te {
+class de extends Ne {
   constructor() {
     super(...arguments);
     c(this, "draggingKey", null);
@@ -3104,9 +3401,9 @@ class ie extends Te {
     } = this.props, o = this.read(r.order$);
     this.read(r.activeSplits$);
     const a = this.read(r.activePreset$), l = this.Host;
-    return /* @__PURE__ */ m(l, { children: [
-      r.presets.length === 0 ? null : /* @__PURE__ */ d(ge, { header: s, children: /* @__PURE__ */ d("cap-presets", { children: r.presets.map((u) => /* @__PURE__ */ d(
-        oe,
+    return /* @__PURE__ */ g(l, { children: [
+      r.presets.length === 0 ? null : /* @__PURE__ */ p(Ce, { header: s, children: /* @__PURE__ */ p("cap-presets", { children: r.presets.map((u) => /* @__PURE__ */ p(
+        he,
         {
           label: u.label,
           pressed: a === u.key,
@@ -3116,39 +3413,39 @@ class ie extends Te {
         },
         u.key
       )) }) }),
-      /* @__PURE__ */ m(ge, { header: i, children: [
-        /* @__PURE__ */ d("p", { children: n }),
-        /* @__PURE__ */ d("ol", { children: o.map((u) => /* @__PURE__ */ m(
+      /* @__PURE__ */ g(Ce, { header: i, children: [
+        /* @__PURE__ */ p("p", { children: n }),
+        /* @__PURE__ */ p("ol", { children: o.map((u) => /* @__PURE__ */ g(
           "li",
           {
             className: this.draggingKey === u.key ? "dragging" : void 0,
             "data-split-key": u.key,
-            onPointerDown: (h) => this.startDragging(u.key, h),
-            onClick: (h) => this.suppressDraggedClick(h),
+            onPointerDown: (d) => this.startDragging(u.key, d),
+            onClick: (d) => this.suppressDraggedClick(d),
             children: [
-              /* @__PURE__ */ d(
-                ae,
+              /* @__PURE__ */ p(
+                fe,
                 {
-                  symbols: ei,
+                  symbols: gi,
                   label: u.label,
                   valueEmitter: r.activeState(u.key)
                 }
               ),
-              /* @__PURE__ */ d(
+              /* @__PURE__ */ p(
                 "cap-draghandle",
                 {
                   role: "button",
                   tabIndex: 0,
                   "aria-label": `Reorder ${u.label}`,
                   title: "Drag to reorder; use Alt+Arrow keys from the keyboard",
-                  onKeyDown: (h) => {
-                    if (!h.altKey || h.key !== "ArrowUp" && h.key !== "ArrowDown")
+                  onKeyDown: (d) => {
+                    if (!d.altKey || d.key !== "ArrowUp" && d.key !== "ArrowDown")
                       return;
-                    h.preventDefault();
-                    const p = h.key === "ArrowUp" ? -1 : 1;
-                    if (r.moveBy(u.key, p, "split reordered by keyboard")) {
-                      const b = r.order$.get().findIndex(({ key: y }) => y === u.key) + 1;
-                      this.announce(`${u.label} moved to position ${b}`), queueMicrotask(() => this.focusHandle(u.key));
+                    d.preventDefault();
+                    const h = d.key === "ArrowUp" ? -1 : 1;
+                    if (r.moveBy(u.key, h, "split reordered by keyboard")) {
+                      const k = r.order$.get().findIndex(({ key: b }) => b === u.key) + 1;
+                      this.announce(`${u.label} moved to position ${k}`), queueMicrotask(() => this.focusHandle(u.key));
                     }
                   }
                 }
@@ -3157,16 +3454,16 @@ class ie extends Te {
           },
           u.key
         )) }),
-        /* @__PURE__ */ d("p", { role: "status", "aria-live": "polite", "aria-atomic": "true", children: this.announcement })
+        /* @__PURE__ */ p("p", { role: "status", "aria-live": "polite", "aria-atomic": "true", children: this.announcement })
       ] })
     ] });
   }
   pointerMove(r) {
     var a;
     if (this.draggingKey == null && this.pendingDrag != null) {
-      const { clientX: l, clientY: u, key: h } = this.pendingDrag;
+      const { clientX: l, clientY: u, key: d } = this.pendingDrag;
       if (Math.hypot(r.clientX - l, r.clientY - u) < 4) return;
-      this.draggingKey = h, this.pendingDrag = null, this.update();
+      this.draggingKey = d, this.pendingDrag = null, this.update();
     }
     if (this.draggingKey == null || typeof document.elementFromPoint != "function") return;
     const i = (a = document.elementFromPoint(r.clientX, r.clientY)) == null ? void 0 : a.closest("[data-split-key]");
@@ -3208,9 +3505,10 @@ class ie extends Te {
       }
   }
 }
-c(ie, "liveProps", []), c(ie, "hostName", "split-selection-panel"), c(ie, "dependencies", [oe, ae, ge]), c(ie, "css", G`
+c(de, "liveProps", []), c(de, "hostName", "split-selection-panel"), c(de, "dependencies", [he, fe, Ce]), c(de, "css", re`
         & {
-            display: grid;
+            display: flex;
+            flex-flow: column nowrap;
             gap: var(--viz-space, 0.6rem);
             min-width: 0;
             user-select: none;
@@ -3238,10 +3536,10 @@ c(ie, "liveProps", []), c(ie, "hostName", "split-selection-panel"), c(ie, "depen
         }
 
         & > cap-groupbox > cap-content > cap-presets {
-            display: grid;
+            display: flex;
+            flex-flow: column nowrap;
             gap: 0.35rem;
-            align-content: stretch;
-            justify-content: stretch;
+            align-items: stretch;
         }
 
         & > cap-groupbox > cap-content > cap-presets > cap-button {
@@ -3251,8 +3549,9 @@ c(ie, "liveProps", []), c(ie, "hostName", "split-selection-panel"), c(ie, "depen
         }
 
         & ol {
-            display: grid;
-            gap: 0.25rem;
+            display: flex;
+            flex-flow: column nowrap;
+            gap: .33rem;
             padding: 0;
             list-style: none;
         }
@@ -3264,7 +3563,7 @@ c(ie, "liveProps", []), c(ie, "hostName", "split-selection-panel"), c(ie, "depen
             justify-content: space-between;
             gap: 0.35rem;
             min-width: 0;
-            padding: 0 .35rem;
+            padding: .15rem .35rem;
             border-radius: var(--ui-border-radius);
             box-shadow: var(--box-shadow);
         }
@@ -3319,13 +3618,13 @@ c(ie, "liveProps", []), c(ie, "hostName", "split-selection-panel"), c(ie, "depen
             border: 0;
         }
     `);
-class hi {
+class zi {
   constructor(e) {
     c(this, "categories");
     c(this, "byKey");
     c(this, "deltas", /* @__PURE__ */ new Map());
     if (!Array.isArray(e)) throw new TypeError("Series categories must be an array");
-    const r = e.map((n) => ti(n)), i = new Map(r.map((n) => [n.key, n]));
+    const r = e.map((n) => bi(n)), i = new Map(r.map((n) => [n.key, n]));
     if (i.size !== r.length) throw new Error("Series category keys must be unique");
     this.categories = Object.freeze(r), this.byKey = i;
   }
@@ -3336,7 +3635,7 @@ class hi {
     return this.add(e, r, -1);
   }
   add(e, r, i) {
-    if (S(e), !Number.isFinite(i)) throw new TypeError("Series delta must be finite");
+    if ($(e), !Number.isFinite(i)) throw new TypeError("Series delta must be finite");
     if (!this.byKey.has(r))
       throw new Error(`Unknown series category "${r}"`);
     const n = this.deltas.get(r) ?? /* @__PURE__ */ new Map();
@@ -3344,7 +3643,7 @@ class hi {
   }
   build() {
     const e = this.allDates();
-    return this.categories.map((r) => We(r, Object.fromEntries(e.map((i) => {
+    return this.categories.map((r) => lt(r, Object.fromEntries(e.map((i) => {
       var n;
       return [
         i,
@@ -3355,21 +3654,21 @@ class hi {
   buildCumulative() {
     const e = this.allDates();
     if (e.length === 0) return Object.freeze([]);
-    const r = [Nr(e[0], -1), ...e];
+    const r = [ei(e[0], -1), ...e];
     return this.categories.map((i) => {
       var o;
       let n = 0;
       const s = { [r[0]]: 0 };
       for (const a of e)
         n += ((o = this.deltas.get(i.key)) == null ? void 0 : o.get(a)) ?? 0, s[a] = n;
-      return We(i, s, !0);
+      return lt(i, s, !0);
     }).filter((i) => Object.values(i.values).some((n) => n !== 0));
   }
   allDates() {
-    return [...new Set([...this.deltas.values()].flatMap((e) => [...e.keys()]))].sort(Ir);
+    return [...new Set([...this.deltas.values()].flatMap((e) => [...e.keys()]))].sort(ri);
   }
 }
-function ti(t) {
+function bi(t) {
   if (t == null || typeof t != "object")
     throw new TypeError("Series category must be an object");
   if (typeof t.key != "string" || t.key.trim() === "")
@@ -3382,7 +3681,7 @@ function ti(t) {
   const r = t.colorKey === void 0 ? { key: t.key, label: t.label, color: e } : { key: t.key, label: t.label, color: e, colorKey: t.colorKey };
   return Object.freeze(r);
 }
-function We(t, e, r) {
+function lt(t, e, r) {
   return Object.freeze({
     ...t,
     values: Object.freeze(e),
@@ -3390,37 +3689,37 @@ function We(t, e, r) {
   });
 }
 export {
-  ee as BlockGraph,
-  It as BlockSelectionModel,
-  te as CategoryHidePanel,
-  de as CollapsibleOptionGroup,
-  I as GroupingCriterion,
-  Se as LineGraph,
-  hi as SeriesBuilder,
-  Xr as SplitSelectionModel,
-  ie as SplitSelectionPanel,
-  Nr as addCivilDays,
-  qr as areaPath,
-  we as buildBlockLayout,
-  _r as buildIntegerTicks,
-  Br as buildLineChartModel,
-  Xe as categoryColorVariables,
-  li as categoryCounts,
-  S as civilDateToDay,
-  Ir as compareCivilDates,
-  ci as createBlockSelection,
-  ui as createSplitSelection,
-  Kt as criterionSnapshot,
-  K as dayToCivilDate,
-  Dt as deriveCategories,
-  oi as derivedCriterion,
-  ai as filterByHidden,
-  D as findBlock,
-  vt as flattenBlocks,
-  St as linePath,
-  Mt as setsEqual,
-  si as staticCriterion,
-  Kr as todayCivilDate,
-  Fr as valueAtDate
+  Y as BlockGraph,
+  rr as BlockSelectionModel,
+  ce as CategoryHidePanel,
+  we as CollapsibleOptionGroup,
+  H as GroupingCriterion,
+  je as LineGraph,
+  zi as SeriesBuilder,
+  hi as SplitSelectionModel,
+  de as SplitSelectionPanel,
+  ei as addCivilDays,
+  si as areaPath,
+  Re as buildBlockLayout,
+  oi as buildIntegerTicks,
+  ii as buildLineChartModel,
+  ct as categoryColorVariables,
+  xi as categoryCounts,
+  $ as civilDateToDay,
+  ri as compareCivilDates,
+  Ci as createBlockSelection,
+  Ti as createSplitSelection,
+  tr as criterionSnapshot,
+  U as dayToCivilDate,
+  Zt as deriveCategories,
+  Ei as derivedCriterion,
+  $i as filterByHidden,
+  I as findBlock,
+  Dt as flattenBlocks,
+  Nt as linePath,
+  Jt as setsEqual,
+  Si as staticCriterion,
+  ti as todayCivilDate,
+  ni as valueAtDate
 };
 //# sourceMappingURL=index.js.map