yuuna-engine 0.4.0 → 0.6.0

package/README.md

@@ -83,9 +83,10 @@ runEngine<GameState>({
   `CIRCLE`, `TEXT`, `SPRITE`, `ANIMATED_SPRITE`, `LINE`, and `GROUP`. Give
   one an `id` plus `isClickable`/`isHoverable` to make it interactive.
 - **Events** — `nextState` receives one `GameEvent` per call: `TIME`,
-  `CLICK`, `HOVER_IN`, `HOVER_OUT`, `MOUSE_MOVE`, `MUSIC_END`, or a
-  `CUSTOM` event of a type you define yourself, for reporting things like
-  an async `fetch()` resolving back into your state machine.
+  `CLICK`, `HOVER_IN`, `HOVER_OUT`, `MOUSE_MOVE`, `MOUSE_LEAVE`,
+  `MUSIC_END`, or a `CUSTOM` event of a type you define yourself, for
+  reporting things like an async `fetch()` resolving back into your
+  state machine.
 - **Keyboard, camera, sprites & animation, sound effects & music,
   canvas config, and mechanics pipelines** all follow the same idea:
   small, focused props and functions `runEngine`/`nextState` take, that
@@ -106,10 +107,14 @@ hand? Grab one from [`templates/`](templates):
   open it in a browser and it runs.
 - **[npm](templates/npm)** — TypeScript + a dev server with hot reload
   (via Vite), for a real local project.
+- **[neutralino-desktop](templates/neutralino-desktop)** — the `npm`
+  template wrapped in [Neutralino](https://neutralino.js.org) to run as a
+  native desktop window instead of a browser tab.
 
 ```sh
 npx degit lucy-dot-exe/yuuna/templates/blank my-game
 # or: npx degit lucy-dot-exe/yuuna/templates/npm my-game
+# or: npx degit lucy-dot-exe/yuuna/templates/neutralino-desktop my-game
 ```
 
 [`degit`](https://github.com/Rich-Harris/degit) copies the folder without
@@ -128,6 +133,24 @@ yarn watch   # rebuild on change
 browser via a global `Yuuna` object and embeds a live Monaco editor so
 visitors can edit and run a game directly on the page.
 
+## Assets
+
+The examples' art/sound/music lives in `dist/resources/`, gitignored
+rather than committed — this repo being open source doesn't make every
+asset in it free to redistribute. `runEngine()` falls back to a
+generated placeholder for any image that isn't there (and simply plays
+nothing for missing audio) instead of failing, so the examples still
+run without them — just with placeholder art in place of the real
+thing. Drop the real files in locally (or restore them from wherever
+you got this repo from) to see them for real.
+
+Currently used:
+
+- **[Free Pixel Food!](https://henrysoftware.itch.io/pixel-food)** by
+  [Henry Software](https://henrysoftware.itch.io/) — the food icons in
+  the Food Clicker and Sprites examples. CC0; credited here by choice,
+  not requirement.
+
 ## License
 
 MIT © [lucy-dot-exe](https://github.com/lucy-dot-exe)

package/lib/engine/types.d.ts

@@ -57,6 +57,10 @@ export type SpriteRenderable = BaseRenderable & {
     frame: number;
     opacity?: number;
     flipX?: boolean;
+    swapColors?: {
+        from: string;
+        to: string;
+    }[];
 };
 export type LineRenderable = BaseRenderable & {
     type: "LINE";
@@ -83,6 +87,10 @@ export type AnimatedSpriteRenderable = BaseRenderable & {
     paused?: boolean;
     opacity?: number;
     flipX?: boolean;
+    swapColors?: {
+        from: string;
+        to: string;
+    }[];
     id: string;
 };
 export type GroupRenderable = BaseRenderable & {
@@ -145,11 +153,32 @@ export type MouseMoveEvent = {
         y: number;
     };
 };
+export type MouseLeaveEvent = {
+    tag: "MOUSE_LEAVE";
+    mouse: {
+        x: number;
+        y: number;
+    };
+    worldMouse: {
+        x: number;
+        y: number;
+    };
+};
+export type TabBlurEvent = {
+    tag: "TAB_BLUR";
+};
+export type TabFocusEvent = {
+    tag: "TAB_FOCUS";
+};
 export type MusicEndEvent = {
     tag: "MUSIC_END";
     id: string;
 };
-export type GameEvent = TimeEvent | ClickEvent | HoverInEvent | HoverOutEvent | MouseMoveEvent | MusicEndEvent;
+export type FullscreenChangeEvent = {
+    tag: "FULLSCREEN_CHANGE";
+    isFullscreen: boolean;
+};
+export type GameEvent = TimeEvent | ClickEvent | HoverInEvent | HoverOutEvent | MouseMoveEvent | MouseLeaveEvent | TabBlurEvent | TabFocusEvent | MusicEndEvent | FullscreenChangeEvent;
 export type CustomGameEvent<Custom> = {
     tag: "CUSTOM";
     event: Custom;
@@ -173,7 +202,7 @@ export type NextStateFunction<State, Custom = never> = (props: NextStateProps<St
 export type RunEngineProps<State, Custom = never> = {
     initialState: State;
     render: (state: State) => {
-        cursor?: "default" | "pointer";
+        cursor?: "default" | "pointer" | "none";
         renderables: Renderable[];
     };
     nextState: NextStateFunction<State, Custom> | NextStateFunction<State, Custom>[];
@@ -204,6 +233,7 @@ export type RunEngineProps<State, Custom = never> = {
         width?: number;
         height?: number;
         backgroundColor?: string;
+        resize?: "none" | "fit" | "stretch";
     };
     camera?: (state: State) => {
         x: number;
@@ -213,6 +243,8 @@ export type RunEngineProps<State, Custom = never> = {
 };
 export type RunEngineFunction = <State, Custom = never>(props: RunEngineProps<State, Custom>) => Promise<{
     sendEvent: (event: Custom) => void;
+    requestFullscreen: () => Promise<void>;
+    exitFullscreen: () => Promise<void>;
 }>;
 export declare const keyboardKeys: readonly ["ControlLeft", "ControlRight", "AltLeft", "AltRight", "CapsLock", "End", "Delete", "Tab", "Space", "Enter", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Numpad0", "Numpad1", "Numpad2", "Numpad3", "Numpad4", "Numpad5", "Numpad6", "Numpad7", "Numpad8", "Numpad9", "Digit0", "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6", "Digit7", "Digit8", "Digit9", "KeyA", "KeyB", "KeyC", "KeyD", "KeyE", "KeyF", "KeyG", "KeyH", "KeyI", "KeyJ", "KeyK", "KeyL", "KeyM", "KeyN", "KeyO", "KeyP", "KeyQ", "KeyR", "KeyS", "KeyT", "KeyU", "KeyV", "KeyW", "KeyX", "KeyY", "KeyZ"];
 export type KeyboardKeys = (typeof keyboardKeys)[number];

package/lib/index.cjs

@@ -120,6 +120,35 @@ const sortByLayer = (renderables) => [...renderables].sort((a, b) => (a.layer ??
 const anchorOf = (renderable) => renderable.type === "LINE" ? renderable.from : renderable.position;
 // No RunEngineProps.camera set is the same as one that doesn't pan or zoom.
 const DEFAULT_CAMERA = { x: 0, y: 0, zoom: 1 };
+// Stands in for a resources[id].src image that fails to load — most
+// often because it's a real, not-necessarily-open-source asset that
+// (correctly) isn't checked into a public repo, rather than a bug. Drawn
+// at the sheet's *declared* size (resources[id].size, not anything read
+// off the failed image), so every existing frame/slice/animation still
+// lines up exactly as if the real sheet had loaded — nothing about the
+// example's own code has to know or care that this happened.
+const createPlaceholderSheet = (size) => {
+    const canvas = window.document.createElement("canvas");
+    canvas.width = Math.max(1, size.width);
+    canvas.height = Math.max(1, size.height);
+    const context = canvas.getContext("2d");
+    if (context === null) {
+        return canvas;
+    }
+    // The old "missing texture" magenta/black checkerboard — deliberately
+    // eye-catching (rather than, say, a plain gray box) so a placeholder
+    // reads as "an asset is missing" at a glance instead of quietly
+    // passing for a real, if plain, sprite.
+    const cellSize = Math.max(4, Math.min(16, Math.round(Math.min(canvas.width, canvas.height) / 4)));
+    for (let y = 0; y < canvas.height; y += cellSize) {
+        for (let x = 0; x < canvas.width; x += cellSize) {
+            const isEvenCell = (x / cellSize + y / cellSize) % 2 === 0;
+            context.fillStyle = isEvenCell ? "#ff00ff" : "#000000";
+            context.fillRect(x, y, cellSize, cellSize);
+        }
+    }
+    return canvas;
+};
 const runEngine = async (props) => {
     const runId = ++latestRunId;
     resetCanvas?.();
@@ -146,6 +175,31 @@ const runEngine = async (props) => {
     // Make the canvas focusable so keyboard input is scoped to it instead of
     // leaking to the rest of the page (e.g. arrow keys scrolling the window).
     canvas.tabIndex = 0;
+    // Resizes the *display* size only (CSS width/height) — canvas.width/
+    // height above stays the fixed logical resolution every renderable's
+    // position is already expressed in, so this never needs to touch any
+    // of that math. See RunEngineProps.canvas.resize for the mode semantics.
+    const applyResize = () => {
+        const mode = props.canvas?.resize;
+        if (mode === undefined || mode === "none") {
+            return;
+        }
+        if (mode === "stretch") {
+            canvas.style.width = `${window.innerWidth}px`;
+            canvas.style.height = `${window.innerHeight}px`;
+            return;
+        }
+        const scale = Math.min(window.innerWidth / canvas.width, window.innerHeight / canvas.height);
+        canvas.style.width = `${canvas.width * scale}px`;
+        canvas.style.height = `${canvas.height * scale}px`;
+    };
+    applyResize();
+    window.addEventListener("resize", applyResize);
+    const requestFullscreen = () => canvas.requestFullscreen();
+    // exitFullscreen() rejects with a TypeError if nothing is fullscreen —
+    // guarded into a no-op instead, so callers don't need to track that
+    // state themselves just to call this safely.
+    const exitFullscreen = () => window.document.fullscreenElement === null ? Promise.resolve() : window.document.exitFullscreen();
     let state = props.initialState;
     const events = [];
     // Lets a caller report something that happened outside the render loop
@@ -158,10 +212,9 @@ const runEngine = async (props) => {
     const resources = props.resources ?? {};
     const resourceById = await iterateRecordAsync(resources, async ({ value }) => new Promise((resolve) => {
         const image = new Image();
-        image.src = value.src;
-        image.onload = function () {
+        const settle = (loadedImage) => {
             resolve({
-                image,
+                image: loadedImage,
                 size: {
                     width: value.size.width / value.slices.horizontal,
                     height: value.size.height / value.slices.vertical,
@@ -170,12 +223,25 @@ const runEngine = async (props) => {
                 animations: value.animations ?? {},
             });
         };
+        image.src = value.src;
+        image.onload = () => settle(image);
+        // Missing/failed-to-load asset (see .gitignore's dist/resources/
+        // note) — a placeholder sheet, sized to match what this resource
+        // declared, keeps every frame/slice/animation index the example
+        // already computes valid instead of drawing nothing or throwing.
+        image.onerror = () => settle(createPlaceholderSheet(value.size));
     }));
     const loadAudio = (src) => new Promise((resolve) => {
         const audio = new Audio(src);
         audio.oncanplaythrough = function () {
             resolve(audio);
         };
+        // Missing/failed-to-load audio — resolve anyway instead of hanging
+        // this Promise (and every resource after it, via Promise.all)
+        // forever waiting for a "canplaythrough" that's never coming.
+        // playSound/playMusic below already no-op safely on an element
+        // that can't actually play.
+        audio.onerror = () => resolve(audio);
     });
     const sounds = props.sounds ?? {};
     const audioById = await iterateRecordAsync(sounds, ({ value }) => loadAudio(value.src));
@@ -188,7 +254,10 @@ const runEngine = async (props) => {
             return;
         }
         const instance = audio.cloneNode();
-        instance.play();
+        // A missing/failed-to-load sound (see loadAudio's onerror above)
+        // rejects here instead of playing — caught and dropped rather than
+        // left as an unhandled rejection, same as playMusic/resumeMusic below.
+        instance.play().catch(() => { });
     };
     const music = props.music ?? {};
     const musicById = await iterateRecordAsync(music, ({ value }) => loadAudio(value.src));
@@ -220,14 +289,14 @@ const runEngine = async (props) => {
         }
         audio.loop = music[id]?.loop ?? true;
         audio.volume = musicVolume;
-        audio.play();
+        audio.play().catch(() => { });
         currentMusic = audio;
     };
     const pauseMusic = () => {
         currentMusic?.pause();
     };
     const resumeMusic = () => {
-        currentMusic?.play();
+        currentMusic?.play().catch(() => { });
     };
     const setMusicVolume = (volume) => {
         musicVolume = Math.min(1, Math.max(0, volume));
@@ -237,9 +306,11 @@ const runEngine = async (props) => {
     };
     // A newer runEngine() call started while this one was still loading
     // resources (e.g. a spritesheet) — abandon this run instead of setting
-    // up a second, orphaned render loop alongside the newer one.
+    // up a second, orphaned render loop alongside the newer one. The
+    // fullscreen functions are no-ops here since this run never gets far
+    // enough to own the canvas — the newer run's are the ones that matter.
     if (runId !== latestRunId) {
-        return { sendEvent };
+        return { sendEvent, requestFullscreen: () => Promise.resolve(), exitFullscreen: () => Promise.resolve() };
     }
     context.imageSmoothingEnabled = false;
     // An offscreen 1x1 canvas used only to resolve a CSS color string (a
@@ -529,7 +600,7 @@ const runEngine = async (props) => {
     const nextStateFns = Array.isArray(props.nextState) ? props.nextState : [props.nextState];
     let lastFrame = Date.now();
     let hoveredId = null;
-    canvas.addEventListener("click", (ev) => {
+    const handleClick = (ev) => {
         const mouse = getCanvasPosition(ev);
         if (hoveredId === null)
             return;
@@ -538,7 +609,8 @@ const runEngine = async (props) => {
         if (hovered !== undefined && hovered.isClickable) {
             events.push({ tag: "CLICK", id: hovered.id, mouse, worldMouse: toWorldPosition(mouse, camera) });
         }
-    });
+    };
+    canvas.addEventListener("click", handleClick);
     const initialState = {
         keyboardState: createRecord(keyboardKeys, () => false),
     };
@@ -548,7 +620,7 @@ const runEngine = async (props) => {
     const currentState = {
         keyboardState: { ...initialState.keyboardState },
     };
-    canvas.addEventListener("keydown", (event) => {
+    const handleKeyDown = (event) => {
         const pressedKey = keyboardKeys.find((key) => key === event.code);
         if (pressedKey !== undefined) {
             // Stop tracked keys (arrows, space, ...) from also scrolling the
@@ -557,15 +629,17 @@ const runEngine = async (props) => {
             event.preventDefault();
             currentState.keyboardState[pressedKey] = true;
         }
-    });
-    canvas.addEventListener("keyup", (event) => {
+    };
+    canvas.addEventListener("keydown", handleKeyDown);
+    const handleKeyUp = (event) => {
         const releasedKey = keyboardKeys.find((key) => key === event.code);
         if (releasedKey !== undefined) {
             event.preventDefault();
             currentState.keyboardState[releasedKey] = false;
         }
-    });
-    canvas.addEventListener("mousemove", (ev) => {
+    };
+    canvas.addEventListener("keyup", handleKeyUp);
+    const handleMouseMoveHover = (ev) => {
         const mouse = getCanvasPosition(ev);
         const { renderables, camera } = renderState(state);
         const worldMouse = toWorldPosition(mouse, camera);
@@ -582,8 +656,9 @@ const runEngine = async (props) => {
             }
         }
         hoveredId = hovered === undefined ? null : hovered.id ?? null;
-    });
-    canvas.addEventListener("mousemove", (ev) => {
+    };
+    canvas.addEventListener("mousemove", handleMouseMoveHover);
+    const handleMouseMoveTracking = (ev) => {
         const mouse = getCanvasPosition(ev);
         if (hoveredId === null) {
             return;
@@ -593,7 +668,44 @@ const runEngine = async (props) => {
         if (hovered !== undefined && hovered.trackMouseMovement) {
             events.push({ tag: "MOUSE_MOVE", mouse, worldMouse: toWorldPosition(mouse, camera), id: hovered.id });
         }
-    });
+    };
+    canvas.addEventListener("mousemove", handleMouseMoveTracking);
+    // No further mousemove fires once the mouse is off the canvas, so this
+    // is also the only chance to report a HOVER_OUT for whatever was
+    // hovered when it left — otherwise that hover would just dangle,
+    // never explicitly ended.
+    const handleMouseLeave = (ev) => {
+        const mouse = getCanvasPosition(ev);
+        const { renderables, camera } = renderState(state);
+        const worldMouse = toWorldPosition(mouse, camera);
+        if (hoveredId !== null) {
+            const lastHovered = renderables.find((r) => r.id === hoveredId);
+            if (lastHovered !== undefined) {
+                events.push({ tag: "HOVER_OUT", id: lastHovered.id, mouse, worldMouse });
+            }
+        }
+        hoveredId = null;
+        events.push({ tag: "MOUSE_LEAVE", mouse, worldMouse });
+    };
+    canvas.addEventListener("mouseleave", handleMouseLeave);
+    // Tab switches are a document-level concern (visibilitychange), not
+    // something that ever reaches the canvas itself the way mouse/keyboard
+    // events do.
+    const handleVisibilityChange = () => {
+        events.push({ tag: window.document.hidden ? "TAB_BLUR" : "TAB_FOCUS" });
+    };
+    window.document.addEventListener("visibilitychange", handleVisibilityChange);
+    // Fullscreen is a document-level concern too, and fires for every way
+    // fullscreen can change — the requestFullscreen()/exitFullscreen()
+    // above, but also things neither of those causes directly, like the
+    // user pressing Esc. Re-running applyResize() here (rather than relying
+    // solely on the "resize" listener) covers browsers that don't also fire
+    // a window resize when fullscreen is toggled.
+    const handleFullscreenChange = () => {
+        events.push({ tag: "FULLSCREEN_CHANGE", isFullscreen: window.document.fullscreenElement === canvas });
+        applyResize();
+    };
+    window.document.addEventListener("fullscreenchange", handleFullscreenChange);
     context.imageSmoothingEnabled = false;
     // Scale is a canvas transform around the renderable's anchor, applied
     // before its type-specific drawing runs below — everything drawn under
@@ -644,6 +756,56 @@ const runEngine = async (props) => {
         tintBufferContext.globalCompositeOperation = "source-over";
         return tintBuffer;
     };
+    // Palette-swapped frames, keyed by resourceId + frame + the exact swap
+    // list — unlike tintedSpriteFrame's cheap multiply-blend (redone fresh
+    // every draw off one shared buffer), a swap needs real pixel work
+    // (getImageData over the whole frame), so each unique combination is
+    // computed once here and reused on every later draw instead. Grows for
+    // as long as new combinations keep showing up — fine for a fixed small
+    // set of recolors (e.g. team A/B/C), a bad fit for one that varies
+    // continuously (e.g. a randomized hue per instance), which would cache-
+    // miss every time and just accumulate.
+    const swappedFrameCache = new Map();
+    const swappedSpriteFrame = (resourceId, frame, image, source, swapColors) => {
+        const cacheKey = `${resourceId}:${frame}:${swapColors.map(({ from, to }) => `${from}>${to}`).join(",")}`;
+        const cached = swappedFrameCache.get(cacheKey);
+        if (cached !== undefined) {
+            return cached;
+        }
+        const canvas = window.document.createElement("canvas");
+        canvas.width = source.width;
+        canvas.height = source.height;
+        const swapContext = canvas.getContext("2d");
+        // No 2d context to work with (shouldn't happen in a real browser) —
+        // draw the untouched frame rather than crash.
+        if (swapContext === null) {
+            return image;
+        }
+        swapContext.drawImage(image, source.x, source.y, source.width, source.height, 0, 0, source.width, source.height);
+        // Resolved once per unique `from`/`to` pair (resolveColor caches by
+        // string), not per pixel — the pixel loop below only ever compares
+        // against these already-resolved bytes.
+        const resolvedSwaps = swapColors.map(({ from, to }) => ({
+            from: resolveColor(from),
+            to: resolveColor(to),
+        }));
+        const imageData = swapContext.getImageData(0, 0, canvas.width, canvas.height);
+        const pixels = imageData.data;
+        for (let i = 0; i < pixels.length; i += 4) {
+            for (const { from, to } of resolvedSwaps) {
+                if (pixels[i] === from[0] && pixels[i + 1] === from[1] && pixels[i + 2] === from[2] && pixels[i + 3] === from[3]) {
+                    pixels[i] = to[0];
+                    pixels[i + 1] = to[1];
+                    pixels[i + 2] = to[2];
+                    pixels[i + 3] = to[3];
+                    break;
+                }
+            }
+        }
+        swapContext.putImageData(imageData, 0, 0);
+        swappedFrameCache.set(cacheKey, canvas);
+        return canvas;
+    };
     const intervalId = setInterval(() => {
         const now = Date.now();
         const delta = now - lastFrame;
@@ -714,7 +876,7 @@ const runEngine = async (props) => {
                 continue;
             }
             if (renderable.type === "SPRITE") {
-                const { opacity = 1, flipX = false, modulate } = renderable;
+                const { opacity = 1, flipX = false, modulate, swapColors } = renderable;
                 const resource = resourceById[renderable.resourceId];
                 const frame = {
                     x: renderable.frame % resource.slices.horizontal,
@@ -729,12 +891,23 @@ const runEngine = async (props) => {
                 };
                 const destWidth = resource.size.width;
                 const destHeight = resource.size.height;
-                // Tinting swaps in an already-tinted offscreen copy of this frame
-                // as the image to draw — everything past this point (flipX,
-                // positioning) treats it exactly like the untinted spritesheet,
-                // just drawn starting at (0, 0) instead of cropped from a sheet.
-                const image = modulate === undefined ? resource.image : tintedSpriteFrame(resource.image, source, modulate);
-                const imageSource = modulate === undefined ? source : { x: 0, y: 0, width: source.width, height: source.height };
+                // Swapping and tinting each swap in an already-processed offscreen
+                // copy of this frame as the image to draw from then on —
+                // everything past this point (flipX, positioning) treats it
+                // exactly like the untinted spritesheet, just drawn starting at
+                // (0, 0) instead of cropped from a sheet. Swap runs first (it's
+                // the sprite's "real" recolored identity), tint runs on top of
+                // that (e.g. a damage flash still applies over swapped colors).
+                let image = resource.image;
+                let imageSource = source;
+                if (swapColors !== undefined && swapColors.length > 0) {
+                    image = swappedSpriteFrame(renderable.resourceId, renderable.frame, image, imageSource, swapColors);
+                    imageSource = { x: 0, y: 0, width: source.width, height: source.height };
+                }
+                if (modulate !== undefined) {
+                    image = tintedSpriteFrame(image, imageSource, modulate);
+                    imageSource = { x: 0, y: 0, width: source.width, height: source.height };
+                }
                 context.globalAlpha = opacity;
                 const drawSprite = (destX, destY) => {
                     context.drawImage(image, imageSource.x, imageSource.y, imageSource.width, imageSource.height, destX, destY, destWidth, destHeight);
@@ -785,8 +958,37 @@ const runEngine = async (props) => {
     }, 0);
     resetCanvas = () => {
         clearInterval(intervalId);
+        // Otherwise a track started by this run keeps playing underneath
+        // whatever the next runEngine() call starts — currentMusic is a
+        // per-run element, not something the next run has any way to reach.
+        currentMusic?.pause();
+        currentMusic = null;
+        // The canvas element itself is only thrown away between runs if the
+        // caller replaces it — in the playground it's the same persistent
+        // <canvas id="yuuna"> across every example switch and every
+        // Auto-Reload keystroke, so its listeners have to be removed
+        // explicitly here too, or each run stacks its own click/mousemove/
+        // keyboard handlers on top of every previous run's. Those old
+        // handlers still fire (each still does its own hit-testing and
+        // renderState() call against its own now-frozen state) even though
+        // their interval is long since cleared, quietly costing more CPU per
+        // click/mousemove the more times a run's been replaced — and on a
+        // slow enough device or long enough playground session, that pile-up
+        // is what "clicks stop working" actually looks like.
+        canvas.removeEventListener("click", handleClick);
+        canvas.removeEventListener("keydown", handleKeyDown);
+        canvas.removeEventListener("keyup", handleKeyUp);
+        canvas.removeEventListener("mousemove", handleMouseMoveHover);
+        canvas.removeEventListener("mousemove", handleMouseMoveTracking);
+        canvas.removeEventListener("mouseleave", handleMouseLeave);
+        // This one's on `document`, not the canvas — same reasoning as above,
+        // just doubly true since `document` isn't even scoped to this canvas.
+        window.document.removeEventListener("visibilitychange", handleVisibilityChange);
+        window.document.removeEventListener("fullscreenchange", handleFullscreenChange);
+        // Same pile-up risk as the canvas listeners above, but on `window`.
+        window.removeEventListener("resize", applyResize);
     };
-    return { sendEvent };
+    return { sendEvent, requestFullscreen, exitFullscreen };
 };
 
 exports.STOP = STOP;

package/lib/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/index.js

@@ -118,6 +118,35 @@ const sortByLayer = (renderables) => [...renderables].sort((a, b) => (a.layer ??
 const anchorOf = (renderable) => renderable.type === "LINE" ? renderable.from : renderable.position;
 // No RunEngineProps.camera set is the same as one that doesn't pan or zoom.
 const DEFAULT_CAMERA = { x: 0, y: 0, zoom: 1 };
+// Stands in for a resources[id].src image that fails to load — most
+// often because it's a real, not-necessarily-open-source asset that
+// (correctly) isn't checked into a public repo, rather than a bug. Drawn
+// at the sheet's *declared* size (resources[id].size, not anything read
+// off the failed image), so every existing frame/slice/animation still
+// lines up exactly as if the real sheet had loaded — nothing about the
+// example's own code has to know or care that this happened.
+const createPlaceholderSheet = (size) => {
+    const canvas = window.document.createElement("canvas");
+    canvas.width = Math.max(1, size.width);
+    canvas.height = Math.max(1, size.height);
+    const context = canvas.getContext("2d");
+    if (context === null) {
+        return canvas;
+    }
+    // The old "missing texture" magenta/black checkerboard — deliberately
+    // eye-catching (rather than, say, a plain gray box) so a placeholder
+    // reads as "an asset is missing" at a glance instead of quietly
+    // passing for a real, if plain, sprite.
+    const cellSize = Math.max(4, Math.min(16, Math.round(Math.min(canvas.width, canvas.height) / 4)));
+    for (let y = 0; y < canvas.height; y += cellSize) {
+        for (let x = 0; x < canvas.width; x += cellSize) {
+            const isEvenCell = (x / cellSize + y / cellSize) % 2 === 0;
+            context.fillStyle = isEvenCell ? "#ff00ff" : "#000000";
+            context.fillRect(x, y, cellSize, cellSize);
+        }
+    }
+    return canvas;
+};
 const runEngine = async (props) => {
     const runId = ++latestRunId;
     resetCanvas?.();
@@ -144,6 +173,31 @@ const runEngine = async (props) => {
     // Make the canvas focusable so keyboard input is scoped to it instead of
     // leaking to the rest of the page (e.g. arrow keys scrolling the window).
     canvas.tabIndex = 0;
+    // Resizes the *display* size only (CSS width/height) — canvas.width/
+    // height above stays the fixed logical resolution every renderable's
+    // position is already expressed in, so this never needs to touch any
+    // of that math. See RunEngineProps.canvas.resize for the mode semantics.
+    const applyResize = () => {
+        const mode = props.canvas?.resize;
+        if (mode === undefined || mode === "none") {
+            return;
+        }
+        if (mode === "stretch") {
+            canvas.style.width = `${window.innerWidth}px`;
+            canvas.style.height = `${window.innerHeight}px`;
+            return;
+        }
+        const scale = Math.min(window.innerWidth / canvas.width, window.innerHeight / canvas.height);
+        canvas.style.width = `${canvas.width * scale}px`;
+        canvas.style.height = `${canvas.height * scale}px`;
+    };
+    applyResize();
+    window.addEventListener("resize", applyResize);
+    const requestFullscreen = () => canvas.requestFullscreen();
+    // exitFullscreen() rejects with a TypeError if nothing is fullscreen —
+    // guarded into a no-op instead, so callers don't need to track that
+    // state themselves just to call this safely.
+    const exitFullscreen = () => window.document.fullscreenElement === null ? Promise.resolve() : window.document.exitFullscreen();
     let state = props.initialState;
     const events = [];
     // Lets a caller report something that happened outside the render loop
@@ -156,10 +210,9 @@ const runEngine = async (props) => {
     const resources = props.resources ?? {};
     const resourceById = await iterateRecordAsync(resources, async ({ value }) => new Promise((resolve) => {
         const image = new Image();
-        image.src = value.src;
-        image.onload = function () {
+        const settle = (loadedImage) => {
             resolve({
-                image,
+                image: loadedImage,
                 size: {
                     width: value.size.width / value.slices.horizontal,
                     height: value.size.height / value.slices.vertical,
@@ -168,12 +221,25 @@ const runEngine = async (props) => {
                 animations: value.animations ?? {},
             });
         };
+        image.src = value.src;
+        image.onload = () => settle(image);
+        // Missing/failed-to-load asset (see .gitignore's dist/resources/
+        // note) — a placeholder sheet, sized to match what this resource
+        // declared, keeps every frame/slice/animation index the example
+        // already computes valid instead of drawing nothing or throwing.
+        image.onerror = () => settle(createPlaceholderSheet(value.size));
     }));
     const loadAudio = (src) => new Promise((resolve) => {
         const audio = new Audio(src);
         audio.oncanplaythrough = function () {
             resolve(audio);
         };
+        // Missing/failed-to-load audio — resolve anyway instead of hanging
+        // this Promise (and every resource after it, via Promise.all)
+        // forever waiting for a "canplaythrough" that's never coming.
+        // playSound/playMusic below already no-op safely on an element
+        // that can't actually play.
+        audio.onerror = () => resolve(audio);
     });
     const sounds = props.sounds ?? {};
     const audioById = await iterateRecordAsync(sounds, ({ value }) => loadAudio(value.src));
@@ -186,7 +252,10 @@ const runEngine = async (props) => {
             return;
         }
         const instance = audio.cloneNode();
-        instance.play();
+        // A missing/failed-to-load sound (see loadAudio's onerror above)
+        // rejects here instead of playing — caught and dropped rather than
+        // left as an unhandled rejection, same as playMusic/resumeMusic below.
+        instance.play().catch(() => { });
     };
     const music = props.music ?? {};
     const musicById = await iterateRecordAsync(music, ({ value }) => loadAudio(value.src));
@@ -218,14 +287,14 @@ const runEngine = async (props) => {
         }
         audio.loop = music[id]?.loop ?? true;
         audio.volume = musicVolume;
-        audio.play();
+        audio.play().catch(() => { });
         currentMusic = audio;
     };
     const pauseMusic = () => {
         currentMusic?.pause();
     };
     const resumeMusic = () => {
-        currentMusic?.play();
+        currentMusic?.play().catch(() => { });
     };
     const setMusicVolume = (volume) => {
         musicVolume = Math.min(1, Math.max(0, volume));
@@ -235,9 +304,11 @@ const runEngine = async (props) => {
     };
     // A newer runEngine() call started while this one was still loading
     // resources (e.g. a spritesheet) — abandon this run instead of setting
-    // up a second, orphaned render loop alongside the newer one.
+    // up a second, orphaned render loop alongside the newer one. The
+    // fullscreen functions are no-ops here since this run never gets far
+    // enough to own the canvas — the newer run's are the ones that matter.
     if (runId !== latestRunId) {
-        return { sendEvent };
+        return { sendEvent, requestFullscreen: () => Promise.resolve(), exitFullscreen: () => Promise.resolve() };
     }
     context.imageSmoothingEnabled = false;
     // An offscreen 1x1 canvas used only to resolve a CSS color string (a
@@ -527,7 +598,7 @@ const runEngine = async (props) => {
     const nextStateFns = Array.isArray(props.nextState) ? props.nextState : [props.nextState];
     let lastFrame = Date.now();
     let hoveredId = null;
-    canvas.addEventListener("click", (ev) => {
+    const handleClick = (ev) => {
         const mouse = getCanvasPosition(ev);
         if (hoveredId === null)
             return;
@@ -536,7 +607,8 @@ const runEngine = async (props) => {
         if (hovered !== undefined && hovered.isClickable) {
             events.push({ tag: "CLICK", id: hovered.id, mouse, worldMouse: toWorldPosition(mouse, camera) });
         }
-    });
+    };
+    canvas.addEventListener("click", handleClick);
     const initialState = {
         keyboardState: createRecord(keyboardKeys, () => false),
     };
@@ -546,7 +618,7 @@ const runEngine = async (props) => {
     const currentState = {
         keyboardState: { ...initialState.keyboardState },
     };
-    canvas.addEventListener("keydown", (event) => {
+    const handleKeyDown = (event) => {
         const pressedKey = keyboardKeys.find((key) => key === event.code);
         if (pressedKey !== undefined) {
             // Stop tracked keys (arrows, space, ...) from also scrolling the
@@ -555,15 +627,17 @@ const runEngine = async (props) => {
             event.preventDefault();
             currentState.keyboardState[pressedKey] = true;
         }
-    });
-    canvas.addEventListener("keyup", (event) => {
+    };
+    canvas.addEventListener("keydown", handleKeyDown);
+    const handleKeyUp = (event) => {
         const releasedKey = keyboardKeys.find((key) => key === event.code);
         if (releasedKey !== undefined) {
             event.preventDefault();
             currentState.keyboardState[releasedKey] = false;
         }
-    });
-    canvas.addEventListener("mousemove", (ev) => {
+    };
+    canvas.addEventListener("keyup", handleKeyUp);
+    const handleMouseMoveHover = (ev) => {
         const mouse = getCanvasPosition(ev);
         const { renderables, camera } = renderState(state);
         const worldMouse = toWorldPosition(mouse, camera);
@@ -580,8 +654,9 @@ const runEngine = async (props) => {
             }
         }
         hoveredId = hovered === undefined ? null : hovered.id ?? null;
-    });
-    canvas.addEventListener("mousemove", (ev) => {
+    };
+    canvas.addEventListener("mousemove", handleMouseMoveHover);
+    const handleMouseMoveTracking = (ev) => {
         const mouse = getCanvasPosition(ev);
         if (hoveredId === null) {
             return;
@@ -591,7 +666,44 @@ const runEngine = async (props) => {
         if (hovered !== undefined && hovered.trackMouseMovement) {
             events.push({ tag: "MOUSE_MOVE", mouse, worldMouse: toWorldPosition(mouse, camera), id: hovered.id });
         }
-    });
+    };
+    canvas.addEventListener("mousemove", handleMouseMoveTracking);
+    // No further mousemove fires once the mouse is off the canvas, so this
+    // is also the only chance to report a HOVER_OUT for whatever was
+    // hovered when it left — otherwise that hover would just dangle,
+    // never explicitly ended.
+    const handleMouseLeave = (ev) => {
+        const mouse = getCanvasPosition(ev);
+        const { renderables, camera } = renderState(state);
+        const worldMouse = toWorldPosition(mouse, camera);
+        if (hoveredId !== null) {
+            const lastHovered = renderables.find((r) => r.id === hoveredId);
+            if (lastHovered !== undefined) {
+                events.push({ tag: "HOVER_OUT", id: lastHovered.id, mouse, worldMouse });
+            }
+        }
+        hoveredId = null;
+        events.push({ tag: "MOUSE_LEAVE", mouse, worldMouse });
+    };
+    canvas.addEventListener("mouseleave", handleMouseLeave);
+    // Tab switches are a document-level concern (visibilitychange), not
+    // something that ever reaches the canvas itself the way mouse/keyboard
+    // events do.
+    const handleVisibilityChange = () => {
+        events.push({ tag: window.document.hidden ? "TAB_BLUR" : "TAB_FOCUS" });
+    };
+    window.document.addEventListener("visibilitychange", handleVisibilityChange);
+    // Fullscreen is a document-level concern too, and fires for every way
+    // fullscreen can change — the requestFullscreen()/exitFullscreen()
+    // above, but also things neither of those causes directly, like the
+    // user pressing Esc. Re-running applyResize() here (rather than relying
+    // solely on the "resize" listener) covers browsers that don't also fire
+    // a window resize when fullscreen is toggled.
+    const handleFullscreenChange = () => {
+        events.push({ tag: "FULLSCREEN_CHANGE", isFullscreen: window.document.fullscreenElement === canvas });
+        applyResize();
+    };
+    window.document.addEventListener("fullscreenchange", handleFullscreenChange);
     context.imageSmoothingEnabled = false;
     // Scale is a canvas transform around the renderable's anchor, applied
     // before its type-specific drawing runs below — everything drawn under
@@ -642,6 +754,56 @@ const runEngine = async (props) => {
         tintBufferContext.globalCompositeOperation = "source-over";
         return tintBuffer;
     };
+    // Palette-swapped frames, keyed by resourceId + frame + the exact swap
+    // list — unlike tintedSpriteFrame's cheap multiply-blend (redone fresh
+    // every draw off one shared buffer), a swap needs real pixel work
+    // (getImageData over the whole frame), so each unique combination is
+    // computed once here and reused on every later draw instead. Grows for
+    // as long as new combinations keep showing up — fine for a fixed small
+    // set of recolors (e.g. team A/B/C), a bad fit for one that varies
+    // continuously (e.g. a randomized hue per instance), which would cache-
+    // miss every time and just accumulate.
+    const swappedFrameCache = new Map();
+    const swappedSpriteFrame = (resourceId, frame, image, source, swapColors) => {
+        const cacheKey = `${resourceId}:${frame}:${swapColors.map(({ from, to }) => `${from}>${to}`).join(",")}`;
+        const cached = swappedFrameCache.get(cacheKey);
+        if (cached !== undefined) {
+            return cached;
+        }
+        const canvas = window.document.createElement("canvas");
+        canvas.width = source.width;
+        canvas.height = source.height;
+        const swapContext = canvas.getContext("2d");
+        // No 2d context to work with (shouldn't happen in a real browser) —
+        // draw the untouched frame rather than crash.
+        if (swapContext === null) {
+            return image;
+        }
+        swapContext.drawImage(image, source.x, source.y, source.width, source.height, 0, 0, source.width, source.height);
+        // Resolved once per unique `from`/`to` pair (resolveColor caches by
+        // string), not per pixel — the pixel loop below only ever compares
+        // against these already-resolved bytes.
+        const resolvedSwaps = swapColors.map(({ from, to }) => ({
+            from: resolveColor(from),
+            to: resolveColor(to),
+        }));
+        const imageData = swapContext.getImageData(0, 0, canvas.width, canvas.height);
+        const pixels = imageData.data;
+        for (let i = 0; i < pixels.length; i += 4) {
+            for (const { from, to } of resolvedSwaps) {
+                if (pixels[i] === from[0] && pixels[i + 1] === from[1] && pixels[i + 2] === from[2] && pixels[i + 3] === from[3]) {
+                    pixels[i] = to[0];
+                    pixels[i + 1] = to[1];
+                    pixels[i + 2] = to[2];
+                    pixels[i + 3] = to[3];
+                    break;
+                }
+            }
+        }
+        swapContext.putImageData(imageData, 0, 0);
+        swappedFrameCache.set(cacheKey, canvas);
+        return canvas;
+    };
     const intervalId = setInterval(() => {
         const now = Date.now();
         const delta = now - lastFrame;
@@ -712,7 +874,7 @@ const runEngine = async (props) => {
                 continue;
             }
             if (renderable.type === "SPRITE") {
-                const { opacity = 1, flipX = false, modulate } = renderable;
+                const { opacity = 1, flipX = false, modulate, swapColors } = renderable;
                 const resource = resourceById[renderable.resourceId];
                 const frame = {
                     x: renderable.frame % resource.slices.horizontal,
@@ -727,12 +889,23 @@ const runEngine = async (props) => {
                 };
                 const destWidth = resource.size.width;
                 const destHeight = resource.size.height;
-                // Tinting swaps in an already-tinted offscreen copy of this frame
-                // as the image to draw — everything past this point (flipX,
-                // positioning) treats it exactly like the untinted spritesheet,
-                // just drawn starting at (0, 0) instead of cropped from a sheet.
-                const image = modulate === undefined ? resource.image : tintedSpriteFrame(resource.image, source, modulate);
-                const imageSource = modulate === undefined ? source : { x: 0, y: 0, width: source.width, height: source.height };
+                // Swapping and tinting each swap in an already-processed offscreen
+                // copy of this frame as the image to draw from then on —
+                // everything past this point (flipX, positioning) treats it
+                // exactly like the untinted spritesheet, just drawn starting at
+                // (0, 0) instead of cropped from a sheet. Swap runs first (it's
+                // the sprite's "real" recolored identity), tint runs on top of
+                // that (e.g. a damage flash still applies over swapped colors).
+                let image = resource.image;
+                let imageSource = source;
+                if (swapColors !== undefined && swapColors.length > 0) {
+                    image = swappedSpriteFrame(renderable.resourceId, renderable.frame, image, imageSource, swapColors);
+                    imageSource = { x: 0, y: 0, width: source.width, height: source.height };
+                }
+                if (modulate !== undefined) {
+                    image = tintedSpriteFrame(image, imageSource, modulate);
+                    imageSource = { x: 0, y: 0, width: source.width, height: source.height };
+                }
                 context.globalAlpha = opacity;
                 const drawSprite = (destX, destY) => {
                     context.drawImage(image, imageSource.x, imageSource.y, imageSource.width, imageSource.height, destX, destY, destWidth, destHeight);
@@ -783,8 +956,37 @@ const runEngine = async (props) => {
     }, 0);
     resetCanvas = () => {
         clearInterval(intervalId);
+        // Otherwise a track started by this run keeps playing underneath
+        // whatever the next runEngine() call starts — currentMusic is a
+        // per-run element, not something the next run has any way to reach.
+        currentMusic?.pause();
+        currentMusic = null;
+        // The canvas element itself is only thrown away between runs if the
+        // caller replaces it — in the playground it's the same persistent
+        // <canvas id="yuuna"> across every example switch and every
+        // Auto-Reload keystroke, so its listeners have to be removed
+        // explicitly here too, or each run stacks its own click/mousemove/
+        // keyboard handlers on top of every previous run's. Those old
+        // handlers still fire (each still does its own hit-testing and
+        // renderState() call against its own now-frozen state) even though
+        // their interval is long since cleared, quietly costing more CPU per
+        // click/mousemove the more times a run's been replaced — and on a
+        // slow enough device or long enough playground session, that pile-up
+        // is what "clicks stop working" actually looks like.
+        canvas.removeEventListener("click", handleClick);
+        canvas.removeEventListener("keydown", handleKeyDown);
+        canvas.removeEventListener("keyup", handleKeyUp);
+        canvas.removeEventListener("mousemove", handleMouseMoveHover);
+        canvas.removeEventListener("mousemove", handleMouseMoveTracking);
+        canvas.removeEventListener("mouseleave", handleMouseLeave);
+        // This one's on `document`, not the canvas — same reasoning as above,
+        // just doubly true since `document` isn't even scoped to this canvas.
+        window.document.removeEventListener("visibilitychange", handleVisibilityChange);
+        window.document.removeEventListener("fullscreenchange", handleFullscreenChange);
+        // Same pile-up risk as the canvas listeners above, but on `window`.
+        window.removeEventListener("resize", applyResize);
     };
-    return { sendEvent };
+    return { sendEvent, requestFullscreen, exitFullscreen };
 };
 
 export { STOP, runEngine };

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yuuna-engine",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "A lightweight, state-machine-based TypeScript game engine for quick prototypes. Runs directly in the browser.",
   "type": "module",
   "main": "./lib/index.cjs",