@almadar/ui 5.80.0 → 5.82.0

package/dist/runtime/index.cjs

@@ -2033,6 +2033,7 @@ var init_Button = __esm({
         rightIcon,
         icon: iconProp,
         iconRight: iconRightProp,
+        iconAsset,
         action,
         actionPayload,
         label,
@@ -2044,7 +2045,8 @@ var init_Button = __esm({
         const eventBus = useEventBus();
         const leftIconValue = leftIcon || iconProp;
         const rightIconValue = rightIcon || iconRightProp;
-        const resolvedLeftIcon = resolveIconProp(leftIconValue, iconSizeStyles[size]);
+        const px = size === "sm" ? 16 : size === "lg" ? 20 : 16;
+        const resolvedLeftIcon = iconAsset?.url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconAsset.url, alt: iconAsset.name ?? iconAsset.category ?? "", width: px, height: px, style: { imageRendering: "pixelated", objectFit: "contain", width: px, height: px }, className: "flex-shrink-0" }) : resolveIconProp(leftIconValue, iconSizeStyles[size]);
         const resolvedRightIcon = resolveIconProp(rightIconValue, iconSizeStyles[size]);
         const handleClick = (e) => {
           if (action) {
@@ -2702,13 +2704,14 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     Badge = React103__namespace.default.forwardRef(
-      ({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
+      ({ className, variant = "default", size = "sm", amount, label, icon, iconAsset, children, onRemove, removeLabel, ...props }, ref) => {
         const iconSizes3 = {
           sm: "h-icon-default w-icon-default",
           md: "h-icon-default w-icon-default",
           lg: "h-icon-default w-icon-default"
         };
-        const resolvedIcon = typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: iconSizes3[size] }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: iconSizes3[size] }) : null;
+        const iconPx = size === "lg" ? 20 : 16;
+        const resolvedIcon = iconAsset?.url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconAsset.url, alt: iconAsset.name ?? iconAsset.category ?? "", width: iconPx, height: iconPx, style: { imageRendering: "pixelated", objectFit: "contain", width: iconPx, height: iconPx }, className: "flex-shrink-0" }) : typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: iconSizes3[size] }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: iconSizes3[size] }) : null;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
@@ -8928,10 +8931,43 @@ var init_shared = __esm({
     init_canvasEffects();
   }
 });
+function GameIcon({ assetUrl, icon, size = "md", alt, className }) {
+  const px = typeof size === "number" ? size : sizeMap[size];
+  if (assetUrl?.url) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: assetUrl.url,
+        alt: alt ?? assetUrl.category ?? "",
+        width: px,
+        height: px,
+        style: { imageRendering: "pixelated", objectFit: "contain", width: px, height: px },
+        className: cn("flex-shrink-0", className)
+      }
+    );
+  }
+  const I = typeof icon === "string" ? resolveIcon(icon) : icon;
+  return /* @__PURE__ */ jsxRuntime.jsx(I, { width: px, height: px, className: cn("flex-shrink-0", className) });
+}
+var sizeMap;
+var init_GameIcon = __esm({
+  "components/game/2d/atoms/GameIcon.tsx"() {
+    "use client";
+    init_cn();
+    init_Icon();
+    sizeMap = {
+      sm: 16,
+      md: 24,
+      lg: 32
+    };
+    GameIcon.displayName = "GameIcon";
+  }
+});
 function GameCard({
   id,
   cost,
   art,
+  frameAsset,
   attack,
   defense,
   name,
@@ -8949,16 +8985,19 @@ function GameCard({
     if (clickEvent) eventBus.emit(`UI:${clickEvent}`, { cardId: id });
   }, [disabled, id, onClick, clickEvent, eventBus]);
   const artPx = artPxMap[size];
+  const frameStyle = frameAsset?.url ? { backgroundImage: `url(${frameAsset.url})`, backgroundSize: "100% 100%", backgroundRepeat: "no-repeat" } : {};
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    Button,
     {
-      type: "button",
+      variant: "ghost",
       onClick: handleClick,
       disabled,
       title: name,
+      style: frameStyle,
       className: cn(
-        "relative flex flex-col items-center rounded-interactive border-2",
+        "relative flex flex-col items-center rounded-interactive",
         "bg-card/90 px-1.5 pt-1.5 pb-1 transition-all duration-150",
+        frameAsset?.url ? "border-0" : "border-2",
         cardSizeMap[size],
         disabled ? "border-border opacity-50 cursor-not-allowed" : "border-accent hover:brightness-125 hover:-translate-y-1 cursor-pointer",
         selected && "ring-2 ring-foreground ring-offset-1 ring-offset-background -translate-y-1",
@@ -8966,8 +9005,9 @@ function GameCard({
       ),
       children: [
         cost != null && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+          Typography,
           {
+            as: "span",
             className: cn(
               "absolute -top-2 -left-2 flex items-center justify-center",
               "min-w-[22px] h-[22px] rounded-full px-1",
@@ -8976,17 +9016,7 @@ function GameCard({
             children: cost
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 flex items-center justify-center w-full", children: art ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: art.url,
-            alt: name ?? id,
-            width: artPx,
-            height: artPx,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "rounded bg-muted/40", style: { width: artPx, height: artPx } }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 flex items-center justify-center w-full", children: art ? /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl: art, icon: "image", size: artPx, alt: name ?? id, className: "flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "rounded bg-muted/40", style: { width: artPx, height: artPx } }) }),
         name != null && /* @__PURE__ */ jsxRuntime.jsx(
           Typography,
           {
@@ -8996,8 +9026,8 @@ function GameCard({
           }
         ),
         (attack != null || defense != null) && /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex w-full items-center justify-between px-0.5 text-[10px] font-bold leading-none", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-error", children: attack != null ? `\u2694${attack}` : "" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-info", children: defense != null ? `\u{1F6E1}${defense}` : "" })
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-error", children: attack != null ? `\u2694${attack}` : "" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-info", children: defense != null ? `\u{1F6E1}${defense}` : "" })
         ] })
       ]
     }
@@ -9010,7 +9040,9 @@ var init_GameCard = __esm({
     init_cn();
     init_useEventBus();
     init_Box();
+    init_Button();
     init_Typography();
+    init_GameIcon();
     cardSizeMap = {
       sm: "w-16 h-24",
       md: "w-20 h-28",
@@ -9033,12 +9065,13 @@ function HealthBar({
   frameAsset,
   fillAsset
 }) {
-  const sizes = sizeMap[size];
+  const sizes = sizeMap2[size];
   const percentage = max > 0 ? Math.max(0, Math.min(100, current / max * 100)) : 0;
   if (format === "hearts") {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-1", className), children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("flex items-center gap-1", className), children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      Box,
       {
+        as: "span",
         className: cn(animated && "transition-transform hover:scale-110"),
         children: heartIcon(i < current, sizes.heart)
       },
@@ -9047,10 +9080,12 @@ function HealthBar({
   }
   if (format === "bar") {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      Box,
       {
+        position: "relative",
+        overflow: "hidden",
         className: cn(
-          "relative overflow-hidden rounded-full",
+          "rounded-full",
           !frameAsset && "bg-muted",
           sizes.bar,
           "w-24",
@@ -9058,10 +9093,11 @@ function HealthBar({
         ),
         style: frameAsset ? { backgroundImage: `url(${frameAsset.url})`, backgroundSize: "100% 100%" } : void 0,
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          Box,
           {
+            position: "absolute",
             className: cn(
-              "absolute inset-y-0 left-0 rounded-full",
+              "inset-y-0 left-0 rounded-full",
               !fillAsset && (percentage > 66 ? "bg-success" : percentage > 33 ? "bg-warning" : "bg-error"),
               animated && "transition-all duration-300"
             ),
@@ -9075,10 +9111,11 @@ function HealthBar({
     );
   }
   if (format === "progress") {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("flex items-center gap-2", className), children: [
       level != null && /* @__PURE__ */ jsxRuntime.jsxs(
-        "span",
+        Typography,
         {
+          as: "span",
           className: cn(
             "flex-shrink-0 rounded-interactive font-bold",
             "bg-accent text-accent-foreground border border-accent",
@@ -9090,21 +9127,23 @@ function HealthBar({
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex-1 flex flex-col gap-0.5", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          Box,
           {
+            position: "relative",
             className: cn(
-              "relative w-full overflow-hidden rounded-full",
+              "w-full overflow-hidden rounded-full",
               !frameAsset && "bg-muted border border-muted",
               sizes.bar
             ),
             style: frameAsset ? { backgroundImage: `url(${frameAsset.url})`, backgroundSize: "100% 100%" } : void 0,
             children: /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
+              Box,
               {
+                position: "absolute",
                 className: cn(
-                  "absolute inset-y-0 left-0 rounded-full",
+                  "inset-y-0 left-0 rounded-full",
                   !fillAsset && "bg-gradient-to-r from-accent to-info",
                   animated && "transition-all duration-500 ease-out"
                 ),
@@ -9116,7 +9155,7 @@ function HealthBar({
             )
           }
         ),
-        showLabel && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("text-foreground/70 tabular-nums", sizes.label), children: [
+        showLabel && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { as: "span", className: cn("text-foreground/70 tabular-nums", sizes.label), children: [
           current,
           " / ",
           max,
@@ -9125,16 +9164,18 @@ function HealthBar({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("font-mono font-bold", sizes.text, className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Typography, { as: "span", className: cn("font-mono font-bold", sizes.text, className), children: [
     current,
     "/",
     max
   ] });
 }
-var heartIcon, sizeMap;
+var heartIcon, sizeMap2;
 var init_HealthBar = __esm({
   "components/game/2d/atoms/HealthBar.tsx"() {
     init_cn();
+    init_Box();
+    init_Typography();
     heartIcon = (filled, size) => /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
       {
@@ -9146,7 +9187,7 @@ var init_HealthBar = __esm({
         children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })
       }
     );
-    sizeMap = {
+    sizeMap2 = {
       sm: { heart: "w-4 h-4", bar: "h-2", text: "text-sm", label: "text-xs", badge: "text-xs px-1.5 py-0.5" },
       md: { heart: "w-6 h-6", bar: "h-3", text: "text-base", label: "text-xs", badge: "text-xs px-2 py-0.5" },
       lg: { heart: "w-8 h-8", bar: "h-4", text: "text-lg", label: "text-sm", badge: "text-sm px-2.5 py-1" }
@@ -9167,37 +9208,30 @@ function ScoreDisplay({
   const resolvedValue = typeof value === "number" && !Number.isNaN(value) ? value : typeof score === "number" && !Number.isNaN(score) ? score : 0;
   const formattedValue = new Intl.NumberFormat(locale).format(resolvedValue);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "flex items-center gap-2 font-bold",
-        sizeMap2[size],
+        sizeMap3[size],
         className
       ),
       children: [
-        assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: "",
-            width: 20,
-            height: 20,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) }) : null,
-        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tabular-nums", children: formattedValue })
+        assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl, icon: "image", size: 20, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) }) : null,
+        label && /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "tabular-nums", children: formattedValue })
       ]
     }
   );
 }
-var sizeMap2, DEFAULT_ASSET_URL;
+var sizeMap3, DEFAULT_ASSET_URL;
 var init_ScoreDisplay = __esm({
   "components/game/2d/atoms/ScoreDisplay.tsx"() {
     init_cn();
     init_Icon();
-    sizeMap2 = {
+    init_Box();
+    init_Typography();
+    init_GameIcon();
+    sizeMap3 = {
       sm: "text-sm",
       md: "text-lg",
       lg: "text-2xl",
@@ -9260,9 +9294,9 @@ function ControlButton({
     [isPressed, releaseEvent, eventBus, onRelease]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    Button,
     {
-      type: "button",
+      variant,
       disabled,
       onPointerDown: handlePointerDown,
       onPointerUp: handlePointerUp,
@@ -9273,41 +9307,35 @@ function ControlButton({
         "select-none touch-none",
         "transition-all duration-100",
         "active:scale-95",
-        sizeMap3[size] ?? sizeMap3.md,
+        sizeMap4[size] ?? sizeMap4.md,
         shapeMap[shape] ?? shapeMap.circle,
         variantMap[variant] ?? variantMap.secondary,
         actualPressed && "scale-95 brightness-110 border-foreground",
         disabled && "opacity-50 cursor-not-allowed",
         className
       ),
-      children: assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-        "img",
-        {
-          src: assetUrl.url,
-          alt: "",
-          width: 24,
-          height: 24,
-          style: { imageRendering: "pixelated", objectFit: "contain" },
-          className: "flex-shrink-0"
-        }
-      ) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl", children: typeof icon === "string" ? /^[a-zA-Z0-9-]+$/.test(icon) ? (() => {
+      children: assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl, icon: "image", size: 24, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", className: "text-2xl", children: typeof icon === "string" ? /^[a-zA-Z0-9-]+$/.test(icon) ? (() => {
         const I = resolveIcon(icon);
         return I ? /* @__PURE__ */ jsxRuntime.jsx(I, { className: "w-6 h-6" }) : null;
       })() : icon : /* @__PURE__ */ (() => {
         const I = icon;
         return /* @__PURE__ */ jsxRuntime.jsx(I, { className: "w-6 h-6" });
-      })() }) : label ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }) : null
+      })() }) : label ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", children: label }) : null
     }
   );
 }
-var sizeMap3, shapeMap, variantMap, DEFAULT_ASSET_URL2;
+var sizeMap4, shapeMap, variantMap, DEFAULT_ASSET_URL2;
 var init_ControlButton = __esm({
   "components/game/2d/atoms/ControlButton.tsx"() {
     "use client";
     init_cn();
     init_useEventBus();
     init_Icon();
-    sizeMap3 = {
+    init_Button();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
+    sizeMap4 = {
       sm: "w-10 h-10 text-sm",
       md: "w-14 h-14 text-base",
       lg: "w-18 h-18 text-lg",
@@ -9377,12 +9405,12 @@ function Sprite({
     onClick?.();
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    Box,
     {
+      position: "absolute",
       className,
       onClick: action || onClick ? handleClick : void 0,
       style: {
-        position: "absolute",
         width: frameWidth,
         height: frameHeight,
         backgroundImage: `url(${spritesheet.url})`,
@@ -9403,6 +9431,7 @@ var init_Sprite = __esm({
   "components/game/2d/atoms/Sprite.tsx"() {
     "use client";
     init_useEventBus();
+    init_Box();
     init_spriteAnimation();
     DEFAULT_SPRITESHEET = {
       url: "https://almadar-kflow-assets.web.app/shared/isometric-blocks/Spritesheet/allTiles_sheet.png",
@@ -9439,17 +9468,7 @@ function StateIndicator({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", children: assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: displayLabel,
-            width: 16,
-            height: 16,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : typeof config.icon === "string" ? /^[a-zA-Z0-9-]+$/.test(config.icon) ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: config.icon }) : config.icon : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: config.icon }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", children: assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl, icon: "image", size: 16, alt: displayLabel, className: "flex-shrink-0" }) : typeof config.icon === "string" ? /^[a-zA-Z0-9-]+$/.test(config.icon) ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: config.icon }) : config.icon : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: config.icon }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", children: displayLabel })
       ]
     }
@@ -9461,6 +9480,7 @@ var init_StateIndicator = __esm({
     init_Box();
     init_Icon();
     init_cn();
+    init_GameIcon();
     DEFAULT_ASSET_URL3 = {
       url: "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png",
       role: "ui",
@@ -9514,29 +9534,31 @@ function TimerDisplay({
 }) {
   const isLow = lowThreshold != null && seconds <= lowThreshold && seconds > 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "inline-flex items-center gap-1 justify-center rounded-container",
         "bg-card/80 border border-muted font-mono font-bold tabular-nums",
-        sizeMap4[size],
+        sizeMap5[size],
         running && "border-success/50",
         isLow && "text-error border-error/50 animate-pulse",
         !isLow && "text-foreground",
         className
       ),
       children: [
-        iconAsset && /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconAsset.url, alt: "", className: "w-4 h-4 object-contain flex-shrink-0" }),
+        iconAsset && /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl: iconAsset, icon: "image", size: 16, className: "w-4 h-4 object-contain flex-shrink-0" }),
         formatTime(seconds, format)
       ]
     }
   );
 }
-var sizeMap4;
+var sizeMap5;
 var init_TimerDisplay = __esm({
   "components/game/2d/atoms/TimerDisplay.tsx"() {
     init_cn();
-    sizeMap4 = {
+    init_Box();
+    init_GameIcon();
+    sizeMap5 = {
       sm: "text-sm px-2 py-0.5",
       md: "text-lg px-3 py-1",
       lg: "text-2xl px-4 py-1.5"
@@ -9554,9 +9576,9 @@ function ResourceCounter({
   size = "md",
   className
 }) {
-  const sizes = sizeMap5[size];
+  const sizes = sizeMap6[size];
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "inline-flex items-center rounded-container",
@@ -9565,21 +9587,11 @@ function ResourceCounter({
         className
       ),
       children: [
-        assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: label,
-            width: sizes.img,
-            height: sizes.img,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("font-bold tabular-nums", color && (color in colorTokenClasses2 ? colorTokenClasses2[color] : color)), children: [
+        assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl, icon: "image", size: sizes.img, alt: label, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Typography, { as: "span", className: cn("font-bold tabular-nums", color && (color in colorTokenClasses2 ? colorTokenClasses2[color] : color)), children: [
           value,
-          max != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+          max != null && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { as: "span", className: "text-muted-foreground", children: [
             "/",
             max
           ] })
@@ -9588,11 +9600,14 @@ function ResourceCounter({
     }
   );
 }
-var colorTokenClasses2, DEFAULT_ASSET_URL4, sizeMap5;
+var colorTokenClasses2, DEFAULT_ASSET_URL4, sizeMap6;
 var init_ResourceCounter = __esm({
   "components/game/2d/atoms/ResourceCounter.tsx"() {
     init_cn();
     init_Icon();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     colorTokenClasses2 = {
       primary: "text-primary",
       secondary: "text-secondary",
@@ -9606,7 +9621,7 @@ var init_ResourceCounter = __esm({
       role: "ui",
       category: "coin"
     };
-    sizeMap5 = {
+    sizeMap6 = {
       sm: { wrapper: "text-xs gap-1 px-1.5 py-0.5", icon: "text-sm", img: 16 },
       md: { wrapper: "text-sm gap-1.5 px-2 py-1", icon: "text-base", img: 20 },
       lg: { wrapper: "text-base gap-2 px-3 py-1.5", icon: "text-lg", img: 28 }
@@ -9631,9 +9646,9 @@ function ItemSlot({
   const isClickable = onClick != null || action != null;
   const px = assetSizeMap[size];
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
+    Button,
     {
-      type: "button",
+      variant: "ghost",
       onClick: () => {
         if (action) eventBus.emit(`UI:${action}`, {});
         onClick?.();
@@ -9643,7 +9658,7 @@ function ItemSlot({
       className: cn(
         "relative flex items-center justify-center rounded-interactive border-2",
         "bg-card/80 transition-all duration-150",
-        sizeMap6[size],
+        sizeMap7[size],
         empty ? "border-border bg-card/50" : rarityBorderMap[rarity],
         !empty && rarityGlowMap[rarity],
         selected && "ring-2 ring-foreground ring-offset-1 ring-offset-background",
@@ -9652,21 +9667,12 @@ function ItemSlot({
         !isClickable && "cursor-default",
         className
       ),
-      children: empty ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-base", children: "+" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: assetUrl?.url,
-            alt: label,
-            width: px,
-            height: px,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) }) : null,
+      children: empty ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-muted-foreground text-base", children: "+" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl, icon: "image", size: px, alt: label, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) }) : null,
         quantity != null && quantity > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+          Typography,
           {
+            as: "span",
             className: cn(
               "absolute -bottom-1 -right-1 flex items-center justify-center",
               "min-w-[18px] h-[18px] rounded-full px-1",
@@ -9679,14 +9685,18 @@ function ItemSlot({
     }
   );
 }
-var sizeMap6, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL5, assetSizeMap;
+var sizeMap7, rarityBorderMap, rarityGlowMap, DEFAULT_ASSET_URL5, assetSizeMap;
 var init_ItemSlot = __esm({
   "components/game/2d/atoms/ItemSlot.tsx"() {
     "use client";
     init_cn();
     init_Icon();
     init_useEventBus();
-    sizeMap6 = {
+    init_Button();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
+    sizeMap7 = {
       sm: "w-10 h-10 text-lg",
       md: "w-14 h-14 text-2xl",
       lg: "w-18 h-18 text-3xl"
@@ -9727,9 +9737,9 @@ function TurnIndicator({
   size = "md",
   className
 }) {
-  const sizes = sizeMap7[size];
+  const sizes = sizeMap8[size];
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "inline-flex items-center rounded-container",
@@ -9738,42 +9748,35 @@ function TurnIndicator({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-bold tabular-nums", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Typography, { as: "span", className: "font-bold tabular-nums", children: [
           "Turn ",
           currentTurn,
-          maxTurns != null && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+          maxTurns != null && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { as: "span", className: "text-muted-foreground", children: [
             "/",
             maxTurns
           ] })
         ] }),
         phase && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "|" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: phase })
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-muted-foreground", children: "|" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-muted-foreground", children: phase })
         ] }),
         activeTeam && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "|" }),
-          assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: assetUrl.url,
-              alt: "",
-              width: 12,
-              height: 12,
-              style: { imageRendering: "pixelated", objectFit: "contain" },
-              className: "flex-shrink-0"
-            }
-          ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("rounded-full bg-success/20", sizes.dot) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-success", children: activeTeam })
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-muted-foreground", children: "|" }),
+          assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl, icon: "image", size: 12, className: "flex-shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", className: cn("rounded-full bg-success/20", sizes.dot) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-success", children: activeTeam })
         ] })
       ]
     }
   );
 }
-var sizeMap7, DEFAULT_ASSET_URL6;
+var sizeMap8, DEFAULT_ASSET_URL6;
 var init_TurnIndicator = __esm({
   "components/game/2d/atoms/TurnIndicator.tsx"() {
     init_cn();
-    sizeMap7 = {
+    init_Box();
+    init_Typography();
+    init_GameIcon();
+    sizeMap8 = {
       sm: { wrapper: "text-xs gap-1.5 px-2 py-0.5", dot: "w-1.5 h-1.5" },
       md: { wrapper: "text-sm gap-2 px-3 py-1", dot: "w-2 h-2" },
       lg: { wrapper: "text-base gap-2.5 px-4 py-1.5", dot: "w-2.5 h-2.5" }
@@ -9805,10 +9808,10 @@ function ComboCounter({
   size = "md",
   className
 }) {
-  const sizes = sizeMap8[size];
+  const sizes = sizeMap9[size];
   if (combo <= 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "inline-flex flex-col items-center justify-center",
@@ -9818,24 +9821,14 @@ function ComboCounter({
         className
       ),
       children: [
-        assetUrl && /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: "combo",
-            width: 24,
-            height: 24,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0 mb-0.5"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-black tabular-nums leading-none", sizes.combo, getComboIntensity(combo)), children: combo }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("font-bold uppercase tracking-wider text-muted-foreground", sizes.label), children: "combo" }),
-        multiplier != null && multiplier > 1 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("font-bold text-warning tabular-nums", sizes.multiplier), children: [
+        assetUrl && /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl, icon: "image", size: 24, className: "flex-shrink-0 mb-0.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: cn("font-black tabular-nums leading-none", sizes.combo, getComboIntensity(combo)), children: combo }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: cn("font-bold uppercase tracking-wider text-muted-foreground", sizes.label), children: "combo" }),
+        multiplier != null && multiplier > 1 && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { as: "span", className: cn("font-bold text-warning tabular-nums", sizes.multiplier), children: [
           "x",
           multiplier.toFixed(1)
         ] }),
-        streak != null && streak > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("text-muted-foreground tabular-nums", sizes.label), children: [
+        streak != null && streak > 0 && /* @__PURE__ */ jsxRuntime.jsxs(Typography, { as: "span", className: cn("text-muted-foreground tabular-nums", sizes.label), children: [
           streak,
           " streak"
         ] })
@@ -9843,16 +9836,19 @@ function ComboCounter({
     }
   );
 }
-var DEFAULT_ASSET_URL7, sizeMap8;
+var DEFAULT_ASSET_URL7, sizeMap9;
 var init_ComboCounter = __esm({
   "components/game/2d/atoms/ComboCounter.tsx"() {
     init_cn();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     DEFAULT_ASSET_URL7 = {
       url: "https://almadar-kflow-assets.web.app/shared/effects/flash/flash00.png",
       role: "effect",
       category: "effect"
     };
-    sizeMap8 = {
+    sizeMap9 = {
       sm: { combo: "text-lg", label: "text-xs", multiplier: "text-xs" },
       md: { combo: "text-2xl", label: "text-xs", multiplier: "text-sm" },
       lg: { combo: "text-4xl", label: "text-sm", multiplier: "text-base" }
@@ -9869,54 +9865,48 @@ function WaypointMarker({
   size = "md",
   className
 }) {
-  const sizes = sizeMap9[size];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col items-center", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
+  const sizes = sizeMap10[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("flex flex-col items-center", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "relative flex items-center justify-center", children: [
       active && /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+        Box,
         {
+          position: "absolute",
           className: cn(
-            "absolute rounded-full border-2 border-info animate-ping opacity-50",
+            "rounded-full border-2 border-info animate-ping opacity-50",
             sizes.ring
           )
         }
       ),
       active && /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+        Box,
         {
+          position: "absolute",
           className: cn(
-            "absolute rounded-full border-2 border-info",
+            "rounded-full border-2 border-info",
             sizes.ring
           )
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+        Box,
         {
+          position: "relative",
           className: cn(
-            "relative flex items-center justify-center rounded-full transition-all duration-200",
+            "flex items-center justify-center rounded-full transition-all duration-200",
             sizes.dot,
             completed && "bg-success text-foreground",
             active && !completed && "bg-info text-foreground",
             !active && !completed && "bg-muted"
           ),
-          children: completed ? checkIcon : assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: assetUrl.url,
-              alt: label,
-              width: sizes.img,
-              height: sizes.img,
-              style: { imageRendering: "pixelated", objectFit: "contain" },
-              className: "flex-shrink-0"
-            }
-          ) : icon ? typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) : null
+          children: completed ? checkIcon : assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl, icon: "image", size: sizes.img, alt: label, className: "flex-shrink-0" }) : icon ? typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }) : null
         }
       )
     ] }),
     label && /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
+      Typography,
       {
+        as: "span",
         className: cn(
           "text-center whitespace-nowrap",
           sizes.label,
@@ -9927,17 +9917,20 @@ function WaypointMarker({
     )
   ] });
 }
-var DEFAULT_ASSET_URL8, sizeMap9, checkIcon;
+var DEFAULT_ASSET_URL8, sizeMap10, checkIcon;
 var init_WaypointMarker = __esm({
   "components/game/2d/atoms/WaypointMarker.tsx"() {
     init_cn();
     init_Icon();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     DEFAULT_ASSET_URL8 = {
       url: "https://almadar-kflow-assets.web.app/shared/world-map/battle_marker.png",
       role: "ui",
       category: "waypoint"
     };
-    sizeMap9 = {
+    sizeMap10 = {
       sm: { dot: "w-4 h-4", ring: "w-6 h-6", label: "text-xs mt-1", img: 12 },
       md: { dot: "w-6 h-6", ring: "w-8 h-8", label: "text-sm mt-1.5", img: 18 },
       lg: { dot: "w-8 h-8", ring: "w-10 h-10", label: "text-base mt-2", img: 24 }
@@ -9962,32 +9955,24 @@ function StatusEffect({
   size = "md",
   className
 }) {
-  const sizes = sizeMap10[size];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-flex flex-col items-center", className), children: [
+  const sizes = sizeMap11[size];
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box, { position: "relative", className: cn("inline-flex flex-col items-center", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      Box,
       {
+        position: "relative",
         className: cn(
-          "relative flex items-center justify-center rounded-interactive border-2",
+          "flex items-center justify-center rounded-interactive border-2",
           sizes.container,
           variantStyles7[variant]
         ),
         title: label,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex items-center justify-center", sizes.icon), children: assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: assetUrl.url,
-              alt: label,
-              width: sizes.img,
-              height: sizes.img,
-              style: { imageRendering: "pixelated", objectFit: "contain" },
-              className: "flex-shrink-0"
-            }
-          ) : icon != null && typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: "sm" }) : icon != null ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, size: "sm" }) : null }),
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", className: cn("flex items-center justify-center", sizes.icon), children: assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl, icon: "image", size: sizes.img, alt: label, className: "flex-shrink-0" }) : icon != null && typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: "sm" }) : icon != null ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, size: "sm" }) : null }),
           duration !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
+            Typography,
             {
+              as: "span",
               className: cn(
                 "absolute bottom-0 left-0 right-0 text-center font-mono font-bold text-foreground bg-background/60 leading-tight",
                 sizes.timer
@@ -9999,8 +9984,9 @@ function StatusEffect({
       }
     ),
     stacks !== void 0 && stacks > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
+      Typography,
       {
+        as: "span",
         className: cn(
           "absolute flex items-center justify-center rounded-full bg-card text-foreground font-bold leading-none",
           sizes.badge
@@ -10008,20 +9994,23 @@ function StatusEffect({
         children: stacks
       }
     ),
-    label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground mt-0.5 text-center whitespace-nowrap", children: label })
+    label && /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-xs text-muted-foreground mt-0.5 text-center whitespace-nowrap", children: label })
   ] });
 }
-var DEFAULT_ASSET_URL9, sizeMap10, variantStyles7;
+var DEFAULT_ASSET_URL9, sizeMap11, variantStyles7;
 var init_StatusEffect = __esm({
   "components/game/2d/atoms/StatusEffect.tsx"() {
     init_cn();
     init_Icon();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     DEFAULT_ASSET_URL9 = {
       url: "https://almadar-kflow-assets.web.app/shared/effects/particles/flame_01.png",
       role: "ui",
       category: "effect"
     };
-    sizeMap10 = {
+    sizeMap11 = {
       sm: { container: "w-8 h-8", icon: "text-sm", badge: "text-xs -top-1 -right-1 w-4 h-4", timer: "text-[9px]", img: 20 },
       md: { container: "w-10 h-10", icon: "text-base", badge: "text-xs -top-1 -right-1 w-5 h-5", timer: "text-xs", img: 28 },
       lg: { container: "w-12 h-12", icon: "text-lg", badge: "text-sm -top-1.5 -right-1.5 w-6 h-6", timer: "text-xs", img: 36 }
@@ -10045,38 +10034,31 @@ function DamageNumber({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: floatKeyframes }),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
+      Typography,
       {
+        as: "span",
         className: cn(
           "inline-flex items-center gap-0.5 font-mono select-none pointer-events-none",
-          sizeMap11[size],
+          sizeMap12[size],
           typeStyles[type],
           className
         ),
         style: { animation: "damageFloat 1s ease-out forwards" },
         children: [
-          assetUrl && /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: assetUrl.url,
-              alt: "",
-              width: 14,
-              height: 14,
-              style: { imageRendering: "pixelated", objectFit: "contain" },
-              className: "flex-shrink-0"
-            }
-          ),
+          assetUrl && /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl, icon: "image", size: 14, className: "flex-shrink-0" }),
           displayText
         ]
       }
     )
   ] });
 }
-var sizeMap11, typeStyles, floatKeyframes, DEFAULT_ASSET_URL10;
+var sizeMap12, typeStyles, floatKeyframes, DEFAULT_ASSET_URL10;
 var init_DamageNumber = __esm({
   "components/game/2d/atoms/DamageNumber.tsx"() {
     init_cn();
-    sizeMap11 = {
+    init_Typography();
+    init_GameIcon();
+    sizeMap12 = {
       sm: "text-sm",
       md: "text-lg",
       lg: "text-2xl"
@@ -10110,7 +10092,7 @@ function DialogueBubble({
   className
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "flex items-start gap-3 rounded-container bg-background/80 backdrop-blur-sm px-4 py-3 border border-border/10",
@@ -10118,17 +10100,10 @@ function DialogueBubble({
         className
       ),
       children: [
-        portrait && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-12 h-12 rounded-full overflow-hidden border-2 border-warning/60", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: portrait?.url,
-            alt: speaker ?? "speaker",
-            className: "w-full h-full object-cover"
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
-          speaker && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold text-warning", children: speaker }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground leading-relaxed", children: text })
+        portrait && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-shrink-0 w-12 h-12 rounded-full overflow-hidden border-2 border-warning/60", children: /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl: portrait, icon: "image", size: 48, alt: speaker ?? "speaker", className: "w-full h-full object-cover" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex flex-col gap-1 min-w-0", children: [
+          speaker && /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-sm font-bold text-warning", children: speaker }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-sm text-foreground leading-relaxed", children: text })
         ] })
       ]
     }
@@ -10138,6 +10113,9 @@ var DEFAULT_PORTRAIT;
 var init_DialogueBubble = __esm({
   "components/game/2d/atoms/DialogueBubble.tsx"() {
     init_cn();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     DEFAULT_PORTRAIT = {
       url: "https://almadar-kflow-assets.web.app/shared/characters/archetypes/04_hero.png",
       role: "effect",
@@ -10159,11 +10137,11 @@ function ChoiceButton({
 }) {
   const eventBus = useEventBus();
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    Button,
     {
-      type: "button",
+      variant: "ghost",
       disabled,
-      onClick: (e) => {
+      onClick: () => {
         if (action) eventBus.emit(`UI:${action}`, {});
         onClick?.();
       },
@@ -10176,8 +10154,9 @@ function ChoiceButton({
       ),
       children: [
         index !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(
-          "span",
+          Typography,
           {
+            as: "span",
             className: cn(
               "flex-shrink-0 font-mono font-bold text-sm",
               selected ? "text-accent" : "text-muted-foreground"
@@ -10188,24 +10167,14 @@ function ChoiceButton({
             ]
           }
         ),
-        assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: "",
-            width: 16,
-            height: 16,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-sm", children: typeof icon === "string" ? (() => {
+        assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl, icon: "image", size: 16, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", className: "flex-shrink-0 text-sm", children: typeof icon === "string" ? (() => {
           const I = resolveIcon(icon);
           return I ? /* @__PURE__ */ jsxRuntime.jsx(I, { className: "w-4 h-4" }) : null;
         })() : /* @__PURE__ */ (() => {
           const I = icon;
           return /* @__PURE__ */ jsxRuntime.jsx(I, { className: "w-4 h-4" });
         })() }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm leading-snug", children: text })
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-sm leading-snug", children: text })
       ]
     }
   );
@@ -10215,6 +10184,10 @@ var init_ChoiceButton = __esm({
     init_cn();
     init_Icon();
     init_useEventBus();
+    init_Button();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     ChoiceButton.displayName = "ChoiceButton";
   }
 });
@@ -10232,16 +10205,16 @@ function ActionButton({
   className
 }) {
   const eventBus = useEventBus();
-  const sizes = sizeMap12[size];
+  const sizes = sizeMap13[size];
   const onCooldown = cooldown > 0;
   const isDisabled = disabled || onCooldown;
   const cooldownDeg = Math.round(cooldown * 360);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    Button,
     {
-      type: "button",
+      variant: variant === "danger" ? "danger" : variant === "secondary" ? "secondary" : "primary",
       disabled: isDisabled,
-      onClick: (e) => {
+      onClick: () => {
         if (action) eventBus.emit(`UI:${action}`, {});
         onClick?.();
       },
@@ -10254,9 +10227,10 @@ function ActionButton({
       ),
       children: [
         onCooldown && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          Box,
           {
-            className: "absolute inset-0 bg-foreground/40 pointer-events-none",
+            position: "absolute",
+            className: "inset-0 bg-foreground/40 pointer-events-none",
             style: {
               clipPath: `conic-gradient(from 0deg, transparent ${360 - cooldownDeg}deg, black ${360 - cooldownDeg}deg)`,
               WebkitClipPath: `conic-gradient(from 0deg, transparent ${360 - cooldownDeg}deg, black ${360 - cooldownDeg}deg)`,
@@ -10264,27 +10238,18 @@ function ActionButton({
             }
           }
         ),
-        assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: "",
-            width: 16,
-            height: 16,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: cn("flex-shrink-0", sizes.icon)
-          }
-        ) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? (() => {
+        assetUrl ? /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl, icon: "image", size: 16, className: cn("flex-shrink-0", sizes.icon) }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? (() => {
           const I = resolveIcon(icon);
           return I ? /* @__PURE__ */ jsxRuntime.jsx(I, { className: "w-4 h-4" }) : null;
         })() : /* @__PURE__ */ (() => {
           const I = icon;
           return /* @__PURE__ */ jsxRuntime.jsx(I, { className: "w-4 h-4" });
         })() }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10", children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "relative z-10", children: label }),
         hotkey && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+          Typography,
           {
+            as: "span",
             className: cn(
               "absolute top-0.5 right-0.5 bg-foreground/30 text-primary-foreground rounded font-mono leading-tight",
               sizes.hotkey
@@ -10296,13 +10261,17 @@ function ActionButton({
     }
   );
 }
-var sizeMap12, variantStyles8, DEFAULT_ASSET_URL11;
+var sizeMap13, variantStyles8, DEFAULT_ASSET_URL11;
 var init_ActionButton = __esm({
   "components/game/2d/atoms/ActionButton.tsx"() {
     init_cn();
     init_Icon();
     init_useEventBus();
-    sizeMap12 = {
+    init_Button();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
+    sizeMap13 = {
       sm: { button: "h-button-sm px-3 text-xs", hotkey: "text-[9px] px-1", icon: "text-xs" },
       md: { button: "h-button-md px-4 text-sm", hotkey: "text-xs px-1.5", icon: "text-sm" },
       lg: { button: "h-button-lg px-5 text-base", hotkey: "text-xs px-2", icon: "text-base" }
@@ -10404,10 +10373,12 @@ function MiniMap({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: `@keyframes minimap-blink{0%,49%{opacity:1}50%,100%{opacity:0}}` }),
     /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      Box,
       {
+        position: "relative",
+        display: "inline-block",
         className: cn(
-          "relative inline-block border border-border/20 rounded-container",
+          "border border-border/20 rounded-container",
           className
         ),
         children: [
@@ -10422,10 +10393,10 @@ function MiniMap({
             }
           ),
           playerLeft !== null && playerTop !== null && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+            Box,
             {
+              position: "absolute",
               style: {
-                position: "absolute",
                 left: playerLeft,
                 top: playerTop,
                 width: 3,
@@ -10446,6 +10417,7 @@ var init_MiniMap = __esm({
   "components/game/2d/atoms/MiniMap.tsx"() {
     "use client";
     init_cn();
+    init_Box();
     DEFAULT_TILES = [
       { x: 10, y: 10, color: "#4ade80" },
       { x: 20, y: 15, color: "#4ade80" },
@@ -10463,38 +10435,6 @@ var init_MiniMap = __esm({
     MiniMap.displayName = "MiniMap";
   }
 });
-function GameIcon({ assetUrl, icon, size = "md", alt, className }) {
-  const px = typeof size === "number" ? size : sizeMap13[size];
-  if (assetUrl?.url) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "img",
-      {
-        src: assetUrl.url,
-        alt: alt ?? assetUrl.category ?? "",
-        width: px,
-        height: px,
-        style: { imageRendering: "pixelated", objectFit: "contain", width: px, height: px },
-        className: cn("flex-shrink-0", className)
-      }
-    );
-  }
-  const I = typeof icon === "string" ? resolveIcon(icon) : icon;
-  return /* @__PURE__ */ jsxRuntime.jsx(I, { width: px, height: px, className: cn("flex-shrink-0", className) });
-}
-var sizeMap13;
-var init_GameIcon = __esm({
-  "components/game/2d/atoms/GameIcon.tsx"() {
-    "use client";
-    init_cn();
-    init_Icon();
-    sizeMap13 = {
-      sm: 16,
-      md: 24,
-      lg: 32
-    };
-    GameIcon.displayName = "GameIcon";
-  }
-});
 function ControlGrid({
   kind,
   buttons = DEFAULT_BUTTONS,
@@ -10555,22 +10495,22 @@ function ControlGrid({
       },
       d
     );
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("inline-grid grid-cols-3", ds.gap, ds.container, className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn("inline-grid grid-cols-3", ds.gap, ds.container, className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Box, {}),
       dir("up"),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, {}),
       dir("left"),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 rounded-interactive bg-muted border-2 border-muted-foreground" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-6 h-6 rounded-interactive bg-muted border-2 border-muted-foreground" }) }),
       dir("right"),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, {}),
       dir("down"),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {})
+      /* @__PURE__ */ jsxRuntime.jsx(Box, {})
     ] });
   }
   if (layout === "diamond" && buttons.length === 4) {
     const [top, right, bottom, left] = buttons;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(layoutClass.diamond, className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: cn(layoutClass.diamond, className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Box, {}),
       /* @__PURE__ */ jsxRuntime.jsx(
         ControlButton,
         {
@@ -10585,7 +10525,7 @@ function ControlGrid({
           disabled
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, {}),
       /* @__PURE__ */ jsxRuntime.jsx(
         ControlButton,
         {
@@ -10600,7 +10540,7 @@ function ControlGrid({
           disabled
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, {}),
       /* @__PURE__ */ jsxRuntime.jsx(
         ControlButton,
         {
@@ -10615,7 +10555,7 @@ function ControlGrid({
           disabled
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, {}),
       /* @__PURE__ */ jsxRuntime.jsx(
         ControlButton,
         {
@@ -10630,10 +10570,10 @@ function ControlGrid({
           disabled
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {})
+      /* @__PURE__ */ jsxRuntime.jsx(Box, {})
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(layoutClass[layout], className), children: buttons.map((button) => /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn(layoutClass[layout], className), children: buttons.map((button) => /* @__PURE__ */ jsxRuntime.jsx(
     ControlButton,
     {
       icon: button.icon,
@@ -10655,6 +10595,7 @@ var init_ControlGrid = __esm({
     "use client";
     init_cn();
     init_useEventBus();
+    init_Box();
     init_ControlButton();
     sizeKey = { sm: "sm", md: "md", lg: "lg" };
     layoutClass = {
@@ -10699,7 +10640,7 @@ function StatBadge({
   const numValue = typeof value === "number" ? value : parseInt(String(value), 10) || 0;
   const resolvedAsset = iconUrl ?? assetUrl;
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "inline-flex items-center gap-2 rounded-container border backdrop-blur-sm",
@@ -10708,18 +10649,8 @@ function StatBadge({
         className
       ),
       children: [
-        resolvedAsset ? /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: resolvedAsset.url,
-            alt: "",
-            width: 16,
-            height: 16,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 text-lg", children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: "w-4 h-4" }) }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground font-medium", children: label }),
+        resolvedAsset ? /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl: resolvedAsset, icon: "image", size: 16, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", className: "flex-shrink-0 text-lg", children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: "w-4 h-4" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: "w-4 h-4" }) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-muted-foreground font-medium", children: label }),
         format === "hearts" && max && /* @__PURE__ */ jsxRuntime.jsx(
           HealthBar,
           {
@@ -10745,7 +10676,7 @@ function StatBadge({
             size: size === "lg" ? "md" : "sm"
           }
         ),
-        format === "text" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold text-foreground", children: value })
+        format === "text" && /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "font-bold text-foreground", children: value })
       ]
     }
   );
@@ -10755,6 +10686,9 @@ var init_StatBadge = __esm({
   "components/game/2d/molecules/StatBadge.tsx"() {
     init_cn();
     init_Icon();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     init_HealthBar();
     init_ScoreDisplay();
     sizeMap14 = {
@@ -10932,9 +10866,9 @@ function GameHud({
   if (position === "corners") {
     const leftStats = stats.slice(0, Math.ceil(stats.length / 2));
     const rightStats = stats.slice(Math.ceil(stats.length / 2));
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", positionMap[position], className), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 left-4 flex flex-col gap-2 pointer-events-auto", children: leftStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto", children: rightStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { position: "relative", className: cn(positionMap[position], className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { position: "absolute", className: "top-4 left-4 flex flex-col gap-2 pointer-events-auto", children: leftStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { position: "absolute", className: "top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto", children: rightStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
     ] });
   }
   if (position === "top" || position === "bottom") {
@@ -10943,7 +10877,7 @@ function GameHud({
     const rightStats = stats.slice(mid);
     const isTop = position === "top";
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      Box,
       {
         className: cn(
           "flex items-center justify-between w-full",
@@ -10953,17 +10887,18 @@ function GameHud({
           className
         ),
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: leftStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) }),
-          rightStats.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: rightStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center gap-3 flex-shrink-0", children: leftStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) }),
+          rightStats.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex items-center gap-3 flex-shrink-0", children: rightStats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsx(StatBadge, { ...stat, size }, i)) })
         ]
       }
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    Box,
     {
+      position: "relative",
       className: cn(
-        "relative z-10 flex items-center gap-4 px-4 py-2",
+        "z-10 flex items-center gap-4 px-4 py-2",
         transparent ? "bg-black/30 backdrop-blur-sm" : "bg-surface/90 backdrop-blur-sm",
         className
       ),
@@ -10975,6 +10910,7 @@ var positionMap, DEFAULT_HUD_STATS;
 var init_GameHud = __esm({
   "components/game/2d/molecules/GameHud.tsx"() {
     init_cn();
+    init_Box();
     init_StatBadge();
     positionMap = {
       corners: "inset-0 pointer-events-none"
@@ -11015,7 +10951,7 @@ function GameMenu({
     [eventBus, onSelect]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "min-h-screen w-full flex flex-col items-center justify-center p-8",
@@ -11025,18 +10961,12 @@ function GameMenu({
         background: background ?? "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0e17 100%)"
       },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-12 animate-fade-in", children: [
-          logo && /* @__PURE__ */ jsxRuntime.jsx(
-            "img",
-            {
-              src: logo.url,
-              alt: title,
-              className: "h-24 w-auto mx-auto mb-6 drop-shadow-2xl"
-            }
-          ),
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "text-center mb-12 animate-fade-in", children: [
+          logo && /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl: logo, icon: "image", size: 96, alt: title, className: "h-24 w-auto mx-auto mb-6 drop-shadow-2xl" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "h1",
+            Typography,
             {
+              variant: "h1",
               className: "text-5xl md:text-7xl font-bold text-[var(--color-foreground)] tracking-tight",
               style: {
                 textShadow: "0 4px 12px rgba(0,0,0,0.5)"
@@ -11044,9 +10974,9 @@ function GameMenu({
               children: title
             }
           ),
-          subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-lg text-muted-foreground tracking-widest uppercase", children: subtitle })
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body", className: "mt-2 text-lg text-muted-foreground tracking-widest uppercase", children: subtitle })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 w-full max-w-md", children: resolvedOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex flex-col gap-4 w-full max-w-md", children: resolvedOptions.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
           ChoiceButton,
           {
             text: option.label,
@@ -11057,9 +10987,9 @@ function GameMenu({
           },
           index
         )) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 pointer-events-none overflow-hidden", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1/4 left-1/4 w-64 h-64 bg-info/10 rounded-container blur-3xl" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent/10 rounded-container blur-3xl" })
+        /* @__PURE__ */ jsxRuntime.jsxs(Box, { position: "absolute", className: "inset-0 pointer-events-none overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { position: "absolute", className: "top-1/4 left-1/4 w-64 h-64 bg-info/10 rounded-container blur-3xl" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Box, { position: "absolute", className: "bottom-1/4 right-1/4 w-96 h-96 bg-accent/10 rounded-container blur-3xl" })
         ] })
       ]
     }
@@ -11071,6 +11001,9 @@ var init_GameMenu = __esm({
     "use client";
     init_cn();
     init_useEventBus();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     init_ChoiceButton();
     DEFAULT_MENU_OPTIONS = [
       { label: "New Game", event: "NEW_GAME", variant: "primary" },
@@ -12311,10 +12244,11 @@ function Canvas2D({
             }
           }
         ),
-        process.env.NODE_ENV !== "production" && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-game-actions": "", className: "sr-only", "aria-hidden": "true", children: [
+        process.env.NODE_ENV !== "production" && /* @__PURE__ */ jsxRuntime.jsxs(Box, { "data-game-actions": "", className: "sr-only", "aria-hidden": "true", children: [
           tileClickEvent && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            Button,
             {
+              variant: "ghost",
               "data-event": tileClickEvent,
               "data-x": "0",
               "data-y": "0",
@@ -12323,8 +12257,9 @@ function Canvas2D({
             }
           ),
           unitClickEvent && units && units.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            Button,
             {
+              variant: "ghost",
               "data-event": unitClickEvent,
               "data-unit-id": units[0].id,
               onClick: () => eventBus.emit(`UI:${unitClickEvent}`, { unitId: units[0].id }),
@@ -12333,15 +12268,17 @@ function Canvas2D({
           )
         ] }),
         unitOverlays.map(({ unit, screenX, screenY }) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+          Box,
           {
-            className: "absolute pointer-events-none",
+            position: "absolute",
+            className: "pointer-events-none",
             style: { left: Math.round(screenX), top: Math.round(screenY), transform: "translate(-50%, 0)", zIndex: 5 },
             children: [
               unit.name && /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+                Typography,
                 {
-                  className: "text-white text-xs font-bold px-1.5 py-0.5 rounded mb-0.5 whitespace-nowrap",
+                  as: "span",
+                  className: "text-white text-xs font-bold px-1.5 py-0.5 rounded mb-0.5 whitespace-nowrap block",
                   style: { background: unit.team === "player" ? "rgba(59,130,246,0.9)" : unit.team === "enemy" ? "rgba(239,68,68,0.9)" : "rgba(107,114,128,0.9)" },
                   children: unit.name
                 }
@@ -12351,7 +12288,7 @@ function Canvas2D({
           },
           unit.id
         )),
-        showMinimap && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-2 right-2 pointer-events-none", style: { zIndex: 10 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        showMinimap && /* @__PURE__ */ jsxRuntime.jsx(Box, { position: "absolute", className: "bottom-2 right-2 pointer-events-none", style: { zIndex: 10 }, children: /* @__PURE__ */ jsxRuntime.jsx(
           MiniMap,
           {
             tiles: miniMapTiles,
@@ -12373,6 +12310,7 @@ var init_Canvas2D = __esm({
     init_cn();
     init_useEventBus();
     init_Box();
+    init_Button();
     init_Stack();
     init_Icon();
     init_Typography();
@@ -12704,7 +12642,7 @@ function GameAudioToggle({
       onClick: handleToggle,
       className: cn("text-lg leading-none px-2", className),
       "aria-pressed": muted,
-      children: activeAsset ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: activeAsset.url, alt: muted ? "Muted" : "Sound on", className: "w-5 h-5 object-contain" }) : muted ? "\u{1F507}" : "\u{1F50A}"
+      children: activeAsset ? /* @__PURE__ */ jsxRuntime.jsx(GameIcon, { assetUrl: activeAsset, icon: "image", size: 20, alt: muted ? "Muted" : "Sound on", className: "w-5 h-5 object-contain" }) : muted ? "\u{1F507}" : "\u{1F50A}"
     }
   );
 }
@@ -12714,6 +12652,7 @@ var init_GameAudioToggle = __esm({
     init_atoms();
     init_cn();
     init_GameAudioProvider();
+    init_GameIcon();
     GameAudioToggle.displayName = "GameAudioToggle";
   }
 });
@@ -23301,7 +23240,7 @@ var init_Tabs = __esm({
                     isActive ? variant === "pills" ? "text-primary-foreground font-bold" : "text-foreground font-bold" : "text-muted-foreground hover:text-foreground"
                   ),
                   children: [
-                    item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: item.icon, size: "sm" })),
+                    item.iconAsset?.url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.iconAsset.url, alt: item.iconAsset.name ?? item.iconAsset.category ?? "", width: 16, height: 16, style: { imageRendering: "pixelated", objectFit: "contain", width: 16, height: 16 }, className: "flex-shrink-0" }) : item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: item.icon, size: "sm" })),
                     /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: isActive ? "semibold" : "normal", className: "!text-inherit", children: item.label }),
                     item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", size: "sm", children: item.badge })
                   ]