@antha/asset 0.3.0 → 0.4.0

package/README.md

@@ -14,7 +14,12 @@ npm i @antha/asset
 
 ```TypeScript
 import {AnthaEngine, defineAnthaMod} from '@antha/engine';
-import {type AnthaAssetModState, createAnthaAssetMod, defineAsset} from '@antha/asset';
+import {
+    type AnthaAssetModState,
+    type AssetLoader,
+    createAnthaAssetMod,
+    defineAsset,
+} from '@antha/asset';
 
 type GameState = AnthaAssetModState & {
     hasLoadedTitle: boolean;
@@ -31,6 +36,25 @@ const titleAsset = defineAsset({
         };
     },
 });
+
+async function loadTitleAsset({
+    assetLoader,
+}: Readonly<{
+    assetLoader: AssetLoader;
+}>) {
+    const loadSession = assetLoader.createLoadSession();
+
+    await assetLoader.bulkLoadAssets(
+        [
+            titleAsset,
+        ],
+        {
+            loadSession,
+        },
+    );
+    loadSession.complete();
+}
+
 const engine = new AnthaEngine<GameState>({
     initState: {
         hasLoadedTitle: false,
@@ -39,12 +63,12 @@ const engine = new AnthaEngine<GameState>({
         createAnthaAssetMod(),
         defineAnthaMod<GameState>({
             modName: 'game-logic',
-            async execute({state}) {
+            execute({state}) {
                 if (state.assetLoader && !state.hasLoadedTitle) {
                     state.hasLoadedTitle = true;
-                    await state.assetLoader.bulkLoadAssets([
-                        titleAsset,
-                    ]);
+                    void loadTitleAsset({
+                        assetLoader: state.assetLoader,
+                    });
                 }
             },
         }),

package/dist/antha-asset.mod.d.ts

@@ -1,21 +1,5 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { AssetLoader } from './asset-loader.js';
-/**
- * Engine state for the Antha asset mod loading screen.
- *
- * @category Internal
- */
-export type AnthaAssetModLoadingScreenState = {
-    /** The total number to load. Once `current` reaches this, loading is considered complete. */
-    total: number;
-    /**
-     * The current number of loaded assets. Once this reaches `total`, the loading is considered
-     * complete.
-     */
-    current: number;
-    currentResourceName?: string | undefined;
-    completedAt: DOMHighResTimeStamp | undefined;
-};
 /**
  * State for {@link AnthaAssetMod}.
  *
@@ -23,8 +7,6 @@ export type AnthaAssetModLoadingScreenState = {
  */
 export type AnthaAssetModState = {
     assetLoader: AssetLoader;
-    isShowingLoadingScreen: boolean;
-    loadingScreenState: AnthaAssetModLoadingScreenState | undefined;
 };
 /**
  * Configuration options for {@link createAnthaAssetMod}.
@@ -33,8 +15,8 @@ export type AnthaAssetModState = {
  */
 export type AnthaAssetModOptions = PartialWithUndefined<{
     /**
-     * If set to `true`, the default loading screen is not rendered. You should probably make your
-     * own loading screen in that case.
+     * If set to `true`, the default loading screen is not rendered. Loading-session state remains
+     * available for a custom loading screen.
      *
      * @default false
      */

package/dist/antha-asset.mod.js

@@ -2,7 +2,7 @@ import { defineAnthaMod } from '@antha/engine';
 import { addSuffix } from '@augment-vir/common';
 import { css, defineElement, html } from 'element-vir';
 import { setCssVarValue } from 'lit-css-vars';
-import { AssetLoader, AssetLoaderProgressUpdateEvent } from './asset-loader.js';
+import { AssetLoader } from './asset-loader.js';
 /**
  * Duration in milliseconds for the loading screen fade-out animation.
  *
@@ -135,62 +135,36 @@ export function createAnthaAssetMod(options = {}) {
         modName: anthaAssetModName,
         async cleanup({ state }) {
             await state.assetLoader?.destroy();
-            state.loadingScreenState = undefined;
-            state.isShowingLoadingScreen = false;
         },
         execute({ state, engine }) {
             if (!state.assetLoader) {
                 state.assetLoader = new AssetLoader({
                     logger: engine.log,
                 });
-                if (!options.hideLoadingScreen) {
-                    state.assetLoader.listen(AssetLoaderProgressUpdateEvent, (event) => {
-                        if (event.detail.complete) {
-                            state.loadingScreenState = {
-                                current: 1,
-                                total: 1,
-                                currentResourceName: event.detail.currentResourceName ||
-                                    state.loadingScreenState?.currentResourceName,
-                                completedAt: engine.totalMs,
-                            };
-                            state.isShowingLoadingScreen = false;
-                        }
-                        else {
-                            state.isShowingLoadingScreen = true;
-                            state.loadingScreenState = {
-                                current: event.detail.current,
-                                total: event.detail.total,
-                                currentResourceName: event.detail.currentResourceName,
-                                completedAt: undefined,
-                            };
-                        }
-                    });
-                }
             }
+            state.assetLoader.advanceLoadState({
+                currentTick: engine.currentTick,
+                totalMs: engine.totalMs,
+            });
             if (options.hideLoadingScreen) {
                 return;
             }
-            const shouldShowLoadingScreen = state.loadingScreenState?.completedAt
-                ? engine.totalMs <=
-                    state.loadingScreenState.completedAt + configuredLoadingScreenFadeMs
-                : true;
-            if (state.loadingScreenState && shouldShowLoadingScreen) {
-                const progressPercent = state.loadingScreenState.total > 0
-                    ? (state.loadingScreenState.current / state.loadingScreenState.total) * 100
-                    : 0;
+            const loadState = state.assetLoader.loadState;
+            if (loadState &&
+                (loadState.completedAt == undefined ||
+                    engine.totalMs <= loadState.completedAt + configuredLoadingScreenFadeMs)) {
+                const progressPercent = loadState.total > 0 ? (loadState.current / loadState.total) * 100 : 0;
                 return html `
                     <${AnthaAssetLoadingScreen.assign({
                     progressPercent,
                     dotCount: Math.floor(engine.totalMs / 500) % 4,
-                    completed: !!state.loadingScreenState.completedAt,
-                    currentResourceName: state.loadingScreenState.currentResourceName,
+                    completed: loadState.completedAt != undefined,
+                    currentResourceName: loadState.currentResourceName,
                     loadingScreenFadeMs: configuredLoadingScreenFadeMs,
                 })}></${AnthaAssetLoadingScreen}>
                 `;
             }
-            else {
-                return undefined;
-            }
+            return undefined;
         },
     });
 }

package/dist/asset-loader.d.ts

@@ -79,12 +79,8 @@ export type AssetBulkLoaderLoadOptions = PartialWithUndefined<{
      * @default false
      */
     doNotUnload: boolean;
-    /**
-     * If `true`, the loading screen events will not be emitted.
-     *
-     * @default false
-     */
-    hideLoadingScreen: boolean;
+    /** Receives this bulk load's progress. */
+    loadSession: AssetLoadSession;
 }>;
 /**
  * Options for {@link AssetLoader}.
@@ -98,75 +94,123 @@ export type AssetLoaderOptions = PartialWithUndefined<{
      */
     logger: AnthaLogger;
 }>;
-declare const AssetLoaderProgressUpdateEvent_base: (new (eventInitDict: {
+/** Progress tracked by an {@link AssetLoadSession}. */
+export type AssetLoadProgress = {
+    current: number;
+    total: number;
+    currentResourceName?: string | undefined;
+};
+/** State of the active asset load. */
+export type AssetLoadState = AssetLoadProgress & {
+    completedAt: DOMHighResTimeStamp | undefined;
+    isLoading: boolean;
+};
+declare const AssetLoadSessionUpdateEvent_base: (new (eventInitDict: {
     bubbles?: boolean;
     cancelable?: boolean;
     composed?: boolean;
-    detail: {
-        current: number;
-        total: number;
-        currentResourceName?: string | undefined;
-        /**
-         * Always check this complete field first, as any misconfigured assets ma not correctly
-         * increment `total` but complete will always reliably mark the end of loading.
-         */
+    detail: AssetLoadProgress & {
+        /** Indicates that the caller explicitly requested load completion. */
         complete: boolean;
     };
-}) => import("typed-event-target").TypedCustomEvent<{
-    current: number;
-    total: number;
-    currentResourceName?: string | undefined;
-    /**
-     * Always check this complete field first, as any misconfigured assets ma not correctly
-     * increment `total` but complete will always reliably mark the end of loading.
-     */
+}) => import("typed-event-target").TypedCustomEvent<AssetLoadProgress & {
+    /** Indicates that the caller explicitly requested load completion. */
     complete: boolean;
-}, "antha-asset-loader-progress-update-event">) & Pick<{
+}, "antha-asset-load-session-update-event">) & Pick<{
     new (type: string, eventInitDict?: EventInit): Event;
     prototype: Event;
     readonly NONE: 0;
     readonly CAPTURING_PHASE: 1;
     readonly AT_TARGET: 2;
     readonly BUBBLING_PHASE: 3;
-}, "prototype" | "NONE" | "CAPTURING_PHASE" | "AT_TARGET" | "BUBBLING_PHASE"> & Pick<import("typed-event-target").TypedCustomEvent<{
-    current: number;
-    total: number;
-    currentResourceName?: string | undefined;
-    /**
-     * Always check this complete field first, as any misconfigured assets ma not correctly
-     * increment `total` but complete will always reliably mark the end of loading.
-     */
+}, "prototype" | "NONE" | "CAPTURING_PHASE" | "AT_TARGET" | "BUBBLING_PHASE"> & Pick<import("typed-event-target").TypedCustomEvent<AssetLoadProgress & {
+    /** Indicates that the caller explicitly requested load completion. */
     complete: boolean;
-}, "antha-asset-loader-progress-update-event">, "type">;
+}, "antha-asset-load-session-update-event">, "type">;
+/** Event dispatched when an {@link AssetLoadSession} progresses or completes. */
+export declare class AssetLoadSessionUpdateEvent extends AssetLoadSessionUpdateEvent_base {
+}
+/** Manages the progress and explicit completion of an asset load. */
+export declare class AssetLoadSession extends ListenTarget<AssetLoadSessionUpdateEvent> {
+    protected currentProgress: AssetLoadProgress;
+    protected isComplete: boolean;
+    /** Reports a load-progress update without completing the session. */
+    reportProgress(progress: Readonly<AssetLoadProgress>): void;
+    /** Adds progress to the active resource. */
+    incrementProgress({ amount, currentResourceName, }: Readonly<{
+        amount?: number | undefined;
+        currentResourceName: string;
+    }>): void;
+    /** Marks this asset load as complete. */
+    complete(): void;
+}
 /**
- * Custom event dispatched by {@link AssetLoader} whenever bulk loading progress changes. Used for
- * loading screen progression.
+ * Maintains the active asset-load session and its state.
  *
  * @category Internal
  */
-export declare class AssetLoaderProgressUpdateEvent extends AssetLoaderProgressUpdateEvent_base {
+export declare class AssetLoadSessionController {
+    protected currentLoadSessionInternal: AssetLoadSession;
+    protected loadStateInternal: AssetLoadState | undefined;
+    protected completionRequestedAtTick: number | undefined;
+    protected latestEngineTick: number;
+    /** Removes the listener for the active load session. */
+    protected removeLoadSessionListener: (() => boolean) | undefined;
+    constructor();
+    /** The active asset-load session. */
+    get currentLoadSession(): AssetLoadSession;
+    /** The active asset-load state. */
+    get loadState(): AssetLoadState | undefined;
+    /** Creates and activates a new asset-load session. */
+    createLoadSession(): AssetLoadSession;
+    /** Advances asset-load completion after an engine render. */
+    advance({ currentTick, totalMs, }: Readonly<{
+        currentTick: number;
+        totalMs: DOMHighResTimeStamp;
+    }>): void;
+    /** Stops tracking the active load session. */
+    destroy(): void;
+    /** Tracks updates from the active load session. */
+    protected listenToLoadSession(loadSession: AssetLoadSession): void;
 }
 /**
  * Manages loading, caching, and cleanup of game assets with progress tracking.
  *
  * @category Asset
  */
-export declare class AssetLoader extends ListenTarget<AssetLoaderProgressUpdateEvent> {
+export declare class AssetLoader {
     constructor(options?: Readonly<AssetLoaderOptions>);
     /** Logs data. This will use the user's provided logger or default to browser logs. */
     protected readonly log: AnthaLogger;
     protected readonly assetCache: Map<Readonly<Asset<any>>, Promise<AssetLoaderResult<any>>>;
+    protected readonly loadSessionController: AssetLoadSessionController;
+    /** The active asset-load session. */
+    get currentLoadSession(): AssetLoadSession;
+    /** The active asset-load state. */
+    get loadState(): AssetLoadState | undefined;
+    /** Creates and activates a new asset-load session. */
+    createLoadSession(): AssetLoadSession;
+    /** Advances asset-load completion after an engine render. */
+    advanceLoadState({ currentTick, totalMs, }: Readonly<{
+        currentTick: number;
+        totalMs: DOMHighResTimeStamp;
+    }>): void;
     /** Loads a single asset, returning its cached value if already loaded. */
-    loadIndividualAsset<ThisAsset extends Asset>({ asset, incrementProgressCallback, }: Readonly<{
+    loadIndividualAsset<ThisAsset extends Asset>({ asset, incrementProgressCallback, loadSession, }: Readonly<{
         asset: Readonly<ThisAsset>;
         incrementProgressCallback?: AssetIncrementProgressCallback | undefined;
+        loadSession?: AssetLoadSession | undefined;
     }>): Promise<AssetValue<ThisAsset>>;
     /** Runs cleanup callbacks for the given assets and removes them from the cache. */
     unloadAssets(assets: ReadonlyArray<Asset>): Promise<void>;
+    /** Cleans up cached assets and stops tracking the active load session. */
     destroy(): Promise<void>;
     /** Loads multiple assets. */
     bulkLoadAssets(assets: ReadonlyArray<Readonly<Asset>>, options?: Readonly<AssetBulkLoaderLoadOptions>): Promise<ReadonlyArray<unknown>>;
-    /** Dispatch a loading progress event for the active bulk load. */
-    protected dispatchProgressUpdate(detail: ConstructorParameters<typeof AssetLoaderProgressUpdateEvent>[0]['detail']): void;
+    /** Sends load progress to the provided session. */
+    protected reportProgress({ loadSession, progress, }: Readonly<{
+        loadSession: AssetLoadSession | undefined;
+        progress: AssetLoadProgress;
+    }>): void;
 }
 export {};

package/dist/asset-loader.js

@@ -9,29 +9,161 @@ import { defineTypedCustomEvent, ListenTarget } from 'typed-event-target';
 export function defineAsset(asset) {
     return asset;
 }
+/** Event dispatched when an {@link AssetLoadSession} progresses or completes. */
+export class AssetLoadSessionUpdateEvent extends defineTypedCustomEvent()('antha-asset-load-session-update-event') {
+}
+/** Manages the progress and explicit completion of an asset load. */
+export class AssetLoadSession extends ListenTarget {
+    currentProgress = {
+        current: 0,
+        currentResourceName: undefined,
+        total: 0,
+    };
+    isComplete = false;
+    /** Reports a load-progress update without completing the session. */
+    reportProgress(progress) {
+        this.currentProgress = progress;
+        this.isComplete = false;
+        this.dispatch(new AssetLoadSessionUpdateEvent({
+            detail: {
+                ...progress,
+                complete: false,
+            },
+        }));
+    }
+    /** Adds progress to the active resource. */
+    incrementProgress({ amount, currentResourceName, }) {
+        this.reportProgress({
+            ...this.currentProgress,
+            current: this.currentProgress.current + (amount ?? 1),
+            currentResourceName,
+        });
+    }
+    /** Marks this asset load as complete. */
+    complete() {
+        if (this.isComplete) {
+            return;
+        }
+        this.isComplete = true;
+        this.dispatch(new AssetLoadSessionUpdateEvent({
+            detail: {
+                ...this.currentProgress,
+                complete: true,
+            },
+        }));
+    }
+}
 /**
- * Custom event dispatched by {@link AssetLoader} whenever bulk loading progress changes. Used for
- * loading screen progression.
+ * Maintains the active asset-load session and its state.
  *
  * @category Internal
  */
-export class AssetLoaderProgressUpdateEvent extends defineTypedCustomEvent()('antha-asset-loader-progress-update-event') {
+export class AssetLoadSessionController {
+    currentLoadSessionInternal;
+    loadStateInternal;
+    completionRequestedAtTick;
+    latestEngineTick = 0;
+    /** Removes the listener for the active load session. */
+    removeLoadSessionListener;
+    constructor() {
+        const initialLoadSession = new AssetLoadSession();
+        this.currentLoadSessionInternal = initialLoadSession;
+        this.listenToLoadSession(initialLoadSession);
+    }
+    /** The active asset-load session. */
+    get currentLoadSession() {
+        return this.currentLoadSessionInternal;
+    }
+    /** The active asset-load state. */
+    get loadState() {
+        return this.loadStateInternal;
+    }
+    /** Creates and activates a new asset-load session. */
+    createLoadSession() {
+        const loadSession = new AssetLoadSession();
+        this.removeLoadSessionListener?.();
+        this.currentLoadSessionInternal = loadSession;
+        this.listenToLoadSession(loadSession);
+        loadSession.reportProgress({
+            current: 0,
+            total: 0,
+        });
+        return loadSession;
+    }
+    /** Advances asset-load completion after an engine render. */
+    advance({ currentTick, totalMs, }) {
+        this.latestEngineTick = currentTick + 1;
+        if (this.completionRequestedAtTick != undefined &&
+            this.completionRequestedAtTick < currentTick &&
+            this.loadStateInternal) {
+            this.completionRequestedAtTick = undefined;
+            this.loadStateInternal = {
+                ...this.loadStateInternal,
+                completedAt: totalMs,
+                isLoading: false,
+            };
+        }
+    }
+    /** Stops tracking the active load session. */
+    destroy() {
+        this.removeLoadSessionListener?.();
+        this.currentLoadSessionInternal.destroy();
+        this.completionRequestedAtTick = undefined;
+        this.loadStateInternal = undefined;
+    }
+    /** Tracks updates from the active load session. */
+    listenToLoadSession(loadSession) {
+        this.removeLoadSessionListener = loadSession.listen(AssetLoadSessionUpdateEvent, (event) => {
+            if (event.detail.complete) {
+                this.completionRequestedAtTick = this.latestEngineTick;
+            }
+            else {
+                this.completionRequestedAtTick = undefined;
+                this.loadStateInternal = {
+                    current: event.detail.current,
+                    currentResourceName: event.detail.currentResourceName,
+                    total: event.detail.total,
+                    completedAt: undefined,
+                    isLoading: true,
+                };
+            }
+        });
+    }
 }
 /**
  * Manages loading, caching, and cleanup of game assets with progress tracking.
  *
  * @category Asset
  */
-export class AssetLoader extends ListenTarget {
+export class AssetLoader {
     constructor(options = {}) {
-        super();
         this.log = options.logger || browserAnthaLogger;
     }
     /** Logs data. This will use the user's provided logger or default to browser logs. */
     log;
     assetCache = new Map();
+    loadSessionController = new AssetLoadSessionController();
+    /** The active asset-load session. */
+    get currentLoadSession() {
+        return this.loadSessionController.currentLoadSession;
+    }
+    /** The active asset-load state. */
+    get loadState() {
+        return this.loadSessionController.loadState;
+    }
+    /** Creates and activates a new asset-load session. */
+    createLoadSession() {
+        return this.loadSessionController.createLoadSession();
+    }
+    /** Advances asset-load completion after an engine render. */
+    advanceLoadState({ currentTick, totalMs, }) {
+        this.loadSessionController.advance({
+            currentTick,
+            totalMs,
+        });
+    }
     /** Loads a single asset, returning its cached value if already loaded. */
-    async loadIndividualAsset({ asset, incrementProgressCallback, }) {
+    async loadIndividualAsset({ asset, incrementProgressCallback, loadSession, }) {
         const cached = this.assetCache.get(asset);
         if (cached) {
             const assetResult = await cached;
@@ -39,9 +171,18 @@ export class AssetLoader extends ListenTarget {
         }
         const deferredLoadPromise = new DeferredPromise();
         this.assetCache.set(asset, deferredLoadPromise.promise);
+        loadSession?.reportProgress({
+            current: 0,
+            currentResourceName: asset.name,
+            total: asset.maxProgress,
+        });
         const loadedAsset = await asset.load({
             incrementProgressCallback(progressParams) {
                 incrementProgressCallback?.(progressParams);
+                loadSession?.incrementProgress({
+                    amount: progressParams,
+                    currentResourceName: asset.name,
+                });
             },
         });
         deferredLoadPromise.resolve(loadedAsset);
@@ -62,8 +203,9 @@ export class AssetLoader extends ListenTarget {
             this.assetCache.delete(asset);
         });
     }
+    /** Cleans up cached assets and stops tracking the active load session. */
     async destroy() {
-        super.destroy();
+        this.loadSessionController.destroy();
         const entries = Array.from(this.assetCache.entries());
         await awaitedForEach(entries, async ([asset, result,]) => {
             await (await result).cleanup?.();
@@ -85,12 +227,14 @@ export class AssetLoader extends ListenTarget {
             return count + asset.maxProgress;
         }, 0) + cleanupCount;
         let currentProgress = 0;
-        if (!options.hideLoadingScreen && assetsToLoad.length) {
-            this.dispatchProgressUpdate({
-                current: currentProgress,
-                total: maxProgress,
-                currentResourceName: assetsToLoad[0]?.name,
-                complete: false,
+        if (assetsToLoad.length) {
+            this.reportProgress({
+                loadSession: options.loadSession,
+                progress: {
+                    current: currentProgress,
+                    total: maxProgress,
+                    currentResourceName: assetsToLoad[0]?.name,
+                },
             });
         }
         await this.unloadAssets(assetsToCleanup);
@@ -98,14 +242,14 @@ export class AssetLoader extends ListenTarget {
             return assets.map((asset) => this.assetCache.get(asset));
         }
         currentProgress += cleanupCount;
-        if (!options.hideLoadingScreen) {
-            this.dispatchProgressUpdate({
+        this.reportProgress({
+            loadSession: options.loadSession,
+            progress: {
                 current: currentProgress,
                 total: maxProgress,
                 currentResourceName: assetsToLoad[0]?.name,
-                complete: false,
-            });
-        }
+            },
+        });
         const chunkedAssets = options.maxParallelism
             ? chunkArray(assets, {
                 chunkSize: options.maxParallelism,
@@ -114,14 +258,14 @@ export class AssetLoader extends ListenTarget {
         const createIncrementProgressCallback = (asset) => {
             return (amount) => {
                 currentProgress += amount ?? 1;
-                if (!options.hideLoadingScreen) {
-                    this.dispatchProgressUpdate({
+                this.reportProgress({
+                    loadSession: options.loadSession,
+                    progress: {
                         current: currentProgress,
                         total: maxProgress,
                         currentResourceName: asset.name,
-                        complete: false,
-                    });
-                }
+                    },
+                });
             };
         };
         const results = (await awaitedBlockingMap(chunkedAssets, async (assetChunk) => {
@@ -129,14 +273,14 @@ export class AssetLoader extends ListenTarget {
                 if (this.assetCache.has(asset)) {
                     return (await this.assetCache.get(asset))?.value;
                 }
-                if (!options.hideLoadingScreen) {
-                    this.dispatchProgressUpdate({
+                this.reportProgress({
+                    loadSession: options.loadSession,
+                    progress: {
                         current: currentProgress,
                         total: maxProgress,
                         currentResourceName: asset.name,
-                        complete: false,
-                    });
-                }
+                    },
+                });
                 return await this.loadIndividualAsset({
                     incrementProgressCallback: createIncrementProgressCallback(asset),
                     asset,
@@ -156,20 +300,10 @@ export class AssetLoader extends ListenTarget {
                 },
             });
         }
-        if (!options.hideLoadingScreen) {
-            this.dispatchProgressUpdate({
-                current: maxProgress,
-                total: maxProgress,
-                currentResourceName: assetsToLoad[assetsToLoad.length - 1]?.name,
-                complete: true,
-            });
-        }
         return results;
     }
-    /** Dispatch a loading progress event for the active bulk load. */
-    dispatchProgressUpdate(detail) {
-        this.dispatch(new AssetLoaderProgressUpdateEvent({
-            detail,
-        }));
+    /** Sends load progress to the provided session. */
+    reportProgress({ loadSession, progress, }) {
+        loadSession?.reportProgress(progress);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@antha/asset",
-    "version": "0.3.0",
+    "version": "0.4.0",
     "description": "An Antha mod for handling asset loading.",
     "keywords": [
         "vir",
@@ -48,7 +48,7 @@
         "pixi.js": "^8.19.0"
     },
     "peerDependencies": {
-        "@antha/engine": "^0.3.0",
+        "@antha/engine": "^0.4.0",
         "element-vir": ">=26"
     },
     "engines": {