@waveform-playlist/ui-components 5.2.0 → 5.3.0

package/dist/index.mjs

@@ -1889,16 +1889,285 @@ var PlayoutProvider = ({ children }) => {
 var usePlayoutStatus = () => useContext5(PlayoutStatusContext);
 var usePlayoutStatusUpdate = () => useContext5(PlayoutStatusUpdateContext);
 
-// src/components/SmartChannel.tsx
+// src/components/SpectrogramChannel.tsx
+import { useLayoutEffect as useLayoutEffect2, useCallback as useCallback3, useRef as useRef4, useEffect as useEffect4 } from "react";
+import styled19 from "styled-components";
 import { jsx as jsx18 } from "react/jsx-runtime";
-var SmartChannel = ({ isSelected, transparentBackground, ...props }) => {
+var MAX_CANVAS_WIDTH2 = 1e3;
+var Wrapper3 = styled19.div.attrs((props) => ({
+  style: {
+    top: `${props.$waveHeight * props.$index}px`,
+    width: `${props.$cssWidth}px`,
+    height: `${props.$waveHeight}px`
+  }
+}))`
+  position: absolute;
+  background: #000;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+`;
+var SpectrogramCanvas = styled19.canvas.attrs((props) => ({
+  style: {
+    width: `${props.$cssWidth}px`,
+    height: `${props.$waveHeight}px`
+  }
+}))`
+  float: left;
+  position: relative;
+  will-change: transform;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+`;
+function defaultGetColorMap() {
+  const lut = new Uint8Array(256 * 3);
+  for (let i = 0; i < 256; i++) {
+    lut[i * 3] = lut[i * 3 + 1] = lut[i * 3 + 2] = i;
+  }
+  return lut;
+}
+var SpectrogramChannel = ({
+  index,
+  data,
+  length,
+  waveHeight,
+  devicePixelRatio = 1,
+  samplesPerPixel,
+  colorLUT,
+  frequencyScaleFn,
+  minFrequency = 0,
+  maxFrequency,
+  workerApi,
+  clipId,
+  onCanvasesReady
+}) => {
+  const canvasesRef = useRef4([]);
+  const registeredIdsRef = useRef4([]);
+  const isWorkerMode = !!(workerApi && clipId);
+  const canvasRef = useCallback3(
+    (canvas) => {
+      if (canvas !== null) {
+        const idx = parseInt(canvas.dataset.index, 10);
+        canvasesRef.current[idx] = canvas;
+      }
+    },
+    []
+  );
+  useEffect4(() => {
+    if (!isWorkerMode) return;
+    const canvasCount2 = Math.ceil(length / MAX_CANVAS_WIDTH2);
+    canvasesRef.current.length = canvasCount2;
+    const canvases2 = canvasesRef.current;
+    const ids = [];
+    const widths = [];
+    for (let i = 0; i < canvases2.length; i++) {
+      const canvas = canvases2[i];
+      if (!canvas) continue;
+      const canvasId = `${clipId}-ch${index}-chunk${i}`;
+      try {
+        const offscreen = canvas.transferControlToOffscreen();
+        workerApi.registerCanvas(canvasId, offscreen);
+        ids.push(canvasId);
+        widths.push(Math.min(length - i * MAX_CANVAS_WIDTH2, MAX_CANVAS_WIDTH2));
+      } catch (err) {
+        console.warn(`[spectrogram] transferControlToOffscreen failed for ${canvasId}:`, err);
+        continue;
+      }
+    }
+    registeredIdsRef.current = ids;
+    if (ids.length > 0 && onCanvasesReady) {
+      onCanvasesReady(ids, widths);
+    }
+    return () => {
+      for (const id of registeredIdsRef.current) {
+        workerApi.unregisterCanvas(id);
+      }
+      registeredIdsRef.current = [];
+    };
+  }, [isWorkerMode, clipId, index, length]);
+  const lut = colorLUT ?? defaultGetColorMap();
+  const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
+  const scaleFn = frequencyScaleFn ?? ((f, minF, maxF2) => (f - minF) / (maxF2 - minF));
+  useLayoutEffect2(() => {
+    if (isWorkerMode || !data) return;
+    const canvases2 = canvasesRef.current;
+    const { frequencyBinCount, frameCount, hopSize, sampleRate, gainDb, rangeDb: rawRangeDb } = data;
+    const rangeDb = rawRangeDb === 0 ? 1 : rawRangeDb;
+    let globalPixelOffset = 0;
+    const binToFreq = (bin) => bin / frequencyBinCount * (sampleRate / 2);
+    for (let canvasIdx = 0; canvasIdx < canvases2.length; canvasIdx++) {
+      const canvas = canvases2[canvasIdx];
+      if (!canvas) continue;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) continue;
+      const canvasWidth = canvas.width / devicePixelRatio;
+      const canvasHeight = waveHeight;
+      ctx.resetTransform();
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.imageSmoothingEnabled = false;
+      ctx.scale(devicePixelRatio, devicePixelRatio);
+      const imgData = ctx.createImageData(canvasWidth, canvasHeight);
+      const pixels = imgData.data;
+      for (let x = 0; x < canvasWidth; x++) {
+        const globalX = globalPixelOffset + x;
+        const samplePos = globalX * samplesPerPixel;
+        const frame = Math.floor(samplePos / hopSize);
+        if (frame < 0 || frame >= frameCount) continue;
+        const frameOffset = frame * frequencyBinCount;
+        for (let y = 0; y < canvasHeight; y++) {
+          const normalizedY = 1 - y / canvasHeight;
+          let bin = Math.floor(normalizedY * frequencyBinCount);
+          if (frequencyScaleFn) {
+            let lo = 0;
+            let hi = frequencyBinCount - 1;
+            while (lo < hi) {
+              const mid = lo + hi >> 1;
+              const freq = binToFreq(mid);
+              const scaled = scaleFn(freq, minFrequency, maxF);
+              if (scaled < normalizedY) {
+                lo = mid + 1;
+              } else {
+                hi = mid;
+              }
+            }
+            bin = lo;
+          }
+          if (bin < 0 || bin >= frequencyBinCount) continue;
+          const db = data.data[frameOffset + bin];
+          const normalized = Math.max(0, Math.min(1, (db + rangeDb + gainDb) / rangeDb));
+          const colorIdx = Math.floor(normalized * 255);
+          const pixelIdx = (y * canvasWidth + x) * 4;
+          pixels[pixelIdx] = lut[colorIdx * 3];
+          pixels[pixelIdx + 1] = lut[colorIdx * 3 + 1];
+          pixels[pixelIdx + 2] = lut[colorIdx * 3 + 2];
+          pixels[pixelIdx + 3] = 255;
+        }
+      }
+      ctx.resetTransform();
+      ctx.putImageData(imgData, 0, 0);
+      if (devicePixelRatio !== 1) {
+        const tmpCanvas = document.createElement("canvas");
+        tmpCanvas.width = canvasWidth;
+        tmpCanvas.height = canvasHeight;
+        const tmpCtx = tmpCanvas.getContext("2d");
+        if (!tmpCtx) continue;
+        tmpCtx.putImageData(imgData, 0, 0);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.imageSmoothingEnabled = false;
+        ctx.drawImage(tmpCanvas, 0, 0, canvas.width, canvas.height);
+      }
+      globalPixelOffset += canvasWidth;
+    }
+  }, [isWorkerMode, data, length, waveHeight, devicePixelRatio, samplesPerPixel, lut, frequencyScaleFn, minFrequency, maxF, scaleFn]);
+  let totalWidth = length;
+  let canvasCount = 0;
+  const canvases = [];
+  while (totalWidth > 0) {
+    const currentWidth = Math.min(totalWidth, MAX_CANVAS_WIDTH2);
+    canvases.push(
+      /* @__PURE__ */ jsx18(
+        SpectrogramCanvas,
+        {
+          $cssWidth: currentWidth,
+          width: currentWidth * devicePixelRatio,
+          height: waveHeight * devicePixelRatio,
+          $waveHeight: waveHeight,
+          "data-index": canvasCount,
+          ref: canvasRef
+        },
+        `${length}-${canvasCount}`
+      )
+    );
+    totalWidth -= currentWidth;
+    canvasCount++;
+  }
+  return /* @__PURE__ */ jsx18(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
+};
+
+// src/components/SmartChannel.tsx
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+var SmartChannel = ({
+  isSelected,
+  transparentBackground,
+  renderMode = "waveform",
+  spectrogramData,
+  spectrogramColorLUT,
+  samplesPerPixel: sppProp,
+  spectrogramFrequencyScaleFn,
+  spectrogramMinFrequency,
+  spectrogramMaxFrequency,
+  spectrogramWorkerApi,
+  spectrogramClipId,
+  spectrogramOnCanvasesReady,
+  ...props
+}) => {
   const theme = useTheme2();
-  const { waveHeight, barWidth, barGap } = usePlaylistInfo();
+  const { waveHeight, barWidth, barGap, samplesPerPixel: contextSpp } = usePlaylistInfo();
   const devicePixelRatio = useDevicePixelRatio();
+  const samplesPerPixel = sppProp ?? contextSpp;
   const waveOutlineColor = isSelected && theme ? theme.selectedWaveOutlineColor : theme?.waveOutlineColor;
   const waveFillColor = isSelected && theme ? theme.selectedWaveFillColor : theme?.waveFillColor;
   const drawMode = theme?.waveformDrawMode || "inverted";
-  return /* @__PURE__ */ jsx18(
+  const hasSpectrogram = spectrogramData || spectrogramWorkerApi;
+  if (renderMode === "spectrogram" && hasSpectrogram) {
+    return /* @__PURE__ */ jsx19(
+      SpectrogramChannel,
+      {
+        index: props.index,
+        data: spectrogramData,
+        length: props.length,
+        waveHeight,
+        devicePixelRatio,
+        samplesPerPixel,
+        colorLUT: spectrogramColorLUT,
+        frequencyScaleFn: spectrogramFrequencyScaleFn,
+        minFrequency: spectrogramMinFrequency,
+        maxFrequency: spectrogramMaxFrequency,
+        workerApi: spectrogramWorkerApi,
+        clipId: spectrogramClipId,
+        onCanvasesReady: spectrogramOnCanvasesReady
+      }
+    );
+  }
+  if (renderMode === "both" && hasSpectrogram) {
+    const halfHeight = Math.floor(waveHeight / 2);
+    return /* @__PURE__ */ jsxs9(Fragment6, { children: [
+      /* @__PURE__ */ jsx19(
+        SpectrogramChannel,
+        {
+          index: props.index * 2,
+          data: spectrogramData,
+          length: props.length,
+          waveHeight: halfHeight,
+          devicePixelRatio,
+          samplesPerPixel,
+          colorLUT: spectrogramColorLUT,
+          frequencyScaleFn: spectrogramFrequencyScaleFn,
+          minFrequency: spectrogramMinFrequency,
+          maxFrequency: spectrogramMaxFrequency,
+          workerApi: spectrogramWorkerApi,
+          clipId: spectrogramClipId,
+          onCanvasesReady: spectrogramOnCanvasesReady
+        }
+      ),
+      /* @__PURE__ */ jsx19("div", { style: { position: "absolute", top: (props.index * 2 + 1) * halfHeight, width: props.length, height: halfHeight }, children: /* @__PURE__ */ jsx19(
+        Channel,
+        {
+          ...props,
+          ...theme,
+          index: 0,
+          waveOutlineColor,
+          waveFillColor,
+          waveHeight: halfHeight,
+          devicePixelRatio,
+          barWidth,
+          barGap,
+          transparentBackground,
+          drawMode
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx19(
     Channel,
     {
       ...props,
@@ -1915,12 +2184,112 @@ var SmartChannel = ({ isSelected, transparentBackground, ...props }) => {
   );
 };
 
+// src/components/SpectrogramLabels.tsx
+import { useRef as useRef5, useLayoutEffect as useLayoutEffect3 } from "react";
+import styled20 from "styled-components";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var LABELS_WIDTH = 72;
+var LabelsStickyWrapper = styled20.div`
+  position: sticky;
+  left: 0;
+  z-index: 101;
+  pointer-events: none;
+  height: 0;
+  width: 0;
+  overflow: visible;
+`;
+function getFrequencyLabels(minF, maxF, height) {
+  const allCandidates = [
+    20,
+    50,
+    100,
+    200,
+    500,
+    1e3,
+    2e3,
+    3e3,
+    4e3,
+    5e3,
+    8e3,
+    1e4,
+    12e3,
+    16e3,
+    2e4
+  ];
+  const inRange = allCandidates.filter((f) => f >= minF && f <= maxF);
+  const maxLabels = Math.max(2, Math.floor(height / 20));
+  if (inRange.length <= maxLabels) return inRange;
+  const step = (inRange.length - 1) / (maxLabels - 1);
+  const result = [];
+  for (let i = 0; i < maxLabels; i++) {
+    result.push(inRange[Math.round(i * step)]);
+  }
+  return result;
+}
+var SpectrogramLabels = ({
+  waveHeight,
+  numChannels,
+  frequencyScaleFn,
+  minFrequency,
+  maxFrequency,
+  labelsColor = "#ccc",
+  labelsBackground = "rgba(0,0,0,0.6)",
+  renderMode = "spectrogram",
+  hasClipHeaders = false
+}) => {
+  const canvasRef = useRef5(null);
+  const devicePixelRatio = useDevicePixelRatio();
+  const spectrogramHeight = renderMode === "both" ? Math.floor(waveHeight / 2) : waveHeight;
+  const totalHeight = numChannels * waveHeight;
+  const clipHeaderOffset = hasClipHeaders ? 22 : 0;
+  useLayoutEffect3(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.resetTransform();
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.scale(devicePixelRatio, devicePixelRatio);
+    const labelFreqs = getFrequencyLabels(minFrequency, maxFrequency, spectrogramHeight);
+    for (let ch = 0; ch < numChannels; ch++) {
+      const channelTop = ch * waveHeight + clipHeaderOffset;
+      ctx.font = "11px monospace";
+      ctx.textBaseline = "middle";
+      for (const freq of labelFreqs) {
+        const normalized = frequencyScaleFn(freq, minFrequency, maxFrequency);
+        if (normalized < 0 || normalized > 1) continue;
+        const y = channelTop + spectrogramHeight * (1 - normalized);
+        const text = freq >= 1e3 ? `${(freq / 1e3).toFixed(1)}k` : `${freq} Hz`;
+        const metrics = ctx.measureText(text);
+        const padding = 3;
+        ctx.fillStyle = labelsBackground;
+        ctx.fillRect(0, y - 7, metrics.width + padding * 2, 14);
+        ctx.fillStyle = labelsColor;
+        ctx.fillText(text, padding, y);
+      }
+    }
+  }, [waveHeight, numChannels, frequencyScaleFn, minFrequency, maxFrequency, labelsColor, labelsBackground, devicePixelRatio, spectrogramHeight, clipHeaderOffset]);
+  return /* @__PURE__ */ jsx20(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ jsx20(
+    "canvas",
+    {
+      ref: canvasRef,
+      width: LABELS_WIDTH * devicePixelRatio,
+      height: (totalHeight + clipHeaderOffset) * devicePixelRatio,
+      style: {
+        width: LABELS_WIDTH,
+        height: totalHeight + clipHeaderOffset,
+        pointerEvents: "none"
+      }
+    }
+  ) });
+};
+
 // src/components/SmartScale.tsx
 import { useContext as useContext7 } from "react";
 
 // src/components/TimeScale.tsx
-import React10, { useRef as useRef4, useEffect as useEffect4, useContext as useContext6 } from "react";
-import styled19, { withTheme as withTheme2 } from "styled-components";
+import React12, { useRef as useRef6, useEffect as useEffect5, useContext as useContext6 } from "react";
+import styled21, { withTheme as withTheme2 } from "styled-components";
 
 // src/utils/conversions.ts
 function samplesToSeconds(samples, sampleRate) {
@@ -1943,14 +2312,14 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 }
 
 // src/components/TimeScale.tsx
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx21, 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 = styled19.div.attrs((props) => ({
+var PlaylistTimeScaleScroll = styled21.div.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
     marginLeft: `${props.$controlWidth}px`,
@@ -1962,7 +2331,7 @@ var PlaylistTimeScaleScroll = styled19.div.attrs((props) => ({
   border-bottom: 1px solid ${(props) => props.theme.timeColor};
   box-sizing: border-box;
 `;
-var TimeTicks = styled19.canvas.attrs((props) => ({
+var TimeTicks = styled21.canvas.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
     height: `${props.$timeScaleHeight}px`
@@ -1973,7 +2342,7 @@ var TimeTicks = styled19.canvas.attrs((props) => ({
   right: 0;
   bottom: 0;
 `;
-var TimeStamp = styled19.div.attrs((props) => ({
+var TimeStamp = styled21.div.attrs((props) => ({
   style: {
     left: `${props.$left + 4}px`
     // Offset 4px to the right of the tick
@@ -1995,7 +2364,7 @@ var TimeScale = (props) => {
   } = props;
   const canvasInfo = /* @__PURE__ */ new Map();
   const timeMarkers = [];
-  const canvasRef = useRef4(null);
+  const canvasRef = useRef6(null);
   const {
     sampleRate,
     samplesPerPixel,
@@ -2003,7 +2372,7 @@ var TimeScale = (props) => {
     controls: { show: showControls, width: controlWidth }
   } = useContext6(PlaylistInfoContext);
   const devicePixelRatio = useDevicePixelRatio();
-  useEffect4(() => {
+  useEffect5(() => {
     if (canvasRef.current !== null) {
       const canvas = canvasRef.current;
       const ctx = canvas.getContext("2d");
@@ -2037,7 +2406,7 @@ var TimeScale = (props) => {
     if (counter % marker === 0) {
       const timeMs = counter;
       const timestamp = formatTime2(timeMs);
-      const timestampContent = renderTimestamp ? /* @__PURE__ */ jsx19(React10.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ jsx19(TimeStamp, { $left: pix, children: timestamp }, timestamp);
+      const timestampContent = renderTimestamp ? /* @__PURE__ */ jsx21(React12.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ jsx21(TimeStamp, { $left: pix, children: timestamp }, timestamp);
       timeMarkers.push(timestampContent);
       canvasInfo.set(pix, timeScaleHeight);
     } else if (counter % bigStep === 0) {
@@ -2047,7 +2416,7 @@ var TimeScale = (props) => {
     }
     counter += secondStep;
   }
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     PlaylistTimeScaleScroll,
     {
       $cssWidth: widthX,
@@ -2055,7 +2424,7 @@ var TimeScale = (props) => {
       $timeScaleHeight: timeScaleHeight,
       children: [
         timeMarkers,
-        /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx21(
           TimeTicks,
           {
             $cssWidth: widthX,
@@ -2072,7 +2441,7 @@ var TimeScale = (props) => {
 var StyledTimeScale = withTheme2(TimeScale);
 
 // src/components/SmartScale.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var timeinfo = /* @__PURE__ */ new Map([
   [
     700,
@@ -2145,24 +2514,25 @@ function getScaleInfo(samplesPerPixel) {
   }
   return config;
 }
-var SmartScale = () => {
+var SmartScale = ({ renderTimestamp }) => {
   const { samplesPerPixel, duration } = useContext7(PlaylistInfoContext);
   let config = getScaleInfo(samplesPerPixel);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx22(
     StyledTimeScale,
     {
       marker: config.marker,
       bigStep: config.bigStep,
       secondStep: config.smallStep,
-      duration
+      duration,
+      renderTimestamp
     }
   );
 };
 
 // src/components/TimeFormatSelect.tsx
-import styled20 from "styled-components";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var SelectWrapper = styled20.div`
+import styled22 from "styled-components";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var SelectWrapper = styled22.div`
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
@@ -2184,7 +2554,7 @@ var TimeFormatSelect = ({
   const handleChange = (e) => {
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ jsx21(SelectWrapper, { className, children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx23(SelectWrapper, { className, children: /* @__PURE__ */ jsx23(
     BaseSelect,
     {
       className: "time-format",
@@ -2192,15 +2562,15 @@ var TimeFormatSelect = ({
       onChange: handleChange,
       disabled,
       "aria-label": "Time format selection",
-      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx21("option", { value: option.value, children: option.label }, option.value))
+      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx23("option", { value: option.value, children: option.label }, option.value))
     }
   ) });
 };
 
 // src/components/Track.tsx
-import styled21 from "styled-components";
-import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
-var Container = styled21.div.attrs((props) => ({
+import styled23 from "styled-components";
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+var Container = styled23.div.attrs((props) => ({
   style: {
     height: `${props.$waveHeight * props.$numChannels + (props.$hasClipHeaders ? CLIP_HEADER_HEIGHT : 0)}px`
   }
@@ -2209,7 +2579,7 @@ var Container = styled21.div.attrs((props) => ({
   display: flex;
   ${(props) => props.$width !== void 0 && `width: ${props.$width}px;`}
 `;
-var ChannelContainer = styled21.div.attrs((props) => ({
+var ChannelContainer = styled23.div.attrs((props) => ({
   style: {
     paddingLeft: `${props.$offset || 0}px`
   }
@@ -2218,13 +2588,13 @@ var ChannelContainer = styled21.div.attrs((props) => ({
   background: ${(props) => props.$backgroundColor || "transparent"};
   flex: 1;
 `;
-var ControlsWrapper = styled21.div.attrs((props) => ({
+var ControlsWrapper = styled23.div.attrs((props) => ({
   style: {
     width: `${props.$controlWidth}px`
   }
 }))`
   position: sticky;
-  z-index: 101; /* Above waveform content, below Docusaurus navbar (z-index: 200) */
+  z-index: 102; /* Above waveform content and spectrogram labels (101), below Docusaurus navbar (200) */
   left: 0;
   height: 100%;
   flex-shrink: 0;
@@ -2254,7 +2624,7 @@ var Track = ({
     controls: { show, width: controlWidth }
   } = usePlaylistInfo();
   const controls = useTrackControls();
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     Container,
     {
       $numChannels: numChannels,
@@ -2265,7 +2635,7 @@ var Track = ({
       $hasClipHeaders: hasClipHeaders,
       $isSelected: isSelected,
       children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx24(
           ControlsWrapper,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -2273,7 +2643,7 @@ var Track = ({
             children: controls
           }
         ),
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx24(
           ChannelContainer,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -2290,8 +2660,8 @@ var Track = ({
 };
 
 // src/components/TrackControls/Button.tsx
-import styled22 from "styled-components";
-var Button = styled22.button.attrs({
+import styled24 from "styled-components";
+var Button = styled24.button.attrs({
   type: "button"
 })`
   display: inline-block;
@@ -2363,8 +2733,8 @@ var Button = styled22.button.attrs({
 `;
 
 // src/components/TrackControls/ButtonGroup.tsx
-import styled23 from "styled-components";
-var ButtonGroup = styled23.div`
+import styled25 from "styled-components";
+var ButtonGroup = styled25.div`
   margin-bottom: 0.3rem;
 
   button:not(:first-child) {
@@ -2378,9 +2748,39 @@ var ButtonGroup = styled23.div`
   }
 `;
 
+// src/components/TrackControls/CloseButton.tsx
+import styled26 from "styled-components";
+import { X as XIcon } from "@phosphor-icons/react";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var StyledCloseButton = styled26.button`
+  position: absolute;
+  left: 0;
+  top: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 2px 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.7;
+  transition: opacity 0.15s, color 0.15s;
+
+  &:hover {
+    opacity: 1;
+    color: #dc3545;
+  }
+`;
+var CloseButton = ({
+  onClick,
+  title = "Remove track"
+}) => /* @__PURE__ */ jsx25(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ jsx25(XIcon, { size: 12, weight: "bold" }) });
+
 // src/components/TrackControls/Controls.tsx
-import styled24 from "styled-components";
-var Controls = styled24.div`
+import styled27 from "styled-components";
+var Controls = styled27.div`
   background: transparent;
   width: 100%;
   height: 100%;
@@ -2396,8 +2796,8 @@ var Controls = styled24.div`
 `;
 
 // src/components/TrackControls/Header.tsx
-import styled25 from "styled-components";
-var Header = styled25.header`
+import styled28 from "styled-components";
+var Header = styled28.header`
   overflow: hidden;
   height: 26px;
   width: 100%;
@@ -2412,22 +2812,27 @@ var Header = styled25.header`
 
 // src/components/TrackControls/VolumeDownIcon.tsx
 import { SpeakerLowIcon } from "@phosphor-icons/react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var VolumeDownIcon = (props) => /* @__PURE__ */ jsx23(SpeakerLowIcon, { weight: "light", ...props });
+import { jsx as jsx26 } from "react/jsx-runtime";
+var VolumeDownIcon = (props) => /* @__PURE__ */ jsx26(SpeakerLowIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/VolumeUpIcon.tsx
 import { SpeakerHighIcon } from "@phosphor-icons/react";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var VolumeUpIcon = (props) => /* @__PURE__ */ jsx24(SpeakerHighIcon, { weight: "light", ...props });
+import { jsx as jsx27 } from "react/jsx-runtime";
+var VolumeUpIcon = (props) => /* @__PURE__ */ jsx27(SpeakerHighIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/TrashIcon.tsx
 import { TrashIcon as PhosphorTrashIcon } from "@phosphor-icons/react";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var TrashIcon = (props) => /* @__PURE__ */ jsx25(PhosphorTrashIcon, { weight: "light", ...props });
+import { jsx as jsx28 } from "react/jsx-runtime";
+var TrashIcon = (props) => /* @__PURE__ */ jsx28(PhosphorTrashIcon, { weight: "light", ...props });
+
+// src/components/TrackControls/DotsIcon.tsx
+import { DotsThreeIcon } from "@phosphor-icons/react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var DotsIcon = (props) => /* @__PURE__ */ jsx29(DotsThreeIcon, { weight: "bold", ...props });
 
 // src/components/TrackControls/Slider.tsx
-import styled26 from "styled-components";
-var Slider = styled26(BaseSlider)`
+import styled29 from "styled-components";
+var Slider = styled29(BaseSlider)`
   width: 75%;
   height: 5px;
   background: ${(props) => props.theme.sliderTrackColor};
@@ -2479,8 +2884,8 @@ var Slider = styled26(BaseSlider)`
 `;
 
 // src/components/TrackControls/SliderWrapper.tsx
-import styled27 from "styled-components";
-var SliderWrapper = styled27.label`
+import styled30 from "styled-components";
+var SliderWrapper = styled30.label`
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -2490,113 +2895,108 @@ var SliderWrapper = styled27.label`
   font-size: 14px;
 `;
 
-// src/components/TrackControlsWithDelete.tsx
-import styled28 from "styled-components";
-import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
-var HeaderContainer2 = styled28.div`
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.5rem 0.5rem 0.25rem 0.5rem;
-`;
-var TrackNameSpan = styled28.span`
-  flex: 1;
-  font-weight: 600;
-  font-size: 0.875rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin: 0 0.25rem;
+// src/components/TrackMenu.tsx
+import React14, { useState as useState6, useEffect as useEffect6, useRef as useRef7 } from "react";
+import { createPortal } from "react-dom";
+import styled31 from "styled-components";
+import { jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
+var MenuContainer = styled31.div`
+  position: relative;
+  display: inline-block;
 `;
-var DeleteIconButton = styled28.button`
+var MenuButton = styled31.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px 4px;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: #999;
-  cursor: pointer;
-  font-size: 16px;
-  line-height: 1;
-  border-radius: 3px;
-  transition: all 0.2s ease-in-out;
-  flex-shrink: 0;
+  color: inherit;
+  opacity: 0.7;
 
   &:hover {
-    background: #dc3545;
-    color: white;
-  }
-
-  &:active {
-    transform: scale(0.9);
+    opacity: 1;
   }
 `;
-var TrackControlsWithDelete = ({
-  trackName,
-  muted,
-  soloed,
-  volume,
-  pan,
-  onMuteChange,
-  onSoloChange,
-  onVolumeChange,
-  onPanChange,
-  onDelete
+var Dropdown = styled31.div`
+  position: fixed;
+  top: ${(p) => p.$top}px;
+  left: ${(p) => p.$left}px;
+  z-index: 10000;
+  background: ${(p) => p.theme.timescaleBackgroundColor ?? "#222"};
+  color: ${(p) => p.theme.textColor ?? "inherit"};
+  border: 1px solid rgba(128, 128, 128, 0.4);
+  border-radius: 6px;
+  padding: 0.5rem 0;
+  min-width: 180px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+`;
+var Divider = styled31.hr`
+  border: none;
+  border-top: 1px solid rgba(128, 128, 128, 0.3);
+  margin: 0.35rem 0;
+`;
+var TrackMenu = ({
+  items: itemsProp
 }) => {
-  return /* @__PURE__ */ jsxs11(Controls, { children: [
-    /* @__PURE__ */ jsxs11(HeaderContainer2, { children: [
-      /* @__PURE__ */ jsx26(DeleteIconButton, { onClick: onDelete, title: "Delete track", children: /* @__PURE__ */ jsx26(TrashIcon, {}) }),
-      /* @__PURE__ */ jsx26(TrackNameSpan, { children: trackName })
-    ] }),
-    /* @__PURE__ */ jsxs11(ButtonGroup, { children: [
-      /* @__PURE__ */ jsx26(
-        Button,
-        {
-          $variant: muted ? "danger" : "outline",
-          onClick: () => onMuteChange(!muted),
-          children: "Mute"
-        }
-      ),
-      /* @__PURE__ */ jsx26(
-        Button,
-        {
-          $variant: soloed ? "info" : "outline",
-          onClick: () => onSoloChange(!soloed),
-          children: "Solo"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs11(SliderWrapper, { children: [
-      /* @__PURE__ */ jsx26(VolumeDownIcon, {}),
-      /* @__PURE__ */ jsx26(
-        Slider,
-        {
-          min: "0",
-          max: "1",
-          step: "0.01",
-          value: volume,
-          onChange: (e) => onVolumeChange(parseFloat(e.target.value))
-        }
-      ),
-      /* @__PURE__ */ jsx26(VolumeUpIcon, {})
-    ] }),
-    /* @__PURE__ */ jsxs11(SliderWrapper, { children: [
-      /* @__PURE__ */ jsx26("span", { children: "L" }),
-      /* @__PURE__ */ jsx26(
-        Slider,
+  const [open, setOpen] = useState6(false);
+  const close = () => setOpen(false);
+  const items = typeof itemsProp === "function" ? itemsProp(close) : itemsProp;
+  const [dropdownPos, setDropdownPos] = useState6({ top: 0, left: 0 });
+  const buttonRef = useRef7(null);
+  const dropdownRef = useRef7(null);
+  useEffect6(() => {
+    if (open && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setDropdownPos({
+        top: rect.bottom + 2,
+        left: Math.max(0, rect.right - 180)
+      });
+    }
+  }, [open]);
+  useEffect6(() => {
+    if (!open) return;
+    const handleClick = (e) => {
+      const target = e.target;
+      if (buttonRef.current && !buttonRef.current.contains(target) && dropdownRef.current && !dropdownRef.current.contains(target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  return /* @__PURE__ */ jsxs12(MenuContainer, { children: [
+    /* @__PURE__ */ jsx30(
+      MenuButton,
+      {
+        ref: buttonRef,
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen((prev) => !prev);
+        },
+        onMouseDown: (e) => e.stopPropagation(),
+        title: "Track menu",
+        "aria-label": "Track menu",
+        children: /* @__PURE__ */ jsx30(DotsIcon, { size: 16 })
+      }
+    ),
+    open && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsx30(
+        Dropdown,
         {
-          min: "-1",
-          max: "1",
-          step: "0.01",
-          value: pan,
-          onChange: (e) => onPanChange(parseFloat(e.target.value))
+          ref: dropdownRef,
+          $top: dropdownPos.top,
+          $left: dropdownPos.left,
+          onMouseDown: (e) => e.stopPropagation(),
+          children: items.map((item, index) => /* @__PURE__ */ jsxs12(React14.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ jsx30(Divider, {}),
+            item.content
+          ] }, item.id))
         }
       ),
-      /* @__PURE__ */ jsx26("span", { children: "R" })
-    ] })
+      document.body
+    )
   ] });
 };
 export {
@@ -2621,8 +3021,10 @@ export {
   ClipBoundary,
   ClipHeader,
   ClipHeaderPresentational,
+  CloseButton,
   Controls,
   DevicePixelRatioProvider,
+  DotsIcon,
   FadeOverlay,
   Header,
   InlineLabel,
@@ -2641,6 +3043,8 @@ export {
   SliderWrapper,
   SmartChannel,
   SmartScale,
+  SpectrogramChannel,
+  SpectrogramLabels,
   StyledPlaylist,
   StyledTimeScale,
   TimeFormatSelect,
@@ -2649,7 +3053,7 @@ export {
   TimescaleLoopRegion,
   Track,
   TrackControlsContext,
-  TrackControlsWithDelete,
+  TrackMenu,
   TrashIcon,
   VolumeDownIcon,
   VolumeUpIcon,