@waveform-playlist/ui-components 6.0.0 → 6.0.1

package/dist/index.d.mts

@@ -420,8 +420,10 @@ interface SpectrogramWorkerCanvasApi {
     unregisterCanvas(canvasId: string): void;
 }
 interface SpectrogramChannelProps {
-    /** Channel index (0 = first, 1 = second, etc.) */
+    /** Visual position index — used for CSS positioning (top offset). */
     index: number;
+    /** Audio channel index for canvas ID construction. Defaults to `index` when omitted. */
+    channelIndex?: number;
     /** Computed spectrogram data (not needed when workerApi is provided) */
     data?: SpectrogramData;
     /** Width in CSS pixels */

package/dist/index.d.ts

@@ -420,8 +420,10 @@ interface SpectrogramWorkerCanvasApi {
     unregisterCanvas(canvasId: string): void;
 }
 interface SpectrogramChannelProps {
-    /** Channel index (0 = first, 1 = second, etc.) */
+    /** Visual position index — used for CSS positioning (top offset). */
     index: number;
+    /** Audio channel index for canvas ID construction. Defaults to `index` when omitted. */
+    channelIndex?: number;
     /** Computed spectrogram data (not needed when workerApi is provided) */
     data?: SpectrogramData;
     /** Width in CSS pixels */

package/dist/index.js

@@ -2033,6 +2033,7 @@ function defaultGetColorMap() {
 }
 var SpectrogramChannel = ({
   index,
+  channelIndex: channelIndexProp,
   data,
   length,
   waveHeight,
@@ -2046,6 +2047,7 @@ var SpectrogramChannel = ({
   clipId,
   onCanvasesReady
 }) => {
+  const channelIndex = channelIndexProp ?? index;
   const canvasesRef = (0, import_react12.useRef)([]);
   const registeredIdsRef = (0, import_react12.useRef)([]);
   const transferredCanvasesRef = (0, import_react12.useRef)(/* @__PURE__ */ new WeakSet());
@@ -2070,7 +2072,7 @@ var SpectrogramChannel = ({
       const canvas = canvases2[i];
       if (!canvas) continue;
       if (transferredCanvasesRef.current.has(canvas)) continue;
-      const canvasId = `${clipId}-ch${index}-chunk${i}`;
+      const canvasId = `${clipId}-ch${channelIndex}-chunk${i}`;
       try {
         const offscreen = canvas.transferControlToOffscreen();
         workerApi.registerCanvas(canvasId, offscreen);
@@ -2092,7 +2094,7 @@ var SpectrogramChannel = ({
       }
       registeredIdsRef.current = [];
     };
-  }, [isWorkerMode, clipId, index, length]);
+  }, [isWorkerMode, clipId, channelIndex, length]);
   const lut = colorLUT ?? defaultGetColorMap();
   const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
   const scaleFn = frequencyScaleFn ?? ((f, minF, maxF2) => (f - minF) / (maxF2 - minF));
@@ -2244,6 +2246,7 @@ var SmartChannel = ({
         SpectrogramChannel,
         {
           index: props.index * 2,
+          channelIndex: props.index,
           data: spectrogramData,
           length: props.length,
           waveHeight: halfHeight,