@buildcores/render-client 1.5.0 → 1.7.0

package/dist/index.esm.js

@@ -211,17 +211,73 @@ const buildApiUrl = (endpoint, config) => {
     }
     return baseUrl;
 };
+const SESSION_TOKEN_REFRESH_WINDOW_MS = 15000;
+const sessionTokenCache = new WeakMap();
+const resolveAuthMode = (config) => config.authMode ?? (config.getRenderSessionToken ? "session" : "legacy");
+const isSessionAuthMode = (config) => resolveAuthMode(config) === "session";
+const parseExpiresAtMs = (expiresAt) => {
+    const parsed = Date.parse(expiresAt);
+    if (!Number.isFinite(parsed)) {
+        throw new Error("Invalid session token expiry (expiresAt)");
+    }
+    return parsed;
+};
+const resolveSessionToken = async (config, forceRefresh) => {
+    const supplier = config.getRenderSessionToken;
+    if (!supplier) {
+        throw new Error("authMode=session requires getRenderSessionToken");
+    }
+    const cached = sessionTokenCache.get(supplier);
+    const now = Date.now();
+    if (!forceRefresh &&
+        cached &&
+        cached.expiresAtMs - SESSION_TOKEN_REFRESH_WINDOW_MS > now) {
+        return cached.token;
+    }
+    const session = await supplier();
+    if (!session?.token || !session?.expiresAt) {
+        throw new Error("getRenderSessionToken must return { token, expiresAt }");
+    }
+    const expiresAtMs = parseExpiresAtMs(session.expiresAt);
+    sessionTokenCache.set(supplier, {
+        token: session.token,
+        expiresAtMs,
+    });
+    return session.token;
+};
+const resolveAuthToken = async (config, forceRefresh) => {
+    if (isSessionAuthMode(config)) {
+        return resolveSessionToken(config, forceRefresh);
+    }
+    return config.authToken;
+};
 // Helper to build request headers with auth token
-const buildHeaders = (config) => {
+const buildHeaders = (config, authTokenOverride) => {
     const headers = {
         "Content-Type": "application/json",
         accept: "application/json",
     };
-    if (config.authToken) {
-        headers["Authorization"] = `Bearer ${config.authToken}`;
+    const authToken = authTokenOverride ?? config.authToken;
+    if (authToken) {
+        headers["Authorization"] = `Bearer ${authToken}`;
     }
     return headers;
 };
+const fetchWithApiAuth = async (url, init, config) => {
+    const firstToken = await resolveAuthToken(config, false);
+    const firstResponse = await fetch(url, {
+        ...init,
+        headers: buildHeaders(config, firstToken),
+    });
+    if (!isSessionAuthMode(config) || firstResponse.status !== 401) {
+        return firstResponse;
+    }
+    const refreshedToken = await resolveAuthToken(config, true);
+    return fetch(url, {
+        ...init,
+        headers: buildHeaders(config, refreshedToken),
+    });
+};
 const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 // API Implementation
 const renderBuildExperimental = async (request, config) => {
@@ -233,12 +289,16 @@ const renderBuildExperimental = async (request, config) => {
         ...(request.height !== undefined ? { height: request.height } : {}),
         // Include profile if provided
         ...(request.profile ? { profile: request.profile } : {}),
+        ...(request.scene ? { scene: request.scene } : {}),
+        ...(request.showBackground !== undefined ? { showBackground: request.showBackground } : {}),
+        ...(request.showGrid !== undefined ? { showGrid: request.showGrid } : {}),
+        ...(request.winterMode !== undefined ? { winterMode: request.winterMode } : {}),
+        ...(request.springMode !== undefined ? { springMode: request.springMode } : {}),
     };
-    const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL, config), {
+    const response = await fetchWithApiAuth(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL, config), {
         method: "POST",
-        headers: buildHeaders(config),
         body: JSON.stringify(requestWithFormat),
-    });
+    }, config);
     if (!response.ok) {
         throw new Error(`Render build failed: ${response.status} ${response.statusText}`);
     }
@@ -262,18 +322,23 @@ const createRenderBuildJob = async (request, config) => {
         ...(request.height !== undefined ? { height: request.height } : {}),
         // Include profile if provided
         ...(request.profile ? { profile: request.profile } : {}),
+        ...(request.scene ? { scene: request.scene } : {}),
+        ...(request.showBackground !== undefined ? { showBackground: request.showBackground } : {}),
         // Include composition settings
         ...(request.showGrid !== undefined ? { showGrid: request.showGrid } : {}),
+        ...(request.winterMode !== undefined ? { winterMode: request.winterMode } : {}),
+        ...(request.springMode !== undefined ? { springMode: request.springMode } : {}),
         ...(request.cameraOffsetX !== undefined ? { cameraOffsetX: request.cameraOffsetX } : {}),
         ...(request.gridSettings ? { gridSettings: request.gridSettings } : {}),
         // Include frame quality for sprite rendering
         ...(request.frameQuality ? { frameQuality: request.frameQuality } : {}),
+        // Include camera zoom for render-time scaling
+        ...(request.cameraZoom !== undefined ? { cameraZoom: request.cameraZoom } : {}),
     };
-    const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD, config), {
+    const response = await fetchWithApiAuth(buildApiUrl(API_ENDPOINTS.RENDER_BUILD, config), {
         method: "POST",
-        headers: buildHeaders(config),
         body: JSON.stringify(body),
-    });
+    }, config);
     if (!response.ok) {
         throw new Error(`Create render job failed: ${response.status} ${response.statusText}`);
     }
@@ -285,10 +350,7 @@ const createRenderBuildJob = async (request, config) => {
 };
 const getRenderBuildStatus = async (jobId, config) => {
     const url = buildApiUrl(`${API_ENDPOINTS.RENDER_BUILD}/${encodeURIComponent(jobId)}`, config);
-    const response = await fetch(url, {
-        method: "GET",
-        headers: buildHeaders(config),
-    });
+    const response = await fetchWithApiAuth(url, { method: "GET" }, config);
     if (response.status === 404) {
         throw new Error("Render job not found");
     }
@@ -333,12 +395,16 @@ const renderSpriteExperimental = async (request, config) => {
         ...(request.height !== undefined ? { height: request.height } : {}),
         // Include profile if provided
         ...(request.profile ? { profile: request.profile } : {}),
+        ...(request.scene ? { scene: request.scene } : {}),
+        ...(request.showBackground !== undefined ? { showBackground: request.showBackground } : {}),
+        ...(request.showGrid !== undefined ? { showGrid: request.showGrid } : {}),
+        ...(request.winterMode !== undefined ? { winterMode: request.winterMode } : {}),
+        ...(request.springMode !== undefined ? { springMode: request.springMode } : {}),
     };
-    const response = await fetch(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL, config), {
+    const response = await fetchWithApiAuth(buildApiUrl(API_ENDPOINTS.RENDER_BUILD_EXPERIMENTAL, config), {
         method: "POST",
-        headers: buildHeaders(config),
         body: JSON.stringify(requestWithFormat),
-    });
+    }, config);
     if (!response.ok) {
         throw new Error(`Render sprite failed: ${response.status} ${response.statusText}`);
     }
@@ -364,10 +430,7 @@ const getAvailableParts = async (category, config, options) => {
         params.set("skip", String(options.skip));
     const separator = base.includes("?") ? "&" : "?";
     const url = `${base}${separator}${params.toString()}`;
-    const response = await fetch(url, {
-        method: "GET",
-        headers: buildHeaders(config),
-    });
+    const response = await fetchWithApiAuth(url, { method: "GET" }, config);
     if (!response.ok) {
         throw new Error(`Get available parts failed: ${response.status} ${response.statusText}`);
     }
@@ -400,10 +463,7 @@ const getAvailableParts = async (category, config, options) => {
  */
 const getBuildByShareCode = async (shareCode, config) => {
     const url = buildApiUrl(`${API_ENDPOINTS.BUILD}/${encodeURIComponent(shareCode)}`, config);
-    const response = await fetch(url, {
-        method: "GET",
-        headers: buildHeaders(config),
-    });
+    const response = await fetchWithApiAuth(url, { method: "GET" }, config);
     if (response.status === 404) {
         throw new Error("Build not found");
     }
@@ -433,11 +493,10 @@ const getBuildByShareCode = async (shareCode, config) => {
  */
 const getPartsByIds = async (partIds, config) => {
     const url = buildApiUrl(API_ENDPOINTS.PARTS, config);
-    const response = await fetch(url, {
+    const response = await fetchWithApiAuth(url, {
         method: "POST",
-        headers: buildHeaders(config),
         body: JSON.stringify({ ids: partIds }),
-    });
+    }, config);
     if (!response.ok) {
         throw new Error(`Get parts by IDs failed: ${response.status} ${response.statusText}`);
     }
@@ -460,16 +519,20 @@ const createRenderByShareCodeJob = async (shareCode, config, options) => {
         ...(options?.width !== undefined ? { width: options.width } : {}),
         ...(options?.height !== undefined ? { height: options.height } : {}),
         ...(options?.profile ? { profile: options.profile } : {}),
+        ...(options?.scene ? { scene: options.scene } : {}),
+        ...(options?.showBackground !== undefined ? { showBackground: options.showBackground } : {}),
         ...(options?.showGrid !== undefined ? { showGrid: options.showGrid } : {}),
+        ...(options?.winterMode !== undefined ? { winterMode: options.winterMode } : {}),
+        ...(options?.springMode !== undefined ? { springMode: options.springMode } : {}),
         ...(options?.cameraOffsetX !== undefined ? { cameraOffsetX: options.cameraOffsetX } : {}),
         ...(options?.gridSettings ? { gridSettings: options.gridSettings } : {}),
         ...(options?.frameQuality ? { frameQuality: options.frameQuality } : {}),
+        ...(options?.cameraZoom !== undefined ? { cameraZoom: options.cameraZoom } : {}),
     };
-    const response = await fetch(url, {
+    const response = await fetchWithApiAuth(url, {
         method: "POST",
-        headers: buildHeaders(config),
         body: JSON.stringify(body),
-    });
+    }, config);
     if (response.status === 404) {
         throw new Error("Build not found");
     }
@@ -678,7 +741,21 @@ const useSpriteRender = (input, apiConfig, onLoadStart, options) => {
     const [spriteMetadata, setSpriteMetadata] = useState(null);
     const previousInputRef = useRef(null);
     // Normalize input to SpriteRenderInput format
-    const normalizedInput = 'type' in input ? input : { type: 'parts', parts: input };
+    const normalizedInput = 'type' in input
+        ? input
+        : {
+            type: 'parts',
+            parts: input,
+            showGrid: input.showGrid,
+            scene: input.scene,
+            showBackground: input.showBackground,
+            winterMode: input.winterMode,
+            springMode: input.springMode,
+            cameraOffsetX: input.cameraOffsetX,
+            cameraZoom: input.cameraZoom,
+            gridSettings: input.gridSettings,
+            frameQuality: input.frameQuality
+        };
     const fetchRenderSprite = useCallback(async (currentInput) => {
         try {
             setIsRenderingSprite(true);
@@ -690,7 +767,12 @@ const useSpriteRender = (input, apiConfig, onLoadStart, options) => {
                     format: 'sprite',
                     profile: currentInput.profile,
                     showGrid: currentInput.showGrid,
+                    scene: currentInput.scene,
+                    showBackground: currentInput.showBackground,
+                    winterMode: currentInput.winterMode,
+                    springMode: currentInput.springMode,
                     cameraOffsetX: currentInput.cameraOffsetX,
+                    cameraZoom: currentInput.cameraZoom,
                     gridSettings: currentInput.gridSettings,
                     frameQuality: currentInput.frameQuality
                 });
@@ -715,7 +797,12 @@ const useSpriteRender = (input, apiConfig, onLoadStart, options) => {
                 const response = await renderSpriteExperimental({
                     ...currentParts,
                     showGrid: currentInput.showGrid,
+                    scene: currentInput.scene,
+                    showBackground: currentInput.showBackground,
+                    winterMode: currentInput.winterMode,
+                    springMode: currentInput.springMode,
                     cameraOffsetX: currentInput.cameraOffsetX,
+                    cameraZoom: currentInput.cameraZoom,
                     gridSettings: currentInput.gridSettings,
                     frameQuality,
                 }, apiConfig);
@@ -740,7 +827,12 @@ const useSpriteRender = (input, apiConfig, onLoadStart, options) => {
                     ...currentParts,
                     format: "sprite",
                     showGrid: currentInput.showGrid,
+                    scene: currentInput.scene,
+                    showBackground: currentInput.showBackground,
+                    winterMode: currentInput.winterMode,
+                    springMode: currentInput.springMode,
                     cameraOffsetX: currentInput.cameraOffsetX,
+                    cameraZoom: currentInput.cameraZoom,
                     gridSettings: currentInput.gridSettings,
                     frameQuality,
                 }, apiConfig);
@@ -773,7 +865,12 @@ const useSpriteRender = (input, apiConfig, onLoadStart, options) => {
             return a.shareCode === b.shareCode &&
                 a.profile === b.profile &&
                 a.showGrid === b.showGrid &&
+                a.scene === b.scene &&
+                a.showBackground === b.showBackground &&
+                a.winterMode === b.winterMode &&
+                a.springMode === b.springMode &&
                 a.cameraOffsetX === b.cameraOffsetX &&
+                a.cameraZoom === b.cameraZoom &&
                 a.frameQuality === b.frameQuality &&
                 gridSettingsEqual;
         }
@@ -782,7 +879,12 @@ const useSpriteRender = (input, apiConfig, onLoadStart, options) => {
             const gridSettingsEqual = JSON.stringify(a.gridSettings ?? {}) === JSON.stringify(b.gridSettings ?? {});
             return arePartsEqual(a.parts, b.parts) &&
                 a.showGrid === b.showGrid &&
+                a.scene === b.scene &&
+                a.showBackground === b.showBackground &&
+                a.winterMode === b.winterMode &&
+                a.springMode === b.springMode &&
                 a.cameraOffsetX === b.cameraOffsetX &&
+                a.cameraZoom === b.cameraZoom &&
                 a.frameQuality === b.frameQuality &&
                 gridSettingsEqual;
         }
@@ -875,10 +977,10 @@ const getTouchDistance = (touches) => {
         return 0;
     return Math.hypot(second.clientX - first.clientX, second.clientY - first.clientY);
 };
-const useZoomPan = ({ displayWidth, displayHeight, minScale = 1, maxScale = 4, } = {}) => {
-    const [scale, setScale] = useState(1);
+const useZoomPan = ({ displayWidth, displayHeight, minScale = 0.5, maxScale = 2.5, initialScale = 1, } = {}) => {
+    const [scale, setScale] = useState(initialScale);
     const [isPinching, setIsPinching] = useState(false);
-    const scaleRef = useRef(1);
+    const scaleRef = useRef(initialScale);
     const pinchDataRef = useRef({
         initialDistance: 0,
         initialScale: 1,
@@ -947,9 +1049,9 @@ const useZoomPan = ({ displayWidth, displayHeight, minScale = 1, maxScale = 4, }
         };
     }, [isPinching, setScaleSafe]);
     const reset = useCallback(() => {
-        scaleRef.current = 1;
-        setScale(1);
-    }, []);
+        scaleRef.current = initialScale;
+        setScale(initialScale);
+    }, [initialScale]);
     return {
         scale,
         isPinching,
@@ -959,7 +1061,7 @@ const useZoomPan = ({ displayWidth, displayHeight, minScale = 1, maxScale = 4, }
     };
 };
 
-const BuildRender = ({ parts, shareCode, width, height, size, apiConfig, useSpriteRenderOptions, mouseSensitivity = 0.2, touchSensitivity = 0.2, showGrid, cameraOffsetX, gridSettings, animationMode = 'bounce', spinDuration = 10000, interactive = true, frameQuality, }) => {
+const BuildRender = ({ parts, shareCode, width, height, size, apiConfig, useSpriteRenderOptions, mouseSensitivity = 0.2, touchSensitivity = 0.2, showGrid, scene, showBackground, winterMode, springMode, cameraOffsetX, cameraZoom, gridSettings, animationMode = 'bounce', spinDuration = 10000, interactive = true, frameQuality, zoom = 1, }) => {
     const canvasRef = useRef(null);
     const containerRef = useRef(null);
     const [img, setImg] = useState(null);
@@ -969,26 +1071,45 @@ const BuildRender = ({ parts, shareCode, width, height, size, apiConfig, useSpri
     const displayH = height ?? size ?? 300;
     // Build the render input - prefer shareCode if provided (preserves interactive state like case fan slots)
     const renderInput = useMemo(() => {
+        const resolvedShowGrid = showGrid ?? parts?.showGrid;
+        const resolvedScene = scene ?? parts?.scene;
+        const resolvedShowBackground = showBackground ?? parts?.showBackground;
+        const resolvedWinterMode = winterMode ?? parts?.winterMode;
+        const resolvedSpringMode = springMode ?? parts?.springMode;
+        const resolvedCameraOffsetX = cameraOffsetX ?? parts?.cameraOffsetX;
+        const resolvedCameraZoom = cameraZoom ?? parts?.cameraZoom;
+        const resolvedGridSettings = gridSettings ?? parts?.gridSettings;
+        const resolvedFrameQuality = frameQuality ?? parts?.frameQuality;
         if (shareCode) {
             return {
                 type: 'shareCode',
                 shareCode,
                 profile: parts?.profile,
-                showGrid,
-                cameraOffsetX,
-                gridSettings,
-                frameQuality,
+                showGrid: resolvedShowGrid,
+                scene: resolvedScene,
+                showBackground: resolvedShowBackground,
+                winterMode: resolvedWinterMode,
+                springMode: resolvedSpringMode,
+                cameraOffsetX: resolvedCameraOffsetX,
+                cameraZoom: resolvedCameraZoom,
+                gridSettings: resolvedGridSettings,
+                frameQuality: resolvedFrameQuality,
             };
         }
         return {
             type: 'parts',
             parts: parts,
-            showGrid,
-            cameraOffsetX,
-            gridSettings,
-            frameQuality,
+            showGrid: resolvedShowGrid,
+            scene: resolvedScene,
+            showBackground: resolvedShowBackground,
+            winterMode: resolvedWinterMode,
+            springMode: resolvedSpringMode,
+            cameraOffsetX: resolvedCameraOffsetX,
+            cameraZoom: resolvedCameraZoom,
+            gridSettings: resolvedGridSettings,
+            frameQuality: resolvedFrameQuality,
         };
-    }, [shareCode, parts, showGrid, cameraOffsetX, gridSettings, frameQuality]);
+    }, [shareCode, parts, showGrid, scene, showBackground, winterMode, springMode, cameraOffsetX, cameraZoom, gridSettings, frameQuality]);
     // Use custom hook for sprite rendering
     const { spriteSrc, isRenderingSprite, renderError, spriteMetadata } = useSpriteRender(renderInput, apiConfig, undefined, useSpriteRenderOptions);
     const total = spriteMetadata ? spriteMetadata.totalFrames : 72;
@@ -1001,6 +1122,7 @@ const BuildRender = ({ parts, shareCode, width, height, size, apiConfig, useSpri
     const { scale, handleWheel: handleZoomWheel, handleTouchStart: handleZoomTouchStart, reset: resetZoom, } = useZoomPan({
         displayWidth: displayW,
         displayHeight: displayH,
+        initialScale: zoom,
     });
     // Image/frame sizes - only calculate if image dimensions match expected metadata
     // This prevents using stale image with new metadata during transitions