npm - @capillaryjs/capillary-viz - Versions diffs - 1.0.0-alpha.1 → 1.0.0 - Mend

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

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

Files changed (8) hide show

package/CHANGELOG.md +15 -0
package/README.md +10 -0
package/dist/components/BlockGraph.d.ts +3 -2
package/dist/components/BlockGraph.d.ts.map +1 -1
package/dist/index.js +622 -599
package/dist/index.js.map +1 -1
package/package.json +5 -5
package/styles/structural.css +274 -43

package/dist/index.js CHANGED Viewed

@@ -1,9 +1,9 @@
 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 Rt = (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) => Rt(t, typeof e != "symbol" ? e + "" : e, r);
+import { Emitter as O, DerivedEmitter as R, BaseEmitter as ze, FetchState as k, combineFetchStates as At } from "@capillaryjs/capillary";
+import { Component as Te, Placeholder as ge, Button as ae, css as X, OptionGroup as Ot, readDeclarativeRegions as jt, OptionGroupHeaderEnd as Lt, OptionsBox as Dt, Checkbox as le, GroupBox as be } from "@capillaryjs/capillary-ui";
+function Ze([t, e, r]) {
   return {
     "--c1": t,
     "--c2": e,
@@ -13,7 +13,7 @@ function Xe([t, e, r]) {
     "--colored-light": r
   };
 }
-class I {
+class B {
   constructor(e) {
     c(this, "key");
     c(this, "label");
@@ -27,10 +27,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(
+    Z(e, "Criterion options"), this.key = K(e.key, "Criterion key"), this.label = Re(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 O(
       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: Pt }
+    ), this.visibleCategoriesEmitter = new R(
       [this.categories$, this.hidden$],
       ([r, i]) => Object.freeze(
         r.filter(({ key: n }) => !i.has(n))
@@ -42,9 +42,9 @@ class I {
   }
   visibility(e) {
     this.assertActive();
-    const r = P(e, "Category key");
+    const r = K(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 Kt(this.hidden$, r, this), this.visibilityEmitters.set(r, i)), i;
   }
   setAllVisible(e, r) {
     this.assertActive();
@@ -67,7 +67,7 @@ class I {
     }
   }
   applyFirstSeenDefaults(e) {
-    Je(e, `${this.label} categories`);
+    Qe(e, `${this.label} categories`);
     const r = new Set(this.hidden$.get());
     let i = !1;
     for (const n of e)
@@ -78,36 +78,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 oi(t) {
+  Z(t, "Static criterion options");
+  const e = Je(t.categories, `${t.label} categories`), r = new O(e, {
     purpose: `${t.key} static categories`
   });
-  return new I({ ...t, categories$: r, ownedCategories: r });
+  return new B({ ...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 ai(t) {
+  if (Z(t, "Derived criterion options"), pe(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 R(
     [t.source$],
-    ([r]) => Dt(r, t),
+    ([r]) => Mt(r, t),
     { purpose: `${t.key} derived categories` }
   );
-  return new I({
+  return new B({
     ...t,
     allowResorting: t.allowResorting ?? !0,
     categories$: e,
     ownedCategories: e
   });
 }
-function Dt(t, e) {
+function Mt(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 = we(e.extractKeys(o));
     if (a.length === 0) {
       i += 1;
       continue;
@@ -118,29 +118,29 @@ 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 $e({
       key: o,
       ...l,
       generated: !0,
-      predicate: (u) => be(e.extractKeys(u)).includes(o)
+      predicate: (u) => we(e.extractKeys(u)).includes(o)
     }, "Derived category");
   });
   if (i > 0 && e.unmatched != null) {
     const { key: o, ...a } = e.unmatched;
-    s.push(Ee({
+    s.push($e({
       key: o,
       ...a,
       generated: !0,
-      predicate: (l) => be(e.extractKeys(l)).length === 0
+      predicate: (l) => we(e.extractKeys(l)).length === 0
     }, "Derived unmatched category"));
   }
-  return Ze(s, "Derived categories");
+  return Je(s, "Derived categories");
 }
-function ai(t, e) {
+function li(t, e) {
   pe(t, "filterByHidden items$"), Nt(e);
   const r = [t];
   for (const i of e) r.push(i.categories$, i.hidden$);
-  return new z(
+  return new R(
     r,
     (i) => i[0].filter((s) => !e.some((o, a) => {
       const l = i[a * 2 + 1], u = i[a * 2 + 2];
@@ -149,10 +149,10 @@ function ai(t, e) {
     { purpose: "items filtered by hidden visualization categories" }
   );
 }
-function li(t, e) {
-  if (pe(t, "categoryCounts items$"), !(e instanceof I))
+function ci(t, e) {
+  if (pe(t, "categoryCounts items$"), !(e instanceof B))
     throw new TypeError("categoryCounts criterion must be a GroupingCriterion");
-  return new z(
+  return new R(
     [t, e.categories$],
     (r) => {
       const i = r[0], n = r[1];
@@ -164,10 +164,10 @@ function li(t, e) {
     { purpose: `${e.key} unfiltered category counts` }
   );
 }
-function Mt(t, e) {
+function Pt(t, e) {
   return t === e || t.size === e.size && [...t].every((r) => e.has(r));
 }
-class Pt extends xe {
+class Kt extends ze {
   constructor(r, i, n) {
     super(r.get().has(i) ? "hidden" : "visible", {
       owner: n,
@@ -199,33 +199,33 @@ class Pt extends xe {
     });
   }
 }
-function be(t) {
-  const r = (t == null ? [] : typeof t == "string" ? [t] : [...t]).map((i) => P(i, "Extracted category key"));
+function we(t) {
+  const r = (t == null ? [] : typeof t == "string" ? [t] : [...t]).map((i) => K(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 Je(t, e) {
+  return Qe(t, e), Object.freeze(t.map((r) => $e(r, e)));
 }
-function Ee(t, e) {
-  W(t, e);
+function $e(t, e) {
+  Z(t, e);
   const r = {
     ...t,
-    key: P(t.key, `${e} key`),
-    label: ze(t.label, `${e} label`),
-    colors: Qe(t.colors, `${e} colors`)
+    key: K(t.key, `${e} key`),
+    label: Re(t.label, `${e} label`),
+    colors: et(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 && K(t.colorKey, `${e} colorKey`), Object.freeze(r);
 }
-function Je(t, e) {
+function Qe(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`);
+    Z(i, e);
+    const n = K(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), Re(i.label, `${e} label`), et(i.colors, `${e} colors`), typeof i.predicate != "function")
       throw new TypeError(`${e} predicate must be a function`);
   }
 }
@@ -233,13 +233,13 @@ function Nt(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 B))
       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 et(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]);
@@ -248,27 +248,27 @@ function pe(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 Z(t, e) {
   if (t == null || typeof t != "object" || Array.isArray(t))
     throw new TypeError(`${e} must be an object`);
 }
-function P(t, e) {
+function K(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 Re(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 ve(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 = tt({
     items: s,
     splits: e,
     splitIndex: 0,
@@ -283,8 +283,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 It(t) {
+  if (!(t instanceof B))
     throw new TypeError("criterionSnapshot requires a GroupingCriterion");
   return Object.freeze({
     key: t.key,
@@ -293,7 +293,7 @@ function Kt(t) {
     allowResorting: t.allowResorting
   });
 }
-function D(t, e) {
+function M(t, e) {
   if (e == null) return null;
   let r = t;
   for (const i of e) {
@@ -303,7 +303,7 @@ function D(t, e) {
   }
   return r;
 }
-class It {
+class Bt {
   constructor(e, r, i = {}) {
     c(this, "layout$");
     c(this, "selectedPath$");
@@ -314,15 +314,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 Ft(e, r, i), this.layout$ = this.layoutEmitter, this.selectedPath$ = new O(null, {
       owner: this,
       purpose: "selected block path",
-      equals: qt
-    }), this.selectedBlockEmitter = new z(
+      equals: _t
+    }), this.selectedBlockEmitter = new R(
       [this.layout$, this.selectedPath$],
-      ([n, s]) => D(n.root, s),
+      ([n, s]) => M(n.root, s),
       { owner: this, purpose: "selected block" }
-    ), this.selectedBlock$ = this.selectedBlockEmitter, this.selectedItemsEmitter = new z(
+    ), this.selectedBlock$ = this.selectedBlockEmitter, this.selectedItemsEmitter = new R(
       [this.selectedBlock$],
       ([n]) => (n == null ? void 0 : n.items) ?? Object.freeze([]),
       { owner: this, purpose: "selected block items" }
@@ -333,8 +333,8 @@ class It {
   }
   select(e, r) {
     this.assertActive();
-    const i = tt(e);
-    if (D(this.layout$.get().root, i) == null)
+    const i = rt(e);
+    if (M(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 +350,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 || M(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 ui(t, e, r = {}) {
+  return new Bt(t, e, r);
 }
-class Bt extends xe {
+class Ft extends ze {
   constructor(r, i, n) {
-    super(we([], [], n), {
+    super(ve([], [], n), {
       purpose: "reactive block layout",
       fetchState: k.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, Be(r, "Block selection items$"), Be(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,19 +391,19 @@ 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$: f }) => f)
+    ], s = n.map((f) => f.getFetchState()), o = n.map((f) => f.getError()).filter(Ht);
     let a, l = null;
     try {
-      a = we(
+      a = ve(
         this.items$.get(),
-        i.map(Kt),
+        i.map(It),
         this.options
       );
-    } catch (p) {
-      l = p, a = we([], [], this.options);
+    } catch (f) {
+      l = f, a = ve([], [], this.options);
     }
-    const u = l == null ? o : [...o, l], h = u.length > 0 ? k.Error : Rt(s);
+    const u = l == null ? o : [...o, l], h = u.length > 0 ? k.Error : At(s);
     this.setSnapshot({
       value: a,
       fetchState: h,
@@ -413,7 +413,7 @@ class Bt extends xe {
     });
   }
 }
-function et(t) {
+function tt(t) {
   const {
     items: e,
     splits: r,
@@ -425,45 +425,45 @@ function et(t) {
     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({
+    rootLabel: f
+  } = t, v = r[i], g = v != null && n.length > 0 && l < u, m = v == null || g ? [] : qt({
     items: e,
     splits: r,
     splitIndex: i,
     path: n,
-    criterion: b,
+    criterion: v,
     totalShare: l,
     readabilityThreshold: u,
     issues: h,
-    rootLabel: p
-  }), f = a === 0 ? 0 : e.length / a;
+    rootLabel: f
+  }), p = a === 0 ? 0 : e.length / a;
   return Object.freeze({
-    key: _t(n),
+    key: Ut(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) ?? f,
     colors: (o == null ? void 0 : o.colors) ?? null,
     colorKey: (o == null ? void 0 : o.colorKey) ?? null,
     count: e.length,
-    share: f,
+    share: p,
     totalShare: l,
     depth: n.length - 1,
     items: e,
-    children: Object.freeze(g),
+    children: Object.freeze(m),
     childOrientation: n.length % 2 === 0 ? "horizontal" : "vertical",
-    childrenSuppressed: y
+    childrenSuppressed: g
   });
 }
-function Ft(t) {
+function qt(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));
+    const h = r.categories.filter((f) => f.predicate(l));
     if (h.length !== 1) {
       o = !1, n.push(Object.freeze({
         kind: h.length === 0 ? "unmatched" : "multiple-matches",
@@ -472,7 +472,7 @@ function Ft(t) {
         parentPath: i,
         item: l,
         itemIndex: u,
-        matchedCategoryKeys: Object.freeze(h.map(({ key: p }) => p))
+        matchedCategoryKeys: Object.freeze(h.map(({ key: f }) => f))
       }));
       return;
     }
@@ -480,11 +480,11 @@ function Ft(t) {
   }), !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 h = rt([...i, {
       criterionKey: r.key,
       categoryKey: l.key
-    }]), p = e.length === 0 ? 0 : u.length / e.length;
-    return et({
+    }]), f = e.length === 0 ? 0 : u.length / e.length;
+    return tt({
       ...t,
       items: Object.freeze(u),
       splitIndex: t.splitIndex + 1,
@@ -492,11 +492,11 @@ function Ft(t) {
       criterion: r,
       category: l,
       parentCount: e.length,
-      totalShare: t.totalShare * p
+      totalShare: t.totalShare * f
     });
   });
 }
-function tt(t) {
+function rt(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 +506,26 @@ function tt(t) {
     return Object.freeze({ ...e });
   }));
 }
-function qt(t, e) {
+function _t(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 Ut(t) {
   return t.length === 0 ? "root" : t.map(({ criterionKey: e, categoryKey: r }) => `${encodeURIComponent(e)}=${encodeURIComponent(r)}`).join("/");
 }
-function Ut(t) {
+function Ht(t) {
   return t != null;
 }
-function Ie(t, e) {
+function Be(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 Fe = "data-cap-structural-styles";
+let Vt = 1;
+class it {
+  constructor(e = `runtime-${Vt++}`) {
     c(this, "id");
     c(this, "cssFragments", /* @__PURE__ */ new Map());
     if (typeof e != "string") throw new TypeError("StyleRegistry id must be a string");
@@ -552,16 +552,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 : nt(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[${Fe}="${Gt(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(Fe, this.id), e.head.prepend(i));
     const n = this.generateCSS();
     return i.textContent !== n && (i.textContent = n), i;
   }
@@ -569,34 +569,34 @@ class rt {
     this.cssFragments.clear();
   }
 }
-function Vt() {
-  return new rt();
+function Yt() {
+  return new it();
 }
-const Yt = new rt("");
+const Wt = new it("");
 function Gt(t) {
   return t.replaceAll("\\", "\\\\").replaceAll('"', '\\"');
 }
-function it(t, e) {
+function nt(t, e) {
   let r = "", i = 0;
   for (; i < t.length; ) {
-    const n = Zt(t, i);
+    const n = Jt(t, i);
     if (n < 0) return r + t.slice(i);
-    const s = Jt(t, n);
+    const s = Qt(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}{${nt(a, e)}}` : `${Xt(o, e)}{${a}}`, i = s + 1;
   }
   return r;
 }
-function Wt(t, e) {
+function Xt(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]) ?? "";
+  const r = ((o = t.match(/^\s*/)) == null ? void 0 : o[0]) ?? "", i = ((a = t.match(/\s*$/)) == null ? void 0 : a[0]) ?? "", n = Zt(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(`,
 ${s}`) + i;
 }
-function Xt(t) {
+function Zt(t) {
   const e = [];
   let r = 0, i = 0, n = 0, s = null;
   for (let o = 0; o < t.length; o += 1) {
@@ -609,26 +609,26 @@ function Xt(t) {
   }
   return e.push(t.slice(r).trim()), e.filter(Boolean);
 }
-function Zt(t, e) {
+function Jt(t, e) {
   for (let r = e; r < t.length; r += 1) {
     const i = t[r];
     if (i === '"' || i === "'")
-      r = nt(t, r);
-    else if (i === "/" && t[r + 1] === "*")
       r = st(t, r);
+    else if (i === "/" && t[r + 1] === "*")
+      r = ot(t, r);
     else if (i === "{")
       return r;
   }
   return -1;
 }
-function Jt(t, e) {
+function Qt(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);
-    else if (n === "/" && t[i + 1] === "*")
       i = st(t, i);
+    else if (n === "/" && t[i + 1] === "*")
+      i = ot(t, i);
     else if (n === "{")
       r += 1;
     else if (n === "}" && --r === 0)
@@ -636,19 +636,19 @@ function Jt(t, e) {
   }
   return -1;
 }
-function nt(t, e) {
+function st(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 ot(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 er = /* @__PURE__ */ new WeakSet(), tr = /* @__PURE__ */ new WeakSet();
+class at {
   constructor(e = []) {
     c(this, "providers", /* @__PURE__ */ new Map());
     c(this, "instances", /* @__PURE__ */ new Map());
@@ -658,7 +658,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 (nr(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 +667,10 @@ class ot {
     return this.disposed;
   }
   has(e) {
-    return this.assertActive(), Fe(e), this.providers.has(e);
+    return this.assertActive(), qe(e), this.providers.has(e);
   }
   require(e) {
-    if (this.assertActive(), Fe(e), this.instances.has(e)) return this.instances.get(e);
+    if (this.assertActive(), qe(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 +693,7 @@ class ot {
     for (const r of [...this.creationOrder].reverse()) {
       const i = this.instances.get(r);
       try {
-        const n = nr(i);
+        const n = sr(i);
         n != null && n.call(i);
       } catch (n) {
         e.push(n);
@@ -707,29 +707,26 @@ class ot {
     if (this.disposed) throw new Error("ServiceScope has been disposed");
   }
 }
-function tr(t = []) {
-  return new ot(t);
+function rr(t = []) {
+  return new at(t);
 }
-function rr(t) {
-  return t != null && (typeof t == "object" || typeof t == "function") && Qt.has(t);
+function ir(t) {
+  return t != null && (typeof t == "object" || typeof t == "function") && er.has(t);
 }
-function Fe(t) {
-  if (!rr(t)) throw new TypeError("Expected a service key created by defineService()");
+function qe(t) {
+  if (!ir(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 nr(t) {
+  if (t == null || typeof t != "object" && typeof t != "function" || !tr.has(t))
     throw new TypeError("Expected a service provider created by provideService()");
 }
-function nr(t) {
+function sr(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 se = 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 +741,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…",
@@ -772,13 +765,12 @@ const ne = Object.freeze({
   themeOptionJavaLabel: "Java",
   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 lt {
   constructor(e, r) {
     c(this, "locale");
     c(this, "messages");
@@ -788,30 +780,30 @@ class at {
     return this.messages[e];
   }
 }
-const sr = new at(
+const or = new lt(
   void 0,
-  ne
+  se
 );
-function or(t) {
-  if (t == null) return sr;
+function ar(t) {
+  if (t == null) return or;
   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 = lr(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 = { ...se };
   if (r != null)
-    for (const n of Object.keys(ne)) {
+    for (const n of Object.keys(se)) {
       const s = r[n];
       if (s === void 0) continue;
-      const o = ne[n];
+      const o = se[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 lt(e, Object.freeze(i));
 }
-function ar(t) {
+function lr(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 +812,7 @@ function ar(t) {
     throw new RangeError(`Invalid Capillary UI localization locale: ${t}`, { cause: e });
   }
 }
-const lr = /* @__PURE__ */ new Set([
+const cr = /* @__PURE__ */ new Set([
   "annotation-xml",
   "color-profile",
   "font-face",
@@ -830,8 +822,8 @@ const lr = /* @__PURE__ */ new Set([
   "font-face-name",
   "missing-glyph"
 ]);
-class lt {
-  constructor(e = {}, r = Vt()) {
+class ct {
+  constructor(e = {}, r = Yt()) {
     c(this, "styleRegistry");
     c(this, "services");
     c(this, "router");
@@ -841,16 +833,16 @@ class lt {
       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.localization = ar(e.localization), this.services = e.services ?? rr(), !(this.services instanceof at))
       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");
+    ut(e, "Capillary UI component host name");
     const r = `cap-${e.replaceAll("-", "")}`;
-    return cr(r), r;
+    return ur(r), r;
   }
   resolveHostSelector(e, r) {
     if (typeof e != "string") throw new TypeError("Host selector must be a string");
@@ -884,16 +876,16 @@ class lt {
     return this.styleRegistry.injectAll(e);
   }
 }
-const qe = new lt({}, Yt);
-function ct(t, e) {
+const _e = new ct({}, Wt);
+function ut(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 ur(t) {
+  if (ut(t, "Capillary UI element name"), !t.includes("-") || cr.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 W = Symbol.for("@capillaryjs/capillary-ui.Fragment"), hr = /* @__PURE__ */ new WeakSet(), dr = /* @__PURE__ */ new Set([
   "allowFullScreen",
   "async",
   "autoFocus",
@@ -917,7 +909,7 @@ const le = Symbol.for("@capillaryjs/capillary-ui.Fragment"), ur = /* @__PURE__ *
   "required",
   "reversed",
   "selected"
-]), dr = /* @__PURE__ */ new Set([
+]), pr = /* @__PURE__ */ new Set([
   "checked",
   "defaultChecked",
   "defaultValue",
@@ -931,7 +923,7 @@ const le = Symbol.for("@capillaryjs/capillary-ui.Fragment"), ur = /* @__PURE__ *
   "selectedIndex",
   "tabIndex",
   "value"
-]), _e = "data-cap";
+]), Ue = "data-cap";
 function ce(t, e = null, ...r) {
   const i = e ?? {};
   if (typeof i != "object" || Array.isArray(i))
@@ -946,14 +938,14 @@ function ce(t, e = null, ...r) {
     key: s,
     props: {
       ...o,
-      children: ut([n, r])
+      children: ht([n, r])
     }
   };
 }
-function pr(t, ...e) {
+function fr(t, ...e) {
   return t.reduce((r, i, n) => r + i + String(e[n] ?? ""), "");
 }
-const $ = class $ {
+const E = class E {
   constructor(e = {}) {
     c(this, "props");
     c(this, "dom", null);
@@ -973,7 +965,7 @@ const $ = class $ {
     c(this, "renderReadSubscriptions", /* @__PURE__ */ new Map());
     c(this, "collectingRenderReads", null);
     /** @internal */
-    c(this, "_runtime", qe);
+    c(this, "_runtime", _e);
     /** @internal Route lineage inherited by nested routed components. */
     c(this, "_routeContext", null);
     /** JSX component for this instance's runtime-configured custom host. */
@@ -987,14 +979,14 @@ const $ = class $ {
   }
   static new(...e) {
     const r = new this(...e);
-    if (!(r instanceof $))
+    if (!(r instanceof E))
       throw new TypeError("Component.new() requires a Component constructor");
     return r.mount();
   }
-  static registerStyles(e = qe, r = /* @__PURE__ */ new Set()) {
+  static registerStyles(e = _e, 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 = Or(this);
     for (const s of n)
       Object.hasOwn(s, "css") && s.css && (i == null ? e.styleRegistry.registerCSS(s.css) : e.styleRegistry.registerHostCSS(
         s.css,
@@ -1013,24 +1005,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;
+    } = e ?? {}, l = o ?? s, u = this.props.island === !0 ? jr(l, "island") : l;
     return ce(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 ct))
       throw new TypeError("Component runtime must be a CapillaryUiRuntime");
     if (e === this._runtime) return this;
     if (this.initialized || this.mounted || this._rendered != null)
@@ -1057,7 +1050,7 @@ 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, this.initialize()), this.mounted || (this.mounted = !0, this.update(), i = !0), e != null && (Ar(e), Le(e, this._rendered, r)), i && this.afterMount(this.dom), this;
   }
   attachTo(e) {
     return this.mount(e), this;
@@ -1075,11 +1068,11 @@ const $ = class $ {
         this.collectingRenderReads = r;
         let i;
         try {
-          i = H(this.render());
+          i = V(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);
+        this._rendered = Ae(this._rendered, i, this), this.dom = yt(this._rendered), this.reconcileRenderReads(r), this.afterUpdate(this.dom);
       } while (this.updateRequested && !this.destroyed);
     } finally {
       this.updating = !1;
@@ -1161,7 +1154,7 @@ const $ = class $ {
     return e.addEventListener(r, s, n), this.onCleanup(() => e.removeEventListener(r, s, n)), this;
   }
   registerChild(e) {
-    if (!(e instanceof $))
+    if (!(e instanceof E))
       throw new TypeError("registerChild requires a Component");
     return this._childComponents.add(e), e;
   }
@@ -1171,7 +1164,7 @@ const $ = class $ {
       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 && A(this._rendered, !0), this._rendered = null, this.dom = null, this._childComponents.clear(), this.onDestroy();
     }
   }
   validateRequiredServices() {
@@ -1181,25 +1174,25 @@ const $ = class $ {
         throw new Error(`${e.name} requires unregistered service "${r.name}"`);
   }
   validateIslandAncestry(e) {
-    if (!ke(e)) return;
+    if (!Se(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 (Se(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 (Se(e.props) || e.hasIslandDescendant()) return !0;
     return !1;
   }
   onDestroy() {
   }
   trackRenderRead(e) {
-    if (wt(e, "Component.read"), this.collectingRenderReads == null)
+    if (vt(e, "Component.read"), this.collectingRenderReads == null)
       throw new Error("Component.read() and snapshot() may only be called during render()");
     this.collectingRenderReads.add(e);
   }
@@ -1215,8 +1208,8 @@ const $ = class $ {
     }
   }
 };
-c($, "dependencies", []), c($, "requiredServices", []), /** Component `live()` bindings are opt-in; subclasses declare their allowlist. */
-c($, "liveProps", []), c($, "css", pr`
+c(E, "dependencies", []), c(E, "requiredServices", []), /** Component `live()` bindings are opt-in; subclasses declare their allowlist. */
+c(E, "liveProps", []), c(E, "css", fr`
         .cap-fill-horizontal,
         .cap-fill-vertical {
             box-sizing: border-box;
@@ -1316,12 +1309,13 @@ c($, "liveProps", []), c($, "css", pr`
         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(E, "hostName", null), /** Optional host-level data surface marker for parent composition. */
+c(E, "dataSurface", null);
+let $ = E;
+function V(t) {
+  return Array.isArray(t) ? ce(W, null, t) : t == null || typeof t == "boolean" ? ce(W) : t;
 }
-function ut(t) {
+function ht(t) {
   const e = [], r = (i) => {
     if (Array.isArray(i))
       for (const n of i) r(n);
@@ -1329,7 +1323,7 @@ function ut(t) {
   };
   return r(t), e;
 }
-function Y(t, e) {
+function G(t, e) {
   if (typeof t == "string" || typeof t == "number")
     return {
       kind: "text",
@@ -1344,8 +1338,8 @@ function Y(t, e) {
       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 u = G(V(a), e);
+    Le(l, u, o);
     const h = {
       kind: "emitter",
       key: null,
@@ -1357,16 +1351,16 @@ function Y(t, e) {
       },
       owner: e
     };
-    return h.unsubscribe = t.subscribe(({ value: p }) => {
-      if (Object.is(p, t))
+    return h.unsubscribe = t.subscribe(({ value: f }) => {
+      if (Object.is(f, t))
         throw new TypeError("A Capillary UI emitter child cannot render itself");
-      h.child = Re(h.child, H(p), e);
+      h.child = Ae(h.child, V(f), e);
     }, { emitCurrent: !1 }), h;
   }
-  if (t instanceof C)
+  if (t instanceof $)
     return t._setRuntime(e._runtime), t._setRouteContext(e._routeContextForChildren()), t._setParentComponent(e), t.mount(), e.registerChild(t), {
       kind: "component",
-      key: yt(t.props),
+      key: gt(t.props),
       type: t.constructor,
       instance: t,
       prebuilt: !0,
@@ -1375,9 +1369,9 @@ function Y(t, e) {
       owner: e
     };
   if (!T(t))
-    throw new TypeError(`Invalid Capillary UI child: ${Ve(t)}`);
+    throw new TypeError(`Invalid Capillary UI child: ${Ye(t)}`);
   const { type: r, key: i = null, props: n } = t;
-  if (r === le) {
+  if (r === W) {
     const s = document.createComment("cap-fragment-start"), o = document.createComment("cap-fragment-end"), a = {
       kind: "fragment",
       key: i,
@@ -1410,12 +1404,12 @@ function Y(t, e) {
       children: [],
       owner: e
     };
-    return ft(o, n), o.children = ue(s, [], n.children, e), o;
+    return mt(o, n), o.children = ue(s, [], n.children, e), o;
   }
-  if (bt(r)) {
+  if (wt(r)) {
     const s = n;
-    pt(r, s);
-    const o = Ue(s), a = new r(o);
+    ft(r, s);
+    const o = He(s), a = new r(o);
     a._setRuntime(e._runtime), a._setRouteContext(e._routeContextForChildren()), a._setParentComponent(e);
     const l = {
       kind: "component",
@@ -1427,59 +1421,59 @@ function Y(t, e) {
       liveProps: /* @__PURE__ */ new Map(),
       owner: e
     };
-    return dt(l, s), a.mount(), e.registerChild(a), l;
+    return pt(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 = He(o), l = V(s(a)), u = {
       kind: "function",
       key: i,
       type: s,
       props: a,
       sourceProps: o,
       liveProps: /* @__PURE__ */ new Map(),
-      child: Y(l, e),
+      child: G(l, e),
       owner: e
     };
-    return mr(u), u;
+    return yr(u), u;
   }
-  throw new TypeError(`Unsupported vnode type: ${Ve(r)}`);
+  throw new TypeError(`Unsupported vnode type: ${Ye(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 Ae(t, e, r) {
+  if (t == null) return G(e, r);
+  if (bt(t, e)) return dt(t, e, r);
+  const i = G(e, r), n = yt(t), s = (n == null ? void 0 : n.parentNode) ?? null;
+  return s && Le(s, i, n), A(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 dt(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 $ || T(e) && mr(t, e.props), t) : T(e) ? t.kind === "function" ? (gr(t, e.props), t) : t.kind === "fragment" ? (t.children = ue(
     t.start.parentNode,
     t.children,
     e.props.children,
     r,
     t.end,
     t.start
-  ), t) : (ft(t, e.props), t.children = ue(
+  ), t) : (mt(t, e.props), t.children = ue(
     t.node,
     t.children,
     e.props.children,
     r
   ), t) : t;
 }
-function Ue(t) {
+function He(t) {
   return Object.fromEntries(Object.entries(t).map(([e, r]) => [
     e,
     N(r) ? r.emitter.get() : r
   ]));
 }
-function dt(t, e) {
-  Ae(t.liveProps, e, (r, i) => {
+function pt(t, e) {
+  Oe(t.liveProps, e, (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 = je(t.liveProps, e), t.instance.setProps(t.props);
 }
-function fr(t, e) {
-  pt(t.type, e), dt(t, e);
+function mr(t, e) {
+  ft(t.type, e), pt(t, e);
 }
-function pt(t, e) {
+function ft(t, e) {
   const r = Reflect.get(t, "liveProps");
   if (r == null) return;
   if (!Array.isArray(r) || r.some((n) => typeof n != "string"))
@@ -1491,21 +1485,21 @@ function pt(t, e) {
         `${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) {
+  Oe(t.liveProps, t.sourceProps, (e, r) => {
+    t.props = { ...t.props, [e]: r }, Ce(t);
+  }), t.props = je(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 gr(t, e) {
+  t.sourceProps = e, Oe(t.liveProps, e, (r, i) => {
+    t.props = { ...t.props, [r]: i }, Ce(t);
+  }), t.props = je(t.liveProps, e), Ce(t);
 }
-function $e(t) {
-  const e = H(t.type(t.props));
-  t.child = Re(t.child, e, t.owner);
+function Ce(t) {
+  const e = V(t.type(t.props));
+  t.child = Ae(t.child, e, t.owner);
 }
-function Ae(t, e, r) {
+function Oe(t, e, r) {
   for (const [i, n] of t) {
     const s = e[i];
     N(s) && s.emitter === n.source || (n.unsubscribe(), t.delete(i));
@@ -1523,7 +1517,7 @@ function Ae(t, e, r) {
     }, { emitCurrent: !1 }), t.set(i, s);
   }
 }
-function Oe(t, e) {
+function je(t, e) {
   return Object.fromEntries(Object.entries(e).map(([r, i]) => {
     var n;
     return [
@@ -1534,60 +1528,60 @@ function Oe(t, e) {
 }
 function ue(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);
-    if (f != null) {
-      if (u.has(f)) throw new Error(`Duplicate sibling key: ${String(f)}`);
-      u.add(f);
+  const o = ht(r), a = /* @__PURE__ */ new Map(), l = [];
+  for (const m of e)
+    m.key == null ? l.push(m) : a.has(m.key) || a.set(m.key, m);
+  const u = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), f = [];
+  let v = 0;
+  for (const m of o) {
+    const p = H(m);
+    if (p != null) {
+      if (u.has(p)) throw new Error(`Duplicate sibling key: ${String(p)}`);
+      u.add(p);
     }
-    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 C = p == null ? l[v++] : a.get(p);
+    C && bt(C, m) ? (h.add(C), f.push(dt(C, m, i))) : f.push(G(m, i));
+  }
+  for (const m of e)
+    h.has(m) || A(m, !0);
+  let g = s ? s.nextSibling : t.firstChild;
+  for (const m of f)
+    for (const p of j(m))
+      p === g ? g = g.nextSibling : (t.insertBefore(p, g ?? n), g = p.nextSibling);
+  return f;
+}
+function mt(t, e) {
   const r = Object.fromEntries(Object.entries(e).filter(
-    ([s]) => s !== "children" && se(s) !== _e
+    ([s]) => s !== "children" && oe(s) !== Ue
   )), 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);
-    else if (s === "ref")
-      o !== a && vr(t, a);
-    else if ($r(s))
+    if (xr(s))
       wr(t, s, a);
+    else if (s === "ref")
+      o !== a && kr(t, a);
+    else if (Cr(s))
+      vr(t, s, a);
     else if (N(a))
-      gr(t, s, a);
+      br(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) || P(t.node, s, u, a);
     }
   }
-  t.node.setAttribute(_e, ""), t.props = { ...r };
+  t.node.setAttribute(Ue, ""), t.props = { ...r };
 }
-function gr(t, e, r) {
+function br(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);
+  P(t.node, e, (i == null ? void 0 : i.value) ?? t.props[e], n);
   const s = {
     source: r.emitter,
     value: n,
@@ -1596,19 +1590,19 @@ function gr(t, e, r) {
   };
   s.unsubscribe = r.emitter.subscribe(({ value: o }) => {
     const a = s.value;
-    s.value = o, Object.is(a, o) || M(t.node, e, a, o);
+    s.value = o, Object.is(a, o) || P(t.node, e, a, o);
   }, { emitCurrent: !1 }), t.liveProps.set(e, s);
 }
-function br(t, e, r) {
+function wr(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), P(t.node, i, n.value, void 0));
     return;
   }
-  if (xr(r, e), (n == null ? void 0 : n.source) === r) return;
+  if (zr(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 s = Rr(t.node, i), o = r.get();
+  P(t.node, i, n == null ? void 0 : n.value, o);
   const a = () => {
     r.set(Reflect.get(t.node, i), `${e} changed`);
   }, l = {
@@ -1621,10 +1615,10 @@ function br(t, e, r) {
   };
   l.unsubscribe = r.subscribe(({ value: u }) => {
     const h = l.value;
-    l.value = u, Object.is(h, u) || M(t.node, i, h, u);
+    l.value = u, Object.is(h, u) || P(t.node, i, h, u);
   }, { emitCurrent: !1 }), t.node.addEventListener(s, a), t.nativeBindings.set(e, l);
 }
-function wr(t, e, r) {
+function vr(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")
     throw new TypeError(`${e} must be a function or null`);
@@ -1633,51 +1627,51 @@ function wr(t, e, r) {
     t.node.addEventListener(i, s), t.listeners.set(e, s);
   }
 }
-function vr(t, e) {
-  if (Ce(t.ref, null), e != null && typeof e != "function" && typeof e != "object")
+function kr(t, e) {
+  if (xe(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, xe(t.ref, t.node);
 }
-function M(t, e, r, i) {
+function P(t, e, r, i) {
   if (e === "class" || e === "className") {
-    ve(t, "class", i);
+    ke(t, "class", i);
     return;
   }
   if (e === "for" || e === "htmlFor") {
-    ve(t, "for", i);
+    ke(t, "for", i);
     return;
   }
   if (e === "dataset") {
-    kr(t, r, i);
+    Sr(t, r, i);
     return;
   }
   if (e === "style") {
-    Sr(t, r, i);
+    Er(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 (dr.has(n)) {
     const s = !!i;
-    n in t && Reflect.set(t, n, s), t.toggleAttribute(se(e), s);
+    n in t && Reflect.set(t, n, s), t.toggleAttribute(oe(e), s);
     return;
   }
-  if (dr.has(n) && n in t) {
+  if (pr.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), i == null && t.removeAttribute(oe(e));
     return;
   }
-  ve(t, se(e), i);
+  ke(t, oe(e), i);
 }
-function kr(t, e, r) {
+function Sr(t, e, r) {
   const i = he(e, "dataset"), n = he(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);
   }
 }
-function Sr(t, e, r) {
+function Er(t, e, r) {
   if (typeof r == "string") {
     t.style.cssText = r;
     return;
@@ -1695,25 +1689,25 @@ function he(t, e) {
     throw new TypeError(`${e} must be an object or null`);
   return t;
 }
-function ve(t, e, r) {
+function ke(t, e, r) {
   r == null || r === !1 ? t.removeAttribute(e) : r === !0 ? t.setAttribute(e, "") : t.setAttribute(e, String(r));
 }
-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 oe(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) ? Ve(t) : t.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
 }
-function He(t) {
+function Ve(t) {
   return t.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
 }
-function Ce(t, e) {
+function xe(t, e) {
   t != null && (typeof t == "function" ? t(e) : t.current = e);
 }
-function R(t, e) {
+function A(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(), A(t.child, !1), e)
+      for (const r of j(t)) r.remove();
     return;
   }
   if (t.kind === "component") {
@@ -1723,11 +1717,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(), A(t.child, e);
     return;
   }
   if (t.kind === "element") {
-    Ce(t.ref, null);
+    xe(t.ref, null);
     for (const [r, i] of t.listeners)
       t.node.removeEventListener(r.slice(2).toLowerCase(), i);
     t.listeners.clear();
@@ -1736,100 +1730,100 @@ 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);
+    for (const r of t.children) A(r, !1);
     e && t.node.remove();
     return;
   }
   if (t.kind === "fragment") {
-    for (const r of t.children) R(r, !1);
+    for (const r of t.children) A(r, !1);
     if (e)
-      for (const r of O(t)) r.remove();
+      for (const r of j(t)) r.remove();
     return;
   }
   e && t.node.remove();
 }
-function je(t, e, r = null) {
+function Le(t, e, r = null) {
   if (e != null)
-    for (const i of O(e)) t.insertBefore(i, r);
+    for (const i of j(e)) t.insertBefore(i, r);
 }
-function O(t) {
+function j(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 j(t.instance._rendered);
+  if (t.kind === "function") return j(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 yt(t) {
+  return j(t)[0] ?? null;
 }
-function U(t) {
-  return t instanceof C ? yt(t.props) : T(t) ? t.key : null;
+function H(t) {
+  return t instanceof $ ? gt(t.props) : T(t) ? t.key : null;
 }
-function yt(t) {
+function gt(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 bt(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 $ ? t.instance === e : T(e) && wt(e.type) && t.type === e.type && t.key === H(e) : t.kind === "function" ? T(e) && t.type === e.type && t.key === H(e) : t.kind === "fragment" ? T(e) && e.type === W && t.key === H(e) : T(e) && typeof e.type == "string" && t.type === e.type && t.key === H(e);
 }
 function T(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 wt(t) {
+  return typeof t == "function" && (t === $ || t.prototype instanceof $);
 }
-function $r(t) {
+function Cr(t) {
   return /^on[A-Z]/.test(t);
 }
-function Cr(t) {
+function xr(t) {
   return t === "bind:value" || t === "bind:checked";
 }
 function N(t) {
-  return t != null && typeof t == "object" && ur.has(t);
+  return t != null && typeof t == "object" && hr.has(t);
 }
 function fe(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) {
+function vt(t, e) {
   if (!fe(t)) throw new TypeError(`${e} requires a readable emitter`);
 }
-function xr(t, e) {
-  if (wt(t, e), typeof Reflect.get(t, "set") != "function")
+function zr(t, e) {
+  if (vt(t, e), typeof Reflect.get(t, "set") != "function")
     throw new TypeError(`${e} requires a writable emitter`);
 }
 function Tr(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 Rr(t, e) {
   return e === "value" && t.localName !== "select" ? "input" : "change";
 }
-function Rr(t) {
+function Ar(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 Ye(t) {
   try {
     return String(t);
   } catch {
     return Object.prototype.toString.call(t);
   }
 }
-function Ar(t) {
+function Or(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 !== $); )
     r = Object.getPrototypeOf(r);
   return e;
 }
-function Or(...t) {
+function jr(...t) {
   return [...new Set(t.flatMap((e) => typeof e == "string" ? e.split(/\s+/) : []).filter(Boolean))].join(" ");
 }
-function ke(t) {
+function Se(t) {
   if (t.island === !0) return !0;
   const e = t.className ?? t.class;
   return typeof e == "string" && e.split(/\s+/).includes("island");
@@ -1838,56 +1832,58 @@ function d(t, e, r) {
   const i = e == null ? {} : { ...e };
   return r !== void 0 && (i.key = r), ce(t, i);
 }
-const m = d, jr = [
+const y = d, Lr = [
   "var(--colored-dark)",
   "var(--colored-base)",
   "var(--colored-light)"
 ];
-class ee extends Te {
+class _ extends Te {
   render() {
-    var b;
+    var g;
     const {
       model: e,
       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 === k.Initial || s.fetchState === k.Loading, a = this.read(e.selectedPath$), l = s.value, u = M(l.root, a), h = l.root.children.length === 0 ? [l.root] : l.root.children, f = (g = h[0]) == null ? void 0 : g.key, v = this.Host;
+    return /* @__PURE__ */ y(
+      v,
       {
         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__ */ y("header", { children: [
+            /* @__PURE__ */ y("cap-summary", { children: [
               /* @__PURE__ */ d("h2", { children: r }),
-              /* @__PURE__ */ m("p", { children: [
+              /* @__PURE__ */ y("p", { children: [
                 i,
                 " ",
-                a.root.count,
-                " items."
+                o ? null : `${l.root.count} items.`
               ] }),
-              /* @__PURE__ */ m("output", { children: [
+              o ? /* @__PURE__ */ d(ge, { width: 45 }) : /* @__PURE__ */ y("output", { children: [
                 /* @__PURE__ */ d("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((m, p) => {
+                  var x;
+                  const C = u.path.slice(0, p + 1);
+                  return ((x = M(l.root, C)) == null ? void 0 : x.label) ?? m.categoryKey;
                 }).join(" → ")
               ] })
             ] }),
             /* @__PURE__ */ d(
-              oe,
+              ae,
               {
                 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 === k.Error ? /* @__PURE__ */ d("p", { role: "alert", children: "The block graph could not be calculated." }) : o ? /* @__PURE__ */ y(W, { children: [
+            /* @__PURE__ */ d("p", { role: "status", "aria-live": "polite", children: "Loading block graph…" }),
+            /* @__PURE__ */ d("cap-blockskeleton", { "aria-hidden": "true", children: [0, 1, 2].map((m) => /* @__PURE__ */ d("cap-blockskeletoncolumn", { children: [0, 1].map((p) => /* @__PURE__ */ d(ge, { width: 100 }, p)) }, m)) })
+          ] }) : l.valid ? l.root.count === 0 ? /* @__PURE__ */ d("p", { role: "status", children: n }) : /* @__PURE__ */ d(
             "cap-scroller",
             {
               tabIndex: 0,
@@ -1897,26 +1893,26 @@ class ee extends Te {
                 {
                   role: "tree",
                   "aria-label": r,
-                  className: a.root.childOrientation,
-                  onClick: (y) => {
-                    y.target === y.currentTarget && e.clear();
+                  className: l.root.childOrientation,
+                  onClick: (m) => {
+                    m.target === m.currentTarget && e.clear();
                   },
-                  children: u.map((y) => this.renderBlock(
-                    y,
-                    o,
-                    (l == null ? void 0 : l.key) ?? h ?? null
+                  children: h.map((m) => this.renderBlock(
+                    m,
+                    a,
+                    (u == null ? void 0 : u.key) ?? f ?? 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 = Dr(e.path, r), s = e.colors, o = Ze(s ?? Lr);
+    return /* @__PURE__ */ y(
       "article",
       {
         role: "treeitem",
@@ -1938,9 +1934,9 @@ class ee extends Te {
           }
         },
         children: [
-          /* @__PURE__ */ m("cap-blocklabel", { children: [
-            /* @__PURE__ */ m("cap-blockname", { children: [
-              /* @__PURE__ */ m("small", { children: [
+          /* @__PURE__ */ y("cap-blocklabel", { children: [
+            /* @__PURE__ */ y("cap-blockname", { children: [
+              /* @__PURE__ */ y("small", { children: [
                 e.criterionLabel ?? "Items",
                 ":"
               ] }),
@@ -1967,9 +1963,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: [
+    return /* @__PURE__ */ y("div", { role: "alert", children: [
       /* @__PURE__ */ d("strong", { children: "Invalid block partition" }),
-      /* @__PURE__ */ m("p", { children: [
+      /* @__PURE__ */ y("p", { children: [
         i,
         " ",
         e.length,
@@ -1988,7 +1984,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 = kt(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 +1992,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] : M(i, r.path.slice(0, -1)) ?? void 0;
     else return;
     o != null && (e.preventDefault(), this.focusBlock(o.key));
   }
@@ -2010,7 +2006,7 @@ class ee extends Te {
     }
   }
 }
-c(ee, "liveProps", []), c(ee, "hostName", "block-graph"), c(ee, "dependencies", [oe]), c(ee, "css", G`
+c(_, "liveProps", []), c(_, "hostName", "block-graph"), c(_, "dataSurface", "data"), c(_, "dependencies", [ae, ge]), c(_, "css", X`
         & {
             display: flex;
             min-width: 0;
@@ -2047,6 +2043,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;
@@ -2173,16 +2196,16 @@ c(ee, "liveProps", []), c(ee, "hostName", "block-graph"), c(ee, "dependencies",
             }
         }
     `);
-function vt(t) {
-  return t.flatMap((e) => [e, ...vt(e.children)]);
+function kt(t) {
+  return t.flatMap((e) => [e, ...kt(e.children)]);
 }
-function Lr(t, e) {
+function Dr(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 de extends Ot {
   constructor(r) {
     super(r);
     c(this, "contentId");
@@ -2194,10 +2217,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 } = jt(
       "CollapsibleOptionGroup",
       this.props.children,
-      { headerEnd: jt }
+      { headerEnd: Lt }
     );
     return this.renderOptionGroup(r, i.headerEnd ?? null);
   }
@@ -2213,8 +2236,8 @@ class de extends At {
       busy: u = !1,
       error: h = null
     } = this.props;
-    return /* @__PURE__ */ m(n, { className: this.props.className ?? this.props.class ?? null, children: [
-      /* @__PURE__ */ m(
+    return /* @__PURE__ */ y(n, { className: this.props.className ?? this.props.class ?? null, children: [
+      /* @__PURE__ */ y(
         "fieldset",
         {
           id: this.groupId,
@@ -2225,7 +2248,7 @@ class de extends At {
           "aria-invalid": h == null ? null : "true",
           "aria-describedby": h == null ? null : this.errorId,
           children: [
-            /* @__PURE__ */ m("legend", { children: [
+            /* @__PURE__ */ y("legend", { children: [
               /* @__PURE__ */ d(
                 "button",
                 {
@@ -2248,7 +2271,7 @@ class de extends At {
     ] });
   }
 }
-c(de, "hostName", "collapsible-option-group"), c(de, "css", G`
+c(de, "hostName", "collapsible-option-group"), c(de, "css", X`
         & > fieldset > legend > button.cap-collapse-toggle {
             display: inline-flex;
             align-items: center;
@@ -2283,11 +2306,11 @@ c(de, "hostName", "collapsible-option-group"), c(de, "css", G`
             display: none;
         }
     `);
-const Dr = [
+const Mr = [
   ["☐", "hidden"],
   ["✓", "visible"]
 ];
-class te extends Lt {
+class re extends Dt {
   render() {
     const {
       criteria: e,
@@ -2296,37 +2319,37 @@ 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__ */ y("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) => {
           const a = this.snapshot(o.categories$), l = Array.isArray(a.value) ? a.value : [];
-          return /* @__PURE__ */ m(
+          return /* @__PURE__ */ y(
             de,
             {
               label: o.label,
               children: [
-                a.fetchState === k.Error ? /* @__PURE__ */ m("p", { role: "alert", children: [
+                a.fetchState === k.Error ? /* @__PURE__ */ y("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 !== k.Ready ? /* @__PURE__ */ y("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(
+                  const h = Pr(s, u.predicate);
+                  return /* @__PURE__ */ y(
                     "cap-categoryoption",
                     {
-                      style: { ...Xe(u.colors) },
+                      style: { ...Ze(u.colors) },
                       children: [
                         /* @__PURE__ */ d("cap-categoryswatch", { "aria-hidden": "true" }),
                         /* @__PURE__ */ d(
-                          ae,
+                          le,
                           {
-                            symbols: Dr,
+                            symbols: Mr,
                             label: `${u.label} (${h})`,
                             valueEmitter: o.visibility(u.key)
                           }
@@ -2345,7 +2368,7 @@ class te extends Lt {
     );
   }
 }
-c(te, "liveProps", []), c(te, "hostName", "category-hide-panel"), c(te, "dependencies", [ae, de]), c(te, "css", G`
+c(re, "liveProps", []), c(re, "hostName", "category-hide-panel"), c(re, "dependencies", [le, de]), c(re, "css", X`
         & {
             flex: 0 0 auto;
             min-width: 0;
@@ -2391,7 +2414,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,141 +2443,141 @@ c(te, "liveProps", []), c(te, "hostName", "category-hide-panel"), c(te, "depende
             white-space: nowrap;
         }
     `);
-function Mr(t, e) {
+function Pr(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})$/;
+const St = 864e5, Kr = /^(\d{4})-(\d{2})-(\d{2})$/;
 function S(t) {
-  const e = Pr.exec(t);
+  const e = Kr.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 / St);
 }
-function K(t) {
+function I(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 * St).toISOString().slice(0, 10);
 }
 function Nr(t, e) {
   if (!Number.isInteger(e)) throw new TypeError("Civil date offset must be an integer");
-  return K(S(t) + e);
+  return I(S(t) + e);
 }
-function Kr(t = /* @__PURE__ */ new Date()) {
+function Ir(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) {
+function Br(t, e) {
   return S(t) - S(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) => ({
-    shape: w,
-    values: g.map((F) => Et(w, F))
+function Fr(t, e = {}) {
+  var Pe, Ke, Ne, Ie;
+  Yr(t);
+  const r = We(e.width ?? 960, "Chart width"), i = We(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((b) => Object.keys(b.values)), u = e.today ?? Ir(), h = ((Pe = e.range) == null ? void 0 : Pe.minX) ?? Wr(l) ?? u, f = ((Ke = e.range) == null ? void 0 : Ke.maxX) ?? u, v = S(h), g = S(f);
+  if (v > g) throw new RangeError("Line graph minX must not be after maxX");
+  const m = Hr(t, v, g), p = e.stacked ?? !1, C = t.map((b) => ({
+    shape: b,
+    values: m.map((F) => $t(b, F))
   }));
-  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 x = ((Ne = e.range) == null ? void 0 : Ne.minY) ?? 0, J = x;
+  const De = Array.from({ length: m.length }, () => 0), Ct = C.map(({ shape: b, values: F }) => {
+    const q = F.map((Q, D) => {
+      const ee = p ? De[D] : 0, te = ee + Q;
+      return p && (De[D] = te), x = Math.min(x, ee, te), J = Math.max(J, ee, te), { value: Q, baseValue: ee, displayValue: te };
     });
-    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 }) => ({
-    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];
+    return { shape: b, entries: q };
+  }), xt = Math.max(1, J - x), L = J + xt * 0.05, me = ((Ie = e.range) == null ? void 0 : Ie.minY) ?? x, ye = Math.max(1, L - me), Me = Math.max(1, g - v), zt = Ct.map(({ shape: b, entries: F }) => ({
+    key: b.key,
+    label: b.label,
+    color: b.color,
+    ...b.colorKey === void 0 ? {} : { colorKey: b.colorKey },
+    shape: b,
+    points: Object.freeze(F.map((q, Q) => {
+      const D = m[Q];
       return Object.freeze({
-        date: K(L),
-        day: L,
+        date: I(D),
+        day: D,
         ...q,
-        x: n + (L - b) / De * o,
-        y: s + (j - q.displayValue) / ye * a,
-        baseY: s + (j - q.baseValue) / ye * a
+        x: n + (D - v) / Me * o,
+        y: s + (L - q.displayValue) / ye * a,
+        baseY: s + (L - q.baseValue) / ye * a
       });
     }))
   }));
   return Object.freeze({
     minDate: h,
-    maxDate: p,
-    minDay: b,
-    maxDay: y,
+    maxDate: f,
+    minDay: v,
+    maxDay: g,
     minY: me,
-    maxY: j,
+    maxY: L,
     width: r,
     height: i,
     plotLeft: n,
     plotTop: s,
     plotWidth: o,
     plotHeight: a,
-    stacked: f,
-    series: Object.freeze(xt),
-    dateMarks: Object.freeze(Hr(b, y, e.maxDateMarks ?? 8).map((w) => ({
-      date: K(w),
-      day: w,
-      x: n + (w - b) / De * o
+    stacked: p,
+    series: Object.freeze(zt),
+    dateMarks: Object.freeze(Vr(v, g, e.maxDateMarks ?? 8).map((b) => ({
+      date: I(b),
+      day: b,
+      x: n + (b - v) / Me * o
     }))),
-    valueTicks: Object.freeze(_r(me, j).map((w) => ({
-      value: w,
-      y: s + (j - w) / ye * a
+    valueTicks: Object.freeze(Ur(me, L).map((b) => ({
+      value: b,
+      y: s + (L - b) / ye * a
     })))
   });
 }
-function Fr(t, e) {
-  return Et(t, S(e));
+function qr(t, e) {
+  return $t(t, S(e));
 }
-function St(t, e) {
+function Et(t, e) {
   const r = t[0];
   if (r == null) return "";
-  let i = `M ${v(r.x)} ${v(r.y)}`;
+  let i = `M ${w(r.x)} ${w(r.y)}`;
   for (let n = 1; n < t.length; n += 1) {
     const s = t[n - 1], o = t[n];
     if (e) {
       const a = (s.x + o.x) / 2;
-      i += ` C ${v(a)} ${v(s.y)}, ${v(a)} ${v(o.y)}, ${v(o.x)} ${v(o.y)}`;
+      i += ` C ${w(a)} ${w(s.y)}, ${w(a)} ${w(o.y)}, ${w(o.x)} ${w(o.y)}`;
     } else
-      i += ` H ${v(o.x)} V ${v(o.y)}`;
+      i += ` H ${w(o.x)} V ${w(o.y)}`;
   }
   return i;
 }
-function qr(t, e) {
+function _r(t, e) {
   if (t.length === 0) return "";
-  const r = St(t, e), i = [...t].reverse();
+  const r = Et(t, e), i = [...t].reverse();
   let n = "";
   for (let s = 0; s < i.length; s += 1) {
     const o = i[s];
-    if (s === 0) n += ` L ${v(o.x)} ${v(o.baseY)}`;
+    if (s === 0) n += ` L ${w(o.x)} ${w(o.baseY)}`;
     else if (e) {
       const a = i[s - 1], l = (a.x + o.x) / 2;
-      n += ` C ${v(l)} ${v(a.baseY)}, ${v(l)} ${v(o.baseY)}, ${v(o.x)} ${v(o.baseY)}`;
+      n += ` C ${w(l)} ${w(a.baseY)}, ${w(l)} ${w(o.baseY)}, ${w(o.x)} ${w(o.baseY)}`;
     } else
-      n += ` H ${v(o.x)} V ${v(o.baseY)}`;
+      n += ` H ${w(o.x)} V ${w(o.baseY)}`;
   }
   return `${r}${n} Z`;
 }
-function _r(t, e, r = 6) {
+function Ur(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)));
+  for (let f = u; f <= e + l / 1e3; f += l)
+    h.push(Number(f.toFixed(10)));
   return h.length === 0 && h.push(Math.ceil(t)), h;
 }
-function Ur(t, e, r) {
+function Hr(t, e, r) {
   const i = /* @__PURE__ */ new Set([e, r]);
   for (const n of t)
     for (const s of Object.keys(n.values)) {
@@ -2563,8 +2586,8 @@ function Ur(t, e, r) {
     }
   return [...i].sort((n, s) => n - s);
 }
-function Et(t, e) {
-  const r = t.values[K(e)];
+function $t(t, e) {
+  const r = t.values[I(e)];
   if (r !== void 0) return r;
   if (t.carryForward !== !0) return 0;
   let i = Number.NEGATIVE_INFINITY, n = 0;
@@ -2574,14 +2597,14 @@ function Et(t, e) {
   }
   return n;
 }
-function Hr(t, e, r) {
+function Vr(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 Yr(t) {
   if (!Array.isArray(t)) throw new TypeError("History shapes must be an array");
   const e = /* @__PURE__ */ new Set();
   for (const r of t) {
@@ -2596,20 +2619,20 @@ function Vr(t) {
       if (S(i), !Number.isFinite(n)) throw new TypeError("History shape values must be finite");
   }
 }
-function Yr(t) {
+function Wr(t) {
   return t.length === 0 ? void 0 : t.reduce((e, r) => S(e) <= S(r) ? e : r);
 }
-function Ye(t, e) {
+function We(t, e) {
   if (!Number.isFinite(t) || t <= 0) throw new RangeError(`${e} must be positive`);
   return t;
 }
-function v(t) {
+function w(t) {
   return Number(t.toFixed(3)).toString();
 }
-class Se extends Te {
+class Ee extends Te {
   constructor(r) {
     super(r);
-    c(this, "cursorDate$", new A(null, {
+    c(this, "cursorDate$", new O(null, {
       owner: this,
       purpose: "line graph cursor date"
     }));
@@ -2625,30 +2648,30 @@ 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: p }) => p === k.Error) ? k.Error : [r, i, n, s].some(({ fetchState: p }) => p !== k.Ready) ? k.Loading : k.Ready;
     let u = null;
     if (this.currentModel = null, l === k.Ready)
       try {
-        this.currentModel = Br(r.value, {
+        this.currentModel = Fr(r.value, {
           stacked: i.value,
           range: s.value,
           width: Math.max(480, this.observedWidth),
           maxDateMarks: this.observedWidth < 640 ? 5 : 9
         });
-      } catch (f) {
-        u = f;
+      } catch (p) {
+        u = p;
       }
-    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 h = this.currentModel, f = h == null ? null : o ?? h.maxDate, v = this.props.formatDate ?? ((p) => p), g = this.props.formatValue ?? ((p) => String(p)), m = this.Host;
+    return /* @__PURE__ */ y(
+      m,
       {
         className: (this.props.className ?? this.props.class ?? "") || null,
         "aria-label": a,
         "aria-busy": l !== k.Ready ? "true" : null,
         children: [
-          /* @__PURE__ */ m("header", { children: [
+          /* @__PURE__ */ y("header", { children: [
             /* @__PURE__ */ d("h2", { children: a }),
-            /* @__PURE__ */ m("p", { children: [
+            /* @__PURE__ */ y("p", { children: [
               i.value ? "Stacked area" : "Individual line",
               " chart;",
               " ",
@@ -2662,24 +2685,24 @@ class Se extends Te {
               tabIndex: 0,
               role: "group",
               "aria-label": `${a}. Use Left and Right Arrow to move by day; hold Shift to move by week.`,
-              onPointerMove: (f) => this.pointerMove(f),
-              onKeyDown: (f) => this.cursorKeyDown(f),
-              ref: (f) => this.chartHost = f
+              onPointerMove: (p) => this.pointerMove(p),
+              onKeyDown: (p) => this.cursorKeyDown(p),
+              ref: (p) => this.chartHost = p
             }
           ),
-          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: [
+          h == null || f == null ? null : /* @__PURE__ */ y("cap-readout", { children: [
+            /* @__PURE__ */ d("p", { "aria-live": "polite", children: /* @__PURE__ */ d("strong", { children: v(f) }) }),
+            /* @__PURE__ */ d("ul", { children: h.series.map(({ shape: p }) => /* @__PURE__ */ y("li", { children: [
               /* @__PURE__ */ d(
                 "cap-swatch",
                 {
-                  style: { "--colored-base": f.color },
+                  style: { "--colored-base": p.color },
                   "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ d("span", { children: f.label }),
-              /* @__PURE__ */ d("strong", { children: y(Fr(f, p)) })
-            ] }, f.key)) })
+              /* @__PURE__ */ d("span", { children: p.label }),
+              /* @__PURE__ */ d("strong", { children: g(qr(p, f)) })
+            ] }, p.key)) })
           ] })
         ]
       }
@@ -2706,7 +2729,7 @@ class Se extends Te {
   }
   source(r, i) {
     if (Gr(r)) return r;
-    const n = new A(r, { owner: this, purpose: i });
+    const n = new O(r, { owner: this, purpose: i });
     return this.ownedSources.push(n), n;
   }
   pointerMove(r) {
@@ -2715,7 +2738,7 @@ 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(I(l), "line graph pointer moved");
   }
   cursorKeyDown(r) {
     const i = this.currentModel;
@@ -2730,35 +2753,35 @@ class Se extends Te {
       return;
     } else return;
     r.preventDefault();
-    const s = K(Math.max(i.minDay, Math.min(i.maxDay, n)));
+    const s = I(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 = z("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 = z("line");
+      l.classList.add("gridline"), U(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 = z("text");
+      u.classList.add("axismark"), U(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 = z("line");
+      l.classList.add("gridline"), U(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 = z("text");
+      u.classList.add("axismark"), U(u, {
         x: a.x,
         y: i.plotTop + i.plotHeight + 22,
         "text-anchor": "middle"
@@ -2766,16 +2789,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 = z("path");
+        u.classList.add("seriesarea"), u.setAttribute("fill", a.color), u.setAttribute("d", _r(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 = z("path");
+      l.classList.add("seriesline"), l.setAttribute("stroke", a.color), l.setAttribute("d", Et(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 = S(o), l = i.plotLeft + (a - i.minDay) / Math.max(1, i.maxDay - i.minDay) * i.plotWidth, u = z("line");
+      u.classList.add("cursor"), U(u, {
         x1: l,
         x2: l,
         y1: i.plotTop,
@@ -2785,7 +2808,7 @@ class Se extends Te {
     r.replaceChildren(s);
   }
 }
-c(Se, "liveProps", []), c(Se, "hostName", "line-graph"), c(Se, "css", G`
+c(Ee, "liveProps", []), c(Ee, "hostName", "line-graph"), c(Ee, "css", X`
         & {
             display: flex;
             min-width: 0;
@@ -2889,15 +2912,15 @@ c(Se, "liveProps", []), c(Se, "hostName", "line-graph"), c(Se, "css", G`
 function Gr(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 Xr = "http://www.w3.org/2000/svg";
+function z(t) {
+  return document.createElementNS(Xr, t);
 }
-function _(t, e) {
+function U(t, e) {
   for (const [r, i] of Object.entries(e))
     t.setAttribute(r, String(i));
 }
-class Xr {
+class Zr {
   constructor(e, r = {}) {
     c(this, "criteria");
     c(this, "presets");
@@ -2910,29 +2933,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 B)))
       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 = Qr(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)), {
+    Y(s, i, "Active split keys"), this.state$ = new O(ie(n, new Set(s)), {
       owner: this,
       purpose: "split selection state",
-      equals: Qr
-    }), this.orderEmitter = new z(
+      equals: ei
+    }), this.orderEmitter = new R(
       [this.state$],
       ([o]) => Object.freeze(
         o.order.map((a) => Ge(i, a))
       ),
       { owner: this, purpose: "ordered visualization criteria" }
-    ), this.order$ = this.orderEmitter, this.activeSplitsEmitter = new z(
+    ), this.order$ = this.orderEmitter, this.activeSplitsEmitter = new R(
       [this.state$],
       ([o]) => Object.freeze(o.order.filter((a) => o.active.has(a)).map((a) => Ge(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 O(null, {
       owner: this,
       purpose: "active visualization split preset"
     });
@@ -2941,7 +2964,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 Jr(this, r), this.activeEmitters.set(r, i)), i;
   }
   isActive(e) {
     return this.state$.get().active.has(this.requireKey(e));
@@ -2950,7 +2973,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),
+      ie(n.order, s),
       r ?? `${i} split toggled`
     );
   }
@@ -2962,7 +2985,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),
+      ie(l, s.active),
       i ?? `${n} split moved`
     );
   }
@@ -2976,14 +2999,14 @@ class Xr {
     );
   }
   setSplits(e, r, i) {
-    this.assertActive(), V(e, this.byKey, "Active split keys");
+    this.assertActive(), Y(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");
+    Y(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),
+      ie(o, n),
       i ?? "split selection replaced"
     );
   }
@@ -3010,10 +3033,10 @@ class Xr {
     if (this.disposed) throw new Error("Split selection model is disposed");
   }
 }
-function ui(t, e = {}) {
-  return new Xr(t, e);
+function hi(t, e = {}) {
+  return new Zr(t, e);
 }
-class Zr extends xe {
+class Jr extends ze {
   constructor(r, i) {
     super(r.isActive(i) ? "visible" : "hidden", {
       owner: r,
@@ -3045,7 +3068,7 @@ class Zr extends xe {
     });
   }
 }
-function Jr(t, e) {
+function Qr(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,14 +3078,14 @@ 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), Y(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 (Y(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 Y(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)
@@ -3073,17 +3096,17 @@ function Ge(t, e) {
   if (r == null) throw new Error(`Missing criterion "${e}"`);
   return r;
 }
-function re(t, e) {
+function ie(t, e) {
   return Object.freeze({ order: Object.freeze([...t]), active: new Set(e) });
 }
-function Qr(t, e) {
+function ei(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 ti = [
   ["☐", "hidden"],
   ["✓", "visible"]
 ];
-class ie extends Te {
+class ne extends Te {
   constructor() {
     super(...arguments);
     c(this, "draggingKey", null);
@@ -3104,9 +3127,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__ */ y(l, { children: [
+      r.presets.length === 0 ? null : /* @__PURE__ */ d(be, { header: s, children: /* @__PURE__ */ d("cap-presets", { children: r.presets.map((u) => /* @__PURE__ */ d(
+        ae,
         {
           label: u.label,
           pressed: a === u.key,
@@ -3116,9 +3139,9 @@ class ie extends Te {
         },
         u.key
       )) }) }),
-      /* @__PURE__ */ m(ge, { header: i, children: [
+      /* @__PURE__ */ y(be, { header: i, children: [
         /* @__PURE__ */ d("p", { children: n }),
-        /* @__PURE__ */ d("ol", { children: o.map((u) => /* @__PURE__ */ m(
+        /* @__PURE__ */ d("ol", { children: o.map((u) => /* @__PURE__ */ y(
           "li",
           {
             className: this.draggingKey === u.key ? "dragging" : void 0,
@@ -3127,9 +3150,9 @@ class ie extends Te {
             onClick: (h) => this.suppressDraggedClick(h),
             children: [
               /* @__PURE__ */ d(
-                ae,
+                le,
                 {
-                  symbols: ei,
+                  symbols: ti,
                   label: u.label,
                   valueEmitter: r.activeState(u.key)
                 }
@@ -3145,10 +3168,10 @@ class ie extends Te {
                     if (!h.altKey || h.key !== "ArrowUp" && h.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));
+                    const f = h.key === "ArrowUp" ? -1 : 1;
+                    if (r.moveBy(u.key, f, "split reordered by keyboard")) {
+                      const v = r.order$.get().findIndex(({ key: g }) => g === u.key) + 1;
+                      this.announce(`${u.label} moved to position ${v}`), queueMicrotask(() => this.focusHandle(u.key));
                     }
                   }
                 }
@@ -3208,7 +3231,7 @@ class ie extends Te {
       }
   }
 }
-c(ie, "liveProps", []), c(ie, "hostName", "split-selection-panel"), c(ie, "dependencies", [oe, ae, ge]), c(ie, "css", G`
+c(ne, "liveProps", []), c(ne, "hostName", "split-selection-panel"), c(ne, "dependencies", [ae, le, be]), c(ne, "css", X`
         & {
             display: grid;
             gap: var(--viz-space, 0.6rem);
@@ -3252,7 +3275,7 @@ c(ie, "liveProps", []), c(ie, "hostName", "split-selection-panel"), c(ie, "depen
         & ol {
             display: grid;
-            gap: 0.25rem;
+            gap: .33rem;
             padding: 0;
             list-style: none;
         }
@@ -3264,7 +3287,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 +3342,13 @@ c(ie, "liveProps", []), c(ie, "hostName", "split-selection-panel"), c(ie, "depen
             border: 0;
         }
     `);
-class hi {
+class di {
   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) => ri(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;
   }
@@ -3344,7 +3367,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) => Xe(r, Object.fromEntries(e.map((i) => {
       var n;
       return [
         i,
@@ -3362,14 +3385,14 @@ class hi {
       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 Xe(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(Br);
   }
 }
-function ti(t) {
+function ri(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 +3405,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 Xe(t, e, r) {
   return Object.freeze({
     ...t,
     values: Object.freeze(e),
@@ -3390,37 +3413,37 @@ function We(t, e, r) {
   });
 }
 export {
-  ee as BlockGraph,
-  It as BlockSelectionModel,
-  te as CategoryHidePanel,
+  _ as BlockGraph,
+  Bt as BlockSelectionModel,
+  re as CategoryHidePanel,
   de as CollapsibleOptionGroup,
-  I as GroupingCriterion,
-  Se as LineGraph,
-  hi as SeriesBuilder,
-  Xr as SplitSelectionModel,
-  ie as SplitSelectionPanel,
+  B as GroupingCriterion,
+  Ee as LineGraph,
+  di as SeriesBuilder,
+  Zr as SplitSelectionModel,
+  ne as SplitSelectionPanel,
   Nr as addCivilDays,
-  qr as areaPath,
-  we as buildBlockLayout,
-  _r as buildIntegerTicks,
-  Br as buildLineChartModel,
-  Xe as categoryColorVariables,
-  li as categoryCounts,
+  _r as areaPath,
+  ve as buildBlockLayout,
+  Ur as buildIntegerTicks,
+  Fr as buildLineChartModel,
+  Ze as categoryColorVariables,
+  ci 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
+  Br as compareCivilDates,
+  ui as createBlockSelection,
+  hi as createSplitSelection,
+  It as criterionSnapshot,
+  I as dayToCivilDate,
+  Mt as deriveCategories,
+  ai as derivedCriterion,
+  li as filterByHidden,
+  M as findBlock,
+  kt as flattenBlocks,
+  Et as linePath,
+  Pt as setsEqual,
+  oi as staticCriterion,
+  Ir as todayCivilDate,
+  qr as valueAtDate
 };
 //# sourceMappingURL=index.js.map