@buoy-gg/jotai 2.1.12 → 2.1.13

package/lib/module/jotai/components/JotaiAtomDetailContent.js

@@ -1,748 +1 @@
-"use strict";
-
-/**
- * JotaiAtomDetailContent
- *
- * Detail view for a Jotai atom change with 3 view modes:
- * - CHANGE: Atom label, timestamp, category, changed keys
- * - VALUE: Full atom value after change
- * - DIFF: Compare prev vs next value
- *
- * Mirrors ZustandStateDetailContent.tsx from @buoy-gg/zustand
- */
-
-import React, { memo, useState, useCallback, useMemo } from "react";
-import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
-import { macOSColors, buoyColors, EventStepperFooter, formatRelativeTime, parseValue, Info, Zap, FileText, Database, GitBranch, copyToClipboard, ProUpgradeModal, DiffModeTabs, CompareBar } from "@buoy-gg/shared-ui";
-import { DataViewer, SplitDiffViewer, TreeDiffViewer, diffThemes } from "@buoy-gg/shared-ui/dataViewer";
-import { useIsPro } from "@buoy-gg/license";
-import { jotaiStateStore } from "../utils/jotaiStateStore";
-
-// ---- View Toggle ----
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const VIEW_CONFIGS = [{
-  key: "change",
-  label: "CHANGE",
-  icon: FileText,
-  activeColor: macOSColors.semantic.warning
-}, {
-  key: "value",
-  label: "VALUE",
-  icon: Database,
-  activeColor: macOSColors.semantic.info
-}, {
-  key: "diff",
-  label: "DIFF",
-  icon: GitBranch,
-  activeColor: macOSColors.semantic.success
-}];
-function DetailViewToggle({
-  activeView,
-  onViewChange,
-  diffDisabled
-}) {
-  return /*#__PURE__*/_jsx(View, {
-    style: toggleStyles.container,
-    children: VIEW_CONFIGS.map(config => {
-      const isActive = activeView === config.key;
-      const isDisabled = config.key === "diff" && diffDisabled;
-      const IconComponent = config.icon;
-      return /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [toggleStyles.card, isActive && [toggleStyles.cardActive, {
-          borderColor: config.activeColor
-        }], isDisabled && toggleStyles.cardDisabled],
-        onPress: () => !isDisabled && onViewChange(config.key),
-        activeOpacity: 0.7,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: toggleStyles.cardContent,
-          children: [/*#__PURE__*/_jsx(IconComponent, {
-            size: 14,
-            color: isActive ? config.activeColor : isDisabled ? macOSColors.text.muted : macOSColors.text.secondary
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [toggleStyles.cardLabel, isActive && {
-              color: config.activeColor
-            }, isDisabled && {
-              color: macOSColors.text.muted
-            }],
-            children: config.label
-          })]
-        })
-      }, config.key);
-    })
-  });
-}
-
-// ---- Helpers ----
-
-function getCategoryInfo(category) {
-  switch (category) {
-    case "initial":
-      return {
-        label: "INITIAL",
-        color: buoyColors.textMuted,
-        bgColor: buoyColors.textMuted + "26"
-      };
-    default:
-      return {
-        label: "WRITE",
-        color: buoyColors.success,
-        bgColor: buoyColors.success + "26"
-      };
-  }
-}
-function formatTime(timestamp) {
-  const date = new Date(timestamp);
-  const h = date.getHours().toString().padStart(2, "0");
-  const m = date.getMinutes().toString().padStart(2, "0");
-  const s = date.getSeconds().toString().padStart(2, "0");
-  const ms = date.getMilliseconds().toString().padStart(3, "0");
-  return `${h}:${m}:${s}.${ms}`;
-}
-function formatTimestamp(timestamp) {
-  return new Date(timestamp).toLocaleTimeString("en-US", {
-    hour12: false,
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit"
-  });
-}
-function getValueType(value) {
-  if (value === null) return "null";
-  if (value === undefined) return "undefined";
-  if (Array.isArray(value)) return "array";
-  return typeof value;
-}
-function getChangeLabel(category) {
-  return category === "initial" ? "INIT" : "WRITE";
-}
-const DIFF_MODE_TABS = [{
-  key: "tree",
-  label: "TREE VIEW"
-}, {
-  key: "split",
-  label: "SPLIT VIEW"
-}];
-
-// ---- Change Info View (CHANGE tab) ----
-
-const JotaiAtomInfoView = /*#__PURE__*/memo(function JotaiAtomInfoView({
-  change
-}) {
-  const isPro = useIsPro();
-  const [showProModal, setShowProModal] = useState(false);
-  const categoryInfo = getCategoryInfo(change.category);
-  const atomColor = jotaiStateStore.getAtomColor(change.atomLabel);
-  const handleCopyValue = useCallback(async () => {
-    if (!isPro) {
-      setShowProModal(true);
-      return;
-    }
-    await copyToClipboard(change.nextValue);
-  }, [change.nextValue, isPro]);
-  return /*#__PURE__*/_jsxs(ScrollView, {
-    style: infoStyles.container,
-    contentContainerStyle: infoStyles.content,
-    showsVerticalScrollIndicator: false,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: infoStyles.card,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: infoStyles.sectionHeader,
-        children: /*#__PURE__*/_jsxs(View, {
-          style: infoStyles.sectionHeaderLeft,
-          children: [/*#__PURE__*/_jsx(Info, {
-            size: 14,
-            color: buoyColors.primary
-          }), /*#__PURE__*/_jsx(Text, {
-            style: infoStyles.sectionTitle,
-            children: "CHANGE INFO"
-          })]
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: infoStyles.cardContent,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: infoStyles.infoRow,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: infoStyles.infoLabel,
-            children: "Atom"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [infoStyles.infoValue, infoStyles.infoValueMono, {
-              color: atomColor
-            }],
-            numberOfLines: 1,
-            ellipsizeMode: "middle",
-            children: change.atomLabel
-          })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: infoStyles.infoRow,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: infoStyles.infoLabel,
-            children: "Time"
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [infoStyles.infoValue, infoStyles.infoValueMono],
-            children: formatTime(change.timestamp)
-          })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: infoStyles.badgeRow,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [infoStyles.categoryBadge, {
-              backgroundColor: categoryInfo.bgColor
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [infoStyles.categoryText, {
-                color: categoryInfo.color
-              }],
-              children: categoryInfo.label
-            })
-          }), change.hasValueChange ? /*#__PURE__*/_jsxs(View, {
-            style: infoStyles.changesBadge,
-            children: [/*#__PURE__*/_jsx(Zap, {
-              size: 10,
-              color: buoyColors.success
-            }), /*#__PURE__*/_jsx(Text, {
-              style: infoStyles.changesText,
-              children: change.diffSummary || "changed"
-            })]
-          }) : /*#__PURE__*/_jsx(View, {
-            style: infoStyles.noChangesBadge,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: infoStyles.noChangesText,
-              children: "no change"
-            })
-          })]
-        })]
-      })]
-    }), change.changedKeys.length > 0 && /*#__PURE__*/_jsxs(View, {
-      style: infoStyles.card,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: infoStyles.sectionHeader,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: infoStyles.sectionHeaderLeft,
-          children: [/*#__PURE__*/_jsx(Zap, {
-            size: 14,
-            color: buoyColors.primary
-          }), /*#__PURE__*/_jsx(Text, {
-            style: infoStyles.sectionTitle,
-            children: "CHANGED KEYS"
-          })]
-        }), /*#__PURE__*/_jsx(View, {
-          style: infoStyles.countBadge,
-          children: /*#__PURE__*/_jsx(Text, {
-            style: infoStyles.countText,
-            children: change.changedKeys.length
-          })
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: infoStyles.cardContent,
-        children: /*#__PURE__*/_jsx(View, {
-          style: infoStyles.keysContainer,
-          children: change.changedKeys.map(key => /*#__PURE__*/_jsx(View, {
-            style: infoStyles.keyBadge,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: infoStyles.keyText,
-              children: key
-            })
-          }, key))
-        })
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      style: infoStyles.actionsRow,
-      children: /*#__PURE__*/_jsx(View, {
-        style: [infoStyles.actionButton, infoStyles.actionButtonCopy],
-        onTouchEnd: handleCopyValue,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [infoStyles.actionButtonText, {
-            color: buoyColors.primary
-          }],
-          children: "COPY VALUE"
-        })
-      })
-    }), /*#__PURE__*/_jsx(ProUpgradeModal, {
-      visible: showProModal,
-      onClose: () => setShowProModal(false),
-      featureName: "Copy"
-    })]
-  });
-});
-
-// ---- Main Detail Content ----
-
-export function JotaiAtomDetailContent({
-  change,
-  changes,
-  selectedIndex,
-  onIndexChange,
-  disableInternalFooter = false
-}) {
-  const [activeView, setActiveView] = useState("change");
-  const [diffMode, setDiffMode] = useState("tree");
-  const totalChanges = changes.length;
-  const atomColor = jotaiStateStore.getAtomColor(change.atomLabel);
-  const changeLabel = getChangeLabel(change.category);
-  const valueType = getValueType(parseValue(change.nextValue));
-  const chronologicalNumber = totalChanges - selectedIndex;
-  const prevChangeIndex = selectedIndex < totalChanges - 1 ? selectedIndex + 1 : null;
-  const prevChange = prevChangeIndex !== null ? changes[prevChangeIndex] : null;
-  const prevChronologicalNumber = chronologicalNumber - 1;
-  const leftEvent = useMemo(() => ({
-    index: prevChangeIndex ?? 0,
-    label: prevChronologicalNumber > 0 ? `#${prevChronologicalNumber}` : "Initial",
-    timestamp: prevChange ? formatTimestamp(prevChange.timestamp) : "",
-    relativeTime: prevChange ? formatRelativeTime(new Date(prevChange.timestamp)) : "value",
-    badge: prevChange ? /*#__PURE__*/_jsx(View, {
-      style: [styles.changeBadgeSmall, {
-        backgroundColor: `${jotaiStateStore.getAtomColor(prevChange.atomLabel)}20`
-      }],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.changeTextSmall, {
-          color: jotaiStateStore.getAtomColor(prevChange.atomLabel)
-        }],
-        children: getChangeLabel(prevChange.category)
-      })
-    }) : 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: `${atomColor}20`
-      }],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.changeTextSmall, {
-          color: atomColor
-        }],
-        children: changeLabel
-      })
-    })
-  }), [selectedIndex, change.timestamp, atomColor, changeLabel, chronologicalNumber]);
-  const renderValueView = useCallback(() => {
-    const parsed = parseValue(change.nextValue);
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.contentCard,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.valueHeader,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.valueLabel,
-          children: "VALUE AFTER CHANGE"
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.valueHeaderBadges,
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [styles.changeBadge, {
-              backgroundColor: `${atomColor}20`
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.changeText, {
-                color: atomColor
-              }],
-              children: changeLabel
-            })
-          }), /*#__PURE__*/_jsx(View, {
-            style: styles.typeBadge,
-            children: /*#__PURE__*/_jsx(Text, {
-              style: styles.typeText,
-              children: valueType.toUpperCase()
-            })
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: infoStyles.dataViewerContainer,
-        children: /*#__PURE__*/_jsx(DataViewer, {
-          title: "",
-          data: parsed,
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        })
-      })]
-    });
-  }, [change.nextValue, atomColor, changeLabel, valueType]);
-  const renderDiffContent = useCallback(() => {
-    const prevVal = parseValue(change.prevValue);
-    const nextVal = parseValue(change.nextValue);
-    if (diffMode === "split") {
-      return /*#__PURE__*/_jsx(ScrollView, {
-        style: {
-          flex: 1
-        },
-        showsVerticalScrollIndicator: true,
-        children: /*#__PURE__*/_jsx(SplitDiffViewer, {
-          oldValue: prevVal,
-          newValue: nextVal,
-          theme: diffThemes.devToolsDefault,
-          options: {
-            hideLineNumbers: false,
-            disableWordDiff: false,
-            showDiffOnly: false,
-            compareMethod: "words",
-            contextLines: 3
-          },
-          showThemeName: false
-        })
-      });
-    }
-    return /*#__PURE__*/_jsx(TreeDiffViewer, {
-      oldValue: prevVal,
-      newValue: nextVal
-    });
-  }, [change.prevValue, change.nextValue, 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]);
-  const diffDisabled = totalChanges <= 1;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.container,
-    children: [/*#__PURE__*/_jsx(DetailViewToggle, {
-      activeView: activeView,
-      onViewChange: setActiveView,
-      diffDisabled: diffDisabled
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.contentArea,
-      children: [activeView === "change" && /*#__PURE__*/_jsx(JotaiAtomInfoView, {
-        change: change
-      }), activeView === "value" && /*#__PURE__*/_jsx(View, {
-        style: styles.stateContainer,
-        children: renderValueView()
-      }), activeView === "diff" && /*#__PURE__*/_jsxs(View, {
-        style: styles.diffContainer,
-        children: [/*#__PURE__*/_jsx(DiffModeTabs, {
-          tabs: DIFF_MODE_TABS,
-          activeTab: diffMode,
-          onTabChange: setDiffMode
-        }), /*#__PURE__*/_jsx(CompareBar, {
-          leftEvent: leftEvent,
-          rightEvent: rightEvent
-        }), /*#__PURE__*/_jsx(View, {
-          style: styles.diffContent,
-          children: renderDiffContent()
-        })]
-      })]
-    }), !disableInternalFooter && totalChanges > 1 && /*#__PURE__*/_jsx(EventStepperFooter, {
-      currentIndex: chronologicalNumber - 1,
-      totalItems: totalChanges,
-      onPrevious: handleFooterPrevious,
-      onNext: handleFooterNext,
-      itemLabel: "Change",
-      subtitle: formatRelativeTime(new Date(change.timestamp)),
-      absolute: true
-    })]
-  });
-}
-export function JotaiAtomDetailFooter({
-  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,
-    backgroundColor: macOSColors.background.base
-  },
-  contentArea: {
-    flex: 1,
-    paddingBottom: 96
-  },
-  stateContainer: {
-    flex: 1,
-    padding: 14
-  },
-  contentCard: {
-    backgroundColor: macOSColors.background.card,
-    borderRadius: 14,
-    padding: 14,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default
-  },
-  valueHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 8
-  },
-  valueLabel: {
-    fontSize: 10,
-    color: 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: macOSColors.background.input
-  },
-  typeText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: macOSColors.text.muted,
-    fontFamily: "monospace"
-  },
-  valueBox: {
-    backgroundColor: macOSColors.background.base,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: macOSColors.border.input,
-    padding: 8
-  },
-  valueText: {
-    fontSize: 12,
-    color: 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"
-  }
-});
-const toggleStyles = StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    gap: 8,
-    padding: 14,
-    backgroundColor: macOSColors.background.base
-  },
-  card: {
-    flex: 1,
-    backgroundColor: macOSColors.background.card,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: macOSColors.border.default,
-    paddingVertical: 10,
-    paddingHorizontal: 10,
-    justifyContent: "center"
-  },
-  cardActive: {
-    borderWidth: 1.5,
-    backgroundColor: "rgba(0, 184, 230, 0.05)"
-  },
-  cardDisabled: {
-    opacity: 0.5
-  },
-  cardContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  cardLabel: {
-    fontSize: 10,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    color: macOSColors.text.secondary
-  }
-});
-const infoStyles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  content: {
-    padding: 8,
-    paddingBottom: 100,
-    gap: 16
-  },
-  card: {
-    backgroundColor: buoyColors.card,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: buoyColors.primary + "4D",
-    overflow: "hidden",
-    shadowColor: buoyColors.primary,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 6
-  },
-  sectionHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    borderBottomWidth: 1,
-    borderBottomColor: buoyColors.primary + "33",
-    backgroundColor: buoyColors.primary + "15"
-  },
-  sectionHeaderLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  sectionTitle: {
-    fontSize: 12,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    color: buoyColors.primary,
-    fontFamily: "monospace"
-  },
-  cardContent: {
-    padding: 14,
-    gap: 10
-  },
-  infoRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  infoLabel: {
-    fontSize: 11,
-    color: buoyColors.textMuted,
-    fontWeight: "500"
-  },
-  infoValue: {
-    fontSize: 11,
-    color: buoyColors.text,
-    fontWeight: "500",
-    flex: 1,
-    textAlign: "right",
-    marginLeft: 12
-  },
-  infoValueMono: {
-    fontFamily: "monospace"
-  },
-  badgeRow: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8,
-    marginTop: 6
-  },
-  categoryBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4
-  },
-  categoryText: {
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.3
-  },
-  changesBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: buoyColors.success + "26"
-  },
-  changesText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: buoyColors.success
-  },
-  noChangesBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: buoyColors.input
-  },
-  noChangesText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: buoyColors.textMuted
-  },
-  keysContainer: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6
-  },
-  keyBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
-    backgroundColor: buoyColors.primary + "20",
-    borderWidth: 1,
-    borderColor: buoyColors.primary + "40"
-  },
-  keyText: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: buoyColors.primary,
-    fontFamily: "monospace"
-  },
-  countBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: buoyColors.primary + "26"
-  },
-  countText: {
-    fontSize: 9,
-    fontWeight: "700",
-    color: buoyColors.primary,
-    fontFamily: "monospace"
-  },
-  actionsRow: {
-    flexDirection: "row",
-    gap: 12
-  },
-  actionButton: {
-    paddingHorizontal: 14,
-    paddingVertical: 8,
-    borderRadius: 8,
-    borderWidth: 1
-  },
-  actionButtonCopy: {
-    borderColor: buoyColors.primary + "40",
-    backgroundColor: buoyColors.primary + "15"
-  },
-  actionButtonText: {
-    fontSize: 10,
-    fontWeight: "700",
-    fontFamily: "monospace",
-    letterSpacing: 0.3
-  },
-  dataViewerContainer: {
-    marginTop: -12,
-    marginHorizontal: -12,
-    marginBottom: -12
-  }
-});
+"use strict";import React,{memo,useState,useCallback,useMemo}from"react";import{View,Text,StyleSheet,ScrollView,TouchableOpacity}from"react-native";import{macOSColors,buoyColors,EventStepperFooter,formatRelativeTime,parseValue,Info,Zap,FileText,Database,GitBranch,copyToClipboard,ProUpgradeModal,DiffModeTabs,CompareBar}from"@buoy-gg/shared-ui";import{DataViewer,SplitDiffViewer,TreeDiffViewer,diffThemes}from"@buoy-gg/shared-ui/dataViewer";import{useIsPro}from"@buoy-gg/license";import{jotaiStateStore}from"../utils/jotaiStateStore";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const VIEW_CONFIGS=[{key:"change",label:"CHANGE",icon:FileText,activeColor:macOSColors.semantic.warning},{key:"value",label:"VALUE",icon:Database,activeColor:macOSColors.semantic.info},{key:"diff",label:"DIFF",icon:GitBranch,activeColor:macOSColors.semantic.success}];function DetailViewToggle({activeView:e,onViewChange:o,diffDisabled:t}){return _jsx(View,{style:toggleStyles.container,children:VIEW_CONFIGS.map(a=>{const r=e===a.key,i="diff"===a.key&&t,l=a.icon;return _jsx(TouchableOpacity,{style:[toggleStyles.card,r&&[toggleStyles.cardActive,{borderColor:a.activeColor}],i&&toggleStyles.cardDisabled],onPress:()=>!i&&o(a.key),activeOpacity:.7,children:_jsxs(View,{style:toggleStyles.cardContent,children:[_jsx(l,{size:14,color:r?a.activeColor:i?macOSColors.text.muted:macOSColors.text.secondary}),_jsx(Text,{style:[toggleStyles.cardLabel,r&&{color:a.activeColor},i&&{color:macOSColors.text.muted}],children:a.label})]})},a.key)})})}function getCategoryInfo(e){return"initial"===e?{label:"INITIAL",color:buoyColors.textMuted,bgColor:buoyColors.textMuted+"26"}:{label:"WRITE",color:buoyColors.success,bgColor:buoyColors.success+"26"}}function formatTime(e){const o=new Date(e);return`${o.getHours().toString().padStart(2,"0")}:${o.getMinutes().toString().padStart(2,"0")}:${o.getSeconds().toString().padStart(2,"0")}.${o.getMilliseconds().toString().padStart(3,"0")}`}function formatTimestamp(e){return new Date(e).toLocaleTimeString("en-US",{hour12:!1,hour:"2-digit",minute:"2-digit",second:"2-digit"})}function getValueType(e){return null===e?"null":void 0===e?"undefined":Array.isArray(e)?"array":typeof e}function getChangeLabel(e){return"initial"===e?"INIT":"WRITE"}const DIFF_MODE_TABS=[{key:"tree",label:"TREE VIEW"},{key:"split",label:"SPLIT VIEW"}],JotaiAtomInfoView=memo(function({change:e}){const o=useIsPro(),[t,a]=useState(!1),r=getCategoryInfo(e.category),i=jotaiStateStore.getAtomColor(e.atomLabel),l=useCallback(async()=>{o?await copyToClipboard(e.nextValue):a(!0)},[e.nextValue,o]);return _jsxs(ScrollView,{style:infoStyles.container,contentContainerStyle:infoStyles.content,showsVerticalScrollIndicator:!1,children:[_jsxs(View,{style:infoStyles.card,children:[_jsx(View,{style:infoStyles.sectionHeader,children:_jsxs(View,{style:infoStyles.sectionHeaderLeft,children:[_jsx(Info,{size:14,color:buoyColors.primary}),_jsx(Text,{style:infoStyles.sectionTitle,children:"CHANGE INFO"})]})}),_jsxs(View,{style:infoStyles.cardContent,children:[_jsxs(View,{style:infoStyles.infoRow,children:[_jsx(Text,{style:infoStyles.infoLabel,children:"Atom"}),_jsx(Text,{style:[infoStyles.infoValue,infoStyles.infoValueMono,{color:i}],numberOfLines:1,ellipsizeMode:"middle",children:e.atomLabel})]}),_jsxs(View,{style:infoStyles.infoRow,children:[_jsx(Text,{style:infoStyles.infoLabel,children:"Time"}),_jsx(Text,{style:[infoStyles.infoValue,infoStyles.infoValueMono],children:formatTime(e.timestamp)})]}),_jsxs(View,{style:infoStyles.badgeRow,children:[_jsx(View,{style:[infoStyles.categoryBadge,{backgroundColor:r.bgColor}],children:_jsx(Text,{style:[infoStyles.categoryText,{color:r.color}],children:r.label})}),e.hasValueChange?_jsxs(View,{style:infoStyles.changesBadge,children:[_jsx(Zap,{size:10,color:buoyColors.success}),_jsx(Text,{style:infoStyles.changesText,children:e.diffSummary||"changed"})]}):_jsx(View,{style:infoStyles.noChangesBadge,children:_jsx(Text,{style:infoStyles.noChangesText,children:"no change"})})]})]})]}),e.changedKeys.length>0&&_jsxs(View,{style:infoStyles.card,children:[_jsxs(View,{style:infoStyles.sectionHeader,children:[_jsxs(View,{style:infoStyles.sectionHeaderLeft,children:[_jsx(Zap,{size:14,color:buoyColors.primary}),_jsx(Text,{style:infoStyles.sectionTitle,children:"CHANGED KEYS"})]}),_jsx(View,{style:infoStyles.countBadge,children:_jsx(Text,{style:infoStyles.countText,children:e.changedKeys.length})})]}),_jsx(View,{style:infoStyles.cardContent,children:_jsx(View,{style:infoStyles.keysContainer,children:e.changedKeys.map(e=>_jsx(View,{style:infoStyles.keyBadge,children:_jsx(Text,{style:infoStyles.keyText,children:e})},e))})})]}),_jsx(View,{style:infoStyles.actionsRow,children:_jsx(View,{style:[infoStyles.actionButton,infoStyles.actionButtonCopy],onTouchEnd:l,children:_jsx(Text,{style:[infoStyles.actionButtonText,{color:buoyColors.primary}],children:"COPY VALUE"})})}),_jsx(ProUpgradeModal,{visible:t,onClose:()=>a(!1),featureName:"Copy"})]})});export function JotaiAtomDetailContent({change:e,changes:o,selectedIndex:t,onIndexChange:a,disableInternalFooter:r=!1}){const[i,l]=useState("change"),[n,s]=useState("tree"),c=o.length,d=jotaiStateStore.getAtomColor(e.atomLabel),y=getChangeLabel(e.category),g=getValueType(parseValue(e.nextValue)),u=c-t,f=t<c-1?t+1:null,m=null!==f?o[f]:null,x=u-1,h=useMemo(()=>({index:f??0,label:x>0?`#${x}`:"Initial",timestamp:m?formatTimestamp(m.timestamp):"",relativeTime:m?formatRelativeTime(new Date(m.timestamp)):"value",badge:m?_jsx(View,{style:[styles.changeBadgeSmall,{backgroundColor:`${jotaiStateStore.getAtomColor(m.atomLabel)}20`}],children:_jsx(Text,{style:[styles.changeTextSmall,{color:jotaiStateStore.getAtomColor(m.atomLabel)}],children:getChangeLabel(m.category)})}):void 0}),[f,m,x]),p=useMemo(()=>({index:t,label:`#${u}`,timestamp:formatTimestamp(e.timestamp),relativeTime:formatRelativeTime(new Date(e.timestamp)),badge:_jsx(View,{style:[styles.changeBadgeSmall,{backgroundColor:`${d}20`}],children:_jsx(Text,{style:[styles.changeTextSmall,{color:d}],children:y})})}),[t,e.timestamp,d,y,u]),b=useCallback(()=>{const o=parseValue(e.nextValue);return _jsxs(View,{style:styles.contentCard,children:[_jsxs(View,{style:styles.valueHeader,children:[_jsx(Text,{style:styles.valueLabel,children:"VALUE AFTER CHANGE"}),_jsxs(View,{style:styles.valueHeaderBadges,children:[_jsx(View,{style:[styles.changeBadge,{backgroundColor:`${d}20`}],children:_jsx(Text,{style:[styles.changeText,{color:d}],children:y})}),_jsx(View,{style:styles.typeBadge,children:_jsx(Text,{style:styles.typeText,children:g.toUpperCase()})})]})]}),_jsx(View,{style:infoStyles.dataViewerContainer,children:_jsx(DataViewer,{title:"",data:o,showTypeFilter:!0,rawMode:!0,initialExpanded:!0})})]})},[e.nextValue,d,y,g]),C=useCallback(()=>{const o=parseValue(e.prevValue),t=parseValue(e.nextValue);return"split"===n?_jsx(ScrollView,{style:{flex:1},showsVerticalScrollIndicator:!0,children:_jsx(SplitDiffViewer,{oldValue:o,newValue:t,theme:diffThemes.devToolsDefault,options:{hideLineNumbers:!1,disableWordDiff:!1,showDiffOnly:!1,compareMethod:"words",contextLines:3},showThemeName:!1})}):_jsx(TreeDiffViewer,{oldValue:o,newValue:t})},[e.prevValue,e.nextValue,n]),S=useCallback(()=>{a(Math.min(c-1,t+1))},[t,c,a]),V=useCallback(()=>{a(Math.max(0,t-1))},[t,a]),w=c<=1;return _jsxs(View,{style:styles.container,children:[_jsx(DetailViewToggle,{activeView:i,onViewChange:l,diffDisabled:w}),_jsxs(View,{style:styles.contentArea,children:["change"===i&&_jsx(JotaiAtomInfoView,{change:e}),"value"===i&&_jsx(View,{style:styles.stateContainer,children:b()}),"diff"===i&&_jsxs(View,{style:styles.diffContainer,children:[_jsx(DiffModeTabs,{tabs:DIFF_MODE_TABS,activeTab:n,onTabChange:s}),_jsx(CompareBar,{leftEvent:h,rightEvent:p}),_jsx(View,{style:styles.diffContent,children:C()})]})]}),!r&&c>1&&_jsx(EventStepperFooter,{currentIndex:u-1,totalItems:c,onPrevious:S,onNext:V,itemLabel:"Change",subtitle:formatRelativeTime(new Date(e.timestamp)),absolute:!0})]})}export function JotaiAtomDetailFooter({change:e,changes:o,selectedIndex:t,onIndexChange:a}){const r=o.length;return r<=1?null:_jsx(EventStepperFooter,{currentIndex:r-t-1,totalItems:r,onPrevious:()=>a(Math.min(r-1,t+1)),onNext:()=>a(Math.max(0,t-1)),itemLabel:"Change",subtitle:formatRelativeTime(new Date(e.timestamp))})}const styles=StyleSheet.create({container:{flex:1,backgroundColor:macOSColors.background.base},contentArea:{flex:1,paddingBottom:96},stateContainer:{flex:1,padding:14},contentCard:{backgroundColor:macOSColors.background.card,borderRadius:14,padding:14,borderWidth:1,borderColor:macOSColors.border.default},valueHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:8},valueLabel:{fontSize:10,color: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:macOSColors.background.input},typeText:{fontSize:9,fontWeight:"600",color:macOSColors.text.muted,fontFamily:"monospace"},valueBox:{backgroundColor:macOSColors.background.base,borderRadius:6,borderWidth:1,borderColor:macOSColors.border.input,padding:8},valueText:{fontSize:12,color: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"}}),toggleStyles=StyleSheet.create({container:{flexDirection:"row",gap:8,padding:14,backgroundColor:macOSColors.background.base},card:{flex:1,backgroundColor:macOSColors.background.card,borderRadius:12,borderWidth:1,borderColor:macOSColors.border.default,paddingVertical:10,paddingHorizontal:10,justifyContent:"center"},cardActive:{borderWidth:1.5,backgroundColor:"rgba(0, 184, 230, 0.05)"},cardDisabled:{opacity:.5},cardContent:{flexDirection:"row",alignItems:"center",gap:6},cardLabel:{fontSize:10,fontWeight:"700",letterSpacing:.5,color:macOSColors.text.secondary}}),infoStyles=StyleSheet.create({container:{flex:1},content:{padding:8,paddingBottom:100,gap:16},card:{backgroundColor:buoyColors.card,borderRadius:6,borderWidth:1,borderColor:buoyColors.primary+"4D",overflow:"hidden",shadowColor:buoyColors.primary,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:6},sectionHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:buoyColors.primary+"33",backgroundColor:buoyColors.primary+"15"},sectionHeaderLeft:{flexDirection:"row",alignItems:"center",gap:6},sectionTitle:{fontSize:12,fontWeight:"600",letterSpacing:.5,color:buoyColors.primary,fontFamily:"monospace"},cardContent:{padding:14,gap:10},infoRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},infoLabel:{fontSize:11,color:buoyColors.textMuted,fontWeight:"500"},infoValue:{fontSize:11,color:buoyColors.text,fontWeight:"500",flex:1,textAlign:"right",marginLeft:12},infoValueMono:{fontFamily:"monospace"},badgeRow:{flexDirection:"row",flexWrap:"wrap",gap:8,marginTop:6},categoryBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4},categoryText:{fontSize:9,fontWeight:"700",letterSpacing:.3},changesBadge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:buoyColors.success+"26"},changesText:{fontSize:9,fontWeight:"600",color:buoyColors.success},noChangesBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:buoyColors.input},noChangesText:{fontSize:9,fontWeight:"600",color:buoyColors.textMuted},keysContainer:{flexDirection:"row",flexWrap:"wrap",gap:6},keyBadge:{paddingHorizontal:8,paddingVertical:4,borderRadius:4,backgroundColor:buoyColors.primary+"20",borderWidth:1,borderColor:buoyColors.primary+"40"},keyText:{fontSize:11,fontWeight:"600",color:buoyColors.primary,fontFamily:"monospace"},countBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:buoyColors.primary+"26"},countText:{fontSize:9,fontWeight:"700",color:buoyColors.primary,fontFamily:"monospace"},actionsRow:{flexDirection:"row",gap:12},actionButton:{paddingHorizontal:14,paddingVertical:8,borderRadius:8,borderWidth:1},actionButtonCopy:{borderColor:buoyColors.primary+"40",backgroundColor:buoyColors.primary+"15"},actionButtonText:{fontSize:10,fontWeight:"700",fontFamily:"monospace",letterSpacing:.3},dataViewerContainer:{marginTop:-12,marginHorizontal:-12,marginBottom:-12}});