@waveform-playlist/ui-components 9.0.4 → 9.1.0

package/dist/index.js

@@ -62,6 +62,7 @@ __export(index_exports, {
   LoopRegion: () => LoopRegion,
   LoopRegionMarkers: () => LoopRegionMarkers,
   MasterVolumeControl: () => MasterVolumeControl,
+  PianoRollChannel: () => PianoRollChannel,
   Playhead: () => Playhead,
   PlayheadWithMarker: () => PlayheadWithMarker,
   Playlist: () => Playlist,
@@ -527,6 +528,10 @@ var defaultTheme = {
   annotationResizeHandleColor: "rgba(0, 0, 0, 0.4)",
   annotationResizeHandleActiveColor: "rgba(0, 0, 0, 0.8)",
   annotationTextItemHoverBackground: "rgba(0, 0, 0, 0.03)",
+  // Piano roll colors
+  pianoRollNoteColor: "#2a7070",
+  pianoRollSelectedNoteColor: "#3d9e9e",
+  pianoRollBackgroundColor: "#1a1a2e",
   // Spacing and sizing
   borderRadius: "4px",
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif',
@@ -604,6 +609,10 @@ var darkTheme = {
   annotationResizeHandleColor: "rgba(200, 160, 120, 0.5)",
   annotationResizeHandleActiveColor: "rgba(220, 180, 140, 0.8)",
   annotationTextItemHoverBackground: "rgba(200, 160, 120, 0.08)",
+  // Piano roll colors
+  pianoRollNoteColor: "#c49a6c",
+  pianoRollSelectedNoteColor: "#e8c090",
+  pianoRollBackgroundColor: "#0d0d14",
   // Spacing and sizing
   borderRadius: "4px",
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif',
@@ -615,19 +624,32 @@ var darkTheme = {
 var import_react = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var ViewportStore = class {
-  constructor() {
-    this._state = null;
+  constructor(containerEl) {
     this._listeners = /* @__PURE__ */ new Set();
+    this._notifyRafId = null;
     this.subscribe = (callback) => {
       this._listeners.add(callback);
       return () => this._listeners.delete(callback);
     };
     this.getSnapshot = () => this._state;
+    const width = containerEl?.clientWidth ?? (typeof window !== "undefined" ? window.innerWidth : 1024);
+    const buffer = width * 1.5;
+    this._state = {
+      scrollLeft: 0,
+      containerWidth: width,
+      visibleStart: 0,
+      visibleEnd: width + buffer
+    };
   }
   /**
    * Update viewport state. Applies a 100px scroll threshold to skip updates
    * that don't affect chunk visibility (1000px chunks with 1.5× overscan buffer).
    * Only notifies listeners when the state actually changes.
+   *
+   * Listener notification is deferred by one frame via requestAnimationFrame
+   * to avoid conflicting with React 19's concurrent rendering. When React
+   * time-slices a render across frames, synchronous useSyncExternalStore
+   * notifications can trigger "Should not already be working" errors.
    */
   update(scrollLeft, containerWidth) {
     const buffer = containerWidth * 1.5;
@@ -637,8 +659,19 @@ var ViewportStore = class {
       return;
     }
     this._state = { scrollLeft, containerWidth, visibleStart, visibleEnd };
-    for (const listener of this._listeners) {
-      listener();
+    if (this._notifyRafId === null) {
+      this._notifyRafId = requestAnimationFrame(() => {
+        this._notifyRafId = null;
+        for (const listener of this._listeners) {
+          listener();
+        }
+      });
+    }
+  }
+  cancelPendingNotification() {
+    if (this._notifyRafId !== null) {
+      cancelAnimationFrame(this._notifyRafId);
+      this._notifyRafId = null;
     }
   }
 };
@@ -649,7 +682,7 @@ var NULL_SNAPSHOT = () => null;
 var ScrollViewportProvider = ({ containerRef, children }) => {
   const storeRef = (0, import_react.useRef)(null);
   if (storeRef.current === null) {
-    storeRef.current = new ViewportStore();
+    storeRef.current = new ViewportStore(containerRef.current);
   }
   const store = storeRef.current;
   const rafIdRef = (0, import_react.useRef)(null);
@@ -665,43 +698,27 @@ var ScrollViewportProvider = ({ containerRef, children }) => {
       measure();
     });
   }, [measure]);
+  (0, import_react.useLayoutEffect)(() => {
+    measure();
+  }, [measure]);
   (0, import_react.useEffect)(() => {
     const el = containerRef.current;
     if (!el) return;
-    measure();
     el.addEventListener("scroll", scheduleUpdate, { passive: true });
-    let userHasInteracted = false;
-    const markInteracted = () => {
-      userHasInteracted = true;
-    };
-    el.addEventListener("pointerdown", markInteracted, { once: true });
-    el.addEventListener("keydown", markInteracted, { once: true });
-    el.addEventListener("wheel", markInteracted, { once: true, passive: true });
-    const resetHandler = () => {
-      if (!userHasInteracted && el.scrollLeft !== 0) {
-        el.scrollLeft = 0;
-        measure();
-      }
-      el.removeEventListener("scroll", resetHandler);
-    };
-    el.addEventListener("scroll", resetHandler);
     const resizeObserver = new ResizeObserver(() => {
       scheduleUpdate();
     });
     resizeObserver.observe(el);
     return () => {
       el.removeEventListener("scroll", scheduleUpdate);
-      el.removeEventListener("scroll", resetHandler);
-      el.removeEventListener("pointerdown", markInteracted);
-      el.removeEventListener("keydown", markInteracted);
-      el.removeEventListener("wheel", markInteracted);
       resizeObserver.disconnect();
       if (rafIdRef.current !== null) {
         cancelAnimationFrame(rafIdRef.current);
         rafIdRef.current = null;
       }
+      store.cancelPendingNotification();
     };
-  }, [containerRef, measure, scheduleUpdate]);
+  }, [containerRef, scheduleUpdate, store]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ViewportStoreContext.Provider, { value: store, children });
 };
 var useScrollViewport = () => {
@@ -836,8 +853,6 @@ var Waveform = import_styled_components9.default.canvas.attrs((props) => ({
 }))`
   position: absolute;
   top: 0;
-  /* Promote to own compositing layer for smoother scrolling */
-  will-change: transform;
   /* Disable image rendering interpolation */
   image-rendering: pixelated;
   image-rendering: crisp-edges;
@@ -874,7 +889,8 @@ var Channel = (props) => {
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
   const clipOriginX = useClipViewportOrigin();
   const visibleChunkIndices = useVisibleChunkIndices(length, import_core.MAX_CANVAS_WIDTH, clipOriginX);
-  (0, import_react4.useLayoutEffect)(() => {
+  (0, import_react4.useEffect)(() => {
+    const tDraw = performance.now();
     const step = barWidth + barGap;
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
       const globalPixelOffset = canvasIdx * import_core.MAX_CANVAS_WIDTH;
@@ -910,6 +926,9 @@ var Channel = (props) => {
         }
       }
     }
+    console.log(
+      `[waveform] draw ch${index}: ${canvasMapRef.current.size} chunks, ${(performance.now() - tDraw).toFixed(1)}ms`
+    );
   }, [
     canvasMapRef,
     data,
@@ -922,7 +941,8 @@ var Channel = (props) => {
     barWidth,
     barGap,
     drawMode,
-    visibleChunkIndices
+    visibleChunkIndices,
+    index
   ]);
   const waveforms = visibleChunkIndices.map((i) => {
     const chunkLeft = i * import_core.MAX_CANVAS_WIDTH;
@@ -1040,7 +1060,7 @@ var ClipHeaderPresentational = ({
   trackName,
   isSelected = false
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderContainer, { $interactive: false, $isSelected: isSelected, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TrackName, { children: trackName }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderContainer, { $interactive: false, $isSelected: isSelected, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TrackName, { title: trackName, children: trackName }) });
 };
 var ClipHeader = ({
   clipId,
@@ -1062,7 +1082,7 @@ var ClipHeader = ({
       "data-clip-id": clipId,
       $interactive: true,
       $isSelected: isSelected,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TrackName, { children: trackName })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TrackName, { title: trackName, children: trackName })
     }
   );
 };
@@ -1283,7 +1303,7 @@ var Clip = ({
       "data-clip-container": "true",
       "data-track-id": trackId,
       onMouseDown,
-      ...!enableDrag ? { tabIndex: -1 } : {},
+      tabIndex: -1,
       children: [
         showHeader && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           ClipHeader,
@@ -1393,11 +1413,140 @@ var MasterVolumeControl = ({
   ] });
 };
 
-// src/components/Playhead.tsx
+// src/components/PianoRollChannel.tsx
 var import_react8 = require("react");
 var import_styled_components15 = __toESM(require("styled-components"));
+var import_core2 = require("@waveform-playlist/core");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var PlayheadLine = import_styled_components15.default.div.attrs((props) => ({
+var NoteCanvas = import_styled_components15.default.canvas.attrs((props) => ({
+  style: {
+    width: `${props.$cssWidth}px`,
+    height: `${props.$waveHeight}px`,
+    left: `${props.$left}px`
+  }
+}))`
+  position: absolute;
+  top: 0;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+`;
+var Wrapper2 = import_styled_components15.default.div.attrs((props) => ({
+  style: {
+    top: `${props.$waveHeight * props.$index}px`,
+    width: `${props.$cssWidth}px`,
+    height: `${props.$waveHeight}px`
+  }
+}))`
+  position: absolute;
+  background: ${(props) => props.$backgroundColor};
+  transform: translateZ(0);
+  backface-visibility: hidden;
+`;
+var PianoRollChannel = ({
+  index,
+  midiNotes,
+  length,
+  waveHeight,
+  devicePixelRatio,
+  samplesPerPixel,
+  sampleRate,
+  clipOffsetSeconds,
+  noteColor = "#2a7070",
+  selectedNoteColor = "#3d9e9e",
+  isSelected = false,
+  transparentBackground = false,
+  backgroundColor = "#1a1a2e"
+}) => {
+  const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
+  const clipOriginX = useClipViewportOrigin();
+  const visibleChunkIndices = useVisibleChunkIndices(length, import_core2.MAX_CANVAS_WIDTH, clipOriginX);
+  const { minMidi, maxMidi } = (0, import_react8.useMemo)(() => {
+    if (midiNotes.length === 0) return { minMidi: 0, maxMidi: 127 };
+    let min = 127, max = 0;
+    for (const note of midiNotes) {
+      if (note.midi < min) min = note.midi;
+      if (note.midi > max) max = note.midi;
+    }
+    return { minMidi: Math.max(0, min - 1), maxMidi: Math.min(127, max + 1) };
+  }, [midiNotes]);
+  const color = isSelected ? selectedNoteColor : noteColor;
+  (0, import_react8.useEffect)(() => {
+    const tDraw = performance.now();
+    const noteRange = maxMidi - minMidi + 1;
+    const noteHeight = Math.max(2, waveHeight / noteRange);
+    const pixelsPerSecond = sampleRate / samplesPerPixel;
+    for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
+      const chunkPixelStart = canvasIdx * import_core2.MAX_CANVAS_WIDTH;
+      const canvasWidth = canvas.width / devicePixelRatio;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) continue;
+      ctx.resetTransform();
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.imageSmoothingEnabled = false;
+      ctx.scale(devicePixelRatio, devicePixelRatio);
+      const chunkStartTime = chunkPixelStart * samplesPerPixel / sampleRate;
+      const chunkEndTime = (chunkPixelStart + canvasWidth) * samplesPerPixel / sampleRate;
+      for (const note of midiNotes) {
+        const noteStart = note.time - clipOffsetSeconds;
+        const noteEnd = noteStart + note.duration;
+        if (noteEnd <= chunkStartTime || noteStart >= chunkEndTime) continue;
+        const x = noteStart * pixelsPerSecond - chunkPixelStart;
+        const w = Math.max(2, note.duration * pixelsPerSecond);
+        const y = (maxMidi - note.midi) / noteRange * waveHeight;
+        const alpha = 0.3 + note.velocity * 0.7;
+        ctx.fillStyle = color;
+        ctx.globalAlpha = alpha;
+        const r = 1;
+        ctx.beginPath();
+        ctx.roundRect(x, y, w, noteHeight, r);
+        ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    }
+    console.log(
+      `[piano-roll] draw ch${index}: ${canvasMapRef.current.size} chunks, ${midiNotes.length} notes, ${(performance.now() - tDraw).toFixed(1)}ms`
+    );
+  }, [
+    canvasMapRef,
+    midiNotes,
+    waveHeight,
+    devicePixelRatio,
+    samplesPerPixel,
+    sampleRate,
+    clipOffsetSeconds,
+    color,
+    minMidi,
+    maxMidi,
+    length,
+    visibleChunkIndices,
+    index
+  ]);
+  const canvases = visibleChunkIndices.map((i) => {
+    const chunkLeft = i * import_core2.MAX_CANVAS_WIDTH;
+    const currentWidth = Math.min(length - chunkLeft, import_core2.MAX_CANVAS_WIDTH);
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      NoteCanvas,
+      {
+        $cssWidth: currentWidth,
+        $left: chunkLeft,
+        width: currentWidth * devicePixelRatio,
+        height: waveHeight * devicePixelRatio,
+        $waveHeight: waveHeight,
+        "data-index": i,
+        ref: canvasRef
+      },
+      `${length}-${i}`
+    );
+  });
+  const bgColor = transparentBackground ? "transparent" : backgroundColor;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Wrapper2, { $index: index, $cssWidth: length, $waveHeight: waveHeight, $backgroundColor: bgColor, children: canvases });
+};
+
+// src/components/Playhead.tsx
+var import_react9 = require("react");
+var import_styled_components16 = __toESM(require("styled-components"));
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var PlayheadLine = import_styled_components16.default.div.attrs((props) => ({
   style: {
     transform: `translate3d(${props.$position}px, 0, 0)`
   }
@@ -1413,9 +1562,9 @@ var PlayheadLine = import_styled_components15.default.div.attrs((props) => ({
   will-change: transform;
 `;
 var Playhead = ({ position, color = "#ff0000" }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PlayheadLine, { $position: position, $color: color });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PlayheadLine, { $position: position, $color: color });
 };
-var PlayheadWithMarkerContainer = import_styled_components15.default.div`
+var PlayheadWithMarkerContainer = import_styled_components16.default.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1424,7 +1573,7 @@ var PlayheadWithMarkerContainer = import_styled_components15.default.div`
   pointer-events: none;
   will-change: transform;
 `;
-var MarkerTriangle = import_styled_components15.default.div`
+var MarkerTriangle = import_styled_components16.default.div`
   position: absolute;
   top: -10px;
   left: -6px;
@@ -1434,7 +1583,7 @@ var MarkerTriangle = import_styled_components15.default.div`
   border-right: 7px solid transparent;
   border-top: 10px solid ${(props) => props.$color};
 `;
-var MarkerLine = import_styled_components15.default.div`
+var MarkerLine = import_styled_components16.default.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1450,13 +1599,13 @@ var PlayheadWithMarker = ({
   audioStartPositionRef,
   samplesPerPixel,
   sampleRate,
-  controlsOffset,
+  controlsOffset = 0,
   getAudioContextTime,
   getPlaybackTime
 }) => {
-  const containerRef = (0, import_react8.useRef)(null);
-  const animationFrameRef = (0, import_react8.useRef)(null);
-  (0, import_react8.useEffect)(() => {
+  const containerRef = (0, import_react9.useRef)(null);
+  const animationFrameRef = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         let time;
@@ -1501,35 +1650,51 @@ var PlayheadWithMarker = ({
     getAudioContextTime,
     getPlaybackTime
   ]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!isPlaying && containerRef.current) {
       const time = currentTimeRef.current ?? 0;
       const pos = time * sampleRate / samplesPerPixel + controlsOffset;
       containerRef.current.style.transform = `translate3d(${pos}px, 0, 0)`;
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(PlayheadWithMarkerContainer, { ref: containerRef, $color: color, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkerTriangle, { $color: color }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MarkerLine, { $color: color })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(PlayheadWithMarkerContainer, { ref: containerRef, $color: color, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MarkerTriangle, { $color: color }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MarkerLine, { $color: color })
   ] });
 };
 
 // src/components/Playlist.tsx
-var import_styled_components16 = __toESM(require("styled-components"));
-var import_react9 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var Wrapper2 = import_styled_components16.default.div`
+var import_styled_components17 = __toESM(require("styled-components"));
+var import_react10 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Wrapper3 = import_styled_components17.default.div`
+  display: flex;
   overflow-y: hidden;
+  position: relative;
+`;
+var ControlsColumn = import_styled_components17.default.div.attrs((props) => ({
+  style: { width: `${props.$width}px` }
+}))`
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+var TimescaleGap = import_styled_components17.default.div.attrs((props) => ({
+  style: { height: `${props.$height}px` }
+}))``;
+var ScrollArea = import_styled_components17.default.div`
   overflow-x: auto;
+  overflow-y: hidden;
+  overflow-anchor: none;
+  flex: 1;
   position: relative;
 `;
-var ScrollContainer = import_styled_components16.default.div.attrs((props) => ({
+var ScrollContainerInner = import_styled_components17.default.div.attrs((props) => ({
   style: props.$width !== void 0 ? { width: `${props.$width}px` } : {}
 }))`
   position: relative;
   background: ${(props) => props.$backgroundColor || "transparent"};
 `;
-var TimescaleWrapper = import_styled_components16.default.div.attrs((props) => ({
+var TimescaleWrapper = import_styled_components17.default.div.attrs((props) => ({
   style: props.$width ? { minWidth: `${props.$width}px` } : {}
 }))`
   background: ${(props) => props.$backgroundColor || "white"};
@@ -1537,14 +1702,14 @@ var TimescaleWrapper = import_styled_components16.default.div.attrs((props) => (
   position: relative;
   overflow: hidden; /* Constrain loop region to timescale area */
 `;
-var TracksContainer = import_styled_components16.default.div.attrs((props) => ({
+var TracksContainer = import_styled_components17.default.div.attrs((props) => ({
   style: props.$width !== void 0 ? { minWidth: `${props.$width}px` } : {}
 }))`
   position: relative;
   background: ${(props) => props.$backgroundColor || "transparent"};
   width: 100%;
 `;
-var ClickOverlay = import_styled_components16.default.div`
+var ClickOverlay = import_styled_components17.default.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1561,7 +1726,6 @@ var Playlist = ({
   timescale,
   timescaleWidth,
   tracksWidth,
-  scrollContainerWidth,
   controlsWidth,
   onTracksClick,
   onTracksMouseDown,
@@ -1569,40 +1733,48 @@ var Playlist = ({
   onTracksMouseUp,
   scrollContainerRef,
   isSelecting,
-  "data-playlist-state": playlistState
+  "data-playlist-state": playlistState,
+  trackControlsSlots,
+  timescaleGapHeight = 0
 }) => {
-  const wrapperRef = (0, import_react9.useRef)(null);
-  const handleRef = (0, import_react9.useCallback)(
+  const scrollAreaRef = (0, import_react10.useRef)(null);
+  const handleRef = (0, import_react10.useCallback)(
     (el) => {
-      wrapperRef.current = el;
+      scrollAreaRef.current = el;
       scrollContainerRef?.(el);
     },
     [scrollContainerRef]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Wrapper2, { "data-scroll-container": "true", "data-playlist-state": playlistState, ref: handleRef, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ScrollViewportProvider, { containerRef: wrapperRef, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ScrollContainer, { $backgroundColor: backgroundColor, $width: scrollContainerWidth, children: [
-    timescale && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(TracksContainer, { $width: tracksWidth, $backgroundColor: backgroundColor, children: [
-      children,
-      (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        ClickOverlay,
-        {
-          $controlsWidth: controlsWidth,
-          $isSelecting: isSelecting,
-          onClick: onTracksClick,
-          onMouseDown: onTracksMouseDown,
-          onMouseMove: onTracksMouseMove,
-          onMouseUp: onTracksMouseUp
-        }
-      )
-    ] })
-  ] }) }) });
+  const showControls = controlsWidth !== void 0 && controlsWidth > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Wrapper3, { "data-playlist-state": playlistState, children: [
+    showControls && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ControlsColumn, { $width: controlsWidth, children: [
+      timescaleGapHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TimescaleGap, { $height: timescaleGapHeight }),
+      trackControlsSlots
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ScrollArea, { "data-scroll-container": "true", ref: handleRef, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ScrollViewportProvider, { containerRef: scrollAreaRef, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ScrollContainerInner, { $backgroundColor: backgroundColor, $width: tracksWidth, children: [
+      timescale && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(TracksContainer, { $width: tracksWidth, $backgroundColor: backgroundColor, children: [
+        children,
+        (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          ClickOverlay,
+          {
+            $isSelecting: isSelecting,
+            onClick: onTracksClick,
+            onMouseDown: onTracksMouseDown,
+            onMouseMove: onTracksMouseMove,
+            onMouseUp: onTracksMouseUp
+          }
+        )
+      ] })
+    ] }) }) })
+  ] });
 };
-var StyledPlaylist = (0, import_styled_components16.withTheme)(Playlist);
+var StyledPlaylist = (0, import_styled_components17.withTheme)(Playlist);
 
 // src/components/Selection.tsx
-var import_styled_components17 = __toESM(require("styled-components"));
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var SelectionOverlay = import_styled_components17.default.div.attrs((props) => ({
+var import_styled_components18 = __toESM(require("styled-components"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var SelectionOverlay = import_styled_components18.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
     width: `${props.$width}px`
@@ -1625,14 +1797,14 @@ var Selection = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
 };
 
 // src/components/LoopRegion.tsx
-var import_react10 = require("react");
-var import_styled_components18 = __toESM(require("styled-components"));
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var LoopRegionOverlayDiv = import_styled_components18.default.div.attrs((props) => ({
+var import_react11 = require("react");
+var import_styled_components19 = __toESM(require("styled-components"));
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var LoopRegionOverlayDiv = import_styled_components19.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
     width: `${props.$width}px`
@@ -1645,7 +1817,7 @@ var LoopRegionOverlayDiv = import_styled_components18.default.div.attrs((props)
   z-index: 55; /* Between clips (z-index: 50) and selection (z-index: 60) */
   pointer-events: none;
 `;
-var LoopMarker = import_styled_components18.default.div.attrs((props) => ({
+var LoopMarker = import_styled_components19.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`
   }
@@ -1680,8 +1852,8 @@ var LoopRegion = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       LoopRegionOverlayDiv,
       {
         $left: startPosition,
@@ -1690,7 +1862,7 @@ var LoopRegion = ({
         "data-loop-region": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       LoopMarker,
       {
         $left: startPosition,
@@ -1699,7 +1871,7 @@ var LoopRegion = ({
         "data-loop-marker": "start"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       LoopMarker,
       {
         $left: endPosition - 2,
@@ -1710,7 +1882,7 @@ var LoopRegion = ({
     )
   ] });
 };
-var DraggableMarkerHandle = import_styled_components18.default.div.attrs((props) => ({
+var DraggableMarkerHandle = import_styled_components19.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`
   }
@@ -1752,7 +1924,7 @@ var DraggableMarkerHandle = import_styled_components18.default.div.attrs((props)
     opacity: 1;
   }
 `;
-var TimescaleLoopShade = import_styled_components18.default.div.attrs((props) => ({
+var TimescaleLoopShade = import_styled_components19.default.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
     width: `${props.$width}px`
@@ -1780,12 +1952,12 @@ var LoopRegionMarkers = ({
   minPosition = 0,
   maxPosition = Infinity
 }) => {
-  const [draggingMarker, setDraggingMarker] = (0, import_react10.useState)(null);
-  const dragStartX = (0, import_react10.useRef)(0);
-  const dragStartPosition = (0, import_react10.useRef)(0);
-  const dragStartEnd = (0, import_react10.useRef)(0);
+  const [draggingMarker, setDraggingMarker] = (0, import_react11.useState)(null);
+  const dragStartX = (0, import_react11.useRef)(0);
+  const dragStartPosition = (0, import_react11.useRef)(0);
+  const dragStartEnd = (0, import_react11.useRef)(0);
   const width = Math.max(0, endPosition - startPosition);
-  const handleMarkerMouseDown = (0, import_react10.useCallback)(
+  const handleMarkerMouseDown = (0, import_react11.useCallback)(
     (e, marker) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1813,7 +1985,7 @@ var LoopRegionMarkers = ({
     },
     [startPosition, endPosition, minPosition, maxPosition, onLoopStartChange, onLoopEndChange]
   );
-  const handleRegionMouseDown = (0, import_react10.useCallback)(
+  const handleRegionMouseDown = (0, import_react11.useCallback)(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -1849,8 +2021,8 @@ var LoopRegionMarkers = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       TimescaleLoopShade,
       {
         $left: startPosition,
@@ -1861,7 +2033,7 @@ var LoopRegionMarkers = ({
         "data-loop-region-timescale": true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       DraggableMarkerHandle,
       {
         $left: startPosition,
@@ -1872,7 +2044,7 @@ var LoopRegionMarkers = ({
         "data-loop-marker-handle": "start"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       DraggableMarkerHandle,
       {
         $left: endPosition,
@@ -1885,13 +2057,10 @@ var LoopRegionMarkers = ({
     )
   ] });
 };
-var TimescaleLoopCreator = import_styled_components18.default.div.attrs((props) => ({
-  style: {
-    left: `${props.$leftOffset || 0}px`
-  }
-}))`
+var TimescaleLoopCreator = import_styled_components19.default.div`
   position: absolute;
   top: 0;
+  left: 0;
   right: 0;
   height: 100%; /* Stay within timescale bounds, don't extend into tracks */
   cursor: crosshair;
@@ -1904,14 +2073,13 @@ var TimescaleLoopRegion = ({
   regionColor = "rgba(59, 130, 246, 0.3)",
   onLoopRegionChange,
   minPosition = 0,
-  maxPosition = Infinity,
-  controlsOffset = 0
+  maxPosition = Infinity
 }) => {
-  const [, setIsCreating] = (0, import_react10.useState)(false);
-  const createStartX = (0, import_react10.useRef)(0);
-  const containerRef = (0, import_react10.useRef)(null);
+  const [, setIsCreating] = (0, import_react11.useState)(false);
+  const createStartX = (0, import_react11.useRef)(0);
+  const containerRef = (0, import_react11.useRef)(null);
   const hasLoopRegion = endPosition > startPosition;
-  const handleBackgroundMouseDown = (0, import_react10.useCallback)(
+  const handleBackgroundMouseDown = (0, import_react11.useCallback)(
     (e) => {
       const target = e.target;
       if (target.closest("[data-loop-marker-handle]") || target.closest("[data-loop-region-timescale]")) {
@@ -1942,14 +2110,13 @@ var TimescaleLoopRegion = ({
     },
     [minPosition, maxPosition, onLoopRegionChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     TimescaleLoopCreator,
     {
       ref: containerRef,
-      $leftOffset: controlsOffset,
       onMouseDown: handleBackgroundMouseDown,
       "data-timescale-loop-creator": true,
-      children: hasLoopRegion && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      children: hasLoopRegion && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         LoopRegionMarkers,
         {
           startPosition,
@@ -1968,10 +2135,10 @@ var TimescaleLoopRegion = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/TimeInput.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/utils/timeFormat.ts
 function clockFormat(seconds, decimals) {
@@ -2021,7 +2188,7 @@ function parseTime(timeStr, format) {
 }
 
 // src/components/TimeInput.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var TimeInput = ({
   id,
   label,
@@ -2031,8 +2198,8 @@ var TimeInput = ({
   onChange,
   readOnly = false
 }) => {
-  const [displayValue, setDisplayValue] = (0, import_react11.useState)("");
-  (0, import_react11.useEffect)(() => {
+  const [displayValue, setDisplayValue] = (0, import_react12.useState)("");
+  (0, import_react12.useEffect)(() => {
     const formatted = formatTime(value, format);
     setDisplayValue(formatted);
   }, [value, format, id]);
@@ -2052,9 +2219,9 @@ var TimeInput = ({
       e.currentTarget.blur();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       BaseInput,
       {
         type: "text",
@@ -2071,15 +2238,15 @@ var TimeInput = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var SelectionTimeInputs = ({
   selectionStart,
   selectionEnd,
   onSelectionChange,
   className
 }) => {
-  const [timeFormat, setTimeFormat] = (0, import_react12.useState)("hh:mm:ss.uuu");
-  (0, import_react12.useEffect)(() => {
+  const [timeFormat, setTimeFormat] = (0, import_react13.useState)("hh:mm:ss.uuu");
+  (0, import_react13.useEffect)(() => {
     const timeFormatSelect = document.querySelector(".time-format");
     const handleFormatChange = () => {
       if (timeFormatSelect) {
@@ -2104,8 +2271,8 @@ var SelectionTimeInputs = ({
       onSelectionChange(selectionStart, value);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       TimeInput,
       {
         id: "audio_start",
@@ -2116,7 +2283,7 @@ var SelectionTimeInputs = ({
         onChange: handleStartChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       TimeInput,
       {
         id: "audio_end",
@@ -2131,14 +2298,14 @@ var SelectionTimeInputs = ({
 };
 
 // src/contexts/DevicePixelRatio.tsx
-var import_react13 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react14 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function getScale() {
   return window.devicePixelRatio;
 }
-var DevicePixelRatioContext = (0, import_react13.createContext)(getScale());
+var DevicePixelRatioContext = (0, import_react14.createContext)(getScale());
 var DevicePixelRatioProvider = ({ children }) => {
-  const [scale, setScale] = (0, import_react13.useState)(getScale());
+  const [scale, setScale] = (0, import_react14.useState)(getScale());
   matchMedia(`(resolution: ${getScale()}dppx)`).addEventListener(
     "change",
     () => {
@@ -2146,13 +2313,13 @@ var DevicePixelRatioProvider = ({ children }) => {
     },
     { once: true }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
 };
-var useDevicePixelRatio = () => (0, import_react13.useContext)(DevicePixelRatioContext);
+var useDevicePixelRatio = () => (0, import_react14.useContext)(DevicePixelRatioContext);
 
 // src/contexts/PlaylistInfo.tsx
-var import_react14 = require("react");
-var PlaylistInfoContext = (0, import_react14.createContext)({
+var import_react15 = require("react");
+var PlaylistInfoContext = (0, import_react15.createContext)({
   sampleRate: 48e3,
   samplesPerPixel: 1e3,
   zoomLevels: [1e3, 1500, 2e3, 2500],
@@ -2166,22 +2333,22 @@ var PlaylistInfoContext = (0, import_react14.createContext)({
   barWidth: 1,
   barGap: 0
 });
-var usePlaylistInfo = () => (0, import_react14.useContext)(PlaylistInfoContext);
+var usePlaylistInfo = () => (0, import_react15.useContext)(PlaylistInfoContext);
 
 // src/contexts/Theme.tsx
-var import_react15 = require("react");
-var import_styled_components19 = require("styled-components");
-var useTheme2 = () => (0, import_react15.useContext)(import_styled_components19.ThemeContext);
-
-// src/contexts/TrackControls.tsx
 var import_react16 = require("react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var TrackControlsContext = (0, import_react16.createContext)(/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react16.Fragment, {}));
-var useTrackControls = () => (0, import_react16.useContext)(TrackControlsContext);
+var import_styled_components20 = require("styled-components");
+var useTheme2 = () => (0, import_react16.useContext)(import_styled_components20.ThemeContext);
 
-// src/contexts/Playout.tsx
+// src/contexts/TrackControls.tsx
 var import_react17 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
+var TrackControlsContext = (0, import_react17.createContext)(/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react17.Fragment, {}));
+var useTrackControls = () => (0, import_react17.useContext)(TrackControlsContext);
+
+// src/contexts/Playout.tsx
+var import_react18 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var defaultProgress = 0;
 var defaultIsPlaying = false;
 var defaultSelectionStart = 0;
@@ -2192,8 +2359,8 @@ var defaultPlayout = {
   selectionStart: defaultSelectionStart,
   selectionEnd: defaultSelectionEnd
 };
-var PlayoutStatusContext = (0, import_react17.createContext)(defaultPlayout);
-var PlayoutStatusUpdateContext = (0, import_react17.createContext)({
+var PlayoutStatusContext = (0, import_react18.createContext)(defaultPlayout);
+var PlayoutStatusUpdateContext = (0, import_react18.createContext)({
   setIsPlaying: () => {
   },
   setProgress: () => {
@@ -2202,26 +2369,26 @@ var PlayoutStatusUpdateContext = (0, import_react17.createContext)({
   }
 });
 var PlayoutProvider = ({ children }) => {
-  const [isPlaying, setIsPlaying] = (0, import_react17.useState)(defaultIsPlaying);
-  const [progress, setProgress] = (0, import_react17.useState)(defaultProgress);
-  const [selectionStart, setSelectionStart] = (0, import_react17.useState)(defaultSelectionStart);
-  const [selectionEnd, setSelectionEnd] = (0, import_react17.useState)(defaultSelectionEnd);
+  const [isPlaying, setIsPlaying] = (0, import_react18.useState)(defaultIsPlaying);
+  const [progress, setProgress] = (0, import_react18.useState)(defaultProgress);
+  const [selectionStart, setSelectionStart] = (0, import_react18.useState)(defaultSelectionStart);
+  const [selectionEnd, setSelectionEnd] = (0, import_react18.useState)(defaultSelectionEnd);
   const setSelection = (start, end) => {
     setSelectionStart(start);
     setSelectionEnd(end);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
 };
-var usePlayoutStatus = () => (0, import_react17.useContext)(PlayoutStatusContext);
-var usePlayoutStatusUpdate = () => (0, import_react17.useContext)(PlayoutStatusUpdateContext);
+var usePlayoutStatus = () => (0, import_react18.useContext)(PlayoutStatusContext);
+var usePlayoutStatusUpdate = () => (0, import_react18.useContext)(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
-var import_react18 = require("react");
-var import_styled_components20 = __toESM(require("styled-components"));
-var import_core2 = require("@waveform-playlist/core");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_styled_components21 = __toESM(require("styled-components"));
+var import_core3 = require("@waveform-playlist/core");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var LINEAR_FREQUENCY_SCALE = (f, minF, maxF) => (f - minF) / (maxF - minF);
-var Wrapper3 = import_styled_components20.default.div.attrs((props) => ({
+var Wrapper4 = import_styled_components21.default.div.attrs((props) => ({
   style: {
     top: `${props.$waveHeight * props.$index}px`,
     width: `${props.$cssWidth}px`,
@@ -2233,7 +2400,7 @@ var Wrapper3 = import_styled_components20.default.div.attrs((props) => ({
   transform: translateZ(0);
   backface-visibility: hidden;
 `;
-var SpectrogramCanvas = import_styled_components20.default.canvas.attrs((props) => ({
+var SpectrogramCanvas = import_styled_components21.default.canvas.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
     height: `${props.$waveHeight}px`,
@@ -2242,8 +2409,6 @@ var SpectrogramCanvas = import_styled_components20.default.canvas.attrs((props)
 }))`
   position: absolute;
   top: 0;
-  /* Promote to own compositing layer for smoother scrolling */
-  will-change: transform;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
 `;
@@ -2273,24 +2438,24 @@ var SpectrogramChannel = ({
 }) => {
   const channelIndex = channelIndexProp ?? index;
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
-  const registeredIdsRef = (0, import_react18.useRef)([]);
-  const transferredCanvasesRef = (0, import_react18.useRef)(/* @__PURE__ */ new WeakSet());
-  const workerApiRef = (0, import_react18.useRef)(workerApi);
-  const onCanvasesReadyRef = (0, import_react18.useRef)(onCanvasesReady);
+  const registeredIdsRef = (0, import_react19.useRef)([]);
+  const transferredCanvasesRef = (0, import_react19.useRef)(/* @__PURE__ */ new WeakSet());
+  const workerApiRef = (0, import_react19.useRef)(workerApi);
+  const onCanvasesReadyRef = (0, import_react19.useRef)(onCanvasesReady);
   const isWorkerMode = !!(workerApi && clipId);
   const clipOriginX = useClipViewportOrigin();
-  const visibleChunkIndices = useVisibleChunkIndices(length, import_core2.MAX_CANVAS_WIDTH, clipOriginX);
+  const visibleChunkIndices = useVisibleChunkIndices(length, import_core3.MAX_CANVAS_WIDTH, clipOriginX);
   const lut = colorLUT ?? DEFAULT_COLOR_LUT;
   const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
   const scaleFn = frequencyScaleFn ?? LINEAR_FREQUENCY_SCALE;
   const hasCustomFrequencyScale = Boolean(frequencyScaleFn);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     workerApiRef.current = workerApi;
   }, [workerApi]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     onCanvasesReadyRef.current = onCanvasesReady;
   }, [onCanvasesReady]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!isWorkerMode) return;
     const currentWorkerApi = workerApiRef.current;
     if (!currentWorkerApi || !clipId) return;
@@ -2345,15 +2510,15 @@ var SpectrogramChannel = ({
         const match = id.match(/chunk(\d+)$/);
         if (!match) {
           console.warn(`[spectrogram] Unexpected canvas ID format: ${id}`);
-          return import_core2.MAX_CANVAS_WIDTH;
+          return import_core3.MAX_CANVAS_WIDTH;
         }
         const chunkIdx = parseInt(match[1], 10);
-        return Math.min(length - chunkIdx * import_core2.MAX_CANVAS_WIDTH, import_core2.MAX_CANVAS_WIDTH);
+        return Math.min(length - chunkIdx * import_core3.MAX_CANVAS_WIDTH, import_core3.MAX_CANVAS_WIDTH);
       });
       onCanvasesReadyRef.current?.(allIds, allWidths);
     }
   }, [canvasMapRef, isWorkerMode, clipId, channelIndex, length, visibleChunkIndices]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     return () => {
       const api = workerApiRef.current;
       if (!api) return;
@@ -2367,7 +2532,7 @@ var SpectrogramChannel = ({
       registeredIdsRef.current = [];
     };
   }, []);
-  (0, import_react18.useLayoutEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (isWorkerMode || !data) return;
     const {
       frequencyBinCount,
@@ -2380,7 +2545,7 @@ var SpectrogramChannel = ({
     const rangeDb = rawRangeDb === 0 ? 1 : rawRangeDb;
     const binToFreq = (bin) => bin / frequencyBinCount * (sampleRate / 2);
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
-      const globalPixelOffset = canvasIdx * import_core2.MAX_CANVAS_WIDTH;
+      const globalPixelOffset = canvasIdx * import_core3.MAX_CANVAS_WIDTH;
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
       const canvasWidth = canvas.width / devicePixelRatio;
@@ -2456,9 +2621,9 @@ var SpectrogramChannel = ({
     visibleChunkIndices
   ]);
   const canvases = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * import_core2.MAX_CANVAS_WIDTH;
-    const currentWidth = Math.min(length - chunkLeft, import_core2.MAX_CANVAS_WIDTH);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    const chunkLeft = i * import_core3.MAX_CANVAS_WIDTH;
+    const currentWidth = Math.min(length - chunkLeft, import_core3.MAX_CANVAS_WIDTH);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       SpectrogramCanvas,
       {
         $cssWidth: currentWidth,
@@ -2472,11 +2637,11 @@ var SpectrogramChannel = ({
       `${length}-${i}`
     );
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Wrapper4, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
 };
 
 // src/components/SmartChannel.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var SmartChannel = ({
   isSelected,
   transparentBackground,
@@ -2490,10 +2655,19 @@ var SmartChannel = ({
   spectrogramWorkerApi,
   spectrogramClipId,
   spectrogramOnCanvasesReady,
+  midiNotes,
+  sampleRate: sampleRateProp,
+  clipOffsetSeconds,
   ...props
 }) => {
   const theme = useTheme2();
-  const { waveHeight, barWidth, barGap, samplesPerPixel: contextSpp } = usePlaylistInfo();
+  const {
+    waveHeight,
+    barWidth,
+    barGap,
+    samplesPerPixel: contextSpp,
+    sampleRate: contextSampleRate
+  } = usePlaylistInfo();
   const devicePixelRatio = useDevicePixelRatio();
   const samplesPerPixel = sppProp ?? contextSpp;
   const waveOutlineColor = isSelected && theme ? theme.selectedWaveOutlineColor : theme?.waveOutlineColor;
@@ -2501,7 +2675,7 @@ var SmartChannel = ({
   const drawMode = theme?.waveformDrawMode || "inverted";
   const hasSpectrogram = spectrogramData || spectrogramWorkerApi;
   if (renderMode === "spectrogram" && hasSpectrogram) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       SpectrogramChannel,
       {
         index: props.index,
@@ -2522,8 +2696,8 @@ var SmartChannel = ({
   }
   if (renderMode === "both" && hasSpectrogram) {
     const halfHeight = Math.floor(waveHeight / 2);
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         SpectrogramChannel,
         {
           index: props.index * 2,
@@ -2542,7 +2716,7 @@ var SmartChannel = ({
           onCanvasesReady: spectrogramOnCanvasesReady
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "div",
         {
           style: {
@@ -2551,7 +2725,7 @@ var SmartChannel = ({
             width: props.length,
             height: halfHeight
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             Channel,
             {
               ...props,
@@ -2570,7 +2744,27 @@ var SmartChannel = ({
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  if (renderMode === "piano-roll") {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      PianoRollChannel,
+      {
+        index: props.index,
+        midiNotes: midiNotes ?? [],
+        length: props.length,
+        waveHeight,
+        devicePixelRatio,
+        samplesPerPixel,
+        sampleRate: sampleRateProp ?? contextSampleRate,
+        clipOffsetSeconds: clipOffsetSeconds ?? 0,
+        noteColor: theme?.pianoRollNoteColor,
+        selectedNoteColor: theme?.pianoRollSelectedNoteColor,
+        isSelected,
+        transparentBackground,
+        backgroundColor: theme?.pianoRollBackgroundColor
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     Channel,
     {
       ...props,
@@ -2587,11 +2781,11 @@ var SmartChannel = ({
 };
 
 // src/components/SpectrogramLabels.tsx
-var import_react19 = require("react");
-var import_styled_components21 = __toESM(require("styled-components"));
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_react20 = require("react");
+var import_styled_components22 = __toESM(require("styled-components"));
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var LABELS_WIDTH = 72;
-var LabelsStickyWrapper = import_styled_components21.default.div`
+var LabelsStickyWrapper = import_styled_components22.default.div`
   position: sticky;
   left: 0;
   z-index: 101;
@@ -2639,12 +2833,12 @@ var SpectrogramLabels = ({
   renderMode = "spectrogram",
   hasClipHeaders = false
 }) => {
-  const canvasRef = (0, import_react19.useRef)(null);
+  const canvasRef = (0, import_react20.useRef)(null);
   const devicePixelRatio = useDevicePixelRatio();
   const spectrogramHeight = renderMode === "both" ? Math.floor(waveHeight / 2) : waveHeight;
   const totalHeight = numChannels * waveHeight;
   const clipHeaderOffset = hasClipHeaders ? 22 : 0;
-  (0, import_react19.useLayoutEffect)(() => {
+  (0, import_react20.useLayoutEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -2682,7 +2876,7 @@ var SpectrogramLabels = ({
     spectrogramHeight,
     clipHeaderOffset
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "canvas",
     {
       ref: canvasRef,
@@ -2698,11 +2892,11 @@ var SpectrogramLabels = ({
 };
 
 // src/components/SmartScale.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/components/TimeScale.tsx
-var import_react20 = __toESM(require("react"));
-var import_styled_components22 = __toESM(require("styled-components"));
+var import_react21 = __toESM(require("react"));
+var import_styled_components23 = __toESM(require("styled-components"));
 
 // src/utils/conversions.ts
 function samplesToSeconds(samples, sampleRate) {
@@ -2725,18 +2919,17 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 }
 
 // src/components/TimeScale.tsx
-var import_core3 = require("@waveform-playlist/core");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_core4 = require("@waveform-playlist/core");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function formatTime2(milliseconds) {
   const seconds = Math.floor(milliseconds / 1e3);
   const s = seconds % 60;
   const m = (seconds - s) / 60;
   return `${m}:${String(s).padStart(2, "0")}`;
 }
-var PlaylistTimeScaleScroll = import_styled_components22.default.div.attrs((props) => ({
+var PlaylistTimeScaleScroll = import_styled_components23.default.div.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
-    marginLeft: `${props.$controlWidth}px`,
     height: `${props.$timeScaleHeight}px`
   }
 }))`
@@ -2745,7 +2938,7 @@ var PlaylistTimeScaleScroll = import_styled_components22.default.div.attrs((prop
   border-bottom: 1px solid ${(props) => props.theme.timeColor};
   box-sizing: border-box;
 `;
-var TimeTickChunk = import_styled_components22.default.canvas.attrs((props) => ({
+var TimeTickChunk = import_styled_components23.default.canvas.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
     height: `${props.$timeScaleHeight}px`,
@@ -2754,10 +2947,8 @@ var TimeTickChunk = import_styled_components22.default.canvas.attrs((props) => (
 }))`
   position: absolute;
   bottom: 0;
-  /* Promote to own compositing layer for smoother scrolling */
-  will-change: transform;
 `;
-var TimeStamp = import_styled_components22.default.div.attrs((props) => ({
+var TimeStamp = import_styled_components23.default.div.attrs((props) => ({
   style: {
     left: `${props.$left + 4}px`
     // Offset 4px to the right of the tick
@@ -2778,14 +2969,9 @@ var TimeScale = (props) => {
     renderTimestamp
   } = props;
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
-  const {
-    sampleRate,
-    samplesPerPixel,
-    timeScaleHeight,
-    controls: { show: showControls, width: controlWidth }
-  } = (0, import_react20.useContext)(PlaylistInfoContext);
+  const { sampleRate, samplesPerPixel, timeScaleHeight } = (0, import_react21.useContext)(PlaylistInfoContext);
   const devicePixelRatio = useDevicePixelRatio();
-  const { widthX, canvasInfo, timeMarkersWithPositions } = (0, import_react20.useMemo)(() => {
+  const { widthX, canvasInfo, timeMarkersWithPositions } = (0, import_react21.useMemo)(() => {
     const nextCanvasInfo = /* @__PURE__ */ new Map();
     const nextMarkers = [];
     const nextWidthX = secondsToPixels(duration / 1e3, samplesPerPixel, sampleRate);
@@ -2796,7 +2982,7 @@ var TimeScale = (props) => {
       if (counter % marker === 0) {
         const timeMs = counter;
         const timestamp = formatTime2(timeMs);
-        const element = renderTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react20.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TimeStamp, { $left: pix, children: timestamp }, timestamp);
+        const element = renderTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react21.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TimeStamp, { $left: pix, children: timestamp }, timestamp);
         nextMarkers.push({ pix, element });
         nextCanvasInfo.set(pix, timeScaleHeight);
       } else if (counter % bigStep === 0) {
@@ -2821,11 +3007,11 @@ var TimeScale = (props) => {
     renderTimestamp,
     timeScaleHeight
   ]);
-  const visibleChunkIndices = useVisibleChunkIndices(widthX, import_core3.MAX_CANVAS_WIDTH);
+  const visibleChunkIndices = useVisibleChunkIndices(widthX, import_core4.MAX_CANVAS_WIDTH);
   const visibleChunks = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * import_core3.MAX_CANVAS_WIDTH;
-    const chunkWidth = Math.min(widthX - chunkLeft, import_core3.MAX_CANVAS_WIDTH);
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    const chunkLeft = i * import_core4.MAX_CANVAS_WIDTH;
+    const chunkWidth = Math.min(widthX - chunkLeft, import_core4.MAX_CANVAS_WIDTH);
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       TimeTickChunk,
       {
         $cssWidth: chunkWidth,
@@ -2839,14 +3025,14 @@ var TimeScale = (props) => {
       `timescale-${i}`
     );
   });
-  const firstChunkLeft = visibleChunkIndices.length > 0 ? visibleChunkIndices[0] * import_core3.MAX_CANVAS_WIDTH : 0;
-  const lastChunkRight = visibleChunkIndices.length > 0 ? (visibleChunkIndices[visibleChunkIndices.length - 1] + 1) * import_core3.MAX_CANVAS_WIDTH : Infinity;
+  const firstChunkLeft = visibleChunkIndices.length > 0 ? visibleChunkIndices[0] * import_core4.MAX_CANVAS_WIDTH : 0;
+  const lastChunkRight = visibleChunkIndices.length > 0 ? (visibleChunkIndices[visibleChunkIndices.length - 1] + 1) * import_core4.MAX_CANVAS_WIDTH : Infinity;
   const visibleMarkers = visibleChunkIndices.length > 0 ? timeMarkersWithPositions.filter(({ pix }) => pix >= firstChunkLeft && pix < lastChunkRight).map(({ element }) => element) : timeMarkersWithPositions.map(({ element }) => element);
-  (0, import_react20.useLayoutEffect)(() => {
+  (0, import_react21.useLayoutEffect)(() => {
     for (const [chunkIdx, canvas] of canvasMapRef.current.entries()) {
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
-      const chunkLeft = chunkIdx * import_core3.MAX_CANVAS_WIDTH;
+      const chunkLeft = chunkIdx * import_core4.MAX_CANVAS_WIDTH;
       const chunkWidth = canvas.width / devicePixelRatio;
       ctx.resetTransform();
       ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -2869,23 +3055,15 @@ var TimeScale = (props) => {
     canvasInfo,
     visibleChunkIndices
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-    PlaylistTimeScaleScroll,
-    {
-      $cssWidth: widthX,
-      $controlWidth: showControls ? controlWidth : 0,
-      $timeScaleHeight: timeScaleHeight,
-      children: [
-        visibleMarkers,
-        visibleChunks
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(PlaylistTimeScaleScroll, { $cssWidth: widthX, $timeScaleHeight: timeScaleHeight, children: [
+    visibleMarkers,
+    visibleChunks
+  ] });
 };
-var StyledTimeScale = (0, import_styled_components22.withTheme)(TimeScale);
+var StyledTimeScale = (0, import_styled_components23.withTheme)(TimeScale);
 
 // src/components/SmartScale.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var timeinfo = /* @__PURE__ */ new Map([
   [
     700,
@@ -2959,9 +3137,9 @@ function getScaleInfo(samplesPerPixel) {
   return config;
 }
 var SmartScale = ({ renderTimestamp }) => {
-  const { samplesPerPixel, duration } = (0, import_react21.useContext)(PlaylistInfoContext);
+  const { samplesPerPixel, duration } = (0, import_react22.useContext)(PlaylistInfoContext);
   let config = getScaleInfo(samplesPerPixel);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     StyledTimeScale,
     {
       marker: config.marker,
@@ -2974,9 +3152,9 @@ var SmartScale = ({ renderTimestamp }) => {
 };
 
 // src/components/TimeFormatSelect.tsx
-var import_styled_components23 = __toESM(require("styled-components"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var SelectWrapper = import_styled_components23.default.div`
+var import_styled_components24 = __toESM(require("styled-components"));
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var SelectWrapper = import_styled_components24.default.div`
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
@@ -2998,7 +3176,7 @@ var TimeFormatSelect = ({
   const handleChange = (e) => {
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     BaseSelect,
     {
       className: "time-format",
@@ -3006,50 +3184,30 @@ var TimeFormatSelect = ({
       onChange: handleChange,
       disabled,
       "aria-label": "Time format selection",
-      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("option", { value: option.value, children: option.label }, option.value))
+      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("option", { value: option.value, children: option.label }, option.value))
     }
   ) });
 };
 
 // src/components/Track.tsx
-var import_styled_components24 = __toESM(require("styled-components"));
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Container = import_styled_components24.default.div.attrs((props) => ({
+var import_styled_components25 = __toESM(require("styled-components"));
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Container = import_styled_components25.default.div.attrs((props) => ({
   style: {
     height: `${props.$waveHeight * props.$numChannels + (props.$hasClipHeaders ? CLIP_HEADER_HEIGHT : 0)}px`
   }
 }))`
   position: relative;
-  display: flex;
   ${(props) => props.$width !== void 0 && `width: ${props.$width}px;`}
 `;
-var ChannelContainer = import_styled_components24.default.div.attrs((props) => ({
+var ChannelContainer = import_styled_components25.default.div.attrs((props) => ({
   style: {
     paddingLeft: `${props.$offset || 0}px`
   }
 }))`
   position: relative;
   background: ${(props) => props.$backgroundColor || "transparent"};
-  flex: 1;
-`;
-var ControlsWrapper = import_styled_components24.default.div.attrs((props) => ({
-  style: {
-    width: `${props.$controlWidth}px`
-  }
-}))`
-  position: sticky;
-  z-index: 102; /* Above waveform content and spectrogram labels (101), below Docusaurus navbar (200) */
-  left: 0;
   height: 100%;
-  flex-shrink: 0;
-  pointer-events: auto;
-  background: ${(props) => props.theme.surfaceColor};
-  transition: background 0.15s ease-in-out;
-
-  /* Selected track: highlighted background */
-  ${(props) => props.$isSelected && `
-    background: ${props.theme.selectedTrackControlsBackground};
-  `}
 `;
 var Track = ({
   numChannels,
@@ -3061,44 +3219,34 @@ var Track = ({
   hasClipHeaders = false,
   onClick,
   trackId,
-  isSelected = false
+  isSelected: _isSelected = false
 }) => {
-  const {
-    waveHeight,
-    controls: { show, width: controlWidth }
-  } = usePlaylistInfo();
-  const controls = useTrackControls();
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  const { waveHeight } = usePlaylistInfo();
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Container,
     {
       $numChannels: numChannels,
       className,
       $waveHeight: waveHeight,
-      $controlWidth: show ? controlWidth : 0,
       $width: width,
       $hasClipHeaders: hasClipHeaders,
-      $isSelected: isSelected,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ControlsWrapper, { $controlWidth: show ? controlWidth : 0, $isSelected: isSelected, children: controls }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-          ChannelContainer,
-          {
-            $controlWidth: show ? controlWidth : 0,
-            $backgroundColor: backgroundColor,
-            $offset: offset,
-            onClick,
-            "data-track-id": trackId,
-            children
-          }
-        )
-      ]
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        ChannelContainer,
+        {
+          $backgroundColor: backgroundColor,
+          $offset: offset,
+          onClick,
+          "data-track-id": trackId,
+          children
+        }
+      )
     }
   );
 };
 
 // src/components/TrackControls/Button.tsx
-var import_styled_components25 = __toESM(require("styled-components"));
-var Button = import_styled_components25.default.button.attrs({
+var import_styled_components26 = __toESM(require("styled-components"));
+var Button = import_styled_components26.default.button.attrs({
   type: "button"
 })`
   display: inline-block;
@@ -3173,8 +3321,8 @@ var Button = import_styled_components25.default.button.attrs({
 `;
 
 // src/components/TrackControls/ButtonGroup.tsx
-var import_styled_components26 = __toESM(require("styled-components"));
-var ButtonGroup = import_styled_components26.default.div`
+var import_styled_components27 = __toESM(require("styled-components"));
+var ButtonGroup = import_styled_components27.default.div`
   margin-bottom: 0.3rem;
 
   button:not(:first-child) {
@@ -3189,10 +3337,10 @@ var ButtonGroup = import_styled_components26.default.div`
 `;
 
 // src/components/TrackControls/CloseButton.tsx
-var import_styled_components27 = __toESM(require("styled-components"));
-var import_react22 = require("@phosphor-icons/react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var StyledCloseButton = import_styled_components27.default.button`
+var import_styled_components28 = __toESM(require("styled-components"));
+var import_react23 = require("@phosphor-icons/react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var StyledCloseButton = import_styled_components28.default.button`
   position: absolute;
   left: 0;
   top: 0;
@@ -3215,11 +3363,11 @@ var StyledCloseButton = import_styled_components27.default.button`
     color: #dc3545;
   }
 `;
-var CloseButton = ({ onClick, title = "Remove track" }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react22.X, { size: 12, weight: "bold" }) });
+var CloseButton = ({ onClick, title = "Remove track" }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react23.X, { size: 12, weight: "bold" }) });
 
 // src/components/TrackControls/Controls.tsx
-var import_styled_components28 = __toESM(require("styled-components"));
-var Controls = import_styled_components28.default.div`
+var import_styled_components29 = __toESM(require("styled-components"));
+var Controls = import_styled_components29.default.div`
   background: transparent;
   width: 100%;
   height: 100%;
@@ -3235,8 +3383,8 @@ var Controls = import_styled_components28.default.div`
 `;
 
 // src/components/TrackControls/Header.tsx
-var import_styled_components29 = __toESM(require("styled-components"));
-var Header = import_styled_components29.default.header`
+var import_styled_components30 = __toESM(require("styled-components"));
+var Header = import_styled_components30.default.header`
   overflow: hidden;
   height: 26px;
   width: 100%;
@@ -3250,28 +3398,28 @@ var Header = import_styled_components29.default.header`
 `;
 
 // src/components/TrackControls/VolumeDownIcon.tsx
-var import_react23 = require("@phosphor-icons/react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react23.SpeakerLowIcon, { weight: "light", ...props });
-
-// src/components/TrackControls/VolumeUpIcon.tsx
 var import_react24 = require("@phosphor-icons/react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react24.SpeakerHighIcon, { weight: "light", ...props });
+var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react24.SpeakerLowIcon, { weight: "light", ...props });
 
-// src/components/TrackControls/TrashIcon.tsx
+// src/components/TrackControls/VolumeUpIcon.tsx
 var import_react25 = require("@phosphor-icons/react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react25.TrashIcon, { weight: "light", ...props });
+var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react25.SpeakerHighIcon, { weight: "light", ...props });
 
-// src/components/TrackControls/DotsIcon.tsx
+// src/components/TrackControls/TrashIcon.tsx
 var import_react26 = require("@phosphor-icons/react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var DotsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react26.DotsThreeIcon, { weight: "bold", ...props });
+var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react26.TrashIcon, { weight: "light", ...props });
+
+// src/components/TrackControls/DotsIcon.tsx
+var import_react27 = require("@phosphor-icons/react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var DotsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react27.DotsThreeIcon, { weight: "bold", ...props });
 
 // src/components/TrackControls/Slider.tsx
-var import_styled_components30 = __toESM(require("styled-components"));
-var Slider = (0, import_styled_components30.default)(BaseSlider)`
+var import_styled_components31 = __toESM(require("styled-components"));
+var Slider = (0, import_styled_components31.default)(BaseSlider)`
   width: 75%;
   height: 5px;
   background: ${(props) => props.theme.sliderTrackColor};
@@ -3323,8 +3471,8 @@ var Slider = (0, import_styled_components30.default)(BaseSlider)`
 `;
 
 // src/components/TrackControls/SliderWrapper.tsx
-var import_styled_components31 = __toESM(require("styled-components"));
-var SliderWrapper = import_styled_components31.default.label`
+var import_styled_components32 = __toESM(require("styled-components"));
+var SliderWrapper = import_styled_components32.default.label`
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -3335,15 +3483,15 @@ var SliderWrapper = import_styled_components31.default.label`
 `;
 
 // src/components/TrackMenu.tsx
-var import_react27 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
-var import_styled_components32 = __toESM(require("styled-components"));
-var import_jsx_runtime33 = require("react/jsx-runtime");
-var MenuContainer = import_styled_components32.default.div`
+var import_styled_components33 = __toESM(require("styled-components"));
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var MenuContainer = import_styled_components33.default.div`
   position: relative;
   display: inline-block;
 `;
-var MenuButton = import_styled_components32.default.button`
+var MenuButton = import_styled_components33.default.button`
   background: none;
   border: none;
   cursor: pointer;
@@ -3358,7 +3506,8 @@ var MenuButton = import_styled_components32.default.button`
     opacity: 1;
   }
 `;
-var Dropdown = import_styled_components32.default.div`
+var DROPDOWN_MIN_WIDTH = 180;
+var Dropdown = import_styled_components33.default.div`
   position: fixed;
   top: ${(p) => p.$top}px;
   left: ${(p) => p.$left}px;
@@ -3368,31 +3517,53 @@ var Dropdown = import_styled_components32.default.div`
   border: 1px solid rgba(128, 128, 128, 0.4);
   border-radius: 6px;
   padding: 0.5rem 0;
-  min-width: 180px;
+  min-width: ${DROPDOWN_MIN_WIDTH}px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 `;
-var Divider = import_styled_components32.default.hr`
+var Divider = import_styled_components33.default.hr`
   border: none;
   border-top: 1px solid rgba(128, 128, 128, 0.3);
   margin: 0.35rem 0;
 `;
 var TrackMenu = ({ items: itemsProp }) => {
-  const [open, setOpen] = (0, import_react27.useState)(false);
-  const close = () => setOpen(false);
+  const [open, setOpen] = (0, import_react28.useState)(false);
+  const close = (0, import_react28.useCallback)(() => setOpen(false), []);
   const items = typeof itemsProp === "function" ? itemsProp(close) : itemsProp;
-  const [dropdownPos, setDropdownPos] = (0, import_react27.useState)({ top: 0, left: 0 });
-  const buttonRef = (0, import_react27.useRef)(null);
-  const dropdownRef = (0, import_react27.useRef)(null);
-  (0, import_react27.useEffect)(() => {
-    if (open && buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect();
-      setDropdownPos({
-        top: rect.bottom + 2,
-        left: Math.max(0, rect.right - 180)
-      });
+  const [dropdownPos, setDropdownPos] = (0, import_react28.useState)({ top: 0, left: 0 });
+  const buttonRef = (0, import_react28.useRef)(null);
+  const dropdownRef = (0, import_react28.useRef)(null);
+  const updatePosition = (0, import_react28.useCallback)(() => {
+    if (!buttonRef.current) return;
+    const rect = buttonRef.current.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const dropHeight = dropdownRef.current?.offsetHeight ?? 160;
+    let left = rect.right + 4;
+    if (left + DROPDOWN_MIN_WIDTH > vw) {
+      left = rect.left - DROPDOWN_MIN_WIDTH - 4;
     }
-  }, [open]);
-  (0, import_react27.useEffect)(() => {
+    left = Math.max(4, Math.min(left, vw - DROPDOWN_MIN_WIDTH - 4));
+    let top = rect.top;
+    if (top + dropHeight > vh - 4) {
+      top = Math.max(4, rect.bottom - dropHeight);
+    }
+    setDropdownPos({ top, left });
+  }, []);
+  (0, import_react28.useEffect)(() => {
+    if (!open) return;
+    updatePosition();
+    const rafId = requestAnimationFrame(() => updatePosition());
+    const onScroll = () => updatePosition();
+    const onResize = () => updatePosition();
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [open, updatePosition]);
+  (0, import_react28.useEffect)(() => {
     if (!open) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -3400,11 +3571,20 @@ var TrackMenu = ({ items: itemsProp }) => {
         setOpen(false);
       }
     };
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+    };
     document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(MenuContainer, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(MenuContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       MenuButton,
       {
         ref: buttonRef,
@@ -3415,19 +3595,19 @@ var TrackMenu = ({ items: itemsProp }) => {
         onMouseDown: (e) => e.stopPropagation(),
         title: "Track menu",
         "aria-label": "Track menu",
-        children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DotsIcon, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DotsIcon, { size: 16 })
       }
     ),
     open && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         Dropdown,
         {
           ref: dropdownRef,
           $top: dropdownPos.top,
           $left: dropdownPos.left,
           onMouseDown: (e) => e.stopPropagation(),
-          children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react27.default.Fragment, { children: [
-            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Divider, {}),
+          children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react28.default.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Divider, {}),
             item.content
           ] }, item.id))
         }
@@ -3470,6 +3650,7 @@ var TrackMenu = ({ items: itemsProp }) => {
   LoopRegion,
   LoopRegionMarkers,
   MasterVolumeControl,
+  PianoRollChannel,
   Playhead,
   PlayheadWithMarker,
   Playlist,