@number10/jsx-phaser 5.0.0

package/dist/components/DebugPanel.cjs

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxComponents = require("@number10/jsx-components");
+const jsxCore = require("@number10/jsx-core");
+const Phaser = require("phaser");
+const hooks = require("../hooks.cjs");
+const vdom = require("../vdom.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Phaser__namespace = /* @__PURE__ */ _interopNamespaceDefault(Phaser);
+function resolveRendererName(scene) {
+  const renderer = scene.renderer;
+  const canvasType = Phaser__namespace.CANVAS;
+  if (renderer.type === Phaser__namespace.WEBGL) return "WebGL";
+  if (canvasType !== void 0 && renderer.type === canvasType) return "Canvas";
+  if (renderer.constructor?.name) return renderer.constructor.name;
+  if (typeof renderer.type === "number") return `Type ${renderer.type}`;
+  return "Unknown";
+}
+function resolveTextureCount(scene) {
+  const manager = scene.textures;
+  const keys = typeof manager.getTextureKeys === "function" ? manager.getTextureKeys() : Object.keys(manager.list ?? {});
+  const internalKeys = /* @__PURE__ */ new Set(["__DEFAULT", "__MISSING", "__NORMAL", "__WHITE"]);
+  return keys.filter((key) => !internalKeys.has(key.toUpperCase())).length;
+}
+function resolveFrameStats(scene) {
+  const loop = scene.game.loop;
+  const rawFps = loop?.actualFps ?? loop?.fps ?? 0;
+  const rawFrameMs = loop?.delta ?? loop?.frameDelta ?? 0;
+  const fps = Number.isFinite(rawFps) ? Number(rawFps.toFixed(1)) : 0;
+  const frameMs = Number.isFinite(rawFrameMs) ? Number(rawFrameMs.toFixed(2)) : 0;
+  return { fps, frameMs };
+}
+function resolveDebugFlags() {
+  const debugConfig = jsxCore.DevConfig.debug;
+  if (!debugConfig.enabled) return "off";
+  const enabledFlags = Object.entries(debugConfig).filter(([key, value]) => key !== "enabled" && value).map(([key]) => key);
+  return enabledFlags.length ? enabledFlags.join(",") : "enabled";
+}
+function collectPhaserSnapshot(scene) {
+  const { fps, frameMs } = resolveFrameStats(scene);
+  const mountStats = vdom.getMountStats();
+  return {
+    fps,
+    frameMs,
+    phaserVersion: Phaser__namespace.VERSION,
+    renderer: resolveRendererName(scene),
+    viewport: `${scene.scale.width.toFixed(0)}x${scene.scale.height.toFixed(0)}`,
+    textureCount: resolveTextureCount(scene),
+    mountsTotal: mountStats.totalMounts,
+    mountsByType: jsxComponents.summarizeMap(mountStats.byType),
+    mountsByParent: jsxComponents.summarizeMap(mountStats.byParent),
+    mountsByKey: jsxComponents.summarizeMap(mountStats.byKey),
+    debugFlags: resolveDebugFlags()
+  };
+}
+function usePhaserDebugSnapshot(intervalMs = 250) {
+  const scene = hooks.useScene();
+  const [snapshot, setSnapshot] = jsxCore.useState(collectPhaserSnapshot(scene));
+  jsxCore.useEffect(() => {
+    const delay = Math.max(50, intervalMs);
+    setSnapshot(collectPhaserSnapshot(scene));
+    const timer = window.setInterval(() => {
+      setSnapshot(collectPhaserSnapshot(scene));
+    }, delay);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [scene, intervalMs]);
+  return snapshot;
+}
+exports.collectPhaserSnapshot = collectPhaserSnapshot;
+exports.usePhaserDebugSnapshot = usePhaserDebugSnapshot;
+//# sourceMappingURL=DebugPanel.cjs.map

package/dist/components/DebugPanel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugPanel.cjs","sources":["../../src/components/DebugPanel.tsx"],"sourcesContent":["/** @jsxImportSource .. */\n/**\n * Phaser DebugPanel data collector — provides the {@link usePhaserDebugSnapshot}\n * hook and {@link collectPhaserSnapshot} utility for collecting renderer-specific\n * debug metrics from the Phaser scene.\n *\n * ## Usage\n *\n * Users import the portable `DebugPanel` from `@number10/jsx-components` and\n * compose it with this hook:\n *\n * ```tsx\n * import { DebugPanel } from '@number10/jsx-components'\n * import { usePhaserDebugSnapshot } from '@number10/jsx-phaser'\n *\n * function MyApp() {\n *   const snapshot = usePhaserDebugSnapshot(500)\n *   return <DebugPanel snapshot={snapshot} metrics={['fps', 'frameMs']} />\n * }\n * ```\n *\n * @migration(audit:debug-panel-split) Phase 8 — split from monolithic\n *   Phaser component. Portable UI extracted to @number10/jsx-components.\n *   This file provides only the Phaser-specific data collection.\n */\nimport { summarizeMap, type DebugSnapshot } from '@number10/jsx-components'\nimport { DevConfig } from '@number10/jsx-core'\nimport * as Phaser from 'phaser'\nimport { useEffect, useScene, useState } from '../hooks'\nimport { getMountStats } from '../vdom'\n\n// ---------------------------------------------------------------------------\n// Phaser-specific data collection\n// ---------------------------------------------------------------------------\n\nfunction resolveRendererName(scene: Phaser.Scene): string {\n  const renderer = scene.renderer as unknown as {\n    type?: number\n    constructor?: { name?: string }\n  }\n  const canvasType = (Phaser as unknown as { CANVAS?: number }).CANVAS\n\n  if (renderer.type === Phaser.WEBGL) return 'WebGL'\n  if (canvasType !== undefined && renderer.type === canvasType) return 'Canvas'\n  if (renderer.constructor?.name) return renderer.constructor.name\n  if (typeof renderer.type === 'number') return `Type ${renderer.type}`\n  return 'Unknown'\n}\n\nfunction resolveTextureCount(scene: Phaser.Scene): number {\n  const manager = scene.textures as unknown as {\n    getTextureKeys?: () => string[]\n    list?: Record<string, unknown>\n  }\n\n  const keys =\n    typeof manager.getTextureKeys === 'function'\n      ? manager.getTextureKeys()\n      : Object.keys(manager.list ?? {})\n\n  const internalKeys = new Set(['__DEFAULT', '__MISSING', '__NORMAL', '__WHITE'])\n  return keys.filter((key) => !internalKeys.has(key.toUpperCase())).length\n}\n\nfunction resolveFrameStats(scene: Phaser.Scene): { fps: number; frameMs: number } {\n  const loop = (\n    scene.game as unknown as {\n      loop?: {\n        actualFps?: number\n        fps?: number\n        delta?: number\n        frameDelta?: number\n      }\n    }\n  ).loop\n\n  const rawFps = loop?.actualFps ?? loop?.fps ?? 0\n  const rawFrameMs = loop?.delta ?? loop?.frameDelta ?? 0\n\n  const fps = Number.isFinite(rawFps) ? Number(rawFps.toFixed(1)) : 0\n  const frameMs = Number.isFinite(rawFrameMs) ? Number(rawFrameMs.toFixed(2)) : 0\n\n  return { fps, frameMs }\n}\n\nfunction resolveDebugFlags(): string {\n  const debugConfig = DevConfig.debug\n  if (!debugConfig.enabled) return 'off'\n\n  const enabledFlags = Object.entries(debugConfig)\n    .filter(([key, value]) => key !== 'enabled' && value)\n    .map(([key]) => key)\n\n  return enabledFlags.length ? enabledFlags.join(',') : 'enabled'\n}\n\n/**\n * Collect a complete debug snapshot from the Phaser scene.\n * Includes FPS, renderer info, texture count, mount stats, and debug flags.\n *\n * @param scene - The Phaser Scene to collect data from\n * @returns Partial debug snapshot with all metrics Phaser can provide\n *\n * @example\n * ```ts\n * const snapshot = collectPhaserSnapshot(scene)\n * // { fps: 60, frameMs: 16.67, phaserVersion: '3.80.1', ... }\n * ```\n */\nexport function collectPhaserSnapshot(scene: Phaser.Scene): DebugSnapshot {\n  const { fps, frameMs } = resolveFrameStats(scene)\n  const mountStats = getMountStats()\n\n  return {\n    fps,\n    frameMs,\n    phaserVersion: Phaser.VERSION,\n    renderer: resolveRendererName(scene),\n    viewport: `${scene.scale.width.toFixed(0)}x${scene.scale.height.toFixed(0)}`,\n    textureCount: resolveTextureCount(scene),\n    mountsTotal: mountStats.totalMounts,\n    mountsByType: summarizeMap(mountStats.byType),\n    mountsByParent: summarizeMap(mountStats.byParent),\n    mountsByKey: summarizeMap(mountStats.byKey),\n    debugFlags: resolveDebugFlags(),\n  }\n}\n\n// ---------------------------------------------------------------------------\n// usePhaserDebugSnapshot — interval-based hook\n// ---------------------------------------------------------------------------\n\n/**\n * Hook that collects Phaser debug metrics on an interval and returns\n * a {@link DebugSnapshot} suitable for the portable {@link DebugPanel}.\n *\n * Must be called within a component that has access to the Phaser scene\n * (i.e., mounted via `mountJSX`).\n *\n * @param intervalMs - Refresh interval in milliseconds (default: 250)\n * @returns Current debug snapshot, refreshed on the given interval\n *\n * @example\n * ```tsx\n * import { DebugPanel } from '@number10/jsx-components'\n * import { usePhaserDebugSnapshot } from '@number10/jsx-phaser'\n *\n * function MyApp() {\n *   const snapshot = usePhaserDebugSnapshot(500)\n *   return (\n *     <DebugPanel\n *       snapshot={snapshot}\n *       metrics={['fps', 'frameMs', 'renderer']}\n *       backgroundColor={0x1a1a2e}\n *     />\n *   )\n * }\n * ```\n */\nexport function usePhaserDebugSnapshot(intervalMs = 250): DebugSnapshot {\n  const scene = useScene()\n\n  const [snapshot, setSnapshot] = useState<DebugSnapshot>(collectPhaserSnapshot(scene))\n\n  useEffect(() => {\n    const delay = Math.max(50, intervalMs)\n    setSnapshot(collectPhaserSnapshot(scene))\n\n    const timer = window.setInterval(() => {\n      setSnapshot(collectPhaserSnapshot(scene))\n    }, delay)\n\n    return () => {\n      window.clearInterval(timer)\n    }\n  }, [scene, intervalMs])\n\n  return snapshot\n}\n"],"names":["Phaser","DevConfig","getMountStats","summarizeMap","useScene","useState","useEffect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAS,oBAAoB,OAA6B;AACxD,QAAM,WAAW,MAAM;AAIvB,QAAM,aAAcA,kBAA0C;AAE9D,MAAI,SAAS,SAASA,kBAAO,MAAO,QAAO;AAC3C,MAAI,eAAe,UAAa,SAAS,SAAS,WAAY,QAAO;AACrE,MAAI,SAAS,aAAa,KAAM,QAAO,SAAS,YAAY;AAC5D,MAAI,OAAO,SAAS,SAAS,SAAU,QAAO,QAAQ,SAAS,IAAI;AACnE,SAAO;AACT;AAEA,SAAS,oBAAoB,OAA6B;AACxD,QAAM,UAAU,MAAM;AAKtB,QAAM,OACJ,OAAO,QAAQ,mBAAmB,aAC9B,QAAQ,eAAA,IACR,OAAO,KAAK,QAAQ,QAAQ,CAAA,CAAE;AAEpC,QAAM,mCAAmB,IAAI,CAAC,aAAa,aAAa,YAAY,SAAS,CAAC;AAC9E,SAAO,KAAK,OAAO,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI,aAAa,CAAC,EAAE;AACpE;AAEA,SAAS,kBAAkB,OAAuD;AAChF,QAAM,OACJ,MAAM,KAQN;AAEF,QAAM,SAAS,MAAM,aAAa,MAAM,OAAO;AAC/C,QAAM,aAAa,MAAM,SAAS,MAAM,cAAc;AAEtD,QAAM,MAAM,OAAO,SAAS,MAAM,IAAI,OAAO,OAAO,QAAQ,CAAC,CAAC,IAAI;AAClE,QAAM,UAAU,OAAO,SAAS,UAAU,IAAI,OAAO,WAAW,QAAQ,CAAC,CAAC,IAAI;AAE9E,SAAO,EAAE,KAAK,QAAA;AAChB;AAEA,SAAS,oBAA4B;AACnC,QAAM,cAAcC,QAAAA,UAAU;AAC9B,MAAI,CAAC,YAAY,QAAS,QAAO;AAEjC,QAAM,eAAe,OAAO,QAAQ,WAAW,EAC5C,OAAO,CAAC,CAAC,KAAK,KAAK,MAAM,QAAQ,aAAa,KAAK,EACnD,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG;AAErB,SAAO,aAAa,SAAS,aAAa,KAAK,GAAG,IAAI;AACxD;AAeO,SAAS,sBAAsB,OAAoC;AACxE,QAAM,EAAE,KAAK,YAAY,kBAAkB,KAAK;AAChD,QAAM,aAAaC,KAAAA,cAAA;AAEnB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,eAAeF,kBAAO;AAAA,IACtB,UAAU,oBAAoB,KAAK;AAAA,IACnC,UAAU,GAAG,MAAM,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,MAAM,MAAM,OAAO,QAAQ,CAAC,CAAC;AAAA,IAC1E,cAAc,oBAAoB,KAAK;AAAA,IACvC,aAAa,WAAW;AAAA,IACxB,cAAcG,cAAAA,aAAa,WAAW,MAAM;AAAA,IAC5C,gBAAgBA,cAAAA,aAAa,WAAW,QAAQ;AAAA,IAChD,aAAaA,cAAAA,aAAa,WAAW,KAAK;AAAA,IAC1C,YAAY,kBAAA;AAAA,EAAkB;AAElC;AAiCO,SAAS,uBAAuB,aAAa,KAAoB;AACtE,QAAM,QAAQC,MAAAA,SAAA;AAEd,QAAM,CAAC,UAAU,WAAW,IAAIC,QAAAA,SAAwB,sBAAsB,KAAK,CAAC;AAEpFC,UAAAA,UAAU,MAAM;AACd,UAAM,QAAQ,KAAK,IAAI,IAAI,UAAU;AACrC,gBAAY,sBAAsB,KAAK,CAAC;AAExC,UAAM,QAAQ,OAAO,YAAY,MAAM;AACrC,kBAAY,sBAAsB,KAAK,CAAC;AAAA,IAC1C,GAAG,KAAK;AAER,WAAO,MAAM;AACX,aAAO,cAAc,KAAK;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,OAAO,UAAU,CAAC;AAEtB,SAAO;AACT;;;"}

package/dist/components/DebugPanel.d.ts

@@ -0,0 +1,45 @@
+import { DebugSnapshot } from '@number10/jsx-components';
+import * as Phaser from 'phaser';
+/**
+ * Collect a complete debug snapshot from the Phaser scene.
+ * Includes FPS, renderer info, texture count, mount stats, and debug flags.
+ *
+ * @param scene - The Phaser Scene to collect data from
+ * @returns Partial debug snapshot with all metrics Phaser can provide
+ *
+ * @example
+ * ```ts
+ * const snapshot = collectPhaserSnapshot(scene)
+ * // { fps: 60, frameMs: 16.67, phaserVersion: '3.80.1', ... }
+ * ```
+ */
+export declare function collectPhaserSnapshot(scene: Phaser.Scene): DebugSnapshot;
+/**
+ * Hook that collects Phaser debug metrics on an interval and returns
+ * a {@link DebugSnapshot} suitable for the portable {@link DebugPanel}.
+ *
+ * Must be called within a component that has access to the Phaser scene
+ * (i.e., mounted via `mountJSX`).
+ *
+ * @param intervalMs - Refresh interval in milliseconds (default: 250)
+ * @returns Current debug snapshot, refreshed on the given interval
+ *
+ * @example
+ * ```tsx
+ * import { DebugPanel } from '@number10/jsx-components'
+ * import { usePhaserDebugSnapshot } from '@number10/jsx-phaser'
+ *
+ * function MyApp() {
+ *   const snapshot = usePhaserDebugSnapshot(500)
+ *   return (
+ *     <DebugPanel
+ *       snapshot={snapshot}
+ *       metrics={['fps', 'frameMs', 'renderer']}
+ *       backgroundColor={0x1a1a2e}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export declare function usePhaserDebugSnapshot(intervalMs?: number): DebugSnapshot;
+//# sourceMappingURL=DebugPanel.d.ts.map

package/dist/components/DebugPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugPanel.d.ts","sourceRoot":"","sources":["../../src/components/DebugPanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAgB,KAAK,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAE3E,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAA;AAqEhC;;;;;;;;;;;;GAYG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,GAAG,aAAa,CAiBxE;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,sBAAsB,CAAC,UAAU,SAAM,GAAG,aAAa,CAmBtE"}

package/dist/components/DebugPanel.js

@@ -0,0 +1,71 @@
+import { summarizeMap } from "@number10/jsx-components";
+import { useState, useEffect, DevConfig } from "@number10/jsx-core";
+import * as Phaser from "phaser";
+import { useScene } from "../hooks.js";
+import { getMountStats } from "../vdom.js";
+function resolveRendererName(scene) {
+  const renderer = scene.renderer;
+  const canvasType = Phaser.CANVAS;
+  if (renderer.type === Phaser.WEBGL) return "WebGL";
+  if (canvasType !== void 0 && renderer.type === canvasType) return "Canvas";
+  if (renderer.constructor?.name) return renderer.constructor.name;
+  if (typeof renderer.type === "number") return `Type ${renderer.type}`;
+  return "Unknown";
+}
+function resolveTextureCount(scene) {
+  const manager = scene.textures;
+  const keys = typeof manager.getTextureKeys === "function" ? manager.getTextureKeys() : Object.keys(manager.list ?? {});
+  const internalKeys = /* @__PURE__ */ new Set(["__DEFAULT", "__MISSING", "__NORMAL", "__WHITE"]);
+  return keys.filter((key) => !internalKeys.has(key.toUpperCase())).length;
+}
+function resolveFrameStats(scene) {
+  const loop = scene.game.loop;
+  const rawFps = loop?.actualFps ?? loop?.fps ?? 0;
+  const rawFrameMs = loop?.delta ?? loop?.frameDelta ?? 0;
+  const fps = Number.isFinite(rawFps) ? Number(rawFps.toFixed(1)) : 0;
+  const frameMs = Number.isFinite(rawFrameMs) ? Number(rawFrameMs.toFixed(2)) : 0;
+  return { fps, frameMs };
+}
+function resolveDebugFlags() {
+  const debugConfig = DevConfig.debug;
+  if (!debugConfig.enabled) return "off";
+  const enabledFlags = Object.entries(debugConfig).filter(([key, value]) => key !== "enabled" && value).map(([key]) => key);
+  return enabledFlags.length ? enabledFlags.join(",") : "enabled";
+}
+function collectPhaserSnapshot(scene) {
+  const { fps, frameMs } = resolveFrameStats(scene);
+  const mountStats = getMountStats();
+  return {
+    fps,
+    frameMs,
+    phaserVersion: Phaser.VERSION,
+    renderer: resolveRendererName(scene),
+    viewport: `${scene.scale.width.toFixed(0)}x${scene.scale.height.toFixed(0)}`,
+    textureCount: resolveTextureCount(scene),
+    mountsTotal: mountStats.totalMounts,
+    mountsByType: summarizeMap(mountStats.byType),
+    mountsByParent: summarizeMap(mountStats.byParent),
+    mountsByKey: summarizeMap(mountStats.byKey),
+    debugFlags: resolveDebugFlags()
+  };
+}
+function usePhaserDebugSnapshot(intervalMs = 250) {
+  const scene = useScene();
+  const [snapshot, setSnapshot] = useState(collectPhaserSnapshot(scene));
+  useEffect(() => {
+    const delay = Math.max(50, intervalMs);
+    setSnapshot(collectPhaserSnapshot(scene));
+    const timer = window.setInterval(() => {
+      setSnapshot(collectPhaserSnapshot(scene));
+    }, delay);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [scene, intervalMs]);
+  return snapshot;
+}
+export {
+  collectPhaserSnapshot,
+  usePhaserDebugSnapshot
+};
+//# sourceMappingURL=DebugPanel.js.map

package/dist/components/DebugPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugPanel.js","sources":["../../src/components/DebugPanel.tsx"],"sourcesContent":["/** @jsxImportSource .. */\n/**\n * Phaser DebugPanel data collector — provides the {@link usePhaserDebugSnapshot}\n * hook and {@link collectPhaserSnapshot} utility for collecting renderer-specific\n * debug metrics from the Phaser scene.\n *\n * ## Usage\n *\n * Users import the portable `DebugPanel` from `@number10/jsx-components` and\n * compose it with this hook:\n *\n * ```tsx\n * import { DebugPanel } from '@number10/jsx-components'\n * import { usePhaserDebugSnapshot } from '@number10/jsx-phaser'\n *\n * function MyApp() {\n *   const snapshot = usePhaserDebugSnapshot(500)\n *   return <DebugPanel snapshot={snapshot} metrics={['fps', 'frameMs']} />\n * }\n * ```\n *\n * @migration(audit:debug-panel-split) Phase 8 — split from monolithic\n *   Phaser component. Portable UI extracted to @number10/jsx-components.\n *   This file provides only the Phaser-specific data collection.\n */\nimport { summarizeMap, type DebugSnapshot } from '@number10/jsx-components'\nimport { DevConfig } from '@number10/jsx-core'\nimport * as Phaser from 'phaser'\nimport { useEffect, useScene, useState } from '../hooks'\nimport { getMountStats } from '../vdom'\n\n// ---------------------------------------------------------------------------\n// Phaser-specific data collection\n// ---------------------------------------------------------------------------\n\nfunction resolveRendererName(scene: Phaser.Scene): string {\n  const renderer = scene.renderer as unknown as {\n    type?: number\n    constructor?: { name?: string }\n  }\n  const canvasType = (Phaser as unknown as { CANVAS?: number }).CANVAS\n\n  if (renderer.type === Phaser.WEBGL) return 'WebGL'\n  if (canvasType !== undefined && renderer.type === canvasType) return 'Canvas'\n  if (renderer.constructor?.name) return renderer.constructor.name\n  if (typeof renderer.type === 'number') return `Type ${renderer.type}`\n  return 'Unknown'\n}\n\nfunction resolveTextureCount(scene: Phaser.Scene): number {\n  const manager = scene.textures as unknown as {\n    getTextureKeys?: () => string[]\n    list?: Record<string, unknown>\n  }\n\n  const keys =\n    typeof manager.getTextureKeys === 'function'\n      ? manager.getTextureKeys()\n      : Object.keys(manager.list ?? {})\n\n  const internalKeys = new Set(['__DEFAULT', '__MISSING', '__NORMAL', '__WHITE'])\n  return keys.filter((key) => !internalKeys.has(key.toUpperCase())).length\n}\n\nfunction resolveFrameStats(scene: Phaser.Scene): { fps: number; frameMs: number } {\n  const loop = (\n    scene.game as unknown as {\n      loop?: {\n        actualFps?: number\n        fps?: number\n        delta?: number\n        frameDelta?: number\n      }\n    }\n  ).loop\n\n  const rawFps = loop?.actualFps ?? loop?.fps ?? 0\n  const rawFrameMs = loop?.delta ?? loop?.frameDelta ?? 0\n\n  const fps = Number.isFinite(rawFps) ? Number(rawFps.toFixed(1)) : 0\n  const frameMs = Number.isFinite(rawFrameMs) ? Number(rawFrameMs.toFixed(2)) : 0\n\n  return { fps, frameMs }\n}\n\nfunction resolveDebugFlags(): string {\n  const debugConfig = DevConfig.debug\n  if (!debugConfig.enabled) return 'off'\n\n  const enabledFlags = Object.entries(debugConfig)\n    .filter(([key, value]) => key !== 'enabled' && value)\n    .map(([key]) => key)\n\n  return enabledFlags.length ? enabledFlags.join(',') : 'enabled'\n}\n\n/**\n * Collect a complete debug snapshot from the Phaser scene.\n * Includes FPS, renderer info, texture count, mount stats, and debug flags.\n *\n * @param scene - The Phaser Scene to collect data from\n * @returns Partial debug snapshot with all metrics Phaser can provide\n *\n * @example\n * ```ts\n * const snapshot = collectPhaserSnapshot(scene)\n * // { fps: 60, frameMs: 16.67, phaserVersion: '3.80.1', ... }\n * ```\n */\nexport function collectPhaserSnapshot(scene: Phaser.Scene): DebugSnapshot {\n  const { fps, frameMs } = resolveFrameStats(scene)\n  const mountStats = getMountStats()\n\n  return {\n    fps,\n    frameMs,\n    phaserVersion: Phaser.VERSION,\n    renderer: resolveRendererName(scene),\n    viewport: `${scene.scale.width.toFixed(0)}x${scene.scale.height.toFixed(0)}`,\n    textureCount: resolveTextureCount(scene),\n    mountsTotal: mountStats.totalMounts,\n    mountsByType: summarizeMap(mountStats.byType),\n    mountsByParent: summarizeMap(mountStats.byParent),\n    mountsByKey: summarizeMap(mountStats.byKey),\n    debugFlags: resolveDebugFlags(),\n  }\n}\n\n// ---------------------------------------------------------------------------\n// usePhaserDebugSnapshot — interval-based hook\n// ---------------------------------------------------------------------------\n\n/**\n * Hook that collects Phaser debug metrics on an interval and returns\n * a {@link DebugSnapshot} suitable for the portable {@link DebugPanel}.\n *\n * Must be called within a component that has access to the Phaser scene\n * (i.e., mounted via `mountJSX`).\n *\n * @param intervalMs - Refresh interval in milliseconds (default: 250)\n * @returns Current debug snapshot, refreshed on the given interval\n *\n * @example\n * ```tsx\n * import { DebugPanel } from '@number10/jsx-components'\n * import { usePhaserDebugSnapshot } from '@number10/jsx-phaser'\n *\n * function MyApp() {\n *   const snapshot = usePhaserDebugSnapshot(500)\n *   return (\n *     <DebugPanel\n *       snapshot={snapshot}\n *       metrics={['fps', 'frameMs', 'renderer']}\n *       backgroundColor={0x1a1a2e}\n *     />\n *   )\n * }\n * ```\n */\nexport function usePhaserDebugSnapshot(intervalMs = 250): DebugSnapshot {\n  const scene = useScene()\n\n  const [snapshot, setSnapshot] = useState<DebugSnapshot>(collectPhaserSnapshot(scene))\n\n  useEffect(() => {\n    const delay = Math.max(50, intervalMs)\n    setSnapshot(collectPhaserSnapshot(scene))\n\n    const timer = window.setInterval(() => {\n      setSnapshot(collectPhaserSnapshot(scene))\n    }, delay)\n\n    return () => {\n      window.clearInterval(timer)\n    }\n  }, [scene, intervalMs])\n\n  return snapshot\n}\n"],"names":[],"mappings":";;;;;AAmCA,SAAS,oBAAoB,OAA6B;AACxD,QAAM,WAAW,MAAM;AAIvB,QAAM,aAAc,OAA0C;AAE9D,MAAI,SAAS,SAAS,OAAO,MAAO,QAAO;AAC3C,MAAI,eAAe,UAAa,SAAS,SAAS,WAAY,QAAO;AACrE,MAAI,SAAS,aAAa,KAAM,QAAO,SAAS,YAAY;AAC5D,MAAI,OAAO,SAAS,SAAS,SAAU,QAAO,QAAQ,SAAS,IAAI;AACnE,SAAO;AACT;AAEA,SAAS,oBAAoB,OAA6B;AACxD,QAAM,UAAU,MAAM;AAKtB,QAAM,OACJ,OAAO,QAAQ,mBAAmB,aAC9B,QAAQ,eAAA,IACR,OAAO,KAAK,QAAQ,QAAQ,CAAA,CAAE;AAEpC,QAAM,mCAAmB,IAAI,CAAC,aAAa,aAAa,YAAY,SAAS,CAAC;AAC9E,SAAO,KAAK,OAAO,CAAC,QAAQ,CAAC,aAAa,IAAI,IAAI,aAAa,CAAC,EAAE;AACpE;AAEA,SAAS,kBAAkB,OAAuD;AAChF,QAAM,OACJ,MAAM,KAQN;AAEF,QAAM,SAAS,MAAM,aAAa,MAAM,OAAO;AAC/C,QAAM,aAAa,MAAM,SAAS,MAAM,cAAc;AAEtD,QAAM,MAAM,OAAO,SAAS,MAAM,IAAI,OAAO,OAAO,QAAQ,CAAC,CAAC,IAAI;AAClE,QAAM,UAAU,OAAO,SAAS,UAAU,IAAI,OAAO,WAAW,QAAQ,CAAC,CAAC,IAAI;AAE9E,SAAO,EAAE,KAAK,QAAA;AAChB;AAEA,SAAS,oBAA4B;AACnC,QAAM,cAAc,UAAU;AAC9B,MAAI,CAAC,YAAY,QAAS,QAAO;AAEjC,QAAM,eAAe,OAAO,QAAQ,WAAW,EAC5C,OAAO,CAAC,CAAC,KAAK,KAAK,MAAM,QAAQ,aAAa,KAAK,EACnD,IAAI,CAAC,CAAC,GAAG,MAAM,GAAG;AAErB,SAAO,aAAa,SAAS,aAAa,KAAK,GAAG,IAAI;AACxD;AAeO,SAAS,sBAAsB,OAAoC;AACxE,QAAM,EAAE,KAAK,YAAY,kBAAkB,KAAK;AAChD,QAAM,aAAa,cAAA;AAEnB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,eAAe,OAAO;AAAA,IACtB,UAAU,oBAAoB,KAAK;AAAA,IACnC,UAAU,GAAG,MAAM,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,MAAM,MAAM,OAAO,QAAQ,CAAC,CAAC;AAAA,IAC1E,cAAc,oBAAoB,KAAK;AAAA,IACvC,aAAa,WAAW;AAAA,IACxB,cAAc,aAAa,WAAW,MAAM;AAAA,IAC5C,gBAAgB,aAAa,WAAW,QAAQ;AAAA,IAChD,aAAa,aAAa,WAAW,KAAK;AAAA,IAC1C,YAAY,kBAAA;AAAA,EAAkB;AAElC;AAiCO,SAAS,uBAAuB,aAAa,KAAoB;AACtE,QAAM,QAAQ,SAAA;AAEd,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,sBAAsB,KAAK,CAAC;AAEpF,YAAU,MAAM;AACd,UAAM,QAAQ,KAAK,IAAI,IAAI,UAAU;AACrC,gBAAY,sBAAsB,KAAK,CAAC;AAExC,UAAM,QAAQ,OAAO,YAAY,MAAM;AACrC,kBAAY,sBAAsB,KAAK,CAAC;AAAA,IAC1C,GAAG,KAAK;AAER,WAAO,MAAM;AACX,aAAO,cAAc,KAAK;AAAA,IAC5B;AAAA,EACF,GAAG,CAAC,OAAO,UAAU,CAAC;AAEtB,SAAO;AACT;"}

package/dist/components/appliers/applyBackground.cjs

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxCore = require("@number10/jsx-core");
+const signalsCore = require("@preact/signals-core");
+require("phaser");
+const backgroundImage = require("../backgroundImage.cjs");
+function unwrapAlpha(v) {
+  if (v === void 0) return 1;
+  return jsxCore.isAnimatedSignal(v) ? v.value : v;
+}
+function applyBackgroundProps(container, prev, next) {
+  const prevBgColor = prev.backgroundColor;
+  const nextBgColor = next.backgroundColor;
+  const prevBgAlpha = unwrapAlpha(prev.backgroundAlpha);
+  const nextBgAlpha = unwrapAlpha(next.backgroundAlpha);
+  let prevWidth = typeof prev.width === "number" ? prev.width : 100;
+  let prevHeight = typeof prev.height === "number" ? prev.height : 100;
+  let nextWidth = typeof next.width === "number" ? next.width : 100;
+  let nextHeight = typeof next.height === "number" ? next.height : 100;
+  if (container.__getLayoutSize) {
+    const layoutSize = container.__getLayoutSize();
+    prevWidth = layoutSize.width;
+    prevHeight = layoutSize.height;
+    nextWidth = layoutSize.width;
+    nextHeight = layoutSize.height;
+  }
+  const prevCornerRadius = prev.cornerRadius ?? 0;
+  const nextCornerRadius = next.cornerRadius ?? 0;
+  const prevBorderColor = prev.borderColor;
+  const nextBorderColor = next.borderColor;
+  const prevBorderWidth = prev.borderWidth ?? 0;
+  const nextBorderWidth = next.borderWidth ?? 0;
+  const prevBorderAlpha = unwrapAlpha(prev.borderAlpha);
+  const nextBorderAlpha = unwrapAlpha(next.borderAlpha);
+  const prevBorder = prev.border;
+  const nextBorder = next.border;
+  const borderChanged = JSON.stringify(prevBorder) !== JSON.stringify(nextBorder);
+  const hasAdvancedBorder = (b) => {
+    if (!b) return false;
+    if (typeof b.width === "number") return b.width > 0;
+    if (b.width)
+      return (b.width.top ?? 0) > 0 || (b.width.right ?? 0) > 0 || (b.width.bottom ?? 0) > 0 || (b.width.left ?? 0) > 0;
+    return false;
+  };
+  const prevHasBorder = prevBorderWidth > 0 && prevBorderColor !== void 0;
+  const nextHasBorder = nextBorderWidth > 0 && nextBorderColor !== void 0;
+  const prevHasGraphics = prevBgColor !== void 0 || prevHasBorder || hasAdvancedBorder(prevBorder);
+  const nextHasGraphics = nextBgColor !== void 0 || nextHasBorder || hasAdvancedBorder(nextBorder);
+  if (prevHasGraphics && !nextHasGraphics) {
+    if (container.__background) {
+      backgroundImage.destroyBackgroundImage(container.__background);
+      delete container.__background;
+    }
+  } else if (!prevHasGraphics && nextHasGraphics) {
+    if (container.scene) {
+      const background = backgroundImage.createBackgroundImage(container.scene, next, nextWidth, nextHeight);
+      if (!background) return;
+      container.addAt(background, 0);
+      container.__background = background;
+    }
+  } else if (container.__background && nextHasGraphics) {
+    const needsRedraw = prevBgColor !== nextBgColor || prevBgAlpha !== nextBgAlpha || prevWidth !== nextWidth || prevHeight !== nextHeight || prevCornerRadius !== nextCornerRadius || prevBorderWidth !== nextBorderWidth || prevBorderColor !== nextBorderColor || prevBorderAlpha !== nextBorderAlpha || borderChanged;
+    if (needsRedraw) {
+      const oldBackground = container.__background;
+      const background = backgroundImage.createBackgroundImage(container.scene, next, nextWidth, nextHeight);
+      if (!background) return;
+      container.addAt(background, 0);
+      container.__background = background;
+      backgroundImage.destroyBackgroundImage(oldBackground);
+    }
+  }
+  const signalEffects = container.__signalEffects ?? /* @__PURE__ */ new Map();
+  container.__signalEffects = signalEffects;
+  const bgSignal = next.backgroundAlpha;
+  const prevBgClean = signalEffects.get("__bgAlpha");
+  if (prevBgClean) {
+    prevBgClean();
+    signalEffects.delete("__bgAlpha");
+  }
+  if (bgSignal !== void 0 && jsxCore.isAnimatedSignal(bgSignal)) {
+    const cleanup = signalsCore.effect(() => {
+      if (!container.__background) return;
+      container.__background.alpha = Math.max(0, Math.min(1, bgSignal.value));
+    });
+    signalEffects.set("__bgAlpha", cleanup);
+  }
+}
+exports.applyBackgroundProps = applyBackgroundProps;
+//# sourceMappingURL=applyBackground.cjs.map

package/dist/components/appliers/applyBackground.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyBackground.cjs","sources":["../../../src/components/appliers/applyBackground.ts"],"sourcesContent":["/**\n * Shared property appliers for component patching\n * These functions avoid code duplication when updating node properties\n */\nimport { isAnimatedSignal } from '@number10/jsx-core'\nimport { effect } from '@preact/signals-core'\nimport * as Phaser from 'phaser'\nimport type { BackgroundProps, LayoutProps } from '../../core-props'\nimport {\n  createBackgroundImage,\n  destroyBackgroundImage,\n  type BackgroundImage,\n} from '../backgroundImage'\n\n/**\n * Unwrap an Animatable<number> to a plain number.\n */\nfunction unwrapAlpha(v: unknown): number {\n  if (v === undefined) return 1\n  return (isAnimatedSignal(v) ? v.value : v) as number\n}\n\n/**\n * Applies background properties (color, alpha, corner radius, border)\n * Handles adding, removing, and updating background graphics on containers\n * @param container - Phaser Container with potential background\n * @param prev - Previous props\n * @param next - New props\n */\nexport function applyBackgroundProps(\n  container: Phaser.GameObjects.Container & {\n    __background?: BackgroundImage\n    __getLayoutSize?: () => { width: number; height: number }\n  },\n  prev: Partial<BackgroundProps & LayoutProps>,\n  next: Partial<BackgroundProps & LayoutProps>\n): void {\n  const prevBgColor = prev.backgroundColor\n  const nextBgColor = next.backgroundColor\n  const prevBgAlpha = unwrapAlpha(prev.backgroundAlpha)\n  const nextBgAlpha = unwrapAlpha(next.backgroundAlpha)\n\n  // Get actual layout size if available, fall back to props\n  let prevWidth = typeof prev.width === 'number' ? prev.width : 100\n  let prevHeight = typeof prev.height === 'number' ? prev.height : 100\n  let nextWidth = typeof next.width === 'number' ? next.width : 100\n  let nextHeight = typeof next.height === 'number' ? next.height : 100\n\n  // Use actual layout size if available (for auto-sized or calculated dimensions)\n  if (container.__getLayoutSize) {\n    const layoutSize = container.__getLayoutSize()\n    prevWidth = layoutSize.width\n    prevHeight = layoutSize.height\n    nextWidth = layoutSize.width\n    nextHeight = layoutSize.height\n  }\n\n  const prevCornerRadius = prev.cornerRadius ?? 0\n  const nextCornerRadius = next.cornerRadius ?? 0\n  const prevBorderColor = prev.borderColor\n  const nextBorderColor = next.borderColor\n  const prevBorderWidth = prev.borderWidth ?? 0\n  const nextBorderWidth = next.borderWidth ?? 0\n  const prevBorderAlpha = unwrapAlpha(prev.borderAlpha)\n  const nextBorderAlpha = unwrapAlpha(next.borderAlpha)\n\n  // BorderPropsV2 support: check if border object changed\n  const prevBorder = prev.border\n  const nextBorder = next.border\n  const borderChanged = JSON.stringify(prevBorder) !== JSON.stringify(nextBorder)\n  const hasAdvancedBorder = (b: typeof nextBorder): boolean => {\n    if (!b) return false\n    if (typeof b.width === 'number') return b.width > 0\n    if (b.width)\n      return (\n        (b.width.top ?? 0) > 0 ||\n        (b.width.right ?? 0) > 0 ||\n        (b.width.bottom ?? 0) > 0 ||\n        (b.width.left ?? 0) > 0\n      )\n    return false\n  }\n\n  const prevHasBorder = prevBorderWidth > 0 && prevBorderColor !== undefined\n  const nextHasBorder = nextBorderWidth > 0 && nextBorderColor !== undefined\n  const prevHasGraphics =\n    prevBgColor !== undefined || prevHasBorder || hasAdvancedBorder(prevBorder)\n  const nextHasGraphics =\n    nextBgColor !== undefined || nextHasBorder || hasAdvancedBorder(nextBorder)\n\n  if (prevHasGraphics && !nextHasGraphics) {\n    if (container.__background) {\n      destroyBackgroundImage(container.__background)\n      delete container.__background\n    }\n  } else if (!prevHasGraphics && nextHasGraphics) {\n    if (container.scene) {\n      const background = createBackgroundImage(container.scene, next, nextWidth, nextHeight)\n\n      if (!background) return\n\n      container.addAt(background, 0)\n      container.__background = background\n    }\n  } else if (container.__background && nextHasGraphics) {\n    const needsRedraw =\n      prevBgColor !== nextBgColor ||\n      prevBgAlpha !== nextBgAlpha ||\n      prevWidth !== nextWidth ||\n      prevHeight !== nextHeight ||\n      prevCornerRadius !== nextCornerRadius ||\n      prevBorderWidth !== nextBorderWidth ||\n      prevBorderColor !== nextBorderColor ||\n      prevBorderAlpha !== nextBorderAlpha ||\n      borderChanged\n\n    if (needsRedraw) {\n      const oldBackground = container.__background\n      const background = createBackgroundImage(container.scene, next, nextWidth, nextHeight)\n\n      if (!background) return\n\n      container.addAt(background, 0)\n      container.__background = background\n      destroyBackgroundImage(oldBackground)\n    }\n  }\n\n  // Subscribe to animated backgroundAlpha so the background updates live\n  // without VDOM re-renders.\n  const signalEffects =\n    (container as unknown as { __signalEffects?: Map<string, () => void> }).__signalEffects ??\n    new Map()\n  ;(container as unknown as { __signalEffects?: Map<string, () => void> }).__signalEffects =\n    signalEffects\n\n  const bgSignal = next.backgroundAlpha\n  const prevBgClean = signalEffects.get('__bgAlpha')\n  if (prevBgClean) {\n    prevBgClean()\n    signalEffects.delete('__bgAlpha')\n  }\n  if (bgSignal !== undefined && isAnimatedSignal(bgSignal)) {\n    const cleanup = effect(() => {\n      if (!container.__background) return\n      container.__background.alpha = Math.max(0, Math.min(1, bgSignal.value as number))\n    })\n    signalEffects.set('__bgAlpha', cleanup)\n  }\n}\n"],"names":["isAnimatedSignal","destroyBackgroundImage","createBackgroundImage","effect"],"mappings":"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"}

package/dist/components/appliers/applyBackground.d.ts

@@ -0,0 +1,18 @@
+import { BackgroundProps, LayoutProps } from '../../core-props';
+import { BackgroundImage } from '../backgroundImage';
+import * as Phaser from 'phaser';
+/**
+ * Applies background properties (color, alpha, corner radius, border)
+ * Handles adding, removing, and updating background graphics on containers
+ * @param container - Phaser Container with potential background
+ * @param prev - Previous props
+ * @param next - New props
+ */
+export declare function applyBackgroundProps(container: Phaser.GameObjects.Container & {
+    __background?: BackgroundImage;
+    __getLayoutSize?: () => {
+        width: number;
+        height: number;
+    };
+}, prev: Partial<BackgroundProps & LayoutProps>, next: Partial<BackgroundProps & LayoutProps>): void;
+//# sourceMappingURL=applyBackground.d.ts.map

package/dist/components/appliers/applyBackground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyBackground.d.ts","sourceRoot":"","sources":["../../../src/components/appliers/applyBackground.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAA;AAChC,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACpE,OAAO,EAGL,KAAK,eAAe,EACrB,MAAM,oBAAoB,CAAA;AAU3B;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,GAAG;IACxC,YAAY,CAAC,EAAE,eAAe,CAAA;IAC9B,eAAe,CAAC,EAAE,MAAM;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;CAC1D,EACD,IAAI,EAAE,OAAO,CAAC,eAAe,GAAG,WAAW,CAAC,EAC5C,IAAI,EAAE,OAAO,CAAC,eAAe,GAAG,WAAW,CAAC,GAC3C,IAAI,CAiHN"}

package/dist/components/appliers/applyBackground.js

@@ -0,0 +1,89 @@
+import { isAnimatedSignal } from "@number10/jsx-core";
+import { effect } from "@preact/signals-core";
+import "phaser";
+import { destroyBackgroundImage, createBackgroundImage } from "../backgroundImage.js";
+function unwrapAlpha(v) {
+  if (v === void 0) return 1;
+  return isAnimatedSignal(v) ? v.value : v;
+}
+function applyBackgroundProps(container, prev, next) {
+  const prevBgColor = prev.backgroundColor;
+  const nextBgColor = next.backgroundColor;
+  const prevBgAlpha = unwrapAlpha(prev.backgroundAlpha);
+  const nextBgAlpha = unwrapAlpha(next.backgroundAlpha);
+  let prevWidth = typeof prev.width === "number" ? prev.width : 100;
+  let prevHeight = typeof prev.height === "number" ? prev.height : 100;
+  let nextWidth = typeof next.width === "number" ? next.width : 100;
+  let nextHeight = typeof next.height === "number" ? next.height : 100;
+  if (container.__getLayoutSize) {
+    const layoutSize = container.__getLayoutSize();
+    prevWidth = layoutSize.width;
+    prevHeight = layoutSize.height;
+    nextWidth = layoutSize.width;
+    nextHeight = layoutSize.height;
+  }
+  const prevCornerRadius = prev.cornerRadius ?? 0;
+  const nextCornerRadius = next.cornerRadius ?? 0;
+  const prevBorderColor = prev.borderColor;
+  const nextBorderColor = next.borderColor;
+  const prevBorderWidth = prev.borderWidth ?? 0;
+  const nextBorderWidth = next.borderWidth ?? 0;
+  const prevBorderAlpha = unwrapAlpha(prev.borderAlpha);
+  const nextBorderAlpha = unwrapAlpha(next.borderAlpha);
+  const prevBorder = prev.border;
+  const nextBorder = next.border;
+  const borderChanged = JSON.stringify(prevBorder) !== JSON.stringify(nextBorder);
+  const hasAdvancedBorder = (b) => {
+    if (!b) return false;
+    if (typeof b.width === "number") return b.width > 0;
+    if (b.width)
+      return (b.width.top ?? 0) > 0 || (b.width.right ?? 0) > 0 || (b.width.bottom ?? 0) > 0 || (b.width.left ?? 0) > 0;
+    return false;
+  };
+  const prevHasBorder = prevBorderWidth > 0 && prevBorderColor !== void 0;
+  const nextHasBorder = nextBorderWidth > 0 && nextBorderColor !== void 0;
+  const prevHasGraphics = prevBgColor !== void 0 || prevHasBorder || hasAdvancedBorder(prevBorder);
+  const nextHasGraphics = nextBgColor !== void 0 || nextHasBorder || hasAdvancedBorder(nextBorder);
+  if (prevHasGraphics && !nextHasGraphics) {
+    if (container.__background) {
+      destroyBackgroundImage(container.__background);
+      delete container.__background;
+    }
+  } else if (!prevHasGraphics && nextHasGraphics) {
+    if (container.scene) {
+      const background = createBackgroundImage(container.scene, next, nextWidth, nextHeight);
+      if (!background) return;
+      container.addAt(background, 0);
+      container.__background = background;
+    }
+  } else if (container.__background && nextHasGraphics) {
+    const needsRedraw = prevBgColor !== nextBgColor || prevBgAlpha !== nextBgAlpha || prevWidth !== nextWidth || prevHeight !== nextHeight || prevCornerRadius !== nextCornerRadius || prevBorderWidth !== nextBorderWidth || prevBorderColor !== nextBorderColor || prevBorderAlpha !== nextBorderAlpha || borderChanged;
+    if (needsRedraw) {
+      const oldBackground = container.__background;
+      const background = createBackgroundImage(container.scene, next, nextWidth, nextHeight);
+      if (!background) return;
+      container.addAt(background, 0);
+      container.__background = background;
+      destroyBackgroundImage(oldBackground);
+    }
+  }
+  const signalEffects = container.__signalEffects ?? /* @__PURE__ */ new Map();
+  container.__signalEffects = signalEffects;
+  const bgSignal = next.backgroundAlpha;
+  const prevBgClean = signalEffects.get("__bgAlpha");
+  if (prevBgClean) {
+    prevBgClean();
+    signalEffects.delete("__bgAlpha");
+  }
+  if (bgSignal !== void 0 && isAnimatedSignal(bgSignal)) {
+    const cleanup = effect(() => {
+      if (!container.__background) return;
+      container.__background.alpha = Math.max(0, Math.min(1, bgSignal.value));
+    });
+    signalEffects.set("__bgAlpha", cleanup);
+  }
+}
+export {
+  applyBackgroundProps
+};
+//# sourceMappingURL=applyBackground.js.map

package/dist/components/appliers/applyBackground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyBackground.js","sources":["../../../src/components/appliers/applyBackground.ts"],"sourcesContent":["/**\n * Shared property appliers for component patching\n * These functions avoid code duplication when updating node properties\n */\nimport { isAnimatedSignal } from '@number10/jsx-core'\nimport { effect } from '@preact/signals-core'\nimport * as Phaser from 'phaser'\nimport type { BackgroundProps, LayoutProps } from '../../core-props'\nimport {\n  createBackgroundImage,\n  destroyBackgroundImage,\n  type BackgroundImage,\n} from '../backgroundImage'\n\n/**\n * Unwrap an Animatable<number> to a plain number.\n */\nfunction unwrapAlpha(v: unknown): number {\n  if (v === undefined) return 1\n  return (isAnimatedSignal(v) ? v.value : v) as number\n}\n\n/**\n * Applies background properties (color, alpha, corner radius, border)\n * Handles adding, removing, and updating background graphics on containers\n * @param container - Phaser Container with potential background\n * @param prev - Previous props\n * @param next - New props\n */\nexport function applyBackgroundProps(\n  container: Phaser.GameObjects.Container & {\n    __background?: BackgroundImage\n    __getLayoutSize?: () => { width: number; height: number }\n  },\n  prev: Partial<BackgroundProps & LayoutProps>,\n  next: Partial<BackgroundProps & LayoutProps>\n): void {\n  const prevBgColor = prev.backgroundColor\n  const nextBgColor = next.backgroundColor\n  const prevBgAlpha = unwrapAlpha(prev.backgroundAlpha)\n  const nextBgAlpha = unwrapAlpha(next.backgroundAlpha)\n\n  // Get actual layout size if available, fall back to props\n  let prevWidth = typeof prev.width === 'number' ? prev.width : 100\n  let prevHeight = typeof prev.height === 'number' ? prev.height : 100\n  let nextWidth = typeof next.width === 'number' ? next.width : 100\n  let nextHeight = typeof next.height === 'number' ? next.height : 100\n\n  // Use actual layout size if available (for auto-sized or calculated dimensions)\n  if (container.__getLayoutSize) {\n    const layoutSize = container.__getLayoutSize()\n    prevWidth = layoutSize.width\n    prevHeight = layoutSize.height\n    nextWidth = layoutSize.width\n    nextHeight = layoutSize.height\n  }\n\n  const prevCornerRadius = prev.cornerRadius ?? 0\n  const nextCornerRadius = next.cornerRadius ?? 0\n  const prevBorderColor = prev.borderColor\n  const nextBorderColor = next.borderColor\n  const prevBorderWidth = prev.borderWidth ?? 0\n  const nextBorderWidth = next.borderWidth ?? 0\n  const prevBorderAlpha = unwrapAlpha(prev.borderAlpha)\n  const nextBorderAlpha = unwrapAlpha(next.borderAlpha)\n\n  // BorderPropsV2 support: check if border object changed\n  const prevBorder = prev.border\n  const nextBorder = next.border\n  const borderChanged = JSON.stringify(prevBorder) !== JSON.stringify(nextBorder)\n  const hasAdvancedBorder = (b: typeof nextBorder): boolean => {\n    if (!b) return false\n    if (typeof b.width === 'number') return b.width > 0\n    if (b.width)\n      return (\n        (b.width.top ?? 0) > 0 ||\n        (b.width.right ?? 0) > 0 ||\n        (b.width.bottom ?? 0) > 0 ||\n        (b.width.left ?? 0) > 0\n      )\n    return false\n  }\n\n  const prevHasBorder = prevBorderWidth > 0 && prevBorderColor !== undefined\n  const nextHasBorder = nextBorderWidth > 0 && nextBorderColor !== undefined\n  const prevHasGraphics =\n    prevBgColor !== undefined || prevHasBorder || hasAdvancedBorder(prevBorder)\n  const nextHasGraphics =\n    nextBgColor !== undefined || nextHasBorder || hasAdvancedBorder(nextBorder)\n\n  if (prevHasGraphics && !nextHasGraphics) {\n    if (container.__background) {\n      destroyBackgroundImage(container.__background)\n      delete container.__background\n    }\n  } else if (!prevHasGraphics && nextHasGraphics) {\n    if (container.scene) {\n      const background = createBackgroundImage(container.scene, next, nextWidth, nextHeight)\n\n      if (!background) return\n\n      container.addAt(background, 0)\n      container.__background = background\n    }\n  } else if (container.__background && nextHasGraphics) {\n    const needsRedraw =\n      prevBgColor !== nextBgColor ||\n      prevBgAlpha !== nextBgAlpha ||\n      prevWidth !== nextWidth ||\n      prevHeight !== nextHeight ||\n      prevCornerRadius !== nextCornerRadius ||\n      prevBorderWidth !== nextBorderWidth ||\n      prevBorderColor !== nextBorderColor ||\n      prevBorderAlpha !== nextBorderAlpha ||\n      borderChanged\n\n    if (needsRedraw) {\n      const oldBackground = container.__background\n      const background = createBackgroundImage(container.scene, next, nextWidth, nextHeight)\n\n      if (!background) return\n\n      container.addAt(background, 0)\n      container.__background = background\n      destroyBackgroundImage(oldBackground)\n    }\n  }\n\n  // Subscribe to animated backgroundAlpha so the background updates live\n  // without VDOM re-renders.\n  const signalEffects =\n    (container as unknown as { __signalEffects?: Map<string, () => void> }).__signalEffects ??\n    new Map()\n  ;(container as unknown as { __signalEffects?: Map<string, () => void> }).__signalEffects =\n    signalEffects\n\n  const bgSignal = next.backgroundAlpha\n  const prevBgClean = signalEffects.get('__bgAlpha')\n  if (prevBgClean) {\n    prevBgClean()\n    signalEffects.delete('__bgAlpha')\n  }\n  if (bgSignal !== undefined && isAnimatedSignal(bgSignal)) {\n    const cleanup = effect(() => {\n      if (!container.__background) return\n      container.__background.alpha = Math.max(0, Math.min(1, bgSignal.value as number))\n    })\n    signalEffects.set('__bgAlpha', cleanup)\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/components/appliers/applyGestures.cjs

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Phaser = require("phaser");
+const gestureManager = require("../../gestures/gesture-manager.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Phaser__namespace = /* @__PURE__ */ _interopNamespaceDefault(Phaser);
+function applyGesturesProps(scene, container, prev, next) {
+  if (!scene || !scene.sys || !scene.data) {
+    console.warn("applyGesturesProps: Invalid scene or scene not initialized");
+    return;
+  }
+  if (scene.sys.game === null) {
+    return;
+  }
+  const hasAnyGesture = !!(next.onTouch || next.onTouchOutside || next.onTouchMove || next.onDoubleTap || next.onLongPress || next.onHoverStart || next.onHoverEnd || next.onWheel);
+  const hadAnyGesture = !!(prev.onTouch || prev.onTouchOutside || prev.onTouchMove || prev.onDoubleTap || prev.onLongPress || prev.onHoverStart || prev.onHoverEnd || prev.onWheel);
+  const prevEnabled = hadAnyGesture && prev.enableGestures !== false;
+  const nextEnabled = hasAnyGesture && next.enableGestures !== false;
+  const manager = gestureManager.getGestureManager(scene);
+  if (!prevEnabled && nextEnabled && hasAnyGesture) {
+    const containerWithLayout = container;
+    const { width, height } = containerWithLayout.__getLayoutSize ? containerWithLayout.__getLayoutSize() : (() => {
+      const bounds = container.getBounds();
+      return { width: bounds.width || 100, height: bounds.height || 100 };
+    })();
+    const hitArea = new Phaser__namespace.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;
+    const { width, height } = containerWithLayout.__getLayoutSize ? containerWithLayout.__getLayoutSize() : (() => {
+      const bounds = container.getBounds();
+      return { width: bounds.width || 100, height: bounds.height || 100 };
+    })();
+    const hitArea = new Phaser__namespace.Geom.Rectangle(0, 0, width, height);
+    manager.updateHitArea(container, hitArea);
+  }
+}
+exports.applyGesturesProps = applyGesturesProps;
+//# sourceMappingURL=applyGestures.cjs.map

package/dist/components/appliers/applyGestures.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyGestures.cjs","sources":["../../../src/components/appliers/applyGestures.ts"],"sourcesContent":["/**\n * Gesture property appliers for component patching\n * Updates gesture registration when props change\n */\nimport type { LayoutSize } from '@number10/jsx-core'\nimport * as Phaser from 'phaser'\nimport type { GestureProps, LayoutProps } from '../../core-props'\nimport { getGestureManager } from '../../gestures/gesture-manager'\nimport type { GestureCallbacks } from '../../gestures/gesture-types'\n\n/**\n * Applies gesture properties when props change\n * Handles enabling/disabling gestures, updating callbacks, and hit area changes\n * @param scene - Scene containing the gesture manager\n * @param container - Phaser Container to update gestures on\n * @param prev - Previous props\n * @param next - New props\n */\nexport function applyGesturesProps(\n  scene: Phaser.Scene,\n  container: Phaser.GameObjects.Container,\n  prev: Partial<GestureProps & LayoutProps>,\n  next: Partial<GestureProps & LayoutProps>\n): void {\n  // Safety check: ensure scene is valid and not destroyed\n  // Note: We skip isActive() check because multiple scenes can coexist (e.g., in docs-site)\n  // where only one is \"active\" at a time, but all need functional gesture management\n  if (!scene || !scene.sys || !scene.data) {\n    console.warn('applyGesturesProps: Invalid scene or scene not initialized')\n    return\n  }\n\n  // Only skip if scene's game instance is null (scene being destroyed)\n  if (scene.sys.game === null) {\n    return\n  }\n\n  const hasAnyGesture = !!(\n    next.onTouch ||\n    next.onTouchOutside ||\n    next.onTouchMove ||\n    next.onDoubleTap ||\n    next.onLongPress ||\n    next.onHoverStart ||\n    next.onHoverEnd ||\n    next.onWheel\n  )\n  const hadAnyGesture = !!(\n    prev.onTouch ||\n    prev.onTouchOutside ||\n    prev.onTouchMove ||\n    prev.onDoubleTap ||\n    prev.onLongPress ||\n    prev.onHoverStart ||\n    prev.onHoverEnd ||\n    prev.onWheel\n  )\n\n  // Auto-enable if callbacks present, unless explicitly disabled\n  const prevEnabled = hadAnyGesture && prev.enableGestures !== false\n  const nextEnabled = hasAnyGesture && next.enableGestures !== false\n\n  const manager = getGestureManager(scene)\n\n  // Case 1: Gestures newly enabled\n  if (!prevEnabled && nextEnabled && hasAnyGesture) {\n    // Register for the first time\n    // Use __getLayoutSize for actual calculated dimensions\n    const containerWithLayout = container as typeof container & {\n      __getLayoutSize?: () => LayoutSize\n    }\n\n    const { width, height } = containerWithLayout.__getLayoutSize\n      ? containerWithLayout.__getLayoutSize()\n      : (() => {\n          const bounds = container.getBounds()\n          return { width: bounds.width || 100, height: bounds.height || 100 }\n        })()\n\n    const hitArea = new Phaser.Geom.Rectangle(0, 0, width, height)\n\n    const callbacks: GestureCallbacks = {}\n    if (next.onTouch) callbacks.onTouch = next.onTouch\n    if (next.onTouchOutside) callbacks.onTouchOutside = next.onTouchOutside\n    if (next.onTouchMove) callbacks.onTouchMove = next.onTouchMove\n    if (next.onDoubleTap) callbacks.onDoubleTap = next.onDoubleTap\n    if (next.onLongPress) callbacks.onLongPress = next.onLongPress\n    if (next.onHoverStart) callbacks.onHoverStart = next.onHoverStart\n    if (next.onHoverEnd) callbacks.onHoverEnd = next.onHoverEnd\n    if (next.onWheel) callbacks.onWheel = next.onWheel\n\n    const config: { longPressDuration?: number; doubleTapDelay?: number } = {}\n    if (next.longPressDuration !== undefined) config.longPressDuration = next.longPressDuration\n    if (next.doubleTapDelay !== undefined) config.doubleTapDelay = next.doubleTapDelay\n\n    manager.registerContainer(container, callbacks, hitArea, config)\n    return\n  }\n\n  // Case 2: Gestures disabled or no callbacks\n  if (prevEnabled && (!nextEnabled || !hasAnyGesture)) {\n    manager.unregisterContainer(container)\n    return\n  }\n\n  // Case 3: Gestures still enabled, update callbacks/hit area\n  if (nextEnabled && hasAnyGesture) {\n    // Update callbacks if any changed\n    const callbacksChanged =\n      prev.onTouch !== next.onTouch ||\n      prev.onTouchOutside !== next.onTouchOutside ||\n      prev.onTouchMove !== next.onTouchMove ||\n      prev.onDoubleTap !== next.onDoubleTap ||\n      prev.onLongPress !== next.onLongPress ||\n      prev.onHoverStart !== next.onHoverStart ||\n      prev.onHoverEnd !== next.onHoverEnd ||\n      prev.onWheel !== next.onWheel\n\n    if (callbacksChanged) {\n      const callbacks: GestureCallbacks = {}\n      if (next.onTouch) callbacks.onTouch = next.onTouch\n      if (next.onTouchOutside) callbacks.onTouchOutside = next.onTouchOutside\n      if (next.onTouchMove) callbacks.onTouchMove = next.onTouchMove\n      if (next.onDoubleTap) callbacks.onDoubleTap = next.onDoubleTap\n      if (next.onLongPress) callbacks.onLongPress = next.onLongPress\n      if (next.onHoverStart) callbacks.onHoverStart = next.onHoverStart\n      if (next.onHoverEnd) callbacks.onHoverEnd = next.onHoverEnd\n      if (next.onWheel) callbacks.onWheel = next.onWheel\n\n      manager.updateCallbacks(container, callbacks)\n    }\n\n    // Always update hit area when gestures are enabled\n    // This ensures animated size changes (overlayHeight.value) are reflected\n    // Use __getLayoutSize for actual calculated dimensions\n    const containerWithLayout = container as typeof container & {\n      __getLayoutSize?: () => LayoutSize\n    }\n\n    const { width, height } = containerWithLayout.__getLayoutSize\n      ? containerWithLayout.__getLayoutSize()\n      : (() => {\n          const bounds = container.getBounds()\n          return { width: bounds.width || 100, height: bounds.height || 100 }\n        })()\n\n    const hitArea = new Phaser.Geom.Rectangle(0, 0, width, height)\n\n    manager.updateHitArea(container, hitArea)\n  }\n}\n"],"names":["getGestureManager","Phaser"],"mappings":"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"}

package/dist/components/appliers/applyGestures.d.ts

@@ -0,0 +1,12 @@
+import { GestureProps, LayoutProps } from '../../core-props';
+import * as Phaser from 'phaser';
+/**
+ * Applies gesture properties when props change
+ * Handles enabling/disabling gestures, updating callbacks, and hit area changes
+ * @param scene - Scene containing the gesture manager
+ * @param container - Phaser Container to update gestures on
+ * @param prev - Previous props
+ * @param next - New props
+ */
+export declare function applyGesturesProps(scene: Phaser.Scene, container: Phaser.GameObjects.Container, prev: Partial<GestureProps & LayoutProps>, next: Partial<GestureProps & LayoutProps>): void;
+//# sourceMappingURL=applyGestures.d.ts.map

package/dist/components/appliers/applyGestures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyGestures.d.ts","sourceRoot":"","sources":["../../../src/components/appliers/applyGestures.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAA;AAChC,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAIjE;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,SAAS,EACvC,IAAI,EAAE,OAAO,CAAC,YAAY,GAAG,WAAW,CAAC,EACzC,IAAI,EAAE,OAAO,CAAC,YAAY,GAAG,WAAW,CAAC,GACxC,IAAI,CA+HN"}