@dawcore/components 0.0.1 → 0.0.2

package/dist/index.mjs

@@ -551,7 +551,7 @@ DawTransportElement = __decorateClass([
 
 // src/elements/daw-play-button.ts
 import { html as html3 } from "lit";
-import { customElement as customElement6 } from "lit/decorators.js";
+import { customElement as customElement6, state } from "lit/decorators.js";
 
 // src/elements/daw-transport-button.ts
 import { LitElement as LitElement6, css as css3 } from "lit";
@@ -581,9 +581,40 @@ DawTransportButton.styles = css3`
 
 // src/elements/daw-play-button.ts
 var DawPlayButtonElement = class extends DawTransportButton {
+  constructor() {
+    super(...arguments);
+    this._isRecording = false;
+    this._targetRef = null;
+    this._onRecStart = () => {
+      this._isRecording = true;
+    };
+    this._onRecEnd = () => {
+      this._isRecording = false;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    requestAnimationFrame(() => {
+      const target = this.target;
+      if (!target) return;
+      this._targetRef = target;
+      target.addEventListener("daw-recording-start", this._onRecStart);
+      target.addEventListener("daw-recording-complete", this._onRecEnd);
+      target.addEventListener("daw-recording-error", this._onRecEnd);
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._targetRef) {
+      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 = null;
+    }
+  }
   render() {
     return html3`
-      <button part="button" @click=${this._onClick}>
+      <button part="button" ?disabled=${this._isRecording} @click=${this._onClick}>
         <slot>Play</slot>
       </button>
     `;
@@ -599,17 +630,53 @@ var DawPlayButtonElement = class extends DawTransportButton {
     target.play();
   }
 };
+__decorateClass([
+  state()
+], DawPlayButtonElement.prototype, "_isRecording", 2);
 DawPlayButtonElement = __decorateClass([
   customElement6("daw-play-button")
 ], DawPlayButtonElement);
 
 // src/elements/daw-pause-button.ts
-import { html as html4 } from "lit";
-import { customElement as customElement7 } from "lit/decorators.js";
+import { html as html4, css as css4 } from "lit";
+import { customElement as customElement7, state as state2 } from "lit/decorators.js";
 var DawPauseButtonElement = class extends DawTransportButton {
+  constructor() {
+    super(...arguments);
+    this._isPaused = false;
+    this._isRecording = false;
+    this._targetRef = null;
+    this._onRecStart = () => {
+      this._isRecording = true;
+    };
+    this._onRecEnd = () => {
+      this._isRecording = false;
+      this._isPaused = false;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    requestAnimationFrame(() => {
+      const target = this.target;
+      if (!target) return;
+      this._targetRef = target;
+      target.addEventListener("daw-recording-start", this._onRecStart);
+      target.addEventListener("daw-recording-complete", this._onRecEnd);
+      target.addEventListener("daw-recording-error", this._onRecEnd);
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._targetRef) {
+      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 = null;
+    }
+  }
   render() {
     return html4`
-      <button part="button" @click=${this._onClick}>
+      <button part="button" ?data-paused=${this._isPaused} @click=${this._onClick}>
         <slot>Pause</slot>
       </button>
     `;
@@ -622,9 +689,36 @@ var DawPauseButtonElement = class extends DawTransportButton {
       );
       return;
     }
-    target.pause();
+    if (this._isRecording) {
+      if (this._isPaused) {
+        target.resumeRecording();
+        target.play(target.currentTime);
+        this._isPaused = false;
+      } else {
+        target.pauseRecording();
+        target.pause();
+        this._isPaused = true;
+      }
+    } else {
+      target.pause();
+    }
   }
 };
+DawPauseButtonElement.styles = [
+  DawTransportButton.styles,
+  css4`
+      button[data-paused] {
+        background: rgba(255, 255, 255, 0.1);
+        border-color: var(--daw-controls-text, #e0d4c8);
+      }
+    `
+];
+__decorateClass([
+  state2()
+], DawPauseButtonElement.prototype, "_isPaused", 2);
+__decorateClass([
+  state2()
+], DawPauseButtonElement.prototype, "_isRecording", 2);
 DawPauseButtonElement = __decorateClass([
   customElement7("daw-pause-button")
 ], DawPauseButtonElement);
@@ -648,6 +742,9 @@ var DawStopButtonElement = class extends DawTransportButton {
       );
       return;
     }
+    if (target.isRecording) {
+      target.stopRecording();
+    }
     target.stop();
   }
 };
@@ -656,8 +753,8 @@ DawStopButtonElement = __decorateClass([
 ], DawStopButtonElement);
 
 // src/elements/daw-editor.ts
-import { LitElement as LitElement8, html as html7, css as css6 } from "lit";
-import { customElement as customElement10, property as property6, state } from "lit/decorators.js";
+import { LitElement as LitElement8, html as html7, css as css7 } from "lit";
+import { customElement as customElement10, property as property6, state as state3 } from "lit/decorators.js";
 import { createClipFromSeconds as createClipFromSeconds2, createTrack as createTrack2, clipPixelWidth } from "@waveform-playlist/core";
 
 // src/workers/peaksWorker.ts
@@ -979,20 +1076,22 @@ function extractPeaks(waveformData, samplesPerPixel, isMono, offsetSamples, dura
 
 // src/workers/peakPipeline.ts
 var PeakPipeline = class {
-  constructor() {
+  constructor(baseScale = 128, bits = 16) {
     this._worker = null;
     this._cache = /* @__PURE__ */ new WeakMap();
     this._inflight = /* @__PURE__ */ new WeakMap();
+    this._baseScale = baseScale;
+    this._bits = bits;
   }
   /**
    * Generate PeakData for a clip from its AudioBuffer.
    * Uses cached WaveformData when available; otherwise generates via worker.
-   * The worker generates at `scale` (= samplesPerPixel) for exact rendering.
+   * Worker generates at baseScale (default 128); extractPeaks resamples to the requested zoom.
    */
-  async generatePeaks(audioBuffer, samplesPerPixel, isMono) {
-    const waveformData = await this._getWaveformData(audioBuffer, samplesPerPixel);
+  async generatePeaks(audioBuffer, samplesPerPixel, isMono, offsetSamples, durationSamples) {
+    const waveformData = await this._getWaveformData(audioBuffer);
     try {
-      return extractPeaks(waveformData, samplesPerPixel, isMono);
+      return extractPeaks(waveformData, samplesPerPixel, isMono, offsetSamples, durationSamples);
     } catch (err) {
       console.warn("[dawcore] extractPeaks failed: " + String(err));
       throw err;
@@ -1004,14 +1103,24 @@ var PeakPipeline = class {
    * Returns a new Map of clipId → PeakData. Clips without cached data or where
    * the target scale is finer than the cached base are skipped.
    */
-  reextractPeaks(clipBuffers, samplesPerPixel, isMono) {
+  reextractPeaks(clipBuffers, samplesPerPixel, isMono, clipOffsets) {
     const result = /* @__PURE__ */ new Map();
     for (const [clipId, audioBuffer] of clipBuffers) {
       const cached = this._cache.get(audioBuffer);
       if (cached) {
         if (samplesPerPixel < cached.scale) continue;
         try {
-          result.set(clipId, extractPeaks(cached, samplesPerPixel, isMono));
+          const offsets = clipOffsets?.get(clipId);
+          result.set(
+            clipId,
+            extractPeaks(
+              cached,
+              samplesPerPixel,
+              isMono,
+              offsets?.offsetSamples,
+              offsets?.durationSamples
+            )
+          );
         } catch (err) {
           console.warn("[dawcore] reextractPeaks failed for clip " + clipId + ": " + String(err));
         }
@@ -1023,9 +1132,9 @@ var PeakPipeline = class {
     this._worker?.terminate();
     this._worker = null;
   }
-  async _getWaveformData(audioBuffer, samplesPerPixel) {
+  async _getWaveformData(audioBuffer) {
     const cached = this._cache.get(audioBuffer);
-    if (cached && cached.scale <= samplesPerPixel) return cached;
+    if (cached) return cached;
     const inflight = this._inflight.get(audioBuffer);
     if (inflight) return inflight;
     if (!this._worker) {
@@ -1039,8 +1148,8 @@ var PeakPipeline = class {
       channels,
       length: audioBuffer.length,
       sampleRate: audioBuffer.sampleRate,
-      scale: samplesPerPixel,
-      bits: 16,
+      scale: this._baseScale,
+      bits: this._bits,
       splitChannels: true
     }).then((waveformData) => {
       this._cache.set(audioBuffer, waveformData);
@@ -1057,7 +1166,7 @@ var PeakPipeline = class {
 };
 
 // src/elements/daw-track-controls.ts
-import { LitElement as LitElement7, html as html6, css as css4 } from "lit";
+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 {
   constructor() {
@@ -1157,11 +1266,11 @@ var DawTrackControlsElement = class extends LitElement7 {
     `;
   }
 };
-DawTrackControlsElement.styles = css4`
+DawTrackControlsElement.styles = css5`
     :host {
       display: flex;
       flex-direction: column;
-      justify-content: center;
+      justify-content: flex-start;
       box-sizing: border-box;
       padding: 6px 8px;
       background: var(--daw-controls-background, #0f0f1a);
@@ -1169,13 +1278,14 @@ DawTrackControlsElement.styles = css4`
       border-bottom: 1px solid rgba(255, 255, 255, 0.05);
       font-family: system-ui, sans-serif;
       font-size: 11px;
+      overflow: hidden;
     }
     .header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 4px;
-      margin-bottom: 6px;
+      margin-bottom: 3px;
     }
     .name {
       flex: 1;
@@ -1202,7 +1312,7 @@ DawTrackControlsElement.styles = css4`
     .buttons {
       display: flex;
       gap: 3px;
-      margin-bottom: 6px;
+      margin-bottom: 3px;
     }
     .btn {
       background: rgba(255, 255, 255, 0.06);
@@ -1232,7 +1342,7 @@ DawTrackControlsElement.styles = css4`
       display: flex;
       align-items: center;
       gap: 4px;
-      height: 20px;
+      height: 16px;
     }
     .slider-label {
       width: 50px;
@@ -1312,8 +1422,8 @@ DawTrackControlsElement = __decorateClass([
 ], DawTrackControlsElement);
 
 // src/styles/theme.ts
-import { css as css5 } from "lit";
-var hostStyles = css5`
+import { css as css6 } from "lit";
+var hostStyles = css6`
   :host {
     --daw-wave-color: #c49a6c;
     --daw-progress-color: #63c75f;
@@ -1329,6 +1439,77 @@ var hostStyles = css5`
     --daw-clip-header-text: #e0d4c8;
   }
 `;
+var clipStyles = css6`
+  .clip-container {
+    position: absolute;
+    overflow: hidden;
+  }
+  .clip-header {
+    position: relative;
+    z-index: 1;
+    height: 20px;
+    background: var(--daw-clip-header-background, rgba(0, 0, 0, 0.4));
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    display: flex;
+    align-items: center;
+    padding: 0 6px;
+    user-select: none;
+    -webkit-user-drag: none;
+  }
+  .clip-header span {
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    font-family: system-ui, sans-serif;
+    color: var(--daw-clip-header-text, #e0d4c8);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    opacity: 0.8;
+  }
+  .clip-boundary {
+    position: absolute;
+    top: 0;
+    width: 8px;
+    height: 100%;
+    z-index: 2;
+    cursor: col-resize;
+    background: transparent;
+    border: none;
+    touch-action: none;
+    user-select: none;
+    -webkit-user-drag: none;
+    transition: background 0.1s, border-color 0.1s;
+  }
+  .clip-boundary[data-boundary-edge='left'] {
+    left: 0;
+  }
+  .clip-boundary[data-boundary-edge='right'] {
+    right: 0;
+  }
+  .clip-boundary[data-boundary-edge='left']:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-left: 2px solid rgba(255, 255, 255, 0.5);
+  }
+  .clip-boundary[data-boundary-edge='right']:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-right: 2px solid rgba(255, 255, 255, 0.5);
+  }
+  .clip-boundary[data-boundary-edge='left'].dragging {
+    background: rgba(255, 255, 255, 0.4);
+    border-left: 2px solid rgba(255, 255, 255, 0.8);
+  }
+  .clip-boundary[data-boundary-edge='right'].dragging {
+    background: rgba(255, 255, 255, 0.4);
+    border-right: 2px solid rgba(255, 255, 255, 0.8);
+  }
+  .clip-header[data-interactive] {
+    cursor: grab;
+  }
+  .clip-header[data-interactive]:active {
+    cursor: grabbing;
+  }
+`;
 
 // src/controllers/viewport-controller.ts
 var OVERSCAN_MULTIPLIER = 1.5;
@@ -1511,6 +1692,9 @@ var RecordingController = class {
       }
       const channelCount = stream.getAudioTracks()[0]?.getSettings()?.channelCount ?? 1;
       const startSample = options.startSample ?? Math.floor(this._host._currentTime * this._host.effectiveSampleRate);
+      const outputLatency = rawCtx.outputLatency ?? 0;
+      const lookAhead = context.lookAhead ?? 0;
+      const latencySamples = Math.floor((outputLatency + lookAhead) * rawCtx.sampleRate);
       const source = context.createMediaStreamSource(stream);
       const workletNode = context.createAudioWorkletNode("recording-processor", {
         channelCount,
@@ -1537,6 +1721,8 @@ var RecordingController = class {
         channelCount,
         bits,
         isFirstMessage: true,
+        latencySamples,
+        wasOverdub: options.overdub ?? false,
         _onTrackEnded: onTrackEnded,
         _audioTrack: audioTrack
       };
@@ -1557,6 +1743,9 @@ var RecordingController = class {
         })
       );
       this._host.requestUpdate();
+      if (options.overdub && typeof this._host.play === "function") {
+        await this._host.play(this._host._currentTime);
+      }
     } catch (err) {
       this._cleanupSession(trackId);
       console.warn("[dawcore] RecordingController: Failed to start recording: " + String(err));
@@ -1569,11 +1758,28 @@ var RecordingController = class {
       );
     }
   }
+  pauseRecording(trackId) {
+    const id = trackId ?? [...this._sessions.keys()][0];
+    if (!id) return;
+    const session = this._sessions.get(id);
+    if (!session) return;
+    session.workletNode.port.postMessage({ command: "pause" });
+  }
+  resumeRecording(trackId) {
+    const id = trackId ?? [...this._sessions.keys()][0];
+    if (!id) return;
+    const session = this._sessions.get(id);
+    if (!session) return;
+    session.workletNode.port.postMessage({ command: "resume" });
+  }
   stopRecording(trackId) {
     const id = trackId ?? [...this._sessions.keys()][0];
     if (!id) return;
     const session = this._sessions.get(id);
     if (!session) return;
+    if (session.wasOverdub && typeof this._host.stop === "function") {
+      this._host.stop();
+    }
     session.workletNode.port.postMessage({ command: "stop" });
     session.source.disconnect();
     session.workletNode.disconnect();
@@ -1591,7 +1797,8 @@ var RecordingController = class {
       );
       return;
     }
-    const stopCtx = getGlobalContext().rawContext;
+    const context = getGlobalContext();
+    const stopCtx = context.rawContext;
     const channelData = session.chunks.map((chunkArr) => concatenateAudioData(chunkArr));
     const audioBuffer = createAudioBuffer(
       stopCtx,
@@ -1599,7 +1806,21 @@ var RecordingController = class {
       this._host.effectiveSampleRate,
       session.channelCount
     );
-    const durationSamples = audioBuffer.length;
+    const latencyOffsetSamples = session.latencySamples;
+    const effectiveDuration = Math.max(0, audioBuffer.length - latencyOffsetSamples);
+    if (effectiveDuration === 0) {
+      console.warn("[dawcore] RecordingController: Recording too short for latency compensation");
+      this._sessions.delete(id);
+      this._host.requestUpdate();
+      this._host.dispatchEvent(
+        new CustomEvent("daw-recording-error", {
+          bubbles: true,
+          composed: true,
+          detail: { trackId: id, error: new Error("Recording too short to save") }
+        })
+      );
+      return;
+    }
     const event = new CustomEvent("daw-recording-complete", {
       bubbles: true,
       composed: true,
@@ -1608,14 +1829,21 @@ var RecordingController = class {
         trackId: id,
         audioBuffer,
         startSample: session.startSample,
-        durationSamples
+        durationSamples: effectiveDuration,
+        offsetSamples: latencyOffsetSamples
       }
     });
     const notPrevented = this._host.dispatchEvent(event);
     this._sessions.delete(id);
     this._host.requestUpdate();
     if (notPrevented) {
-      this._createClipFromRecording(id, audioBuffer, session.startSample, durationSamples);
+      this._createClipFromRecording(
+        id,
+        audioBuffer,
+        session.startSample,
+        effectiveDuration,
+        latencyOffsetSamples
+      );
     }
   }
   // Session fields are mutated in place on the hot path (~60fps worklet messages).
@@ -1646,7 +1874,9 @@ var RecordingController = class {
       );
       const newPeakCount = Math.floor(session.peaks[ch].length / 2);
       const waveformSelector = `daw-waveform[data-recording-track="${trackId}"][data-recording-channel="${ch}"]`;
-      const waveformEl = this._host.shadowRoot?.querySelector(waveformSelector);
+      const waveformEl = this._host.shadowRoot?.querySelector(
+        waveformSelector
+      );
       if (waveformEl) {
         if (session.isFirstMessage) {
           waveformEl.peaks = session.peaks[ch];
@@ -1665,9 +1895,15 @@ var RecordingController = class {
       this._host.requestUpdate();
     }
   }
-  _createClipFromRecording(trackId, audioBuffer, startSample, durationSamples) {
+  _createClipFromRecording(trackId, audioBuffer, startSample, durationSamples, offsetSamples = 0) {
     if (typeof this._host._addRecordedClip === "function") {
-      this._host._addRecordedClip(trackId, audioBuffer, startSample, durationSamples);
+      this._host._addRecordedClip(
+        trackId,
+        audioBuffer,
+        startSample,
+        durationSamples,
+        offsetSamples
+      );
     } else {
       console.warn(
         '[dawcore] RecordingController: host does not implement _addRecordedClip \u2014 clip not created for track "' + trackId + '"'
@@ -1698,6 +1934,11 @@ var RecordingController = class {
 
 // src/interactions/pointer-handler.ts
 import { pixelsToSeconds } from "@waveform-playlist/core";
+
+// src/interactions/constants.ts
+var DRAG_THRESHOLD = 3;
+
+// src/interactions/pointer-handler.ts
 var PointerHandler = class {
   constructor(host) {
     this._isDragging = false;
@@ -1706,6 +1947,34 @@ var PointerHandler = class {
     // Cached from onPointerDown to avoid forced layout reflows at 60fps during drag
     this._timelineRect = null;
     this.onPointerDown = (e) => {
+      const clipHandler = this._host._clipHandler;
+      if (clipHandler) {
+        const target = e.composedPath()[0];
+        if (target && clipHandler.tryHandle(target, e)) {
+          e.preventDefault();
+          this._timeline = this._host.shadowRoot?.querySelector(".timeline");
+          if (this._timeline) {
+            this._timeline.setPointerCapture(e.pointerId);
+            const onMove = (me) => clipHandler.onPointerMove(me);
+            const onUp = (ue) => {
+              clipHandler.onPointerUp(ue);
+              this._timeline?.removeEventListener("pointermove", onMove);
+              this._timeline?.removeEventListener("pointerup", onUp);
+              try {
+                this._timeline?.releasePointerCapture(ue.pointerId);
+              } catch (err) {
+                console.warn(
+                  "[dawcore] releasePointerCapture failed (may already be released): " + String(err)
+                );
+              }
+              this._timeline = null;
+            };
+            this._timeline.addEventListener("pointermove", onMove);
+            this._timeline.addEventListener("pointerup", onUp);
+          }
+          return;
+        }
+      }
       this._timeline = this._host.shadowRoot?.querySelector(".timeline");
       if (!this._timeline) return;
       this._timelineRect = this._timeline.getBoundingClientRect();
@@ -1718,7 +1987,7 @@ var PointerHandler = class {
     this._onPointerMove = (e) => {
       if (!this._timeline) return;
       const currentPx = this._pxFromPointer(e);
-      if (!this._isDragging && Math.abs(currentPx - this._dragStartPx) > 3) {
+      if (!this._isDragging && Math.abs(currentPx - this._dragStartPx) > DRAG_THRESHOLD) {
         this._isDragging = true;
       }
       if (this._isDragging) {
@@ -1853,6 +2122,245 @@ var PointerHandler = class {
   }
 };
 
+// src/interactions/clip-pointer-handler.ts
+var ClipPointerHandler = class {
+  constructor(host) {
+    this._mode = null;
+    this._clipId = "";
+    this._trackId = "";
+    this._startPx = 0;
+    this._isDragging = false;
+    this._lastDeltaPx = 0;
+    this._cumulativeDeltaSamples = 0;
+    // Trim visual feedback: snapshot of original clip state
+    this._clipContainer = null;
+    this._boundaryEl = null;
+    this._originalLeft = 0;
+    this._originalWidth = 0;
+    this._originalOffsetSamples = 0;
+    this._originalDurationSamples = 0;
+    this._host = host;
+  }
+  /** Returns true if a drag interaction is currently in progress. */
+  get isActive() {
+    return this._mode !== null;
+  }
+  /**
+   * Attempts to handle a pointerdown event on the given target element.
+   * Returns true if the target is a recognized clip interaction element.
+   */
+  tryHandle(target, e) {
+    if (!this._host.interactiveClips) return false;
+    const boundary = target.closest?.(".clip-boundary");
+    const header = target.closest?.(".clip-header");
+    if (boundary && boundary.dataset.boundaryEdge !== void 0) {
+      const clipId = boundary.dataset.clipId;
+      const trackId = boundary.dataset.trackId;
+      const edge = boundary.dataset.boundaryEdge;
+      if (!clipId || !trackId || edge !== "left" && edge !== "right") return false;
+      this._beginDrag(edge === "left" ? "trim-left" : "trim-right", clipId, trackId, e);
+      this._boundaryEl = boundary;
+      return true;
+    }
+    if (header && header.dataset.interactive !== void 0) {
+      const clipId = header.dataset.clipId;
+      const trackId = header.dataset.trackId;
+      if (!clipId || !trackId) return false;
+      this._beginDrag("move", clipId, trackId, e);
+      return true;
+    }
+    return false;
+  }
+  _beginDrag(mode, clipId, trackId, e) {
+    this._mode = mode;
+    this._clipId = clipId;
+    this._trackId = trackId;
+    this._startPx = e.clientX;
+    this._isDragging = false;
+    this._lastDeltaPx = 0;
+    this._cumulativeDeltaSamples = 0;
+    if (mode === "trim-left" || mode === "trim-right") {
+      const container = this._host.shadowRoot?.querySelector(
+        `.clip-container[data-clip-id="${clipId}"]`
+      );
+      if (container) {
+        this._clipContainer = container;
+        this._originalLeft = parseFloat(container.style.left) || 0;
+        this._originalWidth = parseFloat(container.style.width) || 0;
+      } else {
+        console.warn("[dawcore] clip container not found for trim visual feedback: " + clipId);
+      }
+      const engine = this._host.engine;
+      if (engine) {
+        const bounds = engine.getClipBounds(trackId, clipId);
+        if (bounds) {
+          this._originalOffsetSamples = bounds.offsetSamples;
+          this._originalDurationSamples = bounds.durationSamples;
+        }
+      }
+    }
+  }
+  /** Processes pointermove events during an active drag. */
+  onPointerMove(e) {
+    if (this._mode === null) return;
+    const totalDeltaPx = e.clientX - this._startPx;
+    if (!this._isDragging && Math.abs(totalDeltaPx) > DRAG_THRESHOLD) {
+      this._isDragging = true;
+      if (this._boundaryEl) {
+        this._boundaryEl.classList.add("dragging");
+      }
+    }
+    if (!this._isDragging) return;
+    const engine = this._host.engine;
+    if (!engine) return;
+    if (this._mode === "move") {
+      const incrementalDeltaPx = totalDeltaPx - this._lastDeltaPx;
+      this._lastDeltaPx = totalDeltaPx;
+      const incrementalDeltaSamples = Math.round(incrementalDeltaPx * this._host.samplesPerPixel);
+      this._cumulativeDeltaSamples += incrementalDeltaSamples;
+      engine.moveClip(this._trackId, this._clipId, incrementalDeltaSamples, true);
+    } else {
+      const boundary = this._mode === "trim-left" ? "left" : "right";
+      const rawDeltaSamples = Math.round(totalDeltaPx * this._host.samplesPerPixel);
+      const deltaSamples = engine.constrainTrimDelta(
+        this._trackId,
+        this._clipId,
+        boundary,
+        rawDeltaSamples
+      );
+      const deltaPx = Math.round(deltaSamples / this._host.samplesPerPixel);
+      this._cumulativeDeltaSamples = deltaSamples;
+      if (this._clipContainer) {
+        if (this._mode === "trim-left") {
+          const newLeft = this._originalLeft + deltaPx;
+          const newWidth = this._originalWidth - deltaPx;
+          if (newWidth > 0) {
+            this._clipContainer.style.left = newLeft + "px";
+            this._clipContainer.style.width = newWidth + "px";
+            const newOffset = this._originalOffsetSamples + deltaSamples;
+            const newDuration = this._originalDurationSamples - deltaSamples;
+            if (this._updateWaveformPeaks(newOffset, newDuration)) {
+              const waveforms = this._clipContainer.querySelectorAll("daw-waveform");
+              for (const wf of waveforms) {
+                wf.style.left = "0px";
+              }
+            } else {
+              const waveforms = this._clipContainer.querySelectorAll("daw-waveform");
+              for (const wf of waveforms) {
+                wf.style.left = -deltaPx + "px";
+              }
+            }
+          }
+        } else {
+          const newWidth = this._originalWidth + deltaPx;
+          if (newWidth > 0) {
+            this._clipContainer.style.width = newWidth + "px";
+            const newDuration = this._originalDurationSamples + deltaSamples;
+            this._updateWaveformPeaks(this._originalOffsetSamples, newDuration);
+          }
+        }
+      }
+    }
+  }
+  /** Processes pointerup events to finalize and dispatch result events. */
+  onPointerUp(_e) {
+    if (this._mode === null) return;
+    try {
+      if (!this._isDragging || this._cumulativeDeltaSamples === 0) {
+        this._restoreTrimVisual();
+        return;
+      }
+      const engine = this._host.engine;
+      if (this._mode === "move") {
+        if (engine) {
+          engine.updateTrack(this._trackId);
+          this._host.dispatchEvent(
+            new CustomEvent("daw-clip-move", {
+              bubbles: true,
+              composed: true,
+              detail: {
+                trackId: this._trackId,
+                clipId: this._clipId,
+                deltaSamples: this._cumulativeDeltaSamples
+              }
+            })
+          );
+        } else {
+          console.warn(
+            "[dawcore] engine unavailable at move drop \u2014 audio may be out of sync for track " + this._trackId
+          );
+        }
+      } else {
+        this._restoreTrimVisual();
+        const boundary = this._mode === "trim-left" ? "left" : "right";
+        if (engine) {
+          engine.trimClip(this._trackId, this._clipId, boundary, this._cumulativeDeltaSamples);
+          this._host.dispatchEvent(
+            new CustomEvent("daw-clip-trim", {
+              bubbles: true,
+              composed: true,
+              detail: {
+                trackId: this._trackId,
+                clipId: this._clipId,
+                boundary,
+                deltaSamples: this._cumulativeDeltaSamples
+              }
+            })
+          );
+        }
+      }
+    } finally {
+      this._reset();
+    }
+  }
+  /** Re-extract peaks from cache and set on waveform elements during trim drag.
+   *  Returns true if peaks were successfully updated. */
+  _updateWaveformPeaks(offsetSamples, durationSamples) {
+    if (!this._clipContainer || durationSamples <= 0) return false;
+    const peakSlice = this._host.reextractClipPeaks(this._clipId, offsetSamples, durationSamples);
+    if (!peakSlice) return false;
+    const waveforms = this._clipContainer.querySelectorAll("daw-waveform");
+    for (let i = 0; i < waveforms.length; i++) {
+      const wf = waveforms[i];
+      const channelPeaks = peakSlice.data[i];
+      if (channelPeaks) {
+        wf.peaks = channelPeaks;
+        wf.length = peakSlice.length;
+      }
+    }
+    return true;
+  }
+  /** Restore clip container CSS to original values after trim visual preview. */
+  _restoreTrimVisual() {
+    if (this._clipContainer) {
+      this._clipContainer.style.left = this._originalLeft + "px";
+      this._clipContainer.style.width = this._originalWidth + "px";
+      const waveforms = this._clipContainer.querySelectorAll("daw-waveform");
+      for (const wf of waveforms) {
+        wf.style.left = "0px";
+      }
+    }
+  }
+  _reset() {
+    if (this._boundaryEl) {
+      this._boundaryEl.classList.remove("dragging");
+      this._boundaryEl = null;
+    }
+    this._mode = null;
+    this._clipId = "";
+    this._trackId = "";
+    this._startPx = 0;
+    this._isDragging = false;
+    this._lastDeltaPx = 0;
+    this._cumulativeDeltaSamples = 0;
+    this._clipContainer = null;
+    this._originalLeft = 0;
+    this._originalWidth = 0;
+    this._originalOffsetSamples = 0;
+    this._originalDurationSamples = 0;
+  }
+};
+
 // src/interactions/file-loader.ts
 import { createClipFromSeconds, createTrack } from "@waveform-playlist/core";
 async function loadFiles(host, files) {
@@ -1887,10 +2395,16 @@ async function loadFiles(host, files) {
         sourceDuration: audioBuffer.duration
       });
       host._clipBuffers = new Map(host._clipBuffers).set(clip.id, audioBuffer);
+      host._clipOffsets.set(clip.id, {
+        offsetSamples: clip.offsetSamples,
+        durationSamples: clip.durationSamples
+      });
       const peakData = await host._peakPipeline.generatePeaks(
         audioBuffer,
         host.samplesPerPixel,
-        host.mono
+        host.mono,
+        clip.offsetSamples,
+        clip.durationSamples
       );
       host._peaksData = new Map(host._peaksData).set(clip.id, peakData);
       const trackId = crypto.randomUUID();
@@ -1949,17 +2463,31 @@ async function loadFiles(host, files) {
 
 // src/interactions/recording-clip.ts
 import { createClip } from "@waveform-playlist/core";
-function addRecordedClip(host, trackId, buf, startSample, durSamples) {
+function addRecordedClip(host, trackId, buf, startSample, durSamples, offsetSamples = 0) {
+  let trimmedBuf = buf;
+  if (offsetSamples > 0 && offsetSamples < buf.length) {
+    const trimmed = new AudioBuffer({
+      numberOfChannels: buf.numberOfChannels,
+      length: durSamples,
+      sampleRate: buf.sampleRate
+    });
+    for (let ch = 0; ch < buf.numberOfChannels; ch++) {
+      const source = buf.getChannelData(ch);
+      trimmed.copyToChannel(source.subarray(offsetSamples, offsetSamples + durSamples), ch);
+    }
+    trimmedBuf = trimmed;
+  }
   const clip = createClip({
-    audioBuffer: buf,
+    audioBuffer: trimmedBuf,
     startSample,
     durationSamples: durSamples,
     offsetSamples: 0,
+    // offset already applied by slicing
     gain: 1,
     name: "Recording"
   });
-  host._clipBuffers = new Map(host._clipBuffers).set(clip.id, buf);
-  host._peakPipeline.generatePeaks(buf, host.samplesPerPixel, host.mono).then((pd) => {
+  host._clipBuffers = new Map(host._clipBuffers).set(clip.id, trimmedBuf);
+  host._peakPipeline.generatePeaks(trimmedBuf, host.samplesPerPixel, host.mono).then((pd) => {
     host._peaksData = new Map(host._peaksData).set(clip.id, pd);
     const t = host._engineTracks.get(trackId);
     if (!t) {
@@ -1992,7 +2520,12 @@ function addRecordedClip(host, trackId, buf, startSample, durSamples) {
       });
     }
     host._recomputeDuration();
-    host._engine?.setTracks([...host._engineTracks.values()]);
+    const updatedTrack = host._engineTracks.get(trackId);
+    if (host._engine?.updateTrack && updatedTrack) {
+      host._engine.updateTrack(trackId, updatedTrack);
+    } else {
+      host._engine?.setTracks([...host._engineTracks.values()]);
+    }
   }).catch((err) => {
     console.warn("[dawcore] Failed to generate peaks for recorded clip: " + String(err));
     const next = new Map(host._clipBuffers);
@@ -2010,6 +2543,140 @@ function addRecordedClip(host, trackId, buf, startSample, durSamples) {
   });
 }
 
+// src/interactions/split-handler.ts
+function splitAtPlayhead(host) {
+  const { engine } = host;
+  if (!engine) return false;
+  const stateBefore = engine.getState();
+  const { selectedTrackId, tracks } = stateBefore;
+  if (!selectedTrackId) return false;
+  const track = tracks.find((t) => t.id === selectedTrackId);
+  if (!track) return false;
+  const atSample = Math.round(host.currentTime * host.effectiveSampleRate);
+  const clip = findClipAtSample(track.clips, atSample);
+  if (!clip) return false;
+  const originalClipId = clip.id;
+  const clipIdsBefore = new Set(track.clips.map((c) => c.id));
+  engine.splitClip(selectedTrackId, originalClipId, atSample);
+  const stateAfter = engine.getState();
+  const trackAfter = stateAfter.tracks.find((t) => t.id === selectedTrackId);
+  if (!trackAfter) {
+    console.warn(
+      '[dawcore] splitAtPlayhead: track "' + selectedTrackId + '" disappeared after split'
+    );
+    return false;
+  }
+  const newClips = trackAfter.clips.filter((c) => !clipIdsBefore.has(c.id));
+  if (newClips.length !== 2) {
+    if (newClips.length > 0) {
+      console.warn(
+        "[dawcore] splitAtPlayhead: expected 2 new clips after split but got " + newClips.length
+      );
+    }
+    return false;
+  }
+  const sorted = [...newClips].sort((a, b) => a.startSample - b.startSample);
+  const leftClipId = sorted[0].id;
+  const rightClipId = sorted[1].id;
+  host.dispatchEvent(
+    new CustomEvent("daw-clip-split", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        trackId: selectedTrackId,
+        originalClipId,
+        leftClipId,
+        rightClipId
+      }
+    })
+  );
+  return true;
+}
+function findClipAtSample(clips, atSample) {
+  return clips.find(
+    (c) => atSample > c.startSample && atSample < c.startSample + c.durationSamples
+  );
+}
+
+// src/interactions/clip-peak-sync.ts
+function syncPeaksForChangedClips(host, tracks) {
+  const currentClipIds = /* @__PURE__ */ new Set();
+  for (const track of tracks) {
+    for (const clip of track.clips) {
+      currentClipIds.add(clip.id);
+      const cached = host._clipOffsets.get(clip.id);
+      const needsPeaks = !host._peaksData.has(clip.id) || !cached || cached.offsetSamples !== clip.offsetSamples || cached.durationSamples !== clip.durationSamples;
+      if (!needsPeaks) continue;
+      const audioBuffer = clip.audioBuffer ?? host._clipBuffers.get(clip.id) ?? findAudioBufferForClip(host, clip, track);
+      if (!audioBuffer) {
+        console.warn(
+          "[dawcore] syncPeaksForChangedClips: no AudioBuffer for clip " + clip.id + " \u2014 waveform will be blank"
+        );
+        continue;
+      }
+      host._clipBuffers = new Map(host._clipBuffers).set(clip.id, audioBuffer);
+      host._clipOffsets.set(clip.id, {
+        offsetSamples: clip.offsetSamples,
+        durationSamples: clip.durationSamples
+      });
+      host._peakPipeline.generatePeaks(
+        audioBuffer,
+        host.samplesPerPixel,
+        host.mono,
+        clip.offsetSamples,
+        clip.durationSamples
+      ).then((peakData) => {
+        host._peaksData = new Map(host._peaksData).set(clip.id, peakData);
+      }).catch((err) => {
+        console.warn(
+          "[dawcore] Failed to generate peaks for clip " + clip.id + ": " + String(err)
+        );
+      });
+    }
+  }
+  cleanupOrphanedClipData(host, currentClipIds);
+}
+function cleanupOrphanedClipData(host, currentClipIds) {
+  let buffersChanged = false;
+  let peaksChanged = false;
+  for (const id of host._clipBuffers.keys()) {
+    if (!currentClipIds.has(id)) {
+      host._clipBuffers.delete(id);
+      buffersChanged = true;
+    }
+  }
+  let offsetsChanged = false;
+  for (const id of host._clipOffsets.keys()) {
+    if (!currentClipIds.has(id)) {
+      host._clipOffsets.delete(id);
+      offsetsChanged = true;
+    }
+  }
+  for (const id of host._peaksData.keys()) {
+    if (!currentClipIds.has(id)) {
+      host._peaksData.delete(id);
+      peaksChanged = true;
+    }
+  }
+  if (buffersChanged) {
+    host._clipBuffers = new Map(host._clipBuffers);
+  }
+  if (offsetsChanged) {
+    host._clipOffsets = new Map(host._clipOffsets);
+  }
+  if (peaksChanged) {
+    host._peaksData = new Map(host._peaksData);
+  }
+}
+function findAudioBufferForClip(host, clip, track) {
+  for (const sibling of track.clips) {
+    if (sibling.id === clip.id) continue;
+    const buf = host._clipBuffers.get(sibling.id);
+    if (buf) return buf;
+  }
+  return null;
+}
+
 // src/elements/daw-editor.ts
 var DawEditorElement = class extends LitElement8 {
   constructor() {
@@ -2021,6 +2688,9 @@ var DawEditorElement = class extends LitElement8 {
     this.barWidth = 1;
     this.barGap = 0;
     this.fileDrop = false;
+    this.clipHeaders = false;
+    this.clipHeaderHeight = 20;
+    this.interactiveClips = false;
     this.sampleRate = 48e3;
     /** Resolved sample rate — falls back to sampleRate property until first audio decode. */
     this._resolvedSampleRate = null;
@@ -2037,14 +2707,15 @@ var DawEditorElement = class extends LitElement8 {
     this._currentTime = 0;
     this._engine = null;
     this._enginePromise = null;
-    this._audioInitialized = false;
     this._audioCache = /* @__PURE__ */ new Map();
     this._clipBuffers = /* @__PURE__ */ new Map();
+    this._clipOffsets = /* @__PURE__ */ new Map();
     this._peakPipeline = new PeakPipeline();
     this._trackElements = /* @__PURE__ */ new Map();
     this._childObserver = null;
     this._audioResume = new AudioResumeController(this);
     this._recordingController = new RecordingController(this);
+    this._clipPointer = new ClipPointerHandler(this);
     this._pointer = new PointerHandler(this);
     this._viewport = (() => {
       const v = new ViewportController(this);
@@ -2145,9 +2816,42 @@ var DawEditorElement = class extends LitElement8 {
         );
       }
     };
+    this._onKeyDown = (e) => {
+      if (!this.interactiveClips) return;
+      if (e.key === "s" || e.key === "S") {
+        if (e.ctrlKey || e.metaKey || e.altKey) return;
+        const tag = e.target?.tagName;
+        if (tag === "INPUT" || tag === "TEXTAREA") return;
+        if (e.target?.isContentEditable) return;
+        e.preventDefault();
+        this.splitAtPlayhead();
+      }
+    };
     // --- Recording ---
     this.recordingStream = null;
   }
+  get _clipHandler() {
+    return this.interactiveClips ? this._clipPointer : null;
+  }
+  get engine() {
+    return this._engine;
+  }
+  /** Re-extract peaks for a clip at new offset/duration from cached WaveformData. */
+  reextractClipPeaks(clipId, offsetSamples, durationSamples) {
+    const buf = this._clipBuffers.get(clipId);
+    if (!buf) return null;
+    const singleClipBuffers = /* @__PURE__ */ new Map([[clipId, buf]]);
+    const singleClipOffsets = /* @__PURE__ */ new Map([[clipId, { offsetSamples, durationSamples }]]);
+    const result = this._peakPipeline.reextractPeaks(
+      singleClipBuffers,
+      this.samplesPerPixel,
+      this.mono,
+      singleClipOffsets
+    );
+    const peakData = result.get(clipId);
+    if (!peakData) return null;
+    return { data: peakData.data, length: peakData.length };
+  }
   get effectiveSampleRate() {
     return this._resolvedSampleRate ?? this.sampleRate;
   }
@@ -2188,6 +2892,10 @@ var DawEditorElement = class extends LitElement8 {
   // --- Lifecycle ---
   connectedCallback() {
     super.connectedCallback();
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+    this.addEventListener("keydown", this._onKeyDown);
     this.addEventListener("daw-track-connected", this._onTrackConnected);
     this.addEventListener("daw-track-update", this._onTrackUpdate);
     this.addEventListener("daw-track-control", this._onTrackControl);
@@ -2213,6 +2921,7 @@ var DawEditorElement = class extends LitElement8 {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.removeEventListener("keydown", this._onKeyDown);
     this.removeEventListener("daw-track-connected", this._onTrackConnected);
     this.removeEventListener("daw-track-update", this._onTrackUpdate);
     this.removeEventListener("daw-track-control", this._onTrackControl);
@@ -2222,6 +2931,7 @@ var DawEditorElement = class extends LitElement8 {
     this._trackElements.clear();
     this._audioCache.clear();
     this._clipBuffers.clear();
+    this._clipOffsets.clear();
     this._peakPipeline.terminate();
     try {
       this._disposeEngine();
@@ -2233,17 +2943,19 @@ var DawEditorElement = class extends LitElement8 {
     if (changedProperties.has("eagerResume")) {
       this._audioResume.target = this.eagerResume;
     }
+    if (changedProperties.has("samplesPerPixel") && this._isPlaying) {
+      this._startPlayhead();
+    }
     if (changedProperties.has("samplesPerPixel") && this._clipBuffers.size > 0) {
-      const reextracted = this._peakPipeline.reextractPeaks(
+      const re = this._peakPipeline.reextractPeaks(
         this._clipBuffers,
         this.samplesPerPixel,
-        this.mono
+        this.mono,
+        this._clipOffsets
       );
-      if (reextracted.size > 0) {
+      if (re.size > 0) {
         const next = new Map(this._peaksData);
-        for (const [clipId, peakData] of reextracted) {
-          next.set(clipId, peakData);
-        }
+        for (const [id, pd] of re) next.set(id, pd);
         this._peaksData = next;
       }
     }
@@ -2255,6 +2967,7 @@ var DawEditorElement = class extends LitElement8 {
       const nextPeaks = new Map(this._peaksData);
       for (const clip of removedTrack.clips) {
         this._clipBuffers.delete(clip.id);
+        this._clipOffsets.delete(clip.id);
         nextPeaks.delete(clip.id);
       }
       this._peaksData = nextPeaks;
@@ -2333,10 +3046,16 @@ var DawEditorElement = class extends LitElement8 {
           sourceDuration: audioBuffer.duration
         });
         this._clipBuffers = new Map(this._clipBuffers).set(clip.id, audioBuffer);
+        this._clipOffsets.set(clip.id, {
+          offsetSamples: clip.offsetSamples,
+          durationSamples: clip.durationSamples
+        });
         const peakData = await this._peakPipeline.generatePeaks(
           audioBuffer,
           this.samplesPerPixel,
-          this.mono
+          this.mono,
+          clip.offsetSamples,
+          clip.durationSamples
         );
         this._peaksData = new Map(this._peaksData).set(clip.id, peakData);
         clips.push(clip);
@@ -2428,10 +3147,20 @@ var DawEditorElement = class extends LitElement8 {
       samplesPerPixel: this.samplesPerPixel,
       zoomLevels: [256, 512, 1024, 2048, 4096, 8192, this.samplesPerPixel].filter((v, i, a) => a.indexOf(v) === i).sort((a, b) => a - b)
     });
+    let lastTracksVersion = -1;
     engine.on("statechange", (engineState) => {
       this._isPlaying = engineState.isPlaying;
       this._duration = engineState.duration;
       this._selectedTrackId = engineState.selectedTrackId;
+      if (engineState.tracksVersion !== lastTracksVersion) {
+        lastTracksVersion = engineState.tracksVersion;
+        const nextTracks = /* @__PURE__ */ new Map();
+        for (const track of engineState.tracks) {
+          nextTracks.set(track.id, track);
+        }
+        this._engineTracks = nextTracks;
+        syncPeaksForChangedClips(this, engineState.tracks);
+      }
     });
     engine.on("timeupdate", (time) => {
       this._currentTime = time;
@@ -2454,14 +3183,11 @@ var DawEditorElement = class extends LitElement8 {
     return loadFiles(this, files);
   }
   // --- Playback ---
-  async play() {
+  async play(startTime) {
     try {
       const engine = await this._ensureEngine();
-      if (!this._audioInitialized) {
-        await engine.init();
-        this._audioInitialized = true;
-      }
-      engine.play();
+      await engine.init();
+      engine.play(startTime);
       this._startPlayhead();
       this.dispatchEvent(new CustomEvent("daw-play", { bubbles: true, composed: true }));
     } catch (err) {
@@ -2492,14 +3218,32 @@ var DawEditorElement = class extends LitElement8 {
     this._engine.seek(time);
     this._currentTime = time;
   }
+  /** Split the clip under the playhead on the selected track. */
+  splitAtPlayhead() {
+    return splitAtPlayhead({
+      effectiveSampleRate: this.effectiveSampleRate,
+      currentTime: this._currentTime,
+      engine: this._engine,
+      dispatchEvent: (e) => this.dispatchEvent(e)
+    });
+  }
+  get currentTime() {
+    return this._currentTime;
+  }
   get isRecording() {
     return this._recordingController.isRecording;
   }
+  pauseRecording() {
+    this._recordingController.pauseRecording();
+  }
+  resumeRecording() {
+    this._recordingController.resumeRecording();
+  }
   stopRecording() {
     this._recordingController.stopRecording();
   }
-  _addRecordedClip(trackId, buf, startSample, durSamples) {
-    addRecordedClip(this, trackId, buf, startSample, durSamples);
+  _addRecordedClip(trackId, buf, startSample, durSamples, offsetSamples = 0) {
+    addRecordedClip(this, trackId, buf, startSample, durSamples, offsetSamples);
   }
   async startRecording(stream, options) {
     const s = stream ?? this.recordingStream;
@@ -2512,15 +3256,19 @@ var DawEditorElement = class extends LitElement8 {
   _renderRecordingPreview(trackId, chH) {
     const rs = this._recordingController.getSession(trackId);
     if (!rs) return "";
+    const audibleSamples = Math.max(0, rs.totalSamples - rs.latencySamples);
+    if (audibleSamples === 0) return "";
+    const latencyPixels = Math.floor(rs.latencySamples / this.samplesPerPixel);
     const left = Math.floor(rs.startSample / this.samplesPerPixel);
-    const w = Math.floor(rs.totalSamples / this.samplesPerPixel);
-    return rs.peaks.map(
-      (chPeaks, ch) => html7`
+    const w = Math.floor(audibleSamples / this.samplesPerPixel);
+    return rs.peaks.map((chPeaks, ch) => {
+      const slicedPeaks = latencyPixels > 0 ? chPeaks.slice(latencyPixels * 2) : chPeaks;
+      return html7`
         <daw-waveform
           data-recording-track=${trackId}
           data-recording-channel=${ch}
           style="position:absolute;left:${left}px;top:${ch * chH}px;"
-          .peaks=${chPeaks}
+          .peaks=${slicedPeaks}
           .length=${w}
           .waveHeight=${chH}
           .barWidth=${this.barWidth}
@@ -2529,8 +3277,8 @@ var DawEditorElement = class extends LitElement8 {
           .visibleEnd=${this._viewport.visibleEnd}
           .originX=${left}
         ></daw-waveform>
-      `
-    );
+      `;
+    });
   }
   // --- Playhead ---
   _startPlayhead() {
@@ -2572,13 +3320,14 @@ var DawEditorElement = class extends LitElement8 {
     const orderedTracks = this._getOrderedTracks().map(([trackId, track]) => {
       const descriptor = this._tracks.get(trackId);
       const firstPeaks = track.clips.map((c) => this._peaksData.get(c.id)).find((p) => p && p.data.length > 0);
-      const numChannels = firstPeaks ? firstPeaks.data.length : 1;
+      const recSession = this._recordingController.getSession(trackId);
+      const numChannels = firstPeaks ? firstPeaks.data.length : recSession ? recSession.channelCount : 1;
       return {
         trackId,
         track,
         descriptor,
         numChannels,
-        trackHeight: this.waveHeight * numChannels
+        trackHeight: this.waveHeight * numChannels + (this.clipHeaders ? this.clipHeaderHeight : 0)
       };
     });
     return html7`
@@ -2632,21 +3381,47 @@ var DawEditorElement = class extends LitElement8 {
         );
         const clipLeft = Math.floor(clip.startSample / this.samplesPerPixel);
         const channels = peakData?.data ?? [new Int16Array(0)];
-        return channels.map(
-          (channelPeaks, chIdx) => html7`
-                      <daw-waveform
-                        style="position: absolute; left: ${clipLeft}px; top: ${chIdx * channelHeight}px;"
-                        .peaks=${channelPeaks}
-                        .length=${peakData?.length ?? width}
-                        .waveHeight=${channelHeight}
-                        .barWidth=${this.barWidth}
-                        .barGap=${this.barGap}
-                        .visibleStart=${this._viewport.visibleStart}
-                        .visibleEnd=${this._viewport.visibleEnd}
-                        .originX=${clipLeft}
-                      ></daw-waveform>
-                    `
-        );
+        const hdrH = this.clipHeaders ? this.clipHeaderHeight : 0;
+        const chH = this.waveHeight;
+        return html7` <div
+                    class="clip-container"
+                    style="left:${clipLeft}px;top:0;width:${width}px;height:${t.trackHeight}px;"
+                    data-clip-id=${clip.id}
+                  >
+                    ${hdrH > 0 ? html7`<div
+                          class="clip-header"
+                          data-clip-id=${clip.id}
+                          data-track-id=${t.trackId}
+                          ?data-interactive=${this.interactiveClips}
+                        >
+                          <span>${clip.name || t.descriptor?.name || ""}</span>
+                        </div>` : ""}
+                    ${channels.map(
+          (chPeaks, chIdx) => html7` <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}
+                        ></daw-waveform>`
+        )}
+                    ${this.interactiveClips ? html7` <div
+                            class="clip-boundary"
+                            data-boundary-edge="left"
+                            data-clip-id=${clip.id}
+                            data-track-id=${t.trackId}
+                          ></div>
+                          <div
+                            class="clip-boundary"
+                            data-boundary-edge="right"
+                            data-clip-id=${clip.id}
+                            data-track-id=${t.trackId}
+                          ></div>` : ""}
+                  </div>`;
       })}
                 ${this._renderRecordingPreview(t.trackId, channelHeight)}
               </div>
@@ -2660,7 +3435,7 @@ var DawEditorElement = class extends LitElement8 {
 };
 DawEditorElement.styles = [
   hostStyles,
-  css6`
+  css7`
       :host {
         display: flex;
         position: relative;
@@ -2694,7 +3469,8 @@ DawEditorElement.styles = [
         outline: 2px dashed var(--daw-selection-color, rgba(99, 199, 95, 0.3));
         outline-offset: -2px;
       }
-    `
+    `,
+  clipStyles
 ];
 DawEditorElement._CONTROL_PROPS = /* @__PURE__ */ new Set(["volume", "pan", "muted", "soloed"]);
 __decorateClass([
@@ -2718,29 +3494,38 @@ __decorateClass([
 __decorateClass([
   property6({ type: Boolean, attribute: "file-drop" })
 ], DawEditorElement.prototype, "fileDrop", 2);
+__decorateClass([
+  property6({ type: Boolean, attribute: "clip-headers" })
+], DawEditorElement.prototype, "clipHeaders", 2);
+__decorateClass([
+  property6({ type: Number, attribute: "clip-header-height" })
+], DawEditorElement.prototype, "clipHeaderHeight", 2);
+__decorateClass([
+  property6({ type: Boolean, attribute: "interactive-clips" })
+], DawEditorElement.prototype, "interactiveClips", 2);
 __decorateClass([
   property6({ type: Number, attribute: "sample-rate" })
 ], DawEditorElement.prototype, "sampleRate", 2);
 __decorateClass([
-  state()
+  state3()
 ], DawEditorElement.prototype, "_tracks", 2);
 __decorateClass([
-  state()
+  state3()
 ], DawEditorElement.prototype, "_engineTracks", 2);
 __decorateClass([
-  state()
+  state3()
 ], DawEditorElement.prototype, "_peaksData", 2);
 __decorateClass([
-  state()
+  state3()
 ], DawEditorElement.prototype, "_isPlaying", 2);
 __decorateClass([
-  state()
+  state3()
 ], DawEditorElement.prototype, "_duration", 2);
 __decorateClass([
-  state()
+  state3()
 ], DawEditorElement.prototype, "_selectedTrackId", 2);
 __decorateClass([
-  state()
+  state3()
 ], DawEditorElement.prototype, "_dragOver", 2);
 __decorateClass([
   property6({ attribute: "eager-resume" })
@@ -2750,7 +3535,7 @@ DawEditorElement = __decorateClass([
 ], DawEditorElement);
 
 // src/elements/daw-ruler.ts
-import { LitElement as LitElement9, html as html8, css as css7 } from "lit";
+import { LitElement as LitElement9, html as html8, css as css8 } from "lit";
 import { customElement as customElement11, property as property7 } from "lit/decorators.js";
 
 // src/utils/time-format.ts
@@ -2883,7 +3668,7 @@ var DawRulerElement = class extends LitElement9 {
     }
   }
 };
-DawRulerElement.styles = css7`
+DawRulerElement.styles = css8`
     :host {
       display: block;
       position: relative;
@@ -2921,7 +3706,7 @@ DawRulerElement = __decorateClass([
 ], DawRulerElement);
 
 // src/elements/daw-selection.ts
-import { LitElement as LitElement10, html as html9, css as css8 } from "lit";
+import { LitElement as LitElement10, html as html9, css as css9 } from "lit";
 import { customElement as customElement12, property as property8 } from "lit/decorators.js";
 var DawSelectionElement = class extends LitElement10 {
   constructor() {
@@ -2936,7 +3721,7 @@ var DawSelectionElement = class extends LitElement10 {
     return html9`<div style="left: ${left}px; width: ${width}px;"></div>`;
   }
 };
-DawSelectionElement.styles = css8`
+DawSelectionElement.styles = css9`
     :host {
       position: absolute;
       top: 0;
@@ -2963,8 +3748,8 @@ DawSelectionElement = __decorateClass([
 ], DawSelectionElement);
 
 // src/elements/daw-record-button.ts
-import { html as html10, css as css9 } from "lit";
-import { customElement as customElement13, state as state2 } from "lit/decorators.js";
+import { html as html10, css as css10 } from "lit";
+import { customElement as customElement13, state as state4 } from "lit/decorators.js";
 var DawRecordButtonElement = class extends DawTransportButton {
   constructor() {
     super(...arguments);
@@ -2982,7 +3767,7 @@ var DawRecordButtonElement = class extends DawTransportButton {
   }
   connectedCallback() {
     super.connectedCallback();
-    this._listenToTarget();
+    requestAnimationFrame(() => this._listenToTarget());
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -3007,11 +3792,12 @@ var DawRecordButtonElement = class extends DawTransportButton {
   render() {
     return html10`
       <button part="button" ?data-recording=${this._isRecording} @click=${this._onClick}>
-        <slot>${this._isRecording ? "Stop Rec" : "Record"}</slot>
+        <slot>Record</slot>
       </button>
     `;
   }
   _onClick() {
+    if (this._isRecording) return;
     const target = this.target;
     if (!target) {
       console.warn(
@@ -3019,30 +3805,28 @@ var DawRecordButtonElement = class extends DawTransportButton {
       );
       return;
     }
-    if (this._isRecording) {
-      target.stopRecording();
-    } else {
-      target.startRecording(target.recordingStream);
-    }
+    target.startRecording(target.recordingStream);
   }
 };
 DawRecordButtonElement.styles = [
   DawTransportButton.styles,
-  css9`
+  css10`
       button[data-recording] {
         color: #d08070;
         border-color: #d08070;
+        background: rgba(208, 128, 112, 0.15);
       }
     `
 ];
 __decorateClass([
-  state2()
+  state4()
 ], DawRecordButtonElement.prototype, "_isRecording", 2);
 DawRecordButtonElement = __decorateClass([
   customElement13("daw-record-button")
 ], DawRecordButtonElement);
 export {
   AudioResumeController,
+  ClipPointerHandler,
   DawClipElement,
   DawEditorElement,
   DawPauseButtonElement,
@@ -3057,6 +3841,7 @@ export {
   DawTransportButton,
   DawTransportElement,
   DawWaveformElement,
-  RecordingController
+  RecordingController,
+  splitAtPlayhead
 };
 //# sourceMappingURL=index.mjs.map