@buildcores/render-client 1.1.0 → 1.2.0

package/dist/index.js

@@ -1,7 +1,8 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
+var framerMotion = require('framer-motion');
 
 // Helper to extract clientX from mouse or touch events
 const getClientX$1 = (e) => {
@@ -20,13 +21,13 @@ const calculateCircularFrame = (startFrame, deltaX, sensitivity, totalFrames) =>
 };
 const useSpriteScrubbing = (canvasRef, totalFrames, options = {}) => {
     const { mouseSensitivity = 0.1, touchSensitivity = 0.1, onFrameChange, } = options;
-    const [isDragging, setIsDragging] = React.useState(false);
-    const [dragStartX, setDragStartX] = React.useState(0);
-    const [dragStartFrame, setDragStartFrame] = React.useState(0);
-    const hasDragged = React.useRef(false);
-    const currentFrame = React.useRef(0);
+    const [isDragging, setIsDragging] = react.useState(false);
+    const [dragStartX, setDragStartX] = react.useState(0);
+    const [dragStartFrame, setDragStartFrame] = react.useState(0);
+    const hasDragged = react.useRef(false);
+    const currentFrame = react.useRef(0);
     // Helper to start dragging (common logic for mouse and touch)
-    const startDrag = React.useCallback((clientX, event) => {
+    const startDrag = react.useCallback((clientX, event) => {
         if (!canvasRef.current)
             return;
         setIsDragging(true);
@@ -36,7 +37,7 @@ const useSpriteScrubbing = (canvasRef, totalFrames, options = {}) => {
         event.preventDefault();
     }, [canvasRef]);
     // Helper to handle drag movement (common logic for mouse and touch)
-    const handleDragMove = React.useCallback((clientX, sensitivity) => {
+    const handleDragMove = react.useCallback((clientX, sensitivity) => {
         if (!isDragging || !canvasRef.current)
             return;
         const deltaX = clientX - dragStartX;
@@ -50,29 +51,29 @@ const useSpriteScrubbing = (canvasRef, totalFrames, options = {}) => {
         return newFrame;
     }, [isDragging, dragStartX, dragStartFrame, totalFrames, onFrameChange]);
     // Helper to end dragging (common logic for mouse and touch)
-    const endDrag = React.useCallback(() => {
+    const endDrag = react.useCallback(() => {
         setIsDragging(false);
     }, []);
-    const handleMouseDown = React.useCallback((e) => {
+    const handleMouseDown = react.useCallback((e) => {
         startDrag(e.clientX, e.nativeEvent);
     }, [startDrag]);
-    const handleTouchStart = React.useCallback((e) => {
+    const handleTouchStart = react.useCallback((e) => {
         startDrag(e.touches[0].clientX, e.nativeEvent);
     }, [startDrag]);
-    const handleDocumentMouseMove = React.useCallback((e) => {
+    const handleDocumentMouseMove = react.useCallback((e) => {
         return handleDragMove(getClientX$1(e), mouseSensitivity);
     }, [handleDragMove, mouseSensitivity]);
-    const handleDocumentTouchMove = React.useCallback((e) => {
+    const handleDocumentTouchMove = react.useCallback((e) => {
         return handleDragMove(getClientX$1(e), touchSensitivity);
     }, [handleDragMove, touchSensitivity]);
-    const handleDocumentMouseUp = React.useCallback(() => {
+    const handleDocumentMouseUp = react.useCallback(() => {
         endDrag();
     }, [endDrag]);
-    const handleDocumentTouchEnd = React.useCallback(() => {
+    const handleDocumentTouchEnd = react.useCallback(() => {
         endDrag();
     }, [endDrag]);
     // Add document-level event listeners when dragging starts
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (isDragging) {
             document.addEventListener("mousemove", handleDocumentMouseMove);
             document.addEventListener("mouseup", handleDocumentMouseUp);
@@ -104,191 +105,11 @@ const useSpriteScrubbing = (canvasRef, totalFrames, options = {}) => {
     };
 };
 
-/**
- * @public
- */
-const MotionConfigContext = React.createContext({
-    transformPagePoint: (p) => p,
-    isStatic: false,
-    reducedMotion: "never",
-});
-
-/*#__NO_SIDE_EFFECTS__*/
-const noop = (any) => any;
-
-if (process.env.NODE_ENV !== "production") ;
-
-function createRenderStep(runNextFrame) {
-    /**
-     * We create and reuse two queues, one to queue jobs for the current frame
-     * and one for the next. We reuse to avoid triggering GC after x frames.
-     */
-    let thisFrame = new Set();
-    let nextFrame = new Set();
-    /**
-     * Track whether we're currently processing jobs in this step. This way
-     * we can decide whether to schedule new jobs for this frame or next.
-     */
-    let isProcessing = false;
-    let flushNextFrame = false;
-    /**
-     * A set of processes which were marked keepAlive when scheduled.
-     */
-    const toKeepAlive = new WeakSet();
-    let latestFrameData = {
-        delta: 0.0,
-        timestamp: 0.0,
-        isProcessing: false,
-    };
-    function triggerCallback(callback) {
-        if (toKeepAlive.has(callback)) {
-            step.schedule(callback);
-            runNextFrame();
-        }
-        callback(latestFrameData);
-    }
-    const step = {
-        /**
-         * Schedule a process to run on the next frame.
-         */
-        schedule: (callback, keepAlive = false, immediate = false) => {
-            const addToCurrentFrame = immediate && isProcessing;
-            const queue = addToCurrentFrame ? thisFrame : nextFrame;
-            if (keepAlive)
-                toKeepAlive.add(callback);
-            if (!queue.has(callback))
-                queue.add(callback);
-            return callback;
-        },
-        /**
-         * Cancel the provided callback from running on the next frame.
-         */
-        cancel: (callback) => {
-            nextFrame.delete(callback);
-            toKeepAlive.delete(callback);
-        },
-        /**
-         * Execute all schedule callbacks.
-         */
-        process: (frameData) => {
-            latestFrameData = frameData;
-            /**
-             * If we're already processing we've probably been triggered by a flushSync
-             * inside an existing process. Instead of executing, mark flushNextFrame
-             * as true and ensure we flush the following frame at the end of this one.
-             */
-            if (isProcessing) {
-                flushNextFrame = true;
-                return;
-            }
-            isProcessing = true;
-            [thisFrame, nextFrame] = [nextFrame, thisFrame];
-            // Execute this frame
-            thisFrame.forEach(triggerCallback);
-            // Clear the frame so no callbacks remain. This is to avoid
-            // memory leaks should this render step not run for a while.
-            thisFrame.clear();
-            isProcessing = false;
-            if (flushNextFrame) {
-                flushNextFrame = false;
-                step.process(frameData);
-            }
-        },
-    };
-    return step;
-}
-
-const stepsOrder = [
-    "read", // Read
-    "resolveKeyframes", // Write/Read/Write/Read
-    "update", // Compute
-    "preRender", // Compute
-    "render", // Write
-    "postRender", // Compute
-];
-const maxElapsed = 40;
-function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
-    let runNextFrame = false;
-    let useDefaultElapsed = true;
-    const state = {
-        delta: 0.0,
-        timestamp: 0.0,
-        isProcessing: false,
-    };
-    const flagRunNextFrame = () => (runNextFrame = true);
-    const steps = stepsOrder.reduce((acc, key) => {
-        acc[key] = createRenderStep(flagRunNextFrame);
-        return acc;
-    }, {});
-    const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
-    const processBatch = () => {
-        const timestamp = performance.now();
-        runNextFrame = false;
-        state.delta = useDefaultElapsed
-            ? 1000 / 60
-            : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
-        state.timestamp = timestamp;
-        state.isProcessing = true;
-        // Unrolled render loop for better per-frame performance
-        read.process(state);
-        resolveKeyframes.process(state);
-        update.process(state);
-        preRender.process(state);
-        render.process(state);
-        postRender.process(state);
-        state.isProcessing = false;
-        if (runNextFrame && allowKeepAlive) {
-            useDefaultElapsed = false;
-            scheduleNextBatch(processBatch);
-        }
-    };
-    const wake = () => {
-        runNextFrame = true;
-        useDefaultElapsed = true;
-        if (!state.isProcessing) {
-            scheduleNextBatch(processBatch);
-        }
-    };
-    const schedule = stepsOrder.reduce((acc, key) => {
-        const step = steps[key];
-        acc[key] = (process, keepAlive = false, immediate = false) => {
-            if (!runNextFrame)
-                wake();
-            return step.schedule(process, keepAlive, immediate);
-        };
-        return acc;
-    }, {});
-    const cancel = (process) => {
-        for (let i = 0; i < stepsOrder.length; i++) {
-            steps[stepsOrder[i]].cancel(process);
-        }
-    };
-    return { schedule, cancel, state, steps };
-}
-
-const { schedule: frame, cancel: cancelFrame} = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
-
-function useAnimationFrame(callback) {
-    const initialTimestamp = React.useRef(0);
-    const { isStatic } = React.useContext(MotionConfigContext);
-    React.useEffect(() => {
-        if (isStatic)
-            return;
-        const provideTimeSinceStart = ({ timestamp, delta }) => {
-            if (!initialTimestamp.current)
-                initialTimestamp.current = timestamp;
-            callback(timestamp - initialTimestamp.current, delta);
-        };
-        frame.update(provideTimeSinceStart, true);
-        return () => cancelFrame(provideTimeSinceStart);
-    }, [callback]);
-}
-
 function useBouncePatternProgress(enabled = true) {
-    const [value, setValue] = React.useState(0);
-    const [isBouncing, setIsBouncing] = React.useState(false);
-    const start = React.useRef(null);
-    useAnimationFrame((t) => {
+    const [value, setValue] = react.useState(0);
+    const [isBouncing, setIsBouncing] = react.useState(false);
+    const start = react.useRef(null);
+    framerMotion.useAnimationFrame((t) => {
         if (!enabled) {
             // Reset animation when disabled
             if (start.current !== null) {
@@ -355,6 +176,9 @@ const renderBuildExperimental = async (request, config) => {
     const requestWithFormat = {
         ...request,
         format: request.format || "video", // Default to video format
+        // Include width and height if provided
+        ...(request.width !== undefined ? { width: request.width } : {}),
+        ...(request.height !== undefined ? { height: request.height } : {}),
     };
     const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL, config), {
         method: "POST",
@@ -379,6 +203,9 @@ const createRenderBuildJob = async (request, config) => {
         parts: request.parts,
         // If provided, forward format; default handled server-side but we keep explicit default
         ...(request.format ? { format: request.format } : {}),
+        // Include width and height if provided
+        ...(request.width !== undefined ? { width: request.width } : {}),
+        ...(request.height !== undefined ? { height: request.height } : {}),
     };
     const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD, config), {
         method: "POST",
@@ -439,6 +266,9 @@ const renderSpriteExperimental = async (request, config) => {
     const requestWithFormat = {
         ...request,
         format: "sprite",
+        // Include width and height if provided
+        ...(request.width !== undefined ? { width: request.width } : {}),
+        ...(request.height !== undefined ? { height: request.height } : {}),
     };
     const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL, config), {
         method: "POST",
@@ -549,11 +379,11 @@ const arePartsEqual = (parts1, parts2) => {
     return true;
 };
 const useBuildRender = (parts, apiConfig, onLoadStart, options) => {
-    const [videoSrc, setVideoSrc] = React.useState(null);
-    const [isRenderingBuild, setIsRenderingBuild] = React.useState(false);
-    const [renderError, setRenderError] = React.useState(null);
-    const previousPartsRef = React.useRef(null);
-    const fetchRenderBuild = React.useCallback(async (currentParts) => {
+    const [videoSrc, setVideoSrc] = react.useState(null);
+    const [isRenderingBuild, setIsRenderingBuild] = react.useState(false);
+    const [renderError, setRenderError] = react.useState(null);
+    const previousPartsRef = react.useRef(null);
+    const fetchRenderBuild = react.useCallback(async (currentParts) => {
         try {
             setIsRenderingBuild(true);
             setRenderError(null);
@@ -588,7 +418,7 @@ const useBuildRender = (parts, apiConfig, onLoadStart, options) => {
         }
     }, [apiConfig, onLoadStart, options?.mode]);
     // Effect to call API when parts content changes (using custom equality check)
-    React.useEffect(() => {
+    react.useEffect(() => {
         const shouldFetch = previousPartsRef.current === null ||
             !arePartsEqual(previousPartsRef.current, parts);
         if (shouldFetch) {
@@ -597,7 +427,7 @@ const useBuildRender = (parts, apiConfig, onLoadStart, options) => {
         }
     }, [parts, fetchRenderBuild]);
     // Cleanup effect for component unmount
-    React.useEffect(() => {
+    react.useEffect(() => {
         return () => {
             if (videoSrc && videoSrc.startsWith("blob:")) {
                 URL.revokeObjectURL(videoSrc);
@@ -612,12 +442,12 @@ const useBuildRender = (parts, apiConfig, onLoadStart, options) => {
 };
 
 const useSpriteRender = (parts, apiConfig, onLoadStart, options) => {
-    const [spriteSrc, setSpriteSrc] = React.useState(null);
-    const [isRenderingSprite, setIsRenderingSprite] = React.useState(false);
-    const [renderError, setRenderError] = React.useState(null);
-    const [spriteMetadata, setSpriteMetadata] = React.useState(null);
-    const previousPartsRef = React.useRef(null);
-    const fetchRenderSprite = React.useCallback(async (currentParts) => {
+    const [spriteSrc, setSpriteSrc] = react.useState(null);
+    const [isRenderingSprite, setIsRenderingSprite] = react.useState(false);
+    const [renderError, setRenderError] = react.useState(null);
+    const [spriteMetadata, setSpriteMetadata] = react.useState(null);
+    const previousPartsRef = react.useRef(null);
+    const fetchRenderSprite = react.useCallback(async (currentParts) => {
         try {
             setIsRenderingSprite(true);
             setRenderError(null);
@@ -661,7 +491,7 @@ const useSpriteRender = (parts, apiConfig, onLoadStart, options) => {
         }
     }, [apiConfig, onLoadStart, options?.mode]);
     // Effect to call API when parts content changes (using custom equality check)
-    React.useEffect(() => {
+    react.useEffect(() => {
         const shouldFetch = previousPartsRef.current === null ||
             !arePartsEqual(previousPartsRef.current, parts);
         if (shouldFetch) {
@@ -670,7 +500,7 @@ const useSpriteRender = (parts, apiConfig, onLoadStart, options) => {
         }
     }, [parts, fetchRenderSprite]);
     // Cleanup effect for component unmount
-    React.useEffect(() => {
+    react.useEffect(() => {
         return () => {
             if (spriteSrc && spriteSrc.startsWith("blob:")) {
                 URL.revokeObjectURL(spriteSrc);
@@ -741,10 +571,10 @@ const InstructionTooltip = ({ isVisible, progressValue, instructionIcon, }) => {
 };
 
 const BuildRender = ({ parts, width, height, size, apiConfig, useSpriteRenderOptions, mouseSensitivity = 0.2, touchSensitivity = 0.2, }) => {
-    const canvasRef = React.useRef(null);
-    const [img, setImg] = React.useState(null);
-    const [isLoading, setIsLoading] = React.useState(true);
-    const [bouncingAllowed, setBouncingAllowed] = React.useState(false);
+    const canvasRef = react.useRef(null);
+    const [img, setImg] = react.useState(null);
+    const [isLoading, setIsLoading] = react.useState(true);
+    const [bouncingAllowed, setBouncingAllowed] = react.useState(false);
     const displayW = width ?? size ?? 300;
     const displayH = height ?? size ?? 300;
     // Use custom hook for sprite rendering
@@ -753,12 +583,12 @@ const BuildRender = ({ parts, width, height, size, apiConfig, useSpriteRenderOpt
     const total = spriteMetadata ? spriteMetadata.totalFrames : 72;
     const cols = spriteMetadata ? spriteMetadata.cols : 12;
     const rows = spriteMetadata ? spriteMetadata.rows : 6;
-    const frameRef = React.useRef(0);
+    const frameRef = react.useRef(0);
     // Image/frame sizes
     const frameW = img ? img.width / cols : 0;
     const frameH = img ? img.height / rows : 0;
     // ---- Load sprite image ----
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (!spriteSrc) {
             setImg(null);
             setIsLoading(true);
@@ -783,7 +613,7 @@ const BuildRender = ({ parts, width, height, size, apiConfig, useSpriteRenderOpt
         };
     }, [spriteSrc]);
     // ---- Drawing function ----
-    const draw = React.useCallback((frameIndex) => {
+    const draw = react.useCallback((frameIndex) => {
         const cnv = canvasRef.current;
         if (!cnv || !img || !frameW || !frameH)
             return;
@@ -822,12 +652,12 @@ const BuildRender = ({ parts, width, height, size, apiConfig, useSpriteRenderOpt
             draw(newFrame);
         },
     });
-    React.useCallback(() => {
+    react.useCallback(() => {
         setIsLoading(true);
         setBouncingAllowed(false);
     }, []);
     // Auto-rotate when bouncing is allowed and not dragged
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (hasDragged.current || !img)
             return;
         // Calculate frame based on progress value (similar to video time calculation)
@@ -836,7 +666,7 @@ const BuildRender = ({ parts, width, height, size, apiConfig, useSpriteRenderOpt
         draw(frame);
     }, [progressValue, hasDragged, img, total, draw]);
     // Initial draw once image is ready
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (img && !isLoading) {
             draw(frameRef.current);
         }
@@ -879,12 +709,12 @@ const calculateCircularTime = (startTime, deltaX, sensitivity, duration) => {
 };
 const useVideoScrubbing = (videoRef, options = {}) => {
     const { mouseSensitivity = 0.01, touchSensitivity = 0.01 } = options;
-    const [isDragging, setIsDragging] = React.useState(false);
-    const [dragStartX, setDragStartX] = React.useState(0);
-    const [dragStartTime, setDragStartTime] = React.useState(0);
-    const hasDragged = React.useRef(false);
+    const [isDragging, setIsDragging] = react.useState(false);
+    const [dragStartX, setDragStartX] = react.useState(0);
+    const [dragStartTime, setDragStartTime] = react.useState(0);
+    const hasDragged = react.useRef(false);
     // Helper to start dragging (common logic for mouse and touch)
-    const startDrag = React.useCallback((clientX, event) => {
+    const startDrag = react.useCallback((clientX, event) => {
         if (!videoRef.current)
             return;
         setIsDragging(true);
@@ -894,7 +724,7 @@ const useVideoScrubbing = (videoRef, options = {}) => {
         event.preventDefault();
     }, [videoRef]);
     // Helper to handle drag movement (common logic for mouse and touch)
-    const handleDragMove = React.useCallback((clientX, sensitivity) => {
+    const handleDragMove = react.useCallback((clientX, sensitivity) => {
         if (!isDragging || !videoRef.current)
             return;
         const deltaX = clientX - dragStartX;
@@ -905,29 +735,29 @@ const useVideoScrubbing = (videoRef, options = {}) => {
         }
     }, [isDragging, dragStartX, dragStartTime, videoRef]);
     // Helper to end dragging (common logic for mouse and touch)
-    const endDrag = React.useCallback(() => {
+    const endDrag = react.useCallback(() => {
         setIsDragging(false);
     }, []);
-    const handleMouseDown = React.useCallback((e) => {
+    const handleMouseDown = react.useCallback((e) => {
         startDrag(e.clientX, e.nativeEvent);
     }, [startDrag]);
-    const handleTouchStart = React.useCallback((e) => {
+    const handleTouchStart = react.useCallback((e) => {
         startDrag(e.touches[0].clientX, e.nativeEvent);
     }, [startDrag]);
-    const handleDocumentMouseMove = React.useCallback((e) => {
+    const handleDocumentMouseMove = react.useCallback((e) => {
         handleDragMove(getClientX(e), mouseSensitivity);
     }, [handleDragMove, mouseSensitivity]);
-    const handleDocumentTouchMove = React.useCallback((e) => {
+    const handleDocumentTouchMove = react.useCallback((e) => {
         handleDragMove(getClientX(e), touchSensitivity);
     }, [handleDragMove, touchSensitivity]);
-    const handleDocumentMouseUp = React.useCallback(() => {
+    const handleDocumentMouseUp = react.useCallback(() => {
         endDrag();
     }, [endDrag]);
-    const handleDocumentTouchEnd = React.useCallback(() => {
+    const handleDocumentTouchEnd = react.useCallback(() => {
         endDrag();
     }, [endDrag]);
     // Add document-level event listeners when dragging starts
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (isDragging) {
             document.addEventListener("mousemove", handleDocumentMouseMove);
             document.addEventListener("mouseup", handleDocumentMouseUp);
@@ -956,9 +786,9 @@ const useVideoScrubbing = (videoRef, options = {}) => {
 };
 
 const BuildRenderVideo = ({ parts, width, height, size, apiConfig, useBuildRenderOptions, mouseSensitivity = 0.01, touchSensitivity = 0.01, }) => {
-    const videoRef = React.useRef(null);
-    const [isLoading, setIsLoading] = React.useState(true);
-    const [bouncingAllowed, setBouncingAllowed] = React.useState(false);
+    const videoRef = react.useRef(null);
+    const [isLoading, setIsLoading] = react.useState(true);
+    const [bouncingAllowed, setBouncingAllowed] = react.useState(false);
     const displayW = width ?? size ?? 300;
     const displayH = height ?? size ?? 300;
     // Use custom hook for build rendering
@@ -968,18 +798,18 @@ const BuildRenderVideo = ({ parts, width, height, size, apiConfig, useBuildRende
         mouseSensitivity,
         touchSensitivity,
     });
-    const handleLoadStartInternal = React.useCallback(() => {
+    const handleLoadStartInternal = react.useCallback(() => {
         setIsLoading(true);
         setBouncingAllowed(false);
     }, []);
-    const handleCanPlayInternal = React.useCallback(() => {
+    const handleCanPlayInternal = react.useCallback(() => {
         setIsLoading(false);
         // Start bouncing animation after delay
         setTimeout(() => {
             setBouncingAllowed(true);
         }, 2000);
     }, []);
-    React.useEffect(() => {
+    react.useEffect(() => {
         if (hasDragged.current || !videoRef.current)
             return;
         const duration = videoRef.current.duration;