@codellyson/framely 0.1.0

package/dist/Player.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Embeddable Player Component
+ *
+ * A drop-in video player for any React application.
+ * Renders Framely compositions with playback controls.
+ *
+ * Usage:
+ *   import { Player } from '@framely/core';
+ *
+ *   <Player
+ *     component={MyVideoComponent}
+ *     durationInFrames={300}
+ *     fps={30}
+ *     width={1920}
+ *     height={1080}
+ *     inputProps={{ title: 'Hello' }}
+ *   />
+ */
+import React from 'react';
+/**
+ * The shape of the context value the Player injects into TimelineContext.
+ * Extends the base timeline fields with playback-specific properties
+ * (volume, playbackRate) that the Player manages internally.
+ */
+export interface PlayerTimelineContextValue {
+    /** Current frame index (0-based). */
+    frame: number;
+    /** Frames per second. */
+    fps: number;
+    /** Composition width in pixels. */
+    width: number;
+    /** Composition height in pixels. */
+    height: number;
+    /** Total number of frames in the composition. */
+    durationInFrames: number;
+    /** Whether playback is currently active. */
+    playing: boolean;
+    /** Effective volume (0 when muted). */
+    volume: number;
+    /** Current playback rate multiplier. */
+    playbackRate: number;
+}
+/**
+ * Props accepted by the Player component.
+ *
+ * @typeParam T - The shape of the input props forwarded to the composition component.
+ */
+export interface PlayerProps<T extends Record<string, unknown> = Record<string, unknown>> {
+    /** The composition component to render. */
+    component: React.ComponentType<T>;
+    /** Total number of frames in the composition. */
+    durationInFrames: number;
+    /** Frames per second. @default 30 */
+    fps?: number;
+    /** Composition width in pixels. @default 1920 */
+    width?: number;
+    /** Composition height in pixels. @default 1080 */
+    height?: number;
+    /** Props forwarded to the composition component. @default {} */
+    inputProps?: T;
+    /** Start playing automatically. @default false */
+    autoPlay?: boolean;
+    /** Loop playback when reaching the end. @default false */
+    loop?: boolean;
+    /** Show playback controls. @default true */
+    controls?: boolean;
+    /** Show frame counter in the controls bar. @default false */
+    showFrameCount?: boolean;
+    /** Initial frame to start on. @default 0 */
+    initialFrame?: number;
+    /** Additional inline styles for the outermost container. */
+    style?: React.CSSProperties;
+    /** CSS class name for the outermost container. */
+    className?: string;
+    /** Called whenever the current frame changes. */
+    onFrameChange?: (frame: number) => void;
+    /** Called when playback starts. */
+    onPlay?: () => void;
+    /** Called when playback pauses. */
+    onPause?: () => void;
+    /** Called when playback reaches the end (non-loop). */
+    onEnded?: () => void;
+    /** Called when an error occurs. */
+    onError?: (error: Error) => void;
+}
+/**
+ * Player component for rendering and playing Framely compositions.
+ */
+export declare function Player<T extends Record<string, unknown> = Record<string, unknown>>({ component: Component, durationInFrames, fps, width, height, inputProps, autoPlay, loop, controls, showFrameCount, initialFrame, style, className, onFrameChange, onPlay, onPause, onEnded, onError, }: PlayerProps<T>): React.JSX.Element;
+/**
+ * Props accepted by the Thumbnail component.
+ *
+ * @typeParam T - The shape of the input props forwarded to the composition component.
+ */
+export interface ThumbnailProps<T extends Record<string, unknown> = Record<string, unknown>> {
+    /** The composition component to render. */
+    component: React.ComponentType<T>;
+    /** Frame index to render. @default 0 */
+    frame?: number;
+    /** Frames per second (used for timing hooks inside the component). @default 30 */
+    fps?: number;
+    /** Composition width in pixels. @default 1920 */
+    width?: number;
+    /** Composition height in pixels. @default 1080 */
+    height?: number;
+    /** Props forwarded to the composition component. @default {} */
+    inputProps?: T;
+    /** Additional inline styles for the container. */
+    style?: React.CSSProperties;
+    /** CSS class name for the container. */
+    className?: string;
+}
+/**
+ * Thumbnail component -- renders a single frame of a composition.
+ */
+export declare function Thumbnail<T extends Record<string, unknown> = Record<string, unknown>>({ component: Component, frame, fps, width, height, inputProps, style, className, }: ThumbnailProps<T>): React.JSX.Element;
+export default Player;
+//# sourceMappingURL=Player.d.ts.map

package/dist/Player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Player.d.ts","sourceRoot":"","sources":["../src/Player.tsx"],"names":[],"mappings":"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"}

package/dist/Player.js

@@ -0,0 +1,311 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Embeddable Player Component
+ *
+ * A drop-in video player for any React application.
+ * Renders Framely compositions with playback controls.
+ *
+ * Usage:
+ *   import { Player } from '@framely/core';
+ *
+ *   <Player
+ *     component={MyVideoComponent}
+ *     durationInFrames={300}
+ *     fps={30}
+ *     width={1920}
+ *     height={1080}
+ *     inputProps={{ title: 'Hello' }}
+ *   />
+ */
+import { useState, useEffect, useRef, useCallback, useMemo, } from 'react';
+import { TimelineContext } from './context';
+import { AbsoluteFill } from './AbsoluteFill';
+// ─── Player Component ─────────────────────────────────────────────────────────
+/**
+ * Player component for rendering and playing Framely compositions.
+ */
+export function Player({ component: Component, durationInFrames, fps = 30, width = 1920, height = 1080, inputProps = {}, autoPlay = false, loop = false, controls = true, showFrameCount = false, initialFrame = 0, style, className, onFrameChange, onPlay, onPause, onEnded, onError, }) {
+    const [frame, setFrame] = useState(initialFrame);
+    const [playing, setPlaying] = useState(autoPlay);
+    const [volume, setVolume] = useState(1);
+    const [muted, setMuted] = useState(false);
+    const [fullscreen, setFullscreen] = useState(false);
+    const [playbackRate, setPlaybackRate] = useState(1);
+    const containerRef = useRef(null);
+    const animationRef = useRef(null);
+    const lastTimeRef = useRef(null);
+    // Calculate aspect ratio and scale
+    const aspectRatio = width / height;
+    // Animation loop
+    useEffect(() => {
+        if (!playing) {
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+                animationRef.current = null;
+            }
+            return;
+        }
+        const frameDuration = 1000 / (fps * playbackRate);
+        lastTimeRef.current = performance.now();
+        const animate = (currentTime) => {
+            const elapsed = currentTime - (lastTimeRef.current ?? currentTime);
+            if (elapsed >= frameDuration) {
+                const framesToAdvance = Math.floor(elapsed / frameDuration);
+                lastTimeRef.current = currentTime - (elapsed % frameDuration);
+                setFrame((prevFrame) => {
+                    let newFrame = prevFrame + framesToAdvance;
+                    if (newFrame >= durationInFrames) {
+                        if (loop) {
+                            newFrame = newFrame % durationInFrames;
+                        }
+                        else {
+                            setPlaying(false);
+                            onEnded?.();
+                            return durationInFrames - 1;
+                        }
+                    }
+                    return newFrame;
+                });
+            }
+            animationRef.current = requestAnimationFrame(animate);
+        };
+        animationRef.current = requestAnimationFrame(animate);
+        return () => {
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+            }
+        };
+    }, [playing, fps, durationInFrames, loop, playbackRate, onEnded]);
+    // Notify frame changes
+    useEffect(() => {
+        onFrameChange?.(frame);
+    }, [frame, onFrameChange]);
+    // Playback controls
+    const play = useCallback(() => {
+        if (frame >= durationInFrames - 1) {
+            setFrame(0);
+        }
+        setPlaying(true);
+        onPlay?.();
+    }, [frame, durationInFrames, onPlay]);
+    const pause = useCallback(() => {
+        setPlaying(false);
+        onPause?.();
+    }, [onPause]);
+    const toggle = useCallback(() => {
+        if (playing) {
+            pause();
+        }
+        else {
+            play();
+        }
+    }, [playing, play, pause]);
+    const seekTo = useCallback((targetFrame) => {
+        const clampedFrame = Math.max(0, Math.min(durationInFrames - 1, targetFrame));
+        setFrame(clampedFrame);
+    }, [durationInFrames]);
+    const seekToPercent = useCallback((percent) => {
+        const targetFrame = Math.floor((percent / 100) * durationInFrames);
+        seekTo(targetFrame);
+    }, [durationInFrames, seekTo]);
+    const toggleFullscreen = useCallback(() => {
+        if (!containerRef.current)
+            return;
+        if (!document.fullscreenElement) {
+            containerRef.current.requestFullscreen?.();
+            setFullscreen(true);
+        }
+        else {
+            document.exitFullscreen?.();
+            setFullscreen(false);
+        }
+    }, []);
+    // Keyboard shortcuts
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            const target = e.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')
+                return;
+            switch (e.key) {
+                case ' ':
+                case 'k':
+                    e.preventDefault();
+                    toggle();
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    seekTo(frame - (e.shiftKey ? 10 : 1));
+                    break;
+                case 'ArrowRight':
+                    e.preventDefault();
+                    seekTo(frame + (e.shiftKey ? 10 : 1));
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    seekTo(0);
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    seekTo(durationInFrames - 1);
+                    break;
+                case 'f':
+                    e.preventDefault();
+                    toggleFullscreen();
+                    break;
+                case 'm':
+                    e.preventDefault();
+                    setMuted((m) => !m);
+                    break;
+                case ',':
+                    e.preventDefault();
+                    if (!playing)
+                        seekTo(frame - 1);
+                    break;
+                case '.':
+                    e.preventDefault();
+                    if (!playing)
+                        seekTo(frame + 1);
+                    break;
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [frame, playing, durationInFrames, toggle, seekTo, toggleFullscreen]);
+    // Timeline context value
+    const contextValue = useMemo(() => ({
+        frame,
+        fps,
+        width,
+        height,
+        durationInFrames,
+        playing,
+        volume: muted ? 0 : volume,
+        playbackRate,
+    }), [frame, fps, width, height, durationInFrames, playing, volume, muted, playbackRate]);
+    // Format time display
+    const formatTime = (f) => {
+        const totalSeconds = f / fps;
+        const minutes = Math.floor(totalSeconds / 60);
+        const seconds = Math.floor(totalSeconds % 60);
+        return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+    };
+    const currentTime = formatTime(frame);
+    const totalTime = formatTime(durationInFrames);
+    const progress = (frame / (durationInFrames - 1)) * 100;
+    return (_jsxs("div", { ref: containerRef, className: className, style: {
+            position: 'relative',
+            width: '100%',
+            maxWidth: width,
+            backgroundColor: '#000',
+            ...style,
+        }, children: [_jsxs("div", { style: {
+                    position: 'relative',
+                    width: '100%',
+                    paddingTop: `${(1 / aspectRatio) * 100}%`,
+                    overflow: 'hidden',
+                }, children: [_jsx("div", { style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                        }, children: _jsx(TimelineContext.Provider, { value: contextValue, children: _jsx(AbsoluteFill, { children: _jsx(Component, { ...inputProps }) }) }) }), _jsx("div", { onClick: toggle, style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: '100%',
+                            cursor: 'pointer',
+                        } })] }), controls && (_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                    padding: '8px 12px',
+                    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                    color: '#fff',
+                    fontSize: '14px',
+                    fontFamily: 'system-ui, sans-serif',
+                }, children: [_jsx("button", { onClick: toggle, style: {
+                            background: 'none',
+                            border: 'none',
+                            color: '#fff',
+                            cursor: 'pointer',
+                            padding: '4px',
+                            fontSize: '16px',
+                        }, "aria-label": playing ? 'Pause' : 'Play', children: playing ? '\u23F8' : '\u25B6' }), _jsxs("span", { style: { minWidth: '80px', fontSize: '12px' }, children: [currentTime, " / ", totalTime] }), _jsx("div", { style: {
+                            flex: 1,
+                            height: '4px',
+                            backgroundColor: 'rgba(255, 255, 255, 0.3)',
+                            borderRadius: '2px',
+                            cursor: 'pointer',
+                            position: 'relative',
+                        }, onClick: (e) => {
+                            const rect = e.currentTarget.getBoundingClientRect();
+                            const percent = ((e.clientX - rect.left) / rect.width) * 100;
+                            seekToPercent(percent);
+                        }, children: _jsx("div", { style: {
+                                position: 'absolute',
+                                left: 0,
+                                top: 0,
+                                height: '100%',
+                                width: `${progress}%`,
+                                backgroundColor: '#3b82f6',
+                                borderRadius: '2px',
+                                transition: 'width 0.1s',
+                            } }) }), showFrameCount && (_jsxs("span", { style: { fontSize: '12px', opacity: 0.7 }, children: [frame, " / ", durationInFrames - 1] })), _jsx("button", { onClick: () => setMuted((m) => !m), style: {
+                            background: 'none',
+                            border: 'none',
+                            color: '#fff',
+                            cursor: 'pointer',
+                            padding: '4px',
+                            fontSize: '14px',
+                        }, "aria-label": muted ? 'Unmute' : 'Mute', children: muted ? '\uD83D\uDD07' : '\uD83D\uDD0A' }), _jsxs("select", { value: playbackRate, onChange: (e) => setPlaybackRate(parseFloat(e.target.value)), style: {
+                            background: 'transparent',
+                            border: '1px solid rgba(255,255,255,0.3)',
+                            color: '#fff',
+                            padding: '2px 4px',
+                            borderRadius: '4px',
+                            fontSize: '12px',
+                            cursor: 'pointer',
+                        }, children: [_jsx("option", { value: "0.25", children: "0.25x" }), _jsx("option", { value: "0.5", children: "0.5x" }), _jsx("option", { value: "1", children: "1x" }), _jsx("option", { value: "1.5", children: "1.5x" }), _jsx("option", { value: "2", children: "2x" })] }), _jsx("button", { onClick: toggleFullscreen, style: {
+                            background: 'none',
+                            border: 'none',
+                            color: '#fff',
+                            cursor: 'pointer',
+                            padding: '4px',
+                            fontSize: '14px',
+                        }, "aria-label": "Toggle fullscreen", children: fullscreen ? '\u26F6' : '\u26F6' })] }))] }));
+}
+// ─── Thumbnail Component ──────────────────────────────────────────────────────
+/**
+ * Thumbnail component -- renders a single frame of a composition.
+ */
+export function Thumbnail({ component: Component, frame = 0, fps = 30, width = 1920, height = 1080, inputProps = {}, style, className, }) {
+    const aspectRatio = width / height;
+    const contextValue = useMemo(() => ({
+        frame,
+        fps,
+        width,
+        height,
+        durationInFrames: frame + 1,
+        playing: false,
+        volume: 0,
+        playbackRate: 1,
+    }), [frame, fps, width, height]);
+    return (_jsx("div", { className: className, style: {
+            position: 'relative',
+            width: '100%',
+            maxWidth: width,
+            paddingTop: `${(1 / aspectRatio) * 100}%`,
+            overflow: 'hidden',
+            ...style,
+        }, children: _jsx("div", { style: {
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+            }, children: _jsx(TimelineContext.Provider, { value: contextValue, children: _jsx(AbsoluteFill, { children: _jsx(Component, { ...inputProps }) }) }) }) }));
+}
+export default Player;
+//# sourceMappingURL=Player.js.map

package/dist/Player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Player.js","sourceRoot":"","sources":["../src/Player.tsx"],"names":[],"mappings":"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"}

package/dist/Sequence.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export interface SequenceProps {
+    /** Frame at which this sequence starts (default: 0). */
+    from?: number;
+    /** How many frames this sequence lasts (defaults to rest of composition). */
+    durationInFrames?: number;
+    /** Optional label for debugging. */
+    name?: string;
+    /** 'absolute-fill' (default) positions the sequence to cover its parent; 'none' applies no layout. */
+    layout?: 'absolute-fill' | 'none';
+    /** Additional inline CSS styles applied to the wrapper div. */
+    style?: React.CSSProperties;
+    /** Additional CSS class name(s) applied to the wrapper div. */
+    className?: string;
+    /** Child elements rendered inside the sequence. */
+    children?: React.ReactNode;
+}
+/**
+ * Sequence offsets the timeline for its children.
+ *
+ * Children inside a Sequence see frame 0 when the parent timeline
+ * reaches `from`. The Sequence is hidden outside its active range.
+ */
+export declare function Sequence({ from, durationInFrames: duration, name, style, layout, className, children, }: SequenceProps): React.ReactElement | null;
+//# sourceMappingURL=Sequence.d.ts.map

package/dist/Sequence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sequence.d.ts","sourceRoot":"","sources":["../src/Sequence.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,aAAa;IAC5B,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sGAAsG;IACtG,MAAM,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAClC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAQ,EACR,gBAAgB,EAAE,QAAQ,EAC1B,IAAI,EACJ,KAAK,EACL,MAAwB,EACxB,SAAS,EACT,QAAQ,GACT,EAAE,aAAa,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA6C3C"}

package/dist/Sequence.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import TimelineContext, { useTimeline } from './context';
+/**
+ * Sequence offsets the timeline for its children.
+ *
+ * Children inside a Sequence see frame 0 when the parent timeline
+ * reaches `from`. The Sequence is hidden outside its active range.
+ */
+export function Sequence({ from = 0, durationInFrames: duration, name, style, layout = 'absolute-fill', className, children, }) {
+    const parent = useTimeline();
+    const actualDuration = duration ?? parent.durationInFrames - from;
+    // Calculate the child's local frame
+    const localFrame = parent.frame - from;
+    const contextValue = useMemo(() => ({
+        ...parent,
+        frame: localFrame,
+        durationInFrames: actualDuration,
+        playing: parent.playing ?? false,
+    }), [parent, localFrame, actualDuration]);
+    const containerStyle = layout === 'absolute-fill'
+        ? {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            ...style,
+        }
+        : style;
+    // Don't render if we're outside this sequence's range
+    if (localFrame < 0 || localFrame >= actualDuration) {
+        return null;
+    }
+    return (_jsx(TimelineContext.Provider, { value: contextValue, children: _jsx("div", { style: containerStyle, className: className, "data-sequence-name": name, children: children }) }));
+}
+//# sourceMappingURL=Sequence.js.map

package/dist/Sequence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sequence.js","sourceRoot":"","sources":["../src/Sequence.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,eAAe,EAAE,EAAE,WAAW,EAA6B,MAAM,WAAW,CAAC;AAmBpF;;;;;GAKG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,IAAI,GAAG,CAAC,EACR,gBAAgB,EAAE,QAAQ,EAC1B,IAAI,EACJ,KAAK,EACL,MAAM,GAAG,eAAe,EACxB,SAAS,EACT,QAAQ,GACM;IACd,MAAM,MAAM,GAAG,WAAW,EAA0B,CAAC;IACrD,MAAM,cAAc,GAAW,QAAQ,IAAI,MAAM,CAAC,gBAAgB,GAAG,IAAI,CAAC;IAE1E,oCAAoC;IACpC,MAAM,UAAU,GAAW,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC;IAE/C,MAAM,YAAY,GAAyB,OAAO,CAChD,GAAG,EAAE,CAAC,CAAC;QACL,GAAG,MAAM;QACT,KAAK,EAAE,UAAU;QACjB,gBAAgB,EAAE,cAAc;QAChC,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,KAAK;KACjC,CAAC,EACF,CAAC,MAAM,EAAE,UAAU,EAAE,cAAc,CAAC,CACrC,CAAC;IAEF,MAAM,cAAc,GAClB,MAAM,KAAK,eAAe;QACxB,CAAC,CAAC;YACE,QAAQ,EAAE,UAAmB;YAC7B,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,GAAG,KAAK;SACT;QACH,CAAC,CAAC,KAAK,CAAC;IAEZ,sDAAsD;IACtD,IAAI,UAAU,GAAG,CAAC,IAAI,UAAU,IAAI,cAAc,EAAE,CAAC;QACnD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC3C,cACE,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,SAAS,wBACA,IAAI,YAEvB,QAAQ,GACL,GACmB,CAC5B,CAAC;AACJ,CAAC"}

package/dist/Series.d.ts

@@ -0,0 +1,52 @@
+import { type ReactNode, type CSSProperties, type ReactElement } from 'react';
+/**
+ * Props for the Series.Sequence compound component.
+ */
+export interface SeriesSequenceProps {
+    /** How many frames this sequence lasts (required unless last). */
+    durationInFrames: number;
+    /** Adjust timing: positive = delay, negative = overlap with previous. */
+    offset?: number;
+    /** Layout mode: 'absolute-fill' (default) positions the sequence absolutely, 'none' uses no special layout. */
+    layout?: 'absolute-fill' | 'none';
+    /** Additional CSS styles applied to the sequence container. */
+    style?: CSSProperties;
+    /** Optional label for debugging. */
+    name?: string;
+    /** Content to render inside this sequence. */
+    children?: ReactNode;
+}
+/**
+ * Props for the Series component.
+ */
+export interface SeriesProps {
+    /** Series.Sequence elements to render sequentially. */
+    children: ReactNode;
+}
+/**
+ * Compound component type that includes Series.Sequence.
+ */
+interface SeriesComponent {
+    (props: SeriesProps): ReactElement;
+    Sequence: (props: SeriesSequenceProps) => ReactElement | null;
+}
+/**
+ * Series renders children sequentially, auto-calculating `from` for each.
+ *
+ * Unlike Sequence (which requires explicit `from` values), Series automatically
+ * places each child one after another in the timeline.
+ *
+ * Usage:
+ *   <Series>
+ *     <Series.Sequence durationInFrames={60}>
+ *       <Scene1 />
+ *     </Series.Sequence>
+ *     <Series.Sequence durationInFrames={90}>
+ *       <Scene2 />
+ *     </Series.Sequence>
+ *   </Series>
+ */
+declare const Series: SeriesComponent;
+export { Series };
+export default Series;
+//# sourceMappingURL=Series.d.ts.map

package/dist/Series.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Series.d.ts","sourceRoot":"","sources":["../src/Series.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAiBf;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,kEAAkE;IAClE,gBAAgB,EAAE,MAAM,CAAC;IACzB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+GAA+G;IAC/G,MAAM,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAClC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,uDAAuD;IACvD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAUD;;GAEG;AACH,UAAU,eAAe;IACvB,CAAC,KAAK,EAAE,WAAW,GAAG,YAAY,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,YAAY,GAAG,IAAI,CAAC;CAC/D;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,MAAM,EAAE,eA4Bb,CAAC;AAoEF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,eAAe,MAAM,CAAC"}