@waveform-playlist/ui-components 9.4.0 → 9.5.0

package/dist/index.mjs

@@ -334,7 +334,7 @@ var AutomaticScrollCheckbox = ({
 };
 
 // src/components/Channel.tsx
-import { useEffect as useEffect3 } from "react";
+import { useLayoutEffect as useLayoutEffect2 } from "react";
 import styled9 from "styled-components";
 
 // src/wfpl-theme.ts
@@ -780,7 +780,7 @@ var Channel = (props) => {
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
   const clipOriginX = useClipViewportOrigin();
   const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH, clipOriginX);
-  useEffect3(() => {
+  useLayoutEffect2(() => {
     const step = barWidth + barGap;
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
       const globalPixelOffset = canvasIdx * MAX_CANVAS_WIDTH;
@@ -1296,7 +1296,7 @@ var MasterVolumeControl = ({
 };
 
 // src/components/PianoRollChannel.tsx
-import { useEffect as useEffect4, useMemo as useMemo2 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo2 } from "react";
 import styled15 from "styled-components";
 import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH2 } from "@waveform-playlist/core";
 import { jsx as jsx12 } from "react/jsx-runtime";
@@ -1352,7 +1352,7 @@ var PianoRollChannel = ({
     return { minMidi: Math.max(0, min - 1), maxMidi: Math.min(127, max + 1) };
   }, [midiNotes]);
   const color = isSelected ? selectedNoteColor : noteColor;
-  useEffect4(() => {
+  useLayoutEffect3(() => {
     const noteRange = maxMidi - minMidi + 1;
     const noteHeight = Math.max(2, waveHeight / noteRange);
     const pixelsPerSecond = sampleRate / samplesPerPixel;
@@ -1421,7 +1421,7 @@ var PianoRollChannel = ({
 };
 
 // src/components/Playhead.tsx
-import { useRef as useRef3, useEffect as useEffect5 } from "react";
+import { useRef as useRef3, useEffect as useEffect3 } from "react";
 import styled16 from "styled-components";
 import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 var PlayheadLine = styled16.div.attrs((props) => ({
@@ -1483,7 +1483,7 @@ var PlayheadWithMarker = ({
 }) => {
   const containerRef = useRef3(null);
   const animationFrameRef = useRef3(null);
-  useEffect5(() => {
+  useEffect3(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         let time;
@@ -1528,7 +1528,7 @@ var PlayheadWithMarker = ({
     getAudioContextTime,
     getPlaybackTime
   ]);
-  useEffect5(() => {
+  useEffect3(() => {
     if (!isPlaying && containerRef.current) {
       const time = currentTimeRef.current ?? 0;
       const pos = time * sampleRate / samplesPerPixel + controlsOffset;
@@ -2013,10 +2013,10 @@ var TimescaleLoopRegion = ({
 };
 
 // src/components/SelectionTimeInputs.tsx
-import { useEffect as useEffect7, useState as useState3 } from "react";
+import { useEffect as useEffect5, useState as useState3 } from "react";
 
 // src/components/TimeInput.tsx
-import { useEffect as useEffect6, useState as useState2 } from "react";
+import { useEffect as useEffect4, useState as useState2 } from "react";
 
 // src/utils/timeFormat.ts
 function clockFormat(seconds, decimals) {
@@ -2077,7 +2077,7 @@ var TimeInput = ({
   readOnly = false
 }) => {
   const [displayValue, setDisplayValue] = useState2("");
-  useEffect6(() => {
+  useEffect4(() => {
     const formatted = formatTime(value, format);
     setDisplayValue(formatted);
   }, [value, format, id]);
@@ -2124,7 +2124,7 @@ var SelectionTimeInputs = ({
   className
 }) => {
   const [timeFormat, setTimeFormat] = useState3("hh:mm:ss.uuu");
-  useEffect7(() => {
+  useEffect5(() => {
     const timeFormatSelect = document.querySelector(".time-format");
     const handleFormatChange = () => {
       if (timeFormatSelect) {
@@ -2297,7 +2297,7 @@ var usePlayoutStatus = () => useContext8(PlayoutStatusContext);
 var usePlayoutStatusUpdate = () => useContext8(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
-import { useRef as useRef6, useEffect as useEffect8 } from "react";
+import { useRef as useRef6, useEffect as useEffect6, useLayoutEffect as useLayoutEffect4 } from "react";
 import styled20 from "styled-components";
 import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH3 } from "@waveform-playlist/core";
 import { jsx as jsx23 } from "react/jsx-runtime";
@@ -2363,13 +2363,13 @@ var SpectrogramChannel = ({
   const maxF = maxFrequency ?? (data ? data.sampleRate / 2 : 22050);
   const scaleFn = frequencyScaleFn ?? LINEAR_FREQUENCY_SCALE;
   const hasCustomFrequencyScale = Boolean(frequencyScaleFn);
-  useEffect8(() => {
+  useEffect6(() => {
     workerApiRef.current = workerApi;
   }, [workerApi]);
-  useEffect8(() => {
+  useEffect6(() => {
     onCanvasesReadyRef.current = onCanvasesReady;
   }, [onCanvasesReady]);
-  useEffect8(() => {
+  useEffect6(() => {
     if (!isWorkerMode) return;
     const currentWorkerApi = workerApiRef.current;
     if (!currentWorkerApi || !clipId) return;
@@ -2432,7 +2432,7 @@ var SpectrogramChannel = ({
       onCanvasesReadyRef.current?.(allIds, allWidths);
     }
   }, [canvasMapRef, isWorkerMode, clipId, channelIndex, length, visibleChunkIndices]);
-  useEffect8(() => {
+  useEffect6(() => {
     return () => {
       const api = workerApiRef.current;
       if (!api) return;
@@ -2446,7 +2446,7 @@ var SpectrogramChannel = ({
       registeredIdsRef.current = [];
     };
   }, []);
-  useEffect8(() => {
+  useLayoutEffect4(() => {
     if (isWorkerMode || !data) return;
     const {
       frequencyBinCount,
@@ -2695,7 +2695,7 @@ var SmartChannel = ({
 };
 
 // src/components/SpectrogramLabels.tsx
-import { useRef as useRef7, useLayoutEffect as useLayoutEffect2 } from "react";
+import { useRef as useRef7, useLayoutEffect as useLayoutEffect5 } from "react";
 import styled21 from "styled-components";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var LABELS_WIDTH = 72;
@@ -2752,7 +2752,7 @@ var SpectrogramLabels = ({
   const spectrogramHeight = renderMode === "both" ? Math.floor(waveHeight / 2) : waveHeight;
   const totalHeight = numChannels * waveHeight;
   const clipHeaderOffset = hasClipHeaders ? 22 : 0;
-  useLayoutEffect2(() => {
+  useLayoutEffect5(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -2810,7 +2810,7 @@ import React19, { useContext as useContext10, useMemo as useMemo4 } from "react"
 import styled23 from "styled-components";
 
 // src/components/TimeScale.tsx
-import { useLayoutEffect as useLayoutEffect3, useContext as useContext9 } from "react";
+import { useLayoutEffect as useLayoutEffect6, useContext as useContext9 } from "react";
 import styled22, { withTheme as withTheme2 } from "styled-components";
 import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH4 } from "@waveform-playlist/core";
 import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -2865,7 +2865,7 @@ var TimeScale = (props) => {
   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);
-  useLayoutEffect3(() => {
+  useLayoutEffect6(() => {
     for (const [chunkIdx, canvas] of canvasMapRef.current.entries()) {
       const ctx = canvas.getContext("2d");
       if (!ctx) continue;
@@ -3358,7 +3358,7 @@ var SliderWrapper = styled32.label`
 `;
 
 // src/components/TrackMenu.tsx
-import React20, { useState as useState6, useEffect as useEffect9, useRef as useRef8, useCallback as useCallback5 } from "react";
+import React20, { useState as useState6, useEffect as useEffect7, useRef as useRef8, useCallback as useCallback5 } from "react";
 import { createPortal } from "react-dom";
 import styled33 from "styled-components";
 import { jsx as jsx35, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -3424,7 +3424,7 @@ var TrackMenu = ({ items: itemsProp }) => {
     }
     setDropdownPos({ top, left });
   }, []);
-  useEffect9(() => {
+  useEffect7(() => {
     if (!open) return;
     updatePosition();
     const rafId = requestAnimationFrame(() => updatePosition());
@@ -3438,7 +3438,7 @@ var TrackMenu = ({ items: itemsProp }) => {
       window.removeEventListener("resize", onResize);
     };
   }, [open, updatePosition]);
-  useEffect9(() => {
+  useEffect7(() => {
     if (!open) return;
     const handleClick = (e) => {
       const target = e.target;