@dawcore/components 0.0.1

package/dist/index.mjs

@@ -0,0 +1,3062 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/daw-clip.ts
+import { LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var DawClipElement = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.src = "";
+    this.peaksSrc = "";
+    this.start = 0;
+    this.duration = 0;
+    this.offset = 0;
+    this.gain = 1;
+    this.name = "";
+    this.color = "";
+    this.fadeIn = 0;
+    this.fadeOut = 0;
+    this.fadeType = "linear";
+    this.clipId = crypto.randomUUID();
+  }
+  // Light DOM — no visual rendering, just a data container
+  createRenderRoot() {
+    return this;
+  }
+};
+__decorateClass([
+  property()
+], DawClipElement.prototype, "src", 2);
+__decorateClass([
+  property({ attribute: "peaks-src" })
+], DawClipElement.prototype, "peaksSrc", 2);
+__decorateClass([
+  property({ type: Number })
+], DawClipElement.prototype, "start", 2);
+__decorateClass([
+  property({ type: Number })
+], DawClipElement.prototype, "duration", 2);
+__decorateClass([
+  property({ type: Number })
+], DawClipElement.prototype, "offset", 2);
+__decorateClass([
+  property({ type: Number })
+], DawClipElement.prototype, "gain", 2);
+__decorateClass([
+  property()
+], DawClipElement.prototype, "name", 2);
+__decorateClass([
+  property()
+], DawClipElement.prototype, "color", 2);
+__decorateClass([
+  property({ type: Number, attribute: "fade-in" })
+], DawClipElement.prototype, "fadeIn", 2);
+__decorateClass([
+  property({ type: Number, attribute: "fade-out" })
+], DawClipElement.prototype, "fadeOut", 2);
+__decorateClass([
+  property({ attribute: "fade-type" })
+], DawClipElement.prototype, "fadeType", 2);
+DawClipElement = __decorateClass([
+  customElement("daw-clip")
+], DawClipElement);
+
+// src/elements/daw-track.ts
+import { LitElement as LitElement2 } from "lit";
+import { customElement as customElement2, property as property2 } from "lit/decorators.js";
+var DawTrackElement = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    this.src = "";
+    this.name = "";
+    this.volume = 1;
+    this.pan = 0;
+    this.muted = false;
+    this.soloed = false;
+    this.trackId = crypto.randomUUID();
+    // Track removal is detected by the editor's MutationObserver,
+    // not by dispatching from disconnectedCallback (detached elements
+    // cannot bubble events to ancestors).
+    this._hasRendered = false;
+  }
+  // Light DOM so <daw-clip> children are queryable.
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    setTimeout(() => {
+      this.dispatchEvent(
+        new CustomEvent("daw-track-connected", {
+          bubbles: true,
+          composed: true,
+          detail: { trackId: this.trackId, element: this }
+        })
+      );
+    }, 0);
+  }
+  updated(changed) {
+    if (!this._hasRendered) {
+      this._hasRendered = true;
+      return;
+    }
+    const trackProps = ["volume", "pan", "muted", "soloed", "src", "name"];
+    const hasTrackChange = trackProps.some((p) => changed.has(p));
+    if (hasTrackChange) {
+      this.dispatchEvent(
+        new CustomEvent("daw-track-update", {
+          bubbles: true,
+          composed: true,
+          detail: { trackId: this.trackId }
+        })
+      );
+    }
+  }
+};
+__decorateClass([
+  property2()
+], DawTrackElement.prototype, "src", 2);
+__decorateClass([
+  property2()
+], DawTrackElement.prototype, "name", 2);
+__decorateClass([
+  property2({ type: Number })
+], DawTrackElement.prototype, "volume", 2);
+__decorateClass([
+  property2({ type: Number })
+], DawTrackElement.prototype, "pan", 2);
+__decorateClass([
+  property2({ type: Boolean })
+], DawTrackElement.prototype, "muted", 2);
+__decorateClass([
+  property2({ type: Boolean })
+], DawTrackElement.prototype, "soloed", 2);
+DawTrackElement = __decorateClass([
+  customElement2("daw-track")
+], DawTrackElement);
+
+// src/elements/daw-waveform.ts
+import { LitElement as LitElement3, html, css } from "lit";
+import { customElement as customElement3, property as property3 } from "lit/decorators.js";
+
+// src/utils/peak-rendering.ts
+function aggregatePeaks(data, bits, startIndex, endIndex) {
+  if (startIndex * 2 + 1 >= data.length) {
+    return null;
+  }
+  const maxValue = 2 ** (bits - 1);
+  let minPeak = data[startIndex * 2] / maxValue;
+  let maxPeak = data[startIndex * 2 + 1] / maxValue;
+  for (let p = startIndex + 1; p < endIndex; p++) {
+    if (p * 2 + 1 >= data.length) break;
+    const pMin = data[p * 2] / maxValue;
+    const pMax = data[p * 2 + 1] / maxValue;
+    if (pMin < minPeak) minPeak = pMin;
+    if (pMax > maxPeak) maxPeak = pMax;
+  }
+  return { min: minPeak, max: maxPeak };
+}
+function calculateBarRects(x, barWidth, halfHeight, minPeak, maxPeak, drawMode) {
+  const min = Math.abs(minPeak * halfHeight);
+  const max = Math.abs(maxPeak * halfHeight);
+  if (drawMode === "normal") {
+    return [{ x, y: halfHeight - max, width: barWidth, height: max + min }];
+  }
+  return [
+    { x, y: 0, width: barWidth, height: halfHeight - max },
+    { x, y: halfHeight + min, width: barWidth, height: halfHeight - min }
+  ];
+}
+
+// src/utils/viewport.ts
+function getVisibleChunkIndices(totalWidth, chunkWidth, visibleStart, visibleEnd, originX = 0) {
+  const totalChunks = Math.ceil(totalWidth / chunkWidth);
+  const indices = [];
+  for (let i = 0; i < totalChunks; i++) {
+    const chunkStart = originX + i * chunkWidth;
+    const chunkEnd = chunkStart + chunkWidth;
+    if (chunkEnd > visibleStart && chunkStart < visibleEnd) {
+      indices.push(i);
+    }
+  }
+  return indices;
+}
+
+// src/elements/daw-waveform.ts
+var MAX_CANVAS_WIDTH = 1e3;
+var LAYOUT_PROPS = /* @__PURE__ */ new Set(["length", "waveHeight", "barWidth", "barGap"]);
+function groupDirtyByChunk(dirtyPixels, step) {
+  const dirtyByChunk = /* @__PURE__ */ new Map();
+  for (const peakIdx of dirtyPixels) {
+    const barPixel = Math.floor(peakIdx / step) * step;
+    const chunkIdx = Math.floor(barPixel / MAX_CANVAS_WIDTH);
+    const existing = dirtyByChunk.get(chunkIdx);
+    if (existing) {
+      dirtyByChunk.set(chunkIdx, {
+        min: Math.min(existing.min, barPixel),
+        max: Math.max(existing.max, barPixel)
+      });
+    } else {
+      dirtyByChunk.set(chunkIdx, { min: barPixel, max: barPixel });
+    }
+  }
+  return dirtyByChunk;
+}
+var DawWaveformElement = class extends LitElement3 {
+  constructor() {
+    super(...arguments);
+    this._peaks = new Int16Array(0);
+    this._dirtyPixels = /* @__PURE__ */ new Set();
+    this._drawScheduled = false;
+    this._rafId = 0;
+    /** Chunk indices visible in the last draw pass — used to detect new chunks on scroll. */
+    this._drawnChunks = /* @__PURE__ */ new Set();
+    this.length = 0;
+    this.waveHeight = 128;
+    this.barWidth = 1;
+    this.barGap = 0;
+    this.visibleStart = -Infinity;
+    this.visibleEnd = Infinity;
+    this.originX = 0;
+  }
+  set peaks(value) {
+    this._peaks = value;
+    this._markAllDirty();
+    this.requestUpdate();
+  }
+  get peaks() {
+    return this._peaks;
+  }
+  /**
+   * Replace the internal peaks reference without marking all dirty.
+   * Use with updatePeaks() for incremental recording updates where
+   * appendPeaks() returns a new array but only the tail changed.
+   */
+  setPeaksQuiet(value) {
+    this._peaks = value;
+  }
+  get bits() {
+    return this._peaks instanceof Int8Array ? 8 : 16;
+  }
+  _getVisibleChunkIndices() {
+    return getVisibleChunkIndices(
+      this.length,
+      MAX_CANVAS_WIDTH,
+      this.visibleStart,
+      this.visibleEnd,
+      this.originX
+    );
+  }
+  /**
+   * Mark a range of peak indices as dirty for incremental redraw.
+   * The caller must have already updated the underlying peaks array.
+   * Does NOT trigger a Lit re-render — bypasses Lit entirely.
+   */
+  updatePeaks(startIndex, endIndex) {
+    const peakCount = Math.floor(this._peaks.length / 2);
+    const clampedStart = Math.max(0, startIndex);
+    const clampedEnd = Math.min(peakCount, endIndex);
+    for (let i = clampedStart; i < clampedEnd; i++) {
+      this._dirtyPixels.add(i);
+    }
+    this._scheduleDraw();
+  }
+  _markAllDirty() {
+    const peakCount = Math.floor(this._peaks.length / 2);
+    for (let i = 0; i < peakCount; i++) {
+      this._dirtyPixels.add(i);
+    }
+    this._scheduleDraw();
+  }
+  _scheduleDraw() {
+    if (!this._drawScheduled) {
+      this._drawScheduled = true;
+      this._rafId = requestAnimationFrame(() => {
+        this._drawScheduled = false;
+        this._drawDirty();
+      });
+    }
+  }
+  _drawDirty() {
+    if (this._dirtyPixels.size === 0 || this.length === 0 || this._peaks.length === 0) {
+      this._dirtyPixels.clear();
+      return;
+    }
+    const canvases = this.shadowRoot?.querySelectorAll("canvas");
+    if (!canvases || canvases.length === 0) {
+      return;
+    }
+    const step = this.barWidth + this.barGap;
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    const halfHeight = this.waveHeight / 2;
+    const bits = this.bits;
+    const waveColor = getComputedStyle(this).getPropertyValue("--daw-wave-color").trim() || "#c49a6c";
+    const dirtyByChunk = groupDirtyByChunk(this._dirtyPixels, step);
+    this._drawnChunks.clear();
+    for (const canvas of canvases) {
+      const chunkIdx = Number(canvas.dataset.index);
+      this._drawnChunks.add(chunkIdx);
+      const range = dirtyByChunk.get(chunkIdx);
+      if (!range) continue;
+      this._drawChunk(canvas, chunkIdx, range, step, dpr, halfHeight, bits, waveColor);
+    }
+    this._dirtyPixels.clear();
+  }
+  _drawChunk(canvas, chunkIdx, range, step, dpr, halfHeight, bits, waveColor) {
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const globalOffset = chunkIdx * MAX_CANVAS_WIDTH;
+    const clearStart = Math.max(0, range.min - globalOffset);
+    const clearEnd = range.max - globalOffset + this.barWidth;
+    const clearWidth = clearEnd - clearStart;
+    const firstBar = range.min;
+    ctx.resetTransform();
+    ctx.clearRect(clearStart * dpr, 0, clearWidth * dpr, canvas.height);
+    ctx.scale(dpr, dpr);
+    ctx.fillStyle = waveColor;
+    const canvasWidth = Math.min(MAX_CANVAS_WIDTH, this.length - globalOffset);
+    const regionEnd = Math.min(globalOffset + clearEnd, globalOffset + canvasWidth);
+    for (let bar = Math.max(0, firstBar); bar < regionEnd; bar += step) {
+      const peak = aggregatePeaks(this._peaks, bits, bar, bar + step);
+      if (!peak) continue;
+      const rects = calculateBarRects(
+        bar - globalOffset,
+        this.barWidth,
+        halfHeight,
+        peak.min,
+        peak.max,
+        "normal"
+      );
+      for (const r of rects) {
+        ctx.fillRect(r.x, r.y, r.width, r.height);
+      }
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this._dirtyPixels.size > 0) {
+      this._scheduleDraw();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._drawScheduled) {
+      cancelAnimationFrame(this._rafId);
+      this._drawScheduled = false;
+    }
+  }
+  render() {
+    const indices = this._getVisibleChunkIndices();
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    return html`
+      <div class="container" style="width: ${this.length}px; height: ${this.waveHeight}px;">
+        ${indices.map((i) => {
+      const width = Math.min(MAX_CANVAS_WIDTH, this.length - i * MAX_CANVAS_WIDTH);
+      return html`
+            <canvas
+              data-index=${i}
+              width=${width * dpr}
+              height=${this.waveHeight * dpr}
+              style="left: ${i * MAX_CANVAS_WIDTH}px; width: ${width}px; height: ${this.waveHeight}px;"
+            ></canvas>
+          `;
+    })}
+      </div>
+    `;
+  }
+  /** Mark peaks dirty only for chunks that weren't drawn in the previous frame. */
+  _markNewChunksDirty() {
+    const currentIndices = this._getVisibleChunkIndices();
+    const peakCount = Math.floor(this._peaks.length / 2);
+    for (const chunkIdx of currentIndices) {
+      if (!this._drawnChunks.has(chunkIdx)) {
+        const start = chunkIdx * MAX_CANVAS_WIDTH;
+        const end = Math.min(start + MAX_CANVAS_WIDTH, peakCount);
+        for (let i = start; i < end; i++) {
+          this._dirtyPixels.add(i);
+        }
+      }
+    }
+    if (this._dirtyPixels.size > 0) {
+      this._scheduleDraw();
+    }
+  }
+  updated(changedProperties) {
+    const needsFullDirty = [...changedProperties.keys()].some((key) => LAYOUT_PROPS.has(key));
+    if (needsFullDirty) {
+      this._markAllDirty();
+      return;
+    }
+    if (changedProperties.has("visibleStart") || changedProperties.has("visibleEnd") || changedProperties.has("originX")) {
+      this._markNewChunksDirty();
+    }
+  }
+};
+DawWaveformElement.styles = css`
+    :host {
+      display: block;
+      position: relative;
+    }
+    .container {
+      position: relative;
+    }
+    canvas {
+      position: absolute;
+      top: 0;
+    }
+  `;
+__decorateClass([
+  property3({ type: Number, attribute: false })
+], DawWaveformElement.prototype, "length", 2);
+__decorateClass([
+  property3({ type: Number, attribute: false })
+], DawWaveformElement.prototype, "waveHeight", 2);
+__decorateClass([
+  property3({ type: Number, attribute: false })
+], DawWaveformElement.prototype, "barWidth", 2);
+__decorateClass([
+  property3({ type: Number, attribute: false })
+], DawWaveformElement.prototype, "barGap", 2);
+__decorateClass([
+  property3({ type: Number, attribute: false })
+], DawWaveformElement.prototype, "visibleStart", 2);
+__decorateClass([
+  property3({ type: Number, attribute: false })
+], DawWaveformElement.prototype, "visibleEnd", 2);
+__decorateClass([
+  property3({ type: Number, attribute: false })
+], DawWaveformElement.prototype, "originX", 2);
+DawWaveformElement = __decorateClass([
+  customElement3("daw-waveform")
+], DawWaveformElement);
+
+// src/elements/daw-playhead.ts
+import { LitElement as LitElement4, html as html2, css as css2 } from "lit";
+import { customElement as customElement4 } from "lit/decorators.js";
+
+// src/controllers/animation-controller.ts
+var AnimationController = class {
+  constructor(host) {
+    this._rafId = null;
+    this._callback = null;
+    host.addController(this);
+  }
+  start(callback) {
+    this.stop();
+    this._callback = callback;
+    const loop = () => {
+      this._callback?.();
+      this._rafId = requestAnimationFrame(loop);
+    };
+    this._rafId = requestAnimationFrame(loop);
+  }
+  stop() {
+    if (this._rafId !== null) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+    }
+    this._callback = null;
+  }
+  hostConnected() {
+  }
+  hostDisconnected() {
+    this.stop();
+  }
+};
+
+// src/elements/daw-playhead.ts
+var DawPlayheadElement = class extends LitElement4 {
+  constructor() {
+    super(...arguments);
+    this._animation = new AnimationController(this);
+    this._line = null;
+  }
+  render() {
+    return html2`<div></div>`;
+  }
+  firstUpdated() {
+    this._line = this.shadowRoot.querySelector("div");
+  }
+  startAnimation(getTime, sampleRate, samplesPerPixel) {
+    this._animation.start(() => {
+      const time = getTime();
+      const px = time * sampleRate / samplesPerPixel;
+      if (this._line) {
+        this._line.style.transform = `translate3d(${px}px, 0, 0)`;
+      }
+    });
+  }
+  stopAnimation(time, sampleRate, samplesPerPixel) {
+    this._animation.stop();
+    const px = time * sampleRate / samplesPerPixel;
+    if (this._line) {
+      this._line.style.transform = `translate3d(${px}px, 0, 0)`;
+    }
+  }
+};
+DawPlayheadElement.styles = css2`
+    :host {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      z-index: 10;
+    }
+    div {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      background: var(--daw-playhead-color, #d08070);
+      will-change: transform;
+    }
+  `;
+DawPlayheadElement = __decorateClass([
+  customElement4("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 {
+  constructor() {
+    super(...arguments);
+    this.for = "";
+  }
+  get target() {
+    return this.for ? document.getElementById(this.for) : null;
+  }
+  // Light DOM — button children stay in consumer's DOM.
+  // No render() needed; light DOM elements don't use <slot>.
+  createRenderRoot() {
+    return this;
+  }
+};
+__decorateClass([
+  property4()
+], DawTransportElement.prototype, "for", 2);
+DawTransportElement = __decorateClass([
+  customElement5("daw-transport")
+], DawTransportElement);
+
+// src/elements/daw-play-button.ts
+import { html as html3 } from "lit";
+import { customElement as customElement6 } from "lit/decorators.js";
+
+// src/elements/daw-transport-button.ts
+import { LitElement as LitElement6, css as css3 } from "lit";
+var DawTransportButton = class extends LitElement6 {
+  get target() {
+    const transport = this.closest("daw-transport");
+    return transport?.target ?? null;
+  }
+};
+DawTransportButton.styles = css3`
+    button {
+      cursor: pointer;
+      background: var(--daw-controls-background, #1a1a2e);
+      color: var(--daw-controls-text, #e0d4c8);
+      border: 1px solid currentColor;
+      padding: 4px 8px;
+      font: inherit;
+    }
+    button:hover {
+      opacity: 0.8;
+    }
+    button:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+  `;
+
+// src/elements/daw-play-button.ts
+var DawPlayButtonElement = class extends DawTransportButton {
+  render() {
+    return html3`
+      <button part="button" @click=${this._onClick}>
+        <slot>Play</slot>
+      </button>
+    `;
+  }
+  _onClick() {
+    const target = this.target;
+    if (!target) {
+      console.warn(
+        '[dawcore] <daw-play-button> has no target. Check <daw-transport for="..."> references a valid <daw-editor> id.'
+      );
+      return;
+    }
+    target.play();
+  }
+};
+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";
+var DawPauseButtonElement = class extends DawTransportButton {
+  render() {
+    return html4`
+      <button part="button" @click=${this._onClick}>
+        <slot>Pause</slot>
+      </button>
+    `;
+  }
+  _onClick() {
+    const target = this.target;
+    if (!target) {
+      console.warn(
+        '[dawcore] <daw-pause-button> has no target. Check <daw-transport for="..."> references a valid <daw-editor> id.'
+      );
+      return;
+    }
+    target.pause();
+  }
+};
+DawPauseButtonElement = __decorateClass([
+  customElement7("daw-pause-button")
+], DawPauseButtonElement);
+
+// src/elements/daw-stop-button.ts
+import { html as html5 } from "lit";
+import { customElement as customElement8 } from "lit/decorators.js";
+var DawStopButtonElement = class extends DawTransportButton {
+  render() {
+    return html5`
+      <button part="button" @click=${this._onClick}>
+        <slot>Stop</slot>
+      </button>
+    `;
+  }
+  _onClick() {
+    const target = this.target;
+    if (!target) {
+      console.warn(
+        '[dawcore] <daw-stop-button> has no target. Check <daw-transport for="..."> references a valid <daw-editor> id.'
+      );
+      return;
+    }
+    target.stop();
+  }
+};
+DawStopButtonElement = __decorateClass([
+  customElement8("daw-stop-button")
+], 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 { createClipFromSeconds as createClipFromSeconds2, createTrack as createTrack2, clipPixelWidth } from "@waveform-playlist/core";
+
+// src/workers/peaksWorker.ts
+import WaveformData from "waveform-data";
+var workerSource = `
+"use strict";
+
+var INT8_MAX = 127;
+var INT8_MIN = -128;
+var INT16_MAX = 32767;
+var INT16_MIN = -32768;
+
+function calculateWaveformDataLength(audio_sample_count, scale) {
+  var data_length = Math.floor(audio_sample_count / scale);
+  var samples_remaining = audio_sample_count - (data_length * scale);
+  if (samples_remaining > 0) {
+    data_length++;
+  }
+  return data_length;
+}
+
+function generateWaveformData(options) {
+  var scale = options.scale;
+  var amplitude_scale = options.amplitude_scale;
+  var split_channels = options.split_channels;
+  var length = options.length;
+  var sample_rate = options.sample_rate;
+  var channels = options.channels.map(function(channel) {
+    return new Float32Array(channel);
+  });
+  var output_channels = split_channels ? channels.length : 1;
+  var header_size = 24;
+  var data_length = calculateWaveformDataLength(length, scale);
+  var bytes_per_sample = options.bits === 8 ? 1 : 2;
+  var total_size = header_size + data_length * 2 * bytes_per_sample * output_channels;
+  var buffer = new ArrayBuffer(total_size);
+  var data_view = new DataView(buffer);
+
+  var scale_counter = 0;
+  var offset = header_size;
+
+  var min_value = new Array(output_channels);
+  var max_value = new Array(output_channels);
+
+  for (var channel = 0; channel < output_channels; channel++) {
+    min_value[channel] = Infinity;
+    max_value[channel] = -Infinity;
+  }
+
+  var range_min = options.bits === 8 ? INT8_MIN : INT16_MIN;
+  var range_max = options.bits === 8 ? INT8_MAX : INT16_MAX;
+
+  data_view.setInt32(0, 2, true);
+  data_view.setUint32(4, options.bits === 8, true);
+  data_view.setInt32(8, sample_rate, true);
+  data_view.setInt32(12, scale, true);
+  data_view.setInt32(16, data_length, true);
+  data_view.setInt32(20, output_channels, true);
+
+  for (var i = 0; i < length; i++) {
+    var sample = 0;
+
+    if (output_channels === 1) {
+      for (var ch = 0; ch < channels.length; ++ch) {
+        sample += channels[ch][i];
+      }
+      sample = Math.floor(range_max * sample * amplitude_scale / channels.length);
+
+      if (sample < min_value[0]) {
+        min_value[0] = sample;
+        if (min_value[0] < range_min) {
+          min_value[0] = range_min;
+        }
+      }
+      if (sample > max_value[0]) {
+        max_value[0] = sample;
+        if (max_value[0] > range_max) {
+          max_value[0] = range_max;
+        }
+      }
+    }
+    else {
+      for (var ch2 = 0; ch2 < output_channels; ++ch2) {
+        sample = Math.floor(range_max * channels[ch2][i] * amplitude_scale);
+
+        if (sample < min_value[ch2]) {
+          min_value[ch2] = sample;
+          if (min_value[ch2] < range_min) {
+            min_value[ch2] = range_min;
+          }
+        }
+        if (sample > max_value[ch2]) {
+          max_value[ch2] = sample;
+          if (max_value[ch2] > range_max) {
+            max_value[ch2] = range_max;
+          }
+        }
+      }
+    }
+
+    if (++scale_counter === scale) {
+      for (var ch3 = 0; ch3 < output_channels; ch3++) {
+        if (options.bits === 8) {
+          data_view.setInt8(offset++, min_value[ch3]);
+          data_view.setInt8(offset++, max_value[ch3]);
+        }
+        else {
+          data_view.setInt16(offset, min_value[ch3], true);
+          data_view.setInt16(offset + 2, max_value[ch3], true);
+          offset += 4;
+        }
+        min_value[ch3] = Infinity;
+        max_value[ch3] = -Infinity;
+      }
+      scale_counter = 0;
+    }
+  }
+
+  if (scale_counter > 0) {
+    for (var ch4 = 0; ch4 < output_channels; ch4++) {
+      if (options.bits === 8) {
+        data_view.setInt8(offset++, min_value[ch4]);
+        data_view.setInt8(offset++, max_value[ch4]);
+      }
+      else {
+        data_view.setInt16(offset, min_value[ch4], true);
+        data_view.setInt16(offset + 2, max_value[ch4], true);
+        offset += 4;
+      }
+    }
+  }
+
+  return buffer;
+}
+
+self.onmessage = function(e) {
+  var msg = e.data;
+  try {
+    var result = generateWaveformData({
+      scale: msg.scale,
+      bits: msg.bits,
+      amplitude_scale: msg.amplitude_scale,
+      split_channels: msg.split_channels,
+      length: msg.length,
+      sample_rate: msg.sample_rate,
+      channels: msg.channels
+    });
+    self.postMessage({ id: msg.id, buffer: result }, [result]);
+  } catch (err) {
+    self.postMessage({ id: msg.id, error: err.message || String(err) });
+  }
+};
+`;
+function createPeaksWorker() {
+  let worker;
+  try {
+    const blob = new Blob([workerSource], { type: "application/javascript" });
+    const url = URL.createObjectURL(blob);
+    worker = new Worker(url);
+    URL.revokeObjectURL(url);
+  } catch (err) {
+    console.warn("[dawcore] Failed to create peaks worker (CSP restriction?): " + String(err));
+    return {
+      generate() {
+        return Promise.reject(
+          new Error(
+            "Peaks worker unavailable (CSP may block blob: URLs). Add blob: to worker-src directive."
+          )
+        );
+      },
+      terminate() {
+      }
+    };
+  }
+  const pending = /* @__PURE__ */ new Map();
+  let terminated = false;
+  let idCounter = 0;
+  worker.onmessage = (e) => {
+    const msg = e.data;
+    const entry = pending.get(msg.id);
+    if (!entry) {
+      console.warn("[dawcore] Received worker message for unknown id: " + String(msg.id));
+      return;
+    }
+    pending.delete(msg.id);
+    if (msg.error) {
+      entry.reject(new Error(msg.error));
+    } else {
+      try {
+        const waveformData = WaveformData.create(msg.buffer);
+        entry.resolve(waveformData);
+      } catch (err) {
+        entry.reject(err);
+      }
+    }
+  };
+  worker.onerror = (e) => {
+    const reason = e.error ?? new Error(e.message);
+    console.warn("[dawcore] Peaks worker crashed: " + String(reason));
+    terminated = true;
+    worker.terminate();
+    for (const [, entry] of pending) {
+      entry.reject(reason);
+    }
+    pending.clear();
+  };
+  return {
+    generate(params) {
+      if (terminated) return Promise.reject(new Error("Worker terminated"));
+      const messageId = String(++idCounter);
+      return new Promise((resolve, reject) => {
+        pending.set(messageId, { resolve, reject });
+        worker.postMessage(
+          {
+            id: messageId,
+            scale: params.scale,
+            bits: params.bits,
+            amplitude_scale: 1,
+            split_channels: params.splitChannels,
+            length: params.length,
+            sample_rate: params.sampleRate,
+            channels: params.channels
+          },
+          params.channels
+          // Transfer ownership
+        );
+      });
+    },
+    terminate() {
+      terminated = true;
+      worker.terminate();
+      for (const [, entry] of pending) {
+        entry.reject(new Error("Worker terminated"));
+      }
+      pending.clear();
+    }
+  };
+}
+
+// src/workers/waveformDataUtils.ts
+function sliceAndResample(waveformData, samplesPerPixel, offsetSamples, durationSamples) {
+  let processedData = waveformData;
+  if (offsetSamples !== void 0 && durationSamples !== void 0) {
+    if (processedData.scale !== samplesPerPixel) {
+      const sourceScale = waveformData.scale;
+      const ratio = samplesPerPixel / sourceScale;
+      const targetStart = Math.floor(offsetSamples / samplesPerPixel);
+      const targetEnd = Math.ceil((offsetSamples + durationSamples) / samplesPerPixel);
+      const sourceStart = Math.max(0, Math.floor(targetStart * ratio));
+      const sourceEnd = Math.min(waveformData.length, Math.ceil(targetEnd * ratio));
+      if (sourceStart >= sourceEnd) {
+        return null;
+      }
+      processedData = processedData.slice({
+        startIndex: sourceStart,
+        endIndex: sourceEnd
+      });
+      processedData = processedData.resample({ scale: samplesPerPixel });
+    } else {
+      const startIndex = Math.floor(offsetSamples / samplesPerPixel);
+      const endIndex = Math.ceil((offsetSamples + durationSamples) / samplesPerPixel);
+      processedData = processedData.slice({ startIndex, endIndex });
+    }
+  } else if (processedData.scale !== samplesPerPixel) {
+    processedData = processedData.resample({ scale: samplesPerPixel });
+  }
+  return processedData;
+}
+function extractPeaks(waveformData, samplesPerPixel, isMono, offsetSamples, durationSamples) {
+  const processedData = sliceAndResample(
+    waveformData,
+    samplesPerPixel,
+    offsetSamples,
+    durationSamples
+  );
+  if (processedData === null) {
+    const bits2 = waveformData.bits;
+    const numChannels2 = isMono ? 1 : waveformData.channels;
+    const emptyData = Array.from(
+      { length: numChannels2 },
+      () => bits2 === 8 ? new Int8Array(0) : new Int16Array(0)
+    );
+    return { length: 0, data: emptyData, bits: bits2 };
+  }
+  const numChannels = processedData.channels;
+  const bits = processedData.bits;
+  const channelPeaks = [];
+  for (let c = 0; c < numChannels; c++) {
+    const channel = processedData.channel(c);
+    const minArray = channel.min_array();
+    const maxArray = channel.max_array();
+    const len = minArray.length;
+    const peaks = bits === 8 ? new Int8Array(len * 2) : new Int16Array(len * 2);
+    for (let i = 0; i < len; i++) {
+      peaks[i * 2] = minArray[i];
+      peaks[i * 2 + 1] = maxArray[i];
+    }
+    channelPeaks.push(peaks);
+  }
+  if (isMono && channelPeaks.length > 1) {
+    const weight = 1 / channelPeaks.length;
+    const numPeaks = channelPeaks[0].length / 2;
+    const monoPeaks = bits === 8 ? new Int8Array(numPeaks * 2) : new Int16Array(numPeaks * 2);
+    for (let i = 0; i < numPeaks; i++) {
+      let min = 0;
+      let max = 0;
+      for (let c = 0; c < channelPeaks.length; c++) {
+        min += weight * channelPeaks[c][i * 2];
+        max += weight * channelPeaks[c][i * 2 + 1];
+      }
+      monoPeaks[i * 2] = min;
+      monoPeaks[i * 2 + 1] = max;
+    }
+    return { length: numPeaks, data: [monoPeaks], bits };
+  }
+  const peakLength = channelPeaks.length > 0 ? channelPeaks[0].length / 2 : 0;
+  return { length: peakLength, data: channelPeaks, bits };
+}
+
+// src/workers/peakPipeline.ts
+var PeakPipeline = class {
+  constructor() {
+    this._worker = null;
+    this._cache = /* @__PURE__ */ new WeakMap();
+    this._inflight = /* @__PURE__ */ new WeakMap();
+  }
+  /**
+   * 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.
+   */
+  async generatePeaks(audioBuffer, samplesPerPixel, isMono) {
+    const waveformData = await this._getWaveformData(audioBuffer, samplesPerPixel);
+    try {
+      return extractPeaks(waveformData, samplesPerPixel, isMono);
+    } catch (err) {
+      console.warn("[dawcore] extractPeaks failed: " + String(err));
+      throw err;
+    }
+  }
+  /**
+   * Re-extract peaks for all clips at a new zoom level using cached WaveformData.
+   * Only works for zoom levels coarser than (or equal to) the cached base scale.
+   * 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) {
+    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));
+        } catch (err) {
+          console.warn("[dawcore] reextractPeaks failed for clip " + clipId + ": " + String(err));
+        }
+      }
+    }
+    return result;
+  }
+  terminate() {
+    this._worker?.terminate();
+    this._worker = null;
+  }
+  async _getWaveformData(audioBuffer, samplesPerPixel) {
+    const cached = this._cache.get(audioBuffer);
+    if (cached && cached.scale <= samplesPerPixel) return cached;
+    const inflight = this._inflight.get(audioBuffer);
+    if (inflight) return inflight;
+    if (!this._worker) {
+      this._worker = createPeaksWorker();
+    }
+    const channels = [];
+    for (let c = 0; c < audioBuffer.numberOfChannels; c++) {
+      channels.push(audioBuffer.getChannelData(c).slice().buffer);
+    }
+    const promise = this._worker.generate({
+      channels,
+      length: audioBuffer.length,
+      sampleRate: audioBuffer.sampleRate,
+      scale: samplesPerPixel,
+      bits: 16,
+      splitChannels: true
+    }).then((waveformData) => {
+      this._cache.set(audioBuffer, waveformData);
+      this._inflight.delete(audioBuffer);
+      return waveformData;
+    }).catch((err) => {
+      this._inflight.delete(audioBuffer);
+      console.warn("[dawcore] Peak generation via worker failed: " + String(err));
+      throw err;
+    });
+    this._inflight.set(audioBuffer, promise);
+    return promise;
+  }
+};
+
+// src/elements/daw-track-controls.ts
+import { LitElement as LitElement7, html as html6, css as css4 } from "lit";
+import { customElement as customElement9, property as property5 } from "lit/decorators.js";
+var DawTrackControlsElement = class extends LitElement7 {
+  constructor() {
+    super(...arguments);
+    this.trackId = null;
+    this.trackName = "";
+    this.volume = 1;
+    this.pan = 0;
+    this.muted = false;
+    this.soloed = false;
+    this._onVolumeInput = (e) => {
+      const value = Number(e.target.value);
+      if (Number.isFinite(value)) this._dispatchControl("volume", value);
+    };
+    this._onPanInput = (e) => {
+      const value = Number(e.target.value);
+      if (Number.isFinite(value)) this._dispatchControl("pan", value);
+    };
+    this._onMuteClick = () => {
+      this._dispatchControl("muted", !this.muted);
+    };
+    this._onSoloClick = () => {
+      this._dispatchControl("soloed", !this.soloed);
+    };
+    this._onRemoveClick = () => {
+      if (!this.trackId) return;
+      this.dispatchEvent(
+        new CustomEvent("daw-track-remove", {
+          bubbles: true,
+          composed: true,
+          detail: { trackId: this.trackId }
+        })
+      );
+    };
+  }
+  _dispatchControl(prop, value) {
+    if (!this.trackId) return;
+    this.dispatchEvent(
+      new CustomEvent("daw-track-control", {
+        bubbles: true,
+        composed: true,
+        detail: { trackId: this.trackId, prop, value }
+      })
+    );
+  }
+  render() {
+    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`
+      <div class="header">
+        <span class="name" title=${this.trackName}>${this.trackName || "Untitled"}</span>
+        <button class="remove-btn" @click=${this._onRemoveClick} title="Remove track">
+          &times;
+        </button>
+      </div>
+      <div class="buttons">
+        <button
+          class="btn ${this.muted ? "muted-active" : ""}"
+          @click=${this._onMuteClick}
+          title="Mute"
+        >
+          M
+        </button>
+        <button class="btn ${this.soloed ? "active" : ""}" @click=${this._onSoloClick} title="Solo">
+          S
+        </button>
+      </div>
+      <div class="slider-row">
+        <span class="slider-label">
+          <span class="slider-label-name">Vol</span>
+          <span class="slider-label-value">${volPercent}%</span>
+        </span>
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.01"
+          .value=${String(this.volume)}
+          @input=${this._onVolumeInput}
+        />
+      </div>
+      <div class="slider-row">
+        <span class="slider-label">
+          <span class="slider-label-name">Pan</span>
+          <span class="slider-label-value">${panDisplay}</span>
+        </span>
+        <input
+          type="range"
+          min="-1"
+          max="1"
+          step="0.01"
+          .value=${String(this.pan)}
+          @input=${this._onPanInput}
+        />
+      </div>
+    `;
+  }
+};
+DawTrackControlsElement.styles = css4`
+    :host {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      box-sizing: border-box;
+      padding: 6px 8px;
+      background: var(--daw-controls-background, #0f0f1a);
+      color: var(--daw-controls-text, #c49a6c);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+      font-family: system-ui, sans-serif;
+      font-size: 11px;
+    }
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 4px;
+      margin-bottom: 6px;
+    }
+    .name {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-weight: 600;
+      font-size: 11px;
+    }
+    .remove-btn {
+      background: none;
+      border: none;
+      color: var(--daw-controls-text, #c49a6c);
+      cursor: pointer;
+      padding: 0 2px;
+      font-size: 14px;
+      line-height: 1;
+      opacity: 0.4;
+    }
+    .remove-btn:hover {
+      opacity: 1;
+      color: #d08070;
+    }
+    .buttons {
+      display: flex;
+      gap: 3px;
+      margin-bottom: 6px;
+    }
+    .btn {
+      background: rgba(255, 255, 255, 0.06);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 3px;
+      color: var(--daw-controls-text, #c49a6c);
+      cursor: pointer;
+      font-size: 10px;
+      font-weight: 600;
+      padding: 2px 8px;
+      text-align: center;
+    }
+    .btn:hover {
+      background: rgba(255, 255, 255, 0.12);
+    }
+    .btn.active {
+      background: rgba(99, 199, 95, 0.25);
+      border-color: rgba(99, 199, 95, 0.5);
+      color: #63c75f;
+    }
+    .btn.muted-active {
+      background: rgba(208, 128, 112, 0.25);
+      border-color: rgba(208, 128, 112, 0.5);
+      color: #d08070;
+    }
+    .slider-row {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      height: 20px;
+    }
+    .slider-label {
+      width: 50px;
+      font-size: 9px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      opacity: 0.6;
+      flex-shrink: 0;
+      display: flex;
+      justify-content: space-between;
+    }
+    .slider-label-name {
+      opacity: 0.5;
+    }
+    .slider-label-value {
+      font-family: 'Courier New', monospace;
+    }
+    input[type='range'] {
+      flex: 1;
+      min-width: 0;
+      height: 20px;
+      margin: 0;
+      -webkit-appearance: none;
+      appearance: none;
+      background: transparent;
+      cursor: pointer;
+    }
+    input[type='range']::-webkit-slider-runnable-track {
+      height: 3px;
+      background: rgba(255, 255, 255, 0.12);
+      border-radius: 2px;
+    }
+    input[type='range']::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: var(--daw-controls-text, #c49a6c);
+      margin-top: -4.5px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+    }
+    input[type='range']::-moz-range-track {
+      height: 3px;
+      background: rgba(255, 255, 255, 0.12);
+      border-radius: 2px;
+      border: none;
+    }
+    input[type='range']::-moz-range-thumb {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: var(--daw-controls-text, #c49a6c);
+      border: none;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+    }
+  `;
+__decorateClass([
+  property5({ attribute: false })
+], DawTrackControlsElement.prototype, "trackId", 2);
+__decorateClass([
+  property5({ attribute: false })
+], DawTrackControlsElement.prototype, "trackName", 2);
+__decorateClass([
+  property5({ type: Number, attribute: false })
+], DawTrackControlsElement.prototype, "volume", 2);
+__decorateClass([
+  property5({ type: Number, attribute: false })
+], DawTrackControlsElement.prototype, "pan", 2);
+__decorateClass([
+  property5({ type: Boolean, attribute: false })
+], DawTrackControlsElement.prototype, "muted", 2);
+__decorateClass([
+  property5({ type: Boolean, attribute: false })
+], DawTrackControlsElement.prototype, "soloed", 2);
+DawTrackControlsElement = __decorateClass([
+  customElement9("daw-track-controls")
+], DawTrackControlsElement);
+
+// src/styles/theme.ts
+import { css as css5 } from "lit";
+var hostStyles = css5`
+  :host {
+    --daw-wave-color: #c49a6c;
+    --daw-progress-color: #63c75f;
+    --daw-playhead-color: #d08070;
+    --daw-background: #1a1a2e;
+    --daw-track-background: #16213e;
+    --daw-ruler-color: #c49a6c;
+    --daw-ruler-background: #0f0f1a;
+    --daw-controls-background: #1a1a2e;
+    --daw-controls-text: #e0d4c8;
+    --daw-selection-color: rgba(99, 199, 95, 0.3);
+    --daw-clip-header-background: rgba(0, 0, 0, 0.4);
+    --daw-clip-header-text: #e0d4c8;
+  }
+`;
+
+// src/controllers/viewport-controller.ts
+var OVERSCAN_MULTIPLIER = 1.5;
+var SCROLL_THRESHOLD = 100;
+var ViewportController = class {
+  constructor(host) {
+    this._scrollContainer = null;
+    this._lastScrollLeft = 0;
+    // Permissive defaults: render everything until scroll container is attached
+    this.visibleStart = -Infinity;
+    this.visibleEnd = Infinity;
+    this.containerWidth = 0;
+    /** CSS selector for the scroll container inside the host's Shadow DOM. */
+    this.scrollSelector = "";
+    this._onScroll = () => {
+      if (!this._scrollContainer) return;
+      const { scrollLeft, clientWidth } = this._scrollContainer;
+      if (Math.abs(scrollLeft - this._lastScrollLeft) >= SCROLL_THRESHOLD) {
+        this._update(scrollLeft, clientWidth);
+        this._host.requestUpdate();
+      }
+    };
+    this._host = host;
+    host.addController(this);
+  }
+  hostConnected() {
+    requestAnimationFrame(() => {
+      if (!this._host.isConnected) return;
+      const container = this.scrollSelector ? this._host.shadowRoot?.querySelector(this.scrollSelector) : this._host;
+      if (container) {
+        this._attachScrollContainer(container);
+      } else if (this.scrollSelector) {
+        console.warn(
+          '[dawcore] ViewportController: scroll container not found for "' + this.scrollSelector + '"'
+        );
+      }
+    });
+  }
+  hostDisconnected() {
+    this._scrollContainer?.removeEventListener("scroll", this._onScroll);
+    this._scrollContainer = null;
+  }
+  _attachScrollContainer(container) {
+    this._scrollContainer?.removeEventListener("scroll", this._onScroll);
+    this._scrollContainer = container;
+    container.addEventListener("scroll", this._onScroll, { passive: true });
+    this._update(container.scrollLeft, container.clientWidth);
+    this._host.requestUpdate();
+  }
+  _update(scrollLeft, containerWidth) {
+    this._lastScrollLeft = scrollLeft;
+    this.containerWidth = containerWidth;
+    const buffer = containerWidth * OVERSCAN_MULTIPLIER;
+    this.visibleStart = scrollLeft - buffer;
+    this.visibleEnd = scrollLeft + containerWidth + buffer;
+  }
+};
+
+// src/controllers/audio-resume-controller.ts
+import { resumeGlobalAudioContext } from "@waveform-playlist/playout";
+var AudioResumeController = class {
+  constructor(host) {
+    this._target = null;
+    this._attached = false;
+    this._generation = 0;
+    this._onGesture = (e) => {
+      resumeGlobalAudioContext().catch((err) => {
+        console.warn(
+          "[dawcore] AudioResumeController: eager resume failed, will retry on play: " + String(err)
+        );
+      });
+      const otherType = e.type === "pointerdown" ? "keydown" : "pointerdown";
+      this._target?.removeEventListener(otherType, this._onGesture, {
+        capture: true
+      });
+      this._target = null;
+    };
+    this._host = host;
+    host.addController(this);
+  }
+  hostConnected() {
+    const gen = ++this._generation;
+    requestAnimationFrame(() => {
+      if (gen !== this._generation) return;
+      if (!this._host.isConnected || this._attached || this.target === void 0) return;
+      let resolvedTarget;
+      try {
+        resolvedTarget = this._resolveTarget();
+      } catch (err) {
+        console.warn(
+          '[dawcore] AudioResumeController: failed to resolve target "' + this.target + '": ' + String(err)
+        );
+        return;
+      }
+      if (!resolvedTarget) return;
+      this._target = resolvedTarget;
+      this._attached = true;
+      resolvedTarget.addEventListener("pointerdown", this._onGesture, {
+        once: true,
+        capture: true
+      });
+      resolvedTarget.addEventListener("keydown", this._onGesture, {
+        once: true,
+        capture: true
+      });
+    });
+  }
+  hostDisconnected() {
+    this._removeListeners();
+    this._attached = false;
+  }
+  _resolveTarget() {
+    const t = this.target;
+    if (t === void 0) return null;
+    if (t === "") return this._host;
+    if (t === "document") return document;
+    const el = document.querySelector(t);
+    if (!el) {
+      console.warn(
+        '[dawcore] AudioResumeController: target "' + t + '" not found in DOM at attach time, falling back to host element. Ensure the target exists before <daw-editor> connects.'
+      );
+      return this._host;
+    }
+    return el;
+  }
+  _removeListeners() {
+    if (!this._target) return;
+    this._target.removeEventListener("pointerdown", this._onGesture, {
+      capture: true
+    });
+    this._target.removeEventListener("keydown", this._onGesture, {
+      capture: true
+    });
+    this._target = null;
+  }
+};
+
+// src/controllers/recording-controller.ts
+import { getGlobalContext } from "@waveform-playlist/playout";
+import { recordingProcessorUrl } from "@waveform-playlist/worklets";
+import { appendPeaks, concatenateAudioData, createAudioBuffer } from "@waveform-playlist/recording";
+var RecordingController = class {
+  constructor(host) {
+    this._sessions = /* @__PURE__ */ new Map();
+    this._workletLoaded = false;
+    this._host = host;
+    host.addController(this);
+  }
+  hostConnected() {
+  }
+  hostDisconnected() {
+    for (const trackId of [...this._sessions.keys()]) {
+      this._cleanupSession(trackId);
+    }
+  }
+  get isRecording() {
+    return this._sessions.size > 0;
+  }
+  getSession(trackId) {
+    return this._sessions.get(trackId);
+  }
+  async startRecording(stream, options = {}) {
+    const trackId = options.trackId ?? this._host._selectedTrackId;
+    if (!trackId) {
+      console.warn("[dawcore] RecordingController: No track selected for recording");
+      return;
+    }
+    if (this._sessions.has(trackId)) {
+      console.warn('[dawcore] RecordingController: Already recording on track "' + trackId + '"');
+      return;
+    }
+    const bits = options.bits ?? 16;
+    const context = getGlobalContext();
+    const rawCtx = context.rawContext;
+    this._host.resolveAudioContextSampleRate(rawCtx.sampleRate);
+    try {
+      if (!this._workletLoaded) {
+        await rawCtx.audioWorklet.addModule(recordingProcessorUrl);
+        this._workletLoaded = true;
+      }
+      const channelCount = stream.getAudioTracks()[0]?.getSettings()?.channelCount ?? 1;
+      const startSample = options.startSample ?? Math.floor(this._host._currentTime * this._host.effectiveSampleRate);
+      const source = context.createMediaStreamSource(stream);
+      const workletNode = context.createAudioWorkletNode("recording-processor", {
+        channelCount,
+        channelCountMode: "explicit"
+      });
+      const audioTrack = stream.getAudioTracks()[0] ?? null;
+      const onTrackEnded = audioTrack ? () => {
+        if (this._sessions.has(trackId)) {
+          this.stopRecording(trackId);
+        }
+      } : null;
+      const session = {
+        trackId,
+        stream,
+        source,
+        workletNode,
+        chunks: Array.from({ length: channelCount }, () => []),
+        totalSamples: 0,
+        peaks: Array.from(
+          { length: channelCount },
+          () => bits === 8 ? new Int8Array(0) : new Int16Array(0)
+        ),
+        startSample,
+        channelCount,
+        bits,
+        isFirstMessage: true,
+        _onTrackEnded: onTrackEnded,
+        _audioTrack: audioTrack
+      };
+      this._sessions.set(trackId, session);
+      workletNode.port.onmessage = (e) => {
+        this._onWorkletMessage(trackId, e.data);
+      };
+      source.connect(workletNode);
+      workletNode.port.postMessage({ command: "start", channelCount });
+      if (audioTrack && onTrackEnded) {
+        audioTrack.addEventListener("ended", onTrackEnded);
+      }
+      this._host.dispatchEvent(
+        new CustomEvent("daw-recording-start", {
+          bubbles: true,
+          composed: true,
+          detail: { trackId, stream }
+        })
+      );
+      this._host.requestUpdate();
+    } catch (err) {
+      this._cleanupSession(trackId);
+      console.warn("[dawcore] RecordingController: Failed to start recording: " + String(err));
+      this._host.dispatchEvent(
+        new CustomEvent("daw-recording-error", {
+          bubbles: true,
+          composed: true,
+          detail: { trackId, error: err }
+        })
+      );
+    }
+  }
+  stopRecording(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: "stop" });
+    session.source.disconnect();
+    session.workletNode.disconnect();
+    this._removeTrackEndedListener(session);
+    if (session.totalSamples === 0) {
+      console.warn("[dawcore] RecordingController: No audio data captured");
+      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("No audio data captured") }
+        })
+      );
+      return;
+    }
+    const stopCtx = getGlobalContext().rawContext;
+    const channelData = session.chunks.map((chunkArr) => concatenateAudioData(chunkArr));
+    const audioBuffer = createAudioBuffer(
+      stopCtx,
+      channelData,
+      this._host.effectiveSampleRate,
+      session.channelCount
+    );
+    const durationSamples = audioBuffer.length;
+    const event = new CustomEvent("daw-recording-complete", {
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+      detail: {
+        trackId: id,
+        audioBuffer,
+        startSample: session.startSample,
+        durationSamples
+      }
+    });
+    const notPrevented = this._host.dispatchEvent(event);
+    this._sessions.delete(id);
+    this._host.requestUpdate();
+    if (notPrevented) {
+      this._createClipFromRecording(id, audioBuffer, session.startSample, durationSamples);
+    }
+  }
+  // Session fields are mutated in place on the hot path (~60fps worklet messages).
+  // This is intentional — creating new session objects + Map entries per message
+  // would cause significant GC pressure. Mutations are confined to the controller's
+  // private map and do not affect Lit's reactive rendering.
+  _onWorkletMessage(trackId, data) {
+    const session = this._sessions.get(trackId);
+    if (!session) return;
+    const { channels } = data;
+    if (!channels || channels.length === 0 || !channels[0]) return;
+    const samplesProcessedBefore = session.totalSamples;
+    for (let ch = 0; ch < session.channelCount; ch++) {
+      if (channels[ch]) {
+        session.chunks[ch].push(channels[ch]);
+      }
+    }
+    session.totalSamples += channels[0].length;
+    for (let ch = 0; ch < session.channelCount; ch++) {
+      if (!channels[ch]) continue;
+      const oldPeakCount = Math.floor(session.peaks[ch].length / 2);
+      session.peaks[ch] = appendPeaks(
+        session.peaks[ch],
+        channels[ch],
+        this._host.samplesPerPixel,
+        samplesProcessedBefore,
+        session.bits
+      );
+      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);
+      if (waveformEl) {
+        if (session.isFirstMessage) {
+          waveformEl.peaks = session.peaks[ch];
+        } else {
+          waveformEl.setPeaksQuiet(session.peaks[ch]);
+          waveformEl.updatePeaks(Math.max(0, oldPeakCount - 1), newPeakCount);
+        }
+      }
+    }
+    session.isFirstMessage = false;
+    const newPixelWidth = Math.floor(session.totalSamples / this._host.samplesPerPixel);
+    const oldPixelWidth = Math.floor(
+      (session.totalSamples - channels[0].length) / this._host.samplesPerPixel
+    );
+    if (newPixelWidth > oldPixelWidth) {
+      this._host.requestUpdate();
+    }
+  }
+  _createClipFromRecording(trackId, audioBuffer, startSample, durationSamples) {
+    if (typeof this._host._addRecordedClip === "function") {
+      this._host._addRecordedClip(trackId, audioBuffer, startSample, durationSamples);
+    } else {
+      console.warn(
+        '[dawcore] RecordingController: host does not implement _addRecordedClip \u2014 clip not created for track "' + trackId + '"'
+      );
+    }
+  }
+  _removeTrackEndedListener(session) {
+    if (session._audioTrack && session._onTrackEnded) {
+      session._audioTrack.removeEventListener("ended", session._onTrackEnded);
+    }
+  }
+  _cleanupSession(trackId) {
+    const session = this._sessions.get(trackId);
+    if (!session) return;
+    try {
+      this._removeTrackEndedListener(session);
+      session.workletNode.port.postMessage({ command: "stop" });
+      session.source.disconnect();
+      session.workletNode.disconnect();
+    } catch (err) {
+      console.warn(
+        '[dawcore] RecordingController: disconnect error during cleanup for track "' + trackId + '": ' + String(err)
+      );
+    }
+    this._sessions.delete(trackId);
+  }
+};
+
+// src/interactions/pointer-handler.ts
+import { pixelsToSeconds } from "@waveform-playlist/core";
+var PointerHandler = class {
+  constructor(host) {
+    this._isDragging = false;
+    this._dragStartPx = 0;
+    this._timeline = null;
+    // Cached from onPointerDown to avoid forced layout reflows at 60fps during drag
+    this._timelineRect = null;
+    this.onPointerDown = (e) => {
+      this._timeline = this._host.shadowRoot?.querySelector(".timeline");
+      if (!this._timeline) return;
+      this._timelineRect = this._timeline.getBoundingClientRect();
+      this._dragStartPx = this._pxFromPointer(e);
+      this._isDragging = false;
+      this._timeline.setPointerCapture(e.pointerId);
+      this._timeline.addEventListener("pointermove", this._onPointerMove);
+      this._timeline.addEventListener("pointerup", this._onPointerUp);
+    };
+    this._onPointerMove = (e) => {
+      if (!this._timeline) return;
+      const currentPx = this._pxFromPointer(e);
+      if (!this._isDragging && Math.abs(currentPx - this._dragStartPx) > 3) {
+        this._isDragging = true;
+      }
+      if (this._isDragging) {
+        const h = this._host;
+        const startTime = pixelsToSeconds(
+          this._dragStartPx,
+          h.samplesPerPixel,
+          h.effectiveSampleRate
+        );
+        const endTime = pixelsToSeconds(currentPx, h.samplesPerPixel, h.effectiveSampleRate);
+        h._selectionStartTime = Math.min(startTime, endTime);
+        h._selectionEndTime = Math.max(startTime, endTime);
+        const sel = h.shadowRoot?.querySelector("daw-selection");
+        if (sel) {
+          sel.startPx = h._selectionStartTime * h.effectiveSampleRate / h.samplesPerPixel;
+          sel.endPx = h._selectionEndTime * h.effectiveSampleRate / h.samplesPerPixel;
+        }
+      }
+    };
+    this._onPointerUp = (e) => {
+      if (!this._timeline) return;
+      try {
+        this._timeline.releasePointerCapture(e.pointerId);
+      } catch (err) {
+        console.warn(
+          "[dawcore] releasePointerCapture failed (may already be released): " + String(err)
+        );
+      }
+      this._timeline.removeEventListener("pointermove", this._onPointerMove);
+      this._timeline.removeEventListener("pointerup", this._onPointerUp);
+      try {
+        if (this._isDragging) {
+          this._finalizeSelection();
+        } else {
+          this._handleSeekClick(e);
+        }
+      } catch (err) {
+        console.warn("[dawcore] Pointer interaction failed: " + String(err));
+      } finally {
+        this._isDragging = false;
+        this._timeline = null;
+        this._timelineRect = null;
+      }
+    };
+    this._host = host;
+  }
+  _pxFromPointer(e) {
+    if (!this._timelineRect) {
+      console.warn("[dawcore] _pxFromPointer called without timeline reference");
+      return 0;
+    }
+    return e.clientX - this._timelineRect.left;
+  }
+  _finalizeSelection() {
+    const h = this._host;
+    if (h._engine) {
+      h._engine.setSelection(h._selectionStartTime, h._selectionEndTime);
+    }
+    h.dispatchEvent(
+      new CustomEvent("daw-selection", {
+        bubbles: true,
+        composed: true,
+        detail: { start: h._selectionStartTime, end: h._selectionEndTime }
+      })
+    );
+    h.requestUpdate();
+  }
+  _handleSeekClick(e) {
+    const h = this._host;
+    const px = this._pxFromPointer(e);
+    const time = pixelsToSeconds(px, h.samplesPerPixel, h.effectiveSampleRate);
+    h._selectionStartTime = 0;
+    h._selectionEndTime = 0;
+    if (this._timeline) {
+      const trackRows = this._timeline.querySelectorAll(".track-row");
+      for (const row of trackRows) {
+        const rowRect = row.getBoundingClientRect();
+        if (e.clientY >= rowRect.top && e.clientY < rowRect.bottom) {
+          const trackId = row.dataset.trackId;
+          if (trackId) {
+            this._selectTrack(trackId);
+          }
+          break;
+        }
+      }
+    }
+    const wasPlaying = h._isPlaying;
+    if (h._engine) {
+      h._engine.setSelection(0, 0);
+      if (wasPlaying) {
+        h._engine.stop();
+        h._engine.play(time);
+        h._startPlayhead();
+      } else {
+        h._engine.seek(time);
+      }
+    }
+    h._currentTime = time;
+    if (!wasPlaying) {
+      h._stopPlayhead();
+    }
+    h.dispatchEvent(
+      new CustomEvent("daw-seek", {
+        bubbles: true,
+        composed: true,
+        detail: { time }
+      })
+    );
+    h.requestUpdate();
+  }
+  _selectTrack(trackId) {
+    const h = this._host;
+    if (h._engine) {
+      try {
+        h._engine.selectTrack(trackId);
+      } catch (err) {
+        console.warn(
+          "[dawcore] selectTrack via engine failed, falling back to local: " + String(err)
+        );
+        h._setSelectedTrackId(trackId);
+      }
+    } else {
+      h._setSelectedTrackId(trackId);
+    }
+    h.dispatchEvent(
+      new CustomEvent("daw-track-select", {
+        bubbles: true,
+        composed: true,
+        detail: { trackId }
+      })
+    );
+  }
+};
+
+// src/interactions/file-loader.ts
+import { createClipFromSeconds, createTrack } from "@waveform-playlist/core";
+async function loadFiles(host, files) {
+  if (!files) {
+    console.warn("[dawcore] loadFiles called with null/undefined");
+    return { loaded: [], failed: [] };
+  }
+  const fileArray = Array.from(files);
+  const loaded = [];
+  const failed = [];
+  for (const file of fileArray) {
+    if (file.type && !file.type.startsWith("audio/")) {
+      failed.push({ file, error: new Error("Non-audio MIME type: " + file.type) });
+      console.warn("[dawcore] Skipping non-audio file: " + file.name + " (" + file.type + ")");
+      continue;
+    }
+    const blobUrl = URL.createObjectURL(file);
+    try {
+      const audioBuffer = await host._fetchAndDecode(blobUrl);
+      URL.revokeObjectURL(blobUrl);
+      host._audioCache.delete(blobUrl);
+      host._resolvedSampleRate = audioBuffer.sampleRate;
+      const name = file.name.replace(/\.\w+$/, "");
+      const clip = createClipFromSeconds({
+        audioBuffer,
+        startTime: 0,
+        duration: audioBuffer.duration,
+        offset: 0,
+        gain: 1,
+        name,
+        sampleRate: audioBuffer.sampleRate,
+        sourceDuration: audioBuffer.duration
+      });
+      host._clipBuffers = new Map(host._clipBuffers).set(clip.id, audioBuffer);
+      const peakData = await host._peakPipeline.generatePeaks(
+        audioBuffer,
+        host.samplesPerPixel,
+        host.mono
+      );
+      host._peaksData = new Map(host._peaksData).set(clip.id, peakData);
+      const trackId = crypto.randomUUID();
+      const track = createTrack({ name, clips: [clip] });
+      track.id = trackId;
+      host._tracks = new Map(host._tracks).set(trackId, {
+        name,
+        src: "",
+        volume: 1,
+        pan: 0,
+        muted: false,
+        soloed: false,
+        clips: [
+          {
+            src: "",
+            start: 0,
+            duration: audioBuffer.duration,
+            offset: 0,
+            gain: 1,
+            name,
+            fadeIn: 0,
+            fadeOut: 0,
+            fadeType: "linear"
+          }
+        ]
+      });
+      host._engineTracks = new Map(host._engineTracks).set(trackId, track);
+      host._recomputeDuration();
+      const engine = await host._ensureEngine();
+      engine.setTracks([...host._engineTracks.values()]);
+      loaded.push(trackId);
+      host.dispatchEvent(
+        new CustomEvent("daw-track-ready", {
+          bubbles: true,
+          composed: true,
+          detail: { trackId }
+        })
+      );
+    } catch (err) {
+      URL.revokeObjectURL(blobUrl);
+      console.warn("[dawcore] Failed to load file: " + file.name + " \u2014 " + String(err));
+      failed.push({ file, error: err });
+      if (host.isConnected) {
+        host.dispatchEvent(
+          new CustomEvent("daw-files-load-error", {
+            bubbles: true,
+            composed: true,
+            detail: { file, error: err }
+          })
+        );
+      }
+    }
+  }
+  return { loaded, failed };
+}
+
+// src/interactions/recording-clip.ts
+import { createClip } from "@waveform-playlist/core";
+function addRecordedClip(host, trackId, buf, startSample, durSamples) {
+  const clip = createClip({
+    audioBuffer: buf,
+    startSample,
+    durationSamples: durSamples,
+    offsetSamples: 0,
+    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._peaksData = new Map(host._peaksData).set(clip.id, pd);
+    const t = host._engineTracks.get(trackId);
+    if (!t) {
+      const next = new Map(host._clipBuffers);
+      next.delete(clip.id);
+      host._clipBuffers = next;
+      return;
+    }
+    host._engineTracks = new Map(host._engineTracks).set(trackId, {
+      ...t,
+      clips: [...t.clips, clip]
+    });
+    const desc = host._tracks.get(trackId);
+    if (desc) {
+      const sr = host.effectiveSampleRate;
+      const clipDesc = {
+        src: "",
+        start: startSample / sr,
+        duration: durSamples / sr,
+        offset: 0,
+        gain: 1,
+        name: "Recording",
+        fadeIn: 0,
+        fadeOut: 0,
+        fadeType: "linear"
+      };
+      host._tracks = new Map(host._tracks).set(trackId, {
+        ...desc,
+        clips: [...desc.clips, clipDesc]
+      });
+    }
+    host._recomputeDuration();
+    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);
+    next.delete(clip.id);
+    host._clipBuffers = next;
+    if (host.isConnected) {
+      host.dispatchEvent(
+        new CustomEvent("daw-error", {
+          bubbles: true,
+          composed: true,
+          detail: { operation: "recording-peaks", error: err }
+        })
+      );
+    }
+  });
+}
+
+// src/elements/daw-editor.ts
+var DawEditorElement = class extends LitElement8 {
+  constructor() {
+    super(...arguments);
+    this.samplesPerPixel = 1024;
+    this.waveHeight = 128;
+    this.timescale = false;
+    this.mono = false;
+    this.barWidth = 1;
+    this.barGap = 0;
+    this.fileDrop = false;
+    this.sampleRate = 48e3;
+    /** Resolved sample rate — falls back to sampleRate property until first audio decode. */
+    this._resolvedSampleRate = null;
+    this._tracks = /* @__PURE__ */ new Map();
+    this._engineTracks = /* @__PURE__ */ new Map();
+    this._peaksData = /* @__PURE__ */ new Map();
+    this._isPlaying = false;
+    this._duration = 0;
+    this._selectedTrackId = null;
+    this._dragOver = false;
+    // Not @state — updated directly to avoid 60fps Lit re-renders
+    this._selectionStartTime = 0;
+    this._selectionEndTime = 0;
+    this._currentTime = 0;
+    this._engine = null;
+    this._enginePromise = null;
+    this._audioInitialized = false;
+    this._audioCache = /* @__PURE__ */ new Map();
+    this._clipBuffers = /* @__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._pointer = new PointerHandler(this);
+    this._viewport = (() => {
+      const v = new ViewportController(this);
+      v.scrollSelector = ".scroll-area";
+      return v;
+    })();
+    // --- Track Events ---
+    this._onTrackConnected = (e) => {
+      const trackId = e.detail?.trackId;
+      const trackEl = e.detail?.element;
+      if (!trackId || !(trackEl instanceof HTMLElement)) {
+        console.warn("[dawcore] Invalid daw-track-connected event detail: " + String(e.detail));
+        return;
+      }
+      const descriptor = this._readTrackDescriptor(trackEl);
+      this._tracks = new Map(this._tracks).set(trackId, descriptor);
+      this._trackElements.set(trackId, trackEl);
+      this._loadTrack(trackId, descriptor);
+    };
+    this._onTrackUpdate = (e) => {
+      const trackId = e.detail?.trackId;
+      if (!trackId) return;
+      const trackEl = e.target.closest("daw-track");
+      if (!trackEl) return;
+      const oldDescriptor = this._tracks.get(trackId);
+      const descriptor = this._readTrackDescriptor(trackEl);
+      this._tracks = new Map(this._tracks).set(trackId, descriptor);
+      if (this._engine) {
+        if (oldDescriptor?.volume !== descriptor.volume)
+          this._engine.setTrackVolume(trackId, descriptor.volume);
+        if (oldDescriptor?.pan !== descriptor.pan) this._engine.setTrackPan(trackId, descriptor.pan);
+        if (oldDescriptor?.muted !== descriptor.muted)
+          this._engine.setTrackMute(trackId, descriptor.muted);
+        if (oldDescriptor?.soloed !== descriptor.soloed)
+          this._engine.setTrackSolo(trackId, descriptor.soloed);
+      }
+      if (oldDescriptor?.src !== descriptor.src) {
+        this._loadTrack(trackId, descriptor);
+      }
+    };
+    this._onTrackControl = (e) => {
+      const { trackId, prop, value } = e.detail ?? {};
+      if (!trackId || !prop || !DawEditorElement._CONTROL_PROPS.has(prop)) return;
+      const oldDescriptor = this._tracks.get(trackId);
+      if (oldDescriptor) {
+        const descriptor = { ...oldDescriptor, [prop]: value };
+        this._tracks = new Map(this._tracks).set(trackId, descriptor);
+        if (this._engine) {
+          if (prop === "volume")
+            this._engine.setTrackVolume(trackId, Math.max(0, Math.min(1, Number(value))));
+          if (prop === "pan")
+            this._engine.setTrackPan(trackId, Math.max(-1, Math.min(1, Number(value))));
+          if (prop === "muted") this._engine.setTrackMute(trackId, Boolean(value));
+          if (prop === "soloed") this._engine.setTrackSolo(trackId, Boolean(value));
+        }
+      }
+    };
+    this._onTrackRemoveRequest = (e) => {
+      const { trackId } = e.detail ?? {};
+      if (!trackId) return;
+      const trackEl = this._trackElements.get(trackId);
+      if (trackEl) {
+        trackEl.remove();
+      } else {
+        this._onTrackRemoved(trackId);
+      }
+    };
+    // --- File Drop ---
+    this._onDragOver = (e) => {
+      if (!this.fileDrop) return;
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+      this._dragOver = true;
+    };
+    this._onDragLeave = (e) => {
+      if (!this.fileDrop) return;
+      const timeline = this.shadowRoot?.querySelector(".timeline");
+      if (timeline && !timeline.contains(e.relatedTarget)) {
+        this._dragOver = false;
+      }
+    };
+    this._onDrop = async (e) => {
+      if (!this.fileDrop) return;
+      e.preventDefault();
+      this._dragOver = false;
+      const files = e.dataTransfer?.files;
+      if (!files || files.length === 0) return;
+      try {
+        await this.loadFiles(files);
+      } catch (err) {
+        console.warn("[dawcore] File drop failed: " + String(err));
+        this.dispatchEvent(
+          new CustomEvent("daw-error", {
+            bubbles: true,
+            composed: true,
+            detail: { operation: "file-drop", error: err }
+          })
+        );
+      }
+    };
+    // --- Recording ---
+    this.recordingStream = null;
+  }
+  get effectiveSampleRate() {
+    return this._resolvedSampleRate ?? this.sampleRate;
+  }
+  resolveAudioContextSampleRate(rate) {
+    if (!this._resolvedSampleRate) this._resolvedSampleRate = rate;
+  }
+  get _totalWidth() {
+    return Math.ceil(this._duration * this.effectiveSampleRate / this.samplesPerPixel);
+  }
+  _setSelectedTrackId(trackId) {
+    this._selectedTrackId = trackId;
+  }
+  get tracks() {
+    return [...this._tracks.values()];
+  }
+  get selectedTrackId() {
+    return this._selectedTrackId;
+  }
+  get selection() {
+    if (this._selectionStartTime === 0 && this._selectionEndTime === 0) return null;
+    return { start: this._selectionStartTime, end: this._selectionEndTime };
+  }
+  setSelection(start, end) {
+    this._selectionStartTime = Math.min(start, end);
+    this._selectionEndTime = Math.max(start, end);
+    if (this._engine) {
+      this._engine.setSelection(this._selectionStartTime, this._selectionEndTime);
+    }
+    this.requestUpdate();
+    this.dispatchEvent(
+      new CustomEvent("daw-selection", {
+        bubbles: true,
+        composed: true,
+        detail: { start: this._selectionStartTime, end: this._selectionEndTime }
+      })
+    );
+  }
+  // --- Lifecycle ---
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("daw-track-connected", this._onTrackConnected);
+    this.addEventListener("daw-track-update", this._onTrackUpdate);
+    this.addEventListener("daw-track-control", this._onTrackControl);
+    this.addEventListener("daw-track-remove", this._onTrackRemoveRequest);
+    this._childObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        for (const node of mutation.removedNodes) {
+          if (node instanceof HTMLElement) {
+            if (node.tagName === "DAW-TRACK") {
+              this._onTrackRemoved(node.trackId);
+            }
+            const nested = node.querySelectorAll?.("daw-track");
+            if (nested) {
+              for (const track of nested) {
+                this._onTrackRemoved(track.trackId);
+              }
+            }
+          }
+        }
+      }
+    });
+    this._childObserver.observe(this, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("daw-track-connected", this._onTrackConnected);
+    this.removeEventListener("daw-track-update", this._onTrackUpdate);
+    this.removeEventListener("daw-track-control", this._onTrackControl);
+    this.removeEventListener("daw-track-remove", this._onTrackRemoveRequest);
+    this._childObserver?.disconnect();
+    this._childObserver = null;
+    this._trackElements.clear();
+    this._audioCache.clear();
+    this._clipBuffers.clear();
+    this._peakPipeline.terminate();
+    try {
+      this._disposeEngine();
+    } catch (err) {
+      console.warn("[dawcore] Error disposing engine: " + String(err));
+    }
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("eagerResume")) {
+      this._audioResume.target = this.eagerResume;
+    }
+    if (changedProperties.has("samplesPerPixel") && this._clipBuffers.size > 0) {
+      const reextracted = this._peakPipeline.reextractPeaks(
+        this._clipBuffers,
+        this.samplesPerPixel,
+        this.mono
+      );
+      if (reextracted.size > 0) {
+        const next = new Map(this._peaksData);
+        for (const [clipId, peakData] of reextracted) {
+          next.set(clipId, peakData);
+        }
+        this._peaksData = next;
+      }
+    }
+  }
+  _onTrackRemoved(trackId) {
+    this._trackElements.delete(trackId);
+    const removedTrack = this._engineTracks.get(trackId);
+    if (removedTrack) {
+      const nextPeaks = new Map(this._peaksData);
+      for (const clip of removedTrack.clips) {
+        this._clipBuffers.delete(clip.id);
+        nextPeaks.delete(clip.id);
+      }
+      this._peaksData = nextPeaks;
+    }
+    const nextTracks = new Map(this._tracks);
+    nextTracks.delete(trackId);
+    this._tracks = nextTracks;
+    const nextEngine = new Map(this._engineTracks);
+    nextEngine.delete(trackId);
+    this._engineTracks = nextEngine;
+    this._recomputeDuration();
+    if (this._engine) {
+      this._engine.removeTrack(trackId);
+    }
+    if (nextEngine.size === 0) {
+      this._currentTime = 0;
+      this._stopPlayhead();
+    }
+  }
+  _readTrackDescriptor(trackEl) {
+    const clipEls = trackEl.querySelectorAll("daw-clip");
+    const clips = [];
+    if (clipEls.length === 0 && trackEl.src) {
+      clips.push({
+        src: trackEl.src,
+        start: 0,
+        duration: 0,
+        offset: 0,
+        gain: 1,
+        name: trackEl.name || "",
+        fadeIn: 0,
+        fadeOut: 0,
+        fadeType: "linear"
+      });
+    } else {
+      for (const clipEl of clipEls) {
+        clips.push({
+          src: clipEl.src,
+          start: clipEl.start,
+          duration: clipEl.duration,
+          offset: clipEl.offset,
+          gain: clipEl.gain,
+          name: clipEl.name,
+          fadeIn: clipEl.fadeIn,
+          fadeOut: clipEl.fadeOut,
+          fadeType: clipEl.fadeType
+        });
+      }
+    }
+    return {
+      name: trackEl.name || "Untitled",
+      src: trackEl.src,
+      volume: trackEl.volume,
+      pan: trackEl.pan,
+      muted: trackEl.muted,
+      soloed: trackEl.soloed,
+      clips
+    };
+  }
+  // --- Audio Loading ---
+  async _loadTrack(trackId, descriptor) {
+    try {
+      const clips = [];
+      for (const clipDesc of descriptor.clips) {
+        if (!clipDesc.src) continue;
+        const audioBuffer = await this._fetchAndDecode(clipDesc.src);
+        this._resolvedSampleRate = audioBuffer.sampleRate;
+        const clip = createClipFromSeconds2({
+          audioBuffer,
+          startTime: clipDesc.start,
+          duration: clipDesc.duration || audioBuffer.duration,
+          offset: clipDesc.offset,
+          gain: clipDesc.gain,
+          name: clipDesc.name,
+          sampleRate: audioBuffer.sampleRate,
+          sourceDuration: audioBuffer.duration
+        });
+        this._clipBuffers = new Map(this._clipBuffers).set(clip.id, audioBuffer);
+        const peakData = await this._peakPipeline.generatePeaks(
+          audioBuffer,
+          this.samplesPerPixel,
+          this.mono
+        );
+        this._peaksData = new Map(this._peaksData).set(clip.id, peakData);
+        clips.push(clip);
+      }
+      const track = createTrack2({
+        name: descriptor.name,
+        clips,
+        volume: descriptor.volume,
+        pan: descriptor.pan,
+        muted: descriptor.muted,
+        soloed: descriptor.soloed
+      });
+      track.id = trackId;
+      this._engineTracks = new Map(this._engineTracks).set(trackId, track);
+      this._recomputeDuration();
+      const engine = await this._ensureEngine();
+      engine.setTracks([...this._engineTracks.values()]);
+      this.dispatchEvent(
+        new CustomEvent("daw-track-ready", {
+          bubbles: true,
+          composed: true,
+          detail: { trackId }
+        })
+      );
+    } catch (err) {
+      if (!this.isConnected) return;
+      console.warn('[dawcore] Failed to load track "' + trackId + '": ' + String(err));
+      this.dispatchEvent(
+        new CustomEvent("daw-track-error", {
+          bubbles: true,
+          composed: true,
+          detail: { trackId, error: err }
+        })
+      );
+    }
+  }
+  async _fetchAndDecode(src) {
+    if (this._audioCache.has(src)) {
+      return this._audioCache.get(src);
+    }
+    const promise = (async () => {
+      const response = await fetch(src);
+      if (!response.ok) {
+        throw new Error(
+          'Failed to fetch audio "' + src + '": ' + response.status + " " + response.statusText
+        );
+      }
+      const arrayBuffer = await response.arrayBuffer();
+      const { getGlobalAudioContext } = await import("@waveform-playlist/playout");
+      return getGlobalAudioContext().decodeAudioData(arrayBuffer);
+    })();
+    this._audioCache.set(src, promise);
+    try {
+      return await promise;
+    } catch (err) {
+      this._audioCache.delete(src);
+      throw err;
+    }
+  }
+  _recomputeDuration() {
+    let maxSample = 0;
+    for (const track of this._engineTracks.values()) {
+      for (const clip of track.clips) {
+        const endSample = clip.startSample + clip.durationSamples;
+        if (endSample > maxSample) maxSample = endSample;
+      }
+    }
+    this._duration = maxSample / this.effectiveSampleRate;
+  }
+  // --- Engine ---
+  _ensureEngine() {
+    if (this._engine) return Promise.resolve(this._engine);
+    if (this._enginePromise) return this._enginePromise;
+    this._enginePromise = this._buildEngine().catch((err) => {
+      this._enginePromise = null;
+      throw err;
+    });
+    return this._enginePromise;
+  }
+  async _buildEngine() {
+    const [{ PlaylistEngine }, { createToneAdapter }] = await Promise.all([
+      import("@waveform-playlist/engine"),
+      import("@waveform-playlist/playout")
+    ]);
+    const adapter = createToneAdapter();
+    const engine = new PlaylistEngine({
+      adapter,
+      sampleRate: this.effectiveSampleRate,
+      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)
+    });
+    engine.on("statechange", (engineState) => {
+      this._isPlaying = engineState.isPlaying;
+      this._duration = engineState.duration;
+      this._selectedTrackId = engineState.selectedTrackId;
+    });
+    engine.on("timeupdate", (time) => {
+      this._currentTime = time;
+    });
+    engine.on("stop", () => {
+      this._currentTime = engine.getCurrentTime();
+      this._stopPlayhead();
+    });
+    this._engine = engine;
+    return engine;
+  }
+  _disposeEngine() {
+    if (this._engine) {
+      this._engine.dispose();
+      this._engine = null;
+    }
+    this._enginePromise = null;
+  }
+  async loadFiles(files) {
+    return loadFiles(this, files);
+  }
+  // --- Playback ---
+  async play() {
+    try {
+      const engine = await this._ensureEngine();
+      if (!this._audioInitialized) {
+        await engine.init();
+        this._audioInitialized = true;
+      }
+      engine.play();
+      this._startPlayhead();
+      this.dispatchEvent(new CustomEvent("daw-play", { bubbles: true, composed: true }));
+    } catch (err) {
+      console.warn("[dawcore] Playback failed: " + String(err));
+      this.dispatchEvent(
+        new CustomEvent("daw-error", {
+          bubbles: true,
+          composed: true,
+          detail: { operation: "play", error: err }
+        })
+      );
+    }
+  }
+  pause() {
+    if (!this._engine) return;
+    this._engine.pause();
+    this._stopPlayhead();
+    this.dispatchEvent(new CustomEvent("daw-pause", { bubbles: true, composed: true }));
+  }
+  stop() {
+    if (!this._engine) return;
+    this._engine.stop();
+    this._stopPlayhead();
+    this.dispatchEvent(new CustomEvent("daw-stop", { bubbles: true, composed: true }));
+  }
+  seekTo(time) {
+    if (!this._engine) return;
+    this._engine.seek(time);
+    this._currentTime = time;
+  }
+  get isRecording() {
+    return this._recordingController.isRecording;
+  }
+  stopRecording() {
+    this._recordingController.stopRecording();
+  }
+  _addRecordedClip(trackId, buf, startSample, durSamples) {
+    addRecordedClip(this, trackId, buf, startSample, durSamples);
+  }
+  async startRecording(stream, options) {
+    const s = stream ?? this.recordingStream;
+    if (!s) {
+      console.warn("[dawcore] startRecording: no stream provided and recordingStream is null");
+      return;
+    }
+    await this._recordingController.startRecording(s, options);
+  }
+  _renderRecordingPreview(trackId, chH) {
+    const rs = this._recordingController.getSession(trackId);
+    if (!rs) return "";
+    const left = Math.floor(rs.startSample / this.samplesPerPixel);
+    const w = Math.floor(rs.totalSamples / this.samplesPerPixel);
+    return rs.peaks.map(
+      (chPeaks, ch) => html7`
+        <daw-waveform
+          data-recording-track=${trackId}
+          data-recording-channel=${ch}
+          style="position:absolute;left:${left}px;top:${ch * chH}px;"
+          .peaks=${chPeaks}
+          .length=${w}
+          .waveHeight=${chH}
+          .barWidth=${this.barWidth}
+          .barGap=${this.barGap}
+          .visibleStart=${this._viewport.visibleStart}
+          .visibleEnd=${this._viewport.visibleEnd}
+          .originX=${left}
+        ></daw-waveform>
+      `
+    );
+  }
+  // --- Playhead ---
+  _startPlayhead() {
+    const playhead = this._getPlayhead();
+    if (!playhead || !this._engine) return;
+    const engine = this._engine;
+    playhead.startAnimation(
+      () => engine.getCurrentTime(),
+      this.effectiveSampleRate,
+      this.samplesPerPixel
+    );
+  }
+  _stopPlayhead() {
+    const playhead = this._getPlayhead();
+    if (!playhead) return;
+    playhead.stopAnimation(this._currentTime, this.effectiveSampleRate, this.samplesPerPixel);
+  }
+  _getPlayhead() {
+    return this.shadowRoot?.querySelector("daw-playhead");
+  }
+  _getOrderedTracks() {
+    const domOrder = [...this.querySelectorAll("daw-track")].map(
+      (el) => el.trackId
+    );
+    return [...this._engineTracks.entries()].sort((a, b) => {
+      const ai = domOrder.indexOf(a[0]);
+      const bi = domOrder.indexOf(b[0]);
+      if (ai === -1 && bi === -1) return 0;
+      if (ai === -1) return 1;
+      if (bi === -1) return -1;
+      return ai - bi;
+    });
+  }
+  // --- Render ---
+  render() {
+    const sr = this.effectiveSampleRate;
+    const selStartPx = this._selectionStartTime * sr / this.samplesPerPixel;
+    const selEndPx = this._selectionEndTime * sr / this.samplesPerPixel;
+    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;
+      return {
+        trackId,
+        track,
+        descriptor,
+        numChannels,
+        trackHeight: this.waveHeight * numChannels
+      };
+    });
+    return html7`
+      ${orderedTracks.length > 0 ? html7`<div class="controls-column">
+            ${this.timescale ? html7`<div style="height: 30px;"></div>` : ""}
+            ${orderedTracks.map(
+      (t) => html7`
+                <daw-track-controls
+                  style="height: ${t.trackHeight}px;"
+                  .trackId=${t.trackId}
+                  .trackName=${t.descriptor?.name ?? "Untitled"}
+                  .volume=${t.descriptor?.volume ?? 1}
+                  .pan=${t.descriptor?.pan ?? 0}
+                  .muted=${t.descriptor?.muted ?? false}
+                  .soloed=${t.descriptor?.soloed ?? false}
+                ></daw-track-controls>
+              `
+    )}
+          </div>` : ""}
+      <div class="scroll-area">
+        <div
+          class="timeline ${this._dragOver ? "drag-over" : ""}"
+          style="width: ${this._totalWidth > 0 ? this._totalWidth + "px" : "100%"};"
+          data-playing=${this._isPlaying}
+          @pointerdown=${this._pointer.onPointerDown}
+          @dragover=${this._onDragOver}
+          @dragleave=${this._onDragLeave}
+          @drop=${this._onDrop}
+        >
+          ${orderedTracks.length > 0 && this.timescale ? html7`<daw-ruler
+                .samplesPerPixel=${this.samplesPerPixel}
+                .sampleRate=${this.effectiveSampleRate}
+                .duration=${this._duration}
+              ></daw-ruler>` : ""}
+          ${orderedTracks.length > 0 ? html7`<daw-selection .startPx=${selStartPx} .endPx=${selEndPx}></daw-selection>
+                <daw-playhead></daw-playhead>` : ""}
+          ${orderedTracks.map((t) => {
+      const channelHeight = this.waveHeight;
+      return html7`
+              <div
+                class="track-row ${t.trackId === this._selectedTrackId ? "selected" : ""}"
+                style="height: ${t.trackHeight}px;"
+                data-track-id=${t.trackId}
+              >
+                ${t.track.clips.map((clip) => {
+        const peakData = this._peaksData.get(clip.id);
+        const width = clipPixelWidth(
+          clip.startSample,
+          clip.durationSamples,
+          this.samplesPerPixel
+        );
+        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>
+                    `
+        );
+      })}
+                ${this._renderRecordingPreview(t.trackId, channelHeight)}
+              </div>
+            `;
+    })}
+        </div>
+      </div>
+      <slot></slot>
+    `;
+  }
+};
+DawEditorElement.styles = [
+  hostStyles,
+  css6`
+      :host {
+        display: flex;
+        position: relative;
+        background: var(--daw-background, #1a1a2e);
+        overflow: hidden;
+      }
+      .controls-column {
+        flex-shrink: 0;
+        width: var(--daw-controls-width, 180px);
+      }
+      .scroll-area {
+        flex: 1;
+        overflow-x: auto;
+        overflow-y: hidden;
+        min-height: var(--daw-min-height, 200px);
+      }
+      .timeline {
+        position: relative;
+        min-height: 100%;
+        cursor: text;
+      }
+      .track-row {
+        position: relative;
+        background: var(--daw-track-background, #16213e);
+        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+      }
+      .track-row.selected {
+        background: rgba(99, 199, 95, 0.08);
+      }
+      .timeline.drag-over {
+        outline: 2px dashed var(--daw-selection-color, rgba(99, 199, 95, 0.3));
+        outline-offset: -2px;
+      }
+    `
+];
+DawEditorElement._CONTROL_PROPS = /* @__PURE__ */ new Set(["volume", "pan", "muted", "soloed"]);
+__decorateClass([
+  property6({ type: Number, attribute: "samples-per-pixel" })
+], DawEditorElement.prototype, "samplesPerPixel", 2);
+__decorateClass([
+  property6({ type: Number, attribute: "wave-height" })
+], DawEditorElement.prototype, "waveHeight", 2);
+__decorateClass([
+  property6({ type: Boolean })
+], DawEditorElement.prototype, "timescale", 2);
+__decorateClass([
+  property6({ type: Boolean })
+], DawEditorElement.prototype, "mono", 2);
+__decorateClass([
+  property6({ type: Number, attribute: "bar-width" })
+], DawEditorElement.prototype, "barWidth", 2);
+__decorateClass([
+  property6({ type: Number, attribute: "bar-gap" })
+], DawEditorElement.prototype, "barGap", 2);
+__decorateClass([
+  property6({ type: Boolean, attribute: "file-drop" })
+], DawEditorElement.prototype, "fileDrop", 2);
+__decorateClass([
+  property6({ type: Number, attribute: "sample-rate" })
+], DawEditorElement.prototype, "sampleRate", 2);
+__decorateClass([
+  state()
+], DawEditorElement.prototype, "_tracks", 2);
+__decorateClass([
+  state()
+], DawEditorElement.prototype, "_engineTracks", 2);
+__decorateClass([
+  state()
+], DawEditorElement.prototype, "_peaksData", 2);
+__decorateClass([
+  state()
+], DawEditorElement.prototype, "_isPlaying", 2);
+__decorateClass([
+  state()
+], DawEditorElement.prototype, "_duration", 2);
+__decorateClass([
+  state()
+], DawEditorElement.prototype, "_selectedTrackId", 2);
+__decorateClass([
+  state()
+], DawEditorElement.prototype, "_dragOver", 2);
+__decorateClass([
+  property6({ attribute: "eager-resume" })
+], DawEditorElement.prototype, "eagerResume", 2);
+DawEditorElement = __decorateClass([
+  customElement10("daw-editor")
+], DawEditorElement);
+
+// src/elements/daw-ruler.ts
+import { LitElement as LitElement9, html as html8, css as css7 } from "lit";
+import { customElement as customElement11, property as property7 } from "lit/decorators.js";
+
+// src/utils/time-format.ts
+function formatTime(milliseconds) {
+  const seconds = Math.floor(milliseconds / 1e3);
+  const s = seconds % 60;
+  const m = (seconds - s) / 60;
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+
+// src/utils/smart-scale.ts
+var timeinfo = /* @__PURE__ */ new Map([
+  [700, { marker: 1e3, bigStep: 500, smallStep: 100 }],
+  [1500, { marker: 2e3, bigStep: 1e3, smallStep: 200 }],
+  [2500, { marker: 2e3, bigStep: 1e3, smallStep: 500 }],
+  [5e3, { marker: 5e3, bigStep: 1e3, smallStep: 500 }],
+  [1e4, { marker: 1e4, bigStep: 5e3, smallStep: 1e3 }],
+  [12e3, { marker: 15e3, bigStep: 5e3, smallStep: 1e3 }],
+  [Infinity, { marker: 3e4, bigStep: 1e4, smallStep: 5e3 }]
+]);
+function getScaleInfo(samplesPerPixel) {
+  for (const [resolution, config] of timeinfo) {
+    if (samplesPerPixel < resolution) {
+      return config;
+    }
+  }
+  return { marker: 3e4, bigStep: 1e4, smallStep: 5e3 };
+}
+function computeTemporalTicks(samplesPerPixel, sampleRate, duration, rulerHeight) {
+  const widthX = Math.ceil(duration * sampleRate / samplesPerPixel);
+  const config = getScaleInfo(samplesPerPixel);
+  const { marker, bigStep, smallStep } = config;
+  const canvasInfo = /* @__PURE__ */ new Map();
+  const labels = [];
+  const pixPerSec = sampleRate / samplesPerPixel;
+  for (let counter = 0; ; counter += smallStep) {
+    const pix = Math.floor(counter / 1e3 * pixPerSec);
+    if (pix >= widthX) break;
+    if (counter % marker === 0) {
+      canvasInfo.set(pix, rulerHeight);
+      labels.push({ pix, text: formatTime(counter) });
+    } else if (counter % bigStep === 0) {
+      canvasInfo.set(pix, Math.floor(rulerHeight / 2));
+    } else if (counter % smallStep === 0) {
+      canvasInfo.set(pix, Math.floor(rulerHeight / 5));
+    }
+  }
+  return { widthX, canvasInfo, labels };
+}
+
+// src/elements/daw-ruler.ts
+var MAX_CANVAS_WIDTH2 = 1e3;
+var DawRulerElement = class extends LitElement9 {
+  constructor() {
+    super(...arguments);
+    this.samplesPerPixel = 1024;
+    this.sampleRate = 48e3;
+    this.duration = 0;
+    this.rulerHeight = 30;
+    this._tickData = null;
+  }
+  willUpdate() {
+    if (this.duration > 0) {
+      this._tickData = computeTemporalTicks(
+        this.samplesPerPixel,
+        this.sampleRate,
+        this.duration,
+        this.rulerHeight
+      );
+    } else {
+      this._tickData = null;
+    }
+  }
+  render() {
+    if (!this._tickData) return html8``;
+    const { widthX, labels } = this._tickData;
+    const totalChunks = Math.ceil(widthX / MAX_CANVAS_WIDTH2);
+    const indices = Array.from({ length: totalChunks }, (_, i) => i);
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    return html8`
+      <div class="container" style="width: ${widthX}px; height: ${this.rulerHeight}px;">
+        ${indices.map((i) => {
+      const width = Math.min(MAX_CANVAS_WIDTH2, widthX - i * MAX_CANVAS_WIDTH2);
+      return html8`
+            <canvas
+              data-index=${i}
+              width=${width * dpr}
+              height=${this.rulerHeight * dpr}
+              style="left: ${i * MAX_CANVAS_WIDTH2}px; width: ${width}px; height: ${this.rulerHeight}px;"
+            ></canvas>
+          `;
+    })}
+        ${labels.map(
+      ({ pix, text }) => html8`<span class="label" style="left: ${pix + 4}px;">${text}</span>`
+    )}
+      </div>
+    `;
+  }
+  updated() {
+    this._drawTicks();
+  }
+  _drawTicks() {
+    if (!this._tickData) return;
+    const canvases = this.shadowRoot?.querySelectorAll("canvas");
+    if (!canvases) return;
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    const rulerColor = getComputedStyle(this).getPropertyValue("--daw-ruler-color").trim() || "#c49a6c";
+    for (const canvas of canvases) {
+      const idx = Number(canvas.dataset.index);
+      const ctx = canvas.getContext("2d");
+      if (!ctx) continue;
+      const canvasWidth = Math.min(
+        MAX_CANVAS_WIDTH2,
+        this._tickData.widthX - idx * MAX_CANVAS_WIDTH2
+      );
+      const globalOffset = idx * MAX_CANVAS_WIDTH2;
+      ctx.resetTransform();
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.scale(dpr, dpr);
+      ctx.strokeStyle = rulerColor;
+      ctx.lineWidth = 1;
+      for (const [pix, height] of this._tickData.canvasInfo) {
+        const localX = pix - globalOffset;
+        if (localX < 0 || localX >= canvasWidth) continue;
+        ctx.beginPath();
+        ctx.moveTo(localX + 0.5, this.rulerHeight);
+        ctx.lineTo(localX + 0.5, this.rulerHeight - height);
+        ctx.stroke();
+      }
+    }
+  }
+};
+DawRulerElement.styles = css7`
+    :host {
+      display: block;
+      position: relative;
+      background: var(--daw-ruler-background, #0f0f1a);
+    }
+    .container {
+      position: relative;
+    }
+    canvas {
+      position: absolute;
+      top: 0;
+    }
+    .label {
+      position: absolute;
+      font-size: 0.7rem;
+      white-space: nowrap;
+      color: var(--daw-ruler-color, #c49a6c);
+      top: 2px;
+    }
+  `;
+__decorateClass([
+  property7({ type: Number, attribute: false })
+], DawRulerElement.prototype, "samplesPerPixel", 2);
+__decorateClass([
+  property7({ type: Number, attribute: false })
+], DawRulerElement.prototype, "sampleRate", 2);
+__decorateClass([
+  property7({ type: Number, attribute: false })
+], DawRulerElement.prototype, "duration", 2);
+__decorateClass([
+  property7({ type: Number, attribute: false })
+], DawRulerElement.prototype, "rulerHeight", 2);
+DawRulerElement = __decorateClass([
+  customElement11("daw-ruler")
+], DawRulerElement);
+
+// src/elements/daw-selection.ts
+import { LitElement as LitElement10, html as html9, css as css8 } from "lit";
+import { customElement as customElement12, property as property8 } from "lit/decorators.js";
+var DawSelectionElement = class extends LitElement10 {
+  constructor() {
+    super(...arguments);
+    this.startPx = 0;
+    this.endPx = 0;
+  }
+  render() {
+    const left = Math.min(this.startPx, this.endPx);
+    const width = Math.abs(this.endPx - this.startPx);
+    if (width === 0) return html9``;
+    return html9`<div style="left: ${left}px; width: ${width}px;"></div>`;
+  }
+};
+DawSelectionElement.styles = css8`
+    :host {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      z-index: 5;
+    }
+    div {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      background: var(--daw-selection-color, rgba(99, 199, 95, 0.3));
+    }
+  `;
+__decorateClass([
+  property8({ type: Number, attribute: false })
+], DawSelectionElement.prototype, "startPx", 2);
+__decorateClass([
+  property8({ type: Number, attribute: false })
+], DawSelectionElement.prototype, "endPx", 2);
+DawSelectionElement = __decorateClass([
+  customElement12("daw-selection")
+], 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";
+var DawRecordButtonElement = class extends DawTransportButton {
+  constructor() {
+    super(...arguments);
+    this._isRecording = false;
+    this._targetRef = null;
+    this._onStart = () => {
+      this._isRecording = true;
+    };
+    this._onComplete = () => {
+      this._isRecording = false;
+    };
+    this._onError = () => {
+      this._isRecording = false;
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._listenToTarget();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._cleanupListeners();
+  }
+  _listenToTarget() {
+    const target = this.target;
+    if (!target) return;
+    this._targetRef = target;
+    target.addEventListener("daw-recording-start", this._onStart);
+    target.addEventListener("daw-recording-complete", this._onComplete);
+    target.addEventListener("daw-recording-error", this._onError);
+  }
+  _cleanupListeners() {
+    if (this._targetRef) {
+      this._targetRef.removeEventListener("daw-recording-start", this._onStart);
+      this._targetRef.removeEventListener("daw-recording-complete", this._onComplete);
+      this._targetRef.removeEventListener("daw-recording-error", this._onError);
+      this._targetRef = null;
+    }
+  }
+  render() {
+    return html10`
+      <button part="button" ?data-recording=${this._isRecording} @click=${this._onClick}>
+        <slot>${this._isRecording ? "Stop Rec" : "Record"}</slot>
+      </button>
+    `;
+  }
+  _onClick() {
+    const target = this.target;
+    if (!target) {
+      console.warn(
+        '[dawcore] <daw-record-button> has no target. Check <daw-transport for="..."> references a valid <daw-editor> id.'
+      );
+      return;
+    }
+    if (this._isRecording) {
+      target.stopRecording();
+    } else {
+      target.startRecording(target.recordingStream);
+    }
+  }
+};
+DawRecordButtonElement.styles = [
+  DawTransportButton.styles,
+  css9`
+      button[data-recording] {
+        color: #d08070;
+        border-color: #d08070;
+      }
+    `
+];
+__decorateClass([
+  state2()
+], DawRecordButtonElement.prototype, "_isRecording", 2);
+DawRecordButtonElement = __decorateClass([
+  customElement13("daw-record-button")
+], DawRecordButtonElement);
+export {
+  AudioResumeController,
+  DawClipElement,
+  DawEditorElement,
+  DawPauseButtonElement,
+  DawPlayButtonElement,
+  DawPlayheadElement,
+  DawRecordButtonElement,
+  DawRulerElement,
+  DawSelectionElement,
+  DawStopButtonElement,
+  DawTrackControlsElement,
+  DawTrackElement,
+  DawTransportButton,
+  DawTransportElement,
+  DawWaveformElement,
+  RecordingController
+};
+//# sourceMappingURL=index.mjs.map