blacktrigram 0.7.2

package/lib/utils/performance/PerformanceOverlay3D.js

@@ -0,0 +1,200 @@
+import usePerformanceMonitor from "./usePerformanceMonitor.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/utils/performance/PerformanceOverlay3D.tsx
+/**
+* PerformanceOverlay3D - Development-only performance stats overlay for Three.js
+*
+* Displays real-time FPS, memory, and draw call statistics
+* Only visible in development mode
+*/
+/**
+* 3D Performance overlay component for development
+* Shows FPS, memory, draw calls, and warnings
+* Uses screen-space positioning (bottom-left corner)
+*/
+var PerformanceOverlay3D = ({ position: _position = [
+	0,
+	0,
+	0
+], visible = false }) => {
+	const { metrics, isGood, warnings } = usePerformanceMonitor({
+		enabled: visible,
+		updateInterval: 500
+	});
+	if (!visible) return null;
+	const fpsColor = isGood ? "#00ff88" : metrics.avgFps < 30 ? "#ff4444" : "#ffaa00";
+	return /* @__PURE__ */ jsx(Html, {
+		fullscreen: true,
+		style: { pointerEvents: "none" },
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				position: "absolute",
+				bottom: "20px",
+				left: "20px",
+				backgroundColor: "rgba(0, 0, 0, 0.85)",
+				border: "2px solid #00ffff",
+				borderRadius: "8px",
+				padding: "12px 16px",
+				fontFamily: "monospace",
+				fontSize: "12px",
+				color: "#00ffff",
+				minWidth: "220px",
+				maxWidth: "280px",
+				userSelect: "none",
+				pointerEvents: "none",
+				zIndex: 200
+			},
+			"data-testid": "performance-overlay",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						fontSize: "14px",
+						fontWeight: "bold",
+						marginBottom: "8px",
+						borderBottom: "1px solid #00ffff",
+						paddingBottom: "4px"
+					},
+					children: "⚡ Performance Monitor"
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: { marginBottom: "8px" },
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								justifyContent: "space-between",
+								marginBottom: "2px"
+							},
+							children: [/* @__PURE__ */ jsx("span", { children: "FPS:" }), /* @__PURE__ */ jsx("span", {
+								style: {
+									color: fpsColor,
+									fontWeight: "bold"
+								},
+								children: metrics.fps.toFixed(1)
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								justifyContent: "space-between",
+								marginBottom: "2px"
+							},
+							children: [/* @__PURE__ */ jsx("span", { children: "Avg FPS:" }), /* @__PURE__ */ jsx("span", {
+								style: { color: fpsColor },
+								children: metrics.avgFps.toFixed(1)
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								justifyContent: "space-between",
+								marginBottom: "2px"
+							},
+							children: [/* @__PURE__ */ jsx("span", { children: "Min/Max:" }), /* @__PURE__ */ jsxs("span", { children: [
+								metrics.minFps.toFixed(1),
+								" / ",
+								metrics.maxFps.toFixed(1)
+							] })]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								justifyContent: "space-between"
+							},
+							children: [/* @__PURE__ */ jsx("span", { children: "Frame Time:" }), /* @__PURE__ */ jsxs("span", { children: [metrics.frameTime.toFixed(2), "ms"] })]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					style: {
+						marginBottom: "8px",
+						borderTop: "1px solid #444",
+						paddingTop: "8px"
+					},
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								justifyContent: "space-between",
+								marginBottom: "2px"
+							},
+							children: [/* @__PURE__ */ jsx("span", { children: "Memory:" }), /* @__PURE__ */ jsx("span", {
+								style: { color: metrics.memoryMB > 300 ? "#ff4444" : metrics.memoryMB > 250 ? "#ffaa00" : "#00ffff" },
+								children: metrics.memoryMB > 0 ? `${metrics.memoryMB.toFixed(1)}MB` : "N/A"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								justifyContent: "space-between",
+								marginBottom: "2px"
+							},
+							children: [/* @__PURE__ */ jsx("span", { children: "Draw Calls:" }), /* @__PURE__ */ jsx("span", {
+								style: { color: metrics.drawCalls > 150 ? "#ff4444" : metrics.drawCalls > 100 ? "#ffaa00" : "#00ffff" },
+								children: metrics.drawCalls
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							style: {
+								display: "flex",
+								justifyContent: "space-between"
+							},
+							children: [/* @__PURE__ */ jsx("span", { children: "Triangles:" }), /* @__PURE__ */ jsxs("span", { children: [(metrics.triangles / 1e3).toFixed(1), "k"] })]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						borderTop: "1px solid #444",
+						paddingTop: "8px"
+					},
+					children: /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: "8px"
+						},
+						children: [/* @__PURE__ */ jsx("span", { style: {
+							width: "12px",
+							height: "12px",
+							borderRadius: "50%",
+							backgroundColor: isGood ? "#00ff88" : "#ff4444",
+							display: "inline-block"
+						} }), /* @__PURE__ */ jsx("span", {
+							style: { fontWeight: "bold" },
+							children: isGood ? "Performance Good" : "Performance Degraded"
+						})]
+					})
+				}),
+				warnings.length > 0 && /* @__PURE__ */ jsxs("div", {
+					style: {
+						marginTop: "8px",
+						borderTop: "1px solid #ff4444",
+						paddingTop: "8px"
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							color: "#ff4444",
+							fontWeight: "bold",
+							marginBottom: "4px"
+						},
+						children: "⚠️ Warnings:"
+					}), warnings.map((warning, index) => /* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: "11px",
+							color: "#ffaa00",
+							marginBottom: "2px"
+						},
+						children: warning
+					}, index))]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { PerformanceOverlay3D as default };
+
+//# sourceMappingURL=PerformanceOverlay3D.js.map

package/lib/utils/performance/PerformanceOverlay3D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PerformanceOverlay3D.js","names":[],"sources":["../../../src/utils/performance/PerformanceOverlay3D.tsx"],"sourcesContent":["/**\n * PerformanceOverlay3D - Development-only performance stats overlay for Three.js\n *\n * Displays real-time FPS, memory, and draw call statistics\n * Only visible in development mode\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React from \"react\";\nimport { usePerformanceMonitor } from \"./usePerformanceMonitor\";\n\nexport interface PerformanceOverlay3DProps {\n  /** @deprecated Position prop is no longer used - overlay now uses screen-space positioning */\n  readonly position?: [number, number, number];\n  readonly visible?: boolean;\n}\n\n/**\n * 3D Performance overlay component for development\n * Shows FPS, memory, draw calls, and warnings\n * Uses screen-space positioning (bottom-left corner)\n */\nexport const PerformanceOverlay3D: React.FC<PerformanceOverlay3DProps> = ({\n  position: _position = [0, 0, 0],\n  visible = import.meta.env.DEV,\n}) => {\n  const { metrics, isGood, warnings } = usePerformanceMonitor({\n    enabled: visible,\n    updateInterval: 500, // Update UI every 500ms\n  });\n\n  if (!visible) {\n    return null;\n  }\n\n  const fpsColor = isGood\n    ? \"#00ff88\"\n    : metrics.avgFps < 30\n    ? \"#ff4444\"\n    : \"#ffaa00\";\n\n  return (\n    <Html fullscreen style={{ pointerEvents: \"none\" }}>\n      <div\n        style={{\n          position: \"absolute\",\n          bottom: \"20px\",\n          left: \"20px\",\n          backgroundColor: \"rgba(0, 0, 0, 0.85)\",\n          border: \"2px solid #00ffff\",\n          borderRadius: \"8px\",\n          padding: \"12px 16px\",\n          fontFamily: \"monospace\",\n          fontSize: \"12px\",\n          color: \"#00ffff\",\n          minWidth: \"220px\",\n          maxWidth: \"280px\",\n          userSelect: \"none\",\n          pointerEvents: \"none\",\n          zIndex: 200,\n        }}\n        data-testid=\"performance-overlay\"\n      >\n        {/* Title */}\n        <div\n          style={{\n            fontSize: \"14px\",\n            fontWeight: \"bold\",\n            marginBottom: \"8px\",\n            borderBottom: \"1px solid #00ffff\",\n            paddingBottom: \"4px\",\n          }}\n        >\n          ⚡ Performance Monitor\n        </div>\n\n        {/* FPS Stats */}\n        <div style={{ marginBottom: \"8px\" }}>\n          <div\n            style={{\n              display: \"flex\",\n              justifyContent: \"space-between\",\n              marginBottom: \"2px\",\n            }}\n          >\n            <span>FPS:</span>\n            <span style={{ color: fpsColor, fontWeight: \"bold\" }}>\n              {metrics.fps.toFixed(1)}\n            </span>\n          </div>\n          <div\n            style={{\n              display: \"flex\",\n              justifyContent: \"space-between\",\n              marginBottom: \"2px\",\n            }}\n          >\n            <span>Avg FPS:</span>\n            <span style={{ color: fpsColor }}>{metrics.avgFps.toFixed(1)}</span>\n          </div>\n          <div\n            style={{\n              display: \"flex\",\n              justifyContent: \"space-between\",\n              marginBottom: \"2px\",\n            }}\n          >\n            <span>Min/Max:</span>\n            <span>\n              {metrics.minFps.toFixed(1)} / {metrics.maxFps.toFixed(1)}\n            </span>\n          </div>\n          <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n            <span>Frame Time:</span>\n            <span>{metrics.frameTime.toFixed(2)}ms</span>\n          </div>\n        </div>\n\n        {/* System Stats */}\n        <div\n          style={{\n            marginBottom: \"8px\",\n            borderTop: \"1px solid #444\",\n            paddingTop: \"8px\",\n          }}\n        >\n          <div\n            style={{\n              display: \"flex\",\n              justifyContent: \"space-between\",\n              marginBottom: \"2px\",\n            }}\n          >\n            <span>Memory:</span>\n            <span\n              style={{\n                color:\n                  metrics.memoryMB > 300\n                    ? \"#ff4444\"\n                    : metrics.memoryMB > 250\n                    ? \"#ffaa00\"\n                    : \"#00ffff\",\n              }}\n            >\n              {metrics.memoryMB > 0\n                ? `${metrics.memoryMB.toFixed(1)}MB`\n                : \"N/A\"}\n            </span>\n          </div>\n          <div\n            style={{\n              display: \"flex\",\n              justifyContent: \"space-between\",\n              marginBottom: \"2px\",\n            }}\n          >\n            <span>Draw Calls:</span>\n            <span\n              style={{\n                color:\n                  metrics.drawCalls > 150\n                    ? \"#ff4444\"\n                    : metrics.drawCalls > 100\n                    ? \"#ffaa00\"\n                    : \"#00ffff\",\n              }}\n            >\n              {metrics.drawCalls}\n            </span>\n          </div>\n          <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n            <span>Triangles:</span>\n            <span>{(metrics.triangles / 1000).toFixed(1)}k</span>\n          </div>\n        </div>\n\n        {/* Performance Status */}\n        <div style={{ borderTop: \"1px solid #444\", paddingTop: \"8px\" }}>\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              gap: \"8px\",\n            }}\n          >\n            <span\n              style={{\n                width: \"12px\",\n                height: \"12px\",\n                borderRadius: \"50%\",\n                backgroundColor: isGood ? \"#00ff88\" : \"#ff4444\",\n                display: \"inline-block\",\n              }}\n            />\n            <span style={{ fontWeight: \"bold\" }}>\n              {isGood ? \"Performance Good\" : \"Performance Degraded\"}\n            </span>\n          </div>\n        </div>\n\n        {/* Warnings */}\n        {warnings.length > 0 && (\n          <div\n            style={{\n              marginTop: \"8px\",\n              borderTop: \"1px solid #ff4444\",\n              paddingTop: \"8px\",\n            }}\n          >\n            <div\n              style={{\n                color: \"#ff4444\",\n                fontWeight: \"bold\",\n                marginBottom: \"4px\",\n              }}\n            >\n              ⚠️ Warnings:\n            </div>\n            {warnings.map((warning, index) => (\n              <div\n                key={index}\n                style={{\n                  fontSize: \"11px\",\n                  color: \"#ffaa00\",\n                  marginBottom: \"2px\",\n                }}\n              >\n                {warning}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </Html>\n  );\n};\n\nexport default PerformanceOverlay3D;\n"],"mappings":"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"}

package/lib/utils/performance/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Performance utilities for Three.js optimization
+ *
+ * Exports performance monitoring and optimization tools
+ */
+export * from './PerformanceMonitor';
+export { default as PerformanceMonitor } from './PerformanceMonitor';
+export * from './usePerformanceMonitor';
+export { default as usePerformanceMonitor } from './usePerformanceMonitor';
+export * from './PerformanceOverlay3D';
+export { default as PerformanceOverlay3D } from './PerformanceOverlay3D';
+//# sourceMappingURL=index.d.ts.map

package/lib/utils/performance/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/performance/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/lib/utils/performance/index.js

@@ -0,0 +1,3 @@
+import "./PerformanceMonitor.js";
+import "./usePerformanceMonitor.js";
+import "./PerformanceOverlay3D.js";

package/lib/utils/performance/usePerformanceMonitor.d.ts

@@ -0,0 +1,46 @@
+/**
+ * React hook for Three.js performance monitoring
+ *
+ * Integrates PerformanceMonitor with useFrame for real-time FPS tracking
+ */
+import { PerformanceMetrics, PerformanceThresholds } from './PerformanceMonitor';
+export interface UsePerformanceMonitorOptions {
+    readonly enabled?: boolean;
+    readonly thresholds?: Partial<PerformanceThresholds>;
+    readonly updateInterval?: number;
+}
+export interface PerformanceMonitorState {
+    readonly metrics: PerformanceMetrics;
+    readonly isGood: boolean;
+    readonly warnings: readonly string[];
+}
+/**
+ * Hook for monitoring Three.js performance in real-time
+ *
+ * @param options Configuration options
+ * @returns Current performance state
+ *
+ * @example
+ * ```tsx
+ * function CombatScene() {
+ *   const { metrics, isGood, warnings } = usePerformanceMonitor({
+ *     enabled: import.meta.env.DEV,
+ *     thresholds: { minAcceptableFps: 55 }
+ *   });
+ *
+ *   return (
+ *     <>
+ *       {import.meta.env.DEV && (
+ *         <Html position={[0, 5, 0]}>
+ *           <div>FPS: {metrics.fps.toFixed(1)}</div>
+ *         </Html>
+ *       )}
+ *       {/＊ 3D content ＊/}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function usePerformanceMonitor(options?: UsePerformanceMonitorOptions): PerformanceMonitorState;
+export default usePerformanceMonitor;
+//# sourceMappingURL=usePerformanceMonitor.d.ts.map

package/lib/utils/performance/usePerformanceMonitor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePerformanceMonitor.d.ts","sourceRoot":"","sources":["../../../src/utils/performance/usePerformanceMonitor.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAsB,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAErG,MAAM,WAAW,4BAA4B;IAC3C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;IACrD,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC;CAClC;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,OAAO,EAAE,kBAAkB,CAAC;IACrC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,qBAAqB,CACnC,OAAO,GAAE,4BAAiC,GACzC,uBAAuB,CAmDzB;AAED,eAAe,qBAAqB,CAAC"}

package/lib/utils/performance/usePerformanceMonitor.js

@@ -0,0 +1,71 @@
+import PerformanceMonitor from "./PerformanceMonitor.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+//#region src/utils/performance/usePerformanceMonitor.ts
+/**
+* React hook for Three.js performance monitoring
+* 
+* Integrates PerformanceMonitor with useFrame for real-time FPS tracking
+*/
+/**
+* Hook for monitoring Three.js performance in real-time
+* 
+* @param options Configuration options
+* @returns Current performance state
+* 
+* @example
+* ```tsx
+* function CombatScene() {
+*   const { metrics, isGood, warnings } = usePerformanceMonitor({
+*     enabled: import.meta.env.DEV,
+*     thresholds: { minAcceptableFps: 55 }
+*   });
+* 
+*   return (
+*     <>
+*       {import.meta.env.DEV && (
+*         <Html position={[0, 5, 0]}>
+*           <div>FPS: {metrics.fps.toFixed(1)}</div>
+*         </Html>
+*       )}
+*       {/＊ 3D content ＊/}
+*     </>
+*   );
+* }
+* ```
+*/
+function usePerformanceMonitor(options = {}) {
+	const { enabled = true, thresholds, updateInterval = 1e3 } = options;
+	const gl = useThree((state) => state.gl);
+	const stableThresholds = useMemo(() => thresholds, [thresholds]);
+	const monitor = useMemo(() => new PerformanceMonitor(stableThresholds), [stableThresholds]);
+	const [state, setState] = useState(() => ({
+		metrics: monitor.getMetrics(gl),
+		isGood: monitor.isPerformanceGood(),
+		warnings: monitor.getWarnings()
+	}));
+	const lastUpdateRef = useRef(0);
+	useFrame(() => {
+		if (!enabled) return;
+		monitor.update(gl);
+		const now = performance.now();
+		if (now - lastUpdateRef.current >= updateInterval) {
+			lastUpdateRef.current = now;
+			setState({
+				metrics: monitor.getMetrics(gl),
+				isGood: monitor.isPerformanceGood(),
+				warnings: monitor.getWarnings()
+			});
+		}
+	});
+	useEffect(() => {
+		return () => {
+			monitor.reset();
+		};
+	}, [monitor]);
+	return state;
+}
+//#endregion
+export { usePerformanceMonitor as default };
+
+//# sourceMappingURL=usePerformanceMonitor.js.map

package/lib/utils/performance/usePerformanceMonitor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePerformanceMonitor.js","names":[],"sources":["../../../src/utils/performance/usePerformanceMonitor.ts"],"sourcesContent":["/**\n * React hook for Three.js performance monitoring\n * \n * Integrates PerformanceMonitor with useFrame for real-time FPS tracking\n */\n\nimport { useFrame, useThree } from '@react-three/fiber';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { PerformanceMonitor, PerformanceMetrics, PerformanceThresholds } from './PerformanceMonitor';\n\nexport interface UsePerformanceMonitorOptions {\n  readonly enabled?: boolean;\n  readonly thresholds?: Partial<PerformanceThresholds>;\n  readonly updateInterval?: number; // Update interval in ms for React state\n}\n\nexport interface PerformanceMonitorState {\n  readonly metrics: PerformanceMetrics;\n  readonly isGood: boolean;\n  readonly warnings: readonly string[];\n}\n\n/**\n * Hook for monitoring Three.js performance in real-time\n * \n * @param options Configuration options\n * @returns Current performance state\n * \n * @example\n * ```tsx\n * function CombatScene() {\n *   const { metrics, isGood, warnings } = usePerformanceMonitor({\n *     enabled: import.meta.env.DEV,\n *     thresholds: { minAcceptableFps: 55 }\n *   });\n * \n *   return (\n *     <>\n *       {import.meta.env.DEV && (\n *         <Html position={[0, 5, 0]}>\n *           <div>FPS: {metrics.fps.toFixed(1)}</div>\n *         </Html>\n *       )}\n *       {/＊ 3D content ＊/}\n *     </>\n *   );\n * }\n * ```\n */\nexport function usePerformanceMonitor(\n  options: UsePerformanceMonitorOptions = {}\n): PerformanceMonitorState {\n  const { enabled = true, thresholds, updateInterval = 1000 } = options;\n\n  const gl = useThree((state) => state.gl);\n  \n  // Memoize thresholds to prevent unnecessary monitor recreation\n  const stableThresholds = useMemo(\n    () => thresholds,\n    [thresholds]\n  );\n\n  const monitor = useMemo(\n    () => new PerformanceMonitor(stableThresholds),\n    [stableThresholds]\n  );\n\n  const [state, setState] = useState<PerformanceMonitorState>(() => ({\n    metrics: monitor.getMetrics(gl),\n    isGood: monitor.isPerformanceGood(),\n    warnings: monitor.getWarnings(),\n  }));\n\n  const lastUpdateRef = useRef(0);\n\n  // Update performance monitor every frame\n  useFrame(() => {\n    if (!enabled) return;\n\n    monitor.update(gl);\n\n    // Update React state at specified interval\n    const now = performance.now();\n    if (now - lastUpdateRef.current >= updateInterval) {\n      lastUpdateRef.current = now;\n      \n      setState({\n        metrics: monitor.getMetrics(gl),\n        isGood: monitor.isPerformanceGood(),\n        warnings: monitor.getWarnings(),\n      });\n    }\n  });\n\n  // Reset monitor on unmount\n  useEffect(() => {\n    return () => {\n      monitor.reset();\n    };\n  }, [monitor]);\n\n  return state;\n}\n\nexport default usePerformanceMonitor;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAgB,sBACd,UAAwC,EAAE,EACjB;CACzB,MAAM,EAAE,UAAU,MAAM,YAAY,iBAAiB,QAAS;CAE9D,MAAM,KAAK,UAAU,UAAU,MAAM,GAAG;CAGxC,MAAM,mBAAmB,cACjB,YACN,CAAC,WAAW,CACb;CAED,MAAM,UAAU,cACR,IAAI,mBAAmB,iBAAiB,EAC9C,CAAC,iBAAiB,CACnB;CAED,MAAM,CAAC,OAAO,YAAY,gBAAyC;EACjE,SAAS,QAAQ,WAAW,GAAG;EAC/B,QAAQ,QAAQ,mBAAmB;EACnC,UAAU,QAAQ,aAAa;EAChC,EAAE;CAEH,MAAM,gBAAgB,OAAO,EAAE;AAG/B,gBAAe;AACb,MAAI,CAAC,QAAS;AAEd,UAAQ,OAAO,GAAG;EAGlB,MAAM,MAAM,YAAY,KAAK;AAC7B,MAAI,MAAM,cAAc,WAAW,gBAAgB;AACjD,iBAAc,UAAU;AAExB,YAAS;IACP,SAAS,QAAQ,WAAW,GAAG;IAC/B,QAAQ,QAAQ,mBAAmB;IACnC,UAAU,QAAQ,aAAa;IAChC,CAAC;;GAEJ;AAGF,iBAAgB;AACd,eAAa;AACX,WAAQ,OAAO;;IAEhB,CAAC,QAAQ,CAAC;AAEb,QAAO"}

package/lib/utils/performanceOptimization.d.ts

@@ -0,0 +1,142 @@
+/**
+ * Performance Optimization Utilities
+ *
+ * Collection of utilities for optimizing React rendering performance:
+ * - Memoization helpers for expensive calculations
+ * - Shallow comparison utilities for React.memo
+ * - GPU acceleration style helpers
+ * - Performance measurement utilities
+ *
+ * @module utils/performanceOptimization
+ * @category Performance
+ * @korean 성능 최적화 유틸리티
+ */
+import React from 'react';
+/**
+ * Shallow comparison for props
+ * Used with React.memo for performance optimization
+ *
+ * @param prevProps - Previous props
+ * @param nextProps - Next props
+ * @returns true if props are equal (skip re-render), false otherwise
+ */
+export declare function shallowCompare<T extends Record<string, unknown>>(prevProps: T, nextProps: T): boolean;
+/**
+ * Create a memoized component with custom comparison
+ *
+ * @param component - Component to memoize
+ * @param compareKeys - Top-level prop keys to compare for equality
+ * @returns Memoized component
+ *
+ * @example
+ * ```tsx
+ * // If PlayerHUD receives props like { playerHealth, playerStamina }
+ * const MemoizedHUD = memoizeComponent(PlayerHUD, ['playerHealth', 'playerStamina']);
+ * ```
+ */
+export declare function memoizeComponent<P extends Record<string, unknown>>(component: React.FC<P>, compareKeys?: (keyof P)[]): React.NamedExoticComponent<P>;
+/**
+ * GPU acceleration styles
+ * Forces GPU layer creation for smooth animations
+ */
+export declare const GPU_ACCELERATION_STYLES: {
+    /**
+     * Force GPU layer with translateZ
+     */
+    readonly transform: "translateZ(0)";
+    /**
+     * Enable hardware acceleration
+     */
+    readonly backfaceVisibility: "hidden";
+    /**
+     * Hint browser about upcoming changes
+     */
+    readonly willChange: "transform, opacity";
+};
+/**
+ * Supported CSS properties for GPU-accelerated transitions
+ * 제한된 전환 대상 속성 (transform, opacity)
+ */
+export type GPUTransitionProperty = 'transform' | 'opacity';
+/**
+ * Create a valid GPU-accelerated CSS transition string
+ *
+ * Ensures correct syntax such as:
+ *   "transform 0.2s ease, opacity 0.2s ease"
+ * instead of invalid:
+ *   "transform, opacity 0.2s ease"
+ *
+ * @param properties - CSS properties to animate (default: ['transform', 'opacity'])
+ * @param duration - Transition duration (default: '0.2s')
+ * @param timingFunction - Timing function (default: 'ease')
+ * @returns Valid CSS transition shorthand string
+ */
+export declare function createGPUAcceleratedTransition(properties?: readonly GPUTransitionProperty[], duration?: string, timingFunction?: string): string;
+/**
+ * Apply GPU acceleration to CSS-in-JS style object
+ *
+ * @param styles - Base styles
+ * @returns Styles with GPU acceleration
+ */
+export declare function withGPUAcceleration<T extends React.CSSProperties>(styles: T): T & typeof GPU_ACCELERATION_STYLES;
+/**
+ * Performance-optimized animation styles
+ * Uses only transform and opacity for 60fps animations
+ *
+ * @param translateX - X translation in px
+ * @param translateY - Y translation in px
+ * @param opacity - Opacity (0-1)
+ * @param scale - Scale factor (default: 1)
+ * @returns Optimized style object
+ */
+export declare function optimizedAnimationStyle(translateX?: number, translateY?: number, opacity?: number, scale?: number): React.CSSProperties;
+/**
+ * Measure component render time
+ * Only runs in development mode
+ *
+ * @param componentName - Name of component being measured
+ * @param callback - Function to measure
+ * @returns Result of callback
+ */
+export declare function measureRender<T>(componentName: string, callback: () => T): T;
+/**
+ * Create a render counter for debugging
+ * Tracks how many times a component renders
+ *
+ * Note: This is intentionally commented out due to React compiler
+ * limitations with ref mutations during render. For production use,
+ * consider using React DevTools Profiler instead.
+ *
+ * @param componentName - Name of component
+ * @returns Render count (always returns 0)
+ */
+export declare function useRenderCount(componentName: string): number;
+/**
+ * Batch state updates to reduce re-renders
+ *
+ * @param updates - Array of state update functions
+ */
+export declare function batchUpdates(updates: (() => void)[]): void;
+/**
+ * Check if selected object properties have changed using shallow/reference equality
+ *
+ * This compares only the top-level values at the specified keys using strict
+ * equality (`===`). If a key refers to an object or array, only the reference
+ * is compared, not its contents. This is suitable for React.memo-style
+ * performance optimizations where prop references are kept stable.
+ *
+ * @param prev - Previous object
+ * @param next - Next object
+ * @param keys - Keys to check with shallow/reference equality
+ * @returns true if any specified key value changed by reference
+ */
+export declare function hasPropsChanged<T extends Record<string, unknown>>(prev: T, next: T, keys: (keyof T)[]): boolean;
+/**
+ * Create a stable callback reference that doesn't change between renders
+ * Similar to useCallback but with automatic dependency detection
+ *
+ * @param callback - Callback function
+ * @returns Stable callback reference
+ */
+export declare function useStableCallback<T extends (...args: never[]) => unknown>(callback: T): T;
+//# sourceMappingURL=performanceOptimization.d.ts.map

package/lib/utils/performanceOptimization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"performanceOptimization.d.ts","sourceRoot":"","sources":["../../src/utils/performanceOptimization.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC9D,SAAS,EAAE,CAAC,EACZ,SAAS,EAAE,CAAC,GACX,OAAO,CAeT;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChE,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,EACtB,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,GACxB,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAa/B;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB;IAClC;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;CAEK,CAAC;AAEX;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG,SAAS,CAAC;AAE5D;;;;;;;;;;;;GAYG;AACH,wBAAgB,8BAA8B,CAC5C,UAAU,GAAE,SAAS,qBAAqB,EAA6B,EACvE,QAAQ,GAAE,MAAe,EACzB,cAAc,GAAE,MAAe,GAC9B,MAAM,CAIR;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,CAAC,SAAS,KAAK,CAAC,aAAa,EAC/D,MAAM,EAAE,CAAC,GACR,CAAC,GAAG,OAAO,uBAAuB,CAKpC;AAED;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CACrC,UAAU,SAAI,EACd,UAAU,SAAI,EACd,OAAO,SAAI,EACX,KAAK,SAAI,GACR,KAAK,CAAC,aAAa,CAOrB;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAC7B,aAAa,EAAE,MAAM,EACrB,QAAQ,EAAE,MAAM,CAAC,GAChB,CAAC,CAiBH;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM,CAoB5D;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,EAAE,GAAG,IAAI,CAI1D;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/D,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,GAChB,OAAO,CAOT;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EACvE,QAAQ,EAAE,CAAC,GACV,CAAC,CAeH"}

package/lib/utils/performanceOptimization.js

@@ -0,0 +1,27 @@
+import "react";
+//#region src/utils/performanceOptimization.ts
+/**
+* GPU acceleration styles
+* Forces GPU layer creation for smooth animations
+*/
+var GPU_ACCELERATION_STYLES = {
+	transform: "translateZ(0)",
+	backfaceVisibility: "hidden",
+	willChange: "transform, opacity"
+};
+/**
+* Apply GPU acceleration to CSS-in-JS style object
+* 
+* @param styles - Base styles
+* @returns Styles with GPU acceleration
+*/
+function withGPUAcceleration(styles) {
+	return {
+		...styles,
+		...GPU_ACCELERATION_STYLES
+	};
+}
+//#endregion
+export { withGPUAcceleration };
+
+//# sourceMappingURL=performanceOptimization.js.map

package/lib/utils/performanceOptimization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"performanceOptimization.js","names":[],"sources":["../../src/utils/performanceOptimization.ts"],"sourcesContent":["/**\n * Performance Optimization Utilities\n * \n * Collection of utilities for optimizing React rendering performance:\n * - Memoization helpers for expensive calculations\n * - Shallow comparison utilities for React.memo\n * - GPU acceleration style helpers\n * - Performance measurement utilities\n * \n * @module utils/performanceOptimization\n * @category Performance\n * @korean 성능 최적화 유틸리티\n */\n\nimport React from 'react';\n\n/**\n * Shallow comparison for props\n * Used with React.memo for performance optimization\n * \n * @param prevProps - Previous props\n * @param nextProps - Next props\n * @returns true if props are equal (skip re-render), false otherwise\n */\nexport function shallowCompare<T extends Record<string, unknown>>(\n  prevProps: T,\n  nextProps: T\n): boolean {\n  const prevKeys = Object.keys(prevProps);\n  const nextKeys = Object.keys(nextProps);\n\n  if (prevKeys.length !== nextKeys.length) {\n    return false;\n  }\n\n  for (const key of prevKeys) {\n    if (prevProps[key] !== nextProps[key]) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\n/**\n * Create a memoized component with custom comparison\n * \n * @param component - Component to memoize\n * @param compareKeys - Top-level prop keys to compare for equality\n * @returns Memoized component\n * \n * @example\n * ```tsx\n * // If PlayerHUD receives props like { playerHealth, playerStamina }\n * const MemoizedHUD = memoizeComponent(PlayerHUD, ['playerHealth', 'playerStamina']);\n * ```\n */\nexport function memoizeComponent<P extends Record<string, unknown>>(\n  component: React.FC<P>,\n  compareKeys?: (keyof P)[]\n): React.NamedExoticComponent<P> {\n  if (!compareKeys || compareKeys.length === 0) {\n    return React.memo(component);\n  }\n\n  return React.memo(component, (prevProps, nextProps) => {\n    for (const key of compareKeys) {\n      if (prevProps[key] !== nextProps[key]) {\n        return false; // Props changed, re-render\n      }\n    }\n    return true; // Props same, skip re-render\n  });\n}\n\n/**\n * GPU acceleration styles\n * Forces GPU layer creation for smooth animations\n */\nexport const GPU_ACCELERATION_STYLES = {\n  /**\n   * Force GPU layer with translateZ\n   */\n  transform: 'translateZ(0)',\n  \n  /**\n   * Enable hardware acceleration\n   */\n  backfaceVisibility: 'hidden' as const,\n  \n  /**\n   * Hint browser about upcoming changes\n   */\n  willChange: 'transform, opacity' as const,\n} as const;\n\n/**\n * Supported CSS properties for GPU-accelerated transitions\n * 제한된 전환 대상 속성 (transform, opacity)\n */\nexport type GPUTransitionProperty = 'transform' | 'opacity';\n\n/**\n * Create a valid GPU-accelerated CSS transition string\n * \n * Ensures correct syntax such as:\n *   \"transform 0.2s ease, opacity 0.2s ease\"\n * instead of invalid:\n *   \"transform, opacity 0.2s ease\"\n * \n * @param properties - CSS properties to animate (default: ['transform', 'opacity'])\n * @param duration - Transition duration (default: '0.2s')\n * @param timingFunction - Timing function (default: 'ease')\n * @returns Valid CSS transition shorthand string\n */\nexport function createGPUAcceleratedTransition(\n  properties: readonly GPUTransitionProperty[] = ['transform', 'opacity'],\n  duration: string = '0.2s',\n  timingFunction: string = 'ease'\n): string {\n  return properties\n    .map((property) => `${property} ${duration} ${timingFunction}`)\n    .join(', ');\n}\n\n/**\n * Apply GPU acceleration to CSS-in-JS style object\n * \n * @param styles - Base styles\n * @returns Styles with GPU acceleration\n */\nexport function withGPUAcceleration<T extends React.CSSProperties>(\n  styles: T\n): T & typeof GPU_ACCELERATION_STYLES {\n  return {\n    ...styles,\n    ...GPU_ACCELERATION_STYLES,\n  };\n}\n\n/**\n * Performance-optimized animation styles\n * Uses only transform and opacity for 60fps animations\n * \n * @param translateX - X translation in px\n * @param translateY - Y translation in px\n * @param opacity - Opacity (0-1)\n * @param scale - Scale factor (default: 1)\n * @returns Optimized style object\n */\nexport function optimizedAnimationStyle(\n  translateX = 0,\n  translateY = 0,\n  opacity = 1,\n  scale = 1\n): React.CSSProperties {\n  return {\n    transform: `translate3d(${translateX}px, ${translateY}px, 0) scale(${scale})`,\n    opacity,\n    willChange: 'transform, opacity',\n    backfaceVisibility: 'hidden',\n  };\n}\n\n/**\n * Measure component render time\n * Only runs in development mode\n * \n * @param componentName - Name of component being measured\n * @param callback - Function to measure\n * @returns Result of callback\n */\nexport function measureRender<T>(\n  componentName: string,\n  callback: () => T\n): T {\n  if (import.meta.env.DEV) {\n    const start = performance.now();\n    const result = callback();\n    const end = performance.now();\n    const duration = end - start;\n    \n    if (duration > 16.67) { // Slower than 60fps frame budget\n      console.warn(\n        `[Performance] ${componentName} render took ${duration.toFixed(2)}ms (>16.67ms budget)`\n      );\n    }\n    \n    return result;\n  }\n  \n  return callback();\n}\n\n/**\n * Create a render counter for debugging\n * Tracks how many times a component renders\n * \n * Note: This is intentionally commented out due to React compiler\n * limitations with ref mutations during render. For production use,\n * consider using React DevTools Profiler instead.\n * \n * @param componentName - Name of component\n * @returns Render count (always returns 0)\n */\nexport function useRenderCount(componentName: string): number {\n  // Disabled due to ESLint react-compiler rules\n  // See: https://react.dev/reference/react/useRef#caveats\n  if (import.meta.env.DEV) {\n    console.log(`[Render] ${componentName} is rendering (counter disabled)`);\n  }\n  return 0;\n  \n  /* Original implementation disabled due to lint errors\n  const renderCountRef = React.useRef(0);\n  renderCountRef.current += 1;\n  \n  React.useEffect(() => {\n    if (import.meta.env.DEV) {\n      console.log(`[Render] ${componentName} rendered ${renderCountRef.current} times`);\n    }\n  }, [componentName]);\n  \n  return renderCountRef.current;\n  */\n}\n\n/**\n * Batch state updates to reduce re-renders\n * \n * @param updates - Array of state update functions\n */\nexport function batchUpdates(updates: (() => void)[]): void {\n  React.startTransition(() => {\n    updates.forEach(update => update());\n  });\n}\n\n/**\n * Check if selected object properties have changed using shallow/reference equality\n *\n * This compares only the top-level values at the specified keys using strict\n * equality (`===`). If a key refers to an object or array, only the reference\n * is compared, not its contents. This is suitable for React.memo-style\n * performance optimizations where prop references are kept stable.\n * \n * @param prev - Previous object\n * @param next - Next object\n * @param keys - Keys to check with shallow/reference equality\n * @returns true if any specified key value changed by reference\n */\nexport function hasPropsChanged<T extends Record<string, unknown>>(\n  prev: T,\n  next: T,\n  keys: (keyof T)[]\n): boolean {\n  for (const key of keys) {\n    if (prev[key] !== next[key]) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Create a stable callback reference that doesn't change between renders\n * Similar to useCallback but with automatic dependency detection\n * \n * @param callback - Callback function\n * @returns Stable callback reference\n */\nexport function useStableCallback<T extends (...args: never[]) => unknown>(\n  callback: T\n): T {\n  const callbackRef = React.useRef(callback);\n  \n  // Update ref on each render\n  React.useLayoutEffect(() => {\n    callbackRef.current = callback;\n  });\n  \n  // Return stable function that calls latest callback\n  const stableCallback = React.useCallback(\n    (...args: Parameters<T>) => callbackRef.current(...args),\n    []\n  ) as T;\n  \n  return stableCallback;\n}\n"],"mappings":";;;;;;AA+EA,IAAa,0BAA0B;CAIrC,WAAW;CAKX,oBAAoB;CAKpB,YAAY;CACb;;;;;;;AAqCD,SAAgB,oBACd,QACoC;AACpC,QAAO;EACL,GAAG;EACH,GAAG;EACJ"}