@number10/phaserjsx 0.6.0 → 4.0.0

package/dist/index.js

@@ -1,2931 +1,1421 @@
-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 remountAll, a1 as defaultRadiusTokens, a2 as defaultSizeTokens, a3 as defaultSpacingTokens, a4 as createTextStyleTokens } from "./TransformOriginView-uYYqbEHW.js";
-import { A, a, B, C, b, af, bj, a7, ab, ac, D, c, d, ag, bc, bo, I, f, J, a8, M, N, g, P, h, R, i, n, j, bk, S, l, m, o, bl, T, p, q, bd, r, s, be, W, bg, bC, ah, bD, k, aj, ak, b2, b7, al, am, an, ao, ap, e, aq, ar, as, at, au, av, aw, ax, ay, az, bz, b5, aA, aB, aC, aD, bu, bv, bK, b3, aW, bA, bE, bF, aM, bB, aE, aL, aO, aJ, a9, bG, aa, aQ, bw, bp, b1, bh, bx, by, b4, bH, b8, b0, a5, a6, b6, bq, br, bI, ba, bf, bJ, aZ, aX, aY, ai, bs, bt, aT, aU, ad, b9, bb, bi, aN, aG, ae, u, aS, aP, aK, aH, aV, a_, a$, bm, bn, aI, aR, aF } from "./TransformOriginView-uYYqbEHW.js";
+import { $ as RadioButton, $n as textCreator, $t as shouldComponentUpdate, A as computed, An as midnightPreset, At as createTheme, B as DOMInputElement, Bn as hexToNumber, Bt as remountAll, C as CharText, Cn as defaultTextStyleTokens, Cr as graphicsCreator, Ct as createWiggleEffect, D as Modal, Dn as generateColorScale, Dr as register, Dt as useGameObjectEffect, E as Dialog, En as forestGreenPreset, Er as nodeRegistry, Et as createZoomOutEffect, F as SpringPhysics, Fn as darken, Ft as getMountStats, G as useSVGTextures, Gn as rgbToHsl, Gt as disposeCtx, H as releaseSVGTexture, Hn as lightenHex, Ht as unmountJSX, I as animatedSignal, In as darkenHex, It as mount, J as Particles, Jn as normalizeCornerRadius, Jt as getLayoutProps, K as svgToTexture, Kn as rgbToNumber, Kt as getBackgroundGraphics, L as isAnimatedSignal, Ln as ensureContrast, Lt as mountJSX, M as useSprings, Mn as presets, Mt as mergeThemes, N as DEFAULT_SPRING_CONFIG, Nn as alpha, Nt as themeRegistry, O as Portal, On as getPreset, Ot as viewCreator, P as SPRING_PRESETS, Pn as createTextStyle, Pt as createElement, Q as RadioGroup, Qn as tileSpritePatcher, Qt as shallowEqual, R as unwrapSignal, Rn as getContrastRatio, Rt as normalizeVNodeLike, S as CharTextInput, Sn as defaultSpacingTokens, Sr as imagePatcher, St as createTadaEffect, T as WrapText, Tn as applyLightMode, Tr as host, Tt as createZoomInEffect, U as releaseSVGTextures, Un as numberToHex, Ut as portalRegistry, V as releaseAllSVGTextures, Vn as lighten, Vt as unmount, W as useSVGTexture, Wn as numberToRgb, Wt as View, X as Text, Xn as normalizeGap, Xt as getLayoutSize, Y as TileSprite, Yn as normalizeEdgeInsets, Yt as getLayoutRect, Z as Sprite, Zn as tileSpriteCreator, Zt as getWorldLayoutRect, _ as Dropdown, _n as createDefaultTheme, _r as buildEmitZone, _t as createShakeEffect, a as Tabs, an as useLayoutRect, ar as spriteCreator, at as resolveEffect, b as calculateSliderSize, bn as defaultRadiusTokens, br as nineSlicePatcher, bt as createSpinEffect, c as Sidebar, cn as useRedraw, cr as particlesPatcher, ct as createFadeEffect, d as NineSlice, dn as useState, dr as applyEmitterConfig, dt as createFlipOutEffect, en as useBackgroundGraphics, er as textPatcher, et as Graphics, f as Joystick, fn as useTheme, fr as getFirstEmitter, ft as createFloatEffect, g as Image, gn as getRenderContext, gr as buildDeathZonesFromLayout, gt as createPulseEffect, h as useIconPreload, hn as withHooks, hr as resolveParticlePreset, ht as createPressEffect, i as TabPanel, in as useLayoutEffect, ir as DevPresets, it as applyEffectByName, j as useSpring, jn as oceanBluePreset, jt as getThemedProps, k as Accordion, kn as getPresetWithMode, kt as viewPatcher, l as RefOriginView, ln as useRef, lr as applyDeathZone, lt as createFlashEffect, m as createIconComponent, mn as useWorldLayoutRect, mr as PARTICLE_PRESET_REGISTRY, mt as createNoneEffect, n as Toggle, nn as useEffect, nr as DebugLogger, nt as DEFAULT_EFFECT, o as RangeSlider, on as useLayoutSize, or as spritePatcher, ot as createBounceEffect, p as Icon, pn as useViewportSize, pr as isParticleEmitter, pt as createJelloEffect, q as registerBuiltins, qn as HexColor, qt as getCurrent, r as Tab, rn as useForceRedraw, rr as DevConfig, rt as EFFECT_REGISTRY, s as Slider, sn as useMemo, sr as particlesCreator, st as createBreatheEffect, t as TransformOriginView, tn as useCallback, tr as viewportRegistry, tt as Button, u as NineSliceButton, un as useScene, ur as applyEmitZone, ut as createFlipInEffect, v as ScrollView, vn as defaultTheme, vr as buildEmitZoneFromLayout, vt as createSlideInEffect, w as AlertDialog, wn as applyDarkMode, wr as graphicsPatcher, wt as createWobbleEffect, x as Divider, xn as defaultSizeTokens, xr as imageCreator, xt as createSwingEffect, y as ScrollSlider, yn as createTextStyleTokens, yr as nineSliceCreator, yt as createSlideOutEffect, z as KeyboardInputManager, zn as hex, zt as patchVNode } from "./custom-oy3mBnrW.js";
+import { Fragment, jsx, jsxs } from "./jsx-runtime.js";
 import * as Phaser 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;
+//#region src/camera/use-camera-fx.ts
+/**
+* Hook and creators for Phaser camera effects
+*/
+var createCameraShakeFX = (camera, config) => {
+	const duration = config.duration ?? 250;
+	const intensity = typeof config.intensity === "object" ? new Phaser.Math.Vector2(config.intensity.x, config.intensity.y) : config.intensity ?? .01;
+	camera.shake(duration, intensity, config.force ?? false, config.onComplete);
 };
-const graphicsPatcher = (node, prev, next) => {
-  applyTransformProps(node, prev, next);
-  applyPhaserProps(node, prev, next);
-  applyGraphicsProps(node, prev, next);
-  applyGraphicsLayout(node, prev, next);
+var 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);
 };
-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;
+var 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 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);
+var 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);
 };
-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.Geom.Rectangle(baseX, baseY, width ?? 1, height ?? 1);
-    case "circle":
-      return new Phaser.Geom.Circle(baseX, baseY, zone.radius ?? 1);
-    case "ellipse":
-      return new Phaser.Geom.Ellipse(baseX, baseY, width ?? 1, height ?? 1);
-    case "line":
-      return new Phaser.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.game === 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.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.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.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.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);
+var 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 };
+	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 };
+	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 };
+	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 };
+	const { applyCameraFX, clearCameraFX } = useCameraFX(cameraRef);
+	useEffect(() => {
+		applyCameraFX(config.direction === "in" ? createCameraFadeInFX : createCameraFadeOutFX, 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 { applyCameraFX, clearCameraFX } = useCameraFX(cameraRef);
+	useEffect(() => {
+		applyCameraFX(createCameraZoomFX, config);
+		return () => clearCameraFX();
+	}, [
+		applyCameraFX,
+		clearCameraFX,
+		config
+	]);
+	return { clearCameraFX };
+}
+//#endregion
+//#region src/camera/camera-fx-registry.ts
+/**
+* Camera FX registry - string-based lookup with extension support
+*/
+/**
+* Camera FX registry mapping names to FX creators
+*/
+var CAMERA_FX_REGISTRY = {
+	shake: createCameraShakeFX,
+	flash: createCameraFlashFX,
+	fadeIn: createCameraFadeInFX,
+	fadeOut: createCameraFadeOutFX,
+	zoom: createCameraZoomFX
 };
-const DEFAULT_CAMERA_FX = {
-  fx: "shake",
-  fxConfig: { duration: 200, force: false }
+/**
+* Default camera FX definition
+*/
+var DEFAULT_CAMERA_FX = {
+	fx: "shake",
+	fxConfig: {
+		duration: 200,
+		force: false
+	}
 };
+/**
+* Apply a camera FX by name
+*/
 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;
-}
+	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;
+}
+/**
+* Resolve camera FX definition with priority: props > default
+*/
 function resolveCameraFX(props) {
-  return {
-    fx: props?.fx ?? DEFAULT_CAMERA_FX.fx,
-    fxConfig: props?.fxConfig ?? DEFAULT_CAMERA_FX.fxConfig
-  };
-}
+	return {
+		fx: props?.fx ?? DEFAULT_CAMERA_FX.fx,
+		fxConfig: props?.fxConfig ?? DEFAULT_CAMERA_FX.fxConfig
+	};
+}
+//#endregion
+//#region src/fx/use-fx.ts
+/**
+* Hook for applying Phaser PostFX/PreFX pipeline effects
+* Manages FX lifecycle with proper cleanup
+*/
+/**
+* Hook for applying FX to GameObject
+* @param ref - Ref to GameObject
+* @returns Object with applyFX and clearFX methods
+*
+* @example
+* ```tsx
+* const ref = useRef(null)
+* const { applyFX, clearFX } = useFX(ref)
+*
+* const handleClick = () => {
+*   applyFX(createShadowFX, { offsetX: 4, offsetY: 4, blur: 8 })
+* }
+*
+* return <View ref={ref} onClick={handleClick}>Click me</View>
+* ```
+*/
 function useFX(ref) {
-  const activeEffectsRef = useRef(/* @__PURE__ */ new Set());
-  useEffect(() => {
-    return () => {
-      activeEffectsRef.current.forEach((cleanup) => {
-        if (typeof cleanup === "function") {
-          cleanup();
-        } else if (cleanup?.destroy) {
-          cleanup.destroy();
-        }
-      });
-      activeEffectsRef.current.clear();
-    };
-  }, []);
-  const applyFX = (fxCreator, config, type = "post") => {
-    const obj = ref.current;
-    if (!obj) {
-      console.warn("[useFX] No object found in ref");
-      return;
-    }
-    const cleanupOrController = fxCreator(obj, config, type);
-    if (cleanupOrController) {
-      activeEffectsRef.current.add(cleanupOrController);
-    }
-  };
-  const clearFX = () => {
-    activeEffectsRef.current.forEach((cleanup) => {
-      if (typeof cleanup === "function") {
-        cleanup();
-      } else if (cleanup?.destroy) {
-        cleanup.destroy();
-      }
-    });
-    activeEffectsRef.current.clear();
-    const obj = ref.current;
-    if (obj && "postFX" in obj && obj.postFX) {
-      obj.postFX.clear();
-    }
-    if (obj && "preFX" in obj && obj.preFX) {
-      obj.preFX.clear();
-    }
-  };
-  return { applyFX, clearFX };
-}
-const createBlurFX = (obj, config, type = "post") => {
-  const { quality = 0, x = 2, y = 2, strength = 1, color = 16777215, steps = 4 } = config;
-  const pipeline = type === "post" ? obj.postFX : obj.preFX;
-  if (!pipeline) {
-    console.warn("[createBlurFX] FX pipeline not available on this GameObject");
-    return null;
-  }
-  const blur = pipeline.addBlur(quality, x, y, strength, color, steps);
-  return blur;
+	const activeEffectsRef = useRef(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		const obj = ref.current;
+		if (obj && typeof obj.enableFilters === "function") obj.enableFilters();
+	}, []);
+	useEffect(() => {
+		return () => {
+			activeEffectsRef.current.forEach((cleanup) => {
+				if (typeof cleanup === "function") cleanup();
+				else if (cleanup?.destroy) cleanup.destroy();
+			});
+			activeEffectsRef.current.clear();
+		};
+	}, []);
+	const applyFX = (fxCreator, config, type = "internal") => {
+		const obj = ref.current;
+		if (!obj) {
+			console.warn("[useFX] No object found in ref");
+			return;
+		}
+		const cleanupOrController = fxCreator(obj, config, type);
+		if (cleanupOrController) activeEffectsRef.current.add(cleanupOrController);
+	};
+	const clearFX = () => {
+		activeEffectsRef.current.forEach((cleanup) => {
+			if (typeof cleanup === "function") cleanup();
+			else if (cleanup?.destroy) cleanup.destroy();
+		});
+		activeEffectsRef.current.clear();
+		const obj = ref.current;
+		if (obj?.filters) {
+			obj.filters.internal.clear();
+			obj.filters.external.clear();
+		}
+	};
+	return {
+		applyFX,
+		clearFX
+	};
+}
+//#endregion
+//#region src/fx/fx-creators/blur.ts
+/**
+* Create blur FX
+* @param obj - GameObject
+* @param config - Blur configuration
+* @param type - 'post' or 'pre' FX
+* @returns Blur controller
+*
+* @example
+* ```tsx
+* applyFX(createBlurFX, {
+*   quality: 1,
+*   x: 4,
+*   y: 4,
+*   strength: 2
+* })
+* ```
+*/
+var createBlurFX = (obj, config, type = "internal") => {
+	const { quality = 0, x = 2, y = 2, strength = 1, color = 16777215, steps = 4 } = config;
+	obj.enableFilters();
+	const filters = obj.filters;
+	if (!filters) {
+		console.warn("[createBlurFX] Filters not available on this GameObject");
+		return null;
+	}
+	const pipeline = type === "internal" ? filters.internal : filters.external;
+	if (!pipeline) {
+		console.warn("[createBlurFX] FX pipeline not available on this GameObject");
+		return null;
+	}
+	return pipeline.addBlur(quality, x, y, strength, color, steps);
 };
-const createColorMatrixFX = (obj, config, type = "post") => {
-  const { effect = "grayscale", amount = 1 } = config;
-  const pipeline = type === "post" ? obj.postFX : obj.preFX;
-  if (!pipeline) {
-    console.warn("[createColorMatrixFX] FX pipeline not available on this GameObject");
-    return null;
-  }
-  const colorMatrix = pipeline.addColorMatrix();
-  switch (effect) {
-    case "grayscale":
-      colorMatrix.grayscale(amount);
-      break;
-    case "sepia":
-      colorMatrix.sepia();
-      break;
-    case "negative":
-      colorMatrix.negative();
-      break;
-    case "blackWhite":
-      colorMatrix.blackWhite();
-      break;
-    case "brown":
-      colorMatrix.brown();
-      break;
-    case "kodachrome":
-      colorMatrix.kodachrome();
-      break;
-    case "technicolor":
-      colorMatrix.technicolor();
-      break;
-    case "polaroid":
-      colorMatrix.polaroid();
-      break;
-  }
-  return colorMatrix;
+//#endregion
+//#region src/fx/fx-creators/color-matrix.ts
+/**
+* Create color matrix FX
+* @param obj - GameObject
+* @param config - Color matrix configuration
+* @param type - 'post' or 'pre' FX
+* @returns Color matrix controller
+*
+* @example
+* ```tsx
+* applyFX(createColorMatrixFX, {
+*   effect: 'grayscale',
+*   amount: 1
+* })
+* ```
+*/
+var createColorMatrixFX = (obj, config, type = "internal") => {
+	const { effect = "grayscale", amount = 1 } = config;
+	obj.enableFilters();
+	const filters = obj.filters;
+	if (!filters) {
+		console.warn("[createColorMatrixFX] Filters not available on this GameObject");
+		return null;
+	}
+	const pipeline = type === "internal" ? filters.internal : filters.external;
+	if (!pipeline) {
+		console.warn("[createColorMatrixFX] FX pipeline not available on this GameObject");
+		return null;
+	}
+	const colorMatrixFilter = pipeline.addColorMatrix();
+	const cm = colorMatrixFilter.colorMatrix;
+	switch (effect) {
+		case "grayscale":
+			cm.grayscale(amount);
+			break;
+		case "sepia":
+			cm.sepia();
+			break;
+		case "negative":
+			cm.negative();
+			break;
+		case "blackWhite":
+			cm.blackWhite();
+			break;
+		case "brown":
+			cm.brown();
+			break;
+		case "kodachrome":
+			cm.kodachrome();
+			break;
+		case "technicolor":
+			cm.technicolor();
+			break;
+		case "polaroid":
+			cm.polaroid();
+			break;
+	}
+	return colorMatrixFilter;
 };
-const createGlowFX = (obj, config, type = "post") => {
-  const {
-    color = 16777215,
-    outerStrength = 4,
-    innerStrength = 0,
-    knockout = false,
-    quality = 0.1,
-    distance = 10
-  } = config;
-  const pipeline = type === "post" ? obj.postFX : obj.preFX;
-  if (!pipeline) {
-    console.warn("[createGlowFX] FX pipeline not available on this GameObject");
-    return null;
-  }
-  const glow = pipeline.addGlow(color, outerStrength, innerStrength, knockout, quality, distance);
-  return glow;
+//#endregion
+//#region src/fx/fx-creators/glow.ts
+/**
+* Create glow FX
+* @param obj - GameObject
+* @param config - Glow configuration
+* @param type - 'post' or 'pre' FX
+* @returns Glow controller
+*
+* @example
+* ```tsx
+* applyFX(createGlowFX, {
+*   color: 0xff6600,
+*   outerStrength: 6,
+*   innerStrength: 2
+* })
+* ```
+*/
+var createGlowFX = (obj, config, type = "internal") => {
+	const { color = 16777215, outerStrength = 4, innerStrength = 0, knockout = false, quality = .1, distance = 10 } = config;
+	obj.enableFilters();
+	const filters = obj.filters;
+	if (!filters) {
+		console.warn("[createGlowFX] Filters not available on this GameObject");
+		return null;
+	}
+	const pipeline = type === "internal" ? filters.internal : filters.external;
+	if (!pipeline) {
+		console.warn("[createGlowFX] FX pipeline not available on this GameObject");
+		return null;
+	}
+	return pipeline.addGlow(color, outerStrength, innerStrength, 1, knockout, quality, distance);
 };
-const createPixelateFX = (obj, config, type = "post") => {
-  const { amount = 1 } = config;
-  const pipeline = type === "post" ? obj.postFX : obj.preFX;
-  if (!pipeline) {
-    console.warn("[createPixelateFX] FX pipeline not available on this GameObject");
-    return null;
-  }
-  const pixelate = pipeline.addPixelate(amount);
-  return pixelate;
+//#endregion
+//#region src/fx/fx-creators/pixelate.ts
+/**
+* Create pixelate FX
+* @param obj - GameObject
+* @param config - Pixelate configuration
+* @param type - 'post' or 'pre' FX
+* @returns Pixelate controller
+*
+* @example
+* ```tsx
+* applyFX(createPixelateFX, {
+*   amount: 8
+* })
+* ```
+*/
+var createPixelateFX = (obj, config, type = "internal") => {
+	const { amount = 1 } = config;
+	obj.enableFilters();
+	const filters = obj.filters;
+	if (!filters) {
+		console.warn("[createPixelateFX] Filters not available on this GameObject");
+		return null;
+	}
+	const pipeline = type === "internal" ? filters.internal : filters.external;
+	if (!pipeline) {
+		console.warn("[createPixelateFX] FX pipeline not available on this GameObject");
+		return null;
+	}
+	return pipeline.addPixelate(amount);
 };
-const createShadowFX = (obj, config, type = "post") => {
-  const {
-    x = 0,
-    y = 1,
-    decay = 0.05,
-    power = 1,
-    color = 0,
-    samples = 6,
-    intensity = 1
-  } = config;
-  const pipeline = type === "post" ? obj.postFX : obj.preFX;
-  if (!pipeline) {
-    console.warn("[createShadowFX] FX pipeline not available on this GameObject");
-    return null;
-  }
-  const shadow = pipeline.addShadow(x, y, decay, power, color, samples, intensity);
-  return shadow;
+//#endregion
+//#region src/fx/fx-creators/shadow.ts
+/**
+* Create shadow FX
+* @param obj - GameObject
+* @param config - Shadow configuration
+* @param type - 'post' or 'pre' FX
+* @returns Shadow controller
+*
+* @example
+* ```tsx
+* applyFX(createShadowFX, {
+*   x: 0,
+*   y: 0,
+*   decay: 0.1,
+*   power: 1,
+*   color: 0x000000,
+*   samples: 6,
+*   intensity: 1
+* })
+* ```
+*/
+var createShadowFX = (obj, config, type = "internal") => {
+	const { x = 0, y = 1, decay = .05, power = 1, color = 0, samples = 6, intensity = 1 } = config;
+	obj.enableFilters();
+	const filters = obj.filters;
+	if (!filters) {
+		console.warn("[createShadowFX] Filters not available on this GameObject");
+		return null;
+	}
+	const pipeline = type === "internal" ? filters.internal : filters.external;
+	if (!pipeline) {
+		console.warn("[createShadowFX] FX pipeline not available on this GameObject");
+		return null;
+	}
+	return pipeline.addShadow(x, y, decay, power, color, samples, intensity);
 };
-const createVignetteFX = (obj, config, type = "post") => {
-  const { strength = 0.5, radius = 0.5, x = 0.5, y = 0.5 } = config;
-  const pipeline = type === "post" ? obj.postFX : obj.preFX;
-  if (!pipeline) {
-    console.warn("[createVignetteFX] FX pipeline not available on this GameObject");
-    return null;
-  }
-  const vignette = pipeline.addVignette(x, y, radius, strength);
-  return vignette;
+//#endregion
+//#region src/fx/fx-creators/vignette.ts
+/**
+* Create vignette FX
+* @param obj - GameObject
+* @param config - Vignette configuration
+* @param type - 'post' or 'pre' FX
+* @returns Vignette controller
+*
+* @example
+* ```tsx
+* applyFX(createVignetteFX, {
+*   x: 0.5,
+*   y: 0.5,
+*   radius: 0.5,
+*   strength: 0.7
+* })
+* ```
+*/
+var createVignetteFX = (obj, config, type = "internal") => {
+	const { strength = .5, radius = .5, x = .5, y = .5 } = config;
+	obj.enableFilters();
+	const filters = obj.filters;
+	if (!filters) {
+		console.warn("[createVignetteFX] Filters not available on this GameObject");
+		return null;
+	}
+	const pipeline = type === "internal" ? filters.internal : filters.external;
+	if (!pipeline) {
+		console.warn("[createVignetteFX] FX pipeline not available on this GameObject");
+		return null;
+	}
+	return pipeline.addVignette(x, y, radius, strength);
 };
-const FX_REGISTRY = {
-  shadow: createShadowFX,
-  glow: createGlowFX,
-  blur: createBlurFX,
-  pixelate: createPixelateFX,
-  vignette: createVignetteFX,
-  grayscale: (obj, config, type) => createColorMatrixFX(obj, { ...config, effect: "grayscale" }, type),
-  sepia: (obj, config, type) => createColorMatrixFX(obj, { ...config, effect: "sepia" }, type),
-  negative: (obj, config, type) => createColorMatrixFX(obj, { ...config, effect: "negative" }, type),
-  blackWhite: (obj, config, type) => createColorMatrixFX(obj, { ...config, effect: "blackWhite" }, type),
-  brown: (obj, config, type) => createColorMatrixFX(obj, { ...config, effect: "brown" }, type),
-  kodachrome: (obj, config, type) => createColorMatrixFX(obj, { ...config, effect: "kodachrome" }, type),
-  technicolor: (obj, config, type) => createColorMatrixFX(obj, { ...config, effect: "technicolor" }, type),
-  polaroid: (obj, config, type) => createColorMatrixFX(obj, { ...config, effect: "polaroid" }, type)
+//#endregion
+//#region src/fx/fx-registry.ts
+/**
+* FX Registry - string-based FX lookup
+* Similar to effect-registry.ts for animation effects
+*/
+/**
+* FX Registry mapping names to creator functions
+*/
+var FX_REGISTRY = {
+	shadow: createShadowFX,
+	glow: createGlowFX,
+	blur: createBlurFX,
+	pixelate: createPixelateFX,
+	vignette: createVignetteFX,
+	grayscale: (obj, config, type) => createColorMatrixFX(obj, {
+		...config,
+		effect: "grayscale"
+	}, type),
+	sepia: (obj, config, type) => createColorMatrixFX(obj, {
+		...config,
+		effect: "sepia"
+	}, type),
+	negative: (obj, config, type) => createColorMatrixFX(obj, {
+		...config,
+		effect: "negative"
+	}, type),
+	blackWhite: (obj, config, type) => createColorMatrixFX(obj, {
+		...config,
+		effect: "blackWhite"
+	}, type),
+	brown: (obj, config, type) => createColorMatrixFX(obj, {
+		...config,
+		effect: "brown"
+	}, type),
+	kodachrome: (obj, config, type) => createColorMatrixFX(obj, {
+		...config,
+		effect: "kodachrome"
+	}, type),
+	technicolor: (obj, config, type) => createColorMatrixFX(obj, {
+		...config,
+		effect: "technicolor"
+	}, type),
+	polaroid: (obj, config, type) => createColorMatrixFX(obj, {
+		...config,
+		effect: "polaroid"
+	}, type)
 };
-const DEFAULT_FX = "grayscale";
+/**
+* Default FX (none)
+*/
+var DEFAULT_FX = "grayscale";
+/**
+* Resolve FX by name or function
+* @param fxOrName - FX name string or creator function
+* @returns FX creator function or null
+*/
 function resolveFX(fxOrName) {
-  if (typeof fxOrName === "function") {
-    return fxOrName;
-  }
-  return FX_REGISTRY[fxOrName] ?? null;
-}
+	if (typeof fxOrName === "function") return fxOrName;
+	return FX_REGISTRY[fxOrName] ?? null;
+}
+/**
+* Apply FX by name (helper function)
+* @param applyFXFn - applyFX function from useFX hook
+* @param fxName - FX name
+* @param config - FX config
+*
+* @example
+* ```tsx
+* const { applyFX } = useFX(ref)
+* applyFXByName(applyFX, 'shadow', { offsetX: 4, offsetY: 4, blur: 8 })
+* ```
+*/
 function applyFXByName(applyFXFn, fxName, config = {}) {
-  const creator = resolveFX(fxName);
-  if (creator) {
-    applyFXFn(creator, config);
-  } else {
-    console.warn(`[applyFXByName] FX "${fxName}" not found in registry`);
-  }
-}
+	const creator = resolveFX(fxName);
+	if (creator) applyFXFn(creator, config);
+	else console.warn(`[applyFXByName] FX "${fxName}" not found in registry`);
+}
+//#endregion
+//#region src/fx/convenience-hooks/use-blur.ts
+/**
+* Convenience hook for automatic blur FX
+* Applies blur on mount and updates on config changes
+*/
+/**
+* Hook for automatic blur FX
+* @param ref - GameObject ref
+* @param config - Blur config (updates reactively)
+* @returns FX controls
+*
+* @example
+* ```tsx
+* const ref = useRef(null)
+* useBlur(ref, { strength: 8, steps: 4 })
+*
+* return <View ref={ref}>Content</View>
+* ```
+*/
 function useBlur(ref, config = {}) {
-  const { applyFX, clearFX } = useFX(ref);
-  useEffect(() => {
-    if (!ref.current) return;
-    clearFX();
-    applyFX(createBlurFX, config);
-    return () => clearFX();
-  }, [ref, config, applyFX, clearFX]);
-  return { clearFX };
-}
+	const { applyFX, clearFX } = useFX(ref);
+	useEffect(() => {
+		if (!ref.current) return;
+		clearFX();
+		applyFX(createBlurFX, config);
+		return () => clearFX();
+	}, [
+		ref,
+		config,
+		applyFX,
+		clearFX
+	]);
+	return { clearFX };
+}
+//#endregion
+//#region src/fx/convenience-hooks/use-glow.ts
+/**
+* Convenience hook for automatic glow FX
+* Applies glow on mount and updates on config changes
+*/
+/**
+* Hook for automatic glow FX
+* @param ref - GameObject ref
+* @param config - Glow config (updates reactively)
+* @returns FX controls
+*
+* @example
+* ```tsx
+* const ref = useRef(null)
+* useGlow(ref, { color: 0xff6600, outerStrength: 6, innerStrength: 2 })
+*
+* return <View ref={ref}>Content</View>
+* ```
+*/
 function useGlow(ref, config = {}) {
-  const { applyFX, clearFX } = useFX(ref);
-  useEffect(() => {
-    if (!ref.current) return;
-    clearFX();
-    applyFX(createGlowFX, config);
-    return () => clearFX();
-  }, [ref, config, applyFX, clearFX]);
-  return { clearFX };
-}
+	const { applyFX, clearFX } = useFX(ref);
+	useEffect(() => {
+		if (!ref.current) return;
+		clearFX();
+		applyFX(createGlowFX, config);
+		return () => clearFX();
+	}, [
+		ref,
+		config,
+		applyFX,
+		clearFX
+	]);
+	return { clearFX };
+}
+//#endregion
+//#region src/fx/convenience-hooks/use-shadow.ts
+/**
+* Convenience hook for automatic shadow FX
+* Applies shadow on mount and updates on config changes
+*/
+/**
+* Hook for automatic shadow FX
+* @param ref - GameObject ref
+* @param config - Shadow config (updates reactively)
+* @returns FX controls
+*
+* @example
+* ```tsx
+* const ref = useRef(null)
+* useShadow(ref, { x: 4, y: 4, decay: 0.1 })
+*
+* return <View ref={ref}>Content</View>
+* ```
+*/
 function useShadow(ref, config = {}) {
-  const { applyFX, clearFX } = useFX(ref);
-  useEffect(() => {
-    if (!ref.current) return;
-    clearFX();
-    applyFX(createShadowFX, config);
-    return () => clearFX();
-  }, [ref, config, applyFX, clearFX]);
-  return { clearFX };
-}
+	const { applyFX, clearFX } = useFX(ref);
+	useEffect(() => {
+		if (!ref.current) return;
+		clearFX();
+		applyFX(createShadowFX, config);
+		return () => clearFX();
+	}, [
+		ref,
+		config,
+		applyFX,
+		clearFX
+	]);
+	return { clearFX };
+}
+//#endregion
+//#region src/memo.ts
+/**
+* Safely sets __memo on a VNode, handling frozen/sealed objects from bundlers
+* @param vnode - VNode to set __memo on
+* @param value - Memoization value
+* @returns Original VNode if extensible, or shallow copy with __memo
+*/
 function setMemoSafe(vnode, value) {
-  if (Object.isExtensible(vnode)) {
-    vnode.__memo = value;
-    return vnode;
-  }
-  return { ...vnode, __memo: value };
-}
+	if (Object.isExtensible(vnode)) {
+		vnode.__memo = value;
+		return vnode;
+	}
+	return {
+		...vnode,
+		__memo: value
+	};
+}
+/**
+* Marks a component to skip memoization (always re-render on prop changes)
+* Use when component has side effects or needs to re-render every time
+*
+* @example
+* ```tsx
+* function AlwaysUpdate({ value }) {
+*   console.log('Rendering with:', value)
+*   return <Text text={value} />
+* }
+*
+* // Disable memoization
+* <AlwaysUpdate value={counter} __memo={false} />
+* ```
+*
+* @param vnode - VNode to mark
+* @returns Same VNode with memoization disabled (may be a copy if frozen)
+*/
 function noMemo(vnode) {
-  return setMemoSafe(vnode, false);
-}
+	return setMemoSafe(vnode, false);
+}
+/**
+* Explicitly enable memoization for a component (default behavior)
+* This is the default - you don't need to call this unless you want to be explicit
+*
+* @param vnode - VNode to mark
+* @returns Same VNode with memoization enabled (may be a copy if frozen)
+*/
 function memo(vnode) {
-  return setMemoSafe(vnode, true);
+	return setMemoSafe(vnode, true);
 }
+//#endregion
+//#region src/particles/use-particles.ts
+/**
+* Hook for imperative particle control
+*/
 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
-  };
-}
-const DEFAULT_LOGO_KEY = "phaser-jsx-logo";
-const DEFAULT_BACKGROUND = {
-  type: "grid",
-  animation: "lemniscate",
-  opacity: 0.15,
-  color: 4890367
+	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]);
+	return {
+		getManager,
+		getEmitter,
+		start: useCallback(() => {
+			getEmitter()?.start();
+		}, [getEmitter]),
+		stop: useCallback(() => {
+			getEmitter()?.stop();
+		}, [getEmitter]),
+		explode: useCallback((count, x, y) => {
+			getEmitter()?.explode(count, x, y);
+		}, [getEmitter]),
+		setConfig: useCallback((config) => {
+			applyEmitterConfig(getEmitter(), config);
+		}, [getEmitter]),
+		setEmitZone: useCallback((zone, width, height) => {
+			applyEmitZone(getEmitter(), buildEmitZoneFromLayout(zone, width, height));
+		}, [getEmitter]),
+		setExcludeZones: useCallback((zones, width, height) => {
+			applyDeathZone(getEmitter(), buildDeathZonesFromLayout(zones, width, height));
+		}, [getEmitter])
+	};
+}
+//#endregion
+//#region src/scene-backgrounds.ts
+var DEFAULT_LOGO_KEY = "phaser-jsx-logo";
+var DEFAULT_BACKGROUND = {
+	type: "grid",
+	animation: "lemniscate",
+	opacity: .15,
+	color: 4890367
 };
 function addSceneBackground(scene, config = DEFAULT_BACKGROUND) {
-  const bgConfig = config ?? DEFAULT_BACKGROUND;
-  if (bgConfig.type === "none") return null;
-  let background;
-  let backgroundTween;
-  const particleTweens = [];
-  let resizeFn;
-  let destroyed = false;
-  const createGridBackground = () => {
-    const graphics = scene.add.graphics();
-    const gridSize = 40;
-    const color = bgConfig.color ?? 4890367;
-    const opacity = bgConfig.opacity ?? 0.15;
-    const drawGrid = (offsetX, offsetY) => {
-      graphics.clear();
-      graphics.lineStyle(1, color, opacity);
-      const width = scene.scale.width;
-      const height = scene.scale.height;
-      for (let x = offsetX % gridSize; x < width; x += gridSize) {
-        graphics.lineBetween(x, 0, x, height);
-      }
-      for (let y = offsetY % gridSize; y < height; y += gridSize) {
-        graphics.lineBetween(0, y, width, y);
-      }
-    };
-    drawGrid(0, 0);
-    graphics.__redrawFn = drawGrid;
-    background = graphics;
-    resizeFn = () => drawGrid(0, 0);
-  };
-  const createLogoBackground = () => {
-    const container = scene.add.container(scene.scale.width / 2, scene.scale.height / 2);
-    const opacity = bgConfig.opacity ?? 0.1;
-    const logoKey = bgConfig.logoKey ?? DEFAULT_LOGO_KEY;
-    const logo = scene.add.image(0, 0, logoKey);
-    logo.setAlpha(opacity);
-    logo.setScale(0.5);
-    container.add(logo);
-    background = container;
-    resizeFn = (width, height) => {
-      container.setPosition(width / 2, height / 2);
-    };
-  };
-  const createGradientBackground = () => {
-    const graphics = scene.add.graphics();
-    const color1 = bgConfig.color ?? 4890367;
-    const color2 = bgConfig.colorSecondary ?? 7031551;
-    const opacity = bgConfig.opacity ?? 0.2;
-    const drawGradient = () => {
-      graphics.clear();
-      graphics.fillGradientStyle(color1, color1, color2, color2, opacity, opacity, opacity, opacity);
-      graphics.fillRect(0, 0, scene.scale.width, scene.scale.height);
-    };
-    drawGradient();
-    background = graphics;
-    resizeFn = drawGradient;
-  };
-  const createParticlesBackground = () => {
-    const container = scene.add.container(0, 0);
-    const particleCount = 20;
-    const color = bgConfig.color ?? 4890367;
-    const opacity = bgConfig.opacity ?? 0.1;
-    const particles = [];
-    for (let i2 = 0; i2 < particleCount; i2 += 1) {
-      const size = Phaser.Math.Between(2, 6);
-      const x = Phaser.Math.Between(0, scene.scale.width);
-      const y = Phaser.Math.Between(0, scene.scale.height);
-      const particle = scene.add.circle(x, y, size, color, opacity);
-      container.add(particle);
-      particles.push(particle);
-      particleTweens.push(
-        scene.tweens.add({
-          targets: particle,
-          y: particle.y + Phaser.Math.Between(-50, 50),
-          x: particle.x + Phaser.Math.Between(-50, 50),
-          alpha: opacity * 1.5,
-          duration: Phaser.Math.Between(2e3, 4e3),
-          yoyo: true,
-          repeat: -1,
-          ease: "Sine.easeInOut"
-        })
-      );
-    }
-    background = container;
-    resizeFn = (width, height) => {
-      for (const particle of particles) {
-        particle.setPosition(Phaser.Math.Between(0, width), Phaser.Math.Between(0, height));
-      }
-    };
-  };
-  switch (bgConfig.type) {
-    case "grid":
-      createGridBackground();
-      break;
-    case "logo":
-      createLogoBackground();
-      break;
-    case "gradient":
-      createGradientBackground();
-      break;
-    case "particles":
-      createParticlesBackground();
-      break;
-  }
-  if (!background) return null;
-  if (bgConfig.animation && bgConfig.animation !== "static") {
-    backgroundTween = applyAnimation(scene, background, bgConfig.animation);
-  }
-  const onResize = () => {
-    if (resizeFn) resizeFn(scene.scale.width, scene.scale.height);
-  };
-  const cleanup = () => {
-    if (destroyed) return;
-    destroyed = true;
-    backgroundTween?.stop();
-    for (const tween of particleTweens) {
-      tween.stop();
-    }
-    background?.destroy();
-    background = void 0;
-    scene.scale.off(Phaser.Scale.Events.RESIZE, onResize);
-    scene.events.off(Phaser.Scenes.Events.SHUTDOWN, cleanup);
-    scene.events.off(Phaser.Scenes.Events.DESTROY, cleanup);
-  };
-  scene.scale.on(Phaser.Scale.Events.RESIZE, onResize);
-  scene.events.once(Phaser.Scenes.Events.SHUTDOWN, cleanup);
-  scene.events.once(Phaser.Scenes.Events.DESTROY, cleanup);
-  return {
-    background,
-    destroy: cleanup,
-    resize: (width, height) => {
-      if (resizeFn) resizeFn(width, height);
-    }
-  };
+	const bgConfig = config ?? DEFAULT_BACKGROUND;
+	if (bgConfig.type === "none") return null;
+	let background;
+	let backgroundTween;
+	const particleTweens = [];
+	let resizeFn;
+	let destroyed = false;
+	const createGridBackground = () => {
+		const graphics = scene.add.graphics();
+		const gridSize = 40;
+		const color = bgConfig.color ?? 4890367;
+		const opacity = bgConfig.opacity ?? .15;
+		const drawGrid = (offsetX, offsetY) => {
+			graphics.clear();
+			graphics.lineStyle(1, color, opacity);
+			const width = scene.scale.width;
+			const height = scene.scale.height;
+			for (let x = offsetX % gridSize; x < width; x += gridSize) graphics.lineBetween(x, 0, x, height);
+			for (let y = offsetY % gridSize; y < height; y += gridSize) graphics.lineBetween(0, y, width, y);
+		};
+		drawGrid(0, 0);
+		graphics.__redrawFn = drawGrid;
+		background = graphics;
+		resizeFn = () => drawGrid(0, 0);
+	};
+	const createLogoBackground = () => {
+		const container = scene.add.container(scene.scale.width / 2, scene.scale.height / 2);
+		const opacity = bgConfig.opacity ?? .1;
+		const logoKey = bgConfig.logoKey ?? DEFAULT_LOGO_KEY;
+		const logo = scene.add.image(0, 0, logoKey);
+		logo.setAlpha(opacity);
+		logo.setScale(.5);
+		container.add(logo);
+		background = container;
+		resizeFn = (width, height) => {
+			container.setPosition(width / 2, height / 2);
+		};
+	};
+	const createGradientBackground = () => {
+		const graphics = scene.add.graphics();
+		const color1 = bgConfig.color ?? 4890367;
+		const color2 = bgConfig.colorSecondary ?? 7031551;
+		const opacity = bgConfig.opacity ?? .2;
+		const drawGradient = () => {
+			graphics.clear();
+			graphics.fillGradientStyle(color1, color1, color2, color2, opacity, opacity, opacity, opacity);
+			graphics.fillRect(0, 0, scene.scale.width, scene.scale.height);
+		};
+		drawGradient();
+		background = graphics;
+		resizeFn = drawGradient;
+	};
+	const createParticlesBackground = () => {
+		const container = scene.add.container(0, 0);
+		const particleCount = 20;
+		const color = bgConfig.color ?? 4890367;
+		const opacity = bgConfig.opacity ?? .1;
+		const particles = [];
+		for (let i = 0; i < particleCount; i += 1) {
+			const size = Phaser.Math.Between(2, 6);
+			const x = Phaser.Math.Between(0, scene.scale.width);
+			const y = Phaser.Math.Between(0, scene.scale.height);
+			const particle = scene.add.circle(x, y, size, color, opacity);
+			container.add(particle);
+			particles.push(particle);
+			particleTweens.push(scene.tweens.add({
+				targets: particle,
+				y: particle.y + Phaser.Math.Between(-50, 50),
+				x: particle.x + Phaser.Math.Between(-50, 50),
+				alpha: opacity * 1.5,
+				duration: Phaser.Math.Between(2e3, 4e3),
+				yoyo: true,
+				repeat: -1,
+				ease: "Sine.easeInOut"
+			}));
+		}
+		background = container;
+		resizeFn = (width, height) => {
+			for (const particle of particles) particle.setPosition(Phaser.Math.Between(0, width), Phaser.Math.Between(0, height));
+		};
+	};
+	switch (bgConfig.type) {
+		case "grid":
+			createGridBackground();
+			break;
+		case "logo":
+			createLogoBackground();
+			break;
+		case "gradient":
+			createGradientBackground();
+			break;
+		case "particles":
+			createParticlesBackground();
+			break;
+	}
+	if (!background) return null;
+	if (bgConfig.animation && bgConfig.animation !== "static") backgroundTween = applyAnimation(scene, background, bgConfig.animation);
+	const onResize = () => {
+		if (resizeFn) resizeFn(scene.scale.width, scene.scale.height);
+	};
+	const cleanup = () => {
+		if (destroyed) return;
+		destroyed = true;
+		backgroundTween?.stop();
+		for (const tween of particleTweens) tween.stop();
+		background?.destroy();
+		background = void 0;
+		scene.scale.off(Phaser.Scale.Events.RESIZE, onResize);
+		scene.events.off(Phaser.Scenes.Events.SHUTDOWN, cleanup);
+		scene.events.off(Phaser.Scenes.Events.DESTROY, cleanup);
+	};
+	scene.scale.on(Phaser.Scale.Events.RESIZE, onResize);
+	scene.events.once(Phaser.Scenes.Events.SHUTDOWN, cleanup);
+	scene.events.once(Phaser.Scenes.Events.DESTROY, cleanup);
+	return {
+		background,
+		destroy: cleanup,
+		resize: (width, height) => {
+			if (resizeFn) resizeFn(width, height);
+		}
+	};
 }
 function applyAnimation(scene, target, animation) {
-  const redrawFn = target.__redrawFn;
-  switch (animation) {
-    case "lemniscate":
-      return redrawFn ? animateLemniscate(scene, redrawFn) : animatePulse(scene, target);
-    case "wave":
-      return redrawFn ? animateWave(scene, redrawFn) : animatePulse(scene, target);
-    case "pulse":
-      return animatePulse(scene, target);
-    case "rotate":
-      return animateRotate(scene, target);
-    case "static":
-    default:
-      return void 0;
-  }
+	const redrawFn = target.__redrawFn;
+	switch (animation) {
+		case "lemniscate": return redrawFn ? animateLemniscate(scene, redrawFn) : animatePulse(scene, target);
+		case "wave": return redrawFn ? animateWave(scene, redrawFn) : animatePulse(scene, target);
+		case "pulse": return animatePulse(scene, target);
+		case "rotate": return animateRotate(scene, target);
+		default: return;
+	}
 }
 function animateLemniscate(scene, drawFn) {
-  const amplitude = 30;
-  const duration = 8e3;
-  return scene.tweens.addCounter({
-    from: 0,
-    to: Math.PI * 2,
-    duration,
-    repeat: -1,
-    onUpdate: (tween) => {
-      const t = tween.getValue();
-      if (t !== null) {
-        const offsetX = amplitude * Math.cos(t);
-        const offsetY = amplitude * Math.sin(2 * t) / 2;
-        drawFn(offsetX, offsetY);
-      }
-    }
-  });
+	const amplitude = 30;
+	return scene.tweens.addCounter({
+		from: 0,
+		to: Math.PI * 2,
+		duration: 8e3,
+		repeat: -1,
+		onUpdate: (tween) => {
+			const t = tween.getValue();
+			if (t !== null) drawFn(amplitude * Math.cos(t), amplitude * Math.sin(2 * t) / 2);
+		}
+	});
 }
 function animateWave(scene, drawFn) {
-  return scene.tweens.addCounter({
-    from: 0,
-    to: 40,
-    duration: 3e3,
-    yoyo: true,
-    repeat: -1,
-    onUpdate: (tween) => {
-      const offset = tween.getValue();
-      if (offset !== null) {
-        drawFn(offset, 0);
-      }
-    }
-  });
+	return scene.tweens.addCounter({
+		from: 0,
+		to: 40,
+		duration: 3e3,
+		yoyo: true,
+		repeat: -1,
+		onUpdate: (tween) => {
+			const offset = tween.getValue();
+			if (offset !== null) drawFn(offset, 0);
+		}
+	});
 }
 function animatePulse(scene, target) {
-  return scene.tweens.add({
-    targets: target,
-    scaleX: 1.1,
-    scaleY: 1.1,
-    duration: 2e3,
-    yoyo: true,
-    repeat: -1,
-    ease: "Sine.easeInOut"
-  });
+	return scene.tweens.add({
+		targets: target,
+		scaleX: 1.1,
+		scaleY: 1.1,
+		duration: 2e3,
+		yoyo: true,
+		repeat: -1,
+		ease: "Sine.easeInOut"
+	});
 }
 function animateRotate(scene, target) {
-  return scene.tweens.add({
-    targets: target,
-    angle: 360,
-    duration: 2e4,
-    repeat: -1,
-    ease: "Linear"
-  });
-}
+	return scene.tweens.add({
+		targets: target,
+		angle: 360,
+		duration: 2e4,
+		repeat: -1,
+		ease: "Linear"
+	});
+}
+//#endregion
+//#region src/plugin.ts
+/**
+* PhaserJSX Plugin for automatic JSX mounting
+* Enables declarative initialization via Phaser game config
+*/
+/**
+* Implementation
+*/
 function createPhaserJSXPlugin(config) {
-  return {
-    key: "PhaserJSX",
-    plugin: PhaserJSXPlugin,
-    start: true,
-    data: config
-  };
-}
-class PhaserJSXPlugin extends Phaser.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();
-  }
-}
+	return {
+		key: "PhaserJSX",
+		plugin: PhaserJSXPlugin,
+		start: true,
+		data: config
+	};
+}
+/**
+* PhaserJSX Plugin
+* Provides automatic JSX mounting through Phaser plugin system
+*
+* @example
+* ```typescript
+* // In game config
+* plugins: {
+*   global: [{
+*     key: 'PhaserJSX',
+*     plugin: PhaserJSXPlugin,
+*     start: true,
+*     data: {
+*       component: App,
+*       props: { width: '100%', height: '100%' }
+*     }
+*   }]
+* }
+* ```
+*/
+var PhaserJSXPlugin = class extends Phaser.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() {
+		if (this.config?.autoMount !== false && 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();
+	}
+};
+//#endregion
+//#region src/colors/use-color-mode.ts
+/**
+* Color mode management for dynamic theme switching
+*/
+/**
+* Hook to manage color mode (light/dark) dynamically
+* @returns Object with current mode, toggle function, and setter
+* @example
+* ```typescript
+* function ThemeToggle() {
+*   const { colorMode, toggleColorMode } = useColorMode()
+*
+*   return (
+*     <Button onClick={toggleColorMode}>
+*       {colorMode === 'light' ? 'Dark' : 'Light'} Mode
+*     </Button>
+*   )
+* }
+* ```
+*/
 function useColorMode() {
-  const [colorMode, setColorModeState] = useState(themeRegistry.getColorMode());
-  useEffect(() => {
-    const unsubscribe = themeRegistry.subscribe(() => {
-      setColorModeState(themeRegistry.getColorMode());
-    });
-    return unsubscribe;
-  }, []);
-  const setColorMode2 = (mode) => {
-    themeRegistry.setColorMode(mode);
-  };
-  const toggleColorMode = () => {
-    const newMode = colorMode === "light" ? "dark" : "light";
-    setColorMode2(newMode);
-  };
-  return {
-    colorMode,
-    setColorMode: setColorMode2,
-    toggleColorMode
-  };
-}
+	const [colorMode, setColorModeState] = useState(themeRegistry.getColorMode());
+	useEffect(() => {
+		return themeRegistry.subscribe(() => {
+			setColorModeState(themeRegistry.getColorMode());
+		});
+	}, []);
+	const setColorMode = (mode) => {
+		themeRegistry.setColorMode(mode);
+	};
+	const toggleColorMode = () => {
+		setColorMode(colorMode === "light" ? "dark" : "light");
+	};
+	return {
+		colorMode,
+		setColorMode,
+		toggleColorMode
+	};
+}
+//#endregion
+//#region src/colors/use-colors.ts
+/**
+* Color system hooks for component usage
+*/
+/**
+* Hook to access color tokens from theme context
+* Automatically updates when color mode or preset changes
+* @returns Current ColorTokens or undefined
+* @deprecated Use `useThemeTokens()` instead for access to colors, text styles, spacing, and more
+* @example
+* ```typescript
+* // Old way (deprecated):
+* const colors = useColors()
+*
+* // New way:
+* const tokens = useThemeTokens()
+* const colors = tokens?.colors
+*
+* // Access text styles, spacing, etc.:
+* <Text style={tokens.textStyles.DEFAULT} />
+* <View padding={tokens.spacing.lg} />
+* ```
+*/
 function useColors() {
-  const localTheme = useTheme();
-  const getInitialColors = () => {
-    if (localTheme?.__colorPreset) {
-      const preset = getPresetWithMode(
-        localTheme.__colorPreset.name,
-        localTheme.__colorPreset.mode ?? "light"
-      );
-      return preset.colors;
-    }
-    return themeRegistry.getColorTokens();
-  };
-  const [colors, setColors] = useState(getInitialColors());
-  const [, forceUpdate] = useState(0);
-  useEffect(() => {
-    const unsubscribe = themeRegistry.subscribe(() => {
-      if (localTheme?.__colorPreset) {
-        const currentMode = themeRegistry.getColorMode();
-        const preset = getPresetWithMode(
-          localTheme.__colorPreset.name,
-          currentMode
-        );
-        setColors(preset.colors);
-      } else {
-        setColors(themeRegistry.getColorTokens());
-      }
-      forceUpdate((n2) => n2 + 1);
-    });
-    return unsubscribe;
-  }, [localTheme]);
-  return colors;
-}
+	const localTheme = useTheme();
+	const getInitialColors = () => {
+		if (localTheme?.__colorPreset) return getPresetWithMode(localTheme.__colorPreset.name, localTheme.__colorPreset.mode ?? "light").colors;
+		return themeRegistry.getColorTokens();
+	};
+	const [colors, setColors] = useState(getInitialColors());
+	const [, forceUpdate] = useState(0);
+	useEffect(() => {
+		return themeRegistry.subscribe(() => {
+			if (localTheme?.__colorPreset) {
+				const currentMode = themeRegistry.getColorMode();
+				setColors(getPresetWithMode(localTheme.__colorPreset.name, currentMode).colors);
+			} else setColors(themeRegistry.getColorTokens());
+			forceUpdate((n) => n + 1);
+		});
+	}, [localTheme]);
+	return colors;
+}
+/**
+* Hook to subscribe to theme changes without accessing colors
+* Use this in parent components that don't need colors themselves
+* but want to ensure children re-render when theme changes
+*
+* Note: Since useColors() now triggers re-renders automatically,
+* this hook is mainly useful if you don't need the colors themselves
+* but still want to react to theme changes.
+*
+* @example
+* ```typescript
+* function ParentComponent() {
+*   useThemeSubscription() // Children will re-render on theme changes
+*   return <ChildThatUsesColors />
+* }
+* ```
+*/
 function useThemeSubscription() {
-  const [, forceUpdate] = useState(0);
-  useEffect(() => {
-    const unsubscribe = themeRegistry.subscribe(() => {
-      forceUpdate((n2) => n2 + 1);
-    });
-    return unsubscribe;
-  }, []);
-}
+	const [, forceUpdate] = useState(0);
+	useEffect(() => {
+		return themeRegistry.subscribe(() => {
+			forceUpdate((n) => n + 1);
+		});
+	}, []);
+}
+//#endregion
+//#region src/colors/color-theme-helpers.ts
+/**
+* Convert ColorTokens to a theme-compatible object
+* Maps semantic color names to Phaser number format for View/Button components
+* @param colors - ColorTokens to convert
+* @returns Object with backgroundColor, borderColor, etc.
+* @example
+* ```typescript
+* const colors = getPreset('oceanBlue').colors
+* const buttonTheme = {
+*   ...colorsToTheme(colors, 'primary'),
+*   padding: 8,
+* }
+* // Returns: { backgroundColor: 0x2196f3, borderColor: 0x... }
+* ```
+*/
 function colorsToTheme(colors, colorKey, options = {}) {
-  const { backgroundShade = "DEFAULT", borderShade = "dark", includeBorder = true } = options;
-  const result = {
-    backgroundColor: colors[colorKey][backgroundShade].toNumber()
-  };
-  if (includeBorder) {
-    result.borderColor = colors[colorKey][borderShade].toNumber();
-  }
-  return result;
-}
+	const { backgroundShade = "DEFAULT", borderShade = "dark", includeBorder = true } = options;
+	const result = { backgroundColor: colors[colorKey][backgroundShade].toNumber() };
+	if (includeBorder) result.borderColor = colors[colorKey][borderShade].toNumber();
+	return result;
+}
+/**
+* Get text color from ColorTokens as hex string for Phaser Text style
+* @param colors - ColorTokens to use
+* @param shade - Which text shade to use (default: 'DEFAULT')
+* @param alphaValue - Optional alpha value (0-1)
+* @returns Hex string or rgba string for Text style
+* @example
+* ```typescript
+* const colors = getPreset('oceanBlue').colors
+* const textStyle = {
+*   color: getTextColor(colors),
+*   fontSize: '18px'
+* }
+* ```
+*/
 function getTextColor(colors, shade = "DEFAULT", alphaValue) {
-  const color = colors.text[shade];
-  return alphaValue !== void 0 ? alpha(color.toNumber(), alphaValue) : color.toString();
-}
+	const color = colors.text[shade];
+	return alphaValue !== void 0 ? alpha(color.toNumber(), alphaValue) : color.toString();
+}
+/**
+* Get background color from ColorTokens
+* @param colors - ColorTokens to use
+* @param shade - Which shade to use (default: 'DEFAULT')
+* @returns Phaser color number
+*/
 function getBackgroundColor(colors, shade = "DEFAULT") {
-  return colors.background[shade].toNumber();
-}
+	return colors.background[shade].toNumber();
+}
+/**
+* Get surface color from ColorTokens
+* @param colors - ColorTokens to use
+* @param shade - Which shade to use (default: 'DEFAULT')
+* @returns Phaser color number
+*/
 function getSurfaceColor(colors, shade = "DEFAULT") {
-  return colors.surface[shade].toNumber();
-}
+	return colors.surface[shade].toNumber();
+}
+/**
+* Get border color from ColorTokens
+* @param colors - ColorTokens to use
+* @param shade - Which shade to use (default: 'DEFAULT')
+* @returns Phaser color number
+*/
 function getBorderColor(colors, shade = "DEFAULT") {
-  return colors.border[shade].toNumber();
-}
+	return colors.border[shade].toNumber();
+}
+//#endregion
+//#region src/colors/preset-manager.ts
+/**
+* Dynamic color preset management
+*/
+/**
+* Set the active color preset globally
+* Applies the preset with the current color mode and updates all components
+* Triggers complete remount of all active mountJSX instances
+* @param presetName - Name of the preset to apply
+* @param colorMode - Optional color mode to apply together with the preset
+* @example
+* ```typescript
+* // Switch to forest green theme
+* setColorPreset('forestGreen')
+*
+* // Apply preset and force dark mode in one go
+* setColorPreset('midnight', 'dark')
+*
+* // Current mode (light/dark) is preserved
+* ```
+*/
 function setColorPreset(presetName, colorMode) {
-  const targetMode = colorMode ?? themeRegistry.getColorMode();
-  const preset = getPresetWithMode(presetName, targetMode);
-  themeRegistry.setColorTokens(preset.colors);
-  themeRegistry.setCurrentPresetName(presetName, true);
-  if (colorMode && themeRegistry.getColorMode() !== colorMode) {
-    themeRegistry.setColorMode(colorMode);
-    return;
-  }
-  setTimeout(() => {
-    remountAll();
-  }, 0);
-}
+	const preset = getPresetWithMode(presetName, colorMode ?? themeRegistry.getColorMode());
+	themeRegistry.setColorTokens(preset.colors);
+	themeRegistry.setCurrentPresetName(presetName, true);
+	if (colorMode && themeRegistry.getColorMode() !== colorMode) {
+		themeRegistry.setColorMode(colorMode);
+		return;
+	}
+	setTimeout(() => {
+		remountAll();
+	}, 0);
+}
+/**
+* Get the currently active preset name
+* @returns Current preset name or undefined
+*/
 function getCurrentPreset() {
-  return themeRegistry.getCurrentPresetName();
+	return themeRegistry.getCurrentPresetName();
 }
+/**
+* Set the active color mode globally (without changing the preset)
+* @param mode - Color mode to apply
+*/
 function setColorMode(mode) {
-  themeRegistry.setColorMode(mode);
-}
+	themeRegistry.setColorMode(mode);
+}
+/**
+* Get all available preset names
+* @returns Array of preset names
+* @example
+* ```typescript
+* const presets = getAvailablePresets() // ['oceanBlue', 'forestGreen', 'midnight']
+* ```
+*/
 function getAvailablePresets() {
-  return ["oceanBlue", "forestGreen", "midnight"];
-}
+	return [
+		"oceanBlue",
+		"forestGreen",
+		"midnight"
+	];
+}
+//#endregion
+//#region src/design-tokens/use-theme-tokens.ts
+/**
+* Hook to access complete design token system
+* Combines colors with text styles, spacing, sizes, and radius tokens
+*/
+/**
+* Hook to access complete design token system from theme context
+* Provides colors, text styles, spacing, sizes, and radius tokens
+* Automatically updates when color mode or preset changes
+* @returns Current DesignTokens or undefined
+* @example
+* ```typescript
+* function MyComponent() {
+*   const tokens = useThemeTokens()
+*
+*   if (!tokens) return null
+*
+*   return (
+*     <View
+*       backgroundColor={tokens.colors.surface.DEFAULT}
+*       padding={tokens.spacing.lg}
+*       cornerRadius={tokens.radius.md}
+*     >
+*       <Text text="Title" style={tokens.textStyles.title} />
+*       <Text text="Body text" style={tokens.textStyles.DEFAULT} />
+*     </View>
+*   )
+* }
+* ```
+*/
 function useThemeTokens() {
-  const localTheme = useTheme();
-  const getInitialTokens = () => {
-    if (localTheme?.__colorPreset) {
-      const preset = getPresetWithMode(
-        localTheme.__colorPreset.name,
-        localTheme.__colorPreset.mode ?? "light"
-      );
-      return {
-        colors: preset.colors,
-        textStyles: createTextStyleTokens(preset.colors.text.DEFAULT.toString()),
-        spacing: defaultSpacingTokens,
-        sizes: defaultSizeTokens,
-        radius: defaultRadiusTokens
-      };
-    }
-    const colors = themeRegistry.getColorTokens();
-    if (!colors) return void 0;
-    return {
-      colors,
-      textStyles: createTextStyleTokens(colors.text.DEFAULT.toString()),
-      spacing: defaultSpacingTokens,
-      sizes: defaultSizeTokens,
-      radius: defaultRadiusTokens
-    };
-  };
-  const [tokens, setTokens] = useState(getInitialTokens());
-  const [, forceUpdate] = useState(0);
-  useEffect(() => {
-    const unsubscribe = themeRegistry.subscribe(() => {
-      if (localTheme?.__colorPreset) {
-        const currentMode = themeRegistry.getColorMode();
-        const preset = getPresetWithMode(
-          localTheme.__colorPreset.name,
-          currentMode
-        );
-        setTokens({
-          colors: preset.colors,
-          textStyles: createTextStyleTokens(preset.colors.text.DEFAULT.toString()),
-          spacing: defaultSpacingTokens,
-          sizes: defaultSizeTokens,
-          radius: defaultRadiusTokens
-        });
-      } else {
-        const colors = themeRegistry.getColorTokens();
-        if (colors) {
-          setTokens({
-            colors,
-            textStyles: createTextStyleTokens(colors.text.DEFAULT.toString()),
-            spacing: defaultSpacingTokens,
-            sizes: defaultSizeTokens,
-            radius: defaultRadiusTokens
-          });
-        }
-      }
-      forceUpdate((n2) => n2 + 1);
-    });
-    return unsubscribe;
-  }, [localTheme]);
-  return tokens;
-}
+	const localTheme = useTheme();
+	const getInitialTokens = () => {
+		if (localTheme?.__colorPreset) {
+			const preset = getPresetWithMode(localTheme.__colorPreset.name, localTheme.__colorPreset.mode ?? "light");
+			return {
+				colors: preset.colors,
+				textStyles: createTextStyleTokens(preset.colors.text.DEFAULT.toString()),
+				spacing: defaultSpacingTokens,
+				sizes: defaultSizeTokens,
+				radius: defaultRadiusTokens
+			};
+		}
+		const colors = themeRegistry.getColorTokens();
+		if (!colors) return void 0;
+		return {
+			colors,
+			textStyles: createTextStyleTokens(colors.text.DEFAULT.toString()),
+			spacing: defaultSpacingTokens,
+			sizes: defaultSizeTokens,
+			radius: defaultRadiusTokens
+		};
+	};
+	const [tokens, setTokens] = useState(getInitialTokens());
+	const [, forceUpdate] = useState(0);
+	useEffect(() => {
+		return themeRegistry.subscribe(() => {
+			if (localTheme?.__colorPreset) {
+				const currentMode = themeRegistry.getColorMode();
+				const preset = getPresetWithMode(localTheme.__colorPreset.name, currentMode);
+				setTokens({
+					colors: preset.colors,
+					textStyles: createTextStyleTokens(preset.colors.text.DEFAULT.toString()),
+					spacing: defaultSpacingTokens,
+					sizes: defaultSizeTokens,
+					radius: defaultRadiusTokens
+				});
+			} else {
+				const colors = themeRegistry.getColorTokens();
+				if (colors) setTokens({
+					colors,
+					textStyles: createTextStyleTokens(colors.text.DEFAULT.toString()),
+					spacing: defaultSpacingTokens,
+					sizes: defaultSizeTokens,
+					radius: defaultRadiusTokens
+				});
+			}
+			forceUpdate((n) => n + 1);
+		});
+	}, [localTheme]);
+	return tokens;
+}
+//#endregion
+//#region src/index.ts
+/**
+* PhaserJSX UI Library
+* Provides JSX + hooks + VDOM for Phaser 3 game development
+*/
 registerBuiltins();
-export {
-  A as Accordion,
-  a as AlertDialog,
-  B as Button,
-  CAMERA_FX_REGISTRY,
-  C as CharText,
-  b as CharTextInput,
-  DEFAULT_BACKGROUND,
-  DEFAULT_CAMERA_FX,
-  af as DEFAULT_EFFECT,
-  DEFAULT_FX,
-  bj as DEFAULT_SPRING_CONFIG,
-  a7 as DOMInputElement,
-  DebugLogger,
-  ab as DevConfig,
-  ac as DevPresets,
-  D as Dialog,
-  c as Divider,
-  d as Dropdown,
-  ag as EFFECT_REGISTRY,
-  FX_REGISTRY,
-  Fragment,
-  bc as Graphics,
-  bo as HexColor,
-  I as Icon,
-  f as Image,
-  J as Joystick,
-  a8 as KeyboardInputManager,
-  M as Modal,
-  N as NineSlice,
-  g as NineSliceButton,
-  PARTICLE_PRESET_REGISTRY,
-  P as Particles,
-  PhaserJSXPlugin,
-  h as Portal,
-  R as RadioButton,
-  i as RadioGroup,
-  n as RangeSlider,
-  j as RefOriginView,
-  bk as SPRING_PRESETS,
-  S as ScrollSlider,
-  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,
-  addSceneBackground,
-  alpha,
-  bg as animatedSignal,
-  applyCameraFXByName,
-  bC as applyDarkMode,
-  ah as applyEffectByName,
-  applyFXByName,
-  bD as applyLightMode,
-  buildDeathZonesFromLayout,
-  buildEmitZone,
-  buildEmitZoneFromLayout,
-  k as calculateSliderSize,
-  colorsToTheme,
-  computed,
-  createBlurFX,
-  aj as createBounceEffect,
-  ak as createBreatheEffect,
-  createCameraFadeInFX,
-  createCameraFadeOutFX,
-  createCameraFlashFX,
-  createCameraShakeFX,
-  createCameraZoomFX,
-  createColorMatrixFX,
-  b2 as createDefaultTheme,
-  b7 as createElement,
-  al as createFadeEffect,
-  am as createFlashEffect,
-  an as createFlipInEffect,
-  ao as createFlipOutEffect,
-  ap as createFloatEffect,
-  createGlowFX,
-  e as createIconComponent,
-  aq as createJelloEffect,
-  ar as createNoneEffect,
-  createPhaserJSXPlugin,
-  createPixelateFX,
-  as as createPressEffect,
-  at as createPulseEffect,
-  createShadowFX,
-  au as createShakeEffect,
-  av as createSlideInEffect,
-  aw as createSlideOutEffect,
-  ax as createSpinEffect,
-  ay as createSwingEffect,
-  az as createTadaEffect,
-  bz as createTextStyle,
-  createTextStyleTokens,
-  b5 as createTheme,
-  createVignetteFX,
-  aA as createWiggleEffect,
-  aB as createWobbleEffect,
-  aC as createZoomInEffect,
-  aD as createZoomOutEffect,
-  bu as darken,
-  bv as darkenHex,
-  defaultRadiusTokens,
-  defaultSizeTokens,
-  defaultSpacingTokens,
-  bK as defaultTextStyleTokens,
-  b3 as defaultTheme,
-  aW as disposeCtx,
-  bA as ensureContrast,
-  bE as forestGreenPreset,
-  bF as generateColorScale,
-  getAvailablePresets,
-  getBackgroundColor,
-  aM as getBackgroundGraphics,
-  getBorderColor,
-  bB as getContrastRatio,
-  aE as getCurrent,
-  getCurrentPreset,
-  aL as getLayoutProps,
-  aO as getLayoutRect,
-  aJ as getLayoutSize,
-  a9 as getMountStats,
-  bG as getPreset,
-  getPresetWithMode,
-  aa as getRenderContext,
-  getSurfaceColor,
-  getTextColor,
-  getThemedProps,
-  aQ as getWorldLayoutRect,
-  graphicsCreator,
-  graphicsPatcher,
-  bw as hex,
-  bp as hexToNumber,
-  b1 as host,
-  imageCreator,
-  imagePatcher,
-  bh as isAnimatedSignal,
-  jsx,
-  jsxs,
-  bx as lighten,
-  by as lightenHex,
-  memo,
-  b4 as mergeThemes,
-  bH as midnightPreset,
-  b8 as mount,
-  mountJSX as mountComponent,
-  mountJSX,
-  nineSliceCreator,
-  nineSlicePatcher,
-  noMemo,
-  b0 as nodeRegistry,
-  a5 as normalizeCornerRadius,
-  a6 as normalizeEdgeInsets,
-  normalizeGap,
-  b6 as normalizeVNodeLike,
-  bq as numberToHex,
-  br as numberToRgb,
-  bI as oceanBluePreset,
-  particlesCreator,
-  particlesPatcher,
-  ba as patchVNode,
-  bf as portalRegistry,
-  bJ as presets,
-  register,
-  registerBuiltins,
-  aZ as releaseAllSVGTextures,
-  aX as releaseSVGTexture,
-  aY as releaseSVGTextures,
-  remountAll,
-  resolveCameraFX,
-  ai as resolveEffect,
-  resolveFX,
-  resolveParticlePreset,
-  bs as rgbToHsl,
-  bt as rgbToNumber,
-  setColorMode,
-  setColorPreset,
-  aT as shallowEqual,
-  aU as shouldComponentUpdate,
-  spriteCreator,
-  spritePatcher,
-  ad as svgToTexture,
-  textCreator,
-  textPatcher,
-  themeRegistry,
-  tileSpriteCreator,
-  tileSpritePatcher,
-  b9 as unmount,
-  bb as unmountJSX,
-  bi as unwrapSignal,
-  aN as useBackgroundGraphics,
-  useBlur,
-  useCallback,
-  useCameraFX,
-  useCameraFade,
-  useCameraFlash,
-  useCameraZoom,
-  useColorMode,
-  useColors,
-  useEffect,
-  useFX,
-  aG as useForceRedraw,
-  ae as useGameObjectEffect,
-  useGlow,
-  u as useIconPreload,
-  aS as useLayoutEffect,
-  aP as useLayoutRect,
-  aK as useLayoutSize,
-  aH as useMemo,
-  useParticles,
-  aV as useRedraw,
-  useRef,
-  a_ as useSVGTexture,
-  a$ as useSVGTextures,
-  useScene,
-  useScreenShake,
-  useShadow,
-  bm as useSpring,
-  bn as useSprings,
-  useState,
-  useTheme,
-  useThemeSubscription,
-  useThemeTokens,
-  aI as useViewportSize,
-  aR as useWorldLayoutRect,
-  viewCreator,
-  viewPatcher,
-  viewportRegistry,
-  aF as withHooks
-};
-//# sourceMappingURL=index.js.map
+//#endregion
+export { Accordion, AlertDialog, Button, CAMERA_FX_REGISTRY, CharText, CharTextInput, DEFAULT_BACKGROUND, DEFAULT_CAMERA_FX, DEFAULT_EFFECT, DEFAULT_FX, DEFAULT_SPRING_CONFIG, DOMInputElement, DebugLogger, DevConfig, DevPresets, Dialog, Divider, Dropdown, EFFECT_REGISTRY, FX_REGISTRY, Fragment, Graphics, HexColor, Icon, Image, Joystick, KeyboardInputManager, Modal, NineSlice, NineSliceButton, PARTICLE_PRESET_REGISTRY, Particles, PhaserJSXPlugin, Portal, RadioButton, RadioGroup, RangeSlider, RefOriginView, SPRING_PRESETS, ScrollSlider, ScrollView, Sidebar, Slider, SpringPhysics, Sprite, Tab, TabPanel, Tabs, Text, TileSprite, Toggle, TransformOriginView, View, WrapText, addSceneBackground, alpha, animatedSignal, applyCameraFXByName, applyDarkMode, applyEffectByName, applyFXByName, applyLightMode, buildDeathZonesFromLayout, buildEmitZone, buildEmitZoneFromLayout, calculateSliderSize, colorsToTheme, computed, createBlurFX, createBounceEffect, createBreatheEffect, createCameraFadeInFX, createCameraFadeOutFX, createCameraFlashFX, createCameraShakeFX, createCameraZoomFX, createColorMatrixFX, createDefaultTheme, createElement, createFadeEffect, createFlashEffect, createFlipInEffect, createFlipOutEffect, createFloatEffect, createGlowFX, createIconComponent, createJelloEffect, createNoneEffect, createPhaserJSXPlugin, createPixelateFX, createPressEffect, createPulseEffect, createShadowFX, createShakeEffect, createSlideInEffect, createSlideOutEffect, createSpinEffect, createSwingEffect, createTadaEffect, createTextStyle, createTextStyleTokens, createTheme, createVignetteFX, createWiggleEffect, createWobbleEffect, createZoomInEffect, createZoomOutEffect, darken, darkenHex, defaultRadiusTokens, defaultSizeTokens, defaultSpacingTokens, defaultTextStyleTokens, defaultTheme, disposeCtx, ensureContrast, forestGreenPreset, generateColorScale, getAvailablePresets, getBackgroundColor, getBackgroundGraphics, getBorderColor, getContrastRatio, getCurrent, getCurrentPreset, getLayoutProps, getLayoutRect, getLayoutSize, getMountStats, getPreset, getPresetWithMode, getRenderContext, getSurfaceColor, getTextColor, getThemedProps, getWorldLayoutRect, graphicsCreator, graphicsPatcher, hex, hexToNumber, host, imageCreator, imagePatcher, isAnimatedSignal, jsx, jsxs, lighten, lightenHex, memo, mergeThemes, midnightPreset, mount, mountJSX as mountComponent, mountJSX, nineSliceCreator, nineSlicePatcher, noMemo, nodeRegistry, normalizeCornerRadius, normalizeEdgeInsets, normalizeGap, normalizeVNodeLike, numberToHex, numberToRgb, oceanBluePreset, particlesCreator, particlesPatcher, patchVNode, portalRegistry, presets, register, registerBuiltins, releaseAllSVGTextures, releaseSVGTexture, releaseSVGTextures, remountAll, resolveCameraFX, resolveEffect, resolveFX, resolveParticlePreset, rgbToHsl, rgbToNumber, setColorMode, setColorPreset, shallowEqual, shouldComponentUpdate, spriteCreator, spritePatcher, svgToTexture, textCreator, textPatcher, themeRegistry, tileSpriteCreator, tileSpritePatcher, unmount, unmountJSX, unwrapSignal, useBackgroundGraphics, useBlur, useCallback, useCameraFX, useCameraFade, useCameraFlash, useCameraZoom, useColorMode, useColors, useEffect, useFX, useForceRedraw, useGameObjectEffect, useGlow, useIconPreload, useLayoutEffect, useLayoutRect, useLayoutSize, useMemo, useParticles, useRedraw, useRef, useSVGTexture, useSVGTextures, useScene, useScreenShake, useShadow, useSpring, useSprings, useState, useTheme, useThemeSubscription, useThemeTokens, useViewportSize, useWorldLayoutRect, viewCreator, viewPatcher, viewportRegistry, withHooks };
+
+//# sourceMappingURL=index.js.map