@almadar/ui 5.2.0 → 5.2.1

package/dist/components/index.cjs

@@ -1861,7 +1861,7 @@ var init_Icon = __esm({
     sizeClasses = {
       xs: "w-3 h-3",
       sm: "w-4 h-4",
-      md: "w-5 h-5",
+      md: "h-icon-default w-icon-default",
       lg: "w-6 h-6",
       xl: "w-8 h-8"
     };
@@ -2006,14 +2006,14 @@ var init_Button = __esm({
     };
     variantStyles.destructive = variantStyles.danger;
     sizeStyles = {
-      sm: "px-3 py-1.5 text-sm",
-      md: "px-4 py-2 text-sm",
-      lg: "px-6 py-3 text-base"
+      sm: "h-button-sm px-3 text-sm",
+      md: "h-button-md px-4 text-sm",
+      lg: "h-button-lg px-6 text-base"
     };
     iconSizeStyles = {
-      sm: "h-3.5 w-3.5",
+      sm: "h-icon-default w-icon-default",
       md: "h-icon-default w-icon-default",
-      lg: "h-5 w-5"
+      lg: "h-icon-default w-icon-default"
     };
     exports.Button = React80__namespace.default.forwardRef(
       ({
@@ -2051,7 +2051,7 @@ var init_Button = __esm({
             disabled: disabled || isLoading,
             className: cn(
               "inline-flex items-center justify-center gap-2",
-              "font-[var(--font-weight-medium)]",
+              "font-medium",
               "rounded-sm",
               "cursor-pointer",
               "transition-all duration-[var(--transition-normal)]",
@@ -2101,10 +2101,11 @@ var init_Input = __esm({
         const type = inputType || htmlType || "text";
         const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "h-icon-default w-icon-default" });
         const showClearButton = clearable && value && String(value).length > 0;
+        const isMultiline = type === "textarea";
         const baseClassName = cn(
           "block w-full rounded-sm transition-all duration-[var(--transition-fast)]",
           "border-[length:var(--border-width-thin)] border-border",
-          "px-3 py-2 text-sm",
+          isMultiline ? "px-3 py-2 text-sm" : "h-input-md px-3 text-sm",
           "bg-card hover:bg-muted focus:bg-card",
           "text-foreground placeholder:text-muted-foreground",
           "focus:outline-none focus:ring-1 focus:ring-ring focus:border-ring",
@@ -2156,7 +2157,7 @@ var init_Input = __esm({
               checked: props.checked,
               onChange,
               className: cn(
-                "h-4 w-4 rounded-sm",
+                "h-icon-default w-icon-default rounded-sm",
                 "border-border",
                 "text-primary focus:ring-ring",
                 "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -2238,7 +2239,7 @@ var init_Textarea = __esm({
               "placeholder:text-[var(--color-placeholder)]",
               "focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-ring",
               "disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed",
-              "resize-y min-h-[80px]",
+              "resize-y min-h-20",
               error ? "border-error focus:border-error" : "border-border focus:border-primary",
               className
             ),
@@ -2341,21 +2342,21 @@ var init_Card = __esm({
         "border-[length:var(--border-width)] border-border",
         "shadow-elevation-card",
         "transition-all duration-[var(--transition-normal)]",
-        "hover:shadow-elevation-dialog hover:-translate-y-0.5"
+        "hover:shadow-elevation-dialog hover:translate-y-[var(--hover-translate-y)]"
       ].join(" "),
       bordered: [
         "bg-card",
         "border-[length:var(--border-width)] border-border",
         "shadow-elevation-card",
         "transition-all duration-[var(--transition-normal)]",
-        "hover:shadow-elevation-dialog hover:-translate-y-0.5"
+        "hover:shadow-elevation-dialog hover:translate-y-[var(--hover-translate-y)]"
       ].join(" "),
       elevated: [
         "bg-card",
         "border-[length:var(--border-width)] border-border",
         "shadow",
         "transition-all duration-[var(--transition-normal)]",
-        "hover:shadow-elevation-dialog hover:-translate-y-0.5"
+        "hover:shadow-elevation-dialog hover:translate-y-[var(--hover-translate-y)]"
       ].join(" "),
       // Interactive variant with theme-specific hover effects
       interactive: [
@@ -2405,7 +2406,7 @@ var init_Card = __esm({
             ...props,
             children: [
               (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-                title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg text-card-foreground font-[var(--font-weight-bold)]", children: title }),
+                title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg text-card-foreground font-bold", children: title }),
                 subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mt-1", children: subtitle })
               ] }),
               children
@@ -2423,7 +2424,7 @@ var init_Card = __esm({
         ref,
         className: cn(
           "text-lg text-card-foreground",
-          "font-[var(--font-weight-bold)]",
+          "font-bold",
           className
         ),
         ...props
@@ -2489,7 +2490,11 @@ var init_Badge = __esm({
     };
     exports.Badge = React80__namespace.default.forwardRef(
       ({ className, variant = "default", size = "sm", amount, label, icon, children, onRemove, removeLabel, ...props }, ref) => {
-        const iconSizes3 = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
+        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;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
@@ -2648,7 +2653,7 @@ var init_Spinner = __esm({
     init_Icon();
     sizeStyles4 = {
       xs: "h-3 w-3",
-      sm: "h-4 w-4",
+      sm: "h-icon-default w-icon-default",
       md: "h-6 w-6",
       lg: "h-8 w-8"
     };
@@ -4471,10 +4476,9 @@ var init_LawReferenceTooltip = __esm({
               {
                 padding: "sm",
                 rounded: "lg",
-                shadow: "lg",
                 position: "absolute",
                 className: cn(
-                  "z-50 w-64 bg-foreground text-background",
+                  "z-50 w-64 bg-foreground text-background shadow-elevation-popover",
                   positionStyles2[position]
                 ),
                 role: "tooltip",
@@ -4485,7 +4489,7 @@ var init_LawReferenceTooltip = __esm({
                       {
                         variant: "label",
                         weight: "semibold",
-                        className: "text-amber-400",
+                        className: "text-warning",
                         children: [
                           reference.law,
                           " ",
@@ -4517,7 +4521,7 @@ var init_LawReferenceTooltip = __esm({
                       {
                         as: "a",
                         variant: "caption",
-                        className: "text-blue-400 hover:text-blue-300 underline cursor-pointer",
+                        className: "text-info hover:text-info/80 underline cursor-pointer",
                         href: reference.link,
                         target: "_blank",
                         rel: "noopener noreferrer",
@@ -4923,12 +4927,12 @@ var init_RangeSlider = __esm({
                       "shadow-sm",
                       "pointer-events-none",
                       "transition-transform duration-100",
-                      isDragging && "scale-110",
+                      isDragging && "scale-[var(--hover-scale)]",
                       thumbSizes[size]
                     ),
                     style: {
                       top: "50%",
-                      transform: `translateY(-50%) translateX(-50%)${isDragging ? " scale(1.1)" : ""}`,
+                      transform: `translateY(-50%) translateX(-50%)${isDragging ? " scale(var(--hover-scale))" : ""}`,
                       left: `${percentage}%`
                     }
                   }
@@ -9262,7 +9266,7 @@ var init_ActionButton = __esm({
     init_Icon();
     sizeMap = {
       sm: { button: "px-3 py-1.5 text-xs", hotkey: "text-[9px] px-1", icon: "text-xs" },
-      md: { button: "px-4 py-2 text-sm", hotkey: "text-[10px] px-1.5", icon: "text-sm" },
+      md: { button: "px-4 py-2 text-sm", hotkey: "text-xs px-1.5", icon: "text-sm" },
       lg: { button: "px-5 py-2.5 text-base", hotkey: "text-xs px-2", icon: "text-base" }
     };
     variantStyles7 = {
@@ -20308,7 +20312,7 @@ var init_ComboCounter = __esm({
   "components/atoms/game/ComboCounter.tsx"() {
     init_cn();
     sizeMap4 = {
-      sm: { combo: "text-lg", label: "text-[10px]", multiplier: "text-xs" },
+      sm: { combo: "text-lg", label: "text-xs", multiplier: "text-xs" },
       md: { combo: "text-2xl", label: "text-xs", multiplier: "text-sm" },
       lg: { combo: "text-4xl", label: "text-sm", multiplier: "text-base" }
     };
@@ -20729,7 +20733,7 @@ function ItemSlot({
             className: cn(
               "absolute -bottom-1 -right-1 flex items-center justify-center",
               "min-w-[18px] h-[18px] rounded-full px-1",
-              "bg-[var(--color-surface,#374151)] border border-gray-500 text-[10px] font-bold text-[var(--color-foreground)]"
+              "bg-[var(--color-surface,#374151)] border border-gray-500 text-xs font-bold text-[var(--color-foreground)]"
             ),
             children: quantity
           }
@@ -21307,7 +21311,7 @@ var init_DashboardLayout = __esm({
                                   {
                                     as: "span",
                                     className: cn(
-                                      "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
+                                      "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 rounded-full text-xs font-semibold text-white flex items-center justify-center",
                                       action.variant === "danger" ? "bg-error" : action.variant === "primary" ? "bg-primary" : "bg-foreground"
                                     ),
                                     children: action.badge
@@ -21330,7 +21334,7 @@ var init_DashboardLayout = __esm({
                                   exports.Box,
                                   {
                                     as: "span",
-                                    className: "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 bg-error rounded-full text-[10px] font-semibold text-white flex items-center justify-center",
+                                    className: "absolute -top-0.5 -right-0.5 min-w-[18px] h-[18px] px-1 bg-error rounded-full text-xs font-semibold text-white flex items-center justify-center",
                                     children: unreadCount > 99 ? "99+" : unreadCount
                                   }
                                 )
@@ -21532,14 +21536,14 @@ var init_DashboardLayout = __esm({
               {
                 variant: "caption",
                 className: cn(
-                  "text-[10px] leading-tight truncate max-w-full",
+                  "text-xs leading-tight truncate max-w-full",
                   isActive ? "text-primary font-medium" : "text-muted-foreground"
                 ),
                 as: "span",
                 children: item.label
               }
             ),
-            item.badge && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: isActive ? "primary" : "default", size: "sm", className: "text-[8px] px-1 py-0 min-w-0", children: item.badge })
+            item.badge && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: isActive ? "primary" : "default", size: "sm", className: "text-xs px-1 py-0 min-w-0", children: item.badge })
           ]
         }
       );
@@ -23129,7 +23133,7 @@ var init_FilterGroup = __esm({
         return /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "md", align: "center", className: cn("flex-wrap", className), children: [
           showIcon && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "filter", className: "h-4 w-4 text-muted-foreground" }),
           filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "xs", align: "center", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-[var(--font-weight-medium)] text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-muted-foreground", children: [
               filter.label,
               ":"
             ] }),
@@ -23145,7 +23149,7 @@ var init_FilterGroup = __esm({
                       type: "button",
                       onClick: () => handleFilterSelect(filter.field, null),
                       className: cn(
-                        "px-3 py-1.5 text-sm font-[var(--font-weight-medium)] transition-all duration-[var(--transition-fast)]",
+                        "px-3 py-1.5 text-sm font-medium transition-all duration-[var(--transition-fast)]",
                         !selectedValues[filter.field] ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground hover:bg-muted"
                       ),
                       children: "All"
@@ -23157,7 +23161,7 @@ var init_FilterGroup = __esm({
                       type: "button",
                       onClick: () => handleFilterSelect(filter.field, option),
                       className: cn(
-                        "px-3 py-1.5 text-sm font-[var(--font-weight-medium)] transition-all duration-[var(--transition-fast)]",
+                        "px-3 py-1.5 text-sm font-medium transition-all duration-[var(--transition-fast)]",
                         "border-l-[length:var(--border-width)] border-border",
                         selectedValues[filter.field] === option ? "bg-primary text-primary-foreground" : "bg-card text-muted-foreground hover:bg-muted"
                       ),
@@ -23185,10 +23189,10 @@ var init_FilterGroup = __esm({
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-4", className), children: [
           showIcon && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "filter", className: "h-4 w-4" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-[var(--font-weight-bold)] uppercase tracking-wide", children: "Filters" })
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: "Filters" })
           ] }),
           filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-[var(--font-weight-bold)] text-muted-foreground uppercase tracking-wide", children: filter.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-bold text-muted-foreground uppercase tracking-wide", children: filter.label }),
             resolveFilterType(filter) === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
               exports.Input,
               {
@@ -23370,12 +23374,12 @@ var init_FilterGroup = __esm({
                 className: "text-muted-foreground",
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "filter", className: "h-4 w-4" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-[var(--font-weight-bold)] uppercase tracking-wide", children: "Filters" })
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-bold uppercase tracking-wide", children: "Filters" })
                 ]
               }
             ),
             filters.map((filter) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-[var(--font-weight-bold)] text-muted-foreground uppercase tracking-wide", children: filter.label }),
+              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-bold text-muted-foreground uppercase tracking-wide", children: filter.label }),
               resolveFilterType(filter) === "date" ? /* @__PURE__ */ jsxRuntime.jsx(
                 exports.Input,
                 {
@@ -26038,7 +26042,7 @@ function EnemyPlate({
             exports.Typography,
             {
               variant: "caption",
-              className: "font-mono tabular-nums text-gray-400 text-[10px] shrink-0",
+              className: "font-mono tabular-nums text-muted-foreground text-xs shrink-0",
               children: [
                 health,
                 "/",
@@ -26115,7 +26119,7 @@ function UnitCommandBar({
           exports.Typography,
           {
             variant: "caption",
-            className: "text-gray-500 text-[10px] font-mono",
+            className: "text-muted-foreground text-xs font-mono",
             children: command.hotkey
           }
         )
@@ -33674,16 +33678,16 @@ var init_ModuleCard = __esm({
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "target", position: react.Position.Left, className: "!w-2.5 !h-2.5 !bg-orange-400" }),
             /* @__PURE__ */ jsxRuntime.jsx(react.Handle, { type: "source", position: react.Position.Right, className: "!w-2.5 !h-2.5 !bg-orange-400" }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[15px] font-bold text-[var(--color-foreground)]", children: orbitalName }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 border-b border-[var(--color-border)]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-bold text-[var(--color-foreground)]", children: orbitalName }) }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `px-3 py-2 border-b border-[var(--color-border)] ${PERSISTENCE_BORDER[persistence] ?? ""}`, children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 mb-1.5", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 18, height: 18, viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx(AvlEntity, { x: 10, y: 10, r: 8, persistence }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-semibold text-[var(--color-foreground)]", children: entityName }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-[10px] opacity-50", title: persistence, children: PERSISTENCE_ICON[persistence] ?? "" })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold text-[var(--color-foreground)]", children: entityName }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-xs opacity-50", title: persistence, children: PERSISTENCE_ICON[persistence] ?? "" })
               ] }),
               fields.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid gap-x-3 gap-y-0.5`, style: { gridTemplateColumns: `repeat(${cols}, 1fr)` }, children: fields.map((f3) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 14, height: 14, viewBox: "0 0 16 16", children: /* @__PURE__ */ jsxRuntime.jsx(AvlFieldType, { x: 8, y: 8, kind: toFieldKind(f3.type), size: 6 }) }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-[var(--color-muted-foreground)] truncate", children: f3.name })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-[var(--color-muted-foreground)] truncate", children: f3.name })
               ] }, f3.name)) })
             ] }),
             traits2.map((trait) => {
@@ -33691,7 +33695,7 @@ var init_ModuleCard = __esm({
               const traitEmits = externalLinks.filter((l) => l.direction === "out" && l.traitName === trait.name);
               const traitListens = externalLinks.filter((l) => l.direction === "in" && l.traitName === trait.name);
               return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2 border-b border-[var(--color-border)]", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[12px] font-semibold text-[var(--color-foreground)] mb-1", children: trait.name }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-semibold text-[var(--color-foreground)] mb-1", children: trait.name }),
                 detail && /* @__PURE__ */ jsxRuntime.jsx(MiniStateMachine, { data: detail, className: "mb-1" }),
                 (traitEmits.length > 0 || traitListens.length > 0) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-[9px] mt-1", children: [
                   traitListens.map((l) => /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: CONNECTION_COLORS.emitListen.color }, children: [
@@ -33710,7 +33714,7 @@ var init_ModuleCard = __esm({
             }),
             pages.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-1.5 flex items-center gap-2 flex-wrap", children: pages.map((p2) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", children: [
               /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 10, height: 10, viewBox: "0 0 12 12", children: /* @__PURE__ */ jsxRuntime.jsx(AvlPage, { x: 6, y: 6, size: 5 }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-mono text-[var(--color-muted-foreground)]", children: p2.route })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono text-[var(--color-muted-foreground)]", children: p2.route })
             ] }, p2.name)) })
           ]
         }
@@ -38256,7 +38260,7 @@ var init_List = __esm({
                       {
                         as: "h3",
                         className: cn(
-                          "text-[15px] font-semibold text-foreground truncate flex-1",
+                          "text-base font-semibold text-foreground truncate flex-1",
                           "tracking-tight leading-snug",
                           item.completed && "line-through text-muted-foreground"
                         ),
@@ -38280,7 +38284,7 @@ var init_List = __esm({
                       )
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { className: "flex items-center gap-6 text-[13px] font-medium text-muted-foreground", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { className: "flex items-center gap-6 text-sm font-medium text-muted-foreground", children: [
                     dateFields.slice(0, 1).map((field) => {
                       const value = item._fields?.[field];
                       if (!value) return null;
@@ -38676,7 +38680,7 @@ var init_MediaGallery = __esm({
                         }
                       ),
                       item.caption && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/60 to-transparent", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "text-white truncate", children: item.caption }) }),
-                      selectable && isSelected && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "absolute top-2 right-2 w-5 h-5 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "text-white text-[10px]", children: "\u2713" }) })
+                      selectable && isSelected && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "absolute top-2 right-2 w-5 h-5 rounded-full bg-primary flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: "text-white text-xs", children: "\u2713" }) })
                     ]
                   },
                   item.id
@@ -40191,13 +40195,13 @@ function WalkMinimap() {
       })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "px-2 py-1 border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "sm", className: "items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "caption", className: "text-[10px] font-mono text-green-500", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "caption", className: "text-xs font-mono text-green-500", children: [
         "Engine: ",
         engineCount,
         "/",
         totalTransitions
       ] }),
-      domCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "caption", className: "text-[10px] font-mono text-cyan-500", children: [
+      domCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "caption", className: "text-xs font-mono text-cyan-500", children: [
         "DOM: ",
         domCount
       ] }),
@@ -40711,7 +40715,7 @@ function VerificationTab({ checks, summary }) {
               /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", className: "break-words", children: check.label }),
               check.details && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", className: "text-gray-500 break-words", children: check.details })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", className: "text-gray-400 font-mono text-[10px] shrink-0", children: new Date(check.updatedAt).toLocaleTimeString("en-US", {
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", className: "text-muted-foreground font-mono text-xs shrink-0", children: new Date(check.updatedAt).toLocaleTimeString("en-US", {
               hour12: false,
               hour: "2-digit",
               minute: "2-digit",
@@ -40744,7 +40748,7 @@ var init_VerificationTab = __esm({
 function EffectBadge({ effect }) {
   const variant = EFFECT_STATUS_VARIANT[effect.status] || "default";
   const icon = effect.status === "executed" ? "\u2713" : effect.status === "failed" ? "\u2717" : "-";
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-[10px] font-mono bg-gray-100 dark:bg-gray-700 rounded px-1.5 py-0.5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 text-xs font-mono bg-gray-100 dark:bg-gray-700 rounded px-1.5 py-0.5", children: [
     /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant, size: "sm", className: "!text-[9px] !px-1 !py-0", children: icon }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-600 dark:text-gray-400", children: effect.type }),
     effect.error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 truncate max-w-[120px]", title: effect.error, children: effect.error })
@@ -40848,8 +40852,8 @@ function TransitionTimeline({ transitions }) {
                 ] }),
                 isExpanded && trace.effects.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-2 mt-1 mb-2 pl-2 border-l border-gray-200 dark:border-gray-700 space-y-1", children: trace.effects.map((effect, eIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(EffectBadge, { effect }),
-                  effect.args.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", className: "text-gray-400 font-mono text-[10px] truncate max-w-[200px]", children: JSON.stringify(effect.args) }),
-                  effect.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "small", className: "text-gray-400 text-[10px]", children: [
+                  effect.args.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", className: "text-muted-foreground font-mono text-xs truncate max-w-[200px]", children: JSON.stringify(effect.args) }),
+                  effect.durationMs !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs(exports.Typography, { variant: "small", className: "text-muted-foreground text-xs", children: [
                     effect.durationMs,
                     "ms"
                   ] })
@@ -41136,7 +41140,7 @@ var init_RuntimeDebugger = __esm({
 });
 function ServerResponseRow({ sr }) {
   const entityEntries = Object.entries(sr.dataEntities);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-4 pl-2 border-l border-purple-500/30 py-0.5 text-[10px] font-mono", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-4 pl-2 border-l border-purple-500/30 py-0.5 text-xs font-mono", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: sr.success ? "text-green-600 dark:text-green-400" : "text-red-600 dark:text-red-400", children: [
         sr.success ? "\u2713" : "\u2717",
@@ -41193,7 +41197,7 @@ function TransitionRow({ trace }) {
       ] })
     ] }),
     trace.effects.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1 ml-6 mt-0.5", children: trace.effects.map((eff, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
-      "px-1 rounded text-[10px]",
+      "px-1 rounded text-xs",
       eff.status === "executed" ? "bg-green-500/15 text-green-600 dark:text-green-400" : eff.status === "failed" ? "bg-red-500/15 text-red-600 dark:text-red-400" : "bg-yellow-500/15 text-yellow-600 dark:text-yellow-400"
     ), children: [
       eff.status === "executed" ? "\u2713" : eff.status === "failed" ? "\u2717" : "-",
@@ -44106,7 +44110,7 @@ function StatusEffect({
         children: stacks
       }
     ),
-    label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-gray-400 mt-0.5 text-center whitespace-nowrap", children: label })
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground mt-0.5 text-center whitespace-nowrap", children: label })
   ] });
 }
 var sizeMap16, variantStyles9;
@@ -44114,8 +44118,8 @@ var init_StatusEffect = __esm({
   "components/atoms/game/StatusEffect.tsx"() {
     init_cn();
     sizeMap16 = {
-      sm: { container: "w-8 h-8", icon: "text-sm", badge: "text-[10px] -top-1 -right-1 w-4 h-4", timer: "text-[9px]" },
-      md: { container: "w-10 h-10", icon: "text-base", badge: "text-xs -top-1 -right-1 w-5 h-5", timer: "text-[10px]" },
+      sm: { container: "w-8 h-8", icon: "text-sm", badge: "text-xs -top-1 -right-1 w-4 h-4", timer: "text-[9px]" },
+      md: { container: "w-10 h-10", icon: "text-base", badge: "text-xs -top-1 -right-1 w-5 h-5", timer: "text-xs" },
       lg: { container: "w-12 h-12", icon: "text-lg", badge: "text-sm -top-1.5 -right-1.5 w-6 h-6", timer: "text-xs" }
     };
     variantStyles9 = {
@@ -45501,7 +45505,7 @@ var init_XPBar = __esm({
   "components/atoms/game/XPBar.tsx"() {
     init_cn();
     sizeMap18 = {
-      sm: { bar: "h-2", text: "text-[10px]", badge: "text-[10px] px-1.5 py-0.5" },
+      sm: { bar: "h-2", text: "text-xs", badge: "text-xs px-1.5 py-0.5" },
       md: { bar: "h-3", text: "text-xs", badge: "text-xs px-2 py-0.5" },
       lg: { bar: "h-4", text: "text-sm", badge: "text-sm px-2.5 py-1" }
     };