@buildcores/render-client 1.5.0 → 1.7.0

package/dist/index.js

@@ -213,17 +213,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) => {
@@ -235,12 +291,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}`);
     }
@@ -264,18 +324,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}`);
     }
@@ -287,10 +352,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");
     }
@@ -335,12 +397,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}`);
     }
@@ -366,10 +432,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}`);
     }
@@ -402,10 +465,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");
     }
@@ -435,11 +495,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}`);
     }
@@ -462,16 +521,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");
     }
@@ -680,7 +743,21 @@ const useSpriteRender = (input, apiConfig, onLoadStart, options) => {
     const [spriteMetadata, setSpriteMetadata] = react.useState(null);
     const previousInputRef = react.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 = react.useCallback(async (currentInput) => {
         try {
             setIsRenderingSprite(true);
@@ -692,7 +769,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
                 });
@@ -717,7 +799,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);
@@ -742,7 +829,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);
@@ -775,7 +867,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;
         }
@@ -784,7 +881,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;
         }
@@ -877,10 +979,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] = react.useState(1);
+const useZoomPan = ({ displayWidth, displayHeight, minScale = 0.5, maxScale = 2.5, initialScale = 1, } = {}) => {
+    const [scale, setScale] = react.useState(initialScale);
     const [isPinching, setIsPinching] = react.useState(false);
-    const scaleRef = react.useRef(1);
+    const scaleRef = react.useRef(initialScale);
     const pinchDataRef = react.useRef({
         initialDistance: 0,
         initialScale: 1,
@@ -949,9 +1051,9 @@ const useZoomPan = ({ displayWidth, displayHeight, minScale = 1, maxScale = 4, }
         };
     }, [isPinching, setScaleSafe]);
     const reset = react.useCallback(() => {
-        scaleRef.current = 1;
-        setScale(1);
-    }, []);
+        scaleRef.current = initialScale;
+        setScale(initialScale);
+    }, [initialScale]);
     return {
         scale,
         isPinching,
@@ -961,7 +1063,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 = react.useRef(null);
     const containerRef = react.useRef(null);
     const [img, setImg] = react.useState(null);
@@ -971,26 +1073,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 = react.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;
@@ -1003,6 +1124,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