@buoy-gg/storage 7.0.40 → 7.0.42

package/lib/module/storage/components/StorageKeySection.js

@@ -1,155 +1 @@
-"use strict";
-
-import { useCallback, useState } from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { StorageKeyRow } from "./StorageKeyRow";
-import { SectionHeader, night } from "@buoy-gg/shared-ui";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Identifies a ROW, not a key name — the same name routinely exists in more
- * than one backend. Shared with the browser so both sides agree on the id.
- */
-export function storageRowId(storageKey) {
-  return storageKey.instanceId ? `${storageKey.storageType}-${storageKey.instanceId}-${storageKey.key}` : `${storageKey.storageType}-${storageKey.key}`;
-}
-/**
- * Storage key section component following composition principles [[rule3]]
- *
- * Applied principles:
- * - Decompose by Responsibility: Single purpose component for grouped storage keys
- * - Prefer Composition over Configuration: Reuses patterns from EnvVarSection
- * - Extract Reusable Logic: Shares expansion state management pattern
- */
-export function StorageKeySection({
-  title,
-  count,
-  keys,
-  emptyMessage,
-  headerColor,
-  isSelectMode = false,
-  selectedKeys = new Set(),
-  onSelectionChange,
-  eventCountByKey,
-  onViewHistory,
-  onHideKey,
-  pinnedKeys,
-  onTogglePin,
-  onEditKey,
-  onToggleKey,
-  onDeleteKey,
-  editBlockedFor,
-  onRowRef,
-  onOpenKey
-}) {
-  /**
-   * Identifies a ROW, not a key name.
-   *
-   * The same name routinely exists in more than one place — an app that keeps
-   * `auth.refreshToken` in both MMKV and the keychain has two rows called
-   * that, and they are different values in different stores.
-   */
-  const getKeyIdentifier = useCallback(storageKey => storageRowId(storageKey), []);
-
-  /**
-   * Which ROW is expanded — by identifier, not by key name.
-   *
-   * Keyed by name, tapping one of a pair of same-named rows opened BOTH of
-   * them: two cards, two value trees, and two Edit buttons, one of which
-   * writes to a store you weren't looking at.
-   */
-  const [expandedKey, setExpandedKey] = useState(null);
-  const handleKeyPress = useCallback(storageKey => {
-    // Fiber-driven automation can invoke the ROW's onPress prop directly,
-    // handing this a GestureResponderEvent instead of the key the row's own
-    // touchable wrapper binds. Rendering an event as a key produced a
-    // convincing all-"undefined" detail screen; refuse anything that isn't
-    // a key.
-    if (!storageKey || typeof storageKey.key !== "string") return;
-    if (onOpenKey) {
-      // Navigate-to-detail hosts: the card is a door, not a drawer.
-      onOpenKey(storageKey);
-      return;
-    }
-    const id = getKeyIdentifier(storageKey);
-    setExpandedKey(prev => prev === id ? null : id);
-  }, [getKeyIdentifier, onOpenKey]);
-  if (keys.length === 0 && title === "Required Keys") {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.sectionContainer,
-      children: [/*#__PURE__*/_jsxs(SectionHeader, {
-        children: [/*#__PURE__*/_jsx(SectionHeader.Title, {
-          children: title
-        }), /*#__PURE__*/_jsx(SectionHeader.Badge, {
-          count: 0,
-          color: headerColor
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.emptySection,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.emptySectionText,
-          children: emptyMessage
-        })
-      })]
-    });
-  }
-  if (keys.length === 0) return null;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.sectionContainer,
-    children: [title ? /*#__PURE__*/_jsxs(SectionHeader, {
-      children: [/*#__PURE__*/_jsx(SectionHeader.Title, {
-        children: title
-      }), count >= 0 && /*#__PURE__*/_jsx(SectionHeader.Badge, {
-        count: count,
-        color: headerColor
-      })]
-    }) : null, /*#__PURE__*/_jsx(View, {
-      style: styles.sectionContent,
-      children: keys.map(storageKey => {
-        // Create unique key by combining storage type, instance ID (if present), and key name
-        const uniqueKey = getKeyIdentifier(storageKey);
-        return /*#__PURE__*/_jsx(View, {
-          ref: onRowRef ? node => onRowRef(uniqueKey, node) : undefined,
-          collapsable: false,
-          children: /*#__PURE__*/_jsx(StorageKeyRow, {
-            storageKey: storageKey,
-            isExpanded: !isSelectMode && expandedKey === uniqueKey,
-            onPress: handleKeyPress,
-            isSelectMode: isSelectMode,
-            isSelected: selectedKeys.has(uniqueKey),
-            onSelectionChange: onSelectionChange,
-            eventCount: eventCountByKey?.[storageKey.key],
-            onViewHistory: onViewHistory ? () => onViewHistory(storageKey.key) : undefined,
-            onHideKey: onHideKey,
-            onEditKey: onEditKey,
-            onToggleKey: onToggleKey,
-            onDeleteKey: onDeleteKey,
-            editBlockedReason: editBlockedFor?.(storageKey),
-            isPinned: pinnedKeys?.has(storageKey.key),
-            onTogglePin: onTogglePin
-          })
-        }, uniqueKey);
-      })
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  sectionContainer: {
-    gap: 8
-  },
-  sectionContent: {
-    // No gap needed, StorageKeyRow has its own margins
-  },
-  emptySection: {
-    backgroundColor: night.color.surface,
-    borderRadius: 6,
-    padding: 16,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    alignItems: "center"
-  },
-  emptySectionText: {
-    color: night.color.textTertiary,
-    fontSize: 11,
-    textAlign: "center"
-  }
-});
+"use strict";import{useCallback as x,useState as H}from"react";import{View as r,Text as _,StyleSheet as v}from"react-native";import{StorageKeyRow as z}from"./StorageKeyRow";import{SectionHeader as o,night as f}from"@buoy-gg/shared-ui";import{jsx as t,jsxs as l}from"react/jsx-runtime";export function storageRowId(n){return n.instanceId?`${n.storageType}-${n.instanceId}-${n.key}`:`${n.storageType}-${n.key}`}export function StorageKeySection({title:n,count:p,keys:d,emptyMessage:g,headerColor:h,isSelectMode:y=false,selectedKeys:T=new Set,onSelectionChange:C,eventCountByKey:b,onViewHistory:m,onHideKey:k,pinnedKeys:I,onTogglePin:$,onEditKey:j,onToggleKey:P,onDeleteKey:w,editBlockedFor:B,onRowRef:S,onOpenKey:s}){const a=x(e=>storageRowId(e),[]);const[E,R]=H(null);const q=x(e=>{if(!e||typeof e.key!=="string")return;if(s){s(e);return}const i=a(e);R(u=>u===i?null:i)},[a,s]);if(d.length===0&&n==="Required Keys"){return l(r,{style:c.sectionContainer,children:[l(o,{children:[t(o.Title,{children:n}),t(o.Badge,{count:0,color:h})]}),t(r,{style:c.emptySection,children:t(_,{style:c.emptySectionText,children:g})})]})}if(d.length===0)return null;return l(r,{style:c.sectionContainer,children:[n?l(o,{children:[t(o.Title,{children:n}),p>=0&&t(o.Badge,{count:p,color:h})]}):null,t(r,{style:c.sectionContent,children:d.map(e=>{const i=a(e);return t(r,{ref:S?u=>S(i,u):void 0,collapsable:false,children:t(z,{storageKey:e,isExpanded:!y&&E===i,onPress:q,isSelectMode:y,isSelected:T.has(i),onSelectionChange:C,eventCount:b?.[e.key],onViewHistory:m?()=>m(e.key):void 0,onHideKey:k,onEditKey:j,onToggleKey:P,onDeleteKey:w,editBlockedReason:B?.(e),isPinned:I?.has(e.key),onTogglePin:$})},i)})})]})}const c=v.create({sectionContainer:{gap:8},sectionContent:{},emptySection:{backgroundColor:f.color.surface,borderRadius:6,padding:16,borderWidth:1,borderColor:f.color.border,alignItems:"center"},emptySectionText:{color:f.color.textTertiary,fontSize:11,textAlign:"center"}});

package/lib/module/storage/components/StorageKeyStats.js

@@ -1,341 +1 @@
-"use strict";
-
-import { View, Text, StyleSheet } from "react-native";
-import { AlertCircle, CheckCircle2, XCircle, Eye, Database, Shield } from "@buoy-gg/shared-ui";
-import { night } from "@buoy-gg/shared-ui";
-import { getStorageTypeHexColor } from "../utils/storageQueryUtils";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Variable type configurations matching env vars design
-const variableTypeData = [{
-  key: "valid",
-  label: "Valid Keys",
-  description: "Correctly stored and accessible",
-  icon: CheckCircle2,
-  color: "#10B981",
-  textColor: "#10B981",
-  bgColor: "rgba(16, 185, 129, 0.1)"
-}, {
-  key: "missing",
-  label: "Missing Keys",
-  description: "Required but not found",
-  icon: AlertCircle,
-  color: "#EF4444",
-  textColor: "#EF4444",
-  bgColor: "rgba(239, 68, 68, 0.1)"
-}, {
-  key: "wrongValue",
-  label: "Wrong Values",
-  description: "Stored but incorrect value",
-  icon: XCircle,
-  color: "#F97316",
-  textColor: "#F97316",
-  bgColor: "rgba(249, 115, 22, 0.1)"
-}, {
-  key: "wrongType",
-  label: "Wrong Types",
-  description: "Value has incorrect data type",
-  icon: XCircle,
-  color: "#0891B2",
-  textColor: "#0891B2",
-  bgColor: "rgba(8, 145, 178, 0.1)"
-}, {
-  key: "optional",
-  label: "Optional Keys",
-  description: "Available but not required",
-  icon: Eye,
-  color: "#8B5CF6",
-  textColor: "#8B5CF6",
-  bgColor: "rgba(139, 92, 246, 0.1)"
-}];
-
-// Storage type breakdown data
-const storageTypeData = [{
-  key: "mmkv",
-  label: "MMKV",
-  description: "High-performance key-value storage",
-  icon: Database
-}, {
-  key: "async",
-  label: "AsyncStorage",
-  description: "React Native async storage",
-  icon: Database
-}, {
-  key: "secure",
-  label: "SecureStorage",
-  description: "Encrypted secure storage",
-  icon: Shield
-}];
-
-/**
- * Storage key stats component following composition principles [[rule3]]
- *
- * Applied principles:
- * - Decompose by Responsibility: Single purpose component for storage stats display
- * - Prefer Composition over Configuration: Reuses patterns from EnvVarStats
- * - Extract Reusable Logic: Shares visualization patterns with env vars
- */
-export function StorageKeyStatsSection({
-  stats
-}) {
-  const {
-    totalCount,
-    missingCount,
-    wrongValueCount,
-    wrongTypeCount,
-    presentRequiredCount,
-    optionalCount,
-    mmkvCount,
-    asyncCount,
-    secureCount
-  } = stats;
-
-  // If no storage keys at all, show minimal stats
-  if (totalCount === 0) {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.statsContainer,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.sectionTitle,
-        children: "STORAGE BREAKDOWN"
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.emptyState,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.emptyStateText,
-          children: "No storage keys detected"
-        })
-      })]
-    });
-  }
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.statsContainer,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.breakdownSection,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.sectionTitle,
-        children: "KEY STATUS BREAKDOWN"
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.breakdownList,
-        children: variableTypeData.map(item => {
-          let count = 0;
-          let shouldShow = false;
-          switch (item.key) {
-            case "valid":
-              count = presentRequiredCount;
-              shouldShow = count > 0;
-              break;
-            case "missing":
-              count = missingCount;
-              shouldShow = count > 0;
-              break;
-            case "wrongValue":
-              count = wrongValueCount;
-              shouldShow = count > 0;
-              break;
-            case "wrongType":
-              count = wrongTypeCount;
-              shouldShow = count > 0;
-              break;
-            case "optional":
-              count = optionalCount;
-              shouldShow = count > 0;
-              break;
-          }
-          if (!shouldShow) return null;
-          const percentage = totalCount > 0 ? (count / totalCount * 100).toFixed(1) : "0";
-          const IconComponent = item.icon;
-          return /*#__PURE__*/_jsx(View, {
-            style: styles.breakdownItem,
-            children: /*#__PURE__*/_jsxs(View, {
-              style: styles.breakdownItemRow,
-              children: [/*#__PURE__*/_jsxs(View, {
-                style: styles.breakdownItemLeft,
-                children: [/*#__PURE__*/_jsx(View, {
-                  style: [styles.breakdownIcon, {
-                    backgroundColor: item.bgColor
-                  }],
-                  children: /*#__PURE__*/_jsx(IconComponent, {
-                    size: 14,
-                    color: item.color
-                  })
-                }), /*#__PURE__*/_jsxs(View, {
-                  style: styles.breakdownItemInfo,
-                  children: [/*#__PURE__*/_jsx(Text, {
-                    style: styles.breakdownItemLabel,
-                    children: item.label
-                  }), /*#__PURE__*/_jsx(Text, {
-                    style: styles.breakdownItemDesc,
-                    children: item.description
-                  })]
-                })]
-              }), /*#__PURE__*/_jsxs(View, {
-                style: styles.breakdownItemRight,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: [styles.breakdownCount, {
-                    color: item.textColor
-                  }],
-                  children: count
-                }), /*#__PURE__*/_jsxs(Text, {
-                  style: styles.breakdownPercentage,
-                  children: [percentage, "%"]
-                })]
-              })]
-            })
-          }, item.key);
-        })
-      })]
-    }), (mmkvCount > 0 || asyncCount > 0 || secureCount > 0) && /*#__PURE__*/_jsxs(View, {
-      style: styles.breakdownSection,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.sectionTitle,
-        children: "STORAGE TYPE BREAKDOWN"
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.breakdownList,
-        children: storageTypeData.map(item => {
-          let count = 0;
-          let shouldShow = false;
-          switch (item.key) {
-            case "mmkv":
-              count = mmkvCount;
-              shouldShow = count > 0;
-              break;
-            case "async":
-              count = asyncCount;
-              shouldShow = count > 0;
-              break;
-            case "secure":
-              count = secureCount;
-              shouldShow = count > 0;
-              break;
-          }
-          if (!shouldShow) return null;
-          const percentage = totalCount > 0 ? (count / totalCount * 100).toFixed(1) : "0";
-          const IconComponent = item.icon;
-          const storageColor = getStorageTypeHexColor(item.key);
-          return /*#__PURE__*/_jsx(View, {
-            style: styles.breakdownItem,
-            children: /*#__PURE__*/_jsxs(View, {
-              style: styles.breakdownItemRow,
-              children: [/*#__PURE__*/_jsxs(View, {
-                style: styles.breakdownItemLeft,
-                children: [/*#__PURE__*/_jsx(View, {
-                  style: [styles.breakdownIcon, {
-                    backgroundColor: `${storageColor}15`
-                  }],
-                  children: /*#__PURE__*/_jsx(IconComponent, {
-                    size: 14,
-                    color: storageColor
-                  })
-                }), /*#__PURE__*/_jsxs(View, {
-                  style: styles.breakdownItemInfo,
-                  children: [/*#__PURE__*/_jsx(Text, {
-                    style: styles.breakdownItemLabel,
-                    children: item.label
-                  }), /*#__PURE__*/_jsx(Text, {
-                    style: styles.breakdownItemDesc,
-                    children: item.description
-                  })]
-                })]
-              }), /*#__PURE__*/_jsxs(View, {
-                style: styles.breakdownItemRight,
-                children: [/*#__PURE__*/_jsx(Text, {
-                  style: [styles.breakdownCount, {
-                    color: storageColor
-                  }],
-                  children: count
-                }), /*#__PURE__*/_jsxs(Text, {
-                  style: styles.breakdownPercentage,
-                  children: [percentage, "%"]
-                })]
-              })]
-            })
-          }, item.key);
-        })
-      })]
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  statsContainer: {
-    marginBottom: 24,
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    padding: 16,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  // Section titles
-  sectionTitle: {
-    color: night.color.textSecondary,
-    fontSize: 12,
-    fontWeight: "500",
-    marginBottom: 16,
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  },
-  // Breakdown section
-  breakdownSection: {
-    gap: 12,
-    marginBottom: 20
-  },
-  breakdownList: {
-    gap: 12
-  },
-  breakdownItem: {
-    backgroundColor: night.color.surfaceElevated,
-    padding: 12,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  breakdownItemRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  breakdownItemLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12,
-    flex: 1,
-    minWidth: 0
-  },
-  breakdownIcon: {
-    padding: 8,
-    borderRadius: 8
-  },
-  breakdownItemInfo: {
-    flex: 1,
-    minWidth: 0
-  },
-  breakdownItemLabel: {
-    color: night.color.text,
-    fontSize: 14,
-    fontWeight: "500"
-  },
-  breakdownItemDesc: {
-    color: night.color.textSecondary,
-    fontSize: 12
-  },
-  breakdownItemRight: {
-    alignItems: "flex-end"
-  },
-  breakdownCount: {
-    fontSize: 16,
-    fontWeight: "600"
-  },
-  breakdownPercentage: {
-    color: night.color.textTertiary,
-    fontSize: 10
-  },
-  // Empty state
-  emptyState: {
-    padding: 16,
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 6,
-    alignItems: "center"
-  },
-  emptyStateText: {
-    color: night.color.textTertiary,
-    fontSize: 11,
-    textAlign: "center"
-  }
-});
+"use strict";import{storageLabels as d}from"../utils/storageLabels";import{View as r,Text as a,StyleSheet as T}from"react-native";import{AlertCircle as R,CheckCircle2 as v,XCircle as w,Eye as E,Database as m,Shield as B}from"@buoy-gg/shared-ui";import{night as i}from"@buoy-gg/shared-ui";import{getStorageTypeHexColor as W}from"../utils/storageQueryUtils";import{jsx as t,jsxs as l}from"react/jsx-runtime";const D=[{key:"valid",label:"Valid Keys",description:"Correctly stored and accessible",icon:v,color:"#10B981",textColor:"#10B981",bgColor:"rgba(16, 185, 129, 0.1)"},{key:"missing",label:"Missing Keys",description:"Required but not found",icon:R,color:"#EF4444",textColor:"#EF4444",bgColor:"rgba(239, 68, 68, 0.1)"},{key:"wrongValue",label:"Wrong Values",description:"Stored but incorrect value",icon:w,color:"#F97316",textColor:"#F97316",bgColor:"rgba(249, 115, 22, 0.1)"},{key:"wrongType",label:"Wrong Types",description:"Value has incorrect data type",icon:w,color:"#0891B2",textColor:"#0891B2",bgColor:"rgba(8, 145, 178, 0.1)"},{key:"optional",label:"Optional Keys",description:"Available but not required",icon:E,color:"#8B5CF6",textColor:"#8B5CF6",bgColor:"rgba(139, 92, 246, 0.1)"}];const L=[{key:"mmkv",label:d.mmkv,description:d.hasSecure?"Synchronous key-value storage":"Storage for this browser tab",icon:m},{key:"async",label:d.asyncFull,description:d.hasSecure?"React Native async storage":"Persistent storage for this origin",icon:m},{key:"secure",label:"SecureStorage",description:"Encrypted secure storage",icon:B}];export function StorageKeyStatsSection({stats:p}){const{totalCount:s,missingCount:C,wrongValueCount:f,wrongTypeCount:S,presentRequiredCount:I,optionalCount:x,mmkvCount:k,asyncCount:u,secureCount:h}=p;if(s===0){return l(r,{style:e.statsContainer,children:[t(a,{style:e.sectionTitle,children:"STORAGE BREAKDOWN"}),t(r,{style:e.emptyState,children:t(a,{style:e.emptyStateText,children:"No storage keys detected"})})]})}return l(r,{style:e.statsContainer,children:[l(r,{style:e.breakdownSection,children:[t(a,{style:e.sectionTitle,children:"KEY STATUS BREAKDOWN"}),t(r,{style:e.breakdownList,children:D.map(n=>{let o=0;let c=false;switch(n.key){case"valid":o=I;c=o>0;break;case"missing":o=C;c=o>0;break;case"wrongValue":o=f;c=o>0;break;case"wrongType":o=S;c=o>0;break;case"optional":o=x;c=o>0;break}if(!c)return null;const b=s>0?(o/s*100).toFixed(1):"0";const y=n.icon;return t(r,{style:e.breakdownItem,children:l(r,{style:e.breakdownItemRow,children:[l(r,{style:e.breakdownItemLeft,children:[t(r,{style:[e.breakdownIcon,{backgroundColor:n.bgColor}],children:t(y,{size:14,color:n.color})}),l(r,{style:e.breakdownItemInfo,children:[t(a,{style:e.breakdownItemLabel,children:n.label}),t(a,{style:e.breakdownItemDesc,children:n.description})]})]}),l(r,{style:e.breakdownItemRight,children:[t(a,{style:[e.breakdownCount,{color:n.textColor}],children:o}),l(a,{style:e.breakdownPercentage,children:[b,"%"]})]})]})},n.key)})})]}),(k>0||u>0||h>0)&&l(r,{style:e.breakdownSection,children:[t(a,{style:e.sectionTitle,children:"STORAGE TYPE BREAKDOWN"}),t(r,{style:e.breakdownList,children:L.map(n=>{let o=0;let c=false;switch(n.key){case"mmkv":o=k;c=o>0;break;case"async":o=u;c=o>0;break;case"secure":o=h;c=o>0;break}if(!c)return null;const b=s>0?(o/s*100).toFixed(1):"0";const y=n.icon;const g=W(n.key);return t(r,{style:e.breakdownItem,children:l(r,{style:e.breakdownItemRow,children:[l(r,{style:e.breakdownItemLeft,children:[t(r,{style:[e.breakdownIcon,{backgroundColor:`${g}15`}],children:t(y,{size:14,color:g})}),l(r,{style:e.breakdownItemInfo,children:[t(a,{style:e.breakdownItemLabel,children:n.label}),t(a,{style:e.breakdownItemDesc,children:n.description})]})]}),l(r,{style:e.breakdownItemRight,children:[t(a,{style:[e.breakdownCount,{color:g}],children:o}),l(a,{style:e.breakdownPercentage,children:[b,"%"]})]})]})},n.key)})})]})]})}const e=T.create({statsContainer:{marginBottom:24,backgroundColor:i.color.surface,borderRadius:8,padding:16,borderWidth:1,borderColor:i.color.border},sectionTitle:{color:i.color.textSecondary,fontSize:12,fontWeight:"500",marginBottom:16,textTransform:"uppercase",letterSpacing:.5},breakdownSection:{gap:12,marginBottom:20},breakdownList:{gap:12},breakdownItem:{backgroundColor:i.color.surfaceElevated,padding:12,borderRadius:8,borderWidth:1,borderColor:i.color.border},breakdownItemRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},breakdownItemLeft:{flexDirection:"row",alignItems:"center",gap:12,flex:1,minWidth:0},breakdownIcon:{padding:8,borderRadius:8},breakdownItemInfo:{flex:1,minWidth:0},breakdownItemLabel:{color:i.color.text,fontSize:14,fontWeight:"500"},breakdownItemDesc:{color:i.color.textSecondary,fontSize:12},breakdownItemRight:{alignItems:"flex-end"},breakdownCount:{fontSize:16,fontWeight:"600"},breakdownPercentage:{color:i.color.textTertiary,fontSize:10},emptyState:{padding:16,backgroundColor:i.color.surfaceElevated,borderRadius:6,alignItems:"center"},emptyStateText:{color:i.color.textTertiary,fontSize:11,textAlign:"center"}});