@waveform-playlist/ui-components 5.2.0 → 5.3.0

package/dist/index.js

@@ -51,8 +51,10 @@ __export(index_exports, {
   ClipBoundary: () => ClipBoundary,
   ClipHeader: () => ClipHeader,
   ClipHeaderPresentational: () => ClipHeaderPresentational,
+  CloseButton: () => CloseButton,
   Controls: () => Controls,
   DevicePixelRatioProvider: () => DevicePixelRatioProvider,
+  DotsIcon: () => DotsIcon,
   FadeOverlay: () => FadeOverlay,
   Header: () => Header,
   InlineLabel: () => InlineLabel,
@@ -71,6 +73,8 @@ __export(index_exports, {
   SliderWrapper: () => SliderWrapper,
   SmartChannel: () => SmartChannel,
   SmartScale: () => SmartScale,
+  SpectrogramChannel: () => SpectrogramChannel,
+  SpectrogramLabels: () => SpectrogramLabels,
   StyledPlaylist: () => StyledPlaylist,
   StyledTimeScale: () => StyledTimeScale,
   TimeFormatSelect: () => TimeFormatSelect,
@@ -79,7 +83,7 @@ __export(index_exports, {
   TimescaleLoopRegion: () => TimescaleLoopRegion,
   Track: () => Track,
   TrackControlsContext: () => TrackControlsContext,
-  TrackControlsWithDelete: () => TrackControlsWithDelete,
+  TrackMenu: () => TrackMenu,
   TrashIcon: () => TrashIcon,
   VolumeDownIcon: () => VolumeDownIcon,
   VolumeUpIcon: () => VolumeUpIcon,
@@ -1991,16 +1995,285 @@ var PlayoutProvider = ({ children }) => {
 var usePlayoutStatus = () => (0, import_react11.useContext)(PlayoutStatusContext);
 var usePlayoutStatusUpdate = () => (0, import_react11.useContext)(PlayoutStatusUpdateContext);
 
-// src/components/SmartChannel.tsx
+// src/components/SpectrogramChannel.tsx
+var import_react12 = require("react");
+var import_styled_components20 = __toESM(require("styled-components"));
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var SmartChannel = ({ isSelected, transparentBackground, ...props }) => {
+var MAX_CANVAS_WIDTH2 = 1e3;
+var Wrapper3 = import_styled_components20.default.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 = import_styled_components20.default.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 = (0, import_react12.useRef)([]);
+  const registeredIdsRef = (0, import_react12.useRef)([]);
+  const isWorkerMode = !!(workerApi && clipId);
+  const canvasRef = (0, import_react12.useCallback)(
+    (canvas) => {
+      if (canvas !== null) {
+        const idx = parseInt(canvas.dataset.index, 10);
+        canvasesRef.current[idx] = canvas;
+      }
+    },
+    []
+  );
+  (0, import_react12.useEffect)(() => {
+    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));
+  (0, import_react12.useLayoutEffect)(() => {
+    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__ */ (0, import_jsx_runtime18.jsx)(
+        SpectrogramCanvas,
+        {
+          $cssWidth: currentWidth,
+          width: currentWidth * devicePixelRatio,
+          height: waveHeight * devicePixelRatio,
+          $waveHeight: waveHeight,
+          "data-index": canvasCount,
+          ref: canvasRef
+        },
+        `${length}-${canvasCount}`
+      )
+    );
+    totalWidth -= currentWidth;
+    canvasCount++;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Wrapper3, { $index: index, $cssWidth: length, $waveHeight: waveHeight, children: canvases });
+};
+
+// src/components/SmartChannel.tsx
+var import_jsx_runtime19 = require("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__ */ (0, import_jsx_runtime18.jsx)(
+  const hasSpectrogram = spectrogramData || spectrogramWorkerApi;
+  if (renderMode === "spectrogram" && hasSpectrogram) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      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__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        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__ */ (0, import_jsx_runtime19.jsx)("div", { style: { position: "absolute", top: (props.index * 2 + 1) * halfHeight, width: props.length, height: halfHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        Channel,
+        {
+          ...props,
+          ...theme,
+          index: 0,
+          waveOutlineColor,
+          waveFillColor,
+          waveHeight: halfHeight,
+          devicePixelRatio,
+          barWidth,
+          barGap,
+          transparentBackground,
+          drawMode
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     Channel,
     {
       ...props,
@@ -2017,12 +2290,112 @@ var SmartChannel = ({ isSelected, transparentBackground, ...props }) => {
   );
 };
 
-// src/components/SmartScale.tsx
+// src/components/SpectrogramLabels.tsx
 var import_react13 = require("react");
+var import_styled_components21 = __toESM(require("styled-components"));
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var LABELS_WIDTH = 72;
+var LabelsStickyWrapper = import_styled_components21.default.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 = (0, import_react13.useRef)(null);
+  const devicePixelRatio = useDevicePixelRatio();
+  const spectrogramHeight = renderMode === "both" ? Math.floor(waveHeight / 2) : waveHeight;
+  const totalHeight = numChannels * waveHeight;
+  const clipHeaderOffset = hasClipHeaders ? 22 : 0;
+  (0, import_react13.useLayoutEffect)(() => {
+    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__ */ (0, import_jsx_runtime20.jsx)(LabelsStickyWrapper, { $height: totalHeight + clipHeaderOffset, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "canvas",
+    {
+      ref: canvasRef,
+      width: LABELS_WIDTH * devicePixelRatio,
+      height: (totalHeight + clipHeaderOffset) * devicePixelRatio,
+      style: {
+        width: LABELS_WIDTH,
+        height: totalHeight + clipHeaderOffset,
+        pointerEvents: "none"
+      }
+    }
+  ) });
+};
+
+// src/components/SmartScale.tsx
+var import_react15 = require("react");
 
 // src/components/TimeScale.tsx
-var import_react12 = __toESM(require("react"));
-var import_styled_components20 = __toESM(require("styled-components"));
+var import_react14 = __toESM(require("react"));
+var import_styled_components22 = __toESM(require("styled-components"));
 
 // src/utils/conversions.ts
 function samplesToSeconds(samples, sampleRate) {
@@ -2045,14 +2418,14 @@ function secondsToPixels(seconds, samplesPerPixel, sampleRate) {
 }
 
 // src/components/TimeScale.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function formatTime2(milliseconds) {
   const seconds = Math.floor(milliseconds / 1e3);
   const s = seconds % 60;
   const m = (seconds - s) / 60;
   return `${m}:${String(s).padStart(2, "0")}`;
 }
-var PlaylistTimeScaleScroll = import_styled_components20.default.div.attrs((props) => ({
+var PlaylistTimeScaleScroll = import_styled_components22.default.div.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
     marginLeft: `${props.$controlWidth}px`,
@@ -2064,7 +2437,7 @@ var PlaylistTimeScaleScroll = import_styled_components20.default.div.attrs((prop
   border-bottom: 1px solid ${(props) => props.theme.timeColor};
   box-sizing: border-box;
 `;
-var TimeTicks = import_styled_components20.default.canvas.attrs((props) => ({
+var TimeTicks = import_styled_components22.default.canvas.attrs((props) => ({
   style: {
     width: `${props.$cssWidth}px`,
     height: `${props.$timeScaleHeight}px`
@@ -2075,7 +2448,7 @@ var TimeTicks = import_styled_components20.default.canvas.attrs((props) => ({
   right: 0;
   bottom: 0;
 `;
-var TimeStamp = import_styled_components20.default.div.attrs((props) => ({
+var TimeStamp = import_styled_components22.default.div.attrs((props) => ({
   style: {
     left: `${props.$left + 4}px`
     // Offset 4px to the right of the tick
@@ -2097,15 +2470,15 @@ var TimeScale = (props) => {
   } = props;
   const canvasInfo = /* @__PURE__ */ new Map();
   const timeMarkers = [];
-  const canvasRef = (0, import_react12.useRef)(null);
+  const canvasRef = (0, import_react14.useRef)(null);
   const {
     sampleRate,
     samplesPerPixel,
     timeScaleHeight,
     controls: { show: showControls, width: controlWidth }
-  } = (0, import_react12.useContext)(PlaylistInfoContext);
+  } = (0, import_react14.useContext)(PlaylistInfoContext);
   const devicePixelRatio = useDevicePixelRatio();
-  (0, import_react12.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (canvasRef.current !== null) {
       const canvas = canvasRef.current;
       const ctx = canvas.getContext("2d");
@@ -2139,7 +2512,7 @@ var TimeScale = (props) => {
     if (counter % marker === 0) {
       const timeMs = counter;
       const timestamp = formatTime2(timeMs);
-      const timestampContent = renderTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react12.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TimeStamp, { $left: pix, children: timestamp }, timestamp);
+      const timestampContent = renderTimestamp ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react14.default.Fragment, { children: renderTimestamp(timeMs, pix) }, `timestamp-${counter}`) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TimeStamp, { $left: pix, children: timestamp }, timestamp);
       timeMarkers.push(timestampContent);
       canvasInfo.set(pix, timeScaleHeight);
     } else if (counter % bigStep === 0) {
@@ -2149,7 +2522,7 @@ var TimeScale = (props) => {
     }
     counter += secondStep;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     PlaylistTimeScaleScroll,
     {
       $cssWidth: widthX,
@@ -2157,7 +2530,7 @@ var TimeScale = (props) => {
       $timeScaleHeight: timeScaleHeight,
       children: [
         timeMarkers,
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           TimeTicks,
           {
             $cssWidth: widthX,
@@ -2171,10 +2544,10 @@ var TimeScale = (props) => {
     }
   );
 };
-var StyledTimeScale = (0, import_styled_components20.withTheme)(TimeScale);
+var StyledTimeScale = (0, import_styled_components22.withTheme)(TimeScale);
 
 // src/components/SmartScale.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var timeinfo = /* @__PURE__ */ new Map([
   [
     700,
@@ -2247,24 +2620,25 @@ function getScaleInfo(samplesPerPixel) {
   }
   return config;
 }
-var SmartScale = () => {
-  const { samplesPerPixel, duration } = (0, import_react13.useContext)(PlaylistInfoContext);
+var SmartScale = ({ renderTimestamp }) => {
+  const { samplesPerPixel, duration } = (0, import_react15.useContext)(PlaylistInfoContext);
   let config = getScaleInfo(samplesPerPixel);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     StyledTimeScale,
     {
       marker: config.marker,
       bigStep: config.bigStep,
       secondStep: config.smallStep,
-      duration
+      duration,
+      renderTimestamp
     }
   );
 };
 
 // src/components/TimeFormatSelect.tsx
-var import_styled_components21 = __toESM(require("styled-components"));
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var SelectWrapper = import_styled_components21.default.div`
+var import_styled_components23 = __toESM(require("styled-components"));
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var SelectWrapper = import_styled_components23.default.div`
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
@@ -2286,7 +2660,7 @@ var TimeFormatSelect = ({
   const handleChange = (e) => {
     onChange(e.target.value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SelectWrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     BaseSelect,
     {
       className: "time-format",
@@ -2294,15 +2668,15 @@ var TimeFormatSelect = ({
       onChange: handleChange,
       disabled,
       "aria-label": "Time format selection",
-      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("option", { value: option.value, children: option.label }, option.value))
+      children: TIME_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: option.value, children: option.label }, option.value))
     }
   ) });
 };
 
 // src/components/Track.tsx
-var import_styled_components22 = __toESM(require("styled-components"));
-var import_jsx_runtime22 = require("react/jsx-runtime");
-var Container = import_styled_components22.default.div.attrs((props) => ({
+var import_styled_components24 = __toESM(require("styled-components"));
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var Container = import_styled_components24.default.div.attrs((props) => ({
   style: {
     height: `${props.$waveHeight * props.$numChannels + (props.$hasClipHeaders ? CLIP_HEADER_HEIGHT : 0)}px`
   }
@@ -2311,7 +2685,7 @@ var Container = import_styled_components22.default.div.attrs((props) => ({
   display: flex;
   ${(props) => props.$width !== void 0 && `width: ${props.$width}px;`}
 `;
-var ChannelContainer = import_styled_components22.default.div.attrs((props) => ({
+var ChannelContainer = import_styled_components24.default.div.attrs((props) => ({
   style: {
     paddingLeft: `${props.$offset || 0}px`
   }
@@ -2320,13 +2694,13 @@ var ChannelContainer = import_styled_components22.default.div.attrs((props) => (
   background: ${(props) => props.$backgroundColor || "transparent"};
   flex: 1;
 `;
-var ControlsWrapper = import_styled_components22.default.div.attrs((props) => ({
+var ControlsWrapper = import_styled_components24.default.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;
@@ -2356,7 +2730,7 @@ var Track = ({
     controls: { show, width: controlWidth }
   } = usePlaylistInfo();
   const controls = useTrackControls();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     Container,
     {
       $numChannels: numChannels,
@@ -2367,7 +2741,7 @@ var Track = ({
       $hasClipHeaders: hasClipHeaders,
       $isSelected: isSelected,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           ControlsWrapper,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -2375,7 +2749,7 @@ var Track = ({
             children: controls
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           ChannelContainer,
           {
             $controlWidth: show ? controlWidth : 0,
@@ -2392,8 +2766,8 @@ var Track = ({
 };
 
 // src/components/TrackControls/Button.tsx
-var import_styled_components23 = __toESM(require("styled-components"));
-var Button = import_styled_components23.default.button.attrs({
+var import_styled_components25 = __toESM(require("styled-components"));
+var Button = import_styled_components25.default.button.attrs({
   type: "button"
 })`
   display: inline-block;
@@ -2465,8 +2839,8 @@ var Button = import_styled_components23.default.button.attrs({
 `;
 
 // src/components/TrackControls/ButtonGroup.tsx
-var import_styled_components24 = __toESM(require("styled-components"));
-var ButtonGroup = import_styled_components24.default.div`
+var import_styled_components26 = __toESM(require("styled-components"));
+var ButtonGroup = import_styled_components26.default.div`
   margin-bottom: 0.3rem;
 
   button:not(:first-child) {
@@ -2480,9 +2854,39 @@ var ButtonGroup = import_styled_components24.default.div`
   }
 `;
 
+// src/components/TrackControls/CloseButton.tsx
+var import_styled_components27 = __toESM(require("styled-components"));
+var import_react16 = require("@phosphor-icons/react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var StyledCloseButton = import_styled_components27.default.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__ */ (0, import_jsx_runtime25.jsx)(StyledCloseButton, { onClick, title, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react16.X, { size: 12, weight: "bold" }) });
+
 // src/components/TrackControls/Controls.tsx
-var import_styled_components25 = __toESM(require("styled-components"));
-var Controls = import_styled_components25.default.div`
+var import_styled_components28 = __toESM(require("styled-components"));
+var Controls = import_styled_components28.default.div`
   background: transparent;
   width: 100%;
   height: 100%;
@@ -2498,8 +2902,8 @@ var Controls = import_styled_components25.default.div`
 `;
 
 // src/components/TrackControls/Header.tsx
-var import_styled_components26 = __toESM(require("styled-components"));
-var Header = import_styled_components26.default.header`
+var import_styled_components29 = __toESM(require("styled-components"));
+var Header = import_styled_components29.default.header`
   overflow: hidden;
   height: 26px;
   width: 100%;
@@ -2513,23 +2917,28 @@ var Header = import_styled_components26.default.header`
 `;
 
 // src/components/TrackControls/VolumeDownIcon.tsx
-var import_react14 = require("@phosphor-icons/react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react14.SpeakerLowIcon, { weight: "light", ...props });
+var import_react17 = require("@phosphor-icons/react");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var VolumeDownIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react17.SpeakerLowIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/VolumeUpIcon.tsx
-var import_react15 = require("@phosphor-icons/react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react15.SpeakerHighIcon, { weight: "light", ...props });
+var import_react18 = require("@phosphor-icons/react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var VolumeUpIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react18.SpeakerHighIcon, { weight: "light", ...props });
 
 // src/components/TrackControls/TrashIcon.tsx
-var import_react16 = require("@phosphor-icons/react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
-var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react16.TrashIcon, { weight: "light", ...props });
+var import_react19 = require("@phosphor-icons/react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var TrashIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react19.TrashIcon, { weight: "light", ...props });
+
+// src/components/TrackControls/DotsIcon.tsx
+var import_react20 = require("@phosphor-icons/react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var DotsIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react20.DotsThreeIcon, { weight: "bold", ...props });
 
 // src/components/TrackControls/Slider.tsx
-var import_styled_components27 = __toESM(require("styled-components"));
-var Slider = (0, import_styled_components27.default)(BaseSlider)`
+var import_styled_components30 = __toESM(require("styled-components"));
+var Slider = (0, import_styled_components30.default)(BaseSlider)`
   width: 75%;
   height: 5px;
   background: ${(props) => props.theme.sliderTrackColor};
@@ -2581,8 +2990,8 @@ var Slider = (0, import_styled_components27.default)(BaseSlider)`
 `;
 
 // src/components/TrackControls/SliderWrapper.tsx
-var import_styled_components28 = __toESM(require("styled-components"));
-var SliderWrapper = import_styled_components28.default.label`
+var import_styled_components31 = __toESM(require("styled-components"));
+var SliderWrapper = import_styled_components31.default.label`
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -2592,113 +3001,108 @@ var SliderWrapper = import_styled_components28.default.label`
   font-size: 14px;
 `;
 
-// src/components/TrackControlsWithDelete.tsx
-var import_styled_components29 = __toESM(require("styled-components"));
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var HeaderContainer2 = import_styled_components29.default.div`
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.5rem 0.5rem 0.25rem 0.5rem;
-`;
-var TrackNameSpan = import_styled_components29.default.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
+var import_react21 = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var import_styled_components32 = __toESM(require("styled-components"));
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var MenuContainer = import_styled_components32.default.div`
+  position: relative;
+  display: inline-block;
 `;
-var DeleteIconButton = import_styled_components29.default.button`
+var MenuButton = import_styled_components32.default.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 = import_styled_components32.default.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 = import_styled_components32.default.hr`
+  border: none;
+  border-top: 1px solid rgba(128, 128, 128, 0.3);
+  margin: 0.35rem 0;
+`;
+var TrackMenu = ({
+  items: itemsProp
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Controls, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(HeaderContainer2, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DeleteIconButton, { onClick: onDelete, title: "Delete track", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TrashIcon, {}) }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TrackNameSpan, { children: trackName })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(ButtonGroup, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        Button,
-        {
-          $variant: muted ? "danger" : "outline",
-          onClick: () => onMuteChange(!muted),
-          children: "Mute"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        Button,
-        {
-          $variant: soloed ? "info" : "outline",
-          onClick: () => onSoloChange(!soloed),
-          children: "Solo"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(SliderWrapper, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VolumeDownIcon, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        Slider,
-        {
-          min: "0",
-          max: "1",
-          step: "0.01",
-          value: volume,
-          onChange: (e) => onVolumeChange(parseFloat(e.target.value))
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(VolumeUpIcon, {})
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(SliderWrapper, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "L" }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        Slider,
+  const [open, setOpen] = (0, import_react21.useState)(false);
+  const close = () => setOpen(false);
+  const items = typeof itemsProp === "function" ? itemsProp(close) : itemsProp;
+  const [dropdownPos, setDropdownPos] = (0, import_react21.useState)({ top: 0, left: 0 });
+  const buttonRef = (0, import_react21.useRef)(null);
+  const dropdownRef = (0, import_react21.useRef)(null);
+  (0, import_react21.useEffect)(() => {
+    if (open && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      setDropdownPos({
+        top: rect.bottom + 2,
+        left: Math.max(0, rect.right - 180)
+      });
+    }
+  }, [open]);
+  (0, import_react21.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime30.jsxs)(MenuContainer, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      MenuButton,
+      {
+        ref: buttonRef,
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen((prev) => !prev);
+        },
+        onMouseDown: (e) => e.stopPropagation(),
+        title: "Track menu",
+        "aria-label": "Track menu",
+        children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DotsIcon, { size: 16 })
+      }
+    ),
+    open && typeof document !== "undefined" && (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        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__ */ (0, import_jsx_runtime30.jsxs)(import_react21.default.Fragment, { children: [
+            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Divider, {}),
+            item.content
+          ] }, item.id))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: "R" })
-    ] })
+      document.body
+    )
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
@@ -2724,8 +3128,10 @@ var TrackControlsWithDelete = ({
   ClipBoundary,
   ClipHeader,
   ClipHeaderPresentational,
+  CloseButton,
   Controls,
   DevicePixelRatioProvider,
+  DotsIcon,
   FadeOverlay,
   Header,
   InlineLabel,
@@ -2744,6 +3150,8 @@ var TrackControlsWithDelete = ({
   SliderWrapper,
   SmartChannel,
   SmartScale,
+  SpectrogramChannel,
+  SpectrogramLabels,
   StyledPlaylist,
   StyledTimeScale,
   TimeFormatSelect,
@@ -2752,7 +3160,7 @@ var TrackControlsWithDelete = ({
   TimescaleLoopRegion,
   Track,
   TrackControlsContext,
-  TrackControlsWithDelete,
+  TrackMenu,
   TrashIcon,
   VolumeDownIcon,
   VolumeUpIcon,