blacktrigram 0.7.2

package/lib/hooks/usePlayerAnimation.js

@@ -0,0 +1,145 @@
+import { DEFAULT_ANIMATION_CONFIGS, PlayerAnimationStateMachine } from "../systems/animation/core/AnimationStateMachine.js";
+import "../systems/animation/index.js";
+import { useCallback, useMemo, useRef, useState } from "react";
+//#region src/hooks/usePlayerAnimation.ts
+/**
+* usePlayerAnimation - React hook for player animation state
+*
+* Provides a React interface to the PlayerAnimationStateMachine
+* with automatic cleanup and event handling.
+*
+* @module hooks/usePlayerAnimation
+* @category Hooks
+* @korean 플레이어애니메이션훅
+*/
+/**
+* React hook for player animation state management
+*
+* Provides frame-accurate animation control with priority system
+* and event callbacks. Integrates seamlessly with useFrame for
+* 60fps updates.
+*
+* @param options - Animation options
+* @returns Animation control interface
+*
+* @example
+* ```typescript
+* // Basic usage
+* const { currentState, currentFrame, update, transitionTo } = usePlayerAnimation({
+*   events: {
+*     onAnimationStart: (state) => console.log(`Started ${state}`),
+*     onAnimationComplete: (state) => console.log(`Completed ${state}`),
+*     onFrame: (frame, state) => {
+*       if (state === "attack" && frame === 6) {
+*         // Execute attack at midpoint
+*         executeAttack();
+*       }
+*     }
+*   }
+* });
+*
+* // In useFrame callback
+* useFrame((state, delta) => {
+*   const result = update(delta);
+*   // Update visuals based on result.state and result.frame
+* });
+*
+* // Trigger animations
+* const handleAttackInput = () => {
+*   transitionTo("attack");
+* };
+*
+* const handleMovement = (isMoving: boolean) => {
+*   transitionTo(isMoving ? "walk" : "idle");
+* };
+* ```
+*
+* @korean 플레이어애니메이션훅
+*/
+function usePlayerAnimation(options = {}) {
+	const { customConfigs, events, initialState = "idle" } = options;
+	const [, forceUpdate] = useState(0);
+	const configs = useMemo(() => customConfigs ?? DEFAULT_ANIMATION_CONFIGS, [customConfigs]);
+	const stateMachine = useMemo(() => {
+		const machine = new PlayerAnimationStateMachine(configs, events);
+		if (initialState !== "idle") machine.transitionTo(initialState);
+		return machine;
+	}, []);
+	const prevStateRef = useRef(stateMachine.getCurrentState());
+	const prevFrameRef = useRef(stateMachine.getCurrentFrame());
+	const update = useCallback((deltaTime) => {
+		const result = stateMachine.update(deltaTime);
+		const currentState = stateMachine.getCurrentState();
+		const currentFrame = stateMachine.getCurrentFrame();
+		if (currentState !== prevStateRef.current || currentFrame !== prevFrameRef.current) {
+			prevStateRef.current = currentState;
+			prevFrameRef.current = currentFrame;
+			forceUpdate((n) => n + 1);
+		}
+		return result;
+	}, [stateMachine]);
+	const transitionTo = useCallback((newState) => {
+		const success = stateMachine.transitionTo(newState);
+		if (success) {
+			prevStateRef.current = stateMachine.getCurrentState();
+			prevFrameRef.current = stateMachine.getCurrentFrame();
+			forceUpdate((n) => n + 1);
+		}
+		return success;
+	}, [stateMachine]);
+	const reset = useCallback(() => {
+		stateMachine.reset();
+		prevStateRef.current = stateMachine.getCurrentState();
+		prevFrameRef.current = stateMachine.getCurrentFrame();
+		forceUpdate((n) => n + 1);
+	}, [stateMachine]);
+	const transitionToStanceGuard = useCallback((stance) => {
+		const success = stateMachine.transitionToStanceGuard(stance);
+		if (success) {
+			prevStateRef.current = stateMachine.getCurrentState();
+			prevFrameRef.current = stateMachine.getCurrentFrame();
+			forceUpdate((n) => n + 1);
+		}
+		return success;
+	}, [stateMachine]);
+	const transitionToAttack = useCallback((durationSeconds) => {
+		const success = stateMachine.transitionToAttack(durationSeconds);
+		if (success) {
+			prevStateRef.current = stateMachine.getCurrentState();
+			prevFrameRef.current = stateMachine.getCurrentFrame();
+			forceUpdate((n) => n + 1);
+		}
+		return success;
+	}, [stateMachine]);
+	const transitionToStanceChange = useCallback((fromStance, toStance) => {
+		const success = stateMachine.transitionToStanceChange(fromStance, toStance);
+		if (success) {
+			prevStateRef.current = stateMachine.getCurrentState();
+			prevFrameRef.current = stateMachine.getCurrentFrame();
+			forceUpdate((n) => n + 1);
+		}
+		return success;
+	}, [stateMachine]);
+	const isInStanceGuard = useCallback(() => {
+		return stateMachine.isInStanceGuard();
+	}, [stateMachine]);
+	const getCurrentGuardStance = useCallback(() => {
+		return stateMachine.getCurrentGuardStance();
+	}, [stateMachine]);
+	return {
+		currentState: prevStateRef.current,
+		currentFrame: prevFrameRef.current,
+		update,
+		transitionTo,
+		transitionToAttack,
+		transitionToStanceGuard,
+		transitionToStanceChange,
+		isInStanceGuard,
+		getCurrentGuardStance,
+		reset
+	};
+}
+//#endregion
+export { usePlayerAnimation };
+
+//# sourceMappingURL=usePlayerAnimation.js.map

package/lib/hooks/usePlayerAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePlayerAnimation.js","names":[],"sources":["../../src/hooks/usePlayerAnimation.ts"],"sourcesContent":["/**\n * usePlayerAnimation - React hook for player animation state\n *\n * Provides a React interface to the PlayerAnimationStateMachine\n * with automatic cleanup and event handling.\n *\n * @module hooks/usePlayerAnimation\n * @category Hooks\n * @korean 플레이어애니메이션훅\n */\n\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport {\n  AnimationEvents,\n  AnimationState,\n  DEFAULT_ANIMATION_CONFIGS,\n  PlayerAnimationStateMachine,\n} from \"../systems/animation\";\nimport type {\n  AnimationConfig,\n  AnimationUpdateResult,\n} from \"../systems/animation/core/types\";\nimport type { TrigramStance } from \"../types/common\";\n\n/**\n * Options for usePlayerAnimation hook\n *\n * @korean 플레이어애니메이션훅옵션\n */\nexport interface UsePlayerAnimationOptions {\n  /**\n   * Custom animation configurations\n   * If not provided, uses DEFAULT_ANIMATION_CONFIGS\n   *\n   * @korean 커스텀애니메이션설정\n   */\n  readonly customConfigs?: Map<AnimationState, AnimationConfig>;\n\n  /**\n   * Animation event callbacks\n   *\n   * **IMPORTANT**: The events object should be stable (memoized) to prevent\n   * unnecessary re-initialization of the animation system. Changes to event\n   * callbacks after the hook is initialized will NOT be reflected in the\n   * animation system. Use `useMemo` or define events outside the component\n   * to ensure stability.\n   *\n   * @korean 이벤트콜백\n   */\n  readonly events?: AnimationEvents;\n\n  /**\n   * Initial animation state (defaults to \"idle\")\n   *\n   * @korean 초기상태\n   */\n  readonly initialState?: AnimationState;\n}\n\n/**\n * Return type for usePlayerAnimation hook\n *\n * @korean 플레이어애니메이션훅반환타입\n */\nexport interface UsePlayerAnimationReturn {\n  /**\n   * Current animation state\n   *\n   * @korean 현재상태\n   */\n  readonly currentState: AnimationState;\n\n  /**\n   * Current frame index\n   *\n   * @korean 현재프레임\n   */\n  readonly currentFrame: number;\n\n  /**\n   * Update animation state (call in useFrame)\n   *\n   * @param deltaTime - Time elapsed since last update in seconds\n   * @returns Animation update result\n   *\n   * @korean 업데이트\n   */\n  readonly update: (deltaTime: number) => AnimationUpdateResult;\n\n  /**\n   * Transition to a new animation state\n   *\n   * @param newState - Target animation state\n   * @returns Whether transition was successful\n   *\n   * @korean 상태전환\n   */\n  readonly transitionTo: (newState: AnimationState) => boolean;\n\n  /**\n   * Transition to ATTACK state with technique-specific duration.\n   *\n   * The default ATTACK config is 200ms (12 frames), but real techniques\n   * range from 350ms to 1200ms. This method overrides the duration so\n   * the state machine stays in ATTACK for the full technique animation.\n   *\n   * @param durationSeconds - The skeletal animation duration in seconds\n   * @returns Whether transition was successful\n   *\n   * @korean 공격전환 (기술별 지속시간)\n   */\n  readonly transitionToAttack: (durationSeconds: number) => boolean;\n\n  /**\n   * Transition to stance-specific guard animation\n   *\n   * @param stance - Trigram stance\n   * @returns Whether transition was successful\n   *\n   * @korean 자세가드전환\n   */\n  readonly transitionToStanceGuard: (stance: TrigramStance) => boolean;\n\n  /**\n   * Transition to stance_change animation with specific transition data\n   *\n   * **Korean**: 자세 전환 애니메이션 시작\n   *\n   * Initiates a stance change animation with the specific transition data\n   * from the 64-transition matrix. This provides stance-specific keyframes\n   * and blend weights for smooth interpolation.\n   *\n   * @param fromStance - Source trigram stance\n   * @param toStance - Target trigram stance\n   * @returns Whether transition was successful\n   *\n   * @korean 자세전환애니메이션시작\n   */\n  readonly transitionToStanceChange: (\n    fromStance: TrigramStance,\n    toStance: TrigramStance,\n  ) => boolean;\n\n  /**\n   * Check if currently in a stance guard animation\n   *\n   * @returns True if in any stance guard state\n   *\n   * @korean 자세가드확인\n   */\n  readonly isInStanceGuard: () => boolean;\n\n  /**\n   * Get current guard stance (if in guard animation)\n   *\n   * @returns Trigram stance or null\n   *\n   * @korean 현재가드자세\n   */\n  readonly getCurrentGuardStance: () => TrigramStance | null;\n\n  /**\n   * Reset animation to idle state\n   *\n   * @korean 초기화\n   */\n  readonly reset: () => void;\n}\n\n/**\n * React hook for player animation state management\n *\n * Provides frame-accurate animation control with priority system\n * and event callbacks. Integrates seamlessly with useFrame for\n * 60fps updates.\n *\n * @param options - Animation options\n * @returns Animation control interface\n *\n * @example\n * ```typescript\n * // Basic usage\n * const { currentState, currentFrame, update, transitionTo } = usePlayerAnimation({\n *   events: {\n *     onAnimationStart: (state) => console.log(`Started ${state}`),\n *     onAnimationComplete: (state) => console.log(`Completed ${state}`),\n *     onFrame: (frame, state) => {\n *       if (state === \"attack\" && frame === 6) {\n *         // Execute attack at midpoint\n *         executeAttack();\n *       }\n *     }\n *   }\n * });\n *\n * // In useFrame callback\n * useFrame((state, delta) => {\n *   const result = update(delta);\n *   // Update visuals based on result.state and result.frame\n * });\n *\n * // Trigger animations\n * const handleAttackInput = () => {\n *   transitionTo(\"attack\");\n * };\n *\n * const handleMovement = (isMoving: boolean) => {\n *   transitionTo(isMoving ? \"walk\" : \"idle\");\n * };\n * ```\n *\n * @korean 플레이어애니메이션훅\n */\nexport function usePlayerAnimation(\n  options: UsePlayerAnimationOptions = {},\n): UsePlayerAnimationReturn {\n  const { customConfigs, events, initialState = \"idle\" } = options;\n\n  // Force re-renders when state changes\n  const [, forceUpdate] = useState(0);\n\n  // Create animation configs (memoized)\n  const configs = useMemo(\n    () => customConfigs ?? DEFAULT_ANIMATION_CONFIGS,\n    [customConfigs],\n  );\n\n  // Create animation state machine (persistent across renders via useMemo)\n  const stateMachine = useMemo(() => {\n    const machine = new PlayerAnimationStateMachine(configs, events);\n    // Set initial state if not \"idle\"\n    if (initialState !== \"idle\") {\n      machine.transitionTo(initialState);\n    }\n    return machine;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []); // Empty deps - only create once\n\n  // Track previous state to only update on actual changes\n  const prevStateRef = useRef<AnimationState>(stateMachine.getCurrentState());\n  const prevFrameRef = useRef<number>(stateMachine.getCurrentFrame());\n\n  // Memoized callbacks with selective state updates\n  const update = useCallback(\n    (deltaTime: number) => {\n      const result = stateMachine.update(deltaTime);\n      const currentState = stateMachine.getCurrentState();\n      const currentFrame = stateMachine.getCurrentFrame();\n\n      // Only trigger re-render if state or frame changed\n      if (\n        currentState !== prevStateRef.current ||\n        currentFrame !== prevFrameRef.current\n      ) {\n        prevStateRef.current = currentState;\n        prevFrameRef.current = currentFrame;\n        forceUpdate((n) => n + 1);\n      }\n\n      return result;\n    },\n    [stateMachine],\n  );\n\n  const transitionTo = useCallback(\n    (newState: AnimationState) => {\n      const success = stateMachine.transitionTo(newState);\n      if (success) {\n        prevStateRef.current = stateMachine.getCurrentState();\n        prevFrameRef.current = stateMachine.getCurrentFrame();\n        forceUpdate((n) => n + 1);\n      }\n      return success;\n    },\n    [stateMachine],\n  );\n\n  const reset = useCallback(() => {\n    stateMachine.reset();\n    prevStateRef.current = stateMachine.getCurrentState();\n    prevFrameRef.current = stateMachine.getCurrentFrame();\n    forceUpdate((n) => n + 1);\n  }, [stateMachine]);\n\n  const transitionToStanceGuard = useCallback(\n    (stance: TrigramStance) => {\n      const success = stateMachine.transitionToStanceGuard(stance);\n      if (success) {\n        prevStateRef.current = stateMachine.getCurrentState();\n        prevFrameRef.current = stateMachine.getCurrentFrame();\n        forceUpdate((n) => n + 1);\n      }\n      return success;\n    },\n    [stateMachine],\n  );\n\n  const transitionToAttack = useCallback(\n    (durationSeconds: number) => {\n      const success = stateMachine.transitionToAttack(durationSeconds);\n      if (success) {\n        prevStateRef.current = stateMachine.getCurrentState();\n        prevFrameRef.current = stateMachine.getCurrentFrame();\n        forceUpdate((n) => n + 1);\n      }\n      return success;\n    },\n    [stateMachine],\n  );\n\n  const transitionToStanceChange = useCallback(\n    (fromStance: TrigramStance, toStance: TrigramStance) => {\n      const success = stateMachine.transitionToStanceChange(\n        fromStance,\n        toStance,\n      );\n      if (success) {\n        prevStateRef.current = stateMachine.getCurrentState();\n        prevFrameRef.current = stateMachine.getCurrentFrame();\n        forceUpdate((n) => n + 1);\n      }\n      return success;\n    },\n    [stateMachine],\n  );\n\n  const isInStanceGuard = useCallback(() => {\n    return stateMachine.isInStanceGuard();\n  }, [stateMachine]);\n\n  const getCurrentGuardStance = useCallback(() => {\n    return stateMachine.getCurrentGuardStance();\n  }, [stateMachine]);\n\n  // Memoize the return value to ensure stable reference unless state/frame changes\n  // Note: Using ref.current as dependencies is intentional here - when state changes,\n  // forceUpdate triggers a re-render, and the refs have new values which cause\n  // the useMemo to recalculate\n  // Return a fresh object each render to ensure currentState/currentFrame are always up-to-date\n  // Mutable ref values don't trigger re-renders, so we can't rely on memoization here\n  return {\n    currentState: prevStateRef.current,\n    currentFrame: prevFrameRef.current,\n    update,\n    transitionTo,\n    transitionToAttack,\n    transitionToStanceGuard,\n    transitionToStanceChange,\n    isInStanceGuard,\n    getCurrentGuardStance,\n    reset,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqNA,SAAgB,mBACd,UAAqC,EAAE,EACb;CAC1B,MAAM,EAAE,eAAe,QAAQ,eAAe,WAAW;CAGzD,MAAM,GAAG,eAAe,SAAS,EAAE;CAGnC,MAAM,UAAU,cACR,iBAAiB,2BACvB,CAAC,cAAc,CAChB;CAGD,MAAM,eAAe,cAAc;EACjC,MAAM,UAAU,IAAI,4BAA4B,SAAS,OAAO;AAEhE,MAAI,iBAAiB,OACnB,SAAQ,aAAa,aAAa;AAEpC,SAAO;IAEN,EAAE,CAAC;CAGN,MAAM,eAAe,OAAuB,aAAa,iBAAiB,CAAC;CAC3E,MAAM,eAAe,OAAe,aAAa,iBAAiB,CAAC;CAGnE,MAAM,SAAS,aACZ,cAAsB;EACrB,MAAM,SAAS,aAAa,OAAO,UAAU;EAC7C,MAAM,eAAe,aAAa,iBAAiB;EACnD,MAAM,eAAe,aAAa,iBAAiB;AAGnD,MACE,iBAAiB,aAAa,WAC9B,iBAAiB,aAAa,SAC9B;AACA,gBAAa,UAAU;AACvB,gBAAa,UAAU;AACvB,gBAAa,MAAM,IAAI,EAAE;;AAG3B,SAAO;IAET,CAAC,aAAa,CACf;CAED,MAAM,eAAe,aAClB,aAA6B;EAC5B,MAAM,UAAU,aAAa,aAAa,SAAS;AACnD,MAAI,SAAS;AACX,gBAAa,UAAU,aAAa,iBAAiB;AACrD,gBAAa,UAAU,aAAa,iBAAiB;AACrD,gBAAa,MAAM,IAAI,EAAE;;AAE3B,SAAO;IAET,CAAC,aAAa,CACf;CAED,MAAM,QAAQ,kBAAkB;AAC9B,eAAa,OAAO;AACpB,eAAa,UAAU,aAAa,iBAAiB;AACrD,eAAa,UAAU,aAAa,iBAAiB;AACrD,eAAa,MAAM,IAAI,EAAE;IACxB,CAAC,aAAa,CAAC;CAElB,MAAM,0BAA0B,aAC7B,WAA0B;EACzB,MAAM,UAAU,aAAa,wBAAwB,OAAO;AAC5D,MAAI,SAAS;AACX,gBAAa,UAAU,aAAa,iBAAiB;AACrD,gBAAa,UAAU,aAAa,iBAAiB;AACrD,gBAAa,MAAM,IAAI,EAAE;;AAE3B,SAAO;IAET,CAAC,aAAa,CACf;CAED,MAAM,qBAAqB,aACxB,oBAA4B;EAC3B,MAAM,UAAU,aAAa,mBAAmB,gBAAgB;AAChE,MAAI,SAAS;AACX,gBAAa,UAAU,aAAa,iBAAiB;AACrD,gBAAa,UAAU,aAAa,iBAAiB;AACrD,gBAAa,MAAM,IAAI,EAAE;;AAE3B,SAAO;IAET,CAAC,aAAa,CACf;CAED,MAAM,2BAA2B,aAC9B,YAA2B,aAA4B;EACtD,MAAM,UAAU,aAAa,yBAC3B,YACA,SACD;AACD,MAAI,SAAS;AACX,gBAAa,UAAU,aAAa,iBAAiB;AACrD,gBAAa,UAAU,aAAa,iBAAiB;AACrD,gBAAa,MAAM,IAAI,EAAE;;AAE3B,SAAO;IAET,CAAC,aAAa,CACf;CAED,MAAM,kBAAkB,kBAAkB;AACxC,SAAO,aAAa,iBAAiB;IACpC,CAAC,aAAa,CAAC;CAElB,MAAM,wBAAwB,kBAAkB;AAC9C,SAAO,aAAa,uBAAuB;IAC1C,CAAC,aAAa,CAAC;AAQlB,QAAO;EACL,cAAc,aAAa;EAC3B,cAAc,aAAa;EAC3B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}

package/lib/hooks/useResponsiveLayout.d.ts

@@ -0,0 +1,184 @@
+/**
+ * useResponsiveLayout Hook - Enhanced Responsive Layout System
+ *
+ * Provides comprehensive responsive layout values for all screen sizes with:
+ * - Five screen size categories (mobile, tablet, desktop, large, xlarge)
+ * - Proportional font scaling (0.8x-1.4x) with 14-24px readability constraints
+ * - Proportional spacing scaling (0.5x-1.5x)
+ * - Smooth transitions for resize operations (300ms ease-in-out)
+ * - Touch-friendly element sizing following iOS Human Interface Guidelines
+ * - Safe area insets for notch and home indicator
+ *
+ * Uses robust device detection combining user-agent and screen size to ensure
+ * mobile controls are shown on all mobile devices, including high-resolution phones.
+ *
+ * Features:
+ * - Touch target minimum: 44x44px (iOS guideline)
+ * - Safe area insets for notch and home indicator
+ * - Responsive font sizes (14px minimum body text)
+ * - Optimized spacing for mobile vs desktop
+ * - Portrait and landscape mode support
+ * - Tablet breakpoint support (768-1024px)
+ *
+ * @module hooks/useResponsiveLayout
+ * @category Mobile UI
+ * @korean 반응형레이아웃훅
+ */
+import type { ScreenSize } from '../systems/ResponsiveScaling';
+/**
+ * Breakpoints for responsive design
+ * @deprecated Use RESPONSIVE_BREAKPOINTS from ResponsiveScaling instead
+ */
+export declare const BREAKPOINTS: {
+    /** Extra small mobile devices (iPhone SE) */
+    readonly MOBILE_SMALL: 375;
+    /** Standard mobile devices */
+    readonly MOBILE: number;
+    /** Tablet devices */
+    readonly TABLET: number;
+    /** Desktop devices */
+    readonly DESKTOP: number;
+};
+/**
+ * Touch target sizes following iOS Human Interface Guidelines
+ */
+export interface TouchTargets {
+    /** Minimum touch target (44x44px iOS guideline) */
+    readonly small: number;
+    /** Medium touch target for primary actions */
+    readonly medium: number;
+    /** Large touch target for critical actions */
+    readonly large: number;
+}
+/**
+ * Safe area insets for mobile devices
+ * Accounts for notch, status bar, and home indicator
+ */
+export interface SafeAreaInsets {
+    /** Top inset (status bar, notch) */
+    readonly top: number;
+    /** Bottom inset (home indicator) */
+    readonly bottom: number;
+    /** Left inset (landscape mode) */
+    readonly left: number;
+    /** Right inset (landscape mode) */
+    readonly right: number;
+}
+/**
+ * Responsive font sizes
+ */
+export interface FontSizes {
+    /** Small text (12-14px) */
+    readonly small: number;
+    /** Body text (14-16px minimum for mobile) */
+    readonly body: number;
+    /** Title text (18-24px) */
+    readonly title: number;
+    /** Hero text (24-36px) */
+    readonly hero: number;
+    /** HUD text (16-20px for important combat info) */
+    readonly hud: number;
+}
+/**
+ * Responsive spacing scale
+ */
+export interface Spacing {
+    /** Extra small (4-8px) */
+    readonly xs: number;
+    /** Small (8-12px) */
+    readonly sm: number;
+    /** Medium (12-16px) */
+    readonly md: number;
+    /** Large (16-24px) */
+    readonly lg: number;
+    /** Extra large (24-32px) */
+    readonly xl: number;
+}
+/**
+ * Complete responsive layout configuration
+ */
+export interface ResponsiveLayout {
+    /** Whether current viewport is mobile-sized */
+    readonly isMobile: boolean;
+    /** Whether current viewport is small mobile (< 400px) */
+    readonly isSmallMobile: boolean;
+    /** Whether current viewport is tablet-sized */
+    readonly isTablet: boolean;
+    /** Whether current viewport is desktop or larger */
+    readonly isDesktop: boolean;
+    /** Whether in landscape orientation */
+    readonly isLandscape: boolean;
+    /** Current screen size category (mobile, tablet, desktop, large, xlarge) */
+    readonly screenSize: ScreenSize;
+    /** Safe area insets for mobile devices */
+    readonly safeArea: SafeAreaInsets;
+    /** Touch target sizes */
+    readonly touchTarget: TouchTargets;
+    /** Font sizes */
+    readonly fontSize: FontSizes;
+    /** Spacing scale */
+    readonly spacing: Spacing;
+    /** CSS transition string for smooth resizing */
+    readonly transition: string;
+    /** Current viewport dimensions */
+    readonly viewport: {
+        readonly width: number;
+        readonly height: number;
+    };
+}
+/**
+ * Calculate responsive layout values based on viewport dimensions
+ *
+ * Enhanced with centralized responsive scaling system:
+ * - Five screen size categories (mobile, tablet, desktop, large, xlarge)
+ * - Proportional font scaling (0.8x-1.4x) with 14-24px constraints
+ * - Proportional spacing scaling (0.5x-1.5x)
+ * - Smooth CSS transitions for resize operations
+ *
+ * Optimized for:
+ * - iPhone SE (375x667) - mobile
+ * - iPhone 11/12/13 (414x896) - mobile
+ * - iPhone 14 Pro Max (430x932) - mobile
+ * - iPad (768x1024) - tablet
+ * - iPad Pro (1024x1366) - desktop
+ * - Standard Desktop (1280x800) - desktop
+ * - HD Display (1920x1080) - xlarge
+ * - 4K Display (2560x1440) - xlarge
+ *
+ * @param width - Viewport width in pixels
+ * @param height - Viewport height in pixels
+ * @returns Complete responsive layout configuration
+ *
+ * @example
+ * ```tsx
+ * const layout = useResponsiveLayout(375, 667);
+ *
+ * <div style={{
+ *   padding: layout.spacing.md,
+ *   fontSize: layout.fontSize.body,
+ *   minHeight: layout.touchTarget.small,
+ *   transition: layout.transition,
+ * }}>
+ *   Responsive content
+ * </div>
+ * ```
+ *
+ * @public
+ * @korean 반응형레이아웃사용
+ */
+export declare function useResponsiveLayout(width: number, height: number): ResponsiveLayout;
+/**
+ * Calculate available content area after safe areas and HUD
+ *
+ * @param layout - Responsive layout configuration
+ * @param hudHeight - Height reserved for HUD elements
+ * @param controlsHeight - Height reserved for control elements
+ * @returns Available content dimensions
+ */
+export declare function useContentArea(layout: ResponsiveLayout, hudHeight?: number, controlsHeight?: number): {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+//# sourceMappingURL=useResponsiveLayout.d.ts.map

package/lib/hooks/useResponsiveLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveLayout.d.ts","sourceRoot":"","sources":["../../src/hooks/useResponsiveLayout.ts"],"names":[],"mappings":"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"}

package/lib/hooks/useRoundTransition.d.ts

@@ -0,0 +1,87 @@
+/**
+ * useRoundTransition Hook - Manages round transition state and timing
+ *
+ * Korean: 라운드 전환 훅 (Round Transition Hook)
+ *
+ * Handles the state machine for round transitions:
+ * - idle: Normal combat state
+ * - announcing: Showing round announcement
+ * - countdown: Counting down to next round
+ * - transitioning: Brief transition to next round
+ *
+ * @module hooks/useRoundTransition
+ * @category Combat Hooks
+ */
+import { PlayerState } from "../systems";
+/**
+ * Round transition states
+ *
+ * Korean: 라운드 전환 상태
+ */
+export type RoundTransitionState = "idle" | "announcing" | "countdown" | "transitioning";
+/**
+ * Round transition configuration
+ */
+export interface RoundTransitionConfig {
+    /** Duration of announcement display in seconds */
+    readonly announcementDuration?: number;
+    /** Duration of countdown in seconds */
+    readonly countdownDuration?: number;
+    /** Duration of transition phase in milliseconds */
+    readonly transitionDuration?: number;
+}
+/**
+ * Round transition hook state
+ */
+export interface UseRoundTransitionResult {
+    /** Current transition state */
+    readonly transitionState: RoundTransitionState;
+    /** Whether announcement should be visible */
+    readonly showAnnouncement: boolean;
+    /** Start round transition sequence */
+    readonly startTransition: (winner: PlayerState | null, roundNumber: number) => void;
+    /** Skip countdown and proceed immediately */
+    readonly skipCountdown: () => void;
+    /** Reset transition state to idle */
+    readonly resetTransition: () => void;
+    /** Round winner for current transition */
+    readonly roundWinner: PlayerState | null;
+    /** Round number for current transition */
+    readonly currentRoundNumber: number;
+}
+/**
+ * useRoundTransition Hook
+ *
+ * Manages the complete round transition flow:
+ * 1. Idle state during normal combat
+ * 2. Announcing state shows round results
+ * 3. Countdown state counts down to next round
+ * 4. Transitioning state briefly transitions to next round
+ * 5. Returns to idle for next round
+ *
+ * @param config - Configuration for transition timings
+ * @param onTransitionComplete - Callback when transition completes
+ * @returns Round transition state and control functions
+ *
+ * @example
+ * ```typescript
+ * const {
+ *   transitionState,
+ *   showAnnouncement,
+ *   startTransition,
+ *   skipCountdown,
+ * } = useRoundTransition(
+ *   { countdownDuration: 3 },
+ *   () => {
+ *     // Start next round
+ *     initializeNextRound();
+ *   }
+ * );
+ *
+ * // When round ends
+ * startTransition(winner, roundNumber);
+ * ```
+ */
+export declare function useRoundTransition(config?: RoundTransitionConfig, onTransitionComplete?: () => void): UseRoundTransitionResult;
+export default useRoundTransition;
+//# sourceMappingURL=useRoundTransition.d.ts.map

package/lib/hooks/useRoundTransition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRoundTransition.d.ts","sourceRoot":"","sources":["../../src/hooks/useRoundTransition.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,GAC5B,MAAM,GACN,YAAY,GACZ,WAAW,GACX,eAAe,CAAC;AAEpB;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,kDAAkD;IAClD,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IACvC,uCAAuC;IACvC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACpC,mDAAmD;IACnD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CACtC;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,+BAA+B;IAC/B,QAAQ,CAAC,eAAe,EAAE,oBAAoB,CAAC;IAC/C,6CAA6C;IAC7C,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAC;IACnC,sCAAsC;IACtC,QAAQ,CAAC,eAAe,EAAE,CACxB,MAAM,EAAE,WAAW,GAAG,IAAI,EAC1B,WAAW,EAAE,MAAM,KAChB,IAAI,CAAC;IACV,6CAA6C;IAC7C,QAAQ,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC;IACnC,qCAAqC;IACrC,QAAQ,CAAC,eAAe,EAAE,MAAM,IAAI,CAAC;IACrC,0CAA0C;IAC1C,QAAQ,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IACzC,0CAA0C;IAC1C,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC;CACrC;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,GAAE,qBAA0B,EAClC,oBAAoB,CAAC,EAAE,MAAM,IAAI,GAChC,wBAAwB,CAsH1B;AAED,eAAe,kBAAkB,CAAC"}

package/lib/hooks/useRoundTransition.js

@@ -0,0 +1,158 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+//#region src/hooks/useRoundTransition.ts
+/**
+* useRoundTransition Hook - Manages round transition state and timing
+*
+* Korean: 라운드 전환 훅 (Round Transition Hook)
+*
+* Handles the state machine for round transitions:
+* - idle: Normal combat state
+* - announcing: Showing round announcement
+* - countdown: Counting down to next round
+* - transitioning: Brief transition to next round
+*
+* @module hooks/useRoundTransition
+* @category Combat Hooks
+*/
+/**
+* Default configuration values
+*/
+var DEFAULT_CONFIG = {
+	announcementDuration: 2,
+	countdownDuration: 3,
+	transitionDuration: 500
+};
+/**
+* useRoundTransition Hook
+*
+* Manages the complete round transition flow:
+* 1. Idle state during normal combat
+* 2. Announcing state shows round results
+* 3. Countdown state counts down to next round
+* 4. Transitioning state briefly transitions to next round
+* 5. Returns to idle for next round
+*
+* @param config - Configuration for transition timings
+* @param onTransitionComplete - Callback when transition completes
+* @returns Round transition state and control functions
+*
+* @example
+* ```typescript
+* const {
+*   transitionState,
+*   showAnnouncement,
+*   startTransition,
+*   skipCountdown,
+* } = useRoundTransition(
+*   { countdownDuration: 3 },
+*   () => {
+*     // Start next round
+*     initializeNextRound();
+*   }
+* );
+*
+* // When round ends
+* startTransition(winner, roundNumber);
+* ```
+*/
+function useRoundTransition(config = {}, onTransitionComplete) {
+	const mergedConfig = useMemo(() => ({
+		...DEFAULT_CONFIG,
+		...config
+	}), [config]);
+	const [transitionState, setTransitionState] = useState("idle");
+	const [roundWinner, setRoundWinner] = useState(null);
+	const [currentRoundNumber, setCurrentRoundNumber] = useState(0);
+	const countdownActive = useRef(false);
+	const countdownTimer = useRef(null);
+	const transitionTimer = useRef(null);
+	/**
+	* Clear all active timers
+	*/
+	const clearTimers = useCallback(() => {
+		if (countdownTimer.current) {
+			clearInterval(countdownTimer.current);
+			countdownTimer.current = null;
+		}
+		if (transitionTimer.current) {
+			clearTimeout(transitionTimer.current);
+			transitionTimer.current = null;
+		}
+	}, []);
+	/**
+	* Start the transition sequence
+	*/
+	const startTransition = useCallback((winner, roundNumber) => {
+		clearTimers();
+		setRoundWinner(winner);
+		setCurrentRoundNumber(roundNumber);
+		setTransitionState("announcing");
+		transitionTimer.current = setTimeout(() => {
+			setTransitionState("countdown");
+			countdownActive.current = true;
+			countdownTimer.current = setTimeout(() => {
+				countdownActive.current = false;
+				setTransitionState("transitioning");
+				transitionTimer.current = setTimeout(() => {
+					setTransitionState("idle");
+					onTransitionComplete?.();
+				}, mergedConfig.transitionDuration);
+			}, mergedConfig.countdownDuration * 1e3);
+		}, mergedConfig.announcementDuration * 1e3);
+	}, [
+		clearTimers,
+		mergedConfig,
+		onTransitionComplete
+	]);
+	/**
+	* Skip countdown and proceed immediately to next round
+	*/
+	const skipCountdown = useCallback(() => {
+		if (transitionState === "announcing" || transitionState === "countdown") {
+			clearTimers();
+			countdownActive.current = false;
+			setTransitionState("transitioning");
+			transitionTimer.current = setTimeout(() => {
+				setTransitionState("idle");
+				onTransitionComplete?.();
+			}, mergedConfig.transitionDuration);
+		}
+	}, [
+		transitionState,
+		clearTimers,
+		mergedConfig.transitionDuration,
+		onTransitionComplete
+	]);
+	/**
+	* Reset transition to idle state
+	*/
+	const resetTransition = useCallback(() => {
+		clearTimers();
+		countdownActive.current = false;
+		setTransitionState("idle");
+		setRoundWinner(null);
+		setCurrentRoundNumber(0);
+	}, [clearTimers]);
+	/**
+	* Cleanup on unmount
+	*/
+	useEffect(() => {
+		return () => {
+			clearTimers();
+			countdownActive.current = false;
+		};
+	}, [clearTimers]);
+	return {
+		transitionState,
+		showAnnouncement: transitionState === "announcing" || transitionState === "countdown",
+		startTransition,
+		skipCountdown,
+		resetTransition,
+		roundWinner,
+		currentRoundNumber
+	};
+}
+//#endregion
+export { useRoundTransition as default };
+
+//# sourceMappingURL=useRoundTransition.js.map

package/lib/hooks/useRoundTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRoundTransition.js","names":[],"sources":["../../src/hooks/useRoundTransition.ts"],"sourcesContent":["/**\n * useRoundTransition Hook - Manages round transition state and timing\n *\n * Korean: 라운드 전환 훅 (Round Transition Hook)\n *\n * Handles the state machine for round transitions:\n * - idle: Normal combat state\n * - announcing: Showing round announcement\n * - countdown: Counting down to next round\n * - transitioning: Brief transition to next round\n *\n * @module hooks/useRoundTransition\n * @category Combat Hooks\n */\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { PlayerState } from \"../systems\";\n\n/**\n * Round transition states\n *\n * Korean: 라운드 전환 상태\n */\nexport type RoundTransitionState =\n  | \"idle\"\n  | \"announcing\"\n  | \"countdown\"\n  | \"transitioning\";\n\n/**\n * Round transition configuration\n */\nexport interface RoundTransitionConfig {\n  /** Duration of announcement display in seconds */\n  readonly announcementDuration?: number;\n  /** Duration of countdown in seconds */\n  readonly countdownDuration?: number;\n  /** Duration of transition phase in milliseconds */\n  readonly transitionDuration?: number;\n}\n\n/**\n * Round transition hook state\n */\nexport interface UseRoundTransitionResult {\n  /** Current transition state */\n  readonly transitionState: RoundTransitionState;\n  /** Whether announcement should be visible */\n  readonly showAnnouncement: boolean;\n  /** Start round transition sequence */\n  readonly startTransition: (\n    winner: PlayerState | null,\n    roundNumber: number\n  ) => void;\n  /** Skip countdown and proceed immediately */\n  readonly skipCountdown: () => void;\n  /** Reset transition state to idle */\n  readonly resetTransition: () => void;\n  /** Round winner for current transition */\n  readonly roundWinner: PlayerState | null;\n  /** Round number for current transition */\n  readonly currentRoundNumber: number;\n}\n\n/**\n * Default configuration values\n */\nconst DEFAULT_CONFIG: Required<RoundTransitionConfig> = {\n  announcementDuration: 2,\n  countdownDuration: 3,\n  transitionDuration: 500,\n};\n\n/**\n * useRoundTransition Hook\n *\n * Manages the complete round transition flow:\n * 1. Idle state during normal combat\n * 2. Announcing state shows round results\n * 3. Countdown state counts down to next round\n * 4. Transitioning state briefly transitions to next round\n * 5. Returns to idle for next round\n *\n * @param config - Configuration for transition timings\n * @param onTransitionComplete - Callback when transition completes\n * @returns Round transition state and control functions\n *\n * @example\n * ```typescript\n * const {\n *   transitionState,\n *   showAnnouncement,\n *   startTransition,\n *   skipCountdown,\n * } = useRoundTransition(\n *   { countdownDuration: 3 },\n *   () => {\n *     // Start next round\n *     initializeNextRound();\n *   }\n * );\n *\n * // When round ends\n * startTransition(winner, roundNumber);\n * ```\n */\nexport function useRoundTransition(\n  config: RoundTransitionConfig = {},\n  onTransitionComplete?: () => void\n): UseRoundTransitionResult {\n  const mergedConfig = useMemo(\n    () => ({ ...DEFAULT_CONFIG, ...config }),\n    [config]\n  );\n\n  const [transitionState, setTransitionState] =\n    useState<RoundTransitionState>(\"idle\");\n  const [roundWinner, setRoundWinner] = useState<PlayerState | null>(null);\n  const [currentRoundNumber, setCurrentRoundNumber] = useState(0);\n\n  // Use ref to track if we should continue countdown\n  const countdownActive = useRef(false);\n  const countdownTimer = useRef<NodeJS.Timeout | null>(null);\n  const transitionTimer = useRef<NodeJS.Timeout | null>(null);\n\n  /**\n   * Clear all active timers\n   */\n  const clearTimers = useCallback(() => {\n    if (countdownTimer.current) {\n      clearInterval(countdownTimer.current);\n      countdownTimer.current = null;\n    }\n    if (transitionTimer.current) {\n      clearTimeout(transitionTimer.current);\n      transitionTimer.current = null;\n    }\n  }, []);\n\n  /**\n   * Start the transition sequence\n   */\n  const startTransition = useCallback(\n    (winner: PlayerState | null, roundNumber: number) => {\n      clearTimers();\n      setRoundWinner(winner);\n      setCurrentRoundNumber(roundNumber);\n      setTransitionState(\"announcing\");\n\n      // Move to countdown after announcement\n      const announcementTimer = setTimeout(() => {\n        setTransitionState(\"countdown\");\n        countdownActive.current = true;\n\n        // Countdown will be managed by the RoundAnnouncement component\n        // After countdownDuration, move to transitioning state\n        countdownTimer.current = setTimeout(() => {\n          countdownActive.current = false;\n          setTransitionState(\"transitioning\");\n\n          // Complete transition after brief delay\n          transitionTimer.current = setTimeout(() => {\n            setTransitionState(\"idle\");\n            onTransitionComplete?.();\n          }, mergedConfig.transitionDuration);\n        }, mergedConfig.countdownDuration * 1000);\n      }, mergedConfig.announcementDuration * 1000);\n\n      // Store timer ref for cleanup\n      transitionTimer.current = announcementTimer;\n    },\n    [clearTimers, mergedConfig, onTransitionComplete]\n  );\n\n  /**\n   * Skip countdown and proceed immediately to next round\n   */\n  const skipCountdown = useCallback(() => {\n    if (transitionState === \"announcing\" || transitionState === \"countdown\") {\n      clearTimers();\n      countdownActive.current = false;\n      setTransitionState(\"transitioning\");\n\n      // Complete transition after brief delay\n      transitionTimer.current = setTimeout(() => {\n        setTransitionState(\"idle\");\n        onTransitionComplete?.();\n      }, mergedConfig.transitionDuration);\n    }\n  }, [\n    transitionState,\n    clearTimers,\n    mergedConfig.transitionDuration,\n    onTransitionComplete,\n  ]);\n\n  /**\n   * Reset transition to idle state\n   */\n  const resetTransition = useCallback(() => {\n    clearTimers();\n    countdownActive.current = false;\n    setTransitionState(\"idle\");\n    setRoundWinner(null);\n    setCurrentRoundNumber(0);\n  }, [clearTimers]);\n\n  /**\n   * Cleanup on unmount\n   */\n  useEffect(() => {\n    return () => {\n      clearTimers();\n      countdownActive.current = false;\n    };\n  }, [clearTimers]);\n\n  return {\n    transitionState,\n    showAnnouncement:\n      transitionState === \"announcing\" || transitionState === \"countdown\",\n    startTransition,\n    skipCountdown,\n    resetTransition,\n    roundWinner,\n    currentRoundNumber,\n  };\n}\n\nexport default useRoundTransition;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmEA,IAAM,iBAAkD;CACtD,sBAAsB;CACtB,mBAAmB;CACnB,oBAAoB;CACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCD,SAAgB,mBACd,SAAgC,EAAE,EAClC,sBAC0B;CAC1B,MAAM,eAAe,eACZ;EAAE,GAAG;EAAgB,GAAG;EAAQ,GACvC,CAAC,OAAO,CACT;CAED,MAAM,CAAC,iBAAiB,sBACtB,SAA+B,OAAO;CACxC,MAAM,CAAC,aAAa,kBAAkB,SAA6B,KAAK;CACxE,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,EAAE;CAG/D,MAAM,kBAAkB,OAAO,MAAM;CACrC,MAAM,iBAAiB,OAA8B,KAAK;CAC1D,MAAM,kBAAkB,OAA8B,KAAK;;;;CAK3D,MAAM,cAAc,kBAAkB;AACpC,MAAI,eAAe,SAAS;AAC1B,iBAAc,eAAe,QAAQ;AACrC,kBAAe,UAAU;;AAE3B,MAAI,gBAAgB,SAAS;AAC3B,gBAAa,gBAAgB,QAAQ;AACrC,mBAAgB,UAAU;;IAE3B,EAAE,CAAC;;;;CAKN,MAAM,kBAAkB,aACrB,QAA4B,gBAAwB;AACnD,eAAa;AACb,iBAAe,OAAO;AACtB,wBAAsB,YAAY;AAClC,qBAAmB,aAAa;AAsBhC,kBAAgB,UAnBU,iBAAiB;AACzC,sBAAmB,YAAY;AAC/B,mBAAgB,UAAU;AAI1B,kBAAe,UAAU,iBAAiB;AACxC,oBAAgB,UAAU;AAC1B,uBAAmB,gBAAgB;AAGnC,oBAAgB,UAAU,iBAAiB;AACzC,wBAAmB,OAAO;AAC1B,6BAAwB;OACvB,aAAa,mBAAmB;MAClC,aAAa,oBAAoB,IAAK;KACxC,aAAa,uBAAuB,IAAK;IAK9C;EAAC;EAAa;EAAc;EAAqB,CAClD;;;;CAKD,MAAM,gBAAgB,kBAAkB;AACtC,MAAI,oBAAoB,gBAAgB,oBAAoB,aAAa;AACvE,gBAAa;AACb,mBAAgB,UAAU;AAC1B,sBAAmB,gBAAgB;AAGnC,mBAAgB,UAAU,iBAAiB;AACzC,uBAAmB,OAAO;AAC1B,4BAAwB;MACvB,aAAa,mBAAmB;;IAEpC;EACD;EACA;EACA,aAAa;EACb;EACD,CAAC;;;;CAKF,MAAM,kBAAkB,kBAAkB;AACxC,eAAa;AACb,kBAAgB,UAAU;AAC1B,qBAAmB,OAAO;AAC1B,iBAAe,KAAK;AACpB,wBAAsB,EAAE;IACvB,CAAC,YAAY,CAAC;;;;AAKjB,iBAAgB;AACd,eAAa;AACX,gBAAa;AACb,mBAAgB,UAAU;;IAE3B,CAAC,YAAY,CAAC;AAEjB,QAAO;EACL;EACA,kBACE,oBAAoB,gBAAgB,oBAAoB;EAC1D;EACA;EACA;EACA;EACA;EACD"}