umwelt-js 0.1.0

package/dist/index.js

@@ -0,0 +1,1867 @@
+import { createComponent as g, template as A, use as xt, delegateEvents as We, insert as k, effect as q, setAttribute as Re, memo as le, className as _t, render as Nt } from "solid-js/web";
+import { createContext as W, createSignal as C, useContext as Z, createEffect as F, onCleanup as J, createMemo as _, Switch as Pt, Match as Ie, For as ee, onMount as Ze, Show as Qe } from "solid-js";
+import { isMultiSpec as Le, olliVis as Ft } from "olli";
+import { VegaLiteAdapter as Ot } from "olli/adapters";
+import fe from "moize";
+import { getDomain as Vt, fetchAndParse as Ct, typeCoerceData as Rt, getBins as It, serializeValue as Lt } from "@umwelt-data/umwelt-utils/data";
+import { compile as et } from "vega-lite";
+import { evaluateVegaData as jt, extractOutputDatasets as qt, computeGuideTicks as Mt } from "@umwelt-data/umwelt-utils/vega";
+import be from "lodash.clonedeep";
+import { withExternalStateParam as Bt, selectionStoreToSelection as zt, EXTERNAL_STATE_STORE as je, predicateToSelectionStore as Gt } from "@umwelt-data/umwelt-utils/vl-bridge";
+import "lz-string";
+import { parse as Kt, View as Ht } from "vega";
+import { debounce as Jt } from "@solid-primitives/scheduled";
+import "olli/styles.css";
+import { createStore as me } from "solid-js/store";
+import { makeCommaSeparatedString as Te, fmtValue as Yt, describeField as H } from "@umwelt-data/umwelt-utils/description";
+import { testDatum as Xt } from "@umwelt-data/umwelt-utils/predicate";
+import * as V from "tone";
+import { Storage as Wt } from "versioned-storage";
+import { scaleTime as Zt, scaleLinear as Qt, scaleOrdinal as en } from "d3-scale";
+import tn from "fast-cartesian";
+import { styled as x } from "solid-styled-components";
+const nn = "_Viewer_1uzho_29", rn = {
+  Viewer: nn
+}, an = ["mean", "median", "min", "max", "sum", "count"];
+function tt(e) {
+  return an.includes(e);
+}
+function sn(e) {
+  return e && (typeof e.name == "string" || e.name === void 0) && Array.isArray(e.values);
+}
+function nt(e) {
+  return e && (typeof e.name == "string" || e.name === void 0) && typeof e.url == "string";
+}
+const on = ["x", "y", "color", "shape", "size", "opacity", "order", "facet"];
+function it(e) {
+  return on.includes(e);
+}
+const rt = "None", cn = "", Y = (e, n) => `${n}_${e}`, M = (e) => [`${e}_bin_start`, `${e}_bin_end`], X = (e, n) => `${n}_${e}`, pe = (e) => {
+  const n = xe([e]);
+  let t = e.field;
+  for (const i of n)
+    if ("aggregate" in i)
+      for (const r of i.aggregate)
+        tt(r.op) && (t = Y(t, r.op));
+    else "bin" in i && !e.aggregate ? t = M(t)[0] : "timeUnit" in i && !e.aggregate && (t = X(t, i.timeUnit));
+  return t;
+}, at = (e) => {
+  const n = xe([e]);
+  let t = e.field;
+  for (const i of n)
+    if ("aggregate" in i)
+      for (const r of i.aggregate)
+        tt(r.op) && (typeof t == "string" ? t = Y(t, r.op) : t = [Y(t[0], r.op), Y(t[1], r.op)]);
+    else "bin" in i && !e.aggregate ? typeof t == "string" ? t = M(t) : t = [M(t[0])[0], M(t[1])[1]] : "timeUnit" in i && !e.aggregate && (typeof t == "string" ? t = X(t, i.timeUnit) : t = [X(t[0], i.timeUnit), X(t[1], i.timeUnit)]);
+  if (typeof t == "string")
+    throw new Error("Expected derived field name to be a tuple");
+  return t;
+}, ke = (e, n, t) => {
+  const i = new Set(n.filter((s) => s.bin && t?.[s.field]?.length).map((s) => s.field));
+  let r = e;
+  i.size && (r = e.map((s) => {
+    const c = { ...s };
+    for (const o of i) {
+      const [d, l] = M(o), f = ln(s[o], t[o]);
+      c[d] = f ? f[0] : null, c[l] = f ? f[1] : null;
+    }
+    return c;
+  }));
+  const a = xe(n, i);
+  return st(r, a);
+}, ln = (e, n) => {
+  if (e == null) return;
+  const t = Number(e);
+  if (!isNaN(t))
+    for (let i = 0; i < n.length; i++) {
+      const [r, a] = n[i];
+      if (t >= r && (t < a || i === n.length - 1 && t <= a))
+        return n[i];
+    }
+}, xe = (e, n) => {
+  const t = [], i = [], r = [], a = /* @__PURE__ */ new Set();
+  for (const u of e) {
+    const { field: s, timeUnit: c, bin: o, aggregate: d } = u;
+    d || (c && a.add(X(s, c)), o && M(s).forEach((l) => a.add(l)), !c && !o && a.add(s));
+  }
+  for (const u of e) {
+    const { field: s, timeUnit: c, bin: o, aggregate: d } = u;
+    if (o && !n?.has(s)) {
+      const l = M(s);
+      i.push({
+        bin: !0,
+        field: s,
+        as: l
+      });
+    }
+    if (c) {
+      const l = o ? M(s)[0] : X(s, c);
+      t.push({
+        timeUnit: c,
+        field: s,
+        as: l
+      });
+    }
+    if (d) {
+      const l = o ? M(s)[0] : s, f = r.find((p) => p.groupby?.length === a.size && p.groupby?.every((h) => a.has(h)));
+      f ? f.aggregate.push({
+        op: d,
+        field: l,
+        as: Y(s, d)
+      }) : r.push({
+        aggregate: [
+          {
+            op: d,
+            field: l,
+            as: Y(s, d)
+          }
+        ],
+        groupby: Array.from(a)
+      });
+    }
+  }
+  return [...i, ...t, ...r];
+};
+function st(e, n) {
+  const r = et({
+    data: { values: e },
+    transform: n,
+    mark: "point"
+  }).spec.data ?? [], a = jt(r), u = qt(r, a);
+  return u[u.length - 1] ?? [];
+}
+const te = fe((e, n, t) => {
+  const i = t ? pe(e) : e.field;
+  return Vt({ field: i, type: e.type, timeUnit: e.timeUnit }, n);
+}), un = fe((e, n) => {
+  if (e.bin) {
+    const t = at(e);
+    return n.map((i) => {
+      const r = i[t[0]], a = i[t[1]];
+      return [r, a];
+    }).sort((i, r) => typeof i[0] == "number" && typeof r[0] == "number" ? i[0] - r[0] : i[0] instanceof Date && r[0] instanceof Date ? i[0].getTime() - r[0].getTime() : typeof i[0] == "string" && typeof r[0] == "string" ? i[0].localeCompare(r[0]) : 0);
+  }
+  return [];
+}), de = "dataset", dn = "https://raw.githubusercontent.com/vega/vega-datasets/master/data/", fn = Object.fromEntries(
+  ["stocks.csv", "cars.json", "weather.csv", "seattle-weather.csv", "penguins.json", "driving.json", "barley.json", "disasters.csv", "gapminder.json"].map((e) => [e, `${dn}${e}`])
+);
+async function mn(e) {
+  if (sn(e)) {
+    const n = e.name || de;
+    return e.values.length ? { name: n, data: e.values } : void 0;
+  }
+  if (nt(e)) {
+    const n = e.name || e.url.split("/").pop() || de, t = await qe(e.url);
+    return t.length ? { name: n, data: t, sourceUrl: e.url } : void 0;
+  }
+  if (e.name) {
+    const n = fn[e.name];
+    if (!n) {
+      console.error(`Unknown example dataset "${e.name}". A name-only data source must reference a built-in example dataset, or provide a url or values.`);
+      return;
+    }
+    const t = await qe(n);
+    return t.length ? { name: e.name, data: t, sourceUrl: n } : void 0;
+  }
+}
+const qe = fe.promise(async (e) => {
+  try {
+    const n = await Ct(e);
+    return Array.isArray(n) ? n : [];
+  } catch (n) {
+    return console.warn(`Failed to load data from ${e} 
+ ${n}`), [];
+  }
+});
+fe.promise(async (e, n) => {
+  try {
+    return st(e, n);
+  } catch (t) {
+    return console.warn(`Failed to evaluate transforms 
+ ${t}`), [];
+  }
+});
+function pn(e, n) {
+  const t = n.map((i) => ({ name: i.name, type: i.type }));
+  return Rt(e, t);
+}
+function gn(e, n) {
+  return e.filter((t) => Object.entries(t).every(([i, r]) => n.find((a) => a.name === i) ? r != null : !0));
+}
+function $(e, n) {
+  return e.fields.find((t) => t.name === n);
+}
+function N(e, n) {
+  const { active: t, name: i, encodings: r, ...a } = e, u = n ? {
+    ...a,
+    ...n
+  } : { field: i, ...a };
+  return Object.fromEntries(Object.entries(u).filter(([s, c]) => c !== rt));
+}
+function _e(e, n) {
+  const i = [...Object.values(n.encoding), ...n.traversal].flatMap((a) => {
+    const u = $(e, a.field);
+    return u ? [N(u, a)] : [];
+  }), r = /* @__PURE__ */ new Set();
+  return i.filter((a) => {
+    const u = JSON.stringify(a);
+    return r.has(u) ? !1 : (r.add(u), !0);
+  });
+}
+async function vn(e, n, t) {
+  if (!e.data || !(e.fields && e.fields.length))
+    return;
+  const i = e.data.name;
+  if (i && n[i]?.data?.length)
+    return Me(e);
+  const r = await mn(e.data);
+  if (!r)
+    return;
+  const a = Me(e), u = pn(r.data, a.fields), s = gn(u, a.fields);
+  if (s.length)
+    return t(r.name, s, r.sourceUrl), a;
+}
+function Me(e) {
+  const n = e.fields.map((i) => {
+    const r = [];
+    return e.visual.units.forEach((a) => {
+      Object.entries(a.encoding).forEach(([u, s]) => {
+        it(u) && s.field === i.name && r.push({ unit: a.name, property: u });
+      });
+    }), e.audio.units.forEach((a) => {
+      Object.entries(a.encoding).forEach(([u, s]) => {
+        u === "pitch" && s.field === i.name && r.push({ unit: a.name, property: u });
+      });
+    }), { ...i, active: !0, encodings: r };
+  });
+  return {
+    ...e,
+    data: {
+      name: e.data.name || (nt(e.data) ? e.data.url.split("/").pop() : de) || de
+    },
+    fields: n,
+    visual: { units: e.visual.units, composition: e.visual.composition || "layer" },
+    audio: { units: e.audio.units, composition: e.audio.composition || "concat" },
+    // regenerate node ids on import so a serialized id can never collide with one
+    // this session's counter later mints
+    text: {
+      structures: e.text?.structures ? Object.fromEntries(Object.entries(e.text.structures).map(([i, r]) => [i, r.map(ct)])) : {}
+    }
+  };
+}
+function ot(e, n) {
+  if (e.visual.units.length === 0 || e.visual.units.map((c) => Object.values(c.encoding).length).reduce((c, o) => c + o, 0) === 0) return;
+  const i = [
+    {
+      name: "brush",
+      select: "interval"
+    }
+  ];
+  function r(c) {
+    const o = c.visual.units;
+    if (o.length === 1) {
+      const d = o[0], l = be(d.encoding);
+      return l && Object.keys(l).forEach((f) => {
+        if (it(f)) {
+          const p = l[f];
+          if (p) {
+            const h = $(c, p.field);
+            if (h) {
+              const w = N(h, p);
+              if (l[f] = {
+                ...w
+              }, f === "facet") {
+                const E = te(w, n);
+                l[f] = {
+                  ...w,
+                  columns: E.length === 3 ? 3 : 2
+                  // TODO do something better
+                };
+              }
+              d.mark === "point" && (f === "x" || f === "y") && w.type === "quantitative" && (l[f] = {
+                ...w,
+                scale: {
+                  ...w.scale,
+                  zero: !1
+                }
+              });
+            }
+          }
+        }
+      }), {
+        mark: d.mark,
+        encoding: {
+          ...l,
+          color: {
+            ...a({ ...l.color || { value: "navy" }, scale: d.mark === "area" ? { scheme: "category20b" } : void 0 }, "brush", "grey")
+          }
+        }
+      };
+    } else if (o.length > 1) {
+      const d = c.visual.composition || "layer";
+      return {
+        columns: d === "concat" ? o.length < 3 ? 1 : 2 : void 0,
+        [d]: o.map((l, f) => {
+          const p = r({
+            ...c,
+            visual: {
+              units: [l],
+              composition: d
+            }
+          });
+          return f === 0 && (p.params = i), p;
+        })
+      };
+    }
+  }
+  if (e.visual.units[0].mark === "line" || e.visual.units[0].mark === "bar") {
+    const c = e.visual.units[0], o = c.encoding.y?.field, d = c.encoding.x?.field, l = $(e, o), f = $(e, d);
+    l?.type === "quantitative" && f?.type !== "quantitative" ? i[0].select = { type: "interval", encodings: ["x"] } : f?.type === "quantitative" && l?.type !== "quantitative" && (i[0].select = { type: "interval", encodings: ["y"] });
+  }
+  const a = (c, o, d, l) => ({
+    condition: { param: o, empty: l || !0, ...c },
+    value: d
+  }), u = r(e);
+  let s;
+  return "mark" in u ? s = be({
+    data: { values: n },
+    params: i,
+    ...u
+  }) : s = be({
+    data: { values: n },
+    ...u
+  }), Bt(s);
+}
+async function hn(e, n) {
+  let t;
+  const i = e.text.structures, r = e.visual.units.map((c) => c.name);
+  JSON.stringify(i);
+  const a = new Map(e.fields.map((c) => [c.name, c.type])), u = ot(e, n);
+  if (u ? t = await Ot(u) : t = {
+    data: n,
+    fields: []
+  }, Le(t) ? t.units.forEach((c) => {
+    s(c, e);
+  }) : s(t, e), u)
+    (Le(t) ? t.units : [t]).forEach((o, d) => {
+      const l = i[r[d]];
+      l?.length && ze(o, l, a);
+    });
+  else {
+    const c = i[cn];
+    c?.length && ze(t, c, a);
+  }
+  function s(c, o) {
+    c.fields?.length === 0 && (delete c.mark, delete c.axes, delete c.legends), c.fields && o.fields.filter((d) => d.active).forEach((d) => {
+      c.fields?.find((l) => l.field === d.name) || c.fields?.push({
+        ...d,
+        field: d.name,
+        timeUnit: d.timeUnit
+      });
+    });
+  }
+  return t;
+}
+let yn = 0;
+function Sn() {
+  return `text_node_${yn++}`;
+}
+function ct(e) {
+  return { ...e, id: Sn(), children: e.children.map(ct) };
+}
+function ue(e, n) {
+  if (!e || typeof e != "object") return e;
+  if ("and" in e) return { and: e.and.map((t) => ue(t, n)) };
+  if ("or" in e) return { or: e.or.map((t) => ue(t, n)) };
+  if ("not" in e) return { not: ue(e.not, n) };
+  if ("field" in e && n.get(e.field) === "temporal") {
+    const t = (r) => r instanceof Date || r == null ? r : new Date(r), i = { ...e };
+    for (const r of ["equal", "lt", "lte", "gt", "gte"])
+      r in i && (i[r] = t(i[r]));
+    return "range" in i && Array.isArray(i.range) && (i.range = i.range.map(t)), "oneOf" in i && Array.isArray(i.oneOf) && (i.oneOf = i.oneOf.map(t)), i;
+  }
+  return e;
+}
+function lt(e, n, t) {
+  const i = e.children.map((r) => lt(r, n, t));
+  if (e.nodeType === "group") {
+    const r = e.groupby.map(t);
+    return { groupby: r.length === 1 ? r[0] : r, ...i.length ? { children: i } : {} };
+  }
+  return {
+    predicate: ue(e.predicate, n),
+    ...e.name ? { name: e.name } : {},
+    ...e.reasoning ? { reasoning: e.reasoning } : {},
+    ...i.length ? { children: i } : {}
+  };
+}
+function Be(e, n) {
+  return {
+    type: e.type ?? n?.type,
+    timeUnit: e.timeUnit === rt ? void 0 : e.timeUnit ?? n?.timeUnit,
+    bin: e.bin !== void 0 ? e.bin : !!n?.bin
+  };
+}
+const Ee = (e) => `${e.type ?? ""}|${e.timeUnit ?? ""}|${e.bin ? "bin" : ""}`;
+function ze(e, n, t) {
+  const i = e.fields ?? (e.fields = []), r = e.data ?? [], a = (d) => i.find((l) => l.field === d), u = /* @__PURE__ */ new Map(), s = (d) => d.forEach((l) => {
+    l.nodeType === "group" && l.groupby.forEach((f) => {
+      const p = Be(f, a(f.field)), h = u.get(f.field) ?? /* @__PURE__ */ new Map();
+      h.set(Ee(p), p), u.set(f.field, h);
+    }), s(l.children);
+  });
+  s(n);
+  const c = /* @__PURE__ */ new Map();
+  u.forEach((d, l) => {
+    const f = a(l), p = f ? Ee({ type: f.type, timeUnit: f.timeUnit, bin: !!f.bin }) : void 0, h = [...d.keys()], w = p && d.has(p) ? p : h[0];
+    d.forEach((E, L) => {
+      if (L === w)
+        f && (E.type && (f.type = E.type), f.timeUnit = E.timeUnit, f.bin = E.bin || void 0), c.set(`${l}|${L}`, l);
+      else {
+        const R = [E.type, E.timeUnit, E.bin ? "bin" : ""].filter(Boolean), P = `${l}__${R.join("_") || "raw"}`;
+        c.set(`${l}|${L}`, P), i.find((I) => I.field === P) || i.push({ field: P, label: l, type: E.type ?? t.get(l), timeUnit: E.timeUnit, bin: E.bin || void 0 }), r.forEach((I) => {
+          l in I && !(P in I) && (I[P] = I[l]);
+        });
+      }
+    });
+  });
+  const o = (d) => c.get(`${d.field}|${Ee(Be(d, a(d.field)))}`) ?? d.field;
+  e.structure = n.map((d) => lt(d, t, o));
+}
+function bn(e, n) {
+  const t = et(e).spec, i = Kt(t), r = new Ht(i, {
+    renderer: "canvas",
+    container: n,
+    hover: !0
+  });
+  return r.runAsync(), r;
+}
+const ut = W();
+function En(e) {
+  const [n, t] = C(void 0), i = {
+    setSelection: (r) => {
+      r && r.predicate && "and" in r.predicate && r.predicate.and.length === 0 && (r.predicate = void 0), t(r);
+    }
+  };
+  return g(ut.Provider, {
+    value: [n, i],
+    get children() {
+      return e.children;
+    }
+  });
+}
+function ie() {
+  const e = Z(ut);
+  if (e === void 0)
+    throw new Error("useUmweltSelection must be used within a UmweltSelectionProvider");
+  return e;
+}
+var wn = /* @__PURE__ */ A("<div id=vl-container>");
+function Dn(e) {
+  const [n, t] = ie(), [i, r] = C(!1), [a, u] = C(null), s = Jt((c) => {
+    if (i()) {
+      const o = zt(c);
+      t.setSelection({
+        source: "visualization",
+        predicate: o
+      });
+    }
+  }, 250);
+  return F(() => {
+    const c = n(), o = a();
+    if (!c) {
+      o && o.data(je, []).run();
+      return;
+    }
+    if (o && (c.source === "sonification" || c.source === "text-navigation")) {
+      const d = Gt(c.predicate);
+      o.data(je, d ? [d] : []).run();
+    }
+  }), F(() => {
+    const c = ot(e.spec, e.data);
+    if (c)
+      try {
+        const o = bn(c, "#vl-container");
+        o.addDataListener("brush_store", (d, l) => {
+          s(l);
+        }), u(o);
+      } catch (o) {
+        console.error(o);
+      }
+    J(() => {
+      a()?.finalize(), u(null), document.getElementById("vl-container").innerHTML = "";
+    });
+  }), (() => {
+    var c = wn();
+    return c.addEventListener("mouseleave", () => r(!1)), c.addEventListener("mouseenter", () => r(!0)), c;
+  })();
+}
+var Un = /* @__PURE__ */ A("<div id=olli-container>");
+function An(e) {
+  const [n, t] = ie(), [i, r] = C(null), [a, u] = C(null);
+  let s = !1;
+  return F(() => {
+    let c = !1;
+    J(() => {
+      c = !0;
+    }), hn(e.spec, e.data).then((o) => {
+      const d = i();
+      if (c || !o || !d) return;
+      a()?.destroy(), d.innerHTML = "";
+      const l = Ft(o, d);
+      l.onFocusChange((f) => {
+        if (s) return;
+        const p = l.fullPredicate(f);
+        "and" in p && p.and.length > 0 ? t.setSelection({
+          source: "text-navigation",
+          predicate: p
+        }) : t.setSelection({
+          source: "text-navigation",
+          predicate: void 0
+        });
+      }), l.onSelectionChange((f) => {
+        t.setSelection({
+          source: "text-filter",
+          predicate: f
+        });
+      }), u(l);
+    });
+  }), F(() => {
+    const c = n(), o = a();
+    c && o && c.source === "visualization" && (s = !0, o.setSelection(c.predicate ?? {
+      and: []
+    }), queueMicrotask(() => {
+      s = !1;
+    }));
+  }), J(() => {
+    a()?.destroy();
+  }), (() => {
+    var c = Un();
+    return xt(r, c), c;
+  })();
+}
+const dt = W();
+function $n(e) {
+  const [n] = ie(), t = () => ({
+    activeUnitName: void 0,
+    selection: void 0
+  }), [i, r] = me(t());
+  let a = null;
+  F(() => {
+    const s = n();
+    s && s.source !== "sonification" && u.setSelection(s.predicate);
+  });
+  const u = {
+    setActiveUnit: (s) => {
+      r("activeUnitName", s);
+    },
+    setSelection: (s) => {
+      r("selection", s);
+    },
+    registerPlayCallback: (s, c = !1) => {
+      (c || a === null) && (a = s);
+    },
+    triggerPlay: () => {
+      a?.();
+    }
+  };
+  return g(dt.Provider, {
+    value: [i, u],
+    get children() {
+      return e.children;
+    }
+  });
+}
+function ge() {
+  const e = Z(dt);
+  if (e === void 0)
+    throw new Error("useSonificationRuntime must be used within a SonificationRuntimeProvider");
+  return e;
+}
+const G = (e, n) => Array.isArray(e) ? e.length === 2 && (n.type === "quantitative" || n.type === "temporal") ? e.map((t) => G(t, n)).join("–") : Te(e.map((t) => G(t, n))) : Yt(e, n);
+function Ne(e, n) {
+  return e.filter((t) => Xt(t, n));
+}
+const Tn = "umwelt", kn = 1, xn = {
+  muted: !1,
+  speakAxisTicks: !0,
+  speechRate: 50,
+  playbackRate: 1
+}, ft = () => new Wt(Tn, kn), mt = () => ft().read(), ce = (e) => {
+  const n = mt() ?? xn;
+  ft().write({
+    ...n,
+    ...e
+  });
+}, Ge = (e, n, t) => Math.min(Math.max(e, n), t), Ke = ["triangle", "sawtooth", "square", "sine"], _n = (e) => Ke[e % Ke.length], we = "default", De = 0.1, ne = 120, pt = W();
+function Nn(e) {
+  const n = /* @__PURE__ */ new Map(), t = {
+    attack: 0.01,
+    decay: 0,
+    sustain: 1,
+    release: 0.01
+  }, i = (o, d = "triangle") => {
+    let l = n.get(o);
+    if (!l) {
+      const f = new V.Synth({
+        oscillator: {
+          type: d
+        },
+        envelope: t
+      }).toDestination(), p = new V.NoiseSynth({
+        noise: {
+          type: "pink"
+        },
+        envelope: t
+      }), h = new V.Gain(0.3).toDestination();
+      p.connect(h), l = {
+        synth: f,
+        noiseSynth: p,
+        noiseGain: h,
+        isSynthPlaying: !1,
+        isNoisePlaying: !1
+      }, n.set(o, l);
+    }
+    return l;
+  }, r = (o) => {
+    o.synth.triggerRelease(), o.noiseSynth.triggerRelease(), o.isSynthPlaying = !1, o.isNoisePlaying = !1;
+  };
+  F(() => {
+    const o = () => {
+      document.hidden && c.stopTransport();
+    };
+    document.addEventListener("visibilitychange", o), J(() => {
+      document.removeEventListener("visibilitychange", o), n.forEach((d) => {
+        d.synth.dispose(), d.noiseSynth.dispose(), d.noiseGain.dispose();
+      }), n.clear(), V.getTransport().cancel(), V.getTransport().stop();
+    });
+  });
+  const a = () => {
+    const o = mt();
+    return {
+      transport: V.getTransport(),
+      muted: o?.muted ?? !1,
+      speakAxisTicks: o?.speakAxisTicks ?? !0,
+      speechRate: o?.speechRate ?? 50,
+      playbackRate: o?.playbackRate ?? 1,
+      pauseBetweenSections: 0.25,
+      isPlaying: !1
+    };
+  }, [u, s] = me(a());
+  F(() => {
+    u.transport.bpm.value = ne * u.playbackRate;
+  });
+  const c = {
+    startAudioContext: async () => {
+      await V.start(), i(we);
+    },
+    ensureVoice: (o, d) => {
+      i(o, d);
+    },
+    setMuted: (o) => {
+      ce({
+        muted: o
+      }), s((d) => ({
+        ...d,
+        muted: o
+      })), V.getDestination().mute = o;
+    },
+    setSpeakAxisTicks: (o) => {
+      ce({
+        speakAxisTicks: o
+      }), s((d) => ({
+        ...d,
+        speakAxisTicks: o
+      })), o || (speechSynthesis.cancel(), u.isPlaying && V.getTransport().start());
+    },
+    setSpeechRate: (o) => {
+      const d = Ge(o, 1, 100);
+      ce({
+        speechRate: o
+      }), s((l) => ({
+        ...l,
+        speechRate: d
+      }));
+    },
+    setPlaybackRate: (o) => {
+      const d = Ge(o, 0.1, 4);
+      ce({
+        playbackRate: d
+      }), s((l) => ({
+        ...l,
+        playbackRate: d
+      }));
+    },
+    startTransport: async () => {
+      s((o) => ({
+        ...o,
+        isPlaying: !0
+      })), V.getTransport().start();
+    },
+    stopTransport: () => {
+      s((o) => ({
+        ...o,
+        isPlaying: !1
+      })), speechSynthesis.cancel(), V.getTransport().pause(), c.releaseSynth();
+    },
+    playNote: (o, d = we) => {
+      const l = i(d);
+      if (l.noiseSynth.triggerRelease(), l.synth.triggerRelease(), l.isSynthPlaying = !1, l.isNoisePlaying = !1, !o.rest)
+        if (o.pitch) {
+          l.synth.volume.value = o.volume;
+          const f = V.Frequency(o.pitch, "midi").toFrequency();
+          l.synth.triggerAttackRelease(f, o.duration);
+        } else
+          l.noiseSynth.volume.value = o.volume, l.noiseSynth.triggerAttackRelease(o.duration);
+    },
+    startOrRampSynth: (o, d = we) => {
+      const l = i(d);
+      if (o.rest) {
+        r(l);
+        return;
+      }
+      if (o.pitch) {
+        l.noiseSynth.triggerRelease(), l.isNoisePlaying = !1;
+        const f = V.Frequency(o.pitch, "midi").toFrequency();
+        l.isSynthPlaying ? (l.synth.volume.rampTo(o.volume, De), l.synth.frequency.rampTo(f, De)) : (l.synth.volume.value = o.volume, l.isSynthPlaying = !0, l.synth.triggerAttack(f));
+      } else
+        l.synth.triggerRelease(), l.isSynthPlaying = !1, l.isNoisePlaying ? l.noiseSynth.volume.rampTo(o.volume, De) : (l.noiseSynth.volume.value = o.volume, l.isNoisePlaying = !0, l.noiseSynth.triggerAttack());
+    },
+    releaseSynth: (o) => {
+      if (o !== void 0) {
+        const d = n.get(o);
+        d && r(d);
+      } else
+        n.forEach(r);
+    }
+  };
+  return g(pt.Provider, {
+    value: [u, c],
+    get children() {
+      return e.children;
+    }
+  });
+}
+function Q() {
+  const e = Z(pt);
+  if (e === void 0)
+    throw new Error("useSonificationRuntime must be used within a SonificationRuntimeProvider");
+  return e;
+}
+function gt(e, n, t) {
+  const i = $(e, t);
+  if (!i) return;
+  const r = i.encodings.find((l) => l.property === "x" || l.property === "y");
+  if (!r) return;
+  const a = e.visual.units.find((l) => l.name === r.unit), u = a?.encoding[r.property];
+  if (!a || !u) return;
+  const s = N(i, u), c = a.mark === "point" && s.type === "quantitative" ? !1 : s.scale?.zero, o = Array.isArray(s.scale?.domain) ? s.scale?.domain : void 0, d = {
+    field: t,
+    type: s.type,
+    bin: !!s.bin,
+    timeUnit: s.timeUnit,
+    scaleZero: c,
+    scaleDomain: o,
+    // vega-lite sorts discrete scales ascending unless told otherwise
+    sort: s.sort === void 0 ? "ascending" : s.sort
+  };
+  return Mt(n, d);
+}
+function Pe(e, n, t, i) {
+  const r = {};
+  for (const a of i)
+    if (a.bin && a.type === "quantitative" && !(a.field in r)) {
+      const u = { field: a.field, type: a.type };
+      let s = It(u, t, gt(e, n, a.field));
+      if (s.length === 0) {
+        let c = 1 / 0, o = -1 / 0;
+        for (const d of t) {
+          const l = d[a.field];
+          if (l == null) continue;
+          const f = Number(l);
+          isNaN(f) || (f < c && (c = f), f > o && (o = f));
+        }
+        c <= o && (s = [[c, o]]);
+      }
+      r[a.field] = s;
+    }
+  return r;
+}
+const vt = W(), Pn = {
+  pitch: [48, 84],
+  // in MIDI. Three octaves from C3 to C6
+  duration: [0.25, 1],
+  // in seconds
+  volume: [-20, 0]
+  // in decibels
+}, He = {
+  pitch: 60,
+  // MIDI C4 middle C. We encode in MIDI because linear interpolations in Hz are not perceptually linear
+  duration: 0.2,
+  // seconds
+  volume: -10
+  // dB
+};
+function Ue(e, n, t, i) {
+  const r = t.encoding[i];
+  if (!r)
+    return () => He[i];
+  const a = $(e, r.field);
+  if (!a)
+    return console.warn(`Field ${r.field} not found in spec`), () => He[i];
+  const u = N(a, r);
+  let s = u.scale?.domain;
+  if (!s) {
+    const o = u.aggregate === "count" || u.aggregate === "sum", d = _e(e, t), l = o ? ke(n, d, Pe(e, n, n, d)) : n;
+    switch (a.type) {
+      case "ordinal":
+      case "nominal":
+        s = te(u, l, o);
+        break;
+      case "quantitative":
+      case "temporal":
+        s = te(u, l, o), s = [s[0], s[s.length - 1]];
+        break;
+      default:
+        throw new Error(`Unsupported field type ${u.type}`);
+    }
+  }
+  const c = u.scale?.range || Pn[i];
+  switch (u.type) {
+    case "ordinal":
+    case "nominal":
+      return en().domain(s).range(c);
+    case "quantitative":
+      return Qt().domain(s).range(c);
+    case "temporal":
+      return Zt().domain(s).range(c);
+    default:
+      throw new Error(`Unsupported field type ${u.type}`);
+  }
+}
+function ht(e, n, t) {
+  return {
+    pitch: Ue(e, n, t, "pitch"),
+    duration: Ue(e, n, t, "duration"),
+    volume: Ue(e, n, t, "volume")
+  };
+}
+function yt(e, n, t) {
+  return gt(e, n, t) ?? [];
+}
+function Fn(e) {
+  const n = (r) => yt(e.spec, e.data, r.field), t = ht(e.spec, e.data, e.audioUnitSpec), i = {
+    getAxisTicks: n
+  };
+  return g(vt.Provider, {
+    value: [t, i],
+    get children() {
+      return e.children;
+    }
+  });
+}
+function On() {
+  const e = Z(vt);
+  if (e === void 0)
+    throw new Error("useSonificationRuntime must be used within a SonificationRuntimeProvider");
+  return e;
+}
+const Je = {
+  pitch: 60,
+  // MIDI C4 middle C. We encode in MIDI because linear interpolations in Hz are not perceptually linear
+  duration: 0.2,
+  // seconds
+  volume: -15
+  // dB
+};
+function Ae(e, n, t, i, r) {
+  if (!t)
+    return Je[e];
+  const a = $(n, t.field);
+  if (!a)
+    return Je[e];
+  const u = N(a, t), s = pe(u);
+  return i(r[0][s]);
+}
+const Fe = (e, n) => e.audioUnitSpec.traversal.find((t) => t.field === n);
+function ve(e, n, t) {
+  const i = $(e.spec, n), r = N(i, Fe(e, n)), a = e.fieldDomains[n];
+  if (r.bin && !r.aggregate) {
+    const [u, s] = at(r), c = a[t], o = e.derivedData.find((d) => d[u] === c)?.[s] ?? null;
+    return [c, o];
+  } else
+    return a[t];
+}
+function St(e, n) {
+  return {
+    and: Object.entries(n).map(([t, i]) => {
+      const r = ve(e, t, i), a = e.fieldDomains[t].length - 1;
+      return Array.isArray(r) ? {
+        field: t,
+        range: r,
+        inclusiveLeft: !0,
+        inclusiveRight: i === a
+      } : {
+        field: t,
+        equal: r
+      };
+    })
+  };
+}
+function $e(e, n) {
+  const t = {
+    and: Object.entries(n).map(([i, r]) => {
+      const a = e.fieldDomains[i][r], u = $(e.spec, i);
+      if (!u)
+        return { field: i, equal: a };
+      const s = N(u, Fe(e, i));
+      return {
+        field: pe(s),
+        equal: Lt(a, u)
+      };
+    })
+  };
+  return Ne(e.derivedData, t);
+}
+function Vn(e, n) {
+  const t = e.audioUnitSpec.encoding;
+  return {
+    pitch: n.length ? Ae("pitch", e.spec, t.pitch, e.scales.pitch, n) : void 0,
+    volume: Ae("volume", e.spec, t.volume, e.scales.volume, n),
+    duration: Ae("duration", e.spec, t.duration, e.scales.duration, n)
+  };
+}
+function Cn(e, n) {
+  const t = Object.entries(n).map(([r, a]) => a === e.fieldDomains[r].length - 1 ? 1 : 0).reverse();
+  let i = 0;
+  for (let r of t)
+    if (r)
+      i++;
+    else break;
+  return i;
+}
+function Rn(e) {
+  if (e.audioUnitSpec.traversal.length === 0)
+    return !1;
+  const n = e.audioUnitSpec.traversal[e.audioUnitSpec.traversal.length - 1].field, t = $(e.spec, n);
+  return t?.type === "quantitative" || t?.type === "temporal";
+}
+function In(e) {
+  const n = e.audioUnitSpec.traversal.map((r) => r.field), t = n.map((r) => Array.from({ length: e.fieldDomains[r].length }, (a, u) => u));
+  return tn(t).map((r) => {
+    const a = {};
+    return r.forEach((u, s) => {
+      a[n[s]] = u;
+    }), a;
+  });
+}
+function Ln(e, n, t, i) {
+  if (!t)
+    return !0;
+  if (i.bin || i.type === "nominal" || i.type === "ordinal")
+    return n[i.field] !== t[i.field];
+  const r = e.axisTicks[i.field] ?? [], a = $e(e, n), u = $e(e, t);
+  if (a.length && u.length) {
+    const s = pe(i), c = a[0][s], o = u[0][s];
+    if (c && o) {
+      const d = r.findIndex((f, p) => {
+        const h = f instanceof Date ? f.getTime() : f, w = r[p + 1], E = w instanceof Date ? w.getTime() : w;
+        return h && c >= h && c < (E || 1 / 0);
+      }), l = r.findIndex((f, p) => {
+        const h = f instanceof Date ? f.getTime() : f, w = r[p + 1], E = w instanceof Date ? w.getTime() : w;
+        return h && o >= h && o < (E || 1 / 0);
+      });
+      return d !== l;
+    }
+  }
+  return !1;
+}
+function jn(e, n, t) {
+  const i = [];
+  return Object.entries(n).forEach(([r]) => {
+    if (!e.fieldDomains[r].length) return;
+    const u = $(e.spec, r), s = N(u, Fe(e, r));
+    Ln(e, n, t, s) && i.push(G(ve(e, r, n[r]), s));
+  }), i.join(", ");
+}
+function bt(e) {
+  let n = 0;
+  const t = [], i = In(e), r = Rn(e);
+  let a;
+  return i.forEach((u) => {
+    const s = $e(e, u), c = Vn(e, s), o = Cn(e, u), d = e.pauseBetweenSections * o;
+    t.push({
+      ...c,
+      time: n,
+      pauseAfter: d,
+      ramp: r,
+      rest: s.length === 0,
+      state: u,
+      speakBefore: jn(e, u, a)
+    }), n += c.duration + d, a = u;
+  }), t;
+}
+function qn(e) {
+  if (!e.length) return [];
+  const n = e[0].notes.length, t = [];
+  let i = 0;
+  for (let r = 0; r < n; r++) {
+    const a = e.map((o) => ({ voiceId: o.voiceId, note: o.notes[r] })), u = Math.max(...a.map((o) => o.note.duration)), s = e[0].notes[r], c = s.pauseAfter ?? 0;
+    t.push({
+      state: s.state,
+      time: i,
+      slotDuration: u,
+      pauseAfter: c,
+      speakBefore: s.speakBefore,
+      ramp: s.ramp,
+      notes: a
+    }), i += u + c;
+  }
+  return t;
+}
+function Et(e) {
+  return Te(
+    Object.entries(e.audioUnitSpec.encoding).map(([n, t]) => t ? `${H(N($(e.spec, t.field), t))} as ${n}` : "").filter((n) => n)
+  );
+}
+function wt(e) {
+  if (!e.audioUnitSpec.traversal.length)
+    return "";
+  const n = e.audioUnitSpec.traversal[e.audioUnitSpec.traversal.length - 1], t = $(e.spec, n.field), i = N(t, n);
+  let r;
+  i.bin ? r = un(i, e.derivedData) : r = e.fieldDomains[n.field];
+  let a = "";
+  r.length > 1 ? a = `${H(i)} from ${G(r[0], i)} to ${G(r[r.length - 1], i)}` : r.length === 1 ? a = `${H(i)} equals ${G(r[0], i)}` : a = H(i);
+  const u = e.audioUnitSpec.traversal.slice(0, -1).map((s) => {
+    const c = $(e.spec, s.field);
+    return H(N(c, s));
+  });
+  return u.length && (a += ` for each ${Te(u)}`), a;
+}
+const Oe = W();
+function Mn(e) {
+  const [n, t] = ie(), [i, r] = On(), [a, u] = ge(), [s, c] = Q(), [o, d] = C(), l = () => {
+    const b = speechSynthesis.getVoices(), S = b.find((m) => m.name === "Samantha"), T = b.find((m) => m.localService && m.default), D = b.find((m) => m.default);
+    d(S ?? T ?? D);
+  };
+  l(), speechSynthesis.addEventListener("voiceschanged", l), J(() => speechSynthesis.removeEventListener("voiceschanged", l));
+  const f = () => ({
+    traversalState: Object.fromEntries(e.audioUnitSpec.traversal.map((b) => [b.field, 0]))
+  }), [p, h] = me(f()), w = _(() => _e(e.spec, e.audioUnitSpec)), E = _(() => a.selection ? Ne(e.data, a.selection) : e.data), L = _(() => Pe(e.spec, e.data, E(), w())), R = _(() => ke(E(), w(), L())), P = _(() => Object.fromEntries(e.audioUnitSpec.traversal.map((b) => {
+    const S = $(e.spec, b.field), T = N(S, b), D = te(T, R(), !0);
+    return [b.field, D];
+  }))), I = _(() => Object.fromEntries(e.audioUnitSpec.traversal.map((b) => {
+    const S = $(e.spec, b.field), T = N(S, b);
+    return [b.field, r.getAxisTicks(T)];
+  }))), B = _(() => ({
+    spec: e.spec,
+    audioUnitSpec: e.audioUnitSpec,
+    derivedData: R(),
+    fieldDomains: P(),
+    axisTicks: I(),
+    scales: i,
+    pauseBetweenSections: s.pauseBetweenSections
+  })), re = _(() => bt(B())), ae = (b, S) => ve(B(), b, S), se = _(() => St(B(), p.traversalState)), ye = (b) => re().find((S) => Object.entries(b).every(([T, D]) => S.state[T] === D));
+  F(() => {
+    if (s.isPlaying) {
+      const b = se();
+      t.setSelection({
+        source: "sonification",
+        predicate: b
+      });
+    }
+  }), F((b) => {
+    const S = P(), T = {
+      ...p.traversalState
+    };
+    let D = !1;
+    const m = {
+      ...T
+    };
+    return Object.entries(S).forEach(([v, y]) => {
+      const U = T[v], j = (b?.[v] ?? y)[U];
+      if (j !== void 0) {
+        const z = y.findIndex((oe) => oe === j);
+        z !== U && (m[v] = z !== -1 ? z : 0, D = !0);
+      }
+    }), D && (h((v) => ({
+      ...v,
+      traversalState: m
+    })), a.activeUnitName === e.audioUnitSpec.name && K.setupTransportSequence()), S;
+  }), F((b) => (b !== e.audioUnitSpec && K.setupTransportSequence(), e.audioUnitSpec));
+  const K = {
+    setTraversalIndex: (b, S) => {
+      c.stopTransport(), h((m) => ({
+        ...m,
+        traversalState: {
+          ...m.traversalState,
+          [b]: S
+        }
+      })), a.activeUnitName === e.audioUnitSpec.name && (u.setActiveUnit(e.audioUnitSpec.name), K.setupTransportSequence());
+      const T = se();
+      t.setSelection({
+        source: "sonification",
+        predicate: T
+      });
+      const D = ye(p.traversalState);
+      D && (s.transport.seconds = D.time, c.playNote(D));
+    },
+    getTraversalIndex: (b) => p.traversalState[b],
+    setupTransportSequence: () => {
+      s.transport.cancel(), s.transport.bpm.value = ne;
+      const b = re();
+      b.forEach((S, T) => {
+        Object.entries(S.state).every(([D, m]) => p.traversalState[D] === m) && (s.transport.seconds = S.time), s.transport.schedule(() => {
+          if (s.isPlaying)
+            if (h((D) => ({
+              ...D,
+              traversalState: S.state
+            })), S.speakBefore && s.speakAxisTicks && !s.muted) {
+              s.transport.pause(), c.releaseSynth(), speechSynthesis.cancel();
+              const D = new SpeechSynthesisUtterance(S.speakBefore);
+              D.voice = o() ?? null, D.rate = s.speechRate / 25, D.onend = () => {
+                s.isPlaying && (S.ramp ? c.startOrRampSynth(S) : c.playNote(S), s.transport.start());
+              }, speechSynthesis.speak(D);
+            } else
+              S.ramp ? c.startOrRampSynth(S) : c.playNote(S);
+        }, S.time), S.pauseAfter && s.transport.schedule(() => {
+          c.releaseSynth();
+        }, S.time + S.duration), T === b.length - 1 && s.transport.schedule(() => {
+          c.stopTransport();
+        }, S.time + S.duration);
+      }), s.transport.bpm.value = ne * s.playbackRate;
+    },
+    getFieldDomains: P,
+    getDerivedData: R,
+    resetTraversalIfEnd: () => {
+      const b = e.audioUnitSpec.traversal.map((D) => D.field), S = p.traversalState;
+      b.every((D) => S[D] === P()[D].length - 1) && (h(f()), s.transport.seconds = 0);
+    },
+    getDomainValue: ae,
+    describeEncodings: () => Et(B()),
+    describePlaybackOrder: () => wt(B())
+  };
+  return g(Oe.Provider, {
+    value: [p, K],
+    get children() {
+      return e.children;
+    }
+  });
+}
+function he() {
+  const e = Z(Oe);
+  if (e === void 0)
+    throw new Error("useAudioUnitState must be used within a AudioUnitStateProvider");
+  return e;
+}
+const Dt = x("div")`
+  margin-bottom: 3px;
+
+  label {
+    display: grid;
+    grid-template-columns: 25% auto;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  label > * {
+    justify-self: start;
+  }
+`, Ve = `
+  font-family: monospace;
+`, Ut = x("div")`
+  border-left: 1px solid #ccc;
+  padding-left: 1rem;
+`;
+x("form")`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+`;
+x("input")`
+  flex: 1;
+`;
+x("div")`
+  color: red;
+  font-size: 14px;
+`;
+x("div")`
+  margin-top: 0.5rem;
+  display: grid;
+  grid-template-columns: 25% auto;
+  gap: 1rem;
+
+  h5 {
+    margin: 0;
+  }
+`;
+x("div")`
+  > * {
+    margin-bottom: 3px;
+  }
+`;
+x("div")`
+  display: flex;
+  gap: 3px;
+`;
+x("div")`
+  margin-top: 1em;
+`;
+x("h4")`
+  ${Ve}
+`;
+x("div")`
+  ${Ve}
+`;
+x("table")`
+  border: 1px solid #ccc;
+  ${Ve}
+`;
+x("button")`
+  margin-top: 1rem;
+`;
+x("div")`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+var Bn = /* @__PURE__ */ A("<select>"), zn = /* @__PURE__ */ A("<div><input aria-live=assertive type=range min=0><span>"), Gn = /* @__PURE__ */ A("<label><span>"), Kn = /* @__PURE__ */ A("<option>");
+function At(e) {
+  const [n, t] = he(), [i, r] = Q(), a = () => $(e.spec, e.traversalFieldDef.field), u = () => N(a(), e.traversalFieldDef), s = () => t.getTraversalIndex(e.traversalFieldDef.field), c = (l) => {
+    r.startAudioContext(), t.setTraversalIndex(e.traversalFieldDef.field, l);
+  }, o = () => t.getFieldDomains()[e.traversalFieldDef.field], d = () => t.getDomainValue(e.traversalFieldDef.field, s());
+  return g(Dt, {
+    get children() {
+      var l = Gn(), f = l.firstChild;
+      return k(f, () => H(u())), k(l, g(Pt, {
+        get children() {
+          return [g(Ie, {
+            get when() {
+              return u().type === "nominal";
+            },
+            get children() {
+              var p = Bn();
+              return p.$$mousedown = () => r.stopTransport(), p.addEventListener("change", (h) => c(h.target.selectedIndex)), k(p, g(ee, {
+                get each() {
+                  return o();
+                },
+                children: (h) => (() => {
+                  var w = Kn();
+                  return k(w, () => String(h)), q(() => w.value = String(h)), w;
+                })()
+              })), q(() => p.value = String(d())), p;
+            }
+          }), g(Ie, {
+            get when() {
+              return u().type !== "nominal";
+            },
+            get children() {
+              var p = zn(), h = p.firstChild, w = h.nextSibling;
+              return h.$$mousedown = () => r.stopTransport(), h.$$input = (E) => c(E.currentTarget.valueAsNumber), k(w, () => G(d(), u())), q((E) => {
+                var L = G(d(), u()), R = o().length - 1;
+                return L !== E.e && Re(h, "aria-valuetext", E.e = L), R !== E.t && Re(h, "max", E.t = R), E;
+              }, {
+                e: void 0,
+                t: void 0
+              }), q(() => h.value = s()), p;
+            }
+          })];
+        }
+      }), null), l;
+    }
+  });
+}
+We(["mousedown", "input"]);
+var Hn = /* @__PURE__ */ A("<button>Pause"), Jn = /* @__PURE__ */ A("<div>"), Yn = /* @__PURE__ */ A("<button>Play");
+function $t(e) {
+  const [n, t] = he(), [i, r] = Q(), [a, u] = ge();
+  function s() {
+    r.startAudioContext(), a.activeUnitName !== e.unitName && (u.setActiveUnit(e.unitName), t.setupTransportSequence()), t.resetTraversalIfEnd(), r.startTransport();
+  }
+  return Ze(() => u.registerPlayCallback(s)), F(() => {
+    a.activeUnitName === e.unitName && u.registerPlayCallback(s, !0);
+  }), (() => {
+    var c = Jn();
+    return k(c, g(Qe, {
+      get when() {
+        return le(() => !!i.isPlaying)() && a.activeUnitName === e.unitName;
+      },
+      get fallback() {
+        return (() => {
+          var o = Yn();
+          return o.$$click = () => s(), o;
+        })();
+      },
+      get children() {
+        var o = Hn();
+        return o.$$click = () => r.stopTransport(), o;
+      }
+    })), c;
+  })();
+}
+We(["click"]);
+var Xn = /* @__PURE__ */ A("<label> <input readonly>"), Wn = /* @__PURE__ */ A("<p><br>playing ");
+const Zn = x.div`
+  margin-bottom: 1em;
+`;
+function Qn(e) {
+  function n() {
+    return g(Zn, {
+      get children() {
+        return g(ee, {
+          get each() {
+            return Object.entries(e.audioUnitSpec.encoding);
+          },
+          children: ([i, r]) => {
+            if (r) {
+              const a = $(e.spec, r.field);
+              if (a) {
+                const u = N(a, r);
+                return g(Dt, {
+                  get children() {
+                    var s = Xn(), c = s.firstChild, o = c.nextSibling;
+                    return k(s, i, c), q(() => o.value = H(u)), s;
+                  }
+                });
+              }
+            }
+          }
+        });
+      }
+    });
+  }
+  function t() {
+    const [i, r] = he();
+    return (() => {
+      var a = Wn(), u = a.firstChild;
+      return u.nextSibling, k(a, () => r.describeEncodings(), u), k(a, () => r.describePlaybackOrder(), null), a;
+    })();
+  }
+  return Object.keys(e.audioUnitSpec.encoding).length === 0 ? null : g(Ut, {
+    get children() {
+      return g(Fn, {
+        get spec() {
+          return e.spec;
+        },
+        get data() {
+          return e.data;
+        },
+        get audioUnitSpec() {
+          return e.audioUnitSpec;
+        },
+        get children() {
+          return g(Mn, {
+            get spec() {
+              return e.spec;
+            },
+            get data() {
+              return e.data;
+            },
+            get audioUnitSpec() {
+              return e.audioUnitSpec;
+            },
+            get children() {
+              return [g(t, {}), g(n, {}), g(ee, {
+                get each() {
+                  return e.audioUnitSpec.traversal;
+                },
+                children: (i) => g(At, {
+                  get spec() {
+                    return e.spec;
+                  },
+                  traversalFieldDef: i
+                })
+              }), g($t, {
+                get unitName() {
+                  return e.audioUnitSpec.name;
+                }
+              })];
+            }
+          });
+        }
+      });
+    }
+  });
+}
+function ei(e) {
+  const [n, t] = ie(), [i, r] = ge(), [a, u] = Q(), [s, c] = C(), o = () => {
+    const m = speechSynthesis.getVoices(), v = m.find((O) => O.name === "Samantha"), y = m.find((O) => O.localService && O.default), U = m.find((O) => O.default);
+    c(v ?? y ?? U);
+  };
+  o(), speechSynthesis.addEventListener("voiceschanged", o), J(() => speechSynthesis.removeEventListener("voiceschanged", o));
+  const d = () => e.units[0], l = () => d().traversal, f = () => ({
+    traversalState: Object.fromEntries(l().map((m) => [m.field, 0]))
+  }), [p, h] = me(f()), w = _(() => {
+    const m = i.selection;
+    return e.units.map((v) => {
+      const y = _e(e.spec, v), U = m ? Ne(e.data, m) : e.data, O = Pe(e.spec, e.data, U, y), j = ke(U, y, O), z = ht(e.spec, e.data, v);
+      return {
+        unit: v,
+        derivedData: j,
+        scales: z
+      };
+    });
+  }), E = _(() => {
+    const m = w().flatMap((v) => v.derivedData);
+    return Object.fromEntries(l().map((v) => {
+      const y = $(e.spec, v.field), U = N(y, v);
+      return [v.field, te(U, m, !0)];
+    }));
+  }), L = _(() => Object.fromEntries(l().map((m) => [m.field, yt(e.spec, e.data, m.field)]))), R = (m, v, y) => ({
+    spec: e.spec,
+    audioUnitSpec: m,
+    derivedData: v,
+    fieldDomains: E(),
+    axisTicks: L(),
+    scales: y,
+    pauseBetweenSections: a.pauseBetweenSections
+  }), P = _(() => {
+    const m = w()[0];
+    return R(m.unit, m.derivedData, m.scales);
+  }), I = _(() => w().map((m, v) => ({
+    voiceId: m.unit.name,
+    oscType: _n(v),
+    notes: bt(R(m.unit, m.derivedData, m.scales))
+  }))), B = _(() => qn(I().map((m) => ({
+    voiceId: m.voiceId,
+    notes: m.notes
+  })))), re = (m) => B().find((v) => Object.entries(m).every(([y, U]) => v.state[y] === U)), ae = _(() => St(P(), p.traversalState)), se = () => E(), ye = (m, v) => ve(P(), m, v), K = () => i.activeUnitName === e.groupName;
+  F(() => {
+    a.isPlaying && t.setSelection({
+      source: "sonification",
+      predicate: ae()
+    });
+  }), F((m) => {
+    const v = E(), y = {
+      ...p.traversalState
+    };
+    let U = !1;
+    const O = {
+      ...y
+    };
+    return Object.entries(v).forEach(([j, z]) => {
+      const oe = y[j], Ce = (m?.[j] ?? z)[oe];
+      if (Ce !== void 0) {
+        const Se = z.findIndex((kt) => kt === Ce);
+        Se !== oe && (O[j] = Se !== -1 ? Se : 0, U = !0);
+      }
+    }), U && (h((j) => ({
+      ...j,
+      traversalState: O
+    })), K() && D.setupTransportSequence()), v;
+  }), F((m) => (m !== e.units && D.setupTransportSequence(), e.units));
+  const b = () => I().forEach(({
+    voiceId: m,
+    oscType: v
+  }) => u.ensureVoice(m, v)), S = (m) => {
+    m.notes.forEach(({
+      voiceId: v,
+      note: y
+    }) => {
+      m.ramp ? u.startOrRampSynth(y, v) : u.playNote(y, v);
+    });
+  }, T = (m) => {
+    m.notes.forEach(({
+      voiceId: v,
+      note: y
+    }) => u.playNote(y, v));
+  }, D = {
+    setTraversalIndex: (m, v) => {
+      u.stopTransport(), h((U) => ({
+        ...U,
+        traversalState: {
+          ...U.traversalState,
+          [m]: v
+        }
+      })), K() && (r.setActiveUnit(e.groupName), D.setupTransportSequence()), t.setSelection({
+        source: "sonification",
+        predicate: ae()
+      }), b();
+      const y = re(p.traversalState);
+      y && (a.transport.seconds = y.time, T(y));
+    },
+    getTraversalIndex: (m) => p.traversalState[m],
+    getFieldDomains: se,
+    getDerivedData: () => P().derivedData,
+    getDomainValue: ye,
+    setupTransportSequence: () => {
+      a.transport.cancel(), a.transport.bpm.value = ne, b();
+      const m = B();
+      m.forEach((y) => {
+        Object.entries(y.state).every(([U, O]) => p.traversalState[U] === O) && (a.transport.seconds = y.time), a.transport.schedule(() => {
+          if (a.isPlaying)
+            if (h((U) => ({
+              ...U,
+              traversalState: y.state
+            })), y.speakBefore && a.speakAxisTicks && !a.muted) {
+              a.transport.pause(), u.releaseSynth(), speechSynthesis.cancel();
+              const U = new SpeechSynthesisUtterance(y.speakBefore);
+              U.voice = s() ?? null, U.rate = a.speechRate / 25, U.onend = () => {
+                a.isPlaying && (S(y), a.transport.start());
+              }, speechSynthesis.speak(U);
+            } else
+              S(y);
+        }, y.time), y.pauseAfter && a.transport.schedule(() => u.releaseSynth(), y.time + y.slotDuration);
+      });
+      const v = m[m.length - 1];
+      v && a.transport.schedule(() => u.stopTransport(), v.time + v.slotDuration), a.transport.bpm.value = ne * a.playbackRate;
+    },
+    resetTraversalIfEnd: () => {
+      const m = E();
+      l().every((y) => p.traversalState[y.field] === m[y.field].length - 1) && (h(f()), a.transport.seconds = 0);
+    },
+    describeEncodings: () => e.units.map((m, v) => `layer ${v + 1}: ${Et(R(m, w()[v].derivedData, w()[v].scales))}`).join("; "),
+    describePlaybackOrder: () => wt(P())
+  };
+  return g(Oe.Provider, {
+    value: [p, D],
+    get children() {
+      return e.children;
+    }
+  });
+}
+var ti = /* @__PURE__ */ A("<p><br>playing ");
+const Ye = "layer-group";
+function ni() {
+  const [e, n] = he();
+  return (() => {
+    var t = ti(), i = t.firstChild;
+    return i.nextSibling, k(t, () => n.describeEncodings(), i), k(t, () => n.describePlaybackOrder(), null), t;
+  })();
+}
+function ii(e) {
+  const n = () => e.units.filter((i) => Object.keys(i.encoding).length > 0);
+  if (n().length === 0)
+    return null;
+  const t = () => n()[0].traversal;
+  return g(Ut, {
+    get children() {
+      return g(ei, {
+        get spec() {
+          return e.spec;
+        },
+        get data() {
+          return e.data;
+        },
+        get units() {
+          return n();
+        },
+        groupName: Ye,
+        get children() {
+          return [g(ni, {}), g(ee, {
+            get each() {
+              return t();
+            },
+            children: (i) => g(At, {
+              get spec() {
+                return e.spec;
+              },
+              traversalFieldDef: i
+            })
+          }), g($t, {
+            unitName: Ye
+          })];
+        }
+      });
+    }
+  });
+}
+var ri = /* @__PURE__ */ A("<div><label>Playback rate <input type=number min=0.1 max=4 step=0.1 id=rate>x"), ai = /* @__PURE__ */ A("<label><input type=checkbox>Speak axis ticks"), si = /* @__PURE__ */ A("<label><input type=number min=1 max=100 step=10 id=speechRate>speech rate"), oi = /* @__PURE__ */ A("<div><label><input type=checkbox aria-live=polite>");
+const ci = x.div`
+  margin-top: 1rem;
+`, li = x.div`
+  display: flex;
+  gap: 3px;
+`;
+function ui(e) {
+  const [n, t] = Q();
+  return g(ci, {
+    get children() {
+      return [(() => {
+        var i = ri(), r = i.firstChild, a = r.firstChild, u = a.nextSibling;
+        return u.addEventListener("change", (s) => t.setPlaybackRate(Number(s.target.value))), q(() => u.value = n.playbackRate), i;
+      })(), g(li, {
+        get children() {
+          return [(() => {
+            var i = ai(), r = i.firstChild;
+            return r.addEventListener("change", (a) => t.setSpeakAxisTicks(a.target.checked)), q(() => r.checked = n.speakAxisTicks), i;
+          })(), (() => {
+            var i = si(), r = i.firstChild;
+            return r.addEventListener("change", (a) => t.setSpeechRate(Number(a.target.value))), q(() => r.value = n.speechRate), i;
+          })()];
+        }
+      }), (() => {
+        var i = oi(), r = i.firstChild, a = r.firstChild;
+        return a.addEventListener("change", (u) => t.setMuted(u.target.checked)), k(r, () => n.muted ? "Muted" : "Unmuted", null), q(() => a.checked = n.muted), i;
+      })()];
+    }
+  });
+}
+function di() {
+  const e = document.activeElement;
+  if (!e) return !1;
+  const n = e.tagName.toLowerCase();
+  return n === "input" || n === "select" || n === "textarea" || e.isContentEditable;
+}
+function fi(e) {
+  const n = (t) => {
+    if (di()) return;
+    const i = e[t.key];
+    i && (t.preventDefault(), i());
+  };
+  Ze(() => document.addEventListener("keydown", n)), J(() => document.removeEventListener("keydown", n));
+}
+function mi() {
+  const [e, n] = Q(), [t, i] = ge();
+  return fi({
+    p: () => {
+      e.isPlaying ? n.stopTransport() : i.triggerPlay();
+    }
+  }), null;
+}
+function pi(e) {
+  const n = () => e.spec.audio.composition === "layer" && e.spec.audio.units.length > 1;
+  return g($n, {
+    get children() {
+      return g(Nn, {
+        get children() {
+          return [g(mi, {}), g(Qe, {
+            get when() {
+              return n();
+            },
+            get fallback() {
+              return g(ee, {
+                get each() {
+                  return e.spec.audio.units;
+                },
+                children: (t) => g(Qn, {
+                  get spec() {
+                    return e.spec;
+                  },
+                  get data() {
+                    return e.data;
+                  },
+                  audioUnitSpec: t
+                })
+              });
+            },
+            get children() {
+              return g(ii, {
+                get spec() {
+                  return e.spec;
+                },
+                get data() {
+                  return e.data;
+                },
+                get units() {
+                  return e.spec.audio.units;
+                }
+              });
+            }
+          }), g(ui, {})];
+        }
+      });
+    }
+  });
+}
+var gi = /* @__PURE__ */ A("<h2>Visualization"), vi = /* @__PURE__ */ A("<h2>Description"), hi = /* @__PURE__ */ A("<h2>Sonification"), yi = /* @__PURE__ */ A('<div><div class=uw-viewer role=region aria-label="Umwelt Viewer">');
+function Si(e) {
+  return (() => {
+    var n = yi(), t = n.firstChild;
+    return k(t, g(En, {
+      get children() {
+        return [gi(), g(Dn, {
+          get spec() {
+            return e.spec;
+          },
+          get data() {
+            return e.data;
+          }
+        }), vi(), g(An, {
+          get spec() {
+            return e.spec;
+          },
+          get data() {
+            return e.data;
+          }
+        }), hi(), g(pi, {
+          get spec() {
+            return e.spec;
+          },
+          get data() {
+            return e.data;
+          }
+        })];
+      }
+    })), q(() => _t(n, rn.Viewer)), n;
+  })();
+}
+function Xe(e, n, t = localStorage) {
+  const i = t.getItem(e) ? JSON.parse(t.getItem(e)) : n, [r, a] = C(i);
+  return [r, ((s) => {
+    if (s) {
+      const c = a(s);
+      return t.setItem(e, JSON.stringify(c)), c;
+    }
+  })];
+}
+const Tt = W();
+function bi(e) {
+  const n = e.persist !== !1, [t, i] = n ? Xe("umweltDatastore", {}) : C({}), [r, a] = n ? Xe("umweltSessionDatastore", {}, sessionStorage) : C({}), u = () => ({
+    ...t(),
+    ...r()
+  }), s = {
+    setDataset: (c, o, d, l) => {
+      l?.session ? a((f) => ({
+        ...f,
+        [c]: {
+          data: o,
+          sourceUrl: d
+        }
+      })) : i((f) => ({
+        ...f,
+        [c]: {
+          data: o,
+          sourceUrl: f[c]?.sourceUrl || d
+        }
+      }));
+    },
+    removeDataset: (c) => {
+      i((o) => {
+        const d = {
+          ...o
+        };
+        return delete d[c], d;
+      }), s.removeSessionDataset(c);
+    },
+    removeSessionDataset: (c) => {
+      a((o) => {
+        const d = {
+          ...o
+        };
+        return delete d[c], d;
+      });
+    }
+  };
+  return g(Tt.Provider, {
+    value: [u, s],
+    get children() {
+      return e.children;
+    }
+  });
+}
+function Ei() {
+  const e = Z(Tt);
+  if (e === void 0)
+    throw new Error("useUmweltDatastore must be used within a UmweltDatastoreProvider");
+  return e;
+}
+var wi = /* @__PURE__ */ A("<div>"), Di = /* @__PURE__ */ A("<div>Loading..."), Ui = /* @__PURE__ */ A("<div role=alert>");
+function Ai(e) {
+  const [n, t] = Ei(), [i, r] = C(), [a, u] = C(!0), [s, c] = C(), o = () => {
+    const d = i();
+    return d ? n()[d.data.name]?.data || [] : [];
+  };
+  return F(async () => {
+    const d = e.exportableSpec;
+    u(!0), c(void 0);
+    try {
+      const l = await vn(d, n(), t.setDataset);
+      l ? r(l) : c("Failed to load Umwelt spec: the spec is invalid or its data source could not be resolved.");
+    } catch (l) {
+      console.error("Error loading spec:", l), c(`Failed to load Umwelt spec: ${l}`);
+    } finally {
+      u(!1);
+    }
+  }), (() => {
+    var d = wi();
+    return k(d, (() => {
+      var l = le(() => !!a());
+      return () => l() && Di();
+    })(), null), k(d, (() => {
+      var l = le(() => !!(!a() && s()));
+      return () => l() && (() => {
+        var f = Ui();
+        return k(f, s), f;
+      })();
+    })(), null), k(d, (() => {
+      var l = le(() => !!(!a() && !s() && i()));
+      return () => l() && g(Si, {
+        get spec() {
+          return i();
+        },
+        get data() {
+          return o();
+        }
+      });
+    })(), null), d;
+  })();
+}
+function $i(e) {
+  return g(bi, {
+    persist: !1,
+    get children() {
+      return g(Ai, {
+        get exportableSpec() {
+          return e.exportableSpec;
+        }
+      });
+    }
+  });
+}
+class Ti {
+  constructor(n) {
+    this.options = n, this.mount();
+  }
+  disposal;
+  isDestroyed = !1;
+  mount() {
+    if (this.isDestroyed)
+      throw new Error("Cannot mount a destroyed UmweltViewer. Create a new instance.");
+    this.disposal = Nt(() => $i({ exportableSpec: this.options.spec }), this.options.container);
+  }
+  /**
+   * Update the viewer with a new specification.
+   * This will re-render the entire viewer with the new data and configuration.
+   */
+  updateSpec(n) {
+    if (this.isDestroyed)
+      throw new Error("Cannot update a destroyed UmweltViewer.");
+    this.cleanup(), this.options.spec = n, this.mount();
+  }
+  /**
+   * Get the current specification.
+   */
+  getSpec() {
+    return this.options.spec;
+  }
+  /**
+   * Get the container element.
+   */
+  getContainer() {
+    return this.options.container;
+  }
+  cleanup() {
+    this.disposal && (this.disposal(), this.disposal = void 0);
+  }
+  /**
+   * Destroy the viewer and clean up all resources.
+   * The viewer cannot be used after calling this method.
+   */
+  destroy() {
+    this.cleanup(), this.isDestroyed = !0;
+  }
+  /**
+   * Check if the viewer has been destroyed.
+   */
+  getIsDestroyed() {
+    return this.isDestroyed;
+  }
+}
+function Xi(e, n) {
+  return new Ti({ spec: e, container: n });
+}
+export {
+  Ti as UmweltViewer,
+  Xi as createViewer
+};