@buoy-gg/jotai 7.0.38 → 7.0.40

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

@@ -1 +1,715 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.JotaiAtomDetailContent=JotaiAtomDetailContent,exports.JotaiAtomDetailFooter=JotaiAtomDetailFooter;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_dataViewer=require("@buoy-gg/shared-ui/dataViewer"),_license=require("@buoy-gg/license"),_jotaiStateStore=require("../utils/jotaiStateStore"),_testIDs=require("../utils/testIDs"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var i=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var o,n,r={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return r;if(o=t?a:i){if(o.has(e))return o.get(e);o.set(e,r)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(o=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?o(r,t,n):r[t]=e[t]);return r})(e,t)}const VIEW_CONFIGS=[{key:"change",label:"CHANGE",icon:_sharedUi.FileText},{key:"value",label:"VALUE",icon:_sharedUi.Database},{key:"diff",label:"DIFF",icon:_sharedUi.GitBranch}],DIFF_DISABLED=["diff"];function getCategoryInfo(e){return"initial"===e?{label:"INITIAL",color:_sharedUi.night.color.textTertiary,bgColor:_sharedUi.night.color.textTertiary+"26"}:{label:"WRITE",color:_sharedUi.buoyColors.success,bgColor:_sharedUi.buoyColors.success+"26"}}function formatTime(e){const t=new Date(e);return`${t.getHours().toString().padStart(2,"0")}:${t.getMinutes().toString().padStart(2,"0")}:${t.getSeconds().toString().padStart(2,"0")}.${t.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=(0,_react.memo)(function({change:e}){const t=(0,_license.useIsPro)(),[i,a]=(0,_react.useState)(!1),o=getCategoryInfo(e.category),n=_jotaiStateStore.jotaiStateStore.getAtomColor(e.atomLabel),r=(0,_react.useCallback)(async()=>{t?await(0,_sharedUi.copyToClipboard)(e.nextValue):a(!0)},[e.nextValue,t]);return(0,_jsxRuntime.jsxs)(_reactNative.ScrollView,{style:infoStyles.container,contentContainerStyle:infoStyles.content,showsVerticalScrollIndicator:!1,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:n}],numberOfLines:1,ellipsizeMode:"middle",testID:`${_testIDs.JOTAI_TEST_ID}-info-atom`,children:e.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(e.timestamp)})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:infoStyles.badgeRow,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[infoStyles.categoryBadge,{backgroundColor:o.bgColor}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[infoStyles.categoryText,{color:o.color}],testID:`${_testIDs.JOTAI_TEST_ID}-info-category`,children:o.label})}),e.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:e.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"})})]})]})]}),e.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:e.changedKeys.length})})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:infoStyles.cardContent,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:infoStyles.keysContainer,children:e.changedKeys.map(e=>(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)(e)}`,children:e})},e))})})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:infoStyles.actionsRow,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[infoStyles.actionButton,infoStyles.actionButtonCopy],onTouchEnd:r,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:i,onClose:()=>a(!1),featureName:"Copy"})]})});function JotaiAtomDetailContent({change:e,changes:t,selectedIndex:i,onIndexChange:a,disableInternalFooter:o=!1,initialView:n="change"}){const[r,s]=(0,_react.useState)(n),[l,c]=(0,_react.useState)("tree"),d=t.length,_=_jotaiStateStore.jotaiStateStore.getAtomColor(e.atomLabel),u=getChangeLabel(e.category),h=getValueType((0,_sharedUi.parseValue)(e.nextValue)),g=d-i,x=i<d-1?i+1:null,f=null!==x?t[x]:null,m=g-1,y=(0,_react.useMemo)(()=>({index:x??0,label:m>0?`#${m}`:"Initial",timestamp:f?formatTimestamp(f.timestamp):"",relativeTime:f?(0,_sharedUi.formatRelativeTime)(new Date(f.timestamp)):"value",badge:f?(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.changeBadgeSmall,{backgroundColor:`${_jotaiStateStore.jotaiStateStore.getAtomColor(f.atomLabel)}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.changeTextSmall,{color:_jotaiStateStore.jotaiStateStore.getAtomColor(f.atomLabel)}],children:getChangeLabel(f.category)})}):void 0}),[x,f,m]),j=(0,_react.useMemo)(()=>({index:i,label:`#${g}`,timestamp:formatTimestamp(e.timestamp),relativeTime:(0,_sharedUi.formatRelativeTime)(new Date(e.timestamp)),badge:(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.changeBadgeSmall,{backgroundColor:`${_}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.changeTextSmall,{color:_}],children:u})})}),[i,e.timestamp,_,u,g]),S=(0,_react.useCallback)(()=>{const t=(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:`${_}20`}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.changeText,{color:_}],children:u})}),(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:h.toUpperCase()})})]})]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:infoStyles.dataViewerContainer,children:(0,_jsxRuntime.jsx)(_dataViewer.DataViewer,{title:"",data:t,showTypeFilter:!0,rawMode:!0,initialExpanded:!0})})]})},[e.nextValue,_,u,h]),T=(0,_react.useCallback)(()=>{const t=(0,_sharedUi.parseValue)(e.prevValue),i=(0,_sharedUi.parseValue)(e.nextValue);return"split"===l?(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{style:{flex:1},showsVerticalScrollIndicator:!0,children:(0,_jsxRuntime.jsx)(_dataViewer.SplitDiffViewer,{oldValue:t,newValue:i,theme:_dataViewer.diffThemes.devToolsDefault,options:{hideLineNumbers:!1,disableWordDiff:!1,showDiffOnly:!1,compareMethod:"words",contextLines:3},showThemeName:!1})}):(0,_jsxRuntime.jsx)(_dataViewer.TreeDiffViewer,{oldValue:t,newValue:i})},[e.prevValue,e.nextValue,l]),p=(0,_react.useCallback)(()=>{a(Math.min(d-1,i+1))},[i,d,a]),I=(0,_react.useCallback)(()=>{a(Math.max(0,i-1))},[i,a]),b=void 0===e.prevValue,v=!o&&d>1;return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[(0,_jsxRuntime.jsx)(_sharedUi.DetailViewToggle,{views:VIEW_CONFIGS,activeView:r,onViewChange:s,disabledKeys:b?DIFF_DISABLED:void 0,testIDPrefix:_testIDs.JOTAI_TEST_ID}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:[styles.contentArea,v&&styles.contentAreaFooterPad],children:["change"===r&&(0,_jsxRuntime.jsx)(JotaiAtomInfoView,{change:e}),"value"===r&&(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.stateContainer,children:S()}),"diff"===r&&(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:l,onTabChange:c,testIDPrefix:`${_testIDs.JOTAI_TEST_ID}-diff-tab`}),(0,_jsxRuntime.jsx)(_sharedUi.CompareBar,{leftEvent:y,rightEvent:j}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.diffContent,testID:`${_testIDs.JOTAI_TEST_ID}-diff-content`,children:T()})]})]}),v&&(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:g-1,totalItems:d,onPrevious:p,onNext:I,itemLabel:"Change",subtitle:(0,_sharedUi.formatRelativeTime)(new Date(e.timestamp)),absolute:!0})]})}function JotaiAtomDetailFooter({change:e,changes:t,selectedIndex:i,onIndexChange:a}){const o=t.length;if(o<=1)return null;const n=o-i;return(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:n-1,totalItems:o,onPrevious:()=>a(Math.min(o-1,i+1)),onNext:()=>a(Math.max(0,i-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}}),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}});
+"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
+  }
+});