@dawcore/components 0.0.16 → 0.0.18

package/dist/index.js

@@ -51,6 +51,7 @@ __export(index_exports, {
   DawRecordButtonElement: () => DawRecordButtonElement,
   DawRulerElement: () => DawRulerElement,
   DawSelectionElement: () => DawSelectionElement,
+  DawSpectrogramElement: () => DawSpectrogramElement,
   DawStopButtonElement: () => DawStopButtonElement,
   DawTrackControlsElement: () => DawTrackControlsElement,
   DawTrackElement: () => DawTrackElement,
@@ -58,6 +59,7 @@ __export(index_exports, {
   DawTransportElement: () => DawTransportElement,
   DawWaveformElement: () => DawWaveformElement,
   RecordingController: () => RecordingController,
+  SpectrogramController: () => SpectrogramController,
   isDomClip: () => isDomClip,
   splitAtPlayhead: () => splitAtPlayhead
 });
@@ -229,6 +231,7 @@ var DawTrackElement = class extends import_lit2.LitElement {
     this.muted = false;
     this.soloed = false;
     this.renderMode = "waveform";
+    this.spectrogramConfig = null;
     this.trackId = crypto.randomUUID();
     // Track removal is detected by the editor's MutationObserver,
     // not by dispatching from disconnectedCallback (detached elements
@@ -256,7 +259,16 @@ var DawTrackElement = class extends import_lit2.LitElement {
       this._hasRendered = true;
       return;
     }
-    const trackProps = ["volume", "pan", "muted", "soloed", "src", "name", "renderMode"];
+    const trackProps = [
+      "volume",
+      "pan",
+      "muted",
+      "soloed",
+      "src",
+      "name",
+      "renderMode",
+      "spectrogramConfig"
+    ];
     const hasTrackChange = trackProps.some((p) => changed.has(p));
     if (hasTrackChange) {
       this.dispatchEvent(
@@ -290,6 +302,9 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators2.property)({ attribute: "render-mode" })
 ], DawTrackElement.prototype, "renderMode", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ attribute: false })
+], DawTrackElement.prototype, "spectrogramConfig", 2);
 DawTrackElement = __decorateClass([
   (0, import_decorators2.customElement)("daw-track")
 ], DawTrackElement);
@@ -2757,6 +2772,121 @@ var RecordingController = class {
   }
 };
 
+// src/controllers/spectrogram-controller.ts
+var import_spectrogram = require("@dawcore/spectrogram");
+var LIBRARY_DEFAULTS = {
+  fftSize: 2048,
+  windowFunction: "hann",
+  frequencyScale: "mel",
+  minFrequency: 0,
+  gainDb: 20,
+  rangeDb: 80
+};
+var LIBRARY_DEFAULT_COLOR_MAP = "viridis";
+var SpectrogramController = class {
+  constructor(host, workerFactory) {
+    this.orchestrator = null;
+    this.editorConfig = null;
+    this.editorColorMap = null;
+    this.trackConfigs = /* @__PURE__ */ new Map();
+    this.trackColorMaps = /* @__PURE__ */ new Map();
+    this.host = host;
+    this.workerFactory = workerFactory;
+    this.host.addController(this);
+  }
+  hostConnected() {
+  }
+  hostDisconnected() {
+    this.dispose();
+  }
+  setEditorConfig(config) {
+    this.editorConfig = config;
+    this.reapply();
+  }
+  setEditorColorMap(colorMap) {
+    this.editorColorMap = colorMap;
+    this.reapply();
+  }
+  setTrackConfig(trackId, config) {
+    if (config === null) {
+      this.trackConfigs.delete(trackId);
+    } else {
+      this.trackConfigs.set(trackId, config);
+    }
+    this.reapply();
+  }
+  setTrackColorMap(trackId, colorMap) {
+    if (colorMap === null) {
+      this.trackColorMaps.delete(trackId);
+    } else {
+      this.trackColorMaps.set(trackId, colorMap);
+    }
+    this.reapply();
+  }
+  registerClipAudio(reg) {
+    this.ensureOrchestrator().registerClip(reg);
+  }
+  unregisterClipAudio(clipId) {
+    this.orchestrator?.unregisterClip(clipId);
+  }
+  registerCanvas(reg) {
+    this.ensureOrchestrator().registerCanvas(reg);
+  }
+  unregisterCanvas(canvasId) {
+    this.orchestrator?.unregisterCanvas(canvasId);
+  }
+  setViewport(state5) {
+    this.orchestrator?.setViewport(state5);
+  }
+  dispose() {
+    if (this.orchestrator) {
+      this.orchestrator.dispose();
+      this.orchestrator = null;
+    }
+  }
+  ensureOrchestrator() {
+    if (!this.orchestrator) {
+      this.orchestrator = new import_spectrogram.SpectrogramOrchestrator({
+        workerFactory: this.workerFactory,
+        workerPoolSize: 2,
+        config: this.mergedConfig(),
+        colorMap: this.mergedColorMap()
+      });
+      this.orchestrator.addEventListener("viewport-ready", (e) => {
+        const detail = e.detail;
+        this.host.dispatchEvent(
+          new CustomEvent("daw-spectrogram-ready", {
+            detail,
+            bubbles: true,
+            composed: true
+          })
+        );
+      });
+      this.reapply();
+    }
+    return this.orchestrator;
+  }
+  reapply() {
+    if (!this.orchestrator) return;
+    this.orchestrator.setConfig(this.mergedConfig());
+    this.orchestrator.setColorMap(this.mergedColorMap());
+  }
+  mergedConfig() {
+    let track = null;
+    for (const c of this.trackConfigs.values()) {
+      track = c;
+      break;
+    }
+    return { ...LIBRARY_DEFAULTS, ...this.editorConfig ?? {}, ...track ?? {} };
+  }
+  mergedColorMap() {
+    for (const c of this.trackColorMaps.values()) {
+      return c ?? LIBRARY_DEFAULT_COLOR_MAP;
+    }
+    return this.editorColorMap ?? LIBRARY_DEFAULT_COLOR_MAP;
+  }
+};
+
 // src/interactions/pointer-handler.ts
 var import_core4 = require("@waveform-playlist/core");
 
@@ -3637,6 +3767,7 @@ async function loadWaveformDataFromUrl(src) {
 }
 
 // src/elements/daw-editor.ts
+var import_meta = {};
 var NO_ADAPTER_ERROR = "No PlayoutAdapter set on <daw-editor>. Set editor.adapter before use.\n\n  // Option 1: Native Web Audio (no Tone.js)\n  npm install @dawcore/transport\n  import { NativePlayoutAdapter } from '@dawcore/transport';\n  editor.adapter = new NativePlayoutAdapter(new AudioContext());\n\n  // Option 2: Tone.js (effects, MIDI synths)\n  npm install @waveform-playlist/playout\n  import { createToneAdapter } from '@waveform-playlist/playout';\n  editor.adapter = createToneAdapter();";
 var DawEditorElement = class extends import_lit14.LitElement {
   constructor() {
@@ -3652,6 +3783,8 @@ var DawEditorElement = class extends import_lit14.LitElement {
     this.clipHeaderHeight = 20;
     this.interactiveClips = false;
     this.indefinitePlayback = false;
+    this._spectrogramConfig = null;
+    this._spectrogramColorMap = null;
     this.scaleMode = "temporal";
     this._ticksPerPixel = 24;
     this._bpm = 120;
@@ -3687,6 +3820,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
     this._childObserver = null;
     this._audioResume = new AudioResumeController(this);
     this._recordingController = new RecordingController(this);
+    this._spectrogramController = null;
     this._clipPointer = new ClipPointerHandler(this);
     this._pointer = new PointerHandler(this);
     this._viewport = (() => {
@@ -3694,6 +3828,15 @@ var DawEditorElement = class extends import_lit14.LitElement {
       v.scrollSelector = ".scroll-area";
       return v;
     })();
+    /**
+     * Cache of the last ViewportState forwarded to the spectrogram controller.
+     * Lit's `updated()` fires on every reactive state change (`_isPlaying`,
+     * `_selectedTrackId`, etc.) — most of which don't affect the spectrogram
+     * viewport. Skip the cross-controller call when nothing changed.
+     *
+     * The orchestrator dedupes too, but this avoids the call entirely.
+     */
+    this._lastSpectrogramViewport = null;
     // --- Track Events ---
     this._onTrackConnected = (e) => {
       const trackId = e.detail?.trackId;
@@ -3727,6 +3870,26 @@ var DawEditorElement = class extends import_lit14.LitElement {
       if (oldDescriptor?.src !== descriptor.src) {
         this._loadTrack(trackId, descriptor);
       }
+      if (descriptor.renderMode === "spectrogram" && oldDescriptor?.renderMode !== "spectrogram") {
+        const engineTrack = this._engineTracks.get(trackId);
+        if (engineTrack) {
+          for (const clip of engineTrack.clips) {
+            this._maybeRegisterSpectrogramClipAudio(trackId, clip);
+          }
+        }
+      }
+      if (descriptor.renderMode !== "spectrogram" && oldDescriptor?.renderMode === "spectrogram") {
+        const engineTrack = this._engineTracks.get(trackId);
+        if (engineTrack && this._spectrogramController) {
+          for (const clip of engineTrack.clips) {
+            this._spectrogramController.unregisterClipAudio(clip.id);
+          }
+        }
+        this._disposeSpectrogramControllerIfEmpty();
+      }
+      if (descriptor.spectrogramConfig !== oldDescriptor?.spectrogramConfig) {
+        this._spectrogramController?.setTrackConfig(trackId, descriptor.spectrogramConfig ?? null);
+      }
     };
     this._onTrackControl = (e) => {
       const { trackId, prop, value } = e.detail ?? {};
@@ -3870,6 +4033,72 @@ var DawEditorElement = class extends import_lit14.LitElement {
     this._samplesPerPixel = clamped;
     this.requestUpdate("samplesPerPixel", old);
   }
+  get spectrogramConfig() {
+    return this._spectrogramConfig;
+  }
+  set spectrogramConfig(value) {
+    const old = this._spectrogramConfig;
+    this._spectrogramConfig = value;
+    this._spectrogramController?.setEditorConfig(value);
+    this.requestUpdate("spectrogramConfig", old);
+  }
+  get spectrogramColorMap() {
+    return this._spectrogramColorMap;
+  }
+  set spectrogramColorMap(value) {
+    const old = this._spectrogramColorMap;
+    this._spectrogramColorMap = value;
+    this._spectrogramController?.setEditorColorMap(value);
+    this.requestUpdate("spectrogramColorMap", old);
+  }
+  _ensureSpectrogramController() {
+    if (!this._spectrogramController) {
+      this._spectrogramController = new SpectrogramController(
+        this,
+        () => new Worker(new URL("@dawcore/spectrogram/worker/spectrogram.worker", import_meta.url), {
+          type: "module"
+        })
+      );
+      if (this._spectrogramConfig) {
+        this._spectrogramController.setEditorConfig(this._spectrogramConfig);
+      }
+      if (this._spectrogramColorMap) {
+        this._spectrogramController.setEditorColorMap(this._spectrogramColorMap);
+      }
+    }
+    return this._spectrogramController;
+  }
+  /** Called by <daw-spectrogram> after transferControlToOffscreen. */
+  _spectrogramRegisterCanvas(reg) {
+    this._ensureSpectrogramController().registerCanvas(reg);
+  }
+  /** Called by <daw-spectrogram> on chunk unmount / element disconnect. */
+  _spectrogramUnregisterCanvas(canvasId) {
+    this._spectrogramController?.unregisterCanvas(canvasId);
+  }
+  /**
+   * Push a clip's decoded audio into the spectrogram controller. No-op
+   * unless the track is in spectrogram render-mode and the controller
+   * already exists (it bootstraps from canvas registration).
+   */
+  _maybeRegisterSpectrogramClipAudio(trackId, clip) {
+    const descriptor = this._tracks.get(trackId);
+    if (descriptor?.renderMode !== "spectrogram") return;
+    const buffer = clip.audioBuffer ?? this._clipBuffers.get(clip.id);
+    if (!buffer) return;
+    const channelData = [];
+    for (let i = 0; i < buffer.numberOfChannels; i++) {
+      channelData.push(buffer.getChannelData(i));
+    }
+    this._ensureSpectrogramController().registerClipAudio({
+      clipId: clip.id,
+      trackId,
+      channelData,
+      sampleRate: buffer.sampleRate,
+      durationSamples: clip.durationSamples,
+      offsetSamples: clip.offsetSamples
+    });
+  }
   get ticksPerPixel() {
     return this._ticksPerPixel;
   }
@@ -4110,6 +4339,8 @@ var DawEditorElement = class extends import_lit14.LitElement {
     this._clipOffsets.clear();
     this._peakPipeline.terminate();
     this._minSamplesPerPixel = 0;
+    this._spectrogramController?.dispose();
+    this._spectrogramController = null;
     try {
       this._disposeEngine();
     } catch (err) {
@@ -4138,6 +4369,27 @@ var DawEditorElement = class extends import_lit14.LitElement {
       }
     }
   }
+  updated(_changed) {
+    if (this._spectrogramController) {
+      const vs = this._viewport.visibleStart;
+      const ve = this._viewport.visibleEnd;
+      const spp = this._renderSpp;
+      if (Number.isFinite(vs) && Number.isFinite(ve)) {
+        const prev = this._lastSpectrogramViewport;
+        if (prev && prev.vs === vs && prev.ve === ve && prev.spp === spp) return;
+        this._lastSpectrogramViewport = { vs, ve, spp };
+        const span = ve - vs;
+        const bufferPad = span * 0.25;
+        this._spectrogramController.setViewport({
+          visibleStartPx: vs,
+          visibleEndPx: ve,
+          bufferStartPx: Math.max(0, vs - bufferPad),
+          bufferEndPx: ve + bufferPad,
+          samplesPerPixel: spp
+        });
+      }
+    }
+  }
   _onTrackRemoved(trackId) {
     this._trackElements.delete(trackId);
     const removedTrack = this._engineTracks.get(trackId);
@@ -4147,6 +4399,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
         this._clipBuffers.delete(clip.id);
         this._clipOffsets.delete(clip.id);
         nextPeaks.delete(clip.id);
+        this._spectrogramController?.unregisterClipAudio(clip.id);
       }
       this._peaksData = nextPeaks;
     }
@@ -4161,11 +4414,23 @@ var DawEditorElement = class extends import_lit14.LitElement {
       this._engine.removeTrack(trackId);
     }
     this._minSamplesPerPixel = this._peakPipeline.getMaxCachedScale(this._clipBuffers);
+    this._disposeSpectrogramControllerIfEmpty();
     if (nextEngine.size === 0) {
       this._currentTime = 0;
       this._stopPlayhead();
     }
   }
+  /** Drop the controller when no spectrogram tracks remain. */
+  _disposeSpectrogramControllerIfEmpty() {
+    if (!this._spectrogramController) return;
+    const stillNeeded = Array.from(this._tracks.values()).some(
+      (d) => d.renderMode === "spectrogram"
+    );
+    if (!stillNeeded) {
+      this._spectrogramController.dispose();
+      this._spectrogramController = null;
+    }
+  }
   _onClipRemovedFromDom(clipEl) {
     const clipId = clipEl.clipId;
     for (const [trackId, t] of this._engineTracks.entries()) {
@@ -4207,6 +4472,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
         });
       }
       this._commitTrackChange(trackId, updatedTrack);
+      this._maybeRegisterSpectrogramClipAudio(trackId, clip);
       this.dispatchEvent(
         new CustomEvent("daw-clip-ready", {
           bubbles: true,
@@ -4381,6 +4647,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
     nextPeaks.delete(clipId);
     this._peaksData = nextPeaks;
     this._clipOffsets.delete(clipId);
+    this._spectrogramController?.unregisterClipAudio(clipId);
   }
   /**
    * Recompute duration and forward an updated track to the engine. Single
@@ -4663,6 +4930,9 @@ var DawEditorElement = class extends import_lit14.LitElement {
       track.id = trackId;
       this._engineTracks = new Map(this._engineTracks).set(trackId, track);
       this._recomputeDuration();
+      for (const c of clips) {
+        this._maybeRegisterSpectrogramClipAudio(trackId, c);
+      }
       const engine = await this._ensureEngine();
       engine.setTracks([...this._engineTracks.values()]);
       this.dispatchEvent(
@@ -5474,19 +5744,34 @@ var DawEditorElement = class extends import_lit14.LitElement {
                           .visibleEnd=${this._viewport.visibleEnd}
                           .originX=${clipLeft}
                           ?selected=${t.trackId === this._selectedTrackId}
-                        ></daw-piano-roll>` : channels.map(
+                        ></daw-piano-roll>` : t.descriptor?.renderMode === "spectrogram" ? channels.map(
+          (_chPeaks, chIdx) => import_lit14.html`<daw-spectrogram
+                                style="position:absolute;left:0;top:${hdrH + chIdx * chH}px;height:${chH}px;width:${peakData?.length ?? width}px;"
+                                .clipId=${clip.id}
+                                .trackId=${t.trackId}
+                                .channelIndex=${chIdx}
+                                .length=${peakData?.length ?? width}
+                                .waveHeight=${chH}
+                                .samplesPerPixel=${this._renderSpp}
+                                .sampleRate=${this.effectiveSampleRate}
+                                .clipOffsetSeconds=${(clip.offsetSamples ?? 0) / this.effectiveSampleRate}
+                                .visibleStart=${this._viewport.visibleStart}
+                                .visibleEnd=${this._viewport.visibleEnd}
+                                .originX=${clipLeft}
+                              ></daw-spectrogram>`
+        ) : channels.map(
           (chPeaks, chIdx) => import_lit14.html` <daw-waveform
-                              style="position:absolute;left:0;top:${hdrH + chIdx * chH}px;"
-                              .peaks=${chPeaks}
-                              .length=${peakData?.length ?? width}
-                              .waveHeight=${chH}
-                              .barWidth=${this.barWidth}
-                              .barGap=${this.barGap}
-                              .visibleStart=${this._viewport.visibleStart}
-                              .visibleEnd=${this._viewport.visibleEnd}
-                              .originX=${clipLeft}
-                              .segments=${clipSegments}
-                            ></daw-waveform>`
+                                style="position:absolute;left:0;top:${hdrH + chIdx * chH}px;"
+                                .peaks=${chPeaks}
+                                .length=${peakData?.length ?? width}
+                                .waveHeight=${chH}
+                                .barWidth=${this.barWidth}
+                                .barGap=${this.barGap}
+                                .visibleStart=${this._viewport.visibleStart}
+                                .visibleEnd=${this._viewport.visibleEnd}
+                                .originX=${clipLeft}
+                                .segments=${clipSegments}
+                              ></daw-waveform>`
         )}
                     ${this.interactiveClips ? import_lit14.html` <div
                             class="clip-boundary"
@@ -5594,6 +5879,12 @@ __decorateClass([
 __decorateClass([
   (0, import_decorators12.property)({ type: Boolean, attribute: "indefinite-playback" })
 ], DawEditorElement.prototype, "indefinitePlayback", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ attribute: false, noAccessor: true })
+], DawEditorElement.prototype, "spectrogramConfig", 1);
+__decorateClass([
+  (0, import_decorators12.property)({ attribute: false, noAccessor: true })
+], DawEditorElement.prototype, "spectrogramColorMap", 1);
 __decorateClass([
   (0, import_decorators12.property)({ type: String, attribute: "scale-mode" })
 ], DawEditorElement.prototype, "scaleMode", 2);
@@ -6172,6 +6463,187 @@ __decorateClass([
 DawKeyboardShortcutsElement = __decorateClass([
   (0, import_decorators16.customElement)("daw-keyboard-shortcuts")
 ], DawKeyboardShortcutsElement);
+
+// src/elements/daw-spectrogram.ts
+var import_lit19 = require("lit");
+var import_decorators17 = require("lit/decorators.js");
+var MAX_CANVAS_WIDTH5 = 1e3;
+var DawSpectrogramElement = class extends import_lit19.LitElement {
+  constructor() {
+    super(...arguments);
+    this.clipId = "";
+    this.trackId = "";
+    this.channelIndex = 0;
+    this.length = 0;
+    this.waveHeight = 128;
+    this._samplesPerPixel = 1024;
+    this._sampleRate = 44100;
+    this.clipOffsetSeconds = 0;
+    this.visibleStart = -Infinity;
+    this.visibleEnd = Infinity;
+    this.originX = 0;
+    this._canvases = [];
+    this._registeredCanvasIds = [];
+  }
+  get samplesPerPixel() {
+    return this._samplesPerPixel;
+  }
+  set samplesPerPixel(value) {
+    if (!Number.isFinite(value) || value <= 0) {
+      console.warn("[dawcore] daw-spectrogram samplesPerPixel " + value + " is invalid \u2014 ignored");
+      return;
+    }
+    const old = this._samplesPerPixel;
+    this._samplesPerPixel = value;
+    this.requestUpdate("samplesPerPixel", old);
+  }
+  get sampleRate() {
+    return this._sampleRate;
+  }
+  set sampleRate(value) {
+    if (!Number.isFinite(value) || value <= 0) {
+      console.warn("[dawcore] daw-spectrogram sampleRate " + value + " is invalid \u2014 ignored");
+      return;
+    }
+    const old = this._sampleRate;
+    this._sampleRate = value;
+    this.requestUpdate("sampleRate", old);
+  }
+  /**
+   * Walk up to the editor host. `closest('daw-editor')` does NOT cross
+   * shadow boundaries — and this element lives inside the editor's shadow
+   * DOM — so use getRootNode().host to step out.
+   */
+  _findHostEditor() {
+    const root = this.getRootNode();
+    const host = root instanceof ShadowRoot ? root.host : null;
+    if (!host) return null;
+    if (host.tagName === "DAW-EDITOR") return host;
+    return host.closest("daw-editor");
+  }
+  willUpdate(changed) {
+    const layoutChanged = changed.has("length") || changed.has("waveHeight") || changed.has("samplesPerPixel") || changed.has("clipId") || changed.has("channelIndex");
+    if (layoutChanged) {
+      this._rebuildChunks();
+    }
+  }
+  _rebuildChunks() {
+    this._unregisterAllCanvases();
+    this._canvases = [];
+    if (this.length <= 0) return;
+    const chunkCount = Math.ceil(this.length / MAX_CANVAS_WIDTH5);
+    for (let i = 0; i < chunkCount; i++) {
+      const widthPx = Math.min(MAX_CANVAS_WIDTH5, this.length - i * MAX_CANVAS_WIDTH5);
+      const canvas = document.createElement("canvas");
+      canvas.style.left = i * MAX_CANVAS_WIDTH5 + "px";
+      canvas.style.width = widthPx + "px";
+      const dpr = window.devicePixelRatio || 1;
+      canvas.width = widthPx * dpr;
+      canvas.height = this.waveHeight * dpr;
+      this._canvases.push(canvas);
+    }
+  }
+  updated(_changed) {
+    if (this._registeredCanvasIds.length === 0 && this._canvases.length > 0) {
+      requestAnimationFrame(() => this._registerCanvases());
+    }
+  }
+  _registerCanvases() {
+    const editor = this._findHostEditor();
+    if (!editor || typeof editor._spectrogramRegisterCanvas !== "function") return;
+    for (let i = 0; i < this._canvases.length; i++) {
+      const canvas = this._canvases[i];
+      const canvasId = this.clipId + "-ch" + this.channelIndex + "-chunk" + i;
+      let offscreen;
+      try {
+        offscreen = canvas.transferControlToOffscreen();
+      } catch (err) {
+        console.warn(
+          "[dawcore] daw-spectrogram transferControlToOffscreen failed for " + canvasId + ": " + (err instanceof Error ? err.message : String(err))
+        );
+        continue;
+      }
+      editor._spectrogramRegisterCanvas({
+        canvasId,
+        canvas: offscreen,
+        clipId: this.clipId,
+        trackId: this.trackId,
+        channelIndex: this.channelIndex,
+        chunkIndex: i,
+        globalPixelOffset: this.originX + i * MAX_CANVAS_WIDTH5,
+        widthPx: parseFloat(canvas.style.width),
+        heightPx: this.waveHeight
+      });
+      this._registeredCanvasIds.push(canvasId);
+    }
+  }
+  _unregisterAllCanvases() {
+    const editor = this._findHostEditor();
+    if (editor && typeof editor._spectrogramUnregisterCanvas === "function") {
+      for (const id of this._registeredCanvasIds) {
+        editor._spectrogramUnregisterCanvas(id);
+      }
+    }
+    this._registeredCanvasIds = [];
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unregisterAllCanvases();
+  }
+  render() {
+    return import_lit19.html`${this._canvases.map((c) => c)}`;
+  }
+};
+DawSpectrogramElement.styles = import_lit19.css`
+    :host {
+      display: block;
+      position: relative;
+      background: var(--daw-spectrogram-background, #000);
+    }
+    canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      pointer-events: none;
+    }
+  `;
+__decorateClass([
+  (0, import_decorators17.property)({ attribute: false })
+], DawSpectrogramElement.prototype, "clipId", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ attribute: false })
+], DawSpectrogramElement.prototype, "trackId", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ type: Number, attribute: false })
+], DawSpectrogramElement.prototype, "channelIndex", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ type: Number, attribute: false })
+], DawSpectrogramElement.prototype, "length", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ type: Number, attribute: false })
+], DawSpectrogramElement.prototype, "waveHeight", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ type: Number, attribute: false, noAccessor: true })
+], DawSpectrogramElement.prototype, "samplesPerPixel", 1);
+__decorateClass([
+  (0, import_decorators17.property)({ type: Number, attribute: false, noAccessor: true })
+], DawSpectrogramElement.prototype, "sampleRate", 1);
+__decorateClass([
+  (0, import_decorators17.property)({ type: Number, attribute: false })
+], DawSpectrogramElement.prototype, "clipOffsetSeconds", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ type: Number, attribute: false })
+], DawSpectrogramElement.prototype, "visibleStart", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ type: Number, attribute: false })
+], DawSpectrogramElement.prototype, "visibleEnd", 2);
+__decorateClass([
+  (0, import_decorators17.property)({ type: Number, attribute: false })
+], DawSpectrogramElement.prototype, "originX", 2);
+DawSpectrogramElement = __decorateClass([
+  (0, import_decorators17.customElement)("daw-spectrogram")
+], DawSpectrogramElement);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AudioResumeController,
@@ -6187,6 +6659,7 @@ DawKeyboardShortcutsElement = __decorateClass([
   DawRecordButtonElement,
   DawRulerElement,
   DawSelectionElement,
+  DawSpectrogramElement,
   DawStopButtonElement,
   DawTrackControlsElement,
   DawTrackElement,
@@ -6194,6 +6667,7 @@ DawKeyboardShortcutsElement = __decorateClass([
   DawTransportElement,
   DawWaveformElement,
   RecordingController,
+  SpectrogramController,
   isDomClip,
   splitAtPlayhead
 });