@number10/phaserjsx 0.2.0 → 0.4.0

package/dist/{TransformOriginView-BDM6GE2F.cjs → TransformOriginView-Bx81YEUU.cjs}

@@ -75,623 +75,6 @@ const host = {
   layout() {
   }
 };
-function shallowEqual$1(a, b) {
-  if (!a || !b) return a === b;
-  if (a.length !== b.length) return false;
-  return a.every((val, i) => val === b[i]);
-}
-function applyGraphicsProps(node, _prev, next) {
-  const prevDeps = node.__drawDependencies;
-  const nextDeps = next.dependencies;
-  const depsChanged2 = !shallowEqual$1(prevDeps, nextDeps);
-  if (depsChanged2 && next.onDraw) {
-    if (next.autoClear !== false) {
-      node.clear();
-    }
-    next.onDraw(node, next);
-    node.__drawDependencies = nextDeps;
-  }
-}
-function applyGraphicsLayout(node, prev, next) {
-  node.__layoutProps = next;
-  if (prev.width !== next.width || prev.height !== next.height || prev.headless !== next.headless) {
-    node.__getLayoutSize = () => {
-      if (next.headless ?? true) {
-        return { width: 0.01, height: 0.01 };
-      }
-      return {
-        width: typeof next.width === "number" ? next.width : 0,
-        height: typeof next.height === "number" ? next.height : 0
-      };
-    };
-  }
-}
-function normalizeVisible$1(visible) {
-  if (visible === void 0) return true;
-  if (typeof visible === "boolean") return visible;
-  if (visible === "visible") return true;
-  if (visible === "invisible" || visible === "none") return false;
-  return true;
-}
-function applyPhaserProps(node, prev, next) {
-  if (prev.alpha !== next.alpha && typeof next.alpha === "number") {
-    node.setAlpha?.(next.alpha);
-  }
-  if (prev.depth !== next.depth && typeof next.depth === "number") {
-    node.setDepth?.(next.depth);
-  }
-  if (prev.visible !== next.visible) {
-    const visibleValue = normalizeVisible$1(next.visible);
-    node.visible = visibleValue;
-  }
-}
-function applyTransformProps(node, prev, next) {
-  if (prev.x !== next.x && typeof next.x === "number") {
-    node.x = next.x;
-  }
-  if (prev.y !== next.y && typeof next.y === "number") {
-    node.y = next.y;
-  }
-  if (prev.rotation !== next.rotation && typeof next.rotation === "number") {
-    node.rotation = next.rotation;
-  }
-  const nextScale = next.scale;
-  const nextScaleX = next.scaleX;
-  const nextScaleY = next.scaleY;
-  const prevScale = prev.scale;
-  const prevScaleX = prev.scaleX;
-  const prevScaleY = prev.scaleY;
-  if (nextScale !== void 0 && nextScale !== prevScale) {
-    node.setScale?.(nextScale, nextScale);
-  } else if (nextScaleX !== prevScaleX || nextScaleY !== prevScaleY) {
-    const currentScaleX = node.scaleX ?? 1;
-    const currentScaleY = node.scaleY ?? 1;
-    const sx = nextScaleX ?? currentScaleX;
-    const sy = nextScaleY ?? currentScaleY;
-    node.setScale?.(sx, sy);
-  }
-}
-function createGraphicsLayout(graphics, props) {
-  if (props.headless === false) {
-    if (typeof props.width !== "number" || typeof props.height !== "number") {
-      throw new Error(
-        "Graphics component requires explicit width and height props when headless=false"
-      );
-    }
-  }
-  graphics.__layoutProps = props;
-  graphics.__getLayoutSize = () => {
-    if (graphics.__layoutProps?.headless ?? true) {
-      return { width: 0.01, height: 0.01 };
-    }
-    return {
-      width: props.width ?? 0,
-      height: props.height ?? 0
-    };
-  };
-  graphics.__drawDependencies = props.dependencies;
-}
-function normalizeVisible(visible) {
-  if (visible === void 0) return true;
-  if (typeof visible === "boolean") return visible;
-  if (visible === "visible") return true;
-  if (visible === "invisible" || visible === "none") return false;
-  return true;
-}
-function createPhaser(node, props) {
-  if (props.visible !== void 0) {
-    node.visible = normalizeVisible(props.visible);
-  }
-  if (props.depth !== void 0) {
-    node.setDepth(props.depth);
-  }
-  if (props.alpha !== void 0) {
-    node.setAlpha(props.alpha);
-  }
-}
-function createTransform(node, props) {
-  if (props.scaleX !== void 0 || props.scaleY !== void 0) {
-    node.setScale(
-      props.scaleX ?? 1,
-      props.scaleY ?? 1
-    );
-  }
-  if (props.rotation !== void 0) {
-    node.setRotation(props.rotation);
-  }
-}
-const graphicsCreator = (scene, props) => {
-  const graphics = scene.add.graphics();
-  graphics.setPosition(props.x ?? 0, props.y ?? 0);
-  createTransform(graphics, props);
-  createPhaser(graphics, props);
-  createGraphicsLayout(graphics, props);
-  if (props.onDraw) {
-    props.onDraw(graphics, props);
-  }
-  return graphics;
-};
-const graphicsPatcher = (node, prev, next) => {
-  applyTransformProps(node, prev, next);
-  applyPhaserProps(node, prev, next);
-  applyGraphicsProps(node, prev, next);
-  applyGraphicsLayout(node, prev, next);
-};
-function calculateFitScale$1(image, targetWidth, targetHeight, fit = "fill") {
-  const textureWidth = image.width;
-  const textureHeight = image.height;
-  if (textureWidth === 0 || textureHeight === 0) {
-    return { scaleX: 1, scaleY: 1 };
-  }
-  if (fit === "fill") {
-    return {
-      scaleX: targetWidth / textureWidth,
-      scaleY: targetHeight / textureHeight
-    };
-  }
-  const targetAspect = targetWidth / targetHeight;
-  const textureAspect = textureWidth / textureHeight;
-  if (fit === "contain") {
-    const scale = targetAspect > textureAspect ? targetHeight / textureHeight : targetWidth / textureWidth;
-    return { scaleX: scale, scaleY: scale };
-  }
-  if (fit === "cover") {
-    const scale = targetAspect < textureAspect ? targetHeight / textureHeight : targetWidth / textureWidth;
-    return { scaleX: scale, scaleY: scale };
-  }
-  return { scaleX: 1, scaleY: 1 };
-}
-function applyImageProps(image, prev, next) {
-  const textureChanged = prev.texture !== next.texture || prev.frame !== next.frame;
-  if (textureChanged && next.texture) {
-    image.setTexture(next.texture, next.frame);
-  }
-  if (prev.tint !== next.tint) {
-    if (typeof next.tint === "number") {
-      image.setTint(next.tint);
-    } else {
-      image.clearTint();
-    }
-  }
-  if (prev.originX !== next.originX || prev.originY !== next.originY) {
-    const originX = next.originX ?? image.originX;
-    const originY = next.originY ?? image.originY;
-    image.setOrigin(originX, originY);
-  }
-  const displayWidthChanged = prev.displayWidth !== next.displayWidth;
-  const displayHeightChanged = prev.displayHeight !== next.displayHeight;
-  const fitChanged = prev.fit !== next.fit;
-  if (displayWidthChanged || displayHeightChanged || fitChanged || textureChanged) {
-    if (typeof next.displayWidth === "number" && typeof next.displayHeight === "number") {
-      const { scaleX, scaleY } = calculateFitScale$1(
-        image,
-        next.displayWidth,
-        next.displayHeight,
-        next.fit
-      );
-      image.setScale(scaleX, scaleY);
-    } else if (typeof next.displayWidth === "number") {
-      const scale = next.displayWidth / image.width;
-      image.setScale(scale);
-    } else if (typeof next.displayHeight === "number") {
-      const scale = next.displayHeight / image.height;
-      image.setScale(scale, scale);
-    }
-  }
-}
-function applyImageLayout(image, prev, next) {
-  image.__layoutProps = next;
-  if (prev.headless !== next.headless) {
-    image.__getLayoutSize = () => {
-      if (image.__layoutProps?.headless) {
-        return { width: 0.01, height: 0.01 };
-      }
-      return {
-        width: image.displayWidth,
-        height: image.displayHeight
-      };
-    };
-  }
-}
-function createImageLayout(image, props) {
-  image.__layoutProps = props;
-  image.__getLayoutSize = () => {
-    if (image.__layoutProps?.headless) {
-      return { width: 0.01, height: 0.01 };
-    }
-    return {
-      width: image.displayWidth,
-      height: image.displayHeight
-    };
-  };
-}
-const imageCreator = (scene, props) => {
-  const image = scene.add.image(props.x ?? 0, props.y ?? 0, props.texture, props.frame);
-  if (props.headless) {
-    image.setOrigin(0.5, 0.5);
-  } else {
-    image.setOrigin(0, 0);
-  }
-  if (props.originX !== void 0 || props.originY !== void 0) {
-    image.setOrigin(props.originX ?? image.originX, props.originY ?? image.originY);
-  }
-  const normalizedProps = { ...props };
-  if (props.headless) {
-    delete normalizedProps.padding;
-    delete normalizedProps.margin;
-    delete normalizedProps.gap;
-  } else {
-    if (normalizedProps.rotation !== void 0) {
-      delete normalizedProps.rotation;
-    }
-  }
-  createTransform(image, normalizedProps);
-  createPhaser(image, normalizedProps);
-  if (props.tint !== void 0) {
-    image.setTint(props.tint);
-  }
-  if (props.displayWidth !== void 0 || props.displayHeight !== void 0) {
-    if (props.displayWidth !== void 0 && props.displayHeight !== void 0) {
-      const fit = props.fit ?? "fill";
-      const textureWidth = image.width;
-      const textureHeight = image.height;
-      if (textureWidth > 0 && textureHeight > 0) {
-        if (fit === "fill") {
-          image.setDisplaySize(props.displayWidth, props.displayHeight);
-        } else if (fit === "contain") {
-          const targetAspect = props.displayWidth / props.displayHeight;
-          const textureAspect = textureWidth / textureHeight;
-          const scale = targetAspect > textureAspect ? props.displayHeight / textureHeight : props.displayWidth / textureWidth;
-          image.setScale(scale);
-        } else if (fit === "cover") {
-          const targetAspect = props.displayWidth / props.displayHeight;
-          const textureAspect = textureWidth / textureHeight;
-          const scale = targetAspect < textureAspect ? props.displayHeight / textureHeight : props.displayWidth / textureWidth;
-          image.setScale(scale);
-        }
-      }
-    } else if (props.displayWidth !== void 0) {
-      const scale = props.displayWidth / image.width;
-      image.setScale(scale);
-    } else if (props.displayHeight !== void 0) {
-      const scale = props.displayHeight / image.height;
-      image.setScale(scale);
-    }
-  }
-  createImageLayout(image, normalizedProps);
-  if (props.onReady) {
-    props.onReady(image);
-  }
-  return image;
-};
-const imagePatcher = (node, prev, next) => {
-  if (prev.headless !== next.headless) {
-    if (next.headless) {
-      node.setOrigin(0.5, 0.5);
-    } else {
-      node.setOrigin(0, 0);
-    }
-  }
-  const normalizedPrev = { ...prev };
-  const normalizedNext = { ...next };
-  if (next.headless) {
-    delete normalizedNext.padding;
-    delete normalizedNext.margin;
-    delete normalizedNext.gap;
-  } else {
-    if (normalizedNext.rotation !== void 0) {
-      delete normalizedNext.rotation;
-    }
-  }
-  if (prev.headless) {
-    delete normalizedPrev.padding;
-    delete normalizedPrev.margin;
-    delete normalizedPrev.gap;
-  } else {
-    if (normalizedPrev.rotation !== void 0) {
-      delete normalizedPrev.rotation;
-    }
-  }
-  applyTransformProps(node, normalizedPrev, normalizedNext);
-  applyPhaserProps(node, normalizedPrev, normalizedNext);
-  applyImageProps(node, normalizedPrev, normalizedNext);
-  applyImageLayout(node, normalizedPrev, normalizedNext);
-};
-function applyNineSliceProps(nineSlice, prev, next) {
-  const textureChanged = prev.texture !== next.texture || prev.frame !== next.frame;
-  if (textureChanged && next.texture) {
-    nineSlice.setTexture(next.texture, next.frame);
-  }
-  const sliceChanged = prev.leftWidth !== next.leftWidth || prev.rightWidth !== next.rightWidth || prev.topHeight !== next.topHeight || prev.bottomHeight !== next.bottomHeight;
-  if (sliceChanged) {
-    const width = typeof next.width === "number" ? next.width : nineSlice.width;
-    const height = typeof next.height === "number" ? next.height : nineSlice.height;
-    nineSlice.setSlices(
-      width,
-      height,
-      next.leftWidth ?? prev.leftWidth ?? 0,
-      next.rightWidth ?? prev.rightWidth ?? 0,
-      next.topHeight ?? prev.topHeight,
-      next.bottomHeight ?? prev.bottomHeight
-    );
-  }
-  const prevWidth = typeof prev.width === "number" ? prev.width : nineSlice.width;
-  const nextWidth = typeof next.width === "number" ? next.width : nineSlice.width;
-  const prevHeight = typeof prev.height === "number" ? prev.height : nineSlice.height;
-  const nextHeight = typeof next.height === "number" ? next.height : nineSlice.height;
-  if (prevWidth !== nextWidth || prevHeight !== nextHeight) {
-    nineSlice.setSize(nextWidth, nextHeight);
-  }
-  if (prev.tint !== next.tint) {
-    if (next.tint !== void 0) {
-      nineSlice.setTint(next.tint);
-    } else {
-      nineSlice.clearTint();
-    }
-  }
-}
-function applyNineSliceLayout(nineSlice, prev, next) {
-  nineSlice.__layoutProps = next;
-  if (prev.width !== next.width || prev.height !== next.height) {
-    nineSlice.__getLayoutSize = () => {
-      return {
-        width: nineSlice.width,
-        height: nineSlice.height
-      };
-    };
-  }
-}
-function createNineSliceLayout(nineSlice, props) {
-  nineSlice.__layoutProps = props;
-  nineSlice.__getLayoutSize = () => {
-    return {
-      width: nineSlice.width,
-      height: nineSlice.height
-    };
-  };
-}
-const nineSliceCreator = (scene, props) => {
-  const initialWidth = typeof props.width === "number" ? props.width : 64;
-  const initialHeight = typeof props.height === "number" ? props.height : 64;
-  const nineSlice = scene.add.nineslice(
-    props.x ?? 0,
-    props.y ?? 0,
-    props.texture,
-    props.frame,
-    initialWidth,
-    initialHeight,
-    props.leftWidth,
-    props.rightWidth,
-    props.topHeight,
-    props.bottomHeight
-  );
-  nineSlice.setOrigin(0, 0);
-  if (props.tint !== void 0) {
-    nineSlice.setTint(props.tint);
-  }
-  createTransform(nineSlice, props);
-  createPhaser(nineSlice, props);
-  createNineSliceLayout(nineSlice, props);
-  return nineSlice;
-};
-const nineSlicePatcher = (node, prev, next) => {
-  applyTransformProps(node, prev, next);
-  applyPhaserProps(node, prev, next);
-  applyNineSliceProps(node, prev, next);
-  applyNineSliceLayout(node, prev, next);
-};
-function 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);
-};
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -6644,10 +6027,6 @@ function resolveCalcOperand(operand, parentSize, viewportSize) {
     }
     if (operand.type === "percent") {
       if (parentSize === void 0) {
-        DebugLogger.warn(
-          "Size",
-          "Cannot resolve percentage in calc() without parent size. Using 0."
-        );
         return 0;
       }
       return parentSize * operand.value / 100;
@@ -6770,213 +6149,6 @@ function clampSize(size, minSize, maxSize, parentSize, fallbackSize, parentPaddi
   }
   return clamped;
 }
-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;
-  const prevWidth = typeof prev.width === "number" ? prev.width : 100;
-  const nextWidth = typeof next.width === "number" ? next.width : 100;
-  const prevHeight = typeof prev.height === "number" ? prev.height : 100;
-  const nextHeight = typeof next.height === "number" ? next.height : 100;
-  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);
-        }
-      }
-    }
-  }
-}
 const DEFAULT_GESTURE_CONFIG = {
   longPressDuration: 500,
   doubleTapDelay: 300,
@@ -7055,6 +6227,9 @@ class GestureManager {
       this.activePointerDown = null;
     }
     this.hoveredContainers.delete(container);
+    for (const hitContainers of this.activeContainersForMove.values()) {
+      hitContainers.delete(container);
+    }
   }
   /**
    * Check if a container is registered
@@ -7233,8 +6408,8 @@ class GestureManager {
           this.activePointerDown = {
             pointerId: pointer.id,
             container: state.container,
-            startX: pointer.x,
-            startY: pointer.y
+            startX: pointer.worldX,
+            startY: pointer.worldY
           };
           state.longPressTriggered = false;
           state.pointerDownTime = Date.now();
@@ -7256,12 +6431,31 @@ class GestureManager {
               }
             }, state.config.longPressDuration);
           }
-          state.pointerDownPosition = { x: pointer.x, y: pointer.y };
+          state.pointerDownPosition = { x: pointer.worldX, y: pointer.worldY };
         }
       }
     }
     if (hitContainers.size > 0) {
       this.activeContainersForMove.set(pointer.id, hitContainers);
+      this.bubbleEvent(
+        pointer,
+        "onTouchMove",
+        (targetState, targetLocalPos) => {
+          const isInside = this.isPointerInContainer(pointer, targetState);
+          const data = this.createEventData(
+            pointer,
+            targetLocalPos.x,
+            targetLocalPos.y,
+            targetState.hitArea.width,
+            targetState.hitArea.height,
+            { dx: 0, dy: 0, isInside, state: "start" }
+          );
+          targetState.callbacks.onTouchMove?.(data);
+          targetState.isFirstMove = false;
+          return data.isPropagationStopped();
+        },
+        hitContainers
+      );
     }
   }
   /**
@@ -7283,8 +6477,8 @@ class GestureManager {
     const touchDuration = state.pointerDownTime ? Date.now() - state.pointerDownTime : 0;
     const isTouchTooLong = touchDuration > state.config.maxTouchDuration;
     const last = this.lastPointerPositions.get(pointer.id);
-    const dx = last ? pointer.x - last.x : 0;
-    const dy = last ? pointer.y - last.y : 0;
+    const dx = last ? pointer.worldX - last.x : 0;
+    const dy = last ? pointer.worldY - last.y : 0;
     const hitContainers = this.activeContainersForMove.get(pointer.id);
     this.bubbleEvent(
       pointer,
@@ -7420,8 +6614,8 @@ class GestureManager {
         state.longPressTimer = void 0;
       }
       const last = this.lastPointerPositions.get(pointer.id);
-      const dx = last ? pointer.x - last.x : 0;
-      const dy = last ? pointer.y - last.y : 0;
+      const dx = last ? pointer.worldX - last.x : 0;
+      const dy = last ? pointer.worldY - last.y : 0;
       const hitContainers = this.activeContainersForMove.get(pointer.id);
       this.bubbleEvent(
         pointer,
@@ -7459,9 +6653,9 @@ class GestureManager {
    */
   handlePointerMove(pointer) {
     const last = this.lastPointerPositions.get(pointer.id);
-    const dx = last ? pointer.x - last.x : 0;
-    const dy = last ? pointer.y - last.y : 0;
-    this.lastPointerPositions.set(pointer.id, { x: pointer.x, y: pointer.y });
+    const dx = last ? pointer.worldX - last.x : 0;
+    const dy = last ? pointer.worldY - last.y : 0;
+    this.lastPointerPositions.set(pointer.id, { x: pointer.worldX, y: pointer.worldY });
     this.detectHoverChanges(pointer);
     if (!this.activePointerDown || pointer.id !== this.activePointerDown.pointerId) {
       return;
@@ -7535,7 +6729,7 @@ class GestureManager {
   getLocalPosition(pointer, container) {
     const matrix = container.getWorldTransformMatrix();
     const inverseMatrix = matrix.invert();
-    const localPos = inverseMatrix.transformPoint(pointer.x, pointer.y);
+    const localPos = inverseMatrix.transformPoint(pointer.worldX, pointer.worldY);
     return { x: localPos.x, y: localPos.y };
   }
   /**
@@ -7605,6 +6799,7 @@ class GestureManager {
     const scaleY = canvas.height / rect.height;
     pointer.x = (event.clientX - rect.left) * scaleX;
     pointer.y = (event.clientY - rect.top) * scaleY;
+    pointer.updateWorldPoint(pointer.camera ?? this.scene.cameras.main);
     const containersUnderPointer = [];
     Array.from(this.containers.values()).forEach((state, originalIndex) => {
       if (!state.callbacks.onWheel) return;
@@ -7705,83 +6900,6 @@ function getGestureManager(scene) {
   }
   return manager;
 }
-function applyGesturesProps(scene, container, prev, next) {
-  if (!scene || !scene.sys || !scene.data) {
-    console.warn("applyGesturesProps: Invalid scene or scene not initialized");
-    return;
-  }
-  if (!scene.sys.isActive() || scene.sys.game === null) {
-    console.warn("applyGesturesProps: Scene is not active or game is null");
-    return;
-  }
-  const hasAnyGesture = !!(next.onTouch || next.onTouchOutside || next.onTouchMove || next.onDoubleTap || next.onLongPress || next.onHoverStart || next.onHoverEnd || next.onWheel);
-  const hadAnyGesture = !!(prev.onTouch || prev.onTouchOutside || prev.onTouchMove || prev.onDoubleTap || prev.onLongPress || prev.onHoverStart || prev.onHoverEnd || prev.onWheel);
-  const prevEnabled = hadAnyGesture && prev.enableGestures !== false;
-  const nextEnabled = hasAnyGesture && next.enableGestures !== false;
-  const manager = getGestureManager(scene);
-  if (!prevEnabled && nextEnabled && hasAnyGesture) {
-    const containerWithLayout = container;
-    let width = 100;
-    let height = 100;
-    if (containerWithLayout.__getLayoutSize) {
-      const size = containerWithLayout.__getLayoutSize();
-      width = size.width;
-      height = size.height;
-    } else {
-      const bounds = container.getBounds();
-      width = bounds.width || 100;
-      height = bounds.height || 100;
-    }
-    const hitArea = new Phaser$1.Geom.Rectangle(0, 0, width, height);
-    const callbacks = {};
-    if (next.onTouch) callbacks.onTouch = next.onTouch;
-    if (next.onTouchOutside) callbacks.onTouchOutside = next.onTouchOutside;
-    if (next.onTouchMove) callbacks.onTouchMove = next.onTouchMove;
-    if (next.onDoubleTap) callbacks.onDoubleTap = next.onDoubleTap;
-    if (next.onLongPress) callbacks.onLongPress = next.onLongPress;
-    if (next.onHoverStart) callbacks.onHoverStart = next.onHoverStart;
-    if (next.onHoverEnd) callbacks.onHoverEnd = next.onHoverEnd;
-    if (next.onWheel) callbacks.onWheel = next.onWheel;
-    const config = {};
-    if (next.longPressDuration !== void 0) config.longPressDuration = next.longPressDuration;
-    if (next.doubleTapDelay !== void 0) config.doubleTapDelay = next.doubleTapDelay;
-    manager.registerContainer(container, callbacks, hitArea, config);
-    return;
-  }
-  if (prevEnabled && (!nextEnabled || !hasAnyGesture)) {
-    manager.unregisterContainer(container);
-    return;
-  }
-  if (nextEnabled && hasAnyGesture) {
-    const callbacksChanged = prev.onTouch !== next.onTouch || prev.onTouchOutside !== next.onTouchOutside || prev.onTouchMove !== next.onTouchMove || prev.onDoubleTap !== next.onDoubleTap || prev.onLongPress !== next.onLongPress || prev.onHoverStart !== next.onHoverStart || prev.onHoverEnd !== next.onHoverEnd || prev.onWheel !== next.onWheel;
-    if (callbacksChanged) {
-      const callbacks = {};
-      if (next.onTouch) callbacks.onTouch = next.onTouch;
-      if (next.onTouchOutside) callbacks.onTouchOutside = next.onTouchOutside;
-      if (next.onTouchMove) callbacks.onTouchMove = next.onTouchMove;
-      if (next.onDoubleTap) callbacks.onDoubleTap = next.onDoubleTap;
-      if (next.onLongPress) callbacks.onLongPress = next.onLongPress;
-      if (next.onHoverStart) callbacks.onHoverStart = next.onHoverStart;
-      if (next.onHoverEnd) callbacks.onHoverEnd = next.onHoverEnd;
-      if (next.onWheel) callbacks.onWheel = next.onWheel;
-      manager.updateCallbacks(container, callbacks);
-    }
-    const containerWithLayout = container;
-    let width = 100;
-    let height = 100;
-    if (containerWithLayout.__getLayoutSize) {
-      const size = containerWithLayout.__getLayoutSize();
-      width = size.width;
-      height = size.height;
-    } else {
-      const bounds = container.getBounds();
-      width = bounds.width || 100;
-      height = bounds.height || 100;
-    }
-    const hitArea = new Phaser$1.Geom.Rectangle(0, 0, width, height);
-    manager.updateHitArea(container, hitArea);
-  }
-}
 function normalizeEdgeInsets(value) {
   if (value === void 0) {
     return {};
@@ -8857,10 +7975,57 @@ const strategies = {
   row: new RowLayoutStrategy(),
   stack: new StackLayoutStrategy()
 };
+const LAYOUT_CYCLE_EPSILON = 0.5;
+const LAYOUT_CYCLE_TIME_MS = 100;
+const LAYOUT_CYCLE_MAX = 5;
+const LAYOUT_MAX_SIZE = 2e5;
+const layoutCycleGuard = /* @__PURE__ */ new WeakMap();
+function isCloseSize(a, b, epsilon) {
+  return Math.abs(a.width - b.width) < epsilon && Math.abs(a.height - b.height) < epsilon;
+}
 function invalidateParentLayoutIfNeeded(container, oldSize, newWidth, newHeight) {
-  if (!oldSize || oldSize.width === newWidth && oldSize.height === newHeight) {
+  if (!oldSize || Math.abs(oldSize.width - newWidth) < LAYOUT_CYCLE_EPSILON && Math.abs(oldSize.height - newHeight) < LAYOUT_CYCLE_EPSILON) {
+    return;
+  }
+  if (!Number.isFinite(newWidth) || !Number.isFinite(newHeight) || newWidth > LAYOUT_MAX_SIZE || newHeight > LAYOUT_MAX_SIZE) {
+    const containerWithProps = container;
+    DebugLogger.warn("layout", "Runaway layout size detected, skipping parent invalidation", {
+      oldSize,
+      newSize: { width: newWidth, height: newHeight },
+      containerProps: containerWithProps.__layoutProps,
+      childCount: containerWithProps.list?.length ?? 0
+    });
     return;
   }
+  const newSize = { width: newWidth, height: newHeight };
+  const now = Date.now();
+  const guard = layoutCycleGuard.get(container);
+  if (guard) {
+    const repeatsPrev = guard.prev ? isCloseSize(guard.prev, newSize, LAYOUT_CYCLE_EPSILON) : false;
+    if (repeatsPrev && now - guard.lastTime < LAYOUT_CYCLE_TIME_MS) {
+      guard.count += 1;
+    } else {
+      guard.count = 0;
+    }
+    guard.prev = guard.last;
+    guard.last = newSize;
+    guard.lastTime = now;
+    layoutCycleGuard.set(container, guard);
+    if (guard.count >= LAYOUT_CYCLE_MAX) {
+      DebugLogger.warn("layout", "Layout cycle detected, skipping parent invalidation", {
+        container,
+        oldSize,
+        newSize
+      });
+      return;
+    }
+  } else {
+    layoutCycleGuard.set(container, {
+      last: newSize,
+      count: 0,
+      lastTime: now
+    });
+  }
   const parent = container.parentContainer;
   if (!parent || !parent.__layoutProps) {
     return;
@@ -9245,87 +8410,6 @@ function calculateLayoutImmediate(container, containerProps, parentSize, parentP
 function calculateLayout(container, containerProps, parentSize, parentPadding) {
   LayoutBatchQueue.schedule(container, containerProps, parentSize, parentPadding);
 }
-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$1 = /* @__PURE__ */ new Set(["margin", "padding"]);
-function hasLayoutPropsChanged$1(prev, next) {
-  for (const prop of LAYOUT_RELEVANT_PROPS) {
-    const oldVal = prev[prop];
-    const newVal = next[prop];
-    if (DEEP_COMPARE_PROPS$1.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$1(prev, next)) {
-    const { parentSize, parentPadding } = getParentLayoutContext(node);
-    calculateLayout(node, next, parentSize, parentPadding);
-    updateGestureHitAreaIfNeeded(node);
-  }
-}
 class HexColor extends String {
   /**
    * Convert to Phaser number format
@@ -9819,6 +8903,10 @@ function buildDefaultTheme(colors) {
       alpha: 1,
       visible: true
     },
+    particles: {
+      alpha: 1,
+      visible: true
+    },
     // Public API (uppercase)
     View: {
       alpha: 1,
@@ -9850,6 +8938,10 @@ function buildDefaultTheme(colors) {
       alpha: 1,
       visible: true
     },
+    Particles: {
+      alpha: 1,
+      visible: true
+    },
     RadioButton: {
       selectedColor: colors.primary.DEFAULT.toNumber(),
       color: colors.border.medium.toNumber(),
@@ -10034,6 +9126,41 @@ function buildDefaultTheme(colors) {
         fontSize: "18px"
       }
     },
+    Tabs: {
+      tabListStyle: {
+        backgroundColor: colors.surface.dark.toNumber(),
+        padding: { left: 8, right: 8, top: 8, bottom: 0 },
+        cornerRadius: { tl: 6, tr: 6, bl: 0, br: 0 },
+        width: "fill",
+        gap: 10,
+        alignItems: "end",
+        justifyContent: "start"
+      },
+      tabStyle: {
+        backgroundColor: colors.surface.medium.toNumber(),
+        borderColor: colors.border.medium.toNumber(),
+        borderWidth: 1,
+        padding: { left: 8, right: 8, top: 8, bottom: 3 },
+        cornerRadius: { tl: 6, tr: 6, bl: 0, br: 0 }
+      },
+      tabActiveStyle: {
+        padding: { left: 8, right: 8, top: 8, bottom: 8 },
+        backgroundColor: colors.primary.DEFAULT.toNumber(),
+        borderColor: colors.primary.dark.toNumber(),
+        borderWidth: 2
+      },
+      tabDisabledStyle: {
+        alpha: 0.4
+      },
+      panelStyle: {
+        backgroundColor: colors.surface.light.toNumber(),
+        borderColor: colors.border.medium.toNumber(),
+        borderWidth: 1,
+        padding: 10,
+        cornerRadius: { tl: 0, tr: 0, bl: 6, br: 6 },
+        width: "fill"
+      }
+    },
     NineSliceButton: {},
     CharText: {
       charSpacing: 0,
@@ -10488,442 +9615,6 @@ function getThemedProps(componentName, localTheme, explicitProps) {
     nestedTheme: mergedNestedThemes
   };
 }
-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 bg = bgColor ?? "#000000dd";
-  let fillColor = 0;
-  let fillAlpha = 0.87;
-  if (typeof bg === "string") {
-    if (bg.startsWith("#")) {
-      const hex2 = bg.slice(1);
-      if (hex2.length === 8) {
-        fillColor = parseInt(hex2.slice(0, 6), 16);
-        fillAlpha = parseInt(hex2.slice(6, 8), 16) / 255;
-      } else if (hex2.length === 6) {
-        fillColor = parseInt(hex2, 16);
-        fillAlpha = 1;
-      }
-    }
-  }
-  graphics.fillStyle(fillColor, fillAlpha);
-  graphics.fillRoundedRect(-bgWidth / 2, -bgHeight / 2, bgWidth, bgHeight, cornerRadius);
-  const tooltipContainer = scene.add.container(0, 0, [graphics, text]);
-  tooltipContainer.setDepth(1e4);
-  const textBounds = tooltipContainer.getBounds();
-  const pos = calculateTooltipPosition(
-    targetBounds,
-    position,
-    offset,
-    textBounds.width,
-    textBounds.height
-  );
-  const themeAnim = tooltipTheme.animation || {};
-  const anim = config.animation || {};
-  const fadeInDuration = anim.fadeIn ?? themeAnim.fadeIn ?? 200;
-  const moveOffset = {
-    dx: anim.move?.dx ?? themeAnim.move?.dx ?? 0,
-    dy: anim.move?.dy ?? themeAnim.move?.dy ?? 0
-  };
-  const pulse = anim.pulse ?? themeAnim.pulse ?? false;
-  const pulseScale = anim.pulseScale ?? [0.75, 1.25];
-  tooltipContainer.setPosition(
-    pos.x + textBounds.width / 2 - moveOffset.dx,
-    pos.y + textBounds.height / 2 - moveOffset.dy
-  );
-  tooltipContainer.setAlpha(0);
-  state.tooltip = tooltipContainer;
-  const fadeTween = scene.tweens.add({
-    targets: tooltipContainer,
-    alpha: 1,
-    x: pos.x + textBounds.width / 2,
-    y: pos.y + textBounds.height / 2,
-    duration: fadeInDuration,
-    ease: "Cubic.Out"
-  });
-  state.activeTweens.push(fadeTween);
-  if (pulse) {
-    const pulseTween = scene.tweens.add({
-      targets: tooltipContainer,
-      scale: { from: pulseScale[0], to: pulseScale[1] },
-      duration: 600,
-      yoyo: true,
-      repeat: -1,
-      ease: "Sine.InOut"
-    });
-    state.activeTweens.push(pulseTween);
-  }
-  if (config.autoDismiss && config.autoDismiss > 0) {
-    state.autoDismissTimer = setTimeout(() => {
-      hideTooltip(container);
-    }, config.autoDismiss);
-  }
-}
-function hideTooltip(container) {
-  const state = tooltipStates.get(container);
-  if (!state || !state.isVisible) return;
-  state.isVisible = false;
-  const config = state.currentConfig;
-  state.currentConfig = null;
-  if (state.autoDismissTimer) {
-    clearTimeout(state.autoDismissTimer);
-    state.autoDismissTimer = null;
-  }
-  if (!state.tooltip) return;
-  const tooltip = state.tooltip;
-  const scene = tooltip.scene;
-  const theme = themeRegistry.getGlobalTheme();
-  const tooltipTheme = theme.Tooltip || {};
-  const themeAnim = tooltipTheme.animation || {};
-  const anim = config?.animation || {};
-  const fadeOutDuration = anim.fadeOut ?? themeAnim.fadeOut ?? 200;
-  state.activeTweens.forEach((tween) => tween.stop());
-  state.activeTweens = [];
-  scene.tweens.add({
-    targets: tooltip,
-    alpha: 0,
-    duration: fadeOutDuration,
-    ease: "Cubic.In",
-    onComplete: () => {
-      tooltip.destroy();
-    }
-  });
-  state.tooltip = null;
-}
-function applyTooltip(scene, container, nextCallback, existingOnHoverStart, existingOnHoverEnd) {
-  if (!tooltipStates.has(container)) {
-    tooltipStates.set(container, {
-      isVisible: false,
-      tooltip: null,
-      activeTweens: [],
-      showTimer: null,
-      hideTimer: null,
-      autoDismissTimer: null,
-      currentConfig: null
-    });
-    container.once("destroy", () => {
-      const state2 = tooltipStates.get(container);
-      if (state2) {
-        if (state2.showTimer) clearTimeout(state2.showTimer);
-        if (state2.hideTimer) clearTimeout(state2.hideTimer);
-        if (state2.autoDismissTimer) clearTimeout(state2.autoDismissTimer);
-        state2.activeTweens.forEach((tween) => tween.stop());
-        hideTooltip(container);
-        tooltipStates.delete(container);
-      }
-    });
-  }
-  const state = tooltipStates.get(container);
-  if (!state) {
-    throw new Error("applyTooltip: state not initialized");
-  }
-  const theme = themeRegistry.getGlobalTheme();
-  const tooltipTheme = theme.Tooltip || {};
-  const onHoverStart = (data) => {
-    if (existingOnHoverStart) existingOnHoverStart(data);
-    if (!nextCallback) return;
-    const result = nextCallback();
-    if (!result) return;
-    const config = typeof result === "string" ? { content: result } : result;
-    if (config.disabled) return;
-    if (state.hideTimer) {
-      clearTimeout(state.hideTimer);
-      state.hideTimer = null;
-    }
-    if (state.autoDismissTimer) {
-      clearTimeout(state.autoDismissTimer);
-      state.autoDismissTimer = null;
-    }
-    const showDelay = config.showDelay ?? tooltipTheme.showDelay ?? 500;
-    state.showTimer = setTimeout(() => {
-      showTooltip(scene, container, config);
-    }, showDelay);
-  };
-  const onHoverEnd = (data) => {
-    if (existingOnHoverEnd) existingOnHoverEnd(data);
-    if (state.showTimer) {
-      clearTimeout(state.showTimer);
-      state.showTimer = null;
-    }
-    const hideDelay = state.currentConfig?.hideDelay ?? tooltipTheme.hideDelay ?? 0;
-    if (hideDelay > 0) {
-      state.hideTimer = setTimeout(() => {
-        hideTooltip(container);
-      }, hideDelay);
-    } else {
-      hideTooltip(container);
-    }
-  };
-  return { onHoverStart, onHoverEnd };
-}
-function createBackground(scene, container, props) {
-  const hasBackground = props.backgroundColor !== void 0;
-  const hasBorder = props.borderColor !== void 0;
-  if (hasBackground || hasBorder) {
-    const width = typeof props.width === "number" ? props.width : 100;
-    const height = typeof props.height === "number" ? props.height : 100;
-    const bgColor = props.backgroundColor;
-    const bgAlpha = props.backgroundAlpha ?? 1;
-    const cornerRadius = props.cornerRadius ?? 0;
-    const borderColor = props.borderColor;
-    const borderWidth = props.borderWidth ?? 0;
-    const borderAlpha = props.borderAlpha ?? 1;
-    const background = scene.add.graphics();
-    if (bgColor !== void 0) {
-      background.fillStyle(bgColor, bgAlpha);
-    }
-    if (borderWidth > 0 && borderColor !== void 0) {
-      background.lineStyle(borderWidth, borderColor, borderAlpha);
-    }
-    if (cornerRadius !== 0) {
-      if (bgColor !== void 0) {
-        background.fillRoundedRect(0, 0, width, height, cornerRadius);
-      }
-      if (borderWidth > 0 && borderColor !== void 0) {
-        background.strokeRoundedRect(0, 0, width, height, cornerRadius);
-      }
-    } else {
-      if (bgColor !== void 0) {
-        background.fillRect(0, 0, width, height);
-      }
-      if (borderWidth > 0 && borderColor !== void 0) {
-        background.strokeRect(0, 0, width, height);
-      }
-    }
-    container.addAt(background, 0);
-    container.__background = background;
-    background.__isBackground = true;
-  }
-}
-function createGestures(scene, container, props) {
-  const hasAnyGesture = !!(props.onTouch || props.onTouchOutside || props.onTouchMove || props.onDoubleTap || props.onLongPress || props.onHoverStart || props.onHoverEnd || props.onWheel);
-  const shouldEnable = hasAnyGesture && props.enableGestures !== false;
-  if (!shouldEnable) {
-    return;
-  }
-  const manager = getGestureManager(scene);
-  const containerWithLayout = container;
-  let width = 100;
-  let height = 100;
-  if (containerWithLayout.__getLayoutSize) {
-    const size = containerWithLayout.__getLayoutSize();
-    width = size.width;
-    height = size.height;
-  } else {
-    const bounds = container.getBounds();
-    width = bounds.width || 100;
-    height = bounds.height || 100;
-  }
-  const hitArea = new Phaser$1.Geom.Rectangle(0, 0, width, height);
-  const callbacks = {};
-  if (props.onTouch) callbacks.onTouch = props.onTouch;
-  if (props.onTouchOutside) callbacks.onTouchOutside = props.onTouchOutside;
-  if (props.onTouchMove) callbacks.onTouchMove = props.onTouchMove;
-  if (props.onDoubleTap) callbacks.onDoubleTap = props.onDoubleTap;
-  if (props.onLongPress) callbacks.onLongPress = props.onLongPress;
-  if (props.onHoverStart) callbacks.onHoverStart = props.onHoverStart;
-  if (props.onHoverEnd) callbacks.onHoverEnd = props.onHoverEnd;
-  if (props.onWheel) callbacks.onWheel = props.onWheel;
-  const config = {};
-  if (props.longPressDuration !== void 0) config.longPressDuration = props.longPressDuration;
-  if (props.doubleTapDelay !== void 0) config.doubleTapDelay = props.doubleTapDelay;
-  if (props.maxTouchDuration !== void 0) config.maxTouchDuration = props.maxTouchDuration;
-  manager.registerContainer(container, callbacks, hitArea, config);
-}
-function createLayout(container, props) {
-  container.__layoutProps = props;
-  container.__getLayoutSize = () => {
-    const children = container.list;
-    const direction = props.direction ?? "column";
-    const paddingRaw = props.padding ?? {};
-    const padding = typeof paddingRaw === "number" ? { left: paddingRaw, top: paddingRaw, right: paddingRaw, bottom: paddingRaw } : paddingRaw;
-    const paddingLeft = padding.left ?? 0;
-    const paddingTop = padding.top ?? 0;
-    const paddingRight = padding.right ?? 0;
-    const paddingBottom = padding.bottom ?? 0;
-    const gapNormalized = normalizeGap(props.gap);
-    let maxWidth = 0;
-    let maxHeight = 0;
-    let totalMainSize = 0;
-    let childCount = 0;
-    for (const child of children) {
-      if (child.__isBackground) {
-        continue;
-      }
-      childCount++;
-      const marginRaw = child.__layoutProps?.margin ?? {};
-      const margin = typeof marginRaw === "number" ? { top: marginRaw, right: marginRaw, bottom: marginRaw, left: marginRaw } : marginRaw;
-      const marginTop = margin.top ?? 0;
-      const marginBottom = margin.bottom ?? 0;
-      const marginLeft = margin.left ?? 0;
-      const marginRight = margin.right ?? 0;
-      const childSize = getChildSize(child);
-      if (direction === "row") {
-        totalMainSize += marginLeft + childSize.width + marginRight;
-        const childTotalHeight = marginTop + childSize.height + marginBottom;
-        maxHeight = Math.max(maxHeight, childTotalHeight);
-      } else {
-        const childTotalWidth = marginLeft + childSize.width + marginRight;
-        maxWidth = Math.max(maxWidth, childTotalWidth);
-        totalMainSize += marginTop + childSize.height + marginBottom;
-      }
-    }
-    if (childCount > 1) {
-      const gapValue = direction === "row" ? gapNormalized.horizontal : gapNormalized.vertical;
-      totalMainSize += gapValue * (childCount - 1);
-    }
-    const defaultWidth = direction === "row" ? totalMainSize + paddingLeft + paddingRight : maxWidth + paddingLeft + paddingRight;
-    const defaultHeight = direction === "row" ? maxHeight + paddingTop + paddingBottom : totalMainSize + paddingTop + paddingBottom;
-    const parsedWidth = parseSize(props.width);
-    const finalWidth = resolveSize(parsedWidth, void 0, defaultWidth);
-    const parsedHeight = parseSize(props.height);
-    const finalHeight = resolveSize(parsedHeight, void 0, defaultHeight);
-    return {
-      width: finalWidth,
-      height: finalHeight
-    };
-  };
-}
-function normalizeBackgroundProps(props) {
-  const bgProps = props;
-  const hasBackground = bgProps.backgroundColor !== void 0;
-  const hasBorder = bgProps.borderColor !== void 0;
-  if (!hasBackground && !hasBorder) {
-    return props;
-  }
-  const normalized = { ...props };
-  if (hasBackground && (bgProps.backgroundAlpha === void 0 || bgProps.backgroundAlpha === 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);
-};
 class RenderContext {
   constructor(scene) {
     this.scene = scene;
@@ -11250,9 +9941,9 @@ class MountRegistry {
    * @param rootNode - Root game object
    * @returns Registry ID for this mount
    */
-  register(parent, type, props, rootNode) {
+  register(parent, type, props, rootNode, vnode) {
     const id = this.nextId++;
-    this.entries.set(id, { id, parent, type, props, rootNode });
+    this.entries.set(id, { id, parent, type, props, rootNode, vnode });
     DebugLogger.log("vdom", `Registered mount ${id}`);
     return id;
   }
@@ -11267,6 +9958,49 @@ class MountRegistry {
       this.entries.delete(id);
     }
   }
+  /**
+   * Get a specific mount entry by registry ID
+   * @param id - Registry ID
+   * @returns Mount entry or undefined if not found
+   */
+  getEntry(id) {
+    return this.entries.get(id);
+  }
+  /**
+   * Find a mount entry by parent and optional key
+   * If key is provided, matches parent AND key
+   * If key is omitted, returns first mount with matching parent (backward compatibility)
+   * Validates that scene is still active and objects are not destroyed
+   * @param parent - Parent container or scene
+   * @param key - Optional unique key to distinguish multiple mounts on same parent
+   * @returns Mount entry or undefined if not found or invalid
+   */
+  findByParentAndKey(parent, key) {
+    for (const entry of this.entries.values()) {
+      const scene = entry.parent instanceof Phaser$1.Scene ? entry.parent : entry.parent.scene;
+      if (!scene || !scene.sys || !scene.sys.settings.active) {
+        DebugLogger.log("vdom", `Removing mount ${entry.id} - scene inactive`);
+        this.unregister(entry.id);
+        continue;
+      }
+      if (!entry.rootNode.active || entry.rootNode.scene !== scene) {
+        DebugLogger.log("vdom", `Removing mount ${entry.id} - rootNode destroyed or scene changed`);
+        this.unregister(entry.id);
+        continue;
+      }
+      const entryKey = entry.props.key;
+      if (key !== void 0) {
+        if (entry.parent === parent && entryKey === key) {
+          return entry;
+        }
+      } else {
+        if (entry.parent === parent) {
+          return entry;
+        }
+      }
+    }
+    return void 0;
+  }
   /**
    * Get all active mount entries
    * @returns Array of mount entries
@@ -11274,6 +10008,50 @@ class MountRegistry {
   getAllEntries() {
     return Array.from(this.entries.values());
   }
+  /**
+   * Get count of active mounts
+   * @returns Number of registered mounts
+   */
+  getCount() {
+    return this.entries.size;
+  }
+  /**
+   * Get statistics about active mounts
+   * @returns Object with mount statistics
+   */
+  getStats() {
+    const byType = /* @__PURE__ */ new Map();
+    const byParent = /* @__PURE__ */ new Map();
+    const byKey = /* @__PURE__ */ new Map();
+    const mounts = [];
+    for (const entry of this.entries.values()) {
+      const typeName = typeof entry.type === "string" ? entry.type : entry.type.name || "Component";
+      byType.set(typeName, (byType.get(typeName) ?? 0) + 1);
+      byParent.set(entry.parent, (byParent.get(entry.parent) ?? 0) + 1);
+      const key = entry.props.key;
+      if (key) {
+        byKey.set(key, (byKey.get(key) ?? 0) + 1);
+      }
+      const parentType = entry.parent instanceof Phaser$1.Scene ? "Scene" : "Container";
+      const mountInfo = {
+        id: entry.id,
+        type: typeName,
+        parentType,
+        propsKeys: Object.keys(entry.props)
+      };
+      if (key !== void 0) {
+        mountInfo.key = key;
+      }
+      mounts.push(mountInfo);
+    }
+    return {
+      totalMounts: this.entries.size,
+      byType,
+      byParent,
+      byKey,
+      mounts
+    };
+  }
   /**
    * Clear all entries (for testing)
    */
@@ -11283,6 +10061,9 @@ class MountRegistry {
   }
 }
 const mountRegistry = new MountRegistry();
+function getMountStats() {
+  return mountRegistry.getStats();
+}
 function remountAll() {
   const entries = mountRegistry.getAllEntries();
   if (entries.length === 0) {
@@ -11344,7 +10125,9 @@ function remountAll() {
         rootNode.__mountRootId = generateMountRootId();
       }
       entry.rootNode = rootNode;
+      entry.vnode = vnode;
       rootNode.__registryId = entry.id;
+      rootNode.__rootVNode = vnode;
       console.log("[REMOUNT] Successfully remounted entry", entry.id);
     } catch (error) {
       console.error("[REMOUNT] Failed to remount entry", entry.id, error);
@@ -11352,6 +10135,14 @@ function remountAll() {
   });
   console.log("[REMOUNT] Remount complete");
 }
+function normalizeVNodeLike(rendered) {
+  if (!rendered) return null;
+  if (Array.isArray(rendered)) {
+    const flat = rendered.flat(Infinity);
+    return { type: jsxRuntime.Fragment, props: {}, children: flat };
+  }
+  return rendered;
+}
 function flattenChildren(children) {
   if (!children) return [];
   return children.flat(Infinity);
@@ -11605,10 +10396,11 @@ function mount(parentOrScene, vnode) {
     };
     vnode = setVNodePropSafe(vnode, "__ctx", ctx);
     const propsWithChildren = vnode.children?.length ? { ...vnode.props ?? {}, children: vnode.children } : vnode.props;
-    let rendered = withHooks(
+    const renderedRaw = withHooks(
       ctx,
       () => vnode.type(propsWithChildren)
     );
+    let rendered = normalizeVNodeLike(renderedRaw);
     if (!rendered) {
       ctx.vnode = rendered;
       for (const run of ctx.effects) run();
@@ -11767,6 +10559,30 @@ function patchVNode(parent, oldV, newV) {
     warnUnnecessaryRemount(oldV, newV);
     unmount(oldV);
     mount(parent, newV);
+    if (parent && typeof parent === "object" && "list" in parent) {
+      const parentContainer = parent;
+      if (parentContainer.__layoutProps) {
+        let grandparentSize;
+        const grandparent = parentContainer.parentContainer;
+        if (grandparent && grandparent.__layoutProps && grandparent.__getLayoutSize) {
+          const gpSize = grandparent.__getLayoutSize();
+          const gpPadding = grandparent.__layoutProps.padding ?? 0;
+          const normGpPadding = typeof gpPadding === "number" ? { left: gpPadding, right: gpPadding, top: gpPadding, bottom: gpPadding } : {
+            left: gpPadding.left ?? 0,
+            right: gpPadding.right ?? 0,
+            top: gpPadding.top ?? 0,
+            bottom: gpPadding.bottom ?? 0
+          };
+          grandparentSize = {
+            width: gpSize.width - normGpPadding.left - normGpPadding.right,
+            height: gpSize.height - normGpPadding.top - normGpPadding.bottom
+          };
+        }
+        calculateLayout(parentContainer, parentContainer.__layoutProps, grandparentSize);
+        const renderContext = getRenderContext(parent);
+        renderContext.deferLayout(() => updateGestureHitAreaAfterLayout(parentContainer));
+      }
+    }
     return;
   }
   if (oldV.type === jsxRuntime.Fragment && newV.type === jsxRuntime.Fragment) {
@@ -11812,10 +10628,12 @@ function patchVNode(parent, oldV, newV) {
       if (!ctx) {
         if (!newV || !oldV) return;
         const propsWithChildren2 = newV.children?.length ? { ...newV.props ?? {}, children: newV.children } : newV.props;
-        const oldRendered = oldV.type(
+        const oldRenderedRaw = oldV.type(
           oldV.children?.length ? { ...oldV.props ?? {}, children: oldV.children } : oldV.props
         );
-        const newRendered = newV.type(propsWithChildren2);
+        const newRenderedRaw = newV.type(propsWithChildren2);
+        const oldRendered = normalizeVNodeLike(oldRenderedRaw);
+        const newRendered = normalizeVNodeLike(newRenderedRaw);
         patchVNode(parent, oldRendered, newRendered);
         return;
       }
@@ -11833,10 +10651,11 @@ function patchVNode(parent, oldV, newV) {
       if (!shouldComponentUpdate(ctx, propsWithChildren)) {
         return;
       }
-      const renderedNext = withHooks(
+      const renderedNextRaw = withHooks(
         ctx,
         () => newVWithCtx.type(propsWithChildren)
       );
+      const renderedNext = normalizeVNodeLike(renderedNextRaw);
       if (!renderedNext) {
         ctx.vnode = renderedNext;
         for (const run of ctx.effects) run();
@@ -11867,6 +10686,7 @@ function patchVNode(parent, oldV, newV) {
   }
   const nodeType = oldV.type;
   newV = setVNodePropSafe(newV, "__node", oldV.__node);
+  newV = setVNodePropSafe(newV, "__parent", parent);
   if (newV.__theme !== void 0) {
     const themed = setThemeSafe(oldV, newV.__theme);
     if (themed !== oldV) {
@@ -11911,6 +10731,11 @@ function patchVNode(parent, oldV, newV) {
     warnMissingKeys(newV, b);
   }
   const containerLayoutChanged = hasLayoutPropsChanged(oldV, newV);
+  const oldValidChildCount = a.filter((c) => c != null && c !== false).length;
+  const newValidChildCount = b.filter((c) => c != null && c !== false).length;
+  if (oldValidChildCount !== newValidChildCount) {
+    childrenChanged = true;
+  }
   for (let i = 0; i < len; i++) {
     const c1 = a[i], c2 = b[i];
     const isValidC1 = c1 != null && c1 !== false;
@@ -11991,7 +10816,74 @@ function patchVNode(parent, oldV, newV) {
   }
 }
 function mountJSX(parentOrScene, type, props = { width: 0, height: 0 }) {
-  const { width, height, disableAutoSize = false, ...componentProps } = props;
+  const key = props.key;
+  const existingMount = mountRegistry.findByParentAndKey(parentOrScene, key);
+  if (existingMount) {
+    if (existingMount.type !== type) {
+      const oldTypeName = typeof existingMount.type === "string" ? existingMount.type : existingMount.type.name || "Component";
+      const newTypeName = typeof type === "string" ? type : type.name || "Component";
+      console.warn(
+        `[PhaserJSX] mountJSX type mismatch: Attempting to patch <${oldTypeName}> with <${newTypeName}>.
+This usually means you're missing a 'key' prop to distinguish multiple mounts on the same parent.
+Solution: Add unique keys like { key: 'sidebar', ... } and { key: 'main', ... }`
+      );
+    }
+    const newWidth = props.width ?? existingMount.props.width;
+    const newHeight = props.height ?? existingMount.props.height;
+    const dimensionsChanged = newWidth !== existingMount.props.width || newHeight !== existingMount.props.height;
+    const { disableAutoSize: _d, key: _k, ...componentProps2 } = props;
+    if (dimensionsChanged) {
+      existingMount.props = {
+        ...existingMount.props,
+        ...componentProps2,
+        width: newWidth,
+        height: newHeight
+      };
+    } else {
+      existingMount.props = { ...existingMount.props, ...componentProps2 };
+    }
+    let newVNode;
+    if (existingMount.props.disableAutoSize) {
+      newVNode = {
+        type: existingMount.type,
+        props: {
+          ...componentProps2,
+          width: existingMount.props.width,
+          height: existingMount.props.height
+        },
+        children: []
+      };
+    } else {
+      const componentVNode = {
+        type: existingMount.type,
+        props: {
+          ...componentProps2,
+          width: existingMount.props.width,
+          height: existingMount.props.height
+        },
+        children: []
+      };
+      newVNode = {
+        type: SceneWrapper,
+        props: {
+          width: existingMount.props.width,
+          height: existingMount.props.height,
+          children: componentVNode
+        },
+        children: []
+      };
+    }
+    patchVNode(parentOrScene, existingMount.vnode, newVNode);
+    existingMount.vnode = newVNode;
+    const handle2 = existingMount.rootNode;
+    handle2.unmount = () => unmountJSX(handle2);
+    DebugLogger.log(
+      "vdom",
+      `Patched existing mount ${existingMount.id} on same parent (type: ${typeof type === "string" ? type : type.name})`
+    );
+    return handle2;
+  }
+  const { width, height, disableAutoSize = false, key: _key, ...componentProps } = props;
   const scene = parentOrScene instanceof Phaser$1.Scene ? parentOrScene : parentOrScene.scene;
   if (scene) {
     const renderContext = getRenderContext(parentOrScene);
@@ -12004,7 +10896,11 @@ function mountJSX(parentOrScene, type, props = { width: 0, height: 0 }) {
   } else {
     const componentVNode = {
       type,
-      props: componentProps,
+      props: {
+        ...componentProps,
+        width,
+        height
+      },
       children: []
     };
     vnode = {
@@ -12024,18 +10920,48 @@ function mountJSX(parentOrScene, type, props = { width: 0, height: 0 }) {
   if (rootNode instanceof Phaser$1.GameObjects.Container) {
     rootNode.__mountRootId = generateMountRootId();
   }
-  const registryId = mountRegistry.register(parentOrScene, type, props, rootNode);
+  rootNode.__rootVNode = vnode;
+  const registryId = mountRegistry.register(parentOrScene, type, props, rootNode, vnode);
   rootNode.__registryId = registryId;
-  return rootNode;
+  const handle = rootNode;
+  handle.unmount = () => unmountJSX(handle);
+  return handle;
+}
+function unmountJSX(target) {
+  const scene = target instanceof Phaser$1.Scene ? target : target.scene;
+  const targetWithVNode = target;
+  const sceneWithVNode = scene;
+  const rootVNode = targetWithVNode.__rootVNode ?? sceneWithVNode?.__rootVNode;
+  if (rootVNode) {
+    unmount(rootVNode);
+    if (targetWithVNode.__rootVNode === rootVNode) {
+      delete targetWithVNode.__rootVNode;
+    }
+    if (sceneWithVNode?.__rootVNode === rootVNode) {
+      delete sceneWithVNode.__rootVNode;
+    }
+    return;
+  }
+  if (targetWithVNode.__registryId !== void 0) {
+    const entry = mountRegistry.getEntry(targetWithVNode.__registryId);
+    if (entry?.vnode) {
+      unmount(entry.vnode);
+      return;
+    }
+  }
+  DebugLogger.log("vdom", "unmountJSX called but no root VNode found on target");
 }
 const vdom = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   createElement,
+  getMountStats,
   mount,
   mountJSX,
+  normalizeVNodeLike,
   patchVNode,
   remountAll,
-  unmount
+  unmount,
+  unmountJSX
 }, Symbol.toStringTag, { value: "Module" }));
 function getCurrent() {
   return _currentCtx;
@@ -12126,6 +11052,68 @@ function useScene() {
   const renderContext = getContextFromParent(ctx.parent);
   return renderContext.scene;
 }
+function useViewportSize() {
+  const ctx = getCurrent();
+  if (!ctx) {
+    throw new Error("useViewportSize must be called within a component");
+  }
+  const renderContext = getContextFromParent(ctx.parent);
+  return renderContext.getViewport();
+}
+function getLayoutSize(container) {
+  if (!container) return void 0;
+  const withLayout = container;
+  return withLayout.__getLayoutSize?.();
+}
+function useLayoutSize(ref) {
+  return getLayoutSize(ref.current);
+}
+function getLayoutProps(container) {
+  if (!container) return void 0;
+  const withLayout = container;
+  return withLayout.__layoutProps;
+}
+function getBackgroundGraphics(container) {
+  if (!container) return void 0;
+  const withBackground = container;
+  return withBackground.__background;
+}
+function useBackgroundGraphics(ref) {
+  return getBackgroundGraphics(ref.current);
+}
+function getLayoutRect(container) {
+  if (!container) return void 0;
+  const size = getLayoutSize(container);
+  if (!size) return void 0;
+  return {
+    x: container.x,
+    y: container.y,
+    width: size.width,
+    height: size.height
+  };
+}
+function useLayoutRect(ref) {
+  return getLayoutRect(ref.current);
+}
+function getWorldLayoutRect(container) {
+  if (!container) return void 0;
+  const size = getLayoutSize(container);
+  if (!size) return void 0;
+  const matrix = container.getWorldTransformMatrix();
+  const worldX = matrix.tx;
+  const worldY = matrix.ty;
+  const worldWidth = size.width * Math.abs(matrix.scaleX);
+  const worldHeight = size.height * Math.abs(matrix.scaleY);
+  return {
+    x: worldX,
+    y: worldY,
+    width: worldWidth,
+    height: worldHeight
+  };
+}
+function useWorldLayoutRect(ref) {
+  return getWorldLayoutRect(ref.current);
+}
 function useEffect(fn, deps) {
   const c = getCurrent();
   const i = c.index++;
@@ -12139,6 +11127,21 @@ function useEffect(fn, deps) {
     }
   });
 }
+function useLayoutEffect(fn, deps) {
+  const c = getCurrent();
+  const i = c.index++;
+  const slot = c.slots[i] ?? (c.slots[i] = { deps: void 0, cleanup: void 0 });
+  c.effects.push(() => {
+    if (!depsChanged(slot.deps, deps)) return;
+    if (typeof slot.cleanup === "function") slot.cleanup();
+    requestAnimationFrame(() => {
+      slot.cleanup = fn();
+    });
+    if (deps !== void 0) {
+      slot.deps = deps;
+    }
+  });
+}
 function depsChanged(a, b) {
   if (!a || !b) return true;
   if (a.length !== b.length) return true;
@@ -12191,7 +11194,7 @@ function scheduleUpdate(c) {
     }
     const componentProps = c.componentVNode.props ?? {};
     const propsWithChildren = c.componentVNode.children?.length ? { ...componentProps, children: c.componentVNode.children } : componentProps;
-    const nextVNode = withHooks(c, () => c.function(propsWithChildren));
+    const nextVNode = normalizeVNodeLike(withHooks(c, () => c.function(propsWithChildren)));
     patchVNode(c.parent, c.vnode, nextVNode);
     c.vnode = nextVNode;
     for (const run of c.effects) run();
@@ -12975,6 +11978,11 @@ function Button(props) {
     }
   );
 }
+function Graphics(props) {
+  const localTheme = useTheme();
+  const { props: themed, nestedTheme } = getThemedProps("Graphics", localTheme, props);
+  return /* @__PURE__ */ jsxRuntime.jsx("graphics", { ...themed, theme: nestedTheme });
+}
 function RadioButton(props) {
   const { props: themed, nestedTheme } = getThemedProps("RadioButton", void 0, {});
   const size = themed.size ?? 16;
@@ -13077,24 +12085,8 @@ function Text(props) {
   const { props: themed, nestedTheme } = getThemedProps("Text", localTheme, props);
   return /* @__PURE__ */ jsxRuntime.jsx("text", { ...themed, theme: nestedTheme });
 }
-const Sprite = "Sprite";
-const Graphics = "Graphics";
-const TileSprite = "TileSprite";
-function registerBuiltins() {
-  register("view", { create: viewCreator, patch: viewPatcher });
-  register("text", { create: textCreator, patch: textPatcher });
-  register("nineslice", { create: nineSliceCreator, patch: nineSlicePatcher });
-  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("Sprite", { create: spriteCreator, patch: spritePatcher });
-  register("Image", { create: imageCreator, patch: imagePatcher });
-  register("Graphics", { create: graphicsCreator, patch: graphicsPatcher });
-  register("TileSprite", { create: tileSpriteCreator, patch: tileSpritePatcher });
+function Particles(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("particles", { ...props });
 }
 function preprocessSvgForTinting(svg) {
   return svg.replace(/fill="currentColor"/gi, 'fill="#FFFFFF"').replace(/fill='currentColor'/gi, "fill='#FFFFFF'").replace(/fill:\s*currentColor/gi, "fill: #FFFFFF").replace(/fill="#000000"/gi, 'fill="#FFFFFF"').replace(/fill="#000"/gi, 'fill="#FFFFFF"').replace(/fill='#000000'/gi, "fill='#FFFFFF'").replace(/fill='#000'/gi, "fill='#FFFFFF'");
@@ -13998,6 +12990,15 @@ function Portal(props) {
   const depth = props.depth ?? 1e3;
   const scene = useScene();
   const blockEvents = props.blockEvents ?? true;
+  const mountedNodesRef = useRef([]);
+  const previousChildrenRef = useRef([]);
+  const normalizeChildren2 = (children) => {
+    if (!children) return [];
+    const flat = Array.isArray(children) ? children.flat(Infinity) : [children];
+    return flat.filter(
+      (child) => !!child && typeof child === "object" && "type" in child
+    );
+  };
   useEffect(() => {
     const portalContainer = portalRegistry.register(
       portalId,
@@ -14012,15 +13013,19 @@ function Portal(props) {
       portalContainer.add(blockerContainer);
       blockerContainer.setDepth(-1);
     }
-    const children = Array.isArray(props.children) ? props.children : [props.children];
+    const children = normalizeChildren2(props.children);
+    const mountedNodes = [];
     for (const child of children) {
       if (child) {
         const mountedNode = mount(portalContainer, child);
         if (mountedNode) {
           portalContainer.add(mountedNode);
+          mountedNodes.push(mountedNode);
         }
       }
     }
+    mountedNodesRef.current = mountedNodes;
+    previousChildrenRef.current = children;
     const gestureManager = getGestureManager(scene);
     if (blockEvents && blockerContainer) {
       const blocker = blockerContainer;
@@ -14067,7 +13072,31 @@ function Portal(props) {
       }
       portalRegistry.unregister(portalId);
     };
-  }, [portalId, depth, scene, props.children, blockEvents]);
+  }, [portalId, depth, scene, blockEvents]);
+  useEffect(() => {
+    const portal = portalRegistry.get(portalId);
+    if (!portal) return;
+    const portalContainer = portal.container;
+    const newChildren = normalizeChildren2(props.children);
+    const oldChildren = previousChildrenRef.current;
+    const maxLen = Math.max(oldChildren.length, newChildren.length);
+    for (let i = 0; i < maxLen; i++) {
+      const oldChild = oldChildren[i];
+      const newChild = newChildren[i];
+      if (oldChild && newChild) {
+        patchVNode(portalContainer, oldChild, newChild);
+      } else if (!oldChild && newChild) {
+        const mountedNode = mount(portalContainer, newChild);
+        if (mountedNode) {
+          portalContainer.add(mountedNode);
+          mountedNodesRef.current.push(mountedNode);
+        }
+      } else if (oldChild && !newChild) {
+        unmount(oldChild);
+      }
+    }
+    previousChildrenRef.current = newChildren;
+  }, [props.children, portalId]);
   return null;
 }
 function Modal(props) {
@@ -14154,19 +13183,7 @@ function Modal(props) {
       view.setVisible(false);
       backdrop.setVisible(false);
     }
-  }, [
-    backdropAnimation,
-    closeDurationMs,
-    isVisible,
-    openDurationMs,
-    props.onClosed,
-    props.onOpen,
-    props.onRequestClose,
-    props.show,
-    stopBackdropEffects,
-    stopViewEffects,
-    viewAnimation
-  ]);
+  }, [props.show]);
   useEffect(() => {
     if (!closeOnEscape || !props.show) return;
     const handleKeyDown = (e) => {
@@ -15465,18 +14482,29 @@ function Divider(props) {
 }
 function calculateSliderSize(size) {
   const { props: themed } = getThemedProps("ScrollSlider", void 0, {});
-  const sizeFactor = size === "large" ? 1.25 : size === "small" ? 0.75 : size === "tiny" ? 0.5 : 1;
+  const sizeFactor = size === "large" ? 1.25 : size === "small" ? 0.75 : size === "tiny" ? 0.5 : size === "micro" ? 0.25 : size === "nano" ? 0.125 : 1;
   const border = (themed.borderWidth ?? 1) * sizeFactor;
   const outer = (themed.size ?? 24) * sizeFactor;
   const dimension = outer - border * 2;
   return { border, outer, dimension };
 }
 function ScrollSlider(props) {
-  const { direction, scrollPosition, viewportSize, contentSize, onScroll } = props;
+  const {
+    direction,
+    scrollPosition,
+    viewportSize,
+    contentSize,
+    onScroll,
+    momentum = true,
+    onMomentumEnd
+  } = props;
   const { props: themed } = getThemedProps("ScrollSlider", void 0, {});
   const sliderRef = useRef(null);
   const isDraggingRef = useRef(false);
   const trackContainerRef = useRef(null);
+  const velocityRef = useRef(0);
+  const lastTimeRef = useRef(0);
+  const tweenRef = useRef(null);
   const isVertical = direction === "vertical";
   const { border, outer, dimension } = calculateSliderSize(props.size);
   const containerWithLayout = trackContainerRef.current;
@@ -15492,18 +14520,60 @@ function ScrollSlider(props) {
     data.stopPropagation();
     if (data.state === "start") {
       isDraggingRef.current = true;
+      velocityRef.current = 0;
+      lastTimeRef.current = Date.now();
+      if (tweenRef.current) {
+        tweenRef.current.stop();
+        tweenRef.current = null;
+      }
       return;
     }
     if (data.state === "end") {
       isDraggingRef.current = false;
+      if (momentum && Math.abs(velocityRef.current) > 0.1) {
+        startMomentum(scrollPosition);
+      } else if (onMomentumEnd) {
+        onMomentumEnd();
+      }
       return;
     }
     if (!isDraggingRef.current) return;
     const delta = isVertical ? data.dy ?? 0 : data.dx ?? 0;
+    const now = Date.now();
+    const deltaTime = now - lastTimeRef.current;
+    if (deltaTime > 0) {
+      velocityRef.current = delta / deltaTime * 1e3;
+      lastTimeRef.current = now;
+    }
     const newThumbPos = Math.max(0, Math.min(thumbRange, thumbPosition + delta));
     const newScrollPos = thumbRange > 0 ? newThumbPos / thumbRange * maxScroll : 0;
     onScroll(newScrollPos);
   };
+  const startMomentum = (startPos) => {
+    if (!sliderRef.current?.scene) return;
+    const scene = sliderRef.current.scene;
+    const duration = Math.min(1e3, Math.max(200, Math.abs(velocityRef.current)));
+    const targetScrollPos = Math.max(
+      0,
+      Math.min(maxScroll, startPos + velocityRef.current * (duration / 1e3))
+    );
+    tweenRef.current = scene.tweens.add({
+      targets: { pos: startPos },
+      pos: targetScrollPos,
+      duration,
+      ease: "Quad.easeOut",
+      onUpdate: (tween) => {
+        const target = tween.targets[0];
+        onScroll(target.pos);
+      },
+      onComplete: () => {
+        tweenRef.current = null;
+        if (onMomentumEnd) {
+          onMomentumEnd();
+        }
+      }
+    });
+  };
   const handleBackgroundTouch = (data) => {
     data.stopPropagation();
     const localPos = isVertical ? data.localY ?? 0 : data.localX ?? 0;
@@ -15569,14 +14639,30 @@ function ScrollView(props) {
     showVerticalSlider = "auto",
     showHorizontalSlider = "auto",
     scroll: initialScroll,
-    onScrollInfoChange
+    onScrollInfoChange,
+    snap = false,
+    snapAlignment = "start",
+    snapThreshold = 20,
+    momentum = true,
+    onSnap,
+    ...viewProps
   } = props;
-  const [scroll, setScroll] = useState(initialScroll ?? { dx: 0, dy: 0 });
+  const [scroll, setScroll] = useState({
+    dx: initialScroll?.dx ?? 0,
+    dy: initialScroll?.dy ?? 0
+  });
+  const scrollRef = useRef(scroll);
+  const hasMountedRef = useRef(false);
+  const lastAppliedSnapIndexRef = useRef(initialScroll?.snapIndex);
   const contentRef = useRef(null);
   const viewportRef = useRef(null);
   const [contentHeight, setContentHeight] = useState(0);
   const [contentWidth, setContentWidth] = useState(0);
-  const { outer: sliderSize } = calculateSliderSize(props.sliderSize);
+  const [velocity, setVelocity] = useState({ vx: 0, vy: 0 });
+  const [lastTime, setLastTime] = useState(0);
+  const tweenRef = useRef(null);
+  const wheelSnapTimeoutRef = useRef(null);
+  const WHEEL_SNAP_DELAY = 200;
   const viewportHeight = viewportRef.current?.height ?? 0;
   const viewportWidth = viewportRef.current?.width ?? 0;
   const effectiveContentHeight = Math.max(contentHeight, viewportHeight);
@@ -15586,13 +14672,100 @@ function ScrollView(props) {
   const needsHorizontalScroll = effectiveContentWidth > viewportWidth + epsilon;
   const showVerticalSliderActual = showVerticalSlider === true || needsVerticalScroll && showVerticalSlider === "auto";
   const showHorizontalSliderActual = showHorizontalSlider === true || needsHorizontalScroll && showHorizontalSlider === "auto";
+  const { outer: sliderSize } = calculateSliderSize(props.sliderSize);
+  props.onSliderSize?.({
+    width: showVerticalSlider ? sliderSize : 0,
+    height: showHorizontalSliderActual ? sliderSize : 0
+  });
   const maxScrollY = Math.max(0, effectiveContentHeight - viewportHeight);
   const maxScrollX = Math.max(0, effectiveContentWidth - viewportWidth);
+  const updateScroll = (value) => {
+    setScroll((prev) => {
+      const next = typeof value === "function" ? value(prev) : value;
+      scrollRef.current = next;
+      return next;
+    });
+  };
+  const stopActiveTween = () => {
+    if (tweenRef.current) {
+      tweenRef.current.stop();
+      tweenRef.current = null;
+    }
+  };
+  const resolvedSnapThreshold = typeof snap === "object" && "positions" in snap ? snap.threshold ?? snapThreshold : snapThreshold;
+  const effectiveSnapThreshold = resolvedSnapThreshold === void 0 || resolvedSnapThreshold < 0 ? Infinity : resolvedSnapThreshold;
   useEffect(() => {
-    if (initialScroll) {
-      setScroll(initialScroll);
+    if (!initialScroll) return;
+    const allowAnimate = hasMountedRef.current;
+    if (snap && typeof snap === "object" && "positions" in snap) {
+      const { x: xTargets, y: yTargets } = getSnapTargets();
+      const hasTargets = xTargets.length > 0 || yTargets.length > 0;
+      if (initialScroll.snapIndex !== void 0 && hasTargets) {
+        const maxIdx = Math.max(xTargets.length, yTargets.length) - 1;
+        const clampedIdx = Math.max(0, Math.min(initialScroll.snapIndex, maxIdx));
+        const targetX = xTargets[clampedIdx];
+        const targetY = yTargets[clampedIdx];
+        const nextDx = targetX !== void 0 ? alignTargetPosition(targetX, viewportWidth, maxScrollX) : initialScroll.dx ?? scrollRef.current.dx;
+        const nextDy = targetY !== void 0 ? alignTargetPosition(targetY, viewportHeight, maxScrollY) : initialScroll.dy ?? scrollRef.current.dy;
+        const shouldAnimate = allowAnimate && (clampedIdx !== lastAppliedSnapIndexRef.current || Math.abs(scrollRef.current.dx - nextDx) > 0.5 || Math.abs(scrollRef.current.dy - nextDy) > 0.5);
+        lastAppliedSnapIndexRef.current = clampedIdx;
+        if (shouldAnimate && contentRef.current?.scene) {
+          stopActiveTween();
+          const scene = contentRef.current.scene;
+          tweenRef.current = scene.tweens.add({
+            targets: { dx: scrollRef.current.dx, dy: scrollRef.current.dy },
+            dx: nextDx,
+            dy: nextDy,
+            duration: 220,
+            ease: "Quad.easeOut",
+            onUpdate: (tween) => {
+              const target = tween.targets[0];
+              updateScroll({ dx: target.dx, dy: target.dy });
+            },
+            onComplete: () => {
+              tweenRef.current = null;
+              if (onSnap) {
+                onSnap(clampedIdx);
+              }
+            }
+          });
+        } else {
+          updateScroll({ dx: nextDx, dy: nextDy });
+          if (onSnap) {
+            onSnap(clampedIdx);
+          }
+        }
+        hasMountedRef.current = true;
+        return;
+      }
     }
-  }, [initialScroll]);
+    if (initialScroll.dx !== void 0 && initialScroll.dy !== void 0) {
+      const nextDx = initialScroll.dx;
+      const nextDy = initialScroll.dy;
+      const shouldAnimate = allowAnimate && (Math.abs(scrollRef.current.dx - nextDx) > 0.5 || Math.abs(scrollRef.current.dy - nextDy) > 0.5);
+      if (shouldAnimate && contentRef.current?.scene) {
+        stopActiveTween();
+        const scene = contentRef.current.scene;
+        tweenRef.current = scene.tweens.add({
+          targets: { dx: scrollRef.current.dx, dy: scrollRef.current.dy },
+          dx: nextDx,
+          dy: nextDy,
+          duration: 220,
+          ease: "Quad.easeOut",
+          onUpdate: (tween) => {
+            const target = tween.targets[0];
+            updateScroll({ dx: target.dx, dy: target.dy });
+          },
+          onComplete: () => {
+            tweenRef.current = null;
+          }
+        });
+      } else {
+        updateScroll({ dx: nextDx, dy: nextDy });
+      }
+    }
+    hasMountedRef.current = true;
+  }, [initialScroll, snap, viewportWidth, viewportHeight, maxScrollX, maxScrollY]);
   useEffect(() => {
     if (onScrollInfoChange && viewportWidth > 0 && viewportHeight > 0) {
       onScrollInfoChange({
@@ -15645,27 +14818,194 @@ function ScrollView(props) {
     const maxScrollX2 = Math.max(0, contentWidth2 - viewportWidth2);
     const newScrollY = Math.max(0, Math.min(maxScrollY2, scroll.dy - deltaY));
     const newScrollX = Math.max(0, Math.min(maxScrollX2, scroll.dx - deltaX));
-    setScroll({ dx: newScrollX, dy: newScrollY });
+    updateScroll({ dx: newScrollX, dy: newScrollY });
+  };
+  const startMomentum = () => {
+    if (!contentRef.current?.scene) return;
+    const scene = contentRef.current.scene;
+    const duration = Math.min(1e3, Math.max(200, Math.abs(velocity.vx) + Math.abs(velocity.vy)));
+    const currentScroll = scrollRef.current;
+    const baseTargetDx = Math.max(
+      0,
+      Math.min(maxScrollX, currentScroll.dx - velocity.vx * (duration / 1e3))
+    );
+    const baseTargetDy = Math.max(
+      0,
+      Math.min(maxScrollY, currentScroll.dy - velocity.vy * (duration / 1e3))
+    );
+    const snappedTarget = snap ? calculateSnapDestination(baseTargetDx, baseTargetDy) : null;
+    stopActiveTween();
+    tweenRef.current = scene.tweens.add({
+      targets: { dx: currentScroll.dx, dy: currentScroll.dy },
+      dx: snappedTarget?.dx ?? baseTargetDx,
+      dy: snappedTarget?.dy ?? baseTargetDy,
+      duration,
+      ease: "Quad.easeOut",
+      onUpdate: (tween) => {
+        const target = tween.targets[0];
+        updateScroll({ dx: target.dx, dy: target.dy });
+      },
+      onComplete: () => {
+        tweenRef.current = null;
+        if (snappedTarget && snappedTarget.index >= 0 && onSnap) {
+          onSnap(snappedTarget.index);
+        }
+      }
+    });
+  };
+  const getSnapTargets = () => {
+    const viewportHeightCurrent = viewportRef.current?.height ?? viewportHeight;
+    const viewportWidthCurrent = viewportRef.current?.width ?? viewportWidth;
+    if (typeof snap === "object" && "positions" in snap) {
+      const sorted = [...snap.positions].sort((a, b) => a - b);
+      const inferredSizeY = sorted.length > 1 ? Math.max(0, (sorted[1] ?? 0) - (sorted[0] ?? 0)) : viewportHeightCurrent || 0;
+      const inferredSizeX = sorted.length > 1 ? Math.max(0, (sorted[1] ?? 0) - (sorted[0] ?? 0)) : viewportWidthCurrent || 0;
+      const targetsX = sorted.map((position, index) => {
+        const next = sorted[index + 1];
+        const size = next !== void 0 ? Math.max(0, next - position) : inferredSizeX > 0 ? inferredSizeX : viewportWidthCurrent || 0;
+        return { position, size };
+      });
+      const targetsY = sorted.map((position, index) => {
+        const next = sorted[index + 1];
+        const size = next !== void 0 ? Math.max(0, next - position) : inferredSizeY > 0 ? inferredSizeY : viewportHeightCurrent || 0;
+        return { position, size };
+      });
+      return { x: targetsX, y: targetsY };
+    }
+    return { x: [], y: [] };
+  };
+  const findNearestSnap = (current, targets, viewportSize, maxScroll) => {
+    if (targets.length === 0) return { position: current, index: -1 };
+    let nearest = current;
+    let minDistance = Infinity;
+    let nearestIndex = -1;
+    for (let index = 0; index < targets.length; index++) {
+      const { position, size } = targets[index] ?? { position: 0, size: 0 };
+      let adjustedPos = position;
+      if (snapAlignment === "center") {
+        adjustedPos = position + size / 2 - viewportSize / 2;
+      } else if (snapAlignment === "end") {
+        adjustedPos = position + size - viewportSize;
+      }
+      adjustedPos = Math.max(0, Math.min(maxScroll, adjustedPos));
+      const distance = Math.abs(current - adjustedPos);
+      if (distance < minDistance && distance <= effectiveSnapThreshold) {
+        minDistance = distance;
+        nearest = adjustedPos;
+        nearestIndex = index;
+      } else if (distance < minDistance && effectiveSnapThreshold === Infinity) {
+        minDistance = distance;
+        nearest = adjustedPos;
+        nearestIndex = index;
+      }
+    }
+    return { position: nearest, index: nearestIndex };
+  };
+  const calculateSnapDestination = (baseDx, baseDy) => {
+    const { x: xTargets, y: yTargets } = getSnapTargets();
+    const viewportHeightLocal = viewportRef.current?.height ?? 0;
+    const viewportWidthLocal = viewportRef.current?.width ?? 0;
+    const snapX = findNearestSnap(baseDx, xTargets, viewportWidthLocal, maxScrollX);
+    const snapY = findNearestSnap(baseDy, yTargets, viewportHeightLocal, maxScrollY);
+    const snapIndex = snapY.index >= 0 ? snapY.index : snapX.index;
+    return { dx: snapX.position, dy: snapY.position, index: snapIndex };
+  };
+  const alignTargetPosition = (target, viewportSize, maxScroll) => {
+    let adjustedPos = target.position;
+    if (snapAlignment === "center") {
+      adjustedPos = target.position + target.size / 2 - viewportSize / 2;
+    } else if (snapAlignment === "end") {
+      adjustedPos = target.position + target.size - viewportSize;
+    }
+    return Math.max(0, Math.min(maxScroll, adjustedPos));
+  };
+  const applySnap = () => {
+    if (!contentRef.current?.scene || !snap) return;
+    const currentScroll = scrollRef.current;
+    const {
+      dx: targetDx,
+      dy: targetDy,
+      index: snapIndex
+    } = calculateSnapDestination(currentScroll.dx, currentScroll.dy);
+    if (targetDx === currentScroll.dx && targetDy === currentScroll.dy) {
+      if (snapIndex >= 0 && onSnap) {
+        onSnap(snapIndex);
+      }
+      return;
+    }
+    const scene = contentRef.current.scene;
+    stopActiveTween();
+    tweenRef.current = scene.tweens.add({
+      targets: { dx: currentScroll.dx, dy: currentScroll.dy },
+      dx: targetDx,
+      dy: targetDy,
+      duration: 250,
+      ease: "Quad.easeOut",
+      onUpdate: (tween) => {
+        const target = tween.targets[0];
+        updateScroll({ dx: target.dx, dy: target.dy });
+      },
+      onComplete: () => {
+        tweenRef.current = null;
+        if (snapIndex >= 0 && onSnap) {
+          onSnap(snapIndex);
+        }
+      }
+    });
   };
   const handleVerticalScroll = (scrollPos) => {
     const clampedScrollPos = Math.max(0, Math.min(maxScrollY, scrollPos));
-    setScroll((prev) => ({ ...prev, dy: clampedScrollPos }));
+    updateScroll((prev) => ({ ...prev, dy: clampedScrollPos }));
   };
   const handleHorizontalScroll = (scrollPos) => {
     const clampedScrollPos = Math.max(0, Math.min(maxScrollX, scrollPos));
-    setScroll((prev) => ({ ...prev, dx: clampedScrollPos }));
+    updateScroll((prev) => ({ ...prev, dx: clampedScrollPos }));
+  };
+  const handleSliderMomentumEnd = () => {
+    if (snap) {
+      applySnap();
+    }
   };
   const handleTouchMove = (data) => {
-    if (data.state === "end") return;
+    if (data.state === "end") {
+      if (momentum && (Math.abs(velocity.vx) > 0.1 || Math.abs(velocity.vy) > 0.1)) {
+        startMomentum();
+      } else if (snap) {
+        applySnap();
+      }
+      return;
+    }
+    if (data.state === "start") {
+      stopActiveTween();
+      setVelocity({ vx: 0, vy: 0 });
+      setLastTime(Date.now());
+      data.stopPropagation();
+      return;
+    }
     data.stopPropagation();
     const deltaX = data.dx ?? 0;
     const deltaY = data.dy ?? 0;
+    const now = Date.now();
+    const deltaTime = now - lastTime;
+    if (deltaTime > 0) {
+      const newVx = deltaX / deltaTime * 1e3;
+      const newVy = deltaY / deltaTime * 1e3;
+      setVelocity({ vx: newVx, vy: newVy });
+      setLastTime(now);
+    }
     calc(deltaX, deltaY);
   };
   const handleWheel = (data) => {
     data.stopPropagation();
     data.preventDefault();
+    stopActiveTween();
     calc(-data.deltaX, -data.deltaY);
+    if (snap) {
+      if (wheelSnapTimeoutRef.current) {
+        clearTimeout(wheelSnapTimeoutRef.current);
+      }
+      wheelSnapTimeoutRef.current = setTimeout(() => applySnap(), WHEEL_SNAP_DELAY);
+    }
   };
   const redraw = useRedraw();
   const [visible, setVisible] = useState(false);
@@ -15675,9 +15015,14 @@ function ScrollView(props) {
     return () => {
       clearTimeout(timer1);
       clearTimeout(timer2);
+      if (wheelSnapTimeoutRef.current) {
+        clearTimeout(wheelSnapTimeoutRef.current);
+      }
+      stopActiveTween();
     };
   }, [showVerticalSliderActual, showHorizontalSliderActual]);
-  return /* @__PURE__ */ jsxRuntime.jsx(View, { visible, children: /* @__PURE__ */ jsxRuntime.jsxs(View, { direction: "row", width: "100%", height: "100%", gap: 0, padding: 0, children: [
+  const resolvedVisible = viewProps.visible === "none" ? "none" : visible ? viewProps.visible ?? true : false;
+  return /* @__PURE__ */ jsxRuntime.jsx(View, { ...viewProps, visible: resolvedVisible, children: /* @__PURE__ */ jsxRuntime.jsxs(View, { direction: "row", width: "100%", height: "100%", gap: 0, padding: 0, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(View, { flex: 1, height: "100%", direction: "column", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         View,
@@ -15731,7 +15076,9 @@ function ScrollView(props) {
           scrollPosition: scroll.dx,
           viewportSize: viewportWidth,
           contentSize: contentWidth,
-          onScroll: handleHorizontalScroll
+          onScroll: handleHorizontalScroll,
+          momentum,
+          onMomentumEnd: handleSliderMomentumEnd
         }
       ) })
     ] }),
@@ -15744,7 +15091,9 @@ function ScrollView(props) {
           scrollPosition: scroll.dy,
           viewportSize: viewportHeight,
           contentSize: effectiveContentHeight,
-          onScroll: handleVerticalScroll
+          onScroll: handleVerticalScroll,
+          momentum,
+          onMomentumEnd: handleSliderMomentumEnd
         }
       ) }),
       showHorizontalSliderActual && // Placeholder corner for potential icon - matches slider dimensions
@@ -16092,6 +15441,395 @@ function useIconPreload(type, loader) {
   }, [type, loader]);
   return svg !== null;
 }
+function joystickThemeFactory(joystickTheme, radius) {
+  function createNeonBase(radius2, color = 65280) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Graphics,
+      {
+        onDraw: (g) => {
+          g.fillStyle(color, 0.1);
+          g.fillCircle(0, 0, radius2 + 10);
+          g.fillStyle(0, 0.4);
+          g.fillCircle(0, 0, radius2);
+          g.lineStyle(3, color, 1);
+          g.strokeCircle(0, 0, radius2);
+          g.lineStyle(1, color, 0.5);
+          g.strokeCircle(0, 0, radius2 - 5);
+          for (let i = 0; i < 4; i++) {
+            const angle = i * 90 * Math.PI / 180;
+            const x1 = Math.cos(angle) * (radius2 - 15);
+            const y1 = Math.sin(angle) * (radius2 - 15);
+            const x2 = Math.cos(angle) * (radius2 - 5);
+            const y2 = Math.sin(angle) * (radius2 - 5);
+            g.lineStyle(2, color, 0.7);
+            g.lineBetween(x1, y1, x2, y2);
+          }
+        }
+      }
+    );
+  }
+  function createNeonThumb(radius2, color = 65280) {
+    const r = radius2 * 0.4;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Graphics,
+      {
+        onDraw: (g) => {
+          g.fillStyle(color, 0.2);
+          g.fillCircle(0, 0, r + 5);
+          g.fillStyle(color, 0.8);
+          g.fillCircle(0, 0, r);
+          g.lineStyle(2, color, 1);
+          g.strokeCircle(0, 0, r);
+          g.lineStyle(2, 0, 0.8);
+          g.moveTo(0, -r * 0.6);
+          g.lineTo(0, r * 0.6);
+          g.moveTo(-r * 0.6, 0);
+          g.lineTo(r * 0.6, 0);
+          g.strokePath();
+        }
+      }
+    );
+  }
+  function createTargetBase(radius2, tint2 = 16711680) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Graphics,
+      {
+        onDraw: (g) => {
+          g.fillStyle(0, 0.3);
+          g.fillCircle(0, 0, radius2);
+          for (let i = 0; i < 3; i++) {
+            const r = radius2 - i * 20;
+            g.lineStyle(2, tint2, 0.6 - i * 0.15);
+            g.strokeCircle(0, 0, r);
+          }
+          g.lineStyle(1, tint2, 0.5);
+          g.moveTo(-radius2, 0);
+          g.lineTo(radius2, 0);
+          g.moveTo(0, -radius2);
+          g.lineTo(0, radius2);
+          g.strokePath();
+          g.fillStyle(tint2, 0.8);
+          g.fillCircle(0, 0, 5);
+        }
+      }
+    );
+  }
+  function createTargetThumb(radius2, tint2 = 16711680) {
+    const r = radius2 * 0.35;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Graphics,
+      {
+        onDraw: (g) => {
+          g.fillStyle(tint2, 0.7);
+          g.fillCircle(0, 0, r);
+          g.fillStyle(16777215, 0.9);
+          g.fillCircle(0, 0, r * 0.5);
+          g.fillStyle(tint2, 1);
+          g.fillCircle(0, 0, r * 0.2);
+          g.lineStyle(3, tint2, 1);
+          g.beginPath();
+          g.moveTo(0, -r);
+          g.lineTo(r * 0.3, -r * 0.6);
+          g.lineTo(-r * 0.3, -r * 0.6);
+          g.closePath();
+          g.fillPath();
+        }
+      }
+    );
+  }
+  function createGlassBase(radius2, tint2 = 16777215) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Graphics,
+      {
+        onDraw: (g) => {
+          g.fillStyle(tint2, 0.15);
+          g.fillCircle(0, 0, radius2);
+          g.fillStyle(tint2, 0.3);
+          g.fillCircle(-radius2 * 0.3, -radius2 * 0.3, radius2 * 0.4);
+          g.lineStyle(2, tint2, 0.5);
+          g.strokeCircle(0, 0, radius2);
+          g.lineStyle(1, tint2, 0.3);
+          g.strokeCircle(0, 0, radius2 - 3);
+        }
+      }
+    );
+  }
+  function createGlassThumb(radius2, tint2 = 16777215) {
+    const r = radius2 * 0.4;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Graphics,
+      {
+        onDraw: (g) => {
+          g.fillStyle(0, 0.2);
+          g.fillCircle(r * 0.1, r * 0.1, r);
+          g.fillStyle(tint2, 0.4);
+          g.fillCircle(0, 0, r);
+          g.fillStyle(tint2, 0.6);
+          g.fillCircle(-r * 0.3, -r * 0.3, r * 0.4);
+          g.lineStyle(2, tint2, 0.7);
+          g.strokeCircle(0, 0, r);
+        }
+      }
+    );
+  }
+  function createMilitaryBase(radius2, tint2 = 65280) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Graphics,
+      {
+        onDraw: (g) => {
+          g.fillStyle(1710618, 0.8);
+          g.fillCircle(0, 0, radius2);
+          g.lineStyle(1, tint2, 0.3);
+          const step = 20;
+          for (let i = -radius2; i <= radius2; i += step) {
+            g.moveTo(-radius2, i);
+            g.lineTo(radius2, i);
+            g.moveTo(i, -radius2);
+            g.lineTo(i, radius2);
+          }
+          g.strokePath();
+          g.lineStyle(2, tint2, 0.6);
+          g.strokeCircle(0, 0, radius2);
+          g.strokeCircle(0, 0, radius2 * 0.66);
+          g.strokeCircle(0, 0, radius2 * 0.33);
+          const corners = [
+            { x: -radius2 * 0.7, y: -radius2 * 0.7 },
+            { x: radius2 * 0.7, y: -radius2 * 0.7 },
+            { x: -radius2 * 0.7, y: radius2 * 0.7 },
+            { x: radius2 * 0.7, y: radius2 * 0.7 }
+          ];
+          g.lineStyle(3, tint2, 0.8);
+          corners.forEach(({ x, y }) => {
+            g.moveTo(x - 10, y);
+            g.lineTo(x + 10, y);
+            g.moveTo(x, y - 10);
+            g.lineTo(x, y + 10);
+          });
+          g.strokePath();
+        }
+      }
+    );
+  }
+  function createMilitaryThumb(radius2, tint2 = 65280) {
+    const r = radius2 * 0.3;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Graphics,
+      {
+        onDraw: (g) => {
+          g.fillStyle(tint2, 0.9);
+          g.fillCircle(0, 0, r);
+          g.fillStyle(0, 1);
+          g.beginPath();
+          g.moveTo(0, -r);
+          g.lineTo(r * 0.5, r * 0.3);
+          g.lineTo(-r * 0.5, r * 0.3);
+          g.closePath();
+          g.fillPath();
+          g.lineStyle(2, 0, 0.8);
+          g.strokeCircle(0, 0, r);
+        }
+      }
+    );
+  }
+  function createDefaultBase(radius2, tint2 = 65280) {
+    const size = { width: radius2 * 2 };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Graphics,
+      {
+        onDraw: (g) => {
+          g.fillStyle(0, 0.25);
+          g.lineStyle(1, tint2);
+          g.fillCircle(0, 0, size.width / 2);
+          g.strokeCircle(0, 0, size.width / 2);
+        }
+      }
+    );
+  }
+  function createDefaultThumb(radius2, tint2 = 65280) {
+    const size = { width: radius2 * 2 };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Graphics,
+      {
+        onDraw: (g) => {
+          const r = size.width * 0.2;
+          g.lineStyle(2, 0, 1);
+          g.moveTo(0, -r);
+          g.lineTo(0, r);
+          g.moveTo(-r, 0);
+          g.lineTo(r, 0);
+          g.strokePath();
+          g.lineStyle(2, tint2, 0.75);
+          g.strokeCircle(0, 0, r * 1.1);
+        }
+      }
+    );
+  }
+  const theme = joystickTheme != null ? joystickTheme.theme : "default";
+  const tint = (joystickTheme != null ? joystickTheme.tint : 65280) ?? 65280;
+  switch (theme) {
+    case "neon":
+      return {
+        base: createNeonBase(radius, tint),
+        thumb: createNeonThumb(radius, tint),
+        rotateThumb: false
+      };
+    case "target":
+      return {
+        base: createTargetBase(radius, tint),
+        thumb: createTargetThumb(radius, tint),
+        rotateThumb: true
+      };
+    case "glass":
+      return {
+        base: createGlassBase(radius, tint),
+        thumb: createGlassThumb(radius, tint),
+        rotateThumb: false
+      };
+    case "military":
+      return {
+        base: createMilitaryBase(radius, tint),
+        thumb: createMilitaryThumb(radius, tint),
+        rotateThumb: true
+      };
+    case "default":
+    default:
+      return {
+        base: createDefaultBase(radius, tint),
+        thumb: createDefaultThumb(radius, tint),
+        rotateThumb: false
+      };
+  }
+}
+function Joystick(props) {
+  const outerRef = useRef(null);
+  const [center, setCenter] = useState({ x: 0, y: 0 });
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const thumbRef = useRef(null);
+  const forceExceededMinimumRef = useRef(false);
+  const activeTweenRef = useRef(null);
+  const isDraggingRef = useRef(false);
+  const currentThumbPosRef = useRef({ x: 0, y: 0 });
+  useEffect(() => {
+    setTimeout(() => {
+      const size2 = getLayoutSize(outerRef.current);
+      console.log(`Joystick size: ${JSON.stringify(size2)}`);
+      if (size2 != null) {
+        const newCenter = { x: size2.width / 2, y: size2.height / 2 };
+        setCenter(newCenter);
+        setSize({ width: size2.width, height: size2.height });
+        if (!isDraggingRef.current && !activeTweenRef.current) {
+          currentThumbPosRef.current = newCenter;
+          if (thumbRef.current != null) {
+            thumbRef.current.setPosition(newCenter.x, newCenter.y);
+          }
+        }
+      }
+    }, 0);
+  }, [outerRef]);
+  const themeType = props.joystickTheme?.theme;
+  const themeTint = props.joystickTheme?.tint;
+  const sizeKey = `${size.width}x${size.height}`;
+  const elements = useMemo(() => {
+    if (props.base != null && props.thumb)
+      return {
+        base: props.base,
+        thumb: props.thumb,
+        rotateThumb: props.rotateThumb ?? false
+      };
+    if (size.width === 0 || size.height === 0)
+      return {
+        base: null,
+        thumb: null,
+        rotateThumb: false
+      };
+    const radius = Math.min(size.width, size.height) / 2;
+    return joystickThemeFactory(props.joystickTheme, radius);
+  }, [props.base, props.thumb, props.rotateThumb, themeType, themeTint, sizeKey]);
+  const touchMove = (data) => {
+    data.stopPropagation();
+    if (thumbRef.current == null) return;
+    if (data.state === "start") {
+      forceExceededMinimumRef.current = false;
+      isDraggingRef.current = true;
+    }
+    if (data.state === "end") {
+      isDraggingRef.current = false;
+      if (activeTweenRef.current) {
+        activeTweenRef.current.stop();
+        activeTweenRef.current = null;
+      }
+      if (thumbRef.current.scene) {
+        activeTweenRef.current = thumbRef.current.scene.tweens.add({
+          targets: thumbRef.current,
+          x: center.x,
+          y: center.y,
+          angle: 0,
+          duration: 150,
+          ease: "Cubic.easeOut",
+          onComplete: () => {
+            activeTweenRef.current = null;
+            currentThumbPosRef.current = { x: center.x, y: center.y };
+          }
+        });
+      }
+      props.onMove?.(false, 0, 0);
+      return;
+    }
+    let offsetX = data.localX - data.width / 2 + center.x;
+    let offsetY = data.localY - data.height / 2 + center.y;
+    const radius = size.width / 2;
+    const dx = offsetX - center.x;
+    const dy = offsetY - center.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    const angle = Math.atan2(dy, dx) * (180 / Math.PI);
+    const rawForce = Math.min(dist / radius, 1);
+    const minForce = props.minForce ?? 0.2;
+    const force = rawForce < minForce ? 0 : (rawForce - minForce) / (1 - minForce);
+    if (force > 0) {
+      forceExceededMinimumRef.current = true;
+    }
+    if (dist > radius) {
+      const angleRad = Math.atan2(dy, dx);
+      offsetX = center.x + Math.cos(angleRad) * radius;
+      offsetY = center.y + Math.sin(angleRad) * radius;
+    }
+    if (activeTweenRef.current) {
+      activeTweenRef.current.stop();
+      activeTweenRef.current = null;
+    }
+    thumbRef.current.setPosition(offsetX, offsetY);
+    currentThumbPosRef.current = { x: offsetX, y: offsetY };
+    if (props.rotateThumb || elements.rotateThumb) {
+      thumbRef.current.setAngle(angle + 90);
+    }
+    if (force > 0) {
+      props.onMove?.(true, angle, force);
+    } else {
+      props.onMove?.(true, 0, 0);
+    }
+  };
+  const handleTouch = () => {
+    if (!forceExceededMinimumRef.current) {
+      props.onTap?.();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(View, { ref: outerRef, width: props.width, height: props.height, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    RefOriginView,
+    {
+      width: props.width,
+      height: props.height,
+      originX: 0.5,
+      originY: 0.5,
+      onTouchMove: touchMove,
+      onTouch: handleTouch,
+      direction: "stack",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(View, { x: center.x, y: center.y, children: elements.base }),
+        /* @__PURE__ */ jsxRuntime.jsx(View, { ref: thumbRef, x: currentThumbPosRef.current.x, y: currentThumbPosRef.current.y, children: elements.thumb })
+      ]
+    }
+  ) });
+}
 function NineSlice(props) {
   const localTheme = useTheme();
   const { props: themed, nestedTheme } = getThemedProps("NineSlice", localTheme, props);
@@ -16291,7 +16029,13 @@ function Sidebar(props) {
     ...itemContainer
   } = itemStyle ?? {};
   const { textStyle: badgeTextStyle, ...badgeContainer } = badgeStyle ?? {};
-  const normalizeChildren = (child) => child ? Array.isArray(child) ? child : [child] : [];
+  const normalizeChildren2 = (child) => {
+    if (!child) return [];
+    const flat = Array.isArray(child) ? child.flat(Infinity) : [child];
+    return flat.filter(
+      (node) => !!node && typeof node === "object" && "type" in node
+    );
+  };
   const renderTitle = (title) => {
     if (!title) return null;
     return typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Text, { text: title, style: titleStyle }) : title;
@@ -16318,9 +16062,9 @@ function Sidebar(props) {
       const activeProps = item.active ? activeItemStyle ?? {} : {};
       const disabledProps = item.disabled && disabledAlpha !== void 0 ? { alpha: disabledAlpha } : {};
       const content = item.content ?? (item.label ? /* @__PURE__ */ jsxRuntime.jsx(Text, { text: item.label, style: itemTextStyle }) : null);
-      const iconNodes = normalizeChildren(item.icon ?? null);
-      const contentNodes2 = normalizeChildren(content);
-      const badgeNodes = normalizeChildren(renderBadge(item.badge));
+      const iconNodes = normalizeChildren2(item.icon ?? null);
+      const contentNodes2 = normalizeChildren2(content);
+      const badgeNodes = normalizeChildren2(renderBadge(item.badge));
       const handleTouch = item.disabled ? void 0 : () => item.onSelect?.(item.key ?? key);
       return /* @__PURE__ */ jsxRuntime.jsx(
         View,
@@ -16365,7 +16109,7 @@ function Sidebar(props) {
   const hasSections = !!props.sections?.length;
   const primaryContent = sectionsContent ?? (!hasSections ? props.children : null) ?? null;
   const extraContent = hasSections ? props.children ?? null : null;
-  const contentNodes = [...normalizeChildren(primaryContent), ...normalizeChildren(extraContent)];
+  const contentNodes = [...normalizeChildren2(primaryContent), ...normalizeChildren2(extraContent)];
   return /* @__PURE__ */ jsxRuntime.jsxs(
     View,
     {
@@ -16838,6 +16582,114 @@ function Slider(props) {
 function RangeSlider(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(BaseSlider, { ...props, mode: "range" });
 }
+function Tab(_props) {
+  return null;
+}
+function TabPanel(_props) {
+  return null;
+}
+const normalizeChildren = (children) => {
+  if (!children) return [];
+  const flat = Array.isArray(children) ? children.flat(Infinity) : [children];
+  return flat.filter(
+    (child) => !!child && typeof child === "object" && "type" in child
+  );
+};
+function Tabs(props) {
+  const localTheme = useTheme();
+  const { props: themed, nestedTheme } = getThemedProps("Tabs", localTheme, {});
+  const [internalIndex, setInternalIndex] = useState(props.defaultIndex ?? 0);
+  const rawIndex = props.activeIndex ?? internalIndex;
+  const { tabs, panels } = useMemo(() => {
+    const nodes = normalizeChildren(props.children);
+    const collectedTabs = [];
+    const collectedPanels = [];
+    for (const node of nodes) {
+      if (node.type === Tab) collectedTabs.push(node);
+      if (node.type === TabPanel) collectedPanels.push(node);
+    }
+    return { tabs: collectedTabs, panels: collectedPanels };
+  }, [props.children]);
+  const panelCount = Math.min(tabs.length, panels.length);
+  const safeIndex = panelCount > 0 ? Math.min(Math.max(rawIndex, 0), panelCount - 1) : 0;
+  const handleSelect = (index) => {
+    if (props.activeIndex === void 0) {
+      setInternalIndex(index);
+    }
+    if (index !== safeIndex) {
+      props.onChange?.(index);
+    }
+  };
+  const tabListStyle = themed.tabListStyle ?? {};
+  const tabStyle = themed.tabStyle ?? {};
+  const tabActiveStyle = themed.tabActiveStyle ?? {};
+  const tabDisabledStyle = themed.tabDisabledStyle ?? {};
+  const panelStyle = themed.panelStyle ?? {};
+  const {
+    children: _children,
+    activeIndex: _activeIndex,
+    defaultIndex: _defaultIndex,
+    onChange: _onChange,
+    ...viewProps
+  } = props;
+  const activePanel = panels[safeIndex];
+  const activePanelProps = activePanel?.props ?? {};
+  const panelChildren = activePanel?.children ?? activePanelProps.children;
+  const { children: _panelChildren, ...panelViewProps } = activePanelProps;
+  const scrollableTabs = props.scrollableTabs ?? true;
+  const tabListScrollProps = props.tabListScrollProps ?? {};
+  const tabListContent = /* @__PURE__ */ jsxRuntime.jsx(View, { ...tabListStyle, direction: "row", width: scrollableTabs ? "auto" : "100%", children: tabs.slice(0, panelCount).map((tab, index) => {
+    const tabProps = tab.props ?? {};
+    const { disabled, onTouch, enableGestures, ...tabViewProps } = tabProps;
+    const tabChildren = tab.children ?? tabProps.children;
+    const isActive = index === safeIndex;
+    const combinedTabStyle = {
+      ...tabStyle,
+      ...isActive ? tabActiveStyle : {},
+      ...disabled ? tabDisabledStyle : {},
+      ...tabViewProps
+    };
+    const tabKey = tab.__key ?? tabProps.key ?? index;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      View,
+      {
+        ...combinedTabStyle,
+        enableGestures: !disabled && (enableGestures ?? true),
+        onTouch: (data) => {
+          if (disabled) return;
+          handleSelect(index);
+          onTouch?.(data);
+        },
+        children: tabChildren
+      },
+      tabKey
+    );
+  }) });
+  const [tabHeight, setTabHeight] = useState(0);
+  const [sliderHeight, setSliderHeight] = useState(0);
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const layout = useLayoutRect(ref);
+    if (layout) setTabHeight(layout.height);
+  }, [props, ref]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(View, { ...themed, ...viewProps, direction: "column", theme: nestedTheme, children: [
+    scrollableTabs ? /* @__PURE__ */ jsxRuntime.jsx(
+      ScrollView,
+      {
+        width: "100%",
+        height: tabHeight + sliderHeight,
+        showHorizontalSlider: "auto",
+        showVerticalSlider: false,
+        sliderSize: "nano",
+        theme: nestedTheme,
+        onSliderSize: (size) => setSliderHeight(size.height),
+        ...tabListScrollProps,
+        children: /* @__PURE__ */ jsxRuntime.jsx(View, { ref, children: tabListContent })
+      }
+    ) : tabListContent,
+    activePanel ? /* @__PURE__ */ jsxRuntime.jsx(View, { ...panelStyle, ...panelViewProps, children: panelChildren }) : null
+  ] });
+}
 function interpolateColor(color1, color2, progress) {
   const rgb1 = numberToRgb(color1);
   const rgb2 = numberToRgb(color2);
@@ -16969,7 +16821,7 @@ function Toggle(props) {
       ]
     }
   );
-  const labelElement = props.label && labelPosition !== "none" && /* @__PURE__ */ jsxRuntime.jsx(Text, { text: props.label, style: themed.labelStyle });
+  const labelElement = props.label && labelPosition !== "none" ? /* @__PURE__ */ jsxRuntime.jsx(Text, { text: props.label, style: themed.labelStyle }) : null;
   if (!props.label || labelPosition === "none") {
     return /* @__PURE__ */ jsxRuntime.jsxs(View, { ref: containerRef, direction: "row", alignItems: "center", gap, theme: nestedTheme, children: [
       props.prefix,
@@ -17081,10 +16933,12 @@ exports.Graphics = Graphics;
 exports.HexColor = HexColor;
 exports.Icon = Icon;
 exports.Image = Image$1;
+exports.Joystick = Joystick;
 exports.KeyboardInputManager = KeyboardInputManager;
 exports.Modal = Modal;
 exports.NineSlice = NineSlice;
 exports.NineSliceButton = NineSliceButton;
+exports.Particles = Particles;
 exports.Portal = Portal;
 exports.RadioButton = RadioButton;
 exports.RadioGroup = RadioGroup;
@@ -17096,9 +16950,10 @@ exports.ScrollView = ScrollView;
 exports.Sidebar = Sidebar;
 exports.Slider = Slider;
 exports.SpringPhysics = SpringPhysics;
-exports.Sprite = Sprite;
+exports.Tab = Tab;
+exports.TabPanel = TabPanel;
+exports.Tabs = Tabs;
 exports.Text = Text;
-exports.TileSprite = TileSprite;
 exports.Toggle = Toggle;
 exports.TransformOriginView = TransformOriginView;
 exports.View = View;
@@ -17108,6 +16963,7 @@ exports.animatedSignal = animatedSignal;
 exports.applyDarkMode = applyDarkMode;
 exports.applyEffectByName = applyEffectByName;
 exports.applyLightMode = applyLightMode;
+exports.calculateLayout = calculateLayout;
 exports.calculateSliderSize = calculateSliderSize;
 exports.createBounceEffect = createBounceEffect;
 exports.createBreatheEffect = createBreatheEffect;
@@ -17145,21 +17001,26 @@ exports.defaultTextStyleTokens = defaultTextStyleTokens;
 exports.defaultTheme = defaultTheme;
 exports.disposeCtx = disposeCtx;
 exports.ensureContrast = ensureContrast;
+exports.equal = equal;
 exports.forestGreenPreset = forestGreenPreset;
 exports.generateColorScale = generateColorScale;
+exports.getBackgroundGraphics = getBackgroundGraphics;
+exports.getChildSize = getChildSize;
 exports.getContrastRatio = getContrastRatio;
 exports.getCurrent = getCurrent;
+exports.getGestureManager = getGestureManager;
+exports.getLayoutProps = getLayoutProps;
+exports.getLayoutRect = getLayoutRect;
+exports.getLayoutSize = getLayoutSize;
+exports.getMountStats = getMountStats;
 exports.getPreset = getPreset;
 exports.getPresetWithMode = getPresetWithMode;
 exports.getRenderContext = getRenderContext;
 exports.getThemedProps = getThemedProps;
-exports.graphicsCreator = graphicsCreator;
-exports.graphicsPatcher = graphicsPatcher;
+exports.getWorldLayoutRect = getWorldLayoutRect;
 exports.hex = hex;
 exports.hexToNumber = hexToNumber;
 exports.host = host;
-exports.imageCreator = imageCreator;
-exports.imagePatcher = imagePatcher;
 exports.isAnimatedSignal = isAnimatedSignal;
 exports.lighten = lighten;
 exports.lightenHex = lightenHex;
@@ -17167,43 +17028,42 @@ exports.mergeThemes = mergeThemes;
 exports.midnightPreset = midnightPreset;
 exports.mount = mount;
 exports.mountJSX = mountJSX;
-exports.nineSliceCreator = nineSliceCreator;
-exports.nineSlicePatcher = nineSlicePatcher;
 exports.nodeRegistry = nodeRegistry;
 exports.normalizeCornerRadius = normalizeCornerRadius;
 exports.normalizeEdgeInsets = normalizeEdgeInsets;
 exports.normalizeGap = normalizeGap;
+exports.normalizeVNodeLike = normalizeVNodeLike;
 exports.numberToHex = numberToHex;
 exports.numberToRgb = numberToRgb;
 exports.oceanBluePreset = oceanBluePreset;
+exports.parseSize = parseSize;
 exports.patchVNode = patchVNode;
 exports.portalRegistry = portalRegistry;
 exports.presets = presets;
 exports.register = register;
-exports.registerBuiltins = registerBuiltins;
 exports.releaseAllSVGTextures = releaseAllSVGTextures;
 exports.releaseSVGTexture = releaseSVGTexture;
 exports.releaseSVGTextures = releaseSVGTextures;
 exports.remountAll = remountAll;
 exports.resolveEffect = resolveEffect;
+exports.resolveSize = resolveSize;
 exports.rgbToNumber = rgbToNumber;
 exports.shallowEqual = shallowEqual;
 exports.shouldComponentUpdate = shouldComponentUpdate;
-exports.spriteCreator = spriteCreator;
-exports.spritePatcher = spritePatcher;
 exports.svgToTexture = svgToTexture;
-exports.textCreator = textCreator;
-exports.textPatcher = textPatcher;
 exports.themeRegistry = themeRegistry;
-exports.tileSpriteCreator = tileSpriteCreator;
-exports.tileSpritePatcher = tileSpritePatcher;
 exports.unmount = unmount;
+exports.unmountJSX = unmountJSX;
 exports.unwrapSignal = unwrapSignal;
+exports.useBackgroundGraphics = useBackgroundGraphics;
 exports.useCallback = useCallback;
 exports.useEffect = useEffect;
 exports.useForceRedraw = useForceRedraw;
 exports.useGameObjectEffect = useGameObjectEffect;
 exports.useIconPreload = useIconPreload;
+exports.useLayoutEffect = useLayoutEffect;
+exports.useLayoutRect = useLayoutRect;
+exports.useLayoutSize = useLayoutSize;
 exports.useMemo = useMemo;
 exports.useRedraw = useRedraw;
 exports.useRef = useRef;
@@ -17214,9 +17074,9 @@ exports.useSpring = useSpring;
 exports.useSprings = useSprings;
 exports.useState = useState;
 exports.useTheme = useTheme;
+exports.useViewportSize = useViewportSize;
+exports.useWorldLayoutRect = useWorldLayoutRect;
 exports.vdom = vdom;
-exports.viewCreator = viewCreator;
-exports.viewPatcher = viewPatcher;
 exports.viewportRegistry = viewportRegistry;
 exports.withHooks = withHooks;
-//# sourceMappingURL=TransformOriginView-BDM6GE2F.cjs.map
+//# sourceMappingURL=TransformOriginView-Bx81YEUU.cjs.map