@buoy-gg/redux 7.0.38 → 7.0.39

package/lib/commonjs/redux/components/ReduxModal.js

@@ -1 +1,703 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FREE_TIER_ACTION_LIMIT=void 0,exports.ReduxModal=ReduxModal,exports.ReduxToolView=ReduxToolView;var _react=require("react"),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_license=require("@buoy-gg/license"),_useReduxActions=require("../hooks/useReduxActions"),_reduxActionStore=require("../utils/reduxActionStore"),_useAutoInstrumentRedux=require("../hooks/useAutoInstrumentRedux"),_ReduxActionItem=require("./ReduxActionItem"),_ReduxActionDetailContent=require("./ReduxActionDetailContent"),_testIDs=require("../utils/testIDs"),_jsxRuntime=require("react/jsx-runtime");const FREE_TIER_ACTION_LIMIT=exports.FREE_TIER_ACTION_LIMIT=_sharedUi.TIER_LIMITS["redux.actions"].free;function EmptyState({isEnabled:e,query:t,totalActions:i}){const s=(0,_sharedUi.resolveListEmptyState)({subject:"actions",search:t,total:i,capturing:e,waiting:{otto:"waiting",title:"No Redux actions",message:"Actions will appear here as they are dispatched"},paused:{title:"No Redux actions",message:"Enable capture to start recording actions"}});return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{...s,testID:`${_testIDs.REDUX_TEST_ID}-empty`})}function ReduxModal({visible:e,onClose:t,onBack:i,onMinimize:s,enableSharedModalDimensions:r=!1,inline:a=!1,onActionSelect:o,initialSelectedActionId:n,initialDetailView:l}){const c=(0,_license.useIsPro)(),d=(0,_sharedUi.useLimit)("redux.actions"),[u,h]=(0,_react.useState)(!1),{isInstrumented:_,isLoading:x,error:g,isReactReduxAvailable:y,captureMechanism:R}=(0,_useAutoInstrumentRedux.useAutoInstrumentRedux)(),{filteredActions:m,filter:p,setFilter:b,stats:j,clearActions:I,isEnabled:T,toggleCapture:D}=(0,_useReduxActions.useReduxActions)(),C=(0,_react.useMemo)(()=>m.slice(0,d),[m,d]),S=(0,_react.useMemo)(()=>Math.max(0,m.length-d),[m.length,d]),U=S>0,[E,A]=(0,_react.useState)(null),f=(0,_react.useMemo)(()=>{if(null===E)return null;const e=C.findIndex(e=>e.id===E);return e>=0?e:null},[E,C]),v=null!==f?C[f]:null,w=(0,_react.useRef)(null);(0,_react.useEffect)(()=>{if(!o)return;const e=v?.id??null;null!==e&&e!==w.current&&(w.current=e,o(v))},[v,o]);const k=(0,_react.useRef)(null);(0,_react.useEffect)(()=>{n&&k.current!==n&&(C.findIndex(e=>e.id===n)<0||(k.current=n,A(n)))},[n,C]);const[N,B]=(0,_react.useState)(""),[M,$]=(0,_react.useState)(!1),z=((0,_react.useRef)(null),(0,_react.useRef)(null)),L=(0,_react.useCallback)(e=>{},[]),V=e=>{B(e),b(t=>({...t,searchText:e}))},P=(0,_react.useCallback)(()=>{B(""),b(e=>({...e,searchText:""})),$(!1)},[b]),X=(0,_react.useCallback)(e=>{A(e.id)},[]),O=(0,_react.useCallback)(()=>{h(!0)},[]),W=(0,_react.useCallback)(()=>{A(null)},[]),H=(0,_react.useCallback)(e=>{const t=C[e];t&&A(t.id)},[C]),q=async()=>{if(!c)return void h(!0);const e=m.map(e=>({id:e.id,type:e.type,...void 0!==e.payload&&{payload:e.payload},timestamp:e.timestamp,prevState:e.prevState,nextState:e.nextState,hasStateChange:e.hasStateChange}));await(0,_sharedUi.copyToClipboard)(e)},F=(0,_react.useCallback)(e=>e.id,[]),K=(0,_react.useMemo)(()=>(0,_testIDs.buildActionRowTestIDs)(C),[C]),G=(0,_react.useMemo)(()=>{const e=new Map;for(const t of _reduxActionStore.reduxActionStore.getActions()){const i=t.meta?.requestId;i&&e.set(i,(e.get(i)??0)+1)}return e},[m]),J=(0,_react.useCallback)(({item:e})=>{const t=e.meta?.requestId;return(0,_jsxRuntime.jsx)(_ReduxActionItem.ReduxActionItem,{action:e,onPress:X,linkedCount:t?G.get(t)??0:0,testID:K.get(e.id)})},[X,K,G]),Q=()=>v?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:W}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:v.type,centered:!0,testID:`${_testIDs.REDUX_TEST_ID}-detail-title`})]}):(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[i&&(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:i}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",children:M?(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Search,{value:N,onChangeText:V,onCancel:P,placeholder:"Search action types...",accessibilityLabel:"Search action types",iconSize:14,testID:`${_testIDs.REDUX_TEST_ID}-search-field`,containerTestID:`${_testIDs.REDUX_TEST_ID}-search`,clearTestID:`${_testIDs.REDUX_TEST_ID}-search-clear`,onBlur:()=>{0===N.length&&$(!1)}}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerChipRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.headerChip,!p.onlyWithChanges&&styles.headerChipActive],onPress:()=>b(e=>({...e,onlyWithChanges:!1})),testID:`${_testIDs.REDUX_TEST_ID}-chip-all`,accessibilityRole:"button",accessibilityLabel:`Show all actions, ${j.totalActions} captured`,accessibilityState:{selected:!p.onlyWithChanges},children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.headerChipLabel,children:"ALL"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.headerChipValue,{color:_sharedUi.night.color.text}],testID:`${_testIDs.REDUX_TEST_ID}-chip-all-value`,children:j.totalActions})]}),(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.headerChip,p.onlyWithChanges&&styles.headerChipActive],onPress:()=>b(e=>({...e,onlyWithChanges:!0})),testID:`${_testIDs.REDUX_TEST_ID}-chip-changed`,accessibilityRole:"button",accessibilityLabel:`Show only actions that changed state, ${j.actionsWithChanges} of them`,accessibilityState:{selected:!!p.onlyWithChanges},children:[(0,_jsxRuntime.jsx)(_sharedUi.Zap,{size:12,color:_sharedUi.macOSColors.semantic.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.headerChipValue,{color:_sharedUi.macOSColors.semantic.warning}],testID:`${_testIDs.REDUX_TEST_ID}-chip-changed-value`,children:j.actionsWithChanges})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerChip,testID:`${_testIDs.REDUX_TEST_ID}-chip-types`,accessibilityLabel:`${j.uniqueActionTypes} distinct action types`,children:[(0,_jsxRuntime.jsx)(_sharedUi.CheckCircle,{size:12,color:_sharedUi.macOSColors.semantic.success}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.headerChipValue,{color:_sharedUi.macOSColors.semantic.success}],testID:`${_testIDs.REDUX_TEST_ID}-chip-types-value`,children:j.uniqueActionTypes})]})]})}),(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions,{children:[!M&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>$(!0),style:[styles.headerActionButton,N.length>0&&styles.headerActionButtonActive],testID:`${_testIDs.REDUX_TEST_ID}-search-open`,accessibilityRole:"button",accessibilityLabel:"Search action types",children:(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:N.length>0?_sharedUi.night.color.accent:_sharedUi.night.color.textSecondary})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:q,style:[styles.headerActionButton,0===m.length&&styles.headerActionButtonDisabled],disabled:0===m.length,testID:`${_testIDs.REDUX_TEST_ID}-copy`,accessibilityRole:"button",accessibilityLabel:"Copy all actions",accessibilityState:{disabled:0===m.length},children:(0,_jsxRuntime.jsx)(_sharedUi.Copy,{size:14,color:m.length>0?_sharedUi.night.color.textSecondary:_sharedUi.night.color.textTertiary})}),(0,_jsxRuntime.jsx)(_sharedUi.PowerToggleButton,{isEnabled:T,onToggle:D,accessibilityLabel:"Toggle Redux action capture",testID:`${_testIDs.REDUX_TEST_ID}-power`}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:I,style:[styles.headerActionButton,0===m.length&&styles.headerActionButtonDisabled],disabled:0===m.length,testID:`${_testIDs.REDUX_TEST_ID}-clear`,accessibilityRole:"button",accessibilityLabel:"Clear actions",accessibilityState:{disabled:0===m.length},children:(0,_jsxRuntime.jsx)(_sharedUi.Trash2,{size:14,color:(m.length,_sharedUi.night.color.textTertiary)})})]})]}),Z=r?_sharedUi.devToolsStorageKeys.modal.root():"buoy-redux-modal";if(!e)return null;const Y=v&&null!==f?(0,_jsxRuntime.jsx)(_ReduxActionDetailContent.ReduxActionDetailFooter,{action:v,actions:C,selectedIndex:f,onIndexChange:H}):null,ee=v&&C.length>1?68:0,te=null==v,ie=(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:v&&null!==f?(0,_jsxRuntime.jsx)(_ReduxActionDetailContent.ReduxActionDetailContent,{action:v,actions:C,selectedIndex:f,onIndexChange:H,disableInternalFooter:!0,initialView:l}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[g&&!_&&!_reduxActionStore.reduxActionStore.isCaptureSuppressed()&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.errorBanner,testID:`${_testIDs.REDUX_TEST_ID}-banner-error`,children:[(0,_jsxRuntime.jsx)(_sharedUi.AlertTriangle,{size:14,color:_sharedUi.night.color.danger}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.errorText,children:y?"Not inside a Redux Provider. Wrap your app with <Provider store={store}>.":"react-redux not installed. Run: npm install react-redux"})]}),!T&&_&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.disabledBanner,testID:`${_testIDs.REDUX_TEST_ID}-banner-disabled`,children:[(0,_jsxRuntime.jsx)(_sharedUi.Power,{size:14,color:_sharedUi.night.color.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.disabledText,children:"Action capture is disabled"})]}),"patch"===R&&!_reduxActionStore.reduxActionStore.isCaptureSuppressed()&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.disabledBanner,testID:`${_testIDs.REDUX_TEST_ID}-banner-patch`,children:[(0,_jsxRuntime.jsx)(_sharedUi.AlertTriangle,{size:14,color:_sharedUi.night.color.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.disabledText,children:"Top-level capture only — thunk/RTK Query internals aren't visible. Put import '@buoy-gg/redux' first in your app entry (or add buoyReduxMiddleware) for full capture."})]}),U&&(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.lockedBanner,onPress:O,activeOpacity:.8,testID:`${_testIDs.REDUX_TEST_ID}-locked`,accessibilityRole:"button",accessibilityLabel:`${S} older ${1===S?"action":"actions"} locked. Upgrade to see them.`,children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.night.color.accent}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.lockedText,testID:`${_testIDs.REDUX_TEST_ID}-locked-text`,children:[S," older ",1===S?"action":"actions"," locked"]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.upgradeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.upgradeBadgeText,children:"UPGRADE"})})]}),C.length>0?(0,_jsxRuntime.jsx)(_reactNative.FlatList,{ref:z,testID:`${_testIDs.REDUX_TEST_ID}-list`,data:C,renderItem:J,keyExtractor:F,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,..._sharedUi.EVENT_LIST_PRESET}):(0,_jsxRuntime.jsx)(EmptyState,{isEnabled:T,query:N,totalActions:j.totalActions})]})}),se=(0,_jsxRuntime.jsx)(_sharedUi.ProUpgradeModal,{visible:u,onClose:()=>h(!1),featureName:"Full Action History"});return a?(0,_jsxRuntime.jsxs)(_sharedUi.TickProvider,{children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.inlineRoot,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.inlineHeader,..._sharedUi.windowDragProps,children:Q()}),ie,Y]}),se]}):(0,_jsxRuntime.jsxs)(_sharedUi.TickProvider,{children:[(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:e,onClose:t,onMinimize:s,persistenceKey:Z,header:{showToggleButton:!0,customContent:Q()},onModeChange:L,enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,disableScrollWrapper:te,styles:{},footer:Y,footerHeight:ee,children:ie}),se]})}function ReduxToolView(e={}){return(0,_jsxRuntime.jsx)(ReduxModal,{...e,inline:!0,visible:!0,onClose:()=>{}})}const styles=_reactNative.StyleSheet.create({inlineRoot:{flex:1,minHeight:0,backgroundColor:"transparent"},inlineHeader:{paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:_sharedUi.macOSColors.border.default,backgroundColor:"transparent"},container:{flex:1,backgroundColor:"transparent"},headerChipRow:{flexDirection:"row",alignItems:"center",gap:8},headerChip:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:_sharedUi.night.color.surfaceElevated,paddingHorizontal:10,paddingVertical:5,borderRadius:12,borderWidth:1,borderColor:_sharedUi.night.color.border},headerChipActive:{backgroundColor:_sharedUi.night.color.accentSoft,borderColor:_sharedUi.night.color.accentBorderStrong},headerChipLabel:{fontSize:10,fontWeight:"700",color:_sharedUi.night.color.textTertiary},headerChipValue:{fontSize:12,fontWeight:"600",fontFamily:_sharedUi.monoFont},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:_sharedUi.night.color.surfaceElevated,borderWidth:1,borderColor:_sharedUi.night.color.border,alignItems:"center",justifyContent:"center"},headerActionButtonDisabled:{opacity:.55},headerActionButtonActive:{backgroundColor:_sharedUi.night.color.accentSoft,borderColor:_sharedUi.night.color.accentBorderStrong},startButton:{backgroundColor:_sharedUi.macOSColors.semantic.successBackground,borderColor:_sharedUi.macOSColors.semantic.success+"40"},stopButton:{backgroundColor:_sharedUi.macOSColors.semantic.errorBackground,borderColor:_sharedUi.macOSColors.semantic.error+"40"},errorBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.night.color.dangerSoft,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.danger+"20"},errorText:{color:_sharedUi.night.color.danger,fontSize:11,flex:1},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.night.color.warningSoft,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.warning+"20"},disabledText:{color:_sharedUi.night.color.warning,fontSize:11,flex:1},listContent:{paddingTop:8,paddingBottom:20},lockedBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.night.color.accentSoft,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.accentBorder},lockedText:{color:_sharedUi.night.color.accent,fontSize:11,fontWeight:"500",flex:1},upgradeBadge:{backgroundColor:_sharedUi.night.color.accent,paddingHorizontal:8,paddingVertical:3,borderRadius:4},upgradeBadgeText:{color:_sharedUi.night.color.onAccent,fontSize:9,fontWeight:"700",letterSpacing:.5}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FREE_TIER_ACTION_LIMIT = void 0;
+exports.ReduxModal = ReduxModal;
+exports.ReduxToolView = ReduxToolView;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _license = require("@buoy-gg/license");
+var _useReduxActions = require("../hooks/useReduxActions");
+var _reduxActionStore = require("../utils/reduxActionStore");
+var _useAutoInstrumentRedux = require("../hooks/useAutoInstrumentRedux");
+var _ReduxActionItem = require("./ReduxActionItem");
+var _ReduxActionDetailContent = require("./ReduxActionDetailContent");
+var _testIDs = require("../utils/testIDs");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Main Redux DevTools modal
+ *
+ * This component auto-instruments the Redux store when it mounts,
+ * providing zero-config action capture for the DevTools.
+ */
+
+/**
+ * @deprecated Read the live limit with `useLimit("redux.actions")` — this
+ * constant only ever reports the FREE tier's value and is blind to the
+ * anonymous tier. Kept because it is part of the package's public exports.
+ */
+const FREE_TIER_ACTION_LIMIT = exports.FREE_TIER_ACTION_LIMIT = _sharedUi.TIER_LIMITS["redux.actions"].free;
+/**
+ * Why this takes the query as well as the enabled flag: "nothing was captured"
+ * and "nothing matched what you typed" are different problems, and an empty
+ * list under a live search reads as a dead tool. Naming the query back is what
+ * makes the difference legible without clearing the field to find out.
+ */
+function EmptyState({
+  isEnabled,
+  query,
+  totalActions
+}) {
+  const content = (0, _sharedUi.resolveListEmptyState)({
+    subject: "actions",
+    search: query,
+    total: totalActions,
+    capturing: isEnabled,
+    waiting: {
+      otto: "waiting",
+      title: "No Redux actions",
+      message: "Actions will appear here as they are dispatched"
+    },
+    paused: {
+      title: "No Redux actions",
+      message: "Enable capture to start recording actions"
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+    ...content,
+    testID: `${_testIDs.REDUX_TEST_ID}-empty`
+  });
+}
+function ReduxModal({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false,
+  inline = false,
+  onActionSelect,
+  initialSelectedActionId,
+  initialDetailView
+}) {
+  const isPro = (0, _license.useIsPro)();
+  const actionLimit = (0, _sharedUi.useLimit)("redux.actions");
+  const [showProModal, setShowProModal] = (0, _react.useState)(false);
+
+  // Auto-instrument the Redux store (zero-config)
+  const {
+    isInstrumented,
+    isLoading: isInstrumentLoading,
+    error: instrumentError,
+    isReactReduxAvailable,
+    captureMechanism
+  } = (0, _useAutoInstrumentRedux.useAutoInstrumentRedux)();
+  const {
+    filteredActions,
+    filter,
+    setFilter,
+    stats,
+    clearActions,
+    isEnabled,
+    toggleCapture
+  } = (0, _useReduxActions.useReduxActions)();
+
+  // Pro is Infinity here, so slice() returns everything and the locked count
+  // floors at 0 — no tier branching needed at the call site.
+  const visibleActions = (0, _react.useMemo)(() => filteredActions.slice(0, actionLimit), [filteredActions, actionLimit]);
+  const lockedActionCount = (0, _react.useMemo)(() => Math.max(0, filteredActions.length - actionLimit), [filteredActions.length, actionLimit]);
+  const hasLockedActions = lockedActionCount > 0;
+
+  // Selection state, held as an action ID rather than as a list position.
+  //
+  // This list grows at the HEAD: every dispatch prepends a row and pushes
+  // everything below it down one. An index therefore names a different action
+  // a moment after it is taken — so a detail page opened while the app was
+  // still dispatching silently became a detail page for some OTHER action,
+  // with no transition and nothing to say it had happened. A devtool that
+  // quietly swaps what it is showing you is worse than one that shows nothing.
+  //
+  // The index is still what the stepper and the diff's "previous action" are
+  // expressed in — both are genuinely about position — so it is derived here
+  // and re-derived whenever the list moves.
+  const [selectedActionId, setSelectedActionId] = (0, _react.useState)(null);
+  const selectedActionIndex = (0, _react.useMemo)(() => {
+    if (selectedActionId === null) return null;
+    const index = visibleActions.findIndex(a => a.id === selectedActionId);
+    // Below zero means the action is gone — cleared, or aged out past the tier
+    // cap. Falling back to the list is the honest outcome; the alternative is
+    // showing whatever moved into its place.
+    return index >= 0 ? index : null;
+  }, [selectedActionId, visibleActions]);
+  const selectedAction = selectedActionIndex !== null ? visibleActions[selectedActionIndex] : null;
+
+  // Notify the host on selection (keyed by action id so re-renders with the
+  // same selection don't re-fire; remote mirrors fetch state trees here).
+  const lastNotifiedSelectionRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!onActionSelect) return;
+    const id = selectedAction?.id ?? null;
+    if (id === null || id === lastNotifiedSelectionRef.current) return;
+    lastNotifiedSelectionRef.current = id;
+    onActionSelect(selectedAction);
+  }, [selectedAction, onActionSelect]);
+
+  // Deep link into an action's detail (see initialSelectedActionId). Applied
+  // at most once per id, so the list re-rendering — or the user pressing Back
+  // — never re-opens it.
+  const appliedInitialSelectionRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (!initialSelectedActionId) return;
+    if (appliedInitialSelectionRef.current === initialSelectedActionId) return;
+    const index = visibleActions.findIndex(a => a.id === initialSelectedActionId);
+    if (index < 0) return;
+    appliedInitialSelectionRef.current = initialSelectedActionId;
+    setSelectedActionId(initialSelectedActionId);
+  }, [initialSelectedActionId, visibleActions]);
+  const [searchText, setSearchText] = (0, _react.useState)("");
+  const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
+  const searchInputRef = (0, _react.useRef)(null);
+  const flatListRef = (0, _react.useRef)(null);
+  const handleModeChange = (0, _react.useCallback)(_mode => {
+    // Mode changes handled by JsModal
+  }, []);
+  const handleSearch = text => {
+    setSearchText(text);
+    setFilter(prev => ({
+      ...prev,
+      searchText: text
+    }));
+  };
+
+  /** Drop the query AND put the header back — the ✕ means "stop filtering". */
+  const closeSearch = (0, _react.useCallback)(() => {
+    setSearchText("");
+    setFilter(prev => ({
+      ...prev,
+      searchText: ""
+    }));
+    setIsSearchActive(false);
+  }, [setFilter]);
+  const handleActionPress = (0, _react.useCallback)(action => {
+    setSelectedActionId(action.id);
+  }, []);
+  const handleUpgradePress = (0, _react.useCallback)(() => {
+    setShowProModal(true);
+  }, []);
+  const handleBack = (0, _react.useCallback)(() => {
+    setSelectedActionId(null);
+  }, []);
+
+  // The stepper and the async timeline both navigate by POSITION; the
+  // selection is kept by identity, so the position is resolved to an id here,
+  // once, at the moment of the tap.
+  const handleIndexChange = (0, _react.useCallback)(newIndex => {
+    const next = visibleActions[newIndex];
+    if (next) setSelectedActionId(next.id);
+  }, [visibleActions]);
+  const handleCopyAll = async () => {
+    if (!isPro) {
+      setShowProModal(true);
+      return;
+    }
+    const actionsData = filteredActions.map(action => ({
+      id: action.id,
+      type: action.type,
+      ...(action.payload !== undefined && {
+        payload: action.payload
+      }),
+      timestamp: action.timestamp,
+      prevState: action.prevState,
+      nextState: action.nextState,
+      hasStateChange: action.hasStateChange
+    }));
+    await (0, _sharedUi.copyToClipboard)(actionsData);
+  };
+
+  // FlatList optimization
+  const keyExtractor = (0, _react.useCallback)(item => item.id, []);
+
+  // An action row's handle carries an ordinal among rows of the SAME type, and
+  // an ordinal is a fact about the list rather than about the row — see
+  // ../utils/testIDs.ts for why a type alone cannot address a redux row.
+  const rowTestIDs = (0, _react.useMemo)(() => (0, _testIDs.buildActionRowTestIDs)(visibleActions), [visibleActions]);
+
+  // How many captured actions share each requestId, i.e. how far along each
+  // async operation is.
+  //
+  // Computed HERE rather than in the row, and passed down, because a row's
+  // async badge is a fact about OTHER rows. `pending` is captured and drawn
+  // while it is still alone in the world; `fulfilled` arrives a moment later
+  // and makes the earlier row's badge wrong. `ReduxActionItem` is memoized on
+  // its props and the action object it holds never changes identity, so
+  // nothing about that second arrival reached the first row — the pending half
+  // of every settled thunk permanently showed no flow badge, which is exactly
+  // backwards from what the badge is for.
+  //
+  // One pass over the store instead of a per-row scan: the previous shape was
+  // O(rows x actions) at 200 actions, on a list that re-renders on every
+  // dispatch.
+  const linkedCounts = (0, _react.useMemo)(() => {
+    const counts = new Map();
+    for (const action of _reduxActionStore.reduxActionStore.getActions()) {
+      const requestId = action.meta?.requestId;
+      if (!requestId) continue;
+      counts.set(requestId, (counts.get(requestId) ?? 0) + 1);
+    }
+    return counts;
+    // `filteredActions` takes a new identity whenever the store notifies, which
+    // is the only moment these counts can change.
+  }, [filteredActions]);
+  const renderItem = (0, _react.useCallback)(({
+    item
+  }) => {
+    const requestId = item.meta?.requestId;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxActionItem.ReduxActionItem, {
+      action: item,
+      onPress: handleActionPress,
+      linkedCount: requestId ? linkedCounts.get(requestId) ?? 0 : 0,
+      testID: rowTestIDs.get(item.id)
+    });
+  }, [handleActionPress, rowTestIDs, linkedCounts]);
+  const renderHeaderContent = () => {
+    // Detail view header - show action type
+    if (selectedAction) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: handleBack
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: selectedAction.type,
+          centered: true,
+          testID: `${_testIDs.REDUX_TEST_ID}-detail-title`
+        })]
+      });
+    }
+
+    // Main list view header
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+      children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+        onBack: onBack
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+        title: "",
+        children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Search, {
+          value: searchText,
+          onChangeText: handleSearch,
+          onCancel: closeSearch,
+          placeholder: "Search action types...",
+          accessibilityLabel: "Search action types",
+          iconSize: 14,
+          testID: `${_testIDs.REDUX_TEST_ID}-search-field`,
+          containerTestID: `${_testIDs.REDUX_TEST_ID}-search`,
+          clearTestID: `${_testIDs.REDUX_TEST_ID}-search-clear`
+          // Stay open while the query still filters the list.
+          //
+          // Collapsing it on blur hid the reason rows were missing: the
+          // header went back to its chips — which count the WHOLE
+          // capture, not the filtered list — while the list stayed
+          // narrowed, so the tool showed "4 actions" above a single row
+          // and offered nothing to explain the gap. The only way back
+          // was to reopen a field the user had no reason to think was
+          // still armed.
+          ,
+          onBlur: () => {
+            if (searchText.length === 0) setIsSearchActive(false);
+          }
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.headerChipRow,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: [styles.headerChip, !filter.onlyWithChanges && styles.headerChipActive],
+            onPress: () => setFilter(prev => ({
+              ...prev,
+              onlyWithChanges: false
+            })),
+            testID: `${_testIDs.REDUX_TEST_ID}-chip-all`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Show all actions, ${stats.totalActions} captured`,
+            accessibilityState: {
+              selected: !filter.onlyWithChanges
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.headerChipLabel,
+              children: "ALL"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.headerChipValue, {
+                color: _sharedUi.night.color.text
+              }],
+              testID: `${_testIDs.REDUX_TEST_ID}-chip-all-value`,
+              children: stats.totalActions
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: [styles.headerChip, filter.onlyWithChanges && styles.headerChipActive],
+            onPress: () => setFilter(prev => ({
+              ...prev,
+              onlyWithChanges: true
+            })),
+            testID: `${_testIDs.REDUX_TEST_ID}-chip-changed`,
+            accessibilityRole: "button",
+            accessibilityLabel: `Show only actions that changed state, ${stats.actionsWithChanges} of them`,
+            accessibilityState: {
+              selected: !!filter.onlyWithChanges
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
+              size: 12,
+              color: _sharedUi.macOSColors.semantic.warning
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.headerChipValue, {
+                color: _sharedUi.macOSColors.semantic.warning
+              }],
+              testID: `${_testIDs.REDUX_TEST_ID}-chip-changed-value`,
+              children: stats.actionsWithChanges
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.headerChip,
+            testID: `${_testIDs.REDUX_TEST_ID}-chip-types`,
+            accessibilityLabel: `${stats.uniqueActionTypes} distinct action types`,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckCircle, {
+              size: 12,
+              color: _sharedUi.macOSColors.semantic.success
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.headerChipValue, {
+                color: _sharedUi.macOSColors.semantic.success
+              }],
+              testID: `${_testIDs.REDUX_TEST_ID}-chip-types-value`,
+              children: stats.uniqueActionTypes
+            })]
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
+        children: [!isSearchActive && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: () => setIsSearchActive(true),
+          style: [styles.headerActionButton, searchText.length > 0 && styles.headerActionButtonActive],
+          testID: `${_testIDs.REDUX_TEST_ID}-search-open`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Search action types",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
+            size: 14,
+            color: searchText.length > 0 ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: handleCopyAll,
+          style: [styles.headerActionButton, filteredActions.length === 0 && styles.headerActionButtonDisabled],
+          disabled: filteredActions.length === 0,
+          testID: `${_testIDs.REDUX_TEST_ID}-copy`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Copy all actions",
+          accessibilityState: {
+            disabled: filteredActions.length === 0
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
+            size: 14,
+            color: filteredActions.length > 0 ? _sharedUi.night.color.textSecondary : _sharedUi.night.color.textTertiary
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
+          isEnabled: isEnabled,
+          onToggle: toggleCapture,
+          accessibilityLabel: "Toggle Redux action capture",
+          testID: `${_testIDs.REDUX_TEST_ID}-power`
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: clearActions,
+          style: [styles.headerActionButton, filteredActions.length === 0 && styles.headerActionButtonDisabled],
+          disabled: filteredActions.length === 0,
+          testID: `${_testIDs.REDUX_TEST_ID}-clear`,
+          accessibilityRole: "button",
+          accessibilityLabel: "Clear actions",
+          accessibilityState: {
+            disabled: filteredActions.length === 0
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
+            size: 14,
+            color: filteredActions.length > 0 ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.textTertiary
+          })
+        })]
+      })]
+    });
+  };
+  const persistenceKey = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.modal.root() : "buoy-redux-modal";
+  if (!visible) return null;
+
+  // Footer for detail view navigation
+  const footerNode = selectedAction && selectedActionIndex !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxActionDetailContent.ReduxActionDetailFooter, {
+    action: selectedAction,
+    actions: visibleActions,
+    selectedIndex: selectedActionIndex,
+    onIndexChange: handleIndexChange
+  }) : null;
+  const footerHeight = selectedAction && visibleActions.length > 1 ? 68 : 0;
+
+  // The action list owns its scrolling so FlatList virtualization works
+  // (see ZustandModal — same pattern, same tool-bench evidence).
+  const listOwnsScroll = selectedAction == null;
+  const body = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: selectedAction && selectedActionIndex !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxActionDetailContent.ReduxActionDetailContent, {
+      action: selectedAction,
+      actions: visibleActions,
+      selectedIndex: selectedActionIndex,
+      onIndexChange: handleIndexChange,
+      disableInternalFooter: true,
+      initialView: initialDetailView
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [instrumentError && !isInstrumented && !_reduxActionStore.reduxActionStore.isCaptureSuppressed() && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.errorBanner,
+        testID: `${_testIDs.REDUX_TEST_ID}-banner-error`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
+          size: 14,
+          color: _sharedUi.night.color.danger
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.errorText,
+          children: isReactReduxAvailable ? "Not inside a Redux Provider. Wrap your app with <Provider store={store}>." : "react-redux not installed. Run: npm install react-redux"
+        })]
+      }), !isEnabled && isInstrumented && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.disabledBanner,
+        testID: `${_testIDs.REDUX_TEST_ID}-banner-disabled`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
+          size: 14,
+          color: _sharedUi.night.color.warning
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.disabledText,
+          children: "Action capture is disabled"
+        })]
+      }), captureMechanism === "patch" && !_reduxActionStore.reduxActionStore.isCaptureSuppressed() && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.disabledBanner,
+        testID: `${_testIDs.REDUX_TEST_ID}-banner-patch`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
+          size: 14,
+          color: _sharedUi.night.color.warning
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.disabledText,
+          children: "Top-level capture only \u2014 thunk/RTK Query internals aren't visible. Put import '@buoy-gg/redux' first in your app entry (or add buoyReduxMiddleware) for full capture."
+        })]
+      }), hasLockedActions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        style: styles.lockedBanner,
+        onPress: handleUpgradePress,
+        activeOpacity: 0.8,
+        testID: `${_testIDs.REDUX_TEST_ID}-locked`,
+        accessibilityRole: "button",
+        accessibilityLabel: `${lockedActionCount} older ${lockedActionCount === 1 ? "action" : "actions"} locked. Upgrade to see them.`,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
+          size: 14,
+          color: _sharedUi.night.color.accent
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+          style: styles.lockedText,
+          testID: `${_testIDs.REDUX_TEST_ID}-locked-text`,
+          children: [lockedActionCount, " older ", lockedActionCount === 1 ? "action" : "actions", " locked"]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.upgradeBadge,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.upgradeBadgeText,
+            children: "UPGRADE"
+          })
+        })]
+      }), visibleActions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+        ref: flatListRef,
+        testID: `${_testIDs.REDUX_TEST_ID}-list`,
+        data: visibleActions,
+        renderItem: renderItem,
+        keyExtractor: keyExtractor,
+        contentContainerStyle: styles.listContent,
+        showsVerticalScrollIndicator: true,
+        ..._sharedUi.EVENT_LIST_PRESET
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyState, {
+        isEnabled: isEnabled,
+        query: searchText,
+        totalActions: stats.totalActions
+      })]
+    })
+  });
+  const upgradeModal = /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
+    visible: showProModal,
+    onClose: () => setShowProModal(false),
+    featureName: "Full Action History"
+  });
+
+  // The ONLY difference between the phone and the desktop dashboard is which
+  // shell the header, body and footer go in. Everything above this is shared.
+  if (inline) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.TickProvider, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.inlineRoot,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.inlineHeader,
+          ..._sharedUi.windowDragProps,
+          children: renderHeaderContent()
+        }), body, footerNode]
+      }), upgradeModal]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.TickProvider, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
+      visible: visible,
+      onClose: onClose,
+      onMinimize: onMinimize,
+      persistenceKey: persistenceKey,
+      header: {
+        showToggleButton: true,
+        customContent: renderHeaderContent()
+      },
+      onModeChange: handleModeChange,
+      enablePersistence: true,
+      initialMode: "bottomSheet",
+      enableGlitchEffects: true,
+      disableScrollWrapper: listOwnsScroll,
+      styles: {},
+      footer: footerNode,
+      footerHeight: footerHeight,
+      children: body
+    }), upgradeModal]
+  });
+}
+
+/**
+ * The same Redux tool as `ReduxModal`, rendered INLINE for hosts that place
+ * tools in a panel rather than a modal. Exists so there is exactly one
+ * implementation — the desktop dashboard used to ship its own copy of this
+ * component's header, action list and detail router.
+ */
+function ReduxToolView(props = {}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReduxModal, {
+    ...props,
+    inline: true,
+    visible: true,
+    onClose: () => {}
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  inlineRoot: {
+    flex: 1,
+    minHeight: 0,
+    // Transparent so the desktop workbench's hoisted sky (one field spanning
+    // sidebar + panel) shows through — the shell paints its base beneath it.
+    backgroundColor: "transparent"
+  },
+  inlineHeader: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: _sharedUi.macOSColors.border.default,
+    // Clear, like Bench — the host's hoisted sky shows through the header.
+    backgroundColor: "transparent"
+  },
+  container: {
+    flex: 1,
+    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
+    backgroundColor: "transparent"
+  },
+  headerChipRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  headerChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.border
+  },
+  headerChipActive: {
+    // Active chip chrome takes the night accent, not info-cyan.
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
+  },
+  headerChipLabel: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: _sharedUi.night.color.textTertiary
+  },
+  headerChipValue: {
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: _sharedUi.monoFont
+  },
+  headerActionButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: _sharedUi.night.color.surfaceElevated,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.border,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  headerActionButtonDisabled: {
+    opacity: 0.55
+  },
+  headerActionButtonActive: {
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderColor: _sharedUi.night.color.accentBorderStrong
+  },
+  startButton: {
+    backgroundColor: _sharedUi.macOSColors.semantic.successBackground,
+    borderColor: _sharedUi.macOSColors.semantic.success + "40"
+  },
+  stopButton: {
+    backgroundColor: _sharedUi.macOSColors.semantic.errorBackground,
+    borderColor: _sharedUi.macOSColors.semantic.error + "40"
+  },
+  errorBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: _sharedUi.night.color.dangerSoft,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.danger + "20"
+  },
+  errorText: {
+    color: _sharedUi.night.color.danger,
+    fontSize: 11,
+    flex: 1
+  },
+  disabledBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: _sharedUi.night.color.warningSoft,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.warning + "20"
+  },
+  disabledText: {
+    color: _sharedUi.night.color.warning,
+    fontSize: 11,
+    flex: 1
+  },
+  listContent: {
+    paddingTop: 8,
+    paddingBottom: 20
+  },
+  // Locked actions banner styles
+  lockedBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: _sharedUi.night.color.accentSoft,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.night.color.accentBorder
+  },
+  lockedText: {
+    color: _sharedUi.night.color.accent,
+    fontSize: 11,
+    fontWeight: "500",
+    flex: 1
+  },
+  upgradeBadge: {
+    backgroundColor: _sharedUi.night.color.accent,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4
+  },
+  upgradeBadgeText: {
+    // The night accent takes dark ink.
+    color: _sharedUi.night.color.onAccent,
+    fontSize: 9,
+    fontWeight: "700",
+    letterSpacing: 0.5
+  }
+});