@techsquidtv/canvas-timeline

Returns clips that intersect the current playhead time. A clip is active when the playhead is at or after `timelineStart` and before `timelineEnd`. Clips on hidden tracks, muted tracks, and clips marked `disabled` are omitted. The returned array contains clips only; read the timeline state when you also need the containing track id.

Returns active timeline layers at a timeline time. The hook is collection-first: each named layer returns every matching active clip in stable track order. `primary` is only a convenience first match.

Subscribes to live marker proximity derived from the current playhead. Use this focused live hook for readouts and marker navigation UI that should update during playback or scrubbing. Use `useTimelineMarkers` for ordinary marker lists and marker editing commands.

Reads the transient edit-preview state for a clip. Use this for custom clip UIs that need to render live editing affordances, such as overwrite cut indicators, without depending on internal engine flags.

Subscribes to real-time playback events (enter, update, leave) for a specific clip as the global playhead crosses the clip's boundary timestamps.

Derives geometry and controlled update helpers for a generic range scrollbar.

Reads the timeline engine and synchronized state from React context. Use this hook inside components wrapped by `TimelineProvider` when you need to call imperative engine commands and read the latest React-rendered state in the same component. Prefer narrower hooks such as `useTimelineState`, `useTimelinePlayback`, or `useTimelineClips` when a component only needs one slice of timeline behavior.

Wires an app-owned canvas to timeline geometry and redraw events. Drawing is imperative and scheduled through requestAnimationFrame so dense visual layers do not push scroll or zoom updates through React state.

Provides access to clipboard operations for copying, cutting, and pasting clips.

Headless clip body drag behavior shared by canvas and custom timeline UIs.

Subscribes to live cross-track clip drop feedback. This is a focused live interaction hook intended for custom drag affordances.

Provides constant-DOM keyboard navigation and commands for canvas clips. The hook flattens canvas-rendered clips into a navigable model without mounting one DOM element per clip. Consumers can use the returned `focusTargetProps` on a single focused element, or wire the navigation and edit commands into their own shortcut system and selected-clip inspector.

Returns viewport-space geometry for every timeline clip. The hook subscribes to geometry-affecting timeline events and intentionally does not subscribe to playhead-only updates.

Provides the canonical clip collection and editing actions for React editor UI.

Exposes command-layer edit APIs for React product chrome. The hook is a thin adapter over `TimelineEngine` command methods; it does not implement edit math or range mutation rules in React.

Subscribes to live edit impacts produced by active timeline interactions. This is a live interaction hook: it can update during drag and trim gestures. Use it for custom headless UI affordances that show which clips are trimmed, split, or removed by the active edit.

Owns local edit-mode state for product toolbar chrome. The selected mode does not mutate engine state by itself. Compose it with `useTimelineEditCommands` to build and preview typed edit commands.

Subscribes to live command-layer edit previews. This is a focused live hook. It updates when command previews change and does not broaden provider state with drag-time edit consequences.

Subscribes to a typed TimelineEngine event with a React-safe latest handler. The hook keeps the event subscription stable while updating the callback ref every render, avoiding stale closures without resubscribing for handler-only changes.

Provides canonical undo/redo history access for timeline editor chrome.

Adapts timeline In/Out points to a Base UI-compatible range slider. The hook keeps loop or export boundaries in sync with `TimelineEngine` `inPoint` and `outPoint` values while returning semantic labels and `aria-valuetext` strings for each thumb. `Timeline.RangeSelector.Root` uses this hook internally; consumers can call it directly when composing their own Base UI slider surface.

Provides focus-scoped timeline keyboard shortcuts. The hook never installs global listeners. It handles shortcuts only from the element that spreads `scopeProps` or one of that element's descendants.

Headless Bezier curve handle drag behavior shared by package and custom timeline UIs.

Reads timeline keyframe curve geometry and exposes Bezier easing commands.

Headless keyframe drag behavior shared by canvas and custom timeline UIs.

Reads timeline keyframe geometry and exposes canonical keyframe commands.

Accesses and manages bookmark/annotation pins (markers). This canonical marker hook does not subscribe to live playhead ticks. Compose it with `useActiveMarkers` when UI needs marker proximity at the current playhead.

Coordinates timeline playback with an external media clock. The hook is media-library agnostic. Apps provide a clock and a single layer sync callback while the hook advances the TimelineEngine playhead and decides when active layer clips need to be resynchronized.

High-level synchronization for external media surfaces. The hook remains media-library agnostic: apps provide an adapter for decoding, rendering, and audio scheduling, while the hook handles active layer lookup, first-content seeking, external-clock playback, rate changes, and pause state.

Adapts horizontal timeline scroll to a Base UI-compatible scalar slider. Use this hook when an application wants a semantic pan control for `TimelineEngine.scrollLeft`. It overlaps with `useTimelineViewport` only at the engine command layer; this hook adds slider props, bounds, and formatted ARIA value text for custom UI primitives.

Provides canonical transport, playhead command, and in/out range commands. Compose this with `useTimelinePlayheadTime` when a component also needs a live clock readout.

Adapts the timeline playhead to a Base UI-compatible scalar slider. Use this hook when an application wants its own playhead scrubber, time field, or transport control while preserving the shared `TimelineEngine` state. It composes with `useTimelinePlayback`, which exposes imperative transport commands without subscribing to live playhead ticks.

Hook to subscribe directly to playhead scrubbing changes. Bypasses root-level context state updates to keep scrubbing high-performance.

Adapts timeline In/Out points to command-layer range selection. The hook treats a complete In/Out pair as the selected edit range and delegates range mutations to `useTimelineEditCommands`.

Returns shared viewport-space ruler ticks for DOM and custom timeline chrome. The hook subscribes to geometry-affecting timeline events and intentionally does not subscribe to playhead-only updates.

Hook to subscribe directly to scroll left position changes. Bypasses root-level context state updates for smooth scroll navigation.

Hook to subscribe directly to scroll top position changes. Bypasses root-level context state updates for smooth vertical navigation.

Provides the canonical selected clip/track model for timeline editor chrome.

Provides the canonical snapping state and commands for editor UI.

Reads the current synchronized timeline state. This is a render-focused shortcut for components that need track, playhead, zoom, scroll, marker, or playback state without calling engine methods. The returned value updates when `TimelineProvider` receives engine state events.

Imperatively positions a low-count DOM affordance at a timeline time. The returned transform is viewport-space: `seconds * zoomScale - scrollLeft`. Use it for standalone affordances such as the playhead grabber. Range controls that already live inside a transformed timeline overlay should use their local control primitive positioning instead.

Accesses one timeline track with canvas-aligned row geometry and commands.

Builds headless track drop targets for cross-track clip movement.

Adapts one timeline track into DOM-ready track header state.

Adapts one timeline track into a semantic lock toggle button.

Accesses and manages the list of timeline tracks.

Adds formatted accessibility values to the vertical timeline scrollbar adapter.

Adapts generic range scrollbar state to the timeline's vertical track viewport. The hook derives a controlled `{ start, end }` value from `scrollTop`, `viewportHeight`, and track-stack bounds. Thumb changes pan the engine-owned vertical scroll position so canvas rows and external DOM chrome can stay in sync. Handle changes scale expanded track heights, giving the range handles a vertical zoom behavior that matches the horizontal viewport scrollbar's shape.

Provides canonical viewport metrics and setters for custom timeline chrome.

Adds formatted accessibility values to the timeline viewport range adapter. This hook builds on `useTimelineViewportScrollbar`, preserving the same lean viewport scrollbar geometry and keyboard behavior while adding `aria-valuetext` formatting for the thumb and resize handles. Use it with the generic `RangeScrollbar` primitive when composing a custom viewport control.

Adapts generic range scrollbar state to the current timeline viewport. The hook derives a controlled `{ start, end }` value from timeline `scrollLeft`, `zoomScale`, `viewportWidth`, and content duration. Thumb changes pan the engine, while handle changes update zoom and then restore the requested range start.

Returns viewport-intersecting timeline clips with clipped time/source ranges. This is the preferred hook for custom DOM clip renderers and custom canvas layers that only need visible or near-visible clips.

Adapts timeline zoom scale to a Base UI-compatible scalar slider. Use this hook when a product toolbar needs a focused, semantic zoom control rather than broad viewport commands from `useTimelineViewport`. The returned root props mutate `TimelineEngine.zoomScale`; thumb props provide the default label and formatted `aria-valuetext`.

Hook to subscribe directly to zoom changes. Bypasses root-level context state updates for low-latency zoom interaction.

Binary-searchable timeline snap target index.

The central orchestrator and coordinator for the high-performance timeline editor. Maintains state (tracks, clips, markers, playhead position, zoom scale, scrolls, snaps), builds dynamic snap indexes for magnetic snap guidance, handles split and edit actions, and publishes state events to trigger low-latency canvas renderings and lightweight React layouts.

A general, generic type-safe event emitter class. Extended by components needing typed event publishing and subscription contracts.

Clip that is active at a timeline time, including its mapped source time.

Filters for selecting active clips at a timeline time.

Options for selecting active timeline layers at a timeline time. Use this when integrations need named layers such as `visuals`, `audio`, `subtitles`, or `effects` instead of one flat active-clip list. The same active clip can match more than one layer.

Active timeline layer lookup result. Results include every active clip matched by the requested selectors plus convenience `primary` entries for apps that only need the first match in each layer. Each `ActiveClip` includes mapped source time and source range data for preview and playback synchronization.

Renderer setup or worker failure details.

Props for the timeline canvas renderer layer.

Diagnostic timing details emitted after a canvas renderer draw pass.

Represents an individual media clip node positioned at a specific timeline interval.

Payload emitted by `clip:created` for committed clip creation.

Details passed to a clip double-click or double-tap callback.

Transient edit-preview state attached to clips while an interaction is active. This state is not intended to be persisted with project data. UI layers can use it to render live editing affordances such as overwrite cut indicators.

Viewport-space pointer query for timeline clip hit testing.

Hit-test result for a clip pointer target.

Props for the delegated clip interaction layer.

Keyframe add/update event payload.

Keyframe removal event payload.

Keyframe selection change event payload.

Live clip movement event payload.

Event payload emitted when the playhead enters, updates within, or leaves a clip.

Payload emitted by `clip:removed` for committed clip removal.

Live clip resizing event payload.

Clip selection change event payload.

Live clip slip event payload.

Persistent snap settings for one clip.

Source-media interval covered by a timeline clip.

Payload emitted by `clip:split` for committed clip split.

Viewport-space rectangle for a clip and its containing track.

Central event mapping definition for all engine events.

Undo/redo history state change event payload.

Selection in/out point boundary change event payload.

Props for the focus-scoped timeline keyboard shortcut wrapper.

Details passed to a Bezier curve handle double-click or double-tap callback.

Props for the delegated Bezier curve interaction layer.

Details passed to a keyframe keyboard delete callback.

Details passed to a keyframe double-click or double-tap callback.

Props for the delegated keyframe interaction layer.

Represents a bookmark or annotation pin on the timeline's top time ruler.

Marker change event payload (add, remove, update).

Persistent snap settings for one marker.

Options for parsing editable timecode text into `RationalTime`.

Options for starting timeline playback.

Props for the interactive playhead scrub area.

Props for the draggable playhead handle.

Change metadata emitted by Base UI range slider interactions.

Context passed to a range scrollbar `aria-valuetext` formatter.

Props for a range scrollbar resize handle.

Props for the controlled range scrollbar root.

Props for the draggable range scrollbar thumb.

Controlled numeric range represented by a range scrollbar. `start` and `end` use the caller's domain units. For a timeline adapter those units might be seconds; for a chart they might be indexes, prices, or pixels.

Details passed with a controlled range scrollbar value change.

Render-prop payload for custom range selector grabber children.

Props for the high-level timeline range selector overlay.

Props for the RangeSelector Root component.

Stores a timeline time as integer ticks at a fixed rate.

Controls which built-in timeline boundaries are indexed as magnetic snap targets.

Exact source-frame timestamp returned by a media integration.

App or media-player supplied exact source-frame resolver.

Details passed when a `TimecodeField` commits a valid value.

Props for the temporary typed timecode editor.

Props for the compact inline timecode editing root.

Props for the compact displayed timecode value.

Options for formatting a seconds value into editable timecode text.

Props for the timecode text input primitive. Extends Base UI `Input` props, so controlled and uncontrolled React input patterns both work. Use `onValueChange` for the current text value as the user types, or `onChange` when composing with native form handlers. By default it renders as a plain text input, disables browser autocomplete, and disables spellcheck so punctuation-heavy values such as `1:02:03.04` stay visually stable. Pass explicit native input props when a form needs different behavior.

Options for parsing editable timecode text into seconds.

Render-prop payload for custom draggable time grabber children.

Context passed to a custom canvas layer draw callback.

Imperative handle returned by `useTimelineCanvasLayer`.

Props for the package custom canvas layer component.

Viewport metrics supplied to a custom canvas layer draw callback.

Pointer data needed to update a clip body drag.

Pointer data needed to begin a clip body drag.

Transient feedback for a live cross-track clip drag.

Flattened clip metadata shared by core geometry APIs, React hooks, and custom renderers.

Options for moving a clip in time and optionally into another track.

Result metadata for a committed or previewed clip move.

Options for constant-DOM canvas clip navigation.

Clip entry with viewport geometry and editing/display state.

Consistent result returned by React hook command APIs.

Interface representing the context bundle of the timeline provider.

Cubic Bezier easing control points used by Bezier keyframe interpolation.

Command that removes a timeline range and ripples later clips closed by default.

Range of timeline content affected by an edit command.

Result returned after committing an edit command.

Describes how an active timeline edit affects one clip. This state is transient and is intended for headless UI affordances during live editing interactions. It is not part of the persisted project model.

Active live edit impacts for the current interaction. The model is operation-based so editing modes share the same headless React surface.

App-defined behavioral policy for timeline edit commands.

Context passed to product-defined edit policy callbacks.

Shared preview result produced for every edit command.

Result returned by command validation and policy callbacks.

Options for `useTimelineEvent`.

Options for adapting timeline In/Out points to a range control.

Command that inserts a new clip and pushes later clips forward.

Canvas-aligned geometry settings for clip hit testing and affordance placement.

Single keyboard chord mapped to a timeline command.

Options for creating preset timeline keyboard bindings.

Keyboard-event fields used by the pure shortcut matcher.

Options for `useTimelineKeyboard`.

One clip-scoped property keyframe positioned at an absolute timeline time.

Pointer data needed to update a Bezier curve handle drag.

Pointer data needed to begin a Bezier curve handle drag.

Successful Bezier curve handle drag update payload.

Input for updating one keyframe's Bezier easing.

Options for keyframe curve segment and handle geometry.

Bezier curve handle entry with viewport geometry and edit state.

Viewport-space rectangle for one keyframe curve handle affordance.

Viewport-space pointer query for keyframe curve handle hit testing.

Viewport-space point used by keyframe curve segments and handles.

Keyframe curve segment entry with viewport geometry and optional Bezier handles.

Pointer data needed to update a keyframe drag.

Pointer data needed to begin a keyframe drag.

Successful keyframe drag update payload.

Options for keyframe geometry and hit-testing.

Viewport-space pointer query for timeline keyframe hit testing.

Options for committing or previewing keyframe mutations.

Inputs for mapping a keyframe time/value pair into viewport space.

Keyframe entry with viewport geometry and edit/display state.

Viewport-space rectangle for one keyframe affordance.

Details passed to external media sync callbacks.

Command that removes a timeline range while leaving the gap in place.

Adapter callbacks used to connect timeline playback to an external media clock.

Command that moves an existing clip.

Metadata for one canvas-rendered clip exposed through clip navigation.

Command that places a new clip and removes or trims overlaps on the target track.

Options for adapting horizontal timeline scroll to a scalar control.

Clip placement command shared by insert and overwrite edits.

Options for adapting the timeline playhead to a scalar control.

Props for wiring a TimelineEngine into React context.

Timeline range selected for range edit commands.

Options for formatting a timeline start/end range for assistive technology.

Core rendering theme settings used by the Offscreen Canvas Web Worker to draw the timeline grid.

Toggles optional canvas feedback overlays that may be paired with separate interactive layers.

Command that trims one boundary and ripples later clips on the same track.

Command that rolls the shared boundary between two adjacent clips.

One viewport-space ruler tick for canvas, DOM, or custom rendering.

Options for building shared headless timeline ruler ticks.

Selected clip and track state derived from the current timeline snapshot.

Input for creating or upserting a clip keyframe.

Command that moves an existing clip by a relative timeline offset.

Command that shifts an existing clip's source start without moving timeline bounds.

Transient snap feedback consumed by canvas rendering and focused hooks.

Context passed to runtime snap target providers.

Result of resolving a candidate time against the prepared snap index.

One timeline time that can attract an edited boundary.

Represents the complete, serialized state model of the high performance timeline.

Options for formatting a single timeline time value for assistive technology.

Context passed to custom clip track-drop guards.

Result of resolving whether a clip may drop on a track.

Options for building track viewport geometry.

Options for batching row-height updates with related viewport state.

Expanded row height update for a timeline track.

Hit-test result for a timeline track row.

Viewport-space rectangle for a timeline track row.

Command that trims one existing clip boundary.

Input for updating one existing clip keyframe.

Options for viewport scrollbar accessibility formatting.

Engine-owned constraints for horizontal timeline zoom.

Options for adapting timeline zoom to a scalar control.

A horizontal timeline lane containing clips and editing state. Tracks are app-owned rows in the timeline model. The engine uses each track's stable id for editing operations, reads the ordered clip list for rendering and hit testing, and honors view/editing flags such as visible, collapsed, locked, and muted.

Track change event payload (add, remove).

Props for the track header list column.

Props for one timeline track header row.

Props for the track header resize handle.

Viewport-space pointer query for timeline track hit testing.

Props for a timeline track row bound to a track id.

Track lock change event payload.

Track mute change event payload.

Track resize event payload.

Track selection change event payload.

Persistent snap settings for one track and its clips.

Track visibility change event payload.

Result returned by `useActiveMarkers`.

Options for deriving generic range scrollbar state and update helpers.

Generic range scrollbar geometry and mutation helpers.

Options for `useTimelineCanvasLayer`.

Result returned by `useTimelineClipboard`.

Options accepted by `useTimelineClipDrag`.

Result returned by `useTimelineClipDrag`.

Result returned by `useTimelineClipDropFeedback`.

Result returned by `useTimelineClips`.

Result returned by `useTimelineEditCommands`.

Result returned by `useTimelineEditImpacts`.

Result returned by `useTimelineEditMode`.

Result returned by `useTimelineEditPreview`.

Result returned by `useTimelineHistory`.

Result returned by `useTimelineKeyboard`.

Result returned by `useTimelineKeyframeCurveDrag`.

Options accepted by `useTimelineKeyframeCurves`.

Result returned by `useTimelineKeyframeCurves`.

Options accepted by `useTimelineKeyframeDrag`.

Result returned by `useTimelineKeyframeDrag`.

Options accepted by `useTimelineKeyframes`.

Result returned by `useTimelineKeyframes`.

Result returned by `useTimelineMarkers`.

Options for coordinating timeline playback with an external media clock.

Result returned by `useTimelineMediaPlayback`.

Options for high-level timeline media synchronization.

Result returned by `useTimelineMediaSync`.

Result returned by `useTimelinePlayback`.

Result returned by `useTimelineRangeSelection`.

Result returned by `useTimelineSelection`.

Result returned by `useTimelineSnapping`.

Options for `useTimelineTimePosition`.

Result returned by `useTimelineTimePosition`.

Options accepted by `useTimelineTrackDropTargets`.

Result returned by `useTimelineTrackDropTargets`.

Result returned by `useTimelineTrackHeader`.

Result returned by `useTimelineTrackLockControl`.

Result returned by `useTimelineTrack`.

Result returned by `useTimelineTracks`.

State and formatted accessibility props for a vertical timeline scrollbar.

State and control props for rendering a vertical timeline scrollbar.

Result returned by `useTimelineViewport`.

Options for adapting a generic range scrollbar to the timeline viewport.

State and control props for rendering a timeline viewport scrollbar.

Props for the timeline viewport scrollbar root.

Viewport-intersecting clip entry with clipped timeline and source-media ranges.

Options for building viewport-intersecting clip geometry.

Filters for one named active layer. A layer selector describes the kind of active clips an app wants to drive, such as visual previews, audio playback, subtitles, effects, or a particular source asset. Selectors are matched against the active clips returned for a single timeline time.

Reason the worker rendered a new canvas timeline frame.

Reason a committed engine command created a new clip.

Region of a timeline clip hit by pointer interaction.

Reason a committed engine command removed a clip.

Makes every nested property in a type optional.

Timeline range boundary controlled by an In/Out grabber.

A value that may be available immediately or after asynchronous media lookup.

Clock responsible for advancing playback. Internal playback uses the engine's requestAnimationFrame loop. External playback lets a media player or audio clock drive playhead updates.

Reason a range scrollbar requested a controlled value change.

Side of the range scrollbar thumb controlled by a resize handle.

Visual and interaction axis used by a range scrollbar.

Custom node or render prop used inside an In/Out range selector grabber.

Options for building snap targets before a drag, trim, or range-boundary edit.

Source-frame lookup strategy for media integrations.

Reason a `TimecodeField` committed the current draft text.

Display shape used when formatting seconds for editable timecode text. `auto` keeps common decimal clock text unless a frame rate is provided. With a frame rate, `auto` formats frame timecode. `seconds`, `minutes`, and `hours` keep decimal centiseconds. `frames` formats `HH:MM:SS:FF`, and `drop-frame` formats `HH:MM:SS;FF`.

Frame rate accepted by frame-based timecode helpers. Pass a number for simple rates such as `24`, `25`, `30`, or `60`. Pass a rational object for exact fractional media rates such as `{ numerator: 30000, denominator: 1001 }`.

Display shape used when formatting seconds for a `TimecodeInput`. `auto` keeps common decimal clock text unless a frame rate is provided. With a frame rate, `auto` formats frame timecode. `seconds`, `minutes`, and `hours` keep decimal centiseconds. `frames` formats `HH:MM:SS:FF`, and `drop-frame` formats `HH:MM:SS;FF`.

Options for formatting a seconds value into editable `TimecodeInput` text.

Options for parsing editable `TimecodeInput` text into seconds.

Rounding policy used when parsing editable `TimecodeInput` text. `none` preserves the decimal precision entered by the user, within normal JavaScript number limits. `centisecond` rounds parsed seconds to two decimal places for legacy or display-like workflows.

Rounding policy used when parsing editable timecode text. `none` preserves the decimal precision entered by the user, within normal JavaScript number limits. `centisecond` rounds the parsed seconds to two decimal places for legacy or display-like workflows.

Custom node or render prop used inside a draggable time grabber.

Draw callback used by custom canvas layers.

Reason a custom canvas layer redraw was requested.

Reason a clip cannot currently be dropped on a track.

Options for building all clip viewport geometry.

Editable presentation fields accepted by `useTimelineClips().updateClip`.

Machine-readable reason a timeline command could not be applied.

Status emitted by the timeline media playback hook.

First-class edit command accepted by TimelineEngine edit APIs.

Consequence of an active edit for an affected clip.

Current tool or intent family selected by product editor chrome.

Editing operation that can produce live edit impacts.

Machine-readable reason an edit command cannot be resolved or committed.

Callback signature for a typed TimelineEngine event subscription.

Command-to-bindings map accepted by `useTimelineKeyboard`.

Timeline command names supported by the keyboard scope.

Platform bucket used for platform-specific professional editor bindings.

Named shortcut presets for `useTimelineKeyboard`.

Hit-test result for a keyframe curve handle pointer target.

Bezier control handle edited by a curve interaction.

Hit-test result for a timeline keyframe pointer target.

Segment interpolation mode used from one keyframe to the next.

First-party clip property that can be animated with timeline keyframes.

Editable marker fields accepted by `useTimelineMarkers().updateMarker`.

Reason high-level media-synchronized playback could not begin.

Result returned from a media-synchronized timeline play request. This high-level media adapter result is intentionally richer than `TimelineCommandResult` because failures include user-facing adapter messages in addition to machine-readable reasons.

Reason an external media callback is being synchronized.

Partial renderer theme overrides merged with the built-in canvas defaults.

Label style used by timeline ruler ticks.

Optional ruler behavior for canvas-painted timeline ticks and labels.

Ruler tick visual weight.

Timeline interaction currently preparing or resolving snap targets.

Runtime source of app-defined snap targets such as grids, beats, and captions.

Built-in and application-defined magnetic snap target categories.

Engine events that should refresh an imperatively positioned timeline element.

Custom policy for accepting or rejecting track drop targets.

DOM props returned for a track header row.

Props returned for a track lock button.

Controlled props required by `RangeScrollbar.Root` for vertical timeline scrolling.

Controlled props required by `RangeScrollbar.Root` for a timeline viewport.

Render prop accepted by `Timeline.TrackHeader`.

Options accepted by `useTimelineClipRects`.

Options accepted by `useTimelineKeyframeCurveDrag`.

Options accepted by `useTimelineRulerTicks`.

Options accepted by `useTimelineVisibleClips`.

Props for a timeline vertical scrollbar resize handle.

Props for the timeline vertical scrollbar root.

Props for the timeline vertical scrollbar thumb.

Props for a timeline viewport scrollbar resize handle.

Props for the timeline viewport scrollbar thumb.

Viewport-intersecting keyframe entry.

Viewport-intersecting keyframe curve segment.

List of aesthetic color presets available for custom clip colors.

Default ease-in-out curve used when a Bezier keyframe omits easing control points.

Geometry defaults shared by canvas-aligned interaction layers.

Default zoom-in density when a frame rate constrains timeline zoom.

Built-in renderer defaults. These values are serializable and safe to send to a Worker.

Minimal keyboard preset: playback only.

Professional editor preset bindings that do not depend on frame rate or platform.

Namespace of generic controlled range scrollbar primitives.

Resize handle for moving one side of the visible range.

Root element for a controlled generic range scrollbar.

Draggable thumb representing the visible range within a larger domain.

Compact timecode field parts. `TimecodeField.Root` owns editing state. `TimecodeField.Trigger` renders the compact displayed value, and `TimecodeField.Input` renders the temporary `TimecodeInput` used for typed edits.

Text input for entering timeline positions as timecode. Use `TimecodeInput` when a toolbar, inspector, or properties panel needs a native text input for clip starts, clip ends, playhead positions, or range boundaries. It keeps flexible entry open to the user (`90`, `1:30.25`, `1:02:03.4567`, and `00:01:30:12` can all represent timeline positions) while the companion helpers parse precise input and format display text consistently. This component renders only the input. Pair it with `parseTimecodeInput` to validate the current text, pass `invalid` when parsing returns `null`, and convert valid seconds back to `RationalTime` with `fromSeconds(parsed, rate)` at your timeline boundary. The rendered input receives `data-slot="timecode-input"` and a `timecode-input` class before consumer classes, which keeps it compatible with shadcn-style slot selectors and Canvas Timeline's semantic stylesheet approach. It forwards refs to the underlying native input element.

Namespace of timeline UI components for composing an editor surface.

App-owned canvas layer for drawing custom dense timeline visuals.

React context containing the global engine controller and its reactive state model.

Adds two rational timeline times.

Asserts that a value is a finite rational timeline time.

Renders the timeline canvas layer using an offscreen worker.

Restricts a number to an inclusive minimum and maximum range.

Compares two rational timeline times.

Creates a sanitized marker array for timeline state and history snapshots.

Creates the built-in keyboard binding map for a preset.

Creates a complete renderer theme from optional nested overrides.

Derives selected clip and track metadata from timeline tracks.

Flattens timeline tracks into stable clip entries.

Formats a `RationalTime` as editable timecode text.

Formats a rational timeline time as decimal seconds.

Formats a rational timeline time as mm:ss.

Formats seconds for flexible editable timecode text. Decimal formats are rounded to centiseconds and clamped at zero. Non-finite values are treated as zero. Frame formats round to the nearest frame for the supplied frame rate.

Formats seconds for editable `TimecodeInput` text. Decimal formats are rounded to centiseconds and clamped at zero. Frame formats round to the nearest frame for the supplied frame rate. Use this at UI boundaries after converting from `RationalTime` with `toSeconds`.

Formats a start/end timeline range for assistive technology.

Formats a timeline time for assistive technology. The result intentionally avoids timecode punctuation and raw floating point artifacts so controls can use it as `aria-valuetext`.

Converts seconds to rational timeline time at the requested tick rate.

Converts a zero-based frame number to rational timeline time.

Returns a richer clip description without requiring one DOM node per clip.

Returns a concise clip name suitable for labels or active-item summaries.

Generates a random color value from the predefined list of aesthetic presets. Used when creating new clips, markers, or dynamic color selections.

Evaluates a Cubic Bezier easing curve at normalized time progress.

Resolves a keyboard event to the first matching command in stable command order.

Returns viewport-space cubic Bezier control points between two keyframe points.

Evaluates normalized segment progress for a keyframe interpolation mode.

Maps one keyframe value to the same viewport point used by canvas drawing and DOM handles.

Builds shared viewport-space ruler ticks for canvas, DOM, and custom renderers.

Returns the later of two rational timeline times.

Returns the earlier of two rational timeline times.

Validates and clamps Cubic Bezier control points to the timeline interpolation domain.

Normalizes a keyframe interpolation mode. Unknown or omitted values are treated as linear.

Parses flexible editable timecode text into seconds. Accepts plain seconds, decimal seconds, `m:ss`, `m:ss.cc`, `h:mm:ss`, `h:mm:ss.cc`, flexible single-digit colon segments such as `1:2`, and unit suffixes like `s` (seconds), `ms` (milliseconds), `m` (minutes), or `f` (frames, which requires a `frameRate` option). Invalid, negative, missing, or out-of-range user text returns `null`. Invalid developer options such as unsupported drop-frame rates throw `RangeError`.

Parses editable `TimecodeInput` text into seconds. Accepts plain seconds, decimal seconds, `m:ss`, `m:ss.cc`, `h:mm:ss`, `h:mm:ss.cc`, flexible single-digit colon segments such as `1:2`, and unit suffixes like `s` (seconds), `ms` (milliseconds), `m` (minutes), or `f` (frames, which requires a `frameRate` option). Invalid, negative, missing, or out-of-range user text returns `null`. Invalid developer options such as unsupported drop-frame rates throw `RangeError`.

Parses editable timecode text into `RationalTime`.

Checks whether two rational timeline times represent the same moment.

Resolves a frame-rate option to frames per second. This uses the same validation and normalization path as the timecode formatter/parser helpers, so invalid rates throw the same `RangeError`.

Resolves shadcn/CSS custom properties into a serializable renderer theme. CSS is read on the main thread only. The returned object can be passed through postMessage to the worker without the worker touching DOM APIs.

Rounds a number to the requested number of decimal places.

Shifts all keyframes on a clip by a timeline delta.

Subtracts one rational timeline time from another.

Creates a failed timeline command result.

Creates a successful timeline command result.

Sets up a bridge between the central event-driven `TimelineEngine` model and standard React functional layouts. Subscribes to settled state, selection, playback, content, and clipboard changes, pushing lightweight state updates downwards into hooks.

Converts a rational timeline time to seconds.

Converts a rational time to the nearest source frame number.