@number10/phaserjsx 0.3.1 → 0.4.0

package/dist/index.cjs

@@ -1,8 +1,1883 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const vdom = require("./TransformOriginView-KcTgaYRi.cjs");
+const vdom = require("./TransformOriginView-Bx81YEUU.cjs");
+const Phaser$1 = require("phaser");
 const jsxRuntime = require("./jsx-runtime.cjs");
 const signalsCore = require("@preact/signals-core");
+function shallowEqual(a, b) {
+  if (!a || !b) return a === b;
+  if (a.length !== b.length) return false;
+  return a.every((val, i) => val === b[i]);
+}
+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 && !vdom.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 = vdom.viewportRegistry.getViewport();
+    const parsedMaxWidth = vdom.parseSize(next.maxWidth);
+    const resolvedMaxWidth = vdom.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 = vdom.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 = vdom.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 (!vdom.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);
+    vdom.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 = vdom.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 bg = bgColor ?? "#000000dd";
+  let fillColor = 0;
+  let fillAlpha = 0.87;
+  if (typeof bg === "string") {
+    if (bg.startsWith("#")) {
+      const hex = bg.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 = vdom.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 = vdom.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 = vdom.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 = vdom.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 = vdom.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 = vdom.parseSize(props.width);
+    const finalWidth = vdom.resolveSize(parsedWidth, void 0, defaultWidth);
+    const parsedHeight = vdom.parseSize(props.height);
+    const finalHeight = vdom.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) {
+    vdom.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);
+  vdom.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 = vdom.useTheme();
+  const { props: themed, nestedTheme } = vdom.getThemedProps("Sprite", localTheme, props);
+  return /* @__PURE__ */ jsxRuntime.jsx("sprite", { ...themed, theme: nestedTheme });
+}
+function TileSprite(props) {
+  const localTheme = vdom.useTheme();
+  const { props: themed, nestedTheme } = vdom.getThemedProps("TileSprite", localTheme, props);
+  return /* @__PURE__ */ jsxRuntime.jsx("tilesprite", { ...themed, theme: nestedTheme });
+}
+function registerBuiltins() {
+  vdom.register("view", { create: viewCreator, patch: viewPatcher });
+  vdom.register("text", { create: textCreator, patch: textPatcher });
+  vdom.register("nineslice", { create: nineSliceCreator, patch: nineSlicePatcher });
+  vdom.register("particles", { create: particlesCreator, patch: particlesPatcher });
+  vdom.register("sprite", { create: spriteCreator, patch: spritePatcher });
+  vdom.register("image", { create: imageCreator, patch: imagePatcher });
+  vdom.register("graphics", { create: graphicsCreator, patch: graphicsPatcher });
+  vdom.register("tilesprite", { create: tileSpriteCreator, patch: tileSpritePatcher });
+  vdom.register("View", { create: viewCreator, patch: viewPatcher });
+  vdom.register("Text", { create: textCreator, patch: textPatcher });
+  vdom.register("NineSlice", { create: nineSliceCreator, patch: nineSlicePatcher });
+  vdom.register("Particles", { create: particlesCreator, patch: particlesPatcher });
+  vdom.register("Sprite", { create: spriteCreator, patch: spritePatcher });
+  vdom.register("Image", { create: imageCreator, patch: imagePatcher });
+  vdom.register("Graphics", { create: graphicsCreator, patch: graphicsPatcher });
+  vdom.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 = vdom.useScene();
+  const activeFxRef = vdom.useRef(/* @__PURE__ */ new Set());
+  const baseZoomRef = vdom.useRef(null);
+  const getCamera = vdom.useCallback(() => {
+    return cameraRef?.current ?? scene.cameras.main;
+  }, [cameraRef, scene]);
+  const applyCameraFX = vdom.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 = vdom.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]);
+  vdom.useEffect(() => {
+    return () => clearCameraFX();
+  }, [clearCameraFX]);
+  return { applyCameraFX, clearCameraFX };
+}
+function useScreenShake(config = {}, cameraRef) {
+  const { applyCameraFX, clearCameraFX } = useCameraFX(cameraRef);
+  vdom.useEffect(() => {
+    applyCameraFX(createCameraShakeFX, config);
+    return () => clearCameraFX();
+  }, [applyCameraFX, clearCameraFX, config]);
+  return { clearCameraFX };
+}
+function useCameraFlash(config = {}, cameraRef) {
+  const { applyCameraFX, clearCameraFX } = useCameraFX(cameraRef);
+  vdom.useEffect(() => {
+    applyCameraFX(createCameraFlashFX, config);
+    return () => clearCameraFX();
+  }, [applyCameraFX, clearCameraFX, config]);
+  return { clearCameraFX };
+}
+function useCameraFade(config = {}, cameraRef) {
+  const { applyCameraFX, clearCameraFX } = useCameraFX(cameraRef);
+  vdom.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);
+  vdom.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 = vdom.useRef(/* @__PURE__ */ new Set());
   vdom.useEffect(() => {
@@ -221,6 +2096,221 @@ function noMemo(vnode) {
 function memo(vnode) {
   return setMemoSafe(vnode, true);
 }
+function useParticles(ref) {
+  const getManager = vdom.useCallback(() => ref.current ?? null, [ref]);
+  const getEmitter = vdom.useCallback(() => {
+    const current = ref.current;
+    if (!current) return null;
+    if (isParticleEmitter(current)) return current;
+    return getFirstEmitter(current);
+  }, [ref]);
+  const start = vdom.useCallback(() => {
+    const emitter = getEmitter();
+    emitter?.start();
+  }, [getEmitter]);
+  const stop = vdom.useCallback(() => {
+    const emitter = getEmitter();
+    emitter?.stop();
+  }, [getEmitter]);
+  const explode = vdom.useCallback(
+    (count, x, y) => {
+      const emitter = getEmitter();
+      emitter?.explode(count, x, y);
+    },
+    [getEmitter]
+  );
+  const setConfig = vdom.useCallback(
+    (config) => {
+      const emitter = getEmitter();
+      applyEmitterConfig(emitter, config);
+    },
+    [getEmitter]
+  );
+  const setEmitZone = vdom.useCallback(
+    (zone, width, height) => {
+      const emitter = getEmitter();
+      const emitZone = buildEmitZoneFromLayout(zone, width, height);
+      applyEmitZone(emitter, emitZone);
+    },
+    [getEmitter]
+  );
+  const setExcludeZones = vdom.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 = vdom.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 = vdom.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] = vdom.useState(vdom.themeRegistry.getColorMode());
   vdom.useEffect(() => {
@@ -316,7 +2406,7 @@ function setColorPreset(presetName, colorMode) {
     return;
   }
   setTimeout(() => {
-    Promise.resolve().then(() => require("./TransformOriginView-KcTgaYRi.cjs")).then((n) => n.vdom).then(({ remountAll }) => {
+    Promise.resolve().then(() => require("./TransformOriginView-Bx81YEUU.cjs")).then((n) => n.vdom).then(({ remountAll }) => {
       remountAll();
     });
   }, 0);
@@ -391,7 +2481,7 @@ function useThemeTokens() {
   }, [localTheme]);
   return tokens;
 }
-vdom.registerBuiltins();
+registerBuiltins();
 exports.Accordion = vdom.Accordion;
 exports.AlertDialog = vdom.AlertDialog;
 exports.Button = vdom.Button;
@@ -411,10 +2501,12 @@ exports.Graphics = vdom.Graphics;
 exports.HexColor = vdom.HexColor;
 exports.Icon = vdom.Icon;
 exports.Image = vdom.Image;
+exports.Joystick = vdom.Joystick;
 exports.KeyboardInputManager = vdom.KeyboardInputManager;
 exports.Modal = vdom.Modal;
 exports.NineSlice = vdom.NineSlice;
 exports.NineSliceButton = vdom.NineSliceButton;
+exports.Particles = vdom.Particles;
 exports.Portal = vdom.Portal;
 exports.RadioButton = vdom.RadioButton;
 exports.RadioGroup = vdom.RadioGroup;
@@ -426,9 +2518,10 @@ exports.ScrollView = vdom.ScrollView;
 exports.Sidebar = vdom.Sidebar;
 exports.Slider = vdom.Slider;
 exports.SpringPhysics = vdom.SpringPhysics;
-exports.Sprite = vdom.Sprite;
+exports.Tab = vdom.Tab;
+exports.TabPanel = vdom.TabPanel;
+exports.Tabs = vdom.Tabs;
 exports.Text = vdom.Text;
-exports.TileSprite = vdom.TileSprite;
 exports.Toggle = vdom.Toggle;
 exports.TransformOriginView = vdom.TransformOriginView;
 exports.View = vdom.View;
@@ -477,19 +2570,21 @@ exports.disposeCtx = vdom.disposeCtx;
 exports.ensureContrast = vdom.ensureContrast;
 exports.forestGreenPreset = vdom.forestGreenPreset;
 exports.generateColorScale = vdom.generateColorScale;
+exports.getBackgroundGraphics = vdom.getBackgroundGraphics;
 exports.getContrastRatio = vdom.getContrastRatio;
 exports.getCurrent = vdom.getCurrent;
+exports.getLayoutProps = vdom.getLayoutProps;
+exports.getLayoutRect = vdom.getLayoutRect;
+exports.getLayoutSize = vdom.getLayoutSize;
+exports.getMountStats = vdom.getMountStats;
 exports.getPreset = vdom.getPreset;
 exports.getPresetWithMode = vdom.getPresetWithMode;
 exports.getRenderContext = vdom.getRenderContext;
 exports.getThemedProps = vdom.getThemedProps;
-exports.graphicsCreator = vdom.graphicsCreator;
-exports.graphicsPatcher = vdom.graphicsPatcher;
+exports.getWorldLayoutRect = vdom.getWorldLayoutRect;
 exports.hex = vdom.hex;
 exports.hexToNumber = vdom.hexToNumber;
 exports.host = vdom.host;
-exports.imageCreator = vdom.imageCreator;
-exports.imagePatcher = vdom.imagePatcher;
 exports.isAnimatedSignal = vdom.isAnimatedSignal;
 exports.lighten = vdom.lighten;
 exports.lightenHex = vdom.lightenHex;
@@ -498,12 +2593,11 @@ exports.midnightPreset = vdom.midnightPreset;
 exports.mount = vdom.mount;
 exports.mountComponent = vdom.mountJSX;
 exports.mountJSX = vdom.mountJSX;
-exports.nineSliceCreator = vdom.nineSliceCreator;
-exports.nineSlicePatcher = vdom.nineSlicePatcher;
 exports.nodeRegistry = vdom.nodeRegistry;
 exports.normalizeCornerRadius = vdom.normalizeCornerRadius;
 exports.normalizeEdgeInsets = vdom.normalizeEdgeInsets;
 exports.normalizeGap = vdom.normalizeGap;
+exports.normalizeVNodeLike = vdom.normalizeVNodeLike;
 exports.numberToHex = vdom.numberToHex;
 exports.numberToRgb = vdom.numberToRgb;
 exports.oceanBluePreset = vdom.oceanBluePreset;
@@ -511,7 +2605,6 @@ exports.patchVNode = vdom.patchVNode;
 exports.portalRegistry = vdom.portalRegistry;
 exports.presets = vdom.presets;
 exports.register = vdom.register;
-exports.registerBuiltins = vdom.registerBuiltins;
 exports.releaseAllSVGTextures = vdom.releaseAllSVGTextures;
 exports.releaseSVGTexture = vdom.releaseSVGTexture;
 exports.releaseSVGTextures = vdom.releaseSVGTextures;
@@ -520,22 +2613,20 @@ exports.resolveEffect = vdom.resolveEffect;
 exports.rgbToNumber = vdom.rgbToNumber;
 exports.shallowEqual = vdom.shallowEqual;
 exports.shouldComponentUpdate = vdom.shouldComponentUpdate;
-exports.spriteCreator = vdom.spriteCreator;
-exports.spritePatcher = vdom.spritePatcher;
 exports.svgToTexture = vdom.svgToTexture;
-exports.textCreator = vdom.textCreator;
-exports.textPatcher = vdom.textPatcher;
 exports.themeRegistry = vdom.themeRegistry;
-exports.tileSpriteCreator = vdom.tileSpriteCreator;
-exports.tileSpritePatcher = vdom.tileSpritePatcher;
 exports.unmount = vdom.unmount;
 exports.unmountJSX = vdom.unmountJSX;
 exports.unwrapSignal = vdom.unwrapSignal;
+exports.useBackgroundGraphics = vdom.useBackgroundGraphics;
 exports.useCallback = vdom.useCallback;
 exports.useEffect = vdom.useEffect;
 exports.useForceRedraw = vdom.useForceRedraw;
 exports.useGameObjectEffect = vdom.useGameObjectEffect;
 exports.useIconPreload = vdom.useIconPreload;
+exports.useLayoutEffect = vdom.useLayoutEffect;
+exports.useLayoutRect = vdom.useLayoutRect;
+exports.useLayoutSize = vdom.useLayoutSize;
 exports.useMemo = vdom.useMemo;
 exports.useRedraw = vdom.useRedraw;
 exports.useRef = vdom.useRef;
@@ -546,8 +2637,8 @@ exports.useSpring = vdom.useSpring;
 exports.useSprings = vdom.useSprings;
 exports.useState = vdom.useState;
 exports.useTheme = vdom.useTheme;
-exports.viewCreator = vdom.viewCreator;
-exports.viewPatcher = vdom.viewPatcher;
+exports.useViewportSize = vdom.useViewportSize;
+exports.useWorldLayoutRect = vdom.useWorldLayoutRect;
 exports.viewportRegistry = vdom.viewportRegistry;
 exports.withHooks = vdom.withHooks;
 exports.Fragment = jsxRuntime.Fragment;
@@ -557,13 +2648,29 @@ Object.defineProperty(exports, "computed", {
   enumerable: true,
   get: () => signalsCore.computed
 });
+exports.CAMERA_FX_REGISTRY = CAMERA_FX_REGISTRY;
+exports.DEFAULT_CAMERA_FX = DEFAULT_CAMERA_FX;
 exports.DEFAULT_FX = DEFAULT_FX;
 exports.FX_REGISTRY = FX_REGISTRY;
+exports.PARTICLE_PRESET_REGISTRY = PARTICLE_PRESET_REGISTRY;
+exports.PhaserJSXPlugin = PhaserJSXPlugin;
+exports.Sprite = Sprite;
+exports.TileSprite = TileSprite;
+exports.applyCameraFXByName = applyCameraFXByName;
 exports.applyFXByName = applyFXByName;
+exports.buildDeathZonesFromLayout = buildDeathZonesFromLayout;
+exports.buildEmitZone = buildEmitZone;
+exports.buildEmitZoneFromLayout = buildEmitZoneFromLayout;
 exports.colorsToTheme = colorsToTheme;
 exports.createBlurFX = createBlurFX;
+exports.createCameraFadeInFX = createCameraFadeInFX;
+exports.createCameraFadeOutFX = createCameraFadeOutFX;
+exports.createCameraFlashFX = createCameraFlashFX;
+exports.createCameraShakeFX = createCameraShakeFX;
+exports.createCameraZoomFX = createCameraZoomFX;
 exports.createColorMatrixFX = createColorMatrixFX;
 exports.createGlowFX = createGlowFX;
+exports.createPhaserJSXPlugin = createPhaserJSXPlugin;
 exports.createPixelateFX = createPixelateFX;
 exports.createShadowFX = createShadowFX;
 exports.createVignetteFX = createVignetteFX;
@@ -573,17 +2680,42 @@ exports.getBorderColor = getBorderColor;
 exports.getCurrentPreset = getCurrentPreset;
 exports.getSurfaceColor = getSurfaceColor;
 exports.getTextColor = getTextColor;
+exports.graphicsCreator = graphicsCreator;
+exports.graphicsPatcher = graphicsPatcher;
+exports.imageCreator = imageCreator;
+exports.imagePatcher = imagePatcher;
 exports.memo = memo;
+exports.nineSliceCreator = nineSliceCreator;
+exports.nineSlicePatcher = nineSlicePatcher;
 exports.noMemo = noMemo;
+exports.particlesCreator = particlesCreator;
+exports.particlesPatcher = particlesPatcher;
+exports.registerBuiltins = registerBuiltins;
+exports.resolveCameraFX = resolveCameraFX;
 exports.resolveFX = resolveFX;
+exports.resolveParticlePreset = resolveParticlePreset;
 exports.setColorMode = setColorMode;
 exports.setColorPreset = setColorPreset;
+exports.spriteCreator = spriteCreator;
+exports.spritePatcher = spritePatcher;
+exports.textCreator = textCreator;
+exports.textPatcher = textPatcher;
+exports.tileSpriteCreator = tileSpriteCreator;
+exports.tileSpritePatcher = tileSpritePatcher;
 exports.useBlur = useBlur;
+exports.useCameraFX = useCameraFX;
+exports.useCameraFade = useCameraFade;
+exports.useCameraFlash = useCameraFlash;
+exports.useCameraZoom = useCameraZoom;
 exports.useColorMode = useColorMode;
 exports.useColors = useColors;
 exports.useFX = useFX;
 exports.useGlow = useGlow;
+exports.useParticles = useParticles;
+exports.useScreenShake = useScreenShake;
 exports.useShadow = useShadow;
 exports.useThemeSubscription = useThemeSubscription;
 exports.useThemeTokens = useThemeTokens;
+exports.viewCreator = viewCreator;
+exports.viewPatcher = viewPatcher;
 //# sourceMappingURL=index.cjs.map