@buoy-gg/shared-ui 7.0.40 → 7.0.42

package/lib/module/ui/floating/onboardingConstants.js

@@ -1,64 +1 @@
-"use strict";
-
-import { Dimensions } from "react-native";
-
-/**
- * Shared constants for onboarding tooltip positioning
- * These ensure the floating menu aligns perfectly under the tooltip arrow
- * All positions are calculated dynamically based on screen size
- */
-
-// Arrow dimensions (relative positioning)
-export const ARROW_BOTTOM_OFFSET = -40; // Arrow extends below tooltip
-export const ARROW_HEIGHT = 20; // borderTopWidth of arrow
-export const SPACING_GAP = 10; // Gap between arrow tip and target element
-
-/**
- * Calculate the center Y position of the screen
- * This is used to vertically center the onboarding UI
- *
- * @returns Y coordinate at the center of the screen
- */
-export function getScreenCenterY() {
-  const {
-    height: screenHeight
-  } = Dimensions.get("window");
-  return screenHeight / 2;
-}
-
-/**
- * Calculate the tooltip position to center it vertically on screen
- * Uses flexbox-style centering - tooltip will center itself with its actual size
- *
- * @returns Distance from screen bottom for tooltip positioning
- */
-export function calculateTooltipPosition() {
-  // Position from center - tooltip will be centered with transform or flex
-  // We return a value that's slightly above center to account for the arrow below
-  const centerY = getScreenCenterY();
-
-  // Approximate offset to center the tooltip+arrow combo
-  // This is a reasonable estimate that works for most tooltip sizes
-  const estimatedHalfHeight = 130; // ~half of (tooltip + arrow)
-
-  return centerY - estimatedHalfHeight;
-}
-
-/**
- * Calculate the position where a target element should be placed
- * to align directly under the tooltip arrow
- *
- * @returns Distance from screen bottom where element should be positioned
- */
-export function calculateTargetPosition() {
-  const tooltipBottom = calculateTooltipPosition();
-
-  // Arrow tip position = tooltip bottom + arrow offset (arrow extends below, so negative)
-  const arrowTipFromBottom = tooltipBottom + ARROW_BOTTOM_OFFSET;
-
-  // Subtract arrow height to get to the actual tip
-  const actualArrowTip = arrowTipFromBottom - ARROW_HEIGHT;
-
-  // Subtract spacing gap to position element below arrow
-  return actualArrowTip - SPACING_GAP;
-}
+"use strict";import{Dimensions as n}from"react-native";export const ARROW_BOTTOM_OFFSET=-40;export const ARROW_HEIGHT=20;export const SPACING_GAP=10;export function getScreenCenterY(){const{height:t}=n.get("window");return t/2}export function calculateTooltipPosition(){const t=getScreenCenterY();const o=130;return t-o}export function calculateTargetPosition(){const t=calculateTooltipPosition();const o=t+ARROW_BOTTOM_OFFSET;const e=o-ARROW_HEIGHT;return e-SPACING_GAP}

package/lib/module/ui/floating/onboardingConstants.web.js

@@ -1,27 +1 @@
-"use strict";
-
-/**
- * Web twin of onboardingConstants.ts — same math, window.innerHeight instead
- * of RN Dimensions.
- */
-export const ARROW_BOTTOM_OFFSET = -40; // Arrow extends below tooltip
-export const ARROW_HEIGHT = 20; // borderTopWidth of arrow
-export const SPACING_GAP = 10; // Gap between arrow tip and target element
-
-export function getScreenCenterY() {
-  return window.innerHeight / 2;
-}
-
-/** Distance from screen bottom for tooltip positioning (centered-ish). */
-export function calculateTooltipPosition() {
-  const estimatedHalfHeight = 130; // ~half of (tooltip + arrow)
-  return getScreenCenterY() - estimatedHalfHeight;
-}
-
-/** Distance from screen bottom where the bubble should sit (under the arrow). */
-export function calculateTargetPosition() {
-  const tooltipBottom = calculateTooltipPosition();
-  const arrowTipFromBottom = tooltipBottom + ARROW_BOTTOM_OFFSET;
-  const actualArrowTip = arrowTipFromBottom - ARROW_HEIGHT;
-  return actualArrowTip - SPACING_GAP;
-}
+"use strict";export const ARROW_BOTTOM_OFFSET=-40;export const ARROW_HEIGHT=20;export const SPACING_GAP=10;export function getScreenCenterY(){return window.innerHeight/2}export function calculateTooltipPosition(){const t=130;return getScreenCenterY()-t}export function calculateTargetPosition(){const t=calculateTooltipPosition();const o=t+ARROW_BOTTOM_OFFSET;const e=o-ARROW_HEIGHT;return e-SPACING_GAP}

package/lib/module/ui/fonts.js

@@ -1,8 +1 @@
-"use strict";
-
-/**
- * The monospace family, per platform. Defined in `@buoy-gg/floating-tools-core`
- * (the base package — the dial styles need it too, and nothing below shared-ui
- * may import from it) and re-exported here, which is where every tool reads it.
- */
-export { monoFont } from "@buoy-gg/floating-tools-core";
+"use strict";export{monoFont}from"@buoy-gg/floating-tools-core";

package/lib/module/ui/gameUI/components/GameUICollapsibleSection.js

@@ -1,117 +1 @@
-"use strict";
-
-import { StyleSheet, Text, View, TouchableOpacity, Animated } from "react-native";
-import { ChevronDown, ChevronUp } from "../../../icons/index.js";
-import { gameUIColors } from "../constants/gameUIColors.js";
-import { monoFont } from "../../fonts.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Reusable collapsible section component for Game UI
- * Follows the established design pattern with icon, title, count badge, and subtitle
- * Used across ENV, Storage, and other game-style interfaces
- */
-export function GameUICollapsibleSection({
-  icon: Icon,
-  iconColor,
-  title,
-  count,
-  subtitle,
-  expanded,
-  onToggle,
-  children,
-  style,
-  titleStyle
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, style],
-    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-      onPress: onToggle,
-      activeOpacity: 0.7,
-      style: styles.headerTouchable,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.header,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.headerLeft,
-          children: [/*#__PURE__*/_jsx(Icon, {
-            size: 14,
-            color: iconColor
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.title, titleStyle],
-            children: title
-          }), /*#__PURE__*/_jsx(View, {
-            style: [styles.badge, {
-              backgroundColor: iconColor + "20"
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.badgeText, {
-                color: iconColor
-              }],
-              children: count
-            })
-          })]
-        }), expanded ? /*#__PURE__*/_jsx(ChevronUp, {
-          size: 14,
-          color: gameUIColors.muted
-        }) : /*#__PURE__*/_jsx(ChevronDown, {
-          size: 14,
-          color: gameUIColors.muted
-        })]
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.subtitle,
-        children: subtitle
-      })]
-    }), expanded && /*#__PURE__*/_jsx(Animated.View, {
-      style: {
-        opacity: 1
-      },
-      children: children
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 20
-  },
-  headerTouchable: {
-    marginBottom: 12
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 4,
-    paddingHorizontal: 4
-  },
-  headerLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    flex: 1
-  },
-  title: {
-    fontSize: 11,
-    color: gameUIColors.primary,
-    fontFamily: monoFont,
-    fontWeight: "700",
-    letterSpacing: 2,
-    opacity: 0.9
-  },
-  subtitle: {
-    fontSize: 9,
-    color: gameUIColors.secondary,
-    fontFamily: monoFont,
-    paddingHorizontal: 4,
-    marginTop: 2,
-    opacity: 0.7
-  },
-  badge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 10
-  },
-  badgeText: {
-    fontSize: 10,
-    fontFamily: monoFont,
-    fontWeight: "700"
-  }
-});
+"use strict";import{StyleSheet as b,Text as a,View as o,TouchableOpacity as u,Animated as x}from"react-native";import{ChevronDown as z,ChevronUp as S}from"../../../icons/index.js";import{gameUIColors as i}from"../constants/gameUIColors.js";import{monoFont as l}from"../../fonts.js";import{jsx as e,jsxs as r}from"react/jsx-runtime";export function GameUICollapsibleSection({icon:s,iconColor:n,title:d,count:m,subtitle:h,expanded:c,onToggle:y,children:p,style:f,titleStyle:g}){return r(o,{style:[t.container,f],children:[r(u,{onPress:y,activeOpacity:.7,style:t.headerTouchable,children:[r(o,{style:t.header,children:[r(o,{style:t.headerLeft,children:[e(s,{size:14,color:n}),e(a,{style:[t.title,g],children:d}),e(o,{style:[t.badge,{backgroundColor:n+"20"}],children:e(a,{style:[t.badgeText,{color:n}],children:m})})]}),c?e(S,{size:14,color:i.muted}):e(z,{size:14,color:i.muted})]}),e(a,{style:t.subtitle,children:h})]}),c&&e(x.View,{style:{opacity:1},children:p})]})}const t=b.create({container:{marginBottom:20},headerTouchable:{marginBottom:12},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:4,paddingHorizontal:4},headerLeft:{flexDirection:"row",alignItems:"center",gap:8,flex:1},title:{fontSize:11,color:i.primary,fontFamily:l,fontWeight:"700",letterSpacing:2,opacity:.9},subtitle:{fontSize:9,color:i.secondary,fontFamily:l,paddingHorizontal:4,marginTop:2,opacity:.7},badge:{paddingHorizontal:8,paddingVertical:2,borderRadius:10},badgeText:{fontSize:10,fontFamily:l,fontWeight:"700"}});

package/lib/module/ui/gameUI/components/GameUICompactStats.js

@@ -1,332 +1 @@
-"use strict";
-
-import { Fragment } from "react";
-import { StyleSheet, Text, View, Animated } from "react-native";
-import { gameUIColors } from "../constants/gameUIColors.js";
-import { monoFont } from "../../fonts.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Reusable compact stats display component
- * Shows stat cards with icons, labels, values, and optional progress bars
- * Used in ENV and Storage pages for metrics display
- */
-export function GameUICompactStats({
-  statsConfig,
-  totalCount,
-  header,
-  bottomStats,
-  style,
-  hideInactive = true
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, style],
-    children: [header && /*#__PURE__*/_jsxs(View, {
-      style: styles.header,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.headerLeft,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.headerTitle,
-          children: header.title
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.headerSubtitle,
-          children: header.subtitle
-        })]
-      }), header.healthPercentage !== undefined && /*#__PURE__*/_jsx(View, {
-        style: styles.headerRight,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: styles.statusIndicator,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.statusDot, {
-              backgroundColor: header.healthColor || gameUIColors.success
-            }]
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.statusText, {
-              color: header.healthColor || gameUIColors.success
-            }],
-            children: header.healthStatus || "OPTIMAL"
-          })]
-        })
-      })]
-    }), header?.healthPercentage !== undefined && /*#__PURE__*/_jsxs(View, {
-      style: styles.healthSection,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.healthLabel,
-        children: "SYSTEM HEALTH"
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.healthBarWrapper,
-        children: /*#__PURE__*/_jsx(View, {
-          style: styles.healthBarBg,
-          children: /*#__PURE__*/_jsx(Animated.View, {
-            style: [styles.healthBarFill, {
-              width: `${header.healthPercentage}%`,
-              backgroundColor: header.healthColor || gameUIColors.success
-            }]
-          })
-        })
-      }), /*#__PURE__*/_jsxs(Text, {
-        style: [styles.healthPercentage, {
-          color: header.healthColor || gameUIColors.success
-        }],
-        children: [header.healthPercentage, "%"]
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.statsGrid,
-      children: statsConfig.map(stat => {
-        const isActive = stat.value > 0;
-        if (hideInactive && !isActive) return null;
-        const IconComponent = stat.icon;
-        const percentage = totalCount ? stat.value / totalCount * 100 : 0;
-        return /*#__PURE__*/_jsxs(Animated.View, {
-          style: [styles.statCard, {
-            borderColor: stat.color + "30"
-          }],
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.cardContent,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.iconBadge, {
-                backgroundColor: stat.color + "1A",
-                borderColor: stat.color + "33"
-              }],
-              children: /*#__PURE__*/_jsx(IconComponent, {
-                size: 12,
-                color: stat.color
-              })
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.cardInfo,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: styles.cardLabel,
-                children: stat.label
-              }), /*#__PURE__*/_jsx(Text, {
-                style: styles.cardSubtitle,
-                children: stat.subtitle
-              })]
-            }), /*#__PURE__*/_jsxs(View, {
-              style: styles.valueBlock,
-              children: [/*#__PURE__*/_jsx(Text, {
-                style: [styles.statNumber, {
-                  color: stat.color
-                }],
-                children: stat.value.toString().padStart(2, "0")
-              }), totalCount ? /*#__PURE__*/_jsxs(Text, {
-                style: styles.percentText,
-                children: [Math.round(percentage), "%"]
-              }) : null]
-            })]
-          }), stat.showBar !== false && totalCount && /*#__PURE__*/_jsx(View, {
-            style: [styles.statBar, {
-              backgroundColor: stat.color + "10"
-            }],
-            children: /*#__PURE__*/_jsx(View, {
-              style: [styles.statBarFill, {
-                width: `${percentage}%`,
-                backgroundColor: stat.color
-              }]
-            })
-          })]
-        }, stat.key);
-      })
-    }), bottomStats && bottomStats.length > 0 && /*#__PURE__*/_jsx(View, {
-      style: styles.bottomBar,
-      children: bottomStats.map((stat, index) => /*#__PURE__*/_jsxs(Fragment, {
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.bottomStat,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.bottomStatLabel,
-            children: stat.label
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.bottomStatValue, stat.color && {
-              color: stat.color
-            }],
-            children: stat.value
-          })]
-        }), index < bottomStats.length - 1 && /*#__PURE__*/_jsx(View, {
-          style: styles.bottomDivider
-        })]
-      }, stat.label))
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: gameUIColors.panel,
-    borderRadius: 12,
-    padding: 12,
-    marginBottom: 12,
-    borderWidth: 1,
-    borderColor: gameUIColors.border + "40",
-    overflow: "hidden",
-    position: "relative"
-  },
-  // Header
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: 8,
-    paddingBottom: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: "rgba(128, 128, 128, 0.1)"
-  },
-  headerLeft: {
-    gap: 1
-  },
-  headerRight: {
-    alignItems: "flex-end"
-  },
-  headerTitle: {
-    fontSize: 11,
-    fontWeight: "700",
-    color: gameUIColors.primary,
-    fontFamily: monoFont,
-    letterSpacing: 1.5
-  },
-  headerSubtitle: {
-    fontSize: 8,
-    color: gameUIColors.secondary,
-    fontFamily: monoFont,
-    opacity: 0.7
-  },
-  statusIndicator: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  statusDot: {
-    width: 5,
-    height: 5,
-    borderRadius: 2.5
-  },
-  statusText: {
-    fontSize: 9,
-    fontWeight: "600",
-    fontFamily: monoFont,
-    letterSpacing: 0.5
-  },
-  // Health section
-  healthSection: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 10,
-    gap: 8
-  },
-  healthLabel: {
-    fontSize: 8,
-    color: gameUIColors.secondary,
-    fontFamily: monoFont,
-    letterSpacing: 0.5
-  },
-  healthBarWrapper: {
-    flex: 1
-  },
-  healthBarBg: {
-    height: 4,
-    backgroundColor: "rgba(128, 128, 128, 0.1)",
-    borderRadius: 2,
-    overflow: "hidden"
-  },
-  healthBarFill: {
-    height: "100%",
-    borderRadius: 2
-  },
-  healthPercentage: {
-    fontSize: 11,
-    fontWeight: "700",
-    fontFamily: monoFont
-  },
-  // Stats grid
-  statsGrid: {
-    gap: 6,
-    marginBottom: 8
-  },
-  statCard: {
-    backgroundColor: gameUIColors.blackTint2,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: gameUIColors.border,
-    padding: 10,
-    marginBottom: 4
-  },
-  cardContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginBottom: 4
-  },
-  cardInfo: {
-    flex: 1
-  },
-  cardLabel: {
-    fontSize: 11,
-    fontWeight: "700",
-    fontFamily: monoFont,
-    letterSpacing: 0.5,
-    color: gameUIColors.primary
-  },
-  cardSubtitle: {
-    fontSize: 8,
-    color: gameUIColors.secondary,
-    fontFamily: monoFont,
-    opacity: 0.7
-  },
-  statNumber: {
-    fontSize: 16,
-    fontWeight: "700",
-    fontFamily: monoFont,
-    minWidth: 28
-  },
-  valueBlock: {
-    alignItems: "flex-end"
-  },
-  percentText: {
-    fontSize: 9,
-    color: gameUIColors.secondary,
-    fontFamily: monoFont
-  },
-  statBar: {
-    height: 3,
-    borderRadius: 1.5,
-    overflow: "hidden"
-  },
-  statBarFill: {
-    height: "100%",
-    borderRadius: 1.5
-  },
-  // Bottom bar
-  bottomBar: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingTop: 8,
-    borderTopWidth: 1,
-    borderTopColor: gameUIColors.border + "40"
-  },
-  bottomStat: {
-    flex: 1,
-    alignItems: "center"
-  },
-  bottomStatLabel: {
-    fontSize: 7,
-    color: gameUIColors.muted,
-    fontFamily: monoFont,
-    letterSpacing: 0.5,
-    marginBottom: 1
-  },
-  bottomStatValue: {
-    fontSize: 11,
-    fontWeight: "700",
-    color: gameUIColors.primary,
-    fontFamily: monoFont
-  },
-  bottomDivider: {
-    width: 1,
-    height: 16,
-    backgroundColor: gameUIColors.border + "40"
-  },
-  iconBadge: {
-    width: 24,
-    height: 24,
-    borderRadius: 6,
-    borderWidth: 1,
-    alignItems: "center",
-    justifyContent: "center"
-  }
-});
+"use strict";import{Fragment as p}from"react";import{StyleSheet as S,Text as a,View as r,Animated as m}from"react-native";import{gameUIColors as l}from"../constants/gameUIColors.js";import{monoFont as c}from"../../fonts.js";import{jsx as o,jsxs as i}from"react/jsx-runtime";export function GameUICompactStats({statsConfig:b,totalCount:d,header:n,bottomStats:h,style:f,hideInactive:y=true}){return i(r,{style:[e.container,f],children:[n&&i(r,{style:e.header,children:[i(r,{style:e.headerLeft,children:[o(a,{style:e.headerTitle,children:n.title}),o(a,{style:e.headerSubtitle,children:n.subtitle})]}),n.healthPercentage!==void 0&&o(r,{style:e.headerRight,children:i(r,{style:e.statusIndicator,children:[o(r,{style:[e.statusDot,{backgroundColor:n.healthColor||l.success}]}),o(a,{style:[e.statusText,{color:n.healthColor||l.success}],children:n.healthStatus||"OPTIMAL"})]})})]}),n?.healthPercentage!==void 0&&i(r,{style:e.healthSection,children:[o(a,{style:e.healthLabel,children:"SYSTEM HEALTH"}),o(r,{style:e.healthBarWrapper,children:o(r,{style:e.healthBarBg,children:o(m.View,{style:[e.healthBarFill,{width:`${n.healthPercentage}%`,backgroundColor:n.healthColor||l.success}]})})}),i(a,{style:[e.healthPercentage,{color:n.healthColor||l.success}],children:[n.healthPercentage,"%"]})]}),o(r,{style:e.statsGrid,children:b.map(t=>{const s=t.value>0;if(y&&!s)return null;const u=t.icon;const g=d?t.value/d*100:0;return i(m.View,{style:[e.statCard,{borderColor:t.color+"30"}],children:[i(r,{style:e.cardContent,children:[o(r,{style:[e.iconBadge,{backgroundColor:t.color+"1A",borderColor:t.color+"33"}],children:o(u,{size:12,color:t.color})}),i(r,{style:e.cardInfo,children:[o(a,{style:e.cardLabel,children:t.label}),o(a,{style:e.cardSubtitle,children:t.subtitle})]}),i(r,{style:e.valueBlock,children:[o(a,{style:[e.statNumber,{color:t.color}],children:t.value.toString().padStart(2,"0")}),d?i(a,{style:e.percentText,children:[Math.round(g),"%"]}):null]})]}),t.showBar!==false&&d&&o(r,{style:[e.statBar,{backgroundColor:t.color+"10"}],children:o(r,{style:[e.statBarFill,{width:`${g}%`,backgroundColor:t.color}]})})]},t.key)})}),h&&h.length>0&&o(r,{style:e.bottomBar,children:h.map((t,s)=>i(p,{children:[i(r,{style:e.bottomStat,children:[o(a,{style:e.bottomStatLabel,children:t.label}),o(a,{style:[e.bottomStatValue,t.color&&{color:t.color}],children:t.value})]}),s<h.length-1&&o(r,{style:e.bottomDivider})]},t.label))})]})}const e=S.create({container:{backgroundColor:l.panel,borderRadius:12,padding:12,marginBottom:12,borderWidth:1,borderColor:l.border+"40",overflow:"hidden",position:"relative"},header:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:8,paddingBottom:8,borderBottomWidth:1,borderBottomColor:"rgba(128, 128, 128, 0.1)"},headerLeft:{gap:1},headerRight:{alignItems:"flex-end"},headerTitle:{fontSize:11,fontWeight:"700",color:l.primary,fontFamily:c,letterSpacing:1.5},headerSubtitle:{fontSize:8,color:l.secondary,fontFamily:c,opacity:.7},statusIndicator:{flexDirection:"row",alignItems:"center",gap:4},statusDot:{width:5,height:5,borderRadius:2.5},statusText:{fontSize:9,fontWeight:"600",fontFamily:c,letterSpacing:.5},healthSection:{flexDirection:"row",alignItems:"center",marginBottom:10,gap:8},healthLabel:{fontSize:8,color:l.secondary,fontFamily:c,letterSpacing:.5},healthBarWrapper:{flex:1},healthBarBg:{height:4,backgroundColor:"rgba(128, 128, 128, 0.1)",borderRadius:2,overflow:"hidden"},healthBarFill:{height:"100%",borderRadius:2},healthPercentage:{fontSize:11,fontWeight:"700",fontFamily:c},statsGrid:{gap:6,marginBottom:8},statCard:{backgroundColor:l.blackTint2,borderRadius:8,borderWidth:1,borderColor:l.border,padding:10,marginBottom:4},cardContent:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:4},cardInfo:{flex:1},cardLabel:{fontSize:11,fontWeight:"700",fontFamily:c,letterSpacing:.5,color:l.primary},cardSubtitle:{fontSize:8,color:l.secondary,fontFamily:c,opacity:.7},statNumber:{fontSize:16,fontWeight:"700",fontFamily:c,minWidth:28},valueBlock:{alignItems:"flex-end"},percentText:{fontSize:9,color:l.secondary,fontFamily:c},statBar:{height:3,borderRadius:1.5,overflow:"hidden"},statBarFill:{height:"100%",borderRadius:1.5},bottomBar:{flexDirection:"row",alignItems:"center",paddingTop:8,borderTopWidth:1,borderTopColor:l.border+"40"},bottomStat:{flex:1,alignItems:"center"},bottomStatLabel:{fontSize:7,color:l.muted,fontFamily:c,letterSpacing:.5,marginBottom:1},bottomStatValue:{fontSize:11,fontWeight:"700",color:l.primary,fontFamily:c},bottomDivider:{width:1,height:16,backgroundColor:l.border+"40"},iconBadge:{width:24,height:24,borderRadius:6,borderWidth:1,alignItems:"center",justifyContent:"center"}});