@buoy-gg/jotai 7.0.41 → 7.0.43

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

@@ -1,715 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.JotaiAtomDetailContent = JotaiAtomDetailContent;
-exports.JotaiAtomDetailFooter = JotaiAtomDetailFooter;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _dataViewer = require("@buoy-gg/shared-ui/dataViewer");
-var _license = require("@buoy-gg/license");
-var _jotaiStateStore = require("../utils/jotaiStateStore");
-var _testIDs = require("../utils/testIDs");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * 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
- */
-
-// ---- View Toggle ----
-const VIEW_CONFIGS = [{
-  key: "change",
-  label: "CHANGE",
-  icon: _sharedUi.FileText
-}, {
-  key: "value",
-  label: "VALUE",
-  icon: _sharedUi.Database
-}, {
-  key: "diff",
-  label: "DIFF",
-  icon: _sharedUi.GitBranch
-}];
-const DIFF_DISABLED = ["diff"];
-
-// ---- Helpers ----
-
-function getCategoryInfo(category) {
-  switch (category) {
-    case "initial":
-      return {
-        label: "INITIAL",
-        color: _sharedUi.night.color.textTertiary,
-        bgColor: _sharedUi.night.color.textTertiary + "26"
-      };
-    default:
-      return {
-        label: "WRITE",
-        color: _sharedUi.buoyColors.success,
-        bgColor: _sharedUi.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__*/(0, _react.memo)(function JotaiAtomInfoView({
-  change
-}) {
-  const isPro = (0, _license.useIsPro)();
-  const [showProModal, setShowProModal] = (0, _react.useState)(false);
-  const categoryInfo = getCategoryInfo(change.category);
-  const atomColor = _jotaiStateStore.jotaiStateStore.getAtomColor(change.atomLabel);
-  const handleCopyValue = (0, _react.useCallback)(async () => {
-    if (!isPro) {
-      setShowProModal(true);
-      return;
-    }
-    await (0, _sharedUi.copyToClipboard)(change.nextValue);
-  }, [change.nextValue, isPro]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-    style: infoStyles.container,
-    contentContainerStyle: infoStyles.content,
-    showsVerticalScrollIndicator: false,
-    testID: `${_testIDs.JOTAI_TEST_ID}-detail-scroll`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: infoStyles.card,
-      testID: `${_testIDs.JOTAI_TEST_ID}-info-card`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: infoStyles.sectionHeader,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: infoStyles.sectionHeaderLeft,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Info, {
-            size: 14,
-            color: _sharedUi.night.color.accent
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: infoStyles.sectionTitle,
-            children: "CHANGE INFO"
-          })]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: infoStyles.cardContent,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: infoStyles.infoRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: infoStyles.infoLabel,
-            children: "Atom"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [infoStyles.infoValue, infoStyles.infoValueMono, {
-              color: atomColor
-            }],
-            numberOfLines: 1,
-            ellipsizeMode: "middle",
-            testID: `${_testIDs.JOTAI_TEST_ID}-info-atom`,
-            children: change.atomLabel
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: infoStyles.infoRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: infoStyles.infoLabel,
-            children: "Time"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [infoStyles.infoValue, infoStyles.infoValueMono],
-            testID: `${_testIDs.JOTAI_TEST_ID}-info-time`,
-            children: formatTime(change.timestamp)
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: infoStyles.badgeRow,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [infoStyles.categoryBadge, {
-              backgroundColor: categoryInfo.bgColor
-            }],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [infoStyles.categoryText, {
-                color: categoryInfo.color
-              }],
-              testID: `${_testIDs.JOTAI_TEST_ID}-info-category`,
-              children: categoryInfo.label
-            })
-          }), change.hasValueChange ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: infoStyles.changesBadge,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
-              size: 10,
-              color: _sharedUi.buoyColors.success
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: infoStyles.changesText,
-              testID: `${_testIDs.JOTAI_TEST_ID}-info-changes`,
-              children: change.diffSummary || "changed"
-            })]
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: infoStyles.noChangesBadge,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: infoStyles.noChangesText,
-              testID: `${_testIDs.JOTAI_TEST_ID}-info-no-changes`,
-              children: "no change"
-            })
-          })]
-        })]
-      })]
-    }), change.changedKeys.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: infoStyles.card,
-      testID: `${_testIDs.JOTAI_TEST_ID}-keys-card`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: infoStyles.sectionHeader,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: infoStyles.sectionHeaderLeft,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
-            size: 14,
-            color: _sharedUi.night.color.accent
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: infoStyles.sectionTitle,
-            children: "CHANGED KEYS"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: infoStyles.countBadge,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: infoStyles.countText,
-            testID: `${_testIDs.JOTAI_TEST_ID}-keys-count`,
-            children: change.changedKeys.length
-          })
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: infoStyles.cardContent,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: infoStyles.keysContainer,
-          children: change.changedKeys.map(key => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: infoStyles.keyBadge,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: infoStyles.keyText,
-              testID: `${_testIDs.JOTAI_TEST_ID}-key-${(0, _testIDs.slugForTestID)(key)}`,
-              children: key
-            })
-          }, key))
-        })
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: infoStyles.actionsRow,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [infoStyles.actionButton, infoStyles.actionButtonCopy],
-        onTouchEnd: handleCopyValue,
-        testID: `${_testIDs.JOTAI_TEST_ID}-copy-value`,
-        accessibilityRole: "button",
-        accessibilityLabel: "Copy value",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [infoStyles.actionButtonText, {
-            color: _sharedUi.night.color.accent
-          }],
-          children: "COPY VALUE"
-        })
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
-      visible: showProModal,
-      onClose: () => setShowProModal(false),
-      featureName: "Copy"
-    })]
-  });
-});
-
-// ---- Main Detail Content ----
-
-function JotaiAtomDetailContent({
-  change,
-  changes,
-  selectedIndex,
-  onIndexChange,
-  disableInternalFooter = false,
-  initialView = "change"
-}) {
-  // View state (initialView seeds it once; taps own it afterwards)
-  const [activeView, setActiveView] = (0, _react.useState)(initialView);
-  const [diffMode, setDiffMode] = (0, _react.useState)("tree");
-  const totalChanges = changes.length;
-  const atomColor = _jotaiStateStore.jotaiStateStore.getAtomColor(change.atomLabel);
-  const changeLabel = getChangeLabel(change.category);
-  const valueType = getValueType((0, _sharedUi.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 = (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)) : "value",
-    badge: prevChange ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.changeBadgeSmall, {
-        backgroundColor: `${_jotaiStateStore.jotaiStateStore.getAtomColor(prevChange.atomLabel)}20`
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.changeTextSmall, {
-          color: _jotaiStateStore.jotaiStateStore.getAtomColor(prevChange.atomLabel)
-        }],
-        children: getChangeLabel(prevChange.category)
-      })
-    }) : 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: `${atomColor}20`
-      }],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.changeTextSmall, {
-          color: atomColor
-        }],
-        children: changeLabel
-      })
-    })
-  }), [selectedIndex, change.timestamp, atomColor, changeLabel, chronologicalNumber]);
-  const renderValueView = (0, _react.useCallback)(() => {
-    const parsed = (0, _sharedUi.parseValue)(change.nextValue);
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.contentCard,
-      testID: `${_testIDs.JOTAI_TEST_ID}-value-card`,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.valueHeader,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.valueLabel,
-          children: "VALUE AFTER CHANGE"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.valueHeaderBadges,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.changeBadge, {
-              backgroundColor: `${atomColor}20`
-            }],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: [styles.changeText, {
-                color: atomColor
-              }],
-              children: changeLabel
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: styles.typeBadge,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-              style: styles.typeText,
-              testID: `${_testIDs.JOTAI_TEST_ID}-value-type`,
-              children: valueType.toUpperCase()
-            })
-          })]
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: infoStyles.dataViewerContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.DataViewer, {
-          title: "",
-          data: parsed,
-          showTypeFilter: true,
-          rawMode: true,
-          initialExpanded: true
-        })
-      })]
-    });
-  }, [change.nextValue, atomColor, changeLabel, valueType]);
-  const renderDiffContent = (0, _react.useCallback)(() => {
-    const prevVal = (0, _sharedUi.parseValue)(change.prevValue);
-    const nextVal = (0, _sharedUi.parseValue)(change.nextValue);
-    if (diffMode === "split") {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-        style: {
-          flex: 1
-        },
-        showsVerticalScrollIndicator: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_dataViewer.SplitDiffViewer, {
-          oldValue: prevVal,
-          newValue: nextVal,
-          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: prevVal,
-      newValue: nextVal
-    });
-  }, [change.prevValue, change.nextValue, diffMode]);
-  const handleFooterPrevious = (0, _react.useCallback)(() => {
-    onIndexChange(Math.min(totalChanges - 1, selectedIndex + 1));
-  }, [selectedIndex, totalChanges, onIndexChange]);
-  const handleFooterNext = (0, _react.useCallback)(() => {
-    onIndexChange(Math.max(0, selectedIndex - 1));
-  }, [selectedIndex, onIndexChange]);
-
-  // The diff compares THIS change's prevValue/nextValue — no siblings needed.
-  // Gating on `changes.length` greyed DIFF out for every jotai event opened
-  // from the Events timeline (a one-element array). Only a change with no
-  // captured previous value has nothing to compare.
-  const diffDisabled = change.prevValue === undefined;
-  const showInternalFooter = !disableInternalFooter && totalChanges > 1;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DetailViewToggle, {
-      views: VIEW_CONFIGS,
-      activeView: activeView,
-      onViewChange: setActiveView,
-      disabledKeys: diffDisabled ? DIFF_DISABLED : undefined,
-      testIDPrefix: _testIDs.JOTAI_TEST_ID
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: [styles.contentArea, showInternalFooter && styles.contentAreaFooterPad],
-      children: [activeView === "change" && /*#__PURE__*/(0, _jsxRuntime.jsx)(JotaiAtomInfoView, {
-        change: change
-      }), activeView === "value" && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.stateContainer,
-        children: renderValueView()
-      }), activeView === "diff" && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.diffContainer,
-        testID: `${_testIDs.JOTAI_TEST_ID}-diff`,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DiffModeTabs, {
-          tabs: DIFF_MODE_TABS,
-          activeTab: diffMode,
-          onTabChange: setDiffMode,
-          testIDPrefix: `${_testIDs.JOTAI_TEST_ID}-diff-tab`
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompareBar, {
-          leftEvent: leftEvent,
-          rightEvent: rightEvent
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.diffContent,
-          testID: `${_testIDs.JOTAI_TEST_ID}-diff-content`,
-          children: renderDiffContent()
-        })]
-      })]
-    }), showInternalFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
-      currentIndex: chronologicalNumber - 1,
-      totalItems: totalChanges,
-      onPrevious: handleFooterPrevious,
-      onNext: handleFooterNext,
-      itemLabel: "Change",
-      subtitle: (0, _sharedUi.formatRelativeTime)(new Date(change.timestamp)),
-      absolute: true
-    })]
-  });
-}
-function JotaiAtomDetailFooter({
-  change,
-  changes,
-  selectedIndex,
-  onIndexChange
-}) {
-  const totalChanges = changes.length;
-  if (totalChanges <= 1) return null;
-  const chronologicalNumber = totalChanges - selectedIndex;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.EventStepperFooter, {
-    currentIndex: chronologicalNumber - 1,
-    totalItems: totalChanges,
-    onPrevious: () => onIndexChange(Math.min(totalChanges - 1, selectedIndex + 1)),
-    onNext: () => onIndexChange(Math.max(0, selectedIndex - 1)),
-    itemLabel: "Change",
-    subtitle: (0, _sharedUi.formatRelativeTime)(new Date(change.timestamp))
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  contentArea: {
-    flex: 1
-  },
-  // Clearance for the absolute EventStepperFooter — only when it renders,
-  // otherwise hosts like the Events tool get a dead band at the sheet bottom.
-  contentAreaFooterPad: {
-    paddingBottom: 96
-  },
-  stateContainer: {
-    flex: 1,
-    padding: 14
-  },
-  contentCard: {
-    backgroundColor: _sharedUi.night.color.surface,
-    borderRadius: 14,
-    padding: 14,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border
-  },
-  valueHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    marginBottom: 8
-  },
-  valueLabel: {
-    fontSize: 10,
-    color: _sharedUi.night.color.textSecondary,
-    fontFamily: _sharedUi.monoFont,
-    letterSpacing: 0.5,
-    fontWeight: "600"
-  },
-  valueHeaderBadges: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  changeBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  changeText: {
-    fontSize: 9,
-    fontWeight: "700",
-    fontFamily: _sharedUi.monoFont,
-    letterSpacing: 0.3
-  },
-  typeBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4,
-    backgroundColor: _sharedUi.night.color.surfaceElevated
-  },
-  typeText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: _sharedUi.night.color.textTertiary,
-    fontFamily: _sharedUi.monoFont
-  },
-  valueBox: {
-    // Inset code box — darker than the card, the night track color.
-    backgroundColor: _sharedUi.night.color.bg,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    padding: 8
-  },
-  valueText: {
-    fontSize: 12,
-    color: _sharedUi.night.color.text,
-    fontFamily: _sharedUi.monoFont,
-    lineHeight: 18
-  },
-  diffContainer: {
-    flex: 1
-  },
-  diffContent: {
-    flex: 1,
-    paddingHorizontal: 14
-  },
-  changeBadgeSmall: {
-    paddingHorizontal: 6,
-    paddingVertical: 1,
-    borderRadius: 3
-  },
-  changeTextSmall: {
-    fontSize: 8,
-    fontWeight: "700",
-    fontFamily: _sharedUi.monoFont
-  }
-});
-const infoStyles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  content: {
-    padding: 8,
-    paddingBottom: 100,
-    gap: 16
-  },
-  card: {
-    backgroundColor: _sharedUi.night.color.surface,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.accentBorderStrong,
-    overflow: "hidden",
-    shadowColor: _sharedUi.night.color.accent,
-    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: _sharedUi.night.color.accentBorder,
-    backgroundColor: _sharedUi.night.color.accentSoft
-  },
-  sectionHeaderLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  sectionTitle: {
-    fontSize: 12,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    color: _sharedUi.night.color.accent,
-    fontFamily: _sharedUi.monoFont
-  },
-  cardContent: {
-    padding: 14,
-    gap: 10
-  },
-  infoRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  infoLabel: {
-    fontSize: 11,
-    color: _sharedUi.night.color.textTertiary,
-    fontWeight: "500"
-  },
-  infoValue: {
-    fontSize: 11,
-    color: _sharedUi.night.color.text,
-    fontWeight: "500",
-    flex: 1,
-    textAlign: "right",
-    marginLeft: 12
-  },
-  infoValueMono: {
-    fontFamily: _sharedUi.monoFont
-  },
-  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: _sharedUi.buoyColors.success + "26"
-  },
-  changesText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: _sharedUi.buoyColors.success
-  },
-  noChangesBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: _sharedUi.night.color.surfaceElevated
-  },
-  noChangesText: {
-    fontSize: 9,
-    fontWeight: "600",
-    color: _sharedUi.night.color.textTertiary
-  },
-  keysContainer: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 6
-  },
-  keyBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
-    backgroundColor: _sharedUi.night.color.accentSoft,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.accentBorder
-  },
-  keyText: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: _sharedUi.night.color.accent,
-    fontFamily: _sharedUi.monoFont
-  },
-  countBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 4,
-    backgroundColor: _sharedUi.night.color.accentFill
-  },
-  countText: {
-    fontSize: 9,
-    fontWeight: "700",
-    color: _sharedUi.night.color.accent,
-    fontFamily: _sharedUi.monoFont
-  },
-  actionsRow: {
-    flexDirection: "row",
-    gap: 12
-  },
-  actionButton: {
-    paddingHorizontal: 14,
-    paddingVertical: 8,
-    borderRadius: 8,
-    borderWidth: 1
-  },
-  actionButtonCopy: {
-    borderColor: _sharedUi.night.color.accentBorder,
-    backgroundColor: _sharedUi.night.color.accentSoft
-  },
-  actionButtonText: {
-    fontSize: 10,
-    fontWeight: "700",
-    fontFamily: _sharedUi.monoFont,
-    letterSpacing: 0.3
-  },
-  dataViewerContainer: {
-    marginTop: -12,
-    marginHorizontal: -12,
-    marginBottom: -12
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.JotaiAtomDetailContent=JotaiAtomDetailContent;exports.JotaiAtomDetailFooter=JotaiAtomDetailFooter;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _dataViewer=require("@buoy-gg/shared-ui/dataViewer");var _license=require("@buoy-gg/license");var _jotaiStateStore=require("../utils/jotaiStateStore");var _testIDs=require("../utils/testIDs");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,o){if("function"==typeof WeakMap)var n=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(t,l){if(!l&&t&&t.__esModule)return t;var i,c,a={__proto__:null,default:t};if(null===t||"object"!=typeof t&&"function"!=typeof t)return a;if(i=l?r:n){if(i.has(t))return i.get(t);i.set(t,a)}for(const d in t)"default"!==d&&{}.hasOwnProperty.call(t,d)&&((c=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(t,d))&&(c.get||c.set)?i(a,d,c):a[d]=t[d]);return a})(e,o)}const VIEW_CONFIGS=[{key:"change",label:"CHANGE",icon:_sharedUi.FileText},{key:"value",label:"VALUE",icon:_sharedUi.Database},{key:"diff",label:"DIFF",icon:_sharedUi.GitBranch}];const DIFF_DISABLED=["diff"];function getCategoryInfo(e){switch(e){case"initial":return{label:"INITIAL",color:_sharedUi.night.color.textTertiary,bgColor:_sharedUi.night.color.textTertiary+"26"};default:return{label:"WRITE",color:_sharedUi.buoyColors.success,bgColor:_sharedUi.buoyColors.success+"26"}}}function formatTime(e){const o=new Date(e);const n=o.getHours().toString().padStart(2,"0");const r=o.getMinutes().toString().padStart(2,"0");const t=o.getSeconds().toString().padStart(2,"0");const l=o.getMilliseconds().toString().padStart(3,"0");return`${n}:${r}:${t}.${l}`}function formatTimestamp(e){return new Date(e).toLocaleTimeString("en-US",{hour12:false,hour:"2-digit",minute:"2-digit",second:"2-digit"})}function getValueType(e){if(e===null)return"null";if(e===void 0)return"undefined";if(Array.isArray(e))return"array";return typeof e}function getChangeLabel(e){return e==="initial"?"INIT":"WRITE"}const DIFF_MODE_TABS=[{key:"tree",label:"TREE VIEW"},{key:"split",label:"SPLIT VIEW"}];const JotaiAtomInfoView=(0,_react.memo)(function e({change:o}){const n=(0,_license.useIsPro)();const[r,t]=(0,_react.useState)(false);const l=getCategoryInfo(o.category);const i=_jotaiStateStore.jotaiStateStore.getAtomColor(o.atomLabel);const c=(0,_react.useCallback)(async()=>{if(!n){t(true);return}await(0,_sharedUi.copyToClipboard)(o.nextValue)},[o.nextValue,n]);return(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{style:infoStyles.container,contentContainerStyle:infoStyles.content,showsVerticalScrollIndicator:false,testID:`${_testIDs.JOTAI_TEST_ID}-detail-scroll`,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:infoStyles.card,testID:`${_testIDs.JOTAI_TEST_ID}-info-card`,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:infoStyles.sectionHeader,children:(0,_jsxRuntime.jsxs)(_reactNative.View,{style:infoStyles.sectionHeaderLeft,children:[(0,_jsxRuntime.jsx)(_sharedUi.Info,{size:14,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:infoStyles.sectionTitle,children:"CHANGE INFO"})]})}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:infoStyles.cardContent,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:infoStyles.infoRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:infoStyles.infoLabel,children:"Atom"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[infoStyles.infoValue,infoStyles.infoValueMono,{color:i}],numberOfLines:1,ellipsizeMode:"middle",testID:`${_testIDs.JOTAI_TEST_ID}-info-atom`,children:o.atomLabel})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:infoStyles.infoRow,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:infoStyles.infoLabel,children:"Time"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[infoStyles.infoValue,infoStyles.infoValueMono],testID:`${_testIDs.JOTAI_TEST_ID}-info-time`,children:formatTime(o.timestamp)})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:infoStyles.badgeRow,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[infoStyles.categoryBadge,{backgroundColor:l.bgColor}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[infoStyles.categoryText,{color:l.color}],testID:`${_testIDs.JOTAI_TEST_ID}-info-category`,children:l.label})}),o.hasValueChange?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:infoStyles.changesBadge,children:[(0,_jsxRuntime.jsx)(_sharedUi.Zap,{size:10,color:_sharedUi.buoyColors.success}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:infoStyles.changesText,testID:`${_testIDs.JOTAI_TEST_ID}-info-changes`,children:o.diffSummary||"changed"})]}):(0,_jsxRuntime.jsx)(_reactNative.View,{style:infoStyles.noChangesBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:infoStyles.noChangesText,testID:`${_testIDs.JOTAI_TEST_ID}-info-no-changes`,children:"no change"})})]})]})]}),o.changedKeys.length>0&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:infoStyles.card,testID:`${_testIDs.JOTAI_TEST_ID}-keys-card`,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:infoStyles.sectionHeader,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:infoStyles.sectionHeaderLeft,children:[(0,_jsxRuntime.jsx)(_sharedUi.Zap,{size:14,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:infoStyles.sectionTitle,children:"CHANGED KEYS"})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:infoStyles.countBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:infoStyles.countText,testID:`${_testIDs.JOTAI_TEST_ID}-keys-count`,children:o.changedKeys.length})})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:infoStyles.cardContent,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:infoStyles.keysContainer,children:o.changedKeys.map(a=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:infoStyles.keyBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:infoStyles.keyText,testID:`${_testIDs.JOTAI_TEST_ID}-key-${(0,_testIDs.slugForTestID)(a)}`,children:a})},a))})})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:infoStyles.actionsRow,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[infoStyles.actionButton,infoStyles.actionButtonCopy],onTouchEnd:c,testID:`${_testIDs.JOTAI_TEST_ID}-copy-value`,accessibilityRole:"button",accessibilityLabel:"Copy value",children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[infoStyles.actionButtonText,{color:_sharedUi.night.color.accent}],children:"COPY VALUE"})})}),(0,_jsxRuntime.jsx)(_sharedUi.ProUpgradeModal,{visible:r,onClose:()=>t(false),featureName:"Copy"})]})});function JotaiAtomDetailContent({change:e,changes:o,selectedIndex:n,onIndexChange:r,disableInternalFooter:t=false,initialView:l="change"}){const[i,c]=(0,_react.useState)(l);const[a,d]=(0,_react.useState)("tree");const u=o.length;const g=_jotaiStateStore.jotaiStateStore.getAtomColor(e.atomLabel);const f=getChangeLabel(e.category);const T=getValueType((0,_sharedUi.parseValue)(e.nextValue));const h=u-n;const x=n<u-1?n+1:null;const s=x!==null?o[x]:null;const m=h-1;const w=(0,_react.useMemo)(()=>({index:x??0,label:m>0?`#${m}`:"Initial",timestamp:s?formatTimestamp(s.timestamp):"",relativeTime:s?(0,_sharedUi.formatRelativeTime)(new Date(s.timestamp)):"value",badge:s?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.changeBadgeSmall,{backgroundColor:`${_jotaiStateStore.jotaiStateStore.getAtomColor(s.atomLabel)}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.changeTextSmall,{color:_jotaiStateStore.jotaiStateStore.getAtomColor(s.atomLabel)}],children:getChangeLabel(s.category)})}):void 0}),[x,s,m]);const V=(0,_react.useMemo)(()=>({index:n,label:`#${h}`,timestamp:formatTimestamp(e.timestamp),relativeTime:(0,_sharedUi.formatRelativeTime)(new Date(e.timestamp)),badge:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.changeBadgeSmall,{backgroundColor:`${g}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.changeTextSmall,{color:g}],children:f})})}),[n,e.timestamp,g,f,h]);const S=(0,_react.useCallback)(()=>{const y=(0,_sharedUi.parseValue)(e.nextValue);return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.contentCard,testID:`${_testIDs.JOTAI_TEST_ID}-value-card`,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.valueHeader,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.valueLabel,children:"VALUE AFTER CHANGE"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.valueHeaderBadges,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.changeBadge,{backgroundColor:`${g}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.changeText,{color:g}],children:f})}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.typeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.typeText,testID:`${_testIDs.JOTAI_TEST_ID}-value-type`,children:T.toUpperCase()})})]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:infoStyles.dataViewerContainer,children:(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:y,showTypeFilter:true,rawMode:true,initialExpanded:true})})]})},[e.nextValue,g,f,T]);const C=(0,_react.useCallback)(()=>{const y=(0,_sharedUi.parseValue)(e.prevValue);const b=(0,_sharedUi.parseValue)(e.nextValue);if(a==="split"){return(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:{flex:1},showsVerticalScrollIndicator:true,children:(0,_jsxRuntime.jsx)(_dataViewer.SplitDiffViewer,{oldValue:y,newValue:b,theme:_dataViewer.diffThemes.devToolsDefault,options:{hideLineNumbers:false,disableWordDiff:false,showDiffOnly:false,compareMethod:"words",contextLines:3},showThemeName:false})})}return(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:y,newValue:b})},[e.prevValue,e.nextValue,a]);const j=(0,_react.useCallback)(()=>{r(Math.min(u-1,n+1))},[n,u,r]);const I=(0,_react.useCallback)(()=>{r(Math.max(0,n-1))},[n,r]);const D=e.prevValue===void 0;const p=!t&&u>1;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[(0,_jsxRuntime.jsx)(_sharedUi.DetailViewToggle,{views:VIEW_CONFIGS,activeView:i,onViewChange:c,disabledKeys:D?DIFF_DISABLED:void 0,testIDPrefix:_testIDs.JOTAI_TEST_ID}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.contentArea,p&&styles.contentAreaFooterPad],children:[i==="change"&&(0,_jsxRuntime.jsx)(JotaiAtomInfoView,{change:e}),i==="value"&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.stateContainer,children:S()}),i==="diff"&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.diffContainer,testID:`${_testIDs.JOTAI_TEST_ID}-diff`,children:[(0,_jsxRuntime.jsx)(_sharedUi.DiffModeTabs,{tabs:DIFF_MODE_TABS,activeTab:a,onTabChange:d,testIDPrefix:`${_testIDs.JOTAI_TEST_ID}-diff-tab`}),(0,_jsxRuntime.jsx)(_sharedUi.CompareBar,{leftEvent:w,rightEvent:V}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.diffContent,testID:`${_testIDs.JOTAI_TEST_ID}-diff-content`,children:C()})]})]}),p&&(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:h-1,totalItems:u,onPrevious:j,onNext:I,itemLabel:"Change",subtitle:(0,_sharedUi.formatRelativeTime)(new Date(e.timestamp)),absolute:true})]})}function JotaiAtomDetailFooter({change:e,changes:o,selectedIndex:n,onIndexChange:r}){const t=o.length;if(t<=1)return null;const l=t-n;return(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:l-1,totalItems:t,onPrevious:()=>r(Math.min(t-1,n+1)),onNext:()=>r(Math.max(0,n-1)),itemLabel:"Change",subtitle:(0,_sharedUi.formatRelativeTime)(new Date(e.timestamp))})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:"transparent"},contentArea:{flex:1},contentAreaFooterPad:{paddingBottom:96},stateContainer:{flex:1,padding:14},contentCard:{backgroundColor:_sharedUi.night.color.surface,borderRadius:14,padding:14,borderWidth:1,borderColor:_sharedUi.night.color.border},valueHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:8},valueLabel:{fontSize:10,color:_sharedUi.night.color.textSecondary,fontFamily:_sharedUi.monoFont,letterSpacing:.5,fontWeight:"600"},valueHeaderBadges:{flexDirection:"row",alignItems:"center",gap:6},changeBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:4},changeText:{fontSize:9,fontWeight:"700",fontFamily:_sharedUi.monoFont,letterSpacing:.3},typeBadge:{paddingHorizontal:8,paddingVertical:2,borderRadius:4,backgroundColor:_sharedUi.night.color.surfaceElevated},typeText:{fontSize:9,fontWeight:"600",color:_sharedUi.night.color.textTertiary,fontFamily:_sharedUi.monoFont},valueBox:{backgroundColor:_sharedUi.night.color.bg,borderRadius:6,borderWidth:1,borderColor:_sharedUi.night.color.border,padding:8},valueText:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,lineHeight:18},diffContainer:{flex:1},diffContent:{flex:1,paddingHorizontal:14},changeBadgeSmall:{paddingHorizontal:6,paddingVertical:1,borderRadius:3},changeTextSmall:{fontSize:8,fontWeight:"700",fontFamily:_sharedUi.monoFont}});const infoStyles=_reactNative.StyleSheet.create({container:{flex:1},content:{padding:8,paddingBottom:100,gap:16},card:{backgroundColor:_sharedUi.night.color.surface,borderRadius:6,borderWidth:1,borderColor:_sharedUi.night.color.accentBorderStrong,overflow:"hidden",shadowColor:_sharedUi.night.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:6},sectionHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:_sharedUi.night.color.accentBorder,backgroundColor:_sharedUi.night.color.accentSoft},sectionHeaderLeft:{flexDirection:"row",alignItems:"center",gap:6},sectionTitle:{fontSize:12,fontWeight:"600",letterSpacing:.5,color:_sharedUi.night.color.accent,fontFamily:_sharedUi.monoFont},cardContent:{padding:14,gap:10},infoRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},infoLabel:{fontSize:11,color:_sharedUi.night.color.textTertiary,fontWeight:"500"},infoValue:{fontSize:11,color:_sharedUi.night.color.text,fontWeight:"500",flex:1,textAlign:"right",marginLeft:12},infoValueMono:{fontFamily:_sharedUi.monoFont},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:_sharedUi.buoyColors.success+"26"},changesText:{fontSize:9,fontWeight:"600",color:_sharedUi.buoyColors.success},noChangesBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.night.color.surfaceElevated},noChangesText:{fontSize:9,fontWeight:"600",color:_sharedUi.night.color.textTertiary},keysContainer:{flexDirection:"row",flexWrap:"wrap",gap:6},keyBadge:{paddingHorizontal:8,paddingVertical:4,borderRadius:4,backgroundColor:_sharedUi.night.color.accentSoft,borderWidth:1,borderColor:_sharedUi.night.color.accentBorder},keyText:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.accent,fontFamily:_sharedUi.monoFont},countBadge:{paddingHorizontal:8,paddingVertical:3,borderRadius:4,backgroundColor:_sharedUi.night.color.accentFill},countText:{fontSize:9,fontWeight:"700",color:_sharedUi.night.color.accent,fontFamily:_sharedUi.monoFont},actionsRow:{flexDirection:"row",gap:12},actionButton:{paddingHorizontal:14,paddingVertical:8,borderRadius:8,borderWidth:1},actionButtonCopy:{borderColor:_sharedUi.night.color.accentBorder,backgroundColor:_sharedUi.night.color.accentSoft},actionButtonText:{fontSize:10,fontWeight:"700",fontFamily:_sharedUi.monoFont,letterSpacing:.3},dataViewerContainer:{marginTop:-12,marginHorizontal:-12,marginBottom:-12}});