@waveform-playlist/ui-components 9.1.2 → 9.2.1

package/dist/index.d.mts

@@ -564,8 +564,13 @@ interface SpectrogramLabelsProps {
 declare const SpectrogramLabels: react__default.FC<SpectrogramLabelsProps>;
 
 interface SmartScaleProps {
-    readonly renderTimestamp?: (timeMs: number, pixelPosition: number) => ReactNode;
+    readonly renderTick?: (label: string, pixelPosition: number) => ReactNode;
 }
+declare function getScaleInfo(samplesPerPixel: number): {
+    marker: number;
+    bigStep: number;
+    smallStep: number;
+};
 declare const SmartScale: FunctionComponent<SmartScaleProps>;
 
 /**
@@ -609,13 +614,17 @@ interface TimeInputProps {
  */
 declare const TimeInput: react__default.FC<TimeInputProps>;
 
+interface PrecomputedTickData {
+    widthX: number;
+    canvasInfo: Map<number, number>;
+    timeMarkersWithPositions: Array<{
+        pix: number;
+        element: react__default.ReactNode;
+    }>;
+}
 interface TimeScaleProps {
     readonly theme?: DefaultTheme;
-    readonly duration: number;
-    readonly marker: number;
-    readonly bigStep: number;
-    readonly secondStep: number;
-    readonly renderTimestamp?: (timeMs: number, pixelPosition: number) => react__default.ReactNode;
+    readonly tickData: PrecomputedTickData;
 }
 interface TimeScalePropsWithTheme extends TimeScaleProps {
     readonly theme: DefaultTheme;
@@ -692,6 +701,28 @@ interface TrackMenuProps {
 }
 declare const TrackMenu: react__default.FC<TrackMenuProps>;
 
+type SnapTo = 'bar' | 'beat' | 'off';
+type ScaleMode = 'beats' | 'temporal';
+interface BeatsAndBarsContextValue {
+    bpm: number;
+    timeSignature: [number, number];
+    snapTo: SnapTo;
+    scaleMode: ScaleMode;
+    ticksPerBeat: number;
+    ticksPerBar: number;
+}
+interface BeatsAndBarsProviderProps {
+    bpm: number;
+    timeSignature: [number, number];
+    snapTo: SnapTo;
+    /** Which timescale to render. Defaults to `'beats'`. Set to `'temporal'` to
+     *  show minutes:seconds while keeping snap-to-grid active. */
+    scaleMode?: ScaleMode;
+    children: react__default.ReactNode;
+}
+declare function BeatsAndBarsProvider({ bpm, timeSignature, snapTo, scaleMode, children, }: BeatsAndBarsProviderProps): react_jsx_runtime.JSX.Element;
+declare function useBeatsAndBars(): BeatsAndBarsContextValue | null;
+
 type Props$1 = {
     children: ReactNode;
 };
@@ -843,6 +874,12 @@ declare const BaseControlButton: styled_components_dist_types.IStyledComponentBa
  * Styling is controlled via the theme, making it easy to adapt to different environments.
  */
 declare const BaseInput: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+/**
+ * BaseInputSmall - A smaller variant for compact layouts
+ */
+declare const BaseInputSmall: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>, "ref"> & {
+    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>> & string;
 
 /**
  * BaseLabel - A styled label component that uses theme values
@@ -863,6 +900,12 @@ declare const ScreenReaderOnly: styled_components_dist_types.IStyledComponentBas
  * This provides consistent styling across all select elements in the waveform playlist.
  */
 declare const BaseSelect: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>> & string;
+/**
+ * BaseSelectSmall - A smaller variant for compact layouts
+ */
+declare const BaseSelectSmall: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<styled_components.FastOmit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLSelectElement | 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<HTMLSelectElement> | null | undefined;
+}, never>> & string;
 
 /**
  * BaseSlider - Themed range input for volume controls, etc.
@@ -874,4 +917,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, ClipViewportOriginProvider, CloseButton, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, 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 };
+export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, 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, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type PrecomputedTickData, type RenderPlayheadFunction, type ScaleMode, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, 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, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };

package/dist/index.d.ts

@@ -564,8 +564,13 @@ interface SpectrogramLabelsProps {
 declare const SpectrogramLabels: react__default.FC<SpectrogramLabelsProps>;
 
 interface SmartScaleProps {
-    readonly renderTimestamp?: (timeMs: number, pixelPosition: number) => ReactNode;
+    readonly renderTick?: (label: string, pixelPosition: number) => ReactNode;
 }
+declare function getScaleInfo(samplesPerPixel: number): {
+    marker: number;
+    bigStep: number;
+    smallStep: number;
+};
 declare const SmartScale: FunctionComponent<SmartScaleProps>;
 
 /**
@@ -609,13 +614,17 @@ interface TimeInputProps {
  */
 declare const TimeInput: react__default.FC<TimeInputProps>;
 
+interface PrecomputedTickData {
+    widthX: number;
+    canvasInfo: Map<number, number>;
+    timeMarkersWithPositions: Array<{
+        pix: number;
+        element: react__default.ReactNode;
+    }>;
+}
 interface TimeScaleProps {
     readonly theme?: DefaultTheme;
-    readonly duration: number;
-    readonly marker: number;
-    readonly bigStep: number;
-    readonly secondStep: number;
-    readonly renderTimestamp?: (timeMs: number, pixelPosition: number) => react__default.ReactNode;
+    readonly tickData: PrecomputedTickData;
 }
 interface TimeScalePropsWithTheme extends TimeScaleProps {
     readonly theme: DefaultTheme;
@@ -692,6 +701,28 @@ interface TrackMenuProps {
 }
 declare const TrackMenu: react__default.FC<TrackMenuProps>;
 
+type SnapTo = 'bar' | 'beat' | 'off';
+type ScaleMode = 'beats' | 'temporal';
+interface BeatsAndBarsContextValue {
+    bpm: number;
+    timeSignature: [number, number];
+    snapTo: SnapTo;
+    scaleMode: ScaleMode;
+    ticksPerBeat: number;
+    ticksPerBar: number;
+}
+interface BeatsAndBarsProviderProps {
+    bpm: number;
+    timeSignature: [number, number];
+    snapTo: SnapTo;
+    /** Which timescale to render. Defaults to `'beats'`. Set to `'temporal'` to
+     *  show minutes:seconds while keeping snap-to-grid active. */
+    scaleMode?: ScaleMode;
+    children: react__default.ReactNode;
+}
+declare function BeatsAndBarsProvider({ bpm, timeSignature, snapTo, scaleMode, children, }: BeatsAndBarsProviderProps): react_jsx_runtime.JSX.Element;
+declare function useBeatsAndBars(): BeatsAndBarsContextValue | null;
+
 type Props$1 = {
     children: ReactNode;
 };
@@ -843,6 +874,12 @@ declare const BaseControlButton: styled_components_dist_types.IStyledComponentBa
  * Styling is controlled via the theme, making it easy to adapt to different environments.
  */
 declare const BaseInput: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+/**
+ * BaseInputSmall - A smaller variant for compact layouts
+ */
+declare const BaseInputSmall: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<styled_components.FastOmit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>, "ref"> & {
+    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>> & string;
 
 /**
  * BaseLabel - A styled label component that uses theme values
@@ -863,6 +900,12 @@ declare const ScreenReaderOnly: styled_components_dist_types.IStyledComponentBas
  * This provides consistent styling across all select elements in the waveform playlist.
  */
 declare const BaseSelect: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>> & string;
+/**
+ * BaseSelectSmall - A smaller variant for compact layouts
+ */
+declare const BaseSelectSmall: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<Omit<styled_components.FastOmit<react.DetailedHTMLProps<react.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLSelectElement | 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<HTMLSelectElement> | null | undefined;
+}, never>> & string;
 
 /**
  * BaseSlider - Themed range input for volume controls, etc.
@@ -874,4 +917,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, ClipViewportOriginProvider, CloseButton, Controls$1 as Controls, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, 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 };
+export { AudioPosition, type AudioPositionProps, AutomaticScrollCheckbox, type AutomaticScrollCheckboxProps, BaseButton, BaseCheckbox, BaseCheckboxLabel, BaseCheckboxWrapper, BaseControlButton, BaseInput, BaseInputSmall, BaseLabel, BaseSelect, BaseSelectSmall, BaseSlider, type BeatsAndBarsContextValue, BeatsAndBarsProvider, type BeatsAndBarsProviderProps, 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, DevicePixelRatioProvider, DotsIcon, type DragHandleProps, FadeOverlay, type FadeOverlayProps, type GradientStop, Header, InlineLabel, LoopRegion, LoopRegionMarkers, type LoopRegionMarkersProps, type LoopRegionProps, MasterVolumeControl, type MasterVolumeControlProps, PianoRollChannel, type PianoRollChannelProps, Playhead, type PlayheadProps, PlayheadWithMarker, Playlist, PlaylistErrorBoundary, type PlaylistErrorBoundaryProps, PlaylistInfoContext, type PlaylistProps, PlayoutProvider, type PrecomputedTickData, type RenderPlayheadFunction, type ScaleMode, ScreenReaderOnly, type ScrollViewport, ScrollViewportProvider, Selection, type SelectionProps, SelectionTimeInputs, type SelectionTimeInputsProps, Slider, SliderWrapper, SmartChannel, type SmartChannelProps, SmartScale, type SmartScaleProps, type SnapTo, 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, getScaleInfo, isWaveformGradient, parseTime, pixelsToSamples, pixelsToSeconds, samplesToPixels, samplesToSeconds, secondsToPixels, secondsToSamples, useBeatsAndBars, useClipViewportOrigin, useDevicePixelRatio, usePlaylistInfo, usePlayoutStatus, usePlayoutStatusUpdate, useScrollViewport, useScrollViewportSelector, useTheme, useTrackControls, useVisibleChunkIndices, waveformColorToCss };