@codellyson/framely 0.1.0

package/dist/ErrorBoundary.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Component } from 'react';
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        // In render mode, expose the error for CLI detection
+        if (typeof window !== 'undefined') {
+            window.__FRAMELY_RENDER_ERROR = {
+                message: error.message,
+                stack: error.stack,
+                componentStack: errorInfo?.componentStack,
+            };
+            // Dispatch custom event for render pipeline
+            window.dispatchEvent(new CustomEvent('framely-render-error', {
+                detail: { error, errorInfo },
+            }));
+        }
+        if (this.props.onError) {
+            this.props.onError(error, errorInfo);
+        }
+    }
+    render() {
+        if (this.state.hasError) {
+            // Custom fallback UI
+            if (this.props.fallback) {
+                return this.props.fallback;
+            }
+            // In render mode, show nothing (error is on window)
+            const params = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
+            if (params.get('renderMode') === 'true') {
+                return null;
+            }
+            // Dev/studio mode - show error details
+            return (_jsxs("div", { style: {
+                    position: 'absolute',
+                    inset: 0,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    background: '#1a1a1a',
+                    color: '#ef4444',
+                    fontFamily: 'system-ui, sans-serif',
+                    padding: '24px',
+                }, children: [_jsx("div", { style: { fontSize: '18px', fontWeight: 600, marginBottom: '12px' }, children: "Composition Error" }), _jsx("div", { style: {
+                            fontSize: '14px',
+                            color: '#fff',
+                            marginBottom: '16px',
+                            textAlign: 'center',
+                            maxWidth: '600px',
+                        }, children: this.state.error?.message || 'An unknown error occurred' }), this.state.error?.stack && (_jsx("pre", { style: {
+                            fontSize: '11px',
+                            color: '#888',
+                            background: '#111',
+                            padding: '12px',
+                            borderRadius: '6px',
+                            maxWidth: '80%',
+                            maxHeight: '200px',
+                            overflow: 'auto',
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                        }, children: this.state.error.stack }))] }));
+        }
+        return this.props.children;
+    }
+}
+export default ErrorBoundary;
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/ErrorBoundary.js.map

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

package/dist/Folder.d.ts

@@ -0,0 +1,46 @@
+import { type ReactNode } from 'react';
+/**
+ * The folder path represented as an array of folder names from root to current.
+ */
+type FolderPath = string[];
+/**
+ * Props for the Folder component.
+ */
+interface FolderProps {
+    /** The folder name displayed in the sidebar */
+    name: string;
+    /** Child elements (Compositions or nested Folders) */
+    children: ReactNode;
+}
+/**
+ * Hook to access the current folder path
+ *
+ * Returns:
+ *   string[] - Array of folder names from root to current
+ *
+ * Usage:
+ *   const path = useFolder();
+ *   console.log(path.join(' / ')); // "Effects / Transitions"
+ */
+export declare function useFolder(): FolderPath;
+/**
+ * Folder organizes compositions in the Studio sidebar.
+ *
+ * Folders can be nested to create hierarchical organization.
+ * They don't affect rendering — they're purely for organization in the UI.
+ *
+ * Props:
+ *   name - The folder name displayed in the sidebar
+ *
+ * Usage:
+ *   <Folder name="Marketing">
+ *     <Composition id="promo-video" ... />
+ *     <Folder name="Social">
+ *       <Composition id="instagram-reel" ... />
+ *       <Composition id="tiktok-clip" ... />
+ *     </Folder>
+ *   </Folder>
+ */
+export declare function Folder({ name, children }: FolderProps): JSX.Element;
+export default Folder;
+//# sourceMappingURL=Folder.d.ts.map

package/dist/Folder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Folder.d.ts","sourceRoot":"","sources":["../src/Folder.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE;;GAEG;AACH,KAAK,UAAU,GAAG,MAAM,EAAE,CAAC;AAE3B;;GAEG;AACH,UAAU,WAAW;IACnB,+CAA+C;IAC/C,IAAI,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAOD;;;;;;;;;GASG;AACH,wBAAgB,SAAS,IAAI,UAAU,CAEtC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CASnE;AAED,eAAe,MAAM,CAAC"}

package/dist/Folder.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+/**
+ * Context for tracking folder hierarchy
+ */
+const FolderContext = createContext([]);
+/**
+ * Hook to access the current folder path
+ *
+ * Returns:
+ *   string[] - Array of folder names from root to current
+ *
+ * Usage:
+ *   const path = useFolder();
+ *   console.log(path.join(' / ')); // "Effects / Transitions"
+ */
+export function useFolder() {
+    return useContext(FolderContext);
+}
+/**
+ * Folder organizes compositions in the Studio sidebar.
+ *
+ * Folders can be nested to create hierarchical organization.
+ * They don't affect rendering — they're purely for organization in the UI.
+ *
+ * Props:
+ *   name - The folder name displayed in the sidebar
+ *
+ * Usage:
+ *   <Folder name="Marketing">
+ *     <Composition id="promo-video" ... />
+ *     <Folder name="Social">
+ *       <Composition id="instagram-reel" ... />
+ *       <Composition id="tiktok-clip" ... />
+ *     </Folder>
+ *   </Folder>
+ */
+export function Folder({ name, children }) {
+    const parentPath = useContext(FolderContext);
+    const currentPath = [...parentPath, name];
+    return (_jsx(FolderContext.Provider, { value: currentPath, children: children }));
+}
+export default Folder;
+//# sourceMappingURL=Folder.js.map

package/dist/Folder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Folder.js","sourceRoot":"","sources":["../src/Folder.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAiBlE;;GAEG;AACH,MAAM,aAAa,GAAG,aAAa,CAAa,EAAE,CAAC,CAAC;AAEpD;;;;;;;;;GASG;AACH,MAAM,UAAU,SAAS;IACvB,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AACnC,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAe;IACpD,MAAM,UAAU,GAAe,UAAU,CAAC,aAAa,CAAC,CAAC;IACzD,MAAM,WAAW,GAAe,CAAC,GAAG,UAAU,EAAE,IAAI,CAAC,CAAC;IAEtD,OAAO,CACL,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YACvC,QAAQ,GACc,CAC1B,CAAC;AACJ,CAAC;AAED,eAAe,MAAM,CAAC"}

package/dist/Freeze.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+/**
+ * Props for the Freeze component.
+ */
+export interface FreezeProps {
+    /** The frame number children should see (required). */
+    frame: number;
+    /** Whether to freeze (default: true). If false, children see the normal frame. */
+    active?: boolean;
+    /** The content to render inside the freeze boundary. */
+    children: ReactNode;
+}
+/**
+ * Freeze pauses children at a specific frame.
+ *
+ * Children inside a Freeze component will always see the same frame value,
+ * regardless of the actual timeline position. This is useful for:
+ * - Pausing complex animations at a specific state
+ * - Creating "freeze frame" effects
+ * - Displaying a static frame from a video or animation
+ *
+ * Usage:
+ *   // Freeze at frame 15
+ *   <Freeze frame={15}>
+ *     <MyAnimation />
+ *   </Freeze>
+ *
+ *   // Conditional freeze
+ *   <Freeze frame={30} active={shouldFreeze}>
+ *     <MyAnimation />
+ *   </Freeze>
+ */
+export declare function Freeze({ frame, active, children }: FreezeProps): ReactNode;
+export default Freeze;
+//# sourceMappingURL=Freeze.d.ts.map

package/dist/Freeze.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Freeze.d.ts","sourceRoot":"","sources":["../src/Freeze.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGhD;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAa,EAAE,QAAQ,EAAE,EAAE,WAAW,GAAG,SAAS,CAyBjF;AAED,eAAe,MAAM,CAAC"}

package/dist/Freeze.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import TimelineContext, { useTimeline } from './context';
+/**
+ * Freeze pauses children at a specific frame.
+ *
+ * Children inside a Freeze component will always see the same frame value,
+ * regardless of the actual timeline position. This is useful for:
+ * - Pausing complex animations at a specific state
+ * - Creating "freeze frame" effects
+ * - Displaying a static frame from a video or animation
+ *
+ * Usage:
+ *   // Freeze at frame 15
+ *   <Freeze frame={15}>
+ *     <MyAnimation />
+ *   </Freeze>
+ *
+ *   // Conditional freeze
+ *   <Freeze frame={30} active={shouldFreeze}>
+ *     <MyAnimation />
+ *   </Freeze>
+ */
+export function Freeze({ frame, active = true, children }) {
+    const parent = useTimeline();
+    if (frame === undefined) {
+        throw new Error('Freeze requires a frame prop');
+    }
+    const contextValue = useMemo(() => ({
+        ...parent,
+        frame: active ? frame : parent.frame,
+    }), [parent, frame, active]);
+    // If not active, just render children without context override
+    if (!active) {
+        return children;
+    }
+    return (_jsx(TimelineContext.Provider, { value: contextValue, children: children }));
+}
+export default Freeze;
+//# sourceMappingURL=Freeze.js.map

package/dist/Freeze.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Freeze.js","sourceRoot":"","sources":["../src/Freeze.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAC;AAChD,OAAO,eAAe,EAAE,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAczD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAe;IACpE,MAAM,MAAM,GAAG,WAAW,EAAE,CAAC;IAE7B,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,MAAM,IAAI,KAAK,CAAC,8BAA8B,CAAC,CAAC;IAClD,CAAC;IAED,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC;QACL,GAAG,MAAM;QACT,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK;KACrC,CAAC,EACF,CAAC,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CACxB,CAAC;IAEF,+DAA+D;IAC/D,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,OAAO,CACL,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC1C,QAAQ,GACgB,CAC5B,CAAC;AACJ,CAAC;AAED,eAAe,MAAM,CAAC"}

package/dist/IFrame.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+/**
+ * Props for the IFrame component.
+ *
+ * Extends standard iframe HTML attributes so all native iframe props
+ * (e.g., sandbox, allow, referrerPolicy) are supported.
+ */
+export interface IFrameProps extends React.IframeHTMLAttributes<HTMLIFrameElement> {
+    /** URL to load in the iframe. */
+    src?: string;
+    /** Timeout in ms before failing the delay render. Defaults to 30000. */
+    delayRenderTimeout?: number;
+}
+/**
+ * IFrame component that delays rendering until the iframe content is loaded.
+ *
+ * Useful for embedding web content, charts, maps, or other external content
+ * that needs to be fully loaded before capturing the frame.
+ *
+ * Usage:
+ *   <IFrame
+ *     src="https://example.com/chart"
+ *     style={{ width: 800, height: 600 }}
+ *   />
+ */
+export declare function IFrame({ src, delayRenderTimeout, onLoad, onError, style, className, ...rest }: IFrameProps): React.ReactElement;
+export default IFrame;
+//# sourceMappingURL=IFrame.d.ts.map

package/dist/IFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IFrame.d.ts","sourceRoot":"","sources":["../src/IFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D;;;;;GAKG;AACH,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,iCAAiC;IACjC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,MAAM,CAAC,EACrB,GAAG,EACH,kBAA0B,EAC1B,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,KAAK,CAAC,YAAY,CA4DlC;AAED,eAAe,MAAM,CAAC"}

package/dist/IFrame.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { delayRender, continueRender, cancelRender } from './delayRender';
+/**
+ * IFrame component that delays rendering until the iframe content is loaded.
+ *
+ * Useful for embedding web content, charts, maps, or other external content
+ * that needs to be fully loaded before capturing the frame.
+ *
+ * Usage:
+ *   <IFrame
+ *     src="https://example.com/chart"
+ *     style={{ width: 800, height: 600 }}
+ *   />
+ */
+export function IFrame({ src, delayRenderTimeout = 30000, onLoad, onError, style, className, ...rest }) {
+    const iframeRef = useRef(null);
+    const handleRef = useRef(null);
+    const [loaded, setLoaded] = useState(false);
+    // Delay render until iframe is loaded
+    useEffect(() => {
+        handleRef.current = delayRender(`Loading iframe: ${src}`, {
+            timeoutInMilliseconds: delayRenderTimeout,
+        });
+        return () => {
+            if (handleRef.current !== null) {
+                continueRender(handleRef.current);
+                handleRef.current = null;
+            }
+        };
+    }, [src, delayRenderTimeout]);
+    // Handle iframe load
+    const handleLoad = (event) => {
+        setLoaded(true);
+        onLoad?.(event);
+        if (handleRef.current !== null) {
+            continueRender(handleRef.current);
+            handleRef.current = null;
+        }
+    };
+    // Handle iframe error
+    const handleError = (event) => {
+        const err = new Error(`Failed to load iframe: ${src}`);
+        onError?.(event);
+        if (handleRef.current !== null) {
+            cancelRender(err);
+            handleRef.current = null;
+        }
+    };
+    return (_jsx("iframe", { ref: iframeRef, src: src, onLoad: handleLoad, onError: handleError, style: {
+            border: 'none',
+            ...style,
+            opacity: loaded ? (style?.opacity ?? 1) : 0,
+        }, className: className, ...rest }));
+}
+export default IFrame;
+//# sourceMappingURL=IFrame.js.map

package/dist/IFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IFrame.js","sourceRoot":"","sources":["../src/IFrame.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAgB1E;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,MAAM,CAAC,EACrB,GAAG,EACH,kBAAkB,GAAG,KAAK,EAC1B,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,EACT,GAAG,IAAI,EACK;IACZ,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC9C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAErD,sCAAsC;IACtC,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,OAAO,GAAG,WAAW,CAAC,mBAAmB,GAAG,EAAE,EAAE;YACxD,qBAAqB,EAAE,kBAAkB;SAC1C,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,IAAI,SAAS,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;gBAC/B,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;gBAClC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAAC,CAAC;IAE9B,qBAAqB;IACrB,MAAM,UAAU,GAAG,CACjB,KAA8C,EACxC,EAAE;QACR,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC;QAEhB,IAAI,SAAS,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAC/B,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;YAClC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,CAAC;IACH,CAAC,CAAC;IAEF,sBAAsB;IACtB,MAAM,WAAW,GAAG,CAClB,KAA8C,EACxC,EAAE;QACR,MAAM,GAAG,GAAG,IAAI,KAAK,CAAC,0BAA0B,GAAG,EAAE,CAAC,CAAC;QACvD,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QAEjB,IAAI,SAAS,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAC/B,YAAY,CAAC,GAAG,CAAC,CAAC;YAClB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,iBACE,GAAG,EAAE,SAAS,EACd,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE;YACL,MAAM,EAAE,MAAM;YACd,GAAG,KAAK;YACR,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC5C,EACD,SAAS,EAAE,SAAS,KAChB,IAAI,GACR,CACH,CAAC;AACJ,CAAC;AAED,eAAe,MAAM,CAAC"}

package/dist/Img.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+/**
+ * Props for the Img component.
+ *
+ * Extends standard HTML img attributes with additional props
+ * for controlling image loading behavior during rendering.
+ */
+export interface ImgProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /** Image source URL. Use staticFile() for local assets. */
+    src: string;
+    /** Callback when the image fails to load after all retries. */
+    onError?: React.ReactEventHandler<HTMLImageElement>;
+    /** Number of retry attempts on load failure. Defaults to 2. */
+    maxRetries?: number;
+    /** Pause playback while loading in preview mode. Defaults to false. */
+    pauseWhenLoading?: boolean;
+    /** Custom timeout in milliseconds for delayRender. Defaults to 30000. */
+    delayRenderTimeout?: number;
+    /** Number of retries for delay render timeout. Defaults to 0. */
+    delayRenderRetries?: number;
+}
+/**
+ * Image component that delays rendering until the image is loaded.
+ *
+ * This ensures that images are always visible in rendered frames,
+ * preventing blank spaces or loading states in the final video.
+ *
+ * Usage:
+ *   import { Img, staticFile } from './lib';
+ *
+ *   <Img src={staticFile('images/hero.png')} alt="Hero" />
+ *   <Img src="https://example.com/image.jpg" style={{ width: 200 }} />
+ */
+export declare const Img: React.ForwardRefExoticComponent<ImgProps & React.RefAttributes<HTMLImageElement>>;
+export default Img;
+//# sourceMappingURL=Img.d.ts.map

package/dist/Img.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Img.d.ts","sourceRoot":"","sources":["../src/Img.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D;;;;;GAKG;AACH,MAAM,WAAW,QAAS,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IACzE,2DAA2D;IAC3D,GAAG,EAAE,MAAM,CAAC;IACZ,+DAA+D;IAC/D,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IACpD,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,yEAAyE;IACzE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,GAAG,mFAyGf,CAAC;AAIF,eAAe,GAAG,CAAC"}

package/dist/Img.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useRef, useState } from 'react';
+import { delayRender, continueRender, cancelRender } from './delayRender';
+/**
+ * Image component that delays rendering until the image is loaded.
+ *
+ * This ensures that images are always visible in rendered frames,
+ * preventing blank spaces or loading states in the final video.
+ *
+ * Usage:
+ *   import { Img, staticFile } from './lib';
+ *
+ *   <Img src={staticFile('images/hero.png')} alt="Hero" />
+ *   <Img src="https://example.com/image.jpg" style={{ width: 200 }} />
+ */
+export const Img = React.forwardRef(({ src, onError, maxRetries = 2, pauseWhenLoading = false, delayRenderTimeout = 30000, delayRenderRetries = 0, ...rest }, forwardedRef) => {
+    const [loaded, setLoaded] = useState(false);
+    const [error, setError] = useState(null);
+    const [retryCount, setRetryCount] = useState(0);
+    const handleRef = useRef(null);
+    const imgRef = useRef(null);
+    // Merge forwarded ref and internal ref
+    const setRefs = React.useCallback((node) => {
+        imgRef.current = node;
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = node;
+        }
+    }, [forwardedRef]);
+    // Initialize delay render on mount
+    useEffect(() => {
+        handleRef.current = delayRender(`Loading image: ${src}`, {
+            timeoutInMilliseconds: delayRenderTimeout,
+            retries: delayRenderRetries,
+        });
+        return () => {
+            // Cleanup if component unmounts before load
+            if (handleRef.current !== null) {
+                continueRender(handleRef.current);
+                handleRef.current = null;
+            }
+        };
+    }, [src, delayRenderTimeout, delayRenderRetries]);
+    // Handle image load
+    const handleLoad = () => {
+        setLoaded(true);
+        setError(null);
+        if (handleRef.current !== null) {
+            continueRender(handleRef.current);
+            handleRef.current = null;
+        }
+    };
+    // Handle image error
+    const handleError = (event) => {
+        if (retryCount < maxRetries) {
+            // Retry by forcing a new request
+            setRetryCount((c) => c + 1);
+            if (imgRef.current) {
+                // Add cache-busting query param
+                const separator = src.includes('?') ? '&' : '?';
+                imgRef.current.src = `${src}${separator}_retry=${retryCount + 1}`;
+            }
+            return;
+        }
+        const err = new Error(`Failed to load image: ${src}`);
+        setError(err);
+        onError?.(event);
+        // Cancel the render - image is required
+        if (handleRef.current !== null) {
+            cancelRender(err);
+            handleRef.current = null;
+        }
+    };
+    // Check if image is already cached (loads synchronously)
+    useEffect(() => {
+        if (imgRef.current?.complete && imgRef.current?.naturalWidth > 0) {
+            handleLoad();
+        }
+    }, [src]);
+    return (_jsx("img", { ref: setRefs, src: src, onLoad: handleLoad, onError: handleError, ...rest, 
+        // Hide image until loaded to prevent flash of broken image
+        style: {
+            ...rest.style,
+            opacity: loaded ? (rest.style?.opacity ?? 1) : 0,
+        } }));
+});
+Img.displayName = 'Img';
+export default Img;
+//# sourceMappingURL=Img.js.map

package/dist/Img.js.map

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

package/dist/Loop.d.ts

@@ -0,0 +1,66 @@
+import React, { CSSProperties, ReactNode } from 'react';
+/**
+ * Metadata exposed by the Loop component via LoopContext.
+ */
+export interface LoopContextValue {
+    /** Current iteration index (0-based) */
+    iteration: number;
+    /** Duration of each loop iteration in frames */
+    durationInFrames: number;
+}
+/**
+ * Props for the Loop component.
+ */
+export interface LoopProps {
+    /** Number of frames per iteration (required, must be positive) */
+    durationInFrames: number;
+    /** Number of repetitions (default: Infinity) */
+    times?: number;
+    /** Layout mode: 'absolute-fill' applies absolute positioning, 'none' applies no layout */
+    layout?: 'absolute-fill' | 'none';
+    /** Additional CSS styles applied to the container div */
+    style?: CSSProperties;
+    /** Optional label for debugging */
+    name?: string;
+    /** Child elements rendered inside the loop */
+    children: ReactNode;
+}
+/**
+ * Hook to access loop metadata when inside a Loop component.
+ *
+ * Returns:
+ *   { iteration, durationInFrames } - Current iteration (0-indexed) and loop duration
+ *   null - If not inside a Loop
+ *
+ * Usage:
+ *   const loop = Loop.useLoop();
+ *   if (loop) {
+ *     console.log(`Iteration ${loop.iteration + 1}`);
+ *   }
+ */
+declare function useLoop(): LoopContextValue | null;
+/**
+ * Loop repeats its children for a specified number of iterations.
+ *
+ * The frame counter resets at the start of each iteration, so children
+ * always see frames 0 to durationInFrames-1.
+ *
+ * Props:
+ *   durationInFrames - Frames per iteration (required)
+ *   times            - Number of repetitions (default: Infinity)
+ *   layout           - 'absolute-fill' (default) or 'none'
+ *   style            - Additional CSS styles
+ *   name             - Optional label for debugging
+ *
+ * Usage:
+ *   <Loop durationInFrames={30} times={3}>
+ *     <PulseAnimation />
+ *   </Loop>
+ */
+export declare function Loop({ durationInFrames, times, layout, style, name, children, }: LoopProps): React.ReactElement | null;
+export declare namespace Loop {
+    var useLoop: typeof import("./Loop").useLoop;
+}
+export { useLoop };
+export default Loop;
+//# sourceMappingURL=Loop.d.ts.map

package/dist/Loop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loop.d.ts","sourceRoot":"","sources":["../src/Loop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAsC,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5F;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,wCAAwC;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,gBAAgB,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,kEAAkE;IAClE,gBAAgB,EAAE,MAAM,CAAC;IACzB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,MAAM,CAAC,EAAE,eAAe,GAAG,MAAM,CAAC;IAClC,yDAAyD;IACzD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,QAAQ,EAAE,SAAS,CAAC;CACrB;AAOD;;;;;;;;;;;;GAYG;AACH,iBAAS,OAAO,IAAI,gBAAgB,GAAG,IAAI,CAE1C;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,EACnB,gBAAgB,EAChB,KAAgB,EAChB,MAAwB,EACxB,KAAK,EACL,IAAI,EACJ,QAAQ,GACT,EAAE,SAAS,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CAsDvC;yBA7De,IAAI;;;AAkEpB,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,eAAe,IAAI,CAAC"}

package/dist/Loop.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, createContext, useContext } from 'react';
+import TimelineContext, { useTimeline } from './context';
+/**
+ * Context for accessing loop metadata
+ */
+const LoopContext = createContext(null);
+/**
+ * Hook to access loop metadata when inside a Loop component.
+ *
+ * Returns:
+ *   { iteration, durationInFrames } - Current iteration (0-indexed) and loop duration
+ *   null - If not inside a Loop
+ *
+ * Usage:
+ *   const loop = Loop.useLoop();
+ *   if (loop) {
+ *     console.log(`Iteration ${loop.iteration + 1}`);
+ *   }
+ */
+function useLoop() {
+    return useContext(LoopContext);
+}
+/**
+ * Loop repeats its children for a specified number of iterations.
+ *
+ * The frame counter resets at the start of each iteration, so children
+ * always see frames 0 to durationInFrames-1.
+ *
+ * Props:
+ *   durationInFrames - Frames per iteration (required)
+ *   times            - Number of repetitions (default: Infinity)
+ *   layout           - 'absolute-fill' (default) or 'none'
+ *   style            - Additional CSS styles
+ *   name             - Optional label for debugging
+ *
+ * Usage:
+ *   <Loop durationInFrames={30} times={3}>
+ *     <PulseAnimation />
+ *   </Loop>
+ */
+export function Loop({ durationInFrames, times = Infinity, layout = 'absolute-fill', style, name, children, }) {
+    const parent = useTimeline();
+    if (durationInFrames === undefined || durationInFrames <= 0) {
+        throw new Error('Loop requires a positive durationInFrames');
+    }
+    // Calculate which iteration we're on and the local frame within that iteration
+    const iteration = Math.floor(parent.frame / durationInFrames);
+    const localFrame = parent.frame % durationInFrames;
+    const contextValue = useMemo(() => ({
+        ...parent,
+        frame: localFrame,
+        durationInFrames,
+    }), [parent, localFrame, durationInFrames]);
+    const loopValue = useMemo(() => ({
+        iteration,
+        durationInFrames,
+    }), [iteration, durationInFrames]);
+    const containerStyle = layout === 'absolute-fill'
+        ? {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            ...style,
+        }
+        : style;
+    // Check if we've exceeded the number of loops
+    if (times !== Infinity && iteration >= times) {
+        return null;
+    }
+    return (_jsx(LoopContext.Provider, { value: loopValue, children: _jsx(TimelineContext.Provider, { value: contextValue, children: _jsx("div", { style: containerStyle, "data-loop-name": name, "data-loop-iteration": iteration, children: children }) }) }));
+}
+// Attach the hook to the Loop component for convenient access
+Loop.useLoop = useLoop;
+export { useLoop };
+export default Loop;
+//# sourceMappingURL=Loop.js.map

package/dist/Loop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loop.js","sourceRoot":"","sources":["../src/Loop.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAA4B,MAAM,OAAO,CAAC;AAC5F,OAAO,eAAe,EAAE,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AA8BzD;;GAEG;AACH,MAAM,WAAW,GAAG,aAAa,CAA0B,IAAI,CAAC,CAAC;AAEjE;;;;;;;;;;;;GAYG;AACH,SAAS,OAAO;IACd,OAAO,UAAU,CAAC,WAAW,CAAC,CAAC;AACjC,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,IAAI,CAAC,EACnB,gBAAgB,EAChB,KAAK,GAAG,QAAQ,EAChB,MAAM,GAAG,eAAe,EACxB,KAAK,EACL,IAAI,EACJ,QAAQ,GACE;IACV,MAAM,MAAM,GAAG,WAAW,EAAE,CAAC;IAE7B,IAAI,gBAAgB,KAAK,SAAS,IAAI,gBAAgB,IAAI,CAAC,EAAE,CAAC;QAC5D,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC/D,CAAC;IAED,+EAA+E;IAC/E,MAAM,SAAS,GAAW,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,GAAG,gBAAgB,CAAC,CAAC;IACtE,MAAM,UAAU,GAAW,MAAM,CAAC,KAAK,GAAG,gBAAgB,CAAC;IAE3D,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC;QACL,GAAG,MAAM;QACT,KAAK,EAAE,UAAU;QACjB,gBAAgB;KACjB,CAAC,EACF,CAAC,MAAM,EAAE,UAAU,EAAE,gBAAgB,CAAC,CACvC,CAAC;IAEF,MAAM,SAAS,GAAqB,OAAO,CACzC,GAAG,EAAE,CAAC,CAAC;QACL,SAAS;QACT,gBAAgB;KACjB,CAAC,EACF,CAAC,SAAS,EAAE,gBAAgB,CAAC,CAC9B,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,8CAA8C;IAC9C,IAAI,KAAK,KAAK,QAAQ,IAAI,SAAS,IAAI,KAAK,EAAE,CAAC;QAC7C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,SAAS,YACpC,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,YAAY,YAC3C,cAAK,KAAK,EAAE,cAAc,oBAAkB,IAAI,yBAAuB,SAAS,YAC7E,QAAQ,GACL,GACmB,GACN,CACxB,CAAC;AACJ,CAAC;AAED,8DAA8D;AAC9D,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;AAEvB,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,eAAe,IAAI,CAAC"}