@dawcore/components 0.0.15 → 0.0.17

package/dist/index.mjs

@@ -26,11 +26,48 @@ var DawClipElement = class extends LitElement {
     this.fadeIn = 0;
     this.fadeOut = 0;
     this.fadeType = "linear";
+    this.midiNotes = null;
+    this._midiChannel = null;
+    this._midiProgram = null;
     this.clipId = crypto.randomUUID();
     // Removal is detected by the editor's MutationObserver — detached elements
     // cannot bubble events to ancestors.
     this._hasRendered = false;
   }
+  get midiChannel() {
+    return this._midiChannel;
+  }
+  set midiChannel(value) {
+    const old = this._midiChannel;
+    if (value === null) {
+      this._midiChannel = null;
+      this.requestUpdate("midiChannel", old);
+      return;
+    }
+    if (!Number.isFinite(value) || !Number.isInteger(value) || value < 0 || value > 15) {
+      console.warn("[dawcore] daw-clip midi-channel " + value + " is out of range 0-15 \u2014 ignored");
+      return;
+    }
+    this._midiChannel = value;
+    this.requestUpdate("midiChannel", old);
+  }
+  get midiProgram() {
+    return this._midiProgram;
+  }
+  set midiProgram(value) {
+    const old = this._midiProgram;
+    if (value === null) {
+      this._midiProgram = null;
+      this.requestUpdate("midiProgram", old);
+      return;
+    }
+    if (!Number.isFinite(value) || !Number.isInteger(value) || value < 0 || value > 127) {
+      console.warn("[dawcore] daw-clip midi-program " + value + " is out of range 0-127 \u2014 ignored");
+      return;
+    }
+    this._midiProgram = value;
+    this.requestUpdate("midiProgram", old);
+  }
   // Light DOM — no visual rendering, just a data container
   createRenderRoot() {
     return this;
@@ -62,7 +99,10 @@ var DawClipElement = class extends LitElement {
       "name",
       "fadeIn",
       "fadeOut",
-      "fadeType"
+      "fadeType",
+      "midiNotes",
+      "midiChannel",
+      "midiProgram"
     ];
     if (clipProps.some((p) => changed.has(p))) {
       const trackEl = this.closest("daw-track");
@@ -109,6 +149,15 @@ __decorateClass([
 __decorateClass([
   property({ attribute: "fade-type" })
 ], DawClipElement.prototype, "fadeType", 2);
+__decorateClass([
+  property({ attribute: false })
+], DawClipElement.prototype, "midiNotes", 2);
+__decorateClass([
+  property({ type: Number, attribute: "midi-channel", noAccessor: true })
+], DawClipElement.prototype, "midiChannel", 1);
+__decorateClass([
+  property({ type: Number, attribute: "midi-program", noAccessor: true })
+], DawClipElement.prototype, "midiProgram", 1);
 DawClipElement = __decorateClass([
   customElement("daw-clip")
 ], DawClipElement);
@@ -125,6 +174,8 @@ var DawTrackElement = class extends LitElement2 {
     this.pan = 0;
     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
@@ -152,7 +203,16 @@ var DawTrackElement = class extends LitElement2 {
       this._hasRendered = true;
       return;
     }
-    const trackProps = ["volume", "pan", "muted", "soloed", "src", "name"];
+    const trackProps = [
+      "volume",
+      "pan",
+      "muted",
+      "soloed",
+      "src",
+      "name",
+      "renderMode",
+      "spectrogramConfig"
+    ];
     const hasTrackChange = trackProps.some((p) => changed.has(p));
     if (hasTrackChange) {
       this.dispatchEvent(
@@ -183,6 +243,12 @@ __decorateClass([
 __decorateClass([
   property2({ type: Boolean })
 ], DawTrackElement.prototype, "soloed", 2);
+__decorateClass([
+  property2({ attribute: "render-mode" })
+], DawTrackElement.prototype, "renderMode", 2);
+__decorateClass([
+  property2({ attribute: false })
+], DawTrackElement.prototype, "spectrogramConfig", 2);
 DawTrackElement = __decorateClass([
   customElement2("daw-track")
 ], DawTrackElement);
@@ -532,9 +598,229 @@ DawWaveformElement = __decorateClass([
   customElement3("daw-waveform")
 ], DawWaveformElement);
 
-// src/elements/daw-playhead.ts
+// src/elements/daw-piano-roll.ts
 import { LitElement as LitElement4, html as html2, css as css2 } from "lit";
-import { customElement as customElement4 } from "lit/decorators.js";
+import { customElement as customElement4, property as property4 } from "lit/decorators.js";
+var MAX_CANVAS_WIDTH2 = 1e3;
+var LAYOUT_PROPS2 = /* @__PURE__ */ new Set([
+  "length",
+  "waveHeight",
+  "samplesPerPixel",
+  "sampleRate",
+  "clipOffsetSeconds",
+  "midiNotes",
+  "selected"
+]);
+var DawPianoRollElement = class extends LitElement4 {
+  constructor() {
+    super(...arguments);
+    this.midiNotes = [];
+    this.length = 0;
+    this.waveHeight = 128;
+    this._samplesPerPixel = 1024;
+    this._sampleRate = 48e3;
+    this.clipOffsetSeconds = 0;
+    this.visibleStart = -Infinity;
+    this.visibleEnd = Infinity;
+    this.originX = 0;
+    this.selected = false;
+    this._rafHandle = null;
+  }
+  get samplesPerPixel() {
+    return this._samplesPerPixel;
+  }
+  set samplesPerPixel(value) {
+    if (!Number.isFinite(value) || value <= 0) {
+      console.warn("[dawcore] daw-piano-roll 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-piano-roll sampleRate " + value + " is invalid \u2014 ignored");
+      return;
+    }
+    const old = this._sampleRate;
+    this._sampleRate = value;
+    this.requestUpdate("sampleRate", old);
+  }
+  _scheduleDraw() {
+    if (this._rafHandle !== null) return;
+    this._rafHandle = requestAnimationFrame(() => {
+      this._rafHandle = null;
+      this._draw();
+    });
+  }
+  willUpdate(_changed) {
+    this._scheduleDraw();
+  }
+  updated(changedProperties) {
+    const needsFullDraw = [...changedProperties.keys()].some((key) => LAYOUT_PROPS2.has(key));
+    if (needsFullDraw) return;
+    if (changedProperties.has("visibleStart") || changedProperties.has("visibleEnd") || changedProperties.has("originX")) {
+      this._scheduleDraw();
+    }
+  }
+  _getPitchRange() {
+    if (this.midiNotes.length === 0) return { minMidi: 0, maxMidi: 127 };
+    let min = 127;
+    let max = 0;
+    for (const note of this.midiNotes) {
+      if (note.midi < min) min = note.midi;
+      if (note.midi > max) max = note.midi;
+    }
+    return {
+      minMidi: Math.max(0, min - 1),
+      maxMidi: Math.min(127, max + 1)
+    };
+  }
+  _getNoteColor() {
+    const cs = getComputedStyle(this);
+    const note = cs.getPropertyValue("--daw-piano-roll-note-color").trim() || "#2a7070";
+    const selectedColor = cs.getPropertyValue("--daw-piano-roll-selected-note-color").trim() || "#3d9e9e";
+    return this.selected ? selectedColor : note;
+  }
+  _draw() {
+    if (!this.shadowRoot) return;
+    const canvases = this.shadowRoot.querySelectorAll("canvas");
+    if (canvases.length === 0) return;
+    const { minMidi, maxMidi } = this._getPitchRange();
+    const noteRange = maxMidi - minMidi + 1;
+    const noteHeight = Math.max(2, this.waveHeight / noteRange);
+    const pixelsPerSecond = this.sampleRate / this.samplesPerPixel;
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    const color = this._getNoteColor();
+    for (const canvas of canvases) {
+      const chunkIdx = Number(canvas.dataset.index);
+      const chunkPixelStart = chunkIdx * MAX_CANVAS_WIDTH2;
+      const canvasWidth = canvas.width / dpr;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) continue;
+      ctx.resetTransform();
+      ctx.clearRect(
+        0,
+        0,
+        canvas.width,
+        canvas.height
+      );
+      ctx.imageSmoothingEnabled = false;
+      ctx.scale(dpr, dpr);
+      const chunkStartTime = chunkPixelStart * this.samplesPerPixel / this.sampleRate;
+      const chunkEndTime = (chunkPixelStart + canvasWidth) * this.samplesPerPixel / this.sampleRate;
+      for (const note of this.midiNotes) {
+        const noteStart = note.time - this.clipOffsetSeconds;
+        const noteEnd = noteStart + note.duration;
+        if (noteEnd <= chunkStartTime || noteStart >= chunkEndTime) continue;
+        const x = noteStart * pixelsPerSecond - chunkPixelStart;
+        const w = Math.max(2, note.duration * pixelsPerSecond);
+        const y = (maxMidi - note.midi) / noteRange * this.waveHeight;
+        const alpha = 0.3 + note.velocity * 0.7;
+        ctx.fillStyle = color;
+        ctx.globalAlpha = alpha;
+        ctx.beginPath();
+        ctx.roundRect(x, y, w, noteHeight, 1);
+        ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._scheduleDraw();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._rafHandle !== null) {
+      cancelAnimationFrame(this._rafHandle);
+      this._rafHandle = null;
+    }
+  }
+  render() {
+    if (this.length <= 0)
+      return html2`<div class="container" style="width: 0; height: ${this.waveHeight}px;"></div>`;
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    const visibleIndices = getVisibleChunkIndices(
+      this.length,
+      MAX_CANVAS_WIDTH2,
+      this.visibleStart,
+      this.visibleEnd,
+      this.originX
+    );
+    return html2`
+      <div class="container" style="width: ${this.length}px; height: ${this.waveHeight}px;">
+        ${visibleIndices.map((i) => {
+      const chunkLeft = i * MAX_CANVAS_WIDTH2;
+      const chunkWidth = Math.min(this.length - chunkLeft, MAX_CANVAS_WIDTH2);
+      return html2`<canvas
+            data-index=${i}
+            width=${chunkWidth * dpr}
+            height=${this.waveHeight * dpr}
+            style="left: ${chunkLeft}px; width: ${chunkWidth}px; height: ${this.waveHeight}px;"
+          ></canvas>`;
+    })}
+      </div>
+    `;
+  }
+};
+DawPianoRollElement.styles = css2`
+    :host {
+      display: block;
+      position: relative;
+    }
+    .container {
+      position: relative;
+      background: var(--daw-piano-roll-background, #1a1a2e);
+    }
+    canvas {
+      position: absolute;
+      top: 0;
+      image-rendering: pixelated;
+      image-rendering: crisp-edges;
+    }
+  `;
+__decorateClass([
+  property4({ attribute: false })
+], DawPianoRollElement.prototype, "midiNotes", 2);
+__decorateClass([
+  property4({ type: Number, attribute: false })
+], DawPianoRollElement.prototype, "length", 2);
+__decorateClass([
+  property4({ type: Number, attribute: false })
+], DawPianoRollElement.prototype, "waveHeight", 2);
+__decorateClass([
+  property4({ type: Number, attribute: "samples-per-pixel", noAccessor: true })
+], DawPianoRollElement.prototype, "samplesPerPixel", 1);
+__decorateClass([
+  property4({ type: Number, attribute: "sample-rate", noAccessor: true })
+], DawPianoRollElement.prototype, "sampleRate", 1);
+__decorateClass([
+  property4({ type: Number, attribute: false })
+], DawPianoRollElement.prototype, "clipOffsetSeconds", 2);
+__decorateClass([
+  property4({ type: Number, attribute: false })
+], DawPianoRollElement.prototype, "visibleStart", 2);
+__decorateClass([
+  property4({ type: Number, attribute: false })
+], DawPianoRollElement.prototype, "visibleEnd", 2);
+__decorateClass([
+  property4({ type: Number, attribute: false })
+], DawPianoRollElement.prototype, "originX", 2);
+__decorateClass([
+  property4({ type: Boolean, reflect: true })
+], DawPianoRollElement.prototype, "selected", 2);
+DawPianoRollElement = __decorateClass([
+  customElement4("daw-piano-roll")
+], DawPianoRollElement);
+
+// src/elements/daw-playhead.ts
+import { LitElement as LitElement5, html as html3, css as css3 } from "lit";
+import { customElement as customElement5 } from "lit/decorators.js";
 
 // src/controllers/animation-controller.ts
 var AnimationController = class {
@@ -567,14 +853,14 @@ var AnimationController = class {
 };
 
 // src/elements/daw-playhead.ts
-var DawPlayheadElement = class extends LitElement4 {
+var DawPlayheadElement = class extends LitElement5 {
   constructor() {
     super(...arguments);
     this._animation = new AnimationController(this);
     this._line = null;
   }
   render() {
-    return html2`<div></div>`;
+    return html3`<div></div>`;
   }
   firstUpdated() {
     this._line = this.shadowRoot.querySelector("div");
@@ -630,7 +916,7 @@ var DawPlayheadElement = class extends LitElement4 {
     }
   }
 };
-DawPlayheadElement.styles = css2`
+DawPlayheadElement.styles = css3`
     :host {
       position: absolute;
       top: 0;
@@ -649,13 +935,13 @@ DawPlayheadElement.styles = css2`
     }
   `;
 DawPlayheadElement = __decorateClass([
-  customElement4("daw-playhead")
+  customElement5("daw-playhead")
 ], DawPlayheadElement);
 
 // src/elements/daw-transport.ts
-import { LitElement as LitElement5 } from "lit";
-import { customElement as customElement5, property as property4 } from "lit/decorators.js";
-var DawTransportElement = class extends LitElement5 {
+import { LitElement as LitElement6 } from "lit";
+import { customElement as customElement6, property as property5 } from "lit/decorators.js";
+var DawTransportElement = class extends LitElement6 {
   constructor() {
     super(...arguments);
     this.for = "";
@@ -670,25 +956,25 @@ var DawTransportElement = class extends LitElement5 {
   }
 };
 __decorateClass([
-  property4()
+  property5()
 ], DawTransportElement.prototype, "for", 2);
 DawTransportElement = __decorateClass([
-  customElement5("daw-transport")
+  customElement6("daw-transport")
 ], DawTransportElement);
 
 // src/elements/daw-play-button.ts
-import { html as html3 } from "lit";
-import { customElement as customElement6, state } from "lit/decorators.js";
+import { html as html4 } from "lit";
+import { customElement as customElement7, state } from "lit/decorators.js";
 
 // src/elements/daw-transport-button.ts
-import { LitElement as LitElement6, css as css3 } from "lit";
-var DawTransportButton = class extends LitElement6 {
+import { LitElement as LitElement7, css as css4 } from "lit";
+var DawTransportButton = class extends LitElement7 {
   get target() {
     const transport = this.closest("daw-transport");
     return transport?.target ?? null;
   }
 };
-DawTransportButton.styles = css3`
+DawTransportButton.styles = css4`
     button {
       cursor: pointer;
       background: var(--daw-controls-background, #1a1a2e);
@@ -740,7 +1026,7 @@ var DawPlayButtonElement = class extends DawTransportButton {
     }
   }
   render() {
-    return html3`
+    return html4`
       <button part="button" ?disabled=${this._isRecording} @click=${this._onClick}>
         <slot>Play</slot>
       </button>
@@ -761,12 +1047,12 @@ __decorateClass([
   state()
 ], DawPlayButtonElement.prototype, "_isRecording", 2);
 DawPlayButtonElement = __decorateClass([
-  customElement6("daw-play-button")
+  customElement7("daw-play-button")
 ], DawPlayButtonElement);
 
 // src/elements/daw-pause-button.ts
-import { html as html4, css as css4 } from "lit";
-import { customElement as customElement7, state as state2 } from "lit/decorators.js";
+import { html as html5, css as css5 } from "lit";
+import { customElement as customElement8, state as state2 } from "lit/decorators.js";
 var DawPauseButtonElement = class extends DawTransportButton {
   constructor() {
     super(...arguments);
@@ -780,6 +1066,12 @@ var DawPauseButtonElement = class extends DawTransportButton {
       this._isRecording = false;
       this._isPaused = false;
     };
+    this._onRecPause = () => {
+      this._isPaused = true;
+    };
+    this._onRecResume = () => {
+      this._isPaused = false;
+    };
   }
   connectedCallback() {
     super.connectedCallback();
@@ -790,6 +1082,8 @@ var DawPauseButtonElement = class extends DawTransportButton {
       target.addEventListener("daw-recording-start", this._onRecStart);
       target.addEventListener("daw-recording-complete", this._onRecEnd);
       target.addEventListener("daw-recording-error", this._onRecEnd);
+      target.addEventListener("daw-recording-pause", this._onRecPause);
+      target.addEventListener("daw-recording-resume", this._onRecResume);
     });
   }
   disconnectedCallback() {
@@ -798,11 +1092,13 @@ var DawPauseButtonElement = class extends DawTransportButton {
       this._targetRef.removeEventListener("daw-recording-start", this._onRecStart);
       this._targetRef.removeEventListener("daw-recording-complete", this._onRecEnd);
       this._targetRef.removeEventListener("daw-recording-error", this._onRecEnd);
+      this._targetRef.removeEventListener("daw-recording-pause", this._onRecPause);
+      this._targetRef.removeEventListener("daw-recording-resume", this._onRecResume);
       this._targetRef = null;
     }
   }
   render() {
-    return html4`
+    return html5`
       <button part="button" ?data-paused=${this._isPaused} @click=${this._onClick}>
         <slot>Pause</slot>
       </button>
@@ -817,15 +1113,7 @@ var DawPauseButtonElement = class extends DawTransportButton {
       return;
     }
     if (this._isRecording) {
-      if (this._isPaused) {
-        target.resumeRecording();
-        target.play(target.currentTime);
-        this._isPaused = false;
-      } else {
-        target.pauseRecording();
-        target.pause();
-        this._isPaused = true;
-      }
+      target.togglePauseRecording();
     } else {
       target.pause();
     }
@@ -833,7 +1121,7 @@ var DawPauseButtonElement = class extends DawTransportButton {
 };
 DawPauseButtonElement.styles = [
   DawTransportButton.styles,
-  css4`
+  css5`
       button[data-paused] {
         background: rgba(255, 255, 255, 0.1);
         border-color: var(--daw-controls-text, #e0d4c8);
@@ -847,15 +1135,15 @@ __decorateClass([
   state2()
 ], DawPauseButtonElement.prototype, "_isRecording", 2);
 DawPauseButtonElement = __decorateClass([
-  customElement7("daw-pause-button")
+  customElement8("daw-pause-button")
 ], DawPauseButtonElement);
 
 // src/elements/daw-stop-button.ts
-import { html as html5 } from "lit";
-import { customElement as customElement8 } from "lit/decorators.js";
+import { html as html6 } from "lit";
+import { customElement as customElement9 } from "lit/decorators.js";
 var DawStopButtonElement = class extends DawTransportButton {
   render() {
-    return html5`
+    return html6`
       <button part="button" @click=${this._onClick}>
         <slot>Stop</slot>
       </button>
@@ -870,18 +1158,31 @@ var DawStopButtonElement = class extends DawTransportButton {
       return;
     }
     if (target.isRecording) {
-      target.stopRecording();
+      target.stopRecording().catch((err) => {
+        console.warn("[dawcore] stopRecording failed: " + String(err));
+      }).then(() => {
+        try {
+          target.stop();
+        } catch (err) {
+          console.warn("[dawcore] stop after stopRecording failed: " + String(err));
+        }
+      });
+    } else {
+      try {
+        target.stop();
+      } catch (err) {
+        console.warn("[dawcore] stop failed: " + String(err));
+      }
     }
-    target.stop();
   }
 };
 DawStopButtonElement = __decorateClass([
-  customElement8("daw-stop-button")
+  customElement9("daw-stop-button")
 ], DawStopButtonElement);
 
 // src/elements/daw-editor.ts
-import { LitElement as LitElement9, html as html8, css as css8 } from "lit";
-import { customElement as customElement11, property as property7, state as state3 } from "lit/decorators.js";
+import { LitElement as LitElement10, html as html9, css as css9 } from "lit";
+import { customElement as customElement12, property as property8, state as state3 } from "lit/decorators.js";
 
 // src/types.ts
 function isDomClip(desc) {
@@ -1366,9 +1667,9 @@ var PeakPipeline = class {
 };
 
 // src/elements/daw-track-controls.ts
-import { LitElement as LitElement7, html as html6, css as css5 } from "lit";
-import { customElement as customElement9, property as property5 } from "lit/decorators.js";
-var DawTrackControlsElement = class extends LitElement7 {
+import { LitElement as LitElement8, html as html7, css as css6 } from "lit";
+import { customElement as customElement10, property as property6 } from "lit/decorators.js";
+var DawTrackControlsElement = class extends LitElement8 {
   constructor() {
     super(...arguments);
     this.trackId = null;
@@ -1416,7 +1717,7 @@ var DawTrackControlsElement = class extends LitElement7 {
     const volPercent = Math.round(this.volume * 100);
     const panPercent = Math.round(Math.abs(this.pan) * 100);
     const panDisplay = this.pan === 0 ? "C" : (this.pan > 0 ? "R" : "L") + panPercent;
-    return html6`
+    return html7`
       <div class="header">
         <span class="name" title=${this.trackName}>${this.trackName || "Untitled"}</span>
         <button class="remove-btn" @click=${this._onRemoveClick} title="Remove track">
@@ -1466,7 +1767,7 @@ var DawTrackControlsElement = class extends LitElement7 {
     `;
   }
 };
-DawTrackControlsElement.styles = css5`
+DawTrackControlsElement.styles = css6`
     :host {
       display: flex;
       flex-direction: column;
@@ -1600,30 +1901,30 @@ DawTrackControlsElement.styles = css5`
     }
   `;
 __decorateClass([
-  property5({ attribute: false })
+  property6({ attribute: false })
 ], DawTrackControlsElement.prototype, "trackId", 2);
 __decorateClass([
-  property5({ attribute: false })
+  property6({ attribute: false })
 ], DawTrackControlsElement.prototype, "trackName", 2);
 __decorateClass([
-  property5({ type: Number, attribute: false })
+  property6({ type: Number, attribute: false })
 ], DawTrackControlsElement.prototype, "volume", 2);
 __decorateClass([
-  property5({ type: Number, attribute: false })
+  property6({ type: Number, attribute: false })
 ], DawTrackControlsElement.prototype, "pan", 2);
 __decorateClass([
-  property5({ type: Boolean, attribute: false })
+  property6({ type: Boolean, attribute: false })
 ], DawTrackControlsElement.prototype, "muted", 2);
 __decorateClass([
-  property5({ type: Boolean, attribute: false })
+  property6({ type: Boolean, attribute: false })
 ], DawTrackControlsElement.prototype, "soloed", 2);
 DawTrackControlsElement = __decorateClass([
-  customElement9("daw-track-controls")
+  customElement10("daw-track-controls")
 ], DawTrackControlsElement);
 
 // src/elements/daw-grid.ts
-import { LitElement as LitElement8, html as html7, css as css6 } from "lit";
-import { customElement as customElement10, property as property6 } from "lit/decorators.js";
+import { LitElement as LitElement9, html as html8, css as css7 } from "lit";
+import { customElement as customElement11, property as property7 } from "lit/decorators.js";
 import { MIN_PIXELS_PER_UNIT } from "@waveform-playlist/core";
 
 // src/utils/musical-tick-cache.ts
@@ -1654,8 +1955,8 @@ function getCachedMusicalTicks(params) {
 }
 
 // src/elements/daw-grid.ts
-var MAX_CANVAS_WIDTH2 = 1e3;
-var DawGridElement = class extends LitElement8 {
+var MAX_CANVAS_WIDTH3 = 1e3;
+var DawGridElement = class extends LitElement9 {
   constructor() {
     super(...arguments);
     this.ticksPerPixel = 24;
@@ -1683,25 +1984,25 @@ var DawGridElement = class extends LitElement8 {
     }
   }
   render() {
-    if (!this._tickData) return html7``;
+    if (!this._tickData) return html8``;
     const totalWidth = this.length;
     const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
     const indices = getVisibleChunkIndices(
       totalWidth,
-      MAX_CANVAS_WIDTH2,
+      MAX_CANVAS_WIDTH3,
       this.visibleStart,
       this.visibleEnd
     );
-    return html7`
+    return html8`
       <div class="container" style="width: ${totalWidth}px; height: ${this.height}px;">
         ${indices.map((i) => {
-      const width = Math.min(MAX_CANVAS_WIDTH2, totalWidth - i * MAX_CANVAS_WIDTH2);
-      return html7`
+      const width = Math.min(MAX_CANVAS_WIDTH3, totalWidth - i * MAX_CANVAS_WIDTH3);
+      return html8`
             <canvas
               data-index=${i}
               width=${width * dpr}
               height=${this.height * dpr}
-              style="left: ${i * MAX_CANVAS_WIDTH2}px; width: ${width}px; height: ${this.height}px;"
+              style="left: ${i * MAX_CANVAS_WIDTH3}px; width: ${width}px; height: ${this.height}px;"
             ></canvas>
           `;
     })}
@@ -1725,8 +2026,8 @@ var DawGridElement = class extends LitElement8 {
       const idx = Number(canvas.dataset.index);
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
-      const chunkLeft = idx * MAX_CANVAS_WIDTH2;
-      const canvasWidth = Math.min(MAX_CANVAS_WIDTH2, this.length - chunkLeft);
+      const chunkLeft = idx * MAX_CANVAS_WIDTH3;
+      const canvasWidth = Math.min(MAX_CANVAS_WIDTH3, this.length - chunkLeft);
       ctx.resetTransform();
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.scale(dpr, dpr);
@@ -1757,7 +2058,7 @@ var DawGridElement = class extends LitElement8 {
     }
   }
 };
-DawGridElement.styles = css6`
+DawGridElement.styles = css7`
     :host {
       display: block;
       position: absolute;
@@ -1775,33 +2076,33 @@ DawGridElement.styles = css6`
     }
   `;
 __decorateClass([
-  property6({ type: Number, attribute: false })
+  property7({ type: Number, attribute: false })
 ], DawGridElement.prototype, "ticksPerPixel", 2);
 __decorateClass([
-  property6({ attribute: false })
+  property7({ attribute: false })
 ], DawGridElement.prototype, "meterEntries", 2);
 __decorateClass([
-  property6({ type: Number, attribute: false })
+  property7({ type: Number, attribute: false })
 ], DawGridElement.prototype, "ppqn", 2);
 __decorateClass([
-  property6({ type: Number, attribute: false })
+  property7({ type: Number, attribute: false })
 ], DawGridElement.prototype, "visibleStart", 2);
 __decorateClass([
-  property6({ type: Number, attribute: false })
+  property7({ type: Number, attribute: false })
 ], DawGridElement.prototype, "visibleEnd", 2);
 __decorateClass([
-  property6({ type: Number, attribute: false })
+  property7({ type: Number, attribute: false })
 ], DawGridElement.prototype, "length", 2);
 __decorateClass([
-  property6({ type: Number, attribute: false })
+  property7({ type: Number, attribute: false })
 ], DawGridElement.prototype, "height", 2);
 DawGridElement = __decorateClass([
-  customElement10("daw-grid")
+  customElement11("daw-grid")
 ], DawGridElement);
 
 // src/styles/theme.ts
-import { css as css7 } from "lit";
-var hostStyles = css7`
+import { css as css8 } from "lit";
+var hostStyles = css8`
   :host {
     --daw-wave-color: #c49a6c;
     --daw-progress-color: #63c75f;
@@ -1817,7 +2118,7 @@ var hostStyles = css7`
     --daw-clip-header-text: #e0d4c8;
   }
 `;
-var clipStyles = css7`
+var clipStyles = css8`
   .clip-container {
     position: absolute;
     overflow: hidden;
@@ -2062,6 +2363,9 @@ var RecordingController = class {
   constructor(host) {
     this._sessions = /* @__PURE__ */ new Map();
     this._workletLoadedCtx = null;
+    /** Tracks worklet pause state explicitly so external consumers (editor,
+     * pause button, spacebar) can share one source of truth. */
+    this._isPaused = false;
     this._host = host;
     host.addController(this);
   }
@@ -2076,6 +2380,9 @@ var RecordingController = class {
   get isRecording() {
     return this._sessions.size > 0;
   }
+  get isPaused() {
+    return this._isPaused && this._sessions.size > 0;
+  }
   getSession(trackId) {
     return this._sessions.get(trackId);
   }
@@ -2148,7 +2455,9 @@ var RecordingController = class {
         latencySamples,
         wasOverdub: options.overdub ?? false,
         _onTrackEnded: onTrackEnded,
-        _audioTrack: audioTrack
+        _audioTrack: audioTrack,
+        stopAckResolve: null,
+        stopping: false
       };
       this._sessions.set(trackId, session);
       workletNode.port.onmessage = (e) => {
@@ -2186,25 +2495,69 @@ var RecordingController = class {
     const id = trackId ?? [...this._sessions.keys()][0];
     if (!id) return;
     const session = this._sessions.get(id);
-    if (!session) return;
+    if (!session || session.stopping) return;
     session.workletNode.port.postMessage({ command: "pause" });
+    this._isPaused = true;
+    this._host.dispatchEvent(
+      new CustomEvent("daw-recording-pause", {
+        bubbles: true,
+        composed: true,
+        detail: { trackId: id }
+      })
+    );
   }
   resumeRecording(trackId) {
     const id = trackId ?? [...this._sessions.keys()][0];
     if (!id) return;
     const session = this._sessions.get(id);
-    if (!session) return;
+    if (!session || session.stopping) return;
     session.workletNode.port.postMessage({ command: "resume" });
+    this._isPaused = false;
+    this._host.dispatchEvent(
+      new CustomEvent("daw-recording-resume", {
+        bubbles: true,
+        composed: true,
+        detail: { trackId: id }
+      })
+    );
   }
-  stopRecording(trackId) {
+  async stopRecording(trackId) {
     const id = trackId ?? [...this._sessions.keys()][0];
     if (!id) return;
     const session = this._sessions.get(id);
     if (!session) return;
+    const wasPaused = this._isPaused;
+    this._isPaused = false;
+    session.stopping = true;
     if (session.wasOverdub && typeof this._host.stop === "function") {
       this._host.stop();
     }
-    session.workletNode.port.postMessage({ command: "stop" });
+    if (wasPaused) {
+      session.workletNode.port.postMessage({ command: "stop" });
+    } else {
+      const stopAck = new Promise((resolve) => {
+        session.stopAckResolve = resolve;
+      });
+      let timeoutId;
+      const timeout = new Promise((resolve) => {
+        timeoutId = setTimeout(resolve, 1e3);
+      });
+      session.workletNode.port.postMessage({ command: "stop" });
+      await Promise.race([stopAck, timeout]);
+      clearTimeout(timeoutId);
+      session.stopAckResolve = null;
+      let lastSamples = -1;
+      let stable = 0;
+      for (let i = 0; i < 50; i++) {
+        if (session.totalSamples === lastSamples) {
+          if (++stable >= 3) break;
+        } else {
+          stable = 0;
+          lastSamples = session.totalSamples;
+        }
+        await new Promise((r) => setTimeout(r, 5));
+      }
+    }
     session.source.disconnect();
     session.workletNode.disconnect();
     this._removeTrackEndedListener(session);
@@ -2276,8 +2629,20 @@ var RecordingController = class {
   _onWorkletMessage(trackId, data) {
     const session = this._sessions.get(trackId);
     if (!session) return;
-    const { channels } = data;
-    if (!channels || channels.length === 0 || !channels[0]) return;
+    const { channels, done } = data;
+    try {
+      const hasSamples = !!(channels && channels.length > 0 && channels[0] && channels[0].length > 0);
+      if (!hasSamples) return;
+      this._processWorkletSamples(trackId, session, channels);
+    } finally {
+      if (done && session.stopAckResolve) {
+        const resolve = session.stopAckResolve;
+        session.stopAckResolve = null;
+        resolve();
+      }
+    }
+  }
+  _processWorkletSamples(trackId, session, channels) {
     const samplesProcessedBefore = session.totalSamples;
     for (let ch = 0; ch < session.channelCount; ch++) {
       if (channels[ch]) {
@@ -2285,6 +2650,7 @@ var RecordingController = class {
       }
     }
     session.totalSamples += channels[0].length;
+    if (session.stopAckResolve !== null) return;
     for (let ch = 0; ch < session.channelCount; ch++) {
       if (!channels[ch]) continue;
       const oldPeakCount = Math.floor(session.peaks[ch].length / 2);
@@ -2355,6 +2721,123 @@ var RecordingController = class {
   }
 };
 
+// src/controllers/spectrogram-controller.ts
+import {
+  SpectrogramOrchestrator
+} from "@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 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
 import { pixelsToSeconds, snapTickToGrid } from "@waveform-playlist/core";
 
@@ -2619,6 +3102,7 @@ var ClipPointerHandler = class {
       const trackId = boundary.dataset.trackId;
       const edge = boundary.dataset.boundaryEdge;
       if (!clipId || !trackId || edge !== "left" && edge !== "right") return false;
+      if (this._host.isMidiClip(trackId, clipId)) return true;
       this._beginDrag(edge === "left" ? "trim-left" : "trim-right", clipId, trackId, e);
       this._boundaryEl = boundary;
       return true;
@@ -2912,6 +3396,7 @@ async function loadFiles(host, files) {
         pan: 0,
         muted: false,
         soloed: false,
+        renderMode: "waveform",
         clips: [
           {
             kind: "drop",
@@ -2924,7 +3409,10 @@ async function loadFiles(host, files) {
             name,
             fadeIn: 0,
             fadeOut: 0,
-            fadeType: "linear"
+            fadeType: "linear",
+            midiNotes: null,
+            midiChannel: null,
+            midiProgram: null
           }
         ]
       });
@@ -3011,7 +3499,10 @@ function addRecordedClip(host, trackId, buf, startSample, durSamples, offsetSamp
         name: "Recording",
         fadeIn: 0,
         fadeOut: 0,
-        fadeType: "linear"
+        fadeType: "linear",
+        midiNotes: null,
+        midiChannel: null,
+        midiProgram: null
       };
       host._tracks = new Map(host._tracks).set(trackId, {
         ...desc,
@@ -3070,7 +3561,10 @@ function canSplitAtTime(host, time) {
   const track = state5.tracks.find((t) => t.id === state5.selectedTrackId);
   if (!track) return false;
   const atSample = Math.round(time * host.effectiveSampleRate);
-  return !!findClipAtSample(track.clips, atSample);
+  const clip = findClipAtSample(track.clips, atSample);
+  if (!clip) return false;
+  if (clip.midiNotes != null) return false;
+  return true;
 }
 function performSplit(host, time) {
   const { engine } = host;
@@ -3225,7 +3719,7 @@ async function loadWaveformDataFromUrl(src) {
 
 // src/elements/daw-editor.ts
 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 LitElement9 {
+var DawEditorElement = class extends LitElement10 {
   constructor() {
     super(...arguments);
     this._samplesPerPixel = 1024;
@@ -3239,6 +3733,8 @@ var DawEditorElement = class extends LitElement9 {
     this.clipHeaderHeight = 20;
     this.interactiveClips = false;
     this.indefinitePlayback = false;
+    this._spectrogramConfig = null;
+    this._spectrogramColorMap = null;
     this.scaleMode = "temporal";
     this._ticksPerPixel = 24;
     this._bpm = 120;
@@ -3274,6 +3770,7 @@ var DawEditorElement = class extends LitElement9 {
     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 = (() => {
@@ -3314,6 +3811,26 @@ var DawEditorElement = class extends LitElement9 {
       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 ?? {};
@@ -3384,7 +3901,10 @@ var DawEditorElement = class extends LitElement9 {
         name: clipEl.name,
         fadeIn: clipEl.fadeIn,
         fadeOut: clipEl.fadeOut,
-        fadeType: clipEl.fadeType
+        fadeType: clipEl.fadeType,
+        midiNotes: clipEl.midiNotes,
+        midiChannel: clipEl.midiChannel,
+        midiProgram: clipEl.midiProgram
       };
       this._loadAndAppendClip(trackId, clipDesc);
     };
@@ -3435,6 +3955,9 @@ var DawEditorElement = class extends LitElement9 {
     };
     // --- Recording ---
     this.recordingStream = null;
+    /** Set in togglePauseRecording when Transport is paused alongside the
+     * worklet, so resume can restart it. Cleared on resume and on stop. */
+    this._wasPlayingDuringRecording = false;
   }
   get samplesPerPixel() {
     return this._samplesPerPixel;
@@ -3451,6 +3974,72 @@ var DawEditorElement = class extends LitElement9 {
     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;
   }
@@ -3534,6 +4123,17 @@ var DawEditorElement = class extends LitElement9 {
     );
     return result.get(clipId) ?? null;
   }
+  /**
+   * Returns true if the clip is a MIDI clip (has midiNotes).
+   * Used by ClipPointerHandler to make trim handles inert for MIDI clips.
+   * Returns false for unknown track/clip IDs (defensive).
+   */
+  isMidiClip(trackId, clipId) {
+    const track = this._engineTracks.get(trackId);
+    if (!track) return false;
+    const clip = track.clips.find((c) => c.id === clipId);
+    return clip?.midiNotes != null;
+  }
   get effectiveSampleRate() {
     return this._resolvedSampleRate ?? this.sampleRate;
   }
@@ -3680,6 +4280,8 @@ var DawEditorElement = class extends LitElement9 {
     this._clipOffsets.clear();
     this._peakPipeline.terminate();
     this._minSamplesPerPixel = 0;
+    this._spectrogramController?.dispose();
+    this._spectrogramController = null;
     try {
       this._disposeEngine();
     } catch (err) {
@@ -3708,6 +4310,23 @@ var DawEditorElement = class extends LitElement9 {
       }
     }
   }
+  updated(_changed) {
+    if (this._spectrogramController) {
+      const vs = this._viewport.visibleStart;
+      const ve = this._viewport.visibleEnd;
+      if (Number.isFinite(vs) && Number.isFinite(ve)) {
+        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: this._renderSpp
+        });
+      }
+    }
+  }
   _onTrackRemoved(trackId) {
     this._trackElements.delete(trackId);
     const removedTrack = this._engineTracks.get(trackId);
@@ -3717,6 +4336,7 @@ var DawEditorElement = class extends LitElement9 {
         this._clipBuffers.delete(clip.id);
         this._clipOffsets.delete(clip.id);
         nextPeaks.delete(clip.id);
+        this._spectrogramController?.unregisterClipAudio(clip.id);
       }
       this._peaksData = nextPeaks;
     }
@@ -3731,11 +4351,23 @@ var DawEditorElement = class extends LitElement9 {
       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()) {
@@ -3777,6 +4409,7 @@ var DawEditorElement = class extends LitElement9 {
         });
       }
       this._commitTrackChange(trackId, updatedTrack);
+      this._maybeRegisterSpectrogramClipAudio(trackId, clip);
       this.dispatchEvent(
         new CustomEvent("daw-clip-ready", {
           bubbles: true,
@@ -3883,6 +4516,65 @@ var DawEditorElement = class extends LitElement9 {
     }
     return clip;
   }
+  /**
+   * Filter MIDI notes to only those with finite, in-range fields. Logs a
+   * warning for each dropped note. Used by _buildMidiClip and the
+   * _applyClipUpdate MIDI branch to prevent NaN propagation through the
+   * timeline.
+   */
+  _validMidiNotes(notes) {
+    return notes.filter((n) => {
+      const ok = Number.isFinite(n.time) && n.time >= 0 && Number.isFinite(n.duration) && n.duration > 0 && Number.isInteger(n.midi) && n.midi >= 0 && n.midi <= 127 && Number.isFinite(n.velocity) && n.velocity >= 0 && n.velocity <= 1;
+      if (!ok) {
+        console.warn("[dawcore] dropping malformed MIDI note: " + JSON.stringify(n));
+      }
+      return ok;
+    });
+  }
+  /**
+   * A clip descriptor is treated as MIDI when it has no audio src.
+   * Includes placeholder MIDI clips (no notes, no duration yet — registered
+   * with a 1s default span; notes upgrade via _applyClipUpdate). Warns when
+   * a clip ambiguously has both src and midiNotes — the audio path runs
+   * and notes would be silently ignored.
+   */
+  _isMidiDescriptor(clipDesc) {
+    if (clipDesc.src) {
+      if (clipDesc.midiNotes != null) {
+        console.warn(
+          '[dawcore] clip "' + (clipDesc.name || (isDomClip(clipDesc) ? clipDesc.clipId : "?")) + '" has both src and midiNotes \u2014 treating as audio (notes will be ignored)'
+        );
+      }
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Build an engine clip from a MIDI clip descriptor. Always returns a clip
+   * — empty notes / no declared duration get a 1-second placeholder span so
+   * the clip is reachable via `engine.updateTrack` once notes arrive.
+   */
+  _buildMidiClip(clipDesc) {
+    const sr = this.effectiveSampleRate;
+    const notes = this._validMidiNotes(clipDesc.midiNotes ?? []);
+    const noteSpanSeconds = notes.length ? notes.reduce((max, n) => Math.max(max, n.time + n.duration), 0) : 0;
+    const sourceDurationSamples = Math.ceil(Math.max(noteSpanSeconds, clipDesc.duration, 1) * sr);
+    const requestedDurationSamples = clipDesc.duration > 0 ? Math.round(clipDesc.duration * sr) : sourceDurationSamples;
+    const clip = createClip3({
+      startSample: Math.round(clipDesc.start * sr),
+      durationSamples: requestedDurationSamples,
+      offsetSamples: Math.round(clipDesc.offset * sr),
+      sampleRate: sr,
+      sourceDurationSamples,
+      gain: clipDesc.gain,
+      name: clipDesc.name,
+      midiNotes: notes,
+      midiChannel: clipDesc.midiChannel ?? void 0,
+      midiProgram: clipDesc.midiProgram ?? void 0
+    });
+    if (isDomClip(clipDesc)) clip.id = clipDesc.clipId;
+    return clip;
+  }
   /** Remove a single clip from all per-clip caches. Used by error rollbacks. */
   _purgeClipCaches(clipId) {
     const nextBuffers = new Map(this._clipBuffers);
@@ -3892,6 +4584,7 @@ var DawEditorElement = class extends LitElement9 {
     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
@@ -3920,6 +4613,34 @@ var DawEditorElement = class extends LitElement9 {
     }
     const oldClip = t.clips[idx];
     const sr = oldClip.sampleRate ?? this.effectiveSampleRate;
+    const isMidiNow = clipEl.midiNotes != null;
+    const wasMidi = oldClip.midiNotes != null;
+    if (isMidiNow || wasMidi) {
+      const notes = this._validMidiNotes(clipEl.midiNotes ?? []);
+      const noteSpanSeconds = notes.length ? notes.reduce((max, n) => Math.max(max, n.time + n.duration), 0) : 0;
+      const sourceDurationSamples = Math.ceil(Math.max(noteSpanSeconds, clipEl.duration, 1) * sr);
+      const requestedDurationSamples = clipEl.duration > 0 ? Math.round(clipEl.duration * sr) : sourceDurationSamples;
+      const updatedClip2 = {
+        ...oldClip,
+        audioBuffer: void 0,
+        startSample: Math.round(clipEl.start * sr),
+        offsetSamples: Math.round(clipEl.offset * sr),
+        durationSamples: requestedDurationSamples,
+        sourceDurationSamples,
+        gain: clipEl.gain,
+        name: clipEl.name || oldClip.name,
+        midiNotes: notes,
+        midiChannel: clipEl.midiChannel ?? void 0,
+        midiProgram: clipEl.midiProgram ?? void 0
+      };
+      const updatedClips2 = [...t.clips];
+      updatedClips2[idx] = updatedClip2;
+      const updatedTrack2 = { ...t, clips: updatedClips2 };
+      this._engineTracks = new Map(this._engineTracks).set(trackId, updatedTrack2);
+      this._purgeClipCaches(clipId);
+      this._commitTrackChange(trackId, updatedTrack2);
+      return;
+    }
     const newStartSample = Math.round(clipEl.start * sr);
     const newDurationSamples = clipEl.duration > 0 ? Math.round(clipEl.duration * sr) : oldClip.durationSamples;
     const newOffsetSamples = Math.round(clipEl.offset * sr);
@@ -3996,7 +4717,10 @@ var DawEditorElement = class extends LitElement9 {
         name: trackEl.name || "",
         fadeIn: 0,
         fadeOut: 0,
-        fadeType: "linear"
+        fadeType: "linear",
+        midiNotes: null,
+        midiChannel: null,
+        midiProgram: null
       });
     } else {
       for (const clipEl of clipEls) {
@@ -4012,7 +4736,10 @@ var DawEditorElement = class extends LitElement9 {
           name: clipEl.name,
           fadeIn: clipEl.fadeIn,
           fadeOut: clipEl.fadeOut,
-          fadeType: clipEl.fadeType
+          fadeType: clipEl.fadeType,
+          midiNotes: clipEl.midiNotes,
+          midiChannel: clipEl.midiChannel,
+          midiProgram: clipEl.midiProgram
         });
       }
     }
@@ -4023,6 +4750,7 @@ var DawEditorElement = class extends LitElement9 {
       pan: trackEl.pan,
       muted: trackEl.muted,
       soloed: trackEl.soloed,
+      renderMode: trackEl.renderMode,
       clips
     };
   }
@@ -4031,7 +4759,10 @@ var DawEditorElement = class extends LitElement9 {
     try {
       const clips = [];
       for (const clipDesc of descriptor.clips) {
-        if (!clipDesc.src) continue;
+        if (this._isMidiDescriptor(clipDesc)) {
+          clips.push(this._buildMidiClip(clipDesc));
+          continue;
+        }
         try {
           const waveformDataPromise = clipDesc.peaksSrc ? this._resolvePeaks(clipDesc.peaksSrc) : Promise.resolve(null);
           const audioPromise = this._fetchAndDecode(clipDesc.src);
@@ -4136,6 +4867,9 @@ var DawEditorElement = class extends LitElement9 {
       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(
@@ -4243,7 +4977,11 @@ var DawEditorElement = class extends LitElement9 {
           nextTracks.set(track.id, track);
         }
         this._engineTracks = nextTracks;
-        syncPeaksForChangedClips(this, engineState.tracks);
+        const audioTracks = engineState.tracks.filter((t) => {
+          const desc = this._tracks.get(t.id);
+          return desc?.renderMode !== "piano-roll";
+        });
+        syncPeaksForChangedClips(this, audioTracks);
       }
     });
     engine.on("pause", () => {
@@ -4318,7 +5056,17 @@ var DawEditorElement = class extends LitElement9 {
     if (config.pan !== void 0) trackEl.pan = config.pan;
     if (config.muted) trackEl.setAttribute("muted", "");
     if (config.soloed) trackEl.setAttribute("soloed", "");
-    for (const clipConfig of config.clips ?? []) {
+    const renderMode = config.renderMode ?? (config.midi ? "piano-roll" : void 0);
+    if (renderMode !== void 0) trackEl.setAttribute("render-mode", renderMode);
+    const clipConfigs = [...config.clips ?? []];
+    if (config.midi) {
+      clipConfigs.push({
+        midiNotes: config.midi.notes,
+        midiChannel: config.midi.channel,
+        midiProgram: config.midi.program
+      });
+    }
+    for (const clipConfig of clipConfigs) {
       trackEl.appendChild(this._buildClipElement(clipConfig));
     }
     return this._awaitId(
@@ -4364,6 +5112,7 @@ var DawEditorElement = class extends LitElement9 {
         if (partial.soloed) trackEl.setAttribute("soloed", "");
         else trackEl.removeAttribute("soloed");
       }
+      if (partial.renderMode !== void 0) trackEl.setAttribute("render-mode", partial.renderMode);
       return;
     }
     const oldDesc = this._tracks.get(trackId);
@@ -4374,7 +5123,8 @@ var DawEditorElement = class extends LitElement9 {
       ...partial.volume !== void 0 && { volume: partial.volume },
       ...partial.pan !== void 0 && { pan: partial.pan },
       ...partial.muted !== void 0 && { muted: partial.muted },
-      ...partial.soloed !== void 0 && { soloed: partial.soloed }
+      ...partial.soloed !== void 0 && { soloed: partial.soloed },
+      ...partial.renderMode !== void 0 && { renderMode: partial.renderMode }
     };
     this._tracks = new Map(this._tracks).set(trackId, newDesc);
     if (this._engine) {
@@ -4509,6 +5259,11 @@ var DawEditorElement = class extends LitElement9 {
     if (config.fadeIn !== void 0) clipEl.fadeIn = config.fadeIn;
     if (config.fadeOut !== void 0) clipEl.fadeOut = config.fadeOut;
     if (config.fadeType !== void 0) clipEl.setAttribute("fade-type", config.fadeType);
+    if (config.midiNotes !== void 0) clipEl.midiNotes = config.midiNotes;
+    if (config.midiChannel !== void 0)
+      clipEl.setAttribute("midi-channel", String(config.midiChannel));
+    if (config.midiProgram !== void 0)
+      clipEl.setAttribute("midi-program", String(config.midiProgram));
     return clipEl;
   }
   // --- Playback ---
@@ -4544,7 +5299,9 @@ var DawEditorElement = class extends LitElement9 {
   }
   /** Toggle between play and pause. */
   togglePlayPause() {
-    if (this._isPlaying) {
+    if (this.isRecording) {
+      this.togglePauseRecording();
+    } else if (this._isPlaying) {
       this.pause();
     } else {
       this.play();
@@ -4618,14 +5375,41 @@ var DawEditorElement = class extends LitElement9 {
   get isRecording() {
     return this._recordingController.isRecording;
   }
+  get isRecordingPaused() {
+    return this._recordingController.isPaused;
+  }
   pauseRecording() {
     this._recordingController.pauseRecording();
   }
   resumeRecording() {
     this._recordingController.resumeRecording();
+    this._wasPlayingDuringRecording = false;
+  }
+  /**
+   * Audacity-style pause toggle for active recordings: pauses both the
+   * worklet capture and (if running) the playback Transport. On resume,
+   * Transport restarts only if it was running before — non-overdub
+   * recordings stay silent on resume.
+   */
+  togglePauseRecording() {
+    if (!this.isRecording) return;
+    if (this.isRecordingPaused) {
+      const wasPlaying = this._wasPlayingDuringRecording;
+      this.resumeRecording();
+      if (wasPlaying) {
+        void this.play(this.currentTime);
+      }
+    } else {
+      this.pauseRecording();
+      if (this._isPlaying) {
+        this._wasPlayingDuringRecording = true;
+        this.pause();
+      }
+    }
   }
   stopRecording() {
-    this._recordingController.stopRecording();
+    this._wasPlayingDuringRecording = false;
+    return this._recordingController.stopRecording();
   }
   _addRecordedClip(trackId, buf, startSample, durSamples, offsetSamples = 0) {
     addRecordedClip(this, trackId, buf, startSample, durSamples, offsetSamples);
@@ -4661,7 +5445,7 @@ var DawEditorElement = class extends LitElement9 {
     const w = Math.floor(audibleSamples / renderSpp);
     return rs.peaks.map((chPeaks, ch) => {
       const slicedPeaks = latencyPixels > 0 ? chPeaks.slice(latencyPixels * 2) : chPeaks;
-      return html8`
+      return html9`
         <daw-waveform
           data-recording-track=${trackId}
           data-recording-channel=${ch}
@@ -4758,11 +5542,11 @@ var DawEditorElement = class extends LitElement9 {
         trackHeight: this.waveHeight * numChannels + (this.clipHeaders ? this.clipHeaderHeight : 0)
       };
     });
-    return html8`
-      ${orderedTracks.length > 0 || this.indefinitePlayback ? html8`<div class="controls-column">
-            ${this.timescale ? html8`<div style="height: 30px;"></div>` : ""}
+    return html9`
+      ${orderedTracks.length > 0 || this.indefinitePlayback ? html9`<div class="controls-column">
+            ${this.timescale ? html9`<div style="height: 30px;"></div>` : ""}
             ${orderedTracks.map(
-      (t) => html8`
+      (t) => html9`
                 <daw-track-controls
                   style="height: ${t.trackHeight}px;"
                   .trackId=${t.trackId}
@@ -4785,7 +5569,7 @@ var DawEditorElement = class extends LitElement9 {
           @dragleave=${this._onDragLeave}
           @drop=${this._onDrop}
         >
-          ${(orderedTracks.length > 0 || this.scaleMode === "beats" || this.indefinitePlayback) && this.timescale ? html8`<daw-ruler
+          ${(orderedTracks.length > 0 || this.scaleMode === "beats" || this.indefinitePlayback) && this.timescale ? html9`<daw-ruler
                 .samplesPerPixel=${spp}
                 .sampleRate=${this.effectiveSampleRate}
                 .duration=${this._duration}
@@ -4795,7 +5579,7 @@ var DawEditorElement = class extends LitElement9 {
                 .ppqn=${this.ppqn}
                 .totalWidth=${this._totalWidth}
               ></daw-ruler>` : ""}
-          ${this.scaleMode === "beats" ? html8`<daw-grid
+          ${this.scaleMode === "beats" ? html9`<daw-grid
                 style="top: ${this.timescale ? 30 : 0}px;"
                 .ticksPerPixel=${this.ticksPerPixel}
                 .meterEntries=${this._meterEntries}
@@ -4805,11 +5589,11 @@ var DawEditorElement = class extends LitElement9 {
                 .length=${this._totalWidth}
                 .height=${orderedTracks.length > 0 ? orderedTracks.reduce((sum, t) => sum + t.trackHeight + 1, 0) : this._emptyGridHeight}
               ></daw-grid>` : ""}
-          ${orderedTracks.length > 0 || this.scaleMode === "beats" || this.indefinitePlayback ? html8`<daw-selection .startPx=${selStartPx} .endPx=${selEndPx}></daw-selection>
+          ${orderedTracks.length > 0 || this.scaleMode === "beats" || this.indefinitePlayback ? html9`<daw-selection .startPx=${selStartPx} .endPx=${selEndPx}></daw-selection>
                 <daw-playhead></daw-playhead>` : ""}
           ${orderedTracks.map((t) => {
       const channelHeight = this.waveHeight;
-      return html8`
+      return html9`
               <div
                 class="track-row ${t.trackId === this._selectedTrackId ? "selected" : ""}"
                 style="height: ${t.trackHeight}px;"
@@ -4872,12 +5656,12 @@ var DawEditorElement = class extends LitElement9 {
         const channels = segmentChannels ?? peakData?.data ?? [new Int16Array(0)];
         const hdrH = this.clipHeaders ? this.clipHeaderHeight : 0;
         const chH = this.waveHeight;
-        return html8` <div
+        return html9` <div
                     class="clip-container"
                     style="left:${clipLeft}px;top:0;width:${width}px;height:${t.trackHeight}px;"
                     data-clip-id=${clip.id}
                   >
-                    ${hdrH > 0 ? html8`<div
+                    ${hdrH > 0 ? html9`<div
                           class="clip-header"
                           data-clip-id=${clip.id}
                           data-track-id=${t.trackId}
@@ -4885,21 +5669,48 @@ var DawEditorElement = class extends LitElement9 {
                         >
                           <span>${clip.name || t.descriptor?.name || ""}</span>
                         </div>` : ""}
-                    ${channels.map(
-          (chPeaks, chIdx) => html8` <daw-waveform
-                          style="position:absolute;left:0;top:${hdrH + chIdx * chH}px;"
-                          .peaks=${chPeaks}
+                    ${t.descriptor?.renderMode === "piano-roll" ? html9`<daw-piano-roll
+                          style="position:absolute;left:0;top:${hdrH}px;"
+                          .midiNotes=${clip.midiNotes ?? []}
                           .length=${peakData?.length ?? width}
-                          .waveHeight=${chH}
-                          .barWidth=${this.barWidth}
-                          .barGap=${this.barGap}
+                          .waveHeight=${chH * channels.length}
+                          .samplesPerPixel=${this._renderSpp}
+                          .sampleRate=${this.effectiveSampleRate}
+                          .clipOffsetSeconds=${(clip.offsetSamples ?? 0) / this.effectiveSampleRate}
                           .visibleStart=${this._viewport.visibleStart}
                           .visibleEnd=${this._viewport.visibleEnd}
                           .originX=${clipLeft}
-                          .segments=${clipSegments}
-                        ></daw-waveform>`
+                          ?selected=${t.trackId === this._selectedTrackId}
+                        ></daw-piano-roll>` : t.descriptor?.renderMode === "spectrogram" ? channels.map(
+          (_chPeaks, chIdx) => html9`<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) => html9` <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 ? html8` <div
+                    ${this.interactiveClips ? html9` <div
                             class="clip-boundary"
                             data-boundary-edge="left"
                             data-clip-id=${clip.id}
@@ -4925,7 +5736,7 @@ var DawEditorElement = class extends LitElement9 {
 };
 DawEditorElement.styles = [
   hostStyles,
-  css8`
+  css9`
       :host {
         display: flex;
         position: relative;
@@ -4973,64 +5784,70 @@ DawEditorElement.styles = [
 ];
 DawEditorElement._CONTROL_PROPS = /* @__PURE__ */ new Set(["volume", "pan", "muted", "soloed"]);
 __decorateClass([
-  property7({ type: Number, attribute: "samples-per-pixel", noAccessor: true })
+  property8({ type: Number, attribute: "samples-per-pixel", noAccessor: true })
 ], DawEditorElement.prototype, "samplesPerPixel", 1);
 __decorateClass([
-  property7({ type: Number, attribute: "wave-height" })
+  property8({ type: Number, attribute: "wave-height" })
 ], DawEditorElement.prototype, "waveHeight", 2);
 __decorateClass([
-  property7({ type: Boolean })
+  property8({ type: Boolean })
 ], DawEditorElement.prototype, "timescale", 2);
 __decorateClass([
-  property7({ type: Boolean })
+  property8({ type: Boolean })
 ], DawEditorElement.prototype, "mono", 2);
 __decorateClass([
-  property7({ type: Number, attribute: "bar-width" })
+  property8({ type: Number, attribute: "bar-width" })
 ], DawEditorElement.prototype, "barWidth", 2);
 __decorateClass([
-  property7({ type: Number, attribute: "bar-gap" })
+  property8({ type: Number, attribute: "bar-gap" })
 ], DawEditorElement.prototype, "barGap", 2);
 __decorateClass([
-  property7({ type: Boolean, attribute: "file-drop" })
+  property8({ type: Boolean, attribute: "file-drop" })
 ], DawEditorElement.prototype, "fileDrop", 2);
 __decorateClass([
-  property7({ type: Boolean, attribute: "clip-headers" })
+  property8({ type: Boolean, attribute: "clip-headers" })
 ], DawEditorElement.prototype, "clipHeaders", 2);
 __decorateClass([
-  property7({ type: Number, attribute: "clip-header-height" })
+  property8({ type: Number, attribute: "clip-header-height" })
 ], DawEditorElement.prototype, "clipHeaderHeight", 2);
 __decorateClass([
-  property7({ type: Boolean, attribute: "interactive-clips" })
+  property8({ type: Boolean, attribute: "interactive-clips" })
 ], DawEditorElement.prototype, "interactiveClips", 2);
 __decorateClass([
-  property7({ type: Boolean, attribute: "indefinite-playback" })
+  property8({ type: Boolean, attribute: "indefinite-playback" })
 ], DawEditorElement.prototype, "indefinitePlayback", 2);
 __decorateClass([
-  property7({ type: String, attribute: "scale-mode" })
+  property8({ attribute: false, noAccessor: true })
+], DawEditorElement.prototype, "spectrogramConfig", 1);
+__decorateClass([
+  property8({ attribute: false, noAccessor: true })
+], DawEditorElement.prototype, "spectrogramColorMap", 1);
+__decorateClass([
+  property8({ type: String, attribute: "scale-mode" })
 ], DawEditorElement.prototype, "scaleMode", 2);
 __decorateClass([
-  property7({ type: Number, attribute: "ticks-per-pixel", noAccessor: true })
+  property8({ type: Number, attribute: "ticks-per-pixel", noAccessor: true })
 ], DawEditorElement.prototype, "ticksPerPixel", 1);
 __decorateClass([
-  property7({ type: Number, noAccessor: true })
+  property8({ type: Number, noAccessor: true })
 ], DawEditorElement.prototype, "bpm", 1);
 __decorateClass([
-  property7({ attribute: false })
+  property8({ attribute: false })
 ], DawEditorElement.prototype, "timeSignature", 2);
 __decorateClass([
-  property7({ attribute: false })
+  property8({ attribute: false })
 ], DawEditorElement.prototype, "meterEntries", 2);
 __decorateClass([
-  property7({ type: Number, noAccessor: true })
+  property8({ type: Number, noAccessor: true })
 ], DawEditorElement.prototype, "ppqn", 1);
 __decorateClass([
-  property7({ type: String, attribute: "snap-to" })
+  property8({ type: String, attribute: "snap-to" })
 ], DawEditorElement.prototype, "snapTo", 2);
 __decorateClass([
-  property7({ attribute: false })
+  property8({ attribute: false })
 ], DawEditorElement.prototype, "secondsToTicks", 2);
 __decorateClass([
-  property7({ attribute: false })
+  property8({ attribute: false })
 ], DawEditorElement.prototype, "ticksToSeconds", 2);
 __decorateClass([
   state3()
@@ -5054,18 +5871,18 @@ __decorateClass([
   state3()
 ], DawEditorElement.prototype, "_dragOver", 2);
 __decorateClass([
-  property7({ attribute: false })
+  property8({ attribute: false })
 ], DawEditorElement.prototype, "adapter", 1);
 __decorateClass([
-  property7({ attribute: "eager-resume" })
+  property8({ attribute: "eager-resume" })
 ], DawEditorElement.prototype, "eagerResume", 2);
 DawEditorElement = __decorateClass([
-  customElement11("daw-editor")
+  customElement12("daw-editor")
 ], DawEditorElement);
 
 // src/elements/daw-ruler.ts
-import { LitElement as LitElement10, html as html9, css as css9 } from "lit";
-import { customElement as customElement12, property as property8 } from "lit/decorators.js";
+import { LitElement as LitElement11, html as html10, css as css10 } from "lit";
+import { customElement as customElement13, property as property9 } from "lit/decorators.js";
 
 // src/utils/time-format.ts
 function formatTime(milliseconds) {
@@ -5116,8 +5933,8 @@ function computeTemporalTicks(samplesPerPixel, sampleRate, duration, rulerHeight
 }
 
 // src/elements/daw-ruler.ts
-var MAX_CANVAS_WIDTH3 = 1e3;
-var DawRulerElement = class extends LitElement10 {
+var MAX_CANVAS_WIDTH4 = 1e3;
+var DawRulerElement = class extends LitElement11 {
   constructor() {
     super(...arguments);
     this.samplesPerPixel = 1024;
@@ -5161,33 +5978,33 @@ var DawRulerElement = class extends LitElement10 {
   }
   render() {
     const widthX = this.scaleMode === "beats" ? this.totalWidth : this._tickData?.widthX ?? 0;
-    if (widthX <= 0) return html9``;
-    const totalChunks = Math.ceil(widthX / MAX_CANVAS_WIDTH3);
+    if (widthX <= 0) return html10``;
+    const totalChunks = Math.ceil(widthX / MAX_CANVAS_WIDTH4);
     const indices = Array.from({ length: totalChunks }, (_, i) => i);
     const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
     const beatsLabels = this.scaleMode === "beats" ? this._musicalTickData?.ticks.filter((t) => t.label) ?? [] : [];
     const temporalLabels = this.scaleMode !== "beats" ? this._tickData?.labels ?? [] : [];
-    return html9`
+    return html10`
       <div class="container" style="width: ${widthX}px; height: ${this.rulerHeight}px;">
         ${indices.map((i) => {
-      const width = Math.min(MAX_CANVAS_WIDTH3, widthX - i * MAX_CANVAS_WIDTH3);
-      return html9`
+      const width = Math.min(MAX_CANVAS_WIDTH4, widthX - i * MAX_CANVAS_WIDTH4);
+      return html10`
             <canvas
               data-index=${i}
               width=${width * dpr}
               height=${this.rulerHeight * dpr}
-              style="left: ${i * MAX_CANVAS_WIDTH3}px; width: ${width}px; height: ${this.rulerHeight}px;"
+              style="left: ${i * MAX_CANVAS_WIDTH4}px; width: ${width}px; height: ${this.rulerHeight}px;"
             ></canvas>
           `;
     })}
         ${this.scaleMode === "beats" ? beatsLabels.map(
-      (t) => html9`<span
+      (t) => html10`<span
                   class="label ${t.pixel > 0 ? "centered" : ""}"
                   style="left: ${t.pixel > 0 ? t.pixel : t.pixel + 4}px;"
                   >${t.label}</span
                 >`
     ) : temporalLabels.map(
-      ({ pix, text }) => html9`<span class="label" style="left: ${pix + 4}px;">${text}</span>`
+      ({ pix, text }) => html10`<span class="label" style="left: ${pix + 4}px;">${text}</span>`
     )}
       </div>
     `;
@@ -5205,8 +6022,8 @@ var DawRulerElement = class extends LitElement10 {
       const idx = Number(canvas.dataset.index);
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
-      const canvasWidth = Math.min(MAX_CANVAS_WIDTH3, widthX - idx * MAX_CANVAS_WIDTH3);
-      const globalOffset = idx * MAX_CANVAS_WIDTH3;
+      const canvasWidth = Math.min(MAX_CANVAS_WIDTH4, widthX - idx * MAX_CANVAS_WIDTH4);
+      const globalOffset = idx * MAX_CANVAS_WIDTH4;
       ctx.resetTransform();
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.scale(dpr, dpr);
@@ -5238,7 +6055,7 @@ var DawRulerElement = class extends LitElement10 {
     }
   }
 };
-DawRulerElement.styles = css9`
+DawRulerElement.styles = css10`
     :host {
       display: block;
       position: relative;
@@ -5264,40 +6081,40 @@ DawRulerElement.styles = css9`
     }
   `;
 __decorateClass([
-  property8({ type: Number, attribute: false })
+  property9({ type: Number, attribute: false })
 ], DawRulerElement.prototype, "samplesPerPixel", 2);
 __decorateClass([
-  property8({ type: Number, attribute: false })
+  property9({ type: Number, attribute: false })
 ], DawRulerElement.prototype, "sampleRate", 2);
 __decorateClass([
-  property8({ type: Number, attribute: false })
+  property9({ type: Number, attribute: false })
 ], DawRulerElement.prototype, "duration", 2);
 __decorateClass([
-  property8({ type: Number, attribute: false })
+  property9({ type: Number, attribute: false })
 ], DawRulerElement.prototype, "rulerHeight", 2);
 __decorateClass([
-  property8({ type: String, attribute: false })
+  property9({ type: String, attribute: false })
 ], DawRulerElement.prototype, "scaleMode", 2);
 __decorateClass([
-  property8({ type: Number, attribute: false })
+  property9({ type: Number, attribute: false })
 ], DawRulerElement.prototype, "ticksPerPixel", 2);
 __decorateClass([
-  property8({ attribute: false })
+  property9({ attribute: false })
 ], DawRulerElement.prototype, "meterEntries", 2);
 __decorateClass([
-  property8({ type: Number, attribute: false })
+  property9({ type: Number, attribute: false })
 ], DawRulerElement.prototype, "ppqn", 2);
 __decorateClass([
-  property8({ type: Number, attribute: false })
+  property9({ type: Number, attribute: false })
 ], DawRulerElement.prototype, "totalWidth", 2);
 DawRulerElement = __decorateClass([
-  customElement12("daw-ruler")
+  customElement13("daw-ruler")
 ], DawRulerElement);
 
 // src/elements/daw-selection.ts
-import { LitElement as LitElement11, html as html10, css as css10 } from "lit";
-import { customElement as customElement13, property as property9 } from "lit/decorators.js";
-var DawSelectionElement = class extends LitElement11 {
+import { LitElement as LitElement12, html as html11, css as css11 } from "lit";
+import { customElement as customElement14, property as property10 } from "lit/decorators.js";
+var DawSelectionElement = class extends LitElement12 {
   constructor() {
     super(...arguments);
     this.startPx = 0;
@@ -5306,11 +6123,11 @@ var DawSelectionElement = class extends LitElement11 {
   render() {
     const left = Math.min(this.startPx, this.endPx);
     const width = Math.abs(this.endPx - this.startPx);
-    if (width === 0) return html10``;
-    return html10`<div style="left: ${left}px; width: ${width}px;"></div>`;
+    if (width === 0) return html11``;
+    return html11`<div style="left: ${left}px; width: ${width}px;"></div>`;
   }
 };
-DawSelectionElement.styles = css10`
+DawSelectionElement.styles = css11`
     :host {
       position: absolute;
       top: 0;
@@ -5327,18 +6144,18 @@ DawSelectionElement.styles = css10`
     }
   `;
 __decorateClass([
-  property9({ type: Number, attribute: false })
+  property10({ type: Number, attribute: false })
 ], DawSelectionElement.prototype, "startPx", 2);
 __decorateClass([
-  property9({ type: Number, attribute: false })
+  property10({ type: Number, attribute: false })
 ], DawSelectionElement.prototype, "endPx", 2);
 DawSelectionElement = __decorateClass([
-  customElement13("daw-selection")
+  customElement14("daw-selection")
 ], DawSelectionElement);
 
 // src/elements/daw-record-button.ts
-import { html as html11, css as css11 } from "lit";
-import { customElement as customElement14, state as state4 } from "lit/decorators.js";
+import { html as html12, css as css12 } from "lit";
+import { customElement as customElement15, state as state4 } from "lit/decorators.js";
 var DawRecordButtonElement = class extends DawTransportButton {
   constructor() {
     super(...arguments);
@@ -5379,7 +6196,7 @@ var DawRecordButtonElement = class extends DawTransportButton {
     }
   }
   render() {
-    return html11`
+    return html12`
       <button part="button" ?data-recording=${this._isRecording} @click=${this._onClick}>
         <slot>Record</slot>
       </button>
@@ -5399,7 +6216,7 @@ var DawRecordButtonElement = class extends DawTransportButton {
 };
 DawRecordButtonElement.styles = [
   DawTransportButton.styles,
-  css11`
+  css12`
       button[data-recording] {
         color: #d08070;
         border-color: #d08070;
@@ -5411,14 +6228,14 @@ __decorateClass([
   state4()
 ], DawRecordButtonElement.prototype, "_isRecording", 2);
 DawRecordButtonElement = __decorateClass([
-  customElement14("daw-record-button")
+  customElement15("daw-record-button")
 ], DawRecordButtonElement);
 
 // src/elements/daw-keyboard-shortcuts.ts
-import { LitElement as LitElement12 } from "lit";
-import { customElement as customElement15, property as property10 } from "lit/decorators.js";
+import { LitElement as LitElement13 } from "lit";
+import { customElement as customElement16, property as property11 } from "lit/decorators.js";
 import { handleKeyboardEvent } from "@waveform-playlist/core";
-var DawKeyboardShortcutsElement = class extends LitElement12 {
+var DawKeyboardShortcutsElement = class extends LitElement13 {
   constructor() {
     super(...arguments);
     this.playback = false;
@@ -5572,17 +6389,198 @@ var DawKeyboardShortcutsElement = class extends LitElement12 {
   }
 };
 __decorateClass([
-  property10({ type: Boolean })
+  property11({ type: Boolean })
 ], DawKeyboardShortcutsElement.prototype, "playback", 2);
 __decorateClass([
-  property10({ type: Boolean })
+  property11({ type: Boolean })
 ], DawKeyboardShortcutsElement.prototype, "splitting", 2);
 __decorateClass([
-  property10({ type: Boolean })
+  property11({ type: Boolean })
 ], DawKeyboardShortcutsElement.prototype, "undo", 2);
 DawKeyboardShortcutsElement = __decorateClass([
-  customElement15("daw-keyboard-shortcuts")
+  customElement16("daw-keyboard-shortcuts")
 ], DawKeyboardShortcutsElement);
+
+// src/elements/daw-spectrogram.ts
+import { LitElement as LitElement14, html as html13, css as css13 } from "lit";
+import { customElement as customElement17, property as property12 } from "lit/decorators.js";
+var MAX_CANVAS_WIDTH5 = 1e3;
+var DawSpectrogramElement = class extends LitElement14 {
+  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 html13`${this._canvases.map((c) => c)}`;
+  }
+};
+DawSpectrogramElement.styles = css13`
+    :host {
+      display: block;
+      position: relative;
+      background: var(--daw-spectrogram-background, #000);
+    }
+    canvas {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      pointer-events: none;
+    }
+  `;
+__decorateClass([
+  property12({ attribute: false })
+], DawSpectrogramElement.prototype, "clipId", 2);
+__decorateClass([
+  property12({ attribute: false })
+], DawSpectrogramElement.prototype, "trackId", 2);
+__decorateClass([
+  property12({ type: Number, attribute: false })
+], DawSpectrogramElement.prototype, "channelIndex", 2);
+__decorateClass([
+  property12({ type: Number, attribute: false })
+], DawSpectrogramElement.prototype, "length", 2);
+__decorateClass([
+  property12({ type: Number, attribute: false })
+], DawSpectrogramElement.prototype, "waveHeight", 2);
+__decorateClass([
+  property12({ type: Number, attribute: false, noAccessor: true })
+], DawSpectrogramElement.prototype, "samplesPerPixel", 1);
+__decorateClass([
+  property12({ type: Number, attribute: false, noAccessor: true })
+], DawSpectrogramElement.prototype, "sampleRate", 1);
+__decorateClass([
+  property12({ type: Number, attribute: false })
+], DawSpectrogramElement.prototype, "clipOffsetSeconds", 2);
+__decorateClass([
+  property12({ type: Number, attribute: false })
+], DawSpectrogramElement.prototype, "visibleStart", 2);
+__decorateClass([
+  property12({ type: Number, attribute: false })
+], DawSpectrogramElement.prototype, "visibleEnd", 2);
+__decorateClass([
+  property12({ type: Number, attribute: false })
+], DawSpectrogramElement.prototype, "originX", 2);
+DawSpectrogramElement = __decorateClass([
+  customElement17("daw-spectrogram")
+], DawSpectrogramElement);
 export {
   AudioResumeController,
   ClipPointerHandler,
@@ -5591,11 +6589,13 @@ export {
   DawGridElement,
   DawKeyboardShortcutsElement,
   DawPauseButtonElement,
+  DawPianoRollElement,
   DawPlayButtonElement,
   DawPlayheadElement,
   DawRecordButtonElement,
   DawRulerElement,
   DawSelectionElement,
+  DawSpectrogramElement,
   DawStopButtonElement,
   DawTrackControlsElement,
   DawTrackElement,
@@ -5603,6 +6603,7 @@ export {
   DawTransportElement,
   DawWaveformElement,
   RecordingController,
+  SpectrogramController,
   isDomClip,
   splitAtPlayhead
 };