blacktrigram 0.7.44 → 0.7.45

package/lib/components/screens/intro/components/ArchetypeCardOverlayHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArchetypeCardOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/ArchetypeCardOverlayHtml.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { PlayerArchetype } from \"../../../../types/common\";\nimport { FALLBACK_ARCHETYPE_IMAGE, FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString, hexColorToCSS } from \"../../../../utils/colorUtils\";\nimport { BaseButtonOverlayHtml } from \"../../../shared/base/BaseButtonOverlayHtml\";\nimport { AbilityList } from \"./AbilityListOverlayHtml\";\nimport { StatBar } from \"./StatBarOverlayHtml\";\n\nexport interface ArchetypeCardData {\n  readonly archetype: PlayerArchetype;\n  readonly id: string;\n  readonly korean: string;\n  readonly english: string;\n  readonly description: string;\n  readonly color: number;\n  readonly textureKey: string;\n  readonly stats: {\n    readonly attackPower: number;\n    readonly defense: number;\n    readonly speed: number;\n    readonly technique: number;\n  };\n  readonly philosophy: {\n    readonly korean: string;\n    readonly english: string;\n  };\n  readonly specialAbilities?: readonly string[];\n}\n\nexport interface ArchetypeCardProps {\n  readonly data: ArchetypeCardData;\n  readonly isSelected: boolean;\n  readonly onSelect: () => void;\n  readonly onConfirm?: () => void;\n  readonly isMobile?: boolean;\n  readonly width?: number;\n  readonly showSelectButton?: boolean;\n}\n\n/**\n * ArchetypeCard component - Displays detailed archetype preview card\n * Shows stats, abilities, philosophy, and selection interface\n */\nexport const ArchetypeCard: React.FC<ArchetypeCardProps> = React.memo(\n  ({\n    data,\n    isSelected,\n    onSelect,\n    onConfirm,\n    isMobile = false,\n    width = 380,\n    showSelectButton = true,\n  }) => {\n    const {\n      archetype,\n      korean,\n      english,\n      color,\n      textureKey,\n      stats,\n      philosophy,\n      specialAbilities = [],\n    } = data;\n\n    // Calculate responsive dimensions\n    const cardWidth = isMobile ? Math.min(280, width) : width;\n    const imageSize = isMobile ? 120 : 160;\n    const padding = isMobile ? 16 : 24;\n    const gap = isMobile ? 10 : 16;\n\n    // Memoize color calculations\n    const colors = useMemo(\n      () => ({\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.95),\n        border: hexToRgbaString(\n          isSelected ? KOREAN_COLORS.ACCENT_GOLD : color,\n          isSelected ? 1 : 0.7\n        ),\n        cardColor: hexColorToCSS(color),\n        titleColor: isSelected\n          ? hexColorToCSS(KOREAN_COLORS.ACCENT_GOLD)\n          : hexColorToCSS(color),\n        philosophyColor: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY),\n        buttonBackground: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.9),\n        buttonText: hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_DARK),\n        imageGlow: hexToRgbaString(color, 0.3),\n      }),\n      [color, isSelected]\n    );\n\n    // Handle card click\n    const handleCardClick = useCallback(() => {\n      if (!isSelected) {\n        onSelect();\n      }\n    }, [isSelected, onSelect]);\n\n    // Handle confirm button click\n    const handleConfirmClick = useCallback(() => {\n      onConfirm?.();\n    }, [onConfirm]);\n\n    // Get archetype image path\n    const imagePath = `/assets/visual/archetypes/${textureKey}.png`;\n\n    // Transform stats to StatBar format\n    const statBars = useMemo(\n      () => [\n        {\n          label: \"공격 | Attack\",\n          value: stats.attackPower,\n        },\n        {\n          label: \"방어 | Defense\",\n          value: stats.defense,\n        },\n        {\n          label: \"속도 | Speed\",\n          value: stats.speed,\n        },\n        {\n          label: \"기술 | Technique\",\n          value: stats.technique,\n        },\n      ],\n      [stats]\n    );\n\n    return (\n      <div\n        onClick={handleCardClick}\n        onKeyDown={(e) => {\n          if ((e.key === \"Enter\" || e.key === \" \") && !isSelected) {\n            e.preventDefault();\n            onSelect();\n          }\n        }}\n        tabIndex={0}\n        role=\"button\"\n        aria-label={`${korean} ${english} archetype card`}\n        aria-pressed={isSelected}\n        style={{\n          width: `${cardWidth}px`,\n          padding: `${padding}px`,\n          backgroundColor: colors.background,\n          border: `${isSelected ? \"3px\" : \"2px\"} solid ${colors.border}`,\n          borderRadius: \"12px\",\n          cursor: isSelected ? \"default\" : \"pointer\",\n          transition: \"all 0.3s ease\",\n          transform: isSelected ? \"scale(1.05)\" : \"scale(1)\",\n          boxShadow: isSelected\n            ? `0 0 20px ${colors.imageGlow}, 0 4px 8px rgba(0, 0, 0, 0.3)`\n            : \"0 2px 4px rgba(0, 0, 0, 0.2)\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: `${gap}px`,\n          position: \"relative\",\n          overflow: \"hidden\",\n        }}\n        data-testid={`archetype-card-${archetype}`}\n      >\n        {/* Selected indicator badge */}\n        {isSelected && (\n          <div\n            style={{\n              position: \"absolute\",\n              top: 10,\n              right: 10,\n              padding: \"4px 8px\",\n              background: colors.buttonBackground,\n              color: colors.buttonText,\n              fontSize: isMobile ? \"10px\" : \"12px\",\n              fontWeight: \"bold\",\n              fontFamily: FONT_FAMILY.KOREAN,\n              borderRadius: \"4px\",\n              zIndex: 10,\n            }}\n            data-testid=\"selected-badge\"\n          >\n            선택됨 | Selected\n          </div>\n        )}\n\n        {/* Character Image */}\n        <div\n          style={{\n            width: \"100%\",\n            display: \"flex\",\n            justifyContent: \"center\",\n            alignItems: \"center\",\n            marginBottom: `${gap / 2}px`,\n          }}\n        >\n          <div\n            style={{\n              width: `${imageSize}px`,\n              height: `${imageSize}px`,\n              background: `radial-gradient(circle, ${colors.imageGlow}, transparent)`,\n              borderRadius: \"8px\",\n              border: `2px solid ${colors.cardColor}`,\n              display: \"flex\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n              overflow: \"hidden\",\n            }}\n            data-testid=\"archetype-image-container\"\n          >\n            <img\n              src={imagePath}\n              alt={`${korean} - ${english}`}\n              style={{\n                width: `${imageSize - 10}px`,\n                height: `${imageSize - 10}px`,\n                objectFit: \"contain\",\n              }}\n              data-testid=\"archetype-image\"\n              onError={(e) => {\n                const target = e.currentTarget as HTMLImageElement;\n                if (!target.src.endsWith(FALLBACK_ARCHETYPE_IMAGE)) {\n                  target.src = FALLBACK_ARCHETYPE_IMAGE;\n                }\n              }}\n            />\n          </div>\n        </div>\n\n        {/* Archetype Name */}\n        <h2\n          style={{\n            fontSize: isMobile ? \"20px\" : \"28px\",\n            color: colors.titleColor,\n            fontFamily: FONT_FAMILY.KOREAN,\n            fontWeight: \"bold\",\n            margin: 0,\n            textAlign: \"center\",\n            textShadow: `0 0 10px ${colors.imageGlow}`,\n          }}\n          data-testid=\"archetype-name\"\n        >\n          {korean}\n          <br />\n          <span\n            style={{\n              fontSize: isMobile ? \"16px\" : \"22px\",\n            }}\n          >\n            {english}\n          </span>\n        </h2>\n\n        {/* Philosophy/Description */}\n        <p\n          style={{\n            fontSize: isMobile ? \"12px\" : \"14px\",\n            color: colors.philosophyColor,\n            fontFamily: FONT_FAMILY.KOREAN,\n            margin: 0,\n            lineHeight: \"1.5\",\n            textAlign: \"center\",\n            fontStyle: \"italic\",\n          }}\n          data-testid=\"archetype-philosophy\"\n        >\n          {philosophy.korean}\n          <br />\n          {philosophy.english}\n        </p>\n\n        {/* Stats Visualization */}\n        <div\n          style={{\n            width: \"100%\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"8px\",\n            marginTop: `${gap / 2}px`,\n          }}\n          data-testid=\"archetype-stats\"\n        >\n          <div\n            style={{\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              fontWeight: \"bold\",\n              fontFamily: FONT_FAMILY.KOREAN,\n              color: colors.cardColor,\n            }}\n          >\n            전투 능력치 | Combat Stats\n          </div>\n\n          {statBars.map((stat) => (\n            <StatBar\n              key={stat.label}\n              label={stat.label}\n              value={stat.value}\n              max={100}\n              color={color}\n              height={isMobile ? 10 : 12}\n              showValue={true}\n              isMobile={isMobile}\n            />\n          ))}\n        </div>\n\n        {/* Special Abilities */}\n        {specialAbilities.length > 0 && (\n          <div style={{ marginTop: `${gap / 2}px` }}>\n            <AbilityList\n              abilities={specialAbilities}\n              maxAbilities={3}\n              color={color}\n              isMobile={isMobile}\n            />\n          </div>\n        )}\n\n        {/* Select Button */}\n        {isSelected && showSelectButton && onConfirm && (\n          // Note: Wrapper div with stopPropagation prevents card click when clicking button\n          // Future enhancement: Consider adding stopPropagation prop to BaseButtonOverlayHtml\n          // to eliminate this wrapper and make the component more self-contained\n          <div \n            style={{ marginTop: `${gap}px` }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            <BaseButtonOverlayHtml\n              korean=\"선택\"\n              english=\"Select\"\n              onClick={handleConfirmClick}\n              variant=\"primary\"\n              size={isMobile ? \"sm\" : \"md\"}\n              fullWidth={true}\n              testId={`select-button-${archetype}`}\n              isMobile={isMobile}\n              ariaLabel={`Select ${korean} ${english} archetype`}\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nArchetypeCard.displayName = \"ArchetypeCard\";\n\nexport default ArchetypeCard;\n"],"mappings":"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"}
+{"version":3,"file":"ArchetypeCardOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/ArchetypeCardOverlayHtml.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { PlayerArchetype } from \"../../../../types/common\";\nimport { FALLBACK_ARCHETYPE_IMAGE, FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString, hexColorToCSS } from \"../../../../utils/colorUtils\";\nimport { BaseButtonOverlayHtml } from \"../../../shared/base/BaseButtonOverlayHtml\";\nimport { AbilityList } from \"./AbilityListOverlayHtml\";\nimport { StatBar } from \"./StatBarOverlayHtml\";\n\nexport interface ArchetypeCardData {\n  readonly archetype: PlayerArchetype;\n  readonly id: string;\n  readonly korean: string;\n  readonly english: string;\n  readonly description: string;\n  readonly color: number;\n  readonly textureKey: string;\n  readonly stats: {\n    readonly attackPower: number;\n    readonly defense: number;\n    readonly speed: number;\n    readonly technique: number;\n  };\n  readonly philosophy: {\n    readonly korean: string;\n    readonly english: string;\n  };\n  readonly specialAbilities?: readonly string[];\n}\n\nexport interface ArchetypeCardProps {\n  readonly data: ArchetypeCardData;\n  readonly isSelected: boolean;\n  readonly onSelect: () => void;\n  readonly onConfirm?: () => void;\n  readonly isMobile?: boolean;\n  readonly width?: number;\n  readonly showSelectButton?: boolean;\n}\n\n/**\n * ArchetypeCard component - Displays detailed archetype preview card\n * Shows stats, abilities, philosophy, and selection interface\n */\nexport const ArchetypeCard: React.FC<ArchetypeCardProps> = React.memo(\n  ({\n    data,\n    isSelected,\n    onSelect,\n    onConfirm,\n    isMobile = false,\n    width = 380,\n    showSelectButton = true,\n  }) => {\n    const {\n      archetype,\n      korean,\n      english,\n      color,\n      textureKey,\n      stats,\n      philosophy,\n      specialAbilities = [],\n    } = data;\n\n    const cardWidth = isMobile ? Math.min(280, width) : width;\n    const imageSize = isMobile ? 120 : 160;\n    const padding = isMobile ? 16 : 24;\n    const gap = isMobile ? 10 : 16;\n\n    const colors = useMemo(\n      () => ({\n        background: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_DARK, 0.95),\n        border: hexToRgbaString(\n          isSelected ? KOREAN_COLORS.ACCENT_GOLD : color,\n          isSelected ? 1 : 0.7\n        ),\n        cardColor: hexColorToCSS(color),\n        titleColor: isSelected\n          ? hexColorToCSS(KOREAN_COLORS.ACCENT_GOLD)\n          : hexColorToCSS(color),\n        philosophyColor: hexColorToCSS(KOREAN_COLORS.TEXT_SECONDARY),\n        buttonBackground: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.9),\n        buttonText: hexColorToCSS(KOREAN_COLORS.UI_BACKGROUND_DARK),\n        imageGlow: hexToRgbaString(color, 0.3),\n      }),\n      [color, isSelected]\n    );\n\n    const handleCardClick = useCallback(() => {\n      if (!isSelected) {\n        onSelect();\n      }\n    }, [isSelected, onSelect]);\n\n    const handleConfirmClick = useCallback(() => {\n      onConfirm?.();\n    }, [onConfirm]);\n\n    const imagePath = `/assets/visual/archetypes/${textureKey}.png`;\n\n    const statBars = useMemo(\n      () => [\n        {\n          label: \"공격 | Attack\",\n          value: stats.attackPower,\n        },\n        {\n          label: \"방어 | Defense\",\n          value: stats.defense,\n        },\n        {\n          label: \"속도 | Speed\",\n          value: stats.speed,\n        },\n        {\n          label: \"기술 | Technique\",\n          value: stats.technique,\n        },\n      ],\n      [stats]\n    );\n\n    return (\n      <div\n        onClick={handleCardClick}\n        onKeyDown={(e) => {\n          if ((e.key === \"Enter\" || e.key === \" \") && !isSelected) {\n            e.preventDefault();\n            onSelect();\n          }\n        }}\n        tabIndex={0}\n        role=\"button\"\n        aria-label={`${korean} ${english} archetype card`}\n        aria-pressed={isSelected}\n        style={{\n          width: `${cardWidth}px`,\n          padding: `${padding}px`,\n          backgroundColor: colors.background,\n          border: `${isSelected ? \"3px\" : \"2px\"} solid ${colors.border}`,\n          borderRadius: \"12px\",\n          cursor: isSelected ? \"default\" : \"pointer\",\n          transition: \"all 0.3s ease\",\n          transform: isSelected ? \"scale(1.05)\" : \"scale(1)\",\n          boxShadow: isSelected\n            ? `0 0 20px ${colors.imageGlow}, 0 4px 8px rgba(0, 0, 0, 0.3)`\n            : \"0 2px 4px rgba(0, 0, 0, 0.2)\",\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: `${gap}px`,\n          position: \"relative\",\n          overflow: \"hidden\",\n        }}\n        data-testid={`archetype-card-${archetype}`}\n      >\n        {/* Selected indicator badge */}\n        {isSelected && (\n          <div\n            style={{\n              position: \"absolute\",\n              top: 10,\n              right: 10,\n              padding: \"4px 8px\",\n              background: colors.buttonBackground,\n              color: colors.buttonText,\n              fontSize: isMobile ? \"10px\" : \"12px\",\n              fontWeight: \"bold\",\n              fontFamily: FONT_FAMILY.KOREAN,\n              borderRadius: \"4px\",\n              zIndex: 10,\n            }}\n            data-testid=\"selected-badge\"\n          >\n            선택됨 | Selected\n          </div>\n        )}\n\n        {/* Character Image */}\n        <div\n          style={{\n            width: \"100%\",\n            display: \"flex\",\n            justifyContent: \"center\",\n            alignItems: \"center\",\n            marginBottom: `${gap / 2}px`,\n          }}\n        >\n          <div\n            style={{\n              width: `${imageSize}px`,\n              height: `${imageSize}px`,\n              background: `radial-gradient(circle, ${colors.imageGlow}, transparent)`,\n              borderRadius: \"8px\",\n              border: `2px solid ${colors.cardColor}`,\n              display: \"flex\",\n              justifyContent: \"center\",\n              alignItems: \"center\",\n              overflow: \"hidden\",\n            }}\n            data-testid=\"archetype-image-container\"\n          >\n            <img\n              src={imagePath}\n              alt={`${korean} - ${english}`}\n              style={{\n                width: `${imageSize - 10}px`,\n                height: `${imageSize - 10}px`,\n                objectFit: \"contain\",\n              }}\n              data-testid=\"archetype-image\"\n              onError={(e) => {\n                const target = e.currentTarget as HTMLImageElement;\n                if (!target.src.endsWith(FALLBACK_ARCHETYPE_IMAGE)) {\n                  target.src = FALLBACK_ARCHETYPE_IMAGE;\n                }\n              }}\n            />\n          </div>\n        </div>\n\n        {/* Archetype Name */}\n        <h2\n          style={{\n            fontSize: isMobile ? \"20px\" : \"28px\",\n            color: colors.titleColor,\n            fontFamily: FONT_FAMILY.KOREAN,\n            fontWeight: \"bold\",\n            margin: 0,\n            textAlign: \"center\",\n            textShadow: `0 0 10px ${colors.imageGlow}`,\n          }}\n          data-testid=\"archetype-name\"\n        >\n          {korean}\n          <br />\n          <span\n            style={{\n              fontSize: isMobile ? \"16px\" : \"22px\",\n            }}\n          >\n            {english}\n          </span>\n        </h2>\n\n        {/* Philosophy/Description */}\n        <p\n          style={{\n            fontSize: isMobile ? \"12px\" : \"14px\",\n            color: colors.philosophyColor,\n            fontFamily: FONT_FAMILY.KOREAN,\n            margin: 0,\n            lineHeight: \"1.5\",\n            textAlign: \"center\",\n            fontStyle: \"italic\",\n          }}\n          data-testid=\"archetype-philosophy\"\n        >\n          {philosophy.korean}\n          <br />\n          {philosophy.english}\n        </p>\n\n        {/* Stats Visualization */}\n        <div\n          style={{\n            width: \"100%\",\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: \"8px\",\n            marginTop: `${gap / 2}px`,\n          }}\n          data-testid=\"archetype-stats\"\n        >\n          <div\n            style={{\n              fontSize: isMobile ? \"14px\" : \"16px\",\n              fontWeight: \"bold\",\n              fontFamily: FONT_FAMILY.KOREAN,\n              color: colors.cardColor,\n            }}\n          >\n            전투 능력치 | Combat Stats\n          </div>\n\n          {statBars.map((stat) => (\n            <StatBar\n              key={stat.label}\n              label={stat.label}\n              value={stat.value}\n              max={100}\n              color={color}\n              height={isMobile ? 10 : 12}\n              showValue={true}\n              isMobile={isMobile}\n            />\n          ))}\n        </div>\n\n        {/* Special Abilities */}\n        {specialAbilities.length > 0 && (\n          <div style={{ marginTop: `${gap / 2}px` }}>\n            <AbilityList\n              abilities={specialAbilities}\n              maxAbilities={3}\n              color={color}\n              isMobile={isMobile}\n            />\n          </div>\n        )}\n\n        {/* Select Button */}\n        {isSelected && showSelectButton && onConfirm && (\n          <div \n            style={{ marginTop: `${gap}px` }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            <BaseButtonOverlayHtml\n              korean=\"선택\"\n              english=\"Select\"\n              onClick={handleConfirmClick}\n              variant=\"primary\"\n              size={isMobile ? \"sm\" : \"md\"}\n              fullWidth={true}\n              testId={`select-button-${archetype}`}\n              isMobile={isMobile}\n              ariaLabel={`Select ${korean} ${english} archetype`}\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nArchetypeCard.displayName = \"ArchetypeCard\";\n\nexport default ArchetypeCard;\n"],"mappings":"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"}

package/lib/components/screens/intro/components/ArchetypeDisplayOverlayHtml.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ArchetypeDisplayOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/intro/components/ArchetypeDisplayOverlayHtml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAgBpD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE;QACd,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;QAC7B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;QACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QACvB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF,QAAQ,CAAC,UAAU,EAAE;QACnB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,QAAQ,CAAC,gBAAgB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC/C;AAED,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,CAAC,UAAU,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACnD,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,gCAAgC,CAoYhF,CAAC;AAIJ,eAAe,2BAA2B,CAAC"}
+{"version":3,"file":"ArchetypeDisplayOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/intro/components/ArchetypeDisplayOverlayHtml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAepD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,EAAE;QACd,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;QAC7B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;QACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QACvB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF,QAAQ,CAAC,UAAU,EAAE;QACnB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,QAAQ,CAAC,gBAAgB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC/C;AAED,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,CAAC,UAAU,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACnD,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;GAEG;AACH,eAAO,MAAM,2BAA2B,EAAE,KAAK,CAAC,EAAE,CAAC,gCAAgC,CA6XhF,CAAC;AAIJ,eAAe,2BAA2B,CAAC"}

package/lib/components/screens/intro/components/ArchetypeDisplayOverlayHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArchetypeDisplayOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/ArchetypeDisplayOverlayHtml.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport {\n  FALLBACK_ARCHETYPE_IMAGE,\n  FONT_FAMILY,\n  KOREAN_COLORS,\n} from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { getEnhancedKoreanOverlayStyles } from \"../../../../utils/koreanThemeHelpers\";\nimport {\n  getKoreanFontOptimization,\n  getNeonTextShadow,\n  getSmoothTransition,\n} from \"../../../../utils/visualEffects\";\nimport { StatBar } from \"./StatBarOverlayHtml\";\n\n// Enhanced shape matching PLAYER_ARCHETYPES_DATA entries\nexport interface ArchetypeDataShape {\n  readonly id: string;\n  readonly korean: string;\n  readonly english: string;\n  readonly description: string;\n  readonly color: number;\n  readonly textureKey: string;\n  readonly stats: {\n    readonly attackPower: number;\n    readonly defense: number;\n    readonly speed: number;\n    readonly technique: number;\n  };\n  readonly philosophy: {\n    readonly korean: string;\n    readonly english: string;\n  };\n  readonly specialAbilities?: readonly string[]; // Optional special abilities\n}\n\nexport interface ArchetypeDisplayOverlayHtmlProps {\n  readonly archetypes: readonly ArchetypeDataShape[];\n  readonly selectedIndex: number;\n  readonly onArchetypeChange: (index: number) => void;\n  readonly onPlaySFX: (sound: string) => void;\n  readonly width?: number;\n  readonly height?: number;\n  readonly isMobile?: boolean;\n}\n\n/**\n * HTML-based ArchetypeDisplay component for Three.js integration\n */\nexport const ArchetypeDisplayOverlayHtml: React.FC<ArchetypeDisplayOverlayHtmlProps> =\n  React.memo(\n    ({\n      archetypes,\n      selectedIndex,\n      onArchetypeChange,\n      onPlaySFX,\n      width = 800,\n      height = 300,\n      isMobile: _isMobile = false, // Kept for interface compatibility, layout uses width\n    }) => {\n      // Note: _isMobile intentionally unused - layout sizing uses width-based checks\n      void _isMobile;\n      const selectedArchetype = archetypes[selectedIndex];\n\n      // Responsive sizing with large desktop support - use width for layout\n      const isSmallScreen = width < 768;\n      const isLargeContainer = width >= 1100;\n      const archImageWidth = isSmallScreen ? 140 : isLargeContainer ? 120 : 180;\n      const archImageHeight = isSmallScreen\n        ? 200\n        : isLargeContainer\n          ? 170\n          : 260;\n      const containerPadding = isSmallScreen ? 20 : isLargeContainer ? 12 : 20;\n      const contentGap = isSmallScreen ? 10 : isLargeContainer ? 8 : 16;\n      const infoGap = isSmallScreen ? 8 : isLargeContainer ? 6 : 12;\n      const titleFontSize = isSmallScreen ? 14 : isLargeContainer ? 14 : 18;\n      const philosophyFontSize = isSmallScreen\n        ? 10\n        : isLargeContainer\n          ? 10\n          : 12;\n      const statBarHeight = isSmallScreen ? 10 : isLargeContainer ? 10 : 12;\n\n      const handlePrevious = useCallback(() => {\n        const newIndex =\n          selectedIndex === 0 ? archetypes.length - 1 : selectedIndex - 1;\n        onArchetypeChange(newIndex);\n        onPlaySFX(\"menu_hover\");\n      }, [selectedIndex, archetypes.length, onArchetypeChange, onPlaySFX]);\n\n      const handleNext = useCallback(() => {\n        const newIndex = (selectedIndex + 1) % archetypes.length;\n        onArchetypeChange(newIndex);\n        onPlaySFX(\"menu_hover\");\n      }, [selectedIndex, archetypes.length, onArchetypeChange, onPlaySFX]);\n\n      // Convert real stats to 0-1 scale for visualization\n      const combatStats = useMemo(() => {\n        const maxStatValue = 100;\n        return [\n          {\n            korean: \"공격\",\n            english: \"Attack\",\n            value: selectedArchetype.stats.attackPower / maxStatValue,\n            rawValue: selectedArchetype.stats.attackPower,\n          },\n          {\n            korean: \"방어\",\n            english: \"Defense\",\n            value: selectedArchetype.stats.defense / maxStatValue,\n            rawValue: selectedArchetype.stats.defense,\n          },\n          {\n            korean: \"속도\",\n            english: \"Speed\",\n            value: selectedArchetype.stats.speed / maxStatValue,\n            rawValue: selectedArchetype.stats.speed,\n          },\n          {\n            korean: \"기술\",\n            english: \"Technique\",\n            value: selectedArchetype.stats.technique / maxStatValue,\n            rawValue: selectedArchetype.stats.technique,\n          },\n        ];\n      }, [selectedArchetype.stats]);\n\n      // Memoize RGBA color calculations and enhanced styles\n      const colors = useMemo(\n        () => ({\n          archetypeColor: `#${selectedArchetype.color\n            .toString(16)\n            .padStart(6, \"0\")}`,\n          titleGold: `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(\n            6,\n            \"0\",\n          )}`,\n          statsBackground: hexToRgbaString(\n            KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n            0.9,\n          ),\n          statsBorder: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.5),\n          statBarBackground: hexToRgbaString(\n            KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n            1,\n          ),\n          statBarFill: hexToRgbaString(selectedArchetype.color, 0.9),\n        }),\n        [selectedArchetype.color],\n      );\n\n      // Enhanced overlay styles\n      const containerStyle = useMemo(\n        () => ({\n          ...getEnhancedKoreanOverlayStyles({\n            opacity: 0.95,\n            glowIntensity: \"medium\",\n            includeGradient: false,\n            includeBackdropBlur: false,\n            depthLayers: 3,\n          }),\n          width: `${width}px`,\n          height: `${height}px`,\n          display: \"flex\",\n          flexDirection: \"row\" as const,\n          alignItems: \"flex-start\",\n          justifyContent: \"flex-start\",\n          gap: `${contentGap}px`,\n          border: `2px solid ${colors.archetypeColor}`,\n          padding: `${containerPadding}px`,\n          position: \"relative\" as const,\n          overflow: \"hidden\" as const,\n        }),\n        [width, height, contentGap, containerPadding, colors.archetypeColor],\n      );\n\n      // Get archetype image path\n      const archetypeImagePath = useMemo(() => {\n        return `/assets/visual/archetypes/${selectedArchetype.textureKey}.png`;\n      }, [selectedArchetype.textureKey]);\n\n      return (\n        <div style={containerStyle} data-testid=\"archetype-display-container\">\n          {/* Left Side - Character Image and Navigation */}\n          <div\n            style={{\n              width: `${archImageWidth + 40}px`,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              gap: `${infoGap}px`,\n              flexShrink: 0,\n            }}\n            data-testid=\"archetype-image-section\"\n          >\n            {/* Character Image */}\n            <div\n              style={{\n                width: `${archImageWidth + 20}px`,\n                height: `${archImageHeight + 20}px`,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                position: \"relative\",\n                background: `radial-gradient(circle, ${colors.archetypeColor}26, transparent)`,\n                borderRadius: \"4px\",\n                border: `2px solid ${colors.archetypeColor}`,\n              }}\n              data-testid=\"archetype-image-container\"\n            >\n              <img\n                src={archetypeImagePath}\n                alt={`${selectedArchetype.korean} - ${selectedArchetype.english}`}\n                style={{\n                  width: `${archImageWidth}px`,\n                  height: `${archImageHeight}px`,\n                  objectFit: \"contain\",\n                  cursor: \"pointer\",\n                }}\n                onClick={handleNext}\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    handleNext();\n                  }\n                }}\n                tabIndex={0}\n                role=\"button\"\n                aria-label={`${selectedArchetype.korean} ${selectedArchetype.english} - Click or press Enter to cycle to next archetype`}\n                data-testid=\"archetype-image\"\n                onError={(e) => {\n                  // Fallback if image doesn't load: use Black Trigram logo, prevent infinite loop\n                  const target = e.currentTarget as HTMLImageElement;\n                  if (!target.src.endsWith(FALLBACK_ARCHETYPE_IMAGE)) {\n                    target.src = FALLBACK_ARCHETYPE_IMAGE;\n                    target.alt = `${selectedArchetype.korean} (image unavailable)`;\n                  }\n                }}\n              />\n            </div>\n\n            {/* Navigation Buttons */}\n            <div\n              style={{\n                display: \"flex\",\n                flexDirection: \"row\",\n                gap: \"8px\",\n                width: \"100%\",\n              }}\n              data-testid=\"archetype-navigation\"\n            >\n              <button\n                onClick={handlePrevious}\n                aria-label=\"Previous archetype\"\n                style={{\n                  flex: 1,\n                  height: \"30px\",\n                  fontSize: \"14px\",\n                  fontWeight: \"bold\",\n                  color: `#${KOREAN_COLORS.TEXT_PRIMARY.toString(16).padStart(\n                    6,\n                    \"0\",\n                  )}`,\n                  background: colors.statsBackground,\n                  border: `1px solid ${hexToRgbaString(\n                    KOREAN_COLORS.ACCENT_GOLD,\n                    0.7,\n                  )}`,\n                  borderRadius: \"4px\",\n                  cursor: \"pointer\",\n                }}\n                onFocus={(e) => {\n                  e.currentTarget.style.outline = `3px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}`;\n                  e.currentTarget.style.outlineOffset = \"2px\";\n                }}\n                onBlur={(e) => {\n                  e.currentTarget.style.outline = \"none\";\n                }}\n                data-testid=\"prev-archetype-button\"\n              >\n                ◀\n              </button>\n              <button\n                onClick={handleNext}\n                aria-label=\"Next archetype\"\n                style={{\n                  flex: 1,\n                  height: \"30px\",\n                  fontSize: \"14px\",\n                  fontWeight: \"bold\",\n                  color: `#${KOREAN_COLORS.TEXT_PRIMARY.toString(16).padStart(\n                    6,\n                    \"0\",\n                  )}`,\n                  background: colors.statsBackground,\n                  border: `1px solid ${hexToRgbaString(\n                    KOREAN_COLORS.ACCENT_GOLD,\n                    0.7,\n                  )}`,\n                  borderRadius: \"4px\",\n                  cursor: \"pointer\",\n                }}\n                onFocus={(e) => {\n                  e.currentTarget.style.outline = `3px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}`;\n                  e.currentTarget.style.outlineOffset = \"2px\";\n                }}\n                onBlur={(e) => {\n                  e.currentTarget.style.outline = \"none\";\n                }}\n                data-testid=\"next-archetype-button\"\n              >\n                ▶\n              </button>\n            </div>\n          </div>\n\n          {/* Right Side - Archetype Information */}\n          <div\n            style={{\n              flex: 1,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"flex-start\",\n              justifyContent: \"flex-start\",\n              gap: `${infoGap}px`,\n              minWidth: 0,\n              overflow: \"hidden\",\n            }}\n            data-testid=\"archetype-info\"\n          >\n            {/* Header with name and counter */}\n            <div\n              style={{\n                width: \"100%\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                justifyContent: \"space-between\",\n              }}\n            >\n              <div\n                style={{\n                  fontSize: `${titleFontSize}px`,\n                  fontWeight: \"bold\",\n                  fontFamily: FONT_FAMILY.KOREAN,\n                  color: colors.archetypeColor,\n                  textShadow: getNeonTextShadow(\n                    selectedArchetype.color,\n                    \"strong\",\n                  ),\n                  transition: getSmoothTransition(\"all\", \"normal\"),\n                }}\n                data-testid=\"archetype-title\"\n              >\n                {selectedArchetype.korean} | {selectedArchetype.english}\n              </div>\n              <div\n                style={{\n                  fontSize: \"12px\",\n                  fontWeight: \"bold\",\n                  fontFamily: FONT_FAMILY.PRIMARY,\n                  color: colors.archetypeColor,\n                  textShadow: getNeonTextShadow(\n                    selectedArchetype.color,\n                    \"subtle\",\n                  ),\n                }}\n                data-testid=\"archetype-counter\"\n              >\n                {selectedIndex + 1} / {archetypes.length}\n              </div>\n            </div>\n\n            {/* Philosophy */}\n            <div\n              style={{\n                fontSize: `${philosophyFontSize}px`,\n                fontStyle: \"italic\",\n                fontFamily: FONT_FAMILY.KOREAN,\n                color: `#${KOREAN_COLORS.TEXT_SECONDARY.toString(16).padStart(\n                  6,\n                  \"0\",\n                )}`,\n                lineHeight: \"1.4\",\n                ...getKoreanFontOptimization(philosophyFontSize, \"normal\"),\n                transition: getSmoothTransition(\"all\", \"normal\"),\n              }}\n              data-testid=\"archetype-philosophy\"\n            >\n              {selectedArchetype.philosophy.korean} |{\" \"}\n              {selectedArchetype.philosophy.english}\n            </div>\n\n            {/* Combat Stats */}\n            <div\n              style={{\n                width: \"100%\",\n                display: \"flex\",\n                flexDirection: \"column\",\n                gap: \"8px\",\n              }}\n              data-testid=\"combat-stats\"\n            >\n              <div\n                style={{\n                  fontSize: isSmallScreen ? \"12px\" : \"14px\",\n                  fontWeight: \"bold\",\n                  fontFamily: FONT_FAMILY.KOREAN,\n                  color: `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(\n                    6,\n                    \"0\",\n                  )}`,\n                }}\n              >\n                전투 능력치 | Combat Stats\n              </div>\n\n              {/* Individual stat bars using refactored StatBar component */}\n              {combatStats.map((stat) => (\n                <StatBar\n                  key={stat.korean}\n                  label={`${stat.korean} | ${stat.english}`}\n                  value={stat.rawValue}\n                  max={100}\n                  color={selectedArchetype.color}\n                  height={statBarHeight}\n                  showValue={true}\n                  isMobile={isSmallScreen}\n                />\n              ))}\n            </div>\n          </div>\n        </div>\n      );\n    },\n  );\n\nArchetypeDisplayOverlayHtml.displayName = \"ArchetypeDisplayOverlayHtml\";\n\nexport default ArchetypeDisplayOverlayHtml;\n"],"mappings":"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"}
+{"version":3,"file":"ArchetypeDisplayOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/ArchetypeDisplayOverlayHtml.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport {\n  FALLBACK_ARCHETYPE_IMAGE,\n  FONT_FAMILY,\n  KOREAN_COLORS,\n} from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { getEnhancedKoreanOverlayStyles } from \"../../../../utils/koreanThemeHelpers\";\nimport {\n  getKoreanFontOptimization,\n  getNeonTextShadow,\n  getSmoothTransition,\n} from \"../../../../utils/visualEffects\";\nimport { StatBar } from \"./StatBarOverlayHtml\";\n\nexport interface ArchetypeDataShape {\n  readonly id: string;\n  readonly korean: string;\n  readonly english: string;\n  readonly description: string;\n  readonly color: number;\n  readonly textureKey: string;\n  readonly stats: {\n    readonly attackPower: number;\n    readonly defense: number;\n    readonly speed: number;\n    readonly technique: number;\n  };\n  readonly philosophy: {\n    readonly korean: string;\n    readonly english: string;\n  };\n  readonly specialAbilities?: readonly string[]; // Optional special abilities\n}\n\nexport interface ArchetypeDisplayOverlayHtmlProps {\n  readonly archetypes: readonly ArchetypeDataShape[];\n  readonly selectedIndex: number;\n  readonly onArchetypeChange: (index: number) => void;\n  readonly onPlaySFX: (sound: string) => void;\n  readonly width?: number;\n  readonly height?: number;\n  readonly isMobile?: boolean;\n}\n\n/**\n * HTML-based ArchetypeDisplay component for Three.js integration\n */\nexport const ArchetypeDisplayOverlayHtml: React.FC<ArchetypeDisplayOverlayHtmlProps> =\n  React.memo(\n    ({\n      archetypes,\n      selectedIndex,\n      onArchetypeChange,\n      onPlaySFX,\n      width = 800,\n      height = 300,\n      isMobile: _isMobile = false, // Kept for interface compatibility, layout uses width\n    }) => {\n      void _isMobile;\n      const selectedArchetype = archetypes[selectedIndex];\n\n      const isSmallScreen = width < 768;\n      const isLargeContainer = width >= 1100;\n      const archImageWidth = isSmallScreen ? 140 : isLargeContainer ? 120 : 180;\n      const archImageHeight = isSmallScreen\n        ? 200\n        : isLargeContainer\n          ? 170\n          : 260;\n      const containerPadding = isSmallScreen ? 20 : isLargeContainer ? 12 : 20;\n      const contentGap = isSmallScreen ? 10 : isLargeContainer ? 8 : 16;\n      const infoGap = isSmallScreen ? 8 : isLargeContainer ? 6 : 12;\n      const titleFontSize = isSmallScreen ? 14 : isLargeContainer ? 14 : 18;\n      const philosophyFontSize = isSmallScreen\n        ? 10\n        : isLargeContainer\n          ? 10\n          : 12;\n      const statBarHeight = isSmallScreen ? 10 : isLargeContainer ? 10 : 12;\n\n      const handlePrevious = useCallback(() => {\n        const newIndex =\n          selectedIndex === 0 ? archetypes.length - 1 : selectedIndex - 1;\n        onArchetypeChange(newIndex);\n        onPlaySFX(\"menu_hover\");\n      }, [selectedIndex, archetypes.length, onArchetypeChange, onPlaySFX]);\n\n      const handleNext = useCallback(() => {\n        const newIndex = (selectedIndex + 1) % archetypes.length;\n        onArchetypeChange(newIndex);\n        onPlaySFX(\"menu_hover\");\n      }, [selectedIndex, archetypes.length, onArchetypeChange, onPlaySFX]);\n\n      const combatStats = useMemo(() => {\n        const maxStatValue = 100;\n        return [\n          {\n            korean: \"공격\",\n            english: \"Attack\",\n            value: selectedArchetype.stats.attackPower / maxStatValue,\n            rawValue: selectedArchetype.stats.attackPower,\n          },\n          {\n            korean: \"방어\",\n            english: \"Defense\",\n            value: selectedArchetype.stats.defense / maxStatValue,\n            rawValue: selectedArchetype.stats.defense,\n          },\n          {\n            korean: \"속도\",\n            english: \"Speed\",\n            value: selectedArchetype.stats.speed / maxStatValue,\n            rawValue: selectedArchetype.stats.speed,\n          },\n          {\n            korean: \"기술\",\n            english: \"Technique\",\n            value: selectedArchetype.stats.technique / maxStatValue,\n            rawValue: selectedArchetype.stats.technique,\n          },\n        ];\n      }, [selectedArchetype.stats]);\n\n      const colors = useMemo(\n        () => ({\n          archetypeColor: `#${selectedArchetype.color\n            .toString(16)\n            .padStart(6, \"0\")}`,\n          titleGold: `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(\n            6,\n            \"0\",\n          )}`,\n          statsBackground: hexToRgbaString(\n            KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n            0.9,\n          ),\n          statsBorder: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.5),\n          statBarBackground: hexToRgbaString(\n            KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n            1,\n          ),\n          statBarFill: hexToRgbaString(selectedArchetype.color, 0.9),\n        }),\n        [selectedArchetype.color],\n      );\n\n      const containerStyle = useMemo(\n        () => ({\n          ...getEnhancedKoreanOverlayStyles({\n            opacity: 0.95,\n            glowIntensity: \"medium\",\n            includeGradient: false,\n            includeBackdropBlur: false,\n            depthLayers: 3,\n          }),\n          width: `${width}px`,\n          height: `${height}px`,\n          display: \"flex\",\n          flexDirection: \"row\" as const,\n          alignItems: \"flex-start\",\n          justifyContent: \"flex-start\",\n          gap: `${contentGap}px`,\n          border: `2px solid ${colors.archetypeColor}`,\n          padding: `${containerPadding}px`,\n          position: \"relative\" as const,\n          overflow: \"hidden\" as const,\n        }),\n        [width, height, contentGap, containerPadding, colors.archetypeColor],\n      );\n\n      const archetypeImagePath = useMemo(() => {\n        return `/assets/visual/archetypes/${selectedArchetype.textureKey}.png`;\n      }, [selectedArchetype.textureKey]);\n\n      return (\n        <div style={containerStyle} data-testid=\"archetype-display-container\">\n          {/* Left Side - Character Image and Navigation */}\n          <div\n            style={{\n              width: `${archImageWidth + 40}px`,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              gap: `${infoGap}px`,\n              flexShrink: 0,\n            }}\n            data-testid=\"archetype-image-section\"\n          >\n            {/* Character Image */}\n            <div\n              style={{\n                width: `${archImageWidth + 20}px`,\n                height: `${archImageHeight + 20}px`,\n                display: \"flex\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                position: \"relative\",\n                background: `radial-gradient(circle, ${colors.archetypeColor}26, transparent)`,\n                borderRadius: \"4px\",\n                border: `2px solid ${colors.archetypeColor}`,\n              }}\n              data-testid=\"archetype-image-container\"\n            >\n              <img\n                src={archetypeImagePath}\n                alt={`${selectedArchetype.korean} - ${selectedArchetype.english}`}\n                style={{\n                  width: `${archImageWidth}px`,\n                  height: `${archImageHeight}px`,\n                  objectFit: \"contain\",\n                  cursor: \"pointer\",\n                }}\n                onClick={handleNext}\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    handleNext();\n                  }\n                }}\n                tabIndex={0}\n                role=\"button\"\n                aria-label={`${selectedArchetype.korean} ${selectedArchetype.english} - Click or press Enter to cycle to next archetype`}\n                data-testid=\"archetype-image\"\n                onError={(e) => {\n                  const target = e.currentTarget as HTMLImageElement;\n                  if (!target.src.endsWith(FALLBACK_ARCHETYPE_IMAGE)) {\n                    target.src = FALLBACK_ARCHETYPE_IMAGE;\n                    target.alt = `${selectedArchetype.korean} (image unavailable)`;\n                  }\n                }}\n              />\n            </div>\n\n            {/* Navigation Buttons */}\n            <div\n              style={{\n                display: \"flex\",\n                flexDirection: \"row\",\n                gap: \"8px\",\n                width: \"100%\",\n              }}\n              data-testid=\"archetype-navigation\"\n            >\n              <button\n                onClick={handlePrevious}\n                aria-label=\"Previous archetype\"\n                style={{\n                  flex: 1,\n                  height: \"30px\",\n                  fontSize: \"14px\",\n                  fontWeight: \"bold\",\n                  color: `#${KOREAN_COLORS.TEXT_PRIMARY.toString(16).padStart(\n                    6,\n                    \"0\",\n                  )}`,\n                  background: colors.statsBackground,\n                  border: `1px solid ${hexToRgbaString(\n                    KOREAN_COLORS.ACCENT_GOLD,\n                    0.7,\n                  )}`,\n                  borderRadius: \"4px\",\n                  cursor: \"pointer\",\n                }}\n                onFocus={(e) => {\n                  e.currentTarget.style.outline = `3px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}`;\n                  e.currentTarget.style.outlineOffset = \"2px\";\n                }}\n                onBlur={(e) => {\n                  e.currentTarget.style.outline = \"none\";\n                }}\n                data-testid=\"prev-archetype-button\"\n              >\n                ◀\n              </button>\n              <button\n                onClick={handleNext}\n                aria-label=\"Next archetype\"\n                style={{\n                  flex: 1,\n                  height: \"30px\",\n                  fontSize: \"14px\",\n                  fontWeight: \"bold\",\n                  color: `#${KOREAN_COLORS.TEXT_PRIMARY.toString(16).padStart(\n                    6,\n                    \"0\",\n                  )}`,\n                  background: colors.statsBackground,\n                  border: `1px solid ${hexToRgbaString(\n                    KOREAN_COLORS.ACCENT_GOLD,\n                    0.7,\n                  )}`,\n                  borderRadius: \"4px\",\n                  cursor: \"pointer\",\n                }}\n                onFocus={(e) => {\n                  e.currentTarget.style.outline = `3px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}`;\n                  e.currentTarget.style.outlineOffset = \"2px\";\n                }}\n                onBlur={(e) => {\n                  e.currentTarget.style.outline = \"none\";\n                }}\n                data-testid=\"next-archetype-button\"\n              >\n                ▶\n              </button>\n            </div>\n          </div>\n\n          {/* Right Side - Archetype Information */}\n          <div\n            style={{\n              flex: 1,\n              display: \"flex\",\n              flexDirection: \"column\",\n              alignItems: \"flex-start\",\n              justifyContent: \"flex-start\",\n              gap: `${infoGap}px`,\n              minWidth: 0,\n              overflow: \"hidden\",\n            }}\n            data-testid=\"archetype-info\"\n          >\n            {/* Header with name and counter */}\n            <div\n              style={{\n                width: \"100%\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                justifyContent: \"space-between\",\n              }}\n            >\n              <div\n                style={{\n                  fontSize: `${titleFontSize}px`,\n                  fontWeight: \"bold\",\n                  fontFamily: FONT_FAMILY.KOREAN,\n                  color: colors.archetypeColor,\n                  textShadow: getNeonTextShadow(\n                    selectedArchetype.color,\n                    \"strong\",\n                  ),\n                  transition: getSmoothTransition(\"all\", \"normal\"),\n                }}\n                data-testid=\"archetype-title\"\n              >\n                {selectedArchetype.korean} | {selectedArchetype.english}\n              </div>\n              <div\n                style={{\n                  fontSize: \"12px\",\n                  fontWeight: \"bold\",\n                  fontFamily: FONT_FAMILY.PRIMARY,\n                  color: colors.archetypeColor,\n                  textShadow: getNeonTextShadow(\n                    selectedArchetype.color,\n                    \"subtle\",\n                  ),\n                }}\n                data-testid=\"archetype-counter\"\n              >\n                {selectedIndex + 1} / {archetypes.length}\n              </div>\n            </div>\n\n            {/* Philosophy */}\n            <div\n              style={{\n                fontSize: `${philosophyFontSize}px`,\n                fontStyle: \"italic\",\n                fontFamily: FONT_FAMILY.KOREAN,\n                color: `#${KOREAN_COLORS.TEXT_SECONDARY.toString(16).padStart(\n                  6,\n                  \"0\",\n                )}`,\n                lineHeight: \"1.4\",\n                ...getKoreanFontOptimization(philosophyFontSize, \"normal\"),\n                transition: getSmoothTransition(\"all\", \"normal\"),\n              }}\n              data-testid=\"archetype-philosophy\"\n            >\n              {selectedArchetype.philosophy.korean} |{\" \"}\n              {selectedArchetype.philosophy.english}\n            </div>\n\n            {/* Combat Stats */}\n            <div\n              style={{\n                width: \"100%\",\n                display: \"flex\",\n                flexDirection: \"column\",\n                gap: \"8px\",\n              }}\n              data-testid=\"combat-stats\"\n            >\n              <div\n                style={{\n                  fontSize: isSmallScreen ? \"12px\" : \"14px\",\n                  fontWeight: \"bold\",\n                  fontFamily: FONT_FAMILY.KOREAN,\n                  color: `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(\n                    6,\n                    \"0\",\n                  )}`,\n                }}\n              >\n                전투 능력치 | Combat Stats\n              </div>\n\n              {/* Individual stat bars using refactored StatBar component */}\n              {combatStats.map((stat) => (\n                <StatBar\n                  key={stat.korean}\n                  label={`${stat.korean} | ${stat.english}`}\n                  value={stat.rawValue}\n                  max={100}\n                  color={selectedArchetype.color}\n                  height={statBarHeight}\n                  showValue={true}\n                  isMobile={isSmallScreen}\n                />\n              ))}\n            </div>\n          </div>\n        </div>\n      );\n    },\n  );\n\nArchetypeDisplayOverlayHtml.displayName = \"ArchetypeDisplayOverlayHtml\";\n\nexport default ArchetypeDisplayOverlayHtml;\n"],"mappings":"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"}

package/lib/components/screens/intro/components/EnhancedArchetypeDisplayOverlayHtml.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnhancedArchetypeDisplayOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/intro/components/EnhancedArchetypeDisplayOverlayHtml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,OAAO,EACL,kBAAkB,EAEnB,MAAM,+BAA+B,CAAC;AAEvC,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,CAAC,UAAU,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACnD,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CACtC;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CA4H1E,CAAC;AAIJ,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"EnhancedArchetypeDisplayOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/intro/components/EnhancedArchetypeDisplayOverlayHtml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAI9D,OAAO,EACL,kBAAkB,EAEnB,MAAM,+BAA+B,CAAC;AAEvC,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,CAAC,UAAU,EAAE,SAAS,kBAAkB,EAAE,CAAC;IACnD,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,QAAQ,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CACtC;AAED;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAsH1E,CAAC;AAIJ,eAAe,wBAAwB,CAAC"}

package/lib/components/screens/intro/components/EnhancedArchetypeDisplayOverlayHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnhancedArchetypeDisplayOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/EnhancedArchetypeDisplayOverlayHtml.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { PlayerArchetype } from \"../../../../types/common\";\nimport { BaseButtonOverlayHtml } from \"../../../shared/base/BaseButtonOverlayHtml\";\nimport { ArchetypeCardGrid } from \"./ArchetypeCardGridOverlayHtml\";\nimport {\n  ArchetypeDataShape,\n  ArchetypeDisplayOverlayHtml,\n} from \"./ArchetypeDisplayOverlayHtml\";\n\nexport interface EnhancedArchetypeDisplayProps {\n  readonly archetypes: readonly ArchetypeDataShape[];\n  readonly selectedIndex: number;\n  readonly onArchetypeChange: (index: number) => void;\n  readonly onPlaySFX: (sound: string) => void;\n  readonly width?: number;\n  readonly height?: number;\n  readonly isMobile?: boolean; // For controls/haptics only, use width for layout sizing\n  readonly allowDetailedView?: boolean; // Allow switching to card grid view\n}\n\n/**\n * EnhancedArchetypeDisplay - Provides both compact and detailed card view modes\n * Can switch between ArchetypeDisplayOverlayHtml (compact) and ArchetypeCardGrid (detailed)\n */\nexport const EnhancedArchetypeDisplay: React.FC<EnhancedArchetypeDisplayProps> =\n  React.memo(\n    ({\n      archetypes,\n      selectedIndex,\n      onArchetypeChange,\n      onPlaySFX,\n      width = 800,\n      height = 300,\n      isMobile = false,\n      allowDetailedView = true,\n    }) => {\n      const [viewMode, setViewMode] = useState<\"compact\" | \"detailed\">(\n        \"compact\",\n      );\n\n      // Use width for layout sizing decisions\n      const isSmallScreen = width < 768;\n\n      // Convert archetype data to card data format\n      const cardData = useMemo(() => {\n        return archetypes.map((archetype) => ({\n          archetype: Object.values(PlayerArchetype).find(\n            (key) => key === archetype.id,\n          ) as PlayerArchetype,\n          id: archetype.id,\n          korean: archetype.korean,\n          english: archetype.english,\n          description: archetype.description,\n          color: archetype.color,\n          textureKey: archetype.textureKey,\n          stats: archetype.stats,\n          philosophy: archetype.philosophy,\n          specialAbilities: archetype.specialAbilities ?? [], // Use actual data or empty array\n        }));\n      }, [archetypes]);\n\n      // Get current archetype\n      const currentArchetype = useMemo(() => {\n        const archetype = archetypes[selectedIndex];\n        return Object.values(PlayerArchetype).find(\n          (key) => key === archetype.id,\n        ) as PlayerArchetype;\n      }, [archetypes, selectedIndex]);\n\n      // Toggle view mode\n      const handleToggleView = useCallback(() => {\n        setViewMode((prev) => (prev === \"compact\" ? \"detailed\" : \"compact\"));\n        onPlaySFX(\"menu_hover\");\n      }, [onPlaySFX]);\n\n      // Handle archetype change from card grid\n      const handleArchetypeChangeFromGrid = useCallback(\n        (archetype: PlayerArchetype) => {\n          const index = archetypes.findIndex((a) => a.id === archetype);\n          if (index !== -1) {\n            onArchetypeChange(index);\n          }\n        },\n        [archetypes, onArchetypeChange],\n      );\n\n      // Memoize height calculation for detailed view (minimum 600px or 2x compact height)\n      const detailedHeight = useMemo(\n        () => Math.max(height * 2, 600),\n        [height],\n      );\n\n      return (\n        <div\n          style={{\n            width: `${width}px`,\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: isSmallScreen ? \"10px\" : \"16px\",\n          }}\n          data-testid=\"enhanced-archetype-display\"\n        >\n          {/* View toggle button (only show if allowed and not small screen) */}\n          {allowDetailedView && !isSmallScreen && (\n            <div\n              style={{\n                display: \"flex\",\n                justifyContent: \"flex-end\",\n                width: \"100%\",\n              }}\n            >\n              <BaseButtonOverlayHtml\n                korean={viewMode === \"compact\" ? \"상세 보기\" : \"간단 보기\"}\n                english={viewMode === \"compact\" ? \"Detailed View\" : \"Compact View\"}\n                onClick={handleToggleView}\n                variant=\"secondary\"\n                size=\"sm\"\n                testId=\"view-toggle-button\"\n                ariaLabel={`Toggle ${viewMode === \"compact\" ? \"detailed\" : \"compact\"} view`}\n              />\n            </div>\n          )}\n\n          {/* Render appropriate view */}\n          {viewMode === \"compact\" ? (\n            <ArchetypeDisplayOverlayHtml\n              archetypes={archetypes}\n              selectedIndex={selectedIndex}\n              onArchetypeChange={onArchetypeChange}\n              onPlaySFX={onPlaySFX}\n              width={width}\n              height={height}\n              isMobile={isMobile}\n            />\n          ) : (\n            <ArchetypeCardGrid\n              archetypes={cardData}\n              selectedArchetype={currentArchetype}\n              onArchetypeChange={handleArchetypeChangeFromGrid}\n              onPlaySFX={onPlaySFX}\n              width={width}\n              height={detailedHeight}\n              isMobile={isMobile}\n            />\n          )}\n        </div>\n      );\n    },\n  );\n\nEnhancedArchetypeDisplay.displayName = \"EnhancedArchetypeDisplay\";\n\nexport default EnhancedArchetypeDisplay;\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,2BACX,MAAM,MACH,EACC,YACA,eACA,mBACA,WACA,QAAQ,KACR,SAAS,KACT,WAAW,OACX,oBAAoB,WAChB;CACJ,MAAM,CAAC,UAAU,eAAe,SAC9B,UACD;CAGD,MAAM,gBAAgB,QAAQ;CAG9B,MAAM,WAAW,cAAc;EAC7B,OAAO,WAAW,KAAK,eAAe;GACpC,WAAW,OAAO,OAAO,gBAAgB,CAAC,MACvC,QAAQ,QAAQ,UAAU,GAC5B;GACD,IAAI,UAAU;GACd,QAAQ,UAAU;GAClB,SAAS,UAAU;GACnB,aAAa,UAAU;GACvB,OAAO,UAAU;GACjB,YAAY,UAAU;GACtB,OAAO,UAAU;GACjB,YAAY,UAAU;GACtB,kBAAkB,UAAU,oBAAoB,EAAE;GACnD,EAAE;IACF,CAAC,WAAW,CAAC;CAGhB,MAAM,mBAAmB,cAAc;EACrC,MAAM,YAAY,WAAW;EAC7B,OAAO,OAAO,OAAO,gBAAgB,CAAC,MACnC,QAAQ,QAAQ,UAAU,GAC5B;IACA,CAAC,YAAY,cAAc,CAAC;CAG/B,MAAM,mBAAmB,kBAAkB;EACzC,aAAa,SAAU,SAAS,YAAY,aAAa,UAAW;EACpE,UAAU,aAAa;IACtB,CAAC,UAAU,CAAC;CAGf,MAAM,gCAAgC,aACnC,cAA+B;EAC9B,MAAM,QAAQ,WAAW,WAAW,MAAM,EAAE,OAAO,UAAU;EAC7D,IAAI,UAAU,IACZ,kBAAkB,MAAM;IAG5B,CAAC,YAAY,kBAAkB,CAChC;CAGD,MAAM,iBAAiB,cACf,KAAK,IAAI,SAAS,GAAG,IAAI,EAC/B,CAAC,OAAO,CACT;CAED,OACE,qBAAC,OAAD;EACE,OAAO;GACL,OAAO,GAAG,MAAM;GAChB,SAAS;GACT,eAAe;GACf,KAAK,gBAAgB,SAAS;GAC/B;EACD,eAAY;YAPd,CAUG,qBAAqB,CAAC,iBACrB,oBAAC,OAAD;GACE,OAAO;IACL,SAAS;IACT,gBAAgB;IAChB,OAAO;IACR;aAED,oBAAC,uBAAD;IACE,QAAQ,aAAa,YAAY,UAAU;IAC3C,SAAS,aAAa,YAAY,kBAAkB;IACpD,SAAS;IACT,SAAQ;IACR,MAAK;IACL,QAAO;IACP,WAAW,UAAU,aAAa,YAAY,aAAa,UAAU;IACrE,CAAA;GACE,CAAA,EAIP,aAAa,YACZ,oBAAC,6BAAD;GACc;GACG;GACI;GACR;GACJ;GACC;GACE;GACV,CAAA,GAEF,oBAAC,mBAAD;GACE,YAAY;GACZ,mBAAmB;GACnB,mBAAmB;GACR;GACJ;GACP,QAAQ;GACE;GACV,CAAA,CAEA;;EAGX;AAEH,yBAAyB,cAAc"}
+{"version":3,"file":"EnhancedArchetypeDisplayOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/EnhancedArchetypeDisplayOverlayHtml.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState } from \"react\";\nimport { PlayerArchetype } from \"../../../../types/common\";\nimport { BaseButtonOverlayHtml } from \"../../../shared/base/BaseButtonOverlayHtml\";\nimport { ArchetypeCardGrid } from \"./ArchetypeCardGridOverlayHtml\";\nimport {\n  ArchetypeDataShape,\n  ArchetypeDisplayOverlayHtml,\n} from \"./ArchetypeDisplayOverlayHtml\";\n\nexport interface EnhancedArchetypeDisplayProps {\n  readonly archetypes: readonly ArchetypeDataShape[];\n  readonly selectedIndex: number;\n  readonly onArchetypeChange: (index: number) => void;\n  readonly onPlaySFX: (sound: string) => void;\n  readonly width?: number;\n  readonly height?: number;\n  readonly isMobile?: boolean; // For controls/haptics only, use width for layout sizing\n  readonly allowDetailedView?: boolean; // Allow switching to card grid view\n}\n\n/**\n * EnhancedArchetypeDisplay - Provides both compact and detailed card view modes\n * Can switch between ArchetypeDisplayOverlayHtml (compact) and ArchetypeCardGrid (detailed)\n */\nexport const EnhancedArchetypeDisplay: React.FC<EnhancedArchetypeDisplayProps> =\n  React.memo(\n    ({\n      archetypes,\n      selectedIndex,\n      onArchetypeChange,\n      onPlaySFX,\n      width = 800,\n      height = 300,\n      isMobile = false,\n      allowDetailedView = true,\n    }) => {\n      const [viewMode, setViewMode] = useState<\"compact\" | \"detailed\">(\n        \"compact\",\n      );\n\n      const isSmallScreen = width < 768;\n\n      const cardData = useMemo(() => {\n        return archetypes.map((archetype) => ({\n          archetype: Object.values(PlayerArchetype).find(\n            (key) => key === archetype.id,\n          ) as PlayerArchetype,\n          id: archetype.id,\n          korean: archetype.korean,\n          english: archetype.english,\n          description: archetype.description,\n          color: archetype.color,\n          textureKey: archetype.textureKey,\n          stats: archetype.stats,\n          philosophy: archetype.philosophy,\n          specialAbilities: archetype.specialAbilities ?? [], // Use actual data or empty array\n        }));\n      }, [archetypes]);\n\n      const currentArchetype = useMemo(() => {\n        const archetype = archetypes[selectedIndex];\n        return Object.values(PlayerArchetype).find(\n          (key) => key === archetype.id,\n        ) as PlayerArchetype;\n      }, [archetypes, selectedIndex]);\n\n      const handleToggleView = useCallback(() => {\n        setViewMode((prev) => (prev === \"compact\" ? \"detailed\" : \"compact\"));\n        onPlaySFX(\"menu_hover\");\n      }, [onPlaySFX]);\n\n      const handleArchetypeChangeFromGrid = useCallback(\n        (archetype: PlayerArchetype) => {\n          const index = archetypes.findIndex((a) => a.id === archetype);\n          if (index !== -1) {\n            onArchetypeChange(index);\n          }\n        },\n        [archetypes, onArchetypeChange],\n      );\n\n      const detailedHeight = useMemo(\n        () => Math.max(height * 2, 600),\n        [height],\n      );\n\n      return (\n        <div\n          style={{\n            width: `${width}px`,\n            display: \"flex\",\n            flexDirection: \"column\",\n            gap: isSmallScreen ? \"10px\" : \"16px\",\n          }}\n          data-testid=\"enhanced-archetype-display\"\n        >\n          {/* View toggle button (only show if allowed and not small screen) */}\n          {allowDetailedView && !isSmallScreen && (\n            <div\n              style={{\n                display: \"flex\",\n                justifyContent: \"flex-end\",\n                width: \"100%\",\n              }}\n            >\n              <BaseButtonOverlayHtml\n                korean={viewMode === \"compact\" ? \"상세 보기\" : \"간단 보기\"}\n                english={viewMode === \"compact\" ? \"Detailed View\" : \"Compact View\"}\n                onClick={handleToggleView}\n                variant=\"secondary\"\n                size=\"sm\"\n                testId=\"view-toggle-button\"\n                ariaLabel={`Toggle ${viewMode === \"compact\" ? \"detailed\" : \"compact\"} view`}\n              />\n            </div>\n          )}\n\n          {/* Render appropriate view */}\n          {viewMode === \"compact\" ? (\n            <ArchetypeDisplayOverlayHtml\n              archetypes={archetypes}\n              selectedIndex={selectedIndex}\n              onArchetypeChange={onArchetypeChange}\n              onPlaySFX={onPlaySFX}\n              width={width}\n              height={height}\n              isMobile={isMobile}\n            />\n          ) : (\n            <ArchetypeCardGrid\n              archetypes={cardData}\n              selectedArchetype={currentArchetype}\n              onArchetypeChange={handleArchetypeChangeFromGrid}\n              onPlaySFX={onPlaySFX}\n              width={width}\n              height={detailedHeight}\n              isMobile={isMobile}\n            />\n          )}\n        </div>\n      );\n    },\n  );\n\nEnhancedArchetypeDisplay.displayName = \"EnhancedArchetypeDisplay\";\n\nexport default EnhancedArchetypeDisplay;\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,2BACX,MAAM,MACH,EACC,YACA,eACA,mBACA,WACA,QAAQ,KACR,SAAS,KACT,WAAW,OACX,oBAAoB,WAChB;CACJ,MAAM,CAAC,UAAU,eAAe,SAC9B,UACD;CAED,MAAM,gBAAgB,QAAQ;CAE9B,MAAM,WAAW,cAAc;EAC7B,OAAO,WAAW,KAAK,eAAe;GACpC,WAAW,OAAO,OAAO,gBAAgB,CAAC,MACvC,QAAQ,QAAQ,UAAU,GAC5B;GACD,IAAI,UAAU;GACd,QAAQ,UAAU;GAClB,SAAS,UAAU;GACnB,aAAa,UAAU;GACvB,OAAO,UAAU;GACjB,YAAY,UAAU;GACtB,OAAO,UAAU;GACjB,YAAY,UAAU;GACtB,kBAAkB,UAAU,oBAAoB,EAAE;GACnD,EAAE;IACF,CAAC,WAAW,CAAC;CAEhB,MAAM,mBAAmB,cAAc;EACrC,MAAM,YAAY,WAAW;EAC7B,OAAO,OAAO,OAAO,gBAAgB,CAAC,MACnC,QAAQ,QAAQ,UAAU,GAC5B;IACA,CAAC,YAAY,cAAc,CAAC;CAE/B,MAAM,mBAAmB,kBAAkB;EACzC,aAAa,SAAU,SAAS,YAAY,aAAa,UAAW;EACpE,UAAU,aAAa;IACtB,CAAC,UAAU,CAAC;CAEf,MAAM,gCAAgC,aACnC,cAA+B;EAC9B,MAAM,QAAQ,WAAW,WAAW,MAAM,EAAE,OAAO,UAAU;EAC7D,IAAI,UAAU,IACZ,kBAAkB,MAAM;IAG5B,CAAC,YAAY,kBAAkB,CAChC;CAED,MAAM,iBAAiB,cACf,KAAK,IAAI,SAAS,GAAG,IAAI,EAC/B,CAAC,OAAO,CACT;CAED,OACE,qBAAC,OAAD;EACE,OAAO;GACL,OAAO,GAAG,MAAM;GAChB,SAAS;GACT,eAAe;GACf,KAAK,gBAAgB,SAAS;GAC/B;EACD,eAAY;YAPd,CAUG,qBAAqB,CAAC,iBACrB,oBAAC,OAAD;GACE,OAAO;IACL,SAAS;IACT,gBAAgB;IAChB,OAAO;IACR;aAED,oBAAC,uBAAD;IACE,QAAQ,aAAa,YAAY,UAAU;IAC3C,SAAS,aAAa,YAAY,kBAAkB;IACpD,SAAS;IACT,SAAQ;IACR,MAAK;IACL,QAAO;IACP,WAAW,UAAU,aAAa,YAAY,aAAa,UAAU;IACrE,CAAA;GACE,CAAA,EAIP,aAAa,YACZ,oBAAC,6BAAD;GACc;GACG;GACI;GACR;GACJ;GACC;GACE;GACV,CAAA,GAEF,oBAAC,mBAAD;GACE,YAAY;GACZ,mBAAmB;GACnB,mBAAmB;GACR;GACJ;GACP,QAAQ;GACE;GACV,CAAA,CAEA;;EAGX;AAEH,yBAAyB,cAAc"}

package/lib/components/screens/intro/components/MenuButtonsOverlayHtml.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButtonsOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/intro/components/MenuButtonsOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAYpD,MAAM,WAAW,gBAAgB;IAC/B,qCAAqC;IACrC,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC;QACxB,IAAI,EAAE,QAAQ,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC,CAAC;IACH,yCAAyC;IACzC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,0DAA0D;IAC1D,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChD,wCAAwC;IACxC,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,qCAAqC;IACrC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,yCAAyC;IACzC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuJlD,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MenuButtonsOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/intro/components/MenuButtonsOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAYpD,MAAM,WAAW,gBAAgB;IAC/B,qCAAqC;IACrC,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC;QACxB,IAAI,EAAE,QAAQ,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC,CAAC;IACH,yCAAyC;IACzC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,0DAA0D;IAC1D,QAAQ,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,4CAA4C;IAC5C,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChD,wCAAwC;IACxC,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,qCAAqC;IACrC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,yCAAyC;IACzC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmJlD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/screens/intro/components/MenuButtonsOverlayHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButtonsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/MenuButtonsOverlayHtml.tsx"],"sourcesContent":["/**\n * MenuButtons - Reusable menu button grid for IntroScreen\n * \n * Provides 2x2 grid (desktop) or column (mobile) layout for menu navigation.\n * Extracted from MenuSectionOverlayHtml to reduce code duplication.\n * \n * @module components/screens/intro\n * @category Intro UI\n * @korean 메뉴버튼\n */\n\nimport React, { useCallback, useMemo } from \"react\";\nimport { GameMode } from \"../../../../types/common\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { UIHaptics } from \"../../../../utils/hapticFeedback\";\nimport {\n  getButtonVisualEffectsOnly,\n} from \"../../../../utils/koreanThemeHelpers\";\nimport { getMobileKoreanFontSize } from \"../../../../utils/mobileUIUtils\";\nimport {\n  getKoreanFontOptimization,\n} from \"../../../../utils/visualEffects\";\n\nexport interface MenuButtonsProps {\n  /** Array of menu items to display */\n  readonly menuItems: Array<{\n    mode: GameMode;\n    korean: string;\n    english: string;\n  }>;\n  /** Currently selected menu item index */\n  readonly selectedIndex: number;\n  /** Index of currently hovered menu item (null if none) */\n  readonly hoveredIndex: number | null;\n  /** Callback when a menu item is selected */\n  readonly onModeSelect: (mode: GameMode) => void;\n  /** Callback when hover state changes */\n  readonly onHoverChange: (index: number | null) => void;\n  /** Callback to play sound effects */\n  readonly onPlaySFX?: (sound: string) => void;\n  /** Screen width for responsive sizing */\n  readonly width?: number;\n  /** Whether on mobile device (for haptics) */\n  readonly isMobile?: boolean;\n}\n\n/**\n * MenuButtons Component\n * \n * Displays menu navigation buttons with:\n * - 2x2 grid layout on larger screens\n * - Column layout on small screens\n * - Selected/hovered state visualization\n * - Korean bilingual text\n * - Haptic feedback support\n * \n * This component delegates to inline button elements with custom styling\n * since BaseButtonOverlayHtml doesn't support the complex selection state\n * and color transitions needed for menu navigation.\n * \n * Reduces code duplication by 62 lines (MenuSectionOverlayHtml: 372 → 310)\n * \n * @example\n * ```tsx\n * <MenuButtons\n *   menuItems={MENU_ITEMS}\n *   selectedIndex={0}\n *   hoveredIndex={null}\n *   onModeSelect={(mode) => handleModeSelect(mode)}\n *   onHoverChange={(idx) => setHovered(idx)}\n *   width={800}\n * />\n * ```\n */\nexport const MenuButtons: React.FC<MenuButtonsProps> = ({\n  menuItems,\n  selectedIndex,\n  hoveredIndex,\n  onModeSelect,\n  onHoverChange,\n  onPlaySFX,\n  width = 800,\n  isMobile: _isMobile = false, // Prefix with _ to indicate intentionally unused\n}) => {\n  // Responsive sizing based on screen width\n  const isSmallScreen = width < 768;\n  const useGridLayout = !isSmallScreen;\n  const buttonHeight = isSmallScreen ? 44 : 40;\n  const buttonFontSize = isSmallScreen\n    ? getMobileKoreanFontSize(\"SMALL\", width ?? 375)\n    : 13;\n  const buttonGap = isSmallScreen ? 6 : 8;\n\n  // Memoize button state colors\n  const colors = useMemo(\n    () => ({\n      buttonSelectedBg: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.98),\n      buttonHoveredBg: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_LIGHT, 0.92),\n      buttonDefaultBg: hexToRgbaString(\n        KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n        0.92,\n      ),\n      buttonSelectedBorder: hexToRgbaString(\n        KOREAN_COLORS.UI_BACKGROUND_DARK,\n        1.0,\n      ),\n      buttonHoveredBorder: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.8),\n      buttonDefaultBorder: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.7),\n      textSelected: `#${KOREAN_COLORS.UI_BACKGROUND_DARK.toString(16).padStart(6, \"0\")}`,\n      textHovered: `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(6, \"0\")}`,\n      textDefault: `#${KOREAN_COLORS.TEXT_PRIMARY.toString(16).padStart(6, \"0\")}`,\n    }),\n    [],\n  );\n\n  const handleButtonClick = useCallback(\n    (mode: GameMode) => {\n      UIHaptics.buttonTap();\n      onModeSelect(mode);\n      onPlaySFX?.(\"menu_select\");\n    },\n    [onModeSelect, onPlaySFX],\n  );\n\n  const handleButtonHover = useCallback(\n    (index: number, isHovering: boolean) => {\n      const newIndex = isHovering ? index : null;\n      onHoverChange(newIndex);\n      if (isHovering) {\n        UIHaptics.menuHover();\n        onPlaySFX?.(\"menu_hover\");\n      }\n    },\n    [onHoverChange, onPlaySFX],\n  );\n\n  return (\n    <div\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: useGridLayout ? \"1fr 1fr\" : \"1fr\",\n        gap: `${buttonGap}px`,\n        width: \"100%\",\n      }}\n      data-testid=\"main-menu-buttons\"\n    >\n      {menuItems.map((item, index) => {\n        const isSelected = selectedIndex === index;\n        const isHovered = hoveredIndex === index;\n\n        // Get only visual effects (glow, transitions, transforms)\n        const visualEffects = getButtonVisualEffectsOnly({\n          variant: \"primary\",\n          isHovered,\n          isPressed: false,\n          isFocused: false,\n          glowIntensity: isSelected\n            ? \"medium\"\n            : isHovered\n              ? \"medium\"\n              : \"subtle\",\n          hoverAnimation: \"combined\",\n        });\n\n        return (\n          <button\n            key={item.mode}\n            onClick={() => handleButtonClick(item.mode)}\n            onMouseEnter={() => handleButtonHover(index, true)}\n            onMouseLeave={() => handleButtonHover(index, false)}\n            onFocus={(e) => {\n              e.currentTarget.style.outline = `3px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}`;\n              e.currentTarget.style.outlineOffset = \"2px\";\n            }}\n            onBlur={(e) => {\n              e.currentTarget.style.outline = \"none\";\n            }}\n            aria-label={`${item.korean} (${item.english})`}\n            aria-selected={isSelected}\n            role=\"menuitem\"\n            style={{\n              ...visualEffects,\n              ...getKoreanFontOptimization(\n                buttonFontSize,\n                isSelected ? \"bold\" : \"normal\",\n              ),\n              fontFamily: FONT_FAMILY.KOREAN,\n              width: \"100%\",\n              height: `${buttonHeight}px`,\n              // Menu-specific color, background, and border\n              color: isSelected\n                ? colors.textSelected\n                : isHovered\n                  ? colors.textHovered\n                  : colors.textDefault,\n              background: isSelected\n                ? colors.buttonSelectedBg\n                : isHovered\n                  ? colors.buttonHoveredBg\n                  : colors.buttonDefaultBg,\n              border: isSelected\n                ? `3px solid ${colors.buttonSelectedBorder}`\n                : isHovered\n                  ? `2px solid ${colors.buttonHoveredBorder}`\n                  : `2px solid ${colors.buttonDefaultBorder}`,\n              cursor: \"pointer\",\n            }}\n            data-testid={`menu-item-${item.mode}`}\n          >\n            {/* Add test ID aliases for backward compatibility */}\n            {item.mode === GameMode.TRAINING && (\n              <span\n                data-testid=\"training-button\"\n                style={{ display: \"none\" }}\n              />\n            )}\n            {item.mode === GameMode.VERSUS && (\n              <span data-testid=\"combat-button\" style={{ display: \"none\" }} />\n            )}\n            {item.korean} ({item.english})\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default MenuButtons;\n"],"mappings":"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"}
+{"version":3,"file":"MenuButtonsOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/MenuButtonsOverlayHtml.tsx"],"sourcesContent":["/**\n * MenuButtons - Reusable menu button grid for IntroScreen\n * \n * Provides 2x2 grid (desktop) or column (mobile) layout for menu navigation.\n * Extracted from MenuSectionOverlayHtml to reduce code duplication.\n * \n * @module components/screens/intro\n * @category Intro UI\n * @korean 메뉴버튼\n */\n\nimport React, { useCallback, useMemo } from \"react\";\nimport { GameMode } from \"../../../../types/common\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString } from \"../../../../utils/colorUtils\";\nimport { UIHaptics } from \"../../../../utils/hapticFeedback\";\nimport {\n  getButtonVisualEffectsOnly,\n} from \"../../../../utils/koreanThemeHelpers\";\nimport { getMobileKoreanFontSize } from \"../../../../utils/mobileUIUtils\";\nimport {\n  getKoreanFontOptimization,\n} from \"../../../../utils/visualEffects\";\n\nexport interface MenuButtonsProps {\n  /** Array of menu items to display */\n  readonly menuItems: Array<{\n    mode: GameMode;\n    korean: string;\n    english: string;\n  }>;\n  /** Currently selected menu item index */\n  readonly selectedIndex: number;\n  /** Index of currently hovered menu item (null if none) */\n  readonly hoveredIndex: number | null;\n  /** Callback when a menu item is selected */\n  readonly onModeSelect: (mode: GameMode) => void;\n  /** Callback when hover state changes */\n  readonly onHoverChange: (index: number | null) => void;\n  /** Callback to play sound effects */\n  readonly onPlaySFX?: (sound: string) => void;\n  /** Screen width for responsive sizing */\n  readonly width?: number;\n  /** Whether on mobile device (for haptics) */\n  readonly isMobile?: boolean;\n}\n\n/**\n * MenuButtons Component\n * \n * Displays menu navigation buttons with:\n * - 2x2 grid layout on larger screens\n * - Column layout on small screens\n * - Selected/hovered state visualization\n * - Korean bilingual text\n * - Haptic feedback support\n * \n * This component delegates to inline button elements with custom styling\n * since BaseButtonOverlayHtml doesn't support the complex selection state\n * and color transitions needed for menu navigation.\n * \n * Reduces code duplication by 62 lines (MenuSectionOverlayHtml: 372 → 310)\n * \n * @example\n * ```tsx\n * <MenuButtons\n *   menuItems={MENU_ITEMS}\n *   selectedIndex={0}\n *   hoveredIndex={null}\n *   onModeSelect={(mode) => handleModeSelect(mode)}\n *   onHoverChange={(idx) => setHovered(idx)}\n *   width={800}\n * />\n * ```\n */\nexport const MenuButtons: React.FC<MenuButtonsProps> = ({\n  menuItems,\n  selectedIndex,\n  hoveredIndex,\n  onModeSelect,\n  onHoverChange,\n  onPlaySFX,\n  width = 800,\n  isMobile: _isMobile = false, // Prefix with _ to indicate intentionally unused\n}) => {\n  const isSmallScreen = width < 768;\n  const useGridLayout = !isSmallScreen;\n  const buttonHeight = isSmallScreen ? 44 : 40;\n  const buttonFontSize = isSmallScreen\n    ? getMobileKoreanFontSize(\"SMALL\", width ?? 375)\n    : 13;\n  const buttonGap = isSmallScreen ? 6 : 8;\n\n  const colors = useMemo(\n    () => ({\n      buttonSelectedBg: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.98),\n      buttonHoveredBg: hexToRgbaString(KOREAN_COLORS.UI_BACKGROUND_LIGHT, 0.92),\n      buttonDefaultBg: hexToRgbaString(\n        KOREAN_COLORS.UI_BACKGROUND_MEDIUM,\n        0.92,\n      ),\n      buttonSelectedBorder: hexToRgbaString(\n        KOREAN_COLORS.UI_BACKGROUND_DARK,\n        1.0,\n      ),\n      buttonHoveredBorder: hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD, 0.8),\n      buttonDefaultBorder: hexToRgbaString(KOREAN_COLORS.PRIMARY_CYAN, 0.7),\n      textSelected: `#${KOREAN_COLORS.UI_BACKGROUND_DARK.toString(16).padStart(6, \"0\")}`,\n      textHovered: `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(6, \"0\")}`,\n      textDefault: `#${KOREAN_COLORS.TEXT_PRIMARY.toString(16).padStart(6, \"0\")}`,\n    }),\n    [],\n  );\n\n  const handleButtonClick = useCallback(\n    (mode: GameMode) => {\n      UIHaptics.buttonTap();\n      onModeSelect(mode);\n      onPlaySFX?.(\"menu_select\");\n    },\n    [onModeSelect, onPlaySFX],\n  );\n\n  const handleButtonHover = useCallback(\n    (index: number, isHovering: boolean) => {\n      const newIndex = isHovering ? index : null;\n      onHoverChange(newIndex);\n      if (isHovering) {\n        UIHaptics.menuHover();\n        onPlaySFX?.(\"menu_hover\");\n      }\n    },\n    [onHoverChange, onPlaySFX],\n  );\n\n  return (\n    <div\n      style={{\n        display: \"grid\",\n        gridTemplateColumns: useGridLayout ? \"1fr 1fr\" : \"1fr\",\n        gap: `${buttonGap}px`,\n        width: \"100%\",\n      }}\n      data-testid=\"main-menu-buttons\"\n    >\n      {menuItems.map((item, index) => {\n        const isSelected = selectedIndex === index;\n        const isHovered = hoveredIndex === index;\n\n        const visualEffects = getButtonVisualEffectsOnly({\n          variant: \"primary\",\n          isHovered,\n          isPressed: false,\n          isFocused: false,\n          glowIntensity: isSelected\n            ? \"medium\"\n            : isHovered\n              ? \"medium\"\n              : \"subtle\",\n          hoverAnimation: \"combined\",\n        });\n\n        return (\n          <button\n            key={item.mode}\n            onClick={() => handleButtonClick(item.mode)}\n            onMouseEnter={() => handleButtonHover(index, true)}\n            onMouseLeave={() => handleButtonHover(index, false)}\n            onFocus={(e) => {\n              e.currentTarget.style.outline = `3px solid ${hexToRgbaString(KOREAN_COLORS.ACCENT_GOLD)}`;\n              e.currentTarget.style.outlineOffset = \"2px\";\n            }}\n            onBlur={(e) => {\n              e.currentTarget.style.outline = \"none\";\n            }}\n            aria-label={`${item.korean} (${item.english})`}\n            aria-selected={isSelected}\n            role=\"menuitem\"\n            style={{\n              ...visualEffects,\n              ...getKoreanFontOptimization(\n                buttonFontSize,\n                isSelected ? \"bold\" : \"normal\",\n              ),\n              fontFamily: FONT_FAMILY.KOREAN,\n              width: \"100%\",\n              height: `${buttonHeight}px`,\n              color: isSelected\n                ? colors.textSelected\n                : isHovered\n                  ? colors.textHovered\n                  : colors.textDefault,\n              background: isSelected\n                ? colors.buttonSelectedBg\n                : isHovered\n                  ? colors.buttonHoveredBg\n                  : colors.buttonDefaultBg,\n              border: isSelected\n                ? `3px solid ${colors.buttonSelectedBorder}`\n                : isHovered\n                  ? `2px solid ${colors.buttonHoveredBorder}`\n                  : `2px solid ${colors.buttonDefaultBorder}`,\n              cursor: \"pointer\",\n            }}\n            data-testid={`menu-item-${item.mode}`}\n          >\n            {/* Add test ID aliases for backward compatibility */}\n            {item.mode === GameMode.TRAINING && (\n              <span\n                data-testid=\"training-button\"\n                style={{ display: \"none\" }}\n              />\n            )}\n            {item.mode === GameMode.VERSUS && (\n              <span data-testid=\"combat-button\" style={{ display: \"none\" }} />\n            )}\n            {item.korean} ({item.english})\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default MenuButtons;\n"],"mappings":"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"}

package/lib/components/screens/intro/components/MenuSectionOverlayHtml.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSectionOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/intro/components/MenuSectionOverlayHtml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAYpD,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC;QACxB,IAAI,EAAE,QAAQ,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC,CAAC;IACH,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,yDAqMlC,CAAC;AAIF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"MenuSectionOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/intro/components/MenuSectionOverlayHtml.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAYpD,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC;QACxB,IAAI,EAAE,QAAQ,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC,CAAC;IACH,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,qBAAqB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,yDA4LlC,CAAC;AAIF,eAAe,sBAAsB,CAAC"}

package/lib/components/screens/intro/components/MenuSectionOverlayHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSectionOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/MenuSectionOverlayHtml.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { GameMode } from \"../../../../types/common\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport {\n  getEnhancedKoreanOverlayStyles,\n} from \"../../../../utils/koreanThemeHelpers\";\nimport { getMobileKoreanFontSize } from \"../../../../utils/mobileUIUtils\";\nimport { getSafeAreaPadding } from \"../../../../utils/safeAreaUtils\";\nimport {\n  getNeonTextShadow,\n} from \"../../../../utils/visualEffects\";\nimport { MenuButtons } from \"./MenuButtonsOverlayHtml\";\n\nexport interface MenuSectionOverlayHtmlProps {\n  readonly menuItems: Array<{\n    mode: GameMode;\n    korean: string;\n    english: string;\n  }>;\n  readonly selectedIndex: number;\n  readonly onModeSelect: (mode: GameMode) => void;\n  readonly onSelectedIndexChange?: (index: number) => void;\n  readonly onPlaySFX?: (sound: string) => void;\n  readonly width?: number;\n  readonly height?: number;\n  readonly isMobile?: boolean; // For controls/haptics only, use width for layout sizing\n}\n\n/**\n * HTML-based MenuSection component for Three.js integration\n *\n * Optimized with React.memo for 60fps performance:\n * - Memoized to prevent unnecessary re-renders\n * - All callbacks use useCallback\n * - Styles pre-calculated and memoized\n */\nexport const MenuSectionOverlayHtml = React.memo<MenuSectionOverlayHtmlProps>(\n  ({\n    menuItems,\n    selectedIndex,\n    onModeSelect,\n    onSelectedIndexChange,\n    onPlaySFX,\n    width = 800,\n    height = 300,\n    isMobile = false, // Default to false, parent should pass proper device detection\n  }) => {\n  const [hoveredItem, setHoveredItem] = useState<number | null>(null);\n  const [focused, setFocused] = useState<boolean>(false);\n\n  // Enhanced overlay styles with neon glow and depth\n  const enhancedOverlayStyles = useMemo(\n    () =>\n      getEnhancedKoreanOverlayStyles({\n        opacity: 0.96,\n        glowIntensity: focused ? \"medium\" : \"subtle\",\n        includeGradient: false,\n        includeBackdropBlur: false,\n        depthLayers: 2,\n      }),\n    [focused],\n  );\n\n  // Memoize title color\n  const titleColor = useMemo(\n    () => `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(6, \"0\")}`,\n    [],\n  );\n\n  // Keyboard navigation - stops propagation to prevent conflicts with parent\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (!onSelectedIndexChange) return;\n\n      if (event.key === \"ArrowUp\") {\n        event.preventDefault();\n        event.stopPropagation();\n        const nextIndex =\n          selectedIndex === 0 ? menuItems.length - 1 : selectedIndex - 1;\n        onSelectedIndexChange(nextIndex);\n        onPlaySFX?.(\"menu_hover\");\n      } else if (event.key === \"ArrowDown\") {\n        event.preventDefault();\n        event.stopPropagation();\n        const nextIndex =\n          selectedIndex === menuItems.length - 1 ? 0 : selectedIndex + 1;\n        onSelectedIndexChange(nextIndex);\n        onPlaySFX?.(\"menu_hover\");\n      } else if (event.key === \" \" || event.key === \"Enter\") {\n        event.preventDefault();\n        event.stopPropagation();\n        onPlaySFX?.(\"menu_select\");\n        onModeSelect(menuItems[selectedIndex].mode);\n      } else {\n        const numKey = parseInt(event.key);\n        if (numKey >= 1 && numKey <= menuItems.length) {\n          event.stopPropagation();\n          const targetIndex = numKey - 1;\n          onSelectedIndexChange(targetIndex);\n          onPlaySFX?.(\"menu_select\");\n          onModeSelect(menuItems[targetIndex].mode);\n        }\n      }\n    };\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [\n    selectedIndex,\n    menuItems,\n    onSelectedIndexChange,\n    onModeSelect,\n    onPlaySFX,\n  ]);\n\n  // Focus ring for accessibility\n  useEffect(() => {\n    const handleFocus = () => setFocused(true);\n    const handleBlur = () => setFocused(false);\n    window.addEventListener(\"focusin\", handleFocus);\n    window.addEventListener(\"focusout\", handleBlur);\n    return () => {\n      window.removeEventListener(\"focusin\", handleFocus);\n      window.removeEventListener(\"focusout\", handleBlur);\n    };\n  }, []);\n\n  // Use device detection from prop, with width-based fallback for sizing adjustments\n  const isSmallScreen = width < 768; // Mobile-sized screens\n\n  const containerPadding = isSmallScreen ? 16 : 12;\n  const titleFontSize = isSmallScreen\n    ? getMobileKoreanFontSize(\"SMALL\", width ?? 375)\n    : 14;\n  const sectionGap = isSmallScreen ? 8 : 6;\n\n  // Safe area support for notched devices (use isMobile for actual device detection)\n  const safeAreaStyles = useMemo(\n    () =>\n      isMobile ? getSafeAreaPadding([\"top\", \"bottom\"], containerPadding) : {},\n    [isMobile, containerPadding],\n  );\n\n  return (\n    <div\n      style={{\n        ...enhancedOverlayStyles,\n        ...safeAreaStyles,\n        width: `${width}px`,\n        minHeight: `${height}px`,\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        gap: `${sectionGap}px`,\n        padding: `${containerPadding}px`,\n        position: \"relative\",\n        overflow: \"visible\",\n      }}\n      data-testid=\"main-menu-section\"\n    >\n      {/* Menu Title */}\n      <div\n        style={{\n          fontSize: `${titleFontSize}px`,\n          color: titleColor,\n          fontWeight: \"bold\",\n          fontFamily: FONT_FAMILY.KOREAN,\n          textAlign: \"center\",\n          textShadow: getNeonTextShadow(KOREAN_COLORS.ACCENT_GOLD, \"medium\"),\n        }}\n        data-testid=\"menu-title\"\n      >\n        메인 메뉴 | Main Menu\n      </div>\n\n      {/* Menu Buttons - Extracted to MenuButtons component */}\n      <MenuButtons\n        menuItems={menuItems}\n        selectedIndex={selectedIndex}\n        hoveredIndex={hoveredItem}\n        onModeSelect={onModeSelect}\n        onHoverChange={setHoveredItem}\n        onPlaySFX={onPlaySFX}\n        width={width}\n        isMobile={isMobile}\n      />\n\n      {/* Navigation Instructions */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: isSmallScreen ? \"4px\" : \"6px\",\n          textAlign: \"center\",\n          fontSize: isSmallScreen ? \"10px\" : \"12px\",\n          color: `#${KOREAN_COLORS.TEXT_SECONDARY.toString(16).padStart(\n            6,\n            \"0\",\n          )}`,\n          fontFamily: FONT_FAMILY.KOREAN,\n          marginTop: \"auto\",\n        }}\n        data-testid=\"navigation-hint-container\"\n      >\n        <div data-testid=\"menu-navigation-hint-korean\">\n          방향키/마우스로 이동 • Enter/클릭으로 선택 • 숫자키로 바로가기\n        </div>\n        <div\n          style={{ fontSize: isSmallScreen ? \"9px\" : \"10px\" }}\n          data-testid=\"menu-navigation-hint-english\"\n        >\n          Arrow keys/mouse to navigate • Enter/click to select • Number keys for\n          shortcuts\n        </div>\n      </div>\n    </div>\n  );\n  },\n  (prevProps, nextProps) => {\n    // Custom comparison for optimal re-render prevention\n    // Including callback props prevents stale closures when parent provides\n    // new functions that capture updated state.\n    return (\n      prevProps.selectedIndex === nextProps.selectedIndex &&\n      prevProps.width === nextProps.width &&\n      prevProps.height === nextProps.height &&\n      prevProps.isMobile === nextProps.isMobile &&\n      prevProps.menuItems.length === nextProps.menuItems.length &&\n      prevProps.onModeSelect === nextProps.onModeSelect &&\n      prevProps.onSelectedIndexChange === nextProps.onSelectedIndexChange &&\n      prevProps.onPlaySFX === nextProps.onPlaySFX\n    );\n  },\n);\n\nMenuSectionOverlayHtml.displayName = \"MenuSectionOverlayHtml\";\n\nexport default MenuSectionOverlayHtml;\n"],"mappings":"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"}
+{"version":3,"file":"MenuSectionOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/MenuSectionOverlayHtml.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from \"react\";\nimport { GameMode } from \"../../../../types/common\";\nimport { FONT_FAMILY, KOREAN_COLORS } from \"../../../../types/constants\";\nimport {\n  getEnhancedKoreanOverlayStyles,\n} from \"../../../../utils/koreanThemeHelpers\";\nimport { getMobileKoreanFontSize } from \"../../../../utils/mobileUIUtils\";\nimport { getSafeAreaPadding } from \"../../../../utils/safeAreaUtils\";\nimport {\n  getNeonTextShadow,\n} from \"../../../../utils/visualEffects\";\nimport { MenuButtons } from \"./MenuButtonsOverlayHtml\";\n\nexport interface MenuSectionOverlayHtmlProps {\n  readonly menuItems: Array<{\n    mode: GameMode;\n    korean: string;\n    english: string;\n  }>;\n  readonly selectedIndex: number;\n  readonly onModeSelect: (mode: GameMode) => void;\n  readonly onSelectedIndexChange?: (index: number) => void;\n  readonly onPlaySFX?: (sound: string) => void;\n  readonly width?: number;\n  readonly height?: number;\n  readonly isMobile?: boolean; // For controls/haptics only, use width for layout sizing\n}\n\n/**\n * HTML-based MenuSection component for Three.js integration\n *\n * Optimized with React.memo for 60fps performance:\n * - Memoized to prevent unnecessary re-renders\n * - All callbacks use useCallback\n * - Styles pre-calculated and memoized\n */\nexport const MenuSectionOverlayHtml = React.memo<MenuSectionOverlayHtmlProps>(\n  ({\n    menuItems,\n    selectedIndex,\n    onModeSelect,\n    onSelectedIndexChange,\n    onPlaySFX,\n    width = 800,\n    height = 300,\n    isMobile = false, // Default to false, parent should pass proper device detection\n  }) => {\n  const [hoveredItem, setHoveredItem] = useState<number | null>(null);\n  const [focused, setFocused] = useState<boolean>(false);\n\n  const enhancedOverlayStyles = useMemo(\n    () =>\n      getEnhancedKoreanOverlayStyles({\n        opacity: 0.96,\n        glowIntensity: focused ? \"medium\" : \"subtle\",\n        includeGradient: false,\n        includeBackdropBlur: false,\n        depthLayers: 2,\n      }),\n    [focused],\n  );\n\n  const titleColor = useMemo(\n    () => `#${KOREAN_COLORS.ACCENT_GOLD.toString(16).padStart(6, \"0\")}`,\n    [],\n  );\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (!onSelectedIndexChange) return;\n\n      if (event.key === \"ArrowUp\") {\n        event.preventDefault();\n        event.stopPropagation();\n        const nextIndex =\n          selectedIndex === 0 ? menuItems.length - 1 : selectedIndex - 1;\n        onSelectedIndexChange(nextIndex);\n        onPlaySFX?.(\"menu_hover\");\n      } else if (event.key === \"ArrowDown\") {\n        event.preventDefault();\n        event.stopPropagation();\n        const nextIndex =\n          selectedIndex === menuItems.length - 1 ? 0 : selectedIndex + 1;\n        onSelectedIndexChange(nextIndex);\n        onPlaySFX?.(\"menu_hover\");\n      } else if (event.key === \" \" || event.key === \"Enter\") {\n        event.preventDefault();\n        event.stopPropagation();\n        onPlaySFX?.(\"menu_select\");\n        onModeSelect(menuItems[selectedIndex].mode);\n      } else {\n        const numKey = parseInt(event.key);\n        if (numKey >= 1 && numKey <= menuItems.length) {\n          event.stopPropagation();\n          const targetIndex = numKey - 1;\n          onSelectedIndexChange(targetIndex);\n          onPlaySFX?.(\"menu_select\");\n          onModeSelect(menuItems[targetIndex].mode);\n        }\n      }\n    };\n    window.addEventListener(\"keydown\", handleKeyDown);\n    return () => window.removeEventListener(\"keydown\", handleKeyDown);\n  }, [\n    selectedIndex,\n    menuItems,\n    onSelectedIndexChange,\n    onModeSelect,\n    onPlaySFX,\n  ]);\n\n  useEffect(() => {\n    const handleFocus = () => setFocused(true);\n    const handleBlur = () => setFocused(false);\n    window.addEventListener(\"focusin\", handleFocus);\n    window.addEventListener(\"focusout\", handleBlur);\n    return () => {\n      window.removeEventListener(\"focusin\", handleFocus);\n      window.removeEventListener(\"focusout\", handleBlur);\n    };\n  }, []);\n\n  const isSmallScreen = width < 768; // Mobile-sized screens\n\n  const containerPadding = isSmallScreen ? 16 : 12;\n  const titleFontSize = isSmallScreen\n    ? getMobileKoreanFontSize(\"SMALL\", width ?? 375)\n    : 14;\n  const sectionGap = isSmallScreen ? 8 : 6;\n\n  const safeAreaStyles = useMemo(\n    () =>\n      isMobile ? getSafeAreaPadding([\"top\", \"bottom\"], containerPadding) : {},\n    [isMobile, containerPadding],\n  );\n\n  return (\n    <div\n      style={{\n        ...enhancedOverlayStyles,\n        ...safeAreaStyles,\n        width: `${width}px`,\n        minHeight: `${height}px`,\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        justifyContent: \"center\",\n        gap: `${sectionGap}px`,\n        padding: `${containerPadding}px`,\n        position: \"relative\",\n        overflow: \"visible\",\n      }}\n      data-testid=\"main-menu-section\"\n    >\n      {/* Menu Title */}\n      <div\n        style={{\n          fontSize: `${titleFontSize}px`,\n          color: titleColor,\n          fontWeight: \"bold\",\n          fontFamily: FONT_FAMILY.KOREAN,\n          textAlign: \"center\",\n          textShadow: getNeonTextShadow(KOREAN_COLORS.ACCENT_GOLD, \"medium\"),\n        }}\n        data-testid=\"menu-title\"\n      >\n        메인 메뉴 | Main Menu\n      </div>\n\n      {/* Menu Buttons - Extracted to MenuButtons component */}\n      <MenuButtons\n        menuItems={menuItems}\n        selectedIndex={selectedIndex}\n        hoveredIndex={hoveredItem}\n        onModeSelect={onModeSelect}\n        onHoverChange={setHoveredItem}\n        onPlaySFX={onPlaySFX}\n        width={width}\n        isMobile={isMobile}\n      />\n\n      {/* Navigation Instructions */}\n      <div\n        style={{\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: isSmallScreen ? \"4px\" : \"6px\",\n          textAlign: \"center\",\n          fontSize: isSmallScreen ? \"10px\" : \"12px\",\n          color: `#${KOREAN_COLORS.TEXT_SECONDARY.toString(16).padStart(\n            6,\n            \"0\",\n          )}`,\n          fontFamily: FONT_FAMILY.KOREAN,\n          marginTop: \"auto\",\n        }}\n        data-testid=\"navigation-hint-container\"\n      >\n        <div data-testid=\"menu-navigation-hint-korean\">\n          방향키/마우스로 이동 • Enter/클릭으로 선택 • 숫자키로 바로가기\n        </div>\n        <div\n          style={{ fontSize: isSmallScreen ? \"9px\" : \"10px\" }}\n          data-testid=\"menu-navigation-hint-english\"\n        >\n          Arrow keys/mouse to navigate • Enter/click to select • Number keys for\n          shortcuts\n        </div>\n      </div>\n    </div>\n  );\n  },\n  (prevProps, nextProps) => {\n    return (\n      prevProps.selectedIndex === nextProps.selectedIndex &&\n      prevProps.width === nextProps.width &&\n      prevProps.height === nextProps.height &&\n      prevProps.isMobile === nextProps.isMobile &&\n      prevProps.menuItems.length === nextProps.menuItems.length &&\n      prevProps.onModeSelect === nextProps.onModeSelect &&\n      prevProps.onSelectedIndexChange === nextProps.onSelectedIndexChange &&\n      prevProps.onPlaySFX === nextProps.onPlaySFX\n    );\n  },\n);\n\nMenuSectionOverlayHtml.displayName = \"MenuSectionOverlayHtml\";\n\nexport default MenuSectionOverlayHtml;\n"],"mappings":"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"}

package/lib/components/screens/intro/components/StatBarOverlayHtml.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatBarOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/intro/components/StatBarOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAsH1C,CAAC;AAIF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"StatBarOverlayHtml.d.ts","sourceRoot":"","sources":["../../../../../src/components/screens/intro/components/StatBarOverlayHtml.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiH1C,CAAC;AAIF,eAAe,OAAO,CAAC"}

package/lib/components/screens/intro/components/StatBarOverlayHtml.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatBarOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/StatBarOverlayHtml.tsx"],"sourcesContent":["/**\n * StatBar - Enhanced stat visualization component with Korean theming\n * \n * Refactored to use useKoreanTheme hook for consistent styling\n * Displays horizontal bar chart for combat statistics\n * \n * Performance optimized with React.memo and useMemo\n * \n * @module components/screens/intro\n * @category Intro UI\n * @korean 능력치바\n */\n\nimport React, { useMemo } from \"react\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport { KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString, hexColorToCSS } from \"../../../../utils/colorUtils\";\n\nexport interface StatBarProps {\n  readonly label: string; // Format: \"Korean | English\"\n  readonly value: number; // 0-100 range\n  readonly max?: number; // Maximum value for scaling\n  readonly color?: number; // Hex color for bar\n  readonly height?: number; // Bar height in pixels\n  readonly showValue?: boolean; // Show numeric value\n  readonly isMobile?: boolean;\n}\n\n/**\n * StatBar component - Displays a horizontal bar chart for stats\n * \n * Refactored to use useKoreanTheme for consistent Korean theming:\n * - Uses Korean typography configuration\n * - Applies Korean color palette\n * - Responsive sizing based on device type\n * - Memoized for optimal performance\n * \n * Used in archetype cards to visualize combat statistics\n * \n * @example\n * ```tsx\n * <StatBar\n *   label=\"공격 | Attack\"\n *   value={85}\n *   max={100}\n *   color={KOREAN_COLORS.PRIMARY_CYAN}\n *   isMobile={false}\n * />\n * ```\n */\nexport const StatBar: React.FC<StatBarProps> = React.memo(\n  ({\n    label,\n    value,\n    max = 100,\n    color = KOREAN_COLORS.PRIMARY_CYAN,\n    height = 12,\n    showValue = true,\n    isMobile = false,\n  }) => {\n    // Use Korean theme hook for consistent styling\n    const { koreanTypography, colors: themeColors, calculateResponsiveSize } = useKoreanTheme({\n      size: \"small\",\n      isMobile,\n    });\n\n    // Calculate percentage for bar width\n    const percentage = useMemo(\n      () => Math.min(100, Math.max(0, (value / max) * 100)),\n      [value, max]\n    );\n\n    // Memoize color calculations with Korean theme\n    const statBarColors = useMemo(\n      () => ({\n        barBackground: hexToRgbaString(themeColors.UI_BACKGROUND_MEDIUM, 1),\n        barFill: hexToRgbaString(color, 0.9),\n        barBorder: hexToRgbaString(color, 0.7),\n        labelColor: hexColorToCSS(themeColors.TEXT_SECONDARY),\n        valueColor: hexColorToCSS(color),\n      }),\n      [color, themeColors]\n    );\n\n    // Responsive sizing using Korean theme utilities\n    const fontSize = calculateResponsiveSize(isMobile ? 9 : 11);\n    const labelWidth = calculateResponsiveSize(isMobile ? 70 : 80);\n    const valueWidth = calculateResponsiveSize(isMobile ? 25 : 30);\n\n    return (\n      <div\n        style={{\n          width: \"100%\",\n          display: \"flex\",\n          flexDirection: \"row\",\n          alignItems: \"center\",\n          gap: `${calculateResponsiveSize(12)}px`,\n        }}\n        data-testid={`stat-bar-${label.split(\"|\")[0].trim()}`}\n      >\n        {/* Stat label with Korean typography */}\n        <div\n          style={{\n            width: `${labelWidth}px`,\n            fontSize: `${fontSize}px`,\n            fontFamily: koreanTypography.fontFamily,\n            color: statBarColors.labelColor,\n            flexShrink: 0,\n            whiteSpace: \"nowrap\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            // Apply Korean typography optimization\n            lineHeight: koreanTypography.lineHeight,\n            letterSpacing: koreanTypography.letterSpacing,\n            wordBreak: koreanTypography.wordBreak,\n          }}\n          data-testid=\"stat-label\"\n        >\n          {label}\n        </div>\n\n        {/* Stat bar container */}\n        <div\n          style={{\n            flex: 1,\n            height: `${height}px`,\n            background: statBarColors.barBackground,\n            borderRadius: \"2px\",\n            position: \"relative\",\n            border: `1px solid ${statBarColors.barBorder}`,\n            overflow: \"hidden\",\n          }}\n          data-testid=\"stat-bar-container\"\n        >\n          {/* Stat bar fill with smooth transition */}\n          <div\n            style={{\n              width: `${percentage}%`,\n              height: \"100%\",\n              background: statBarColors.barFill,\n              borderRadius: \"2px\",\n              transition: \"width 0.3s ease\",\n              boxShadow: `0 0 8px ${hexToRgbaString(color, 0.5)}`,\n            }}\n            data-testid=\"stat-bar-fill\"\n          />\n        </div>\n\n        {/* Stat value */}\n        {showValue && (\n          <div\n            style={{\n              width: `${valueWidth}px`,\n              fontSize: `${fontSize}px`,\n              fontWeight: \"bold\",\n              fontFamily: koreanTypography.fontFamily,\n              color: statBarColors.valueColor,\n              textAlign: \"right\",\n              flexShrink: 0,\n            }}\n            data-testid=\"stat-value\"\n          >\n            {Math.round(value)}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nStatBar.displayName = \"StatBar\";\n\nexport default StatBar;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,IAAa,UAAkC,MAAM,MAClD,EACC,OACA,OACA,MAAM,KACN,QAAQ,cAAc,cACtB,SAAS,IACT,YAAY,MACZ,WAAW,YACP;CAEJ,MAAM,EAAE,kBAAkB,QAAQ,aAAa,4BAA4B,eAAe;EACxF,MAAM;EACN;EACD,CAAC;CAGF,MAAM,aAAa,cACX,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,IAAI,CAAC,EACrD,CAAC,OAAO,IAAI,CACb;CAGD,MAAM,gBAAgB,eACb;EACL,eAAe,gBAAgB,YAAY,sBAAsB,EAAE;EACnE,SAAS,gBAAgB,OAAO,GAAI;EACpC,WAAW,gBAAgB,OAAO,GAAI;EACtC,YAAY,cAAc,YAAY,eAAe;EACrD,YAAY,cAAc,MAAM;EACjC,GACD,CAAC,OAAO,YAAY,CACrB;CAGD,MAAM,WAAW,wBAAwB,WAAW,IAAI,GAAG;CAC3D,MAAM,aAAa,wBAAwB,WAAW,KAAK,GAAG;CAC9D,MAAM,aAAa,wBAAwB,WAAW,KAAK,GAAG;CAE9D,OACE,qBAAC,OAAD;EACE,OAAO;GACL,OAAO;GACP,SAAS;GACT,eAAe;GACf,YAAY;GACZ,KAAK,GAAG,wBAAwB,GAAG,CAAC;GACrC;EACD,eAAa,YAAY,MAAM,MAAM,IAAI,CAAC,GAAG,MAAM;YARrD;GAWE,oBAAC,OAAD;IACE,OAAO;KACL,OAAO,GAAG,WAAW;KACrB,UAAU,GAAG,SAAS;KACtB,YAAY,iBAAiB;KAC7B,OAAO,cAAc;KACrB,YAAY;KACZ,YAAY;KACZ,UAAU;KACV,cAAc;KAEd,YAAY,iBAAiB;KAC7B,eAAe,iBAAiB;KAChC,WAAW,iBAAiB;KAC7B;IACD,eAAY;cAEX;IACG,CAAA;GAGN,oBAAC,OAAD;IACE,OAAO;KACL,MAAM;KACN,QAAQ,GAAG,OAAO;KAClB,YAAY,cAAc;KAC1B,cAAc;KACd,UAAU;KACV,QAAQ,aAAa,cAAc;KACnC,UAAU;KACX;IACD,eAAY;cAGZ,oBAAC,OAAD;KACE,OAAO;MACL,OAAO,GAAG,WAAW;MACrB,QAAQ;MACR,YAAY,cAAc;MAC1B,cAAc;MACd,YAAY;MACZ,WAAW,WAAW,gBAAgB,OAAO,GAAI;MAClD;KACD,eAAY;KACZ,CAAA;IACE,CAAA;GAGL,aACC,oBAAC,OAAD;IACE,OAAO;KACL,OAAO,GAAG,WAAW;KACrB,UAAU,GAAG,SAAS;KACtB,YAAY;KACZ,YAAY,iBAAiB;KAC7B,OAAO,cAAc;KACrB,WAAW;KACX,YAAY;KACb;IACD,eAAY;cAEX,KAAK,MAAM,MAAM;IACd,CAAA;GAEJ;;EAGX;AAED,QAAQ,cAAc"}
+{"version":3,"file":"StatBarOverlayHtml.js","names":[],"sources":["../../../../../src/components/screens/intro/components/StatBarOverlayHtml.tsx"],"sourcesContent":["/**\n * StatBar - Enhanced stat visualization component with Korean theming\n * \n * Refactored to use useKoreanTheme hook for consistent styling\n * Displays horizontal bar chart for combat statistics\n * \n * Performance optimized with React.memo and useMemo\n * \n * @module components/screens/intro\n * @category Intro UI\n * @korean 능력치바\n */\n\nimport React, { useMemo } from \"react\";\nimport { useKoreanTheme } from \"../../../shared/base/useKoreanTheme\";\nimport { KOREAN_COLORS } from \"../../../../types/constants\";\nimport { hexToRgbaString, hexColorToCSS } from \"../../../../utils/colorUtils\";\n\nexport interface StatBarProps {\n  readonly label: string; // Format: \"Korean | English\"\n  readonly value: number; // 0-100 range\n  readonly max?: number; // Maximum value for scaling\n  readonly color?: number; // Hex color for bar\n  readonly height?: number; // Bar height in pixels\n  readonly showValue?: boolean; // Show numeric value\n  readonly isMobile?: boolean;\n}\n\n/**\n * StatBar component - Displays a horizontal bar chart for stats\n * \n * Refactored to use useKoreanTheme for consistent Korean theming:\n * - Uses Korean typography configuration\n * - Applies Korean color palette\n * - Responsive sizing based on device type\n * - Memoized for optimal performance\n * \n * Used in archetype cards to visualize combat statistics\n * \n * @example\n * ```tsx\n * <StatBar\n *   label=\"공격 | Attack\"\n *   value={85}\n *   max={100}\n *   color={KOREAN_COLORS.PRIMARY_CYAN}\n *   isMobile={false}\n * />\n * ```\n */\nexport const StatBar: React.FC<StatBarProps> = React.memo(\n  ({\n    label,\n    value,\n    max = 100,\n    color = KOREAN_COLORS.PRIMARY_CYAN,\n    height = 12,\n    showValue = true,\n    isMobile = false,\n  }) => {\n    const { koreanTypography, colors: themeColors, calculateResponsiveSize } = useKoreanTheme({\n      size: \"small\",\n      isMobile,\n    });\n\n    const percentage = useMemo(\n      () => Math.min(100, Math.max(0, (value / max) * 100)),\n      [value, max]\n    );\n\n    const statBarColors = useMemo(\n      () => ({\n        barBackground: hexToRgbaString(themeColors.UI_BACKGROUND_MEDIUM, 1),\n        barFill: hexToRgbaString(color, 0.9),\n        barBorder: hexToRgbaString(color, 0.7),\n        labelColor: hexColorToCSS(themeColors.TEXT_SECONDARY),\n        valueColor: hexColorToCSS(color),\n      }),\n      [color, themeColors]\n    );\n\n    const fontSize = calculateResponsiveSize(isMobile ? 9 : 11);\n    const labelWidth = calculateResponsiveSize(isMobile ? 70 : 80);\n    const valueWidth = calculateResponsiveSize(isMobile ? 25 : 30);\n\n    return (\n      <div\n        style={{\n          width: \"100%\",\n          display: \"flex\",\n          flexDirection: \"row\",\n          alignItems: \"center\",\n          gap: `${calculateResponsiveSize(12)}px`,\n        }}\n        data-testid={`stat-bar-${label.split(\"|\")[0].trim()}`}\n      >\n        {/* Stat label with Korean typography */}\n        <div\n          style={{\n            width: `${labelWidth}px`,\n            fontSize: `${fontSize}px`,\n            fontFamily: koreanTypography.fontFamily,\n            color: statBarColors.labelColor,\n            flexShrink: 0,\n            whiteSpace: \"nowrap\",\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            lineHeight: koreanTypography.lineHeight,\n            letterSpacing: koreanTypography.letterSpacing,\n            wordBreak: koreanTypography.wordBreak,\n          }}\n          data-testid=\"stat-label\"\n        >\n          {label}\n        </div>\n\n        {/* Stat bar container */}\n        <div\n          style={{\n            flex: 1,\n            height: `${height}px`,\n            background: statBarColors.barBackground,\n            borderRadius: \"2px\",\n            position: \"relative\",\n            border: `1px solid ${statBarColors.barBorder}`,\n            overflow: \"hidden\",\n          }}\n          data-testid=\"stat-bar-container\"\n        >\n          {/* Stat bar fill with smooth transition */}\n          <div\n            style={{\n              width: `${percentage}%`,\n              height: \"100%\",\n              background: statBarColors.barFill,\n              borderRadius: \"2px\",\n              transition: \"width 0.3s ease\",\n              boxShadow: `0 0 8px ${hexToRgbaString(color, 0.5)}`,\n            }}\n            data-testid=\"stat-bar-fill\"\n          />\n        </div>\n\n        {/* Stat value */}\n        {showValue && (\n          <div\n            style={{\n              width: `${valueWidth}px`,\n              fontSize: `${fontSize}px`,\n              fontWeight: \"bold\",\n              fontFamily: koreanTypography.fontFamily,\n              color: statBarColors.valueColor,\n              textAlign: \"right\",\n              flexShrink: 0,\n            }}\n            data-testid=\"stat-value\"\n          >\n            {Math.round(value)}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nStatBar.displayName = \"StatBar\";\n\nexport default StatBar;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,IAAa,UAAkC,MAAM,MAClD,EACC,OACA,OACA,MAAM,KACN,QAAQ,cAAc,cACtB,SAAS,IACT,YAAY,MACZ,WAAW,YACP;CACJ,MAAM,EAAE,kBAAkB,QAAQ,aAAa,4BAA4B,eAAe;EACxF,MAAM;EACN;EACD,CAAC;CAEF,MAAM,aAAa,cACX,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,IAAI,CAAC,EACrD,CAAC,OAAO,IAAI,CACb;CAED,MAAM,gBAAgB,eACb;EACL,eAAe,gBAAgB,YAAY,sBAAsB,EAAE;EACnE,SAAS,gBAAgB,OAAO,GAAI;EACpC,WAAW,gBAAgB,OAAO,GAAI;EACtC,YAAY,cAAc,YAAY,eAAe;EACrD,YAAY,cAAc,MAAM;EACjC,GACD,CAAC,OAAO,YAAY,CACrB;CAED,MAAM,WAAW,wBAAwB,WAAW,IAAI,GAAG;CAC3D,MAAM,aAAa,wBAAwB,WAAW,KAAK,GAAG;CAC9D,MAAM,aAAa,wBAAwB,WAAW,KAAK,GAAG;CAE9D,OACE,qBAAC,OAAD;EACE,OAAO;GACL,OAAO;GACP,SAAS;GACT,eAAe;GACf,YAAY;GACZ,KAAK,GAAG,wBAAwB,GAAG,CAAC;GACrC;EACD,eAAa,YAAY,MAAM,MAAM,IAAI,CAAC,GAAG,MAAM;YARrD;GAWE,oBAAC,OAAD;IACE,OAAO;KACL,OAAO,GAAG,WAAW;KACrB,UAAU,GAAG,SAAS;KACtB,YAAY,iBAAiB;KAC7B,OAAO,cAAc;KACrB,YAAY;KACZ,YAAY;KACZ,UAAU;KACV,cAAc;KACd,YAAY,iBAAiB;KAC7B,eAAe,iBAAiB;KAChC,WAAW,iBAAiB;KAC7B;IACD,eAAY;cAEX;IACG,CAAA;GAGN,oBAAC,OAAD;IACE,OAAO;KACL,MAAM;KACN,QAAQ,GAAG,OAAO;KAClB,YAAY,cAAc;KAC1B,cAAc;KACd,UAAU;KACV,QAAQ,aAAa,cAAc;KACnC,UAAU;KACX;IACD,eAAY;cAGZ,oBAAC,OAAD;KACE,OAAO;MACL,OAAO,GAAG,WAAW;MACrB,QAAQ;MACR,YAAY,cAAc;MAC1B,cAAc;MACd,YAAY;MACZ,WAAW,WAAW,gBAAgB,OAAO,GAAI;MAClD;KACD,eAAY;KACZ,CAAA;IACE,CAAA;GAGL,aACC,oBAAC,OAAD;IACE,OAAO;KACL,OAAO,GAAG,WAAW;KACrB,UAAU,GAAG,SAAS;KACtB,YAAY;KACZ,YAAY,iBAAiB;KAC7B,OAAO,cAAc;KACrB,WAAW;KACX,YAAY;KACb;IACD,eAAY;cAEX,KAAK,MAAM,MAAM;IACd,CAAA;GAEJ;;EAGX;AAED,QAAQ,cAAc"}

package/lib/components/screens/philosophy/PhilosophyScreen3D.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhilosophyScreen3D.d.ts","sourceRoot":"","sources":["../../../../src/components/screens/philosophy/PhilosophyScreen3D.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAiB/D,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAgrBhE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"PhilosophyScreen3D.d.ts","sourceRoot":"","sources":["../../../../src/components/screens/philosophy/PhilosophyScreen3D.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAiB/D,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,cAAc,EAAE,MAAM,IAAI,CAAC;IACpC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAgqBhE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}