@number10/phaserjsx 4.1.0 → 4.2.0

package/dist/{custom-Dp3yAJdU.cjs → custom-DTd4LxDn.cjs}

@@ -16938,7 +16938,7 @@ var GestureManager = class {
 	/**
 	* Handle global pointer down event
 	* Registers all containers that were hit for move event tracking
-	* Only the topmost gets touch/longpress callbacks
+	* Only the topmost gets touch/long-press callbacks
 	*/
 	handlePointerDown(pointer) {
 		const hitContainers = /* @__PURE__ */ new Set();
@@ -24155,7 +24155,7 @@ function registerBuiltins() {
 /**
 * Preprocesses SVG string to ensure tinting works correctly
 * Replaces fill/stroke="currentColor" and other colors with white (#FFFFFF)
-* This allows Phaser's tint to work multiplicatively (white × tint = tint color)
+* This allows Phaser's tint to work by multiplication (white × tint = tint color)
 * @param svg - Raw SVG string
 * @returns Preprocessed SVG string with white fills/strokes
 */
@@ -26747,6 +26747,264 @@ function CharTextInput(props) {
 	});
 }
 //#endregion
+//#region src/design-tokens/use-theme-tokens.ts
+/**
+* Hook to access complete design token system
+* Combines colors with text styles, spacing, sizes, and radius tokens
+*/
+/**
+* Hook to access complete design token system from theme context
+* Provides colors, text styles, spacing, sizes, and radius tokens
+* Automatically updates when color mode or preset changes
+* @returns Current DesignTokens or undefined
+* @example
+* ```typescript
+* function MyComponent() {
+*   const tokens = useThemeTokens()
+*
+*   if (!tokens) return null
+*
+*   return (
+*     <View
+*       backgroundColor={tokens.colors.surface.DEFAULT}
+*       padding={tokens.spacing.lg}
+*       cornerRadius={tokens.radius.md}
+*     >
+*       <Text text="Title" style={tokens.textStyles.title} />
+*       <Text text="Body text" style={tokens.textStyles.DEFAULT} />
+*     </View>
+*   )
+* }
+* ```
+*/
+function useThemeTokens() {
+	const localTheme = useTheme();
+	const getInitialTokens = () => {
+		if (localTheme?.__colorPreset) {
+			const preset = getPresetWithMode(localTheme.__colorPreset.name, localTheme.__colorPreset.mode ?? "light");
+			return {
+				colors: preset.colors,
+				textStyles: createTextStyleTokens(preset.colors.text.DEFAULT.toString()),
+				spacing: defaultSpacingTokens,
+				sizes: defaultSizeTokens,
+				radius: defaultRadiusTokens
+			};
+		}
+		const colors = themeRegistry.getColorTokens();
+		if (!colors) return void 0;
+		return {
+			colors,
+			textStyles: createTextStyleTokens(colors.text.DEFAULT.toString()),
+			spacing: defaultSpacingTokens,
+			sizes: defaultSizeTokens,
+			radius: defaultRadiusTokens
+		};
+	};
+	const [tokens, setTokens] = useState(getInitialTokens());
+	const [, forceUpdate] = useState(0);
+	useEffect(() => {
+		return themeRegistry.subscribe(() => {
+			if (localTheme?.__colorPreset) {
+				const currentMode = themeRegistry.getColorMode();
+				const preset = getPresetWithMode(localTheme.__colorPreset.name, currentMode);
+				setTokens({
+					colors: preset.colors,
+					textStyles: createTextStyleTokens(preset.colors.text.DEFAULT.toString()),
+					spacing: defaultSpacingTokens,
+					sizes: defaultSizeTokens,
+					radius: defaultRadiusTokens
+				});
+			} else {
+				const colors = themeRegistry.getColorTokens();
+				if (colors) setTokens({
+					colors,
+					textStyles: createTextStyleTokens(colors.text.DEFAULT.toString()),
+					spacing: defaultSpacingTokens,
+					sizes: defaultSizeTokens,
+					radius: defaultRadiusTokens
+				});
+			}
+			forceUpdate((n) => n + 1);
+		});
+	}, [localTheme]);
+	return tokens;
+}
+//#endregion
+//#region src/components/custom/DebugPanel.tsx
+/** @jsxImportSource ../.. */
+/**
+* DebugPanel component - lightweight runtime diagnostics for Phaser + PhaserJSX
+* Renders selected metrics as text rows or a compact single-line summary.
+*/
+var PRESET_METRICS = {
+	fps: ["fps", "frameMs"],
+	perf: [
+		"fps",
+		"frameMs",
+		"renderer",
+		"viewport"
+	],
+	vdom: [
+		"mountsTotal",
+		"mountsByType",
+		"mountsByParent",
+		"mountsByKey"
+	],
+	textures: ["textureCount"],
+	full: [
+		"fps",
+		"frameMs",
+		"phaserVersion",
+		"renderer",
+		"viewport",
+		"textureCount",
+		"mountsTotal",
+		"mountsByType",
+		"mountsByParent",
+		"mountsByKey",
+		"debugFlags"
+	]
+};
+var DEFAULT_LABELS = {
+	fps: "FPS",
+	frameMs: "Frame ms",
+	phaserVersion: "Phaser",
+	renderer: "Renderer",
+	viewport: "Viewport",
+	textureCount: "Textures",
+	mountsTotal: "Mounts",
+	mountsByType: "Mounts/type",
+	mountsByParent: "Mounts/parent",
+	mountsByKey: "Mounts/key",
+	debugFlags: "Debug flags"
+};
+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 = 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;
+	return {
+		fps: Number.isFinite(rawFps) ? Number(rawFps.toFixed(1)) : 0,
+		frameMs: Number.isFinite(rawFrameMs) ? Number(rawFrameMs.toFixed(2)) : 0
+	};
+}
+function summarizeMap(map, maxEntries = 3) {
+	return Array.from(map.entries()).sort((a, b) => b[1] - a[1]).slice(0, maxEntries).map(([key, value]) => `${String(key)}:${value}`).join(" | ") || "-";
+}
+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 collectSnapshot(scene) {
+	const { fps, frameMs } = resolveFrameStats(scene);
+	const mountStats = getMountStats();
+	return {
+		fps,
+		frameMs,
+		phaserVersion: phaser.VERSION,
+		renderer: resolveRendererName(scene),
+		viewport: `${scene.scale.width}x${scene.scale.height}`,
+		textureCount: resolveTextureCount(scene),
+		mountsTotal: mountStats.totalMounts,
+		mountsByType: summarizeMap(mountStats.byType),
+		mountsByParent: summarizeMap(mountStats.byParent),
+		mountsByKey: summarizeMap(mountStats.byKey),
+		debugFlags: resolveDebugFlags()
+	};
+}
+function formatDefault(value) {
+	return typeof value === "number" ? String(value) : value;
+}
+/**
+* DebugPanel component
+* Shows selected diagnostics from Phaser + PhaserJSX as overlay-ready content.
+*/
+function DebugPanel(props) {
+	const scene = useScene();
+	const { preset = "fps", metrics, intervalMs = 250, compact = false, maxRows, labels, formatters, innerProps, ...viewProps } = props;
+	const selectedMetrics = useMemo(() => {
+		const source = metrics && metrics.length > 0 ? metrics : PRESET_METRICS[preset];
+		return Array.from(new Set(source));
+	}, [metrics, preset]);
+	const [snapshot, setSnapshot] = useState(collectSnapshot(scene));
+	useEffect(() => {
+		const delay = Math.max(50, intervalMs);
+		setSnapshot(collectSnapshot(scene));
+		const timer = window.setInterval(() => {
+			setSnapshot(collectSnapshot(scene));
+		}, delay);
+		return () => {
+			window.clearInterval(timer);
+		};
+	}, [
+		scene,
+		intervalMs,
+		selectedMetrics
+	]);
+	const tokens = useThemeTokens();
+	const rowStyle = tokens?.textStyles.small;
+	const valueStyle = tokens?.textStyles.small;
+	const rows = selectedMetrics.map((metric) => {
+		const rawValue = snapshot[metric];
+		const label = labels?.[metric] ?? DEFAULT_LABELS[metric];
+		const formatter = formatters?.[metric];
+		return {
+			metric,
+			label,
+			value: formatter ? formatter(rawValue) : formatDefault(rawValue)
+		};
+	});
+	const limitedRows = typeof maxRows === "number" ? rows.slice(0, Math.max(1, maxRows)) : rows;
+	if (compact) {
+		const compactText = limitedRows.map((row) => `${row.label} ${row.value}`).join(" | ");
+		return /* @__PURE__ */ require_jsx_runtime.jsx(View, {
+			...viewProps,
+			children: /* @__PURE__ */ require_jsx_runtime.jsx(Text, {
+				text: compactText,
+				style: valueStyle
+			})
+		});
+	}
+	return /* @__PURE__ */ require_jsx_runtime.jsx(View, {
+		direction: "column",
+		gap: 4,
+		...viewProps,
+		children: limitedRows.map((row) => /* @__PURE__ */ require_jsx_runtime.jsxs(View, {
+			direction: "row",
+			gap: 8,
+			...innerProps,
+			children: [/* @__PURE__ */ require_jsx_runtime.jsx(Text, {
+				text: `${row.label}:`,
+				style: rowStyle
+			}), /* @__PURE__ */ require_jsx_runtime.jsx(Text, {
+				text: row.value,
+				style: valueStyle
+			})]
+		}, `debug-${row.metric}`))
+	});
+}
+//#endregion
 //#region src/components/custom/Divider.tsx
 /**
 * Divider component - renders a simple line separator
@@ -29199,7 +29457,6 @@ function Toggle(props) {
 		setIsAnimating(true);
 		const endX = newChecked ? thumbOffsetOn : thumbOffsetOff;
 		const startX = thumbX;
-		console.log("Duration:", duration.current);
 		scene.tweens.addCounter({
 			from: 0,
 			to: 1,
@@ -29420,6 +29677,12 @@ Object.defineProperty(exports, "DebugLogger", {
 		return DebugLogger;
 	}
 });
+Object.defineProperty(exports, "DebugPanel", {
+	enumerable: true,
+	get: function() {
+		return DebugPanel;
+	}
+});
 Object.defineProperty(exports, "DevConfig", {
 	enumerable: true,
 	get: function() {
@@ -30458,6 +30721,12 @@ Object.defineProperty(exports, "useTheme", {
 		return useTheme;
 	}
 });
+Object.defineProperty(exports, "useThemeTokens", {
+	enumerable: true,
+	get: function() {
+		return useThemeTokens;
+	}
+});
 Object.defineProperty(exports, "useViewportSize", {
 	enumerable: true,
 	get: function() {
@@ -30495,4 +30764,4 @@ Object.defineProperty(exports, "withHooks", {
 	}
 });
 
-//# sourceMappingURL=custom-Dp3yAJdU.cjs.map
+//# sourceMappingURL=custom-DTd4LxDn.cjs.map