@buoy-gg/zustand 7.0.41 → 7.0.42

package/lib/module/zustand/components/ZustandStateInfoView.js

@@ -1,483 +1 @@
-"use strict";
-
-/**
- * ZustandStateInfoView
- *
- * Displays comprehensive state change information including:
- * - Change metadata (store, category, duration)
- * - Partial data passed to setState
- * - Changed keys list
- *
- * Mirrors ReduxActionInfoView.tsx
- */
-
-import React, { memo, useCallback, useState, useEffect } from "react";
-import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { buoyColors, night, Clock, AlertTriangle, Zap, Info, Box, Database, parseValue, ProUpgradeModal, copyToClipboard, InfoRow, monoFont } from "@buoy-gg/shared-ui";
-import { useIsPro } from "@buoy-gg/license";
-import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
-import { ZustandActionButton } from "./ZustandActionButton";
-import { zustandStateStore } from "../utils/zustandStateStore";
-import { ZUSTAND_TEST_ID } from "../utils/testIDs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function getCategoryInfo(category) {
-  switch (category) {
-    case "replace":
-      return {
-        label: "REPLACE",
-        color: buoyColors.warning,
-        bgColor: buoyColors.warning + "26"
-      };
-    case "persist":
-      return {
-        label: "PERSIST",
-        color: buoyColors.info,
-        bgColor: buoyColors.info + "26"
-      };
-    case "initial":
-      return {
-        label: "INITIAL",
-        color: night.color.textTertiary,
-        bgColor: night.color.textTertiary + "26"
-      };
-    default:
-      return {
-        label: "SET STATE",
-        color: buoyColors.success,
-        bgColor: buoyColors.success + "26"
-      };
-  }
-}
-function formatDuration(duration) {
-  if (duration === undefined) return "N/A";
-  if (duration < 1) return "<1ms";
-  return `${duration.toFixed(1)}ms`;
-}
-function SectionHeader({
-  icon: Icon,
-  title,
-  badge,
-  testID
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.sectionHeader,
-    testID: testID,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.sectionHeaderLeft,
-      children: [/*#__PURE__*/_jsx(Icon, {
-        size: 14,
-        color: night.color.accent
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.sectionTitle,
-        children: title
-      })]
-    }), badge]
-  });
-}
-function formatTime(timestamp) {
-  const date = new Date(timestamp);
-  const hours = date.getHours().toString().padStart(2, "0");
-  const minutes = date.getMinutes().toString().padStart(2, "0");
-  const seconds = date.getSeconds().toString().padStart(2, "0");
-  const ms = date.getMilliseconds().toString().padStart(3, "0");
-  return `${hours}:${minutes}:${seconds}.${ms}`;
-}
-export const ZustandStateInfoView = /*#__PURE__*/memo(function ZustandStateInfoView({
-  change
-}) {
-  const isPro = useIsPro();
-  const [showProModal, setShowProModal] = useState(false);
-  useEffect(() => {
-    if (showProModal && isPro) {
-      setShowProModal(false);
-    }
-  }, [showProModal, isPro]);
-  const categoryInfo = getCategoryInfo(change.category);
-  const hasPartial = change.partial !== undefined && change.partial !== "(updater fn)";
-  const hasChangedKeys = change.changedKeys.length > 0;
-  const storeColor = zustandStateStore.getStoreColor(change.storeName);
-  const handleCopyState = useCallback(async () => {
-    if (!isPro) {
-      setShowProModal(true);
-      return;
-    }
-    await copyToClipboard(change.nextState);
-  }, [change.nextState, isPro]);
-  const handleResetStore = useCallback(() => {
-    const storeInfo = zustandStateStore.getStore(change.storeName);
-    if (storeInfo?.api.getInitialState) {
-      const initialState = storeInfo.api.getInitialState();
-      storeInfo.api.setState(initialState, true);
-    }
-  }, [change.storeName]);
-  const handleJumpToState = useCallback(() => {
-    const storeInfo = zustandStateStore.getStore(change.storeName);
-    if (storeInfo) {
-      storeInfo.api.setState(change.nextState, true);
-    }
-  }, [change.storeName, change.nextState]);
-  return /*#__PURE__*/_jsxs(ScrollView, {
-    style: styles.container,
-    contentContainerStyle: styles.contentContainer,
-    showsVerticalScrollIndicator: false,
-    testID: `${ZUSTAND_TEST_ID}-detail-scroll`,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.card,
-      testID: `${ZUSTAND_TEST_ID}-info-card`,
-      children: [/*#__PURE__*/_jsx(SectionHeader, {
-        icon: Info,
-        title: "CHANGE INFO"
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.cardContent,
-        children: [/*#__PURE__*/_jsx(InfoRow, {
-          label: "Store",
-          value: change.storeName,
-          mono: true,
-          valueColor: storeColor,
-          testID: `${ZUSTAND_TEST_ID}-info-store`
-        }), /*#__PURE__*/_jsx(InfoRow, {
-          label: "Time",
-          value: formatTime(change.timestamp),
-          mono: true,
-          testID: `${ZUSTAND_TEST_ID}-info-time`
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.badgeRow,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.categoryBadge, {
-              backgroundColor: categoryInfo.bgColor
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.categoryText, {
-                color: categoryInfo.color
-              }],
-              testID: `${ZUSTAND_TEST_ID}-info-category`,
-              children: categoryInfo.label
-            })
-          }), /*#__PURE__*/_jsxs(View, {
-            style: [styles.durationBadge, change.isSlowUpdate && styles.durationBadgeSlow],
-            children: [/*#__PURE__*/_jsx(Clock, {
-              size: 10,
-              color: change.isSlowUpdate ? buoyColors.error : night.color.textSecondary
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.durationText, change.isSlowUpdate && styles.durationTextSlow],
-              testID: `${ZUSTAND_TEST_ID}-info-duration`,
-              children: formatDuration(change.duration)
-            }), change.isSlowUpdate && /*#__PURE__*/_jsx(AlertTriangle, {
-              size: 10,
-              color: buoyColors.error
-            })]
-          }), change.hasStateChange ? /*#__PURE__*/_jsxs(View, {
-            style: styles.changesBadge,
-            children: [/*#__PURE__*/_jsx(Zap, {
-              size: 10,
-              color: buoyColors.success
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.changesText,
-              testID: `${ZUSTAND_TEST_ID}-info-changes`,
-              children: change.diffSummary || "changed"
-            })]
-          }) : /*#__PURE__*/_jsx(View, {
-            style: styles.noChangesBadge,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.noChangesText,
-              testID: `${ZUSTAND_TEST_ID}-info-no-changes`,
-              children: "no change"
-            })
-          }), change.isPersisted && /*#__PURE__*/_jsxs(View, {
-            style: styles.persistBadge,
-            children: [/*#__PURE__*/_jsx(Database, {
-              size: 10,
-              color: buoyColors.info
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.persistText,
-              testID: `${ZUSTAND_TEST_ID}-info-persisted`,
-              children: "PERSISTED"
-            })]
-          })]
-        })]
-      })]
-    }), hasChangedKeys && /*#__PURE__*/_jsxs(View, {
-      style: styles.card,
-      testID: `${ZUSTAND_TEST_ID}-keys-card`,
-      children: [/*#__PURE__*/_jsx(SectionHeader, {
-        icon: Zap,
-        title: "CHANGED KEYS",
-        badge: /*#__PURE__*/_jsx(View, {
-          style: styles.countBadge,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.countText,
-            testID: `${ZUSTAND_TEST_ID}-keys-count`,
-            children: change.changedKeys.length
-          })
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.cardContent,
-        children: /*#__PURE__*/_jsx(View, {
-          style: styles.keysContainer,
-          children: change.changedKeys.map(key => /*#__PURE__*/_jsx(View, {
-            style: styles.keyBadge,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.keyText,
-              testID: `${ZUSTAND_TEST_ID}-key-${key}`,
-              children: key
-            })
-          }, key))
-        })
-      })]
-    }), hasPartial && /*#__PURE__*/_jsxs(View, {
-      style: styles.card,
-      testID: `${ZUSTAND_TEST_ID}-partial-card`,
-      children: [/*#__PURE__*/_jsx(SectionHeader, {
-        icon: Box,
-        title: "PARTIAL (setState argument)",
-        badge: /*#__PURE__*/_jsx(View, {
-          style: styles.typeBadge,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: styles.typeText,
-            testID: `${ZUSTAND_TEST_ID}-partial-type`,
-            children: Array.isArray(change.partial) ? "ARRAY" : typeof change.partial === "object" ? "OBJECT" : String(typeof change.partial).toUpperCase()
-          })
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.dataViewerContainer,
-        children: /*#__PURE__*/_jsx(DataViewer, {
-          title: "",
-          data: parseValue(change.partial),
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        })
-      })]
-    }), change.partial === "(updater fn)" && /*#__PURE__*/_jsxs(View, {
-      style: styles.card,
-      testID: `${ZUSTAND_TEST_ID}-updater-card`,
-      children: [/*#__PURE__*/_jsx(SectionHeader, {
-        icon: Box,
-        title: "SET STATE CALL"
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.cardContent,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.updaterText,
-          children: "Called with an updater function: set((state) => ...)"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.updaterSubtext,
-          children: "The partial value is computed at runtime from the previous state. See the DIFF tab to view the resulting changes."
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.actionsGrid,
-      children: [/*#__PURE__*/_jsx(ZustandActionButton, {
-        type: "jump",
-        text: "JUMP",
-        onPress: handleJumpToState,
-        testID: `${ZUSTAND_TEST_ID}-jump`
-      }), /*#__PURE__*/_jsx(ZustandActionButton, {
-        type: "reset",
-        text: "RESET STORE",
-        onPress: handleResetStore,
-        testID: `${ZUSTAND_TEST_ID}-reset`
-      }), /*#__PURE__*/_jsx(ZustandActionButton, {
-        type: "copy",
-        text: "COPY STATE",
-        onPress: handleCopyState,
-        testID: `${ZUSTAND_TEST_ID}-copy-state`
-      })]
-    }), /*#__PURE__*/_jsx(ProUpgradeModal, {
-      visible: showProModal,
-      onClose: () => setShowProModal(false),
-      featureName: "Copy"
-    })]
-  });
-});
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  contentContainer: {
-    padding: 8,
-    paddingBottom: 100,
-    gap: 16
-  },
-  card: {
-    backgroundColor: night.color.surface,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.accentBorderStrong,
-    overflow: "hidden",
-    shadowColor: night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 6
-  },
-  sectionHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.accentBorder,
-    backgroundColor: night.color.accentSoft
-  },
-  sectionHeaderLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  sectionTitle: {
-    fontSize: 12,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    color: night.color.accent,
-    fontFamily: monoFont
-  },
-  cardContent: {
-    padding: 14,
-    gap: 10
-  },
-  badgeRow: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8,
-    marginTop: 6
-  },
-  categoryBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4
-  },
-  categoryText: {
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.3
-  },
-  durationBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: night.color.surfaceElevated
-  },
-  durationBadgeSlow: {
-    backgroundColor: buoyColors.error + "26"
-  },
-  durationText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: night.color.textSecondary,
-    fontFamily: monoFont
-  },
-  durationTextSlow: {
-    color: buoyColors.error
-  },
-  changesBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: buoyColors.success + "26"
-  },
-  changesText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: buoyColors.success
-  },
-  noChangesBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: night.color.surfaceElevated
-  },
-  noChangesText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: night.color.textTertiary
-  },
-  persistBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: buoyColors.info + "26"
-  },
-  persistText: {
-    fontSize: 9,
-    fontWeight: "700",
-    color: buoyColors.info,
-    letterSpacing: 0.3
-  },
-  keysContainer: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6
-  },
-  keyBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
-    backgroundColor: night.color.accentSoft,
-    borderWidth: 1,
-    borderColor: night.color.accentBorder
-  },
-  keyText: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: night.color.accent,
-    fontFamily: monoFont
-  },
-  countBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: night.color.accentFill
-  },
-  countText: {
-    fontSize: 9,
-    fontWeight: "700",
-    color: night.color.accent,
-    fontFamily: monoFont
-  },
-  typeBadge: {
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 3,
-    backgroundColor: night.color.surfaceElevated
-  },
-  typeText: {
-    fontSize: 8,
-    fontWeight: "600",
-    color: night.color.textTertiary,
-    fontFamily: monoFont
-  },
-  dataViewerContainer: {
-    // Inset display panel — darker than the card, the night track color.
-    backgroundColor: night.color.bg,
-    minHeight: 60
-  },
-  updaterText: {
-    fontSize: 12,
-    color: night.color.text,
-    fontFamily: monoFont
-  },
-  updaterSubtext: {
-    fontSize: 11,
-    color: night.color.textTertiary,
-    lineHeight: 16,
-    marginTop: 4
-  },
-  actionsGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 12,
-    justifyContent: "flex-start"
-  }
-});
+"use strict";import _,{memo as R,useCallback as m,useState as k,useEffect as H}from"react";import{View as a,Text as s,StyleSheet as A,ScrollView as V}from"react-native";import{buoyColors as i,night as r,Clock as P,AlertTriangle as W,Zap as C,Info as F,Box as T,Database as N,parseValue as v,ProUpgradeModal as j,copyToClipboard as U,InfoRow as b,monoFont as g}from"@buoy-gg/shared-ui";import{useIsPro as L}from"@buoy-gg/license";import{DataViewer as M}from"@buoy-gg/shared-ui/dataViewer";import{ZustandActionButton as h}from"./ZustandActionButton";import{zustandStateStore as x}from"../utils/zustandStateStore";import{ZUSTAND_TEST_ID as n}from"../utils/testIDs";import{jsx as o,jsxs as l}from"react/jsx-runtime";function O(d){switch(d){case"replace":return{label:"REPLACE",color:i.warning,bgColor:i.warning+"26"};case"persist":return{label:"PERSIST",color:i.info,bgColor:i.info+"26"};case"initial":return{label:"INITIAL",color:r.color.textTertiary,bgColor:r.color.textTertiary+"26"};default:return{label:"SET STATE",color:i.success,bgColor:i.success+"26"}}}function K(d){if(d===void 0)return"N/A";if(d<1)return"<1ms";return`${d.toFixed(1)}ms`}function S({icon:d,title:t,badge:p,testID:u}){return l(a,{style:e.sectionHeader,testID:u,children:[l(a,{style:e.sectionHeaderLeft,children:[o(d,{size:14,color:r.color.accent}),o(s,{style:e.sectionTitle,children:t})]}),p]})}function Z(d){const t=new Date(d);const p=t.getHours().toString().padStart(2,"0");const u=t.getMinutes().toString().padStart(2,"0");const f=t.getSeconds().toString().padStart(2,"0");const y=t.getMilliseconds().toString().padStart(3,"0");return`${p}:${u}:${f}.${y}`}export const ZustandStateInfoView=R(function d({change:t}){const p=L();const[u,f]=k(false);H(()=>{if(u&&p){f(false)}},[u,p]);const y=O(t.category);const w=t.partial!==void 0&&t.partial!=="(updater fn)";const I=t.changedKeys.length>0;const D=x.getStoreColor(t.storeName);const B=m(async()=>{if(!p){f(true);return}await U(t.nextState)},[t.nextState,p]);const z=m(()=>{const c=x.getStore(t.storeName);if(c?.api.getInitialState){const E=c.api.getInitialState();c.api.setState(E,true)}},[t.storeName]);const $=m(()=>{const c=x.getStore(t.storeName);if(c){c.api.setState(t.nextState,true)}},[t.storeName,t.nextState]);return l(V,{style:e.container,contentContainerStyle:e.contentContainer,showsVerticalScrollIndicator:false,testID:`${n}-detail-scroll`,children:[l(a,{style:e.card,testID:`${n}-info-card`,children:[o(S,{icon:F,title:"CHANGE INFO"}),l(a,{style:e.cardContent,children:[o(b,{label:"Store",value:t.storeName,mono:true,valueColor:D,testID:`${n}-info-store`}),o(b,{label:"Time",value:Z(t.timestamp),mono:true,testID:`${n}-info-time`}),l(a,{style:e.badgeRow,children:[o(a,{style:[e.categoryBadge,{backgroundColor:y.bgColor}],children:o(s,{style:[e.categoryText,{color:y.color}],testID:`${n}-info-category`,children:y.label})}),l(a,{style:[e.durationBadge,t.isSlowUpdate&&e.durationBadgeSlow],children:[o(P,{size:10,color:t.isSlowUpdate?i.error:r.color.textSecondary}),o(s,{style:[e.durationText,t.isSlowUpdate&&e.durationTextSlow],testID:`${n}-info-duration`,children:K(t.duration)}),t.isSlowUpdate&&o(W,{size:10,color:i.error})]}),t.hasStateChange?l(a,{style:e.changesBadge,children:[o(C,{size:10,color:i.success}),o(s,{style:e.changesText,testID:`${n}-info-changes`,children:t.diffSummary||"changed"})]}):o(a,{style:e.noChangesBadge,children:o(s,{style:e.noChangesText,testID:`${n}-info-no-changes`,children:"no change"})}),t.isPersisted&&l(a,{style:e.persistBadge,children:[o(N,{size:10,color:i.info}),o(s,{style:e.persistText,testID:`${n}-info-persisted`,children:"PERSISTED"})]})]})]})]}),I&&l(a,{style:e.card,testID:`${n}-keys-card`,children:[o(S,{icon:C,title:"CHANGED KEYS",badge:o(a,{style:e.countBadge,children:o(s,{style:e.countText,testID:`${n}-keys-count`,children:t.changedKeys.length})})}),o(a,{style:e.cardContent,children:o(a,{style:e.keysContainer,children:t.changedKeys.map(c=>o(a,{style:e.keyBadge,children:o(s,{style:e.keyText,testID:`${n}-key-${c}`,children:c})},c))})})]}),w&&l(a,{style:e.card,testID:`${n}-partial-card`,children:[o(S,{icon:T,title:"PARTIAL (setState argument)",badge:o(a,{style:e.typeBadge,children:o(s,{style:e.typeText,testID:`${n}-partial-type`,children:Array.isArray(t.partial)?"ARRAY":typeof t.partial==="object"?"OBJECT":String(typeof t.partial).toUpperCase()})})}),o(a,{style:e.dataViewerContainer,children:o(M,{title:"",data:v(t.partial),showTypeFilter:true,rawMode:true,initialExpanded:true})})]}),t.partial==="(updater fn)"&&l(a,{style:e.card,testID:`${n}-updater-card`,children:[o(S,{icon:T,title:"SET STATE CALL"}),l(a,{style:e.cardContent,children:[o(s,{style:e.updaterText,children:"Called with an updater function: set((state) => ...)"}),o(s,{style:e.updaterSubtext,children:"The partial value is computed at runtime from the previous state. See the DIFF tab to view the resulting changes."})]})]}),l(a,{style:e.actionsGrid,children:[o(h,{type:"jump",text:"JUMP",onPress:$,testID:`${n}-jump`}),o(h,{type:"reset",text:"RESET STORE",onPress:z,testID:`${n}-reset`}),o(h,{type:"copy",text:"COPY STATE",onPress:B,testID:`${n}-copy-state`})]}),o(j,{visible:u,onClose:()=>f(false),featureName:"Copy"})]})});const e=A.create({container:{flex:1},contentContainer:{padding:8,paddingBottom:100,gap:16},card:{backgroundColor:r.color.surface,borderRadius:6,borderWidth:1,borderColor:r.color.accentBorderStrong,overflow:"hidden",shadowColor:r.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:6},sectionHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:r.color.accentBorder,backgroundColor:r.color.accentSoft},sectionHeaderLeft:{flexDirection:"row",alignItems:"center",gap:6},sectionTitle:{fontSize:12,fontWeight:"600",letterSpacing:.5,color:r.color.accent,fontFamily:g},cardContent:{padding:14,gap:10},badgeRow:{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:6},categoryBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4},categoryText:{fontSize:9,fontWeight:"700",letterSpacing:.3},durationBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:r.color.surfaceElevated},durationBadgeSlow:{backgroundColor:i.error+"26"},durationText:{fontSize:9,fontWeight:"600",color:r.color.textSecondary,fontFamily:g},durationTextSlow:{color:i.error},changesBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:i.success+"26"},changesText:{fontSize:9,fontWeight:"600",color:i.success},noChangesBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:r.color.surfaceElevated},noChangesText:{fontSize:9,fontWeight:"600",color:r.color.textTertiary},persistBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:i.info+"26"},persistText:{fontSize:9,fontWeight:"700",color:i.info,letterSpacing:.3},keysContainer:{flexDirection:"row",flexWrap:"wrap",gap:6},keyBadge:{paddingHorizontal:8,paddingVertical:4,borderRadius:4,backgroundColor:r.color.accentSoft,borderWidth:1,borderColor:r.color.accentBorder},keyText:{fontSize:11,fontWeight:"600",color:r.color.accent,fontFamily:g},countBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:r.color.accentFill},countText:{fontSize:9,fontWeight:"700",color:r.color.accent,fontFamily:g},typeBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:3,backgroundColor:r.color.surfaceElevated},typeText:{fontSize:8,fontWeight:"600",color:r.color.textTertiary,fontFamily:g},dataViewerContainer:{backgroundColor:r.color.bg,minHeight:60},updaterText:{fontSize:12,color:r.color.text,fontFamily:g},updaterSubtext:{fontSize:11,color:r.color.textTertiary,lineHeight:16,marginTop:4},actionsGrid:{flexDirection:"row",flexWrap:"wrap",gap:12,justifyContent:"flex-start"}});