@buoy-gg/zustand 7.0.38 → 7.0.39

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

@@ -1 +1,483 @@
-"use strict";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(e){switch(e){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(e){return void 0===e?"N/A":e<1?"<1ms":`${e.toFixed(1)}ms`}function SectionHeader({icon:e,title:t,badge:o,testID:r}){return _jsxs(View,{style:styles.sectionHeader,testID:r,children:[_jsxs(View,{style:styles.sectionHeaderLeft,children:[_jsx(e,{size:14,color:night.color.accent}),_jsx(Text,{style:styles.sectionTitle,children:t})]}),o]})}function formatTime(e){const t=new Date(e);return`${t.getHours().toString().padStart(2,"0")}:${t.getMinutes().toString().padStart(2,"0")}:${t.getSeconds().toString().padStart(2,"0")}.${t.getMilliseconds().toString().padStart(3,"0")}`}export const ZustandStateInfoView=memo(function({change:e}){const t=useIsPro(),[o,r]=useState(!1);useEffect(()=>{o&&t&&r(!1)},[o,t]);const a=getCategoryInfo(e.category),s=void 0!==e.partial&&"(updater fn)"!==e.partial,n=e.changedKeys.length>0,i=zustandStateStore.getStoreColor(e.storeName),l=useCallback(async()=>{t?await copyToClipboard(e.nextState):r(!0)},[e.nextState,t]),c=useCallback(()=>{const t=zustandStateStore.getStore(e.storeName);if(t?.api.getInitialState){const e=t.api.getInitialState();t.api.setState(e,!0)}},[e.storeName]),d=useCallback(()=>{const t=zustandStateStore.getStore(e.storeName);t&&t.api.setState(e.nextState,!0)},[e.storeName,e.nextState]);return _jsxs(ScrollView,{style:styles.container,contentContainerStyle:styles.contentContainer,showsVerticalScrollIndicator:!1,testID:`${ZUSTAND_TEST_ID}-detail-scroll`,children:[_jsxs(View,{style:styles.card,testID:`${ZUSTAND_TEST_ID}-info-card`,children:[_jsx(SectionHeader,{icon:Info,title:"CHANGE INFO"}),_jsxs(View,{style:styles.cardContent,children:[_jsx(InfoRow,{label:"Store",value:e.storeName,mono:!0,valueColor:i,testID:`${ZUSTAND_TEST_ID}-info-store`}),_jsx(InfoRow,{label:"Time",value:formatTime(e.timestamp),mono:!0,testID:`${ZUSTAND_TEST_ID}-info-time`}),_jsxs(View,{style:styles.badgeRow,children:[_jsx(View,{style:[styles.categoryBadge,{backgroundColor:a.bgColor}],children:_jsx(Text,{style:[styles.categoryText,{color:a.color}],testID:`${ZUSTAND_TEST_ID}-info-category`,children:a.label})}),_jsxs(View,{style:[styles.durationBadge,e.isSlowUpdate&&styles.durationBadgeSlow],children:[_jsx(Clock,{size:10,color:e.isSlowUpdate?buoyColors.error:night.color.textSecondary}),_jsx(Text,{style:[styles.durationText,e.isSlowUpdate&&styles.durationTextSlow],testID:`${ZUSTAND_TEST_ID}-info-duration`,children:formatDuration(e.duration)}),e.isSlowUpdate&&_jsx(AlertTriangle,{size:10,color:buoyColors.error})]}),e.hasStateChange?_jsxs(View,{style:styles.changesBadge,children:[_jsx(Zap,{size:10,color:buoyColors.success}),_jsx(Text,{style:styles.changesText,testID:`${ZUSTAND_TEST_ID}-info-changes`,children:e.diffSummary||"changed"})]}):_jsx(View,{style:styles.noChangesBadge,children:_jsx(Text,{style:styles.noChangesText,testID:`${ZUSTAND_TEST_ID}-info-no-changes`,children:"no change"})}),e.isPersisted&&_jsxs(View,{style:styles.persistBadge,children:[_jsx(Database,{size:10,color:buoyColors.info}),_jsx(Text,{style:styles.persistText,testID:`${ZUSTAND_TEST_ID}-info-persisted`,children:"PERSISTED"})]})]})]})]}),n&&_jsxs(View,{style:styles.card,testID:`${ZUSTAND_TEST_ID}-keys-card`,children:[_jsx(SectionHeader,{icon:Zap,title:"CHANGED KEYS",badge:_jsx(View,{style:styles.countBadge,children:_jsx(Text,{style:styles.countText,testID:`${ZUSTAND_TEST_ID}-keys-count`,children:e.changedKeys.length})})}),_jsx(View,{style:styles.cardContent,children:_jsx(View,{style:styles.keysContainer,children:e.changedKeys.map(e=>_jsx(View,{style:styles.keyBadge,children:_jsx(Text,{style:styles.keyText,testID:`${ZUSTAND_TEST_ID}-key-${e}`,children:e})},e))})})]}),s&&_jsxs(View,{style:styles.card,testID:`${ZUSTAND_TEST_ID}-partial-card`,children:[_jsx(SectionHeader,{icon:Box,title:"PARTIAL (setState argument)",badge:_jsx(View,{style:styles.typeBadge,children:_jsx(Text,{style:styles.typeText,testID:`${ZUSTAND_TEST_ID}-partial-type`,children:Array.isArray(e.partial)?"ARRAY":"object"==typeof e.partial?"OBJECT":String(typeof e.partial).toUpperCase()})})}),_jsx(View,{style:styles.dataViewerContainer,children:_jsx(DataViewer,{title:"",data:parseValue(e.partial),showTypeFilter:!0,rawMode:!0,initialExpanded:!0})})]}),"(updater fn)"===e.partial&&_jsxs(View,{style:styles.card,testID:`${ZUSTAND_TEST_ID}-updater-card`,children:[_jsx(SectionHeader,{icon:Box,title:"SET STATE CALL"}),_jsxs(View,{style:styles.cardContent,children:[_jsx(Text,{style:styles.updaterText,children:"Called with an updater function: set((state) => ...)"}),_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."})]})]}),_jsxs(View,{style:styles.actionsGrid,children:[_jsx(ZustandActionButton,{type:"jump",text:"JUMP",onPress:d,testID:`${ZUSTAND_TEST_ID}-jump`}),_jsx(ZustandActionButton,{type:"reset",text:"RESET STORE",onPress:c,testID:`${ZUSTAND_TEST_ID}-reset`}),_jsx(ZustandActionButton,{type:"copy",text:"COPY STATE",onPress:l,testID:`${ZUSTAND_TEST_ID}-copy-state`})]}),_jsx(ProUpgradeModal,{visible:o,onClose:()=>r(!1),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:.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:.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:.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:.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:{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";
+
+/**
+ * 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"
+  }
+});