@buoy-gg/storage 7.0.41 → 7.0.42

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

@@ -1,517 +1 @@
-"use strict";
-
-import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
-import { AlertCircle, CheckCircle2, Eye, XCircle, HardDrive, Database, Shield, gameUIColors, macOSColors, night, monoFont } from "@buoy-gg/shared-ui";
-import { getStorageTypeLabel, getStorageTypeHexColor } from "../utils/storageQueryUtils";
-import { getValueTypeLabel } from "../utils/valueType";
-import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
-
-// Stable constants moved to module scope to prevent re-renders [[memory:4875251]]
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const HIT_SLOP = {
-  top: 6,
-  bottom: 6,
-  left: 6,
-  right: 6
-};
-
-// MMKV Instance color palette - consistent colors per instance
-const INSTANCE_COLORS = [macOSColors.semantic.info,
-// Blue
-macOSColors.semantic.success,
-// Green
-macOSColors.semantic.warning,
-// Orange
-macOSColors.semantic.debug,
-// Purple
-'#FF6B9D',
-// Pink
-'#00D9FF' // Cyan
-];
-
-/**
- * Get consistent color for an MMKV instance based on its ID
- * Uses simple hash to ensure same instance always gets same color
- */
-function getInstanceColor(instanceId) {
-  const hash = instanceId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
-  return INSTANCE_COLORS[hash % INSTANCE_COLORS.length];
-}
-const getStatusConfig = status => {
-  switch (status) {
-    case "required_present":
-      return {
-        icon: CheckCircle2,
-        color: macOSColors.semantic.success,
-        bgColor: macOSColors.semantic.successBackground,
-        borderColor: macOSColors.semantic.success + "40",
-        label: "REQUIRED",
-        labelColor: macOSColors.semantic.success
-      };
-    case "required_missing":
-      return {
-        icon: AlertCircle,
-        color: macOSColors.semantic.error,
-        bgColor: macOSColors.semantic.errorBackground,
-        borderColor: macOSColors.semantic.error + "50",
-        label: "MISSING",
-        labelColor: macOSColors.semantic.error
-      };
-    case "required_wrong_value":
-      return {
-        icon: XCircle,
-        color: macOSColors.semantic.warning,
-        bgColor: macOSColors.semantic.warningBackground,
-        borderColor: macOSColors.semantic.warning + "50",
-        label: "WRONG S",
-        labelColor: macOSColors.semantic.warning
-      };
-    case "required_wrong_type":
-      return {
-        icon: XCircle,
-        color: macOSColors.semantic.info,
-        bgColor: macOSColors.semantic.infoBackground,
-        borderColor: macOSColors.semantic.info + "50",
-        label: "WRONG TYPE",
-        labelColor: macOSColors.semantic.info
-      };
-    case "optional_present":
-      return {
-        icon: Eye,
-        color: macOSColors.semantic.debug,
-        bgColor: macOSColors.semantic.infoBackground,
-        borderColor: macOSColors.semantic.debug + "40",
-        label: "OPTIONAL",
-        labelColor: macOSColors.semantic.debug
-      };
-  }
-};
-const getStorageIcon = storageType => {
-  switch (storageType) {
-    case "mmkv":
-      return HardDrive;
-    case "async":
-      return Database;
-    case "secure":
-      return Shield;
-    default:
-      return Database;
-    // Default fallback
-  }
-};
-
-/**
- * Storage key card component following composition principles [[rule3]]
- *
- * Applied principles:
- * - Decompose by Responsibility: Single purpose component for storage key display
- * - Prefer Composition over Configuration: Reuses existing patterns from EnvVarCard
- * - Extract Reusable Logic: Shares formatValue and status config patterns
- */
-export function StorageKeyCard({
-  storageKey,
-  isExpanded,
-  onToggle
-}) {
-  const config = getStatusConfig(storageKey.status);
-  const StatusIcon = config.icon;
-  const StorageIcon = getStorageIcon(storageKey.storageType);
-  const hasValue = storageKey.value !== undefined && storageKey.value !== null;
-  const hasExpectedValue = storageKey.expectedValue !== undefined;
-  const hasExpectedType = storageKey.expectedType !== undefined;
-  const storageTypeColor = getStorageTypeHexColor(storageKey.storageType);
-  const storageTypeLabel = getStorageTypeLabel(storageKey.storageType);
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.storageKeyCard, {
-      borderColor: config.borderColor
-    }],
-    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-      accessibilityLabel: "Storage key card",
-      accessibilityHint: "View storage key card",
-      "sentry-label": `ignore storage key card ${storageKey.key}`,
-      accessibilityRole: "button",
-      style: styles.cardHeader,
-      onPress: onToggle,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.cardHeaderLeft,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [styles.iconContainer, {
-            backgroundColor: config.bgColor
-          }],
-          children: /*#__PURE__*/_jsx(StatusIcon, {
-            size: 14,
-            color: config.color
-          })
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.cardHeaderInfo,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.storageKeyText,
-            children: storageKey.key
-          }), storageKey.description ? /*#__PURE__*/_jsx(Text, {
-            style: styles.descriptionText,
-            children: storageKey.description
-          }) : null, /*#__PURE__*/_jsxs(View, {
-            style: styles.cardHeaderMeta,
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.statusBadge, {
-                backgroundColor: config.bgColor
-              }],
-              children: /*#__PURE__*/_jsx(Text, {
-                style: [styles.statusText, {
-                  color: config.labelColor
-                }],
-                children: config.label
-              })
-            }), /*#__PURE__*/_jsxs(View, {
-              style: [styles.storageBadge, {
-                backgroundColor: `${storageTypeColor}15`
-              }],
-              children: [/*#__PURE__*/_jsx(StorageIcon, {
-                size: 10,
-                color: storageTypeColor
-              }), /*#__PURE__*/_jsx(Text, {
-                style: [styles.storageText, {
-                  color: storageTypeColor
-                }],
-                children: storageTypeLabel
-              })]
-            }), storageKey.storageType === 'mmkv' && storageKey.instanceId && /*#__PURE__*/_jsxs(View, {
-              style: [styles.instanceBadge, {
-                backgroundColor: getInstanceColor(storageKey.instanceId) + '20',
-                borderColor: getInstanceColor(storageKey.instanceId) + '40'
-              }],
-              children: [/*#__PURE__*/_jsx(HardDrive, {
-                size: 9,
-                color: getInstanceColor(storageKey.instanceId)
-              }), /*#__PURE__*/_jsx(Text, {
-                style: [styles.instanceText, {
-                  color: getInstanceColor(storageKey.instanceId)
-                }],
-                children: storageKey.instanceId
-              })]
-            }), hasValue && /*#__PURE__*/_jsx(View, {
-              style: styles.valueBadge,
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.valueText,
-                children: storageKey.valueType ? storageKey.valueType.toUpperCase() : getValueTypeLabel(storageKey.value)
-              })
-            })]
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.cardHeaderRight,
-        children: /*#__PURE__*/_jsx(View, {
-          style: styles.actionButton,
-          children: /*#__PURE__*/_jsx(Eye, {
-            size: 12,
-            color: night.color.textSecondary
-          })
-        })
-      })]
-    }), isExpanded && hasValue && /*#__PURE__*/_jsxs(View, {
-      style: styles.cardBody,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.dataViewerContainer,
-        children: (() => {
-          const parsed = typeof storageKey.value === "string" ? (() => {
-            try {
-              return JSON.parse(storageKey.value);
-            } catch {
-              return storageKey.value;
-            }
-          })() : storageKey.value;
-          const isSimple = typeof parsed === "string" || typeof parsed === "number" || typeof parsed === "boolean";
-          return isSimple ? /*#__PURE__*/_jsxs(View, {
-            style: styles.simpleValueContainer,
-            children: [/*#__PURE__*/_jsx(Text, {
-              style: styles.simpleValueLabel,
-              children: "Current Value:"
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.simpleValueBox,
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.simpleValueContent,
-                selectable: true,
-                children: String(parsed)
-              })
-            }), /*#__PURE__*/_jsxs(Text, {
-              style: styles.valueTypeText,
-              children: ["Type: ", getValueTypeLabel(storageKey.value)]
-            })]
-          }) : /*#__PURE__*/_jsx(DataViewer, {
-            title: "Current Value",
-            data: parsed,
-            showTypeFilter: false,
-            rawMode: true
-          });
-        })()
-      }), hasExpectedValue && /*#__PURE__*/_jsxs(View, {
-        style: styles.valueContainer,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.valueLabel,
-          children: "Expected Value:"
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.expectedValueBox,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.expectedValueContent,
-            selectable: true,
-            children: storageKey.expectedValue
-          })
-        })]
-      }), hasExpectedType && storageKey.expectedType && /*#__PURE__*/_jsxs(View, {
-        style: styles.valueContainer,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.valueLabel,
-          children: "Expected Type:"
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.expectedValueBox,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.expectedValueContent,
-            selectable: true,
-            children: storageKey.expectedType.toUpperCase()
-          })
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: styles.typeHelperText,
-          children: ["Current type: ", getValueTypeLabel(storageKey.value)]
-        })]
-      }), storageKey.lastUpdated ? /*#__PURE__*/_jsx(View, {
-        style: styles.metaInfo,
-        children: /*#__PURE__*/_jsxs(Text, {
-          style: styles.metaLabel,
-          children: ["Last updated: ", storageKey.lastUpdated.toLocaleString()]
-        })
-      }) : null]
-    }), isExpanded && !hasValue && /*#__PURE__*/_jsxs(View, {
-      style: styles.cardBody,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.emptyValueContainer,
-        children: [/*#__PURE__*/_jsx(AlertCircle, {
-          size: 16,
-          color: macOSColors.semantic.warning
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.emptyValueText,
-          children: "Storage key not found or empty"
-        })]
-      }), hasExpectedValue && /*#__PURE__*/_jsxs(View, {
-        style: styles.valueContainer,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.valueLabel,
-          children: "Expected Value:"
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.expectedValueBox,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.expectedValueContent,
-            selectable: true,
-            children: storageKey.expectedValue
-          })
-        })]
-      })]
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  storageKeyCard: {
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    overflow: "hidden"
-  },
-  cardHeader: {
-    padding: 12,
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  cardHeaderLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    flex: 1,
-    minWidth: 0
-  },
-  iconContainer: {
-    padding: 6,
-    borderRadius: 6,
-    marginRight: 10
-  },
-  cardHeaderInfo: {
-    flex: 1,
-    minWidth: 0,
-    gap: 4
-  },
-  storageKeyText: {
-    color: night.color.text,
-    fontWeight: "500",
-    fontSize: 12,
-    flexWrap: "wrap",
-    flex: 1
-  },
-  descriptionText: {
-    color: night.color.textSecondary,
-    fontSize: 10,
-    marginTop: 2,
-    flexWrap: "wrap"
-  },
-  cardHeaderMeta: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    flexWrap: "wrap"
-  },
-  statusBadge: {
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  statusText: {
-    fontSize: 9,
-    fontWeight: "600",
-    letterSpacing: 0.5
-  },
-  storageBadge: {
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 4,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  storageText: {
-    fontSize: 9,
-    fontWeight: "600"
-  },
-  instanceBadge: {
-    paddingHorizontal: 6,
-    paddingVertical: 3,
-    borderRadius: 4,
-    borderWidth: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4
-  },
-  instanceText: {
-    fontSize: 9,
-    fontWeight: "700",
-    fontFamily: monoFont,
-    letterSpacing: 0.3
-  },
-  valueBadge: {
-    paddingHorizontal: 4,
-    paddingVertical: 2,
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 3
-  },
-  valueText: {
-    fontSize: 8,
-    color: night.color.textSecondary,
-    fontWeight: "500"
-  },
-  cardHeaderRight: {
-    marginLeft: 8
-  },
-  actionButton: {
-    padding: 4,
-    borderRadius: 4,
-    backgroundColor: night.color.surfaceElevated
-  },
-  cardBody: {
-    borderTopWidth: 1,
-    borderTopColor: night.color.separator,
-    padding: 12,
-    gap: 12
-  },
-  dataViewerContainer: {
-    marginTop: 8
-  },
-  simpleValueContainer: {
-    gap: 8
-  },
-  simpleValueLabel: {
-    color: night.color.textSecondary,
-    fontSize: 10,
-    fontWeight: "500",
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  },
-  simpleValueBox: {
-    backgroundColor: night.color.bg,
-    borderRadius: 4,
-    padding: 10,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  simpleValueContent: {
-    color: gameUIColors.success,
-    fontSize: 12,
-    fontFamily: monoFont,
-    lineHeight: 16
-  },
-  valueTypeText: {
-    color: night.color.textTertiary,
-    fontSize: 9,
-    fontStyle: "italic"
-  },
-  valueContainer: {
-    gap: 6
-  },
-  valueLabel: {
-    color: night.color.textSecondary,
-    fontSize: 10,
-    fontWeight: "500",
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  },
-  valueBox: {
-    backgroundColor: night.color.bg,
-    borderRadius: 4,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  valueContent: {
-    color: night.color.text,
-    fontSize: 10,
-    fontFamily: monoFont,
-    lineHeight: 14
-  },
-  expectedValueBox: {
-    backgroundColor: night.color.bg,
-    borderRadius: 4,
-    padding: 8,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  expectedValueContent: {
-    color: night.color.text,
-    fontSize: 10,
-    fontFamily: monoFont,
-    lineHeight: 14
-  },
-  emptyValueContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    padding: 8,
-    backgroundColor: gameUIColors.warning + "0D",
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: gameUIColors.warning + "1A"
-  },
-  emptyValueText: {
-    color: gameUIColors.warning,
-    fontSize: 10,
-    fontStyle: "italic"
-  },
-  typeHelperText: {
-    color: night.color.textSecondary,
-    fontSize: 9,
-    marginTop: 4,
-    textAlign: "center"
-  },
-  metaInfo: {
-    marginTop: 8
-  },
-  metaLabel: {
-    color: night.color.textTertiary,
-    fontSize: 9,
-    fontStyle: "italic"
-  }
-});
+"use strict";import{View as l,Text as a,StyleSheet as H,TouchableOpacity as W}from"react-native";import{AlertCircle as C,CheckCircle2 as L,Eye as x,XCircle as T,HardDrive as S,Database as V,Shield as R,gameUIColors as u,macOSColors as o,night as n,monoFont as p}from"@buoy-gg/shared-ui";import{getStorageTypeLabel as D,getStorageTypeHexColor as E}from"../utils/storageQueryUtils";import{getValueTypeLabel as y}from"../utils/valueType";import{DataViewer as _}from"@buoy-gg/shared-ui/dataViewer";import{jsx as t,jsxs as i}from"react/jsx-runtime";const P={top:6,bottom:6,left:6,right:6};const v=[o.semantic.info,o.semantic.success,o.semantic.warning,o.semantic.debug,"#FF6B9D","#00D9FF"];function g(r){const s=r.split("").reduce((b,c)=>b+c.charCodeAt(0),0);return v[s%v.length]}const F=r=>{switch(r){case"required_present":return{icon:L,color:o.semantic.success,bgColor:o.semantic.successBackground,borderColor:o.semantic.success+"40",label:"REQUIRED",labelColor:o.semantic.success};case"required_missing":return{icon:C,color:o.semantic.error,bgColor:o.semantic.errorBackground,borderColor:o.semantic.error+"50",label:"MISSING",labelColor:o.semantic.error};case"required_wrong_value":return{icon:T,color:o.semantic.warning,bgColor:o.semantic.warningBackground,borderColor:o.semantic.warning+"50",label:"WRONG S",labelColor:o.semantic.warning};case"required_wrong_type":return{icon:T,color:o.semantic.info,bgColor:o.semantic.infoBackground,borderColor:o.semantic.info+"50",label:"WRONG TYPE",labelColor:o.semantic.info};case"optional_present":return{icon:x,color:o.semantic.debug,bgColor:o.semantic.infoBackground,borderColor:o.semantic.debug+"40",label:"OPTIONAL",labelColor:o.semantic.debug}}};const O=r=>{switch(r){case"mmkv":return S;case"async":return V;case"secure":return R;default:return V}};export function StorageKeyCard({storageKey:r,isExpanded:s,onToggle:b}){const c=F(r.status);const w=c.icon;const I=O(r.storageType);const m=r.value!==void 0&&r.value!==null;const f=r.expectedValue!==void 0;const B=r.expectedType!==void 0;const h=E(r.storageType);const k=D(r.storageType);return i(l,{style:[e.storageKeyCard,{borderColor:c.borderColor}],children:[i(W,{accessibilityLabel:"Storage key card",accessibilityHint:"View storage key card","sentry-label":`ignore storage key card ${r.key}`,accessibilityRole:"button",style:e.cardHeader,onPress:b,children:[i(l,{style:e.cardHeaderLeft,children:[t(l,{style:[e.iconContainer,{backgroundColor:c.bgColor}],children:t(w,{size:14,color:c.color})}),i(l,{style:e.cardHeaderInfo,children:[t(a,{style:e.storageKeyText,children:r.key}),r.description?t(a,{style:e.descriptionText,children:r.description}):null,i(l,{style:e.cardHeaderMeta,children:[t(l,{style:[e.statusBadge,{backgroundColor:c.bgColor}],children:t(a,{style:[e.statusText,{color:c.labelColor}],children:c.label})}),i(l,{style:[e.storageBadge,{backgroundColor:`${h}15`}],children:[t(I,{size:10,color:h}),t(a,{style:[e.storageText,{color:h}],children:k})]}),r.storageType==="mmkv"&&r.instanceId&&i(l,{style:[e.instanceBadge,{backgroundColor:g(r.instanceId)+"20",borderColor:g(r.instanceId)+"40"}],children:[t(S,{size:9,color:g(r.instanceId)}),t(a,{style:[e.instanceText,{color:g(r.instanceId)}],children:r.instanceId})]}),m&&t(l,{style:e.valueBadge,children:t(a,{style:e.valueText,children:r.valueType?r.valueType.toUpperCase():y(r.value)})})]})]})]}),t(l,{style:e.cardHeaderRight,children:t(l,{style:e.actionButton,children:t(x,{size:12,color:n.color.textSecondary})})})]}),s&&m&&i(l,{style:e.cardBody,children:[t(l,{style:e.dataViewerContainer,children:(()=>{const d=typeof r.value==="string"?(()=>{try{return JSON.parse(r.value)}catch{return r.value}})():r.value;const z=typeof d==="string"||typeof d==="number"||typeof d==="boolean";return z?i(l,{style:e.simpleValueContainer,children:[t(a,{style:e.simpleValueLabel,children:"Current Value:"}),t(l,{style:e.simpleValueBox,children:t(a,{style:e.simpleValueContent,selectable:true,children:String(d)})}),i(a,{style:e.valueTypeText,children:["Type: ",y(r.value)]})]}):t(_,{title:"Current Value",data:d,showTypeFilter:false,rawMode:true})})()}),f&&i(l,{style:e.valueContainer,children:[t(a,{style:e.valueLabel,children:"Expected Value:"}),t(l,{style:e.expectedValueBox,children:t(a,{style:e.expectedValueContent,selectable:true,children:r.expectedValue})})]}),B&&r.expectedType&&i(l,{style:e.valueContainer,children:[t(a,{style:e.valueLabel,children:"Expected Type:"}),t(l,{style:e.expectedValueBox,children:t(a,{style:e.expectedValueContent,selectable:true,children:r.expectedType.toUpperCase()})}),i(a,{style:e.typeHelperText,children:["Current type: ",y(r.value)]})]}),r.lastUpdated?t(l,{style:e.metaInfo,children:i(a,{style:e.metaLabel,children:["Last updated: ",r.lastUpdated.toLocaleString()]})}):null]}),s&&!m&&i(l,{style:e.cardBody,children:[i(l,{style:e.emptyValueContainer,children:[t(C,{size:16,color:o.semantic.warning}),t(a,{style:e.emptyValueText,children:"Storage key not found or empty"})]}),f&&i(l,{style:e.valueContainer,children:[t(a,{style:e.valueLabel,children:"Expected Value:"}),t(l,{style:e.expectedValueBox,children:t(a,{style:e.expectedValueContent,selectable:true,children:r.expectedValue})})]})]})]})}const e=H.create({storageKeyCard:{backgroundColor:n.color.surface,borderRadius:8,borderWidth:1,overflow:"hidden"},cardHeader:{padding:12,flexDirection:"row",alignItems:"center",justifyContent:"space-between"},cardHeaderLeft:{flexDirection:"row",alignItems:"center",flex:1,minWidth:0},iconContainer:{padding:6,borderRadius:6,marginRight:10},cardHeaderInfo:{flex:1,minWidth:0,gap:4},storageKeyText:{color:n.color.text,fontWeight:"500",fontSize:12,flexWrap:"wrap",flex:1},descriptionText:{color:n.color.textSecondary,fontSize:10,marginTop:2,flexWrap:"wrap"},cardHeaderMeta:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},statusBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4},statusText:{fontSize:9,fontWeight:"600",letterSpacing:.5},storageBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4,flexDirection:"row",alignItems:"center",gap:4},storageText:{fontSize:9,fontWeight:"600"},instanceBadge:{paddingHorizontal:6,paddingVertical:3,borderRadius:4,borderWidth:1,flexDirection:"row",alignItems:"center",gap:4},instanceText:{fontSize:9,fontWeight:"700",fontFamily:p,letterSpacing:.3},valueBadge:{paddingHorizontal:4,paddingVertical:2,backgroundColor:n.color.surfaceElevated,borderRadius:3},valueText:{fontSize:8,color:n.color.textSecondary,fontWeight:"500"},cardHeaderRight:{marginLeft:8},actionButton:{padding:4,borderRadius:4,backgroundColor:n.color.surfaceElevated},cardBody:{borderTopWidth:1,borderTopColor:n.color.separator,padding:12,gap:12},dataViewerContainer:{marginTop:8},simpleValueContainer:{gap:8},simpleValueLabel:{color:n.color.textSecondary,fontSize:10,fontWeight:"500",textTransform:"uppercase",letterSpacing:.5},simpleValueBox:{backgroundColor:n.color.bg,borderRadius:4,padding:10,borderWidth:1,borderColor:n.color.border},simpleValueContent:{color:u.success,fontSize:12,fontFamily:p,lineHeight:16},valueTypeText:{color:n.color.textTertiary,fontSize:9,fontStyle:"italic"},valueContainer:{gap:6},valueLabel:{color:n.color.textSecondary,fontSize:10,fontWeight:"500",textTransform:"uppercase",letterSpacing:.5},valueBox:{backgroundColor:n.color.bg,borderRadius:4,padding:8,borderWidth:1,borderColor:n.color.border},valueContent:{color:n.color.text,fontSize:10,fontFamily:p,lineHeight:14},expectedValueBox:{backgroundColor:n.color.bg,borderRadius:4,padding:8,borderWidth:1,borderColor:n.color.border},expectedValueContent:{color:n.color.text,fontSize:10,fontFamily:p,lineHeight:14},emptyValueContainer:{flexDirection:"row",alignItems:"center",gap:6,padding:8,backgroundColor:u.warning+"0D",borderRadius:4,borderWidth:1,borderColor:u.warning+"1A"},emptyValueText:{color:u.warning,fontSize:10,fontStyle:"italic"},typeHelperText:{color:n.color.textSecondary,fontSize:9,marginTop:4,textAlign:"center"},metaInfo:{marginTop:8},metaLabel:{color:n.color.textTertiary,fontSize:9,fontStyle:"italic"}});