@buoy-gg/zustand 2.1.12 → 2.1.13

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

@@ -1,165 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ZustandStateChangeItem = ZustandStateChangeItem;
-var _reactNative = require("react-native");
-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.buoyColors.textMuted;
-    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()";
-}
-function ZustandStateChangeItem({
-  change,
-  onPress
-}) {
-  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);
-  const relativeTime = (0, _sharedUi.useRelativeTime)(change.timestamp);
-  let customBadge = undefined;
-  if (change.isSlowUpdate) {
-    customBadge = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.badgeContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.badgeText, {
-          color: statusColor
-        }],
-        children: badgeText
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.slowBadge,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
-          size: 12,
-          color: _sharedUi.buoyColors.error
-        })
-      })]
-    });
-  } else if (change.hasStateChange) {
-    customBadge = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.badgeContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.badgeText, {
-          color: statusColor
-        }],
-        children: badgeText
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.changeBadge,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
-          size: 12,
-          color: _sharedUi.buoyColors.warning
-        })
-      })]
-    });
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
-    statusDotColor: statusColor,
-    statusLabel: statusLabel,
-    statusSublabel: sublabel,
-    primaryText: primaryText,
-    bottomRightText: relativeTime,
-    customBadge: customBadge,
-    badgeText: customBadge ? undefined : badgeText,
-    badgeColor: statusColor,
-    showChevron: true,
-    onPress: () => onPress(change)
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  badgeContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4
-  },
-  badgeText: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  changeBadge: {
-    paddingHorizontal: 4
-  },
-  slowBadge: {
-    paddingHorizontal: 4
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ZustandStateChangeItem=ZustandStateChangeItem;var _reactNative=require("react-native"),_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.buoyColors.textMuted;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()"}function ZustandStateChangeItem({change:e,onPress:t}){const a=getCategoryColor(e.category,e.storeName),s=getStatusLabel(e.category,e.storeName),r=getSublabel(e),n=getPrimaryText(e),i=getBadgeText(e),o=(0,_sharedUi.useRelativeTime)(e.timestamp);let u;return e.isSlowUpdate?u=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.badgeContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeText,{color:a}],children:i}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.slowBadge,children:(0,_jsxRuntime.jsx)(_sharedUi.Clock,{size:12,color:_sharedUi.buoyColors.error})})]}):e.hasStateChange&&(u=(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.badgeContainer,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.badgeText,{color:a}],children:i}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.changeBadge,children:(0,_jsxRuntime.jsx)(_sharedUi.Zap,{size:12,color:_sharedUi.buoyColors.warning})})]})),(0,_jsxRuntime.jsx)(_sharedUi.CompactRow,{statusDotColor:a,statusLabel:s,statusSublabel:r,primaryText:n,bottomRightText:o,customBadge:u,badgeText:u?void 0:i,badgeColor:a,showChevron:!0,onPress:()=>t(e)})}const styles=_reactNative.StyleSheet.create({badgeContainer:{flexDirection:"row",alignItems:"center",gap:4},badgeText:{fontSize:11,fontWeight:"600",fontFamily:"monospace"},changeBadge:{paddingHorizontal:4},slowBadge:{paddingHorizontal:4}});

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

@@ -1,352 +1 @@
-"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 _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
-}) {
-  const [activeView, setActiveView] = (0, _react.useState)("change");
-  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,
-      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,
-              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]);
-  const diffDisabled = 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,
-      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,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DiffModeTabs, {
-          tabs: DIFF_MODE_TABS,
-          activeTab: diffMode,
-          onTabChange: setDiffMode
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompareBar, {
-          leftEvent: leftEvent,
-          rightEvent: rightEvent
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.diffContent,
-          children: renderDiffContent()
-        })]
-      })]
-    }), !disableInternalFooter && totalChanges > 1 && /*#__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,
-    backgroundColor: _sharedUi.macOSColors.background.base
-  },
-  contentArea: {
-    flex: 1,
-    paddingBottom: 96
-  },
-  stateContainer: {
-    flex: 1,
-    padding: 14
-  },
-  contentCard: {
-    backgroundColor: _sharedUi.macOSColors.background.card,
-    borderRadius: 14,
-    padding: 14,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.default
-  },
-  valueHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 8
-  },
-  valueLabel: {
-    fontSize: 10,
-    color: _sharedUi.macOSColors.text.secondary,
-    fontFamily: "monospace",
-    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: "monospace",
-    letterSpacing: 0.3
-  },
-  typeBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4,
-    backgroundColor: _sharedUi.macOSColors.background.input
-  },
-  typeText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: _sharedUi.macOSColors.text.muted,
-    fontFamily: "monospace"
-  },
-  valueBox: {
-    backgroundColor: _sharedUi.macOSColors.background.base,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _sharedUi.macOSColors.border.input,
-    padding: 8
-  },
-  valueText: {
-    fontSize: 12,
-    color: _sharedUi.macOSColors.text.primary,
-    fontFamily: "monospace",
-    lineHeight: 18
-  },
-  diffContainer: {
-    flex: 1
-  },
-  diffContent: {
-    flex: 1,
-    paddingHorizontal: 14
-  },
-  changeBadgeSmall: {
-    paddingHorizontal: 6,
-    paddingVertical: 1,
-    borderRadius: 3
-  },
-  changeTextSmall: {
-    fontSize: 8,
-    fontWeight: "700",
-    fontFamily: "monospace"
-  },
-  dataViewerContainer: {
-    marginTop: -12,
-    marginHorizontal: -12,
-    marginBottom: -12
-  }
-});
+"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"),_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}){const[n,s]=(0,_react.useState)("change"),[o,l]=(0,_react.useState)("tree"),d=t.length,c=getChangeColor(e),u=getChangeLabel(e),m=getValueType((0,_sharedUi.parseValue)(e.nextState)),g=d-a,x=g-1,h=a<d-1?a+1:null,_=null!==h?t[h]:null,f=(0,_react.useMemo)(()=>({index:h??0,label:x>0?`#${x}`:"Initial",timestamp:_?formatTimestamp(_.timestamp):"",relativeTime:_?(0,_sharedUi.formatRelativeTime)(new Date(_.timestamp)):"state",badge:_?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.changeBadgeSmall,{backgroundColor:`${getChangeColor(_)}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.changeTextSmall,{color:getChangeColor(_)}],children:getChangeLabel(_)})}):void 0}),[h,_,x]),p=(0,_react.useMemo)(()=>({index:a,label:`#${g}`,timestamp:formatTimestamp(e.timestamp),relativeTime:(0,_sharedUi.formatRelativeTime)(new Date(e.timestamp)),badge:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.changeBadgeSmall,{backgroundColor:`${c}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.changeTextSmall,{color:c}],children:u})})}),[a,e.timestamp,c,u,g]),y=(0,_react.useCallback)(()=>{const t=(0,_sharedUi.parseValue)(e.nextState);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.contentCard,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:`${c}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.changeText,{color:c}],children:u})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.typeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.typeText,children:m.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,c,u,m]),S=(0,_react.useCallback)(()=>{const t=(0,_sharedUi.parseValue)(e.prevState),a=(0,_sharedUi.parseValue)(e.nextState);return"split"===o?(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,o]),j=(0,_react.useCallback)(()=>{i(Math.min(d-1,a+1))},[a,d,i]),C=(0,_react.useCallback)(()=>{i(Math.max(0,a-1))},[a,i]),b=d<=1;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[(0,_jsxRuntime.jsx)(_ZustandDetailViewToggle.ZustandDetailViewToggle,{activeView:n,onViewChange:s,diffDisabled:b}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.contentArea,children:["change"===n&&(0,_jsxRuntime.jsx)(_ZustandStateInfoView.ZustandStateInfoView,{change:e}),"state"===n&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.stateContainer,children:y()}),"diff"===n&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.diffContainer,children:[(0,_jsxRuntime.jsx)(_sharedUi.DiffModeTabs,{tabs:DIFF_MODE_TABS,activeTab:o,onTabChange:l}),(0,_jsxRuntime.jsx)(_sharedUi.CompareBar,{leftEvent:f,rightEvent:p}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.diffContent,children:S()})]})]}),!r&&d>1&&(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:g-1,totalItems:d,onPrevious:j,onNext:C,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:_sharedUi.macOSColors.background.base},contentArea:{flex:1,paddingBottom:96},stateContainer:{flex:1,padding:14},contentCard:{backgroundColor:_sharedUi.macOSColors.background.card,borderRadius:14,padding:14,borderWidth:1,borderColor:_sharedUi.macOSColors.border.default},valueHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:8},valueLabel:{fontSize:10,color:_sharedUi.macOSColors.text.secondary,fontFamily:"monospace",letterSpacing:.5,fontWeight:"600"},valueHeaderBadges:{flexDirection:"row",alignItems:"center",gap:6},changeBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:4},changeText:{fontSize:9,fontWeight:"700",fontFamily:"monospace",letterSpacing:.3},typeBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:4,backgroundColor:_sharedUi.macOSColors.background.input},typeText:{fontSize:9,fontWeight:"600",color:_sharedUi.macOSColors.text.muted,fontFamily:"monospace"},valueBox:{backgroundColor:_sharedUi.macOSColors.background.base,borderRadius:6,borderWidth:1,borderColor:_sharedUi.macOSColors.border.input,padding:8},valueText:{fontSize:12,color:_sharedUi.macOSColors.text.primary,fontFamily:"monospace",lineHeight:18},diffContainer:{flex:1},diffContent:{flex:1,paddingHorizontal:14},changeBadgeSmall:{paddingHorizontal:6,paddingVertical:1,borderRadius:3},changeTextSmall:{fontSize:8,fontWeight:"700",fontFamily:"monospace"},dataViewerContainer:{marginTop:-12,marginHorizontal:-12,marginBottom:-12}});