@weasel-js/diagram 1.10.1 → 1.11.1

package/dist/effect-audio.d.ts

@@ -0,0 +1,138 @@
+import { GraphNodeDef, GraphTarget, GraphPatch, AnalyserTap, AudioEngine } from '@weasel-js/audio';
+import { E as EffectPipeline, a as EffectRun, b as EffectStageType } from './stageTypes-DvnR8cKQ.js';
+import { VisibleRafOptions } from '@weasel-js/react';
+import '@weasel-js/core';
+import '@weasel-js/core/math';
+
+/** What a run supplies to its source stages. */
+interface AudioSources {
+    audio?: AudioBuffer;
+}
+type Values = Readonly<Record<string, unknown>>;
+/** How one stage type becomes a graph node: its settings, its levels, and the node it builds. */
+interface AudioStageNode {
+    /** The stage's discrete settings, from its param values and the run's sources. Throws to fail the stage. */
+    settings(params: Values, sources: AudioSources): Values;
+    /** The ids of its numeric params, each a `params` key of the def `build` returns. */
+    levels: readonly string[];
+    build(ctx: BaseAudioContext, settings: Values, levels: Readonly<Record<string, number>>): GraphNodeDef;
+}
+/** The graph node of each stage type, by `type`. */
+type AudioStageNodes = Readonly<Record<string, AudioStageNode>>;
+/** The graph node each stage type builds; `audio.output` has none. */
+declare const audioStageNodes: AudioStageNodes;
+
+/** A node the plan builds: its stage type, its discrete settings and its numeric levels. */
+interface PlanNode {
+    type: string;
+    settings: Readonly<Record<string, unknown>>;
+    levels: Readonly<Record<string, number>>;
+}
+/** A connection the plan makes, from a node to another node's port or to the graph's output. */
+interface PlanEdge {
+    from: string;
+    to: GraphTarget;
+}
+/** The graph an audio pipeline should play: what to build, how it connects, and which stages it left out. */
+interface LivePlan {
+    nodes: Readonly<Record<string, PlanNode>>;
+    /** Sorted by `edgeKey`, so equal plans compare equal. */
+    edges: readonly PlanEdge[];
+    /** Why a stage is not in `nodes`, by stage id. A stage left out for want of input has none. */
+    errors: Readonly<Record<string, string>>;
+}
+/** The plan of a graph holding nothing. */
+declare const EMPTY_PLAN: LivePlan;
+/** Compiles the audio stages of `pipeline`; stages of other types are ignored. */
+declare function livePlan(pipeline: EffectPipeline, nodes: AudioStageNodes, sources: AudioSources): LivePlan;
+
+/** Makes the def for a node that is added or replaced. */
+type BuildNode = (id: string, node: PlanNode) => GraphNodeDef;
+/** The patches that turn the graph `prev` describes into the one `next` describes. */
+declare function diffPlans(prev: LivePlan, next: LivePlan, build: BuildNode): GraphPatch[];
+
+/** What a stage's preview slot shows while its graph plays. */
+type AudioPreview = 'off' | 'scope' | 'spectrum';
+type Size = {
+    width: number;
+    height: number;
+};
+/** The waveform as a line across the bitmap, silence at mid-height. */
+declare function drawScope(tap: AnalyserTap, size: Size): ImageBitmap;
+/** The spectrum as filled bars rising from the bottom, low frequencies on the left. */
+declare function drawSpectrum(tap: AnalyserTap, size: Size): ImageBitmap;
+
+/** What a live runner last published: its run, and whether it plays. */
+interface LiveAudioRunnerState {
+    run: EffectRun | undefined;
+    playing: boolean;
+}
+/** What a live runner plays, and through which engine. */
+interface LiveAudioRunnerOptions {
+    engine: AudioEngine;
+    pipeline: EffectPipeline;
+    nodes?: AudioStageNodes;
+    sources?: AudioSources;
+    /** The engine bus the graph plays through. */
+    bus?: string;
+}
+/** Plays an audio pipeline through a patchable graph, editing the graph as the pipeline changes. */
+interface LiveAudioRunner {
+    readonly state: LiveAudioRunnerState;
+    /** The graph follows `pipeline` while it plays, or while it does not. */
+    setPipeline(pipeline: EffectPipeline): void;
+    /** A new buffer replaces each file node. */
+    setSources(sources: AudioSources): void;
+    /** Unlocks the engine, then starts the graph. */
+    play(): Promise<void>;
+    pause(): void;
+    /** Which stages draw into their `out` preview: a scope, a spectrum, or none. Takes effect on the next `frame`. */
+    setPreviews(mode: AudioPreview): void;
+    /** Publishes a run with each tapped stage's preview drawn from its tap's current window. */
+    frame(): void;
+    /** Call after the render that shows `run`: the bitmaps of earlier runs are closed. */
+    drawn(run: EffectRun | undefined): void;
+    /** A fresh graph holding the current plan, not playing: files start again from 0. */
+    reset(): void;
+    subscribe(listener: () => void): () => void;
+    /** Disposes the graph; the runner does nothing after. The engine is the caller's. */
+    dispose(): void;
+}
+/** A runner over `opts.pipeline` holding a fresh graph on `opts.engine`, not playing. */
+declare function createLiveAudioRunner(opts: LiveAudioRunnerOptions): LiveAudioRunner;
+
+/** Stage types over audio, each with a graph node in `audioStageNodes` except
+ *  `audio.output`, which is the graph's own output. Every `type` is prefixed
+ *  because `IMAGE_STAGE_TYPES` already has an `oscillator`. */
+declare const AUDIO_STAGE_TYPES: readonly EffectStageType[];
+
+/** What `useFollowAudioRunner` keeps a runner following, and how its preview loop is gated. */
+interface FollowAudioRunnerOptions extends Pick<VisibleRafOptions, 'target' | 'requestFrame' | 'cancelFrame'> {
+    pipeline: EffectPipeline;
+    sources?: AudioSources;
+    previews: AudioPreview;
+    /** The nodes the plan is read with while there is no runner. */
+    nodes?: AudioStageNodes;
+}
+/**
+ * Keeps a caller-owned `runner` following `pipeline`, `sources` and `previews`, draws its previews every
+ * visible frame while it plays, and closes the bitmaps of runs no render shows. While `runner` is null,
+ * the run holds the plan's errors, so a stage that cannot play says why before any engine exists.
+ */
+declare function useFollowAudioRunner(runner: LiveAudioRunner | null, opts: FollowAudioRunnerOptions): LiveAudioRunnerState;
+
+/** Options for `useLiveAudioRunner`: the runner's, which it follows as they change, and how its preview loop is gated. */
+interface UseLiveAudioRunnerOptions extends LiveAudioRunnerOptions, Pick<FollowAudioRunnerOptions, 'previews' | 'target' | 'requestFrame' | 'cancelFrame'> {
+}
+/** What `useLiveAudioRunner` returns: the runner's state, and the runner to drive, null until it mounts. */
+interface LiveAudioRunnerHandle extends LiveAudioRunnerState {
+    runner: LiveAudioRunner | null;
+}
+/**
+ * A runner made on mount and remade when `engine`, `bus` or `nodes` change, following `pipeline`,
+ * `sources` and `previews` through `useFollowAudioRunner`, and disposed on unmount. Before the first
+ * mount the runner is null and the run holds the plan's errors. The engine is the caller's.
+ */
+declare function useLiveAudioRunner(opts: UseLiveAudioRunnerOptions): LiveAudioRunnerHandle;
+
+export { AUDIO_STAGE_TYPES, type AudioPreview, type AudioSources, type AudioStageNode, type AudioStageNodes, type BuildNode, EMPTY_PLAN, type FollowAudioRunnerOptions, type LiveAudioRunner, type LiveAudioRunnerHandle, type LiveAudioRunnerOptions, type LiveAudioRunnerState, type LivePlan, type PlanEdge, type PlanNode, type UseLiveAudioRunnerOptions, audioStageNodes, createLiveAudioRunner, diffPlans, drawScope, drawSpectrum, livePlan, useFollowAudioRunner, useLiveAudioRunner };

package/dist/effect-audio.js

@@ -0,0 +1,527 @@
+import { formatParam, uniqueStages, runOrder, paramValues, PREVIEW_DENSITY, closeBitmaps, previewsOf, PREVIEW_SIZE } from './chunk-QKSWZEJH.js';
+import './chunk-43LDZ6L4.js';
+import './chunk-IM6DHWZO.js';
+import { createMixNode, createFileSourceNode, compressorNode, reverbNode, delayNode, filterNode, createPanNode, createGainNode, createNoiseNode, createOscillatorNode } from '@weasel-js/audio';
+import { useEffect, useSyncExternalStore, useMemo, useState } from 'react';
+import { useVisibleRaf, useLatest } from '@weasel-js/react';
+
+var node = (settingIds, levels, make) => ({
+  settings: (params) => Object.fromEntries(settingIds.filter((id) => params[id] !== void 0).map((id) => [id, params[id]])),
+  levels,
+  build: (ctx, settings, levels2) => make(ctx, { ...settings, ...levels2 })
+});
+var audioStageNodes = {
+  "audio.file": {
+    settings: (_params, sources) => {
+      if (!sources.audio) throw new Error("no source audio");
+      return { buffer: sources.audio };
+    },
+    levels: [],
+    build: (ctx, settings) => createFileSourceNode(ctx, { buffer: settings.buffer, loop: true })
+  },
+  "audio.oscillator": node(["wave"], ["frequency"], createOscillatorNode),
+  "audio.noise": node(["color"], [], createNoiseNode),
+  "audio.gain": node([], ["gain"], createGainNode),
+  "audio.pan": node([], ["pan"], createPanNode),
+  "audio.filter": node(["type"], ["frequency", "Q"], filterNode),
+  "audio.delay": node([], ["time", "feedback", "mix"], delayNode),
+  "audio.reverb": node(["seconds"], ["mix"], reverbNode),
+  "audio.compressor": node([], ["threshold", "ratio"], compressorNode),
+  "audio.mix": {
+    settings: () => ({}),
+    levels: ["a", "b"],
+    build: (ctx, _settings, levels) => {
+      const def = createMixNode(ctx, { inputs: ["a", "b"] });
+      for (const id of ["a", "b"]) if (levels[id] !== void 0) def.params[id](levels[id], 0);
+      return def;
+    }
+  }
+};
+
+// src/effect/audio/plan.ts
+var EMPTY_PLAN = { nodes: {}, edges: [], errors: {} };
+var OUTPUT_TYPE = "audio.output";
+var edgeKey = (e) => JSON.stringify([e.from, "output" in e.to ? null : [e.to.node, e.to.port]]);
+function levelsOf(levels, params) {
+  const out = {};
+  for (const id of levels) {
+    const v = params[id];
+    if (typeof v === "number") out[id] = v;
+  }
+  return out;
+}
+function livePlan(pipeline, nodes, sources) {
+  const stages = /* @__PURE__ */ new Map();
+  for (const s of uniqueStages(pipeline)) {
+    if (s.type !== void 0 && (Object.hasOwn(nodes, s.type) || s.type === OUTPUT_TYPE)) stages.set(s.id, s);
+  }
+  const { order, cyclic } = runOrder(pipeline);
+  const planNodes = {};
+  const errors = {};
+  for (const id of cyclic) if (stages.has(id)) errors[id] = "on a feedback loop";
+  const origins = /* @__PURE__ */ new Map();
+  const edges = /* @__PURE__ */ new Map();
+  for (const id of order) {
+    const stage = stages.get(id);
+    if (stage === void 0) continue;
+    const isOutput = stage.type === OUTPUT_TYPE;
+    const bypassed = stage.bypassed === true && !isOutput;
+    const firstAudio = (stage.inputs ?? []).find((i) => i.type === "audio")?.id;
+    const fed = pipeline.wires.filter((w) => w.to.stage === id && stages.has(w.from.stage) && (!bypassed || w.to.port === firstAudio)).flatMap((w) => (origins.get(w.from.stage) ?? []).map((from) => ({ from, port: w.to.port })));
+    if ((stage.inputs?.length ?? 0) > 0 && fed.length === 0) continue;
+    if (bypassed) {
+      origins.set(id, [...new Set(fed.map((f) => f.from))]);
+      continue;
+    }
+    if (!isOutput) {
+      const entry = nodes[stage.type];
+      const params = paramValues(stage);
+      try {
+        planNodes[id] = { type: stage.type, settings: entry.settings(params, sources), levels: levelsOf(entry.levels, params) };
+      } catch (err) {
+        errors[id] = err instanceof Error ? err.message : String(err);
+        continue;
+      }
+      origins.set(id, [id]);
+    }
+    for (const f of fed) {
+      const edge = { from: f.from, to: isOutput ? { output: true } : { node: id, port: f.port } };
+      edges.set(edgeKey(edge), edge);
+    }
+  }
+  return {
+    nodes: planNodes,
+    edges: [...edges.values()].sort((a, b) => {
+      const [ka, kb] = [edgeKey(a), edgeKey(b)];
+      return ka < kb ? -1 : ka > kb ? 1 : 0;
+    }),
+    errors
+  };
+}
+
+// src/effect/audio/patches.ts
+function sameSettings(a, b) {
+  const keys = Object.keys(a);
+  return keys.length === Object.keys(b).length && keys.every((k) => k in b && Object.is(a[k], b[k]));
+}
+var touches = (e, ids) => ids.has(e.from) || "node" in e.to && ids.has(e.to.node);
+function diffPlans(prev, next, build) {
+  const prevIds = Object.keys(prev.nodes).sort();
+  const nextIds = Object.keys(next.nodes).sort();
+  const gone = /* @__PURE__ */ new Set();
+  const fresh = /* @__PURE__ */ new Set();
+  const groups = {
+    disconnect: [],
+    remove: [],
+    add: [],
+    replace: [],
+    set: [],
+    connect: []
+  };
+  for (const id of prevIds) {
+    const now = next.nodes[id];
+    if (now === void 0 || now.type !== prev.nodes[id].type) {
+      gone.add(id);
+      fresh.add(id);
+      groups.remove.push({ kind: "remove", id });
+    }
+  }
+  for (const id of nextIds) {
+    const now = next.nodes[id];
+    const was = prev.nodes[id];
+    if (was === void 0 || gone.has(id)) {
+      fresh.add(id);
+      groups.add.push({ kind: "add", id, def: build(id, now) });
+    } else if (!sameSettings(was.settings, now.settings)) {
+      groups.replace.push({ kind: "replace", id, def: build(id, now) });
+    } else {
+      for (const param2 of Object.keys(now.levels).sort()) {
+        const value = now.levels[param2];
+        if (!Object.is(was.levels[param2], value)) groups.set.push({ kind: "set", id, param: param2, value });
+      }
+    }
+  }
+  const nextKeys = new Set(next.edges.map(edgeKey));
+  const prevKeys = new Set(prev.edges.map(edgeKey));
+  for (const e of prev.edges) {
+    if (!nextKeys.has(edgeKey(e)) && !touches(e, gone)) {
+      groups.disconnect.push({ kind: "disconnect", from: e.from, to: e.to });
+    }
+  }
+  for (const e of next.edges) {
+    if (!prevKeys.has(edgeKey(e)) || touches(e, fresh)) groups.connect.push({ kind: "connect", from: e.from, to: e.to });
+  }
+  return [
+    ...groups.disconnect,
+    ...groups.remove,
+    ...groups.add,
+    ...groups.replace,
+    ...groups.set,
+    ...groups.connect
+  ];
+}
+
+// src/effect/audio/scope.ts
+var INK = "#8a8f98";
+var BANDS = 32;
+var LINE = 1.5;
+function canvasOf(size) {
+  const canvas = new OffscreenCanvas(
+    Math.max(1, Math.round(size.width * PREVIEW_DENSITY)),
+    Math.max(1, Math.round(size.height * PREVIEW_DENSITY))
+  );
+  return { canvas, g: canvas.getContext("2d"), w: canvas.width, h: canvas.height };
+}
+function drawScope(tap, size) {
+  const { canvas, g, w, h } = canvasOf(size);
+  const wave = tap.waveform();
+  g.strokeStyle = INK;
+  g.lineWidth = LINE * PREVIEW_DENSITY;
+  g.lineJoin = "round";
+  g.beginPath();
+  for (let x = 0; x < w; x += 1) {
+    const v = wave[Math.min(wave.length - 1, Math.floor(x / Math.max(1, w - 1) * (wave.length - 1)))] / 255;
+    const y = h - v * h;
+    if (x === 0) g.moveTo(x, y);
+    else g.lineTo(x, y);
+  }
+  g.stroke();
+  return canvas.transferToImageBitmap();
+}
+function drawSpectrum(tap, size) {
+  const { canvas, g, w, h } = canvasOf(size);
+  const bands = tap.bands(BANDS);
+  const slot = w / BANDS;
+  g.fillStyle = INK;
+  for (let i = 0; i < BANDS; i += 1) {
+    const bar = bands[i] * h;
+    g.fillRect(i * slot, h - bar, slot * 0.8, bar);
+  }
+  return canvas.transferToImageBitmap();
+}
+
+// src/effect/audio/livePreviews.ts
+var errorsRun = (errors) => ({ stages: Object.fromEntries(Object.entries(errors).map(([id, error]) => [id, { error }])) });
+function createLivePreviews() {
+  let mode = "off";
+  let taps = /* @__PURE__ */ new Map();
+  let published = [];
+  const tapAll = (graph, ids) => {
+    for (const id of ids) if (!taps.has(id)) taps.set(id, graph.tap(id));
+  };
+  const disposeTaps = () => {
+    for (const t of taps.values()) t.dispose();
+    taps = /* @__PURE__ */ new Map();
+  };
+  return {
+    mode: () => mode,
+    setMode(next, graph, ids) {
+      mode = next;
+      if (next === "off") disposeTaps();
+      else tapAll(graph, ids);
+    },
+    follow(graph, removed, planned) {
+      if (mode === "off") return;
+      for (const id of removed) taps.delete(id);
+      const live = new Set(planned);
+      for (const id of [...taps.keys()]) if (!live.has(id)) taps.delete(id);
+      tapAll(graph, planned);
+    },
+    restart() {
+      taps = /* @__PURE__ */ new Map();
+    },
+    draw(errors) {
+      if (mode === "off" || taps.size === 0) return void 0;
+      const paint = mode === "scope" ? drawScope : drawSpectrum;
+      const stages = { ...errorsRun(errors).stages };
+      for (const [id, tap] of taps) {
+        stages[id] = { ...stages[id], previews: { out: paint(tap, { width: PREVIEW_SIZE, height: PREVIEW_SIZE }) } };
+      }
+      return { stages };
+    },
+    track(run) {
+      published.push(run);
+    },
+    drawn(run) {
+      const at = run === void 0 ? published.length : published.indexOf(run);
+      if (at <= 0) return;
+      const keep = new Set(run === void 0 ? [] : previewsOf(run));
+      closeBitmaps(published.slice(0, at).flatMap(previewsOf).filter((b) => !keep.has(b)));
+      published = published.slice(at);
+    },
+    dispose() {
+      disposeTaps();
+      closeBitmaps(published.flatMap(previewsOf));
+      published = [];
+    }
+  };
+}
+
+// src/effect/audio/liveRunner.ts
+var messageOf = (err) => err instanceof Error ? err.message : String(err);
+var idsOf = (p) => "id" in p ? [p.id] : [p.from, ..."node" in p.to ? [p.to.node] : []];
+var failingStage = (patches, message) => patches.flatMap(idsOf).find((id) => message.includes(`"${id}"`));
+var sameErrors = (a, b) => {
+  const keys = Object.keys(a);
+  return keys.length === Object.keys(b).length && keys.every((k) => a[k] === b[k]);
+};
+function applySets(graph, sets, failures) {
+  if (sets.length === 0) return;
+  try {
+    graph.apply(sets);
+  } catch (err) {
+    console.warn(`@weasel-js/diagram: audio graph edit failed: ${messageOf(err)}`);
+    for (const p of sets) {
+      try {
+        graph.apply([p]);
+      } catch (one) {
+        if (p.kind === "set") failures[p.id] = messageOf(one);
+        break;
+      }
+    }
+  }
+}
+function createLiveAudioRunner(opts) {
+  const { engine, bus } = opts;
+  const nodes = opts.nodes ?? audioStageNodes;
+  let pipeline = opts.pipeline;
+  let sources = opts.sources ?? {};
+  let graph = engine.graph(bus);
+  let plan = EMPTY_PLAN;
+  let errors = {};
+  let state = { run: { stages: {} }, playing: false };
+  let disposed = false;
+  const listeners = /* @__PURE__ */ new Set();
+  const previews = createLivePreviews();
+  const set = (next) => {
+    const merged = { ...state, ...next };
+    if (merged.run === state.run && merged.playing === state.playing) return;
+    if (merged.run !== state.run && merged.run !== void 0) previews.track(merged.run);
+    state = merged;
+    for (const l of [...listeners]) l();
+  };
+  const publishErrors = (next) => {
+    if (sameErrors(errors, next)) return;
+    errors = next;
+    set({ run: errorsRun(next) });
+  };
+  const sync = (from) => {
+    const next = livePlan(pipeline, nodes, sources);
+    const merged = { ...next.errors };
+    let adopted = next;
+    let structural = [];
+    let removed = [];
+    let sets = [];
+    try {
+      const patches = diffPlans(from, next, (_id, n) => nodes[n.type].build(engine.context, n.settings, n.levels));
+      structural = patches.filter((p) => p.kind !== "set");
+      sets = patches.filter((p) => p.kind === "set");
+      if (structural.length > 0) graph.apply(structural);
+      removed = structural.flatMap((p) => p.kind === "remove" ? [p.id] : []);
+    } catch (err) {
+      const message = messageOf(err);
+      const id = failingStage(structural, message);
+      if (id !== void 0) merged[id] = message;
+      console.warn(`@weasel-js/diagram: audio graph edit failed: ${message}`);
+      adopted = from;
+      sets = [];
+    }
+    applySets(graph, sets, merged);
+    plan = adopted;
+    previews.follow(graph, removed, Object.keys(adopted.nodes));
+    publishErrors(merged);
+  };
+  sync(EMPTY_PLAN);
+  return {
+    get state() {
+      return state;
+    },
+    setPipeline(next) {
+      if (disposed) return;
+      pipeline = next;
+      sync(plan);
+    },
+    setSources(next) {
+      if (disposed) return;
+      sources = next;
+      sync(plan);
+    },
+    async play() {
+      if (disposed) return;
+      await engine.unlock();
+      if (disposed) return;
+      graph.start();
+      set({ playing: true });
+    },
+    pause() {
+      if (disposed) return;
+      graph.stop();
+      set({ playing: false });
+    },
+    setPreviews(mode) {
+      if (disposed) return;
+      previews.setMode(mode, graph, Object.keys(plan.nodes));
+      if (mode === "off") set({ run: errorsRun(errors) });
+    },
+    frame() {
+      if (disposed) return;
+      const run = previews.draw(errors);
+      if (run !== void 0) set({ run });
+    },
+    drawn: previews.drawn,
+    reset() {
+      if (disposed) return;
+      graph.dispose();
+      graph = engine.graph(bus);
+      previews.restart();
+      sync(EMPTY_PLAN);
+      set({ playing: false });
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    dispose() {
+      if (disposed) return;
+      disposed = true;
+      previews.dispose();
+      graph.dispose();
+    }
+  };
+}
+
+// src/effect/audio/stageTypes.ts
+var param = (id, control) => ({ id, label: id, value: formatParam(control), control });
+var amount = (value, min, max, step, unit) => ({ kind: "number", value, min, max, step, ...unit !== void 0 ? { unit } : {} });
+var choice = (value, ...options) => ({ kind: "enum", value, options: options.map((o) => ({ value: o, label: o[0].toUpperCase() + o.slice(1) })) });
+var port = (id) => ({ id, type: "audio" });
+var IN = [port("in")];
+var OUT = [port("out")];
+var AUDIO_STAGE_TYPES = [
+  { type: "audio.file", title: "File", kind: "source", outputs: OUT },
+  {
+    type: "audio.oscillator",
+    title: "Oscillator",
+    kind: "source",
+    outputs: OUT,
+    params: [
+      param("wave", choice("sine", "sine", "square", "sawtooth", "triangle")),
+      param("frequency", amount(440, 20, 2e4, 1, "Hz"))
+    ]
+  },
+  {
+    type: "audio.noise",
+    title: "Noise",
+    kind: "source",
+    outputs: OUT,
+    params: [param("color", choice("white", "white", "pink", "brown"))]
+  },
+  { type: "audio.gain", title: "Gain", inputs: IN, outputs: OUT, params: [param("gain", amount(1, 0, 2, 0.01))] },
+  { type: "audio.pan", title: "Pan", inputs: IN, outputs: OUT, params: [param("pan", amount(0, -1, 1, 0.01))] },
+  {
+    type: "audio.filter",
+    title: "Filter",
+    inputs: IN,
+    outputs: OUT,
+    params: [
+      param("type", choice("lowpass", "lowpass", "highpass", "bandpass")),
+      param("frequency", amount(1e3, 20, 2e4, 1, "Hz")),
+      param("Q", amount(1, 0.1, 20, 0.1))
+    ]
+  },
+  {
+    type: "audio.delay",
+    title: "Delay",
+    inputs: IN,
+    outputs: OUT,
+    params: [
+      param("time", amount(300, 0, 2e3, 10, "ms")),
+      param("feedback", amount(0.4, 0, 0.95, 0.01)),
+      param("mix", amount(0.5, 0, 1, 0.01))
+    ]
+  },
+  {
+    type: "audio.reverb",
+    title: "Reverb",
+    inputs: IN,
+    outputs: OUT,
+    params: [param("seconds", amount(2, 0.1, 10, 0.1, "s")), param("mix", amount(0.3, 0, 1, 0.01))]
+  },
+  {
+    type: "audio.compressor",
+    title: "Compressor",
+    inputs: IN,
+    outputs: OUT,
+    params: [param("threshold", amount(-24, -60, 0, 1, "dB")), param("ratio", amount(4, 1, 20, 0.5))]
+  },
+  {
+    type: "audio.mix",
+    title: "Mix",
+    inputs: [port("a"), port("b")],
+    outputs: OUT,
+    params: [param("a", amount(1, 0, 2, 0.01)), param("b", amount(1, 0, 2, 0.01))]
+  },
+  { type: "audio.output", title: "Output", kind: "sink", inputs: IN }
+];
+var noSubscribe = () => () => {
+};
+function useFollowAudioRunner(runner, opts) {
+  const { pipeline, sources, previews, nodes, target, requestFrame, cancelFrame } = opts;
+  useEffect(() => {
+    runner?.setPipeline(pipeline);
+  }, [runner, pipeline]);
+  useEffect(() => {
+    if (sources !== void 0) runner?.setSources(sources);
+  }, [runner, sources]);
+  useEffect(() => {
+    runner?.setPreviews(previews);
+  }, [runner, previews]);
+  const live = useSyncExternalStore(runner?.subscribe ?? noSubscribe, () => runner?.state ?? null);
+  const planned = useMemo(
+    () => runner !== null ? void 0 : errorsRun(livePlan(pipeline, nodes ?? audioStageNodes, sources ?? {}).errors),
+    [runner, pipeline, nodes, sources]
+  );
+  const playing = live?.playing ?? false;
+  const loop = useVisibleRaf((_now, self) => {
+    if (runner === null || !runner.state.playing || previews === "off") return;
+    runner.frame();
+    self.request();
+  }, {
+    ...target !== void 0 ? { target } : {},
+    ...requestFrame !== void 0 ? { requestFrame } : {},
+    ...cancelFrame !== void 0 ? { cancelFrame } : {}
+  });
+  useEffect(() => {
+    if (playing && previews !== "off") loop.request();
+    else loop.cancel();
+  }, [playing, previews, loop]);
+  useEffect(() => {
+    runner?.drawn(live?.run);
+  }, [runner, live?.run]);
+  return live ?? { run: planned, playing: false };
+}
+function useLiveAudioRunner(opts) {
+  const { engine, bus, nodes } = opts;
+  const latest = useLatest(opts);
+  const [runner, setRunner] = useState(null);
+  useEffect(() => {
+    const { pipeline, sources } = latest.current;
+    const made = createLiveAudioRunner({
+      engine,
+      pipeline,
+      ...nodes !== void 0 ? { nodes } : {},
+      ...sources !== void 0 ? { sources } : {},
+      ...bus !== void 0 ? { bus } : {}
+    });
+    setRunner(made);
+    return () => made.dispose();
+  }, [engine, bus, nodes, latest]);
+  const state = useFollowAudioRunner(runner, opts);
+  return { ...state, runner };
+}
+
+export { AUDIO_STAGE_TYPES, EMPTY_PLAN, audioStageNodes, createLiveAudioRunner, diffPlans, drawScope, drawSpectrum, livePlan, useFollowAudioRunner, useLiveAudioRunner };
+//# sourceMappingURL=effect-audio.js.map
+//# sourceMappingURL=effect-audio.js.map