@almadar/ui 2.24.3 → 2.24.5

package/dist/components/index.cjs

@@ -232,15 +232,15 @@ Icon.displayName = "Icon";
 var variantStyles = {
   primary: [
     "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "border-none",
     "shadow-[var(--shadow-sm)]",
     "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
     "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
   ].join(" "),
   secondary: [
-    "bg-transparent text-[var(--color-accent)]",
-    "border-[length:var(--border-width)] border-[var(--color-accent)]",
-    "hover:bg-[var(--color-accent)] hover:text-white",
+    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
+    "border-none",
+    "hover:bg-[var(--color-muted-foreground)]/15 hover:text-[var(--color-foreground)]",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
@@ -590,14 +590,16 @@ var Checkbox = React88__namespace.default.forwardRef(
 Checkbox.displayName = "Checkbox";
 var variantStyles2 = {
   default: [
-    "bg-[var(--color-card)] border-none",
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
     "bg-[var(--color-card)]",
     "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-none",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
@@ -3003,6 +3005,7 @@ var TypewriterText = ({
   className,
   onComplete
 }) => {
+  const safeText = typeof text === "string" ? text : String(text ?? "");
   const [charCount, setCharCount] = React88.useState(0);
   const [started, setStarted] = React88.useState(startDelay === 0);
   const onCompleteRef = React88.useRef(onComplete);
@@ -3026,14 +3029,14 @@ var TypewriterText = ({
   }, [text]);
   React88.useEffect(() => {
     if (!started) return void 0;
-    if (charCount >= text.length) {
+    if (charCount >= safeText.length) {
       onCompleteRef.current?.();
       return void 0;
     }
     const interval = window.setInterval(() => {
       setCharCount((prev) => {
         const next = prev + 1;
-        if (next >= text.length) {
+        if (next >= safeText.length) {
           window.clearInterval(interval);
         }
         return next;
@@ -3043,8 +3046,8 @@ var TypewriterText = ({
       window.clearInterval(interval);
     };
   }, [started, text, speed, charCount]);
-  const isComplete = charCount >= text.length;
-  const displayedText = text.slice(0, charCount);
+  const isComplete = charCount >= safeText.length;
+  const displayedText = safeText.slice(0, charCount);
   return /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "body", className: cn("inline", className), children: [
     displayedText,
     !isComplete && /* @__PURE__ */ jsxRuntime.jsx(
@@ -8255,6 +8258,7 @@ WizardNavigation.displayName = "WizardNavigation";
 var MarkdownContent = React88__namespace.default.memo(
   ({ content, direction, className }) => {
     const { t: _t } = useTranslate();
+    const safeContent = typeof content === "string" ? content : String(content ?? "");
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
@@ -8344,7 +8348,7 @@ var MarkdownContent = React88__namespace.default.memo(
                 );
               }
             },
-            children: content
+            children: safeContent
           }
         )
       }
@@ -8355,13 +8359,14 @@ var MarkdownContent = React88__namespace.default.memo(
 MarkdownContent.displayName = "MarkdownContent";
 var CodeBlock = React88__namespace.default.memo(
   ({
-    code,
+    code: rawCode,
     language = "text",
     showCopyButton = true,
     showLanguageBadge = true,
     maxHeight = "60vh",
     className
   }) => {
+    const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
     const eventBus = useEventBus();
     const { t: _t } = useTranslate();
     const scrollRef = React88.useRef(null);
@@ -10700,21 +10705,22 @@ function CombatLog({
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Box, { ref: scrollRef, overflow: "auto", className: "flex-1 max-h-64", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: "md", className: "text-center opacity-50", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", children: "No events yet" }) }) : /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: "xs", className: "space-y-1", children: visibleEvents.map((event) => {
-      const EventIcon = eventIcons[event.type];
-      const colorClass = eventColors[event.type];
+      const eventType = event.type && event.type in eventIcons ? event.type : "attack";
+      const EventIcon = eventIcons[eventType];
+      const colorClass = eventColors[eventType];
       return /* @__PURE__ */ jsxRuntime.jsxs(
         Box,
         {
           display: "flex",
           padding: "xs",
           rounded: "sm",
-          className: cn("items-start gap-2 hover:bg-[var(--color-muted)] transition-colors", event.type === "death" && "opacity-60"),
+          className: cn("items-start gap-2 hover:bg-[var(--color-muted)] transition-colors", eventType === "death" && "opacity-60"),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("flex-shrink-0 mt-0.5", colorClass), children: /* @__PURE__ */ jsxRuntime.jsx(EventIcon, { className: "h-4 w-4" }) }),
             /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "block", children: event.message }),
-              event.value !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: eventBadgeVariants[event.type], size: "sm", className: "mt-1", children: [
-                event.type === "heal" ? "+" : event.type === "attack" ? "-" : "",
+              event.value !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: eventBadgeVariants[eventType], size: "sm", className: "mt-1", children: [
+                eventType === "heal" ? "+" : eventType === "attack" ? "-" : "",
                 event.value
               ] })
             ] }),
@@ -15426,7 +15432,7 @@ var HeroSection = ({
       src: image.src,
       alt: image.alt,
       className: cn(
-        imagePosition === "right" ? "flex-1 min-h-[300px]" : "w-full min-h-[400px]"
+        imagePosition === "right" ? "w-full max-w-[280px] max-h-[280px]" : "w-full min-h-[400px]"
       )
     }
   );

package/dist/components/index.js

@@ -202,15 +202,15 @@ Icon.displayName = "Icon";
 var variantStyles = {
   primary: [
     "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "border-none",
     "shadow-[var(--shadow-sm)]",
     "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
     "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
   ].join(" "),
   secondary: [
-    "bg-transparent text-[var(--color-accent)]",
-    "border-[length:var(--border-width)] border-[var(--color-accent)]",
-    "hover:bg-[var(--color-accent)] hover:text-white",
+    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
+    "border-none",
+    "hover:bg-[var(--color-muted-foreground)]/15 hover:text-[var(--color-foreground)]",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
@@ -560,14 +560,16 @@ var Checkbox = React88__default.forwardRef(
 Checkbox.displayName = "Checkbox";
 var variantStyles2 = {
   default: [
-    "bg-[var(--color-card)] border-none",
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
     "bg-[var(--color-card)]",
     "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-none",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
@@ -2973,6 +2975,7 @@ var TypewriterText = ({
   className,
   onComplete
 }) => {
+  const safeText = typeof text === "string" ? text : String(text ?? "");
   const [charCount, setCharCount] = useState(0);
   const [started, setStarted] = useState(startDelay === 0);
   const onCompleteRef = useRef(onComplete);
@@ -2996,14 +2999,14 @@ var TypewriterText = ({
   }, [text]);
   useEffect(() => {
     if (!started) return void 0;
-    if (charCount >= text.length) {
+    if (charCount >= safeText.length) {
       onCompleteRef.current?.();
       return void 0;
     }
     const interval = window.setInterval(() => {
       setCharCount((prev) => {
         const next = prev + 1;
-        if (next >= text.length) {
+        if (next >= safeText.length) {
           window.clearInterval(interval);
         }
         return next;
@@ -3013,8 +3016,8 @@ var TypewriterText = ({
       window.clearInterval(interval);
     };
   }, [started, text, speed, charCount]);
-  const isComplete = charCount >= text.length;
-  const displayedText = text.slice(0, charCount);
+  const isComplete = charCount >= safeText.length;
+  const displayedText = safeText.slice(0, charCount);
   return /* @__PURE__ */ jsxs(Typography, { variant: "body", className: cn("inline", className), children: [
     displayedText,
     !isComplete && /* @__PURE__ */ jsx(
@@ -8225,6 +8228,7 @@ WizardNavigation.displayName = "WizardNavigation";
 var MarkdownContent = React88__default.memo(
   ({ content, direction, className }) => {
     const { t: _t } = useTranslate();
+    const safeContent = typeof content === "string" ? content : String(content ?? "");
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -8314,7 +8318,7 @@ var MarkdownContent = React88__default.memo(
                 );
               }
             },
-            children: content
+            children: safeContent
           }
         )
       }
@@ -8325,13 +8329,14 @@ var MarkdownContent = React88__default.memo(
 MarkdownContent.displayName = "MarkdownContent";
 var CodeBlock = React88__default.memo(
   ({
-    code,
+    code: rawCode,
     language = "text",
     showCopyButton = true,
     showLanguageBadge = true,
     maxHeight = "60vh",
     className
   }) => {
+    const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
     const eventBus = useEventBus();
     const { t: _t } = useTranslate();
     const scrollRef = useRef(null);
@@ -10670,21 +10675,22 @@ function CombatLog({
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(Box, { ref: scrollRef, overflow: "auto", className: "flex-1 max-h-64", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsx(Box, { padding: "md", className: "text-center opacity-50", children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "No events yet" }) }) : /* @__PURE__ */ jsx(Box, { padding: "xs", className: "space-y-1", children: visibleEvents.map((event) => {
-      const EventIcon = eventIcons[event.type];
-      const colorClass = eventColors[event.type];
+      const eventType = event.type && event.type in eventIcons ? event.type : "attack";
+      const EventIcon = eventIcons[eventType];
+      const colorClass = eventColors[eventType];
       return /* @__PURE__ */ jsxs(
         Box,
         {
           display: "flex",
           padding: "xs",
           rounded: "sm",
-          className: cn("items-start gap-2 hover:bg-[var(--color-muted)] transition-colors", event.type === "death" && "opacity-60"),
+          className: cn("items-start gap-2 hover:bg-[var(--color-muted)] transition-colors", eventType === "death" && "opacity-60"),
           children: [
             /* @__PURE__ */ jsx(Box, { className: cn("flex-shrink-0 mt-0.5", colorClass), children: /* @__PURE__ */ jsx(EventIcon, { className: "h-4 w-4" }) }),
             /* @__PURE__ */ jsxs(Box, { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "block", children: event.message }),
-              event.value !== void 0 && /* @__PURE__ */ jsxs(Badge, { variant: eventBadgeVariants[event.type], size: "sm", className: "mt-1", children: [
-                event.type === "heal" ? "+" : event.type === "attack" ? "-" : "",
+              event.value !== void 0 && /* @__PURE__ */ jsxs(Badge, { variant: eventBadgeVariants[eventType], size: "sm", className: "mt-1", children: [
+                eventType === "heal" ? "+" : eventType === "attack" ? "-" : "",
                 event.value
               ] })
             ] }),
@@ -15396,7 +15402,7 @@ var HeroSection = ({
       src: image.src,
       alt: image.alt,
       className: cn(
-        imagePosition === "right" ? "flex-1 min-h-[300px]" : "w-full min-h-[400px]"
+        imagePosition === "right" ? "w-full max-w-[280px] max-h-[280px]" : "w-full min-h-[400px]"
       )
     }
   );

package/dist/components/organisms/game/three/index.cjs

@@ -4204,7 +4204,7 @@ var Avl3DCrossWire = ({
   }, [from, to]);
   return /* @__PURE__ */ jsxRuntime.jsxs("group", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("mesh", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("tubeGeometry", { args: [...tubeArgs] }),
+      /* @__PURE__ */ jsxRuntime.jsx("tubeGeometry", { args: tubeArgs }),
       /* @__PURE__ */ jsxRuntime.jsx(
         "meshStandardMaterial",
         {
@@ -4917,7 +4917,7 @@ var Avl3DTransitionArc = ({
           document.body.style.cursor = "auto";
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("tubeGeometry", { args: [...tubeArgs] }),
+          /* @__PURE__ */ jsxRuntime.jsx("tubeGeometry", { args: tubeArgs }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "meshStandardMaterial",
             {

package/dist/components/organisms/game/three/index.js

@@ -4180,7 +4180,7 @@ var Avl3DCrossWire = ({
   }, [from, to]);
   return /* @__PURE__ */ jsxs("group", { children: [
     /* @__PURE__ */ jsxs("mesh", { children: [
-      /* @__PURE__ */ jsx("tubeGeometry", { args: [...tubeArgs] }),
+      /* @__PURE__ */ jsx("tubeGeometry", { args: tubeArgs }),
       /* @__PURE__ */ jsx(
         "meshStandardMaterial",
         {
@@ -4893,7 +4893,7 @@ var Avl3DTransitionArc = ({
           document.body.style.cursor = "auto";
         },
         children: [
-          /* @__PURE__ */ jsx("tubeGeometry", { args: [...tubeArgs] }),
+          /* @__PURE__ */ jsx("tubeGeometry", { args: tubeArgs }),
           /* @__PURE__ */ jsx(
             "meshStandardMaterial",
             {

package/dist/docs/index.cjs

@@ -3041,15 +3041,15 @@ Icon.displayName = "Icon";
 var variantStyles2 = {
   primary: [
     "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "border-none",
     "shadow-[var(--shadow-sm)]",
     "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
     "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
   ].join(" "),
   secondary: [
-    "bg-transparent text-[var(--color-accent)]",
-    "border-[length:var(--border-width)] border-[var(--color-accent)]",
-    "hover:bg-[var(--color-accent)] hover:text-white",
+    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
+    "border-none",
+    "hover:bg-[var(--color-muted-foreground)]/15 hover:text-[var(--color-foreground)]",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
@@ -3176,14 +3176,16 @@ var Button = React4__default.default.forwardRef(
 Button.displayName = "Button";
 var variantStyles3 = {
   default: [
-    "bg-[var(--color-card)] border-none",
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
     "bg-[var(--color-card)]",
     "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-none",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),

package/dist/docs/index.js

@@ -3017,15 +3017,15 @@ Icon.displayName = "Icon";
 var variantStyles2 = {
   primary: [
     "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "border-none",
     "shadow-[var(--shadow-sm)]",
     "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
     "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
   ].join(" "),
   secondary: [
-    "bg-transparent text-[var(--color-accent)]",
-    "border-[length:var(--border-width)] border-[var(--color-accent)]",
-    "hover:bg-[var(--color-accent)] hover:text-white",
+    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
+    "border-none",
+    "hover:bg-[var(--color-muted-foreground)]/15 hover:text-[var(--color-foreground)]",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
@@ -3152,14 +3152,16 @@ var Button = React4.forwardRef(
 Button.displayName = "Button";
 var variantStyles3 = {
   default: [
-    "bg-[var(--color-card)] border-none",
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
     "bg-[var(--color-card)]",
     "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-none",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),

package/dist/marketing/index.cjs

@@ -3041,15 +3041,15 @@ Icon.displayName = "Icon";
 var variantStyles2 = {
   primary: [
     "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "border-none",
     "shadow-[var(--shadow-sm)]",
     "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
     "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
   ].join(" "),
   secondary: [
-    "bg-transparent text-[var(--color-accent)]",
-    "border-[length:var(--border-width)] border-[var(--color-accent)]",
-    "hover:bg-[var(--color-accent)] hover:text-white",
+    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
+    "border-none",
+    "hover:bg-[var(--color-muted-foreground)]/15 hover:text-[var(--color-foreground)]",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
@@ -3240,14 +3240,16 @@ var Badge = React5__default.default.forwardRef(
 Badge.displayName = "Badge";
 var variantStyles4 = {
   default: [
-    "bg-[var(--color-card)] border-none",
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
     "bg-[var(--color-card)]",
     "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-none",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
@@ -3687,7 +3689,7 @@ var HeroSection = ({
       src: image.src,
       alt: image.alt,
       className: cn(
-        imagePosition === "right" ? "flex-1 min-h-[300px]" : "w-full min-h-[400px]"
+        imagePosition === "right" ? "w-full max-w-[280px] max-h-[280px]" : "w-full min-h-[400px]"
       )
     }
   );

package/dist/marketing/index.js

@@ -3017,15 +3017,15 @@ Icon.displayName = "Icon";
 var variantStyles2 = {
   primary: [
     "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "border-none",
     "shadow-[var(--shadow-sm)]",
     "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
     "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
   ].join(" "),
   secondary: [
-    "bg-transparent text-[var(--color-accent)]",
-    "border-[length:var(--border-width)] border-[var(--color-accent)]",
-    "hover:bg-[var(--color-accent)] hover:text-white",
+    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
+    "border-none",
+    "hover:bg-[var(--color-muted-foreground)]/15 hover:text-[var(--color-foreground)]",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
@@ -3216,14 +3216,16 @@ var Badge = React5.forwardRef(
 Badge.displayName = "Badge";
 var variantStyles4 = {
   default: [
-    "bg-[var(--color-card)] border-none",
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
     "bg-[var(--color-card)]",
     "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-none",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
@@ -3663,7 +3665,7 @@ var HeroSection = ({
       src: image.src,
       alt: image.alt,
       className: cn(
-        imagePosition === "right" ? "flex-1 min-h-[300px]" : "w-full min-h-[400px]"
+        imagePosition === "right" ? "w-full max-w-[280px] max-h-[280px]" : "w-full min-h-[400px]"
       )
     }
   );

package/dist/providers/index.cjs

@@ -908,15 +908,15 @@ Typography.displayName = "Typography";
 var variantStyles2 = {
   primary: [
     "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "border-none",
     "shadow-[var(--shadow-sm)]",
     "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
     "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
   ].join(" "),
   secondary: [
-    "bg-transparent text-[var(--color-accent)]",
-    "border-[length:var(--border-width)] border-[var(--color-accent)]",
-    "hover:bg-[var(--color-accent)] hover:text-white",
+    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
+    "border-none",
+    "hover:bg-[var(--color-muted-foreground)]/15 hover:text-[var(--color-foreground)]",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
@@ -1330,14 +1330,16 @@ var Checkbox = React110__namespace.default.forwardRef(
 Checkbox.displayName = "Checkbox";
 var variantStyles4 = {
   default: [
-    "bg-[var(--color-card)] border-none",
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
     "bg-[var(--color-card)]",
     "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-none",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
@@ -2796,6 +2798,7 @@ exposeOnWindow();
 var MarkdownContent = React110__namespace.default.memo(
   ({ content, direction, className }) => {
     const { t: _t } = useTranslate();
+    const safeContent = typeof content === "string" ? content : String(content ?? "");
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
@@ -2885,7 +2888,7 @@ var MarkdownContent = React110__namespace.default.memo(
                 );
               }
             },
-            children: content
+            children: safeContent
           }
         )
       }
@@ -2896,13 +2899,14 @@ var MarkdownContent = React110__namespace.default.memo(
 MarkdownContent.displayName = "MarkdownContent";
 var CodeBlock = React110__namespace.default.memo(
   ({
-    code,
+    code: rawCode,
     language = "text",
     showCopyButton = true,
     showLanguageBadge = true,
     maxHeight = "60vh",
     className
   }) => {
+    const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
     const eventBus = useEventBus();
     const { t: _t } = useTranslate();
     const scrollRef = React110.useRef(null);

package/dist/providers/index.js

@@ -878,15 +878,15 @@ Typography.displayName = "Typography";
 var variantStyles2 = {
   primary: [
     "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "border-none",
     "shadow-[var(--shadow-sm)]",
     "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
     "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
   ].join(" "),
   secondary: [
-    "bg-transparent text-[var(--color-accent)]",
-    "border-[length:var(--border-width)] border-[var(--color-accent)]",
-    "hover:bg-[var(--color-accent)] hover:text-white",
+    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
+    "border-none",
+    "hover:bg-[var(--color-muted-foreground)]/15 hover:text-[var(--color-foreground)]",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
@@ -1300,14 +1300,16 @@ var Checkbox = React110__default.forwardRef(
 Checkbox.displayName = "Checkbox";
 var variantStyles4 = {
   default: [
-    "bg-[var(--color-card)] border-none",
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
     "bg-[var(--color-card)]",
     "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-none",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
@@ -2766,6 +2768,7 @@ exposeOnWindow();
 var MarkdownContent = React110__default.memo(
   ({ content, direction, className }) => {
     const { t: _t } = useTranslate();
+    const safeContent = typeof content === "string" ? content : String(content ?? "");
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -2855,7 +2858,7 @@ var MarkdownContent = React110__default.memo(
                 );
               }
             },
-            children: content
+            children: safeContent
           }
         )
       }
@@ -2866,13 +2869,14 @@ var MarkdownContent = React110__default.memo(
 MarkdownContent.displayName = "MarkdownContent";
 var CodeBlock = React110__default.memo(
   ({
-    code,
+    code: rawCode,
     language = "text",
     showCopyButton = true,
     showLanguageBadge = true,
     maxHeight = "60vh",
     className
   }) => {
+    const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
     const eventBus = useEventBus();
     const { t: _t } = useTranslate();
     const scrollRef = useRef(null);

package/dist/runtime/index.cjs

@@ -2614,15 +2614,15 @@ Drawer.displayName = "Drawer";
 var variantStyles2 = {
   primary: [
     "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "border-none",
     "shadow-[var(--shadow-sm)]",
     "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
     "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
   ].join(" "),
   secondary: [
-    "bg-transparent text-[var(--color-accent)]",
-    "border-[length:var(--border-width)] border-[var(--color-accent)]",
-    "hover:bg-[var(--color-accent)] hover:text-white",
+    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
+    "border-none",
+    "hover:bg-[var(--color-muted-foreground)]/15 hover:text-[var(--color-foreground)]",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
@@ -3132,14 +3132,16 @@ var Checkbox = React114__namespace.default.forwardRef(
 Checkbox.displayName = "Checkbox";
 var variantStyles4 = {
   default: [
-    "bg-[var(--color-card)] border-none",
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
     "bg-[var(--color-card)]",
     "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-none",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
@@ -4826,6 +4828,7 @@ var TypewriterText = ({
   className,
   onComplete
 }) => {
+  const safeText = typeof text === "string" ? text : String(text ?? "");
   const [charCount, setCharCount] = React114.useState(0);
   const [started, setStarted] = React114.useState(startDelay === 0);
   const onCompleteRef = React114.useRef(onComplete);
@@ -4849,14 +4852,14 @@ var TypewriterText = ({
   }, [text]);
   React114.useEffect(() => {
     if (!started) return void 0;
-    if (charCount >= text.length) {
+    if (charCount >= safeText.length) {
       onCompleteRef.current?.();
       return void 0;
     }
     const interval = window.setInterval(() => {
       setCharCount((prev) => {
         const next = prev + 1;
-        if (next >= text.length) {
+        if (next >= safeText.length) {
           window.clearInterval(interval);
         }
         return next;
@@ -4866,8 +4869,8 @@ var TypewriterText = ({
       window.clearInterval(interval);
     };
   }, [started, text, speed, charCount]);
-  const isComplete = charCount >= text.length;
-  const displayedText = text.slice(0, charCount);
+  const isComplete = charCount >= safeText.length;
+  const displayedText = safeText.slice(0, charCount);
   return /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "body", className: cn("inline", className), children: [
     displayedText,
     !isComplete && /* @__PURE__ */ jsxRuntime.jsx(
@@ -9253,6 +9256,7 @@ ScaledDiagram.displayName = "ScaledDiagram";
 var MarkdownContent = React114__namespace.default.memo(
   ({ content, direction, className }) => {
     const { t: _t } = useTranslate();
+    const safeContent = typeof content === "string" ? content : String(content ?? "");
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
       {
@@ -9342,7 +9346,7 @@ var MarkdownContent = React114__namespace.default.memo(
                 );
               }
             },
-            children: content
+            children: safeContent
           }
         )
       }
@@ -9353,13 +9357,14 @@ var MarkdownContent = React114__namespace.default.memo(
 MarkdownContent.displayName = "MarkdownContent";
 var CodeBlock = React114__namespace.default.memo(
   ({
-    code,
+    code: rawCode,
     language = "text",
     showCopyButton = true,
     showLanguageBadge = true,
     maxHeight = "60vh",
     className
   }) => {
+    const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
     const eventBus = useEventBus();
     const { t: _t } = useTranslate();
     const scrollRef = React114.useRef(null);
@@ -15301,21 +15306,22 @@ function CombatLog({
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Box, { ref: scrollRef, overflow: "auto", className: "flex-1 max-h-64", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: "md", className: "text-center opacity-50", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", children: "No events yet" }) }) : /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: "xs", className: "space-y-1", children: visibleEvents.map((event) => {
-      const EventIcon = eventIcons[event.type];
-      const colorClass = eventColors[event.type];
+      const eventType = event.type && event.type in eventIcons ? event.type : "attack";
+      const EventIcon = eventIcons[eventType];
+      const colorClass = eventColors[eventType];
       return /* @__PURE__ */ jsxRuntime.jsxs(
         Box,
         {
           display: "flex",
           padding: "xs",
           rounded: "sm",
-          className: cn("items-start gap-2 hover:bg-[var(--color-muted)] transition-colors", event.type === "death" && "opacity-60"),
+          className: cn("items-start gap-2 hover:bg-[var(--color-muted)] transition-colors", eventType === "death" && "opacity-60"),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("flex-shrink-0 mt-0.5", colorClass), children: /* @__PURE__ */ jsxRuntime.jsx(EventIcon, { className: "h-4 w-4" }) }),
             /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "block", children: event.message }),
-              event.value !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: eventBadgeVariants[event.type], size: "sm", className: "mt-1", children: [
-                event.type === "heal" ? "+" : event.type === "attack" ? "-" : "",
+              event.value !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: eventBadgeVariants[eventType], size: "sm", className: "mt-1", children: [
+                eventType === "heal" ? "+" : eventType === "attack" ? "-" : "",
                 event.value
               ] })
             ] }),

package/dist/runtime/index.js

@@ -2584,15 +2584,15 @@ Drawer.displayName = "Drawer";
 var variantStyles2 = {
   primary: [
     "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "border-none",
     "shadow-[var(--shadow-sm)]",
     "hover:bg-[var(--color-primary-hover)] hover:shadow-[var(--shadow-hover)]",
     "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
   ].join(" "),
   secondary: [
-    "bg-transparent text-[var(--color-accent)]",
-    "border-[length:var(--border-width)] border-[var(--color-accent)]",
-    "hover:bg-[var(--color-accent)] hover:text-white",
+    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
+    "border-none",
+    "hover:bg-[var(--color-muted-foreground)]/15 hover:text-[var(--color-foreground)]",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [
@@ -3102,14 +3102,16 @@ var Checkbox = React114__default.forwardRef(
 Checkbox.displayName = "Checkbox";
 var variantStyles4 = {
   default: [
-    "bg-[var(--color-card)] border-none",
+    "bg-[var(--color-card)]",
+    "border-[length:var(--border-width)] border-[var(--color-border)]",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
   bordered: [
     "bg-[var(--color-card)]",
     "border-[length:var(--border-width)] border-[var(--color-border)]",
-    "shadow-none",
+    "shadow-[var(--shadow-sm)]",
     "transition-all duration-[var(--transition-normal)]",
     "hover:shadow-[var(--shadow-hover)] hover:-translate-y-0.5"
   ].join(" "),
@@ -4796,6 +4798,7 @@ var TypewriterText = ({
   className,
   onComplete
 }) => {
+  const safeText = typeof text === "string" ? text : String(text ?? "");
   const [charCount, setCharCount] = useState(0);
   const [started, setStarted] = useState(startDelay === 0);
   const onCompleteRef = useRef(onComplete);
@@ -4819,14 +4822,14 @@ var TypewriterText = ({
   }, [text]);
   useEffect(() => {
     if (!started) return void 0;
-    if (charCount >= text.length) {
+    if (charCount >= safeText.length) {
       onCompleteRef.current?.();
       return void 0;
     }
     const interval = window.setInterval(() => {
       setCharCount((prev) => {
         const next = prev + 1;
-        if (next >= text.length) {
+        if (next >= safeText.length) {
           window.clearInterval(interval);
         }
         return next;
@@ -4836,8 +4839,8 @@ var TypewriterText = ({
       window.clearInterval(interval);
     };
   }, [started, text, speed, charCount]);
-  const isComplete = charCount >= text.length;
-  const displayedText = text.slice(0, charCount);
+  const isComplete = charCount >= safeText.length;
+  const displayedText = safeText.slice(0, charCount);
   return /* @__PURE__ */ jsxs(Typography, { variant: "body", className: cn("inline", className), children: [
     displayedText,
     !isComplete && /* @__PURE__ */ jsx(
@@ -9223,6 +9226,7 @@ ScaledDiagram.displayName = "ScaledDiagram";
 var MarkdownContent = React114__default.memo(
   ({ content, direction, className }) => {
     const { t: _t } = useTranslate();
+    const safeContent = typeof content === "string" ? content : String(content ?? "");
     return /* @__PURE__ */ jsx(
       Box,
       {
@@ -9312,7 +9316,7 @@ var MarkdownContent = React114__default.memo(
                 );
               }
             },
-            children: content
+            children: safeContent
           }
         )
       }
@@ -9323,13 +9327,14 @@ var MarkdownContent = React114__default.memo(
 MarkdownContent.displayName = "MarkdownContent";
 var CodeBlock = React114__default.memo(
   ({
-    code,
+    code: rawCode,
     language = "text",
     showCopyButton = true,
     showLanguageBadge = true,
     maxHeight = "60vh",
     className
   }) => {
+    const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
     const eventBus = useEventBus();
     const { t: _t } = useTranslate();
     const scrollRef = useRef(null);
@@ -15271,21 +15276,22 @@ function CombatLog({
       ] })
     ] }) }),
     /* @__PURE__ */ jsx(Box, { ref: scrollRef, overflow: "auto", className: "flex-1 max-h-64", children: visibleEvents.length === 0 ? /* @__PURE__ */ jsx(Box, { padding: "md", className: "text-center opacity-50", children: /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "No events yet" }) }) : /* @__PURE__ */ jsx(Box, { padding: "xs", className: "space-y-1", children: visibleEvents.map((event) => {
-      const EventIcon = eventIcons[event.type];
-      const colorClass = eventColors[event.type];
+      const eventType = event.type && event.type in eventIcons ? event.type : "attack";
+      const EventIcon = eventIcons[eventType];
+      const colorClass = eventColors[eventType];
       return /* @__PURE__ */ jsxs(
         Box,
         {
           display: "flex",
           padding: "xs",
           rounded: "sm",
-          className: cn("items-start gap-2 hover:bg-[var(--color-muted)] transition-colors", event.type === "death" && "opacity-60"),
+          className: cn("items-start gap-2 hover:bg-[var(--color-muted)] transition-colors", eventType === "death" && "opacity-60"),
           children: [
             /* @__PURE__ */ jsx(Box, { className: cn("flex-shrink-0 mt-0.5", colorClass), children: /* @__PURE__ */ jsx(EventIcon, { className: "h-4 w-4" }) }),
             /* @__PURE__ */ jsxs(Box, { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "block", children: event.message }),
-              event.value !== void 0 && /* @__PURE__ */ jsxs(Badge, { variant: eventBadgeVariants[event.type], size: "sm", className: "mt-1", children: [
-                event.type === "heal" ? "+" : event.type === "attack" ? "-" : "",
+              event.value !== void 0 && /* @__PURE__ */ jsxs(Badge, { variant: eventBadgeVariants[eventType], size: "sm", className: "mt-1", children: [
+                eventType === "heal" ? "+" : eventType === "attack" ? "-" : "",
                 event.value
               ] })
             ] }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "2.24.3",
+  "version": "2.24.5",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",

package/themes/wireframe.css

@@ -138,11 +138,11 @@
     --color-muted: #262626;
     --color-muted-foreground: #a3a3a3;
 
-    --color-background: #0a0a0a;
-    --color-foreground: #ffffff;
-    --color-card: #1a1a1a;
-    --color-card-foreground: #ffffff;
-    --color-surface: #262626;
+    --color-background: #111117;
+    --color-foreground: #f5f5f5;
+    --color-card: #1c1c22;
+    --color-card-foreground: #f5f5f5;
+    --color-surface: #28282e;
     --color-border: #ffffff;
     --color-input: #ffffff;
     --color-ring: #ffffff;