blacktrigram 0.7.44 → 0.7.45

package/lib/utils/responsiveLayoutHelpers.d.ts

@@ -16,7 +16,6 @@ import type { ScreenSize } from '../systems/ResponsiveScaling';
  * @param width - Viewport width in CSS pixels
  * @returns Width budget for the 4:3 desktop arena
  *
- * @public
  */
 export declare function getDesktopArenaWidthBudget(width: number): number;
 /**
@@ -25,13 +24,6 @@ export declare function getDesktopArenaWidthBudget(width: number): number;
  * @param screenSize - Current screen size category
  * @returns Calculated padding in pixels
  *
- * @example
- * ```typescript
- * const padding = getResponsivePadding('xlarge'); // 35
- * const padding = getResponsivePadding('mobile'); // 20
- * ```
- *
- * @public
  */
 export declare function getResponsivePadding(screenSize: ScreenSize): number;
 /**
@@ -40,13 +32,6 @@ export declare function getResponsivePadding(screenSize: ScreenSize): number;
  * @param screenSize - Current screen size category
  * @returns Calculated header height in pixels
  *
- * @example
- * ```typescript
- * const headerHeight = getResponsiveHeaderHeight('xlarge'); // 120
- * const headerHeight = getResponsiveHeaderHeight('mobile'); // 90
- * ```
- *
- * @public
  */
 export declare function getResponsiveHeaderHeight(screenSize: ScreenSize): number;
 /**
@@ -55,13 +40,6 @@ export declare function getResponsiveHeaderHeight(screenSize: ScreenSize): numbe
  * @param screenSize - Current screen size category
  * @returns Calculated footer height in pixels
  *
- * @example
- * ```typescript
- * const footerHeight = getResponsiveFooterHeight('xlarge'); // 100
- * const footerHeight = getResponsiveFooterHeight('mobile'); // 75
- * ```
- *
- * @public
  */
 export declare function getResponsiveFooterHeight(screenSize: ScreenSize): number;
 /**
@@ -70,13 +48,6 @@ export declare function getResponsiveFooterHeight(screenSize: ScreenSize): numbe
  * @param screenSize - Current screen size category
  * @returns Calculated section spacing in pixels
  *
- * @example
- * ```typescript
- * const spacing = getResponsiveSectionSpacing('xlarge'); // 25
- * const spacing = getResponsiveSectionSpacing('mobile'); // 15
- * ```
- *
- * @public
  */
 export declare function getResponsiveSectionSpacing(screenSize: ScreenSize): number;
 /**
@@ -85,13 +56,6 @@ export declare function getResponsiveSectionSpacing(screenSize: ScreenSize): num
  * @param screenSize - Current screen size category
  * @returns Calculated button area in pixels
  *
- * @example
- * ```typescript
- * const buttonArea = getResponsiveButtonArea('xlarge'); // 110
- * const buttonArea = getResponsiveButtonArea('mobile'); // 75
- * ```
- *
- * @public
  */
 export declare function getResponsiveButtonArea(screenSize: ScreenSize): number;
 /**
@@ -101,19 +65,6 @@ export declare function getResponsiveButtonArea(screenSize: ScreenSize): number;
  * @param width - Screen width in pixels
  * @returns Object with all layout constant values
  *
- * @example
- * ```typescript
- * const layout = getLayoutConstants(3840); // 4K display
- * // {
- * //   padding: 35,
- * //   headerHeight: 120,
- * //   footerHeight: 100,
- * //   sectionSpacing: 25,
- * //   buttonArea: 110
- * // }
- * ```
- *
- * @public
  */
 export declare function getLayoutConstants(width: number): {
     padding: number;
@@ -137,22 +88,6 @@ export declare function getLayoutConstants(width: number): {
  * @param isMobile - Optional: Whether device is mobile (from user-agent detection)
  * @returns Object with combat layout constant values
  *
- * @example
- * ```typescript
- * // Extra-small mobile (iPhone SE)
- * const layout = getCombatLayoutConstants(375, true);
- * // { padding: 8, hudHeight: 85, controlsHeight: 150, ... }
- *
- * // High-res mobile (Motorola Edge 60 Pro)
- * const layoutHD = getCombatLayoutConstants(2712, true);
- * // { padding: 10, hudHeight: 95, controlsHeight: 160, ... } (mobile values!)
- *
- * // Desktop
- * const layoutDesktop = getCombatLayoutConstants(1920, false);
- * // { padding: 10, hudHeight: 135, controlsHeight: 175, ... } (desktop values)
- * ```
- *
- * @public
  */
 export declare function getCombatLayoutConstants(width: number, isMobile?: boolean): {
     padding: number;

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

@@ -1 +1 @@
-{"version":3,"file":"responsiveLayoutHelpers.d.ts","sourceRoot":"","sources":["../../src/utils/responsiveLayoutHelpers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAa/D;;;;;;;GAOG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhE;AAiDD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEnE;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,yBAAyB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAExE;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,yBAAyB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAExE;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAE1E;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEtE;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM;;;;;;EAU/C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO;;;;;;;EA8DzE"}
+{"version":3,"file":"responsiveLayoutHelpers.d.ts","sourceRoot":"","sources":["../../src/utils/responsiveLayoutHelpers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAa/D;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhE;AAiDD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEnE;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAExE;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAExE;AAED;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAE1E;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEtE;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM;;;;;;EAU/C;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO;;;;;;;EA8DzE"}

package/lib/utils/responsiveLayoutHelpers.js

@@ -26,7 +26,6 @@ var DESKTOP_ARENA_MAX_WIDTH_PX = 2560;
 * @param width - Viewport width in CSS pixels
 * @returns Width budget for the 4:3 desktop arena
 *
-* @public
 */
 function getDesktopArenaWidthBudget(width) {
 	return Math.min(width * DESKTOP_ARENA_WIDTH_RATIO, DESKTOP_ARENA_MAX_WIDTH_PX);
@@ -78,13 +77,6 @@ var BASE_LAYOUT_VALUES = {
 * @param screenSize - Current screen size category
 * @returns Calculated padding in pixels
 * 
-* @example
-* ```typescript
-* const padding = getResponsivePadding('xlarge'); // 35
-* const padding = getResponsivePadding('mobile'); // 20
-* ```
-* 
-* @public
 */
 function getResponsivePadding(screenSize) {
 	return BASE_LAYOUT_VALUES.padding[screenSize];
@@ -95,13 +87,6 @@ function getResponsivePadding(screenSize) {
 * @param screenSize - Current screen size category
 * @returns Calculated header height in pixels
 * 
-* @example
-* ```typescript
-* const headerHeight = getResponsiveHeaderHeight('xlarge'); // 120
-* const headerHeight = getResponsiveHeaderHeight('mobile'); // 90
-* ```
-* 
-* @public
 */
 function getResponsiveHeaderHeight(screenSize) {
 	return BASE_LAYOUT_VALUES.headerHeight[screenSize];
@@ -112,13 +97,6 @@ function getResponsiveHeaderHeight(screenSize) {
 * @param screenSize - Current screen size category
 * @returns Calculated footer height in pixels
 * 
-* @example
-* ```typescript
-* const footerHeight = getResponsiveFooterHeight('xlarge'); // 100
-* const footerHeight = getResponsiveFooterHeight('mobile'); // 75
-* ```
-* 
-* @public
 */
 function getResponsiveFooterHeight(screenSize) {
 	return BASE_LAYOUT_VALUES.footerHeight[screenSize];
@@ -129,13 +107,6 @@ function getResponsiveFooterHeight(screenSize) {
 * @param screenSize - Current screen size category
 * @returns Calculated section spacing in pixels
 * 
-* @example
-* ```typescript
-* const spacing = getResponsiveSectionSpacing('xlarge'); // 25
-* const spacing = getResponsiveSectionSpacing('mobile'); // 15
-* ```
-* 
-* @public
 */
 function getResponsiveSectionSpacing(screenSize) {
 	return BASE_LAYOUT_VALUES.sectionSpacing[screenSize];
@@ -146,13 +117,6 @@ function getResponsiveSectionSpacing(screenSize) {
 * @param screenSize - Current screen size category
 * @returns Calculated button area in pixels
 * 
-* @example
-* ```typescript
-* const buttonArea = getResponsiveButtonArea('xlarge'); // 110
-* const buttonArea = getResponsiveButtonArea('mobile'); // 75
-* ```
-* 
-* @public
 */
 function getResponsiveButtonArea(screenSize) {
 	return BASE_LAYOUT_VALUES.buttonArea[screenSize];
@@ -164,19 +128,6 @@ function getResponsiveButtonArea(screenSize) {
 * @param width - Screen width in pixels
 * @returns Object with all layout constant values
 * 
-* @example
-* ```typescript
-* const layout = getLayoutConstants(3840); // 4K display
-* // {
-* //   padding: 35,
-* //   headerHeight: 120,
-* //   footerHeight: 100,
-* //   sectionSpacing: 25,
-* //   buttonArea: 110
-* // }
-* ```
-* 
-* @public
 */
 function getLayoutConstants(width) {
 	const screenSize = getScreenSize(width);
@@ -203,22 +154,6 @@ function getLayoutConstants(width) {
 * @param isMobile - Optional: Whether device is mobile (from user-agent detection)
 * @returns Object with combat layout constant values
 * 
-* @example
-* ```typescript
-* // Extra-small mobile (iPhone SE)
-* const layout = getCombatLayoutConstants(375, true);
-* // { padding: 8, hudHeight: 85, controlsHeight: 150, ... }
-* 
-* // High-res mobile (Motorola Edge 60 Pro)
-* const layoutHD = getCombatLayoutConstants(2712, true);
-* // { padding: 10, hudHeight: 95, controlsHeight: 160, ... } (mobile values!)
-* 
-* // Desktop
-* const layoutDesktop = getCombatLayoutConstants(1920, false);
-* // { padding: 10, hudHeight: 135, controlsHeight: 175, ... } (desktop values)
-* ```
-* 
-* @public
 */
 function getCombatLayoutConstants(width, isMobile) {
 	const screenSize = isMobile ? "mobile" : getScreenSize(width);

package/lib/utils/responsiveLayoutHelpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsiveLayoutHelpers.js","names":[],"sources":["../../src/utils/responsiveLayoutHelpers.ts"],"sourcesContent":["/**\n * Responsive Layout Helpers\n * \n * Centralized utilities for calculating responsive layout constants\n * across different screen components. Uses the centralized ResponsiveScaling\n * system for consistent scaling patterns.\n * \n * @module utils/responsiveLayoutHelpers\n * @category Layout\n * @korean 반응형레이아웃도우미\n */\n\nimport { getScreenSize } from '../systems/ResponsiveScaling';\nimport type { ScreenSize } from '../systems/ResponsiveScaling';\n\n/** Desktop arena width as a proportion of viewport width. */\nconst DESKTOP_ARENA_WIDTH_RATIO = 0.8;\n\n/**\n * Maximum desktop arena width in CSS pixels.\n *\n * Caps ultra-wide/8K displays to protect WebGL fill-rate while preserving a\n * large, readable 4K desktop arena.\n */\nconst DESKTOP_ARENA_MAX_WIDTH_PX = 2560;\n\n/**\n * Calculate maximum desktop arena width for combat/training screens.\n *\n * @param width - Viewport width in CSS pixels\n * @returns Width budget for the 4:3 desktop arena\n *\n * @public\n */\nexport function getDesktopArenaWidthBudget(width: number): number {\n  return Math.min(width * DESKTOP_ARENA_WIDTH_RATIO, DESKTOP_ARENA_MAX_WIDTH_PX);\n}\n\n/**\n * Base layout values for different screen sizes\n * These serve as reference values that scale proportionally\n */\nconst BASE_LAYOUT_VALUES = {\n  // Base padding values (desktop reference)\n  padding: {\n    mobile: 20,\n    tablet: 25,\n    desktop: 30,\n    large: 32,\n    xlarge: 35,\n  },\n  // Base header height values\n  headerHeight: {\n    mobile: 90,\n    tablet: 100,\n    desktop: 110,\n    large: 115,\n    xlarge: 120,\n  },\n  // Base footer height values\n  footerHeight: {\n    mobile: 75,\n    tablet: 85,\n    desktop: 90,\n    large: 95,\n    xlarge: 100,\n  },\n  // Base section spacing values\n  sectionSpacing: {\n    mobile: 15,\n    tablet: 18,\n    desktop: 20,\n    large: 22,\n    xlarge: 25,\n  },\n  // Base button area values\n  buttonArea: {\n    mobile: 75,\n    tablet: 85,\n    desktop: 95,\n    large: 102,\n    xlarge: 110,\n  },\n} as const;\n\n/**\n * Calculate responsive padding value\n * \n * @param screenSize - Current screen size category\n * @returns Calculated padding in pixels\n * \n * @example\n * ```typescript\n * const padding = getResponsivePadding('xlarge'); // 35\n * const padding = getResponsivePadding('mobile'); // 20\n * ```\n * \n * @public\n */\nexport function getResponsivePadding(screenSize: ScreenSize): number {\n  return BASE_LAYOUT_VALUES.padding[screenSize];\n}\n\n/**\n * Calculate responsive header height value\n * \n * @param screenSize - Current screen size category\n * @returns Calculated header height in pixels\n * \n * @example\n * ```typescript\n * const headerHeight = getResponsiveHeaderHeight('xlarge'); // 120\n * const headerHeight = getResponsiveHeaderHeight('mobile'); // 90\n * ```\n * \n * @public\n */\nexport function getResponsiveHeaderHeight(screenSize: ScreenSize): number {\n  return BASE_LAYOUT_VALUES.headerHeight[screenSize];\n}\n\n/**\n * Calculate responsive footer height value\n * \n * @param screenSize - Current screen size category\n * @returns Calculated footer height in pixels\n * \n * @example\n * ```typescript\n * const footerHeight = getResponsiveFooterHeight('xlarge'); // 100\n * const footerHeight = getResponsiveFooterHeight('mobile'); // 75\n * ```\n * \n * @public\n */\nexport function getResponsiveFooterHeight(screenSize: ScreenSize): number {\n  return BASE_LAYOUT_VALUES.footerHeight[screenSize];\n}\n\n/**\n * Calculate responsive section spacing value\n * \n * @param screenSize - Current screen size category\n * @returns Calculated section spacing in pixels\n * \n * @example\n * ```typescript\n * const spacing = getResponsiveSectionSpacing('xlarge'); // 25\n * const spacing = getResponsiveSectionSpacing('mobile'); // 15\n * ```\n * \n * @public\n */\nexport function getResponsiveSectionSpacing(screenSize: ScreenSize): number {\n  return BASE_LAYOUT_VALUES.sectionSpacing[screenSize];\n}\n\n/**\n * Calculate responsive button area value\n * \n * @param screenSize - Current screen size category\n * @returns Calculated button area in pixels\n * \n * @example\n * ```typescript\n * const buttonArea = getResponsiveButtonArea('xlarge'); // 110\n * const buttonArea = getResponsiveButtonArea('mobile'); // 75\n * ```\n * \n * @public\n */\nexport function getResponsiveButtonArea(screenSize: ScreenSize): number {\n  return BASE_LAYOUT_VALUES.buttonArea[screenSize];\n}\n\n/**\n * Get all layout constants for a given screen size\n * Convenient helper that returns all layout values at once\n * \n * @param width - Screen width in pixels\n * @returns Object with all layout constant values\n * \n * @example\n * ```typescript\n * const layout = getLayoutConstants(3840); // 4K display\n * // {\n * //   padding: 35,\n * //   headerHeight: 120,\n * //   footerHeight: 100,\n * //   sectionSpacing: 25,\n * //   buttonArea: 110\n * // }\n * ```\n * \n * @public\n */\nexport function getLayoutConstants(width: number) {\n  const screenSize = getScreenSize(width);\n  \n  return {\n    padding: getResponsivePadding(screenSize),\n    headerHeight: getResponsiveHeaderHeight(screenSize),\n    footerHeight: getResponsiveFooterHeight(screenSize),\n    sectionSpacing: getResponsiveSectionSpacing(screenSize),\n    buttonArea: getResponsiveButtonArea(screenSize),\n  };\n}\n\n/**\n * Get combat-specific layout constants for a given screen size\n * \n * Optimized for narrow devices (<450px), with extra-small device support\n * explicitly tuned for ultra-small screens (<380px) like iPhone SE, old\n * Android phones, and budget smartphones.\n * \n * Now properly handles high-resolution mobile devices (2K+, Super HD) by\n * checking isMobile flag to ensure they get mobile-optimized layout values\n * regardless of pixel width.\n * \n * @param width - Screen width in pixels\n * @param isMobile - Optional: Whether device is mobile (from user-agent detection)\n * @returns Object with combat layout constant values\n * \n * @example\n * ```typescript\n * // Extra-small mobile (iPhone SE)\n * const layout = getCombatLayoutConstants(375, true);\n * // { padding: 8, hudHeight: 85, controlsHeight: 150, ... }\n * \n * // High-res mobile (Motorola Edge 60 Pro)\n * const layoutHD = getCombatLayoutConstants(2712, true);\n * // { padding: 10, hudHeight: 95, controlsHeight: 160, ... } (mobile values!)\n * \n * // Desktop\n * const layoutDesktop = getCombatLayoutConstants(1920, false);\n * // { padding: 10, hudHeight: 135, controlsHeight: 175, ... } (desktop values)\n * ```\n * \n * @public\n */\nexport function getCombatLayoutConstants(width: number, isMobile?: boolean) {\n  // For mobile devices, force 'mobile' screen size regardless of pixel width\n  // This ensures high-res mobile devices (2K+) get mobile-optimized layouts\n  const screenSize = isMobile ? 'mobile' : getScreenSize(width);\n  \n  // Extra-small detection for low-end mobile devices (<380px)\n  const isExtraSmall = isMobile && width < 380;\n  \n  // Combat screen uses different base values for compact HUD\n  const hudHeightMap = {\n    mobile: isExtraSmall ? 85 : 95,\n    tablet: 100,\n    desktop: 130,\n    large: 135,\n    xlarge: 140,\n  };\n  \n  // Note: Tablet optimizations - controlsHeight and footerHeight are intentionally\n  // smaller on tablets than mobile for better landscape orientation ergonomics.\n  // Mobile (portrait) needs taller controls for thumb reach, while tablets\n  // (often landscape) can use more compact controls with better screen utilization.\n  const controlsHeightMap = {\n    mobile: isExtraSmall ? 150 : 160, // Taller for portrait thumb reach\n    tablet: 140,  // Optimized for landscape - more compact\n    desktop: 170,\n    large: 175,\n    xlarge: 180,\n  };\n  \n  const footerHeightMap = {\n    mobile: 34,  // Adequate for portrait orientation\n    tablet: 30,   // Optimized for landscape - more compact\n    desktop: 35,\n    large: 37,\n    xlarge: 40,\n  };\n  \n  const healthBarHeightMap = {\n    mobile: 48,\n    tablet: 50,\n    desktop: 65,\n    large: 67,\n    xlarge: 70,\n  };\n  \n  // Touch target heights - WCAG AA compliance (minimum 44px)\n  const buttonHeightMap = {\n    mobile: isExtraSmall ? 48 : 55, // Minimum 48px for extra-small\n    tablet: 55,\n    desktop: 60,\n    large: 60,\n    xlarge: 60,\n  };\n  \n  return {\n    padding: isExtraSmall ? 8 : 10, // Reduced padding for extra-small\n    hudHeight: hudHeightMap[screenSize],\n    controlsHeight: controlsHeightMap[screenSize],\n    footerHeight: footerHeightMap[screenSize],\n    healthBarHeight: healthBarHeightMap[screenSize],\n    buttonHeight: buttonHeightMap[screenSize],\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAM,4BAA4B;;;;;;;AAQlC,IAAM,6BAA6B;;;;;;;;;AAUnC,SAAgB,2BAA2B,OAAuB;CAChE,OAAO,KAAK,IAAI,QAAQ,2BAA2B,2BAA2B;;;;;;AAOhF,IAAM,qBAAqB;CAEzB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAED,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAED,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAED,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAED,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CACF;;;;;;;;;;;;;;;AAgBD,SAAgB,qBAAqB,YAAgC;CACnE,OAAO,mBAAmB,QAAQ;;;;;;;;;;;;;;;;AAiBpC,SAAgB,0BAA0B,YAAgC;CACxE,OAAO,mBAAmB,aAAa;;;;;;;;;;;;;;;;AAiBzC,SAAgB,0BAA0B,YAAgC;CACxE,OAAO,mBAAmB,aAAa;;;;;;;;;;;;;;;;AAiBzC,SAAgB,4BAA4B,YAAgC;CAC1E,OAAO,mBAAmB,eAAe;;;;;;;;;;;;;;;;AAiB3C,SAAgB,wBAAwB,YAAgC;CACtE,OAAO,mBAAmB,WAAW;;;;;;;;;;;;;;;;;;;;;;;AAwBvC,SAAgB,mBAAmB,OAAe;CAChD,MAAM,aAAa,cAAc,MAAM;CAEvC,OAAO;EACL,SAAS,qBAAqB,WAAW;EACzC,cAAc,0BAA0B,WAAW;EACnD,cAAc,0BAA0B,WAAW;EACnD,gBAAgB,4BAA4B,WAAW;EACvD,YAAY,wBAAwB,WAAW;EAChD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCH,SAAgB,yBAAyB,OAAe,UAAoB;CAG1E,MAAM,aAAa,WAAW,WAAW,cAAc,MAAM;CAG7D,MAAM,eAAe,YAAY,QAAQ;CAGzC,MAAM,eAAe;EACnB,QAAQ,eAAe,KAAK;EAC5B,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAMD,MAAM,oBAAoB;EACxB,QAAQ,eAAe,MAAM;EAC7B,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAED,MAAM,kBAAkB;EACtB,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAED,MAAM,qBAAqB;EACzB,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAGD,MAAM,kBAAkB;EACtB,QAAQ,eAAe,KAAK;EAC5B,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAED,OAAO;EACL,SAAS,eAAe,IAAI;EAC5B,WAAW,aAAa;EACxB,gBAAgB,kBAAkB;EAClC,cAAc,gBAAgB;EAC9B,iBAAiB,mBAAmB;EACpC,cAAc,gBAAgB;EAC/B"}
+{"version":3,"file":"responsiveLayoutHelpers.js","names":[],"sources":["../../src/utils/responsiveLayoutHelpers.ts"],"sourcesContent":["/**\n * Responsive Layout Helpers\n * \n * Centralized utilities for calculating responsive layout constants\n * across different screen components. Uses the centralized ResponsiveScaling\n * system for consistent scaling patterns.\n * \n * @module utils/responsiveLayoutHelpers\n * @category Layout\n * @korean 반응형레이아웃도우미\n */\n\nimport { getScreenSize } from '../systems/ResponsiveScaling';\nimport type { ScreenSize } from '../systems/ResponsiveScaling';\n\n/** Desktop arena width as a proportion of viewport width. */\nconst DESKTOP_ARENA_WIDTH_RATIO = 0.8;\n\n/**\n * Maximum desktop arena width in CSS pixels.\n *\n * Caps ultra-wide/8K displays to protect WebGL fill-rate while preserving a\n * large, readable 4K desktop arena.\n */\nconst DESKTOP_ARENA_MAX_WIDTH_PX = 2560;\n\n/**\n * Calculate maximum desktop arena width for combat/training screens.\n *\n * @param width - Viewport width in CSS pixels\n * @returns Width budget for the 4:3 desktop arena\n *\n */\nexport function getDesktopArenaWidthBudget(width: number): number {\n  return Math.min(width * DESKTOP_ARENA_WIDTH_RATIO, DESKTOP_ARENA_MAX_WIDTH_PX);\n}\n\n/**\n * Base layout values for different screen sizes\n * These serve as reference values that scale proportionally\n */\nconst BASE_LAYOUT_VALUES = {\n  // Base padding values (desktop reference)\n  padding: {\n    mobile: 20,\n    tablet: 25,\n    desktop: 30,\n    large: 32,\n    xlarge: 35,\n  },\n  // Base header height values\n  headerHeight: {\n    mobile: 90,\n    tablet: 100,\n    desktop: 110,\n    large: 115,\n    xlarge: 120,\n  },\n  // Base footer height values\n  footerHeight: {\n    mobile: 75,\n    tablet: 85,\n    desktop: 90,\n    large: 95,\n    xlarge: 100,\n  },\n  // Base section spacing values\n  sectionSpacing: {\n    mobile: 15,\n    tablet: 18,\n    desktop: 20,\n    large: 22,\n    xlarge: 25,\n  },\n  // Base button area values\n  buttonArea: {\n    mobile: 75,\n    tablet: 85,\n    desktop: 95,\n    large: 102,\n    xlarge: 110,\n  },\n} as const;\n\n/**\n * Calculate responsive padding value\n * \n * @param screenSize - Current screen size category\n * @returns Calculated padding in pixels\n * \n */\nexport function getResponsivePadding(screenSize: ScreenSize): number {\n  return BASE_LAYOUT_VALUES.padding[screenSize];\n}\n\n/**\n * Calculate responsive header height value\n * \n * @param screenSize - Current screen size category\n * @returns Calculated header height in pixels\n * \n */\nexport function getResponsiveHeaderHeight(screenSize: ScreenSize): number {\n  return BASE_LAYOUT_VALUES.headerHeight[screenSize];\n}\n\n/**\n * Calculate responsive footer height value\n * \n * @param screenSize - Current screen size category\n * @returns Calculated footer height in pixels\n * \n */\nexport function getResponsiveFooterHeight(screenSize: ScreenSize): number {\n  return BASE_LAYOUT_VALUES.footerHeight[screenSize];\n}\n\n/**\n * Calculate responsive section spacing value\n * \n * @param screenSize - Current screen size category\n * @returns Calculated section spacing in pixels\n * \n */\nexport function getResponsiveSectionSpacing(screenSize: ScreenSize): number {\n  return BASE_LAYOUT_VALUES.sectionSpacing[screenSize];\n}\n\n/**\n * Calculate responsive button area value\n * \n * @param screenSize - Current screen size category\n * @returns Calculated button area in pixels\n * \n */\nexport function getResponsiveButtonArea(screenSize: ScreenSize): number {\n  return BASE_LAYOUT_VALUES.buttonArea[screenSize];\n}\n\n/**\n * Get all layout constants for a given screen size\n * Convenient helper that returns all layout values at once\n * \n * @param width - Screen width in pixels\n * @returns Object with all layout constant values\n * \n */\nexport function getLayoutConstants(width: number) {\n  const screenSize = getScreenSize(width);\n  \n  return {\n    padding: getResponsivePadding(screenSize),\n    headerHeight: getResponsiveHeaderHeight(screenSize),\n    footerHeight: getResponsiveFooterHeight(screenSize),\n    sectionSpacing: getResponsiveSectionSpacing(screenSize),\n    buttonArea: getResponsiveButtonArea(screenSize),\n  };\n}\n\n/**\n * Get combat-specific layout constants for a given screen size\n * \n * Optimized for narrow devices (<450px), with extra-small device support\n * explicitly tuned for ultra-small screens (<380px) like iPhone SE, old\n * Android phones, and budget smartphones.\n * \n * Now properly handles high-resolution mobile devices (2K+, Super HD) by\n * checking isMobile flag to ensure they get mobile-optimized layout values\n * regardless of pixel width.\n * \n * @param width - Screen width in pixels\n * @param isMobile - Optional: Whether device is mobile (from user-agent detection)\n * @returns Object with combat layout constant values\n * \n */\nexport function getCombatLayoutConstants(width: number, isMobile?: boolean) {\n  // For mobile devices, force 'mobile' screen size regardless of pixel width\n  // This ensures high-res mobile devices (2K+) get mobile-optimized layouts\n  const screenSize = isMobile ? 'mobile' : getScreenSize(width);\n  \n  // Extra-small detection for low-end mobile devices (<380px)\n  const isExtraSmall = isMobile && width < 380;\n  \n  // Combat screen uses different base values for compact HUD\n  const hudHeightMap = {\n    mobile: isExtraSmall ? 85 : 95,\n    tablet: 100,\n    desktop: 130,\n    large: 135,\n    xlarge: 140,\n  };\n  \n  // Note: Tablet optimizations - controlsHeight and footerHeight are intentionally\n  // smaller on tablets than mobile for better landscape orientation ergonomics.\n  // Mobile (portrait) needs taller controls for thumb reach, while tablets\n  // (often landscape) can use more compact controls with better screen utilization.\n  const controlsHeightMap = {\n    mobile: isExtraSmall ? 150 : 160, // Taller for portrait thumb reach\n    tablet: 140,  // Optimized for landscape - more compact\n    desktop: 170,\n    large: 175,\n    xlarge: 180,\n  };\n  \n  const footerHeightMap = {\n    mobile: 34,  // Adequate for portrait orientation\n    tablet: 30,   // Optimized for landscape - more compact\n    desktop: 35,\n    large: 37,\n    xlarge: 40,\n  };\n  \n  const healthBarHeightMap = {\n    mobile: 48,\n    tablet: 50,\n    desktop: 65,\n    large: 67,\n    xlarge: 70,\n  };\n  \n  // Touch target heights - WCAG AA compliance (minimum 44px)\n  const buttonHeightMap = {\n    mobile: isExtraSmall ? 48 : 55, // Minimum 48px for extra-small\n    tablet: 55,\n    desktop: 60,\n    large: 60,\n    xlarge: 60,\n  };\n  \n  return {\n    padding: isExtraSmall ? 8 : 10, // Reduced padding for extra-small\n    hudHeight: hudHeightMap[screenSize],\n    controlsHeight: controlsHeightMap[screenSize],\n    footerHeight: footerHeightMap[screenSize],\n    healthBarHeight: healthBarHeightMap[screenSize],\n    buttonHeight: buttonHeightMap[screenSize],\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,IAAM,4BAA4B;;;;;;;AAQlC,IAAM,6BAA6B;;;;;;;;AASnC,SAAgB,2BAA2B,OAAuB;CAChE,OAAO,KAAK,IAAI,QAAQ,2BAA2B,2BAA2B;;;;;;AAOhF,IAAM,qBAAqB;CAEzB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAED,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAED,cAAc;EACZ,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAED,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAED,YAAY;EACV,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CACF;;;;;;;;AASD,SAAgB,qBAAqB,YAAgC;CACnE,OAAO,mBAAmB,QAAQ;;;;;;;;;AAUpC,SAAgB,0BAA0B,YAAgC;CACxE,OAAO,mBAAmB,aAAa;;;;;;;;;AAUzC,SAAgB,0BAA0B,YAAgC;CACxE,OAAO,mBAAmB,aAAa;;;;;;;;;AAUzC,SAAgB,4BAA4B,YAAgC;CAC1E,OAAO,mBAAmB,eAAe;;;;;;;;;AAU3C,SAAgB,wBAAwB,YAAgC;CACtE,OAAO,mBAAmB,WAAW;;;;;;;;;;AAWvC,SAAgB,mBAAmB,OAAe;CAChD,MAAM,aAAa,cAAc,MAAM;CAEvC,OAAO;EACL,SAAS,qBAAqB,WAAW;EACzC,cAAc,0BAA0B,WAAW;EACnD,cAAc,0BAA0B,WAAW;EACnD,gBAAgB,4BAA4B,WAAW;EACvD,YAAY,wBAAwB,WAAW;EAChD;;;;;;;;;;;;;;;;;;AAmBH,SAAgB,yBAAyB,OAAe,UAAoB;CAG1E,MAAM,aAAa,WAAW,WAAW,cAAc,MAAM;CAG7D,MAAM,eAAe,YAAY,QAAQ;CAGzC,MAAM,eAAe;EACnB,QAAQ,eAAe,KAAK;EAC5B,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAMD,MAAM,oBAAoB;EACxB,QAAQ,eAAe,MAAM;EAC7B,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAED,MAAM,kBAAkB;EACtB,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAED,MAAM,qBAAqB;EACzB,QAAQ;EACR,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAGD,MAAM,kBAAkB;EACtB,QAAQ,eAAe,KAAK;EAC5B,QAAQ;EACR,SAAS;EACT,OAAO;EACP,QAAQ;EACT;CAED,OAAO;EACL,SAAS,eAAe,IAAI;EAC5B,WAAW,aAAa;EACxB,gBAAgB,kBAAkB;EAClC,cAAc,gBAAgB;EAC9B,iBAAiB,mBAAmB;EACpC,cAAc,gBAAgB;EAC/B"}

package/lib/utils/responsiveOrientationConstants.d.ts

@@ -17,7 +17,6 @@
  * factor is < 1.0 so near-square viewports (e.g. `1024×1000`) settle into
  * one orientation and don't flap on every pixel of resize.
  *
- * @public
  */
 export declare const PORTRAIT_HYSTERESIS_FACTOR = 0.9;
 /**
@@ -28,7 +27,6 @@ export declare const PORTRAIT_HYSTERESIS_FACTOR = 0.9;
  * This makes devtools emulation of a rotated phone/tablet behave identically
  * to a real device.
  *
- * @public
  */
 export declare const PORTRAIT_FORCE_MAX_WIDTH_PX = 1024;
 /**
@@ -44,7 +42,6 @@ export declare const PORTRAIT_FORCE_MAX_WIDTH_PX = 1024;
  * D-Pad + action buttons + the persistent technique bar. Training uses
  * the smaller 180/140 band because its on-screen controls are lighter.
  *
- * @public
  */
 export declare const MOBILE_CONTROLS_RESERVED_HEIGHT_PX: {
     /** D-Pad + action buttons + technique bar on combat (standard phones) */
@@ -63,7 +60,6 @@ export declare const MOBILE_CONTROLS_RESERVED_HEIGHT_PX: {
  * compact values reserve only the visible bottom technique/control band while
  * still keeping the 3D arena above touch controls.
  *
- * @public
  */
 export declare const LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX: {
     /** Combat bottom band on landscape phones */
@@ -84,7 +80,6 @@ export declare const LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX: {
  * @param isExtraSmall - true when the viewport is < 380px wide
  * @param variant - "combat" or "training" (differs in control band size)
  *
- * @public
  */
 export declare function portraitMobileControlsBottomBand(controlsHeight: number, footerHeight: number, isExtraSmall: boolean, variant: "combat" | "training"): number;
 /**
@@ -93,7 +88,6 @@ export declare function portraitMobileControlsBottomBand(controlsHeight: number,
  * @param isExtraSmall - true when the viewport is < 380px wide
  * @param variant - "combat" or "training"
  *
- * @public
  */
 export declare function landscapeMobileControlsBottomClearance(isExtraSmall: boolean, variant: "combat" | "training"): number;
 /**
@@ -109,7 +103,6 @@ export declare function landscapeMobileControlsBottomClearance(isExtraSmall: boo
  * @param isPortrait - true for portrait orientation
  * @param variant - "combat" or "training"
  *
- * @public
  */
 export declare function mobileControlsBottomClearance(controlsHeight: number, footerHeight: number, isExtraSmall: boolean, isPortrait: boolean, variant: "combat" | "training"): number;
 //# sourceMappingURL=responsiveOrientationConstants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"responsiveOrientationConstants.d.ts","sourceRoot":"","sources":["../../src/utils/responsiveOrientationConstants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAE9C;;;;;;;;;GASG;AACH,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAEhD;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,kCAAkC;IAC7C,yEAAyE;;IAEzE,0DAA0D;;IAE1D,oDAAoD;;IAEpD,uDAAuD;;CAE/C,CAAC;AAEX;;;;;;;;GAQG;AACH,eAAO,MAAM,6CAA6C;IACxD,6CAA6C;;IAE7C,yDAAyD;;IAEzD,+CAA+C;;IAE/C,2DAA2D;;CAEnD,CAAC;AAEX;;;;;;;;;;GAUG;AACH,wBAAgB,gCAAgC,CAC9C,cAAc,EAAE,MAAM,EACtB,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,OAAO,EACrB,OAAO,EAAE,QAAQ,GAAG,UAAU,GAC7B,MAAM,CAWR;AAED;;;;;;;GAOG;AACH,wBAAgB,sCAAsC,CACpD,YAAY,EAAE,OAAO,EACrB,OAAO,EAAE,QAAQ,GAAG,UAAU,GAC7B,MAAM,CAUR;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,6BAA6B,CAC3C,cAAc,EAAE,MAAM,EACtB,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,OAAO,EACrB,UAAU,EAAE,OAAO,EACnB,OAAO,EAAE,QAAQ,GAAG,UAAU,GAC7B,MAAM,CASR"}
+{"version":3,"file":"responsiveOrientationConstants.d.ts","sourceRoot":"","sources":["../../src/utils/responsiveOrientationConstants.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAE9C;;;;;;;;GAQG;AACH,eAAO,MAAM,2BAA2B,OAAO,CAAC;AAEhD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,kCAAkC;IAC7C,yEAAyE;;IAEzE,0DAA0D;;IAE1D,oDAAoD;;IAEpD,uDAAuD;;CAE/C,CAAC;AAEX;;;;;;;GAOG;AACH,eAAO,MAAM,6CAA6C;IACxD,6CAA6C;;IAE7C,yDAAyD;;IAEzD,+CAA+C;;IAE/C,2DAA2D;;CAEnD,CAAC;AAEX;;;;;;;;;GASG;AACH,wBAAgB,gCAAgC,CAC9C,cAAc,EAAE,MAAM,EACtB,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,OAAO,EACrB,OAAO,EAAE,QAAQ,GAAG,UAAU,GAC7B,MAAM,CAWR;AAED;;;;;;GAMG;AACH,wBAAgB,sCAAsC,CACpD,YAAY,EAAE,OAAO,EACrB,OAAO,EAAE,QAAQ,GAAG,UAAU,GAC7B,MAAM,CAUR;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,6BAA6B,CAC3C,cAAc,EAAE,MAAM,EACtB,YAAY,EAAE,MAAM,EACpB,YAAY,EAAE,OAAO,EACrB,UAAU,EAAE,OAAO,EACnB,OAAO,EAAE,QAAQ,GAAG,UAAU,GAC7B,MAAM,CASR"}

package/lib/utils/responsiveOrientationConstants.js

@@ -18,7 +18,6 @@
 * factor is < 1.0 so near-square viewports (e.g. `1024×1000`) settle into
 * one orientation and don't flap on every pixel of resize.
 *
-* @public
 */
 var PORTRAIT_HYSTERESIS_FACTOR = .9;
 /**
@@ -29,7 +28,6 @@ var PORTRAIT_HYSTERESIS_FACTOR = .9;
 * This makes devtools emulation of a rotated phone/tablet behave identically
 * to a real device.
 *
-* @public
 */
 var PORTRAIT_FORCE_MAX_WIDTH_PX = 1024;
 /**
@@ -45,7 +43,6 @@ var PORTRAIT_FORCE_MAX_WIDTH_PX = 1024;
 * D-Pad + action buttons + the persistent technique bar. Training uses
 * the smaller 180/140 band because its on-screen controls are lighter.
 *
-* @public
 */
 var MOBILE_CONTROLS_RESERVED_HEIGHT_PX = {
 	/** D-Pad + action buttons + technique bar on combat (standard phones) */
@@ -64,7 +61,6 @@ var MOBILE_CONTROLS_RESERVED_HEIGHT_PX = {
 * compact values reserve only the visible bottom technique/control band while
 * still keeping the 3D arena above touch controls.
 *
-* @public
 */
 var LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX = {
 	/** Combat bottom band on landscape phones */
@@ -85,7 +81,6 @@ var LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX = {
 * @param isExtraSmall - true when the viewport is < 380px wide
 * @param variant - "combat" or "training" (differs in control band size)
 *
-* @public
 */
 function portraitMobileControlsBottomBand(controlsHeight, footerHeight, isExtraSmall, variant) {
 	const band = variant === "combat" ? isExtraSmall ? MOBILE_CONTROLS_RESERVED_HEIGHT_PX.combatExtraSmall : MOBILE_CONTROLS_RESERVED_HEIGHT_PX.combatStandard : isExtraSmall ? MOBILE_CONTROLS_RESERVED_HEIGHT_PX.trainingExtraSmall : MOBILE_CONTROLS_RESERVED_HEIGHT_PX.trainingStandard;
@@ -97,7 +92,6 @@ function portraitMobileControlsBottomBand(controlsHeight, footerHeight, isExtraS
 * @param isExtraSmall - true when the viewport is < 380px wide
 * @param variant - "combat" or "training"
 *
-* @public
 */
 function landscapeMobileControlsBottomClearance(isExtraSmall, variant) {
 	if (variant === "combat") return isExtraSmall ? LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX.combatExtraSmall : LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX.combatStandard;
@@ -116,7 +110,6 @@ function landscapeMobileControlsBottomClearance(isExtraSmall, variant) {
 * @param isPortrait - true for portrait orientation
 * @param variant - "combat" or "training"
 *
-* @public
 */
 function mobileControlsBottomClearance(controlsHeight, footerHeight, isExtraSmall, isPortrait, variant) {
 	return isPortrait ? portraitMobileControlsBottomBand(controlsHeight, footerHeight, isExtraSmall, variant) : landscapeMobileControlsBottomClearance(isExtraSmall, variant);

package/lib/utils/responsiveOrientationConstants.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsiveOrientationConstants.js","names":[],"sources":["../../src/utils/responsiveOrientationConstants.ts"],"sourcesContent":["/**\n * Shared constants for orientation-aware responsive layout.\n *\n * Extracted so that `useCombatLayout` and `useTrainingLayout` compute the\n * same portrait \"bottom band\" and share a single source of truth for the\n * portrait-forcing hysteresis and the reserved control-column heights.\n *\n * 반응형 레이아웃 상수\n *\n * @module utils/responsiveOrientationConstants\n * @category Layout\n */\n\n/**\n * Hysteresis factor for portrait detection.\n *\n * A viewport is treated as portrait when `height > width × FACTOR`. The\n * factor is < 1.0 so near-square viewports (e.g. `1024×1000`) settle into\n * one orientation and don't flap on every pixel of resize.\n *\n * @public\n */\nexport const PORTRAIT_HYSTERESIS_FACTOR = 0.9;\n\n/**\n * Maximum width at which a portrait viewport is force-promoted to the mobile\n * layout branch even if the user-agent reports a desktop browser. Matches the\n * tablet breakpoint used elsewhere in the codebase (1024px).\n *\n * This makes devtools emulation of a rotated phone/tablet behave identically\n * to a real device.\n *\n * @public\n */\nexport const PORTRAIT_FORCE_MAX_WIDTH_PX = 1024;\n\n/**\n * Height reserved at the bottom of a mobile portrait viewport for the\n * on-screen virtual controls (D-Pad + action buttons rendered by\n * `MobileControlsWrapper`). Used as a conservative upper bound so the\n * 3D arena never ends up drawn behind the controls.\n *\n * Two values are provided so that very small phones (iPhone SE class,\n * width < 380) can still fit a playable arena.\n *\n * Combat uses the larger 200/160 band because its Mobile controls stack\n * D-Pad + action buttons + the persistent technique bar. Training uses\n * the smaller 180/140 band because its on-screen controls are lighter.\n *\n * @public\n */\nexport const MOBILE_CONTROLS_RESERVED_HEIGHT_PX = {\n  /** D-Pad + action buttons + technique bar on combat (standard phones) */\n  combatStandard: 200,\n  /** Combat controls on extra-small phones (width < 380) */\n  combatExtraSmall: 160,\n  /** Training on-screen controls (standard phones) */\n  trainingStandard: 180,\n  /** Training on-screen controls (extra-small phones) */\n  trainingExtraSmall: 140,\n} as const;\n\n/**\n * Height reserved at the bottom of mobile landscape viewports.\n *\n * Landscape devices have less vertical room than portrait phones, so these\n * compact values reserve only the visible bottom technique/control band while\n * still keeping the 3D arena above touch controls.\n *\n * @public\n */\nexport const LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX = {\n  /** Combat bottom band on landscape phones */\n  combatStandard: 120,\n  /** Combat bottom band on extra-small landscape phones */\n  combatExtraSmall: 110,\n  /** Training bottom band on landscape phones */\n  trainingStandard: 120,\n  /** Training bottom band on extra-small landscape phones */\n  trainingExtraSmall: 110,\n} as const;\n\n/**\n * Total bottom clearance to reserve in portrait mode = control/technique\n * bar height + footer height + the on-screen virtual controls band.\n *\n * @param controlsHeight - layout constant for technique/control bar\n * @param footerHeight - layout constant for footer\n * @param isExtraSmall - true when the viewport is < 380px wide\n * @param variant - \"combat\" or \"training\" (differs in control band size)\n *\n * @public\n */\nexport function portraitMobileControlsBottomBand(\n  controlsHeight: number,\n  footerHeight: number,\n  isExtraSmall: boolean,\n  variant: \"combat\" | \"training\",\n): number {\n  const band =\n    variant === \"combat\"\n      ? isExtraSmall\n        ? MOBILE_CONTROLS_RESERVED_HEIGHT_PX.combatExtraSmall\n        : MOBILE_CONTROLS_RESERVED_HEIGHT_PX.combatStandard\n      : isExtraSmall\n        ? MOBILE_CONTROLS_RESERVED_HEIGHT_PX.trainingExtraSmall\n        : MOBILE_CONTROLS_RESERVED_HEIGHT_PX.trainingStandard;\n\n  return controlsHeight + footerHeight + band;\n}\n\n/**\n * Bottom clearance for mobile landscape viewports.\n *\n * @param isExtraSmall - true when the viewport is < 380px wide\n * @param variant - \"combat\" or \"training\"\n *\n * @public\n */\nexport function landscapeMobileControlsBottomClearance(\n  isExtraSmall: boolean,\n  variant: \"combat\" | \"training\",\n): number {\n  if (variant === \"combat\") {\n    return isExtraSmall\n      ? LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX.combatExtraSmall\n      : LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX.combatStandard;\n  }\n\n  return isExtraSmall\n    ? LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX.trainingExtraSmall\n    : LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX.trainingStandard;\n}\n\n/**\n * Orientation-aware bottom clearance for mobile combat/training arenas.\n *\n * Keeps callers from duplicating portrait-vs-landscape clearance rules while\n * preserving the compact landscape band and the full portrait touch-control\n * reservation.\n *\n * @param controlsHeight - layout constant for technique/control bar\n * @param footerHeight - layout constant for footer\n * @param isExtraSmall - true when the viewport is < 380px wide\n * @param isPortrait - true for portrait orientation\n * @param variant - \"combat\" or \"training\"\n *\n * @public\n */\nexport function mobileControlsBottomClearance(\n  controlsHeight: number,\n  footerHeight: number,\n  isExtraSmall: boolean,\n  isPortrait: boolean,\n  variant: \"combat\" | \"training\",\n): number {\n  return isPortrait\n    ? portraitMobileControlsBottomBand(\n        controlsHeight,\n        footerHeight,\n        isExtraSmall,\n        variant,\n      )\n    : landscapeMobileControlsBottomClearance(isExtraSmall, variant);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAa,6BAA6B;;;;;;;;;;;AAY1C,IAAa,8BAA8B;;;;;;;;;;;;;;;;AAiB3C,IAAa,qCAAqC;;CAEhD,gBAAgB;;CAEhB,kBAAkB;;CAElB,kBAAkB;;CAElB,oBAAoB;CACrB;;;;;;;;;;AAWD,IAAa,gDAAgD;;CAE3D,gBAAgB;;CAEhB,kBAAkB;;CAElB,kBAAkB;;CAElB,oBAAoB;CACrB;;;;;;;;;;;;AAaD,SAAgB,iCACd,gBACA,cACA,cACA,SACQ;CACR,MAAM,OACJ,YAAY,WACR,eACE,mCAAmC,mBACnC,mCAAmC,iBACrC,eACE,mCAAmC,qBACnC,mCAAmC;CAE3C,OAAO,iBAAiB,eAAe;;;;;;;;;;AAWzC,SAAgB,uCACd,cACA,SACQ;CACR,IAAI,YAAY,UACd,OAAO,eACH,8CAA8C,mBAC9C,8CAA8C;CAGpD,OAAO,eACH,8CAA8C,qBAC9C,8CAA8C;;;;;;;;;;;;;;;;;AAkBpD,SAAgB,8BACd,gBACA,cACA,cACA,YACA,SACQ;CACR,OAAO,aACH,iCACE,gBACA,cACA,cACA,QACD,GACD,uCAAuC,cAAc,QAAQ"}
+{"version":3,"file":"responsiveOrientationConstants.js","names":[],"sources":["../../src/utils/responsiveOrientationConstants.ts"],"sourcesContent":["/**\n * Shared constants for orientation-aware responsive layout.\n *\n * Extracted so that `useCombatLayout` and `useTrainingLayout` compute the\n * same portrait \"bottom band\" and share a single source of truth for the\n * portrait-forcing hysteresis and the reserved control-column heights.\n *\n * 반응형 레이아웃 상수\n *\n * @module utils/responsiveOrientationConstants\n * @category Layout\n */\n\n/**\n * Hysteresis factor for portrait detection.\n *\n * A viewport is treated as portrait when `height > width × FACTOR`. The\n * factor is < 1.0 so near-square viewports (e.g. `1024×1000`) settle into\n * one orientation and don't flap on every pixel of resize.\n *\n */\nexport const PORTRAIT_HYSTERESIS_FACTOR = 0.9;\n\n/**\n * Maximum width at which a portrait viewport is force-promoted to the mobile\n * layout branch even if the user-agent reports a desktop browser. Matches the\n * tablet breakpoint used elsewhere in the codebase (1024px).\n *\n * This makes devtools emulation of a rotated phone/tablet behave identically\n * to a real device.\n *\n */\nexport const PORTRAIT_FORCE_MAX_WIDTH_PX = 1024;\n\n/**\n * Height reserved at the bottom of a mobile portrait viewport for the\n * on-screen virtual controls (D-Pad + action buttons rendered by\n * `MobileControlsWrapper`). Used as a conservative upper bound so the\n * 3D arena never ends up drawn behind the controls.\n *\n * Two values are provided so that very small phones (iPhone SE class,\n * width < 380) can still fit a playable arena.\n *\n * Combat uses the larger 200/160 band because its Mobile controls stack\n * D-Pad + action buttons + the persistent technique bar. Training uses\n * the smaller 180/140 band because its on-screen controls are lighter.\n *\n */\nexport const MOBILE_CONTROLS_RESERVED_HEIGHT_PX = {\n  /** D-Pad + action buttons + technique bar on combat (standard phones) */\n  combatStandard: 200,\n  /** Combat controls on extra-small phones (width < 380) */\n  combatExtraSmall: 160,\n  /** Training on-screen controls (standard phones) */\n  trainingStandard: 180,\n  /** Training on-screen controls (extra-small phones) */\n  trainingExtraSmall: 140,\n} as const;\n\n/**\n * Height reserved at the bottom of mobile landscape viewports.\n *\n * Landscape devices have less vertical room than portrait phones, so these\n * compact values reserve only the visible bottom technique/control band while\n * still keeping the 3D arena above touch controls.\n *\n */\nexport const LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX = {\n  /** Combat bottom band on landscape phones */\n  combatStandard: 120,\n  /** Combat bottom band on extra-small landscape phones */\n  combatExtraSmall: 110,\n  /** Training bottom band on landscape phones */\n  trainingStandard: 120,\n  /** Training bottom band on extra-small landscape phones */\n  trainingExtraSmall: 110,\n} as const;\n\n/**\n * Total bottom clearance to reserve in portrait mode = control/technique\n * bar height + footer height + the on-screen virtual controls band.\n *\n * @param controlsHeight - layout constant for technique/control bar\n * @param footerHeight - layout constant for footer\n * @param isExtraSmall - true when the viewport is < 380px wide\n * @param variant - \"combat\" or \"training\" (differs in control band size)\n *\n */\nexport function portraitMobileControlsBottomBand(\n  controlsHeight: number,\n  footerHeight: number,\n  isExtraSmall: boolean,\n  variant: \"combat\" | \"training\",\n): number {\n  const band =\n    variant === \"combat\"\n      ? isExtraSmall\n        ? MOBILE_CONTROLS_RESERVED_HEIGHT_PX.combatExtraSmall\n        : MOBILE_CONTROLS_RESERVED_HEIGHT_PX.combatStandard\n      : isExtraSmall\n        ? MOBILE_CONTROLS_RESERVED_HEIGHT_PX.trainingExtraSmall\n        : MOBILE_CONTROLS_RESERVED_HEIGHT_PX.trainingStandard;\n\n  return controlsHeight + footerHeight + band;\n}\n\n/**\n * Bottom clearance for mobile landscape viewports.\n *\n * @param isExtraSmall - true when the viewport is < 380px wide\n * @param variant - \"combat\" or \"training\"\n *\n */\nexport function landscapeMobileControlsBottomClearance(\n  isExtraSmall: boolean,\n  variant: \"combat\" | \"training\",\n): number {\n  if (variant === \"combat\") {\n    return isExtraSmall\n      ? LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX.combatExtraSmall\n      : LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX.combatStandard;\n  }\n\n  return isExtraSmall\n    ? LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX.trainingExtraSmall\n    : LANDSCAPE_MOBILE_CONTROLS_BOTTOM_CLEARANCE_PX.trainingStandard;\n}\n\n/**\n * Orientation-aware bottom clearance for mobile combat/training arenas.\n *\n * Keeps callers from duplicating portrait-vs-landscape clearance rules while\n * preserving the compact landscape band and the full portrait touch-control\n * reservation.\n *\n * @param controlsHeight - layout constant for technique/control bar\n * @param footerHeight - layout constant for footer\n * @param isExtraSmall - true when the viewport is < 380px wide\n * @param isPortrait - true for portrait orientation\n * @param variant - \"combat\" or \"training\"\n *\n */\nexport function mobileControlsBottomClearance(\n  controlsHeight: number,\n  footerHeight: number,\n  isExtraSmall: boolean,\n  isPortrait: boolean,\n  variant: \"combat\" | \"training\",\n): number {\n  return isPortrait\n    ? portraitMobileControlsBottomBand(\n        controlsHeight,\n        footerHeight,\n        isExtraSmall,\n        variant,\n      )\n    : landscapeMobileControlsBottomClearance(isExtraSmall, variant);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,IAAa,6BAA6B;;;;;;;;;;AAW1C,IAAa,8BAA8B;;;;;;;;;;;;;;;AAgB3C,IAAa,qCAAqC;;CAEhD,gBAAgB;;CAEhB,kBAAkB;;CAElB,kBAAkB;;CAElB,oBAAoB;CACrB;;;;;;;;;AAUD,IAAa,gDAAgD;;CAE3D,gBAAgB;;CAEhB,kBAAkB;;CAElB,kBAAkB;;CAElB,oBAAoB;CACrB;;;;;;;;;;;AAYD,SAAgB,iCACd,gBACA,cACA,cACA,SACQ;CACR,MAAM,OACJ,YAAY,WACR,eACE,mCAAmC,mBACnC,mCAAmC,iBACrC,eACE,mCAAmC,qBACnC,mCAAmC;CAE3C,OAAO,iBAAiB,eAAe;;;;;;;;;AAUzC,SAAgB,uCACd,cACA,SACQ;CACR,IAAI,YAAY,UACd,OAAO,eACH,8CAA8C,mBAC9C,8CAA8C;CAGpD,OAAO,eACH,8CAA8C,qBAC9C,8CAA8C;;;;;;;;;;;;;;;;AAiBpD,SAAgB,8BACd,gBACA,cACA,cACA,YACA,SACQ;CACR,OAAO,aACH,iCACE,gBACA,cACA,cACA,QACD,GACD,uCAAuC,cAAc,QAAQ"}

package/lib/utils/safeAreaUtils.d.ts

@@ -29,7 +29,6 @@ export type SafeAreaEdge = "top" | "bottom" | "left" | "right";
  * getSafeAreaInset('bottom', 20); // "env(safe-area-inset-bottom, 20px)"
  * ```
  *
- * @public
  * @korean 안전영역삽입얻기
  */
 export declare function getSafeAreaInset(edge: SafeAreaEdge, fallback?: number): string;
@@ -50,7 +49,6 @@ export declare function getSafeAreaInset(edge: SafeAreaEdge, fallback?: number):
  * // }
  * ```
  *
- * @public
  * @korean 안전영역패딩얻기
  */
 export declare function getSafeAreaPadding(edges: readonly SafeAreaEdge[], additionalPadding?: number): Partial<Record<`padding${Capitalize<SafeAreaEdge>}`, string>>;
@@ -68,7 +66,6 @@ export declare function getSafeAreaPadding(edges: readonly SafeAreaEdge[], addit
  * // "calc(20px + env(safe-area-inset-bottom, 34px))"
  * ```
  *
- * @public
  * @korean 안전영역위치얻기
  */
 export declare function getSafeAreaPosition(edge: SafeAreaEdge, baseOffset?: number): string;
@@ -85,7 +82,6 @@ export declare function getSafeAreaPosition(edge: SafeAreaEdge, baseOffset?: num
  * // "calc(100vh - env(safe-area-inset-top, 44px) - env(safe-area-inset-bottom, 34px))"
  * ```
  *
- * @public
  * @korean 안전영역높이얻기
  */
 export declare function getSafeAreaHeight(excludeEdges: readonly SafeAreaEdge[]): string;
@@ -102,7 +98,6 @@ export declare function getSafeAreaHeight(excludeEdges: readonly SafeAreaEdge[])
  * }
  * ```
  *
- * @public
  * @korean 안전영역삽입여부
  */
 export declare function hasSafeAreaInsets(): boolean;
@@ -122,7 +117,6 @@ export declare function hasSafeAreaInsets(): boolean;
  * });
  * ```
  *
- * @public
  * @korean 안전영역스타일얻기
  */
 export declare function getSafeAreaStyles(options: {

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

@@ -1 +1 @@
-{"version":3,"file":"safeAreaUtils.d.ts","sourceRoot":"","sources":["../../src/utils/safeAreaUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH;;;;;GAKG;AACH,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/D;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,YAAY,EAClB,QAAQ,CAAC,EAAE,MAAM,GAChB,MAAM,CAYR;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,SAAS,YAAY,EAAE,EAC9B,iBAAiB,SAAI,GACpB,OAAO,CAAC,MAAM,CAAC,UAAU,UAAU,CAAC,YAAY,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,CAa/D;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,YAAY,EAClB,UAAU,SAAI,GACb,MAAM,CAER;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,SAAS,YAAY,EAAE,GACpC,MAAM,CAGR;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,IAAI,OAAO,CAgB3C;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE;IACzC,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAChD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;CACrD,GAAG,KAAK,CAAC,aAAa,CAStB"}
+{"version":3,"file":"safeAreaUtils.d.ts","sourceRoot":"","sources":["../../src/utils/safeAreaUtils.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAIH;;;;;GAKG;AACH,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/D;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,YAAY,EAClB,QAAQ,CAAC,EAAE,MAAM,GAChB,MAAM,CAYR;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,SAAS,YAAY,EAAE,EAC9B,iBAAiB,SAAI,GACpB,OAAO,CAAC,MAAM,CAAC,UAAU,UAAU,CAAC,YAAY,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC,CAa/D;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,YAAY,EAClB,UAAU,SAAI,GACb,MAAM,CAER;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAC/B,YAAY,EAAE,SAAS,YAAY,EAAE,GACpC,MAAM,CAGR;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,IAAI,OAAO,CAgB3C;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,EAAE;IACzC,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAChD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;CACrD,GAAG,KAAK,CAAC,aAAa,CAStB"}

package/lib/utils/safeAreaUtils.js

@@ -24,7 +24,6 @@ import { SAFE_AREA_INSETS } from "../types/constants/ui.js";
 * getSafeAreaInset('bottom', 20); // "env(safe-area-inset-bottom, 20px)"
 * ```
 * 
-* @public
 * @korean 안전영역삽입얻기
 */
 function getSafeAreaInset(edge, fallback) {
@@ -48,7 +47,6 @@ function getSafeAreaInset(edge, fallback) {
 * // }
 * ```
 * 
-* @public
 * @korean 안전영역패딩얻기
 */
 function getSafeAreaPadding(edges, additionalPadding = 0) {

package/lib/utils/safeAreaUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"safeAreaUtils.js","names":[],"sources":["../../src/utils/safeAreaUtils.ts"],"sourcesContent":["/**\n * Safe area utilities for handling notched devices\n * \n * Provides CSS safe area inset helpers for iOS and Android devices\n * with notches, home indicators, and other screen intrusions.\n * \n * @module utils/safeAreaUtils\n * @category UI Utilities\n * @korean 안전영역유틸리티\n */\n\nimport { SAFE_AREA_INSETS } from \"../types/constants/ui\";\n\n/**\n * Safe area edge types\n * \n * @category Safe Area\n * @korean 안전영역가장자리타입\n */\nexport type SafeAreaEdge = \"top\" | \"bottom\" | \"left\" | \"right\";\n\n/**\n * Get CSS safe area inset with fallback\n * Returns CSS `env()` with fallback to constant values\n * \n * @param edge - Which edge to get inset for\n * @param fallback - Optional custom fallback value in pixels\n * @returns CSS string with env() and fallback\n * \n * @example\n * ```typescript\n * getSafeAreaInset('top'); // \"env(safe-area-inset-top, 44px)\"\n * getSafeAreaInset('bottom', 20); // \"env(safe-area-inset-bottom, 20px)\"\n * ```\n * \n * @public\n * @korean 안전영역삽입얻기\n */\nexport function getSafeAreaInset(\n  edge: SafeAreaEdge,\n  fallback?: number\n): string {\n  const defaultFallback =\n    edge === \"top\"\n      ? SAFE_AREA_INSETS.TOP\n      : edge === \"bottom\"\n      ? SAFE_AREA_INSETS.BOTTOM\n      : edge === \"left\"\n      ? SAFE_AREA_INSETS.LEFT\n      : SAFE_AREA_INSETS.RIGHT;\n\n  const fallbackValue = fallback ?? defaultFallback;\n  return `env(safe-area-inset-${edge}, ${fallbackValue}px)`;\n}\n\n/**\n * Get safe area padding for a container\n * Returns CSS padding object with safe area support\n * \n * @param edges - Which edges to apply safe area padding\n * @param additionalPadding - Additional padding to add (in pixels)\n * @returns CSS padding object\n * \n * @example\n * ```typescript\n * getSafeAreaPadding(['top', 'bottom'], 16);\n * // {\n * //   paddingTop: \"max(16px, env(safe-area-inset-top))\",\n * //   paddingBottom: \"max(16px, env(safe-area-inset-bottom))\"\n * // }\n * ```\n * \n * @public\n * @korean 안전영역패딩얻기\n */\nexport function getSafeAreaPadding(\n  edges: readonly SafeAreaEdge[],\n  additionalPadding = 0\n): Partial<Record<`padding${Capitalize<SafeAreaEdge>}`, string>> {\n  const result: Partial<Record<`padding${Capitalize<SafeAreaEdge>}`, string>> =\n    {};\n\n  for (const edge of edges) {\n    const capitalizedEdge =\n      (edge.charAt(0).toUpperCase() + edge.slice(1)) as Capitalize<SafeAreaEdge>;\n    const key = `padding${capitalizedEdge}` as const;\n\n    result[key] = `max(${additionalPadding}px, ${getSafeAreaInset(edge)})`;\n  }\n\n  return result;\n}\n\n/**\n * Get safe area aware positioning styles\n * Useful for fixed/absolute positioned elements\n * \n * @param edge - Which edge to position from\n * @param baseOffset - Base offset in pixels\n * @returns CSS positioning string\n * \n * @example\n * ```typescript\n * getSafeAreaPosition('bottom', 20);\n * // \"calc(20px + env(safe-area-inset-bottom, 34px))\"\n * ```\n * \n * @public\n * @korean 안전영역위치얻기\n */\nexport function getSafeAreaPosition(\n  edge: SafeAreaEdge,\n  baseOffset = 0\n): string {\n  return `calc(${baseOffset}px + ${getSafeAreaInset(edge)})`;\n}\n\n/**\n * Get safe area aware height calculation\n * Useful for full-height containers\n * \n * @param excludeEdges - Which edges to exclude from height\n * @returns CSS calc() string for height\n * \n * @example\n * ```typescript\n * getSafeAreaHeight(['top', 'bottom']);\n * // \"calc(100vh - env(safe-area-inset-top, 44px) - env(safe-area-inset-bottom, 34px))\"\n * ```\n * \n * @public\n * @korean 안전영역높이얻기\n */\nexport function getSafeAreaHeight(\n  excludeEdges: readonly SafeAreaEdge[]\n): string {\n  const insets = excludeEdges.map((edge) => getSafeAreaInset(edge)).join(\" - \");\n  return `calc(100vh - ${insets})`;\n}\n\n/**\n * Check if device likely has safe area insets\n * Uses user agent detection (not perfect but useful)\n * \n * @returns Whether device likely has safe area insets\n * \n * @example\n * ```typescript\n * if (hasSafeAreaInsets()) {\n *   // Apply safe area styles\n * }\n * ```\n * \n * @public\n * @korean 안전영역삽입여부\n */\nexport function hasSafeAreaInsets(): boolean {\n  // Check if CSS env() is supported\n  if (typeof CSS !== \"undefined\" && CSS.supports) {\n    return CSS.supports(\"padding-top\", \"env(safe-area-inset-top)\");\n  }\n\n  // Fallback: Check for iPhone X+ user agents\n  const ua = navigator.userAgent;\n  return (\n    /iPhone/.test(ua) &&\n    ((screen.width === 375 && screen.height === 812) || // iPhone X, XS, 11 Pro\n     (screen.width === 414 && screen.height === 896) || // iPhone XR, XS Max, 11, 11 Pro Max\n     (screen.width === 390 && screen.height === 844) || // iPhone 12, 12 Pro, 13, 13 Pro, 14\n     (screen.width === 393 && screen.height === 852) || // iPhone 14 Pro\n     (screen.width === 428 && screen.height === 926)) // iPhone 12/13/14 Pro Max\n  );\n}\n\n/**\n * Get comprehensive safe area styles for a container\n * Combines padding and positioning for complete safe area support\n * \n * @param options - Configuration options\n * @returns React CSSProperties object\n * \n * @example\n * ```typescript\n * const styles = getSafeAreaStyles({\n *   applyPadding: ['top', 'bottom'],\n *   additionalPadding: 16,\n *   position: 'fixed'\n * });\n * ```\n * \n * @public\n * @korean 안전영역스타일얻기\n */\nexport function getSafeAreaStyles(options: {\n  readonly applyPadding?: readonly SafeAreaEdge[];\n  readonly additionalPadding?: number;\n  readonly position?: \"fixed\" | \"absolute\" | \"sticky\";\n}): React.CSSProperties {\n  const { applyPadding = [], additionalPadding = 0, position } = options;\n\n  const paddingStyles = getSafeAreaPadding(applyPadding, additionalPadding);\n\n  return {\n    ...paddingStyles,\n    ...(position && { position }),\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,iBACd,MACA,UACQ;CACR,MAAM,kBACJ,SAAS,QACL,iBAAiB,MACjB,SAAS,WACT,iBAAiB,SACjB,SAAS,SACT,iBAAiB,OACjB,iBAAiB;CAGvB,OAAO,uBAAuB,KAAK,IADb,YAAY,gBACmB;;;;;;;;;;;;;;;;;;;;;;AAuBvD,SAAgB,mBACd,OACA,oBAAoB,GAC2C;CAC/D,MAAM,SACJ,EAAE;CAEJ,KAAK,MAAM,QAAQ,OAAO;EAGxB,MAAM,MAAM,UADT,KAAK,OAAO,EAAE,CAAC,aAAa,GAAG,KAAK,MAAM,EAAE;EAG/C,OAAO,OAAO,OAAO,kBAAkB,MAAM,iBAAiB,KAAK,CAAC;;CAGtE,OAAO"}
+{"version":3,"file":"safeAreaUtils.js","names":[],"sources":["../../src/utils/safeAreaUtils.ts"],"sourcesContent":["/**\n * Safe area utilities for handling notched devices\n * \n * Provides CSS safe area inset helpers for iOS and Android devices\n * with notches, home indicators, and other screen intrusions.\n * \n * @module utils/safeAreaUtils\n * @category UI Utilities\n * @korean 안전영역유틸리티\n */\n\nimport { SAFE_AREA_INSETS } from \"../types/constants/ui\";\n\n/**\n * Safe area edge types\n * \n * @category Safe Area\n * @korean 안전영역가장자리타입\n */\nexport type SafeAreaEdge = \"top\" | \"bottom\" | \"left\" | \"right\";\n\n/**\n * Get CSS safe area inset with fallback\n * Returns CSS `env()` with fallback to constant values\n * \n * @param edge - Which edge to get inset for\n * @param fallback - Optional custom fallback value in pixels\n * @returns CSS string with env() and fallback\n * \n * @example\n * ```typescript\n * getSafeAreaInset('top'); // \"env(safe-area-inset-top, 44px)\"\n * getSafeAreaInset('bottom', 20); // \"env(safe-area-inset-bottom, 20px)\"\n * ```\n * \n * @korean 안전영역삽입얻기\n */\nexport function getSafeAreaInset(\n  edge: SafeAreaEdge,\n  fallback?: number\n): string {\n  const defaultFallback =\n    edge === \"top\"\n      ? SAFE_AREA_INSETS.TOP\n      : edge === \"bottom\"\n      ? SAFE_AREA_INSETS.BOTTOM\n      : edge === \"left\"\n      ? SAFE_AREA_INSETS.LEFT\n      : SAFE_AREA_INSETS.RIGHT;\n\n  const fallbackValue = fallback ?? defaultFallback;\n  return `env(safe-area-inset-${edge}, ${fallbackValue}px)`;\n}\n\n/**\n * Get safe area padding for a container\n * Returns CSS padding object with safe area support\n * \n * @param edges - Which edges to apply safe area padding\n * @param additionalPadding - Additional padding to add (in pixels)\n * @returns CSS padding object\n * \n * @example\n * ```typescript\n * getSafeAreaPadding(['top', 'bottom'], 16);\n * // {\n * //   paddingTop: \"max(16px, env(safe-area-inset-top))\",\n * //   paddingBottom: \"max(16px, env(safe-area-inset-bottom))\"\n * // }\n * ```\n * \n * @korean 안전영역패딩얻기\n */\nexport function getSafeAreaPadding(\n  edges: readonly SafeAreaEdge[],\n  additionalPadding = 0\n): Partial<Record<`padding${Capitalize<SafeAreaEdge>}`, string>> {\n  const result: Partial<Record<`padding${Capitalize<SafeAreaEdge>}`, string>> =\n    {};\n\n  for (const edge of edges) {\n    const capitalizedEdge =\n      (edge.charAt(0).toUpperCase() + edge.slice(1)) as Capitalize<SafeAreaEdge>;\n    const key = `padding${capitalizedEdge}` as const;\n\n    result[key] = `max(${additionalPadding}px, ${getSafeAreaInset(edge)})`;\n  }\n\n  return result;\n}\n\n/**\n * Get safe area aware positioning styles\n * Useful for fixed/absolute positioned elements\n * \n * @param edge - Which edge to position from\n * @param baseOffset - Base offset in pixels\n * @returns CSS positioning string\n * \n * @example\n * ```typescript\n * getSafeAreaPosition('bottom', 20);\n * // \"calc(20px + env(safe-area-inset-bottom, 34px))\"\n * ```\n * \n * @korean 안전영역위치얻기\n */\nexport function getSafeAreaPosition(\n  edge: SafeAreaEdge,\n  baseOffset = 0\n): string {\n  return `calc(${baseOffset}px + ${getSafeAreaInset(edge)})`;\n}\n\n/**\n * Get safe area aware height calculation\n * Useful for full-height containers\n * \n * @param excludeEdges - Which edges to exclude from height\n * @returns CSS calc() string for height\n * \n * @example\n * ```typescript\n * getSafeAreaHeight(['top', 'bottom']);\n * // \"calc(100vh - env(safe-area-inset-top, 44px) - env(safe-area-inset-bottom, 34px))\"\n * ```\n * \n * @korean 안전영역높이얻기\n */\nexport function getSafeAreaHeight(\n  excludeEdges: readonly SafeAreaEdge[]\n): string {\n  const insets = excludeEdges.map((edge) => getSafeAreaInset(edge)).join(\" - \");\n  return `calc(100vh - ${insets})`;\n}\n\n/**\n * Check if device likely has safe area insets\n * Uses user agent detection (not perfect but useful)\n * \n * @returns Whether device likely has safe area insets\n * \n * @example\n * ```typescript\n * if (hasSafeAreaInsets()) {\n *   // Apply safe area styles\n * }\n * ```\n * \n * @korean 안전영역삽입여부\n */\nexport function hasSafeAreaInsets(): boolean {\n  // Check if CSS env() is supported\n  if (typeof CSS !== \"undefined\" && CSS.supports) {\n    return CSS.supports(\"padding-top\", \"env(safe-area-inset-top)\");\n  }\n\n  // Fallback: Check for iPhone X+ user agents\n  const ua = navigator.userAgent;\n  return (\n    /iPhone/.test(ua) &&\n    ((screen.width === 375 && screen.height === 812) || // iPhone X, XS, 11 Pro\n     (screen.width === 414 && screen.height === 896) || // iPhone XR, XS Max, 11, 11 Pro Max\n     (screen.width === 390 && screen.height === 844) || // iPhone 12, 12 Pro, 13, 13 Pro, 14\n     (screen.width === 393 && screen.height === 852) || // iPhone 14 Pro\n     (screen.width === 428 && screen.height === 926)) // iPhone 12/13/14 Pro Max\n  );\n}\n\n/**\n * Get comprehensive safe area styles for a container\n * Combines padding and positioning for complete safe area support\n * \n * @param options - Configuration options\n * @returns React CSSProperties object\n * \n * @example\n * ```typescript\n * const styles = getSafeAreaStyles({\n *   applyPadding: ['top', 'bottom'],\n *   additionalPadding: 16,\n *   position: 'fixed'\n * });\n * ```\n * \n * @korean 안전영역스타일얻기\n */\nexport function getSafeAreaStyles(options: {\n  readonly applyPadding?: readonly SafeAreaEdge[];\n  readonly additionalPadding?: number;\n  readonly position?: \"fixed\" | \"absolute\" | \"sticky\";\n}): React.CSSProperties {\n  const { applyPadding = [], additionalPadding = 0, position } = options;\n\n  const paddingStyles = getSafeAreaPadding(applyPadding, additionalPadding);\n\n  return {\n    ...paddingStyles,\n    ...(position && { position }),\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAgB,iBACd,MACA,UACQ;CACR,MAAM,kBACJ,SAAS,QACL,iBAAiB,MACjB,SAAS,WACT,iBAAiB,SACjB,SAAS,SACT,iBAAiB,OACjB,iBAAiB;CAGvB,OAAO,uBAAuB,KAAK,IADb,YAAY,gBACmB;;;;;;;;;;;;;;;;;;;;;AAsBvD,SAAgB,mBACd,OACA,oBAAoB,GAC2C;CAC/D,MAAM,SACJ,EAAE;CAEJ,KAAK,MAAM,QAAQ,OAAO;EAGxB,MAAM,MAAM,UADT,KAAK,OAAO,EAAE,CAAC,aAAa,GAAG,KAAK,MAAM,EAAE;EAG/C,OAAO,OAAO,OAAO,kBAAkB,MAAM,iBAAiB,KAAK,CAAC;;CAGtE,OAAO"}

package/lib/utils/sharedPhysicsConfig.d.ts

@@ -27,7 +27,6 @@ import { type ArenaConfiguration } from "./arenaWorldDimensions";
  *
  * **Korean**: 카메라 설정
  *
- * @public
  */
 export interface CameraConfiguration {
     /** Field of view in degrees */
@@ -47,7 +46,6 @@ export interface CameraConfiguration {
  * Includes all parameters needed to ensure consistent physics
  * behavior across different screens and device types.
  *
- * @public
  */
 export interface PhysicsConfiguration {
     /** Arena configuration with pixel and meter dimensions */
@@ -84,7 +82,6 @@ export interface PhysicsConfiguration {
  * // { fov: 60, position: [0, 8, 12], near: 0.1, far: 1000 }
  * ```
  *
- * @public
  */
 export declare function createCameraConfig(isMobile: boolean): CameraConfiguration;
 /**
@@ -119,7 +116,6 @@ export declare function createCameraConfig(isMobile: boolean): CameraConfigurati
  * trainingPhysics.pixelsPerMeter === combatPhysics.pixelsPerMeter; // true
  * ```
  *
- * @public
  */
 export declare function createPhysicsConfig(screenWidth: number, screenHeight: number, topOffset: number, bottomOffset: number, isMobile: boolean): PhysicsConfiguration;
 //# sourceMappingURL=sharedPhysicsConfig.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"sharedPhysicsConfig.d.ts","sourceRoot":"","sources":["../../src/utils/sharedPhysicsConfig.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAGL,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wBAAwB,CAAC;AAEhC;;;;;;GAMG;AACH,MAAM,WAAW,mBAAmB;IAClC,+BAA+B;IAC/B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACrD,0BAA0B;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,yBAAyB;IACzB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,oBAAoB;IACnC,0DAA0D;IAC1D,QAAQ,CAAC,WAAW,EAAE,kBAAkB,CAAC;IACzC,sDAAsD;IACtD,QAAQ,CAAC,YAAY,EAAE,mBAAmB,CAAC;IAC3C,sDAAsD;IACtD,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,wCAAwC;IACxC,QAAQ,CAAC,oBAAoB,EAAE,MAAM,CAAC;IACtC,8BAA8B;IAC9B,QAAQ,CAAC,YAAY,EAAE,OAAO,oBAAoB,CAAC;IACnD,oDAAoD;IACpD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,mBAAmB,CAgBzE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,OAAO,GAChB,oBAAoB,CAoBtB"}
+{"version":3,"file":"sharedPhysicsConfig.d.ts","sourceRoot":"","sources":["../../src/utils/sharedPhysicsConfig.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAGL,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,wBAAwB,CAAC;AAEhC;;;;;GAKG;AACH,MAAM,WAAW,mBAAmB;IAClC,+BAA+B;IAC/B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,0CAA0C;IAC1C,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IACrD,0BAA0B;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,yBAAyB;IACzB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,oBAAoB;IACnC,0DAA0D;IAC1D,QAAQ,CAAC,WAAW,EAAE,kBAAkB,CAAC;IACzC,sDAAsD;IACtD,QAAQ,CAAC,YAAY,EAAE,mBAAmB,CAAC;IAC3C,sDAAsD;IACtD,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,wCAAwC;IACxC,QAAQ,CAAC,oBAAoB,EAAE,MAAM,CAAC;IACtC,8BAA8B;IAC9B,QAAQ,CAAC,YAAY,EAAE,OAAO,oBAAoB,CAAC;IACnD,oDAAoD;IACpD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,mBAAmB,CAgBzE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,mBAAmB,CACjC,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,EACpB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,MAAM,EACpB,QAAQ,EAAE,OAAO,GAChB,oBAAoB,CAoBtB"}

package/lib/utils/sharedPhysicsConfig.js

@@ -44,7 +44,6 @@ import { calculateArenaConfiguration } from "./arenaWorldDimensions.js";
 * // { fov: 60, position: [0, 8, 12], near: 0.1, far: 1000 }
 * ```
 *
-* @public
 */
 function createCameraConfig(isMobile) {
 	if (isMobile) return {
@@ -100,7 +99,6 @@ function createCameraConfig(isMobile) {
 * trainingPhysics.pixelsPerMeter === combatPhysics.pixelsPerMeter; // true
 * ```
 *
-* @public
 */
 function createPhysicsConfig(screenWidth, screenHeight, topOffset, bottomOffset, isMobile) {
 	const arenaConfig = calculateArenaConfiguration(screenWidth, screenHeight, topOffset, bottomOffset);

package/lib/utils/sharedPhysicsConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"sharedPhysicsConfig.js","names":[],"sources":["../../src/utils/sharedPhysicsConfig.ts"],"sourcesContent":["/**\n * Shared physics configuration for Black Trigram screens.\n *\n * **Korean**: 공유 물리 설정\n *\n * This module provides shared physics configuration utilities to ensure\n * consistent physics behavior, coordinate systems, and camera setup across\n * TrainingScreen3D and CombatScreen3D.\n *\n * ## Synchronization Guarantees\n *\n * All screens using these utilities will have:\n * - Identical camera FOV and positioning for same device types\n * - Consistent arena bounds calculations\n * - Same physics constants (acceleration, stamina regen, etc.)\n * - Unified coordinate system (meter-based)\n * - Matching movement speed and range calculations\n *\n * @module utils/sharedPhysicsConfig\n * @category Physics\n * @korean 공유물리설정\n */\n\nimport {\n  BASE_STAMINA_REGEN_RATE,\n  BASE_MOVEMENT_ACCELERATION,\n  COMBAT_RANGES_METERS,\n} from \"@/types/physicsConstants\";\nimport {\n  calculateArenaConfiguration,\n  type ArenaConfiguration,\n} from \"./arenaWorldDimensions\";\n\n/**\n * Camera configuration for 3D rendering.\n *\n * **Korean**: 카메라 설정\n *\n * @public\n */\nexport interface CameraConfiguration {\n  /** Field of view in degrees */\n  readonly fov: number;\n  /** Camera position [x, y, z] in meters */\n  readonly position: readonly [number, number, number];\n  /** Near clipping plane */\n  readonly near: number;\n  /** Far clipping plane */\n  readonly far: number;\n}\n\n/**\n * Complete physics configuration for a game screen.\n *\n * **Korean**: 물리 설정\n *\n * Includes all parameters needed to ensure consistent physics\n * behavior across different screens and device types.\n *\n * @public\n */\nexport interface PhysicsConfiguration {\n  /** Arena configuration with pixel and meter dimensions */\n  readonly arenaConfig: ArenaConfiguration;\n  /** Camera configuration for consistent perspective */\n  readonly cameraConfig: CameraConfiguration;\n  /** Base stamina regeneration rate (stamina/second) */\n  readonly staminaRegenRate: number;\n  /** Base movement acceleration (m/s²) */\n  readonly movementAcceleration: number;\n  /** Combat ranges in meters */\n  readonly combatRanges: typeof COMBAT_RANGES_METERS;\n  /** Pixels per meter ratio for this configuration */\n  readonly pixelsPerMeter: number;\n}\n\n/**\n * Create camera configuration based on device type.\n *\n * Mobile devices get a tighter FOV and closer camera position\n * for better framing of the smaller arena. Desktop gets a wider\n * FOV and further camera for full arena view.\n *\n * **Korean**: 카메라 설정 생성\n *\n * @param isMobile - Whether the device is mobile\n * @returns Camera configuration for device type\n *\n * @example\n * ```typescript\n * const mobile = createCameraConfig(true);\n * // { fov: 55, position: [0, 6, 10], near: 0.1, far: 1000 }\n *\n * const desktop = createCameraConfig(false);\n * // { fov: 60, position: [0, 8, 12], near: 0.1, far: 1000 }\n * ```\n *\n * @public\n */\nexport function createCameraConfig(isMobile: boolean): CameraConfiguration {\n  if (isMobile) {\n    return {\n      fov: 55, // Tighter FOV for smaller mobile arena\n      position: [0, 6, 10], // Closer camera\n      near: 0.1,\n      far: 1000,\n    };\n  }\n\n  return {\n    fov: 60, // Standard FOV for desktop\n    position: [0, 8, 12], // Further back for full view\n    near: 0.1,\n    far: 1000,\n  };\n}\n\n/**\n * Create complete physics configuration for a screen.\n *\n * This is the primary function for setting up physics in both\n * TrainingScreen3D and CombatScreen3D. It ensures consistent\n * physics behavior by using the same calculations and constants.\n *\n * **Korean**: 물리 설정 생성\n *\n * @param screenWidth - Screen width in pixels\n * @param screenHeight - Screen height in pixels\n * @param topOffset - Pixels reserved at top (HUD, headers)\n * @param bottomOffset - Pixels reserved at bottom (controls, footer)\n * @param isMobile - Whether the device is mobile\n * @returns Complete physics configuration\n *\n * @example\n * ```typescript\n * // Training screen\n * const trainingPhysics = createPhysicsConfig(\n *   1920, 1080, 60, 100, false\n * );\n *\n * // Combat screen\n * const combatPhysics = createPhysicsConfig(\n *   1920, 1080, 60, 100, false\n * );\n *\n * // Both have identical physics configuration\n * trainingPhysics.pixelsPerMeter === combatPhysics.pixelsPerMeter; // true\n * ```\n *\n * @public\n */\nexport function createPhysicsConfig(\n  screenWidth: number,\n  screenHeight: number,\n  topOffset: number,\n  bottomOffset: number,\n  isMobile: boolean,\n): PhysicsConfiguration {\n  // Calculate arena dimensions (same for both screens)\n  const arenaConfig = calculateArenaConfiguration(\n    screenWidth,\n    screenHeight,\n    topOffset,\n    bottomOffset,\n  );\n\n  // Create camera config based on device type\n  const cameraConfig = createCameraConfig(isMobile);\n\n  return {\n    arenaConfig,\n    cameraConfig,\n    staminaRegenRate: BASE_STAMINA_REGEN_RATE,\n    movementAcceleration: BASE_MOVEMENT_ACCELERATION,\n    combatRanges: COMBAT_RANGES_METERS,\n    pixelsPerMeter: arenaConfig.pixelsPerMeter,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA,SAAgB,mBAAmB,UAAwC;CACzE,IAAI,UACF,OAAO;EACL,KAAK;EACL,UAAU;GAAC;GAAG;GAAG;GAAG;EACpB,MAAM;EACN,KAAK;EACN;CAGH,OAAO;EACL,KAAK;EACL,UAAU;GAAC;GAAG;GAAG;GAAG;EACpB,MAAM;EACN,KAAK;EACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCH,SAAgB,oBACd,aACA,cACA,WACA,cACA,UACsB;CAEtB,MAAM,cAAc,4BAClB,aACA,cACA,WACA,aACD;CAKD,OAAO;EACL;EACA,cAJmB,mBAAmB,SAItC;EACA,kBAAA;EACA,sBAAA;EACA,cAAc;EACd,gBAAgB,YAAY;EAC7B"}
+{"version":3,"file":"sharedPhysicsConfig.js","names":[],"sources":["../../src/utils/sharedPhysicsConfig.ts"],"sourcesContent":["/**\n * Shared physics configuration for Black Trigram screens.\n *\n * **Korean**: 공유 물리 설정\n *\n * This module provides shared physics configuration utilities to ensure\n * consistent physics behavior, coordinate systems, and camera setup across\n * TrainingScreen3D and CombatScreen3D.\n *\n * ## Synchronization Guarantees\n *\n * All screens using these utilities will have:\n * - Identical camera FOV and positioning for same device types\n * - Consistent arena bounds calculations\n * - Same physics constants (acceleration, stamina regen, etc.)\n * - Unified coordinate system (meter-based)\n * - Matching movement speed and range calculations\n *\n * @module utils/sharedPhysicsConfig\n * @category Physics\n * @korean 공유물리설정\n */\n\nimport {\n  BASE_STAMINA_REGEN_RATE,\n  BASE_MOVEMENT_ACCELERATION,\n  COMBAT_RANGES_METERS,\n} from \"@/types/physicsConstants\";\nimport {\n  calculateArenaConfiguration,\n  type ArenaConfiguration,\n} from \"./arenaWorldDimensions\";\n\n/**\n * Camera configuration for 3D rendering.\n *\n * **Korean**: 카메라 설정\n *\n */\nexport interface CameraConfiguration {\n  /** Field of view in degrees */\n  readonly fov: number;\n  /** Camera position [x, y, z] in meters */\n  readonly position: readonly [number, number, number];\n  /** Near clipping plane */\n  readonly near: number;\n  /** Far clipping plane */\n  readonly far: number;\n}\n\n/**\n * Complete physics configuration for a game screen.\n *\n * **Korean**: 물리 설정\n *\n * Includes all parameters needed to ensure consistent physics\n * behavior across different screens and device types.\n *\n */\nexport interface PhysicsConfiguration {\n  /** Arena configuration with pixel and meter dimensions */\n  readonly arenaConfig: ArenaConfiguration;\n  /** Camera configuration for consistent perspective */\n  readonly cameraConfig: CameraConfiguration;\n  /** Base stamina regeneration rate (stamina/second) */\n  readonly staminaRegenRate: number;\n  /** Base movement acceleration (m/s²) */\n  readonly movementAcceleration: number;\n  /** Combat ranges in meters */\n  readonly combatRanges: typeof COMBAT_RANGES_METERS;\n  /** Pixels per meter ratio for this configuration */\n  readonly pixelsPerMeter: number;\n}\n\n/**\n * Create camera configuration based on device type.\n *\n * Mobile devices get a tighter FOV and closer camera position\n * for better framing of the smaller arena. Desktop gets a wider\n * FOV and further camera for full arena view.\n *\n * **Korean**: 카메라 설정 생성\n *\n * @param isMobile - Whether the device is mobile\n * @returns Camera configuration for device type\n *\n * @example\n * ```typescript\n * const mobile = createCameraConfig(true);\n * // { fov: 55, position: [0, 6, 10], near: 0.1, far: 1000 }\n *\n * const desktop = createCameraConfig(false);\n * // { fov: 60, position: [0, 8, 12], near: 0.1, far: 1000 }\n * ```\n *\n */\nexport function createCameraConfig(isMobile: boolean): CameraConfiguration {\n  if (isMobile) {\n    return {\n      fov: 55, // Tighter FOV for smaller mobile arena\n      position: [0, 6, 10], // Closer camera\n      near: 0.1,\n      far: 1000,\n    };\n  }\n\n  return {\n    fov: 60, // Standard FOV for desktop\n    position: [0, 8, 12], // Further back for full view\n    near: 0.1,\n    far: 1000,\n  };\n}\n\n/**\n * Create complete physics configuration for a screen.\n *\n * This is the primary function for setting up physics in both\n * TrainingScreen3D and CombatScreen3D. It ensures consistent\n * physics behavior by using the same calculations and constants.\n *\n * **Korean**: 물리 설정 생성\n *\n * @param screenWidth - Screen width in pixels\n * @param screenHeight - Screen height in pixels\n * @param topOffset - Pixels reserved at top (HUD, headers)\n * @param bottomOffset - Pixels reserved at bottom (controls, footer)\n * @param isMobile - Whether the device is mobile\n * @returns Complete physics configuration\n *\n * @example\n * ```typescript\n * // Training screen\n * const trainingPhysics = createPhysicsConfig(\n *   1920, 1080, 60, 100, false\n * );\n *\n * // Combat screen\n * const combatPhysics = createPhysicsConfig(\n *   1920, 1080, 60, 100, false\n * );\n *\n * // Both have identical physics configuration\n * trainingPhysics.pixelsPerMeter === combatPhysics.pixelsPerMeter; // true\n * ```\n *\n */\nexport function createPhysicsConfig(\n  screenWidth: number,\n  screenHeight: number,\n  topOffset: number,\n  bottomOffset: number,\n  isMobile: boolean,\n): PhysicsConfiguration {\n  // Calculate arena dimensions (same for both screens)\n  const arenaConfig = calculateArenaConfiguration(\n    screenWidth,\n    screenHeight,\n    topOffset,\n    bottomOffset,\n  );\n\n  // Create camera config based on device type\n  const cameraConfig = createCameraConfig(isMobile);\n\n  return {\n    arenaConfig,\n    cameraConfig,\n    staminaRegenRate: BASE_STAMINA_REGEN_RATE,\n    movementAcceleration: BASE_MOVEMENT_ACCELERATION,\n    combatRanges: COMBAT_RANGES_METERS,\n    pixelsPerMeter: arenaConfig.pixelsPerMeter,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,SAAgB,mBAAmB,UAAwC;CACzE,IAAI,UACF,OAAO;EACL,KAAK;EACL,UAAU;GAAC;GAAG;GAAG;GAAG;EACpB,MAAM;EACN,KAAK;EACN;CAGH,OAAO;EACL,KAAK;EACL,UAAU;GAAC;GAAG;GAAG;GAAG;EACpB,MAAM;EACN,KAAK;EACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCH,SAAgB,oBACd,aACA,cACA,WACA,cACA,UACsB;CAEtB,MAAM,cAAc,4BAClB,aACA,cACA,WACA,aACD;CAKD,OAAO;EACL;EACA,cAJmB,mBAAmB,SAItC;EACA,kBAAA;EACA,sBAAA;EACA,cAAc;EACd,gBAAgB,YAAY;EAC7B"}