@buoy-gg/zustand 7.0.41 → 7.0.43

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

@@ -1,113 +1 @@
-"use strict";
-
-/**
- * Compact list item for displaying a Zustand state change
- *
- * Mirrors ReduxActionItem.tsx - uses shared CompactRow for consistent styling
- */
-
-import { memo } from "react";
-import { ChangeRow, buoyColors, night } from "@buoy-gg/shared-ui";
-import { zustandStateStore } from "../utils/zustandStateStore";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Get status label based on category
- */
-function getStatusLabel(category, storeName) {
-  switch (category) {
-    case "replace":
-      return "Replace";
-    case "persist":
-      return "Hydrate";
-    case "initial":
-      return "Initial";
-    default:
-      return storeName.charAt(0).toUpperCase() + storeName.slice(1);
-  }
-}
-
-/**
- * Get color for category
- */
-function getCategoryColor(category, storeName) {
-  switch (category) {
-    case "replace":
-      return buoyColors.warning;
-    case "persist":
-      return buoyColors.info;
-    case "initial":
-      return night.color.textTertiary;
-    default:
-      return zustandStateStore.getStoreColor(storeName);
-  }
-}
-
-/**
- * Get sublabel with duration and diff info
- */
-function getSublabel(change) {
-  const parts = [];
-  if (change.duration !== undefined && change.duration >= 0.1) {
-    parts.push(`${change.duration.toFixed(1)}ms`);
-  }
-  if (change.hasStateChange) {
-    if (change.changedKeysCount > 0) {
-      parts.push(`${change.changedKeysCount} key${change.changedKeysCount > 1 ? "s" : ""} changed`);
-    } else {
-      parts.push(change.diffSummary || "state changed");
-    }
-  } else {
-    parts.push("no state change");
-  }
-  return parts.join(" \u00B7 ");
-}
-
-/**
- * Get badge text for the change
- */
-function getBadgeText(change) {
-  if (change.category === "replace") return "REPLACE";
-  if (change.category === "persist") return "HYDRATE";
-  if (change.category === "initial") return "INIT";
-  return "SET";
-}
-
-/**
- * Get primary display text
- */
-function getPrimaryText(change) {
-  if (change.changedKeys.length > 0 && change.changedKeys.length <= 3) {
-    return change.changedKeys.join(", ");
-  }
-  if (change.changedKeys.length > 3) {
-    return `${change.changedKeys.slice(0, 2).join(", ")} +${change.changedKeys.length - 2}`;
-  }
-  return change.partialPreview || "setState()";
-}
-
-// Memo justified by profiling (tool-bench 2026-07-06): unmemoized, every
-// visible row re-rendered on each store emission. Leaf w/ stable props
-// ({change, onPress} — onPress is a stable useCallback in the modal).
-export const ZustandStateChangeItem = /*#__PURE__*/memo(function ZustandStateChangeItem({
-  change,
-  onPress,
-  testID
-}) {
-  const statusColor = getCategoryColor(change.category, change.storeName);
-  const statusLabel = getStatusLabel(change.category, change.storeName);
-  const sublabel = getSublabel(change);
-  const primaryText = getPrimaryText(change);
-  const badgeText = getBadgeText(change);
-  return /*#__PURE__*/_jsx(ChangeRow, {
-    statusColor: statusColor,
-    statusLabel: statusLabel,
-    sublabel: sublabel,
-    primaryText: primaryText,
-    timestamp: change.timestamp,
-    badgeText: badgeText,
-    changed: change.hasStateChange,
-    slow: change.isSlowUpdate,
-    onPress: () => onPress(change),
-    testID: testID
-  });
-});
+"use strict";import{memo as d}from"react";import{ChangeRow as p,buoyColors as r,night as f}from"@buoy-gg/shared-ui";import{zustandStateStore as c}from"../utils/zustandStateStore";import{jsx as m}from"react/jsx-runtime";function y(t,e){switch(t){case"replace":return"Replace";case"persist":return"Hydrate";case"initial":return"Initial";default:return e.charAt(0).toUpperCase()+e.slice(1)}}function C(t,e){switch(t){case"replace":return r.warning;case"persist":return r.info;case"initial":return f.color.textTertiary;default:return c.getStoreColor(e)}}function g(t){const e=[];if(t.duration!==void 0&&t.duration>=.1){e.push(`${t.duration.toFixed(1)}ms`)}if(t.hasStateChange){if(t.changedKeysCount>0){e.push(`${t.changedKeysCount} key${t.changedKeysCount>1?"s":""} changed`)}else{e.push(t.diffSummary||"state changed")}}else{e.push("no state change")}return e.join(" \xB7 ")}function S(t){if(t.category==="replace")return"REPLACE";if(t.category==="persist")return"HYDRATE";if(t.category==="initial")return"INIT";return"SET"}function b(t){if(t.changedKeys.length>0&&t.changedKeys.length<=3){return t.changedKeys.join(", ")}if(t.changedKeys.length>3){return`${t.changedKeys.slice(0,2).join(", ")} +${t.changedKeys.length-2}`}return t.partialPreview||"setState()"}export const ZustandStateChangeItem=d(function t({change:e,onPress:s,testID:a}){const o=C(e.category,e.storeName);const i=y(e.category,e.storeName);const n=g(e);const u=b(e);const l=S(e);return m(p,{statusColor:o,statusLabel:i,sublabel:n,primaryText:u,timestamp:e.timestamp,badgeText:l,changed:e.hasStateChange,slow:e.isSlowUpdate,onPress:()=>s(e),testID:a})});

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

@@ -1,368 +1 @@
-"use strict";
-
-/**
- * ZustandStateDetailContent
- *
- * Detail view for a Zustand state change with 3 view modes:
- * - CHANGE: View change details, partial, metadata
- * - STATE: View current state after change
- * - DIFF: Compare prev vs next state
- *
- * Mirrors ReduxActionDetailContent.tsx
- */
-
-import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { useState, useCallback, useMemo } from "react";
-import { night, EventStepperFooter, formatRelativeTime, parseValue, monoFont } from "@buoy-gg/shared-ui";
-import { DataViewer, SplitDiffViewer, TreeDiffViewer, diffThemes } from "@buoy-gg/shared-ui/dataViewer";
-import { ZustandDetailViewToggle } from "./ZustandDetailViewToggle";
-import { ZustandStateInfoView } from "./ZustandStateInfoView";
-import { DiffModeTabs, CompareBar } from "@buoy-gg/shared-ui";
-import { zustandStateStore } from "../utils/zustandStateStore";
-import { ZUSTAND_TEST_ID } from "../utils/testIDs";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function getChangeColor(change) {
-  return zustandStateStore.getStoreColor(change.storeName);
-}
-function getChangeLabel(change) {
-  switch (change.category) {
-    case "replace":
-      return "REPLACE";
-    case "persist":
-      return "HYDRATE";
-    case "initial":
-      return "INIT";
-    default:
-      return "SET";
-  }
-}
-function getValueType(value) {
-  if (value === null) return "null";
-  if (value === undefined) return "undefined";
-  if (Array.isArray(value)) return "array";
-  return typeof value;
-}
-function formatTimestamp(timestamp) {
-  const date = new Date(timestamp);
-  return date.toLocaleTimeString("en-US", {
-    hour12: false,
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit"
-  });
-}
-const DIFF_MODE_TABS = [{
-  key: "tree",
-  label: "TREE VIEW"
-}, {
-  key: "split",
-  label: "SPLIT VIEW"
-}];
-export function ZustandStateDetailContent({
-  change,
-  changes,
-  selectedIndex,
-  onIndexChange,
-  disableInternalFooter = false,
-  initialView = "change"
-}) {
-  const [activeView, setActiveView] = useState(initialView);
-  const [diffMode, setDiffMode] = useState("tree");
-  const totalChanges = changes.length;
-  const changeColor = getChangeColor(change);
-  const changeLabel = getChangeLabel(change);
-  const stateType = getValueType(parseValue(change.nextState));
-
-  // Changes are in reverse chronological order (newest first)
-  const chronologicalNumber = totalChanges - selectedIndex;
-  const prevChronologicalNumber = chronologicalNumber - 1;
-  const prevChangeIndex = selectedIndex < totalChanges - 1 ? selectedIndex + 1 : null;
-  const prevChange = prevChangeIndex !== null ? changes[prevChangeIndex] : null;
-
-  // Compare bar info
-  const leftEvent = useMemo(() => ({
-    index: prevChangeIndex ?? 0,
-    label: prevChronologicalNumber > 0 ? `#${prevChronologicalNumber}` : "Initial",
-    timestamp: prevChange ? formatTimestamp(prevChange.timestamp) : "",
-    relativeTime: prevChange ? formatRelativeTime(new Date(prevChange.timestamp)) : "state",
-    badge: prevChange ? /*#__PURE__*/_jsx(View, {
-      style: [styles.changeBadgeSmall, {
-        backgroundColor: `${getChangeColor(prevChange)}20`
-      }],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.changeTextSmall, {
-          color: getChangeColor(prevChange)
-        }],
-        children: getChangeLabel(prevChange)
-      })
-    }) : undefined
-  }), [prevChangeIndex, prevChange, prevChronologicalNumber]);
-  const rightEvent = useMemo(() => ({
-    index: selectedIndex,
-    label: `#${chronologicalNumber}`,
-    timestamp: formatTimestamp(change.timestamp),
-    relativeTime: formatRelativeTime(new Date(change.timestamp)),
-    badge: /*#__PURE__*/_jsx(View, {
-      style: [styles.changeBadgeSmall, {
-        backgroundColor: `${changeColor}20`
-      }],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.changeTextSmall, {
-          color: changeColor
-        }],
-        children: changeLabel
-      })
-    })
-  }), [selectedIndex, change.timestamp, changeColor, changeLabel, chronologicalNumber]);
-  const renderStateView = useCallback(() => {
-    const parsed = parseValue(change.nextState);
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.contentCard,
-      testID: `${ZUSTAND_TEST_ID}-state-card`,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.valueHeader,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.valueLabel,
-          children: "STATE AFTER CHANGE"
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.valueHeaderBadges,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.changeBadge, {
-              backgroundColor: `${changeColor}20`
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.changeText, {
-                color: changeColor
-              }],
-              children: changeLabel
-            })
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.typeBadge,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.typeText,
-              testID: `${ZUSTAND_TEST_ID}-state-type`,
-              children: stateType.toUpperCase()
-            })
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.dataViewerContainer,
-        children: /*#__PURE__*/_jsx(DataViewer, {
-          title: "",
-          data: parsed,
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        })
-      })]
-    });
-  }, [change.nextState, changeColor, changeLabel, stateType]);
-  const renderDiffContent = useCallback(() => {
-    const prevState = parseValue(change.prevState);
-    const nextState = parseValue(change.nextState);
-    if (diffMode === "split") {
-      return /*#__PURE__*/_jsx(ScrollView, {
-        style: {
-          flex: 1
-        },
-        showsVerticalScrollIndicator: true,
-        children: /*#__PURE__*/_jsx(SplitDiffViewer, {
-          oldValue: prevState,
-          newValue: nextState,
-          theme: diffThemes.devToolsDefault,
-          options: {
-            hideLineNumbers: false,
-            disableWordDiff: false,
-            showDiffOnly: false,
-            compareMethod: "words",
-            contextLines: 3
-          },
-          showThemeName: false
-        })
-      });
-    }
-    return /*#__PURE__*/_jsx(TreeDiffViewer, {
-      oldValue: prevState,
-      newValue: nextState
-    });
-  }, [change.prevState, change.nextState, diffMode]);
-  const handleFooterPrevious = useCallback(() => {
-    onIndexChange(Math.min(totalChanges - 1, selectedIndex + 1));
-  }, [selectedIndex, totalChanges, onIndexChange]);
-  const handleFooterNext = useCallback(() => {
-    onIndexChange(Math.max(0, selectedIndex - 1));
-  }, [selectedIndex, onIndexChange]);
-
-  // The diff compares THIS change's prevState/nextState — both live on the
-  // change itself, so it needs no siblings. Gating on `changes.length` greyed
-  // DIFF out for every zustand event opened from the Events timeline, which
-  // hands this component a one-element array. Only a change with no captured
-  // previous state (initial creation) has nothing to compare.
-  const diffDisabled = change.prevState === undefined;
-  const showInternalFooter = !disableInternalFooter && totalChanges > 1;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
-    children: [/*#__PURE__*/_jsx(ZustandDetailViewToggle, {
-      activeView: activeView,
-      onViewChange: setActiveView,
-      diffDisabled: diffDisabled
-    }), /*#__PURE__*/_jsxs(View, {
-      style: [styles.contentArea, showInternalFooter && styles.contentAreaFooterPad],
-      children: [activeView === "change" && /*#__PURE__*/_jsx(ZustandStateInfoView, {
-        change: change
-      }), activeView === "state" && /*#__PURE__*/_jsx(View, {
-        style: styles.stateContainer,
-        children: renderStateView()
-      }), activeView === "diff" && /*#__PURE__*/_jsxs(View, {
-        style: styles.diffContainer,
-        testID: `${ZUSTAND_TEST_ID}-diff`,
-        children: [/*#__PURE__*/_jsx(DiffModeTabs, {
-          tabs: DIFF_MODE_TABS,
-          activeTab: diffMode,
-          onTabChange: setDiffMode,
-          testIDPrefix: `${ZUSTAND_TEST_ID}-diff-tab`
-        }), /*#__PURE__*/_jsx(CompareBar, {
-          leftEvent: leftEvent,
-          rightEvent: rightEvent
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.diffContent,
-          testID: `${ZUSTAND_TEST_ID}-diff-content`,
-          children: renderDiffContent()
-        })]
-      })]
-    }), showInternalFooter && /*#__PURE__*/_jsx(EventStepperFooter, {
-      currentIndex: chronologicalNumber - 1,
-      totalItems: totalChanges,
-      onPrevious: handleFooterPrevious,
-      onNext: handleFooterNext,
-      itemLabel: "Change",
-      subtitle: formatRelativeTime(new Date(change.timestamp)),
-      absolute: true
-    })]
-  });
-}
-
-/**
- * External footer component for modal use
- */
-export function ZustandStateDetailFooter({
-  change,
-  changes,
-  selectedIndex,
-  onIndexChange
-}) {
-  const totalChanges = changes.length;
-  if (totalChanges <= 1) return null;
-  const chronologicalNumber = totalChanges - selectedIndex;
-  return /*#__PURE__*/_jsx(EventStepperFooter, {
-    currentIndex: chronologicalNumber - 1,
-    totalItems: totalChanges,
-    onPrevious: () => onIndexChange(Math.min(totalChanges - 1, selectedIndex + 1)),
-    onNext: () => onIndexChange(Math.max(0, selectedIndex - 1)),
-    itemLabel: "Change",
-    subtitle: formatRelativeTime(new Date(change.timestamp))
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  contentArea: {
-    flex: 1
-  },
-  // Clearance for the absolute EventStepperFooter — only when it renders,
-  // otherwise hosts like the Events tool get a dead band at the sheet bottom.
-  contentAreaFooterPad: {
-    paddingBottom: 96
-  },
-  stateContainer: {
-    flex: 1,
-    padding: 14
-  },
-  contentCard: {
-    backgroundColor: night.color.surface,
-    borderRadius: 14,
-    padding: 14,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  valueHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 8
-  },
-  valueLabel: {
-    fontSize: 10,
-    color: night.color.textSecondary,
-    fontFamily: monoFont,
-    letterSpacing: 0.5,
-    fontWeight: "600"
-  },
-  valueHeaderBadges: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  changeBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  changeText: {
-    fontSize: 9,
-    fontWeight: "700",
-    fontFamily: monoFont,
-    letterSpacing: 0.3
-  },
-  typeBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4,
-    backgroundColor: night.color.surfaceElevated
-  },
-  typeText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: night.color.textTertiary,
-    fontFamily: monoFont
-  },
-  valueBox: {
-    // Inset code box — darker than the card, the night track color.
-    backgroundColor: night.color.bg,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 8
-  },
-  valueText: {
-    fontSize: 12,
-    color: night.color.text,
-    fontFamily: monoFont,
-    lineHeight: 18
-  },
-  diffContainer: {
-    flex: 1
-  },
-  diffContent: {
-    flex: 1,
-    paddingHorizontal: 14
-  },
-  changeBadgeSmall: {
-    paddingHorizontal: 6,
-    paddingVertical: 1,
-    borderRadius: 3
-  },
-  changeTextSmall: {
-    fontSize: 8,
-    fontWeight: "700",
-    fontFamily: monoFont
-  },
-  dataViewerContainer: {
-    marginTop: -12,
-    marginHorizontal: -12,
-    marginBottom: -12
-  }
-});
+"use strict";import{View as a,Text as m,StyleSheet as U,ScrollView as O}from"react-native";import{useState as H,useCallback as C,useMemo as N}from"react";import{night as i,EventStepperFooter as z,formatRelativeTime as w,parseValue as x,monoFont as p}from"@buoy-gg/shared-ui";import{DataViewer as G,SplitDiffViewer as Y,TreeDiffViewer as q,diffThemes as J}from"@buoy-gg/shared-ui/dataViewer";import{ZustandDetailViewToggle as K}from"./ZustandDetailViewToggle";import{ZustandStateInfoView as Q}from"./ZustandStateInfoView";import{DiffModeTabs as X,CompareBar as ee}from"@buoy-gg/shared-ui";import{zustandStateStore as te}from"../utils/zustandStateStore";import{ZUSTAND_TEST_ID as g}from"../utils/testIDs";import{jsx as t,jsxs as u}from"react/jsx-runtime";function E(e){return te.getStoreColor(e.storeName)}function L(e){switch(e.category){case"replace":return"REPLACE";case"persist":return"HYDRATE";case"initial":return"INIT";default:return"SET"}}function re(e){if(e===null)return"null";if(e===void 0)return"undefined";if(Array.isArray(e))return"array";return typeof e}function M(e){const s=new Date(e);return s.toLocaleTimeString("en-US",{hour12:false,hour:"2-digit",minute:"2-digit",second:"2-digit"})}const oe=[{key:"tree",label:"TREE VIEW"},{key:"split",label:"SPLIT VIEW"}];export function ZustandStateDetailContent({change:e,changes:s,selectedIndex:o,onIndexChange:l,disableInternalFooter:d=false,initialView:D="change"}){const[h,k]=H(D);const[v,R]=H("tree");const c=s.length;const f=E(e);const b=L(e);const F=re(x(e.nextState));const S=c-o;const V=S-1;const y=o<c-1?o+1:null;const n=y!==null?s[y]:null;const $=N(()=>({index:y??0,label:V>0?`#${V}`:"Initial",timestamp:n?M(n.timestamp):"",relativeTime:n?w(new Date(n.timestamp)):"state",badge:n?t(a,{style:[r.changeBadgeSmall,{backgroundColor:`${E(n)}20`}],children:t(m,{style:[r.changeTextSmall,{color:E(n)}],children:L(n)})}):void 0}),[y,n,V]);const I=N(()=>({index:o,label:`#${S}`,timestamp:M(e.timestamp),relativeTime:w(new Date(e.timestamp)),badge:t(a,{style:[r.changeBadgeSmall,{backgroundColor:`${f}20`}],children:t(m,{style:[r.changeTextSmall,{color:f}],children:b})})}),[o,e.timestamp,f,b,S]);const W=C(()=>{const T=x(e.nextState);return u(a,{style:r.contentCard,testID:`${g}-state-card`,children:[u(a,{style:r.valueHeader,children:[t(m,{style:r.valueLabel,children:"STATE AFTER CHANGE"}),u(a,{style:r.valueHeaderBadges,children:[t(a,{style:[r.changeBadge,{backgroundColor:`${f}20`}],children:t(m,{style:[r.changeText,{color:f}],children:b})}),t(a,{style:r.typeBadge,children:t(m,{style:r.typeText,testID:`${g}-state-type`,children:F.toUpperCase()})})]})]}),t(a,{style:r.dataViewerContainer,children:t(G,{title:"",data:T,showTypeFilter:true,rawMode:true,initialExpanded:true})})]})},[e.nextState,f,b,F]);const P=C(()=>{const T=x(e.prevState);const A=x(e.nextState);if(v==="split"){return t(O,{style:{flex:1},showsVerticalScrollIndicator:true,children:t(Y,{oldValue:T,newValue:A,theme:J.devToolsDefault,options:{hideLineNumbers:false,disableWordDiff:false,showDiffOnly:false,compareMethod:"words",contextLines:3},showThemeName:false})})}return t(q,{oldValue:T,newValue:A})},[e.prevState,e.nextState,v]);const _=C(()=>{l(Math.min(c-1,o+1))},[o,c,l]);const j=C(()=>{l(Math.max(0,o-1))},[o,l]);const Z=e.prevState===void 0;const B=!d&&c>1;return u(a,{style:r.container,children:[t(K,{activeView:h,onViewChange:k,diffDisabled:Z}),u(a,{style:[r.contentArea,B&&r.contentAreaFooterPad],children:[h==="change"&&t(Q,{change:e}),h==="state"&&t(a,{style:r.stateContainer,children:W()}),h==="diff"&&u(a,{style:r.diffContainer,testID:`${g}-diff`,children:[t(X,{tabs:oe,activeTab:v,onTabChange:R,testIDPrefix:`${g}-diff-tab`}),t(ee,{leftEvent:$,rightEvent:I}),t(a,{style:r.diffContent,testID:`${g}-diff-content`,children:P()})]})]}),B&&t(z,{currentIndex:S-1,totalItems:c,onPrevious:_,onNext:j,itemLabel:"Change",subtitle:w(new Date(e.timestamp)),absolute:true})]})}export function ZustandStateDetailFooter({change:e,changes:s,selectedIndex:o,onIndexChange:l}){const d=s.length;if(d<=1)return null;const D=d-o;return t(z,{currentIndex:D-1,totalItems:d,onPrevious:()=>l(Math.min(d-1,o+1)),onNext:()=>l(Math.max(0,o-1)),itemLabel:"Change",subtitle:w(new Date(e.timestamp))})}const r=U.create({container:{flex:1,backgroundColor:"transparent"},contentArea:{flex:1},contentAreaFooterPad:{paddingBottom:96},stateContainer:{flex:1,padding:14},contentCard:{backgroundColor:i.color.surface,borderRadius:14,padding:14,borderWidth:1,borderColor:i.color.border},valueHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:8},valueLabel:{fontSize:10,color:i.color.textSecondary,fontFamily:p,letterSpacing:.5,fontWeight:"600"},valueHeaderBadges:{flexDirection:"row",alignItems:"center",gap:6},changeBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:4},changeText:{fontSize:9,fontWeight:"700",fontFamily:p,letterSpacing:.3},typeBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:4,backgroundColor:i.color.surfaceElevated},typeText:{fontSize:9,fontWeight:"600",color:i.color.textTertiary,fontFamily:p},valueBox:{backgroundColor:i.color.bg,borderRadius:6,borderWidth:1,borderColor:i.color.border,padding:8},valueText:{fontSize:12,color:i.color.text,fontFamily:p,lineHeight:18},diffContainer:{flex:1},diffContent:{flex:1,paddingHorizontal:14},changeBadgeSmall:{paddingHorizontal:6,paddingVertical:1,borderRadius:3},changeTextSmall:{fontSize:8,fontWeight:"700",fontFamily:p},dataViewerContainer:{marginTop:-12,marginHorizontal:-12,marginBottom:-12}});