@dawcore/components 0.0.19 → 0.0.21

package/dist/index.js

@@ -230,7 +230,7 @@ var DawTrackElement = class extends import_lit2.LitElement {
     this.pan = 0;
     this.muted = false;
     this.soloed = false;
-    this.renderMode = "waveform";
+    this._renderMode = "waveform";
     this.spectrogramConfig = null;
     this.trackId = crypto.randomUUID();
     // Track removal is detected by the editor's MutationObserver,
@@ -238,6 +238,21 @@ var DawTrackElement = class extends import_lit2.LitElement {
     // cannot bubble events to ancestors).
     this._hasRendered = false;
   }
+  get renderMode() {
+    return this._renderMode;
+  }
+  set renderMode(value) {
+    const old = this._renderMode;
+    let next = value;
+    if (next === "both") {
+      console.warn(
+        `[dawcore] <daw-track render-mode="both"> is not yet supported; falling back to 'spectrogram'`
+      );
+      next = "spectrogram";
+    }
+    this._renderMode = next;
+    this.requestUpdate("renderMode", old);
+  }
   // Light DOM so <daw-clip> children are queryable.
   createRenderRoot() {
     return this;
@@ -300,8 +315,8 @@ __decorateClass([
   (0, import_decorators2.property)({ type: Boolean })
 ], DawTrackElement.prototype, "soloed", 2);
 __decorateClass([
-  (0, import_decorators2.property)({ attribute: "render-mode" })
-], DawTrackElement.prototype, "renderMode", 2);
+  (0, import_decorators2.property)({ attribute: "render-mode", noAccessor: true })
+], DawTrackElement.prototype, "renderMode", 1);
 __decorateClass([
   (0, import_decorators2.property)({ attribute: false })
 ], DawTrackElement.prototype, "spectrogramConfig", 2);
@@ -1237,8 +1252,8 @@ DawStopButtonElement = __decorateClass([
 ], DawStopButtonElement);
 
 // src/elements/daw-editor.ts
-var import_lit14 = require("lit");
-var import_decorators12 = require("lit/decorators.js");
+var import_lit15 = require("lit");
+var import_decorators13 = require("lit/decorators.js");
 
 // src/types.ts
 function isDomClip(desc) {
@@ -1246,7 +1261,7 @@ function isDomClip(desc) {
 }
 
 // src/elements/daw-editor.ts
-var import_core8 = require("@waveform-playlist/core");
+var import_core9 = require("@waveform-playlist/core");
 
 // src/workers/peaksWorker.ts
 var import_waveform_data = __toESM(require("waveform-data"));
@@ -1717,129 +1732,399 @@ var PeakPipeline = class {
   }
 };
 
-// src/elements/daw-track-controls.ts
+// src/elements/daw-ruler.ts
 var import_lit11 = require("lit");
 var import_decorators10 = require("lit/decorators.js");
-var DawTrackControlsElement = class extends import_lit11.LitElement {
+
+// 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
+var import_core = require("@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 = (0, import_core.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 import_lit11.LitElement {
   constructor() {
     super(...arguments);
-    this.trackId = null;
-    this.trackName = "";
-    this.volume = 1;
-    this.pan = 0;
-    this.muted = false;
-    this.soloed = false;
-    this._onVolumeInput = (e) => {
-      const value = Number(e.target.value);
-      if (Number.isFinite(value)) this._dispatchControl("volume", value);
-    };
-    this._onPanInput = (e) => {
-      const value = Number(e.target.value);
-      if (Number.isFinite(value)) this._dispatchControl("pan", value);
-    };
-    this._onMuteClick = () => {
-      this._dispatchControl("muted", !this.muted);
-    };
-    this._onSoloClick = () => {
-      this._dispatchControl("soloed", !this.soloed);
-    };
-    this._onRemoveClick = () => {
-      if (!this.trackId) return;
-      this.dispatchEvent(
-        new CustomEvent("daw-track-remove", {
-          bubbles: true,
-          composed: true,
-          detail: { trackId: this.trackId }
-        })
-      );
-    };
+    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;
   }
-  _dispatchControl(prop, value) {
-    if (!this.trackId) return;
-    this.dispatchEvent(
-      new CustomEvent("daw-track-control", {
-        bubbles: true,
-        composed: true,
-        detail: { trackId: this.trackId, prop, value }
-      })
-    );
+  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 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;
+    const widthX = this.scaleMode === "beats" ? this.totalWidth : this._tickData?.widthX ?? 0;
+    if (widthX <= 0) return import_lit11.html``;
+    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 import_lit11.html`
-      <div class="header">
-        <span class="name" title=${this.trackName}>${this.trackName || "Untitled"}</span>
-        <button class="remove-btn" @click=${this._onRemoveClick} title="Remove track">
-          &times;
-        </button>
-      </div>
-      <div class="buttons">
-        <button
-          class="btn ${this.muted ? "muted-active" : ""}"
-          @click=${this._onMuteClick}
-          title="Mute"
-        >
-          M
-        </button>
-        <button class="btn ${this.soloed ? "active" : ""}" @click=${this._onSoloClick} title="Solo">
-          S
-        </button>
-      </div>
-      <div class="slider-row">
-        <span class="slider-label">
-          <span class="slider-label-name">Vol</span>
-          <span class="slider-label-value">${volPercent}%</span>
-        </span>
-        <input
-          type="range"
-          min="0"
-          max="1"
-          step="0.01"
-          .value=${String(this.volume)}
-          @input=${this._onVolumeInput}
-        />
-      </div>
-      <div class="slider-row">
-        <span class="slider-label">
-          <span class="slider-label-name">Pan</span>
-          <span class="slider-label-value">${panDisplay}</span>
-        </span>
-        <input
-          type="range"
-          min="-1"
-          max="1"
-          step="0.01"
-          .value=${String(this.pan)}
-          @input=${this._onPanInput}
-        />
+      <div 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 import_lit11.html`
+            <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) => import_lit11.html`<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 }) => import_lit11.html`<span class="label" style="left: ${pix + 4}px;">${text}</span>`
+    )}
       </div>
     `;
   }
-};
-DawTrackControlsElement.styles = import_lit11.css`
-    :host {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      box-sizing: border-box;
-      padding: 6px 8px;
-      background: var(--daw-controls-background, #0f0f1a);
-      color: var(--daw-controls-text, #c49a6c);
-      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-      font-family: system-ui, sans-serif;
-      font-size: 11px;
-      overflow: hidden;
-    }
-    .header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 4px;
-      margin-bottom: 3px;
-    }
-    .name {
+  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 = import_lit11.css`
+    :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([
+  (0, import_decorators10.property)({ type: Number, attribute: false })
+], DawRulerElement.prototype, "samplesPerPixel", 2);
+__decorateClass([
+  (0, import_decorators10.property)({ type: Number, attribute: false })
+], DawRulerElement.prototype, "sampleRate", 2);
+__decorateClass([
+  (0, import_decorators10.property)({ type: Number, attribute: false })
+], DawRulerElement.prototype, "duration", 2);
+__decorateClass([
+  (0, import_decorators10.property)({ type: Number, attribute: false })
+], DawRulerElement.prototype, "rulerHeight", 2);
+__decorateClass([
+  (0, import_decorators10.property)({ type: String, attribute: false })
+], DawRulerElement.prototype, "scaleMode", 2);
+__decorateClass([
+  (0, import_decorators10.property)({ type: Number, attribute: false })
+], DawRulerElement.prototype, "ticksPerPixel", 2);
+__decorateClass([
+  (0, import_decorators10.property)({ attribute: false })
+], DawRulerElement.prototype, "meterEntries", 2);
+__decorateClass([
+  (0, import_decorators10.property)({ type: Number, attribute: false })
+], DawRulerElement.prototype, "ppqn", 2);
+__decorateClass([
+  (0, import_decorators10.property)({ type: Number, attribute: false })
+], DawRulerElement.prototype, "totalWidth", 2);
+DawRulerElement = __decorateClass([
+  (0, import_decorators10.customElement)("daw-ruler")
+], DawRulerElement);
+
+// src/elements/daw-track-controls.ts
+var import_lit12 = require("lit");
+var import_decorators11 = require("lit/decorators.js");
+var DawTrackControlsElement = class extends import_lit12.LitElement {
+  constructor() {
+    super(...arguments);
+    this.trackId = null;
+    this.trackName = "";
+    this.volume = 1;
+    this.pan = 0;
+    this.muted = false;
+    this.soloed = false;
+    this._onVolumeInput = (e) => {
+      const value = Number(e.target.value);
+      if (Number.isFinite(value)) this._dispatchControl("volume", value);
+    };
+    this._onPanInput = (e) => {
+      const value = Number(e.target.value);
+      if (Number.isFinite(value)) this._dispatchControl("pan", value);
+    };
+    this._onMuteClick = () => {
+      this._dispatchControl("muted", !this.muted);
+    };
+    this._onSoloClick = () => {
+      this._dispatchControl("soloed", !this.soloed);
+    };
+    this._onRemoveClick = () => {
+      if (!this.trackId) return;
+      this.dispatchEvent(
+        new CustomEvent("daw-track-remove", {
+          bubbles: true,
+          composed: true,
+          detail: { trackId: this.trackId }
+        })
+      );
+    };
+  }
+  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(
+      new CustomEvent("daw-track-control", {
+        bubbles: true,
+        composed: true,
+        detail: { trackId: this.trackId, prop, value }
+      })
+    );
+  }
+  render() {
+    const volPercent = Math.round(this.volume * 100);
+    const panPercent = Math.round(Math.abs(this.pan) * 100);
+    const panDisplay = this.pan === 0 ? "C" : (this.pan > 0 ? "R" : "L") + panPercent;
+    return import_lit12.html`
+      <div class="header">
+        <span class="name" title=${this.trackName}>${this.trackName || "Untitled"}</span>
+        <button class="remove-btn" @click=${this._onRemoveClick} title="Remove track">
+          &times;
+        </button>
+      </div>
+      <div class="buttons">
+        <button
+          class="btn ${this.muted ? "muted-active" : ""}"
+          @click=${this._onMuteClick}
+          title="Mute"
+        >
+          M
+        </button>
+        <button class="btn ${this.soloed ? "active" : ""}" @click=${this._onSoloClick} title="Solo">
+          S
+        </button>
+      </div>
+      <div class="slider-row vol-row">
+        <span class="slider-label">
+          <span class="slider-label-name">Vol</span>
+          <span class="slider-label-value">${volPercent}%</span>
+        </span>
+        <input
+          type="range"
+          min="0"
+          max="1"
+          step="0.01"
+          .value=${String(this.volume)}
+          @input=${this._onVolumeInput}
+        />
+      </div>
+      <div class="slider-row pan-row">
+        <span class="slider-label">
+          <span class="slider-label-name">Pan</span>
+          <span class="slider-label-value">${panDisplay}</span>
+        </span>
+        <input
+          type="range"
+          min="-1"
+          max="1"
+          step="0.01"
+          .value=${String(this.pan)}
+          @input=${this._onPanInput}
+        />
+      </div>
+    `;
+  }
+};
+DawTrackControlsElement.styles = import_lit12.css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      box-sizing: border-box;
+      padding: 6px 8px;
+      background: var(--daw-controls-background, #0f0f1a);
+      color: var(--daw-controls-text, #c49a6c);
+      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+      font-family: system-ui, sans-serif;
+      font-size: 11px;
+      overflow: hidden;
+      container-type: size;
+    }
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 4px;
+      margin-bottom: 3px;
+    }
+    .name {
       flex: 1;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -1950,64 +2235,52 @@ DawTrackControlsElement.styles = import_lit11.css`
       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([
-  (0, import_decorators10.property)({ attribute: false })
+  (0, import_decorators11.property)({ attribute: false })
 ], DawTrackControlsElement.prototype, "trackId", 2);
 __decorateClass([
-  (0, import_decorators10.property)({ attribute: false })
+  (0, import_decorators11.property)({ attribute: false })
 ], DawTrackControlsElement.prototype, "trackName", 2);
 __decorateClass([
-  (0, import_decorators10.property)({ type: Number, attribute: false })
+  (0, import_decorators11.property)({ type: Number, attribute: false })
 ], DawTrackControlsElement.prototype, "volume", 2);
 __decorateClass([
-  (0, import_decorators10.property)({ type: Number, attribute: false })
+  (0, import_decorators11.property)({ type: Number, attribute: false })
 ], DawTrackControlsElement.prototype, "pan", 2);
 __decorateClass([
-  (0, import_decorators10.property)({ type: Boolean, attribute: false })
+  (0, import_decorators11.property)({ type: Boolean, attribute: false })
 ], DawTrackControlsElement.prototype, "muted", 2);
 __decorateClass([
-  (0, import_decorators10.property)({ type: Boolean, attribute: false })
+  (0, import_decorators11.property)({ type: Boolean, attribute: false })
 ], DawTrackControlsElement.prototype, "soloed", 2);
 DawTrackControlsElement = __decorateClass([
-  (0, import_decorators10.customElement)("daw-track-controls")
+  (0, import_decorators11.customElement)("daw-track-controls")
 ], DawTrackControlsElement);
 
 // src/elements/daw-grid.ts
-var import_lit12 = require("lit");
-var import_decorators11 = require("lit/decorators.js");
+var import_lit13 = require("lit");
+var import_decorators12 = require("lit/decorators.js");
 var import_core2 = require("@waveform-playlist/core");
-
-// src/utils/musical-tick-cache.ts
-var import_core = require("@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 = (0, import_core.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 import_lit12.LitElement {
+var MAX_CANVAS_WIDTH4 = 1e3;
+var DawGridElement = class extends import_lit13.LitElement {
   constructor() {
     super(...arguments);
     this.ticksPerPixel = 24;
@@ -2035,25 +2308,25 @@ var DawGridElement = class extends import_lit12.LitElement {
     }
   }
   render() {
-    if (!this._tickData) return import_lit12.html``;
+    if (!this._tickData) return import_lit13.html``;
     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 import_lit12.html`
+    return import_lit13.html`
       <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 import_lit12.html`
+      const width = Math.min(MAX_CANVAS_WIDTH4, totalWidth - i * MAX_CANVAS_WIDTH4);
+      return import_lit13.html`
             <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>
           `;
     })}
@@ -2077,8 +2350,8 @@ var DawGridElement = class extends import_lit12.LitElement {
       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);
@@ -2109,7 +2382,7 @@ var DawGridElement = class extends import_lit12.LitElement {
     }
   }
 };
-DawGridElement.styles = import_lit12.css`
+DawGridElement.styles = import_lit13.css`
     :host {
       display: block;
       position: absolute;
@@ -2127,33 +2400,33 @@ DawGridElement.styles = import_lit12.css`
     }
   `;
 __decorateClass([
-  (0, import_decorators11.property)({ type: Number, attribute: false })
+  (0, import_decorators12.property)({ type: Number, attribute: false })
 ], DawGridElement.prototype, "ticksPerPixel", 2);
 __decorateClass([
-  (0, import_decorators11.property)({ attribute: false })
+  (0, import_decorators12.property)({ attribute: false })
 ], DawGridElement.prototype, "meterEntries", 2);
 __decorateClass([
-  (0, import_decorators11.property)({ type: Number, attribute: false })
+  (0, import_decorators12.property)({ type: Number, attribute: false })
 ], DawGridElement.prototype, "ppqn", 2);
 __decorateClass([
-  (0, import_decorators11.property)({ type: Number, attribute: false })
+  (0, import_decorators12.property)({ type: Number, attribute: false })
 ], DawGridElement.prototype, "visibleStart", 2);
 __decorateClass([
-  (0, import_decorators11.property)({ type: Number, attribute: false })
+  (0, import_decorators12.property)({ type: Number, attribute: false })
 ], DawGridElement.prototype, "visibleEnd", 2);
 __decorateClass([
-  (0, import_decorators11.property)({ type: Number, attribute: false })
+  (0, import_decorators12.property)({ type: Number, attribute: false })
 ], DawGridElement.prototype, "length", 2);
 __decorateClass([
-  (0, import_decorators11.property)({ type: Number, attribute: false })
+  (0, import_decorators12.property)({ type: Number, attribute: false })
 ], DawGridElement.prototype, "height", 2);
 DawGridElement = __decorateClass([
-  (0, import_decorators11.customElement)("daw-grid")
+  (0, import_decorators12.customElement)("daw-grid")
 ], DawGridElement);
 
 // src/styles/theme.ts
-var import_lit13 = require("lit");
-var hostStyles = import_lit13.css`
+var import_lit14 = require("lit");
+var hostStyles = import_lit14.css`
   :host {
     --daw-wave-color: #c49a6c;
     --daw-progress-color: #63c75f;
@@ -2169,7 +2442,7 @@ var hostStyles = import_lit13.css`
     --daw-clip-header-text: #e0d4c8;
   }
 `;
-var clipStyles = import_lit13.css`
+var clipStyles = import_lit14.css`
   .clip-container {
     position: absolute;
     overflow: hidden;
@@ -2774,15 +3047,7 @@ var RecordingController = class {
 
 // src/controllers/spectrogram-controller.ts
 var import_spectrogram = require("@dawcore/spectrogram");
-var LIBRARY_DEFAULTS = {
-  fftSize: 2048,
-  windowFunction: "hann",
-  frequencyScale: "mel",
-  minFrequency: 0,
-  gainDb: 20,
-  rangeDb: 80
-};
-var LIBRARY_DEFAULT_COLOR_MAP = "viridis";
+var import_core4 = require("@waveform-playlist/core");
 var SpectrogramController = class {
   constructor(host, workerFactory) {
     this.orchestrator = null;
@@ -2856,7 +3121,21 @@ var SpectrogramController = class {
         const detail = e.detail;
         this.host.dispatchEvent(
           new CustomEvent("daw-spectrogram-ready", {
-            detail,
+            detail: { trackId: detail.trackId, generation: detail.generation },
+            bubbles: true,
+            composed: true
+          })
+        );
+      });
+      this.orchestrator.addEventListener("viewport-error", (e) => {
+        const detail = e.detail;
+        this.host.dispatchEvent(
+          new CustomEvent("daw-spectrogram-error", {
+            detail: {
+              trackId: detail.trackId,
+              generation: detail.generation,
+              error: detail.error
+            },
             bubbles: true,
             composed: true
           })
@@ -2877,18 +3156,18 @@ var SpectrogramController = class {
       track = c;
       break;
     }
-    return { ...LIBRARY_DEFAULTS, ...this.editorConfig ?? {}, ...track ?? {} };
+    return { ...import_core4.SPECTROGRAM_DEFAULTS, ...this.editorConfig ?? {}, ...track ?? {} };
   }
   mergedColorMap() {
     for (const c of this.trackColorMaps.values()) {
-      return c ?? LIBRARY_DEFAULT_COLOR_MAP;
+      return c ?? import_core4.DEFAULT_SPECTROGRAM_COLOR_MAP;
     }
-    return this.editorColorMap ?? LIBRARY_DEFAULT_COLOR_MAP;
+    return this.editorColorMap ?? import_core4.DEFAULT_SPECTROGRAM_COLOR_MAP;
   }
 };
 
 // src/interactions/pointer-handler.ts
-var import_core4 = require("@waveform-playlist/core");
+var import_core5 = require("@waveform-playlist/core");
 
 // src/interactions/constants.ts
 var DRAG_THRESHOLD = 3;
@@ -2910,7 +3189,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);
@@ -2932,11 +3215,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);
     };
@@ -2998,10 +3290,10 @@ var PointerHandler = class {
     const h = this._host;
     if (h.scaleMode === "beats") {
       let tick = px * h.ticksPerPixel;
-      tick = (0, import_core4.snapTickToGrid)(tick, h.snapTo, h._meterEntries, h.ppqn);
+      tick = (0, import_core5.snapTickToGrid)(tick, h.snapTo, h._meterEntries, h.ppqn);
       return h._ticksToSeconds(tick);
     }
-    return (0, import_core4.pixelsToSeconds)(px, h.samplesPerPixel, h.effectiveSampleRate);
+    return (0, import_core5.pixelsToSeconds)(px, h.samplesPerPixel, h.effectiveSampleRate);
   }
   _timeToPx(time) {
     const h = this._host;
@@ -3093,7 +3385,7 @@ var PointerHandler = class {
 };
 
 // src/interactions/clip-pointer-handler.ts
-var import_core5 = require("@waveform-playlist/core");
+var import_core6 = require("@waveform-playlist/core");
 var ClipPointerHandler = class {
   constructor(host) {
     this._mode = null;
@@ -3127,7 +3419,7 @@ var ClipPointerHandler = class {
       const anchorTick = h._secondsToTicks(anchorSeconds);
       const deltaTicks = totalDeltaPx * h.ticksPerPixel;
       const targetTick = anchorTick + deltaTicks;
-      const snappedTick = h.snapTo !== "off" ? (0, import_core5.snapTickToGrid)(targetTick, h.snapTo, h._meterEntries, h.ppqn) : targetTick;
+      const snappedTick = h.snapTo !== "off" ? (0, import_core6.snapTickToGrid)(targetTick, h.snapTo, h._meterEntries, h.ppqn) : targetTick;
       const snappedSeconds = h._ticksToSeconds(snappedTick);
       const snappedSample = Math.round(snappedSeconds * h.effectiveSampleRate);
       return snappedSample - anchorSample;
@@ -3390,7 +3682,7 @@ var ClipPointerHandler = class {
 };
 
 // src/interactions/file-loader.ts
-var import_core6 = require("@waveform-playlist/core");
+var import_core7 = require("@waveform-playlist/core");
 async function loadFiles(host, files) {
   if (!files) {
     console.warn("[dawcore] loadFiles called with null/undefined");
@@ -3412,7 +3704,7 @@ async function loadFiles(host, files) {
       host._audioCache.delete(blobUrl);
       host._resolvedSampleRate = audioBuffer.sampleRate;
       const name = file.name.replace(/\.\w+$/, "");
-      const clip = (0, import_core6.createClip)({
+      const clip = (0, import_core7.createClip)({
         audioBuffer,
         startSample: 0,
         durationSamples: audioBuffer.length,
@@ -3436,7 +3728,7 @@ async function loadFiles(host, files) {
       );
       host._peaksData = new Map(host._peaksData).set(clip.id, peakData);
       const trackId = crypto.randomUUID();
-      const track = (0, import_core6.createTrack)({ name, clips: [clip] });
+      const track = (0, import_core7.createTrack)({ name, clips: [clip] });
       track.id = trackId;
       host._tracks = new Map(host._tracks).set(trackId, {
         name,
@@ -3598,7 +3890,7 @@ function stringifyReason(reason) {
 }
 
 // src/interactions/recording-clip.ts
-var import_core7 = require("@waveform-playlist/core");
+var import_core8 = require("@waveform-playlist/core");
 function addRecordedClip(host, trackId, buf, startSample, durSamples, offsetSamples = 0) {
   let trimmedBuf = buf;
   if (offsetSamples > 0 && offsetSamples < buf.length) {
@@ -3613,7 +3905,7 @@ function addRecordedClip(host, trackId, buf, startSample, durSamples, offsetSamp
     }
     trimmedBuf = trimmed;
   }
-  const clip = (0, import_core7.createClip)({
+  const clip = (0, import_core8.createClip)({
     audioBuffer: trimmedBuf,
     startSample,
     durationSamples: durSamples,
@@ -3868,10 +4160,144 @@ 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 import_meta = {};
+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 import_lit14.LitElement {
+var DawEditorElement = class extends import_lit15.LitElement {
   constructor() {
     super(...arguments);
     this._samplesPerPixel = 1024;
@@ -3930,13 +4356,21 @@ var DawEditorElement = class extends import_lit14.LitElement {
       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`,
      * `_selectedTrackId`, etc.) — most of which don't affect the spectrogram
      * viewport. Skip the cross-controller call when nothing changed.
      *
-     * The orchestrator dedupes too, but this avoids the call entirely.
+     * The orchestrator dedupes identical viewports too, so removing this cache
+     * wouldn't change observable behavior — but it would push a fresh
+     * `setViewport` call (with object allocation) into every Lit reactive
+     * update for properties unrelated to the viewport.
      */
     this._lastSpectrogramViewport = null;
     // --- Track Events ---
@@ -4179,9 +4613,10 @@ var DawEditorElement = class extends import_lit14.LitElement {
     this._spectrogramController?.unregisterCanvas(canvasId);
   }
   /**
-   * Push a clip's decoded audio into the spectrogram controller. No-op
-   * unless the track is in spectrogram render-mode and the controller
-   * already exists (it bootstraps from canvas registration).
+   * Forward a clip's AudioBuffer to the spectrogram controller if the parent
+   * track is in spectrogram render-mode. Eagerly creates the controller via
+   * `_ensureSpectrogramController` so the audio data is queued for the first
+   * render — even if no canvases have been registered yet.
    */
   _maybeRegisterSpectrogramClipAudio(trackId, clip) {
     const descriptor = this._tracks.get(trackId);
@@ -4472,6 +4907,13 @@ var DawEditorElement = class extends import_lit14.LitElement {
     }
   }
   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;
@@ -4632,7 +5074,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
     let clip;
     if (waveformData) {
       const wdRate = waveformData.sample_rate;
-      clip = (0, import_core8.createClip)({
+      clip = (0, import_core9.createClip)({
         audioBuffer,
         waveformData,
         startSample: Math.round(clipDesc.start * wdRate),
@@ -4645,7 +5087,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
       });
       this._peakPipeline.cacheWaveformData(audioBuffer, waveformData);
     } else {
-      clip = (0, import_core8.createClipFromSeconds)({
+      clip = (0, import_core9.createClipFromSeconds)({
         audioBuffer,
         startTime: clipDesc.start,
         duration: clipDesc.duration || audioBuffer.duration,
@@ -4725,7 +5167,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
     const noteSpanSeconds = notes.length ? notes.reduce((max, n) => Math.max(max, n.time + n.duration), 0) : 0;
     const sourceDurationSamples = Math.ceil(Math.max(noteSpanSeconds, clipDesc.duration, 1) * sr);
     const requestedDurationSamples = clipDesc.duration > 0 ? Math.round(clipDesc.duration * sr) : sourceDurationSamples;
-    const clip = (0, import_core8.createClip)({
+    const clip = (0, import_core9.createClip)({
       startSample: Math.round(clipDesc.start * sr),
       durationSamples: requestedDurationSamples,
       offsetSamples: Math.round(clipDesc.offset * sr),
@@ -4934,7 +5376,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
           const waveformData = await waveformDataPromise;
           if (waveformData) {
             const wdRate = waveformData.sample_rate;
-            const clip2 = (0, import_core8.createClip)({
+            const clip2 = (0, import_core9.createClip)({
               waveformData,
               startSample: Math.round(clipDesc.start * wdRate),
               durationSamples: Math.round((clipDesc.duration || waveformData.duration) * wdRate),
@@ -4959,7 +5401,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
             });
             this._peaksData = new Map(this._peaksData).set(clip2.id, peakData);
             this._minSamplesPerPixel = Math.max(this._minSamplesPerPixel, waveformData.scale);
-            const previewTrack = (0, import_core8.createTrack)({
+            const previewTrack = (0, import_core9.createTrack)({
               name: descriptor.name,
               clips: [clip2],
               volume: descriptor.volume,
@@ -5015,7 +5457,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
           }
         }
       }
-      const track = (0, import_core8.createTrack)({
+      const track = (0, import_core9.createTrack)({
         name: descriptor.name,
         clips,
         volume: descriptor.volume,
@@ -5298,6 +5740,13 @@ var DawEditorElement = class extends import_lit14.LitElement {
     }
     const oldDesc = this._tracks.get(trackId);
     if (!oldDesc) return;
+    let normalizedRenderMode = partial.renderMode;
+    if (normalizedRenderMode === "both") {
+      console.warn(
+        `[dawcore] render-mode="both" is not yet supported; falling back to 'spectrogram'`
+      );
+      normalizedRenderMode = "spectrogram";
+    }
     const newDesc = {
       ...oldDesc,
       ...partial.name !== void 0 && { name: partial.name },
@@ -5305,7 +5754,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
       ...partial.pan !== void 0 && { pan: partial.pan },
       ...partial.muted !== void 0 && { muted: partial.muted },
       ...partial.soloed !== void 0 && { soloed: partial.soloed },
-      ...partial.renderMode !== void 0 && { renderMode: partial.renderMode }
+      ...normalizedRenderMode !== void 0 && { renderMode: normalizedRenderMode }
     };
     this._tracks = new Map(this._tracks).set(trackId, newDesc);
     if (this._engine) {
@@ -5626,7 +6075,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
     const w = Math.floor(audibleSamples / renderSpp);
     return rs.peaks.map((chPeaks, ch) => {
       const slicedPeaks = latencyPixels > 0 ? chPeaks.slice(latencyPixels * 2) : chPeaks;
-      return import_lit14.html`
+      return import_lit15.html`
         <daw-waveform
           data-recording-track=${trackId}
           data-recording-channel=${ch}
@@ -5682,6 +6131,14 @@ var DawEditorElement = class extends import_lit14.LitElement {
   _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
@@ -5723,64 +6180,79 @@ var DawEditorElement = class extends import_lit14.LitElement {
         trackHeight: this.waveHeight * numChannels + (this.clipHeaders ? this.clipHeaderHeight : 0)
       };
     });
-    return import_lit14.html`
-      ${orderedTracks.length > 0 || this.indefinitePlayback ? import_lit14.html`<div class="controls-column">
-            ${this.timescale ? import_lit14.html`<div style="height: 30px;"></div>` : ""}
-            ${orderedTracks.map(
-      (t) => import_lit14.html`
-                <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 ? import_lit14.html`<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" ? import_lit14.html`<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 ? import_lit14.html`<daw-selection .startPx=${selStartPx} .endPx=${selEndPx}></daw-selection>
-                <daw-playhead></daw-playhead>` : ""}
-          ${orderedTracks.map((t) => {
-      const channelHeight = this.waveHeight;
-      return import_lit14.html`
+    const showControls = this._showControls;
+    const showRuler = this._showRuler;
+    return import_lit15.html`
+      ${showRuler ? import_lit15.html`<div class="header-row" style="height: ${RULER_HEIGHT}px;">
+            ${showControls ? import_lit15.html`<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 ? import_lit15.html`<div class="controls-viewport">
+              <div class="controls-column">
+                ${orderedTracks.map(
+      (t) => import_lit15.html`
+                    <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" ? import_lit15.html`<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 ? import_lit15.html`<daw-selection .startPx=${selStartPx} .endPx=${selEndPx}></daw-selection>
+                  <daw-playhead></daw-playhead>` : ""}
+            ${orderedTracks.map((t) => {
+      const channelHeight = this.waveHeight;
+      return import_lit15.html`
+                <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;
@@ -5793,7 +6265,7 @@ var DawEditorElement = class extends import_lit14.LitElement {
           width = Math.round(endTick / this.ticksPerPixel) - clipLeft;
         } else {
           clipLeft = Math.floor(clip.startSample / spp);
-          width = (0, import_core8.clipPixelWidth)(clip.startSample, clip.durationSamples, spp);
+          width = (0, import_core9.clipPixelWidth)(clip.startSample, clip.durationSamples, spp);
         }
         let clipSegments;
         let segmentChannels;
@@ -5823,7 +6295,10 @@ var DawEditorElement = class extends import_lit14.LitElement {
               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
@@ -5837,78 +6312,79 @@ var DawEditorElement = class extends import_lit14.LitElement {
         const channels = segmentChannels ?? peakData?.data ?? [new Int16Array(0)];
         const hdrH = this.clipHeaders ? this.clipHeaderHeight : 0;
         const chH = this.waveHeight;
-        return import_lit14.html` <div
-                    class="clip-container"
-                    style="left:${clipLeft}px;top:0;width:${width}px;height:${t.trackHeight}px;"
-                    data-clip-id=${clip.id}
-                  >
-                    ${hdrH > 0 ? import_lit14.html`<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" ? import_lit14.html`<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) => import_lit14.html`<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) => import_lit14.html` <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 ? import_lit14.html` <div
-                            class="clip-boundary"
-                            data-boundary-edge="left"
+        return import_lit15.html` <div
+                      class="clip-container"
+                      style="left:${clipLeft}px;top:0;width:${width}px;height:${t.trackHeight}px;"
+                      data-clip-id=${clip.id}
+                    >
+                      ${hdrH > 0 ? import_lit15.html`<div
+                            class="clip-header"
                             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>`;
+                            ?data-interactive=${this.interactiveClips}
+                          >
+                            <span>${clip.name || t.descriptor?.name || ""}</span>
+                          </div>` : ""}
+                      ${t.descriptor?.renderMode === "piano-roll" ? import_lit15.html`<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) => import_lit15.html`<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) => import_lit15.html` <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 ? import_lit15.html` <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>
@@ -5917,21 +6393,48 @@ var DawEditorElement = class extends import_lit14.LitElement {
 };
 DawEditorElement.styles = [
   hostStyles,
-  import_lit14.css`
+  import_lit15.css`
       :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 {
@@ -5941,6 +6444,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);
       }
@@ -5965,333 +6469,102 @@ DawEditorElement.styles = [
 ];
 DawEditorElement._CONTROL_PROPS = /* @__PURE__ */ new Set(["volume", "pan", "muted", "soloed"]);
 __decorateClass([
-  (0, import_decorators12.property)({ type: Number, attribute: "samples-per-pixel", noAccessor: true })
+  (0, import_decorators13.property)({ type: Number, attribute: "samples-per-pixel", noAccessor: true })
 ], DawEditorElement.prototype, "samplesPerPixel", 1);
 __decorateClass([
-  (0, import_decorators12.property)({ type: Number, attribute: "wave-height" })
+  (0, import_decorators13.property)({ type: Number, attribute: "wave-height" })
 ], DawEditorElement.prototype, "waveHeight", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ type: Boolean })
+  (0, import_decorators13.property)({ type: Boolean })
 ], DawEditorElement.prototype, "timescale", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ type: Boolean })
+  (0, import_decorators13.property)({ type: Boolean })
 ], DawEditorElement.prototype, "mono", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ type: Number, attribute: "bar-width" })
+  (0, import_decorators13.property)({ type: Number, attribute: "bar-width" })
 ], DawEditorElement.prototype, "barWidth", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ type: Number, attribute: "bar-gap" })
+  (0, import_decorators13.property)({ type: Number, attribute: "bar-gap" })
 ], DawEditorElement.prototype, "barGap", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ type: Boolean, attribute: "file-drop" })
+  (0, import_decorators13.property)({ type: Boolean, attribute: "file-drop" })
 ], DawEditorElement.prototype, "fileDrop", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ type: Boolean, attribute: "clip-headers" })
+  (0, import_decorators13.property)({ type: Boolean, attribute: "clip-headers" })
 ], DawEditorElement.prototype, "clipHeaders", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ type: Number, attribute: "clip-header-height" })
+  (0, import_decorators13.property)({ type: Number, attribute: "clip-header-height" })
 ], DawEditorElement.prototype, "clipHeaderHeight", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ type: Boolean, attribute: "interactive-clips" })
+  (0, import_decorators13.property)({ type: Boolean, attribute: "interactive-clips" })
 ], DawEditorElement.prototype, "interactiveClips", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ type: Boolean, attribute: "indefinite-playback" })
+  (0, import_decorators13.property)({ type: Boolean, attribute: "indefinite-playback" })
 ], DawEditorElement.prototype, "indefinitePlayback", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ attribute: false, noAccessor: true })
+  (0, import_decorators13.property)({ attribute: false, noAccessor: true })
 ], DawEditorElement.prototype, "spectrogramConfig", 1);
 __decorateClass([
-  (0, import_decorators12.property)({ attribute: false, noAccessor: true })
+  (0, import_decorators13.property)({ attribute: false, noAccessor: true })
 ], DawEditorElement.prototype, "spectrogramColorMap", 1);
 __decorateClass([
-  (0, import_decorators12.property)({ type: String, attribute: "scale-mode" })
+  (0, import_decorators13.property)({ type: String, attribute: "scale-mode" })
 ], DawEditorElement.prototype, "scaleMode", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ type: Number, attribute: "ticks-per-pixel", noAccessor: true })
+  (0, import_decorators13.property)({ type: Number, attribute: "ticks-per-pixel", noAccessor: true })
 ], DawEditorElement.prototype, "ticksPerPixel", 1);
 __decorateClass([
-  (0, import_decorators12.property)({ type: Number, noAccessor: true })
+  (0, import_decorators13.property)({ type: Number, noAccessor: true })
 ], DawEditorElement.prototype, "bpm", 1);
 __decorateClass([
-  (0, import_decorators12.property)({ attribute: false })
+  (0, import_decorators13.property)({ attribute: false })
 ], DawEditorElement.prototype, "timeSignature", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ attribute: false })
+  (0, import_decorators13.property)({ attribute: false })
 ], DawEditorElement.prototype, "meterEntries", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ type: Number, noAccessor: true })
+  (0, import_decorators13.property)({ type: Number, noAccessor: true })
 ], DawEditorElement.prototype, "ppqn", 1);
 __decorateClass([
-  (0, import_decorators12.property)({ type: String, attribute: "snap-to" })
+  (0, import_decorators13.property)({ type: String, attribute: "snap-to" })
 ], DawEditorElement.prototype, "snapTo", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ attribute: false })
+  (0, import_decorators13.property)({ attribute: false })
 ], DawEditorElement.prototype, "secondsToTicks", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ attribute: false })
+  (0, import_decorators13.property)({ attribute: false })
 ], DawEditorElement.prototype, "ticksToSeconds", 2);
 __decorateClass([
-  (0, import_decorators12.state)()
+  (0, import_decorators13.state)()
 ], DawEditorElement.prototype, "_tracks", 2);
 __decorateClass([
-  (0, import_decorators12.state)()
+  (0, import_decorators13.state)()
 ], DawEditorElement.prototype, "_engineTracks", 2);
 __decorateClass([
-  (0, import_decorators12.state)()
+  (0, import_decorators13.state)()
 ], DawEditorElement.prototype, "_peaksData", 2);
 __decorateClass([
-  (0, import_decorators12.state)()
+  (0, import_decorators13.state)()
 ], DawEditorElement.prototype, "_isPlaying", 2);
 __decorateClass([
-  (0, import_decorators12.state)()
+  (0, import_decorators13.state)()
 ], DawEditorElement.prototype, "_duration", 2);
 __decorateClass([
-  (0, import_decorators12.state)()
+  (0, import_decorators13.state)()
 ], DawEditorElement.prototype, "_selectedTrackId", 2);
 __decorateClass([
-  (0, import_decorators12.state)()
+  (0, import_decorators13.state)()
 ], DawEditorElement.prototype, "_dragOver", 2);
 __decorateClass([
-  (0, import_decorators12.property)({ attribute: false })
+  (0, import_decorators13.property)({ attribute: false })
 ], DawEditorElement.prototype, "adapter", 1);
 __decorateClass([
-  (0, import_decorators12.property)({ attribute: "eager-resume" })
+  (0, import_decorators13.property)({ attribute: "eager-resume" })
 ], DawEditorElement.prototype, "eagerResume", 2);
 DawEditorElement = __decorateClass([
-  (0, import_decorators12.customElement)("daw-editor")
+  (0, import_decorators13.customElement)("daw-editor")
 ], DawEditorElement);
 
-// src/elements/daw-ruler.ts
-var import_lit15 = require("lit");
-var import_decorators13 = require("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 import_lit15.LitElement {
-  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 import_lit15.html``;
-    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 import_lit15.html`
-      <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 import_lit15.html`
-            <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) => import_lit15.html`<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 }) => import_lit15.html`<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 = import_lit15.css`
-    :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([
-  (0, import_decorators13.property)({ type: Number, attribute: false })
-], DawRulerElement.prototype, "samplesPerPixel", 2);
-__decorateClass([
-  (0, import_decorators13.property)({ type: Number, attribute: false })
-], DawRulerElement.prototype, "sampleRate", 2);
-__decorateClass([
-  (0, import_decorators13.property)({ type: Number, attribute: false })
-], DawRulerElement.prototype, "duration", 2);
-__decorateClass([
-  (0, import_decorators13.property)({ type: Number, attribute: false })
-], DawRulerElement.prototype, "rulerHeight", 2);
-__decorateClass([
-  (0, import_decorators13.property)({ type: String, attribute: false })
-], DawRulerElement.prototype, "scaleMode", 2);
-__decorateClass([
-  (0, import_decorators13.property)({ type: Number, attribute: false })
-], DawRulerElement.prototype, "ticksPerPixel", 2);
-__decorateClass([
-  (0, import_decorators13.property)({ attribute: false })
-], DawRulerElement.prototype, "meterEntries", 2);
-__decorateClass([
-  (0, import_decorators13.property)({ type: Number, attribute: false })
-], DawRulerElement.prototype, "ppqn", 2);
-__decorateClass([
-  (0, import_decorators13.property)({ type: Number, attribute: false })
-], DawRulerElement.prototype, "totalWidth", 2);
-DawRulerElement = __decorateClass([
-  (0, import_decorators13.customElement)("daw-ruler")
-], DawRulerElement);
-
 // src/elements/daw-selection.ts
 var import_lit16 = require("lit");
 var import_decorators14 = require("lit/decorators.js");
@@ -6415,7 +6688,7 @@ DawRecordButtonElement = __decorateClass([
 // src/elements/daw-keyboard-shortcuts.ts
 var import_lit18 = require("lit");
 var import_decorators16 = require("lit/decorators.js");
-var import_core9 = require("@waveform-playlist/core");
+var import_core10 = require("@waveform-playlist/core");
 var DawKeyboardShortcutsElement = class extends import_lit18.LitElement {
   constructor() {
     super(...arguments);
@@ -6435,7 +6708,7 @@ var DawKeyboardShortcutsElement = class extends import_lit18.LitElement {
       const shortcuts = this.shortcuts;
       if (shortcuts.length === 0) return;
       try {
-        (0, import_core9.handleKeyboardEvent)(e, shortcuts, true);
+        (0, import_core10.handleKeyboardEvent)(e, shortcuts, true);
       } catch (err) {
         console.warn("[dawcore] Keyboard shortcut failed (key=" + e.key + "): " + String(err));
         const target = this._editor ?? this;
@@ -6602,6 +6875,7 @@ var DawSpectrogramElement = class extends import_lit19.LitElement {
     this.originX = 0;
     this._canvases = [];
     this._registeredCanvasIds = [];
+    this._warnedNoHost = false;
   }
   get samplesPerPixel() {
     return this._samplesPerPixel;
@@ -6668,7 +6942,15 @@ var DawSpectrogramElement = class extends import_lit19.LitElement {
   }
   _registerCanvases() {
     const editor = this._findHostEditor();
-    if (!editor || typeof editor._spectrogramRegisterCanvas !== "function") return;
+    if (!editor || typeof editor._spectrogramRegisterCanvas !== "function") {
+      if (!this._warnedNoHost) {
+        this._warnedNoHost = true;
+        console.warn(
+          "[dawcore] <daw-spectrogram> (clip " + this.clipId + ") could not find host <daw-editor>. Canvases will not render. Ensure the element is mounted inside a <daw-editor>."
+        );
+      }
+      return;
+    }
     for (let i = 0; i < this._canvases.length; i++) {
       const canvas = this._canvases[i];
       const canvasId = this.clipId + "-ch" + this.channelIndex + "-chunk" + i;