@waveform-playlist/ui-components 7.1.1 → 7.1.3

package/dist/index.d.mts

@@ -669,13 +669,6 @@ interface TrackMenuProps {
 }
 declare const TrackMenu: react__default.FC<TrackMenuProps>;
 
-/**
- * Maximum width in CSS pixels for a single canvas chunk.
- * Canvas elements are split into chunks of this width to enable
- * horizontal virtual scrolling — only visible chunks are mounted.
- */
-declare const MAX_CANVAS_WIDTH = 1000;
-
 type Props$1 = {
     children: ReactNode;
 };
@@ -738,7 +731,7 @@ type ScrollViewportProviderProps = {
     containerRef: react__default.RefObject<HTMLElement | null>;
     children: ReactNode;
 };
-declare const ScrollViewportProvider: ({ containerRef, children, }: ScrollViewportProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ScrollViewportProvider: ({ containerRef, children }: ScrollViewportProviderProps) => react_jsx_runtime.JSX.Element;
 /**
  * Full viewport hook — re-renders on every viewport update (after threshold).
  * Use useScrollViewportSelector() instead when you only need derived state.
@@ -753,6 +746,37 @@ declare const useScrollViewport: () => ScrollViewport | null;
  * the set of visible chunks actually changes, not on every scroll update.
  */
 declare function useScrollViewportSelector<T>(selector: (viewport: ScrollViewport | null) => T): T;
+/**
+ * Returns the indices of canvas chunks that are currently visible (plus overscan buffer).
+ * Only triggers a re-render when the set of visible chunks changes, not on every scroll pixel.
+ *
+ * @param totalWidth Total width in CSS pixels of the content being chunked.
+ * @param chunkWidth Width of each chunk in CSS pixels (typically MAX_CANVAS_WIDTH, 1000).
+ * @param originX Pixel offset of this content's origin within the global scroll container.
+ *   Clips not starting at position 0 must provide their left offset so chunk visibility
+ *   is computed in global viewport coordinates. Defaults to 0 (e.g., TimeScale).
+ */
+declare function useVisibleChunkIndices(totalWidth: number, chunkWidth: number, originX?: number): number[];
+
+interface ClipViewportOriginProviderProps {
+    originX: number;
+    children: ReactNode;
+}
+/**
+ * Provides the clip's pixel-space origin (left offset) to descendant Channel
+ * and SpectrogramChannel components so they can convert local chunk coordinates
+ * to global viewport coordinates for virtual scrolling visibility checks.
+ *
+ * Without this, chunks are compared against the viewport in local (clip-relative)
+ * space, which causes them to be culled incorrectly when a clip doesn't start
+ * at position 0 on the timeline.
+ */
+declare const ClipViewportOriginProvider: ({ originX, children, }: ClipViewportOriginProviderProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Returns the clip's pixel-space left offset within the timeline.
+ * Defaults to 0 when used outside a ClipViewportOriginProvider (e.g., TimeScale).
+ */
+declare const useClipViewportOrigin: () => number;
 
 declare function samplesToSeconds(samples: number, sampleRate: number): number;
 declare function secondsToSamples(seconds: number, sampleRate: number): number;
@@ -827,4 +851,4 @@ declare const BaseSlider: styled_components_dist_types.IStyledComponentBase<"web
     ref?: ((instance: HTMLInputElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLInputElement> | null | undefined;
 }>, never>, never>> & string;
 
-export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseLabel, BaseSelect, BaseSlider, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, CloseButton, Controls$1 as Controls, type ControlsWrapperProps, DevicePixelRatioProvider, DotsIcon, type DragHandleProps$1 as DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MAX_CANVAS_WIDTH, MasterVolumeControl, type MasterVolumeControlProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type RenderPlayheadFunction, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, type SpectrogramWorkerCanvasApi, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, waveformColorToCss };
+export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseLabel, BaseSelect, BaseSlider, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, Controls$1 as Controls, type ControlsWrapperProps, DevicePixelRatioProvider, DotsIcon, type DragHandleProps$1 as DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type RenderPlayheadFunction, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, type SpectrogramWorkerCanvasApi, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };

package/dist/index.d.ts

@@ -669,13 +669,6 @@ interface TrackMenuProps {
 }
 declare const TrackMenu: react__default.FC<TrackMenuProps>;
 
-/**
- * Maximum width in CSS pixels for a single canvas chunk.
- * Canvas elements are split into chunks of this width to enable
- * horizontal virtual scrolling — only visible chunks are mounted.
- */
-declare const MAX_CANVAS_WIDTH = 1000;
-
 type Props$1 = {
     children: ReactNode;
 };
@@ -738,7 +731,7 @@ type ScrollViewportProviderProps = {
     containerRef: react__default.RefObject<HTMLElement | null>;
     children: ReactNode;
 };
-declare const ScrollViewportProvider: ({ containerRef, children, }: ScrollViewportProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ScrollViewportProvider: ({ containerRef, children }: ScrollViewportProviderProps) => react_jsx_runtime.JSX.Element;
 /**
  * Full viewport hook — re-renders on every viewport update (after threshold).
  * Use useScrollViewportSelector() instead when you only need derived state.
@@ -753,6 +746,37 @@ declare const useScrollViewport: () => ScrollViewport | null;
  * the set of visible chunks actually changes, not on every scroll update.
  */
 declare function useScrollViewportSelector<T>(selector: (viewport: ScrollViewport | null) => T): T;
+/**
+ * Returns the indices of canvas chunks that are currently visible (plus overscan buffer).
+ * Only triggers a re-render when the set of visible chunks changes, not on every scroll pixel.
+ *
+ * @param totalWidth Total width in CSS pixels of the content being chunked.
+ * @param chunkWidth Width of each chunk in CSS pixels (typically MAX_CANVAS_WIDTH, 1000).
+ * @param originX Pixel offset of this content's origin within the global scroll container.
+ *   Clips not starting at position 0 must provide their left offset so chunk visibility
+ *   is computed in global viewport coordinates. Defaults to 0 (e.g., TimeScale).
+ */
+declare function useVisibleChunkIndices(totalWidth: number, chunkWidth: number, originX?: number): number[];
+
+interface ClipViewportOriginProviderProps {
+    originX: number;
+    children: ReactNode;
+}
+/**
+ * Provides the clip's pixel-space origin (left offset) to descendant Channel
+ * and SpectrogramChannel components so they can convert local chunk coordinates
+ * to global viewport coordinates for virtual scrolling visibility checks.
+ *
+ * Without this, chunks are compared against the viewport in local (clip-relative)
+ * space, which causes them to be culled incorrectly when a clip doesn't start
+ * at position 0 on the timeline.
+ */
+declare const ClipViewportOriginProvider: ({ originX, children, }: ClipViewportOriginProviderProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Returns the clip's pixel-space left offset within the timeline.
+ * Defaults to 0 when used outside a ClipViewportOriginProvider (e.g., TimeScale).
+ */
+declare const useClipViewportOrigin: () => number;
 
 declare function samplesToSeconds(samples: number, sampleRate: number): number;
 declare function secondsToSamples(seconds: number, sampleRate: number): number;
@@ -827,4 +851,4 @@ declare const BaseSlider: styled_components_dist_types.IStyledComponentBase<"web
     ref?: ((instance: HTMLInputElement | null) => void | react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react.RefObject<HTMLInputElement> | null | undefined;
 }>, never>, never>> & string;
 
-export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseLabel, BaseSelect, BaseSlider, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, CloseButton, Controls$1 as Controls, type ControlsWrapperProps, DevicePixelRatioProvider, DotsIcon, type DragHandleProps$1 as DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MAX_CANVAS_WIDTH, MasterVolumeControl, type MasterVolumeControlProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type RenderPlayheadFunction, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, type SpectrogramWorkerCanvasApi, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, waveformColorToCss };
+export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseLabel, BaseSelect, BaseSlider, Button, ButtonGroup, CLIP_BOUNDARY_WIDTH, CLIP_BOUNDARY_WIDTH_TOUCH, CLIP_HEADER_HEIGHT, Channel, type ChannelProps, Clip, ClipBoundary, type ClipBoundaryProps, ClipHeader, ClipHeaderPresentational, type ClipHeaderPresentationalProps, type ClipHeaderProps, type ClipProps, ClipViewportOriginProvider, CloseButton, Controls$1 as Controls, type ControlsWrapperProps, DevicePixelRatioProvider, DotsIcon, type DragHandleProps$1 as DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type RenderPlayheadFunction, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, SpectrogramChannel, type SpectrogramChannelProps, SpectrogramLabels, type SpectrogramLabelsProps, type SpectrogramWorkerCanvasApi, StyledPlaylist, StyledTimeScale, type TimeFormat, TimeFormatSelect, type TimeFormatSelectProps, TimeInput, type TimeInputProps, TimeScale, type TimeScaleProps, TimescaleLoopRegion, type TimescaleLoopRegionProps, Track, TrackControlsContext, TrackMenu, type TrackMenuItem, type TrackMenuProps, type TrackProps, TrashIcon, VolumeDownIcon, VolumeUpIcon, type WaveformColor, type WaveformDrawMode, type WaveformGradient, type WaveformPlaylistTheme, darkTheme, defaultTheme, formatTime, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };