@number10/phaserjsx 0.3.1 → 0.4.0

package/dist/index.js

@@ -1,7 +1,1883 @@
-import { p as useRef, q as useEffect, r as useState, t as themeRegistry, s as useTheme, v as getPresetWithMode, w as alpha, x as defaultRadiusTokens, y as defaultSizeTokens, z as defaultSpacingTokens, E as createTextStyleTokens, F as registerBuiltins } from "./TransformOriginView-CzVjS16F.js";
-import { A, a, B, C, b, $, bc, K, V, X, Y, D, c, d, a0, aS, bh, I, f, L, M, N, g, P, R, h, m, i, bd, S, k, l, n, be, aR, aU, aT, T, o, aV, W, b9, bu, a1, bv, j, a3, a4, aG, aM, a5, a6, a7, a8, a9, e, aa, ab, ac, ad, ae, af, ag, ah, ai, aj, br, aJ, ak, al, am, an, bm, bn, bC, aH, ax, bs, bw, bx, bt, ao, by, U, aK, b4, b5, bo, bi, aF, b2, b3, ba, bp, bq, aI, bz, aN, O, O as O2, a_, a$, aD, G, H, J, bj, bk, bA, aP, b8, bB, aE, aA, ay, az, aL, a2, bl, au, av, b0, b1, Z, aW, aX, b6, b7, aO, aQ, bb, as, aq, _, u, ar, aw, aB, aC, at, bf, bg, aY, aZ, Q, ap } from "./TransformOriginView-CzVjS16F.js";
-import { Fragment, jsx, jsxs } from "./jsx-runtime.js";
+import { t as equal, v as viewportRegistry, w as parseSize, x as resolveSize, y as getGestureManager, z as calculateLayout, E as themeRegistry, F as normalizeGap, G as getChildSize, H as DebugLogger, K as useTheme, L as getThemedProps, O as register, Q as useEffect, U as useScene, V as useRef, X as useCallback, Y as mountJSX, Z as useState, _ as getPresetWithMode, $ as alpha, a0 as defaultRadiusTokens, a1 as defaultSizeTokens, a2 as defaultSpacingTokens, a3 as createTextStyleTokens } from "./TransformOriginView-DCvId72M.js";
+import { A, a, B, C, b, ae, bj, a6, aa, ab, D, c, d, af, bc, bo, I, f, J, a7, M, N, g, P, h, R, i, n, j, bk, S, l, m, o, bl, T, p, q, bd, r, s, be, W, bg, bB, ag, bC, k, ai, aj, b1, b7, ak, al, am, an, ao, e, ap, aq, ar, as, at, au, av, aw, ax, ay, by, b4, az, aA, aB, aC, bt, bu, bJ, b2, aV, bz, bD, bE, aL, bA, aD, aK, aN, aI, a8, bF, a9, aP, bv, bp, b0, bh, bw, bx, b3, bG, b8, a$, a4, a5, b6, bq, br, bH, ba, bf, bI, aY, aW, aX, b5, ah, bs, aS, aT, ac, b9, bb, bi, aM, aF, ad, u, aR, aO, aJ, aG, aU, aZ, a_, bm, bn, aH, aQ, aE } from "./TransformOriginView-DCvId72M.js";
+import Phaser$1 from "phaser";
+import { jsx } from "./jsx-runtime.js";
+import { Fragment, jsxs } from "./jsx-runtime.js";
 import { computed } from "@preact/signals-core";
+function shallowEqual(a2, b10) {
+  if (!a2 || !b10) return a2 === b10;
+  if (a2.length !== b10.length) return false;
+  return a2.every((val, i2) => val === b10[i2]);
+}
+function applyGraphicsProps(node, _prev, next) {
+  const prevDeps = node.__drawDependencies;
+  const nextDeps = next.dependencies;
+  const depsChanged = !shallowEqual(prevDeps, nextDeps);
+  if (depsChanged && next.onDraw) {
+    if (next.autoClear !== false) {
+      node.clear();
+    }
+    next.onDraw(node, next);
+    node.__drawDependencies = nextDeps;
+  }
+}
+function applyGraphicsLayout(node, prev, next) {
+  node.__layoutProps = next;
+  if (prev.width !== next.width || prev.height !== next.height || prev.headless !== next.headless) {
+    node.__getLayoutSize = () => {
+      if (next.headless ?? true) {
+        return { width: 0.01, height: 0.01 };
+      }
+      return {
+        width: typeof next.width === "number" ? next.width : 0,
+        height: typeof next.height === "number" ? next.height : 0
+      };
+    };
+  }
+}
+function normalizeVisible$1(visible) {
+  if (visible === void 0) return true;
+  if (typeof visible === "boolean") return visible;
+  if (visible === "visible") return true;
+  if (visible === "invisible" || visible === "none") return false;
+  return true;
+}
+function applyPhaserProps(node, prev, next) {
+  if (prev.alpha !== next.alpha && typeof next.alpha === "number") {
+    node.setAlpha?.(next.alpha);
+  }
+  if (prev.depth !== next.depth && typeof next.depth === "number") {
+    node.setDepth?.(next.depth);
+  }
+  if (prev.visible !== next.visible) {
+    const visibleValue = normalizeVisible$1(next.visible);
+    node.visible = visibleValue;
+  }
+}
+function applyTransformProps(node, prev, next) {
+  if (prev.x !== next.x && typeof next.x === "number") {
+    node.x = next.x;
+  }
+  if (prev.y !== next.y && typeof next.y === "number") {
+    node.y = next.y;
+  }
+  if (prev.rotation !== next.rotation && typeof next.rotation === "number") {
+    node.rotation = next.rotation;
+  }
+  const nextScale = next.scale;
+  const nextScaleX = next.scaleX;
+  const nextScaleY = next.scaleY;
+  const prevScale = prev.scale;
+  const prevScaleX = prev.scaleX;
+  const prevScaleY = prev.scaleY;
+  if (nextScale !== void 0 && nextScale !== prevScale) {
+    node.setScale?.(nextScale, nextScale);
+  } else if (nextScaleX !== prevScaleX || nextScaleY !== prevScaleY) {
+    const currentScaleX = node.scaleX ?? 1;
+    const currentScaleY = node.scaleY ?? 1;
+    const sx = nextScaleX ?? currentScaleX;
+    const sy = nextScaleY ?? currentScaleY;
+    node.setScale?.(sx, sy);
+  }
+}
+function createGraphicsLayout(graphics, props) {
+  if (props.headless === false) {
+    if (typeof props.width !== "number" || typeof props.height !== "number") {
+      throw new Error(
+        "Graphics component requires explicit width and height props when headless=false"
+      );
+    }
+  }
+  graphics.__layoutProps = props;
+  graphics.__getLayoutSize = () => {
+    if (graphics.__layoutProps?.headless ?? true) {
+      return { width: 0.01, height: 0.01 };
+    }
+    return {
+      width: props.width ?? 0,
+      height: props.height ?? 0
+    };
+  };
+  graphics.__drawDependencies = props.dependencies;
+}
+function normalizeVisible(visible) {
+  if (visible === void 0) return true;
+  if (typeof visible === "boolean") return visible;
+  if (visible === "visible") return true;
+  if (visible === "invisible" || visible === "none") return false;
+  return true;
+}
+function createPhaser(node, props) {
+  if (props.visible !== void 0) {
+    node.visible = normalizeVisible(props.visible);
+  }
+  if (props.depth !== void 0) {
+    node.setDepth(props.depth);
+  }
+  if (props.alpha !== void 0) {
+    node.setAlpha(props.alpha);
+  }
+}
+function createTransform(node, props) {
+  if (props.scaleX !== void 0 || props.scaleY !== void 0) {
+    node.setScale(
+      props.scaleX ?? 1,
+      props.scaleY ?? 1
+    );
+  }
+  if (props.rotation !== void 0) {
+    node.setRotation(props.rotation);
+  }
+}
+const graphicsCreator = (scene, props) => {
+  const graphics = scene.add.graphics();
+  graphics.setPosition(props.x ?? 0, props.y ?? 0);
+  createTransform(graphics, props);
+  createPhaser(graphics, props);
+  createGraphicsLayout(graphics, props);
+  if (props.onDraw) {
+    props.onDraw(graphics, props);
+  }
+  return graphics;
+};
+const graphicsPatcher = (node, prev, next) => {
+  applyTransformProps(node, prev, next);
+  applyPhaserProps(node, prev, next);
+  applyGraphicsProps(node, prev, next);
+  applyGraphicsLayout(node, prev, next);
+};
+function calculateFitScale$1(image, targetWidth, targetHeight, fit = "fill") {
+  const textureWidth = image.width;
+  const textureHeight = image.height;
+  if (textureWidth === 0 || textureHeight === 0) {
+    return { scaleX: 1, scaleY: 1 };
+  }
+  if (fit === "fill") {
+    return {
+      scaleX: targetWidth / textureWidth,
+      scaleY: targetHeight / textureHeight
+    };
+  }
+  const targetAspect = targetWidth / targetHeight;
+  const textureAspect = textureWidth / textureHeight;
+  if (fit === "contain") {
+    const scale = targetAspect > textureAspect ? targetHeight / textureHeight : targetWidth / textureWidth;
+    return { scaleX: scale, scaleY: scale };
+  }
+  if (fit === "cover") {
+    const scale = targetAspect < textureAspect ? targetHeight / textureHeight : targetWidth / textureWidth;
+    return { scaleX: scale, scaleY: scale };
+  }
+  return { scaleX: 1, scaleY: 1 };
+}
+function applyImageProps(image, prev, next) {
+  const textureChanged = prev.texture !== next.texture || prev.frame !== next.frame;
+  if (textureChanged && next.texture) {
+    image.setTexture(next.texture, next.frame);
+  }
+  if (prev.tint !== next.tint) {
+    if (typeof next.tint === "number") {
+      image.setTint(next.tint);
+    } else {
+      image.clearTint();
+    }
+  }
+  if (prev.originX !== next.originX || prev.originY !== next.originY) {
+    const originX = next.originX ?? image.originX;
+    const originY = next.originY ?? image.originY;
+    image.setOrigin(originX, originY);
+  }
+  const displayWidthChanged = prev.displayWidth !== next.displayWidth;
+  const displayHeightChanged = prev.displayHeight !== next.displayHeight;
+  const fitChanged = prev.fit !== next.fit;
+  if (displayWidthChanged || displayHeightChanged || fitChanged || textureChanged) {
+    if (typeof next.displayWidth === "number" && typeof next.displayHeight === "number") {
+      const { scaleX, scaleY } = calculateFitScale$1(
+        image,
+        next.displayWidth,
+        next.displayHeight,
+        next.fit
+      );
+      image.setScale(scaleX, scaleY);
+    } else if (typeof next.displayWidth === "number") {
+      const scale = next.displayWidth / image.width;
+      image.setScale(scale);
+    } else if (typeof next.displayHeight === "number") {
+      const scale = next.displayHeight / image.height;
+      image.setScale(scale, scale);
+    }
+  }
+}
+function applyImageLayout(image, prev, next) {
+  image.__layoutProps = next;
+  if (prev.headless !== next.headless) {
+    image.__getLayoutSize = () => {
+      if (image.__layoutProps?.headless) {
+        return { width: 0.01, height: 0.01 };
+      }
+      return {
+        width: image.displayWidth,
+        height: image.displayHeight
+      };
+    };
+  }
+}
+function createImageLayout(image, props) {
+  image.__layoutProps = props;
+  image.__getLayoutSize = () => {
+    if (image.__layoutProps?.headless) {
+      return { width: 0.01, height: 0.01 };
+    }
+    return {
+      width: image.displayWidth,
+      height: image.displayHeight
+    };
+  };
+}
+const imageCreator = (scene, props) => {
+  const image = scene.add.image(props.x ?? 0, props.y ?? 0, props.texture, props.frame);
+  if (props.headless) {
+    image.setOrigin(0.5, 0.5);
+  } else {
+    image.setOrigin(0, 0);
+  }
+  if (props.originX !== void 0 || props.originY !== void 0) {
+    image.setOrigin(props.originX ?? image.originX, props.originY ?? image.originY);
+  }
+  const normalizedProps = { ...props };
+  if (props.headless) {
+    delete normalizedProps.padding;
+    delete normalizedProps.margin;
+    delete normalizedProps.gap;
+  } else {
+    if (normalizedProps.rotation !== void 0) {
+      delete normalizedProps.rotation;
+    }
+  }
+  createTransform(image, normalizedProps);
+  createPhaser(image, normalizedProps);
+  if (props.tint !== void 0) {
+    image.setTint(props.tint);
+  }
+  if (props.displayWidth !== void 0 || props.displayHeight !== void 0) {
+    if (props.displayWidth !== void 0 && props.displayHeight !== void 0) {
+      const fit = props.fit ?? "fill";
+      const textureWidth = image.width;
+      const textureHeight = image.height;
+      if (textureWidth > 0 && textureHeight > 0) {
+        if (fit === "fill") {
+          image.setDisplaySize(props.displayWidth, props.displayHeight);
+        } else if (fit === "contain") {
+          const targetAspect = props.displayWidth / props.displayHeight;
+          const textureAspect = textureWidth / textureHeight;
+          const scale = targetAspect > textureAspect ? props.displayHeight / textureHeight : props.displayWidth / textureWidth;
+          image.setScale(scale);
+        } else if (fit === "cover") {
+          const targetAspect = props.displayWidth / props.displayHeight;
+          const textureAspect = textureWidth / textureHeight;
+          const scale = targetAspect < textureAspect ? props.displayHeight / textureHeight : props.displayWidth / textureWidth;
+          image.setScale(scale);
+        }
+      }
+    } else if (props.displayWidth !== void 0) {
+      const scale = props.displayWidth / image.width;
+      image.setScale(scale);
+    } else if (props.displayHeight !== void 0) {
+      const scale = props.displayHeight / image.height;
+      image.setScale(scale);
+    }
+  }
+  createImageLayout(image, normalizedProps);
+  if (props.onReady) {
+    props.onReady(image);
+  }
+  return image;
+};
+const imagePatcher = (node, prev, next) => {
+  if (prev.headless !== next.headless) {
+    if (next.headless) {
+      node.setOrigin(0.5, 0.5);
+    } else {
+      node.setOrigin(0, 0);
+    }
+  }
+  const normalizedPrev = { ...prev };
+  const normalizedNext = { ...next };
+  if (next.headless) {
+    delete normalizedNext.padding;
+    delete normalizedNext.margin;
+    delete normalizedNext.gap;
+  } else {
+    if (normalizedNext.rotation !== void 0) {
+      delete normalizedNext.rotation;
+    }
+  }
+  if (prev.headless) {
+    delete normalizedPrev.padding;
+    delete normalizedPrev.margin;
+    delete normalizedPrev.gap;
+  } else {
+    if (normalizedPrev.rotation !== void 0) {
+      delete normalizedPrev.rotation;
+    }
+  }
+  applyTransformProps(node, normalizedPrev, normalizedNext);
+  applyPhaserProps(node, normalizedPrev, normalizedNext);
+  applyImageProps(node, normalizedPrev, normalizedNext);
+  applyImageLayout(node, normalizedPrev, normalizedNext);
+};
+function applyNineSliceProps(nineSlice, prev, next) {
+  const textureChanged = prev.texture !== next.texture || prev.frame !== next.frame;
+  if (textureChanged && next.texture) {
+    nineSlice.setTexture(next.texture, next.frame);
+  }
+  const sliceChanged = prev.leftWidth !== next.leftWidth || prev.rightWidth !== next.rightWidth || prev.topHeight !== next.topHeight || prev.bottomHeight !== next.bottomHeight;
+  if (sliceChanged) {
+    const width = typeof next.width === "number" ? next.width : nineSlice.width;
+    const height = typeof next.height === "number" ? next.height : nineSlice.height;
+    nineSlice.setSlices(
+      width,
+      height,
+      next.leftWidth ?? prev.leftWidth ?? 0,
+      next.rightWidth ?? prev.rightWidth ?? 0,
+      next.topHeight ?? prev.topHeight,
+      next.bottomHeight ?? prev.bottomHeight
+    );
+  }
+  const prevWidth = typeof prev.width === "number" ? prev.width : nineSlice.width;
+  const nextWidth = typeof next.width === "number" ? next.width : nineSlice.width;
+  const prevHeight = typeof prev.height === "number" ? prev.height : nineSlice.height;
+  const nextHeight = typeof next.height === "number" ? next.height : nineSlice.height;
+  if (prevWidth !== nextWidth || prevHeight !== nextHeight) {
+    nineSlice.setSize(nextWidth, nextHeight);
+  }
+  if (prev.tint !== next.tint) {
+    if (next.tint !== void 0) {
+      nineSlice.setTint(next.tint);
+    } else {
+      nineSlice.clearTint();
+    }
+  }
+}
+function applyNineSliceLayout(nineSlice, prev, next) {
+  nineSlice.__layoutProps = next;
+  if (prev.width !== next.width || prev.height !== next.height) {
+    nineSlice.__getLayoutSize = () => {
+      return {
+        width: nineSlice.width,
+        height: nineSlice.height
+      };
+    };
+  }
+}
+function createNineSliceLayout(nineSlice, props) {
+  nineSlice.__layoutProps = props;
+  nineSlice.__getLayoutSize = () => {
+    return {
+      width: nineSlice.width,
+      height: nineSlice.height
+    };
+  };
+}
+const nineSliceCreator = (scene, props) => {
+  const initialWidth = typeof props.width === "number" ? props.width : 64;
+  const initialHeight = typeof props.height === "number" ? props.height : 64;
+  const nineSlice = scene.add.nineslice(
+    props.x ?? 0,
+    props.y ?? 0,
+    props.texture,
+    props.frame,
+    initialWidth,
+    initialHeight,
+    props.leftWidth,
+    props.rightWidth,
+    props.topHeight,
+    props.bottomHeight
+  );
+  nineSlice.setOrigin(0, 0);
+  if (props.tint !== void 0) {
+    nineSlice.setTint(props.tint);
+  }
+  createTransform(nineSlice, props);
+  createPhaser(nineSlice, props);
+  createNineSliceLayout(nineSlice, props);
+  return nineSlice;
+};
+const nineSlicePatcher = (node, prev, next) => {
+  applyTransformProps(node, prev, next);
+  applyPhaserProps(node, prev, next);
+  applyNineSliceProps(node, prev, next);
+  applyNineSliceLayout(node, prev, next);
+};
+function resolveNumericSize(value) {
+  return typeof value === "number" ? value : void 0;
+}
+function resolveZoneSize(zone, fallback) {
+  const size = {};
+  const width = zone.width ?? fallback.width;
+  const height = zone.height ?? fallback.height;
+  if (width !== void 0) size.width = width;
+  if (height !== void 0) size.height = height;
+  return size;
+}
+function buildZoneSource(zone, fallbackSize) {
+  const baseX = zone.x ?? 0;
+  const baseY = zone.y ?? 0;
+  const { width, height } = resolveZoneSize(zone, fallbackSize);
+  switch (zone.shape) {
+    case "rect":
+      return new Phaser$1.Geom.Rectangle(baseX, baseY, width ?? 1, height ?? 1);
+    case "circle":
+      return new Phaser$1.Geom.Circle(baseX, baseY, zone.radius ?? 1);
+    case "ellipse":
+      return new Phaser$1.Geom.Ellipse(baseX, baseY, width ?? 1, height ?? 1);
+    case "line":
+      return new Phaser$1.Geom.Line(
+        baseX,
+        baseY,
+        zone.endX ?? baseX + (width ?? 1),
+        zone.endY ?? baseY + (height ?? 1)
+      );
+    default:
+      return void 0;
+  }
+}
+function buildEmitZone(zone, fallbackSize = {}) {
+  const type = zone.type ?? "random";
+  const source = buildZoneSource(zone, fallbackSize);
+  if (!source) return void 0;
+  return { type, source };
+}
+function buildEmitZoneFromLayout(zone, width, height) {
+  const fallback = {};
+  const resolvedWidth = resolveNumericSize(width);
+  const resolvedHeight = resolveNumericSize(height);
+  if (resolvedWidth !== void 0) fallback.width = resolvedWidth;
+  if (resolvedHeight !== void 0) fallback.height = resolvedHeight;
+  return buildEmitZone(zone, fallback);
+}
+function buildDeathZone(zone, fallbackSize = {}) {
+  const type = zone.mode ?? "onEnter";
+  const source = buildZoneSource(zone, fallbackSize);
+  if (!source) return void 0;
+  return { type, source };
+}
+function buildDeathZonesFromLayout(zones, width, height) {
+  if (!zones) return void 0;
+  const list = Array.isArray(zones) ? zones : [zones];
+  const fallback = {};
+  const resolvedWidth = resolveNumericSize(width);
+  const resolvedHeight = resolveNumericSize(height);
+  if (resolvedWidth !== void 0) fallback.width = resolvedWidth;
+  if (resolvedHeight !== void 0) fallback.height = resolvedHeight;
+  const deathZones = list.map((zone) => buildDeathZone(zone, fallback)).filter((zone) => Boolean(zone));
+  return deathZones.length > 0 ? deathZones : void 0;
+}
+const PARTICLE_PRESET_REGISTRY = {
+  explosion: {
+    speed: { min: 120, max: 320 },
+    scale: { start: 1, end: 0 },
+    alpha: { start: 1, end: 0 },
+    lifespan: 600,
+    quantity: 24,
+    blendMode: "ADD"
+  },
+  trail: {
+    speed: { min: 30, max: 80 },
+    scale: { start: 0.6, end: 0 },
+    alpha: { start: 0.8, end: 0 },
+    lifespan: 700,
+    frequency: 40
+  },
+  rain: {
+    speed: { min: 320, max: 520 },
+    angle: { min: 80, max: 100 },
+    scale: { start: 0.5, end: 0.2 },
+    alpha: { start: 0.6, end: 0.1 },
+    lifespan: 1e3,
+    frequency: 20
+  },
+  snow: {
+    speed: { min: 40, max: 120 },
+    angle: { min: 80, max: 100 },
+    gravityY: 8,
+    scale: { start: 0.6, end: 0.6 },
+    alpha: { start: 0.8, end: 0.3 },
+    lifespan: 2600,
+    frequency: 80
+  },
+  sparkle: {
+    speed: { min: 20, max: 60 },
+    scale: { start: 0.4, end: 0 },
+    alpha: { start: 1, end: 0 },
+    lifespan: 500,
+    frequency: 60,
+    blendMode: "ADD"
+  }
+};
+function resolveParticlePreset(preset, config = {}) {
+  const base = preset ? PARTICLE_PRESET_REGISTRY[preset] : void 0;
+  if (preset && !base) {
+    console.warn(`[Particles] Preset "${String(preset)}" not found in registry`);
+  }
+  return {
+    ...base ?? {},
+    ...config
+  };
+}
+function isParticleEmitter(target) {
+  return !!target && typeof target.explode === "function";
+}
+function getFirstEmitter(manager) {
+  if (!manager) return null;
+  if (manager.__emitter) return manager.__emitter;
+  const emitters = manager.emitters;
+  if (Array.isArray(emitters)) {
+    return emitters[0] ?? null;
+  }
+  if (emitters && "list" in emitters && Array.isArray(emitters.list)) {
+    return emitters.list[0] ?? null;
+  }
+  return null;
+}
+function applyEmitterConfig(emitter, config) {
+  if (!emitter) return;
+  const withConfig = emitter;
+  if (withConfig.setConfig) {
+    withConfig.setConfig(config);
+    return;
+  }
+  if (withConfig.fromJSON) {
+    withConfig.fromJSON(config);
+    return;
+  }
+  Object.assign(emitter, config);
+}
+function applyEmitZone(emitter, emitZone) {
+  if (!emitter || !emitZone) return;
+  const withZone = emitter;
+  if (withZone.setEmitZone) {
+    withZone.setEmitZone(emitZone);
+    return;
+  }
+}
+function applyDeathZone(emitter, deathZone) {
+  if (!emitter) return;
+  const withZone = emitter;
+  const isDefined = (value) => value !== null && value !== void 0;
+  const normalized = Array.isArray(deathZone) ? deathZone.filter(isDefined) : deathZone ? [deathZone] : [];
+  const hasZone = normalized.length > 0;
+  if (hasZone && withZone.setDeathZone) {
+    withZone.setDeathZone(normalized);
+    return;
+  }
+  if (!hasZone) {
+    if (withZone.clearDeathZones) {
+      withZone.clearDeathZones();
+      return;
+    }
+    if (withZone.deathZones) {
+      withZone.deathZones = [];
+    }
+    return;
+  }
+  if (withZone.clearDeathZones) {
+    withZone.clearDeathZones();
+  }
+  if (withZone.addDeathZone) {
+    withZone.addDeathZone(normalized);
+    return;
+  }
+  if (withZone.deathZones) {
+    withZone.deathZones = normalized;
+  }
+}
+function mergeDeathZones(base, extra) {
+  const baseList = Array.isArray(base) ? base : base ? [base] : [];
+  const extraList = extra ?? [];
+  const merged = [...baseList, ...extraList];
+  return merged.length > 0 ? merged : void 0;
+}
+function applyParticlesProps(manager, prev, next) {
+  if (!manager) return;
+  const textureChanged = prev.texture !== next.texture || prev.frame !== next.frame;
+  if (textureChanged && next.texture && "setTexture" in manager && manager.setTexture) {
+    manager.setTexture(next.texture, next.frame);
+  }
+  const configChanged = prev.preset !== next.preset || prev.config !== next.config || prev.zone !== next.zone || prev.excludeZones !== next.excludeZones || prev.width !== next.width || prev.height !== next.height;
+  if (configChanged) {
+    const resolvedConfig = resolveParticlePreset(next.preset, next.config);
+    let emitter = null;
+    if (isParticleEmitter(manager)) {
+      emitter = manager;
+    } else {
+      const managerLike = manager;
+      emitter = managerLike.__emitter ?? getFirstEmitter(managerLike);
+      if (!emitter && managerLike.createEmitter) {
+        const created = managerLike.createEmitter(resolvedConfig);
+        emitter = created ?? null;
+      }
+      managerLike.__emitter = emitter;
+    }
+    if (!emitter) return;
+    applyEmitterConfig(emitter, resolvedConfig);
+    if (next.zone) {
+      const emitZone = buildEmitZoneFromLayout(next.zone, next.width, next.height);
+      if (emitZone) {
+        applyEmitZone(emitter, emitZone);
+      }
+    }
+    const deathZones = buildDeathZonesFromLayout(next.excludeZones, next.width, next.height);
+    const combined = mergeDeathZones(
+      resolvedConfig.deathZone,
+      deathZones
+    );
+    applyDeathZone(emitter, combined);
+  }
+}
+function applyParticlesLayout(particles, _prev, next) {
+  particles.__layoutProps = next;
+}
+function createParticlesLayout(particles, props) {
+  particles.__layoutProps = props;
+  particles.__getLayoutSize = () => ({ width: 0.01, height: 0.01 });
+}
+const particlesCreator = (scene, props) => {
+  const resolvedConfig = {
+    ...resolveParticlePreset(props.preset, props.config)
+  };
+  if (props.zone) {
+    const emitZone = buildEmitZoneFromLayout(props.zone, props.width, props.height);
+    if (emitZone) {
+      const configWithZone = resolvedConfig;
+      configWithZone.emitZone = emitZone;
+    }
+  }
+  const particles = scene.add.particles(
+    props.x ?? 0,
+    props.y ?? 0,
+    props.texture,
+    resolvedConfig
+  );
+  if (props.frame !== void 0) {
+    const configWithFrame = resolvedConfig;
+    configWithFrame.frame = props.frame;
+    if ("setTexture" in particles && particles.setTexture) {
+      particles.setTexture(props.texture, props.frame);
+    }
+  }
+  const emitter = isParticleEmitter(particles) ? particles : getFirstEmitter(particles);
+  if (!isParticleEmitter(particles)) {
+    particles.__emitter = emitter;
+  }
+  if ("setOrigin" in particles && typeof particles.setOrigin === "function") {
+    particles.setOrigin(0, 0);
+  }
+  createTransform(particles, props);
+  createPhaser(particles, props);
+  createParticlesLayout(particles, props);
+  if (props.excludeZones && emitter) {
+    const deathZones = buildDeathZonesFromLayout(props.excludeZones, props.width, props.height);
+    const combinedDeathZones = mergeDeathZones(
+      resolvedConfig.deathZone,
+      deathZones
+    );
+    if (combinedDeathZones) {
+      applyDeathZone(emitter, combinedDeathZones);
+    }
+  }
+  if (props.onReady) {
+    props.onReady(particles);
+  }
+  return particles;
+};
+const particlesPatcher = (node, prev, next) => {
+  applyTransformProps(node, prev, next);
+  applyPhaserProps(node, prev, next);
+  applyParticlesProps(node, prev, next);
+  applyParticlesLayout(node, prev, next);
+};
+function getOriginalTextureDimensions(sprite) {
+  const frame = sprite.frame;
+  return {
+    width: frame.width,
+    height: frame.height
+  };
+}
+function calculateFitScale(sprite, targetWidth, targetHeight, fit = "fill") {
+  const { width: textureWidth, height: textureHeight } = getOriginalTextureDimensions(sprite);
+  if (textureWidth === 0 || textureHeight === 0) {
+    return { scaleX: 1, scaleY: 1 };
+  }
+  if (fit === "fill") {
+    return {
+      scaleX: targetWidth / textureWidth,
+      scaleY: targetHeight / textureHeight
+    };
+  }
+  const targetAspect = targetWidth / targetHeight;
+  const textureAspect = textureWidth / textureHeight;
+  if (fit === "contain") {
+    const scale = targetAspect > textureAspect ? targetHeight / textureHeight : targetWidth / textureWidth;
+    return { scaleX: scale, scaleY: scale };
+  }
+  if (fit === "cover") {
+    const scale = targetAspect < textureAspect ? targetHeight / textureHeight : targetWidth / textureWidth;
+    return { scaleX: scale, scaleY: scale };
+  }
+  return { scaleX: 1, scaleY: 1 };
+}
+function applySpriteProps(sprite, prev, next) {
+  const textureChanged = prev.texture !== next.texture || prev.frame !== next.frame;
+  if (textureChanged && next.texture) {
+    sprite.setTexture(next.texture, next.frame);
+  }
+  if (prev.tint !== next.tint) {
+    if (typeof next.tint === "number") {
+      sprite.setTint(next.tint);
+    } else {
+      sprite.clearTint();
+    }
+  }
+  if (prev.originX !== next.originX || prev.originY !== next.originY) {
+    const originX = next.originX ?? sprite.originX;
+    const originY = next.originY ?? sprite.originY;
+    sprite.setOrigin(originX, originY);
+  }
+  const displayWidthChanged = prev.displayWidth !== next.displayWidth;
+  const displayHeightChanged = prev.displayHeight !== next.displayHeight;
+  const fitChanged = prev.fit !== next.fit;
+  if (displayWidthChanged || displayHeightChanged || fitChanged || textureChanged) {
+    if (typeof next.displayWidth === "number" && typeof next.displayHeight === "number") {
+      const fit = next.fit ?? "fill";
+      if (fit === "fill") {
+        sprite.setDisplaySize(next.displayWidth, next.displayHeight);
+      } else {
+        const { scaleX, scaleY } = calculateFitScale(
+          sprite,
+          next.displayWidth,
+          next.displayHeight,
+          fit
+        );
+        sprite.setScale(scaleX, scaleY);
+      }
+    } else if (typeof next.displayWidth === "number") {
+      const { width: origWidth } = getOriginalTextureDimensions(sprite);
+      const scale = next.displayWidth / origWidth;
+      sprite.setScale(scale);
+    } else if (typeof next.displayHeight === "number") {
+      const { height: origHeight } = getOriginalTextureDimensions(sprite);
+      const scale = next.displayHeight / origHeight;
+      sprite.setScale(scale, scale);
+    } else {
+      sprite.setScale(1);
+    }
+  }
+  const animationChanged = prev.animationKey !== next.animationKey || prev.loop !== next.loop || prev.repeatDelay !== next.repeatDelay;
+  if (animationChanged) {
+    if (sprite.anims.isPlaying) {
+      sprite.anims.stop();
+    }
+    if (next.animationKey) {
+      sprite.anims.play({
+        key: next.animationKey,
+        repeat: next.loop ? -1 : 0,
+        repeatDelay: next.repeatDelay ?? 0
+      });
+    }
+  }
+  const callbacksChanged = prev.onAnimationStart !== next.onAnimationStart || prev.onAnimationComplete !== next.onAnimationComplete || prev.onAnimationRepeat !== next.onAnimationRepeat || prev.onAnimationUpdate !== next.onAnimationUpdate;
+  if (callbacksChanged) {
+    sprite.off("animationstart");
+    sprite.off("animationcomplete");
+    sprite.off("animationrepeat");
+    sprite.off("animationupdate");
+    if (next.onAnimationStart) {
+      sprite.on("animationstart", (anim) => {
+        next.onAnimationStart?.(anim.key);
+      });
+    }
+    if (next.onAnimationComplete) {
+      sprite.on("animationcomplete", (anim) => {
+        next.onAnimationComplete?.(anim.key);
+      });
+    }
+    if (next.onAnimationRepeat) {
+      sprite.on("animationrepeat", (anim) => {
+        next.onAnimationRepeat?.(anim.key);
+      });
+    }
+    if (next.onAnimationUpdate) {
+      sprite.on(
+        "animationupdate",
+        (anim, frame) => {
+          next.onAnimationUpdate?.(anim.key, frame);
+        }
+      );
+    }
+  }
+}
+function applySpriteLayout(sprite, _prev, next) {
+  sprite.__layoutProps = next;
+}
+function createSpriteLayout(sprite, props) {
+  sprite.__layoutProps = props;
+  sprite.__getLayoutSize = () => {
+    return { width: 0.01, height: 0.01 };
+  };
+}
+const spriteCreator = (scene, props) => {
+  const sprite = scene.add.sprite(props.x ?? 0, props.y ?? 0, props.texture, props.frame);
+  sprite.setOrigin(0.5, 0.5);
+  if (props.originX !== void 0 || props.originY !== void 0) {
+    sprite.setOrigin(props.originX ?? sprite.originX, props.originY ?? sprite.originY);
+  }
+  createTransform(sprite, props);
+  createPhaser(sprite, props);
+  if (props.tint !== void 0) {
+    sprite.setTint(props.tint);
+  }
+  if (props.displayWidth !== void 0 || props.displayHeight !== void 0) {
+    if (props.displayWidth !== void 0 && props.displayHeight !== void 0) {
+      const fit = props.fit ?? "fill";
+      const textureWidth = sprite.width;
+      const textureHeight = sprite.height;
+      if (textureWidth > 0 && textureHeight > 0) {
+        if (fit === "fill") {
+          sprite.setDisplaySize(props.displayWidth, props.displayHeight);
+        } else if (fit === "contain") {
+          const targetAspect = props.displayWidth / props.displayHeight;
+          const textureAspect = textureWidth / textureHeight;
+          const scale = targetAspect > textureAspect ? props.displayHeight / textureHeight : props.displayWidth / textureWidth;
+          sprite.setScale(scale);
+        } else if (fit === "cover") {
+          const targetAspect = props.displayWidth / props.displayHeight;
+          const textureAspect = textureWidth / textureHeight;
+          const scale = targetAspect < textureAspect ? props.displayHeight / textureHeight : props.displayWidth / textureWidth;
+          sprite.setScale(scale);
+        }
+      }
+    } else if (props.displayWidth !== void 0) {
+      const scale = props.displayWidth / sprite.width;
+      sprite.setScale(scale);
+    } else if (props.displayHeight !== void 0) {
+      const scale = props.displayHeight / sprite.height;
+      sprite.setScale(scale);
+    }
+  }
+  if (props.animationKey) {
+    if (sprite.scene && sprite.scene.anims.exists(props.animationKey)) {
+      sprite.anims.play({
+        key: props.animationKey,
+        repeat: props.loop ? -1 : 0,
+        repeatDelay: props.repeatDelay ?? 0
+      });
+    }
+  }
+  if (props.onAnimationStart) {
+    sprite.on("animationstart", (anim) => {
+      props.onAnimationStart?.(anim.key);
+    });
+  }
+  if (props.onAnimationComplete) {
+    sprite.on("animationcomplete", (anim) => {
+      props.onAnimationComplete?.(anim.key);
+    });
+  }
+  if (props.onAnimationRepeat) {
+    sprite.on("animationrepeat", (anim) => {
+      props.onAnimationRepeat?.(anim.key);
+    });
+  }
+  if (props.onAnimationUpdate) {
+    sprite.on(
+      "animationupdate",
+      (anim, frame) => {
+        props.onAnimationUpdate?.(anim.key, frame);
+      }
+    );
+  }
+  createSpriteLayout(sprite, props);
+  if (props.onReady) {
+    props.onReady(sprite);
+  }
+  return sprite;
+};
+const spritePatcher = (node, prev, next) => {
+  applyTransformProps(node, prev, next);
+  applyPhaserProps(node, prev, next);
+  applySpriteProps(node, prev, next);
+  applySpriteLayout(node, prev, next);
+};
+function applyTextProps(node, prev, next) {
+  if (node.active === false || node.scene && !node.scene.sys.game) {
+    return;
+  }
+  let needsUpdate = false;
+  if (prev.text !== next.text && typeof next.text === "string") {
+    node.setText(next.text);
+    needsUpdate = true;
+  }
+  if (next.style !== void 0 && !equal(next.style, prev.style || {})) {
+    try {
+      node.setStyle(next.style);
+      needsUpdate = true;
+    } catch (error) {
+      console.warn("Failed to apply text style (scene may be transitioning):", error);
+    }
+  }
+  if (next.maxWidth !== prev.maxWidth && next.maxWidth !== void 0) {
+    const viewport = viewportRegistry.getViewport();
+    const parsedMaxWidth = parseSize(next.maxWidth);
+    const resolvedMaxWidth = resolveSize(parsedMaxWidth, viewport?.width, void 0, void 0);
+    node.setWordWrapWidth(resolvedMaxWidth, true);
+    needsUpdate = true;
+  }
+  if (prev.style !== next.style && next.style !== void 0) {
+    try {
+      node.setStyle(next.style);
+      needsUpdate = true;
+    } catch (error) {
+      console.warn("Failed to apply text style (scene may be transitioning):", error);
+    }
+  }
+  if (needsUpdate && node.updateText) {
+    node.updateText();
+  }
+}
+function applyTextLayout(text, _prev, next) {
+  text.__layoutProps = next;
+  text.__getLayoutSize = () => {
+    if (text.__layoutProps?.headless) {
+      return { width: 0.01, height: 0.01 };
+    }
+    return {
+      width: text.width,
+      height: text.height
+    };
+  };
+}
+function createTextLayout(text, props) {
+  text.__layoutProps = props;
+  text.__getLayoutSize = () => {
+    if (text.__layoutProps?.headless) {
+      return { width: 0.01, height: 0.01 };
+    }
+    return {
+      width: text.width,
+      height: text.height
+    };
+  };
+}
+const textCreator = (scene, props) => {
+  const text = scene.add.text(props.x ?? 0, props.y ?? 0, props.text ?? "", props.style);
+  if (props.headless) {
+    text.setOrigin(0.5, 0.5);
+  } else {
+    text.setOrigin(0, 0);
+  }
+  const normalizedProps = { ...props };
+  if (props.headless) {
+    delete normalizedProps.padding;
+    delete normalizedProps.margin;
+    delete normalizedProps.gap;
+  } else {
+    if (normalizedProps.rotation !== void 0) {
+      delete normalizedProps.rotation;
+    }
+  }
+  createTransform(text, normalizedProps);
+  createPhaser(text, normalizedProps);
+  createTextLayout(text, normalizedProps);
+  return text;
+};
+const textPatcher = (node, prev, next) => {
+  if (prev.headless !== next.headless) {
+    if (next.headless) {
+      node.setOrigin(0.5, 0.5);
+    } else {
+      node.setOrigin(0, 0);
+    }
+  }
+  const normalizedPrev = { ...prev };
+  const normalizedNext = { ...next };
+  if (next.headless) {
+    delete normalizedNext.padding;
+    delete normalizedNext.margin;
+    delete normalizedNext.gap;
+  } else {
+    if (normalizedNext.rotation !== void 0) {
+      delete normalizedNext.rotation;
+    }
+  }
+  if (prev.headless) {
+    delete normalizedPrev.padding;
+    delete normalizedPrev.margin;
+    delete normalizedPrev.gap;
+  } else {
+    if (normalizedPrev.rotation !== void 0) {
+      delete normalizedPrev.rotation;
+    }
+  }
+  applyTransformProps(node, normalizedPrev, normalizedNext);
+  applyPhaserProps(node, normalizedPrev, normalizedNext);
+  applyTextProps(node, normalizedPrev, normalizedNext);
+  applyTextLayout(node, normalizedPrev, normalizedNext);
+};
+const tileSpriteCreator = (_scene, _props) => {
+  throw new Error(
+    "TileSprite component not implemented yet. This is a placeholder for architecture planning."
+  );
+};
+const tileSpritePatcher = (_node, _prev, _next) => {
+  throw new Error(
+    "TileSprite component not implemented yet. This is a placeholder for architecture planning."
+  );
+};
+function applyBackgroundProps(container, prev, next) {
+  const prevBgColor = prev.backgroundColor;
+  const nextBgColor = next.backgroundColor;
+  const prevBgAlpha = prev.backgroundAlpha ?? 1;
+  const nextBgAlpha = next.backgroundAlpha ?? 1;
+  let prevWidth = typeof prev.width === "number" ? prev.width : 100;
+  let prevHeight = typeof prev.height === "number" ? prev.height : 100;
+  let nextWidth = typeof next.width === "number" ? next.width : 100;
+  let nextHeight = typeof next.height === "number" ? next.height : 100;
+  if (container.__getLayoutSize) {
+    const layoutSize = container.__getLayoutSize();
+    prevWidth = layoutSize.width;
+    prevHeight = layoutSize.height;
+    nextWidth = layoutSize.width;
+    nextHeight = layoutSize.height;
+  }
+  const prevCornerRadius = prev.cornerRadius ?? 0;
+  const nextCornerRadius = next.cornerRadius ?? 0;
+  const prevBorderColor = prev.borderColor;
+  const nextBorderColor = next.borderColor;
+  const prevBorderWidth = prev.borderWidth ?? 0;
+  const nextBorderWidth = next.borderWidth ?? 0;
+  const prevBorderAlpha = prev.borderAlpha ?? 1;
+  const nextBorderAlpha = next.borderAlpha ?? 1;
+  const prevHasBorder = prevBorderWidth > 0 && prevBorderColor !== void 0;
+  const nextHasBorder = nextBorderWidth > 0 && nextBorderColor !== void 0;
+  const prevHasGraphics = prevBgColor !== void 0 || prevHasBorder;
+  const nextHasGraphics = nextBgColor !== void 0 || nextHasBorder;
+  if (prevHasGraphics && !nextHasGraphics) {
+    if (container.__background) {
+      container.__background.destroy();
+      delete container.__background;
+    }
+  } else if (!prevHasGraphics && nextHasGraphics) {
+    if (container.scene) {
+      const background = container.scene.add.graphics();
+      if (nextBgColor !== void 0) {
+        background.fillStyle(nextBgColor, nextBgAlpha);
+      }
+      if (nextHasBorder) {
+        background.lineStyle(nextBorderWidth, nextBorderColor, nextBorderAlpha);
+      }
+      if (nextCornerRadius !== 0) {
+        if (nextBgColor !== void 0) {
+          background.fillRoundedRect(0, 0, nextWidth, nextHeight, nextCornerRadius);
+        }
+        if (nextHasBorder) {
+          background.strokeRoundedRect(0, 0, nextWidth, nextHeight, nextCornerRadius);
+        }
+      } else {
+        if (nextBgColor !== void 0) {
+          background.fillRect(0, 0, nextWidth, nextHeight);
+        }
+        if (nextHasBorder) {
+          background.strokeRect(0, 0, nextWidth, nextHeight);
+        }
+      }
+      container.addAt(background, 0);
+      container.__background = background;
+      background.__isBackground = true;
+    }
+  } else if (container.__background && nextHasGraphics) {
+    const needsRedraw = prevBgColor !== nextBgColor || prevBgAlpha !== nextBgAlpha || prevWidth !== nextWidth || prevHeight !== nextHeight || prevCornerRadius !== nextCornerRadius || prevBorderWidth !== nextBorderWidth || prevBorderColor !== nextBorderColor || prevBorderAlpha !== nextBorderAlpha;
+    if (needsRedraw) {
+      container.__background.clear();
+      if (nextBgColor !== void 0) {
+        container.__background.fillStyle(nextBgColor, nextBgAlpha);
+      }
+      if (nextHasBorder) {
+        container.__background.lineStyle(nextBorderWidth, nextBorderColor, nextBorderAlpha);
+      }
+      if (nextCornerRadius !== 0) {
+        if (nextBgColor !== void 0) {
+          container.__background.fillRoundedRect(0, 0, nextWidth, nextHeight, nextCornerRadius);
+        }
+        if (nextHasBorder) {
+          container.__background.strokeRoundedRect(0, 0, nextWidth, nextHeight, nextCornerRadius);
+        }
+      } else {
+        if (nextBgColor !== void 0) {
+          container.__background.fillRect(0, 0, nextWidth, nextHeight);
+        }
+        if (nextHasBorder) {
+          container.__background.strokeRect(0, 0, nextWidth, nextHeight);
+        }
+      }
+    }
+  }
+}
+function applyGesturesProps(scene, container, prev, next) {
+  if (!scene || !scene.sys || !scene.data) {
+    console.warn("applyGesturesProps: Invalid scene or scene not initialized");
+    return;
+  }
+  if (!scene.sys.isActive() || scene.sys.game === null) {
+    console.warn("applyGesturesProps: Scene is not active or game is null");
+    return;
+  }
+  const hasAnyGesture = !!(next.onTouch || next.onTouchOutside || next.onTouchMove || next.onDoubleTap || next.onLongPress || next.onHoverStart || next.onHoverEnd || next.onWheel);
+  const hadAnyGesture = !!(prev.onTouch || prev.onTouchOutside || prev.onTouchMove || prev.onDoubleTap || prev.onLongPress || prev.onHoverStart || prev.onHoverEnd || prev.onWheel);
+  const prevEnabled = hadAnyGesture && prev.enableGestures !== false;
+  const nextEnabled = hasAnyGesture && next.enableGestures !== false;
+  const manager = getGestureManager(scene);
+  if (!prevEnabled && nextEnabled && hasAnyGesture) {
+    const containerWithLayout = container;
+    let width = 100;
+    let height = 100;
+    if (containerWithLayout.__getLayoutSize) {
+      const size = containerWithLayout.__getLayoutSize();
+      width = size.width;
+      height = size.height;
+    } else {
+      const bounds = container.getBounds();
+      width = bounds.width || 100;
+      height = bounds.height || 100;
+    }
+    const hitArea = new Phaser$1.Geom.Rectangle(0, 0, width, height);
+    const callbacks = {};
+    if (next.onTouch) callbacks.onTouch = next.onTouch;
+    if (next.onTouchOutside) callbacks.onTouchOutside = next.onTouchOutside;
+    if (next.onTouchMove) callbacks.onTouchMove = next.onTouchMove;
+    if (next.onDoubleTap) callbacks.onDoubleTap = next.onDoubleTap;
+    if (next.onLongPress) callbacks.onLongPress = next.onLongPress;
+    if (next.onHoverStart) callbacks.onHoverStart = next.onHoverStart;
+    if (next.onHoverEnd) callbacks.onHoverEnd = next.onHoverEnd;
+    if (next.onWheel) callbacks.onWheel = next.onWheel;
+    const config = {};
+    if (next.longPressDuration !== void 0) config.longPressDuration = next.longPressDuration;
+    if (next.doubleTapDelay !== void 0) config.doubleTapDelay = next.doubleTapDelay;
+    manager.registerContainer(container, callbacks, hitArea, config);
+    return;
+  }
+  if (prevEnabled && (!nextEnabled || !hasAnyGesture)) {
+    manager.unregisterContainer(container);
+    return;
+  }
+  if (nextEnabled && hasAnyGesture) {
+    const callbacksChanged = prev.onTouch !== next.onTouch || prev.onTouchOutside !== next.onTouchOutside || prev.onTouchMove !== next.onTouchMove || prev.onDoubleTap !== next.onDoubleTap || prev.onLongPress !== next.onLongPress || prev.onHoverStart !== next.onHoverStart || prev.onHoverEnd !== next.onHoverEnd || prev.onWheel !== next.onWheel;
+    if (callbacksChanged) {
+      const callbacks = {};
+      if (next.onTouch) callbacks.onTouch = next.onTouch;
+      if (next.onTouchOutside) callbacks.onTouchOutside = next.onTouchOutside;
+      if (next.onTouchMove) callbacks.onTouchMove = next.onTouchMove;
+      if (next.onDoubleTap) callbacks.onDoubleTap = next.onDoubleTap;
+      if (next.onLongPress) callbacks.onLongPress = next.onLongPress;
+      if (next.onHoverStart) callbacks.onHoverStart = next.onHoverStart;
+      if (next.onHoverEnd) callbacks.onHoverEnd = next.onHoverEnd;
+      if (next.onWheel) callbacks.onWheel = next.onWheel;
+      manager.updateCallbacks(container, callbacks);
+    }
+    const containerWithLayout = container;
+    let width = 100;
+    let height = 100;
+    if (containerWithLayout.__getLayoutSize) {
+      const size = containerWithLayout.__getLayoutSize();
+      width = size.width;
+      height = size.height;
+    } else {
+      const bounds = container.getBounds();
+      width = bounds.width || 100;
+      height = bounds.height || 100;
+    }
+    const hitArea = new Phaser$1.Geom.Rectangle(0, 0, width, height);
+    manager.updateHitArea(container, hitArea);
+  }
+}
+function updateGestureHitAreaIfNeeded(node) {
+  const containerWithLayout = node;
+  if (!containerWithLayout.__getLayoutSize) return;
+  try {
+    const manager = getGestureManager(containerWithLayout.scene);
+    const size = containerWithLayout.__getLayoutSize();
+    const hitArea = new Phaser.Geom.Rectangle(0, 0, size.width, size.height);
+    manager.updateHitArea(node, hitArea);
+  } catch {
+  }
+}
+const LAYOUT_RELEVANT_PROPS = [
+  "width",
+  "height",
+  "minWidth",
+  "maxWidth",
+  "minHeight",
+  "maxHeight",
+  "flex",
+  "margin",
+  "padding",
+  "gap",
+  "direction",
+  "justifyContent",
+  "alignItems",
+  "overflow"
+];
+const DEEP_COMPARE_PROPS = /* @__PURE__ */ new Set(["margin", "padding"]);
+function hasLayoutPropsChanged(prev, next) {
+  for (const prop of LAYOUT_RELEVANT_PROPS) {
+    const oldVal = prev[prop];
+    const newVal = next[prop];
+    if (DEEP_COMPARE_PROPS.has(prop)) {
+      if (!equal(oldVal, newVal)) {
+        return true;
+      }
+    } else {
+      if (oldVal !== newVal) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function getParentLayoutContext(node) {
+  const parent = node.parentContainer;
+  if (parent && parent.__layoutProps && parent.__getLayoutSize) {
+    const parentSize = parent.__getLayoutSize();
+    const padding = parent.__layoutProps.padding ?? 0;
+    const normPadding = typeof padding === "number" ? { left: padding, right: padding, top: padding, bottom: padding } : {
+      left: padding.left ?? 0,
+      right: padding.right ?? 0,
+      top: padding.top ?? 0,
+      bottom: padding.bottom ?? 0
+    };
+    return {
+      parentSize: {
+        width: parentSize.width - normPadding.left - normPadding.right,
+        height: parentSize.height - normPadding.top - normPadding.bottom
+      }
+      // Parent already provides content-area, no padding offset needed
+    };
+  }
+  if (node.scene) {
+    return {
+      parentSize: {
+        width: node.scene.scale.width,
+        height: node.scene.scale.height
+      }
+    };
+  }
+  return {};
+}
+function applyLayoutProps(node, prev, next) {
+  node.__layoutProps = next;
+  if (hasLayoutPropsChanged(prev, next)) {
+    const { parentSize, parentPadding } = getParentLayoutContext(node);
+    calculateLayout(node, next, parentSize, parentPadding);
+    updateGestureHitAreaIfNeeded(node);
+  }
+}
+const tooltipStates = /* @__PURE__ */ new Map();
+function calculateTooltipPosition(targetBounds, position, offset, tooltipWidth, tooltipHeight) {
+  const viewport = {
+    width: window.innerWidth,
+    height: window.innerHeight
+  };
+  let x = 0;
+  let y = 0;
+  switch (position) {
+    case "top":
+      x = targetBounds.centerX - tooltipWidth / 2;
+      y = targetBounds.top - tooltipHeight - offset;
+      break;
+    case "bottom":
+      x = targetBounds.centerX - tooltipWidth / 2;
+      y = targetBounds.bottom + offset;
+      break;
+    case "left":
+      x = targetBounds.left - tooltipWidth - offset;
+      y = targetBounds.centerY - tooltipHeight / 2;
+      break;
+    case "right":
+      x = targetBounds.right + offset;
+      y = targetBounds.centerY - tooltipHeight / 2;
+      break;
+  }
+  x = Math.max(8, Math.min(x, viewport.width - tooltipWidth - 8));
+  y = Math.max(8, Math.min(y, viewport.height - tooltipHeight - 8));
+  return { x, y };
+}
+function showTooltip(scene, container, config) {
+  const state = tooltipStates.get(container);
+  if (!state || state.isVisible) return;
+  state.isVisible = true;
+  state.currentConfig = config;
+  const theme = themeRegistry.getGlobalTheme();
+  const tooltipTheme = theme.Tooltip || {};
+  const position = config.position ?? tooltipTheme.position ?? "top";
+  const offset = config.offset ?? tooltipTheme.offset ?? 8;
+  const content = config.content;
+  const targetBounds = container.getBounds();
+  const textStyle = tooltipTheme.textStyle ?? {
+    fontSize: "14px",
+    fontFamily: "Arial",
+    color: "#ffffff",
+    padding: { x: 8, y: 4 }
+  };
+  const { backgroundColor: bgColor, ...styleWithoutBg } = textStyle;
+  const text = scene.add.text(0, 0, content, styleWithoutBg);
+  text.setOrigin(0.5);
+  const padding = textStyle.padding ?? { x: 8, y: 4 };
+  const paddingX = typeof padding === "number" ? padding : padding.x ?? 8;
+  const paddingY = typeof padding === "number" ? padding : padding.y ?? 4;
+  const textWidth = text.width;
+  const textHeight = text.height;
+  const bgWidth = textWidth + paddingX * 2;
+  const bgHeight = textHeight + paddingY * 2;
+  const cornerRadius = tooltipTheme.cornerRadius ?? 6;
+  const graphics = scene.add.graphics();
+  const bg2 = bgColor ?? "#000000dd";
+  let fillColor = 0;
+  let fillAlpha = 0.87;
+  if (typeof bg2 === "string") {
+    if (bg2.startsWith("#")) {
+      const hex = bg2.slice(1);
+      if (hex.length === 8) {
+        fillColor = parseInt(hex.slice(0, 6), 16);
+        fillAlpha = parseInt(hex.slice(6, 8), 16) / 255;
+      } else if (hex.length === 6) {
+        fillColor = parseInt(hex, 16);
+        fillAlpha = 1;
+      }
+    }
+  }
+  graphics.fillStyle(fillColor, fillAlpha);
+  graphics.fillRoundedRect(-bgWidth / 2, -bgHeight / 2, bgWidth, bgHeight, cornerRadius);
+  const tooltipContainer = scene.add.container(0, 0, [graphics, text]);
+  tooltipContainer.setDepth(1e4);
+  const textBounds = tooltipContainer.getBounds();
+  const pos = calculateTooltipPosition(
+    targetBounds,
+    position,
+    offset,
+    textBounds.width,
+    textBounds.height
+  );
+  const themeAnim = tooltipTheme.animation || {};
+  const anim = config.animation || {};
+  const fadeInDuration = anim.fadeIn ?? themeAnim.fadeIn ?? 200;
+  const moveOffset = {
+    dx: anim.move?.dx ?? themeAnim.move?.dx ?? 0,
+    dy: anim.move?.dy ?? themeAnim.move?.dy ?? 0
+  };
+  const pulse = anim.pulse ?? themeAnim.pulse ?? false;
+  const pulseScale = anim.pulseScale ?? [0.75, 1.25];
+  tooltipContainer.setPosition(
+    pos.x + textBounds.width / 2 - moveOffset.dx,
+    pos.y + textBounds.height / 2 - moveOffset.dy
+  );
+  tooltipContainer.setAlpha(0);
+  state.tooltip = tooltipContainer;
+  const fadeTween = scene.tweens.add({
+    targets: tooltipContainer,
+    alpha: 1,
+    x: pos.x + textBounds.width / 2,
+    y: pos.y + textBounds.height / 2,
+    duration: fadeInDuration,
+    ease: "Cubic.Out"
+  });
+  state.activeTweens.push(fadeTween);
+  if (pulse) {
+    const pulseTween = scene.tweens.add({
+      targets: tooltipContainer,
+      scale: { from: pulseScale[0], to: pulseScale[1] },
+      duration: 600,
+      yoyo: true,
+      repeat: -1,
+      ease: "Sine.InOut"
+    });
+    state.activeTweens.push(pulseTween);
+  }
+  if (config.autoDismiss && config.autoDismiss > 0) {
+    state.autoDismissTimer = setTimeout(() => {
+      hideTooltip(container);
+    }, config.autoDismiss);
+  }
+}
+function hideTooltip(container) {
+  const state = tooltipStates.get(container);
+  if (!state || !state.isVisible) return;
+  state.isVisible = false;
+  const config = state.currentConfig;
+  state.currentConfig = null;
+  if (state.autoDismissTimer) {
+    clearTimeout(state.autoDismissTimer);
+    state.autoDismissTimer = null;
+  }
+  if (!state.tooltip) return;
+  const tooltip = state.tooltip;
+  const scene = tooltip.scene;
+  const theme = themeRegistry.getGlobalTheme();
+  const tooltipTheme = theme.Tooltip || {};
+  const themeAnim = tooltipTheme.animation || {};
+  const anim = config?.animation || {};
+  const fadeOutDuration = anim.fadeOut ?? themeAnim.fadeOut ?? 200;
+  state.activeTweens.forEach((tween) => tween.stop());
+  state.activeTweens = [];
+  scene.tweens.add({
+    targets: tooltip,
+    alpha: 0,
+    duration: fadeOutDuration,
+    ease: "Cubic.In",
+    onComplete: () => {
+      tooltip.destroy();
+    }
+  });
+  state.tooltip = null;
+}
+function applyTooltip(scene, container, nextCallback, existingOnHoverStart, existingOnHoverEnd) {
+  if (!tooltipStates.has(container)) {
+    tooltipStates.set(container, {
+      isVisible: false,
+      tooltip: null,
+      activeTweens: [],
+      showTimer: null,
+      hideTimer: null,
+      autoDismissTimer: null,
+      currentConfig: null
+    });
+    container.once("destroy", () => {
+      const state2 = tooltipStates.get(container);
+      if (state2) {
+        if (state2.showTimer) clearTimeout(state2.showTimer);
+        if (state2.hideTimer) clearTimeout(state2.hideTimer);
+        if (state2.autoDismissTimer) clearTimeout(state2.autoDismissTimer);
+        state2.activeTweens.forEach((tween) => tween.stop());
+        hideTooltip(container);
+        tooltipStates.delete(container);
+      }
+    });
+  }
+  const state = tooltipStates.get(container);
+  if (!state) {
+    throw new Error("applyTooltip: state not initialized");
+  }
+  const theme = themeRegistry.getGlobalTheme();
+  const tooltipTheme = theme.Tooltip || {};
+  const onHoverStart = (data) => {
+    if (existingOnHoverStart) existingOnHoverStart(data);
+    if (!nextCallback) return;
+    const result = nextCallback();
+    if (!result) return;
+    const config = typeof result === "string" ? { content: result } : result;
+    if (config.disabled) return;
+    if (state.hideTimer) {
+      clearTimeout(state.hideTimer);
+      state.hideTimer = null;
+    }
+    if (state.autoDismissTimer) {
+      clearTimeout(state.autoDismissTimer);
+      state.autoDismissTimer = null;
+    }
+    const showDelay = config.showDelay ?? tooltipTheme.showDelay ?? 500;
+    state.showTimer = setTimeout(() => {
+      showTooltip(scene, container, config);
+    }, showDelay);
+  };
+  const onHoverEnd = (data) => {
+    if (existingOnHoverEnd) existingOnHoverEnd(data);
+    if (state.showTimer) {
+      clearTimeout(state.showTimer);
+      state.showTimer = null;
+    }
+    const hideDelay = state.currentConfig?.hideDelay ?? tooltipTheme.hideDelay ?? 0;
+    if (hideDelay > 0) {
+      state.hideTimer = setTimeout(() => {
+        hideTooltip(container);
+      }, hideDelay);
+    } else {
+      hideTooltip(container);
+    }
+  };
+  return { onHoverStart, onHoverEnd };
+}
+function createBackground(scene, container, props) {
+  const hasBackground = props.backgroundColor !== void 0;
+  const hasBorder = props.borderColor !== void 0;
+  if (hasBackground || hasBorder) {
+    const width = typeof props.width === "number" ? props.width : 100;
+    const height = typeof props.height === "number" ? props.height : 100;
+    const bgColor = props.backgroundColor;
+    const bgAlpha = props.backgroundAlpha ?? 1;
+    const cornerRadius = props.cornerRadius ?? 0;
+    const borderColor = props.borderColor;
+    const borderWidth = props.borderWidth ?? 0;
+    const borderAlpha = props.borderAlpha ?? 1;
+    const background = scene.add.graphics();
+    if (bgColor !== void 0) {
+      background.fillStyle(bgColor, bgAlpha);
+    }
+    if (borderWidth > 0 && borderColor !== void 0) {
+      background.lineStyle(borderWidth, borderColor, borderAlpha);
+    }
+    if (cornerRadius !== 0) {
+      if (bgColor !== void 0) {
+        background.fillRoundedRect(0, 0, width, height, cornerRadius);
+      }
+      if (borderWidth > 0 && borderColor !== void 0) {
+        background.strokeRoundedRect(0, 0, width, height, cornerRadius);
+      }
+    } else {
+      if (bgColor !== void 0) {
+        background.fillRect(0, 0, width, height);
+      }
+      if (borderWidth > 0 && borderColor !== void 0) {
+        background.strokeRect(0, 0, width, height);
+      }
+    }
+    container.addAt(background, 0);
+    container.__background = background;
+    background.__isBackground = true;
+  }
+}
+function createGestures(scene, container, props) {
+  const hasAnyGesture = !!(props.onTouch || props.onTouchOutside || props.onTouchMove || props.onDoubleTap || props.onLongPress || props.onHoverStart || props.onHoverEnd || props.onWheel);
+  const shouldEnable = hasAnyGesture && props.enableGestures !== false;
+  if (!shouldEnable) {
+    return;
+  }
+  const manager = getGestureManager(scene);
+  const containerWithLayout = container;
+  let width = 100;
+  let height = 100;
+  if (containerWithLayout.__getLayoutSize) {
+    const size = containerWithLayout.__getLayoutSize();
+    width = size.width;
+    height = size.height;
+  } else {
+    const bounds = container.getBounds();
+    width = bounds.width || 100;
+    height = bounds.height || 100;
+  }
+  const hitArea = new Phaser$1.Geom.Rectangle(0, 0, width, height);
+  const callbacks = {};
+  if (props.onTouch) callbacks.onTouch = props.onTouch;
+  if (props.onTouchOutside) callbacks.onTouchOutside = props.onTouchOutside;
+  if (props.onTouchMove) callbacks.onTouchMove = props.onTouchMove;
+  if (props.onDoubleTap) callbacks.onDoubleTap = props.onDoubleTap;
+  if (props.onLongPress) callbacks.onLongPress = props.onLongPress;
+  if (props.onHoverStart) callbacks.onHoverStart = props.onHoverStart;
+  if (props.onHoverEnd) callbacks.onHoverEnd = props.onHoverEnd;
+  if (props.onWheel) callbacks.onWheel = props.onWheel;
+  const config = {};
+  if (props.longPressDuration !== void 0) config.longPressDuration = props.longPressDuration;
+  if (props.doubleTapDelay !== void 0) config.doubleTapDelay = props.doubleTapDelay;
+  if (props.maxTouchDuration !== void 0) config.maxTouchDuration = props.maxTouchDuration;
+  manager.registerContainer(container, callbacks, hitArea, config);
+}
+function createLayout(container, props) {
+  container.__layoutProps = props;
+  container.__getLayoutSize = () => {
+    const children = container.list;
+    const direction = props.direction ?? "column";
+    const paddingRaw = props.padding ?? {};
+    const padding = typeof paddingRaw === "number" ? { left: paddingRaw, top: paddingRaw, right: paddingRaw, bottom: paddingRaw } : paddingRaw;
+    const paddingLeft = padding.left ?? 0;
+    const paddingTop = padding.top ?? 0;
+    const paddingRight = padding.right ?? 0;
+    const paddingBottom = padding.bottom ?? 0;
+    const gapNormalized = normalizeGap(props.gap);
+    let maxWidth = 0;
+    let maxHeight = 0;
+    let totalMainSize = 0;
+    let childCount = 0;
+    for (const child of children) {
+      if (child.__isBackground) {
+        continue;
+      }
+      childCount++;
+      const marginRaw = child.__layoutProps?.margin ?? {};
+      const margin = typeof marginRaw === "number" ? { top: marginRaw, right: marginRaw, bottom: marginRaw, left: marginRaw } : marginRaw;
+      const marginTop = margin.top ?? 0;
+      const marginBottom = margin.bottom ?? 0;
+      const marginLeft = margin.left ?? 0;
+      const marginRight = margin.right ?? 0;
+      const childSize = getChildSize(child);
+      if (direction === "row") {
+        totalMainSize += marginLeft + childSize.width + marginRight;
+        const childTotalHeight = marginTop + childSize.height + marginBottom;
+        maxHeight = Math.max(maxHeight, childTotalHeight);
+      } else {
+        const childTotalWidth = marginLeft + childSize.width + marginRight;
+        maxWidth = Math.max(maxWidth, childTotalWidth);
+        totalMainSize += marginTop + childSize.height + marginBottom;
+      }
+    }
+    if (childCount > 1) {
+      const gapValue = direction === "row" ? gapNormalized.horizontal : gapNormalized.vertical;
+      totalMainSize += gapValue * (childCount - 1);
+    }
+    const defaultWidth = direction === "row" ? totalMainSize + paddingLeft + paddingRight : maxWidth + paddingLeft + paddingRight;
+    const defaultHeight = direction === "row" ? maxHeight + paddingTop + paddingBottom : totalMainSize + paddingTop + paddingBottom;
+    const parsedWidth = parseSize(props.width);
+    const finalWidth = resolveSize(parsedWidth, void 0, defaultWidth);
+    const parsedHeight = parseSize(props.height);
+    const finalHeight = resolveSize(parsedHeight, void 0, defaultHeight);
+    return {
+      width: finalWidth,
+      height: finalHeight
+    };
+  };
+}
+function normalizeBackgroundProps(props) {
+  const bgProps = props;
+  const hasBackground = bgProps.backgroundColor !== void 0;
+  const hasBorder = bgProps.borderColor !== void 0;
+  if (!hasBackground && !hasBorder) {
+    return props;
+  }
+  const normalized = { ...props };
+  if (hasBackground && bgProps.backgroundAlpha === void 0) {
+    normalized.backgroundAlpha = 1;
+  }
+  if (hasBorder) {
+    if (bgProps.borderWidth === void 0 || bgProps.borderWidth === 0) {
+      normalized.borderWidth = 1;
+    }
+    if (bgProps.borderAlpha === void 0 || bgProps.borderAlpha === 0) {
+      normalized.borderAlpha = 1;
+    }
+  }
+  return normalized;
+}
+const viewCreator = (scene, props) => {
+  if (props.backgroundColor !== void 0 || props.cornerRadius !== void 0) {
+    DebugLogger.log("theme", "View Creator - Props received:", {
+      backgroundColor: props.backgroundColor,
+      cornerRadius: props.cornerRadius,
+      width: props.width,
+      height: props.height
+    });
+  }
+  const normalizedProps = normalizeBackgroundProps(props);
+  const container = scene.add.container(normalizedProps.x ?? 0, normalizedProps.y ?? 0);
+  createTransform(container, normalizedProps);
+  createPhaser(container, normalizedProps);
+  createBackground(
+    scene,
+    container,
+    normalizedProps
+  );
+  createLayout(container, normalizedProps);
+  if (normalizedProps.onTooltip) {
+    const handlers = applyTooltip(
+      scene,
+      container,
+      normalizedProps.onTooltip,
+      normalizedProps.onHoverStart,
+      normalizedProps.onHoverEnd
+    );
+    normalizedProps.onHoverStart = handlers.onHoverStart;
+    normalizedProps.onHoverEnd = handlers.onHoverEnd;
+  }
+  createGestures(scene, container, normalizedProps);
+  DebugLogger.log(
+    "layout",
+    "View creator storing __layoutProps with padding:",
+    normalizedProps.padding
+  );
+  return container;
+};
+const viewPatcher = (node, prev, next) => {
+  const normalizedPrev = normalizeBackgroundProps(prev);
+  const normalizedNext = normalizeBackgroundProps(next);
+  applyTransformProps(node, normalizedPrev, normalizedNext);
+  applyPhaserProps(node, normalizedPrev, normalizedNext);
+  const container = node;
+  applyBackgroundProps(container, normalizedPrev, normalizedNext);
+  if (container.scene && container.scene.data) {
+    if (normalizedNext.onTooltip) {
+      const handlers = applyTooltip(
+        container.scene,
+        container,
+        normalizedNext.onTooltip,
+        normalizedNext.onHoverStart,
+        normalizedNext.onHoverEnd
+      );
+      normalizedNext.onHoverStart = handlers.onHoverStart;
+      normalizedNext.onHoverEnd = handlers.onHoverEnd;
+    }
+  }
+  if (container.scene && container.scene.data) {
+    applyGesturesProps(container.scene, container, normalizedPrev, normalizedNext);
+  }
+  applyLayoutProps(container, normalizedPrev, normalizedNext);
+};
+function Sprite(props) {
+  const localTheme = useTheme();
+  const { props: themed, nestedTheme } = getThemedProps("Sprite", localTheme, props);
+  return /* @__PURE__ */ jsx("sprite", { ...themed, theme: nestedTheme });
+}
+function TileSprite(props) {
+  const localTheme = useTheme();
+  const { props: themed, nestedTheme } = getThemedProps("TileSprite", localTheme, props);
+  return /* @__PURE__ */ jsx("tilesprite", { ...themed, theme: nestedTheme });
+}
+function registerBuiltins() {
+  register("view", { create: viewCreator, patch: viewPatcher });
+  register("text", { create: textCreator, patch: textPatcher });
+  register("nineslice", { create: nineSliceCreator, patch: nineSlicePatcher });
+  register("particles", { create: particlesCreator, patch: particlesPatcher });
+  register("sprite", { create: spriteCreator, patch: spritePatcher });
+  register("image", { create: imageCreator, patch: imagePatcher });
+  register("graphics", { create: graphicsCreator, patch: graphicsPatcher });
+  register("tilesprite", { create: tileSpriteCreator, patch: tileSpritePatcher });
+  register("View", { create: viewCreator, patch: viewPatcher });
+  register("Text", { create: textCreator, patch: textPatcher });
+  register("NineSlice", { create: nineSliceCreator, patch: nineSlicePatcher });
+  register("Particles", { create: particlesCreator, patch: particlesPatcher });
+  register("Sprite", { create: spriteCreator, patch: spritePatcher });
+  register("Image", { create: imageCreator, patch: imagePatcher });
+  register("Graphics", { create: graphicsCreator, patch: graphicsPatcher });
+  register("TileSprite", { create: tileSpriteCreator, patch: tileSpritePatcher });
+}
+const createCameraShakeFX = (camera, config) => {
+  const duration = config.duration ?? 250;
+  const intensity = typeof config.intensity === "object" ? new Phaser$1.Math.Vector2(config.intensity.x, config.intensity.y) : config.intensity ?? 0.01;
+  camera.shake(duration, intensity, config.force ?? false, config.onComplete);
+};
+const createCameraFlashFX = (camera, config) => {
+  const duration = config.duration ?? 200;
+  const red = config.red ?? 255;
+  const green = config.green ?? 255;
+  const blue = config.blue ?? 255;
+  camera.flash(duration, red, green, blue, config.force ?? false, config.onComplete);
+};
+const createCameraFadeInFX = (camera, config) => {
+  const duration = config.duration ?? 300;
+  const red = config.red ?? 0;
+  const green = config.green ?? 0;
+  const blue = config.blue ?? 0;
+  camera.fadeIn(duration, red, green, blue, config.onComplete);
+};
+const createCameraFadeOutFX = (camera, config) => {
+  const duration = config.duration ?? 300;
+  const red = config.red ?? 0;
+  const green = config.green ?? 0;
+  const blue = config.blue ?? 0;
+  camera.fadeOut(duration, red, green, blue, config.onComplete);
+};
+const createCameraZoomFX = (camera, config) => {
+  const duration = config.duration ?? 250;
+  const targetZoom = config.zoom ?? camera.zoom * 1.1;
+  camera.zoomTo(targetZoom, duration, config.ease, config.force ?? false, config.onComplete);
+};
+function useCameraFX(cameraRef, options = {}) {
+  const scene = useScene();
+  const activeFxRef = useRef(/* @__PURE__ */ new Set());
+  const baseZoomRef = useRef(null);
+  const getCamera = useCallback(() => {
+    return cameraRef?.current ?? scene.cameras.main;
+  }, [cameraRef, scene]);
+  const applyCameraFX = useCallback(
+    (fx, config) => {
+      const camera = getCamera();
+      if (!camera) {
+        console.warn("[useCameraFX] No camera available");
+        return;
+      }
+      if (baseZoomRef.current === null) {
+        baseZoomRef.current = camera.zoom;
+      }
+      const cleanup = fx(camera, config);
+      if (typeof cleanup === "function") {
+        activeFxRef.current.add(cleanup);
+      }
+    },
+    [getCamera]
+  );
+  const clearCameraFX = useCallback(() => {
+    const camera = getCamera();
+    activeFxRef.current.forEach((cleanup) => cleanup());
+    activeFxRef.current.clear();
+    if (!camera) return;
+    const cameraWithStops = camera;
+    if (typeof cameraWithStops.stopShake === "function") cameraWithStops.stopShake();
+    if (typeof cameraWithStops.stopFlash === "function") cameraWithStops.stopFlash();
+    if (typeof cameraWithStops.stopFade === "function") cameraWithStops.stopFade();
+    if (options.resetZoomOnClear !== false && baseZoomRef.current !== null) {
+      camera.setZoom(baseZoomRef.current);
+    }
+  }, [getCamera, options.resetZoomOnClear]);
+  useEffect(() => {
+    return () => clearCameraFX();
+  }, [clearCameraFX]);
+  return { applyCameraFX, clearCameraFX };
+}
+function useScreenShake(config = {}, cameraRef) {
+  const { applyCameraFX, clearCameraFX } = useCameraFX(cameraRef);
+  useEffect(() => {
+    applyCameraFX(createCameraShakeFX, config);
+    return () => clearCameraFX();
+  }, [applyCameraFX, clearCameraFX, config]);
+  return { clearCameraFX };
+}
+function useCameraFlash(config = {}, cameraRef) {
+  const { applyCameraFX, clearCameraFX } = useCameraFX(cameraRef);
+  useEffect(() => {
+    applyCameraFX(createCameraFlashFX, config);
+    return () => clearCameraFX();
+  }, [applyCameraFX, clearCameraFX, config]);
+  return { clearCameraFX };
+}
+function useCameraFade(config = {}, cameraRef) {
+  const { applyCameraFX, clearCameraFX } = useCameraFX(cameraRef);
+  useEffect(() => {
+    const fx = config.direction === "in" ? createCameraFadeInFX : createCameraFadeOutFX;
+    applyCameraFX(fx, config);
+    return () => clearCameraFX();
+  }, [applyCameraFX, clearCameraFX, config]);
+  return { clearCameraFX };
+}
+function useCameraZoom(config = {}, cameraRef) {
+  const { applyCameraFX, clearCameraFX } = useCameraFX(cameraRef);
+  useEffect(() => {
+    applyCameraFX(createCameraZoomFX, config);
+    return () => clearCameraFX();
+  }, [applyCameraFX, clearCameraFX, config]);
+  return { clearCameraFX };
+}
+const CAMERA_FX_REGISTRY = {
+  shake: createCameraShakeFX,
+  flash: createCameraFlashFX,
+  fadeIn: createCameraFadeInFX,
+  fadeOut: createCameraFadeOutFX,
+  zoom: createCameraZoomFX
+};
+const DEFAULT_CAMERA_FX = {
+  fx: "shake",
+  fxConfig: { duration: 200, force: false }
+};
+function applyCameraFXByName(applyCameraFX, fxName, fxConfig) {
+  const name = fxName ?? DEFAULT_CAMERA_FX.fx;
+  const config = fxConfig ?? DEFAULT_CAMERA_FX.fxConfig;
+  const fx = CAMERA_FX_REGISTRY[name];
+  if (fx) {
+    applyCameraFX(fx, config);
+    return true;
+  }
+  return false;
+}
+function resolveCameraFX(props) {
+  return {
+    fx: props?.fx ?? DEFAULT_CAMERA_FX.fx,
+    fxConfig: props?.fxConfig ?? DEFAULT_CAMERA_FX.fxConfig
+  };
+}
 function useFX(ref) {
   const activeEffectsRef = useRef(/* @__PURE__ */ new Set());
   useEffect(() => {
@@ -220,6 +2096,221 @@ function noMemo(vnode) {
 function memo(vnode) {
   return setMemoSafe(vnode, true);
 }
+function useParticles(ref) {
+  const getManager = useCallback(() => ref.current ?? null, [ref]);
+  const getEmitter = useCallback(() => {
+    const current = ref.current;
+    if (!current) return null;
+    if (isParticleEmitter(current)) return current;
+    return getFirstEmitter(current);
+  }, [ref]);
+  const start = useCallback(() => {
+    const emitter = getEmitter();
+    emitter?.start();
+  }, [getEmitter]);
+  const stop = useCallback(() => {
+    const emitter = getEmitter();
+    emitter?.stop();
+  }, [getEmitter]);
+  const explode = useCallback(
+    (count, x, y) => {
+      const emitter = getEmitter();
+      emitter?.explode(count, x, y);
+    },
+    [getEmitter]
+  );
+  const setConfig = useCallback(
+    (config) => {
+      const emitter = getEmitter();
+      applyEmitterConfig(emitter, config);
+    },
+    [getEmitter]
+  );
+  const setEmitZone = useCallback(
+    (zone, width, height) => {
+      const emitter = getEmitter();
+      const emitZone = buildEmitZoneFromLayout(zone, width, height);
+      applyEmitZone(emitter, emitZone);
+    },
+    [getEmitter]
+  );
+  const setExcludeZones = useCallback(
+    (zones, width, height) => {
+      const emitter = getEmitter();
+      const deathZones = buildDeathZonesFromLayout(zones, width, height);
+      applyDeathZone(emitter, deathZones);
+    },
+    [getEmitter]
+  );
+  return {
+    getManager,
+    getEmitter,
+    start,
+    stop,
+    explode,
+    setConfig,
+    setEmitZone,
+    setExcludeZones
+  };
+}
+function createPhaserJSXPlugin(config) {
+  return {
+    key: "PhaserJSX",
+    plugin: PhaserJSXPlugin,
+    start: true,
+    data: config
+  };
+}
+class PhaserJSXPlugin extends Phaser$1.Plugins.BasePlugin {
+  config;
+  mountHandle;
+  container;
+  targetScene;
+  /**
+   * Constructor - receives plugin manager and optional mapping
+   */
+  constructor(pluginManager) {
+    super(pluginManager);
+  }
+  /**
+   * Init lifecycle - called first with config data
+   */
+  init(data) {
+    if (data) {
+      this.config = { ...data };
+    }
+  }
+  /**
+   * Start lifecycle - called when plugin should start
+   */
+  start() {
+    this.game.events.on("ready", this.onGameReady, this);
+  }
+  /**
+   * Game ready handler - scene system is now initialized
+   */
+  onGameReady() {
+    const scenes = this.game.scene.scenes;
+    if (scenes.length > 0) {
+      const targetScene = scenes[0];
+      if (!targetScene) return;
+      this.targetScene = targetScene;
+      targetScene.events.once("create", this.onSceneCreate, this);
+      if (targetScene.scene.isActive()) {
+        this.onSceneCreate();
+      }
+    } else {
+      console.warn("[PhaserJSX Plugin] No scenes found to mount JSX");
+    }
+  }
+  /**
+   * Scene create handler - auto-mount JSX
+   */
+  onSceneCreate() {
+    const shouldAutoMount = this.config?.autoMount !== false;
+    if (shouldAutoMount && this.config?.component) {
+      this.mount();
+      if (this.config?.autoResize !== false) {
+        this.setupResizeHandler();
+      }
+    } else {
+      console.warn("[PhaserJSX Plugin] Auto-mount disabled or no component configured");
+    }
+  }
+  /**
+   * Setup resize event handler
+   */
+  setupResizeHandler() {
+    if (!this.targetScene) return;
+    this.targetScene.scale.on("resize", this.onResize, this);
+  }
+  /**
+   * Handle scene resize - update component props
+   */
+  onResize(gameSize) {
+    if (!this.mountHandle || !this.config?.component || !this.container) return;
+    const props = this.config.props || {};
+    const width = props.width ?? gameSize.width;
+    const height = props.height ?? gameSize.height;
+    this.mountHandle = mountJSX(this.container, this.config.component, {
+      ...props,
+      width,
+      height
+    });
+  }
+  /**
+   * Configure plugin
+   * Can be called from scene to set up component dynamically
+   */
+  configure(component, props) {
+    const newConfig = {
+      component
+    };
+    if (props !== void 0) {
+      newConfig.props = props;
+    }
+    this.config = {
+      ...this.config,
+      ...newConfig
+    };
+  }
+  /**
+   * Mount JSX component
+   */
+  mount() {
+    if (!this.targetScene) {
+      console.warn("[PhaserJSX Plugin] No scene available for mounting");
+      return;
+    }
+    if (!this.config?.component) {
+      console.warn("[PhaserJSX Plugin] No component configured for mounting");
+      return;
+    }
+    if (!this.container) {
+      const containerConfig = this.config.container || {};
+      this.container = this.targetScene.add.container(
+        containerConfig.x ?? 0,
+        containerConfig.y ?? 0
+      );
+      this.container.setDepth(containerConfig.depth ?? 100);
+    }
+    const props = this.config.props || {};
+    const width = props.width ?? this.targetScene.scale.width;
+    const height = props.height ?? this.targetScene.scale.height;
+    this.mountHandle = mountJSX(this.container, this.config.component, {
+      ...props,
+      width,
+      height
+    });
+  }
+  /**
+   * Unmount JSX component
+   */
+  unmount() {
+    if (this.mountHandle) {
+      this.mountHandle.unmount();
+      this.mountHandle = void 0;
+    }
+  }
+  /**
+   * Destroy lifecycle - cleanup
+   */
+  destroy() {
+    this.unmount();
+    if (this.container) {
+      this.container.destroy();
+      this.container = void 0;
+    }
+    this.game.events.off("ready", this.onGameReady, this);
+    if (this.targetScene) {
+      this.targetScene.events.off("create", this.onSceneCreate, this);
+      this.targetScene.scale.off("resize", this.onResize, this);
+    }
+    this.targetScene = void 0;
+    this.config = void 0;
+    super.destroy();
+  }
+}
 function useColorMode() {
   const [colorMode, setColorModeState] = useState(themeRegistry.getColorMode());
   useEffect(() => {
@@ -315,7 +2406,7 @@ function setColorPreset(presetName, colorMode) {
     return;
   }
   setTimeout(() => {
-    import("./TransformOriginView-CzVjS16F.js").then((n2) => n2.bD).then(({ remountAll }) => {
+    import("./TransformOriginView-DCvId72M.js").then((n2) => n2.bK).then(({ remountAll }) => {
       remountAll();
     });
   }, 0);
@@ -395,193 +2486,235 @@ export {
   A as Accordion,
   a as AlertDialog,
   B as Button,
+  CAMERA_FX_REGISTRY,
   C as CharText,
   b as CharTextInput,
-  $ as DEFAULT_EFFECT,
+  DEFAULT_CAMERA_FX,
+  ae as DEFAULT_EFFECT,
   DEFAULT_FX,
-  bc as DEFAULT_SPRING_CONFIG,
-  K as DOMInputElement,
-  V as DebugLogger,
-  X as DevConfig,
-  Y as DevPresets,
+  bj as DEFAULT_SPRING_CONFIG,
+  a6 as DOMInputElement,
+  DebugLogger,
+  aa as DevConfig,
+  ab as DevPresets,
   D as Dialog,
   c as Divider,
   d as Dropdown,
-  a0 as EFFECT_REGISTRY,
+  af as EFFECT_REGISTRY,
   FX_REGISTRY,
   Fragment,
-  aS as Graphics,
-  bh as HexColor,
+  bc as Graphics,
+  bo as HexColor,
   I as Icon,
   f as Image,
-  L as KeyboardInputManager,
+  J as Joystick,
+  a7 as KeyboardInputManager,
   M as Modal,
   N as NineSlice,
   g as NineSliceButton,
-  P as Portal,
+  PARTICLE_PRESET_REGISTRY,
+  P as Particles,
+  PhaserJSXPlugin,
+  h as Portal,
   R as RadioButton,
-  h as RadioGroup,
-  m as RangeSlider,
-  i as RefOriginView,
-  bd as SPRING_PRESETS,
+  i as RadioGroup,
+  n as RangeSlider,
+  j as RefOriginView,
+  bk as SPRING_PRESETS,
   S as ScrollSlider,
-  k as ScrollView,
-  l as Sidebar,
-  n as Slider,
-  be as SpringPhysics,
-  aR as Sprite,
-  aU as Text,
-  aT as TileSprite,
-  T as Toggle,
-  o as TransformOriginView,
-  aV as View,
+  l as ScrollView,
+  m as Sidebar,
+  o as Slider,
+  bl as SpringPhysics,
+  Sprite,
+  T as Tab,
+  p as TabPanel,
+  q as Tabs,
+  bd as Text,
+  TileSprite,
+  r as Toggle,
+  s as TransformOriginView,
+  be as View,
   W as WrapText,
   alpha,
-  b9 as animatedSignal,
-  bu as applyDarkMode,
-  a1 as applyEffectByName,
+  bg as animatedSignal,
+  applyCameraFXByName,
+  bB as applyDarkMode,
+  ag as applyEffectByName,
   applyFXByName,
-  bv as applyLightMode,
-  j as calculateSliderSize,
+  bC as applyLightMode,
+  buildDeathZonesFromLayout,
+  buildEmitZone,
+  buildEmitZoneFromLayout,
+  k as calculateSliderSize,
   colorsToTheme,
   computed,
   createBlurFX,
-  a3 as createBounceEffect,
-  a4 as createBreatheEffect,
+  ai as createBounceEffect,
+  aj as createBreatheEffect,
+  createCameraFadeInFX,
+  createCameraFadeOutFX,
+  createCameraFlashFX,
+  createCameraShakeFX,
+  createCameraZoomFX,
   createColorMatrixFX,
-  aG as createDefaultTheme,
-  aM as createElement,
-  a5 as createFadeEffect,
-  a6 as createFlashEffect,
-  a7 as createFlipInEffect,
-  a8 as createFlipOutEffect,
-  a9 as createFloatEffect,
+  b1 as createDefaultTheme,
+  b7 as createElement,
+  ak as createFadeEffect,
+  al as createFlashEffect,
+  am as createFlipInEffect,
+  an as createFlipOutEffect,
+  ao as createFloatEffect,
   createGlowFX,
   e as createIconComponent,
-  aa as createJelloEffect,
-  ab as createNoneEffect,
+  ap as createJelloEffect,
+  aq as createNoneEffect,
+  createPhaserJSXPlugin,
   createPixelateFX,
-  ac as createPressEffect,
-  ad as createPulseEffect,
+  ar as createPressEffect,
+  as as createPulseEffect,
   createShadowFX,
-  ae as createShakeEffect,
-  af as createSlideInEffect,
-  ag as createSlideOutEffect,
-  ah as createSpinEffect,
-  ai as createSwingEffect,
-  aj as createTadaEffect,
-  br as createTextStyle,
+  at as createShakeEffect,
+  au as createSlideInEffect,
+  av as createSlideOutEffect,
+  aw as createSpinEffect,
+  ax as createSwingEffect,
+  ay as createTadaEffect,
+  by as createTextStyle,
   createTextStyleTokens,
-  aJ as createTheme,
+  b4 as createTheme,
   createVignetteFX,
-  ak as createWiggleEffect,
-  al as createWobbleEffect,
-  am as createZoomInEffect,
-  an as createZoomOutEffect,
-  bm as darken,
-  bn as darkenHex,
+  az as createWiggleEffect,
+  aA as createWobbleEffect,
+  aB as createZoomInEffect,
+  aC as createZoomOutEffect,
+  bt as darken,
+  bu as darkenHex,
   defaultRadiusTokens,
   defaultSizeTokens,
   defaultSpacingTokens,
-  bC as defaultTextStyleTokens,
-  aH as defaultTheme,
-  ax as disposeCtx,
-  bs as ensureContrast,
-  bw as forestGreenPreset,
-  bx as generateColorScale,
+  bJ as defaultTextStyleTokens,
+  b2 as defaultTheme,
+  aV as disposeCtx,
+  bz as ensureContrast,
+  bD as forestGreenPreset,
+  bE as generateColorScale,
   getAvailablePresets,
   getBackgroundColor,
+  aL as getBackgroundGraphics,
   getBorderColor,
-  bt as getContrastRatio,
-  ao as getCurrent,
+  bA as getContrastRatio,
+  aD as getCurrent,
   getCurrentPreset,
-  by as getPreset,
+  aK as getLayoutProps,
+  aN as getLayoutRect,
+  aI as getLayoutSize,
+  a8 as getMountStats,
+  bF as getPreset,
   getPresetWithMode,
-  U as getRenderContext,
+  a9 as getRenderContext,
   getSurfaceColor,
   getTextColor,
-  aK as getThemedProps,
-  b4 as graphicsCreator,
-  b5 as graphicsPatcher,
-  bo as hex,
-  bi as hexToNumber,
-  aF as host,
-  b2 as imageCreator,
-  b3 as imagePatcher,
-  ba as isAnimatedSignal,
+  getThemedProps,
+  aP as getWorldLayoutRect,
+  graphicsCreator,
+  graphicsPatcher,
+  bv as hex,
+  bp as hexToNumber,
+  b0 as host,
+  imageCreator,
+  imagePatcher,
+  bh as isAnimatedSignal,
   jsx,
   jsxs,
-  bp as lighten,
-  bq as lightenHex,
+  bw as lighten,
+  bx as lightenHex,
   memo,
-  aI as mergeThemes,
-  bz as midnightPreset,
-  aN as mount,
-  O as mountComponent,
-  O2 as mountJSX,
-  a_ as nineSliceCreator,
-  a$ as nineSlicePatcher,
+  b3 as mergeThemes,
+  bG as midnightPreset,
+  b8 as mount,
+  mountJSX as mountComponent,
+  mountJSX,
+  nineSliceCreator,
+  nineSlicePatcher,
   noMemo,
-  aD as nodeRegistry,
-  G as normalizeCornerRadius,
-  H as normalizeEdgeInsets,
-  J as normalizeGap,
-  bj as numberToHex,
-  bk as numberToRgb,
-  bA as oceanBluePreset,
-  aP as patchVNode,
-  b8 as portalRegistry,
-  bB as presets,
-  aE as register,
+  a$ as nodeRegistry,
+  a4 as normalizeCornerRadius,
+  a5 as normalizeEdgeInsets,
+  normalizeGap,
+  b6 as normalizeVNodeLike,
+  bq as numberToHex,
+  br as numberToRgb,
+  bH as oceanBluePreset,
+  particlesCreator,
+  particlesPatcher,
+  ba as patchVNode,
+  bf as portalRegistry,
+  bI as presets,
+  register,
   registerBuiltins,
-  aA as releaseAllSVGTextures,
-  ay as releaseSVGTexture,
-  az as releaseSVGTextures,
-  aL as remountAll,
-  a2 as resolveEffect,
+  aY as releaseAllSVGTextures,
+  aW as releaseSVGTexture,
+  aX as releaseSVGTextures,
+  b5 as remountAll,
+  resolveCameraFX,
+  ah as resolveEffect,
   resolveFX,
-  bl as rgbToNumber,
+  resolveParticlePreset,
+  bs as rgbToNumber,
   setColorMode,
   setColorPreset,
-  au as shallowEqual,
-  av as shouldComponentUpdate,
-  b0 as spriteCreator,
-  b1 as spritePatcher,
-  Z as svgToTexture,
-  aW as textCreator,
-  aX as textPatcher,
+  aS as shallowEqual,
+  aT as shouldComponentUpdate,
+  spriteCreator,
+  spritePatcher,
+  ac as svgToTexture,
+  textCreator,
+  textPatcher,
   themeRegistry,
-  b6 as tileSpriteCreator,
-  b7 as tileSpritePatcher,
-  aO as unmount,
-  aQ as unmountJSX,
-  bb as unwrapSignal,
+  tileSpriteCreator,
+  tileSpritePatcher,
+  b9 as unmount,
+  bb as unmountJSX,
+  bi as unwrapSignal,
+  aM as useBackgroundGraphics,
   useBlur,
-  as as useCallback,
+  useCallback,
+  useCameraFX,
+  useCameraFade,
+  useCameraFlash,
+  useCameraZoom,
   useColorMode,
   useColors,
   useEffect,
   useFX,
-  aq as useForceRedraw,
-  _ as useGameObjectEffect,
+  aF as useForceRedraw,
+  ad as useGameObjectEffect,
   useGlow,
   u as useIconPreload,
-  ar as useMemo,
-  aw as useRedraw,
+  aR as useLayoutEffect,
+  aO as useLayoutRect,
+  aJ as useLayoutSize,
+  aG as useMemo,
+  useParticles,
+  aU as useRedraw,
   useRef,
-  aB as useSVGTexture,
-  aC as useSVGTextures,
-  at as useScene,
+  aZ as useSVGTexture,
+  a_ as useSVGTextures,
+  useScene,
+  useScreenShake,
   useShadow,
-  bf as useSpring,
-  bg as useSprings,
+  bm as useSpring,
+  bn as useSprings,
   useState,
   useTheme,
   useThemeSubscription,
   useThemeTokens,
-  aY as viewCreator,
-  aZ as viewPatcher,
-  Q as viewportRegistry,
-  ap as withHooks
+  aH as useViewportSize,
+  aQ as useWorldLayoutRect,
+  viewCreator,
+  viewPatcher,
+  viewportRegistry,
+  aE as withHooks
 };
 //# sourceMappingURL=index.js.map