@buoy-gg/storage 7.0.41 → 7.0.43

package/lib/module/storage/components/StorageEventCard.js

@@ -1,113 +1 @@
-"use strict";
-
-import { storageLabels } from '../utils/storageLabels';
-/**
- * StorageEventCard
- *
- * Shared card component for displaying storage events.
- * Used by both Storage DevTools and Events DevTools for consistent UI.
- * Uses CompactRow for consistent layout with Redux/React Query cards.
- */
-
-import { memo } from "react";
-import { RelativeTime, macOSColors, parseValue, CompactRow } from "@buoy-gg/shared-ui";
-import { translateStorageAction } from "../utils/storageActionHelpers";
-
-/** Value type for storage events */
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Compute value type from a value
- */
-export function getValueType(value) {
-  const parsed = parseValue(value);
-  if (parsed === null) return "null";
-  if (parsed === undefined) return "undefined";
-  if (Array.isArray(parsed)) return "array";
-  if (typeof parsed === "boolean") return "boolean";
-  if (typeof parsed === "number") return "number";
-  if (typeof parsed === "string") return "string";
-  if (typeof parsed === "object") return "object";
-  return "undefined";
-}
-/**
- * Get color for action type
- */
-function getActionColor(action) {
-  switch (action) {
-    // AsyncStorage & MMKV - Set operations
-    case "setItem":
-    case "multiSet":
-    case "set.string":
-    case "set.number":
-    case "set.boolean":
-    case "set.buffer":
-      return macOSColors.semantic.success;
-
-    // AsyncStorage & MMKV - Remove/Delete operations
-    case "removeItem":
-    case "multiRemove":
-    case "clear":
-    case "delete":
-    case "clearAll":
-      return macOSColors.semantic.error;
-
-    // AsyncStorage - Merge operations
-    case "mergeItem":
-    case "multiMerge":
-      return macOSColors.semantic.info;
-
-    // MMKV - Get operations
-    case "get.string":
-    case "get.number":
-    case "get.boolean":
-    case "get.buffer":
-      return macOSColors.semantic.warning;
-    default:
-      return macOSColors.text.muted;
-  }
-}
-
-/**
- * Get storage type label for sublabel
- */
-function getStorageTypeSublabel(storageTypes, totalOps) {
-  const types = Array.from(storageTypes).map(t => t === "async" ? storageLabels.async : storageLabels.mmkv).join("/");
-  return `${types} · ${totalOps} op${totalOps !== 1 ? "s" : ""}`;
-}
-export const StorageEventCard = /*#__PURE__*/memo(function StorageEventCard({
-  data,
-  onPress,
-  isSelected = false,
-  showChevron = true,
-  testID
-}) {
-  const actionColor = getActionColor(data.lastAction);
-  const actionLabel = translateStorageAction(data.lastAction);
-  const totalOps = data.totalOperations ?? 1;
-  return /*#__PURE__*/_jsx(CompactRow
-  // Status section (left) - shows "Storage" with action-colored dot
-  , {
-    statusDotColor: actionColor,
-    statusLabel: "Storage",
-    statusSublabel: getStorageTypeSublabel(data.storageTypes, totalOps)
-    // Content section (middle) - shows the key name
-    ,
-    primaryText: data.key
-    // Badge section (right) - shows action label (SET, REMOVE, etc.)
-    ,
-    badgeText: actionLabel,
-    badgeColor: actionColor,
-    showChevron: showChevron
-    // Bottom right - timestamp
-    ,
-    bottomRightText: /*#__PURE__*/_jsx(RelativeTime, {
-      timestamp: data.lastEventTimestamp
-    })
-    // Interaction
-    ,
-    isSelected: isSelected,
-    onPress: onPress,
-    testID: testID,
-    accessibilityLabel: `${actionLabel} ${data.key}`
-  });
-});
+"use strict";import{storageLabels as i}from"../utils/storageLabels";import{memo as f}from"react";import{RelativeTime as b,macOSColors as r,parseValue as g,CompactRow as p}from"@buoy-gg/shared-ui";import{translateStorageAction as y}from"../utils/storageActionHelpers";import{jsx as c}from"react/jsx-runtime";export function getValueType(t){const e=g(t);if(e===null)return"null";if(e===void 0)return"undefined";if(Array.isArray(e))return"array";if(typeof e==="boolean")return"boolean";if(typeof e==="number")return"number";if(typeof e==="string")return"string";if(typeof e==="object")return"object";return"undefined"}function S(t){switch(t){case"setItem":case"multiSet":case"set.string":case"set.number":case"set.boolean":case"set.buffer":return r.semantic.success;case"removeItem":case"multiRemove":case"clear":case"delete":case"clearAll":return r.semantic.error;case"mergeItem":case"multiMerge":return r.semantic.info;case"get.string":case"get.number":case"get.boolean":case"get.buffer":return r.semantic.warning;default:return r.text.muted}}function d(t,e){const s=Array.from(t).map(o=>o==="async"?i.async:i.mmkv).join("/");return`${s} \xB7 ${e} op${e!==1?"s":""}`}export const StorageEventCard=f(function t({data:e,onPress:s,isSelected:o=false,showChevron:u=true,testID:m}){const n=S(e.lastAction);const a=y(e.lastAction);const l=e.totalOperations??1;return c(p,{statusDotColor:n,statusLabel:"Storage",statusSublabel:d(e.storageTypes,l),primaryText:e.key,badgeText:a,badgeColor:n,showChevron:u,bottomRightText:c(b,{timestamp:e.lastEventTimestamp}),isSelected:o,onPress:s,testID:m,accessibilityLabel:`${a} ${e.key}`})});

package/lib/module/storage/components/StorageEventDetailContent.js

@@ -1,490 +1 @@
-"use strict";
-
-/**
- * StorageEventDetailContent
- *
- * Detail view for storage events using the shared EventHistoryViewer component.
- */
-
-import { View, Text, StyleSheet } from "react-native";
-import { useState, useCallback, useMemo, useEffect, useRef } from "react";
-import AsyncStorage from "@react-native-async-storage/async-storage";
-import { formatRelativeTime, macOSColors, night, parseValue, devToolsStorageKeys, GitBranch, EventStepperFooter, EventHistoryViewer, copyToClipboard, ProUpgradeModal, monoFont } from "@buoy-gg/shared-ui";
-import { useIsPro } from "@buoy-gg/license";
-import { ABSENT_VALUE } from "../utils/lineDiff";
-import { ThemedSplitView } from "./DiffViewer/modes/ThemedSplitView";
-import { diffThemes } from "./DiffViewer/themes/diffThemes";
-import { TreeDiffViewer } from "./DiffViewer/TreeDiffViewer";
-import { translateStorageAction } from "../utils/storageActionHelpers";
-import { StorageEventActionButton } from "./StorageEventActionButton";
-import { undoOperation, jumpToState, canUndo } from "../utils/storageTimeTravelUtils";
-
-/**
- * Compare-bar index for "the state before the oldest event".
- *
- * Not an event — it's reconstructed from that event's own `prevValue`, which
- * every write records. Without it a key's first event had nothing to diff
- * against and both panes showed the same value.
- */
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const ORIGIN_INDEX = -1;
-
-/** Compare-bar copy for each origin state. Kept in sync with the Flutter port. */
-const ORIGIN_LABELS = {
-  prior: {
-    label: "BEFORE #1",
-    timestamp: "value before first event",
-    relativeTime: "not captured",
-    badge: "PRIOR"
-  },
-  absent: {
-    label: "NO PRIOR VALUE",
-    timestamp: "key did not exist",
-    relativeTime: "created here",
-    badge: "ABSENT"
-  },
-  scanned: {
-    label: "ALREADY PRESENT",
-    timestamp: "value found at startup",
-    relativeTime: "not a write",
-    badge: "SCANNED"
-  }
-};
-
-// Unified storage event type (supports both AsyncStorage and MMKV)
-
-/**
- * Get color for storage action
- */
-function getActionColor(action) {
-  switch (action) {
-    case "setItem":
-    case "multiSet":
-      return macOSColors.semantic.success;
-    case "removeItem":
-    case "multiRemove":
-    case "clear":
-      return macOSColors.semantic.error;
-    case "mergeItem":
-    case "multiMerge":
-      return macOSColors.semantic.info;
-    default:
-      return macOSColors.text.muted;
-  }
-}
-
-/**
- * Get the type of a value
- */
-function getValueType(value) {
-  if (value === null) return "null";
-  if (value === undefined) return "undefined";
-  if (Array.isArray(value)) return "array";
-  return typeof value;
-}
-
-/**
- * Format timestamp with milliseconds
- */
-function formatTimeWithMs(date) {
-  const h = String(date.getHours()).padStart(2, "0");
-  const m = String(date.getMinutes()).padStart(2, "0");
-  const s = String(date.getSeconds()).padStart(2, "0");
-  const ms = String(date.getMilliseconds()).padStart(3, "0");
-  return `${h}:${m}:${s}.${ms}`;
-}
-const SPLIT_VIEW_OPTIONS = {
-  hideLineNumbers: false,
-  disableWordDiff: false,
-  showDiffOnly: false,
-  compareMethod: "words",
-  contextLines: 3,
-  lineOffset: 0
-};
-const SPLIT_VIEW_DIFFERENCES = [];
-export function StorageEventDetailContent({
-  conversation,
-  selectedEventIndex = 0,
-  onEventIndexChange = () => {},
-  disableInternalFooter = false
-}) {
-  // Pro feature gating
-  const isPro = useIsPro();
-  const [showProModal, setShowProModal] = useState(false);
-
-  // There is only the diff view now. The current stored value is what the Keys
-  // table shows — repeating it behind a toggle here meant two places to look for
-  // one fact, and the toggle was the first thing between you and the diff you
-  // opened this screen for.
-  const [diffMode, setDiffMode] = useState("split");
-
-  // Compare indices for diff view
-  // Matches what the sync effect below computes, so the first frame doesn't
-  // briefly pair the oldest event with itself.
-  const [leftIndex, setLeftIndex] = useState(Math.max(ORIGIN_INDEX, selectedEventIndex - 1));
-  const [rightIndex, setRightIndex] = useState(selectedEventIndex);
-
-  // Track if preferences have been loaded
-  const hasLoadedPreferences = useRef(false);
-
-  // Get sorted events
-  const navigationItems = useMemo(() => conversation.events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime()), [conversation.events]);
-  const totalEvents = navigationItems.length;
-
-  // Load saved preferences on mount
-  useEffect(() => {
-    if (hasLoadedPreferences.current) return;
-    const loadPreferences = async () => {
-      try {
-        const savedDiffMode = await AsyncStorage.getItem(devToolsStorageKeys.storage.diffViewerMode());
-        if (savedDiffMode === "split" || savedDiffMode === "tree") {
-          setDiffMode(savedDiffMode);
-        }
-        hasLoadedPreferences.current = true;
-      } catch {
-        // Failed to load preferences
-      }
-    };
-    loadPreferences();
-  }, []);
-
-  // Keep compare indices synced to selection. Left may land on ORIGIN_INDEX,
-  // which is not an event — it's the state the oldest event overwrote.
-  useEffect(() => {
-    const newRight = Math.min(totalEvents - 1, Math.max(0, selectedEventIndex));
-    const newLeft = Math.max(ORIGIN_INDEX, Math.min(newRight - 1, selectedEventIndex - 1));
-    setLeftIndex(newLeft);
-    setRightIndex(newRight);
-  }, [selectedEventIndex, totalEvents]);
-
-  // Save diff mode preference when changed
-  const handleDiffModeChange = useCallback(async mode => {
-    setDiffMode(mode);
-    try {
-      await AsyncStorage.setItem(devToolsStorageKeys.storage.diffViewerMode(), mode);
-    } catch {
-      // Failed to save preference
-    }
-  }, []);
-
-  // Get current event
-  const selectedEvent = navigationItems[selectedEventIndex];
-  const action = selectedEvent?.action;
-  // Compute type from the parsed value so it matches what we actually render
-
-  // Get events for diff comparison. leftIndex === ORIGIN_INDEX means "the state
-  // before the oldest event", which has no event object of its own.
-  const isOriginLeft = leftIndex === ORIGIN_INDEX;
-  const leftEvent = isOriginLeft ? undefined : navigationItems[Math.max(0, Math.min(totalEvents - 1, leftIndex))];
-  const rightEvent = navigationItems[Math.max(0, Math.min(totalEvents - 1, rightIndex))];
-
-  // Every write records the value it overwrote (for time travel), so even the
-  // very first event can be diffed against what was actually there. Three
-  // distinct origins, and conflating them would misinform:
-  //   PRIOR   — the write replaced a real value (including `[]`, `""`, `null`)
-  //   ABSENT  — the write created the key; there was nothing before it
-  //   SCANNED — not a write at all, just the startup snapshot of a key that
-  //             already existed, so nothing changed at this event
-  const originKind = useMemo(() => {
-    const data = rightEvent?.data;
-    if (data?.initialScan) return "scanned";
-    return data?.prevValue === null || data?.prevValue === undefined ? "absent" : "prior";
-  }, [rightEvent]);
-  const originValue = useMemo(() => {
-    if (originKind === "absent") return ABSENT_VALUE;
-    // A scanned key was already holding the event's own value, so diffing
-    // against it correctly reports no change.
-    if (originKind === "scanned") return parseValue(rightEvent?.data?.value);
-    return parseValue(rightEvent?.data?.prevValue);
-  }, [originKind, rightEvent]);
-
-  // Create event display info for compare bar
-  const leftEventInfo = useMemo(() => isOriginLeft ? {
-    index: ORIGIN_INDEX,
-    label: ORIGIN_LABELS[originKind].label,
-    timestamp: ORIGIN_LABELS[originKind].timestamp,
-    relativeTime: ORIGIN_LABELS[originKind].relativeTime,
-    badge: /*#__PURE__*/_jsx(View, {
-      style: [styles.actionBadgeSmall, {
-        backgroundColor: `${night.color.textTertiary}20`
-      }],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.actionTextSmall, {
-          color: night.color.textTertiary
-        }],
-        children: ORIGIN_LABELS[originKind].badge
-      })
-    })
-  } : {
-    index: leftIndex,
-    label: `#${leftIndex + 1} / ${totalEvents}`,
-    timestamp: leftEvent ? formatTimeWithMs(leftEvent.timestamp) : "",
-    relativeTime: leftEvent ? formatRelativeTime(leftEvent.timestamp) : "",
-    badge: leftEvent ? /*#__PURE__*/_jsx(View, {
-      style: [styles.actionBadgeSmall, {
-        backgroundColor: `${getActionColor(leftEvent.action)}20`
-      }],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.actionTextSmall, {
-          color: getActionColor(leftEvent.action)
-        }],
-        children: translateStorageAction(leftEvent.action)
-      })
-    }) : undefined
-  }, [leftIndex, leftEvent, totalEvents, isOriginLeft, originKind]);
-  const rightEventInfo = useMemo(() => ({
-    index: rightIndex,
-    label: `#${rightIndex + 1} / ${totalEvents}`,
-    timestamp: rightEvent ? formatTimeWithMs(rightEvent.timestamp) : "",
-    relativeTime: rightEvent ? formatRelativeTime(rightEvent.timestamp) : "",
-    badge: rightEvent ? /*#__PURE__*/_jsx(View, {
-      style: [styles.actionBadgeSmall, {
-        backgroundColor: `${getActionColor(rightEvent.action)}20`
-      }],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.actionTextSmall, {
-          color: getActionColor(rightEvent.action)
-        }],
-        children: translateStorageAction(rightEvent.action)
-      })
-    }) : undefined
-  }), [rightIndex, rightEvent, totalEvents]);
-
-  // Diff mode tabs
-  const diffModeTabs = useMemo(() => [{
-    key: "tree",
-    label: "TREE VIEW"
-  }, {
-    key: "split",
-    label: "SPLIT VIEW"
-  }], []);
-
-  // Navigation handlers for compare bar
-  const handleLeftPrevious = useCallback(() => {
-    // Stops at ORIGIN_INDEX — one step past event #1 is the state it overwrote.
-    if (leftIndex > ORIGIN_INDEX) {
-      setLeftIndex(leftIndex - 1);
-    }
-  }, [leftIndex]);
-  const handleLeftNext = useCallback(() => {
-    if (leftIndex < rightIndex - 1) {
-      setLeftIndex(leftIndex + 1);
-    }
-  }, [leftIndex, rightIndex]);
-  const handleRightPrevious = useCallback(() => {
-    if (rightIndex > leftIndex + 1) {
-      setRightIndex(rightIndex - 1);
-    }
-  }, [rightIndex, leftIndex]);
-  const handleRightNext = useCallback(() => {
-    if (rightIndex < totalEvents - 1) {
-      setRightIndex(rightIndex + 1);
-    }
-  }, [rightIndex, totalEvents]);
-
-  // Memoized so the diff viewers don't see new oldValue/newValue refs on every
-  // re-render. parseValue runs JSON.parse, which would otherwise produce fresh
-  // object identities every time and force expensive recomputations downstream
-  // (line diff, tree diff, expansion-state effects, etc.).
-  const previousValue = useMemo(() => isOriginLeft ? originValue : parseValue(leftEvent?.data?.value ?? null), [isOriginLeft, originValue, leftEvent]);
-  const currentValue = useMemo(() => parseValue(rightEvent?.data?.value), [rightEvent]);
-
-  // Render diff content
-  const renderDiffContent = useCallback(() => {
-    if (diffMode === "split") {
-      return /*#__PURE__*/_jsx(ThemedSplitView, {
-        oldValue: previousValue,
-        newValue: currentValue,
-        differences: SPLIT_VIEW_DIFFERENCES,
-        theme: diffThemes.devToolsDefault,
-        options: SPLIT_VIEW_OPTIONS,
-        showThemeName: false,
-        scrollEnabled: false
-      });
-    }
-
-    // Inline: the whole diff section scrolls as one page (see
-    // `scrollDiffSection` below), so the tree must not scroll itself.
-    return /*#__PURE__*/_jsx(TreeDiffViewer, {
-      oldValue: previousValue,
-      newValue: currentValue,
-      scrollEnabled: false
-    });
-  }, [previousValue, currentValue, diffMode]);
-
-  // Footer navigation handlers
-  const handleFooterPrevious = useCallback(() => {
-    onEventIndexChange(Math.max(0, selectedEventIndex - 1));
-  }, [selectedEventIndex, onEventIndexChange]);
-  const handleFooterNext = useCallback(() => {
-    onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1));
-  }, [selectedEventIndex, totalEvents, onEventIndexChange]);
-
-  // Time-travel action handlers
-  const handleUndo = useCallback(async () => {
-    if (!isPro) {
-      setShowProModal(true);
-      return;
-    }
-    if (!selectedEvent || selectedEvent.storageType === "mmkv") return;
-    try {
-      await undoOperation(selectedEvent);
-    } catch {
-      // Silent fail
-    }
-  }, [selectedEvent, isPro]);
-  const handleJump = useCallback(async () => {
-    if (!isPro) {
-      setShowProModal(true);
-      return;
-    }
-    if (!selectedEvent || selectedEvent.storageType === "mmkv") return;
-    const asyncEvents = navigationItems.filter(e => e.storageType !== "mmkv");
-    const targetIndex = asyncEvents.findIndex(e => e.timestamp.getTime() === selectedEvent.timestamp.getTime());
-    if (targetIndex === -1) return;
-    try {
-      await jumpToState(asyncEvents, targetIndex);
-    } catch {
-      // Silent fail
-    }
-  }, [selectedEvent, navigationItems, isPro]);
-  const handleCopy = useCallback(async () => {
-    if (!selectedEvent) return;
-    const eventData = {
-      action: selectedEvent.action,
-      timestamp: selectedEvent.timestamp.toISOString(),
-      data: selectedEvent.data
-    };
-    await copyToClipboard(eventData);
-  }, [selectedEvent]);
-
-  // Check if current event supports actions
-  const isAsyncStorageEvent = selectedEvent?.storageType !== "mmkv";
-  const canUndoEvent = isAsyncStorageEvent && selectedEvent && canUndo(selectedEvent);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [isAsyncStorageEvent && /*#__PURE__*/_jsxs(View, {
-      style: styles.actionButtonsContainer,
-      children: [/*#__PURE__*/_jsx(StorageEventActionButton, {
-        type: "undo",
-        text: "UNDO",
-        onPress: handleUndo,
-        disabled: !canUndoEvent,
-        locked: !isPro
-      }), /*#__PURE__*/_jsx(StorageEventActionButton, {
-        type: "jump",
-        text: "JUMP",
-        onPress: handleJump,
-        locked: !isPro
-      }), /*#__PURE__*/_jsx(StorageEventActionButton, {
-        type: "copy",
-        text: "COPY",
-        onPress: handleCopy
-      })]
-    }), /*#__PURE__*/_jsx(EventHistoryViewer
-    // Diff only: no `renderCurrentView`, so the viewer drops the toggle
-    // cards entirely rather than showing a one-option switch.
-    , {
-      activeView: "diff",
-      diffViewLabel: "DIFF VIEW",
-      diffViewDescription: "Compare changes between versions",
-      diffViewIcon: GitBranch
-      // Diff View
-      ,
-      diffModeTabs: diffModeTabs,
-      activeDiffMode: diffMode,
-      onDiffModeChange: handleDiffModeChange,
-      renderDiffContent: renderDiffContent
-      // Both diff modes render inline now, so the whole section scrolls as
-      // one page rather than confining the rows to a nested pane.
-      ,
-      scrollDiffSection: true
-      // Compare Bar
-      ,
-      leftEvent: leftEventInfo,
-      rightEvent: rightEventInfo,
-      showCompareNavigation: true,
-      onLeftPrevious: handleLeftPrevious,
-      onLeftNext: handleLeftNext,
-      onRightPrevious: handleRightPrevious,
-      onRightNext: handleRightNext,
-      canLeftPrevious: leftIndex > ORIGIN_INDEX,
-      canLeftNext: leftIndex < rightIndex - 1,
-      canRightPrevious: rightIndex > leftIndex + 1,
-      canRightNext: rightIndex < totalEvents - 1
-      // Footer
-      ,
-      disableInternalFooter: disableInternalFooter,
-      footerCurrentIndex: selectedEventIndex,
-      footerTotalItems: totalEvents,
-      footerItemLabel: "Event",
-      footerSubtitle: formatRelativeTime(selectedEvent?.timestamp),
-      onFooterPrevious: handleFooterPrevious,
-      onFooterNext: handleFooterNext
-    }), /*#__PURE__*/_jsx(ProUpgradeModal, {
-      visible: showProModal,
-      onClose: () => setShowProModal(false),
-      featureName: "Storage Time-Travel"
-    })]
-  });
-}
-
-/**
- * External footer component for modal use
- */
-export function StorageEventDetailFooter({
-  conversation,
-  selectedEventIndex = 0,
-  onEventIndexChange = () => {},
-  applySafeAreaInset = true
-}) {
-  const navigationItems = conversation.events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
-  const totalEvents = navigationItems.length;
-  return /*#__PURE__*/_jsx(EventStepperFooter, {
-    currentIndex: selectedEventIndex,
-    totalItems: totalEvents,
-    onPrevious: () => onEventIndexChange(Math.max(0, selectedEventIndex - 1)),
-    onNext: () => onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1)),
-    itemLabel: "Event",
-    subtitle: formatRelativeTime(navigationItems[selectedEventIndex]?.timestamp),
-    applySafeAreaInset: applySafeAreaInset
-  });
-}
-const styles = StyleSheet.create({
-  // Action Buttons
-  actionButtonsContainer: {
-    flexDirection: "row",
-    justifyContent: "center",
-    alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    backgroundColor: night.color.surface,
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.border
-  },
-  // Content Card
-  valueBox: {
-    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
-  },
-  // Action badges for compare bar
-  actionBadgeSmall: {
-    paddingHorizontal: 6,
-    paddingVertical: 1,
-    borderRadius: 3
-  },
-  actionTextSmall: {
-    fontSize: 8,
-    fontWeight: "700",
-    fontFamily: monoFont
-  }
-});
+"use strict";import{View as w,Text as k,StyleSheet as ft}from"react-native";import{useState as P,useCallback as f,useMemo as g,useEffect as j,useRef as dt}from"react";import H from"@react-native-async-storage/async-storage";import{formatRelativeTime as E,macOSColors as I,night as h,parseValue as N,devToolsStorageKeys as z,GitBranch as ut,EventStepperFooter as pt,EventHistoryViewer as gt,copyToClipboard as ht,ProUpgradeModal as St,monoFont as G}from"@buoy-gg/shared-ui";import{useIsPro as bt}from"@buoy-gg/license";import{ABSENT_VALUE as Tt}from"../utils/lineDiff";import{ThemedSplitView as vt}from"./DiffViewer/modes/ThemedSplitView";import{diffThemes as yt}from"./DiffViewer/themes/diffThemes";import{TreeDiffViewer as xt}from"./DiffViewer/TreeDiffViewer";import{translateStorageAction as J}from"../utils/storageActionHelpers";import{StorageEventActionButton as B}from"./StorageEventActionButton";import{undoOperation as Mt,jumpToState as Vt,canUndo as wt}from"../utils/storageTimeTravelUtils";import{jsx as l,jsxs as K,Fragment as Pt}from"react/jsx-runtime";const T=-1;const R={prior:{label:"BEFORE #1",timestamp:"value before first event",relativeTime:"not captured",badge:"PRIOR"},absent:{label:"NO PRIOR VALUE",timestamp:"key did not exist",relativeTime:"created here",badge:"ABSENT"},scanned:{label:"ALREADY PRESENT",timestamp:"value found at startup",relativeTime:"not a write",badge:"SCANNED"}};function C(a){switch(a){case"setItem":case"multiSet":return I.semantic.success;case"removeItem":case"multiRemove":case"clear":return I.semantic.error;case"mergeItem":case"multiMerge":return I.semantic.info;default:return I.text.muted}}function jt(a){if(a===null)return"null";if(a===void 0)return"undefined";if(Array.isArray(a))return"array";return typeof a}function Y(a){const t=String(a.getHours()).padStart(2,"0");const u=String(a.getMinutes()).padStart(2,"0");const v=String(a.getSeconds()).padStart(2,"0");const c=String(a.getMilliseconds()).padStart(3,"0");return`${t}:${u}:${v}.${c}`}const Et={hideLineNumbers:false,disableWordDiff:false,showDiffOnly:false,compareMethod:"words",contextLines:3,lineOffset:0};const It=[];export function StorageEventDetailContent({conversation:a,selectedEventIndex:t=0,onEventIndexChange:u=()=>{},disableInternalFooter:v=false}){const c=bt();const[V,y]=P(false);const[x,$]=P("split");const[r,D]=P(Math.max(T,t-1));const[i,L]=P(t);const W=dt(false);const b=g(()=>a.events.sort((o,d)=>o.timestamp.getTime()-d.timestamp.getTime()),[a.events]);const s=b.length;j(()=>{if(W.current)return;const o=async()=>{try{const d=await H.getItem(z.storage.diffViewerMode());if(d==="split"||d==="tree"){$(d)}W.current=true}catch{}};o()},[]);j(()=>{const o=Math.min(s-1,Math.max(0,t));const d=Math.max(T,Math.min(o-1,t-1));D(d);L(o)},[t,s]);const X=f(async o=>{$(o);try{await H.setItem(z.storage.diffViewerMode(),o)}catch{}},[]);const e=b[t];const Nt=e?.action;const M=r===T;const m=M?void 0:b[Math.max(0,Math.min(s-1,r))];const n=b[Math.max(0,Math.min(s-1,i))];const p=g(()=>{const o=n?.data;if(o?.initialScan)return"scanned";return o?.prevValue===null||o?.prevValue===void 0?"absent":"prior"},[n]);const _=g(()=>{if(p==="absent")return Tt;if(p==="scanned")return N(n?.data?.value);return N(n?.data?.prevValue)},[p,n]);const q=g(()=>M?{index:T,label:R[p].label,timestamp:R[p].timestamp,relativeTime:R[p].relativeTime,badge:l(w,{style:[S.actionBadgeSmall,{backgroundColor:`${h.color.textTertiary}20`}],children:l(k,{style:[S.actionTextSmall,{color:h.color.textTertiary}],children:R[p].badge})})}:{index:r,label:`#${r+1} / ${s}`,timestamp:m?Y(m.timestamp):"",relativeTime:m?E(m.timestamp):"",badge:m?l(w,{style:[S.actionBadgeSmall,{backgroundColor:`${C(m.action)}20`}],children:l(k,{style:[S.actionTextSmall,{color:C(m.action)}],children:J(m.action)})}):void 0},[r,m,s,M,p]);const Q=g(()=>({index:i,label:`#${i+1} / ${s}`,timestamp:n?Y(n.timestamp):"",relativeTime:n?E(n.timestamp):"",badge:n?l(w,{style:[S.actionBadgeSmall,{backgroundColor:`${C(n.action)}20`}],children:l(k,{style:[S.actionTextSmall,{color:C(n.action)}],children:J(n.action)})}):void 0}),[i,n,s]);const Z=g(()=>[{key:"tree",label:"TREE VIEW"},{key:"split",label:"SPLIT VIEW"}],[]);const tt=f(()=>{if(r>T){D(r-1)}},[r]);const et=f(()=>{if(r<i-1){D(r+1)}},[r,i]);const ot=f(()=>{if(i>r+1){L(i-1)}},[i,r]);const at=f(()=>{if(i<s-1){L(i+1)}},[i,s]);const F=g(()=>M?_:N(m?.data?.value??null),[M,_,m]);const A=g(()=>N(n?.data?.value),[n]);const rt=f(()=>{if(x==="split"){return l(vt,{oldValue:F,newValue:A,differences:It,theme:yt.devToolsDefault,options:Et,showThemeName:false,scrollEnabled:false})}return l(xt,{oldValue:F,newValue:A,scrollEnabled:false})},[F,A,x]);const nt=f(()=>{u(Math.max(0,t-1))},[t,u]);const it=f(()=>{u(Math.min(s-1,t+1))},[t,s,u]);const st=f(async()=>{if(!c){y(true);return}if(!e||e.storageType==="mmkv")return;try{await Mt(e)}catch{}},[e,c]);const lt=f(async()=>{if(!c){y(true);return}if(!e||e.storageType==="mmkv")return;const o=b.filter(O=>O.storageType!=="mmkv");const d=o.findIndex(O=>O.timestamp.getTime()===e.timestamp.getTime());if(d===-1)return;try{await Vt(o,d)}catch{}},[e,b,c]);const ct=f(async()=>{if(!e)return;const o={action:e.action,timestamp:e.timestamp.toISOString(),data:e.data};await ht(o)},[e]);const U=e?.storageType!=="mmkv";const mt=U&&e&&wt(e);return K(Pt,{children:[U&&K(w,{style:S.actionButtonsContainer,children:[l(B,{type:"undo",text:"UNDO",onPress:st,disabled:!mt,locked:!c}),l(B,{type:"jump",text:"JUMP",onPress:lt,locked:!c}),l(B,{type:"copy",text:"COPY",onPress:ct})]}),l(gt,{activeView:"diff",diffViewLabel:"DIFF VIEW",diffViewDescription:"Compare changes between versions",diffViewIcon:ut,diffModeTabs:Z,activeDiffMode:x,onDiffModeChange:X,renderDiffContent:rt,scrollDiffSection:true,leftEvent:q,rightEvent:Q,showCompareNavigation:true,onLeftPrevious:tt,onLeftNext:et,onRightPrevious:ot,onRightNext:at,canLeftPrevious:r>T,canLeftNext:r<i-1,canRightPrevious:i>r+1,canRightNext:i<s-1,disableInternalFooter:v,footerCurrentIndex:t,footerTotalItems:s,footerItemLabel:"Event",footerSubtitle:E(e?.timestamp),onFooterPrevious:nt,onFooterNext:it}),l(St,{visible:V,onClose:()=>y(false),featureName:"Storage Time-Travel"})]})}export function StorageEventDetailFooter({conversation:a,selectedEventIndex:t=0,onEventIndexChange:u=()=>{},applySafeAreaInset:v=true}){const c=a.events.sort((y,x)=>y.timestamp.getTime()-x.timestamp.getTime());const V=c.length;return l(pt,{currentIndex:t,totalItems:V,onPrevious:()=>u(Math.max(0,t-1)),onNext:()=>u(Math.min(V-1,t+1)),itemLabel:"Event",subtitle:E(c[t]?.timestamp),applySafeAreaInset:v})}const S=ft.create({actionButtonsContainer:{flexDirection:"row",justifyContent:"center",alignItems:"center",gap:8,paddingHorizontal:12,paddingVertical:10,backgroundColor:h.color.surface,borderBottomWidth:1,borderBottomColor:h.color.border},valueBox:{backgroundColor:h.color.bg,borderRadius:6,borderWidth:1,borderColor:h.color.border,padding:8},valueText:{fontSize:12,color:h.color.text,fontFamily:G,lineHeight:18},actionBadgeSmall:{paddingHorizontal:6,paddingVertical:1,borderRadius:3},actionTextSmall:{fontSize:8,fontWeight:"700",fontFamily:G}});