visualfries 0.1.10110 → 0.1.10115

package/dist/SceneBuilder.svelte.js

@@ -403,7 +403,9 @@ export class SceneBuilder {
                     framesSkipped += 1;
                 }
                 else {
-                    frame = await this.seekAndRenderFrame(frameTime, undefined, format, quality, imageOptions);
+                    // isSceneDirty() already sought and prepared server deterministic state.
+                    // Render directly to avoid a second seek in the dirty path.
+                    frame = await this.renderFrame(undefined, format, quality, imageOptions);
                     previousFrame = frame;
                 }
             }

package/dist/commands/SeekCommand.js

@@ -13,6 +13,7 @@ export class SeekCommand {
     renderManager;
     componentsManager;
     deterministicMediaManager;
+    #didAwaitFontsReady = false;
     constructor(cradle) {
         this.timeline = cradle.timelineManager;
         this.state = cradle.stateManager;
@@ -61,17 +62,62 @@ export class SeekCommand {
         }
         return pending;
     }
+    #getCurrentSceneFrameIndex() {
+        const fps = this.state.data?.settings?.fps || 30;
+        const currentTime = this.state.currentTime ?? 0;
+        return Math.max(0, Math.round(currentTime * fps));
+    }
+    async #delay(ms) {
+        if (ms <= 0) {
+            const immediate = globalThis.setImmediate;
+            if (typeof immediate === 'function') {
+                await new Promise((resolve) => {
+                    immediate(resolve);
+                });
+                return;
+            }
+            await Promise.resolve();
+            return;
+        }
+        await new Promise((resolve) => setTimeout(resolve, ms));
+    }
+    async #awaitFontsReadyOnce() {
+        if (this.#didAwaitFontsReady) {
+            return;
+        }
+        this.#didAwaitFontsReady = true;
+        if (typeof document === 'undefined' || !document.fonts?.ready) {
+            return;
+        }
+        try {
+            await Promise.race([
+                document.fonts.ready,
+                new Promise((resolve) => setTimeout(resolve, 2000))
+            ]);
+        }
+        catch {
+            // Font readiness is best-effort in seek path.
+        }
+    }
     async #renderUntilDeterministicReady() {
-        const maxAttempts = 12;
+        const pendingBeforeRetry = this.#getPendingDeterministicComponents();
+        if (pendingBeforeRetry.length === 0) {
+            return;
+        }
+        const maxAttempts = this.deterministicMediaManager.config.seekMaxAttempts ?? 4;
+        const readyYieldMs = this.deterministicMediaManager.config.readyYieldMs ?? 0;
+        const sceneFrameIndex = this.#getCurrentSceneFrameIndex();
+        let pending = pendingBeforeRetry;
         for (let attempt = 0; attempt < maxAttempts; attempt += 1) {
+            this.deterministicMediaManager.recordReadyAttempt(sceneFrameIndex);
+            this.deterministicMediaManager.recordExtraRenderPass(sceneFrameIndex);
+            await this.#delay(readyYieldMs);
             await this.renderManager.render();
-            const pending = this.#getPendingDeterministicComponents();
+            pending = this.#getPendingDeterministicComponents();
             if (pending.length === 0) {
                 return;
             }
-            await new Promise((resolve) => setTimeout(resolve, 0));
         }
-        const pending = this.#getPendingDeterministicComponents();
         if (pending.length > 0) {
             throw new Error(`Deterministic media was not ready after seek for active components: ${pending.join(', ')}`);
         }
@@ -85,28 +131,18 @@ export class SeekCommand {
         this.timeline.seek(time);
         // Ensure a deterministic render on server after seek to advance media frames
         if (this.state.environment === 'server') {
-            // Wait for fonts to be ready before rendering
-            // This is critical for subtitle animations that use SplitText -
-            // if fonts aren't loaded, text measurements will be wrong and
-            // animations may fail silently or not appear on first subtitles
-            if (typeof document !== 'undefined' && document.fonts?.ready) {
-                try {
-                    await Promise.race([
-                        document.fonts.ready,
-                        new Promise((resolve) => setTimeout(resolve, 2000)) // 2s timeout
-                    ]);
-                }
-                catch {
-                    // Ignore font loading errors, continue with rendering
-                }
+            const deterministicEnabled = this.deterministicMediaManager.isEnabled();
+            if (deterministicEnabled) {
+                await this.#awaitFontsReadyOnce();
             }
-            // Try multiple render passes until loading state clears or attempts exhausted
-            const maxAttempts = 10;
-            for (let i = 0; i < maxAttempts; i += 1) {
+            const readyYieldMs = this.deterministicMediaManager.config.readyYieldMs ?? 0;
+            const loadingMaxAttempts = this.deterministicMediaManager.config.loadingMaxAttempts ?? 2;
+            const sceneFrameIndex = this.#getCurrentSceneFrameIndex();
+            await this.renderManager.render();
+            for (let i = 0; i < loadingMaxAttempts && this.state.state === 'loading'; i += 1) {
+                this.deterministicMediaManager.recordExtraRenderPass(sceneFrameIndex);
+                await this.#delay(readyYieldMs);
                 await this.renderManager.render();
-                if (this.state.state !== 'loading')
-                    break;
-                await new Promise((resolve) => setTimeout(resolve, 30));
             }
             if (this.state.state === 'loading') {
                 console.warn('SeekCommand: Max render attempts exhausted while still loading');
@@ -116,7 +152,7 @@ export class SeekCommand {
             // This fixes the race condition where subtitle animations are added
             // AFTER the initial seek, causing them to miss their initial state.
             this.timeline.seek(time);
-            if (this.deterministicMediaManager.isEnabled()) {
+            if (deterministicEnabled) {
                 await this.#renderUntilDeterministicReady();
             }
             else {

package/dist/components/hooks/PixiSplitScreenDisplayObjectHook.d.ts

@@ -2,14 +2,17 @@ import type { IComponentContext, IComponentHook, HookType } from '../..';
 import { ImageComponentShape, VideoComponentShape } from '../..';
 import { z } from 'zod';
 import type { StateManager } from '../../managers/StateManager.svelte.ts';
+import type { DeterministicMediaManager } from '../../managers/DeterministicMediaManager.ts';
 export declare class PixiSplitScreenDisplayObjectHook implements IComponentHook {
     #private;
     types: HookType[];
     priority: number;
     componentElement: z.infer<typeof VideoComponentShape> | z.infer<typeof ImageComponentShape>;
     private sceneState;
+    private deterministicMediaManager?;
     constructor(cradle: {
         stateManager: StateManager;
+        deterministicMediaManager?: DeterministicMediaManager;
     });
     get sceneWidth(): number;
     get sceneHeight(): number;

package/dist/components/hooks/PixiSplitScreenDisplayObjectHook.js

@@ -16,10 +16,18 @@ export class PixiSplitScreenDisplayObjectHook {
     #pixiTexture;
     #displayObject;
     #bgCanvas = undefined;
+    #bgSprite = undefined;
+    #blurStrength = 50;
+    #blurDownscale = 0.33;
+    #lastBlurFrameKey = '';
+    #resourceIds = new WeakMap();
+    #nextResourceId = 1;
     componentElement;
     sceneState;
+    deterministicMediaManager;
     constructor(cradle) {
         this.sceneState = cradle.stateManager;
+        this.deterministicMediaManager = cradle.deterministicMediaManager;
     }
     get sceneWidth() {
         return this.#context.sceneState.width;
@@ -29,10 +37,21 @@ export class PixiSplitScreenDisplayObjectHook {
     }
     initBlurBackground(strength = 50) {
         const sanitizedStrength = this.#sanitizeBlurStrength(strength);
+        this.#blurDownscale = this.#getBlurDownscale();
+        this.#blurStrength = sanitizedStrength;
+        this.#lastBlurFrameKey = '';
         const backgroundSprite = new PIXI.Sprite(this.#pixiTexture);
+        this.#bgSprite = backgroundSprite;
         this.setupBackground(backgroundSprite, sanitizedStrength);
         this.#displayObject.addChild(backgroundSprite);
     }
+    #getBlurDownscale() {
+        const configured = this.deterministicMediaManager?.config.blurDownscale ?? 0.33;
+        if (!Number.isFinite(configured)) {
+            return 0.33;
+        }
+        return Math.max(0.05, Math.min(1, configured));
+    }
     setupBackground(backgroundSprite, strength = 50) {
         const sanitizedStrength = this.#sanitizeBlurStrength(strength);
         const sceneRatio = this.sceneWidth / this.sceneHeight;
@@ -54,10 +73,10 @@ export class PixiSplitScreenDisplayObjectHook {
         if (this.sceneState.environment === 'server') {
             // Create a temporary canvas for blur effect
             const bgCanvas = document.createElement('canvas');
-            bgCanvas.width = backgroundSprite.width;
-            bgCanvas.height = backgroundSprite.height;
+            bgCanvas.width = Math.max(1, Math.round(backgroundSprite.width * this.#blurDownscale));
+            bgCanvas.height = Math.max(1, Math.round(backgroundSprite.height * this.#blurDownscale));
             this.#bgCanvas = bgCanvas;
-            this.#drawBlurredBackground(sanitizedStrength);
+            this.#drawBlurredBackground(sanitizedStrength, true);
             const blurredTexture = PIXI.Texture.from(bgCanvas);
             backgroundSprite.texture = blurredTexture;
         }
@@ -67,23 +86,59 @@ export class PixiSplitScreenDisplayObjectHook {
             backgroundSprite.filters = [blurFilter];
         }
     }
-    #drawBlurredBackground(strength = 50) {
+    #drawBlurredBackground(strength = 50, force = false) {
         if (!this.#bgCanvas) {
-            return;
+            return false;
         }
         // Validate and sanitize strength parameter
         const sanitizedStrength = this.#sanitizeBlurStrength(strength);
         const ctx = this.#bgCanvas.getContext('2d');
-        // Use sanitized value to prevent XSS
-        ctx.filter = `blur(${sanitizedStrength}px)`;
         // Get the source element (video/image)
         const sourceElement = this.#context.getResource('videoElement') || this.#context.getResource('imageElement');
         if (!sourceElement) {
             // Video or Image element not ready yet - will be called again on next update
-            return;
+            return false;
+        }
+        const fps = this.sceneState.data.settings.fps || 30;
+        const componentFrameIndex = Math.max(0, Math.round(this.#context.currentComponentTime * fps));
+        const textureToken = this.#context.getResource('pixiTexture') ?? sourceElement;
+        const frameKey = `${componentFrameIndex}:${this.#resourceToken(textureToken)}`;
+        if (!force && frameKey === this.#lastBlurFrameKey) {
+            return false;
         }
+        this.#lastBlurFrameKey = frameKey;
+        // Use sanitized value to prevent XSS
+        const effectiveBlurStrength = sanitizedStrength * this.#blurDownscale;
+        ctx.filter = `blur(${effectiveBlurStrength}px)`;
+        ctx.clearRect(0, 0, this.#bgCanvas.width, this.#bgCanvas.height);
         // Draw the original texture with blur
-        ctx.drawImage(sourceElement, 0, 0, this.#bgCanvas.width, this.#bgCanvas.height);
+        try {
+            ctx.drawImage(sourceElement, 0, 0, this.#bgCanvas.width, this.#bgCanvas.height);
+        }
+        catch {
+            return false;
+        }
+        const texture = this.#bgSprite?.texture;
+        texture.baseTexture?.update?.();
+        texture.update?.();
+        this.deterministicMediaManager?.recordBlurRedraw(this.#currentSceneFrameIndex());
+        return true;
+    }
+    #resourceToken(value) {
+        if (typeof value === 'object' && value !== null) {
+            let id = this.#resourceIds.get(value);
+            if (!id) {
+                id = this.#nextResourceId;
+                this.#nextResourceId += 1;
+                this.#resourceIds.set(value, id);
+            }
+            return `obj-${id}`;
+        }
+        return String(value);
+    }
+    #currentSceneFrameIndex() {
+        const fps = this.sceneState.data.settings.fps || 30;
+        return Math.max(0, Math.round(this.sceneState.currentTime * fps));
     }
     /**
      * Sanitizes blur strength parameter to prevent XSS and ensure valid numeric values
@@ -187,9 +242,6 @@ export class PixiSplitScreenDisplayObjectHook {
     }
     async #handleUpdate() {
         const isActive = this.#context.isActive;
-        if (isActive) {
-            this.#drawBlurredBackground();
-        }
         if (this.#displayObject) {
             // Texture swaps are frequent in deterministic mode; update sprite textures
             // in-place instead of rebuilding split/blur geometry each frame.
@@ -197,6 +249,9 @@ export class PixiSplitScreenDisplayObjectHook {
             if (currentTexture && currentTexture !== this.#pixiTexture) {
                 this.#swapDisplayTexture(currentTexture);
             }
+            if (isActive && this.#bgCanvas) {
+                this.#drawBlurredBackground(this.#blurStrength);
+            }
             // Always re-assert the resource in case the context was cleared or updated
             this.#context.setResource('pixiRenderObject', this.#displayObject);
             if (this.#displayObject.visible != isActive) {
@@ -244,6 +299,8 @@ export class PixiSplitScreenDisplayObjectHook {
     async #handleDestroy() {
         // remove event listeners from video
         this.#bgCanvas = undefined;
+        this.#bgSprite = undefined;
+        this.#lastBlurFrameKey = '';
     }
     async handle(type, context) {
         this.#context = context;

package/dist/layers/Layer.svelte.js

@@ -57,8 +57,8 @@ export class Layer {
         if (!this.#displayObject) {
             return false;
         }
-        for (let index = 0; index < this.components.length; index += 1) {
-            const component = this.components[index];
+        let componentDisplayIndex = 0;
+        for (const component of this.components) {
             const displayObject = component.displayObject;
             if (!displayObject) {
                 continue;
@@ -68,16 +68,51 @@ export class Layer {
                 if (parent && typeof parent.removeChild === 'function') {
                     parent.removeChild(displayObject);
                 }
-                this.#displayObject.addChild(displayObject);
+                const childCount = this.#displayObject.children?.length ?? 0;
+                const insertIndex = Math.max(0, Math.min(componentDisplayIndex, childCount));
+                if (typeof this.#displayObject.addChildAt === 'function') {
+                    this.#displayObject.addChildAt(displayObject, insertIndex);
+                }
+                else {
+                    this.#displayObject.addChild(displayObject);
+                }
                 changed = true;
             }
             if (typeof this.#displayObject.getChildIndex === 'function' &&
                 typeof this.#displayObject.setChildIndex === 'function') {
+                const childCount = this.#displayObject.children?.length ?? 0;
+                if (childCount > 0) {
+                    const currentIndex = this.#displayObject.getChildIndex(displayObject);
+                    const targetIndex = Math.max(0, Math.min(componentDisplayIndex, childCount - 1));
+                    if (currentIndex >= 0 && currentIndex !== targetIndex) {
+                        this.#displayObject.setChildIndex(displayObject, targetIndex);
+                        changed = true;
+                    }
+                }
+            }
+            componentDisplayIndex += 1;
+        }
+        // Ensure deterministic ordering among only component display objects without
+        // assuming a 1:1 mapping with all container children.
+        if (typeof this.#displayObject.getChildIndex === 'function' &&
+            typeof this.#displayObject.setChildIndex === 'function') {
+            let nextIndex = 0;
+            for (const component of this.components) {
+                const displayObject = component.displayObject;
+                if (!displayObject || displayObject.parent !== this.#displayObject) {
+                    continue;
+                }
+                const childCount = this.#displayObject.children?.length ?? 0;
+                if (childCount === 0) {
+                    break;
+                }
                 const currentIndex = this.#displayObject.getChildIndex(displayObject);
-                if (currentIndex !== index) {
-                    this.#displayObject.setChildIndex(displayObject, index);
+                const targetIndex = Math.max(0, Math.min(nextIndex, childCount - 1));
+                if (currentIndex >= 0 && currentIndex !== targetIndex) {
+                    this.#displayObject.setChildIndex(displayObject, targetIndex);
                     changed = true;
                 }
+                nextIndex += 1;
             }
         }
         return changed;

package/dist/managers/ComponentsManager.svelte.js

@@ -199,11 +199,38 @@ export class ComponentsManager {
         const displayObject = layer.displayObject;
         if (!displayObject)
             return;
-        // Sync displayObject children order with components array
-        layer.components.forEach((component, index) => {
-            if (component.displayObject) {
-                displayObject.setChildIndex(component.displayObject, index);
+        // Sync displayObject children order with components array while clamping indexes.
+        let nextIndex = 0;
+        layer.components.forEach((component) => {
+            const componentDisplayObject = component.displayObject;
+            if (!componentDisplayObject) {
+                return;
             }
+            const parent = componentDisplayObject.parent;
+            if (parent !== displayObject) {
+                if (parent && typeof parent.removeChild === 'function') {
+                    parent.removeChild(componentDisplayObject);
+                }
+                const insertMax = displayObject.children?.length ?? 0;
+                const insertIndex = Math.max(0, Math.min(nextIndex, insertMax));
+                if (typeof displayObject.addChildAt === 'function') {
+                    displayObject.addChildAt(componentDisplayObject, insertIndex);
+                }
+                else {
+                    displayObject.addChild(componentDisplayObject);
+                }
+            }
+            const childCount = displayObject.children?.length ?? 0;
+            if (childCount > 0 &&
+                typeof displayObject.getChildIndex === 'function' &&
+                typeof displayObject.setChildIndex === 'function') {
+                const currentIndex = displayObject.getChildIndex(componentDisplayObject);
+                const targetIndex = Math.max(0, Math.min(nextIndex, childCount - 1));
+                if (currentIndex >= 0 && currentIndex !== targetIndex) {
+                    displayObject.setChildIndex(componentDisplayObject, targetIndex);
+                }
+            }
+            nextIndex += 1;
         });
     }
     bulkUpdate(updates) {

package/dist/managers/DeterministicMediaManager.d.ts

@@ -16,6 +16,9 @@ export declare class DeterministicMediaManager {
     getFingerprint(): string;
     setOneTimeOverride(componentId: string, frameIndex: number, payload: DeterministicFramePayload): void;
     getDiagnosticsReport(): DeterministicDiagnosticsReport | null;
+    recordReadyAttempt(sceneFrameIndex: number, count?: number): void;
+    recordExtraRenderPass(sceneFrameIndex: number, count?: number): void;
+    recordBlurRedraw(sceneFrameIndex: number, count?: number): void;
     destroy(): Promise<void>;
     releaseComponent(componentId: string): Promise<void>;
 }

package/dist/managers/DeterministicMediaManager.js

@@ -4,6 +4,10 @@ const createDefaultDiagnosticsState = () => ({
     providerHits: 0,
     providerMisses: 0,
     cacheHits: 0,
+    readyAttempts: 0,
+    extraRenderPasses: 0,
+    blurRedraws: 0,
+    perFrame: new Map(),
     latencyCount: 0,
     latencyTotalMs: 0,
     latencyMinMs: Number.POSITIVE_INFINITY,
@@ -127,11 +131,23 @@ export class DeterministicMediaManager {
             ? this.#diagnostics.latencyTotalMs / this.#diagnostics.latencyCount
             : 0;
         const minLatency = this.#diagnostics.latencyCount > 0 ? this.#diagnostics.latencyMinMs : 0;
+        const perFrame = {};
+        for (const [frameIndex, counters] of [...this.#diagnostics.perFrame.entries()].sort(([a], [b]) => a - b)) {
+            perFrame[String(frameIndex)] = {
+                readyAttempts: counters.readyAttempts,
+                extraRenderPasses: counters.extraRenderPasses,
+                blurRedraws: counters.blurRedraws
+            };
+        }
         return {
             providerHits: this.#diagnostics.providerHits,
             providerMisses: this.#diagnostics.providerMisses,
             cacheHits: this.#diagnostics.cacheHits,
             cacheHitRatio,
+            readyAttempts: this.#diagnostics.readyAttempts,
+            extraRenderPasses: this.#diagnostics.extraRenderPasses,
+            blurRedraws: this.#diagnostics.blurRedraws,
+            perFrame,
             latency: {
                 minMs: minLatency,
                 maxMs: this.#diagnostics.latencyMaxMs,
@@ -139,6 +155,15 @@ export class DeterministicMediaManager {
             }
         };
     }
+    recordReadyAttempt(sceneFrameIndex, count = 1) {
+        this.#recordRuntimeCounter(sceneFrameIndex, 'readyAttempts', count);
+    }
+    recordExtraRenderPass(sceneFrameIndex, count = 1) {
+        this.#recordRuntimeCounter(sceneFrameIndex, 'extraRenderPasses', count);
+    }
+    recordBlurRedraw(sceneFrameIndex, count = 1) {
+        this.#recordRuntimeCounter(sceneFrameIndex, 'blurRedraws', count);
+    }
     async destroy() {
         for (const [cacheKey, cached] of this.#cacheByCacheKey.entries()) {
             this.#disposeCachedOverride(cacheKey, cached);
@@ -314,6 +339,27 @@ export class DeterministicMediaManager {
             // Diagnostics are best-effort and never allowed to fail the render path.
         }
     }
+    #recordRuntimeCounter(sceneFrameIndex, counter, count) {
+        if (!this.config.diagnostics) {
+            return;
+        }
+        if (!Number.isFinite(count) || count <= 0) {
+            return;
+        }
+        try {
+            this.#diagnostics[counter] += count;
+            const existing = this.#diagnostics.perFrame.get(sceneFrameIndex) ?? {
+                readyAttempts: 0,
+                extraRenderPasses: 0,
+                blurRedraws: 0
+            };
+            existing[counter] += count;
+            this.#diagnostics.perFrame.set(sceneFrameIndex, existing);
+        }
+        catch {
+            // Diagnostics are best-effort and never allowed to fail the render path.
+        }
+    }
     #countSceneMediaComponents(sceneData) {
         return sceneData.layers.reduce((count, layer) => {
             const mediaCount = layer.components.filter((component) => component.type === 'VIDEO' || component.type === 'GIF').length;

package/dist/schemas/runtime/deterministic.d.ts

@@ -35,6 +35,10 @@ export type DeterministicMediaConfig = {
     strict: boolean;
     diagnostics: boolean;
     maxCachedTextures?: number;
+    seekMaxAttempts?: number;
+    loadingMaxAttempts?: number;
+    readyYieldMs?: number;
+    blurDownscale?: number;
     provider?: DeterministicFrameProvider;
 };
 export declare const DeterministicMediaConfigShape: z.ZodPrefault<z.ZodObject<{
@@ -42,6 +46,10 @@ export declare const DeterministicMediaConfigShape: z.ZodPrefault<z.ZodObject<{
     strict: z.ZodPrefault<z.ZodBoolean>;
     diagnostics: z.ZodPrefault<z.ZodBoolean>;
     maxCachedTextures: z.ZodOptional<z.ZodNumber>;
+    seekMaxAttempts: z.ZodPrefault<z.ZodNumber>;
+    loadingMaxAttempts: z.ZodPrefault<z.ZodNumber>;
+    readyYieldMs: z.ZodPrefault<z.ZodNumber>;
+    blurDownscale: z.ZodPrefault<z.ZodNumber>;
     provider: z.ZodOptional<z.ZodCustom<DeterministicFrameProvider, DeterministicFrameProvider>>;
 }, z.core.$strip>>;
 export declare const defaultDeterministicMediaConfig: DeterministicMediaConfig;
@@ -55,6 +63,14 @@ export type DeterministicDiagnosticsReport = {
     providerMisses: number;
     cacheHits: number;
     cacheHitRatio: number;
+    readyAttempts: number;
+    extraRenderPasses: number;
+    blurRedraws: number;
+    perFrame: Record<string, {
+        readyAttempts: number;
+        extraRenderPasses: number;
+        blurRedraws: number;
+    }>;
     latency: {
         minMs: number;
         maxMs: number;

package/dist/schemas/runtime/deterministic.js

@@ -4,6 +4,10 @@ export const DeterministicMediaConfigShape = z.object({
     strict: z.boolean().prefault(false),
     diagnostics: z.boolean().prefault(false),
     maxCachedTextures: z.number().int().positive().optional(),
+    seekMaxAttempts: z.number().int().positive().prefault(4),
+    loadingMaxAttempts: z.number().int().positive().prefault(2),
+    readyYieldMs: z.number().int().nonnegative().prefault(0),
+    blurDownscale: z.number().positive().max(1).prefault(0.33),
     provider: z.custom().optional()
 }).prefault({});
 export const defaultDeterministicMediaConfig = DeterministicMediaConfigShape.parse(undefined);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "visualfries",
-  "version": "0.1.10110",
+  "version": "0.1.10115",
   "license": "MIT",
   "author": "ContentFries",
   "repository": {
@@ -90,6 +90,7 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test": "pnpm run test:unit -- --run",
     "test:unit": "vitest",
+    "bench:deterministic": "pnpm vitest tests/perf/deterministic-server-render.perf.test.ts --run",
     "lint": "eslint . && prettier --check .",
     "format": "prettier --write .",
     "knip": "knip",