blacktrigram 0.7.12 → 0.7.13

package/lib/components/shared/ui/BaseHUDContainer.js

@@ -16,6 +16,46 @@ import { jsx } from "react/jsx-runtime";
 * - Pointer events handling
 * - Backdrop blur effects
 *
+* ## Z-Index Stacking Order (Combat HUD Layers)
+*
+* The combat screen renders multiple overlapping HUD panels. The stacking
+* order is managed by the Z_INDEX constants from LayoutTypes.ts:
+*
+* | Layer               | Z-Index | Description                        |
+* |---------------------|---------|------------------------------------|
+* | BACKGROUND          |    0    | 3D scene background                |
+* | ARENA               |   10    | Combat arena mesh                  |
+* | PLAYERS             |   20    | Character models                   |
+* | EFFECTS             |   30    | Particles and VFX                  |
+* | HUD_BACKGROUND      |   40    | HUD panel backgrounds              |
+* | HUD (default)       |   50    | Left/Right/Top/Bottom HUD panels   |
+* | TECHNIQUE_BAR       |   55    | Technique bar overlay              |
+* | HUD_OVERLAY         |   60    | PlayerStateOverlay and sub-HUDs    |
+* | MOBILE_CONTROLS     |  100    | Touch controls on mobile           |
+* | MODAL               |  200    | Modal dialogs                      |
+* | TOOLTIP             |  300    | Tooltips and hints                 |
+* | PAUSE_MENU          | 1000    | Pause menu overlay                 |
+* | LOADING             | 2000    | Loading screens                    |
+* | DEBUG               | 9000    | Performance debug overlay          |
+*
+* All BaseHUDContainer instances default to Z_INDEX.HUD (50). Parent
+* screens can override via the `zIndex` prop when a different layer
+* is needed (e.g., overlays at HUD_OVERLAY = 60).
+*
+* ## Viewport Breakpoints (Expected HUD Sizes)
+*
+* | Viewport            | Width    | Left/Right HUD | Top HUD | Bottom HUD |
+* |---------------------|----------|----------------|---------|------------|
+* | Small Phone (≤375)  | ≤375px   | ~120-150px     | ~50px   | ~90px      |
+* | Mobile (<768)       | <768px   | ~180-200px     | ~60px   | ~110px     |
+* | Tablet (768-1199)   | 768-1199 | ~220-260px     | ~65px   | ~120px     |
+* | Desktop (≥1200)     | ≥1200px  | ~260-300px     | ~70px   | ~130px     |
+* | 4K (≥1920)          | ≥1920px  | ~300-400px     | ~80px   | ~140px     |
+*
+* Width/height values are passed by the parent screen and scaled via
+* positionScale multipliers. This table documents the expected ranges
+* produced by CombatScreen3D and TrainingScreen3D layout calculations.
+*
 * @module components/shared/ui
 * @korean 기본HUD컨테이너 - 공통 패턴을 가진 재사용 가능한 HUD 컨테이너
 */

package/lib/components/shared/ui/BaseHUDContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseHUDContainer.js","names":[],"sources":["../../../../src/components/shared/ui/BaseHUDContainer.tsx"],"sourcesContent":["/**\n * BaseHUDContainer - Reusable HUD container with common patterns\n *\n * Provides consistent container styling and positioning for all HUD components.\n * Eliminates code duplication across Training and Combat HUDs.\n *\n * Features:\n * - Responsive positioning based on HUD position (left, right, top, bottom)\n * - Korean cyberpunk theming with gradients and borders\n * - Pointer events handling\n * - Backdrop blur effects\n *\n * @module components/shared/ui\n * @korean 기본HUD컨테이너 - 공통 패턴을 가진 재사용 가능한 HUD 컨테이너\n */\n\nimport React from \"react\";\nimport { Z_INDEX } from \"../../../types/LayoutTypes\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\n\n/**\n * HUD position type\n */\nexport type HUDPosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\n/**\n * Props for BaseHUDContainer component\n */\nexport interface BaseHUDContainerProps {\n  /** Position of the HUD (left, right, top, bottom) */\n  readonly position: HUDPosition;\n  /** Width in pixels (used for left/right positions; top/bottom use 100% width) */\n  readonly width: number;\n  /** Height in pixels */\n  readonly height: number;\n  /** Top offset in pixels (for left/right HUDs) */\n  readonly topOffset?: number;\n  /** Internal padding in pixels */\n  readonly padding?: number;\n  /** Gap between sections in pixels */\n  readonly gap?: number;\n  /** Z-index for layering */\n  readonly zIndex?: number;\n  /** Additional CSS styles */\n  readonly style?: React.CSSProperties;\n  /** Child elements */\n  readonly children: React.ReactNode;\n  /** Test ID for testing */\n  readonly dataTestId?: string;\n}\n\n/**\n * BaseHUDContainer Component\n *\n * Reusable container for HUD elements with consistent styling and positioning.\n * Handles left, right, top, and bottom positions with appropriate borders,\n * gradients, and responsive behavior.\n *\n * @example\n * ```tsx\n * <BaseHUDContainer\n *   position=\"left\"\n *   width={268}\n *   height={940}\n *   topOffset={70}\n *   padding={12}\n *   gap={14}\n *   dataTestId=\"combat-left-hud\"\n * >\n *   <PlayerHUD player={player} />\n *   <SpeedIndicator speed={speed} />\n * </BaseHUDContainer>\n * ```\n */\nexport const BaseHUDContainer: React.FC<BaseHUDContainerProps> = ({\n  position,\n  width,\n  height,\n  topOffset = 0,\n  padding = 10,\n  gap = 12,\n  zIndex = Z_INDEX.HUD,\n  style = {},\n  children,\n  dataTestId,\n}) => {\n  // Calculate position-specific styles\n  // Using KOREAN_COLORS directly for stable memoization instead of useKoreanTheme\n  const containerStyle = React.useMemo<React.CSSProperties>(() => {\n    const baseStyle: React.CSSProperties = {\n      position: \"absolute\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n      pointerEvents: \"none\",\n      padding: `${padding}px`,\n      boxSizing: \"border-box\",\n      gap: `${gap}px`,\n      zIndex,\n      backdropFilter: \"blur(8px)\",\n    };\n\n    switch (position) {\n      case \"left\":\n        return {\n          ...baseStyle,\n          left: 0,\n          top: `${topOffset}px`,\n          width: `${width}px`,\n          height: `${height}px`,\n          justifyContent: \"flex-start\",\n          borderRight: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(90deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.4)} 100%)`,\n        };\n\n      case \"right\":\n        return {\n          ...baseStyle,\n          right: 0,\n          top: `${topOffset}px`,\n          width: `${width}px`,\n          height: `${height}px`,\n          justifyContent: \"flex-start\",\n          borderLeft: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(270deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.4)} 100%)`,\n        };\n\n      case \"top\":\n        return {\n          ...baseStyle,\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: `${height}px`,\n          flexDirection: \"row\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          borderBottom: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(180deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.7)} 100%)`,\n        };\n\n      case \"bottom\":\n        return {\n          ...baseStyle,\n          bottom: 0,\n          left: 0,\n          width: \"100%\",\n          height: `${height}px`,\n          flexDirection: \"row\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          borderTop: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(0deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.7)} 100%)`,\n        };\n    }\n  }, [position, width, height, topOffset, padding, gap, zIndex]);\n\n  return (\n    <div style={{ ...containerStyle, ...style }} data-testid={dataTestId}>\n      {children}\n    </div>\n  );\n};\n\nexport default BaseHUDContainer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,IAAa,oBAAqD,EAChE,UACA,OACA,QACA,YAAY,GACZ,UAAU,IACV,MAAM,IACN,SAAS,QAAQ,KACjB,QAAQ,EAAE,EACV,UACA,iBACI;AAwEJ,QACE,oBAAC,OAAD;EAAK,OAAO;GAAE,GAtEO,MAAM,cAAmC;IAC9D,MAAM,YAAiC;KACrC,UAAU;KACV,SAAS;KACT,eAAe;KACf,YAAY;KACZ,eAAe;KACf,SAAS,GAAG,QAAQ;KACpB,WAAW;KACX,KAAK,GAAG,IAAI;KACZ;KACA,gBAAgB;KACjB;AAED,YAAQ,UAAR;KACE,KAAK,OACH,QAAO;MACL,GAAG;MACH,MAAM;MACN,KAAK,GAAG,UAAU;MAClB,OAAO,GAAG,MAAM;MAChB,QAAQ,GAAG,OAAO;MAClB,gBAAgB;MAChB,aAAa,aAAa,gBAAgB,cAAc,cAAc,GAAI;MAC1E,YAAY,0BAA0B,gBAAgB,cAAc,oBAAoB,IAAK,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC7J;KAEH,KAAK,QACH,QAAO;MACL,GAAG;MACH,OAAO;MACP,KAAK,GAAG,UAAU;MAClB,OAAO,GAAG,MAAM;MAChB,QAAQ,GAAG,OAAO;MAClB,gBAAgB;MAChB,YAAY,aAAa,gBAAgB,cAAc,cAAc,GAAI;MACzE,YAAY,2BAA2B,gBAAgB,cAAc,oBAAoB,IAAK,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC9J;KAEH,KAAK,MACH,QAAO;MACL,GAAG;MACH,KAAK;MACL,MAAM;MACN,OAAO;MACP,QAAQ,GAAG,OAAO;MAClB,eAAe;MACf,gBAAgB;MAChB,YAAY;MACZ,cAAc,aAAa,gBAAgB,cAAc,cAAc,GAAI;MAC3E,YAAY,2BAA2B,gBAAgB,cAAc,oBAAoB,GAAI,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC7J;KAEH,KAAK,SACH,QAAO;MACL,GAAG;MACH,QAAQ;MACR,MAAM;MACN,OAAO;MACP,QAAQ,GAAG,OAAO;MAClB,eAAe;MACf,gBAAgB;MAChB,YAAY;MACZ,WAAW,aAAa,gBAAgB,cAAc,cAAc,GAAI;MACxE,YAAY,yBAAyB,gBAAgB,cAAc,oBAAoB,GAAI,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC3J;;MAEJ;IAAC;IAAU;IAAO;IAAQ;IAAW;IAAS;IAAK;IAAO,CAAC;GAG3B,GAAG;GAAO;EAAE,eAAa;EACvD;EACG,CAAA"}
+{"version":3,"file":"BaseHUDContainer.js","names":[],"sources":["../../../../src/components/shared/ui/BaseHUDContainer.tsx"],"sourcesContent":["/**\n * BaseHUDContainer - Reusable HUD container with common patterns\n *\n * Provides consistent container styling and positioning for all HUD components.\n * Eliminates code duplication across Training and Combat HUDs.\n *\n * Features:\n * - Responsive positioning based on HUD position (left, right, top, bottom)\n * - Korean cyberpunk theming with gradients and borders\n * - Pointer events handling\n * - Backdrop blur effects\n *\n * ## Z-Index Stacking Order (Combat HUD Layers)\n *\n * The combat screen renders multiple overlapping HUD panels. The stacking\n * order is managed by the Z_INDEX constants from LayoutTypes.ts:\n *\n * | Layer               | Z-Index | Description                        |\n * |---------------------|---------|------------------------------------|\n * | BACKGROUND          |    0    | 3D scene background                |\n * | ARENA               |   10    | Combat arena mesh                  |\n * | PLAYERS             |   20    | Character models                   |\n * | EFFECTS             |   30    | Particles and VFX                  |\n * | HUD_BACKGROUND      |   40    | HUD panel backgrounds              |\n * | HUD (default)       |   50    | Left/Right/Top/Bottom HUD panels   |\n * | TECHNIQUE_BAR       |   55    | Technique bar overlay              |\n * | HUD_OVERLAY         |   60    | PlayerStateOverlay and sub-HUDs    |\n * | MOBILE_CONTROLS     |  100    | Touch controls on mobile           |\n * | MODAL               |  200    | Modal dialogs                      |\n * | TOOLTIP             |  300    | Tooltips and hints                 |\n * | PAUSE_MENU          | 1000    | Pause menu overlay                 |\n * | LOADING             | 2000    | Loading screens                    |\n * | DEBUG               | 9000    | Performance debug overlay          |\n *\n * All BaseHUDContainer instances default to Z_INDEX.HUD (50). Parent\n * screens can override via the `zIndex` prop when a different layer\n * is needed (e.g., overlays at HUD_OVERLAY = 60).\n *\n * ## Viewport Breakpoints (Expected HUD Sizes)\n *\n * | Viewport            | Width    | Left/Right HUD | Top HUD | Bottom HUD |\n * |---------------------|----------|----------------|---------|------------|\n * | Small Phone (≤375)  | ≤375px   | ~120-150px     | ~50px   | ~90px      |\n * | Mobile (<768)       | <768px   | ~180-200px     | ~60px   | ~110px     |\n * | Tablet (768-1199)   | 768-1199 | ~220-260px     | ~65px   | ~120px     |\n * | Desktop (≥1200)     | ≥1200px  | ~260-300px     | ~70px   | ~130px     |\n * | 4K (≥1920)          | ≥1920px  | ~300-400px     | ~80px   | ~140px     |\n *\n * Width/height values are passed by the parent screen and scaled via\n * positionScale multipliers. This table documents the expected ranges\n * produced by CombatScreen3D and TrainingScreen3D layout calculations.\n *\n * @module components/shared/ui\n * @korean 기본HUD컨테이너 - 공통 패턴을 가진 재사용 가능한 HUD 컨테이너\n */\n\nimport React from \"react\";\nimport { Z_INDEX } from \"../../../types/LayoutTypes\";\nimport { KOREAN_COLORS } from \"@/types/constants\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\n\n/**\n * HUD position type\n */\nexport type HUDPosition = \"left\" | \"right\" | \"top\" | \"bottom\";\n\n/**\n * Props for BaseHUDContainer component\n */\nexport interface BaseHUDContainerProps {\n  /** Position of the HUD (left, right, top, bottom) */\n  readonly position: HUDPosition;\n  /** Width in pixels (used for left/right positions; top/bottom use 100% width) */\n  readonly width: number;\n  /** Height in pixels */\n  readonly height: number;\n  /** Top offset in pixels (for left/right HUDs) */\n  readonly topOffset?: number;\n  /** Internal padding in pixels */\n  readonly padding?: number;\n  /** Gap between sections in pixels */\n  readonly gap?: number;\n  /** Z-index for layering */\n  readonly zIndex?: number;\n  /** Additional CSS styles */\n  readonly style?: React.CSSProperties;\n  /** Child elements */\n  readonly children: React.ReactNode;\n  /** Test ID for testing */\n  readonly dataTestId?: string;\n}\n\n/**\n * BaseHUDContainer Component\n *\n * Reusable container for HUD elements with consistent styling and positioning.\n * Handles left, right, top, and bottom positions with appropriate borders,\n * gradients, and responsive behavior.\n *\n * @example\n * ```tsx\n * <BaseHUDContainer\n *   position=\"left\"\n *   width={268}\n *   height={940}\n *   topOffset={70}\n *   padding={12}\n *   gap={14}\n *   dataTestId=\"combat-left-hud\"\n * >\n *   <PlayerHUD player={player} />\n *   <SpeedIndicator speed={speed} />\n * </BaseHUDContainer>\n * ```\n */\nexport const BaseHUDContainer: React.FC<BaseHUDContainerProps> = ({\n  position,\n  width,\n  height,\n  topOffset = 0,\n  padding = 10,\n  gap = 12,\n  zIndex = Z_INDEX.HUD,\n  style = {},\n  children,\n  dataTestId,\n}) => {\n  // Calculate position-specific styles\n  // Using KOREAN_COLORS directly for stable memoization instead of useKoreanTheme\n  //\n  // Z-index stacking: defaults to Z_INDEX.HUD (50). Combat screen layers\n  // are ordered as: HUD_BACKGROUND (40) < HUD (50) < TECHNIQUE_BAR (55) < HUD_OVERLAY (60).\n  // Left/Right/Top/Bottom HUDs all share the same z-index (HUD = 50) and\n  // rely on DOM order for overlap resolution. The PlayerStateOverlay sits\n  // at HUD_OVERLAY (60) to appear above all HUD panels.\n  //\n  // Safe area note: left/right HUD panels are anchored to the viewport edge\n  // with left: 0 / right: 0. Reducing the width prop alone will not move a\n  // panel out of a landscape notch or horizontal safe-area cutout. If the\n  // parent needs to avoid env(safe-area-inset-left) /\n  // env(safe-area-inset-right), it should also provide a horizontal offset\n  // via the existing style prop (for example, left/right or horizontal\n  // padding) in addition to any width adjustments. Horizontal safe-area\n  // insets affect left/right panel widths and offsets, not topOffset (which\n  // is purely vertical). For portrait notch/status-bar avoidance, the parent\n  // should incorporate layout.safeArea.top into the topOffset calculation.\n  const containerStyle = React.useMemo<React.CSSProperties>(() => {\n    const baseStyle: React.CSSProperties = {\n      position: \"absolute\",\n      display: \"flex\",\n      flexDirection: \"column\",\n      alignItems: \"stretch\",\n      pointerEvents: \"none\",\n      padding: `${padding}px`,\n      boxSizing: \"border-box\",\n      gap: `${gap}px`,\n      zIndex,\n      backdropFilter: \"blur(8px)\",\n    };\n\n    switch (position) {\n      case \"left\":\n        return {\n          ...baseStyle,\n          left: 0,\n          top: `${topOffset}px`,\n          width: `${width}px`,\n          height: `${height}px`,\n          justifyContent: \"flex-start\",\n          borderRight: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(90deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.4)} 100%)`,\n        };\n\n      case \"right\":\n        return {\n          ...baseStyle,\n          right: 0,\n          top: `${topOffset}px`,\n          width: `${width}px`,\n          height: `${height}px`,\n          justifyContent: \"flex-start\",\n          borderLeft: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(270deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.85)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.4)} 100%)`,\n        };\n\n      case \"top\":\n        return {\n          ...baseStyle,\n          top: 0,\n          left: 0,\n          width: \"100%\",\n          height: `${height}px`,\n          flexDirection: \"row\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          borderBottom: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(180deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.7)} 100%)`,\n        };\n\n      case \"bottom\":\n        return {\n          ...baseStyle,\n          bottom: 0,\n          left: 0,\n          width: \"100%\",\n          height: `${height}px`,\n          flexDirection: \"row\",\n          justifyContent: \"space-between\",\n          alignItems: \"center\",\n          borderTop: `2px solid ${hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.4)}`,\n          background: `linear-gradient(0deg, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.9)} 0%, ${hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.7)} 100%)`,\n        };\n    }\n  }, [position, width, height, topOffset, padding, gap, zIndex]);\n\n  return (\n    <div style={{ ...containerStyle, ...style }} data-testid={dataTestId}>\n      {children}\n    </div>\n  );\n};\n\nexport default BaseHUDContainer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmHA,IAAa,oBAAqD,EAChE,UACA,OACA,QACA,YAAY,GACZ,UAAU,IACV,MAAM,IACN,SAAS,QAAQ,KACjB,QAAQ,EAAE,EACV,UACA,iBACI;AAyFJ,QACE,oBAAC,OAAD;EAAK,OAAO;GAAE,GAtEO,MAAM,cAAmC;IAC9D,MAAM,YAAiC;KACrC,UAAU;KACV,SAAS;KACT,eAAe;KACf,YAAY;KACZ,eAAe;KACf,SAAS,GAAG,QAAQ;KACpB,WAAW;KACX,KAAK,GAAG,IAAI;KACZ;KACA,gBAAgB;KACjB;AAED,YAAQ,UAAR;KACE,KAAK,OACH,QAAO;MACL,GAAG;MACH,MAAM;MACN,KAAK,GAAG,UAAU;MAClB,OAAO,GAAG,MAAM;MAChB,QAAQ,GAAG,OAAO;MAClB,gBAAgB;MAChB,aAAa,aAAa,gBAAgB,cAAc,cAAc,GAAI;MAC1E,YAAY,0BAA0B,gBAAgB,cAAc,oBAAoB,IAAK,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC7J;KAEH,KAAK,QACH,QAAO;MACL,GAAG;MACH,OAAO;MACP,KAAK,GAAG,UAAU;MAClB,OAAO,GAAG,MAAM;MAChB,QAAQ,GAAG,OAAO;MAClB,gBAAgB;MAChB,YAAY,aAAa,gBAAgB,cAAc,cAAc,GAAI;MACzE,YAAY,2BAA2B,gBAAgB,cAAc,oBAAoB,IAAK,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC9J;KAEH,KAAK,MACH,QAAO;MACL,GAAG;MACH,KAAK;MACL,MAAM;MACN,OAAO;MACP,QAAQ,GAAG,OAAO;MAClB,eAAe;MACf,gBAAgB;MAChB,YAAY;MACZ,cAAc,aAAa,gBAAgB,cAAc,cAAc,GAAI;MAC3E,YAAY,2BAA2B,gBAAgB,cAAc,oBAAoB,GAAI,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC7J;KAEH,KAAK,SACH,QAAO;MACL,GAAG;MACH,QAAQ;MACR,MAAM;MACN,OAAO;MACP,QAAQ,GAAG,OAAO;MAClB,eAAe;MACf,gBAAgB;MAChB,YAAY;MACZ,WAAW,aAAa,gBAAgB,cAAc,cAAc,GAAI;MACxE,YAAY,yBAAyB,gBAAgB,cAAc,oBAAoB,GAAI,CAAC,OAAO,gBAAgB,cAAc,oBAAoB,GAAI,CAAC;MAC3J;;MAEJ;IAAC;IAAU;IAAO;IAAQ;IAAW;IAAS;IAAK;IAAO,CAAC;GAG3B,GAAG;GAAO;EAAE,eAAa;EACvD;EACG,CAAA"}

package/lib/components/shared/ui/MobileHUDLayout.d.ts

@@ -52,6 +52,19 @@ export interface MobileHUDLayoutProps {
  * - Minimal screen real estate usage
  * - Safe area aware positioning
  *
+ * Landscape Safe Area Notes:
+ * - In landscape on notched devices (iPhone X+), the left and right health
+ *   bars are currently anchored using `layout.spacing.md` from their
+ *   respective edges.
+ * - The `useResponsiveLayout` hook provides safe-area values, and this
+ *   component uses `layout.safeArea.top` for vertical offset.
+ * - However, the current health bar positioning does not directly apply
+ *   `layout.safeArea.left` / `layout.safeArea.right` for horizontal notch or
+ *   cutout avoidance in landscape mode.
+ * - Consumers that require landscape horizontal safe-area protection should
+ *   add `env(safe-area-inset-left)` / `env(safe-area-inset-right)` via CSS
+ *   or ensure the parent container applies equivalent horizontal offsets.
+ *
  * @example
  * ```tsx
  * <MobileHUDLayout

package/lib/components/shared/ui/MobileHUDLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MobileHUDLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/MobileHUDLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAU/C;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,qBAAqB;IACrB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,qBAAqB;IACrB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,gCAAgC;IAChC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,2BAA2B;IAC3B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,qBAAqB;IACrB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,6BAA6B;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,0BAA0B;IAC1B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAkMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkG1D,CAAC"}
+{"version":3,"file":"MobileHUDLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ui/MobileHUDLayout.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAU/C;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,qBAAqB;IACrB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,qBAAqB;IACrB,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,gCAAgC;IAChC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,2BAA2B;IAC3B,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,qBAAqB;IACrB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,6BAA6B;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,0BAA0B;IAC1B,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAkMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkG1D,CAAC"}

package/lib/components/shared/ui/SplashScreen.js

@@ -183,7 +183,7 @@ var SplashScreen = ({ onStart, width, height }) => {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				role: "contentinfo",
-				"aria-label": `Application version 0.7.12`,
+				"aria-label": `Application version 0.7.13`,
 				style: {
 					position: "absolute",
 					bottom: "20px",
@@ -192,7 +192,7 @@ var SplashScreen = ({ onStart, width, height }) => {
 					fontSize: "10px",
 					zIndex: 1
 				},
-				children: ["v", "0.7.12"]
+				children: ["v", "0.7.13"]
 			})
 		]
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blacktrigram",
-  "version": "0.7.12",
+  "version": "0.7.13",
   "description": "Black Trigram (흑괘) - Korean Martial Arts Combat Simulator. Reusable game systems, combat mechanics, animation framework, and Korean martial arts data built with React, Three.js, and TypeScript.",
   "type": "module",
   "main": "./lib/index.js",
@@ -200,8 +200,8 @@
     "@types/react-dom": "19.2.3",
     "@types/three": "0.183.1",
     "@vitejs/plugin-react": "6.0.1",
-    "@vitest/coverage-v8": "4.1.2",
-    "@vitest/ui": "4.1.2",
+    "@vitest/coverage-v8": "4.1.3",
+    "@vitest/ui": "4.1.3",
     "cypress": "15.13.0",
     "cypress-junit-reporter": "1.3.1",
     "cypress-multi-reporters": "2.0.5",
@@ -213,7 +213,7 @@
     "eslint-plugin-react-refresh": "0.5.2",
     "globals": "17.4.0",
     "jest-axe": "10.0.0",
-    "jsdom": "29.0.1",
+    "jsdom": "29.0.2",
     "knip": "6.3.0",
     "license-compliance": "3.0.1",
     "mocha-junit-reporter": "2.2.1",
@@ -237,10 +237,10 @@
     "typedoc-plugin-missing-exports": "4.1.3",
     "typescript": "6.0.2",
     "typescript-eslint": "8.58.0",
-    "vite": "8.0.5",
+    "vite": "8.0.6",
     "vite-bundle-analyzer": "1.3.7",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.2"
+    "vitest": "4.1.3"
   },
   "overrides": {
     "eslint-plugin-react-hooks": {