@dawcore/components 0.0.9 → 0.0.10

package/dist/index.mjs

@@ -193,7 +193,7 @@ function getVisibleChunkIndices(totalWidth, chunkWidth, visibleStart, visibleEnd
 
 // src/elements/daw-waveform.ts
 var MAX_CANVAS_WIDTH = 1e3;
-var LAYOUT_PROPS = /* @__PURE__ */ new Set(["length", "waveHeight", "barWidth", "barGap"]);
+var LAYOUT_PROPS = /* @__PURE__ */ new Set(["length", "waveHeight", "barWidth", "barGap", "segments"]);
 function groupDirtyByChunk(dirtyPixels, step) {
   const dirtyByChunk = /* @__PURE__ */ new Map();
   for (const peakIdx of dirtyPixels) {
@@ -300,14 +300,22 @@ var DawWaveformElement = class extends LitElement3 {
     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);
+    if (this.segments) {
+      for (const canvas of canvases) {
+        const chunkIdx = Number(canvas.dataset.index);
+        this._drawnChunks.add(chunkIdx);
+        this._drawSegments(canvas, chunkIdx, dpr, halfHeight, bits, waveColor);
+      }
+    } else {
+      const dirtyByChunk = groupDirtyByChunk(this._dirtyPixels, step);
+      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();
   }
@@ -341,6 +349,45 @@ var DawWaveformElement = class extends LitElement3 {
       }
     }
   }
+  _drawSegments(canvas, chunkIdx, dpr, halfHeight, bits, waveColor) {
+    if (!this.segments) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const globalOffset = chunkIdx * MAX_CANVAS_WIDTH;
+    const canvasWidth = Math.min(MAX_CANVAS_WIDTH, this.length - globalOffset);
+    ctx.resetTransform();
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.scale(dpr, dpr);
+    ctx.fillStyle = waveColor;
+    const step = Math.max(1, Math.round(this.barWidth + this.barGap));
+    for (const seg of this.segments) {
+      if (seg.pixelEnd <= globalOffset || seg.pixelStart >= globalOffset + canvasWidth) continue;
+      const localStart = Math.max(0, seg.pixelStart - globalOffset);
+      const localEnd = Math.min(canvasWidth, seg.pixelEnd - globalOffset);
+      const segPixelWidth = seg.pixelEnd - seg.pixelStart;
+      const segPeakWidth = seg.peakEnd - seg.peakStart;
+      if (segPixelWidth <= 0 || segPeakWidth <= 0) continue;
+      const peaksPerPixel = segPeakWidth / segPixelWidth;
+      for (let px = Math.floor(localStart); px < Math.ceil(localEnd); px += step) {
+        const pxInSeg = px + globalOffset - seg.pixelStart;
+        const peakPos = seg.peakStart + pxInSeg * peaksPerPixel;
+        const peakEnd = peakPos + step * peaksPerPixel;
+        const peak = aggregatePeaks(this._peaks, bits, Math.floor(peakPos), Math.ceil(peakEnd));
+        if (!peak) continue;
+        const rects = calculateBarRects(
+          px,
+          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) {
@@ -435,6 +482,9 @@ __decorateClass([
 __decorateClass([
   property3({ type: Number, attribute: false })
 ], DawWaveformElement.prototype, "originX", 2);
+__decorateClass([
+  property3({ attribute: false })
+], DawWaveformElement.prototype, "segments", 2);
 DawWaveformElement = __decorateClass([
   customElement3("daw-waveform")
 ], DawWaveformElement);
@@ -502,6 +552,40 @@ var DawPlayheadElement = class extends LitElement4 {
       this._line.style.transform = `translate3d(${px}px, 0, 0)`;
     }
   }
+  startBeatsAnimation(getTime, bpm, ppqn, ticksPerPixel) {
+    const ticksPerSecond = bpm * ppqn / 60;
+    this._animation.start(() => {
+      const time = getTime();
+      const px = time * ticksPerSecond / ticksPerPixel;
+      if (this._line) {
+        this._line.style.transform = `translate3d(${px}px, 0, 0)`;
+      }
+    });
+  }
+  stopBeatsAnimation(time, bpm, ppqn, ticksPerPixel) {
+    this._animation.stop();
+    const px = time * bpm * ppqn / (60 * ticksPerPixel);
+    if (this._line) {
+      this._line.style.transform = `translate3d(${px}px, 0, 0)`;
+    }
+  }
+  startBeatsAnimationWithMap(getTime, secondsToTicks, ticksPerPixel) {
+    this._animation.start(() => {
+      const time = getTime();
+      const tick = secondsToTicks(time);
+      const px = tick / ticksPerPixel;
+      if (this._line) {
+        this._line.style.transform = `translate3d(${px}px, 0, 0)`;
+      }
+    });
+  }
+  stopBeatsAnimationWithMap(time, secondsToTicks, ticksPerPixel) {
+    this._animation.stop();
+    const px = secondsToTicks(time) / ticksPerPixel;
+    if (this._line) {
+      this._line.style.transform = `translate3d(${px}px, 0, 0)`;
+    }
+  }
 };
 DawPlayheadElement.styles = css2`
     :host {
@@ -753,11 +837,11 @@ DawStopButtonElement = __decorateClass([
 ], DawStopButtonElement);
 
 // src/elements/daw-editor.ts
-import { LitElement as LitElement8, html as html7, css as css7 } from "lit";
-import { customElement as customElement10, property as property6, state as state3 } from "lit/decorators.js";
+import { LitElement as LitElement9, html as html8, css as css8 } from "lit";
+import { customElement as customElement11, property as property7, state as state3 } from "lit/decorators.js";
 import {
-  createClip as createClip2,
-  createClipFromSeconds as createClipFromSeconds2,
+  createClip as createClip3,
+  createClipFromSeconds,
   createTrack as createTrack2,
   clipPixelWidth
 } from "@waveform-playlist/core";
@@ -1169,6 +1253,19 @@ var PeakPipeline = class {
     }
     return requestedScale;
   }
+  /**
+   * Extract peaks at the base scale from cached WaveformData.
+   * Returns null if no cached data exists for this buffer.
+   * Used by variable-tempo segments which handle stretching themselves.
+   */
+  getBaseScalePeaks(audioBuffer, isMono, offsetSamples, durationSamples) {
+    const cached = this._cache.get(audioBuffer);
+    if (!cached) return null;
+    return {
+      peaks: extractPeaks(cached, cached.scale, isMono, offsetSamples, durationSamples),
+      scale: cached.scale
+    };
+  }
   /**
    * Return the coarsest (largest) scale among cached WaveformData entries
    * that correspond to the given clip buffers. Returns 0 if none are cached.
@@ -1474,9 +1571,187 @@ DawTrackControlsElement = __decorateClass([
   customElement9("daw-track-controls")
 ], DawTrackControlsElement);
 
+// src/elements/daw-grid.ts
+import { LitElement as LitElement8, html as html7, css as css6 } from "lit";
+import { customElement as customElement10, property as property6 } from "lit/decorators.js";
+import { MIN_PIXELS_PER_UNIT } from "@waveform-playlist/core";
+
+// src/utils/musical-tick-cache.ts
+import { computeMusicalTicks } from "@waveform-playlist/core";
+var cachedParams = null;
+var cachedResult = null;
+function meterEntriesMatch(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i].tick !== b[i].tick || a[i].numerator !== b[i].numerator || a[i].denominator !== b[i].denominator)
+      return false;
+  }
+  return true;
+}
+function paramsMatch(a, b) {
+  return a.ticksPerPixel === b.ticksPerPixel && a.startPixel === b.startPixel && a.endPixel === b.endPixel && meterEntriesMatch(a.meterEntries, b.meterEntries) && (a.ppqn ?? 960) === (b.ppqn ?? 960);
+}
+function getCachedMusicalTicks(params) {
+  if (cachedParams && cachedResult && paramsMatch(cachedParams, params)) {
+    return cachedResult;
+  }
+  cachedResult = computeMusicalTicks(params);
+  cachedParams = {
+    ...params,
+    meterEntries: params.meterEntries.map((e) => ({ ...e }))
+  };
+  return cachedResult;
+}
+
+// src/elements/daw-grid.ts
+var MAX_CANVAS_WIDTH2 = 1e3;
+var DawGridElement = class extends LitElement8 {
+  constructor() {
+    super(...arguments);
+    this.ticksPerPixel = 24;
+    this.meterEntries = [
+      { tick: 0, numerator: 4, denominator: 4 }
+    ];
+    this.ppqn = 960;
+    this.visibleStart = -Infinity;
+    this.visibleEnd = Infinity;
+    this.length = 0;
+    this.height = 200;
+    this._tickData = null;
+  }
+  willUpdate() {
+    if (this.length > 0) {
+      this._tickData = getCachedMusicalTicks({
+        ticksPerPixel: this.ticksPerPixel,
+        meterEntries: this.meterEntries,
+        ppqn: this.ppqn,
+        startPixel: 0,
+        endPixel: this.length
+      });
+    } else {
+      this._tickData = null;
+    }
+  }
+  render() {
+    if (!this._tickData) return html7``;
+    const totalWidth = this.length;
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    const indices = getVisibleChunkIndices(
+      totalWidth,
+      MAX_CANVAS_WIDTH2,
+      this.visibleStart,
+      this.visibleEnd
+    );
+    return html7`
+      <div class="container" style="width: ${totalWidth}px; height: ${this.height}px;">
+        ${indices.map((i) => {
+      const width = Math.min(MAX_CANVAS_WIDTH2, totalWidth - i * MAX_CANVAS_WIDTH2);
+      return html7`
+            <canvas
+              data-index=${i}
+              width=${width * dpr}
+              height=${this.height * dpr}
+              style="left: ${i * MAX_CANVAS_WIDTH2}px; width: ${width}px; height: ${this.height}px;"
+            ></canvas>
+          `;
+    })}
+      </div>
+    `;
+  }
+  updated() {
+    this._drawGrid();
+  }
+  _drawGrid() {
+    if (!this._tickData) return;
+    const canvases = this.shadowRoot?.querySelectorAll("canvas");
+    if (!canvases) return;
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    const style = getComputedStyle(this);
+    const barHighlight = style.getPropertyValue("--daw-grid-bar-highlight").trim() || "rgba(255,255,255,0.02)";
+    const majorLine = style.getPropertyValue("--daw-grid-major-line").trim() || "rgba(255,255,255,0.1)";
+    const minorLine = style.getPropertyValue("--daw-grid-minor-line").trim() || "rgba(255,255,255,0.06)";
+    const { ticks, pixelsPerQuarterNote } = this._tickData;
+    for (const canvas of canvases) {
+      const idx = Number(canvas.dataset.index);
+      const ctx = canvas.getContext("2d");
+      if (!ctx) continue;
+      const chunkLeft = idx * MAX_CANVAS_WIDTH2;
+      const canvasWidth = Math.min(MAX_CANVAS_WIDTH2, this.length - chunkLeft);
+      ctx.resetTransform();
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.scale(dpr, dpr);
+      if (pixelsPerQuarterNote * 4 >= MIN_PIXELS_PER_UNIT) {
+        ctx.fillStyle = barHighlight;
+        const majorTicks = ticks.filter((t) => t.type === "major");
+        for (let i = 0; i < majorTicks.length; i++) {
+          if (majorTicks[i].barIndex % 2 === 1) {
+            const x = majorTicks[i].pixel - chunkLeft;
+            const lastMeter = this.meterEntries[this.meterEntries.length - 1];
+            const lastBarWidth = pixelsPerQuarterNote * lastMeter.numerator * (4 / lastMeter.denominator);
+            const nextX = i + 1 < majorTicks.length ? majorTicks[i + 1].pixel - chunkLeft : x + lastBarWidth;
+            ctx.fillRect(x, 0, nextX - x, this.height);
+          }
+        }
+      }
+      ctx.lineWidth = 1;
+      for (const tick of ticks) {
+        if (tick.type === "minorMinor") continue;
+        const localX = tick.pixel - chunkLeft;
+        if (localX < 0 || localX >= canvasWidth) continue;
+        ctx.strokeStyle = tick.type === "major" ? majorLine : minorLine;
+        ctx.beginPath();
+        ctx.moveTo(localX + 0.5, 0);
+        ctx.lineTo(localX + 0.5, this.height);
+        ctx.stroke();
+      }
+    }
+  }
+};
+DawGridElement.styles = css6`
+    :host {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      pointer-events: none;
+      z-index: 0;
+    }
+    .container {
+      position: relative;
+    }
+    canvas {
+      position: absolute;
+      top: 0;
+    }
+  `;
+__decorateClass([
+  property6({ type: Number, attribute: false })
+], DawGridElement.prototype, "ticksPerPixel", 2);
+__decorateClass([
+  property6({ attribute: false })
+], DawGridElement.prototype, "meterEntries", 2);
+__decorateClass([
+  property6({ type: Number, attribute: false })
+], DawGridElement.prototype, "ppqn", 2);
+__decorateClass([
+  property6({ type: Number, attribute: false })
+], DawGridElement.prototype, "visibleStart", 2);
+__decorateClass([
+  property6({ type: Number, attribute: false })
+], DawGridElement.prototype, "visibleEnd", 2);
+__decorateClass([
+  property6({ type: Number, attribute: false })
+], DawGridElement.prototype, "length", 2);
+__decorateClass([
+  property6({ type: Number, attribute: false })
+], DawGridElement.prototype, "height", 2);
+DawGridElement = __decorateClass([
+  customElement10("daw-grid")
+], DawGridElement);
+
 // src/styles/theme.ts
-import { css as css6 } from "lit";
-var hostStyles = css6`
+import { css as css7 } from "lit";
+var hostStyles = css7`
   :host {
     --daw-wave-color: #c49a6c;
     --daw-progress-color: #63c75f;
@@ -1492,7 +1767,7 @@ var hostStyles = css6`
     --daw-clip-header-text: #e0d4c8;
   }
 `;
-var clipStyles = css6`
+var clipStyles = css7`
   .clip-container {
     position: absolute;
     overflow: hidden;
@@ -1705,8 +1980,7 @@ var AudioResumeController = class {
 };
 
 // src/controllers/recording-controller.ts
-import { recordingProcessorUrl } from "@waveform-playlist/worklets";
-import { appendPeaks, concatenateAudioData, createAudioBuffer } from "@waveform-playlist/recording";
+import { appendPeaks, concatenateAudioData, createAudioBuffer } from "@waveform-playlist/core";
 var RecordingController = class {
   constructor(host) {
     this._sessions = /* @__PURE__ */ new Map();
@@ -1743,6 +2017,14 @@ var RecordingController = class {
       const rawCtx = this._host.audioContext;
       this._host.resolveAudioContextSampleRate(rawCtx.sampleRate);
       if (!this._workletLoadedCtx || this._workletLoadedCtx !== rawCtx) {
+        let recordingProcessorUrl;
+        try {
+          ({ recordingProcessorUrl } = await import("@waveform-playlist/worklets"));
+        } catch {
+          throw new Error(
+            "Recording requires @waveform-playlist/worklets. Install it: npm install @waveform-playlist/worklets"
+          );
+        }
         await rawCtx.audioWorklet.addModule(recordingProcessorUrl);
         this._workletLoadedCtx = rawCtx;
       }
@@ -1993,7 +2275,7 @@ var RecordingController = class {
 };
 
 // src/interactions/pointer-handler.ts
-import { pixelsToSeconds } from "@waveform-playlist/core";
+import { pixelsToSeconds, snapTickToGrid } from "@waveform-playlist/core";
 
 // src/interactions/constants.ts
 var DRAG_THRESHOLD = 3;
@@ -2003,6 +2285,7 @@ var PointerHandler = class {
   constructor(host) {
     this._isDragging = false;
     this._dragStartPx = 0;
+    this._dragStartTime = 0;
     this._timeline = null;
     // Cached from onPointerDown to avoid forced layout reflows at 60fps during drag
     this._timelineRect = null;
@@ -2049,21 +2332,18 @@ var PointerHandler = class {
       const currentPx = this._pxFromPointer(e);
       if (!this._isDragging && Math.abs(currentPx - this._dragStartPx) > DRAG_THRESHOLD) {
         this._isDragging = true;
+        this._dragStartTime = this._pxToTime(this._dragStartPx);
       }
       if (this._isDragging) {
         const h = this._host;
-        const startTime = pixelsToSeconds(
-          this._dragStartPx,
-          h.samplesPerPixel,
-          h.effectiveSampleRate
-        );
-        const endTime = pixelsToSeconds(currentPx, h.samplesPerPixel, h.effectiveSampleRate);
+        const startTime = this._dragStartTime;
+        const endTime = this._pxToTime(currentPx);
         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;
+          sel.startPx = this._timeToPx(h._selectionStartTime);
+          sel.endPx = this._timeToPx(h._selectionEndTime);
         }
       }
     };
@@ -2101,6 +2381,23 @@ var PointerHandler = class {
     }
     return e.clientX - this._timelineRect.left;
   }
+  _pxToTime(px) {
+    const h = this._host;
+    if (h.scaleMode === "beats") {
+      let tick = px * h.ticksPerPixel;
+      tick = snapTickToGrid(tick, h.snapTo, h._meterEntries, h.ppqn);
+      return h._ticksToSeconds(tick);
+    }
+    return pixelsToSeconds(px, h.samplesPerPixel, h.effectiveSampleRate);
+  }
+  _timeToPx(time) {
+    const h = this._host;
+    if (h.scaleMode === "beats") {
+      const tick = h._secondsToTicks(time);
+      return tick / h.ticksPerPixel;
+    }
+    return time * h.effectiveSampleRate / h.samplesPerPixel;
+  }
   _finalizeSelection() {
     const h = this._host;
     if (h._engine) {
@@ -2118,7 +2415,7 @@ var PointerHandler = class {
   _handleSeekClick(e) {
     const h = this._host;
     const px = this._pxFromPointer(e);
-    const time = pixelsToSeconds(px, h.samplesPerPixel, h.effectiveSampleRate);
+    const time = this._pxToTime(px);
     h._selectionStartTime = 0;
     h._selectionEndTime = 0;
     if (this._timeline) {
@@ -2183,6 +2480,7 @@ var PointerHandler = class {
 };
 
 // src/interactions/clip-pointer-handler.ts
+import { snapTickToGrid as snapTickToGrid2 } from "@waveform-playlist/core";
 var ClipPointerHandler = class {
   constructor(host) {
     this._mode = null;
@@ -2190,7 +2488,6 @@ var ClipPointerHandler = class {
     this._trackId = "";
     this._startPx = 0;
     this._isDragging = false;
-    this._lastDeltaPx = 0;
     this._cumulativeDeltaSamples = 0;
     // Trim visual feedback: snapshot of original clip state
     this._clipContainer = null;
@@ -2199,8 +2496,31 @@ var ClipPointerHandler = class {
     this._originalWidth = 0;
     this._originalOffsetSamples = 0;
     this._originalDurationSamples = 0;
+    this._originalStartSample = 0;
     this._host = host;
   }
+  /**
+   * Convert a pixel delta to samples, snapping in tick space when in beats mode.
+   *
+   * The anchor is the absolute sample position being moved (e.g., clip start
+   * for move/left-trim, clip end for right-trim). Snapping the absolute
+   * position — not just the delta — ensures clips land exactly on grid lines
+   * even if they started off-grid.
+   */
+  _snapDeltaToSamples(totalDeltaPx, anchorSample) {
+    const h = this._host;
+    if (h.scaleMode === "beats") {
+      const anchorSeconds = anchorSample / h.effectiveSampleRate;
+      const anchorTick = h._secondsToTicks(anchorSeconds);
+      const deltaTicks = totalDeltaPx * h.ticksPerPixel;
+      const targetTick = anchorTick + deltaTicks;
+      const snappedTick = h.snapTo !== "off" ? snapTickToGrid2(targetTick, h.snapTo, h._meterEntries, h.ppqn) : targetTick;
+      const snappedSeconds = h._ticksToSeconds(snappedTick);
+      const snappedSample = Math.round(snappedSeconds * h.effectiveSampleRate);
+      return snappedSample - anchorSample;
+    }
+    return Math.round(totalDeltaPx * h.renderSamplesPerPixel);
+  }
   /** Returns true if a drag interaction is currently in progress. */
   get isActive() {
     return this._mode !== null;
@@ -2237,10 +2557,16 @@ var ClipPointerHandler = class {
     this._trackId = trackId;
     this._startPx = e.clientX;
     this._isDragging = false;
-    this._lastDeltaPx = 0;
     this._cumulativeDeltaSamples = 0;
-    if (this._host.engine) {
-      this._host.engine.beginTransaction();
+    const engine = this._host.engine;
+    if (engine) {
+      const bounds = engine.getClipBounds(trackId, clipId);
+      if (bounds) {
+        this._originalStartSample = bounds.startSample;
+      }
+    }
+    if (engine) {
+      engine.beginTransaction();
     } else {
       console.warn(
         "[dawcore] beginDrag: engine unavailable, drag mutations will not be grouped for undo"
@@ -2257,9 +2583,9 @@ var ClipPointerHandler = class {
       } else {
         console.warn("[dawcore] clip container not found for trim visual feedback: " + clipId);
       }
-      const engine = this._host.engine;
-      if (engine) {
-        const bounds = engine.getClipBounds(trackId, clipId);
+      const engine2 = this._host.engine;
+      if (engine2) {
+        const bounds = engine2.getClipBounds(trackId, clipId);
         if (bounds) {
           this._originalOffsetSamples = bounds.offsetSamples;
           this._originalDurationSamples = bounds.durationSamples;
@@ -2281,21 +2607,33 @@ var ClipPointerHandler = class {
     const engine = this._host.engine;
     if (!engine) return;
     if (this._mode === "move") {
-      const incrementalDeltaPx = totalDeltaPx - this._lastDeltaPx;
-      this._lastDeltaPx = totalDeltaPx;
-      const incrementalDeltaSamples = Math.round(incrementalDeltaPx * this._host.samplesPerPixel);
-      const applied = engine.moveClip(this._trackId, this._clipId, incrementalDeltaSamples, true);
-      this._cumulativeDeltaSamples += applied;
+      const totalSnappedDelta = this._snapDeltaToSamples(totalDeltaPx, this._originalStartSample);
+      const incrementalDeltaSamples = totalSnappedDelta - this._cumulativeDeltaSamples;
+      if (incrementalDeltaSamples !== 0) {
+        const applied = engine.moveClip(this._trackId, this._clipId, incrementalDeltaSamples, true);
+        this._cumulativeDeltaSamples += applied;
+      }
     } else {
       const boundary = this._mode === "trim-left" ? "left" : "right";
-      const rawDeltaSamples = Math.round(totalDeltaPx * this._host.samplesPerPixel);
+      const anchor = boundary === "left" ? this._originalStartSample : this._originalStartSample + this._originalDurationSamples;
+      const rawDeltaSamples = this._snapDeltaToSamples(totalDeltaPx, anchor);
       const deltaSamples = engine.constrainTrimDelta(
         this._trackId,
         this._clipId,
         boundary,
         rawDeltaSamples
       );
-      const deltaPx = Math.round(deltaSamples / this._host.samplesPerPixel);
+      let deltaPx;
+      if (this._host.scaleMode === "beats") {
+        const h = this._host;
+        const anchorSec = anchor / h.effectiveSampleRate;
+        const anchorTick = h._secondsToTicks(anchorSec);
+        const newSec = anchorSec + deltaSamples / h.effectiveSampleRate;
+        const newTick = h._secondsToTicks(newSec);
+        deltaPx = Math.round((newTick - anchorTick) / h.ticksPerPixel);
+      } else {
+        deltaPx = Math.round(deltaSamples / this._host.renderSamplesPerPixel);
+      }
       this._cumulativeDeltaSamples = deltaSamples;
       if (this._clipContainer) {
         if (this._mode === "trim-left") {
@@ -2427,18 +2765,18 @@ var ClipPointerHandler = class {
     this._trackId = "";
     this._startPx = 0;
     this._isDragging = false;
-    this._lastDeltaPx = 0;
     this._cumulativeDeltaSamples = 0;
     this._clipContainer = null;
     this._originalLeft = 0;
     this._originalWidth = 0;
     this._originalOffsetSamples = 0;
     this._originalDurationSamples = 0;
+    this._originalStartSample = 0;
   }
 };
 
 // src/interactions/file-loader.ts
-import { createClipFromSeconds, createTrack } from "@waveform-playlist/core";
+import { createClip, createTrack } from "@waveform-playlist/core";
 async function loadFiles(host, files) {
   if (!files) {
     console.warn("[dawcore] loadFiles called with null/undefined");
@@ -2460,24 +2798,24 @@ async function loadFiles(host, files) {
       host._audioCache.delete(blobUrl);
       host._resolvedSampleRate = audioBuffer.sampleRate;
       const name = file.name.replace(/\.\w+$/, "");
-      const clip = createClipFromSeconds({
+      const clip = createClip({
         audioBuffer,
-        startTime: 0,
-        duration: audioBuffer.duration,
-        offset: 0,
+        startSample: 0,
+        durationSamples: audioBuffer.length,
+        offsetSamples: 0,
         gain: 1,
         name,
         sampleRate: audioBuffer.sampleRate,
-        sourceDuration: audioBuffer.duration
+        sourceDurationSamples: audioBuffer.length
       });
       host._clipBuffers = new Map(host._clipBuffers).set(clip.id, audioBuffer);
-      host._clipOffsets.set(clip.id, {
+      host._clipOffsets = new Map(host._clipOffsets).set(clip.id, {
         offsetSamples: clip.offsetSamples,
         durationSamples: clip.durationSamples
       });
       const peakData = await host._peakPipeline.generatePeaks(
         audioBuffer,
-        host.samplesPerPixel,
+        host.renderSamplesPerPixel,
         host.mono,
         clip.offsetSamples,
         clip.durationSamples
@@ -2539,7 +2877,7 @@ async function loadFiles(host, files) {
 }
 
 // src/interactions/recording-clip.ts
-import { createClip } from "@waveform-playlist/core";
+import { createClip as createClip2 } from "@waveform-playlist/core";
 function addRecordedClip(host, trackId, buf, startSample, durSamples, offsetSamples = 0) {
   let trimmedBuf = buf;
   if (offsetSamples > 0 && offsetSamples < buf.length) {
@@ -2554,7 +2892,7 @@ function addRecordedClip(host, trackId, buf, startSample, durSamples, offsetSamp
     }
     trimmedBuf = trimmed;
   }
-  const clip = createClip({
+  const clip = createClip2({
     audioBuffer: trimmedBuf,
     startSample,
     durationSamples: durSamples,
@@ -2722,13 +3060,13 @@ function syncPeaksForChangedClips(host, tracks) {
         continue;
       }
       host._clipBuffers = new Map(host._clipBuffers).set(clip.id, audioBuffer);
-      host._clipOffsets.set(clip.id, {
+      host._clipOffsets = new Map(host._clipOffsets).set(clip.id, {
         offsetSamples: clip.offsetSamples,
         durationSamples: clip.durationSamples
       });
       host._peakPipeline.generatePeaks(
         audioBuffer,
-        host.samplesPerPixel,
+        host.renderSamplesPerPixel,
         host.mono,
         clip.offsetSamples,
         clip.durationSamples
@@ -2803,7 +3141,7 @@ async function loadWaveformDataFromUrl(src) {
 }
 
 // src/elements/daw-editor.ts
-var DawEditorElement = class extends LitElement8 {
+var DawEditorElement = class extends LitElement9 {
   constructor() {
     super(...arguments);
     this._samplesPerPixel = 1024;
@@ -2816,6 +3154,12 @@ var DawEditorElement = class extends LitElement8 {
     this.clipHeaders = false;
     this.clipHeaderHeight = 20;
     this.interactiveClips = false;
+    this.scaleMode = "temporal";
+    this._ticksPerPixel = 24;
+    this._bpm = 120;
+    this.timeSignature = [4, 4];
+    this._ppqn = 960;
+    this.snapTo = "off";
     this.sampleRate = 48e3;
     /** Resolved sample rate — falls back to sampleRate property until first audio decode. */
     this._resolvedSampleRate = null;
@@ -2834,6 +3178,9 @@ var DawEditorElement = class extends LitElement8 {
     this._externalAudioContext = null;
     this._ownedAudioContext = null;
     this._engine = null;
+    this._adapter = null;
+    this._warnedMissingTicksToSeconds = false;
+    this._warnedMissingSecondsToTicks = false;
     this._enginePromise = null;
     this._audioCache = /* @__PURE__ */ new Map();
     this._peaksCache = /* @__PURE__ */ new Map();
@@ -2978,6 +3325,41 @@ var DawEditorElement = class extends LitElement8 {
     this._samplesPerPixel = clamped;
     this.requestUpdate("samplesPerPixel", old);
   }
+  get ticksPerPixel() {
+    return this._ticksPerPixel;
+  }
+  set ticksPerPixel(value) {
+    const old = this._ticksPerPixel;
+    if (!Number.isFinite(value) || value <= 0) return;
+    this._ticksPerPixel = value;
+    this.requestUpdate("ticksPerPixel", old);
+  }
+  get bpm() {
+    return this._bpm;
+  }
+  set bpm(value) {
+    const old = this._bpm;
+    if (!Number.isFinite(value) || value <= 0) return;
+    this._bpm = value;
+    if (this._engine) {
+      this._engine.setTempo(value);
+    }
+    this.requestUpdate("bpm", old);
+  }
+  /** MeterEntries for grid/ruler: explicit meterEntries if set, otherwise derived from timeSignature. */
+  get _meterEntries() {
+    if (this.meterEntries && this.meterEntries.length > 0) return this.meterEntries;
+    return [{ tick: 0, numerator: this.timeSignature[0], denominator: this.timeSignature[1] }];
+  }
+  get ppqn() {
+    return this._ppqn;
+  }
+  set ppqn(value) {
+    const old = this._ppqn;
+    if (!Number.isFinite(value) || value <= 0) return;
+    this._ppqn = value;
+    this.requestUpdate("ppqn", old);
+  }
   /** Set an AudioContext to use for all audio operations. Must be set before tracks load. */
   set audioContext(ctx) {
     if (ctx && ctx.state === "closed") {
@@ -3009,6 +3391,13 @@ var DawEditorElement = class extends LitElement8 {
   get engine() {
     return this._engine;
   }
+  /** The adapter's Transport — use for tempo, metronome, and effects. */
+  get transport() {
+    return this._adapter?.transport ?? null;
+  }
+  get renderSamplesPerPixel() {
+    return this._renderSpp;
+  }
   /** Re-extract peaks for a clip at new offset/duration from cached WaveformData. */
   reextractClipPeaks(clipId, offsetSamples, durationSamples) {
     const buf = this._clipBuffers.get(clipId);
@@ -3017,7 +3406,7 @@ var DawEditorElement = class extends LitElement8 {
     const singleClipOffsets = /* @__PURE__ */ new Map([[clipId, { offsetSamples, durationSamples }]]);
     const result = this._peakPipeline.reextractPeaks(
       singleClipBuffers,
-      this.samplesPerPixel,
+      this._renderSpp,
       this.mono,
       singleClipOffsets
     );
@@ -3031,9 +3420,59 @@ var DawEditorElement = class extends LitElement8 {
   resolveAudioContextSampleRate(rate) {
     if (!this._resolvedSampleRate) this._resolvedSampleRate = rate;
   }
+  /**
+   * In beats mode, derive samplesPerPixel from ticksPerPixel so that
+   * clip positions, waveforms, and the tick-space grid all align.
+   */
+  get _renderSpp() {
+    if (this.scaleMode === "beats") {
+      const spp = Math.ceil(
+        60 * this.effectiveSampleRate * this.ticksPerPixel / (this.ppqn * this.bpm)
+      );
+      return this._minSamplesPerPixel > 0 ? Math.max(spp, this._minSamplesPerPixel) : spp;
+    }
+    return this.samplesPerPixel;
+  }
+  /** Convert seconds to ticks — uses callback if provided, otherwise single-BPM fallback. */
+  _secondsToTicks(seconds) {
+    if (this.secondsToTicks) {
+      if (!this.ticksToSeconds && !this._warnedMissingTicksToSeconds) {
+        this._warnedMissingTicksToSeconds = true;
+        console.warn(
+          "[waveform-playlist] daw-editor: secondsToTicks is set but ticksToSeconds is missing. Both callbacks are required for variable tempo."
+        );
+      }
+      return this.secondsToTicks(seconds);
+    }
+    return seconds * this.bpm * this.ppqn / 60;
+  }
+  /** Convert ticks to seconds — uses callback if provided, otherwise single-BPM fallback. */
+  _ticksToSeconds(ticks) {
+    if (this.ticksToSeconds) {
+      if (!this.secondsToTicks && !this._warnedMissingSecondsToTicks) {
+        this._warnedMissingSecondsToTicks = true;
+        console.warn(
+          "[waveform-playlist] daw-editor: ticksToSeconds is set but secondsToTicks is missing. Both callbacks are required for variable tempo."
+        );
+      }
+      return this.ticksToSeconds(ticks);
+    }
+    return ticks * 60 / (this.bpm * this.ppqn);
+  }
   get _totalWidth() {
+    if (this.scaleMode === "beats") {
+      const contentTicks = this._secondsToTicks(this._duration);
+      const [num] = this.timeSignature;
+      const minTicks = 32 * num * this.ppqn;
+      return Math.ceil(Math.max(contentTicks, minTicks) / this.ticksPerPixel);
+    }
     return Math.ceil(this._duration * this.effectiveSampleRate / this.samplesPerPixel);
   }
+  /** Grid height when no tracks exist — matches scroll area's rendered height. */
+  get _emptyGridHeight() {
+    const scrollArea = this.shadowRoot?.querySelector(".scroll-area");
+    return scrollArea?.clientHeight ?? 200;
+  }
   _setSelectedTrackId(trackId) {
     this._selectedTrackId = trackId;
   }
@@ -3119,13 +3558,14 @@ var DawEditorElement = class extends LitElement8 {
     if (changedProperties.has("eagerResume")) {
       this._audioResume.target = this.eagerResume;
     }
-    if (changedProperties.has("samplesPerPixel") && this._isPlaying) {
+    if ((changedProperties.has("samplesPerPixel") || changedProperties.has("ticksPerPixel") || changedProperties.has("bpm") || changedProperties.has("secondsToTicks")) && this._isPlaying) {
       this._startPlayhead();
     }
-    if (changedProperties.has("samplesPerPixel") && this._clipBuffers.size > 0) {
+    const zoomChanged = changedProperties.has("samplesPerPixel") || changedProperties.has("ticksPerPixel") || changedProperties.has("bpm") || changedProperties.has("scaleMode") || changedProperties.has("secondsToTicks");
+    if (zoomChanged && this._clipBuffers.size > 0) {
       const re = this._peakPipeline.reextractPeaks(
         this._clipBuffers,
-        this.samplesPerPixel,
+        this._renderSpp,
         this.mono,
         this._clipOffsets
       );
@@ -3234,7 +3674,7 @@ var DawEditorElement = class extends LitElement8 {
         }
         if (waveformData) {
           const wdRate = waveformData.sample_rate;
-          const clip2 = createClip2({
+          const clip2 = createClip3({
             waveformData,
             startSample: Math.round(clipDesc.start * wdRate),
             durationSamples: Math.round((clipDesc.duration || waveformData.duration) * wdRate),
@@ -3244,7 +3684,7 @@ var DawEditorElement = class extends LitElement8 {
             sampleRate: wdRate,
             sourceDurationSamples: Math.ceil(waveformData.duration * wdRate)
           });
-          const effectiveScale = Math.max(this.samplesPerPixel, waveformData.scale);
+          const effectiveScale = Math.max(this._renderSpp, waveformData.scale);
           const peakData2 = extractPeaks(
             waveformData,
             effectiveScale,
@@ -3293,7 +3733,7 @@ var DawEditorElement = class extends LitElement8 {
         }
         const audioBuffer = await audioPromise;
         this._resolvedSampleRate = audioBuffer.sampleRate;
-        const clip = createClipFromSeconds2({
+        const clip = createClipFromSeconds({
           audioBuffer,
           startTime: clipDesc.start,
           duration: clipDesc.duration || audioBuffer.duration,
@@ -3310,7 +3750,7 @@ var DawEditorElement = class extends LitElement8 {
         });
         const peakData = await this._peakPipeline.generatePeaks(
           audioBuffer,
-          this.samplesPerPixel,
+          this._renderSpp,
           this.mono,
           clip.offsetSamples,
           clip.durationSamples
@@ -3408,10 +3848,14 @@ var DawEditorElement = class extends LitElement8 {
       import("@dawcore/transport")
     ]);
     const adapter = new NativePlayoutAdapter(this.audioContext);
+    this._adapter = adapter;
+    adapter.setTempo(this._bpm);
     const engine = new PlaylistEngine({
       adapter,
       sampleRate: this.effectiveSampleRate,
       samplesPerPixel: this.samplesPerPixel,
+      bpm: this._bpm,
+      ppqn: this._ppqn,
       zoomLevels: [256, 512, 1024, 2048, 4096, 8192, this.samplesPerPixel].filter((v, i, a) => a.indexOf(v) === i).sort((a, b) => a - b)
     });
     let lastTracksVersion = -1;
@@ -3444,6 +3888,7 @@ var DawEditorElement = class extends LitElement8 {
       this._engine.dispose();
       this._engine = null;
     }
+    this._adapter = null;
     this._enginePromise = null;
   }
   async loadFiles(files) {
@@ -3581,12 +4026,13 @@ var DawEditorElement = class extends LitElement8 {
     if (!rs) return "";
     const audibleSamples = Math.max(0, rs.totalSamples - rs.latencySamples);
     if (audibleSamples === 0) return "";
-    const latencyPixels = Math.floor(rs.latencySamples / this.samplesPerPixel);
-    const left = Math.floor(rs.startSample / this.samplesPerPixel);
-    const w = Math.floor(audibleSamples / this.samplesPerPixel);
+    const renderSpp = this._renderSpp;
+    const latencyPixels = Math.floor(rs.latencySamples / renderSpp);
+    const left = Math.floor(rs.startSample / renderSpp);
+    const w = Math.floor(audibleSamples / renderSpp);
     return rs.peaks.map((chPeaks, ch) => {
       const slicedPeaks = latencyPixels > 0 ? chPeaks.slice(latencyPixels * 2) : chPeaks;
-      return html7`
+      return html8`
         <daw-waveform
           data-recording-track=${trackId}
           data-recording-channel=${ch}
@@ -3609,19 +4055,39 @@ var DawEditorElement = class extends LitElement8 {
     if (!playhead || !this._engine) return;
     const engine = this._engine;
     const ctx = this.audioContext;
-    playhead.startAnimation(
-      () => {
-        const latency = "outputLatency" in ctx ? ctx.outputLatency : 0;
-        return Math.max(0, engine.getCurrentTime() - latency);
-      },
-      this.effectiveSampleRate,
-      this.samplesPerPixel
-    );
+    if (this.scaleMode === "beats") {
+      const secondsToTicksFn = (s) => this._secondsToTicks(s);
+      playhead.startBeatsAnimationWithMap(
+        () => {
+          const latency = "outputLatency" in ctx ? ctx.outputLatency : 0;
+          return Math.max(0, engine.getCurrentTime() - latency);
+        },
+        secondsToTicksFn,
+        this.ticksPerPixel
+      );
+    } else {
+      playhead.startAnimation(
+        () => {
+          const latency = "outputLatency" in ctx ? ctx.outputLatency : 0;
+          return Math.max(0, engine.getCurrentTime() - latency);
+        },
+        this.effectiveSampleRate,
+        this.samplesPerPixel
+      );
+    }
   }
   _stopPlayhead() {
     const playhead = this._getPlayhead();
     if (!playhead) return;
-    playhead.stopAnimation(this._currentTime, this.effectiveSampleRate, this.samplesPerPixel);
+    if (this.scaleMode === "beats") {
+      playhead.stopBeatsAnimationWithMap(
+        this._currentTime,
+        (s) => this._secondsToTicks(s),
+        this.ticksPerPixel
+      );
+    } else {
+      playhead.stopAnimation(this._currentTime, this.effectiveSampleRate, this.samplesPerPixel);
+    }
   }
   _getPlayhead() {
     return this.shadowRoot?.querySelector("daw-playhead");
@@ -3642,8 +4108,18 @@ var DawEditorElement = class extends LitElement8 {
   // --- Render ---
   render() {
     const sr = this.effectiveSampleRate;
-    const selStartPx = this._selectionStartTime * sr / this.samplesPerPixel;
-    const selEndPx = this._selectionEndTime * sr / this.samplesPerPixel;
+    const spp = this._renderSpp;
+    let selStartPx;
+    let selEndPx;
+    if (this.scaleMode === "beats") {
+      const startTick = this._secondsToTicks(this._selectionStartTime);
+      const endTick = this._secondsToTicks(this._selectionEndTime);
+      selStartPx = startTick / this.ticksPerPixel;
+      selEndPx = endTick / this.ticksPerPixel;
+    } else {
+      selStartPx = this._selectionStartTime * sr / spp;
+      selEndPx = this._selectionEndTime * sr / spp;
+    }
     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);
@@ -3657,11 +4133,11 @@ var DawEditorElement = class extends LitElement8 {
         trackHeight: this.waveHeight * numChannels + (this.clipHeaders ? this.clipHeaderHeight : 0)
       };
     });
-    return html7`
-      ${orderedTracks.length > 0 ? html7`<div class="controls-column">
-            ${this.timescale ? html7`<div style="height: 30px;"></div>` : ""}
+    return html8`
+      ${orderedTracks.length > 0 ? html8`<div class="controls-column">
+            ${this.timescale ? html8`<div style="height: 30px;"></div>` : ""}
             ${orderedTracks.map(
-      (t) => html7`
+      (t) => html8`
                 <daw-track-controls
                   style="height: ${t.trackHeight}px;"
                   .trackId=${t.trackId}
@@ -3684,16 +4160,31 @@ var DawEditorElement = class extends LitElement8 {
           @dragleave=${this._onDragLeave}
           @drop=${this._onDrop}
         >
-          ${orderedTracks.length > 0 && this.timescale ? html7`<daw-ruler
-                .samplesPerPixel=${this.samplesPerPixel}
+          ${(orderedTracks.length > 0 || this.scaleMode === "beats") && this.timescale ? html8`<daw-ruler
+                .samplesPerPixel=${spp}
                 .sampleRate=${this.effectiveSampleRate}
                 .duration=${this._duration}
+                .scaleMode=${this.scaleMode}
+                .ticksPerPixel=${this.ticksPerPixel}
+                .meterEntries=${this._meterEntries}
+                .ppqn=${this.ppqn}
+                .totalWidth=${this._totalWidth}
               ></daw-ruler>` : ""}
-          ${orderedTracks.length > 0 ? html7`<daw-selection .startPx=${selStartPx} .endPx=${selEndPx}></daw-selection>
+          ${this.scaleMode === "beats" ? html8`<daw-grid
+                style="top: ${this.timescale ? 30 : 0}px;"
+                .ticksPerPixel=${this.ticksPerPixel}
+                .meterEntries=${this._meterEntries}
+                .ppqn=${this.ppqn}
+                .visibleStart=${this._viewport.visibleStart}
+                .visibleEnd=${this._viewport.visibleEnd}
+                .length=${this._totalWidth}
+                .height=${orderedTracks.length > 0 ? orderedTracks.reduce((sum, t) => sum + t.trackHeight + 1, 0) : this._emptyGridHeight}
+              ></daw-grid>` : ""}
+          ${orderedTracks.length > 0 || this.scaleMode === "beats" ? html8`<daw-selection .startPx=${selStartPx} .endPx=${selEndPx}></daw-selection>
                 <daw-playhead></daw-playhead>` : ""}
           ${orderedTracks.map((t) => {
       const channelHeight = this.waveHeight;
-      return html7`
+      return html8`
               <div
                 class="track-row ${t.trackId === this._selectedTrackId ? "selected" : ""}"
                 style="height: ${t.trackHeight}px;"
@@ -3701,21 +4192,67 @@ var DawEditorElement = class extends LitElement8 {
               >
                 ${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)];
+        let clipLeft;
+        let width;
+        if (this.scaleMode === "beats") {
+          const startTick = clip.startTick !== void 0 ? clip.startTick : this._secondsToTicks(clip.startSample / sr);
+          const durSec = clip.durationSamples / sr;
+          const startSec = clip.startTick !== void 0 ? this._ticksToSeconds(clip.startTick) : clip.startSample / sr;
+          const endTick = this._secondsToTicks(startSec + durSec);
+          clipLeft = Math.round(startTick / this.ticksPerPixel);
+          width = Math.round(endTick / this.ticksPerPixel) - clipLeft;
+        } else {
+          clipLeft = Math.floor(clip.startSample / spp);
+          width = clipPixelWidth(clip.startSample, clip.durationSamples, spp);
+        }
+        let clipSegments;
+        let segmentChannels;
+        if (this.scaleMode === "beats" && this.secondsToTicks) {
+          const audioBuffer = this._clipBuffers.get(clip.id);
+          const basePeaks = audioBuffer ? this._peakPipeline.getBaseScalePeaks(
+            audioBuffer,
+            this.mono,
+            clip.offsetSamples,
+            clip.durationSamples
+          ) : null;
+          if (basePeaks) {
+            const baseScale = basePeaks.scale;
+            segmentChannels = basePeaks.peaks.data;
+            const MIN_RENDER_STEP = 80;
+            const stepTicks = Math.max(MIN_RENDER_STEP, Math.ceil(this.ticksPerPixel));
+            const startSec = clip.startTick !== void 0 ? this._ticksToSeconds(clip.startTick) : clip.startSample / sr;
+            const clipOffsetSec = clip.offsetSamples / sr;
+            const segStartTick = clip.startTick !== void 0 ? clip.startTick : this._secondsToTicks(startSec);
+            const endTick = this._secondsToTicks(startSec + clip.durationSamples / sr);
+            clipSegments = [];
+            for (let tick = segStartTick; tick < endTick; tick += stepTicks) {
+              const segEndTick = Math.min(tick + stepTicks, endTick);
+              const segStartAudioSec = this._ticksToSeconds(tick) - startSec + clipOffsetSec;
+              const segEndAudioSec = this._ticksToSeconds(segEndTick) - startSec + clipOffsetSec;
+              const segStartSample = Math.round(segStartAudioSec * sr);
+              const segEndSample = Math.round(segEndAudioSec * sr);
+              const totalPeaks = clip.durationSamples / baseScale;
+              clipSegments.push({
+                peakStart: Math.max(0, (segStartSample - clip.offsetSamples) / baseScale),
+                peakEnd: Math.min(
+                  totalPeaks,
+                  (segEndSample - clip.offsetSamples) / baseScale
+                ),
+                pixelStart: (tick - segStartTick) / this.ticksPerPixel,
+                pixelEnd: (segEndTick - segStartTick) / this.ticksPerPixel
+              });
+            }
+          }
+        }
+        const channels = segmentChannels ?? peakData?.data ?? [new Int16Array(0)];
         const hdrH = this.clipHeaders ? this.clipHeaderHeight : 0;
         const chH = this.waveHeight;
-        return html7` <div
+        return html8` <div
                     class="clip-container"
                     style="left:${clipLeft}px;top:0;width:${width}px;height:${t.trackHeight}px;"
                     data-clip-id=${clip.id}
                   >
-                    ${hdrH > 0 ? html7`<div
+                    ${hdrH > 0 ? html8`<div
                           class="clip-header"
                           data-clip-id=${clip.id}
                           data-track-id=${t.trackId}
@@ -3724,7 +4261,7 @@ var DawEditorElement = class extends LitElement8 {
                           <span>${clip.name || t.descriptor?.name || ""}</span>
                         </div>` : ""}
                     ${channels.map(
-          (chPeaks, chIdx) => html7` <daw-waveform
+          (chPeaks, chIdx) => html8` <daw-waveform
                           style="position:absolute;left:0;top:${hdrH + chIdx * chH}px;"
                           .peaks=${chPeaks}
                           .length=${peakData?.length ?? width}
@@ -3734,9 +4271,10 @@ var DawEditorElement = class extends LitElement8 {
                           .visibleStart=${this._viewport.visibleStart}
                           .visibleEnd=${this._viewport.visibleEnd}
                           .originX=${clipLeft}
+                          .segments=${clipSegments}
                         ></daw-waveform>`
         )}
-                    ${this.interactiveClips ? html7` <div
+                    ${this.interactiveClips ? html8` <div
                             class="clip-boundary"
                             data-boundary-edge="left"
                             data-clip-id=${clip.id}
@@ -3762,7 +4300,7 @@ var DawEditorElement = class extends LitElement8 {
 };
 DawEditorElement.styles = [
   hostStyles,
-  css7`
+  css8`
       :host {
         display: flex;
         position: relative;
@@ -3792,6 +4330,15 @@ DawEditorElement.styles = [
       .track-row.selected {
         background: rgba(99, 199, 95, 0.08);
       }
+      :host([scale-mode='beats']) .track-row {
+        background: transparent;
+      }
+      :host([scale-mode='beats']) .clip-container {
+        background: var(--daw-track-background, #16213e);
+      }
+      :host([scale-mode='beats']) .track-row.selected .clip-container {
+        box-shadow: inset 0 0 0 1000px rgba(99, 199, 95, 0.06);
+      }
       .timeline.drag-over {
         outline: 2px dashed var(--daw-selection-color, rgba(99, 199, 95, 0.3));
         outline-offset: -2px;
@@ -3801,37 +4348,64 @@ DawEditorElement.styles = [
 ];
 DawEditorElement._CONTROL_PROPS = /* @__PURE__ */ new Set(["volume", "pan", "muted", "soloed"]);
 __decorateClass([
-  property6({ type: Number, attribute: "samples-per-pixel", noAccessor: true })
+  property7({ type: Number, attribute: "samples-per-pixel", noAccessor: true })
 ], DawEditorElement.prototype, "samplesPerPixel", 1);
 __decorateClass([
-  property6({ type: Number, attribute: "wave-height" })
+  property7({ type: Number, attribute: "wave-height" })
 ], DawEditorElement.prototype, "waveHeight", 2);
 __decorateClass([
-  property6({ type: Boolean })
+  property7({ type: Boolean })
 ], DawEditorElement.prototype, "timescale", 2);
 __decorateClass([
-  property6({ type: Boolean })
+  property7({ type: Boolean })
 ], DawEditorElement.prototype, "mono", 2);
 __decorateClass([
-  property6({ type: Number, attribute: "bar-width" })
+  property7({ type: Number, attribute: "bar-width" })
 ], DawEditorElement.prototype, "barWidth", 2);
 __decorateClass([
-  property6({ type: Number, attribute: "bar-gap" })
+  property7({ type: Number, attribute: "bar-gap" })
 ], DawEditorElement.prototype, "barGap", 2);
 __decorateClass([
-  property6({ type: Boolean, attribute: "file-drop" })
+  property7({ type: Boolean, attribute: "file-drop" })
 ], DawEditorElement.prototype, "fileDrop", 2);
 __decorateClass([
-  property6({ type: Boolean, attribute: "clip-headers" })
+  property7({ type: Boolean, attribute: "clip-headers" })
 ], DawEditorElement.prototype, "clipHeaders", 2);
 __decorateClass([
-  property6({ type: Number, attribute: "clip-header-height" })
+  property7({ type: Number, attribute: "clip-header-height" })
 ], DawEditorElement.prototype, "clipHeaderHeight", 2);
 __decorateClass([
-  property6({ type: Boolean, attribute: "interactive-clips" })
+  property7({ type: Boolean, attribute: "interactive-clips" })
 ], DawEditorElement.prototype, "interactiveClips", 2);
 __decorateClass([
-  property6({ type: Number, attribute: "sample-rate" })
+  property7({ type: String, attribute: "scale-mode" })
+], DawEditorElement.prototype, "scaleMode", 2);
+__decorateClass([
+  property7({ type: Number, attribute: "ticks-per-pixel", noAccessor: true })
+], DawEditorElement.prototype, "ticksPerPixel", 1);
+__decorateClass([
+  property7({ type: Number, noAccessor: true })
+], DawEditorElement.prototype, "bpm", 1);
+__decorateClass([
+  property7({ attribute: false })
+], DawEditorElement.prototype, "timeSignature", 2);
+__decorateClass([
+  property7({ attribute: false })
+], DawEditorElement.prototype, "meterEntries", 2);
+__decorateClass([
+  property7({ type: Number, noAccessor: true })
+], DawEditorElement.prototype, "ppqn", 1);
+__decorateClass([
+  property7({ type: String, attribute: "snap-to" })
+], DawEditorElement.prototype, "snapTo", 2);
+__decorateClass([
+  property7({ attribute: false })
+], DawEditorElement.prototype, "secondsToTicks", 2);
+__decorateClass([
+  property7({ attribute: false })
+], DawEditorElement.prototype, "ticksToSeconds", 2);
+__decorateClass([
+  property7({ type: Number, attribute: "sample-rate" })
 ], DawEditorElement.prototype, "sampleRate", 2);
 __decorateClass([
   state3()
@@ -3855,15 +4429,15 @@ __decorateClass([
   state3()
 ], DawEditorElement.prototype, "_dragOver", 2);
 __decorateClass([
-  property6({ attribute: "eager-resume" })
+  property7({ attribute: "eager-resume" })
 ], DawEditorElement.prototype, "eagerResume", 2);
 DawEditorElement = __decorateClass([
-  customElement10("daw-editor")
+  customElement11("daw-editor")
 ], DawEditorElement);
 
 // src/elements/daw-ruler.ts
-import { LitElement as LitElement9, html as html8, css as css8 } from "lit";
-import { customElement as customElement11, property as property7 } from "lit/decorators.js";
+import { LitElement as LitElement10, html as html9, css as css9 } from "lit";
+import { customElement as customElement12, property as property8 } from "lit/decorators.js";
 
 // src/utils/time-format.ts
 function formatTime(milliseconds) {
@@ -3914,18 +4488,36 @@ function computeTemporalTicks(samplesPerPixel, sampleRate, duration, rulerHeight
 }
 
 // src/elements/daw-ruler.ts
-var MAX_CANVAS_WIDTH2 = 1e3;
-var DawRulerElement = class extends LitElement9 {
+var MAX_CANVAS_WIDTH3 = 1e3;
+var DawRulerElement = class extends LitElement10 {
   constructor() {
     super(...arguments);
     this.samplesPerPixel = 1024;
     this.sampleRate = 48e3;
     this.duration = 0;
     this.rulerHeight = 30;
+    this.scaleMode = "temporal";
+    this.ticksPerPixel = 4;
+    this.meterEntries = [
+      { tick: 0, numerator: 4, denominator: 4 }
+    ];
+    this.ppqn = 960;
+    this.totalWidth = 0;
     this._tickData = null;
+    this._musicalTickData = null;
   }
   willUpdate() {
-    if (this.duration > 0) {
+    if (this.scaleMode === "beats" && this.totalWidth > 0) {
+      this._musicalTickData = getCachedMusicalTicks({
+        meterEntries: this.meterEntries,
+        ticksPerPixel: this.ticksPerPixel,
+        startPixel: 0,
+        endPixel: this.totalWidth,
+        ppqn: this.ppqn
+      });
+      this._tickData = null;
+    } else if (this.duration > 0) {
+      this._musicalTickData = null;
       this._tickData = computeTemporalTicks(
         this.samplesPerPixel,
         this.sampleRate,
@@ -3933,30 +4525,39 @@ var DawRulerElement = class extends LitElement9 {
         this.rulerHeight
       );
     } else {
+      this._musicalTickData = null;
       this._tickData = null;
     }
   }
   render() {
-    if (!this._tickData) return html8``;
-    const { widthX, labels } = this._tickData;
-    const totalChunks = Math.ceil(widthX / MAX_CANVAS_WIDTH2);
+    const widthX = this.scaleMode === "beats" ? this.totalWidth : this._tickData?.widthX ?? 0;
+    if (widthX <= 0) return html9``;
+    const totalChunks = Math.ceil(widthX / MAX_CANVAS_WIDTH3);
     const indices = Array.from({ length: totalChunks }, (_, i) => i);
     const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
-    return html8`
+    const beatsLabels = this.scaleMode === "beats" ? this._musicalTickData?.ticks.filter((t) => t.label) ?? [] : [];
+    const temporalLabels = this.scaleMode !== "beats" ? this._tickData?.labels ?? [] : [];
+    return html9`
       <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`
+      const width = Math.min(MAX_CANVAS_WIDTH3, widthX - i * MAX_CANVAS_WIDTH3);
+      return html9`
             <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;"
+              style="left: ${i * MAX_CANVAS_WIDTH3}px; width: ${width}px; height: ${this.rulerHeight}px;"
             ></canvas>
           `;
     })}
-        ${labels.map(
-      ({ pix, text }) => html8`<span class="label" style="left: ${pix + 4}px;">${text}</span>`
+        ${this.scaleMode === "beats" ? beatsLabels.map(
+      (t) => html9`<span
+                  class="label ${t.pixel > 0 ? "centered" : ""}"
+                  style="left: ${t.pixel > 0 ? t.pixel : t.pixel + 4}px;"
+                  >${t.label}</span
+                >`
+    ) : temporalLabels.map(
+      ({ pix, text }) => html9`<span class="label" style="left: ${pix + 4}px;">${text}</span>`
     )}
       </div>
     `;
@@ -3965,37 +4566,49 @@ var DawRulerElement = class extends LitElement9 {
     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";
+    const widthX = this.scaleMode === "beats" ? this.totalWidth : this._tickData?.widthX ?? 0;
     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;
+      const canvasWidth = Math.min(MAX_CANVAS_WIDTH3, widthX - idx * MAX_CANVAS_WIDTH3);
+      const globalOffset = idx * MAX_CANVAS_WIDTH3;
       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();
+      if (this.scaleMode === "beats" && this._musicalTickData) {
+        const h = this.rulerHeight;
+        for (const tick of this._musicalTickData.ticks) {
+          const localX = tick.pixel - globalOffset;
+          if (localX < 0 || localX >= canvasWidth) continue;
+          const tickH = tick.type === "major" ? h * 0.6 : tick.type === "minor" ? h * 0.35 : h * 0.15;
+          ctx.globalAlpha = tick.type === "major" ? 1 : 0.5;
+          ctx.beginPath();
+          ctx.moveTo(localX + 0.5, h);
+          ctx.lineTo(localX + 0.5, h - tickH);
+          ctx.stroke();
+        }
+        ctx.globalAlpha = 1;
+      } else if (this._tickData) {
+        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 = css8`
+DawRulerElement.styles = css9`
     :host {
       display: block;
       position: relative;
@@ -4011,31 +4624,50 @@ DawRulerElement.styles = css8`
     .label {
       position: absolute;
       font-size: 0.7rem;
+      line-height: 1;
       white-space: nowrap;
       color: var(--daw-ruler-color, #c49a6c);
-      top: 2px;
+      top: 1px;
+    }
+    .label.centered {
+      transform: translateX(-50%);
     }
   `;
 __decorateClass([
-  property7({ type: Number, attribute: false })
+  property8({ type: Number, attribute: false })
 ], DawRulerElement.prototype, "samplesPerPixel", 2);
 __decorateClass([
-  property7({ type: Number, attribute: false })
+  property8({ type: Number, attribute: false })
 ], DawRulerElement.prototype, "sampleRate", 2);
 __decorateClass([
-  property7({ type: Number, attribute: false })
+  property8({ type: Number, attribute: false })
 ], DawRulerElement.prototype, "duration", 2);
 __decorateClass([
-  property7({ type: Number, attribute: false })
+  property8({ type: Number, attribute: false })
 ], DawRulerElement.prototype, "rulerHeight", 2);
+__decorateClass([
+  property8({ type: String, attribute: false })
+], DawRulerElement.prototype, "scaleMode", 2);
+__decorateClass([
+  property8({ type: Number, attribute: false })
+], DawRulerElement.prototype, "ticksPerPixel", 2);
+__decorateClass([
+  property8({ attribute: false })
+], DawRulerElement.prototype, "meterEntries", 2);
+__decorateClass([
+  property8({ type: Number, attribute: false })
+], DawRulerElement.prototype, "ppqn", 2);
+__decorateClass([
+  property8({ type: Number, attribute: false })
+], DawRulerElement.prototype, "totalWidth", 2);
 DawRulerElement = __decorateClass([
-  customElement11("daw-ruler")
+  customElement12("daw-ruler")
 ], DawRulerElement);
 
 // src/elements/daw-selection.ts
-import { LitElement as LitElement10, html as html9, css as css9 } from "lit";
-import { customElement as customElement12, property as property8 } from "lit/decorators.js";
-var DawSelectionElement = class extends LitElement10 {
+import { LitElement as LitElement11, html as html10, css as css10 } from "lit";
+import { customElement as customElement13, property as property9 } from "lit/decorators.js";
+var DawSelectionElement = class extends LitElement11 {
   constructor() {
     super(...arguments);
     this.startPx = 0;
@@ -4044,11 +4676,11 @@ var DawSelectionElement = class extends LitElement10 {
   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>`;
+    if (width === 0) return html10``;
+    return html10`<div style="left: ${left}px; width: ${width}px;"></div>`;
   }
 };
-DawSelectionElement.styles = css9`
+DawSelectionElement.styles = css10`
     :host {
       position: absolute;
       top: 0;
@@ -4065,18 +4697,18 @@ DawSelectionElement.styles = css9`
     }
   `;
 __decorateClass([
-  property8({ type: Number, attribute: false })
+  property9({ type: Number, attribute: false })
 ], DawSelectionElement.prototype, "startPx", 2);
 __decorateClass([
-  property8({ type: Number, attribute: false })
+  property9({ type: Number, attribute: false })
 ], DawSelectionElement.prototype, "endPx", 2);
 DawSelectionElement = __decorateClass([
-  customElement12("daw-selection")
+  customElement13("daw-selection")
 ], DawSelectionElement);
 
 // src/elements/daw-record-button.ts
-import { html as html10, css as css10 } from "lit";
-import { customElement as customElement13, state as state4 } from "lit/decorators.js";
+import { html as html11, css as css11 } from "lit";
+import { customElement as customElement14, state as state4 } from "lit/decorators.js";
 var DawRecordButtonElement = class extends DawTransportButton {
   constructor() {
     super(...arguments);
@@ -4117,7 +4749,7 @@ var DawRecordButtonElement = class extends DawTransportButton {
     }
   }
   render() {
-    return html10`
+    return html11`
       <button part="button" ?data-recording=${this._isRecording} @click=${this._onClick}>
         <slot>Record</slot>
       </button>
@@ -4137,7 +4769,7 @@ var DawRecordButtonElement = class extends DawTransportButton {
 };
 DawRecordButtonElement.styles = [
   DawTransportButton.styles,
-  css10`
+  css11`
       button[data-recording] {
         color: #d08070;
         border-color: #d08070;
@@ -4149,14 +4781,14 @@ __decorateClass([
   state4()
 ], DawRecordButtonElement.prototype, "_isRecording", 2);
 DawRecordButtonElement = __decorateClass([
-  customElement13("daw-record-button")
+  customElement14("daw-record-button")
 ], DawRecordButtonElement);
 
 // src/elements/daw-keyboard-shortcuts.ts
-import { LitElement as LitElement11 } from "lit";
-import { customElement as customElement14, property as property9 } from "lit/decorators.js";
+import { LitElement as LitElement12 } from "lit";
+import { customElement as customElement15, property as property10 } from "lit/decorators.js";
 import { handleKeyboardEvent } from "@waveform-playlist/core";
-var DawKeyboardShortcutsElement = class extends LitElement11 {
+var DawKeyboardShortcutsElement = class extends LitElement12 {
   constructor() {
     super(...arguments);
     this.playback = false;
@@ -4310,22 +4942,23 @@ var DawKeyboardShortcutsElement = class extends LitElement11 {
   }
 };
 __decorateClass([
-  property9({ type: Boolean })
+  property10({ type: Boolean })
 ], DawKeyboardShortcutsElement.prototype, "playback", 2);
 __decorateClass([
-  property9({ type: Boolean })
+  property10({ type: Boolean })
 ], DawKeyboardShortcutsElement.prototype, "splitting", 2);
 __decorateClass([
-  property9({ type: Boolean })
+  property10({ type: Boolean })
 ], DawKeyboardShortcutsElement.prototype, "undo", 2);
 DawKeyboardShortcutsElement = __decorateClass([
-  customElement14("daw-keyboard-shortcuts")
+  customElement15("daw-keyboard-shortcuts")
 ], DawKeyboardShortcutsElement);
 export {
   AudioResumeController,
   ClipPointerHandler,
   DawClipElement,
   DawEditorElement,
+  DawGridElement,
   DawKeyboardShortcutsElement,
   DawPauseButtonElement,
   DawPlayButtonElement,