UI Components
Component map, editor surfaces, panels, and styling guidance for @timelinx/ui
@timelinx/ui is the visual editor layer. It provides composable React components that read the UI provider context, subscribe to the React engine, and render a timeline editing surface.
Component Map
| Area | Components |
|---|---|
| Editor shell | TimelineEditor, TopNav, Sidebar, StatusBar, CommandPalette, KeyboardShortcutsOverlay. |
| Timeline canvas | TimelineToolbar, TimelineRuler, TrackList, TimelineTrack, TimelineClip, TimelinePlayhead, SnapIndicator, ZoomControls. |
| Media and preview | AssetBin, DropZone, MediaPreview, CompositorPreview, TransportControls. |
| Inspection panels | InspectorPanel, EffectsPanel, KeyframesPanel, TransitionsPanel, CaptionsPanel, MarkersPanel, TextPanel, ExportDialog. |
| Composition helpers | TabbedPanel, CollapsibleSection, icons, design tokens, presets, and shared time/geometry utilities. |
How To Use It
import { TimelineEngine } from '@timelinx/react';
import { TimelineEditor, TimelineProvider } from '@timelinx/ui';
const engine = new TimelineEngine({ initialState });
export function Editor() {
return (
<TimelineProvider engine={engine} initialPpf={4}>
<TimelineEditor />
</TimelineProvider>
);
}Import the design system once:
@import '@timelinx/ui/styles/tokens';
@import '@timelinx/ui/styles/structure';
@import '@timelinx/ui/styles/presets/dark-pro';Composition Patterns
| Pattern | Use when |
|---|---|
| Full editor | Use TimelineEditor when you want the main editing surface composed for you: toolbar, ruler, tracks, clips, playhead, and transport-oriented layout. |
| Custom shell | Assemble TopNav, Sidebar, TrackList, TimelineRuler, TimelineTrack, TimelineClip, and panels when your product has its own app frame. |
| Focused panels | Use InspectorPanel, EffectsPanel, KeyframesPanel, TransitionsPanel, CaptionsPanel, MarkersPanel, and ExportDialog next to your own preview or media browser. |
| Interactive timeline | Components connect to the engine context for selection, tool changes, provisional state, snapping, zoom, scroll, and playhead rendering. |
Component Gallery
- TimelineEditor - full editor surface.
- TimelineToolbar - editing tools and command buttons.
- TimelineRuler - frame/timecode ruler.
- TimelineTrack - track lane rendering.
- TimelineClip - clip rendering and selection state.
- TimelinePlayhead - playhead line and handle.
- TrackList - track labels and controls.
- ZoomControls - pixels-per-frame controls.
- AssetBin and DropZone - media import surfaces.
- MediaPreview and CompositorPreview - media and composite preview.
- TransportControls - playback controls.
- InspectorPanel, EffectsPanel, KeyframesPanel, and TransitionsPanel - clip editing panels.
- CaptionsPanel, TextPanel, and MarkersPanel - editorial metadata panels.
- CommandPalette, KeyboardShortcutsOverlay, StatusBar, TabbedPanel, and CollapsibleSection - supporting UI primitives.
Styling Notes
The UI package exports tokens and presets rather than forcing one app shell. The dark preset is tuned for editor surfaces: low-glare panels, visible borders, blue accent chrome, and yellow selection affordances.
Use the shared CSS imports before overriding component-level styles. This keeps clip colors, track types, selected states, disabled states, scrollbars, and panel chrome consistent across the editor.
Keep engine state and layout state separate. Timeline data belongs in TimelineState. Zoom, scroll, viewport width, and panel placement belong in the UI provider or your app shell.