@dawcore/components 0.0.20 → 0.0.22

package/dist/index.mjs

@@ -1196,8 +1196,8 @@ DawStopButtonElement = __decorateClass([
 ], DawStopButtonElement);
 
 // src/elements/daw-editor.ts
-import { LitElement as LitElement10, html as html9, css as css9 } from "lit";
-import { customElement as customElement12, property as property8, state as state3 } from "lit/decorators.js";
+import { LitElement as LitElement11, html as html10, css as css10 } from "lit";
+import { customElement as customElement13, property as property9, state as state3 } from "lit/decorators.js";
 
 // src/types.ts
 function isDomClip(desc) {
@@ -1681,10 +1681,268 @@ var PeakPipeline = class {
   }
 };
 
-// src/elements/daw-track-controls.ts
+// src/elements/daw-ruler.ts
 import { LitElement as LitElement8, html as html7, css as css6 } from "lit";
 import { customElement as customElement10, property as property6 } from "lit/decorators.js";
-var DawTrackControlsElement = class extends LitElement8 {
+
+// 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/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-ruler.ts
+var MAX_CANVAS_WIDTH3 = 1e3;
+var DawRulerElement = class extends LitElement8 {
+  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.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.totalWidth > 0) {
+      const widthDerivedDuration = this.totalWidth * this.samplesPerPixel / this.sampleRate;
+      const effectiveDuration = Math.max(this.duration, widthDerivedDuration);
+      this._musicalTickData = null;
+      this._tickData = computeTemporalTicks(
+        this.samplesPerPixel,
+        this.sampleRate,
+        effectiveDuration,
+        this.rulerHeight
+      );
+    } else {
+      this._musicalTickData = null;
+      this._tickData = null;
+    }
+  }
+  render() {
+    const widthX = this.scaleMode === "beats" ? this.totalWidth : this._tickData?.widthX ?? 0;
+    if (widthX <= 0) return html7``;
+    const totalChunks = Math.ceil(widthX / MAX_CANVAS_WIDTH3);
+    const indices = Array.from({ length: totalChunks }, (_, i) => i);
+    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
+    const beatsLabels = this.scaleMode === "beats" ? this._musicalTickData?.ticks.filter((t) => t.label) ?? [] : [];
+    const temporalLabels = this.scaleMode !== "beats" ? this._tickData?.labels ?? [] : [];
+    return html7`
+      <div class="container" style="width: ${widthX}px; height: ${this.rulerHeight}px;">
+        ${indices.map((i) => {
+      const width = Math.min(MAX_CANVAS_WIDTH3, widthX - i * MAX_CANVAS_WIDTH3);
+      return html7`
+            <canvas
+              data-index=${i}
+              width=${width * dpr}
+              height=${this.rulerHeight * dpr}
+              style="left: ${i * MAX_CANVAS_WIDTH3}px; width: ${width}px; height: ${this.rulerHeight}px;"
+            ></canvas>
+          `;
+    })}
+        ${this.scaleMode === "beats" ? beatsLabels.map(
+      (t) => html7`<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 }) => html7`<span class="label" style="left: ${pix + 4}px;">${text}</span>`
+    )}
+      </div>
+    `;
+  }
+  updated() {
+    this._drawTicks();
+  }
+  _drawTicks() {
+    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_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;
+      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 = css6`
+    :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;
+      line-height: 1;
+      white-space: nowrap;
+      color: var(--daw-ruler-color, #c49a6c);
+      top: 1px;
+    }
+    .label.centered {
+      transform: translateX(-50%);
+    }
+  `;
+__decorateClass([
+  property6({ type: Number, attribute: false })
+], DawRulerElement.prototype, "samplesPerPixel", 2);
+__decorateClass([
+  property6({ type: Number, attribute: false })
+], DawRulerElement.prototype, "sampleRate", 2);
+__decorateClass([
+  property6({ type: Number, attribute: false })
+], DawRulerElement.prototype, "duration", 2);
+__decorateClass([
+  property6({ type: Number, attribute: false })
+], DawRulerElement.prototype, "rulerHeight", 2);
+__decorateClass([
+  property6({ type: String, attribute: false })
+], DawRulerElement.prototype, "scaleMode", 2);
+__decorateClass([
+  property6({ type: Number, attribute: false })
+], DawRulerElement.prototype, "ticksPerPixel", 2);
+__decorateClass([
+  property6({ attribute: false })
+], DawRulerElement.prototype, "meterEntries", 2);
+__decorateClass([
+  property6({ type: Number, attribute: false })
+], DawRulerElement.prototype, "ppqn", 2);
+__decorateClass([
+  property6({ type: Number, attribute: false })
+], DawRulerElement.prototype, "totalWidth", 2);
+DawRulerElement = __decorateClass([
+  customElement10("daw-ruler")
+], DawRulerElement);
+
+// src/elements/daw-track-controls.ts
+import { LitElement as LitElement9, html as html8, css as css7 } from "lit";
+import { customElement as customElement11, property as property7 } from "lit/decorators.js";
+var DawTrackControlsElement = class extends LitElement9 {
   constructor() {
     super(...arguments);
     this.trackId = null;
@@ -1718,6 +1976,17 @@ var DawTrackControlsElement = class extends LitElement8 {
       );
     };
   }
+  firstUpdated() {
+    requestAnimationFrame(() => {
+      if (!this.isConnected) return;
+      const rect = this.getBoundingClientRect();
+      if (rect.width > 0 && rect.height === 0) {
+        console.warn(
+          "[dawcore] <daw-track-controls> has zero height: container-type: size requires an explicit height on the element (the editor sets one automatically; standalone usage must too). The controls are currently invisible."
+        );
+      }
+    });
+  }
   _dispatchControl(prop, value) {
     if (!this.trackId) return;
     this.dispatchEvent(
@@ -1732,7 +2001,7 @@ var DawTrackControlsElement = class extends LitElement8 {
     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 html7`
+    return html8`
       <div class="header">
         <span class="name" title=${this.trackName}>${this.trackName || "Untitled"}</span>
         <button class="remove-btn" @click=${this._onRemoveClick} title="Remove track">
@@ -1751,7 +2020,7 @@ var DawTrackControlsElement = class extends LitElement8 {
           S
         </button>
       </div>
-      <div class="slider-row">
+      <div class="slider-row vol-row">
         <span class="slider-label">
           <span class="slider-label-name">Vol</span>
           <span class="slider-label-value">${volPercent}%</span>
@@ -1765,7 +2034,7 @@ var DawTrackControlsElement = class extends LitElement8 {
           @input=${this._onVolumeInput}
         />
       </div>
-      <div class="slider-row">
+      <div class="slider-row pan-row">
         <span class="slider-label">
           <span class="slider-label-name">Pan</span>
           <span class="slider-label-value">${panDisplay}</span>
@@ -1782,7 +2051,7 @@ var DawTrackControlsElement = class extends LitElement8 {
     `;
   }
 };
-DawTrackControlsElement.styles = css6`
+DawTrackControlsElement.styles = css7`
     :host {
       display: flex;
       flex-direction: column;
@@ -1795,6 +2064,7 @@ DawTrackControlsElement.styles = css6`
       font-family: system-ui, sans-serif;
       font-size: 11px;
       overflow: hidden;
+      container-type: size;
     }
     .header {
       display: flex;
@@ -1914,64 +2184,52 @@ DawTrackControlsElement.styles = css6`
       border: none;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
     }
+    /* Compact modes: drop sliders when the row is too short for the full
+       stack. Thresholds are CONTENT-BOX heights — the host is border-box
+       with 12px vertical padding + 1px border, so an editor-given height H
+       enters compact mode at H <= 89px (Pan hidden) and H <= 73px (Vol also
+       hidden). NOTE: container-type: size requires an explicit height on
+       the host — the editor always provides one; standalone consumers must
+       too (see the firstUpdated guard). */
+    @container (max-height: 76px) {
+      .pan-row {
+        display: none;
+      }
+    }
+    @container (max-height: 60px) {
+      .vol-row {
+        display: none;
+      }
+    }
   `;
 __decorateClass([
-  property6({ attribute: false })
+  property7({ attribute: false })
 ], DawTrackControlsElement.prototype, "trackId", 2);
 __decorateClass([
-  property6({ attribute: false })
+  property7({ attribute: false })
 ], DawTrackControlsElement.prototype, "trackName", 2);
 __decorateClass([
-  property6({ type: Number, attribute: false })
+  property7({ type: Number, attribute: false })
 ], DawTrackControlsElement.prototype, "volume", 2);
 __decorateClass([
-  property6({ type: Number, attribute: false })
+  property7({ type: Number, attribute: false })
 ], DawTrackControlsElement.prototype, "pan", 2);
 __decorateClass([
-  property6({ type: Boolean, attribute: false })
+  property7({ type: Boolean, attribute: false })
 ], DawTrackControlsElement.prototype, "muted", 2);
 __decorateClass([
-  property6({ type: Boolean, attribute: false })
+  property7({ type: Boolean, attribute: false })
 ], DawTrackControlsElement.prototype, "soloed", 2);
 DawTrackControlsElement = __decorateClass([
-  customElement10("daw-track-controls")
+  customElement11("daw-track-controls")
 ], DawTrackControlsElement);
 
 // src/elements/daw-grid.ts
-import { LitElement as LitElement9, html as html8, css as css7 } from "lit";
-import { customElement as customElement11, property as property7 } from "lit/decorators.js";
+import { LitElement as LitElement10, html as html9, css as css8 } from "lit";
+import { customElement as customElement12, property as property8 } 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_WIDTH3 = 1e3;
-var DawGridElement = class extends LitElement9 {
+var MAX_CANVAS_WIDTH4 = 1e3;
+var DawGridElement = class extends LitElement10 {
   constructor() {
     super(...arguments);
     this.ticksPerPixel = 24;
@@ -1999,25 +2257,25 @@ var DawGridElement = class extends LitElement9 {
     }
   }
   render() {
-    if (!this._tickData) return html8``;
+    if (!this._tickData) return html9``;
     const totalWidth = this.length;
     const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
     const indices = getVisibleChunkIndices(
       totalWidth,
-      MAX_CANVAS_WIDTH3,
+      MAX_CANVAS_WIDTH4,
       this.visibleStart,
       this.visibleEnd
     );
-    return html8`
+    return html9`
       <div class="container" style="width: ${totalWidth}px; height: ${this.height}px;">
         ${indices.map((i) => {
-      const width = Math.min(MAX_CANVAS_WIDTH3, totalWidth - i * MAX_CANVAS_WIDTH3);
-      return html8`
+      const width = Math.min(MAX_CANVAS_WIDTH4, totalWidth - i * MAX_CANVAS_WIDTH4);
+      return html9`
             <canvas
               data-index=${i}
               width=${width * dpr}
               height=${this.height * dpr}
-              style="left: ${i * MAX_CANVAS_WIDTH3}px; width: ${width}px; height: ${this.height}px;"
+              style="left: ${i * MAX_CANVAS_WIDTH4}px; width: ${width}px; height: ${this.height}px;"
             ></canvas>
           `;
     })}
@@ -2041,8 +2299,8 @@ var DawGridElement = class extends LitElement9 {
       const idx = Number(canvas.dataset.index);
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
-      const chunkLeft = idx * MAX_CANVAS_WIDTH3;
-      const canvasWidth = Math.min(MAX_CANVAS_WIDTH3, this.length - chunkLeft);
+      const chunkLeft = idx * MAX_CANVAS_WIDTH4;
+      const canvasWidth = Math.min(MAX_CANVAS_WIDTH4, this.length - chunkLeft);
       ctx.resetTransform();
       ctx.clearRect(0, 0, canvas.width, canvas.height);
       ctx.scale(dpr, dpr);
@@ -2073,7 +2331,7 @@ var DawGridElement = class extends LitElement9 {
     }
   }
 };
-DawGridElement.styles = css7`
+DawGridElement.styles = css8`
     :host {
       display: block;
       position: absolute;
@@ -2091,33 +2349,33 @@ DawGridElement.styles = css7`
     }
   `;
 __decorateClass([
-  property7({ type: Number, attribute: false })
+  property8({ type: Number, attribute: false })
 ], DawGridElement.prototype, "ticksPerPixel", 2);
 __decorateClass([
-  property7({ attribute: false })
+  property8({ attribute: false })
 ], DawGridElement.prototype, "meterEntries", 2);
 __decorateClass([
-  property7({ type: Number, attribute: false })
+  property8({ type: Number, attribute: false })
 ], DawGridElement.prototype, "ppqn", 2);
 __decorateClass([
-  property7({ type: Number, attribute: false })
+  property8({ type: Number, attribute: false })
 ], DawGridElement.prototype, "visibleStart", 2);
 __decorateClass([
-  property7({ type: Number, attribute: false })
+  property8({ type: Number, attribute: false })
 ], DawGridElement.prototype, "visibleEnd", 2);
 __decorateClass([
-  property7({ type: Number, attribute: false })
+  property8({ type: Number, attribute: false })
 ], DawGridElement.prototype, "length", 2);
 __decorateClass([
-  property7({ type: Number, attribute: false })
+  property8({ type: Number, attribute: false })
 ], DawGridElement.prototype, "height", 2);
 DawGridElement = __decorateClass([
-  customElement11("daw-grid")
+  customElement12("daw-grid")
 ], DawGridElement);
 
 // src/styles/theme.ts
-import { css as css8 } from "lit";
-var hostStyles = css8`
+import { css as css9 } from "lit";
+var hostStyles = css9`
   :host {
     --daw-wave-color: #c49a6c;
     --daw-progress-color: #63c75f;
@@ -2133,7 +2391,7 @@ var hostStyles = css8`
     --daw-clip-header-text: #e0d4c8;
   }
 `;
-var clipStyles = css8`
+var clipStyles = css9`
   .clip-container {
     position: absolute;
     overflow: hidden;
@@ -2885,7 +3143,11 @@ var PointerHandler = class {
           e.preventDefault();
           this._timeline = this._host.shadowRoot?.querySelector(".timeline");
           if (this._timeline) {
-            this._timeline.setPointerCapture(e.pointerId);
+            try {
+              this._timeline.setPointerCapture(e.pointerId);
+            } catch (err) {
+              console.warn("[dawcore] setPointerCapture failed: " + String(err));
+            }
             const onMove = (me) => clipHandler.onPointerMove(me);
             const onUp = (ue) => {
               clipHandler.onPointerUp(ue);
@@ -2907,11 +3169,20 @@ var PointerHandler = class {
         }
       }
       this._timeline = this._host.shadowRoot?.querySelector(".timeline");
-      if (!this._timeline) return;
+      if (!this._timeline) {
+        console.warn(
+          "[dawcore] PointerHandler: .timeline not found in shadow root \u2014 seek/selection ignored"
+        );
+        return;
+      }
       this._timelineRect = this._timeline.getBoundingClientRect();
       this._dragStartPx = this._pxFromPointer(e);
       this._isDragging = false;
-      this._timeline.setPointerCapture(e.pointerId);
+      try {
+        this._timeline.setPointerCapture(e.pointerId);
+      } catch (err) {
+        console.warn("[dawcore] setPointerCapture failed: " + String(err));
+      }
       this._timeline.addEventListener("pointermove", this._onPointerMove);
       this._timeline.addEventListener("pointerup", this._onPointerUp);
     };
@@ -3843,9 +4114,143 @@ async function loadWaveformDataFromUrl(src) {
   }
 }
 
+// src/controllers/scroll-sync-controller.ts
+var LINE_HEIGHT_PX = 16;
+var ScrollSyncController = class {
+  constructor(host) {
+    this._scrollContainer = null;
+    this._wheelTargets = /* @__PURE__ */ new Set();
+    this._warnedX = false;
+    this._warnedY = false;
+    /** Selector (in host shadow DOM) for the scroll container. */
+    this.scrollSelector = "";
+    /** Selector for the element receiving translate3d(-scrollLeft, 0, 0). */
+    this.xTargetSelector = "";
+    /** Selector for the element receiving translate3d(0, -scrollTop, 0). */
+    this.yTargetSelector = "";
+    /**
+     * Selector (or comma-separated selectors) for elements whose wheel events
+     * forward to the scroll container. All matching elements receive listeners.
+     */
+    this.wheelForwardSelector = "";
+    this._onScroll = () => {
+      this._apply();
+    };
+    this._onWheel = (e) => {
+      const sc = this._scrollContainer;
+      if (!sc) return;
+      const scale = e.deltaMode === WheelEvent.DOM_DELTA_LINE ? LINE_HEIGHT_PX : e.deltaMode === WheelEvent.DOM_DELTA_PAGE ? sc.clientHeight : 1;
+      const scaleX = e.deltaMode === WheelEvent.DOM_DELTA_PAGE ? sc.clientWidth : scale;
+      const beforeLeft = sc.scrollLeft;
+      const beforeTop = sc.scrollTop;
+      sc.scrollLeft += e.deltaX * scaleX;
+      sc.scrollTop += e.deltaY * scale;
+      if (sc.scrollLeft !== beforeLeft || sc.scrollTop !== beforeTop) {
+        e.preventDefault();
+      }
+    };
+    this._host = host;
+    host.addController(this);
+  }
+  hostConnected() {
+    requestAnimationFrame(() => {
+      if (!this._host.isConnected) return;
+      this._attach();
+      if (!this._scrollContainer && this.scrollSelector) {
+        console.warn(
+          '[dawcore] ScrollSyncController: scroll container not found for "' + this.scrollSelector + '"'
+        );
+      }
+    });
+  }
+  hostDisconnected() {
+    this._scrollContainer?.removeEventListener("scroll", this._onScroll);
+    this._scrollContainer = null;
+    for (const target of this._wheelTargets) {
+      target.removeEventListener("wheel", this._onWheel);
+    }
+    this._wheelTargets.clear();
+  }
+  /**
+   * Re-attach and re-apply transforms from the current scroll position.
+   * Called from the host's updated() so elements created by a re-render
+   * (e.g. the ruler appearing when the first track loads) pick up the
+   * current offset and listeners.
+   */
+  sync() {
+    this._attach();
+  }
+  _query(selector) {
+    return selector ? this._host.shadowRoot?.querySelector(selector) : null;
+  }
+  _queryAll(selector) {
+    if (!selector) return [];
+    return Array.from(this._host.shadowRoot?.querySelectorAll(selector) ?? []);
+  }
+  _attach() {
+    const container = this._query(this.scrollSelector);
+    if (!container) {
+      if (this._scrollContainer && !this._scrollContainer.isConnected) {
+        console.warn(
+          '[dawcore] ScrollSyncController: scroll container "' + this.scrollSelector + '" was removed from the DOM \u2014 detaching listeners until it reappears.'
+        );
+        this._scrollContainer.removeEventListener("scroll", this._onScroll);
+        this._scrollContainer = null;
+        for (const t of this._wheelTargets) t.removeEventListener("wheel", this._onWheel);
+        this._wheelTargets.clear();
+      }
+      return;
+    }
+    if (container !== this._scrollContainer) {
+      this._scrollContainer?.removeEventListener("scroll", this._onScroll);
+      this._scrollContainer = container;
+      container.addEventListener("scroll", this._onScroll, { passive: true });
+    }
+    const nextTargets = new Set(this._queryAll(this.wheelForwardSelector));
+    for (const old of this._wheelTargets) {
+      if (!nextTargets.has(old)) {
+        old.removeEventListener("wheel", this._onWheel);
+        this._wheelTargets.delete(old);
+      }
+    }
+    for (const next of nextTargets) {
+      if (!this._wheelTargets.has(next)) {
+        next.addEventListener("wheel", this._onWheel, { passive: false });
+        this._wheelTargets.add(next);
+      }
+    }
+    this._apply();
+  }
+  _apply() {
+    const sc = this._scrollContainer;
+    if (!sc) return;
+    const xTarget = this._query(this.xTargetSelector);
+    if (xTarget) {
+      xTarget.style.transform = `translate3d(${-sc.scrollLeft}px, 0, 0)`;
+      this._warnedX = false;
+    } else if (this.xTargetSelector && sc.scrollLeft !== 0 && !this._warnedX) {
+      this._warnedX = true;
+      console.warn(
+        '[dawcore] ScrollSyncController: x target "' + this.xTargetSelector + '" not found while scrolled \u2014 the synced pane will appear frozen. Check the selector, or clear it if the target is intentionally not rendered.'
+      );
+    }
+    const yTarget = this._query(this.yTargetSelector);
+    if (yTarget) {
+      yTarget.style.transform = `translate3d(0, ${-sc.scrollTop}px, 0)`;
+      this._warnedY = false;
+    } else if (this.yTargetSelector && sc.scrollTop !== 0 && !this._warnedY) {
+      this._warnedY = true;
+      console.warn(
+        '[dawcore] ScrollSyncController: y target "' + this.yTargetSelector + '" not found while scrolled \u2014 the synced pane will appear frozen. Check the selector, or clear it if the target is intentionally not rendered.'
+      );
+    }
+  }
+};
+
 // src/elements/daw-editor.ts
+var RULER_HEIGHT = 30;
 var NO_ADAPTER_ERROR = "No PlayoutAdapter set on <daw-editor>. Set editor.adapter before use.\n\n  // Option 1: Native Web Audio (no Tone.js)\n  npm install @dawcore/transport\n  import { NativePlayoutAdapter } from '@dawcore/transport';\n  editor.adapter = new NativePlayoutAdapter(new AudioContext());\n\n  // Option 2: Tone.js (effects, MIDI synths)\n  npm install @waveform-playlist/playout\n  import { createToneAdapter } from '@waveform-playlist/playout';\n  editor.adapter = createToneAdapter();";
-var DawEditorElement = class extends LitElement10 {
+var DawEditorElement = class extends LitElement11 {
   constructor() {
     super(...arguments);
     this._samplesPerPixel = 1024;
@@ -3904,6 +4309,11 @@ var DawEditorElement = class extends LitElement10 {
       v.scrollSelector = ".scroll-area";
       return v;
     })();
+    this._scrollSync = (() => {
+      const s = new ScrollSyncController(this);
+      s.scrollSelector = ".scroll-area";
+      return s;
+    })();
     /**
      * Cache of the last ViewportState forwarded to the spectrogram controller.
      * Lit's `updated()` fires on every reactive state change (`_isPlaying`,
@@ -4450,6 +4860,13 @@ var DawEditorElement = class extends LitElement10 {
     }
   }
   updated(_changed) {
+    this._scrollSync.xTargetSelector = this._showRuler ? ".ruler-content" : "";
+    this._scrollSync.yTargetSelector = this._showControls ? ".controls-column" : "";
+    this._scrollSync.wheelForwardSelector = [
+      this._showControls ? ".controls-viewport" : "",
+      this._showRuler ? ".ruler-viewport" : ""
+    ].filter(Boolean).join(", ");
+    this._scrollSync.sync();
     if (this._spectrogramController) {
       const vs = this._viewport.visibleStart;
       const ve = this._viewport.visibleEnd;
@@ -5611,7 +6028,7 @@ var DawEditorElement = class extends LitElement10 {
     const w = Math.floor(audibleSamples / renderSpp);
     return rs.peaks.map((chPeaks, ch) => {
       const slicedPeaks = latencyPixels > 0 ? chPeaks.slice(latencyPixels * 2) : chPeaks;
-      return html9`
+      return html10`
         <daw-waveform
           data-recording-track=${trackId}
           data-recording-channel=${ch}
@@ -5633,12 +6050,7 @@ var DawEditorElement = class extends LitElement10 {
     const playhead = this._getPlayhead();
     if (!playhead || !this._engine) return;
     const engine = this._engine;
-    const ctx = this.audioContext;
-    const audibleTime = () => {
-      const outputLatency = "outputLatency" in ctx ? ctx.outputLatency : 0;
-      const t = engine.getCurrentTime() - outputLatency - engine.lookAhead;
-      return Number.isFinite(t) ? Math.max(0, t) : 0;
-    };
+    const audibleTime = () => engine.getAudibleTime();
     if (this.scaleMode === "beats") {
       const secondsToTicksFn = (s) => this._secondsToTicks(s);
       playhead.startBeatsAnimationWithMap(audibleTime, secondsToTicksFn, this.ticksPerPixel);
@@ -5649,10 +6061,7 @@ var DawEditorElement = class extends LitElement10 {
   _stopPlayhead() {
     const playhead = this._getPlayhead();
     if (!playhead) return;
-    const ctx = this.audioContext;
-    const outputLatency = "outputLatency" in ctx ? ctx.outputLatency : 0;
-    const lookAhead = this._engine?.lookAhead ?? 0;
-    const t = this._currentTime - outputLatency - lookAhead;
+    const t = this._currentTime;
     const visualTime = Number.isFinite(t) ? Math.max(0, t) : 0;
     if (this.scaleMode === "beats") {
       playhead.stopBeatsAnimationWithMap(
@@ -5667,6 +6076,14 @@ var DawEditorElement = class extends LitElement10 {
   _getPlayhead() {
     return this.shadowRoot?.querySelector("daw-playhead");
   }
+  /** True when the controls column should be rendered (and its selector is valid). */
+  get _showControls() {
+    return this._getOrderedTracks().length > 0 || this.indefinitePlayback;
+  }
+  /** True when the ruler header band should be rendered (and its selector is valid). */
+  get _showRuler() {
+    return (this._getOrderedTracks().length > 0 || this.scaleMode === "beats" || this.indefinitePlayback) && this.timescale;
+  }
   _getOrderedTracks() {
     const domOrder = [...this.querySelectorAll("daw-track")].map(
       (el) => el.trackId
@@ -5708,64 +6125,79 @@ var DawEditorElement = class extends LitElement10 {
         trackHeight: this.waveHeight * numChannels + (this.clipHeaders ? this.clipHeaderHeight : 0)
       };
     });
-    return html9`
-      ${orderedTracks.length > 0 || this.indefinitePlayback ? html9`<div class="controls-column">
-            ${this.timescale ? html9`<div style="height: 30px;"></div>` : ""}
-            ${orderedTracks.map(
-      (t) => html9`
-                <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.scaleMode === "beats" || this.indefinitePlayback) && this.timescale ? html9`<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>` : ""}
-          ${this.scaleMode === "beats" ? html9`<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" || this.indefinitePlayback ? html9`<daw-selection .startPx=${selStartPx} .endPx=${selEndPx}></daw-selection>
-                <daw-playhead></daw-playhead>` : ""}
-          ${orderedTracks.map((t) => {
-      const channelHeight = this.waveHeight;
-      return html9`
+    const showControls = this._showControls;
+    const showRuler = this._showRuler;
+    return html10`
+      ${showRuler ? html10`<div class="header-row" style="height: ${RULER_HEIGHT}px;">
+            ${showControls ? html10`<div class="ruler-gap"></div>` : ""}
+            <div class="ruler-viewport" @pointerdown=${this._pointer.onPointerDown}>
               <div
-                class="track-row ${t.trackId === this._selectedTrackId ? "selected" : ""}"
-                style="height: ${t.trackHeight}px;"
-                data-track-id=${t.trackId}
+                class="ruler-content"
+                style="width: ${this._totalWidth > 0 ? this._totalWidth + "px" : "100%"};"
               >
-                ${t.track.clips.map((clip) => {
+                <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}
+                  .rulerHeight=${RULER_HEIGHT}
+                ></daw-ruler>
+              </div>
+            </div>
+          </div>` : ""}
+      <div class="body">
+        ${showControls ? html10`<div class="controls-viewport">
+              <div class="controls-column">
+                ${orderedTracks.map(
+      (t) => html10`
+                    <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>` : ""}
+        <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}
+          >
+            ${this.scaleMode === "beats" ? html10`<daw-grid
+                  style="top: 0px;"
+                  .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, 0) : this._emptyGridHeight}
+                ></daw-grid>` : ""}
+            ${orderedTracks.length > 0 || this.scaleMode === "beats" || this.indefinitePlayback ? html10`<daw-selection .startPx=${selStartPx} .endPx=${selEndPx}></daw-selection>
+                  <daw-playhead></daw-playhead>` : ""}
+            ${orderedTracks.map((t) => {
+      const channelHeight = this.waveHeight;
+      return html10`
+                <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);
         let clipLeft;
         let width;
@@ -5808,7 +6240,10 @@ var DawEditorElement = class extends LitElement10 {
               const segEndSample = Math.round(segEndAudioSec * sr);
               const totalPeaks = clip.durationSamples / baseScale;
               clipSegments.push({
-                peakStart: Math.max(0, (segStartSample - clip.offsetSamples) / baseScale),
+                peakStart: Math.max(
+                  0,
+                  (segStartSample - clip.offsetSamples) / baseScale
+                ),
                 peakEnd: Math.min(
                   totalPeaks,
                   (segEndSample - clip.offsetSamples) / baseScale
@@ -5822,78 +6257,79 @@ var DawEditorElement = class extends LitElement10 {
         const channels = segmentChannels ?? peakData?.data ?? [new Int16Array(0)];
         const hdrH = this.clipHeaders ? this.clipHeaderHeight : 0;
         const chH = this.waveHeight;
-        return html9` <div
-                    class="clip-container"
-                    style="left:${clipLeft}px;top:0;width:${width}px;height:${t.trackHeight}px;"
-                    data-clip-id=${clip.id}
-                  >
-                    ${hdrH > 0 ? html9`<div
-                          class="clip-header"
-                          data-clip-id=${clip.id}
-                          data-track-id=${t.trackId}
-                          ?data-interactive=${this.interactiveClips}
-                        >
-                          <span>${clip.name || t.descriptor?.name || ""}</span>
-                        </div>` : ""}
-                    ${t.descriptor?.renderMode === "piano-roll" ? html9`<daw-piano-roll
-                          style="position:absolute;left:0;top:${hdrH}px;"
-                          .midiNotes=${clip.midiNotes ?? []}
-                          .length=${peakData?.length ?? width}
-                          .waveHeight=${chH * channels.length}
-                          .samplesPerPixel=${this._renderSpp}
-                          .sampleRate=${this.effectiveSampleRate}
-                          .clipOffsetSeconds=${(clip.offsetSamples ?? 0) / this.effectiveSampleRate}
-                          .visibleStart=${this._viewport.visibleStart}
-                          .visibleEnd=${this._viewport.visibleEnd}
-                          .originX=${clipLeft}
-                          ?selected=${t.trackId === this._selectedTrackId}
-                        ></daw-piano-roll>` : t.descriptor?.renderMode === "spectrogram" ? channels.map(
-          (_chPeaks, chIdx) => html9`<daw-spectrogram
-                                style="position:absolute;left:0;top:${hdrH + chIdx * chH}px;height:${chH}px;width:${peakData?.length ?? width}px;"
-                                .clipId=${clip.id}
-                                .trackId=${t.trackId}
-                                .channelIndex=${chIdx}
-                                .length=${peakData?.length ?? width}
-                                .waveHeight=${chH}
-                                .samplesPerPixel=${this._renderSpp}
-                                .sampleRate=${this.effectiveSampleRate}
-                                .clipOffsetSeconds=${(clip.offsetSamples ?? 0) / this.effectiveSampleRate}
-                                .visibleStart=${this._viewport.visibleStart}
-                                .visibleEnd=${this._viewport.visibleEnd}
-                                .originX=${clipLeft}
-                              ></daw-spectrogram>`
-        ) : channels.map(
-          (chPeaks, chIdx) => html9` <daw-waveform
-                                style="position:absolute;left:0;top:${hdrH + chIdx * chH}px;"
-                                .peaks=${chPeaks}
-                                .length=${peakData?.length ?? width}
-                                .waveHeight=${chH}
-                                .barWidth=${this.barWidth}
-                                .barGap=${this.barGap}
-                                .visibleStart=${this._viewport.visibleStart}
-                                .visibleEnd=${this._viewport.visibleEnd}
-                                .originX=${clipLeft}
-                                .segments=${clipSegments}
-                              ></daw-waveform>`
-        )}
-                    ${this.interactiveClips ? html9` <div
-                            class="clip-boundary"
-                            data-boundary-edge="left"
-                            data-clip-id=${clip.id}
-                            data-track-id=${t.trackId}
-                          ></div>
-                          <div
-                            class="clip-boundary"
-                            data-boundary-edge="right"
+        return html10` <div
+                      class="clip-container"
+                      style="left:${clipLeft}px;top:0;width:${width}px;height:${t.trackHeight}px;"
+                      data-clip-id=${clip.id}
+                    >
+                      ${hdrH > 0 ? html10`<div
+                            class="clip-header"
                             data-clip-id=${clip.id}
                             data-track-id=${t.trackId}
-                          ></div>` : ""}
-                  </div>`;
+                            ?data-interactive=${this.interactiveClips}
+                          >
+                            <span>${clip.name || t.descriptor?.name || ""}</span>
+                          </div>` : ""}
+                      ${t.descriptor?.renderMode === "piano-roll" ? html10`<daw-piano-roll
+                            style="position:absolute;left:0;top:${hdrH}px;"
+                            .midiNotes=${clip.midiNotes ?? []}
+                            .length=${peakData?.length ?? width}
+                            .waveHeight=${chH * channels.length}
+                            .samplesPerPixel=${this._renderSpp}
+                            .sampleRate=${this.effectiveSampleRate}
+                            .clipOffsetSeconds=${(clip.offsetSamples ?? 0) / this.effectiveSampleRate}
+                            .visibleStart=${this._viewport.visibleStart}
+                            .visibleEnd=${this._viewport.visibleEnd}
+                            .originX=${clipLeft}
+                            ?selected=${t.trackId === this._selectedTrackId}
+                          ></daw-piano-roll>` : t.descriptor?.renderMode === "spectrogram" ? channels.map(
+          (_chPeaks, chIdx) => html10`<daw-spectrogram
+                                  style="position:absolute;left:0;top:${hdrH + chIdx * chH}px;height:${chH}px;width:${peakData?.length ?? width}px;"
+                                  .clipId=${clip.id}
+                                  .trackId=${t.trackId}
+                                  .channelIndex=${chIdx}
+                                  .length=${peakData?.length ?? width}
+                                  .waveHeight=${chH}
+                                  .samplesPerPixel=${this._renderSpp}
+                                  .sampleRate=${this.effectiveSampleRate}
+                                  .clipOffsetSeconds=${(clip.offsetSamples ?? 0) / this.effectiveSampleRate}
+                                  .visibleStart=${this._viewport.visibleStart}
+                                  .visibleEnd=${this._viewport.visibleEnd}
+                                  .originX=${clipLeft}
+                                ></daw-spectrogram>`
+        ) : channels.map(
+          (chPeaks, chIdx) => html10` <daw-waveform
+                                  style="position:absolute;left:0;top:${hdrH + chIdx * chH}px;"
+                                  .peaks=${chPeaks}
+                                  .length=${peakData?.length ?? width}
+                                  .waveHeight=${chH}
+                                  .barWidth=${this.barWidth}
+                                  .barGap=${this.barGap}
+                                  .visibleStart=${this._viewport.visibleStart}
+                                  .visibleEnd=${this._viewport.visibleEnd}
+                                  .originX=${clipLeft}
+                                  .segments=${clipSegments}
+                                ></daw-waveform>`
+        )}
+                      ${this.interactiveClips ? html10` <div
+                              class="clip-boundary"
+                              data-boundary-edge="left"
+                              data-clip-id=${clip.id}
+                              data-track-id=${t.trackId}
+                            ></div>
+                            <div
+                              class="clip-boundary"
+                              data-boundary-edge="right"
+                              data-clip-id=${clip.id}
+                              data-track-id=${t.trackId}
+                            ></div>` : ""}
+                    </div>`;
       })}
-                ${this._renderRecordingPreview(t.trackId, channelHeight)}
-              </div>
-            `;
+                  ${this._renderRecordingPreview(t.trackId, channelHeight)}
+                </div>
+              `;
     })}
+          </div>
         </div>
       </div>
       <slot></slot>
@@ -5902,21 +6338,48 @@ var DawEditorElement = class extends LitElement10 {
 };
 DawEditorElement.styles = [
   hostStyles,
-  css9`
+  css10`
       :host {
         display: flex;
+        flex-direction: column;
         position: relative;
         background: var(--daw-background, #1a1a2e);
         overflow: hidden;
       }
-      .controls-column {
+      .header-row {
+        display: flex;
+        flex-shrink: 0;
+      }
+      .ruler-gap {
+        flex-shrink: 0;
+        width: var(--daw-controls-width, 180px);
+      }
+      .ruler-viewport {
+        flex: 1;
+        position: relative;
+        overflow: hidden;
+        cursor: text;
+      }
+      .ruler-content {
+        will-change: transform;
+      }
+      .body {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+      }
+      .controls-viewport {
         flex-shrink: 0;
         width: var(--daw-controls-width, 180px);
+        overflow: hidden;
+      }
+      .controls-column {
+        will-change: transform;
       }
       .scroll-area {
         flex: 1;
-        overflow-x: auto;
-        overflow-y: hidden;
+        overflow: auto;
+        overflow-anchor: none;
         min-height: var(--daw-min-height, 200px);
       }
       .timeline {
@@ -5926,6 +6389,7 @@ DawEditorElement.styles = [
       }
       .track-row {
         position: relative;
+        box-sizing: border-box;
         background: var(--daw-track-background, #16213e);
         border-bottom: 1px solid rgba(255, 255, 255, 0.05);
       }
@@ -5950,70 +6414,70 @@ DawEditorElement.styles = [
 ];
 DawEditorElement._CONTROL_PROPS = /* @__PURE__ */ new Set(["volume", "pan", "muted", "soloed"]);
 __decorateClass([
-  property8({ type: Number, attribute: "samples-per-pixel", noAccessor: true })
+  property9({ type: Number, attribute: "samples-per-pixel", noAccessor: true })
 ], DawEditorElement.prototype, "samplesPerPixel", 1);
 __decorateClass([
-  property8({ type: Number, attribute: "wave-height" })
+  property9({ type: Number, attribute: "wave-height" })
 ], DawEditorElement.prototype, "waveHeight", 2);
 __decorateClass([
-  property8({ type: Boolean })
+  property9({ type: Boolean })
 ], DawEditorElement.prototype, "timescale", 2);
 __decorateClass([
-  property8({ type: Boolean })
+  property9({ type: Boolean })
 ], DawEditorElement.prototype, "mono", 2);
 __decorateClass([
-  property8({ type: Number, attribute: "bar-width" })
+  property9({ type: Number, attribute: "bar-width" })
 ], DawEditorElement.prototype, "barWidth", 2);
 __decorateClass([
-  property8({ type: Number, attribute: "bar-gap" })
+  property9({ type: Number, attribute: "bar-gap" })
 ], DawEditorElement.prototype, "barGap", 2);
 __decorateClass([
-  property8({ type: Boolean, attribute: "file-drop" })
+  property9({ type: Boolean, attribute: "file-drop" })
 ], DawEditorElement.prototype, "fileDrop", 2);
 __decorateClass([
-  property8({ type: Boolean, attribute: "clip-headers" })
+  property9({ type: Boolean, attribute: "clip-headers" })
 ], DawEditorElement.prototype, "clipHeaders", 2);
 __decorateClass([
-  property8({ type: Number, attribute: "clip-header-height" })
+  property9({ type: Number, attribute: "clip-header-height" })
 ], DawEditorElement.prototype, "clipHeaderHeight", 2);
 __decorateClass([
-  property8({ type: Boolean, attribute: "interactive-clips" })
+  property9({ type: Boolean, attribute: "interactive-clips" })
 ], DawEditorElement.prototype, "interactiveClips", 2);
 __decorateClass([
-  property8({ type: Boolean, attribute: "indefinite-playback" })
+  property9({ type: Boolean, attribute: "indefinite-playback" })
 ], DawEditorElement.prototype, "indefinitePlayback", 2);
 __decorateClass([
-  property8({ attribute: false, noAccessor: true })
+  property9({ attribute: false, noAccessor: true })
 ], DawEditorElement.prototype, "spectrogramConfig", 1);
 __decorateClass([
-  property8({ attribute: false, noAccessor: true })
+  property9({ attribute: false, noAccessor: true })
 ], DawEditorElement.prototype, "spectrogramColorMap", 1);
 __decorateClass([
-  property8({ type: String, attribute: "scale-mode" })
+  property9({ type: String, attribute: "scale-mode" })
 ], DawEditorElement.prototype, "scaleMode", 2);
 __decorateClass([
-  property8({ type: Number, attribute: "ticks-per-pixel", noAccessor: true })
+  property9({ type: Number, attribute: "ticks-per-pixel", noAccessor: true })
 ], DawEditorElement.prototype, "ticksPerPixel", 1);
 __decorateClass([
-  property8({ type: Number, noAccessor: true })
+  property9({ type: Number, noAccessor: true })
 ], DawEditorElement.prototype, "bpm", 1);
 __decorateClass([
-  property8({ attribute: false })
+  property9({ attribute: false })
 ], DawEditorElement.prototype, "timeSignature", 2);
 __decorateClass([
-  property8({ attribute: false })
+  property9({ attribute: false })
 ], DawEditorElement.prototype, "meterEntries", 2);
 __decorateClass([
-  property8({ type: Number, noAccessor: true })
+  property9({ type: Number, noAccessor: true })
 ], DawEditorElement.prototype, "ppqn", 1);
 __decorateClass([
-  property8({ type: String, attribute: "snap-to" })
+  property9({ type: String, attribute: "snap-to" })
 ], DawEditorElement.prototype, "snapTo", 2);
 __decorateClass([
-  property8({ attribute: false })
+  property9({ attribute: false })
 ], DawEditorElement.prototype, "secondsToTicks", 2);
 __decorateClass([
-  property8({ attribute: false })
+  property9({ attribute: false })
 ], DawEditorElement.prototype, "ticksToSeconds", 2);
 __decorateClass([
   state3()
@@ -6037,246 +6501,15 @@ __decorateClass([
   state3()
 ], DawEditorElement.prototype, "_dragOver", 2);
 __decorateClass([
-  property8({ attribute: false })
+  property9({ attribute: false })
 ], DawEditorElement.prototype, "adapter", 1);
 __decorateClass([
-  property8({ attribute: "eager-resume" })
+  property9({ attribute: "eager-resume" })
 ], DawEditorElement.prototype, "eagerResume", 2);
 DawEditorElement = __decorateClass([
-  customElement12("daw-editor")
+  customElement13("daw-editor")
 ], DawEditorElement);
 
-// src/elements/daw-ruler.ts
-import { LitElement as LitElement11, html as html10, css as css10 } from "lit";
-import { customElement as customElement13, property as property9 } from "lit/decorators.js";
-
-// src/utils/time-format.ts
-function formatTime(milliseconds) {
-  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_WIDTH4 = 1e3;
-var DawRulerElement = class extends LitElement11 {
-  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.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.totalWidth > 0) {
-      const widthDerivedDuration = this.totalWidth * this.samplesPerPixel / this.sampleRate;
-      const effectiveDuration = Math.max(this.duration, widthDerivedDuration);
-      this._musicalTickData = null;
-      this._tickData = computeTemporalTicks(
-        this.samplesPerPixel,
-        this.sampleRate,
-        effectiveDuration,
-        this.rulerHeight
-      );
-    } else {
-      this._musicalTickData = null;
-      this._tickData = null;
-    }
-  }
-  render() {
-    const widthX = this.scaleMode === "beats" ? this.totalWidth : this._tickData?.widthX ?? 0;
-    if (widthX <= 0) return html10``;
-    const totalChunks = Math.ceil(widthX / MAX_CANVAS_WIDTH4);
-    const indices = Array.from({ length: totalChunks }, (_, i) => i);
-    const dpr = typeof devicePixelRatio !== "undefined" ? devicePixelRatio : 1;
-    const beatsLabels = this.scaleMode === "beats" ? this._musicalTickData?.ticks.filter((t) => t.label) ?? [] : [];
-    const temporalLabels = this.scaleMode !== "beats" ? this._tickData?.labels ?? [] : [];
-    return html10`
-      <div class="container" style="width: ${widthX}px; height: ${this.rulerHeight}px;">
-        ${indices.map((i) => {
-      const width = Math.min(MAX_CANVAS_WIDTH4, widthX - i * MAX_CANVAS_WIDTH4);
-      return html10`
-            <canvas
-              data-index=${i}
-              width=${width * dpr}
-              height=${this.rulerHeight * dpr}
-              style="left: ${i * MAX_CANVAS_WIDTH4}px; width: ${width}px; height: ${this.rulerHeight}px;"
-            ></canvas>
-          `;
-    })}
-        ${this.scaleMode === "beats" ? beatsLabels.map(
-      (t) => html10`<span
-                  class="label ${t.pixel > 0 ? "centered" : ""}"
-                  style="left: ${t.pixel > 0 ? t.pixel : t.pixel + 4}px;"
-                  >${t.label}</span
-                >`
-    ) : temporalLabels.map(
-      ({ pix, text }) => html10`<span class="label" style="left: ${pix + 4}px;">${text}</span>`
-    )}
-      </div>
-    `;
-  }
-  updated() {
-    this._drawTicks();
-  }
-  _drawTicks() {
-    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_WIDTH4, widthX - idx * MAX_CANVAS_WIDTH4);
-      const globalOffset = idx * MAX_CANVAS_WIDTH4;
-      ctx.resetTransform();
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.scale(dpr, dpr);
-      ctx.strokeStyle = rulerColor;
-      ctx.lineWidth = 1;
-      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 = css10`
-    :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;
-      line-height: 1;
-      white-space: nowrap;
-      color: var(--daw-ruler-color, #c49a6c);
-      top: 1px;
-    }
-    .label.centered {
-      transform: translateX(-50%);
-    }
-  `;
-__decorateClass([
-  property9({ type: Number, attribute: false })
-], DawRulerElement.prototype, "samplesPerPixel", 2);
-__decorateClass([
-  property9({ type: Number, attribute: false })
-], DawRulerElement.prototype, "sampleRate", 2);
-__decorateClass([
-  property9({ type: Number, attribute: false })
-], DawRulerElement.prototype, "duration", 2);
-__decorateClass([
-  property9({ type: Number, attribute: false })
-], DawRulerElement.prototype, "rulerHeight", 2);
-__decorateClass([
-  property9({ type: String, attribute: false })
-], DawRulerElement.prototype, "scaleMode", 2);
-__decorateClass([
-  property9({ type: Number, attribute: false })
-], DawRulerElement.prototype, "ticksPerPixel", 2);
-__decorateClass([
-  property9({ attribute: false })
-], DawRulerElement.prototype, "meterEntries", 2);
-__decorateClass([
-  property9({ type: Number, attribute: false })
-], DawRulerElement.prototype, "ppqn", 2);
-__decorateClass([
-  property9({ type: Number, attribute: false })
-], DawRulerElement.prototype, "totalWidth", 2);
-DawRulerElement = __decorateClass([
-  customElement13("daw-ruler")
-], DawRulerElement);
-
 // src/elements/daw-selection.ts
 import { LitElement as LitElement12, html as html11, css as css11 } from "lit";
 import { customElement as customElement14, property as property10 } from "lit/decorators.js";