@almadar/ui 5.81.0 → 5.82.0

package/dist/avl/index.cjs

@@ -5430,6 +5430,7 @@ var init_Button = __esm({
         rightIcon,
         icon: iconProp,
         iconRight: iconRightProp,
+        iconAsset,
         action,
         actionPayload,
         label,
@@ -5441,7 +5442,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) {
@@ -5981,13 +5983,14 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     Badge = React112__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",
           {
@@ -12193,6 +12196,7 @@ function GameCard({
   id,
   cost,
   art,
+  frameAsset,
   attack,
   defense,
   name,
@@ -12210,6 +12214,7 @@ 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,
     {
@@ -12217,9 +12222,11 @@ function GameCard({
       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",
@@ -25814,7 +25821,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 })
                   ]

package/dist/avl/index.js

@@ -5384,6 +5384,7 @@ var init_Button = __esm({
         rightIcon,
         icon: iconProp,
         iconRight: iconRightProp,
+        iconAsset,
         action,
         actionPayload,
         label,
@@ -5395,7 +5396,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) {
@@ -5935,13 +5937,14 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     Badge = React112__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",
           {
@@ -12147,6 +12150,7 @@ function GameCard({
   id,
   cost,
   art,
+  frameAsset,
   attack,
   defense,
   name,
@@ -12164,6 +12168,7 @@ 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,
     {
@@ -12171,9 +12176,11 @@ function GameCard({
       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",
@@ -25768,7 +25775,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 })
                   ]

package/dist/components/core/atoms/Badge.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { type IconInput } from "./Icon";
+import type { Asset } from "@almadar/core";
 export type BadgeVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "error" | "info" | "neutral";
 export type BadgeSize = "sm" | "md" | "lg";
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -15,6 +16,8 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     label?: string | number;
     /** Lucide icon component or canonical kebab-case icon name string */
     icon?: IconInput;
+    /** Asset image rendered as the badge icon; takes precedence over icon when provided. */
+    iconAsset?: Asset;
     /** When set, renders a small X button on the right of the badge that
      *  invokes this handler — turns the badge into a removable chip.
      *  Used by the TagInput molecule and other "list of removable values"

package/dist/components/core/atoms/Button.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { EventKey, EventPayload } from "@almadar/core";
+import type { Asset, EventKey, EventPayload } from "@almadar/core";
 import { type IconInput } from "./Icon";
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default";
 export type ButtonSize = "sm" | "md" | "lg";
@@ -17,6 +17,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     icon?: IconInput;
     /** Alias for rightIcon */
     iconRight?: IconInput;
+    /** Asset image rendered as the leading icon; takes precedence over icon/leftIcon when provided. */
+    iconAsset?: Asset;
     /** Declarative event name — emits UI:{action} via eventBus on click */
     action?: EventKey;
     /** Payload to include with the action event */

package/dist/components/core/molecules/Tabs.d.ts

@@ -5,7 +5,7 @@
  * Uses theme-aware CSS variables for styling.
  */
 import React from 'react';
-import type { EventEmit } from '@almadar/core';
+import type { Asset, EventEmit } from '@almadar/core';
 import type { IconInput } from '../atoms/index';
 export interface TabItem {
     /**
@@ -24,6 +24,8 @@ export interface TabItem {
     content?: React.ReactNode;
     /** Tab icon — pass either a Lucide component or its registry name (e.g. "file-text") */
     icon?: IconInput;
+    /** Asset image rendered as the tab icon; takes precedence over icon when provided. */
+    iconAsset?: Asset;
     /** Tab badge */
     badge?: string | number;
     /** Disable tab */

package/dist/components/game/2d/atoms/GameCard.d.ts

@@ -5,6 +5,8 @@ export interface GameCardProps {
     cost?: number;
     /** Card art asset */
     art?: Asset;
+    /** Asset rendered as the card border/frame via backgroundImage; falls back to CSS border styling when absent. */
+    frameAsset?: Asset;
     attack?: number;
     defense?: number;
     name?: string;
@@ -20,7 +22,7 @@ export interface GameCardProps {
     }>;
     className?: string;
 }
-export declare function GameCard({ id, cost, art, attack, defense, name, selected, disabled, size, onClick, clickEvent, className, }: GameCardProps): React.JSX.Element;
+export declare function GameCard({ id, cost, art, frameAsset, attack, defense, name, selected, disabled, size, onClick, clickEvent, className, }: GameCardProps): React.JSX.Element;
 export declare namespace GameCard {
     var displayName: string;
 }

package/dist/components/game/3d/index.cjs

@@ -3196,6 +3196,7 @@ var Button = React6__default.default.forwardRef(
     rightIcon,
     icon: iconProp,
     iconRight: iconRightProp,
+    iconAsset,
     action,
     actionPayload,
     label,
@@ -3207,7 +3208,8 @@ var Button = React6__default.default.forwardRef(
     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) {

package/dist/components/game/3d/index.js

@@ -3172,6 +3172,7 @@ var Button = React6.forwardRef(
     rightIcon,
     icon: iconProp,
     iconRight: iconRightProp,
+    iconAsset,
     action,
     actionPayload,
     label,
@@ -3183,7 +3184,8 @@ var Button = React6.forwardRef(
     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) {

package/dist/components/index.cjs

@@ -2168,6 +2168,7 @@ var init_Button = __esm({
         rightIcon,
         icon: iconProp,
         iconRight: iconRightProp,
+        iconAsset,
         action,
         actionPayload,
         label,
@@ -2179,7 +2180,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) {
@@ -2933,13 +2935,14 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     exports.Badge = React79__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(exports.Icon, { name: icon, className: iconSizes3[size] }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(exports.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(exports.Icon, { name: icon, className: iconSizes3[size] }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { icon, className: iconSizes3[size] }) : null;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
@@ -12899,7 +12902,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(exports.Icon, { name: item.icon, size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(exports.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(exports.Icon, { name: item.icon, size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { icon: item.icon, size: "sm" })),
                     /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", weight: isActive ? "semibold" : "normal", className: "!text-inherit", children: item.label }),
                     item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: "default", size: "sm", children: item.badge })
                   ]
@@ -19059,6 +19062,7 @@ function GameCard({
   id,
   cost,
   art,
+  frameAsset,
   attack,
   defense,
   name,
@@ -19076,6 +19080,7 @@ 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(
     exports.Button,
     {
@@ -19083,9 +19088,11 @@ function GameCard({
       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",

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",
           {
@@ -12853,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 })
                   ]
@@ -19013,6 +19016,7 @@ function GameCard({
   id,
   cost,
   art,
+  frameAsset,
   attack,
   defense,
   name,
@@ -19030,6 +19034,7 @@ 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,
     {
@@ -19037,9 +19042,11 @@ function GameCard({
       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",

package/dist/marketing/index.cjs

@@ -3983,6 +3983,7 @@ var Button = React11__default.default.forwardRef(
     rightIcon,
     icon: iconProp,
     iconRight: iconRightProp,
+    iconAsset,
     action,
     actionPayload,
     label,
@@ -3994,7 +3995,8 @@ var Button = React11__default.default.forwardRef(
     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) {
@@ -4070,13 +4072,14 @@ var sizeStyles2 = {
   lg: "px-3 py-1.5 text-base"
 };
 var Badge = React11__default.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 iconSizes = {
       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: iconSizes[size] }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: iconSizes[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: iconSizes[size] }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon, className: iconSizes[size] }) : null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "span",
       {

package/dist/marketing/index.d.cts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EventKey, EventPayload, AssetUrl } from '@almadar/core';
+import { EventKey, EventPayload, AssetUrl, Asset } from '@almadar/core';
 import { LucideIcon } from 'lucide-react';
 
 /**
@@ -259,6 +259,8 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     icon?: IconInput;
     /** Alias for rightIcon */
     iconRight?: IconInput;
+    /** Asset image rendered as the leading icon; takes precedence over icon/leftIcon when provided. */
+    iconAsset?: Asset;
     /** Declarative event name — emits UI:{action} via eventBus on click */
     action?: EventKey;
     /** Payload to include with the action event */
@@ -287,6 +289,8 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     label?: string | number;
     /** Lucide icon component or canonical kebab-case icon name string */
     icon?: IconInput;
+    /** Asset image rendered as the badge icon; takes precedence over icon when provided. */
+    iconAsset?: Asset;
     /** When set, renders a small X button on the right of the badge that
      *  invokes this handler — turns the badge into a removable chip.
      *  Used by the TagInput molecule and other "list of removable values"

package/dist/marketing/index.js

@@ -1,6 +1,6 @@
 import React11, { createContext, useCallback, useState, useRef, useEffect, useContext, useMemo, useSyncExternalStore, useId } from 'react';
 import { createLogger } from '@almadar/logger';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as LucideIcons2 from 'lucide-react';
 import { Loader2, X } from 'lucide-react';
 
@@ -3959,6 +3959,7 @@ var Button = React11.forwardRef(
     rightIcon,
     icon: iconProp,
     iconRight: iconRightProp,
+    iconAsset,
     action,
     actionPayload,
     label,
@@ -3970,7 +3971,8 @@ var Button = React11.forwardRef(
     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) {
@@ -4046,13 +4048,14 @@ var sizeStyles2 = {
   lg: "px-3 py-1.5 text-base"
 };
 var Badge = React11.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 iconSizes = {
       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: iconSizes[size] }) : icon ? /* @__PURE__ */ jsx(Icon, { icon, className: iconSizes[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: iconSizes[size] }) : icon ? /* @__PURE__ */ jsx(Icon, { icon, className: iconSizes[size] }) : null;
     return /* @__PURE__ */ jsxs(
       "span",
       {

package/dist/providers/index.cjs

@@ -1484,6 +1484,7 @@ var init_Button = __esm({
         rightIcon,
         icon: iconProp,
         iconRight: iconRightProp,
+        iconAsset,
         action,
         actionPayload,
         label,
@@ -1495,7 +1496,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) {
@@ -2153,13 +2155,14 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     Badge = React105__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",
           {
@@ -8438,6 +8441,7 @@ function GameCard({
   id,
   cost,
   art,
+  frameAsset,
   attack,
   defense,
   name,
@@ -8455,6 +8459,7 @@ 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,
     {
@@ -8462,9 +8467,11 @@ function GameCard({
       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",
@@ -23269,7 +23276,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 })
                   ]

package/dist/providers/index.js

@@ -1439,6 +1439,7 @@ var init_Button = __esm({
         rightIcon,
         icon: iconProp,
         iconRight: iconRightProp,
+        iconAsset,
         action,
         actionPayload,
         label,
@@ -1450,7 +1451,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) {
@@ -2108,13 +2110,14 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     Badge = React105__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",
           {
@@ -8393,6 +8396,7 @@ function GameCard({
   id,
   cost,
   art,
+  frameAsset,
   attack,
   defense,
   name,
@@ -8410,6 +8414,7 @@ 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,
     {
@@ -8417,9 +8422,11 @@ function GameCard({
       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",
@@ -23224,7 +23231,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 })
                   ]

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",
           {
@@ -8964,6 +8967,7 @@ function GameCard({
   id,
   cost,
   art,
+  frameAsset,
   attack,
   defense,
   name,
@@ -8981,6 +8985,7 @@ 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,
     {
@@ -8988,9 +8993,11 @@ function GameCard({
       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",
@@ -23233,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 })
                   ]

package/dist/runtime/index.js

@@ -1988,6 +1988,7 @@ var init_Button = __esm({
         rightIcon,
         icon: iconProp,
         iconRight: iconRightProp,
+        iconAsset,
         action,
         actionPayload,
         label,
@@ -1999,7 +2000,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) {
@@ -2657,13 +2659,14 @@ var init_Badge = __esm({
       lg: "px-3 py-1.5 text-base"
     };
     Badge = React103__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",
           {
@@ -8919,6 +8922,7 @@ function GameCard({
   id,
   cost,
   art,
+  frameAsset,
   attack,
   defense,
   name,
@@ -8936,6 +8940,7 @@ 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,
     {
@@ -8943,9 +8948,11 @@ function GameCard({
       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",
@@ -23188,7 +23195,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 })
                   ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.81.0",
+  "version": "5.82.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [