@buoy-gg/zustand 7.0.38 → 7.0.39

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

@@ -1 +1,117 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ZustandStateChangeItem=void 0;var _react=require("react"),_sharedUi=require("@buoy-gg/shared-ui"),_zustandStateStore=require("../utils/zustandStateStore"),_jsxRuntime=require("react/jsx-runtime");function getStatusLabel(e,t){switch(e){case"replace":return"Replace";case"persist":return"Hydrate";case"initial":return"Initial";default:return t.charAt(0).toUpperCase()+t.slice(1)}}function getCategoryColor(e,t){switch(e){case"replace":return _sharedUi.buoyColors.warning;case"persist":return _sharedUi.buoyColors.info;case"initial":return _sharedUi.night.color.textTertiary;default:return _zustandStateStore.zustandStateStore.getStoreColor(t)}}function getSublabel(e){const t=[];return void 0!==e.duration&&e.duration>=.1&&t.push(`${e.duration.toFixed(1)}ms`),e.hasStateChange?e.changedKeysCount>0?t.push(`${e.changedKeysCount} key${e.changedKeysCount>1?"s":""} changed`):t.push(e.diffSummary||"state changed"):t.push("no state change"),t.join(" · ")}function getBadgeText(e){return"replace"===e.category?"REPLACE":"persist"===e.category?"HYDRATE":"initial"===e.category?"INIT":"SET"}function getPrimaryText(e){return e.changedKeys.length>0&&e.changedKeys.length<=3?e.changedKeys.join(", "):e.changedKeys.length>3?`${e.changedKeys.slice(0,2).join(", ")} +${e.changedKeys.length-2}`:e.partialPreview||"setState()"}const ZustandStateChangeItem=exports.ZustandStateChangeItem=(0,_react.memo)(function({change:e,onPress:t,testID:a}){const r=getCategoryColor(e.category,e.storeName),s=getStatusLabel(e.category,e.storeName),n=getSublabel(e),o=getPrimaryText(e),i=getBadgeText(e);return(0,_jsxRuntime.jsx)(_sharedUi.ChangeRow,{statusColor:r,statusLabel:s,sublabel:n,primaryText:o,timestamp:e.timestamp,badgeText:i,changed:e.hasStateChange,slow:e.isSlowUpdate,onPress:()=>t(e),testID:a})});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZustandStateChangeItem = void 0;
+var _react = require("react");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _zustandStateStore = require("../utils/zustandStateStore");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Compact list item for displaying a Zustand state change
+ *
+ * Mirrors ReduxActionItem.tsx - uses shared CompactRow for consistent styling
+ */
+
+/**
+ * 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 _sharedUi.buoyColors.warning;
+    case "persist":
+      return _sharedUi.buoyColors.info;
+    case "initial":
+      return _sharedUi.night.color.textTertiary;
+    default:
+      return _zustandStateStore.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).
+const ZustandStateChangeItem = exports.ZustandStateChangeItem = /*#__PURE__*/(0, _react.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__*/(0, _jsxRuntime.jsx)(_sharedUi.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
+  });
+});

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

@@ -1 +1,372 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ZustandStateDetailContent=ZustandStateDetailContent,exports.ZustandStateDetailFooter=ZustandStateDetailFooter;var _reactNative=require("react-native"),_react=require("react"),_sharedUi=require("@buoy-gg/shared-ui"),_dataViewer=require("@buoy-gg/shared-ui/dataViewer"),_ZustandDetailViewToggle=require("./ZustandDetailViewToggle"),_ZustandStateInfoView=require("./ZustandStateInfoView"),_zustandStateStore=require("../utils/zustandStateStore"),_testIDs=require("../utils/testIDs"),_jsxRuntime=require("react/jsx-runtime");function getChangeColor(e){return _zustandStateStore.zustandStateStore.getStoreColor(e.storeName)}function getChangeLabel(e){switch(e.category){case"replace":return"REPLACE";case"persist":return"HYDRATE";case"initial":return"INIT";default:return"SET"}}function getValueType(e){return null===e?"null":void 0===e?"undefined":Array.isArray(e)?"array":typeof e}function formatTimestamp(e){return new Date(e).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}const DIFF_MODE_TABS=[{key:"tree",label:"TREE VIEW"},{key:"split",label:"SPLIT VIEW"}];function ZustandStateDetailContent({change:e,changes:t,selectedIndex:a,onIndexChange:i,disableInternalFooter:r=!1,initialView:n="change"}){const[s,o]=(0,_react.useState)(n),[l,d]=(0,_react.useState)("tree"),c=t.length,u=getChangeColor(e),_=getChangeLabel(e),g=getValueType((0,_sharedUi.parseValue)(e.nextState)),h=c-a,m=h-1,x=a<c-1?a+1:null,f=null!==x?t[x]:null,y=(0,_react.useMemo)(()=>({index:x??0,label:m>0?`#${m}`:"Initial",timestamp:f?formatTimestamp(f.timestamp):"",relativeTime:f?(0,_sharedUi.formatRelativeTime)(new Date(f.timestamp)):"state",badge:f?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.changeBadgeSmall,{backgroundColor:`${getChangeColor(f)}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.changeTextSmall,{color:getChangeColor(f)}],children:getChangeLabel(f)})}):void 0}),[x,f,m]),S=(0,_react.useMemo)(()=>({index:a,label:`#${h}`,timestamp:formatTimestamp(e.timestamp),relativeTime:(0,_sharedUi.formatRelativeTime)(new Date(e.timestamp)),badge:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.changeBadgeSmall,{backgroundColor:`${u}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.changeTextSmall,{color:u}],children:_})})}),[a,e.timestamp,u,_,h]),p=(0,_react.useCallback)(()=>{const t=(0,_sharedUi.parseValue)(e.nextState);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.contentCard,testID:`${_testIDs.ZUSTAND_TEST_ID}-state-card`,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.valueHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.valueLabel,children:"STATE AFTER CHANGE"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.valueHeaderBadges,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.changeBadge,{backgroundColor:`${u}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.changeText,{color:u}],children:_})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.typeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.typeText,testID:`${_testIDs.ZUSTAND_TEST_ID}-state-type`,children:g.toUpperCase()})})]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.dataViewerContainer,children:(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:t,showTypeFilter:!0,rawMode:!0,initialExpanded:!0})})]})},[e.nextState,u,_,g]),T=(0,_react.useCallback)(()=>{const t=(0,_sharedUi.parseValue)(e.prevState),a=(0,_sharedUi.parseValue)(e.nextState);return"split"===l?(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:{flex:1},showsVerticalScrollIndicator:!0,children:(0,_jsxRuntime.jsx)(_dataViewer.SplitDiffViewer,{oldValue:t,newValue:a,theme:_dataViewer.diffThemes.devToolsDefault,options:{hideLineNumbers:!1,disableWordDiff:!1,showDiffOnly:!1,compareMethod:"words",contextLines:3},showThemeName:!1})}):(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:t,newValue:a})},[e.prevState,e.nextState,l]),j=(0,_react.useCallback)(()=>{i(Math.min(c-1,a+1))},[a,c,i]),v=(0,_react.useCallback)(()=>{i(Math.max(0,a-1))},[a,i]),w=void 0===e.prevState,b=!r&&c>1;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[(0,_jsxRuntime.jsx)(_ZustandDetailViewToggle.ZustandDetailViewToggle,{activeView:s,onViewChange:o,diffDisabled:w}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.contentArea,b&&styles.contentAreaFooterPad],children:["change"===s&&(0,_jsxRuntime.jsx)(_ZustandStateInfoView.ZustandStateInfoView,{change:e}),"state"===s&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.stateContainer,children:p()}),"diff"===s&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.diffContainer,testID:`${_testIDs.ZUSTAND_TEST_ID}-diff`,children:[(0,_jsxRuntime.jsx)(_sharedUi.DiffModeTabs,{tabs:DIFF_MODE_TABS,activeTab:l,onTabChange:d,testIDPrefix:`${_testIDs.ZUSTAND_TEST_ID}-diff-tab`}),(0,_jsxRuntime.jsx)(_sharedUi.CompareBar,{leftEvent:y,rightEvent:S}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.diffContent,testID:`${_testIDs.ZUSTAND_TEST_ID}-diff-content`,children:T()})]})]}),b&&(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:h-1,totalItems:c,onPrevious:j,onNext:v,itemLabel:"Change",subtitle:(0,_sharedUi.formatRelativeTime)(new Date(e.timestamp)),absolute:!0})]})}function ZustandStateDetailFooter({change:e,changes:t,selectedIndex:a,onIndexChange:i}){const r=t.length;if(r<=1)return null;const n=r-a;return(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:n-1,totalItems:r,onPrevious:()=>i(Math.min(r-1,a+1)),onNext:()=>i(Math.max(0,a-1)),itemLabel:"Change",subtitle:(0,_sharedUi.formatRelativeTime)(new Date(e.timestamp))})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:"transparent"},contentArea:{flex:1},contentAreaFooterPad:{paddingBottom:96},stateContainer:{flex:1,padding:14},contentCard:{backgroundColor:_sharedUi.night.color.surface,borderRadius:14,padding:14,borderWidth:1,borderColor:_sharedUi.night.color.border},valueHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:8},valueLabel:{fontSize:10,color:_sharedUi.night.color.textSecondary,fontFamily:_sharedUi.monoFont,letterSpacing:.5,fontWeight:"600"},valueHeaderBadges:{flexDirection:"row",alignItems:"center",gap:6},changeBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:4},changeText:{fontSize:9,fontWeight:"700",fontFamily:_sharedUi.monoFont,letterSpacing:.3},typeBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:4,backgroundColor:_sharedUi.night.color.surfaceElevated},typeText:{fontSize:9,fontWeight:"600",color:_sharedUi.night.color.textTertiary,fontFamily:_sharedUi.monoFont},valueBox:{backgroundColor:_sharedUi.night.color.bg,borderRadius:6,borderWidth:1,borderColor:_sharedUi.night.color.border,padding:8},valueText:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,lineHeight:18},diffContainer:{flex:1},diffContent:{flex:1,paddingHorizontal:14},changeBadgeSmall:{paddingHorizontal:6,paddingVertical:1,borderRadius:3},changeTextSmall:{fontSize:8,fontWeight:"700",fontFamily:_sharedUi.monoFont},dataViewerContainer:{marginTop:-12,marginHorizontal:-12,marginBottom:-12}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZustandStateDetailContent = ZustandStateDetailContent;
+exports.ZustandStateDetailFooter = ZustandStateDetailFooter;
+var _reactNative = require("react-native");
+var _react = require("react");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
+var _ZustandDetailViewToggle = require("./ZustandDetailViewToggle");
+var _ZustandStateInfoView = require("./ZustandStateInfoView");
+var _zustandStateStore = require("../utils/zustandStateStore");
+var _testIDs = require("../utils/testIDs");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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
+ */
+
+function getChangeColor(change) {
+  return _zustandStateStore.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"
+}];
+function ZustandStateDetailContent({
+  change,
+  changes,
+  selectedIndex,
+  onIndexChange,
+  disableInternalFooter = false,
+  initialView = "change"
+}) {
+  const [activeView, setActiveView] = (0, _react.useState)(initialView);
+  const [diffMode, setDiffMode] = (0, _react.useState)("tree");
+  const totalChanges = changes.length;
+  const changeColor = getChangeColor(change);
+  const changeLabel = getChangeLabel(change);
+  const stateType = getValueType((0, _sharedUi.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 = (0, _react.useMemo)(() => ({
+    index: prevChangeIndex ?? 0,
+    label: prevChronologicalNumber > 0 ? `#${prevChronologicalNumber}` : "Initial",
+    timestamp: prevChange ? formatTimestamp(prevChange.timestamp) : "",
+    relativeTime: prevChange ? (0, _sharedUi.formatRelativeTime)(new Date(prevChange.timestamp)) : "state",
+    badge: prevChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.changeBadgeSmall, {
+        backgroundColor: `${getChangeColor(prevChange)}20`
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.changeTextSmall, {
+          color: getChangeColor(prevChange)
+        }],
+        children: getChangeLabel(prevChange)
+      })
+    }) : undefined
+  }), [prevChangeIndex, prevChange, prevChronologicalNumber]);
+  const rightEvent = (0, _react.useMemo)(() => ({
+    index: selectedIndex,
+    label: `#${chronologicalNumber}`,
+    timestamp: formatTimestamp(change.timestamp),
+    relativeTime: (0, _sharedUi.formatRelativeTime)(new Date(change.timestamp)),
+    badge: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.changeBadgeSmall, {
+        backgroundColor: `${changeColor}20`
+      }],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [styles.changeTextSmall, {
+          color: changeColor
+        }],
+        children: changeLabel
+      })
+    })
+  }), [selectedIndex, change.timestamp, changeColor, changeLabel, chronologicalNumber]);
+  const renderStateView = (0, _react.useCallback)(() => {
+    const parsed = (0, _sharedUi.parseValue)(change.nextState);
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.contentCard,
+      testID: `${_testIDs.ZUSTAND_TEST_ID}-state-card`,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.valueHeader,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.valueLabel,
+          children: "STATE AFTER CHANGE"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.valueHeaderBadges,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [styles.changeBadge, {
+              backgroundColor: `${changeColor}20`
+            }],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.changeText, {
+                color: changeColor
+              }],
+              children: changeLabel
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: styles.typeBadge,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.typeText,
+              testID: `${_testIDs.ZUSTAND_TEST_ID}-state-type`,
+              children: stateType.toUpperCase()
+            })
+          })]
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.dataViewerContainer,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
+          title: "",
+          data: parsed,
+          showTypeFilter: true,
+          rawMode: true,
+          initialExpanded: true
+        })
+      })]
+    });
+  }, [change.nextState, changeColor, changeLabel, stateType]);
+  const renderDiffContent = (0, _react.useCallback)(() => {
+    const prevState = (0, _sharedUi.parseValue)(change.prevState);
+    const nextState = (0, _sharedUi.parseValue)(change.nextState);
+    if (diffMode === "split") {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        style: {
+          flex: 1
+        },
+        showsVerticalScrollIndicator: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.SplitDiffViewer, {
+          oldValue: prevState,
+          newValue: nextState,
+          theme: _dataViewer.diffThemes.devToolsDefault,
+          options: {
+            hideLineNumbers: false,
+            disableWordDiff: false,
+            showDiffOnly: false,
+            compareMethod: "words",
+            contextLines: 3
+          },
+          showThemeName: false
+        })
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.TreeDiffViewer, {
+      oldValue: prevState,
+      newValue: nextState
+    });
+  }, [change.prevState, change.nextState, diffMode]);
+  const handleFooterPrevious = (0, _react.useCallback)(() => {
+    onIndexChange(Math.min(totalChanges - 1, selectedIndex + 1));
+  }, [selectedIndex, totalChanges, onIndexChange]);
+  const handleFooterNext = (0, _react.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.container,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandDetailViewToggle.ZustandDetailViewToggle, {
+      activeView: activeView,
+      onViewChange: setActiveView,
+      diffDisabled: diffDisabled
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [styles.contentArea, showInternalFooter && styles.contentAreaFooterPad],
+      children: [activeView === "change" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandStateInfoView.ZustandStateInfoView, {
+        change: change
+      }), activeView === "state" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.stateContainer,
+        children: renderStateView()
+      }), activeView === "diff" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.diffContainer,
+        testID: `${_testIDs.ZUSTAND_TEST_ID}-diff`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DiffModeTabs, {
+          tabs: DIFF_MODE_TABS,
+          activeTab: diffMode,
+          onTabChange: setDiffMode,
+          testIDPrefix: `${_testIDs.ZUSTAND_TEST_ID}-diff-tab`
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompareBar, {
+          leftEvent: leftEvent,
+          rightEvent: rightEvent
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.diffContent,
+          testID: `${_testIDs.ZUSTAND_TEST_ID}-diff-content`,
+          children: renderDiffContent()
+        })]
+      })]
+    }), showInternalFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
+      currentIndex: chronologicalNumber - 1,
+      totalItems: totalChanges,
+      onPrevious: handleFooterPrevious,
+      onNext: handleFooterNext,
+      itemLabel: "Change",
+      subtitle: (0, _sharedUi.formatRelativeTime)(new Date(change.timestamp)),
+      absolute: true
+    })]
+  });
+}
+
+/**
+ * External footer component for modal use
+ */
+function ZustandStateDetailFooter({
+  change,
+  changes,
+  selectedIndex,
+  onIndexChange
+}) {
+  const totalChanges = changes.length;
+  if (totalChanges <= 1) return null;
+  const chronologicalNumber = totalChanges - selectedIndex;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
+    currentIndex: chronologicalNumber - 1,
+    totalItems: totalChanges,
+    onPrevious: () => onIndexChange(Math.min(totalChanges - 1, selectedIndex + 1)),
+    onNext: () => onIndexChange(Math.max(0, selectedIndex - 1)),
+    itemLabel: "Change",
+    subtitle: (0, _sharedUi.formatRelativeTime)(new Date(change.timestamp))
+  });
+}
+const styles = _reactNative.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: _sharedUi.night.color.surface,
+    borderRadius: 14,
+    padding: 14,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.border
+  },
+  valueHeader: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 8
+  },
+  valueLabel: {
+    fontSize: 10,
+    color: _sharedUi.night.color.textSecondary,
+    fontFamily: _sharedUi.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: _sharedUi.monoFont,
+    letterSpacing: 0.3
+  },
+  typeBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 4,
+    backgroundColor: _sharedUi.night.color.surfaceElevated
+  },
+  typeText: {
+    fontSize: 9,
+    fontWeight: "600",
+    color: _sharedUi.night.color.textTertiary,
+    fontFamily: _sharedUi.monoFont
+  },
+  valueBox: {
+    // Inset code box — darker than the card, the night track color.
+    backgroundColor: _sharedUi.night.color.bg,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.border,
+    padding: 8
+  },
+  valueText: {
+    fontSize: 12,
+    color: _sharedUi.night.color.text,
+    fontFamily: _sharedUi.monoFont,
+    lineHeight: 18
+  },
+  diffContainer: {
+    flex: 1
+  },
+  diffContent: {
+    flex: 1,
+    paddingHorizontal: 14
+  },
+  changeBadgeSmall: {
+    paddingHorizontal: 6,
+    paddingVertical: 1,
+    borderRadius: 3
+  },
+  changeTextSmall: {
+    fontSize: 8,
+    fontWeight: "700",
+    fontFamily: _sharedUi.monoFont
+  },
+  dataViewerContainer: {
+    marginTop: -12,
+    marginHorizontal: -12,
+    marginBottom: -12
+  }
+});