@almadar/ui 5.80.0 → 5.82.0

package/dist/components/index.js

@@ -2122,6 +2122,7 @@ var init_Button = __esm({
         rightIcon,
         icon: iconProp,
         iconRight: iconRightProp,
+        iconAsset,
         action,
         actionPayload,
         label,
@@ -2133,7 +2134,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__ */ 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) {
@@ -2887,13 +2889,14 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     Badge = React79__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__ */ jsx(Icon, { name: icon, className: iconSizes3[size] }) : icon ? /* @__PURE__ */ jsx(Icon, { icon, className: iconSizes3[size] }) : null;
+        const iconPx = size === "lg" ? 20 : 16;
+        const resolvedIcon = iconAsset?.url ? /* @__PURE__ */ 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__ */ jsx(Icon, { name: icon, className: iconSizes3[size] }) : icon ? /* @__PURE__ */ jsx(Icon, { icon, className: iconSizes3[size] }) : null;
         return /* @__PURE__ */ jsxs(
           "span",
           {
@@ -7926,6 +7929,38 @@ var init_Accordion = __esm({
     Accordion.displayName = "Accordion";
   }
 });
+function GameIcon({ assetUrl, icon, size = "md", alt, className }) {
+  const px = typeof size === "number" ? size : sizeMap[size];
+  if (assetUrl?.url) {
+    return /* @__PURE__ */ 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__ */ 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 ActionButton({
   assetUrl = DEFAULT_ASSET_URL,
   label = "Attack",
@@ -7940,16 +7975,16 @@ function ActionButton({
   className
 }) {
   const eventBus = useEventBus();
-  const sizes = sizeMap[size];
+  const sizes = sizeMap2[size];
   const onCooldown = cooldown > 0;
   const isDisabled = disabled || onCooldown;
   const cooldownDeg = Math.round(cooldown * 360);
   return /* @__PURE__ */ 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?.();
       },
@@ -7962,9 +7997,10 @@ function ActionButton({
       ),
       children: [
         onCooldown && /* @__PURE__ */ 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)`,
@@ -7972,27 +8008,18 @@ function ActionButton({
             }
           }
         ),
-        assetUrl ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: "",
-            width: 16,
-            height: 16,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: cn("flex-shrink-0", sizes.icon)
-          }
-        ) : icon ? /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? (() => {
+        assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: 16, className: cn("flex-shrink-0", sizes.icon) }) : icon ? /* @__PURE__ */ jsx(Box, { as: "span", className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? (() => {
           const I = resolveIcon(icon);
           return I ? /* @__PURE__ */ jsx(I, { className: "w-4 h-4" }) : null;
         })() : /* @__PURE__ */ (() => {
           const I = icon;
           return /* @__PURE__ */ jsx(I, { className: "w-4 h-4" });
         })() }) : null,
-        /* @__PURE__ */ jsx("span", { className: "relative z-10", children: label }),
+        /* @__PURE__ */ jsx(Typography, { as: "span", className: "relative z-10", children: label }),
         hotkey && /* @__PURE__ */ 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
@@ -8004,13 +8031,17 @@ function ActionButton({
     }
   );
 }
-var sizeMap, variantStyles7, DEFAULT_ASSET_URL;
+var sizeMap2, variantStyles7, DEFAULT_ASSET_URL;
 var init_ActionButton = __esm({
   "components/game/2d/atoms/ActionButton.tsx"() {
     init_cn();
     init_Icon();
     init_useEventBus();
-    sizeMap = {
+    init_Button();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
+    sizeMap2 = {
       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" }
@@ -8743,10 +8774,12 @@ function MiniMap({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { children: `@keyframes minimap-blink{0%,49%{opacity:1}50%,100%{opacity:0}}` }),
     /* @__PURE__ */ 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: [
@@ -8761,10 +8794,10 @@ function MiniMap({
             }
           ),
           playerLeft !== null && playerTop !== null && /* @__PURE__ */ jsx(
-            "div",
+            Box,
             {
+              position: "absolute",
               style: {
-                position: "absolute",
                 left: playerLeft,
                 top: playerTop,
                 width: 3,
@@ -8785,6 +8818,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" },
@@ -8815,12 +8849,13 @@ function HealthBar({
   frameAsset,
   fillAsset
 }) {
-  const sizes = sizeMap2[size];
+  const sizes = sizeMap3[size];
   const percentage = max > 0 ? Math.max(0, Math.min(100, current / max * 100)) : 0;
   if (format === "hearts") {
-    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", className), children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ jsx(
-      "span",
+    return /* @__PURE__ */ jsx(Box, { className: cn("flex items-center gap-1", className), children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ jsx(
+      Box,
       {
+        as: "span",
         className: cn(animated && "transition-transform hover:scale-110"),
         children: heartIcon(i < current, sizes.heart)
       },
@@ -8829,10 +8864,12 @@ function HealthBar({
   }
   if (format === "bar") {
     return /* @__PURE__ */ jsx(
-      "div",
+      Box,
       {
+        position: "relative",
+        overflow: "hidden",
         className: cn(
-          "relative overflow-hidden rounded-full",
+          "rounded-full",
           !frameAsset && "bg-muted",
           sizes.bar,
           "w-24",
@@ -8840,10 +8877,11 @@ function HealthBar({
         ),
         style: frameAsset ? { backgroundImage: `url(${frameAsset.url})`, backgroundSize: "100% 100%" } : void 0,
         children: /* @__PURE__ */ 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"
             ),
@@ -8857,10 +8895,11 @@ function HealthBar({
     );
   }
   if (format === "progress") {
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    return /* @__PURE__ */ jsxs(Box, { className: cn("flex items-center gap-2", className), children: [
       level != null && /* @__PURE__ */ jsxs(
-        "span",
+        Typography,
         {
+          as: "span",
           className: cn(
             "flex-shrink-0 rounded-interactive font-bold",
             "bg-accent text-accent-foreground border border-accent",
@@ -8872,21 +8911,23 @@ function HealthBar({
           ]
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsxs(Box, { className: "flex-1 flex flex-col gap-0.5", children: [
         /* @__PURE__ */ 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__ */ 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"
                 ),
@@ -8898,7 +8939,7 @@ function HealthBar({
             )
           }
         ),
-        showLabel && /* @__PURE__ */ jsxs("span", { className: cn("text-foreground/70 tabular-nums", sizes.label), children: [
+        showLabel && /* @__PURE__ */ jsxs(Typography, { as: "span", className: cn("text-foreground/70 tabular-nums", sizes.label), children: [
           current,
           " / ",
           max,
@@ -8907,16 +8948,18 @@ function HealthBar({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs("span", { className: cn("font-mono font-bold", sizes.text, className), children: [
+  return /* @__PURE__ */ jsxs(Typography, { as: "span", className: cn("font-mono font-bold", sizes.text, className), children: [
     current,
     "/",
     max
   ] });
 }
-var heartIcon, sizeMap2;
+var heartIcon, sizeMap3;
 var init_HealthBar = __esm({
   "components/game/2d/atoms/HealthBar.tsx"() {
     init_cn();
+    init_Box();
+    init_Typography();
     heartIcon = (filled, size) => /* @__PURE__ */ jsx(
       "svg",
       {
@@ -8928,7 +8971,7 @@ var init_HealthBar = __esm({
         children: /* @__PURE__ */ 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" })
       }
     );
-    sizeMap2 = {
+    sizeMap3 = {
       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" }
@@ -10716,10 +10759,11 @@ function Canvas2D({
             }
           }
         ),
-        process.env.NODE_ENV !== "production" && /* @__PURE__ */ jsxs("div", { "data-game-actions": "", className: "sr-only", "aria-hidden": "true", children: [
+        process.env.NODE_ENV !== "production" && /* @__PURE__ */ jsxs(Box, { "data-game-actions": "", className: "sr-only", "aria-hidden": "true", children: [
           tileClickEvent && /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              variant: "ghost",
               "data-event": tileClickEvent,
               "data-x": "0",
               "data-y": "0",
@@ -10728,8 +10772,9 @@ function Canvas2D({
             }
           ),
           unitClickEvent && units && units.length > 0 && /* @__PURE__ */ jsx(
-            "button",
+            Button,
             {
+              variant: "ghost",
               "data-event": unitClickEvent,
               "data-unit-id": units[0].id,
               onClick: () => eventBus.emit(`UI:${unitClickEvent}`, { unitId: units[0].id }),
@@ -10738,15 +10783,17 @@ function Canvas2D({
           )
         ] }),
         unitOverlays.map(({ unit, screenX, screenY }) => /* @__PURE__ */ 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__ */ 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
                 }
@@ -10756,7 +10803,7 @@ function Canvas2D({
           },
           unit.id
         )),
-        showMinimap && /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 pointer-events-none", style: { zIndex: 10 }, children: /* @__PURE__ */ jsx(
+        showMinimap && /* @__PURE__ */ jsx(Box, { position: "absolute", className: "bottom-2 right-2 pointer-events-none", style: { zIndex: 10 }, children: /* @__PURE__ */ jsx(
           MiniMap,
           {
             tiles: miniMapTiles,
@@ -10778,6 +10825,7 @@ var init_Canvas2D = __esm({
     init_cn();
     init_useEventBus();
     init_Box();
+    init_Button();
     init_Stack();
     init_Icon();
     init_Typography();
@@ -12808,7 +12856,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__ */ jsx(Icon, { name: item.icon, size: "sm" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm" })),
+                    item.iconAsset?.url ? /* @__PURE__ */ 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__ */ jsx(Icon, { name: item.icon, size: "sm" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm" })),
                     /* @__PURE__ */ jsx(Typography, { variant: "small", weight: isActive ? "semibold" : "normal", className: "!text-inherit", children: item.label }),
                     item.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: item.badge })
                   ]
@@ -17155,38 +17203,6 @@ var init_Breadcrumb = __esm({
     Breadcrumb.displayName = "Breadcrumb";
   }
 });
-function GameIcon({ assetUrl, icon, size = "md", alt, className }) {
-  const px = typeof size === "number" ? size : sizeMap3[size];
-  if (assetUrl?.url) {
-    return /* @__PURE__ */ 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__ */ jsx(I, { width: px, height: px, className: cn("flex-shrink-0", className) });
-}
-var sizeMap3;
-var init_GameIcon = __esm({
-  "components/game/2d/atoms/GameIcon.tsx"() {
-    "use client";
-    init_cn();
-    init_Icon();
-    sizeMap3 = {
-      sm: 16,
-      md: 24,
-      lg: 32
-    };
-    GameIcon.displayName = "GameIcon";
-  }
-});
 function BuilderBoard({
   entity,
   completeEvent = "PUZZLE_COMPLETE",
@@ -19000,6 +19016,7 @@ function GameCard({
   id,
   cost,
   art,
+  frameAsset,
   attack,
   defense,
   name,
@@ -19017,16 +19034,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__ */ 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",
@@ -19034,8 +19054,9 @@ function GameCard({
       ),
       children: [
         cost != null && /* @__PURE__ */ 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",
@@ -19044,17 +19065,7 @@ function GameCard({
             children: cost
           }
         ),
-        /* @__PURE__ */ jsx(Box, { className: "flex-1 flex items-center justify-center w-full", children: art ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: art.url,
-            alt: name ?? id,
-            width: artPx,
-            height: artPx,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : /* @__PURE__ */ jsx(Box, { className: "rounded bg-muted/40", style: { width: artPx, height: artPx } }) }),
+        /* @__PURE__ */ jsx(Box, { className: "flex-1 flex items-center justify-center w-full", children: art ? /* @__PURE__ */ jsx(GameIcon, { assetUrl: art, icon: "image", size: artPx, alt: name ?? id, className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Box, { className: "rounded bg-muted/40", style: { width: artPx, height: artPx } }) }),
         name != null && /* @__PURE__ */ jsx(
           Typography,
           {
@@ -19064,8 +19075,8 @@ function GameCard({
           }
         ),
         (attack != null || defense != null) && /* @__PURE__ */ jsxs(Box, { className: "flex w-full items-center justify-between px-0.5 text-[10px] font-bold leading-none", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-error", children: attack != null ? `\u2694${attack}` : "" }),
-          /* @__PURE__ */ jsx("span", { className: "text-info", children: defense != null ? `\u{1F6E1}${defense}` : "" })
+          /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-error", children: attack != null ? `\u2694${attack}` : "" }),
+          /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-info", children: defense != null ? `\u{1F6E1}${defense}` : "" })
         ] })
       ]
     }
@@ -19078,7 +19089,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",
@@ -21489,11 +21502,11 @@ function ChoiceButton({
 }) {
   const eventBus = useEventBus();
   return /* @__PURE__ */ jsxs(
-    "button",
+    Button,
     {
-      type: "button",
+      variant: "ghost",
       disabled,
-      onClick: (e) => {
+      onClick: () => {
         if (action) eventBus.emit(`UI:${action}`, {});
         onClick?.();
       },
@@ -21506,8 +21519,9 @@ function ChoiceButton({
       ),
       children: [
         index !== void 0 && /* @__PURE__ */ jsxs(
-          "span",
+          Typography,
           {
+            as: "span",
             className: cn(
               "flex-shrink-0 font-mono font-bold text-sm",
               selected ? "text-accent" : "text-muted-foreground"
@@ -21518,24 +21532,14 @@ function ChoiceButton({
             ]
           }
         ),
-        assetUrl ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: "",
-            width: 16,
-            height: 16,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-sm", children: typeof icon === "string" ? (() => {
+        assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: 16, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsx(Box, { as: "span", className: "flex-shrink-0 text-sm", children: typeof icon === "string" ? (() => {
           const I = resolveIcon(icon);
           return I ? /* @__PURE__ */ jsx(I, { className: "w-4 h-4" }) : null;
         })() : /* @__PURE__ */ (() => {
           const I = icon;
           return /* @__PURE__ */ jsx(I, { className: "w-4 h-4" });
         })() }) : null,
-        /* @__PURE__ */ jsx("span", { className: "text-sm leading-snug", children: text })
+        /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-sm leading-snug", children: text })
       ]
     }
   );
@@ -21545,6 +21549,10 @@ var init_ChoiceButton = __esm({
     init_cn();
     init_Icon();
     init_useEventBus();
+    init_Button();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     ChoiceButton.displayName = "ChoiceButton";
   }
 });
@@ -22222,7 +22230,7 @@ function ComboCounter({
   const sizes = sizeMap4[size];
   if (combo <= 0) return null;
   return /* @__PURE__ */ jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "inline-flex flex-col items-center justify-center",
@@ -22232,24 +22240,14 @@ function ComboCounter({
         className
       ),
       children: [
-        assetUrl && /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: "combo",
-            width: 24,
-            height: 24,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0 mb-0.5"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: cn("font-black tabular-nums leading-none", sizes.combo, getComboIntensity(combo)), children: combo }),
-        /* @__PURE__ */ jsx("span", { className: cn("font-bold uppercase tracking-wider text-muted-foreground", sizes.label), children: "combo" }),
-        multiplier != null && multiplier > 1 && /* @__PURE__ */ jsxs("span", { className: cn("font-bold text-warning tabular-nums", sizes.multiplier), children: [
+        assetUrl && /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: 24, className: "flex-shrink-0 mb-0.5" }),
+        /* @__PURE__ */ jsx(Typography, { as: "span", className: cn("font-black tabular-nums leading-none", sizes.combo, getComboIntensity(combo)), children: combo }),
+        /* @__PURE__ */ jsx(Typography, { as: "span", className: cn("font-bold uppercase tracking-wider text-muted-foreground", sizes.label), children: "combo" }),
+        multiplier != null && multiplier > 1 && /* @__PURE__ */ jsxs(Typography, { as: "span", className: cn("font-bold text-warning tabular-nums", sizes.multiplier), children: [
           "x",
           multiplier.toFixed(1)
         ] }),
-        streak != null && streak > 0 && /* @__PURE__ */ jsxs("span", { className: cn("text-muted-foreground tabular-nums", sizes.label), children: [
+        streak != null && streak > 0 && /* @__PURE__ */ jsxs(Typography, { as: "span", className: cn("text-muted-foreground tabular-nums", sizes.label), children: [
           streak,
           " streak"
         ] })
@@ -22261,6 +22259,9 @@ var DEFAULT_ASSET_URL2, sizeMap4;
 var init_ComboCounter = __esm({
   "components/game/2d/atoms/ComboCounter.tsx"() {
     init_cn();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     DEFAULT_ASSET_URL2 = {
       url: "https://almadar-kflow-assets.web.app/shared/effects/flash/flash00.png",
       role: "effect",
@@ -22510,9 +22511,9 @@ function ControlButton({
     [isPressed, releaseEvent, eventBus, onRelease]
   );
   return /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
-      type: "button",
+      variant,
       disabled,
       onPointerDown: handlePointerDown,
       onPointerUp: handlePointerUp,
@@ -22530,23 +22531,13 @@ function ControlButton({
         disabled && "opacity-50 cursor-not-allowed",
         className
       ),
-      children: assetUrl ? /* @__PURE__ */ jsx(
-        "img",
-        {
-          src: assetUrl.url,
-          alt: "",
-          width: 24,
-          height: 24,
-          style: { imageRendering: "pixelated", objectFit: "contain" },
-          className: "flex-shrink-0"
-        }
-      ) : icon ? /* @__PURE__ */ jsx("span", { className: "text-2xl", children: typeof icon === "string" ? /^[a-zA-Z0-9-]+$/.test(icon) ? (() => {
+      children: assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: 24, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsx(Box, { as: "span", className: "text-2xl", children: typeof icon === "string" ? /^[a-zA-Z0-9-]+$/.test(icon) ? (() => {
         const I = resolveIcon(icon);
         return I ? /* @__PURE__ */ jsx(I, { className: "w-6 h-6" }) : null;
       })() : icon : /* @__PURE__ */ (() => {
         const I = icon;
         return /* @__PURE__ */ jsx(I, { className: "w-6 h-6" });
-      })() }) : label ? /* @__PURE__ */ jsx("span", { children: label }) : null
+      })() }) : label ? /* @__PURE__ */ jsx(Typography, { as: "span", children: label }) : null
     }
   );
 }
@@ -22557,6 +22548,10 @@ var init_ControlButton = __esm({
     init_cn();
     init_useEventBus();
     init_Icon();
+    init_Button();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     sizeMap5 = {
       sm: "w-10 h-10 text-sm",
       md: "w-14 h-14 text-base",
@@ -22641,22 +22636,22 @@ function ControlGrid({
       },
       d
     );
-    return /* @__PURE__ */ jsxs("div", { className: cn("inline-grid grid-cols-3", ds.gap, ds.container, className), children: [
-      /* @__PURE__ */ jsx("div", {}),
+    return /* @__PURE__ */ jsxs(Box, { className: cn("inline-grid grid-cols-3", ds.gap, ds.container, className), children: [
+      /* @__PURE__ */ jsx(Box, {}),
       dir("up"),
-      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(Box, {}),
       dir("left"),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-interactive bg-muted border-2 border-muted-foreground" }) }),
+      /* @__PURE__ */ jsx(Box, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Box, { className: "w-6 h-6 rounded-interactive bg-muted border-2 border-muted-foreground" }) }),
       dir("right"),
-      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(Box, {}),
       dir("down"),
-      /* @__PURE__ */ jsx("div", {})
+      /* @__PURE__ */ jsx(Box, {})
     ] });
   }
   if (layout === "diamond" && buttons.length === 4) {
     const [top, right, bottom, left] = buttons;
-    return /* @__PURE__ */ jsxs("div", { className: cn(layoutClass.diamond, className), children: [
-      /* @__PURE__ */ jsx("div", {}),
+    return /* @__PURE__ */ jsxs(Box, { className: cn(layoutClass.diamond, className), children: [
+      /* @__PURE__ */ jsx(Box, {}),
       /* @__PURE__ */ jsx(
         ControlButton,
         {
@@ -22671,7 +22666,7 @@ function ControlGrid({
           disabled
         }
       ),
-      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(Box, {}),
       /* @__PURE__ */ jsx(
         ControlButton,
         {
@@ -22686,7 +22681,7 @@ function ControlGrid({
           disabled
         }
       ),
-      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(Box, {}),
       /* @__PURE__ */ jsx(
         ControlButton,
         {
@@ -22701,7 +22696,7 @@ function ControlGrid({
           disabled
         }
       ),
-      /* @__PURE__ */ jsx("div", {}),
+      /* @__PURE__ */ jsx(Box, {}),
       /* @__PURE__ */ jsx(
         ControlButton,
         {
@@ -22716,10 +22711,10 @@ function ControlGrid({
           disabled
         }
       ),
-      /* @__PURE__ */ jsx("div", {})
+      /* @__PURE__ */ jsx(Box, {})
     ] });
   }
-  return /* @__PURE__ */ jsx("div", { className: cn(layoutClass[layout], className), children: buttons.map((button) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Box, { className: cn(layoutClass[layout], className), children: buttons.map((button) => /* @__PURE__ */ jsx(
     ControlButton,
     {
       icon: button.icon,
@@ -22741,6 +22736,7 @@ var init_ControlGrid = __esm({
     "use client";
     init_cn();
     init_useEventBus();
+    init_Box();
     init_ControlButton();
     sizeKey = { sm: "sm", md: "md", lg: "lg" };
     layoutClass = {
@@ -23005,8 +23001,9 @@ function DamageNumber({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { children: floatKeyframes }),
     /* @__PURE__ */ jsxs(
-      "span",
+      Typography,
       {
+        as: "span",
         className: cn(
           "inline-flex items-center gap-0.5 font-mono select-none pointer-events-none",
           sizeMap6[size],
@@ -23015,17 +23012,7 @@ function DamageNumber({
         ),
         style: { animation: "damageFloat 1s ease-out forwards" },
         children: [
-          assetUrl && /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: assetUrl.url,
-              alt: "",
-              width: 14,
-              height: 14,
-              style: { imageRendering: "pixelated", objectFit: "contain" },
-              className: "flex-shrink-0"
-            }
-          ),
+          assetUrl && /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: 14, className: "flex-shrink-0" }),
           displayText
         ]
       }
@@ -23036,6 +23023,8 @@ var sizeMap6, typeStyles, floatKeyframes, DEFAULT_ASSET_URL4;
 var init_DamageNumber = __esm({
   "components/game/2d/atoms/DamageNumber.tsx"() {
     init_cn();
+    init_Typography();
+    init_GameIcon();
     sizeMap6 = {
       sm: "text-sm",
       md: "text-lg",
@@ -29397,7 +29386,7 @@ 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__ */ jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "flex items-center gap-2 font-bold",
@@ -29405,19 +29394,9 @@ function ScoreDisplay({
         className
       ),
       children: [
-        assetUrl ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: "",
-            width: 20,
-            height: 20,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
-        label && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
-        /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: formattedValue })
+        assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: 20, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsx(Box, { as: "span", className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
+        label && /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsx(Typography, { as: "span", className: "tabular-nums", children: formattedValue })
       ]
     }
   );
@@ -29427,6 +29406,9 @@ var init_ScoreDisplay = __esm({
   "components/game/2d/atoms/ScoreDisplay.tsx"() {
     init_cn();
     init_Icon();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     sizeMap8 = {
       sm: "text-sm",
       md: "text-lg",
@@ -29487,12 +29469,12 @@ function Sprite({
     onClick?.();
   };
   return /* @__PURE__ */ jsx(
-    "div",
+    Box,
     {
+      position: "absolute",
       className,
       onClick: action || onClick ? handleClick : void 0,
       style: {
-        position: "absolute",
         width: frameWidth,
         height: frameHeight,
         backgroundImage: `url(${spritesheet.url})`,
@@ -29548,6 +29530,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",
@@ -29584,17 +29567,7 @@ function StateIndicator({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx(Box, { as: "span", children: assetUrl ? /* @__PURE__ */ 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__ */ jsx(Icon, { name: config.icon }) : config.icon : /* @__PURE__ */ jsx(Icon, { icon: config.icon }) }),
+        /* @__PURE__ */ jsx(Box, { as: "span", children: assetUrl ? /* @__PURE__ */ 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__ */ jsx(Icon, { name: config.icon }) : config.icon : /* @__PURE__ */ jsx(Icon, { icon: config.icon }) }),
         /* @__PURE__ */ jsx(Box, { as: "span", children: displayLabel })
       ]
     }
@@ -29606,6 +29579,7 @@ var init_StateIndicator = __esm({
     init_Box();
     init_Icon();
     init_cn();
+    init_GameIcon();
     DEFAULT_ASSET_URL6 = {
       url: "https://almadar-kflow-assets.web.app/shared/isometric-dungeon/Isometric/chestClosed_E.png",
       role: "ui",
@@ -29659,7 +29633,7 @@ function TimerDisplay({
 }) {
   const isLow = lowThreshold != null && seconds <= lowThreshold && seconds > 0;
   return /* @__PURE__ */ jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "inline-flex items-center gap-1 justify-center rounded-container",
@@ -29671,7 +29645,7 @@ function TimerDisplay({
         className
       ),
       children: [
-        iconAsset && /* @__PURE__ */ jsx("img", { src: iconAsset.url, alt: "", className: "w-4 h-4 object-contain flex-shrink-0" }),
+        iconAsset && /* @__PURE__ */ jsx(GameIcon, { assetUrl: iconAsset, icon: "image", size: 16, className: "w-4 h-4 object-contain flex-shrink-0" }),
         formatTime(seconds, format)
       ]
     }
@@ -29681,6 +29655,8 @@ var sizeMap9;
 var init_TimerDisplay = __esm({
   "components/game/2d/atoms/TimerDisplay.tsx"() {
     init_cn();
+    init_Box();
+    init_GameIcon();
     sizeMap9 = {
       sm: "text-sm px-2 py-0.5",
       md: "text-lg px-3 py-1",
@@ -29701,7 +29677,7 @@ function ResourceCounter({
 }) {
   const sizes = sizeMap10[size];
   return /* @__PURE__ */ jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "inline-flex items-center rounded-container",
@@ -29710,21 +29686,11 @@ function ResourceCounter({
         className
       ),
       children: [
-        assetUrl ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: assetUrl.url,
-            alt: label,
-            width: sizes.img,
-            height: sizes.img,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : icon ? /* @__PURE__ */ jsx("span", { className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: label }),
-        /* @__PURE__ */ jsxs("span", { className: cn("font-bold tabular-nums", color && (color in colorTokenClasses2 ? colorTokenClasses2[color] : color)), children: [
+        assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: sizes.img, alt: label, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsx(Box, { as: "span", className: cn("flex-shrink-0", sizes.icon), children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
+        /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsxs(Typography, { as: "span", className: cn("font-bold tabular-nums", color && (color in colorTokenClasses2 ? colorTokenClasses2[color] : color)), children: [
           value,
-          max != null && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          max != null && /* @__PURE__ */ jsxs(Typography, { as: "span", className: "text-muted-foreground", children: [
             "/",
             max
           ] })
@@ -29738,6 +29704,9 @@ 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",
@@ -29776,9 +29745,9 @@ function ItemSlot({
   const isClickable = onClick != null || action != null;
   const px = assetSizeMap[size];
   return /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
-      type: "button",
+      variant: "ghost",
       onClick: () => {
         if (action) eventBus.emit(`UI:${action}`, {});
         onClick?.();
@@ -29797,21 +29766,12 @@ function ItemSlot({
         !isClickable && "cursor-default",
         className
       ),
-      children: empty ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-base", children: "+" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        assetUrl ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: assetUrl?.url,
-            alt: label,
-            width: px,
-            height: px,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
+      children: empty ? /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground text-base", children: "+" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: px, alt: label, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsx(Box, { as: "span", className: "flex-shrink-0", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) }) : null,
         quantity != null && quantity > 1 && /* @__PURE__ */ 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",
@@ -29831,6 +29791,10 @@ var init_ItemSlot = __esm({
     init_cn();
     init_Icon();
     init_useEventBus();
+    init_Button();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     sizeMap11 = {
       sm: "w-10 h-10 text-lg",
       md: "w-14 h-14 text-2xl",
@@ -29874,7 +29838,7 @@ function TurnIndicator({
 }) {
   const sizes = sizeMap12[size];
   return /* @__PURE__ */ jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "inline-flex items-center rounded-container",
@@ -29883,32 +29847,22 @@ function TurnIndicator({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("span", { className: "font-bold tabular-nums", children: [
+        /* @__PURE__ */ jsxs(Typography, { as: "span", className: "font-bold tabular-nums", children: [
           "Turn ",
           currentTurn,
-          maxTurns != null && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          maxTurns != null && /* @__PURE__ */ jsxs(Typography, { as: "span", className: "text-muted-foreground", children: [
             "/",
             maxTurns
           ] })
         ] }),
         phase && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "|" }),
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: phase })
+          /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground", children: "|" }),
+          /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground", children: phase })
         ] }),
         activeTeam && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "|" }),
-          assetUrl ? /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: assetUrl.url,
-              alt: "",
-              width: 12,
-              height: 12,
-              style: { imageRendering: "pixelated", objectFit: "contain" },
-              className: "flex-shrink-0"
-            }
-          ) : /* @__PURE__ */ jsx("span", { className: cn("rounded-full bg-success/20", sizes.dot) }),
-          /* @__PURE__ */ jsx("span", { className: "text-success", children: activeTeam })
+          /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground", children: "|" }),
+          assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: 12, className: "flex-shrink-0" }) : /* @__PURE__ */ jsx(Box, { as: "span", className: cn("rounded-full bg-success/20", sizes.dot) }),
+          /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-success", children: activeTeam })
         ] })
       ]
     }
@@ -29918,6 +29872,9 @@ var sizeMap12, DEFAULT_ASSET_URL9;
 var init_TurnIndicator = __esm({
   "components/game/2d/atoms/TurnIndicator.tsx"() {
     init_cn();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     sizeMap12 = {
       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" },
@@ -29941,53 +29898,47 @@ function WaypointMarker({
   className
 }) {
   const sizes = sizeMap13[size];
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+  return /* @__PURE__ */ jsxs(Box, { className: cn("flex flex-col items-center", className), children: [
+    /* @__PURE__ */ jsxs(Box, { className: "relative flex items-center justify-center", children: [
       active && /* @__PURE__ */ 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__ */ jsx(
-        "div",
+        Box,
         {
+          position: "absolute",
           className: cn(
-            "absolute rounded-full border-2 border-info",
+            "rounded-full border-2 border-info",
             sizes.ring
           )
         }
       ),
       /* @__PURE__ */ 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__ */ 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__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) : null
+          children: completed ? checkIcon : assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: sizes.img, alt: label, className: "flex-shrink-0" }) : icon ? typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon }) : /* @__PURE__ */ jsx(Icon, { icon }) : null
         }
       )
     ] }),
     label && /* @__PURE__ */ jsx(
-      "span",
+      Typography,
       {
+        as: "span",
         className: cn(
           "text-center whitespace-nowrap",
           sizes.label,
@@ -30003,6 +29954,9 @@ var init_WaypointMarker = __esm({
   "components/game/2d/atoms/WaypointMarker.tsx"() {
     init_cn();
     init_Icon();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     DEFAULT_ASSET_URL10 = {
       url: "https://almadar-kflow-assets.web.app/shared/world-map/battle_marker.png",
       role: "ui",
@@ -30034,31 +29988,23 @@ function StatusEffect({
   className
 }) {
   const sizes = sizeMap14[size];
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex flex-col items-center", className), children: [
+  return /* @__PURE__ */ jsxs(Box, { position: "relative", className: cn("inline-flex flex-col items-center", className), children: [
     /* @__PURE__ */ 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,
           variantStyles8[variant]
         ),
         title: label,
         children: [
-          /* @__PURE__ */ jsx("span", { className: cn("flex items-center justify-center", sizes.icon), children: assetUrl ? /* @__PURE__ */ 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__ */ jsx(Icon, { name: icon, size: "sm" }) : icon != null ? /* @__PURE__ */ jsx(Icon, { icon, size: "sm" }) : null }),
+          /* @__PURE__ */ jsx(Box, { as: "span", className: cn("flex items-center justify-center", sizes.icon), children: assetUrl ? /* @__PURE__ */ jsx(GameIcon, { assetUrl, icon: "image", size: sizes.img, alt: label, className: "flex-shrink-0" }) : icon != null && typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm" }) : icon != null ? /* @__PURE__ */ jsx(Icon, { icon, size: "sm" }) : null }),
           duration !== void 0 && /* @__PURE__ */ 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
@@ -30070,8 +30016,9 @@ function StatusEffect({
       }
     ),
     stacks !== void 0 && stacks > 1 && /* @__PURE__ */ 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
@@ -30079,7 +30026,7 @@ function StatusEffect({
         children: stacks
       }
     ),
-    label && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mt-0.5 text-center whitespace-nowrap", children: label })
+    label && /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-xs text-muted-foreground mt-0.5 text-center whitespace-nowrap", children: label })
   ] });
 }
 var DEFAULT_ASSET_URL11, sizeMap14, variantStyles8;
@@ -30087,6 +30034,9 @@ var init_StatusEffect = __esm({
   "components/game/2d/atoms/StatusEffect.tsx"() {
     init_cn();
     init_Icon();
+    init_Box();
+    init_Typography();
+    init_GameIcon();
     DEFAULT_ASSET_URL11 = {
       url: "https://almadar-kflow-assets.web.app/shared/effects/particles/flame_01.png",
       role: "ui",
@@ -30113,7 +30063,7 @@ function DialogueBubble({
   className
 }) {
   return /* @__PURE__ */ 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",
@@ -30121,17 +30071,10 @@ function DialogueBubble({
         className
       ),
       children: [
-        portrait && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-12 h-12 rounded-full overflow-hidden border-2 border-warning/60", children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: portrait?.url,
-            alt: speaker ?? "speaker",
-            className: "w-full h-full object-cover"
-          }
-        ) }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
-          speaker && /* @__PURE__ */ jsx("span", { className: "text-sm font-bold text-warning", children: speaker }),
-          /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground leading-relaxed", children: text })
+        portrait && /* @__PURE__ */ jsx(Box, { className: "flex-shrink-0 w-12 h-12 rounded-full overflow-hidden border-2 border-warning/60", children: /* @__PURE__ */ jsx(GameIcon, { assetUrl: portrait, icon: "image", size: 48, alt: speaker ?? "speaker", className: "w-full h-full object-cover" }) }),
+        /* @__PURE__ */ jsxs(Box, { className: "flex flex-col gap-1 min-w-0", children: [
+          speaker && /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-sm font-bold text-warning", children: speaker }),
+          /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-sm text-foreground leading-relaxed", children: text })
         ] })
       ]
     }
@@ -30141,6 +30084,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",
@@ -30167,7 +30113,7 @@ function StatBadge({
   const numValue = typeof value === "number" ? value : parseInt(String(value), 10) || 0;
   const resolvedAsset = iconUrl ?? assetUrl;
   return /* @__PURE__ */ jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "inline-flex items-center gap-2 rounded-container border backdrop-blur-sm",
@@ -30176,18 +30122,8 @@ function StatBadge({
         className
       ),
       children: [
-        resolvedAsset ? /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: resolvedAsset.url,
-            alt: "",
-            width: 16,
-            height: 16,
-            style: { imageRendering: "pixelated", objectFit: "contain" },
-            className: "flex-shrink-0"
-          }
-        ) : icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-lg", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Icon, { icon, className: "w-4 h-4" }) }) : null,
-        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium", children: label }),
+        resolvedAsset ? /* @__PURE__ */ jsx(GameIcon, { assetUrl: resolvedAsset, icon: "image", size: 16, className: "flex-shrink-0" }) : icon ? /* @__PURE__ */ jsx(Box, { as: "span", className: "flex-shrink-0 text-lg", children: typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Icon, { icon, className: "w-4 h-4" }) }) : null,
+        /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-muted-foreground font-medium", children: label }),
         format === "hearts" && max && /* @__PURE__ */ jsx(
           HealthBar,
           {
@@ -30213,7 +30149,7 @@ function StatBadge({
             size: size === "lg" ? "md" : "sm"
           }
         ),
-        format === "text" && /* @__PURE__ */ jsx("span", { className: "font-bold text-foreground", children: value })
+        format === "text" && /* @__PURE__ */ jsx(Typography, { as: "span", className: "font-bold text-foreground", children: value })
       ]
     }
   );
@@ -30223,6 +30159,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();
     sizeMap15 = {
@@ -30400,9 +30339,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__ */ jsxs("div", { className: cn("relative", positionMap[position], className), children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute top-4 left-4 flex flex-col gap-2 pointer-events-auto", children: leftStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) }),
-      /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 flex flex-col gap-2 items-end pointer-events-auto", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
+    return /* @__PURE__ */ jsxs(Box, { position: "relative", className: cn(positionMap[position], className), children: [
+      /* @__PURE__ */ jsx(Box, { position: "absolute", className: "top-4 left-4 flex flex-col gap-2 pointer-events-auto", children: leftStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) }),
+      /* @__PURE__ */ 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__ */ jsx(StatBadge, { ...stat, size }, i)) })
     ] });
   }
   if (position === "top" || position === "bottom") {
@@ -30411,7 +30350,7 @@ function GameHud({
     const rightStats = stats.slice(mid);
     const isTop = position === "top";
     return /* @__PURE__ */ jsxs(
-      "div",
+      Box,
       {
         className: cn(
           "flex items-center justify-between w-full",
@@ -30421,17 +30360,18 @@ function GameHud({
           className
         ),
         children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: leftStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) }),
-          rightStats.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 flex-shrink-0", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
+          /* @__PURE__ */ jsx(Box, { className: "flex items-center gap-3 flex-shrink-0", children: leftStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) }),
+          rightStats.length > 0 && /* @__PURE__ */ jsx(Box, { className: "flex items-center gap-3 flex-shrink-0", children: rightStats.map((stat, i) => /* @__PURE__ */ jsx(StatBadge, { ...stat, size }, i)) })
         ]
       }
     );
   }
   return /* @__PURE__ */ 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
       ),
@@ -30443,6 +30383,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"
@@ -30483,7 +30424,7 @@ function GameMenu({
     [eventBus, onSelect]
   );
   return /* @__PURE__ */ jsxs(
-    "div",
+    Box,
     {
       className: cn(
         "min-h-screen w-full flex flex-col items-center justify-center p-8",
@@ -30493,18 +30434,12 @@ function GameMenu({
         background: background ?? "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0e17 100%)"
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "text-center mb-12 animate-fade-in", children: [
-          logo && /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: logo.url,
-              alt: title,
-              className: "h-24 w-auto mx-auto mb-6 drop-shadow-2xl"
-            }
-          ),
+        /* @__PURE__ */ jsxs(Box, { className: "text-center mb-12 animate-fade-in", children: [
+          logo && /* @__PURE__ */ jsx(GameIcon, { assetUrl: logo, icon: "image", size: 96, alt: title, className: "h-24 w-auto mx-auto mb-6 drop-shadow-2xl" }),
           /* @__PURE__ */ 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)"
@@ -30512,9 +30447,9 @@ function GameMenu({
               children: title
             }
           ),
-          subtitle && /* @__PURE__ */ jsx("p", { className: "mt-2 text-lg text-muted-foreground tracking-widest uppercase", children: subtitle })
+          subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body", className: "mt-2 text-lg text-muted-foreground tracking-widest uppercase", children: subtitle })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 w-full max-w-md", children: resolvedOptions.map((option, index) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Box, { className: "flex flex-col gap-4 w-full max-w-md", children: resolvedOptions.map((option, index) => /* @__PURE__ */ jsx(
           ChoiceButton,
           {
             text: option.label,
@@ -30525,9 +30460,9 @@ function GameMenu({
           },
           index
         )) }),
-        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 pointer-events-none overflow-hidden", children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute top-1/4 left-1/4 w-64 h-64 bg-info/10 rounded-container blur-3xl" }),
-          /* @__PURE__ */ jsx("div", { className: "absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent/10 rounded-container blur-3xl" })
+        /* @__PURE__ */ jsxs(Box, { position: "absolute", className: "inset-0 pointer-events-none overflow-hidden", children: [
+          /* @__PURE__ */ jsx(Box, { position: "absolute", className: "top-1/4 left-1/4 w-64 h-64 bg-info/10 rounded-container blur-3xl" }),
+          /* @__PURE__ */ jsx(Box, { position: "absolute", className: "bottom-1/4 right-1/4 w-96 h-96 bg-accent/10 rounded-container blur-3xl" })
         ] })
       ]
     }
@@ -30539,6 +30474,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" },
@@ -30977,7 +30915,7 @@ function GameAudioToggle({
       onClick: handleToggle,
       className: cn("text-lg leading-none px-2", className),
       "aria-pressed": muted,
-      children: activeAsset ? /* @__PURE__ */ 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__ */ 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}"
     }
   );
 }
@@ -30987,6 +30925,7 @@ var init_GameAudioToggle = __esm({
     init_atoms();
     init_cn();
     init_GameAudioProvider();
+    init_GameIcon();
     GameAudioToggle.displayName = "GameAudioToggle";
   }
 });