@waveform-playlist/ui-components 9.0.3 → 9.1.0

package/dist/index.mjs

@@ -334,7 +334,7 @@ var AutomaticScrollCheckbox = ({
 };
 
 // src/components/Channel.tsx
-import { useLayoutEffect } from "react";
+import { useEffect as useEffect3 } from "react";
 import styled9 from "styled-components";
 
 // src/wfpl-theme.ts
@@ -410,6 +410,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',
@@ -487,6 +491,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',
@@ -499,6 +507,7 @@ import {
   createContext,
   useContext,
   useEffect,
+  useLayoutEffect,
   useCallback,
   useMemo,
   useRef,
@@ -506,19 +515,32 @@ import {
 } from "react";
 import { jsx as jsx3 } from "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;
@@ -528,8 +550,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;
     }
   }
 };
@@ -540,7 +573,7 @@ var NULL_SNAPSHOT = () => null;
 var ScrollViewportProvider = ({ containerRef, children }) => {
   const storeRef = useRef(null);
   if (storeRef.current === null) {
-    storeRef.current = new ViewportStore();
+    storeRef.current = new ViewportStore(containerRef.current);
   }
   const store = storeRef.current;
   const rafIdRef = useRef(null);
@@ -556,10 +589,12 @@ var ScrollViewportProvider = ({ containerRef, children }) => {
       measure();
     });
   }, [measure]);
+  useLayoutEffect(() => {
+    measure();
+  }, [measure]);
   useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
-    measure();
     el.addEventListener("scroll", scheduleUpdate, { passive: true });
     const resizeObserver = new ResizeObserver(() => {
       scheduleUpdate();
@@ -572,8 +607,9 @@ var ScrollViewportProvider = ({ containerRef, children }) => {
         cancelAnimationFrame(rafIdRef.current);
         rafIdRef.current = null;
       }
+      store.cancelPendingNotification();
     };
-  }, [containerRef, measure, scheduleUpdate]);
+  }, [containerRef, scheduleUpdate, store]);
   return /* @__PURE__ */ jsx3(ViewportStoreContext.Provider, { value: store, children });
 };
 var useScrollViewport = () => {
@@ -708,8 +744,6 @@ var Waveform = styled9.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;
@@ -746,7 +780,8 @@ var Channel = (props) => {
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
   const clipOriginX = useClipViewportOrigin();
   const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH, clipOriginX);
-  useLayoutEffect(() => {
+  useEffect3(() => {
+    const tDraw = performance.now();
     const step = barWidth + barGap;
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
       const globalPixelOffset = canvasIdx * MAX_CANVAS_WIDTH;
@@ -782,6 +817,9 @@ var Channel = (props) => {
         }
       }
     }
+    console.log(
+      `[waveform] draw ch${index}: ${canvasMapRef.current.size} chunks, ${(performance.now() - tDraw).toFixed(1)}ms`
+    );
   }, [
     canvasMapRef,
     data,
@@ -794,7 +832,8 @@ var Channel = (props) => {
     barWidth,
     barGap,
     drawMode,
-    visibleChunkIndices
+    visibleChunkIndices,
+    index
   ]);
   const waveforms = visibleChunkIndices.map((i) => {
     const chunkLeft = i * MAX_CANVAS_WIDTH;
@@ -912,7 +951,7 @@ var ClipHeaderPresentational = ({
   trackName,
   isSelected = false
 }) => {
-  return /* @__PURE__ */ jsx7(HeaderContainer, { $interactive: false, $isSelected: isSelected, children: /* @__PURE__ */ jsx7(TrackName, { children: trackName }) });
+  return /* @__PURE__ */ jsx7(HeaderContainer, { $interactive: false, $isSelected: isSelected, children: /* @__PURE__ */ jsx7(TrackName, { title: trackName, children: trackName }) });
 };
 var ClipHeader = ({
   clipId,
@@ -934,7 +973,7 @@ var ClipHeader = ({
       "data-clip-id": clipId,
       $interactive: true,
       $isSelected: isSelected,
-      children: /* @__PURE__ */ jsx7(TrackName, { children: trackName })
+      children: /* @__PURE__ */ jsx7(TrackName, { title: trackName, children: trackName })
     }
   );
 };
@@ -1155,6 +1194,7 @@ var Clip = ({
       "data-clip-container": "true",
       "data-track-id": trackId,
       onMouseDown,
+      tabIndex: -1,
       children: [
         showHeader && /* @__PURE__ */ jsx10(
           ClipHeader,
@@ -1264,11 +1304,140 @@ var MasterVolumeControl = ({
   ] });
 };
 
-// src/components/Playhead.tsx
-import { useRef as useRef3, useEffect as useEffect3 } from "react";
+// src/components/PianoRollChannel.tsx
+import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
 import styled15 from "styled-components";
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
-var PlayheadLine = styled15.div.attrs((props) => ({
+import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH2 } from "@waveform-playlist/core";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var NoteCanvas = styled15.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 = styled15.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, MAX_CANVAS_WIDTH2, clipOriginX);
+  const { minMidi, maxMidi } = useMemo2(() => {
+    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;
+  useEffect4(() => {
+    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 * MAX_CANVAS_WIDTH2;
+      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 * MAX_CANVAS_WIDTH2;
+    const currentWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH2);
+    return /* @__PURE__ */ jsx12(
+      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__ */ jsx12(Wrapper2, { $index: index, $cssWidth: length, $waveHeight: waveHeight, $backgroundColor: bgColor, children: canvases });
+};
+
+// src/components/Playhead.tsx
+import { useRef as useRef3, useEffect as useEffect5 } from "react";
+import styled16 from "styled-components";
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+var PlayheadLine = styled16.div.attrs((props) => ({
   style: {
     transform: `translate3d(${props.$position}px, 0, 0)`
   }
@@ -1284,9 +1453,9 @@ var PlayheadLine = styled15.div.attrs((props) => ({
   will-change: transform;
 `;
 var Playhead = ({ position, color = "#ff0000" }) => {
-  return /* @__PURE__ */ jsx12(PlayheadLine, { $position: position, $color: color });
+  return /* @__PURE__ */ jsx13(PlayheadLine, { $position: position, $color: color });
 };
-var PlayheadWithMarkerContainer = styled15.div`
+var PlayheadWithMarkerContainer = styled16.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1295,7 +1464,7 @@ var PlayheadWithMarkerContainer = styled15.div`
   pointer-events: none;
   will-change: transform;
 `;
-var MarkerTriangle = styled15.div`
+var MarkerTriangle = styled16.div`
   position: absolute;
   top: -10px;
   left: -6px;
@@ -1305,7 +1474,7 @@ var MarkerTriangle = styled15.div`
   border-right: 7px solid transparent;
   border-top: 10px solid ${(props) => props.$color};
 `;
-var MarkerLine = styled15.div`
+var MarkerLine = styled16.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1321,13 +1490,13 @@ var PlayheadWithMarker = ({
   audioStartPositionRef,
   samplesPerPixel,
   sampleRate,
-  controlsOffset,
+  controlsOffset = 0,
   getAudioContextTime,
   getPlaybackTime
 }) => {
   const containerRef = useRef3(null);
   const animationFrameRef = useRef3(null);
-  useEffect3(() => {
+  useEffect5(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         let time;
@@ -1372,7 +1541,7 @@ var PlayheadWithMarker = ({
     getAudioContextTime,
     getPlaybackTime
   ]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (!isPlaying && containerRef.current) {
       const time = currentTimeRef.current ?? 0;
       const pos = time * sampleRate / samplesPerPixel + controlsOffset;
@@ -1380,27 +1549,43 @@ var PlayheadWithMarker = ({
     }
   });
   return /* @__PURE__ */ jsxs4(PlayheadWithMarkerContainer, { ref: containerRef, $color: color, children: [
-    /* @__PURE__ */ jsx12(MarkerTriangle, { $color: color }),
-    /* @__PURE__ */ jsx12(MarkerLine, { $color: color })
+    /* @__PURE__ */ jsx13(MarkerTriangle, { $color: color }),
+    /* @__PURE__ */ jsx13(MarkerLine, { $color: color })
   ] });
 };
 
 // src/components/Playlist.tsx
-import styled16, { withTheme } from "styled-components";
+import styled17, { withTheme } from "styled-components";
 import { useRef as useRef4, useCallback as useCallback3 } from "react";
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
-var Wrapper2 = styled16.div`
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+var Wrapper3 = styled17.div`
+  display: flex;
   overflow-y: hidden;
+  position: relative;
+`;
+var ControlsColumn = styled17.div.attrs((props) => ({
+  style: { width: `${props.$width}px` }
+}))`
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+var TimescaleGap = styled17.div.attrs((props) => ({
+  style: { height: `${props.$height}px` }
+}))``;
+var ScrollArea = styled17.div`
   overflow-x: auto;
+  overflow-y: hidden;
+  overflow-anchor: none;
+  flex: 1;
   position: relative;
 `;
-var ScrollContainer = styled16.div.attrs((props) => ({
+var ScrollContainerInner = styled17.div.attrs((props) => ({
   style: props.$width !== void 0 ? { width: `${props.$width}px` } : {}
 }))`
   position: relative;
   background: ${(props) => props.$backgroundColor || "transparent"};
 `;
-var TimescaleWrapper = styled16.div.attrs((props) => ({
+var TimescaleWrapper = styled17.div.attrs((props) => ({
   style: props.$width ? { minWidth: `${props.$width}px` } : {}
 }))`
   background: ${(props) => props.$backgroundColor || "white"};
@@ -1408,14 +1593,14 @@ var TimescaleWrapper = styled16.div.attrs((props) => ({
   position: relative;
   overflow: hidden; /* Constrain loop region to timescale area */
 `;
-var TracksContainer = styled16.div.attrs((props) => ({
+var TracksContainer = styled17.div.attrs((props) => ({
   style: props.$width !== void 0 ? { minWidth: `${props.$width}px` } : {}
 }))`
   position: relative;
   background: ${(props) => props.$backgroundColor || "transparent"};
   width: 100%;
 `;
-var ClickOverlay = styled16.div`
+var ClickOverlay = styled17.div`
   position: absolute;
   top: 0;
   left: 0;
@@ -1432,7 +1617,6 @@ var Playlist = ({
   timescale,
   timescaleWidth,
   tracksWidth,
-  scrollContainerWidth,
   controlsWidth,
   onTracksClick,
   onTracksMouseDown,
@@ -1440,40 +1624,48 @@ var Playlist = ({
   onTracksMouseUp,
   scrollContainerRef,
   isSelecting,
-  "data-playlist-state": playlistState
+  "data-playlist-state": playlistState,
+  trackControlsSlots,
+  timescaleGapHeight = 0
 }) => {
-  const wrapperRef = useRef4(null);
+  const scrollAreaRef = useRef4(null);
   const handleRef = useCallback3(
     (el) => {
-      wrapperRef.current = el;
+      scrollAreaRef.current = el;
       scrollContainerRef?.(el);
     },
     [scrollContainerRef]
   );
-  return /* @__PURE__ */ jsx13(Wrapper2, { "data-scroll-container": "true", "data-playlist-state": playlistState, ref: handleRef, children: /* @__PURE__ */ jsx13(ScrollViewportProvider, { containerRef: wrapperRef, children: /* @__PURE__ */ jsxs5(ScrollContainer, { $backgroundColor: backgroundColor, $width: scrollContainerWidth, children: [
-    timescale && /* @__PURE__ */ jsx13(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
-    /* @__PURE__ */ jsxs5(TracksContainer, { $width: tracksWidth, $backgroundColor: backgroundColor, children: [
-      children,
-      (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ jsx13(
-        ClickOverlay,
-        {
-          $controlsWidth: controlsWidth,
-          $isSelecting: isSelecting,
-          onClick: onTracksClick,
-          onMouseDown: onTracksMouseDown,
-          onMouseMove: onTracksMouseMove,
-          onMouseUp: onTracksMouseUp
-        }
-      )
-    ] })
-  ] }) }) });
+  const showControls = controlsWidth !== void 0 && controlsWidth > 0;
+  return /* @__PURE__ */ jsxs5(Wrapper3, { "data-playlist-state": playlistState, children: [
+    showControls && /* @__PURE__ */ jsxs5(ControlsColumn, { $width: controlsWidth, children: [
+      timescaleGapHeight > 0 && /* @__PURE__ */ jsx14(TimescaleGap, { $height: timescaleGapHeight }),
+      trackControlsSlots
+    ] }),
+    /* @__PURE__ */ jsx14(ScrollArea, { "data-scroll-container": "true", ref: handleRef, children: /* @__PURE__ */ jsx14(ScrollViewportProvider, { containerRef: scrollAreaRef, children: /* @__PURE__ */ jsxs5(ScrollContainerInner, { $backgroundColor: backgroundColor, $width: tracksWidth, children: [
+      timescale && /* @__PURE__ */ jsx14(TimescaleWrapper, { $width: timescaleWidth, $backgroundColor: timescaleBackgroundColor, children: timescale }),
+      /* @__PURE__ */ jsxs5(TracksContainer, { $width: tracksWidth, $backgroundColor: backgroundColor, children: [
+        children,
+        (onTracksClick || onTracksMouseDown) && /* @__PURE__ */ jsx14(
+          ClickOverlay,
+          {
+            $isSelecting: isSelecting,
+            onClick: onTracksClick,
+            onMouseDown: onTracksMouseDown,
+            onMouseMove: onTracksMouseMove,
+            onMouseUp: onTracksMouseUp
+          }
+        )
+      ] })
+    ] }) }) })
+  ] });
 };
 var StyledPlaylist = withTheme(Playlist);
 
 // src/components/Selection.tsx
-import styled17 from "styled-components";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var SelectionOverlay = styled17.div.attrs((props) => ({
+import styled18 from "styled-components";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var SelectionOverlay = styled18.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
     width: `${props.$width}px`
@@ -1496,14 +1688,14 @@ var Selection = ({
   if (width <= 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx14(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
+  return /* @__PURE__ */ jsx15(SelectionOverlay, { $left: startPosition, $width: width, $color: color, "data-selection": true });
 };
 
 // src/components/LoopRegion.tsx
 import { useCallback as useCallback4, useRef as useRef5, useState } from "react";
-import styled18 from "styled-components";
-import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
-var LoopRegionOverlayDiv = styled18.div.attrs((props) => ({
+import styled19 from "styled-components";
+import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+var LoopRegionOverlayDiv = styled19.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
     width: `${props.$width}px`
@@ -1516,7 +1708,7 @@ var LoopRegionOverlayDiv = styled18.div.attrs((props) => ({
   z-index: 55; /* Between clips (z-index: 50) and selection (z-index: 60) */
   pointer-events: none;
 `;
-var LoopMarker = styled18.div.attrs((props) => ({
+var LoopMarker = styled19.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`
   }
@@ -1552,7 +1744,7 @@ var LoopRegion = ({
     return null;
   }
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       LoopRegionOverlayDiv,
       {
         $left: startPosition,
@@ -1561,7 +1753,7 @@ var LoopRegion = ({
         "data-loop-region": true
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       LoopMarker,
       {
         $left: startPosition,
@@ -1570,7 +1762,7 @@ var LoopRegion = ({
         "data-loop-marker": "start"
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       LoopMarker,
       {
         $left: endPosition - 2,
@@ -1581,7 +1773,7 @@ var LoopRegion = ({
     )
   ] });
 };
-var DraggableMarkerHandle = styled18.div.attrs((props) => ({
+var DraggableMarkerHandle = styled19.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`
   }
@@ -1623,7 +1815,7 @@ var DraggableMarkerHandle = styled18.div.attrs((props) => ({
     opacity: 1;
   }
 `;
-var TimescaleLoopShade = styled18.div.attrs((props) => ({
+var TimescaleLoopShade = styled19.div.attrs((props) => ({
   style: {
     left: `${props.$left}px`,
     width: `${props.$width}px`
@@ -1721,7 +1913,7 @@ var LoopRegionMarkers = ({
     return null;
   }
   return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       TimescaleLoopShade,
       {
         $left: startPosition,
@@ -1732,7 +1924,7 @@ var LoopRegionMarkers = ({
         "data-loop-region-timescale": true
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       DraggableMarkerHandle,
       {
         $left: startPosition,
@@ -1743,7 +1935,7 @@ var LoopRegionMarkers = ({
         "data-loop-marker-handle": "start"
       }
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       DraggableMarkerHandle,
       {
         $left: endPosition,
@@ -1756,13 +1948,10 @@ var LoopRegionMarkers = ({
     )
   ] });
 };
-var TimescaleLoopCreator = styled18.div.attrs((props) => ({
-  style: {
-    left: `${props.$leftOffset || 0}px`
-  }
-}))`
+var TimescaleLoopCreator = styled19.div`
   position: absolute;
   top: 0;
+  left: 0;
   right: 0;
   height: 100%; /* Stay within timescale bounds, don't extend into tracks */
   cursor: crosshair;
@@ -1775,8 +1964,7 @@ var TimescaleLoopRegion = ({
   regionColor = "rgba(59, 130, 246, 0.3)",
   onLoopRegionChange,
   minPosition = 0,
-  maxPosition = Infinity,
-  controlsOffset = 0
+  maxPosition = Infinity
 }) => {
   const [, setIsCreating] = useState(false);
   const createStartX = useRef5(0);
@@ -1813,14 +2001,13 @@ var TimescaleLoopRegion = ({
     },
     [minPosition, maxPosition, onLoopRegionChange]
   );
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     TimescaleLoopCreator,
     {
       ref: containerRef,
-      $leftOffset: controlsOffset,
       onMouseDown: handleBackgroundMouseDown,
       "data-timescale-loop-creator": true,
-      children: hasLoopRegion && /* @__PURE__ */ jsx15(
+      children: hasLoopRegion && /* @__PURE__ */ jsx16(
         LoopRegionMarkers,
         {
           startPosition,
@@ -1839,10 +2026,10 @@ var TimescaleLoopRegion = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-import { useEffect as useEffect5, useState as useState3 } from "react";
+import { useEffect as useEffect7, useState as useState3 } from "react";
 
 // src/components/TimeInput.tsx
-import { useEffect as useEffect4, useState as useState2 } from "react";
+import { useEffect as useEffect6, useState as useState2 } from "react";
 
 // src/utils/timeFormat.ts
 function clockFormat(seconds, decimals) {
@@ -1892,7 +2079,7 @@ function parseTime(timeStr, format) {
 }
 
 // src/components/TimeInput.tsx
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
 var TimeInput = ({
   id,
   label,
@@ -1903,7 +2090,7 @@ var TimeInput = ({
   readOnly = false
 }) => {
   const [displayValue, setDisplayValue] = useState2("");
-  useEffect4(() => {
+  useEffect6(() => {
     const formatted = formatTime(value, format);
     setDisplayValue(formatted);
   }, [value, format, id]);
@@ -1924,8 +2111,8 @@ var TimeInput = ({
     }
   };
   return /* @__PURE__ */ jsxs7(Fragment3, { children: [
-    /* @__PURE__ */ jsx16(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(ScreenReaderOnly, { as: "label", htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx17(
       BaseInput,
       {
         type: "text",
@@ -1942,7 +2129,7 @@ var TimeInput = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var SelectionTimeInputs = ({
   selectionStart,
   selectionEnd,
@@ -1950,7 +2137,7 @@ var SelectionTimeInputs = ({
   className
 }) => {
   const [timeFormat, setTimeFormat] = useState3("hh:mm:ss.uuu");
-  useEffect5(() => {
+  useEffect7(() => {
     const timeFormatSelect = document.querySelector(".time-format");
     const handleFormatChange = () => {
       if (timeFormatSelect) {
@@ -1976,7 +2163,7 @@ var SelectionTimeInputs = ({
     }
   };
   return /* @__PURE__ */ jsxs8("div", { className, children: [
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       TimeInput,
       {
         id: "audio_start",
@@ -1987,7 +2174,7 @@ var SelectionTimeInputs = ({
         onChange: handleStartChange
       }
     ),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(
       TimeInput,
       {
         id: "audio_end",
@@ -2003,7 +2190,7 @@ var SelectionTimeInputs = ({
 
 // src/contexts/DevicePixelRatio.tsx
 import { useState as useState4, createContext as createContext3, useContext as useContext3 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function getScale() {
   return window.devicePixelRatio;
 }
@@ -2017,7 +2204,7 @@ var DevicePixelRatioProvider = ({ children }) => {
     },
     { once: true }
   );
-  return /* @__PURE__ */ jsx18(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
+  return /* @__PURE__ */ jsx19(DevicePixelRatioContext.Provider, { value: Math.ceil(scale), children });
 };
 var useDevicePixelRatio = () => useContext3(DevicePixelRatioContext);
 
@@ -2046,8 +2233,8 @@ var useTheme2 = () => useContext5(ThemeContext);
 
 // src/contexts/TrackControls.tsx
 import { createContext as createContext5, useContext as useContext6, Fragment as Fragment4 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var TrackControlsContext = createContext5(/* @__PURE__ */ jsx19(Fragment4, {}));
+import { jsx as jsx20 } from "react/jsx-runtime";
+var TrackControlsContext = createContext5(/* @__PURE__ */ jsx20(Fragment4, {}));
 var useTrackControls = () => useContext6(TrackControlsContext);
 
 // src/contexts/Playout.tsx
@@ -2056,7 +2243,7 @@ import {
   createContext as createContext6,
   useContext as useContext7
 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var defaultProgress = 0;
 var defaultIsPlaying = false;
 var defaultSelectionStart = 0;
@@ -2085,18 +2272,18 @@ var PlayoutProvider = ({ children }) => {
     setSelectionStart(start);
     setSelectionEnd(end);
   };
-  return /* @__PURE__ */ jsx20(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ jsx20(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
+  return /* @__PURE__ */ jsx21(PlayoutStatusUpdateContext.Provider, { value: { setIsPlaying, setProgress, setSelection }, children: /* @__PURE__ */ jsx21(PlayoutStatusContext.Provider, { value: { isPlaying, progress, selectionStart, selectionEnd }, children }) });
 };
 var usePlayoutStatus = () => useContext7(PlayoutStatusContext);
 var usePlayoutStatusUpdate = () => useContext7(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
-import { useLayoutEffect as useLayoutEffect2, useRef as useRef6, useEffect as useEffect6 } from "react";
-import styled19 from "styled-components";
-import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH2 } from "@waveform-playlist/core";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { useRef as useRef6, useEffect as useEffect8 } from "react";
+import styled20 from "styled-components";
+import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH3 } from "@waveform-playlist/core";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var LINEAR_FREQUENCY_SCALE = (f, minF, maxF) => (f - minF) / (maxF - minF);
-var Wrapper3 = styled19.div.attrs((props) => ({
+var Wrapper4 = styled20.div.attrs((props) => ({
   style: {
     top: `${props.$waveHeight * props.$index}px`,
     width: `${props.$cssWidth}px`,
@@ -2108,7 +2295,7 @@ var Wrapper3 = styled19.div.attrs((props) => ({
   transform: translateZ(0);
   backface-visibility: hidden;
 `;
-var SpectrogramCanvas = styled19.canvas.attrs((props) => ({
+var SpectrogramCanvas = styled20.canvas.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
     height: `${props.$waveHeight}px`,
@@ -2117,8 +2304,6 @@ var SpectrogramCanvas = styled19.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;
 `;
@@ -2154,18 +2339,18 @@ var SpectrogramChannel = ({
   const onCanvasesReadyRef = useRef6(onCanvasesReady);
   const isWorkerMode = !!(workerApi && clipId);
   const clipOriginX = useClipViewportOrigin();
-  const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH2, clipOriginX);
+  const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH3, 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);
-  useEffect6(() => {
+  useEffect8(() => {
     workerApiRef.current = workerApi;
   }, [workerApi]);
-  useEffect6(() => {
+  useEffect8(() => {
     onCanvasesReadyRef.current = onCanvasesReady;
   }, [onCanvasesReady]);
-  useEffect6(() => {
+  useEffect8(() => {
     if (!isWorkerMode) return;
     const currentWorkerApi = workerApiRef.current;
     if (!currentWorkerApi || !clipId) return;
@@ -2220,15 +2405,15 @@ var SpectrogramChannel = ({
         const match = id.match(/chunk(\d+)$/);
         if (!match) {
           console.warn(`[spectrogram] Unexpected canvas ID format: ${id}`);
-          return MAX_CANVAS_WIDTH2;
+          return MAX_CANVAS_WIDTH3;
         }
         const chunkIdx = parseInt(match[1], 10);
-        return Math.min(length - chunkIdx * MAX_CANVAS_WIDTH2, MAX_CANVAS_WIDTH2);
+        return Math.min(length - chunkIdx * MAX_CANVAS_WIDTH3, MAX_CANVAS_WIDTH3);
       });
       onCanvasesReadyRef.current?.(allIds, allWidths);
     }
   }, [canvasMapRef, isWorkerMode, clipId, channelIndex, length, visibleChunkIndices]);
-  useEffect6(() => {
+  useEffect8(() => {
     return () => {
       const api = workerApiRef.current;
       if (!api) return;
@@ -2242,7 +2427,7 @@ var SpectrogramChannel = ({
       registeredIdsRef.current = [];
     };
   }, []);
-  useLayoutEffect2(() => {
+  useEffect8(() => {
     if (isWorkerMode || !data) return;
     const {
       frequencyBinCount,
@@ -2255,7 +2440,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 * MAX_CANVAS_WIDTH2;
+      const globalPixelOffset = canvasIdx * MAX_CANVAS_WIDTH3;
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
       const canvasWidth = canvas.width / devicePixelRatio;
@@ -2331,9 +2516,9 @@ var SpectrogramChannel = ({
     visibleChunkIndices
   ]);
   const canvases = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * MAX_CANVAS_WIDTH2;
-    const currentWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH2);
-    return /* @__PURE__ */ jsx21(
+    const chunkLeft = i * MAX_CANVAS_WIDTH3;
+    const currentWidth = Math.min(length - chunkLeft, MAX_CANVAS_WIDTH3);
+    return /* @__PURE__ */ jsx22(
       SpectrogramCanvas,
       {
         $cssWidth: currentWidth,
@@ -2347,11 +2532,11 @@ var SpectrogramChannel = ({
       `${length}-${i}`
     );
   });
-  return /* @__PURE__ */ jsx21(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
+  return /* @__PURE__ */ jsx22(Wrapper4, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
 };
 
 // src/components/SmartChannel.tsx
-import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
 var SmartChannel = ({
   isSelected,
   transparentBackground,
@@ -2365,10 +2550,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;
@@ -2376,7 +2570,7 @@ var SmartChannel = ({
   const drawMode = theme?.waveformDrawMode || "inverted";
   const hasSpectrogram = spectrogramData || spectrogramWorkerApi;
   if (renderMode === "spectrogram" && hasSpectrogram) {
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       SpectrogramChannel,
       {
         index: props.index,
@@ -2398,7 +2592,7 @@ var SmartChannel = ({
   if (renderMode === "both" && hasSpectrogram) {
     const halfHeight = Math.floor(waveHeight / 2);
     return /* @__PURE__ */ jsxs9(Fragment5, { children: [
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx23(
         SpectrogramChannel,
         {
           index: props.index * 2,
@@ -2417,7 +2611,7 @@ var SmartChannel = ({
           onCanvasesReady: spectrogramOnCanvasesReady
         }
       ),
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx23(
         "div",
         {
           style: {
@@ -2426,7 +2620,7 @@ var SmartChannel = ({
             width: props.length,
             height: halfHeight
           },
-          children: /* @__PURE__ */ jsx22(
+          children: /* @__PURE__ */ jsx23(
             Channel,
             {
               ...props,
@@ -2445,7 +2639,27 @@ var SmartChannel = ({
       )
     ] });
   }
-  return /* @__PURE__ */ jsx22(
+  if (renderMode === "piano-roll") {
+    return /* @__PURE__ */ jsx23(
+      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__ */ jsx23(
     Channel,
     {
       ...props,
@@ -2462,11 +2676,11 @@ var SmartChannel = ({
 };
 
 // src/components/SpectrogramLabels.tsx
-import { useRef as useRef7, useLayoutEffect as useLayoutEffect3 } from "react";
-import styled20 from "styled-components";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { useRef as useRef7, useLayoutEffect as useLayoutEffect2 } from "react";
+import styled21 from "styled-components";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var LABELS_WIDTH = 72;
-var LabelsStickyWrapper = styled20.div`
+var LabelsStickyWrapper = styled21.div`
   position: sticky;
   left: 0;
   z-index: 101;
@@ -2519,7 +2733,7 @@ var SpectrogramLabels = ({
   const spectrogramHeight = renderMode === "both" ? Math.floor(waveHeight / 2) : waveHeight;
   const totalHeight = numChannels * waveHeight;
   const clipHeaderOffset = hasClipHeaders ? 22 : 0;
-  useLayoutEffect3(() => {
+  useLayoutEffect2(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -2557,7 +2771,7 @@ var SpectrogramLabels = ({
     spectrogramHeight,
     clipHeaderOffset
   ]);
-  return /* @__PURE__ */ jsx23(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ jsx24(
     "canvas",
     {
       ref: canvasRef,
@@ -2576,8 +2790,8 @@ var SpectrogramLabels = ({
 import { useContext as useContext9 } from "react";
 
 // src/components/TimeScale.tsx
-import React16, { useLayoutEffect as useLayoutEffect4, useContext as useContext8, useMemo as useMemo2 } from "react";
-import styled21, { withTheme as withTheme2 } from "styled-components";
+import React17, { useLayoutEffect as useLayoutEffect3, useContext as useContext8, useMemo as useMemo3 } from "react";
+import styled22, { withTheme as withTheme2 } from "styled-components";
 
 // src/utils/conversions.ts
 function samplesToSeconds(samples, sampleRate) {
@@ -2600,18 +2814,17 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 }
 
 // src/components/TimeScale.tsx
-import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH3 } from "@waveform-playlist/core";
-import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
+import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH4 } from "@waveform-playlist/core";
+import { jsx as jsx25, jsxs as jsxs10 } from "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 = styled21.div.attrs((props) => ({
+var PlaylistTimeScaleScroll = styled22.div.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
-    marginLeft: `${props.$controlWidth}px`,
     height: `${props.$timeScaleHeight}px`
   }
 }))`
@@ -2620,7 +2833,7 @@ var PlaylistTimeScaleScroll = styled21.div.attrs((props) => ({
   border-bottom: 1px solid ${(props) => props.theme.timeColor};
   box-sizing: border-box;
 `;
-var TimeTickChunk = styled21.canvas.attrs((props) => ({
+var TimeTickChunk = styled22.canvas.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
     height: `${props.$timeScaleHeight}px`,
@@ -2629,10 +2842,8 @@ var TimeTickChunk = styled21.canvas.attrs((props) => ({
 }))`
   position: absolute;
   bottom: 0;
-  /* Promote to own compositing layer for smoother scrolling */
-  will-change: transform;
 `;
-var TimeStamp = styled21.div.attrs((props) => ({
+var TimeStamp = styled22.div.attrs((props) => ({
   style: {
     left: `${props.$left + 4}px`
     // Offset 4px to the right of the tick
@@ -2653,14 +2864,9 @@ var TimeScale = (props) => {
     renderTimestamp
   } = props;
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
-  const {
-    sampleRate,
-    samplesPerPixel,
-    timeScaleHeight,
-    controls: { show: showControls, width: controlWidth }
-  } = useContext8(PlaylistInfoContext);
+  const { sampleRate, samplesPerPixel, timeScaleHeight } = useContext8(PlaylistInfoContext);
   const devicePixelRatio = useDevicePixelRatio();
-  const { widthX, canvasInfo, timeMarkersWithPositions } = useMemo2(() => {
+  const { widthX, canvasInfo, timeMarkersWithPositions } = useMemo3(() => {
     const nextCanvasInfo = /* @__PURE__ */ new Map();
     const nextMarkers = [];
     const nextWidthX = secondsToPixels(duration / 1e3, samplesPerPixel, sampleRate);
@@ -2671,7 +2877,7 @@ var TimeScale = (props) => {
       if (counter % marker === 0) {
         const timeMs = counter;
         const timestamp = formatTime2(timeMs);
-        const element = renderTimestamp ? /* @__PURE__ */ jsx24(React16.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ jsx24(TimeStamp, { $left: pix, children: timestamp }, timestamp);
+        const element = renderTimestamp ? /* @__PURE__ */ jsx25(React17.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ jsx25(TimeStamp, { $left: pix, children: timestamp }, timestamp);
         nextMarkers.push({ pix, element });
         nextCanvasInfo.set(pix, timeScaleHeight);
       } else if (counter % bigStep === 0) {
@@ -2696,11 +2902,11 @@ var TimeScale = (props) => {
     renderTimestamp,
     timeScaleHeight
   ]);
-  const visibleChunkIndices = useVisibleChunkIndices(widthX, MAX_CANVAS_WIDTH3);
+  const visibleChunkIndices = useVisibleChunkIndices(widthX, MAX_CANVAS_WIDTH4);
   const visibleChunks = visibleChunkIndices.map((i) => {
-    const chunkLeft = i * MAX_CANVAS_WIDTH3;
-    const chunkWidth = Math.min(widthX - chunkLeft, MAX_CANVAS_WIDTH3);
-    return /* @__PURE__ */ jsx24(
+    const chunkLeft = i * MAX_CANVAS_WIDTH4;
+    const chunkWidth = Math.min(widthX - chunkLeft, MAX_CANVAS_WIDTH4);
+    return /* @__PURE__ */ jsx25(
       TimeTickChunk,
       {
         $cssWidth: chunkWidth,
@@ -2714,14 +2920,14 @@ var TimeScale = (props) => {
       `timescale-${i}`
     );
   });
-  const firstChunkLeft = visibleChunkIndices.length > 0 ? visibleChunkIndices[0] * MAX_CANVAS_WIDTH3 : 0;
-  const lastChunkRight = visibleChunkIndices.length > 0 ? (visibleChunkIndices[visibleChunkIndices.length - 1] + 1) * MAX_CANVAS_WIDTH3 : Infinity;
+  const firstChunkLeft = visibleChunkIndices.length > 0 ? visibleChunkIndices[0] * MAX_CANVAS_WIDTH4 : 0;
+  const lastChunkRight = visibleChunkIndices.length > 0 ? (visibleChunkIndices[visibleChunkIndices.length - 1] + 1) * MAX_CANVAS_WIDTH4 : Infinity;
   const visibleMarkers = visibleChunkIndices.length > 0 ? timeMarkersWithPositions.filter(({ pix }) => pix >= firstChunkLeft && pix < lastChunkRight).map(({ element }) => element) : timeMarkersWithPositions.map(({ element }) => element);
-  useLayoutEffect4(() => {
+  useLayoutEffect3(() => {
     for (const [chunkIdx, canvas] of canvasMapRef.current.entries()) {
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
-      const chunkLeft = chunkIdx * MAX_CANVAS_WIDTH3;
+      const chunkLeft = chunkIdx * MAX_CANVAS_WIDTH4;
       const chunkWidth = canvas.width / devicePixelRatio;
       ctx.resetTransform();
       ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -2744,23 +2950,15 @@ var TimeScale = (props) => {
     canvasInfo,
     visibleChunkIndices
   ]);
-  return /* @__PURE__ */ jsxs10(
-    PlaylistTimeScaleScroll,
-    {
-      $cssWidth: widthX,
-      $controlWidth: showControls ? controlWidth : 0,
-      $timeScaleHeight: timeScaleHeight,
-      children: [
-        visibleMarkers,
-        visibleChunks
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs10(PlaylistTimeScaleScroll, { $cssWidth: widthX, $timeScaleHeight: timeScaleHeight, children: [
+    visibleMarkers,
+    visibleChunks
+  ] });
 };
 var StyledTimeScale = withTheme2(TimeScale);
 
 // src/components/SmartScale.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var timeinfo = /* @__PURE__ */ new Map([
   [
     700,
@@ -2836,7 +3034,7 @@ function getScaleInfo(samplesPerPixel) {
 var SmartScale = ({ renderTimestamp }) => {
   const { samplesPerPixel, duration } = useContext9(PlaylistInfoContext);
   let config = getScaleInfo(samplesPerPixel);
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     StyledTimeScale,
     {
       marker: config.marker,
@@ -2849,9 +3047,9 @@ var SmartScale = ({ renderTimestamp }) => {
 };
 
 // src/components/TimeFormatSelect.tsx
-import styled22 from "styled-components";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var SelectWrapper = styled22.div`
+import styled23 from "styled-components";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var SelectWrapper = styled23.div`
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
@@ -2873,7 +3071,7 @@ var TimeFormatSelect = ({
   const handleChange = (e) => {
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ jsx26(SelectWrapper, { className, children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(SelectWrapper, { className, children: /* @__PURE__ */ jsx27(
     BaseSelect,
     {
       className: "time-format",
@@ -2881,50 +3079,30 @@ var TimeFormatSelect = ({
       onChange: handleChange,
       disabled,
       "aria-label": "Time format selection",
-      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx26("option", { value: option.value, children: option.label }, option.value))
+      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx27("option", { value: option.value, children: option.label }, option.value))
     }
   ) });
 };
 
 // src/components/Track.tsx
-import styled23 from "styled-components";
-import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
-var Container = styled23.div.attrs((props) => ({
+import styled24 from "styled-components";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var Container = styled24.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 = styled23.div.attrs((props) => ({
+var ChannelContainer = styled24.div.attrs((props) => ({
   style: {
     paddingLeft: `${props.$offset || 0}px`
   }
 }))`
   position: relative;
   background: ${(props) => props.$backgroundColor || "transparent"};
-  flex: 1;
-`;
-var ControlsWrapper = styled23.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,
@@ -2936,44 +3114,34 @@ var Track = ({
   hasClipHeaders = false,
   onClick,
   trackId,
-  isSelected = false
+  isSelected: _isSelected = false
 }) => {
-  const {
-    waveHeight,
-    controls: { show, width: controlWidth }
-  } = usePlaylistInfo();
-  const controls = useTrackControls();
-  return /* @__PURE__ */ jsxs11(
+  const { waveHeight } = usePlaylistInfo();
+  return /* @__PURE__ */ jsx28(
     Container,
     {
       $numChannels: numChannels,
       className,
       $waveHeight: waveHeight,
-      $controlWidth: show ? controlWidth : 0,
       $width: width,
       $hasClipHeaders: hasClipHeaders,
-      $isSelected: isSelected,
-      children: [
-        /* @__PURE__ */ jsx27(ControlsWrapper, { $controlWidth: show ? controlWidth : 0, $isSelected: isSelected, children: controls }),
-        /* @__PURE__ */ jsx27(
-          ChannelContainer,
-          {
-            $controlWidth: show ? controlWidth : 0,
-            $backgroundColor: backgroundColor,
-            $offset: offset,
-            onClick,
-            "data-track-id": trackId,
-            children
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsx28(
+        ChannelContainer,
+        {
+          $backgroundColor: backgroundColor,
+          $offset: offset,
+          onClick,
+          "data-track-id": trackId,
+          children
+        }
+      )
     }
   );
 };
 
 // src/components/TrackControls/Button.tsx
-import styled24 from "styled-components";
-var Button = styled24.button.attrs({
+import styled25 from "styled-components";
+var Button = styled25.button.attrs({
   type: "button"
 })`
   display: inline-block;
@@ -3048,8 +3216,8 @@ var Button = styled24.button.attrs({
 `;
 
 // src/components/TrackControls/ButtonGroup.tsx
-import styled25 from "styled-components";
-var ButtonGroup = styled25.div`
+import styled26 from "styled-components";
+var ButtonGroup = styled26.div`
   margin-bottom: 0.3rem;
 
   button:not(:first-child) {
@@ -3064,10 +3232,10 @@ var ButtonGroup = styled25.div`
 `;
 
 // src/components/TrackControls/CloseButton.tsx
-import styled26 from "styled-components";
+import styled27 from "styled-components";
 import { X as XIcon } from "@phosphor-icons/react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var StyledCloseButton = styled26.button`
+import { jsx as jsx29 } from "react/jsx-runtime";
+var StyledCloseButton = styled27.button`
   position: absolute;
   left: 0;
   top: 0;
@@ -3090,11 +3258,11 @@ var StyledCloseButton = styled26.button`
     color: #dc3545;
   }
 `;
-var CloseButton = ({ onClick, title = "Remove track" }) => /* @__PURE__ */ jsx28(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ jsx28(XIcon, { size: 12, weight: "bold" }) });
+var CloseButton = ({ onClick, title = "Remove track" }) => /* @__PURE__ */ jsx29(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ jsx29(XIcon, { size: 12, weight: "bold" }) });
 
 // src/components/TrackControls/Controls.tsx
-import styled27 from "styled-components";
-var Controls = styled27.div`
+import styled28 from "styled-components";
+var Controls = styled28.div`
   background: transparent;
   width: 100%;
   height: 100%;
@@ -3110,8 +3278,8 @@ var Controls = styled27.div`
 `;
 
 // src/components/TrackControls/Header.tsx
-import styled28 from "styled-components";
-var Header = styled28.header`
+import styled29 from "styled-components";
+var Header = styled29.header`
   overflow: hidden;
   height: 26px;
   width: 100%;
@@ -3126,27 +3294,27 @@ var Header = styled28.header`
 
 // src/components/TrackControls/VolumeDownIcon.tsx
 import { SpeakerLowIcon } from "@phosphor-icons/react";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var VolumeDownIcon = (props) => /* @__PURE__ */ jsx29(SpeakerLowIcon, { weight: "light", ...props });
+import { jsx as jsx30 } from "react/jsx-runtime";
+var VolumeDownIcon = (props) => /* @__PURE__ */ jsx30(SpeakerLowIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/VolumeUpIcon.tsx
 import { SpeakerHighIcon } from "@phosphor-icons/react";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var VolumeUpIcon = (props) => /* @__PURE__ */ jsx30(SpeakerHighIcon, { weight: "light", ...props });
+import { jsx as jsx31 } from "react/jsx-runtime";
+var VolumeUpIcon = (props) => /* @__PURE__ */ jsx31(SpeakerHighIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/TrashIcon.tsx
 import { TrashIcon as PhosphorTrashIcon } from "@phosphor-icons/react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var TrashIcon = (props) => /* @__PURE__ */ jsx31(PhosphorTrashIcon, { weight: "light", ...props });
+import { jsx as jsx32 } from "react/jsx-runtime";
+var TrashIcon = (props) => /* @__PURE__ */ jsx32(PhosphorTrashIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/DotsIcon.tsx
 import { DotsThreeIcon } from "@phosphor-icons/react";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var DotsIcon = (props) => /* @__PURE__ */ jsx32(DotsThreeIcon, { weight: "bold", ...props });
+import { jsx as jsx33 } from "react/jsx-runtime";
+var DotsIcon = (props) => /* @__PURE__ */ jsx33(DotsThreeIcon, { weight: "bold", ...props });
 
 // src/components/TrackControls/Slider.tsx
-import styled29 from "styled-components";
-var Slider = styled29(BaseSlider)`
+import styled30 from "styled-components";
+var Slider = styled30(BaseSlider)`
   width: 75%;
   height: 5px;
   background: ${(props) => props.theme.sliderTrackColor};
@@ -3198,8 +3366,8 @@ var Slider = styled29(BaseSlider)`
 `;
 
 // src/components/TrackControls/SliderWrapper.tsx
-import styled30 from "styled-components";
-var SliderWrapper = styled30.label`
+import styled31 from "styled-components";
+var SliderWrapper = styled31.label`
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -3210,15 +3378,15 @@ var SliderWrapper = styled30.label`
 `;
 
 // src/components/TrackMenu.tsx
-import React18, { useState as useState6, useEffect as useEffect7, useRef as useRef8 } from "react";
+import React19, { useState as useState6, useEffect as useEffect9, useRef as useRef8, useCallback as useCallback5 } from "react";
 import { createPortal } from "react-dom";
-import styled31 from "styled-components";
-import { jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
-var MenuContainer = styled31.div`
+import styled32 from "styled-components";
+import { jsx as jsx34, jsxs as jsxs11 } from "react/jsx-runtime";
+var MenuContainer = styled32.div`
   position: relative;
   display: inline-block;
 `;
-var MenuButton = styled31.button`
+var MenuButton = styled32.button`
   background: none;
   border: none;
   cursor: pointer;
@@ -3233,7 +3401,8 @@ var MenuButton = styled31.button`
     opacity: 1;
   }
 `;
-var Dropdown = styled31.div`
+var DROPDOWN_MIN_WIDTH = 180;
+var Dropdown = styled32.div`
   position: fixed;
   top: ${(p) => p.$top}px;
   left: ${(p) => p.$left}px;
@@ -3243,31 +3412,53 @@ var Dropdown = styled31.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 = styled31.hr`
+var Divider = styled32.hr`
   border: none;
   border-top: 1px solid rgba(128, 128, 128, 0.3);
   margin: 0.35rem 0;
 `;
 var TrackMenu = ({ items: itemsProp }) => {
   const [open, setOpen] = useState6(false);
-  const close = () => setOpen(false);
+  const close = useCallback5(() => setOpen(false), []);
   const items = typeof itemsProp === "function" ? itemsProp(close) : itemsProp;
   const [dropdownPos, setDropdownPos] = useState6({ top: 0, left: 0 });
   const buttonRef = useRef8(null);
   const dropdownRef = useRef8(null);
-  useEffect7(() => {
-    if (open && buttonRef.current) {
-      const rect = buttonRef.current.getBoundingClientRect();
-      setDropdownPos({
-        top: rect.bottom + 2,
-        left: Math.max(0, rect.right - 180)
-      });
+  const updatePosition = useCallback5(() => {
+    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]);
-  useEffect7(() => {
+    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 });
+  }, []);
+  useEffect9(() => {
+    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]);
+  useEffect9(() => {
     if (!open) return;
     const handleClick = (e) => {
       const target = e.target;
@@ -3275,11 +3466,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__ */ jsxs12(MenuContainer, { children: [
-    /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs11(MenuContainer, { children: [
+    /* @__PURE__ */ jsx34(
       MenuButton,
       {
         ref: buttonRef,
@@ -3290,19 +3490,19 @@ var TrackMenu = ({ items: itemsProp }) => {
         onMouseDown: (e) => e.stopPropagation(),
         title: "Track menu",
         "aria-label": "Track menu",
-        children: /* @__PURE__ */ jsx33(DotsIcon, { size: 16 })
+        children: /* @__PURE__ */ jsx34(DotsIcon, { size: 16 })
       }
     ),
     open && typeof document !== "undefined" && createPortal(
-      /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx34(
         Dropdown,
         {
           ref: dropdownRef,
           $top: dropdownPos.top,
           $left: dropdownPos.left,
           onMouseDown: (e) => e.stopPropagation(),
-          children: items.map((item, index) => /* @__PURE__ */ jsxs12(React18.Fragment, { children: [
-            index > 0 && /* @__PURE__ */ jsx33(Divider, {}),
+          children: items.map((item, index) => /* @__PURE__ */ jsxs11(React19.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ jsx34(Divider, {}),
             item.content
           ] }, item.id))
         }
@@ -3344,6 +3544,7 @@ export {
   LoopRegion,
   LoopRegionMarkers,
   MasterVolumeControl,
+  PianoRollChannel,
   Playhead,
   PlayheadWithMarker,
   Playlist,