@graphysdk/react-renderer 1.9.0-beta.1789582064893 → 1.9.0-beta.1789633145847

package/dist/index.mjs

@@ -1,83 +1,83 @@
-import { $ as Dt, At as le, C as $t, Ct as ue, Et as me, F as Ht, Gt as he, Ht as xt, I as Mt, Kt as ne, M as Pt, Mt as Lt, N as Bt, Nt as Kt, St as K, Tt as U, Ut as Ot, Vt as At, Wt as Ut, a as jt, at as Ft, bt as Yt, c as Wt, ct as Vt, et as Xt, ft as zt, ht as Qt, i as Jt, jt as Zt, kt as er, mt as tr, n as rr, qt as A, r as nr, s as sr, st as or, t as ge, v as ir, wt as ar, yt as cr, zt as dr } from "./history-chords-S1G_f-FU.js";
+import { $ as _t, At as le, C as $t, Ct as ue, Et as me, F as Ht, Gt as he, Ht as Mt, I as xt, Kt as se, M as Pt, Mt as Lt, N as Bt, Nt as Kt, St as O, Tt as U, Ut as Ot, Vt as At, Wt as Ut, a as jt, at as Ft, bt as Yt, c as Wt, ct as Vt, et as Xt, ft as zt, ht as Qt, i as Jt, jt as Zt, kt as er, mt as tr, n as rr, qt as A, r as nr, s as sr, st as or, t as ge, v as ir, wt as ar, yt as cr, zt as dr } from "./history-chords-Bu0I5FG1.js";
 import { n as ur } from "./theme.contract.css-DaZ5UPN0.js";
-import { COMPILER_STAGE_KEYS as j, Geom as pe, GraphCompilationSession as fe, areEditTargetsEqual as ve, buildDiagnostic as V, createAnchorResolver as ye, createCompiler as Se, createGraphyBuilder as be, createStyleResolver as Ee, findAnnotation as Te, findLayerById as X, isCompilerCachingEnabled as Ne, resolveDefinition as Re, setCompilerCachingEnabled as Ce, toPercent as P } from "@graphysdk/viz-engine";
-import { Component as qe, useCallback as f, useEffect as H, useId as Ge, useImperativeHandle as ke, useMemo as $, useRef as z, useState as T, useSyncExternalStore as Ie } from "react";
-import { Fragment as we, jsx as d, jsxs as v } from "react/jsx-runtime";
-import { useStore as Q } from "zustand";
+import { COMPILER_STAGE_KEYS as j, Geom as pe, GraphCompilationSession as fe, areEditTargetsEqual as ve, buildDiagnostic as X, createAnchorResolver as ye, createCompiler as Se, createGraphyBuilder as be, createStyleResolver as Ee, findAnnotation as Te, findLayerById as z, isCompilerCachingEnabled as Ne, resolveDefinition as Re, setCompilerCachingEnabled as Ce, toPercent as L } from "@graphysdk/viz-engine";
+import { Component as qe, useCallback as f, useEffect as M, useId as Ge, useImperativeHandle as ke, useMemo as H, useRef as Q, useState as T, useSyncExternalStore as Ie } from "react";
+import { Fragment as we, jsx as c, jsxs as v } from "react/jsx-runtime";
+import { useStore as J } from "zustand";
 import { createStore as F } from "zustand/vanilla";
-import _e from "clsx";
-import './index.css';var De = "_1a5iqpb0", $e = "_1a5iqpb1";
-var He = "_1a5iqpb3", xe = "_1a5iqpb4", Me = "_1a5iqpb5";
-var J = ({ errors: e }) => {
-  const [t, ...r] = e;
+import De from "clsx";
+import './index.css';var _e = "_1a5iqpb0", $e = "_1a5iqpb1";
+var He = "_1a5iqpb3", Me = "_1a5iqpb4", xe = "_1a5iqpb5";
+var Z = ({ errors: e }) => {
+  const [t, ...n] = e;
   return /* @__PURE__ */ v("div", {
     role: "alert",
-    className: De,
+    className: _e,
     children: [
-      /* @__PURE__ */ d("strong", {
+      /* @__PURE__ */ c("strong", {
         className: $e,
         children: "This chart could not be rendered."
       }),
-      t && /* @__PURE__ */ d(Z, { diagnostic: t }),
-      r.length > 0 && /* @__PURE__ */ d("ul", {
+      t && /* @__PURE__ */ c(ee, { diagnostic: t }),
+      n.length > 0 && /* @__PURE__ */ c("ul", {
         className: "_1a5iqpb2",
-        children: r.map((n, o) => /* @__PURE__ */ d("li", { children: /* @__PURE__ */ d(Z, { diagnostic: n }) }, `${n.code}-${o}`))
+        children: n.map((r, o) => /* @__PURE__ */ c("li", { children: /* @__PURE__ */ c(ee, { diagnostic: r }) }, `${r.code}-${o}`))
       })
     ]
   });
-}, Z = ({ diagnostic: e }) => /* @__PURE__ */ v("div", {
+}, ee = ({ diagnostic: e }) => /* @__PURE__ */ v("div", {
   className: He,
   children: [
-    /* @__PURE__ */ d("span", {
-      className: xe,
+    /* @__PURE__ */ c("span", {
+      className: Me,
       children: e.code
     }),
-    /* @__PURE__ */ d("p", {
-      className: Me,
+    /* @__PURE__ */ c("p", {
+      className: xe,
       children: e.message
     }),
-    e.suggestion && /* @__PURE__ */ d("p", {
+    e.suggestion && /* @__PURE__ */ c("p", {
       className: "_1a5iqpb6",
       children: e.suggestion
     })
   ]
 });
 function Pe(e = [], t = []) {
-  return e.length === t.length && e.every((r, n) => Object.is(r, t[n]));
+  return e.length === t.length && e.every((n, r) => Object.is(n, t[r]));
 }
 var Le = class extends qe {
   constructor(...e) {
     super(...e), this.state = { caughtDiagnostic: null };
   }
   static getDerivedStateFromError(e) {
-    return { caughtDiagnostic: V(e) };
+    return { caughtDiagnostic: X(e) };
   }
   componentDidCatch(e, t) {
-    const r = V(e);
-    A([r]), this.props.onError?.([r]), console.error("Chart render component stack:", t.componentStack);
+    const n = X(e);
+    A([n]), this.props.onError?.([n]), console.error("Chart render component stack:", t.componentStack);
   }
   componentDidUpdate(e) {
     this.state.caughtDiagnostic && !Pe(e.resetKeys, this.props.resetKeys) && this.setState({ caughtDiagnostic: null });
   }
   render() {
     const { caughtDiagnostic: e } = this.state;
-    if (e) return /* @__PURE__ */ d(J, { errors: [e] });
-    const { forcedErrors: t, children: r } = this.props;
-    return t && t.length > 0 ? /* @__PURE__ */ d(J, { errors: t }) : r;
+    if (e) return /* @__PURE__ */ c(Z, { errors: [e] });
+    const { forcedErrors: t, children: n } = this.props;
+    return t && t.length > 0 ? /* @__PURE__ */ c(Z, { errors: t }) : n;
   }
-}, se = (e) => typeof e == "object" && "geom" in e && "render" in e, Be = (e) => {
+}, oe = (e) => typeof e == "object" && "geom" in e && "render" in e, Be = (e) => {
   const t = Re(e);
   return t instanceof pe ? t : null;
 }, Ke = (e, t) => {
-  const r = e.filter((n) => Oe(n, t));
-  return r.length === e.length ? e : r;
-}, Oe = (e, t) => e.kind === "annotation" ? Te(t.annotations, e.id) !== null : e.kind === "observations" ? X(t.layers, e.layerId) !== void 0 : e.kind === "layer" && e.layerId !== void 0 ? X(t.layers, e.layerId) !== void 0 : !0, ee = [], Ae = () => F((e) => ({
-  selection: ee,
-  setSelection: (t) => e((r) => Ue(r.selection, t) ? r : { selection: t }),
-  clearSelection: () => e((t) => t.selection.length === 0 ? t : { selection: ee })
-})), Ue = (e, t) => e === t ? !0 : e.length !== t.length ? !1 : e.every((r, n) => {
-  const o = t[n];
-  return o !== void 0 && ve(r, o);
+  const n = e.filter((r) => Oe(r, t));
+  return n.length === e.length ? e : n;
+}, Oe = (e, t) => e.kind === "annotation" ? Te(t.annotations, e.id) !== null : e.kind === "observations" ? z(t.layers, e.layerId) !== void 0 : e.kind === "layer" && e.layerId !== void 0 ? z(t.layers, e.layerId) !== void 0 : !0, te = [], Ae = () => F((e) => ({
+  selection: te,
+  setSelection: (t) => e((n) => Ue(n.selection, t) ? n : { selection: t }),
+  clearSelection: () => e((t) => t.selection.length === 0 ? t : { selection: te })
+})), Ue = (e, t) => e === t ? !0 : e.length !== t.length ? !1 : e.every((n, r) => {
+  const o = t[r];
+  return o !== void 0 && ve(n, o);
 }), je = process.env.NODE_ENV !== "production", Fe = 5, Ye = (e) => {
   if (!je) return {
     emit: () => {
@@ -88,19 +88,19 @@ var Le = class extends qe {
     getCacheStats: () => e.getCacheStats()
   };
   const t = /* @__PURE__ */ new Set();
-  let r = null;
+  let n = null;
   return {
-    emit: (n) => {
+    emit: (r) => {
       const o = e.getLastCompile();
       if (o) {
-        r = n;
-        for (const a of t) a(n, o);
+        n = r;
+        for (const a of t) a(r, o);
       }
     },
-    subscribe: (n) => (t.add(n), () => {
-      t.delete(n);
+    subscribe: (r) => (t.add(r), () => {
+      t.delete(r);
     }),
-    getLastTrigger: () => r,
+    getLastTrigger: () => n,
     getLastCompile: () => e.getLastCompile(),
     getCacheStats: () => e.getCacheStats()
   };
@@ -109,19 +109,20 @@ var Le = class extends qe {
   history: [],
   nextId: 1,
   lastSnapshot: null,
-  recordCompile: (t, r) => e((n) => {
-    if (n.lastSnapshot === r) return n;
+  recordCompile: (t, n) => e((r) => {
+    if (r.lastSnapshot === n) return r;
     const o = {
-      id: n.nextId,
+      id: r.nextId,
       label: Xe(t),
-      stages: r.stages,
-      durationMs: r.durationMs
+      stages: n.stages,
+      stageDurationsMs: n.stageDurationsMs,
+      durationMs: n.durationMs
     };
     return {
       lastCompile: o,
-      history: ze(n.history, o, Fe),
-      nextId: n.nextId + 1,
-      lastSnapshot: r
+      history: ze(r.history, o, Fe),
+      nextId: r.nextId + 1,
+      lastSnapshot: n
     };
   })
 })), Ve = () => {
@@ -136,15 +137,15 @@ var Le = class extends qe {
     case "command":
       return e.command.metadata.description;
   }
-}, ze = (e, t, r) => {
-  const n = e.length >= r ? e.length - (r - 1) : 0;
-  return [...e.slice(n), t];
+}, ze = (e, t, n) => {
+  const r = e.length >= n ? e.length - (n - 1) : 0;
+  return [...e.slice(r), t];
 };
 function Qe(e) {
-  const t = e.filter(se), r = /* @__PURE__ */ new Set([...Object.keys(me), ...t.map((c) => c.geom)]), n = [], o = /* @__PURE__ */ new Set();
-  for (const c of e) {
-    const u = Be(c);
-    u === null || r.has(u.type) || o.has(u.type) || (o.add(u.type), n.push({
+  const t = e.filter(oe), n = /* @__PURE__ */ new Set([...Object.keys(me), ...t.map((d) => d.geom)]), r = [], o = /* @__PURE__ */ new Set();
+  for (const d of e) {
+    const u = Be(d);
+    u === null || n.has(u.type) || o.has(u.type) || (o.add(u.type), r.push({
       kind: "user-input",
       severity: "error",
       code: "MISSING_GEOM_RENDERER",
@@ -157,55 +158,55 @@ function Qe(e) {
     }));
   }
   const a = /* @__PURE__ */ new Map();
-  for (const c of t) {
-    if ("definition" in c) continue;
-    const u = `${c.geom}|${c.coord}`, m = a.get(u);
+  for (const d of t) {
+    if ("definition" in d) continue;
+    const u = `${d.geom}|${d.coord}`, m = a.get(u);
     m ? m.count += 1 : a.set(u, {
-      geom: c.geom,
-      coord: c.coord,
+      geom: d.geom,
+      coord: d.coord,
       count: 1
     });
   }
   const i = [];
-  for (const { geom: c, coord: u, count: m } of a.values())
+  for (const { geom: d, coord: u, count: m } of a.values())
     m < 2 || i.push({
       kind: "user-input",
       severity: "warning",
       code: "DUPLICATE_REGISTERED_TYPE",
-      message: `Multiple render-only overrides register ('${c}', '${u}') (${m} entries); the last in the array wins.`,
+      message: `Multiple render-only overrides register ('${d}', '${u}') (${m} entries); the last in the array wins.`,
       context: {
-        requested: `${c}@${u}`,
+        requested: `${d}@${u}`,
         kind: "geom-renderer"
       },
-      suggestion: `Keep a single render-only override for ('${c}', '${u}').`
+      suggestion: `Keep a single render-only override for ('${d}', '${u}').`
     });
   return {
-    errors: n,
+    errors: r,
     warnings: i
   };
 }
 function Je(e, t) {
-  const { coordSystem: r, layers: n } = e, o = /* @__PURE__ */ new Set(), a = [];
-  for (const i of n)
-    t(i.geom, r.type) !== null || o.has(i.geom) || (o.add(i.geom), a.push({
+  const { coordSystem: n, layers: r } = e, o = /* @__PURE__ */ new Set(), a = [];
+  for (const i of r)
+    t(i.geom, n.type) !== null || o.has(i.geom) || (o.add(i.geom), a.push({
       kind: "user-input",
       severity: "warning",
       code: "MISSING_GEOM_RENDERER",
-      message: `No renderer for geom '${i.geom}' under ${r.type} coords; the layer is not painted.`,
+      message: `No renderer for geom '${i.geom}' under ${n.type} coords; the layer is not painted.`,
       context: {
         requested: i.geom,
         kind: "geom-renderer"
       },
-      suggestion: `Register a renderer for ('${i.geom}', '${r.type}') via \`defineGeomRenderer\`.`
+      suggestion: `Register a renderer for ('${i.geom}', '${n.type}') via \`defineGeomRenderer\`.`
     }));
   return a;
 }
 function Ze(e, t) {
-  const { coordSystem: r, layers: n } = e, o = /* @__PURE__ */ new Set(), a = [];
-  for (const i of n) {
+  const { coordSystem: n, layers: r } = e, o = /* @__PURE__ */ new Set(), a = [];
+  for (const i of r) {
     if (i.interactive === !1 || i.spatialKind !== "render-hit-test" || o.has(i.geom)) continue;
-    const c = t(i.geom, r.type);
-    c === null || c.hitTest || U(c) || (o.add(i.geom), a.push({
+    const d = t(i.geom, n.type);
+    d === null || d.hitTest || U(d) || (o.add(i.geom), a.push({
       kind: "user-input",
       severity: "warning",
       code: "MISSING_RENDER_HIT_TEST",
@@ -214,35 +215,35 @@ function Ze(e, t) {
         requested: i.geom,
         kind: "geom-renderer"
       },
-      suggestion: `Add a \`hitTest\` factory (precomputed geometry) or an overlay render (\`{ fn, options: { overlay: true } }\`, live simulation) to the renderer for ('${i.geom}', '${r.type}').`
+      suggestion: `Add a \`hitTest\` factory (precomputed geometry) or an overlay render (\`{ fn, options: { overlay: true } }\`, live simulation) to the renderer for ('${i.geom}', '${n.type}').`
     }));
   }
   return a;
 }
 function et(e) {
-  const t = /* @__PURE__ */ new Set(), r = [];
-  for (const n of e.layers) {
-    const o = n.identityKey;
-    n.interactive !== !1 && (n.spatialKind !== "render-hit-test" || typeof o != "object" || t.has(n.geom) || n.data.hasVariable(o.variable) || (t.add(n.geom), r.push({
+  const t = /* @__PURE__ */ new Set(), n = [];
+  for (const r of e.layers) {
+    const o = r.identityKey;
+    r.interactive !== !1 && (r.spatialKind !== "render-hit-test" || typeof o != "object" || t.has(r.geom) || r.data.hasVariable(o.variable) || (t.add(r.geom), n.push({
       kind: "user-input",
       severity: "warning",
       code: "RENDER_HIT_TEST_IDENTITY",
-      message: `Geom '${n.geom}' keys its identity on '${o.variable}', a column its compile output does not emit; its hover lookup is empty.`,
+      message: `Geom '${r.geom}' keys its identity on '${o.variable}', a column its compile output does not emit; its hover lookup is empty.`,
       context: {
-        requested: n.geom,
+        requested: r.geom,
         kind: "geom-renderer"
       },
       suggestion: `Emit the '${o.variable}' column from the geom's \`compile()\`, or point \`identityKey\` at a column it does emit.`
     })));
   }
-  return r;
+  return n;
 }
 function tt(e, t) {
-  const { coordSystem: r, layers: n } = e, o = /* @__PURE__ */ new Set(), a = [];
-  for (const i of n) {
+  const { coordSystem: n, layers: r } = e, o = /* @__PURE__ */ new Set(), a = [];
+  for (const i of r) {
     if (i.interactive === !1 || i.spatialKind !== "render-hit-test" || o.has(i.geom)) continue;
-    const c = t(i.geom, r.type);
-    c === null || !c.hitTest || !U(c) || (o.add(i.geom), a.push({
+    const d = t(i.geom, n.type);
+    d === null || !d.hitTest || !U(d) || (o.add(i.geom), a.push({
       kind: "user-input",
       severity: "warning",
       code: "CONFLICTING_RENDER_HIT_TEST",
@@ -257,9 +258,9 @@ function tt(e, t) {
   return a;
 }
 function rt(e, t) {
-  const r = /* @__PURE__ */ new Set(), n = [];
+  const n = /* @__PURE__ */ new Set(), r = [];
   for (const o of e.layers)
-    o.interactive !== !1 && (o.spatialKind !== "render-hit-test" || r.has(o.geom) || t.hasCapability(o.geom) || (r.add(o.geom), n.push({
+    o.interactive !== !1 && (o.spatialKind !== "render-hit-test" || n.has(o.geom) || t.hasCapability(o.geom) || (n.add(o.geom), r.push({
       kind: "user-input",
       severity: "warning",
       code: "MISSING_ANCHOR_CAPABILITY",
@@ -270,14 +271,14 @@ function rt(e, t) {
       },
       suggestion: "Implement `resolveAnchorPosition(observation, context)` on the geom, returning the normalised panel position an annotation on that observation belongs at."
     })));
-  return n;
+  return r;
 }
 function nt(e, t) {
-  const { coordSystem: r, layers: n } = e, o = /* @__PURE__ */ new Set(), a = [];
-  for (const i of n) {
+  const { coordSystem: n, layers: r } = e, o = /* @__PURE__ */ new Set(), a = [];
+  for (const i of r) {
     if (i.interactive === !1 || i.spatialKind === "render-hit-test" || o.has(i.geom)) continue;
-    const c = t(i.geom, r.type);
-    c === null || !U(c) || (o.add(i.geom), a.push({
+    const d = t(i.geom, n.type);
+    d === null || !U(d) || (o.add(i.geom), a.push({
       kind: "user-input",
       severity: "warning",
       code: "OVERLAY_REQUIRES_RENDER_HIT_TEST",
@@ -293,15 +294,15 @@ function nt(e, t) {
 }
 var st = (e) => F((t) => ({
   scene: e,
-  setScene: (r) => t((n) => n.scene === r ? n : { scene: r })
-})), ot = ({ spec: e, data: t, customPalettes: r, colorScheme: n, plugins: o, resolveRenderer: a, anchorResolver: i, onSpecChange: c, onError: u, onWarnings: m }) => {
-  const N = K(c), k = K(u), q = K(m), [{ session: h, compileBus: l }] = T(() => {
+  setScene: (n) => t((r) => r.scene === n ? r : { scene: n })
+})), ot = ({ spec: e, data: t, customPalettes: n, colorScheme: r, plugins: o, resolveRenderer: a, anchorResolver: i, onSpecChange: d, onError: u, onWarnings: m }) => {
+  const N = O(d), k = O(u), q = O(m), [{ session: h, compileBus: l }] = T(() => {
     const s = Se({ plugins: o });
     return {
       session: new fe(s),
       compileBus: Ye(s)
     };
-  }), [p] = T(() => Qe(o ?? [])), y = z(null), [I] = T(it), R = z(null), S = f((s) => p.errors.length === 0 ? s : [...p.errors, ...s ?? []], [p]), _ = f((s) => {
+  }), [p] = T(() => Qe(o ?? [])), y = Q(null), [I] = T(it), R = Q(null), S = f((s) => p.errors.length === 0 ? s : [...p.errors, ...s ?? []], [p]), D = f((s) => {
     if (!s.ok) return s.errors;
     if (R.current) R.current.getState().setScene(s.scene);
     else {
@@ -309,14 +310,14 @@ var st = (e) => F((t) => ({
       g.subscribe(I.notify), R.current = g, I.notify();
     }
     return null;
-  }, [I]), [x, D] = T(() => {
+  }, [I]), [x, _] = T(() => {
     const s = h.compile({
       spec: e,
       data: t,
-      customPalettes: r,
-      colorScheme: n
+      customPalettes: n,
+      colorScheme: r
     });
-    return y.current = s, S(_(s));
+    return y.current = s, S(D(s));
   }), G = f((s) => s.ok ? [
     ...s.warnings,
     ...Je(s.scene, a),
@@ -330,7 +331,7 @@ var st = (e) => F((t) => ({
   }, [k]), C = f((s) => {
     s.length !== 0 && (A(s), q.current?.(s));
   }, [q]);
-  H(() => {
+  M(() => {
     const s = y.current;
     s && (b([...p.errors, ...s.ok ? [] : s.errors]), C([...p.warnings, ...G(s)]), s.ok && l.emit({ kind: "init" }));
   }, [
@@ -339,25 +340,25 @@ var st = (e) => F((t) => ({
     C,
     p,
     G
-  ]), H(() => {
+  ]), M(() => {
     const s = h.update({
       spec: e,
       data: t,
-      customPalettes: r,
-      colorScheme: n
+      customPalettes: n,
+      colorScheme: r
     });
     if (!s) return;
     s.committedSpec && N.current?.(s.committedSpec);
-    const g = _(s.result);
-    D(S(g)), g && b(g), C(G(s.result)), g || l.emit({ kind: s.specChanged ? "spec" : "data" });
+    const g = D(s.result);
+    _(S(g)), g && b(g), C(G(s.result)), g || l.emit({ kind: s.specChanged ? "spec" : "data" });
   }, [
     e,
     t,
-    r,
     n,
+    r,
     h,
     l,
-    _,
+    D,
     b,
     C,
     S,
@@ -365,12 +366,12 @@ var st = (e) => F((t) => ({
     N
   ]);
   const w = f((s) => {
-    D((g) => g === null ? g : S(null)), C(G(s));
+    _((g) => g === null ? g : S(null)), C(G(s));
   }, [
     S,
     C,
     G
-  ]), M = f((s) => {
+  ]), P = f((s) => {
     s.scene && R.current?.getState().setScene(s.scene), s.result && w(s.result), s.command && l.emit({
       kind: "command",
       command: s.command
@@ -381,24 +382,24 @@ var st = (e) => F((t) => ({
     N,
     b
   ]), E = f((s) => {
-    for (const g of s) M(g);
+    for (const g of s) P(g);
     return s.some((g) => !!g.scene);
-  }, [M]), B = f((s, g) => {
+  }, [P]), K = f((s, g) => {
     E(h.applyCommand(s, g));
   }, [h, E]), ae = f(() => {
     E(h.commit());
-  }, [h, E]), Y = f(() => E(h.undo()), [h, E]), W = f(() => E(h.redo()), [h, E]), ce = $(() => ({
+  }, [h, E]), W = f(() => E(h.undo()), [h, E]), V = f(() => E(h.redo()), [h, E]), ce = H(() => ({
     stack: h.history,
-    undo: Y,
-    redo: W
+    undo: W,
+    redo: V
   }), [
     h,
-    Y,
-    W
+    W,
+    V
   ]), de = f(() => R.current?.getState().scene ?? null, []);
   return {
     store: R.current,
-    dispatch: B,
+    dispatch: K,
     commit: ae,
     history: ce,
     subscribe: I.subscribe,
@@ -414,28 +415,28 @@ var st = (e) => F((t) => ({
     }),
     notify: () => e.forEach((t) => t())
   };
-}, at = ({ data: e, spec: t, plugins: r = [], formattingLocale: n, handleRef: o, onSpecChange: a, onError: i, onWarnings: c, customPalettes: u, colorScheme: m = "light", children: N }) => {
-  const [k] = T(() => ue(r.filter(se))), q = Ge(), [h] = T(() => ye(r)), [l] = T(() => Ae()), p = $(() => Ee({ colorScheme: m }), [m]), { store: y, dispatch: I, commit: R, history: S, subscribe: _, getScene: x, compileBus: D, compileErrors: G } = ot({
+}, at = ({ data: e, spec: t, plugins: n = [], formattingLocale: r, handleRef: o, onSpecChange: a, onError: i, onWarnings: d, customPalettes: u, colorScheme: m = "light", children: N }) => {
+  const [k] = T(() => ue(n.filter(oe))), q = Ge(), [h] = T(() => ye(n)), [l] = T(() => Ae()), p = H(() => Ee({ colorScheme: m }), [m]), { store: y, dispatch: I, commit: R, history: S, subscribe: D, getScene: x, compileBus: _, compileErrors: G } = ot({
     spec: t,
     data: e,
     customPalettes: u,
     colorScheme: m,
-    plugins: r,
+    plugins: n,
     resolveRenderer: k,
     anchorResolver: h,
     onSpecChange: a,
     onError: i,
-    onWarnings: c
+    onWarnings: d
   });
-  H(() => {
+  M(() => {
     if (y)
-      return y.subscribe((w, M) => {
-        if (w.scene.spec === M.scene.spec) return;
-        const { selection: E, setSelection: B } = l.getState();
-        E.length !== 0 && B(Ke(E, w.scene.spec));
+      return y.subscribe((w, P) => {
+        if (w.scene.spec === P.scene.spec) return;
+        const { selection: E, setSelection: K } = l.getState();
+        E.length !== 0 && K(Ke(E, w.scene.spec));
       });
   }, [y, l]);
-  const b = $(() => ({
+  const b = H(() => ({
     dispatch: I,
     commit: R
   }), [I, R]);
@@ -443,7 +444,7 @@ var st = (e) => F((t) => ({
     commands: b,
     undo: S.undo,
     redo: S.redo,
-    subscribe: _,
+    subscribe: D,
     getScene: x,
     getSelection: () => l.getState().selection,
     setSelection: (w) => l.getState().setSelection(w),
@@ -451,18 +452,18 @@ var st = (e) => F((t) => ({
   }), [
     b,
     S,
-    _,
+    D,
     x,
     l
   ]);
-  const C = $(() => y ? {
+  const C = H(() => y ? {
     chartId: q,
     store: y,
     selectionStore: l,
     commands: b,
     history: S,
-    formattingLocale: n,
-    compileBus: D,
+    formattingLocale: r,
+    compileBus: _,
     colorScheme: m,
     styleResolver: p,
     anchorResolver: h
@@ -472,19 +473,19 @@ var st = (e) => F((t) => ({
     l,
     b,
     S,
-    n,
-    D,
+    r,
+    _,
     m,
     p,
     h
   ]);
-  return /* @__PURE__ */ d(Le, {
+  return /* @__PURE__ */ c(Le, {
     forcedErrors: G,
     onError: i,
     resetKeys: [t, e],
-    children: C ? /* @__PURE__ */ d(he.Provider, {
+    children: C ? /* @__PURE__ */ c(he.Provider, {
       value: C,
-      children: /* @__PURE__ */ d(le, {
+      children: /* @__PURE__ */ c(le, {
         value: k,
         children: N
       })
@@ -495,13 +496,13 @@ function yr(e) {
   const t = be(e);
   return {
     ...t,
-    GraphProvider: (n) => /* @__PURE__ */ d(at, {
-      ...n,
+    GraphProvider: (r) => /* @__PURE__ */ c(at, {
+      ...r,
       plugins: t.plugins
     })
   };
 }
-var Sr = ({ children: e, ...t }) => /* @__PURE__ */ d("svg", {
+var Sr = ({ children: e, ...t }) => /* @__PURE__ */ c("svg", {
   viewBox: "0 0 1 1",
   preserveAspectRatio: "none",
   width: "100%",
@@ -509,40 +510,40 @@ var Sr = ({ children: e, ...t }) => /* @__PURE__ */ d("svg", {
   pointerEvents: "none",
   ...t,
   children: e
-}), br = ({ box: e, children: t }) => /* @__PURE__ */ d("svg", {
-  x: P(e.x0),
-  y: P(e.y0),
-  width: P(e.x1 - e.x0),
-  height: P(e.y1 - e.y0),
+}), br = ({ box: e, children: t }) => /* @__PURE__ */ c("svg", {
+  x: L(e.x0),
+  y: L(e.y0),
+  width: L(e.x1 - e.x0),
+  height: L(e.y1 - e.y0),
   overflow: "hidden",
   pointerEvents: "none",
   children: t
-}), ct = "drqe3u0", dt = "drqe3u1", lt = "drqe3u2", ut = "drqe3u3", L = "drqe3u4", mt = "drqe3u5", ht = "drqe3u6", gt = "drqe3u7", O = "drqe3u8", pt = "drqe3u9", ft = "drqe3ua";
+}), ct = "drqe3u0", dt = "drqe3u1", lt = "drqe3u2", ut = "drqe3u3", $ = "drqe3u4", mt = "drqe3u5", ht = "drqe3u6", gt = "drqe3u7", B = "drqe3u8", pt = "drqe3u9", ft = "drqe3ua";
 var vt = "drqe3uc", yt = "drqe3ud", St = "drqe3ue", bt = "drqe3uf";
-var Et = "drqe3uh", Tt = "drqe3ui", te = {
+var Et = "drqe3uh", Tt = "drqe3ui", re = {
   enabled: "drqe3uk drqe3uj",
   disabled: "drqe3ul drqe3uj"
-}, re = {
+}, ne = {
   ran: "drqe3un drqe3um",
   dim: "drqe3uo drqe3um"
-}, oe = {
+}, ie = {
   ran: "drqe3uq drqe3up",
   cached: "drqe3ur drqe3up",
   untouched: "drqe3us drqe3up"
-}, Er = ({ width: e = 380, style: t, className: r } = {}) => {
-  const { compileBus: n } = ne(), [o] = T(() => We()), [a, i] = T(!1), [c, u] = T(Ne);
-  H(() => {
-    const { recordCompile: l } = o.getState(), p = n.getLastTrigger(), y = n.getLastCompile();
-    return p && y && l(p, y), n.subscribe(l);
-  }, [o, n]);
-  const m = Q(o, (l) => l.lastCompile), N = Q(o, (l) => l.history), k = n.getCacheStats(), q = m === null && N.length === 0, h = () => {
+}, Er = ({ width: e = 440, style: t, className: n } = {}) => {
+  const { compileBus: r } = se(), [o] = T(() => We()), [a, i] = T(!1), [d, u] = T(Ne);
+  M(() => {
+    const { recordCompile: l } = o.getState(), p = r.getLastTrigger(), y = r.getLastCompile();
+    return p && y && l(p, y), r.subscribe(l);
+  }, [o, r]);
+  const m = J(o, (l) => l.lastCompile), N = J(o, (l) => l.history), k = r.getCacheStats(), q = m === null && N.length === 0, h = () => {
     u((l) => {
       const p = !l;
       return Ce(p), p;
     });
   };
   return /* @__PURE__ */ v("div", {
-    className: _e(ft, r),
+    className: De(ft, n),
     style: {
       width: e,
       ...t
@@ -550,13 +551,13 @@ var Et = "drqe3uh", Tt = "drqe3ui", te = {
     children: [
       /* @__PURE__ */ v("div", {
         className: ct,
-        children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ d("div", {
+        children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ c("div", {
           className: dt,
           children: "compile cache"
-        }), /* @__PURE__ */ d("div", {
+        }), /* @__PURE__ */ c("div", {
           className: St,
-          children: q ? "production: stats disabled" : m ? `last: ${m.label} · ${ie(m.durationMs)}` : "awaiting first compile…"
-        })] }), /* @__PURE__ */ d("button", {
+          children: q ? "production: stats disabled" : m ? `last: ${m.label} · ${Y(m.durationMs)}` : "awaiting first compile…"
+        })] }), /* @__PURE__ */ c("button", {
           type: "button",
           onClick: () => i((l) => !l),
           className: bt,
@@ -568,96 +569,105 @@ var Et = "drqe3uh", Tt = "drqe3ui", te = {
         children: [/* @__PURE__ */ v("button", {
           type: "button",
           onClick: h,
-          className: c ? te.enabled : te.disabled,
-          "aria-pressed": c,
-          children: ["cache ", c ? "enabled" : "disabled"]
-        }), /* @__PURE__ */ d("span", {
+          className: d ? re.enabled : re.disabled,
+          "aria-pressed": d,
+          children: ["cache ", d ? "enabled" : "disabled"]
+        }), /* @__PURE__ */ c("span", {
           className: "drqe3ug",
           children: "next compile reflects this toggle"
         })]
       }),
-      !a && !q && /* @__PURE__ */ v(we, { children: [/* @__PURE__ */ d(Nt, {
+      !a && !q && /* @__PURE__ */ v(we, { children: [/* @__PURE__ */ c(Nt, {
         delta: m?.stages,
+        durations: m?.stageDurationsMs,
         cumulative: k
-      }), /* @__PURE__ */ d(Rt, { entries: N })] })
+      }), /* @__PURE__ */ c(Rt, { entries: N })] })
     ]
   });
-}, Nt = ({ delta: e, cumulative: t }) => /* @__PURE__ */ v("table", {
+}, Nt = ({ delta: e, durations: t, cumulative: n }) => /* @__PURE__ */ v("table", {
   className: lt,
-  children: [/* @__PURE__ */ d("thead", { children: /* @__PURE__ */ v("tr", {
+  children: [/* @__PURE__ */ c("thead", { children: /* @__PURE__ */ v("tr", {
     className: Et,
     children: [
-      /* @__PURE__ */ d("th", {
+      /* @__PURE__ */ c("th", {
         className: ut,
         children: "stage"
       }),
-      /* @__PURE__ */ d("th", {
-        className: L,
+      /* @__PURE__ */ c("th", {
+        className: $,
+        children: "time"
+      }),
+      /* @__PURE__ */ c("th", {
+        className: $,
         children: "Δ miss"
       }),
-      /* @__PURE__ */ d("th", {
-        className: L,
+      /* @__PURE__ */ c("th", {
+        className: $,
         children: "Δ hit"
       }),
-      /* @__PURE__ */ d("th", {
-        className: L,
+      /* @__PURE__ */ c("th", {
+        className: $,
         children: "total miss"
       }),
-      /* @__PURE__ */ d("th", {
-        className: L,
+      /* @__PURE__ */ c("th", {
+        className: $,
         children: "total hit"
       })
     ]
-  }) }), /* @__PURE__ */ d("tbody", { children: j.map((r) => {
-    const n = e?.[r], o = Ct(n);
+  }) }), /* @__PURE__ */ c("tbody", { children: j.map((r) => {
+    const o = e?.[r], a = Ct(o);
     return /* @__PURE__ */ v("tr", {
       className: vt,
       children: [
         /* @__PURE__ */ v("td", {
           className: mt,
           children: [
-            /* @__PURE__ */ d("span", {
-              className: oe[o],
+            /* @__PURE__ */ c("span", {
+              className: ie[a],
               "aria-hidden": !0
             }),
             " ",
             r
           ]
         }),
-        /* @__PURE__ */ d("td", {
-          className: o === "ran" ? re.ran : re.dim,
-          children: n?.misses ?? 0
+        /* @__PURE__ */ c("td", {
+          className: B,
+          children: t === void 0 || a === "untouched" ? "—" : Y(t[r])
         }),
-        /* @__PURE__ */ d("td", {
-          className: O,
-          children: n?.hits ?? 0
+        /* @__PURE__ */ c("td", {
+          className: a === "ran" ? ne.ran : ne.dim,
+          children: o?.misses ?? 0
         }),
-        /* @__PURE__ */ d("td", {
-          className: O,
-          children: t[r].misses
+        /* @__PURE__ */ c("td", {
+          className: B,
+          children: o?.hits ?? 0
         }),
-        /* @__PURE__ */ d("td", {
-          className: O,
-          children: t[r].hits
+        /* @__PURE__ */ c("td", {
+          className: B,
+          children: n[r].misses
+        }),
+        /* @__PURE__ */ c("td", {
+          className: B,
+          children: n[r].hits
         })
       ]
     }, r);
   }) })]
 }), Rt = ({ entries: e }) => e.length === 0 ? null : /* @__PURE__ */ v("div", {
   className: yt,
-  children: [/* @__PURE__ */ d("div", {
+  children: [/* @__PURE__ */ c("div", {
     className: Tt,
     children: "recent compiles"
   }), e.map((t) => {
-    const r = qt(t.stages, (a) => a.misses > 0), n = j.length;
+    const n = qt(t.stages, (a) => a.misses > 0), r = j.length;
     return /* @__PURE__ */ v("div", {
       className: ht,
       children: [
-        /* @__PURE__ */ d("span", {
-          className: oe[r === 0 ? "cached" : "ran"],
+        /* @__PURE__ */ c("span", {
+          className: ie[n === 0 ? "cached" : "ran"],
           "aria-hidden": !0
         }),
-        /* @__PURE__ */ d("span", {
+        /* @__PURE__ */ c("span", {
           className: gt,
           title: t.label,
           children: t.label
@@ -665,30 +675,30 @@ var Et = "drqe3uh", Tt = "drqe3ui", te = {
         /* @__PURE__ */ v("span", {
           className: pt,
           children: [
-            r,
-            "/",
             n,
+            "/",
+            r,
             " ran · ",
-            ie(t.durationMs)
+            Y(t.durationMs)
           ]
         })
       ]
     }, t.id);
   })]
 }), Ct = (e) => !e || e.hits === 0 && e.misses === 0 ? "untouched" : e.misses > 0 ? "ran" : "cached", qt = (e, t) => {
-  let r = 0;
-  for (const n of j) t(e[n]) && (r += 1);
-  return r;
-}, ie = (e) => e >= 10 ? `${e.toFixed(0)}ms` : `${e.toFixed(2)}ms`, Tr = () => {
-  const { history: e } = ne(), { stack: t, undo: r, redo: n } = e, o = f((c) => t.subscribe(c), [t]), a = f(() => t.getSnapshot(), [t]), i = Ie(o, a, a);
-  return $(() => ({
+  let n = 0;
+  for (const r of j) t(e[r]) && (n += 1);
+  return n;
+}, Y = (e) => e < 0.1 ? "<0.1ms" : e >= 10 ? `${e.toFixed(0)}ms` : `${e.toFixed(2)}ms`, Tr = () => {
+  const { history: e } = se(), { stack: t, undo: n, redo: r } = e, o = f((d) => t.subscribe(d), [t]), a = f(() => t.getSnapshot(), [t]), i = Ie(o, a, a);
+  return H(() => ({
     ...i,
-    undo: r,
-    redo: n
+    undo: n,
+    redo: r
   }), [
     i,
-    r,
-    n
+    n,
+    r
   ]);
 }, Gt = /* @__PURE__ */ new Set([
   "button",
@@ -702,22 +712,22 @@ var Et = "drqe3uh", Tt = "drqe3ui", te = {
   "reset",
   "submit"
 ]), Nr = (e, t = {}) => {
-  const { target: r, enabled: n = !0 } = t;
-  H(() => {
-    const o = kt(r);
-    if (!n || !o) return;
+  const { target: n, enabled: r = !0 } = t;
+  M(() => {
+    const o = kt(n);
+    if (!r || !o) return;
     const a = (i) => {
       if (!It(i) || i.defaultPrevented || wt(i.target)) return;
-      const c = ge(i);
-      if (!c) return;
+      const d = ge(i);
+      if (!d) return;
       const u = e.current;
-      u && (c === "undo" ? u.undo() : u.redo()) && i.preventDefault();
+      u && (d === "undo" ? u.undo() : u.redo()) && i.preventDefault();
     };
     return o.addEventListener("keydown", a), () => o.removeEventListener("keydown", a);
   }, [
     e,
-    r,
-    n
+    n,
+    r
   ]);
 }, kt = (e) => e === void 0 ? window : e !== null && "current" in e ? e.current : e, It = (e) => "key" in e, wt = (e) => e instanceof HTMLInputElement ? !Gt.has(e.type) : e instanceof HTMLElement ? e.isContentEditable || e.tagName === "TEXTAREA" : !1;
 export {
@@ -727,11 +737,11 @@ export {
   sr as DefaultGrid,
   Pt as DefaultHeader,
   er as DefaultSwatch,
-  Dt as DefaultTooltip,
+  _t as DefaultTooltip,
   Er as DevToolsPanel,
   zt as GRAPH_MODES,
   Le as GraphErrorBoundary,
-  J as GraphErrorPanel,
+  Z as GraphErrorPanel,
   at as GraphProvider,
   jt as GraphRenderer,
   Yt as HoverProvider,
@@ -745,7 +755,7 @@ export {
   Vt as lightTheme,
   dr as lightenCss,
   Ke as pruneSelection,
-  Mt as resolveBrandMarkVisual,
+  xt as resolveBrandMarkVisual,
   $t as stampGridEditTarget,
   Qt as useElementScreenRect,
   cr as useGeomHitTest,
@@ -760,7 +770,7 @@ export {
   Xt as useHoverState,
   Ut as useSceneSelector,
   At as useStyleReaderTree,
-  xt as useStyleReaders,
+  Mt as useStyleReaders,
   Ot as useStyleResolver,
   Lt as useTextMeasurer,
   ur as vars