@flare-engine/render 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -1,632 +1,324 @@
-// src/draw-order.ts
-function sortByDrawOrder(items, length) {
-  const n = length ?? items.length;
-  for (let i = 1; i < n; i++) {
-    const item = items[i];
-    let j = i - 1;
-    while (j >= 0 && items[j].z > item.z) {
-      items[j + 1] = items[j];
-      j--;
-    }
-    items[j + 1] = item;
-  }
-  return items;
-}
-function drawOrderCompare(a, b) {
-  return a.z - b.z;
-}
-
-// src/camera2d.ts
+import { defineComponent } from "@flare-engine/ecs";
+//#region src/camera2d.ts
+/** Simple pseudo-random for deterministic shake. Avoids Math.random() allocs. */
 function pseudoRandom(seed) {
-  const x = Math.sin(seed * 12.9898 + seed * 78.233) * 43758.5453;
-  return x - Math.floor(x);
+	const x = Math.sin(seed * 12.9898 + seed * 78.233) * 43758.5453;
+	return x - Math.floor(x);
 }
-var PERM = new Uint8Array(256);
+const PERM = /* @__PURE__ */ new Uint8Array(256);
 {
-  for (let i = 0; i < 256; i++) PERM[i] = i;
-  let s = 2654435769;
-  for (let i = 255; i > 0; i--) {
-    s = (s ^ s >>> 15) >>> 0;
-    s = Math.imul(s, 2246822507) >>> 0;
-    s = (s ^ s >>> 13) >>> 0;
-    const j = s % (i + 1);
-    const t = PERM[i];
-    PERM[i] = PERM[j];
-    PERM[j] = t;
-  }
+	for (let i = 0; i < 256; i++) PERM[i] = i;
+	let s = 2654435769;
+	for (let i = 255; i > 0; i--) {
+		s = (s ^ s >>> 15) >>> 0;
+		s = Math.imul(s, 2246822507) >>> 0;
+		s = (s ^ s >>> 13) >>> 0;
+		const j = s % (i + 1);
+		const t = PERM[i];
+		PERM[i] = PERM[j];
+		PERM[j] = t;
+	}
 }
-var S = Math.SQRT1_2;
-var GRADS = [
-  [1, 0],
-  [S, S],
-  [0, 1],
-  [-S, S],
-  [-1, 0],
-  [-S, -S],
-  [0, -1],
-  [S, -S]
+const S = Math.SQRT1_2;
+const GRADS = [
+	[1, 0],
+	[S, S],
+	[0, 1],
+	[-S, S],
+	[-1, 0],
+	[-S, -S],
+	[0, -1],
+	[S, -S]
 ];
 function grad2(hash, x, y) {
-  const g = GRADS[hash & 7];
-  return g[0] * x + g[1] * y;
+	const g = GRADS[hash & 7];
+	return g[0] * x + g[1] * y;
 }
 function fade(t) {
-  return t * t * t * (t * (t * 6 - 15) + 10);
+	return t * t * t * (t * (t * 6 - 15) + 10);
 }
+/** 2D value-gradient noise in [-1, 1]. */
 function noise2d(x, y) {
-  const xi = Math.floor(x) & 255;
-  const yi = Math.floor(y) & 255;
-  const xf = x - Math.floor(x);
-  const yf = y - Math.floor(y);
-  const u = fade(xf);
-  const v = fade(yf);
-  const aa = PERM[PERM[xi] + yi];
-  const ab = PERM[PERM[xi] + yi + 1];
-  const ba = PERM[PERM[xi + 1 & 255] + yi];
-  const bb = PERM[PERM[xi + 1 & 255] + yi + 1];
-  const x1 = xf;
-  const y1 = yf;
-  const x2 = xf - 1;
-  const y2 = yf - 1;
-  const n00 = grad2(aa, x1, y1);
-  const n10 = grad2(ba, x2, y1);
-  const n01 = grad2(ab, x1, y2);
-  const n11 = grad2(bb, x2, y2);
-  const lerpX0 = n00 + u * (n10 - n00);
-  const lerpX1 = n01 + u * (n11 - n01);
-  return lerpX0 + v * (lerpX1 - lerpX0);
+	const xi = Math.floor(x) & 255;
+	const yi = Math.floor(y) & 255;
+	const xf = x - Math.floor(x);
+	const yf = y - Math.floor(y);
+	const u = fade(xf);
+	const v = fade(yf);
+	const aa = PERM[PERM[xi] + yi];
+	const ab = PERM[PERM[xi] + yi + 1];
+	const ba = PERM[PERM[xi + 1 & 255] + yi];
+	const bb = PERM[PERM[xi + 1 & 255] + yi + 1];
+	const x1 = xf;
+	const y1 = yf;
+	const x2 = xf - 1;
+	const y2 = yf - 1;
+	const n00 = grad2(aa, x1, y1);
+	const n10 = grad2(ba, x2, y1);
+	const n01 = grad2(ab, x1, y2);
+	const n11 = grad2(bb, x2, y2);
+	const lerpX0 = n00 + u * (n10 - n00);
+	return lerpX0 + v * (n01 + u * (n11 - n01) - lerpX0);
 }
+/** 2-octave FBM for shake displacement — result in [-1, 1]. */
 function fbmNoise2d(x, y) {
-  return 0.6667 * noise2d(x, y) + 0.3333 * noise2d(x * 2, y * 2);
+	return .6667 * noise2d(x, y) + .3333 * noise2d(x * 2, y * 2);
 }
+/**
+* Camera2D — 2D camera with position, zoom, rotation, follow, and shake.
+* Pure data + methods — no Skia dependency. The renderer reads camera state
+* to build the view transform.
+*/
 var Camera2D = class {
-  /** Camera position (world-space center). */
-  x = 0;
-  y = 0;
-  /** Zoom level (1 = 100%). */
-  zoom = 1;
-  /** Rotation in radians. */
-  rotation = 0;
-  /** Viewport width in pixels. */
-  viewportWidth = 0;
-  /** Viewport height in pixels. */
-  viewportHeight = 0;
-  /** Optional world bounds to clamp camera position. */
-  bounds = null;
-  _follow = null;
-  _shake = null;
-  _shakePerlin = null;
-  _shakeSeed = 0;
-  _shakePerlinSeed = 0;
-  _motionScale = 1;
-  /** Set viewport dimensions. */
-  setViewport(width, height) {
-    this.viewportWidth = width;
-    this.viewportHeight = height;
-  }
-  /** Start following a target position. */
-  follow(target, options) {
-    this._follow = { target, options: options ?? {} };
-  }
-  /** Stop following. */
-  unfollow() {
-    this._follow = null;
-  }
-  /**
-   * Global motion multiplier applied to subsequent `shake()` calls. Scales
-   * both amplitude and duration. Default 1 (no-op). 0 fully suppresses
-   * shake. Intended to be driven by `@flare-engine/a11y` reduced-motion so
-   * callers don't have to guard every shake site.
-   *
-   * Only affects future `shake()` calls — does not retroactively modify an
-   * in-flight shake.
-   *
-   * Clamped to `>= 0`.
-   */
-  setMotionScale(scale) {
-    this._motionScale = scale < 0 ? 0 : scale;
-  }
-  /** Current motion scale (default 1). */
-  get motionScale() {
-    return this._motionScale;
-  }
-  /** Start camera shake. */
-  shake(intensity, duration) {
-    const k = this._motionScale;
-    if (k <= 0) {
-      this._shake = null;
-      return;
-    }
-    this._shake = {
-      intensity: intensity * k,
-      duration: duration * k,
-      elapsed: 0,
-      offsetX: 0,
-      offsetY: 0
-    };
-    this._shakeSeed++;
-  }
-  /**
-   * Start a Perlin-noise-based camera shake. Overwrites any in-flight
-   * shakePerlin (same semantics as shake()). Respects motionScale.
-   */
-  shakePerlin(intensity, duration) {
-    const k = this._motionScale;
-    if (k <= 0) {
-      this._shakePerlin = null;
-      return;
-    }
-    this._shakePerlin = {
-      intensity: intensity * k,
-      duration: duration * k,
-      elapsed: 0,
-      offsetX: 0,
-      offsetY: 0
-    };
-    this._shakePerlinSeed++;
-  }
-  /**
-   * Update camera. Call once per frame.
-   * @param dt Delta time in seconds.
-   */
-  update(dt) {
-    if (this._follow) {
-      const { target, options } = this._follow;
-      const smoothing = options.smoothing ?? 0.1;
-      const offsetX = options.offset?.x ?? 0;
-      const offsetY = options.offset?.y ?? 0;
-      const goalX = target.x + offsetX;
-      const goalY = target.y + offsetY;
-      if (options.deadZone) {
-        const dz = options.deadZone;
-        const relX = target.x - this.x;
-        const relY = target.y - this.y;
-        if (relX < dz.x) {
-          this.x += (goalX - this.x - (dz.x - relX)) * (1 - smoothing ** dt);
-        } else if (relX > dz.x + dz.width) {
-          this.x += (goalX - this.x + (relX - dz.x - dz.width)) * (1 - smoothing ** dt);
-        }
-        if (relY < dz.y) {
-          this.y += (goalY - this.y - (dz.y - relY)) * (1 - smoothing ** dt);
-        } else if (relY > dz.y + dz.height) {
-          this.y += (goalY - this.y + (relY - dz.y - dz.height)) * (1 - smoothing ** dt);
-        }
-      } else {
-        const factor = 1 - smoothing ** dt;
-        this.x += (goalX - this.x) * factor;
-        this.y += (goalY - this.y) * factor;
-      }
-    }
-    if (this.bounds) {
-      this._clampToBounds();
-    }
-    if (this._shake) {
-      this._shake.elapsed += dt;
-      if (this._shake.elapsed >= this._shake.duration) {
-        this._shake = null;
-      } else {
-        const progress = this._shake.elapsed / this._shake.duration;
-        const decay = 1 - progress;
-        const seed = this._shakeSeed + this._shake.elapsed * 100;
-        this._shake.offsetX = (pseudoRandom(seed) * 2 - 1) * this._shake.intensity * decay;
-        this._shake.offsetY = (pseudoRandom(seed + 1) * 2 - 1) * this._shake.intensity * decay;
-      }
-    }
-    if (this._shakePerlin) {
-      this._shakePerlin.elapsed += dt;
-      if (this._shakePerlin.elapsed >= this._shakePerlin.duration) {
-        this._shakePerlin = null;
-      } else {
-        const progress = this._shakePerlin.elapsed / this._shakePerlin.duration;
-        const decay = 1 - progress;
-        const t = this._shakePerlin.elapsed * 4.7 + this._shakePerlinSeed * 17.3;
-        this._shakePerlin.offsetX = fbmNoise2d(t, 0) * this._shakePerlin.intensity * decay;
-        this._shakePerlin.offsetY = fbmNoise2d(0, t + 5.4) * this._shakePerlin.intensity * decay;
-      }
-    }
-  }
-  /** Get the effective camera X (including shake + shakePerlin offsets). */
-  get effectiveX() {
-    return this.x + (this._shake?.offsetX ?? 0) + (this._shakePerlin?.offsetX ?? 0);
-  }
-  /** Get the effective camera Y (including shake + shakePerlin offsets). */
-  get effectiveY() {
-    return this.y + (this._shake?.offsetY ?? 0) + (this._shakePerlin?.offsetY ?? 0);
-  }
-  /** Convert world coordinates to screen coordinates. */
-  worldToScreen(worldX, worldY) {
-    return this.worldToScreenInto(worldX, worldY, { x: 0, y: 0 });
-  }
-  /** Zero-alloc variant — writes screen coordinates into `out`. */
-  worldToScreenInto(worldX, worldY, out) {
-    const cos = Math.cos(-this.rotation);
-    const sin = Math.sin(-this.rotation);
-    const dx = (worldX - this.effectiveX) * this.zoom;
-    const dy = (worldY - this.effectiveY) * this.zoom;
-    out.x = cos * dx - sin * dy + this.viewportWidth / 2;
-    out.y = sin * dx + cos * dy + this.viewportHeight / 2;
-    return out;
-  }
-  /** Convert screen coordinates to world coordinates. */
-  screenToWorld(screenX, screenY) {
-    return this.screenToWorldInto(screenX, screenY, { x: 0, y: 0 });
-  }
-  /** Zero-alloc variant — writes world coordinates into `out`. */
-  screenToWorldInto(screenX, screenY, out) {
-    const cx = screenX - this.viewportWidth / 2;
-    const cy = screenY - this.viewportHeight / 2;
-    const cos = Math.cos(this.rotation);
-    const sin = Math.sin(this.rotation);
-    const rx = cos * cx - sin * cy;
-    const ry = sin * cx + cos * cy;
-    out.x = rx / this.zoom + this.effectiveX;
-    out.y = ry / this.zoom + this.effectiveY;
-    return out;
-  }
-  /** Get the visible world-space bounding rect (allocates a fresh Rect). */
-  getBounds() {
-    return this.getBoundsInto({ x: 0, y: 0, width: 0, height: 0 });
-  }
-  /** Zero-alloc variant — writes the visible bounds into `out`. */
-  getBoundsInto(out) {
-    const halfW = this.viewportWidth / (2 * this.zoom);
-    const halfH = this.viewportHeight / (2 * this.zoom);
-    out.x = this.effectiveX - halfW;
-    out.y = this.effectiveY - halfH;
-    out.width = halfW * 2;
-    out.height = halfH * 2;
-    return out;
-  }
-  _clampToBounds() {
-    const b = this.bounds;
-    const halfW = this.viewportWidth / (2 * this.zoom);
-    const halfH = this.viewportHeight / (2 * this.zoom);
-    const minX = b.x + halfW;
-    const maxX = b.x + b.width - halfW;
-    const minY = b.y + halfH;
-    const maxY = b.y + b.height - halfH;
-    if (minX <= maxX) {
-      this.x = Math.max(minX, Math.min(maxX, this.x));
-    } else {
-      this.x = b.x + b.width / 2;
-    }
-    if (minY <= maxY) {
-      this.y = Math.max(minY, Math.min(maxY, this.y));
-    } else {
-      this.y = b.y + b.height / 2;
-    }
-  }
-};
-
-// src/renderer.ts
-var Renderer = class {
-  /** Current frame stats. */
-  stats = { drawCalls: 0, batchCount: 0 };
-  _canvas = null;
-  _inFrame = false;
-  /** Set the canvas to render to. Called once when canvas is available. */
-  setCanvas(canvas) {
-    this._canvas = canvas;
-  }
-  /** Get the current canvas. Throws if not in a frame. */
-  get canvas() {
-    if (!this._canvas) {
-      throw new Error("Renderer: no canvas set");
-    }
-    return this._canvas;
-  }
-  /** Whether we are currently between begin() and end(). */
-  get inFrame() {
-    return this._inFrame;
-  }
-  /**
-   * Begin a new frame. Clears the canvas and resets stats.
-   * @param clearColor 32-bit ARGB color to clear with (default black = 0xFF000000).
-   */
-  begin(clearColor = 4278190080) {
-    if (this._inFrame) {
-      throw new Error("Renderer: begin() called while already in frame");
-    }
-    this._inFrame = true;
-    this.stats.drawCalls = 0;
-    this.stats.batchCount = 0;
-    this.canvas.save();
-    this.canvas.clear(clearColor);
-  }
-  /**
-   * End the current frame. Restores canvas state.
-   */
-  end() {
-    if (!this._inFrame) {
-      throw new Error("Renderer: end() called without begin()");
-    }
-    this.canvas.restore();
-    this._inFrame = false;
-  }
-  /**
-   * Apply camera transform to the canvas.
-   * Call after begin() and before drawing.
-   */
-  applyCamera(cameraX, cameraY, zoom, rotation, viewportWidth, viewportHeight) {
-    const c = this.canvas;
-    c.translate(viewportWidth / 2, viewportHeight / 2);
-    c.scale(zoom, zoom);
-    if (rotation !== 0) {
-      c.rotate(-rotation, 0, 0);
-    }
-    c.translate(-cameraX, -cameraY);
-  }
-  /** Increment draw call counter. Called by batching systems. */
-  recordDrawCall() {
-    this.stats.drawCalls++;
-  }
-  /** Increment batch counter. */
-  recordBatch() {
-    this.stats.batchCount++;
-  }
+	/** Camera position (world-space center). */
+	x = 0;
+	y = 0;
+	/** Zoom level (1 = 100%). */
+	zoom = 1;
+	/** Rotation in radians. */
+	rotation = 0;
+	/** Viewport width in pixels. */
+	viewportWidth = 0;
+	/** Viewport height in pixels. */
+	viewportHeight = 0;
+	/** Optional world bounds to clamp camera position. */
+	bounds = null;
+	_follow = null;
+	_shake = null;
+	_shakePerlin = null;
+	_shakeSeed = 0;
+	_shakePerlinSeed = 0;
+	_motionScale = 1;
+	/** Set viewport dimensions. */
+	setViewport(width, height) {
+		this.viewportWidth = width;
+		this.viewportHeight = height;
+	}
+	/** Start following a target position. */
+	follow(target, options) {
+		this._follow = {
+			target,
+			options: options ?? {}
+		};
+	}
+	/** Stop following. */
+	unfollow() {
+		this._follow = null;
+	}
+	/**
+	* Global motion multiplier applied to subsequent `shake()` calls. Scales
+	* both amplitude and duration. Default 1 (no-op). 0 fully suppresses
+	* shake. Intended to be driven by `@flare-engine/a11y` reduced-motion so
+	* callers don't have to guard every shake site.
+	*
+	* Only affects future `shake()` calls — does not retroactively modify an
+	* in-flight shake.
+	*
+	* Clamped to `>= 0`.
+	*/
+	setMotionScale(scale) {
+		this._motionScale = scale < 0 ? 0 : scale;
+	}
+	/** Current motion scale (default 1). */
+	get motionScale() {
+		return this._motionScale;
+	}
+	/** Start camera shake. */
+	shake(intensity, duration) {
+		const k = this._motionScale;
+		if (k <= 0) {
+			this._shake = null;
+			return;
+		}
+		this._shake = {
+			intensity: intensity * k,
+			duration: duration * k,
+			elapsed: 0,
+			offsetX: 0,
+			offsetY: 0
+		};
+		this._shakeSeed++;
+	}
+	/**
+	* Start a Perlin-noise-based camera shake. Overwrites any in-flight
+	* shakePerlin (same semantics as shake()). Respects motionScale.
+	*/
+	shakePerlin(intensity, duration) {
+		const k = this._motionScale;
+		if (k <= 0) {
+			this._shakePerlin = null;
+			return;
+		}
+		this._shakePerlin = {
+			intensity: intensity * k,
+			duration: duration * k,
+			elapsed: 0,
+			offsetX: 0,
+			offsetY: 0
+		};
+		this._shakePerlinSeed++;
+	}
+	/**
+	* Update camera. Call once per frame.
+	* @param dt Delta time in seconds.
+	*/
+	update(dt) {
+		if (this._follow) {
+			const { target, options } = this._follow;
+			const smoothing = options.smoothing ?? .1;
+			const offsetX = options.offset?.x ?? 0;
+			const offsetY = options.offset?.y ?? 0;
+			const goalX = target.x + offsetX;
+			const goalY = target.y + offsetY;
+			if (options.deadZone) {
+				const dz = options.deadZone;
+				const relX = target.x - this.x;
+				const relY = target.y - this.y;
+				if (relX < dz.x) this.x += (relX + offsetX - dz.x) * (1 - smoothing ** dt);
+				else if (relX > dz.x + dz.width) this.x += (relX + offsetX - dz.x - dz.width) * (1 - smoothing ** dt);
+				if (relY < dz.y) this.y += (relY + offsetY - dz.y) * (1 - smoothing ** dt);
+				else if (relY > dz.y + dz.height) this.y += (relY + offsetY - dz.y - dz.height) * (1 - smoothing ** dt);
+			} else {
+				const factor = 1 - smoothing ** dt;
+				this.x += (goalX - this.x) * factor;
+				this.y += (goalY - this.y) * factor;
+			}
+		}
+		if (this.bounds) this._clampToBounds();
+		if (this._shake) {
+			this._shake.elapsed += dt;
+			if (this._shake.elapsed >= this._shake.duration) this._shake = null;
+			else {
+				const decay = 1 - this._shake.elapsed / this._shake.duration;
+				const seed = this._shakeSeed + this._shake.elapsed * 100;
+				this._shake.offsetX = (pseudoRandom(seed) * 2 - 1) * this._shake.intensity * decay;
+				this._shake.offsetY = (pseudoRandom(seed + 1) * 2 - 1) * this._shake.intensity * decay;
+			}
+		}
+		if (this._shakePerlin) {
+			this._shakePerlin.elapsed += dt;
+			if (this._shakePerlin.elapsed >= this._shakePerlin.duration) this._shakePerlin = null;
+			else {
+				const decay = 1 - this._shakePerlin.elapsed / this._shakePerlin.duration;
+				const t = this._shakePerlin.elapsed * 4.7 + this._shakePerlinSeed * 17.3;
+				this._shakePerlin.offsetX = fbmNoise2d(t, 0) * this._shakePerlin.intensity * decay;
+				this._shakePerlin.offsetY = fbmNoise2d(0, t + 5.4) * this._shakePerlin.intensity * decay;
+			}
+		}
+	}
+	/** Get the effective camera X (including shake + shakePerlin offsets). */
+	get effectiveX() {
+		return this.x + (this._shake?.offsetX ?? 0) + (this._shakePerlin?.offsetX ?? 0);
+	}
+	/** Get the effective camera Y (including shake + shakePerlin offsets). */
+	get effectiveY() {
+		return this.y + (this._shake?.offsetY ?? 0) + (this._shakePerlin?.offsetY ?? 0);
+	}
+	/** Convert world coordinates to screen coordinates. */
+	worldToScreen(worldX, worldY) {
+		return this.worldToScreenInto(worldX, worldY, {
+			x: 0,
+			y: 0
+		});
+	}
+	/** Zero-alloc variant — writes screen coordinates into `out`. */
+	worldToScreenInto(worldX, worldY, out) {
+		const cos = Math.cos(-this.rotation);
+		const sin = Math.sin(-this.rotation);
+		const dx = (worldX - this.effectiveX) * this.zoom;
+		const dy = (worldY - this.effectiveY) * this.zoom;
+		out.x = cos * dx - sin * dy + this.viewportWidth / 2;
+		out.y = sin * dx + cos * dy + this.viewportHeight / 2;
+		return out;
+	}
+	/** Convert screen coordinates to world coordinates. */
+	screenToWorld(screenX, screenY) {
+		return this.screenToWorldInto(screenX, screenY, {
+			x: 0,
+			y: 0
+		});
+	}
+	/** Zero-alloc variant — writes world coordinates into `out`. */
+	screenToWorldInto(screenX, screenY, out) {
+		const cx = screenX - this.viewportWidth / 2;
+		const cy = screenY - this.viewportHeight / 2;
+		const cos = Math.cos(this.rotation);
+		const sin = Math.sin(this.rotation);
+		const rx = cos * cx - sin * cy;
+		const ry = sin * cx + cos * cy;
+		out.x = rx / this.zoom + this.effectiveX;
+		out.y = ry / this.zoom + this.effectiveY;
+		return out;
+	}
+	/** Get the visible world-space bounding rect (allocates a fresh Rect). */
+	getBounds() {
+		return this.getBoundsInto({
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		});
+	}
+	/** Zero-alloc variant — writes the visible bounds into `out`. */
+	getBoundsInto(out) {
+		const halfW = this.viewportWidth / (2 * this.zoom);
+		const halfH = this.viewportHeight / (2 * this.zoom);
+		out.x = this.effectiveX - halfW;
+		out.y = this.effectiveY - halfH;
+		out.width = halfW * 2;
+		out.height = halfH * 2;
+		return out;
+	}
+	_clampToBounds() {
+		const b = this.bounds;
+		const halfW = this.viewportWidth / (2 * this.zoom);
+		const halfH = this.viewportHeight / (2 * this.zoom);
+		const minX = b.x + halfW;
+		const maxX = b.x + b.width - halfW;
+		const minY = b.y + halfH;
+		const maxY = b.y + b.height - halfH;
+		if (minX <= maxX) this.x = Math.max(minX, Math.min(maxX, this.x));
+		else this.x = b.x + b.width / 2;
+		if (minY <= maxY) this.y = Math.max(minY, Math.min(maxY, this.y));
+		else this.y = b.y + b.height / 2;
+	}
 };
-
-// src/sprite-batch.ts
-var SpriteBatch = class {
-  _commands = [];
-  _pool = [];
-  _batches = [];
-  /** Number of queued draw commands. */
-  get count() {
-    return this._commands.length;
-  }
-  /** Queue a sprite draw from a frame.
-   *
-   *  `anchorX` / `anchorY` define the pivot point of the sprite as a
-   *  fraction of its destination size — `(0, 0)` = top-left (default),
-   *  `(0.5, 0.5)` = center, `(1, 1)` = bottom-right. `dstX` / `dstY`
-   *  then refer to the anchor point instead of the top-left corner.
-   *
-   *  `alpha` is a per-instance opacity multiplier in [0, 1]. Default 1. */
-  draw(image, frame, dstX, dstY, dstW, dstH, effect, anchorX = 0, anchorY = 0, alpha = 1, rotation = 0, stretch = false) {
-    const cmd = this._acquire();
-    const w = dstW ?? frame.w;
-    const h = dstH ?? frame.h;
-    cmd.image = image;
-    cmd.srcX = frame.x;
-    cmd.srcY = frame.y;
-    cmd.srcW = frame.w;
-    cmd.srcH = frame.h;
-    cmd.dstX = dstX - anchorX * w;
-    cmd.dstY = dstY - anchorY * h;
-    cmd.dstW = w;
-    cmd.dstH = h;
-    cmd.effect = effect;
-    cmd.alpha = alpha;
-    cmd.rotation = rotation;
-    cmd.anchorX = anchorX;
-    cmd.anchorY = anchorY;
-    cmd.stretch = stretch;
-    this._commands.push(cmd);
-  }
-  /** Queue a raw sprite draw with explicit src/dst rects. `dstX` / `dstY`
-   *  refer to the anchor point — offset by `anchorX * dstW` / `anchorY * dstH`.
-   *
-   *  `alpha` is a per-instance opacity multiplier in [0, 1]. Default 1. */
-  drawRaw(image, srcX, srcY, srcW, srcH, dstX, dstY, dstW, dstH, effect, anchorX = 0, anchorY = 0, alpha = 1, rotation = 0, stretch = false) {
-    const cmd = this._acquire();
-    cmd.image = image;
-    cmd.srcX = srcX;
-    cmd.srcY = srcY;
-    cmd.srcW = srcW;
-    cmd.srcH = srcH;
-    cmd.dstX = dstX - anchorX * dstW;
-    cmd.dstY = dstY - anchorY * dstH;
-    cmd.dstW = dstW;
-    cmd.dstH = dstH;
-    cmd.effect = effect;
-    cmd.alpha = alpha;
-    cmd.rotation = rotation;
-    cmd.anchorX = anchorX;
-    cmd.anchorY = anchorY;
-    cmd.stretch = stretch;
-    this._commands.push(cmd);
-  }
-  /**
-   * Flush all queued commands, grouped by (texture, effect, alpha) identity.
-   *
-   * @param drawAtlas Callback invoked once per batch. Receives
-   *   `(image, commands)` — all commands in a batch share the same texture,
-   *   the same effect (readable from `commands[0].effect`), and the same
-   *   alpha (readable from `commands[0].alpha`).
-   * @param renderer Optional renderer to record stats.
-   */
-  flush(drawAtlas, renderer) {
-    if (this._commands.length === 0) return;
-    const batches = this._batches;
-    for (const cmd of this._commands) {
-      let batch;
-      for (let i = 0; i < batches.length; i++) {
-        const b = batches[i];
-        if (b.image === cmd.image && b.effect === cmd.effect && b.alpha === cmd.alpha) {
-          batch = b;
-          break;
-        }
-      }
-      if (!batch) {
-        batch = { image: cmd.image, effect: cmd.effect, alpha: cmd.alpha, commands: [] };
-        batches.push(batch);
-      }
-      batch.commands.push(cmd);
-    }
-    for (let i = 0; i < batches.length; i++) {
-      const batch = batches[i];
-      drawAtlas(batch.image, batch.commands);
-      if (renderer) {
-        renderer.recordDrawCall();
-        renderer.recordBatch();
-      }
-    }
-    for (const cmd of this._commands) {
-      this._pool.push(cmd);
-    }
-    this._commands.length = 0;
-    for (let i = 0; i < batches.length; i++) {
-      batches[i].commands.length = 0;
-    }
-    batches.length = 0;
-  }
-  /** Clear all queued commands without drawing. */
-  clear() {
-    for (const cmd of this._commands) {
-      this._pool.push(cmd);
-    }
-    this._commands.length = 0;
-  }
-  _acquire() {
-    if (this._pool.length > 0) {
-      return this._pool.pop();
-    }
-    return {
-      image: null,
-      srcX: 0,
-      srcY: 0,
-      srcW: 0,
-      srcH: 0,
-      dstX: 0,
-      dstY: 0,
-      dstW: 0,
-      dstH: 0,
-      effect: void 0,
-      alpha: 1,
-      rotation: 0,
-      anchorX: 0,
-      anchorY: 0,
-      stretch: false
-    };
-  }
-};
-
-// src/sprite-effects.ts
-function tint(color, amount) {
-  return { type: "tint", color, amount };
-}
-function flash(color, durationSec) {
-  return { type: "flash", color, duration: durationSec, elapsed: 0 };
-}
-function grayscale(amount) {
-  return { type: "grayscale", amount };
-}
-function outline(color, width) {
-  return { type: "outline", color, width };
-}
-function custom(shader, uniforms) {
-  return { type: "custom", shader, uniforms };
-}
-function water(color, foamColor, waveSpeed, waveAmplitude) {
-  return { type: "water", color, foamColor, waveSpeed, waveAmplitude };
-}
-function fog(color, density = 0.5, speed = 0.3, scale = 2) {
-  return { type: "fog", color, density, speed, scale };
-}
-function fire(opts) {
-  return {
-    type: "fire",
-    color: opts.color,
-    tipColor: opts.tipColor,
-    speed: opts.speed ?? 1,
-    intensity: opts.intensity ?? 0.8
-  };
-}
-function dropShadow(opts) {
-  return {
-    type: "drop-shadow",
-    color: opts.color,
-    offsetX: opts.offsetX ?? 0,
-    offsetY: opts.offsetY ?? 6,
-    blur: opts.blur ?? 4
-  };
-}
-function roofsCity(opts) {
-  return {
-    type: "roofs-city",
-    skyColor: opts.skyColor,
-    roofColor: opts.roofColor,
-    scrollOffsetY: opts.scrollOffsetY ?? 0,
-    density: opts.density ?? 6,
-    resolutionW: opts.resolutionW ?? 0,
-    resolutionH: opts.resolutionH ?? 0
-  };
-}
-function forestCanopy(opts) {
-  return {
-    type: "forest-canopy",
-    skyColor: opts.skyColor,
-    leafColor: opts.leafColor,
-    scrollOffsetY: opts.scrollOffsetY ?? 0,
-    density: opts.density ?? 5,
-    resolutionW: opts.resolutionW ?? 0,
-    resolutionH: opts.resolutionH ?? 0
-  };
-}
-function riverWave(opts) {
-  return {
-    type: "river-wave",
-    waterColor: opts.waterColor,
-    foamColor: opts.foamColor,
-    scrollOffsetY: opts.scrollOffsetY ?? 0,
-    waveScale: opts.waveScale ?? 2,
-    resolutionW: opts.resolutionW ?? 0,
-    resolutionH: opts.resolutionH ?? 0
-  };
-}
-function moonCrater(opts) {
-  return {
-    type: "moon-crater",
-    moonColor: opts.moonColor,
-    craterColor: opts.craterColor,
-    scrollOffsetY: opts.scrollOffsetY ?? 0,
-    craterCount: opts.craterCount ?? 4,
-    resolutionW: opts.resolutionW ?? 0,
-    resolutionH: opts.resolutionH ?? 0
-  };
-}
-function caveInterior(opts) {
-  return {
-    type: "cave-interior",
-    caveColor: opts.caveColor,
-    glowColor: opts.glowColor,
-    scrollOffsetY: opts.scrollOffsetY ?? 0,
-    stalactiteCount: opts.stalactiteCount ?? 8,
-    resolutionW: opts.resolutionW ?? 0,
-    resolutionH: opts.resolutionH ?? 0
-  };
-}
-function mountainHills(opts) {
-  return {
-    type: "mountain-hills",
-    skyColor: opts.skyColor,
-    hillColor: opts.hillColor,
-    scrollOffsetY: opts.scrollOffsetY ?? 0,
-    ridgeScale: opts.ridgeScale ?? 1.5,
-    resolutionW: opts.resolutionW ?? 0,
-    resolutionH: opts.resolutionH ?? 0
-  };
-}
-function updateEffect(effect, dt) {
-  if (effect.type === "flash") {
-    const elapsed = effect.elapsed + dt;
-    if (elapsed >= effect.duration) return null;
-    return { type: "flash", color: effect.color, duration: effect.duration, elapsed };
-  }
-  return effect;
+//#endregion
+//#region src/draw-order.ts
+/**
+* Sort an array of drawables by z-index (ascending = back to front).
+* Uses insertion sort which is fast for nearly-sorted arrays
+* (typical in game rendering where order rarely changes).
+*
+* Mutates the input array in place. Returns the same array.
+*
+* @param items The array to sort in place.
+* @param length Optional upper bound — when provided, only sorts `items[0..length)`.
+*               Use this when passing a pooled array that may hold stale tail entries.
+*/
+function sortByDrawOrder(items, length) {
+	const n = length ?? items.length;
+	for (let i = 1; i < n; i++) {
+		const item = items[i];
+		let j = i - 1;
+		while (j >= 0 && items[j].z > item.z) {
+			items[j + 1] = items[j];
+			j--;
+		}
+		items[j + 1] = item;
+	}
+	return items;
 }
-function flashIntensity(effect) {
-  if (effect.duration <= 0) return 0;
-  const t = effect.elapsed / effect.duration;
-  return Math.max(0, 1 - t);
+/**
+* Compare function for use with Array.sort when insertion sort isn't desired.
+* Stable relative order for equal z values (returns 0).
+*/
+function drawOrderCompare(a, b) {
+	return a.z - b.z;
 }
-
-// src/shaders.ts
-var FIRE_SKSL = (
-  /* sksl */
-  `
-uniform shader src;
+//#endregion
+//#region src/shaders.ts
+const FIRE_SKSL = `
 uniform float2 resolution;
 uniform float3 color;
 uniform float3 tipColor;
@@ -652,21 +344,15 @@ float fbm(float2 p) {
 }
 
 half4 main(float2 coord) {
-  half4 srcColor = src.eval(coord);
   float2 uv = coord / max(resolution, float2(1.0));
   float2 np = float2(uv.x * 4.0, uv.y * 6.0 - time * speed * 2.0);
   float n = fbm(np);
   float flameMask = smoothstep(0.0, intensity, n * (1.0 - uv.y));
   float3 fireRgb = mix(color, tipColor, uv.y);
-  half4 fireColor = half4(fireRgb.r, fireRgb.g, fireRgb.b, flameMask);
-  return half4(fireColor.rgb, fireColor.a * srcColor.a);
+  return half4(fireRgb.r, fireRgb.g, fireRgb.b, flameMask);
 }
-`
-);
-var FOG_SKSL = (
-  /* sksl */
-  `
-uniform shader src;
+`;
+const FOG_SKSL = `
 uniform float2 resolution;
 uniform float3 color;
 uniform float density;
@@ -704,16 +390,10 @@ half4 main(float2 coord) {
   float2 uv = coord / max(resolution, float2(1.0));
   float2 drift = float2(time * speed, 0.3 * time * speed);
   float n = clamp(fbm(uv * scale + drift), 0.0, 1.0);
-  half4 srcColor = src.eval(coord);
-  half3 blended = mix(srcColor.rgb, half3(color.r, color.g, color.b), half(density * n));
-  return half4(blended, srcColor.a);
+  return half4(color.r, color.g, color.b, clamp(density * n, 0.0, 1.0));
 }
-`
-);
-var WATER_SKSL = (
-  /* sksl */
-  `
-uniform shader src;
+`;
+const WATER_SKSL = `
 uniform float2 resolution;
 uniform float3 color;
 uniform float3 foamColor;
@@ -722,25 +402,16 @@ uniform float waveAmplitude;
 uniform float time;
 
 half4 main(float2 coord) {
-  float2 uv = coord / resolution;
-  float wave1 = sin(uv.x * 6.2832 * 3.0 + time * waveSpeed * 2.0) * waveAmplitude;
-  float wave2 = sin(uv.x * 6.2832 * 5.0 - time * waveSpeed * 1.3 + 1.5) * waveAmplitude * 0.5;
-  float totalWave = wave1 + wave2;
-  float2 displaced = float2(uv.x, uv.y + totalWave);
-  displaced = clamp(displaced, float2(0.0), float2(1.0));
-  half4 c = src.eval(displaced * resolution);
+  float2 uv = coord / max(resolution, float2(1.0));
   float waveDeriv = cos(uv.x * 6.2832 * 3.0 + time * waveSpeed * 2.0) * waveAmplitude * 2.0
                   + cos(uv.x * 6.2832 * 5.0 - time * waveSpeed * 1.3 + 1.5) * waveAmplitude;
   float foam = smoothstep(waveAmplitude * 0.6, waveAmplitude * 1.5, waveDeriv);
-  half3 tinted = mix(c.rgb, half3(color.r, color.g, color.b), half(0.35));
+  half3 tinted = half3(color.r, color.g, color.b);
   half3 final = mix(tinted, half3(foamColor.r, foamColor.g, foamColor.b), half(foam));
-  return half4(final, c.a);
+  return half4(final, 1.0);
 }
-`
-);
-var ROOFS_CITY_SKSL = (
-  /* sksl */
-  `
+`;
+const ROOFS_CITY_SKSL = `
 uniform float2 resolution;
 uniform float3 skyColor;
 uniform float3 roofColor;
@@ -767,11 +438,8 @@ half4 main(float2 coord) {
                   half(buildings));
   return half4(col, 1.0);
 }
-`
-);
-var FOREST_CANOPY_SKSL = (
-  /* sksl */
-  `
+`;
+const FOREST_CANOPY_SKSL = `
 uniform float2 resolution;
 uniform float3 skyColor;
 uniform float3 leafColor;
@@ -799,11 +467,8 @@ half4 main(float2 coord) {
                   half(canopy));
   return half4(col, 1.0);
 }
-`
-);
-var RIVER_WAVE_SKSL = (
-  /* sksl */
-  `
+`;
+const RIVER_WAVE_SKSL = `
 uniform float2 resolution;
 uniform float3 waterColor;
 uniform float3 foamColor;
@@ -826,11 +491,8 @@ half4 main(float2 coord) {
   half3 col = mix(base, half3(foamColor.r, foamColor.g, foamColor.b), half(crest * 0.6));
   return half4(col, 1.0);
 }
-`
-);
-var MOON_CRATER_SKSL = (
-  /* sksl */
-  `
+`;
+const MOON_CRATER_SKSL = `
 uniform float2 resolution;
 uniform float3 moonColor;
 uniform float3 craterColor;
@@ -862,11 +524,8 @@ half4 main(float2 coord) {
                   half(c));
   return half4(col, 1.0);
 }
-`
-);
-var CAVE_INTERIOR_SKSL = (
-  /* sksl */
-  `
+`;
+const CAVE_INTERIOR_SKSL = `
 uniform float2 resolution;
 uniform float3 caveColor;
 uniform float3 glowColor;
@@ -896,11 +555,8 @@ half4 main(float2 coord) {
   col = mix(col, half3(caveColor.r, caveColor.g, caveColor.b) * half(0.3), half(stalac));
   return half4(col, 1.0);
 }
-`
-);
-var MOUNTAIN_HILLS_SKSL = (
-  /* sksl */
-  `
+`;
+const MOUNTAIN_HILLS_SKSL = `
 uniform float2 resolution;
 uniform float3 skyColor;
 uniform float3 hillColor;
@@ -934,757 +590,1195 @@ half4 main(float2 coord) {
                   half(mountains));
   return half4(col, 1.0);
 }
-`
-);
-
-// src/frame-renderer.ts
-var BLEND_SRC_OVER = 3;
-var BLEND_SRC_IN = 5;
-var OUTLINE_OFFSETS = [
-  [1, 0],
-  [-1, 0],
-  [0, 1],
-  [0, -1],
-  [Math.SQRT1_2, Math.SQRT1_2],
-  [Math.SQRT1_2, -Math.SQRT1_2],
-  [-Math.SQRT1_2, Math.SQRT1_2],
-  [-Math.SQRT1_2, -Math.SQRT1_2]
+`;
+//#endregion
+//#region src/sprite-effects.ts
+/** Create a tint effect. */
+function tint(color, amount) {
+	return {
+		type: "tint",
+		color,
+		amount
+	};
+}
+/** Create a flash effect. */
+function flash(color, durationSec) {
+	return {
+		type: "flash",
+		color,
+		duration: durationSec,
+		elapsed: 0
+	};
+}
+/** Create a grayscale effect. */
+function grayscale(amount) {
+	return {
+		type: "grayscale",
+		amount
+	};
+}
+/** Create an outline effect. */
+function outline(color, width) {
+	return {
+		type: "outline",
+		color,
+		width
+	};
+}
+/** Create a custom shader effect. `shader` must be pre-compiled; compiling
+*  SkSL per frame is expensive. `uniforms` may be mutated externally between
+*  frames to animate parameters. */
+function custom(shader, uniforms) {
+	return {
+		type: "custom",
+		shader,
+		uniforms
+	};
+}
+/** Create a water surface effect. Time is passed to the renderer each frame
+*  via `beginFrame(w, h, time)` — the effect itself is time-invariant. */
+function water(color, foamColor, waveSpeed, waveAmplitude) {
+	return {
+		type: "water",
+		color,
+		foamColor,
+		waveSpeed,
+		waveAmplitude
+	};
+}
+/** Create a fog / volumetric haze effect. Time is passed to the renderer each
+*  frame via `beginFrame(w, h, time)` — the effect itself is time-invariant. */
+function fog(color, density = .5, speed = .3, scale = 2) {
+	return {
+		type: "fog",
+		color,
+		density,
+		speed,
+		scale
+	};
+}
+/** Create a fire / flame effect. Time is passed to the renderer each
+*  frame via `beginFrame(w, h, time)` — the effect itself is time-invariant. */
+function fire(opts) {
+	return {
+		type: "fire",
+		color: opts.color,
+		tipColor: opts.tipColor,
+		speed: opts.speed ?? 1,
+		intensity: opts.intensity ?? .8
+	};
+}
+/** Create a drop-shadow effect. Defaults to a soft shadow offset downward for
+*  grounding; `color.a` is the shadow opacity. */
+function dropShadow(opts) {
+	return {
+		type: "drop-shadow",
+		color: opts.color,
+		offsetX: opts.offsetX ?? 0,
+		offsetY: opts.offsetY ?? 6,
+		blur: opts.blur ?? 4
+	};
+}
+/** Create a rooftop city skyline effect. */
+function roofsCity(opts) {
+	return {
+		type: "roofs-city",
+		skyColor: opts.skyColor,
+		roofColor: opts.roofColor,
+		scrollOffsetY: opts.scrollOffsetY ?? 0,
+		density: opts.density ?? 6,
+		resolutionW: opts.resolutionW ?? 0,
+		resolutionH: opts.resolutionH ?? 0
+	};
+}
+/** Create a forest canopy effect. */
+function forestCanopy(opts) {
+	return {
+		type: "forest-canopy",
+		skyColor: opts.skyColor,
+		leafColor: opts.leafColor,
+		scrollOffsetY: opts.scrollOffsetY ?? 0,
+		density: opts.density ?? 5,
+		resolutionW: opts.resolutionW ?? 0,
+		resolutionH: opts.resolutionH ?? 0
+	};
+}
+/** Create a river wave surface effect. */
+function riverWave(opts) {
+	return {
+		type: "river-wave",
+		waterColor: opts.waterColor,
+		foamColor: opts.foamColor,
+		scrollOffsetY: opts.scrollOffsetY ?? 0,
+		waveScale: opts.waveScale ?? 2,
+		resolutionW: opts.resolutionW ?? 0,
+		resolutionH: opts.resolutionH ?? 0
+	};
+}
+/** Create a moon crater surface effect. */
+function moonCrater(opts) {
+	return {
+		type: "moon-crater",
+		moonColor: opts.moonColor,
+		craterColor: opts.craterColor,
+		scrollOffsetY: opts.scrollOffsetY ?? 0,
+		craterCount: opts.craterCount ?? 4,
+		resolutionW: opts.resolutionW ?? 0,
+		resolutionH: opts.resolutionH ?? 0
+	};
+}
+/** Create a cave interior effect. */
+function caveInterior(opts) {
+	return {
+		type: "cave-interior",
+		caveColor: opts.caveColor,
+		glowColor: opts.glowColor,
+		scrollOffsetY: opts.scrollOffsetY ?? 0,
+		stalactiteCount: opts.stalactiteCount ?? 8,
+		resolutionW: opts.resolutionW ?? 0,
+		resolutionH: opts.resolutionH ?? 0
+	};
+}
+/** Create a mountain / hill ridge effect. */
+function mountainHills(opts) {
+	return {
+		type: "mountain-hills",
+		skyColor: opts.skyColor,
+		hillColor: opts.hillColor,
+		scrollOffsetY: opts.scrollOffsetY ?? 0,
+		ridgeScale: opts.ridgeScale ?? 1.5,
+		resolutionW: opts.resolutionW ?? 0,
+		resolutionH: opts.resolutionH ?? 0
+	};
+}
+/**
+* Advance a time-based effect by `dt` seconds.
+*
+* Returns a new effect object if state changed (e.g. flash elapsed time
+* advances), the same reference if the effect is time-invariant (tint,
+* grayscale, outline, custom), or `null` if the effect has expired.
+*
+* Effects are immutable — callers must replace their reference with the
+* returned value. Sharing an effect instance across entities is safe.
+*/
+function updateEffect(effect, dt) {
+	if (effect.type === "flash") {
+		const elapsed = effect.elapsed + dt;
+		if (elapsed >= effect.duration) return null;
+		return {
+			type: "flash",
+			color: effect.color,
+			duration: effect.duration,
+			elapsed
+		};
+	}
+	return effect;
+}
+/**
+* Get the current intensity of a flash effect (1 at start, 0 at end).
+*/
+function flashIntensity(effect) {
+	if (effect.duration <= 0) return 0;
+	const t = effect.elapsed / effect.duration;
+	return Math.max(0, 1 - t);
+}
+//#endregion
+//#region src/frame-renderer.ts
+/** See the dev-flag note at the top of this file. */
+const G = globalThis;
+const BLEND_SRC_OVER = 3;
+const BLEND_SRC_IN = 5;
+const OUTLINE_OFFSETS = [
+	[1, 0],
+	[-1, 0],
+	[0, 1],
+	[0, -1],
+	[Math.SQRT1_2, Math.SQRT1_2],
+	[Math.SQRT1_2, -Math.SQRT1_2],
+	[-Math.SQRT1_2, Math.SQRT1_2],
+	[-Math.SQRT1_2, -Math.SQRT1_2]
 ];
+let _xformUnrotatedCount = 0;
+let _xformRotatedCount = 0;
+/**
+* Create a `FrameRenderer` backed by the given structural Skia module.
+*
+* Both `@flare-engine/react` (passing the real RN-Skia module) and
+* `@flare-engine/render-web` (passing a CanvasKit shim) use this factory.
+*/
 function createFrameRenderer(Skia) {
-  const defaultPaint = Skia.Paint();
-  let tintPaint = null;
-  let flashPaint = null;
-  let grayscalePaint = null;
-  let outlinePaint = null;
-  let customPaint = null;
-  let waterPaint = null;
-  let waterRuntimeEffect = null;
-  let fogPaint = null;
-  let fogRuntimeEffect = null;
-  let firePaint = null;
-  let fireRuntimeEffect = null;
-  let dropShadowPaint = null;
-  let roofsCityPaint = null;
-  let roofsCityEffect = null;
-  let forestCanopyPaint = null;
-  let forestCanopyEffect = null;
-  let riverWavePaint = null;
-  let riverWaveEffect = null;
-  let moonCraterPaint = null;
-  let moonCraterEffect = null;
-  let caveInteriorPaint = null;
-  let caveInteriorEffect = null;
-  let mountainHillsPaint = null;
-  let mountainHillsEffect = null;
-  const roofsCityUniforms = new Array(10).fill(0);
-  const forestCanopyUniforms = new Array(10).fill(0);
-  const riverWaveUniforms = new Array(10).fill(0);
-  const moonCraterUniforms = new Array(10).fill(0);
-  const caveInteriorUniforms = new Array(10).fill(0);
-  const mountainHillsUniforms = new Array(10).fill(0);
-  const recorder = Skia.PictureRecorder();
-  const recordingBounds = Skia.XYWHRect(0, 0, 0, 0);
-  const srcRects = [];
-  const xforms = [];
-  const stretchSrcRects = [];
-  const stretchDstRects = [];
-  let stretchPaint = null;
-  const clearColor = new Float32Array(4);
-  const tintColor = new Float32Array(4);
-  const flashColor = new Float32Array(4);
-  const outlineColor = new Float32Array(4);
-  const dropShadowColor = new Float32Array(4);
-  const grayMatrix = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0];
-  const customUniforms = [];
-  const waterUniforms = new Array(11).fill(0);
-  const fogUniforms = new Array(9).fill(0);
-  const fireUniforms = new Array(11).fill(0);
-  let currentFrameTime = 0;
-  let current = null;
-  let _boundRuntime = null;
-  let _boundChain = null;
-  const _loggedOnce = /* @__PURE__ */ new Set();
-  function logOnce(msg) {
-    if (_loggedOnce.has(msg)) return;
-    _loggedOnce.add(msg);
-    console.warn(`[postfx] ${msg}`);
-  }
-  const canvas = {
-    save: () => current?.save() ?? 0,
-    restore: () => {
-      current?.restore();
-    },
-    translate: (x, y) => {
-      current?.translate(x, y);
-    },
-    scale: (sx, sy) => {
-      current?.scale(sx, sy);
-    },
-    rotate: (radians, cx, cy) => {
-      current?.rotate(radians, cx, cy);
-    },
-    clear: (argb) => {
-      if (current === null) return;
-      clearColor[0] = (argb >>> 16 & 255) / 255;
-      clearColor[1] = (argb >>> 8 & 255) / 255;
-      clearColor[2] = (argb & 255) / 255;
-      clearColor[3] = (argb >>> 24 & 255) / 255;
-      current.clear(clearColor);
-    }
-  };
-  function ensurePoolCapacity(n) {
-    while (srcRects.length < n) {
-      srcRects.push(Skia.XYWHRect(0, 0, 0, 0));
-      xforms.push(Skia.RSXform(1, 0, 0, 0));
-    }
-  }
-  function ensureStretchPoolCapacity(n) {
-    while (stretchSrcRects.length < n) {
-      stretchSrcRects.push(Skia.XYWHRect(0, 0, 0, 0));
-      stretchDstRects.push(Skia.XYWHRect(0, 0, 0, 0));
-    }
-  }
-  function fillSrcRects(commands, n) {
-    for (let i = 0; i < n; i++) {
-      const cmd = commands[i];
-      srcRects[i]?.setXYWH(cmd.srcX, cmd.srcY, cmd.srcW, cmd.srcH);
-    }
-  }
-  function fillXforms(commands, n, dx, dy) {
-    for (let i = 0; i < n; i++) {
-      const cmd = commands[i];
-      const scale = cmd.srcW === 0 ? 1 : cmd.dstW / cmd.srcW;
-      if (cmd.rotation === 0) {
-        xforms[i]?.set(scale, 0, cmd.dstX + dx, cmd.dstY + dy);
-      } else {
-        const c = Math.cos(cmd.rotation);
-        const s = Math.sin(cmd.rotation);
-        const scos = scale * c;
-        const ssin = scale * s;
-        const px = cmd.dstX + cmd.anchorX * cmd.dstW + dx;
-        const py = cmd.dstY + cmd.anchorY * cmd.dstH + dy;
-        const axSrc = cmd.anchorX * cmd.srcW;
-        const aySrc = cmd.anchorY * cmd.srcH;
-        xforms[i]?.set(
-          scos,
-          ssin,
-          px - scos * axSrc + ssin * aySrc,
-          py - ssin * axSrc - scos * aySrc
-        );
-      }
-    }
-  }
-  function applyTint(effect) {
-    if (tintPaint === null) tintPaint = Skia.Paint();
-    writeColor(tintColor, effect.color, effect.amount);
-    tintPaint.setColorFilter(Skia.ColorFilter.MakeBlend(tintColor, BLEND_SRC_OVER));
-    return tintPaint;
-  }
-  function applyFlash(effect) {
-    if (flashPaint === null) flashPaint = Skia.Paint();
-    writeColor(flashColor, effect.color, flashIntensity(effect));
-    flashPaint.setColorFilter(Skia.ColorFilter.MakeBlend(flashColor, BLEND_SRC_OVER));
-    return flashPaint;
-  }
-  function applyGrayscale(effect) {
-    if (grayscalePaint === null) grayscalePaint = Skia.Paint();
-    writeGrayscaleMatrix(grayMatrix, effect.amount);
-    grayscalePaint.setColorFilter(Skia.ColorFilter.MakeMatrix(grayMatrix));
-    return grayscalePaint;
-  }
-  function applyOutlinePaint(effect) {
-    if (outlinePaint === null) outlinePaint = Skia.Paint();
-    writeColor(outlineColor, effect.color, 1);
-    outlinePaint.setColorFilter(Skia.ColorFilter.MakeBlend(outlineColor, BLEND_SRC_IN));
-    return outlinePaint;
-  }
-  function applyCustom(effect) {
-    if (customPaint === null) customPaint = Skia.Paint();
-    const shader = effect.shader;
-    const floatCount = shader.getUniformFloatCount();
-    while (customUniforms.length < floatCount) customUniforms.push(0);
-    customUniforms.length = floatCount;
-    fillCustomUniforms(effect, shader, customUniforms);
-    customPaint.setShader(shader.makeShader(customUniforms));
-    return customPaint;
-  }
-  function applyWater(effect, time) {
-    if (Skia.RuntimeEffect === void 0) return defaultPaint;
-    if (waterRuntimeEffect === null) {
-      const compiled = Skia.RuntimeEffect.Make(WATER_SKSL);
-      if (compiled === null) return defaultPaint;
-      waterRuntimeEffect = compiled;
-    }
-    if (waterPaint === null) waterPaint = Skia.Paint();
-    waterUniforms[0] = 0;
-    waterUniforms[1] = 0;
-    waterUniforms[2] = effect.color.r;
-    waterUniforms[3] = effect.color.g;
-    waterUniforms[4] = effect.color.b;
-    waterUniforms[5] = effect.foamColor.r;
-    waterUniforms[6] = effect.foamColor.g;
-    waterUniforms[7] = effect.foamColor.b;
-    waterUniforms[8] = effect.waveSpeed;
-    waterUniforms[9] = effect.waveAmplitude;
-    waterUniforms[10] = time;
-    waterPaint.setShader(waterRuntimeEffect.makeShader(waterUniforms));
-    return waterPaint;
-  }
-  function applyFog(effect, time) {
-    if (Skia.RuntimeEffect === void 0) return defaultPaint;
-    if (fogRuntimeEffect === null) {
-      const compiled = Skia.RuntimeEffect.Make(FOG_SKSL);
-      if (compiled === null) return defaultPaint;
-      fogRuntimeEffect = compiled;
-    }
-    if (fogPaint === null) fogPaint = Skia.Paint();
-    fogUniforms[0] = 0;
-    fogUniforms[1] = 0;
-    fogUniforms[2] = effect.color.r;
-    fogUniforms[3] = effect.color.g;
-    fogUniforms[4] = effect.color.b;
-    fogUniforms[5] = effect.density;
-    fogUniforms[6] = effect.speed;
-    fogUniforms[7] = effect.scale;
-    fogUniforms[8] = time;
-    fogPaint.setShader(fogRuntimeEffect.makeShader(fogUniforms));
-    return fogPaint;
-  }
-  function applyFire(effect, time) {
-    if (Skia.RuntimeEffect === void 0) return defaultPaint;
-    if (fireRuntimeEffect === null) {
-      const compiled = Skia.RuntimeEffect.Make(FIRE_SKSL);
-      if (compiled === null) return defaultPaint;
-      fireRuntimeEffect = compiled;
-    }
-    if (firePaint === null) firePaint = Skia.Paint();
-    fireUniforms[0] = 0;
-    fireUniforms[1] = 0;
-    fireUniforms[2] = effect.color.r;
-    fireUniforms[3] = effect.color.g;
-    fireUniforms[4] = effect.color.b;
-    fireUniforms[5] = effect.tipColor.r;
-    fireUniforms[6] = effect.tipColor.g;
-    fireUniforms[7] = effect.tipColor.b;
-    fireUniforms[8] = effect.speed;
-    fireUniforms[9] = effect.intensity;
-    fireUniforms[10] = time;
-    firePaint.setShader(fireRuntimeEffect.makeShader(fireUniforms));
-    return firePaint;
-  }
-  function applyDropShadow(effect) {
-    if (Skia.ImageFilter === void 0) return defaultPaint;
-    if (dropShadowPaint === null) dropShadowPaint = Skia.Paint();
-    writeColor(dropShadowColor, effect.color, 1);
-    dropShadowPaint.setImageFilter(
-      Skia.ImageFilter.MakeDropShadow(
-        effect.offsetX,
-        effect.offsetY,
-        effect.blur,
-        effect.blur,
-        dropShadowColor,
-        null
-      )
-    );
-    return dropShadowPaint;
-  }
-  function applyRoofsCity(effect) {
-    if (Skia.RuntimeEffect === void 0) return defaultPaint;
-    if (roofsCityEffect === null) {
-      const compiled = Skia.RuntimeEffect.Make(ROOFS_CITY_SKSL);
-      if (compiled === null) return defaultPaint;
-      roofsCityEffect = compiled;
-    }
-    if (roofsCityPaint === null) roofsCityPaint = Skia.Paint();
-    roofsCityUniforms[0] = effect.resolutionW;
-    roofsCityUniforms[1] = effect.resolutionH;
-    roofsCityUniforms[2] = effect.skyColor.r;
-    roofsCityUniforms[3] = effect.skyColor.g;
-    roofsCityUniforms[4] = effect.skyColor.b;
-    roofsCityUniforms[5] = effect.roofColor.r;
-    roofsCityUniforms[6] = effect.roofColor.g;
-    roofsCityUniforms[7] = effect.roofColor.b;
-    roofsCityUniforms[8] = effect.scrollOffsetY;
-    roofsCityUniforms[9] = effect.density;
-    roofsCityPaint.setShader(roofsCityEffect.makeShader(roofsCityUniforms));
-    return roofsCityPaint;
-  }
-  function applyForestCanopy(effect) {
-    if (Skia.RuntimeEffect === void 0) return defaultPaint;
-    if (forestCanopyEffect === null) {
-      const compiled = Skia.RuntimeEffect.Make(FOREST_CANOPY_SKSL);
-      if (compiled === null) return defaultPaint;
-      forestCanopyEffect = compiled;
-    }
-    if (forestCanopyPaint === null) forestCanopyPaint = Skia.Paint();
-    forestCanopyUniforms[0] = effect.resolutionW;
-    forestCanopyUniforms[1] = effect.resolutionH;
-    forestCanopyUniforms[2] = effect.skyColor.r;
-    forestCanopyUniforms[3] = effect.skyColor.g;
-    forestCanopyUniforms[4] = effect.skyColor.b;
-    forestCanopyUniforms[5] = effect.leafColor.r;
-    forestCanopyUniforms[6] = effect.leafColor.g;
-    forestCanopyUniforms[7] = effect.leafColor.b;
-    forestCanopyUniforms[8] = effect.scrollOffsetY;
-    forestCanopyUniforms[9] = effect.density;
-    forestCanopyPaint.setShader(forestCanopyEffect.makeShader(forestCanopyUniforms));
-    return forestCanopyPaint;
-  }
-  function applyRiverWave(effect) {
-    if (Skia.RuntimeEffect === void 0) return defaultPaint;
-    if (riverWaveEffect === null) {
-      const compiled = Skia.RuntimeEffect.Make(RIVER_WAVE_SKSL);
-      if (compiled === null) return defaultPaint;
-      riverWaveEffect = compiled;
-    }
-    if (riverWavePaint === null) riverWavePaint = Skia.Paint();
-    riverWaveUniforms[0] = effect.resolutionW;
-    riverWaveUniforms[1] = effect.resolutionH;
-    riverWaveUniforms[2] = effect.waterColor.r;
-    riverWaveUniforms[3] = effect.waterColor.g;
-    riverWaveUniforms[4] = effect.waterColor.b;
-    riverWaveUniforms[5] = effect.foamColor.r;
-    riverWaveUniforms[6] = effect.foamColor.g;
-    riverWaveUniforms[7] = effect.foamColor.b;
-    riverWaveUniforms[8] = effect.scrollOffsetY;
-    riverWaveUniforms[9] = effect.waveScale;
-    riverWavePaint.setShader(riverWaveEffect.makeShader(riverWaveUniforms));
-    return riverWavePaint;
-  }
-  function applyMoonCrater(effect) {
-    if (Skia.RuntimeEffect === void 0) return defaultPaint;
-    if (moonCraterEffect === null) {
-      const compiled = Skia.RuntimeEffect.Make(MOON_CRATER_SKSL);
-      if (compiled === null) return defaultPaint;
-      moonCraterEffect = compiled;
-    }
-    if (moonCraterPaint === null) moonCraterPaint = Skia.Paint();
-    moonCraterUniforms[0] = effect.resolutionW;
-    moonCraterUniforms[1] = effect.resolutionH;
-    moonCraterUniforms[2] = effect.moonColor.r;
-    moonCraterUniforms[3] = effect.moonColor.g;
-    moonCraterUniforms[4] = effect.moonColor.b;
-    moonCraterUniforms[5] = effect.craterColor.r;
-    moonCraterUniforms[6] = effect.craterColor.g;
-    moonCraterUniforms[7] = effect.craterColor.b;
-    moonCraterUniforms[8] = effect.scrollOffsetY;
-    moonCraterUniforms[9] = effect.craterCount;
-    moonCraterPaint.setShader(moonCraterEffect.makeShader(moonCraterUniforms));
-    return moonCraterPaint;
-  }
-  function applyCaveInterior(effect) {
-    if (Skia.RuntimeEffect === void 0) return defaultPaint;
-    if (caveInteriorEffect === null) {
-      const compiled = Skia.RuntimeEffect.Make(CAVE_INTERIOR_SKSL);
-      if (compiled === null) return defaultPaint;
-      caveInteriorEffect = compiled;
-    }
-    if (caveInteriorPaint === null) caveInteriorPaint = Skia.Paint();
-    caveInteriorUniforms[0] = effect.resolutionW;
-    caveInteriorUniforms[1] = effect.resolutionH;
-    caveInteriorUniforms[2] = effect.caveColor.r;
-    caveInteriorUniforms[3] = effect.caveColor.g;
-    caveInteriorUniforms[4] = effect.caveColor.b;
-    caveInteriorUniforms[5] = effect.glowColor.r;
-    caveInteriorUniforms[6] = effect.glowColor.g;
-    caveInteriorUniforms[7] = effect.glowColor.b;
-    caveInteriorUniforms[8] = effect.scrollOffsetY;
-    caveInteriorUniforms[9] = effect.stalactiteCount;
-    caveInteriorPaint.setShader(caveInteriorEffect.makeShader(caveInteriorUniforms));
-    return caveInteriorPaint;
-  }
-  function applyMountainHills(effect) {
-    if (Skia.RuntimeEffect === void 0) return defaultPaint;
-    if (mountainHillsEffect === null) {
-      const compiled = Skia.RuntimeEffect.Make(MOUNTAIN_HILLS_SKSL);
-      if (compiled === null) return defaultPaint;
-      mountainHillsEffect = compiled;
-    }
-    if (mountainHillsPaint === null) mountainHillsPaint = Skia.Paint();
-    mountainHillsUniforms[0] = effect.resolutionW;
-    mountainHillsUniforms[1] = effect.resolutionH;
-    mountainHillsUniforms[2] = effect.skyColor.r;
-    mountainHillsUniforms[3] = effect.skyColor.g;
-    mountainHillsUniforms[4] = effect.skyColor.b;
-    mountainHillsUniforms[5] = effect.hillColor.r;
-    mountainHillsUniforms[6] = effect.hillColor.g;
-    mountainHillsUniforms[7] = effect.hillColor.b;
-    mountainHillsUniforms[8] = effect.scrollOffsetY;
-    mountainHillsUniforms[9] = effect.ridgeScale;
-    mountainHillsPaint.setShader(mountainHillsEffect.makeShader(mountainHillsUniforms));
-    return mountainHillsPaint;
-  }
-  function drawOutlined(cvs, image, commands, n, effect, alpha) {
-    const paint = applyOutlinePaint(effect);
-    paint.setAlphaf(alpha);
-    const srcs = srcRects.length === n ? srcRects : srcRects.slice(0, n);
-    for (let k = 0; k < OUTLINE_OFFSETS.length; k++) {
-      const offset = OUTLINE_OFFSETS[k];
-      fillXforms(commands, n, offset[0] * effect.width, offset[1] * effect.width);
-      const dsts = xforms.length === n ? xforms : xforms.slice(0, n);
-      cvs.drawAtlas(image, srcs, dsts, paint);
-    }
-    paint.setAlphaf(1);
-    defaultPaint.setAlphaf(alpha);
-    fillXforms(commands, n, 0, 0);
-    const mainDsts = xforms.length === n ? xforms : xforms.slice(0, n);
-    cvs.drawAtlas(image, srcs, mainDsts, defaultPaint);
-    defaultPaint.setAlphaf(1);
-  }
-  function resolveEffectPaint(effect) {
-    switch (effect.type) {
-      case "tint":
-        return applyTint(effect);
-      case "flash":
-        return applyFlash(effect);
-      case "grayscale":
-        return applyGrayscale(effect);
-      case "custom":
-        return applyCustom(effect);
-      case "water":
-        return applyWater(effect, currentFrameTime);
-      case "fog":
-        return applyFog(effect, currentFrameTime);
-      case "fire":
-        return applyFire(effect, currentFrameTime);
-      case "drop-shadow":
-        return applyDropShadow(effect);
-      case "outline":
-        return applyOutlinePaint(effect);
-      case "roofs-city":
-        return applyRoofsCity(effect);
-      case "forest-canopy":
-        return applyForestCanopy(effect);
-      case "river-wave":
-        return applyRiverWave(effect);
-      case "moon-crater":
-        return applyMoonCrater(effect);
-      case "cave-interior":
-        return applyCaveInterior(effect);
-      case "mountain-hills":
-        return applyMountainHills(effect);
-    }
-  }
-  return {
-    canvas,
-    beginFrame(viewportWidth, viewportHeight, time = 0, pixelDensity = 1) {
-      if (viewportWidth === 0 || viewportHeight === 0) return;
-      _boundRuntime = null;
-      _boundChain = null;
-      currentFrameTime = time;
-      const pd = pixelDensity;
-      recordingBounds.setXYWH(0, 0, viewportWidth * pd, viewportHeight * pd);
-      current = recorder.beginRecording(recordingBounds);
-      if (pd !== 1) current.scale(pd, pd);
-    },
-    drawAtlas(image, commands) {
-      if (current === null) return;
-      const n = commands.length;
-      if (n === 0) return;
-      const effect = commands[0]?.effect;
-      const alpha = commands[0]?.alpha ?? 1;
-      if (effect?.type === "roofs-city" || effect?.type === "forest-canopy" || effect?.type === "river-wave" || effect?.type === "moon-crater" || effect?.type === "cave-interior" || effect?.type === "mountain-hills") {
-        const paint2 = resolveEffectPaint(effect);
-        paint2.setAlphaf(alpha);
-        for (let i = 0; i < n; i++) {
-          const cmd = commands[i];
-          const rect = Skia.XYWHRect(cmd.dstX, cmd.dstY, cmd.dstW, cmd.dstH);
-          current.drawRect(rect, paint2);
-        }
-        paint2.setAlphaf(1);
-        return;
-      }
-      if (commands[0]?.stretch) {
-        if (stretchPaint === null) stretchPaint = Skia.Paint();
-        ensureStretchPoolCapacity(n);
-        stretchPaint.setAlphaf(alpha);
-        for (let i = 0; i < n; i++) {
-          const cmd = commands[i];
-          const srcR = stretchSrcRects[i];
-          const dstR = stretchDstRects[i];
-          srcR.setXYWH(cmd.srcX, cmd.srcY, cmd.srcW, cmd.srcH);
-          dstR.setXYWH(cmd.dstX, cmd.dstY, cmd.dstW, cmd.dstH);
-          current.drawImageRect(image, srcR, dstR, stretchPaint);
-        }
-        stretchPaint.setAlphaf(1);
-        return;
-      }
-      ensurePoolCapacity(n);
-      fillSrcRects(commands, n);
-      if (effect?.type === "outline") {
-        drawOutlined(current, image, commands, n, effect, alpha);
-        return;
-      }
-      fillXforms(commands, n, 0, 0);
-      const srcs = srcRects.length === n ? srcRects : srcRects.slice(0, n);
-      const dsts = xforms.length === n ? xforms : xforms.slice(0, n);
-      const paint = effect === void 0 ? defaultPaint : resolveEffectPaint(effect);
-      paint.setAlphaf(alpha);
-      current.drawAtlas(image, srcs, dsts, paint);
-      paint.setAlphaf(1);
-    },
-    setPostFxBinding(runtime, chain) {
-      _boundRuntime = runtime;
-      _boundChain = chain;
-    },
-    buildPostFxPasses(runtime, chain, width, height) {
-      const rt = runtime ?? _boundRuntime;
-      const ch = chain ?? _boundChain;
-      if (rt === null || !rt.supported) return [];
-      if (rt.buildPass === void 0) {
-        logOnce("buildPostFxPasses: runtime.supported but buildPass absent \u2014 no passes");
-        return [];
-      }
-      if (ch === null) return [];
-      const passes = rt.buildPass(ch, width, height);
-      if (passes.length === 0) return [];
-      const out = [];
-      for (const pass of passes) {
-        const shader = pass.shader;
-        const uniformCount = typeof shader.getUniformCount === "function" ? shader.getUniformCount() : 0;
-        const uniforms = {};
-        for (let i = 0; i < uniformCount; i++) {
-          const name = typeof shader.getUniformName === "function" ? shader.getUniformName(i) : String(i);
-          const info = typeof shader.getUniform === "function" ? shader.getUniform(i) : { columns: 1, rows: 1, slot: i };
-          const size = info.columns * info.rows;
-          if (size === 1) {
-            uniforms[name] = pass.uniforms[info.slot] ?? 0;
-          } else {
-            const vec = [];
-            for (let k = 0; k < size; k++) {
-              vec.push(pass.uniforms[info.slot + k] ?? 0);
-            }
-            uniforms[name] = vec;
-          }
-        }
-        out.push({
-          id: pass.id,
-          source: shader,
-          uniforms,
-          children: pass.children
-        });
-      }
-      return out;
-    },
-    endFrame() {
-      if (current === null) return null;
-      current = null;
-      return recorder.finishRecordingAsPicture();
-    }
-  };
+	const defaultPaint = Skia.Paint();
+	let tintPaint = null;
+	let flashPaint = null;
+	let grayscalePaint = null;
+	let outlinePaint = null;
+	let customPaint = null;
+	let waterPaint = null;
+	let waterRuntimeEffect = null;
+	let fogPaint = null;
+	let fogRuntimeEffect = null;
+	let firePaint = null;
+	let fireRuntimeEffect = null;
+	let dropShadowPaint = null;
+	let roofsCityPaint = null;
+	let roofsCityEffect = null;
+	let forestCanopyPaint = null;
+	let forestCanopyEffect = null;
+	let riverWavePaint = null;
+	let riverWaveEffect = null;
+	let moonCraterPaint = null;
+	let moonCraterEffect = null;
+	let caveInteriorPaint = null;
+	let caveInteriorEffect = null;
+	let mountainHillsPaint = null;
+	let mountainHillsEffect = null;
+	const roofsCityUniforms = new Array(10).fill(0);
+	const forestCanopyUniforms = new Array(10).fill(0);
+	const riverWaveUniforms = new Array(10).fill(0);
+	const moonCraterUniforms = new Array(10).fill(0);
+	const caveInteriorUniforms = new Array(10).fill(0);
+	const mountainHillsUniforms = new Array(10).fill(0);
+	const recorder = Skia.PictureRecorder();
+	const recordingBounds = Skia.XYWHRect(0, 0, 0, 0);
+	const srcRects = [];
+	const xforms = [];
+	const stretchSrcRects = [];
+	const stretchDstRects = [];
+	let stretchPaint = null;
+	const zoneBgRects = [];
+	let _cachedSrcSlice = null;
+	let _cachedSrcSliceLen = 0;
+	let _cachedXformSlice = null;
+	let _cachedXformSliceLen = 0;
+	const clearColor = /* @__PURE__ */ new Float32Array(4);
+	const tintColor = /* @__PURE__ */ new Float32Array(4);
+	const flashColor = /* @__PURE__ */ new Float32Array(4);
+	const outlineColor = /* @__PURE__ */ new Float32Array(4);
+	const dropShadowColor = /* @__PURE__ */ new Float32Array(4);
+	const grayMatrix = [
+		1,
+		0,
+		0,
+		0,
+		0,
+		0,
+		1,
+		0,
+		0,
+		0,
+		0,
+		0,
+		1,
+		0,
+		0,
+		0,
+		0,
+		0,
+		1,
+		0
+	];
+	const customUniforms = [];
+	const waterUniforms = new Array(11).fill(0);
+	const fogUniforms = new Array(9).fill(0);
+	const fireUniforms = new Array(11).fill(0);
+	let currentFrameTime = 0;
+	let currentSpriteW = 0;
+	let currentSpriteH = 0;
+	let current = null;
+	let _boundRuntime = null;
+	let _boundChain = null;
+	const _loggedOnce = /* @__PURE__ */ new Set();
+	function logOnce(msg) {
+		if (_loggedOnce.has(msg)) return;
+		_loggedOnce.add(msg);
+		console.warn(`[postfx] ${msg}`);
+	}
+	const canvas = {
+		save: () => current?.save() ?? 0,
+		restore: () => {
+			current?.restore();
+		},
+		translate: (x, y) => {
+			current?.translate(x, y);
+		},
+		scale: (sx, sy) => {
+			current?.scale(sx, sy);
+		},
+		rotate: (degrees, cx, cy) => {
+			current?.rotate(degrees, cx, cy);
+		},
+		clear: (argb) => {
+			if (current === null) return;
+			clearColor[0] = (argb >>> 16 & 255) / 255;
+			clearColor[1] = (argb >>> 8 & 255) / 255;
+			clearColor[2] = (argb & 255) / 255;
+			clearColor[3] = (argb >>> 24 & 255) / 255;
+			current.clear(clearColor);
+		}
+	};
+	function ensurePoolCapacity(n) {
+		while (srcRects.length < n) {
+			srcRects.push(Skia.XYWHRect(0, 0, 0, 0));
+			xforms.push(Skia.RSXform(1, 0, 0, 0));
+		}
+	}
+	function ensureStretchPoolCapacity(n) {
+		while (stretchSrcRects.length < n) {
+			stretchSrcRects.push(Skia.XYWHRect(0, 0, 0, 0));
+			stretchDstRects.push(Skia.XYWHRect(0, 0, 0, 0));
+		}
+	}
+	function ensureZoneBgPoolCapacity(n) {
+		while (zoneBgRects.length < n) zoneBgRects.push(Skia.XYWHRect(0, 0, 0, 0));
+	}
+	function getCachedSrcSlice(n) {
+		if (_cachedSrcSlice !== null && _cachedSrcSliceLen === n) return _cachedSrcSlice;
+		_cachedSrcSlice = srcRects.length === n ? srcRects : srcRects.slice(0, n);
+		_cachedSrcSliceLen = n;
+		return _cachedSrcSlice;
+	}
+	function getCachedXformSlice(n) {
+		if (_cachedXformSlice !== null && _cachedXformSliceLen === n) return _cachedXformSlice;
+		_cachedXformSlice = xforms.length === n ? xforms : xforms.slice(0, n);
+		_cachedXformSliceLen = n;
+		return _cachedXformSlice;
+	}
+	function fillSrcRects(commands, n) {
+		for (let i = 0; i < n; i++) {
+			const cmd = commands[i];
+			srcRects[i]?.setXYWH(cmd.srcX, cmd.srcY, cmd.srcW, cmd.srcH);
+		}
+	}
+	function fillXforms(commands, n, dx, dy) {
+		for (let i = 0; i < n; i++) {
+			const cmd = commands[i];
+			const scale = cmd.srcW === 0 ? 1 : cmd.dstW / cmd.srcW;
+			if (cmd.rotation === 0) {
+				xforms[i]?.set(scale, 0, cmd.dstX + dx, cmd.dstY + dy);
+				if (G.__DEV__) _xformUnrotatedCount++;
+			} else {
+				const c = Math.cos(cmd.rotation);
+				const s = Math.sin(cmd.rotation);
+				const scos = scale * c;
+				const ssin = scale * s;
+				const px = cmd.dstX + cmd.anchorX * cmd.dstW + dx;
+				const py = cmd.dstY + cmd.anchorY * cmd.dstH + dy;
+				const axSrc = cmd.anchorX * cmd.srcW;
+				const aySrc = cmd.anchorY * cmd.srcH;
+				xforms[i]?.set(scos, ssin, px - scos * axSrc + ssin * aySrc, py - ssin * axSrc - scos * aySrc);
+				if (G.__DEV__) _xformRotatedCount++;
+			}
+		}
+	}
+	function applyTint(effect) {
+		if (tintPaint === null) tintPaint = Skia.Paint();
+		writeColor(tintColor, effect.color, effect.amount);
+		tintPaint.setColorFilter(Skia.ColorFilter.MakeBlend(tintColor, BLEND_SRC_OVER));
+		return tintPaint;
+	}
+	function applyFlash(effect) {
+		if (flashPaint === null) flashPaint = Skia.Paint();
+		writeColor(flashColor, effect.color, flashIntensity(effect));
+		flashPaint.setColorFilter(Skia.ColorFilter.MakeBlend(flashColor, BLEND_SRC_OVER));
+		return flashPaint;
+	}
+	function applyGrayscale(effect) {
+		if (grayscalePaint === null) grayscalePaint = Skia.Paint();
+		writeGrayscaleMatrix(grayMatrix, effect.amount);
+		grayscalePaint.setColorFilter(Skia.ColorFilter.MakeMatrix(grayMatrix));
+		return grayscalePaint;
+	}
+	function applyOutlinePaint(effect) {
+		if (outlinePaint === null) outlinePaint = Skia.Paint();
+		writeColor(outlineColor, effect.color, 1);
+		outlinePaint.setColorFilter(Skia.ColorFilter.MakeBlend(outlineColor, BLEND_SRC_IN));
+		return outlinePaint;
+	}
+	function applyCustom(effect) {
+		if (customPaint === null) customPaint = Skia.Paint();
+		const shader = effect.shader;
+		const floatCount = shader.getUniformFloatCount();
+		while (customUniforms.length < floatCount) customUniforms.push(0);
+		customUniforms.length = floatCount;
+		fillCustomUniforms(effect, shader, customUniforms);
+		customPaint.setShader(shader.makeShader(customUniforms));
+		return customPaint;
+	}
+	function applyWater(effect, time) {
+		if (Skia.RuntimeEffect === void 0) return defaultPaint;
+		if (waterRuntimeEffect === null) {
+			const compiled = Skia.RuntimeEffect.Make(WATER_SKSL);
+			if (compiled === null) return defaultPaint;
+			waterRuntimeEffect = compiled;
+		}
+		if (waterPaint === null) waterPaint = Skia.Paint();
+		waterUniforms[0] = currentSpriteW;
+		waterUniforms[1] = currentSpriteH;
+		waterUniforms[2] = effect.color.r;
+		waterUniforms[3] = effect.color.g;
+		waterUniforms[4] = effect.color.b;
+		waterUniforms[5] = effect.foamColor.r;
+		waterUniforms[6] = effect.foamColor.g;
+		waterUniforms[7] = effect.foamColor.b;
+		waterUniforms[8] = effect.waveSpeed;
+		waterUniforms[9] = effect.waveAmplitude;
+		waterUniforms[10] = time;
+		waterPaint.setShader(waterRuntimeEffect.makeShader(waterUniforms));
+		return waterPaint;
+	}
+	function applyFog(effect, time) {
+		if (Skia.RuntimeEffect === void 0) return defaultPaint;
+		if (fogRuntimeEffect === null) {
+			const compiled = Skia.RuntimeEffect.Make(FOG_SKSL);
+			if (compiled === null) return defaultPaint;
+			fogRuntimeEffect = compiled;
+		}
+		if (fogPaint === null) fogPaint = Skia.Paint();
+		fogUniforms[0] = currentSpriteW;
+		fogUniforms[1] = currentSpriteH;
+		fogUniforms[2] = effect.color.r;
+		fogUniforms[3] = effect.color.g;
+		fogUniforms[4] = effect.color.b;
+		fogUniforms[5] = effect.density;
+		fogUniforms[6] = effect.speed;
+		fogUniforms[7] = effect.scale;
+		fogUniforms[8] = time;
+		fogPaint.setShader(fogRuntimeEffect.makeShader(fogUniforms));
+		return fogPaint;
+	}
+	function applyFire(effect, time) {
+		if (Skia.RuntimeEffect === void 0) return defaultPaint;
+		if (fireRuntimeEffect === null) {
+			const compiled = Skia.RuntimeEffect.Make(FIRE_SKSL);
+			if (compiled === null) return defaultPaint;
+			fireRuntimeEffect = compiled;
+		}
+		if (firePaint === null) firePaint = Skia.Paint();
+		fireUniforms[0] = currentSpriteW;
+		fireUniforms[1] = currentSpriteH;
+		fireUniforms[2] = effect.color.r;
+		fireUniforms[3] = effect.color.g;
+		fireUniforms[4] = effect.color.b;
+		fireUniforms[5] = effect.tipColor.r;
+		fireUniforms[6] = effect.tipColor.g;
+		fireUniforms[7] = effect.tipColor.b;
+		fireUniforms[8] = effect.speed;
+		fireUniforms[9] = effect.intensity;
+		fireUniforms[10] = time;
+		firePaint.setShader(fireRuntimeEffect.makeShader(fireUniforms));
+		return firePaint;
+	}
+	function applyDropShadow(effect) {
+		if (Skia.ImageFilter === void 0) return defaultPaint;
+		if (dropShadowPaint === null) dropShadowPaint = Skia.Paint();
+		writeColor(dropShadowColor, effect.color, 1);
+		dropShadowPaint.setImageFilter(Skia.ImageFilter.MakeDropShadow(effect.offsetX, effect.offsetY, effect.blur, effect.blur, dropShadowColor, null));
+		return dropShadowPaint;
+	}
+	function applyRoofsCity(effect) {
+		if (Skia.RuntimeEffect === void 0) return defaultPaint;
+		if (roofsCityEffect === null) {
+			const compiled = Skia.RuntimeEffect.Make(ROOFS_CITY_SKSL);
+			if (compiled === null) return defaultPaint;
+			roofsCityEffect = compiled;
+		}
+		if (roofsCityPaint === null) roofsCityPaint = Skia.Paint();
+		roofsCityUniforms[0] = effect.resolutionW;
+		roofsCityUniforms[1] = effect.resolutionH;
+		roofsCityUniforms[2] = effect.skyColor.r;
+		roofsCityUniforms[3] = effect.skyColor.g;
+		roofsCityUniforms[4] = effect.skyColor.b;
+		roofsCityUniforms[5] = effect.roofColor.r;
+		roofsCityUniforms[6] = effect.roofColor.g;
+		roofsCityUniforms[7] = effect.roofColor.b;
+		roofsCityUniforms[8] = effect.scrollOffsetY;
+		roofsCityUniforms[9] = effect.density;
+		roofsCityPaint.setShader(roofsCityEffect.makeShader(roofsCityUniforms));
+		return roofsCityPaint;
+	}
+	function applyForestCanopy(effect) {
+		if (Skia.RuntimeEffect === void 0) return defaultPaint;
+		if (forestCanopyEffect === null) {
+			const compiled = Skia.RuntimeEffect.Make(FOREST_CANOPY_SKSL);
+			if (compiled === null) return defaultPaint;
+			forestCanopyEffect = compiled;
+		}
+		if (forestCanopyPaint === null) forestCanopyPaint = Skia.Paint();
+		forestCanopyUniforms[0] = effect.resolutionW;
+		forestCanopyUniforms[1] = effect.resolutionH;
+		forestCanopyUniforms[2] = effect.skyColor.r;
+		forestCanopyUniforms[3] = effect.skyColor.g;
+		forestCanopyUniforms[4] = effect.skyColor.b;
+		forestCanopyUniforms[5] = effect.leafColor.r;
+		forestCanopyUniforms[6] = effect.leafColor.g;
+		forestCanopyUniforms[7] = effect.leafColor.b;
+		forestCanopyUniforms[8] = effect.scrollOffsetY;
+		forestCanopyUniforms[9] = effect.density;
+		forestCanopyPaint.setShader(forestCanopyEffect.makeShader(forestCanopyUniforms));
+		return forestCanopyPaint;
+	}
+	function applyRiverWave(effect) {
+		if (Skia.RuntimeEffect === void 0) return defaultPaint;
+		if (riverWaveEffect === null) {
+			const compiled = Skia.RuntimeEffect.Make(RIVER_WAVE_SKSL);
+			if (compiled === null) return defaultPaint;
+			riverWaveEffect = compiled;
+		}
+		if (riverWavePaint === null) riverWavePaint = Skia.Paint();
+		riverWaveUniforms[0] = effect.resolutionW;
+		riverWaveUniforms[1] = effect.resolutionH;
+		riverWaveUniforms[2] = effect.waterColor.r;
+		riverWaveUniforms[3] = effect.waterColor.g;
+		riverWaveUniforms[4] = effect.waterColor.b;
+		riverWaveUniforms[5] = effect.foamColor.r;
+		riverWaveUniforms[6] = effect.foamColor.g;
+		riverWaveUniforms[7] = effect.foamColor.b;
+		riverWaveUniforms[8] = effect.scrollOffsetY;
+		riverWaveUniforms[9] = effect.waveScale;
+		riverWavePaint.setShader(riverWaveEffect.makeShader(riverWaveUniforms));
+		return riverWavePaint;
+	}
+	function applyMoonCrater(effect) {
+		if (Skia.RuntimeEffect === void 0) return defaultPaint;
+		if (moonCraterEffect === null) {
+			const compiled = Skia.RuntimeEffect.Make(MOON_CRATER_SKSL);
+			if (compiled === null) return defaultPaint;
+			moonCraterEffect = compiled;
+		}
+		if (moonCraterPaint === null) moonCraterPaint = Skia.Paint();
+		moonCraterUniforms[0] = effect.resolutionW;
+		moonCraterUniforms[1] = effect.resolutionH;
+		moonCraterUniforms[2] = effect.moonColor.r;
+		moonCraterUniforms[3] = effect.moonColor.g;
+		moonCraterUniforms[4] = effect.moonColor.b;
+		moonCraterUniforms[5] = effect.craterColor.r;
+		moonCraterUniforms[6] = effect.craterColor.g;
+		moonCraterUniforms[7] = effect.craterColor.b;
+		moonCraterUniforms[8] = effect.scrollOffsetY;
+		moonCraterUniforms[9] = effect.craterCount;
+		moonCraterPaint.setShader(moonCraterEffect.makeShader(moonCraterUniforms));
+		return moonCraterPaint;
+	}
+	function applyCaveInterior(effect) {
+		if (Skia.RuntimeEffect === void 0) return defaultPaint;
+		if (caveInteriorEffect === null) {
+			const compiled = Skia.RuntimeEffect.Make(CAVE_INTERIOR_SKSL);
+			if (compiled === null) return defaultPaint;
+			caveInteriorEffect = compiled;
+		}
+		if (caveInteriorPaint === null) caveInteriorPaint = Skia.Paint();
+		caveInteriorUniforms[0] = effect.resolutionW;
+		caveInteriorUniforms[1] = effect.resolutionH;
+		caveInteriorUniforms[2] = effect.caveColor.r;
+		caveInteriorUniforms[3] = effect.caveColor.g;
+		caveInteriorUniforms[4] = effect.caveColor.b;
+		caveInteriorUniforms[5] = effect.glowColor.r;
+		caveInteriorUniforms[6] = effect.glowColor.g;
+		caveInteriorUniforms[7] = effect.glowColor.b;
+		caveInteriorUniforms[8] = effect.scrollOffsetY;
+		caveInteriorUniforms[9] = effect.stalactiteCount;
+		caveInteriorPaint.setShader(caveInteriorEffect.makeShader(caveInteriorUniforms));
+		return caveInteriorPaint;
+	}
+	function applyMountainHills(effect) {
+		if (Skia.RuntimeEffect === void 0) return defaultPaint;
+		if (mountainHillsEffect === null) {
+			const compiled = Skia.RuntimeEffect.Make(MOUNTAIN_HILLS_SKSL);
+			if (compiled === null) return defaultPaint;
+			mountainHillsEffect = compiled;
+		}
+		if (mountainHillsPaint === null) mountainHillsPaint = Skia.Paint();
+		mountainHillsUniforms[0] = effect.resolutionW;
+		mountainHillsUniforms[1] = effect.resolutionH;
+		mountainHillsUniforms[2] = effect.skyColor.r;
+		mountainHillsUniforms[3] = effect.skyColor.g;
+		mountainHillsUniforms[4] = effect.skyColor.b;
+		mountainHillsUniforms[5] = effect.hillColor.r;
+		mountainHillsUniforms[6] = effect.hillColor.g;
+		mountainHillsUniforms[7] = effect.hillColor.b;
+		mountainHillsUniforms[8] = effect.scrollOffsetY;
+		mountainHillsUniforms[9] = effect.ridgeScale;
+		mountainHillsPaint.setShader(mountainHillsEffect.makeShader(mountainHillsUniforms));
+		return mountainHillsPaint;
+	}
+	function drawOutlined(cvs, image, commands, n, effect, alpha) {
+		const paint = applyOutlinePaint(effect);
+		paint.setAlphaf(alpha);
+		const srcs = getCachedSrcSlice(n);
+		for (let k = 0; k < OUTLINE_OFFSETS.length; k++) {
+			const offset = OUTLINE_OFFSETS[k];
+			fillXforms(commands, n, offset[0] * effect.width, offset[1] * effect.width);
+			const dsts = getCachedXformSlice(n);
+			cvs.drawAtlas(image, srcs, dsts, paint);
+		}
+		paint.setAlphaf(1);
+		defaultPaint.setAlphaf(alpha);
+		fillXforms(commands, n, 0, 0);
+		const mainDsts = getCachedXformSlice(n);
+		cvs.drawAtlas(image, srcs, mainDsts, defaultPaint);
+		defaultPaint.setAlphaf(1);
+	}
+	function resolveEffectPaint(effect) {
+		switch (effect.type) {
+			case "tint": return applyTint(effect);
+			case "flash": return applyFlash(effect);
+			case "grayscale": return applyGrayscale(effect);
+			case "custom": return applyCustom(effect);
+			case "water": return applyWater(effect, currentFrameTime);
+			case "fog": return applyFog(effect, currentFrameTime);
+			case "fire": return applyFire(effect, currentFrameTime);
+			case "drop-shadow": return applyDropShadow(effect);
+			case "outline": return applyOutlinePaint(effect);
+			case "roofs-city": return applyRoofsCity(effect);
+			case "forest-canopy": return applyForestCanopy(effect);
+			case "river-wave": return applyRiverWave(effect);
+			case "moon-crater": return applyMoonCrater(effect);
+			case "cave-interior": return applyCaveInterior(effect);
+			case "mountain-hills": return applyMountainHills(effect);
+		}
+	}
+	return {
+		canvas,
+		beginFrame(viewportWidth, viewportHeight, time = 0, pixelDensity = 1) {
+			if (viewportWidth === 0 || viewportHeight === 0) return;
+			_boundRuntime = null;
+			_boundChain = null;
+			currentFrameTime = time;
+			const pd = pixelDensity;
+			recordingBounds.setXYWH(0, 0, viewportWidth * pd, viewportHeight * pd);
+			current = recorder.beginRecording(recordingBounds);
+			if (pd !== 1) current.scale(pd, pd);
+		},
+		drawAtlas(image, commands) {
+			if (current === null) return;
+			const n = commands.length;
+			if (n === 0) return;
+			const effect = commands[0]?.effect;
+			const alpha = commands[0]?.alpha ?? 1;
+			currentSpriteW = commands[0]?.dstW ?? 0;
+			currentSpriteH = commands[0]?.dstH ?? 0;
+			if (effect?.type === "roofs-city" || effect?.type === "forest-canopy" || effect?.type === "river-wave" || effect?.type === "moon-crater" || effect?.type === "cave-interior" || effect?.type === "mountain-hills") {
+				const paint = resolveEffectPaint(effect);
+				paint.setAlphaf(alpha);
+				ensureZoneBgPoolCapacity(n);
+				for (let i = 0; i < n; i++) {
+					const cmd = commands[i];
+					zoneBgRects[i].setXYWH(cmd.dstX, cmd.dstY, cmd.dstW, cmd.dstH);
+					current.drawRect(zoneBgRects[i], paint);
+				}
+				paint.setAlphaf(1);
+				return;
+			}
+			if (commands[0]?.stretch) {
+				ensureStretchPoolCapacity(n);
+				if (stretchPaint === null) stretchPaint = Skia.Paint();
+				const sp = stretchPaint;
+				const sPaint = effect === void 0 || effect.type === "outline" ? sp : resolveEffectPaint(effect);
+				sPaint.setAlphaf(alpha);
+				for (let i = 0; i < n; i++) {
+					const cmd = commands[i];
+					const srcR = stretchSrcRects[i];
+					const dstR = stretchDstRects[i];
+					srcR.setXYWH(cmd.srcX, cmd.srcY, cmd.srcW, cmd.srcH);
+					dstR.setXYWH(cmd.dstX, cmd.dstY, cmd.dstW, cmd.dstH);
+					current.drawImageRect(image, srcR, dstR, sPaint);
+				}
+				sPaint.setAlphaf(1);
+				return;
+			}
+			ensurePoolCapacity(n);
+			fillSrcRects(commands, n);
+			if (effect?.type === "outline") {
+				drawOutlined(current, image, commands, n, effect, alpha);
+				return;
+			}
+			fillXforms(commands, n, 0, 0);
+			const srcs = getCachedSrcSlice(n);
+			const dsts = getCachedXformSlice(n);
+			const paint = effect === void 0 ? defaultPaint : resolveEffectPaint(effect);
+			paint.setAlphaf(alpha);
+			current.drawAtlas(image, srcs, dsts, paint);
+			paint.setAlphaf(1);
+		},
+		setPostFxBinding(runtime, chain) {
+			_boundRuntime = runtime;
+			_boundChain = chain;
+		},
+		hasPostFxBinding() {
+			return _boundRuntime !== null && !!_boundRuntime.supported && _boundRuntime.buildPass !== void 0 && _boundChain !== null;
+		},
+		buildPostFxPasses(runtime, chain, width, height) {
+			const rt = runtime ?? _boundRuntime;
+			const ch = chain ?? _boundChain;
+			if (rt === null || !rt.supported) return [];
+			if (rt.buildPass === void 0) {
+				logOnce("buildPostFxPasses: runtime.supported but buildPass absent — no passes");
+				return [];
+			}
+			if (ch === null) return [];
+			const passes = rt.buildPass(ch, width, height);
+			if (passes.length === 0) return [];
+			const out = [];
+			for (const pass of passes) {
+				const shader = pass.shader;
+				const uniformCount = typeof shader.getUniformCount === "function" ? shader.getUniformCount() : 0;
+				const uniforms = {};
+				for (let i = 0; i < uniformCount; i++) {
+					const name = typeof shader.getUniformName === "function" ? shader.getUniformName(i) : String(i);
+					const info = typeof shader.getUniform === "function" ? shader.getUniform(i) : {
+						columns: 1,
+						rows: 1,
+						slot: i
+					};
+					const size = info.columns * info.rows;
+					if (size === 1) uniforms[name] = pass.uniforms[info.slot] ?? 0;
+					else {
+						const vec = [];
+						for (let k = 0; k < size; k++) vec.push(pass.uniforms[info.slot + k] ?? 0);
+						uniforms[name] = vec;
+					}
+				}
+				out.push({
+					id: pass.id,
+					source: shader,
+					uniforms,
+					children: pass.children
+				});
+			}
+			return out;
+		},
+		endFrame() {
+			if (current === null) return null;
+			current = null;
+			return recorder.finishRecordingAsPicture();
+		}
+	};
+}
+/** Zero both branch counters unconditionally (no __DEV__ guard). */
+function resetXformCounters() {
+	_xformUnrotatedCount = 0;
+	_xformRotatedCount = 0;
+}
+/**
+* Cumulative `fillXforms` branch hit counts since the last reset. Both stay 0
+* when `__DEV__` is falsy or absent.
+*
+* These count transform WRITES, not sprites: a run drawn with an outline effect
+* passes through `fillXforms` 9 times (8 offset passes + 1 main pass), so it
+* contributes 9 hits per command — the transform work the renderer actually
+* performs. The counters are process-global: every `createFrameRenderer`
+* instance increments the same pair, so readings sum across live renderers.
+*
+* Allocates one object per call — never call it from the render loop.
+*/
+function getXformCounters() {
+	return {
+		rotated: _xformRotatedCount,
+		unrotated: _xformUnrotatedCount
+	};
 }
 function writeColor(out, color, alphaMul) {
-  out[0] = color.r;
-  out[1] = color.g;
-  out[2] = color.b;
-  out[3] = color.a * alphaMul;
+	out[0] = color.r;
+	out[1] = color.g;
+	out[2] = color.b;
+	out[3] = color.a * alphaMul;
 }
 function writeGrayscaleMatrix(out, amount) {
-  const inv = 1 - amount;
-  const lr = 0.299 * amount;
-  const lg = 0.587 * amount;
-  const lb = 0.114 * amount;
-  out[0] = inv + lr;
-  out[1] = lg;
-  out[2] = lb;
-  out[3] = 0;
-  out[4] = 0;
-  out[5] = lr;
-  out[6] = inv + lg;
-  out[7] = lb;
-  out[8] = 0;
-  out[9] = 0;
-  out[10] = lr;
-  out[11] = lg;
-  out[12] = inv + lb;
-  out[13] = 0;
-  out[14] = 0;
-  out[15] = 0;
-  out[16] = 0;
-  out[17] = 0;
-  out[18] = 1;
-  out[19] = 0;
+	const inv = 1 - amount;
+	const lr = .299 * amount;
+	const lg = .587 * amount;
+	const lb = .114 * amount;
+	out[0] = inv + lr;
+	out[1] = lg;
+	out[2] = lb;
+	out[3] = 0;
+	out[4] = 0;
+	out[5] = lr;
+	out[6] = inv + lg;
+	out[7] = lb;
+	out[8] = 0;
+	out[9] = 0;
+	out[10] = lr;
+	out[11] = lg;
+	out[12] = inv + lb;
+	out[13] = 0;
+	out[14] = 0;
+	out[15] = 0;
+	out[16] = 0;
+	out[17] = 0;
+	out[18] = 1;
+	out[19] = 0;
 }
 function fillCustomUniforms(effect, shader, out) {
-  const count = shader.getUniformCount();
-  for (let i = 0; i < out.length; i++) out[i] = 0;
-  for (let i = 0; i < count; i++) {
-    const info = shader.getUniform(i);
-    const name = shader.getUniformName(i);
-    const value = effect.uniforms[name];
-    const size = info.columns * info.rows;
-    if (value === void 0) continue;
-    if (typeof value === "number") {
-      out[info.slot] = value;
-      continue;
-    }
-    for (let k = 0; k < size; k++) {
-      out[info.slot + k] = value[k] ?? 0;
-    }
-  }
+	const count = shader.getUniformCount();
+	for (let i = 0; i < out.length; i++) out[i] = 0;
+	for (let i = 0; i < count; i++) {
+		const info = shader.getUniform(i);
+		const name = shader.getUniformName(i);
+		const value = effect.uniforms[name];
+		const size = info.columns * info.rows;
+		if (value === void 0) continue;
+		if (typeof value === "number") {
+			out[info.slot] = value;
+			continue;
+		}
+		for (let k = 0; k < size; k++) out[info.slot + k] = value[k] ?? 0;
+	}
 }
-
-// src/sprite-font.ts
+//#endregion
+//#region src/render-system.ts
+/**
+* Create a render system function.
+*
+* This is not a defineSystem() wrapper because it needs extra parameters
+* (SpriteBatch) beyond what the ECS system interface provides. Instead,
+* it returns a function to call in your game loop.
+*
+* The returned function only **queues** sprite draws into `batch` — it
+* does not call `batch.flush()`. Flushing is owned by the frame owner
+* (e.g. `<GameView>`) so that all draw sources (ECS, particles, custom)
+* can contribute to a single flush at the render phase.
+*
+* @param world The ECS world.
+* @param query Query that matches entities with Position + Sprite.
+* @param positionDef ComponentDef for Position.
+* @param spriteDef ComponentDef for Sprite.
+* @param batch SpriteBatch instance to queue draws into.
+*/
+function createRenderSystem(world, query, positionDef, spriteDef, batch) {
+	const entries = [];
+	return () => {
+		let i = 0;
+		for (const entityId of query) {
+			const sprite = world.get(entityId, spriteDef);
+			if (!sprite) continue;
+			if (i >= entries.length) entries.push({
+				entityId,
+				z: 0
+			});
+			const entry = entries[i];
+			entry.entityId = entityId;
+			entry.z = sprite.z;
+			i++;
+		}
+		const count = i;
+		if (entries.length > count * 2 && entries.length > 64) entries.length = count;
+		sortByDrawOrder(entries, count);
+		for (let j = 0; j < count; j++) {
+			const entry = entries[j];
+			const pos = world.get(entry.entityId, positionDef);
+			const sprite = world.get(entry.entityId, spriteDef);
+			if (!pos || !sprite) continue;
+			const anchor = sprite.anchor;
+			batch.draw(sprite.image, sprite.frame, pos.x, pos.y, sprite.width, sprite.height, sprite.effect, anchor ? anchor.x : 0, anchor ? anchor.y : 0, sprite.alpha ?? 1, sprite.rotation ?? 0, sprite.stretch ?? false);
+		}
+	};
+}
+/** Canonical Sprite component — queried by the render system alongside `Position`. */
+const Sprite = defineComponent("Sprite", () => ({
+	image: null,
+	frame: {
+		name: "",
+		x: 0,
+		y: 0,
+		w: 0,
+		h: 0
+	},
+	z: 0
+}));
+//#endregion
+//#region src/renderer.ts
+/**
+* Renderer — manages the Skia Canvas lifecycle for a frame.
+* `begin()` to start, draw your content, `end()` to finish.
+*/
+var Renderer = class {
+	/** Current frame stats. */
+	stats = {
+		drawCalls: 0,
+		batchCount: 0
+	};
+	_canvas = null;
+	_inFrame = false;
+	/** Set the canvas to render to. Called once when canvas is available. */
+	setCanvas(canvas) {
+		this._canvas = canvas;
+	}
+	/** Get the current canvas. Throws if not in a frame. */
+	get canvas() {
+		if (!this._canvas) throw new Error("Renderer: no canvas set");
+		return this._canvas;
+	}
+	/** Whether we are currently between begin() and end(). */
+	get inFrame() {
+		return this._inFrame;
+	}
+	/**
+	* Begin a new frame. Clears the canvas and resets stats.
+	* @param clearColor 32-bit ARGB color to clear with (default black = 0xFF000000).
+	*/
+	begin(clearColor = 4278190080) {
+		if (this._inFrame) throw new Error("Renderer: begin() called while already in frame");
+		this._inFrame = true;
+		this.stats.drawCalls = 0;
+		this.stats.batchCount = 0;
+		this.canvas.save();
+		this.canvas.clear(clearColor);
+	}
+	/**
+	* End the current frame. Restores canvas state.
+	*/
+	end() {
+		if (!this._inFrame) throw new Error("Renderer: end() called without begin()");
+		this.canvas.restore();
+		this._inFrame = false;
+	}
+	/**
+	* Apply camera transform to the canvas.
+	* Call after begin() and before drawing.
+	*/
+	applyCamera(cameraX, cameraY, zoom, rotation, viewportWidth, viewportHeight) {
+		const c = this.canvas;
+		c.translate(viewportWidth / 2, viewportHeight / 2);
+		c.scale(zoom, zoom);
+		if (rotation !== 0) c.rotate(-rotation * 180 / Math.PI, 0, 0);
+		c.translate(-cameraX, -cameraY);
+	}
+	/** Increment draw call counter. Invoked in tandem with recordBatch, once per
+	*  flush run in SpriteBatch.flush. */
+	recordDrawCall() {
+		this.stats.drawCalls++;
+	}
+	/** Increment batch counter. Invoked in tandem with recordDrawCall, once per
+	*  flush run in SpriteBatch.flush. */
+	recordBatch() {
+		this.stats.batchCount++;
+	}
+};
+//#endregion
+//#region src/sprite-batch.ts
+/**
+* SpriteBatch — collects sprite draw commands and groups them by texture
+* (and optionally by effect) for efficient batched rendering.
+*
+* Usage:
+* 1. Call `draw()` for each sprite, optionally passing an effect
+* 2. Call `flush()` with an atlas draw callback to execute all batched draws
+* 3. Batching groups consecutive commands by `(image, effect, alpha, stretch)`
+*    identity, preserving global insertion (z-sorted) order. Sharing an effect
+*    reference and the same alpha across consecutive entities maximizes batch
+*    size while keeping sprites in correct draw order.
+*
+* The actual Skia Atlas draw call is delegated to a callback so this module
+* remains testable without Skia.
+*/
+var SpriteBatch = class {
+	_commands = [];
+	_pool = [];
+	_batches = [];
+	_allocCount = 0;
+	/** Number of queued draw commands. */
+	get count() {
+		return this._commands.length;
+	}
+	/** Cumulative number of SpriteDrawCommand objects allocated because the internal
+	*  command pool was empty. Steady state should be 0 after warm-up. */
+	get allocCount() {
+		return this._allocCount;
+	}
+	/** Queue a sprite draw from a frame.
+	*
+	*  `anchorX` / `anchorY` define the pivot point of the sprite as a
+	*  fraction of its destination size — `(0, 0)` = top-left (default),
+	*  `(0.5, 0.5)` = center, `(1, 1)` = bottom-right. `dstX` / `dstY`
+	*  then refer to the anchor point instead of the top-left corner.
+	*
+	*  `alpha` is a per-instance opacity multiplier in [0, 1]. Default 1. */
+	draw(image, frame, dstX, dstY, dstW, dstH, effect, anchorX = 0, anchorY = 0, alpha = 1, rotation = 0, stretch = false) {
+		const cmd = this._acquire();
+		const w = dstW ?? frame.w;
+		const h = dstH ?? frame.h;
+		cmd.image = image;
+		cmd.srcX = frame.x;
+		cmd.srcY = frame.y;
+		cmd.srcW = frame.w;
+		cmd.srcH = frame.h;
+		cmd.dstX = dstX - anchorX * w;
+		cmd.dstY = dstY - anchorY * h;
+		cmd.dstW = w;
+		cmd.dstH = h;
+		cmd.effect = effect;
+		cmd.alpha = alpha;
+		cmd.rotation = rotation;
+		cmd.anchorX = anchorX;
+		cmd.anchorY = anchorY;
+		cmd.stretch = stretch;
+		this._commands.push(cmd);
+	}
+	/** Queue a raw sprite draw with explicit src/dst rects. `dstX` / `dstY`
+	*  refer to the anchor point — offset by `anchorX * dstW` / `anchorY * dstH`.
+	*
+	*  `alpha` is a per-instance opacity multiplier in [0, 1]. Default 1. */
+	drawRaw(image, srcX, srcY, srcW, srcH, dstX, dstY, dstW, dstH, effect, anchorX = 0, anchorY = 0, alpha = 1, rotation = 0, stretch = false) {
+		const cmd = this._acquire();
+		cmd.image = image;
+		cmd.srcX = srcX;
+		cmd.srcY = srcY;
+		cmd.srcW = srcW;
+		cmd.srcH = srcH;
+		cmd.dstX = dstX - anchorX * dstW;
+		cmd.dstY = dstY - anchorY * dstH;
+		cmd.dstW = dstW;
+		cmd.dstH = dstH;
+		cmd.effect = effect;
+		cmd.alpha = alpha;
+		cmd.rotation = rotation;
+		cmd.anchorX = anchorX;
+		cmd.anchorY = anchorY;
+		cmd.stretch = stretch;
+		this._commands.push(cmd);
+	}
+	/**
+	* Flush all queued commands in insertion order, grouping maximal consecutive
+	* runs that share the same `(image, effect, alpha, stretch)` key into a
+	* single `drawAtlas` call. This preserves global z-order (the caller is
+	* responsible for queuing in z-sorted order) while still batching runs of
+	* same-key sprites for efficiency.
+	*
+	* @param drawAtlas Callback invoked once per run. Receives
+	*   `(image, commands)` — all commands in a run share the same key and are
+	*   contiguous in the original insertion order.
+	* @param renderer Optional renderer to record stats.
+	*/
+	flush(drawAtlas, renderer) {
+		if (this._commands.length === 0) return;
+		let run = this._batches[0];
+		if (run === void 0) {
+			run = {
+				image: null,
+				effect: void 0,
+				alpha: 1,
+				stretch: false,
+				commands: []
+			};
+			this._batches[0] = run;
+		}
+		for (const cmd of this._commands) {
+			if (run.commands.length > 0 && (cmd.image !== run.image || cmd.effect !== run.effect || cmd.alpha !== run.alpha || cmd.stretch !== run.stretch)) {
+				drawAtlas(run.image, run.commands);
+				if (renderer) {
+					renderer.recordDrawCall();
+					renderer.recordBatch();
+				}
+				run.commands.length = 0;
+			}
+			run.image = cmd.image;
+			run.effect = cmd.effect;
+			run.alpha = cmd.alpha;
+			run.stretch = cmd.stretch;
+			run.commands.push(cmd);
+		}
+		if (run.commands.length > 0) {
+			drawAtlas(run.image, run.commands);
+			if (renderer) {
+				renderer.recordDrawCall();
+				renderer.recordBatch();
+			}
+			run.commands.length = 0;
+		}
+		for (const cmd of this._commands) this._pool.push(cmd);
+		this._commands.length = 0;
+	}
+	/** Clear all queued commands without drawing. */
+	clear() {
+		for (const cmd of this._commands) this._pool.push(cmd);
+		this._commands.length = 0;
+	}
+	_acquire() {
+		if (this._pool.length > 0) return this._pool.pop();
+		this._allocCount++;
+		return {
+			image: null,
+			srcX: 0,
+			srcY: 0,
+			srcW: 0,
+			srcH: 0,
+			dstX: 0,
+			dstY: 0,
+			dstW: 0,
+			dstH: 0,
+			effect: void 0,
+			alpha: 1,
+			rotation: 0,
+			anchorX: 0,
+			anchorY: 0,
+			stretch: false
+		};
+	}
+};
+//#endregion
+//#region src/sprite-font.ts
+/**
+* Parse BMFont JSON format (common output from tools like Hiero, BMFont, msdf-bmfont).
+*/
 function parseBMFontJSON(json) {
-  const data = json;
-  const glyphs = /* @__PURE__ */ new Map();
-  for (const c of data.chars) {
-    glyphs.set(c.id, {
-      id: c.id,
-      x: c.x,
-      y: c.y,
-      width: c.width,
-      height: c.height,
-      xOffset: c.xoffset,
-      yOffset: c.yoffset,
-      xAdvance: c.xadvance
-    });
-  }
-  const kernings = /* @__PURE__ */ new Map();
-  if (data.kernings) {
-    for (const k of data.kernings) {
-      kernings.set(k.first << 16 | k.second, k.amount);
-    }
-  }
-  return {
-    lineHeight: data.common.lineHeight,
-    base: data.common.base,
-    glyphs,
-    kernings
-  };
+	const data = json;
+	const glyphs = /* @__PURE__ */ new Map();
+	for (const c of data.chars) glyphs.set(c.id, {
+		id: c.id,
+		x: c.x,
+		y: c.y,
+		width: c.width,
+		height: c.height,
+		xOffset: c.xoffset,
+		yOffset: c.yoffset,
+		xAdvance: c.xadvance
+	});
+	const kernings = /* @__PURE__ */ new Map();
+	if (data.kernings) for (const k of data.kernings) kernings.set(k.first << 16 | k.second, k.amount);
+	return {
+		lineHeight: data.common.lineHeight,
+		base: data.common.base,
+		glyphs,
+		kernings
+	};
 }
+/** Get kerning between two characters. */
 function getKerning(font, first, second) {
-  return font.kernings.get(first << 16 | second) ?? 0;
+	return font.kernings.get(first << 16 | second) ?? 0;
 }
+/** Measure the width of a text string in pixels. */
 function measureText(font, text) {
-  let width = 0;
-  let prevCode = -1;
-  for (let i = 0; i < text.length; i++) {
-    const code = text.charCodeAt(i);
-    const glyph = font.glyphs.get(code);
-    if (!glyph) continue;
-    if (prevCode >= 0) {
-      width += getKerning(font, prevCode, code);
-    }
-    width += glyph.xAdvance;
-    prevCode = code;
-  }
-  return width;
+	let width = 0;
+	let prevCode = -1;
+	for (let i = 0; i < text.length; i++) {
+		const code = text.charCodeAt(i);
+		const glyph = font.glyphs.get(code);
+		if (!glyph) continue;
+		if (prevCode >= 0) width += getKerning(font, prevCode, code);
+		width += glyph.xAdvance;
+		prevCode = code;
+	}
+	return width;
 }
+/**
+* Draw text using a SpriteBatch.
+* Characters are batched as individual sprites from the font texture.
+*/
 function drawText(batch, font, image, text, x, y, scale = 1) {
-  let cursorX = x;
-  let prevCode = -1;
-  for (let i = 0; i < text.length; i++) {
-    const code = text.charCodeAt(i);
-    const glyph = font.glyphs.get(code);
-    if (!glyph) continue;
-    if (prevCode >= 0) {
-      cursorX += getKerning(font, prevCode, code) * scale;
-    }
-    batch.drawRaw(
-      image,
-      glyph.x,
-      glyph.y,
-      glyph.width,
-      glyph.height,
-      cursorX + glyph.xOffset * scale,
-      y + glyph.yOffset * scale,
-      glyph.width * scale,
-      glyph.height * scale
-    );
-    cursorX += glyph.xAdvance * scale;
-    prevCode = code;
-  }
+	let cursorX = x;
+	let prevCode = -1;
+	for (let i = 0; i < text.length; i++) {
+		const code = text.charCodeAt(i);
+		const glyph = font.glyphs.get(code);
+		if (!glyph) continue;
+		if (prevCode >= 0) cursorX += getKerning(font, prevCode, code) * scale;
+		batch.drawRaw(image, glyph.x, glyph.y, glyph.width, glyph.height, cursorX + glyph.xOffset * scale, y + glyph.yOffset * scale, glyph.width * scale, glyph.height * scale);
+		cursorX += glyph.xAdvance * scale;
+		prevCode = code;
+	}
 }
+//#endregion
+export { CAVE_INTERIOR_SKSL, Camera2D, FIRE_SKSL, FOG_SKSL, FOREST_CANOPY_SKSL, MOON_CRATER_SKSL, MOUNTAIN_HILLS_SKSL, RIVER_WAVE_SKSL, ROOFS_CITY_SKSL, Renderer, Sprite, SpriteBatch, WATER_SKSL, caveInterior, createFrameRenderer, createRenderSystem, custom, drawOrderCompare, drawText, dropShadow, fire, flash, flashIntensity, fog, forestCanopy, getKerning, getXformCounters, grayscale, measureText, moonCrater, mountainHills, outline, parseBMFontJSON, resetXformCounters, riverWave, roofsCity, sortByDrawOrder, tint, updateEffect, water };
 
-// src/render-system.ts
-import { defineComponent } from "@flare-engine/ecs";
-function createRenderSystem(world, query, positionDef, spriteDef, batch) {
-  const entries = [];
-  return () => {
-    let i = 0;
-    for (const entityId of query) {
-      const sprite = world.get(entityId, spriteDef);
-      if (!sprite) continue;
-      if (i >= entries.length) {
-        entries.push({ entityId, z: 0 });
-      }
-      const entry = entries[i];
-      entry.entityId = entityId;
-      entry.z = sprite.z;
-      i++;
-    }
-    const count = i;
-    if (entries.length > count * 2 && entries.length > 64) {
-      entries.length = count;
-    }
-    sortByDrawOrder(entries, count);
-    for (let j = 0; j < count; j++) {
-      const entry = entries[j];
-      const pos = world.get(entry.entityId, positionDef);
-      const sprite = world.get(entry.entityId, spriteDef);
-      if (!pos || !sprite) continue;
-      const anchor = sprite.anchor;
-      batch.draw(
-        sprite.image,
-        sprite.frame,
-        pos.x,
-        pos.y,
-        sprite.width,
-        sprite.height,
-        sprite.effect,
-        anchor ? anchor.x : 0,
-        anchor ? anchor.y : 0,
-        sprite.alpha ?? 1,
-        sprite.rotation ?? 0,
-        sprite.stretch ?? false
-      );
-    }
-  };
-}
-var Sprite = defineComponent("Sprite", () => ({
-  image: null,
-  frame: { name: "", x: 0, y: 0, w: 0, h: 0 },
-  z: 0
-}));
-export {
-  CAVE_INTERIOR_SKSL,
-  Camera2D,
-  FIRE_SKSL,
-  FOG_SKSL,
-  FOREST_CANOPY_SKSL,
-  MOON_CRATER_SKSL,
-  MOUNTAIN_HILLS_SKSL,
-  RIVER_WAVE_SKSL,
-  ROOFS_CITY_SKSL,
-  Renderer,
-  Sprite,
-  SpriteBatch,
-  WATER_SKSL,
-  caveInterior,
-  createFrameRenderer,
-  createRenderSystem,
-  custom,
-  drawOrderCompare,
-  drawText,
-  dropShadow,
-  fire,
-  flash,
-  flashIntensity,
-  fog,
-  forestCanopy,
-  getKerning,
-  grayscale,
-  measureText,
-  moonCrater,
-  mountainHills,
-  outline,
-  parseBMFontJSON,
-  riverWave,
-  roofsCity,
-  sortByDrawOrder,
-  tint,
-  updateEffect,
-  water
-};
 //# sourceMappingURL=index.mjs.map