@qwanyx/carousel 0.1.7 → 0.1.9

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import React$1, { CSSProperties, ReactNode } from 'react';
+import * as React$1 from 'react';
+import React__default, { CSSProperties, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -313,11 +314,132 @@ declare function createImageSlide(id: string, src: string, options?: {
     objectFit?: ImageObject['objectFit'];
     background?: SlideBackground;
 }): Slide;
+/**
+ * Timecode in milliseconds
+ * Display format: MM:SS:mmm (e.g., 01:30:500 = 90500ms)
+ */
+type Timecode = number;
+/**
+ * Convert timecode to display string MM:SS:mmm
+ */
+declare function formatTimecode(ms: Timecode): string;
+/**
+ * Parse display string MM:SS:mmm to timecode
+ */
+declare function parseTimecode(str: string): Timecode;
+/**
+ * Blend modes for layers
+ */
+type BlendMode = 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn';
+/**
+ * Easing functions for keyframe interpolation
+ */
+type EasingType = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'step-start' | 'step-end';
+/**
+ * Animatable properties for keyframes
+ */
+interface KeyframeProperties {
+    visible?: boolean;
+    opacity?: number;
+    x?: number;
+    y?: number;
+    scaleX?: number;
+    scaleY?: number;
+    rotation?: number;
+    volume?: number;
+}
+/**
+ * Timeline keyframe - a point in time with property values
+ */
+interface TimelineKeyframe {
+    id: string;
+    time: Timecode;
+    properties: KeyframeProperties;
+    easing?: EasingType;
+}
+/**
+ * Base for all layer tree nodes
+ */
+interface LayerNodeBase {
+    id: string;
+    name: string;
+    visible: boolean;
+    locked: boolean;
+    opacity: number;
+    blendMode?: BlendMode;
+    keyframes?: TimelineKeyframe[];
+}
+/**
+ * Layer folder - contains other folders or items
+ */
+interface LayerFolder extends LayerNodeBase {
+    type: 'folder';
+    collapsed?: boolean;
+    children: LayerNode[];
+}
+/**
+ * Layer item - contains a single object (image, text, etc.)
+ */
+interface LayerItem extends LayerNodeBase {
+    type: 'item';
+    object: SlideObject;
+}
+/**
+ * Union type for layer tree nodes
+ */
+type LayerNode = LayerFolder | LayerItem;
+/**
+ * Audio track configuration
+ */
+interface AudioTrack {
+    id: string;
+    name: string;
+    src: string;
+    startTime?: Timecode;
+    endTime?: Timecode;
+    offset?: Timecode;
+    volume?: number;
+    muted?: boolean;
+    loop?: boolean;
+}
+/**
+ * Composition - a timeline-based animation with layers
+ */
+interface Composition {
+    id: string;
+    name: string;
+    width: number;
+    height: number;
+    aspectRatio?: string;
+    duration: Timecode;
+    frameRate?: number;
+    audioTracks?: AudioTrack[];
+    layers: LayerNode[];
+    background?: SlideBackground;
+    createdAt?: string;
+    updatedAt?: string;
+}
+/**
+ * Create an empty composition
+ */
+declare function createComposition(id: string, name: string, options?: Partial<Omit<Composition, 'id' | 'name' | 'layers'>>): Composition;
+/**
+ * Create a layer folder
+ */
+declare function createLayerFolder(id: string, name: string, children?: LayerNode[]): LayerFolder;
+/**
+ * Create a layer item
+ */
+declare function createLayerItem(id: string, name: string, object: SlideObject): LayerItem;
+/**
+ * Create a keyframe
+ */
+declare function createKeyframe(time: Timecode, properties: KeyframeProperties, easing?: EasingType): TimelineKeyframe;
 
 /**
  * Qwanyx Carousel - Universal slide/presentation engine
  */
-declare const Carousel: React$1.ForwardRefExoticComponent<CarouselProps & React$1.RefAttributes<CarouselRef>>;
+declare const Carousel: React__default.ForwardRefExoticComponent<CarouselProps & React__default.RefAttributes<CarouselRef>>;
 
 interface SlideRendererProps {
     slide: Slide;
@@ -346,6 +468,383 @@ interface ThumbnailsProps {
  */
 declare function Thumbnails({ slides, currentIndex, onSelect, onReorder, onDelete, position, size, theme, }: ThumbnailsProps): react_jsx_runtime.JSX.Element;
 
+interface AnimationEditorProps {
+    composition: Composition;
+    isOpen: boolean;
+    onClose: () => void;
+    onSave: (composition: Composition) => void;
+}
+declare function AnimationEditor({ composition: initialComposition, isOpen, onClose, onSave, }: AnimationEditorProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Animation Editor Types
+ *
+ * Types specific to the animation editor UI and state management.
+ * Core composition types are in ../../types.ts
+ */
+
+/**
+ * Selection state in the editor
+ */
+interface EditorSelection {
+    layerIds: string[];
+    keyframeIds: string[];
+}
+/**
+ * Playback state
+ */
+interface PlaybackState {
+    isPlaying: boolean;
+    currentTime: Timecode;
+    playbackRate: number;
+}
+/**
+ * Timeline view state
+ */
+interface TimelineViewState {
+    zoom: number;
+    scrollX: number;
+    scrollY: number;
+    snapToGrid: boolean;
+    gridSize: Timecode;
+}
+/**
+ * Tool mode for the editor
+ */
+type EditorTool = 'select' | 'move' | 'scale' | 'rotate' | 'keyframe';
+/**
+ * Panel visibility state
+ */
+interface PanelState {
+    layers: boolean;
+    properties: boolean;
+    timeline: boolean;
+}
+/**
+ * Complete editor state
+ */
+interface AnimationEditorState {
+    composition: Composition;
+    selection: EditorSelection;
+    playback: PlaybackState;
+    timeline: TimelineViewState;
+    tool: EditorTool;
+    panels: PanelState;
+    isDirty: boolean;
+}
+type EditorAction = {
+    type: 'SET_COMPOSITION';
+    payload: Composition;
+} | {
+    type: 'UPDATE_COMPOSITION';
+    payload: Partial<Composition>;
+} | {
+    type: 'ADD_LAYER';
+    payload: {
+        layer: LayerNode;
+        parentId?: string;
+        index?: number;
+    };
+} | {
+    type: 'REMOVE_LAYER';
+    payload: {
+        layerId: string;
+    };
+} | {
+    type: 'UPDATE_LAYER';
+    payload: {
+        layerId: string;
+        updates: Partial<LayerNode>;
+    };
+} | {
+    type: 'MOVE_LAYER';
+    payload: {
+        layerId: string;
+        targetParentId?: string;
+        index: number;
+    };
+} | {
+    type: 'TOGGLE_LAYER_VISIBILITY';
+    payload: {
+        layerId: string;
+    };
+} | {
+    type: 'TOGGLE_LAYER_LOCK';
+    payload: {
+        layerId: string;
+    };
+} | {
+    type: 'TOGGLE_FOLDER_COLLAPSED';
+    payload: {
+        folderId: string;
+    };
+} | {
+    type: 'ADD_KEYFRAME';
+    payload: {
+        layerId: string;
+        keyframe: TimelineKeyframe;
+    };
+} | {
+    type: 'REMOVE_KEYFRAME';
+    payload: {
+        layerId: string;
+        keyframeId: string;
+    };
+} | {
+    type: 'UPDATE_KEYFRAME';
+    payload: {
+        layerId: string;
+        keyframeId: string;
+        updates: Partial<TimelineKeyframe>;
+    };
+} | {
+    type: 'MOVE_KEYFRAME';
+    payload: {
+        layerId: string;
+        keyframeId: string;
+        newTime: Timecode;
+    };
+} | {
+    type: 'SELECT_LAYERS';
+    payload: {
+        layerIds: string[];
+        additive?: boolean;
+    };
+} | {
+    type: 'SELECT_KEYFRAMES';
+    payload: {
+        keyframeIds: string[];
+        additive?: boolean;
+    };
+} | {
+    type: 'CLEAR_SELECTION';
+} | {
+    type: 'PLAY';
+} | {
+    type: 'PAUSE';
+} | {
+    type: 'STOP';
+} | {
+    type: 'SEEK';
+    payload: {
+        time: Timecode;
+    };
+} | {
+    type: 'SET_PLAYBACK_RATE';
+    payload: {
+        rate: number;
+    };
+} | {
+    type: 'SET_TIMELINE_ZOOM';
+    payload: {
+        zoom: number;
+    };
+} | {
+    type: 'SET_TIMELINE_SCROLL';
+    payload: {
+        scrollX?: number;
+        scrollY?: number;
+    };
+} | {
+    type: 'TOGGLE_SNAP_TO_GRID';
+} | {
+    type: 'SET_GRID_SIZE';
+    payload: {
+        size: Timecode;
+    };
+} | {
+    type: 'SET_TOOL';
+    payload: {
+        tool: EditorTool;
+    };
+} | {
+    type: 'TOGGLE_PANEL';
+    payload: {
+        panel: keyof PanelState;
+    };
+} | {
+    type: 'UNDO';
+} | {
+    type: 'REDO';
+} | {
+    type: 'MARK_SAVED';
+};
+interface AnimationEditorContextValue {
+    state: AnimationEditorState;
+    dispatch: React.Dispatch<EditorAction>;
+    selectedLayers: LayerNode[];
+    flattenedLayers: LayerNode[];
+    currentTimeFormatted: string;
+    durationFormatted: string;
+}
+interface LayerPanelProps$1 {
+    layers: LayerNode[];
+    selectedIds: string[];
+    onSelect: (layerId: string, additive: boolean) => void;
+    onToggleVisibility: (layerId: string) => void;
+    onToggleLock: (layerId: string) => void;
+    onToggleCollapsed: (folderId: string) => void;
+    onReorder: (layerId: string, targetParentId: string | undefined, index: number) => void;
+    onAddFolder: () => void;
+    onAddItem: () => void;
+    onDelete: (layerId: string) => void;
+    onRename: (layerId: string, name: string) => void;
+}
+interface TimelineProps$1 {
+    composition: Composition;
+    currentTime: Timecode;
+    zoom: number;
+    scrollX: number;
+    selectedKeyframeIds: string[];
+    onSeek: (time: Timecode) => void;
+    onZoomChange: (zoom: number) => void;
+    onScrollChange: (scrollX: number) => void;
+    onKeyframeSelect: (keyframeId: string, additive: boolean) => void;
+    onKeyframeMove: (layerId: string, keyframeId: string, newTime: Timecode) => void;
+    onKeyframeAdd: (layerId: string, time: Timecode) => void;
+    onKeyframeDelete: (layerId: string, keyframeId: string) => void;
+}
+interface PreviewCanvasProps$1 {
+    composition: Composition;
+    currentTime: Timecode;
+    selectedLayerIds: string[];
+    onLayerSelect: (layerId: string) => void;
+}
+interface PropertiesPanelProps$1 {
+    selectedLayers: LayerNode[];
+    currentTime: Timecode;
+    onUpdateLayer: (layerId: string, updates: Partial<LayerNode>) => void;
+    onAddKeyframe: (layerId: string) => void;
+}
+
+/**
+ * Find a layer by ID in the tree
+ */
+declare function findLayerById(layers: LayerNode[], id: string): LayerNode | null;
+/**
+ * Flatten layer tree for timeline display
+ */
+declare function flattenLayers(layers: LayerNode[], collapsedIds?: Set<string>): LayerNode[];
+declare function useComposition(initialComposition: Composition): {
+    state: AnimationEditorState;
+    dispatch: React$1.Dispatch<EditorAction>;
+    selectedLayers: LayerNode[];
+    flattenedLayers: LayerNode[];
+};
+
+/**
+ * usePlayback Hook
+ *
+ * Handles playback timing, audio synchronization, and animation frame updates.
+ */
+
+interface PlaybackOptions {
+    duration: Timecode;
+    currentTime: Timecode;
+    isPlaying: boolean;
+    playbackRate: number;
+    audioTracks?: AudioTrack[];
+    onTimeUpdate: (time: Timecode) => void;
+    onPlaybackEnd?: () => void;
+}
+declare function usePlayback({ duration, currentTime, isPlaying, playbackRate, audioTracks, onTimeUpdate, onPlaybackEnd, }: PlaybackOptions): {
+    seek: (time: Timecode) => void;
+    getAudioWaveform: (trackId: string) => Promise<number[] | null>;
+    audioElements: Map<string, HTMLAudioElement>;
+};
+
+/**
+ * useKeyframes Hook
+ *
+ * Interpolates keyframe values at a given time.
+ */
+
+/**
+ * Interpolate keyframe properties at a given time
+ */
+declare function interpolateKeyframes(keyframes: TimelineKeyframe[], time: Timecode): KeyframeProperties;
+/**
+ * Get computed properties for a layer at a given time
+ * Combines layer base properties with keyframe interpolation
+ */
+declare function getLayerPropertiesAtTime(layer: LayerNode, time: Timecode): KeyframeProperties & {
+    layerVisible: boolean;
+    layerOpacity: number;
+};
+interface UseKeyframesOptions {
+    layers: LayerNode[];
+    currentTime: Timecode;
+}
+interface LayerState {
+    id: string;
+    properties: KeyframeProperties & {
+        layerVisible: boolean;
+        layerOpacity: number;
+    };
+}
+/**
+ * Hook to get interpolated properties for all layers at current time
+ */
+declare function useKeyframes({ layers, currentTime }: UseKeyframesOptions): {
+    layerStates: LayerState[];
+    layerStatesMap: Map<string, LayerState>;
+    getLayerState: (layerId: string) => LayerState | undefined;
+};
+
+interface LayerPanelProps {
+    layers: LayerNode[];
+    selectedIds: string[];
+    onSelect: (layerId: string, additive: boolean) => void;
+    onToggleVisibility: (layerId: string) => void;
+    onToggleLock: (layerId: string) => void;
+    onToggleCollapsed: (folderId: string) => void;
+    onAddFolder: () => void;
+    onAddItem: (type: 'image' | 'text' | 'shape') => void;
+    onDelete: (layerId: string) => void;
+    onRename: (layerId: string, name: string) => void;
+}
+declare function LayerPanel({ layers, selectedIds, onSelect, onToggleVisibility, onToggleLock, onToggleCollapsed, onAddFolder, onAddItem, onDelete, onRename, }: LayerPanelProps): react_jsx_runtime.JSX.Element;
+
+interface TimelineProps {
+    composition: Composition;
+    currentTime: Timecode;
+    isPlaying: boolean;
+    zoom: number;
+    scrollX: number;
+    selectedLayerIds: string[];
+    selectedKeyframeIds: string[];
+    snapToGrid: boolean;
+    gridSize: Timecode;
+    onSeek: (time: Timecode) => void;
+    onZoomChange: (zoom: number) => void;
+    onScrollChange: (scrollX: number) => void;
+    onKeyframeSelect: (keyframeId: string, additive: boolean) => void;
+    onKeyframeMove: (layerId: string, keyframeId: string, newTime: Timecode) => void;
+    onKeyframeAdd: (layerId: string, time: Timecode) => void;
+    onKeyframeDelete: (layerId: string, keyframeId: string) => void;
+    onPlay: () => void;
+    onPause: () => void;
+    onStop: () => void;
+}
+declare function Timeline({ composition, currentTime, isPlaying, zoom, scrollX, selectedLayerIds, selectedKeyframeIds, snapToGrid, gridSize, onSeek, onZoomChange, onScrollChange, onKeyframeSelect, onKeyframeMove, onKeyframeAdd, onKeyframeDelete, onPlay, onPause, onStop, }: TimelineProps): react_jsx_runtime.JSX.Element;
+
+interface PreviewCanvasProps {
+    composition: Composition;
+    currentTime: Timecode;
+    selectedLayerIds: string[];
+    onLayerSelect: (layerId: string) => void;
+    onClearSelection: () => void;
+}
+declare function PreviewCanvas({ composition, currentTime, selectedLayerIds, onLayerSelect, onClearSelection, }: PreviewCanvasProps): react_jsx_runtime.JSX.Element;
+
+interface PropertiesPanelProps {
+    selectedLayers: LayerNode[];
+    currentTime: Timecode;
+    onUpdateLayer: (layerId: string, updates: Partial<LayerNode>) => void;
+    onAddKeyframe: (layerId: string, property: string) => void;
+}
+declare function PropertiesPanel({ selectedLayers, currentTime, onUpdateLayer, onAddKeyframe, }: PropertiesPanelProps): react_jsx_runtime.JSX.Element;
+
 interface UseCarouselOptions {
     slides: Slide[];
     initialIndex?: number;
@@ -398,7 +897,7 @@ declare const createSlide: {
     component: (id: string, render: (props: {
         isActive: boolean;
         slideIndex: number;
-    }) => React$1.ReactNode, options?: Partial<Omit<Slide, "id" | "layers">>) => Slide;
+    }) => React__default.ReactNode, options?: Partial<Omit<Slide, "id" | "layers">>) => Slide;
     /**
      * Create a slide to display a markdown file
      */
@@ -415,4 +914,4 @@ declare const createSlide: {
     }) => Slide;
 };
 
-export { type Animation, type AnimationKeyframe, type AudioObject, type AutoplayOptions, type BaseObject, Carousel, type CarouselInfo, type CarouselProps, type CarouselRef, type ComponentObject, type GroupObject, type ImageObject, type Layer, type NavigationOptions, type ObjectType, type Position, type ShapeObject, type Size, type Slide, type SlideBackground, type SlideObject, SlideRenderer, type SlideTransition, type TextObject, Thumbnails, type Transform, type TransitionType, type VideoObject, createImageSlide, createSimpleSlide, createSlide, useCarousel };
+export { type Animation, AnimationEditor, type AnimationEditorContextValue, type AnimationEditorProps, type AnimationEditorState, type AnimationKeyframe, type AudioObject, type AudioTrack, type AutoplayOptions, type BaseObject, type BlendMode, Carousel, type CarouselInfo, type CarouselProps, type CarouselRef, type ComponentObject, type Composition, type EasingType, type EditorAction, type EditorSelection, type EditorTool, type GroupObject, type ImageObject, type KeyframeProperties, type Layer, type LayerFolder, type LayerItem, type LayerNode, LayerPanel, type LayerPanelProps$1 as LayerPanelProps, type NavigationOptions, type ObjectType, type PanelState, type PlaybackState, type Position, PreviewCanvas, type PreviewCanvasProps$1 as PreviewCanvasProps, PropertiesPanel, type PropertiesPanelProps$1 as PropertiesPanelProps, type ShapeObject, type Size, type Slide, type SlideBackground, type SlideObject, SlideRenderer, type SlideTransition, type TextObject, Thumbnails, type Timecode, Timeline, type TimelineKeyframe, type TimelineProps$1 as TimelineProps, type TimelineViewState, type Transform, type TransitionType, type VideoObject, createComposition, createImageSlide, createKeyframe, createLayerFolder, createLayerItem, createSimpleSlide, createSlide, findLayerById, flattenLayers, formatTimecode, getLayerPropertiesAtTime, interpolateKeyframes, parseTimecode, useCarousel, useComposition, useKeyframes, usePlayback };