blacktrigram 0.7.2

package/lib/components/shared/base/BaseText.js

@@ -0,0 +1,157 @@
+import { KOREAN_COLORS } from "../../../types/constants/colors.js";
+import { UI_DIMENSIONS } from "../../../types/constants/ui.js";
+import "../../../types/constants/index.js";
+import { hexToRgbaString } from "../../../utils/colorUtils.js";
+import { useKoreanTheme } from "./useKoreanTheme.js";
+import { applyHtmlOverlayStyles, calculateDistanceFactor } from "../../../utils/htmlOverlayHelpers.js";
+import React, { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Html } from "@react-three/drei";
+//#region src/components/shared/base/BaseText.tsx
+/**
+* BaseText - Enhanced bilingual text component with Korean theming
+*
+* Builds on existing KoreanText with extracted common logic
+* Provides consistent text styling across the application
+*
+* Now with Html overlay positioning helpers for:
+* - Consistent z-index management
+* - Performance optimization with distanceFactor
+* - GPU acceleration
+*
+* @module components/base
+*/
+/**
+* BaseText Component
+*
+* Enhanced bilingual text component with Korean cyberpunk styling.
+* Uses useKoreanTheme hook for consistent text sizing and styling.
+* Now includes Html overlay positioning helpers for proper z-index and performance.
+*
+* Korean Typography Features:
+* - Optimized line height (1.6) for Korean character readability
+* - Letter spacing (-0.01em) for tighter Korean text
+* - Word break (keep-all) to prevent breaking Korean words mid-syllable
+* - Proper language attributes (lang="ko" / lang="en")
+*
+* WCAG 2.1 AA Accessibility Features:
+* - Proper language attributes for screen readers
+* - Optional ARIA labels for additional context
+* - ARIA live regions for dynamic content
+*
+* Optimized with React.memo for performance
+*
+* @example
+* ```tsx
+* <BaseText
+*   korean="공격"
+*   english="Attack"
+*   size="large"
+*   layout="vertical"
+*   layer="hud"
+*   ariaLive="polite"
+* />
+* ```
+*/
+var BaseTextComponent = ({ korean, english, position = [
+	0,
+	0,
+	0
+], size = "medium", color = KOREAN_COLORS.TEXT_PRIMARY, align = "center", weight = "normal", layout = "vertical", testId, isMobile = false, layer = "hud", occlude = false, ariaLabel, ariaLive = "off" }) => {
+	const { textSize, koreanTypography } = useKoreanTheme({
+		size,
+		isMobile
+	});
+	const [screenWidth, setScreenWidth] = useState(() => typeof window !== "undefined" ? window.innerWidth : UI_DIMENSIONS.DEFAULT_SCREEN_WIDTH);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const handleResize = () => {
+			setScreenWidth(window.innerWidth);
+		};
+		window.addEventListener("resize", handleResize);
+		return () => window.removeEventListener("resize", handleResize);
+	}, []);
+	const distanceFactor = useMemo(() => {
+		return calculateDistanceFactor(screenWidth, "text", isMobile);
+	}, [screenWidth, isMobile]);
+	const overlayStyle = useMemo(() => {
+		return applyHtmlOverlayStyles(layer, false, distanceFactor, true, occlude);
+	}, [
+		layer,
+		distanceFactor,
+		occlude
+	]);
+	const textStyle = useMemo(() => ({
+		color: hexToRgbaString(color),
+		fontFamily: koreanTypography.fontFamily,
+		textAlign: align,
+		fontWeight: weight === "bold" ? "bold" : "normal",
+		textShadow: `0 2px 4px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, .5)}`,
+		userSelect: "none",
+		WebkitUserSelect: "none",
+		lineHeight: koreanTypography.lineHeight,
+		letterSpacing: koreanTypography.letterSpacing,
+		wordBreak: koreanTypography.wordBreak,
+		wordWrap: koreanTypography.wordWrap
+	}), [
+		color,
+		align,
+		weight,
+		koreanTypography
+	]);
+	const containerStyle = useMemo(() => ({
+		display: "flex",
+		flexDirection: layout === "vertical" ? "column" : "row",
+		alignItems: "center",
+		gap: layout === "vertical" ? "4px" : "8px",
+		transform: overlayStyle.transform,
+		pointerEvents: overlayStyle.pointerEvents,
+		zIndex: overlayStyle.zIndex
+	}), [layout, overlayStyle]);
+	const koreanStyle = useMemo(() => ({
+		...textStyle,
+		fontSize: textSize.korean
+	}), [textStyle, textSize.korean]);
+	const englishStyle = useMemo(() => ({
+		...textStyle,
+		fontSize: textSize.english,
+		opacity: .8,
+		fontStyle: "italic"
+	}), [textStyle, textSize.english]);
+	return /* @__PURE__ */ jsx(Html, {
+		position,
+		center: overlayStyle.center,
+		distanceFactor: overlayStyle.distanceFactor,
+		occlude: overlayStyle.occlude,
+		style: { pointerEvents: overlayStyle.pointerEvents },
+		children: /* @__PURE__ */ jsxs("div", {
+			style: containerStyle,
+			"data-testid": testId ?? "base-text",
+			"aria-label": ariaLabel,
+			"aria-live": ariaLive,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					lang: "ko",
+					style: koreanStyle,
+					children: korean
+				}),
+				layout === "vertical" && /* @__PURE__ */ jsx("span", {
+					lang: "en",
+					style: englishStyle,
+					children: english
+				}),
+				layout === "horizontal" && /* @__PURE__ */ jsxs("span", {
+					lang: "en",
+					style: englishStyle,
+					children: ["| ", english]
+				})
+			]
+		})
+	});
+};
+var BaseText = React.memo(BaseTextComponent);
+BaseText.displayName = "BaseText";
+//#endregion
+export { BaseText };
+
+//# sourceMappingURL=BaseText.js.map

package/lib/components/shared/base/BaseText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseText.js","names":[],"sources":["../../../../src/components/shared/base/BaseText.tsx"],"sourcesContent":["/**\n * BaseText - Enhanced bilingual text component with Korean theming\n *\n * Builds on existing KoreanText with extracted common logic\n * Provides consistent text styling across the application\n *\n * Now with Html overlay positioning helpers for:\n * - Consistent z-index management\n * - Performance optimization with distanceFactor\n * - GPU acceleration\n *\n * @module components/base\n */\n\nimport { Html } from \"@react-three/drei\";\nimport React, { useMemo, useState, useEffect } from \"react\";\nimport { KOREAN_COLORS, UI_DIMENSIONS } from \"@/types/constants\";\nimport { hexToRgbaString } from \"../../../utils/colorUtils\";\nimport {\n  applyHtmlOverlayStyles,\n  calculateDistanceFactor,\n} from \"../../../utils/htmlOverlayHelpers\";\nimport type { HtmlOverlayLayer } from \"../../../types/HtmlOverlayTypes\";\nimport { useKoreanTheme } from \"./useKoreanTheme\";\n\n/**\n * Props for BaseText component\n */\nexport interface BaseTextProps {\n  readonly korean: string;\n  readonly english: string;\n  readonly position?: [number, number, number];\n  readonly size?: \"small\" | \"medium\" | \"large\" | \"xlarge\";\n  readonly color?: number;\n  readonly align?: \"left\" | \"center\" | \"right\";\n  readonly weight?: \"normal\" | \"bold\";\n  readonly layout?: \"vertical\" | \"horizontal\";\n  readonly testId?: string;\n  readonly isMobile?: boolean;\n  /** Html overlay layer for z-index (default: 'hud') */\n  readonly layer?: HtmlOverlayLayer;\n  /** Whether text should occlude behind 3D objects (default: false) */\n  readonly occlude?: boolean;\n  /** ARIA label for accessibility (optional) */\n  readonly ariaLabel?: string;\n  /** ARIA live region for dynamic content (optional) */\n  readonly ariaLive?: \"polite\" | \"assertive\" | \"off\";\n}\n\n/**\n * BaseText Component\n *\n * Enhanced bilingual text component with Korean cyberpunk styling.\n * Uses useKoreanTheme hook for consistent text sizing and styling.\n * Now includes Html overlay positioning helpers for proper z-index and performance.\n *\n * Korean Typography Features:\n * - Optimized line height (1.6) for Korean character readability\n * - Letter spacing (-0.01em) for tighter Korean text\n * - Word break (keep-all) to prevent breaking Korean words mid-syllable\n * - Proper language attributes (lang=\"ko\" / lang=\"en\")\n *\n * WCAG 2.1 AA Accessibility Features:\n * - Proper language attributes for screen readers\n * - Optional ARIA labels for additional context\n * - ARIA live regions for dynamic content\n *\n * Optimized with React.memo for performance\n *\n * @example\n * ```tsx\n * <BaseText\n *   korean=\"공격\"\n *   english=\"Attack\"\n *   size=\"large\"\n *   layout=\"vertical\"\n *   layer=\"hud\"\n *   ariaLive=\"polite\"\n * />\n * ```\n */\nconst BaseTextComponent: React.FC<BaseTextProps> = ({\n  korean,\n  english,\n  position = [0, 0, 0],\n  size = \"medium\",\n  color = KOREAN_COLORS.TEXT_PRIMARY,\n  align = \"center\",\n  weight = \"normal\",\n  layout = \"vertical\",\n  testId,\n  isMobile = false,\n  layer = \"hud\",\n  occlude = false,\n  ariaLabel,\n  ariaLive = \"off\",\n}) => {\n  // Use Korean theme hook for consistent text sizing\n  const { textSize, koreanTypography } = useKoreanTheme({\n    size,\n    isMobile,\n  });\n\n  // Track screen width for responsive distance factor updates on resize\n  const [screenWidth, setScreenWidth] = useState(() =>\n    typeof window !== \"undefined\"\n      ? window.innerWidth\n      : UI_DIMENSIONS.DEFAULT_SCREEN_WIDTH,\n  );\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n\n    const handleResize = () => {\n      setScreenWidth(window.innerWidth);\n    };\n\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  // Calculate optimal distance factor for text\n  const distanceFactor = useMemo(() => {\n    return calculateDistanceFactor(screenWidth, \"text\", isMobile);\n  }, [screenWidth, isMobile]);\n\n  // Apply Html overlay styles with proper z-index\n  const overlayStyle = useMemo(() => {\n    return applyHtmlOverlayStyles(layer, false, distanceFactor, true, occlude);\n  }, [layer, distanceFactor, occlude]);\n\n  // Memoize text styles for performance with Korean typography optimization\n  const textStyle = useMemo<React.CSSProperties>(\n    () => ({\n      color: hexToRgbaString(color),\n      fontFamily: koreanTypography.fontFamily,\n      textAlign: align,\n      fontWeight: weight === \"bold\" ? \"bold\" : \"normal\",\n      textShadow: `0 2px 4px ${hexToRgbaString(KOREAN_COLORS.BLACK_SOLID, 0.5)}`,\n      userSelect: \"none\",\n      WebkitUserSelect: \"none\",\n      // Korean typography optimization\n      lineHeight: koreanTypography.lineHeight,\n      letterSpacing: koreanTypography.letterSpacing,\n      wordBreak: koreanTypography.wordBreak,\n      wordWrap: koreanTypography.wordWrap,\n    }),\n    [color, align, weight, koreanTypography],\n  );\n\n  const containerStyle = useMemo<React.CSSProperties>(\n    () => ({\n      display: \"flex\",\n      flexDirection: layout === \"vertical\" ? \"column\" : \"row\",\n      alignItems: \"center\",\n      gap: layout === \"vertical\" ? \"4px\" : \"8px\",\n      // Apply GPU acceleration from overlay style\n      transform: overlayStyle.transform,\n      pointerEvents: overlayStyle.pointerEvents,\n      zIndex: overlayStyle.zIndex,\n    }),\n    [layout, overlayStyle],\n  );\n\n  const koreanStyle = useMemo<React.CSSProperties>(\n    () => ({\n      ...textStyle,\n      fontSize: textSize.korean,\n    }),\n    [textStyle, textSize.korean],\n  );\n\n  const englishStyle = useMemo<React.CSSProperties>(\n    () => ({\n      ...textStyle,\n      fontSize: textSize.english,\n      opacity: 0.8,\n      fontStyle: \"italic\",\n    }),\n    [textStyle, textSize.english],\n  );\n\n  return (\n    <Html\n      position={position}\n      center={overlayStyle.center}\n      distanceFactor={overlayStyle.distanceFactor}\n      occlude={overlayStyle.occlude}\n      style={{ pointerEvents: overlayStyle.pointerEvents }}\n    >\n      <div\n        style={containerStyle}\n        data-testid={testId ?? \"base-text\"}\n        aria-label={ariaLabel}\n        aria-live={ariaLive}\n      >\n        <span lang=\"ko\" style={koreanStyle}>\n          {korean}\n        </span>\n        {layout === \"vertical\" && (\n          <span lang=\"en\" style={englishStyle}>\n            {english}\n          </span>\n        )}\n        {layout === \"horizontal\" && (\n          <span lang=\"en\" style={englishStyle}>\n            | {english}\n          </span>\n        )}\n      </div>\n    </Html>\n  );\n};\n\n// Export memoized component for performance optimization\nexport const BaseText = React.memo(BaseTextComponent);\n\nBaseText.displayName = \"BaseText\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,IAAM,qBAA8C,EAClD,QACA,SACA,WAAW;CAAC;CAAG;CAAG;CAAE,EACpB,OAAO,UACP,QAAQ,cAAc,cACtB,QAAQ,UACR,SAAS,UACT,SAAS,YACT,QACA,WAAW,OACX,QAAQ,OACR,UAAU,OACV,WACA,WAAW,YACP;CAEJ,MAAM,EAAE,UAAU,qBAAqB,eAAe;EACpD;EACA;EACD,CAAC;CAGF,MAAM,CAAC,aAAa,kBAAkB,eACpC,OAAO,WAAW,cACd,OAAO,aACP,cAAc,qBACnB;AAED,iBAAgB;AACd,MAAI,OAAO,WAAW,YAAa;EAEnC,MAAM,qBAAqB;AACzB,kBAAe,OAAO,WAAW;;AAGnC,SAAO,iBAAiB,UAAU,aAAa;AAC/C,eAAa,OAAO,oBAAoB,UAAU,aAAa;IAC9D,EAAE,CAAC;CAGN,MAAM,iBAAiB,cAAc;AACnC,SAAO,wBAAwB,aAAa,QAAQ,SAAS;IAC5D,CAAC,aAAa,SAAS,CAAC;CAG3B,MAAM,eAAe,cAAc;AACjC,SAAO,uBAAuB,OAAO,OAAO,gBAAgB,MAAM,QAAQ;IACzE;EAAC;EAAO;EAAgB;EAAQ,CAAC;CAGpC,MAAM,YAAY,eACT;EACL,OAAO,gBAAgB,MAAM;EAC7B,YAAY,iBAAiB;EAC7B,WAAW;EACX,YAAY,WAAW,SAAS,SAAS;EACzC,YAAY,aAAa,gBAAgB,cAAc,aAAa,GAAI;EACxE,YAAY;EACZ,kBAAkB;EAElB,YAAY,iBAAiB;EAC7B,eAAe,iBAAiB;EAChC,WAAW,iBAAiB;EAC5B,UAAU,iBAAiB;EAC5B,GACD;EAAC;EAAO;EAAO;EAAQ;EAAiB,CACzC;CAED,MAAM,iBAAiB,eACd;EACL,SAAS;EACT,eAAe,WAAW,aAAa,WAAW;EAClD,YAAY;EACZ,KAAK,WAAW,aAAa,QAAQ;EAErC,WAAW,aAAa;EACxB,eAAe,aAAa;EAC5B,QAAQ,aAAa;EACtB,GACD,CAAC,QAAQ,aAAa,CACvB;CAED,MAAM,cAAc,eACX;EACL,GAAG;EACH,UAAU,SAAS;EACpB,GACD,CAAC,WAAW,SAAS,OAAO,CAC7B;CAED,MAAM,eAAe,eACZ;EACL,GAAG;EACH,UAAU,SAAS;EACnB,SAAS;EACT,WAAW;EACZ,GACD,CAAC,WAAW,SAAS,QAAQ,CAC9B;AAED,QACE,oBAAC,MAAD;EACY;EACV,QAAQ,aAAa;EACrB,gBAAgB,aAAa;EAC7B,SAAS,aAAa;EACtB,OAAO,EAAE,eAAe,aAAa,eAAe;YAEpD,qBAAC,OAAD;GACE,OAAO;GACP,eAAa,UAAU;GACvB,cAAY;GACZ,aAAW;aAJb;IAME,oBAAC,QAAD;KAAM,MAAK;KAAK,OAAO;eACpB;KACI,CAAA;IACN,WAAW,cACV,oBAAC,QAAD;KAAM,MAAK;KAAK,OAAO;eACpB;KACI,CAAA;IAER,WAAW,gBACV,qBAAC,QAAD;KAAM,MAAK;KAAK,OAAO;eAAvB,CAAqC,MAChC,QACE;;IAEL;;EACD,CAAA;;AAKX,IAAa,WAAW,MAAM,KAAK,kBAAkB;AAErD,SAAS,cAAc"}

package/lib/components/shared/base/ResponsiveContainer.d.ts

@@ -0,0 +1,126 @@
+/**
+ * ResponsiveContainer - Grid-based responsive layout container
+ *
+ * A flexible container component that uses the unified LayoutSystem for positioning.
+ * Supports grid-based layout, responsive positioning, and proper z-index layering.
+ *
+ * Features:
+ * - Grid-based positioning (12-column system)
+ * - Responsive breakpoints (mobile/tablet/desktop)
+ * - Safe area handling for mobile devices
+ * - Alignment helpers (horizontal/vertical)
+ * - Z-index layer management
+ *
+ * Note: When both grid and alignment are specified, alignment takes precedence
+ * for the aligned axis. This allows grid-based sizing with custom alignment.
+ *
+ * @module components/base/ResponsiveContainer
+ * @category Base Components
+ * @korean 반응형컨테이너
+ */
+import React from "react";
+import { GridPosition, HorizontalAlignment, ResponsivePosition, VerticalAlignment, ZIndexValue } from "../../../types/LayoutTypes";
+/**
+ * Default row height for grid-based vertical positioning (in pixels)
+ * Used when row index is specified in GridPosition
+ * Exported for use in custom layouts requiring consistent vertical spacing
+ */
+export declare const DEFAULT_ROW_HEIGHT = 100;
+/**
+ * Props for ResponsiveContainer component
+ */
+export interface ResponsiveContainerProps {
+    /** Child elements to render */
+    readonly children: React.ReactNode;
+    /** Grid-based position configuration */
+    readonly grid?: GridPosition;
+    /** Responsive position configuration (alternative to grid) */
+    readonly position?: ResponsivePosition;
+    /** Z-index layer for stacking */
+    readonly zIndex?: ZIndexValue;
+    /**
+     * Horizontal alignment within parent
+     * ⚠️ Requires elementWidth to be specified for alignment calculations to work
+     * Without elementWidth, alignment will be silently ignored
+     */
+    readonly horizontalAlign?: HorizontalAlignment;
+    /**
+     * Vertical alignment within parent
+     * ⚠️ Requires elementHeight to be specified for alignment calculations to work
+     * Without elementHeight, alignment will be silently ignored
+     */
+    readonly verticalAlign?: VerticalAlignment;
+    /** Margin in pixels */
+    readonly margin?: number;
+    /** Padding in pixels */
+    readonly padding?: number;
+    /** Container width (required for grid calculations) */
+    readonly containerWidth: number;
+    /** Container height (for vertical alignment) */
+    readonly containerHeight?: number;
+    /** Element width (for alignment calculations) */
+    readonly elementWidth?: number;
+    /** Element height (for alignment calculations) */
+    readonly elementHeight?: number;
+    /** Additional CSS class names */
+    readonly className?: string;
+    /** Additional inline styles */
+    readonly style?: React.CSSProperties;
+    /** Apply safe area insets for mobile devices */
+    readonly useSafeArea?: boolean;
+    /** Safe area edge to apply ('top' | 'bottom' | 'left' | 'right') */
+    readonly safeAreaEdge?: "top" | "bottom" | "left" | "right";
+    /** Data test ID for testing */
+    readonly "data-testid"?: string;
+}
+/**
+ * ResponsiveContainer Component
+ *
+ * Provides grid-based or responsive positioning using the unified LayoutSystem.
+ * Can be used as a wrapper for any UI element that needs consistent positioning.
+ *
+ * @example Grid-based positioning
+ * ```tsx
+ * <ResponsiveContainer
+ *   grid={{ column: 2, span: 8 }}
+ *   containerWidth={1200}
+ *   zIndex={Z_INDEX.HUD}
+ * >
+ *   <PlayerHUD />
+ * </ResponsiveContainer>
+ * ```
+ *
+ * @example Responsive positioning with alignment
+ * ```tsx
+ * <ResponsiveContainer
+ *   position={{
+ *     base: { x: 100, y: 50 },
+ *     mobile: { x: 10, y: 20 }
+ *   }}
+ *   containerWidth={width}
+ *   horizontalAlign="center"
+ *   zIndex={Z_INDEX.MODAL}
+ * >
+ *   <Dialog />
+ * </ResponsiveContainer>
+ * ```
+ *
+ * @example Safe area handling for mobile
+ * ```tsx
+ * <ResponsiveContainer
+ *   position={{ base: { x: 0, y: 0 } }}
+ *   containerWidth={width}
+ *   useSafeArea
+ *   safeAreaEdge="top"
+ *   zIndex={Z_INDEX.HUD}
+ * >
+ *   <Header />
+ * </ResponsiveContainer>
+ * ```
+ */
+export declare const ResponsiveContainer: React.FC<ResponsiveContainerProps>;
+/**
+ * Default export for convenience
+ */
+export default ResponsiveContainer;
+//# sourceMappingURL=ResponsiveContainer.d.ts.map

package/lib/components/shared/base/ResponsiveContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveContainer.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/base/ResponsiveContainer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,WAAW,EACZ,MAAM,4BAA4B,CAAC;AAEpC;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,+BAA+B;IAC/B,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC,wCAAwC;IACxC,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC;IAE7B,8DAA8D;IAC9D,QAAQ,CAAC,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAEvC,iCAAiC;IACjC,QAAQ,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC;IAE9B;;;;OAIG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,mBAAmB,CAAC;IAE/C;;;;OAIG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,iBAAiB,CAAC;IAE3C,uBAAuB;IACvB,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAEzB,wBAAwB;IACxB,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAE1B,uDAAuD;IACvD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAEhC,gDAAgD;IAChD,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAElC,iDAAiD;IACjD,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAE/B,kDAAkD;IAClD,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAEhC,iCAAiC;IACjC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAE5B,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAErC,gDAAgD;IAChD,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAE/B,oEAAoE;IACpE,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAE5D,+BAA+B;IAC/B,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA2IlE,CAAC;AAEF;;GAEG;AACH,eAAe,mBAAmB,CAAC"}

package/lib/components/shared/base/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Base Korean-themed UI components
+ *
+ * Provides centralized Korean cyberpunk theming components
+ * to eliminate code duplication across the application.
+ *
+ * Enhanced with WCAG 2.1 AA accessibility features and Korean typography optimization
+ *
+ * @module components/base
+ */
+export { BaseButton } from "./BaseButton";
+export type { BaseButtonProps } from "./BaseButton";
+export { BasePanel } from "./BasePanel";
+export type { BasePanelProps } from "./BasePanel";
+export { BaseText } from "./BaseText";
+export type { BaseTextProps } from "./BaseText";
+export { BaseButtonOverlayHtml } from "./BaseButtonOverlayHtml";
+export type { BaseButtonOverlayHtmlProps } from "./BaseButtonOverlayHtml";
+export { AccessibilityProvider, useAccessibility } from "./AccessibilityProvider";
+export type { AccessibilityProviderProps, AccessibilityContextValue } from "./AccessibilityProvider";
+export { useKoreanTheme } from "./useKoreanTheme";
+export type { UseKoreanThemeConfig, ButtonVariantConfig, PanelVariantConfig, SizeDimensions, TextSizeConfig, KoreanTypographyConfig, AccessibilityConfig, } from "./useKoreanTheme";
+//# sourceMappingURL=index.d.ts.map

package/lib/components/shared/base/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/base/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAG1E,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAClF,YAAY,EAAE,0BAA0B,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGrG,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EACV,oBAAoB,EACpB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,sBAAsB,EACtB,mBAAmB,GACpB,MAAM,kBAAkB,CAAC"}

package/lib/components/shared/base/index.js

@@ -0,0 +1,6 @@
+import "./useKoreanTheme.js";
+import "./BaseButton.js";
+import "./BasePanel.js";
+import "./BaseText.js";
+import "./BaseButtonOverlayHtml.js";
+import "./AccessibilityProvider.js";

package/lib/components/shared/base/layoutUtils.d.ts

@@ -0,0 +1,102 @@
+/**
+ * layoutUtils - Layout calculation utilities for Korean-themed components
+ *
+ * Provides responsive layout calculations and positioning utilities
+ *
+ * @module components/base
+ */
+/**
+ * Layout configuration for responsive design
+ */
+export interface LayoutConfig {
+    readonly isMobile: boolean;
+    readonly baseSize?: number;
+    readonly mobileSizeScale?: number;
+}
+/**
+ * Calculate responsive font size
+ *
+ * @param baseSize - Base font size in pixels
+ * @param isMobile - Whether the display is mobile
+ * @returns Calculated font size
+ */
+export declare function calculateResponsiveFontSize(baseSize: number, isMobile: boolean): number;
+/**
+ * Calculate responsive padding
+ *
+ * @param basePadding - Base padding in pixels
+ * @param isMobile - Whether the display is mobile
+ * @returns Calculated padding value
+ */
+export declare function calculateResponsivePadding(basePadding: number, isMobile: boolean): number;
+/**
+ * Calculate responsive spacing
+ *
+ * @param baseSpacing - Base spacing in pixels
+ * @param isMobile - Whether the display is mobile
+ * @returns Calculated spacing value
+ */
+export declare function calculateResponsiveSpacing(baseSpacing: number, isMobile: boolean): number;
+/**
+ * Calculate responsive dimensions
+ *
+ * @param config - Layout configuration
+ * @returns Calculated dimensions for responsive layout
+ */
+export declare function calculateResponsiveDimensions(config: LayoutConfig): {
+    fontSize: number;
+    padding: number;
+    spacing: number;
+    borderWidth: number;
+};
+/**
+ * Get layout constants for screen size
+ *
+ * @param isMobile - Whether the display is mobile
+ * @returns Layout constants object
+ */
+export declare function getLayoutConstants(isMobile: boolean): {
+    padding: number;
+    spacing: number;
+    headerHeight: number;
+    footerHeight: number;
+    buttonSize: number;
+    fontSize: {
+        small: number;
+        medium: number;
+        large: number;
+        xlarge: number;
+    };
+};
+/**
+ * Convert pixel value to rem
+ *
+ * @param px - Pixel value
+ * @param baseFontSize - Base font size (default 16)
+ * @returns Value in rem
+ */
+export declare function pxToRem(px: number, baseFontSize?: number): string;
+/**
+ * Calculate position for centered element
+ *
+ * @param containerSize - Size of container
+ * @param elementSize - Size of element
+ * @returns Centered position
+ */
+export declare function calculateCenteredPosition(containerSize: number, elementSize: number): number;
+/**
+ * Calculate grid layout dimensions
+ *
+ * @param totalItems - Total number of items
+ * @param columns - Number of columns
+ * @param gap - Gap between items
+ * @returns Grid layout dimensions
+ */
+export declare function calculateGridLayout(totalItems: number, columns: number, gap: number): {
+    rows: number;
+    columns: number;
+    gap: number;
+    totalGapWidth: number;
+    totalGapHeight: number;
+};
+//# sourceMappingURL=layoutUtils.d.ts.map

package/lib/components/shared/base/layoutUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layoutUtils.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/base/layoutUtils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;CACnC;AAED;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,OAAO,GAChB,MAAM,CAER;AAED;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CACxC,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,OAAO,GAChB,MAAM,CAER;AAED;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CACxC,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,OAAO,GAChB,MAAM,CAER;AAED;;;;;GAKG;AACH,wBAAgB,6BAA6B,CAAC,MAAM,EAAE,YAAY;;;;;EAejE;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,OAAO;;;;;;;;;;;;EAcnD;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,YAAY,GAAE,MAAW,GAAG,MAAM,CAErE;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CACvC,aAAa,EAAE,MAAM,EACrB,WAAW,EAAE,MAAM,GAClB,MAAM,CAER;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,MAAM,EACf,GAAG,EAAE,MAAM;;;;;;EAWZ"}

package/lib/components/shared/base/useKoreanTheme.d.ts

@@ -0,0 +1,206 @@
+/**
+ * useKoreanTheme - Custom hook for Korean cyberpunk theming
+ *
+ * Provides centralized Korean theme styling and responsive utilities
+ * Eliminates code duplication across UI components
+ *
+ * Enhanced with:
+ * - Korean typography optimization (line height, letter spacing, word break)
+ * - Accessibility features (focus indicators, touch targets, high contrast)
+ * - WCAG 2.1 AA compliant color contrast ratios
+ *
+ * @module components/base
+ */
+/**
+ * Button variant configuration
+ */
+export interface ButtonVariantConfig {
+    readonly background: number;
+    readonly border: number;
+    readonly text: number;
+    readonly hoverBg: string;
+    readonly activeBg: string;
+}
+/**
+ * Panel variant configuration
+ */
+export interface PanelVariantConfig {
+    readonly background: string;
+    readonly border: string;
+    readonly boxShadow: string;
+}
+/**
+ * Size dimension configuration
+ */
+export interface SizeDimensions {
+    readonly padding: string;
+    readonly fontSize: string;
+    readonly borderWidth: string;
+}
+/**
+ * Text size configuration
+ */
+export interface TextSizeConfig {
+    readonly korean: string;
+    readonly english: string;
+}
+/**
+ * Korean typography configuration
+ */
+export interface KoreanTypographyConfig {
+    readonly fontFamily: string;
+    readonly lineHeight: number;
+    readonly letterSpacing: string;
+    readonly wordBreak: "normal" | "break-all" | "keep-all" | "break-word";
+    readonly wordWrap: "normal" | "break-word";
+}
+/**
+ * Accessibility configuration
+ */
+export interface AccessibilityConfig {
+    readonly focusOutline: string;
+    readonly focusOutlineOffset: string;
+    readonly minTouchTarget: string;
+    readonly highContrastFocusOutline: string;
+}
+/**
+ * Korean theme hook configuration
+ */
+export interface UseKoreanThemeConfig {
+    readonly variant?: "primary" | "secondary" | "danger" | "default" | "bordered" | "elevated";
+    readonly size?: "sm" | "md" | "lg" | "small" | "medium" | "large" | "xlarge";
+    readonly disabled?: boolean;
+    readonly isMobile?: boolean;
+    readonly highContrast?: boolean;
+}
+/**
+ * Custom hook for Korean cyberpunk theming
+ *
+ * Provides consistent styling patterns for all Korean-themed components
+ * Enhanced with Korean typography optimization and accessibility features
+ *
+ * @example
+ * ```tsx
+ * const { buttonVariant, sizeDimensions, koreanTypography } = useKoreanTheme({
+ *   variant: "primary",
+ *   size: "md"
+ * });
+ * ```
+ */
+export declare function useKoreanTheme(config?: UseKoreanThemeConfig): {
+    buttonVariant: ButtonVariantConfig;
+    panelVariant: PanelVariantConfig;
+    buttonSize: SizeDimensions;
+    textSize: TextSizeConfig;
+    calculateResponsiveSize: (baseSize: number) => number;
+    applyKoreanTheme: (baseStyle: React.CSSProperties) => React.CSSProperties;
+    koreanTypography: KoreanTypographyConfig;
+    accessibility: AccessibilityConfig;
+    colors: {
+        readonly PRIMARY_CYAN: 59110;
+        readonly PRIMARY_BLUE: 26367;
+        readonly PRIMARY_BLUE_DARK: 13209;
+        readonly PRIMARY_RED: 16729156;
+        readonly SECONDARY_MAGENTA: 16724991;
+        readonly SECONDARY_PURPLE: 11158783;
+        readonly SECONDARY_YELLOW: 16777011;
+        readonly SECONDARY_ORANGE: 16742195;
+        readonly SECONDARY_BROWN_DARK: 9127187;
+        readonly ACCENT_GOLD: 16761856;
+        readonly ACCENT_RED: 16729156;
+        readonly ACCENT_GREEN: 4521796;
+        readonly ACCENT_PRIMARY: 54527;
+        readonly ACCENT_YELLOW: 16777011;
+        readonly ACCENT_PURPLE: 11158783;
+        readonly ACCENT_CYAN: 59110;
+        readonly ACCENT_ORANGE: 16746547;
+        readonly ACCENT_BLUE: 3381759;
+        readonly KOREAN_RED: 13111342;
+        readonly KOREAN_BLUE: 13432;
+        readonly KOREAN_WHITE: 16777215;
+        readonly KOREAN_BLACK: 0;
+        readonly TEXT_PRIMARY: 16777215;
+        readonly TEXT_SECONDARY: 13421772;
+        readonly TEXT_TERTIARY: 11184810;
+        readonly TEXT_ACCENT: 59110;
+        readonly TEXT_WARNING: 16759552;
+        readonly TEXT_ERROR: 16729156;
+        readonly TEXT_BRIGHT: 16777215;
+        readonly UI_BACKGROUND_DARK: 657930;
+        readonly UI_BACKGROUND_MEDIUM: 1710618;
+        readonly UI_BACKGROUND_LIGHT: 2763306;
+        readonly UI_STEEL_GRAY: 5924216;
+        readonly UI_STEEL_GRAY_DARK: 4015960;
+        readonly UI_BORDER: 5924216;
+        readonly UI_BORDER_LIGHT: 6974090;
+        readonly UI_GRAY: 9474192;
+        readonly UI_DISABLED_FILL: 4015960;
+        readonly UI_DISABLED_BORDER: 2763326;
+        readonly UI_DISABLED_BG: 4473924;
+        readonly UI_DISABLED_TEXT: 7829367;
+        readonly CRITICAL_HIT: 16729156;
+        readonly BLOCKED_ATTACK: 9474192;
+        readonly PERFECT_STRIKE: 16761856;
+        readonly VITAL_POINT_HIT: 16724991;
+        readonly WARNING_ORANGE: 16742195;
+        readonly WARNING_YELLOW: 16777011;
+        readonly ACTIVE_BORDER: 59110;
+        readonly TRIGRAM_GEON_PRIMARY: 16766720;
+        readonly TRIGRAM_TAE_PRIMARY: 8900331;
+        readonly TRIGRAM_LI_PRIMARY: 16729344;
+        readonly TRIGRAM_JIN_PRIMARY: 9662683;
+        readonly TRIGRAM_SON_PRIMARY: 3329330;
+        readonly TRIGRAM_GAM_PRIMARY: 2003199;
+        readonly TRIGRAM_GAN_PRIMARY: 9127187;
+        readonly TRIGRAM_GON_PRIMARY: 3100495;
+        readonly POSITIVE_GREEN: 65280;
+        readonly POSITIVE_GREEN_DARK: 26112;
+        readonly NEGATIVE_RED: 16711680;
+        readonly NEGATIVE_RED_DARK: 10027008;
+        readonly NEGATIVE_RED_LIGHT: 16729156;
+        readonly NEUTRAL_GRAY: 8421504;
+        readonly WHITE_SOLID: 16777215;
+        readonly BLACK_SOLID: 0;
+        readonly BLACK: 0;
+        readonly TRANSPARENT: 0;
+        readonly HEALTH_FULL: 65280;
+        readonly HEALTH_MEDIUM: 16776960;
+        readonly HEALTH_LOW: 16737792;
+        readonly HEALTH_CRITICAL: 16711680;
+        readonly KI_FULL: 65535;
+        readonly KI_MEDIUM: 39372;
+        readonly KI_LOW: 26265;
+        readonly KI_EMPTY: 13158;
+        readonly STAMINA_FULL: 16776960;
+        readonly STAMINA_MEDIUM: 16763904;
+        readonly STAMINA_LOW: 16750848;
+        readonly STAMINA_EMPTY: 16737792;
+        readonly CONSCIOUSNESS_PURPLE: 9662683;
+        readonly PAIN_INDICATOR: 16739179;
+        readonly BLOODLOSS_INDICATOR: 13369344;
+        readonly MUSCLE_TONE: 13935475;
+        readonly MUSCLE_FLEXED: 15251606;
+        readonly MUSCLE_EXHAUSTED: 10909782;
+        readonly SKIN_TONE: 16111537;
+        readonly ARENA_BACKGROUND: 1710638;
+        readonly PLAYER_1_COLOR: 52479;
+        readonly PLAYER_2_COLOR: 16739125;
+        readonly SECONDARY_BLUE: 3368652;
+        readonly SECONDARY_BLUE_LIGHT: 5605614;
+        readonly SECONDARY_BLUE_DARK: 1131690;
+        readonly NEON_CYAN: 65535;
+        readonly NEON_PURPLE: 16711935;
+        readonly NEON_GREEN: 65280;
+        readonly NEON_PINK: 16716947;
+    };
+    fontFamily: {
+        readonly PRIMARY: "\"Noto Sans KR\", \"Malgun Gothic\", Arial, sans-serif";
+        readonly SECONDARY: "\"Nanum Gothic\", Arial, sans-serif";
+        readonly MONO: "\"Nanum Gothic Coding\", monospace";
+        readonly KOREAN_BATTLE: "\"Noto Sans KR\", Impact, sans-serif";
+        readonly CYBER: "\"Orbitron\", \"Noto Sans KR\", monospace";
+        readonly SYMBOL: "\"Arial Unicode MS\", Arial, sans-serif";
+        readonly KOREAN: "\"Noto Sans KR\", \"Malgun Gothic\", Arial, sans-serif";
+    };
+};
+//# sourceMappingURL=useKoreanTheme.d.ts.map

package/lib/components/shared/base/useKoreanTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKoreanTheme.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/base/useKoreanTheme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAMH;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,SAAS,EAAE,QAAQ,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;IACvE,QAAQ,CAAC,QAAQ,EAAE,QAAQ,GAAG,YAAY,CAAC;CAC5C;AAED;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACpC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,wBAAwB,EAAE,MAAM,CAAC;CAC3C;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAC;IAC5F,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC7E,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;CACjC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,MAAM,GAAE,oBAAyB;;;;;wCAoJ1C,MAAM;kCASL,KAAK,CAAC,aAAa,KAAG,KAAK,CAAC,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoD/D"}